/* redesign.css · each prototype as its own product (Malte, 2026-09-29, OPS-76):
   the product fills the window under the portfolio's bar of 44 px, in its own
   color. The color is a scale of the design system, set as token values
   under data-brand; every size, radius, elevation and pill is the design
   system's. A product's own components (the booking month, the CRM's table)
   are built from the same tokens and sit beside the design system's, which
   are used as they are. */

html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }

/* ── a product's color: the accent and the solid control in one scale ── */
[data-brand="aqua"] { --accent: var(--aqua-600); --accent-hover: var(--aqua-650); --accent-ink: var(--aqua-700); --accent-glyph: var(--aqua-600); --accent-tint: var(--aqua-100); --accent-line: var(--aqua-300); --solid: var(--aqua-650); --solid-hover: var(--aqua-700); --on-solid: var(--gray-0); --brand: var(--aqua-600); }
[data-brand="blue"] { --accent: var(--blue-600); --accent-hover: var(--blue-650); --accent-ink: var(--blue-700); --accent-glyph: var(--blue-600); --accent-tint: var(--blue-100); --accent-line: var(--blue-300); --solid: var(--blue-650); --solid-hover: var(--blue-700); --on-solid: var(--gray-0); --brand: var(--blue-600); }
[data-brand="green"] { --accent: var(--green-600); --accent-hover: var(--green-650); --accent-ink: var(--green-700); --accent-glyph: var(--green-600); --accent-tint: var(--green-100); --accent-line: var(--green-300); --solid: var(--green-650); --solid-hover: var(--green-700); --on-solid: var(--gray-0); --brand: var(--green-600); }
[data-brand="magenta"] { --accent: var(--magenta-600); --accent-hover: var(--magenta-650); --accent-ink: var(--magenta-700); --accent-glyph: var(--magenta-600); --accent-tint: var(--magenta-100); --accent-line: var(--magenta-300); --solid: var(--magenta-650); --solid-hover: var(--magenta-700); --on-solid: var(--gray-0); --brand: var(--magenta-600); }
[data-brand="orange"] { --accent: var(--orange-600); --accent-hover: var(--orange-650); --accent-ink: var(--orange-700); --accent-glyph: var(--orange-600); --accent-tint: var(--orange-100); --accent-line: var(--orange-300); --solid: var(--orange-650); --solid-hover: var(--orange-700); --on-solid: var(--gray-0); --brand: var(--orange-600); }
[data-brand="red"] { --accent: var(--red-600); --accent-hover: var(--red-650); --accent-ink: var(--red-700); --accent-glyph: var(--red-600); --accent-tint: var(--red-100); --accent-line: var(--red-300); --solid: var(--red-650); --solid-hover: var(--red-700); --on-solid: var(--gray-0); --brand: var(--red-600); }
[data-brand="violet"] { --accent: var(--violet-600); --accent-hover: var(--violet-650); --accent-ink: var(--violet-700); --accent-glyph: var(--violet-600); --accent-tint: var(--violet-100); --accent-line: var(--violet-300); --solid: var(--violet-650); --solid-hover: var(--violet-700); --on-solid: var(--gray-0); --brand: var(--violet-600); }
[data-brand="yellow"] { --accent: var(--yellow-600); --accent-hover: var(--yellow-650); --accent-ink: var(--yellow-700); --accent-glyph: var(--yellow-600); --accent-tint: var(--yellow-100); --accent-line: var(--yellow-300); --solid: var(--yellow-650); --solid-hover: var(--yellow-700); --on-solid: var(--gray-0); --brand: var(--yellow-600); }
[data-brand="gray"] { --solid: var(--gray-850); --solid-hover: var(--gray-800); --on-solid: var(--gray-0); --brand: var(--gray-850); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-brand="aqua"] { --accent: var(--aqua-450); --accent-hover: var(--aqua-400); --accent-ink: var(--aqua-300); --accent-glyph: var(--aqua-400); --accent-tint: var(--aqua-800); --accent-line: var(--aqua-600); --solid: var(--aqua-400); --solid-hover: var(--aqua-350); --on-solid: var(--gray-900); --brand: var(--aqua-400); }
  :root:not([data-theme="light"]) [data-brand="blue"] { --accent: var(--blue-450); --accent-hover: var(--blue-400); --accent-ink: var(--blue-300); --accent-glyph: var(--blue-400); --accent-tint: var(--blue-800); --accent-line: var(--blue-600); --solid: var(--blue-400); --solid-hover: var(--blue-350); --on-solid: var(--gray-900); --brand: var(--blue-400); }
  :root:not([data-theme="light"]) [data-brand="green"] { --accent: var(--green-450); --accent-hover: var(--green-400); --accent-ink: var(--green-300); --accent-glyph: var(--green-400); --accent-tint: var(--green-800); --accent-line: var(--green-600); --solid: var(--green-400); --solid-hover: var(--green-350); --on-solid: var(--gray-900); --brand: var(--green-400); }
  :root:not([data-theme="light"]) [data-brand="magenta"] { --accent: var(--magenta-450); --accent-hover: var(--magenta-400); --accent-ink: var(--magenta-300); --accent-glyph: var(--magenta-400); --accent-tint: var(--magenta-800); --accent-line: var(--magenta-600); --solid: var(--magenta-400); --solid-hover: var(--magenta-350); --on-solid: var(--gray-900); --brand: var(--magenta-400); }
  :root:not([data-theme="light"]) [data-brand="orange"] { --accent: var(--orange-450); --accent-hover: var(--orange-400); --accent-ink: var(--orange-300); --accent-glyph: var(--orange-400); --accent-tint: var(--orange-800); --accent-line: var(--orange-600); --solid: var(--orange-400); --solid-hover: var(--orange-350); --on-solid: var(--gray-900); --brand: var(--orange-400); }
  :root:not([data-theme="light"]) [data-brand="red"] { --accent: var(--red-450); --accent-hover: var(--red-400); --accent-ink: var(--red-300); --accent-glyph: var(--red-400); --accent-tint: var(--red-800); --accent-line: var(--red-600); --solid: var(--red-400); --solid-hover: var(--red-350); --on-solid: var(--gray-900); --brand: var(--red-400); }
  :root:not([data-theme="light"]) [data-brand="violet"] { --accent: var(--violet-450); --accent-hover: var(--violet-400); --accent-ink: var(--violet-300); --accent-glyph: var(--violet-400); --accent-tint: var(--violet-800); --accent-line: var(--violet-600); --solid: var(--violet-400); --solid-hover: var(--violet-350); --on-solid: var(--gray-900); --brand: var(--violet-400); }
  :root:not([data-theme="light"]) [data-brand="yellow"] { --accent: var(--yellow-300); --accent-hover: var(--yellow-250); --accent-ink: var(--yellow-200); --accent-glyph: var(--yellow-250); --accent-tint: var(--yellow-800); --accent-line: var(--yellow-500); --solid: var(--yellow-250); --solid-hover: var(--yellow-200); --on-solid: var(--gray-900); --brand: var(--yellow-250); }
  :root:not([data-theme="light"]) [data-brand="gray"] { --solid: var(--gray-100); --solid-hover: var(--gray-200); --on-solid: var(--gray-900); --brand: var(--gray-100); }
}
:root[data-theme="dark"] [data-brand="aqua"] { --accent: var(--aqua-450); --accent-hover: var(--aqua-400); --accent-ink: var(--aqua-300); --accent-glyph: var(--aqua-400); --accent-tint: var(--aqua-800); --accent-line: var(--aqua-600); --solid: var(--aqua-400); --solid-hover: var(--aqua-350); --on-solid: var(--gray-900); --brand: var(--aqua-400); }
:root[data-theme="dark"] [data-brand="blue"] { --accent: var(--blue-450); --accent-hover: var(--blue-400); --accent-ink: var(--blue-300); --accent-glyph: var(--blue-400); --accent-tint: var(--blue-800); --accent-line: var(--blue-600); --solid: var(--blue-400); --solid-hover: var(--blue-350); --on-solid: var(--gray-900); --brand: var(--blue-400); }
:root[data-theme="dark"] [data-brand="green"] { --accent: var(--green-450); --accent-hover: var(--green-400); --accent-ink: var(--green-300); --accent-glyph: var(--green-400); --accent-tint: var(--green-800); --accent-line: var(--green-600); --solid: var(--green-400); --solid-hover: var(--green-350); --on-solid: var(--gray-900); --brand: var(--green-400); }
:root[data-theme="dark"] [data-brand="magenta"] { --accent: var(--magenta-450); --accent-hover: var(--magenta-400); --accent-ink: var(--magenta-300); --accent-glyph: var(--magenta-400); --accent-tint: var(--magenta-800); --accent-line: var(--magenta-600); --solid: var(--magenta-400); --solid-hover: var(--magenta-350); --on-solid: var(--gray-900); --brand: var(--magenta-400); }
:root[data-theme="dark"] [data-brand="orange"] { --accent: var(--orange-450); --accent-hover: var(--orange-400); --accent-ink: var(--orange-300); --accent-glyph: var(--orange-400); --accent-tint: var(--orange-800); --accent-line: var(--orange-600); --solid: var(--orange-400); --solid-hover: var(--orange-350); --on-solid: var(--gray-900); --brand: var(--orange-400); }
:root[data-theme="dark"] [data-brand="red"] { --accent: var(--red-450); --accent-hover: var(--red-400); --accent-ink: var(--red-300); --accent-glyph: var(--red-400); --accent-tint: var(--red-800); --accent-line: var(--red-600); --solid: var(--red-400); --solid-hover: var(--red-350); --on-solid: var(--gray-900); --brand: var(--red-400); }
:root[data-theme="dark"] [data-brand="violet"] { --accent: var(--violet-450); --accent-hover: var(--violet-400); --accent-ink: var(--violet-300); --accent-glyph: var(--violet-400); --accent-tint: var(--violet-800); --accent-line: var(--violet-600); --solid: var(--violet-400); --solid-hover: var(--violet-350); --on-solid: var(--gray-900); --brand: var(--violet-400); }
:root[data-theme="dark"] [data-brand="yellow"] { --accent: var(--yellow-300); --accent-hover: var(--yellow-250); --accent-ink: var(--yellow-200); --accent-glyph: var(--yellow-250); --accent-tint: var(--yellow-800); --accent-line: var(--yellow-500); --solid: var(--yellow-250); --solid-hover: var(--yellow-200); --on-solid: var(--gray-900); --brand: var(--yellow-250); }
:root[data-theme="dark"] [data-brand="gray"] { --solid: var(--gray-100); --solid-hover: var(--gray-200); --on-solid: var(--gray-900); --brand: var(--gray-100); }

