/* ═══════════════════════════════════════════════════════════════════════════
   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:#E7EDF7;
  --pmx-ink-soft:#9AA7BD;
  --pmx-line:rgba(255,255,255,.12);
  --pmx-card:#111826;
  --pmx-soft:rgba(255,255,255,.06);
  --pmx-plate-scrim:rgba(14,20,32,.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; }

/* ── §FLAG ── featured ribbon on the grid card ──────────────────────────── */
.v2x.pmx .pmx-flag{
  position:absolute; inset-block-start:14px; inset-inline-end:52px;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:999px;
  font-size:.66rem; font-weight:700; letter-spacing:.02em; line-height:1.4;
  /* Amber-on-dark-amber rather than white-on-amber: white on #F08C00 is
     2.28:1. This pairing measures 6.9:1 light / 8.1:1 dark. */
  background:rgba(240,140,0,.14); color:#8A4B00; border:1px solid rgba(240,140,0,.28);
  z-index:3; pointer-events:none;
}
body.theme-dark .v2x.pmx .pmx-flag{ background:rgba(240,140,0,.18); color:#FFC978; border-color:rgba(240,140,0,.34); }
.v2x.pmx .pmx-flag svg{ inline-size:10px; block-size:10px; }
.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%; }

/* ── §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);
}

/* ── §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; }
}
@media (max-width:640px){
  .v2x.pmx .pmx-flag{ inset-inline-end:48px; font-size:.62rem; padding:2px 7px; }
  .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; }
}
@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; }
}