/* ==========================================================================
   Air Market - v2, the redesign (see REDESIGN.md).

   Purely additive. Every rule in this file is scoped under :root[data-ui="v2"],
   so store.css is untouched and flipping data-ui="v1" restores the original
   App Store-derived design exactly. Delete this file + the .ui-switch block in
   index.html to retire v2; delete the [data-ui="v1"] path in app.js to retire v1.

   The four moves, per REDESIGN.md §3:
     1. No macOS window chrome - the loudest Apple cue goes first.
     2. Specs are the aesthetic - JetBrains Mono carries every machine figure.
     3. Preview replaces icon - the card shows what the listing produces.
     4. Teal means verified, and nothing else.

   ---- v3 and v4 share this file (REDESIGN.md §11.5, V4-SPEC.md §2.3) -------
   v3 is a SHELL change: sidenav → commerce top nav. It inherits v2's card,
   grid, hero and typography language wholesale, so the selectors below read
   `:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"])` rather than `:root[data-ui="v2"]`.
   v4 rides on the v3 shell unchanged (it only reorders the detail page in
   store-v4.css), so it takes the same widened selector as v3, not a fourth
   private one.

   :is(), NEVER :where(). They match identically here, but :where() contributes
   ZERO specificity, so every rule in this file would drop below the store.css
   declaration it was written to beat - a silent, total regression of v2 with no
   error anywhere. :is() takes the highest specificity of its arguments, so with
   three attribute selectors the widened form still scores exactly what the old
   `:root[data-ui="v2"]` scored (0,2,0) and v2 renders byte-identically.

   Two rules are DELIBERATELY left at `:root[data-ui="v2"]` (unwidened) because
   they style the sidebar shell, which neither v3 nor v4 has:
     · `.side-head { padding-top: 14px }`  (line ~44) - sidebar header only.
     · `.ui-switch { … margin-top: auto … }` (line ~335, two selectors: v1 and
       v2) - assumes the sidebar's flex column. v3 renders its own switch in
       the topbar utility strip and styles it in store-v3-core.css; v4 reuses
       that same v3 copy. The unscoped `.ui-switch-seg` rules below are shared
       by all five designs and need no change.
   If you add a rule here, decide which of the two it is before you pick a
   selector: design language widens (to v2/v3/v4), sidebar shell does not.
   ========================================================================== */

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) {
  --v2-ink: var(--color-neutral-900);
  --v2-paper: var(--color-surface-default);
  --v2-field: var(--color-surface-sunken);
  --v2-line: var(--color-border-subtle);
  --v2-card-r: 14px;
  /* Teal is load-bearing here rather than decorative: it marks verification and
     nothing else, so it stays legible as a signal. brand/800 for text (6.62:1),
     brand/500 for the glyph, which is never the only cue. */
  --v2-verif: var(--color-brand-800);
}

/* ---------------- 1. Shell: no window, no traffic lights ---------------- */

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .traffic { display: none; }

/* The inset "floating macOS window" is the other half of the cue. v2 is a web
   app: full-bleed, no drop shadow, no rounded outer corners. */
@media (min-width: 1500px) {
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) body { padding: 0; }
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .window {
    height: 100vh;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) body { background: var(--v2-paper); }
:root[data-ui="v2"] .side-head { padding-top: 14px; }

/* Wider measure - the 1100px page was sized for 5 icon columns, not cards. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .page { max-width: 1320px; padding: 30px 40px 72px; }

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .page-title {
  font-size: 34px;
  letter-spacing: -0.6px;
  margin-bottom: 22px;
}

/* ---------------- 2. Specs are the aesthetic ---------------- */

