/* ─────────────────────────────
   Signify Insights — play.v1.css
   The Signify Playground layer. Loaded ONLY on the hub and the 42 game
   pages, which is what scopes it: rules for shared classes like .related
   are safe here precisely because no spotlight or kids page loads this file.
   Sits AFTER site.css in the cascade, so equal-specificity rules win.

   Namespaces, kept apart on purpose:
     .pg-*   the hub's own furniture (head, coverage, views, filters)
     .pb-*   the board — discipline × time, the hub's signature
     .pl-*   the per-game frame (launch bar, next-move block)
   Nothing here restyles a game's own board. Every game keeps its bespoke
   markup and its bespoke inline CSS untouched; this layer only frames it.
   ───────────────────────────── */

/* ══ 1 · the hub head ═══════════════════════════════════════════════════ */
.pg-head{padding:56px 0 0}
.pg-head .pg-k{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--jade);margin-bottom:22px}
.pg-head .pg-k .pip{width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 20%,transparent)}
.pg-head h1{font-family:var(--display);font-weight:300;font-size:clamp(40px,6.4vw,82px);
  line-height:.94;letter-spacing:-.032em;color:var(--ink)}
.pg-head h1 em{font-style:italic;color:var(--jade)}
.pg-head .pg-deck{margin:24px 0 0;font-size:16.5px;line-height:1.62;color:var(--ink-soft);max-width:58ch}
.pg-head .pg-deck b{color:var(--ink);font-weight:600}

/* ══ 2 · one control row ════════════════════════════════════════════════
   Search, four dropdowns and the view switch on a single line. This replaced
   three stacked banks of chips — twelve targets before you reached the board. */
.pg-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.fsel{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:0 30px 0 12px;
  min-height:44px;border-radius:999px;border:1px solid var(--hair-2);background:var(--surface);
  color:var(--ink);cursor:pointer;transition:border-color .18s;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-mute) 50%),
    linear-gradient(135deg,var(--ink-mute) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fsel:hover{border-color:var(--jade-line)}
.fsel:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px var(--jade-soft)}
.fsel:disabled{opacity:.5;cursor:not-allowed}
.pg-search{position:relative;display:inline-flex;align-items:center;min-width:190px}
.pg-search svg{position:absolute;inset-inline-start:14px;width:15px;height:15px;
  color:var(--ink-mute);pointer-events:none}
.pg-search input{font:inherit;font-size:13.5px;padding:0 34px 0 36px;min-height:44px;
  width:100%;border:1px solid var(--hair-2);border-radius:999px;background:var(--surface);
  color:var(--ink);transition:border-color .15s,box-shadow .15s}
.pg-search input:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px var(--jade-soft)}
.pg-search input::placeholder{color:var(--ink-mute)}
.pg-search .fsx{position:absolute;inset-inline-end:6px;color:var(--ink-mute);cursor:pointer;
  font-size:16px;line-height:1;padding:8px;border-radius:999px;display:none}
.pg-search.has .fsx{display:block}
.fcount{font-family:var(--mono);font-size:11px;color:var(--ink-mute);
  font-variant-numeric:tabular-nums;width:100%}
.pg-empty{display:none;padding:44px 26px;text-align:center;border:1.5px dashed var(--jade-line);
  border-radius:18px;background:var(--surface-2)}
/* ══ 3 · view switch + filters ══════════════════════════════════════════ */
.pg-bar{display:flex;align-items:center;gap:14px;margin:30px 0 20px;flex-wrap:wrap}
.pg-views{margin-inline-start:auto;flex:none;display:flex;gap:3px;border:1px solid var(--hair-2);
  border-radius:999px;padding:3px}
.pg-view{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;color:var(--ink-mute);cursor:pointer;transition:.18s;
  min-height:44px;display:inline-flex;align-items:center;gap:8px}
.pg-view:hover{color:var(--jade)}
.pg-view.on{background:var(--jade);color:var(--paper)}
.pg-view svg{width:13px;height:13px}

.pg-empty{display:none;padding:44px 26px;text-align:center;border:1.5px dashed var(--jade-line);
  border-radius:18px;background:var(--surface-2)}
.pg-empty.show{display:block}
.pg-empty .h{font-family:var(--display);font-weight:400;font-size:21px;color:var(--ink)}
.pg-empty p{margin:9px 0 0;font-size:14px;color:var(--ink-soft)}

