/* ============================================================
   ASKDOCS — COMPONENTS
   Every component in the spec page, in spec order. Radius 0
   throughout; the only curve is .dot. No shadows anywhere.
   ============================================================ */


/* ---- Mark · wordmark lockup -------------------------------- */

.mark {
  display: flex;
  align-items: center;
  gap: var(--gap-lockup);
}

.mark__square {
  display: block;
  width: 14px;
  height: 14px;
  background: var(--red);
  flex-shrink: 0;
}

.mark__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-mark);
  letter-spacing: var(--ls-mark);
  text-transform: uppercase;
}

/* The lockup image. Sized by height so the two renditions (ink on paper in the
   masthead, paper on ink in the footer) stay identical, and the intrinsic
   width/height attributes on the img reserve the box before it decodes. */
.mark__lockup {
  height: 26px;
  width: auto;
}

/* The masthead's rendition runs larger — the mark anchors the frame's top
   left corner against the nav pill on the right. The footer keeps the
   26px base so the closing chrome stays quiet. */
.site-head .mark__lockup { height: 42px; }


/* ---- CTA · primary ----------------------------------------
   Red block. Hover flips red→ink and slides 10px right.
   It moves; it does not glow. */

.cta {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
}

.cta--primary {
  justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
  height: 76px;
  padding: 0 clamp(20px, 2.5vw, 32px);
  background: var(--red);
  transition:
    background var(--dur-cta) var(--ease),
    transform  var(--dur-cta) var(--ease);
}
.cta--primary:hover {
  background: var(--ink);
  transform: translateX(var(--shift));
}

.cta--primary .cta__label {
  font-family: var(--font-display);
  font-weight: 800;
  /* Floor is 19px, not the reference's 17px. Paper on --red measures 3.54:1,
     which meets WCAG AA only under the large-text rule (>=18.66px at 700+).
     At a 17px floor the label failed AA below ~1120px and passed above it.
     19px is the smallest floor that holds at every width. Deliberate,
     measured divergence from the reference build — see DESIGN-NOTES. */
  font-size: clamp(19px, 1.7vw, 22px);
  letter-spacing: var(--ls-cta);
  color: var(--paper);
}

.cta--primary .cta__arrow { font-size: 24px; color: var(--paper); }

/* Closing CTA — the same component at statement scale. */
.cta--wide {
  justify-content: space-between;
  width: min(560px, 100%);
  height: 96px;
  padding: 0 clamp(20px, 3vw, 36px);
  background: var(--red);
  transition:
    background var(--dur-cta) var(--ease),
    transform  var(--dur-cta) var(--ease);
}
.cta--wide:hover {
  background: var(--ink);
  transform: translateX(var(--shift));
}
.cta--wide .cta__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 28px);
  letter-spacing: var(--ls-cta);
  color: var(--paper);
}
.cta--wide .cta__arrow { font-size: 30px; color: var(--paper); }

/* A settled reveal pins `transform: none` at .js .r.in — outrank it so the
   hover shift survives on CTAs that are themselves reveal targets. */
.js .cta--primary.in:hover,
.js .cta--wide.in:hover { transform: translateX(var(--shift)); }


/* ---- CTA · secondary --------------------------------------
   2px ink outline, red arrow, faint ink wash on hover. */

.cta--secondary {
  gap: 28px;
  height: 76px;
  padding: 0 30px;
  border: var(--bd-panel) solid var(--ink);
  transition: background var(--dur-hover) var(--ease);
}
.cta--secondary:hover { background: var(--ink-wash); color: var(--ink); }

.cta--secondary .cta__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}
.cta--secondary .cta__arrow { font-size: 20px; color: var(--red); }


/* ---- CTA · masthead ---------------------------------------- */

.cta--nav {
  gap: var(--gap-lockup);
  padding: 14px var(--s-3);
  background: var(--red);
  transition: background var(--dur-hover) var(--ease);
}
.cta--nav:hover { background: var(--ink); }

.cta--nav .cta__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-mark);
  letter-spacing: var(--ls-ordinal);
  text-transform: uppercase;
  color: var(--paper);
}

/* Arrows are type, not an icon set. */
.cta__arrow {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}


/* ---- Tick · the red beat marker ---------------------------- */

.tick {
  display: block;
  height: 5px;
  width: 52px;
  background: var(--red);
}


/* ---- Bar · the red statement rule --------------------------
   Sits under a display headline. Width is authored per use. */

