/* ============================================================================
   ds/components.css — the design system's shared components (docs/DESIGN_SYSTEM.md §4).

   Loaded in BOTH interfaces (a page moved onto the design system changes for everybody),
   so nothing here is scoped to html.ui-new; the New shell is ds/shell.css. Every rule's
   first class is .ds-<component> (design_system.COMPONENTS); every value is a token.
   The boards each component follows: A_List (control panel, list, chips, views, pager),
   Final_Form (sheet, fields, status bar, tabs), the flat chatter (Adnan, 12 October), A_P_modal (dialog),
   A_P_record (panels, smart buttons, avatars).
   ============================================================================ */

/* ---- the control panel: the page's first row (in the New shell it shares the row with the search) */
.ds-cp{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.ds-cp-title{ display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0; }
.ds-cp-title h1,
.ds-cp .ds-cp-title h1{ margin: 0; font: var(--fw-medium) var(--fs-title)/1.2 var(--font-head); color: var(--text);
  white-space: nowrap; letter-spacing: normal; }
.ds-cp-sub{ color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.ds-cp-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ds-cp-spacer{ flex: 1 1 0; }
.ds-cp-end{ display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; color: var(--text-muted); font-size: var(--fs-base); }

/* ---- buttons: one height, a 3:1 edge; the primary is the brand fill with the ink that reads ---- */
.ds-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--ctl-h); box-sizing: border-box; padding: 0 var(--ctl-pad-x);
  border: 1px solid var(--border-control); border-radius: var(--ctl-radius);
  background: var(--surface-1); color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: var(--fw-medium) var(--fs-base)/1 var(--font-body);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.ds-btn:hover{ background: var(--surface-hover); border-color: var(--text-muted); }
.ds-btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.ds-btn-primary{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); }
.ds-btn-primary:hover{ background: var(--accent); border-color: var(--border-selected); box-shadow: inset 0 0 0 1px var(--border-selected); }
.ds-btn-quiet{ border-color: transparent; background: transparent; }
.ds-btn-quiet:hover{ background: var(--surface-hover); border-color: transparent; }
.ds-btn-danger{ color: var(--tint-danger-fg); border-color: var(--tint-danger-line); }
.ds-btn-danger:hover{ background: var(--tint-danger-bg); border-color: var(--tint-danger-fg); }
.ds-btn-sm{ height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.ds-btn-pill{ border-radius: var(--pill-radius); }
.ds-btn-icon{ width: var(--ctl-h); padding: 0; }
.ds-btn:is(:disabled, [aria-disabled="true"]){
  background: var(--surface-2); border-color: var(--border-strong); color: var(--text-disabled); cursor: not-allowed; box-shadow: none;
}
.ds-btn .ds-n{ padding: 0 var(--sp-2); border-radius: var(--pill-radius); background: var(--surface-facet);
  color: var(--text); font: var(--fw-bold) var(--fs-xs)/var(--badge-h) var(--font-body); }

/* ---- the view switcher (list · kanban · calendar) and the pager ---- */
.ds-views{ display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--ctl-radius); overflow: hidden; flex: none; }
.ds-views a{ display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-h); height: var(--ctl-h);
  box-sizing: border-box; color: var(--text-muted); background: var(--surface-1); text-decoration: none; }
.ds-views a + a{ border-left: 1px solid var(--border-strong); }
.ds-views a:hover{ background: var(--surface-hover); color: var(--text); }
.ds-views a.on{ background: var(--surface-facet); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-selected); }
.ds-pager{ display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-base);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-pager a{ display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-h); height: var(--ctl-h);
  border: 1px solid var(--border-strong); border-radius: var(--ctl-radius); color: var(--text); text-decoration: none; }
.ds-pager a:hover{ background: var(--surface-hover); }
/* the menu panel (moved from ds.css, which only base.html links): the top bar's menus on Home too */
.ds-menu-panel{ position: absolute; z-index: var(--z-menu); top: calc(100% + var(--sp-1)); left: 0; min-width: var(--menu-min); max-width: var(--menu-max);
  padding: var(--sp-1); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-menu); box-shadow: var(--shadow-elev); }
.ds-menu-panel a{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: var(--menu-item-h);
  padding: 0 var(--sp-3); border-radius: var(--ctl-radius); color: var(--text); text-decoration: none; font-size: var(--fs-base); }
