/* GRID//NODE native-feel layer — keyboard, motion, touch hygiene.
 * Loaded by js/gridnode-native.js. Kept deliberately restrained: the NEXUS
 * identity (scanlines, neon, boot sequence) is protected; this only makes
 * the chrome behave like a native app.
 */

/* Inputs at 16px so iOS never auto-zooms into focused fields. */
#logOv input, #wtOv input, .form-input,
input[type="number"], input[type="text"], input[type="time"],
textarea, select {
  font-size: 16px !important;
}

/* Keyboard reflow: cap open sheets while the on-screen keyboard is visible. */
html.gn-keyboard-open #logOv,
html.gn-keyboard-open #wtOv,
html.gn-keyboard-open #signOutOverlay {
  max-height: calc(100dvh - var(--safe-top, 0px) - 16px) !important;
}

/* Touch hygiene: no double-tap zoom on controls, no pull-to-refresh fights,
   no accidental text selection on app chrome. */
.bottom-nav, .fab, .nav-item, .dose-pill, .gn-ampm-btn,
.gn-stable-zone-btn, .cal-day, .gn-select-trigger, .cp-select-trigger {
  touch-action: manipulation;
}
#app, .scroll-body, #scrollBody {
  overscroll-behavior-y: contain;
}
.bottom-nav, .nav-lbl, .fab, .topbar {
  user-select: none;
  -webkit-user-select: none;
}

/* One purposeful page transition (NEXUS: precise, brief, no bounce). */
.page.active {
  animation: gnPageIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}@keyframes gnPageIn{
  from { opacity: 0.35; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }}

/* Bottom sheets slide up like native sheets. */
#logOv.active, #wtOv.active, #signOutOverlay.active {
  animation: gnSheetIn 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}@keyframes gnSheetIn{
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }}

/* Bottom sheets slide back down on close (no instant vanish). */
#logOv.gn-closing, #wtOv.gn-closing {
  animation: gnSheetOut 0.22s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}@keyframes gnSheetOut{
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(28px); }}

/* Press feedback on primary controls. */
.nav-item:active, .fab:active {
  transform: scale(0.96);
}@media (prefers-reduced-motion: reduce){
  .page.active, #logOv.active, #wtOv.active, #signOutOverlay.active,
  #logOv.gn-closing, #wtOv.gn-closing {
    animation: none !important;
  }
  .nav-item:active, .fab:active {
    transform: none;
  }}

/* ── DAY OPS semantic type system ─────────────────────────────────────
   This is the final cascade layer for functional copy. Legacy component
   CSS contains many NIGHT GRID literals; mapping roles here prevents those
   literals from washing out in the light theme without changing dark mode. */
html[data-theme="light"] {
  color-scheme: light;
  --text: var(--text-primary);
  --text-mid: var(--text-secondary);
  --text-dim: var(--text-muted);
  --muted: var(--text-muted);
  --cyan: var(--text-accent);
  --green: var(--text-success);
  --yellow: var(--text-warning);
  --orange: var(--text-warning);
  --red-hi: #FF5B5B;
  --red-lo: #D12424;
  --red: var(--text-error);
  --chart-grid: rgba(20,60,70,.08); /* light-theme grid per TOKEN-CONTRACT */
}html[data-theme="light"] :is(#login, #app, .overlay, .gn-delete-overlay, .gn-lab-tool-overlay, .gn-whatsnew-overlay) {
  color: var(--text-primary);
}html[data-theme="light"] :is(
  .page-title, .card-title, .modal-title, .gn-auth-title, .gn-foundation-head h2, .gn-lab-tool-head h2, .gn-profile-row b, .gn-whatsnew-title, .gn-whatsnew-version, .gn-empty-state b, .results-title, .phase-name, .syr-result-big
){ color: var(--text-primary) !important; opacity: 1 !important; font-weight: 700 !important; }html[data-theme="light"] :is(
  .card p, .card-copy, .landing-copy, .gn-auth-copy, .gn-ledger-copy, .gn-profile-row small, .gn-empty-state span, .gn-whatsnew-body, .gn-whatsnew-body li, .mixing-text, .phase-transparency-block p, .phase-transparency-block li, .log-notes, .pib-text, .results-direction, .syr-math-helper, .gn-syr-formula, .gn-syr-helper p, .gn-syr-caution
){ color: var(--text-secondary) !important; opacity: 1 !important; font-weight: 500 !important; }

html[data-theme="light"] :is(
  .page-sub, .form-helper, .gn-shot-date-helper, .gn-auth-note,
  .gn-research-context, .gn-cloud-status, .gn-date-dow,
  .gn-calendar-detail, .gn-wanda-copy, .gn-dashboard-support,
  .empty-state, .phase-sphere-status, .gn-syr-meta, .syr-result-sub,
  .syr-scale-lbl, .gn-syr-forensic
) { color: var(--text-helper) !important; opacity: 1 !important; font-weight: 500 !important; }

/* TRACK5: kicker classes removed — canonical .kicker (08-unify-fixes.css) governs. */
html[data-theme="light"] :is(
  .form-label, .gn-form-grid label > span, .gn-record-form label > span,
  .gn-profile-section-label, .gn-stable-zone-title,
  .gn-auth-primary-label
) { color: var(--text-label) !important; opacity: 1 !important; font-weight: 700 !important; }

html[data-theme="light"] :is(
  .page-title .a, .sec-title .a, .gn-accent-c, .gn-profile-chevron,
  .gn-utility-chevron, .gn-lab-back,
  .time-tab.active, .scanner-mode-btn.active, .gn-record-state
) { color: var(--text-accent) !important; opacity: 1 !important; }