.bar {
  display: block;
  height: 12px;
  background: var(--red);
}

/* Band cap on a ruled-line stack — order resolved. */
.bar--cap { height: 18px; }


/* ---- Dot · the only curve in the system -------------------- */

.dot {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--red);
}


/* ---- Ruled-line stack -------------------------------------
   A document abstracted to its rules. Ragged widths early in
   the narrative, flush at the end. Never an icon, never art. */

.stack__line {
  display: block;
  height: 5px;
  background: var(--ink);
  width: var(--lw, 100%);
  margin-bottom: var(--line-pitch);
}


/* ---- Doc scrap · scattered, pre-order ---------------------- */

.scatter {
  position: relative;
  flex: 0 1 var(--split-aside);
  width: var(--split-aside);
  height: 480px;
}

.doc-scrap {
  position: absolute;
  display: block;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 14px 16px;
  border: var(--bd-panel) solid var(--rule-mid);
  background: var(--paper-veil);
  transform: rotate(var(--rot, 0deg));
}

/* The one "hot" item in a set carries a 2px red border. */
.doc-scrap--hot { border-color: var(--red); }

.doc-scrap__line {
  display: block;
  height: 5px;
  width: var(--lw, 100%);
  background: var(--rule-mid);
  margin-bottom: 10px;
}
.doc-scrap__line:last-child { margin-bottom: 0; }
.doc-scrap--hot .doc-scrap__line { background: var(--red-line); }


/* ---- Doc row · format tag + ruled lines -------------------- */

.doc-row {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 74px;
  padding: 0 18px;
  border: var(--bd-panel) solid var(--rule-mid);
}
/* Gaps live between rows only, so the band's own 40px lead-in is exact. */
.doc-row + .doc-row { margin-top: 14px; }

.doc-row__tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-tag);
  width: 56px;
  flex-shrink: 0;
}

.doc-row__lines { flex: 1; }

.doc-row__line {
  display: block;
  height: 5px;
  width: var(--lw, 100%);
  background: var(--rule-mid);
  margin-bottom: 9px;
}
.doc-row__line:last-child { margin-bottom: 0; }


/* ---- Rail · vertical red spine ----------------------------- */

.rail {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--rail-w);
  /* 4 rows × 74 + 3 gaps × 14. Authored per use as --rail-h when the
     set is a different length: 3 rows = 250px. */
  height: var(--rail-h, 338px);
  background: var(--red);
}


/* ---- Band · resolved state --------------------------------- */

.band {
  height: 56px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.band__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-band);
  letter-spacing: var(--ls-band);
  text-transform: uppercase;
  color: var(--paper);
}


/* ---- Input · square field ---------------------------------- */

.field {
  display: flex;
  border: var(--bd-panel) solid var(--rule-mid);
  max-width: min(700px, 100%);
  transition: border-color var(--dur-hover) var(--ease);
}
.field:focus-within { border-color: var(--red); }   /* no glow, no radius */

.field__input {
  flex: 1;
  min-width: 0;
  padding: 22px var(--s-3);
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.field__input::placeholder { color: var(--ink-faint); }

.field__submit {
  background: var(--ink);
  color: var(--paper);
  padding: 22px 30px;
  border: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-ordinal);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
}
.field__submit:hover { background: var(--red); }


/* ---- Beat · tick + label + body ---------------------------- */

.beat__label { margin-bottom: var(--s-2); }
.beat__ord   { margin-bottom: 18px; }


/* ---- Step · numbered node on a red rail --------------------
   The 4px rail is a pseudo-element so it can draw in with
   reveal-x; the node straddles it via a -9px offset. */

.step {
  position: relative;
  min-width: 0;
  padding-top: var(--bd-rail);
}

.step::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--bd-rail);
  background: var(--red);
}

.js .step::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-x) var(--ease) var(--d, 0ms);
}
.js .step.in::before { transform: scaleX(1); }

.step__node {
  width: 22px;
  height: 22px;
  background: var(--red);
  margin: -9px 0 40px;
}

.step .ordinal    { margin-bottom: 14px; }
.step .item-label { margin-bottom: var(--s-2); }


/* ---- Containment mark · ownership as a frame --------------- */

.containment {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
  aspect-ratio: 1;
}

.containment__frame {
  position: absolute;
  inset: 0;
  border: var(--bd-frame) solid var(--ink);
}

.containment__inner {
  position: absolute;
  inset: 33px;
  border: var(--bd-panel) solid var(--rule-mid);
}

