/* ============================================================================
   AIToolsay — /guides listing DELTA
   Scope: .v2x.gdx
   ----------------------------------------------------------------------------
   This file is ONLY what /ai-directory has no concept of. Everything else comes
   from the shared sheet, in this order:

     custom.*.css
       -> public-partials-styles.css      (the .v2x TOKEN layer)
       -> v2-public-directory-listing.css (the .dir-* design, SHARED — an edit
                                           there reaches nine public pages)
       -> public-guides.css               (this file, the delta)

   RULES FOR EDITING THIS FILE
   1. Never redefine a .dir-* rule here to "fix" it. If the directory is wrong,
      it is wrong on nine pages and belongs upstream. This file adds .gdx-*
      components and sizes the two places where the shared sheet assumes an
      <img> and a guide has an icon instead.
   2. Every colour rule needs a dark twin. The convention in the shared sheet is
      `body.theme-dark .v2x .x`, so the twin here is
      `body.theme-dark .v2x.gdx .x` — one specificity step higher, which is what
      makes it win against the shared dark rule it is paired with.
   3. Dark tokens resolve to: --white:#171922 · --v2-bg:#0E0F14 ·
      --v2-ink:#ECEDF3 · --v2-muted:#9CA2B3. Compose alpha against those, not
      against black, or every measured ratio is wrong.
   ========================================================================== */

/* ============================================================================
   §TILE — the hero tiles carry an ICON, not a logo
   The shared sheet sizes `.dir-hh-tile img` and says nothing about <svg>, so an
   inline icon renders at the UA default 300x150 and blows the tile apart.
   ========================================================================== */
.v2x.gdx .dir-hh-tile > svg    { width: 30px; height: 30px; display: block; color: var(--brand-blue-dark); }
body.theme-dark .v2x.gdx .dir-hh-tile > svg { color: var(--brand-blue-light); }

/* ============================================================================
   §IOS — stop Safari zooming the hero search on focus
   `.dir-hh-search input` is 15.5px in the SHARED sheet, and any font-size under
   16px makes iOS Safari zoom the viewport when the field takes focus. Pinned
   locally rather than upstream: the shared miss is real and wants its own pass
   across all nine pages.
   ========================================================================== */
.v2x.gdx .dir-hh-search input { font-size: 16px; }

/* ============================================================================
   §BUSY — `wire:loading.class="is-busy"` had no rule in ANY sheet in the stack
   Sixth module in a row to land this class dead. Defined locally so a filter
   change reads as pending instead of looking frozen.
   ⚠ Do not measure this in a CDP-driven tab: a hidden tab freezes every
     animated property, so `opacity` reads 1 while `pointer-events` applies.
     Strip the transition first, or instrument the call.
   ========================================================================== */
.v2x.gdx .dir-cards.is-busy,
.v2x.gdx .dir-lx.is-busy { opacity: .45; filter: saturate(.6); pointer-events: none; transition: opacity .18s ease, filter .18s ease; }

/* ============================================================================
   §CRUMBS — breadcrumb strip above the hero
   ========================================================================== */