/* ════ the portfolio's bar over the product ════ */
.pf-a { display: flex; flex-direction: column; height: 100%; }
.pf-bar {
  display: flex; align-items: center; gap: 8px; flex: none;
  height: var(--h-44); padding: 0 12px 0 8px;
  background: var(--ground); border-bottom: var(--px) solid var(--line-2);
  font-size: var(--fs-12); line-height: var(--lh-12);
}
.pf-product { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-left: 8px; border-left: var(--px) solid var(--line-2); white-space: nowrap; }
.pf-product > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.pf-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--h-20); height: var(--h-20); border-radius: var(--r-key); background: var(--brand, var(--ink)); color: var(--on-solid); }
.pf-mark > svg { width: var(--icon-12); height: var(--icon-12); }
.pf-n { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.pf-spacer { flex: 1; }
.pf-views { margin-left: 8px; }
.pf-views > [data-r="button"][aria-current="page"] { background-color: var(--plane-selected); color: var(--ink); }
.pf-actions { display: inline-flex; align-items: center; gap: 4px; }
#app[data-embed] > .pf-bar { display: none; }

/* ════ the product under the bar ════ */
.pf-product-body, .pf-a > main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.pf-a > main > [data-r="page"] { flex: 1; min-height: 0; }
.pf-a > main > [data-r="page"][hidden] { display: none; }

/* two or more windows of the product side by side */
.pf-frames { display: grid; grid-template-columns: repeat(var(--frames, 2), minmax(0, 1fr)); gap: var(--px); flex: 1; min-height: 0; background: var(--line-2); }
.pf-frames > iframe, .p1-pair > iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
.p1-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 280px; grid-template-areas: "alice bob" "relay relay"; gap: var(--px); flex: 1; min-height: 0; background: var(--line-2); }
.p1-alice { grid-area: alice; } .p1-bob { grid-area: bob; } .p1-relay { grid-area: relay; }
.pf-embed { display: block; flex: 1; width: 100%; min-height: 0; border: 0; }