html[data-theme="light"] :is(
  input, textarea, select, .form-input, .form-textarea,
  .cp-select-trigger, .gn-select-trigger, .cp-option, .gn-select-option
) {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
html[data-theme="light"] :is(input, textarea, .form-input, .form-textarea)::placeholder {
  color: var(--text-placeholder) !important;
  -webkit-text-fill-color: var(--text-placeholder) !important;
  opacity: 1 !important;
}
html[data-theme="light"] :is(.cp-dropdown, .gn-select-menu, select) {
  color: var(--text-primary) !important;
  background: #fffdf8 !important;
  border-color: rgba(32, 61, 71, .34) !important;
}
html[data-theme="light"] :is(.cp-option, .gn-select-option, option) {
  color: var(--text-primary) !important;
  background: #fffdf8 !important;
  border-bottom-color: rgba(32, 61, 71, .16) !important;
}
html[data-theme="light"] :is(.cp-option, .gn-select-option):is(:hover, :focus-visible, .selected, [aria-selected="true"]) {
  color: #003f4d !important;
  background: #dceff1 !important;
}
html[data-theme="light"] .cp-group-label { color: var(--text-label) !important; background: #e8eff0 !important; opacity: 1 !important; }

html[data-theme="light"] :is(button, .btn, .btn-full, .nav-item, .time-tab, .scanner-mode-btn) {
  opacity: 1;
}
html[data-theme="light"] :is(button, input, textarea, select, [role="button"]):disabled,
html[data-theme="light"] :is(button, input, textarea, select, [role="button"])[aria-disabled="true"] {
  color: var(--text-disabled) !important;
  -webkit-text-fill-color: var(--text-disabled) !important;
  opacity: 1 !important;
  background-image: none !important;
}
html[data-theme="light"] :is(.nav-item:not(.active) .nav-lbl, .nav-item:not(.active) .nav-ico) {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
html[data-theme="light"] :is(.nav-item.active .nav-lbl, .nav-item.active .nav-ico) { color: var(--text-accent) !important; }
html[data-theme="light"] :is(.mixing-warn, .warning, .warn, .gn-syr-safety, .syr-safety-boundary) { color: var(--text-warning) !important; opacity: 1 !important; }
html[data-theme="light"] :is(.error, .err, .vault-date-error, .gn-delete-note, .gn-profile-danger-row b) { color: var(--text-error) !important; opacity: 1 !important; }
html[data-theme="light"] :is(.success, .ok, .gn-cloud-dot.cloud + span) { color: var(--text-success) !important; opacity: 1 !important; }html[data-theme="light"] :is(
  .page-sub, .form-label, .form-helper, .gn-shot-date-helper, .gn-auth-copy, .gn-auth-message, .gn-auth-note, .gn-auth-privacy, .nav-lbl, .cp-group-label, .cp-option, .gn-select-option, .gn-profile-row small, .gn-profile-section-label, .gn-ledger-copy, .gn-empty-state, .gn-whatsnew-body, .gn-whatsnew-date, .gn-wanda-copy, .mixing-text, .mixing-warn, .phase-transparency-block p, .phase-transparency-block li, .syr-math-helper, .gn-syr-helper p, .gn-syr-formula, .gn-syr-caution, .gn-syr-safety
)
{
  font-size: max(12px, .75rem) !important;
  line-height: 1.5 !important;
  letter-spacing: min(.06em, 1px) !important;
}

/* Inline legacy literals on the visible profile shell are converted back to
   semantic roles here; this also protects lazily-rendered copies. */
html[data-theme="light"] #pageProfile [style*="color:#eeeef5"],
html[data-theme="light"] #pageProfile [style*="color: #eeeef5"] { color: var(--text-primary) !important; }
html[data-theme="light"] #pageProfile [style*="color:#9898b0"],
html[data-theme="light"] #pageProfile [style*="color: #9898b0"],
html[data-theme="light"] #pageProfile [style*="color:var(--text-dim)"] { color: var(--text-secondary) !important; }
html[data-theme="light"] #pageProfile [style*="color:#00d4ff"] { color: var(--text-accent) !important; }

/* Mobile application viewport: one stable shell, one internal scroll area. */
html, body { width: 100%; min-height: 100%; }
body.gn-private-active { overflow: hidden; overscroll-behavior: none; }
#app.active { height: var(--gn-viewport-height, 100dvh); min-height: var(--gn-viewport-height, 100dvh); overflow: hidden; }
#app .scroll-body, #app #scrollBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); /* MOBILE-FIRST: was 84px, clipped 61px at 360w */
}
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
:is(button, [role="button"], .nav-item, summary, label) { -webkit-tap-highlight-color: rgba(0, 212, 255, .13); touch-action: manipulation; }
:is(button, [role="button"], .nav-item, summary) { -webkit-user-select: none; user-select: none; }
:is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }
html.gn-keyboard-open .bottom-nav, html.gn-keyboard-open .fab { visibility: hidden; pointer-events: none; }@media (max-width: 600px){
  /* .gn-const-node is exempt: its 44px touch target already exists via its
     ::before/::after expansion pseudos; forcing min-height here stretched the
     11-18px timeline nodes into ovals (VISUALS MAX 2 D1). */
  :is(button, [role="button"]:not(.gn-const-node), input, select, textarea, summary, .cp-option, .gn-select-option) { min-height: 44px; }
  #app .page { max-width: 100%; overflow-x: hidden; }
  .overlay .modal, .gn-delete-panel, .gn-whatsnew-card { max-height: calc(var(--gn-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - 12px); }}
/* Visible focus in BOTH themes (dark default cyan, daylight deep teal). */
:focus-visible {
  outline: 2px solid var(--gn-focus-ring, rgba(0, 212, 255, 0.85));
  outline-offset: 2px;
  border-radius: 2px;
}
html[data-theme="light"] :focus-visible {
  --gn-focus-ring: rgba(0, 90, 110, 0.9);
}

/* ── Theme toggle: segmented control with the real theme identities ── */
.gn-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-height: 34px !important;
  padding: 3px !important;
  border: 1px solid rgba(0, 212, 255, .22) !important;
  border-radius: 999px !important;
  background: rgba(0, 12, 18, .55) !important;
}
.gn-theme-toggle .gn-theme-opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #7fa3ad;
  font: 700 .58rem var(--font-m, monospace);
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.gn-theme-toggle .gn-theme-opt .gn-theme-opt-icon { font-size: .62rem; line-height: 1; }
.gn-theme-toggle .gn-theme-opt.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, .22), rgba(0, 212, 255, .08));
  color: #00d4ff;
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .35);
}
html[data-theme="light"] .gn-theme-toggle {
  background: rgba(248, 245, 237, .85) !important;
  border-color: rgba(0, 111, 130, .3) !important;
}
html[data-theme="light"] .gn-theme-toggle .gn-theme-opt { color: #4d6b75; }
html[data-theme="light"] .gn-theme-toggle .gn-theme-opt.active {
  background: rgba(0, 111, 130, .14);
  color: #005f73;
  box-shadow: inset 0 0 0 1px rgba(0, 111, 130, .4);
}
/* Light theme: lift the inactive option's faint SVG layers so the icon stays legible. */
html[data-theme="light"] .gn-theme-toggle .gn-theme-opt:not(.active) { color: #33505a; }
html[data-theme="light"] .gn-theme-toggle .gn-theme-opt:not(.active) .gn-theme-svg [opacity=".3"] { opacity: .62; }
html[data-theme="light"] .gn-theme-toggle .gn-theme-opt:not(.active) .gn-theme-svg [opacity=".5"] { opacity: .72; }
html[data-theme="light"] .gn-theme-toggle .gn-theme-opt:not(.active) .gn-theme-svg [opacity=".55"] { opacity: .78; }

/* ── Language control: same segmented language, proper touch targets ── */
.gn-language-control { min-height: 34px !important; padding: 3px !important; }
.gn-language-control button { min-width: 38px !important; min-height: 28px !important; font-size: .6rem !important; }
.gn-language-control > span { font-size: .56rem !important; }

/* ── Welcome screen: the NODE mark lives at the bottom of the viewport ── */
#landing .landing-node-mark {
  position: fixed !important;
  bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: auto !important;
  right: auto !important;
  z-index: 6 !important;
  opacity: .85;
}

/* ── Readability pass (EN + ES, mobile) ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.gn-record-row, .gn-ledger-row, .gn-weight-record, .gn-calendar-detail,
.gn-measurement-trend-row, .results-list-item, .gn-progress-signal,
.gn-research-group, .gn-device-row { overflow-wrap: anywhere; }
.landing-copy, .results-copy, .empty, .csv-import-body,
.gn-shot-time-helper, .gn-shot-date-helper, .gn-auth-privacy { line-height: 1.55; }
html[lang="es"] .nav-lbl, html[lang="es"] .gn-theme-opt-name,
html[lang="es"] .form-label { letter-spacing: .4px !important; }
html[lang="es"] .form-label { font-size: .64rem !important; }
html[lang="es"] .nav-lbl { font-size: .54rem !important; }
html[lang="es"] .gn-theme-opt { padding: 0 8px !important; }

/* ── v2: icon-only compact theme toggle (insignias), no overlap anywhere ── */
.gn-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  min-height: 32px !important;
  padding: 2px !important;
  border: 1px solid rgba(0, 212, 255, .25) !important;
  border-radius: 999px !important;
  background: rgba(0, 12, 18, .55) !important;
}
.gn-theme-toggle .gn-theme-opt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  min-height: 26px !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #7fa3ad !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out) !important;
}
.gn-theme-toggle .gn-theme-opt .gn-theme-opt-icon { font-size: .78rem; line-height: 1; }
.gn-theme-toggle .gn-theme-opt.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, .22), rgba(0, 212, 255, .08)) !important;
  color: #00d4ff !important;
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .35) !important;
}
html[data-theme="light"] .gn-theme-toggle {
  background: rgba(248, 245, 237, .9) !important;
  border-color: rgba(0, 111, 130, .32) !important;
}
html[data-theme="light"] .gn-theme-toggle .gn-theme-opt { color: #4d6b75 !important; }
html[data-theme="light"] .gn-theme-toggle .gn-theme-opt.active {
  background: rgba(0, 111, 130, .16) !important;
  color: #005f73 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 111, 130, .42) !important;
}

/* Landing host: sits under the language control, never near the NODE mark. */
.landing-theme-toggle-host { position: absolute; top: 48px; right: 0; z-index: 5; }

/* Topbar: compact controls, avatar always visible and tappable. */
#app .topbar { flex-wrap: nowrap !important; gap: 6px !important; }
#app .topbar-actions { flex-shrink: 0 !important; margin-left: auto !important; gap: 6px !important; }
.gn-topbar-language-control { margin: 0 !important; }
.gn-topbar-language-control button { min-width: 30px !important; }

/* ── What's New modal ── */
.gn-whatsnew-overlay {
  position: fixed; inset: 0; z-index: 950;
  display: none; padding: 20px;
  background: rgba(2, 2, 8, .78); backdrop-filter: blur(8px);
}
.gn-whatsnew-overlay.active {
  display: grid; place-items: center;
}
.gn-whatsnew-card {
  width: min(100%, 360px); box-sizing: border-box; padding: 22px;
  border: 1px solid rgba(0, 212, 255, .4); border-top: 2px solid #00d4ff;
  border-radius: 10px; background: var(--panel, #0e0e16); color: var(--text, #eef6f8);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.gn-whatsnew-kicker { color: #00d4ff; font: 800 .68rem var(--font-d, monospace); letter-spacing: 2.4px; }
.gn-whatsnew-version { margin: 4px 0 14px; color: var(--text-dim, #8295a0); font: .58rem var(--font-m, monospace); letter-spacing: 1.4px; }
.gn-whatsnew-list { margin: 0 0 18px; padding: 0 0 0 18px; color: var(--text-mid, #b7c7d3); font: .78rem/1.55 var(--font-b, system-ui); }
.gn-whatsnew-list li { margin: 6px 0; }
.gn-whatsnew-close {
  width: 100%; min-height: 44px; border: 0; border-radius: 6px;
  background: linear-gradient(135deg, #00d4ff, #0099cc); color: #001015;
  font: 800 .68rem var(--font-d, monospace); letter-spacing: 1.6px; cursor: pointer;
}
html[data-theme="light"] .gn-whatsnew-overlay { background: rgba(240, 236, 226, .7); }
html[data-theme="light"] .gn-whatsnew-card { background: var(--surface, #f4f1e9); color: var(--text-primary, #1c2b31); border-color: rgba(0, 111, 130, .35); }
html[data-theme="light"] .gn-whatsnew-list { color: #2e424b; }

/* ── LAB: peptide research readability (both themes) ── */
#pageLab .form-label { font-size: .68rem !important; }
#syrPept { font-size: 1.02rem !important; }
#pageLab .gn-syr-result .v { font-size: 1.05rem !important; }
html[data-theme="light"] #pageLab .gn-syr-result .v,
html[data-theme="light"] #syrPept { color: var(--text-primary, #1c2b31) !important; }
html[data-theme="light"] #pageLab .cheat-table { background: var(--surface, #f4f1e9) !important; color: var(--text-primary, #1c2b31) !important; }

/* Hidden nav items (e.g. #navPro) must never render. */
.gn-nav-hidden { display: none !important; }

/* ═══ Premium refinement pass (v0.9.0) ═══
 * Typography by role, red-lava action system, mobile header, chart lanes. */

/* ── 1. Typography by role ── */
/* Unified 2026-10-11: lava tokens are aliases to the canonical brand tokens
   (css/native/08-design-tokens.css). The four :root lava blocks across
   00-base / 03-premium-system now agree — no more conflicting redefinitions. */
:root {
  --lava-core: var(--brand-red);
  --lava-core-hi: var(--brand-red-hi);
  --lava-edge: var(--brand-red-deep);
  --lava-hot: #CC2944;                 /* preserved dark cascade winner */
  --lava-glow: rgba(255, 79, 34, .28); /* preserved cascade winner */
  /* Charts: canonical --chart-* tokens live in 08-design-tokens.css (loads first). */
}
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Form guidance + helper copy: readable companion font, relaxed leading. */
.form-label { font-size: .7rem !important; line-height: 1.5 !important; }
.gn-shot-time-helper, .gn-shot-date-helper, .phase-sphere-note,
.protocol-curve-copy, .results-copy, .asset-helper, .csv-import-body,
.gn-auth-privacy, .landing-copy, .shot-history-helper, .phase-edu-note span {
  line-height: 1.6 !important;
}
.phase-sphere-note { font-size: .74rem !important; }
.protocol-curve-copy { font-size: .8rem !important; }
.phase-edu-note { font-size: .72rem !important; }
.results-card-sub, .card-sub, .sec-act, .stat-sub { font-size: .68rem !important; }
/* Data values: strong, never pale. */
.card-val, .gn-wanda-value, .stat-val { color: var(--text, #eef6f8) !important; }
html[data-theme="light"] .card-val,
html[data-theme="light"] .gn-wanda-value,
html[data-theme="light"] .stat-val { color: var(--text-primary, #1c2b31) !important; }
/* Empty states read as guidance, not errors. */
.empty, .results-empty { font-size: .78rem !important; color: var(--text-mid, #b7c7d3) !important; }

/* ── 2. Red-lava action system (theme-aware) ── */
.btn-primary, .btn-full.btn-primary, .gn-auth-primary,
.future-confirm-save, .gn-whatsnew-close, .gn-passkey-upsell .btn-primary {
  background: radial-gradient(130% 170% at 50% 0%, var(--lava-core-hi) 0%, var(--lava-core) 46%, var(--lava-edge) 100%) !important;
  border: 1px solid rgba(255, 91, 91, .38) !important;
  box-shadow: 0 4px 18px var(--lava-glow), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(60, 0, 12, .45) !important;
}
.btn-primary:hover, .btn-full.btn-primary:hover, .gn-auth-primary:hover,
.future-confirm-save:hover, .gn-whatsnew-close:hover {
  background: radial-gradient(130% 170% at 50% 0%, #FF7B7B 0%, var(--lava-core) 48%, var(--lava-edge) 100%) !important;
  box-shadow: 0 6px 26px var(--lava-glow), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-full.btn-primary,
html[data-theme="light"] .gn-auth-primary,
html[data-theme="light"] .future-confirm-save,
html[data-theme="light"] .gn-whatsnew-close {
  background: radial-gradient(130% 170% at 50% 0%, #CC2944 0%, #C61F3A 48%, #8f0f28 100%) !important;
  box-shadow: 0 4px 16px rgba(255, 45, 77, .32), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

/* ── 3. Mobile header (320-430px): brand, mark, toggles, avatar, no overlap ── */
#app .topbar { flex-wrap: nowrap !important; gap: 6px !important; padding-left: 12px !important; padding-right: 12px !important; }
.app-wordmark-b2b { flex-shrink: 1 !important; min-width: 0 !important; }
.app-wordmark-b2b svg { width: auto !important; max-width: 100% !important; height: 24px !important; }
.node-pill { flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; }
.node-pill .node-pill-phase { overflow: hidden !important; text-overflow: ellipsis !important; }@media (max-width: 400px){
  .node-pill .node-pill-state { display: none !important; }
  .app-wordmark-b2b svg { height: 22px !important; }
  .gn-theme-toggle .gn-theme-opt { min-width: 28px !important; padding: 0 6px !important; }}@media (max-width: 340px){
  .node-pill { max-width: 34vw !important; }}

/* ── 4. Chart lanes: reserved label space, controls never on top ── */
.card .chart-wrap { height: auto !important; padding-bottom: 18px !important; }
.card .chart-wrap canvas { height: 112px !important; }

/* Weight Trend Chart — SVG overlay + live trace + phase band (2026 PREMIUM REFINEMENT PASS) */
.gn-chart-stack { position: relative; }
.gn-chart-stack canvas { display: block; width: 100%; height: 100%; }
.gn-chart-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.gn-chart-overlay .gn-phase-band { opacity: .14; mix-blend-mode: screen; }
.gn-chart-overlay .gn-live-trace { stroke-dasharray: 14 22; stroke-dashoffset: 0; }@media (prefers-reduced-motion: no-preference){
  .gn-chart-overlay .gn-live-trace { animation: gn-trace-flow 1.8s linear infinite; }
  .gn-chart-overlay .gn-pulse-ring { animation: gn-pulse 2.8s ease-out infinite; transform-origin: center; transform-box: fill-box; }
  .gn-chart-overlay .gn-pulse-core { animation: gn-pulse-core 2.8s ease-out infinite; transform-origin: center; transform-box: fill-box; }}@keyframes gn-trace-flow{
  from { stroke-dashoffset: 300; }
  to   { stroke-dashoffset: 0; }}@keyframes gn-pulse{
  0%   { transform: scale(.4); opacity: .85; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }}@keyframes gn-pulse-core{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }}
.gn-chart-legend {
  display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px;
  font: 600 .52rem/1 var(--font-m, "Share Tech Mono", monospace);
  letter-spacing: 1.4px; color: var(--text-dim, #8295a0); text-transform: uppercase;
}
.gn-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gn-chart-legend i {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; box-shadow: 0 0 6px currentColor;
}
.gn-chart-legend .sw-cyan   { background: var(--chart-actual); color: var(--chart-actual); }
.gn-chart-legend .sw-red    { background: var(--chart-danger); color: var(--chart-danger); }
.gn-chart-legend .sw-yellow { background: var(--chart-estimate); color: var(--chart-estimate); }
/* DOSE = recorded event (grammar: cyan), white inner ring mirrors the canvas marker */
.gn-chart-legend .sw-dose   { background: var(--chart-actual); color: var(--chart-actual); border-radius: 2px; border: 1px solid #fff; box-shadow: 0 0 6px var(--chart-actual); }
.gn-chart-legend .sw-green  { background: var(--success); color: var(--success); }
.gn-chart-legend .sw-goal   { background: transparent; color: var(--chart-plan); border: 1px dashed var(--chart-plan); box-shadow: none; border-radius: 0; height: 0; width: 14px; }

/* ── Peptide Evidence Phase Curve (2026-08-10) ── */
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gn-peptide-expand {
  font: 700 .56rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: 1.6px; color: #00d4ff;
  background: rgba(0, 212, 255, .08); border: 1px solid rgba(0, 212, 255, .35); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; text-transform: uppercase;
}
.gn-peptide-expand:hover, .gn-peptide-expand:focus-visible { background: rgba(0, 212, 255, .16); outline: none; }
.gn-peptide-tip {
  position: absolute; z-index: 40; pointer-events: none; display: none; min-width: 130px; max-width: 200px;
  padding: 7px 9px; border-radius: 8px; background: rgba(6, 10, 16, .92); border: 1px solid rgba(0, 212, 255, .45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); color: #eef6f8;
  font: 600 .54rem/1.5 var(--font-m, "Share Tech Mono", monospace); letter-spacing: .8px;
}
html[data-theme="light"] .gn-peptide-tip { background: rgba(255, 255, 255, .96); border-color: rgba(0, 150, 190, .5); color: #0e1a22; }
.gn-peptide-evidence-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.gn-evidence-chip {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 6px;
  font: 700 .52rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: 1.2px; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .14); color: #8295a0; background: rgba(255, 255, 255, .05);
}
.gn-evidence-chip[data-state="pk"] { color: #00ff88; border-color: rgba(0, 255, 136, .45); background: rgba(0, 255, 136, .08); }
.gn-evidence-chip[data-state="pd"] { color: var(--chart-estimate); border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, .08); }
.gn-evidence-chip[data-state="iv"] { color: #5bd6c5; border-color: rgba(91, 214, 197, .45); background: rgba(91, 214, 197, .08); }
.gn-evidence-chip[data-state="generic"] { color: #00d4ff; border-color: rgba(0, 212, 255, .4); background: rgba(0, 212, 255, .08); }
.gn-peptide-summary {
  font: 600 .54rem/1.4 var(--font-m, "Share Tech Mono", monospace); letter-spacing: .8px; color: #8295a0;
}
.gn-peptide-overlay {
  position: fixed; inset: 0; z-index: 2147482999; display: none; place-items: center; padding: 14px;
  background: rgba(2, 4, 10, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gn-peptide-overlay.active { display: grid; }
html[data-theme="light"] .gn-peptide-overlay { background: rgba(240, 236, 226, .82); }
body.gn-peptide-overlay-open { overflow: hidden; }
.gn-peptide-overlay-card {
  width: min(100%, 920px); max-height: min(88vh, 820px); display: flex; flex-direction: column;
  background: var(--panel, #0d0f17); color: var(--text, #eef6f8);
  border: 1px solid rgba(0, 212, 255, .35); border-top: 2px solid #00d4ff; border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 40px rgba(0, 212, 255, .08);
}
html[data-theme="light"] .gn-peptide-overlay-card { background: #f7f5ee; color: #0e1a22; }
.gn-peptide-overlay-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid rgba(0, 212, 255, .18);
}
.gn-peptide-overlay-kicker { color: #00d4ff; font: 800 .58rem var(--font-d, monospace); letter-spacing: 2.4px; }
.gn-peptide-overlay-title { margin: 4px 0 6px; font: 800 1.05rem var(--font-d, monospace); letter-spacing: 1.2px; color: var(--text, #eef6f8); }
html[data-theme="light"] .gn-peptide-overlay-title { color: #0e1a22; }
.gn-peptide-overlay-close {
  font: 700 .56rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: 1.4px; color: var(--brand-red-hi);
  background: rgba(255, 91, 91, .08); border: 1px solid rgba(255, 91, 91, .4); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; text-transform: uppercase; white-space: nowrap;
}
.gn-peptide-overlay-close:hover, .gn-peptide-overlay-close:focus-visible { background: rgba(255, 91, 91, .16); outline: none; }
/* A4: light theme — brand-red-hi is a dark-surface tint; use the app light error tone (03 --text-error). */
html[data-theme="light"] .gn-peptide-overlay-close { color: #a51d36; border-color: rgba(165, 29, 54, .4); background: rgba(165, 29, 54, .08); }
.gn-peptide-overlay-scroll { overflow-y: auto; padding: 14px 18px 18px; }
.gn-peptide-overlay-grid { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 14px; }
.gn-peptide-big-block, .gn-peptide-ring-block { min-width: 0; }
.gn-peptide-block-label {
  color: #00d4ff; font: 700 .54rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: 1.8px;
  margin-bottom: 6px; text-transform: uppercase;
}
.gn-peptide-big-wrap { position: relative; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; overflow: hidden; }
.gn-peptide-big-wrap canvas { display: block; width: 100%; height: 240px; }
.gn-peptide-ring { width: 140px; height: 140px; display: block; margin: 0 auto; }
.gn-peptide-overlay-copy { margin-top: 6px; font: 600 .5rem/1.4 var(--font-m, "Share Tech Mono", monospace); letter-spacing: .6px; color: #8295a0; }
.gn-peptide-dossier {
  margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}
html[data-theme="light"] .gn-peptide-dossier { background: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .12); }
.gn-peptide-dossier-head { font: 800 .6rem var(--font-d, monospace); letter-spacing: 1.8px; color: #00ff88; margin-bottom: 8px; }
.gn-peptide-dossier-line { font: 600 .56rem/1.5 var(--font-m, "Share Tech Mono", monospace); letter-spacing: .5px; color: #c7d6db; margin: 3px 0; }
html[data-theme="light"] .gn-peptide-dossier-line { color: #33464f; }
.gn-peptide-dossier-line b { color: #8295a0; font-weight: 700; }
.gn-peptide-dossier-sub { font: 700 .54rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: 1.6px; color: var(--chart-estimate); margin: 9px 0 4px; }
.gn-peptide-dossier-note { font: 600 .54rem/1.55 var(--font-m, "Share Tech Mono", monospace); letter-spacing: .3px; color: #aebfc6; margin: 2px 0; }
html[data-theme="light"] .gn-peptide-dossier-note { color: #44565e; }
.gn-peptide-dossier-src { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font: 600 .54rem/1.5 var(--font-m, "Share Tech Mono", monospace); letter-spacing: .3px; color: #5bd6c5; text-decoration: none; margin: 2px 0; word-break: break-word; }
.gn-peptide-dossier-src:hover { text-decoration: underline; }
.gn-peptide-animal { margin-top: 12px; padding: 10px 14px; border: 1px dashed rgba(255, 209, 102, .4); border-radius: 10px; }
.gn-peptide-animal-head { font: 700 .54rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: 1.4px; color: var(--brand-amber); margin-bottom: 6px; }
.gn-peptide-animal canvas { display: block; width: 100%; height: 64px; }
.gn-peptide-lanes { margin-top: 14px; }
.gn-peptide-lanes-head { font: 800 .6rem var(--font-d, monospace); letter-spacing: 1.8px; color: #00d4ff; margin-bottom: 8px; }
.gn-peptide-lane { margin-bottom: 10px; }
.gn-peptide-lane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.gn-peptide-lane-head b { font: 700 .62rem var(--font-d, monospace); letter-spacing: 1px; color: var(--text, #eef6f8); }
html[data-theme="light"] .gn-peptide-lane-head b { color: #0e1a22; }
.gn-peptide-lane-summary { font: 600 .5rem/1.4 var(--font-m, "Share Tech Mono", monospace); letter-spacing: .5px; color: #8295a0; }
.gn-peptide-lane-chart { height: 72px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 8px; overflow: hidden; }
.gn-peptide-lane-canvas { display: block; width: 100%; height: 72px; }
.gn-peptide-overlap {
  margin: 4px 0 10px; padding: 8px 12px; border: 1px solid rgba(0, 255, 136, .35); border-radius: 8px;
  font: 700 .56rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: 1.2px; color: #00ff88;
  background: rgba(0, 255, 136, .06);
}
.gn-peptide-overlap b { color: #eef6f8; }
.gn-peptide-overlap.dim { border-color: rgba(255, 255, 255, .12); color: #8295a0; background: transparent; }
.gn-peptide-next-block { margin-top: 12px; }
.gn-peptide-next {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px;
  border: 1px solid rgba(0, 212, 255, .35); border-radius: 10px; background: rgba(0, 212, 255, .06);
}
.gn-peptide-next span { font: 700 .54rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: 1.6px; color: #00d4ff; }
.gn-peptide-next b { font: 800 .78rem var(--font-d, monospace); letter-spacing: 1px; color: var(--text, #eef6f8); }
.gn-peptide-next small { font: 600 .5rem var(--font-m, "Share Tech Mono", monospace); letter-spacing: .5px; color: #8295a0; }
.gn-peptide-next.dim { border-color: rgba(255, 255, 255, .12); background: transparent; }
.gn-peptide-next.dim span { color: #8295a0; }
html[data-theme="light"] .gn-peptide-next { background: rgba(0, 150, 190, .08); border-color: rgba(0, 150, 190, .4); }
.gn-peptide-overlay-foot { margin-top: 14px; font: 600 .5rem/1.5 var(--font-m, "Share Tech Mono", monospace); letter-spacing: .5px; color: #8295a0; text-align: center; }@media (max-width: 480px){
  .gn-peptide-overlay { padding: 8px; }
  .gn-peptide-overlay-card { max-height: 94vh; }
  .gn-peptide-overlay-grid { grid-template-columns: 1fr; }
  .gn-peptide-ring { width: 120px; height: 120px; }
  .gn-peptide-overlay-head { flex-direction: column; }
  .gn-peptide-overlay-title { font-size: .92rem; }
  .gn-peptide-big-wrap canvas { height: 190px; }}
html[data-theme="light"] .gn-peptide-expand { color: #007a9c; border-color: rgba(0, 122, 156, .4); background: rgba(0, 122, 156, .08); }
html[data-theme="light"] .gn-peptide-overlay-close { color: #c81e45; border-color: rgba(200, 30, 69, .45); background: rgba(200, 30, 69, .08); }
html[data-theme="light"] .gn-peptide-dossier-head { color: #00875a; }
html[data-theme="light"] .gn-peptide-block-label, html[data-theme="light"] .gn-peptide-lanes-head { color: #007a9c; }
html[data-theme="light"] .gn-peptide-dossier-sub { color: #a88400; }
html[data-theme="light"] .gn-peptide-animal-head { color: #c05a00; }
html[data-theme="light"] .gn-peptide-overlap { color: #00875a; border-color: rgba(0, 135, 90, .4); }
html[data-theme="light"] .gn-peptide-overlap b { color: #0e1a22; }
html[data-theme="light"] .gn-peptide-next span { color: #007a9c; }
html[data-theme="light"] .gn-peptide-next b { color: #0e1a22; }

/* ── 5. Premium SYSTEM UPDATE sheet ── */
.gn-whatsnew-overlay { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 20px; background: rgba(2, 2, 8, .8); backdrop-filter: blur(10px); }
.gn-whatsnew-card { width: min(100%, 480px); margin: auto; box-sizing: border-box; padding: 22px; border: 1px solid rgba(0, 212, 255, .4); border-top: 2px solid #00d4ff; border-radius: 12px; background: var(--panel, #0e0e16); color: var(--text, #eef6f8); box-shadow: 0 28px 80px rgba(0, 0, 0, .65); max-width: 480px; max-height: 80vh; overflow-y: auto; }
.gn-whatsnew-kicker { color: #00d4ff; font: 800 .66rem var(--font-d, monospace); letter-spacing: 2.6px; }
.gn-whatsnew-version { margin: 6px 0 0; color: var(--text, #eef6f8); font: 800 1.05rem var(--font-d, monospace); letter-spacing: 1.4px; }
.gn-whatsnew-title { margin-top: 2px; color: #00d4ff; font: 700 .68rem var(--font-m, monospace); letter-spacing: 1.6px; }
.gn-whatsnew-date { margin: 3px 0 12px; color: var(--text-dim, #8295a0); font: .56rem var(--font-m, monospace); letter-spacing: 1.2px; }
.gn-whatsnew-body { text-align: left; }
.gn-wn-cat { margin: 10px 0 0; }
.gn-wn-cat-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(0, 212, 255, .35); color: #00d4ff; font: 800 .52rem var(--font-m, monospace); letter-spacing: 1.6px; }
.gn-wn-cat[data-cat="fixed"] .gn-wn-cat-tag { border-color: rgba(0, 255, 136, .4); color: #00ff88; }
.gn-wn-cat[data-cat="new"] .gn-wn-cat-tag { border-color: rgba(255, 45, 77, .45); color: #FF5B5B; }
.gn-wn-cat[data-cat="accessibility"] .gn-wn-cat-tag { border-color: rgba(255, 209, 102, .4); color: #ffd166; }
.gn-wn-cat ul { margin: 6px 0 0; padding: 0 0 0 16px; }
.gn-wn-cat li { margin: 4px 0; color: var(--text-mid, #b7c7d3); font: .76rem/1.5 var(--font-b, system-ui); }
.gn-whatsnew-close { width: 100%; min-height: 46px; margin-top: 16px; border: 0; border-radius: 8px; font: 800 .68rem var(--font-d, monospace); letter-spacing: 1.8px; cursor: pointer; }
html[data-theme="light"] .gn-whatsnew-overlay { background: rgba(240, 236, 226, .72); }
html[data-theme="light"] .gn-whatsnew-card { background: var(--surface, #f4f1e9); color: var(--text-primary, #1c2b31); border-color: rgba(0, 111, 130, .35); border-top-color: #00718a; }
html[data-theme="light"] .gn-whatsnew-version { color: var(--text-primary, #1c2b31); }
html[data-theme="light"] .gn-whatsnew-title { color: #00718a; }
html[data-theme="light"] .gn-whatsnew-date { color: #4d6b75; }
html[data-theme="light"] .gn-wn-cat li { color: #2e424b; }
html[data-theme="light"] .gn-wn-cat-tag { border-color: rgba(0, 111, 130, .4); color: #005f73; }
html[data-theme="light"] .gn-wn-cat[data-cat="fixed"] .gn-wn-cat-tag { border-color: rgba(0, 130, 80, .45); color: #006b42; }
html[data-theme="light"] .gn-wn-cat[data-cat="new"] .gn-wn-cat-tag { border-color: rgba(200, 30, 60, .45); color: #a30f2e; }
html[data-theme="light"] .gn-wn-cat[data-cat="accessibility"] .gn-wn-cat-tag { border-color: rgba(150, 110, 20, .5); color: #7a5a10; }

/* ═══ Pass 2: mobile polish — shared component system ═══
 * Research Peptides, Syringe Draw, Dose Projection, data cards, DAY OPS. */

/* Shared tokens (extend the existing scale; no magic numbers).
   Unified 2026-10-11: --type-helper moved to css/native/08-design-tokens.css
   (.78rem, the readability-floor cascade winner); this block defers to it. */
:root {
  /* A4 2026-10-12: --ctl-h (contract 48px) and --radius-card (contract 16px)
     redefinitions removed — the canonical values in 08-design-tokens.css now
     govern. They were silently overriding the contract for every component
     using var(--ctl-h)/var(--radius-card), including the 09 bases. */
  --card-pad: 16px;
  --card-gap: 14px;
  --type-label: .72rem;
  --text-body: .88rem;
}
html[data-theme="light"] {
  --ctl-bg: #ffffff;
  --ctl-border: rgba(20, 60, 70, .3);
}

/* ── 1. Research Peptides: hierarchy, spacing, 44px targets ── */
#pageLab .gn-research-notice,
#pageLab .gn-research-disclaimer {
  font-size: var(--type-helper) !important;
  line-height: 1.6 !important;
  color: var(--text-mid, #b7c7d3) !important;
  background: var(--panel2, #121218) !important;
  border-left: 3px solid var(--accent-y, #ffd166) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 12px 0 !important;
}
#pageLab .gn-research-notice strong {
  display: block; margin-bottom: 4px;
  color: var(--text, #eef6f8) !important;
  font-size: .68rem !important; letter-spacing: 1.2px !important;
}
#pageLab .gn-research-group {
  margin: 14px 0 !important; padding: 14px !important;
  background: var(--panel, #0e0e16) !important;
  border: 1px solid var(--border, rgba(255,255,255,.09)) !important;
  border-radius: var(--radius-card) !important;
}
#pageLab .gn-research-group > span {
  display: block; margin-bottom: 4px;
  font: 800 var(--type-label) var(--font-d, monospace) !important;
  letter-spacing: 1.6px !important; color: var(--cyan, #00d4ff) !important;
}
#pageLab .gn-research-context {
  display: block; margin-bottom: 10px;
  font: 500 var(--type-helper)/1.5 var(--font-b, system-ui) !important;
  color: var(--text-mid, #b7c7d3) !important;
}
#pageLab .gn-research-group > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 8px !important;
}
#pageLab .gn-research-group button {
  min-height: var(--ctl-h) !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important;
  border-radius: 8px !important;
  background: var(--panel2, #121218) !important;
  color: var(--text, #eef6f8) !important;
  font: 600 .8rem/1.3 var(--font-b, system-ui) !important;
  text-align: left !important; cursor: pointer !important;
}
#pageLab .gn-research-group button:hover,
#pageLab .gn-research-group button:focus-visible {
  border-color: var(--cyan, #00d4ff) !important;
}
html[data-theme="light"] #pageLab .gn-research-group { background: var(--surface, #f4f1e9) !important; border-color: rgba(20,60,70,.2) !important; }
html[data-theme="light"] #pageLab .gn-research-group button { background: #ffffff !important; color: var(--text-primary, #1c2b31) !important; border-color: rgba(20,60,70,.25) !important; }
html[data-theme="light"] #pageLab .gn-research-notice,
html[data-theme="light"] #pageLab .gn-research-disclaimer { background: #f6efe0 !important; color: #4d3f1f !important; border-left-color: #b98a1f !important; }
html[data-theme="light"] #pageLab .gn-research-notice strong { color: #3a2f15 !important; }

/* ── 2. Syringe Draw instrument panel ── */
.gn-syr-hero { gap: 18px !important; margin: 14px 0 !important; }
.gn-syr-num { font-size: clamp(3rem, 16vw, 5rem) !important; }
.gn-syr-u { font-size: 1.1rem !important; }
.gn-syr-meta { font-size: .68rem !important; line-height: 1.8 !important; }
.gn-syr-result {
  padding: 16px !important;
  border-radius: var(--radius-card) !important;
  background: var(--panel2, #121218) !important;
  border: 1px solid var(--border, rgba(255,255,255,.09)) !important;
  margin: 12px 0 !important;
}
.gn-syr-result .v { font-size: 1.5rem !important; color: var(--text, #eef6f8) !important; }
.gn-syr-result .k { font-size: .66rem !important; color: var(--text-mid, #b7c7d3) !important; letter-spacing: 1.4px !important; }
#syrFormula {
  font-size: .76rem !important; line-height: 1.6 !important;
  color: var(--text-mid, #b7c7d3) !important;
}
#labSeg-draw .form-label, #labSeg-recon .form-label, #labSeg-supply .form-label { font-size: var(--type-label) !important; }
html[data-theme="light"] .gn-syr-result { background: var(--surface-elevated, #ffffff) !important; border-color: rgba(20,60,70,.22) !important; }
html[data-theme="light"] .gn-syr-result .v { color: var(--text-primary, #1c2b31) !important; }
/* CLARITY PASS (P1): DRAW status color is a computed consequence of the
   validity state updateSyr() writes to data-state — never decoration. */
#pageLab #syrStatus[data-state="ready"] { color: var(--success, #00ff88) !important; }
#pageLab #syrStatus[data-state="over"] { color: var(--danger, #FF3B3B) !important; }
#pageLab #syrStatus[data-state="notready"] { color: var(--warning, #ffd166) !important; }
html[data-theme="light"] #pageLab #syrStatus[data-state="ready"] { color: #0a7a4a !important; }
html[data-theme="light"] #pageLab #syrStatus[data-state="over"] { color: #c81e1e !important; }
html[data-theme="light"] #pageLab #syrStatus[data-state="notready"] { color: #8a5f00 !important; }

/* ── 3. Dose Projection form hierarchy ── */
#gnDoseProjection .form-label { font-size: var(--type-label) !important; }
#gnDoseProjection input, #gnDoseProjection select {
  min-height: var(--ctl-h) !important;
  border-radius: 8px !important;
  background: var(--panel2, #121218) !important;
  border: 1px solid var(--border, rgba(255,255,255,.14)) !important;
  color: var(--text, #eef6f8) !important;
  padding: 10px 12px !important;
  font-size: 1rem !important;
}
html[data-theme="light"] #gnDoseProjection input,
html[data-theme="light"] #gnDoseProjection select { background: #ffffff !important; color: var(--text-primary, #1c2b31) !important; border-color: rgba(20,60,70,.3) !important; }

/* ── 4. Shared data cards: hierarchy + contrast ── */
.gn-progress-signal, .gn-wanda-card, .stat-card {
  border-radius: var(--radius-card) !important;
  padding: var(--card-pad) !important;
}
.gn-progress-signal b, .gn-wanda-value, .stat-val, .card-val {
  font-size: 1.15rem !important;
  color: var(--text, #eef6f8) !important;
}
.gn-progress-signal small, .gn-wanda-label, .stat-lbl, .card-label, .sec-act {
  font-size: .7rem !important;
  color: var(--text-mid, #b7c7d3) !important;
  letter-spacing: 1.2px !important;
}
.empty, .results-empty { font-size: .8rem !important; line-height: 1.55 !important; }
html[data-theme="light"] .gn-progress-signal b,
html[data-theme="light"] .gn-wanda-value,
html[data-theme="light"] .stat-val,
html[data-theme="light"] .card-val { color: var(--text-primary, #1c2b31) !important; }
html[data-theme="light"] .gn-progress-signal small,
html[data-theme="light"] .gn-wanda-label,
html[data-theme="light"] .stat-lbl { color: #3c5660 !important; }

/* ── 5. DAY OPS: calendars, dropdowns, overlays, inputs (shared) ── */
html[data-theme="light"] .gn-custom-date,
html[data-theme="light"] .gn-custom-picker,
html[data-theme="light"] .gn-date-overlay .gn-date-panel,
html[data-theme="light"] .cp-dropdown {
  background: var(--surface-elevated, #ffffff) !important;
  border: 1px solid rgba(20, 60, 70, .28) !important;
  color: var(--text-primary, #1c2b31) !important;
  box-shadow: 0 18px 50px rgba(30, 45, 55, .18) !important;
}
html[data-theme="light"] .gn-custom-date .gn-date-title,
html[data-theme="light"] .gn-custom-picker-trigger,
html[data-theme="light"] .cp-select-trigger,
html[data-theme="light"] .gn-date-month-label { color: var(--text-primary, #1c2b31) !important; }
html[data-theme="light"] .gn-custom-date [data-gn-date-day],
html[data-theme="light"] .gn-date-grid .cal-day {
  color: var(--text-primary, #1c2b31) !important;
}
html[data-theme="light"] .gn-custom-date [data-gn-date-day]:hover,
html[data-theme="light"] .gn-custom-date [data-gn-date-day][aria-selected="true"],
html[data-theme="light"] .gn-date-grid .cal-day.selected {
  background: rgba(0, 111, 130, .16) !important;
  color: #005f73 !important;
}
html[data-theme="light"] .overlay, html[data-theme="light"] .gn-lab-tool-overlay {
  background: rgba(240, 236, 226, .72) !important;
}
html[data-theme="light"] #logOv .modal, html[data-theme="light"] #wtOv .modal,
html[data-theme="light"] .gn-lab-tool-shell {
  background: var(--surface, #f4f1e9) !important;
  color: var(--text-primary, #1c2b31) !important;
}
html[data-theme="light"] #logOv .form-label,
html[data-theme="light"] #wtOv .form-label,
html[data-theme="light"] .gn-lab-tool-shell .form-label { color: #1a343d !important; }
html[data-theme="light"] .gn-custom-picker button,
html[data-theme="light"] .cp-option { color: var(--text-primary, #1c2b31) !important; }
html[data-theme="light"] .gn-custom-picker button:hover,
html[data-theme="light"] .cp-option:hover { background: rgba(0, 111, 130, .1) !important; }

/* Pass-2 audit fixes (release .11): DAY OPS label contrast + nav label size. */
html[data-theme="light"] .form-label { color: #1a343d !important; }
.nav-lbl { font-size: .64rem !important; letter-spacing: 1.3px !important; }
html[lang="es"] .nav-lbl { font-size: .6rem !important; letter-spacing: .6px !important; }

/* ═══ P2: hologram progressive enhancement (CSS-only, safe) ═══ */
/* Framing + depth: instrument bezel around the scan stage. */
.site-scanner {
  border: 1px solid rgba(0, 212, 255, .28) !important;
  box-shadow: inset 0 0 28px rgba(0, 212, 255, .08), 0 10px 34px rgba(0, 0, 0, .45) !important;
  border-radius: 14px !important;
}
/* Slow holographic scan sweep (cheap, one repaint layer). */
.asset-scan-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 212, 255, .10) 48%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  animation: gnScanSweep 5.2s linear infinite;
}@keyframes gnScanSweep{
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }}
/* Selected-zone energy pulse (contained, no layout impact). */
.zone-overlay[data-selected="true"], .zone-overlay.selected {
  animation: gnZonePulse 2.4s ease-in-out infinite;
}@keyframes gnZonePulse{
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 212, 255, .5)); }
  50% { filter: drop-shadow(0 0 10px rgba(0, 212, 255, .85)); }}
/* Zone hotspot hit areas + visible focus. */
.gn-stable-zone-btn {
  min-height: 44px !important;
  min-width: 44px !important;
}
/* v0.15.41 — inline injection-site picker inside the LOG SHOT modal. The
   first-shot flow never leaves the form: mode tabs + zone buttons reuse the
   scanner's zone vocabulary, rendered compactly in-modal. */
.gn-modal-zone-modes {
  display: flex;
  gap: 6px;
  margin: 10px 0 8px;
}
.gn-modal-zone-modes .time-tab {
  flex: 1;
}
.gn-modal-zone-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gn-modal-zone-grid .gn-stable-zone-btn {
  flex: 1 1 30%;
  font-size: 0.78rem;
  padding: 8px 6px;
  white-space: normal;
  line-height: 1.25;
}
.gn-custom-picker-trigger,
.gn-custom-date-trigger,
.cp-select-trigger,
.gn-shot-advanced-toggle,
.gn-research-chip { min-height: 44px; }
.gn-stable-zone-btn:focus-visible, .zone-overlay:focus-within {
  outline: 2px solid rgba(0, 212, 255, .9) !important;
  outline-offset: 2px !important;
}
/* DAY OPS hologram: deeper teal, softer glow. */
html[data-theme="light"] .site-scanner {
  border-color: rgba(0, 111, 130, .35) !important;
  box-shadow: inset 0 0 24px rgba(0, 111, 130, .10), 0 10px 30px rgba(30, 45, 55, .16) !important;
}
html[data-theme="light"] .asset-scan-stage::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 111, 130, .12) 48%, transparent 100%);
}
html[data-theme="light"] .zone-overlay[data-selected="true"], html[data-theme="light"] .zone-overlay.selected {
  animation: gnZonePulseLight 2.4s ease-in-out infinite;
}@keyframes gnZonePulseLight{
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 111, 130, .4)); }
  50% { filter: drop-shadow(0 0 8px rgba(0, 111, 130, .7)); }}/* Reduced motion: static hologram, instant states. */
@media (prefers-reduced-motion: reduce){
  .asset-scan-stage::after { animation: none !important; opacity: .35 !important; }
  .zone-overlay[data-selected="true"], .zone-overlay.selected { animation: none !important; }}

/* ═══ P3: shared state components (empty / loading / error / offline) ═══ */
.gn-empty-state, .gn-loading-state, .gn-error-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 26px 18px;
  color: var(--text-mid, #b7c7d3);
  font: .8rem/1.55 var(--font-b, system-ui);
}
.gn-empty-state .gn-state-ico, .gn-loading-state .gn-state-ico, .gn-error-state .gn-state-ico {
  font-size: 1.5rem; opacity: .8;
}
.gn-empty-state b, .gn-loading-state b, .gn-error-state b {
  font: 800 .72rem var(--font-d, monospace); letter-spacing: 1.8px;
  color: var(--text, #eef6f8);
}
.gn-empty-state[data-kind="data"], .empty, .results-empty {
  border: 1px dashed var(--border, rgba(255,255,255,.14));
  border-radius: var(--radius-card, 16px);
}
.gn-error-state b { color: #FF5B5B !important; }
.gn-loading-state .gn-state-ico { animation: gnLoadSpin 1.1s linear infinite; }@keyframes gnLoadSpin{ to { transform: rotate(360deg); }}
html[data-theme="light"] .gn-empty-state b,
html[data-theme="light"] .gn-loading-state b { color: var(--text-primary, #1c2b31) !important; }
html[data-theme="light"] .gn-empty-state, html[data-theme="light"] .gn-loading-state { color: #3c5660 !important; }

/* Offline banner: appears when the browser loses connectivity. */
.gn-offline-banner {
  display: none; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px; font: 800 .6rem var(--font-d, monospace); letter-spacing: 1.6px;
  color: #ffd166; background: rgba(80, 60, 10, .92);
  border-bottom: 1px solid rgba(255, 209, 102, .4);
}
html.gn-offline .gn-offline-banner { display: flex; }
html[data-theme="light"] .gn-offline-banner { background: #f6e9c8; color: #6b5210; }@media (prefers-reduced-motion: reduce){ .gn-loading-state .gn-state-ico { animation: none !important; }}

/* ═══ Design-lens fix batch ═══ */
/* F8: 44px touch targets on controls (all widths). */
.topbar-btn, .modal-btn, .time-tab, .scanner-mode-btn, .cp-option { min-width: 44px !important; min-height: 44px !important; }
/* F9: lava button label contrast: deeper mid stop + stronger shadow. */
.btn-primary, .gn-auth-primary, .future-confirm-save, .gn-whatsnew-close {
  text-shadow: 0 1px 3px rgba(60, 0, 12, .65) !important;
}.topbar-btn:active, .modal-btn:active, .btn-primary:active, .btn-full:active, .dose-pill:active, .time-tab:active, .gn-stable-zone-btn:active, .cp-option:active, .gn-theme-opt:active{
  transform: scale(.96);
  transition: transform .1s ease;
}/* F14: global reduced-motion for legacy motion sources. */
@media (prefers-reduced-motion: reduce){
  .scan-sweep, .screen.active, .ticker, .glitch, .neon-flicker,
  .boot-ring, [class*="boot-"] { animation: none !important; }}
/* Art direction: instrument-well depth on data cards. */
.stat-card, .s6-card, .gn-wanda-card, .card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), inset 0 0 0 1px rgba(0, 212, 255, .035) !important;
}
html[data-theme="light"] .stat-card, html[data-theme="light"] .s6-card,
html[data-theme="light"] .gn-wanda-card, html[data-theme="light"] .card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(0, 111, 130, .06) !important;
}
/* HUD corner ticks on hero cards. */
.card-title { position: relative; }
.card-title::before, .card-title::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border-color: rgba(0, 212, 255, .55); border-style: solid;
}
.card-title::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.card-title::after { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }
html[data-theme="light"] .card-title::before, html[data-theme="light"] .card-title::after {
  border-color: rgba(0, 111, 130, .5);
}
/* Whatsnew: single close spec + focus ring. */
.gn-whatsnew-close { min-height: 46px !important; }.gn-whatsnew-close:focus-visible{
  outline: 2px solid rgba(0, 212, 255, .9) !important; outline-offset: 2px !important;
}

/* ═══ Landing mobile header: safe top zone, protected brand lockup ═══ */
/* Theme toggle pinned top-LEFT, language control top-RIGHT, both inside a
   safe-area-aware vertical zone; the hero content starts BELOW the zone so
   the NODE mark + GRID//NODE wordmark are never overlapped. */
#landing .landing-theme-toggle-host {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: 0;
  right: auto;
  z-index: 6;
}
#landing .landing-language-control {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: 0;
  z-index: 6;
}@media (max-width: 480px){
  #landing .landing-hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
  }
  .landing-theme-toggle-host .gn-theme-opt {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .landing-language-control button {
    min-height: 38px !important;
  }}

/* ═══ Shared destructive/critical action — red-lava (no flat raspberry) ═══
   v0.15.44: .fab removed from this list — the shot FAB is now a targeting
   reticle owned by html/partials/01-head.html, not a lava button. */
.gn-confirm-danger,
.archive-confirm-panel.danger .btn-primary,
.btn-primary,
.landing-btn.primary,
.gn-pwa-ios-hint-card button:not(.gn-pwa-ios-later),
.future-confirm-save {
  background: radial-gradient(130% 170% at 50% 0%,
    var(--lava-core-hi, #FF5B5B) 0%,
    var(--lava-core, #FF3B3B) 46%,
    var(--lava-edge, #8f0f28) 100%) !important;
  border: 1px solid rgba(143, 15, 40, .55) !important;
  box-shadow: 0 4px 18px var(--lava-glow, rgba(255, 45, 77, .42)),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(60, 0, 12, .65) !important;
}
.gn-confirm-danger:focus-visible,
.archive-confirm-panel.danger .btn-primary:focus-visible {
  outline: 2px solid rgba(255, 90, 110, .95) !important;
  outline-offset: 2px !important;
}
.gn-confirm-danger:active,
.archive-confirm-panel.danger .btn-primary:active {
  transform: scale(.97);
}
html[data-theme="light"] .gn-confirm-danger,
html[data-theme="light"] .archive-confirm-panel.danger .btn-primary,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .landing-btn.primary,
html[data-theme="light"] .future-confirm-save {
  background: radial-gradient(130% 170% at 50% 0%,
    #CC2944 0%, #C61F3A 42%, #8f0f28 100%) !important;
  box-shadow: 0 4px 16px rgba(143, 15, 40, .35),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}
/* Neutral secondary confirmations (CANCELAR / CANCEL) stay neutral. */
.gn-confirm-cancel,
.archive-confirm-panel.danger .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--border, rgba(255,255,255,.15)) !important;
  color: var(--text-mid, #b7c7d3) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}@media (prefers-reduced-motion: reduce){
  .gn-confirm-danger:active, .archive-confirm-panel.danger .btn-primary:active { transform: none !important; }}

/* iOS/Android install hint: secondary "later" stays neutral. */
.gn-pwa-ios-later {
  background: transparent !important;
  border: 1px solid var(--border, rgba(255,255,255,.15)) !important;
  color: var(--text-mid, #b7c7d3) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-theme="light"] .gn-pwa-ios-later {
  color: #4d6b75 !important;
  border-color: rgba(20, 60, 70, .3) !important;
}

/* ═══ Research Peptides premium hierarchy (shared, both themes) ═══ */
/* Panel structure: clearer section boundaries + breathing room. */
.gn-foundation-panel { padding: 18px 16px !important; }
.gn-foundation-head { margin-bottom: 14px; }
.gn-foundation-head h2 { font-size: 1.02rem; letter-spacing: 1.6px; }
.gn-lab-breadcrumb { font-size: .68rem; color: var(--text-dim, #6f6f88); margin-bottom: 10px; }

/* Section summaries: bigger, tappable, clear open state. */
.gn-foundation-section summary { padding: 14px 12px !important; }
.gn-foundation-section summary > span { font: 800 .78rem var(--font-d, monospace); letter-spacing: 1.8px; color: var(--text, #eef6f8); }
.gn-foundation-section summary > em { font-size: .66rem; color: var(--text-dim, #6f6f88); }

/* Warning/notice block: readable, accent-bordered. */
.gn-research-notice {
  margin: 12px 0 14px; padding: 12px 14px;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  border-left: 3px solid #ffd166;
  border-radius: 8px; background: rgba(255, 209, 102, .06);
  font: .78rem/1.7 var(--font-b, system-ui); color: var(--text-mid, #b7c7d3);
}
.gn-research-notice strong {
  display: block; margin-bottom: 4px;
  font: 800 .68rem var(--font-d, monospace); letter-spacing: 1.6px; color: #ffd166;
}

/* Library: category heading, context, chips. */
.gn-research-library { display: grid; gap: 12px; margin: 14px 0 16px; }
.gn-research-group {
  padding: 12px 12px 14px;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 10px; background: var(--panel, #0e0e16);
}
.gn-research-group > span {
  display: block; margin-bottom: 4px;
  font: 800 .72rem var(--font-d, monospace); letter-spacing: 1.6px; color: #00d4ff;
}
.gn-research-context {
  display: block; margin-bottom: 10px;
  font: .74rem/1.6 var(--font-b, system-ui); color: var(--text-mid, #b7c7d3);
}
.gn-research-group > div { display: flex; flex-wrap: wrap; gap: 8px; }
.gn-research-group > div button {
  min-height: 44px; padding: 8px 14px;
  border: 1px solid rgba(0, 212, 255, .32); border-radius: 8px;
  background: rgba(0, 212, 255, .07); color: var(--text, #eef6f8);
  font: 700 .78rem var(--font-b, system-ui); letter-spacing: .4px;
  transition: background .15s ease, transform .1s ease;
}
.gn-research-group > div button:hover { background: rgba(0, 212, 255, .16); }
.gn-research-group > div button:active { transform: scale(.96); }
.gn-research-group > div button:focus-visible { outline: 2px solid rgba(0,212,255,.9); outline-offset: 2px; }
.gn-research-disclaimer {
  margin: 0 0 16px; padding: 10px 12px;
  border-left: 3px solid var(--warning, #ffd166);
  font: .76rem/1.65 var(--font-b, system-ui); color: var(--text-mid, #b7c7d3);
}

/* Form hierarchy: labels, fields, spacing. */
#gnResearchForm .gn-form-grid { display: grid; gap: 12px; margin-bottom: 14px; grid-template-columns: 1fr 1fr; }
#gnResearchForm label > span,
#gnResearchForm label:first-child > span { display: block; margin-bottom: 6px; font: 800 .74rem var(--font-d, monospace); letter-spacing: 1.4px; color: var(--text, #eef6f8); }
#gnResearchForm input, #gnResearchForm select, #gnResearchForm textarea {
  width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border, rgba(255,255,255,.15)); border-radius: 8px;
  background: var(--surface, #0a0a14); color: var(--text, #eef6f8);
  font-size: 16px; font-family: var(--font-b, system-ui);
}
#gnResearchForm textarea { min-height: 88px; line-height: 1.55; }
#gnResearchForm input:focus-visible, #gnResearchForm select:focus-visible, #gnResearchForm textarea:focus-visible {
  outline: 2px solid rgba(0, 212, 255, .7); outline-offset: 1px; border-color: rgba(0, 212, 255, .5);
}
#gnResearchForm > label { display: block; margin-bottom: 14px; }
#gnResearchSave { min-height: 48px !important; font-size: .8rem !important; letter-spacing: 1.8px !important; }

/* Record list: readable rows. */
.gn-record-list { display: grid; gap: 10px; margin-top: 16px; }
.gn-record-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(255,255,255,.13)); border-radius: 10px;
  background: var(--panel, #0e0e16);
}
.gn-record-row b { font: 700 .84rem var(--font-b, system-ui); color: var(--text, #eef6f8); }
.gn-record-row small { display: block; font: .72rem/1.55 var(--font-b, system-ui); color: var(--text-mid, #b7c7d3); }
.gn-record-state { font: 800 .64rem var(--font-d, monospace); letter-spacing: 1.4px; color: #00d4ff; }
.gn-record-delete { min-width: 40px; min-height: 40px; font-size: 1rem; }

/* Empty state: polished, centered, readable. */
#gnResearchList .gn-empty-state {
  padding: 32px 16px; text-align: center;
  border: 1px dashed var(--border, rgba(255,255,255,.16)); border-radius: 12px;
  background: var(--panel, #0e0e16);
}
#gnResearchList .gn-empty-state b { display: block; margin-bottom: 8px; font: 800 .8rem var(--font-d, monospace); letter-spacing: 1.8px; color: var(--text, #eef6f8); }
#gnResearchList .gn-empty-state span { font: .78rem/1.65 var(--font-b, system-ui); color: var(--text-mid, #b7c7d3); }

/* Modal/tool overlay: reduce density, add structure. */
#gnLabToolOverlay 
/* LAB focused-view scroll contract (Blocker 3): the LAB tool overlay is the
   scroll container; reserve scroll-padding-top (sticky header height + 16px)
   so scrollIntoView lands the first focused content BELOW the sticky header
   with a >=12px gap. openLabTool resets overlay.scrollTop = 0 on open. */
.gn-lab-tool-overlay { scroll-padding-top: calc(76px + var(--safe-top, 0px)) !important; }
#gnLabToolHost > :first-child { scroll-margin-top: calc(12px + var(--safe-top, 0px)); }

.gn-lab-tool-head { padding: 14px 16px !important; }
#gnLabToolHost .gn-foundation-panel { margin: 0; }
#gnLabToolHost .gn-foundation-grid { gap: 10px; margin-bottom: 16px; }/* Small screens: one column, stacked controls. */
@media (max-width: 480px){
  #gnResearchForm .gn-form-grid { grid-template-columns: 1fr; }
  .gn-research-group > div button { flex: 1 1 calc(50% - 4px); }
  .gn-record-row { grid-template-columns: 1fr; }
  .gn-record-row > div:last-child { justify-content: flex-end; display: flex; }}/* Desktop/tablet: spacious modal + two-column library. */
@media (min-width: 768px){
  .gn-research-library { grid-template-columns: 1fr 1fr; }
  #gnResearchForm .gn-form-grid { grid-template-columns: 1fr 1fr 1fr; }}

/* ── DAY OPS research overrides ── */
html[data-theme="light"] .gn-research-group { background: var(--surface, #f4f1e9) !important; border-color: rgba(20,60,70,.22) !important; }
html[data-theme="light"] .gn-research-group > span { color: #006f82 !important; }
html[data-theme="light"] .gn-research-context,
html[data-theme="light"] .gn-research-disclaimer { color: #2e424b !important; }
html[data-theme="light"] .gn-research-group > div button {
  background: #ffffff !important; color: #1c2b31 !important; border-color: rgba(20,60,70,.3) !important;
}
html[data-theme="light"] .gn-research-group > div button:hover { background: #e8f4f5 !important; }
html[data-theme="light"] .gn-research-notice {
  background: #f6efe0 !important; color: #4d3f1f !important; border-left-color: #b98a1f !important;
}
html[data-theme="light"] .gn-research-notice strong { color: #7a5a10 !important; }
html[data-theme="light"] #gnResearchForm input,
html[data-theme="light"] #gnResearchForm select,
html[data-theme="light"] #gnResearchForm textarea {
  background: #ffffff !important; color: #1c2b31 !important; border-color: rgba(20,60,70,.3) !important;
}
html[data-theme="light"] #gnResearchForm label > span { color: #1c2b31 !important; }
html[data-theme="light"] .gn-record-row { background: #fbf9f2 !important; border-color: rgba(20,60,70,.2) !important; }
html[data-theme="light"] .gn-record-row b { color: #1c2b31 !important; }
html[data-theme="light"] .gn-record-row small { color: #2e424b !important; }
html[data-theme="light"] .gn-record-state { color: #006f82 !important; }
html[data-theme="light"] #gnResearchList .gn-empty-state { background: #f4f1e9 !important; }
html[data-theme="light"] #gnResearchList .gn-empty-state b { color: #1c2b31 !important; }
html[data-theme="light"] #gnResearchList .gn-empty-state span { color: #2e424b !important; }
html[data-theme="light"] .gn-foundation-section summary > span { color: #1c2b31 !important; }
html[data-theme="light"] .gn-foundation-section summary > em,
html[data-theme="light"] .gn-lab-breadcrumb { color: #4d6b75 !important; }