.ds-menu-panel a:is(:hover, :focus-visible){ background: var(--surface-hover); outline: none; }
.ds-menu.tb-group > summary{ display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); border-radius: var(--ctl-radius); font-weight: var(--fw-medium); cursor: pointer; }
.ds-menu-h{ padding: var(--sp-2) var(--sp-3) var(--sp-1); color: var(--text-muted); font: var(--fw-medium) var(--fs-sm)/1.2 var(--font-body); }
.ds-menu-h ~ a{ padding-left: var(--sp-5); }
.ds-menu-panel a{ font-weight: var(--fw-regular); }
.ds-menu-panel a.on{ background: var(--surface-selected); }
.ds-menu-panel.ds-menu-fixed{ position: fixed; left: var(--x); top: var(--y); }
.ds-pager a[aria-disabled="true"]{ color: var(--text-disabled); cursor: default; }

/* ---- the list (board A_List): 38 px rows, the header in bold ink, numbers to the right ----
   A page's table is `<table class="ds-list">`; static/js/mobilecards.js turns it into cards on a phone. */
.ds-list{ width: 100%; border-collapse: collapse; font-size: var(--fs-base); color: var(--text); background: var(--surface-1); }
.ds-list th{ height: var(--th-h); padding: 0 var(--sp-3); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border-strong); font: var(--fw-bold) var(--fs-base)/1.2 var(--font-body); color: var(--text); }
.ds-list td{ height: var(--row-h); padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.ds-list :is(th, td).num{ text-align: right; font-variant-numeric: tabular-nums; }
.ds-list tbody tr:hover td{ background: var(--surface-hover); }
.ds-list tbody tr.on td, .ds-list tbody tr[aria-selected="true"] td{ background: var(--surface-selected); }
.ds-list tbody tr[data-href]{ cursor: pointer; }
.ds-list td a{ color: var(--text); text-decoration: none; }
.ds-list td a:hover{ color: var(--accent-text); }
.ds-list td.strong, .ds-list td .strong{ font-weight: var(--fw-medium); }
.ds-list-wrap{ overflow-x: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-menu); }
.ds-list-scroll{overflow-x:auto}
.ds-list-group td{ background: var(--surface-2); font-weight: var(--fw-bold); }

/* ---- status chips: a word on a tint, never colour alone ---- */
.ds-chip{ display: inline-flex; align-items: center; flex: none; gap: var(--sp-1); padding: var(--chip-pad); border-radius: var(--chip-radius);
  font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-body); white-space: nowrap;
  background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); text-decoration: none; }
.ds-chip.tone-accent{ background: var(--tint-accent-bg); color: var(--tint-accent-fg); }
.ds-chip.tone-success{ background: var(--tint-success-bg); color: var(--tint-success-fg); }
.ds-chip.tone-danger{ background: var(--tint-danger-bg); color: var(--tint-danger-fg); }
.ds-chip.tone-warning{ background: var(--tint-warning-bg); color: var(--tint-warning-fg); }
.ds-chip.tone-info{ background: var(--tint-info-bg); color: var(--tint-info-fg); }
.ds-chip.tone-violet{ background: var(--tint-violet-bg); color: var(--tint-violet-fg); }
.ds-chip.tone-muted{ background: var(--tint-muted-bg); color: var(--tint-muted-fg); }
/* ---- a tag chip: the colour is the reusable tags subsystem's own data (CORE_MODULE.md,
   "Reusable tags subsystem"), carried as the --tag-colour data property (never typed here —
   lock-in rule #8) — a swatch beside neutral ink, so an admin's arbitrary colour choice never
   has to pass a contrast check against chip text. ---- */
.ds-chip.tag{ background: var(--surface-2); color: var(--text); border: 1px solid var(--border); gap: var(--sp-2); }
.ds-chip.tag::before{ content: ''; flex: none; width: 10px; height: 10px; border-radius: var(--pill-radius); background: var(--tag-colour, var(--tint-neutral-fg)); }

