/* ============================================================
   ViberSpace — documentation surface. "Unlock Ladder".

   The page is ordered by the thing that actually governs what a
   reader can reach: their account level. Each rung states the one
   action that raises it and draws the command palette as it stands
   at that level — the palette is the only way between surfaces, so
   the palette growing by a row IS the progression.

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

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

/* The readout is a world primitive; the distance to it belongs to the surface. */
.docs-head .readout{ margin-top:clamp(30px,4vw,54px) }

/* Anchored targets clear the sticky masthead. */
[id]{ scroll-margin-top:96px }

/* ---------- Keyed surface index ----------
   The reference-lookup affordance: every surface, the level that
   opens it, and a jump to the rung that explains it. */
.key .face{ padding:0 }
.key h2{
  margin:0; padding:15px 20px;
  font:700 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--mountain);
}
.key ul{ list-style:none; margin:0; padding:0 }
.key li + li a,
.key li + li .row{ border-top:1px solid var(--mountain) }
.key a,
.key .row{
  display:flex; align-items:center; gap:11px; padding:10px 20px;
  text-decoration:none; color:var(--ink);
  transition:background .18s var(--ease);
}
.key a:hover{ background:var(--sheet-2) }
.key .g{ width:15px; height:15px; flex:0 0 auto; color:var(--ink-2) }
.key .n{ font:700 12.5px/1.4 var(--mono); letter-spacing:.02em }
.key .dots{ flex:1; border-bottom:1px dotted var(--mountain); transform:translateY(-3px) }
.key .l{
  font:700 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--valley-ink); white-space:nowrap;
}
/* the two surfaces the palette does not currently list */
.key .off .n,
.key .off .g{ color:var(--ink-2) }
.key .off .l{ color:var(--ink-2) }
.key .note{
  margin:0; padding:12px 20px; border-top:1px solid var(--mountain);
  background:var(--sheet-2);
  font:500 11px/1.6 var(--mono); letter-spacing:.04em; color:var(--ink-2);
}

