/* =====================================================================
   Redesigned page content (testing first). Components for the page
   CONTENT of the redesigned screens: page header, segmented filters,
   tables led by the due date, status chips, white fields, panels, notices.
   Every rule is scoped under .ds, so Home and the app frame (header,
   sidebar, TEST banner) keep exactly their current look. Colours: the
   existing palette only; tints are transparencies of the same colours.
   ===================================================================== */
:root {
  --ds-red: #ed1c24;   --ds-red-dark: #c10004;
  --ds-blue: #1f438d;  --ds-blue-mid: #3071bf;  --ds-navy: #0f1528;
  --ds-page: #eef2f8;  --ds-panel: #ffffff;     --ds-border: #e2e7f0;
  --ds-band: #e7e9ec;  /* muted 16% over white, the existing --lty-thead */
  --ds-edge: #8991a0;  /* muted 80% over white: field and secondary-button edge */
  --ds-ink: #1c2536;   --ds-muted: #6b7688;     --ds-slate: #5b6675;
  --ds-late: #b42318;  --ds-done: #12a05a;      --ds-wait: #f59e0b;  --ds-wait-text: #b54708;
  --ds-teal: #0d9488;  --ds-violet: #8b5cf6;
  --ds-hover: rgba(48, 113, 191, .06);
  --ds-select: rgba(31, 67, 141, .10);
  --ds-lift-2: 0 2px 6px rgba(15, 21, 40, .06);
  --ds-lift-3: 0 8px 24px rgba(15, 21, 40, .16);
}

.ds { font-family: 'Lato', sans-serif; font-size: 14px; line-height: 20px; color: var(--ds-ink);
      padding: 8px 8px 48px; font-variant-numeric: tabular-nums; }
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds h1, .ds h2, .ds h3, .ds h4, .ds p, .ds ul, .ds ol, .ds dl, .ds dd, .ds figure { margin: 0; }
.ds ul, .ds ol { padding: 0; list-style: none; }
.ds a { color: var(--ds-blue); text-decoration: none; }
.ds a:hover { text-decoration: underline; }
.ds a.ds-claim { color: var(--ds-ink); }
.ds a:focus-visible, .ds button:focus-visible, .ds input:focus-visible, .ds select:focus-visible, .ds textarea:focus-visible {
  outline: 2px solid var(--ds-blue-mid); outline-offset: 2px; }
.ds-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
          stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ds-ico--20 { width: 20px; height: 20px; stroke-width: 1.8; }

/* ---------- type ---------- */
.ds-h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -.01em; color: var(--ds-ink); }
.ds-h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; line-height: 24px; color: var(--ds-ink); }
.ds-h3 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; line-height: 24px; color: var(--ds-ink); }
.ds-read { font-size: 16px; line-height: 24px; max-width: 72ch; }
.ds-strong { font-weight: 700; }
.ds-caption { font-size: 12px; line-height: 16px; color: var(--ds-slate); }
.ds-secondary { color: var(--ds-slate); }
.ds-fig { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -.01em; }
.ds-claim { font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- page header ---------- */
.ds-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; margin: 8px 0 4px; }
.ds-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 24px; }
.ds-head-main { min-width: 0; }
.ds-head-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ds-desc { color: var(--ds-slate); margin-top: 4px; max-width: 80ch; }
.ds-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ds-facts { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; }
.ds-facts .k { color: var(--ds-slate); margin-right: 6px; }
.ds-facts .v { color: var(--ds-ink); }
.ds-stamp { color: var(--ds-slate); font-size: 12px; }

/* ---------- buttons ---------- */
.ds .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
          border-radius: 6px; border: 1px solid transparent; font: 700 14px/20px 'Lato', sans-serif; white-space: nowrap;
          cursor: pointer; text-decoration: none !important; background: none; color: var(--ds-ink); }
