:root{
  --ink:#16233a; --ink-soft:#2b3d57; --paper:#f7f6f2; --paper-raised:#fff;
  --brass:#9c7a3c; --line:#dcd7c9; --muted:#5c6570; --ok:#3f6b4e;
  --warn:#8a5a1a; --danger:#8a3324;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  line-height:1.55;
}
h1,h2,h3,.serif{font-family:"Source Serif 4","Georgia",serif;}
h1{font-size:clamp(2rem,4vw,3rem); font-weight:600; line-height:1.1; margin:0 0 .5rem}
h2{font-size:1.5rem; font-weight:600; margin:0 0 .75rem}
h3{font-size:1.1rem; font-weight:600; margin:0 0 .4rem}
p{color:var(--muted)}
a{color:var(--ink-soft)}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px}

header.site{
  border-bottom:1px solid var(--line); background:var(--paper-raised);
  position:sticky; top:0; z-index:10;
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:24px}
.brand{display:flex; align-items:center; text-decoration:none; color:var(--ink); padding:9px 0; min-height:44px}
/* Wordmark: the letters of the brand, last letter picked out in brass. */
.brand .logo{
  display:inline-flex; align-items:center; gap:.02em;
  font-family:"Source Serif 4","Georgia",serif; font-weight:700;
  font-size:1.6rem; letter-spacing:.04em; line-height:1;
  color:var(--ink); white-space:nowrap;
}
.brand .logo .accent{color:var(--brass)}
/* Seven top-level sections have to sit on one line beside the brand and the
   search box at 1280px, so the gaps and type are tightened rather than letting
   the menu break onto a second row. */
nav.main{display:flex; gap:13px; flex-wrap:wrap}
nav.main a{font-size:.88rem; text-decoration:none; color:var(--ink-soft); border-bottom:2px solid transparent; padding:11px 0; min-height:44px; min-width:44px; justify-content:center; display:inline-flex; align-items:center}
nav.main a:hover, nav.main a.active{border-bottom-color:var(--brass)}

/* search box in the header — a real GET form, works without JavaScript */
.searchbox{display:flex; gap:6px; align-items:center}
.searchbox input{
  width:190px; padding:8px 10px; border:1px solid var(--line); border-radius:3px;
  font:inherit; font-size:.88rem; background:#fff; color:var(--ink); min-height:38px;
}
.searchbox button{
  padding:8px 14px; min-height:38px; border:1px solid var(--line); border-radius:3px;
  background:var(--paper); color:var(--ink-soft); font:inherit; font-size:.88rem; cursor:pointer;
}
.searchbox button:hover{background:var(--paper-raised); border-color:var(--brass)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* CSS-only disclosure for the mobile menu. The checkbox and label only exist
   below 640px; the nav links themselves are always in the HTML. */
.nav-toggle{position:absolute; opacity:0; width:1px; height:1px}
.nav-toggle-label{display:none}

.hero{border-bottom:1px solid var(--line); padding:56px 0 48px}
.hero .eyebrow{color:var(--brass); font-size:.85rem; margin-bottom:10px; letter-spacing:.04em}
.hero p.lead{font-size:1.1rem; color:var(--ink-soft); text-align:justify; hyphens:auto}

.section{padding:48px 0; border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:none}

.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:4px;
  padding:20px 22px;
}
.card h3{margin-bottom:.3rem}
.card h3 a{text-decoration:none; color:var(--ink)}
.card h3 a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.card p{font-size:.92rem; margin:0}
.card a.go{display:inline-flex; align-items:center; margin-top:10px; min-height:44px; padding:0 4px; font-size:.85rem; color:var(--brass); text-decoration:none}