/* ---- panels: a white card with an optional head ---- */
.ds-panel{ background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card); min-width: 0; }
.ds-panel-head{ display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.ds-panel-head h2, .ds-panel-title{ margin: 0; font: var(--fw-medium) var(--fs-md)/1.3 var(--font-head); color: var(--text); }
.ds-panel-head .ds-panel-sub{ color: var(--text-muted); font-size: var(--fs-sm); }
.ds-panel-body{ padding: var(--sp-4); }

/* ---- the record sheet (board Final_Form): title, a two-column field grid, tabs ---- */
.ds-sheet{ background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-menu);
  padding: var(--sheet-pad); min-width: 0; }
.ds-sheet-title{ margin: 0 0 var(--sp-4); font: var(--fw-medium) var(--fs-record)/1.2 var(--font-head); color: var(--text); }
.ds-fields{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-6); }
.ds-field{ display: grid; grid-template-columns: var(--field-label-w) minmax(0, 1fr); align-items: baseline; gap: var(--sp-3);
  min-height: var(--row-h); padding: var(--sp-1) 0; }
.ds-field > label, .ds-field > .ds-field-label{ color: var(--text-muted); font-size: var(--fs-base); }
.ds-field > .ds-field-value{ color: var(--text); font-size: var(--fs-base); min-width: 0; overflow-wrap: anywhere; }
.ds-field-value a{ color: var(--accent-text); text-decoration: none; }
.ds-field-wide{ grid-column: 1 / -1; }
/* a multi-line box scrolls, so its baseline is its bottom edge and a baseline-aligned label would sit
   at the box's foot: beside a text area the label lines up with the box's first line instead */
.ds-field:has(textarea){ align-items: start; }
.ds-field:has(textarea) > :is(label, .ds-field-label){ padding-top: var(--sp-2); }
/* a one-line value with no length limit (a product's name): the box grows with its text instead
   of scrolling it out of sight; its rows attribute is the least it shows */
textarea[data-autogrow]{ field-sizing: content; resize: none; }

/* ---- the status bar: the record's states as one segmented control ---- */
.ds-statusbar{ display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--border-strong); border-radius: var(--ctl-radius); overflow: hidden; }
.ds-statusbar > *{ display: inline-flex; align-items: center; flex: none; white-space: nowrap; height: var(--ctl-h); padding: 0 var(--sp-4);
  color: var(--text); background: var(--surface-1); font-size: var(--fs-base); text-decoration: none; }
.ds-statusbar > * + *{ border-left: 1px solid var(--border-strong); }
.ds-statusbar > .done{ color: var(--tint-success-fg); }
.ds-statusbar > .on{ background: var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); }

/* ---- the record page (board Final_Form; Adnan, 12 October — the quotation-page spec) ----
   An action row above the sheet: the actions at its left (one primary), the status bar at its
   right. Then ONE sheet: what needs attention as slim strips, the title with the related-record
   buttons at its right, the fields in two columns, the tabs and their panes. No card inside it. */
