/* patterns-index.css — patterns.gf.cx taxonomy index component (single file).
   Styles the playbook groups, list rows, playbook chips, and the getting-started
   band. op-panel.css (CDN, loaded before this file) owns collapse chrome and
   .op-sort. v2.0.0 · 2026-08-02 */

/* ── Groups + list ─────────────────────────────────────────────────────── */
#patterns-index{margin-top:.4rem}
.p-group{margin-top:2rem}
/* weight 400 (not 500) to match the status.gf.cx panel titles — same 24px
   serif, but the lighter cut reads at the same visual weight as the hub. */
.p-group__title{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;
  scroll-margin-top:64px}
/* collapsed panels read as a ledger — a full-width rule between each.
   scroll-margin-top: a #grp- doorway/deep-link lands the panel clear of the
   viewport top, not flush against the browser chrome. */
.op-collapse{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:2px;
  scroll-margin-top:64px}
/* breathing-space: the LAST unit in a section drops its trailing rule. A rule
   earns its keep by separating two units; the last one has nothing after it but
   the footer, so it reads as clutter. Structural (:last-child), so it auto-tracks
   as groups are added/removed — the repeatable form of the pattern. */
.op-collapse:last-child{border-bottom:0;padding-bottom:0}
.p-group__num{font-style:italic;color:var(--accent);font-size:1.1rem}
/* deep-link from /sitemap/ (/#fam-…) lands the family header with breathing
   room below the top edge — 16px was cramped and clipped in-browser */
.p-family{margin-top:1rem;scroll-margin-top:64px}
/* First family in an open group gets extra headroom so the group description
   isn't crowded by it — the "breathe" gap under 01/02/03 (list + card views). */
.op-collapse > summary + .p-family{margin-top:1.85rem}
.p-family__title{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-weight:500;
  font-size:.82rem;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.2rem}
/* calm line icon (icons.js) at each family seam — inherits the ink-soft header colour */
.p-family__icon{--gfcx-icon-size:15px;flex:none;display:inline-flex}
.p-list{list-style:none;margin-top:1.1rem}
.p-item{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.4rem 1rem;
  padding:.55rem 0;border-bottom:1px solid var(--line)}
.p-item__link{grid-column:1;font-family:var(--serif);font-weight:500;font-size:1.05rem;
  text-decoration:none;color:var(--ink)}
.p-item__link:hover{color:var(--accent)}
.p-item__desc{grid-column:1;font-size:13px;color:var(--ink-soft);line-height:1.45}
.p-item .p-chip{grid-column:2;grid-row:1}
/* per-item family glyphs — hidden in the desktop ledger, shown in card view.
   !important beats the inline display icons.js writes onto the injected <svg>.
   .p-item__face is the big decorative glyph used only by the card cross-fade. */
.p-item__icon,.p-item__face{display:none !important}

/* ── Playbook chips ────────────────────────────────────────────────────── */
.p-chip{align-self:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.3px;
  padding:2px 7px;border-radius:20px;white-space:nowrap;border:1px solid transparent}
.p-chip--craft{color:var(--accent);border-color:var(--accent)}
.p-chip--ops{color:var(--gold);border-color:var(--gold)}
.p-chip--found{color:var(--crimson);border-color:var(--crimson)}

/* ── Frontispiece masthead (Variant D) — the page-header.css treatment ───────
   A heraldic mark + bold accent kicker + ink-soft subtitle in a flex row over a
   hairline rule, then the serif h1. Facts drop to one calm meta line and the
   Start-here essay becomes a quiet footnote — mirroring the individual pattern
   pages so the index reads as the frontispiece of the same specimen book. */
.p-masthead{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.p-masthead__mark{flex:none;width:60px;height:60px;color:var(--accent)}
.p-masthead__mark svg{width:100%;height:100%;display:block}
.p-masthead__kicker{font-family:var(--mono);font-size:12px;letter-spacing:1.3px;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0}
.p-masthead__sub{font-size:13px;color:var(--ink-soft);margin:5px 0 0}
/* calm meta line — total · since · playbook counts as jump anchors */
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:16px;
  font-size:13.5px;color:var(--ink-soft)}
.p-meta__n{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:15px}
.p-meta__dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}
.p-meta__books a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.p-meta__books a:hover{color:var(--accent);border-color:var(--accent)}
/* Start-here footnote */
.p-start-note{margin:16px 0 22px;padding-top:15px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-soft);line-height:1.5;max-width:74ch}
.p-start-note__lead{color:var(--ink);text-decoration:none;font-family:var(--serif);font-style:italic;
  font-size:15px;border-bottom:1px solid var(--line-strong)}
