/* ============================================================
   ViberSpace — sign-in surface. "Countersigned Slip".

   Signing in is one slip with two counterfoils: the half the
   reader fills in (an address) and the half the system fills in
   (a code). Both are printed from the first viewport, so the
   whole transaction is legible before any of it is started —
   the second step is never hidden behind a page change.

   Progress is carried by the face tone, not by a meter:
     step one  — your half on sheet (live), our half sunk (waiting)
     step two  — your half foil-wash under the live notch
                 (countersigned), our half up to sheet (live)

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

/* ---------- The head ----------
   Ranged left, like every surface in this world except contact — the
   composition here is a document, not a symmetric fork, so nothing
   asks for centring. */
.slip-sec{ padding-top:clamp(22px,2.6vw,36px) }
.slip-head h1{ margin-bottom:16px }
/* The sub-clause steps down rather than matching the statement line for
   line: at display size a longer second line reads louder than the
   sentence it hangs off. Set as a fraction of the H1 so it tracks the
   same clamp down to phone widths. */
.slip-head h1 .thin{ margin-top:12px; font-size:.46em; letter-spacing:-0.01em }
.slip-head .lede{ margin-bottom:clamp(22px,2.8vw,34px) }

/* ---------- The slip ----------
   One panel, two counterfoils, divided by a perforation. The panel
   supplies the boundary and the chamfer; the halves supply the tone. */