.ds .ds-btn--lg { height: 40px; padding: 0 18px; }
.ds .ds-btn--sm { height: 32px; padding: 0 12px; }
.ds .ds-btn--primary { background: var(--ds-blue); color: #fff; }
.ds .ds-btn--primary:hover { background: var(--ds-blue-mid); }
.ds .ds-btn--secondary { background: #fff; border-color: var(--ds-edge); color: var(--ds-ink); }
.ds .ds-btn--secondary:hover { border-color: var(--ds-muted); }
.ds .ds-btn--tertiary { color: var(--ds-blue); padding: 0 6px; }
.ds .ds-btn--danger { background: #fff; border-color: var(--ds-late); color: var(--ds-late); }
.ds .ds-btn--danger-fill { background: var(--ds-late); color: #fff; }
.ds .ds-btn--icon { width: 32px; height: 32px; padding: 0; background: #fff; border-color: var(--ds-edge); }
.ds .ds-btn[disabled], .ds .ds-btn.is-disabled { background: var(--ds-page); color: var(--ds-muted); border-color: var(--ds-page); cursor: default; }
.ds .ds-full { width: 100%; }

/* ---------- segmented filter ---------- */
.ds-seg { display: inline-flex; border: 1px solid var(--ds-edge); border-radius: 6px; overflow: hidden; background: #fff; }
.ds-seg > a, .ds-seg > span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; color: var(--ds-ink);
  border-left: 1px solid var(--ds-edge); text-decoration: none !important; white-space: nowrap; }
.ds-seg > :first-child { border-left: 0; }
.ds-seg b { font-weight: 700; }
.ds-seg .on { background: var(--ds-blue); color: #fff; }
.ds-seg .late b { color: var(--ds-late); }
.ds-seg .on.late b { color: #fff; }

/* ---------- fields ---------- */
.ds-input, .ds-select, .ds-textarea { display: block; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--ds-edge);
  border-radius: 6px; background: #fff; color: var(--ds-ink); font: 400 14px/20px 'Lato', sans-serif; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-muted); }
.ds-select { appearance: none; padding-right: 34px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.ds-textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.ds-sm { height: 32px !important; }
.ds-search { position: relative; }
.ds-search .ds-input { padding-left: 34px; }
.ds-search .ds-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ds-muted); }
.ds-input.is-error { border-color: var(--ds-late); }
.ds-error { color: var(--ds-late); font-size: 12px; line-height: 16px; margin-top: 4px; display: flex; gap: 6px; }
.ds-locked { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--ds-ink); }
.ds-locked .ds-ico { color: var(--ds-slate); }
.ds-check { accent-color: var(--ds-blue); width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- forms ---------- */
.ds-form { max-width: 760px; }
.ds-section { padding: 24px; border-top: 1px solid var(--ds-border); }
.ds-section:first-child { border-top: 0; }
.ds-section > .ds-h3 { margin-bottom: 16px; }
.ds-field { margin-bottom: 16px; }
.ds-label { display: flex; align-items: baseline; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.ds-label .ds-req { font-weight: 700; font-size: 12px; color: var(--ds-wait-text); }
.ds-label .ds-opt { font-weight: 400; color: var(--ds-slate); }
.ds-help { font-size: 12px; line-height: 16px; color: var(--ds-slate); margin-top: 4px; }
.ds-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ds-radioseg { display: inline-flex; border: 1px solid var(--ds-edge); border-radius: 6px; overflow: hidden; }
.ds-radioseg label { margin: 0; padding: 0 14px; height: 38px; display: inline-flex; align-items: center; border-left: 1px solid var(--ds-edge); background: #fff; }
.ds-radioseg label:first-child { border-left: 0; }
.ds-radioseg label.on { background: var(--ds-blue); color: #fff; font-weight: 700; }
.ds-money { position: relative; }
.ds-money::before { content: "$"; position: absolute; left: 12px; top: 10px; color: var(--ds-slate); }
.ds-money .ds-input { padding-left: 24px; text-align: right; }

/* ---------- panels ---------- */
.ds-panel { background: var(--ds-panel); border: 1px solid var(--ds-border); border-radius: 8px; }
.ds-panel + .ds-panel { margin-top: 24px; }
.ds-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px;
                 border-bottom: 1px solid var(--ds-border); }
.ds-panel-body { padding: 16px 24px; }
.ds-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.ds-sticky { position: sticky; top: 16px; box-shadow: var(--ds-lift-2); }
/* AdminLTE's fixed layout gives .app-main overflow:auto, which turns it into the scroll
   container of every sticky element even though the window is what scrolls, so nothing
   would ever stick. Only on redesigned pages (Home has no .ds) the window becomes the
   scroll container again; the header, sidebar and banner behave exactly as before. */
.layout-fixed .app-main:has(.ds) { overflow: visible; }
/* On the testing site the sticky TEST banner (25px) covers the top of the window. */
body:has(> div[role="status"]) .ds-sticky { top: 41px; }
body:has(> div[role="status"]) .ds-table th { top: 25px; }
.ds-narrow { max-width: 880px; }
.ds-divide > * + * { border-top: 1px solid var(--ds-border); }

/* ---------- toolbar + table ---------- */
.ds-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ds-toolbar .ds-grow { flex: 1; }
.ds-chips-active { display: flex; gap: 8px; align-items: center; margin: -4px 0 16px; }
.ds-filterchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px;
                 background: var(--ds-select); color: var(--ds-blue); font-weight: 700; font-size: 12px; }
/* No overflow clipping here: it would stop the header row from sticking and cut off row menus.
   The header band rounds its own top corners instead. */
.ds-tablewrap { background: #fff; border: 1px solid var(--ds-border); border-radius: 8px; }
.ds-tablewrap .ds-table thead tr:first-child th:first-child { border-top-left-radius: 7px; }
.ds-tablewrap .ds-table thead tr:first-child th:last-child { border-top-right-radius: 7px; }
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th { position: sticky; top: 0; background: var(--ds-band); color: var(--ds-ink); font: 700 12px/16px 'Lato', sans-serif;
               text-align: left; padding: 12px; white-space: nowrap; border: 0; }
.ds-table th.ds-num { text-align: right; }
.ds-table td { padding: 10px 12px; border-top: 1px solid var(--ds-border); vertical-align: middle; color: var(--ds-ink); }
.ds-table tr.ds-click:hover td { background: var(--ds-hover); }
.ds-table tr.is-selected td { background: var(--ds-select); }
.ds-table .ds-sub { display: block; font-size: 12px; line-height: 16px; color: var(--ds-slate); margin-top: 2px; }
.ds-table .ds-chev { color: var(--ds-muted); width: 32px; text-align: right; }
.ds-group td { background: var(--ds-page); font-weight: 700; padding: 8px 12px; height: 36px; }
.ds-rule-late td:first-child { box-shadow: inset 3px 0 0 var(--ds-late); }
.ds-rule-soon td:first-child { box-shadow: inset 3px 0 0 var(--ds-wait); }
.ds-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--ds-border);
             color: var(--ds-slate); font-size: 12px; }
.ds-selbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--ds-select); }

/* time in words, the "clock" column */
.ds-clock { font-weight: 700; }
.ds-clock.late { color: var(--ds-late); }
.ds-clock.soon { color: var(--ds-wait-text); }

/* ---------- chips: one per state ---------- */
.ds-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 4px;
           font: 700 12px/16px 'Lato', sans-serif; color: var(--ds-ink); white-space: nowrap; background: rgba(91, 102, 117, .12); }
.ds-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-slate); }
.ds-chip--late { background: rgba(180, 35, 24, .12); color: var(--ds-late); }   .ds-chip--late::before { background: var(--ds-late); }
.ds-chip--wait { background: rgba(245, 158, 11, .14); color: var(--ds-wait-text); } .ds-chip--wait::before { background: var(--ds-wait); }
.ds-chip--prog { background: rgba(48, 113, 191, .12); color: var(--ds-blue); }  .ds-chip--prog::before { background: var(--ds-blue-mid); }
.ds-chip--done { background: rgba(18, 160, 90, .12); }                           .ds-chip--done::before { background: var(--ds-done); }
.ds-chip--navy { background: rgba(31, 67, 141, .10); color: var(--ds-blue); }    .ds-chip--navy::before { display: none; }
.ds-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font: 700 12px/16px 'Lato', sans-serif; color: var(--ds-ink); }
.ds-tag--teal { background: rgba(13, 148, 136, .14); }
.ds-tag--violet { background: rgba(139, 92, 246, .14); }
.ds-tag--blue { background: rgba(48, 113, 191, .14); }

