/* 908 Technical Reference. Property of Kimble LTD. */
:root{
  --paper:#FBFAF6; --ink:#191813; --ink-2:#55534A;
  --rule:#CFCCC0; --rule-strong:#1B1A15; --yellow:#F3E7A0; --yellow-line:#D8C24E;
  --code-ink:#2A2822; --topbar-h:60px;
  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:ui-monospace,"SF Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1B1A18; --ink:#E9E6DB; --ink-2:#9A968A;
    --rule:#3A382F; --rule-strong:#C9C6BA; --yellow:#5A5122; --yellow-line:#C9A83A;
    --code-ink:#EBE7D8;
  }
}
:root[data-theme="light"]{
  --paper:#FBFAF6; --ink:#191813; --ink-2:#55534A;
  --rule:#CFCCC0; --rule-strong:#1B1A15; --yellow:#F3E7A0; --yellow-line:#D8C24E; --code-ink:#2A2822;
}
:root[data-theme="dark"]{
  --paper:#1B1A18; --ink:#E9E6DB; --ink-2:#9A968A;
  --rule:#3A382F; --rule-strong:#C9C6BA; --yellow:#5A5122; --yellow-line:#C9A83A; --code-ink:#EBE7D8;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}

/* registration crosshairs at the viewport corners */
.reg-frame span{position:fixed;width:13px;height:13px;pointer-events:none;z-index:40;opacity:.45;
  background:
    linear-gradient(var(--rule-strong),var(--rule-strong)) center/1px 100% no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) center/100% 1px no-repeat}
.reg-frame .tl{top:7px;left:7px}.reg-frame .tr{top:7px;right:7px}
.reg-frame .bl{bottom:7px;left:7px}.reg-frame .br{bottom:7px;right:7px}

/* ---- topbar / masthead ---- */
.topbar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:12px clamp(16px,3vw,34px);border-bottom:2px solid var(--rule-strong)}
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}
.brand-908{font-weight:700;font-size:33px;letter-spacing:-.03em;line-height:.88}
.brand-lock{display:flex;flex-direction:column;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--ink-2);
  border-left:1px solid var(--rule);padding-left:13px}
.topnav{display:flex;gap:22px;align-items:center}
.topnav a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:3px 0}
.topnav a:hover{color:var(--ink)}
.topnav a.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--yellow-line)}
.update{margin-left:auto;text-align:right;font-family:var(--mono);font-size:10.5px;line-height:1.35}
.update-label{display:block;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.update-date{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- layout: optional sidebar + content ---- */
.layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr)}
.layout:has(.sidebar){grid-template-columns:272px minmax(0,1fr)}
.sidebar{border-right:1px solid var(--rule);padding:22px clamp(12px,1.4vw,20px);
  position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto}
.content{padding:26px clamp(16px,3vw,40px) 64px;min-width:0}

@media(max-width:820px){
  .layout:has(.sidebar){grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--rule)}
}

/* ---- sidebar tree ---- */
.tree{display:flex;flex-direction:column;gap:1px}
.tree-root{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:4px 0}
.tree-root:hover,.tree-root.active{color:var(--ink)}
.tree-cat{margin-top:9px}
.tree-cat-link{display:block;text-decoration:none;color:var(--ink);font-weight:600;padding:4px 0}
.tree-cat-link:hover{background:var(--yellow)}
.tree-cat-link.active{box-shadow:inset 2px 0 0 var(--yellow-line);padding-left:8px}
.tree-no{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-right:8px}
.tree-pages{display:flex;flex-direction:column;border-left:1px solid var(--rule);margin:2px 0 2px 4px;padding-left:11px}
.tree-page{text-decoration:none;color:var(--ink-2);padding:3px 0;font-size:13px}
.tree-page:hover{color:var(--ink);background:var(--yellow)}
.tree-page.active{color:var(--ink);font-weight:600}
.tree-sep{height:1px;background:var(--rule);margin:16px 0}

/* ---- shared bits ---- */
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.label.muted{opacity:.7}
a.ilink{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--yellow-line);text-decoration-thickness:2px}
a.ilink:hover{background:var(--yellow)}
.empty{color:var(--ink-2);font-size:14px;margin-top:22px;max-width:64ch}

.page-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--rule-strong);margin-bottom:24px}
.page-head h1{margin:0;font-size:26px;letter-spacing:-.01em}
.page-no{font-family:var(--mono);color:var(--ink-2);font-weight:400;margin-right:12px}

/* ---- home ---- */
.lede{max-width:70ch;margin-bottom:26px}
.home-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:12px;margin-bottom:0}
.home-foot{margin-top:20px}

/* ---- category grid (blocks on paper) ---- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cat{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:162px;
  padding:16px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);background:var(--paper)}
.cat:hover{background:var(--yellow)}
.cat-no{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.cat:hover .cat-no,.cat:hover .cat-meta{color:var(--code-ink)}
.cat-body{display:flex;flex-direction:column;gap:5px}
.cat-title{font-size:21px;font-weight:700;letter-spacing:-.01em}
.cat-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* ---- page list (docs pages within a category) ---- */
.page-list{list-style:none;padding:0;margin:6px 0 0;border-top:1px solid var(--rule)}
.page-list li{border-bottom:1px solid var(--rule)}
.page-list a{display:block;padding:14px 4px;text-decoration:none;color:var(--ink)}
.page-list a:hover{background:var(--yellow)}
.pl-title{font-weight:600}
.pl-desc{display:block;color:var(--ink-2);font-size:13.5px;margin-top:2px}

/* ---- field notes ---- */
.note-list{list-style:none;padding:0;margin:6px 0 0;border-top:1px solid var(--rule)}
.note-list li{padding:15px 4px;border-bottom:1px solid var(--rule)}
.note-list a{text-decoration:none;color:var(--ink);display:flex;gap:16px;align-items:baseline}
.note-list a:hover .nl-title{background:var(--yellow)}
.nl-date{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:92px}
.nl-title{font-weight:600;font-size:16px}
.nl-desc{color:var(--ink-2);font-size:13.5px;margin:4px 0 0 108px}

/* ---- long-form document content ---- */
.doc-content{max-width:74ch}
.doc-content > :first-child{margin-top:0}
.doc-content p{margin:0 0 13px;max-width:70ch}
.doc-content h2{font-size:15px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  margin:28px 0 11px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.doc-content h3{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:20px 0 8px}
.doc-content ul,.doc-content ol{margin:0 0 13px;padding-left:20px;max-width:70ch}
.doc-content li{margin:4px 0}
.doc-content a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--yellow-line);text-decoration-thickness:2px}
.doc-content a:hover{background:var(--yellow)}
.doc-content blockquote{border-left:2px solid var(--yellow-line);margin:14px 0;padding:2px 14px;color:var(--ink-2)}
.doc-content hr{height:1px;background:var(--rule);border:0;margin:24px 0}

/* code */
code{font-family:var(--mono);font-size:.86em;background:var(--yellow);color:var(--code-ink);
  padding:.06em .32em;border:1px solid var(--yellow-line);border-radius:2px}
pre{margin:14px 0;background:var(--yellow);border:1px solid var(--yellow-line);padding:14px 16px;
  overflow-x:auto;color:var(--code-ink);font-family:var(--mono);font-size:12.5px;line-height:1.55}
pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}

/* tables + figures (utility classes for hand-written docs) */
.tcap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0}
th,td{border:1px solid var(--rule);padding:7px 10px;text-align:left}
th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:400}
td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
td.sym{font-family:var(--mono)}
figure.fig{margin:14px 0;border:1px solid var(--rule-strong)}
figure.fig .frame{padding:16px}
.memrow{display:grid;grid-template-columns:96px 1fr;border:1px solid var(--rule);border-bottom:0;font-family:var(--mono);font-size:12px}
.memrow:last-of-type{border-bottom:1px solid var(--rule)}
.memrow .addr{padding:8px 10px;border-right:1px solid var(--rule);color:var(--ink-2);font-variant-numeric:tabular-nums}
.memrow .reg-name{padding:8px 10px}
.memrow.hot .reg-name{background:var(--yellow);color:var(--code-ink)}
figure.fig figcaption{border-top:1px solid var(--rule-strong);padding:8px 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* ---- colophon ---- */
.colophon{border-top:2px solid var(--rule-strong);padding:18px clamp(16px,3vw,34px);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.colophon a{color:var(--ink-2)}
.colophon a:hover{color:var(--ink)}