/* the breadcrumb, spaced in Classic too (New: shell.css) */
.ds-crumb{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.ds-crumb > span{ color: var(--text-muted); }
.ds-recbar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-2); min-width: 0; }
.ds-recbar-acts{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.ds-recbar-acts form{ display: inline-flex; margin: 0; }
.ds-recbar > .ds-statusbar{ margin-left: auto; }
.ds-sheet-head{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.ds-sheet-head > .ds-sheet-title{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.ds-sheet-buttons{ display: flex; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
.ds-fields-col{ display: flex; flex-direction: column; min-width: 0; }
.ds-strip-list{ display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.ds-strip-list:not(:has(> *)){ display: none; }
.ds-strip-list > :is(div, section, p, form){ margin: 0; border-radius: var(--radius-menu); box-shadow: none; }
/* a strip is a sentence; a row only with a spacer (DESIGN_SYSTEM.md, 18 Oct) */
.ds-strip{ display: block; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-menu); background: var(--tint-info-bg); color: var(--text); font-size: var(--fs-base); }
.ds-strip:has(> .ds-cp-spacer){ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.ds-strip > .ds-ic:first-child{ margin-right: var(--sp-2); vertical-align: text-bottom; }
.ds-strip:not(:has(> .ds-cp-spacer)) > :is(.ds-btn, button){ margin-left: var(--sp-2); }
.ds-strip.tone-warning{ background: var(--tint-warning-bg); }
.ds-strip.tone-danger{ background: var(--tint-danger-bg); }
.ds-strip.tone-success{ background: var(--tint-success-bg); }
.ds-strip.tone-muted{ background: var(--surface-2); }
.ds-pane[hidden]{ display: none; }
.ds-kpi.tone-success .ds-kpi-n{ color: var(--tint-success-fg); }
.ds-kpi.tone-danger .ds-kpi-n{ color: var(--tint-danger-fg); }
.ds-kpi.tone-warning .ds-kpi-n{ color: var(--tint-warning-fg); }
.ds-kpi.tone-accent .ds-kpi-n{ color: var(--tint-accent-fg); }
.ds-sheet-part + .ds-sheet-part{ border-top: 1px solid var(--border); margin-top: var(--sp-5); padding-top: var(--sp-5); }
.ds-menu-panel form{ margin: 0; }
.ds-menu-item{ display: flex; align-items: center; width: 100%; height: var(--menu-item-h); padding: 0 var(--sp-3); border: 0;
  border-radius: var(--radius-menu); background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.ds-menu-item:is(:hover, :focus-visible){ background: var(--surface-hover); outline: none; }
.ds-menu-item:disabled{ color: var(--text-disabled); background: none; cursor: not-allowed; }
.ds-pane-note{ margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
.ds-field[hidden]{ display: none; }
.ds-lines-adds{ display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-2); }
.ds-lines-adds > button{ border: 0; background: none; padding: var(--sp-1) 0; color: var(--accent-text); font: inherit; cursor: pointer; }
.ds-lines-adds > button:hover{ text-decoration: underline; }
.ds-totals-row{ display: flex; justify-content: flex-end; margin-top: var(--sp-5); }

/* ---- tabs (a record's notebook) ---- */
.ds-tabs{ display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin: var(--sp-5) 0 var(--sp-3); }
.ds-tabs > a, .ds-tabs > button{ display: inline-flex; align-items: center; height: var(--tab-h); padding: 0 var(--tab-pad-x);
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text); cursor: pointer;
  font: var(--fw-regular) var(--fs-base)/1 var(--font-body); text-decoration: none; margin-bottom: var(--edge-overlap); }
.ds-tabs > :is(a, button):hover{ background: var(--surface-hover); }
.ds-tabs > .on, .ds-tabs > [aria-selected="true"]{ border-bottom-color: var(--accent); font-weight: var(--fw-bold); }

/* ---- notices and empty states ---- */
/* a notice is a sentence; a row only when it holds blocks */
.ds-notice{ display: block; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--tint-info-line); border-radius: var(--radius-menu);
  background: var(--tint-info-bg); color: var(--text); font-size: var(--fs-base); }
.ds-notice:has(> :is(div, p, form, ul, ol, section, table)){ display: flex; align-items: flex-start; gap: var(--sp-2); }
.ds-notice:not(:has(> :is(div, p, form, ul, ol, section, table))) > .ds-ic:first-child{ margin-right: var(--sp-2); vertical-align: text-bottom; }
.ds-notice.tone-warning{ border-color: var(--tint-warning-line); background: var(--tint-warning-bg); }
.ds-notice.tone-danger{ border-color: var(--tint-danger-line); background: var(--tint-danger-bg); }
.ds-notice.tone-success{ border-color: var(--tint-success-line); background: var(--tint-success-bg); }
.ds-empty{ padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--fs-base); }

/* ---- avatars (initials) ---- */
.ds-avatar{ display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--avatar-bar); height: var(--avatar-bar); border-radius: var(--pill-radius);
  background: var(--green); color: var(--brand-dark); font: var(--fw-bold) var(--fs-xs) var(--font-body); }

/* ---- the chatter (Adnan, 12 October: flat, no boxes) — every record's notes and history ----
   A row of buttons (one primary) with search, files and followers at its right, which stays at
   the top while the history scrolls; a panel opens under it only while asked for; then date
   separators and entries — avatar, name, time, what kind, the text. No card, no panel, no edge. */
.ds-chatter{ color: var(--text); padding: 0 var(--sp-4) var(--chatter-pad-end) 0; min-width: 0; }
.ds-chatter-bar{ position: sticky; top: 0; z-index: var(--z-bar); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2); padding: var(--sp-2) 0; background: var(--surface-app); }
.ds-chatter-end{ margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); }
.ds-chatter-tool{ display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--ctl-h); padding: 0 var(--sp-2);
  border: 0; border-radius: var(--ctl-radius); background: none; color: var(--text-muted); font: inherit;
  font-size: var(--fs-sm); cursor: pointer; text-decoration: none; }