/* ---------- notices, empty states ---------- */
.ds-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 0 6px 6px 0; border-left: 3px solid;
             background: rgba(48, 113, 191, .08); border-color: var(--ds-blue-mid); color: var(--ds-ink); margin-bottom: 16px; }
.ds-notice--done { background: rgba(18, 160, 90, .12); border-color: var(--ds-done); }
.ds-notice--wait { background: rgba(245, 158, 11, .14); border-color: var(--ds-wait); }
.ds-notice--late { background: rgba(180, 35, 24, .10); border-color: var(--ds-late); }
.ds-empty { text-align: center; padding: 48px 24px; color: var(--ds-slate); }
.ds-empty .ds-h3 { color: var(--ds-ink); margin-bottom: 4px; }

/* ---------- progress track ---------- */
.ds-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.ds-step { border-top: 4px solid var(--ds-border); padding-top: 8px; }
.ds-step .ds-strong { display: block; }
.ds-step.done { border-color: var(--ds-done); }
.ds-step.now { border-color: var(--ds-blue); }
.ds-step.now .ds-strong { color: var(--ds-blue); }

/* ---------- misc ---------- */
.ds-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; }
.ds-kv dt { color: var(--ds-slate); font-weight: 400; }
.ds-kv dd { margin: 0; }
.ds-bar { height: 4px; background: var(--ds-border); border-radius: 2px; overflow: hidden; }
.ds-bar > i { display: block; height: 100%; background: var(--ds-blue-mid); }
.ds-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
             background: var(--ds-blue); color: #fff; font: 700 12px/1 'Lato', sans-serif; }
