/* ==========================================================================
   Orders — PDF Templates Manager (orders-documents.html)

   Spec: build/pages.md §13

   Only what is this page's own: the one card's subsections, the template gallery, the branding sketch, the status-event rules, and the
   dialogs' pieces (the email list is css/pages/orders-emails.css). Everything another Orders page also says — the
   readings, the two-sided choice, the key–value grid, the timeline, the gear
   dialogs — is in css/pages/orders.css under `ord-`; this file is `odc-` and
   never redefines an `.ord-*` class.

   TOKENS ONLY. Every colour is a `var(--color-…)`, radius never passes 7px
   (memory.md §2), nothing is set under 10px (§4). A reading is a word, a
   category is grey, and a badge's colour means a state (§19). Anything that
   sits on the white card — a letterhead sketch, a document page, a drop zone,
   a start tile — takes the control ground (§13).
   ========================================================================== */

/* ---------- Header ------------------------------------------------------------ */
.odc-crumb { margin: 0 0 6px; }
.odc-crumb a { color: var(--color-text-muted); }
.odc-crumb a:hover { color: var(--color-primary-700); }

/* ---------- The one card -------------------------------------------------------
   Subsections divide with the border hairline. A side section opens with its
   head, carries its table, and closes with its own footer (the pager lands
   there); the branding, events and email sections open with the same head. */
.odc-card .card-header { align-items: flex-start; gap: 16px; }
.odc-card .card-header .sub { max-width: 820px; }
.odc-head-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.odc-head-reading { flex: none; font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.odc-head-reading strong { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.odc-sec { border-top: 1px solid var(--color-border); }

/* Templates first, the branding they wear beside them. */
.odc-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.odc-split__main { min-width: 0; }
.odc-split > .odc-sec { border-top: 0; border-left: 1px solid var(--color-border); align-self: stretch; }
.odc-split > .odc-sec .odc-sub-head { flex-direction: column; }

.odc-sub-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 16px 10px;
}
.odc-sub-head > div { flex: 1 1 auto; min-width: 0; }
.odc-sub-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); }
.odc-sub-head p { margin: 4px 0 0; font-size: 12px; color: var(--color-text-subtle); max-width: 760px; line-height: 1.5; }
.odc-sub-reading {
  flex: none; max-width: 34%; margin-top: 2px;
  justify-content: flex-end; text-align: right;
  font-size: 12px; color: var(--color-text-muted);
}
.odc-sub-reading .ord-linked { font-size: 12px; white-space: normal; }
.odc-sub-acts { flex: none; display: inline-flex; gap: 8px; align-items: center; }

/* ---------- The licence's set: a gallery ----------------------------------------
   Grouped tiles, each a sketch of its page on the control ground (§13) over
   what it is, how much it is used and the price it shows. The tile lifts on
   hover and its verbs appear on the sketch; on a touch screen they stay. */
.odc-group { padding: 4px 16px 16px; }
.odc-group[hidden], .odc-tile[hidden] { display: none; }
.odc-group__h {
  display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}
.odc-group__n { font-weight: 400; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.odc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.odc-tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.odc-tile:hover, .odc-tile:focus-visible { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.odc-tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.odc-tile[data-status="off"] .odc-thumb__page { opacity: .45; }
.odc-tile__body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; border-top: 1px solid var(--color-border); }
.odc-tile__doc { font-size: 13px; font-weight: 600; color: var(--color-text); }
.odc-tile__tpl { font-size: 12px; color: var(--color-text-muted); }
.odc-tile__meta { font-size: 11px; color: var(--color-text-subtle); }
.odc-tile__pending { margin-top: 2px; font-size: 11px; }
.odc-tile__state { position: absolute; top: 8px; left: 8px; }
/* The verbs ride the sketch's corner, on the surface so they read on the page. */
.odc-tile__acts {
  position: absolute; top: 8px; right: 8px; padding: 2px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); opacity: 0; transition: opacity 120ms;
}
.odc-tile:hover .odc-tile__acts, .odc-tile:focus-within .odc-tile__acts { opacity: 1; }
.odc-tile__acts .odc-del:hover { color: var(--color-danger); }
@media (hover: none) { .odc-tile__acts { opacity: 1; } }
/* The first tile starts a new template. */
.odc-add-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px;
  border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius);
  background: transparent; color: var(--color-text-subtle);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  transition: border-color 120ms, color 120ms;
}
.odc-add-tile:hover { border-color: var(--color-primary); color: var(--color-primary); }
.odc-add-tile svg { width: 48px; height: 48px; stroke-width: 3; }

