/*
 * docs.artorias.com: the docs layout on top of /shared/site.css (artorias.com's tokens and kit).
 * This file adds only what a user guide needs and the site has no twin for: the docs grid with a left
 * table of contents, the phone contents sheet, figures, steps, key caps and the CRITICAL pill.
 * Every colour, radius, face and size comes from site.css tokens and the type scale.
 */

/* ---------- the docs grid: contents left, the article right ---------- */
.docs{padding-bottom:var(--section-y)}
.docs-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 64px;align-items:start}
.docs-article{min-width:0;max-width:992px}

/* ---------- left table of contents (desktop) ---------- */
.docs-nav{position:sticky;top:var(--nav-h);max-height:calc(100vh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;padding:var(--section-y-tight) 0 48px;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.docs-nav-label{margin:0 0 12px;font-size:12px;font-weight:500;line-height:1.5;color:var(--muted)}
.docs-nav ol{margin:0;padding:0;list-style:none}
.docs-nav > ol > li + li{margin-top:2px}
.docs-nav a{position:relative;display:flex;align-items:center;min-height:36px;padding:6px 0 6px 16px;font-size:16px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .15s}
.docs-nav a:hover{color:var(--text)}
.docs-nav a[aria-current="page"]{color:var(--text)}
/* The active page carries the site's 1px accent bar, as Backstage's section index does. */
.docs-nav a[aria-current="page"]::before{content:"";position:absolute;top:8px;bottom:8px;left:0;width:1px;background:var(--accent)}
.docs-nav .sections{margin:2px 0 10px;padding-left:16px;border-left:1px solid var(--rule)}
.docs-nav .sections a{min-height:32px;padding:5px 0 5px 12px;font-size:14px;color:var(--dim)}
.docs-nav .sections a:hover,.docs-nav .sections a[aria-current="true"]{color:var(--text)}
.docs-nav-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--rule)}
.docs-nav-foot a{font-size:14px;color:var(--dim)}

/* ---------- phone and tablet: a Contents bar under the nav, opening a sheet ---------- */
.docs-bar{display:none}
.docs-sheet{display:none}
@media (max-width:1023px){
  .docs-grid{grid-template-columns:minmax(0,1fr)}
  .docs-article{max-width:none}
  /* Without script the contents stay in the page, above the article. */
  .docs-nav{position:static;max-height:none;overflow:visible;padding:24px 0;border-bottom:1px solid var(--rule)}
  .js .docs-grid > .docs-nav{display:none}
  .js .docs-bar{position:sticky;top:var(--nav-h);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);border-bottom:1px solid var(--rule);background:var(--bg)}
  .docs-bar-title{min-width:0;overflow:hidden;font-size:14px;line-height:1.4;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
  .docs-bar .btn{flex:none}
  .js .docs-sheet[open]{display:flex}
}
/* The sheet is a modal <dialog>: the browser traps focus, Escape closes it and the page behind is inert. */
.docs-sheet{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;flex-direction:column;border:0;background:var(--bg);color:var(--text)}
.docs-sheet::backdrop{background:var(--scrim)}
.docs-sheet-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h);padding:0 var(--gutter);border-bottom:1px solid var(--rule)}
.docs-sheet-title{margin:0;font-family:var(--display);font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.docs-sheet-close{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--rule-strong);border-radius:var(--r);background:none;color:var(--text);cursor:pointer}
.docs-sheet-close::after{content:"";position:absolute;inset:-6px}
.docs-sheet .docs-nav{position:static;flex:1;max-height:none;padding:16px var(--gutter) calc(32px + env(safe-area-inset-bottom));border:0;overflow-y:auto}
.docs-sheet .docs-nav a{min-height:48px;font-size:var(--t-20)}
.docs-sheet .docs-nav .sections a{min-height:44px;font-size:16px}
.docs-sheet .docs-nav a[aria-current="page"]::before{top:12px;bottom:12px}
@media (prefers-reduced-motion:no-preference){.docs-sheet[open]{animation:drop .18s ease-out}}

/* ---------- the page head: the site's document hero, inside the article ---------- */
.docs .doc-hero{padding:var(--section-y-tight) 0 40px}
.docs .doc-hero .eyebrow{margin-bottom:20px}
.docs .doc-hero .lead{margin-top:24px;max-width:var(--readw);font-size:var(--t-20);line-height:var(--lh-20);color:var(--muted)}
.docs .doc-hero .rev{margin-top:20px}

/* ---------- prose: the site's .legal document type, with 32px section heads and the reading measure ---------- */
.docs-prose{padding:0}
.docs-prose > section{padding-top:8px}
.docs-prose h2{margin:56px 0 20px;padding-top:28px;font-size:var(--t-32);font-weight:var(--w-32);line-height:var(--lh-32);letter-spacing:var(--ls-32);scroll-margin-top:calc(var(--nav-h) + 24px)}
.docs-prose > section:first-child h2{margin-top:40px;padding-top:0;border-top:0}
@media (max-width:640px){.docs-prose h2{margin-top:40px;padding-top:24px}.docs-prose > section:first-child h2{margin-top:32px}}
.docs-prose h3{max-width:var(--readw);scroll-margin-top:calc(var(--nav-h) + 24px)}
.docs-prose p,.docs-prose ul,.docs-prose ol,.docs-prose .spec,.docs-prose .faq,.docs-prose .glass{max-width:var(--readw)}
.docs-prose p strong,.docs-prose li strong,.docs-prose dd strong{font-weight:500}
.docs-prose a:not(.card):not(.btn){color:var(--text);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.docs-prose a:not(.card):not(.btn):hover{text-decoration-color:var(--text)}
.docs-prose .spec{margin:8px 0 24px}
.docs-prose .spec-row{padding:16px 0}
.docs-prose .spec-row dt{font-weight:500}
.docs-prose .spec-row dd{font-size:16px;line-height:1.6}
@media (max-width:1023px){.js .docs-prose h2,.js .docs-prose h3{scroll-margin-top:calc(var(--nav-h) + 52px + 24px)}}
@media (max-width:1023px){html.js{scroll-padding-top:calc(var(--nav-h) + 52px + 16px)}}

/* Numbered steps: the site's mono numerals on hairlines. */
.docs-prose ol.steps{margin:8px 0 24px;padding:0;list-style:none;counter-reset:step}
.docs-prose ol.steps > li{position:relative;margin:0;padding:14px 0 14px 40px;border-top:1px solid var(--rule);counter-increment:step}
.docs-prose ol.steps > li:last-child{border-bottom:1px solid var(--rule)}
.docs-prose ol.steps > li::before{content:counter(step,decimal-leading-zero);position:absolute;top:17px;left:0;font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.04em;color:var(--dim)}

/* Rules that always hold: a ruled list. */
.docs-prose ul.checks{margin:8px 0 24px;padding:0;list-style:none}
.docs-prose ul.checks > li{margin:0;padding:14px 0;border-top:1px solid var(--rule)}
.docs-prose ul.checks > li:last-child{border-bottom:1px solid var(--rule)}

/* A short list in two columns. */
.docs-prose ul.cols{columns:2;column-gap:40px}
.docs-prose ul.cols li{break-inside:avoid}
@media (max-width:560px){.docs-prose ul.cols{columns:1}}

/* Callouts: the site's glass pane. */
.docs-prose .glass{margin:24px 0;padding:20px 24px}
.docs-prose .glass p{margin:0;color:var(--text-2)}
.docs-prose .glass p + p{margin-top:12px}

/* Key caps. */
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border:1px solid var(--rule-strong);border-radius:var(--r-sm);background:var(--raised);font-family:var(--mono);font-size:12px;font-weight:400;line-height:1;letter-spacing:0;color:var(--text);vertical-align:1px;white-space:nowrap}

