/* ds/shell.css — the shell and the classic parts it restyles (docs/DESIGN_SYSTEM.md §4).
   Every selector starts at html:root; values are tokens only. */

/* ---- the charcoal bar (board A_List: 46 px, app grid · app · menus · tools) ---- */
html:root .ds-top{ position: sticky; top: 0; z-index: var(--z-bar); }
html:root .ds-bar{
  display: flex; align-items: center; gap: var(--sp-1);
  height: var(--bar-h); padding: 0 var(--sp-3);
  background: var(--bar-bg); color: var(--bar-ink);
}
html:root .ds-bar-line{ height: var(--bar-line-h); background: var(--gradient-brand); }
html:root .ds-bar-grid,
html:root .ds-bar-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctl-h); height: var(--ctl-h); flex: none;
  border: 0; border-radius: var(--ctl-radius); background: transparent;
  color: var(--bar-ink); cursor: pointer; text-decoration: none; position: relative;
}
html:root .ds-bar-grid:hover,
html:root .ds-bar-btn:hover{ background: var(--bar-hover); }
html:root .ds-bar-grid svg,
html:root .ds-bar-btn svg{
  width: var(--icon-ui); height: var(--icon-ui);
  fill: none; stroke: currentColor; stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round;
}
/* Live Activity, Paging, Messaging in the bar (moved by _bar_tools.html; hidden until then) */
html:root .ds-bar-slot{ display: contents; }
html:root .actm-fab:not(.ds-bar-btn),
html:root .pg-fab:not(.ds-bar-btn),
html:root .msgl-fab:not(.ds-bar-btn){ visibility: hidden; }
html:root .ds-bar-right .actm-fab.ds-bar-btn,
html:root .ds-bar-right .pg-fab.ds-bar-btn,
html:root .ds-bar-right .msgl-fab.ds-bar-btn{
  position: relative; inset: auto; z-index: auto; width: var(--ctl-h); height: var(--ctl-h);
  border: 0; border-radius: var(--ctl-radius); background: transparent; box-shadow: none;
  color: var(--bar-ink); transform: none; filter: none;
}
html:root .ds-bar-right .actm-fab.ds-bar-btn:hover,
html:root .ds-bar-right .pg-fab.ds-bar-btn:hover,
html:root .ds-bar-right .msgl-fab.ds-bar-btn:hover{ background: var(--bar-hover); }
html:root .ds-bar-proxy .i-close{ display: none; }
html:root .ds-bar-right .ds-bar-btn .actm-badge,
html:root .ds-bar-right .ds-bar-btn .msgl-badge{ top: 0; right: 0; }
html:root .ds-bar-app{
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  height: var(--bar-h); padding: 0 var(--sp-3) 0 var(--sp-1);
  color: var(--bar-ink); text-decoration: none; min-width: 0;
}
html:root .ds-bar-appicon{ width: var(--icon-app); height: var(--icon-app); flex: none; }
html:root .ds-bar-app b{
  font: var(--fw-bold) var(--fs-lg)/1 var(--font-head);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--bar-title-max);
}

/* the module's menus, inside the bar (classic part: .modbar / .tb-menu, modnav.js) */
html:root .ds-bar .ds-bar-menu{
  display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0;
  height: var(--bar-h); min-height: 0; padding: 0; margin: 0;
  background: transparent; box-shadow: none; position: static;
}
html:root .ds-bar-menu nav{ display: flex; align-items: stretch; gap: 0; height: var(--bar-h); }
html:root .ds-bar-menu nav > details{ display: flex; align-items: stretch; }
html:root .ds-bar-menu nav > details > summary::after{ content: none; }
html:root .ds-bar-menu nav > a,
html:root .ds-bar-menu nav > details > summary,
html:root .ds-bar-menu .modbar-more-btn{
  display: inline-flex; align-items: center; height: var(--bar-h); box-sizing: border-box;
  padding: 0 var(--sp-3); border-radius: 0; margin: 0;
  border-bottom: 2px solid transparent; background: transparent;
  color: var(--bar-muted); font: var(--fw-regular) var(--fs-base)/1 var(--font-body);
  text-decoration: none; white-space: nowrap;
}
html:root .ds-bar-menu nav > a.pd-tab,
html:root .ds-bar-menu nav > a.pd-tab:hover,
html:root .ds-bar-menu nav > a.pd-tab.on{ background: var(--attention-fill); }
html:root .ds-bar-menu nav > a:hover,
html:root .ds-bar-menu nav > details > summary:hover,
html:root .ds-bar-menu nav > details[open] > summary,
html:root .ds-bar-menu .modbar-more-btn:hover{ background: var(--bar-hover); color: var(--bar-ink); }
html:root .ds-bar-menu nav > details.on > summary,
html:root .ds-bar-menu nav > a.on{
  color: var(--bar-ink); background: transparent;
  border-bottom-color: var(--bar-active-line); font-weight: var(--fw-medium);
}
html:root .ds-bar-menu .modbar-more{ display: flex; align-items: stretch; }

/* the reader's tools (classic parts: .tb-right, .actsys, .usermenu, .tb-box, .tb-notif) */
html:root .ds-bar-right{ display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; flex: none; }
html:root .ds-bar-right .actsys-trigger{ color: var(--bar-ink); }
html:root .ds-bar-right .tb-notif-badge,
html:root .ds-bar-right .actsys-badge{
  position: absolute; top: 0; right: 0; min-width: var(--badge-h); height: var(--badge-h); padding: 0 var(--sp-1);
  border-radius: var(--pill-radius); background: var(--accent); color: var(--on-accent);
  font: var(--fw-bold) var(--fs-xs)/var(--badge-h) var(--font-body); text-align: center; box-sizing: border-box;
}
html:root .ds-bar-right .tb-notif-badge[hidden]{ display: none; }
html:root .ds-bar-right .tb-box{
  display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--ctl-h);
  padding: 0 var(--sp-2); border: 0; border-radius: var(--ctl-radius);
  background: transparent; color: var(--bar-ink); cursor: pointer; text-decoration: none;
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-body);
}
html:root .ds-bar-right .tb-box:hover{ background: var(--bar-hover); }
html:root .ds-bar-right .tb-box-tx{ display: flex; flex-direction: column; line-height: var(--lh-tight); }
html:root .ds-bar-right .tb-box-tx small{ display: none; }   /* the extension is in the button's title */
html:root .ds-bar-right .um-trigger{ padding: 0; border: 0; gap: 0; }
html:root .ds-bar-right .um-trigger:hover{ background: transparent; }
html:root .ds-bar-right .um-name,
html:root .ds-bar-right .um-caret{ display: none; }
html:root .ds-bar-right .um-av{ margin-left: var(--sp-1); }

