/* ═══════════════════════════════════════════════════════════════════════════
   AIToolsay · /prompts — THE DELTA
   ---------------------------------------------------------------------------
   Loaded LAST, after public-partials-styles.css (the `.v2x` token layer) and
   v2-public-directory-listing.css (/ai-directory's LIVE sheet). This file only
   carries what a PROMPT has and a directory tool does not. Everything else —
   the grid, the hero, the facet rail, the toolbar, the eight-tone card cycle —
   comes from the shared sheet and MUST NOT be re-declared here, or the two
   pages drift the first time somebody edits one of them.

   ⚠ Scope is `.v2x.pmx` on every rule. /ai-directory, /templates, /gpts,
     /workflows, /ai-projects, /ai-courses and /browser-extensions all read the
     same directory sheet; an unscoped rule here reaches all seven.

   Breakpoint ladder is the SHARED sheet's, measured by frequency:
     1180 · 900 · 820 · 640 · 520.  Not Bootstrap's. Adding a new one here
     makes this page reflow at a width the other seven do not.

   No `:has()` — zero precedent in the shared sheet, and Safari <15.4 drops the
   entire selector rather than just that clause.

   SECTIONS
     §TOKENS  the --pmx-* scale, light + dark
     §PLATE   the type plate  ← the accessibility-critical one, read the note
     §FLAG    featured ribbon
     §MODELS  "works with" chips
     §FACT    blank-count + token facts
     §ACT     card action row
     §COPY    the copy button, all six states
     §CHIPS   active-filter chips
     §TILE    hero orbit tile accent
     §CATS    /prompts/categories grid
     §RAIL    categories-page rail section
     §BUSY    wire:loading dim
     §IOS     16px search input
     §RESP    responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §TOKENS ─────────────────────────────────────────────────────────────
   `--pmx-link` is NOT the raw brand blue. #3680ED as INK measures 3.61:1 on
   the page ground and 3.84:1 on a white card — under AA for body text. #2060C0
   is not invented either: it is the directory sheet's own `--dtc-ink-dark`
   for the blue tone, so the two pages stay in one palette. */
.v2x.pmx{
  --pmx-accent:#3680ED;                 /* per-card, set inline from the category */
  --pmx-link:#2060C0;
  --pmx-ink:#0E1420;
  --pmx-ink-soft:#4A5568;
  --pmx-line:rgba(9,18,33,.10);
  --pmx-card:#FFFFFF;
  --pmx-soft:rgba(9,18,33,.045);
  --pmx-plate-scrim:rgba(255,255,255,.88);
  --pmx-radius:14px;
  --pmx-ease:cubic-bezier(.22,.61,.36,1);
}
body.theme-dark .v2x.pmx{
  --pmx-link:#7FB0F7;
  --pmx-ink:var(--dk-text,#F4F5F7);
  --pmx-ink-soft:#9AA7BD;
  --pmx-line:var(--dk-line-strong,rgba(255,255,255,.16));
  --pmx-card:var(--dk-surface-2,#17171B);
  --pmx-soft:rgba(255,255,255,.06);
  --pmx-plate-scrim:rgba(19,19,23,.82);
}

/* ── §PLATE ──────────────────────────────────────────────────────────────
   ⚠ THE ACCENT PAINTS THE PLATE. IT IS NEVER THE GLYPH. DO NOT "SIMPLIFY".

   A prompt has no logo, so the card plate carries its TYPE glyph on the
   CATEGORY's colour — and `color` is any hex an admin typed. Measured across
   all 14 seeded accents on 2026-08-14:

     accent AS GLYPH INK on a white card :  worst 2.48:1 (Productivity #F08C00)
                                            1 of 14 fails even the 3:1
                                            non-text floor, and the glyph is
                                            the plate's only content.
     scrim OVER accent, glyph in the
     sheet's own guaranteed ink          :  worst 15.25:1 light  (Social Media)
                                            worst 11.89:1 dark   (Productivity)

   `linear-gradient(scrim, scrim), var(--pmx-accent)` rather than color-mix():
   Safari had no color-mix() until 16.2 and an unsupported value here would
   drop the whole background, leaving the glyph on nothing. */
.v2x.pmx .pmx-plate{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:44px; block-size:44px; flex:0 0 auto;
  border-radius:12px;
  background:linear-gradient(var(--pmx-plate-scrim),var(--pmx-plate-scrim)),var(--pmx-accent,#3680ED);
  border:1px solid var(--pmx-line);
  color:var(--pmx-ink);
  transition:transform .28s var(--pmx-ease), border-color .28s var(--pmx-ease);
}
.v2x.pmx .pmx-plate svg{ inline-size:21px; block-size:21px; }
.v2x.pmx .dir-tc:hover .pmx-plate{ transform:translateY(-1px) scale(1.04); }

.v2x.pmx .pmx-plate.is-lc{ inline-size:52px; block-size:52px; border-radius:14px; }
.v2x.pmx .pmx-plate.is-lc svg{ inline-size:24px; block-size:24px; }

/* Rail plate — smaller, and it must override `.dir-tr-lg`'s own box from the
   shared sheet, which expects a product logo <img> rather than a glyph. */
.v2x.pmx .pmx-plate.is-rail{
  inline-size:38px; block-size:38px; border-radius:10px; padding:0;
}
.v2x.pmx .pmx-plate.is-rail svg{ inline-size:18px; block-size:18px; }

/* ── §CARD ── the two card roots ─────────────────────────────────────────
   `position:relative` is declared HERE rather than inherited from the shared
   sheet's `.dir-tc`, because §FLAG and the bookmark button are absolutely
   positioned against it. Relying on another file to establish the containing
   block means an edit to /ai-directory's card could drop this page's Featured
   ribbon into the top-left corner of the viewport, and nothing on either page
   would report it. `isolation` keeps the ribbon's z-index inside the card so
   it cannot rise above a sticky header. */
.v2x.pmx .pmx-tc,
.v2x.pmx .pmx-lc{ position:relative; isolation:isolate; }

/* ── §HIT ── the grid card is one click target ──────────────────────────
   `.dir-tc-lnk` is the anchor over the whole card, but the shared sheet
   gives EVERY other child `position:relative;z-index:1` — the same layer —
   so anything later in the DOM paints over it and swallows the click. That
   was invisible while the card carried an Open button; the strip of
   2026-08-19 left the description and the plate as dead zones covering most
   of the card. `pointer-events:none` drops clicks through to the anchor.
   NOT z-index: raising the anchor instead would bury the bookmark button and
   the category link, which must stay clickable. Scoped to `.pmx-tc` so the
   row card and `prompt-card.blade.php` keep their own behaviour. Costs text
   selection on the teaser, which the detail page carries in full. */
.v2x.pmx .pmx-tc .dir-tc-desc,
.v2x.pmx .pmx-tc .pmx-cover{ pointer-events:none; }

/* ── §COVER ── the card media field, ported from /templates ──────────────
   A 1:1 port of §COVER in public-templates.css — "design like the templates
   page" is exactly this block. A SECOND COPY rather than a shared file on
   purpose: each sheet already owns its own card delta, and the two things
   this version must NOT inherit are the cover <img> and the file-size badge.
   A prompt has neither a thumbnail to show nor a byte count to state.

   The field breaks out of `.dir-tc`'s `padding:42px 16px 18px` with a
   negative margin, so the CARD's own overflow:hidden + 20px radius clip it.
   No second radius, and nothing to re-sync when the shared sheet moves.

   ⚠ THE TONE IS THE CARD'S, NOT THE CATEGORY'S — `--dtc-bg` and
   `--dtc-ink-dark` from the shared sheet's eight-tone cycle, which is what
   makes a row of these read as one system. This is why the old
   `--pmx-accent` plate is gone from the grid card: §PLATE's scrim existed to
   survive any hex an admin types on a category (one seeded accent measured
   2.48:1 as ink), and the cycle tokens are pre-measured in both themes
   instead. §PLATE itself stays — `.is-lc` and `.is-rail` still wear it. */
.v2x.pmx .pmx-cover{
  position:relative; z-index:2;
  display:block; inline-size:calc(100% + 32px); margin:-42px -16px 14px;
  aspect-ratio:16 / 10; overflow:hidden;
  background:var(--dtc-bg);
  border-block-end:1px solid var(--v2-line);
}
body.theme-dark .v2x.pmx .pmx-cover{ border-block-end-color:var(--dk-line,rgba(255,255,255,.10)); }

/* Engines without aspect-ratio keep the proportion off a padding box; modern
   ones ignore this because aspect-ratio wins. */
@supports not (aspect-ratio: 16 / 10){
  .v2x.pmx .pmx-cover{ block-size:0; padding-block-end:62.5%; }
}

.v2x.pmx .pmx-cover-art{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    var(--dtc-bg);
}
body.theme-dark .v2x.pmx .pmx-cover-art{
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    var(--dtc-bg);
}

/* A faint page grid behind the glyph. Two repeating-linear-gradients rather
   than an SVG so it costs no request and scales with the card; the radial
   mask fades it out before it reaches the edges. */
.v2x.pmx .pmx-cover-grid{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(16,24,40,.055) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(16,24,40,.055) 0 1px, transparent 1px 22px);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 78%);
}
body.theme-dark .v2x.pmx .pmx-cover-grid{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 22px);
}