.ds-actionbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
                padding: 12px 24px; background: #fff; border-top: 1px solid var(--ds-border); box-shadow: 0 -2px 6px rgba(15, 21, 40, .06); }
.ds-menu { position: absolute; background: #fff; border: 1px solid var(--ds-border); border-radius: 12px; box-shadow: var(--ds-lift-3); padding: 6px 0; min-width: 200px; }
.ds-menu a, .ds-menu span { display: block; padding: 8px 14px; color: var(--ds-ink); }

/* =====================================================================
   Shared pieces (consistency review 2026-10-30: C1 C11 C12 C14 C17). Their markup
   comes from the macros in templates/_ds/ (ui.html, icons.html, confirm.html) and
   templates/_state.html; new screens use these instead of a module's own copy.
   ===================================================================== */

/* ---------- a dead end: no access, read-only, not found (C1, _state.html) ---------- */
.ds .ds-state { padding: 48px 24px; text-align: center; color: var(--ds-slate);
                background: #fff; border: 1px solid var(--ds-border); border-radius: 8px; }
.ds .ds-state .ds-h2 { color: var(--ds-ink); margin-bottom: 4px; overflow-wrap: anywhere; }
.ds .ds-state .ds-read { margin: 0 auto; }
.ds .ds-state-act { margin-top: 16px; }
.dialog-page > .ds:has(> .ds-state) { padding: 0; }   /* in the app's dialog: just the card */

/* ---------- empty state (C14): ui.empty() ---------- */
.ds .ds-empty--panel { background: #fff; border: 1px solid var(--ds-border); border-radius: 8px; }
.ds .ds-empty-act { margin-top: 16px; }

/* ---------- pager: ui.pager(); in a table's footer (.ds-status) or a row of its own ---------- */
.ds .ds-status.ds-pagerbar { font-size: 14px; }
.ds .ds-pagerrow { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; color: var(--ds-slate); }
.ds .ds-pagerbar { flex-wrap: wrap; gap: 8px 16px; }
.ds .ds-pager { display: flex; align-items: center; gap: 4px; }
.ds .ds-pager a, .ds .ds-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px;
                                      height: 32px; padding: 0 10px; border-radius: 6px; color: var(--ds-ink);
                                      font-size: 14px; line-height: 20px; text-decoration: none; }
.ds .ds-pager a:hover { background: var(--ds-hover); text-decoration: none; }
.ds .ds-pager a.pg { border: 1px solid var(--ds-edge); background: #fff; }
.ds .ds-pager a.pg:hover { border-color: var(--ds-muted); }
.ds .ds-pager a.on, .ds .ds-pager a.on:hover { background: var(--ds-blue); border-color: var(--ds-blue); color: #fff; font-weight: 700; }
.ds .ds-pager a.txt { color: var(--ds-blue); font-weight: 700; }
.ds .ds-pager span.dis { color: var(--ds-muted); font-weight: 700; }
.ds .ds-pager span.gap { min-width: 16px; padding: 0 2px; color: var(--ds-slate); }

/* ---------- menus on Bootstrap's dropdown (ui.menu / menu_item): a level-3 layer.
   Plain: an action list, the icon inline in slate, a hint line under the name.
   --tiles: "what kind?" menus, each icon in a 36px tile that turns navy under the
   pointer or the keyboard, the name in bold (PIP Add record). ---------- */
.ds .dropdown-menu.ds-menu { min-width: 220px; padding: 6px; margin: 0; background: #fff; border: 1px solid var(--ds-border);
                             border-radius: 12px; box-shadow: var(--ds-lift-3); font: 400 14px/20px 'Lato', sans-serif;
                             color: var(--ds-ink); }
.ds .dropdown-menu.ds-menu--tiles { width: 320px; }
.ds .ds-menu .ds-mi { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
                      border-radius: 8px; background: none; font: 400 14px/20px 'Lato', sans-serif; color: var(--ds-ink);
                      text-align: left; white-space: normal; text-decoration: none; cursor: pointer; }
.ds .ds-menu .ds-mi:hover, .ds .ds-menu .ds-mi:focus, .ds .ds-menu .ds-mi:active { background: var(--ds-hover); color: var(--ds-ink);
                                                                                  text-decoration: none; }
.ds .ds-menu .ds-mi:focus-visible { outline: 2px solid var(--ds-blue-mid); outline-offset: -2px; }
.ds .ds-menu .ds-mi-ico { display: inline-flex; flex: none; padding: 0; margin-top: 2px; color: var(--ds-slate); }
.ds .ds-menu .ds-mi-text, .ds .ds-menu .ds-mi-name { display: block; min-width: 0; padding: 0; color: inherit; }
.ds .ds-menu .ds-mi-hint { display: block; padding: 0; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ds-slate); }
.ds .ds-menu .ds-mi.is-danger, .ds .ds-menu .ds-mi.is-danger .ds-mi-ico { color: var(--ds-late); }
.ds .ds-menu .ds-mi.is-off, .ds .ds-menu .ds-mi.is-off:hover { color: var(--ds-muted); background: none; cursor: default; }
.ds .ds-menu .ds-mi.is-off .ds-mi-ico { color: var(--ds-muted); }
.ds .ds-menu .ds-mi-sep { margin: 6px 4px; border: 0; border-top: 1px solid var(--ds-border); opacity: 1; }
.ds .ds-menu--tiles .ds-mi { align-items: center; gap: 12px; }
.ds .ds-menu--tiles .ds-mi-ico { align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0;
                                 border-radius: 8px; background: var(--ds-page); }
.ds .ds-menu--tiles .ds-mi-ico .ds-ico { width: 18px; height: 18px; stroke-width: 1.8; }
.ds .ds-menu--tiles .ds-mi:hover .ds-mi-ico, .ds .ds-menu--tiles .ds-mi:focus .ds-mi-ico { background: var(--ds-blue); color: #fff; }
.ds .ds-menu--tiles .ds-mi-name { font-weight: 700; }

/* ---------- the one confirm dialog (C11, _ds/confirm.html): a level-4 layer over a navy
   scrim. Title 16px and an X, one sentence, [Cancel] [Verb]; the verb is red only for what
   can't be undone. ---------- */
.ds.ds-confirm { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); margin: auto; padding: 0; border: 0;
                 border-radius: 12px; background: #fff; color: var(--ds-ink); box-shadow: 0 24px 48px rgba(15, 21, 40, .24);
                 overflow: auto; }
.ds.ds-confirm::backdrop { background: rgba(15, 21, 40, .55); }
.ds .ds-confirm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 0; }
.ds .ds-confirm-head .ds-h3 { padding-top: 4px; overflow-wrap: anywhere; }
.ds .ds-confirm-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
                    margin-right: -8px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ds-slate); cursor: pointer; }
