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

/* ---- the charcoal bar (board A_List: 46 px, app grid · app · menus · tools) ---- */
html.ui-new .ds-top{ position: sticky; top: 0; z-index: var(--z-bar); }
html.ui-new .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.ui-new .ds-bar-line{ height: var(--bar-line-h); background: var(--gradient-brand); }
html.ui-new .ds-bar-grid,
html.ui-new .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.ui-new .ds-bar-grid:hover,
html.ui-new .ds-bar-btn:hover{ background: var(--bar-hover); }
html.ui-new .ds-bar-grid svg,
html.ui-new .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.ui-new .ds-bar-slot{ display: contents; }
html.ui-new .actm-fab:not(.ds-bar-btn),
html.ui-new .pg-fab:not(.ds-bar-btn),
html.ui-new .msgl-fab:not(.ds-bar-btn){ visibility: hidden; }
html.ui-new .ds-bar-right .actm-fab.ds-bar-btn,
html.ui-new .ds-bar-right .pg-fab.ds-bar-btn,
html.ui-new .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.ui-new .ds-bar-right .actm-fab.ds-bar-btn:hover,
html.ui-new .ds-bar-right .pg-fab.ds-bar-btn:hover,
html.ui-new .ds-bar-right .msgl-fab.ds-bar-btn:hover{ background: var(--bar-hover); }
html.ui-new .ds-bar-proxy .i-close{ display: none; }
html.ui-new .ds-bar-right .ds-bar-btn .actm-badge,
html.ui-new .ds-bar-right .ds-bar-btn .msgl-badge{ top: 0; right: 0; }
html.ui-new .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.ui-new .ds-bar-appicon{ width: var(--icon-app); height: var(--icon-app); flex: none; }
html.ui-new .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.ui-new .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.ui-new .ds-bar-menu nav{ display: flex; align-items: stretch; gap: 0; height: var(--bar-h); }
html.ui-new .ds-bar-menu nav > details{ display: flex; align-items: stretch; }
html.ui-new .ds-bar-menu nav > details > summary::after{ content: none; }
html.ui-new .ds-bar-menu nav > a,
html.ui-new .ds-bar-menu nav > details > summary,
html.ui-new .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.ui-new .ds-bar-menu nav > a.pd-tab,
html.ui-new .ds-bar-menu nav > a.pd-tab:hover,
html.ui-new .ds-bar-menu nav > a.pd-tab.on{ background: var(--attention-fill); }
html.ui-new .ds-bar-menu nav > a:hover,
html.ui-new .ds-bar-menu nav > details > summary:hover,
html.ui-new .ds-bar-menu nav > details[open] > summary,
html.ui-new .ds-bar-menu .modbar-more-btn:hover{ background: var(--bar-hover); color: var(--bar-ink); }
html.ui-new .ds-bar-menu nav > details.on > summary,
html.ui-new .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.ui-new .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.ui-new .ds-bar-right{ display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; flex: none; }
html.ui-new .ds-bar-right .actsys-trigger{ color: var(--bar-ink); }
html.ui-new .ds-bar-right .tb-notif-badge,
html.ui-new .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.ui-new .ds-bar-right .tb-notif-badge[hidden]{ display: none; }
html.ui-new .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.ui-new .ds-bar-right .tb-box:hover{ background: var(--bar-hover); }
html.ui-new .ds-bar-right .tb-box-tx{ display: flex; flex-direction: column; line-height: var(--lh-tight); }
html.ui-new .ds-bar-right .tb-box-tx small{ display: none; }   /* the extension is in the button's title */
html.ui-new .ds-bar-right .um-trigger{ padding: 0; border: 0; gap: 0; }
html.ui-new .ds-bar-right .um-trigger:hover{ background: transparent; }
html.ui-new .ds-bar-right .um-name,
html.ui-new .ds-bar-right .um-caret{ display: none; }
html.ui-new .ds-bar-right .um-av{ margin-left: var(--sp-1); }

