:root {
  color-scheme: light;

  /* ---------------------------------------------------------- the ladder
     base 17px, ratio 1.2, rounded to whole pixels so nothing renders soft.
       10  12  14  17  20  24  29  35  42  51  61  73                      */
  --s1:10px; --s2:12px; --s3:14px;  --s4:17px;  --s5:20px;  --s6:24px;
  --s7:29px; --s8:35px; --s9:42px; --s10:51px; --s11:61px; --s12:73px;

  /* Roles. Every rule in this file uses one of these, never a step directly,
     so a role can be re-pitched in one edit without hunting selectors. */
  --t-micro: var(--s1);   /* the caption under the dial, and nothing else  */
  --t-label: var(--s2);   /* uppercase furniture: column heads, chips      */
  --t-meta:  var(--s3);   /* data and controls: tables, code, rail, inputs */
  --t-body:  var(--s4);   /* prose. the base the ladder is built from      */
  --t-lead:  var(--s5);   /* the paragraph that introduces a section       */
  --t-fig:   var(--s8);   /* a figure the page exists to report            */

  /* Display sizes stay fluid, but both ends of every clamp are ladder steps. */
  --t-h1: clamp(var(--s9), 7vw,   var(--s12));  /* 42 -> 73 */
  --t-h2: clamp(var(--s7), 4.2vw, var(--s9));   /* 29 -> 42 */
  --t-h3: clamp(var(--s5), 1.9vw, var(--s6));   /* 20 -> 24 */
  --t-h4: var(--s5);
  --t-page: clamp(var(--s6), 2.6vw, var(--s7)); /* 24 -> 29, in-app titles */

  /* Leading tightens as type grows -- one decision, applied consistently. */
  --lh-flat: 1;  --lh-display: 1.06;  --lh-title: 1.22;
  --lh-lead: 1.5;  --lh-body: 1.6;

  /* Tracking does the same, in the other direction. */
  --ls-display: -.028em;  --ls-title: -.018em;  --ls-label: .075em;

  /* Space is a ladder too. Every padding, margin and gap comes from here. */
  --sp1:4px;  --sp2:8px;  --sp3:12px; --sp4:16px; --sp5:24px;
  --sp6:32px; --sp7:48px; --sp8:64px; --sp9:96px;

  --ground:      #FAF9F6;   /* warm paper, not dashboard grey */
  --surface:     #FFFFFF;
  --surface-2:   #F5F4F0;
  --surface-3:   #EDEBE5;
  --line:        #E2DFD7;
  --line-strong: #CFCBC0;

  --ink:       #14161A;
  --ink-2:     #4A4F58;
  --ink-3:     #6A707A;   /* 4.5:1 minimum on every light surface */

  /* The violet from the wordmark. One accent, used sparingly. */
  --brand:        #5B3DF5;
  --brand-hover:  #4A2FE0;
  --brand-soft:   #EFECFE;
  --brand-line:   #CFC5FB;
  --on-brand:     #FFFFFF;

  /* Severity is the product's vocabulary. It never changes meaning. */
  --crit:   #B02418;  --crit-bg:   #FDEDEB;  --crit-line:   #F2C0B9;
  --high:   #B45309;  --high-bg:   #FDF3E7;  --high-line:   #F0D0A4;
  --med:    #8A6D00;  --med-bg:    #FBF5E0;  --med-line:    #E7D79A;
  --warn:   #5A6472;  --warn-bg:   #F1F2F4;  --warn-line:   var(--line-strong);
  --ok:     #10704F;  --ok-bg:     #E6F4EE;  --ok-line:     #A8D8C4;
  --info:   #1F5C9E;  --info-bg:   #E9F1FA;  --info-line:   #B4D0EC;

  --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px;
  --sh-1: 0 1px 2px rgba(20,22,26,.06);
  --sh-2: 0 6px 24px rgba(20,22,26,.10), 0 1px 3px rgba(20,22,26,.06);
  --sh-lift: 0 22px 60px -28px rgba(20,22,26,.4), 0 2px 8px rgba(20,22,26,.06);

  --rail: 248px;
  --bar: 58px;
  --measure: 68ch;
  --logo-h: 42px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:#0D0F12; --surface:#15181D; --surface-2:#1B1F26; --surface-3:#232830;
    --line:#262C35; --line-strong:#38404B;
    --ink:#E9EAEC; --ink-2:#A6ACB6; --ink-3:#7F8691;
    --brand:#8F79FF; --brand-hover:#A48FFF; --brand-soft:#1B1736; --brand-line:#352B63; --on-brand:#0B0818;
    --crit:#F08379; --crit-bg:#2B1614; --crit-line:#55251F;
    --high:#E0A35C; --high-bg:#2A2014; --high-line:#4E3A1E;
    --med:#D8C46A; --med-bg:#26220F; --med-line:#463F1C;
    --warn:#98A1AE; --warn-bg:#1A1E24; --warn-line:#333A44;
    --ok:#4FC08D; --ok-bg:#0E2620; --ok-line:#1E4A39;
    --info:#6FB0EE; --info-bg:#12202D; --info-line:#23405D;
    --sh-1: 0 1px 2px rgba(0,0,0,.45);
    --sh-2: 0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
    --sh-lift: 0 22px 60px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#0D0F12; --surface:#15181D; --surface-2:#1B1F26; --surface-3:#232830;
  --line:#262C35; --line-strong:#38404B;
  --ink:#E9EAEC; --ink-2:#A6ACB6; --ink-3:#7F8691;
  --brand:#8F79FF; --brand-hover:#A48FFF; --brand-soft:#1B1736; --brand-line:#352B63; --on-brand:#0B0818;
  --crit:#F08379; --crit-bg:#2B1614; --crit-line:#55251F;
  --high:#E0A35C; --high-bg:#2A2014; --high-line:#4E3A1E;
  --med:#D8C46A; --med-bg:#26220F; --med-line:#463F1C;
  --warn:#98A1AE; --warn-bg:#1A1E24; --warn-line:#333A44;
  --ok:#4FC08D; --ok-bg:#0E2620; --ok-line:#1E4A39;
  --info:#6FB0EE; --info-bg:#12202D; --info-line:#23405D;
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --sh-lift: 0 22px 60px -26px rgba(0,0,0,.8);
}


* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--t-body)/var(--lh-body) 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp6); }
/* Header values copied from src/ui/theme.css (.site-head, .site-head-in, .brand-logo,
   .site-nav) so moving between the app and a guide does not change the header. */
.site-head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head-in { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp6); height: 84px;
  display: flex; align-items: center; gap: var(--sp6); }
.brand-logo { height: var(--logo-h); width: auto; display: block; }
.logo-ondark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-onlight { display: none; }
  :root:not([data-theme="light"]) .logo-ondark { display: block; } }
:root[data-theme="dark"] .logo-onlight { display: none; }
:root[data-theme="dark"] .logo-ondark { display: block; }
.site-nav { display: flex; gap: var(--sp5); margin-left: var(--sp5); }
.site-nav a { color: var(--ink-2); font-size: var(--t-body); text-decoration: none; font-weight: 500; }
.site-nav a.on, .site-nav a:hover { color: var(--ink); }
.push { margin-left: auto; display: flex; gap: var(--sp3); }
.btn { display: inline-flex; align-items: center; gap: var(--sp2); padding: var(--sp2) var(--sp4);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: 500 var(--t-meta)/1.2 inherit; font-family: inherit; text-decoration: none; }
.btn:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { padding: var(--sp1) var(--sp3); font-size: var(--t-meta); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-moon { display: inline; }
:root[data-theme="dark"] .theme-btn .i-sun { display: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.crumbs { font-size: var(--t-meta); color: var(--ink-3); margin: var(--sp6) 0 var(--sp4); }
.crumbs a { color: var(--ink-3); }
.eyebrow { font: 600 var(--t-label)/1 'IBM Plex Mono', monospace; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--brand); }
h1 { font-size: clamp(var(--s8), 4.6vw, var(--s10)); line-height: var(--lh-display); letter-spacing: var(--ls-display);
  font-weight: 600; margin: var(--sp3) 0 var(--sp4); text-wrap: balance; max-width: 24ch; }
.lede { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: 62ch; margin: 0; }
.meta { font: 400 var(--t-meta)/1.4 'IBM Plex Mono', monospace; color: var(--ink-3); margin-top: var(--sp4); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp8); margin: var(--sp7) 0 var(--sp9); }
.toc { position: sticky; top: calc(84px + var(--sp5)); align-self: start; font-size: var(--t-meta);
  border-left: 1px solid var(--line); padding-left: var(--sp4); }