/* ---- the control-panel row under the bar: Save / Discard and the one search ---- */
html:root .ds-cpbar{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  min-height: calc(var(--search-h) + 2 * var(--sp-3)); padding: var(--sp-3) var(--gutter);
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
html:root .ds-cpbar .fst{ flex: none; }
/* the three zones (templates/ds/_bar.html; the reference's control row): the left zone (primary
   button, title, gear, breadcrumb, Save / Discard) and the right zone (pager, views) grow EQUALLY
   from nothing, so the search between them sits in the middle of the row on every page. A zone
   never shrinks below its own content: when a long title needs more, the search moves over
   rather than covering it. Too many actions for the row take a row of their own and wrap if that is
   too short (fit-content: all on one line, or the row's width): they are never cut off, and actions
   that fit stay on one line beside the search. */
html:root .ds-cpbar > .ds-cp-left{ flex: 1 1 0; min-width: min-content; display: flex; align-items: center; gap: var(--sp-3); }
html:root .ds-cpbar > .ds-cp-end{ flex: 1 1 0; min-width: fit-content; flex-wrap: wrap; justify-content: flex-end; margin-left: 0; }
/* a page's subtitle beside its title never widens the left zone, so the search stays in the middle:
   it takes the room the zone has and wraps there, and drops under the title when too little is left
   (a narrow column stood it 7 lines tall).
   Inside the title's own box that box has to grow too, or the sentence has no width at all and no
   word of it shows (Collections' description, Learning's course count: 3 weeks unseen). */
html:root .ds-cpbar .ds-cp-left > .ds-cp{ flex: 1 1 auto; min-width: 0; }
html:root .ds-cpbar .ds-cp-title:has(> .ds-cp-sub){ flex: 1 1 auto; flex-wrap: wrap; }
html:root .ds-cpbar .ds-cp-sub{ flex: 1 1 auto; width: 0; min-width: min(34ch, 100%); white-space: normal; line-height: var(--lh-tight); }
/* the breadcrumb (board Final_Form: "Quotations / Q01174") */
html:root .ds-crumb{ display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; flex: 0 1 auto; font: var(--fw-medium) var(--fs-title)/1.2 var(--font-head); }
html:root .ds-crumb[hidden]{ display: none; }
html:root .ds-crumb a{ color: var(--accent-text); text-decoration: none; }
html:root .ds-crumb span{ color: var(--text-muted); }
html:root .ds-crumb b{ flex: 0 1 auto; min-width: 6ch; font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a long record name ends in "…" on the breadcrumb's one line: it never wraps under the page's New, and
   (like the subtitle above) never widens the left zone, so the search stays in the middle */
html:root .ds-crumb{ flex-wrap: nowrap; }
html:root .ds-crumb > span{ flex: none; white-space: nowrap; }
/* the list's name gives way first, so the record's name stays readable; below the wide screens the zone keeps its
   content and the search moves over, because a name cut to nothing tells the reader nothing */
html:root .ds-crumb > a{ flex: 0 3 auto; min-width: 6ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px){
  html:root .ds-cpbar > .ds-cp-left:has(.ds-crumb:not([hidden])){ min-width: 0; }
}
html:root .ds-cpbar .ds-cp:has(> .ds-crumb){ flex-wrap: nowrap; }
/* what stands beside a breadcrumb keeps its size. Named, never `:has(…) > :not(…)`: with that shape every node
   added or removed anywhere restyled the whole page (test_css_restyle.py) */
html:root .ds-cpbar .ds-cp > .ds-crumb ~ *,
html:root .ds-cpbar .ds-cp > :is(.ds-btn, img):has(~ .ds-crumb){ flex: none; }
html:root .ds-cpbar .ds-cp > .ds-crumb ~ .ds-cp-sub{ flex: 1 1 auto; }  /* a sentence after the crumb still needs its width */
/* the search (classic parts: .msrch from app.css, .ss-* from smartsearch.css) */
html:root .ds-cpbar .msrch{
  flex: 1 1 300px; max-width: 520px; width: auto; height: var(--search-h); box-sizing: border-box;
  padding: 0 var(--sp-2) 0 var(--sp-3); gap: var(--sp-2);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--ctl-radius);
}
html:root .ds-cpbar .msrch:focus-within{ border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--input-bg); }
html:root .ds-cpbar .msrch-ic{ color: var(--text-muted); }
html:root .ds-cpbar .msrch input{ color: var(--input-text); font: var(--fw-regular) var(--fs-base) var(--font-body); }
html:root .ds-cpbar .msrch input::placeholder{ color: var(--input-placeholder); }
html:root .ds-cpbar .msrch-kbd{ color: var(--text-muted); border-color: var(--border-strong); }
/* the Smart Search widget (module and page modes): smartsearch.css draws it as a translucent
   pill for the classic gradient bar and forces its wrapper with !important */
html:root .ds-cpbar .msrch.msrch-smart{
  flex: 1 1 300px; max-width: 520px; width: auto !important; height: auto;
  padding: 0 !important; border: 0 !important; background: transparent !important;
}
@media (min-width: 1024px){
  html:root .ds-cpbar > .msrch,
  html:root .ds-cpbar > .msrch.msrch-smart{ flex: 0 0 min(600px, 33%); max-width: none; }
}
html:root .ds-cpbar .ss-wrap{ font-family: var(--font-body); flex: 1 1 auto; min-width: 0; }
html:root .ds-cpbar .ss-topbar .ss-box{
  min-width: 0; min-height: var(--search-h); box-sizing: border-box; padding: 0 var(--sp-1) 0 var(--sp-3);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--ctl-radius); box-shadow: none;
}
html:root .ds-cpbar .ss-topbar .ss-box:focus-within{ border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--input-bg); }
html:root .ds-cpbar .ss-topbar .ss-ico{ color: var(--text-muted); }
html:root .ds-cpbar .ss-topbar .ss-input{ font-size: var(--fs-base); color: var(--input-text); }
html:root .ds-cpbar .ss-topbar .ss-input::placeholder{ color: var(--input-placeholder); }
html:root .ds-cpbar .ss-topbar .ss-caret{ color: var(--text-muted); }
html:root .ds-cpbar .ss-topbar .ss-caret:hover,
html:root .ds-cpbar .ss-topbar .ss-caret.open{ background: var(--surface-hover); color: var(--text); }
html:root .ds-cpbar .ss-topbar .ss-kbd{ color: var(--text-muted); border-color: var(--border-strong); }
html:root .ds-cpbar .ss-topbar .ss-facet,
html:root .ds-cpbar .ss-topbar .ss-facet-g,
html:root .ds-cpbar .ss-topbar .ss-facet-f,
html:root .ds-cpbar .ss-topbar .ss-facet-c{
  height: var(--facet-h); padding: 0 var(--sp-1) 0 var(--sp-2); border: 0; border-radius: var(--radius-facet);
  background: var(--surface-facet); color: var(--text); font-size: var(--fs-sm);
}
html:root .ds-cpbar .ss-topbar .ss-facet b{ color: var(--text); }