/* what a server holds: tables across the width of the page */
.console { display: flex; flex-direction: column; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 32px 32px 80px; box-sizing: border-box; }
.console-head { display: flex; flex-direction: column; gap: 6px; max-width: 720px; margin-bottom: 8px; }
.console-head > h1 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.console-head > p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.console > h2 { margin: 16px 0 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.console [data-r="table"] td { overflow-wrap: anywhere; }
/* keys, hashes and ciphertext outside the reading components are set in Inter with even figures: the design system keeps the mono face to its reading register */
:is(.console, .pp, .site) code { font-family: inherit; font-variant-numeric: tabular-nums; }
#app[data-embed] .console { padding: 16px 20px 40px; }
#app[data-embed] .console-head > p { display: none; }

@media (max-width: 759px) {
  .pf-bar { padding: 0 4px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .pf-home > span, .pf-n, .pf-how-open > span, .pf-product > b { display: none; }
  .pf-product { flex: none; padding-left: 4px; }
  .pf-views { flex: none; }
  .pf-views { margin-left: 0; }
  .pf-frames { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(560px, 1fr); overflow: auto; }
  .p1-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: 560px 560px 360px; grid-template-areas: "alice" "bob" "relay"; overflow: auto; }
  .console { padding: 20px 16px 48px; }
}

/* ════ P9, the clinic's own site (A) ════ */
.site { flex: 1; display: flex; flex-direction: column; background: var(--paper); }
.site-wrap { width: 100%; max-width: 1088px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.site-head { border-bottom: var(--px) solid var(--line-2); }
.site-head > .site-wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.site-logo { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.site-meta { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.site-main { flex: 1; padding: 48px 0 80px; background: var(--ground); }
@media (max-width: 759px) {
  .site-head > .site-wrap { height: 56px; padding: 0 16px; }
  .site-meta { display: none; }
  .site-main { padding: 12px 0 40px; }
  .site-main > .site-wrap { padding: 0 8px; }
}

/* ════ P9, the booking ════ */
.bk-host { container: booking / inline-size; width: 100%; }
.bk {
  display: grid; grid-template-columns: 288px minmax(0, 1fr) 232px; grid-template-areas: "down down down" "info cal times" "info form form" "done done done";
  border-radius: var(--r-contain); background: var(--raised);
  box-shadow: 0 0 0 var(--px) var(--line-2);
  color: var(--ink-2);
}
.bk > [data-r="banner"] { grid-area: down; margin: 12px 12px 0; }
.bk-info { grid-area: info; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-right: var(--px) solid var(--line-2); }
.bk-org { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: var(--fw-500); }
.bk-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--h-28); height: var(--h-28); border-radius: var(--r-value); background: var(--brand, var(--ink)); color: var(--on-solid); flex: none; }
.bk-mark > svg { width: var(--icon-16); height: var(--icon-16); }
.bk-title { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.bk-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bk-facts > li, .bk-when { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); }
.bk-facts svg, .bk-when > svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.bk-when { padding: 12px; border-radius: var(--r-value); background: var(--paper-selected); color: var(--ink); }
.bk-when > span { display: flex; flex-direction: column; }
.bk-when b { font-weight: var(--fw-550); }
.bk-services { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 16px; border-top: var(--px) solid var(--line-2); }
.bk-service {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: var(--h-36); padding: 0 12px; border: 0; border-radius: var(--r-value);
  background: transparent; color: var(--ink-2); font: inherit; text-align: left;
  transition: background-color var(--state-out);
}
.bk-service-time { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.bk-service[aria-checked="true"] { background: var(--raised-selected); color: var(--ink); font-weight: var(--fw-500); }
.bk-service[aria-checked="true"] .bk-service-time { color: var(--ink-2); }
.bk-service:focus-visible { outline: none; box-shadow: var(--ring-inline); }
@media (hover: hover) { .bk-service:hover { background: var(--raised-hover); transition-duration: 0s; } .bk-service[aria-checked="true"]:hover { background: var(--raised-selected-hover); } }

.bk-cal { grid-area: cal; padding: 24px; }
/* the month: the design system's pills on a grid of seven; a day with free times has a fill, the chosen day the product's solid color */
.bk-month { display: flex; flex-direction: column; gap: 12px; }
.bk-month-head { display: flex; align-items: center; gap: 4px; }
.bk-month-head > b { flex: 1; padding-left: 4px; color: var(--ink); font-weight: var(--fw-550); }
.bk-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 6px; justify-items: center; }
.bk-wd { display: flex; align-items: center; justify-content: center; height: var(--h-24); color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-11); text-transform: uppercase; letter-spacing: .04em; }
.bk-day {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--h-44); height: var(--h-44); padding: 0; border: 0; border-radius: var(--r-press);
  background: transparent; color: var(--ink); font: inherit; font-weight: var(--fw-500); font-variant-numeric: tabular-nums;
  transition: background-color var(--state-out), color var(--state-out);
}
.bk-day:disabled { color: var(--ink-disabled); font-weight: var(--fw-400); }
.bk-day[data-has] { background: var(--raised-selected); }
.bk-day[data-today]::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--r-round); background: currentColor; }
.bk-day[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); box-shadow: var(--lit); }
.bk-day:focus-visible { outline: none; box-shadow: var(--ring-inline); }
@media (hover: hover) { .bk-day[data-has]:not([aria-pressed="true"]):hover { background: var(--raised-selected-hover); transition-duration: 0s; } }

.bk-times { grid-area: times; display: flex; flex-direction: column; min-height: 0; max-height: 420px; padding: 24px 16px 16px 0; }
.bk-day-title { margin: 0 0 12px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.bk-day-title > span { font-weight: var(--fw-450); color: var(--ink-3); }
.bk-times > [data-r="scroll-area"] { flex: 1; min-height: 0; }
.bk-time-list { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 4px 0; }
.bk-time { width: 100%; justify-content: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 var(--px) var(--line-3); }
.bk-time[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); box-shadow: var(--lit); }
.bk-empty { margin: 0; color: var(--ink-3); }

.bk-form { grid-area: form; display: flex; flex-direction: column; gap: 16px; max-width: 480px; padding: 24px; }
.bk[data-step="details"] .bk-form { grid-row: 2; }
.bk-form > h2, .bk-done > h2 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-form .bk-actions { justify-content: flex-end; margin-top: 8px; }

.bk-done { grid-area: done; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; text-align: center; }
.bk[data-step="done"] { grid-template-areas: "down" "done"; grid-template-columns: minmax(0, 1fr); }
.bk[data-step="done"] > .bk-info { display: none; }
.bk-done-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--h-44); height: var(--h-44); border-radius: var(--r-round); background: var(--success-dot); color: var(--on-solid); }
.bk-done-icon[data-tone="neutral"] { background: var(--ink-3); }
.bk-done > p { margin: 0; max-width: 440px; }
.bk-done > [data-r="properties"] { width: 100%; max-width: 520px; margin: 12px 0; padding: 12px 0; border-top: var(--px) solid var(--line-2); border-bottom: var(--px) solid var(--line-2); text-align: left; }
.bk-value { color: var(--ink); }

@container booking (max-width: 760px) {
  .bk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "down" "info" "cal" "times" "form" "done"; }
  .bk-info { border-right: 0; border-bottom: var(--px) solid var(--line-2); padding: 20px 16px; }
  .bk-cal { padding: 16px; }
  .bk-times { max-height: none; padding: 0 16px 20px; }
  .bk-times > [data-r="scroll-area"] { flex: none; }
  .bk-times > [data-r="scroll-area"] > [data-part="viewport"] { position: static; overflow: visible; }
  .bk-time-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk[data-step="details"] .bk-form { grid-row: auto; }
  .bk-form { padding: 20px 16px; }
}

/* ════ P12, Ledger ════ */
.ledger { container: ledger / inline-size; flex: 1; display: flex; min-width: 0; min-height: 0; background: var(--paper); }
.ledger-nav { display: flex; flex-direction: column; gap: 1px; flex: none; width: 224px; padding: 8px; background: var(--ground); border-right: var(--px) solid var(--line-2); overflow: auto; }
.ledger-head { display: flex; align-items: center; gap: 8px; height: var(--h-32); margin-bottom: 8px; padding: 0 6px; color: var(--ink); }
.ledger-head > b { flex: 1; font-weight: var(--fw-550); }
.ledger-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--h-20); height: var(--h-20); border-radius: var(--r-key); background: var(--brand, var(--ink)); color: var(--on-solid); }
.ledger-mark > svg { width: var(--icon-12); height: var(--icon-12); }
.ledger-section { margin: 14px 0 2px; padding: 0 8px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); }
.ledger-item {
  display: flex; align-items: center; gap: 8px; height: var(--row-28, var(--h-28)); padding: 0 8px; border: 0; border-radius: var(--r-row);
  background: transparent; color: var(--ink-2); font: inherit; font-weight: var(--fw-500); text-align: left; text-decoration: none;
  transition: background-color var(--state-out), color var(--state-out);
}
.ledger-item > svg { flex: none; color: var(--ink-3); }
.ledger-item > [data-r="keys"] { margin-left: auto; }
.ledger-item[aria-current="page"] { background: var(--ground-selected); color: var(--ink); }
.ledger-item[aria-current="page"] > svg { color: var(--brand); }
.ledger-item:focus-visible { outline: none; box-shadow: var(--ring-inline); }
@media (hover: hover) { .ledger-item:hover { background: var(--ground-hover); color: var(--ink); transition-duration: 0s; } .ledger-item[aria-current="page"]:hover { background: var(--ground-selected-hover); } }
@container ledger (max-width: 900px) { .ledger-nav { display: none; } }

/* the app: the list of records, or one record under its title bar */
.crm-app { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.crm-app[data-view="list"] > :is([data-part="header"], [data-part="main"]) { display: none; }
.crm-app:not([data-view="list"]) > .crm-list { display: none; }
.crm-app > [data-part="main"] { flex: 1; min-height: 0; }
.crm-list { flex: 1; display: flex; flex-direction: column; min-height: 0; container: crmlist / inline-size; }
.crm-head { display: flex; align-items: center; gap: 8px; flex: none; height: var(--h-44); padding: 0 12px 0 16px; border-bottom: var(--px) solid var(--line-2); }
.crm-spacer { flex: 1; }
.crm-list > .crm-filter { padding: 8px 12px 4px; }
.crm-list > [data-r="bulk-bar"] { margin: 0 12px 12px; }

/* the table: a head over the columns and rows the list draws as it scrolls */
.crm-table { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 4px 0 8px; }
.crm-table > [data-part="viewport"] { position: relative; flex: 1; min-height: 0; overflow: auto; contain: strict; outline: none; margin: 0 6px; }
.crm-table > [data-part="viewport"]:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--line-4); border-radius: var(--r-row); }
.crm-table [data-part="inner"] { position: relative; }
.crm-heads { flex: none; margin: 0 6px; }
.crm-heads > div { display: none; align-items: center; gap: 10px; height: var(--row-32, var(--h-32)); padding: 0 10px; border-bottom: var(--px) solid var(--line-2); color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); }
.crm-app[data-list="contacts"] .crm-heads > [data-heads="contacts"], .crm-app[data-list="deals"] .crm-heads > [data-heads="deals"] { display: grid; }
.crm-table [data-part="row"] {
  position: absolute; top: 0; left: 0; right: 0; display: grid; align-items: center; gap: 10px;
  height: var(--row-36, var(--h-36)); padding: 0 10px; border-radius: var(--r-row); color: var(--ink); will-change: transform;
}
.crm-table [data-part="row"][aria-selected="true"] { background: var(--paper-selected); }
@media (hover: hover) { .crm-table [data-part="row"]:hover { background: var(--paper-hover); } .crm-table [data-part="row"][aria-selected="true"]:hover { background: var(--paper-selected-hover); } }
.crm-table [data-part="row"] > [data-r="dot"] { justify-self: center; }
.crm-table [data-part="row"] > [data-part="title"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-500); }
.crm-table [data-part="row"] > :is([data-part="date"], [data-part="load"], [data-part="owner"], [data-part="when"]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.crm-table [data-part="row"] > [data-part="owner"] { display: flex; align-items: center; gap: 6px; }
.crm-table [data-part="row"] > [data-part="when"] { color: var(--ink-3); }
.crm-table > [data-part="info"] { margin: 8px 16px 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }
.crm-heads > div, .crm-table [data-part="row"] { grid-template-columns: 8px minmax(160px, 1fr) 150px 110px 130px 200px; }
.crm-app[data-list="deals"] :is(.crm-heads > div, .crm-table [data-part="row"]) { grid-template-columns: 8px minmax(160px, 1fr) 110px 120px 130px 100px; }
.crm-app[data-list="deals"] .crm-heads > div > :nth-child(4), .crm-app[data-list="deals"] .crm-table [data-part="row"] > [data-part="load"] { text-align: right; }
@container crmlist (max-width: 760px) {
  .crm-heads > div, .crm-table [data-part="row"], .crm-app[data-list="deals"] :is(.crm-heads > div, .crm-table [data-part="row"]) { grid-template-columns: 8px minmax(120px, 1fr) 110px 96px 110px; }
  :is(.crm-heads > div > :nth-child(6), .crm-table [data-part="row"] > [data-part="when"]) { display: none; }
}
@container crmlist (max-width: 520px) {
  .crm-heads { display: none; }
  .crm-table [data-part="row"], .crm-app[data-list="deals"] .crm-table [data-part="row"] { grid-template-columns: 8px minmax(0, 1fr) 96px; }
  .crm-table [data-part="row"] > :is([data-part="owner"], [data-part="when"]) { display: none; }
  .crm-app[data-list="contacts"] .crm-table [data-part="row"] > [data-part="load"] { display: none; }
  .crm-app[data-list="deals"] .crm-table [data-part="row"] > [data-part="date"] { display: none; }
  .crm-head { padding: 0 8px; }
}

/* a record: the work in the reading column, its properties in a column beside it */
.crm-record { display: flex; align-items: flex-start; justify-content: center; gap: 48px; padding: 32px 32px 80px; }
.crm-record > [data-r="prose"] { flex: 1; min-width: 0; }
.rec-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 8px; flex: none; width: 272px; padding-left: 24px; border-left: var(--px) solid var(--line-2); }
.rec-side > h3 { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.rec-side > h3 ~ h3 { margin-top: 16px; }
@container ledger (max-width: 900px) {
  .crm-record { flex-direction: column-reverse; align-items: stretch; gap: 24px; padding: 20px 16px 48px; }
  .rec-side { position: static; width: auto; padding: 0 0 16px; border-left: 0; border-bottom: var(--px) solid var(--line-2); }
}

/* ════ the overview ════ */
.ov-body { height: auto; min-height: 100%; }
.ov { min-height: 100%; background: var(--paper); }
.ov-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.ov-top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--paper); border-bottom: var(--px) solid var(--line-2); }
.ov-top > .ov-wrap { display: flex; align-items: center; gap: 16px; height: 56px; }
.ov-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); font-weight: var(--fw-550); text-decoration: none; }
.ov-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--h-24); height: var(--h-24); border-radius: var(--r-key); background: var(--ink); color: var(--paper); font-size: var(--fs-11); line-height: 1; }
.ov-links { display: flex; align-items: center; gap: 4px; }
.ov-hero { display: flex; flex-direction: column; gap: 12px; max-width: 720px; padding: 72px 0 40px; }
.ov-hero > h1 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.ov-hero > h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.02em; } /* allow: type-scale · the overview's display heading, allowed on the portfolio's own pages (OPS-76, question 2) */
.ov-hero > p { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); color: var(--ink-2); text-wrap: pretty; }
.ov-filter { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; }
.ov-count { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; padding-bottom: 96px; }
.ov-card { display: flex; flex-direction: column; gap: 14px; color: var(--ink-2); text-decoration: none; }
.ov-card[hidden] { display: none; }
.ov-shot { display: block; overflow: hidden; border-radius: var(--r-contain); background: var(--ground); box-shadow: 0 0 0 var(--px) var(--line-2); aspect-ratio: 16 / 10; }
.ov-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform var(--scale-in) var(--ease-expo); }
@media (hover: hover) { .ov-card:hover .ov-shot img { transform: scale(1.02); } .ov-card:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.ov-card:focus-visible { outline: none; }
.ov-card:focus-visible .ov-shot { box-shadow: var(--ring-inline); }
.ov-card-text { display: flex; flex-direction: column; gap: 4px; }
.ov-card-head { display: flex; align-items: center; gap: 8px; }
.ov-card-head > .ov-n { margin-left: auto; }
.ov-brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--h-20); height: var(--h-20); border-radius: var(--r-key); background: var(--brand, var(--ink)); color: var(--on-solid); }
.ov-brand-mark > svg { width: var(--icon-12); height: var(--icon-12); }
.ov-card-head > b { color: var(--ink); font-weight: var(--fw-550); }
.ov-n { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }
.ov-kind { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.ov-proves { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }

@media (max-width: 1023px) { .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .ov-wrap { padding: 0 16px; }
  .ov-links > :not([data-variant="primary"]) { display: none; }
  .ov-hero { padding: 40px 0 24px; }
  .ov-hero > h1 { font-size: 28px; line-height: 32px; } /* allow: type-scale · the overview's display heading on a phone (OPS-76, question 2) */
  .ov-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ov-filter { flex-wrap: wrap; }
}

/* ════ a product's own page: its title block, then cards of the design system in its own grid ════ */
.pp { flex: none; }
.pp-wrap { display: flex; flex-direction: column; gap: 24px; max-width: 1120px; margin: 0 auto; padding: 40px 32px 80px; box-sizing: border-box; }
.pp-hero { padding-bottom: 8px; }
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pp-grid-wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.pp [data-r="card"] > [data-part="header"] > h2[data-part="title"] { margin: 0; }
@media (max-width: 859px) {
  .pp-grid, .pp-grid-wide { grid-template-columns: minmax(0, 1fr); }
  .pp-wrap { gap: 16px; padding: 24px 16px 48px; }
}
.site[hidden] { display: none; }
.pp-narrow { max-width: 560px; }
.pp-list { margin: 0; padding-left: 20px; }
.pp-list > li + li { margin-top: 4px; }
/* P10: the quote on the left, the files beside it while the quote scrolls */
.qw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.qw-files { position: sticky; top: 24px; }
.qw-files iframe.pdf-view { height: 560px; }
@media (max-width: 859px) { .qw-grid { grid-template-columns: minmax(0, 1fr); } .qw-files { position: static; } }

/* ════ P17, Havnekaffe: the guest's menu on the phone ════ */
.cf-pair { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); }
.cf { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; background: var(--paper); }
.cf-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.cf-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--h-32); height: var(--h-32); border-radius: var(--r-value); background: var(--brand); color: var(--on-solid); }
.cf-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cf-name > b { color: var(--ink); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); }
.cf-name > span { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cf > [data-r="banner"] { margin: 0 16px 8px; }
.cf-cats { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; background: var(--paper); border-bottom: var(--px) solid var(--line-2); }
.cf-cat { display: inline-flex; align-items: center; flex: none; height: var(--h-28); padding: 0 12px; border-radius: var(--r-press); color: var(--ink-2); font-weight: var(--fw-500); text-decoration: none; transition: background-color var(--state-out), color var(--state-out); }
.cf-cat:focus-visible { outline: none; box-shadow: var(--ring-inline); }
@media (hover: hover) { .cf-cat:hover { background: var(--paper-hover); color: var(--ink); transition-duration: 0s; } }
.cf-menu { display: flex; flex-direction: column; padding-bottom: 24px; }
.cf-section { scroll-margin-top: 48px; }
.cf-section > h2, .cf-mine > h2 { margin: 20px 16px 4px; color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); }
.cf-items { display: flex; flex-direction: column; }
.cf-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: var(--px) solid var(--line-2);
  background: transparent; color: var(--ink-2); font: inherit; text-align: left; transition: background-color var(--state-out);
}
.cf-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cf-item-text > b { color: var(--ink); font-weight: var(--fw-500); }
.cf-item-text > span { font-size: var(--fs-12); line-height: var(--lh-12); }
.cf-allergens { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cf-item-end { flex: none; padding-top: 1px; }
.cf-price { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-item[aria-disabled="true"] .cf-item-text > b, .cf-item[aria-disabled="true"] .cf-item-text > span { color: var(--ink-3); }
.cf-item:focus-visible { outline: none; box-shadow: inset var(--ring-inline); }
@media (hover: hover) { .cf-item:not([aria-disabled="true"]):hover { background: var(--paper-hover); transition-duration: 0s; } }

/* the table's orders: a card each, with the kitchen's four steps */
.cf-mine { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 8px; }
.cf-mine > h2 { margin: 16px 0 0; }
.cf-order { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-2), var(--e1); }
.cf-order-head { display: flex; flex-direction: column; gap: 2px; }
.cf-order-head > b { color: var(--ink); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); }
.cf-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.cf-track > li { display: flex; flex-direction: column; gap: 6px; color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-11); }
.cf-track > li > i { display: block; height: 4px; border-radius: var(--r-round); background: var(--line-3); }
.cf-track > li[data-done] > i { background: var(--brand); }
.cf-track > li[aria-current] { color: var(--ink); font-weight: var(--fw-500); }
.cf-track > li[aria-current] > i { background: var(--brand); }
.cf-order[data-status="ready"] .cf-order-head > span { color: var(--success-ink); font-weight: var(--fw-500); }
.cf-lines, .cf-blines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cf-lines > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.cf-qty { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cf-line-text { display: flex; flex-direction: column; color: var(--ink); }
.cf-line-text > small, .cf-bline-text > small { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cf-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: var(--px) solid var(--line-2); }
.cf-order-foot b { color: var(--ink); font-weight: var(--fw-550); font-variant-numeric: tabular-nums; }

/* the order at the foot of the phone, and in its sheet */
.cf-bar { position: sticky; bottom: 0; z-index: var(--z-sticky); margin-top: auto; padding: 12px 16px; background: var(--paper); border-top: var(--px) solid var(--line-2); }
.cf-bar-button { width: 100%; justify-content: space-between; }
.cf-bar-sum { font-variant-numeric: tabular-nums; }
.cf-seg { flex-wrap: wrap; }
.cf-stepper { width: 112px; }
.cf-sheet-foot { display: flex; flex-direction: column; padding-top: 4px; }
.cf-sheet-foot > [data-r="button"] { width: 100%; }
.cf-bline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: var(--px) solid var(--line-2); }
.cf-bline-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; }
.cf-bline-text > b { font-weight: var(--fw-500); }
.cf-bline-text:focus-visible { outline: none; box-shadow: var(--ring-inline); border-radius: var(--r-row); }
.cf-bline-text > small.cf-gone { color: var(--danger-ink); }
.cf-total { display: flex; justify-content: space-between; color: var(--ink); }
.cf-total > b { font-weight: var(--fw-550); font-variant-numeric: tabular-nums; }
.cf-note { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }

/* the codes for the tables, one card each; printed three to a row */
.cf-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.cf-code { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-2), var(--e1); break-inside: avoid; }
.cf-qr { display: block; width: 100%; max-width: 168px; height: auto; border-radius: var(--r-value); }
.cf-code > figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cf-code > figcaption > b { color: var(--ink); font-weight: var(--fw-550); }
.cf-code > figcaption > span { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
@media print {
  .pf-bar, .pp-hero, .pp-wrap > .row { display: none; }
  .pf-a > main { overflow: visible; }
  .cf-codes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-code { box-shadow: 0 0 0 var(--px) var(--line-3); }
}

/* ════ P17, the kitchen's screen ════ */
.kd { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 40px; }
.kd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kd-cols[hidden], .kd-stock[hidden] { display: none; }
.kd-col { display: flex; flex-direction: column; gap: 8px; min-height: 240px; padding: 8px; border-radius: var(--r-contain); background: var(--ground); }
.kd-col-head { display: flex; align-items: center; gap: 8px; height: var(--h-28); padding: 0 6px; }
.kd-col-head > h2 { margin: 0; color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); }
.kd-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kd-list { display: flex; flex-direction: column; gap: 8px; }
.kd-empty { margin: 0; padding: 12px 6px; color: var(--ink-3); }
.kd-ticket > [data-part="header"] > [data-part="meta"] { display: inline-flex; gap: 8px; font-variant-numeric: tabular-nums; }
.kd-ticket[data-late] .kd-age { color: var(--warning-ink); font-weight: var(--fw-500); }
.kd-ticket[data-new] { box-shadow: 0 0 0 2px var(--brand), var(--e1); }
.kd-lines { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kd-lines > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; color: var(--ink); }
.kd-lines > li > b { font-weight: var(--fw-550); font-variant-numeric: tabular-nums; }
.kd-lines > li > span { display: flex; flex-direction: column; font-weight: var(--fw-500); }
.kd-lines small { color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-400); }
.kd-lines small.kd-note { color: var(--warning-ink); }
.kd-ticket > [data-part="footer"] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kd-spacer { flex: 1; }
.kd-stock { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.kd-stock-head { margin: 0; color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); }
.kd-stock-note { margin: 0 0 8px; color: var(--ink-2); }
@media (max-width: 959px) { .kd-cols { grid-template-columns: minmax(0, 1fr); } .kd-col { min-height: 0; } }
@media (max-width: 759px) { .cf-pair { grid-template-columns: minmax(0, 1fr); } .kd { padding: 12px 12px 32px; } }

