/* Swiss Blue - aligns the Lab with krismccabe.com (ink / blue / Inter, black rules,
   round blue dot, numbered cards). Loaded after lab.css and each page's own
   <style>, so it overrides without touching tool logic. */
:root { --navy:#0A0F1E; --navy-mid:#1B2233; --accent:#2563EB; --accent-hv:#1D4ED8; --ink:#0A0F1E; --sw-bg:#fff; --sw-rule:#0A0F1E; }
:root[data-theme="dark"] { --sw-bg:#0A0F1E; --sw-rule:#E7ECF3; --ink:#E7ECF3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sw-bg:#0A0F1E; --sw-rule:#E7ECF3; --ink:#E7ECF3; } }
body { background-color:var(--sw-bg); background-image:none !important; -webkit-font-smoothing:antialiased; }

/* header: home page nav + tool-page back bar */
header, .lab-header { background:var(--sw-bg) !important; border-bottom:2px solid var(--sw-rule) !important; }
.nav-inner .brand, .lab-back { color:var(--ink) !important; font-weight:700; letter-spacing:-.02em; }
.nav-inner .brand { display:inline-flex; align-items:center; font-size:18px; }
.nav-inner .brand::before, .lab-back::before { content:''; display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--accent); margin-right:9px; }
.lab-back { font-size:15px; display:inline-flex; align-items:center; }
.nav-inner .brand .sub { font-weight:500; color:var(--accent-hv); margin-left:.35em; }
.nav-inner .brand:hover, .lab-back:hover { color:var(--accent-hv) !important; text-decoration:none; }
.site-nav a { color:var(--ink) !important; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:6px 0; border-bottom:2px solid transparent; }
.site-nav a:hover, .site-nav a.current { color:var(--accent-hv) !important; border-bottom-color:var(--accent); }
.lab-header-inner > div > span { color:var(--ink) !important; }
.theme-toggle { border:2px solid var(--sw-rule); background:transparent; color:var(--ink); border-radius:50%; width:34px; height:34px; }
.theme-toggle:hover { background:var(--ink); color:var(--sw-bg); border-color:var(--ink); }
.nav-toggle { width:46px !important; height:46px !important; border:2px solid var(--sw-rule) !important; border-radius:50%; align-items:center; background:transparent; }
.nav-toggle span { width:18px !important; background:var(--ink) !important; }
.nav-toggle[aria-expanded="true"] { background:var(--ink); }
.nav-toggle[aria-expanded="true"] span { background:var(--sw-bg) !important; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width:640px) {
  .site-nav { background:var(--sw-bg) !important; border-top:1px solid var(--sw-rule) !important; box-shadow:none !important; padding:6px 24px 14px !important; gap:0 !important; }
  .site-nav a { padding:15px 0 !important; font-size:16px; border-bottom:1px solid var(--border) !important; }
}
.site-nav a:focus-visible, .nav-inner .brand:focus-visible { outline-color:var(--accent); }

/* home hero: light, left-aligned, huge headline */
body > .hero, #main-content.hero:not(:has(.hero-content ~ *)) { }
.hero-content ~ * { }
.hero:has(.hero-content) { background:transparent; text-align:left; max-width:1100px; margin:0 auto; padding:56px 24px 8px; overflow:visible; }
.hero:has(.hero-content) .eyebrow { color:var(--accent-hv); }
.hero:has(.hero-content) h1 { color:var(--ink); font-size:clamp(36px,8.4vw,72px); line-height:1; letter-spacing:-.04em; font-weight:800; max-width:980px; margin:0 0 20px; }
.hero:has(.hero-content) h1 .acc { color:var(--accent); }
.hero:has(.hero-content) p:not(.eyebrow) { color:var(--text); font-size:18px; max-width:620px; margin:0; }
.eyebrow { letter-spacing:.1em; }

/* stat strip */
.stat-strip { background:transparent; border:0; border-top:4px solid var(--sw-rule); border-radius:0; box-shadow:none; max-width:none; justify-content:flex-start; padding:22px 0 0; margin:24px 0 56px; }
.stat { text-align:left; padding:0 16px 0 0; }
.stat-num { font-size:clamp(40px,7vw,68px); letter-spacing:-.045em; line-height:1; color:var(--ink); }
.stat-label { font-size:12px; letter-spacing:.08em; margin-top:8px; }
.stat-divider { display:none; }
@media (max-width:480px) { .stat-num { font-size:34px; } .stat-label { font-size:10px; } }

/* numbered Swiss cards */
.wrap { max-width:1100px; padding:24px 24px 64px; }
.section-lead { text-align:left; max-width:none; color:var(--ink); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; border-top:4px solid var(--sw-rule); padding-top:12px; margin:0 0 0; }
.grid { gap:0; margin-bottom:56px; border-left:1px solid var(--sw-rule); counter-reset:tool; }
.card { border:0; border-top:1px solid var(--sw-rule); border-right:1px solid var(--sw-rule); border-bottom:1px solid var(--sw-rule); border-radius:0; box-shadow:none !important; padding:24px; background:var(--sw-bg); }
.card:hover { transform:none !important; background:var(--accent); }
.card:hover h3, .card:hover p, .card:hover .card-tag, .card:hover .card-link { color:#fff; }
.card.reveal:not(.placeholder)::before { counter-increment:tool; content:counter(tool, decimal-leading-zero); font-weight:800; font-size:38px; letter-spacing:-.04em; line-height:1; color:var(--accent); margin-bottom:14px; }
.card:hover.reveal::before { color:#fff; }
.card-icon { width:40px; height:40px; border-radius:50%; background:var(--ink); margin-bottom:14px; }
.card-icon svg { width:24px; height:24px; }
:root[data-theme="dark"] .card-icon { background:#16202F; }
.card-tag { color:var(--text-muted); letter-spacing:.08em; }
.card h3 { font-size:24px; letter-spacing:-.02em; line-height:1.15; color:var(--ink); }
.card p { color:var(--text); font-size:15px; line-height:1.6; }
.card-link { color:var(--ink); }
.card.placeholder { background:var(--surface-2); border-style:solid; }

/* footer note + footer */
.footer-note { background:transparent; border:0; border-top:4px solid var(--sw-rule); border-radius:0; padding:12px 0 0; text-align:left; }
.footer-note h2 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
.footer-note p { margin:0; max-width:760px; color:var(--text); }
footer.site-footer { border-top:2px solid var(--sw-rule); font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
footer.site-footer a { color:var(--ink); }
footer.site-footer a:hover { color:var(--accent-hv); }

/* tool pages: ink hero, rounder panels, blue links stay */
.hero { background:var(--navy); }
.panel { border:2px solid var(--sw-rule); border-radius:22px; box-shadow:none; }
.btn.primary { border-radius:999px; }
.cookie-banner { border:2px solid var(--sw-rule); border-radius:16px; }
.hero:has(.hero-content) p { margin-left:0 !important; margin-right:0 !important; }
.hero:has(.hero-content) p.eyebrow { margin:0 0 16px !important; max-width:none; }
.card-icon { flex:0 0 40px; }
.card h3 { min-height:0; }

/* bigger tool logos */
.card-icon { width:76px; height:76px; flex:0 0 76px; margin-bottom:16px; }
.card-icon svg { width:48px; height:48px; }
.hero > svg { width:76px; height:76px; margin-bottom:20px !important; }
.lab-header-inner > div > span svg { width:30px; height:30px; }
.lab-header-inner > div > span { font-size:16px !important; gap:10px !important; }
.card p.card-tag { flex-grow:0; }

/* header consistency with krismccabe.com */
.nav-inner .brand { font-weight:800; }
.site-nav { gap:4px 24px; }
.nav-right { gap:12px; }
.theme-toggle { width:38px; height:38px; }
.nav-inner { max-width:1120px; }
