/* [ai] The Atlas shell: everything every page shares — the ground, the top bar, the sidebar (the one navigation: a rail
   from 1100 px, a drawer below), the page frame, and the primitives (buttons, cards, grids, pills, chips) that pages and
   the player's overlays both build from. Tokens only (tokens.css). Page-specific rules live in pages.css / doc.css. */
* { box-sizing: border-box; }
html { overscroll-behavior-y: none; scroll-behavior: smooth; scroll-padding-top: calc(var(--at-bar-h) + 20px); --at-side-w: 240px; --at-bar-h: 53px; }   /* the rail width (the grip changes it, ±20 % of 240) and the bar's measured height (it wraps to two rows on a phone) */
body.ds-page { margin: 0; background: var(--ds-bg); color: var(--ds-fg); font: 16px/1.5 var(--ds-font); -webkit-font-smoothing: antialiased; padding: var(--at-bar-h) 20px calc(env(safe-area-inset-bottom) + var(--at-dock-b, 0px)); }   /* the page starts under the fixed bar and ends above the Astra pill (--at-dock-b: astra.css) */
[hidden] { display: none !important; }   /* wins over any display: on the class (the drop veil, the drawer) — every page, not only the player's */
:focus-visible { outline: 2px solid var(--ds-fg); outline-offset: 2px; }
main a:not([class]) { color: var(--ds-accent); }   /* unclassed prose links by tokens, never the browser blue */

/* ---- top bar: [☰ · Astranote] · breadcrumb · (page actions) · Continue · Astra AI · ⚙ — one row everywhere, fixed: the page rubber-bands under it, never the bar.
   ☰ and the brand sit in a left slot exactly as wide as the rail (above the sidebar they toggle); the crumb starts at the content column; actions at the far right. */
.at-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 0 20px; padding-top: env(safe-area-inset-top); background: var(--ds-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ds-line); }
.at-inject { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 0 20px; box-sizing: border-box; padding-top: env(safe-area-inset-top); background: var(--ds-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ds-line); font: 16px/1.5 var(--ds-font); color: var(--ds-fg); }   /* the bar on a static .html doc with no body padding of its own */
.at-inject .at-bar { position: static; margin: 0; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.at-bar-in { min-height: 52px; display: flex; align-items: center; gap: 12px; font-size: 14px; } .at-bar-l { display: flex; align-items: center; gap: 12px; flex: none; }
.at-brand, .at-side-brand { font: italic 24px/1 var(--ds-serif); color: var(--ds-fg); text-decoration: none; letter-spacing: -.01em; }
.at-crumb, .at-stat { color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .at-crumb:not(:empty)::before { content: "/"; margin-right: 12px; color: var(--ds-line2); }
.at-sp { flex: 1; }
/* [ai] The player lives in the bar (2026-09-13): centred on the viewport when wide (the crumb yields), its own centred row under the nav row when tight. */
.at-bar-in { position: relative; } html.ds-player-open .at-bar-in { flex-wrap: wrap; min-height: 54px; }   /* two player rows fit; ≥ 1100 the player is absolute so the bar must grow itself */
.at-player-host { display: contents; }
html.ds-player-open .ds-resume { display: none; }
@media (min-width: 1100px) { .at-player { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, 100vw - 500px); } html.ds-player-open .at-crumb { visibility: hidden; } }
@media (max-width: 1099px) { .at-player { flex-basis: 100%; order: 9; margin: 0 auto; width: min(600px, 100%); } }
.at-side-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--ds-radius-ctl); border: 0; background: transparent; color: var(--ds-muted); cursor: pointer; flex: none; }
.at-side-btn:hover, html.at-side-open .at-side-btn { color: var(--ds-fg); background: var(--ds-soft); }
.at-gear { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: var(--ds-muted); flex: none; transition: background .15s, color .15s, transform .4s var(--ds-ease); } .at-gear:hover { background: var(--ds-soft); color: var(--ds-fg); transform: rotate(30deg); } .at-gear.on { color: var(--ds-fg); background: var(--ds-soft); }
.at-ai { text-decoration: none; padding: 5px 14px 6px 11px; gap: 7px; min-height: 34px; flex: none; font: italic 17px/1 var(--ds-serif); letter-spacing: .01em; } .at-ai svg { margin-top: -1px; } .at-ai:hover { opacity: .88; } .at-ai[aria-current] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-fg) 18%, transparent); }
@media (max-width: 1099px) { .at-stat { display: none; } #copy { padding: 8px 10px; } #copy span { display: none; } }   /* a tablet or phone: the word count goes, Copy is the icon, so the crumb keeps its words beside the Continue pill */
@media (max-width: 640px) { .at-bar-in { gap: 8px; } }

/* ---- buttons, pills, chips (pages and the player's overlays share these) */
.at-btn { font: 600 13px var(--ds-font); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ds-line2); background: var(--ds-card); color: var(--ds-fg); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; transition: border-color .15s, background .15s, opacity .15s; }
.at-btn:hover { border-color: var(--ds-fg); } .at-btn.ok { background: var(--ds-fg); border-color: var(--ds-fg); color: var(--ds-bg); } .at-btn:disabled { opacity: .45; cursor: default; } .at-btn-sm { padding: 4px 10px; font-size: 12px; }
.at-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--ds-font); padding: 5px 11px; border-radius: 999px; background: var(--ds-soft); color: var(--ds-muted); text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.at-pill.ok, .at-pill-ok { background: var(--ds-fg); color: var(--ds-bg); } .at-pill-ok:hover { opacity: .85; }
.at-pill.err, .at-pill-bad { background: var(--ds-danger-soft); color: var(--ds-danger); } .at-pill.warn, .at-pill-busy { background: var(--ds-warn-soft); color: var(--ds-fg); }
.at-pill-busy::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; animation: at-pulse 1.2s ease-in-out infinite; }
@keyframes at-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.at-chips { display: flex; flex-wrap: wrap; gap: 6px; } .at-chip { font: 600 11px var(--ds-font); padding: 3px 9px; border-radius: 999px; background: var(--ds-soft); color: var(--ds-fg); }

/* ---- page frame: eyebrow · h1 · sections. .at-page = the reading measure, .at-wide = the dashboard width */
.at-page { max-width: 780px; margin: 0 auto; padding: 36px 0 120px; } .at-page.at-wide { max-width: 1000px; }
.at-page h1 { font: 600 36px/1.08 var(--ds-font); letter-spacing: -.01em; margin: 0 0 22px; text-wrap: balance; }
.at-eyebrow { font: 600 12px var(--ds-font); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-muted); margin: 0 0 8px; } .at-eyebrow a { color: inherit; text-decoration: none; } .at-eyebrow a:hover { text-decoration: underline; }
.at-page h2, .at-sec h2 { font: 600 12px var(--ds-font); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-muted); margin: 30px 0 10px; display: flex; align-items: baseline; gap: 10px; } .at-n { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; }
.at-sub { font-size: 12px; color: var(--ds-muted); } .at-hint { display: block; color: var(--ds-muted); font-size: 13px; margin: 0 0 8px; } .at-more { font-weight: 600; color: var(--ds-fg); text-decoration: none; font-size: 14px; }
.at-warn { padding: 10px 14px; border-radius: var(--ds-radius-ctl); background: var(--ds-warn-soft); font-size: 14px; } .at-err { color: var(--ds-danger); background: var(--ds-danger-soft); padding: 10px 14px; border-radius: var(--ds-radius-ctl); }
.at-recent { margin: 0 0 24px; padding-left: 20px; font-size: 14px; line-height: 1.9; color: var(--ds-muted); } .at-recent a { color: var(--ds-fg); text-decoration: none; font-weight: 500; }
.at-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: .92rem; }
@media (max-width: 640px) { .at-page h1 { font-size: 34px; } .at-page { padding-top: 24px; } }

/* ---- cards & grids */
.at-card { padding: 20px 22px; border-radius: var(--ds-radius-card); background: var(--ds-card); border: 1px solid var(--ds-line); min-width: 0; }
.at-card > .at-eyebrow { margin-bottom: 10px; } .at-card p { margin: 0 0 12px; } .at-card > p:last-child { margin-bottom: 0; }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.at-link { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-decoration: none; color: inherit; transition: transform .15s var(--ds-ease), border-color .15s; } .at-link:hover { transform: translateY(-1px); border-color: var(--ds-line2); }
.at-card-e { font-size: 22px; line-height: 1; margin-bottom: 6px; } .at-card-t { font-weight: 600; font-size: 15.5px; line-height: 1.3; } .at-card-s { color: var(--ds-muted); font-size: 13px; }

/* ---- sidebar: <atlas-tree> in an aside. A rail beside the page from 1100 px (open by default, remembered, --at-side-w wide with a grip on its border), a drawer over it below. */
.at-side { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); z-index: 2147483100;   /* above the player layer (#ds-layer 2147483000): the drawer covers the browser card and the transcript panel */ background: var(--ds-panel); border-right: 1px solid var(--ds-line); overflow: auto; overscroll-behavior: contain; padding: 0 12px; font-size: 14px; display: flex; flex-direction: column; }   /* no bottom padding: the sticky foot sits on the scrollport edge */
.at-side-bg { position: fixed; inset: 0; z-index: 2147483090; background: rgba(0, 0, 0, .28); }
.at-side-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: calc(52px + env(safe-area-inset-top)); margin: 0 -12px 8px; padding: env(safe-area-inset-top) 12px 0 16px; background: var(--ds-panel); border-bottom: 1px solid var(--ds-line); flex: none; }   /* the drawer reaches under the status bar in the web clip: its head owns that inset */
.at-side-x { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; }
atlas-tree { display: block; flex: 1; } atlas-tree details { margin: 0 0 10px; } atlas-tree summary { list-style: none; cursor: pointer; } atlas-tree summary::-webkit-details-marker { display: none; }
.at-tree-h { font: 600 11px var(--ds-font); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-muted); padding: 8px 6px 4px; display: flex; align-items: center; gap: 6px; } .at-tree-h a { color: inherit; text-decoration: none; } .at-tree-h::after { content: "▾"; margin-left: auto; font-size: 10px; opacity: .6; } details:not([open]) > .at-tree-h::after { content: "▸"; }
.at-tree-g { font: 600 11px var(--ds-font); color: var(--ds-muted); padding: 8px 8px 2px; opacity: .8; }
.at-tree-a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; border-radius: var(--ds-radius-ctl); color: var(--ds-fg); text-decoration: none; }
.at-tree-a:hover { background: var(--ds-soft); } .at-tree-a.on { background: var(--ds-fg); color: var(--ds-bg); }
.at-tree-e { width: 20px; text-align: center; flex: none; } .at-tree-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .at-tree-n { font-size: 12px; color: var(--ds-muted); font-variant-numeric: tabular-nums; } .at-tree-a.on .at-tree-n { color: inherit; opacity: .7; }
.at-tree-sep { height: 1px; margin: 6px 8px; background: var(--ds-line); } .at-tree-vault { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.at-tree-done { color: var(--ds-ok); font-size: 12px; } .at-tree-a.on .at-tree-done { color: inherit; }
.at-tree-body details { margin: 0 0 0 12px; } .at-tree-body details > summary .at-tree-t::before { content: "▸ "; color: var(--ds-muted); } .at-tree-body details[open] > summary .at-tree-t::before { content: "▾ "; }
.at-tree-toc { margin: 2px 0 6px 28px; border-left: 1px solid var(--ds-line2); } .at-tree-toc a { display: block; padding: 4px 10px; font-size: 13px; color: var(--ds-muted); text-decoration: none; } .at-tree-toc a:hover { color: var(--ds-fg); }
.at-tree-busy { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-accent); animation: at-pulse 1.4s ease-in-out infinite; }
.at-side-foot { position: sticky; bottom: 0; margin: auto -12px 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--ds-panel); border-top: 1px solid var(--ds-line); } .at-side-import { width: 100%; justify-content: center; gap: 8px; }
.at-side-grip { display: none; position: fixed; top: var(--at-bar-h); bottom: 0; left: calc(var(--at-side-w) - 4px); width: 9px; z-index: 9; cursor: col-resize; touch-action: none; }   /* on the rail's border; the pill shows on hover and while dragging */
.at-side-grip::after { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--ds-fg); opacity: 0; transition: opacity .15s; }
.at-side-grip:hover::after, html.at-side-drag .at-side-grip::after { opacity: .35; } html.at-side-drag { cursor: col-resize; user-select: none; -webkit-user-select: none; }
@media (min-width: 1100px) { html.at-side-open .at-side { top: var(--at-bar-h); width: var(--at-side-w); z-index: 9; padding-top: 6px; } html.at-side-open .at-side-head { display: none; } html.at-side-open .at-side-grip { display: block; } html.at-side-open body { padding-left: calc(var(--at-side-w) + 20px); } html.at-side-open .at-bar-l { width: calc(var(--at-side-w) - 12px); }   /* minus the row gap: the crumb's left edge = the content column */ html.at-side-open .at-crumb::before { display: none; } }   /* every body, a static page too; the crumb starts where the content does, so no "/" 
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .at-btn, .at-link, .at-gear { transition: none; } .at-gear:hover { transform: none; } .at-pill-busy::before, .at-tree-busy { animation: none; } }