/* ---- the control-panel row under the bar: Save / Discard and the one search ---- */
html.ui-new .ds-cpbar{
  display: flex; 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.ui-new .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. */
html.ui-new .ds-cpbar > .ds-cp-left{ flex: 1 1 0; min-width: min-content; display: flex; align-items: center; gap: var(--sp-3); }
html.ui-new .ds-cpbar > .ds-cp-end{ flex: 1 1 0; min-width: min-content; justify-content: flex-end; margin-left: 0; }
/* a page's subtitle beside its title never widens the left zone: it takes the room the zone has and
   ends in "…" without it, so the search stays in the middle (Collections' one-line description) */
html.ui-new .ds-cpbar .ds-cp-left > .ds-cp{ flex: 1 1 auto; min-width: 0; }
html.ui-new .ds-cpbar .ds-cp-sub{ flex: 1 1 auto; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the breadcrumb (board Final_Form: "Quotations / Q01174") */
html.ui-new .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.ui-new .ds-crumb[hidden]{ display: none; }
html.ui-new .ds-crumb a{ color: var(--accent-text); text-decoration: none; }
html.ui-new .ds-crumb span{ color: var(--text-muted); }
html.ui-new .ds-crumb b{ font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the search (classic parts: .msrch from app.css, .ss-* from smartsearch.css) */
html.ui-new .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.ui-new .ds-cpbar .msrch:focus-within{ border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--input-bg); }
html.ui-new .ds-cpbar .msrch-ic{ color: var(--text-muted); }
html.ui-new .ds-cpbar .msrch input{ color: var(--input-text); font: var(--fw-regular) var(--fs-base) var(--font-body); }
html.ui-new .ds-cpbar .msrch input::placeholder{ color: var(--input-placeholder); }
html.ui-new .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.ui-new .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.ui-new .ds-cpbar > .msrch,
  html.ui-new .ds-cpbar > .msrch.msrch-smart{ flex: 0 0 min(600px, 33%); max-width: none; }
}
html.ui-new .ds-cpbar .ss-wrap{ font-family: var(--font-body); flex: 1 1 auto; min-width: 0; }
html.ui-new .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.ui-new .ds-cpbar .ss-topbar .ss-box:focus-within{ border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--input-bg); }
html.ui-new .ds-cpbar .ss-topbar .ss-ico{ color: var(--text-muted); }
html.ui-new .ds-cpbar .ss-topbar .ss-input{ font-size: var(--fs-base); color: var(--input-text); }
html.ui-new .ds-cpbar .ss-topbar .ss-input::placeholder{ color: var(--input-placeholder); }
html.ui-new .ds-cpbar .ss-topbar .ss-caret{ color: var(--text-muted); }
html.ui-new .ds-cpbar .ss-topbar .ss-caret:hover,
html.ui-new .ds-cpbar .ss-topbar .ss-caret.open{ background: var(--surface-hover); color: var(--text); }
html.ui-new .ds-cpbar .ss-topbar .ss-kbd{ color: var(--text-muted); border-color: var(--border-strong); }
html.ui-new .ds-cpbar .ss-topbar .ss-facet,
html.ui-new .ds-cpbar .ss-topbar .ss-facet-g,
html.ui-new .ds-cpbar .ss-topbar .ss-facet-f,
html.ui-new .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.ui-new .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.ui-new .ds-cpbar .ds-cp{ padding: 0; margin: 0; border-bottom: 0; }
html.ui-new body:has(.ds-listboard){ background: var(--surface-1); }
html.ui-new body:has(.ds-listboard) .ds-cpbar{ border-bottom-color: transparent; }
html.ui-new 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.ui-new body.dark .ds-list th,
html.ui-new body.dark .ds-lines th{ background: transparent; color: var(--text); border-color: var(--border-strong); }
html.ui-new 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.ui-new .qrec,
html.ui-new .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.ui-new .qrec > .qrec-main,
html.ui-new .rec-adaptive > .rec-main{
  flex: 1000 1 var(--record-form-basis); max-width: var(--record-form-max); min-width: 0;
}
html.ui-new .qrec > .qrec-side,
html.ui-new .rec-adaptive > .chatter,
html.ui-new .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.ui-new .appshell-body:has(.rec-adaptive){ max-width: none; }
html.ui-new .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.ui-new .qrec,
  html.ui-new .rec-wrap.rec-adaptive{ flex-wrap: nowrap; }
  html.ui-new .rec-adaptive > .chatter,
  html.ui-new .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.ui-new .rec-wrap.rec-adaptive.rec-lines-wide{ flex-direction: column; align-items: stretch; }
  html.ui-new .rec-adaptive.rec-lines-wide > .rec-main{ flex: none; }
  html.ui-new .rec-adaptive.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); }
}
@container recrow (max-width: 1399.98px){
  html.ui-new .qrec,
  html.ui-new .rec-wrap.rec-adaptive{ flex-direction: column; align-items: stretch; }
  /* stacked, a flex basis is a HEIGHT */
  html.ui-new .qrec > .qrec-main,
  html.ui-new .rec-adaptive > .rec-main{ flex: none; }
  html.ui-new .qrec > .qrec-side,
  html.ui-new .rec-adaptive > .chatter,
  html.ui-new .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.ui-new .ds-bar{ flex-wrap: wrap; height: auto; padding: 0 var(--sp-2); row-gap: 0; }
  html.ui-new .ds-bar-grid{ display: none; }
  html.ui-new .ds-bar-app{ order: 1; height: var(--bar-h); flex: 1 1 auto; }
  html.ui-new .ds-bar-right{ order: 2; }
  html.ui-new .ds-bar-right .tb-box,
  html.ui-new .ds-bar-right .actsys{ display: none; }
  html.ui-new .ds-bar .ds-bar-menu{ order: 3; flex: 1 1 100%; height: var(--bar-h); }
  html.ui-new .ds-bar .ds-bar-menu:not(:has(a)){ display: none; }
  html.ui-new .ds-cpbar{ flex-wrap: wrap; padding: var(--sp-2) var(--gutter); row-gap: var(--sp-2); }
  html.ui-new .ds-cpbar > .ds-cp-left{ flex: 1 1 auto; }
  html.ui-new .ds-cpbar > .ds-cp-end{ flex: 0 1 auto; }
  /* a phone gives the search its own full-width row under the title */
  html.ui-new .ds-cpbar .msrch,
  html.ui-new .ds-cpbar .msrch.msrch-smart{ order: 3; flex: 1 1 100%; max-width: none; }
}

