/*
 * STRALIX Operations design system.
 *
 * One set of tokens, one type scale and one set of components for every
 * screen. A screen composes these; it does not invent its own sizes or
 * colours. Company branding reaches the interface through one variable,
 * --brand-primary, set on <body> from the company's configured colour when it
 * is legible on white; everything brand-coloured derives from it. System
 * fonts only: no external resources and no JavaScript.
 */

:root {
  color-scheme: light dark;

  /* Type. Segoe UI Variable / system UI for Latin script and figures, with
     Gujarati faces named so mixed English and Gujarati text stays in one
     family. Figures are tabular wherever they are compared. */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, Roboto, "Noto Sans", "Noto Sans Gujarati", "Nirmala UI",
    "Shruti", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;      /* badges, table headings, metadata */
  --text-sm: 0.8125rem;    /* help, labels in dense grids */
  --text-ui: 0.875rem;     /* tables, buttons, controls and tabs */
  --text-base: 0.9375rem;  /* body text and inputs */
  --text-md: 1rem;         /* card titles, emphasised values */
  --text-lg: 1.125rem;     /* section titles */
  --text-xl: 1.375rem;     /* page titles */
  --text-2xl: 1.625rem;    /* the greeting, headline figures */
  --leading-tight: 1.25;
  --leading-body: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Colour. Neutral greys carry the interface; colour means something. */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f3f6;
  --color-surface-subtle: #f8f9fb;
  --color-text: #18202e;
  --color-text-muted: #556070;
  --color-border: #e1e5eb;
  --color-border-strong: #b9c1cd;

  --stralix-primary: #2b3fb6;
  --color-primary: var(--brand-primary, var(--stralix-primary));
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 84%, #000000);
  --color-on-primary: #ffffff;
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 9%, #ffffff);
  --color-focus: #1f5fd6;

  --color-info-bg: #eef3fe;
  --color-info-text: #1d3b8a;
  --color-info-border: #5b7fd8;
  --color-success-bg: #e9f6ef;
  --color-success-text: #13572f;
  --color-success-border: #2f9e66;
  --color-warning-bg: #fff5df;
  --color-warning-text: #6b4300;
  --color-warning-border: #c98a00;
  --color-error-bg: #fdeded;
  --color-error-text: #8a1c1c;
  --color-error-border: #d64545;

  --color-sidebar-bg: #ffffff;
  --color-sidebar-text: #2b3442;
  --color-sidebar-muted: #6b7584;
  --color-sidebar-hover: #f1f3f6;
  --color-sidebar-active: var(--color-primary-soft);
  --color-topbar-bg: #ffffff;

  /* Space: a 4px step scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Layout. */
  --content-width: 76rem;
  --content-width-narrow: 44rem;
  --sidebar-width: 15rem;
  --topbar-height: 3.5rem;

  /* Controls. The touch target stays the floor for anything tapped. */
  --touch-target: 2.75rem;
  --control-height: 2.25rem;
  --control-height-compact: 1.875rem;

  --radius: 6px;
  --radius-small: 4px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(24, 32, 46, 0.04);
  --shadow-raised: 0 4px 20px rgba(24, 32, 46, 0.12);
}

@media (pointer: coarse) {
  :root {
    --control-height: var(--touch-target);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1420;
    --color-surface: #171e2c;
    --color-surface-muted: #1f2737;
    --color-surface-subtle: #1a2130;
    --color-text: #e6e9f0;
    --color-text-muted: #aab3c2;
    --color-border: #2b3548;
    --color-border-strong: #4b5770;
    /* A company colour chosen for white paper is not used on a dark screen. */
    --color-primary: #a9b8ff;
    --color-primary-hover: #c3ceff;
    --color-on-primary: #0f1420;
    --color-primary-soft: #222c48;
    --color-focus: #8fb4ff;

    --color-info-bg: #1b2546;
    --color-info-text: #d4dbff;
    --color-info-border: #7b8ce6;
    --color-success-bg: #13301f;
    --color-success-text: #bfe8d0;
    --color-success-border: #3fb97a;
    --color-warning-bg: #3a2a07;
    --color-warning-text: #ffe2a3;
    --color-warning-border: #e0a526;
    --color-error-bg: #3d1616;
    --color-error-text: #ffc9c9;
    --color-error-border: #e36464;

    --color-sidebar-bg: #141a27;
    --color-sidebar-text: #d9dee8;
    --color-sidebar-muted: #8f99aa;
    --color-sidebar-hover: #1f2737;
    --color-topbar-bg: #141a27;

    --shadow: none;
    --shadow-raised: 0 4px 20px rgba(0, 0, 0, 0.5);
  }
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h3,
h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-small);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}

.skip-link:focus {
  top: 1rem;
  color: var(--color-on-primary);
}

/* Platform identity (STRALIX) */

.platform-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--touch-target);
  color: var(--color-text);
  text-decoration: none;
}

a.platform-brand:hover {
  color: var(--color-text);
}

/* Height only, so the symbol keeps its own proportions. */
.platform-brand__symbol {
  width: auto;
  height: 2.25rem;
  flex: none;
}

.platform-brand__text {
  display: grid;
  gap: 0.05rem;
}

.platform-brand__name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

.platform-brand__product {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.22em;
}

/* Company identity (configured per company, never hard-coded) */

.identity-divider {
  width: 1px;
  height: 2rem;
  flex: none;
  background: var(--color-border);
}

.company-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

/* Contained so a wide or tall logo is never stretched or cropped. */
.company-identity__logo {
  width: auto;
  height: 2rem;
  max-width: 9rem;
  object-fit: contain;
  flex: none;
}

