/* The stack - version D's one mechanic, and the markup contract an arm builds
 * its screens against. Ported from mocks/mobile/site/d/mobile-d.css (branch
 * mobile-fable, 9cc2b41).
 *
 * Every rule here is inside the phone breakpoint AND under a page's own
 * declaration, html[data-phone='stack']. Two gates rather than one, because
 * .stack and .sheet are both names the desk site already uses - site/sheet.css
 * gives every route a <main class="sheet">, and site/cabinet.css has a .stack
 * of its own. A page that has not opted in cannot be reached by anything in
 * this file, at any width; that is what let the kit lane land D's chrome on
 * thirty-eight routes while leaving every band of content where master had it.
 *
 * The one number CSS cannot know - a sheet's own rendered height - arrives in
 * --sheet-h from site/phone-stack.js.
 *
 * One rule below carries the fence inside :where() rather than in front of it,
 * so that it weighs nothing: that is what keeps the mechanic ranked over the
 * base the way D wrote it. Its own comment says why. */

@media (max-width: 860px) {
  html[data-phone='stack'][data-phone-kit='on'] .stack { position: relative; }

  /* Each sheet pins under the bar while the next rides over it. A sheet taller
     than the viewport pins by its foot instead - top is where its bottom edge
     meets the viewport's - so its last rows are on screen when the next sheet
     arrives. A pinned sheet is then covered from its foot upward: that is the
     stack, and it is why every sheet ends with the beat - the next sheet's
     edge crosses the beat before it reaches the last row, so the last control
     of a sheet stays tappable for two beats of scroll on top of its own
     height. tools/mobile-gate.py's reach sweep measures exactly that. */
  html[data-phone='stack'][data-phone-kit='on'] .stack > .sheet {
    position: sticky;
    top: min(var(--resurs-bar-height), calc(100svh - var(--sheet-h, 0) * 1px));
  }
  /* D's base for a sheet, and the one rule in this file written at a lower
     weight than the fence would give it.
     In the mock the two rules above and below rank by their selectors alone -
     `.stack > .sheet` (0,2,0) over `.sheet` (0,1,0) - so sticky wins and the
     stack is a stack. The first port prefixed BOTH with the same fence, which
     equalised them at (0,4,1); the later relative rule then won and not one
     sheet pinned on any route. It was invisible until a page opted in, which
     is why this lane's own gate could not see it and lane phone-dossiers
     could (KIT-REQUEST 1).
     `:where()` contributes nothing to specificity, so the fence still decides
     WHICH pages this rule can reach while leaving the two rules ranked exactly
     as D wrote them - whatever order they are read in, and with no !important
     anywhere. The mechanic above is (0,4,1) and the reduced-motion guard at
     the foot of this file is (0,4,1) later, so it still reaches past both.
     min-height and z-index are here for the same reason at the other end of
     the cascade: site/sheet.css gives every route's own <main class="sheet">
     `min-height: 100vh; z-index: 2`, and a stack sheet is not that sheet - a
     short band would otherwise be a screen of white, and the z-index would
     lift the stack out of the order the bar is drawn in (KIT-REQUEST 2). At
     (0,2,0) this outranks that `.sheet` (0,1,0) by weight rather than by link
     order, while an arm's own `.stack > .sheet-hero { min-height: … }` still
     outranks this. */
  :where(html[data-phone='stack'][data-phone-kit='on']) .stack .sheet {
    position: relative;
    min-height: 0;
    z-index: auto;
    background: var(--resurs-ground);
    border-radius: var(--resurs-radius-sheet) var(--resurs-radius-sheet) 0 0;
    box-shadow: var(--resurs-sheet-lift);
    padding: var(--resurs-sheet-pad-top) var(--resurs-gutter) var(--resurs-m-sheet-beat);
  }

  /* The ground sheet of a page: the photograph on the main page, the head band
     on every other. It is the plane the stack rises from, so it has no edge
     and throws no shadow; on a page with no photograph it clears the bar. */
  html[data-phone='stack'][data-phone-kit='on'] .stack .sheet-ground {
    border-radius: 0;
    box-shadow: none;
    padding-top: calc(var(--resurs-bar-height) + var(--resurs-gap-section));
  }
  /* The ground starts at the page's own top edge and pins there, under the bar
     it already clears; a sticky top of 64px here would shove it down over the
     sheet that follows before the first scroll. */
  html[data-phone='stack'][data-phone-kit='on'] .stack > .sheet-ground,
  html[data-phone='stack'][data-phone-kit='on'] .stack > .sheet-hero {
    top: min(0px, calc(100svh - var(--sheet-h, 0) * 1px));
  }

  /* --- what a sheet holds ------------------------------------------------ */
  /* The head of a sheet, and the foot it ends on. One idea per sheet, so one
     heading, one line under it, and the calls it leads to. */
  html[data-phone='stack'][data-phone-kit='on'] .sheet-head { display: grid; gap: 8px; }
  html[data-phone='stack'][data-phone-kit='on'] .sheet-heading {
    font-size: var(--resurs-size-heading);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }
  html[data-phone='stack'][data-phone-kit='on'] .sheet-heading-sm {
    font-size: var(--resurs-size-title);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  html[data-phone='stack'][data-phone-kit='on'] .sheet-subtitle {
    font-size: var(--resurs-size-meta);
    line-height: 1.45;
    color: var(--resurs-ink-muted);
    text-wrap: balance;
  }
  html[data-phone='stack'][data-phone-kit='on'] .sheet-foot {
    margin-top: var(--resurs-m-gap);
    display: grid;
    gap: 8px;
    justify-items: start;
  }

  /* --- the vocabulary a sheet is written in ------------------------------ */
  /* Version D says the same six things on every screen, and the six arms
     behind this lane would otherwise define them six times - which is exactly
     how the 2026-09-03 ports birthed one content module twice. They are the
     mock's own, ported once, here: a row, a link out, running copy, the tinted
     band, numbered steps, and the dashed block that says a thing is not
     written yet. Nothing screen-specific is here - the hero and its glass, the
     mosaic, the axis and the legend belong to the arm that draws that screen. */
  html[data-phone='stack'][data-phone-kit='on'] .rows {
    margin-top: var(--resurs-m-gap); display: grid; gap: 8px;
  }
  html[data-phone='stack'][data-phone-kit='on'] .rows-tight { margin-top: 12px; }
  html[data-phone='stack'][data-phone-kit='on'] .row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--resurs-m-row);
    padding: 10px 14px 10px 10px;
    border-radius: var(--resurs-radius-tile);
    background: var(--resurs-surface);
    color: var(--resurs-ink);
  }
  html[data-phone='stack'][data-phone-kit='on'] .row .plate {
    width: var(--resurs-m-plate); height: var(--resurs-m-plate);
  }
  html[data-phone='stack'][data-phone-kit='on'] .row-body {
    flex: 1; min-width: 0; display: grid; gap: 2px;
  }
  html[data-phone='stack'][data-phone-kit='on'] .row-name {
    font-size: var(--resurs-size-body); font-weight: 500; line-height: 1.3;
  }
  html[data-phone='stack'][data-phone-kit='on'] .row-caption {
    font-size: var(--resurs-size-small); line-height: 1.4; color: var(--resurs-ink-soft);
  }
  html[data-phone='stack'][data-phone-kit='on'] .plate-step { color: var(--resurs-accent); }
  html[data-phone='stack'][data-phone-kit='on'] .step-num {
    font-size: var(--resurs-p-size-step); font-weight: 300; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1;
  }

  html[data-phone='stack'][data-phone-kit='on'] .card-link {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px;
    font-size: var(--resurs-size-small); color: var(--resurs-accent);
  }
  html[data-phone='stack'][data-phone-kit='on'] .card-link .glyph,
  html[data-phone='stack'][data-phone-kit='on'] .quiet-link .glyph,
  html[data-phone='stack'][data-phone-kit='on'] .link-glyph { display: grid; }
  html[data-phone='stack'][data-phone-kit='on'] .crumb {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    font-size: var(--resurs-size-small); color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] .crumb .glyph { display: grid; transform: rotate(180deg); }
  html[data-phone='stack'][data-phone-kit='on'] .actions {
    margin-top: 6px; display: grid; gap: 8px; justify-items: start;
  }
  html[data-phone='stack'][data-phone-kit='on'] .actions .pill-accent {
    width: 100%; justify-content: space-between; min-height: 48px;
  }
  html[data-phone='stack'][data-phone-kit='on'] .prose {
    font-size: var(--resurs-size-body); line-height: 1.55;
  }
  html[data-phone='stack'][data-phone-kit='on'] .prose-muted { color: var(--resurs-ink-soft); }
  html[data-phone='stack'][data-phone-kit='on'] .rule-gap { margin-top: var(--resurs-m-gap); }
  html[data-phone='stack'][data-phone-kit='on'] .audience { display: grid; gap: 8px; }
  html[data-phone='stack'][data-phone-kit='on'] .audience li {
    display: flex; gap: 12px; align-items: baseline;
    font-size: var(--resurs-size-body); line-height: 1.45;
  }
  html[data-phone='stack'][data-phone-kit='on'] .audience li::before {
    content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--resurs-accent); transform: translateY(-3px);
  }

  /* The band: one tinted panel for the one thing that stands above the rows. */
  html[data-phone='stack'][data-phone-kit='on'] .band {
    margin-top: var(--resurs-m-gap);
    display: grid;
    gap: 12px;
    padding: 20px 18px;
    border-radius: var(--resurs-radius-panel);
    background: var(--resurs-tint);
  }
  html[data-phone='stack'][data-phone-kit='on'] .band-head {
    display: flex; align-items: center; gap: 14px;
  }
  html[data-phone='stack'][data-phone-kit='on'] .band .plate {
    width: var(--resurs-m-plate-lg); height: var(--resurs-m-plate-lg); flex: none;
  }
  html[data-phone='stack'][data-phone-kit='on'] .band-name {
    font-size: var(--resurs-size-title); font-weight: 500; line-height: 1.12;
    letter-spacing: -0.02em; text-wrap: balance;
  }
  html[data-phone='stack'][data-phone-kit='on'] .band-line {
    font-size: var(--resurs-size-small); line-height: 1.45; color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] .band-copy {
    font-size: var(--resurs-size-nav); line-height: 1.45;
  }
  html[data-phone='stack'][data-phone-kit='on'] .band .pill-accent {
    width: 100%; justify-content: space-between; min-height: 48px;
  }
  html[data-phone='stack'][data-phone-kit='on'] .band .kicker { color: var(--resurs-ink-muted); }
  html[data-phone='stack'][data-phone-kit='on'] .band .card-link { margin-top: -4px; }

  /* Numbered steps, the numeral drawn by CSS so no digit run is ever typed. */
  html[data-phone='stack'][data-phone-kit='on'] .steps {
    margin-top: 14px; display: grid; gap: 8px; counter-reset: step;
  }
  html[data-phone='stack'][data-phone-kit='on'] .steps li {
    counter-increment: step;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--resurs-m-row);
    padding: 10px 14px 10px 10px;
    border-radius: var(--resurs-radius-tile);
    background: var(--resurs-surface);
    font-size: var(--resurs-size-body);
    line-height: 1.35;
  }
  html[data-phone='stack'][data-phone-kit='on'] .steps li::before {
    content: counter(step, decimal-leading-zero);
    flex: none;
    display: grid;
    place-items: center;
    width: var(--resurs-m-plate); height: var(--resurs-m-plate);
    border-radius: var(--resurs-radius-plate);
    color: var(--resurs-accent);
    font-size: var(--resurs-p-size-step);
    font-weight: 300;
    font-variant-numeric: tabular-nums;
  }

  /* The block that says a thing is not written yet: dashed, never mistaken
     for copy, and never filled with a stand-in. */
  html[data-phone='stack'][data-phone-kit='on'] .pending {
    margin-top: var(--resurs-m-gap);
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border: 1px dashed var(--resurs-placeholder-edge);
    border-radius: var(--resurs-radius-card);
  }
  html[data-phone='stack'][data-phone-kit='on'] .pending .plate {
    width: var(--resurs-m-plate); height: var(--resurs-m-plate);
    flex: none; color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] .pending-copy { display: grid; gap: 4px; }
  html[data-phone='stack'][data-phone-kit='on'] .pending-title {
    font-size: var(--resurs-size-body); font-weight: 500;
  }
  html[data-phone='stack'][data-phone-kit='on'] .pending-hint {
    font-size: var(--resurs-size-small); line-height: 1.45; color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] .note {
    margin-top: 12px; font-size: var(--resurs-size-small);
    line-height: 1.45; color: var(--resurs-ink-muted);
  }

  /* --- reduced motion: no stack; the sheets stand one after the other ----- */
  @media (prefers-reduced-motion: reduce) {
    html[data-phone='stack'][data-phone-kit='on'] .stack > .sheet,
    html[data-phone='stack'][data-phone-kit='on'] .stack > .sheet-ground,
    html[data-phone='stack'][data-phone-kit='on'] .stack > .sheet-hero {
      position: relative;
      top: auto;
    }
  }
}