/* the band's control row has no border of its own; a list board (§4 *The list page*): rows on the page */
html:root .ds-cpbar .ds-cp{ padding: 0; margin: 0; border-bottom: 0; }
html:root body:has(.ds-listboard){ background: var(--surface-1); }
html:root body:has(.ds-listboard) .ds-cpbar{ border-bottom-color: transparent; }
html:root body .ds-listboard{ padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* a list's and a document's column heads carry no fill in Dark either, and a list no stripes
   (dark-fixes.css paints every classic table; the design system's are drawn by their component) */
html:root body.dark .ds-list th,
html:root body.dark .ds-lines th{ background: transparent; color: var(--text); border-color: var(--border-strong); }
html:root body.dark .ds-list tbody tr:nth-child(even):not(:hover, .on, [aria-selected="true"]) td{ background: transparent; }

/* ---- the record page: the record and the chatter (the reference's layout files, Adnan 12 Oct) ----
   ≥ 1400 px side by side: the record fills the row up to 1400 px (it grows first), the chatter is
   530 px at least and takes the rest; the row stops at 2600 px. Narrower: the chatter under the
   record. The chatter is flat — no panel, the page's ground, ONE hairline between the two.
   Classic parts: .qrec (customer), .rec-wrap.rec-adaptive (quotation, RFQ). */
html:root .qrec,
html:root .rec-wrap.rec-adaptive{
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--record-gap);
  max-width: var(--record-row-max); justify-content: flex-start;
}
html:root .qrec > .qrec-main,
html:root .rec-adaptive > .rec-main{
  flex: 1000 1 var(--record-form-basis); max-width: var(--record-form-max); min-width: 0;
}
html:root .qrec > .qrec-side,
html:root .rec-adaptive > .chatter,
html:root .rec-adaptive > .qrec-side{
  flex: 1 0 var(--record-chatter-min); max-width: none; min-width: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
/* side by side by the ROW's width, not the window's (the page zoom; DESIGN_SYSTEM.md §4) */
html:root .appshell-body:has(.rec-adaptive){ max-width: none; }
html:root .appshell-body:has(.rec-adaptive, .qrec){ container: recrow / inline-size; }
@container recrow (min-width: 1400px){
  /* one row: the record gives way (it shrinks), the chatter keeps its 530 px */
  html:root .qrec,
  html:root .rec-wrap.rec-adaptive{ flex-wrap: nowrap; }
  html:root .rec-adaptive > .chatter,
  html:root .qrec > .qrec-side{
    display: block; position: sticky; top: var(--sp-4); max-height: calc(100vh - var(--sp-6)); overflow: auto;
    border-left: 1px solid var(--border); padding-left: var(--chatter-pad-l);
  }
}
/* .rec-lines-wide: a line editor needs ~1,100 px — its chatter stays under it until 1700 px */
@container recrow (min-width: 1400px) and (max-width: 1659px){
  html:root .rec-wrap.rec-adaptive.rec-lines-wide{ flex-direction: column; align-items: stretch; }
  html:root .rec-adaptive.rec-lines-wide > .rec-main{ flex: none; }
  html:root .rec-adaptive.rec-lines-wide > .chatter{ flex: none; width: auto; max-width: var(--record-form-max); position: static; max-height: none; overflow: visible;
    border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: var(--sp-3); }
}
/* .rec-lines-stacked: a line table as wide as the page (the quotation's price breakdown) — the chatter stays under it at every width */
@container recrow (min-width: 1400px){
  html:root .rec-wrap.rec-adaptive.rec-lines-stacked{ flex-direction: column; align-items: stretch; }
  html:root .rec-adaptive.rec-lines-stacked > .rec-main{ flex: none; max-width: none; }
  html:root .rec-adaptive.rec-lines-stacked > .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); }
}
@container recrow (max-width: 1399.98px){
  /* one line: a column that may wrap is as wide as its widest content, however wide the screen */
  html:root .qrec,
  html:root .rec-wrap.rec-adaptive{ flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  /* stacked, a flex basis is a HEIGHT */
  html:root .qrec > .qrec-main,
  html:root .rec-adaptive > .rec-main{ flex: none; }
  html:root .qrec > .qrec-side,
  html:root .rec-adaptive > .chatter,
  html:root .rec-adaptive > .qrec-side{
    flex: none; width: auto; position: static; max-height: none; overflow: visible;
    border-top: 1px solid var(--border); padding-top: var(--sp-3);
  }
}

/* ---- phones (board A_P_mobile): the bar keeps the app and the tools, the menus wrap
   to a second row inside the charcoal, the search row stays under it ---- */
@media (max-width: 767px){
  html:root .ds-bar{ flex-wrap: wrap; height: auto; padding: 0 var(--sp-2); row-gap: 0; }
  html:root .ds-bar-grid{ display: none; }
  html:root .ds-bar-app{ order: 1; height: var(--bar-h); flex: 1 1 auto; }
  html:root .ds-bar-right{ order: 2; }
  html:root .ds-bar-right .tb-box,
  html:root .ds-bar-right .actsys{ display: none; }
  html:root .ds-bar .ds-bar-menu{ order: 3; flex: 1 1 100%; height: var(--bar-h); }
  html:root .ds-bar .ds-bar-menu:not(:has(a)){ display: none; }
  html:root .ds-cpbar{ flex-wrap: wrap; padding: var(--sp-2) var(--gutter); row-gap: var(--sp-2); }
  /* a zone gives up its width and its content wraps: nothing goes past the screen's edge */
  html:root .ds-cpbar > .ds-cp-left{ flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
  /* a page's sentence wraps under its title: the wide screen's rule that keeps it from widening its
     zone (width: 0) stood it one word per line and clipped it, a tall blank box with no words */
  html:root .ds-cpbar .ds-cp-sub{ flex: 1 1 100%; width: auto; overflow: visible; white-space: normal; }
  html:root .ds-cpbar > .ds-cp-end{ flex: 0 1 auto; min-width: 0; }
  html:root .ds-cp-left :is(label, select){ min-width: 0; max-width: 100%; }
  /* a settings link keeps its whole label on two lines rather than running off the screen */
  html:root a.sx-a.ds-btn{ white-space: normal; height: auto; min-height: var(--ctl-h); max-width: 100%; }
  /* a phone gives the search its own full-width row under the title */
  html:root .ds-cpbar .msrch,
  html:root .ds-cpbar .msrch.msrch-smart{ order: 3; flex: 1 1 100%; max-width: none; }
}

/* ---- Home (DESIGN_SYSTEM.md §4 Home) ---- */
html:root body.ds-home{ background: var(--home-ground) fixed; background-color: var(--surface-app); color: var(--text); border-top: var(--bar-line-h) solid var(--accent); min-height: 100vh; }
html:root body.dark.ds-home{ background: var(--home-ground) fixed; background-color: var(--surface-app); color: var(--bar-ink); }
html:root .ds-home-bar{
  display: flex; align-items: center; gap: var(--sp-4); background: transparent; color: var(--bar-ink);
  min-height: var(--home-bar-h); padding: 0 var(--sp-6);
}
html:root body.ds-home:not(.dark) .ds-home-bar{ --bar-ink: var(--text); --bar-muted: var(--text-muted); --bar-hover: var(--surface-hover); }
html:root .ds-home-logo img{ display: block; height: var(--home-logo-h); width: auto; }
html:root body.ds-home:not(.dark) .ds-home-logo-dk,
html:root body.dark.ds-home .ds-home-logo-lt{ display: none; }
html:root .ds-home-link{
  display: inline-flex; align-items: center; height: var(--ctl-h); padding: 0 var(--sp-3);
  border: 1px solid var(--bar-muted); border-radius: var(--pill-radius);
  color: var(--bar-ink); text-decoration: none; font: var(--fw-medium) var(--fs-sm)/1 var(--font-body);
}
html:root .ds-home-link:hover{ background: var(--bar-hover); }
html:root body.ds-home .launch-body{ max-width: calc(var(--home-grid-max) + 2 * var(--sp-5)); margin: 0 auto; padding: var(--home-top) var(--sp-5) var(--sp-6); }
html:root body.ds-home .appgrid{
  grid-template-columns: repeat(6, minmax(0, var(--home-col))); grid-auto-rows: minmax(var(--home-row), auto); gap: 0; justify-content: center;
}
html:root body.ds-home .appcard{ justify-content: flex-start; gap: var(--home-label-gap); padding: var(--sp-2) var(--sp-1) 0; min-width: 0;
  border: 0; border-radius: var(--radius-card); background: transparent; transition: background var(--motion-fast); }
html:root body.ds-home .appcard:hover{ transform: none; background: var(--surface-hover); }
html:root body.dark.ds-home .appcard:hover{ background: var(--bar-hover); }
html:root body.ds-home .appcard:hover .appico{ transform: none; box-shadow: var(--shadow-tile); }
html:root body.ds-home .appico{
  width: var(--icon-home); height: var(--icon-home); padding: var(--icon-home-pad); box-sizing: border-box; flex: none;
  background: var(--home-tile); border: 0; border-radius: var(--radius-menu); box-shadow: var(--shadow-tile);
}
html:root body.ds-home .appico svg,
html:root body.ds-home .appico img{ border-radius: 0; }
html:root body.ds-home .appname{ max-width: 100%; color: var(--text); font: var(--fw-regular) var(--fs-base)/1.3 var(--font-body); text-align: center; }  /* a long name wraps: a tile's name is never cut */
html:root body.dark.ds-home .appname{ color: var(--bar-ink); }
html:root body.ds-home .appcard.off{ opacity: 1; }
html:root body.ds-home .appcard.off .appico{ filter: none; opacity: .55; }
html:root body.ds-home .appsoon{ color: var(--text-muted); }
html:root body.dark.ds-home .appsoon{ color: var(--bar-muted); }
@media (max-width: 767px){
  html:root .ds-home-bar{ padding: 0 var(--sp-4); flex-wrap: wrap; column-gap: var(--sp-2); }
  html:root body.ds-home .launch-body{ padding-top: var(--sp-5); }
  html:root body.ds-home .appgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--sp-4) var(--sp-2); }
  html:root body.ds-home .appico{ width: var(--icon-home-phone); height: var(--icon-home-phone); padding: var(--icon-home-phone-pad); }
  html:root body.ds-home .appname{ font-size: var(--fs-sm); }
}

