/* Styles for /message and /message/sent.
   Kellie's palette, flipped: orange ground instead of cream, so the page is
   recognisably hers but plainly not her homepage. The receipt is the only
   cream thing on the page, which makes it the thing you look at. */

:root {
  --cream: #f6eedc;
  --ink: #12100e;
  --orange: #ce5b22;
  --mustard: #e2a32c;
  --teal: #1b6e68;
  --paper: #fffdf7;

  --display: "Chillax", "Century Gothic", "Futura", system-ui, sans-serif;
  --text: "Switzer", "Inter", system-ui, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--orange);
  color: var(--cream);
  font-family: var(--text);
  min-height: 100vh;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shell { width: 100%; max-width: 34rem; }

.logo {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin-bottom: 1.6rem;
}

.logo--small { max-width: 13rem; margin-bottom: 1.4rem; }

.eyebrow {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 1rem;
}

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}

.blurb {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 30rem;
  opacity: 0.92;
  margin-bottom: 2.2rem;
}

/* --- the form ----------------------------------------------------------- */

label {
  display: block;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

input[type="text"],
textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 0.75rem 0.85rem;
  resize: none;
}

input[type="text"]:focus,
textarea:focus {
  outline: 3px solid var(--mustard);
  outline-offset: 2px;
}

textarea { min-height: 8.5rem; line-height: 1.5; }

.field { margin-bottom: 1.5rem; }

.counter {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-align: right;
  margin-top: 0.4rem;
  opacity: 0.85;
}

.counter.over { color: var(--ink); font-weight: 700; opacity: 1; }

/* The honeypot. Hidden from people, visible to bots reading the HTML.
   Deliberately not display:none -- some bots skip those. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button.send {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cream);
  background: var(--ink);
  border: 3px solid var(--ink);
  padding: 0.9rem 1.6rem;
  width: 100%;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease;
}

button.send:hover:not(:disabled) { background: var(--teal); border-color: var(--teal); }
button.send:active:not(:disabled) { transform: translateY(2px); }
button.send:disabled { opacity: 0.55; cursor: progress; }

.note {
  font-size: 0.78rem;
  line-height: 1.55;
  opacity: 0.8;
  margin-top: 1.5rem;
}

.error {
  background: var(--ink);
  color: var(--cream);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.error:empty { display: none; }

/* --- the receipt --------------------------------------------------------- */

.receipt,
.stub {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  /* inherits the size set on .paper-well, so its ch units line up */
  font-size: 1em;
  line-height: 1.5;
  padding: 1.4rem 2ch 2.2rem;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  /* torn edge along the bottom */
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 8px),
    96% 100%, 92% calc(100% - 7px), 88% 100%, 84% calc(100% - 6px),
    80% 100%, 76% calc(100% - 8px), 72% 100%, 68% calc(100% - 5px),
    64% 100%, 60% calc(100% - 8px), 56% 100%, 52% calc(100% - 6px),
    48% 100%, 44% calc(100% - 8px), 40% 100%, 36% calc(100% - 5px),
    32% 100%, 28% calc(100% - 7px), 24% 100%, 20% calc(100% - 6px),
    16% 100%, 12% calc(100% - 8px), 8% 100%, 4% calc(100% - 6px),
    0 100%
  );
}

/* The blank paper sitting in the slot before anything has printed. Same
   torn edge as the receipt, so it reads as the same roll. */
.stub {
  height: 2.6rem;
  padding: 0;
}

.status-line {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.home {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 3px solid var(--cream);
  padding-bottom: 3px;
}

.home:hover { color: var(--ink); border-color: var(--ink); }