/* The documentation pages (/docs/ and /docs/<slug>/), loaded after landing.css by
   docs/index.html and docs/page.html. Classes are prefixed lp-doc- (the page) and lp-dw-
   (the drawn screenshots, docs/shots/). Like landing.css, every colour is a token, so the
   footer's Light / Dark switch turns the guides and their drawings together. */

/* base.css resets only headings to h3, paragraphs and lists: the browser's own margins on these
   (a figure's 40px each side, a dd's indent) would show. Zero specificity, so every rule below wins. */
:where(.lp-doc-body, .lp-doc-glossary) :where(h4, dl, dd, figure), :where(.lp-doc-terms) { margin: 0; }

/* --- The hero --------------------------------------------------------------- */
.lp-doc-crumbs {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
    font-size: .85rem; color: var(--ui-text-3);
}
.lp-doc-crumbs a { color: var(--ui-accent-text); }
.lp-doc-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-doc-crumbs i { font-size: .6rem; }
.lp-doc-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; font-size: .82rem; color: var(--ui-text-3); }
.lp-doc-meta span { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 7px; }
.lp-doc-meta code { font: 500 .78rem var(--ui-mono); color: var(--ui-text-2); }

/* --- A guide: the guides beside the text ----------------------------------- */
.lp-doc { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; gap: 56px; }
.lp-doc-side {
    position: sticky; top: calc(var(--lp-nav-h) + 28px);
    max-height: calc(100vh - var(--lp-nav-h) - 56px); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 6px;
}
.lp-doc-side-title { margin: 0 0 10px 12px; font: 500 .68rem var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-text-3); }
.lp-doc-guides { display: grid; gap: 2px; }
.lp-doc-guide {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
    font-size: .92rem; color: var(--ui-text-2); transition: color .15s, background-color .15s;
}
.lp-doc-guide i { width: 16px; font-size: .8rem; text-align: center; color: var(--ui-text-3); }
.lp-doc-guide:hover { color: var(--ui-text); background: var(--lp-hover-soft); }
.lp-doc-guide[aria-current="page"] { background: var(--ui-accent-soft); color: var(--ui-accent-text); font-weight: 500; }
.lp-doc-guide[aria-current="page"] i { color: var(--ui-accent-text); }
/* The open guide's sections, under its name; landing.js lights the one being read. */
.lp-doc-toc { display: grid; margin: 6px 0 10px 20px; padding-left: 12px; border-left: 1px solid var(--ui-line); }
.lp-doc-toc a {
    position: relative; padding: 5px 8px; font-size: .84rem; line-height: 1.35; color: var(--ui-text-3);
    transition: color .15s;
}
.lp-doc-toc a:hover { color: var(--ui-text); }
.lp-doc-toc a.is-on { color: var(--ui-accent-text); font-weight: 500; }
.lp-doc-toc a.is-on::before {
    content: ""; position: absolute; top: 6px; bottom: 6px; left: -13px; width: 2px; border-radius: 2px;
    background: var(--ui-accent);
}
.lp-doc-side-foot { display: grid; gap: 2px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-line); }

/* --- The text ---------------------------------------------------------------- */
.lp-doc-body { max-width: 820px; min-width: 0; }
.lp-doc-part + .lp-doc-part { margin-top: 56px; }
.lp-doc-part > h2 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.lp-doc-part > h2 a { color: inherit; }
.lp-doc-part > h2 a::after {
    content: "#"; margin-left: 10px; font-weight: 400; color: var(--ui-text-3);
    opacity: 0; transition: opacity .15s;
}
.lp-doc-part > h2:hover a::after, .lp-doc-part > h2 a:focus-visible::after { opacity: 1; }
.lp-doc-body > * + * { margin-top: 0; }
.lp-doc-part > * + * { margin-top: 16px; }
.lp-doc-part > h2 + * { margin-top: 14px; }
.lp-doc-part p, .lp-doc-list, .lp-doc-steps { color: var(--ui-text-2); line-height: 1.65; }
.lp-doc-body strong { font-weight: 600; color: var(--ui-text); }
.lp-doc-body code {
    padding: 1px 6px; border: 1px solid var(--ui-line); border-radius: 5px; background: var(--ui-inset);
    font: 500 .84em var(--ui-mono); color: var(--ui-text); overflow-wrap: anywhere;
}
.lp-doc-list { display: grid; gap: 8px; padding-left: 1.2rem; list-style: disc; }
.lp-doc-list li::marker { color: var(--ui-text-3); }
/* Steps: a numbered circle beside each. */
.lp-doc-steps { display: grid; gap: 14px; counter-reset: lp-step; }
.lp-doc-steps li { position: relative; padding-left: 42px; counter-increment: lp-step; }
.lp-doc-steps li::before {
    content: counter(lp-step); position: absolute; top: 0; left: 0;
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: .82rem; font-weight: 600;
}

/* Words and what they mean. */
.lp-doc-terms { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); overflow: hidden; background: var(--ui-surface); }
.lp-doc-terms dt, .lp-doc-terms dd { padding: 12px 16px; border-top: 1px solid var(--ui-line); }
.lp-doc-terms dt:first-of-type, .lp-doc-terms dt:first-of-type + dd { border-top: 0; }
.lp-doc-terms dt { font-weight: 500; color: var(--ui-text); background: var(--ui-inset); }
.lp-doc-terms dd { color: var(--ui-text-2); line-height: 1.6; }

/* A calculation: the formula in the mono face on an accent rule, its notes under it. */
.lp-doc-formula {
    border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-accent); border-radius: var(--ui-radius-md);
    background: var(--ui-surface); overflow: hidden;
}
.lp-doc-formula-lines { display: grid; gap: 8px; padding: 14px 18px; overflow-x: auto; }
.lp-doc-formula-lines code {
    padding: 0; border: 0; background: none;
    font: 500 .9rem/1.5 var(--ui-mono); color: var(--ui-text); white-space: pre-wrap; overflow-wrap: normal;
}
.lp-doc-formula ul { display: grid; gap: 6px; padding: 10px 18px 12px 34px; border-top: 1px dashed var(--ui-line); background: var(--ui-inset); list-style: disc; font-size: .9rem; color: var(--ui-text-2); }

/* A table: it scrolls on its own on a narrow screen, so the page never does. */
.lp-doc-table { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); overflow-x: auto; background: var(--ui-surface); }
.lp-doc-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lp-doc-table th {
    padding: 10px 14px; background: var(--ui-inset); border-bottom: 1px solid var(--ui-line);
    font: 500 .7rem var(--ui-mono); letter-spacing: .07em; text-transform: uppercase; text-align: left; color: var(--ui-text-3);
    white-space: nowrap;
}
.lp-doc-table td { padding: 10px 14px; border-top: 1px solid var(--lp-line-soft); color: var(--ui-text-2); vertical-align: top; line-height: 1.55; }
.lp-doc-table tr:first-child td { border-top: 0; }
.lp-doc-table td:first-child { font-weight: 500; color: var(--ui-text); min-width: 120px; }

/* A worked example. */
.lp-doc-example { padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-inset); }
.lp-doc-example-title { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--ui-text-3); }
.lp-doc-example-title i { color: var(--ui-accent-text); }
.lp-doc-example-title span { color: var(--ui-text); }
.lp-doc-example ol { display: grid; gap: 6px; margin-top: 10px; font-size: .94rem; color: var(--ui-text-2); }
.lp-doc-example ol li { padding-left: 14px; border-left: 2px solid var(--ui-line); }
.lp-doc-example-result { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ui-line-strong); font-weight: 500; color: var(--ui-text); }
.lp-doc-example-result i { font-size: .8rem; color: var(--ui-good); }

/* A note beside the text. */
.lp-doc-note {
    --tone: var(--ui-info);
    display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--ui-radius-md);
    border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--ui-line));
    background: color-mix(in srgb, var(--tone) 7%, var(--ui-surface));
    font-size: .94rem; line-height: 1.6; color: var(--ui-text-2);
}
.lp-doc-note[data-tone="warn"] { --tone: var(--ui-warn); }
.lp-doc-note > i { margin-top: 4px; color: var(--tone); }

/* --- Stat cards: one entry per card, its tile beside how it is worked out ------------ */
.lp-doc-stats { display: grid; gap: 14px; }
.lp-doc-stats + .lp-doc-stats { margin-top: 40px; }
.lp-doc-stats-title { display: flex; align-items: baseline; gap: 10px; font-size: 1.15rem; font-weight: 500; color: var(--ui-text); }
.lp-doc-stats-title span { font-size: .8rem; font-weight: 400; color: var(--ui-text-3); }
/* The row's cards as links, to jump to one. */
.lp-doc-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-doc-jump a {
    padding: 4px 11px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface);
    font-size: .8rem; color: var(--ui-text-2); transition: border-color .15s, color .15s;
}
.lp-doc-jump a:hover { border-color: var(--ui-accent); color: var(--ui-accent-text); }
.lp-doc-stat {
    display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px; padding: 20px;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface);
    scroll-margin-top: 96px; transition: border-color .2s, box-shadow .2s;
}
/* The card a link jumped to. */
.lp-doc-stat:target { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); }
/* The tile, drawn as the page draws it: icon, label, figure, the line under it. */
.lp-doc-stat-tile {
    align-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
    padding: 14px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-inset);
}
.lp-doc-stat-tile > i {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    background: color-mix(in srgb, var(--tone, var(--ui-accent)) 14%, transparent); color: var(--tone, var(--ui-accent));
    font-size: .95rem;
}
.lp-doc-stat-tile span { display: grid; min-width: 0; }
.lp-doc-stat-tile small, .lp-doc-stat-tile em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-doc-stat-tile small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-3); }
.lp-doc-stat-tile b { font-size: 1.45rem; font-weight: 700; line-height: 1.2; color: var(--ui-text); }
.lp-doc-stat-tile em { font-size: .74rem; color: var(--ui-text-3); }
.lp-doc-stat-text { display: grid; align-content: start; gap: 12px; min-width: 0; }
.lp-doc-stat-text :is(h3, h4) { font-size: 1.08rem; font-weight: 600; color: var(--ui-text); }
.lp-doc-stat-text :is(h3, h4) a:hover { color: var(--ui-accent-text); }
.lp-doc-stat-text > p { color: var(--ui-text-2); line-height: 1.6; }
.lp-doc-stat .lp-doc-formula-lines { gap: 6px; padding: 10px 14px; }
.lp-doc-stat .lp-doc-formula-lines code { font-size: .84rem; }
.lp-doc-stat-facts { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 14px; font-size: .93rem; line-height: 1.55; }
.lp-doc-stat-facts dt { font: 500 .68rem/1.95 var(--ui-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-3); }
.lp-doc-stat-facts dd { color: var(--ui-text-2); }

/* --- A drawn screenshot ------------------------------------------------------ */
.lp-doc-shot { margin-block: 28px 8px; }
.lp-doc-shot .lp-window { box-shadow: var(--lp-card-shadow); }
.lp-doc-shot .lp-window-body { height: auto; }
/* Wider than a phone: it scrolls inside its frame rather than being cut off. */
.lp-doc-shot .lp-app-main { overflow-x: auto; }
.lp-doc-shot .lp-app-canvas { min-width: 640px; }
.lp-doc-shot figcaption { margin-top: 14px; font-size: .9rem; color: var(--ui-text-3); }
.lp-doc-shot figcaption > p { display: flex; align-items: baseline; gap: 8px; }
.lp-doc-shot figcaption > p i { font-size: .78rem; }
.lp-doc-marks { display: grid; gap: 8px; margin-top: 12px; counter-reset: lp-mark; }
.lp-doc-marks li { position: relative; padding-left: 32px; color: var(--ui-text-2); counter-increment: lp-mark; }
.lp-doc-marks li::before, .lp-dw .lp-dw-mark {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--ui-accent); color: var(--ui-accent-ink);
    font: 700 .68rem/1 var(--ui-font); font-style: normal;
}
.lp-doc-marks li::before { content: counter(lp-mark); position: absolute; top: 1px; left: 0; }
/* The numbered marker on the drawing, at the top left of the piece it names. Two classes, so
   it wins over the rules for the icons it sits among (it is an <i> too). */
.lp-dw .lp-dw-mark {
    position: absolute; top: -11px; left: -11px; z-index: 2; grid-row: auto; margin: 0;
    box-shadow: 0 0 0 3px var(--lp-app-bg);
}
/* In a line of text (a table heading, a change) it sits before the words instead. */
.lp-dw .lp-dw-mark.is-inline {
    position: static; display: inline-grid; width: 16px; height: 16px; margin-right: 5px;
    vertical-align: -3px; font-size: .56rem; box-shadow: none;
}
.lp-dw :has(> .lp-dw-mark) { position: relative; }

/* --- The Report Manager's packs and reports --------------------------------- */
.lp-doc-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lp-doc-pack { padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.lp-doc-pack-head { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ui-text); }
.lp-doc-pack-head i, .lp-doc-cat-head > i {
    display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px;
    background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: .8rem;
}
.lp-doc-pack-meta { margin-top: 6px; font-size: .86rem; color: var(--ui-text-3); }
.lp-doc-pack ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lp-doc-pack li { padding: 3px 9px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-inset); font-size: .76rem; color: var(--ui-text-2); }

.lp-doc-find { position: relative; max-width: 420px; }
.lp-doc-find i { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); font-size: .8rem; color: var(--ui-text-3); pointer-events: none; }
.lp-doc-find input {
    width: 100%; height: 42px; padding: 0 14px 0 38px;
    border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-md); background: var(--ui-surface);
    font: inherit; font-size: .95rem; color: var(--ui-text);
}
.lp-doc-find input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); }
.lp-doc-found { font-size: .86rem; color: var(--ui-text-3); }
/* What the finder leaves out: [hidden] has to beat the display these blocks set. */
:is(.lp-doc-cat, .lp-doc-report, .lp-doc-found)[hidden] { display: none; }
.lp-doc-cat { display: grid; gap: 10px; }
.lp-doc-cat + .lp-doc-cat { margin-top: 32px; }
.lp-doc-cat-head { display: flex; align-items: center; gap: 12px; }
.lp-doc-cat-head h3 { font-size: 1.12rem; font-weight: 500; color: var(--ui-text); }
.lp-doc-cat-head p { font-size: .86rem; color: var(--ui-text-3); }
.lp-doc-report { padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); scroll-margin-top: 96px; }
.lp-doc-report h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1rem; font-weight: 500; color: var(--ui-text); }
.lp-doc-report dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 14px; margin-top: 10px; font-size: .92rem; line-height: 1.55; }
.lp-doc-report dt { font: 500 .7rem/1.9 var(--ui-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-3); }
.lp-doc-report dd { color: var(--ui-text-2); }
.lp-doc-report details { margin-top: 12px; border-top: 1px dashed var(--ui-line); padding-top: 10px; }
.lp-doc-report summary { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 500; color: var(--ui-accent-text); cursor: pointer; list-style: none; }
.lp-doc-report summary::-webkit-details-marker { display: none; }
.lp-doc-report summary i { font-size: .65rem; transition: transform .2s var(--ui-ease); }
.lp-doc-report details[open] summary i { transform: rotate(90deg); }
.lp-doc-cols { display: grid; gap: 4px; margin-top: 10px; font-size: .86rem; }
.lp-doc-cols li { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 12px; padding: 6px 10px; border-radius: 6px; }
.lp-doc-cols li:nth-child(odd) { background: var(--ui-inset); }
.lp-doc-cols b { font-weight: 500; color: var(--ui-text); }
.lp-doc-cols span { color: var(--ui-text-3); }
.lp-doc-tag {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--ui-info) 12%, transparent); color: var(--ui-info);
    font-size: .68rem; font-weight: 500;
}

/* --- The way on: the previous and next guide ---------------------------------- */
.lp-doc-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.lp-doc-pager a {
    display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg);
    background: var(--ui-surface); transition: border-color .2s, background-color .2s;
}
.lp-doc-pager a:hover { border-color: var(--ui-line-hover); background: var(--lp-card-hover); }
.lp-doc-pager small { font-size: .78rem; color: var(--ui-text-3); }
.lp-doc-pager b { font-weight: 500; color: var(--ui-text); }
.lp-doc-pager [rel="next"] { grid-column: 2; text-align: right; }

/* --- The docs home ------------------------------------------------------------ */
.lp-doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-doc-card { min-height: 0; padding: 24px; }
.lp-doc-card .lp-card-text { margin-top: 10px; }
.lp-doc-card-path { margin-top: 16px; font: 500 .74rem var(--ui-mono); color: var(--ui-text-3); overflow-wrap: anywhere; }
.lp-doc-card-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lp-doc-card-parts li { padding: 3px 9px; border: 1px solid var(--ui-line); border-radius: 999px; font-size: .74rem; color: var(--ui-text-3); }
.lp-doc-glossary { max-width: 900px; margin-inline: auto; }

/* --- Drawings: the pieces of the app's screens (docs/shots/) --------------------- */
.lp-dw { display: grid; gap: 10px; font-size: .7rem; line-height: 1.35; color: var(--ui-text-2); }
:is(.lp-dw, .lp-doc-stat) [data-tone="violet"] { --tone: var(--ui-violet); }
:is(.lp-dw, .lp-doc-stat) [data-tone="accent"] { --tone: var(--ui-accent); }
:is(.lp-dw, .lp-doc-stat) [data-tone="link"] { --tone: var(--ui-link); }
.lp-dw-card { position: relative; border: 1px solid var(--lp-raised-line); border-radius: 8px; background: var(--lp-raised); }
.lp-dw-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 8px 10px; border-bottom: 1px solid var(--lp-line-soft); }
.lp-dw-title { position: relative; display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--ui-text); }
.lp-dw-title i { color: var(--ui-accent-text); }
.lp-dw-sub { font-size: .6rem; font-weight: 400; color: var(--ui-text-3); }
.lp-dw-body { padding: 10px; }
.lp-dw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lp-dw-row-between { justify-content: space-between; }
.lp-dw-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; align-items: start; }
.lp-dw-span { grid-column: span var(--span, 1); }
.lp-dw-list { display: grid; gap: 7px; align-content: start; }
.lp-dw-center { margin-inline: auto; }
.lp-dw-foot { margin-top: 6px; }
.lp-dw-grow { position: relative; flex: 1; min-width: 0; }
/* A tick box and its label (the Report Manager's report cards). */
.lp-dw-check {
    position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 8px;
    border: 1px solid var(--lp-raised-line); border-radius: 6px; color: var(--ui-text-2);
}
.lp-dw-check i:not(.lp-dw-mark) { color: var(--ui-text-3); }
.lp-dw-check.is-on { border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent); background: var(--ui-accent-soft); color: var(--ui-text); }
.lp-dw-check.is-on i:not(.lp-dw-mark) { color: var(--ui-accent-text); }
/* A card's lower band, as the filter row under a page's title. */
.lp-dw-band { border-top: 1px solid var(--lp-line-soft); border-radius: 0 0 8px 8px; background: var(--lp-head-bg); }
.lp-dw-input, .lp-dw-btn {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
    border: 1px solid var(--lp-raised-line); border-radius: 6px; background: var(--lp-raised);
    font-size: .63rem; color: var(--ui-text-3); white-space: nowrap;
}
.lp-dw-input i { font-size: .58rem; }
.lp-dw-btn { color: var(--ui-text-2); font-weight: 500; }
.lp-dw-btn.is-primary { border-color: transparent; background: var(--ui-primary); color: var(--ui-primary-ink); }
.lp-dw-btn.is-on { border-color: color-mix(in srgb, var(--ui-accent) 50%, transparent); background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.lp-dw-h1 { display: flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 700; color: var(--ui-text); }
.lp-dw-h1 i { color: var(--ui-accent); }
/* Two classes, so a colour wins over the table cell or tile it is written on. */
.lp-dw .lp-dw-muted { color: var(--ui-text-3); }
.lp-dw .lp-dw-strong { font-weight: 600; color: var(--ui-text); }
.lp-dw .lp-dw-good { color: var(--ui-good); font-weight: 600; }
.lp-dw .lp-dw-bad { color: var(--ui-bad); font-weight: 600; }
.lp-dw .lp-dw-warn { color: var(--ui-warn); font-weight: 600; }

/* Stat cards: a row of tiles, as on the analysis pages. */
.lp-dw-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.lp-dw-kpi {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 7px;
    padding: 7px 8px; border: 1px solid var(--lp-raised-line); border-radius: 8px; background: var(--lp-raised);
}
.lp-dw-kpi > i {
    grid-row: span 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
    background: color-mix(in srgb, var(--tone, var(--ui-accent)) 14%, transparent); color: var(--tone, var(--ui-accent));
    font-size: .58rem;
}
.lp-dw-kpi small { overflow: hidden; font-size: .5rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-3); }
.lp-dw-kpi b { font-size: .9rem; font-weight: 700; line-height: 1.15; color: var(--ui-text); }
.lp-dw-kpi b em { margin-left: 4px; font-size: .55rem; font-style: normal; font-weight: 600; color: var(--tone, var(--ui-text-3)); }
.lp-dw-kpi span { overflow: hidden; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-3); }

/* A table in a drawing. */
.lp-dw-tbl { width: 100%; border-collapse: collapse; font-size: .62rem; }
.lp-dw-tbl th {
    padding: 6px 8px; background: var(--lp-head-bg); text-align: left; white-space: nowrap;
    font: 500 .5rem var(--ui-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ui-text-3);
}
.lp-dw-tbl td { padding: 6px 8px; border-top: 1px solid var(--lp-line-soft); white-space: nowrap; color: var(--ui-text-2); }
.lp-dw-tbl td b { font-weight: 600; color: var(--ui-text); }
.lp-dw-tbl .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.lp-dw-tbl td.is-good { background: color-mix(in srgb, var(--ui-good) 13%, transparent); color: var(--ui-good); font-weight: 600; }
.lp-dw-tbl td.is-bad { background: color-mix(in srgb, var(--ui-bad) 12%, transparent); color: var(--ui-bad); font-weight: 600; }
.lp-dw-prod { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lp-dw-prod .lp-thumb { width: 22px; height: 22px; }
.lp-dw-prod span { display: grid; min-width: 0; }
.lp-dw-prod b { overflow: hidden; text-overflow: ellipsis; }
.lp-dw-asin { font: 500 .58rem var(--ui-mono); color: var(--ui-link); }

/* Tabs in a drawing. */
.lp-dw-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--lp-line-soft); }
.lp-dw-tabs span { position: relative; padding: 7px 8px; font-size: .62rem; color: var(--ui-text-3); white-space: nowrap; }
.lp-dw-tabs span i { font-style: normal; color: var(--ui-text-3); }
.lp-dw-tabs .is-on { color: var(--ui-accent-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ui-accent); }

/* A ring: a share of 100 (--p) in --tone, or a split of up to four parts (--a, --b, --c in %). */
.lp-dw-ring {
    position: relative; display: grid; place-items: center; flex: none; width: var(--size, 88px); aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(var(--tone, var(--ui-accent)) 0 calc(var(--p, 0) * 1%), var(--lp-track) 0);
}
.lp-dw-ring.is-split {
    background: conic-gradient(var(--ui-good) 0 calc(var(--a) * 1%), var(--ui-warn) 0 calc(var(--b) * 1%),
                               var(--ui-bad) 0 calc(var(--c) * 1%), var(--lp-dot-none) 0);
}
/* Product Analysis's delivery speed: same day, 1, 2, 3, then 4+ days (--a to --d are where each ends). */
.lp-dw-ring.is-speed {
    background: conic-gradient(var(--ui-good) 0 calc(var(--a) * 1%), var(--ui-info) 0 calc(var(--b) * 1%),
                               var(--ui-warn) 0 calc(var(--c) * 1%), var(--ui-accent) 0 calc(var(--d) * 1%),
                               var(--ui-bad) 0);
}
.lp-dw-ring::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: var(--lp-raised); }
.lp-dw-ring > * { position: relative; text-align: center; }
.lp-dw-ring b { display: block; font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--ui-text); }
.lp-dw-ring small { font-size: .52rem; color: var(--ui-text-3); }