/* ════ P18, Tally: the scanner on the phone ════ */
.tl-trio { grid-template-columns: minmax(320px, 400px) minmax(320px, 400px) minmax(0, 1fr); }
.tl { flex: 1; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: 32px; background: var(--paper); }
.tl-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 4px; }
.tl-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--h-32); height: var(--h-32); border-radius: var(--r-value); background: var(--brand); color: var(--on-solid); }
.tl-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tl-name > b { color: var(--ink); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); }
.tl-name > span { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.tl > [data-r="banner"] { margin: 0 16px; }
.tl-find { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.tl-scan { width: 100%; }
.tl-results { margin: 0; }
.tl-results[hidden] { display: none; }
.tl-num { color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-item { display: flex; flex-direction: column; gap: 14px; margin: 0 16px; padding: 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-2), var(--e1); }
.tl-item[hidden] { display: none; }
.tl-item-head { display: flex; align-items: flex-start; gap: 8px; }
.tl-item-name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tl-item-name > b { color: var(--ink); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); }
.tl-item-name > span { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }
.tl-kinds { flex-wrap: wrap; }
.tl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-stepper { width: 132px; }
.tl-save { width: 100%; }
.tl-note { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.tl-error { color: var(--danger-ink); }
.tl-error[hidden] { display: none; }
.tl-log { display: flex; flex-direction: column; gap: 4px; padding: 0; }
.tl-log > h2 { margin: 8px 16px 4px; color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); }
.tl-log > div > .tl-note { margin: 0 16px; }
.tl-cam { position: relative; overflow: hidden; border-radius: var(--r-contain); background: var(--ground); aspect-ratio: 4 / 3; }
.tl-cam > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-cam-guide { position: absolute; left: 12%; right: 12%; top: 38%; bottom: 38%; border-radius: var(--r-value); box-shadow: 0 0 0 2px var(--paper), 0 0 0 999px rgb(var(--ring-rgb) / .35); pointer-events: none; }
.tl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 859px) { .tl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .tl-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(560px, 1fr); overflow: auto; } .tl-trio > iframe:last-child { grid-column: 1 / -1; } }
@media (max-width: 759px) { .tl-trio { grid-template-columns: minmax(0, 1fr); } }

/* the labels: black bars on white in both themes, three to a printed row */
.tl-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tl-label { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-2), var(--e1); break-inside: avoid; }
.tl-bars { display: block; width: 100%; height: 72px; border-radius: var(--r-key); }
.tl-label > figcaption { display: flex; flex-direction: column; gap: 2px; }
.tl-label > figcaption > b { color: var(--ink); font-weight: var(--fw-550); }
.tl-label > figcaption > span { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.tl-digits { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
@media print {
  .pp-wrap > .row { display: none; }
  .tl-labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ════ P21, Lectern: the course player ════ */
.lc { flex: 1; display: flex; min-width: 0; min-height: 0; }
.lc-side { display: flex; flex-direction: column; gap: 12px; flex: none; width: 264px; padding: 16px 10px; background: var(--ground); border-right: var(--px) solid var(--line-2); overflow: auto; box-sizing: border-box; }
.lc-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px; color: var(--ink); }
.lc-brand > b { font-weight: var(--fw-550); }
.lc-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--h-20); height: var(--h-20); border-radius: var(--r-key); background: var(--brand); color: var(--on-solid); }
.lc-mark > svg { width: var(--icon-12); height: var(--icon-12); }
.lc-course { margin: 8px 6px 0; color: var(--ink); font-weight: var(--fw-550); }
.lc-progress { display: flex; flex-direction: column; gap: 6px; padding: 0 6px 4px; }
.lc-note { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.lc-lessons { display: flex; flex-direction: column; gap: 2px; }
.lc-lesson {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; border: 0; border-radius: var(--r-row);
  background: transparent; color: var(--ink-2); font: inherit; text-align: left; transition: background-color var(--state-out);
}
.lc-lesson > svg { margin-top: 1px; color: var(--ink-3); }
.lc-lesson > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-lesson b { color: var(--ink); font-weight: var(--fw-500); }
.lc-lesson > span > span { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.lc-lesson[aria-current="page"] { background: var(--ground-selected); }
.lc-lesson[aria-current="page"] > svg { color: var(--brand); }
.lc-lesson[aria-disabled="true"] b { color: var(--ink-3); }
.lc-lesson:focus-visible { outline: none; box-shadow: var(--ring-inline); }
@media (hover: hover) { .lc-lesson:not([aria-disabled="true"]):hover { background: var(--ground-hover); transition-duration: 0s; } .lc-lesson[aria-current="page"]:hover { background: var(--ground-selected-hover); } }
.lc-who { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 6px 0; border-top: var(--px) solid var(--line-2); }
.lc-who[hidden] { display: none; }
.lc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.lc-page { flex: 1; min-width: 0; }
.lc-end { height: 1px; }
.lc-after { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.lc-q { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 0 14px; border: 0; border-bottom: var(--px) solid var(--line-2); }
.lc-q > legend { margin-bottom: 8px; padding: 0; color: var(--ink); font-weight: var(--fw-500); }
.lc-choices { display: flex; flex-direction: column; gap: 8px; }
.lc-why { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; color: var(--ink-2); }
.lc-why > svg { flex: none; margin-top: 2px; }
.lc-q[data-right="true"] .lc-why > svg { color: var(--success-dot); }
.lc-q[data-right="false"] .lc-why > svg { color: var(--danger-dot); }
.lc-verify { display: flex; align-items: flex-end; gap: 8px; }
.lc-verify > [data-r="form-row"] { flex: 1; }
@media (max-width: 859px) {
  .lc { flex-direction: column; overflow: auto; }
  .lc-side { width: auto; border-right: 0; border-bottom: var(--px) solid var(--line-2); }
  .lc-lessons { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .lc-lesson { flex: none; width: 188px; }
  .lc-page { min-height: 640px; }
}

/* ════ P22, Switchboard ════ */
.sb-note { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.sb-pad { padding: 12px 20px; }
.sb-secret { overflow-wrap: anywhere; }
.pp [data-r="card"] [data-r="property"] > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.sb-id { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ════ P19, Tabula: a workspace from a spreadsheet ════ */
.tb { flex: 1; display: flex; min-width: 0; min-height: 0; background: var(--paper); }
.tb-nav { display: flex; flex-direction: column; gap: 1px; flex: none; width: 224px; padding: 8px; background: var(--ground); border-right: var(--px) solid var(--line-2); overflow: auto; box-sizing: border-box; }
.tb-ws { display: flex; align-items: center; gap: 8px; height: var(--h-32); padding: 0 6px; color: var(--ink); }
.tb-ws > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-550); }
.tb-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--h-20); height: var(--h-20); border-radius: var(--r-key); background: var(--brand, var(--ink)); color: var(--on-solid); }
.tb-mark > svg { width: var(--icon-12); height: var(--icon-12); }
.tb-me { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 4px 6px; }
.tb-me > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.tb-me b { color: var(--ink); font-weight: var(--fw-550); font-size: var(--fs-13); line-height: var(--lh-13); }
.tb-section { margin: 14px 0 2px; padding: 0 8px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); }
.tb-item {
  display: flex; align-items: center; gap: 8px; height: var(--row-28, var(--h-28)); padding: 0 8px; border: 0; border-radius: var(--r-row);
  background: transparent; color: var(--ink-2); font: inherit; font-weight: var(--fw-500); text-align: left; text-decoration: none;
  transition: background-color var(--state-out), color var(--state-out);
}
.tb-item[hidden] { display: none; }
.tb-item > svg { flex: none; color: var(--ink-3); }
.tb-item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-n { flex: none; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }
.tb-item[aria-current="page"] { background: var(--ground-selected); color: var(--ink); }
.tb-item[aria-current="page"] > svg { color: var(--brand); }
.tb-item:focus-visible { outline: none; box-shadow: var(--ring-inline); }
@media (hover: hover) { .tb-item:hover { background: var(--ground-hover); color: var(--ink); transition-duration: 0s; } .tb-item[aria-current="page"]:hover { background: var(--ground-selected-hover); } }
.tb-presence { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; }
.tb-presence > .tb-section { margin: 0 0 4px; }
.tb-here { display: flex; align-items: center; gap: 8px; padding: 2px 8px; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); }