.containment__core {
  position: absolute;
  left: 47px;
  top: 47px;
  width: 98px;
  height: 98px;
  background: var(--red);
}


/* ---- Tie · the vertical connector between flow stages ------
   A stack line stood on end. reveal-y draws it downward, so a
   chain of stages reads as one continuous motion. */

.tie {
  display: block;
  width: 5px;
  height: 34px;
  background: var(--ink);
}
.tie--red { background: var(--red); }


/* ---- Query · a question, abstracted ------------------------
   The wordmark's own 14px red square against one ink rule.
   A question is a mark and a line — never a UI mock. */

.query {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 62px;
  padding: 0 18px;
  border: var(--bd-panel) solid var(--rule-mid);
}

.query__line {
  display: block;
  flex: 1;
  height: 5px;
  background: var(--ink);
}


/* ---- Answer · ruled lines carrying citation chips -----------
   Reuses .doc-row__line for the prose. The chips are the step
   node at type scale: the same 22px red square. */

.answer {
  padding: 18px;
  border: var(--bd-panel) solid var(--rule-mid);
}

.answer__cites {
  display: flex;
  gap: var(--s-1);
  margin-top: 18px;
}

.cite {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
}


/* ---- Boundary · what runs inside your network ---------------
   The containment mark at row scale. The 10px ink frame holds
   the parts you run; a red tie leaves the frame to reach a
   model provider you configure. The crossing is the point. */

.boundary__frame {
  border: var(--bd-frame) solid var(--ink);
  padding: 6px 22px;
}

.boundary__row {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 58px;
  border-bottom: var(--bd-hair) solid var(--rule);
}
.boundary__row:last-child { border-bottom: 0; }

.boundary__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-tag);
  white-space: nowrap;
}

.boundary__row .doc-row__line { flex: 1; margin-bottom: 0; }

.boundary__out {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 62px;
  padding: 0 20px;
  border: var(--bd-panel) solid var(--rule-mid);
}


/* ---- Reduced motion: pseudo-element rails ------------------ */

@media (prefers-reduced-motion: reduce) {
  .js .step::before { transform: none; }

  /* Must match the specificity of the .in:hover rules above, or the
     hover shift outranks this and survives the reduced-motion request. */
  .js .cta--primary.in:hover,
  .js .cta--wide.in:hover,
  .cta--primary:hover,
  .cta--wide:hover { transform: none; }
}


/* ---- The lockup as the home button --------------------------
   The nav no longer carries a Home item — the mark is the way
   home, which is what every site in the Task 2 study does. A
   convention only helps if it looks like one, so the mark gets
   the affordances a link is expected to have: a pointer, and a
   hover that moves the way every other CTA on the site moves.

   It shifts rather than glows or changes colour: the lockup is
   the one identity mark and recolouring it on hover would put a
   second red in the chrome. */

.mark--home {
  cursor: pointer;
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}

.mark--home:hover { transform: translateX(3px); }
.mark--home:active { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .mark--home:hover { transform: none; opacity: .75; }
}


/* ============================================================
   THE MONO VOICE
   A third type voice, added because the subject matter demands
   one. Everything the product actually is — an image tag, a
   compose command, a model name, a path, a port — was being set
   in Nunito, which reads as prose ABOUT software. Set in mono it
   reads as the software.

   Square, hairline-boxed, no radius: it inherits the panel spec
   rather than inventing a pill.
   ============================================================ */

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-ligatures: none;
}

/* Inline: a tinted box, not a coloured word. The red is reserved. */
:not(pre) > code {
  padding: .12em .4em;
  background: var(--ink-wash);
  border: var(--bd-hair) solid var(--rule);
  color: var(--ink);
  white-space: nowrap;
}

/* A key, not a command. */
kbd {
  padding: .1em .45em;
  border: var(--bd-hair) solid var(--rule-mid);
  border-bottom-width: 2px;
  background: var(--paper);
}

/* index.html does not load pages.css, so the dialog carries its own
   copy of the form-field look; on subpages both rules apply and agree. */
.notify .form-field__label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.notify .form-field__input {
  display: block;
  width: 100%;
  padding: 14px var(--s-2);
  border: var(--bd-panel) solid var(--ink-faint);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-item);
  line-height: 1.4;
  transition: border-color var(--dur-hover) var(--ease);
}
.notify .form-field__input:focus { outline: none; border-color: var(--red); }
.notify .form-field__input::placeholder { color: var(--ink-faint); }