/* ==========================================================================
   App/game detail card — the hero (DESIGN.md §A6)
   ==========================================================================
   Loaded only by app_detail.html through `page_styles`, so the file is its own scope
   and the selectors are bare. Everything below the hero still runs on site.css's
   `.sec` / `.evidence-list` tree; no approved composition exists for it yet.

   Token map from the approved shell: --apk-shell-line → --border, --apk-shell-paper →
   --sheet, --apk-shell-soft → --soft, --apk-shell-brand → --link, --apk-shell-ink →
   --text, --apk-shell-muted → --muted, --apk-shell-coral → --coral. The shell's palette
   IS ours under other names — light and dark both — so nothing here declares a colour.

   Three deliberate departures from the shell, each forced by a rule that predates it:
   - weight 500 → 600 everywhere. We ship IBM Plex Sans in 400 and 600 only (§A2); the
     shell is set in Inter, which has 500.
   - spacing snapped to the --sN scale (§A10), never the shell's raw px: 46→48, 34→32,
     22→24, 18→16, 11/10/9→12/8. Icon, corner-bracket and record-column geometry are not
     spacing and keep their exact values.
   - the mobile cut is our shared 560px breakpoint, not the shell's 390px preview frame.

   site.css is frozen, so the overrides it needs live here rather than in it.
   -------------------------------------------------------------------------- */

/* ---- Hero grid ----------------------------------------------------------
 * site.css already sets the two columns and the column gap for this class. What the
 * approved page adds is the rule under the whole hero and its own padding: those rules
 * were written when the hero sat inside `.card`, which supplied the side gutter. There
 * is no card now — `main` is the content column — so the side padding goes and the
 * bottom becomes a hairline.
 *
 * Placement, not source order, decides the layout: the action panel is pinned to column 2
 * and everything else to column 1, where it stacks in source order.
 *
 * The panel spans the left column's rows rather than sitting in the first one — pinned to
 * row 1 alone it makes that row as tall as itself, and the description then starts a panel's
 * height below the app's name with nothing in between.
 *
 * Spanning is why the row gap is ZERO and the vertical rhythm comes from each block's own
 * margin instead. Both the description and the taxonomy are conditional, so the span reaches
 * past the rows that exist whenever one is absent; with a row gap those empty implicit rows
 * would each add their gap as dead space under the hero. At zero they cost nothing.
 */
.detail-hero{padding:0 0 var(--s6);border-bottom:1px solid var(--border);
  column-gap:var(--s7);row-gap:0}
.detail-hero>*{grid-column:1}
.detail-action{grid-column:2;grid-row:1/span 3}

/* ---- Identity: icon | (name, developer) --------------------------------- */
.detail-hero__identity{display:flex;gap:var(--s5);align-items:flex-start}
.detail-hero__copy{min-width:0}
/* The icon carries the brand ink and no border: it is a flat tile, and on the cards that
   have a real logo the <img> fills it edge to edge, where a border would read as a frame
   somebody drew around the developer's artwork. */
.icon{border:0;color:var(--link);font-size:32px}
/* Size and line come from --t-h1-page. A long name wraps — never clipped, never
   ellipsised, never shrunk — and `balance` keeps the last line from stranding one word. */
.detail-hero h1{letter-spacing:-.02em;overflow-wrap:anywhere;text-wrap:balance}
.detail-hero__developer{margin:var(--s2) 0 0;font:var(--t-meta);color:var(--muted)}
.detail-hero__source{margin:var(--s2) 0 0;font:var(--t-meta)}

/* ---- Action panel -------------------------------------------------------
 * One shell for all three states; only the contents differ. The corner brackets are the
 * approved page's mark for "this is the panel that acts": two 18px angles in --link,
 * drawn as borders so forced-colors repaints them as shape rather than dropping a
 * background. Decorative by construction — empty content, no DOM node, nothing in the
 * accessibility tree. Not the shared `.bracket` component: that one draws full-height
 * rules down both sides, a different mark.
 */
.detail-action{position:relative;padding:var(--s5);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--sheet)}
.detail-action::before,.detail-action::after{content:"";position:absolute;
  width:18px;height:18px;pointer-events:none}
.detail-action::before{top:-2px;left:-2px;
  border-top:3px solid var(--link);border-left:3px solid var(--link)}
.detail-action::after{right:-2px;bottom:-2px;
  border-right:3px solid var(--link);border-bottom:3px solid var(--link)}

/* Mode marker: a small caps line, never a shield or a trust pill. Coral on the stopped
   state — the one state where the panel reports a closed door. */
.detail-action__scope{margin:0 0 var(--s2);font:var(--t-kicker);letter-spacing:.04em;
  text-transform:uppercase;color:var(--link)}
.detail-action__scope--stopped{color:var(--coral)}
.detail-action__title{margin:0;font:var(--t-h2-interface);color:var(--text)}
.detail-action__copy{margin:var(--s3) 0 var(--s4);font:var(--t-body);color:var(--muted)}

/* The one primary action fills the panel. site.css sizes `.dl`; what the approved page
   adds is the full width and, on DATA_LINK, an outlined button instead of a filled one —
   the external link is offered, not urged. */