.ds .ds-confirm-x:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds .ds-confirm-text { padding: 8px 24px 0; color: var(--ds-slate); max-width: 60ch; overflow-wrap: anywhere; }
.ds .ds-confirm-text[hidden] { display: none; }
.ds .ds-confirm-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .ds.ds-confirm[open] { animation: ds-confirm-in .14s ease-out; }
  .ds.ds-confirm[open]::backdrop { animation: ds-fade-in .14s ease-out; }
}
@keyframes ds-confirm-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes ds-fade-in { from { opacity: 0; } }

/* ---------- the header of every dialog and window that does work (a form, a picker, a
   viewer): the icon tile, the title (Montserrat 18) and a quiet line on who or what it is
   about, the X on the right, a rule under it. The tile shows the icon of what was picked
   (the Add record tile, the request's type, the menu item) in the navy a menu tile turns
   when it's chosen; while the app's dialog waits for its page, the tile is an empty tint.
   The text block is 44px tall with or without its second line, so every header is the same
   height; text too long for the window wraps (never cut: the claim # ends the line), and
   the tile and the X stay level with the first line. A question (the confirm, Return,
   Delete, Dismiss) keeps the plain .ds-confirm-head. Markup: ds.dialog_head() in
   _ds/ui.html; the app's dialog (_dialog.html) fills its own from the page inside
   (ds.dialog_declare). ---------- */