/* ---- the sign-in page (board C_Login): the logo above a card on charcoal ----
   Classic parts restyled: .login-body, .login-card, .login-err, .login-reset, .login-remember. */
html:root body.ds-signin{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6);
  min-height: 100vh; margin: 0;
  background: var(--signin-ground); color: var(--text);
}
html:root body.ds-signin, html:root body.ds-signin *{ box-sizing: border-box; }
html:root .ds-signin-logo{ display: block; height: var(--signin-logo-h); width: auto; }
html:root body.ds-signin .login-card{
  display: flex; flex-direction: column;
  width: var(--signin-card-w); max-width: calc(100vw - 2 * var(--gutter));
  padding: var(--sp-6) var(--sp-6) var(--sp-5); border: 0; border-radius: var(--radius-card);
  background: var(--signin-card); color: var(--text); box-shadow: none;
}
/* Every word in the card takes the card's ink: the pages sharing it carry classes written for
   the retired dark card — white ink, 1.1:1 on this light one until 2026-10-13. Later rules say
   what differs. Measured by tools/shots/check_bare_ink.py. */
html:root body.ds-signin .login-card :where(h1, h2, p, div, span, b, a){ color: inherit; }
html:root body.ds-signin :is(.ds-signin-title, .login-h){ margin: 0 0 var(--sp-3); font: var(--fw-medium) var(--fs-heading)/1.2 var(--font-head); color: var(--text); text-align: start; }
html:root body.ds-signin :is(.login-sub, .login-account){ margin: 0 0 var(--sp-3); font: var(--fs-base)/var(--lh-base) var(--font-body); text-align: start; }
html:root body.ds-signin .login-account{ word-break: break-all; }
html:root body.ds-signin .login-card label{
  margin: var(--sp-4) 0 var(--sp-2); color: var(--text); font: var(--fw-medium) var(--fs-base)/1.2 var(--font-body);
}
html:root body.ds-signin .login-card input:not([type=checkbox]){
  height: var(--signin-field-h); padding: 0 var(--sp-3); border: 1px solid var(--input-border);
  border-radius: var(--radius-menu); background: var(--input-bg); color: var(--input-text); font-size: var(--fs-md);
}
html:root body.ds-signin .login-card .login-remember{
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 0; color: var(--text); font: var(--fw-regular) var(--fs-base) var(--font-body); cursor: pointer;
}
html:root body.ds-signin .login-remember input{ width: auto; margin: 0; }
html:root body.ds-signin .login-card :is(button, a.login-go){
  height: var(--signin-field-h); margin-top: var(--sp-5); border: 0; border-radius: var(--radius-menu);
  background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-md) var(--font-body); cursor: pointer;
}
html:root body.ds-signin .login-card a.login-go{ display: flex; align-items: center; justify-content: center; padding: 0; }
html:root body.ds-signin .login-card :is(button, a.login-go):hover{ background: var(--accent); box-shadow: inset 0 0 0 2px var(--border-selected); }
html:root body.ds-signin :is(.login-reset, .login-alt){ display: block; margin-top: var(--sp-4); color: var(--accent-text); font-size: var(--fs-base); text-align: center; text-decoration: none; }
html:root body.ds-signin :is(.login-reset, .login-alt):hover{ text-decoration: underline; }
html:root body.ds-signin .login-card a.login-sso{
  display: block; margin: var(--sp-2) 0 var(--sp-1); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-control); border-radius: var(--radius-menu);
  background: var(--surface-1); font-weight: var(--fw-bold); font-size: var(--fs-md); text-align: center; text-decoration: none; cursor: pointer;
}
html:root body.ds-signin .login-card a.login-sso:hover{ background: var(--surface-hover); }
html:root body.ds-signin .login-or{ display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-xs); }
html:root body.ds-signin .login-or::before, html:root body.ds-signin .login-or::after{ content: ''; flex: 1; height: 1px; background: var(--border-control); }
html:root body.ds-signin .login-err{
  margin: var(--sp-2) 0 0; padding: var(--sp-2); border: 1px solid var(--tint-danger-line); border-radius: var(--radius-menu);
  background: var(--tint-danger-bg); color: var(--tint-danger-fg); font-size: var(--fs-sm);
}
html:root body.ds-signin .login-note{
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--tint-info-line); border-radius: var(--radius-menu);
  background: var(--tint-info-bg); color: var(--tint-info-fg); font-size: var(--fs-base); line-height: var(--lh-base);
}
/* "Log out instead" under the card of the forced password change: on the ground, not on the card */
html:root body.ds-signin .fp-logout{ margin: 0 auto; text-align: center; }
html:root body.ds-signin .fp-logout button{ border: 0; background: none; color: var(--bar-ink); font-size: var(--fs-base); text-decoration: underline; cursor: pointer; }

/* ==== Phase 2 — the classic parts every module shares (design_system.CLASSIC_PARTS),
   restyled here so hundreds of pages move at once, until Phase 3 moves their markup ==== */

/* ---- buttons: one height, a 3:1 edge, primary = the brand fill with the ink that reads ---- */
html:root :is(.btn, .btn-ghost, .btn-mini){
  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-radius: var(--ctl-radius); box-shadow: none; filter: none; transform: none;
  font: var(--fw-medium) var(--fs-base)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
html:root .btn{ background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); }
html:root .btn:hover{ background: var(--accent); border-color: var(--border-selected); box-shadow: inset 0 0 0 1px var(--border-selected); }
html:root :is(.btn-ghost, .btn-mini){ background: var(--surface-1); border: 1px solid var(--border-control); color: var(--text); }
html:root :is(.btn-ghost, .btn-mini):hover{ background: var(--surface-hover); border-color: var(--text-muted); color: var(--text); }
html:root .btn-mini{ height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
html:root :is(.btn-mini.pri, .btn-primary){ background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); }
html:root :is(.btn-mini.ghost, .btn-mini.danger){ background: var(--surface-1); border-color: var(--tint-danger-line); color: var(--tint-danger-fg); }
html:root :is(.btn-mini.ghost, .btn-mini.danger):hover{ background: var(--tint-danger-bg); color: var(--tint-danger-fg); border-color: var(--tint-danger-fg); }
html:root :is(.btn, .btn-ghost, .btn-mini, .ds-btn):is(:disabled, [disabled], [aria-disabled="true"]){
  background: var(--surface-2); border-color: var(--border-strong); color: var(--text-disabled);
  box-shadow: none; filter: none; opacity: 1; cursor: not-allowed;
}

/* ---- fields ---- */
html:root .erp-input{
  box-sizing: border-box; padding: 0 var(--field-pad-x); border: 1px solid var(--input-border);
  border-radius: var(--ctl-radius); background: var(--input-bg); color: var(--input-text);
  font: var(--fw-regular) var(--fs-base)/var(--lh-base) var(--font-body);
}
html:root :is(input, select).erp-input{ height: var(--field-h); }
html:root textarea.erp-input{ padding: var(--sp-2) var(--field-pad-x); }
html:root .erp-input:focus{ border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
html:root .erp-input:disabled{ background: var(--surface-2); color: var(--text-disabled); border-color: var(--border-strong); }

/* ---- the list (board A_List: 38 px rows, the header in bold ink, no shouting caps) ---- */
html:root .lst{ font-size: var(--fs-base); border-collapse: collapse; }
html:root .lst th{
  height: var(--th-h); padding: 0 var(--sp-3); background: var(--surface-1); color: var(--text);
  border-bottom: 1px solid var(--border-strong); text-transform: none; letter-spacing: normal;
  font: var(--fw-bold) var(--fs-base)/1.2 var(--font-body);
}
html:root .lst td{ height: var(--row-h); padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--border); color: var(--text); }
/* a row become a phone card (mobilecards.js) takes its content's height — components.css */
@media (max-width: 767px){
  html:root .m-cards > :is(tbody, tfoot) > tr > td{ height: auto; }
}
html:root .lst tbody tr:hover td{ background: var(--surface-hover); }
html:root .lst tr.on td{ background: var(--surface-selected); }
html:root .tablewrap{ background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-menu); }
html:root .lst .empty,
html:root .empty{ color: var(--text-muted); }

/* ---- the record sheet (board Final_Form) ---- */
html:root .o-sheet{
  max-width: none; padding: var(--sheet-pad); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius-menu); box-shadow: none;
}
html:root .o-doctitle,
html:root input.o-title{ font: var(--fw-medium) var(--fs-record)/1.2 var(--font-head); color: var(--text); letter-spacing: normal; }
html:root .o-group h4{
  font: var(--fw-bold) var(--fs-sm)/1.2 var(--font-head); text-transform: none; letter-spacing: normal;
  color: var(--text); border-bottom-color: var(--border);
}
html:root .o-row label{ font: var(--fw-regular) var(--fs-base)/1.3 var(--font-body); color: var(--text-muted); }
html:root .o-tab{ font: var(--fw-medium) var(--fs-base) var(--font-body); color: var(--text); border-bottom-color: var(--accent); }

/* ---- panels and cards ---- */
html:root :is(.panel, .card){ background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: none; }
html:root .panel-h{ border-bottom-color: var(--border); }
html:root .panel-t{ font: var(--fw-medium) var(--fs-md)/1.3 var(--font-head); color: var(--text); }
html:root .panel-t small{ font-family: var(--font-body); color: var(--text-muted); }
html:root .panel-h a{ font-family: var(--font-body); color: var(--accent-text); }

/* ---- status chips: a word on a tint (board A_List) ---- */
html:root .badge{
  display: inline-block; padding: var(--chip-pad); border-radius: var(--chip-radius);
  font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-body); letter-spacing: normal; text-transform: none;
  background: var(--tint-neutral-bg); color: var(--tint-neutral-fg);
}
html:root .badge:is(.draft, .st-draft){ background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }
html:root .badge:is(.sent, .st-sent, .st-open){ background: var(--tint-accent-bg); color: var(--tint-accent-fg); }
html:root .badge:is(.sale, .st-won, .st-active, .st-done){ background: var(--tint-success-bg); color: var(--tint-success-fg); }
html:root .badge:is(.cancel, .st-lost){ background: var(--tint-danger-bg); color: var(--tint-danger-fg); }
html:root .badge.st-cancel{ background: var(--tint-muted-bg); color: var(--tint-muted-fg); }
html:root .badge:is(.st-warn, .unsent){ background: var(--tint-warning-bg); color: var(--tint-warning-fg); }

/* ---- notices and quiet text (rule 11: muted text is a label, never the blocked grey) ---- */
html:root .msg{
  background: var(--tint-info-bg); border: 1px solid var(--tint-info-line); color: var(--text);
  border-radius: var(--radius-menu); font-size: var(--fs-base);
}
html:root .muted{ color: var(--text-muted); }

/* ---- the chatter: the flat component .ds-chatter (components.css, Adnan 12 October) draws every
   record's notes and history in both interfaces; nothing of it is restyled here. */

/* ---- Settings (board A_Settings): white fields with a 3:1 edge, sentence-case section titles ----
   Classic part: the settings kit's shell (.stx, .set-card, .set-subh, .sx-*), static/css/settings.css.
   Its variables carry most of the look, so most of the restyle is the variables. */
html:root .sx-static-v.ds-chip{ flex: 0 1 auto; align-self: flex-start; max-width: 100%; white-space: normal; }
html:root .stx .sx-testout.ds-chip{ flex: 0 1 auto; max-width: 100%; height: auto; white-space: normal; }
html:root .stx{
  --sx-accent: var(--accent); --sx-ink: var(--text); --sx-mut: var(--text-muted); --sx-line: var(--border);
  --sx-card: var(--surface-1); --sx-bg: var(--surface-app); --sx-soft: var(--surface-2); --sx-radius: var(--radius-card);
  font-family: var(--font-body); color: var(--text);
}
html:root body.dark .stx{
  --sx-ink: var(--text); --sx-mut: var(--text-muted); --sx-line: var(--border);
  --sx-card: var(--surface-1); --sx-bg: var(--surface-app); --sx-soft: var(--surface-2);
}
html:root .stx :is(.sx-body, .set-card) :is(input:not([type=checkbox], [type=radio], [type=color], [type=file], [type=hidden]), select, textarea){
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--ctl-radius);
  color: var(--input-text); font-family: var(--font-body);
}
html:root .stx :is(.sx-body, .set-card) :is(input, select, textarea):focus{
  border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--input-bg);
}
html:root .stx :is(.sx-body, .set-card) :is(input, select, textarea):disabled{
  background: var(--surface-2); border-color: var(--border-strong); color: var(--text-disabled);
}
html:root .stx .set-subh{
  font: var(--fw-medium) var(--fs-lg)/1.3 var(--font-head); color: var(--text);
  text-transform: none; letter-spacing: normal;
}
html:root .stx .sx-head > b{ font: var(--fw-medium) var(--fs-lg)/1.3 var(--font-head); }
html:root .stx .set-card{ border-radius: var(--radius-card); box-shadow: none; padding: 0; }
html:root body:not(.dark) :is(.sx-body, .sx-leave) .sx-btn-primary:is(*, :hover){ color: var(--on-accent); }
html:root body:not(.dark) .stx :is(.sx-navsec, .sx-searchhint .kbd, .sx-secret-state, .sx-body th, .sx-homegrp-d, .sx-rwhen){ color: var(--text-muted); }
html:root body:not(.dark) .stx :is(.sx-link.on > span, .sx-panelhd){ color: var(--text); }
/* the rail folds behind one button on a phone, so a page's settings start on the first screen */
html:root .stx .sx-navbtn{ display: none; }
@media (max-width: 900px){
  html:root .stx .sx-navbtn{ display: inline-flex; }
  html:root .sx-nav:not(.open) > .sx-navbody{ display: none; }
  html:root .sx-nav.open > .sx-navbody{ margin-top: var(--sp-2); }
}
/* the reader's first settings page: what the old front page showed (SETTINGS_MODULE.md §8.0h) */
html:root .sx-landrow{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
html:root .sx-landjumps{ display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-left: auto; }
html:root .sx-landend{ display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-5); }
html:root .sx-landend section{ scroll-margin-top: calc(var(--bar-h) + var(--bar-line-h) + var(--search-h) + 3 * var(--sp-3)); }
html:root .sx-landhd{ margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--text); }
html:root .sx-landend .sx-homegrp{ margin-top: var(--sp-4); }
html:root .sx-landend .sx-homegrp-h{ margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text); }
html:root .sx-landend .sx-homegrp-d{ margin: 0 0 var(--sp-2); }
html:root .sx-dir{ list-style: none; margin: 0; padding: 0; }
html:root .sx-dir .sx-card{
  display: grid; grid-template-columns: calc(var(--menu-min) + var(--sp-5)) minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid var(--border);
}
html:root .sx-dir .sx-chd{ display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-medium); }
html:root .sx-dir .sx-dirdesc{ color: var(--text); }
html:root .sx-dir .sx-dirpages{ grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
@media (max-width: 900px){
  html:root .sx-dir .sx-card{ grid-template-columns: minmax(0, 1fr); }
  html:root .sx-dir .sx-dirpages{ grid-column: 1; }
}
/* the Settings frame (board A_Settings): a plain rail */
html:root .stx .sx-searchhint{ display: none; }
html:root .stx .sx-navgrp{
  text-transform: none; letter-spacing: normal; font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-body);
  color: var(--text-muted); margin: var(--sp-4) var(--sp-2) var(--sp-1);
}
html:root .stx .sx-link{ --cc: var(--accent); color: var(--text); }
html:root .stx .sx-link.on{ background: var(--tint-accent-bg); color: var(--text); }
html:root .stx .sx-pagehd{ margin: 0 0 var(--sp-3); }
html:root .stx .sx-pgs{ margin: 0; color: var(--text); font-size: var(--fs-base); }
html:root .stx :is(.set-card > .set-subh, .sx-feat > .sx-head){ padding: var(--sp-3) var(--sp-5); }
html:root .stx .set-card > .set-cardbody{ padding: 0 var(--sp-5) var(--sp-5); }
/* the page: one sheet from the menu to the window's edge. A section lies flat on it and its title is a band
   across the whole page, edge to edge whatever the page's padding (SETTINGS_MODULE.md §8.0i). */
html:root .stx{ --sx-bleed: var(--sp-5); --sx-bleed-back: calc(-1 * var(--sx-bleed)); }
/* where a Settings page starts: under the bar and its control row */
html:root:has(.stx){ --settings-top: calc(var(--bar-h) + var(--bar-line-h) + var(--search-h) + 2 * var(--sp-3)); scroll-padding-top: calc(var(--settings-top) + var(--sp-2)); }
html:root .stx .sx-body :is(.set-card, .sx-feat):not(.set-card *, .sx-feat *){ margin: 0 0 var(--sp-4); padding: 0; border: 0; border-radius: 0; background: none; }
html:root .stx .sx-body :is(.set-card, .sx-feat):not(.set-card *, .sx-feat *) > :is(.set-subh, .sx-head){
  margin: 0 var(--sx-bleed-back); padding: var(--sp-2) var(--sx-bleed); background: var(--tint-neutral-bg); color: var(--text);
}
html:root .stx .sx-body :is(.set-card, .sx-feat):not(.set-card *, .sx-feat *) > .set-cardbody{ padding: var(--sp-3) 0 0; }
html:root .stx .sx-sect-d{ margin-bottom: var(--sp-2); color: var(--text); }
html:root .stx .sx-more{ align-self: flex-start; justify-self: start; }
/* Sub-pages inside a module page (apps/core/settings_pages.py): the same form with the other sections hidden.
   A class with its own display beats [hidden], so this says so. The links stand above the page in two columns. */
html:root .stx :is(.sx-panel, .sx-sect)[hidden]{ display: none; }
/* what depends on an unticked box hides with it, whatever display its own layout rule gives it */
html:root #stx [data-requires].sx-off{ display: none; }
html:root .stx .sx-parts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-5); margin: 0 0 var(--sp-4); }
html:root .stx .sx-parthd{ display: flex; flex-direction: column; gap: var(--sp-1); margin: 0 0 var(--sp-3); }
html:root .stx .sx-parthd .sx-panelhd{ margin: 0; }
/* one list per module, 33 of them: two columns, and a list stays whole */
html:root .stx .navcfg-cols{ grid-column: 1 / -1; columns: 2; column-gap: var(--sp-5); }
html:root .stx .navcfg-mod{ break-inside: avoid; margin-bottom: var(--sp-4); }
html:root .stx .sx-part{ display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--ctl-radius); color: var(--text); text-decoration: none; }
html:root .stx .sx-part:hover{ background: var(--surface-hover); }
html:root .stx :is(.sx-part-t, .sx-partback){ display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent-text, var(--accent)); font-weight: var(--fw-medium); text-decoration: none; }
html:root .stx .sx-part-d{ color: var(--text); font-size: var(--fs-sm); }
@media (max-width: 767px){
  html:root .stx .sx-parts{ grid-template-columns: minmax(0, 1fr); }
  html:root .stx .navcfg-cols{ columns: 1; }
}
/* a choice with its own description reads as a setting: the box, then its title with the description under it */
html:root .stx .sx-body .sx-choice:has(> .set-desc){ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2); align-items: start; }
html:root .stx .sx-body .sx-choice:has(> .set-desc) > :is(.set-desc, .sx-more){ grid-column: 2; }
/* a column is narrower than the page was: a button with a long name wraps, it never runs past the window */
html:root .stx .sx-body .sx-secbody .ds-btn{ max-width: 100%; height: auto; min-height: var(--ctl-h); white-space: normal; text-align: left; }
/* a block inside a section, such as a form a panel draws there, what a tick reveals, or a part of the sheet,
   lays its settings on the section's own two columns; one a level deeper draws the same two (SETTINGS_MODULE.md §8.0i) */
html:root .stx .sx-body .sx-secbody > :is(form, div[data-requires], .ds-sheet-part:not(.ds-fields)):not(.sx-field, .sx-row, .sx-fieldline, .sx-chk, .set-toggle, [hidden]){ display: grid; grid-template-columns: subgrid; align-items: start; }
html:root .stx .sx-body .sx-secbody :is(.sx-sec, .sx-sec > form, .ds-sheet-part > .sx-feat, .ds-sheet-part > .sx-feat > .sx-feat, .sx-feat > .ds-fields-col, .ds-fields-col > div[data-requires]):has(> :is(.sx-field, .sx-row, .sx-fieldline, .sx-chk, .sx-choice)):not([hidden]),
html:root .stx .sx-body .set-grid:not(.ds-fields){ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-5); align-items: start; }
html:root .stx .sx-body .sx-secbody > :is(form, div[data-requires], .ds-sheet-part:not(.ds-fields)) > *,
html:root .stx .sx-body .sx-secbody :is(.sx-sec, .sx-sec > form, .ds-sheet-part > .sx-feat, .ds-sheet-part > .sx-feat > .sx-feat, .sx-feat > .ds-fields-col, .ds-fields-col > div[data-requires]) > *{ grid-column: 1 / -1; min-width: 0; }
html:root .stx .sx-body .sx-secbody > :is(form, div[data-requires], .ds-sheet-part:not(.ds-fields)) > :is(.sx-field:not(.sx-field-wide), .sx-field-wide:has(> .sx-actionrow), .sx-field-wide:has(input[type=file]), .sx-row, .sx-fieldline, .set-toggle, .sx-chk, .sx-choice),
html:root .stx .sx-body .sx-secbody :is(.sx-sec, .sx-sec > form, .ds-sheet-part > .sx-feat, .ds-sheet-part > .sx-feat > .sx-feat, .sx-feat > .ds-fields-col, .ds-fields-col > div[data-requires]) > :is(.sx-field:not(.sx-field-wide), .sx-field-wide:has(> .sx-actionrow), .sx-field-wide:has(input[type=file]), .sx-row, .sx-fieldline, .set-toggle, .sx-chk, .sx-choice){ grid-column: auto; }
html:root .stx .sx-body .sx-band{ display: grid; gap: var(--sp-3); }
/* a text box on its own line under its description takes the column, so its value can be read */
html:root .stx .sx-body .sx-fieldline > .set-desc + input[type=text]:not([inputmode]){ width: 100%; margin-inline: 0; }
@media (max-width: 767px){
  html:root .stx .sx-body .sx-secbody :is(.sx-sec, .sx-sec > form, .ds-sheet-part > .sx-feat, .ds-sheet-part > .sx-feat > .sx-feat, .sx-feat > .ds-fields-col, .ds-fields-col > div[data-requires]):has(> :is(.sx-field, .sx-row, .sx-fieldline, .sx-chk, .sx-choice)):not([hidden]),
  html:root .stx .sx-body .set-grid:not(.ds-fields){ grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 901px){
  html:root body:has(.stx) .appshell-body{ padding: 0; }
  html:root body:has(.stx) .appshell-body > .twofa-grace{ margin: var(--sp-3) var(--gutter); }
  html:root .stx .sx-nav{ padding: var(--sp-2) var(--sp-2) var(--sp-4) var(--gutter); }
  html:root .stx .sx-main{ min-height: calc(100vh - var(--settings-top)); padding: var(--sp-3) var(--sx-bleed) var(--sp-6); background: var(--surface-1); border-left: 1px solid var(--border); }
}
@media (max-width: 900px){
  html:root .stx{ --sx-bleed: var(--gutter); }
}
html:root .stx .set-subh :is(.sx-badge, .sx-help){ margin-left: auto; }
html:root .stx .set-subh .sx-badge ~ .sx-help{ margin-left: 0; }
html:root .sx-cpcrumb b{ white-space: nowrap; }
html:root .sx-gear .ds-menu-item input{ margin: 0 var(--sp-2) 0 0; }
html:root .stx .sx-lastsaved{ margin: var(--sp-4) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- pop-ups: the shared menus float on the one elevation ---- */
html:root :is(.ss-menu, .modbar-more-pop){
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-menu); box-shadow: var(--shadow-elev);
}

/* ---- error pages (board A_P_error): a calm card, the code in plain ink, two plain buttons ----
   Classic part: templates/_error_card.html (.errcard), shown inside the staff shell. */
html:root body.errshell{
  display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: var(--sp-5);
  background: var(--surface-2);
}
html:root body.errshell, html:root body.errshell *{ box-sizing: border-box; }
html:root .errcard{
  width: 100%; max-width: var(--modal-md); margin: var(--sp-6) auto; padding: var(--sp-6);
  border-radius: var(--radius-card); box-shadow: none; border: 1px solid var(--border);
  background: var(--surface-1); text-align: left; font-family: var(--font-body);
}
html:root .errcard .logo{ display: none; }
/* the server-error page has no shell around it to say whose it is: its logo stays */
html:root .errcard.is-branded{ position: relative; overflow: hidden; }
html:root .errcard.is-branded::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: var(--sp-1); background: var(--gradient-brand); }
html:root .errcard.is-branded .logo{ display: block; margin-bottom: var(--sp-5); }
html:root .errcard.is-branded .logo img{ display: block; width: 190px; max-width: 70%; height: auto; }
html:root .errcard .code{ color: var(--text); font: var(--fw-regular) var(--fs-error-code)/1 var(--font-head); }
html:root .errcard h1{ margin: var(--sp-2) 0 0; font: var(--fw-medium) var(--fs-title)/1.3 var(--font-head); color: var(--text); }
html:root .errcard p{ margin: var(--sp-3) 0 0; color: var(--text); font-size: var(--fs-md); line-height: var(--lh-base); }
html:root .errcard .ref{ font-size: var(--fs-base); }
html:root .errcard .ref b{ font-family: var(--font-mono); }
html:root .errcard .path{ margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); word-break: break-all; }
html:root .errcard .path code{ font-family: var(--font-mono); }
html:root .errcard .actions{
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: flex-start;
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border);
}
html:root .errcard .foot{ margin-top: var(--sp-5); color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: .4px; }
@media (max-width: 480px){
  html:root .errcard{ padding: var(--sp-5) var(--sp-4); }
}

/* ---- the phone's bottom bar (board A_P_mobile): charcoal, the app icons in their own colours ----
   Classic part: templates/_mobilenav.html (.m-botnav), mobile.css. */
@media (max-width: 767px){
  html:root .m-botnav{ background: var(--bar-bg); border-top: 0; box-shadow: none; }
  html:root .m-botnav a{ color: var(--bar-muted); font-family: var(--font-body); }
  html:root .m-botnav a.on{ color: var(--bar-ink); box-shadow: inset 0 2px 0 var(--bar-active-line); }
  html:root .m-botnav a.on .mi{ transform: none; }
  html:root .m-botnav a:active{ background: var(--bar-hover); }
}

/* ---- the Messaging launcher (templates/_msglauncher.html): its button sits in the bar's slot, its
   panel opens under the bar; on a phone the panel is a full-screen sheet ---- */
html:root .msgl-fab{
  position: fixed; right: var(--sp-5); bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
}
html:root .msgl-fab .i-close{ display: none; }
html:root .msgl-fab.open .i-chat{ display: none; }
html:root .msgl-fab.open .i-close{ display: block; }
html:root .msgl-badge{
  position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; padding: 0 var(--sp-1); border-radius: var(--pill-radius);
  background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-xs)/20px var(--font-body); text-align: center;
}
html:root .msgl-panel{
  position: fixed; right: var(--sp-5); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-modal);
  display: none; flex-direction: column; width: 372px; max-width: calc(100vw - var(--sp-6)); max-height: min(72vh, 620px);
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-1); box-shadow: var(--shadow-elev); overflow: hidden;
}
html:root .msgl-panel.show{ display: flex; }
html:root .msgl-head{
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); background: var(--accent); color: var(--on-accent);
}
html:root .msgl-head b{ font: var(--fw-bold) var(--fs-md)/1.3 var(--font-head); }
html:root .msgl-headtools{ display: flex; align-items: center; gap: var(--sp-3); }
html:root .msgl-open{ color: var(--on-accent); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }
html:root .msgl-open:hover{ text-decoration: underline; }
html:root .msgl-x{ padding: 0 var(--sp-1); border: 0; background: none; color: var(--on-accent); font-size: var(--fs-lg); line-height: var(--lh-tight); cursor: pointer; }
html:root .msgl-bar{ flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
html:root .msgl-tabs{ display: flex; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius-menu); background: var(--surface-2); }
html:root .msgl-tab{
  padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--radius-facet); background: none;
  color: var(--text-muted); font: var(--fw-bold) var(--fs-sm)/1.4 var(--font-body); cursor: pointer;
}
html:root .msgl-tab.on{ background: var(--surface-1); color: var(--text); }
html:root .msgl-new{
  margin-left: auto; padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--radius-menu);
  background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-sm)/1.4 var(--font-body); cursor: pointer;
}
html:root .msgl-search{ flex: none; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
html:root .msgl-search input{
  width: 100%; box-sizing: border-box; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-control); border-radius: var(--radius-menu);
  background: var(--surface-2); color: var(--text); font-size: var(--fs-sm);
}
html:root .msgl-search input:focus{ outline: 0; border-color: var(--border-selected); background: var(--surface-1); }
html:root .msgl-list{ flex: 1; min-height: 0; overflow-y: auto; }
html:root .msgl-item{
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; cursor: pointer;
}
html:root .msgl-item:hover{ background: var(--surface-hover); }
html:root .msgl-item.unreadrow{ background: var(--tint-accent-bg); }
html:root .msgl-av{
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: var(--pill-radius); background: var(--green); color: var(--brand-dark); font: var(--fw-bold) var(--fs-md)/1 var(--font-body); overflow: hidden;
}
html:root .msgl-av img{ width: 100%; height: 100%; object-fit: cover; }
html:root .msgl-dot{ position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: var(--pill-radius); background: var(--border-strong); }
html:root .msgl-dot.online{ background: var(--tint-success-fg); }
html:root .msgl-dot.away{ background: var(--tint-warning-fg); }
html:root .msgl-body{ flex: 1; min-width: 0; }
html:root .msgl-row{ display: flex; align-items: baseline; gap: var(--sp-2); }
html:root .msgl-title{ color: var(--text); font: var(--fw-bold) var(--fs-base)/1.4 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root .msgl-when{ flex: none; margin-left: auto; color: var(--text-muted); font-size: var(--fs-xs); }
html:root .msgl-prev{ color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root .msgl-item.unreadrow :is(.msgl-title, .msgl-prev){ color: var(--text); font-weight: var(--fw-bold); }
html:root .msgl-n{
  flex: none; min-width: 20px; height: 20px; padding: 0 var(--sp-2); border-radius: var(--pill-radius);
  background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-xs)/20px var(--font-body); text-align: center;
}
html:root .msgl-empty{ padding: var(--sp-6) var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
/* the docked chat windows stack clear of the launcher's corner */
html:root .dm-wins{ right: 90px; }
@media (max-width: 640px){
  html:root .dm-wins{ right: 0; }
}
@media (max-width: 767px){
  html:root .msgl-panel{ width: 360px; max-width: calc(100vw - var(--sp-5)); }
  html:root .msgl-item{ min-height: 46px; padding: var(--sp-3) var(--sp-4); }
}
@media (max-width: 480px){
  html:root .msgl-panel{ inset: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; z-index: var(--m-sheet-z); }
  html:root .msgl-head{ padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px)); }
}

/* ---- a page opened inside another module's pop-up (?modal): no chrome, the form only ---- */
html:root body.modal-embed{ background: var(--surface-3); }
html:root body.modal-embed .appshell-body{ margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); max-width: none; }
html:root body.modal-embed :is(.back-link, .ds-crumb){ display: none; }

html:root .twofa-grace{ margin: 0 0 var(--sp-3); }
/* the holder of a page's scripts is no box of its own (navswap replaces it) */
html:root [data-erp-page-scripts]{ display: contents; }

/* the panels of the bar's Paging and Messaging buttons open under the bar (desk widths) */
@media (min-width: 768px){
  html:root .msgl-panel,
  html:root .pg-panel{ top: calc(var(--bar-h) + var(--bar-line-h) + var(--sp-2)); bottom: auto; right: var(--sp-3); }
}