.p-start-note__lead:hover{color:var(--accent)}
.p-group__count{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);font-weight:400}
/* ── Card view ──────────────────────────────────────────────────────────────
   Two entry points, one look. Desktop (≥641px): the List/Cards toggle (op-panel.js
   flips data-view=cards on the panel, persisted). Mobile (≤640px): ALWAYS cards.
   Each row becomes a warm-paper card with the family glyph tinted its playbook
   colour (--pb, from the group id).

   Reveal = CROSS-FADE (Variant 2). Desktop card is a FIXED 172px box, overflow
   hidden — hover/focus never resizes it or reflows the gallery (the growth nit is
   gone by construction). The resting face shows the title + a big faint glyph; on
   hover the glyph fades out and the description fades in over the same area.
   Keyboard reveal is free via :focus-within on the card's own link (Tab).

   The desktop rules are wrapped in @media(min-width:641px) on purpose: op-panel.js
   persists data-view in localStorage, so a phone could inherit data-view=cards
   from a desktop session — the guard keeps the fixed-height/absolute cross-fade
   off small screens, where the mobile block always wins.

   Mobile has no hover and the whole card is a tap-to-open link, so it shows the
   description STATICALLY (no cross-fade, no big face) — the honest phone reading.
   NB: the two blocks are deliberately parallel — edit them together. */
#grp-Craft{--pb:var(--accent)}
#grp-Operations{--pb:var(--gold)}
#grp-Foundation{--pb:var(--crimson)}

/* desktop card-view toggle — fixed-footprint cross-fade */
@media(min-width:641px){
  .op-panel[data-view="cards"] .p-list{display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;
    /* breathe: separate the family subtitle from the first card row */
    margin-top:1.25rem}
  .op-panel[data-view="cards"] .p-item{position:relative;display:flex;flex-direction:column;
    height:172px;padding:15px 17px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(235,227,213,.5));
    box-shadow:0 1px 0 rgba(26,24,22,.05)}
  /* small glyph top-left, title pinned near the top */
  .op-panel[data-view="cards"] .p-item__icon{display:inline-flex !important;--gfcx-icon-size:22px;
    color:var(--pb)}
  .op-panel[data-view="cards"] .p-item__link{display:block;margin-top:9px;font-size:0;color:var(--ink)}
  .op-panel[data-view="cards"] .p-item__link::before{content:attr(data-card-headline);
    font-family:var(--serif);font-size:1.1rem;line-height:1.22;letter-spacing:-.005em;color:inherit}
  .op-panel[data-view="cards"] .p-item__link:hover{color:var(--pb)}
  /* big faint resting face — bottom-right; fades OUT on reveal */
  .op-panel[data-view="cards"] .p-item__face{display:block !important;position:absolute;right:13px;
    bottom:11px;--gfcx-icon-size:46px;color:var(--pb);opacity:.42;transition:opacity .35s;
    pointer-events:none}
  .op-panel[data-view="cards"] .p-item:hover .p-item__face,
  .op-panel[data-view="cards"] .p-item:focus-within .p-item__face{opacity:0}
  /* description — flows BELOW the title (never overlaps it) with a clear gap;
     smaller + 3-line clamp so a 2-line title + desc both fit the 172px box;
     fades IN on reveal. Reserves its space at rest, so nothing shifts. */
  .op-panel[data-view="cards"] .p-item__desc{margin-top:11px;font-size:12px;line-height:1.45;
    color:var(--ink-soft);opacity:0;transition:opacity .3s;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .op-panel[data-view="cards"] .p-item:hover .p-item__desc,
  .op-panel[data-view="cards"] .p-item:focus-within .p-item__desc{opacity:1}
}

/* mobile: always cards (single column), toggle hidden, description shown statically */
@media(max-width:640px){
  body{padding:26px 16px 48px}
  .view-toggle{display:none}
  .p-list{display:grid;grid-template-columns:1fr;gap:14px;margin-top:1.1rem}
  .p-item{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;
    align-items:start;padding:14px 16px 15px;border:1px solid var(--line);border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(235,227,213,.5));
    box-shadow:0 1px 0 rgba(26,24,22,.05)}
  .p-item__icon{display:inline-flex !important;grid-column:1;grid-row:1;--gfcx-icon-size:20px;
    color:var(--pb);margin-top:3px}
  .p-item__link{grid-column:2;grid-row:1;display:block;font-size:0;letter-spacing:-.005em;color:var(--ink)}
  .p-item__link::before{content:attr(data-card-headline);font-family:var(--serif);font-size:1.16rem;
    line-height:1.22;letter-spacing:-.005em;color:inherit}
  .p-item__link:hover{color:var(--pb)}
  .p-item__desc{grid-column:2;grid-row:2;margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .p-item__face{display:none !important}
}