.ds .ds-dhead { display: flex; align-items: flex-start; gap: 14px; padding: 14px 24px; background: #fff;
                border-bottom: 1px solid var(--ds-border); }
.ds .ds-dhead-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
                     margin-top: 2px; border-radius: 8px; background: var(--ds-blue); color: #fff; }
.ds .ds-dhead-tile:empty { background: var(--ds-select); }
.ds .ds-dhead-tile[hidden] { display: none; }
.ds .ds-dhead-tile .ds-ico { width: 20px; height: 20px; stroke-width: 1.8; }
.ds .ds-dhead-text { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; min-height: 44px; }
.ds .ds-dhead-title { margin: 0; font: 700 18px/24px 'Montserrat', sans-serif; color: var(--ds-ink); overflow-wrap: anywhere; }
.ds .ds-dhead-ctx { margin: 0; font-size: 14px; line-height: 20px; color: var(--ds-slate); overflow-wrap: anywhere; }
.ds .ds-dhead-ctx[hidden] { display: none; }
.ds .ds-dhead > .ds-btn { flex: none; margin-top: 4px; }
.ds .ds-dhead > .ds-btn--sm { margin-top: 6px; }
/* The confirm's X, at the header's scale: a 20px cross whose right edge meets the 24px gutter. */
.ds .ds-dhead > .ds-confirm-x { width: 36px; height: 36px; margin-top: 4px; }
.ds .ds-dhead > .ds-confirm-x .ds-ico { width: 20px; height: 20px; stroke-width: 1.8; }

/* ---------- a form in the app's dialog (C12): white body, sections split by a thin rule
   with a Montserrat 16 title (no numbers; "Step 1 of 2" only for real steps), and a
   footer kept at the bottom: [other actions] [Cancel] [Primary]. On a full page the same
   form is one white panel. Markup: <div class="ds"><form class="ds-dlg">
   [.ds-notice] [.ds-dlg-step] .ds-dlg-section* .ds-dlg-foot</form></div> ---------- */
.dialog-page:has(.ds-dlg) { background: #fff; padding: 0; }
.dialog-page > .ds:has(.ds-dlg), .dialog-page > .ds.ds-dlg { padding: 0; }
.ds .ds-dlg { background: #fff; border: 1px solid var(--ds-border); border-radius: 8px; }
.dialog-page .ds-dlg { border: 0; border-radius: 0; }
.ds .ds-dlg > .ds-notice { margin: 16px 24px 0; }
.ds .ds-dlg-step { padding: 16px 24px 0; font-size: 12px; line-height: 16px; color: var(--ds-slate); }
.ds .ds-dlg-section { padding: 24px; }
.ds .ds-dlg-section + .ds-dlg-section { border-top: 1px solid var(--ds-border); }
.ds .ds-dlg-step + .ds-dlg-section { padding-top: 8px; }
.ds .ds-dlg-section > :last-child { margin-bottom: 0; }
.ds .ds-dlg-title { margin: 0 0 16px; font: 600 16px/24px 'Montserrat', sans-serif; color: var(--ds-ink); }
.ds .ds-dlg-lead { margin: -12px 0 16px; color: var(--ds-slate); max-width: 72ch; }
.ds .ds-dlg-foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-end;
                   flex-wrap: wrap; gap: 8px; padding: 12px 24px; background: #fff; border-top: 1px solid var(--ds-border);
                   border-radius: 0 0 8px 8px; box-shadow: 0 -2px 6px rgba(15, 21, 40, .06); }
.dialog-page .ds-dlg-foot { border-radius: 0; }
.ds .ds-dlg-foot > .ds-dlg-start { margin-right: auto; }