.slip .face{
  padding:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.counter{ display:flex; flex-direction:column; min-width:0; position:relative }

/* The tear line. Dotted in the decorative grey, at the 2px weight the world's
   own legend uses to draw a crease — it divides two halves of one bounded
   panel rather than bounding anything itself, and at 1px it reads as a hairline
   boundary instead of a perforation. */
.counter + .counter{ border-left:2px dotted var(--mountain) }

/* The half that has not been reached yet is sunk; the live half sits on
   sheet. This pair is the progress indicator, and it is the reason the
   slip needs no other one. */
.counter--waiting{ background:var(--sheet-2) }

/* A half with something behind it takes the world's stamped field and its
   data-blue value — the treatment an about answer earns by being backed by
   something that exists. It does not take the notch: the notch is the world's
   *live* mark, and a countersigned half is finished, not active. Wash and blue
   carry earned; the notch stays with the half holding the task. */
.counter--signed{ background:var(--foil-wash) }
.counter--signed .counter-head{ border-bottom-color:var(--rule) }

/* The head states which half this is, with the ordinal on the heading line
   in full ink — the device the about sheet uses for its section letter and
   contact uses for its routing answer. The sequence is the information
   here: which half you are on is what the surface is about. */
/* The bar and its referent are the world's .dhead device, in sheet_core.css.
   This slip states no delta; the class remains so the signed half can promote
   its own hairline above. */

.counter-body{
  flex:1; display:flex; flex-direction:column;
  padding:clamp(16px,1.9vw,22px) 20px clamp(20px,2.4vw,28px);
}
.counter-note{
  margin:clamp(14px,1.8vw,20px) 0 0; max-width:56ch;
  font-size:12.5px; line-height:1.7; color:var(--ink-2);
}
.counter-note a{ color:var(--valley-ink) }
/* Keyed to the body rather than to .counter: the already-signed-in state is a
   single panel with no counterfoil around it, and it wears the same rows. */
.counter-body .spec{ font-size:13px }
.counter-body .spec dt{ letter-spacing:.1em }
/* An address is whatever length the reader's is: it wraps inside the half
   that holds it rather than running out of the panel. */
.counter--signed .spec dd{ white-space:normal; overflow-wrap:anywhere }

/* What the half produces, stated above the field that produces it — the
   fact a labelled input cannot show, and the one the countersigned state
   prints back, so the empty slip and the filled one read as one object in
   two states. */
.half-spec{
  margin-bottom:clamp(16px,1.9vw,20px);
  padding-bottom:clamp(12px,1.5vw,15px);
  border-bottom:1px solid var(--mountain);
}

/* The body is a column, so a control sitting directly in it would stretch to
   the full width of the half. Buttons keep their own size. */
.counter-body form{ margin:0 }
.counter-body > .btn,
.counter-body > .btn-edge{ align-self:flex-start }

/* ---------- The code ----------
   Six ruled boxes on the slip. Live, they are the world's field vocabulary
   at cell scale: square, hairlined in the functional grey, mono, and taking
   the data colour on focus. */
.code{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(6px,.9vw,10px);
}
.code-cell{
  width:100%; height:clamp(50px,5.6vw,58px); padding:0; margin:0;
  background:var(--sheet); color:var(--ink);
  border:1px solid var(--rule); border-radius:0;
  font:700 clamp(19px,2.2vw,23px)/1 var(--mono); text-align:center;
  -webkit-appearance:none; appearance:none;
  transition:border-color .18s var(--ease);
}
.code-cell:hover{ border-color:var(--ink-2) }
/* The digit controller moves focus from cell to cell as the code is typed, and
   a control focused in code is not a :focus-visible match — so the ring has to
   answer to :focus as well, or the reader loses their place mid-code. */
.code-cell:focus,
.code-cell:focus-visible{
  border-color:var(--valley-ink);
  outline:2px solid var(--valley-ink); outline-offset:2px;
}

/* Printed, not yet real. Drawn in the decorative grey with no ground of its
   own, inside an already-bounded panel — so it reads as a blank on a form
   rather than as a control that will not take a keystroke. It is not in the
   accessibility tree; the spec rows beside it say what lands here. */
.code--blank .code-cell{
  background:transparent; border-color:var(--mountain);
  display:block;
}

/* A code that came back wrong is marked by weight of line, like every other
   correction in this world: the edge doubles to ink — the strongest neutral
   on the sheet — and no hue is introduced. */
.code--bad .code-cell{ border-color:var(--ink); border-width:2px }

.code-wrap{ margin-bottom:clamp(16px,2vw,22px) }
.code-wrap .ferr{ margin-top:11px }
/* The drawn cells and the rows that explain them are one block. */
.code--blank + .spec{ margin-top:clamp(16px,2vw,22px) }

/* Asking for another code is a repair, not the action of the page, so it is
   set as the masthead sets a link rather than as a second button. */
.relink{ margin-top:clamp(6px,1vw,10px) }
.relink form{ display:inline-flex }
.relink button{
  display:inline-flex; align-items:center; min-height:44px;
  background:none; border:0; padding:0; cursor:pointer;
  font:700 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
/* The rule is drawn on the label, not on the 44px target, so the underline sits
   against the text while the hit area still clears a fingertip. */
.relink button > span{ border-bottom:2px solid var(--mountain); padding-bottom:4px }
/* The rule is drawn at rest, not conjured on hover: under a foil button, a
   bare line of mono caps reads as a caption rather than as the repair it is. */
.relink button:hover{ color:var(--ink) }
.relink button:hover > span{ border-bottom-color:var(--foil) }

/* ---------- The gate ----------
   The invitation constraint stated as a fact of the system, with the route
   to the desk that answers it — not an apology and not fine print. */
.gate-row{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(14px,2vw,26px); margin-top:clamp(20px,2.6vw,30px);
}
.gate-row .gate{ margin:0 }
.gate-row .btn-edge{ margin-left:auto }
.gate-note{
  margin:clamp(12px,1.6vw,16px) 0 0; max-width:60ch;
  font-size:12.5px; line-height:1.7; color:var(--ink-2);
}

/* ---------- Already in ----------
   No slip to sign, so none is drawn. */
.already .face{ padding:0 }
.already .counter-body{ padding-top:clamp(18px,2.2vw,24px) }

/* ---------- The one authored moment ----------
   The mark moves across the perforation. Arriving at the second step, the gold
   notch seats on the half that now holds the task — the world's live marker,
   scaled in from its own corner, spent on the one thing this surface has to
   say: your half is done, this one is yours now.

   Nothing is revealed by it. The stamped field, the address, every spec row and
   all six cells are painted before it runs, so the slip is whole without the
   motion and whole for a reader who has asked for less of it. */
.counter--live::after{
  content:""; position:absolute; top:0; right:0; width:34px; height:34px;
  background:var(--foil);
  clip-path:polygon(100% 0,100% 100%,0 0);
  transform-origin:100% 0;
  animation:stamp-seat .52s var(--ease) both;
}
@keyframes stamp-seat{ from{ transform:scale(0) } to{ transform:scale(1) } }

@media (prefers-reduced-motion:reduce){
  /* Pinned rather than left to the global 0.001ms reduction, so a reduced-
     motion reader gets the marked slip whole instead of a flicker. */
  .counter--live::after{ animation:none; transform:scale(1) }
}

/* ---------- Adaptation ---------- */
@media (max-width:900px){
  /* The counterfoils stack, so the perforation turns with them — at the same
     2px crease weight it carries upright. A tear line that thins when it turns
     is a different line. */
  .slip .face{ grid-template-columns:1fr }
  .counter + .counter{ border-left:0; border-top:2px dotted var(--mountain) }
  .code-cell{ height:56px }
}

@media (max-width:560px){
  .gate-row{ gap:14px }
  .gate-row .btn-edge{ margin-left:0; width:100% }
  .gate-row .btn-edge > .btn--ghost{ justify-content:center }

  /* The head block must not eat the viewport the slip is the point of. At this
     width the statement, its sub-clause and the lede were taking 43% of the
     screen, which pushed the second counterfoil's drawn cells — the thing that
     shows sign-in is a two-part slip — off the bottom. Every measure here is
     spacing; no row, rule or sentence is dropped to buy the room. */
  .slip-sec{ padding-top:12px }
  .slip-head h1{ margin-bottom:10px }
  .slip-head h1 .thin{ margin-top:7px }
  .slip-head .lede{ margin-bottom:16px }
  .counter-body{ padding-top:14px }
  .half-spec{ margin-bottom:12px; padding-bottom:10px }
}

@media (max-width:520px){
  .counter-head,
  .counter-body{ padding-inline:15px }
  .code{ gap:5px }
  /* Height only — the cell's figure stays on its own clamp, whose floor
     already fits six cells across the narrowest sheet. */
  .code-cell{ height:52px }
  /* A leader squeezed to nothing beside a value that had to wrap ties nothing
     to anything, so the term goes above its value — every pair the same way,
     because a value right-aligned under a wrapped row lands nearer the next
     term than its own. */
  .counter-body .spec div{ display:block }
  .counter-body .spec .dots{ display:none }
  .counter-body .spec dd{ white-space:normal; margin-left:0; text-align:left; margin-top:1px }
  .counter-body .spec div + div{ margin-top:10px }
}