.toc p { margin: 0 0 var(--sp3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp2); }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--brand); }
article { max-width: var(--measure); min-width: 0; }
article h2 { font-size: var(--t-h3); line-height: var(--lh-title); letter-spacing: var(--ls-title);
  margin: var(--sp7) 0 var(--sp3); scroll-margin-top: calc(84px + var(--sp4)); text-wrap: balance; }
article h3 { font-size: var(--t-body); font-weight: 600; margin: var(--sp6) 0 var(--sp2); }
article p, article li { color: var(--ink); }
article p { margin: 0 0 var(--sp4); }
article ul, article ol { padding-left: var(--sp5); margin: 0 0 var(--sp4); }
article li { margin-bottom: var(--sp2); }
article code { font: 400 .88em/1.4 'IBM Plex Mono', monospace; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 5px; overflow-wrap: anywhere; }
article pre { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r-md); padding: var(--sp4); overflow-x: auto; margin: 0 0 var(--sp5);
  font: 400 var(--t-meta)/1.55 'IBM Plex Mono', monospace; }
article pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
.table-wrap { overflow-x: auto; margin: 0 0 var(--sp5); border: 1px solid var(--line); border-radius: var(--r-md); }
article table { border-collapse: collapse; width: 100%; font-size: var(--t-meta); background: var(--surface); }
article th, article td { text-align: left; vertical-align: top; padding: var(--sp2) var(--sp3); border-bottom: 1px solid var(--line); }
article th { font-weight: 600; background: var(--surface-2); }
article tr:last-child td { border-bottom: 0; }
article blockquote { margin: 0 0 var(--sp5); padding: var(--sp3) var(--sp4); background: var(--brand-soft);
  border-left: 3px solid var(--brand); border-radius: var(--r-sm); }
article blockquote p:last-child { margin: 0; }
.cta { margin: var(--sp7) 0 0; padding: var(--sp5) var(--sp6); background: var(--surface);
  border: 1px solid var(--brand-line); border-radius: var(--r-lg); }
.cta h2 { margin-top: 0; }
.cta p { color: var(--ink-2); }
.related { margin-top: var(--sp7); }
.related h2 { font-size: var(--t-h4); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp4); }
.card { display: block; padding: var(--sp4) var(--sp5); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--brand-line); box-shadow: var(--sh-2); color: var(--ink); }
.card b { display: block; font-weight: 600; line-height: var(--lh-title); margin-bottom: var(--sp2); }
.card span { display: block; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.5; }
.hub-head { padding: var(--sp7) 0 var(--sp5); border-bottom: 1px solid var(--line); }
.hub-cat { margin: var(--sp7) 0; }
.hub-cat h2 { font-size: var(--t-h3); margin: 0 0 var(--sp2); }
.hub-cat > p { color: var(--ink-2); margin: 0 0 var(--sp4); }
.site-foot { border-top: 1px solid var(--line); padding: var(--sp6) 0; font-size: var(--t-meta); color: var(--ink-3); }
.site-foot .wrap { display: flex; gap: var(--sp5); flex-wrap: wrap; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp5); }
  .toc { position: static; border-left: 0; padding: var(--sp4); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-md); order: -1; }
  .site-head-in { flex-wrap: wrap; height: auto; min-height: var(--bar); row-gap: 0; padding: 0 var(--sp4); }
  .site-nav { order: 3; flex: 0 0 100%; margin: 0; gap: var(--sp5); overflow-x: auto;
    padding: var(--sp1) 0 var(--sp2); scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { font-size: var(--t-meta); white-space: nowrap; }
  .wrap { padding: 0 var(--sp4); }
  .toc { top: auto; }
}
@media (max-width: 520px) { .wrap, .site-head-in { padding: 0 var(--sp4); } .push { gap: var(--sp2); } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }