/* ==========================================================================
   exp35 . s35-requirement.css
   Section one, "One living requirement". Founder review items 8, 9, 10, 11
   and the landing end of item 7.

   Loaded AFTER assets/graph-sections.css, so this file re-cuts only what the
   review changed and inherits the rest of the card chassis (.gs-card,
   .gs-card-h, .gs-card-id, .gs-state, .gs-say).

   Contract with the shell
     - colour comes ONLY from tokens (--paper --card --ink --ink-rgb --ink-60
       --muted --hair --hair-strong --pass --unknown --signal --signal-rgb
       --radius --mono --prose --measure-body), so all 8 themes follow.
     - rails come from s35-craft.css (--rail-*). This file adds no indents.
     - motion reuses the shell's arrival system only: [data-reveal] on the
       figure, .fx + --td on the rows, .dr on the check stroke. No script.

   SEMANTIC COLOUR — state is never carried by the accent:
     approved / verified evidence   var(--pass)
     relationships and identifiers  var(--unknown, var(--muted))
     plain structure and rules      var(--ink) / var(--hair)
     var(--signal)                  the current selection and the one
                                    affordance. Never a state.
   Nothing here is --fail or --stale. SYS-REQ-009 is approved and passing, and
   every defect in its history is a fixed record — DEFECT-260727-WWWY, the
   latest of the three, is disposition status covered_by_requirement and was
   the reason the requirement was re-approved — not a live failure, so the
   restrained amber/red the review allows is not required.
   ========================================================================== */

/* ==========================================================================
   ITEM 8 . TWO-COLUMN COMPOSITION
   copy 38% | empty 6% | object 56%. The three add to 100, so the percentages
   below are the measured ones, not a target. The object starts lower than the
   heading: the eye reads the claim, then drops right into the record.
   ========================================================================== */
.rq-grid{
  display:grid;
  grid-template-columns:minmax(0,38fr) minmax(0,56fr);
  column-gap:6%;
  align-items:start;
}
.rq-copy{min-width:0;}
/* the copy column IS the measure: 38% of the content width is ~52 characters
   at the body size, inside the review's 50-62 band. The 60ch cap from
   graph-sections.css would only ever be reached on very wide viewports. */
.rq-copy .section-head{max-width:var(--measure-body,60ch);}
/* review item 14: section body 16-18px, line-height 1.5-1.65, 50-62 character
   measure. The shell's default .lead is 19.2px, which in a 38% column falls to
   a 49-character line; 17px puts the size inside the band AND the measure back
   inside it at ~55 characters. */
.rq-copy .lead{font-size:1.0625rem;line-height:1.6;}
/* the copy column's foot */
.rq-cta{margin:clamp(1.5rem,2.6vw,2.05rem) 0 0;font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;}

/* the deliberate vertical offset. ~60px at 1440. */
.rq-art{margin:clamp(2.2rem,4.2vw,3.6rem) 0 0;min-width:0;}

/* mobile stacks normally (review item 8, last line) */
@media (max-width:960px){
  .rq-grid{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .rq-art{margin-top:clamp(1.7rem,4vw,2.3rem);}
}

/* ==========================================================================
   ITEM 9 . THE CARD IS THE FOREGROUND
   The ambient graph is thin, dim and uncertain. This is solid and precise.
   ========================================================================== */

/* the whole card is one link */
.rq-open{
  display:block;color:inherit;text-decoration:none;
  border-radius:var(--radius);
}
.rq-open:focus{outline:none;}

.rq-card{
  --rq-pad:1.4rem;
  --rq-head-pad:.95rem;
  max-width:none;
  position:relative;
  /* stronger TOP border: the edge the hero's line lands on is the edge that
     reads first */
  border-top:2px solid var(--hair-strong);
  /* very subtle shadow at rest. The phosphor halo is an affordance, so it is
     held back for hover and focus. */
  box-shadow:
    0 1px 0 rgba(var(--ink-rgb),.05),
    0 26px 62px -34px rgba(var(--ink-rgb),.55);
  transition:border-color .28s ease,box-shadow .28s ease;
}
/* no lift, no bounce (review item 9, last line) */
.rq-card,.rq-card:hover{transform:none;}

/* a nearly opaque surface that separates from the ground. Only the themes
   whose --card sits within a few points of --paper need the lift; the rest
   already separate on their own tokens. */
html[data-theme="terminal"] .rq-card,
html[data-theme="verified"] .rq-card{
  background:linear-gradient(rgba(var(--ink-rgb),.055),rgba(var(--ink-rgb),.055)),var(--card);
}

/* NO COUNTER-GRID HERE. A viewport-fixed light counter-grid used to sit on
   .rq-card::after to claw the card back out of the old scanline overlay; the
   overlay is now rebuilt inside main (s35-craft.css §4) and the card takes its
   texture from that ladder, so the counter-grid only over-brightened the
   surface. Do not re-add it — measured, it put a +9.7L band on a 14L card. */

/* header: the identity row, and the edge the hero's line lands on */
.rq-head{padding-top:var(--rq-head-pad);padding-bottom:var(--rq-head-pad);}
.rq-card .gs-card-id{font-size:.95rem;letter-spacing:.06em;}
.rq-state{letter-spacing:.15em;font-size:.68rem;}

/* --------------------------------------------------------------------------
   ITEM 7 . THE LANDING IS NOT DRAWN HERE. DO NOT PUT IT BACK.
   The card used to draw its own landing: `.rq-card .gs-card-id::before` (a
   1px tick) and `::after` (a 5px glowing node) hung off the identifier's box,
   on the card's top border. assets/herograph.js drew a landing of its own at
   the end of the crossing trace, from a separate measurement.

   Two markers derived independently is how the join came apart. The CSS pair
   was painted unconditionally -- it did not know whether the trace had
   arrived, or whether there was a trace at all -- so at every scroll position
   where the trace was still incomplete the visitor got a lit node on the card
   with nothing reaching it, and a green stroke ending in mid-air a couple of
   hundred pixels away. That is the founder's broken-join capture.

   The landing now has exactly one author: the overlay writes the node, its
   halo and the tick from CR.x1/CR.y1, which are the same two numbers the
   path's final command uses. The marker cannot be anywhere except where the
   line arrives, and when there is no line there is no marker.
   Anything the card needs to say about receiving the edge belongs in the top
   border above, not in a second marker.
   ------------------------------------------------------------------------ */
.rq-card .gs-card-id{position:relative;}

/* --------------------------------------------------------------------------
   HIERARCHY . the requirement sentence dominates
   It is the approved description of SYS-REQ-009, word for word, so it is set
   in prose and given the room a real normative sentence needs.
   ------------------------------------------------------------------------ */
.rq-say{
  max-width:48ch;
  font-size:clamp(1.06rem,1.55vw,1.3rem);
  line-height:1.42;
  letter-spacing:-.012em;
  padding:clamp(1.35rem,2.4vw,1.8rem) var(--rq-pad) clamp(1.45rem,2.6vw,1.95rem);
}

/* --------------------------------------------------------------------------
   THE FIELD LIST
   COMPONENT / RESTS ON / IMPLEMENTED BY / VERIFIED BY / OBLIGATIONS /
   DEFECT HISTORY. Six lone label/value rows, one value each: read down they
   walk the object outward. A 2-up grid would pair fields with no relationship
   to each other and turn the record into a dashboard.
   ------------------------------------------------------------------------ */
.rq-rows{margin:0;border-top:1px solid var(--hair);}
.rq-row{
  position:relative;
  display:grid;grid-template-columns:minmax(10.5rem,13rem) minmax(0,1fr);
  align-items:baseline;gap:.2rem 1.2rem;
  padding:.9rem var(--rq-pad) .95rem;
  border-bottom:1px solid var(--hair);
}
.rq-row:last-child{border-bottom:0;}

/* labels: dim mono, and never below the review's 11-12px metadata floor */
.rq-lab{
  display:flex;align-items:center;gap:.6em;margin:0;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.45;
  color:var(--unknown,var(--muted));
}
.rq-lab::before{
  content:"";flex:0 0 auto;width:6px;height:6px;background:var(--hair-strong);
  transition:background-color .24s ease,box-shadow .24s ease;
}
/* the one green on the field list: the row that carries the evidence */
.rq-row.is-ok .rq-lab{color:var(--pass);}
.rq-row.is-ok .rq-lab::before{background:var(--pass);}
/* relationships are structure, not state */
.rq-row.is-rel .rq-lab::before{background:var(--unknown,var(--muted));}

/* values: ordinary ones off-white, verified ones green */
.rq-val{
  margin:0;font-family:var(--mono);font-size:.95rem;line-height:1.5;
  color:var(--ink);overflow-wrap:anywhere;
}
.rq-word{font-weight:500;}
.rq-dim{color:var(--unknown,var(--muted));}
.rq-n{
  font-size:1.2rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.rq-row.is-ok .rq-n{color:var(--pass);}
/* an identifier is a thing you could open, so it is drawn as a token — but a
   token is structure, so it takes --unknown and never the accent */
.rq-id{
  display:inline-block;padding:.16rem .46rem;
  border:1px solid var(--hair);border-radius:calc(var(--radius) - 3px);
  font-size:.82rem;letter-spacing:.02em;white-space:nowrap;
  color:var(--unknown,var(--muted));
  transition:color .24s ease,border-color .24s ease,background-color .24s ease;
}

/* STATE IS PER OBJECT, NOT PER CARD.
   The header's green APPROVED chip is the state of SYS-REQ-009. Its parent
   STK-REQ-005 is status: review — a candidate, and the site's own rule is that
   nothing is judged against a candidate — so it carries its own chip in the
   same shape as the header's, one row down. Same geometry, different value:
   the reader learns that state belongs to an object, and can never read the
   green badge as covering the whole card.
   Colour is --unknown, not amber. A candidate is not a hazard; it is a thing
   with no verdict yet, which is exactly what --unknown means in this system.
   The header chip stays --pass, so the pair is legible at a glance. */
.rq-chip{
  display:inline-flex;align-items:center;margin-left:.5rem;
  padding:.16rem .5rem;
  border:1px solid var(--hair-strong);border-radius:calc(var(--radius) - 3px);
  font-family:var(--mono);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--unknown,var(--muted));
  vertical-align:.08em;
}
/* THE CLAUSE THAT MAKES THE CANDIDATE READ AS THE RULE, NOT AS A HOLE.
   The REVIEW chip is two rows under a green APPROVED header, and the homepage
   is the one screen where the visitor has no other context: without a word of
   consequence a careful reader stops at "your approved requirement rests on an
   unapproved one?" and has to leave the page for the answer. The row therefore
   carries the site's own rule as a clause — "a candidate, and nothing is judged
   against it" — in the metadata tier, one line, no marker and no footnote
   apparatus. It rides .rq-dim, so it inherits the contrast floor's remap of the
   dim value colour and states no colour of its own; the ID and the chip keep
   the row's scan and the clause sits under them.
   Size is the label/chip tier (12.48px), above the review's 12px floor and far
   under the 20.8px requirement sentence, so the hierarchy is unchanged. */
.rq-note{
  display:block;margin:.3rem 0 0;
  font-size:.78rem;line-height:1.45;letter-spacing:.01em;
}

html[data-theme="terminal"] .rq-chip,
html[data-theme="acid"] .rq-chip{border-radius:0;}
html[data-theme="brutal"] .rq-chip{border-width:2px;border-radius:0;}
html[data-theme="verified"] .rq-chip{color:var(--muted);}

/* --------------------------------------------------------------------------
   THE AFFORDANCE
   Present at rest so the card never looks inert; stronger on hover and on
   keyboard focus. This is the only place --signal appears in the section
   apart from the selection node above.
   ------------------------------------------------------------------------ */
.rq-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--rq-pad);
  border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-60);
  transition:color .24s ease,border-color .24s ease;
}
.rq-foot-a{transition:transform .24s ease;}
/* the destination, said plainly: the visitor lands on the Proof portal's page
   for this object, not on a page of ours */
.rq-foot-d{color:var(--unknown,var(--muted));}
.rq-open:hover .rq-foot-d,
.rq-open:focus-visible .rq-foot-d{color:inherit;}

/* --------------------------------------------------------------------------
   HOVER AND FOCUS . one or two relationships illuminate
   The two rows that point at another object in the graph — RESTS ON and
   DEFECT HISTORY — are the relationships. Nothing moves.
   ------------------------------------------------------------------------ */
@media (hover:hover){
  .rq-open:hover .rq-card,
  .rq-open:focus-visible .rq-card{
    border-color:rgba(var(--signal-rgb),.5);
    border-top-color:var(--signal);
    box-shadow:
      0 1px 0 rgba(var(--ink-rgb),.05),
      0 26px 62px -34px rgba(var(--ink-rgb),.55),
      0 0 38px -16px rgba(var(--signal-rgb),.34);
  }
}
.rq-open:focus-visible .rq-card{
  border-color:rgba(var(--signal-rgb),.5);
  border-top-color:var(--signal);
  outline:2px solid var(--signal);outline-offset:3px;
}
.rq-open:hover .rq-row.is-rel .rq-lab::before,
.rq-open:focus-visible .rq-row.is-rel .rq-lab::before{
  background:var(--signal);box-shadow:0 0 8px rgba(var(--signal-rgb),.55);
}
.rq-open:hover .rq-row.is-rel .rq-id,
.rq-open:focus-visible .rq-row.is-rel .rq-id{
  color:var(--ink);border-color:rgba(var(--signal-rgb),.55);
}
.rq-open:hover .rq-foot,
.rq-open:focus-visible .rq-foot{color:var(--signal);border-top-color:rgba(var(--signal-rgb),.4);}
.rq-open:hover .rq-foot-a,
.rq-open:focus-visible .rq-foot-a{transform:translate(2px,-2px);}