.detail-action .dl{width:100%;font:var(--t-h3)}
.detail-action .dl.ext{background:transparent;color:var(--link);
  border:1px solid var(--link)}
/* Stopped and historical states offer a jump, not a button. */
.detail-action__secondary{display:inline-flex;align-items:center;min-height:44px;
  font:var(--t-body);color:var(--text)}

/* Label/value pair under the action — compatibility and licence on HOST, where the
   external link goes on DATA_LINK. Pushed apart, so the value reads as the answer. */
.detail-action__meta{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--s3);margin-top:var(--s3);
  font:var(--t-meta);color:var(--muted)}

/* The recorded facts, ruled off from the action above them. Narrower label column than
   site.css's `.fact-list`: this list sits in the 310px panel, not the page width. */
.detail-action__record{display:grid;grid-template-columns:108px minmax(0,1fr);
  gap:0 var(--s3);margin:var(--s4) 0 0;padding:var(--s3) 0 0;
  border-top:1px solid var(--border);font:var(--t-meta)}
.detail-action__record dt{padding:var(--s1) 0;color:var(--muted)}
.detail-action__record dd{margin:0;padding:var(--s1) 0;color:var(--text);
  overflow-wrap:anywhere}

/* The SHA-256 of the file the button hands over. `.hash`/`.k` have never had a rule
   anywhere; this is their first. Mono, selectable, wrapping — a hash is meant to be
   copied and compared, so it may not be clipped or made unselectable. */
.detail-action__hash{margin-top:var(--s5)}
.detail-action__hash .k{font:var(--t-h3);color:var(--text)}
.detail-action__hash .mono{display:block;margin-top:var(--s3);padding:var(--s4);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface2);
  font:var(--t-hash);color:var(--text);overflow-wrap:anywhere;user-select:text}

/* The independent-distribution statement is quiet text, not a framed note: inside the
   panel a second bordered box competes with the panel itself. site.css's `.note` is that
   box, so its fill and rule are dropped here. Same words. */
.detail-action__note{margin:var(--s3) 0 0;padding:0;border:0;background:none;
  font:var(--t-meta);color:var(--muted)}
.detail-action__help{margin-top:var(--s3)}
.detail-action__help summary{display:flex;align-items:center;min-height:44px;
  font:var(--t-body);color:var(--text);cursor:pointer}
.detail-action__help p{max-width:var(--measure);margin:var(--s1) 0 var(--s3);
  font:var(--t-body);color:var(--muted)}

/* What the panel does NOT cover, ruled in coral down the side — the one place on the
   card where a limit is stated as loudly as the claim. */
.detail-action__limit{margin:var(--s4) 0 0;padding-left:var(--s4);
  border-left:3px solid var(--coral);font:var(--t-meta);color:var(--muted)}
.detail-action__limit strong{color:var(--text)}

/* ---- Description and taxonomy ------------------------------------------ */
.detail-description{margin-top:var(--s7)}
.detail-description h2{margin:0 0 var(--s3);font:var(--t-h2-interface);color:var(--text)}
.detail-description p{margin:0 0 var(--s3);font:var(--t-body);color:var(--muted)}
.detail-description__source{margin:0}
.detail-hero__taxonomy{margin-top:var(--s5)}
.detail-hero__taxonomy .tag-list{margin-top:var(--s2)}

/* ---- Sections below the hero -------------------------------------------
 * No approved composition exists for them yet, so they keep site.css's `.sec` tree —
 * but two of its rules were written for a hero that sat inside `.card` and are wrong
 * now that it does not. The side padding was the card's gutter; the page gutter is
 * `main`'s, so a 24px inset here only pushed the facts out of line with the h1 above
 * them. And the first section's rule lands directly against the hero's own bottom
 * hairline, drawing 2px of line where the approved page draws one.
 */
.sec{padding-inline:0}
/* Whatever follows the hero — the local index or the first section — rules itself off the
   top, and the hero already rules itself off the bottom. */
.detail-hero+*{border-top:0}
/* The record's own gutter is the page gutter too, for the same reason. */
.page-index{padding-inline:0}

/* ---- Hash block in the action panel ------------------------------------
 * Heading and copy control on one line, the value below at full width. `.copy-btn` only
 * carries the 44px target in site.css, so the button also takes `.btn` for its skin.
 */
.detail-action__hash-head{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--s2)}

/* ---- Evidence record ----------------------------------------------------
 * site.css already ships the whole record — the counter, the heading scale, the scope and
 * note roles, the disclosures, the hash value, the copy control. Only the number's shape
 * differs from the approved page: `01`, not `1`, so a two-section card and a five-section
 * one line up in the same column.
 */
.evi-n::before{content:counter(evi,decimal-leading-zero)}

@media (max-width:560px){
  /* One column: the action panel gives up its pinned cell and joins the stack. */
  /* One column, so nothing spans and the rhythm goes back to a plain row gap. */
  .detail-hero{padding-bottom:var(--s5);row-gap:var(--s5)}
  .detail-action{grid-column:1;grid-row:auto;padding:var(--s4)}
  .detail-description,.detail-hero__taxonomy{margin-top:0}
  .detail-hero__identity{gap:var(--s4)}
  .icon{font-size:24px}
  .detail-action__record{grid-template-columns:96px minmax(0,1fr)}
}