.company-identity__monogram {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.company-identity__name {
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Typography: one scale for every screen */

.page-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}

.page-subtitle,
.lead {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
  max-width: 48rem;
}

.section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

.card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.eyebrow {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.eyebrow a {
  color: inherit;
  text-decoration: none;
}

.eyebrow a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.greeting {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

/* Public layout: sign-in, company selection and status pages */

.layout-public {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.public-header {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 0.5rem;
}

.public-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem;
}

.panel {
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.panel > * + * {
  margin-top: 1rem;
}

.public-footer {
  padding: 1rem;
}

.public-footer .language-form {
  max-width: 28rem;
  margin: 0 auto;
}

/* Sign-in: the company leads, STRALIX supports it from the footer, and the
   whole page fits a laptop viewport. The panel is centred in whatever height
   is left, and the fixed spacing is kept small so that height stays positive. */

.layout-public--sign-in {
  min-height: 100vh;
  min-height: 100dvh;
}

.layout-public--sign-in .public-header {
  padding: 1.5rem 1rem 0;
}

.layout-public--sign-in .public-main {
  align-items: center;
  padding: 1.25rem 1rem;
}

.layout-public--sign-in .page-title {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.layout-public--sign-in .lead {
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.layout-public--sign-in .public-footer {
  display: grid;
  gap: 0.875rem;
  padding: 0 1rem 1.25rem;
}

/* Label beside the control: one row instead of two. */
.layout-public--sign-in .language-form {
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.company-identity--sign-in {
  gap: 0.75rem;
  max-width: 100%;
}

.company-identity--sign-in .company-identity__logo {
  height: 3rem;
  max-width: 12rem;
}

.company-identity--sign-in .company-identity__monogram {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

.company-identity--sign-in .company-identity__name {
  max-width: none;
  color: var(--company-name-colour, var(--color-text));
  font-size: 1.25rem;
  font-weight: 700;
  white-space: normal;
}

/* A company's primary colour is chosen against white; on the dark scheme it
   may not be readable, so the name keeps the normal text colour there. */
@media (prefers-color-scheme: dark) {
  .company-identity--sign-in .company-identity__name {
    color: var(--color-text);
  }
}

.powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.2;
}

.powered-by__symbol {
  width: auto;
  height: 1rem;
  flex: none;
}

.powered-by__name {
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Short laptop viewports: tighten only the vertical rhythm, never the
   controls themselves. */
@media (max-height: 40rem) {
  .layout-public--sign-in .public-header {
    padding-top: 1rem;
  }

  .layout-public--sign-in .public-main {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .layout-public--sign-in .panel {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .company-identity--sign-in .company-identity__logo,
  .company-identity--sign-in .company-identity__monogram {
    height: 2.5rem;
  }

  .company-identity--sign-in .company-identity__monogram {
    width: 2.5rem;
  }

  .layout-public--sign-in .lead {
    margin-bottom: 1rem;
  }

  .layout-public--sign-in .public-footer {
    gap: 0.625rem;
    padding-bottom: 0.875rem;
  }
}

/* Application shell: sidebar, topbar, content.

   Below 64rem the sidebar is a drawer opened by the Menu control in the
   topbar, with no script: a visually hidden checkbox carries its state. From
   64rem it is a fixed column and the Menu control is gone. */

.layout-app {
  min-height: 100vh;
}

.app-frame {
  min-height: 100vh;
}

.app-nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(var(--sidebar-width), 85vw);
  border-right: 1px solid var(--color-border);
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  transform: translateX(-100%);
  transition: transform 160ms ease;
  overflow-y: auto;
}

.app-nav-toggle:checked ~ .app-sidebar {
  transform: none;
  box-shadow: var(--shadow-raised);
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  min-height: var(--topbar-height);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.app-sidebar__brand .company-identity__name {
  white-space: normal;
  font-size: var(--text-base);
}

.app-sidebar__footer {
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.app-sidebar__footer .platform-brand__symbol {
  height: 1.5rem;
}

.app-sidebar__footer .platform-brand__name {
  font-size: var(--text-sm);
}

.app-sidebar__footer .platform-brand__product {
  font-size: 0.625rem;
}

.app-scrim {
  display: none;
}

.app-nav-toggle:checked ~ .app-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: block;
  background: rgba(15, 20, 32, 0.35);
}

.app-body {
  min-width: 0;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-topbar-bg);
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--topbar-height);
  padding: var(--space-2) var(--space-4);
}

.app-header__menu {
  flex: none;
}

.app-nav-toggle:focus-visible ~ .app-body .app-header__menu {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
}

.context-bar__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  min-width: 0;
}

.context-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.context-item dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.context-item dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.context-item .badge {
  margin-left: 0;
}

.context-bar__switch.button {
  min-height: var(--control-height-compact);
  font-size: var(--text-sm);
}

/* The signed-in person: initials, name and role, opening the account panel. */
.account-menu {
  position: relative;
  margin-left: auto;
  flex: none;
}

.account-menu > summary {
  list-style: none;
  cursor: pointer;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
}

.user-chip:hover,
.account-menu[open] > .user-chip {
  background: var(--color-surface-muted);
}

.user-chip__avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.user-chip__text {
  display: grid;
  line-height: var(--leading-tight);
  text-align: left;
}

.user-chip__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.user-chip__role {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.user-chip::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 var(--space-1) 0.2rem var(--space-1);
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
}

.account-menu__panel {
  position: absolute;
  right: 0;
  z-index: 50;
  display: grid;
  gap: var(--space-4);
  width: min(19rem, calc(100vw - 2rem));
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

/* The Close button sits in the panel's top-right corner, clear of the name. */
.account-menu__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.account-menu__close[hidden] {
  display: none;
}

.account-menu__close:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.account-menu__close:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.account-menu__who {
  padding-right: var(--space-8);
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.account-menu__who strong {
  font-size: var(--text-md);
}

.app-main {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-10);
}

.page-intro .lead {
  margin-bottom: 0;
}

.status-panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.status-panel__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.status-panel__detail {
  color: var(--color-text-muted);
}

/* A persistent sidebar from 1100px: every ordinary business laptop and
   desktop (1366, 1440, 1920) keeps it; tablets and phones get the drawer. */
@media (min-width: 68.75rem) {
  .app-frame {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: auto;
    transform: none;
    transition: none;
  }

  .app-nav-toggle:checked ~ .app-sidebar {
    box-shadow: none;
  }

  .app-nav-toggle:checked ~ .app-scrim {
    display: none;
  }

  /* Stated with .button so it outranks the button component's own
     display, which is declared later in this file. */
  .app-header__menu.button {
    display: none;
  }

  .app-header__inner {
    padding: var(--space-2) var(--space-6);
  }

  .app-main {
    padding: var(--space-5) var(--space-6) var(--space-8);
  }
}

/* Buttons: primary (the one next step), secondary (a valid alternative),
   quiet (edit, history, cancel), danger (destructive only). One primary per
   area of a screen. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--control-height);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

/* A primary button's text colour is set for every link state and stated with
   enough weight (.button.button--primary) that no container rule for links —
   a notice, a card, a table — can hand it the surrounding text colour. */
.button.button--primary,
.button.button--primary:link,
.button.button--primary:visited {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 1px 1px rgba(24, 32, 46, 0.08);
}

.button.button--primary:hover,
.button.button--primary:focus-visible {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.button.button--primary:active {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.18);
}

.button.button--primary:disabled,
.button.button--primary[aria-disabled="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  opacity: 0.55;
  cursor: not-allowed;
}

.button--secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.button--secondary:hover {
  border-color: var(--color-text-muted);
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.button--quiet {
  background: transparent;
  color: var(--color-primary);
}

.button--quiet:hover {
  background: var(--color-primary-soft);
}

.button--block {
  width: 100%;
}

/* Forms */

.form {
  display: grid;
  gap: 1rem;
}

.form--secondary {
  margin-top: 0.5rem;
}

.field {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.field__label,
.language-form__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
select {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-base);
}

input[type="number"] {
  font-variant-numeric: tabular-nums;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-text-muted);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  border-color: var(--color-focus);
}

[aria-invalid="true"] {
  border-color: var(--color-error-border);
}

.field__error {
  color: var(--color-error-text);
  font-size: 0.9375rem;
}

.form-errors {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-error-border);
  border-radius: var(--radius-small);
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.choice-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-primary);
}

.choice__label {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.language-form {
  display: grid;
  gap: 0.375rem;
}

.language-form__controls {
  display: flex;
  gap: 0.5rem;
}

.language-form select {
  flex: 1;
}

/* Notices and badges */

.messages {
  display: grid;
  gap: 0.5rem;
}

.notice {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-info-border);
  border-radius: var(--radius-small);
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

/* Ordinary links take the notice's own colour. Buttons keep theirs. */
.notice a:not(.button) {
  color: inherit;
  font-weight: 600;
}

.notice--success {
  border-left-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.notice--warning {
  border-left-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* Customer-order review: the readiness panel and each line's decision card. */
.readiness {
  max-width: 44rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
}

.readiness__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.readiness__title + p {
  margin-top: 0.25rem;
}

.readiness .button-row {
  margin-top: 0.875rem;
}

/* The page moves focus here after a save. The indicator follows the panel's
   own accent instead of the page-wide blue ring, and only for keyboard focus. */
.readiness:focus,
.decision-card:focus {
  outline: none;
}

.readiness:focus-visible,
.decision-card:focus-visible {
  outline: 2px solid var(--color-warning-border);
  outline-offset: 3px;
}

.notice--success.readiness:focus-visible {
  outline-color: var(--color-success-border);
}

.readiness__list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.readiness__item + .readiness__item {
  margin-top: 0.75rem;
}

.decision-card {
  max-width: 44rem;
  margin-top: 0.75rem;
}

.notice--error {
  border-left-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

/* Status badges: colour only where it means something. Neutral for draft
   and inactive, info for in progress, success for done, warning for needs
   attention, error for blocked. The brand colour is not a status. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.badge--neutral,
.badge--draft {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.badge--warning,
.badge--warn {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.badge--success,
.badge--done {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge--info,
.badge--active {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.badge--error,
.badge--withdrawn {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.badge--role {
  margin-left: 0;
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

.badge-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-muted {
  color: var(--color-text-muted);
}

.code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

/* Application navigation: the sidebar.

   Sections are headed by a quiet label; a group's own pages appear under it
   only while the group is the current section, so the sidebar stays short.
   Every destination is a plain link. */

.app-nav {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2) var(--space-4);
}

.app-nav__section {
  display: grid;
  gap: var(--space-1);
}

.app-nav__heading {
  padding: 0 var(--space-3);
  color: var(--color-sidebar-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-nav__list,
.app-nav__sublist {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-nav__sublist {
  display: none;
  margin: 2px 0 var(--space-1) var(--space-4);
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border);
}

.app-nav__group--open > .app-nav__sublist {
  display: grid;
}

.app-nav__link {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-small);
  color: var(--color-sidebar-text);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.app-nav__sublist .app-nav__link {
  min-height: 2rem;
  font-size: var(--text-sm);
  color: var(--color-sidebar-muted);
}

.app-nav__link:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-text);
}

/* The current page is unmistakable; the section it sits in is marked more
   quietly so the two are never confused. */
.app-nav__link[aria-current="page"] {
  background: var(--color-sidebar-active);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.app-nav__link[aria-current="true"] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.app-nav__link.app-nav__group-label {
  font-weight: var(--weight-medium);
}

.app-nav__link.app-nav__group-label[aria-current="true"] {
  font-weight: var(--weight-semibold);
}

/* Sidebar sections are native disclosures (details/summary): keyboard and
   screen-reader behaviour come from the browser. The summary reads as the
   section heading, with a chevron that turns when the section is open. */

.app-nav {
  gap: var(--space-2);
}

.app-nav__disclosure > .app-nav__list {
  margin-top: 2px;
}

.app-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-small);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.app-nav__summary::-webkit-details-marker {
  display: none;
}

.app-nav__summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.app-nav__disclosure[open] > .app-nav__summary::after {
  transform: rotate(45deg);
}

.app-nav__summary:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-text);
}

.app-nav__summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

.app-nav__disclosure .app-nav__link {
  min-height: 2rem;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}

/* A section's links sit under its heading with a guide line, as the
   sub-lists always did; the heading of the section holding the current page
   is marked, so the way back to it is never lost. */
.app-nav__disclosure > .app-nav__list {
  margin-left: var(--space-3);
  padding-left: var(--space-1);
  border-left: 1px solid var(--color-border);
}

.app-nav__summary--current {
  color: var(--color-sidebar-text);
}

/* A lighter scrollbar for the sidebar; it still scrolls by wheel, touch and
   keyboard. */
.app-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.app-sidebar::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* Page header */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.page-header__text {
  min-width: 0;
  flex: 1 1 20rem;
}

.page-header__text .lead {
  margin-bottom: 0;
}

.page-header__alt {
  color: var(--color-text-muted);
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.page-header__meta .badge {
  margin-left: 0;
}

.page-header__actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Search and filters */

.search-panel {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.search-panel__query {
  display: grid;
  gap: 0.375rem;
}

.search-panel__row {
  display: flex;
  gap: 0.5rem;
}

.search-panel__row input {
  flex: 1;
  min-width: 0;
}

.filters {
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
}

.filters__summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 0.75rem 0 1rem;
}

.result-count {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Tables. One standard for every list: quiet headings, comfortable rows,
   figures right-aligned with tabular digits, compact row actions. A wide
   screen gets a real table; a phone gets one labelled card per row. A data
   set too wide for its container scrolls inside its own frame, never the
   page, which leaves room for column choice later. */

.table-wrap {
  /* Positioned, so a visually hidden heading inside a wide table stays in
     the frame instead of widening the page. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
}

.data-table th,
.data-table td {
  padding: 0.625rem var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr:last-child > * {
  border-bottom: 0;
}

.data-table tbody tr:hover > * {
  background: var(--color-surface-subtle);
}

.data-table__primary a {
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.data-table__primary a:hover {
  text-decoration: underline;
}

.data-table__secondary {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

/* Detail pages */

.detail-grid {
  display: grid;
  gap: 1.25rem;
}

.detail-section,
.empty-state,
.confirm-panel {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.detail-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.detail-section__header .section-title {
  margin-bottom: 0;
}

.detail-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.detail-list dt {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-subtitle {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

.detail-notes {
  white-space: normal;
  overflow-wrap: anywhere;
}

.empty-state,
.confirm-panel {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.role-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.role-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.role-list__item .badge {
  margin-left: 0;
}

.role-list__period {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.role-list__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.history {
  margin-top: 1rem;
}

.history__summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

/* Addresses */

.detail-grid > #addresses {
  grid-column: 1 / -1;
}

.address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.address-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
}

.address-card--past {
  background: var(--color-surface-muted);
}

.address-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.address-card__title {
  margin: 0;
  font-size: 1rem;
}

.address-card__text {
  display: grid;
  font-style: normal;
  overflow-wrap: anywhere;
}

.address-card .badge {
  margin-left: 0;
}

.plain-list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

/* Contacts */

.detail-grid > #contacts {
  grid-column: 1 / -1;
}

.contact-list {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
}

.contact-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
}

.contact-card--past {
  background: var(--color-surface-muted);
}

.contact-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.contact-card__title {
  margin: 0;
  margin-right: auto;
  font-size: 1rem;
}

.contact-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
}

.contact-card__meta dt {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.contact-card__meta dd {
  margin: 0;
}

.channel-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.channel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow-wrap: anywhere;
}

.channel--past {
  background: var(--color-surface-muted);
}

.channel__kind {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.channel__value {
  font-weight: 600;
}

.channel__label {
  color: var(--color-text-muted);
}

.channel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.contact-card .badge {
  margin-left: 0;
}

/* Tax registrations */

.detail-grid > #tax-registrations {
  grid-column: 1 / -1;
}

.registration-list {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
}

.registration-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
}

.registration-card--past {
  background: var(--color-surface-muted);
}

.registration-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.registration-card__title {
  margin: 0;
  margin-right: auto;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.registration-card .badge {
  margin-left: 0;
}

/* Next action */

.next-action {
  padding: 1.25rem;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.next-action__primary {
  display: grid;
  gap: 0.375rem;
  justify-items: start;
  padding: 1rem;
  border-left: 4px solid var(--color-warning-border);
  border-radius: var(--radius-small);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.next-action__severity {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.next-action__title {
  font-size: 1.125rem;
  font-weight: 700;
}

.next-action__link {
  margin-top: 0.25rem;
}

.next-action__more-title {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

.next-action__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.next-action__item {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
}

.next-action__item--required {
  border-left-color: var(--color-warning-border);
}

.next-action__item--information {
  border-left-color: var(--color-info-border);
}

.next-action__item .next-action__title {
  font-size: 1rem;
}

.next-action__detail {
  color: inherit;
}

/* Forms: sections, grids and help */

.form--wide {
  max-width: 48rem;
}

.form-section {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.form-section__title {
  padding: 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.form-grid {
  display: grid;
  gap: 1rem;
}

.field--group {
  margin: 0;
  padding: 0;
  border: 0;
}

.field__help {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.field__optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

.field__readonly {
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
}

.choice-list--grid {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

input[type="search"],
input[type="number"],
input[type="datetime-local"],
textarea {
  width: 100%;
  min-height: var(--touch-target);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.form-errors__title {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.form-errors__list {
  margin: 0;
  padding-left: 1.25rem;
}

.form-errors a {
  color: inherit;
  font-weight: 600;
}

.duplicate-warning {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--color-warning-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.duplicate-warning a {
  color: inherit;
  font-weight: 700;
}

.duplicate-warning__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.25rem;
}

/* Pagination */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.pagination__status {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Larger screens */

/* Narrow screens: the symbol leads, and the platform name stays available to
   screen readers. The company name truncates instead of overflowing. */
@media (max-width: 39.99rem) {
  .platform-brand__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .app-header .company-identity__name {
    max-width: 8rem;
  }

  .user-chip__text {
    display: none;
  }

  .context-bar__items .context-item:first-child {
    display: none;
  }

  /* On a phone the topbar wraps rather than pushing the page sideways. */
  .app-header__inner {
    flex-wrap: wrap;
  }

  .company-identity__logo {
    max-width: 6rem;
  }

  /* The party table becomes one labelled card per row. */
  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
  }

  .data-table tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .data-table th,
  .data-table td,
  .data-table tbody tr:last-child > * {
    border-bottom: 1px solid var(--color-border);
  }

  .data-table tr > :last-child,
  .data-table tbody tr:last-child > :last-child {
    border-bottom: 0;
  }

  .data-table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 35%) 1fr;
    gap: 0.75rem;
  }

  .data-table td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .search-panel__row {
    flex-direction: column;
  }
}

@media (min-width: 40rem) {
  .public-main {
    align-items: center;
    padding: 2rem;
  }

  .panel {
    padding: 2rem;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .button,
  .choice,
  .panel,
  .status-panel,
  .app-nav,
  .app-sidebar,
  .badge,
  .detail-section,
  .contact-card,
  .registration-card,
  .channel,
  .empty-state,
  .confirm-panel,
  .next-action,
  .search-panel,
  .form-section,
  .duplicate-warning {
    border: 1px solid CanvasText;
  }

  .app-nav__link[aria-current] {
    outline: 2px solid Highlight;
  }
}

/* Pricing: commercial figures and the change trail */

/*
 * A money or quantity column reads as a column of figures, so it is aligned
 * right on a wide screen and tabular so the digits line up. On a narrow screen
 * the data table becomes a stack of labelled rows, where right alignment would
 * separate a figure from its own label, so it is left there.
 */
.numeric {
  font-variant-numeric: tabular-nums;
}

.price-figure {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A figure and its currency or unit are one thing: they never wrap apart. */
.figure {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The plain order tables: spaced columns, figures right-aligned. On a phone a
 * table too wide for the screen scrolls sideways instead of squeezing. */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table th.numeric,
.table td.numeric {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 39.99rem) {
  .table {
    display: block;
    overflow-x: auto;
  }
}

@media (min-width: 40rem) {
  .data-table th.numeric,
  .data-table td.numeric {
    text-align: right;
  }
}

/*
 * The Sales Order workspace. Three deliberate widths rather than one wide table:
 *
 * - phone (below 40rem): everything stacks; figures sit two to a row;
 * - tablet (40rem up): the summary takes three columns, a line's figure groups
 *   four, the supply plan three;
 * - laptop and wider (64rem up): the summary takes four columns with the total
 *   across two, a line's two figure groups sit side by side, the supply plan
 *   shows all six figures in one row.
 *
 * Nothing scrolls sideways at any width; a figure too long for its cell on a
 * phone wraps at the space between currency and amount instead.
 */
.figure-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.figure-card {
  min-width: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
}

.figure-card dt,
.figure-grid dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.figure-card dd {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.figure-card--total {
  grid-column: 1 / -1;
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.figure-card--total dd {
  font-size: 1.375rem;
  font-weight: 700;
}

.order-lines,
.supply-cards {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.order-line,
.supply-card {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.order-line--cancelled {
  opacity: 0.65;
}

.order-line--cancelled .figure {
  text-decoration: line-through;
}

.order-line__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.order-line__product,
.supply-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  min-width: 0;
  margin: 0;
}

.supply-card__title {
  font-size: 1rem;
}

.order-line__number {
  font-weight: 700;
}

.order-line__status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
}

.order-line__groups {
  display: grid;
  gap: 0.75rem;
}

.order-line__group {
  min-width: 0;
  padding: 0.75rem;
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
}

.order-line__group-title {
  margin: 0 0 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
}

.figure-grid > div {
  min-width: 0;
  margin: 0;
}

.figure-grid dd {
  margin: 0.125rem 0 0;
  font-weight: 600;
}

.figure-grid__strong dd {
  font-weight: 700;
}

.figure-grid__warn dd {
  color: var(--color-warning-text);
}

.figure-note {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* A line's actions: one compact row of buttons, each label kept whole. */
.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.button--compact {
  padding: 0.375rem 0.875rem;
  white-space: nowrap;
}

@media (max-width: 39.99rem) {
  .figure-cards .figure,
  .figure-grid .figure {
    white-space: normal;
  }
}

@media (min-width: 40rem) {
  .figure-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .figure-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .figure-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .figure-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .figure-card--total {
    grid-column: span 2;
  }

  .order-line__groups {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  /* Side by side, each group is half the width: two figures to a row. */
  .order-line__groups .figure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .figure-grid--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/*
 * Tax Master: records as cards that stack on a phone and sit two or three to a
 * row on wider screens, and an "Advanced" section that stays closed until it
 * is wanted.
 */
.record-cards {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.record-card {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.record-card > p {
  margin: 0;
}

.record-card__title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.levy-chip {
  display: inline-block;
  margin: 0 0.375rem 0.375rem 0;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
  font-variant-numeric: tabular-nums;
}

.advanced {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.advanced__summary {
  cursor: pointer;
  font-weight: 600;
}

/*
 * The guided tax setup uses the page's width: each tax component is one
 * full-width row, its fields side by side on a laptop and stacked on a phone.
 */
.tax-setup-form .form-section {
  min-width: 0;
}

.component-rows {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.component-row {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.component-row .advanced {
  margin: 0;
}

.component-row__fields,
.component-row__advanced {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.component-row__advanced {
  margin-top: 0.75rem;
}

@media (min-width: 40rem) {
  .component-row__fields {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
  }

  .component-row__advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .component-row__advanced {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.button--danger {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

@media (min-width: 40rem) {
  .record-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .record-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* One "field: before -> after" line per changed value in the history. */
.change-list {
  display: grid;
  gap: 0.25rem;
}

.change-list__field {
  color: var(--color-text-muted);
}

.change-list__field::after {
  content: ": ";
}

/* Adjacent controls in a compact table cell need their own spacing: the cell is
 * not a flex container, so inline-block buttons would otherwise abut. */
.table-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* A product's own name, shown beside its code only when it adds something. */
.product-name {
  overflow-wrap: anywhere;
}

/* The numbered workflow in an empty state. */
.workflow-steps {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.workflow-steps > li {
  padding-left: 0.25rem;
}

/* One product's pricing on the product page: the two sides side by side. */
.pricing-sides {
  display: grid;
  gap: 1rem;
}

@media (min-width: 45rem) {
  .pricing-sides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pricing-side__figure {
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 600;
}


/* -------------------------------------------------------------------------
   Orders
   ---------------------------------------------------------------------- */

/* The one next action. Loud on purpose: the whole workspace is arranged so
   that an operator who reads nothing else still knows what to do. */
.next-action {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.next-action > p + p {
  margin-top: var(--space-3);
}

.next-action--done {
  border-left-color: var(--color-success-border);
}

.next-action__title {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.next-action__text {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

/* Risks, ordered by how much they matter. */
.risks {
  margin: 0;
}

.risk-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.risk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  margin-bottom: var(--space-1);
  background: var(--color-surface);
}

.risk--high { border-left-color: var(--color-error-border); }
.risk--medium { border-left-color: var(--color-warning-border); }
.risk--low { border-left-color: var(--color-border); }

.risk__text { flex: 1 1 20rem; }

/* A figure no part of the system records yet. Deliberately not a zero and
   deliberately not a dash: it says what it means. */
.not-tracked {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.numeric--warn {
  color: var(--color-warning-text);
  font-weight: 600;
}

/* The reconciliation line, written out so it can be checked by eye. */
.reconciliation {
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-subtle);
  border-radius: 4px;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.supply-line {
  margin: 2rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.untracked {
  margin: 0.75rem 0;
  font-size: 0.9375rem;
}

.untracked > summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

.origin-line {
  margin: 0.5rem 0 0;
}

.version {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.row--cancelled {
  opacity: 0.6;
  text-decoration: line-through;
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 2px solid var(--color-border);
}

.timeline__what { margin: 0; font-weight: 600; }
.timeline__who { margin: 0; font-size: 0.875rem; }
.timeline__note { margin: 0.25rem 0 0; font-size: 0.9375rem; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0.75rem 0;
}

.summary-grid > div { margin: 0; }
.summary-grid dt {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.summary-grid dd { margin: 0.125rem 0 0; font-weight: 500; }
.summary-grid__total dd { font-size: 1.125rem; font-weight: 700; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  margin: 1rem 0 1.5rem;
}

.logo-preview {
  width: auto;
  max-width: min(16rem, 100%);
  height: auto;
  max-height: 6rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: #fff;
}

/*
 * The STRALIX commercial document (templates/documents/layout.html).
 *
 * One shell for every document a customer or supplier receives. The sheet is
 * always paper: white with dark ink in either colour scheme, because that is
 * what it will be printed on.
 *
 * Nothing on the sheet may leave it, and nothing scrolls sideways. That is
 * held by construction rather than by clipping:
 *
 * - the sheet is width 100% up to a maximum, border-box, min-width 0, so its
 *   parent grid cannot be stretched by what is inside it;
 * - the line table is table-layout: fixed with percentage columns that add up
 *   to less than the whole, so no cell content can widen the table; the
 *   description takes everything the compact columns leave;
 * - text breaks inside its own box as a last resort (an unbroken code or an
 *   enormous figure wraps inside its cell instead of pushing out);
 * - below 40rem of sheet width (a phone, or an A5 page) the lines become
 *   stacked, labelled blocks instead of a squeezed eight-column table.
 *
 * The sheet is a size container, so the line layout follows the width of the
 * sheet, not of the window. Print uses the same rules: an A4 page is wide
 * enough for the table, an A5 page gets the stacked lines.
 */
.doc-toolbar {
  display: grid;
  gap: 0.75rem;
}

/* Paper and print, above the sheet. Wraps on a narrow screen. */
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.doc-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.paper-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.paper-switch__label {
  color: var(--color-text-muted);
}

.paper-switch__option {
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  text-decoration: none;
}

.paper-switch__option[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-surface);
  font-weight: 600;
}

.doc {
  --doc-ink: #172033;
  --doc-muted: #4a5568;
  --doc-rule: #d5d9e3;
  --doc-accent-soft: #eef1ff;
  container: doc / inline-size;
  box-sizing: border-box;
  width: 100%;
  max-width: 66rem;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: #fff;
  color: var(--doc-ink);
  box-shadow: 0 1px 3px rgb(23 32 51 / 0.08);
  overflow-wrap: break-word;
}

.doc *,
.doc *::before,
.doc *::after {
  box-sizing: border-box;
}

/* Narrower sheets. A new size is one rule here and one entry in config/paper.py. */
.doc--a5 {
  max-width: 40rem;
}

.doc p {
  margin: 0 0 0.25rem;
}

.doc__ref {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

.doc__subtitle {
  margin: 0 0 0.375rem;
  color: var(--doc-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Header: who issues it on one side, what it is on the other. */
.doc__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--doc-brand, var(--doc-ink));
}

.doc__issuer {
  display: flex;
  flex: 1 1 14rem;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

/* Any logo, any shape: scaled down to fit, never stretched. */
.doc__logo {
  flex: 0 0 auto;
  width: auto;
  max-width: min(9rem, 35%);
  height: auto;
  max-height: 4.5rem;
  object-fit: contain;
}

/* The issuer name is the company's identity: its frozen primary colour
   when the document has one, otherwise the document ink. The address and
   registration below it stay in readable ink. */
.doc .doc__issuer-name {
  min-width: 0;
  margin: 0 0 0.125rem;
  color: var(--doc-identity, var(--doc-ink));
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}

.doc__heading {
  flex: 0 1 17rem;
  min-width: 0;
  margin-left: auto;
}

/* The document title is a label for the kind of document, set apart from
   the issuer: spaced capitals over a short accent rule, not a second name. */
.doc__title {
  display: inline-block;
  margin: 0 0 0.625rem;
  padding-bottom: 0.25rem;
  border-bottom: 3px solid var(--doc-brand, var(--doc-ink));
  color: var(--doc-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Who made a document, said quietly under its title (a recipient-created
   purchase document). Informative, never a stamp. */
.doc__marking {
  margin: -0.375rem 0 0.5rem;
  color: var(--doc-muted, var(--doc-ink));
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Customer, delivery, references and commercial terms: a compact grid,
   two by two on a sheet wide enough, stacked on a narrow one. */
.doc__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 2rem;
  margin: 0.875rem 0 1rem;
}

.doc-block,
.doc-party {
  min-width: 0;
}

.doc-party__name {
  font-weight: 600;
}

.doc-party__detail,
.doc-address {
  font-size: 0.875rem;
}

.doc-party__detail {
  color: var(--doc-muted);
}

.doc .doc-address {
  margin-bottom: 0.125rem;
  line-height: 1.4;
}

/* The lines. */

.doc-lines {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.doc-lines th,
.doc-lines td {
  padding: 0.375rem 0.375rem;
  border-bottom: 1px solid var(--doc-rule);
  text-align: left;
  vertical-align: top;
}

.doc-lines thead th {
  border-bottom: 2px solid var(--doc-ink);
  color: var(--doc-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.doc-lines tr {
  break-inside: avoid;
}

.doc-lines abbr {
  text-decoration: none;
}

/* Compact columns; doc-col--item is given no width and takes the rest. */
col.doc-col--line { width: 4%; }
col.doc-col--class { width: 8%; }
col.doc-col--qty { width: 10%; }
col.doc-col--price { width: 10%; }
col.doc-col--amount { width: 10%; }
col.doc-col--tax { width: 16%; }
col.doc-col--total { width: 11%; }

.doc-num {
  font-variant-numeric: tabular-nums;
}

.doc-lines .doc-num {
  text-align: right;
}

/* A figure wider than its column wraps inside the cell, never past it. */
.doc-lines td.doc-num {
  overflow-wrap: anywhere;
}

.doc-num--strong {
  font-weight: 700;
}

.doc-item__name {
  display: block;
  font-weight: 600;
}

.doc-item__code,
.doc-item__classification {
  display: block;
  color: var(--doc-muted);
  font-size: 0.8125rem;
}

.doc-levy {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-size: 0.8125rem;
}

.doc-levy__name {
  min-width: 0;
}

.doc-levy__amount {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* A phone-width sheet: the information blocks stack too. */
@container doc (max-width: 24rem) {
  .doc .doc__info {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A narrow sheet: each line is a block of labelled figures. */
@container doc (max-width: 40rem) {
  .doc .doc__closing {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-lines,
  .doc-lines tbody,
  .doc-lines td {
    display: block;
  }

  .doc-lines thead,
  .doc-lines colgroup {
    display: none;
  }

  .doc-lines tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--doc-rule);
  }

  .doc-lines tbody tr:first-child {
    border-top: 2px solid var(--doc-ink);
  }

  .doc-lines td {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .doc-lines td::before {
    content: attr(data-label);
    display: block;
    color: var(--doc-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .doc-lines td.doc-col--line,
  .doc-lines td.doc-col--item,
  .doc-lines td.doc-col--tax,
  .doc-lines td.doc-num--strong {
    grid-column: 1 / -1;
  }

  .doc-lines td.doc-col--line::before {
    display: inline;
    content: attr(data-label) " ";
  }

  .doc-lines .doc-num {
    text-align: left;
  }

  .doc-lines td.doc-num--strong {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.375rem;
    border-top: 1px dashed var(--doc-rule);
  }
}

/* Totals: a compact block at the right, the grand total unmistakable. */
.doc__totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
  break-inside: avoid;
}

.doc-totals {
  width: min(100%, 24rem);
  margin: 0;
}

.doc-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.1875rem 0;
}

.doc-totals dt {
  min-width: 0;
  margin: 0;
  color: var(--doc-muted);
}

.doc-totals dd {
  min-width: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.doc-totals__subtotal {
  border-top: 1px solid var(--doc-rule);
}

.doc-totals__subtotal dt {
  color: var(--doc-ink);
  font-weight: 600;
}

.doc-totals__levy dt {
  padding-left: 0.75rem;
}

.doc-totals > .doc-totals__grand {
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-top: 2px solid var(--doc-ink);
  background: var(--doc-accent-soft);
  font-size: 1.125rem;
  font-weight: 700;
}

.doc-totals__grand dt {
  color: var(--doc-ink);
}

.doc__notes {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
}

.doc__note-label {
  font-weight: 600;
}

.doc__note,
.doc-party {
  break-inside: avoid;
}

.doc__issuer-text {
  min-width: 0;
}

.doc .doc__issuer-detail {
  margin: 0;
  color: var(--doc-muted);
  font-size: 0.8125rem;
}

/* The document's own number, date and version, under its title. */
.doc-pairs--identity {
  justify-content: start;
}

.doc-pairs--identity dd {
  font-weight: 600;
}
.doc__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem 2rem;
  align-items: start;
  margin-top: 0.875rem;
}

.doc__closing {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(min(100%, 12rem), 1fr);
  gap: 1rem 2rem;
  align-items: end;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--doc-rule);
}

.doc__closing > :only-child {
  grid-column: 1 / -1;
}

.doc__block {
  min-width: 0;
  break-inside: avoid;
}

.doc-pairs {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.125rem 0.75rem;
  margin: 0;
  font-size: 0.8125rem;
}

.doc-pairs > div {
  display: contents;
}

.doc-pairs dt {
  color: var(--doc-muted);
}

.doc-pairs dd {
  min-width: 0;
  margin: 0;
}

.doc-signatory {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 5rem;
  text-align: right;
}

.doc .doc-signatory__for {
  font-weight: 600;
}

.doc .doc-signatory__line {
  min-width: min(100%, 14rem);
  margin: 0;
  padding-top: 0.375rem;
  border-top: 1px solid var(--doc-ink);
  font-size: 0.875rem;
}

.doc-terms {
  min-width: 0;
}

.doc-terms__clauses {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.doc-terms__clauses li {
  margin-bottom: 0.125rem;
  break-inside: avoid;
}

@media print {
  .no-print,
  .app-nav,
  .context-bar,
  .page-header__actions,
  .messages { display: none !important; }

  /* A document page prints the sheet and nothing else. */
  .layout-document .app-header,
  .layout-document .skip-link,
  .layout-document .notice { display: none !important; }

  .layout-document,
  .layout-document .app-shell,
  .layout-document .app-main {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .doc {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 9.5pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .doc-lines { font-size: 8.5pt; }
  .doc-terms__clauses { font-size: 7.5pt; }
  .doc__header { break-after: avoid; }

  /* The sheet is the printable width of the paper and never more: no
     screen-height minimum (it pushed a short document onto a second sheet),
     no centring, nothing wider than the page. Long words, figures and tax
     labels wrap inside their own box instead of running past the edge. */
  html,
  body,
  .layout-document .app-frame,
  .layout-document .app-body,
  .layout-document .app-main {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .doc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    line-height: 1.3;
  }

  .doc img,
  .doc svg { max-width: 100%; }

  .doc__info > *,
  .doc__summary > *,
  .doc__closing > *,
  .doc-pairs dt,
  .doc-pairs dd,
  .doc-totals dt,
  .doc-totals dd,
  .doc-levy__name { min-width: 0; overflow-wrap: anywhere; }

  .doc-totals { width: 100%; max-width: 22rem; }

  /* Column headings break between words, not inside them. */
  .doc-lines thead th { overflow-wrap: normal; letter-spacing: 0; font-size: 6.5pt; }

  /* A little tighter, so an invoice of about eight lines is one sheet. */
  .doc__header { gap: 0.5rem 1.5rem; padding-bottom: 0.5rem; }
  .doc__logo { max-height: 3.5rem; }
  .doc__title { margin-bottom: 0.375rem; }
  .doc__info { gap: 0.375rem 1.5rem; margin: 0.5rem 0 0.625rem; }
  .doc-lines th,
  .doc-lines td { padding: 0.25rem 0.3rem; }
  /* Room for each levy on one line ("Central tax @ 2.50%  0.63"): the tax column takes some of the description's width; a longer label still wraps. */
  col.doc-col--tax { width: 22%; }
  .doc-levy { font-size: 7.5pt; }
  .doc-levy__name { overflow-wrap: normal; }
  .doc-item__code,
  .doc-item__classification { font-size: 7.5pt; }
  .doc__summary { gap: 0.5rem 1.5rem; margin-top: 0.5rem; }
  .doc-totals > div { padding: 0.0625rem 0; }
  .doc__subtitle { margin-bottom: 0.2rem; }
  .doc-pairs { row-gap: 0; }
  .doc-totals > .doc-totals__grand { padding: 0.3rem 0.5rem; font-size: 10.5pt; }
  .doc__closing { gap: 0.5rem 1.5rem; margin-top: 0.5rem; padding-top: 0.5rem; }
  .doc-signatory { min-height: 3.5rem; }
  .doc .doc__verify-code svg { width: 72px; height: 72px; }

  /* Totals, the signature and the QR stay together on one sheet. */
  .doc__summary,
  .doc__closing,
  .doc__sign-row,
  .doc__verify { break-inside: avoid; page-break-inside: avoid; }
  .doc__summary + .doc__summary,
  .doc__closing { break-before: avoid; page-break-before: avoid; }
}

@media (max-width: 40rem) {
  .risk { flex-direction: column; }
  .reconciliation { font-size: 0.875rem; }
}

/* --- Order journey ------------------------------------------------------
   Where an order has got to, stage by stage. Done, current, still to do, and
   stages the platform cannot record yet each read differently, and the
   current stage is the one that stands out. The strip wraps rather than
   scrolling sideways. */

.page-header .identity-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

.identity-facts dt {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.identity-facts dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.journey {
  margin: 0 0 1.25rem;
}

.journey__stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey__stage {
  display: grid;
  gap: 0.125rem;
  min-width: 8.5rem;
  flex: 1 1 8.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-top-width: 4px;
  border-radius: var(--radius-small);
  background: var(--color-surface);
}

.journey__label {
  font-weight: 700;
  font-size: 0.9375rem;
}

.journey__note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.journey__stage--done {
  border-top-color: var(--color-success-border);
}

.journey__stage--done .journey__label::before {
  content: "\2713\00a0";
  color: var(--color-success-text);
}

.journey__stage--current {
  border-color: var(--color-primary);
  border-top-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.journey__stage--todo {
  border-top-color: var(--color-border-strong);
}

.journey__stage--future,
.journey__stage--not_needed {
  border-style: dashed;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

/* --- Fulfilment on the order -------------------------------------------- */

.fulfilment__figures {
  margin-bottom: 0.75rem;
}

.figure-card--warn {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.fulfilment__sources {
  display: grid;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.fulfilment__sources li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.fulfilment__source {
  font-weight: 600;
}

.fulfilment__choices {
  padding: 1rem;
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-small);
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.fulfilment__question {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.order-lines-fold > summary,
.history-fold > summary {
  cursor: pointer;
  font-weight: 600;
}

.history-fold > summary .section-title {
  display: inline;
}

/* =========================================================================
   Commercial component standard (HANDOVER-UX-1)

   The shared pieces every screen composes: cards and sections, forms,
   empty states, the Home summary and work queue, and the Masters landing.
   New screens (supplier orders, receipts, invoices, dispatch) use these and
   add nothing of their own unless the pattern is genuinely new.
   ========================================================================= */

/* Sections and cards: one surface, one radius, one padding. */
.detail-section,
.empty-state,
.confirm-panel,
.form-section,
.search-panel,
.status-panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.section-header,
.detail-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.section-header .section-title,
.detail-section__header .section-title {
  margin-bottom: 0;
}

.detail-list dt,
.summary-grid dt,
.figure-grid dt,
.figure-card dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Forms: a purpose, logical sections, labels above fields, help only where
   it helps, errors beside the field, one primary action. */
.form-section__title {
  padding: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.field__help {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.field__optional {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.field__error {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

textarea {
  font-size: var(--text-base);
}

.button-row {
  gap: var(--space-3);
}

.button--compact {
  min-height: var(--control-height-compact);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-ui);
  white-space: nowrap;
}

.button--danger {
  border-color: var(--color-error-border);
  background: var(--color-surface);
  color: var(--color-error-text);
}

.button--danger:hover {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

/* Notices: calmer, rounded, the colour on the edge. */
.notice {
  border-radius: var(--radius-small);
  font-size: var(--text-base);
}

/* Empty states: one short sentence, and the action if this user may take it. */
.empty-state {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  color: var(--color-text);
}

.empty-state--calm {
  border-style: dashed;
  box-shadow: none;
  background: var(--color-surface-subtle);
}

/* Home */
.home-header {
  display: grid;
  gap: var(--space-1);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.stat-card__link,
.stat-card > :not(a) {
  color: inherit;
}

.stat-card__link,
.stat-card:not(:has(a)) {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
}

.stat-card__link:hover {
  color: inherit;
  background: var(--color-surface-subtle);
  border-radius: var(--radius);
}

.stat-card__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.stat-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-card--attention .stat-card__value {
  color: var(--color-primary);
}

.stat-card__hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Logistics movements: six compact columns that fit a 1366px laptop. Long
   warehouse or supplier names wrap within their column; the action column
   never wraps its button away or clips it. */
.movements-table {
  table-layout: auto;
}

.movements-table__detail {
  white-space: normal;
}

.movements-table__source {
  max-width: 14rem;
  overflow-wrap: anywhere;
}

.movements-table__actions {
  white-space: nowrap;
  width: 1%;
}

.movements-table__actions .row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Report summary cards (the commercial report's management summary): compact,
   numbers first, restrained colour for a verified gain or loss. */
.report-summary {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Six headline figures sit three to a row on a laptop or wider, two on a
   tablet, one on a phone: two balanced rows, never five and a stray one. */
.report-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .report-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .report-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.report-card {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.report-card__label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.report-card__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.report-card__note {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.report-card--positive .report-card__value,
.cell--positive {
  color: #1d6b3a;
}

.report-card--negative .report-card__value,
.cell--negative {
  color: #a3261b;
}

.cell--muted {
  color: var(--color-text-muted);
}

/* A short report introduction; the detail sits behind "How this report works". */
.report-intro {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  max-width: 60rem;
}

.report-notes {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.report-notes > summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.report-notes > summary:focus-visible,
.cell-disclosure > summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.report-notes ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
}

/* A table cell that opens to its explanation: the short label sets the row
   height; the paragraph only appears when asked for. */
.cell--disclosure {
  min-width: 14rem;
}

.cell-disclosure > summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
}

.cell-disclosure__body {
  margin-top: var(--space-2);
  max-width: 28rem;
  white-space: normal;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.cell-disclosure__body p {
  margin: 0 0 var(--space-1);
}

/* The reporting centre as a compact directory: sections flow into columns,
   so a section with one report takes one report's height. */
.report-search {
  margin-bottom: var(--space-4);
}

.report-directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  gap: var(--space-4);
}

.report-directory__section {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.report-directory__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-directory__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-directory__item {
  display: grid;
  gap: 1px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
}

.report-directory__item--featured {
  background: var(--color-primary-soft);
}

.report-directory__link {
  font-weight: var(--weight-semibold);
}

.report-directory__question,
.report-directory__formats {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Report tables: tighter cells, amounts never wrapped, the status as a
   compact badge and the Details action kept clear of the edge. */
.report-table th,
.report-table td {
  padding: 0.5rem 0.625rem;
}

.report-table td.numeric,
.report-table th.numeric {
  white-space: nowrap;
}

.report-table .report-status {
  white-space: nowrap;
}

.report-table td:last-child,
.report-table th:last-child {
  padding-right: var(--space-4);
}

.report-table--commercial td:first-child a {
  white-space: nowrap;
}

/* A quiet heading over a group of figures, so the order's need and what is
   on supplier POs read as two things. */
.facts-heading {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Stock movement history: one line per movement; long reasons open from the row. */
.movement-history td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.movement-history__kind {
  min-width: 10rem;
}

.movement-history__reference,
.movement-history__who {
  overflow-wrap: anywhere;
}

/* Contextual Back: one control, above every page heading, in the same place. */
.contextual-back {
  margin: 0 0 var(--space-2);
}

.contextual-back__link {
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}

.contextual-back__link:hover,
.contextual-back__link:focus-visible {
  text-decoration: underline;
}

/* With a contextual Back shown, the page's module link is a plain breadcrumb. */
.back-link--breadcrumb {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular, 400);
}

/* Reports printed on A4 turned sideways use the wider sheet. */
.doc--a4-landscape {
  max-width: 92rem;
}

/* Home: money position, the order journey and the attention table. */

.home-section {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.stat-card__value--money {
  font-size: var(--text-xl);
  overflow-wrap: anywhere;
}

.journey-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.journey-card--waiting {
  border-color: var(--color-border-strong);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.journey-card__link {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
}

.journey-card__link:hover {
  background: var(--color-surface-subtle);
  border-radius: var(--radius);
}

.journey-card__count {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.journey-card--waiting .journey-card__count {
  color: var(--color-primary);
}

.journey-card__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.journey-card__hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.next-actions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.next-actions__count {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
  font-weight: var(--weight-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.home-links {
  margin-top: var(--space-5);
}

.queue {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.queue__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.queue__item:last-child {
  border-bottom: 0;
}

.queue__main {
  display: grid;
  flex: 1 1 16rem;
  min-width: 0;
}

.queue__who {
  font-weight: var(--weight-semibold);
}

.queue__ref {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.queue__item .badge {
  margin-left: 0;
}

.queue__action {
  margin-left: auto;
}

/* Masters landing */
.master-groups {
  display: grid;
  gap: var(--space-6);
}

.master-group > .section-title {
  margin-bottom: var(--space-2);
}

.master-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.master-entry {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.master-entry:last-child {
  border-bottom: 0;
}

.master-entry__text {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.master-entry__count {
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

@media (min-width: 64rem) {
  .master-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Sign-in, in the same family. */
.layout-public .panel {
  padding: var(--space-8);
  box-shadow: var(--shadow-raised);
}

.layout-public--sign-in .page-title {
  font-size: var(--text-xl);
}

.layout-public--sign-in .lead {
  font-size: var(--text-base);
}

@media (max-width: 39.99rem) {
  .layout-public .panel {
    padding: var(--space-5);
  }

  .master-entry {
    flex-wrap: wrap;
  }
}

@media print {
  .app-sidebar,
  .app-header,
  .app-scrim,
  .app-nav-toggle {
    display: none !important;
  }

  .app-frame {
    display: block;
  }
}

/* =========================================================================
   Customer order capture (HANDOVER-UX-2): shared patterns later reused by
   supplier orders, receipts and invoices.
   ========================================================================= */

/* Breadcrumbs: logical parents, never browser history. On a narrow screen
   only the nearest parent is shown, as Back. */
.breadcrumbs {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
}

.breadcrumbs__list li + li::before {
  content: "/";
  margin-right: var(--space-1);
  color: var(--color-border-strong);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.breadcrumbs__back {
  display: none;
}

@media (max-width: 39.99rem) {
  .breadcrumbs__list {
    display: none;
  }

  .breadcrumbs__back {
    display: inline-flex;
    min-height: var(--touch-target);
    align-items: center;
  }
}

/* The list toolbar: search, filter, clear, export. */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.list-toolbar__search {
  display: flex;
  gap: var(--space-2);
  flex: 1 1 22rem;
  max-width: 34rem;
}

.list-toolbar__search input {
  flex: 1;
  min-width: 0;
}

.list-toolbar__filters > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}

.list-toolbar__filters > summary::-webkit-details-marker {
  display: none;
}

.list-toolbar__filters[open] {
  flex-basis: 100%;
  order: 3;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.list-toolbar__filters[open] > summary {
  margin-bottom: var(--space-3);
}

.list-toolbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.list-toolbar__end {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* New customer order: two clear ways in. */
.entry-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  max-width: 48rem;
}

.entry-choice {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.entry-choice:hover {
  border-color: var(--color-primary);
}

.entry-choice--recommended {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow);
}

.entry-choice__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.entry-choice__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Review: what needs a person, then the original beside the form. */
.review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.review-summary__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  font-weight: var(--weight-semibold);
}

.review-summary__count--ok { color: var(--color-success-text); }
.review-summary__count--review { color: var(--color-warning-text); }
.review-summary__count--missing { color: var(--color-error-text); }

.field-flag {
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.field-flag--inferred { background: var(--color-info-bg); color: var(--color-info-text); }
.field-flag--review { background: var(--color-warning-bg); color: var(--color-warning-text); }
.field-flag--missing { background: var(--color-error-bg); color: var(--color-error-text); }

.capture-layout {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.capture-layout__main {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.capture-original {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-3);
}

.capture-original__summary {
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.original-pane__frame {
  width: 100%;
  height: 70vh;
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
}

.original-pane__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

@media (min-width: 80rem) {
  .capture-layout--with-original {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .capture-layout--with-original .capture-original {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
  }
}

/* Manual entry: compact numbered lines. */
.capture-lines {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.capture-line {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.capture-line__number {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  margin-top: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.capture-line__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

/* New lines on the review of a customer's order. */
.added-lines {
  margin-top: var(--space-4);
}

/* A removed line, and the tick its Remove line button stands in for. */
.capture-line[hidden],
.capture-line .field[hidden] {
  display: none;
}

.capture-line__fields > .button {
  align-self: end;
  justify-self: start;
}

.added-line__filter {
  width: 100%;
  margin-bottom: var(--space-1);
}

.added-line__amount {
  display: block;
  padding-top: var(--space-2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.choice--disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.sent-choice .choice {
  margin-right: var(--space-4);
}

.rate-choice {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-1);
}

/* The record's views: Details, Original, Preview, History. */
.record-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.record-tabs__tab {
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.record-tabs__tab:hover {
  color: var(--color-text);
}

.record-tabs__tab[aria-current="page"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.original-pane + .original-pane {
  margin-top: var(--space-6);
}

.page-header .record-tabs {
  border-bottom: 0;
  margin-bottom: calc(-1 * var(--space-4) - 1px);
}

/* A fieldset's legend sits inside its card, not on the border. */
fieldset.form-section > legend.form-section__title {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-3);
}

fieldset.form-section > legend.form-section__title + * {
  clear: both;
}

/* =========================================================================
   Order workspace and lists (HANDOVER-UX-3): denser, desktop-first order
   surfaces. Header, journey and next action stay compact so the content of
   a tab starts within the first screen.
   ========================================================================= */

.page-header--compact {
  align-items: center;
  padding-bottom: var(--space-3);
}

/* A small menu of secondary actions: More, Order actions. */
.action-menu {
  position: relative;
}

.action-menu > summary {
  list-style: none;
}

.action-menu > summary::-webkit-details-marker {
  display: none;
}

.action-menu__panel {
  position: absolute;
  right: 0;
  z-index: 15;
  display: grid;
  min-width: 14rem;
  margin-top: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.action-menu__panel a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.action-menu__panel a:hover {
  background: var(--color-surface-muted);
}

.action-menu__panel .action-menu__danger {
  color: var(--color-error-text);
}

/* Facts: label over value, several to a row. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: var(--space-3) 0 0;
}

.facts dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.facts--figures dd {
  font-variant-numeric: tabular-nums;
}

.figure--strong {
  font-weight: var(--weight-bold);
}

/* Dense commercial tables. */
.data-table--dense th,
.data-table--dense td {
  padding: var(--space-2) var(--space-3);
}

.data-table--dense .table-actions a {
  font-size: var(--text-sm);
}

/* A money statement: labels left, figures right, total ruled. */
.money-table {
  width: 100%;
  max-width: 30rem;
  border-collapse: collapse;
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.money-table th {
  padding: var(--space-1) 0;
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  text-align: left;
}

.money-table td {
  padding: var(--space-1) 0;
  text-align: right;
}

.money-table__levy th {
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}

.money-table__total th,
.money-table__total td {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

/* A list of documents with their actions. */
.doc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.doc-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.doc-list__item:last-child {
  border-bottom: 0;
}

.doc-list__name {
  font-weight: var(--weight-semibold);
}

.doc-list__item .badge {
  margin-left: 0;
}

.doc-list__actions {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
  font-size: var(--text-sm);
}

/* =========================================================================
   Commercial system (COMMERCIAL-UI-1). Frozen: every later module composes
   these pieces and adds no size or colour of its own.

   Type, from the tokens at the top of this file:
     page title          --text-xl   22px, semibold
     section title       --text-lg   18px, semibold
     subsection title    --text-base 15px, semibold
     body                --text-base 15px
     tables, buttons,
     controls, tabs      --text-ui   14px
     meta and secondary  --text-sm   13px
     table headings,
     field labels        --text-xs   12px, semibold
   Importance is shown by weight, position and colour, never by a larger
   size. Identifiers stay whole and tabular; figures are tabular.

   Space: 8px between related things, 12-16px between groups, 20-24px
   between sections. Panels: 1px border, 6px radius, no shadow on working
   surfaces. One primary button per working area.
   ========================================================================= */

.page-title {
  font-weight: var(--weight-semibold);
}

.subsection-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

/* An identifier (an order, a PO, a product code) is read whole: never
   broken at a hyphen or a slash, and no louder than the text around it. */
.ident {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

/* A plain statement that nothing has been recorded yet. */
.empty-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Popovers: a filter panel or a column list under its own control. */
.popover {
  position: relative;
}

.popover > summary {
  list-style: none;
}

.popover > summary::-webkit-details-marker {
  display: none;
}

.popover__panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 25;
  min-width: 15rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  line-height: 1.25rem;
}

/* --- The list toolbar: search, Filter, Columns, Export, on one row ------- */

.list-toolbar--single {
  align-items: center;
  gap: var(--space-2);
}

.list-toolbar--single .list-toolbar__search {
  flex: 1 1 18rem;
  max-width: 28rem;
}

.list-toolbar--single input[type="search"],
.list-toolbar--single input[type="text"] {
  min-height: var(--control-height-compact);
  padding-block: 0;
  font-size: var(--text-ui);
}

.list-toolbar__push {
  margin-left: auto;
}

/* Stated with .popover so it outranks the older stacked filter panel. */
.list-toolbar__filters.popover > summary {
  min-height: var(--control-height-compact);
  padding: var(--space-1) var(--space-3);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-small);
  font-size: var(--text-ui);
}

.list-toolbar__filters.popover[open] {
  flex-basis: auto;
  order: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.list-toolbar__filters.popover[open] > summary {
  margin-bottom: 0;
}

.list-toolbar__filters[data-active] > summary {
  border-color: var(--color-primary);
}

.list-toolbar__filters .popover__panel {
  width: min(32rem, calc(100vw - 2rem));
}

.list-toolbar__filters .list-toolbar__grid {
  gap: var(--space-3);
}

/* --- Summary strip: how much work there is, in one quiet line ----------- */

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.summary-strip__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.summary-strip__item:last-child {
  border-right: 0;
}

button.summary-strip__item {
  margin: 0;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

a.summary-strip__item:hover,
button.summary-strip__item:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.summary-strip__item[aria-current="true"] {
  color: var(--color-text);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.summary-strip__figure {
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.summary-strip__item--attention .summary-strip__figure {
  color: var(--color-warning-text);
}

/* --- Columns: which columns a list shows -------------------------------- */

.column-chooser__panel {
  right: 0;
  left: auto;
  min-width: 14rem;
}

.column-chooser__list {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.column-chooser__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
  font-size: var(--text-ui);
  cursor: pointer;
}

.column-chooser__option:hover {
  background: var(--color-surface-muted);
}

.column-chooser__option:has(input:disabled) {
  color: var(--color-text-muted);
  cursor: default;
}

/* --- The commercial data table ------------------------------------------ */

.data-table [hidden] {
  display: none !important;
}

.data-table .code,
.data-table .ident {
  overflow-wrap: normal;
  white-space: nowrap;
}

.data-table a.ident {
  text-decoration: none;
}

.data-table a.ident:hover {
  text-decoration: underline;
}

.data-table--commercial {
  font-size: var(--text-ui);
}

.data-table--commercial th,
.data-table--commercial td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

.data-table--commercial thead th {
  padding-block: 0.4375rem;
  font-size: 0.6875rem;
}

.data-table--commercial td.numeric {
  white-space: nowrap;
}

.data-table--commercial .data-table__primary {
  font-weight: var(--weight-regular);
  white-space: nowrap;
}

.data-table--commercial .data-table__secondary {
  font-size: var(--text-xs);
  white-space: normal;
}

.data-table--commercial tbody tr:focus-within > * {
  background: var(--color-surface-subtle);
}

.data-table--commercial .badge {
  margin-left: 0;
}

/* A closed record stays readable: muted, never struck through. */
.row--muted > * {
  color: var(--color-text-muted);
}

.row--muted .data-table__primary a {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.numeric--total {
  font-weight: var(--weight-semibold);
}

.col-index {
  width: 2.5rem;
  color: var(--color-text-muted);
}

.col-product {
  min-width: 11rem;
}

.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.row-actions {
  display: inline-flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.row-actions a {
  text-decoration: none;
}

.row-actions a:hover {
  text-decoration: underline;
}

.row-actions .row-actions__danger {
  color: var(--color-error-text);
}

.col-next {
  min-width: 15rem;
}

.next-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.next-cell__text--attention {
  color: var(--color-warning-text);
  font-weight: var(--weight-medium);
}

/* Stated with the table so it outranks a secondary line's wrapping. */
.data-table .tax-summary {
  cursor: help;
  white-space: nowrap;
}

/* --- The order console --------------------------------------------------- */

.order-command {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* One identity row: back, number, status, customer, their PO, value, and
   Actions at the end. */
.order-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  min-width: 0;
}

.order-header__back {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.order-header__back:hover {
  color: var(--color-primary);
}

.order-header__number {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-header .badge {
  margin-left: 0;
}

.order-header__customer {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.order-header__ref {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.order-header__customer:hover,
.order-header__ref:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.order-header__value {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-header__actions {
  margin-left: auto;
}

/* The journey: one thin line of stages joined by a rule. */
.journey--line {
  margin: 0;
}

.journey--line .journey__stages {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  padding: 0.3125rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.journey--line .journey__stage {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
}

.journey--line .journey__stage + .journey__stage::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  margin: 0 var(--space-2);
  background: var(--color-border-strong);
}

.journey--line .journey__label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.journey--line .journey__label::before {
  content: none;
}

.journey--line .journey__mark {
  font-size: var(--text-xs);
  line-height: 1;
}

.journey--line .journey__stage--done {
  color: var(--color-success-text);
}

.journey--line .journey__stage--current {
  color: var(--color-primary);
}

/* Grouped figures in one section (the Finance tab's three money views, a
   proforma's position): a little air above each group's heading. */
.detail-section .facts + .subsection-title,
.pi-position .facts + .meta,
.pi-position {
  margin-top: var(--space-3);
}

.pi-position {
  margin-bottom: var(--space-4);
}

.journey--line .journey__stage--todo {
  color: var(--color-text);
}

/* Started, not finished (a proforma part paid): the half mark says it, the
   colour only repeats it. */
.journey--line .journey__stage--progress {
  color: var(--color-warning-text);
}

.journey--line .journey__stage--future,
.journey--line .journey__stage--not_needed {
  opacity: 0.75;
}

/* The next action: one band, and at most one thin note under it. */
.next-action--line {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  box-shadow: none;
}

.next-action--line.next-action--done {
  border-left-color: var(--color-success-border);
}

.next-action__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
}

.next-action--line .next-action__title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.next-action--line .next-action__text {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.next-action__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
}

.next-action__facts > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.next-action__facts > div + div::before {
  content: "·";
  margin-right: var(--space-1);
  color: var(--color-text-muted);
}

.next-action__facts dt {
  color: var(--color-text-muted);
}

.next-action__facts dd {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.next-action__button {
  margin-left: auto;
}

.next-action__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.next-action__note-text {
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border);
}

.next-action__note-link {
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.next-action__more > summary {
  cursor: pointer;
}

.next-action__also {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.next-action__also-heading {
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.next-action__also-item {
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
}

.next-action__also-item--high {
  border-left-color: var(--color-error-border);
}

.next-action__also-item--medium {
  border-left-color: var(--color-warning-border);
}

/* Tabs: light, one line, scrolling inside themselves if they must. */
.order-tabs {
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.order-tabs .record-tabs__tab {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.order-tabs .record-tabs__tab[aria-current="page"] {
  font-weight: var(--weight-semibold);
}

.order-tabs .record-tabs__tab:focus-visible {
  outline-offset: -3px;
}

/* The open tab: the work region. */
.order-tab {
  min-width: 0;
}

.order-tab:focus {
  outline: none;
}

.order-tab__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.order-tab.is-loading {
  opacity: 0.55;
  transition: opacity 120ms ease 120ms;
}

.order-tab .detail-section {
  padding: var(--space-4);
  box-shadow: none;
}

.order-tab .detail-section .card-title {
  font-size: var(--text-base);
}

.order-tab .section-header {
  margin-bottom: var(--space-2);
}

.facts--key dd {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.supply-choices {
  margin-top: var(--space-3);
  gap: var(--space-2);
}

.doc-list__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-ui);
}

.timeline--dense .timeline__item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

/* Overview: three columns of reference in one surface. */
.overview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3) var(--space-8);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.overview-col {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  align-content: start;
}

.overview-col > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-ui);
}

.overview-col dt {
  color: var(--color-text-muted);
}

.overview-col dd {
  margin: 0;
  text-align: right;
}

.overview-col--figures dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overview-col > .overview-col__head {
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.overview-col__head dt {
  align-self: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.overview-col__head dd {
  font-weight: var(--weight-semibold);
}

/* The console. On a laptop or desktop the top bar and the order's command
   area stay where they are and the open tab is the one region that scrolls,
   its scrollbar at the window's edge. A narrow or short screen scrolls the
   page as usual. */
@media (min-width: 64rem) and (min-height: 36rem) {
  .layout-console {
    --console-gutter: max(var(--space-6), calc((100vw - var(--sidebar-width) - var(--content-width)) / 2));
  }

  .layout-console .app-frame {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .layout-console .app-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .layout-console .app-header {
    flex: none;
    position: relative;
  }

  .layout-console .app-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: var(--space-4) var(--console-gutter) 0;
  }

  .layout-console .app-main > * {
    flex: none;
  }

  .layout-console .app-main > .order-tab {
    flex: 1 1 auto;
    min-height: 0;
    margin-inline: calc(-1 * var(--console-gutter));
    padding: 0 var(--console-gutter) var(--space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* Commercial position: order, customer, supplier and contribution side by side,
   with the coverage that qualifies the contribution underneath. */
.commercial {
  margin-top: var(--space-4);
}

.overview-summary--commercial {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3) var(--space-6);
}

.overview-summary--commercial .overview-col {
  min-width: 0;
}

.commercial__foot {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-ui);
}

.commercial__foot p {
  margin: 0;
}

.commercial__foot--plain {
  margin: var(--space-2) 0 var(--space-3);
}

.commercial__intro {
  margin: 0 0 var(--space-2);
}

.commercial__warn {
  color: var(--color-warning-text);
  font-weight: 600;
}

.numeric--negative {
  color: var(--color-error-text);
  font-weight: 600;
}

.evidence-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-ui);
}

/* Ledgers: one filter bar, a scope line that says what is shown (and still
   says it on paper), the period's balances, then the entries. */
.ledger-filter {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.ledger-filter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: var(--space-2) var(--space-3);
}

.ledger-filter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.ledger-filter__actions p {
  margin: 0;
}

.ledger-scope {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0 0 var(--space-3);
  font-size: var(--text-ui);
}

.ledger-scope > div {
  display: flex;
  gap: var(--space-2);
}

.ledger-scope dt {
  color: var(--color-text-muted);
}

.ledger-scope dd {
  margin: 0;
  font-weight: 600;
}

.ledger-summary {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.ledger-summary p {
  margin: 0;
}

.ledger-summary__figures,
.ledger-summary__position {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.ledger-summary__position {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-ui);
}

.ledger-summary dt {
  color: var(--color-text-muted);
  font-size: var(--text-ui);
}

.ledger-summary dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.ledger-summary__closing dd {
  font-weight: 700;
}

/* Ledger rows stay compact; a long bank or cheque reference wraps inside its
   own column instead of widening the whole statement. */
.ledger-table th,
.ledger-table td {
  padding: 0.5rem 0.625rem;
}

.ledger-table__reference {
  max-width: 12rem;
  overflow-wrap: anywhere;
}

.ledger-table__edge {
  background: var(--color-surface-muted, var(--color-surface));
  font-weight: 600;
}

.ledger-table__edge th {
  text-align: left;
}

.ledger-table__closing td,
.ledger-table__closing th {
  border-top: 2px solid var(--color-border);
}

.ledger-table__settlement td {
  color: var(--color-text-muted);
  font-style: italic;
}

.ledger-direct {
  margin-top: var(--space-5);
}

.ledger-print td,
.ledger-print th {
  vertical-align: top;
}

/* Particulars carry the words; give them the room. */
.ledger-print th:nth-child(2) {
  width: 38%;
}

/* A practice (UAT) copy says so on every page, above everything else. */
.environment-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.375rem 1rem;
  background: #8a4b00;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

@media print {
  .environment-banner { position: static; background: none; color: #000; border-bottom: 1px solid #000; }
}

/* ---------------------------------------------------------------------------
 * Form standard (Party Master first): essentials on top, optional details in
 * folded sections, Save and Cancel always within reach.
 * ------------------------------------------------------------------------- */
.form--essentials .advanced { background: var(--color-surface); }
.form--essentials .advanced[open] > .advanced__summary { margin-bottom: var(--space-3); }
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: var(--space-3) 0;
  background: linear-gradient(to bottom, transparent, var(--color-surface) 35%);
}
.form-grid--phone {
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
}
@media (max-width: 40rem) {
  .form-grid--phone { grid-template-columns: 1fr; }
}
.purpose-table { max-width: 40rem; }
.purpose-table td { text-align: center; }
.purpose-table input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }

/* =========================================================================
   Shared design foundation (Stage 1): the record workspace and the form
   standard, used by every module. Built on the tokens above only.
   ========================================================================= */

.muted { color: var(--color-text-muted); }

/* Record workspace: identity header, then a summary and one row of tabs that
   stay in view below the top bar while the page scrolls (one page scroll;
   no inner scrolling areas), then only the chosen tab's panel. */
.record { display: grid; min-width: 0; }
.record-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding-bottom: var(--space-3);
}
.record-header__text { min-width: 0; }
.record-header__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.record-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.record-header__meta .badge,
.record-header__meta p { margin: 0; }
.record-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.record-header__actions form { margin: 0; }
/* The header's menus open over the pinned summary, never under it. */
.record-header { position: relative; z-index: 16; }
.action-menu__panel form { margin: 0; display: grid; }
.action-menu__item {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.action-menu__item:hover { background: var(--color-surface-muted); }

.record-sentinel { height: 1px; }
.record-sticky {
  position: sticky;
  top: var(--app-header-height, var(--topbar-height));
  z-index: 15;
  margin-top: -1px;
  padding-top: var(--space-2);
  background: var(--color-bg);
}
.record-sticky.is-pinned { box-shadow: var(--shadow); }
.record-sticky__name {
  display: none;
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
.record-sticky.is-pinned .record-sticky__name { display: block; }
.record-sticky .record-tabs { margin-top: var(--space-2); }

.record-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.record-facts dt,
.ws-facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.record-facts dd,
.ws-facts dd {
  margin: var(--space-1) 0 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.record-facts dd .badge { margin-left: 0; }

.record-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.record-tabs__tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }
.record-tabs__count {
  min-width: 1.4rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4rem;
  text-align: center;
}
.record-tabs__tab[aria-current="page"] .record-tabs__count {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.record-body { min-width: 0; }
.record-panel { display: grid; gap: var(--space-3); min-width: 0; padding-top: var(--space-4); }
.record-panel[hidden] { display: none; }
.record-panel__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
.record-panel__title { margin: 0; font-size: var(--text-lg); }
.record-panel__toolbar .button-row { margin: 0; }
.record-panel__summary { margin: 0; color: var(--color-text-muted); }
.record-panel .next-action,
.record-panel .notice { margin: 0; }

/* Panels and cards inside a tab. */
.ws-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-3);
  align-items: start;
}
.ws-panel {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.ws-panel__title { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.ws-panel .data-table { margin: 0; }
.ws-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-3);
}
.ws-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.ws-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ws-card__title { margin: 0; font-size: var(--text-md); }
.ws-card__link { font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.ws-facts { display: grid; gap: var(--space-2); margin: 0; }
.ws-card__meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.ws-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-1); }

/* Cards of a record's own lists side by side where there is room. */
.record-panel .address-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.record-panel .contact-list,
.record-panel .registration-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); }

@media (max-width: 40rem) {
  .record-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-2) var(--space-3); }
  /* On a phone the tall top bar scrolls away, and a pinned summary keeps
     only the record's name and its tabs, so the content keeps the screen. */
  .app-header { position: relative; }
  .record-sticky { top: 0; }
  .record-sticky.is-pinned .record-facts { display: none; }
  .record-tabs__tab { padding: var(--space-2); font-size: var(--text-sm); }
  .ws-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Form standard: Essential information first, optional sections folded,
   conditional fields shown when they apply, Save and Cancel within reach. */
.form-grid__cell { min-width: 0; }
.form-grid__cell--wide { grid-column: 1 / -1; }
.form-grid__cell[hidden] { display: none; }
.form-section--essential > legend.form-section__title { color: var(--color-text); }
.form-fold__note {
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

/* The UAT banner scrolls with the page, so it never covers the pinned top bar. */
.environment-banner { position: relative; }

/* A masked number and the eye that reveals it to someone allowed to see it. */
.channel__reveal {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.channel__reveal[aria-pressed="true"] { color: var(--color-text); border-color: var(--color-border-strong); }
.channel__reveal:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.stat-card--warning { border-color: #d9a441; background: #fff8eb; }

/* Fields a Party Master form hides because they do not apply (the hidden
   attribute must win over a grid's own display). */
[data-whatsapp-separate][hidden],
[data-india-only][hidden],
[data-abroad-only][hidden] {
  display: none;
}

/* Tax registration at a glance on the party page: the number, then its two states. */
.gst-summary__states {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* Stage 5: the invoice verification QR, small and out of the way, printed with the sheet. */
.doc__verify { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); break-inside: avoid; }
.doc__verify-code svg { width: 84px; height: 84px; display: block; }
.doc__verify-text { font-size: var(--text-xs); max-width: 36rem; margin: 0; }

/* The QR beside the signatory, in one row: the closing gives that row more room. */
.doc__closing--verify { grid-template-columns: minmax(0, 1fr) minmax(min(100%, 22rem), 1.6fr); }
.doc__sign-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 0.75rem 1.25rem; min-width: 0; }
.doc__sign-row .doc__verify { flex: 1 1 14rem; min-width: 0; margin-top: 0; }
.doc__sign-row .doc-signatory { flex: 0 1 12rem; min-width: 0; }


/* Stage 5: a cancelled dispatch's challan says so before anything else, in print too. */
.doc__note--void { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 2px solid currentColor; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }

/* The public invoice verification page: the issuing company's identity, nothing of the platform's. */
.verify-card { --verify-accent: var(--color-text, #111827); }
.verify-card__issuer { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.verify-card__logo { max-height: 56px; max-width: 180px; width: auto; height: auto; }
.verify-card__monogram { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--verify-accent); color: #fff; font-weight: 700; font-size: 1.25rem; }
.verify-card__name { font-weight: 700; font-size: 1.125rem; color: var(--verify-accent); overflow-wrap: anywhere; }

/* Password fields with a show/hide button (js/password-toggle.js). The button sits inside the field's right edge
   and is at least 44px square, so it is easy to tap. */
.password-field { position: relative; }
.password-field input { width: 100%; padding-right: 3rem; }
.password-field__toggle { position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%);
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0; border: 0;
  background: transparent; color: var(--color-text-muted, #4b5563); border-radius: 6px; cursor: pointer; }
.password-field__toggle:hover { color: var(--color-text, #111827); }
.password-field__toggle:focus-visible { outline: 2px solid var(--color-focus, #2563eb); outline-offset: 2px; }
.sign-in__help { margin-top: var(--space-3, 0.75rem); text-align: center; }
.sign-in__assisted { margin-top: var(--space-5, 1.5rem); }

/* Stage 7 navigation: compact group labels inside a section (Finance's three
   groups, Administration's two). A label, not another level to open. */
.app-nav__group { list-style: none; padding: var(--space-2) var(--space-3) 2px var(--space-3); }
.app-nav__group:first-child { padding-top: 2px; }
.app-nav__group-name { color: var(--color-sidebar-muted); font-size: 0.6875rem; font-weight: var(--weight-semibold);
  letter-spacing: 0.05em; text-transform: uppercase; }
.app-nav__summary { min-height: 2.5rem; }
.app-nav__disclosure .app-nav__link { min-height: 2.25rem; }
.app-sidebar { overscroll-behavior: contain; }
.app-nav__link { overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .app-nav__summary, .app-nav__disclosure .app-nav__link, .app-nav__link { min-height: 2.75rem; }
}

/* BO-1 Backorder control: the existing cards, tabs, filter bar and tables; only the few joins between them. */
.backorder-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3);
  margin: var(--space-3) 0 0; }
.stat-card--current .stat-card__link { box-shadow: inset 0 0 0 2px var(--color-primary); }
.backorder-tabs { margin: var(--space-4) 0 0; overflow: visible; }
.backorder-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-2) var(--space-3);
  align-items: end; margin: var(--space-3) 0 var(--space-2); }
.backorder-filters .button-row { margin: 0; }
[data-backorder-count] { margin: 0 0 var(--space-2); }
/* Column headings stay in view below the app header while the rows scroll, and
   stop where the table ends. From 80rem the widest table (customer, ten
   columns) fits beside the sidebar, so its frame does not clip and the
   headings stick to the page, not to the frame. */
@media (min-width: 80rem) {
  .backorder-table-wrap { overflow: visible; }
  /* --app-header-height is the top bar's measured height (js/app-navigation.js); it can wrap. */
  .backorder-table thead th { position: sticky; top: var(--app-header-height, calc(var(--topbar-height) + 1px));
    z-index: 2; background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); }
}
.backorder-table td .badge { white-space: nowrap; }
.backorder-table__lead { min-width: 11rem; }
.backorder-table th, .backorder-table td { padding-left: 0.5rem; padding-right: 0.5rem; }
.backorder-table thead th { white-space: normal; }
.backorder-table__cover { display: block; }  /* wraps: the coverage labels are long (BO-2A) */
.backorder-table__status { min-width: 7.5rem; }
.backorder-table__status .badge, .backorder-table__due { display: block; width: max-content; margin-bottom: 2px; }
@media (max-width: 48rem) {
  /* Small screens: the tabs scroll sideways only if they do not fit, never up and down. */
  .backorder-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .backorder-tabs .record-tabs__tab { flex: none; }
}
@media (max-width: 79.9375rem) {
  /* Narrow laptops, tablets and phones: each line a compact card, figures side by side (two on a phone,
     more where there is room), so nothing scrolls sideways. */
  .backorder-table thead { display: none; }
  /* Cards wrap their own text, so the frame never scrolls sideways (not even for a rounding pixel). */
  .backorder-table-wrap { overflow-x: clip; }
  .backorder-table, .backorder-table tbody { display: block; }
  .backorder-table tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); }
  .backorder-table td, .backorder-table th, .backorder-table td.numeric { display: block; padding: 0; text-align: left; border: 0; min-width: 0;
    overflow-wrap: anywhere; }
  .backorder-table th, .backorder-table td:last-child { grid-column: 1 / -1; }
  .backorder-table td::before { content: attr(data-label); display: block;
    color: var(--color-text-muted); font-size: 0.6875rem; font-weight: var(--weight-semibold); }
}

/* Finance groups that open and close on their own: the group label is the summary, with a small chevron. */
.app-nav__subgroup { list-style: none; }
.app-nav__subdisclosure > .app-nav__list { margin: 0; padding: 0; border: 0; }
.app-nav__group-summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  list-style: none; min-height: 2rem; border-radius: var(--radius-small); }
.app-nav__group-summary::-webkit-details-marker { display: none; }
.app-nav__group-summary::after { content: ""; width: 0.35rem; height: 0.35rem; margin-right: var(--space-1);
  border-right: 1.5px solid var(--color-sidebar-muted); border-bottom: 1.5px solid var(--color-sidebar-muted);
  transform: rotate(-45deg); transition: transform 120ms ease; }
.app-nav__subdisclosure[open] > .app-nav__group-summary::after { transform: rotate(45deg); }
.app-nav__group-summary:hover { background: var(--color-sidebar-hover); }
.app-nav__group-summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
@media (pointer: coarse) { .app-nav__group-summary { min-height: 2.75rem; } }

/* BO-2 backorder actions: the row's link to its action page, the line's figures, and the folded action forms. */
.backorder-table__act { display: inline-block; margin-top: 2px; font-size: 0.8125rem; font-weight: var(--weight-semibold); }
.backorder-figures { margin: var(--space-3) 0 var(--space-4); }
.backorder-actions { margin: var(--space-4) 0; }
.backorder-actions .backorder-action { margin: 0 0 var(--space-2); }
.backorder-history { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin: var(--space-4) 0; }
.backorder-evidence { margin: var(--space-2) 0; padding-left: 1.25rem; }

/* The wrapper js/keep-position.js watches: it must not widen the page to its widest table. */
[data-keep-position-from] { min-width: 0; }

/* BO-2A cancellation requests on a line page. */
.backorder-request { margin: 0 0 var(--space-2); }
.backorder-request__actions { margin-top: var(--space-2); }

/* ---------------------------------------------------------------------------
   Collapsible sidebar (premium workspace). Icons sit beside every top-level
   destination; on a laptop or desktop the sidebar narrows to a rail of those
   icons (remembered per browser), with each one's name as a tooltip and as
   its accessible name. The workspace takes the space back. Phones and
   tablets keep the drawer, which now has its own close control.
   --------------------------------------------------------------------------- */
:root { --rail-width: 4rem; }
.app-nav__icon { flex: none; width: 1.125rem; height: 1.125rem; }
.app-nav__link--top { gap: var(--space-2); }
.app-nav__summary { gap: var(--space-2); justify-content: flex-start; }
.app-nav__summary > .app-nav__label { flex: 1; }
.app-sidebar__brand { justify-content: space-between; gap: var(--space-2); }
.app-sidebar__brand .company-identity { min-width: 0; }
.app-sidebar__collapse,
.app-sidebar__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-small);
  background: transparent; color: var(--color-sidebar-muted); cursor: pointer;
}
.app-sidebar__collapse:hover,
.app-sidebar__close:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-text); }
.app-sidebar__collapse:focus-visible,
.app-sidebar__close:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }
.app-sidebar__collapse[hidden] { display: none; }
.app-sidebar__collapse [data-icon-expand],
.app-frame--rail .app-sidebar__collapse [data-icon-collapse] { display: none; }
.app-frame--rail .app-sidebar__collapse [data-icon-expand] { display: inline-flex; }
.app-sidebar__collapse span { display: inline-flex; }

@media (max-width: 68.6875rem) {
  .app-sidebar__collapse { display: none; }
}
@media (min-width: 68.75rem) {
  .app-sidebar__close { display: none; }
  .app-frame { transition: grid-template-columns 180ms ease; }
  .app-frame--rail { grid-template-columns: var(--rail-width) minmax(0, 1fr); }
  .app-frame--rail .app-sidebar { overflow: visible; }
  .app-frame--rail .app-sidebar__brand { flex-direction: column; justify-content: center; padding: var(--space-2) 0; }
  .app-frame--rail .company-identity__name,
  .app-frame--rail .app-sidebar__footer .platform-brand__name,
  .app-frame--rail .app-sidebar__footer .platform-brand__product { display: none; }
  .app-frame--rail .app-sidebar__footer { display: flex; justify-content: center; padding: var(--space-3) 0; }
  .app-frame--rail .app-nav { padding: var(--space-3) var(--space-2); gap: var(--space-1); }
  .app-frame--rail .app-nav__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .app-frame--rail .app-nav__summary::after { display: none; }
  .app-frame--rail .app-nav__disclosure > :not(summary) { display: none; }
  .app-frame--rail .app-nav__summary,
  .app-frame--rail .app-nav__link--top { justify-content: center; min-height: 2.5rem; padding: var(--space-2); }
  .app-frame--rail .app-nav__summary--current { background: var(--color-sidebar-active); color: var(--color-primary); }
  .app-frame--rail [data-tip] { position: relative; }
  .app-frame--rail [data-tip]:hover::before,
  .app-frame--rail [data-tip]:focus-visible::before {
    content: attr(data-tip); position: absolute; left: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%);
    z-index: 60; padding: var(--space-1) var(--space-2); border-radius: var(--radius-small);
    background: var(--color-text); color: var(--color-surface); font-size: var(--text-sm);
    font-weight: var(--weight-medium); letter-spacing: normal; text-transform: none; white-space: nowrap;
    box-shadow: var(--shadow); pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-frame { transition: none; }
}

/* ---------------------------------------------------------------------------
   Premium workspace pieces (reusable on any record page): the line's figures
   in one horizontal strip, its key figure emphasised; a plain strip for
   secondary facts inside a tab; the "what can be done" links; compact
   request tables with their actions in the row.
   --------------------------------------------------------------------------- */
.record-identity { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.backorder-facts { grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)); gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3); }
.backorder-facts dd { margin-top: 2px; }
.record-facts__key dd { color: var(--color-primary); }
.record-facts__note { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-xs);
  font-weight: var(--weight-regular, 400); }
.record-facts--plain { margin: 0 0 var(--space-3); border: 0; padding: 0; background: transparent;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.backorder-money { margin: 0 0 var(--space-2); }
.backorder-help { margin: 0 0 var(--space-3); }
.backorder-help .meta { margin: var(--space-2) 0 0; }
.backorder-next { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0;
  list-style: none; font-weight: var(--weight-semibold); }
.backorder-inline-action { margin-top: var(--space-3); }
.backorder-oc { margin-top: var(--space-3); }
.record-panel > .backorder-action:first-child,
.record-panel > [data-cancellation-requests] + .backorder-action { margin-top: var(--space-3); }
.request-table td, .request-table th { vertical-align: top; }
.request-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-1); margin: 0; }
.request-actions__reject > summary { list-style: none; }
.request-actions__reject > summary::-webkit-details-marker { display: none; }
.request-actions__reject[open] { display: grid; gap: var(--space-1); min-width: 12rem; }
.request-actions__reject input { width: 100%; }
.data-table--compact th, .data-table--compact td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
/* On a phone a backorder line keeps its tabs on one row that scrolls sideways (seven tabs would wrap to
   three rows), and its figures three to a row; once pinned, only the name and the tabs stay (as for every
   record page). */
@media (max-width: 40rem) {
  .record:has(.backorder-facts), .record-sticky:has(.backorder-facts) { min-width: 0; max-width: 100%; }
  .record-sticky:has(.backorder-facts) .record-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    min-width: 0; max-width: 100%; }
  .record-sticky:has(.backorder-facts) .record-tabs__tab { flex: none; }
  .backorder-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The collapse control, always visible (UAT): a bordered button in the sidebar head, top right; centred
   under the company mark in the rail. It is a real button in a small form, so it works without script. */
.app-sidebar__collapse-form { display: flex; flex: none; margin: 0; }
.app-sidebar__collapse {
  width: 2rem; height: 2rem; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); box-shadow: 0 1px 2px rgba(15, 20, 32, 0.08);
}
.app-sidebar__collapse:hover { border-color: var(--color-primary); background: var(--color-surface); color: var(--color-primary); }
.app-sidebar__collapse .app-nav__icon { width: 1rem; height: 1rem; }
@media (max-width: 68.6875rem) {
  .app-sidebar__collapse-form { display: none; }
}
@media (min-width: 68.75rem) {
  .app-frame--rail .app-sidebar__collapse-form { justify-content: center; }
}

/* Home's orders table: one table, chips above it, and on a phone it scrolls
   sideways with the order number held in place rather than becoming cards. */
.orders-table {
  /* A grid item may shrink below its widest content, so the table scrolls
     inside the page instead of widening it. */
  min-width: 0;
}

/* An open menu is placed over the page by the script (position: fixed), so
   the table's sideways scroll cannot clip it. */
.row-menu__list.row-menu__list--floating,
.column-picker__panel.column-picker__panel--floating {
  position: fixed;
  right: auto;
  margin: 0;
}

/* One search box on every list: a magnifier inside it and its button
   attached on the right at the same height. It sits on the heading's row;
   the chips follow on the next. */
.orders-table__search,
.quick-pick__search,
.list-toolbar__search {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
}

.orders-table__search {
  flex: 0 1 26rem;
  margin-left: auto;
}

.orders-table__search input[type="search"],
.quick-pick__search input[type="search"],
.list-toolbar__search input[type="search"],
.list-toolbar__search input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.orders-table__search > .button,
.quick-pick__search > .button,
.list-toolbar__search > .button {
  flex: 0 0 auto;
  min-height: 2.5rem;
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.list-toolbar--single .list-toolbar__search > .button {
  min-height: var(--control-height-compact);
}

/* The magnifier inside the box, drawn here: a ring and its handle. */
.search-field {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.search-field > input[type="search"] {
  width: 100%;
  padding-left: 2.25rem;
}

.search-field__icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.5rem;
  border: 2px solid var(--color-text-muted);
  border-radius: 50%;
  pointer-events: none;
}

.search-field__icon::after {
  content: "";
  position: absolute;
  right: -0.35rem;
  bottom: -0.3rem;
  width: 0.4rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text-muted);
  transform: rotate(45deg);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}

.filter-chip--active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
}

.filter-chip__count {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.orders-table__table th,
.orders-table__table td {
  white-space: nowrap;
}

/* The order number stays in view while the table scrolls sideways: a fixed
   width, a solid background and a visible edge, so the columns that slide
   under it are seen to go under it rather than being cut short. */
.orders-table__table > tbody > tr:not(.trucks-row) > :first-child,
.orders-table__table > thead > tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 10.5rem;
  min-width: 10.5rem;
  max-width: 10.5rem;
  background: var(--color-surface);
  box-shadow: inset -1px 0 0 var(--color-border), 4px 0 6px -4px rgba(24, 32, 46, 0.18);
}

.orders-table__table > thead > tr > :first-child {
  z-index: 3;
}

/* Sideways scrolling stops at whole columns, each starting just after the
   order number, so no heading or date is left half under it. */
.orders-table .table-wrap {
  container-type: inline-size;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 10.5rem;
}

/* The room orders-table.js adds so the far end of the scroll also stops at a
   column's start: given to the last column before the actions, so the sticky
   action column stays flush with the right edge. */
.orders-table__table > thead > tr > :nth-last-child(2),
.orders-table__table > tbody > tr:not(.trucks-row) > :nth-last-child(2) {
  padding-right: calc(var(--space-3) + var(--end-room, 0px));
}

.orders-table__table > thead > tr > th {
  scroll-snap-align: start;
}

.orders-table__table > tbody > tr:not(.trucks-row) > :first-child .ident {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orders-table__table .text-danger,
.orders-table__row--overdue .text-danger {
  color: var(--color-error-text);
  font-weight: 600;
}

/* A sortable heading looks like one: ↕ until it sorts, then ▲ or ▼, and a
   hover that says it can be clicked. */
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: -0.25rem -0.375rem;
  padding: 0.25rem 0.375rem;
  border-radius: var(--radius-small);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.sort-link::after {
  content: "↕";
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.6;
}

.sort-link:hover,
.sort-link:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  text-decoration: underline;
}

.sort-link:hover::after {
  opacity: 0.8;
}

.sort-link--asc,
.sort-link--desc {
  color: var(--color-primary);
}

.sort-link--asc::after { content: "▲"; font-size: 0.75em; opacity: 1; }
.sort-link--desc::after { content: "▼"; font-size: 0.75em; opacity: 1; }

th.numeric .sort-link {
  flex-direction: row-reverse;
}

.trucks-toggle__chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}

.trucks-toggle[aria-expanded="true"] .trucks-toggle__chevron {
  transform: rotate(90deg);
}

.trucks-row[hidden] {
  display: none;
}

.trucks-row > td {
  padding: var(--space-2) 0 var(--space-3);
  background: var(--color-primary-soft);
}

/* An order's trucks stay in view under it however far the orders table is
   scrolled, and scroll sideways on their own when wider than the screen. */
.trucks-wrap {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: 100cqi;
  padding: 0 var(--space-3);
  overflow-x: auto;
}

.trucks-table {
  width: auto;
  min-width: 100%;
  background: var(--color-surface);
}

.row-menu,
.column-picker {
  position: relative;
  display: inline-block;
}

.row-menu > summary,
.column-picker > summary {
  list-style: none;
  cursor: pointer;
}

.row-menu > summary::-webkit-details-marker,
.column-picker > summary::-webkit-details-marker {
  display: none;
}

.row-menu__list,
.column-picker__panel {
  position: absolute;
  right: 0;
  z-index: 5;
  min-width: 13rem;
  margin: 0.25rem 0 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  list-style: none;
  text-align: left;
  white-space: normal;
}

.row-menu__link {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-small);
  color: inherit;
  text-decoration: none;
}

.row-menu__link:hover,
.row-menu__link:focus-visible {
  background: var(--color-primary-soft);
}

/* The column list is compact: small rows, its own scroll, opening below the
   "+" and aligned to its right edge, so it covers as little of the table as it can. */
.column-picker__panel {
  top: 100%;
  width: 14rem;
  min-width: 0;
  max-height: min(22rem, 70vh);
  overflow-y: auto;
  padding: var(--space-1) var(--space-2) var(--space-2);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.column-picker__title {
  margin: var(--space-1) 0;
  font-weight: 600;
}

.column-picker__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.column-picker__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  font-weight: 400;
  cursor: pointer;
}

.column-picker__option input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.column-picker__note {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.column-picker__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.column-picker__reset {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-list__item {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: var(--space-3);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.activity-list__when {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 39.99rem) {
  .orders-table .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .orders-table .data-table {
    display: table;
  }

  .orders-table .data-table thead {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    display: table-header-group;
  }

  .orders-table .data-table tbody { display: table-row-group; }
  .orders-table .data-table tfoot { display: table-footer-group; }

  .orders-table .data-table tr {
    display: table-row;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .orders-table .data-table th,
  .orders-table .data-table td {
    display: table-cell;
    border-bottom: 1px solid var(--color-border);
  }

  .orders-table .data-table td::before {
    content: none;
  }

  .orders-table__table > tbody > tr:not(.trucks-row) > :first-child,
  .orders-table__table > thead > tr > :first-child {
    width: 8.5rem;
    min-width: 8.5rem;
    max-width: 8.5rem;
  }

  .orders-table .table-wrap {
    scroll-padding-left: 8.5rem;
  }

  .orders-table .trucks-row[hidden] {
    display: none;
  }

  .activity-list__item {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
}

/* Truck ready → invoice: one column on a phone, large inputs, the numeric
   keypad, no spinners, and the Generate button always in reach. */
.truck-form {
  max-width: 44rem;
}

.truck-section {
  margin-bottom: var(--space-4);
}

.truck-line {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.truck-line:last-of-type {
  border-bottom: 0;
}

.truck-line__product {
  margin: 0 0 var(--space-1);
}

.truck-line__fields,
.truck-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.truck-form input[type="text"],
.truck-form input[type="search"],
.truck-form input[type="tel"] {
  width: 100%;
  min-height: 3rem;
  font-size: 1.125rem;
}

.truck-form input[inputmode="decimal"],
.truck-form input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
}

.truck-suggestions {
  margin: var(--space-1) 0 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  list-style: none;
}

.truck-suggestions__option {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.truck-suggestions__option:hover,
.truck-suggestions__option:focus-visible {
  background: var(--color-primary-soft);
}

.truck-suggestions__problem {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-danger, #b42318);
}

.truck-suggestions {
  scroll-margin-bottom: 7rem; /* clear of the sticky Generate button */
}

.truck-suggestions__option--add {
  color: var(--color-primary);
  font-weight: 600;
}

.truck-chosen {
  margin: var(--space-1) 0 0;
  font-weight: 600;
}

.truck-advance {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.truck-advance__title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.truck-summary__list {
  margin: 0;
}

.truck-summary__list div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.25rem 0;
}

.truck-summary__list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Figures not worked out for what is typed now: cleared and greyed, never the old ones. */
.truck-summary--stale .truck-summary__list { color: var(--color-text-muted); }

/* Over-delivery: the offer to increase the order line, under its Loaded field. */
.truck-increase { margin-top: var(--space-2); }
.truck-increase .field__help { margin: var(--space-1) 0 0; }

.truck-summary__levy {
  color: var(--color-text-muted);
}

.truck-summary__total {
  border-top: 1px solid var(--color-border);
  font-weight: 600;
}

.truck-submit {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: var(--space-3) 0;
  background: linear-gradient(to bottom, transparent, var(--color-bg, #f4f6f9) 30%);
}

.truck-submit .button {
  min-height: 3.25rem;
  font-size: 1.125rem;
}

.truck-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.truck-buttons .button {
  min-height: 2.75rem;
}

.truck-copy-list {
  margin: 0 0 var(--space-3);
}

.truck-copy-list__row {
  display: grid;
  grid-template-columns: minmax(8rem, 35%) 1fr;
  gap: var(--space-2);
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-border);
}

.truck-copy-list__row dt {
  color: var(--color-text-muted);
}

.truck-copy-list__row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  word-break: break-word;
}

@media (max-width: 39.99rem) {
  .truck-copy-list__row {
    grid-template-columns: 1fr;
  }
}

/* Home's quick-create bar: the six things started most often. On a phone
   the row scrolls sideways rather than wrapping into a block of buttons. */
.quick-create {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

/* Home's toolbar: the quick-create buttons on the left and the search on the
   right of one row, the search at the buttons' height; the chips follow. On a
   phone the buttons wrap and the search takes its own whole row. The list
   pages put their search on the title's row the same way. */
.list-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.list-bar .quick-create {
  flex: 0 1 auto;
  flex-wrap: wrap;
  margin: 0;
  overflow: visible;
  padding-bottom: 0;
}

.list-bar .orders-table__search,
.page-header--search .orders-table__search {
  flex: 0 1 22rem;
  margin-left: auto;
}

.list-bar .orders-table__search input[type="search"],
.list-bar .orders-table__search > .button,
.page-header--search .orders-table__search input[type="search"],
.page-header--search .orders-table__search > .button {
  min-height: var(--control-height-compact);
  height: var(--control-height-compact);
}

.page-header--search + .home-section {
  margin-top: var(--space-3);
}

@media (max-width: 39.99rem) {
  .list-bar .orders-table__search,
  .page-header--search .orders-table__search {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

.quick-create + .home-section {
  margin-top: var(--space-4);
}

.quick-create__button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The order panel: beside Home's table on a wide screen, the whole screen on
   a phone. The page behind is dimmed and does not scroll while it is open. */
.order-panel-host[hidden] {
  display: none;
}

.order-panel-host__backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(24, 32, 46, 0.28);
}

.order-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  box-sizing: border-box;
  width: min(36rem, 100vw);
  padding: var(--space-4);
  overflow-y: auto;
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.order-panel:focus {
  outline: none;
}

body.order-panel-open {
  overflow: hidden;
}

.order-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.order-panel__title {
  margin: 0;
  font-size: var(--text-xl);
}

.order-panel__who {
  margin: 0.125rem 0 0;
  color: var(--color-text-muted);
}

.order-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
}

.order-panel__close:hover {
  background: var(--color-surface-muted);
}

.order-panel__facts,
.order-panel__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}

.order-panel__facts dt,
.order-panel__figures dt,
.order-panel__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.order-panel__facts dd,
.order-panel__figures dd {
  margin: 0.125rem 0 0;
  font-variant-numeric: tabular-nums;
}

.order-panel__figures dd {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.order-panel__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius);
  background: var(--color-info-bg);
}

.order-panel__next .order-panel__label {
  flex-basis: 100%;
}

.order-panel__next-text {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.order-panel__next--done {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.order-panel__section {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.order-panel__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.order-panel__section > .order-panel__label {
  margin-bottom: var(--space-2);
}

.order-panel__scroll {
  overflow-x: auto;
}

.order-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-panel__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.order-panel__kind {
  font-weight: var(--weight-semibold);
}

.order-panel__links {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}

.order-panel__more {
  border-top: 1px solid var(--color-border);
}

.order-panel__more > summary {
  padding: var(--space-3) 0;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.order-panel__more > [data-panel-section-body] {
  padding-bottom: var(--space-3);
}

.order-panel__footer {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.order-panel .trucks-table {
  min-width: 100%;
}

.order-panel .trucks-table th,
.order-panel .trucks-table td {
  white-space: nowrap;
}

/* On a phone the row's Action button is a compact "⋯", so the sticky order
   number and action columns leave room for the figures between them. */
.row-menu__compact {
  display: none;
}

@media (max-width: 39.99rem) {
  .orders-table .row-menu > summary {
    min-width: 2.75rem;
    padding-inline: var(--space-2);
  }

  .orders-table .row-menu__full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .orders-table .row-menu__compact {
    display: inline;
    font-size: 1.25rem;
    line-height: 1;
  }

  .orders-table__table > thead > tr > :last-child,
  .orders-table__table > tbody > tr:not(.trucks-row) > :last-child {
    padding-inline: var(--space-2);
  }
}

@media (max-width: 39.99rem) {
  .order-panel {
    width: 100vw;
    padding: var(--space-3) var(--space-4);
  }

  .order-panel__facts,
  .order-panel__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-panel .data-table thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    display: table-header-group;
  }

  .order-panel .data-table { display: table; }
  .order-panel .data-table tbody { display: table-row-group; }
  .order-panel .data-table tfoot { display: table-footer-group; }
  .order-panel .data-table tr { display: table-row; margin: 0; border: 0; }
  .order-panel .data-table th,
  .order-panel .data-table td { display: table-cell; }
  .order-panel .data-table td::before { content: none; }
}

/* Choosing the order for Truck ready or Payment received: large rows to tap. */
.quick-pick__search {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.quick-pick__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
}

.quick-pick {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.quick-pick > li + li {
  border-top: 1px solid var(--color-border);
}

.quick-pick__choice {
  display: block;
  padding: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.quick-pick__choice:hover,
.quick-pick__choice:focus-visible {
  background: var(--color-primary-soft);
}

.quick-pick__main {
  display: block;
  font-weight: var(--weight-semibold);
}

/* Home's orders table: the action column stays in view on the right while
   the table scrolls, as the order number does on the left. */
.orders-table__table > tbody > tr:not(.trucks-row) > :last-child,
.orders-table__table > thead > tr > :last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: inset 1px 0 0 var(--color-border), -4px 0 6px -4px rgba(24, 32, 46, 0.18);
}

.orders-table__table > thead > tr > :last-child {
  z-index: 3;
  background: var(--color-surface-subtle);
}

/* A heading's right edge widens or narrows its column; the heading itself
   can be dragged to a new place (orders-table-layout.js). */
.orders-table__table > thead > tr > th[data-col] {
  position: relative;
}

.orders-table__table > thead > tr > th[data-col="order_no"] {
  position: sticky;
}

.col-resize {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 1;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
}

.col-resize:hover,
.col-resize:active {
  background: linear-gradient(to right, transparent 3px, var(--color-border-strong) 3px, var(--color-border-strong) 5px, transparent 5px);
}

.orders-table__table > thead > tr > th[draggable="true"] {
  cursor: grab;
}

.orders-table__table th.is-dragging {
  opacity: 0.5;
}

.orders-table__table th.is-drop-target {
  box-shadow: inset 2px 0 0 var(--color-primary);
}

.column-picker__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.column-picker__move {
  display: inline-flex;
  gap: 2px;
}

.column-picker__arrow {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.column-picker__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Every document of an order, grouped: under its row on Home and in its panel. */
.doc-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  white-space: normal;
}

.order-panel .doc-groups {
  grid-template-columns: 1fr;
  padding: 0;
}

.doc-groups__label {
  margin: 0 0 0.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.doc-groups__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-groups__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  padding: 0.25rem 0;
}

.doc-groups__page {
  margin-left: auto;
  font-size: var(--text-sm);
}

.doc-groups__name {
  min-width: 0;
}

/* What can be done with a document: View, Download, Print, Send, Share PDF.
   Large enough to tap; they wrap under the document's name on a phone. */
.doc-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin-left: auto;
  font-size: var(--text-sm);
}

.doc-actions > a,
.doc-actions > button {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}

.doc-share {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Share PDF's way round where the browser cannot share files: the PDF is downloaded and these open. */
.doc-share-box {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.doc-share-fallback {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.doc-share-fallback[hidden] {
  display: none;
}

.doc-share-fallback__note {
  color: var(--color-text-muted);
}

/* The Receipts list's PDF cell: PDF and Share PDF one above the other, the fallback links wrapping under them. */
.orders-table__table.receipts-list .receipts-list__pdf {
  min-width: 7.5rem;
  white-space: normal;
}

.receipts-list__pdf .doc-share-box,
.receipts-list__pdf .doc-share-fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.receipts-list__pdf .doc-share-fallback[hidden] {
  display: none;
}

.receipts-list__pdf .doc-share-fallback a,
.receipts-list__pdf .doc-share-fallback__note {
  white-space: normal;
  overflow-wrap: anywhere;
}

.doc-groups .doc-groups__item {
  border-bottom: 1px solid var(--color-border);
}

.doc-groups .doc-groups__item:last-child {
  border-bottom: 0;
}

/* A truck's own documents, opened under it in the trucks table. */
.truck-docs-row[hidden] {
  display: none;
}

.truck-docs-row > td {
  padding: 0;
  background: var(--color-surface-subtle);
}

/* However far the trucks table is scrolled sideways, the documents start at
   its left edge and fit the screen. */
.truck-docs-row .doc-groups {
  position: sticky;
  left: 0;
  max-width: calc(100vw - 3rem);
  background: transparent;
}

/* A row's button says less on a phone, so the figures keep their room. */
.label-short {
  display: none;
}

@media (max-width: 39.99rem) {
  .label-full {
    display: none;
  }

  .label-short {
    display: inline;
  }
}

/* The order panel's documents fold away under their count. */
.order-panel__docs > summary {
  cursor: pointer;
  margin-bottom: var(--space-2);
}

/* Quotations from Home: what is waiting for a quotation, each with its button. */
.quote-waiting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
}

.quote-waiting__main {
  flex: 1 1 14rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.quotations-table form {
  margin: 0;
}

/* The quote number is read whole, with its version: the first column is as
   wide as the longest one, never cut short. */
.orders-table__table.quotations-table > tbody > tr > :first-child,
.orders-table__table.quotations-table > thead > tr > :first-child {
  width: auto;
  min-width: 0;
  max-width: none;
}

.orders-table__table.quotations-table > tbody > tr > :first-child .ident {
  overflow: visible;
  text-overflow: clip;
}

[data-quotations-table] .table-wrap {
  scroll-padding-left: 11rem;
}

.quotations-table__actions {
  display: inline-flex;
  gap: var(--space-2);
}

/* A long customer name takes two lines rather than pushing Balance due out of view. */
.orders-table__table.payments-table .payments-table__customer {
  white-space: normal;
  min-width: 8rem;
  max-width: 12rem;
}

/* Collections' money headings take two lines, so Advance left and Balance due fit beside each other. */
.orders-table__table.payments-table thead th { white-space: normal; }

/* A list heading's "?": what the column means, on hover, keyboard focus or a tap (focus). */
.col-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; margin-left: 0.25rem; padding: 0; vertical-align: middle;
  border: 1px solid var(--color-border-strong); border-radius: 50%;
  background: var(--color-surface); color: var(--color-text-muted);
  font: inherit; font-size: 0.625rem; font-weight: var(--weight-bold); line-height: 1; cursor: help;
  position: relative;
}
.col-tip:hover::after,
.col-tip:focus::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 30;
  width: max-content; max-width: 14rem; padding: 0.4rem 0.55rem; border-radius: 6px;
  background: var(--color-text); color: var(--color-surface);
  font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-tight);
  text-align: left; text-transform: none; letter-spacing: normal; white-space: normal;
}

/* A long customer name takes two lines rather than pushing Status out of view. */
.orders-table__table.quotations-table .quotations-table__customer {
  white-space: normal;
  min-width: 8rem;
  max-width: 12rem;
}

/* Confirm order + PI: the share and the amount side by side where there is
   room, and the bank and terms folded under a plain heading. */
.confirm-pi__amount {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.confirm-pi__more > summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-2) 0;
}

.confirm-pi__lines {
  margin-bottom: var(--space-4);
}

/* What Confirm order + PI issued: the joined PDF in the page; on a phone,
   where a PDF does not show inside a page, one big button opens it. */
.issued-pdf__frame {
  display: block;
  width: 100%;
  height: 70vh;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.issued-pdf__open {
  display: none;
}

@media (max-width: 39.99rem) {
  .issued-pdf__frame {
    display: none;
  }

  .issued-pdf__open {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--space-3);
    padding-block: var(--space-3);
    font-size: 1.125rem;
  }
}

/* Receipts list: a long customer name wraps; a split receipt lists each order on its own line. */
.orders-table__table.receipts-list .receipts-list__customer {
  white-space: normal;
  min-width: 7rem;
  max-width: 9rem;
}

.receipts-list__part {
  display: block;
}

/* What it was set against and its reference wrap within a set width, so the row fits a laptop screen. */
.orders-table__table.receipts-list .receipts-list__parts,
.orders-table__table.receipts-list .receipts-list__reference {
  white-space: normal;
}

.orders-table__table.receipts-list .receipts-list__parts {
  min-width: 7.5rem;
  max-width: 12rem;
}

.orders-table__table.receipts-list .receipts-list__reference {
  max-width: 6rem;
  overflow-wrap: anywhere;
}

/* A two-word heading may take two lines rather than widen its column. */
.orders-table__table.receipts-list > thead > tr > th {
  white-space: normal;
}

/* Receive payment, step 1: a customer's name opens the split at once. */
.customers-due__name {
  font-weight: 600;
}

.customers-due__other {
  margin-top: var(--space-4);
}

.customers-due__other form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Share PDF as a full button. */
.issued-pdf__share {
  display: inline-flex;
}

/* A document just issued, marked where the order panel lists it. */
.doc-groups__item--new {
  border-radius: var(--radius);
  background: var(--color-success-bg);
  box-shadow: inset 3px 0 0 var(--color-success-border);
}

/* On a phone the search takes the whole row and the chips scroll sideways. */
@media (max-width: 39.99rem) {
  .orders-table__search {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* The Simple menu: one level, an icon on every link, quiet labels in
   ordinary case. + Create stands out at the top; More folds the rest away
   with Find a page; Settings sits last. */
.app-nav--simple {
  gap: var(--space-2);
}

.app-nav--simple .app-nav__summary {
  min-height: 2.25rem;
  color: var(--color-sidebar-text);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.app-nav__simple-group {
  padding: var(--space-3) var(--space-3) 2px;
  color: var(--color-sidebar-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  list-style: none;
}

.nav-create > .nav-create__summary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-semibold);
}

.nav-create > .nav-create__summary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.app-nav--simple .nav-create > .app-nav__list,
.app-nav--simple .nav-more > .app-nav__list {
  margin-top: var(--space-1);
}

.nav-find {
  margin: var(--space-1) 0 var(--space-1) var(--space-3);
}

.nav-find input[type="search"] {
  width: 100%;
  min-height: 2.25rem;
  font-size: var(--text-sm);
}

.nav-settings {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 68.75rem) {
  .app-frame--rail .nav-find,
  .app-frame--rail .app-nav__simple-group { display: none; }
}

/* Menu settings: one line per page, its place beside it. */
.menu-placement {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-placement__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.menu-placement__name {
  display: grid;
  min-width: 0;
  font-weight: var(--weight-medium);
}

.menu-placement select {
  flex: 0 0 9.5rem;
  width: 9.5rem;
}

/* ---------------------------------------------------------------------------
 * Activity as one short line each (Home's Recent activity, the full activity
 * page, the order panel's History): time · action · document · detail · who.
 * A long detail is cut with "…" and shown whole on hover or when tapped.
 * ------------------------------------------------------------------------- */
.home-activity { min-width: 0; padding-block: var(--space-3); } /* its one-line details never widen the page */
.home-activity__summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; }
.home-activity__summary::-webkit-details-marker { display: none; }
.home-activity__summary::after { content: "\25B8"; color: var(--color-text-muted); transition: transform 120ms ease; }
.home-activity[open] > .home-activity__summary::after { transform: rotate(90deg); }
.home-activity__summary .section-title { margin: 0; }
.home-activity__count { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.home-activity__all { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

.activity-lines { min-width: 0; contain: inline-size; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.activity-line {
  display: flex; align-items: baseline; gap: 0 var(--space-2); min-width: 0;
  padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-ui);
}
.activity-line:last-child { border-bottom: 0; }
.activity-line__when { flex: none; color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.activity-line__what { flex: none; font-weight: var(--weight-medium); }
.activity-line__doc,
.activity-line__detail { min-width: 0; }
.activity-line__doc { flex: none; }
.activity-line__doc::before,
.activity-line__detail::before { content: "\00B7\00A0"; color: var(--color-text-muted); }
.activity-line__detail {
  flex: 1 1 auto; overflow: hidden; color: var(--color-text-muted); text-overflow: ellipsis; white-space: nowrap;
}
.activity-line__detail:hover,
.activity-line__detail:focus { white-space: normal; overflow: visible; outline: none; color: var(--color-text); }
.activity-line__who {
  flex: none; margin-left: auto; padding: 0 0.35rem; border-radius: 999px;
  background: var(--color-surface-muted); color: var(--color-text-muted);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); text-decoration: none; cursor: help;
}

/* On a phone the line wraps: time and who on top, action and document, then the detail. */
@media (max-width: 39.99rem) {
  .activity-line { flex-wrap: wrap; }
  .activity-line__detail { flex-basis: 100%; }
  .activity-line__detail::before { content: none; }
}

.order-panel__notes { margin-bottom: var(--space-2); font-size: var(--text-sm); }

.activity-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.activity-filters__field { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.activity-filters__field > span { color: var(--color-text-muted); }
.activity-filters__actions { display: flex; gap: var(--space-2); }

/* "Replace details with <customer>'s?" after the customer changes over edits. */
.customer-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.customer-ask > p {
  flex-basis: 100%;
  margin: 0;
}

/* The documents table (dashboards/includes/documents_list.html): one row per
   document in process order, the step number in front, a status pill and the
   actions as icons with tooltips. A light line between trucks. On a phone
   each row becomes a compact card with its icons on one line. */
.doc-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.doc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.doc-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.doc-table-wrap .doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.doc-table-wrap .doc-table th,
.doc-table-wrap .doc-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.doc-table-wrap .doc-table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.doc-table-wrap .doc-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.doc-table-wrap .doc-table__type {
  font-weight: 600;
}

.doc-table-wrap .doc-table__date {
  white-space: nowrap;
}

.doc-table-wrap .doc-table__number .ident {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.doc-table-wrap .doc-table__detail,
.doc-table-wrap .doc-table__date {
  color: var(--color-text-muted);
}

.doc-table-wrap .doc-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-surface-muted, var(--color-border));
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
}

.doc-table-wrap .doc-table__row--truck > * {
  border-top: 2px solid var(--color-border);
}

.doc-table-wrap .doc-table__row--new {
  background: var(--color-success-bg);
}

.doc-table-wrap .doc-table__actions {
  text-align: right;
  white-space: nowrap;
}

.doc-table-wrap .doc-table .doc-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.doc-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface, transparent);
  color: var(--color-text);
  cursor: pointer;
}

.doc-icon-button:hover,
.doc-icon-button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 39.99rem) {
  .doc-table-wrap .doc-table thead {
    display: none;
  }

  .doc-table-wrap .doc-table,
  .doc-table-wrap .doc-table tbody,
  .doc-table-wrap .doc-table tr {
    display: block;
    width: 100%;
  }

  .doc-table-wrap .doc-table .doc-table__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .doc-table-wrap .doc-table .doc-table__row > th,
  .doc-table-wrap .doc-table .doc-table__row > td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .doc-table-wrap .doc-table__row--truck {
    border-top: 2px solid var(--color-border);
  }

  .doc-table-wrap .doc-table .doc-table__type { grid-column: 1; grid-row: 1; }
  .doc-table-wrap .doc-table .doc-table__status { grid-column: 2; grid-row: 1; text-align: right; }
  .doc-table-wrap .doc-table .doc-table__number { grid-column: 1; grid-row: 2; }
  .doc-table-wrap .doc-table .doc-table__amount { grid-column: 2; grid-row: 2; }
  .doc-table-wrap .doc-table .doc-table__date,
  .doc-table-wrap .doc-table .doc-table__detail { grid-column: 1 / -1; font-size: var(--text-xs); }
  .doc-table-wrap .doc-table .doc-table__actions { grid-column: 1 / -1; text-align: left; padding-top: 0.25rem; }
  .doc-table-wrap .doc-table .doc-table__detail:empty,
  .doc-table-wrap .doc-table .doc-table__amount:empty { display: none; }
}

/* What a page's own table does to its cells, undone inside the documents table. */
.doc-table-wrap .doc-table td,
.doc-table-wrap .doc-table th {
  white-space: normal;
  background: none;
}

.doc-table-wrap .doc-table td::before,
.doc-table-wrap .doc-table th::before {
  content: none;
}

.doc-table-wrap .doc-table__number .ident {
  white-space: normal;
  overflow-wrap: anywhere;
}

.doc-table-wrap .doc-table .doc-table__actions,
.doc-table-wrap .doc-table .doc-table__date,
.doc-table-wrap .doc-table .doc-table__amount {
  white-space: nowrap;
}

/* Record a past order: the yellow banner, one card per row, the order's standing. */
.notice--historical {
  border-left-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-weight: 600;
}
.past-rows__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.past-row {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}
.past-row__grid {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.past-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.past-summary > div {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}
.past-summary dt { font-size: 0.85rem; color: var(--color-text-muted); }
.past-summary dd { margin: 0.25rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.past-result { margin-bottom: 1.25rem; }
.past-result__title { font-size: 1.1rem; margin: 0 0 0.5rem; }
.past-correct__form { display: grid; gap: 0.5rem; padding-top: 0.5rem; min-width: 14rem; }
.past-log { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.doc-historical-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Company settings: the danger zone, shown only where a reset is allowed. */
.danger-zone {
  border: 1px solid var(--color-danger-border, #d14343);
  border-radius: var(--radius-small);
  padding: 1rem;
}

/* Tax setup problems: the warnings and the one-click fix wrap on a phone. */
.tax-warnings { margin: 0 0 0.5rem; padding-left: 1.1rem; overflow-wrap: anywhere; }
.tax-fix-form .button { white-space: normal; height: auto; text-align: left; max-width: 100%; }
.fix-link { white-space: nowrap; }

.order-panel__po-link { margin-left: 0.5rem; font-size: 0.85rem; white-space: nowrap; }

/* The customer's own wording for a line, small under our product name (documents and the quote form). */
.doc-item__their { display: block; font-size: 0.8em; color: var(--color-text-muted); font-style: italic; }
.doc__notes--box { border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: 0.5rem 0.75rem; }
.quote-their { display: block; margin-top: 0.35rem; font-weight: normal; }
.quote-their__label { display: block; font-size: 0.8rem; color: var(--color-text-muted); }
.quote-their input { width: 100%; }

.doc__notes--box { margin: 0.75rem 0; }

/* The customer's PO, the client's main reference, first and in view when a list scrolls sideways. */
.table--po-first > thead > tr > :first-child,
.table--po-first > tbody > tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: inset -1px 0 0 var(--color-border), 4px 0 6px -4px rgba(24, 32, 46, 0.18);
}
.table--po-first > thead > tr > :first-child { z-index: 3; }
.col-po { white-space: nowrap; }
.add-po-link { font-size: 0.8rem; white-space: nowrap; }

/* Receipts list fits a laptop screen like the other lists: a short PO column, tighter text columns, and
   PDF / Share / Send as icons, so On account is never under the column picker's edge. */
.orders-table__table.receipts-list > thead > tr > :first-child,
.orders-table__table.receipts-list > tbody > tr > :first-child {
  width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; white-space: normal; overflow-wrap: anywhere;
}
.orders-table:has(.receipts-list) .table-wrap { scroll-padding-left: 7.5rem; }
.orders-table__table.receipts-list .receipts-list__customer { min-width: 6rem; max-width: 8rem; }
.orders-table__table.receipts-list .receipts-list__parts { min-width: 7rem; max-width: 9rem; }
.orders-table__table.receipts-list .receipts-list__pdf,
.orders-table__table.receipts-list .receipts-list__send { white-space: nowrap; }
.orders-table__table.receipts-list .doc-icon-button { width: 1.9rem; height: 1.9rem; }

/* Pay supplier: a soft note (never a block) and the search above the bills. */
.notice--soft { border-left-color: var(--color-border-strong); background: transparent; color: var(--color-text-muted); }
.pay-supplier__search { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.pay-supplier__search input { min-width: 14rem; max-width: 100%; }
.pay-supplier__table input { max-width: 8rem; text-align: right; }
/* Pay supplier's bills table uses the page's full width, so Outstanding and Pay are always in view. */
.form.form--wide.pay-supplier { max-width: none; }
.pay-supplier .form-section { max-width: none; }

/* Shared list tables, header fixes (Home, Collections, Receipts, Quotations, and the PO-first lists):
   - the first column's heading stays left exactly like its cells: the resize rule above makes every
     heading position: relative, which no longer exempts it now the customer's PO is first;
   - the heading row stays on top while the list scrolls down inside its own frame (desktop), with the
     two corner headings above everything, on a solid background so nothing shows through. */
.orders-table__table > thead > tr > th[data-col]:first-child,
.orders-table__table > thead > tr > :first-child,
.table--po-first > thead > tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--color-surface-subtle);
}
.orders-table__table > thead > tr > :last-child { z-index: 4; }

@media (min-width: 48rem) {
  .orders-table .table-wrap,
  .table-wrap:has(> .table--po-first) {
    max-height: calc(100vh - 9rem);
    overflow: auto;
  }
  .orders-table__table > thead > tr > th,
  .table--po-first > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-surface-subtle);
  }
  .orders-table__table > thead > tr > th[data-col]:first-child,
  .orders-table__table > thead > tr > :first-child,
  .orders-table__table > thead > tr > :last-child,
  .table--po-first > thead > tr > :first-child {
    z-index: 5;
  }
}