/* ---- Home (DESIGN_SYSTEM.md §4 Home) ---- */
html.ui-new 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.ui-new body.dark.ds-home{ background: var(--home-ground) fixed; background-color: var(--surface-app); color: var(--bar-ink); }
html.ui-new .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.ui-new body.ds-home:not(.dark) .ds-home-bar{ --bar-ink: var(--text); --bar-muted: var(--text-muted); --bar-hover: var(--surface-hover); }
html.ui-new .ds-home-logo img{ display: block; height: var(--home-logo-h); width: auto; }
html.ui-new body.ds-home:not(.dark) .ds-home-logo-dk,
html.ui-new body.dark.ds-home .ds-home-logo-lt{ display: none; }
html.ui-new .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.ui-new .ds-home-link:hover{ background: var(--bar-hover); }
html.ui-new 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.ui-new body.ds-home .appgrid{
  grid-template-columns: repeat(6, minmax(0, var(--home-col))); grid-auto-rows: var(--home-row); gap: 0; justify-content: center;
}
html.ui-new 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.ui-new body.ds-home .appcard:hover{ transform: none; background: var(--surface-hover); }
html.ui-new body.dark.ds-home .appcard:hover{ background: var(--bar-hover); }
html.ui-new body.ds-home .appcard:hover .appico{ transform: none; box-shadow: var(--shadow-tile); }
html.ui-new 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.ui-new body.ds-home .appico svg,
html.ui-new body.ds-home .appico img{ border-radius: 0; }
html.ui-new 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;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-new body.dark.ds-home .appname{ color: var(--bar-ink); }
html.ui-new body.ds-home .appcard.off{ opacity: 1; }
html.ui-new body.ds-home .appcard.off .appico{ filter: none; opacity: .55; }
html.ui-new body.ds-home .appsoon{ color: var(--text-muted); }
html.ui-new body.dark.ds-home .appsoon{ color: var(--bar-muted); }
@media (max-width: 767px){
  html.ui-new .ds-home-bar{ padding: 0 var(--sp-4); flex-wrap: wrap; column-gap: var(--sp-2); }
  html.ui-new body.ds-home .launch-body{ padding-top: var(--sp-5); }
  html.ui-new body.ds-home .appgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--sp-4) var(--sp-2); }
  html.ui-new body.ds-home .appico{ width: var(--icon-home-phone); height: var(--icon-home-phone); padding: var(--icon-home-phone-pad); }
  html.ui-new 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.ui-new body.ds-signin{
  flex-direction: column; gap: var(--sp-6);
  background: var(--signin-ground); color: var(--text);
}
html.ui-new .ds-signin-logo{ display: block; height: var(--signin-logo-h); width: auto; }
html.ui-new body.ds-signin .login-card{
  width: var(--signin-card-w); max-width: calc(100vw - 2 * var(--gutter)); box-sizing: border-box;
  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.ui-new body.ds-signin .login-card :where(h1, h2, p, div, span, b, a){ color: inherit; }
html.ui-new 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.ui-new 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.ui-new 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.ui-new 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.ui-new body.ds-signin .login-card .login-remember{
  margin: var(--sp-4) 0 0; color: var(--text); font: var(--fw-regular) var(--fs-base) var(--font-body);
}
html.ui-new 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);
}
html.ui-new body.ds-signin .login-card a.login-go{ display: flex; align-items: center; justify-content: center; padding: 0; }
html.ui-new 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.ui-new body.ds-signin :is(.login-reset, .login-alt){ margin-top: var(--sp-4); color: var(--accent-text); font-size: var(--fs-base); }
html.ui-new body.ds-signin .login-card a.login-sso{ border-color: var(--border-control); background: var(--surface-1); }
html.ui-new body.ds-signin .login-or::before, html.ui-new body.ds-signin .login-or::after{ background: var(--border-control); }
html.ui-new body.ds-signin .login-err{
  margin: var(--sp-2) 0 0; border: 1px solid var(--tint-danger-line); border-radius: var(--radius-menu);
  background: var(--tint-danger-bg); color: var(--tint-danger-fg);
}
html.ui-new body.ds-signin .login-note{
  margin: var(--sp-2) 0 0; border: 1px solid var(--tint-info-line); border-radius: var(--radius-menu);
  background: var(--tint-info-bg); color: var(--tint-info-fg);
}

