/* DEADWORK — shared design for the five IN-DEVELOPMENT product pages (Scene Lock, Set Control,
   Loadout, Handoff, Sound Driver). Matches Stock Shredder's actual identity: warm off-white
   background (#F4F1EA, the same --bg Stock Shredder's own :root uses), black ink typography,
   oversized Anton headlines, mono technical labels, pill buttons — not the site's older dark
   "poster" template these five pages used before. Loaded after tokens.css + base.css + home.css
   + product.css; none of those files are edited, and ss-page.css / Stock Shredder are untouched.
   One composition per page: logo, slogan, problem/solution, email — see the brief. */

:root {
  --dev-bg: #F4F1EA;
  --dev-ink: #141412;
  --dev-ink-2: #4A4741;
  --dev-ink-3: #6E6A62;
  --dev-line: rgba(20, 20, 18, .12);
  --dev-line-strong: rgba(20, 20, 18, .28);
}

/* ---- the page itself: flat warm off-white, no dark photo backdrop. The old .poster-media (full-
   bleed product photo + dark overlay) is simply hidden — these are quiet announcement pages, not
   cinematic heroes; Stock Shredder's own hero has no background photo either. ---- */
body.dev-light { background: var(--dev-bg); }
body.dev-light .poster-media { display: none; }
body.dev-light .poster { color: var(--dev-ink); }
/* D-15: html's own background stays base.css's dark --ink — on iOS, rubber-banding past the top
   or bottom of the page briefly reveals that band behind the cream body. */
html:has(body.dev-light) { background: var(--dev-bg); }

/* D-3: :focus-visible inherits base.css's 2px solid var(--bone) outline — #E6E0D3 on this
   page's #F4F1EA background is 1.17:1, practically invisible. Every keyboard-focusable element
   on these pages (inputs, the notify button, the wordmark link, mega-menu cards, social icons,
   Privacy/Terms) needs a ring that actually shows up against cream. */
/* The mega-menu panel itself stays dark on every page nav-v2.css reaches (including these), and
   nav-v2.css already gives .mega-menu-card its own bone-colored ring for that dark background —
   left alone here so this cream-focused rule doesn't make it invisible against the dark panel. */
body.dev-light :focus-visible { outline: 2px solid var(--dev-ink); outline-offset: 3px; }

/* ---- re-skin the SHARED header/footer/mega-menu for a light surface. Structure, links and
   behavior are exactly what every other page uses (nothing here touches markup or nav-dropdown.js)
   — only the colors home.css wrote for a dark backdrop, restated for a light one. The mega-menu's
   own panel background (home.css: background:var(--ink)) comes along for free once --ink isn't
   overridden back, matching Stock Shredder's own card photos sitting directly on cream. ---- */
body.dev-light .poster-head,
body.dev-light .nav-tab-trigger,
body.dev-light .mega-menu-card-name,
body.dev-light .index-word,
body.dev-light .panel-follow a,
body.dev-light .foot-copy a:hover,
body.dev-light .foot-social a:hover { color: var(--dev-ink); }
body.dev-light .poster-lede,
body.dev-light .mega-menu-card-desc,
body.dev-light .foot-email,
body.dev-light .foot-copy a,
body.dev-light .panel-follow { color: var(--dev-ink-2); }
body.dev-light .mega-menu-eyebrow,
body.dev-light .index-meta,
body.dev-light .index-label,
body.dev-light .poster-meta-left,
body.dev-light .poster-meta-right,
body.dev-light .poster-foot,
body.dev-light .foot-social a,
body.dev-light [data-index].has-active .index-word:not([aria-current]) { color: var(--dev-ink-3); }
body.dev-light .mega-menu { background: var(--dev-bg); border-bottom: 1px solid var(--dev-line); }
body.dev-light .mega-menu-card-img { background: #EAE5DA; }
body.dev-light .poster-panel,
body.dev-light .poster-foot { border-color: var(--dev-line); }
/* The nav underline/hover dot already uses --acc (per-product yellow, see tokens.css), which
   clears AA on cream on its own — left as-is. */

/* D-1/QA-12: home.css's shared .nav-tabs sets flex-wrap: wrap, which wraps "Production" onto its
   own row at tablet widths (720-732px), growing the header to two rows. product-dev-v2.css
   already fixes this for the five in-development pages (body.dev-v2) — the legal pages and 404
   share this same dev-light shell but don't load that file, so they keep the bug. Same nowrap
   fix, scoped to every dev-light page instead of just the dev-v2 ones; harmless where
   product-dev-v2.css's own (later-loaded, equally specific) rule already sets the same value. */
body.dev-light .nav-tabs { flex-wrap: nowrap; }

/* ---- "IN DEVELOPMENT" badge: monochrome, matching the page's own ink/gray palette instead of
   the site's dev-yellow accent — no color accent on these pages at all.
   P1-1 (2026-10-26 audit): full ink, not the softer grey — "in ink on sand" per the shared
   status-chip spec, matching base.css's "bone on dark" counterpart at the same strength. ---- */
body.dev-light .badge-dev { color: var(--dev-ink); border-color: var(--dev-ink); }

/* D-16: home.css's hover rule for the mega-menu card name uses --acc, which on a dev-light page
   resolves to the per-product dev-yellow — the one color accent these monochrome pages
   otherwise deliberately avoid (see the badge rule above). Restated here at higher specificity,
   and kept behind the real-hover check so it doesn't stick after a tap either. */
@media (hover: hover) and (pointer: fine) {
  body.dev-light .mega-menu-card:hover .mega-menu-card-name { color: var(--dev-ink); }
}

/* ---- type ---- */
.mono { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dev-ink-3); }
.head-dw { font-family: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .95; }