.v2x.gdx .gdx-crumbs           { max-width: 1240px; margin: 0 auto; padding: 14px 20px 0; }
.v2x.gdx .gdx-crumbs ol        { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.v2x.gdx .gdx-crumbs li        { display: flex; align-items: center; gap: 6px; color: var(--v2-muted); }
.v2x.gdx .gdx-crumbs li + li::before { content: '/'; opacity: .45; }
.v2x.gdx .gdx-crumbs a         { color: var(--v2-muted); text-decoration: none; transition: color .16s ease; }
/* #2060C0, not --brand-blue (#3680ED): the brand blue measures 3.84:1 on white
   and this is 13px text, which needs 4.5. Same fix the cheat-sheets pass made. */
.v2x.gdx .gdx-crumbs a:hover   { color: #2060C0; text-decoration: underline; }
.v2x.gdx .gdx-crumbs li[aria-current] { color: var(--v2-ink); font-weight: 600; }

body.theme-dark .v2x.gdx .gdx-crumbs a:hover { color: var(--brand-blue-light); }

/* ============================================================================
   §PIPS — difficulty shown WITHOUT relying on colour (WCAG 1.4.1)
   Four pips, N filled. The pill tone only reinforces what the pips already say,
   so the level survives a screenshot, a colourblind reader and a printout.
   ========================================================================== */
.v2x.gdx .gdx-pips        { display: inline-flex; align-items: center; gap: 2px; margin-right: 5px; vertical-align: middle; }
.v2x.gdx .gdx-pips i      { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .26; display: block; }
.v2x.gdx .gdx-pips i.is-on{ opacity: 1; }
/* In the facet rail the pips sit on muted text, so they need a touch more
   presence than they do inside a toned pill. */
.v2x.gdx .dir-fx-chk .gdx-pips i { width: 5px; height: 5px; }

/* ============================================================================
   §FACT — the small icon+value facts on cards and rows
   ========================================================================== */
.v2x.gdx .gdx-fact        { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--v2-muted); white-space: nowrap; }
.v2x.gdx .gdx-fact svg    { width: 13px; height: 13px; flex: none; opacity: .85; }
.v2x.gdx .gdx-fact.is-link{ color: var(--v2-muted); text-decoration: none; transition: color .16s ease; }
.v2x.gdx .gdx-fact.is-link:hover { color: #2060C0; }

body.theme-dark .v2x.gdx .gdx-fact          { color: var(--v2-muted); }
body.theme-dark .v2x.gdx .gdx-fact.is-link:hover { color: var(--brand-blue-light); }

/* ============================================================================
   §CARDLINE — category + format on one line under the card title
   ========================================================================== */
.v2x.gdx .gdx-cardline    { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 0; }
.v2x.gdx .gdx-fmt         { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
                            color: var(--v2-muted); background: rgba(16, 24, 40, .05); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
body.theme-dark .v2x.gdx .gdx-fmt { background: rgba(255, 255, 255, .07); color: var(--v2-muted); }

/* Format icon in the facet rail */
.v2x.gdx .gdx-fxico       { display: inline-flex; margin-right: 6px; opacity: .8; }
.v2x.gdx .gdx-fxico svg   { width: 14px; height: 14px; }

/* ============================================================================
   §CHIPS — the active-filter row above the results
   Each chip removes exactly one filter; the last one clears everything.
   ========================================================================== */
.v2x.gdx .gdx-chiprow     { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.v2x.gdx .gdx-chip        { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; cursor: pointer;
                            background: #EAF2FD; color: #1A4F9E; border: 1px solid #CFE0FA; border-radius: 999px; padding: 5px 10px 5px 11px;
                            transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.v2x.gdx .gdx-chip:hover  { background: #DDE9FC; border-color: #B5D0F5; transform: translateY(-1px); }
.v2x.gdx .gdx-chip-k      { opacity: .72; font-weight: 600; }
.v2x.gdx .gdx-chip-v      { font-weight: 700; }
.v2x.gdx .gdx-chip-x      { width: 12px; height: 12px; opacity: .6; flex: none; }
.v2x.gdx .gdx-chip:hover .gdx-chip-x { opacity: 1; }
.v2x.gdx .gdx-chip.is-clear { background: transparent; border-color: var(--v2-line); color: var(--v2-muted); font-weight: 600; }
.v2x.gdx .gdx-chip.is-clear:hover { background: rgba(16, 24, 40, .04); color: var(--v2-ink); }

body.theme-dark .v2x.gdx .gdx-chip        { background: rgba(54, 128, 237, .16); color: #BBD5FA; border-color: rgba(96, 164, 245, .30); }
body.theme-dark .v2x.gdx .gdx-chip:hover  { background: rgba(54, 128, 237, .24); border-color: rgba(96, 164, 245, .45); }
body.theme-dark .v2x.gdx .gdx-chip.is-clear { background: transparent; border-color: var(--v2-line); color: var(--v2-muted); }
body.theme-dark .v2x.gdx .gdx-chip.is-clear:hover { background: rgba(255, 255, 255, .06); color: var(--v2-ink); }

/* ============================================================================
   §TAGMORE — the tag facet collapses past eight rows
   Collapsed by DEFAULT in CSS, not by JS, so there is no flash of eighteen tags
   before the script runs.
   ========================================================================== */
.v2x.gdx .dir-fx-catlist .gdx-tag-extra { display: none; }
.v2x.gdx .dir-fx-catlist.is-expanded .gdx-tag-extra { display: flex; }
.v2x.gdx .dir-fx-showmore .gdx-more-off,
.v2x.gdx [aria-expanded="true"] .gdx-more-on { display: none; }
.v2x.gdx [aria-expanded="true"] .gdx-more-off { display: inline; }

/* ============================================================================
   §READS — the right-hand figure on the most-read rail
   The rail's shared slot is a star rating. Guides have no rating column, so the
   slot carries READS — which is also what the rail ranks on, so the number
   explains the order instead of decorating it.
   ========================================================================== */
/* ⚠ NO COLOUR HERE — INHERIT IT.
   On the trending rail this span also carries `.dir-tr-rt`, which the shared
   sheet paints as a designed, contrast-checked pair: #A85B08 on
   rgba(245,158,11,.14) in light, #FBC97A on rgba(245,158,11,.2) in dark.
   Forcing --v2-ink on the <b> put near-white text on that amber pill and
   measured 1.84:1 in dark mode — caught on RENDERED pixels, after a computed
   token check had passed, because the token check assumed the card background
   rather than the pill actually behind it.
   Standalone (the archive's sibling rail) it inherits `.dir-tr-row`, which the
   directory also designed. Either way the pair stays the directory's. */
.v2x.gdx .gdx-reads       { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.v2x.gdx .gdx-reads svg   { width: 13px; height: 13px; opacity: .8; }
.v2x.gdx .gdx-reads b     { font-size: 12.5px; font-weight: 800; color: inherit; }

/* ============================================================================
   §CATMORE — the "See all topics" link under the topic rail
   ========================================================================== */
.v2x.gdx .gdx-catmore     { display: flex; justify-content: center; margin-top: 18px; }
.v2x.gdx .gdx-catmore .dir-tr-more { display: inline-flex; width: auto; }

/* ============================================================================
   §TAGBAND — popular tags, a second way in
   ========================================================================== */
.v2x.gdx .gdx-tagband       { max-width: 1240px; margin: 0 auto; padding: 8px 20px 40px; }
.v2x.gdx .gdx-tagband-h     { font-size: 15px; font-weight: 700; color: var(--v2-ink); margin: 0 0 12px; }
.v2x.gdx .gdx-tagband-list  { display: flex; flex-wrap: wrap; gap: 8px; }
.v2x.gdx .gdx-tagband-tag   { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; text-decoration: none;
                              color: var(--v2-ink); background: var(--white); border: 1px solid var(--v2-line); border-radius: 999px;
                              padding: 6px 12px; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.v2x.gdx .gdx-tagband-tag b { font-size: 11.5px; font-weight: 700; color: var(--v2-muted); }
.v2x.gdx .gdx-tagband-tag:hover { border-color: var(--brand-blue); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(54, 128, 237, .5); text-decoration: none; color: #2060C0; }
.v2x.gdx .gdx-tagband-tag:hover b { color: #2060C0; }

body.theme-dark .v2x.gdx .gdx-tagband-tag       { background: var(--white); border-color: var(--v2-line); color: var(--v2-ink); }
body.theme-dark .v2x.gdx .gdx-tagband-tag:hover { border-color: var(--brand-blue-light); color: var(--brand-blue-light); }
body.theme-dark .v2x.gdx .gdx-tagband-tag:hover b { color: var(--brand-blue-light); }

/* ============================================================================
   §RESP — responsive
   The shared sheet already cascades the card grid 4->3->2->1 and collapses the
   facet rail into its accordion below 1180px. These are only the deltas.
   ========================================================================== */
@media (max-width: 900px) {
    .v2x.gdx .gdx-crumbs   { padding-top: 10px; }
    .v2x.gdx .gdx-tagband  { padding-bottom: 28px; }
}

@media (max-width: 640px) {
    .v2x.gdx .gdx-chiprow      { gap: 6px; }
    .v2x.gdx .gdx-chip         { font-size: 12px; padding: 4px 9px; }
    /* The category label is the one that repeats on every card, so it is the
       one worth keeping; the format pill is redundant beside it at this width. */
    .v2x.gdx .gdx-cardline .gdx-fmt { display: none; }
    .v2x.gdx .gdx-tagband-h    { font-size: 14px; }
}

/* Touch: the shared sheet's hover lifts latch after a tap, which leaves two
   cards looking active at once. Same guard the rest of the site uses. */
@media (hover: none) {
    .v2x.gdx .gdx-tagband-tag:hover { transform: none; box-shadow: none; }
    .v2x.gdx .gdx-chip:hover        { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .v2x.gdx .gdx-tagband-tag,
    .v2x.gdx .gdx-chip,
    .v2x.gdx .dir-cards.is-busy,
    .v2x.gdx .dir-lx.is-busy { transition: none; }
}

/* ============================================================================
   §AHEAD — the archive / index head
   A COMPACT head, not the hub's hero. A reader on /guides/category/ai-coding
   already expressed their intent; a full hero with a search field and a stat
   deck would be furniture between them and the results.
   ========================================================================== */
.v2x.gdx .gdx-ahead        { max-width: 1240px; margin: 0 auto; padding: 18px 20px 6px; }
.v2x.gdx .gdx-ahead-in     { display: flex; align-items: flex-start; gap: 16px; }
.v2x.gdx .gdx-ahead-ico    { flex: none; width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
                             background: linear-gradient(150deg, #2C6FD1 0%, #1B4C9E 100%); color: #fff;
                             box-shadow: 0 14px 30px -14px rgba(27, 76, 158, .65); }
.v2x.gdx .gdx-ahead-ico svg{ width: 30px; height: 30px; }
.v2x.gdx .gdx-ahead-copy   { min-width: 0; }
.v2x.gdx .gdx-ahead-eyebrow{ display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2060C0; margin-bottom: 4px; }
.v2x.gdx .gdx-ahead-h1     { font-size: 34px; line-height: 1.16; font-weight: 800; letter-spacing: -.02em; color: var(--v2-ink); margin: 0 0 8px; }
.v2x.gdx .gdx-ahead-sub    { font-size: 15px; line-height: 1.6; color: var(--v2-muted); margin: 0 0 10px; max-width: 66ch; }
.v2x.gdx .gdx-ahead-facts  { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.v2x.gdx .gdx-ahead-kids   { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

body.theme-dark .v2x.gdx .gdx-ahead-eyebrow { color: var(--brand-blue-light); }
body.theme-dark .v2x.gdx .gdx-ahead-h1      { color: var(--v2-ink); }
/* The plate keeps its own gradient in dark: both stops clear 4.5:1 against a
   white glyph, and a token-driven plate would go muddy on --white:#171922. */
body.theme-dark .v2x.gdx .gdx-ahead-ico     { box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8); }

/* ============================================================================
   §ARCSEARCH — the archive's scoped search
   Sits above the results rather than in a hero, because the head is compact.
   16px, or iOS Safari zooms the viewport on focus.
   ========================================================================== */
.v2x.gdx .gdx-arcsearch      { position: relative; display: flex; align-items: center; margin: 0 0 14px; }
.v2x.gdx .gdx-arcsearch-ico  { position: absolute; left: 14px; display: flex; color: var(--v2-muted); pointer-events: none; }
.v2x.gdx .gdx-arcsearch input{ width: 100%; font: inherit; font-size: 16px; color: var(--v2-ink); background: var(--white);
                               border: 1px solid var(--v2-line); border-radius: 12px; padding: 11px 40px 11px 42px;
                               transition: border-color .16s ease, box-shadow .16s ease; }
.v2x.gdx .gdx-arcsearch input::placeholder { color: var(--v2-muted); }
.v2x.gdx .gdx-arcsearch input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(54, 128, 237, .18); }
.v2x.gdx .gdx-arcsearch-x    { position: absolute; right: 10px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
                               border: 0; border-radius: 50%; background: transparent; color: var(--v2-muted); cursor: pointer; }
.v2x.gdx .gdx-arcsearch-x svg{ width: 14px; height: 14px; }
.v2x.gdx .gdx-arcsearch-x:hover { background: rgba(16, 24, 40, .06); color: var(--v2-ink); }
body.theme-dark .v2x.gdx .gdx-arcsearch-x:hover { background: rgba(255, 255, 255, .08); }

/* ============================================================================
   §CATGRID — /guides/categories
   A card per topic with three REAL guides under it, so the index is useful
   rather than a menu of names.
   ========================================================================== */
.v2x.gdx .gdx-catgrid      { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 10px 0 34px; }
.v2x.gdx .gdx-catcard      { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--v2-line); border-radius: 18px;
                             padding: 18px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.v2x.gdx .gdx-catcard:hover{ border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: 0 18px 38px -22px rgba(16, 24, 40, .3); }
.v2x.gdx .gdx-catcard-head { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.v2x.gdx .gdx-catcard-head:hover { text-decoration: none; }
.v2x.gdx .gdx-catcard-ico  { flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
                             background: var(--dtc-bg, #EFF4FE); color: var(--dtc-ink-dark, #1B4C9E); }
.v2x.gdx .gdx-catcard-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.v2x.gdx .gdx-catcard-nm   { font-size: 16px; font-weight: 700; color: var(--v2-ink); line-height: 1.3; }
.v2x.gdx .gdx-catcard-cnt  { font-size: 12px; font-weight: 600; color: var(--v2-muted); margin-top: 2px; }
.v2x.gdx .gdx-catcard-arr  { flex: none; display: flex; color: var(--v2-muted); transition: transform .18s ease, color .18s ease; }
.v2x.gdx .gdx-catcard-arr svg { width: 18px; height: 18px; }
.v2x.gdx .gdx-catcard:hover .gdx-catcard-arr { color: var(--brand-blue); transform: translateX(3px); }
.v2x.gdx .gdx-catcard-desc { font-size: 13.5px; line-height: 1.55; color: var(--v2-muted); margin: 12px 0 0; }
.v2x.gdx .gdx-catcard-list { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--v2-line); display: flex; flex-direction: column; gap: 2px; }
.v2x.gdx .gdx-catcard-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; margin: 0 -8px;
                               border-radius: 9px; text-decoration: none; color: var(--v2-ink); transition: background .14s ease, color .14s ease; }
.v2x.gdx .gdx-catcard-list a:hover { background: #F4F8FE; color: #2060C0; text-decoration: none; }
.v2x.gdx .gdx-catcard-lnk  { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.v2x.gdx .gdx-catcard-list .gdx-pips { flex: none; }
.v2x.gdx .gdx-catcard-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 12.5px; font-weight: 700;
                             color: #2060C0; text-decoration: none; }
.v2x.gdx .gdx-catcard-more svg { width: 14px; height: 14px; }
.v2x.gdx .gdx-catcard-more:hover { text-decoration: underline; color: #17408A; }

body.theme-dark .v2x.gdx .gdx-catcard          { background: var(--white); border-color: var(--v2-line); }
body.theme-dark .v2x.gdx .gdx-catcard:hover    { border-color: var(--brand-blue-light); box-shadow: 0 18px 38px -22px rgba(0, 0, 0, .7); }
body.theme-dark .v2x.gdx .gdx-catcard-ico      { background: rgba(54, 128, 237, .16); color: var(--brand-blue-light); }
body.theme-dark .v2x.gdx .gdx-catcard-list a:hover { background: rgba(255, 255, 255, .05); color: var(--brand-blue-light); }
body.theme-dark .v2x.gdx .gdx-catcard-more     { color: var(--brand-blue-light); }
body.theme-dark .v2x.gdx .gdx-catcard-more:hover { color: #9CC4FA; }

/* ============================================================================
   §RESP2 — archive + index responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .v2x.gdx .gdx-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .v2x.gdx .gdx-ahead-h1  { font-size: 28px; }
    .v2x.gdx .gdx-ahead-ico { width: 52px; height: 52px; border-radius: 15px; }
    .v2x.gdx .gdx-ahead-ico svg { width: 26px; height: 26px; }
}

@media (max-width: 680px) {
    .v2x.gdx .gdx-catgrid   { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .v2x.gdx .gdx-ahead     { padding: 14px 16px 4px; }
    .v2x.gdx .gdx-ahead-in  { gap: 12px; }
    .v2x.gdx .gdx-ahead-h1  { font-size: 24px; }
    .v2x.gdx .gdx-ahead-sub { font-size: 14px; }
    .v2x.gdx .gdx-ahead-ico { width: 44px; height: 44px; border-radius: 13px; }
    .v2x.gdx .gdx-ahead-ico svg { width: 22px; height: 22px; }
}

@media (hover: none) {
    .v2x.gdx .gdx-catcard:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .v2x.gdx .gdx-catcard,
    .v2x.gdx .gdx-catcard-arr,
    .v2x.gdx .gdx-arcsearch input { transition: none; }
}

/* ============================================================================
   §SAVED — /guides/saved
   ========================================================================== */
.v2x.gdx .gdx-note        { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 11px 14px; border-radius: 12px;
                            background: #F4F8FE; border: 1px solid #CFE0FA; color: #1A4F9E; font-size: 13.5px; line-height: 1.55; }
.v2x.gdx .gdx-note svg    { flex: none; margin-top: 2px; }
.v2x.gdx .gdx-note p      { margin: 0; }
.v2x.gdx .gdx-note a      { color: #17408A; font-weight: 700; }
.v2x.gdx .gdx-note.is-ok  { background: #EDF9F2; border-color: #BFE6D2; color: #1B5E3F; }
.v2x.gdx .gdx-note.is-ok a{ color: #14472F; }

body.theme-dark .v2x.gdx .gdx-note       { background: rgba(54, 128, 237, .12); border-color: rgba(96, 164, 245, .28); color: #BBD5FA; }
body.theme-dark .v2x.gdx .gdx-note a     { color: #9CC4FA; }
body.theme-dark .v2x.gdx .gdx-note.is-ok { background: rgba(34, 160, 100, .14); border-color: rgba(80, 200, 140, .30); color: #A6E4C4; }
body.theme-dark .v2x.gdx .gdx-note.is-ok a { color: #C9F0DC; }

/* Reading progress on a saved row. */
.v2x.gdx .gdx-prog        { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.v2x.gdx .gdx-prog-bar    { flex: 1; max-width: 260px; height: 6px; border-radius: 999px; background: rgba(16, 24, 40, .09); overflow: hidden; }
.v2x.gdx .gdx-prog-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-dark)); }
.v2x.gdx .gdx-prog small  { font-size: 12px; font-weight: 600; color: var(--v2-muted); white-space: nowrap; }

body.theme-dark .v2x.gdx .gdx-prog-bar { background: rgba(255, 255, 255, .10); }

/* ============================================================================
   §ARCHIVE-HERO — `.dir-hh.is-compact`
   ----------------------------------------------------------------------------
   `is-compact` has NO rule in any sheet in this stack, so the archive hero was
   rendering at the hub's full 44px height with none of the hub's content —
   no tiles, no counter deck, no quick chips — pushing the first result below
   the fold on a laptop. The base is `.dir-hh{padding:44px 16px 8px}` and steps
   down to 32px then 24px at the shared sheet's own breakpoints, so this
   mirrors those steps rather than inventing a third scale.

   Scoped to `.v2x.gdx` so it cannot reach the other seven pages that share the
   directory sheet.
   ========================================================================== */
.v2x.gdx .dir-hh.is-compact { padding: 28px 16px 4px; }
.v2x.gdx .dir-hh.is-compact .dir-hh-title { margin-bottom: 6px; }
.v2x.gdx .dir-hh.is-compact .dir-hh-sub   { margin-bottom: 14px; }

/* The decorative arcs are sized for the tall hero; at this height they crop
   awkwardly, so they fade back rather than being removed (removing them makes
   the archive read as a different template from the hub). */
.v2x.gdx .dir-hh.is-compact .dir-hh-arc { opacity: .45; }

@media (max-width: 900px) {
    .v2x.gdx .dir-hh.is-compact { padding: 22px 16px 4px; }
}
@media (max-width: 640px) {
    .v2x.gdx .dir-hh.is-compact { padding: 18px 12px 4px; }
}