/* ══ 4 · the board — the signature ══════════════════════════════════════
   Six disciplines down, four time bands across. A piece that serves two
   disciplines appears in both rows, so the chip count is higher than the
   piece count — the board answers "what can I do in eight minutes about
   privacy", not "how many pieces exist". Empty cells are the point: they
   are the content gaps, on the record, in public. */
#pb-board{display:none}
#pb-board.on{display:block}
/* THE BOARD, restyled 2026-08-11 (manual-test item 4): "I want Board view to feel like a
   premium tile view. Now it looks like a table list."

   It looked like a table because it WAS built like one: a bordered box, a --surface-2
   header strip with a bottom rule, a border-inline-start on every column, a border-top on
   every row, a grey sticky first column, and pieces rendered as 11px-radius chips with 9px
   of padding and no resting elevation. Six of those seven cues are table cues.

   THE MATRIX IS KEPT. Discipline x time-band is the whole reason Board exists as a second
   view — turn it into grouped tiles and it becomes the Cards view with extra steps. What
   changes is where the weight sits: RULES ARE REMOVED FROM THE GRID AND KEPT ONLY ON THE
   TILES. Note that --surface resolves to var(--paper) in this design system, so a tile and
   its ground are the same colour; take the hairline off the tile and it vanishes. The
   border stays on the tile and comes off everything else, and spacing does the work the
   rules used to do.

   Every colour pair here was already in the audited set (checks/audit2_contrast.py, 0 of
   30 below AA) — no new pair is introduced, deliberately, because I cannot see the result. */
.pb{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.pb-cols{display:grid;grid-template-columns:150px repeat(4,1fr);gap:14px;
  background:none;border:0;padding:0 0 4px}
.pb-col{padding:0 2px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);border:0;align-self:end}
.pb-col:first-child{color:var(--jade)}
/* A HAIRLINE ABOVE EACH NEW DISCIPLINE. Added 2026-08-11 on the owner's note: with the
   table rules gone, six discipline rows in one open field ran together and there was
   nothing to say where one domain ended and the next began. This is the one rule that
   comes back — it separates DOMAINS, which is the board's actual structure, rather than
   drawing a box around every cell, which is what made it read as a table.
   `border-image` with a gradient so the line fades out at the trailing edge instead of
   stopping dead against the horizontal scroller, and `:first-of-type` keeps it off the
   top row, where a rule would look like the underside of a header strip. */
.pb-row{display:grid;grid-template-columns:150px repeat(4,1fr);gap:14px;
  border:0;border-top:1px solid var(--hair);
  border-image:linear-gradient(to right,var(--hair) 0,var(--hair) 78%,transparent 100%) 1;
  padding:22px 0 14px}
.pb-row:first-of-type{border-top:0;border-image:none;padding-top:6px}
/* the discipline label is a label now, not a frozen table column */
.pb-rh{padding:2px 2px 0;border:0;background:none}
.pb-rh .n{display:block;font-family:var(--display);font-weight:400;font-size:17px;
  line-height:1.15;letter-spacing:-.012em;color:var(--ink)}
.pb-rh .c{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);
  font-variant-numeric:tabular-nums}
.pb-cell{padding:0;border:0;display:flex;flex-direction:column;gap:12px;min-height:0}
/* A gap cell is a dashed OUTLINE now rather than a hatched fill: with the grid rules gone
   there is no cell edge for a fill to sit inside, so a hatch would read as a floating
   smudge. Zero of these render today — the catalogue has no empty band — but the code path
   stays, because the note under the board is what makes the gaps public. */
.pb-cell.is-gap{border:1px dashed var(--hair-2);border-radius:16px;
  background:none;min-height:96px;display:grid;place-items:center}
.pb-gap{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-mute);opacity:.75;text-align:center;padding:0 10px}
/* the tile */
.pb-c{display:flex;flex-direction:column;justify-content:space-between;min-height:96px;
  border:1px solid var(--hair);border-radius:16px;padding:16px 16px 14px;
  background:var(--surface);box-shadow:var(--shadow-card);
  transition:transform .3s cubic-bezier(.16,.7,.3,1),
  border-color .22s,background .22s,box-shadow .3s}