/* The sketch: a page on the control ground, drawn in bars. A kind changes the
   page's proportions and what its body holds — lines for a document, boxes for
   a form, tight rows for a list, a short slip for a receipt. */
.odc-thumb {
  display: flex; justify-content: center; align-items: flex-start;
  height: 150px; padding-top: 16px; overflow: hidden; background: var(--color-control);
}
.odc-thumb__page {
  display: flex; flex-direction: column; gap: 5px;
  width: 52%; aspect-ratio: 8.5 / 11; padding: 9% 8%;
  background: var(--color-surface); border-radius: 2px; box-shadow: var(--shadow-md);
}
.odc-pg__lh   { height: 7px; width: 48%; border-radius: 1px; background: var(--color-primary); opacity: .85; }
.odc-pg__ttl  { height: 4px; width: 62%; margin-top: 3px; background: var(--color-text-muted); opacity: .55; }
.odc-pg__meta {
  height: 14px; flex: none;
  background:
    repeating-linear-gradient(to bottom, var(--color-border-strong) 0 2px, transparent 2px 6px) left top / 44% 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--color-border-strong) 0 2px, transparent 2px 6px) right top / 40% 100% no-repeat;
}
.odc-pg__body {
  flex: 1; min-height: 0;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) left top / 100% 3px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 7px, var(--color-border) 7px 8px);
}
.odc-pg__tot { height: 4px; width: 34%; align-self: flex-end; background: var(--color-text); opacity: .6; }
.odc-thumb--dense .odc-pg__body { background:
    linear-gradient(var(--color-primary), var(--color-primary)) left top / 100% 3px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 4px, var(--color-border-strong) 4px 5px); }
.odc-thumb--form .odc-pg__body {
  border: 1px solid var(--color-border-strong);
  background:
    linear-gradient(to right, transparent calc(50% - 1px), var(--color-border-strong) calc(50% - 1px) 50%, transparent 50%),
    repeating-linear-gradient(to bottom, transparent 0 calc(25% - 1px), var(--color-border-strong) calc(25% - 1px) 25%);
}
.odc-thumb--form .odc-pg__tot { align-self: flex-start; width: 40%; }
.odc-thumb--wide .odc-thumb__page { width: 76%; aspect-ratio: 11 / 8.5; padding: 6% 6%; }
.odc-thumb--slip .odc-thumb__page { aspect-ratio: 8.5 / 7; }
.odc-thumb--slip .odc-pg__meta { display: none; }

/* The four verbs on a tile, each an icon button a touch smaller than the
   header's so four of them sit on the sketch's corner. */
.odc-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; }
.odc-acts .icon-btn { width: 30px; height: 30px; }
.odc-acts .icon-btn svg { width: 16px; height: 16px; }
/* A draft waiting behind a published template is a WAIT, so it takes the warn
   ink as a word beside the badge — never a second badge. */
.odc-pending {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--color-warn-ink); white-space: nowrap; vertical-align: middle;
}
.odc-pending svg { width: 13px; height: 13px; flex: none; }

/* ---------- Branding Defaults ------------------------------------------------------
   The header preview on top, sketched on the control ground (§13), then the
   rows that change it, as the showroom's Header Branding lays them out: group
   heading, label above control, the row's own Reset and Save beside it. */
.odc-brandset { padding: 2px 16px 16px; }
.odc-lh {
  --lh-brand: #4C74A6; --lh-ink: #1F2937;
  margin: 0; padding: 14px 16px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 12px; color: var(--lh-ink);
}
/* Three slots, left · centre · right; logo and address each take the one picked.
   Two in the same slot stack, the logo first (dense fills the first row). */