/* ==== 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.ui-new :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.ui-new .btn{ background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); }
html.ui-new .btn:hover{ background: var(--accent); border-color: var(--border-selected); box-shadow: inset 0 0 0 1px var(--border-selected); }
html.ui-new :is(.btn-ghost, .btn-mini){ background: var(--surface-1); border: 1px solid var(--border-control); color: var(--text); }
html.ui-new :is(.btn-ghost, .btn-mini):hover{ background: var(--surface-hover); border-color: var(--text-muted); color: var(--text); }
html.ui-new .btn-mini{ height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
html.ui-new :is(.btn-mini.pri, .btn-primary){ background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); }
html.ui-new :is(.btn-mini.ghost, .btn-mini.danger){ background: var(--surface-1); border-color: var(--tint-danger-line); color: var(--tint-danger-fg); }
html.ui-new :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.ui-new :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.ui-new .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.ui-new :is(input, select).erp-input{ height: var(--field-h); }
html.ui-new textarea.erp-input{ padding: var(--sp-2) var(--field-pad-x); }
html.ui-new .erp-input:focus{ border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
html.ui-new .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.ui-new .lst{ font-size: var(--fs-base); border-collapse: collapse; }
html.ui-new .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.ui-new .lst td{ height: var(--row-h); padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--border); color: var(--text); }
html.ui-new .lst tbody tr:hover td{ background: var(--surface-hover); }
html.ui-new .lst tr.on td{ background: var(--surface-selected); }
html.ui-new .tablewrap{ background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-menu); }
html.ui-new .lst .empty,
html.ui-new .empty{ color: var(--text-muted); }

/* ---- the record sheet (board Final_Form) ---- */
html.ui-new .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.ui-new .o-doctitle,
html.ui-new input.o-title{ font: var(--fw-medium) var(--fs-record)/1.2 var(--font-head); color: var(--text); letter-spacing: normal; }
html.ui-new .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.ui-new .o-row label{ font: var(--fw-regular) var(--fs-base)/1.3 var(--font-body); color: var(--text-muted); }
html.ui-new .o-tab{ font: var(--fw-medium) var(--fs-base) var(--font-body); color: var(--text); border-bottom-color: var(--accent); }

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

