/* omicau docs — clinical/bioinformatician design system (fonts embedded above). */
:root{
  --ink-900:#14181F; --ink-700:#2B3138; --ink-500:#5A6472; --ink-300:#8A94A3;
  --line:#E4E7EB; --surface:#FFFFFF; --surface-alt:#F7F9FB; --sunken:#EEF2F6;
  --accent:#0072B2; --accent-ink:#005E93; --accent-tint:#E7F0F7;
  --pass:#009E73; --pass-tint:#E3F3EC; --warn:#D55E00; --warn-tint:#FBEBE0;
  --caution:#E69F00; --caution-tint:#FBF2DB;
  --sans:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',ui-monospace,monospace;
  --measure:44rem; --radius:4px;
}
[data-theme="dark"]{
  --ink-900:#E6EAF0; --ink-700:#C2C9D4; --ink-500:#8A94A3; --ink-300:#6B7482;
  --line:#2A313B; --surface:#0E1116; --surface-alt:#161B22; --sunken:#1B222C;
  --accent:#4BA3DE; --accent-ink:#7Fc0eb; --accent-tint:#16324a;
  --pass-tint:#123027; --warn-tint:#33190c; --caution-tint:#2e2410;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink-700);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,.mono{font-family:var(--mono);font-size:.9em}
:not(pre)>code{background:var(--sunken);padding:1px 6px;border-radius:2px;color:var(--ink-900);
  border:1px solid var(--line)}

/* ---- layout ---- */
.layout{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--line);
  background:var(--surface-alt);padding:24px 18px;display:flex;flex-direction:column;gap:8px}
.sidebar .brand{font-family:var(--mono);font-weight:700;font-size:18px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);padding:4px 10px}
.sidebar .tagline{font-size:12.5px;color:var(--ink-500);padding:0 10px 8px;border-bottom:1px solid var(--line)}
.nav-group{margin-top:16px}
.nav-group .h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-300);padding:0 10px;margin-bottom:6px}
.sidebar a.nav{display:block;padding:7px 12px;border-radius:var(--radius);font-size:14px;
  font-weight:500;color:var(--ink-700)}
.sidebar a.nav:hover{background:var(--sunken);text-decoration:none}
.sidebar a.nav.active{background:var(--accent-tint);color:var(--accent-ink)}
.side-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:10px}
.ruo-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--caution);
  background:var(--caution-tint);border:1px solid var(--caution);border-radius:999px;padding:4px 10px;font-weight:600}
.theme-btn{font-family:var(--sans);font-size:13px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-700);border-radius:var(--radius);padding:7px 12px;cursor:pointer}
.theme-btn:hover{background:var(--sunken)}

.content{padding:56px 64px;max-width:calc(var(--measure) + 128px);min-width:0}
.content section{scroll-margin-top:24px}

/* ---- typography ---- */
h1,h2,h3{color:var(--ink-900);font-weight:600;line-height:1.25}
h1{font-size:34px;letter-spacing:-.01em;margin:0 0 8px}
h2{font-size:26px;margin:64px 0 8px;padding-bottom:8px}
h2::after{content:"";display:block;width:32px;height:2px;background:var(--accent);margin-top:10px}
h3{font-size:20px;margin:40px 0 8px}
p{max-width:var(--measure)}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-500)}
.lead{font-size:18px;color:var(--ink-700);max-width:var(--measure)}
ul,ol{max-width:var(--measure)}
li{margin:4px 0}

/* ---- hero ---- */
.hero{position:relative;padding-bottom:32px;margin-bottom:8px}
/* document-scale rule: a short accent segment butted against a hairline to the measure edge */
.hero::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  max-width:var(--measure);background:var(--line)}
.hero::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:40px;
  background:var(--accent);z-index:1}
.hero .btns{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.btn{font-family:var(--sans);font-weight:600;font-size:15px;border-radius:var(--radius);
  padding:10px 20px;border:1px solid transparent;cursor:pointer;display:inline-block}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-ink);text-decoration:none}
.btn-ghost{background:var(--surface);color:var(--ink-900);border-color:var(--line)}
.btn-ghost:hover{background:var(--sunken);text-decoration:none}

/* ---- callouts ---- */
.callout{border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);
  padding:16px 20px;margin:20px 0;max-width:var(--measure);font-size:15px}
.callout .lbl{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;display:block;margin-bottom:4px}
.callout.plain{background:var(--surface-alt);border-left-color:var(--accent)}
.callout.plain .lbl{color:var(--accent-ink)}
.callout.warn{border-left-color:var(--warn);background:var(--warn-tint)}
.callout.warn .lbl{color:var(--warn)}
.callout.repro{border-left-color:var(--pass);background:var(--pass-tint)}
.callout.repro .lbl{color:var(--pass)}

/* ---- code ---- */
pre{background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px;overflow-x:auto;max-width:var(--measure);font-size:13.5px;line-height:1.6}
pre code{font-family:var(--mono);color:var(--ink-900);background:none;border:none;padding:0}