.pb-c:hover{border-color:var(--jade-line);background:var(--jade-soft);
  transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.pb-c .t{display:block;font-family:var(--display);font-weight:400;font-size:15.5px;
  line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.pb-c:hover .t{color:var(--jade)}
.pb-c .m{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);
  font-variant-numeric:tabular-nums}
.pb-lv{display:inline-flex;gap:3px;align-items:center}
.pb-lv i{width:4px;height:4px;border-radius:50%;background:var(--hair-2)}
.pb-lv i.f{background:var(--amber)}
.pb-c .done{margin-inline-start:auto;width:16px;height:16px;border-radius:50%;
  background:var(--jade);color:var(--paper);display:none;place-items:center;
  font-size:10px;line-height:1;flex:none}
.pb-c.is-done{border-color:var(--jade-line);background:var(--jade-soft)}
.pb-c.is-done .done{display:grid}
.pb-c.hide{display:none}
/* The horizontal scroller keeps its matrix, and now says so. BROWSER-TEST §1.1 asks
   whether the scroll is DISCOVERABLE — "a board that looks cut off with no cue is worse
   than a list". The mask fades the trailing edge so the board reads as continuing rather
   than as clipped. mask-image is progressive: without support you get today's hard edge,
   which is the current behaviour, not a broken one. */
.pb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-inline-end:2px}
@supports (mask-image:linear-gradient(#000,#000)){
  @media(max-width:900px){
    .pb-scroll{mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%)}
  }
}
.pb-note{margin:22px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-mute);line-height:1.8}
.pb-note b{color:var(--jade);font-weight:400}
@media(max-width:900px){
  .pb-scroll .pb{min-width:760px}
  .pb-cols,.pb-row{grid-template-columns:132px repeat(4,1fr);gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .pb-c:hover{transform:none}
}

/* ══ 5 · the rack ═══════════════════════════════════════════════════════ */
#grid{display:none}
#grid.on{display:grid}
/* PLAYED lives in the foot, next to the publication date — session 14.
   It used to be `.card-body::before`, absolutely positioned into the top-right
   corner of the body, which is the same corner the card-tags row ended in. With
   the New/Live badge sitting there on a `margin-inline-start:auto`, a played
   card painted two chips on top of each other. The badge is gone (si42) and the
   marker is a real element emitted by si-play beside .pubdate, so the two
   status facts about a card — when it was published, whether you have played
   it — read as one line instead of competing for one corner.

   Colour and size are INHERITED from .card-foot (var(--ink-mute), 10px mono
   uppercase) so it sits in the row rather than shouting over it. The owner
   confirmed in session 14 that it should match .pubdate EXACTLY, so it carries
   the same .66 — the two now read as one line rather than as a chip beside a
   date. (I had shipped it at .85 on the argument that a 1px border at 66%
   reads as a smudge; the owner's call is the design language, and consistency
   in that row is worth more than the border being crisp.) */
#grid .card.is-done{border-color:var(--jade-line)}
.card-foot .pubdate{opacity:.66;font-variant-numeric:tabular-nums}
.card-foot .played{border:1px solid currentColor;border-radius:999px;
  padding:1px 7px;white-space:nowrap;opacity:.66}

/* ══ 6 · the per-game launch bar ════════════════════════════════════════ */
.pl-bar{border-bottom:1px solid var(--hair);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.pl-bar-in{max-width:var(--maxw);margin:0 auto;padding:14px 44px;display:flex;align-items:center;
  gap:16px;flex-wrap:wrap}
.pl-back{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);display:inline-flex;align-items:center;gap:9px;min-height:44px;
  transition:color .18s,gap .28s}
.pl-back:hover{color:var(--jade);gap:13px}
.pl-back svg{width:12px;height:12px;transform:rotate(180deg)}
.pl-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-p{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;background:var(--jade-soft);color:var(--jade);
  font-variant-numeric:tabular-nums}
.pl-p.fmt{background:var(--jade);color:var(--paper)}
.pl-p.lv{background:transparent;border:1px solid var(--hair-2);color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:6px}
.pl-p.lv .pb-lv i.f{background:var(--amber)}
.pl-rec{margin-inline-start:auto;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-mute);display:flex;align-items:center;gap:9px;
  font-variant-numeric:tabular-nums}
.pl-rec:empty{display:none}
.pl-rec .dot{width:6px;height:6px;border-radius:50%;background:var(--jade);flex:none}
.pl-rec b{color:var(--ink);font-weight:500}
@media(max-width:720px){
  .pl-bar-in{padding:12px 20px;gap:11px}
  .pl-rec{margin-inline-start:0;width:100%}
  .pl-pills .pl-p.topic{display:none}
}

/* ══ 7 · (was the next-move block) ═════════════════════════════════════
   Removed 2026-08-10 with the block itself. si39 and si10 both strip it now,
   so leaving nine orphan rules here would style something no page can emit. */

@media (prefers-reduced-motion:reduce){
  .pb-c:hover{transform:none}
  .pl-back:hover,
}