/* The documentation (src/web/docs.js). Colours, fonts, buttons and the footer come from app.css. */
.docs { --nav-w: 280px; }
.docs-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--border); }
.docs-top .brand { display: flex; align-items: center; gap: 10px; color: var(--text); font: 700 1.15rem var(--display); letter-spacing: .06em; text-transform: uppercase; }
.docs-top .brand:hover { text-decoration: none; }
.docs-top .brand img { width: 28px; height: 28px; }
.docs-top .brand em { font: 700 .68rem var(--display); letter-spacing: .16em; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 3px; padding: 2px 6px; font-style: normal; }
.docs-links { margin-left: auto; display: flex; gap: 20px; font-size: .92rem; }
.docs-links a { color: var(--muted); } .docs-links a:hover { color: var(--text); text-decoration: none; }
/* The three lines, on their own: no box around them - it read as a button with an icon nobody knew. The padding
   is the finger's target (44px), not decoration, so the lines sit at the left edge with the brand. */
.docs-burger { display: none; margin-left: -10px; background: none; border: 0; color: var(--text); padding: 10px; cursor: pointer; font-size: 1.45rem; line-height: 1; }
.docs-burger:hover { color: var(--accent); }

/* the menu sits at the left edge, under the brand; the page uses the width it gets (up to a line length that still reads) */
.docs-layout { flex: 1 0 auto; display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); width: 100%; max-width: 1840px; margin: 0; }
.docs-nav { position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); overflow-y: auto; padding: 18px 12px 40px 16px; border-right: 1px solid var(--border); scrollbar-width: thin; }
.docs-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); color: var(--faint); }
.docs-search:focus-within { border-color: var(--accent); }
.docs-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; }
.docs-nav ul { list-style: none; margin: 0 0 6px; padding: 0; }
.docs-nav .nav-title { margin: 18px 8px 6px; font: 700 .7rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
/* A group heading is the thing you press to fold it. The browser's own triangle is replaced by one that turns,
   and the whole row is the hit area - a heading is easy to aim at, a triangle is not. */
.docs-nav summary.nav-title { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; margin: 14px 0 2px; border-radius: var(--r); list-style: none; user-select: none; }
.docs-nav summary.nav-title::-webkit-details-marker { display: none; }
.docs-nav summary.nav-title::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; }
.docs-nav details[open] > summary.nav-title::after { transform: rotate(225deg) translate(-2px, -2px); }
.docs-nav summary.nav-title:hover { color: var(--text); background: var(--panel); }
.docs-nav summary.nav-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .docs-nav summary.nav-title::after { transition: none; } }
.docs-nav a { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r); color: var(--muted); font-size: .93rem; line-height: 1.3; }
.docs-nav a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.docs-nav a[aria-current="page"] { color: var(--accent); background: var(--panel-2); font-weight: 600; }
.docs-nav a .ic { color: var(--gold); font-size: .78rem; margin-left: auto; }
.docs-nav .sub { margin: 2px 0 8px 12px; border-left: 1px solid var(--border); }
.docs-nav .sub a { padding: 5px 12px; font-size: .86rem; font-weight: 400; color: var(--muted); background: none; }
.docs-nav .sub a:hover { color: var(--text); }

/* the footer sits in the text column, under the article: the layout then reaches the bottom of the page, and the menu -
   sticky inside the layout - stays where it is when the page is scrolled to its end */
.docs-col { min-width: 0; display: flex; flex-direction: column; }
.docs-col > .docs-main { flex: 1 0 auto; }
.docs-main { min-width: 0; padding: 36px 56px 56px 48px; }
.docs-main article { max-width: 1240px; }
.docs-main h1 { font-size: 2.1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.docs-main h1 > .ic { color: var(--accent); font-size: 1.7rem; }
.docs-main h2 { margin-top: 2.2em; padding-top: .2em; scroll-margin-top: 76px; }
.docs-main h3 { margin-top: 1.6em; scroll-margin-top: 76px; }
.docs-main .lead { color: var(--muted); font-size: 1.06rem; max-width: 100ch; }
.docs-main p, .docs-main li { max-width: 112ch; }
.docs-main ul, .docs-main ol { padding-left: 1.3em; margin: 0 0 1em; }
.docs-main li { margin: .3em 0; }
/* the "Good to know" lists hold whole paragraphs: they get the room of paragraphs */
.docs-main article li { margin: .75em 0; line-height: 1.65; }
.docs-main article li + li { padding-top: .1em; }
.docs-main article ul > li::marker, .docs-main article ol > li::marker { font-weight: 600; }
.docs-main li::marker { color: var(--faint); }
.doc-head { margin-bottom: 22px; }
.doc-head .eyebrow { display: block; margin-bottom: 8px; }

.hero { display: flex; align-items: center; gap: 22px; padding: 30px 28px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(135deg, var(--panel-2), var(--bg) 70%); }
.hero h1 { margin: 0 0 8px; }
.hero .lead { margin: 0; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 26px; }

.tier { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 .72rem var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.tier.free { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.tier.premium { color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.tier.premium .ic { color: var(--gold); font-size: .8rem; }
.tier.off { color: var(--faint); border: 1px solid var(--border-strong); }

.callout { display: flex; gap: 12px; padding: 13px 16px; margin: 0 0 1.2em; border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: var(--r); background: var(--panel); max-width: 1240px; }
.callout > .ic { color: var(--info); margin-top: .15em; }
.callout.warn { border-left-color: var(--danger); } .callout.warn > .ic { color: var(--danger); }
.callout.gold { border-left-color: var(--gold); } .callout.gold > .ic { color: var(--gold); }

.shot { margin: 1.4em 0 1.8em; max-width: 960px; } /* (wider, and the height cap would crop a screenshot's bottom) */
.shot a { display: block; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--panel); }
.shot img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: top; }
.shot figcaption { margin-top: 8px; color: var(--muted); font-size: .88rem; }
.shot.small a { display: inline-block; max-width: 100%; }
.shot.small img { width: auto; max-width: 100%; }

.cmd { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); scroll-margin-top: 76px; }
.cmd > header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.cmd > header h3 { margin: 0; font: 700 1.05rem ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: 0; }
.cmd > p { margin: 0; padding: 12px 16px; }
.who { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .84rem; }
.who .ic { font-size: .9rem; }
.use { padding: 12px 16px; } .use + .use { border-top: 1px dashed var(--border); }
.use p { margin: 6px 0 0; color: var(--muted); }
code.usage { display: inline-block; padding: 4px 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: .88rem; overflow-wrap: anywhere; }
.docs-main .opts { list-style: none; padding: 0; margin: 8px 0 0; font-size: .9rem; }
.opts li { margin: .25em 0; }

/* Settings and command options in columns: the name on the left, what it does on the right - lined up down the page,
   like the command tables. A list setting's own fields are indented under it, their explanations still in line. */
.docs-main .opts li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 170px) minmax(0, 1fr); gap: 2px 16px; align-items: baseline; }
.docs-main .opts li > code { justify-self: start; max-width: 100%; overflow-wrap: anywhere; } /* (the name keeps its own width, not the column's) */
@media (max-width: 700px) {
  .docs-main .opts li { grid-template-columns: 1fr; }
}

/* ── the Settings section of a module page (web/docs-settings.js) ───────────
   Headings are sections, every setting says what it takes and what it is by default, and the
   explanation sits under the name - so a setting without one is a single quiet line. */
.settings { margin: 0 0 1.4em; }
.set-group { margin: 0 0 22px; }
.set-title { font: 700 .74rem/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 26px 0 2px; }
.set-group:first-child .set-title { margin-top: 0; }
.set-note { color: var(--muted); font-size: .9rem; margin: 0 0 10px; max-width: 70ch; }
/* a heading that covers the ones under it, rather than a group of settings of its own */
.set-over { margin-bottom: 4px; }
.set-over .set-title { font-size: .95rem; letter-spacing: .04em; text-transform: none; color: var(--text); margin-bottom: 4px; }
.set-row { padding: 9px 0 10px; border-bottom: 1px solid var(--border); }
.set-group > .set-row:last-child { border-bottom: 0; }
.set-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
/* The little pills after a setting's name. Three things centre the words in them:
   inline-flex puts the line box in the middle; text-indent puts back the gap letter-spacing leaves after
   the LAST letter, which otherwise pulls the word left; and the uneven top/bottom padding makes up for
   the descender space a line of CAPITALS never uses, which otherwise leaves them sitting high. */
.set-kind { display: inline-flex; align-items: center; justify-content: center; font: 600 .68rem/1 var(--display); letter-spacing: .08em; text-indent: .08em; text-transform: uppercase; white-space: nowrap; color: var(--faint); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: calc(5px + .045em) 9px calc(5px - .045em); }
.set-default { font-size: .8rem; color: var(--muted); }
.set-default::before { content: 'default: '; color: var(--faint); }
.set-help { color: var(--muted); font-size: .92rem; margin: 4px 0 0; max-width: 78ch; }
.set-help em { color: var(--faint); font-style: normal; }
.set-inner { margin: 8px 0 0 14px; padding-left: 14px; border-left: 2px solid var(--border); }
.set-inner .set-row { padding: 6px 0; border-bottom: 0; }
.set-inner .set-name { font-weight: 500; font-size: .95rem; }

