/* Chorium docs — layout and typography for /docs pages.
   Loaded after /styles.css, which supplies the tokens, nav, footer, and buttons. */

/* Reading column */
.doc{max-width:820px;margin:0 auto;padding:30px 22px 64px}
.doc-index{max-width:1000px}

/* Breadcrumb */
.crumb{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 8px;opacity:.6}

/* Headings + prose */
.doc h1{font-size:clamp(30px,4.5vw,44px);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:6px 0 12px}
.doc .lead{font-size:18px;color:var(--ink2);margin:0 0 30px;max-width:60ch}
.doc h2{font-size:clamp(21px,2.6vw,26px);letter-spacing:-.015em;font-weight:800;margin:44px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.doc h3{font-size:17.5px;font-weight:800;margin:26px 0 8px}
.doc p{margin:0 0 16px;color:var(--ink2);font-size:16px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px;color:var(--ink2);font-size:16px}
.doc li{margin:0 0 8px}
.doc li strong,.doc p strong{color:var(--ink);font-weight:700}
.doc a{color:var(--blue-deep);text-decoration:none;border-bottom:1px solid rgba(75,123,236,.35)}
.doc a:hover{border-bottom-color:var(--blue-deep)}
.doc code{font-family:var(--mono);font-size:.88em;background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)}

/* Numbered step list — friendlier than a bare <ol> for walkthroughs */
.steps{list-style:none;counter-reset:step;padding:0;margin:0 0 20px}
.steps>li{counter-increment:step;position:relative;padding:0 0 4px 44px;margin:0 0 16px;min-height:30px}
.steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:var(--ink)}
.steps>li strong{display:block;color:var(--ink);margin-bottom:2px}

/* Screenshot frame */
figure.shot-fig{margin:22px 0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
figure.shot-fig img{width:100%;display:block}
figure.shot-fig figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line)}

/* Callout / note */
.callout{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;padding:16px 18px;margin:22px 0;font-size:15px;color:var(--ink2)}
.callout b{color:var(--ink)}

/* Keyboard keys + shortcuts table */
.kbd{font-family:var(--mono);font-size:12.5px;background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;padding:2px 7px;color:var(--ink);white-space:nowrap}
table.keys{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:15px}
table.keys caption{text-align:left;font-weight:800;color:var(--ink);padding:14px 0 8px}
table.keys th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:6px 10px;border-bottom:1px solid var(--line)}
table.keys td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
table.keys td:last-child{white-space:nowrap;text-align:right}

/* Docs index — category cards */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr}}
.cat-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;transition:transform .15s,border-color .15s}
.cat-card:hover{transform:translateY(-2px);border-color:#d7d2c6}
.cat-card .num{font-family:var(--mono);font-size:12px;color:var(--muted)}
.cat-card h3{margin:8px 0 6px;font-size:18px;font-weight:800;color:var(--ink)}
.cat-card p{margin:0;color:var(--muted);font-size:14.5px}

/* Prev / next */
.doc-nav{display:flex;gap:14px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.doc-nav a{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;transition:border-color .15s}
.doc-nav a:hover{border-color:#d7d2c6}
.doc-nav .dir{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.doc-nav .ttl{font-weight:800;color:var(--ink);margin-top:3px}
.doc-nav a.next{text-align:right}
@media(max-width:560px){.doc-nav{flex-direction:column}}