/* A bar of parts side by side (--f is each part's share), and a meter with its label. */
.lp-dw-stack { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; }
.lp-dw-stack i { flex: var(--f) 1 0; background: var(--tone); }
.lp-dw-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; }
.lp-dw-meter > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-dw-meter > b { font-weight: 600; color: var(--ui-text); }
.lp-dw-meter .lp-bar { grid-column: 1 / -1; height: 6px; }
.lp-dw-meter .lp-bar i { background: var(--tone, var(--ui-accent)); animation: none; }
.lp-dw-legend { display: grid; gap: 5px; }
.lp-dw-legend li { display: flex; align-items: center; gap: 6px; }
.lp-dw-legend li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.lp-dw-legend li b { margin-left: auto; font-weight: 600; color: var(--ui-text); }
.lp-dw-legend li em { width: 34px; font-style: normal; text-align: right; color: var(--ui-text-3); }

/* Columns of a bar chart (--h is a bar's height in %). */
.lp-dw-cols { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); align-items: end; gap: 6px; height: 74px; padding-top: 4px; }
.lp-dw-cols i { display: block; height: var(--h); border-radius: 3px 3px 0 0; background: var(--tone, var(--ui-accent)); }
.lp-dw-cols-labels { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; margin-top: 4px; font-size: .52rem; text-align: center; color: var(--ui-text-3); }

/* A boxed figure (Average Delivery Time). */
.lp-dw-figure { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--tone) 8%, transparent); }
.lp-dw-figure small { display: block; font-size: .58rem; font-weight: 600; color: var(--tone); }
.lp-dw-figure b { display: block; margin-top: 3px; font-size: 1.05rem; font-weight: 700; color: var(--tone); }

/* A badge as Amazon draws it: Amazon's own colours, as on the app's product pages. */
.lp-dw-badge { display: inline-flex; padding: 1px 6px; border-radius: 3px; font-size: .52rem; font-weight: 700; color: #fff; background: var(--badge); }

/* The map card's India. */
.lp-dw .lp-map { max-width: 190px; }
.lp-dw .lp-map circle { animation: none; }
/* A drawn product picture, larger. */
.lp-dw-pic { width: 76px; height: 76px; border-radius: 8px; }
.lp-dw-pic img { width: 100%; height: 100%; }

/* --- Narrower screens ------------------------------------------------------------ */
@media (max-width: 1040px) {
    /* The guides go above the text, as a row of links; the section list is left out. */
    .lp-doc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .lp-doc-side { position: static; max-height: none; overflow: visible; padding: 0; }
    .lp-doc-guides { display: flex; flex-wrap: wrap; gap: 6px; }
    .lp-doc-guide { border: 1px solid var(--ui-line); }
    .lp-doc-toc, .lp-doc-side-foot { display: none; }
}
@media (max-width: 760px) {
    /* The drawings without the app's rail of icons, so the screen itself has the room. */
    .lp-doc-shot .lp-window-body { grid-template-columns: minmax(0, 1fr); }
    .lp-doc-shot .lp-app-side { display: none; }
    .lp-doc-cards, .lp-doc-packs { grid-template-columns: minmax(0, 1fr); }
    /* A stat card's tile goes above its words. */
    .lp-doc-stat { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
    .lp-doc-stat-tile { max-width: 300px; }
    .lp-doc-stat-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .lp-doc-stat-facts dd + dt { margin-top: 8px; }
    .lp-doc-terms { grid-template-columns: minmax(0, 1fr); }
    .lp-doc-terms dt { border-top: 1px solid var(--ui-line); }
    .lp-doc-terms dd { border-top: 0; padding-top: 4px; }
    .lp-doc-terms dt:first-of-type { border-top: 0; }
    .lp-doc-report dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .lp-doc-report dd + dt { margin-top: 8px; }
    .lp-doc-cols li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .lp-doc-pager { grid-template-columns: minmax(0, 1fr); }
    .lp-doc-pager [rel="next"] { grid-column: auto; }
}