/* breadcrumbs */
.crumbs{font-size:.82rem; color:var(--muted); padding:14px 0 0}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0}
.crumbs li:not(:last-child)::after{content:" /"; color:var(--line)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* prose — full container width, both edges justified */
.prose h2{font-size:1.35rem; margin:2rem 0 .6rem}
.prose h3{font-size:1.05rem; margin:1.5rem 0 .4rem; color:var(--ink-soft)}
.prose p{color:var(--ink-soft); margin:0 0 1rem}
.prose ul,.prose ol{color:var(--ink-soft); margin:0 0 1rem; padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
.prose a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.prose dd{margin:0 0 .6rem; color:var(--ink-soft)}
.prose dt{font-weight:600; color:var(--ink); margin-top:.75rem}
/* paragraphs and list items fill the row and align at both edges */
.prose p, .prose li, .prose dd, .callout p, .hero p.lead{text-align:justify; hyphens:auto}
.tablewrap{overflow-x:auto; margin:1.25rem 0; border:1px solid var(--line); border-radius:4px; background:var(--paper-raised)}
table{border-collapse:collapse; width:100%; font-size:.88rem}
caption{text-align:left; padding:12px 14px 0; font-size:.82rem; color:var(--muted)}
th,td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:#fbf9f3; font-weight:600; color:var(--ink); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.num{text-align:right; white-space:nowrap}
/* Very long reference tables (a whole ID Manual class runs to ~7,000 rows):
   let the browser skip laying out rows that are off screen. Pure CSS, so there
   is no JS dependency and no effect on crawlers, find-in-page, or the no-JS
   fallback — the rows are all in the HTML either way. */
.tablewrap.lazy tbody tr{content-visibility:auto; contain-intrinsic-size:auto 46px}
tbody tr.row-hit td{background:#fdf6e3}

/* top-of-page search for the two classification sections */
.dbsearch{background:var(--paper-raised); border:1px solid var(--line); border-left:3px solid var(--brass);
  border-radius:0 4px 4px 0; padding:18px 20px; margin:0 0 1.5rem}
.dbsearch-top{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap}
.dbsearch label{font-size:.92rem; font-weight:600; color:var(--ink)}
.dbsearch-count{font-size:.8rem; color:var(--muted)}
.dbsearch-row{display:flex; gap:12px; margin-top:10px; align-items:center; flex-wrap:wrap}
.dbsearch input[type=search]{flex:1 1 260px; min-height:44px; padding:11px 14px; border:1px solid var(--line);
  border-radius:3px; font:inherit; font-size:1rem; background:#fff; color:var(--ink)}
.dbsearch input[type=search]:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass)}
.dbsearch-home{flex:none; display:flex; align-items:center; min-height:44px; font-size:.85rem;
  color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--brass)}
.dbsearch-home:hover{color:var(--ink)}
.dbsearch-hint{font-size:.8rem; color:var(--muted); margin:8px 0 0}
.dbsearch-noscript{font-size:.85rem; color:var(--muted); margin:10px 0 0}
.dbsearch-results{list-style:none; margin:14px 0 0; padding:0 0 4px; max-height:460px; overflow:auto;
  border-top:1px solid var(--line); overscroll-behavior:contain;
  box-shadow:inset 0 -16px 16px -18px rgba(22,35,58,.35)}
.dbsearch-results[hidden]{display:none}
.dbsearch-results li{border-bottom:1px solid var(--line)}
.dbsearch-results a{display:flex; gap:12px; align-items:baseline; padding:10px 2px; text-decoration:none;
  color:var(--ink-soft); min-height:44px}
.dbsearch-results a:hover, .dbsearch-results a:focus{background:#faf6ec}
.dbsearch-class{flex:none; width:122px; font-size:.76rem; color:var(--brass); letter-spacing:.05em; text-transform:uppercase}
.dbsearch-term{flex:1; color:var(--ink); font-size:.94rem}
.dbsearch-term mark{background:#f6e6bd; color:var(--ink); padding:0 1px}
.dbsearch-status{flex:none; font-size:.75rem; color:var(--muted)}

/* 45-class jump bar on every class page, folded by default */
.classjump{margin:0 0 1.25rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:4px 0}
.classjump>summary{display:flex; align-items:center; gap:9px; min-height:44px; cursor:pointer;
  font-size:.85rem; color:var(--ink-soft); list-style:none}
.classjump>summary::-webkit-details-marker{display:none}
.classjump>summary::before{content:"\25B8"; color:var(--brass); font-size:.9rem; line-height:1}
.classjump[open]>summary::before{content:"\25BE"}
.classjump>summary:hover{color:var(--ink)}
.classnav{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:.25rem 0 .75rem}
.classnav ul{display:flex; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0}
.classnav a{display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  font-size:.82rem; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line);
  border-radius:3px; background:var(--paper-raised)}
.classnav a:hover{background:var(--ink-soft); color:#fff; border-color:var(--ink-soft)}
.classnav a[aria-current]{background:var(--ink); color:#fff; border-color:var(--ink)}

/* the twin class page in the other database */
.crosslink{font-size:.9rem; color:var(--muted); background:#fbf7ee; border-left:3px solid var(--brass);
  padding:11px 15px; margin:0 0 1.25rem; border-radius:0 3px 3px 0}
.callout{border-left:3px solid var(--brass); background:#fbf7ee; padding:14px 18px; margin:1.25rem 0; border-radius:0 4px 4px 0}
.callout.warn{border-left-color:var(--danger); background:#fdf3f0}
.callout .clabel{font-weight:600; color:var(--ink); font-size:.9rem; margin-bottom:2px}
.callout p{color:var(--ink-soft); margin:0; font-size:.92rem}
.meta-line{font-size:.8rem; color:var(--muted); margin:0 0 1.5rem}

/* reference lists rendered from datasets */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:1rem 0 1.5rem; padding:0; list-style:none}
.chips li{border:1px solid var(--line); background:var(--paper-raised); border-radius:3px; padding:5px 10px; font-size:.85rem; color:var(--ink-soft)}
.ds-note{font-size:.85rem; color:var(--muted); margin:.75rem 0 0}

/* verbatim statutory / regulatory text — collapsed <details>, full text still
   present in the page HTML so it is crawlable and works without JavaScript */
.verbatim-list{margin:1.25rem 0}
.verbatim-item{border:1px solid var(--line); border-radius:4px; background:var(--paper-raised); margin-bottom:.5rem; overflow:hidden}
.verbatim-item>summary{list-style:none; cursor:pointer; padding:12px 16px; font-weight:600; color:var(--ink); display:flex; gap:10px; align-items:baseline}
.verbatim-item>summary::-webkit-details-marker{display:none}
.verbatim-item>summary::before{content:"+"; color:var(--brass); font-family:"Source Serif 4",serif; font-size:1.15rem; line-height:1; flex:none}
.verbatim-item[open]>summary::before{content:"−"}
.verbatim-item[open]>summary{border-bottom:1px solid var(--line)}
.verbatim-item .vsec{color:var(--brass); white-space:nowrap; font-family:"Source Serif 4",serif}
.verbatim{padding:14px 18px; border-top:1px solid var(--line)}
.verbatim p{color:var(--ink-soft); font-size:.9rem; max-width:none; margin:0 0 .9rem}
.verbatim p:last-child{margin-bottom:0}

/* tools */
.tool{background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; padding:28px}
.field{margin-bottom:16px}
.field label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
.field .hint{display:block; font-size:.78rem; color:var(--muted); margin-top:5px}
.field select, .field input, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:3px;
  font-size:.95rem; font-family:inherit; background:#fff; color:var(--ink);
}
.field textarea{min-height:76px; resize:vertical}
fieldset.field{border:1px solid var(--line); border-radius:3px; padding:10px 14px 4px}
fieldset.field legend{font-size:.85rem; color:var(--muted); padding:0 6px}
.check{display:flex; align-items:flex-start; gap:8px; font-size:.9rem; color:var(--ink-soft); margin-bottom:8px}
.check input{margin-top:4px}
button.calc{
  background:var(--ink); color:#fff; border:none; padding:12px 20px; border-radius:3px;
  font-size:.95rem; cursor:pointer; font-family:inherit; min-height:44px;
}
button.calc:hover{background:var(--ink-soft)}
button.calc.ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line)}
.result{margin-top:18px; padding:16px; border:1px solid var(--brass); border-radius:3px; background:#faf6ec}
.result[hidden]{display:none}
.result .num{font-family:"Source Serif 4",serif; font-size:1.8rem; color:var(--ink)}
.result .num.small{font-size:1.25rem}
.result ul{margin:.75rem 0 0; padding-left:1.1rem; font-size:.9rem; color:var(--ink-soft)}
.result li{margin-bottom:.25rem}
.result-actions{display:flex; gap:10px; margin:0 0 12px; flex-wrap:wrap}
.result-actions button{font:inherit; font-size:.82rem; padding:6px 12px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); border-radius:3px; cursor:pointer}
.result-actions button:hover{background:var(--ink-soft); color:#fff; border-color:var(--ink-soft)}
.result ul.names{list-style:none; padding:0; margin:.5rem 0 0}
.result ul.names li{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); margin:0}
.result ul.names li span{font-size:1rem; color:var(--ink); letter-spacing:.02em}
.result ul.names li button.copy{font:inherit; font-size:.78rem; padding:4px 10px; border:1px solid var(--line); background:var(--paper-raised); color:var(--muted); border-radius:3px; cursor:pointer; flex:none}
.result ul.names li button.copy:hover{background:var(--ink-soft); color:#fff; border-color:var(--ink-soft)}
.result .note{font-size:.8rem; color:var(--muted); margin:.75rem 0 0}
.tlist{margin:.75rem 0 0; padding:0; list-style:none; max-height:340px; overflow:auto; border-top:1px solid var(--line)}
.tlist li{padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.tlist .ttl{font-weight:600; color:var(--ink)}
.tlist .sub{color:var(--muted); font-size:.84rem}
.nojs-note{font-size:.85rem; color:var(--muted); margin:1rem 0 0}

.disclaimer{font-size:.8rem; color:var(--muted); border-top:1px dashed var(--line); padding-top:14px; margin-top:20px}

/* topic navigation within a page */
.pager{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.9rem}
.pager a{text-decoration:none; color:var(--ink-soft); display:inline-flex; align-items:center; min-height:44px; padding:0 4px}
.pager a:hover{text-decoration:underline}

footer.site{border-top:1px solid var(--line); padding:32px 0; margin-top:40px}
footer.site .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--muted)}
footer.site a{color:var(--muted)}
footer.site nav.foot{display:flex; flex-wrap:wrap; gap:14px}
footer.site nav.foot a{display:inline-flex; align-items:center; min-height:44px; padding:0 2px}
.footblock{width:100%; margin-bottom:10px}

.skiplink{position:absolute; left:-9999px}
.skiplink:focus{left:16px; top:8px; background:#fff; padding:12px 16px; border:1px solid var(--brass); z-index:20; min-height:44px; display:inline-flex; align-items:center}

@media (max-width:860px){
  header.site .wrap{flex-wrap:wrap; gap:10px 16px}
  .searchbox{flex:1 1 100%; order:3}
  .searchbox input{flex:1; width:auto}
}
@media (max-width:640px){
  .hero{padding:36px 0 32px}
  .section{padding:36px 0}
  .tool{padding:20px}
  th{white-space:normal}
  /* collapsed by default, but the links stay in the document */
  .nav-toggle-label{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:0 16px; margin-left:auto;
    border:1px solid var(--line); border-radius:3px; font-size:.9rem; color:var(--ink-soft);
  }
  nav.main{
    display:none; flex-direction:column; gap:0; width:100%; order:4;
    border-top:1px solid var(--line); padding-top:6px; margin-top:6px;
  }
  nav.main a{padding:12px 0; min-height:44px; display:flex; align-items:center; border-bottom:1px solid var(--line)}
  .nav-toggle:checked ~ nav.main{display:flex}
  .nav-toggle:focus-visible + .nav-toggle-label{outline:2px solid var(--brass); outline-offset:2px}
  .searchbox{order:3}
}