/* ---- pill buttons: shared geometry now lives in buttons.css (MEDIUM-2, 2026-10-27 QA) — this
   page just supplies its own monochrome ink-on-sand color variant and mono font. ---- */
.pill { font-family: var(--font-mono); border-color: var(--dev-ink); }
.pill-solid { background: var(--dev-ink); color: var(--dev-bg); border-color: var(--dev-ink); }
@media (any-hover: hover) and (any-pointer: fine) { .pill-solid:hover { background: transparent; color: var(--dev-ink); } }

/* ---- one composition: logo, slogan, badge, problem/solution, email — sized to settle inside the
   shared single-viewport "poster" shell (no scroll on a normal laptop); phones get the site's
   existing scrolling fallback for that shell, unchanged. ---- */
.dev-hero { padding-top: clamp(12px, 2.5svh, 28px); text-align: center; }
.dev-hero-logo { max-width: min(300px, 44vw); height: auto; }
.dev-hero-tag { margin-top: 10px; font: 560 clamp(17px, 1.6vw, 21px)/1.3 var(--font-body); color: var(--dev-ink); max-width: 20ch; margin-inline: auto; }
.dev-hero .badge { margin-top: 10px; }

section.dev-split.wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(16px, 3svh, 28px); max-width: none; padding-inline: 0; text-align: left; }
.dev-split h3 { font: 560 11px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dev-ink-3); margin-bottom: 10px; }
.dev-split p { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.5; color: var(--dev-ink); max-width: 58ch; }
.dev-split .is-solution h3 { color: var(--acc-text); }
@media (max-width: 719px) { section.dev-split.wrap { grid-template-columns: 1fr; gap: 28px; } }

section.dev-notify.wrap { text-align: center; margin-top: clamp(14px, 3svh, 28px); max-width: none; padding-inline: 0; }
.dev-notify .notify-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 480px; margin: 28px auto 0; }
/* No flex/width override on .notify-input on purpose — base.css already sets flex:1 1 240px
   (row, desktop) and resets it to flex:0 0 auto + width:100% under its own
   @media (max-width:639px) (its own comment explains why: a flex-basis becomes a HEIGHT once
   that query flips the form to flex-direction:column). Repeating a flex-basis here at higher
   specificity would win over that reset and inflate the field into an oval on phones. */
/* D-14: var(--dev-line-strong) (rgba(20,20,18,.28)) only reads 1.86:1 against the page's own
   cream background — below WCAG 1.4.11's 3:1 floor for a form field's own boundary, so the
   field doesn't look like an input until it's focused. rgba(20,20,18,.5) clears 3.4:1. */
.dev-notify .notify-input { min-height: 48px; padding: 0 18px; border: 1px solid rgba(20, 20, 18, .5); background: transparent; color: var(--dev-ink); font: 16px/1.4 var(--font-body); border-radius: 999px; }
.dev-notify .notify-input::placeholder { color: var(--dev-ink-3); }
.dev-notify .notify-submit { border-radius: 999px; }
.dev-notify .notify-status { margin-top: 12px; font-size: 14px; }
/* D-8: var(--signal) (#e5463d) only reads 3.53:1 on this page's cream background — below the
   4.5:1 AA floor for ~13px text. #B3261E clears 5.8:1 while staying the same hue. */
.dev-notify .notify-status-bad { color: #B3261E; }
.dev-notify .notify-status-good { color: #3D6E39; }

/* ---- a quiet, one-time entrance for the whole composition — Emil Kowalski's restraint: a single
   fade + 8px rise, never re-triggered, off entirely under reduced motion. ---- */
.dev-reveal { opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.dev-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dev-reveal { opacity: 1; transform: none; transition: none; } }