/* ---------- Getting started ---------- */
.moves{ counter-reset:move; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.moves > li{ counter-increment:move }
.moves .face{ padding:24px; height:100% }
/* The ordinal sits on the heading line, not on a label line above it: this is
   an ordered procedure, so the number is information, not a kicker. */
.moves h3{
  font:700 15px/1.3 var(--display); letter-spacing:.04em; text-transform:uppercase;
  margin:0 0 9px;
}
.moves h3 .ord{ color:var(--ink-2); margin-right:.6em }
.moves p{ margin:0; font-size:13px; line-height:1.7; color:var(--ink-2) }
.moves p + p{ margin-top:10px }

/* keycaps: the two shortcuts that move you at all */
.keys{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px }
.kbd{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; background:var(--sheet-2); border:1px solid var(--rule);
  font:700 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
}
.kbd b{ color:var(--valley-ink); font-weight:700 }

/* ---------- The ladder ---------- */
.ladder{
  display:grid; grid-template-columns:190px minmax(0,1fr);
  gap:clamp(20px,3vw,44px); align-items:start;
}

/* wayfinding rail — the climb, always in view */
.rail-doc{ position:sticky; top:90px }
.rail-doc h2{
  margin:0 0 2px; padding:0 0 12px;
  font:700 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}
.rail-doc ol{ list-style:none; margin:0; padding:0 }
.rail-doc a{
  display:flex; align-items:baseline; gap:10px; position:relative;
  padding:11px 14px 11px 12px; text-decoration:none; color:var(--ink-2);
  border-top:1px solid var(--mountain);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.rail-doc li:first-child a{ border-top:0 }
.rail-doc .n{ font:700 10.5px/1.4 var(--mono); letter-spacing:.16em; flex:0 0 auto }
.rail-doc .t{ font:700 11.5px/1.4 var(--mono); letter-spacing:.06em }
.rail-doc a:hover{ background:var(--sheet-2); color:var(--ink) }
/* the live marker: the world's gold corner notch, scaled in */
.rail-doc a::before{
  content:""; position:absolute; top:0; right:0; width:18px; height:18px;
  background:var(--foil); clip-path:polygon(100% 0,100% 100%,0 0);
  transform:scale(0); transform-origin:100% 0;
  transition:transform .18s var(--ease);
}
.rail-doc a[aria-current="true"]{ background:var(--foil-wash); color:var(--ink) }
.rail-doc a[aria-current="true"]::before{ transform:scale(1) }

/* ---------- A rung ---------- */
.rungs{ display:flex; flex-direction:column; gap:var(--gap) }
.rung{ scroll-margin-top:96px }
.rung .face{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:stretch;
}
.rung .txt{ padding:clamp(22px,2.6vw,32px) }
/* The level is part of the rung's name, carried on the heading line. */
.rung h3{
  font:italic 700 clamp(24px,2.5vw,32px)/1.06 var(--display);
  letter-spacing:-0.01em; text-transform:uppercase; margin:0 0 16px;
}
/* On the heading line, at heading size — not a label stacked above it. */
.rung h3 .lv{ color:var(--ink-2) }
.rung h3 .lv::after{ content:" · " }
.rung p{ margin:0 0 18px; font-size:13.5px; line-height:1.7; color:var(--ink-2); max-width:52ch }
.rung p:last-of-type{ margin-bottom:20px }
.rung .spec{ padding-top:16px; border-top:1px solid var(--mountain) }

/* the figure: the palette as it stands at this level */
.rung .fig{
  margin:0; padding:clamp(18px,2vw,26px);
  background:var(--sheet-2); border-left:1px solid var(--mountain);
  display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.rung .fig svg{ display:block; width:100%; height:auto }
.rung figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.rung .fig .cap{
  font:500 10.5px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.rung .synthetic{ margin-top:0 }

/* ---------- The one authored moment ----------
   The first rung seats its arriving row: the world's live notch scales in from
   its own corner, exactly as the notch does everywhere else. Nothing is
   revealed — the row, its label and its leader are already painted; only the
   marker moves. Reduced motion collapses it via the global rule in
   sheet_core.css.
   It fires when the first rung actually reaches the reader, not on load — the
   ladder sits below the fold, and a moment nobody is present for is not a
   moment. Without JavaScript the class never lands and the notch is simply
   at rest, so nothing is gated on the observer. */
.rung.is-seated .fig .notch{
  transform-box:fill-box; transform-origin:100% 0;
  animation:seat .72s var(--ease) both;
}
@keyframes seat{ from{ transform:scale(0) } to{ transform:scale(1) } }

/* ---------- What you own ---------- */
.owns .face{ padding:clamp(22px,3vw,38px) }
.owns-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,56px); align-items:start }
.owns ul{ list-style:none; margin:0; padding:0 }
.owns li{
  display:flex; gap:14px; padding:15px 0; border-top:1px solid var(--mountain);
  font-size:13.5px; line-height:1.65;
}
.owns li:first-child{ border-top:0; padding-top:0 }
.owns li svg{ flex:0 0 auto; margin-top:2px }
.owns li b{ display:block; font:700 12px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase }
.owns li span{ color:var(--ink-2) }

/* ---------- Adaptation ---------- */
@media (max-width:1080px){
  .docs-head-grid{ grid-template-columns:1fr; gap:34px }
  .ladder{ grid-template-columns:1fr; gap:24px }
  /* The rail stops being a rail and becomes a header index. */
  .rail-doc{ position:static }
  .rail-doc ol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }
  .rail-doc li:nth-child(2) a{ border-top:0 }
  .owns-grid{ grid-template-columns:1fr; gap:30px }
}

@media (max-width:760px){
  .moves{ grid-template-columns:1fr }
  /* The instruction figure follows the rung it illustrates, never precedes it. */
  .rung .face{ grid-template-columns:1fr }
  .rung .fig{
    border-left:0; border-top:1px solid var(--mountain);
    order:2;
  }
  .rung .txt{ order:1 }
}

@media (max-width:640px){
  /* Too narrow for a leader to do its job: a dotted line that runs to the edge
     while its value sits on the next row ties nothing to anything. The term
     goes above the value instead, and the leader is dropped rather than left
     pointing at empty sheet. */
  .rung .spec div{ display:block }
  .rung .spec .dots{ display:none }
  .rung .spec dd{ white-space:normal; margin-left:0; text-align:left; margin-top:1px }
  .rung .spec div + div{ margin-top:10px }
}

@media (max-width:520px){
  .rail-doc ol{ grid-template-columns:1fr }
  .rail-doc li:nth-child(2) a{ border-top:1px solid var(--mountain) }
}