/* MONO DISCIPLINE (v2.1). PLAN.md scopes JetBrains Mono to "values a reader
   compares character by character. Prose stays Manrope." v2 broke its own rule
   by setting eyebrows, overlines, stat labels and info keys in mono, which is
   what made the store read as a developer tool rather than a shop. Mono now
   survives only on things you'd compare digit by digit: scan dates, version
   strings, repo slugs, rank numbers. Quantities keep tabular figures in Manrope
   - they need to align in a column, they don't need to look like a terminal. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .mono {
  font-family: var(--font-mono-stack);
  font-variant-numeric: tabular-nums;
}

/* v1's section head - 21px sentence case - was warm and legible. v2's uppercase
   letterspaced 15px version was the second-loudest "technical" cue after mono. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .section-head {
  border-top: 1px solid var(--v2-line);
  align-items: baseline;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .section { margin-top: 44px; }

/* ---------------- 3. The stated hero ---------------- */

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.95fr);
  gap: 40px;
  align-items: center;
  background: var(--v2-field);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-card-r);
  padding: 52px 48px;
  margin-bottom: 22px;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-copy h1 {
  /* The one place the store raises its voice. Tight tracking at display size is
     what makes Manrope read as a masthead rather than as UI. */
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -1.6px;
  font-weight: 800;
  color: var(--v2-ink);
  text-wrap: balance;
}

/* Below this the two columns can't both hold their minimum, and the headline -
   which is deliberately unwrappable at display size - pushes the page sideways.
   Stack instead, and drop the authored <br> so the line breaks where it fits. */
@media (max-width: 1080px) {
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero { grid-template-columns: 1fr; gap: 28px; padding: 38px 30px; }
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-copy h1 br { display: none; }
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-copy p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 46ch;
  margin-top: 16px;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-cta .get-btn { font-size: 13px; padding: 9px 22px; border-radius: 8px; }

/* The proof panel - a person, not a readout. Replaced the permission ledger,
   which was the densest jargon on the page sitting in the store's best slot. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-proof {
  background: var(--v2-paper);
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  padding: 20px 22px;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-proof-stars { color: #f0a92b; font-size: 13px; letter-spacing: 1px; }
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-proof blockquote {
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--v2-ink);
  margin-top: 10px;
  text-wrap: pretty;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-proof figcaption {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 10px;
}
/* The listing name in the caption is a link to that listing. Ink rather than
   link-blue with a quiet underline: the caption is fine print, and a coloured
   word in it competes with the hero's own call to action for the same eye. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-proof-on {
  color: var(--v2-ink);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--v2-line);
  text-underline-offset: 2px;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-proof-on:hover {
  text-decoration-color: currentColor;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-proof-ft {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--v2-line);
  font-size: 12px;
  font-weight: 600;
  color: var(--v2-verif);
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-proof-ft svg { width: 15px; height: 15px; flex: none; }

/* ---------------- 4. The card ---------------- */

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .card-grid {
  display: grid;
  /* auto-fill, not a hardcoded 5 - this is what lets the ranked grids drop the
     column-major row maths that forced re-renders on filter (PLAN.md, Tabs).
     The minimum is tuned so the 1320px page lands on FOUR columns, not five:
     five would reprint the App Store's own rhythm at card size, and the wider
     tile buys the preview enough room to actually be read. */
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 26px 20px;
}

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-card-r);
  overflow: hidden;
  background: var(--v2-paper);
  cursor: var(--cur-pointer);
  transition: border-color .14s, transform .14s;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-card:hover { border-color: var(--color-border-default); transform: translateY(-2px); }