.ds-chatter-tool:hover, .ds-chatter-tool[aria-expanded="true"]{ background: var(--surface-hover); color: var(--text); }
.ds-chatter-panel{ padding: var(--sp-2) 0 var(--sp-3); }
.ds-chatter-panel[hidden]{ display: none; }
.ds-chatter-panel textarea{ width: 100%; min-height: var(--chatter-compose-h); resize: vertical; }
.ds-chatter-row{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.ds-chatter-note{ color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.ds-chatter-sep{ display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ds-chatter-sep::before, .ds-chatter-sep::after{ content: ''; flex: 1; border-top: 1px solid var(--border); }
.ds-chatter-entry, .ds-chatter-act{ display: grid; grid-template-columns: var(--chatter-avatar) minmax(0, 1fr);
  column-gap: var(--sp-4); padding: var(--sp-2) 0; }
.ds-chatter-act{ grid-template-columns: var(--chatter-avatar) minmax(0, 1fr) auto; align-items: center; }
.ds-chatter-entry[hidden]{ display: none; }
.ds-chatter-entry > .ds-avatar, .ds-chatter-act > .ds-avatar{ width: var(--chatter-avatar); height: var(--chatter-avatar); }
.ds-chatter-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.ds-chatter-who{ font-weight: var(--fw-bold); }
.ds-chatter-when, .ds-chatter-kind{ color: var(--text-muted); font-size: var(--fs-sm); }
.ds-chatter-text{ margin-top: var(--sp-1); line-height: var(--lh-base); overflow-wrap: anywhere; }
.ds-chatter-text img{ max-width: 100%; height: auto; }
.ds-chatter-file{ display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; color: var(--text); text-decoration: none; }
.ds-chatter-file:hover .ds-chatter-fname{ text-decoration: underline; }
.ds-chatter-fname{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-chatter-fmeta{ margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.ds-chatter-follower{ display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; }
.ds-chatter-follower > .ds-avatar{ width: var(--chatter-avatar-sm); height: var(--chatter-avatar-sm); }
.ds-chatter-empty{ color: var(--text-muted); padding: var(--sp-3) 0; }
.ds-chatter-track{ margin-top: var(--sp-1); }
.ds-chatter-thumb{ display: block; max-width: 100%; max-height: var(--chatter-thumb-h); border-radius: var(--radius-menu); }
.ds-chatter-text.is-clamped{ display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- the dialog (board A_P_modal) ---- */
.ds-dialog-overlay{ position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); background: var(--overlay); }
.ds-dialog-overlay[hidden]{ display: none; }
.ds-dialog{ width: min(var(--modal-md), 100%); max-height: calc(100vh - 2 * var(--gutter)); display: flex; flex-direction: column;
  background: var(--surface-3); color: var(--text); border-radius: var(--radius-modal); box-shadow: var(--shadow-elev); }
.ds-dialog-head{ display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.ds-dialog-head h2{ margin: 0; flex: 1; font: var(--fw-medium) var(--fs-lg)/1.3 var(--font-head); }
.ds-dialog-body{ padding: var(--sp-5); overflow: auto; }
.ds-dialog-foot{ display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }

/* document lines: add ds-lines beside sol-table; sol-/d-/ls-/p-* stay the module's. */
.ds-lines{ width: 100%; border-collapse: collapse; font-size: var(--fs-base); color: var(--text); }
.ds-lines th{ height: var(--th-h); padding: 0 var(--sp-2); text-align: left; white-space: nowrap; font: var(--fw-bold) var(--fs-base)/1.2 var(--font-body); color: var(--text); border-bottom: 1px solid var(--border-strong); }
.ds-lines td{ padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.ds-lines tbody tr:last-child td{ border-bottom: 0; }
.ds-lines tbody tr:hover td{ background: var(--surface-hover); }
.ds-lines :is(th, td):is(.r, .sol-num, .sol-tools, .sol-x), .ds-lines .ls-tools{ text-align: right; }
.ds-lines th.sol-tools, .ds-lines .ls-tools{ white-space: nowrap; }
.ds-lines .erp-input{ font: inherit; border-radius: var(--radius-facet); }
.ds-lines tbody td :is(.erp-input, input:not([type=checkbox]):not([type=radio]), select, textarea):not([readonly]):not(:disabled){
  border-width: 0 0 1px; border-style: solid; border-color: var(--border-control); border-radius: 0;
  background: transparent; box-shadow: none; }
.ds-lines tbody td :is(.erp-input, input, select, textarea):hover{ background: var(--surface-hover); }
.ds-lines tbody td :is(.erp-input, input, select, textarea):focus{ border-width: 1px; border-color: var(--border-selected);
  border-radius: var(--radius-facet); background: var(--input-bg); box-shadow: var(--focus-ring); }
.ds-lines .erp-input:focus{ border-color: var(--border-selected); box-shadow: var(--focus-ring); }
.ds-lines input.p-qty, .ds-lines input.o-qty{ text-align: right; }
.ds-lines .sol-locked, .ds-lines .erp-input:is([readonly], :disabled){ background: var(--surface-2); color: var(--text-disabled); cursor: not-allowed; }
.ds-lines :is(.sol-section, .d-section) td{ background: var(--tint-accent-bg); font: var(--fw-bold) var(--fs-base)/1.2 var(--font-body); color: var(--text); }
.ds-lines :is(.sol-note, .d-note) td{ font-style: italic; color: var(--text); }
.ds-lines td:is(.sol-num, .r){ font-variant-numeric: tabular-nums; }
.ds-lines .p-sub{ font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.ds-lines.view td{ color: var(--text); }
.ds-lines + .sol-actions{ margin-top: var(--sp-2); }
.ds-lines + .sol-actions .sol-add{ height: var(--ctl-h); padding: 0 var(--sp-4); border: 1px dashed var(--border-control); border-radius: var(--ctl-radius); background: var(--tint-accent-bg); color: var(--accent-text); font: var(--fw-bold) var(--fs-base)/1 var(--font-body); cursor: pointer; }
.ds-lines + .sol-actions .sol-add:hover{ background: var(--surface-hover); }
.ds-lines + .sol-actions .sol-add.ghost{ background: var(--surface-1); border-color: var(--border-strong); color: var(--text-muted); }

/* totals: add ds-totals beside qf-totals/qv-totals; rows stay .tot-row/.tot-grand. */
.ds-totals{ display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.ds-totals .tot-row{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6); min-width: 240px; color: var(--text-muted); font: var(--fw-medium) var(--fs-base)/1.4 var(--font-body); }
.ds-totals .tot-row[hidden]{ display: none; }
.ds-totals .tot-row b{ color: var(--text); font-weight: var(--fw-regular); }
.ds-totals .tot-row.disc b{ color: var(--tint-danger-fg); }
.ds-totals .tot-ship{ align-items: center; }
.ds-totals :is(.tot-grand, .tot-row.grand){ display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6); min-width: 240px; margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--border-strong); font: var(--fw-bold) var(--fs-lg)/1.3 var(--font-head); color: var(--text); }
.ds-totals :is(.tot-grand, .tot-row.grand) b{ font-weight: var(--fw-bold); }

/* ---- icons: the one set (apps/core/icons.py), the ink of whatever holds them ---- */
.ds-ic{ vertical-align: -0.18em; flex: none; }
/* An app icon whose theme follows the computer: a <picture> holding the light and the dark drawing
   (templates/core/_app_icon.html, apps/core/appicons.py). It takes no box, so the <img> inside stays
   the box every page already sizes and lays out. */
picture.ds-ic-app{ display: contents; }

@media (max-width: 767px){
  .ds-fields{ grid-template-columns: minmax(0, 1fr); }
  .ds-field{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ds-cp-title h1{ font-size: var(--fs-lg); }
}

/* .rec-lines-wide: a line editor's chatter stays under it (Classic; New's shell.css outranks this) */
.rec-wrap.rec-lines-wide{ flex-direction: column; align-items: stretch; }
.rec-lines-wide > .chatter{ flex: none; width: auto; position: static; max-height: none; overflow: visible;
  border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: var(--sp-3); }
/* hidden means hidden: a component's own display beat [hidden] (12 sites, 13 Oct 2026) */
[hidden]:is([class^="ds-"], [class*=" ds-"]){ display: none; }