.odc-lh__top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-auto-flow: dense;
  gap: 4px 12px; align-items: baseline;
  padding-bottom: 10px; border-bottom: 2px solid var(--lh-brand);
}
.odc-lh__logo { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lh-brand); }
.odc-lh__addr { font-size: 11px; line-height: 1.4; color: var(--lh-ink); opacity: .7; }
.odc-lh[data-logo="left"]   .odc-lh__logo,  .odc-lh[data-addr="left"]   .odc-lh__addr { grid-column: 1; justify-self: start;  text-align: left; }
.odc-lh[data-logo="center"] .odc-lh__logo,  .odc-lh[data-addr="center"] .odc-lh__addr { grid-column: 2; justify-self: center; text-align: center; }
.odc-lh[data-logo="right"]  .odc-lh__logo,  .odc-lh[data-addr="right"]  .odc-lh__addr { grid-column: 3; justify-self: end;    text-align: right; }
.odc-lh__title { margin-top: 10px; font-size: 13px; font-weight: 600; }
.odc-lh__title span { font-weight: 400; opacity: .7; margin-left: 6px; }
.odc-lh[data-title="center"] .odc-lh__title { text-align: center; }
.odc-lh[data-title="right"]  .odc-lh__title { text-align: right; }
.odc-lh figcaption { margin-top: 12px; font-size: 11px; color: var(--color-text-subtle); }

.odc-brandgroup__h {
  display: block; margin: 18px 0 2px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text);
}
.odc-brandrow { margin: 10px 0 0; }
.odc-brandrow__line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* One width for every control, so each row's actions start at the same x. */
.odc-brandrow__ctl { flex: none; width: 150px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.odc-brandrow__ctl .thumb { width: 28px; height: 28px; font-size: 12px; flex: none; }
.odc-brandrow__ctl .subtle { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odc-brandrow__acts { display: flex; gap: 6px; flex: none; }
.odc-brandrow__ctl .odc-sel { flex: 1 1 auto; width: 100%; min-width: 0; }
/* Text that runs to a sentence takes the whole row; its actions wrap under it. */
.odc-brandrow__ctl--full { width: 100%; }
.odc-brandrow__ctl--full .textarea, .odc-brandrow__ctl--full .input { width: 100%; font-size: 12px; }
.odc-brandscope { margin: 0 0 12px; }
.odc-brandnote { margin: 14px 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.5; }
.odc-colorfield { display: inline-flex; align-items: center; gap: 10px; }
.odc-colorfield input[type="color"] { width: 46px; height: 30px; flex: none; padding: 0; border: 1px solid var(--color-text-subtle); border-radius: 5px; background: none; cursor: pointer; }
.odc-colorfield input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.odc-colorfield input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.odc-colorfield input[type="color"]::-moz-color-swatch { border: 0; border-radius: 3px; }
.odc-colorfield__hex { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Left · centre · right as one segmented control on the control ground. */
.odc-seg { display: inline-flex; height: 30px; border: 1px solid var(--color-control-border); border-radius: 6px; overflow: hidden; background: var(--color-control); }
.odc-seg__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; border: 0; background: transparent; color: var(--color-text-subtle); cursor: pointer; }
.odc-seg__btn + .odc-seg__btn { border-left: 1px solid var(--color-control-border); }
.odc-seg__btn:hover { color: var(--color-text); }
.odc-seg__btn[aria-checked="true"] { background: var(--color-primary-50); color: var(--color-primary-700); }
.odc-seg__btn svg { width: 15px; height: 15px; }
.odc-code {
  font-family: inherit; font-size: 12px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  color: var(--color-text);
}
.odc-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 500; color: var(--color-primary-600); cursor: pointer;
  text-decoration: none;
}
.odc-link:hover { color: var(--color-primary-700); }

.odc-letterhead__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.odc-letterhead__logo { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary-700); }
.odc-letterhead__addr { font-size: 11px; color: var(--color-text-muted); }
.odc-letterhead__title { margin: 12px 0 8px; font-size: 13px; font-weight: 600; }
.odc-letterhead__title span { font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.odc-letterhead__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  font-size: 11px; color: var(--color-text-muted); line-height: 1.4;
}
.odc-letterhead__grid strong { display: block; font-size: 12px; font-weight: 500; color: var(--color-text); }