/* The glyph plate. ⚠ `--dtc-ink-dark` is only safe here because the DARK twin
   drops the white fill — on an always-white surface that token goes pale and
   the glyph fades out. Change one of these two rules and you must change the
   other. */
.v2x.pmx .pmx-cover-ico{
  position:relative; display:grid; place-items:center;
  inline-size:56px; block-size:56px; border-radius:17px;
  background:#fff; color:var(--dtc-ink-dark);
  box-shadow:0 2px 6px rgba(16,24,40,.09),0 10px 24px -14px rgba(16,24,40,.4);
  transition:transform .34s var(--ease-spring);
}
.v2x.pmx .pmx-cover-ico svg{ inline-size:26px; block-size:26px; }
.v2x .pmx-tc:hover .pmx-cover-ico{ transform:translateY(-2px) scale(1.05); }
body.theme-dark .v2x.pmx .pmx-cover-ico{
  background:rgba(255,255,255,.09); color:var(--dtc-ink-dark);
  box-shadow:0 2px 6px rgba(0,0,0,.4),0 10px 24px -14px rgba(0,0,0,.8);
}

/* The bookmark sits ON the cover now, where the shared sheet has it on a flat
   white card. It needs its own surface to stay legible over any tone. */
.v2x .pmx-tc .dir-tc-bk{
  z-index:4; background:rgba(255,255,255,.86); color:#667085;
  box-shadow:0 1px 3px rgba(16,24,40,.14);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.v2x .pmx-tc .dir-tc-bk:hover{ background:#fff; color:var(--dtc-ink-dark); }
.v2x .pmx-tc .dir-tc-bk.is-on{ background:#fff; color:var(--dtc-ink); }
body.theme-dark .v2x .pmx-tc .dir-tc-bk{
  background:rgba(23,23,27,.78); color:var(--dk-text-3,#9AA0AB); box-shadow:0 1px 3px rgba(0,0,0,.5);
}
body.theme-dark .v2x .pmx-tc .dir-tc-bk:hover,
body.theme-dark .v2x .pmx-tc .dir-tc-bk.is-on{ background:rgba(29,29,34,.94); color:var(--dtc-ink-dark); }

/* ── §FLAG ── featured ribbon ────────────────────────────────────────────
   Now pinned to the COVER's top-left, opposite the bookmark, in /templates'
   own pairing. It used to sit top-right at `inset-inline-end:52px`, dodging
   the bookmark on a card that had no cover; on a cover the two corners are
   the natural pair and nothing has to dodge.

   Inks measured on their own fills, both themes:
     #92400E on #FEF3C7 = 8.31:1   ·   #FBBF24 on #3B2A08 = 8.94:1 */
.v2x.pmx .pmx-flag{
  position:absolute; inset-block-start:10px; inset-inline-start:10px; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px;
  background:#FEF3C7; color:#92400E;
  box-shadow:inset 0 0 0 1px rgba(146,64,14,.16);
  font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  line-height:1.5; pointer-events:none;
}
.v2x.pmx .pmx-flag svg{ inline-size:11px; block-size:11px; flex:0 0 auto; }
body.theme-dark .v2x.pmx .pmx-flag{
  background:#3B2A08; color:#FBBF24; box-shadow:inset 0 0 0 1px rgba(251,191,36,.22);
}
/* A list row has no cover to pin to, so it flows in the name line. */
.v2x.pmx .pmx-flag.is-inline{ position:static; inset:auto; margin-inline-start:8px; }

/* ── §MODELS ── "works with" chips ──────────────────────────────────────── */
.v2x.pmx .pmx-models{ display:flex; flex-wrap:wrap; gap:5px; margin-block:2px 10px; }
.v2x.pmx .pmx-model{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:7px;
  font-size:.68rem; font-weight:600; line-height:1.55;
  background:var(--pmx-soft); color:var(--pmx-ink-soft);
  border:1px solid var(--pmx-line);
  white-space:nowrap; max-inline-size:100%; overflow:hidden; text-overflow:ellipsis;
}
.v2x.pmx .pmx-model.is-more{ font-variant-numeric:tabular-nums; opacity:.82; }
.v2x.pmx .pmx-models.is-lc{ margin:0; display:inline-flex; }

/* ── §FACT ── the two figures a prompt can honestly show ────────────────── */
.v2x.pmx .pmx-fact{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.7rem; font-weight:600; line-height:1.5;
  color:var(--pmx-ink-soft); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.v2x.pmx .pmx-fact svg{ inline-size:13px; block-size:13px; opacity:.78; flex:0 0 auto; }

/* ── §ACT ── card action row ────────────────────────────────────────────
   `margin-block-start:auto` pins it to the bottom so cards in one row end
   level regardless of description length. The shared `.dir-tc` is a flex
   column, so this works without a grid change. */
.v2x.pmx .pmx-act{
  display:flex; align-items:stretch; gap:8px;
  margin-block-start:auto; padding-block-start:12px;
  position:relative; z-index:2;
}
.v2x.pmx .pmx-act .dir-tc-btn{ flex:1 1 auto; margin:0; }

/* The raw prompt text the copy button reads. `hidden` already removes it from
   layout and the a11y tree; this is belt-and-braces for a UA that ignores the
   attribute on a form control, which would otherwise drop a 900-character
   textarea into the middle of the card. */
.v2x.pmx .pmx-src{ display:none !important; }

/* ── §COPY ── the copy button, all six states ────────────────────────────
   This is the most-pressed control on the page, so it gets a real state set
   rather than inheriting a generic button. `min-inline-size` is fixed in ch
   so swapping the label to "Copied" does not resize the button and shove the
   Open button sideways mid-click. */
.v2x.pmx .pmx-copy{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 12px; border-radius:11px;
  font-size:.8rem; font-weight:700; line-height:1;
  min-inline-size:9.5ch;
  background:var(--pmx-card); color:var(--pmx-link);
  border:1.5px solid var(--pmx-line);
  cursor:pointer; white-space:nowrap; flex:0 0 auto;
  transition:background .2s var(--pmx-ease), border-color .2s var(--pmx-ease),
             color .2s var(--pmx-ease), transform .12s var(--pmx-ease);
}
.v2x.pmx .pmx-copy-ico{ display:inline-flex; }
.v2x.pmx .pmx-copy-ico svg{ inline-size:15px; block-size:15px; }

.v2x.pmx .pmx-copy:hover{
  background:rgba(32,96,192,.08); border-color:rgba(32,96,192,.42); color:var(--pmx-link);
}
body.theme-dark .v2x.pmx .pmx-copy:hover{ background:rgba(127,176,247,.14); border-color:rgba(127,176,247,.44); }

.v2x.pmx .pmx-copy:active{ transform:translateY(1px); }

/* Focus ring is drawn OUTSIDE the border so it survives the hover background
   change; `:focus-visible` only, so a mouse press does not leave a ring. */
.v2x.pmx .pmx-copy:focus-visible{
  outline:2px solid var(--pmx-link); outline-offset:2px;
}

/* Success. Emerald ink on an emerald wash — 5.6:1 light, 7.4:1 dark. */
.v2x.pmx .pmx-copy.is-done{
  background:rgba(15,138,90,.12); border-color:rgba(15,138,90,.40); color:#0B6B45;
}
body.theme-dark .v2x.pmx .pmx-copy.is-done{ background:rgba(45,190,130,.16); border-color:rgba(45,190,130,.42); color:#6FE0AE; }

/* Failure — the clipboard API was unavailable AND execCommand failed, so the
   script tells the visitor to press Ctrl+C. Rose, not red-alarm: nothing broke,
   the browser just would not do it silently. */
.v2x.pmx .pmx-copy.is-failed{
  background:rgba(190,24,93,.10); border-color:rgba(190,24,93,.38); color:#9B1750;
}
body.theme-dark .v2x.pmx .pmx-copy.is-failed{ background:rgba(244,114,182,.14); border-color:rgba(244,114,182,.40); color:#F9A8D4; }

/* List-row copy button sits in the side stack, so it stretches to match. */
.v2x.pmx .dir-lc-side .pmx-copy{ inline-size:100%; }

/* ── §VGAL ── the video gallery on a video category hub ──────────────────
   REBUILT 2026-08-19 (second pass). The first two passes drew their own card
   — white box, own border, own shadow — and it read as a different site.

   ⚠ THE TILE NOW WEARS `.dir-tc`, THE SHARED PREMIUM CARD. Everything that
   makes a card on /ai-directory and /prompts look expensive comes from
   §TCPRM in public-dir-bands.css and arrives here for free:

     · the eight-tone cycle by card position   (--dtc-ink / --dtc-rgb / --dtc-bg)
     · the 152deg diagonal wash across the surface
     · the top accent bar that grows from the centre on hover
     · the corner bloom hanging off the top-right
     · the conic ring that sweeps the border band
     · the −6px lift with a tone-coloured shadow
     · the dark restatement of all of it

   So NOTHING below re-declares a background, a border, a shadow or a lift.
   What is left is the one thing that card does not do: a media-first layout.
   `.dir-tc` is `padding:42px 16px 18px`, `align-items:center`, `text-align:
   center` — built for a logo plate over centred copy. A clip has to reach all
   four edges, so the overrides here are exactly that and no more.

   MASONRY IS CSS COLUMNS, not grid and not a JS packer: Livewire replaces the
   results container on every filter change and a JS layout pass would have to
   re-run after each morph. `break-inside:avoid` is load-bearing — without it a
   clip is sliced across two columns.

   REST identifies the tile — frame, title, category, counts, both controls.
   HOVER only adds — the clip plays, the card lifts and lights, and the CTA
   bar rises. Nothing needed to choose a tile depends on a pointer. */
.v2x.pmx .pmx-gal{
  columns:4 272px; column-gap:18px;
  margin-block-start:2px;
}

/* ── Column membership. BOTH kinds of item live here ────────────────────
   Since 2026-08-19 the listing is one masonry set holding media tiles AND
   cards, so the column rules belong to `.dir-tc` — the class both wear — not
   to the tile alone. A card without `break-inside:avoid` gets sliced across a
   column boundary, and the slice looks like a rendering fault rather than a
   missing rule. */
.v2x.pmx .pmx-gal > .dir-tc{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin-block-end:18px;
}
@media (max-width:900px){ .v2x.pmx .pmx-gal > .dir-tc{ margin-block-end:14px; } }
@media (max-width:560px){ .v2x.pmx .pmx-gal > .dir-tc{ margin-block-end:16px; } }

/* The MEDIA TILE's layout override, at (0,3,0) so it beats `.dir-tc`'s own
   (0,2,0) rules AND its 680px padding change, which would otherwise put 20px
   back on top of the clip on a phone. A card keeps `.dir-tc`'s centred padded
   layout untouched — only the tile is media-first. */
.v2x.pmx .pmx-gal .pmx-vc{
  display:flex; flex-direction:column; align-items:stretch;
  gap:0; text-align:start;

  /* ⚠ 3px OF TOP PADDING, NOT ZERO, AND IT IS NOT A NUDGE. §TCPRM paints the
     card's accent bar as a background layer at `50% 0` sized `0 3px`, growing
     to `calc(100% - 40px)` on hover. Media flush at y=0 covers it, and the
     single most recognisable hover cue on this site silently stops existing
     on these tiles. The strip is the card's own surface at rest and the tone
     bar on hover. */
  padding:3px 0 0;
}
/* Which means the clip no longer sits in the card's rounded corner, so it
   carries its own — 20px radius less the 3px strip. */
.v2x.pmx .pmx-vc-media{
  border-start-start-radius:17px;
  border-start-end-radius:17px;
}

/* ── media ─────────────────────────────────────────────────────────────── */
.v2x.pmx .pmx-vc-media{
  position:relative; display:block; overflow:hidden;
  background:var(--dtc-bg); color:inherit; text-decoration:none;
  line-height:0;                     /* kills the descender gap under a video */
  box-shadow:inset 0 -1px 0 rgba(var(--dtc-rgb,54,128,237), .18);
}
.v2x.pmx .pmx-vc-vid,
.v2x.pmx .pmx-vc-img{
  display:block; inline-size:100%; block-size:auto;
  /* No transform at rest: a permanent scale promotes every clip to its own
     compositor layer for the whole session, and eighteen of those on a phone
     is memory spent on a frame that is not moving. */
  transition:transform .7s var(--ease-out), filter .4s ease;
}
@media (hover:hover){
  .v2x.pmx .pmx-vc:hover .pmx-vc-vid,
  .v2x.pmx .pmx-vc:hover .pmx-vc-img{ transform:scale(1.055); }
}

/* The no-media fallback. 4/5 so a column of them still has rhythm. */
.v2x.pmx .pmx-vc-wash{
  position:relative; display:grid; place-items:center; aspect-ratio:4 / 5;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(var(--pmx-plate-scrim),var(--pmx-plate-scrim)),
    var(--pmx-accent,#3680ED);
}
body.theme-dark .v2x.pmx .pmx-vc-wash{
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(var(--pmx-plate-scrim),var(--pmx-plate-scrim)),
    var(--pmx-accent,#3680ED);
}
.v2x.pmx .pmx-vc-grid{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(16,24,40,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(16,24,40,.05) 0 1px, transparent 1px 22px);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 78%);
}
body.theme-dark .v2x.pmx .pmx-vc-grid{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px);
}
.v2x.pmx .pmx-vc-ico{
  position:relative; display:grid; place-items:center;
  inline-size:54px; block-size:54px; border-radius:17px;
  background:#fff; color:var(--dtc-ink-dark,#2060C0);
  box-shadow:0 2px 6px rgba(16,24,40,.09), 0 10px 24px -14px rgba(16,24,40,.4);
  transition:transform .34s var(--ease-spring);
}
.v2x.pmx .pmx-vc-ico svg{ inline-size:25px; block-size:25px; }
.v2x.pmx .pmx-vc:hover .pmx-vc-ico{ transform:translateY(-2px) scale(1.05); }
body.theme-dark .v2x.pmx .pmx-vc-ico{
  background:rgba(255,255,255,.09); box-shadow:0 2px 6px rgba(0,0,0,.4);
}

/* ALWAYS-ON scrim, and only where the badges sit, so a bright frame keeps its
   colour through the middle. This is what carries their contrast instead of a
   full-frame dim. */
.v2x.pmx .pmx-vc-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,14,24,.46) 0%, rgba(9,14,24,0) 28%),
    linear-gradient(0deg,  rgba(9,14,24,.30) 0%, rgba(9,14,24,0) 20%);
}

/* ── the play affordance ───────────────────────────────────────────────── */
.v2x.pmx .pmx-vc-play{
  position:absolute; inset-block-end:12px; inset-inline-start:12px; z-index:3;
  display:grid; place-items:center; inline-size:34px; block-size:34px;
  border-radius:999px; color:#fff;
  background:rgba(9,14,24,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 4px 14px -6px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(7px) saturate(1.4); backdrop-filter:blur(7px) saturate(1.4);
  transition:opacity .22s ease, transform .34s var(--ease-spring), background .22s ease, box-shadow .22s ease;
}
.v2x.pmx .pmx-vc-play svg{ inline-size:13px; block-size:13px; margin-inline-start:2px; }
@media (hover:hover){
  /* The badge takes the card's own tone on hover — the same move the card's
     logo plate makes on /ai-directory, so the two read as one family. */
  .v2x.pmx .pmx-vc:hover .pmx-vc-play{
    transform:scale(1.1);
    background:var(--dtc-ink);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 8px 20px -6px var(--dtc-shadow, rgba(0,0,0,.6));
  }
}
/* Hidden while the clip runs — the affordance and the state must never
   contradict each other. */
.v2x.pmx .pmx-vc.is-playing .pmx-vc-play{ opacity:0; transform:scale(.84); }

.v2x.pmx .pmx-vc-dur{
  position:absolute; inset-block-end:12px; inset-inline-end:12px; z-index:3;
  padding:4px 10px; border-radius:999px;
  background:rgba(9,14,24,.58); color:#fff;
  font-size:10.5px; font-weight:700; line-height:1.5; letter-spacing:.012em;
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:opacity .22s ease, transform .28s var(--pmx-ease);
}
@media (hover:hover){
  .v2x.pmx .pmx-vc:hover .pmx-vc-dur{ opacity:0; transform:translateY(6px); }
}

/* The CTA bar. Hover only and PURELY ADDITIVE — the tile is fully labelled
   underneath, so nothing is lost where it never appears (touch, reduced
   motion, an engine without :hover). It wears `--dtc-solid`, the same gradient
   `.dir-tc-btn` uses, so it is the house button rather than a new one. */
.v2x.pmx .pmx-vc-cta{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:4;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px;
  background-image:linear-gradient(160deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 58%), var(--dtc-solid);
  color:#fff; font-size:12.5px; font-weight:760; letter-spacing:-.005em; line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  transform:translateY(101%);
  transition:transform .38s var(--pmx-ease);
}
.v2x.pmx .pmx-vc-cta svg{ inline-size:15px; block-size:15px; transition:transform .28s var(--ease-out); }
@media (hover:hover){
  .v2x.pmx .pmx-vc:hover .pmx-vc-cta,
  .v2x.pmx .pmx-vc:focus-within .pmx-vc-cta{ transform:translateY(0); }
  .v2x.pmx .pmx-vc:hover .pmx-vc-cta svg{ transform:translateX(4px); }
}

/* ── like / save. PERMANENT, both themes, both states ──────────────────── */
.v2x.pmx .pmx-vc-acts{
  position:absolute; inset-block-start:12px; inset-inline-end:12px; z-index:5;
  display:flex; align-items:center; gap:7px;
}
.v2x.pmx .pmx-vc-btn{
  display:inline-flex; align-items:center; gap:5px;
  block-size:31px; padding-inline:10px; border:0; border-radius:999px;
  background:rgba(255,255,255,.93); color:#3B4559;
  box-shadow:0 2px 8px -2px rgba(16,24,40,.34), inset 0 0 0 1px rgba(255,255,255,.6);
  font-size:11.5px; font-weight:750; line-height:1; font-variant-numeric:tabular-nums;
  -webkit-backdrop-filter:blur(7px) saturate(1.4); backdrop-filter:blur(7px) saturate(1.4);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .26s var(--ease-spring), box-shadow .2s ease;
}
.v2x.pmx .pmx-vc-btn svg{ inline-size:15px; block-size:15px; flex:0 0 auto; }
.v2x.pmx .pmx-vc-btn:hover{ background:#fff; transform:translateY(-1px) scale(1.07); box-shadow:0 6px 14px -4px rgba(16,24,40,.4); }
.v2x.pmx .pmx-vc-btn:active{ transform:scale(.95); }
.v2x.pmx .pmx-vc-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Rose for the heart and the module's own link blue for the save, so two
   pills side by side never read as one control. Inks measured on the pill
   fill: #C81E63 = 5.1:1, #2060C0 = 6.3:1. */
.v2x.pmx .pmx-vc-like:hover,
.v2x.pmx .pmx-vc-like.is-on{ color:#C81E63; }
.v2x.pmx .pmx-vc-save:hover,
.v2x.pmx .pmx-vc-save.is-on{ color:#2060C0; }

body.theme-dark .v2x.pmx .pmx-vc-btn{
  background:rgba(19,19,23,.84); color:var(--dk-text-2,#C7CAD1);
  box-shadow:0 2px 8px -2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12);
}
body.theme-dark .v2x.pmx .pmx-vc-btn:hover{ background:rgba(36,36,42,.95); }
body.theme-dark .v2x.pmx .pmx-vc-like:hover,
body.theme-dark .v2x.pmx .pmx-vc-like.is-on{ color:#FF8FB8; }
body.theme-dark .v2x.pmx .pmx-vc-save:hover,
body.theme-dark .v2x.pmx .pmx-vc-save.is-on{ color:#8CBEFA; }

/* ── body. NEVER hidden. ───────────────────────────────────────────────── */
.v2x.pmx .pmx-vc-body{
  display:flex; flex-direction:column; gap:10px;
  padding:14px 15px 15px;
}
.v2x.pmx .pmx-vc-nm{
  margin:0; font-size:15px; font-weight:750; line-height:1.35; letter-spacing:-.014em;
}
.v2x.pmx .pmx-vc-nm a{
  color:var(--pmx-ink); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .2s ease;
}
/* The card's own cycled tone on hover, which is what `.dir-tc-nm` does on the
   grid card — not a fixed blue, or a violet card would light up blue. */
@media (hover:hover){
  .v2x.pmx .pmx-vc:hover .pmx-vc-nm a{ color:var(--dtc-ink-dark); }
}
body.theme-dark .v2x.pmx .pmx-vc:hover .pmx-vc-nm a{ color:#fff; }
.v2x.pmx .pmx-vc-nm a:focus-visible{ outline:2px solid var(--pmx-link); outline-offset:3px; border-radius:4px; }

.v2x.pmx .pmx-vc-meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-inline-size:0;
}
/* The category keeps its OWN hex rather than the card's cycled tone — this
   pill is the category's identity everywhere else on the module too. */
.v2x.pmx .pmx-vc-cat{
  display:inline-flex; align-items:center; max-inline-size:58%;
  padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--pmx-accent,#3680ED) 13%, transparent);
  color:var(--pmx-accent,#3680ED);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pmx-accent,#3680ED) 26%, transparent);
  font-size:11px; font-weight:720; line-height:1.5; letter-spacing:.005em; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .2s ease, transform .2s var(--ease-out);
}
.v2x.pmx .pmx-vc-cat:hover{ background:color-mix(in srgb, var(--pmx-accent,#3680ED) 22%, transparent); transform:translateY(-1px); }
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .v2x.pmx .pmx-vc-cat{ background:var(--pmx-soft); box-shadow:inset 0 0 0 1px var(--pmx-line); }
}
/* An admin can type any hex on a category and several of the seeded fourteen
   are pale. After dark the pill ink is lifted off the card rather than
   trusting that hex to carry on a dark ground. */
body.theme-dark .v2x.pmx .pmx-vc-cat{ color:var(--dk-text,#F4F5F7); background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }

.v2x.pmx .pmx-vc-stats{ display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; }
.v2x.pmx .pmx-vc-stat{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:650; line-height:1.5;
  color:var(--pmx-ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.v2x.pmx .pmx-vc-stat svg{ inline-size:13px; block-size:13px; opacity:.7; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (min-width:1500px){ .v2x.pmx .pmx-gal{ columns:4 310px; column-gap:20px; } }
@media (max-width:1180px){ .v2x.pmx .pmx-gal{ columns:3 244px; column-gap:16px; } }
@media (max-width:900px){
  .v2x.pmx .pmx-gal{ columns:2 200px; column-gap:14px; }
  .v2x.pmx .pmx-vc-body{ padding:12px 13px 13px; gap:9px; }
  .v2x.pmx .pmx-vc-nm{ font-size:14px; }
  .v2x.pmx .pmx-vc-acts{ inset-block-start:10px; inset-inline-end:10px; }
  .v2x.pmx .pmx-vc-play{ inline-size:32px; block-size:32px; inset-block-end:10px; inset-inline-start:10px; }
  .v2x.pmx .pmx-vc-dur{ inset-block-end:10px; inset-inline-end:10px; }
}
@media (max-width:560px){
  .v2x.pmx .pmx-gal{ columns:1; }
  .v2x.pmx .pmx-vc-nm{ font-size:15.5px; }
  .v2x.pmx .pmx-vc-body{ padding:14px 15px 15px; }
  .v2x.pmx .pmx-vc-cat{ max-inline-size:54%; }
}

/* TOUCH. No hover exists, so the tile has to be complete without it — the body
   already is. The CTA bar would only cover the frame, and the lift, the zoom
   and the badge swap are pointer feedback for a pointer that is not there.
   Controls grow to a 44px target with their gap. */
@media (hover:none){
  .v2x.pmx .pmx-vc-cta{ display:none; }
  .v2x.pmx .pmx-vc-btn{ block-size:36px; padding-inline:13px; font-size:12px; }
  .v2x.pmx .pmx-vc-btn svg{ inline-size:16px; block-size:16px; }
  .v2x.pmx .pmx-vc-play{ inline-size:36px; block-size:36px; }
}

@media (prefers-reduced-motion: reduce){
  .v2x.pmx .pmx-vc-vid,
  .v2x.pmx .pmx-vc-img,
  .v2x.pmx .pmx-vc-cta,
  .v2x.pmx .pmx-vc-btn,
  .v2x.pmx .pmx-vc-play,
  .v2x.pmx .pmx-vc-ico,
  .v2x.pmx .pmx-vc-cat{ transition:none; }
  .v2x.pmx .pmx-vc:hover .pmx-vc-vid,
  .v2x.pmx .pmx-vc:hover .pmx-vc-img{ transform:none; }
  .v2x.pmx .pmx-vc:hover .pmx-vc-cta{ transform:translateY(0); }
}


/* ── §CHIPS ── active-filter chips ───────────────────────────────────────
   ⚠ THE REMOVE BUTTON'S INK FLIPS BETWEEN THEMES ON PURPOSE. Routing its
   hover through --pmx-link fixes light (white on #2060C0 = 6.01:1) and
   silently breaks dark, where the same token is the LIGHT blue #7FB0F7 and
   white on it measures 2.22:1. Dark flips the ink to near-black instead:
   8.30:1. Same trap /templates hit. */
.v2x.pmx .pmx-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-block:0 16px; }
.v2x.pmx .pmx-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 8px 5px 11px; border-radius:999px;
  font-size:.76rem; font-weight:600; line-height:1.5;
  background:var(--pmx-soft); color:var(--pmx-ink);
  border:1px solid var(--pmx-line);
}
.v2x.pmx .pmx-chip > button{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:17px; block-size:17px; padding:0; border:0; border-radius:50%;
  background:rgba(9,18,33,.09); color:var(--pmx-ink);
  font-size:.86rem; line-height:1; cursor:pointer;
  transition:background .18s var(--pmx-ease), color .18s var(--pmx-ease);
}
body.theme-dark .v2x.pmx .pmx-chip > button{ background:rgba(255,255,255,.14); }
.v2x.pmx .pmx-chip > button:hover{ background:var(--pmx-link); color:#fff; }
body.theme-dark .v2x.pmx .pmx-chip > button:hover{ color:#0E1420; }
.v2x.pmx .pmx-chip > button:focus-visible{ outline:2px solid var(--pmx-link); outline-offset:1px; }

.v2x.pmx .pmx-chip.is-clear{
  padding:5px 11px; cursor:pointer;
  background:transparent; color:var(--pmx-link);
  border-style:dashed; font-weight:700;
}
.v2x.pmx .pmx-chip.is-clear:hover{ background:rgba(32,96,192,.08); }
body.theme-dark .v2x.pmx .pmx-chip.is-clear:hover{ background:rgba(127,176,247,.14); }

/* ── §TILE ── hero orbit tile accent ─────────────────────────────────────
   Same scrim contract as §PLATE — these tiles carry a category glyph too. */
.v2x.pmx .pmx-tile{
  background:linear-gradient(var(--pmx-plate-scrim),var(--pmx-plate-scrim)),var(--pmx-accent,#3680ED);
  color:var(--pmx-ink);
}

/* ── §GROUP ── the eight headings on /prompts/categories ─────────────────
   The taxonomy went two levels deep on 2026-08-19 (8 groups over 100
   categories) and 108 cards in one flat grid is a wall. Each group gets a
   heading and its own `.dir-cat-grid` underneath.

   The heading is NOT `.dir-cat-head` — that one is the page's showcase title
   with an eyebrow and a 30px accent word, and eight of those would read as
   eight pages stapled together. This is a row: plate, name, count line.

   The plate wears §PLATE's scrim trick, so the group's own hex paints the
   PLATE and never the glyph — see the measurements in §PLATE for why. */
.v2x.pmx .pmx-group + .pmx-group{ margin-block-start:34px; }

.v2x.pmx .pmx-grouphead{
  display:flex; align-items:center; gap:12px;
  margin-block-end:14px; padding-block-end:12px;
  border-block-end:1px solid var(--pmx-line);
}
.v2x.pmx .pmx-grouphead-ico{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:38px; block-size:38px; flex:0 0 auto; border-radius:11px;
  background:linear-gradient(var(--pmx-plate-scrim),var(--pmx-plate-scrim)),var(--pmx-accent,#3680ED);
  border:1px solid var(--pmx-line); color:var(--pmx-ink);
}
.v2x.pmx .pmx-grouphead-ico svg{ inline-size:19px; block-size:19px; }

.v2x.pmx .pmx-grouphead-tx{ display:flex; flex-direction:column; gap:2px; min-inline-size:0; }
.v2x.pmx .pmx-grouphead-nm{
  font-size:1.06rem; font-weight:750; line-height:1.3; letter-spacing:-.01em;
  color:var(--pmx-ink); text-decoration:none;
}
.v2x.pmx .pmx-grouphead-nm:hover{ color:var(--brand-blue,#3680ED); }
.v2x.pmx .pmx-grouphead-sub{
  font-size:.78rem; font-weight:600; line-height:1.45; color:var(--pmx-ink-soft);
  font-variant-numeric:tabular-nums;
}

@media (max-width:520px){
  .v2x.pmx .pmx-group + .pmx-group{ margin-block-start:26px; }
  .v2x.pmx .pmx-grouphead-ico{ inline-size:34px; block-size:34px; border-radius:10px; }
  .v2x.pmx .pmx-grouphead-ico svg{ inline-size:17px; block-size:17px; }
  .v2x.pmx .pmx-grouphead-nm{ font-size:1rem; }
}

/* ── §CATS ── /prompts/categories grid ───────────────────────────────────
   The shared sheet gives `.dir-cat-card` its look but only inside a
   horizontal `.dir-cat-rail`. This page wants a wrapping grid, so only the
   container is declared; the cards are untouched. */
.v2x.pmx .dir-cat-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  margin-block-start:26px;
}
.v2x.pmx .dir-cat-grid .dir-cat-card{
  inline-size:auto; min-inline-size:0; flex:none; scroll-snap-align:none;
}
/* An empty category is dimmed, not hidden — see the blade's note on why this
   page lists them and the listing's rail does not. Still clickable: the hub
   renders its own honest empty state. */
.v2x.pmx .dir-cat-card.is-empty{ opacity:.62; }
.v2x.pmx .dir-cat-card.is-empty:hover{ opacity:.86; }
.v2x.pmx .dir-cat-card-cnt.is-none{ font-style:italic; opacity:.85; }

.v2x.pmx .pmx-catall{ display:flex; justify-content:center; margin-block-start:22px; }
.v2x.pmx .pmx-catall .dir-tr-more{ display:inline-flex; inline-size:auto; padding-inline:20px; }

/* ── §HERE ── "you are on this one" in the category rail ─────────────────
   ⚠ `.is-here` HAS NO RULE IN THE SHARED SHEET (0 hits). The blade sets it
   together with aria-current="page", so without this the state reached
   assistive tech and nothing else. /ai-directory never renders it, which is
   why the sheet never grew one.

   Ring + tint rather than a background swap: the card's tone cycle is what
   makes the rail readable, and replacing the background would drop this one
   card out of that system. */
.v2x.pmx .dir-cat-card.is-here{
  border-color:var(--dtc-ink);
  box-shadow:0 0 0 2px var(--dtc-ink) inset, 0 10px 24px -18px var(--dtc-shadow);
}
.v2x.pmx .dir-cat-card.is-here .dir-cat-card-cnt{
  background:var(--dtc-ink); color:#fff; box-shadow:none;
}
body.theme-dark .v2x.pmx .dir-cat-card.is-here .dir-cat-card-cnt{
  color:#0E1420;
}
/* The arrow points nowhere useful on the page you are already on. */
.v2x.pmx .dir-cat-card.is-here .dir-cat-card-arr{ opacity:.35; }

/* Page-scope hook for /prompts/categories. That page has NO facet rail, so
   its first section sits directly under the marquee where the listing has a
   `.dir-lab` wrapper supplying the top rhythm. */
.v2x.pmx.pmx-cats .dir-cat-sect{ margin-block-start:34px; }
.v2x.pmx .pmx-catgrid{ padding-block-end:8px; }

/* ── §RAIL ── categories-page rail section ──────────────────────────────── */
.v2x.pmx .pmx-railsect{ margin-block-start:44px; }
.v2x.pmx .pmx-railsect .dir-tr-box{ max-inline-size:100%; }

/* ── §BUSY ───────────────────────────────────────────────────────────────
   ⚠ `is-busy` HAS NO RULE IN ANY SHEET IN THIS STACK — the seventh module in
   a row to hit this. `wire:loading.class="is-busy"` otherwise lands a dead
   class and the page gives no feedback during a filter round-trip.

   pointer-events:none is the load-bearing half: mid-filter the cards on screen
   are the OLD result set, so a click would open a prompt the visitor did not
   choose. */
.v2x.pmx .pmx-results.is-busy,
.v2x.pmx .dir-cat-grid.is-busy{
  opacity:.45; pointer-events:none;
  transition:opacity .18s var(--pmx-ease);
}
@media (prefers-reduced-motion:reduce){
  .v2x.pmx .pmx-results.is-busy,
  .v2x.pmx .dir-cat-grid.is-busy{ transition:none; }
}

/* ── §IOS ────────────────────────────────────────────────────────────────
   The SHARED sheet ships the hero search input at 15.5px (14px under 820px),
   and iOS Safari zooms the viewport on focus for anything under 16px. Pinned
   here rather than in the shared sheet, because raising it there reflows seven
   other pages that have not been re-verified at every width.

   ⚠ The shared miss is REAL and still wants its own pass. */
@media (max-width:820px){
  .v2x.pmx .dir-hh-search input{ font-size:16px; }
}

/* ── §RESP ───────────────────────────────────────────────────────────────
   Only what the delta's OWN elements need. The grid, hero and rail already
   respond via the shared sheet; re-declaring their breakpoints here is how
   two files start disagreeing about what 820px means. */
@media (max-width:900px){
  .v2x.pmx .dir-lc-side{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .v2x.pmx .dir-lc-side .pmx-copy{ inline-size:auto; flex:1 1 auto; }
}
/* The cover's negative margin has to track the card's own padding, which
   the shared sheet drops to 20px 16px at 680. */
@media (max-width:680px){
  .v2x.pmx .pmx-cover{ margin:-20px -16px 12px; }
}
@media (max-width:640px){
  .v2x.pmx .pmx-act{ gap:6px; }
  /* Below this the label costs more than it earns — the glyph plus the
     button's aria-label carry it, and the two buttons stay side by side
     instead of stacking into a 96px-tall action block. */
  .v2x.pmx .pmx-copy{ min-inline-size:0; padding-inline:11px; }
  .v2x.pmx .pmx-copy-tx{ display:none; }
  .v2x.pmx .dir-lc-side .pmx-copy .pmx-copy-tx{ display:inline; }
}
/* On the narrowest phones the ribbon keeps its star and drops its label. */
@media (max-width:400px){
  .v2x.pmx .pmx-flag{ font-size:0; gap:0; padding:5px; }
  .v2x.pmx .pmx-flag svg{ inline-size:12px; block-size:12px; }
  .v2x.pmx .pmx-flag.is-inline{ font-size:0; padding:4px; }
}

/* Motion: the plate lift is decorative. */
@media (prefers-reduced-motion: reduce){
  .v2x.pmx .pmx-cover-ico{ transition:none; }
  .v2x .pmx-tc:hover .pmx-cover-ico{ transform:none; }
}

@media (max-width:520px){
  .v2x.pmx .pmx-plate{ inline-size:40px; block-size:40px; border-radius:11px; }
  .v2x.pmx .pmx-plate svg{ inline-size:19px; block-size:19px; }
  .v2x.pmx .pmx-plate.is-lc{ inline-size:44px; block-size:44px; }
  .v2x.pmx .dir-cat-grid{ grid-template-columns:1fr; gap:12px; }
  .v2x.pmx .pmx-chips{ gap:6px; }
}