/* ==========================================================================
   Kite Slip — product screens
   ------------------------------------------------------------------------
   Loaded after styles.css and depends on it. Every colour here is a token
   defined there; nothing new is introduced. In particular --rust keeps the
   meaning styles.css assigns it and no other: a citation that did not verify.
   Nothing that merely failed, took too long, or needs attention is allowed
   to borrow that colour, because the moment it means two things it stops
   being evidence.

   The reading path is styled to work with no JavaScript at all. Anything
   that only reveals itself through a script is decoration on top of a page
   that already reads.
   ========================================================================== */

.skip {
  position: absolute;
  left: -9999px;
  padding: 12px 18px;
  border-radius: var(--r-chip);
  background: var(--canary);
  color: var(--canary-ink);
}
.skip:focus { left: 12px; top: 12px; z-index: 50; }

/* ------------------------------------------------------------- page frame */

.app {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 34px) clamp(16px, 3vw, 28px) clamp(80px, 12vh, 140px);
  background: var(--canvas);
  border-radius: var(--r-panel);
  min-height: calc(100vh - 16px);
}

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}
.appbar__mark { display: flex; align-items: center; gap: 10px; }
.appbar__mark img { height: 22px; width: auto; }

/* The balance is a fact about their account, so it is set in the same mono
   the rest of the site uses for data rather than in prose type. */
.meter {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--text-2);
}
.meter b { color: var(--text); font-weight: 500; }
.meter--low { border-color: rgb(233 206 99 / .4); }
.meter--low b { color: var(--canary); }
.meter--out { border-color: rgb(217 115 85 / .45); }
.meter--out b { color: var(--rust); }

.lab {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}

h1.title {
  margin: clamp(32px, 5vw, 54px) 0 14px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -.02em;
  line-height: 1.12;
}
.sub { color: var(--text-2); max-width: 58ch; }

/* ------------------------------------------------------------------- ask */

.ask { margin-top: clamp(28px, 4vw, 40px); }
.ask textarea {
  width: 100%;
  min-height: 172px;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--recess);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  resize: vertical;
}
.ask textarea:focus-visible {
  outline: 2px solid var(--canary);
  outline-offset: 2px;
  border-color: transparent;
}
.ask__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--canary);
  color: var(--canary-ink);
  font-weight: 500;
  cursor: pointer;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--quiet {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
}

/* ------------------------------------------------------- generating state */

/* The longest wait in the product: drafting, then verification, then as many
   as two regenerate-and-reverify cycles. It can pass a minute. The steps are
   named as they happen because "loading" for ninety seconds reads as broken,
   and the last line tells them they are allowed to leave. */
.gen {
  margin-top: clamp(28px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: clamp(22px, 3vw, 30px);
}
.gen__steps { margin-top: 18px; display: grid; gap: 13px; }
.gen__step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--text-3);
}
.gen__step[data-state="active"] { color: var(--text); }
.gen__step[data-state="done"] { color: var(--text-2); }
.gen__dot {
  width: 9px; height: 9px; margin-left: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
}
.gen__step[data-state="active"] .gen__dot { opacity: 1; animation: pulse 1.5s var(--ease) infinite; }
.gen__step[data-state="done"] .gen__dot { opacity: .8; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) {
  .gen__step[data-state="active"] .gen__dot { animation: none; }
}
.gen__leave { margin-top: 20px; color: var(--text-3); font-size: .9375rem; }

/* --------------------------------------------------------- withhold notice */

/* Above the reply, never below it. The withheld sentence is usually the
   *limit* on the answer, and skim-and-copy is the behaviour to design for —
   a caveat under a finished-looking draft is a caveat nobody reads. */
.withhold {
  margin-top: clamp(28px, 4vw, 40px);
  padding: 17px 20px;
  border: 1px solid rgb(217 115 85 / .45);
  border-left-width: 3px;
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
  background: rgb(217 115 85 / .07);
  color: var(--rust);
  font-size: .9375rem;
}

/* ----------------------------------------------------------------- reply */

.part {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.part__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line);
}
.part__count { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; color: var(--text-3); }

/* Plain text, preserved exactly. What is on this screen is what goes into the
   message, character for character — no markdown rendering, because the
   reader has no renderer. */
.reply {
  padding: clamp(20px, 2.6vw, 30px);
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.part__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
}
.copied { color: #7FB79A; font-size: .9375rem; }

/* A hard constraint from the design brief: one line, 15px, never reduced.
   It costs characters from a budget the reader is paying by the minute to
   read, so it stays one line — but it does not shrink. */
.reminder {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}

/* --------------------------------------------------------- zero-verified */

/* Not an error screen. Nothing could be confirmed, so nothing is shown as
   though it were confirmed — but what is known without citation is still
   worth their minute, and it is labelled as exactly that. */
.zero {
  margin-top: clamp(28px, 4vw, 40px);
  border: 1px solid rgb(217 115 85 / .4);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.zero__head {
  padding: 18px clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line);
  color: var(--rust);
}

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

.field { display: grid; gap: 8px; margin-top: 20px; }
.field input, .field select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--recess);
  color: var(--text);
}
.field input:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--canary);
  outline-offset: 2px;
}
.field__help { color: var(--text-3); font-size: .875rem; }
.field__err { color: var(--rust); font-size: .875rem; }

.notice {
  margin-top: 22px;
  padding: 16px 19px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--surface);
  color: var(--text-2);
  font-size: .9375rem;
}

/* The app bar's right-hand cluster: balance, then one action. */
.appbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* A primary action sized for chrome rather than for a page. Same shape and
   colour as the main button so it reads as the one thing to do here. */
.btn--sm {
  padding: 9px 17px;
  font-size: .9375rem;
  white-space: nowrap;
}

/* The nudge under a reply: where the family looks when the answer is wrong. */
.part__nudge {
  color: var(--text-3);
  font-size: .9375rem;
  max-width: 46ch;
}
.part__nudge a { color: var(--canary); text-decoration: underline; text-underline-offset: 3px; }

/* A button that has to read as a link, because it does a link's job. Keeps the
   keyboard and screen-reader semantics of a button while looking like prose. */
.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--canary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}