/* DEADWORK nav v2 — the homepage's tabs and menu, for every other page (Stock Shredder, the five
   in-development pages, Studio). Registration-corner tabs drawn in currentColor so they work on a
   light or dark header; the open stage stays lit and the rest step back; the menu is the dark panel
   with each product's logo on a plate, plus its status and platform line. */

/* P1-4 (2026-10-26 audit): this file reaches pages on both the dark (tokens.css --font-mono) and
   light (ss-page.css/studio.css --mono) systems, and those variable names don't match — so the
   mega-menu's own mono text can't just reference a var here without risking an undefined custom
   property on half the pages it's loaded on. Self-hosted font, declared and used directly. */
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-400.woff2?v=20261027a') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.nav-tab-trigger::after { display: none !important; }
.nav-tab-trigger { padding: 8px 10px 6px !important; align-items: center !important; min-height: 36px; transition: opacity 160ms var(--ease, ease); }
/* H-6/D-12: restore the 44px touch-target floor on coarse pointers (Studio, Stock Shredder, the
   five in-development pages all measured 36px tall on touch) — mouse/trackpad keep the tighter
   visual size.
   QA-17: the first attempt here set min-height:44px!important, which grew the row's own box (and
   with it the fixed header) by 6-15px on touch viewports — a visible jump that wasn't part of
   the brief. ::after is unused on every page this file reaches under coarse pointers (it's
   display:none!important above; the pages that normally animate an underline off it — Studio,
   Stock Shredder, the dev pages — all get their corner-mark from ::before instead), so it's free
   to repurpose purely as an absolutely-positioned hit-box extension that never touches layout. */
@media (pointer: coarse) {
  .nav-tab-trigger::after { content: ''; display: block !important; position: absolute; inset: -6px 0; }
  /* The footer/contact mailto link's 44px floor was set on the wrapping paragraph, not the link
     itself, and measured well under 44px tall in practice — set it on the actual tappable <a>. */
  .foot-email a, .contact-email a { display: inline-flex; align-items: center; min-height: 44px; }
}
.nav-tab-trigger::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 180ms var(--ease, ease);
  background:
    linear-gradient(currentColor, currentColor) top left / 7px 1px no-repeat, linear-gradient(currentColor, currentColor) top left / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 7px 1px no-repeat, linear-gradient(currentColor, currentColor) top right / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 7px 1px no-repeat, linear-gradient(currentColor, currentColor) bottom left / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 7px 1px no-repeat, linear-gradient(currentColor, currentColor) bottom right / 1px 7px no-repeat;
}
@media (hover: hover) { .nav-tab-trigger:hover::before { opacity: .45; } }
.nav-tab-trigger[aria-expanded='true']::before { opacity: 1; }
.nav-tab-trigger[aria-expanded='true'] { color: inherit; }
/* H-9: the Studio tab itself has no aria-expanded (it's a plain link, not a menu trigger) — it
   gets aria-current="page" instead on studio/index.html, so the corner-mark needs its own rule
   to light up for that attribute too, the same way the open menu's trigger does. */
.nav-tab-trigger[aria-current='page']::before { opacity: 1; }
/* H-10: opacity:.45 on #141412 ink text drops to ~2.9:1 against the cream #F4F1EA header every
   page this file reaches (Studio, the five in-development pages, Stock Shredder — all share the
   same semi-transparent cream header, never a dark one) — fails WCAG AA (4.5:1) for the 11px
   mono caps. A dedicated muted ink (the same --ink-3 tone studio.css already uses for the meta
   labels, 4.77:1 on #F4F1EA) replaces the opacity fade so borders/underlines stay full-strength
   and only the text dims. */
.poster-head:has(.mega-menu.is-open) .nav-tab-trigger:not([aria-expanded='true']):not([aria-current='page']) { opacity: 1; color: #6e6a62; }
.nav-tab-trigger:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

/* the menu: the same dark panel everywhere (the five in-development pages had a light one) */
.mega-menu { background: #0a0a09 !important; color: #e6e0d3 !important; border-bottom: 1px solid rgba(230,224,211,.08) !important; }
.mega-menu-eyebrow { color: #807d77 !important; }
.mega-menu-card-name { color: #e6e0d3 !important; }
.mega-menu-card-desc { color: #94918a !important; }
/* H-21: animate the cards in only the first time the panel opens in a session — see
   nav-dropdown.js's open()/.was-open comment. Sweeping the pointer between tabs while the panel
   stays open (.was-open already set) swaps the active group instantly instead of restarting this
   340ms keyframe per tab. */
.mega-menu:not(.was-open) .mega-menu-group.is-active { animation: nav2-group-in 260ms var(--ease, ease) both; }
.mega-menu:not(.was-open) .mega-menu-group.is-active .mega-menu-card { animation: nav2-card-in 220ms var(--ease, ease) both; }
.mega-menu:not(.was-open) .mega-menu-group.is-active .mega-menu-card:nth-child(2) { animation-delay: 40ms; }
@keyframes nav2-group-in { from { opacity: 0; } }
@keyframes nav2-card-in { from { opacity: 0; transform: translateY(6px); } }

/* product plates */
.mm-plate .mm-plate-box { position: relative; display: block; width: 100%; height: 300px; background: #121210 !important; box-shadow: inset 0 0 0 1px rgba(230,224,211,.10); transition: box-shadow 200ms ease, background-color 200ms ease; }
.mm-plate .mm-plate-box::after { display: none !important; }
.mm-plate .mega-menu-card-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; max-width: calc(100% - 48px); height: clamp(44px, 4.6vw, 76px) !important; opacity: 1 !important; filter: none !important; transition: transform 300ms ease; }
.mm-plate[href$="handoff/"] .mega-menu-card-logo { height: clamp(70px, 7vw, 120px) !important; }
@media (hover: hover) { .mm-plate:hover .mm-plate-box { background: #171715 !important; box-shadow: inset 0 0 0 1px rgba(230,224,211,.28); } .mm-plate:hover .mega-menu-card-logo { transform: translate(-50%, -50%) scale(1.03); } }
.mm-plate .mega-menu-card-caption { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 14px; gap: 4px; }
/* H-18: layout-only mitigation, see home-tabs.css's matching comment. */
.mm-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin-top: 8px; font: 400 10.5px/1.5 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, 'Courier New', monospace; letter-spacing: .16em; text-transform: uppercase; color: #807d77; }
.mm-platform { text-wrap: pretty; }
/* MEDIUM-1 (2026-10-27 QA): this used to draw "IN DEVELOPMENT"/"BETA" as plain colored text
   (.mm-status) instead of the shared .badge component used everywhere else (hero, home panels,
   tools grid). Defined fully standalone here — same reasoning as the @font-face above — since
   this file reaches Studio, which doesn't load base.css and has no .badge CSS of its own at all,
   and the mega-menu panel is always forced dark regardless of the host page's own light/dark
   badge variant (ss-page.css's own .badge-dev is ink-on-sand, which would render as dark text on
   this dark panel if it won one of the cascade). !important matches every other cross-system
   override already in this file. Stock Shredder's own entry deliberately carries no badge (see
   Daniel's "it's live, not beta" decision on home/index.html's panel) so there's no beta variant
   needed here. */
.mm-meta .badge { display: inline-flex !important; align-items: center !important; gap: 5px !important; height: 18px !important; padding: 0 7px !important; font: inherit !important; letter-spacing: inherit !important; white-space: nowrap !important; }
.mm-meta .badge-dev { background: transparent !important; color: #e6e0d3 !important; border: 1px solid #e6e0d3 !important; }
.mm-meta .badge-icon { display: inline-block !important; width: 6px !important; height: 6px !important; flex-shrink: 0 !important; border: 1px solid currentColor !important; background: none !important; }
.mega-menu-card:focus-visible { outline: 1px solid #e6e0d3; outline-offset: 6px; }
@media (max-width: 719px) { .mm-plate .mm-plate-box { height: 180px; } }
@media (prefers-reduced-motion: reduce) {
  .mega-menu-group.is-active, .mega-menu-group.is-active .mega-menu-card { animation: none; }
  .nav-tab-trigger, .nav-tab-trigger::before { transition: none; }
}
.mm-plate[aria-current="true"] .mm-plate-box { box-shadow: inset 0 0 0 1px rgba(230,224,211,.4); }

/* H-5: the footer/contact email is now a real mailto: link on every page this file reaches
   (Studio, Stock Shredder, the five in-development pages) — it was plain unclickable text.
   Reset the browser's default underline so it still reads quietly, and only draw one back in on
   hover/focus. (home.css carries the matching rule for home + the dev pages it also styles;
   this covers Studio and Stock Shredder's own copies of the same markup, which don't load
   home.css.) */
/* H-19: Stock Shredder's own footer markup picked up the same nowrap-group wrapper as every
   other page (ss-page.css itself isn't touched — this file is the one already shared with it
   via nav-v2.css). */
.foot-links { white-space: nowrap; }
.foot-email a, .contact-email a { color: inherit; text-decoration: none; }
.foot-email a:hover, .foot-email a:focus-visible,
.contact-email a:hover, .contact-email a:focus-visible { text-decoration: underline; text-underline-offset: .12em; }