/* ---------- Issued on Status Events --------------------------------------------------
   The order's path, left to right: each status a step on a rail, an arrow into
   the next, the documents it issues as cards under its badge. The cards stand on
   the control ground (§13); the send switch comes first in its row (§5). A step
   off the path (Expired) is reached by a dashed rail. */
.odc-flow {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 28px;
  margin: 0; padding: 6px 16px 18px; list-style: none; overflow-x: auto;
}
.odc-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.odc-step > .badge { position: relative; z-index: 1; }
.odc-step:not(:last-child)::before {
  content: ""; position: absolute; top: 10px; left: 0; right: -22px; height: 2px;
  background: var(--color-border-strong);
}
.odc-step:not(:last-child)::after {
  content: ""; position: absolute; top: 6px; right: -26px;
  border: 5px solid transparent; border-left: 7px solid var(--color-border-strong);
}
.odc-step:has(+ .odc-step--off)::before {
  background: repeating-linear-gradient(to right, var(--color-border-strong) 0 4px, transparent 4px 8px);
}
.odc-step__or { font-size: 11px; color: var(--color-text-subtle); }
.odc-step__none { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }

.odc-flowdoc {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start;
  width: 100%; padding: 10px; cursor: pointer;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius);
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.odc-flowdoc:hover, .odc-flowdoc:focus-visible { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.odc-flowdoc__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.odc-flowdoc__name { font-size: 12px; font-weight: 600; color: var(--color-text); }
.odc-flowdoc__note { font-size: 11px; line-height: 1.4; color: var(--color-text-subtle); }
.odc-flowdoc__send {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 11px; color: var(--color-text-muted); cursor: default;
}
.odc-flowdoc__send .switch { width: 28px; height: 16px; flex: none; }
.odc-flowdoc__send .switch::after { width: 12px; height: 12px; border-radius: 3px; }
.odc-flowdoc__send .switch[aria-checked="true"]::after { transform: translateX(12px); }
/* The document as a tiny page: a letterhead bar over lines. A kind changes what
   the page holds, as the gallery's sketches do. */
.odc-mini {
  width: 30px; height: 38px; flex: none; border-radius: 2px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 5px 5px / 12px 3px no-repeat,
    repeating-linear-gradient(to bottom, var(--color-border-strong) 0 1px, transparent 1px 5px) 5px 12px / 19px 20px no-repeat,
    var(--color-surface);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}
.odc-mini--dense {
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 5px 5px / 12px 3px no-repeat,
    repeating-linear-gradient(to bottom, var(--color-border-strong) 0 1px, transparent 1px 3px) 5px 11px / 19px 22px no-repeat,
    var(--color-surface);
}
.odc-mini--form {
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 5px 5px / 12px 3px no-repeat,
    linear-gradient(to right, transparent 9px, var(--color-border-strong) 9px 10px, transparent 10px) 5px 12px / 19px 20px no-repeat,
    repeating-linear-gradient(to bottom, var(--color-border-strong) 0 1px, transparent 1px 7px) 5px 12px / 19px 21px no-repeat,
    var(--color-surface);
}
.odc-mini--slip { height: 26px; }
.odc-mini--stack { box-shadow: 3px 3px 0 -1px var(--color-surface), 3px 3px 0 0 var(--color-border), 6px 6px 0 -1px var(--color-surface), 6px 6px 0 0 var(--color-border); }
.odc-mini--mail { display: flex; align-items: center; justify-content: center; color: var(--color-primary-700); background: var(--color-surface); }
.odc-mini--mail svg { width: 16px; height: 16px; }

/* ---------- The closing line ---------------------------------------------------------------- */
.odc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--color-border);
  font-size: 12px; color: var(--color-text-muted);
}
.odc-foot .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.odc-foot .ord-reading svg { color: var(--color-success); }

/* ---------- Dialog pieces -------------------------------------------------------------------- */
.odc-dialog-p { margin: 0 0 12px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.odc-more { padding: 6px; }
/* New Template: a wide slide-over, the form and its starts in the first
   column, the page the picked start gives in the second, held in view while
   the form scrolls. */
.odc-new { width: min(1040px, 100%); }
.odc-new__body { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
.odc-new__preview { position: sticky; top: 0; min-width: 0; }
.odc-new__pv-h { font-size: 13px; font-weight: 600; }
.odc-new__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 360px; padding: 18px; text-align: center; font-size: 13px; color: var(--color-text-subtle);
  background: var(--color-control); border: 1px dashed var(--color-control-border); border-radius: var(--radius);
}
.odc-new__empty svg { width: 22px; height: 22px; }
.odc-new__drop { min-height: 360px; justify-content: center; }
[data-odc-new-pv] :is(.odc-new__page, .odc-new__drop, .odc-new__blank, .odc-new__dense) { display: none; }
.odc-new__doc { font-weight: 600; }
/* Which parts each start draws. */
[data-odc-new-pv]:not([data-start=""]) .odc-new__empty { display: none; }
[data-odc-new-pv]:is([data-start="classic"], [data-start="compact"], [data-start="un"], [data-start="clone"], [data-start="blank"]) .odc-new__page { display: block; }
[data-odc-new-pv][data-start="pdf"] .odc-new__drop { display: flex; }
[data-odc-new-pv][data-start="compact"] .odc-new__dense { display: table-row; }
[data-odc-new-pv][data-start="compact"] .odc-page__table td { padding: 2px 8px; font-size: 11px; }
[data-odc-new-pv][data-start="un"] .odc-new__grid { gap: 0; }
[data-odc-new-pv][data-start="un"] .odc-new__grid > span { padding: 6px 8px; border: 1px solid var(--color-control-border); margin: 0 -1px -1px 0; }
[data-odc-new-pv][data-start="blank"] :is(.odc-new__grid, .odc-new__lines, .odc-new__foot) { display: none; }
[data-odc-new-pv][data-start="blank"] .odc-new__page { min-height: 360px; }
[data-odc-new-pv][data-start="blank"] .odc-new__blank { display: block; margin: 40px 0 0; text-align: center; font-size: 12px; color: var(--color-text-subtle); }
/* Start-from tiles: six choices on the control ground, none chosen until picked. */
.odc-starts { display: grid; grid-template-columns: 1fr; gap: 8px; }
.odc-start {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 10px 12px; font: inherit; cursor: pointer;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); color: var(--color-text);
  transition: border-color 120ms, box-shadow 120ms;
}
.odc-start:hover { border-color: var(--color-border-strong); }
.odc-start[aria-checked="true"] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.odc-start svg { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); margin-top: 1px; }
.odc-start .cell-stack .main { font-size: 13px; }
.odc-start .cell-stack .sub { font-size: 11px; white-space: normal; }
.odc-clone-pick { margin-top: 10px; width: auto; max-width: 100%; }
/* Switch grids: switch then label, two to a line (§16: two across, nothing at the far edge). */
.odc-switch-grid { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 28px; }
/* A switch row inside a .field is still a row, not the field's own label: app.css
   uppercases and shrinks `.field label`, and that look is undone here. */
.odc-switch-grid .switch-field {
  color: var(--color-text); font-weight: 400; font-size: 13px;
  text-transform: none; letter-spacing: 0;
}
.odc-switch-grid--wide + .field,
.odc-setting-rows + .field { margin-top: 16px; }
.odc-switch-grid--wide { grid-template-columns: 1fr; margin-top: 14px; }
.odc-switch-row { display: flex; margin-top: 12px; }
/* Setting rows: label then control, sized to the control (§9, §16). */
.odc-setting-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; margin-top: 14px; }
.odc-setting { display: inline-flex; align-items: center; gap: 10px; }
/* In a settings block the controls share one right edge (memory: never width:auto per select). */
.odc-setting-rows .odc-setting { display: flex; min-width: 0; }
.odc-setting-rows .odc-setting .odc-sel { flex: 1 1 auto; min-width: 0; width: auto; }
.odc-setting__k { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.odc-sel {
  width: auto; flex: none;
  padding: 5px 26px 5px 9px; font-size: 12px;
  background-position: right 8px center;
}
.odc-field--narrow { flex: 0 1 240px; }
.odc-file-row { align-items: center; }
.odc-file-row .input { flex: 0 1 300px; }
.odc-file-eg { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.odc-versions { margin-top: 20px; }
.odc-versions .ord-timeline { margin-top: 2px; }
.odc-versions .ord-timeline__dot.idle { background: var(--color-border-strong); }
/* The preview: the document page on the control ground inside the white dialog. */
.odc-preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.odc-preview-bar .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.odc-page {
  padding: 18px 22px;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius);
  font-size: 12px; color: var(--color-text);
}
.odc-page__table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.odc-page__table th {
  text-align: left; padding: 6px 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-control-border);
}
.odc-page__table td { padding: 5px 8px; border-bottom: 1px solid var(--color-border); }
.odc-page__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.odc-page__more td { text-align: center; font-size: 11px; color: var(--color-text-subtle); }
.odc-page__total td { font-weight: 600; border-top: 1px solid var(--color-control-border); border-bottom: 0; }
.odc-page__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 14px; font-size: 11px; color: var(--color-text-muted); }
/* Drop zones for a file: dashed on the control ground. */
.odc-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 18px; font-size: 13px; color: var(--color-text);
  background: var(--color-control); border: 1px dashed var(--color-control-border); border-radius: var(--radius);
}
.odc-drop svg { width: 22px; height: 22px; color: var(--color-text-muted); flex: none; }
.odc-drop__sub { font-size: 12px; color: var(--color-text-subtle); }

/* ---------- Narrow screens ------------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .odc-split { grid-template-columns: 1fr; }
  .odc-split > .odc-sec { border-left: 0; border-top: 1px solid var(--color-border); }
}
@media (max-width: 1100px) {
  /* Too narrow for the form and a readable page side by side: the preview goes under. */
  .odc-new__body { grid-template-columns: 1fr; }
  .odc-new__preview { position: static; }
}
@media (max-width: 768px) {
  .odc-card .card-header { flex-direction: column; }
  .odc-head-side { align-items: flex-start; }
  .odc-sub-head { flex-direction: column; }
  .odc-sub-reading { max-width: none; justify-content: flex-start; text-align: left; }
  /* A finger's width on each row verb. */
  .odc-acts .icon-btn { width: 44px; height: 44px; }
  .odc-switch-grid,
  .odc-setting-rows { grid-template-columns: 1fr; }
  .odc-field--narrow { flex: 1 1 auto; }
  .odc-file-row { flex-wrap: wrap; }
  .odc-file-row .input { flex: 1 1 100%; }
  .odc-file-eg { white-space: normal; }
  /* The path stacks: one step under another, no rail. */
  .odc-flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 18px; }
  .odc-step:not(:last-child)::before, .odc-step:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) {
  /* THE CHIP ROW WRAPS ON A PHONE. app.css pins a filter row to its own width,
     which on a 390px screen makes the page scroll sideways to reach the second
     chip; handed the toolbar's full width, the row folds instead. */
  .toolbar--page > .subtabs.rowfilter { flex: 1 1 100%; min-width: 0; }
  .odc-letterhead__grid { grid-template-columns: 1fr; }
  .odc-page { padding: 12px; }
  .odc-foot { flex-direction: column; align-items: flex-start; }
  .odc-sub-acts { flex-wrap: wrap; }
  .odc-preview-bar { flex-direction: column; align-items: flex-start; }
}