.tb-main { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tb-view { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tb-view[hidden] { display: none; }
.tb-head { display: flex; align-items: center; gap: 8px; flex: none; height: var(--h-44); padding: 0 12px 0 16px; border-bottom: var(--px) solid var(--line-2); min-width: 0; }
.tb-head > h1 { margin: 0; flex: none; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.tb-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.tb-spacer { flex: 1; }
.tb-hint { margin: 0; padding: 6px 16px; border-bottom: var(--px) solid var(--line-1); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.tb-hint[hidden] { display: none; }
.tb-hint[data-tone="warning"] { color: var(--warning-ink); }
.tb-hint[data-tone="danger"] { color: var(--danger-ink); }
.tb-hint[data-tone="success"] { color: var(--success-ink); }
.tb-hint [data-r="button"] { vertical-align: middle; }
.tb-view > [data-r="banner"] { margin: 8px 12px 0; }

/* the grid: a head that stays at the top and the rows drawn as it scrolls */
.tb-grid { position: relative; flex: 1; min-height: 0; overflow: auto; outline: none; contain: strict; }
.tb-grid:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--line-4); }
.tb-grid-head { position: sticky; top: 0; z-index: 2; display: grid; width: var(--tb-width); height: var(--row-32, var(--h-32)); padding: 0 8px; box-sizing: border-box; background: var(--paper); border-bottom: var(--px) solid var(--line-2); }
.tb-th { min-width: 0; }
.tb-th > button { display: flex; align-items: center; gap: 4px; width: 100%; height: 100%; padding: 0 8px; border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); text-align: left; white-space: nowrap; }
.tb-th > button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-th > button > svg { flex: none; color: var(--ink-4); }
.tb-th[aria-sort]:not([aria-sort="none"]) > button { color: var(--ink); }
.tb-th[data-num] > button { justify-content: flex-end; }
.tb-th > button:focus-visible { outline: none; box-shadow: var(--ring-inline); border-radius: var(--r-key); }
@media (hover: hover) { .tb-th > button:hover { color: var(--ink); } }
.tb-unit { color: var(--ink-4); font-size: var(--fs-11); line-height: var(--lh-11); }
.tb-grid-body { position: relative; width: var(--tb-width); }
.tb-tr { position: absolute; top: 0; left: 0; display: grid; width: var(--tb-width); height: 32px; padding: 0 8px; box-sizing: border-box; border-bottom: var(--px) solid var(--line-1); will-change: transform; }
.tb-tr[hidden] { display: none; }
@media (hover: hover) { .tb-tr:hover { background: var(--paper-hover); } }
.tb-td { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.tb-td > span:not([data-r]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-td[data-num] { justify-content: flex-end; }
.tb-td[data-cat] { color: var(--ink-2); }
.tb-td[data-active] { box-shadow: inset 0 0 0 1.5px var(--ink-3); border-radius: var(--r-key); }
.tb-grid:focus .tb-td[data-active] { box-shadow: inset 0 0 0 1.5px var(--accent, var(--ink)); }
.tb-td[data-with] { box-shadow: inset 0 0 0 1.5px var(--with); border-radius: var(--r-key); }
.tb-td[data-with]::after { content: attr(data-with); position: absolute; top: 1px; right: 2px; padding: 0 4px; border-radius: var(--r-key); background: var(--raised); box-shadow: inset 0 0 0 var(--px) var(--with); color: var(--ink); font-size: var(--fs-9); line-height: var(--lh-9); font-weight: var(--fw-550); }
.tb-td[data-flash] { background: var(--plane-selected); }
.tb-open { display: none; flex: none; align-items: center; justify-content: center; width: var(--h-20); height: var(--h-20); margin-left: -4px; padding: 0; border: 0; border-radius: var(--r-key); background: transparent; color: var(--ink-3); }
.tb-open > svg { width: var(--icon-12); height: var(--icon-12); }
.tb-td[data-active] > .tb-open { display: inline-flex; }
@media (hover: hover) { .tb-tr:hover .tb-open { display: inline-flex; } .tb-open:hover { background: var(--plane-hover); color: var(--ink); } }
.tb-editor { position: absolute; top: 0; left: 0; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.tb-editor > [data-r="field"] { box-shadow: var(--ring-inline), var(--e2); }
.tb-editor-note { padding: 2px 6px; border-radius: var(--r-key); background: var(--raised); color: var(--danger-ink); font-size: var(--fs-12); line-height: var(--lh-12); }
.tb-editor-note:empty { display: none; }
.tb-foot { display: flex; align-items: center; gap: 8px; flex: none; min-height: var(--h-36); padding: 0 12px 0 16px; border-top: var(--px) solid var(--line-2); overflow-x: auto; white-space: nowrap; }
.tb-foot:empty { display: none; }
.tb-foot-label { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); margin-right: 4px; }
.tb-foot [data-r="aggregate"] { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; }
.tb-foot [data-r="aggregate"] b { color: var(--ink); font-weight: var(--fw-500); }
.tb-groups { flex: none; max-height: 240px; overflow: auto; padding: 8px 16px; border-bottom: var(--px) solid var(--line-2); }
.tb-groups[hidden] { display: none; }
.tb-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--line-4); text-underline-offset: 3px; }
@media (hover: hover) { .tb-link:hover { text-decoration-color: currentColor; } }
.tb-link:focus-visible { outline: none; box-shadow: var(--ring-inline); border-radius: var(--r-key); }

/* the log, the roles and the people */
.tb-pad { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px 24px 48px; }
.tb-acts { text-align: right; white-space: nowrap; }
.tb-who { display: inline-flex; align-items: center; gap: 6px; }
.tb-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.tb-rule [data-part="body"] { display: flex; flex-direction: column; gap: 12px; }
.tb-rule [data-part="title"] { display: flex; align-items: center; gap: 6px; }
.tb-rule-cols { display: flex; flex-direction: column; gap: 6px; }
.tb-rule-h { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); }
.tb-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tb-empty { color: var(--ink-3); }
.tb-warn { color: var(--warning-ink); }

