/* Shared white-led foundation. CI: navy #1b417c ink family, red #d52229
   signal, white ground. The untouched sector7 logo runs in its navy
   original. */

html[data-theme] {
  --paper: #ffffff;
  --paper-2: #f4f6f9;
  --ink: #16233c;
  --ink-dim: #5a6b85;
  --ink-line: rgba(27, 65, 124, 0.16);
  --ink-line-strong: #1b417c;
  --accent: #d52229;
  --accent-bright: #d52229;
  --accent-ink: #c11d24;
  --hero-line: #1b417c;
  --hero-accent: #d52229;
  --hero-grid-opacity: 0.07;
  --hero-line-opacity: 0.5;
}

html[data-theme] .ground-dark,
html[data-theme] .ground-paper,
html[data-theme] .ground-paper--grid {
  background-color: var(--paper);
  background-image: none;
  color: var(--ink);
}
html[data-theme] .ground-dark .lead { color: var(--ink-dim); }
html[data-theme] .ground-dark ul.ticks li::after { background: var(--accent-ink); }
html[data-theme] .ground-dark ul.ticks li::before { border-top-color: var(--accent-ink); }
html[data-theme] .lead { color: var(--ink-dim); }
html[data-theme] .anno { color: var(--ink-dim); }

html[data-theme] .site-header,
html[data-theme] .site-header--dark:not(.is-scrolled) {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--ink-line);
}
html[data-theme] .site-header--dark:not(.is-scrolled) .brand-logo--light { display: block !important; }
html[data-theme] .site-header--dark:not(.is-scrolled) .brand-logo--dark { display: none !important; }
html[data-theme] .site-header--dark:not(.is-scrolled) .main-nav > ul > li > a:hover,
html[data-theme] .site-header--dark:not(.is-scrolled) .login-link:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

html[data-theme] .hero { color: var(--ink); }
html[data-theme] .hero .hero-copy .lead { color: var(--ink-dim) !important; }
html[data-theme] .hero h1 .line--accent { color: var(--accent); }
html[data-theme] .hero-canvas-wrap::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 72%) !important;
}
@media (max-width: 64rem) {
  html[data-theme] .hero-canvas-wrap::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.88) 55%, rgba(255, 255, 255, 0.96) 100%) !important;
  }
}
html[data-theme] .hero .btn--ghost { color: var(--ink); border-color: var(--ink-line-strong); }
html[data-theme] .hero-titleblock { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(3px); }

html[data-theme] .titleblock,
html[data-theme] .titleblock > div { border-color: var(--ink-line); }
html[data-theme] .titleblock dt { color: var(--ink-dim); }
html[data-theme] .titleblock dd { color: var(--ink); }
html[data-theme] .stamp { border-color: var(--accent-ink); color: var(--accent-ink); }
html[data-theme] .dim { opacity: 0.8; color: var(--ink-line-strong); }
html[data-theme] .hairline { border-top-color: var(--ink-line); }

html[data-theme] footer.ground-dark { border-top: 2px solid var(--ink-line-strong); }
html[data-theme] footer .footer-links a:hover,
html[data-theme] footer .footer-grid a:hover { color: var(--accent-ink); }

html[data-theme] .sub-panel {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--ink-line);
  box-shadow: 0 18px 44px rgba(22, 35, 60, 0.12);
}
html[data-theme] .sub-list a:hover { background: var(--paper-2); color: var(--ink); }
html[data-theme] .sheet-no { color: var(--accent-ink); }
/* Nav's scoped hover keeps the navy row fill; the red sheet number is
   unreadable on it (~2:1). Chain .sub-panel to out-rank the scoped rule
   and flip the number to white while hovered. */
html[data-theme] .sub-panel .sub-list a:hover .sheet-no { color: #ffffff; }
html[data-theme] .mobile-menu { background: #ffffff; color: var(--ink); border-top-color: var(--ink-line); }
html[data-theme] .mobile-sub { border-left-color: var(--ink-line); }
/* Nav's scoped selectors compile to (0,3,1) specificity and would beat a
   plain override -> light-blue text on the white menu. Chain .mobile-menu
   to reach (0,3,2). */
html[data-theme] .mobile-menu .mobile-sub a { color: var(--ink-dim); }
html[data-theme] .mobile-menu .mobile-sub a:hover { color: var(--ink); }
html[data-theme] #nav-toggle { color: var(--ink); }

/* CTAs in navy so red stays reserved for true signals: the IT-NOTFALL
   chip must be the loudest red on any page. */
html[data-theme] .btn--primary { background: var(--ink); color: #ffffff; }
html[data-theme] .btn--primary:hover { background: #2c4a80; box-shadow: 0 6px 18px rgba(22, 35, 60, 0.35); }

html[data-theme] .btn--ghost { color: var(--ink); border-color: var(--ink-line-strong); }
html[data-theme] .btn--ghost:hover { background: var(--paper-2); }
html[data-theme] .step-n { color: var(--accent-ink); border-color: var(--accent-ink); }
html[data-theme] .sheet-row:hover { background: var(--paper-2); }

/* white footers need the navy original, not the inverse logo (would be
   white-on-white). content swap keeps the untouched original asset. */
html[data-theme] footer .footer-logo { content: url('/assets/sector7-logo.png'); }

/* Site theme — high-contrast neutral panels, tabular mono as the only
   texture, red reserved strictly for the alert/change state (CTAs, active
   row). Perforated title strip; solutions index ranked in fixed columns. */


html[data-theme='s7'] {
  --hero-grid-opacity: 0.06;
  --hero-line-opacity: 0.4;
}

/* tabular voice */
html[data-theme='s7'] h1,
html[data-theme='s7'] h2 {
  font-family: var(--font-sans);
  text-transform: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}
html[data-theme='s7'] h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
html[data-theme='s7'] .anno,
html[data-theme='s7'] .meta { font-variant-numeric: tabular-nums; }


/* gate board: solutions ranked in fixed columns, alert red on the active row */
html[data-theme='s7'] .sheet-list { border-top: 2px solid var(--ink-line-strong); }
html[data-theme='s7'] .sheet-row {
  border-bottom: 1px solid var(--ink-line);
  align-items: baseline;
}
html[data-theme='s7'] .sheet-id {
  font-size: 0.95rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
html[data-theme='s7'] .sheet-title {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: -0.01em;
}
html[data-theme='s7'] .sheet-sub { color: var(--ink-dim); }
html[data-theme='s7'] .sheet-row:hover { background: #fff; }
html[data-theme='s7'] .sheet-row:hover .sheet-id,
html[data-theme='s7'] .sheet-row:hover .sheet-sub { color: var(--accent-ink); }
html[data-theme='s7'] .sheet-row:hover .sheet-title { color: var(--accent-ink); }
html[data-theme='s7'] .sheet-diagram { display: none !important; }

/* jobs read as boarding rows too */
html[data-theme='s7'] .job-title { font-family: var(--font-sans); text-transform: none; letter-spacing: -0.01em; }


/* secure site-map hero: 2D canvas drawn by /hero-fx.js */
html[data-theme='s7'] .map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}