/* `display:flex` above outranks the UA sheet's `[hidden] { display: none }`, so
   the search scope chips - which filter by SETTING [hidden] (app.js TAB_FILTERS
   "search-scope") - announced a selection and changed nothing on screen. Every
   v3 stylesheet already guards its own [hidden] surfaces; this is the card the
   guard was missing on. v1 is unaffected: .result-cell states no display, so
   the UA rule already wins there. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-card[hidden] { display: none; }

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--v2-field);
  border-bottom: 1px solid var(--v2-line);
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-shot .art-fill { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The product mark rides the preview instead of leading the row - it identifies,
   it no longer has to carry the pitch. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-mark {
  position: absolute;
  left: 10px;
  bottom: -13px;
  border-radius: 9px;
  box-shadow: 0 0 0 3px var(--v2-paper);
  overflow: hidden;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-rank {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  color: var(--v2-ink);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-body { padding: 22px 14px 12px; display: flex; flex-direction: column; flex: 1; }
/* The overline names the area of work ("Productivity"), not the machine type
   ("MCP Server") - the taxonomy word moved to the quiet chip on the preview. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--text-3);
}
/* The type, kept but demoted: available to whoever needs it, leading nothing.
   The word, not an icon - a glyph in the corner is a guess the reader has to
   decode, and the taxonomy is short enough to just say. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-kind {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .88);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-top: 3px;
  line-height: 1.2;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-by {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-tick {
  color: var(--v2-verif);
  font-size: 10px;
  font-weight: 700;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-3);
  margin-top: 8px;
  flex: 1;
}

/* The spec strip. Tabular figures so the numbers line up down a column, but set
   in Manrope and worded in plain English - "used by 12.4K people", not
   "12.4K installs · no network". Same facts, no vocabulary to learn. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 12px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-spec span + span { padding-left: 8px; border-left: 1px solid var(--v2-line); }

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--v2-line);
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-verif {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--v2-verif);
  font-size: 10px;
  min-width: 0;
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-verif svg { width: 13px; height: 13px; flex: none; }
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-verif b { font-weight: 500; white-space: nowrap; }
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-foot .get-btn { font-size: 12px; padding: 4px 15px; flex: none; }

/* ---------------- Editorial + promo, retuned to match ---------------- */

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .promo-card,
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .ed-card .art,
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .hero3 .art {
  border-radius: var(--v2-card-r);
}
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .promo-card { border: 1px solid var(--v2-line); background: var(--v2-paper); }
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .promo-card:hover { background: var(--v2-field); }
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .ed-card h4 { letter-spacing: -0.2px; }
/* .eyebrow keeps store.css's Manrope treatment - the v2 mono override is gone. */

/* ---------------- Detail page: teal marks verification ---------------- */

:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .stats-bar { border-color: var(--v2-line); }
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .stat .val { letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .detail-head h1 { letter-spacing: -0.8px; }
/* .stat .lbl and .info-grid .k keep store.css's Manrope - they are labels, i.e.
   prose, and mono on labels was the loudest part of the technical drift. */

/* ---------------- The design switch ---------------- */

:root[data-ui="v2"] .ui-switch,
:root[data-ui="v1"] .ui-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 8px 8px 10px;
  font-size: 11px;
  color: var(--text-3);
}
.ui-switch-label { font-weight: 500; }
.ui-switch-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 7px;
  background: var(--color-action-secondary);
}
.ui-switch-seg button {
  font-family: var(--font-mono-stack);
  font-size: 10.5px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--text-3);
}
.ui-switch-seg button[aria-pressed="true"] {
  background: var(--color-surface-default);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}
.ui-switch-seg button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }

/* The rail has no room for the switch; the tooltip idiom already covers labels. */
:root[data-sidebar="collapsed"] .ui-switch-label { display: none; }
:root[data-sidebar="collapsed"] .ui-switch { justify-content: center; padding-left: 0; padding-right: 0; }
:root[data-sidebar="collapsed"] .ui-switch-seg { flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-card { transition: none; }
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-card:hover { transform: none; }
}

/* v4 (REDESIGN §12.2.5): the card for a listing that has never been checked.
   Teal means verified and nothing else (v2.1's rule), so the honest-empty chip
   drops to the neutral tertiary text colour instead of borrowing the mark -
   including the Air mark inside the badge's shield (UI.airShieldMark), whose
   fill attribute is teal and is overridden here for the same reason. */
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-verif--none { color: var(--text-3); }
:root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .a-verif--none .air-shield-mark g { fill: currentColor; }