/* D1 skin for the whole app (2026-11-01; mock-ups in the Shabba home,
   mockups/d1-full/). Loaded after style.css on every page (base.html) and
   again at the end of the body so it also wins over page and tool sheets.
   It swaps the Riso tokens for D1's quiet ones (white page, light 1px
   lines, soft blue fills) and reshapes the shared pieces: buttons, inputs,
   panels, labels, headings, notes, the account picker, step numbers, the
   How this works panel and dialogs. Selectors start with
   html body.d1-page so they beat single-class rules in later sheets. */

:root {
    --paper: #ebf2fa;
    --paper-2: #dbe6f3;
    --card: #ffffff;
    --raised: #ffffff;
    --ink: #1f1b1c;
    --ink-2: #424b56;
    --muted: #5d6875;
    --rule: #e3e8ef;
    --line: #e3e8ef;
    --edge: #e3e8ef;
    --control: #cfd8e3;
    --row-line-style: solid;
    --row-line: #e3e8ef;
    --grain-op: 0;
    --blob-op: 0;
    --card-shadow-hover: none;
    --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --d1-radius: 14px;
    --d1-radius-sm: 8px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #1a2029; --paper-2: #232b36; --card: #1a2029; --raised: #232b36;
        --ink: #eef2f7; --ink-2: #c3ccd7; --muted: #98a3b1;
        --rule: #2a323d; --line: #2a323d; --edge: #2a323d; --control: #3a4452; --row-line: #2a323d;
        --blue: #6aaef5; --pink-text: #ff8cc6; --on-accent: #0b1a2b;
    }
}
:root[data-theme="dark"] {
    --paper: #1a2029; --paper-2: #232b36; --card: #1a2029; --raised: #232b36;
    --ink: #eef2f7; --ink-2: #c3ccd7; --muted: #98a3b1;
    --rule: #2a323d; --line: #2a323d; --edge: #2a323d; --control: #3a4452; --row-line: #2a323d;
    --blue: #6aaef5; --pink-text: #ff8cc6; --on-accent: #0b1a2b;
}

/* ---------- page and type ---------- */
html body.d1-page { background: var(--d1-bg); color: var(--d1-ink); font-family: var(--font-body); font-variation-settings: normal; }
html body.d1-page::before { display: none; }
html body.d1-page :is(h1, .h1, h2, .h2, h3, .h3, h4, h5, h6) { font-variation-settings: normal; text-transform: none; letter-spacing: -.01em; }
html body.d1-page :is(h1, .h1, .display-title, .page-title) { font: 800 clamp(28px, 3.2vw, 38px)/1.08 var(--sans); letter-spacing: -.015em; text-transform: none; }
html body.d1-page :is(h2, .h2) { font-size: 20px; font-weight: 700; line-height: 1.25; }
html body.d1-page :is(h3, .h3) { font-size: 16px; font-weight: 650; font-family: var(--font-body); }
html body.d1-page .blob, html body.d1-page .halftone { display: none !important; }
html body.d1-page .mis::before { content: none; }
html body.d1-page .mis span { color: inherit; mix-blend-mode: normal; }
html body.d1-page .hl { background: none; padding: 0; }
html body.d1-page :is(.label, .section-label, .eyebrow, .kicker, .form-label, label.form-label) { font: 600 12.5px/1.4 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--d1-muted); }
html body.d1-page .lede { font-family: var(--font-body); color: var(--d1-muted); font-size: 16px; }
html body.d1-page .stamp { transform: none; font: 600 12px var(--font-body); text-transform: none; letter-spacing: 0; border: 0; border-radius: 99px; padding: 2px 9px; background: var(--d1-paper); }
html body.d1-page .status { font-family: var(--font-body); }
html body.d1-page .mono, html body.d1-page code { font-size: .92em; }
html body.d1-page hr { border-top: 1px solid var(--d1-line); }
html body.d1-page .note { transform: none; box-shadow: none; border: 0; border-radius: 12px; background: var(--d1-blue-soft); color: var(--d1-ink-2); padding: 12px 14px; font-size: 14px; }
html body.d1-page .note b { font: 600 14px var(--font-body); text-transform: none; color: var(--d1-ink); }

/* ---------- buttons ---------- */
html body.d1-page .btn {
    --bs-btn-border-width: 1px;
    border-radius: var(--d1-radius-sm); border-width: 1px; box-shadow: none !important; transform: none !important;
    font: 600 14px/1 var(--font-body); letter-spacing: 0; text-transform: none;
    min-height: 38px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
html body.d1-page .btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
html body.d1-page .btn-lg { min-height: 44px; padding: 0 20px; font-size: 15px; }
html body.d1-page :is(.btn-primary, .btn-dark, .btn-success, .btn-info) { background: var(--d1-blue); border-color: var(--d1-blue); color: #fff; }
:root[data-theme="dark"] body.d1-page :is(.btn-primary, .btn-dark, .btn-success, .btn-info) { color: #0b1a2b; }
html body.d1-page :is(.btn-primary, .btn-dark, .btn-success, .btn-info):hover { background: #0654a3; border-color: #0654a3; color: #fff; }
:root[data-theme="dark"] body.d1-page :is(.btn-primary, .btn-dark, .btn-success, .btn-info):hover { background: #8cc0f7; border-color: #8cc0f7; color: #0b1a2b; }
html body.d1-page :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-secondary, .btn-link:not(.p-0)) { background: var(--d1-card); border-color: var(--d1-line-2); color: var(--d1-ink); }
html body.d1-page :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-secondary):hover { background: var(--d1-card); border-color: var(--d1-blue); color: var(--d1-blue); }
html body.d1-page :is(.btn-outline-primary, .btn-outline-secondary, .btn-light).active,
html body.d1-page :is(.btn-outline-primary, .btn-outline-secondary)[aria-pressed="true"] { background: var(--d1-blue-soft); border-color: var(--d1-blue); color: var(--d1-blue); }
html body.d1-page :is(.btn-danger, .btn-outline-danger) { background: var(--d1-card); border-color: color-mix(in srgb, #b8301d 40%, var(--d1-line-2)); color: #b8301d; }
html body.d1-page :is(.btn-danger, .btn-outline-danger):hover { background: #fdecea; color: #b8301d; }
html body.d1-page .btn:disabled, html body.d1-page .btn.disabled, html body.d1-page .btn[aria-disabled="true"] { background: var(--d1-paper); border-color: var(--d1-line); color: var(--d1-muted); opacity: 1; }
html body.d1-page .btn-link { box-shadow: none; }

/* ---------- inputs ---------- */
html body.d1-page :is(.form-control, .form-select, input[type="text"].form-control, input[type="search"], input[type="email"], input[type="number"], input[type="date"], select, textarea):not([type="checkbox"]):not([type="radio"]):not(.btn) {
    border: 1px solid var(--d1-line-2); border-radius: var(--d1-radius-sm); background-color: var(--d1-bg); color: var(--d1-ink);
    box-shadow: none; font-family: var(--font-body); font-size: 14px; min-height: 38px;
}
html body.d1-page :is(.form-control, .form-select):focus { border-color: var(--d1-blue); box-shadow: 0 0 0 3px var(--d1-blue-soft); }
html body.d1-page :is(.form-control-sm, .form-select-sm) { min-height: 32px; font-size: 13px; }
html body.d1-page .form-check-input { border: 1px solid var(--d1-line-2); box-shadow: none; }
html body.d1-page .form-check-input[type="checkbox"] { border-radius: 4px; }
html body.d1-page .form-check-input:checked { background-color: var(--d1-blue); border-color: var(--d1-blue); }
html body.d1-page .form-check-label, html body.d1-page .form-text { font-family: var(--font-body); }

/* ---------- panels and cards ---------- */
html body.d1-page :is(.card, .tool-options, .setup, .usage-card, .panel, .sheet, .settings-card, .settings-section, .billing-card, .plan-card, .changes-filters, .feedback-card, .referrals-card, .org-card) {
    border: 1px solid var(--d1-line); border-radius: var(--d1-radius); box-shadow: none; background: var(--d1-card);
}
html body.d1-page .card-header, html body.d1-page .card-footer { background: transparent; border-color: var(--d1-line); }
html body.d1-page .tool-canvas .card.tool-options { padding: 0; }
html body.d1-page :is(.step-num, .lc-step-num) { width: 24px; height: 24px; border-radius: 50%; background: var(--d1-blue-soft); color: var(--d1-blue); border: 0; font: 700 12.5px/1 var(--font-body); box-shadow: none; }
html body.d1-page .tool-canvas :is(.step-title, .lc-step-title) { font: 700 20px/1.25 var(--sans); font-variation-settings: normal; }
html body.d1-page .alert { border-radius: 12px; border: 1px solid var(--d1-line); box-shadow: none; transform: none; }
html body.d1-page .alert-warning { background: #fff8e1; border-color: #f0d58a; color: #5c4400; }
html body.d1-page .alert-danger { background: #fdecea; border-color: #f2c4bd; color: #8a2214; }
html body.d1-page .alert-success { background: #e3f4ea; border-color: #b6e0c6; color: #14572f; }
html body.d1-page .alert-info { background: var(--d1-blue-soft); border-color: #c7dcf3; color: var(--d1-ink-2); }
html body.d1-page .badge { border-radius: 99px; font: 600 12px var(--font-body); letter-spacing: 0; text-transform: none; }
html body.d1-page table { font-family: var(--font-body); }
html body.d1-page .table > :not(caption) > * > * { border-bottom-color: var(--d1-line); background: transparent; }
html body.d1-page th { font: 600 12px var(--font-body); text-transform: none; letter-spacing: 0; color: var(--d1-muted); }

/* ---------- account picker ---------- */
html body.d1-page .account-picker-list { border: 1px solid var(--d1-line); border-radius: 10px; background: var(--d1-card); box-shadow: none; padding: 0; overflow: auto; }
html body.d1-page .account-picker-item { border-top: 1px solid var(--d1-line); padding: 8px 14px; margin: 0; font-family: var(--font-body); font-size: 14px; }
html body.d1-page .account-picker-item:first-child { border-top: 0; }
html body.d1-page .account-picker-item:hover { background: var(--d1-paper); }
html body.d1-page .account-picker-item:has(input:checked) { background: var(--d1-blue-soft); }
html body.d1-page .account-picker-item .account-customer-id { font-family: var(--mono); font-size: 12.5px; color: var(--d1-muted); }

/* ---------- dialogs and the How this works drawer ----------
   Drawers (css/drawer.css) bring their own frame; these rules are for what
   is left of the older centred dialogs. */
html body.d1-page :is(.modal-content, .notifications-panel-dialog) { border: 1px solid var(--d1-line); border-radius: 18px; box-shadow: var(--d1-shadow-lg); background: var(--d1-card); }
html body.d1-page dialog::backdrop { background: rgba(20, 26, 36, .38); }
html body.d1-page .modal-backdrop.show { opacity: .38; }
html body.d1-page .tool-guide-kicker { font: 600 12.5px var(--font-body); text-transform: none; letter-spacing: 0; color: var(--d1-muted); }
html body.d1-page .tool-guide-title { font: 800 26px/1.1 var(--sans); text-transform: none; font-variation-settings: normal; letter-spacing: -.015em; }
html body.d1-page .tool-guide-slide-title { font: 650 16px var(--font-body); }
html body.d1-page .tool-guide-card { font-family: var(--font-body); color: var(--d1-ink-2); }
html body.d1-page .tool-guide-note, html body.d1-page .tool-guide-access { border: 0; border-radius: 12px; background: var(--d1-blue-soft); padding: 12px 14px; box-shadow: none; }
html body.d1-page .tool-guide-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d1-line-2); border: 0; }
html body.d1-page .tool-guide-dot[aria-current="true"], html body.d1-page .tool-guide-dot.is-active, html body.d1-page .tool-guide-dot[aria-selected="true"] { width: 22px; border-radius: 99px; background: var(--d1-blue); }
html body.d1-page :is(.btn-close, .notes-drawer-close) { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--d1-line-2); background-color: var(--d1-card); box-shadow: none; }

/* ---------- tabs, nav pills, segmented choices ---------- */
html body.d1-page .nav-pills .nav-link, html body.d1-page .settings-nav a, html body.d1-page .settings-tabs a { border-radius: var(--d1-radius-sm); border: 0; color: var(--d1-ink-2); font: 500 14.5px var(--font-body); }
html body.d1-page .nav-pills .nav-link.active, html body.d1-page .settings-nav a[aria-current], html body.d1-page .settings-nav a.active, html body.d1-page .settings-tabs a.active, html body.d1-page .settings-tabs a[aria-current] { background: var(--d1-blue-soft); color: var(--d1-blue); font-weight: 600; box-shadow: none; }
html body.d1-page .btn-group > .btn { border-radius: 0; }
html body.d1-page .btn-group > .btn:first-child { border-radius: var(--d1-radius-sm) 0 0 var(--d1-radius-sm); }
html body.d1-page .btn-group > .btn:last-child { border-radius: 0 var(--d1-radius-sm) var(--d1-radius-sm) 0; }

/* ---------- footer on every page ---------- */
html body.d1-page .app-footer { background: transparent; border-top: 1px solid var(--d1-line); color: var(--d1-muted); font: 13px var(--font-body); }
html body.d1-page .app-footer * { font-family: var(--font-body); }

/* ---------- shot reports (css/tools/report.css tokens) ---------- */
html body.d1-page.tool-layout { --rep-bg: var(--d1-card); --rep-rule: var(--d1-line); --rep-rule-strong: var(--d1-line); --rep-tint: var(--d1-paper); --rep-radius: 14px; --rep-font: var(--font-body); }
html body.d1-page .rep-panel { border-radius: 14px; border-color: var(--d1-line); overflow: hidden; }
html body.d1-page .tool-sample-badge { background: var(--d1-blue-soft); color: var(--d1-blue); border-radius: 99px; font: 600 12px var(--font-body); text-transform: none; letter-spacing: 0; padding: 3px 10px; }
html body.d1-page .tool-guide-dot.on { width: 22px; border-radius: 99px; background: var(--d1-blue); }
html body.d1-page .shot-maintenance, html body.d1-page .changes-empty { border-radius: 14px; border: 1px dashed var(--d1-line-2); background: transparent; }

/* ---------- settings side menu ---------- */
html body.d1-page .settings-side .tabs a { border: 0; border-radius: var(--d1-radius-sm); background: none; color: var(--d1-ink-2); font: 500 14.5px var(--font-body); box-shadow: none; }
html body.d1-page .settings-side .tabs a:hover { background: var(--d1-paper); color: var(--d1-ink); }
html body.d1-page .settings-side .tabs a.on { background: var(--d1-blue-soft); color: var(--d1-blue); font-weight: 600; }
html body.d1-page .settings-title { font: 800 clamp(28px, 3.2vw, 38px)/1.08 var(--sans); text-transform: none; letter-spacing: -.015em; }

/* ---------- plans page ---------- */
html body.d1-page :is(.plans-balance-item, .plan-card) { border: 1px solid var(--d1-line); border-radius: 14px; box-shadow: none; background: var(--d1-card); }
html body.d1-page .plans-period-switch { border: 1px solid var(--d1-line-2); border-radius: var(--d1-radius-sm); overflow: hidden; box-shadow: none; }
html body.d1-page .plan-card-recommended { border-color: var(--d1-blue); box-shadow: 0 0 0 1px var(--d1-blue) inset; }

/* ---------- type: one body font; monospace only for IDs and code ---------- */
html body.d1-page { --mono: system-ui, -apple-system, 'Segoe UI', sans-serif; }
html body.d1-page :is(code, kbd, pre, .account-customer-id, .customer-id, .cid) { font-family: ui-monospace, 'Fragment Mono', monospace; }

/* ---------- footer: one rule ---------- */
html body.d1-page .app-footer { border-top: 0; }
html body.d1-page .app-footer .app-wrap::before { background: var(--d1-line); height: 1px; }
/* The footer runs as wide as the header and the page (.d1-wrap: 1320px, 32px gutter; 16px on a phone). */
html body.d1-page .app-footer .app-wrap { --gutter: 32px; max-width: 1320px; }
@media (max-width: 900px) { html body.d1-page .app-footer .app-wrap { --gutter: 16px; } }

/* ---------- segmented filters and choices ---------- */
html body.d1-page :is(.notifications-filters, .plans-period-switch) { display: inline-flex; border: 1px solid var(--d1-line-2); border-radius: var(--d1-radius-sm); overflow: hidden; background: var(--d1-card); box-shadow: none; gap: 0; }
html body.d1-page :is(.notifications-filter, .plans-period-option) { border: 0; border-radius: 0; background: none; color: var(--d1-ink-2); padding: 7px 14px; font: 500 13.5px var(--font-body); box-shadow: none; }
html body.d1-page :is(.notifications-filter, .plans-period-option) + :is(.notifications-filter, .plans-period-option) { border-left: 1px solid var(--d1-line-2); }
html body.d1-page :is(.notifications-filter, .plans-period-option)[aria-pressed="true"] { background: var(--d1-blue-soft); color: var(--d1-blue); font-weight: 600; }
html body.d1-page .plans-period-option small { color: var(--d1-muted); font-family: var(--font-body); }
html body.d1-page .plans-period-option[aria-pressed="true"] small { color: var(--d1-blue); }

/* ---------- the scheduler drawer and notifications panels ---------- */
html body.d1-page .sched :is(h1, h2, h3, .empty-title) { text-transform: none; font-variation-settings: normal; }
html body.d1-page .sched-topmeta .sched-kicker { font: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; color: inherit; }
html body.d1-page .sched .sbtn { border-radius: var(--d1-radius-sm); border: 1px solid var(--d1-blue); background: var(--d1-blue); color: #fff; box-shadow: none; font: 600 14px var(--font-body); }
:root[data-theme="dark"] body.d1-page .sched .sbtn { color: #0b1a2b; }
html body.d1-page .sched .sbtn.outline { background: var(--d1-card); border-color: var(--d1-line-2); color: var(--d1-ink); }
html body.d1-page .sched .sbtn.ghost { background: transparent; border-color: transparent; color: var(--d1-blue); }
html body.d1-page .sched .sbtn.danger { background: var(--d1-card); border-color: color-mix(in srgb, #b8301d 40%, var(--d1-line-2)); color: #b8301d; }
html body.d1-page .sched .sbtn:disabled { background: var(--d1-paper); border-color: var(--d1-line); color: var(--d1-muted); }
html body.d1-page .sched .seg { border: 1px solid var(--d1-line-2); border-radius: var(--d1-radius-sm); overflow: hidden; }
html body.d1-page .sched .seg button { border-right: 1px solid var(--d1-line-2); color: var(--d1-ink-2); }
html body.d1-page .sched .seg button.on { background: var(--d1-blue-soft); color: var(--d1-blue); font-weight: 600; }
html body.d1-page .tool-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--d1-line-2); background: var(--d1-card); box-shadow: none; }
html body.d1-page .tool-close:hover { background: var(--d1-paper); }
html body.d1-page .sched :is(.scard, .empty, .notif-card) { border-radius: 14px; }

/* ---------- dark mode: disabled buttons stay readable ---------- */
:root[data-theme="dark"] body.d1-page .btn:is(:disabled, .disabled, [aria-disabled="true"]) { background: var(--d1-paper); border-color: var(--d1-line); color: var(--d1-muted); }

/* ---------- sign-in page ---------- */
html body.d1-page .poster { background: var(--d1-paper); }
html body.d1-page .poster .t { font: 800 clamp(44px, 6vw, 76px)/1.02 var(--sans); font-variation-settings: normal; text-transform: none; letter-spacing: -.02em; color: var(--d1-ink); }
html body.d1-page .auth-footer a { background: none; color: var(--d1-blue); font-weight: 600; text-decoration: none; }
html body.d1-page .auth-footer a:hover { text-decoration: underline; }

/* ---------- ghost-text completion (js/tools/common/ghost_input.js) ----------
   A fixed layer laid over the input: the typed text is invisible (it only
   pushes the suggestion to the caret), the rest of the match is faint.
   pointer-events: none, so clicks still reach the input. */
.ghost-layer { position: fixed; z-index: 1090; pointer-events: none; box-sizing: border-box; white-space: pre; overflow: hidden; border: 0; margin: 0; background: transparent; text-align: left; }
.ghost-layer[hidden] { display: none; }
.ghost-layer .ghost-typed { color: transparent; }
.ghost-layer .ghost-rest { color: var(--d1-muted, var(--muted)); opacity: .75; }
.ghost-layer .ghost-hint { color: var(--d1-muted, var(--muted)); opacity: .6; font-size: .85em; }

/* ---------- page-to-page transitions (2026-11-02) ----------
   Same-site navigations cross-fade instead of flashing white; the header
   keeps its own name so it stays perfectly still. Browsers without View
   Transitions ignore all of this. No motion for reduce-motion users. The
   opt-in itself (@view-transition) is an inline <style> in base.html's
   <head>: Chrome skips the transition when it sits here and a stylesheet
   linked in <body> is still loading. */
/* The name makes the header its own layer, which would trap its menus
   (Shots, the round menu) under later content: the shot tab strip (900) and
   positioned cards. So the header layer sits above both, and below modals
   (1050+) and pop-ups. */
html body.d1-page .d1-top { view-transition-name: d1-top; position: relative; z-index: 1000; }
/* Between shots the shot tab strip and the account bar (macros.run_line) hold
   still too, while the report under them cross-fades. Only the bar is named,
   not its drawer, so the drawer still layers over the report. A page reached
   by a transition skips the bar's own fade-in (base.html adds vt-arrived). */
html body.d1-page .st { view-transition-name: shot-tabs; }
html body.d1-page .tool-run-line-bar { view-transition-name: shot-account-bar; }
html.vt-arrived .tool-run-line-bar { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Toasts (DESIGN.md, "Feedback") ----------
   One toast for the whole app (tools/common/toast.js and the flash messages
   in partials/flash_toasts.html share the markup): bottom left, clear of the
   change queue dock at the bottom centre; a card tinted by its tone with a
   round icon (success tick, danger cross, warning !, info i). Newest at the
   bottom, at most three (toast.js). */
.toast-container {
    position: fixed; left: 16px; bottom: 20px; top: auto; right: auto; z-index: 1100;
    display: flex; flex-direction: column; gap: 8px; padding: 0;
    width: min(380px, calc(100vw - 32px)); pointer-events: none;
    transition: bottom .22s cubic-bezier(.2, .8, .2, 1);
}
/* The queue dock (640px, centred) reaches the toasts below about 1480px
   wide: there they sit above it. */
@media (max-width: 1480px) {
    body:has(.cq-dock:not(.is-hidden)) .toast-container { bottom: 96px; }
}
.toast-container > .toast {
    --t-tone: var(--d1-blue);
    --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.2v.1'/%3E%3C/svg%3E");
    pointer-events: auto; width: 100%; max-width: none; margin: 0;
    font: 500 14px/1.4 var(--sans, system-ui, sans-serif);
    color: var(--d1-ink) !important;
    background: color-mix(in srgb, var(--t-tone) 7%, var(--d1-card)) !important;
    border: 1px solid color-mix(in srgb, var(--t-tone) 28%, var(--d1-line)) !important;
    border-radius: 12px; box-shadow: var(--d1-shadow-lg);
    animation: d1-toast-in .22s cubic-bezier(.2, .8, .2, 1);
}
.toast-container > .toast.text-bg-success {
    --t-tone: var(--green-fill, #1f9e5a);
    --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
}
.toast-container > .toast.text-bg-danger {
    --t-tone: var(--red, #b8301d);
    --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E");
}
.toast-container > .toast.text-bg-warning {
    --t-tone: var(--d1-yellow);
    --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.3v.1'/%3E%3C/svg%3E");
}
.toast-container > .toast > .d-flex { align-items: center; gap: 4px; padding: 10px 8px 10px 12px; }
.toast-container > .toast > .d-flex::before {
    content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--t-tone);
    -webkit-mask: var(--t-icon) center / 16px 16px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: var(--t-icon) center / 16px 16px no-repeat, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.toast-container > .toast .toast-body { flex: 1; min-width: 0; padding: 0 6px 0 8px; overflow-wrap: anywhere; }
/* Undo: blue text on a clear background, the same 28px height as Close. */
html body .toast-container > .toast .toast-action {
    flex: none; height: 28px; min-height: 0; margin: 0; padding: 0 10px; border-radius: 8px;
    font: 600 13.5px/1 var(--sans, system-ui, sans-serif); cursor: pointer;
    color: var(--d1-blue); background: transparent; border: 0; box-shadow: none;
}
html body .toast-container > .toast .toast-action:hover,
html body .toast-container > .toast .toast-action:focus-visible { background: var(--d1-blue-soft); color: var(--d1-blue); }
/* Close: an × drawn in the ink colour on a clear background (no invert filter, which would grey the box in dark). */
html body .toast-container > .toast .btn-close {
    --t-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f1b1c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
    flex: none; margin: 0 !important; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; box-shadow: none;
    opacity: .6; filter: none; background: transparent var(--t-x) center / 12px 12px no-repeat;
}
html body .toast-container > .toast .btn-close:hover { opacity: 1; background-color: color-mix(in srgb, var(--d1-ink) 8%, transparent); }
:root[data-theme="dark"] body .toast-container > .toast .btn-close {
    --t-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23eef2f7' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body .toast-container > .toast .btn-close {
        --t-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23eef2f7' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
    }
}
.toast-container > .toast.is-leaving { animation: d1-toast-out .18s ease-in forwards; }
@keyframes d1-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes d1-toast-out { to { opacity: 0; transform: translateX(-16px); } }
@media (prefers-reduced-motion: reduce) {
    .toast-container > .toast, .toast-container > .toast.is-leaving { animation: none; }
}

/* ---------- Buttons that confirm in place (common/button_feedback.js) ----------
   An overlay on the button's own label, so its size never changes. */
.btn.is-done, .btn.is-working { position: relative; }
.btn.is-done:disabled, .btn.is-working:disabled { opacity: 1; }
.btn.is-done::after, .btn.is-working::after {
    position: absolute; inset: -1px; display: grid; place-items: center; padding: 0 6px;
    border-radius: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 600; pointer-events: none;
}
.btn.is-done::after {
    content: attr(data-done-text);
    color: var(--green, #14723f);
    background: color-mix(in srgb, var(--green-fill, #1f9e5a) 12%, var(--d1-card));
    border: 1px solid color-mix(in srgb, var(--green-fill, #1f9e5a) 45%, transparent);
    animation: d1-done-in .16s ease-out;
}
.btn.is-working::after {
    content: ""; background: inherit; border: inherit; /* hides the label; the spinner is ::before */
}
.btn.is-working::before {
    content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
    animation: d1-spin .7s linear infinite; pointer-events: none;
}
@keyframes d1-done-in { from { opacity: 0; transform: scale(.96); } }
@keyframes d1-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn.is-done::after { animation: none; }
    .btn.is-working::before { animation-duration: 2s; }
}

/* ---------- loading screen (base.html, #sh-splash) ----------
   A page-coloured cover over everything while the page builds. The logo and
   "Loading…" only fade in after 200ms (.is-showing), so a fast load looks like
   nothing happened; the cover fades out once the page is in (.is-lifting). */
.sh-splash { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: var(--d1-bg); }
.sh-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: 0; transition: opacity 200ms ease; }
.sh-splash.is-showing .sh-splash-inner { opacity: 1; }
.sh-splash-logo { height: 44px; width: auto; display: block; filter: var(--d1-logo-filter); }
/* System font: the page's own font may still be loading */
.sh-splash-text { font: 500 14px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--muted); letter-spacing: .02em; }
.sh-splash.is-showing .sh-splash-logo { animation: sh-splash-pulse 1.4s ease-in-out infinite; }
.sh-splash.is-lifting { opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
@keyframes sh-splash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
    .sh-splash-inner, .sh-splash.is-lifting { transition: none; }
    .sh-splash.is-showing .sh-splash-logo { animation: none; }
}
@media print { .sh-splash { display: none; } }