/* ---- tables ---- */
.tablewrap{overflow-x:auto;max-width:var(--measure);border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-500);background:var(--surface-alt)}
tr:last-child td{border-bottom:none}

/* ---- status pills ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  border-radius:999px;padding:3px 10px;font-family:var(--mono)}
.pill.pass{background:var(--pass-tint);color:var(--pass)}
.pill.warn{background:var(--warn-tint);color:var(--warn)}
.pill.caution{background:var(--caution-tint);color:var(--caution)}

/* ---- figures + lightbox ---- */
figure{margin:24px 0;max-width:var(--measure)}
figure img{width:100%;border:1px solid var(--line);border-radius:var(--radius);cursor:zoom-in;display:block}
figcaption{font-size:13px;color:var(--ink-500);margin-top:8px}
.lb{position:fixed;inset:0;background:rgba(10,14,20,.82);display:none;align-items:center;
  justify-content:center;z-index:100;padding:40px;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:96vw;max-height:92vh;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* ---- misc ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--measure)}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:var(--surface)}
.card .k{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500)}
.card .v{font-size:15px;color:var(--ink-700);margin-top:6px}
.mobile-top{display:none}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .2s;width:280px;
    box-shadow:0 10px 40px rgba(0,0,0,.2)}
  .sidebar.open{transform:none}
  .content{padding:24px 20px}
  .mobile-top{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;
    background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px}
  .mobile-top .menu{font-size:22px;background:none;border:none;cursor:pointer;color:var(--ink-900)}
  .grid2{grid-template-columns:1fr}
  h2{margin-top:40px}
}

/* ====================================================================
   Renewal layer — Swiss-quiet motion & polish. Locked palette/fonts/copy.
   Motion serves reading: translateY only, fires once, fully gated.
   ==================================================================== */

/* 1. Ultrawide centering + typographic precision + long-token guard.
   The 44rem measure never widens; extra track becomes symmetric whitespace.
   Gate margin-inline:auto to wide viewports only — on a grid item it interacts
   with max-width to force a min-content floor and overflows any track narrower
   than the cap (mobile + the tight 901 two-column). Centre only where there is
   genuine excess room (content track > capped measure ≈ 264+832px). */
@media (min-width:1200px){ .content{margin-inline:auto} }
h1,h2{text-wrap:balance;overflow-wrap:anywhere}
p,.lead{text-wrap:pretty}
.tablewrap td,.tablewrap th{font-variant-numeric:tabular-nums} /* align benchmark digits */
.nav-group .h,th{letter-spacing:.06em}                          /* one mono-label tracking */

/* 2. Section reveal — double-gated so JS-off OR reduced-motion => full static page.
   Hidden state exists only under html.js AND prefers-reduced-motion:no-preference. */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(6px)}
}
html.js .reveal.in{opacity:1;transform:none;
  transition:opacity .38s ease, transform .38s ease}

/* 3. True sliding nav indicator — one absolutely-positioned bar inside the
   already-sticky sidebar (its position:sticky is the containing block; do NOT
   add position:relative). Geometry is driven from the active link in JS. */
.nav-marker{position:absolute;left:8px;top:0;width:3px;height:0;background:var(--accent);
  transform:translateY(0);border-radius:3px;pointer-events:none;z-index:1}
.nav-marker.ready{transition:transform .26s cubic-bezier(.4,0,.2,1),
                            height .26s cubic-bezier(.4,0,.2,1)}

/* 4. Scoped, honest theme crossfade — explicit props only (never 'all', which
   would drag the reveal transforms), gated so it can't fire on first paint. */
@media (prefers-reduced-motion:no-preference){
  body,.sidebar,.callout,pre,.tablewrap,th,.theme-btn,.ruo-chip,.eyebrow{
    transition:background-color .22s ease, color .22s ease, border-color .22s ease}
  .btn,.card,figure img,.sidebar a.nav{
    transition:background-color .22s ease, color .22s ease, border-color .22s ease,
               transform .14s ease}
}

/* 5. Shadow-free micro-interactions — depth from hairline shifts + ≤1px lift. */
.card:hover,.btn-ghost:hover,.btn-primary:hover{transform:translateY(-1px)}
.card:hover,.btn-ghost:hover{border-color:var(--ink-300)}
figure img:hover{border-color:var(--ink-300)}

/* 6. Keyboard focus — the base sheet had none; match pointer state. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
a:focus-visible,.sidebar a.nav:focus-visible{outline-offset:3px}

/* 7. Nuclear reduced-motion reset — also neutralises html{scroll-behavior:smooth}
   and the nav-marker interpolation (position is information; only motion is cut). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;
    scroll-behavior:auto!important}
}

/* 8. Omicau scrollbars — thin, themed, subtle; replaces the default OS bar
   on the page, the sidebar rail, code blocks, and wide tables. */
*{scrollbar-width:thin;scrollbar-color:var(--ink-300) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:10px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:transparent}