/* App layout — the thin Simple Stack layer over the Pop house system.
   Shell scaffolding, app-specific glue and state guards only; component looks
   live in assets/house/pop.css, values in tokens + bridge. */

/* -------------------------------------------------------------- board ---- */
/* The house dotted board, staggered: the same dot and colours as the pack's
   22px square grid, laid on a 30px grid plus a half-step offset layer — a
   diamond lattice at near-identical density (1 dot / 450px² vs / 484px²).
   House look only; a SITE_DESIGN pack keeps its own background. */
:root:not([data-design]) body {
  background-image:
    radial-gradient(var(--dot) 1.3px, transparent 1.5px),
    radial-gradient(var(--dot) 1.3px, transparent 1.5px);
  background-size: 30px 30px, 30px 30px;
  background-position: 0 0, 15px 15px;
}

/* ------------------------------------------------------------- guards ---- */
/* The hidden attribute must always win. Component rules like
   `.bulk-bar { display: flex }` otherwise out-rank the UA's [hidden] style,
   so JS-toggled UI (the gallery's select bar, filtered cards, login steps)
   showed when it should be hidden. */
[hidden] { display: none !important; }
/* AA fix, app-wide: the pack paints white on --red (#ff5a36) ≈ 3.1:1, which
   fails 4.5:1. Ink on that red measures ~8:1 and keeps the flat-colour rule.
   (Also to fix at the source in _src/pop — see review/REVAMP-INTEGRATION.md.) */
.pop-badge--red, .pop-btn--danger, .pop-alert--danger,
.pop-stat__delta.is-down, .pop-toast--error { color: #141414; }
.pop-alert--danger .pop-alert__tx { color: rgba(17, 17, 17, 0.92); }
.pop-alert--danger .pop-alert__tx strong { color: #141414; }
.pop-btn--danger .pop-icon, .pop-badge--red i, .pop-alert--danger .pop-alert__ico { color: inherit; }
/* pop.css gives .pop-modal a display; server-rendered modals start hidden
   until kit.js opens them. */
.pop-modal[hidden] { display: none !important; }

/* One-shot entrance pops (kit.js adds .is-popped when the element scrolls
   in). State lives in the class, so reduced-motion never hides content. */
@media (prefers-reduced-motion: no-preference) {
  [data-pop]:not(.is-popped) { opacity: 0; transform: scale(0.92); }
  [data-pop].is-popped {
    animation: app-pop 0.45s var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;
  }
  @keyframes app-pop {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
  }
}

/* --------------------------------------------- accent palettes (1–20) ---- */
/* APP_ACCENT re-tints the house accent; the bridge aliases --yellow to
   --accent, so pop primaries, stickers and label pills follow. Loaded after
   the house bridge so these win; a SITE_DESIGN pack's bridge loads later
   still, so an active design's own palette wins over APP_ACCENT. */
:root[data-accent="1"]  { --accent:#6366f1; --accent-2:#818cf8; --accent-ink:#000000; } /* Indigo */
:root[data-accent="2"]  { --accent:#3b82f6; --accent-2:#60a5fa; --accent-ink:#000000; } /* Blue */
:root[data-accent="3"]  { --accent:#0ea5e9; --accent-2:#38bdf8; --accent-ink:#000000; } /* Sky */
:root[data-accent="4"]  { --accent:#06b6d4; --accent-2:#22d3ee; --accent-ink:#000000; } /* Cyan */
:root[data-accent="5"]  { --accent:#14b8a6; --accent-2:#2dd4bf; --accent-ink:#04241f; } /* Teal */
:root[data-accent="6"]  { --accent:#10b981; --accent-2:#34d399; --accent-ink:#03251a; } /* Emerald */
:root[data-accent="7"]  { --accent:#22c55e; --accent-2:#4ade80; --accent-ink:#052e16; } /* Green */
:root[data-accent="8"]  { --accent:#84cc16; --accent-2:#a3e635; --accent-ink:#1a2e05; } /* Lime */
:root[data-accent="9"]  { --accent:#eab308; --accent-2:#facc15; --accent-ink:#2a2205; } /* Yellow */
:root[data-accent="10"] { --accent:#f59e0b; --accent-2:#fbbf24; --accent-ink:#2a1a02; } /* Amber */
:root[data-accent="11"] { --accent:#f97316; --accent-2:#fb923c; --accent-ink:#2a1402; } /* Orange */
:root[data-accent="12"] { --accent:#ef4444; --accent-2:#f87171; --accent-ink:#000000; } /* Red */
:root[data-accent="13"] { --accent:#f43f5e; --accent-2:#fb7185; --accent-ink:#000000; } /* Rose */
:root[data-accent="14"] { --accent:#ec4899; --accent-2:#f472b6; --accent-ink:#000000; } /* Pink */
:root[data-accent="15"] { --accent:#d946ef; --accent-2:#e879f9; --accent-ink:#000000; } /* Fuchsia */
:root[data-accent="16"] { --accent:#a855f7; --accent-2:#c084fc; --accent-ink:#000000; } /* Purple */
:root[data-accent="17"] { --accent:#8b5cf6; --accent-2:#a78bfa; --accent-ink:#000000; } /* Violet */
:root[data-accent="18"] { --accent:#5eead4; --accent-2:#99f6e4; --accent-ink:#04231f; } /* Mint (pastel) */
:root[data-accent="19"] { --accent:#c4b5fd; --accent-2:#ddd6fe; --accent-ink:#1e1b4b; } /* Lavender (pastel) */
:root[data-accent="20"] { --accent:#66768d; --accent-2:#94a3b8; --accent-ink:#000000; } /* Slate */

/* ---------------------------------------------------------- utilities ---- */
.app-container { max-width: 1140px; margin-inline: auto; padding-inline: 20px; }
.app-container--narrow { max-width: 760px; }
.pop-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------- dropdown menus ---- */
/* kit.js toggles .is-open on [data-kit-menu-panel]; the look is the house
   paper card: ink outline, hard drop, pill-ish corners. */
.app-menuwrap { position: relative; }
.app-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 90;
  min-width: 230px; padding: 8px; display: none;
  background: var(--paper); color: var(--text);
  border: 2.5px solid var(--ink); border-radius: 16px;
  box-shadow: 6px 6px 0 var(--drop);
}
.app-menu--end { left: auto; right: 0; }
.app-menu--up { top: auto; bottom: calc(100% + 10px); }
.app-menu.is-open { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .app-menu.is-open { animation: app-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
}
.app-menu__head { display: grid; gap: 1px; padding: 8px 10px 10px; border-bottom: 2px dashed var(--paper-sunk); margin-bottom: 6px; }
.app-menu__head strong { font-family: var(--font-display); font-size: 15px; }
.app-menu__head span { font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.app-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: none; text-align: left;
  border-radius: 10px; color: inherit; font: inherit; font-weight: 600;
  font-size: 14px; text-decoration: none; cursor: pointer;
}
.app-menu__item:hover { background: var(--paper-sunk); }
.app-menu__item.is-danger { color: var(--red); }
.app-menu__item .pop-icon { width: 17px; height: 17px; }
.app-menu__sep { height: 2px; margin: 6px 4px; border-radius: 2px; background: var(--paper-sunk); }

/* ------------------------------------------------- app-shell extras ---- */
/* The mobile topbar (pop.css shows it under 860px) carries extra app items
   (credits, theme, account) — neutralise the pack's "burger pushes right"
   margin and use an explicit spacer instead. */
.app-topbar-spacer { flex: 1; }
.pop-shell__topbar .pop-iconbtn { margin-left: 0; }
.app-credits-top strong { font-variant-numeric: tabular-nums; }
.app-credits-side { display: block; text-decoration: none; color: inherit; }
.app-gate { max-width: 560px; }

/* ------------------------------------- frozen modals (index.php chrome) ---- */
/* #subscription-modal and #product-consent-modal render on any page from the
   shared footer chrome, so their house look lives here (lifted from the
   commerce slice's token-only block). app.js toggles the `hidden` class. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(17, 17, 17, 0.55);
}
.modal-backdrop.hidden { display: none; }
.modal-card {
  width: min(520px, 100%); max-height: min(86vh, 640px); overflow: auto;
  display: grid; gap: 12px; padding: 26px 24px;
  border: 3px solid var(--ink); border-radius: var(--radius-lg);
  background: var(--paper); color: var(--text); box-shadow: var(--shadow-lift);
}
@media (prefers-reduced-motion: no-preference) {
  .modal-card { animation: app-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
}
.modal-card .eyebrow {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 5px 11px 4px; border-radius: var(--radius-pill);
  background: var(--side); color: var(--yellow);
  font: 700 11.5px/1.25 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
}
.modal-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.035em; margin: 0; }
.modal-card p { color: var(--text-soft); font-size: 14.5px; line-height: 1.55; }
.modal-card a { color: var(--text); font-weight: 700; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.consent-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 2px dashed var(--ink); border-radius: 14px; background: var(--paper-sunk); cursor: pointer; }
.consent-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--blue); }
.consent-check span { font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }
@media (max-width: 640px) {
  .modal-actions { justify-content: stretch; }
  .modal-actions .button { flex: 1; }
}

/* Transitional: styles.css's global `strong { color: var(--text) }` turns the
   sidebar brand black-on-black in light theme (slice c report). Self-resolves
   when styles.css dies; harmless after. */
.pop-side__logo strong { color: inherit; }

/* Generic hidden utility — app.js toggles .hidden across shells. */
.hidden { display: none !important; }
.cookie-banner:not([hidden]) { display: flex; }

/* -------------------------------------- cookie banner (all shells) ---- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 110;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  max-width: 680px; margin: 0 auto;
  border: 3px solid var(--ink); border-radius: 20px; background: var(--paper);
  box-shadow: var(--shadow-md, 6px 6px 0 var(--drop)); padding: 14px 18px;
  color: var(--text);
}
.cookie-banner-text { flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.cookie-banner-text a { color: var(--text); font-weight: 700; }
.cookie-banner-actions { display: flex; gap: 9px; }

/* ------------------------------- demo switcher (public nav + sidebar) ---- */
/* demo_switcher_html() renders on demo sites in the pop-header and the
   member sidebar foot; app.js toggles the dropdown. House paper-card look. */
.nav-demo { position: relative; }
.nav-demo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 2.5px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--text); cursor: pointer;
  font: 700 12.5px/1.2 var(--font-body);
}
.nav-demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); border: 1.5px solid var(--ink); }
.nav-demo-caret { width: 14px; height: 14px; }
.nav-demo-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
  min-width: 240px; padding: 8px; display: none;
  background: var(--paper); color: var(--text);
  border: 2.5px solid var(--ink); border-radius: 16px;
  box-shadow: 6px 6px 0 var(--drop);
}
.nav-demo-dropdown.is-open, .nav-demo.is-open .nav-demo-dropdown { display: block; }
.nav-demo-head {
  padding: 6px 10px 8px; font: 700 10.5px/1.3 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft);
}
.nav-demo-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 10px; color: inherit;
  font-weight: 600; font-size: 13.5px; text-decoration: none;
}
.nav-demo-link:hover { background: var(--paper-sunk); }
.nav-demo-link.is-current { background: var(--paper-sunk); }
.nav-demo-link em { font-style: normal; font-size: 11px; color: var(--text-soft); }
.nav-demo-buy {
  display: block; margin-top: 6px; padding: 9px 10px; border-radius: 12px;
  background: var(--yellow); color: var(--accent-ink, #141414);
  border: 2px solid var(--ink); font-weight: 700; font-size: 13px;
  text-decoration: none; text-align: center;
}
/* Sidebar-foot variant: full width, drop-up. */
.pop-side .nav-demo { width: 100%; }
.pop-side .nav-demo-btn { width: 100%; justify-content: space-between; }
.pop-side .nav-demo-dropdown { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; }

/* ---------------------- CMS announcement bar (every public page) ---- */
.cms-sitebanner { position: relative; z-index: 60; border-bottom: 3px solid var(--ink); font-size: 0.92rem; }
.cms-sitebanner-in {
  width: min(1160px, 100% - 28px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 9px 44px;
  flex-wrap: wrap;
}
.cms-sitebanner.tone-accent { background: var(--accent); color: var(--accent-ink); }
.cms-sitebanner.tone-info { background: var(--blue); color: var(--flash); }
.cms-sitebanner.tone-success { background: var(--mint); color: var(--ink); }
.cms-sitebanner.tone-warning { background: var(--yellow); color: var(--ink); }
.cms-sitebanner.tone-neutral { background: var(--paper); color: var(--text); }
.cms-sitebanner-tx { font-weight: 700; }
.cms-sitebanner-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 3px; }
.cms-sitebanner-x {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-snap) var(--ease-pop);
}
.cms-sitebanner-x:hover { transform: translateY(-50%) rotate(90deg); }
@media (max-width: 560px) { .cms-sitebanner-in { justify-content: flex-start; padding: 9px 40px 9px 10px; } }

/* Footer extras */
.app-footer-company { font-size: 12.5px; }
.app-footer-linkbtn {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  cursor: pointer; text-decoration: underline; text-align: left;
}

/* Skip link: visually hidden until focused. */
.skip-link {
  position: absolute; left: 12px; top: -72px; z-index: 120;
  padding: 10px 18px; border-radius: 999px;
  background: var(--side, #111); color: var(--yellow, #ffd23f);
  font-weight: 700; text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 12px; }
/* The pack spaces nav pills 2px apart, so a hovered pill beside the active one
   reads as one fused shape. Open the gap and take the width back from the
   pills' side padding so the bar is no wider overall. */
.pop-header__nav { gap: 6px; }
.pop-header__nav > .pop-header__link { padding-inline: 12px; }
/* The app navigation has more entries than the pack demo. Switch to its
   existing mobile menu before those links outgrow a tablet header. */
@media (max-width: 1000px) {
  .pop-header__nav { display: none; }
  .pop-header__burger { display: inline-grid; }
}

/* QC pack compatibility overrides. Keep generated packs untouched. Their
   accent ink belongs on the accent, not on the house's fixed mint/pink fills.
   Black label pills need light lettering even when a pack accent is black. */
/* Accent text that must stay readable on the dark --side panels: the house
   yellow by default; under a SITE_DESIGN the pack accent can be dark, so use
   the same light tint the labels use. */
:root { --on-side-accent: var(--yellow); }
/* The active header pill is accent text on --side; keep it readable when a
   pack's accent is dark (its dark themes already flip to an accent fill). */
:root[data-design]:not([data-theme="dark"]) .pop-header__link.is-active { color: var(--on-side-accent); }
:root[data-design] { --ink: var(--text); --side: #111; --side-text: #fdf1dc; --qc-label-ink: color-mix(in srgb, var(--accent) 35%, white); --on-side-accent: var(--qc-label-ink); }
[data-design] :is(.pop-label, .section-kicker, .eyebrow, .offer-ribbon-tag, .app-tag, .st-model, .m-showcase-landing-eyebrow) { background: #111; color: var(--qc-label-ink); }
[data-design] :is(.pop-btn--primary, .pop-price__flag, .pop-tag.is-on),
[data-design] .pop-footer__bottom .pop-tag { color: var(--accent-ink); }
[data-design] .pop-card--yellow { color: var(--accent-ink); --text: var(--accent-ink); --text-soft: var(--accent-ink); --text-faint: var(--accent-ink); }
:root[data-design="chalk"][data-theme="dark"] { --text: #fffaf0; --muted: #d5ddd7; }
:root[data-design="cutout"][data-theme="dark"] { --text: #fffaf0; --muted: #d5ddd7; }
:root[data-design="headliner"][data-theme="stage"] { --bg: #0b090b; --surface: #211b21; --surface-2: #151015; --text: #f6efe2; --muted: #c8bdb6; }
:root[data-design="kapow"][data-theme="dark"] { --surface: #283267; --surface-2: #1e275a; --text: #fffcf2; --muted: #e1ddce; }
:root[data-design="tabletop"][data-theme="dark"] { --surface: #362d28; --text: #fffaf0; --muted: #dfd1bc; --accent-ink: #ffffff; }
:root[data-design="commit"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="deco"][data-theme="light"] { --accent-ink: #111111; }
:root[data-design="flow"][data-theme="light"] { --accent-ink: #111111; }
:root[data-design="flow"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="groove"][data-theme="light"] { --accent-ink: #111111; }
:root[data-design="groove"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="gumdrop"][data-theme="light"] { --accent-ink: #111111; }
:root[data-design="gumdrop"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="isoland"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="neon"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="origami"][data-theme="light"] { --accent-ink: #111111; }
:root[data-design="origami"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="plinth"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="scaffold"][data-theme="light"] { --accent-ink: #111111; }
:root[data-design="scaffold"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="shipyard"][data-theme="light"] { --accent-ink: #111111; }
:root[data-design="shipyard"][data-theme="dark"] { --accent-ink: #111111; }
:root[data-design="tabletop"][data-theme="light"] { --accent-ink: #ffffff; }
[data-design] :is(.agent-cta-kicker, .dev-lab-tag, .vps-vs),
[data-design] .cta-band .section-kicker, [data-design] .pop-footer__col h3,
[data-design] .cta-band .button-primary { color: var(--qc-label-ink); }
[data-design] .pipe-stage:nth-child(odd) .pipe-node,
[data-design] .dep-chips span:nth-child(n+2) { color: #111; }
.pop-shell__topbar { min-width: 0; }
.pop-shell__topbar > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-shell__topbar .pop-side__logo { min-width: 0; }
.pop-shell__topbar .pop-side__logo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .pop-shell__topbar .pop-side__plan { display: none; } }

/* These bridges mix light cards into dark mode or omit the primary ink. */
:root[data-design="cutout"][data-theme="dark"] { --surface:#222d51; --surface-2:#1a2445; }
:root[data-design="phosphor"][data-theme="amber"] { --text:#ffe2a8; }
:root[data-design="phosphor"][data-theme="green"] { --text:#c8ffd6; }
:root[data-design="phosphor"][data-theme="paper"] { --text:#1e1a12; }

/* Touch-sized controls; dense tables remain independently scrollable. */
@media (max-width:640px) {
  button, [role="button"], .pop-btn, .button, .pop-iconbtn { min-height:44px; min-width:44px; }
}

/* One icon per theme button; legacy icon rules left with styles.css. */
.js-theme-toggle .icon-sun { display:none; }
:root:is([data-theme="dark"],[data-theme="night"]) .js-theme-toggle .icon-moon { display:none; }
:root:is([data-theme="dark"],[data-theme="night"]) .js-theme-toggle .icon-sun { display:block; }

/* Keep the full credit balance beside touch-sized controls on small phones. */
@media (max-width:640px) {
  .pop-shell__topbar:has(.app-credits-top) { gap:6px; }
  .pop-shell__topbar:has(.app-credits-top) .pop-side__logo { flex:none; gap:0; padding:0; }
  .pop-shell__topbar:has(.app-credits-top) .pop-side__logo strong { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .app-credits-top { min-height:44px; padding-inline:6px; font-size:11px; gap:4px; }
}

/* Floating purchase link is also rendered by demo member shells. */
.floating-cta {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 4px 22px 2px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--yellow); color: var(--accent-ink);
  font-weight: 700; font-size: 14.5px; text-decoration: none;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity var(--dur-lift) var(--ease-out-soft), transform var(--dur-lift) var(--ease-pop);
}
.floating-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.floating-cta:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.floating-cta:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.floating-cta svg { width: 17px; height: 17px; }
.floating-cta .cta-price { padding: 2px 10px 1px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--text); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 640px) { .floating-cta .cta-price { display: none; } }
@media (prefers-reduced-motion: reduce) { .floating-cta { transition: none; transform: none; } }


@media (max-width: 860px) {
  .pop-shell.is-open .pop-side { z-index: 120; }
  .pop-shell.is-open .pop-shell__scrim { z-index: 118; }
}
.cookie-banner-actions .pop-btn { min-height: 44px; }