/* The Gridtop Beta Manual on the web (2026-10-11): autocomputing.host's slate, yellow and gold with the manual's
   lavenders; Afacad for reading, Jost for headings, JetBrains Mono for commands. Left panel: the contents. */
:root { --slate: #44465E; --slate-d: #2B2C3B; --ink: #1D070E; --yellow: #FFEC64; --gold: #AAA348; --lav: #857EB6; --lav-b: #A99FFC;
  --lav-l: #C8BFE7; --lav-w: #F1EFFA; --paper: #FFFFFF; --mist: #EEEEEE; --panel: 300px; }
* { box-sizing: border-box; }
/* The header is autocomputing.host's own (site-header.css), fixed at the top and --hh tall; the manual sits beneath it. */
:root { --hh: 66px; }
html { scroll-padding-top: calc(var(--hh) + 16px); }
body { padding-top: var(--hh); }
body { margin: 0; background: var(--mist); color: var(--ink); font: 400 18px/1.6 'Afacad', sans-serif; }
a { color: #5A4C8A; }
a:hover { color: var(--slate); }


.wrap { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; }
.toc { position: sticky; top: var(--hh); flex: 0 0 var(--panel); max-height: calc(100vh - var(--hh)); overflow-y: auto; padding: 18px 14px 40px 20px; font-size: 15px; line-height: 1.35; border-right: 1px solid #DCDCE4; background: #F6F6F8; }
.toc-find { width: 100%; margin-bottom: 12px; padding: 8px 10px; border: 1px solid #D0CFDB; border-radius: 3px; font: inherit; background: #fff; }
.toc-home { display: block; padding: 6px 8px; font-weight: 500; color: var(--slate); text-decoration: none; border-radius: 3px; }
.toc-part { margin: 16px 0 4px; padding: 0 8px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lav); }
.toc ol, .toc ul { list-style: none; margin: 0; padding: 0; }
.toc li > a { display: flex; gap: 8px; padding: 5px 8px; color: var(--slate); text-decoration: none; border-radius: 3px; }
.toc-no { flex: 0 0 22px; color: var(--lav); text-align: right; }
.toc a:hover, .toc-home:hover { background: var(--lav-w); }
.toc li.is-on > a, .toc-home.is-on { background: var(--slate); color: var(--yellow); }
.toc li.is-on > a .toc-no { color: var(--yellow); }
.toc ul { margin: 4px 0 8px 30px; border-left: 2px solid var(--lav-l); }
.toc ul a { display: block; padding: 3px 10px; font-size: 14px; color: #55576E; text-decoration: none; }
.toc ul a:hover { background: var(--lav-w); }
.toc li.is-hidden, .toc .toc-part.is-hidden { display: none; }

.doc { flex: 1 1 auto; min-width: 0; max-width: 860px; margin: 0 auto; padding: 22px 44px 60px; background: var(--paper); min-height: calc(100vh - var(--hh)); }
.crumbs { font-size: 14px; color: #77798E; margin-bottom: 10px; }
.crumbs a { color: #77798E; }
.doc h1 { display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px; font: 500 38px/1.2 'Jost', sans-serif; color: var(--slate); }
.ch-no { font-weight: 700; color: var(--lav-b); }
.doc h2 { margin: 38px 0 10px; padding-top: 12px; border-top: 1px solid #E4E2EE; font: 500 25px/1.3 'Jost', sans-serif; color: var(--slate); }
.sec-no { color: var(--lav); margin-right: 6px; }
.doc h3 { margin: 26px 0 8px; font: 500 20px/1.3 'Jost', sans-serif; color: var(--slate); }
.doc h4.proc { margin: 20px 0 6px; font-size: 18px; font-weight: 700; color: var(--slate); }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 26px; }
.doc li { margin-bottom: 5px; }
.lede { font-size: 20px; color: #3A3C50; }
code { font: 400 15px 'JetBrains Mono', Consolas, monospace; background: var(--lav-w); padding: 1px 5px; border-radius: 3px; }

.notice { margin: 18px 0; padding: 14px 18px; border-radius: 6px; background: linear-gradient(160deg, #8F87C4, #6F6398 55%, #5E4E7E); color: #F4F2EA; }
.notice-caution { background: linear-gradient(160deg, #C04848, #9E2626 55%, #7E1A1A); }
.notice-label { font-variant: small-caps; letter-spacing: 1px; font-weight: 700; margin-right: 6px; }
.notice b, .notice a { color: #fff; }
.notice code { background: rgba(29, 7, 14, .28); color: #F4F2EA; }

.table { overflow-x: auto; margin: 0 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; background: var(--slate); color: var(--yellow); font-weight: 500; padding: 8px 10px; }
td { padding: 7px 10px; border-bottom: 1px solid #E4E2EE; vertical-align: top; }
tr:nth-child(even) td { background: #FAFAFC; }

figure { margin: 22px 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(68,70,94,.25), 0 8px 22px -10px rgba(29,7,14,.35); }
figcaption { margin-top: 8px; font-size: 15px; color: #55576E; }

.pns { display: flex; justify-content: space-between; gap: 14px; margin: 46px 0 0; }
.pn { flex: 1 1 0; max-width: 48%; padding: 12px 16px; border: 1px solid #DCDCE4; border-radius: 4px; color: var(--slate); text-decoration: none; }
.pn span { display: block; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lav); }
.pn.next { text-align: right; }
.pn:hover { border-color: var(--gold); background: #FFFDF0; }
.foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid #E4E2EE; font-size: 14px; color: #77798E; }
.foot a { color: #77798E; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 8px; }
.card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid #DCDCE4; border-radius: 5px; color: var(--slate); text-decoration: none; background: #fff; }
.card:hover { border-color: var(--gold); box-shadow: 0 6px 16px -10px rgba(29,7,14,.4); }
.card-no { font: 700 22px/1 'Jost', sans-serif; color: var(--lav-b); }
.card-t { font-weight: 500; font-size: 18px; line-height: 1.3; }
.card-s { font-size: 14px; color: #77798E; line-height: 1.35; }

.glossary dt { margin-top: 16px; font-weight: 700; color: var(--slate); }
.glossary dd { margin: 2px 0 0; }

@media (max-width: 900px) {
  .toc { position: fixed; top: var(--hh); left: 0; bottom: 0; z-index: 15; width: min(320px, 88vw); max-height: none; transform: translateX(-102%); transition: transform .25s ease; box-shadow: 6px 0 20px rgba(0,0,0,.2); }
  body.toc-open .toc { transform: none; }
  .doc { padding: 18px 16px 50px; }
  .doc h1 { font-size: 30px; }
}
.toc-cta { display: none; }
@media (max-width: 560px) {
  .toc-cta { display: block; margin-bottom: 12px; padding: 9px 12px; border-radius: 3px; background: var(--yellow); color: var(--slate); font-weight: 500; text-align: center; text-decoration: none; }
}
@media print { header, .toc-strip, .toc, .pns { display: none; } body { padding-top: 0; } .doc { max-width: none; padding: 0; } }

/* The site's own cursors and scrollbars (2026-10-11, Matt), as on autocomputing.host and .ai. */
html, body { cursor: url('/sprites/cursor_default.ico'), auto; }
a, button, .card, .pn, summary, label { cursor: url('/sprites/cursor_point.ico'), pointer; }
input, textarea { cursor: url('/sprites/cursor_input.ico') 12 12, text; }
html { scrollbar-color: #44465E #C8BFE7; scrollbar-width: thin; }
.toc { scrollbar-color: #857EB6 #ECEAF4; scrollbar-width: thin; }
body::-webkit-scrollbar, .table::-webkit-scrollbar { width: 5px; height: 8px; background-color: #C8BFE7; }
body::-webkit-scrollbar-thumb, .table::-webkit-scrollbar-thumb { background: #44465E; }
.toc::-webkit-scrollbar { width: 5px; background-color: #ECEAF4; }
.toc::-webkit-scrollbar-thumb { background: #857EB6; }

/* On a phone the contents panel opens from a strip just under the header (the header itself is the site's, untouched). */
.toc-strip { display: none; position: sticky; top: var(--hh); z-index: 14; padding: 8px 16px; background: #F6F6F8; border-bottom: 1px solid #DCDCE4; }
.bar-toc { padding: 6px 14px; border: 1px solid var(--slate); border-radius: 3px; background: #fff; color: var(--slate); font: inherit; font-size: 15px; cursor: url('/sprites/cursor_point.ico'), pointer; }
@media (max-width: 900px) { .toc-strip { display: block; } }
/* While the phone panel is open, the page behind it dims; a tap there closes the panel (manual.js). */
@media (max-width: 900px) {
  body.toc-open::after { content: ""; position: fixed; inset: var(--hh) 0 0 0; z-index: 14; background: rgba(29, 7, 14, .35); }
}
.bar-back { margin-right: 8px; padding: 6px 12px; border: 1px solid var(--slate); border-radius: 3px; background: #fff; color: var(--slate); font: inherit; font-size: 15px; cursor: url('/sprites/cursor_point.ico'), pointer; }