/* ══════════════════════════════════════════════════════════════════════════
   canon-doc.css — the Books document components, on canon v5.

   Quotes and invoices share one set of document components, each drawn until now
   by books.css or ui.css, both of which the canon switches off. Everything here is
   a PORT OF THE MARKUP WE HAVE, restyled against the class names the shared
   modules already emit:

     the v2 document header and its stepper   core/ui/docsteps.js, the pages
     linked-record chips                       core/ui/lifecycle.js
     the section rail                          core/ui/docrail.js
     line items                                core/ui/lineitems.js
     the quick-view drawer                     core/ui/drawer.js
     action menus                              core/ui/docactions.js
     the empty state and the status badge      core/ui/doclist.js, core/ui/badge.js
     the seller block, terms, activity         invoices/doc-shared.js
     the live preview                          invoices/doc-preview.js
     the parts panel                           invoices/doc-parts.js
     presence and the edit-lock banner         core/presence.js (its CSS skipped)
     coaching chips                            books/books-coach.js (its CSS skipped)

   and the quote's own option set, site photos and attachments. The skeleton every
   editor shares (.ed-grid, table.ed-items, .ed-totals, .ed-actions) is
   canon-editor.css, which this file follows.

   A status is the canon pill's tone, not the legacy --doc-* palette. Every rule is
   scoped to :root.canon-v5 and layered.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── The status badge, in the canon pill's tones ─────────────────────── */
  :root.canon-v5 .ui-badge {
    --b-ink: var(--c-text-2); --b-edge: var(--c-border); --b-ground: var(--c-sunken);
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px;
    border: 1px solid var(--b-edge); background: var(--b-ground); color: var(--b-ink);
    font-size: 11px; font-weight: 500; line-height: 1.6; white-space: nowrap;
  }
  :root.canon-v5 .ui-badge i { font-size: 12px; }
  :root.canon-v5 .ui-badge[data-status="sent"],
  :root.canon-v5 .ui-badge[data-status="open"],
  :root.canon-v5 .ui-badge[data-status="viewed"] {
    --b-ink: var(--c-on-wash-accent); --b-edge: var(--c-accent-edge); --b-ground: var(--c-accent-soft);
  }
  :root.canon-v5 .ui-badge[data-status="accepted"],
  :root.canon-v5 .ui-badge[data-status="paid"],
  :root.canon-v5 .ui-badge[data-status="viewing"],
  :root.canon-v5 .ui-badge[data-status="delivered"] {
    --b-ink: var(--c-on-wash-ok); --b-edge: color-mix(in srgb, var(--c-ok) 32%, transparent); --b-ground: color-mix(in srgb, var(--c-ok) 10%, transparent);
  }
  :root.canon-v5 .ui-badge[data-status="partially_paid"],
  :root.canon-v5 .ui-badge[data-status="expired"],
  :root.canon-v5 .ui-badge[data-status="complained"],
  :root.canon-v5 .ui-badge[data-status="delivery_delayed"],
  :root.canon-v5 .ui-badge[data-status="unsent"] {
    --b-ink: var(--c-on-wash-warn); --b-edge: color-mix(in srgb, var(--c-warn) 34%, transparent); --b-ground: color-mix(in srgb, var(--c-warn) 10%, transparent);
  }
  :root.canon-v5 .ui-badge[data-status="overdue"],
  :root.canon-v5 .ui-badge[data-status="declined"],
  :root.canon-v5 .ui-badge[data-status="bounced"] {
    --b-ink: var(--c-on-wash-danger); --b-edge: color-mix(in srgb, var(--c-danger) 36%, transparent); --b-ground: var(--c-danger-soft);
  }
  :root.canon-v5 .ui-badge[data-status="void"] { --b-ink: var(--c-cap); }
  :root.canon-v5 .ui-badge[data-status="sent_via"] { padding: 1px 6px; }
  :root.canon-v5 .ui-badge[data-status="sent_via"] i { font-size: 13px; }
  :root.canon-v5 .ui-badge[data-status="viewing"] .ti,
  :root.canon-v5 .nd-viewing-dot { animation: ndc-viewing 1.6s ease-in-out infinite; }
  @keyframes ndc-viewing { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

  /* "Open right now" (core/doc-views.js liveLine). */
  :root.canon-v5 .nd-viewing-now {
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
    font-size: 12px; font-weight: 600; color: var(--c-on-wash-ok);
  }
  :root.canon-v5 .nd-viewing-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

  /* ── The empty state (ndDocList.empty) and loading rows ───────────────── */
  :root.canon-v5 .nd-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 44px 20px; text-align: center;
  }
  :root.canon-v5 .nd-empty > i { font-size: 28px; line-height: 1; color: var(--c-cap); }
  :root.canon-v5 .nd-empty-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .nd-empty-body { margin: 0; max-width: 44ch; font-size: 13px; line-height: 1.55; color: var(--c-text-2); }
  :root.canon-v5 .nd-empty .btn-primary { margin-top: 6px; }
  :root.canon-v5 .nd-empty-link { margin: var(--sp-1) 0 0; max-width: 44ch; font-size: 12px; line-height: 1.5; color: var(--c-cap); }
  :root.canon-v5 .nd-empty-link a { color: var(--c-accent); font-weight: 600; }
  :root.canon-v5 .sk-row {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--c-border);
  }
  :root.canon-v5 .sk-bar { height: 12px; border-radius: 6px; background: var(--c-sunken); }

  /* ── Action menus (core/ui/docactions.js) ─────────────────────────────── */
  :root.canon-v5 .ui-actmenu { position: relative; display: inline-block; }
  :root.canon-v5 .ui-actmenu__trigger { display: inline-flex; align-items: center; gap: 6px; }
  :root.canon-v5 .ui-actmenu__caret { font-size: 14px; color: var(--c-cap); }
  /* Opens upward: the editor's action bar is the last thing on the page. */
  :root.canon-v5 .ui-actmenu__panel {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 200;
    display: flex; flex-direction: column; box-sizing: border-box;
    width: max-content; min-width: 220px; max-width: min(320px, calc(100vw - 24px));
    max-height: min(58vh, 480px); overflow-y: auto; overscroll-behavior: contain; padding: 4px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); box-shadow: var(--float);
  }
  :root.canon-v5 .ui-actmenu__panel[hidden] { display: none; }
  :root.canon-v5 .list-actions .ui-actmenu__panel { top: calc(100% + 6px); bottom: auto; }
  :root.canon-v5 .ui-actmenu__item {
    display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 8px 10px;
    border: 0; border-radius: 6px; background: transparent; color: var(--c-text);
    font-family: inherit; font-size: 13px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
  }
  :root.canon-v5 .ui-actmenu__item:hover,
  :root.canon-v5 .ui-actmenu__item:focus-visible { background: var(--c-card-2); outline: none; }
  :root.canon-v5 .ui-actmenu__item i { flex: none; font-size: 16px; color: var(--c-cap); }
  :root.canon-v5 .ui-actmenu__item--danger,
  :root.canon-v5 .ui-actmenu__item--danger i { color: var(--c-on-wash-danger); }

  /* ── The quick-view drawer (core/ui/drawer.js) ────────────────────────── */
  :root.canon-v5 .nd-drawer-back {
    position: fixed; inset: 0; z-index: 70;
    background: color-mix(in srgb, var(--c-ink-deep) 45%, transparent);
  }
  :root.canon-v5 .nd-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(430px, 94vw);
    display: flex; flex-direction: column; outline: none;
    border-left: 1px solid var(--c-border); background: var(--c-card); box-shadow: var(--float);
  }
  :root.canon-v5 .nd-drawer__head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--c-border); }
  :root.canon-v5 .nd-drawer__title {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
    font-family: "Sora", system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--c-text);
  }
  :root.canon-v5 .nd-drawer__close {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 6px; background: transparent; color: var(--c-cap); font-size: 18px; cursor: pointer;
  }
  :root.canon-v5 .nd-drawer__close:hover { background: var(--c-card-2); color: var(--c-text); }
  :root.canon-v5 .nd-drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px; color: var(--c-text); }
  :root.canon-v5 .nd-drawer__foot {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--c-border);
  }
  :root.canon-v5 .nd-drawer__foot .btn-primary,
  :root.canon-v5 .nd-drawer__foot .btn-ghost,
  :root.canon-v5 .nd-drawer__foot .btn-danger-ghost { flex: 1 1 auto; justify-content: center; text-decoration: none; }
  :root.canon-v5 .nd-qv-cust { margin: 2px 0 1px; font-size: 14px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .nd-qv-sub { font-size: 12px; color: var(--c-text-2); overflow-wrap: break-word; }
  :root.canon-v5 .nd-qv-hero { margin: 16px 0 4px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-sunken); }
  :root.canon-v5 .nd-qv-hero .amt {
    font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums;
    font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--c-text);
  }
  :root.canon-v5 .nd-qv-hero .sub { margin-top: 3px; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 .nd-qv-rows { margin-top: 14px; }
  :root.canon-v5 .nd-qv-row {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
    border-top: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-2);
  }
  :root.canon-v5 .nd-qv-row b { font-weight: 600; color: var(--c-text); }

  /* ── Presence avatars and the edit-lock banner (core/presence.js) ─────── */
  :root.canon-v5 .nd-presence { display: inline-flex; align-items: center; }
  :root.canon-v5 .nd-presence:empty { display: none; }
  :root.canon-v5 .nd-presence .ndp-av,
  :root.canon-v5 .nd-presence .ndp-more {
    display: grid; place-items: center; width: 26px; height: 26px; margin-left: -7px; overflow: hidden;
    border: 2px solid var(--c-card); border-radius: 50%; background-size: cover; background-position: center;
    font-size: 10px; font-weight: 600; color: white;
  }
  :root.canon-v5 .nd-presence .ndp-av:first-child { margin-left: 0; }
  :root.canon-v5 .nd-presence .ndp-more { background: var(--c-cap); }
  :root.canon-v5 .nd-presence .ndp-editing { outline: 2px solid var(--c-ok); outline-offset: 1px; }
  :root.canon-v5 .nd-lockbar {
    display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--c-warn) 34%, transparent); border-radius: 8px;
    background: color-mix(in srgb, var(--c-warn) 10%, transparent);
    font-size: 13px; line-height: 1.45; color: var(--c-text);
  }
  :root.canon-v5 .nd-lockbar[hidden] { display: none; }
  :root.canon-v5 .nd-lockbar > span { flex: 1; min-width: 0; }
  :root.canon-v5 .nd-lockbar > i { flex: none; color: var(--c-on-wash-warn); }
  :root.canon-v5 .nd-lockbar button { flex: none; }

  /* ══ The editor ══════════════════════════════════════════════════════════ */

  /* The customer insight strip (doc-shared.js renderDocInsight), under the v2
     header. layout-v3.js never lifts it into a rail here: that needs the v2
     editor off, and production runs it on. */
  :root.canon-v5 #editorView > .doc-insight:not(:empty) { margin: 0 0 16px; }
  :root.canon-v5 #editorView > .doc-insight .insight-strip { margin-top: 0; }

  /* A standing warning above the form (no ABN). A direct child only: .warn is
     also the timeline's step state. */
  :root.canon-v5 #editorView > .warn,
  :root.canon-v5 #editorView .doc-split-main > .warn {
    margin: 0 0 16px; padding: 10px 14px; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--c-warn) 34%, transparent);
    background: color-mix(in srgb, var(--c-warn) 10%, transparent);
    font-size: 13px; line-height: 1.55; color: var(--c-text);
  }
  :root.canon-v5 #editorView > .warn > i,
  :root.canon-v5 #editorView .doc-split-main > .warn > i { margin-right: 4px; color: var(--c-on-wash-warn); }
  :root.canon-v5 #editorView .ed-dates { font-size: 12px; font-weight: 400; color: var(--c-cap); }

  /* Notices: a teammate's document, and where a deposit's balance comes from. */
  :root.canon-v5 #editorView .doc-notowner,
  :root.canon-v5 #editorView .inv-depnote {
    margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 8px;
    background: var(--c-sunken); font-size: 13px; line-height: 1.55; color: var(--c-text-2);
  }
  :root.canon-v5 #editorView .doc-notowner { display: flex; align-items: flex-start; gap: 8px; }
  :root.canon-v5 #editorView .doc-notowner i,
  :root.canon-v5 #editorView .inv-depnote i { flex: none; margin-right: 4px; font-size: 15px; color: var(--c-cap); }
  :root.canon-v5 #editorView .inv-depnote a { font-weight: 600; color: var(--c-on-wash-accent); text-decoration: none; white-space: nowrap; }

  /* From: the seller snapshot on the document. */
  :root.canon-v5 #editorView .ed-from {
    margin: 0 0 16px; padding: 16px 20px; border: 1px solid var(--c-border); border-radius: 10px;
    background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 #editorView .ed-from .lbl { margin: 0 0 6px; }
  :root.canon-v5 #editorView .ed-from .from-name { font-size: 14px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 #editorView .ed-from .from-line { margin-top: 2px; font-size: 12px; color: var(--c-text-2); }

  /* The standing terms that print under the notes. */
  :root.canon-v5 #editorView .doc-terms-ed { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); }
  :root.canon-v5 #editorView .doc-terms-ed .lbl { margin: 0 0 4px; }
  :root.canon-v5 #editorView .doc-terms-ed-body {
    max-height: 140px; overflow-y: auto; white-space: pre-wrap; font-size: 12px; line-height: 1.55; color: var(--c-text-2);
  }
  :root.canon-v5 #editorView .doc-terms-ed.empty { font-size: 12px; line-height: 1.55; color: var(--c-text-2); }
  :root.canon-v5 #editorView .doc-terms-ed a { font-weight: 600; color: var(--c-on-wash-accent); }

  /* An inline action in a label (a sent quote's expiry), and the saved-customer line. */
  :root.canon-v5 #editorView .lbl .lnk,
  :root.canon-v5 #editorView .cust-link .lnk {
    margin-left: 6px; padding: 0; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--c-on-wash-accent); text-decoration: underline; text-underline-offset: 2px;
  }
  :root.canon-v5 #editorView .cust-link .lnk { margin-left: 0; font-size: 12px; }
  :root.canon-v5 #editorView .cust-link .lnk:disabled { opacity: .6; cursor: default; text-decoration: none; }
  :root.canon-v5 #editorView .cust-link { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 #editorView .cust-link i { flex: none; font-size: 14px; color: var(--c-cap); }
  :root.canon-v5 #editorView .cust-link a { font-weight: 600; color: var(--c-on-wash-accent); text-decoration: none; }
  :root.canon-v5 #editorView .cust-link a:hover { text-decoration: underline; }

  /* ── The v2 header (html.doc-header-v2) ───────────────────────────────── */
  /* Sticky under the app bar (54px), not under the top of the window. */
  :root.canon-v5 #editorView .ed-head2 {
    position: sticky; top: 62px; z-index: 20; margin: 0 0 16px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 #editorView .ed-head2__main { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
  :root.canon-v5 #editorView .ed-head2__back {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-card); color: var(--c-text-2); cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  :root.canon-v5 #editorView .ed-head2__back:hover { background: var(--c-card-2); color: var(--c-text); }
  :root.canon-v5 #editorView .ed-head2__back:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  :root.canon-v5 #editorView .ed-head2__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  :root.canon-v5 #editorView .ed-head2__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  :root.canon-v5 #editorView .ed-head2__row h2 {
    max-width: 42ch; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: "Sora", system-ui, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--c-text);
  }
  :root.canon-v5 #editorView .ed-head2__no {
    padding: 1px 6px; border: 1px solid var(--c-border); border-radius: 4px;
    font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--c-text-2);
  }
  :root.canon-v5 #editorView .ed-head2__links { display: inline-flex; min-width: 0; }
  :root.canon-v5 #editorView .ed-head2__links:empty { display: none; }
  :root.canon-v5 #editorView .ed-head2__warn {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600; color: var(--c-on-wash-warn);
    background: color-mix(in srgb, var(--c-warn) 10%, transparent);
  }
  :root.canon-v5 #editorView .ed-head2__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 #editorView .ed-head2__money { flex: none; text-align: right; }
  :root.canon-v5 #editorView .ed-head2__money b {
    display: block; line-height: 1.15; color: var(--c-text);
    font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  }
  :root.canon-v5 #editorView .ed-head2__money small { font-size: 11px; color: var(--c-cap); }
  :root.canon-v5 #editorView .ed-head2__money small.is-due { font-weight: 600; color: var(--c-on-wash-warn); }
  :root.canon-v5 #editorView .ed-head2__act { display: flex; align-items: center; gap: 10px; flex: none; padding-left: 14px; border-left: 1px solid var(--c-border); }
  :root.canon-v5 #editorView .ed-head2__act .btn-primary { white-space: nowrap; }

  /* The stepper (ndDocSteps). Done, now and to-do differ by icon as well as colour. */
  :root.canon-v5 .ui-steps { display: flex; align-items: center; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
  :root.canon-v5 .ui-steps::-webkit-scrollbar { display: none; }
  :root.canon-v5 .ui-steps__step {
    display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 9px;
    border: 1px solid transparent; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 500; color: var(--c-cap);
  }
  :root.canon-v5 .ui-steps__step i { font-size: 14px; }
  :root.canon-v5 .ui-steps__lbl { display: inline-flex; align-items: baseline; gap: 6px; }
  :root.canon-v5 .ui-steps__lbl small { font-weight: 400; color: var(--c-text-2); }
  :root.canon-v5 .ui-steps__step.is-done { color: var(--c-text-2); }
  :root.canon-v5 .ui-steps__step.is-done i { color: var(--c-on-wash-ok); }
  :root.canon-v5 .ui-steps__step.is-now { border-color: var(--c-accent-edge); background: var(--c-accent-soft); font-weight: 600; color: var(--c-on-wash-accent); }
  :root.canon-v5 .ui-steps__step.is-now small { color: inherit; }
  :root.canon-v5 .ui-steps__line { flex: none; width: 20px; height: 1px; background: var(--c-border-2); }
  :root.canon-v5 .ui-steps__line.is-done { background: color-mix(in srgb, var(--c-ok) 45%, transparent); }
  :root.canon-v5 .ui-steps__trail { flex: none; margin-left: auto; padding-left: 14px; }
  :root.canon-v5 .mini-link {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-card); color: var(--c-text-2);
    font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  }
  :root.canon-v5 .mini-link:hover { background: var(--c-card-2); color: var(--c-text); }
  :root.canon-v5 .mini-link i { font-size: 14px; }

  /* Linked records (ndLifecycle): Quote → Job → Invoice. */
  :root.canon-v5 .ui-lc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 12px; }
  :root.canon-v5 .ui-lc--compact { gap: 8px; margin: 0; }
  :root.canon-v5 .ui-lc__step {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; white-space: nowrap;
    border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-sunken); color: var(--c-text-2);
    font-family: inherit; font-size: inherit; text-decoration: none;
  }
  :root.canon-v5 .ui-lc__step i:first-child { font-size: 13px; color: var(--c-cap); }
  :root.canon-v5 .ui-lc__step em { font-size: 11px; font-style: normal; color: var(--c-cap); }
  :root.canon-v5 a.ui-lc__step:hover,
  :root.canon-v5 button.ui-lc__step.is-action:hover { background: var(--c-card-2); color: var(--c-text); }
  :root.canon-v5 button.ui-lc__step.is-action { cursor: pointer; }
  :root.canon-v5 .ui-lc__step.is-todo { border-style: dashed; color: var(--c-cap); }
  :root.canon-v5 .ui-lc__step.is-current { border-color: var(--c-accent-edge); background: var(--c-accent-soft); font-weight: 600; color: var(--c-on-wash-accent); }
  :root.canon-v5 .ui-lc__step.is-current i:first-child { color: inherit; }
  :root.canon-v5 button.ui-lc__unlink {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; margin-left: -4px;
    border: 0; border-radius: 999px; background: transparent; color: var(--c-cap);
    font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer;
  }
  :root.canon-v5 button.ui-lc__unlink:hover { background: var(--c-danger-soft); color: var(--c-on-wash-danger); }
  :root.canon-v5 .ui-lc__sep { font-size: 12px; color: var(--c-cap); }

  /* The section rail (ndDocRail). In flow under the header rather than a second
     sticky bar beneath a sticky header of varying height. */
  :root.canon-v5 .ui-docrail { display: flex; gap: 6px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
  :root.canon-v5 .ui-docrail::-webkit-scrollbar { display: none; }
  :root.canon-v5 .ui-docrail__seg {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 30px; padding: 0 12px; white-space: nowrap;
    border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-card); color: var(--c-text-2);
    font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  :root.canon-v5 .ui-docrail__seg:hover { background: var(--c-card-2); color: var(--c-text); }
  :root.canon-v5 .ui-docrail__seg:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  :root.canon-v5 .ui-docrail__seg b { font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; color: var(--c-cap); }
  :root.canon-v5 .ui-docrail__seg.is-active { border-color: var(--c-accent-edge); background: var(--c-accent-soft); color: var(--c-on-wash-accent); }
  :root.canon-v5 .ui-docrail__seg.is-active b { color: inherit; }

  /* ── Line items (ndLineItems.rows) ────────────────────────────────────── */
  /* The add-line actions are chips, not a run of links. */
  :root.canon-v5 #editorView .items-head > span { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
  :root.canon-v5 #editorView .items-head .link {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 28px; padding: 0 10px; white-space: nowrap;
    border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-card); color: var(--c-text-2);
    font-size: 12px; font-weight: 500; text-decoration: none;
  }
  :root.canon-v5 #editorView .items-head .link:hover { background: var(--c-card-2); color: var(--c-text); }
  :root.canon-v5 #editorView .items-head .link.ai-link { border-color: var(--c-accent-edge); background: var(--c-accent-soft); color: var(--c-on-wash-accent); }

  :root.canon-v5 #editorView table.ed-items td { vertical-align: top; }
  /* Top-aligned so a long description grows downward; on a row of 30px fields
     the plain-text amount then sits above the line of text beside it. */
  :root.canon-v5 #editorView table.ed-items tr:has(input) td.num { padding-top: 14px; }
  :root.canon-v5 #editorView table.ed-items th.dragcell,
  :root.canon-v5 #editorView table.ed-items td.dragcell { width: 22px; padding-right: 0; }
  :root.canon-v5 #editorView table.ed-items td.dragcell { padding-top: 14px; }
  :root.canon-v5 #editorView .draghandle { cursor: grab; user-select: none; letter-spacing: -1px; font-size: 13px; color: var(--c-cap); opacity: .6; }
  :root.canon-v5 #editorView table.ed-items tr:hover .draghandle { opacity: 1; }
  :root.canon-v5 #editorView table.ed-items tr.drag-over td { box-shadow: inset 0 2px 0 var(--c-accent); }
  :root.canon-v5 #editorView table.ed-items td.it-desc { position: relative; width: 100%; }

  /* A table of outlined fields reads as a form, not as the document it makes:
     line fields show their edge only when reached for. Same selector shape as
     the field rule in canon-editor.css, which this has to follow and beat. */
  :root.canon-v5 #editorView table.ed-items td input:not([type="checkbox"]):not([type="radio"]),
  :root.canon-v5 #editorView table.ed-items td textarea { border-color: transparent; background: transparent; }
  :root.canon-v5 #editorView table.ed-items td input:not([type="checkbox"]):not([type="radio"]):hover,
  :root.canon-v5 #editorView table.ed-items td textarea:hover { border-color: var(--c-border-2); }
  :root.canon-v5 #editorView table.ed-items td input:not([type="checkbox"]):not([type="radio"]):focus,
  :root.canon-v5 #editorView table.ed-items td textarea:focus { border-color: var(--c-accent); background: var(--c-sunken); }
  :root.canon-v5 #editorView table.ed-items textarea.it-desc-input {
    display: block; width: 100%; height: auto; min-height: 30px; padding: 5px 30px 5px 8px;
    overflow: hidden; resize: none; line-height: 1.4; field-sizing: content;
  }
  :root.canon-v5 #editorView table.ed-items td input.w-qty:not([type="checkbox"]):not([type="radio"]) { width: 70px; text-align: right; }
  :root.canon-v5 #editorView table.ed-items td input.w-unit:not([type="checkbox"]):not([type="radio"]) { width: 60px; }
  :root.canon-v5 #editorView table.ed-items td input.w-price:not([type="checkbox"]):not([type="radio"]) { width: 100px; text-align: right; }
  :root.canon-v5 #editorView table.ed-items td input.w-disc:not([type="checkbox"]):not([type="radio"]) { width: 74px; text-align: right; }
  :root.canon-v5 #editorView table.ed-items input[type="number"] { appearance: textfield; }
  :root.canon-v5 #editorView table.ed-items input[type="number"]::-webkit-outer-spin-button,
  :root.canon-v5 #editorView table.ed-items input[type="number"]::-webkit-inner-spin-button { margin: 0; appearance: none; }
  :root.canon-v5 #editorView table.ed-items .it-desc-expand {
    position: absolute; top: 12px; right: 16px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
    border: 1px solid var(--c-border); border-radius: 4px; background: var(--c-card); color: var(--c-cap); cursor: pointer; opacity: .55;
  }
  :root.canon-v5 #editorView table.ed-items .it-desc-expand i { font-size: 13px; }
  :root.canon-v5 #editorView table.ed-items tr:hover .it-desc-expand,
  :root.canon-v5 #editorView table.ed-items tr:focus-within .it-desc-expand { opacity: 1; }
  :root.canon-v5 #editorView table.ed-items .it-desc-expand:hover { border-color: var(--c-accent-edge); color: var(--c-on-wash-accent); }
  :root.canon-v5 #editorView table.ed-items .it-desc-expand:focus-visible { opacity: 1; outline: 2px solid var(--c-accent); outline-offset: 1px; }
  :root.canon-v5 #editorView .gst-cell { display: flex; align-items: center; gap: 6px; min-height: 30px; white-space: nowrap; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 #editorView table.ed-items td.it-actions { white-space: nowrap; }
  :root.canon-v5 #editorView .it-save,
  :root.canon-v5 #editorView table.ed-items .x {
    display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; margin-top: 2px;
    border: 0; border-radius: 6px; background: transparent; color: var(--c-cap); line-height: 1; cursor: pointer;
  }
  :root.canon-v5 #editorView .it-save { font-size: 16px; }
  :root.canon-v5 #editorView table.ed-items .x { font-size: 18px; opacity: .45; }
  :root.canon-v5 #editorView table.ed-items tr:hover .x,
  :root.canon-v5 #editorView table.ed-items tr:focus-within .x { opacity: 1; }
  :root.canon-v5 #editorView .it-save:hover { background: var(--c-card-2); color: var(--c-on-wash-accent); }
  :root.canon-v5 #editorView table.ed-items .x:hover { background: var(--c-danger-soft); color: var(--c-on-wash-danger); }
  /* Heading and note rows are structure. lineitems.js writes their weight and
     colour inline, which only !important can restate. */
  :root.canon-v5 #editorView table.ed-items tr.li-heading { background: var(--c-sunken); }
  :root.canon-v5 #editorView table.ed-items tr.li-heading td.it-desc,
  :root.canon-v5 #editorView table.ed-items tr.li-heading .it-desc-input {
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-2) !important;
  }
  :root.canon-v5 #editorView table.ed-items tr.li-text td.it-desc,
  :root.canon-v5 #editorView table.ed-items tr.li-text .it-desc-input { font-size: 12px; font-style: italic; color: var(--c-text-2) !important; }
  @media (hover: none) {
    :root.canon-v5 #editorView table.ed-items .x,
    :root.canon-v5 #editorView .draghandle,
    :root.canon-v5 #editorView table.ed-items .it-desc-expand { opacity: 1; }
    :root.canon-v5 #editorView table.ed-items td input:not([type="checkbox"]):not([type="radio"]),
    :root.canon-v5 #editorView table.ed-items td textarea { border-color: var(--c-border); }
  }

  /* ── Coaching chips (books-coach.js; its own CSS skipped under the gate) ─ */
  :root.canon-v5 #editorView .ed-coach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
  :root.canon-v5 #editorView .ed-coach:empty { display: none; }
  :root.canon-v5 #editorView .ed-coach .cch {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--c-border); background: var(--c-sunken); color: var(--c-text-2);
    font-family: inherit; font-size: 12px; line-height: 1.4;
  }
  :root.canon-v5 #editorView .ed-coach .cch i { flex: none; font-size: 14px; }
  :root.canon-v5 #editorView .ed-coach .cch-warn {
    border-color: color-mix(in srgb, var(--c-danger) 36%, transparent); background: var(--c-danger-soft); color: var(--c-on-wash-danger);
  }
  :root.canon-v5 #editorView .ed-coach .cch-info,
  :root.canon-v5 #editorView .ed-coach .cch-ai { border-color: var(--c-accent-edge); background: var(--c-accent-soft); color: var(--c-on-wash-accent); }
  :root.canon-v5 #editorView .ed-coach .cch-ok {
    border-color: color-mix(in srgb, var(--c-ok) 32%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, transparent); color: var(--c-on-wash-ok);
  }
  :root.canon-v5 #editorView .ed-coach .cch-btn { border-color: var(--c-accent-edge); background: var(--c-card); font-weight: 600; color: var(--c-on-wash-accent); cursor: pointer; }
  :root.canon-v5 #editorView .ed-coach .cch-btn:hover { background: var(--c-accent-soft); }
  :root.canon-v5 #editorView .ed-coach .cch-btn[disabled] { opacity: .6; cursor: default; }
  :root.canon-v5 #editorView .ed-coach .cch-muted { font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 #editorView .ed-coach .cch-ask { flex: 1 0 100%; margin-top: 2px; }
  :root.canon-v5 #editorView .ed-coach .cch-askbar { display: flex; align-items: center; gap: 6px; }
  :root.canon-v5 #editorView .ed-coach .cch-askbar input:not([type="checkbox"]):not([type="radio"]) { flex: 1; height: 32px; padding: 0 12px; border-radius: 999px; }
  :root.canon-v5 #editorView .ed-coach .cch-thread { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  :root.canon-v5 #editorView .ed-coach .cch-turn { font-size: 13px; line-height: 1.5; color: var(--c-text); }
  :root.canon-v5 #editorView .ed-coach .cch-q { margin-bottom: 2px; font-weight: 600; color: var(--c-text-2); }
  :root.canon-v5 #editorView .ed-coach .cch-a ul { margin: 4px 0 4px 18px; padding: 0; list-style: disc; }
  :root.canon-v5 #editorView .ed-coach .cch-a li { margin: 2px 0; }
  :root.canon-v5 #editorView .ed-coach .cch-a strong { font-weight: 600; }
  :root.canon-v5 #editorView .ed-coach .cch-a br + br { display: none; }
  :root.canon-v5 #editorView .ed-coach .cch-clear { padding: 3px 9px; font-size: 12px; }
  :root.canon-v5 #editorView .ed-coach .cch-err { color: var(--c-on-wash-danger); }

  /* ── Activity (doc_events) ────────────────────────────────────────────── */
  :root.canon-v5 #editorView .ed-activity { margin: 20px 0 6px; }
  :root.canon-v5 #editorView .ed-activity .act-row {
    display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--c-border);
    font-size: 13px; color: var(--c-text-2);
  }
  :root.canon-v5 #editorView .ed-activity .act-dot { position: relative; top: -1px; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-cap); }
  :root.canon-v5 #editorView .ed-activity .act-row[data-actor="customer"] .act-dot { background: var(--c-accent); }
  :root.canon-v5 #editorView .ed-activity .act-row[data-actor="system"] .act-dot { background: var(--c-border-2); }
  :root.canon-v5 #editorView .ed-activity .act-label { flex: 1; min-width: 0; color: var(--c-text); }
  :root.canon-v5 #editorView .ed-activity .act-detail { color: var(--c-text-2); }
  :root.canon-v5 #editorView .ed-activity .act-actor { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: var(--c-cap); }
  :root.canon-v5 #editorView .ed-activity .act-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-cap); }

  /* ── The status timeline (older editors) ──────────────────────────────── */
  :root.canon-v5 #editorView .tl { display: flex; align-items: flex-start; margin: 0 0 16px; }
  :root.canon-v5 #editorView .tl-step { position: relative; flex: 1; text-align: center; font-size: 12px; }
  :root.canon-v5 #editorView .tl-step::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--c-border-2); }
  :root.canon-v5 #editorView .tl-step:first-child::before { display: none; }
  :root.canon-v5 #editorView .tl-dot { position: relative; z-index: 1; display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--c-border-2); background: var(--c-card); }
  :root.canon-v5 #editorView .tl-step.done .tl-dot { border-color: var(--c-ok); background: var(--c-ok); }
  :root.canon-v5 #editorView .tl-step.done::before { background: var(--c-ok); }
  :root.canon-v5 #editorView .tl-step.warn .tl-dot { border-color: var(--c-danger); background: var(--c-danger); }
  :root.canon-v5 #editorView .tl-step.warn::before { background: var(--c-danger); }
  :root.canon-v5 #editorView .tl-label { display: block; margin-top: 5px; font-weight: 600; color: var(--c-text-2); }
  :root.canon-v5 #editorView .tl-step.done .tl-label { color: var(--c-text); }
  :root.canon-v5 #editorView .tl-step.warn .tl-label { color: var(--c-on-wash-danger); }
  :root.canon-v5 #editorView .tl-date { display: block; margin-top: 1px; font-size: 11px; color: var(--c-cap); }

  /* ── The parts panel (doc-parts.js): internal, never on the document ──── */
  /* A quieter companion to the lines, not a second copy: dashed and sunken. */
  :root.canon-v5 #editorView .qp-wrap { margin: 24px 0 0; border: 1px dashed var(--c-border-2); border-radius: 10px; background: var(--c-sunken); }
  :root.canon-v5 #editorView .qp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
  :root.canon-v5 #editorView .qp-fold { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--c-text); font-family: inherit; cursor: pointer; }
  :root.canon-v5 #editorView .qp-fold h3 { margin: 0; font-size: 14px; font-weight: 600; }
  :root.canon-v5 #editorView .qp-caret { font-size: 16px; color: var(--c-cap); transition: transform var(--dur) var(--ease); }
  :root.canon-v5 #editorView .qp-wrap.is-folded .qp-caret { transform: rotate(-90deg); }
  :root.canon-v5 #editorView .qp-wrap.is-folded .qp-body { display: none; }
  :root.canon-v5 #editorView .qp-count {
    min-width: 20px; padding: 1px 7px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-card);
    font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; text-align: center; color: var(--c-text-2);
  }
  :root.canon-v5 #editorView .qp-count:empty { display: none; }
  :root.canon-v5 #editorView .qp-headnote { font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 #editorView .qp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
  :root.canon-v5 #editorView .qp-body { padding: 0 14px 12px; }
  :root.canon-v5 #editorView .qp-empty { padding: 10px 2px 12px; font-size: 13px; line-height: 1.5; color: var(--c-text-2); }
  :root.canon-v5 #editorView .qp-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-border); }
  :root.canon-v5 #editorView .qp-row:last-child { border-bottom: 0; }
  :root.canon-v5 #editorView .qp-row input:not([type="checkbox"]) { height: 30px; padding: 0 8px; background: var(--c-card); font-size: 13px; }
  :root.canon-v5 #editorView .qp-row input.qp-q:not([type="checkbox"]) { flex: none; width: 66px; text-align: right; }
  :root.canon-v5 #editorView .qp-row input.qp-u:not([type="checkbox"]) { flex: none; width: 52px; }
  :root.canon-v5 #editorView .qp-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  :root.canon-v5 #editorView .qp-meta { font-size: 11px; color: var(--c-cap); }
  :root.canon-v5 #editorView .qp-cost { flex: none; display: flex; align-items: center; gap: 8px; }
  :root.canon-v5 #editorView .qp-cost input.qp-c:not([type="checkbox"]) { width: 92px; text-align: right; }
  :root.canon-v5 #editorView .qp-line { min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 #editorView .qp-nocost { color: var(--c-cap); }
  :root.canon-v5 #editorView .qp-x { padding: 4px; border: 0; background: none; font-size: 15px; line-height: 1; color: var(--c-cap); cursor: pointer; }
  :root.canon-v5 #editorView .qp-x:hover { color: var(--c-on-wash-danger); }
  :root.canon-v5 #editorView .qp-row.is-ro { gap: 12px; font-size: 13px; color: var(--c-text); }
  :root.canon-v5 #editorView .qp-row.is-ro .qp-q { width: 66px; text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text-2); }
  :root.canon-v5 #editorView .qp-row.is-ro .qp-c { margin-left: auto; font-variant-numeric: tabular-nums; }
  :root.canon-v5 #editorView .qp-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; padding: 10px 0 2px; border-top: 1px solid var(--c-border); }
  :root.canon-v5 #editorView .qp-foot:empty { display: none; }
  :root.canon-v5 #editorView .qp-sums { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 #editorView .qp-vs { color: var(--c-cap); }
  /* Three tones, not pass and fail: labour still comes out of what is left. */
  :root.canon-v5 #editorView .qp-margin { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
  :root.canon-v5 #editorView .qp-margin.is-good { background: color-mix(in srgb, var(--c-ok) 12%, transparent); color: var(--c-on-wash-ok); }
  :root.canon-v5 #editorView .qp-margin.is-ok { background: color-mix(in srgb, var(--c-warn) 12%, transparent); color: var(--c-on-wash-warn); }
  :root.canon-v5 #editorView .qp-margin.is-thin { background: var(--c-danger-soft); color: var(--c-on-wash-danger); }
  :root.canon-v5 #editorView .qp-warn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 #editorView .qp-savekit { margin-left: auto; }
  :root.canon-v5 #editorView .qp-describe { margin-left: auto; }
  :root.canon-v5 #editorView .qp-describe + .qp-savekit { margin-left: 0; }
  /* "Write description from parts" sits on the Notes label's line. */
  :root.canon-v5 #editorView .dsw-trigger { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; font-size: 12px; }

  /* ── "Customer sees" — itemised or lump sum (doc-shared.js priceDisplayRow) ── */
  :root.canon-v5 #editorView .pd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 #editorView .pd-lbl { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 #editorView .pd-seg { display: inline-flex; padding: 2px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-sunken); }
  :root.canon-v5 #editorView .pd-opt {
    padding: 4px 10px; border: 0; border-radius: 6px; background: none;
    font-family: inherit; font-size: 12px; font-weight: 500; color: var(--c-text-2); cursor: pointer;
  }
  :root.canon-v5 #editorView .pd-opt[aria-checked="true"] { background: var(--c-card); color: var(--c-text); font-weight: 600; box-shadow: 0 0 0 1px var(--c-border); }
  :root.canon-v5 #editorView .pd-opt:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
  :root.canon-v5 #editorView .pd-hint { color: var(--c-cap); }
  :root.canon-v5 #editorView .pd-row.is-ro { padding: 8px 10px; border-radius: 8px; background: var(--c-sunken); }
  :root.canon-v5 #editorView .pd-row.is-ro .link { margin-left: auto; }

  /* ── Price from description (install-estimate.js) — a wide .bk-modal ────── */
  :root.canon-v5 .ies-modal { max-width: 960px; }
  :root.canon-v5 .ies-modal .ies-fine { font-size: 11px; font-weight: 400; color: var(--c-cap); }
  :root.canon-v5 .ies-modal p.ies-fine { margin: 8px 0 0; font-size: 12px; }
  :root.canon-v5 .ies-modal .ies-wait { display: flex; align-items: center; gap: 10px; padding: 24px 2px; color: var(--c-text-2); }
  :root.canon-v5 .ies-modal .ies-err { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--c-on-wash-danger); }
  :root.canon-v5 .ies-modal .ies-read { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; }
  :root.canon-v5 .ies-modal .ies-read .lbl { margin: 0; }
  :root.canon-v5 .ies-modal .ies-read > div { flex: 1; min-width: 200px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .ies-modal .ies-qs { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--c-sunken); }
  :root.canon-v5 .ies-modal .ies-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
  :root.canon-v5 .ies-modal .ies-q-text { min-width: 180px; color: var(--c-text); }
  :root.canon-v5 .ies-modal .ies-q-hint { font-size: 11px; color: var(--c-cap); }
  :root.canon-v5 .ies-modal .ies-q:not(.is-answered) .ies-q-hint { color: var(--c-on-wash-warn); }
  :root.canon-v5 .ies-modal .ies-seg { display: inline-flex; flex-wrap: wrap; padding: 2px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-card); }
  :root.canon-v5 .ies-modal .ies-opt { padding: 3px 9px; border: 0; border-radius: 6px; background: none; font-family: inherit; font-size: 12px; color: var(--c-text-2); cursor: pointer; }
  :root.canon-v5 .ies-modal .ies-opt[aria-checked="true"] { background: var(--c-accent-soft); color: var(--c-text); font-weight: 600; }
  :root.canon-v5 .ies-modal .ies-opt:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
  :root.canon-v5 .ies-modal .ies-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
  @media (max-width: 760px) { :root.canon-v5 .ies-modal .ies-cols { grid-template-columns: minmax(0, 1fr); } }
  :root.canon-v5 .ies-modal h4 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
  :root.canon-v5 .ies-modal .ies-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  :root.canon-v5 .ies-modal .ies-table th { padding: 4px 6px; border-bottom: 1px solid var(--c-border); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; color: var(--c-cap); }
  :root.canon-v5 .ies-modal .ies-table td { padding: 5px 6px; border-bottom: 1px solid var(--c-border); vertical-align: top; color: var(--c-text); }
  :root.canon-v5 .ies-modal .ies-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  :root.canon-v5 .ies-modal .ies-table tr.is-warn td { background: color-mix(in srgb, var(--c-warn) 7%, transparent); }
  :root.canon-v5 .ies-modal .ies-per { display: block; }
  :root.canon-v5 .ies-modal .ies-alt { width: 100%; max-width: 100%; height: 28px; font-size: 12px; }
  :root.canon-v5 .ies-modal .ies-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }
  :root.canon-v5 .ies-modal .ies-tag.is-warn { background: color-mix(in srgb, var(--c-warn) 16%, transparent); color: var(--c-on-wash-warn); }
  :root.canon-v5 .ies-modal .ies-tag.is-assumed { background: var(--c-sunken); color: var(--c-text-2); }
  :root.canon-v5 .ies-modal .ies-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 12px; border: 1px solid var(--c-border); border-radius: 8px; }
  @media (max-width: 560px) { :root.canon-v5 .ies-modal .ies-sum { grid-template-columns: minmax(0, 1fr); } }
  :root.canon-v5 .ies-modal .ies-sum > div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 .ies-modal .ies-sum b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--c-text); }
  :root.canon-v5 .ies-modal .ies-margin.is-good { color: var(--c-on-wash-ok); }
  :root.canon-v5 .ies-modal .ies-margin.is-ok { color: var(--c-on-wash-warn); }
  :root.canon-v5 .ies-modal .ies-margin.is-thin { color: var(--c-on-wash-danger); }
  :root.canon-v5 .ies-modal .ies-flag,
  :root.canon-v5 .ies-modal .ies-market { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--c-sunken); font-size: 12px; line-height: 1.5; color: var(--c-text-2); }
  :root.canon-v5 .ies-modal .ies-flag i,
  :root.canon-v5 .ies-modal .ies-market i { margin-top: 2px; }
  :root.canon-v5 .ies-modal .ies-flag.is-warn,
  :root.canon-v5 .ies-modal .ies-market.is-off { background: color-mix(in srgb, var(--c-warn) 12%, transparent); color: var(--c-on-wash-warn); }
  :root.canon-v5 .ies-modal .ies-notes { margin: 10px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--c-text-2); }
  :root.canon-v5 .ies-modal .ies-opts { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; }
  :root.canon-v5 .ies-modal .ies-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--c-text); cursor: pointer; }
  :root.canon-v5 .ies-modal .ies-check input { margin-top: 3px; }
  :root.canon-v5 .ies-modal .ies-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  :root.canon-v5 .ies-modal .ies-gap { flex: 1; }

  /* ── Describe the work (doc-scope.js) — lives in a .bk-modal ────────────── */
  :root.canon-v5 .dsw-modal { max-width: 560px; }
  :root.canon-v5 .dsw-modal .dsw-lbl { margin-top: 14px; }
  :root.canon-v5 .dsw-modal .dsw-lbl:first-child { margin-top: 0; }
  :root.canon-v5 .dsw-modal .dsw-hint { margin-left: 6px; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-cap); }
  :root.canon-v5 .dsw-modal .dsw-wait { display: flex; align-items: center; gap: 10px; padding: 18px 2px; color: var(--c-text-2); }
  :root.canon-v5 .dsw-modal .dsw-err { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--c-on-wash-danger); }
  :root.canon-v5 .dsw-modal .dsw-flag {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px;
    background: var(--c-sunken); font-size: 12px; line-height: 1.5; color: var(--c-text-2);
  }
  :root.canon-v5 .dsw-modal .dsw-flag i { margin-top: 2px; }
  :root.canon-v5 .dsw-modal .dsw-flag.is-warn { background: color-mix(in srgb, var(--c-warn) 12%, transparent); color: var(--c-on-wash-warn); }
  :root.canon-v5 .dsw-modal .dsw-check { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--c-text); cursor: pointer; }
  :root.canon-v5 .dsw-modal .dsw-check input { margin-top: 3px; }
  :root.canon-v5 .dsw-modal .dsw-titleopt { margin-top: 6px; color: var(--c-text-2); }
  :root.canon-v5 .dsw-modal .dsw-excl { display: flex; flex-direction: column; }
  :root.canon-v5 .dsw-modal .dsw-foot-note { margin: 14px 0 0; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .dsw-modal .dsw-actions,
  :root.canon-v5 .dsw-modal .bk-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  :root.canon-v5 .dsw-modal .dsw-gap { flex: 1; }
  /* Where it goes: as the priced line (default) or in Notes. Toggled by
     .is-notes on the modal — shown/hidden, never repainted, so edits survive. */
  :root.canon-v5 .dsw-modal .dsw-where { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
  :root.canon-v5 .dsw-modal .dsw-where .lbl { margin: 0; }
  :root.canon-v5 .dsw-modal .dsw-seg { display: inline-flex; padding: 2px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-sunken); }
  :root.canon-v5 .dsw-modal .dsw-opt { padding: 4px 10px; border: 0; border-radius: 6px; background: none; font-family: inherit; font-size: 12px; color: var(--c-text-2); cursor: pointer; }
  :root.canon-v5 .dsw-modal .dsw-opt[aria-checked="true"] { background: var(--c-card); color: var(--c-text); font-weight: 600; box-shadow: 0 0 0 1px var(--c-border); }
  :root.canon-v5 .dsw-modal .dsw-opt:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
  :root.canon-v5 .dsw-modal .dsw-where-say { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--c-text-2); }
  :root.canon-v5 .dsw-modal:not(.is-notes) .dsw-notes-only { display: none; }
  :root.canon-v5 .dsw-modal.is-notes .dsw-line-only { display: none; }
  /* The kit picker lives in a .bk-modal. */
  :root.canon-v5 .qp-kits { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
  :root.canon-v5 .qp-kit { display: flex; align-items: stretch; gap: 4px; }
  :root.canon-v5 .qp-kit-main {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left;
    border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-sunken); color: var(--c-text); font-family: inherit; cursor: pointer;
  }
  :root.canon-v5 .qp-kit-main:hover { border-color: var(--c-accent-edge); }
  :root.canon-v5 .qp-kit-name { font-size: 14px; font-weight: 600; }
  :root.canon-v5 .qp-kit-sub { font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .qp-kit-x { padding: 0 8px; border: 0; background: none; font-size: 15px; color: var(--c-cap); cursor: pointer; }
  :root.canon-v5 .qp-kit-x:hover { color: var(--c-on-wash-danger); }

  /* ── The live preview (doc-preview.js) ────────────────────────────────── */
  :root.canon-v5 #editorView .doc-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  :root.canon-v5 #editorView .doc-split-side { display: none; }
  @media (min-width: 1280px) {
    :root.canon-v5 #editorView .doc-split { grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 400px); }
    :root.canon-v5 #editorView .doc-split-side { position: sticky; top: 70px; display: block; }
  }
  /* The paper stays light in both themes: this is the document as it will print
     and be emailed, not a screen. Its palette is the customer document's own
     light set, held here once rather than scattered through the rules. */
  :root.canon-v5 .doc-preview {
    --dp-ground: rgb(255 255 255); --dp-ink: rgb(19 23 34); --dp-ink-2: rgb(74 85 104);
    --dp-cap: rgb(107 118 134); --dp-rule: rgb(228 233 241); --dp-ok: rgb(15 122 56);
  }
  :root.canon-v5 .doc-preview .dp-paper {
    padding: 20px 22px; border: 1px solid var(--dp-rule); border-radius: 10px; background: var(--dp-ground); color: var(--dp-ink);
    box-shadow: var(--lift), var(--lift-edge); font-size: 12px; line-height: 1.45;
  }
  :root.canon-v5 .doc-preview .dp-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--dp-accent, var(--dp-rule)); }
  :root.canon-v5 .doc-preview .dp-title { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-cap); }
  :root.canon-v5 .doc-preview .dp-number { margin-top: 1px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--dp-ink); }
  :root.canon-v5 .doc-preview .dp-jobname { margin-top: 3px; font-weight: 600; color: var(--dp-ink); }
  :root.canon-v5 .doc-preview .dp-meta { margin-top: 2px; font-size: 11px; color: var(--dp-cap); }
  :root.canon-v5 .doc-preview .dp-seller { max-width: 46%; text-align: right; }
  :root.canon-v5 .doc-preview .dp-seller-name { font-weight: 600; color: var(--dp-ink); }
  :root.canon-v5 .doc-preview .dp-logo { max-width: 150px; max-height: 46px; margin-bottom: 4px; object-fit: contain; }
  :root.canon-v5 .doc-preview .dp-fine { font-size: 11px; color: var(--dp-cap); }
  :root.canon-v5 .doc-preview .dp-billto { margin-bottom: 14px; }
  :root.canon-v5 .doc-preview .dp-billto-lbl { margin-bottom: 2px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  :root.canon-v5 .doc-preview .dp-items { width: 100%; margin-bottom: 12px; border-collapse: collapse; }
  :root.canon-v5 .doc-preview .dp-items th {
    padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--dp-rule);
    font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-cap);
  }
  :root.canon-v5 .doc-preview .dp-items td { padding: 5px 6px; vertical-align: top; border-bottom: 1px solid var(--dp-rule); }
  :root.canon-v5 .doc-preview .dp-items tbody tr:last-child td { border-bottom: 0; }
  :root.canon-v5 .doc-preview .dp-items .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  :root.canon-v5 .doc-preview .dp-empty { padding: 14px 0; text-align: center; color: var(--dp-cap); }
  :root.canon-v5 .doc-preview .dp-disc { font-size: 11px; font-weight: 500; color: var(--dp-ok); }
  :root.canon-v5 .doc-preview .dp-totals { max-width: 240px; margin-left: auto; }
  :root.canon-v5 .doc-preview .dp-totals > div { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; font-variant-numeric: tabular-nums; color: var(--dp-ink-2); }
  :root.canon-v5 .doc-preview .dp-totals > .dp-grand { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--dp-rule); font-size: 14px; font-weight: 600; color: var(--dp-ink); }
  :root.canon-v5 .doc-preview .dp-notes { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--dp-rule); white-space: pre-wrap; font-size: 11px; color: var(--dp-ink-2); }

  /* ── A quote's option set (feature_quote_options) ─────────────────────── */
  :root.canon-v5 #editorView .opts-strip {
    margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--c-border); border-radius: 10px;
    background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 #editorView .opts-strip-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 #editorView .opts-strip-head > i { color: var(--c-accent); }
  :root.canon-v5 #editorView .opts-strip-hint { font-size: 12px; font-weight: 400; color: var(--c-text-2); }
  :root.canon-v5 #editorView .opts-strip-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  :root.canon-v5 #editorView .opt-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
    border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-card); color: var(--c-text);
    font-family: inherit; font-size: 12px; cursor: pointer;
  }
  :root.canon-v5 #editorView .opt-chip:hover:not(:disabled) { border-color: var(--c-accent-edge); background: var(--c-card-2); }
  :root.canon-v5 #editorView .opt-chip.here { border-color: var(--c-accent-edge); background: var(--c-accent-soft); cursor: default; }
  :root.canon-v5 #editorView .opt-chip-lbl { font-weight: 600; }
  :root.canon-v5 #editorView .opt-chip-amt { font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--c-text-2); }
  :root.canon-v5 #editorView .opt-chip-st {
    padding: 1px 6px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-sunken);
    font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-cap);
  }
  :root.canon-v5 #editorView .opt-chip-st.st-sent { border-color: var(--c-accent-edge); background: var(--c-accent-soft); color: var(--c-on-wash-accent); }
  :root.canon-v5 #editorView .opt-chip-st.st-accepted {
    border-color: color-mix(in srgb, var(--c-ok) 32%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, transparent); color: var(--c-on-wash-ok);
  }
  :root.canon-v5 #editorView .opt-chip-st.st-declined,
  :root.canon-v5 #editorView .opt-chip-st.st-void {
    border-color: color-mix(in srgb, var(--c-danger) 36%, transparent); background: var(--c-danger-soft); color: var(--c-on-wash-danger);
  }

  /* ── Site photos and attachments (a quote) ────────────────────────────── */
  :root.canon-v5 #editorView .scope-photos,
  :root.canon-v5 #editorView .quote-attach-edit { margin-top: 16px; }
  :root.canon-v5 #editorView .scope-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
  :root.canon-v5 #editorView .scope-thumb { position: relative; width: 96px; height: 96px; overflow: hidden; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-sunken); }
  :root.canon-v5 #editorView .scope-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  :root.canon-v5 #editorView .scope-del {
    position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
    border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-ink-deep) 62%, transparent);
    font-size: 15px; line-height: 1; color: white; cursor: pointer;
  }
  :root.canon-v5 #editorView .scope-del:hover { background: var(--c-danger); }
  :root.canon-v5 #editorView .scope-show {
    position: absolute; right: 4px; bottom: 4px; left: 4px; padding: 3px 6px; border: 0; border-radius: 4px;
    background: color-mix(in srgb, var(--c-ink-deep) 62%, transparent);
    font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; color: white; cursor: pointer;
  }
  :root.canon-v5 #editorView .scope-show:hover { background: color-mix(in srgb, var(--c-ink-deep) 80%, transparent); }
  :root.canon-v5 #editorView .scope-show.on { background: var(--c-cta); color: var(--c-accent-fg); }
  :root.canon-v5 #editorView .scope-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 96px; height: 96px;
    border: 1px dashed var(--c-border-2); border-radius: 8px; font-size: 11px; color: var(--c-text-2); cursor: pointer;
  }
  :root.canon-v5 #editorView .scope-add:hover { border-color: var(--c-accent-edge); color: var(--c-on-wash-accent); }
  :root.canon-v5 #editorView .scope-add i { font-size: 20px; }
  :root.canon-v5 #editorView .att-doc {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 8px;
    text-align: center; font-size: 11px; color: var(--c-text-2);
  }
  :root.canon-v5 #editorView .att-doc i { font-size: 22px; color: var(--c-cap); }
  :root.canon-v5 #editorView .att-doc span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* ── Narrow ───────────────────────────────────────────────────────────── */
  @media (max-width: 900px) {
    :root.canon-v5 #editorView .ed-head2__main { flex-wrap: wrap; row-gap: 10px; }
    :root.canon-v5 #editorView .ed-head2__id { order: 1; flex: 1 1 60%; }
    :root.canon-v5 #editorView .ed-head2__money { order: 2; margin-left: auto; }
    :root.canon-v5 #editorView .ed-head2__act { order: 3; flex: 1 1 100%; padding: 10px 0 0; border-top: 1px solid var(--c-border); border-left: 0; }
    :root.canon-v5 #editorView .ed-head2__act .btn-primary { flex: 1; justify-content: center; min-height: 40px; }
  }
  @media (max-width: 640px) {
    :root.canon-v5 #editorView .ed-head2 { top: 58px; margin-bottom: 12px; }
    :root.canon-v5 #editorView .ed-head2__main { gap: 10px; padding: 9px 12px; }
    :root.canon-v5 #editorView .ed-head2__row h2 { max-width: none; font-size: 15px; }
    :root.canon-v5 #editorView .ed-head2__money b { font-size: 17px; }
    :root.canon-v5 #editorView .ed-head2__sub,
    :root.canon-v5 #editorView .ed-head2__links,
    :root.canon-v5 #editorView .ed-head2 .ui-steps { display: none; }
    :root.canon-v5 .ui-actmenu__trigger { width: 100%; justify-content: center; }
    :root.canon-v5 .ui-actmenu__item { padding: 11px 12px; }
  }
  @media (max-width: 560px) {
    :root.canon-v5 .nd-drawer {
      top: auto; right: 0; left: 0; width: auto; max-height: 86vh;
      border-top: 1px solid var(--c-border); border-left: 0; border-radius: 12px 12px 0 0;
    }
    :root.canon-v5 #editorView .qp-row { flex-wrap: wrap; padding: 9px 0; }
    :root.canon-v5 #editorView .qp-row .qp-n { order: -1; flex: 1 0 100%; }
    :root.canon-v5 #editorView .qp-cost { margin-left: auto; }
    :root.canon-v5 #editorView .qp-headnote { flex: 1 0 100%; }
    :root.canon-v5 #editorView .qp-actions { gap: 12px; margin-left: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    :root.canon-v5 .ui-badge[data-status="viewing"] .ti,
    :root.canon-v5 .nd-viewing-dot { animation: none; }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE DOCUMENT LISTS' SHARED PARTS: the decluttered toolbar, the bulk bar, row
   actions, option-set chips, the settings panel and the insight strip.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Filter and More (core/ui/listtoolbar.js) ─────────────────────────── */
  :root.canon-v5 .lt-dd { position: relative; display: inline-block; }
  :root.canon-v5 .lt-dd__trigger { display: inline-flex; align-items: center; gap: 6px; }
  :root.canon-v5 .lt-dd__caret { font-size: 14px; color: var(--c-cap); }
  :root.canon-v5 .lt-dd__count {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--c-cta); font-size: 11px; font-weight: 600; line-height: 1; color: var(--c-accent-fg);
  }
  :root.canon-v5 .lt-dd__count[hidden] { display: none; }
  :root.canon-v5 .lt-dd__panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
    display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; min-width: 250px; padding: 12px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); box-shadow: var(--float);
  }
  :root.canon-v5 .lt-dd__panel[hidden] { display: none; }
  :root.canon-v5 .lt-field {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap);
  }
  :root.canon-v5 .lt-field input,
  :root.canon-v5 .lt-field select {
    box-sizing: border-box; width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text);
    font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
  }
  :root.canon-v5 .lt-dd__panel .inv-voidtoggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-2); cursor: pointer; }
  :root.canon-v5 .lt-dd__panel .inv-voidtoggle input { width: auto; accent-color: var(--c-accent); }
  :root.canon-v5 .lt-dd__panel--menu { gap: 0; min-width: 230px; padding: 4px; }
  :root.canon-v5 .lt-dd__panel--menu .btn-ghost {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: auto; padding: 8px 10px;
    border: 0; border-radius: 6px; background: transparent; font-weight: 500; text-align: left; white-space: nowrap;
  }
  :root.canon-v5 .lt-dd__panel--menu .btn-ghost:hover { background: var(--c-card-2); }
  :root.canon-v5 .lt-dd__panel--menu .btn-ghost i { font-size: 16px; color: var(--c-cap); }

  /* ── The list header (.bk-head) ───────────────────────────────────────── */
  /* The title and its sentence on the left; search, Filter, More and the one
     primary action on the right. Everything occasional is folded into Filter
     and More (listtoolbar.js), so the row never wraps beside the title. */
  :root.canon-v5 .bk-cta { display: inline-flex; align-items: center; gap: 6px; }
  :root.canon-v5 .bk-cta .ti { font-size: 16px; }

  /* ── The bulk bar (core/ui/bulkbar.js) ────────────────────────────────── */
  :root.canon-v5 .bulk-bar {
    position: fixed; left: 50%; bottom: 22px; z-index: 60; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); box-shadow: var(--float);
  }
  :root.canon-v5 .bulk-n { margin-right: 4px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .bulk-bar .btn-ghost { height: 30px; padding: 0 10px; }

  /* ── A row's own actions ──────────────────────────────────────────────── */
  :root.canon-v5 .btn-rowact {
    display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-card); color: var(--c-text);
    font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  :root.canon-v5 .btn-rowact:hover { background: var(--c-card-2); border-color: var(--c-border-2); }
  :root.canon-v5 .btn-rowact.primary { border-color: var(--c-cta); background: var(--c-cta); font-weight: 600; color: var(--c-accent-fg); }
  :root.canon-v5 .btn-rowact.primary:hover { border-color: var(--c-cta-h); background: var(--c-cta-h); }
  :root.canon-v5 .btn-rowact + .btn-rowact { margin-left: 4px; }

  /* ── An option set, collapsed into one list row ───────────────────────── */
  :root.canon-v5 .optset-count {
    padding: 1px 7px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-sunken);
    font-size: 11px; font-weight: 500; color: var(--c-text-2);
  }
  :root.canon-v5 .optset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  :root.canon-v5 .opt-chip-mini {
    padding: 1px 7px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-sunken);
    font-size: 10px; font-weight: 600; color: var(--c-text-2);
  }
  :root.canon-v5 .opt-chip-mini.st-sent { border-color: var(--c-accent-edge); background: var(--c-accent-soft); color: var(--c-on-wash-accent); }
  :root.canon-v5 .opt-chip-mini.st-accepted {
    border-color: color-mix(in srgb, var(--c-ok) 32%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, transparent); color: var(--c-on-wash-ok);
  }
  :root.canon-v5 .opt-chip-mini.st-declined,
  :root.canon-v5 .opt-chip-mini.st-void {
    border-color: color-mix(in srgb, var(--c-danger) 36%, transparent); background: var(--c-danger-soft); color: var(--c-on-wash-danger);
  }

  /* ── The list's settings panel (Settings, in the toolbar) ─────────────── */
  :root.canon-v5 .inv-settings { margin: 0 0 16px; }
  :root.canon-v5 .settings-card { padding: 20px 24px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); box-shadow: var(--lift), var(--lift-edge); }
  :root.canon-v5 .settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  :root.canon-v5 .settings-head h3 { margin: 0; font-family: "Sora", system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .settings-note { margin: 6px 0 14px; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 .settings-note a { color: var(--c-on-wash-accent); }
  :root.canon-v5 .settings-sec { margin: 18px 0 8px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  :root.canon-v5 .settings-card .lbl { display: block; margin: 12px 0 6px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 .settings-grid .lbl { margin-top: 0; }
  :root.canon-v5 .settings-card .hint { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-text-2); }
  :root.canon-v5 .settings-card input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  :root.canon-v5 .settings-card select,
  :root.canon-v5 .settings-card textarea {
    display: block; box-sizing: border-box; width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text);
    font-family: inherit; font-size: 13px;
  }
  :root.canon-v5 .settings-card input:focus,
  :root.canon-v5 .settings-card select:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
  :root.canon-v5 .settings-actions { margin-top: 18px; }

  /* ── The insight strip (core/ui/insightstrip.js, its own CSS skipped) ─── */
  :root.canon-v5 .insight-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  :root.canon-v5 .insight-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--c-border); border-radius: 999px;
    background: var(--c-sunken); font-size: 11px; font-weight: 500; line-height: 1.6; color: var(--c-text-2);
  }
  :root.canon-v5 .insight-chip .ti { font-size: 12px; }
  :root.canon-v5 .insight-chip.is-good {
    border-color: color-mix(in srgb, var(--c-ok) 32%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, transparent); color: var(--c-on-wash-ok);
  }
  :root.canon-v5 .insight-chip.is-warn {
    border-color: color-mix(in srgb, var(--c-warn) 34%, transparent); background: color-mix(in srgb, var(--c-warn) 10%, transparent); color: var(--c-on-wash-warn);
  }
  :root.canon-v5 .insight-chip.is-info { color: var(--c-cap); }

  /* The catalog picker and its category chips + overflow menu are drawn by
     canon-catpicker.css — the picker opens on pages that do not load this file. */

  /* The customer line under a catalog pick, and a badge drawn with its dot. */
  :root.canon-v5 .cust-meta { margin-top: 3px; overflow-wrap: anywhere; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .cust-meta i { margin-right: 3px; font-size: 11px; }
  :root.canon-v5 .ui-badge__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

  /* ── Email it yourself (doc-shared.js, a .bk-modal) ───────────────────── */
  :root.canon-v5 .bk-modal.mail-modal { max-width: 640px; }
  :root.canon-v5 .mail-intro { margin: 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--c-text-2); }
  :root.canon-v5 .mail-tpl-row { display: flex; align-items: center; gap: 12px; }
  :root.canon-v5 .mail-tpl-row select { flex: 1; min-width: 0; }
  :root.canon-v5 .mail-edit-link { white-space: nowrap; font-size: 12px; color: var(--c-on-wash-accent); }
  :root.canon-v5 .bk-modal.mail-modal textarea { min-height: 220px; max-height: 46vh; resize: vertical; }
  :root.canon-v5 .mail-from { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--c-text-2); }
  :root.canon-v5 .mail-check { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--c-text-2); }
  :root.canon-v5 .mail-check b { color: var(--c-text); }
  :root.canon-v5 .mail-count { margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .mail-count.over { font-weight: 600; color: var(--c-on-wash-warn); }
  /* The PDF-copy composer (feature_pdf_copy_compose) — same modal, plus a
     two-up To/name row, the attachment it carries, and an inline error so a
     failed send keeps the letter on screen. */
  :root.canon-v5 .mail-row2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
  :root.canon-v5 .mail-attach { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border: 1px solid var(--c-border); border-radius: 999px; font-size: 12px; color: var(--c-text-2); }
  :root.canon-v5 .mail-remember { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--c-text-2); cursor: pointer; }
  :root.canon-v5 .mail-remember input { width: auto; margin-top: 3px; }
  :root.canon-v5 .mail-err { margin-top: 8px; font-size: 13px; color: var(--c-on-wash-warn); }
  /* The toggle sits over the label's row rather than in it, so the To input
     lines up with the name input beside it. */
  :root.canon-v5 .mail-lblrow { position: relative; display: block; }
  :root.canon-v5 .mail-cc-toggle { position: absolute; top: 0; right: 0; height: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; line-height: 1.2; color: var(--c-on-wash-accent); cursor: pointer; }
  :root.canon-v5 .mail-cc-toggle[hidden] { display: none; }
  /* Shorter than "Email it yourself" so Send stays on screen at 720px tall. */
  :root.canon-v5 .bk-modal.mail-modal #pcBody { min-height: 176px; max-height: 38vh; }
  @media (max-width: 560px) { :root.canon-v5 .mail-row2 { grid-template-columns: minmax(0, 1fr); } }

  /* ── Link a job (invoices/linkjob.js, a .bk-modal) ────────────────────── */
  /* Its rows are .btn-ghost buttons with two lines of text: the canon button's
     fixed height would clip them to one. */
  :root.canon-v5 #linkJobBody .btn-ghost { height: auto; min-height: 44px; font-weight: 400; }
  :root.canon-v5 .bk-modal .hint { font-size: 12px; font-weight: 400; color: var(--c-text-2); }

  @media (max-width: 720px) {
    :root.canon-v5 .list-actions .lt-dd { width: 100%; }
    :root.canon-v5 .lt-dd__trigger { width: 100%; justify-content: center; }
    :root.canon-v5 .lt-dd__panel { right: auto; left: 0; min-width: min(260px, 86vw); }

    /* The list header on a phone: the primary action is a round + beside the
       title, and search, Filter and More share one line, the two menus as
       icons. The ids out-rank each page's own desktop toolbar rules. */
    :root.canon-v5 .bk-head { position: relative; }
    :root.canon-v5 .bk-head > .min-w-0 { padding-right: 56px; }
    :root.canon-v5 .bk-head .bk-cta { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 999px; }
    :root.canon-v5 .bk-head .bk-cta .ti { font-size: 20px; }
    :root.canon-v5 .bk-head :is(.bk-cta__label, .lt-dd__label) {
      position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    :root.canon-v5 :is(#invCanonRoot, #quoCanonRoot) .bk-head .list-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
    :root.canon-v5 :is(#invCanonRoot, #quoCanonRoot) .bk-head .list-actions > input[type="search"].inv-search { grid-column: 1 / -1; width: 100%; height: 44px; }
    :root.canon-v5 :is(#invCanonRoot, #quoCanonRoot) .bk-head .list-actions:has(> .lt-dd) { grid-template-columns: minmax(0, 1fr) auto auto; }
    :root.canon-v5 :is(#invCanonRoot, #quoCanonRoot) .bk-head .list-actions:has(> .lt-dd) > input[type="search"].inv-search { grid-column: auto; }
    :root.canon-v5 .bk-head .list-actions .lt-dd { width: auto; }
    :root.canon-v5 .bk-head .lt-dd__trigger { position: relative; width: 44px; height: 44px; padding: 0; }
    :root.canon-v5 .bk-head .lt-dd__caret { display: none; }
    :root.canon-v5 .bk-head .lt-dd__count { position: absolute; top: -6px; right: -6px; }
    :root.canon-v5 .bk-head .lt-dd__panel { left: auto; right: 0; }
  }
  @media (max-width: 640px) {
    :root.canon-v5 .settings-grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 560px) {
    :root.canon-v5 .bulk-bar { right: 12px; left: 12px; flex-wrap: wrap; justify-content: center; transform: none; }
  }

  /* ── The redesign's balance card (feature_polish_invoices, feature_polish_quotes) ──
     One card in place of a row of figure cards: the headline figure with its cents stepped
     back on the left, a short list on the right whose rows open in place to the detail the
     old cards showed. Drawn from mockups/studio/polish.html, approved 3 Nov 2026. The page
     root carries .bk-polish while its flag is on. */
  :root.canon-v5 .bk-polish .cents { color: var(--c-muted); font-weight: 500; }
  :root.canon-v5 .bk-polish .inv-bal {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 0; padding: 0; overflow: hidden;
  }
  :root.canon-v5 .bk-polish .inv-bal-main { display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 20px; }
  :root.canon-v5 .bk-polish .inv-bal-fig {
    margin: 4px 0 2px; font-size: 50px; font-weight: 600; line-height: 1.08; letter-spacing: -.034em;
    font-variant-numeric: tabular-nums; color: var(--c-text);
  }
  :root.canon-v5 .bk-polish .inv-bal-fig .cents { font-size: .52em; letter-spacing: -.02em; }
  :root.canon-v5 .bk-polish .inv-bal-sub { margin: 0; font-size: 15px; color: var(--c-text-2); }
  :root.canon-v5 .bk-polish .inv-bal-sub b { font-weight: 600; }
  :root.canon-v5 .bk-polish .inv-bal-track { margin-top: auto; padding-top: 0; }
  :root.canon-v5 .bk-polish .inv-bal-sub + .inv-bal-track { margin-top: 22px; }
  :root.canon-v5 .bk-polish .inv-bal-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .bk-polish .inv-bal-k { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  :root.canon-v5 .bk-polish .inv-bal-k b { font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .bk-polish .inv-bal-k b.ink-danger { color: var(--c-danger); }
  :root.canon-v5 .bk-polish .inv-bal-side {
    display: flex; flex-direction: column; justify-content: center; padding: 10px 0;
    border-left: 1px solid var(--c-border);
  }
  :root.canon-v5 .bk-polish .inv-side + .inv-side { border-top: 1px solid var(--c-border); }
  :root.canon-v5 .bk-polish .inv-side > summary {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 20px 6px 24px;
    list-style: none; cursor: pointer; font-size: 15px; color: var(--c-text-2);
    transition: background var(--dur) var(--ease);
  }
  :root.canon-v5 .bk-polish .inv-side > summary::-webkit-details-marker { display: none; }
  :root.canon-v5 .bk-polish .inv-side > summary:hover { background: var(--c-card-2); }
  :root.canon-v5 .bk-polish .inv-side > summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
  :root.canon-v5 .bk-polish .inv-side-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root.canon-v5 .bk-polish .inv-side-n { margin-left: 6px; font-size: 12px; color: var(--c-muted); }
  :root.canon-v5 .bk-polish .inv-side-v { flex: none; font-size: 16px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .bk-polish .inv-side-v.ink-danger { color: var(--c-danger); }
  :root.canon-v5 .bk-polish .inv-side-v.ink-warn { color: var(--c-on-wash-warn); }
  :root.canon-v5 .bk-polish .inv-bal-note { margin: 12px 0 0; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .bk-polish .inv-bal-note b { font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .bk-polish .inv-bal-note .ti { color: var(--c-muted); }
  :root.canon-v5 .quo-polish #quoCap[hidden] { display: none; }
  :root.canon-v5 .bk-polish .inv-side-act { flex: none; }
  :root.canon-v5 .bk-polish .inv-side-chev { flex: none; font-size: 14px; color: var(--c-muted); transition: rotate var(--dur) var(--ease); }
  :root.canon-v5 .bk-polish .inv-side[open] .inv-side-chev { rotate: 180deg; }
  :root.canon-v5 .bk-polish .inv-side-body { padding: 0 20px 14px 24px; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .bk-polish .inv-side-note { margin: 2px 0 8px; line-height: 1.45; }
  :root.canon-v5 .bk-polish .inv-side-note > .ti { margin-right: 4px; color: var(--c-muted); }
  :root.canon-v5 .bk-polish .inv-side-note b { font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .bk-polish .inv-side-row {
    display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 10px; margin: 0 -10px;
    border: 0; border-radius: 8px; background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer;
  }
  :root.canon-v5 .bk-polish .inv-side-row:hover { background: var(--c-card-2); }
  :root.canon-v5 .bk-polish .inv-side-row b { margin-left: auto; font-weight: 600; }
  :root.canon-v5 .bk-polish .inv-side-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  :root.canon-v5 .bk-polish .inv-side-methods { display: grid; gap: 10px; }
  :root.canon-v5 .bk-polish .inv-side-m { display: flex; align-items: baseline; gap: 8px; }
  :root.canon-v5 .bk-polish .inv-side-m b { margin-left: auto; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .bk-polish .inv-side-bar { height: 6px; margin-top: 5px; border-radius: 999px; background: var(--c-sunken); overflow: hidden; }
  :root.canon-v5 .bk-polish .inv-side-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--c-accent); }
  :root.canon-v5 .bk-polish .inv-side-ret .ret-row { padding-left: 0; padding-right: 0; border-left: 0; border-right: 0; }
  @media (max-width: 900px) {
    :root.canon-v5 .bk-polish .inv-bal { grid-template-columns: minmax(0, 1fr); }
    :root.canon-v5 .bk-polish .inv-bal-side { border-left: 0; border-top: 1px solid var(--c-border); padding: 4px 0; }
    :root.canon-v5 .bk-polish .inv-bal-fig { font-size: 42px; }
  }
}