/* ============================================================
   ViberSpace — about surface. "Standing Question Set".

   The page is the review an enterprise runs before it clears a
   platform, published before it is sent. Its argument is carried
   by the composition rather than by copy: an answer with something
   real behind it is stamped — the world's foil wash under its live
   notch — and an answer with nothing behind it stays on bare sheet.
   Section C and D are visibly, deliberately blank, and that blank
   is the page's most honest object.

   Surface-only. The world lives in sheet_core.css.
   ============================================================ */

/* ---------- Head ---------- */
.rec-head{ padding:clamp(36px,5vw,66px) 0 clamp(30px,4vw,48px) }
.rec-head-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(26px,4vw,60px); align-items:start;
}

/* ---------- The answer sheet ----------
   A form's summary box: the count, then every answer as a keyed cell. */
.tally .face{ padding:clamp(20px,2.4vw,28px) }
.tally h2{
  margin:0 0 16px; padding:0 0 14px;
  font:700 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--mountain);
}
.tally .spec dt{ letter-spacing:.1em }

/* The grid of answers. Hairlines are drawn by the cells themselves rather than by
   a coloured container showing through the gaps, so a partial last row leaves bare
   sheet — an unused cell on a form — instead of a block of hairline grey. */
/* The key takes the world's chamfer rather than closing as a plain rectangle —
   nothing else on this sheet ends in a square corner. Built as the world builds
   every chamfer: the rule painted beneath, the face above, both clipped by the
   same polygon, so a real hairline continues along the diagonal. */
.gidx-cut{
  margin-top:clamp(18px,2vw,24px);
  background:var(--rule); padding:var(--hair);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.gidx{
  display:grid; grid-template-columns:repeat(7,1fr);
  background:var(--sheet);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.gidx a{
  position:relative; padding:14px 0;
  display:flex; align-items:center; justify-content:center;
  background:var(--sheet); color:var(--ink-2); text-decoration:none;
  /* Twenty-one anchors, so the boundary is the world's functional rule grey —
     mountain is never the sole edge of something you can click. The outer frame
     belongs to the chamfer wrapper, so cells draw only the divisions between them. */
  border:1px solid var(--rule); border-width:0 1px 1px 0;
  font:700 10.5px/1 var(--mono); letter-spacing:.06em;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.gidx a:nth-child(7n){ border-right-width:0 }
.gidx a:nth-last-child(-n+7){ border-bottom-width:0 }
.gidx a:hover{ background:var(--sheet-2); color:var(--ink) }
/* an answer with something behind it: the world's selected-row field. */
.gidx a.on{ background:var(--foil-wash); color:var(--ink) }
/* Hover marks the cell with the world's functional edge rather than a second gold
   field — twenty-one cells share this grid and foil stays the page's one field. */
.gidx a.on:hover{ background:var(--foil-wash) }
.gidx a:hover{ outline:1px solid var(--rule); outline-offset:-1px }
/* the live notch, at cell scale — foil never fills the cell, because twenty-one
   of these share one viewport and a saturated grid would break the One Field Rule. */
.gidx a.on::after{
  content:""; position:absolute; top:0; right:0; width:9px; height:9px;
  background:var(--foil); clip-path:polygon(100% 0,100% 100%,0 0);
}

/* The swatch is a miniature of the cell it explains, so it is a field rather than
   the world's line swatch — and the stamped one carries the notch, because the
   notch is the signal, not the wash. */
.tally .legend{ margin-top:16px }
.tally .legend i{
  position:relative; width:16px; height:16px; border:1px solid var(--rule);
  background:var(--sheet);
}
.tally .legend i.on{ background:var(--foil-wash) }
.tally .legend i.on::after{
  content:""; position:absolute; top:0; right:0; width:7px; height:7px;
  background:var(--foil); clip-path:polygon(100% 0,100% 100%,0 0);
}

/* ---------- Where the answers stand, section by section ---------- */
.bysec{ list-style:none; margin:clamp(18px,2vw,24px) 0 0; padding:16px 0 0; border-top:1px solid var(--mountain) }
.bysec a{
  display:flex; align-items:baseline; gap:11px; padding:7px 0;
  text-decoration:none; color:var(--ink);
  transition:color .18s var(--ease);
}
.bysec a:hover{ color:var(--valley-ink) }
.bysec .l{ font:700 10.5px/1.6 var(--mono); letter-spacing:.16em; color:var(--ink-2); flex:0 0 auto }
.bysec .n{
  font:500 11px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  flex:1 1 auto; min-width:0;
}
.bysec .dots{ flex:1; min-width:16px; border-bottom:1px dotted var(--mountain); transform:translateY(-4px) }
.bysec .v{
  font:700 11px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--valley-ink); white-space:nowrap; flex:0 0 auto;
}
/* nothing stands behind this section, so its figure is not a data value */
.bysec .v.none{ color:var(--ink-2) }

/* ---------- The one authored moment ----------
   The sheet stamps itself on arrival: each earned notch scales in from its own
   corner, in reading order, exactly as the notch does everywhere in this world.
   Nothing is revealed — every cell, code and field is already painted, so the
   page is complete before the animation runs and complete without it. Reduced
   motion is honoured globally in sheet_core.css and again below. */
.gidx a.on::after{
  transform:scale(0); transform-origin:100% 0;
  animation:stamp .42s var(--ease) both;
  animation-delay:calc(var(--i,0) * 46ms);
}
@keyframes stamp{ from{ transform:scale(0) } to{ transform:scale(1) } }

@media (prefers-reduced-motion:reduce){
  .gidx a.on::after{ animation:none; transform:scale(1) }
}

/* ---------- The question set ---------- */
.qsec{ scroll-margin-top:96px }
.qsec + .qsec{ margin-top:var(--gap) }
.qsec .face{ padding:0 }
/* The bar and its referent — the section letter every answer and grid cell is
   keyed to — are the world's .dhead device, in sheet_core.css. Only the deltas
   are stated here. */
.qsec h2{ --dhead-gap:12px; line-height:1 }

/* ---------- An answer ---------- */
/* An answer is a claim beside its evidence: the question and its verdict occupy
   one column, the fact standing behind that verdict occupies the next. A reviewer
   can read straight down either one. */
.qrow{
  position:relative;
  display:grid; align-items:baseline;
  grid-template-columns:34px minmax(0,1.18fr) minmax(0,1fr);
  gap:0 clamp(20px,2.4vw,40px);
  padding:15px 20px 16px;
  scroll-margin-top:96px;
}
.qrow + .qrow{ border-top:1px solid var(--mountain) }
.qrow .code{
  font:700 10.5px/1.75 var(--mono); letter-spacing:.16em; color:var(--ink-2);
}
/* The verdict holds the first line and the leader always reaches it; a long
   question wraps beneath itself rather than pushing its own answer away. */
.qrow .line{
  grid-column:2; margin:0;
  display:flex; align-items:baseline; gap:12px; flex-wrap:nowrap;
}
/* The questions are this page's body copy rather than supporting card prose, so
   they sit on the world's running-prose step and the evidence beneath them steps
   down — a claim and its backing separate by an obvious size step. */
.qrow .q{ flex:1 1 auto; min-width:0; font-size:15px; line-height:1.6; color:var(--ink) }
.qrow .dots{ flex:1; min-width:24px; border-bottom:1px dotted var(--mountain); transform:translateY(-4px) }
/* the answer is a value the page knows — blue only when something stands behind it */
.qrow .a{
  flex:0 0 auto;
  font:700 11.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap;
}
.qrow .note{
  grid-column:3; margin:0; max-width:60ch;
  font-size:12.5px; line-height:1.7; color:var(--ink-2);
}
.qrow .note a{ text-underline-offset:3px }

/* An answer with something built behind it: stamped field, live notch, blue value. */
.qrow--on{ background:var(--foil-wash) }
.qrow--on .a{ color:var(--valley-ink) }
.qrow--on::after{
  content:""; position:absolute; top:0; right:0; width:12px; height:12px;
  background:var(--foil); clip-path:polygon(100% 0,100% 100%,0 0);
}

/* arriving from the grid: the world's focus colour marks where you landed */
.qrow:target{ outline:2px solid var(--valley-ink); outline-offset:-2px }

/* ---------- The standing note ---------- */
.standing .face{ padding:clamp(22px,3vw,38px) }
.standing .head{ margin-bottom:clamp(18px,2.4vw,26px) }
.standing-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3.4vw,48px);
}
.standing-grid p{ margin:0; max-width:60ch; font-size:15px; line-height:1.75; color:var(--ink-2) }

/* ---------- Adaptation ---------- */
@media (max-width:1080px){
  /* The proposition leads; the answer sheet follows what it summarises. */
  .rec-head-grid{ grid-template-columns:1fr; gap:34px }
  .tally{ max-width:520px }
  .standing-grid{ grid-template-columns:1fr; gap:22px }

  /* Two columns no longer fit a readable measure each, so the evidence goes
     under the verdict it supports rather than being squeezed beside it. */
  .qrow{ grid-template-columns:34px minmax(0,1fr); align-items:start }
  .qrow .note{ grid-column:2; margin-top:8px }
}

@media (max-width:700px){
  /* Too narrow for a leader to do its job: a dotted line running to the edge with
     its answer wrapped onto the next row ties nothing to anything. The answer sits
     under its question instead, and the leader is dropped rather than left
     pointing at empty sheet. */
  .qrow .dots{ display:none }
  .qrow .line{ display:block }
  .qrow .a{ display:block; margin-top:6px }
  .qrow .note{ margin-top:9px }
}

@media (max-width:520px){
  .qsec h2,
  .qrow{ padding-inline:15px }
  .tally{ max-width:none }
  /* The key keeps its seven-wide shape — the page in miniature is the point of it —
     and gains height instead, so each cell clears a 44px target. */
  .gidx a{ padding:18px 0 }

  /* Same reasoning as the answer rows: a section name that wraps leaves its leader
     as a stub pointing at nothing, so the leader goes and the figure is carried to
     the edge by the name itself. The rows also gain the height a touch target needs. */
  .bysec a{ padding:14px 0 }
  .bysec .dots{ display:none }
  .bysec .v{ margin-left:auto }
}