@media (prefers-reduced-motion:reduce){
  .rq-card,.rq-lab::before,.rq-id,.rq-foot,.rq-foot-a{transition:none;}
  .rq-open:hover .rq-foot-a,.rq-open:focus-visible .rq-foot-a{transform:none;}
}

/* ==========================================================================
   RESPONSIVE
   The label column survives to the phone at 11rem ("IMPLEMENTED BY" is the
   longest label and fits), but below 520px the value needs the full width, so
   the pair stacks and the label becomes a caption above its value.
   ========================================================================== */
@media (max-width:640px){
  .rq-card{--rq-pad:1.05rem;}
  .rq-row{grid-template-columns:minmax(10rem,13rem) minmax(0,1fr);}
}
@media (max-width:520px){
  .rq-row{grid-template-columns:minmax(0,1fr);gap:.42rem;padding-top:.85rem;padding-bottom:.9rem;}
  /* the affordance wraps at this width, and a flex row would strand the arrow
     vertically centred beside two lines of text. Inline it instead, so it
     always sits immediately after the last word. */
  .rq-foot{display:block;letter-spacing:.1em;}
  .rq-foot-a{margin-left:.5em;}
}

/* ==========================================================================
   THEME POLISH
   Geometry and weight only. Hue always comes from the tokens above.
   ========================================================================== */

/* brutal: hard plates, thick rules, no softness */
html[data-theme="brutal"] .rq-card{border-top-width:4px;box-shadow:8px 8px 0 var(--ink);}
html[data-theme="brutal"] .rq-rows{border-top:3px solid #000;}
html[data-theme="brutal"] .rq-row{border-bottom:3px solid #000;}
html[data-theme="brutal"] .rq-row:last-child{border-bottom:0;}
html[data-theme="brutal"] .rq-foot{border-top:3px solid #000;}
html[data-theme="brutal"] .rq-id{border-width:2px;border-radius:0;}

/* terminal / acid: square corners on every token */
html[data-theme="terminal"] .rq-id,
html[data-theme="acid"] .rq-id{border-radius:0;}

/* verified: this theme deliberately sinks --unknown to #3A403B — "structure at
   rest, the graph asleep" — which is right for a dormant edge and wrong for a
   field name. The theme's own contract gives labels, captions and fine print
   to --muted, so the label text and the identifier token take it here; the
   at-rest dot keeps --unknown, so the semantic is unchanged and only the
   reading layer comes back up. */
html[data-theme="verified"] .rq-lab,
html[data-theme="verified"] .rq-id,
html[data-theme="verified"] .rq-dim{color:var(--muted);}

/* riso: the display face already reaches .gs-say through graph-sections.css;
   the field list stays mono so the record keeps reading as a record. */