/* Tables: the site's .tbl, scrolling sideways on a phone rather than squeezing. */
.table-wrap{max-width:100%;margin:8px 0 24px;overflow-x:auto}
.table-wrap table.tbl{margin:0;min-width:520px}
.docs-prose table.tbl th[scope="row"]{color:var(--text);font-weight:400}
.docs-prose table.tbl td{color:var(--muted)}
.docs-prose table.tbl caption{padding:0 0 8px;font-size:12px;font-weight:500;line-height:1.5;color:var(--muted);text-align:left;caption-side:top}
table.tbl.keys{min-width:0}
table.tbl.keys td{width:1%;text-align:right;white-space:nowrap}
.table-wrap + .table-wrap{margin-top:24px}

/* ---------- figures: wider than the text, a hairline frame, a dated caption ---------- */
.fig{margin:32px 0 36px}
.fig a{display:block;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:#000;transition:border-color .2s}
.fig a:hover{border-color:var(--rule-strong)}
.fig a:focus-visible{outline-offset:3px}
.fig img{width:100%;height:auto}
.fig figcaption{margin-top:12px;max-width:var(--readw);font-size:12px;line-height:1.5;color:var(--dim)}
.fig-crop{max-width:760px}
.fig-row{display:flex;flex-wrap:wrap;gap:24px;margin:32px 0 36px}
.fig-row .fig{margin:0}
.fig-phone{flex:0 1 260px;min-width:0}
.fig-phone a{border-radius:28px}
.fig-single{max-width:260px}
@media (max-width:560px){.fig-row{gap:12px}.fig-phone{flex:1 1 0}.fig-phone a{border-radius:20px}}

/* ---------- guide index cards (the home page): the site's glass pane as a link ---------- */
.docs-prose ul.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:none;margin:8px 0 24px;padding:0;list-style:none}
.docs-prose ul.cards li{margin:0}
a.card{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 24px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--glass);color:var(--text);text-decoration:none;transition:border-color .2s}
a.card:hover{border-color:var(--rule-strong)}
.card-title{font-family:var(--display);font-size:var(--t-20);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.card-desc{font-size:16px;line-height:1.55;color:var(--muted)}
@media (max-width:640px){.docs-prose ul.cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- previous and next ---------- */
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:var(--readw);margin-top:72px;padding-top:24px;border-top:1px solid var(--rule)}
.pager a{display:flex;flex-direction:column;gap:4px;min-height:44px;color:var(--text);text-decoration:none}
.pager a:hover .pager-title{text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:4px}
.pager .next{grid-column:2;align-items:flex-end;text-align:right}
.pager-label{font-size:12px;font-weight:500;line-height:1.5;color:var(--muted)}
.pager-title{font-family:var(--display);font-size:var(--t-20);font-weight:500;line-height:1.3;letter-spacing:-.01em}

/* ---------- print: the site's rules, plus no contents and no pager ---------- */
@media print{
  .docs-nav,.docs-bar,.docs-sheet,.pager{display:none !important}
  .docs-grid{display:block}
  .docs-article{max-width:none}
  .docs-prose h2{color:#000;border-top:1px solid #999;break-after:avoid}
  .fig{break-inside:avoid}
  .fig a{border-color:#999}
  kbd{background:none;border-color:#999;color:#000}
  .impact{background:none !important;border-color:#000 !important;color:#000 !important}
  a.card,.docs-prose .glass{background:none;border-color:#999}
  .card-title,.card-desc,.pager-title{color:#000}
}

/* No <dialog> support: the contents stay in the page. */
html.no-sheet .docs-grid > .docs-nav{display:block}

/* Tables on a phone: each row becomes a labelled card (the site's legal tables do the same). */
.docs-prose .table-wrap{max-width:880px}
.docs-prose .table-wrap:has(table.keys){max-width:var(--readw)}
@media (max-width:560px){
  .table-wrap table.tbl.stack{min-width:0;border:0;border-radius:0}
  .tbl.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl.stack tbody,.tbl.stack tr,.tbl.stack th,.tbl.stack td{display:block;width:100%}
  .tbl.stack tr{margin-bottom:12px;padding:6px 0;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
  .docs-prose .tbl.stack th,.docs-prose .tbl.stack td{padding:8px 16px;border:0}
  .tbl.stack [data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
}