.table-wrap { overflow-x: auto; margin: 0 0 1.2em; border: 1px solid var(--border); border-radius: 8px; }
.docs-main table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.docs-main th, .docs-main td { text-align: left; vertical-align: top; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.docs-main th { background: var(--panel); font: 700 .72rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.docs-main tr:last-child td { border-bottom: 0; }
.docs-main td.num, .docs-main th.num { text-align: right; white-space: nowrap; }
.docs-main td code { white-space: nowrap; }
/* the command tables (one per module): the same columns in every one, so they line up down the page */
.docs-main table.cmds { table-layout: fixed; }
.cmds .c-cmd { width: 36%; } .cmds .c-what { width: 40%; } .cmds .c-who { width: 24%; }
.cmds td code { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) { .docs-main table.cmds { table-layout: auto; } }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0 0 1.4em; }
.card-link { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: .9rem; }
.card-link:hover { border-color: var(--accent-dim); text-decoration: none; background: var(--panel-2); }
.card-title { font: 700 1rem var(--display); letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.card-title .ic { color: var(--accent); }
.docs-main .cols { columns: 2 320px; column-gap: 32px; }
.cols li { break-inside: avoid; }

.pager { display: flex; justify-content: space-between; gap: 14px; max-width: 1240px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; min-width: 0; border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.pager a:hover { border-color: var(--accent-dim); text-decoration: none; }
.pager a.next { margin-left: auto; text-align: right; }

@media (max-width: 900px) {
  .docs-burger { display: inline-flex; }
  .docs-links a:not(:nth-child(2)) { display: none; }
  .docs-layout { display: block; }
  /* The contents, over the page. A height of its own is what makes it scroll: left to stretch between top and
     bottom it grew to the length of the list instead, so everything past the first screenful was out of reach
     with the page itself held still. `dvh` for the phone browsers whose address bar comes and goes. */
  .docs-nav { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 25;
    height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-right: 0; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
  .docs.nav-open .docs-nav { display: block; }
  .docs.nav-open { overflow: hidden; }
  .docs-main { padding: 24px 16px 40px; }
  .docs-main h1 { font-size: 1.65rem; }
  .hero { flex-direction: column; align-items: flex-start; padding: 22px 18px; }
  .who { margin-left: 0; }
}

/* pictures open in a viewer on the page (docs.js) */
.shot a { cursor: zoom-in; }
.viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 7 6 / .94); color: var(--text); }
.viewer::backdrop { background: rgb(0 0 0 / .6); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.viewer-caption { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .9rem; }
.viewer-level { min-width: 3.5em; text-align: right; color: var(--faint); font-size: .85rem; font-variant-numeric: tabular-nums; }
.viewer-bar .btn { min-width: 36px; justify-content: center; }
.viewer-stage { flex: 1; min-height: 0; overflow: auto; display: flex; cursor: zoom-in; touch-action: none; user-select: none; scrollbar-width: thin; }
.viewer-stage.zoomed { cursor: grab; } .viewer-stage.zoomed:active { cursor: grabbing; }
.viewer-stage img { -webkit-user-drag: none; user-select: none; display: block; flex: none; margin: auto; max-width: none; height: auto; border-radius: 4px; } /* (flex: none - a flex item would be squeezed back to the window's width) */
@media (max-width: 900px) { .viewer-caption { display: none; } .viewer-level { margin-left: auto; } }

/* the bar that follows the reader through the sections of the page (docs.js) */
.docs-nav .sub { position: relative; }
.sub-marker { position: absolute; top: 0; left: -1px; width: 2px; height: 0; border-radius: 2px; background: var(--accent); opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.3, .7, .2, 1), height .28s cubic-bezier(.3, .7, .2, 1), opacity .2s; }
.sub-marker.on { opacity: 1; }
.docs-nav .sub a { transition: color .2s; }
.docs-nav .sub a.reading { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .sub-marker, .docs-nav .sub a { transition: none; } }

/* Icons next to text in the display font: that font's capitals sit above the middle of the line, so an icon
   centred on the LINE looks too low. Lifted to the middle of the letters (measured: 0.075 of the text size). */
.docs-main h1 > .ic { position: relative; top: -.092em; }
.card-title .ic, .tier .ic, .docs-top .brand img { position: relative; top: -.08em; }

/* "-25%" beside a price that is down. Pointing at it (or holding it) says which sale and until when. */
.sale-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--ok-dim, rgba(87, 242, 135, .14)); color: var(--ok, #57F287); border: 1px solid rgba(87, 242, 135, .35); font: 700 .72rem/1.5 var(--display); letter-spacing: .04em; white-space: nowrap; cursor: help; }
.sale-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }