/* ══════════════════════════════════════════════════════════════════════════
   AI CHEAT SHEETS — listing DELTA  (scope: .v2x.csx)

   Loaded THIRD, after:
     1. assets/css/ext/public-partials-styles.css      — the .v2x TOKEN layer
     2. assets/css/ext/v2-public-directory-listing.css — /ai-directory's LIVE sheet

   ⚠ SCOPE DISCIPLINE. Everything here is prefixed `.v2x.csx` so it can only
   ever reach the cheat-sheet listing surfaces. The sheet above is SHARED with
   five other pages; a rule written there to fix this module would move
   /ai-directory, /browser-extensions, /gpts, /workflows and /ai-projects too.

   This file holds only what the directory has no concept of:
     §PIPS  difficulty pips inside a pill
     §FACT  the small icon+figure facts on a card
     §FLAG  the "Updated" chip in list mode
     §TILE  an SVG (not an <img>) inside a hero orbit tile
     §PLATE an SVG (not a letter) inside a card / rail logo plate
     §SHELF the curated admin bands between the grid and the category rail
     §BUSY  `is-busy` — defined in NO sheet in the stack; five modules in a
            row have now landed this class dead via wire:loading.class
     §IOS   16px search input so iOS Safari does not zoom on focus
     §CATS  the /cheat-sheet/categories index grid
     §CRUMB breadcrumbs for the archives
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §PIPS ─────────────────────────────────────────────────────────────────
   Difficulty inside a `.dir-tc-pill`. The pips carry the level on their own
   (WCAG 1.4.1) so it survives greyscale and every form of colour blindness;
   the pill tone only reinforces it. They inherit `currentColor` from the pill,
   which the directory already guarantees is AA against that pill's tint —
   giving them a colour of their own would break a pairing already checked. */
.v2x.csx .csx-pips {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    margin-inline-end: 5px;
}
.v2x.csx .csx-pips i {
    inline-size: 4px;
    block-size: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: .28;
}
.v2x.csx .csx-pips i.is-on { opacity: 1; }

/* In the facet rail the pips sit on the panel, not on a pill. */
.v2x.csx .dir-fx-clbl .csx-pips i { inline-size: 5px; block-size: 5px; }

/* ── §FACT ─────────────────────────────────────────────────────────────────
   Reading time / entry count on a card. The directory's equivalent slot is
   `.dir-tc-rate` (a star row) — every rating in this catalogue is 0, so that
   component is deliberately not rendered and this replaces it. */
.v2x.csx .csx-fact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 640;
    color: var(--v2-muted, #62708a);
    white-space: nowrap;
}
.v2x.csx .csx-fact svg { flex: none; opacity: .85; }
body.theme-dark .v2x.csx .csx-fact { color: #97a3b6; }

/* ── §FLAG ─────────────────────────────────────────────────────────────────
   "Updated" chip beside a title in list mode. Emerald pair lifted from
   `.dir-tc-pill[data-tone="emerald"]`, which is already contrast-checked. */
.v2x.csx .csx-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #08795A;
    background: #E6F8F1;
    box-shadow: inset 0 0 0 1px #C6EEDF;
    white-space: nowrap;
}
body.theme-dark .v2x.csx .csx-flag {
    color: #6EE7B7;
    background: rgba(16, 185, 129, .14);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .3);
}

/* ── §TILE ─────────────────────────────────────────────────────────────────
   The shared sheet sizes `.dir-hh-tile img` at 100%/100%; a cheat sheet has no
   logo, so these tiles carry a category ICON instead. Without this the SVG
   renders at its intrinsic size in the corner of a 78px tile. */
.v2x.csx .dir-hh-tile > svg {
    inline-size: 100%;
    block-size: 100%;
    color: var(--brand-blue, #3680ED);
}
body.theme-dark .v2x.csx .dir-hh-tile > svg { color: #7FB2FA; }

/* ── §PLATE ────────────────────────────────────────────────────────────────
   `.dir-tc-mono` / `.dir-lc-mono` / `.dir-tr-mono` are built for a single
   uppercase LETTER at 26px. A sheet has no initial worth showing, so the
   category icon goes in the plate instead.

   ⚠ The glyph deliberately takes NO colour of its own. `.dir-tc-logo` already
   sets `color:var(--dtc-ink-dark)` over `background:var(--dtc-bg)` — a pair
   the directory designed and contrast-checked together, cycled per card
   position. Injecting the category's stored colour here would swap a curated
   pair for an arbitrary one; measured across this taxonomy those fail badly as
   glyph ink. Inheriting is both simpler and safer. */
.v2x.csx .dir-tc-mono,
.v2x.csx .dir-lc-mono,
.v2x.csx .dir-tr-mono {
    font-size: 0;             /* kills the whitespace baseline gap */
    line-height: 0;
}
.v2x.csx .dir-tc-mono svg,
.v2x.csx .dir-lc-mono svg,
.v2x.csx .dir-tr-mono svg { display: block; }

/* ── §SHELF ────────────────────────────────────────────────────────────────
   The admin-composed bands (cs_hub_sections) reuse `.dir-cat-sect` for its
   spacing and `.dir-cat-head` for its heading, but they hold a CARD GRID, not
   a rail — so the showcase centring is dropped and the top margin tightened,
   since several shelves stack. */
.v2x.csx .csx-shelf { margin-top: 46px; }
.v2x.csx .csx-shelf .dir-cat-head { text-align: start; margin-bottom: 18px; }
.v2x.csx .csx-shelf .dir-cat-title { font-size: clamp(20px, 2.3vw, 26px); }

/* ── §BUSY ─────────────────────────────────────────────────────────────────
   `wire:loading.class="is-busy"` lands a class that NO sheet in this stack
   defines. Without this the grid gives no feedback at all while a filter is
   in flight. */
.v2x.csx .csx-results { transition: opacity .18s ease, filter .18s ease; }
.v2x.csx .csx-results.is-busy {
    opacity: .45;
    filter: saturate(.6);
    pointer-events: none;
}

/* ── §IOS ──────────────────────────────────────────────────────────────────
   `.dir-hh-search input` is 15.5px in the shared sheet (14px under 820px), and
   iOS Safari zooms the viewport whenever a focused input is under 16px. Pinned
   here rather than in the shared sheet: raising it there would reflow five
   pages that have not been re-verified. The shared miss is real and still
   wants its own pass. */
.v2x.csx .dir-hh-search input { font-size: 16px; }
@media (max-width: 820px) {
    .v2x.csx .dir-hh-search input { font-size: 16px; }
}

/* ── §CATS — /cheat-sheet/categories ───────────────────────────────────────
   The index page reuses `.dir-cat-card` (tone cycle, icon plate, hover) but
   lays them out as a WRAPPING GRID rather than the horizontal snap rail, since
   the whole point of that page is seeing every category at once. */
.v2x.csx .csx-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 16px;
    margin-top: 26px;
}
/* The rail sets a fixed width and scroll-snap on the card; neither applies in
   a grid, and the width would overflow the track. */
.v2x.csx .csx-catgrid .dir-cat-card {
    inline-size: auto;
    min-inline-size: 0;
    scroll-snap-align: none;
    flex: initial;
}
@media (max-width: 520px) {
    .v2x.csx .csx-catgrid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── §CRUMB ────────────────────────────────────────────────────────────────
   The archives need a trail; the directory has no breadcrumb component. */
.v2x.csx .csx-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 18px 0 -14px;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-muted, #62708a);
}
.v2x.csx .csx-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.v2x.csx .csx-crumbs a { color: inherit; text-decoration: none; }
/* --brand-blue (#3680ED) measures 3.84:1 on white — under the 4.5 text
   floor. The directory's own darker stop (--dtc-ink-dark blue) clears it
   at 6.02:1, so the hover uses that rather than the mid tone. Hardcoded
   because this rule must not inherit a value that fails. */
.v2x.csx .csx-crumbs a:hover { color: #2060C0; text-decoration: underline; }
.v2x.csx .csx-crumbs [aria-current="page"] { color: var(--v2-ink, #101828); font-weight: 700; }
.v2x.csx .csx-crumbs svg { opacity: .5; flex: none; }
body.theme-dark .v2x.csx .csx-crumbs { color: #97a3b6; }
body.theme-dark .v2x.csx .csx-crumbs [aria-current="page"] { color: #E7ECF5; }
body.theme-dark .v2x.csx .csx-crumbs a:hover { color: #7FB2FA; }

/* ── Reduced motion ────────────────────────────────────────────────────────
   Every transition in this file is decorative. */
@media (prefers-reduced-motion: reduce) {
    .v2x.csx .csx-results { transition: none; }
}