/* a row in the sheet at the right */
.tb-row { display: flex; flex-direction: column; gap: 12px; }
.tb-row > h3 { margin: 8px 0 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.tb-link-row { display: flex; align-items: center; gap: 8px; min-height: var(--row-32, var(--h-32)); border-bottom: var(--px) solid var(--line-1); }
.tb-link-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.tb-hist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tb-hist > li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.tb-hist > li > span:nth-child(2) { flex: 1; min-width: 0; }
.tb-when { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }

/* the start, the side by side, the import and the bench */
.tb-start { margin: auto; }
.tb-start[hidden] { display: none; }
.tb-trio { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tb-trio > .pf-frames[hidden] { display: none; }
.tb-note { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.tb-imp-sheet { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.tb-imp-sheet > h2, .tb-imp-head > h2 { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.tb-imp-head { display: flex; align-items: center; gap: 8px; }
.tb-rel { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ink-2); }
.tb-rel > svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.tb-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-bench h2 { margin: 32px 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.tb-bench [data-part="table"], .tb-import [data-part="table"] { margin-top: 8px; }
.tb-import td[data-num] { white-space: nowrap; }

@media (max-width: 760px) {
  .tb { flex-direction: column; }
  .tb-nav { flex-direction: row; align-items: center; width: auto; padding: 4px 8px; border-right: 0; border-bottom: var(--px) solid var(--line-2); overflow-x: auto; }
  .tb-nav > :is(.tb-ws, .tb-me, .tb-section, .tb-presence) { display: none; }
  .tb-sheets { display: flex; gap: 1px; }
  .tb-item { flex: none; }
  .tb-head { padding: 0 8px 0 12px; }
  .tb-meta { display: none; }
  .tb-pad { padding: 12px 12px 40px; }
  .tb-rules { grid-template-columns: minmax(0, 1fr); }
}

/* ════ P20, Voucher: invoices read by AI ════ */
.vc { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--paper); }
.vc-head { display: flex; align-items: center; gap: 8px; flex: none; min-height: var(--h-44); padding: 0 12px 0 16px; border-bottom: var(--px) solid var(--line-2); box-sizing: border-box; min-width: 0; }
.vc-head > :is(h1, h2) { margin: 0; flex: none; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.vc-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.vc-spacer { flex: 1; }
.vc-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px 24px 48px; }
.vc-note { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.vc-note:empty { display: none; }
.vc-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-4); text-underline-offset: 3px; }
@media (hover: hover) { .vc-link:hover { text-decoration-color: currentColor; } }
.vc-link:focus-visible { outline: none; box-shadow: var(--ring-inline); border-radius: var(--r-key); }
.vc-kind { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); }

/* the review: the page and its marks on the left, the fields on the right */
.vc-review { flex: 1; display: flex; min-height: 0; background: var(--paper); }
.vc-doc { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vc-canvas { flex: 1; min-height: 0; overflow: auto; padding: 24px; background: var(--ground); outline: none; }
.vc-canvas:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--line-4); }
.vc-sheet { position: relative; margin: 0 auto; box-shadow: 0 0 0 var(--px) var(--line-2), var(--e2); background: var(--raised); }
.vc-visual { display: block; }
.vc-words { position: absolute; inset: 0; }
.vc-word { position: absolute; border-radius: var(--r-key); }
.vc-word[data-mark="sure"] { box-shadow: 0 0 0 1.5px var(--success-dot); }
.vc-word[data-mark="check"] { box-shadow: 0 0 0 1.5px var(--warning-dot); }
.vc-word[data-mark="checked"] { box-shadow: 0 0 0 1.5px var(--accent-line, var(--line-4)); }
.vc-word[data-on] { box-shadow: 0 0 0 2.5px var(--accent, var(--ink)); }
@media (hover: hover) { .vc-word:hover { box-shadow: 0 0 0 1px var(--ink-3); } }
.vc-xml { margin: 0; padding: 16px; max-width: 900px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vc-panel { display: flex; flex-direction: column; flex: none; width: 400px; min-height: 0; border-left: var(--px) solid var(--line-2); background: var(--paper); }
.vc-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 16px 24px; }
.vc-panel-body > h3 { margin: 20px 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.vc-field { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; border-radius: var(--r-row); }
.vc-field[data-active] { background: var(--plane-selected); }
.vc-field-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.vc-field-top > label { color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); }
.vc-reasons { margin: 0; padding-left: 16px; color: var(--warning-ink); font-size: var(--fs-12); line-height: var(--lh-12); }
.vc-reasons > li + li { margin-top: 2px; }
.vc-readers { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vc-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vc-checks > li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.vc-checks > li > svg { flex: none; margin-top: -1px; color: var(--success-ink); }
.vc-checks > li[data-ok="false"] > svg { color: var(--warning-ink); }
.vc-checks b { color: var(--ink); font-weight: var(--fw-550); }
.vc-foot { display: flex; align-items: center; gap: 12px; flex: none; min-height: var(--h-44); padding: 8px 16px; border-top: var(--px) solid var(--line-2); box-sizing: border-box; }
.vc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 12px; }
.vc-quality h2, .vc-sup > h2 { margin: 28px 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.vc-quality [data-part="table"] td[data-num], .vc-sup td { font-variant-numeric: tabular-nums; }
.vc-quality code, .vc-review code { font-family: inherit; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .vc-review { flex-direction: column; overflow: auto; }
  .vc-doc { flex: none; height: 60vh; }
  .vc-panel { width: auto; border-left: 0; border-top: var(--px) solid var(--line-2); }
  .vc-body { padding: 12px 12px 40px; }
  .vc-canvas { padding: 12px; }
}