/* ---- status chips: a word on a tint (board A_List) ---- */
html.ui-new .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.ui-new .badge:is(.draft, .st-draft){ background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }
html.ui-new .badge:is(.sent, .st-sent, .st-open){ background: var(--tint-accent-bg); color: var(--tint-accent-fg); }
html.ui-new .badge:is(.sale, .st-won, .st-active, .st-done){ background: var(--tint-success-bg); color: var(--tint-success-fg); }
html.ui-new .badge:is(.cancel, .st-lost){ background: var(--tint-danger-bg); color: var(--tint-danger-fg); }
html.ui-new .badge.st-cancel{ background: var(--tint-muted-bg); color: var(--tint-muted-fg); }
html.ui-new .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.ui-new .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.ui-new .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.ui-new .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.ui-new 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.ui-new .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.ui-new .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.ui-new .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.ui-new .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.ui-new .stx .sx-head > b{ font: var(--fw-medium) var(--fs-lg)/1.3 var(--font-head); }
html.ui-new .stx .set-card{ border-radius: var(--radius-card); box-shadow: none; padding: 0; }
html.ui-new body:not(.dark) :is(.sx-body, .sx-leave) .sx-btn-primary:is(*, :hover){ color: var(--on-accent); }
html.ui-new 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.ui-new body:not(.dark) .stx :is(.sx-link.on > span, .sx-sub.on, .sx-panelhd){ color: var(--text); }
/* the Settings frame (board A_Settings): a plain rail, the chevron before the title, a folded
   section reads back its first values (.sx-sect-sum, _settings.js) */
html.ui-new .stx .sx-searchhint{ display: none; }
html.ui-new .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.ui-new .stx .sx-link{ --cc: var(--accent); color: var(--text); }
html.ui-new .stx .sx-link.on{ background: var(--tint-accent-bg); color: var(--text); }
html.ui-new .stx .sx-pagehd{ margin: 0 0 var(--sp-3); }
html.ui-new .stx .sx-pgs{ margin: 0; color: var(--text); font-size: var(--fs-base); }
html.ui-new .stx :is(.set-card > .set-subh, .sx-feat > .sx-head){ padding: var(--sp-3) var(--sp-5); }
html.ui-new .stx .set-card:not(.collapsed) > .set-cardbody{ padding: 0 var(--sp-5) var(--sp-5); }
html.ui-new .stx :is(.set-card > .set-subh, .sx-feat > .sx-head)::after{ order: -1; margin-left: 0; margin-right: var(--sp-1); }
html.ui-new .stx .set-subh :is(.sx-badge, .sx-help){ margin-left: auto; }
html.ui-new .stx .set-subh .sx-badge ~ .sx-help{ margin-left: 0; }
html.ui-new .stx .set-subh .sx-sect-n{ display: none; }
html.ui-new .stx .sx-sect-sum{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--fw-regular) var(--fs-base)/1.4 var(--font-body); color: var(--text-muted);
}
html.ui-new .stx .sx-sect-sum b{ color: var(--text); font-weight: var(--fw-medium); }
html.ui-new .sx-cpcrumb b{ white-space: nowrap; }
html.ui-new .sx-gear .ds-menu-item input{ margin: 0 var(--sp-2) 0 0; }
html.ui-new .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.ui-new :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.ui-new .errcard{
  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.ui-new .errcard::before{ display: none; }
html.ui-new .errcard .logo{ display: none; }
html.ui-new .errcard .code{
  margin-top: 0; background: none; color: var(--text); -webkit-text-fill-color: currentColor;
  font: var(--fw-regular) var(--fs-error-code)/1 var(--font-head);
}
html.ui-new .errcard h1{ font: var(--fw-medium) var(--fs-title)/1.3 var(--font-head); color: var(--text); }
html.ui-new .errcard p{ color: var(--text); font-size: var(--fs-md); }
html.ui-new .errcard .path{ color: var(--text-muted); }
html.ui-new .errcard .actions{ justify-content: flex-start; border-top: 1px solid var(--border); padding-top: var(--sp-5); }
html.ui-new .errcard .btn-primary{ background: var(--accent); color: var(--on-accent); }
html.ui-new .errcard .btn-ghost{ border: 1px solid var(--border-control); color: var(--text); }
html.ui-new body.dark .errcard{ background: var(--surface-1); box-shadow: none; }
html.ui-new body.dark :is(.errcard h1, .errcard p, .errcard .btn-ghost){ color: var(--text); }

/* ---- 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.ui-new .m-botnav{ background: var(--bar-bg); border-top: 0; box-shadow: none; }
  html.ui-new .m-botnav a{ color: var(--bar-muted); font-family: var(--font-body); }
  html.ui-new .m-botnav a.on{ color: var(--bar-ink); box-shadow: inset 0 2px 0 var(--bar-active-line); }
  html.ui-new .m-botnav a.on .mi{ transform: none; }
  html.ui-new .m-botnav a:active{ background: var(--bar-hover); }
}

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