.shell-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(178px, 1fr) 960px minmax(178px, 1fr);
  align-items: stretch;
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  background: #050505;
}

.brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  padding: 7px 14px;
}
.brand picture { display: block; line-height: 0; }
.brand img { display: block; width: 148px; max-width: 100%; height: 42px; object-fit: contain; }

.primary-nav {
  position: static;
  grid-column: 2;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 960px;
  height: 64px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
}
.primary-nav a {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.primary-nav .ui-icon { width: 22px; height: 22px; }
.primary-nav a[aria-current="page"] { border-color: #9f812c; background: var(--gold-action); color: #ffffff; font-weight: 600; }
.primary-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
.primary-nav a:hover { border-color: var(--border); background: #181819; }
.primary-nav a[aria-current="page"]:hover { background: #8e6f1b; }
.primary-nav a[aria-disabled="true"] { pointer-events: none; cursor: not-allowed; background: #0a0a0b; color: var(--silver); }
.primary-nav a[aria-disabled="true"] .ui-icon { opacity: 0.58; }

.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; }
.icon-button { position: relative; width: 50px; min-height: 50px; padding: 0; display: grid; place-items: center; }
.notification-count {
  position: absolute;
  right: -4px;
  top: -5px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid #050505;
  background: #a93d35;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.avatar { width: 50px; min-height: 50px; padding: 2px; border-radius: 999px; border-color: var(--gold); background: #0d0d0e; }
.avatar-image { display: block; width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }

.notification-drawer, .account-menu {
  position: absolute;
  z-index: 40;
  right: 14px;
  top: 70px;
  width: min(380px, calc(100vw - 28px));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px;
  background: #111113;
  box-shadow: var(--shadow);
}
.notification-drawer[hidden], .account-menu[hidden] { display: none; }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-heading h2 { margin: 0; font-size: 1.05rem; }
.notification-list { margin: 10px 0 0; padding: 0; list-style: none; }
.notification-list li { border-top: 1px solid var(--border); }
.notification-record { padding: 8px 0; }
.notification-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  min-height: 60px;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
}
.notification-item:hover { background: #1a1a1d; }
.notification-copy { display: grid; gap: 3px; min-width: 0; }
.notification-copy strong { color: #ffffff; font-size: 0.94rem; line-height: 1.25; overflow-wrap: anywhere; }
.notification-copy > span { color: var(--muted); font-size: 0.82rem; line-height: 1.35; overflow-wrap: anywhere; }
.notification-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 8px 4px 38px; }
.notification-action { min-height: 44px; padding: 0 10px; gap: 7px; white-space: nowrap; font-size: 0.82rem; color: #ffffff; }
.notification-action.primary { border-color: var(--gold); background: var(--gold-action); color: #ffffff; }
.notification-empty { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 18px 8px 12px; color: #ffffff; }
.notification-empty div { display: grid; gap: 4px; }
.notification-empty span { color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.notification-record.is-read { opacity: 0.76; }
.account-menu { display: grid; gap: 6px; width: 260px; }
.account-menu[data-anchor="footer"] { position: fixed; top: auto; right: 8px; bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) + 8px); }
.account-menu button { justify-content: flex-start; text-align: left; }

.market-tray {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  min-height: 46px;
  padding: 5px 18px;
  border-bottom: 1px solid var(--border);
  background: #080809;
  overflow-x: clip;
}
.market-icon { width: 22px; height: 22px; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-content: stretch;
  column-gap: 16px;
  min-width: 0;
  scroll-padding-inline: 10px;
}
.market-grid.is-auto-scrolling { scroll-behavior: auto; }
.market-item[data-ticker-clone] { pointer-events: none; }
.market-item {
  display: grid;
  grid-template-columns: max-content max-content;
  min-width: 0;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
.market-item:hover { border-color: var(--border-strong); background: #131315; }
.market-item strong { display: inline-flex; align-items: baseline; gap: 5px; color: #ffffff; font-size: 0.98rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.market-label { letter-spacing: 0.03em; }
.market-price { color: #ffffff; }
.market-item.metal-gold .market-label { color: var(--gold); }
.market-item.metal-silver .market-label { color: var(--silver); }
.market-item.metal-platinum .market-label { color: var(--platinum); }
.market-item.metal-palladium .market-label { color: var(--palladium); }
.market-item small { display: inline-flex; align-items: center; gap: 4px; color: var(--green-bright); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.market-change-percent { font-size: 0.78em; font-weight: 500; opacity: 0.9; }
.trend-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  filter: brightness(0) saturate(100%) invert(73%) sepia(78%) saturate(460%) hue-rotate(75deg) brightness(96%) contrast(91%);
}

.global-search {
  --global-search-leading: 50px;
  position: relative;
  z-index: 29;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 1440px;
  margin: 8px auto;
  padding: 0 18px;
}
.global-search input { min-height: 50px; }

.global-search-results {
  position: absolute;
  z-index: 45;
  top: calc(100% + 4px);
  right: 18px;
  left: var(--global-search-leading);
  max-height: min(420px, calc(100dvh - 190px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-frame);
  border-radius: 12px;
  background: #101012;
  box-shadow: var(--shadow);
}

.global-search-results-heading {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-divider);
  background: #121214;
}

.global-search-results-heading strong,
.global-search-results-heading span,
.global-search-results-group h2,
.global-search-result-copy > :is(strong, small) {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.global-search-results-heading strong { color: #ffffff; font-size: 0.8rem; }
.global-search-results-heading span { color: var(--muted); font-size: 0.7rem; text-align: right; }

.global-search-results-group { display: grid; min-width: 0; }
.global-search-results-group + .global-search-results-group { border-top: 1px solid var(--border-divider); }

.global-search-results-group h2 {
  margin: 0;
  padding: 8px 12px 5px;
  color: var(--gold);
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
}

.global-search-result {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.global-search-result + .global-search-result { border-top: 1px solid var(--border-divider); }

.global-search-result:hover,
.global-search-result:focus-visible { background: #19191c; }

.global-search-result > .ui-icon { width: 16px; height: 16px; }
.global-search-result > .ui-icon:last-child { justify-self: end; }

.global-search-result-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.global-search-result-copy strong { color: #ffffff; font-size: 0.78rem; line-height: 1.25; }
.global-search-result-copy small { color: var(--muted); font-size: 0.68rem; line-height: 1.3; }

main { max-width: 1600px; margin: 0 auto; padding: 0 14px 14px; }
.page-heading {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(480px, 540px) minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 8px 18px;
}
.title-lockup { min-width: 0; display: flex; align-items: center; gap: 10px; }
.title-icon { width: 24px; height: 24px; }
h1 { min-width: 0; margin: 0; font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; white-space: normal; }
.status { display: inline-flex; align-items: center; justify-self: end; gap: 7px; color: var(--silver-soft); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.session-clock { min-height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: #0f0f11; }
.session-clock .ui-icon { width: 16px; height: 16px; opacity: 0.76; }
.session-clock time { min-width: 0; color: #ffffff; font-weight: 500; letter-spacing: 0.01em; text-align: left; white-space: nowrap; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  height: clamp(420px, calc(100dvh - 284px), 774px);
  min-height: 0;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.workflow-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  background: transparent;
}
.workflow-tab {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #ffffff;
  font-weight: 500;
}
.workflow-tab:hover { background: #171719; }
.workflow-tab[aria-selected="true"] { border-color: var(--gold); background: var(--gold-action); color: #ffffff; font-weight: 600; }
.workflow-tab[aria-selected="false"] { background: transparent; color: #ffffff; }
.workflow-tab-index { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #4a4a50; border-radius: 999px; color: #ffffff; font-size: 0.8rem; font-weight: 600; }
.workflow-tab[aria-selected="true"] .workflow-tab-index { border-color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.14); color: #ffffff; }

.workflow-panels { min-width: 0; min-height: 0; height: 100%; }
.canvas { min-width: 0; height: 100%; padding: 14px 16px 16px; overflow: auto; background: var(--surface); }
.canvas#panel-items { overflow: hidden; }
.canvas[hidden] { display: none; }
.canvas > *:first-child { margin-top: 0; }
.canvas h2 { margin: 0 0 2px; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; }
.canvas > p { margin: 0 0 10px; color: var(--muted); }
.canvas > .eyebrow { margin: 0 0 4px; }
.eyebrow { color: var(--gold) !important; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.section-block { padding: 12px 0; border-top: 1px solid var(--border); }
.canvas > .visually-hidden + .section-block { padding-top: 0; border-top: 0; }
.section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.section-heading h3 { margin: 0; color: #ffffff; font-size: 0.98rem; white-space: nowrap; }
.section-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--gold-action); color: #ffffff; font-size: 0.8rem; font-weight: 600; }
.subsection-block { min-width: 0; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid #262629; }
.subsection-block:first-child { padding-top: 0; border-top: 0; }
.subsection-block h4 { margin: 0; color: #ffffff; font-size: 0.82rem; font-weight: 600; line-height: 1.3; }

.segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; }
.segmented-control button { border: 0; border-radius: 0; background: #111113; color: #ffffff; font-weight: 500; }
.segmented-control button + button { border-left: 1px solid var(--border-strong); }
.segmented-control button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-action); color: #ffffff; font-weight: 600; }
.segmented-control button[aria-pressed="false"] { background: #111113; color: #ffffff; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.facts > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #101012; }
.facts small { display: block; color: var(--muted); font-size: 0.76rem; }
.facts strong { display: block; margin-top: 3px; overflow: hidden; color: #ffffff; text-overflow: ellipsis; white-space: nowrap; }

.compact-stack, .invoice-ready-stack { display: grid; gap: 10px; }
.compact-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.workspace:has(#panel-details:not([hidden])) { height: auto; }
.workspace:has(#panel-checkout:not([hidden])) { height: auto; }
.workspace:has(#panel-details:not([hidden])) .workflow-panels,
.workspace:has(#panel-details:not([hidden])) #panel-details { height: auto; }
.workspace:has(#panel-checkout:not([hidden])) .workflow-panels,
.workspace:has(#panel-checkout:not([hidden])) #panel-checkout { height: auto; }
#panel-checkout { overflow: visible; }
#panel-details .section-block { min-height: 0; display: grid; grid-template-rows: auto auto; }
.customer-workbench {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 12px;
}
.details-primary { min-width: 0; }
.details-pane {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #09090a;
}
.details-primary { min-height: 0; grid-template-rows: auto auto auto; }
.details-pane-heading { min-height: 56px; padding: 6px 8px 6px 12px; }
.details-pane-heading h4 { margin: 0; color: #ffffff; font-size: 0.9rem; }
.details-pane-heading button { min-width: 120px; min-height: 44px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.customer-profile { width: 100%; min-height: 0; align-content: start; padding: 12px; overflow: visible; }
.customer-picker {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.customer-picker input, .customer-picker button { min-height: 52px; }
.customer-picker button { min-width: 132px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.customer-profile .quick-client-form { width: 100%; }
.customer-record-form .field-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.customer-record-form .field-stack:nth-child(1), .customer-record-form .field-stack:nth-child(2) { grid-column: span 3; }
.customer-record-form .field-stack:nth-child(3), .customer-record-form .field-stack:nth-child(4), .customer-record-form .field-stack:nth-child(5), .customer-record-form .field-stack:nth-child(7), .customer-record-form .field-stack:nth-child(8) { grid-column: span 2; }
.customer-record-form .invoice-tag-editor { min-width: 0; grid-column: span 2; grid-template-columns: minmax(0, 1fr); }
.customer-record-form .invoice-tag-editor .field-stack { min-width: 0; }
.customer-record-form input, .customer-record-form select { min-height: 50px; }
.customer-record-form .actions button { min-width: 132px; min-height: 50px; }
.customer-record-form.is-view input[readonly], .customer-record-form.is-view select:disabled { opacity: 1; border-color: #29292c; background: #0c0c0d; color: #ffffff; cursor: default; }
.customer-operation-row { display: grid; grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr); align-items: end; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.document-field, .transaction-field { min-width: 0; display: grid; grid-template-rows: auto 52px; align-self: stretch; gap: 6px; }
.document-field h5, .transaction-field h5 { margin: 0; color: #ffffff; font-size: 0.8rem; line-height: 1.25; }
.document-field .segmented-control, .transaction-field .segmented-control { width: 100%; max-width: none; }
.document-field .segmented-control button, .transaction-field .segmented-control button { min-height: 52px; padding-inline: 10px; overflow: hidden; font-size: 0.78rem; white-space: nowrap; }
.document-field .segmented-control button > span,
.transaction-field .segmented-control button > span,
.order-direction-control button > span { overflow: hidden; text-overflow: ellipsis; }
.document-field .segmented-control .action-icon,
.transaction-field .segmented-control .action-icon,
.order-direction-control .action-icon { width: 18px; height: 18px; }
.details-completion-actions { width: 100%; margin: 0; padding: 12px; border-top: 1px solid var(--border); }
.details-completion-actions button { width: min(240px, 100%); min-height: 52px; padding-inline: 16px; white-space: nowrap; }
.catalog-tools { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 8px; }
.catalog-tools button { min-width: 108px; min-height: 44px; }
.product-workbench { display: grid; gap: 12px; }
.product-entry-tools { width: 100%; grid-template-columns: minmax(260px, 1fr) repeat(3, auto); }
.items-workbench {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  align-items: start;
  gap: 16px;
}
.catalog-pane { min-width: 0; display: grid; gap: 12px; }
.catalog-pane > .subsection-block + .subsection-block { margin-top: 0; }
.cart-pane {
  min-width: 0;
  align-self: start;
  padding: 0 0 0 16px;
  border-top: 0;
  border-left: 1px solid var(--border);
}
.cart-content { min-width: 0; display: grid; gap: 10px; }
.empty-cart {
  min-height: 94px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: center;
  column-gap: 10px;
  padding: 12px;
  border: 1px dashed #3b3b40;
  border-radius: 12px;
  background: #0d0d0f;
}
.empty-cart img { grid-row: 1 / span 2; width: 26px; height: 26px; align-self: center; filter: brightness(0) invert(1); opacity: 0.74; }
.empty-cart strong { align-self: end; color: #ffffff; font-size: 0.88rem; }
.empty-cart span { color: var(--muted); font-size: 0.74rem; line-height: 1.35; }
.cart-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px 0; border-top: 1px solid var(--border); }
.cart-summary span { color: var(--muted); font-size: 0.78rem; }
.cart-summary strong { color: #ffffff; font-size: 1rem; font-variant-numeric: tabular-nums; }
.cart-pane .section-completion-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.cart-pane .section-completion-actions button { min-width: 0; padding-inline: 10px; }
.quick-client-form { display: grid; gap: 12px; }
.form-guidance { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field-stack { display: grid; gap: 6px; color: #ffffff; font-size: 0.8rem; font-weight: 500; }
.field-stack input, .field-stack select { min-height: 44px; }
.taxonomy {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  overflow: visible;
  padding-bottom: 3px;
}
.taxonomy button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 8px 10px;
  border-radius: 10px;
  color: #ffffff;
  background: #141416;
  font-weight: 500;
}
.taxonomy button > span { white-space: normal; overflow-wrap: normal; word-break: normal; text-align: center; }
.taxonomy button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-action); color: #ffffff; font-weight: 600; }
.catalog-browser { min-width: 0; width: 100%; max-width: 100%; overflow: hidden; }

.quick-picks, .catalog-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-card {
  min-width: 0;
  min-height: 142px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #0d0d0f;
}
.product-image, .product-placeholder { grid-row: 1 / span 2; width: 64px; height: 64px; align-self: start; border: 1px solid var(--border); border-radius: 11px; object-fit: contain; }
.product-image { background: transparent; }
.product-placeholder { display: grid; place-items: center; color: var(--gold); background: #050506; }
.product-placeholder img, .line-placeholder img { width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: 0.82; }
.product-copy { min-width: 0; display: grid; gap: 3px; }
.product-copy strong { display: -webkit-box; overflow: hidden; color: #ffffff; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-copy small { overflow: hidden; color: var(--muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.product-price { grid-column: 2; align-self: end; color: #ffffff; font-size: 0.94rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.availability { display: inline-flex; width: fit-content; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--green); color: #ffffff; font-size: 0.72rem; font-weight: 500; }
.availability.empty { background: #343438; color: #ffffff; }
.product-card > button { grid-column: 3; grid-row: 1 / span 2; align-self: end; min-width: 70px; min-height: 48px; padding: 0 13px; background: var(--gold-action); color: #ffffff; border-color: var(--gold); font-weight: 600; }
.product-card > button:disabled { background: #252528; color: #ffffff; }

.line-list { display: grid; gap: 8px; }
.line-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 112px auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--border); border-radius: 13px; background: #0d0d0f; }
.line-image, .line-placeholder { width: 52px; height: 52px; border: 1px solid var(--border); border-radius: 10px; object-fit: contain; }
.line-image { background: transparent; }
.line-placeholder { display: grid; place-items: center; color: var(--gold); background: #050506; }
.line-description { min-width: 0; display: grid; gap: 2px; }
.line-description strong, .line-description small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-description strong { color: #ffffff; }
.line-description small { color: var(--muted); font-size: 0.76rem; }
.quantity-control { display: grid; grid-template-columns: 46px 52px 46px; align-items: stretch; gap: 5px; }
.quantity-control button { min-width: 0; min-height: 48px; display: grid; place-items: center; padding: 0; line-height: 1; }
.quantity-control input {
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  padding: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 46px;
  text-align: center;
  text-indent: 0;
}
.quantity-control input::-webkit-inner-spin-button,
.quantity-control input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.line-price { min-width: 104px; display: grid; gap: 2px; text-align: right; }
.line-price small { color: var(--muted); font-size: 0.7rem; }
.line-price strong { color: #ffffff; font-variant-numeric: tabular-nums; }
.line-actions { display: flex; align-items: center; gap: 6px; }
.line-actions button { min-height: 44px; padding-inline: 11px; }
.line-status { width: fit-content; margin-top: 3px; padding: 2px 7px; border: 1px solid var(--copper); border-radius: 999px; color: #ffffff; font-size: 0.68rem; font-weight: 600; }
.line-status.approved { border-color: var(--green-bright); }
.remove-action { min-height: 48px; padding: 0 12px; border-color: transparent; background: var(--red); color: #ffffff; }
.cart-pane .line-row { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; }
.cart-pane .line-image, .cart-pane .line-placeholder { grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; align-self: start; }
.cart-pane .line-description { grid-column: 2 / 4; grid-row: 1; }
.cart-pane .line-description strong { white-space: normal; line-height: 1.25; }
.cart-pane .line-price { grid-column: 2 / 4; grid-row: 2; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: left; }
.cart-pane .quantity-control { grid-column: 2; grid-row: 3; grid-template-columns: 38px 46px 38px; }
.cart-pane .quantity-control button, .cart-pane .quantity-control input { min-height: 44px; }
.cart-pane .line-actions { grid-column: 3; grid-row: 3; justify-content: flex-end; }
.cart-pane .line-actions button { min-height: 44px; padding-inline: 8px; }
.cart-pane .override-form { grid-column: 1 / -1; }

.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary-action { border-color: var(--gold); background: var(--gold-action); color: #ffffff; font-weight: 600; }
.primary-action:hover { background: #92721b; }
.destructive-action { border-color: #d16a60; background: #7f2b25; color: #ffffff; font-weight: 600; }
.destructive-action:hover { border-color: #e37b70; background: #9b332c; color: #ffffff; }
.action-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.notice, .review-alert { padding: 10px 12px; border: 1px solid #7f382f; border-radius: 11px; background: #521f1a; color: #ffffff !important; }
.workflow-notice { margin: 10px 12px 0; border-color: var(--gold); background: #2a2416; color: #ffffff !important; }
.workflow-notice.success { border-color: #3d9851; background: #173e20; }
.workflow-notice.information { border-color: var(--silver); background: #23272c; }
.field, .payment-picker { display: grid; gap: 6px; color: #ffffff; font-size: 0.8rem; font-weight: 500; line-height: 1.2; }
.override-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 10px; }
.tax-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #0d0d0f; }
.tax-form .actions { margin: 0; }
.checkout-summary { display: grid; gap: 12px; }
.checkout-review-content { display: grid; gap: 14px; }
.checkout-items {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-spacing: 0;
  border-radius: 12px;
  background: #0b0b0d;
  table-layout: fixed;
}
.checkout-items thead th {
  height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-strong);
  background: #171719;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.checkout-items thead th:nth-child(2) { width: 68px; }
.checkout-items thead th:nth-child(3) { width: 118px; }
.checkout-items thead th:nth-child(4) { width: 132px; }
.checkout-items thead th:nth-child(n+2) { text-align: right; }
.checkout-item-row { min-width: 0; background: #0d0d0f; }
.checkout-item-row + .checkout-item-row > * { border-top: 1px solid var(--border); }
.checkout-item-row > * { height: auto; min-height: 72px; padding: 9px 12px; vertical-align: middle; }
.checkout-ledger-product { min-width: 0; display: flex; align-items: center; gap: 11px; text-align: left; }
.checkout-item-image, .checkout-item-placeholder { width: 50px; height: 50px; flex: 0 0 50px; object-fit: contain; border: 1px solid var(--border); border-radius: 9px; }
.checkout-item-image { background: transparent; }
.checkout-item-placeholder { display: grid; place-items: center; color: var(--gold); background: #050506; }
.checkout-item-placeholder img { width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: 0.82; }
.checkout-item-copy { min-width: 0; display: grid; gap: 3px; font-weight: 400; }
.checkout-item-copy strong { display: -webkit-box; overflow: hidden; color: #ffffff; font-size: 0.85rem; font-weight: 600; line-height: 1.2; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.checkout-item-copy small { overflow: hidden; color: var(--muted); font-size: 0.7rem; font-weight: 400; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.checkout-ledger-quantity,
.checkout-ledger-unit-price,
.checkout-ledger-line-total { color: #ffffff; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-ledger-quantity strong { font-size: 0.9rem; font-weight: 600; }
.checkout-ledger-unit-price strong { font-size: 0.88rem; font-weight: 500; }
.checkout-ledger-line-total strong { font-size: 0.98rem; font-weight: 600; }
.checkout-mobile-label { display: none; }
.checkout-totals-section {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}
.checkout-totals-section > h4 { margin: 0; color: #ffffff; font-size: 0.88rem; font-weight: 600; }
.checkout-totals-actions { justify-content: stretch; margin: 0; }
.checkout-totals-actions button { width: 100%; min-height: 48px; white-space: nowrap; }
.checkout-totals {
  width: 100%;
  overflow: hidden;
  display: grid;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #0d0d0f;
}
.checkout-total-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 20px; padding: 10px 12px; }
.checkout-total-row + .checkout-total-row { border-top: 1px solid var(--border); }
.checkout-total-row dt { color: var(--muted); font-size: 0.76rem; font-weight: 500; }
.checkout-total-row dd { margin: 0; color: #ffffff; font-size: 0.94rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-grand-total { min-height: 58px; padding: 12px; border-top: 1px solid var(--gold) !important; background: var(--gold-action); }
.checkout-grand-total dt,
.checkout-grand-total dd { color: #ffffff; }
.checkout-grand-total dt { font-size: 0.82rem; font-weight: 600; }
.checkout-grand-total dd { font-size: clamp(1.12rem, 1.7vw, 1.34rem); font-weight: 600; letter-spacing: -0.02em; }
.checkout-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 29vw, 410px);
  align-items: start;
  gap: 16px;
}
.checkout-review-pane, .checkout-payment-pane { min-width: 0; }
.checkout-review-pane > .section-block, .checkout-payment-pane > .section-block { padding-top: 0; border-top: 0; }
.checkout-payment-pane > .section-block { padding-bottom: 0; }
.checkout-payment-pane > .checkout-summary + .section-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.checkout-payment-pane .section-heading { margin-bottom: 10px; }
.checkout-payment-pane { padding-left: 16px; border-left: 1px solid var(--border); }
.payment-facts small { font-size: 0.7rem; line-height: 1.1; }
.payment-facts strong { margin-top: 2px; line-height: 1.15; }
.payment-facts strong { font-size: 0.82rem; }
.payment-layout { width: 100%; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 10px; }
.settlement-picker { align-self: stretch; white-space: nowrap; }
.settlement-picker select { height: 52px; min-height: 52px; padding-inline: 14px; font-size: 0.94rem; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.payment-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.payment-facts > div { height: 52px; min-height: 52px; display: grid; align-content: center; padding: 6px 12px; border-radius: 10px; }
.section-completion-actions { width: 100%; }
.checkout-completion-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.checkout-completion-actions button { width: 100%; height: 52px; min-width: 0; min-height: 52px; padding-inline: 12px; overflow: hidden; white-space: nowrap; }
.checkout-completion-actions button > span { overflow: hidden; text-overflow: ellipsis; }
.checkout-completion-actions .action-icon { width: 18px; height: 18px; }
.checkout-completion-actions .primary-action { grid-column: 1 / -1; }
.simulation-note { margin: 0; color: var(--muted); font-size: 0.78rem; }

.invoice-document { overflow: hidden; border: 1px solid #d8dbe0; border-radius: 14px; background: #ffffff; color: #151517; }
.invoice-header { position: static; display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; background: #050505; }
.invoice-logo { width: 180px; max-width: 46%; height: 48px; object-fit: contain; object-position: left center; }
.invoice-title { min-width: 0; display: grid; justify-items: end; color: #ffffff; text-align: right; }
.invoice-title strong { font-size: 1.15rem; letter-spacing: 0.08em; white-space: nowrap; }
.invoice-title span { color: var(--silver-soft); font-size: 0.76rem; }
.invoice-parties { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 18px 22px 12px; }
.invoice-parties > div { display: grid; gap: 2px; }
.invoice-parties small, .invoice-metadata small { color: #65666b; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.invoice-parties strong { color: #151517; }
.invoice-parties span { color: #5f6065; font-size: 0.8rem; }
.invoice-metadata { justify-items: end; text-align: right; }
.invoice-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 14px; }
.invoice-tags:empty { display: none; }
.invoice-tags span { padding: 3px 8px; border-radius: 999px; background: #3b4149; color: #ffffff; font-size: 0.68rem; font-weight: 600; }
.invoice-table { width: calc(100% - 44px); margin: 0 22px; border-collapse: collapse; font-size: 0.78rem; }
.invoice-table th { padding: 9px 10px; background: var(--gold-action); color: #ffffff; font-weight: 600; text-align: left; }
.invoice-table th:nth-child(n+2), .invoice-table td:nth-child(n+2) { text-align: right; }
.invoice-table td { padding: 10px; border-bottom: 1px solid #e1e3e6; color: #222226; vertical-align: top; }
.invoice-table td:first-child { display: grid; gap: 2px; }
.invoice-table td small { color: #6c6d72; }
.invoice-totals { width: min(340px, calc(100% - 44px)); display: grid; gap: 6px; margin: 14px 22px 14px auto; }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 20px; color: #44454a; }
.invoice-totals .invoice-total { margin-top: 3px; padding: 10px 12px; border-radius: 9px; background: var(--gold-action); color: #ffffff; }
.invoice-total strong { color: #ffffff; }
.invoice-footer { display: flex; justify-content: space-between; gap: 14px; padding: 12px 22px; border-top: 1px solid #dedfe2; color: #5f6065; font-size: 0.72rem; }

#invoice-print-root { background: #ffffff; }
#invoice-print-root[hidden] { display: none; }

body > footer {
  position: fixed;
  z-index: 35;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: calc(var(--footer-height) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-strong);
  background: #050506;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
}
body > footer button { min-width: 0; min-height: 44px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 clamp(4px, 1vw, 12px); overflow: hidden; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #ffffff; font-size: 0.7rem; font-weight: 500; white-space: nowrap; }
body > footer button .ui-icon { width: 14px; height: 14px; }
body > footer button:not(:disabled):not([aria-current="page"]):hover { background: #19191b; }
body > footer button[aria-current="page"] { border-color: rgba(241, 204, 99, 0.48); background: #17140c; color: #ffffff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
body > footer button[aria-current="page"]:hover { background: #1d180d; }
body > footer button:disabled { opacity: 1; border-color: transparent; background: transparent; color: #737983; }
body > footer button:disabled .ui-icon { opacity: 0.42; }

.invoice-queue-page { min-width: 0; display: grid; gap: 12px; padding: 10px 0 18px; }
.invoices-page-heading { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: #0b0b0c; }
.invoices-title-copy { min-width: 0; display: grid; gap: 3px; }
.invoices-title-copy .eyebrow { margin: 0; font-size: 0.7rem; }
.invoices-title-copy h1 { margin: 0; color: #ffffff; font-size: clamp(1.55rem, 2.8vw, 2.05rem); line-height: 1.1; }
.invoices-title-copy p { max-width: 760px; margin: 0; color: var(--muted); font-size: 0.82rem; }
.invoices-heading-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.invoices-heading-actions > button { min-height: 48px; }
.queue-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.queue-metric { min-height: 70px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; justify-content: start; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #121214; text-align: left; }
.queue-metric strong { grid-row: 1 / span 2; align-self: center; color: #ffffff; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.queue-metric > span { overflow: hidden; color: #ffffff; font-size: 0.76rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.queue-metric > small { overflow: hidden; color: var(--muted); font-size: 0.68rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.queue-metric[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-action); color: #ffffff; }
.queue-metric[aria-pressed="true"] > :is(span, strong, small) { color: #ffffff; }
.queue-metric[aria-pressed="false"] { background: #121214; color: #ffffff; }
.quote-queue-shell { min-width: 0; display: grid; overflow: visible; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #09090a; }
.queue-heading { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.queue-heading > div { min-width: 0; display: grid; gap: 2px; }
.queue-heading h2 { margin: 0; color: #ffffff; font-size: 1.08rem; line-height: 1.2; }
.queue-heading p { margin: 0; color: var(--muted); font-size: 0.73rem; }
.queue-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(190px, 260px); align-items: end; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #0d0d0f; }
.queue-search { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; }
.queue-search .ui-icon { width: 18px; height: 18px; }
.queue-search input { min-height: 44px; }
.queue-filter-select { display: grid; min-width: 0; gap: 5px; color: #ffffff; font-size: 0.72rem; font-weight: 600; }
.queue-filter-select select { width: 100%; min-width: 0; min-height: 44px; }
.queue-filters { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.queue-filters button { min-width: 0; min-height: 44px; padding-inline: 6px; overflow: hidden; background: #171719; color: #ffffff; font-size: 0.7rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.queue-filters button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-action); color: #ffffff; font-weight: 600; }
.queue-summary, .queue-storage-note { margin: 0; line-height: 1.35; }
.queue-summary { color: #ffffff; font-size: 0.74rem; font-weight: 500; }
.queue-storage-note { color: var(--muted); font-size: 0.68rem; text-align: right; }
.quote-queue-list { min-width: 0; display: grid; align-content: start; gap: 1px; padding: 0 14px 14px; overflow: visible; }
.queue-empty { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 7px; padding: 28px; border: 1px dashed var(--border-strong); border-radius: 12px; color: #ffffff; text-align: center; }
.queue-empty > .ui-icon { width: 26px; height: 26px; }
.queue-empty p { max-width: 520px; margin: 0; color: var(--muted); font-size: 0.78rem; }
.queue-empty button { margin-top: 6px; }
.queue-card { position: relative; min-width: 0; min-height: 84px; display: grid; grid-template-columns: minmax(210px, 1.15fr) minmax(132px, 0.58fr) minmax(280px, 1fr) minmax(190px, auto); align-items: center; gap: 12px; padding: 11px 10px; border: 0; border-bottom: 1px solid var(--border); background: #0d0d0f; }
.queue-card:first-child { border-radius: 10px 10px 0 0; }
.queue-card:last-child { border-bottom: 0; border-radius: 0 0 10px 10px; }
.queue-card-identity { min-width: 0; display: grid; gap: 2px; }
.queue-card-identity strong { color: #ffffff; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.queue-card-identity span { overflow: hidden; color: var(--muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.queue-card-identity span:first-of-type { color: var(--silver-soft); font-weight: 500; }
.queue-card-statuses { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.queue-status, .queue-delivery { max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid transparent; border-radius: 999px; color: #ffffff; font-size: 0.62rem; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.phase-quote { border-color: #c0784f; background: #85502f; }
.phase-draft { border-color: #6f7b8a; background: #46505e; }
.phase-sent { border-color: #5792bb; background: #315a7a; }
.phase-live { border-color: #45a85a; background: #176b2d; }
.phase-settlement { border-color: var(--gold); background: var(--gold-action); }
.phase-complete { border-color: #737d89; background: #3b4149; }
.phase-cancelled { border-color: #d16a60; background: #7f2b25; }
.delivery-not-sent { border-color: #525258; background: #29292d; }
.delivery-email-prepared { border-color: var(--silver); background: #3b4149; }
.delivery-awaiting-customer { border-color: #ce7a4b; background: #71391f; }
.delivery-responded { border-color: #45a85a; background: #176b2d; }
.queue-card-facts { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; color: var(--muted); font-size: 0.69rem; }
.queue-card-facts strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #ffffff; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.queue-card-facts time { grid-column: 1; white-space: nowrap; }
.queue-card-actions { min-width: 0; display: grid; grid-template-columns: minmax(120px, 1fr) 44px; align-items: center; gap: 6px; }
.queue-card-actions > button { min-width: 0; min-height: 44px; padding-inline: 10px; overflow: hidden; font-size: 0.72rem; white-space: nowrap; }
.queue-card-actions > button > span { overflow: hidden; text-overflow: ellipsis; }
.queue-action-menu { position: relative; width: 44px; }
.queue-action-menu summary { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: #ffffff; cursor: pointer; list-style: none; }
.queue-action-menu summary::-webkit-details-marker { display: none; }
.queue-action-menu summary::marker { display: none; content: ""; }
.queue-action-menu summary:hover, .queue-action-menu[open] summary { border-color: var(--gold); background: #222225; }
.queue-action-menu summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.queue-action-menu summary .ui-icon { width: 18px; height: 18px; }
.queue-action-menu-popover { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; width: 220px; display: grid; gap: 5px; padding: 7px; border: 1px solid var(--border-strong); border-radius: 11px; background: #111113; box-shadow: 0 16px 42px rgba(0, 0, 0, 0.58); }
.queue-action-menu-popover button { width: 100%; min-height: 44px; justify-content: flex-start; padding-inline: 10px; font-size: 0.72rem; white-space: nowrap; }

@media (min-width: 821px) {
  .segmented-control, .payment-picker { max-width: 760px; }
}

@media print {
  @page { size: letter; margin: 0.35in; }
  body.printing-invoice { padding: 0; background: #ffffff; }
  body.printing-invoice > :not(#invoice-print-root) { display: none !important; }
  body.printing-invoice #invoice-print-root { display: block !important; }
  body.printing-invoice .invoice-document { border: 0; border-radius: 0; }
}

@media (max-width: 1320px) {
  .market-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .market-grid::-webkit-scrollbar { display: none; }
  .market-item { flex: 0 0 320px; }
}

@media (max-width: 1180px) {
  .shell-header { grid-template-columns: minmax(164px, 1fr) 624px minmax(164px, 1fr); }
  .brand { padding-inline: 12px; }
  .brand img { width: 136px; }
  .primary-nav { width: 624px; }
  .primary-nav a { min-width: 0; gap: 6px; padding-inline: 7px; font-size: 0.8rem; }
  .primary-nav .ui-icon { width: 20px; height: 20px; }
  .workspace { min-height: 0; }
  .canvas { padding-inline: 16px; }
  .market-tray { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding-inline: 14px; }
  .market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; gap: 4px 10px; }
  .market-item { column-gap: 6px; padding-inline: 4px; }
  .market-item strong, .market-item small { font-size: 0.82rem; }
}

@media (max-width: 1024px) {
  .shell-header { grid-template-columns: minmax(144px, 1fr) 456px minmax(144px, 1fr); }
  .primary-nav { width: 456px; }
  .primary-nav a { min-width: 72px; }
  .primary-nav a { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 0.68rem; line-height: 1; }
  .primary-nav .ui-icon { width: 20px; height: 20px; }
  .market-grid { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .market-grid::-webkit-scrollbar { display: none; }
  .market-item { flex: 0 0 300px; padding-inline: 10px; }
  .product-entry-tools { grid-template-columns: minmax(220px, 1fr) repeat(3, auto); }
  .product-entry-tools button { min-width: 92px; padding-inline: 10px; }
  .items-workbench { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 14px; }
  .checkout-workbench { gap: 14px; }
}

@media (max-width: 960px) {
  .checkout-workbench { grid-template-columns: minmax(0, 1fr); }
  .checkout-payment-pane { padding: 14px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .payment-layout { grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .shell-header { grid-template-columns: 144px minmax(0, 1fr) auto; }
  .primary-nav { width: 100%; }
  .customer-workbench, .items-workbench { grid-template-columns: minmax(0, 1fr); }
  .customer-record-form .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-record-form .field-stack:nth-child(n) { grid-column: auto; }
  .customer-record-form .invoice-tag-editor { grid-column: auto; }
  .customer-operation-row { grid-template-columns: minmax(0, 1fr); }
  .items-workbench { gap: 12px; }
  .cart-pane {
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@media (max-width: 820px) {
  .shell-header { grid-template-columns: 132px minmax(0, 1fr) auto; min-height: 60px; }
  .brand { padding: 5px 10px; }
  .brand img { width: 112px; height: 42px; }
  .primary-nav { height: 60px; padding: 5px; }
  .primary-nav a { min-height: 50px; padding-inline: 8px; font-size: 0.78rem; gap: 5px; }
  .primary-nav .ui-icon { width: 19px; height: 19px; }
  .header-actions { gap: 6px; padding-inline: 8px; }
  .icon-button, .avatar { width: 48px; min-height: 48px; }
  .avatar-image { width: 42px; height: 42px; }
  .market-tray { padding-inline: 12px; }
  .global-search, main { padding-inline: 12px; }
  .quick-picks, .catalog-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card { grid-template-columns: 56px minmax(0, 1fr) auto; min-height: 134px; gap: 7px 9px; }
  .product-image, .product-placeholder { width: 56px; height: 56px; }
  .line-row { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
  .line-price { grid-column: 2; grid-row: 2; text-align: left; }
  .quantity-control { grid-column: 3; grid-row: 1 / span 2; }
  .remove-action { grid-column: 4; grid-row: 1 / span 2; }
  .tax-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .line-image, .line-placeholder { grid-column: 1; grid-row: 1 / span 2; }
  .line-description { grid-column: 2; grid-row: 1; }
  .line-price { grid-column: 3; grid-row: 1; text-align: right; }
  .quantity-control { grid-column: 2; grid-row: 2; }
  .line-actions { grid-column: 3; grid-row: 2; }
  body > footer { gap: 3px; padding: 3px 6px calc(3px + env(safe-area-inset-bottom)); }
  body > footer button { min-height: 44px; height: 44px; flex-direction: column; gap: 1px; padding-inline: 2px; border-radius: 8px; font-size: 0.62rem; }
  body > footer button .ui-icon { width: 14px; height: 14px; }
  .queue-toolbar { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px; }
  .queue-storage-note { text-align: left; }
  .quote-queue-list { padding: 10px 12px 14px; }
}

@media (max-width: 620px) {
  .shell-header { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .brand { justify-self: stretch; justify-content: center; padding: 4px; }
  .brand picture, .brand img { width: 40px; height: 40px; }
  .primary-nav a { min-width: 0; padding-inline: 0; }
  .primary-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .primary-nav a { width: 100%; gap: 0; }
  .header-actions { width: 48px; gap: 0; padding-inline: 2px; }
  .avatar { display: grid; width: 44px; min-height: 44px; }
  .avatar-image { width: 38px; height: 38px; }
  .page-heading { min-height: 48px; }
  .status { display: inline-flex; font-size: 0.72rem; }
  .session-clock { min-height: 34px; gap: 6px; padding-inline: 8px; border-radius: 9px; }
  .session-clock .ui-icon { width: 15px; height: 15px; }
  .market-tray { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding-inline: 8px; }
  .market-icon { width: 18px; height: 18px; }
  .market-grid { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .market-grid::-webkit-scrollbar { display: none; }
  .market-item { flex: 0 0 240px; grid-template-columns: max-content max-content; justify-content: center; column-gap: 6px; min-height: 36px; padding: 4px 5px; }
  .market-item strong { display: inline-flex; align-items: baseline; gap: 4px; font-size: 0.78rem; }
  .market-label { font-size: 0.7rem; line-height: 1.1; }
  .market-price { font-size: 0.78rem; line-height: 1.2; }
  .market-item small { align-self: center; gap: 3px; font-size: 0.68rem; }
  .trend-icon { width: 12px; height: 12px; }
  .workspace { margin-top: 8px; border-radius: 14px; }
  .workflow-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 4px; padding: 6px; }
  .workflow-tab { min-height: 48px; gap: 6px; padding: 6px; font-size: 0.82rem; }
  .workflow-tab-index { width: 24px; height: 24px; font-size: 0.72rem; }
  .canvas { padding: 14px 12px 18px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: 1fr; }
  .customer-record-form .field-grid { grid-template-columns: minmax(0, 1fr); }
  .customer-record-form .field-stack:nth-child(n) { grid-column: auto; }
  .customer-record-form .invoice-tag-editor { grid-column: auto; }
  .customer-picker { grid-template-columns: minmax(0, 1fr); }
  .customer-picker input { grid-column: 1; }
  .customer-picker button { min-width: 0; padding-inline: 6px; font-size: 0.76rem; }
  .customer-picker button .action-icon { display: none; }
  .details-completion-actions { width: 100%; }
  .details-completion-actions button { width: 100%; }
  .catalog-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-tools input { grid-column: 1 / -1; }
  .catalog-tools button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding-inline: 7px; }
  .catalog-tools:has(> button:nth-of-type(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-entry-tools .action-icon { display: none; }
  .product-entry-tools button { font-size: 0.72rem; white-space: nowrap; }
  .quick-picks, .catalog-results { grid-template-columns: minmax(0, 1fr); }
  .product-card { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .product-image, .product-placeholder { width: 58px; height: 58px; }
  .compact-editor, .customer-profile > .compact-editor, .override-form, .tax-form { grid-template-columns: 1fr; }
  .payment-layout { grid-template-columns: minmax(0, 1fr); }
  .line-row { grid-template-columns: 46px minmax(0, 1fr); }
  .line-image, .line-placeholder { grid-column: 1; grid-row: 1 / span 2; }
  .line-description { grid-column: 2; grid-row: 1; }
  .line-price { grid-column: 2; grid-row: 2; text-align: left; }
  .quantity-control { grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); }
  .line-actions { grid-column: 1 / -1; grid-row: 4; }
  .line-actions button { flex: 1 1 0; }
  .cart-pane .line-row { grid-template-columns: 46px minmax(0, 1fr); }
  .cart-pane .line-image, .cart-pane .line-placeholder { grid-column: 1; grid-row: 1 / span 2; }
  .cart-pane .line-description { grid-column: 2; grid-row: 1; }
  .cart-pane .line-price { grid-column: 2; grid-row: 2; text-align: left; }
  .cart-pane .quantity-control { grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); }
  .cart-pane .line-actions { grid-column: 1 / -1; grid-row: 4; }
  .cart-pane .line-actions button { flex: 1 1 0; }
  .cart-pane .section-completion-actions { grid-template-columns: minmax(0, 1fr); }
  .checkout-completion-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-completion-actions button { gap: 6px; padding-inline: 8px; font-size: 0.78rem; }
  .checkout-completion-actions .action-icon { width: 16px; height: 16px; }
  .checkout-completion-actions .primary-action { grid-column: 1 / -1; }
  .invoice-header { gap: 10px; padding: 15px 16px; }
  .invoice-logo { max-width: 48%; }
  .invoice-title strong { font-size: clamp(0.76rem, 3.8vw, 0.95rem); letter-spacing: 0.05em; }
  .invoice-parties { grid-template-columns: 1fr; gap: 12px; padding-inline: 16px; }
  .invoice-metadata { justify-items: start; text-align: left; }
  .invoice-tags { padding-inline: 16px; }
  .invoice-table { width: calc(100% - 32px); max-width: calc(100% - 32px); margin-inline: 16px; table-layout: fixed; font-size: 0.7rem; }
  .invoice-table th:first-child { width: 38%; }
  .invoice-table th:nth-child(2) { width: 10%; }
  .invoice-table th:nth-child(3) { width: 25%; }
  .invoice-table th:nth-child(4) { width: 27%; }
  .invoice-table th, .invoice-table td { padding: 8px 5px; }
  .invoice-table td:first-child strong, .invoice-table td:first-child small { overflow-wrap: anywhere; }
  .invoice-table th:nth-child(n+2), .invoice-table td:nth-child(n+2) { font-size: clamp(0.6rem, 2.8vw, 0.7rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .invoice-totals { width: calc(100% - 32px); margin-inline: 16px; }
  .invoice-footer { flex-direction: column; padding-inline: 16px; }
  body > footer button span { display: none; }
  body > footer button[aria-current="page"] span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .queue-heading { min-height: 64px; padding: 9px 10px; }
  .queue-heading h2 { font-size: 1.18rem; }
  .icon-only-button { min-width: 44px; min-height: 44px; padding-inline: 10px; }
  .queue-toolbar { gap: 7px; padding: 8px 10px 9px; }
  .queue-search input { min-height: 44px; }
  .queue-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .queue-filters button { min-height: 44px; }
  .quote-queue-list { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px 10px 12px; }
  .queue-card { gap: 8px; padding: 10px; }
}

/* Final shell overrides are kept at the end so route-specific media rules cannot undo them. */
.primary-nav > .global-search:focus-within { box-shadow: none; }
.primary-nav > .global-search .ui-icon { width: var(--icon-action, 18px); height: var(--icon-action, 18px); }
.platform-financial-metric.is-interactive.is-active { box-shadow: none; border-color: var(--gold-bright); background: #191918; }
.account-menu { padding: 10px; }
.account-profile-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 11px; background: #151517; }
.account-profile-avatar { width: 42px; height: 42px; border: 1px solid var(--gold); border-radius: 50%; object-fit: cover; }
.account-profile-copy { display: grid; min-width: 0; gap: 2px; }
.account-profile-copy strong { color: #ffffff; font-size: 0.86rem; line-height: 1.2; }
.account-profile-copy span { color: var(--muted); font-size: 0.72rem; line-height: 1.25; }
.account-profile-copy small { color: #7f858f; font-size: 0.66rem; line-height: 1.2; overflow-wrap: anywhere; }
.account-menu-divider { height: 1px; margin: 2px 4px; background: var(--border-divider); }
.account-menu :is(a, button) { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 12px; }
.account-menu :is(a, button) .ui-icon { width: var(--icon-action, 18px); height: var(--icon-action, 18px); opacity: 0.9; }
.platform-field-label { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: #ffffff; }
.field-label-icon { width: var(--icon-meta, 16px); height: var(--icon-meta, 16px); opacity: 0.82; }
.platform-field-label-text { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .primary-nav .ui-icon { width: 18px; height: 18px; }
  .customer-picker button .action-icon,
  .product-entry-tools .action-icon { display: block; }
  .product-entry-tools button { gap: 5px; padding-inline: 6px; font-size: 0.7rem; }
  .account-profile-card { grid-template-columns: 38px minmax(0, 1fr); }
  .account-profile-avatar { width: 38px; height: 38px; }
}

#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) { grid-template-columns: var(--icon-meta, 16px) minmax(0, 1fr); align-items: center; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > :is(input, select, textarea) { grid-column: 1 / -1; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > .action-icon { grid-column: 1; grid-row: 1; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > .field-label-text { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }

#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) { grid-template-columns: var(--icon-meta, 16px) minmax(0, 1fr); align-items: center; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > :is(input, select, textarea) { grid-column: 1 / -1; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > .action-icon { grid-column: 1; grid-row: 1; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > .field-label-text { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 821px) and (max-width: 1320px) {
  .primary-nav:has(> .global-search) { grid-template-columns: repeat(6, minmax(74px, 1fr)) minmax(148px, 1.35fr); }
  .primary-nav > .global-search { width: 100%; justify-self: stretch; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding-inline: 10px; }
  .primary-nav > .global-search input { width: 100%; opacity: 1; }
}

#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) {
  grid-template-columns: var(--icon-meta, 16px) minmax(0, 1fr);
  align-items: center;
}
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > .action-icon,
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > input,
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > select,
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > textarea { min-width: 0; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > :is(input, select, textarea) { grid-column: 1 / -1; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > .action-icon { grid-column: 1; grid-row: 1; }
#order-entry-page :is(.field-stack, .catalog-search-field, .payment-picker) > .field-label-text { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }

/* Review Queue: preserve a complete, non-wrapping action vocabulary on narrow canvases. */
@media (max-width: 420px) {
  body[data-route="review"] .platform-page-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
  }

  body[data-route="review"] .platform-page-actions > button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 379px) {
  .title-lockup { gap: 7px; }
  .title-icon { width: 21px; height: 21px; }
  h1 { font-size: 1.28rem; }
  .market-tray { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding-inline: 8px; }
  .market-grid { gap: 6px; }
  .market-item { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; gap: 4px; padding-inline: 4px; }
  .market-item small { font-size: 0.66rem; }
  .workflow-tab { font-size: 0.68rem; }
  .facts { grid-template-columns: 1fr; }
  .client-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-facts > div { padding: 10px; }
  .client-facts > div:nth-child(3) strong { font-size: 0.84rem; }
  .payment-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .payment-facts > div { padding-inline: 6px; }
  .catalog-tools:has(> button:nth-of-type(3)) .action-icon { display: none; }
  .catalog-tools:has(> button:nth-of-type(3)) button { padding-inline: 4px; font-size: 0.72rem; }
  .invoice-table { width: calc(100% - 24px); max-width: calc(100% - 24px); margin-inline: 12px; }
  body > footer button .ui-icon { width: 13px; height: 13px; }
  /* Keep the compact footer icon-only at the narrowest canvas so its active
     state cannot truncate a label or introduce horizontal page overflow. */
  body > footer button span,
  body > footer button[aria-current="page"] span { display: none; }
}

/* Work + Accounting Center: compact financial command surfaces */
.platform-finance-metrics {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--metric-card-min-height);
  align-items: stretch;
  gap: 14px;
}

.platform-financial-metric {
  display: grid;
  min-width: 0;
  height: var(--metric-card-min-height);
  min-height: var(--metric-card-min-height);
  grid-template-rows: auto minmax(30px, auto) auto 6px;
  align-content: space-between;
  gap: 6px;
  padding: var(--card-padding-block) var(--card-padding-inline);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font: inherit;
  text-align: left;
}

.platform-financial-metric.is-interactive {
  width: 100%;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.platform-financial-metric.is-interactive:hover {
  border-color: var(--gold);
  background: #191918;
  transform: translateY(-1px);
}

.platform-financial-metric.is-interactive.is-active {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(241, 204, 99, 0.22), 0 12px 32px rgba(0, 0, 0, 0.28);
}

.platform-financial-metric.inflow { border-color: #315d3b; }
.platform-financial-metric.outflow { border-color: #745035; }
.platform-financial-metric.attention { border-color: #8d742c; }

.financial-metric-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--silver-soft);
  font-size: var(--metric-label-size);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.financial-metric-heading .ui-icon { width: 17px; height: 17px; }
.financial-metric-heading > span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.financial-metric-heading .metric-drilldown-icon { width: 15px; height: 15px; margin-left: auto; }

.platform-financial-metric > strong {
  overflow: hidden;
  color: #ffffff;
  font-size: var(--metric-value-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-financial-metric > small {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.platform-financial-metric meter,
.cash-direction-row meter {
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #252528;
}

.platform-financial-metric meter::-webkit-meter-bar,
.cash-direction-row meter::-webkit-meter-bar {
  border: 0;
  border-radius: 999px;
  background: #252528;
}

.platform-financial-metric meter::-webkit-meter-optimum-value,
.cash-direction-row meter::-webkit-meter-optimum-value {
  border-radius: 999px;
  background: var(--gold);
}

.platform-financial-metric.inflow meter::-webkit-meter-optimum-value,
.cash-direction-row.inflow meter::-webkit-meter-optimum-value { background: var(--green-bright); }

.platform-financial-metric.outflow meter::-webkit-meter-optimum-value,
.cash-direction-row.outflow meter::-webkit-meter-optimum-value { background: var(--copper); }

.work-layout,
.accounting-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(640px, 1.62fr) minmax(340px, 0.78fr);
  align-items: start;
  gap: var(--space-4);
}

.work-agenda-panel,
.work-decisions-panel { min-width: 0; }

.work-agenda-heading { min-height: 74px; }

.work-agenda-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.appointment-ledger {
  display: grid;
  min-width: 0;
}

.appointment-ledger-columns {
  display: grid;
  min-width: 0;
  min-height: 38px;
  grid-template-columns: 72px minmax(160px, 1.2fr) 110px 108px 90px 145px 54px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: #111113;
  color: var(--silver-soft);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.appointment-ledger-row {
  display: grid !important;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 72px minmax(160px, 1.2fr) 110px 108px 90px 145px 54px;
  align-items: center;
  justify-content: stretch !important;
  gap: 10px !important;
  padding: 8px 14px;
  border-width: 0 0 1px;
  border-radius: 0 !important;
  background: #0d0d0f;
  text-align: left;
}

.appointment-ledger-row:last-child { border-bottom: 0; }
.appointment-ledger-row:hover { background: #171719; }
.appointment-ledger-open { justify-self: end; }

.appointment-ledger-time,
.appointment-ledger-identity,
.appointment-ledger-amount {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.appointment-ledger-time strong,
.appointment-ledger-amount strong {
  color: #ffffff;
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.appointment-ledger-time small,
.appointment-ledger-identity small,
.appointment-ledger-amount small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-ledger-identity strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-ledger-amount { justify-items: end; text-align: right; }

.appointment-ledger-status { justify-self: start; }

.appointment-ledger-link {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.67rem;
  white-space: nowrap;
}

.appointment-ledger-link.is-linked { color: var(--green-bright); }
.appointment-ledger-link .ui-icon { width: 14px; height: 14px; }

.appointment-flow {
  display: inline-flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.appointment-flow .ui-icon { width: 14px; height: 14px; }
.appointment-flow-inflow { border-color: #327542; background: #184c27; }
.appointment-flow-outflow { border-color: #8a5935; background: #5a321f; }
.appointment-flow-unknown { border-color: #54545a; background: #303034; }
.appointment-ledger-open { width: 17px; height: 17px; }

.appointment-preview {
  position: fixed;
  z-index: 120;
  width: min(390px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid #8d742c;
  border-radius: 14px;
  background: #171719;
  color: #ffffff;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.62);
  pointer-events: none;
}

.appointment-preview-heading {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.appointment-preview-heading > div { display: grid; min-width: 0; gap: 2px; }
.appointment-preview-heading strong { overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.appointment-preview-heading span { color: var(--muted); font-size: 0.72rem; }

.appointment-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 12px 0 0;
}

.appointment-preview-grid > div { display: grid; min-width: 0; gap: 2px; }
.appointment-preview-grid dt { color: var(--muted); font-size: 0.64rem; font-weight: 500; text-transform: uppercase; }
.appointment-preview-grid dd { margin: 0; overflow: hidden; color: #ffffff; font-size: 0.74rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.appointment-preview-note,
.appointment-preview-decision { margin: 10px 0 0; font-size: 0.7rem; line-height: 1.4; }
.appointment-preview-note { color: var(--silver-soft); }
.appointment-preview-decision { padding: 8px 10px; border-radius: 8px; background: #4f3715; color: #ffffff; }

.accounting-side {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.accounting-cash-table-panel { min-width: 0; }

.accounting-table-heading { align-items: center; }

.accounting-table-toolbar {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.46fr) minmax(190px, 0.54fr);
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: #0d0d0f;
}

.accounting-table-toolbar .platform-field {
  min-width: 0;
  margin: 0;
}

.accounting-table-toolbar input,
.accounting-table-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.accounting-cash-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  color: #ffffff;
}

.accounting-cash-table th,
.accounting-cash-table td {
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.accounting-cash-table th {
  height: 42px;
  color: var(--silver-soft);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.accounting-cash-table tbody tr { background: #0d0d0f; }
.accounting-cash-table tbody tr:hover { background: #171719; }
.accounting-cash-table tbody tr.needs-attention { box-shadow: inset 3px 0 0 #8d742c; }
.accounting-cash-table tbody tr:last-child td { border-bottom: 0; }
.accounting-cash-table th:nth-child(1) { width: 84px; }
.accounting-cash-table th:nth-child(2) { width: 28%; }
.accounting-cash-table th:nth-child(3) { width: 104px; }
.accounting-cash-table th:nth-child(4) { width: 138px; text-align: right; }
.accounting-cash-table th:nth-child(5) { width: 150px; }
.accounting-cash-table th:nth-child(6) { width: 122px; }
.accounting-cash-table td:nth-child(4) { text-align: right; }

.accounting-cell-label { display: none; }

.accounting-table-time,
.accounting-table-source {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.accounting-table-time strong,
.accounting-table-amount,
.accounting-table-source strong {
  color: #ffffff;
  font-size: 0.77rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.accounting-table-time small,
.accounting-table-source small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-table-source small {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.accounting-table-link {
  display: grid !important;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-content: center;
  justify-content: stretch !important;
  gap: 2px 8px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff;
  text-align: left;
}

.accounting-table-link > span:first-of-type {
  overflow: visible;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.accounting-table-link-detail {
  grid-column: 1;
  overflow: visible;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.7rem !important;
  font-weight: 400;
  text-overflow: clip;
  white-space: normal;
}

.accounting-table-link .ui-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 15px; height: 15px; }
.accounting-table-link:hover > span:first-of-type { color: var(--gold-bright); }
.accounting-table-amount { display: inline-block; white-space: nowrap; }
.accounting-cash-table .appointment-flow { width: max-content; min-width: 88px; max-width: 100%; min-height: 28px; justify-self: start; padding-inline: 12px; font-size: 0.7rem; }
.accounting-cash-table .platform-status { max-width: 100%; font-size: 0.62rem; text-align: center; white-space: normal; }

.accounting-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
}

.accounting-insight {
  display: grid;
  min-width: 0;
  min-height: 98px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-content: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-raised);
}

.accounting-insight > div { display: grid; min-width: 0; gap: 2px; }
.accounting-insight span { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; }
.accounting-insight strong { overflow: hidden; color: #ffffff; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.accounting-insight small { color: var(--muted); font-size: 0.7rem; line-height: 1.3; }

.cash-direction-figure {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 4px var(--space-4) var(--space-4);
}

.cash-direction-figure figcaption { color: #ffffff; font-size: 0.78rem; font-weight: 600; }

.cash-direction-row {
  display: grid;
  grid-template-columns: 70px minmax(90px, auto) minmax(80px, 1fr);
  align-items: center;
  gap: 10px;
}

.cash-direction-row span { color: var(--muted); font-size: 0.7rem; }
.cash-direction-row strong { color: #ffffff; font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: right; }
.accounting-decision-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
.accounting-decision-row > div { display: grid; min-width: 0; gap: 3px; }
.accounting-decision-row > div span { color: var(--muted); font-size: 0.69rem; line-height: 1.35; }
.appointment-finance-guidance { margin: 0; color: var(--muted); font-size: 0.7rem; line-height: 1.4; }

@media (max-width: 1220px) {
  .work-layout,
  .accounting-layout { grid-template-columns: minmax(0, 1fr); }
  .accounting-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .accounting-side { grid-template-columns: minmax(0, 1fr); }
  .accounting-table-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-table-toolbar .platform-field:first-child { grid-column: 1 / -1; }
  .accounting-cash-table,
  .accounting-cash-table tbody { display: block; }
  .accounting-cash-table thead { display: none; }
  .accounting-cash-table tr {
    display: grid;
    min-width: 0;
    grid-template-columns: 72px minmax(80px, 1fr) minmax(88px, 1.12fr);
    gap: 4px 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
  }
  .accounting-cash-table th,
  .accounting-cash-table td,
  .accounting-cash-table td:nth-child(4) {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 3px;
    padding: 2px;
    border: 0;
    text-align: left;
  }
  .accounting-cash-table td:nth-child(1) { grid-column: 1; grid-row: 2; }
  .accounting-cash-table td:nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
  .accounting-cash-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .accounting-cash-table td:nth-child(4) { grid-column: 3; grid-row: 1; align-content: center; text-align: right; }
  .accounting-cash-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
  .accounting-cash-table td:nth-child(6) { grid-column: 3; grid-row: 2; }
  .accounting-cell-label {
    display: block;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .accounting-cash-table td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)) > .accounting-cell-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .accounting-table-link { padding-block: 0 !important; }
  .accounting-table-amount { min-height: 28px; align-content: center; font-size: 0.86rem; }
  .accounting-table-source {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  .accounting-table-source small { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
  .accounting-cash-table .platform-status { justify-self: start; }
}

@media (max-width: 760px) {
  .appointment-ledger-columns { display: none; }
  .appointment-ledger-status,
  .appointment-ledger-link { display: none; }
  .appointment-ledger-row {
    grid-template-columns: 78px minmax(0, 1fr) minmax(126px, auto) 17px;
    gap: 8px !important;
    padding-inline: 12px;
  }

  .appointment-flow { grid-column: 2; grid-row: 2; width: max-content; min-width: 92px; }
  .appointment-ledger-amount { grid-column: 3; grid-row: 1 / span 2; }
  .appointment-ledger-open { grid-column: 4; grid-row: 1 / span 2; }
}

@media (max-width: 620px) {
  .platform-finance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .platform-financial-metric {
    height: var(--metric-card-min-height);
    min-height: var(--metric-card-min-height);
    padding: var(--card-padding-block) var(--card-padding-inline);
  }
  .platform-financial-metric > strong { font-size: 1.02rem; }
  .financial-metric-heading { gap: 5px; font-size: 0.67rem; letter-spacing: 0.035em; }
  .financial-metric-heading .ui-icon { width: 15px; height: 15px; }
  /* Keep the compact finance labels on one readable line beside their icon;
     the shorter tracking scale prevents narrow cards from clipping words. */
  .platform-finance-metrics .financial-metric-heading > span {
    font-size: 0.61rem;
    letter-spacing: 0.015em;
  }
  .review-queue-metrics .platform-financial-metric {
    grid-template-rows: minmax(28px, auto) minmax(18px, auto) 16px 6px;
  }
  .review-queue-metrics .financial-metric-heading > span {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .platform-page-actions { width: 100%; justify-self: stretch; }
  .platform-page-actions > button { flex: 1 1 0; }
  .work-agenda-heading { align-items: flex-start; flex-wrap: wrap; }
  .work-agenda-heading > .platform-heading-copy { flex: 1 1 150px; }
  .work-agenda-actions { width: auto; margin-left: auto; justify-content: flex-end; }
  .appointment-ledger-row {
    min-height: 78px;
    grid-template-columns: 66px minmax(0, 1fr) 17px;
  }
  .appointment-ledger-time { grid-column: 1; grid-row: 1; }
  .appointment-ledger-identity { grid-column: 2; grid-row: 1; }
  .appointment-flow { grid-column: 1; grid-row: 2; min-width: 0; padding-inline: 5px; }
  .appointment-ledger-amount { grid-column: 2; grid-row: 2; justify-items: start; text-align: left; }
  .appointment-ledger-amount small { display: none; }
  .appointment-ledger-open { grid-column: 3; grid-row: 1 / span 2; }
  .accounting-insights { grid-template-columns: minmax(0, 1fr); }
  .accounting-insight { min-height: 84px; }
  .accounting-table-heading { align-items: flex-start; }
  .accounting-table-toolbar { padding: 12px; }
  .accounting-cash-table tr { padding-inline: 8px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  /* Give tablet finance labels the full track beside their leading icon. */
  .platform-finance-metrics .financial-metric-heading .metric-drilldown-icon { display: none; }
}

@media (min-width: 521px) and (max-width: 760px) {
  /* Replace long desktop metric labels with their compact, still explicit
     names while the four-card grid is compressed to two narrow columns. */
  .platform-finance-metrics .financial-metric-heading .metric-drilldown-icon { display: none; }
  .platform-finance-metrics .financial-metric-heading > span {
    font-size: 0;
    letter-spacing: 0;
    overflow: visible;
  }
  .platform-finance-metrics .financial-metric-heading > span::after {
    display: inline-block;
    color: var(--silver-soft);
    content: attr(data-compact-label);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1.2;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .platform-finance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--metric-card-min-height);
  }

  .platform-financial-metric {
    height: var(--metric-card-min-height);
    min-height: var(--metric-card-min-height);
    padding: var(--card-padding-block) var(--card-padding-inline);
  }

  .platform-financial-metric > strong { font-size: 0.98rem; }
  .financial-metric-heading .metric-drilldown-icon { display: none; }
  .platform-page-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .platform-page-actions > button { width: 100%; }
}

@media (hover: none) and (pointer: coarse) {
  .appointment-preview { display: none !important; }
}

@media (max-width: 360px) {
  .shell-header { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .brand { padding-inline: 2px; }
  .brand picture, .brand img { width: 38px; height: 38px; }
  .primary-nav a { padding-inline: 0; }
  .primary-nav .ui-icon { width: 17px; height: 17px; }
  body > footer button .ui-icon { width: 12px; height: 12px; }
  .header-actions { width: 44px; padding-inline: 0; }
  .avatar { width: 44px; min-height: 44px; }
  .avatar-image { width: 38px; height: 38px; }
  .notification-count { right: -2px; }
  .global-search, main { padding-inline: 8px; }
  .global-search { grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
  .accounting-table-toolbar { grid-template-columns: minmax(0, 1fr); }
  .accounting-table-toolbar .platform-field:first-child { grid-column: auto; }
  .canvas { padding-inline: 8px; }
  .workflow-tab { font-size: 0.72rem; }
  .product-card { grid-template-columns: 48px minmax(0, 1fr); }
  .product-image, .product-placeholder { width: 48px; height: 48px; }
  .product-card > button { grid-column: 1 / -1; grid-row: auto; width: 100%; }
}

/* Unified control states and icon rhythm. Reversible actions stay neutral; red is reserved for destructive decisions. */
.secondary-action {
  border-color: var(--border-interactive);
  background: #171719;
  color: #ffffff;
  font-weight: 500;
}
.secondary-action:hover { border-color: var(--gold); background: #222225; color: #ffffff; }
.secondary-action:active, .secondary-action[aria-pressed="true"] { border-color: var(--gold); background: #2b2515; color: #ffffff; }
.secondary-action:disabled { border-color: var(--border); background: #111113; color: #737983; }
.secondary-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.account-menu { gap: 6px; padding: 10px; }
.account-profile-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #151517;
}
.account-profile-avatar { width: 42px; height: 42px; border: 1px solid var(--gold); border-radius: 50%; object-fit: cover; }
.account-profile-copy { display: grid; min-width: 0; gap: 2px; }
.account-profile-copy strong { color: #ffffff; font-size: 0.86rem; line-height: 1.2; }
.account-profile-copy span { color: var(--muted); font-size: 0.72rem; line-height: 1.25; }
.account-profile-copy small { color: #7f858f; font-size: 0.66rem; line-height: 1.2; overflow-wrap: anywhere; }
.account-menu-divider { height: 1px; margin: 2px 4px; background: var(--border-divider); }
.account-menu :is(a, button) { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 12px; }
.account-menu :is(a, button) .ui-icon { width: var(--icon-action); height: var(--icon-action); opacity: 0.9; }

.platform-field-label { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: #ffffff; }
.field-label-icon { width: var(--icon-meta); height: var(--icon-meta); opacity: 0.82; }
.platform-field-label-text { min-width: 0; overflow-wrap: anywhere; }
.platform-financial-metric.is-interactive.is-active { box-shadow: none; border-color: var(--gold-bright); background: #191918; }
.primary-nav > .global-search:focus-within { box-shadow: none; }

@media (min-width: 821px) and (max-width: 1320px) {
  .primary-nav:has(> .global-search) { grid-template-columns: repeat(6, minmax(74px, 1fr)) minmax(148px, 1.35fr); }
  .primary-nav > .global-search { width: 100%; justify-self: stretch; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding-inline: 10px; }
  .primary-nav > .global-search input { width: 100%; opacity: 1; }
}

@media (max-width: 620px) {
  .primary-nav .ui-icon { width: 18px; height: 18px; }
  .account-profile-card { grid-template-columns: 38px minmax(0, 1fr); }
  .account-profile-avatar { width: 38px; height: 38px; }
  .account-menu :is(a, button) { min-height: 42px; }
  .customer-picker button .action-icon,
  .product-entry-tools .action-icon { display: block; }
  .product-entry-tools button { gap: 5px; padding-inline: 6px; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Option 3 — compact two-pane order ledger */
.product-workbench {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 21px;
}

.canvas#panel-items { padding: 22px 17px 21px; }
.mobile-order-dock { display: none; }

.order-entry-toolbar {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
  gap: 12px;
}

.order-direction-control { width: 100%; height: 52px; }
.order-direction-control button { min-width: 0; height: 50px; min-height: 50px; padding-inline: 10px; overflow: hidden; font-size: 0.76rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }

.order-customer-summary {
  min-width: 0;
  height: 52px;
  min-height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 3px 5px 3px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: #101012;
}

.order-customer-summary strong { overflow: hidden; color: #ffffff; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.order-customer-summary button { min-width: 0; min-height: 44px; padding-inline: 12px; white-space: nowrap; }
.product-entry-tools { width: 100%; grid-column: 1 / -1; grid-template-columns: minmax(180px, 1fr) minmax(82px, 102px) minmax(96px, 118px) minmax(120px, 152px); gap: 12px; }
.product-entry-tools input, .product-entry-tools button { min-height: 52px; }
.product-entry-tools button { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; padding-inline: 11px; font-weight: 500; white-space: nowrap; }
.product-entry-tools button > span { overflow: hidden; text-overflow: ellipsis; }
.product-entry-tools .action-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.items-workbench {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(480px, 2fr);
  align-items: stretch;
  gap: 12px;
}

.ledger-pane {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #09090a;
}

.catalog-pane { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0; }
.cart-pane { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; align-self: stretch; height: 100%; gap: 0; padding: 0; border: 1px solid var(--border-strong); }
.cart-pane > .pane-heading { grid-row: 1; }
.cart-pane > .order-columns { grid-row: 2; }
.cart-pane > .line-list { grid-row: 3; }
.cart-pane > .cart-footer { grid-row: 4; }

.pane-heading {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.pane-title { min-width: 0; display: flex; align-items: baseline; gap: 14px; }
.pane-title h3 { margin: 0; color: #ffffff; font-size: 0.92rem; }
.pane-title span { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.pane-heading-actions { display: flex; align-items: center; gap: 6px; }
.mobile-cart-close { display: none; }
.icon-only-button { width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; background: transparent; }
.icon-only-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ledger-columns {
  min-height: 42px;
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  color: var(--silver-soft);
  font-size: 0.7rem;
  font-weight: 500;
}

.product-columns { grid-template-columns: minmax(0, 5fr) minmax(92px, 1fr) minmax(104px, 1.15fr) 80px; gap: 12px; }
.order-columns { grid-template-columns: minmax(0, 1fr) 112px 96px; gap: 12px; padding-right: 64px; }

.catalog-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.catalog-scroll > .subsection-block { margin: 12px; }
.quick-picks.product-ledger, .catalog-results.product-ledger { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.product-ledger-row.product-card {
  min-width: 0;
  min-height: 111px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(92px, 1fr) minmax(104px, 1.15fr) 80px;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: #0b0b0c;
}

.product-identity { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
.product-ledger-row .product-image, .product-ledger-row .product-placeholder { grid-row: auto; width: 72px; height: 72px; border-radius: 10px; }
.product-ledger-row .product-copy { align-self: center; }
.product-ledger-row .product-copy strong { font-size: 0.82rem; }
.product-ledger-row .product-copy small { font-size: 0.7rem; }
.product-ledger-row .product-price { grid-column: auto; align-self: center; color: #ffffff; font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-ledger-row .availability { display: inline-flex; width: auto; margin: 0; padding: 0; align-items: center; gap: 7px; background: transparent; color: var(--green-bright); font-size: 0.7rem; white-space: nowrap; }
.product-ledger-row .availability.empty { background: transparent; color: var(--muted); }
.availability-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: currentColor; }
.product-ledger-row > button { grid-column: auto; grid-row: auto; align-self: center; min-width: 72px; min-height: 44px; padding: 0 10px; border-color: var(--gold); background: var(--gold-action); color: #ffffff; font-weight: 600; }
.product-ledger-row > button:disabled { border-color: #35353a; background: #252528; color: var(--silver-soft); }

.cart-pane .line-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.cart-pane .line-row {
  position: relative;
  min-width: 0;
  display: grid;
  min-height: 89px;
  grid-template-columns: 54px minmax(0, 1fr) 112px 96px;
  align-items: center;
  gap: 12px;
  padding: 10px 64px 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: #0c0c0e;
}

.cart-pane .line-image, .cart-pane .line-placeholder { grid-column: auto; grid-row: auto; width: 54px; height: 54px; align-self: center; }
.cart-pane .line-description { grid-column: auto; grid-row: auto; }
.cart-pane .line-description strong { display: -webkit-box; overflow: hidden; line-height: 1.2; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cart-pane .quantity-control { width: max-content; grid-column: auto; grid-row: auto; grid-template-columns: 34px 36px 34px; justify-self: start; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; }
.cart-pane .quantity-control button, .cart-pane .quantity-control input { height: 44px; min-height: 44px; border-radius: 0; }
.cart-pane .quantity-control button { border: 0; }
.cart-pane .quantity-control input { padding: 0; border-block: 0; line-height: 42px; text-align: center; }
.cart-pane .line-price { grid-column: auto; grid-row: auto; min-width: 0; min-height: 44px; display: grid; justify-items: end; align-content: center; gap: 2px; padding: 4px 7px; border-color: transparent; background: transparent; text-align: right; }
.cart-pane .line-price small { display: none; }
.cart-pane .line-price > span { color: #ffffff; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-pane .line-price:hover { border-color: var(--border-strong); background: #151517; }
.cart-pane .line-price:disabled { border-color: transparent; background: transparent; color: #ffffff; }
.cart-pane .line-actions { position: absolute; right: 64px; bottom: 10px; justify-content: flex-end; }
.cart-pane .line-actions button { min-height: 44px; padding-inline: 9px; font-size: 0.7rem; }
.line-remove-action { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; }
.line-remove-action > span { display: none; }
.line-remove-action .action-icon { width: 17px; height: 17px; }
.cart-pane .override-form { grid-column: 1 / -1; margin: 10px 12px; }

.cart-pane .line-list:has(> .empty-cart) { align-content: stretch; }
.empty-cart { min-height: 0; height: calc(100% - 24px); margin: 12px; place-content: center; }
.cart-footer { padding: 0 12px 20px; border-top: 1px solid var(--border); background: #0a0a0b; }
.cart-summary { min-height: 33px; padding: 0 2px; border: 0; }
.cart-total { display: flex; align-items: baseline; gap: 16px; }
.cart-total small { color: var(--muted); font-size: 0.72rem; }
.cart-total strong { color: #ffffff; font-size: 1rem; font-variant-numeric: tabular-nums; }
.cart-pane .section-completion-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; margin: 12px 0 0; }
.cart-pane .section-completion-actions button { min-height: 52px; padding-inline: 8px; font-size: 0.72rem; white-space: nowrap; }
.checkout-items { max-height: none; overflow-y: visible; scrollbar-gutter: auto; }

@media (max-width: 1180px) {
  .workspace { height: auto; min-height: 0; }
  .canvas { height: auto; overflow: visible; }
  .canvas#panel-items { overflow: visible; }
  .order-entry-toolbar { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .items-workbench { min-height: clamp(540px, calc(100dvh - 330px), 650px); grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr); }
  .ledger-pane, .cart-pane { min-height: 0; }
  .product-columns { grid-template-columns: minmax(0, 1fr) 88px 72px; }
  .product-columns span:nth-child(3) { display: none; }
  .product-ledger-row.product-card { grid-template-columns: minmax(0, 1fr) 88px 72px; grid-template-rows: auto auto; }
  .product-ledger-row .product-identity { grid-column: 1; grid-row: 1; }
  .product-ledger-row .product-price { grid-column: 2; grid-row: 1 / span 2; }
  .product-ledger-row .availability { grid-column: 1; grid-row: 2; padding-left: 84px; }
  .product-ledger-row > button { grid-column: 3; grid-row: 1 / span 2; }
  .order-columns { display: none; }
  .cart-pane .line-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; }
  .cart-pane .line-image, .cart-pane .line-placeholder { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; }
  .cart-pane .line-description { grid-column: 2 / 4; grid-row: 1; }
  .cart-pane .quantity-control { grid-column: 2; grid-row: 2; }
  .cart-pane .line-price { grid-column: 3; grid-row: 2; }
  .cart-pane .line-actions { grid-column: 2 / 4; grid-row: 3; }
}

@media (max-width: 900px) {
  .primary-nav { position: static; inset: auto; transform: none; }
  .page-heading { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 10px 2px; }
  .page-heading .workflow-tabs { grid-column: 1 / -1; grid-row: 2; }
  .session-clock { grid-column: 2; grid-row: 1; }
  .title-lockup { grid-column: 1; grid-row: 1; }
  .order-entry-toolbar { grid-template-columns: minmax(0, 1fr); }
  .product-entry-tools { grid-column: 1; }
  .items-workbench { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .ledger-pane { min-height: 440px; }
  .cart-pane { min-height: min(620px, calc(100dvh - 210px)); }
}

@media (max-width: 760px) {
  .product-workbench { height: auto; grid-template-rows: auto auto auto; }
  .mobile-order-dock {
    position: sticky;
    z-index: 24;
    top: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 6px 7px 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: #111113;
    box-shadow: var(--shadow);
  }
  .mobile-order-summary { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
  .mobile-order-summary strong { color: #ffffff; font-size: 0.82rem; }
  .mobile-order-summary span { color: var(--gold); font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .mobile-order-dock button { min-height: 44px; padding-inline: 12px; }
  .product-columns { display: none; }
  .product-ledger-row.product-card { min-height: 126px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; }
  .product-identity { grid-column: 1 / -1; }
  .product-ledger-row .product-price { grid-column: 1; grid-row: 2; }
  .product-ledger-row .availability { grid-column: 1; grid-row: 3; justify-self: start; }
  .product-ledger-row > button { grid-column: 2; grid-row: 2 / span 2; }
  .order-columns { display: none; }
  .cart-pane .line-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .cart-pane .line-image, .cart-pane .line-placeholder { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; }
  .cart-pane .line-description { grid-column: 2 / 4; grid-row: 1; }
  .cart-pane .quantity-control { grid-column: 2; grid-row: 2; }
  .cart-pane .line-price { grid-column: 3; grid-row: 2; }
  .cart-pane .line-actions { grid-column: 1 / -1; grid-row: 3; }
  .cart-pane { display: none; }
  .cart-pane.is-mobile-open {
    position: fixed;
    z-index: 60;
    inset: 12px 12px calc(var(--footer-height) + env(safe-area-inset-bottom) + 8px);
    display: grid;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    background: #09090a;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.78);
  }
  .cart-pane.is-mobile-open .mobile-cart-close { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 12px; }
  body:has(.cart-pane.is-mobile-open) { overflow: hidden; }
}

@media (max-width: 620px) {
  .page-heading { padding-inline: 0; }
  .page-heading .workflow-tabs { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 6px 0 2px; }
  .page-heading .workflow-tab {
    position: relative;
    z-index: 1;
    min-height: 44px;
    display: grid;
    grid-template-rows: 22px auto;
    justify-items: center;
    align-content: center;
    gap: 3px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--silver);
    font-size: 0.68rem;
    line-height: 1.1;
    white-space: nowrap;
  }
  .page-heading .workflow-tab:hover { background: transparent; color: #ffffff; }
  .page-heading .workflow-tab:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 10px;
    left: calc(50% + 13px);
    width: calc(100% - 26px);
    height: 1px;
    background: var(--border-strong);
  }
  .page-heading .workflow-tab[data-progress="past"]::after { background: var(--gold-solid); }
  .page-heading .workflow-tab-index {
    width: 22px;
    height: 22px;
    display: grid;
    border: 1px solid #4a4a50;
    background: #0d0d0f;
    color: #ffffff;
    font-size: 0.68rem;
  }
  .page-heading .workflow-tab[data-progress="past"] { color: #ffffff; }
  .page-heading .workflow-tab[data-progress="past"] .workflow-tab-index { border-color: #8b7129; background: #382d0f; color: #ffffff; }
  .page-heading .workflow-tab[data-progress="current"] { color: #ffffff; font-weight: 600; }
  .page-heading .workflow-tab[data-progress="current"] .workflow-tab-index { border-color: var(--gold); background: var(--gold-action); color: #ffffff; }
  .page-heading .workflow-tab[aria-selected="true"],
  .page-heading .workflow-tab[aria-selected="false"] { background: transparent; box-shadow: none; }
  .checkout-items { display: block; }
  .checkout-items thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .checkout-items tbody { display: block; }
  .checkout-item-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 11px 12px;
  }
  .checkout-item-row + .checkout-item-row { border-top: 1px solid var(--border); }
  .checkout-item-row + .checkout-item-row > * { border-top: 0; }
  .checkout-item-row > * { height: auto; padding: 8px 5px 0; }
  .checkout-ledger-product {
    min-height: 58px;
    grid-column: 1 / -1;
    gap: 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
  }
  .checkout-item-image, .checkout-item-placeholder { width: 48px; height: 48px; flex-basis: 48px; }
  .checkout-item-copy strong, .checkout-item-copy small { white-space: normal; }
  .checkout-item-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .checkout-ledger-quantity,
  .checkout-ledger-unit-price,
  .checkout-ledger-line-total { display: grid; justify-items: end; gap: 3px; }
  .checkout-ledger-quantity { justify-items: start; text-align: left; }
  .checkout-mobile-label { display: block; color: var(--muted); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.03em; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
  .checkout-ledger-quantity strong,
  .checkout-ledger-unit-price strong,
  .checkout-ledger-line-total strong { font-size: 0.82rem; }
  .checkout-totals-section { grid-template-columns: minmax(0, 1fr); }
  .checkout-totals { width: 100%; grid-column: 1; order: 1; }
  .checkout-totals-actions { grid-column: 1; order: 2; }
  .checkout-totals-actions button { width: 100%; }
  .checkout-totals-section > .tax-form { grid-column: 1; order: 3; }
  .transaction-field .segmented-control button { gap: 3px; padding-inline: 4px; font-size: 0.68rem; letter-spacing: -0.01em; }
  .transaction-field .segmented-control .action-icon { width: 15px; height: 15px; }
  .order-direction-control button { gap: 6px; padding-inline: 6px; font-size: 0.7rem; }
  .order-direction-control .action-icon { width: 16px; height: 16px; }
  .product-entry-tools { grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 1.2fr); }
  .product-entry-tools input { grid-column: 1 / -1; }
  .product-entry-tools button { min-width: 0; gap: 4px; padding-inline: 3px; font-size: 0.68rem; }
  .product-entry-tools .action-icon { display: block; }
  .taxonomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-pane .quantity-control { width: 100%; grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); justify-self: stretch; }
  .ledger-pane { min-height: 0; }
  .product-ledger-row.product-card { grid-template-columns: minmax(0, 1fr) 72px; }
  .product-ledger-row .availability { justify-self: start; }
  .cart-pane .section-completion-actions { grid-template-columns: minmax(0, 1fr); }
  .cart-total { gap: 8px; }
}

@media (max-width: 379px) {
  .checkout-item-row { padding-inline: 9px; }
  .checkout-item-row > * { padding-inline: 3px; }
  .checkout-mobile-label { font-size: 0.59rem; letter-spacing: 0; }
  .checkout-ledger-quantity strong,
  .checkout-ledger-unit-price strong,
  .checkout-ledger-line-total strong { font-size: 0.76rem; }
  .order-customer-summary { grid-template-columns: 20px minmax(0, 1fr) auto; padding-left: 9px; }
  .order-customer-summary button { padding-inline: 8px; }
  .transaction-field .segmented-control button { gap: 2px; padding-inline: 2px; font-size: 0.64rem; letter-spacing: -0.02em; }
  .transaction-field .segmented-control .action-icon { width: 14px; height: 14px; }
  .order-direction-control button { gap: 2px; padding-inline: 2px; font-size: 0.64rem; letter-spacing: -0.02em; }
  .order-direction-control .action-icon { width: 14px; height: 14px; }
  .catalog-tools.product-entry-tools:has(> button:nth-of-type(3)) { grid-template-columns: minmax(0, 0.75fr) minmax(0, 0.9fr) minmax(0, 1.35fr); }
  .product-entry-tools .action-icon { display: none; }
  .product-entry-tools button { padding-inline: 2px; font-size: 0.63rem; }
  .product-ledger-row.product-card { grid-template-columns: minmax(0, 1fr); }
  .product-ledger-row .product-price, .product-ledger-row .availability, .product-ledger-row > button { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .product-ledger-row .availability { justify-self: start; }
  .product-ledger-row > button { width: 100%; }
}

@media (max-width: 1180px) {
  .queue-toolbar { grid-template-columns: minmax(0, 1fr); }
  .queue-storage-note { text-align: left; }
  .quote-queue-list { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 10px; }
  .queue-card,
  .queue-card:first-child,
  .queue-card:last-child {
    min-height: 112px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 10px 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .queue-card-statuses { justify-content: flex-end; }
  .queue-card-facts { grid-column: 1; align-self: end; }
  .queue-card-actions { grid-column: 2; align-self: end; }
}

@media (max-width: 820px) {
  .invoice-queue-page { padding-top: 8px; }
  .invoices-page-heading { min-height: 0; gap: 14px; padding: 12px; }
  .invoices-title-copy p { max-width: 560px; }
  .queue-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-metric { min-height: 64px; }
  .queue-metric:nth-child(n+4) { grid-column: span 1; }
}

@media (max-width: 760px) {
  .invoices-page-heading { align-items: flex-start; }
  .invoices-heading-actions { flex-direction: column; align-items: stretch; }
  .invoices-heading-actions .session-clock { justify-content: center; }
  .quote-queue-list { grid-template-columns: minmax(0, 1fr); }
  .queue-card,
  .queue-card:first-child,
  .queue-card:last-child { min-height: 0; }
}

@media (max-width: 620px) {
  .invoices-page-heading { display: grid; gap: 10px; }
  .invoices-title-copy p { font-size: 0.74rem; }
  .invoices-heading-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .queue-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-metric > span {
    overflow: visible;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }
  .queue-heading { padding-inline: 10px; }
  .queue-toolbar { padding: 8px 10px; }
  .queue-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .queue-card,
  .queue-card:first-child,
  .queue-card:last-child { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 9px; }
  .queue-card-statuses { justify-content: flex-start; }
  .queue-card-facts, .queue-card-actions { grid-column: 1; }
  .queue-card-actions { grid-template-columns: minmax(0, 1fr) 44px; }
  .queue-action-menu-popover { width: min(240px, calc(100vw - 54px)); }
}

@media (max-width: 379px) {
  .invoices-heading-actions { grid-template-columns: minmax(0, 1fr); }
  .queue-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* BullionOS 3.0 order-entry canvas — Figma implementation pass */
#order-entry-page {
  --form-card: #171719;
  --form-muted: #222226;
  --form-deep: #0f0f11;
  --form-border: #35353b;
  --form-border-strong: #45454d;
}

#order-entry-page .title-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#order-entry-page .title-copy h1,
#order-entry-page .title-copy p { margin: 0; }

#order-entry-page .title-copy p {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-entry-page .workspace,
#order-entry-page .workflow-panels,
#order-entry-page .canvas,
#order-entry-page .product-workbench,
#order-entry-page .items-workbench,
#order-entry-page .checkout-workbench {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

#order-entry-page .canvas#panel-items { overflow: visible; }

#order-entry-page .canvas {
  padding: 24px;
  background: #0b0b0c;
}

#order-entry-page button,
#order-entry-page input,
#order-entry-page select { max-width: 100%; }

#order-entry-page button > span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

#order-entry-page .details-canvas {
  min-width: 0;
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--form-border);
  border-radius: 18px;
  background: var(--form-card);
}

#order-entry-page .details-section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--form-border);
}

#order-entry-page .details-section-copy,
#order-entry-page .details-section-title {
  min-width: 0;
  display: grid;
}

#order-entry-page .details-section-copy { gap: 5px; }

#order-entry-page .details-section-title {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

#order-entry-page .details-section-title h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#order-entry-page .details-section-copy p {
  margin: 0 0 0 38px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

#order-entry-page .details-section-heading > button {
  min-width: 154px;
  min-height: 48px;
  flex: 0 0 auto;
}

#order-entry-page .details-primary,
#order-entry-page .customer-profile {
  min-width: 0;
  width: 100%;
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

#order-entry-page .customer-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  align-items: end;
  gap: 12px;
  padding: 0;
}

#order-entry-page .customer-search-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
}

#order-entry-page .customer-picker input,
#order-entry-page .customer-picker > button {
  width: 100%;
  min-width: 0;
  min-height: 52px;
}

#order-entry-page .customer-record-summary,
#order-entry-page .customer-record-form {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--form-border);
  border-radius: 16px;
  background: var(--form-muted);
}

#order-entry-page .customer-record-summary h4 {
  margin: 0;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
}

#order-entry-page .customer-record-summary-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

#order-entry-page .record-summary-cell {
  min-width: 0;
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background: var(--form-deep);
}

#order-entry-page .record-summary-cell small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
}

#order-entry-page .record-summary-cell strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-entry-page .record-summary-cell.is-empty strong {
  color: var(--muted);
  font-weight: 400;
}

#order-entry-page .record-customer,
#order-entry-page .record-company { grid-column: span 3; }
#order-entry-page .record-email { grid-column: span 5; }
#order-entry-page .record-phone,
#order-entry-page .record-classification { grid-column: span 2; }
#order-entry-page .record-invoice-tags { grid-column: span 4; }
#order-entry-page .record-client-tags { grid-column: span 5; }

#order-entry-page .customer-record-form .field-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 12px;
}

#order-entry-page .customer-record-form .field-stack { min-width: 0; }
#order-entry-page .customer-record-form .field-first-name,
#order-entry-page .customer-record-form .field-last-name,
#order-entry-page .customer-record-form .field-company { grid-column: span 4; }
#order-entry-page .customer-record-form .field-email { grid-column: span 5; }
#order-entry-page .customer-record-form .field-phone { grid-column: span 3; }
#order-entry-page .customer-record-form .field-classification { grid-column: span 4; }
#order-entry-page .customer-record-form .field-invoice-tags,
#order-entry-page .customer-record-form .field-tags { grid-column: span 6; }

#order-entry-page .customer-record-form input,
#order-entry-page .customer-record-form select {
  width: 100%;
  min-width: 0;
  min-height: 52px;
}

#order-entry-page .customer-record-form .invoice-tag-editor {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

#order-entry-page .customer-record-form .invoice-tag-editor .field-stack { grid-column: auto; }

#order-entry-page .customer-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
}

#order-entry-page .customer-form-actions button {
  min-width: 132px;
  min-height: 48px;
}

#order-entry-page .customer-operation-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  gap: 16px;
  padding: 0;
  border: 0;
}

#order-entry-page .document-field,
#order-entry-page .transaction-field {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 9px;
  padding: 18px;
  border: 1px solid var(--form-border);
  border-radius: 16px;
  background: var(--form-muted);
}

#order-entry-page .document-field h5,
#order-entry-page .transaction-field h5 {
  margin: 0;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
}

#order-entry-page .document-field .segmented-control,
#order-entry-page .transaction-field .segmented-control {
  width: 100%;
  max-width: none;
}

#order-entry-page .document-field .segmented-control button,
#order-entry-page .transaction-field .segmented-control button {
  min-width: 0;
  min-height: 52px;
  height: auto;
  padding: 10px 14px;
  overflow: visible;
  font-size: 0.82rem;
}

#order-entry-page .document-mode-lock-note {
  margin: 0;
  color: var(--silver);
  font-size: 0.72rem;
  line-height: 1.45;
}

#order-entry-page .document-mode-control[data-mode-locked="true"] button:disabled {
  cursor: not-allowed;
}

#order-entry-page .details-action-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--form-border);
  border-radius: 14px;
  background: var(--form-muted);
}

#order-entry-page .details-action-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#order-entry-page .details-action-copy strong {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
}

#order-entry-page .details-action-copy small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

#order-entry-page .details-completion-actions {
  width: auto;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1.34fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

#order-entry-page .details-completion-actions button {
  width: 100%;
  min-width: max-content;
  min-height: 52px;
}

/* Items */
#order-entry-page .product-workbench { gap: 16px; }

#order-entry-page .order-entry-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(360px, 5fr) minmax(420px, 7fr);
  align-items: end;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--form-border);
  border-radius: 16px;
  background: var(--form-card);
}

#order-entry-page .order-context-field,
#order-entry-page .catalog-search-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
}

#order-entry-page .order-context-label { color: #ffffff; }

#order-entry-page .order-direction-control,
#order-entry-page .order-customer-summary {
  width: 100%;
  min-width: 0;
  min-height: 52px;
}

#order-entry-page .order-direction-control button {
  min-width: 0;
  min-height: 52px;
  height: auto;
  padding: 9px 13px;
  overflow: visible;
  font-size: 0.8rem;
}

#order-entry-page .order-customer-summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background: var(--form-deep);
}

#order-entry-page .order-customer-summary strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-entry-page .order-customer-summary button {
  min-width: 126px;
  min-height: 44px;
}

#order-entry-page .product-entry-tools {
  min-width: 0;
  width: 100%;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 136px 136px 176px;
  align-items: end;
  gap: 10px;
}

#order-entry-page .catalog-search-field input,
#order-entry-page .product-entry-tools button {
  width: 100%;
  min-width: 0;
  min-height: 52px;
}

#order-entry-page .product-entry-tools button {
  padding-inline: 12px;
  font-size: 0.8rem;
}

#order-entry-page .mobile-order-dock { display: none; }

#order-entry-page .items-workbench {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(390px, 5fr);
  align-items: start;
  gap: 16px;
}

#order-entry-page .ledger-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--form-border);
  border-radius: 16px;
  background: var(--form-card);
}

#order-entry-page .cart-pane {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  max-height: none;
  align-self: start;
  border-left: 1px solid var(--form-border);
  box-shadow: none;
}

#order-entry-page .pane-heading {
  min-width: 0;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--form-border);
}

#order-entry-page .pane-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
}

#order-entry-page .pane-title h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

#order-entry-page .pane-title span {
  color: var(--muted);
  font-size: 0.74rem;
}

#order-entry-page .pane-heading > button,
#order-entry-page .pane-heading-actions button {
  min-height: 44px;
  padding-inline: 12px;
}

#order-entry-page .catalog-scroll,
#order-entry-page .cart-pane .line-list {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}

#order-entry-page .catalog-scroll::-webkit-scrollbar,
#order-entry-page .cart-pane .line-list::-webkit-scrollbar { display: none; }

#order-entry-page .ledger-columns {
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--form-border);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

#order-entry-page .product-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px 118px 86px;
  gap: 10px;
}

#order-entry-page .product-columns span:nth-child(n + 2) { text-align: right; }

#order-entry-page .quick-picks,
#order-entry-page .catalog-results {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
}

#order-entry-page .product-ledger-row.product-card {
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px 86px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 12px;
  padding: 14px 16px;
  border: 1px solid var(--form-border);
  border-radius: 13px;
  background: var(--form-muted);
}

#order-entry-page .product-ledger-row.product-card:last-child { border-bottom: 1px solid var(--form-border); }

#order-entry-page .product-identity {
  min-width: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

#order-entry-page .product-image,
#order-entry-page .product-placeholder {
  width: 64px;
  height: 64px;
  grid-row: auto;
  border-radius: 12px;
}

#order-entry-page .product-copy strong {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

#order-entry-page .product-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-entry-page .product-ledger-row .product-price {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  font-size: 0.92rem;
}

#order-entry-page .product-ledger-row .availability {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  margin: 0;
}

#order-entry-page .product-ledger-row > button {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  width: 86px;
  min-width: 0;
  min-height: 48px;
}

#order-entry-page .order-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 116px;
  gap: 10px;
}

#order-entry-page .order-columns span:nth-child(n + 2) { text-align: right; }

#order-entry-page .cart-pane .line-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

#order-entry-page .cart-pane .line-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid var(--form-border);
  border-radius: 14px;
  background: var(--form-deep);
}

#order-entry-page .cart-pane .line-image,
#order-entry-page .cart-pane .line-placeholder {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
}

#order-entry-page .cart-pane .line-description {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

#order-entry-page .cart-pane .line-description strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.28;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#order-entry-page .cart-pane .line-description small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-entry-page .cart-pane .line-price {
  grid-column: 3;
  grid-row: 1;
  min-width: 100px;
  display: grid;
  justify-items: end;
  gap: 2px;
  align-self: center;
  padding: 6px 8px;
  text-align: right;
}

#order-entry-page .cart-pane .quantity-control {
  grid-column: 2;
  grid-row: 2;
  width: 136px;
  grid-template-columns: 42px 52px 42px;
  justify-self: start;
}

#order-entry-page .cart-pane .line-actions {
  grid-column: 2;
  grid-row: 3;
  justify-content: flex-start;
}

#order-entry-page .cart-pane .line-remove-action {
  position: static;
  grid-column: 3;
  grid-row: 2;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  justify-self: end;
  padding: 0;
}

#order-entry-page .cart-footer {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--form-border);
}

#order-entry-page .cart-summary {
  padding: 0;
  border: 0;
}

#order-entry-page .cart-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#order-entry-page .cart-total strong { font-size: 1.08rem; }

#order-entry-page .cart-pane .section-completion-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 10px;
  margin: 0;
}

#order-entry-page .cart-pane .section-completion-actions button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding-inline: 10px;
}

/* Checkout */
#order-entry-page .checkout-workbench {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(390px, 4fr);
  align-items: start;
  gap: 16px;
}

#order-entry-page .checkout-review-pane,
#order-entry-page .checkout-payment-pane {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 20px;
  overflow: visible;
  border: 1px solid var(--form-border);
  border-radius: 16px;
  background: var(--form-card);
}

#order-entry-page .checkout-payment-pane {
  border-left: 1px solid var(--form-border);
}

#order-entry-page .checkout-review-header {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#order-entry-page .checkout-review-heading-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#order-entry-page .checkout-review-heading-copy h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
}

#order-entry-page .checkout-review-heading-copy span {
  color: var(--muted);
  font-size: 0.74rem;
}

#order-entry-page .checkout-review-header .actions {
  flex: 0 0 auto;
  margin: 0;
}

#order-entry-page .checkout-review-header button {
  min-height: 46px;
  padding-inline: 14px;
}

#order-entry-page .checkout-items {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--form-border);
  border-radius: 14px;
  background: var(--form-deep);
}

#order-entry-page .checkout-items thead th {
  height: 44px;
  padding: 10px 14px;
  background: var(--form-muted);
}

#order-entry-page .checkout-items thead th:nth-child(2) { width: 74px; }
#order-entry-page .checkout-items thead th:nth-child(3) { width: 132px; }
#order-entry-page .checkout-items thead th:nth-child(4) { width: 144px; }

#order-entry-page .checkout-item-row > * {
  min-height: 82px;
  padding: 12px 14px;
}

#order-entry-page .checkout-item-image,
#order-entry-page .checkout-item-placeholder {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

#order-entry-page .checkout-item-copy strong {
  font-size: 0.9rem;
  font-weight: 600;
}

#order-entry-page .checkout-item-copy small { font-size: 0.72rem; }
#order-entry-page .checkout-ledger-quantity strong { font-size: 0.94rem; }
#order-entry-page .checkout-ledger-unit-price strong { font-size: 0.92rem; }
#order-entry-page .checkout-ledger-line-total strong { font-size: 1.02rem; }

#order-entry-page .checkout-summary {
  display: grid;
  gap: 12px;
}

#order-entry-page .checkout-summary > h4 {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

#order-entry-page .checkout-totals {
  border-color: var(--form-border);
  background: var(--form-deep);
}

#order-entry-page .checkout-total-row { padding: 12px 14px; }

#order-entry-page .checkout-grand-total {
  min-height: 64px;
  padding: 14px;
  border-top: 1px solid var(--gold) !important;
  background: var(--form-muted);
}

#order-entry-page .checkout-grand-total dt,
#order-entry-page .checkout-grand-total dd { color: #ffffff; }

#order-entry-page .checkout-payment-pane > .checkout-summary + .section-block {
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--form-border);
}

#order-entry-page .payment-layout { gap: 12px; }

#order-entry-page .payment-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#order-entry-page .payment-facts > div {
  height: auto;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--form-border);
  background: var(--form-deep);
}

#order-entry-page .payment-order-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  background: var(--form-deep);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

#order-entry-page .checkout-completion-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

#order-entry-page .checkout-completion-actions button {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: auto;
  padding: 10px 12px;
  overflow: visible;
}

#order-entry-page .checkout-completion-actions .primary-action { grid-column: 1 / -1; }

#order-entry-page .empty-cart {
  margin: 0;
  border-color: var(--form-border);
  background: var(--form-deep);
}

#order-entry-page .pane-heading > button,
#order-entry-page .pane-heading-actions button,
#order-entry-page .cart-clear-action { min-height: 44px; }

body:has(#order-entry-page:not([hidden])) {
  padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) + 28px);
}

@media (max-width: 1100px) {
  #order-entry-page .canvas { padding: 20px; }

  #order-entry-page .customer-record-summary-grid,
  #order-entry-page .customer-record-form .field-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

  #order-entry-page .record-customer,
  #order-entry-page .record-company { grid-column: span 3; }
  #order-entry-page .record-email { grid-column: span 5; }
  #order-entry-page .record-phone,
  #order-entry-page .record-classification { grid-column: span 2; }
  #order-entry-page .record-invoice-tags { grid-column: span 3; }
  #order-entry-page .record-client-tags { grid-column: span 5; }

  #order-entry-page .customer-record-form .field-first-name,
  #order-entry-page .customer-record-form .field-last-name { grid-column: span 4; }
  #order-entry-page .customer-record-form .field-company,
  #order-entry-page .customer-record-form .field-classification { grid-column: span 4; }
  #order-entry-page .customer-record-form .field-email { grid-column: span 5; }
  #order-entry-page .customer-record-form .field-phone { grid-column: span 3; }
  #order-entry-page .customer-record-form .field-invoice-tags,
  #order-entry-page .customer-record-form .field-tags { grid-column: span 4; }

  #order-entry-page .order-entry-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #order-entry-page .items-workbench,
  #order-entry-page .checkout-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  #order-entry-page .cart-pane,
  #order-entry-page .checkout-payment-pane { width: 100%; }

  #order-entry-page .checkout-payment-pane {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  #order-entry-page .checkout-payment-pane > .checkout-summary + .section-block {
    padding: 0 0 0 16px;
    border-top: 0;
    border-left: 1px solid var(--form-border);
  }
}

@media (max-width: 820px) {
  #order-entry-page .customer-operation-row { grid-template-columns: minmax(0, 1fr); }

  #order-entry-page .order-entry-toolbar { grid-template-columns: minmax(0, 1fr); }

  #order-entry-page .checkout-payment-pane,
  #order-entry-page .payment-layout { grid-template-columns: minmax(0, 1fr); }

  #order-entry-page .checkout-payment-pane > .checkout-summary + .section-block {
    padding: 14px 0 0;
    border-top: 1px solid var(--form-border);
    border-left: 0;
  }

  #order-entry-page .product-entry-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #order-entry-page .catalog-search-field { grid-column: 1 / -1; }

  #order-entry-page .document-field .segmented-control button,
  #order-entry-page .transaction-field .segmented-control button {
    padding-inline: 10px;
    font-size: 0.78rem;
  }
}

@media (max-width: 760px) {
  #order-entry-page .canvas { padding: 14px 12px 18px; }

  #order-entry-page .title-copy p {
    max-width: 230px;
    font-size: 0.68rem;
  }

  #order-entry-page .details-canvas {
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
  }

  #order-entry-page .details-section-heading {
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
  }

  #order-entry-page .details-section-copy p { display: none; }

  #order-entry-page .details-section-heading > button {
    min-width: 118px;
    min-height: 46px;
    padding-inline: 10px;
  }

  #order-entry-page .customer-picker {
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 9px;
  }

  #order-entry-page .customer-picker > button { padding-inline: 9px; }

  #order-entry-page .customer-search-field {
    gap: 0;
    font-size: 0;
  }

  #order-entry-page .customer-search-field input { font-size: 0.84rem; }

  #order-entry-page .customer-record-summary,
  #order-entry-page .customer-record-form {
    gap: 14px;
    padding: 14px;
  }

  #order-entry-page .customer-record-summary h4 { display: none; }

  #order-entry-page .record-company.is-empty,
  #order-entry-page .record-invoice-tags.is-empty { display: none; }

  #order-entry-page .customer-record-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #order-entry-page .record-customer,
  #order-entry-page .record-email,
  #order-entry-page .record-company,
  #order-entry-page .record-invoice-tags,
  #order-entry-page .record-client-tags { grid-column: 1 / -1; }
  #order-entry-page .record-phone,
  #order-entry-page .record-classification { grid-column: span 1; }

  #order-entry-page .record-summary-cell {
    min-height: 66px;
    padding: 10px 12px;
  }

  #order-entry-page .record-summary-cell strong {
    font-size: 0.84rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #order-entry-page :is(.record-phone, .record-classification) strong {
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #order-entry-page .customer-record-form .field-grid { grid-template-columns: minmax(0, 1fr); }
  #order-entry-page .customer-record-form .field-first-name,
  #order-entry-page .customer-record-form .field-last-name,
  #order-entry-page .customer-record-form .field-company,
  #order-entry-page .customer-record-form .field-email,
  #order-entry-page .customer-record-form .field-phone,
  #order-entry-page .customer-record-form .field-classification,
  #order-entry-page .customer-record-form .field-invoice-tags,
  #order-entry-page .customer-record-form .field-tags { grid-column: 1; }

  #order-entry-page .customer-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #order-entry-page .customer-form-actions button {
    width: 100%;
    min-width: 0;
  }

  #order-entry-page .customer-operation-row { grid-template-columns: minmax(0, 1fr); }

  #order-entry-page .document-field,
  #order-entry-page .transaction-field {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #order-entry-page .details-action-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  #order-entry-page .details-completion-actions {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }

  #order-entry-page .order-entry-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  #order-entry-page .product-entry-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #order-entry-page .catalog-search-field { grid-column: 1 / -1; }

  #order-entry-page .product-entry-tools button {
    min-height: 48px;
    gap: 6px;
    padding-inline: 7px;
    font-size: 0.74rem;
  }

  #order-entry-page .product-entry-tools .action-icon {
    display: block;
    width: 17px;
    height: 17px;
  }

  #order-entry-page .pane-title > span { display: none; }

  #order-entry-page .pane-heading > button,
  #order-entry-page .pane-heading-actions button {
    min-width: 108px;
    min-height: 44px;
  }

  #order-entry-page .product-columns,
  #order-entry-page .order-columns { display: none; }

  #order-entry-page .product-ledger-row.product-card {
    min-height: 116px;
    grid-template-columns: minmax(0, 1fr) 92px;
    grid-template-rows: auto auto auto;
    padding: 14px;
  }

  #order-entry-page .product-identity {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  #order-entry-page .product-image,
  #order-entry-page .product-placeholder {
    width: 56px;
    height: 56px;
  }

  #order-entry-page .product-ledger-row .product-price {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  #order-entry-page .product-ledger-row .availability {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  #order-entry-page .product-ledger-row > button {
    grid-column: 2;
    grid-row: 2 / span 2;
    width: 92px;
  }

  #order-entry-page .cart-pane {
    display: grid !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
  }

  #order-entry-page .mobile-order-dock,
  #order-entry-page .mobile-cart-close { display: none !important; }

  body:has(#order-entry-page .cart-pane.is-mobile-open) { overflow: auto; }

  #order-entry-page .cart-pane .line-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 12px;
  }

  #order-entry-page .cart-pane .line-image,
  #order-entry-page .cart-pane .line-placeholder {
    width: 48px;
    height: 48px;
  }

  #order-entry-page .cart-pane .line-price { min-width: 92px; }
  #order-entry-page .cart-pane .quantity-control { width: 128px; grid-template-columns: 40px 48px 40px; }

  #order-entry-page .checkout-review-pane,
  #order-entry-page .checkout-payment-pane {
    padding: 14px;
    border-radius: 14px;
  }

  #order-entry-page .checkout-payment-pane { grid-template-columns: minmax(0, 1fr); }

  #order-entry-page .checkout-payment-pane > .checkout-summary + .section-block {
    padding: 14px 0 0;
    border-top: 1px solid var(--form-border);
    border-left: 0;
  }

  #order-entry-page .checkout-items { display: block; }
  #order-entry-page .checkout-items tbody { display: block; }

  #order-entry-page .checkout-item-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px;
  }

  #order-entry-page .checkout-item-row > * {
    min-height: 0;
    padding: 9px 5px 0;
  }

  #order-entry-page .checkout-ledger-product {
    min-height: 64px;
    grid-column: 1 / -1;
    padding: 0 0 12px;
  }

  #order-entry-page .checkout-mobile-label {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
  }

  #order-entry-page .checkout-ledger-quantity strong,
  #order-entry-page .checkout-ledger-unit-price strong,
  #order-entry-page .checkout-ledger-line-total strong { font-size: 0.86rem; }

  #order-entry-page .checkout-completion-actions { grid-template-columns: minmax(0, 1fr); }
  #order-entry-page .checkout-completion-actions .primary-action { grid-column: 1; }
}

@media (max-width: 480px) {
  #order-entry-page .details-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #order-entry-page .details-section-heading > button { width: 100%; }

  #order-entry-page .document-field .segmented-control button,
  #order-entry-page .transaction-field .segmented-control button,
  #order-entry-page .order-direction-control button {
    gap: 3px;
    padding-inline: 4px;
    font-size: 0.67rem;
    letter-spacing: -0.01em;
  }

  #order-entry-page .document-field .segmented-control .action-icon,
  #order-entry-page .transaction-field .segmented-control .action-icon,
  #order-entry-page .order-direction-control .action-icon {
    width: 15px;
    height: 15px;
  }

  #order-entry-page .details-completion-actions,
  #order-entry-page .customer-form-actions { grid-template-columns: minmax(0, 1fr); }

  #order-entry-page .product-entry-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #order-entry-page .product-entry-tools button:last-child { grid-column: 1 / -1; }

  #order-entry-page .cart-pane .section-completion-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 379px) {
  #order-entry-page .checkout-review-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #order-entry-page .checkout-review-heading-copy h3 {
    font-size: 0.88rem;
    white-space: nowrap;
  }

  #order-entry-page .checkout-review-header button {
    padding-inline: 8px;
    font-size: 0.78rem;
  }

  #order-entry-page .details-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #order-entry-page .details-section-heading > button { width: 100%; }

  #order-entry-page .customer-picker { grid-template-columns: minmax(0, 1fr); }
  #order-entry-page .customer-picker > button { width: 100%; }

  #order-entry-page .document-field .segmented-control,
  #order-entry-page .transaction-field .segmented-control,
  #order-entry-page .order-direction-control {
    grid-template-columns: minmax(0, 1fr);
  }

  #order-entry-page .document-field .segmented-control button,
  #order-entry-page .transaction-field .segmented-control button,
  #order-entry-page .order-direction-control button {
    width: 100%;
    border-radius: 0;
  }

  #order-entry-page .document-field .segmented-control button:first-child,
  #order-entry-page .transaction-field .segmented-control button:first-child,
  #order-entry-page .order-direction-control button:first-child {
    border-radius: 10px 10px 0 0;
  }

  #order-entry-page .document-field .segmented-control button:last-child,
  #order-entry-page .transaction-field .segmented-control button:last-child,
  #order-entry-page .order-direction-control button:last-child {
    border-radius: 0 0 10px 10px;
  }

  #order-entry-page .details-completion-actions,
  #order-entry-page .customer-form-actions { grid-template-columns: minmax(0, 1fr); }

  #order-entry-page .product-entry-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #order-entry-page .product-entry-tools button:last-child { grid-column: 1 / -1; }

  #order-entry-page .product-ledger-row.product-card { grid-template-columns: minmax(0, 1fr) 84px; }

  #order-entry-page .product-ledger-row .product-price { grid-column: 1; grid-row: 2; width: auto; justify-self: start; }
  #order-entry-page .product-ledger-row .availability { grid-column: 1; grid-row: 3; }
  #order-entry-page .product-ledger-row > button { grid-column: 2; grid-row: 2 / span 2; width: 84px; justify-self: stretch; }

  #order-entry-page .product-ledger-row .availability {
    width: fit-content;
    justify-self: start;
  }

  #order-entry-page .cart-pane .line-row {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  #order-entry-page .cart-pane .line-description { grid-column: 2 / 4; }
  #order-entry-page .cart-pane .line-price { grid-column: 2 / 4; grid-row: 2; justify-items: start; text-align: left; }
  #order-entry-page .cart-pane .quantity-control { grid-column: 2 / 4; grid-row: 3; width: 100%; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); }
  #order-entry-page .cart-pane .line-remove-action { grid-column: 3; grid-row: 1; }
}

/* Platform pages ---------------------------------------------------------- */

.platform-page {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 14px;
  padding: 4px 0 20px;
  overflow-x: clip;
}

.platform-page[hidden] { display: none; }

.platform-page :is(h1, h2, h3, p) { margin: 0; }

.platform-page :is(h1, h2, h3, strong, span, small, p) {
  min-width: 0;
}

.platform-page :is(h1, h2, h3) {
  color: #ffffff;
  letter-spacing: -0.02em;
}

.platform-page :is(p, small) { color: var(--muted); }

.platform-page button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  min-height: 94px;
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--border);
}

.platform-title-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.platform-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.platform-title-row h1 {
  white-space: normal;
  overflow-wrap: anywhere;
}

.platform-title-icon {
  width: 25px;
  height: 25px;
}

.platform-title-copy > p {
  max-width: 760px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.platform-page-heading > button {
  min-width: 156px;
  max-width: 264px;
}

.platform-page-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-self: end;
  gap: var(--space-2);
}

.platform-page-actions > button {
  min-width: 0;
  min-height: var(--control-standard);
  padding-inline: 14px;
  white-space: nowrap;
}

#work-page .platform-page-heading > .primary-action {
  width: max-content;
  min-width: max-content;
  max-width: none;
  justify-self: end;
  white-space: nowrap;
}

#work-page .platform-page-heading > .primary-action > span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.platform-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}

.platform-metric {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: var(--metric-card-min-height);
  align-content: center;
  gap: var(--card-content-gap);
  padding: var(--card-padding-block) var(--card-padding-inline);
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-raised);
}

.platform-metric.is-interactive {
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.platform-metric.is-interactive:hover,
.platform-metric.is-interactive:focus-visible {
  border-color: var(--gold);
  background: #191918;
}

.platform-metric.is-interactive:hover { transform: translateY(-1px); }

.platform-metric .metric-open-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 15px;
  height: 15px;
}

.platform-metric > span {
  color: var(--silver-soft);
  font-size: var(--metric-label-size);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.platform-metric > strong {
  color: #ffffff;
  font-size: var(--metric-value-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-metric > small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.platform-metric.attention { border-color: #8d742c; }
.platform-metric.danger { border-color: #7f3d37; }

.platform-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.platform-panel-heading {
  display: flex;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.platform-panel-heading > .panel-heading-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--gold-bright);
  opacity: 0.94;
}

.platform-panel-heading > .platform-heading-copy,
.platform-heading-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.platform-panel-heading h2 { font-size: 1rem; }

.platform-panel-heading p {
  font-size: 0.77rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.platform-panel-heading > :is(button, .platform-status) { flex: 0 0 auto; }

.platform-panel-heading > button {
  min-height: 44px;
  padding-inline: 12px;
  font-size: 0.78rem;
}

.platform-list {
  display: grid;
  min-width: 0;
}

.platform-list-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.platform-list-row:last-child { border-bottom: 0; }

.platform-list-row.is-selected {
  box-shadow: inset 3px 0 0 var(--gold);
  background: #15140f;
}

.platform-list-row > button {
  min-height: 44px;
  padding-inline: 12px;
  font-size: 0.78rem;
}

.platform-list-row.directory-list-row {
  grid-template-columns: 22px minmax(0, 1fr) auto 20px;
  width: 100%;
  min-height: 72px;
  color: inherit;
  font: inherit;
  text-align: left;
}

.directory-list-row.is-actionable {
  border-width: 0 0 1px;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}

.directory-list-row.is-actionable:hover { background: var(--surface-hover); }

.directory-list-row.is-actionable:focus-visible {
  z-index: 1;
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.directory-list-row > .ui-icon:first-child {
  width: 19px;
  height: 19px;
  color: var(--gold);
}

.directory-list-row-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.directory-list-row-copy strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

.directory-list-row-copy span {
  min-width: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.directory-list-row > .platform-status {
  justify-self: end;
  white-space: nowrap;
}

.directory-list-row-open {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

@media (max-width: 640px) {
  .platform-list-row.directory-list-row {
    grid-template-columns: 20px minmax(0, 1fr) 18px;
    align-items: start;
    gap: 8px 10px;
    padding: 14px 12px;
  }

  .directory-list-row > .platform-status {
    grid-column: 2;
    justify-self: start;
  }

  .directory-list-row-open {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

.platform-row-identity {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.platform-row-identity > .ui-icon {
  width: 20px;
  height: 20px;
}

.platform-row-identity > div,
.related-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.platform-row-identity :is(strong, span, small),
.related-row > div :is(strong, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-row-identity strong,
.related-row > div strong {
  color: #ffffff;
  font-size: 0.86rem;
}

.platform-row-identity span,
.platform-row-identity small,
.related-row > div span {
  color: var(--muted);
  font-size: 0.74rem;
}

.platform-status {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-control);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
}

.platform-status.status-success {
  border-color: #4b965c;
  background: #164f27;
  color: #ffffff;
}

.platform-status.status-warning {
  border-color: var(--gold);
  background: var(--gold-action);
}

.platform-status.status-danger {
  border-color: #db6c62;
  background: #832f29;
}

.platform-empty {
  display: grid;
  min-height: 148px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 22px;
  text-align: center;
}

.platform-empty > .ui-icon {
  width: 25px;
  height: 25px;
  opacity: 0.82;
}

.platform-empty > strong { color: #ffffff; }

.platform-empty > p {
  max-width: 420px;
  font-size: 0.8rem;
}

.platform-empty > button { margin-top: 5px; }

.platform-show-more {
  width: 100%;
  min-height: 44px;
  border-width: 1px 0 0;
  border-radius: 0;
  background: #101012;
}

.platform-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, 2fr) repeat(2, minmax(170px, 0.65fr));
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.clients-toolbar { grid-template-columns: minmax(320px, 2fr) minmax(190px, 0.7fr); }

.platform-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
}

.platform-field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  padding: 0 13px;
  background: #0c0c0e;
  color: #ffffff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 400;
}

.platform-field textarea {
  min-height: 94px;
  padding-block: 11px;
  line-height: 1.45;
  resize: vertical;
}

.platform-field :is(input, select, textarea)::placeholder {
  color: var(--silver);
  opacity: 0.9;
}

.platform-field :is(input, textarea)[readonly] {
  border-color: var(--border);
  background: #101012;
  color: var(--silver-soft);
}

.platform-master-detail {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(500px, 0.92fr) minmax(560px, 1.08fr);
  align-items: start;
  gap: 12px;
}

.inventory-layout,
.clients-layout,
.inventory-list,
.clients-list,
.work-priority-list,
.inventory-detail-pane,
.client-detail-pane,
.appointment-detail-pane,
.calendar-week-panel,
.product-form,
.appointment-form,
.settings-form {
  width: 100%;
  min-width: 0;
}

.work-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(520px, 1.55fr) minmax(330px, 0.75fr);
  align-items: start;
  gap: 12px;
}

.review-queue-layout {
  grid-template-columns: minmax(0, 1fr);
}

.platform-toolbar.review-queue-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  border-width: 1px 0 0;
  border-radius: 0;
  padding: 12px 14px;
}

.review-queue-filter-fields {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(112px, 0.72fr));
  align-items: end;
  gap: 10px;
}

.review-clear-filters {
  min-height: var(--control-standard);
  align-self: end;
  justify-self: end;
  white-space: nowrap;
}

.review-queue-list .work-item {
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) 128px 164px;
  padding-inline: 16px;
}

.review-queue-columns {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 128px 164px;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: #101012;
  color: var(--silver);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.review-queue-columns-identity {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.review-queue-columns-identity > div {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(90px, 0.32fr) minmax(240px, 1fr) minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
}

.review-queue-list .platform-row-identity > div {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(90px, 0.32fr) minmax(240px, 1fr) minmax(220px, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
}

.review-queue-list .platform-row-identity :is(small, strong, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-queue-list .review-item-assignment {
  grid-column: 3;
  grid-row: 2;
}

.review-queue-list .work-item-actions { min-width: 152px; }

.review-queue-list .work-item-open-action {
  min-width: 100px;
  padding-inline: 10px;
}

.review-queue-list .work-item-open-action > span {
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 1180px) {
  .platform-toolbar.review-queue-toolbar { grid-template-columns: minmax(0, 1fr); }
  .review-queue-filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .review-queue-columns { display: none; }
  .review-queue-list .work-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .review-queue-list .platform-row-identity > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  .review-queue-list .review-item-assignment { grid-column: 1; grid-row: auto; }
}

@media (max-width: 820px) {
  .review-queue-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .review-queue-filter-fields { grid-template-columns: minmax(0, 1fr); }
  .review-queue-list .work-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 12px;
  }
  .review-queue-list .platform-row-identity { grid-column: 1 / -1; }
  .review-queue-list .work-item > .platform-status { grid-column: 1; justify-self: start; }
  .review-queue-list .work-item-actions { grid-column: 2; }
}

@media (max-width: 350px) {
  .review-queue-metrics {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: var(--metric-card-min-height);
  }

  .review-queue-metrics .platform-financial-metric {
    height: var(--metric-card-min-height);
    min-height: var(--metric-card-min-height);
  }
}

@media (max-width: 360px) {
  .client-heading-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-economics .platform-metric > span {
    padding-right: 16px;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* Final responsive command-surface guardrails.
   These stay last so older compatibility layers cannot reintroduce overflow. */
@media (max-width: 620px) {
  #work-page .platform-page-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-self: stretch;
  }

  #work-page .platform-page-actions > button {
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 5px;
    padding-inline: 8px;
    font-size: 0.74rem;
  }

  #work-page .platform-page-actions > button > span {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  #work-page .platform-page-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #work-page .platform-page-actions > button {
    min-height: 44px;
    font-size: 0.78rem;
  }

  #work-page .platform-finance-metrics {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(92px, auto);
  }

  #work-page .platform-financial-metric {
    height: auto;
    min-height: var(--metric-card-min-height);
  }

  #work-page .financial-metric-heading > span,
  #work-page .platform-financial-metric > small {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

.work-side-stack {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.work-item { grid-template-columns: minmax(0, 1fr) auto auto; }

.work-item-button {
  width: 100%;
  justify-content: stretch;
  border-width: 0 0 1px;
  border-radius: 0;
  background: #0d0d0f;
  text-align: left;
}

.work-item-button:last-child { border-bottom: 0; }
.work-item-button:hover { background: #171719; }
.work-item-open { width: 16px; height: 16px; }

.work-item-actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.work-item-open-action {
  min-height: var(--control-compact);
  padding-inline: 12px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.compact-agenda,
.activity-list {
  display: grid;
  min-width: 0;
}

.agenda-button {
  display: grid !important;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 20px minmax(0, 1fr);
  justify-content: stretch !important;
  gap: 3px 10px !important;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 10px 14px;
  text-align: left;
}

.agenda-button > .ui-icon { grid-row: 1 / span 2; }

.agenda-button > span,
.agenda-button > small {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-button > small {
  color: var(--muted);
  font-size: 0.72rem;
}

.activity-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.activity-row:last-child { border-bottom: 0; }

.activity-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.activity-row :is(strong, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-row strong { color: #ffffff; font-size: 0.8rem; }
.activity-row span { color: var(--muted); font-size: 0.7rem; }

.inventory-list-pane,
.clients-list-pane,
.detail-pane { min-width: 0; }

.inventory-row {
  width: 100%;
  grid-template-columns: minmax(280px, 1.5fr) minmax(92px, 0.4fr) minmax(160px, 0.75fr) auto 18px;
  justify-content: stretch !important;
  gap: 10px;
  border-width: 0 0 1px;
  border-radius: 0 !important;
  background: transparent;
  text-align: left;
}

.product-row-identity { grid-template-columns: 54px minmax(0, 1fr); }

.product-row-identity > :is(img, .platform-image-placeholder) {
  width: 54px;
  height: 54px;
  border: 1px solid var(--border);
  border-radius: 10px;
  object-fit: contain;
}

.product-row-identity > img { background: transparent; }
.product-row-identity > .platform-image-placeholder { background: #080809; }

.platform-image-placeholder {
  display: grid;
  place-items: center;
}

.platform-image-placeholder > .ui-icon { opacity: 0.62; }

.inventory-stock-values,
.inventory-price-values {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.inventory-stock-values > span,
.inventory-price-values > span {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.inventory-stock-values > strong,
.inventory-price-values > strong {
  color: #ffffff;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.inventory-stock-values > small { font-size: 0.68rem; }

.client-row {
  width: 100%;
  grid-template-columns: minmax(220px, 1fr) auto 18px;
  justify-content: stretch !important;
  border-width: 0 0 1px;
  border-radius: 0 !important;
  background: transparent;
  text-align: left;
}

.client-row > .platform-row-identity {
  grid-column: 1;
  grid-row: 1;
}

.client-row > .client-row-statuses {
  grid-column: 2;
  grid-row: 1;
}

.client-row > .client-next-appointment {
  grid-column: 1 / 3;
  grid-row: 2;
}

.client-row > .row-open-icon {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}

:is(.inventory-row, .client-row):hover { background: #171719; }

.row-open-icon { width: 16px; height: 16px; }

.client-row-statuses {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.client-row-statuses .platform-status { text-transform: none; }

.client-next-appointment {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-related-count {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.platform-form {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 16px;
}

.platform-form-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.platform-form-grid > .span-2 { grid-column: 1 / -1; }

.product-form-section {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.product-form-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.product-form-section-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
}

.product-form-section-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.25;
}

.product-form-section-heading p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.platform-form-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.platform-form-actions > button {
  min-width: 148px;
  max-width: 260px;
}

.appointment-detail-pane {
  width: 100%;
}

.appointment-panel-heading {
  min-height: 76px;
}

.appointment-form {
  gap: 16px;
  padding: 18px;
}

.appointment-form-guidance {
  max-width: 820px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.appointment-form-error {
  margin: 0;
}

.appointment-form-section {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #0f0f11;
}

.appointment-section-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.appointment-section-heading > .ui-icon {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--gold-bright);
}

.appointment-section-heading > div,
.appointment-inline-heading {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.appointment-section-heading h3,
.appointment-inline-heading h4 {
  margin: 0;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.25;
}

.appointment-section-heading p,
.appointment-inline-heading p {
  font-size: 0.73rem;
  line-height: 1.4;
}

.appointment-section-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.appointment-section-grid > .span-2 {
  grid-column: span 2;
}

.appointment-section-grid > .span-4 {
  grid-column: 1 / -1;
}

.appointment-client-selection {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: end;
  gap: 10px;
}

.appointment-new-client-toggle {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding-inline: 12px;
}

.appointment-new-client {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0a0a0c;
}

.appointment-new-client[hidden] {
  display: none;
}

.appointment-new-client-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.appointment-end-output {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: #101012;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.appointment-form-actions {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.appointment-form-actions > button {
  min-width: 190px;
}

.product-detail-hero {
  display: grid;
  min-width: 0;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.product-detail-hero > :is(img, .platform-image-placeholder) {
  width: 112px;
  height: 112px;
  border: 1px solid var(--border);
  border-radius: 13px;
  object-fit: contain;
}

.product-detail-hero > img { background: transparent; }
.product-detail-hero > .platform-image-placeholder { background: #080809; }

.product-detail-facts {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.product-detail-facts .platform-metric { min-height: var(--metric-card-min-height); }

.client-related {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.client-heading-actions {
  flex: 0 0 auto;
  padding-top: 0;
}

.client-heading-actions > button { min-width: 126px; }

.client-edit-action[aria-pressed="true"] {
  border-color: var(--border-strong);
  background: #252529;
  color: #ffffff;
}

.client-record-form.is-readonly select:disabled {
  border-color: var(--border);
  background: #101012;
  color: var(--silver-soft);
  -webkit-text-fill-color: var(--silver-soft);
  opacity: 1;
}

.client-related > h3 { font-size: 0.94rem; }

.client-follow-up-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #0d0d0f;
}

.appointment-detail-pane > .client-follow-up-panel {
  margin: 0 16px 16px;
}

.follow-up-panel-heading {
  min-height: 68px;
  padding: 12px 16px;
}

.follow-up-panel-heading h3 { font-size: 0.94rem; }

.follow-up-composer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: #101012;
}

.follow-up-composer[hidden] { display: none; }
.follow-up-composer > .span-2 { grid-column: span 2; }
.follow-up-composer > .span-4 { grid-column: 1 / -1; }

.follow-up-composer-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding: 0;
}

.follow-up-list {
  border-top: 1px solid var(--border);
}

.follow-up-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 70px;
  border-width: 0 0 1px;
  border-radius: 0;
}

.follow-up-row:last-child { border-bottom: 0; }

.follow-up-row-actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.follow-up-row-actions > button {
  min-height: var(--control-compact);
  padding-inline: 12px;
  white-space: nowrap;
}

.follow-up-lifecycle-editor {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border));
  border-radius: 0;
  background: #111113;
}

.follow-up-lifecycle-editor > .span-2 { grid-column: span 2; }

.follow-up-lifecycle-editor .platform-field {
  min-width: 0;
}

.follow-up-lifecycle-editor :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
}

.follow-up-lifecycle-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding: 2px 0 0;
}

.follow-up-lifecycle-actions > button {
  min-height: var(--control-compact);
  white-space: nowrap;
}

.follow-up-history {
  border-top: 1px solid var(--border);
  background: #0a0a0c;
}

.follow-up-history > summary {
  min-height: 44px;
  padding: 13px 16px;
  color: var(--silver-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.follow-up-history-list {
  border-top: 1px solid var(--border);
}

.follow-up-history-row {
  background: #0b0b0d;
}

.review-queue-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .review-queue-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .review-queue-metrics > * { grid-column: span 2; }
  .review-queue-metrics > :nth-child(n + 4) { grid-column: span 3; }
  .follow-up-lifecycle-editor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .review-queue-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--metric-card-min-height), auto);
  }
  .review-queue-metrics > * { grid-column: span 1; }
  /* Reset the desktop six-track exception so every card receives one
     predictable mobile column; the fifth card is the only full-width item. */
  .review-queue-metrics > :nth-child(n + 4) { grid-column: span 1; }
  .review-queue-metrics > :nth-child(5) { grid-column: 1 / -1; }
  .review-queue-metrics .platform-financial-metric {
    height: auto;
    grid-template-rows: minmax(28px, auto) minmax(18px, auto) minmax(16px, auto) 6px;
  }
  .review-queue-metrics .platform-financial-metric > small {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
  .follow-up-lifecycle-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .follow-up-lifecycle-editor > .span-2 { grid-column: 1 / -1; }
  .follow-up-lifecycle-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .follow-up-lifecycle-actions > button { width: 100%; min-width: 0; }
}

@media (max-width: 620px) {
  .follow-up-lifecycle-editor {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
  .follow-up-lifecycle-editor > .span-2 { grid-column: 1; }
  .follow-up-lifecycle-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .follow-up-lifecycle-actions > button { width: 100%; }
}

@media (max-width: 350px) {
  .review-queue-metrics { grid-template-columns: minmax(0, 1fr); }
  .review-queue-metrics > *,
  .review-queue-metrics > :nth-child(5) { grid-column: 1; }
}

.client-economics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.client-economics .platform-metric {
  min-height: 92px;
  padding: 12px;
}

.related-row {
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
}

.calendar-command-bar {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(350px, 430px) auto auto;
  align-items: center;
  justify-content: start;
  gap: 12px;
  min-height: 62px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border);
}

.calendar-command-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.calendar-command-title h1 {
  color: #ffffff;
  font-size: clamp(1.28rem, 1.8vw, 1.62rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.calendar-command-icon {
  width: 21px;
  height: 21px;
}

.calendar-controls {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px max-content 44px minmax(170px, 1fr);
  align-items: center;
  gap: 0;
}

.calendar-range-label {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  padding-inline: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #101012;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
}

.calendar-controls > button {
  min-width: 0;
  min-height: 44px;
  padding-inline: 9px;
  font-size: 0.73rem;
}

.calendar-controls > .calendar-nav-icon {
  width: 44px;
  padding-inline: 0;
}

.calendar-controls > button:first-child { border-radius: 10px 0 0 10px; }
.calendar-controls > .calendar-today-action { margin-left: -1px; border-radius: 0; }
.calendar-today-action { width: max-content; min-width: max-content !important; }
.calendar-today-action > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-controls > button:nth-child(3) { margin-left: -1px; border-radius: 0 10px 10px 0; }

.calendar-nav-icon > span { display: none; }

.calendar-view-switch {
  display: grid;
  min-width: 210px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #0d0d0f;
}

.calendar-view-switch > button {
  min-width: 0;
  min-height: 44px;
  padding: 5px 10px;
  border-color: transparent;
  background: transparent;
  font-size: 0.74rem;
  white-space: nowrap;
}

.calendar-view-switch > button.is-selected {
  border-color: #8d742c;
  background: var(--gold-action);
  color: #ffffff;
}

.calendar-new-action {
  min-width: 164px;
  min-height: 44px;
  white-space: nowrap;
}

.calendar-day-strip {
  display: none;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}

.calendar-day-strip > button {
  display: grid;
  min-width: 0;
  min-height: 52px;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 4px 2px;
  border-color: transparent;
  background: transparent;
}

.calendar-day-strip > button > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 600;
  text-overflow: clip;
  white-space: nowrap;
}

.calendar-day-strip > button > strong {
  color: #ffffff;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.calendar-day-strip > button.is-selected {
  border-color: var(--gold);
  background: var(--gold-action);
}

.calendar-day-strip > button.is-selected :is(span, strong) { color: #ffffff; }

.calendar-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 2.2fr) minmax(320px, 0.8fr);
  align-items: start;
  gap: 12px;
}

.calendar-layout.calendar-view-agenda {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-layout.calendar-view-agenda > .calendar-week-panel { display: none; }

.calendar-layout.calendar-agenda-hidden { grid-template-columns: minmax(0, 1fr); }
.calendar-layout.calendar-agenda-hidden > .calendar-agenda-panel { display: none; }

.calendar-layout.calendar-view-day .calendar-time-header,
.calendar-layout.calendar-view-day .calendar-time-body {
  grid-template-columns: 64px minmax(0, 1fr);
}

.calendar-layout.calendar-view-day :is(.calendar-day-heading, .calendar-time-day):not(.is-selected) { display: none; }

.calendar-week-panel,
.calendar-agenda-panel,
.calendar-time-grid {
  min-width: 0;
}

.calendar-time-grid {
  overflow: hidden;
}

.calendar-time-header,
.calendar-time-body {
  display: grid;
  min-width: 0;
  grid-template-columns: 64px repeat(7, minmax(0, 1fr));
}

.calendar-time-header {
  min-height: 50px;
  background: #0d0d0f;
}

.calendar-time-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
}

.calendar-day-heading {
  display: grid;
  min-width: 0;
  min-height: 50px;
  align-content: center;
  justify-items: center;
  gap: 1px;
  padding: 5px 3px;
  border-width: 0 0 0 1px;
  border-color: var(--border);
  border-radius: 0;
  background: transparent;
}

.calendar-day-heading > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 600;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.calendar-day-heading > strong {
  color: #ffffff;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calendar-day-heading.is-today {
  box-shadow: inset 0 -2px 0 var(--gold);
}

.calendar-day-heading.is-selected {
  border-color: #a98931;
  background: var(--gold-action);
}

.calendar-day-heading.is-selected :is(span, strong) { color: #ffffff; }

.calendar-time-body {
  height: 648px;
  border-top: 1px solid var(--border);
}

.calendar-time-scale,
.calendar-time-day {
  position: relative;
  height: 648px;
  min-width: 0;
}

.calendar-time-scale {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.calendar-time-label {
  position: absolute;
  inset-inline: 0 7px;
  z-index: 1;
  color: var(--muted);
  font-size: 0.61rem;
  line-height: 1;
  text-align: right;
  transform: translateY(-50%);
  white-space: nowrap;
}

.calendar-time-label:first-child { transform: translateY(5px); }
.calendar-time-label:last-child { transform: translateY(calc(-100% - 5px)); }

.calendar-time-day {
  border-left: 1px solid var(--border);
  background: #0c0c0e;
}

.calendar-time-day.is-selected { background: #12110d; }

.calendar-time-day.is-today {
  box-shadow: inset 0 0 0 1px #4a4021;
}

.calendar-hour-line {
  position: absolute;
  inset-inline: 0;
  border-top: 1px solid #252528;
  pointer-events: none;
}

.calendar-open-label {
  position: absolute;
  top: 10px;
  left: 8px;
  z-index: 1;
  color: var(--silver);
  font-size: 0.64rem;
}

.calendar-appointment {
  position: absolute;
  inset-inline: 4px;
  z-index: 2;
  display: grid;
  width: auto;
  min-width: 0;
  min-height: 44px;
  align-content: start;
  justify-items: start;
  gap: 2px;
  padding: 6px 20px 6px 6px;
  overflow: hidden;
  border: 1px solid #4a4021;
  border-radius: 8px;
  background: #1a1811;
  color: #ffffff;
  font-size: 0.66rem;
  text-align: left;
}

.calendar-appointment-status {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 13px;
  height: 13px;
  color: #78d66f;
}

.calendar-appointment-unknown .calendar-appointment-status { color: var(--gold); }

.calendar-appointment:hover,
.calendar-appointment:focus-visible { z-index: 3; }

.calendar-appointment-inflow {
  border-color: #2f7240;
  background: #12301b;
}

.calendar-appointment-outflow {
  border-color: #7d4a31;
  background: #382219;
}

.calendar-appointment-unknown {
  border-color: var(--border-strong);
  background: var(--surface-control);
}

.calendar-appointment-time,
.calendar-appointment-title,
.calendar-appointment-meta {
  width: 100%;
  overflow: hidden;
  color: #ffffff;
  text-overflow: ellipsis;
}

.calendar-appointment-time {
  font-size: 0.59rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.calendar-appointment-title {
  display: -webkit-box;
  font-size: 0.66rem;
  line-height: 1.16;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.calendar-appointment-meta {
  display: -webkit-box;
  font-size: 0.58rem;
  line-height: 1.15;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.calendar-appointment.is-compact .calendar-appointment-time { display: none; }
.calendar-appointment.is-compact .calendar-appointment-title { -webkit-line-clamp: 1; }
.calendar-appointment.is-compact .calendar-appointment-meta { -webkit-line-clamp: 2; }

.calendar-legend {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: #0d0d0f;
}

.calendar-legend-item {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--silver);
  font-size: 0.66rem;
  white-space: nowrap;
}

.calendar-legend-item .ui-icon { width: 14px; height: 14px; }
.calendar-legend-inflow { color: #78d66f; }
.calendar-legend-outflow { color: #f07b55; }
.calendar-legend-unknown { color: var(--gold); }
.calendar-legend-confirmed { color: #78d66f; }

.agenda-row { grid-template-columns: minmax(0, 1fr) auto auto; }

.calendar-agenda-panel {
  display: grid;
  align-self: start;
  height: 740px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.calendar-agenda-panel .platform-panel-heading {
  min-height: 56px;
  padding: 8px 10px;
}

.calendar-agenda-close {
  width: var(--control-compact);
  min-width: var(--control-compact);
  min-height: var(--control-compact);
  padding: 0;
}

.calendar-agenda-close > span { display: none; }
.calendar-agenda-close .ui-icon { width: 15px; height: 15px; }

.calendar-agenda-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
}

.calendar-agenda-row {
  width: 100%;
  min-height: 61px;
  grid-template-columns: 60px minmax(0, 1fr) minmax(86px, auto) 14px;
  justify-content: stretch !important;
  column-gap: 9px !important;
  row-gap: 2px !important;
  padding: 5px 8px;
  border-width: 0 0 1px;
  border-radius: 0 !important;
  background: transparent;
  text-align: left;
}

.calendar-agenda-row:hover { background: #171719; }

.calendar-agenda-time {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.calendar-agenda-time strong { color: #ffffff; font-size: 0.7rem; white-space: nowrap; }
.calendar-agenda-time small { color: var(--muted); font-size: 0.58rem; white-space: nowrap; }

.calendar-agenda-row .platform-row-identity,
.calendar-agenda-row .platform-row-identity > div {
  min-width: 0;
}

.calendar-agenda-row .platform-row-identity {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr);
  align-self: center;
  text-align: left;
}

.calendar-agenda-row .platform-row-identity strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.15;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.calendar-agenda-row .platform-row-identity span {
  overflow: hidden;
  font-size: 0.58rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-agenda-summary {
  display: flex;
  min-width: 0;
  grid-column: 2 / 4;
  grid-row: 2;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-agenda-summary .platform-status {
  min-height: 19px;
  padding: 1px 6px;
  font-size: 0.54rem;
}

.calendar-agenda-finance {
  display: grid;
  min-width: 0;
  grid-column: 3;
  grid-row: 1;
  justify-items: end;
  align-self: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.calendar-agenda-finance small { font-size: 0.54rem; white-space: nowrap; }
.calendar-agenda-finance strong { color: #ffffff; font-size: 0.72rem; white-space: nowrap; }
.calendar-agenda-finance-inflow small { color: #78d66f; }
.calendar-agenda-finance-outflow small { color: #f07b55; }
.calendar-agenda-finance-unknown small { color: var(--gold); }

.calendar-agenda-link {
  display: inline-flex;
  min-width: 0;
  max-width: 112px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--muted);
  font-size: 0.54rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-agenda-link.is-linked { color: #78d66f; }
.calendar-agenda-link .ui-icon { width: 13px; height: 13px; }
.calendar-agenda-link > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-agenda-open {
  width: 16px;
  height: 16px;
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
}

.calendar-agenda-footer {
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}

.calendar-agenda-footer > button {
  width: 100%;
  min-height: 44px;
  border-color: #8d742c;
  background: #111113;
}

.settings-panel { min-height: 0; }

.platform-context-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
}

.platform-context-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 44px;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.platform-context-link:hover,
.platform-context-link:focus-visible {
  border-color: var(--border);
  background: var(--surface-hover);
  color: var(--text);
}

.platform-context-link[aria-current="page"] {
  border-color: color-mix(in srgb, var(--gold) 52%, var(--border));
  background: color-mix(in srgb, var(--gold) 11%, var(--surface-control));
  color: var(--gold);
}

.platform-context-link .ui-icon { flex: 0 0 auto; width: 17px; height: 17px; }
.platform-context-link span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .platform-context-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.settings-system-state {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #101012;
}

.settings-system-state > strong { color: #ffffff; }
.settings-system-state > p { font-size: 0.8rem; }

.account-menu :is(a, button) {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 12px;
  background: #161618;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.account-menu :is(a, button):hover {
  border-color: var(--border-strong);
  background: #222225;
}

.account-menu a[aria-current="page"] {
  border-color: var(--gold);
  background: var(--gold-action);
  color: #ffffff;
}

html[data-text-scale="large"] { font-size: 18px; }
html[data-text-scale="larger"] { font-size: 19px; }

html[data-increased-contrast="true"] {
  --border: #606068;
  --border-strong: #8f8f98;
  --border-divider: #606068;
  --border-frame: #75757e;
  --border-interactive: #9a9aa5;
  --muted: #d0d0d6;
}

html[data-increased-contrast="true"] .platform-page :is(input, select, textarea, button, a):focus-visible {
  outline-width: 3px;
}

html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (max-width: 1280px) {
  .platform-master-detail {
    grid-template-columns: minmax(430px, 0.9fr) minmax(500px, 1.1fr);
  }

  .inventory-row {
    grid-template-columns: minmax(250px, 1fr) 90px minmax(140px, 0.6fr) auto 18px;
  }

}

@media (max-width: 1120px) {
  .platform-master-detail,
  .work-layout { grid-template-columns: minmax(0, 1fr); }

  .platform-master-detail > .detail-pane { grid-row: auto; }

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

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

  .platform-metric { min-height: var(--metric-card-min-height); }

  .inventory-row {
    grid-template-columns: minmax(280px, 1.3fr) minmax(100px, 0.45fr) minmax(170px, 0.7fr) auto 18px;
  }

  .calendar-command-bar {
    grid-template-columns: auto minmax(360px, 1fr) auto;
  }

  .calendar-view-switch { display: none; }
  .calendar-layout { grid-template-columns: minmax(0, 1fr); }
  .calendar-day-strip { display: grid; }
  .calendar-layout > .calendar-week-panel { display: none; }
  .calendar-layout > .calendar-agenda-panel { grid-row: 1; }
  .calendar-agenda-panel { height: auto; overflow: visible; }
  .calendar-agenda-panel .calendar-agenda-list { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .calendar-agenda-panel .calendar-agenda-close { display: none !important; }
}

@media (max-width: 900px) {
  .platform-page-heading {
    min-height: 84px;
    padding-inline: 14px;
  }

  .platform-toolbar,
  .clients-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .platform-toolbar > .toolbar-search { grid-column: 1 / -1; }

  .work-side-stack { grid-template-columns: minmax(0, 1fr); }

  .inventory-row {
    grid-template-columns: minmax(0, 1fr) minmax(145px, auto) auto 18px;
    align-items: center;
  }

  .inventory-row > .product-row-identity { grid-column: 1 / -1; }
  .inventory-row > .inventory-stock-values { grid-column: 1; }
  .inventory-row > .inventory-price-values { grid-column: 2; }

  .client-row {
    grid-template-columns: minmax(0, 1fr) auto 18px;
  }

  .client-row > .platform-row-identity { grid-column: 1; grid-row: 1; }
  .client-row > .client-row-statuses { grid-column: 2; grid-row: 1; }
  .client-row > .client-next-appointment { grid-column: 1 / 3; grid-row: 2; }
  .client-row > .row-open-icon { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

  .calendar-command-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .calendar-controls { grid-template-columns: 38px max-content 38px minmax(145px, 1fr); }

  .calendar-controls > button { width: 100%; }

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

  .appointment-section-grid > .span-2,
  .appointment-section-grid > .span-4 {
    grid-column: 1 / -1;
  }

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

@media (max-width: 620px) {
  .platform-page {
    gap: 10px;
    padding-bottom: 14px;
  }

  .platform-page-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 0;
    padding: 12px 4px 14px;
  }

  .calendar-command-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-bottom: 8px;
  }

  .calendar-command-title { grid-column: 1; grid-row: 1; }
  .calendar-new-action {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding-inline: 10px;
  }

  .calendar-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 38px 68px 38px minmax(0, 1fr);
  }

  .platform-title-copy > p { font-size: 0.8rem; }

  .platform-page-heading > button {
    width: 100%;
    max-width: none;
  }

  #work-page .platform-page-heading > .primary-action {
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
  }

  .platform-metrics { gap: 8px; }

  .platform-metric {
    min-height: var(--metric-card-min-height);
    padding: var(--card-padding-block) var(--card-padding-inline);
  }

  .platform-metric > span { font-size: 0.65rem; }
  .platform-metric > strong { font-size: 1.08rem; }

  .platform-panel { border-radius: 13px; }

  .platform-panel-heading {
    min-height: 62px;
    padding: 11px 12px;
  }

  .client-detail-pane > .platform-panel-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .client-heading-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-heading-actions > button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  .platform-toolbar,
  .clients-toolbar {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
  }

  .platform-toolbar > .toolbar-search { grid-column: auto; }

  .platform-list-row,
  .work-item,
  .agenda-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    padding: 11px 12px;
  }

  .platform-list-row > .platform-row-identity { grid-column: 1 / -1; }

  .platform-list-row > button { grid-column: 2; }

  .platform-list-row > .platform-status { grid-column: 1; justify-self: start; }

  .inventory-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
  }

  .inventory-row > .product-row-identity { grid-column: 1 / -1; }
  .inventory-row > .inventory-stock-values { grid-column: 1; }
  .inventory-row > .inventory-price-values { grid-column: 1 / -1; }
  .inventory-row > .platform-status { grid-column: 1; }
  .inventory-row > .row-open-icon { grid-column: 2; grid-row: 2 / span 3; align-self: center; }

  .inventory-row > .inventory-stock-values {
    grid-template-columns: auto auto;
    align-items: baseline;
    justify-content: start;
    column-gap: 8px;
  }

  .inventory-row > .inventory-stock-values > small {
    grid-column: 1 / -1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inventory-row > .inventory-price-values {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .inventory-row > .inventory-price-values > strong { white-space: nowrap; }

  .client-row { grid-template-columns: minmax(0, 1fr) 18px; }
  .client-row > .platform-row-identity { grid-column: 1; grid-row: 1; }
  .client-row > .client-row-statuses { grid-column: 1; grid-row: 2; }
  .client-row > .client-next-appointment { grid-column: 1; grid-row: 3; }
  .client-row > .row-open-icon { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

  .platform-form { padding: 12px; }

  .platform-form-grid { grid-template-columns: minmax(0, 1fr); }
  .platform-form-grid > .span-2 { grid-column: 1; }
  .product-form-section-heading { grid-template-columns: minmax(0, 1fr); gap: 4px; }

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

  .platform-form-actions > button {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-inline: 10px;
  }

  .product-detail-hero {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .product-detail-hero > :is(img, .platform-image-placeholder) {
    width: 84px;
    height: 84px;
  }

  .product-detail-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .product-detail-facts .platform-metric {
    min-height: var(--metric-card-min-height);
    padding: var(--card-padding-block) var(--card-padding-inline);
  }

  .product-detail-facts .platform-metric > small { display: none; }

  .client-related { padding: 0 12px 12px; }

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

  .related-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }

  .related-row > .platform-status { grid-column: 2; justify-self: start; }
  .related-row > button { grid-column: 3; grid-row: 1 / span 2; }

  .calendar-agenda-panel .calendar-agenda-list { grid-template-columns: minmax(0, 1fr); }

  .appointment-form {
    gap: 12px;
    padding: 12px;
  }

  .appointment-form-section {
    gap: 12px;
    padding: 14px;
  }

  .appointment-section-grid,
  .appointment-new-client-grid,
  .appointment-client-selection {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-section-grid > .span-2,
  .appointment-section-grid > .span-4 {
    grid-column: 1;
  }

  .appointment-new-client-toggle {
    justify-self: stretch;
  }

  .appointment-form-actions > button {
    min-width: 0;
  }

  .account-menu {
    width: min(280px, calc(100vw - 16px));
    right: 8px;
  }
}

@media (max-width: 480px) {
  .platform-form-actions { grid-template-columns: minmax(0, 1fr); }

  .platform-title-row h1 { font-size: 1.38rem; }
}

@media (max-width: 379px) {
  .platform-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .platform-metric { min-height: var(--metric-card-min-height); }

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

  .product-detail-hero {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .product-detail-hero > :is(img, .platform-image-placeholder) {
    width: 72px;
    height: 72px;
  }

  .product-detail-facts { grid-template-columns: minmax(0, 1fr); }

  .product-detail-facts .platform-metric {
    min-height: var(--metric-card-min-height);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

}

/* Shared application canvas, rhythm, and reflow safeguards. */
.global-search,
main {
  width: 100%;
  max-width: var(--canvas-max);
  margin-inline: auto;
  padding-inline: var(--canvas-gutter);
}

main { padding-bottom: var(--space-4); }

.invoice-queue-page,
.platform-page {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.invoice-queue-page { gap: var(--space-3); }

.invoice-queue-page :is(button, input, select) { border-radius: 10px; }

.invoices-page-heading {
  min-height: 76px;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 14px;
}

.invoices-title-copy h1 {
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: normal;
}

.queue-overview { gap: var(--space-2); }

.invoice-queue-page .queue-metric {
  min-height: 74px;
  border-radius: 14px;
}

.quote-queue-shell { border-radius: 14px; }

.queue-heading {
  min-height: 64px;
  gap: var(--space-4);
  padding-inline: var(--space-4);
}

.queue-toolbar { padding-inline: var(--space-4); }

.queue-empty {
  min-height: 0;
  padding: var(--space-5);
}

.platform-page {
  gap: var(--space-4);
  padding-block: var(--space-1) var(--space-5);
  overflow-x: visible;
}

.platform-page-heading {
  gap: var(--space-4);
  min-height: 76px;
  padding: var(--space-4) 0;
}

.platform-page-heading > button {
  min-height: var(--control-primary);
}

.platform-metrics,
.product-detail-facts,
.client-economics {
  gap: var(--space-2);
}

.platform-metric {
  min-height: var(--metric-card-min-height);
  padding: var(--card-padding-block) var(--card-padding-inline);
  border-radius: 14px;
}

.platform-title-icon {
  width: 20px;
  height: 20px;
}

.platform-panel {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.platform-panel-heading {
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--panel-padding);
}

.platform-panel-heading > button,
.platform-list-row > button,
.platform-show-more,
.calendar-controls > button,
.account-menu :is(a, button) {
  min-height: var(--control-compact);
}

.platform-toolbar,
.clients-toolbar,
.platform-master-detail,
.work-layout,
.work-side-stack,
.calendar-layout,
.client-related {
  gap: var(--space-4);
}

.platform-toolbar,
.clients-toolbar { padding: var(--space-3); }

.platform-toolbar,
.clients-toolbar,
.platform-page button,
.platform-field :is(input, select, textarea) {
  border-radius: 10px;
}

.platform-field { gap: var(--space-2); }

.platform-field :is(input, select, textarea),
.appointment-new-client-toggle,
.appointment-end-output {
  min-height: var(--control-standard);
}

.platform-form {
  width: 100%;
  max-width: var(--form-canvas-max);
  margin-inline: auto;
  gap: var(--space-4);
  padding: var(--panel-padding);
}

.platform-form-grid,
.appointment-section-grid,
.appointment-new-client-grid {
  column-gap: var(--space-4);
  row-gap: var(--space-4);
}

.platform-form-actions {
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.platform-form-actions > button {
  min-height: var(--control-standard);
}

.platform-form-actions > :is(.primary-action, [type="submit"]) {
  min-height: var(--control-primary);
}

.platform-page button > span,
.platform-page :is(.primary-action, .destructive-action, [type="submit"]) > span,
.invoices-heading-actions button > span,
.queue-filters button > span,
.queue-card-actions button > span,
.queue-status,
.queue-delivery {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-filters button,
.queue-card-actions > button {
  min-height: var(--control-compact);
}

.invoices-heading-actions > button { min-height: var(--control-standard); }

.platform-list,
.platform-form,
.invoice-queue-page {
  max-height: none;
  overflow-y: visible;
}

/* Details already sits on the workflow canvas; keep its groups, not a second card shell. */
#order-entry-page .details-canvas {
  gap: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.platform-row-identity strong,
.related-row > div strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.3;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1120px) {
  .platform-master-detail { grid-template-columns: minmax(0, 1fr); }

  .platform-master-detail:not(.is-detail-route) > .detail-pane { display: none; }

  .platform-master-detail.is-detail-route:has(> .detail-pane) > .detail-pane {
    display: block;
    grid-row: 1;
  }

  .platform-master-detail.is-detail-route:has(> .detail-pane) > :is(.inventory-list-pane, .clients-list-pane) {
    display: none;
  }
}

@media (max-width: 620px) {
  .platform-page { gap: var(--space-3); }

  .platform-page-heading {
    gap: var(--space-3);
    padding-block: var(--space-3) var(--space-4);
  }

  .platform-toolbar,
  .clients-toolbar,
  .platform-form,
  .appointment-form,
  .appointment-form-section {
    padding: var(--panel-padding);
  }

  .platform-toolbar,
  .clients-toolbar,
  .platform-master-detail,
  .work-layout,
  .work-side-stack,
  .calendar-layout,
  .platform-form-grid,
  .appointment-section-grid,
  .appointment-new-client-grid {
    gap: var(--space-3);
  }

  .platform-form-actions > button { max-width: none; }

  .calendar-controls { gap: var(--space-2); }

  .calendar-day-strip { display: grid; }

  .calendar-layout > .calendar-agenda-panel { order: 0; grid-row: 1; }
  .calendar-layout > .calendar-week-panel { display: none; }

  .calendar-agenda-row {
    grid-template-columns: 52px minmax(0, 1fr) minmax(86px, auto) 16px;
    column-gap: 9px !important;
    row-gap: 7px !important;
    padding: 10px;
  }

  .calendar-agenda-time { grid-column: 1; grid-row: 1; }
  .calendar-agenda-row > .platform-row-identity { grid-column: 2; grid-row: 1; }
  .calendar-agenda-finance { grid-column: 3; grid-row: 1; }

  .calendar-agenda-summary {
    grid-column: 2 / 4;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
  }

  .calendar-agenda-open { grid-column: 4; grid-row: 1; align-self: center; }

  #order-entry-page .customer-record-summary {
    gap: var(--space-2);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
}

@media (max-width: 480px) {
  #order-entry-page .page-heading { column-gap: var(--space-2); }

  #order-entry-page .title-copy p {
    display: -webkit-box;
    max-width: none;
    overflow: hidden;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #order-entry-page .session-clock {
    align-self: start;
    min-height: 32px;
    gap: 4px;
    padding-inline: 6px;
    font-size: 0.68rem;
  }

  #order-entry-page .session-clock .ui-icon { width: 14px; height: 14px; }
}

/* Product-design QA refinements: compact workflows must reflow, never clip. */
#work-page .work-item .platform-row-identity span {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 379px) {
  #order-entry-page .document-field,
  #order-entry-page .transaction-field {
    grid-template-rows: auto auto;
  }

  #order-entry-page .order-direction-control {
    height: auto;
    overflow: visible;
  }

  #order-entry-page .checkout-item-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 5px;
  }

  #order-entry-page .checkout-ledger-quantity,
  #order-entry-page .checkout-ledger-unit-price,
  #order-entry-page .checkout-ledger-line-total {
    min-width: 0;
  }

  #order-entry-page .checkout-ledger-unit-price {
    justify-items: start;
    text-align: left;
  }

  #order-entry-page .checkout-mobile-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #order-entry-page .payment-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-metric > strong { font-size: 0.98rem; }
}

/* Owner workspaces: one labeled, sortable grid rhythm across inventory and CRM. */
.platform-toolbar,
.clients-toolbar {
  grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(150px, 0.7fr));
}

.platform-list-columns {
  display: grid;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: #111113;
  color: var(--silver-soft);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.inventory-list-columns {
  grid-template-columns: minmax(190px, 1.35fr) minmax(72px, 0.42fr) minmax(132px, 0.72fr) minmax(86px, auto) 54px;
}

.client-list-columns,
.client-row {
  grid-template-columns: minmax(165px, 1fr) minmax(64px, 0.4fr) minmax(136px, 0.84fr) minmax(104px, 0.6fr) 54px;
}

.inventory-row {
  grid-template-columns: minmax(190px, 1.35fr) minmax(72px, 0.42fr) minmax(132px, 0.72fr) minmax(86px, auto) 54px;
}

.platform-list-columns > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-list-columns > span:last-child,
.appointment-ledger-columns > span:last-child {
  overflow: visible;
  text-overflow: clip;
}

.client-row > .platform-row-identity,
.client-row > .client-classification,
.client-row > .client-next-appointment,
.client-row > .client-follow-up,
.client-row > .row-open-icon {
  grid-row: 1;
}

.client-row > .platform-row-identity { grid-column: 1; }
.client-row > .client-classification { grid-column: 2; justify-self: start; }
.client-row > .client-next-appointment { grid-column: 3; }
.client-row > .client-follow-up { grid-column: 4; justify-self: start; }
.client-row > .row-open-icon { grid-column: 5; align-self: center; }

@media (max-width: 900px) {
  .platform-toolbar,
  .clients-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .platform-list-columns { display: none; }

  .client-row {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 7px 10px;
  }

  .client-row > .platform-row-identity { grid-column: 1; grid-row: 1; }
  .client-row > .client-classification { grid-column: 1; grid-row: 2; }
  .client-row > .client-next-appointment { grid-column: 1; grid-row: 3; }
  .client-row > .client-follow-up { grid-column: 1; grid-row: 4; }
  .client-row > .row-open-icon { grid-column: 2; grid-row: 1 / span 4; }
}

@media (max-width: 379px) {
  .platform-toolbar,
  .clients-toolbar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body:is(
    [data-route="inventory-new"],
    [data-route="inventory-detail"],
    [data-route="client-new"],
    [data-route="client-detail"]
  ) .platform-metrics {
    display: none;
  }

  body:is([data-route="appointment-new"], [data-route="appointment-detail"]) .appointment-form-section {
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #order-entry-page .pane-heading-actions .cart-clear-action {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  #order-entry-page .cart-clear-action > span { display: none; }
}

/* Lifecycle trust states: explicit empty selection and appointment actions. */
#order-entry-page .customer-empty-state {
  display: flex;
  min-height: 116px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--form-border);
  border-radius: 12px;
  background: #0c0c0d;
}

#order-entry-page .customer-empty-state > .action-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--gold-bright);
}

#order-entry-page .customer-empty-state > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#order-entry-page .customer-empty-state p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.appointment-heading-actions {
  justify-content: flex-end;
  align-items: center;
  padding-top: 0;
}

@media (max-width: 620px) {
  .appointment-heading-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appointment-heading-actions > :last-child {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Lifecycle Queue — aligned to the approved Work and Calendar direction. */
.invoice-queue-page {
  gap: var(--space-4);
  padding-block: var(--space-1) var(--space-5);
}

.invoices-page-heading {
  min-height: 88px;
  padding: var(--space-4) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.invoices-title-copy { gap: 4px; }

.invoices-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.invoices-title-icon {
  width: 24px;
  height: 24px;
}

.invoices-title-copy .eyebrow {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoices-title-copy h1 {
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  line-height: 1.08;
}

.invoices-title-copy p {
  max-width: 720px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.invoices-heading-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: var(--space-3);
}

.invoices-heading-actions > button {
  min-width: 132px;
  min-height: var(--control-standard);
  white-space: nowrap;
}

.queue-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--space-3);
}

.invoice-queue-page .queue-metric {
  position: relative;
  min-height: var(--metric-card-min-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: stretch;
  gap: var(--card-content-gap);
  padding: var(--card-padding-block) var(--card-padding-inline);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #111113;
  color: #ffffff;
  text-align: left;
}

.invoice-queue-page .queue-metric:hover {
  border-color: #5a5a60;
  background: #171719;
}

.invoice-queue-page .queue-metric[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold-action);
  box-shadow: inset 0 0 0 1px rgba(241, 204, 99, 0.24);
}

.queue-metric-heading {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: var(--metric-label-size);
  font-weight: 600;
}

.invoice-queue-page .queue-metric > .queue-metric-heading {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.queue-metric-heading > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-metric-heading .ui-icon { width: 19px; height: 19px; }
.queue-metric-heading .ui-icon:last-child { width: 16px; height: 16px; opacity: 0.82; }

.invoice-queue-page .queue-metric > strong {
  grid-row: auto;
  align-self: auto;
  color: #ffffff;
  font-size: var(--metric-value-size);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.invoice-queue-page .queue-metric > small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.invoice-queue-page .queue-metric[aria-pressed="true"] > small { color: #ffffff; }

.quote-queue-shell {
  overflow: visible;
  border-color: var(--border-strong);
  border-radius: 14px;
  background: #09090a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.queue-heading {
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
}

.queue-heading h2 { font-size: 1.16rem; }
.queue-heading p { font-size: 0.74rem; }

.queue-heading > .queue-summary {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #151517;
  color: var(--silver-soft);
  font-size: 0.7rem;
  white-space: nowrap;
}

.queue-toolbar {
  grid-template-columns: minmax(280px, 1.75fr) repeat(3, minmax(150px, 0.62fr));
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #0d0d0f;
}

.queue-search,
.queue-filter-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 6px;
  color: var(--silver-soft);
  font-size: 0.68rem;
  font-weight: 600;
}

.queue-search > div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: var(--control-compact);
  padding-left: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #0b0b0c;
}

.queue-search > div:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.queue-search .ui-icon { width: 17px; height: 17px; }

.queue-search input {
  min-height: 44px;
  padding-inline: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.queue-search input:focus-visible { outline: 0; }

.queue-filter-select select {
  min-height: var(--control-compact);
  padding-inline: 12px 32px;
  border-radius: 10px;
  font-size: 0.76rem;
}

.queue-list-columns,
.queue-card,
.queue-card:first-child,
.queue-card:last-child {
  grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1.2fr) minmax(165px, 0.9fr) minmax(140px, 0.78fr) minmax(104px, 0.54fr) minmax(154px, 0.8fr);
}

.queue-list-columns {
  display: grid;
  min-height: 38px;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
  background: #111113;
  color: var(--silver-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.queue-list-columns > span:nth-child(5) { text-align: right; }
.queue-list-columns > span:nth-child(6) { text-align: center; }

.quote-queue-list {
  gap: 0;
  padding: 0;
}

.queue-card,
.queue-card:first-child,
.queue-card:last-child {
  min-height: 82px;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: #0c0c0e;
}

.queue-card.is-archived { opacity: 0.78; }

.queue-card-identity,
.queue-card-client,
.queue-card-activity,
.queue-card-total {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.queue-card-identity { grid-column: 1; grid-row: 1; }
.queue-card-client { grid-column: 2; grid-row: 1; }
.queue-card-statuses { grid-column: 3; grid-row: 1; }
.queue-card-activity { grid-column: 4; grid-row: 1; }
.queue-card-total { grid-column: 5; grid-row: 1; }
.queue-card-actions { grid-column: 6; grid-row: 1; }

.queue-card-identity strong,
.queue-card-client strong,
.queue-card-total strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-card-identity span,
.queue-card-identity > small:not(.queue-mobile-label),
.queue-card-client span,
.queue-card-activity span,
.queue-card-activity time {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-card-identity span { color: var(--silver-soft); font-weight: 500; }

.queue-card-statuses {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.queue-status,
.queue-delivery {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-card-total { justify-items: end; text-align: right; }

.queue-card-total strong {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.queue-card-actions {
  grid-template-columns: minmax(104px, 1fr) 44px;
  gap: 7px;
}

.queue-card-actions > button {
  min-height: var(--control-compact);
  padding-inline: 10px;
  font-size: 0.7rem;
}

.queue-card-actions > button > span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-card-actions:has(> button:only-child) { grid-template-columns: minmax(0, 1fr); }

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

.quote-queue-list > .queue-empty {
  min-height: 250px;
  margin: var(--space-4);
  padding: var(--space-5);
}

.queue-empty-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: center;
  gap: var(--space-3);
}

.queue-empty-actions > button {
  min-height: var(--control-standard);
  white-space: nowrap;
}

.queue-storage-note {
  margin: 0;
  padding: 9px var(--space-4) 11px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.64rem;
  text-align: right;
}

@media (max-width: 1180px) {
  .queue-toolbar { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(138px, 0.7fr)); }
  .queue-list-columns,
  .queue-card,
  .queue-card:first-child,
  .queue-card:last-child {
    grid-template-columns: minmax(135px, 0.88fr) minmax(170px, 1.12fr) minmax(150px, 0.86fr) minmax(128px, 0.72fr) minmax(96px, 0.5fr) minmax(144px, 0.74fr);
    gap: 10px;
  }
}

@media (max-width: 1080px) {
  .queue-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-search { grid-column: 1 / -1; }
  .queue-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-list-columns { display: none; }

  .quote-queue-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .queue-card,
  .queue-card:first-child,
  .queue-card:last-child {
    min-height: 176px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-items: start;
    gap: 10px var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .queue-card-identity { grid-column: 1; grid-row: 1; }
  .queue-card-total { grid-column: 2; grid-row: 1; align-self: start; }
  .queue-card-client { grid-column: 1 / -1; grid-row: 2; }
  .queue-card-statuses { grid-column: 1; grid-row: 3; align-self: end; }
  .queue-card-activity { grid-column: 1; grid-row: 4; }
  .queue-card-actions { grid-column: 2; grid-row: 3 / span 2; align-self: end; }
}

/* Preserve the 960px contract for downstream audit consumers while the
   responsive card layout begins earlier at 1080px. */
@media (max-width: 960px) {
  .queue-list-columns { display: none; }

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

  .queue-card,
  .queue-card:first-child,
  .queue-card:last-child {
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 12px;
  }

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

@media (max-width: 760px) {
  .invoices-page-heading {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }

  .invoices-heading-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoices-heading-actions > button { min-width: 0; }
  .quote-queue-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .invoice-queue-page { gap: var(--space-3); }
  .invoices-title-copy p { font-size: 0.74rem; }
  .queue-overview { gap: var(--space-2); }

  .invoice-queue-page .queue-metric {
    min-height: var(--metric-card-min-height);
    gap: 4px;
    padding: var(--card-padding-block) var(--card-padding-inline);
  }

  .queue-metric-heading { grid-template-columns: 20px minmax(0, 1fr) 16px; font-size: 0.72rem; }
  .queue-metric-heading > span {
    overflow: visible;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }
  .invoice-queue-page .queue-metric > strong { font-size: 1.22rem; }

  .queue-heading {
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .queue-heading > .queue-summary { min-height: 28px; padding-inline: 8px; font-size: 0.63rem; }
  .queue-heading p { max-width: 32ch; }
  .queue-toolbar { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
  .queue-search { grid-column: 1; }

  .quote-queue-list { padding: var(--space-3); }

  .queue-card,
  .queue-card:first-child,
  .queue-card:last-child {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: repeat(5, auto);
    gap: 9px var(--space-3);
  }

  .queue-card-identity { grid-column: 1; grid-row: 1; }
  .queue-card-total { grid-column: 2; grid-row: 1; }
  .queue-card-client { grid-column: 1 / -1; grid-row: 2; }
  .queue-card-statuses { grid-column: 1 / -1; grid-row: 3; }
  .queue-card-activity { grid-column: 1; grid-row: 4; }
  .queue-card-actions { grid-column: 1 / -1; grid-row: 5; }
  .queue-mobile-label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: normal;
  }
  .queue-card-statuses > .queue-mobile-label { flex: 0 0 100%; }
  .queue-card-actions > button { min-height: var(--control-compact); }
  .queue-storage-note { padding-inline: var(--space-3); text-align: left; }
}

@media (max-width: 420px) {
  .queue-toolbar { grid-template-columns: minmax(0, 1fr); }
  .queue-search { grid-column: 1; }
  .queue-heading { display: grid; }
  .queue-heading > .queue-summary { justify-self: start; }
  .invoice-queue-page .queue-metric > small { white-space: normal; -webkit-line-clamp: 2; }
  .queue-empty-actions { grid-template-columns: minmax(0, 1fr); width: 100%; }
}

/* At the narrowest supported canvas, give every calendar command a complete
   row instead of clipping the title or date range beside the primary action. */
@media (max-width: 360px) {
  #order-entry-page .record-phone,
  #order-entry-page .record-classification {
    grid-column: 1 / -1;
  }

  #order-entry-page .page-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #order-entry-page .page-heading .title-lockup {
    grid-column: 1;
    grid-row: 1;
  }

  #order-entry-page .page-heading .reopen-document-header-action,
  #order-entry-page .page-heading .session-clock {
    width: 100%;
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
  }

  #order-entry-page .page-heading .workflow-tabs {
    grid-column: 1;
    grid-row: 3;
  }

  .invoice-header {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 14px 16px;
  }

  .invoice-logo {
    width: 132px;
    max-width: 100%;
    height: 38px;
  }

  .invoice-title {
    width: 100%;
    justify-items: start;
    text-align: left;
  }

  .invoice-title strong {
    font-size: 0.82rem;
    letter-spacing: 0.055em;
  }

  .calendar-command-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-command-title {
    grid-column: 1;
    grid-row: 1;
  }

  .calendar-new-action {
    width: 100%;
    grid-column: 1;
    grid-row: 2;
  }

  .calendar-controls {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: 44px max-content 44px;
    gap: 0;
  }

  .calendar-range-label {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 8px;
    margin-left: 0;
  }
}

@media (max-width: 379px) {
  .invoices-heading-actions { grid-template-columns: minmax(0, 1fr); }
  .queue-overview { grid-template-columns: minmax(0, 1fr); }
}

/* Owner records — focused lists, dedicated detail canvases, and balanced forms. */
.platform-index-layout {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.platform-index-layout > .platform-panel { width: 100%; }

body:is(
  [data-route="inventory-new"],
  [data-route="inventory-detail"],
  [data-route="client-new"],
  [data-route="client-detail"]
) :is(.inventory-detail-pane, .client-detail-pane) {
  width: min(100%, 1320px);
  margin-inline: auto;
}

body:is(
  [data-route="appointment-new"],
  [data-route="appointment-detail"]
) .appointment-detail-pane {
  width: min(100%, 1420px);
  margin-inline: auto;
}

body:is(
  [data-route="inventory-new"],
  [data-route="inventory-detail"],
  [data-route="client-new"],
  [data-route="client-detail"],
  [data-route="appointment-new"],
  [data-route="appointment-detail"]
) .platform-page-heading {
  width: min(100%, 1420px);
  margin-inline: auto;
}

.inventory-list-pane .platform-panel-heading,
.clients-list-pane .platform-panel-heading {
  min-height: 70px;
  padding-inline: 18px;
}

.inventory-list-pane .platform-panel-heading h2,
.clients-list-pane .platform-panel-heading h2 {
  font-size: 1.08rem;
}

.platform-index-layout .platform-list-row {
  min-height: 78px;
  padding: 12px 18px;
}

.platform-index-layout .platform-list-columns { padding-inline: 18px; }

.inventory-list-columns,
.inventory-row {
  grid-template-columns: minmax(320px, 1.55fr) minmax(128px, 0.5fr) minmax(205px, 0.72fr) minmax(118px, 0.38fr) 54px;
  column-gap: 18px;
}

.client-list-columns,
.client-row {
  grid-template-columns: minmax(300px, 1.2fr) minmax(110px, 0.4fr) minmax(260px, 0.9fr) minmax(170px, 0.6fr) 54px;
  column-gap: 18px;
}

.platform-index-layout .platform-row-identity strong { font-size: 0.92rem; }
.platform-index-layout .platform-row-identity span { font-size: 0.76rem; }
.platform-index-layout .client-next-appointment { font-size: 0.76rem; }

.inventory-price-values > strong,
.inventory-stock-values > strong {
  font-size: 0.86rem;
  overflow-wrap: normal;
  white-space: nowrap;
}

.client-form-section {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.client-form-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.client-form-section-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.client-form-section-heading > .ui-icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--gold-bright);
}

.client-form-section-heading > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.client-form-section-heading h3 {
  font-size: 0.94rem;
  line-height: 1.25;
}

.client-form-section-heading p {
  max-width: 78ch;
  font-size: 0.74rem;
  line-height: 1.4;
}

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

.client-form-grid > .span-2 { grid-column: span 2; }
.client-form-grid > .span-3 { grid-column: 1 / -1; }

.client-record-form.is-readonly .platform-field {
  min-height: 72px;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #101012;
}

.client-record-form.is-readonly .platform-field :is(input, select, textarea) {
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 1;
  resize: none;
}

.client-record-form.is-readonly .platform-field textarea { min-height: 44px; }

.client-heading-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(128px, auto);
  padding: 0;
}

.client-heading-actions > button { min-width: 0; }

.client-related {
  width: min(100%, 1288px);
  margin: 0 auto 16px;
  padding: 0 16px 16px;
}

.client-economics .platform-metric { min-height: var(--metric-card-min-height); }

.product-form-section-heading {
  grid-template-columns: minmax(168px, 210px) minmax(0, 1fr);
  gap: 18px;
}

.product-detail-hero {
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
}

.product-detail-hero > :is(img, .platform-image-placeholder) {
  width: 128px;
  height: 128px;
}

.product-detail-facts .platform-metric { min-height: var(--metric-card-min-height); }

.appointment-section-grid [name="expectedAmount"],
.product-form :is([name="buyUnitPrice"], [name="sellUnitPrice"]) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1121px) {
  .appointment-form {
    max-width: 1320px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .appointment-form > :is(.appointment-form-guidance, .appointment-form-error, .appointment-section-purpose, .appointment-form-actions) {
    grid-column: 1 / -1;
  }

  .appointment-section-schedule { grid-column: 1; }
  .appointment-section-assignment { grid-column: 2; }
  .appointment-section-finance { grid-column: 1; }
  .appointment-section-notes { grid-column: 2; }

  .appointment-section-schedule .appointment-section-grid,
  .appointment-section-assignment .appointment-section-grid,
  .appointment-section-finance .appointment-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appointment-section-finance .span-2,
  .appointment-section-finance .span-4,
  .appointment-section-notes .span-4 {
    grid-column: 1 / -1;
  }

  .appointment-section-notes .appointment-section-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1120px) {
  .inventory-list-columns,
  .inventory-row {
    grid-template-columns: minmax(260px, 1.3fr) minmax(110px, 0.45fr) minmax(180px, 0.7fr) minmax(106px, auto) 54px;
    column-gap: 12px;
  }

  .client-list-columns,
  .client-row {
    grid-template-columns: minmax(230px, 1fr) minmax(96px, auto) minmax(210px, 0.85fr) minmax(150px, 0.6fr) 54px;
    column-gap: 12px;
  }
}

@media (max-width: 900px) {
  .platform-index-layout .platform-list-row { min-height: 0; }

  .inventory-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 8px 12px;
  }

  .inventory-row > .product-row-identity { grid-column: 1 / 3; grid-row: 1; }
  .inventory-row > .inventory-stock-values { grid-column: 2; grid-row: 2; }
  .inventory-row > .inventory-price-values { grid-column: 2; grid-row: 3; }
  .inventory-row > .platform-status { grid-column: 3; grid-row: 1; align-self: start; }
  .inventory-row > .row-open-icon { grid-column: 3; grid-row: 2 / 4; align-self: center; }

  .client-row {
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-rows: repeat(4, auto);
    gap: 7px 10px;
  }

  .client-row > .platform-row-identity { grid-column: 1; grid-row: 1; }
  .client-row > .client-classification { grid-column: 1; grid-row: 2; justify-self: start; }
  .client-row > .client-next-appointment { grid-column: 1; grid-row: 3; }
  .client-row > .client-follow-up { grid-column: 1; grid-row: 4; justify-self: start; }
  .client-row > .row-open-icon { grid-column: 2; grid-row: 1 / span 4; align-self: center; }

  .client-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-form-grid > .span-2 { grid-column: 1 / -1; }
  .follow-up-composer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .platform-toolbar,
  .clients-toolbar { grid-template-columns: minmax(0, 1fr); }

  .platform-page-heading {
    align-items: start;
  }

  .platform-page-heading > button {
    min-width: 0;
    width: auto;
  }

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

  .platform-metric { min-height: var(--metric-card-min-height); }

  .client-form-grid { grid-template-columns: minmax(0, 1fr); }
  .client-form-grid > .span-2 { grid-column: 1; }

  .client-heading-actions {
    width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-related {
    width: 100%;
    padding-inline: 12px;
  }

  .appointment-detail-pane > .client-follow-up-panel { margin-inline: 12px; }

  .follow-up-composer { grid-template-columns: minmax(0, 1fr); }
  .follow-up-composer > :is(.span-2, .span-4) { grid-column: 1; }
  .follow-up-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 12px;
  }
  .follow-up-row > .platform-row-identity { grid-column: 1 / -1; }
  .follow-up-row > .platform-status { grid-column: 1; justify-self: start; }
  .follow-up-row-actions { grid-column: 2; }

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

  .appointment-form-actions > button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .platform-page-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-page-heading > button {
    width: 100%;
    max-width: none;
  }

  .client-heading-actions > button {
    min-width: 0;
    gap: 5px;
    padding-inline: 7px;
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .client-heading-actions > button .ui-icon {
    width: 16px;
    height: 16px;
  }

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

/* Responsive closure: preserve the approved desktop system while giving compact
   canvases their own readable, touch-safe compositions. */
.inventory-price-pair {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inventory-price-entry {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.inventory-price-entry > small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.inventory-price-entry > strong {
  color: #ffffff;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}

#order-entry-page #panel-checkout.is-document-locked {
  display: grid;
  gap: 16px;
}

#order-entry-page #panel-checkout.is-document-locked > .invoice-ready-section {
  order: 1;
  padding-top: 0;
  border-top: 0;
}

#order-entry-page #panel-checkout.is-document-locked > .checkout-workbench { order: 2; }

#order-entry-page .invoice-ready-stack {
  gap: 14px;
}

#order-entry-page .invoice-ready-stack > .actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  margin-top: 0;
}

#order-entry-page .invoice-ready-stack > .actions > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

/* Tablet calendar keeps the explicit Week / Day / Agenda choice. The selected
   view owns the canvas instead of squeezing a week grid beside an agenda. */
@media (min-width: 901px) and (max-width: 1120px) {
  .calendar-command-bar {
    grid-template-columns: auto minmax(330px, 1fr) minmax(210px, 240px) auto;
  }

  .calendar-view-switch {
    display: grid;
    min-width: 0;
  }

  .calendar-day-strip { display: none; }

  .calendar-layout.calendar-view-week > .calendar-week-panel,
  .calendar-layout.calendar-view-day > .calendar-week-panel { display: block; }

  .calendar-layout.calendar-view-week > .calendar-agenda-panel,
  .calendar-layout.calendar-view-day > .calendar-agenda-panel { display: none; }

  .calendar-layout.calendar-view-agenda > .calendar-agenda-panel { display: grid; }
}

@media (min-width: 621px) and (max-width: 900px) {
  .calendar-command-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .calendar-command-title { grid-column: 1; grid-row: 1; }

  .calendar-new-action {
    grid-column: 2;
    grid-row: 1;
  }

  .calendar-controls {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .calendar-view-switch {
    display: grid;
    width: min(100%, 360px);
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
  }

  .calendar-day-strip { display: none; }

  .calendar-layout.calendar-view-week > .calendar-week-panel,
  .calendar-layout.calendar-view-day > .calendar-week-panel { display: block; }

  .calendar-layout.calendar-view-week > .calendar-agenda-panel,
  .calendar-layout.calendar-view-day > .calendar-agenda-panel { display: none; }

  .calendar-layout.calendar-view-agenda > .calendar-agenda-panel { display: grid; }
}

@media (max-width: 620px) {
  .appointment-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .appointment-panel-heading > .platform-heading-copy { width: 100%; }

  .appointment-panel-heading h2 {
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  .appointment-heading-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .appointment-heading-actions > button {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .appointment-heading-actions > :last-child {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .inventory-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 8px 12px;
  }

  .inventory-row > .product-row-identity { grid-column: 1 / 3; grid-row: 1; }
  .inventory-row > .inventory-stock-values { grid-column: 1 / 3; grid-row: 2; }
  .inventory-row > .inventory-price-values { grid-column: 1 / 3; grid-row: 3; }
  .inventory-row > .platform-status { grid-column: 3; grid-row: 1; align-self: start; }
  .inventory-row > .row-open-icon { grid-column: 3; grid-row: 2 / 4; align-self: center; }

  .inventory-row > .inventory-price-values {
    display: grid;
    align-items: start;
    gap: 5px;
  }

  .inventory-price-pair {
    width: min(100%, 240px);
    gap: 16px;
  }

  .client-next-appointment {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
  }

  .platform-page button > .client-next-appointment {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .calendar-view-switch { display: none; }
  .calendar-day-strip { display: grid; }
  .calendar-layout > .calendar-week-panel { display: none; }
  .calendar-layout > .calendar-agenda-panel,
  .calendar-layout.calendar-agenda-hidden > .calendar-agenda-panel { display: grid; }

  #order-entry-page .invoice-ready-stack > .actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .calendar-day-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }

  .calendar-day-strip > button {
    min-height: 48px;
    grid-column: span 2;
  }

  .calendar-day-strip > button:nth-child(5) { grid-column: 2 / span 2; }
  .calendar-day-strip > button:nth-child(6) { grid-column: 4 / span 2; }
  .calendar-day-strip > button:nth-child(7) { grid-column: 6 / span 2; }

  .invoice-table {
    display: block;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    margin-inline: 12px;
    table-layout: auto;
  }

  .invoice-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .invoice-table tbody { display: grid; }

  .invoice-table tr {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(44px, 0.58fr) repeat(2, minmax(78px, 1fr));
    column-gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid #e1e3e6;
  }

  .invoice-table td {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 2px;
    padding: 4px 0;
    border-bottom: 0;
    font-size: 0.7rem;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
  }

  .invoice-table td::before {
    content: attr(data-label);
    color: #68696e;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .invoice-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-bottom: 1px solid #e1e3e6;
  }

  .invoice-table td:first-child::before { display: none; }
  .invoice-table td:nth-child(n + 2) { text-align: left; white-space: normal; }
  .invoice-table td:nth-child(4) { text-align: right; }
}

@media (max-width: 360px) {
  .appointment-heading-actions { grid-template-columns: minmax(0, 1fr); }
  .appointment-heading-actions > :last-child { grid-column: 1; }
  .client-heading-actions { grid-template-columns: minmax(0, 1fr); }
  .client-economics .platform-metric > span {
    padding-right: 16px;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* Figma release closure: keep the approved compact compositions readable at
   browser zoom and on narrow devices. These rules intentionally live last so
   later desktop refinements cannot override the responsive source of truth. */
.market-item { min-height: 44px; }

@media (max-width: 700px) {
  .shell-header {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    min-height: 60px;
  }

  .brand {
    width: 48px;
    justify-self: stretch;
    justify-content: flex-start;
    overflow: hidden;
    padding: 4px;
  }

  .brand picture,
  .brand img { width: 40px; min-width: 40px; height: 40px; }
  .brand img { object-fit: cover; object-position: left center; }

  .primary-nav {
    width: 100%;
    height: 60px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 5px;
  }

  .primary-nav a {
    min-width: 44px;
    min-height: 48px;
    padding-inline: 0;
  }

  .primary-nav .ui-icon { width: 20px; height: 20px; }

  .header-actions {
    width: 48px;
    min-height: 60px;
    gap: 0;
    padding-inline: 2px;
  }

  .avatar,
  .avatar-menu-trigger { width: 44px; min-width: 44px; min-height: 44px; }
  .avatar-image { width: 38px; height: 38px; }

  .global-search {
    --global-search-leading: 44px;
  }

  .global-search-results { right: 12px; }

  .platform-finance-metrics,
  .platform-metric-grid,
  .platform-metrics,
  .accounting-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-financial-metric,
  .platform-metric {
    min-width: 0;
  }

  .financial-metric-heading,
  .platform-financial-metric > :is(strong, span),
  .platform-metric > :is(strong, span) {
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .calendar-view-switch { display: none; }
  .calendar-agenda-row {
    min-height: 68px;
    grid-template-columns: 58px minmax(0, 1fr) minmax(86px, auto) 16px;
  }

  .calendar-agenda-row .platform-row-identity strong { -webkit-line-clamp: 2; }

  .calendar-agenda-footer {
    position: sticky;
    z-index: 3;
    bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) + 6px);
    background: #0d0d0f;
  }

  .calendar-controls {
    grid-template-columns: 44px max-content 44px;
  }

  .calendar-range-label {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 8px;
    margin-left: 0;
  }

  .calendar-day-strip { display: grid; }
  .calendar-layout > .calendar-week-panel,
  .calendar-layout.calendar-view-week > .calendar-week-panel,
  .calendar-layout.calendar-view-day > .calendar-week-panel { display: none; }
  .calendar-layout > .calendar-agenda-panel,
  .calendar-layout.calendar-view-week > .calendar-agenda-panel,
  .calendar-layout.calendar-view-day > .calendar-agenda-panel,
  .calendar-layout.calendar-view-agenda > .calendar-agenda-panel,
  .calendar-layout.calendar-agenda-hidden > .calendar-agenda-panel { display: grid; }

  .market-item {
    flex-basis: 280px;
    min-height: 44px;
  }

  .client-detail-pane > .platform-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .client-detail-pane > .platform-panel-heading > .platform-heading-copy,
  .client-heading-actions { width: 100%; }

  .client-heading-actions {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-heading-actions > button {
    width: 100%;
    min-width: 0;
    padding-inline: 7px;
    font-size: 0.72rem;
  }

  .appointment-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .appointment-panel-heading > .platform-heading-copy,
  .appointment-heading-actions { width: 100%; }

  .appointment-heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .appointment-heading-actions > button {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .appointment-heading-actions > :last-child {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .brand { justify-content: center; }
  .brand picture,
  .brand img { width: 40px; min-width: 40px; height: 40px; }

  .global-search { --global-search-leading: 38px; }

  .product-form-section-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .client-heading-actions {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .appointment-form-actions { grid-template-columns: minmax(0, 1fr); }

  .appointment-form-actions > button {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* Shared-shell visual hardening: one compact rhythm without changing routes or behavior. */
.workspace,
.platform-panel,
.quote-queue-shell,
.invoices-page-heading,
.client-follow-up-panel,
.settings-system-state {
  border-radius: var(--radius-card);
}

.platform-panel-heading > .platform-heading-copy {
  flex: 1 1 0;
}

.platform-page :is(.platform-title-copy, .platform-heading-copy, .platform-row-identity) :is(h1, h2, h3, p, strong, span, small) {
  overflow-wrap: anywhere;
}

.platform-page :is(.platform-title-copy, .platform-heading-copy) > p {
  max-width: 78ch;
}

.market-item:focus-visible,
body > footer button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 420px) {
  .shell-header {
    min-height: 102px;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-rows: 48px 54px;
  }

  .brand { grid-column: 1; grid-row: 1; }

  .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 54px;
    padding: 4px 6px;
  }

  .primary-nav a {
    min-width: 44px;
    min-height: 46px;
  }

  .header-actions {
    grid-column: 3;
    grid-row: 1;
    min-height: 48px;
  }

  .avatar,
  .avatar-menu-trigger {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .market-item {
    flex-basis: 268px;
    min-height: 44px;
    padding-block: 6px;
  }

  .global-search-results {
    max-height: min(360px, calc(100dvh - 230px));
  }

  .global-search-results-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .global-search-results-heading span { text-align: left; }

  .inventory-detail-pane > .platform-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .inventory-heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .inventory-heading-actions > button {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .product-detail-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .product-detail-hero > :is(img, .platform-image-placeholder) {
    width: 104px;
    height: 104px;
  }

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

  .review-queue-list .platform-row-identity strong,
  .inventory-row .product-row-identity strong,
  .client-row .platform-row-identity strong,
  .related-row .platform-row-identity strong {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .inventory-row .product-row-identity span,
  .inventory-row > .inventory-stock-values > small,
  .client-row .platform-row-identity span,
  .related-row .platform-row-identity span,
  .platform-row-identity span {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .client-next-appointment {
    width: 100%;
    min-width: 0;
  }

  .inventory-price-pair {
    width: 100%;
    max-width: 240px;
  }

  .inventory-price-entry > strong {
    max-width: 100%;
    font-size: 0.78rem;
  }

  .appointment-heading-actions > button {
    gap: 5px;
    padding-inline: 8px;
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  .global-search {
    --global-search-leading: 32px;
  }

  .global-search-results { right: 8px; }

  .accounting-cash-table tr {
    grid-template-columns: 64px minmax(72px, 1fr) minmax(92px, 1.2fr);
    gap: 4px 6px;
    padding-inline: 6px;
  }

  .accounting-table-amount {
    max-width: 100%;
    font-size: 0.8rem;
  }

  .accounting-table-amount.is-missing {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .inventory-row {
    grid-template-columns: 56px minmax(0, 1fr) 18px;
    grid-template-rows: auto auto auto auto;
    gap: 8px 10px;
  }

  .inventory-row > .product-row-identity { grid-column: 1 / 3; grid-row: 1; }
  .inventory-row > .platform-status { grid-column: 2; grid-row: 2; justify-self: start; }
  .inventory-row > .inventory-stock-values { grid-column: 2; grid-row: 3; }
  .inventory-row > .inventory-price-values { grid-column: 2; grid-row: 4; }
  .inventory-row > .row-open-icon { grid-column: 3; grid-row: 1 / span 4; }

  .inventory-price-pair {
    width: 100%;
    max-width: none;
    gap: 8px;
  }

  .inventory-price-entry > strong { font-size: 0.75rem; }

  .client-heading-actions { grid-template-columns: minmax(0, 1fr); }

  .product-detail-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Three-tier border hierarchy: dividers organize, frames contain, interaction
   states attract attention. Nested information should not look boxed twice. */
.shell-header,
.market-tray,
body > footer {
  border-color: var(--border-divider);
}

:is(
  .workspace,
  .platform-panel,
  .quote-queue-shell,
  .platform-form,
  .customer-record-summary,
  .customer-record-form,
  .section-block,
  .canvas,
  .catalog-pane,
  .cart-pane
) {
  border-color: var(--border-frame);
}

:is(
  .platform-panel-heading,
  .platform-list-columns,
  .platform-list-row,
  .queue-heading,
  .queue-toolbar,
  .queue-list-columns,
  .queue-card,
  .appointment-ledger-columns,
  .appointment-ledger-row,
  .calendar-agenda-row,
  .calendar-agenda-footer,
  .section-block + .section-block
) {
  border-color: var(--border-divider);
}

:is(
  .platform-financial-metric,
  .platform-metric,
  .invoice-queue-page .queue-metric,
  .record-summary-cell,
  .payment-facts > div,
  .facts > div
) {
  border-color: var(--border-divider);
}

@media (max-width: 620px) {
  #order-entry-page .customer-picker {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #order-entry-page .customer-picker > button {
    width: 100%;
    min-width: 0;
  }

  .platform-panel > .platform-panel,
  .workspace > .platform-panel {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (min-width: 821px) and (max-width: 1320px) {
  .primary-nav:has(> .global-search) { grid-template-columns: repeat(6, minmax(74px, 1fr)) minmax(148px, 1.35fr); }
  .primary-nav > .global-search { width: 100%; justify-self: stretch; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding-inline: 10px; }
  .primary-nav > .global-search input { width: 100%; opacity: 1; }
}

/* Final shell overrides are kept at the end so route-specific media rules cannot undo them. */
.primary-nav > .global-search:focus-within { box-shadow: none; }
.primary-nav > .global-search .ui-icon { width: var(--icon-action, 18px); height: var(--icon-action, 18px); }
.platform-financial-metric.is-interactive.is-active { box-shadow: none; border-color: var(--gold-bright); background: #191918; }
.account-menu { padding: 10px; }
.account-profile-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 11px; background: #151517; }
.account-profile-avatar { width: 42px; height: 42px; border: 1px solid var(--gold); border-radius: 50%; object-fit: cover; }
.account-profile-copy { display: grid; min-width: 0; gap: 2px; }
.account-profile-copy strong { color: #ffffff; font-size: 0.86rem; line-height: 1.2; }
.account-profile-copy span { color: var(--muted); font-size: 0.72rem; line-height: 1.25; }
.account-profile-copy small { color: #7f858f; font-size: 0.66rem; line-height: 1.2; overflow-wrap: anywhere; }
.account-menu-divider { height: 1px; margin: 2px 4px; background: var(--border-divider); }
.account-menu :is(a, button) { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 12px; }
.account-menu :is(a, button) .ui-icon { width: var(--icon-action, 18px); height: var(--icon-action, 18px); opacity: 0.9; }
.platform-field-label { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: #ffffff; }
.field-label-icon { width: var(--icon-meta, 16px); height: var(--icon-meta, 16px); opacity: 0.82; }
.platform-field-label-text { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .primary-nav .ui-icon { width: 18px; height: 18px; }
  .customer-picker button .action-icon,
  .product-entry-tools .action-icon { display: block; }
  .product-entry-tools button { gap: 5px; padding-inline: 6px; font-size: 0.7rem; }
  .account-profile-card { grid-template-columns: 38px minmax(0, 1fr); }
  .account-profile-avatar { width: 38px; height: 38px; }
}

/* Final responsive header contract: avoid clipped labels at 1280px and keep
   the tablet search icon from consuming a full navigation track. */
@media (min-width: 1181px) and (max-width: 1320px) {
  .shell-header:has(.primary-nav > .global-search) {
    grid-template-columns: minmax(154px, 1fr) minmax(0, 900px) minmax(154px, 1fr);
  }

  .primary-nav:has(> .global-search) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(148px, 1.25fr);
    width: min(900px, 100%);
  }

  .primary-nav > .global-search {
    width: 100%;
    justify-self: stretch;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 10px;
  }

  .primary-nav > .global-search input { width: 100%; opacity: 1; }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .primary-nav:has(> .global-search) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) 48px;
    width: 100%;
  }

  .primary-nav > .global-search {
    width: 48px;
    justify-self: end;
    grid-template-columns: 22px 0;
    justify-content: center;
    gap: 0;
    padding-inline: 12px;
  }

  .primary-nav > .global-search input { width: 0; opacity: 0; }

  .primary-nav > .global-search:focus-within {
    position: absolute;
    top: 6px;
    right: 6px;
    width: min(360px, calc(100% - 12px));
    grid-template-columns: 20px minmax(0, 1fr);
    justify-content: initial;
    gap: 8px;
    padding-inline: 12px;
    background: #0c0c0d;
  }

  .primary-nav > .global-search:focus-within input { width: 100%; opacity: 1; }
}

@media (min-width: 821px) and (max-width: 900px) {
  .primary-nav a {
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    font-size: 0.7rem;
    line-height: 1;
  }

  .primary-nav .ui-icon { width: 20px; height: 20px; }
}

/* Light mode keeps surfaces quiet and type legible without changing component structure. */
:root[data-theme="light"] .shell-header,
:root[data-theme="light"] .market-tray,
:root[data-theme="light"] body > footer { background: #ffffff; border-color: var(--border-divider); }

:root[data-theme="light"] .primary-nav a,
:root[data-theme="light"] .market-item,
:root[data-theme="light"] .notification-item,
:root[data-theme="light"] .notification-empty { color: var(--text); }

:root[data-theme="light"] .primary-nav a:hover,
:root[data-theme="light"] .account-menu :is(a, button):hover,
:root[data-theme="light"] .notification-item:hover,
:root[data-theme="light"] body > footer button:not(:disabled):not([aria-current="page"]):hover { background: var(--surface-hover); }

:root[data-theme="light"] .primary-nav a[aria-current="page"],
:root[data-theme="light"] .workflow-tab[aria-selected="true"],
:root[data-theme="light"] .queue-metric[aria-pressed="true"],
:root[data-theme="light"] .primary-action { color: #1d1d1f; background: var(--gold-action); border-color: var(--gold); }

:root[data-theme="light"] :is(
  .account-menu,
  .notification-drawer,
  .quote-queue-shell,
  .invoices-page-heading,
  .queue-metric,
  .queue-toolbar,
  .platform-page,
  .platform-financial-metric,
  .platform-panel,
  .platform-card,
  .calendar-shell,
  .calendar-page,
  .spot-card,
  .spot-chart-shell,
  .spot-reference-card
) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

:root[data-theme="light"] .account-menu { box-shadow: var(--shadow); }
:root[data-theme="light"] .account-profile-card { background: var(--surface-raised); border-color: var(--border); }
:root[data-theme="light"] .account-profile-copy strong,
:root[data-theme="light"] .platform-field-label { color: var(--text); }
:root[data-theme="light"] .account-profile-copy span { color: var(--muted); }
:root[data-theme="light"] .account-profile-copy small { color: #68645d; }
:root[data-theme="light"] .account-menu :is(a, button) { background: var(--surface-control); color: var(--text); border-color: var(--border); }
:root[data-theme="light"] .notification-copy strong,
:root[data-theme="light"] .notification-action,
:root[data-theme="light"] .drawer-heading h2 { color: var(--text); }

:root[data-theme="light"] .global-search,
:root[data-theme="light"] .global-search-results { background: var(--surface-control); color: var(--text); }
:root[data-theme="light"] .global-search input { background: transparent; color: var(--text); }
:root[data-theme="light"] .global-search-results-heading strong,
:root[data-theme="light"] .global-search-result-copy strong { color: var(--text); }
:root[data-theme="light"] .global-search-result:hover,
:root[data-theme="light"] .global-search-result:focus-visible { background: var(--surface-hover); }

:root[data-theme="light"] #work-page :is(h1, h2, h3, .financial-metric-heading, .platform-financial-metric > strong, .appointment-ledger-time strong, .appointment-ledger-identity strong, .appointment-ledger-amount strong, .appointment-ledger-row) { color: var(--text); }
:root[data-theme="light"] #work-page :is(.platform-page-heading p, .platform-financial-metric > small, .appointment-ledger-time small, .appointment-ledger-identity small, .appointment-ledger-amount small, .platform-panel-heading p) { color: var(--muted); }
:root[data-theme="light"] #work-page .platform-financial-metric,
:root[data-theme="light"] #work-page .appointment-ledger-row,
:root[data-theme="light"] #work-page .appointment-ledger-columns { background: var(--surface-raised); border-color: var(--border-divider); }
:root[data-theme="light"] #work-page .platform-financial-metric.is-interactive:hover,
:root[data-theme="light"] #work-page .appointment-ledger-row:hover { background: var(--surface-hover); }
:root[data-theme="light"] #work-page .platform-page-actions button:not(.primary-action),
:root[data-theme="light"] #work-page .work-agenda-actions button:not(.primary-action) { color: var(--text); background: var(--surface-control); border-color: var(--border); }
:root[data-theme="light"] #work-page .appointment-flow { color: #ffffff; }
:root[data-theme="light"] #work-page .work-decisions-panel .platform-list-row,
:root[data-theme="light"] #work-page .work-decisions-panel .platform-list-row strong,
:root[data-theme="light"] #work-page .work-decisions-panel .platform-row-identity { color: var(--text); }
:root[data-theme="light"] #work-page .work-decisions-panel .platform-list-row { background: var(--surface-raised); border-color: var(--border-divider); }
:root[data-theme="light"] #work-page .work-decisions-panel .platform-list-row:hover { background: var(--surface-hover); }
:root[data-theme="light"] #work-page .work-item-open-action,
:root[data-theme="light"] #work-page .work-item-open-action > span { color: var(--text); background: var(--surface-control); border-color: var(--border); }

/* Light-theme route contract: route-specific dark literals must resolve to the
   shared light tokens while semantic status colors stay intentionally vivid. */
:root[data-theme="light"] body > footer button { color: var(--text); }
:root[data-theme="light"] body > footer button .ui-icon { filter: brightness(0) saturate(100%); }
:root[data-theme="light"] .compact-action,
:root[data-theme="light"] .compact-action > span { color: var(--text); }

/* Light-theme contrast corrections for shared shell and semantic controls. */
:root[data-theme="light"] :is(.skip-link, .spot-skip-link) { color: #1d1d1f; }
:root[data-theme="light"] .market-item strong { color: var(--text); }
:root[data-theme="light"] .market-item small { color: var(--green); }
:root[data-theme="light"] .eyebrow { color: #765b14 !important; }
:root[data-theme="light"] #work-page .appointment-ledger-columns { color: var(--text); }
:root[data-theme="light"] .platform-status.status-warning,
:root[data-theme="light"] .queue-status.phase-settlement,
:root[data-theme="light"] .queue-filters button[aria-pressed="true"] { color: #1d1d1f; }

:root[data-theme="light"] #invoices-page :is(h1, h2, .queue-metric-heading, .queue-metric-heading > span, .queue-card-identity strong, .queue-card-client strong, .queue-card-total strong, .queue-list-columns, .queue-list-columns > span) { color: var(--text); }
:root[data-theme="light"] #invoices-page .queue-metric > strong { color: var(--text); }
:root[data-theme="light"] #invoices-page .invoices-heading-actions > button:not(.primary-action),
:root[data-theme="light"] #invoices-page .invoices-heading-actions > button:not(.primary-action) > span { color: var(--text); background: var(--surface-control); border-color: var(--border); }
:root[data-theme="light"] #invoices-page :is(.invoices-page-heading, .queue-metric, .quote-queue-shell, .queue-toolbar, .queue-list-columns, .queue-card) { border-color: var(--border); }
:root[data-theme="light"] #invoices-page .queue-metric,
:root[data-theme="light"] #invoices-page .queue-toolbar,
:root[data-theme="light"] #invoices-page .queue-list-columns,
:root[data-theme="light"] #invoices-page .queue-card { background: var(--surface-raised); }
:root[data-theme="light"] #invoices-page .queue-heading > .queue-summary { background: var(--surface-control); border-color: var(--border); color: var(--text); }
:root[data-theme="light"] #invoices-page .queue-search > div,
:root[data-theme="light"] #invoices-page .queue-filter-select select { background: var(--surface-control); border-color: var(--border-strong); color: var(--text); }
:root[data-theme="light"] #invoices-page .queue-search,
:root[data-theme="light"] #invoices-page .queue-filter-select,
:root[data-theme="light"] #invoices-page .queue-list-columns { color: var(--text); }
:root[data-theme="light"] #invoices-page .queue-card-identity span { color: var(--text-muted); }
:root[data-theme="light"] #invoices-page .queue-card-actions > button:not(.primary-action) { color: var(--text); background: var(--surface-control); border-color: var(--border); }
:root[data-theme="light"] #invoices-page .queue-status,
:root[data-theme="light"] #invoices-page .queue-delivery { color: #ffffff; }

:root[data-theme="light"] .platform-page :is(.platform-page-heading h1, .platform-panel-heading h2, .platform-metric > span, .platform-metric > strong, .platform-list-columns, .platform-list-columns > span, .platform-row-identity strong, .inventory-stock-values > strong, .inventory-price-entry strong, .client-next-appointment) { color: var(--text); }
:root[data-theme="light"] .platform-page :is(.platform-toolbar, .platform-panel, .platform-metric, .platform-list-row, .platform-list-columns) { border-color: var(--border); }
:root[data-theme="light"] .platform-page :is(.platform-toolbar, .platform-panel, .platform-metric, .platform-list-row, .platform-list-columns) { background: var(--surface-raised); }
:root[data-theme="light"] .platform-page .platform-list-row:hover { background: var(--surface-hover); }
:root[data-theme="light"] .platform-page .platform-field :is(input, select),
:root[data-theme="light"] .platform-page .platform-field input,
:root[data-theme="light"] .platform-page .platform-field select { background: var(--surface-control); border-color: var(--border-strong); color: var(--text); }
:root[data-theme="light"] .platform-page .platform-list-columns { background: var(--surface-control); }
:root[data-theme="light"] .platform-page .platform-metric > small,
:root[data-theme="light"] .platform-page .platform-panel-heading > p,
:root[data-theme="light"] .platform-page .platform-heading-copy > p,
:root[data-theme="light"] .platform-page .inventory-stock-values > small,
:root[data-theme="light"] .platform-page .inventory-price-values > span,
:root[data-theme="light"] .platform-page .inventory-price-entry small,
:root[data-theme="light"] .platform-page .platform-row-identity > div > span { color: var(--muted); }
:root[data-theme="light"] .platform-page .platform-status { color: #ffffff; }
:root[data-theme="light"] .platform-page .platform-status.status-neutral {
  border-color: var(--border-strong);
  background: var(--surface-control);
  color: var(--text);
}

:root[data-theme="light"] #calendar-page :is(.calendar-command-title h1, .calendar-range-label, .calendar-day-heading > strong, .calendar-day-strip > strong, .calendar-agenda-time strong, .calendar-agenda-row .platform-row-identity strong) { color: var(--text); }
:root[data-theme="light"] #calendar-page :is(.calendar-command-bar, .calendar-view-switch, .calendar-range-label, .calendar-day-strip, .calendar-time-header, .calendar-time-body, .calendar-time-day, .calendar-legend, .calendar-agenda-panel) { background: var(--surface-raised); border-color: var(--border); }
:root[data-theme="light"] #calendar-page .calendar-time-day { background: var(--surface); }
:root[data-theme="light"] #calendar-page .calendar-time-day.is-selected { background: #fff9e5; }
:root[data-theme="light"] #calendar-page .calendar-hour-line { border-color: var(--border-divider); }
:root[data-theme="light"] #calendar-page .calendar-view-switch > button:not(.is-selected),
:root[data-theme="light"] #calendar-page .calendar-controls > button:not(.primary-action),
:root[data-theme="light"] #calendar-page .calendar-day-heading { color: var(--text); background: transparent; }
:root[data-theme="light"] #calendar-page .calendar-view-switch > button.is-selected,
:root[data-theme="light"] #calendar-page .calendar-day-heading.is-selected,
:root[data-theme="light"] #calendar-page .calendar-day-strip > button.is-selected { color: #1d1d1f; background: var(--gold-action); }
:root[data-theme="light"] #calendar-page .calendar-day-strip > button > strong { color: var(--text); }
:root[data-theme="light"] #calendar-page .calendar-day-heading.is-selected :is(span, strong),
:root[data-theme="light"] #calendar-page .calendar-day-strip > button.is-selected :is(span, strong) { color: #1d1d1f; }
:root[data-theme="light"] #calendar-page .calendar-appointment-time,
:root[data-theme="light"] #calendar-page .calendar-appointment-title { color: #ffffff; }
:root[data-theme="light"] #calendar-page .calendar-agenda-row { background: transparent; border-color: var(--border-divider); }
:root[data-theme="light"] #calendar-page .calendar-agenda-row:hover { background: var(--surface-hover); }
:root[data-theme="light"] #calendar-page .calendar-legend-item { color: var(--muted); }
:root[data-theme="light"] #calendar-page .calendar-agenda-footer > button { color: var(--text); background: var(--surface-control); border-color: var(--border); }

/* Keep the order-entry canvas readable in both the details and item stages. */
:root[data-theme="light"] #order-entry-page .canvas,
:root[data-theme="light"] #order-entry-page .details-canvas,
:root[data-theme="light"] #order-entry-page .order-entry-toolbar,
:root[data-theme="light"] #order-entry-page .document-field,
:root[data-theme="light"] #order-entry-page .transaction-field,
:root[data-theme="light"] #order-entry-page .details-action-footer,
:root[data-theme="light"] #order-entry-page .customer-record-summary,
:root[data-theme="light"] #order-entry-page .customer-record-form,
:root[data-theme="light"] #order-entry-page .product-panel,
:root[data-theme="light"] #order-entry-page .cart-pane,
:root[data-theme="light"] #order-entry-page .checkout-pane { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
:root[data-theme="light"] #order-entry-page :is(.details-section-title h3, .document-field h5, .transaction-field h5, .customer-record-summary h4, .details-action-copy strong, .order-context-label, .customer-search-field, .catalog-search-field, .field-label-text, .product-price, .product-row strong, .cart-pane h3, .checkout-pane h3, .checkout-pane h4) { color: var(--text); }
:root[data-theme="light"] #order-entry-page :is(.customer-record-summary, .customer-record-form, .record-summary-cell, .order-customer-summary, .product-row, .line-row, .checkout-ledger, .checkout-summary, .payment-method) { background: var(--surface-control); border-color: var(--border); }
:root[data-theme="light"] #order-entry-page .customer-empty-state { background: var(--surface-control); border-color: var(--border); color: var(--text); }
:root[data-theme="light"] #order-entry-page .customer-empty-state strong { color: var(--text); }
:root[data-theme="light"] #order-entry-page .customer-picker > button:not(.primary-action),
:root[data-theme="light"] #order-entry-page .customer-picker > button:not(.primary-action) > span,
:root[data-theme="light"] #order-entry-page .details-section-heading > button:not(.primary-action),
:root[data-theme="light"] #order-entry-page .details-section-heading > button:not(.primary-action) > span { color: var(--text); background: var(--surface-control); border-color: var(--border); }
:root[data-theme="light"] #order-entry-page :is(input, select, textarea) { background: var(--surface-control); border-color: var(--border-strong); color: var(--text); }
:root[data-theme="light"] #order-entry-page .workflow-tab[aria-selected="false"] { color: var(--text); }
:root[data-theme="light"] #order-entry-page .workflow-tab-index { color: var(--text); border-color: var(--border-strong); background: var(--surface-control); }
:root[data-theme="light"] #order-entry-page .workflow-tab[aria-selected="true"] .workflow-tab-index { color: #1d1d1f; border-color: var(--gold); background: var(--gold-soft); }
:root[data-theme="light"] #order-entry-page .customer-record-summary strong,
:root[data-theme="light"] #order-entry-page .order-customer-summary strong,
:root[data-theme="light"] #order-entry-page .cart-pane .line-price > span,
:root[data-theme="light"] #order-entry-page .checkout-ledger th { color: var(--text); }
:root[data-theme="light"] #order-entry-page .checkout-ledger th { background: var(--surface-control); border-color: var(--border); }
:root[data-theme="light"] #order-entry-page .details-completion-actions button:disabled { color: var(--muted); background: var(--surface-control); border-color: var(--border); }
:root[data-theme="light"] body > footer button[aria-current="page"] { color: #1d1d1f; background: var(--gold-action); border-color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
:root[data-theme="light"] body > footer button[aria-current="page"] .ui-icon { filter: brightness(0) saturate(100%); }

/* The menu checkbox exposes the active appearance without relying on color alone. */
.account-menu [data-theme-toggle][aria-checked="true"] { border-color: var(--gold); background: var(--gold-action); color: #ffffff; }
:root[data-theme="light"] .account-menu [data-theme-toggle][aria-checked="true"] { color: #1d1d1f; }
.account-menu [data-theme-toggle] .account-menu-state { margin-left: auto; color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.account-menu [data-theme-toggle][aria-checked="true"] .account-menu-state { color: inherit; }

@media (min-width: 901px) and (max-width: 1100px) {
  .client-row .platform-row-identity > div > span,
  .client-row .client-next-appointment {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.3;
  }
}

.platform-index-layout :is(.inventory-row, .client-row) > .row-open-icon { justify-self: end; }

/* Global shell geometry: align search with the Pricing edge and account
   actions while allowing the center track to breathe at every desktop width. */
@media (min-width: 1181px) {
  .shell-header:has(.primary-nav > .global-search) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .primary-nav:has(> .global-search) {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(clamp(188px, 15vw, 220px), 0.9fr);
  }

  .primary-nav > .global-search {
    width: 100%;
    justify-self: stretch;
  }
}

@media (min-width: 1181px) and (max-width: 1240px) {
  .primary-nav a { gap: 4px; padding-inline: 4px; }
}

/* Global control contract: flat surfaces, predictable states, and a shared
   focus treatment. Elevation belongs to panels, never to interactive controls. */
:where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
  box-shadow: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    transform 150ms cubic-bezier(0.25, 1, 0.5, 1), opacity 150ms ease;
}

:where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(0.98);
  opacity: 0.9;
}

:where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none !important;
}

:where(button:disabled, [role="button"][aria-disabled="true"], input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled) {
  cursor: not-allowed;
  opacity: 0.48 !important;
  box-shadow: none !important;
}

:where(.primary-nav a[aria-current="page"], body > footer button[aria-current="page"]) {
  box-shadow: none !important;
}

@media (min-width: 821px) and (max-width: 1180px) {
  .shell-header:has(.primary-nav > .global-search) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .primary-nav:has(> .global-search) {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr)) 48px;
  }
}

/* Shared action contract: page-level controls use one readable geometry and
   semantic variant. Contextual controls (segments, rows, steppers, and the
   compact footer) keep their own density through higher-specificity rules. */
:is(.primary-action, .secondary-action, .destructive-action) {
  display: inline-flex;
  min-width: 0;
  min-height: var(--control-standard);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  border-radius: var(--radius-control);
  line-height: 1.2;
  white-space: nowrap;
}

:is(.primary-action, .destructive-action) {
  min-height: var(--control-primary);
  font-weight: 600;
}

:is(.primary-action, .secondary-action, .destructive-action) > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep the primary action footprint consistent across route headers while
   leaving compact list and calendar navigation controls untouched. */
.platform-page-heading > .primary-action,
.platform-page-actions > .primary-action,
.invoices-heading-actions > .primary-action,
.inventory-heading-actions > .primary-action,
.client-heading-actions > .primary-action,
.appointment-heading-actions > .primary-action,
.calendar-command-bar > .primary-action {
  min-height: var(--control-primary);
}

/* Explicitly scoped neutral actions share the same standard hit target. */
.platform-page-actions > .secondary-action,
.invoices-heading-actions > .secondary-action,
.inventory-heading-actions > .secondary-action,
.client-heading-actions > .secondary-action,
.appointment-heading-actions > .secondary-action,
.work-agenda-actions > .secondary-action {
    min-height: var(--control-standard);
}

/* Heading-level neutral actions use the standard control height. Primary
   actions remain intentionally more prominent at --control-primary while
   contextual row, segment, and footer controls keep their compact density. */
.platform-page-heading > :is(.secondary-action, .destructive-action) {
    min-height: var(--control-standard);
}

/* Unified form contract: field controls use the standard 48px geometry,
   numeric values align as a readable ledger, and required fields expose a
   non-color indicator. Higher-specificity workflow rules may intentionally
   promote a control to 52px; compact row, segment, and footer controls stay
   at 44px. */
:is(.platform-form, .quick-client-form, .override-form, .tax-form) {
    min-width: 0;
}

:is(.platform-form, .quick-client-form, .override-form, .tax-form)
  :is(.field-stack, .platform-field) {
    min-width: 0;
    gap: var(--space-2);
}

:is(.platform-form, .quick-client-form, .override-form, .tax-form)
  :is(.field-stack, .platform-field) > :is(input, select, textarea) {
    min-width: 0;
    min-height: var(--control-standard);
}

:is(.platform-form, .quick-client-form, .override-form, .tax-form)
  :is(input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"]) {
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

:is(.platform-form, .quick-client-form, .override-form, .tax-form)
  input[type="tel"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

:is(.platform-form, .quick-client-form, .override-form, .tax-form)
  :is(.platform-field, .field-stack):has(> :required) :is(.platform-field-label-text, .field-label-text)::after {
    content: " *";
    color: var(--gold-bright);
    font-weight: 600;
}

/* Primary form actions must retain their promoted height even inside the
   older order-entry customer-form selector. */
#order-entry-page .customer-form-actions > .primary-action {
    min-height: var(--control-primary);
}

#order-entry-page .details-completion-actions > .secondary-action {
    min-height: var(--control-standard);
}

#order-entry-page .details-completion-actions > .primary-action {
    min-height: var(--control-primary);
}

/* Light theme parity for the checkout's split review/payment surfaces. The
   checkout uses these pane names instead of the older generic checkout-pane
   hook, so keep the same semantic surfaces and readable field contrast when
   users switch themes from the avatar menu. */
:root[data-theme="light"] #order-entry-page :is(.checkout-review-pane, .checkout-payment-pane) {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text);
}

:root[data-theme="light"] #order-entry-page :is(
  .details-section-title h3,
  .document-field h5,
  .transaction-field h5,
  .customer-record-summary h4,
  .details-action-copy strong,
  .order-context-label,
  .customer-search-field,
  .catalog-search-field,
  .field-label-text,
  .product-price,
  .product-row strong,
  .cart-pane h3,
  .checkout-review-pane h3,
  .checkout-review-pane h4,
  .checkout-payment-pane h3,
  .checkout-payment-pane h4
) {
    color: var(--text);
}

:root[data-theme="light"] :is(
  #order-entry-page .platform-field :is(input, select, textarea),
  .platform-page .platform-field :is(input, select, textarea),
  .quick-client-form :is(input, select, textarea),
  .override-form :is(input, select, textarea),
  .tax-form :is(input, select, textarea)
) {
    background: var(--surface-control);
    border-color: var(--border-strong);
    color: var(--text);
}

/* Search results are a contained command surface: they may scroll vertically
   when the result set is large, but can never widen the page or push the shell
   off-canvas. Text owns the flexible column and truncates only after exposing
   its full value through the title/accessible name. */
.global-search-results {
    box-sizing: border-box;
    right: 0;
    left: auto;
    width: min(420px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(440px, 68dvh);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.global-search-results-heading,
.global-search-results-group,
.global-search-result,
.global-search-result-copy {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.global-search-results-heading strong,
.global-search-results-heading span,
.global-search-results-group h2,
.global-search-result-copy > :is(strong, small) {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
}

.global-search-result-copy { overflow: hidden; }

@media (max-width: 700px) {
    .global-search-results {
        width: min(380px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: min(360px, 64dvh);
    }
}

.accounting-cash-table tbody tr.needs-attention {
    box-shadow: inset 3px 0 0 var(--gold);
}

/* Final light-theme text pass: these selectors intentionally come after the
   route-specific defaults so dark-theme literals cannot win the cascade. */
:root[data-theme="light"] :is(.market-price, .market-item strong) { color: var(--text); }
:root[data-theme="light"] .market-item small { color: var(--green); }
:root[data-theme="light"] :is(.market-item.metal-gold .market-label, .eyebrow, .spot-eyebrow, .spot-kicker) { color: #765b14 !important; }
:root[data-theme="light"] :is(.platform-page .platform-status.status-warning, .platform-status.status-warning, .queue-status.phase-settlement, .queue-filters button[aria-pressed="true"]) { color: #1d1d1f; }
:root[data-theme="light"] .platform-page .platform-field { color: var(--text); }
:root[data-theme="light"] .settings-system-state { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
:root[data-theme="light"] .settings-system-state > strong { color: var(--text); }
:root[data-theme="light"] .settings-system-state > p { color: var(--muted); }
:root[data-theme="light"] #order-entry-page .section-index,
:root[data-theme="light"] #order-entry-page .segmented-control button[aria-pressed="true"],
:root[data-theme="light"] #order-entry-page .taxonomy button[aria-pressed="true"],
:root[data-theme="light"] #order-entry-page .product-card > button { color: #1d1d1f; }
:root[data-theme="light"] #invoices-page .queue-empty,
:root[data-theme="light"] #invoices-page .queue-empty > strong { color: var(--text); }
:root[data-theme="light"] #calendar-page .calendar-appointment-meta { color: #ffffff; }
:root[data-theme="light"] #calendar-page .calendar-agenda-finance strong { color: var(--text); }
:root[data-theme="light"] #calendar-page .calendar-agenda-finance-inflow small { color: var(--green); }
:root[data-theme="light"] #calendar-page .calendar-agenda-finance-outflow small { color: #8a3f21; }
:root[data-theme="light"] #calendar-page .calendar-agenda-finance-unknown small { color: #765b14; }

/* P2 customer tools: generous, senior-readable cards with one result rail. */
.utility-market-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-raised);
}
.utility-market-label,
.utility-result-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.utility-market-context strong { font-size: 1rem; }
.utility-market-context small { color: var(--muted); text-align: right; }
.utility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.utility-card {
  min-width: 0;
  padding: 1rem;
  overflow: hidden;
}
.utility-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.utility-card-icon { flex: 0 0 auto; color: var(--gold); margin-top: 0.1rem; }
.utility-card-heading h2 { margin: 0; font-size: 1.15rem; }
.utility-card-heading p { margin: 0.35rem 0 0; color: var(--muted); line-height: 1.45; }
.utility-form { display: grid; gap: 0.85rem; padding-top: 1rem; }
.utility-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.utility-form-grid .platform-field:first-child:last-child { grid-column: 1 / -1; }
.utility-form .platform-field { min-width: 0; }
.utility-form input[type="number"],
.utility-form select,
.utility-form input[type="range"] { min-height: 2.9rem; }
.utility-form input[readonly] {
  border-style: dashed;
  background: var(--surface-control);
  color: var(--muted);
  cursor: not-allowed;
}
.utility-form input[type="range"] { accent-color: var(--gold-solid); padding: 0; }
.utility-range-output { display: inline-block; margin-left: 0.5rem; color: var(--gold); font-weight: 600; }
.utility-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface-control);
  color: var(--text);
}
.utility-result-label { grid-column: 1 / -1; }
.utility-result-value { min-width: 0; display: grid; gap: 0.2rem; }
.utility-result-value small { color: var(--muted); }
.utility-result-value strong { color: var(--text); font-size: 1.15rem; overflow-wrap: anywhere; }
.utility-result-value span { color: var(--muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.utility-result-note { grid-column: 1 / -1; color: var(--muted); line-height: 1.4; }
.utility-result-error { grid-column: 1 / -1; color: var(--muted); }
.utility-invoice-action {
  width: 100%;
  margin-top: 0.85rem;
  justify-content: center;
}
.utility-disclosure { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

/* Product media transparency contract — catalog assets carry their own alpha
   channel. Never paint a theme-specific rectangle behind a valid product image;
   the surrounding card supplies the surface in light and dark modes. Missing
   media placeholders intentionally retain their own visual treatment. */
:is(
  img.product-image,
  img.line-image,
  img.checkout-item-image,
  .product-row-identity > img,
  .product-detail-hero > img
) {
  background: transparent !important;
  background-color: transparent !important;
}

@media screen and (max-width: 760px) {
  .utility-market-context { grid-template-columns: 1fr; }
  .utility-market-context small { text-align: left; }
  .utility-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 520px) {
  .utility-form-grid, .utility-result { grid-template-columns: 1fr; }
  .utility-result-label, .utility-result-note, .utility-result-error { grid-column: 1; }
}


/* Evidence-backed responsive audit fixes — 2026-08-28. */
/* Keep narrow footers icon-led so an active action never clips its label. */
@media (max-width: 620px) {
  body > footer button span { display: none; }
}

/* Give product facts enough inline room for semantic labels (AVAILABLE,
   RESERVED, ON HAND) while preserving the single-column fallback below 380px. */
@media (min-width: 380px) and (max-width: 620px) {
  .product-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-facts .platform-metric > span {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* Compact calendar cards retain the complete time range without visual
   ellipsis; the button's aria-label and title still expose the full range. */
.calendar-appointment-time {
  letter-spacing: -0.018em;
  font-size: 0.55rem;
}


/* Mobile action overflow follow-up — keep the active footer icon-led rule authoritative. */
@media (max-width: 620px) {
  body > footer button[aria-current="page"] span { display: none; }
  .queue-empty-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .queue-empty-actions > button {
    min-width: 0;
    padding-inline: 8px;
  }
  .queue-empty-actions > button > span {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
  }
}


/* Tablet/mobile action labels — preserve readable wrapping within icon + text controls. */
@media (max-width: 1080px) {
  .queue-empty-actions > button {
    min-width: 0;
    padding-inline: 10px;
  }
  .queue-empty-actions > button > span {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
  }
}



/* Inventory metadata remains fully readable on narrow cards; keep the
   complete SKU/category visible instead of hiding it behind ellipsis. */
@media (max-width: 620px) {
  .inventory-row .product-row-identity > div > span {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.25;
  }
}


/* Customer tools visual audit — 2026-08-28.
   Keep senior-readable hierarchy while reducing the vertical void created by
   uneven utility cards. Numeric outputs use stable tabular alignment. */
.utility-grid {
  gap: 1rem;
}
.utility-card-heading {
  gap: 0.7rem;
  padding-bottom: 0.75rem;
}
.utility-card-heading p {
  max-width: 42ch;
  margin-top: 0.25rem;
  line-height: 1.38;
}
.utility-form {
  gap: 0.7rem;
  padding-top: 0.85rem;
}
.utility-form-grid {
  gap: 0.7rem;
}
.utility-product-picker {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: end;
  gap: 0.7rem;
  min-width: 0;
}
.utility-product-picker .platform-field { min-width: 0; }
.utility-product-image {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--surface-control);
  object-fit: contain;
  padding: 0.2rem;
}
.utility-product-image.is-placeholder { padding: 0.9rem; opacity: 0.72; }
.utility-result {
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding: 0.8rem;
}
.utility-result-value strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.utility-result-value span {
  line-height: 1.35;
}
.utility-result-note,
.utility-result-error {
  font-size: 0.9rem;
  line-height: 1.4;
}
@media screen and (max-width: 760px) {
  .utility-grid {
    gap: 1rem;
  }
}
@media screen and (max-width: 520px) {
  .utility-form-grid,
  .utility-result {
    gap: 0.7rem;
  }
}


/* Customer tools card rhythm — every tool owns its natural height.  Stretching
   short calculators to the height of a larger neighbour created blank panels
   that hid results and made the page appear unfinished. */
.utility-grid {
  align-items: start;
}
.utility-grid > .utility-card {
  display: flex;
  min-height: 0;
  align-self: start;
  flex-direction: column;
}
.utility-grid > .utility-card > .utility-result {
  margin-top: 0.85rem;
}
@media screen and (min-width: 901px) {
  .utility-grid {
    display: block;
    column-count: 2;
    column-gap: 1rem;
    column-fill: balance;
  }
  .utility-grid > .utility-card {
    display: flex;
    width: 100%;
    margin: 0 0 1.25rem;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
@media screen and (min-width: 1700px) {
  .utility-grid {
    column-count: 3;
    column-gap: 1.25rem;
  }
}
@media screen and (max-width: 900px) {
  .utility-grid {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 520px) {
  .utility-card {
    padding: 0.85rem;
  }
}

/* Tablet finance card readability — keep labels and values readable when
   the viewport cannot support four full-width metric cards. */
@media (min-width: 621px) and (max-width: 900px) {
  .platform-finance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Finance card line-box contract — never clip labels, values, or subtitles. */
.platform-finance-metrics {
  grid-auto-rows: minmax(var(--metric-card-min-height), auto);
}

.platform-financial-metric {
  height: auto;
  min-height: var(--metric-card-min-height);
}

.platform-financial-metric > strong {
  min-height: 33px;
  overflow: visible;
}

.platform-financial-metric > small {
  min-height: 16px;
  max-height: none;
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}


/* Accounting Center owner control tower — 2026-08-28.
   The Work route stays a daily command surface; Accounting owns the deeper
   owner metrics, charts, connections, and cash commitments. */
.work-daily-pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}
.work-pulse-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 82px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
}
.work-pulse-card > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.work-pulse-card span {
  color: var(--muted);
  font-size: 0.73rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.work-pulse-card strong {
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1.15;
}
.work-pulse-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-header-actions {
  align-items: end;
  flex-wrap: wrap;
}
.accounting-header-actions .platform-field {
  width: 150px;
  margin: 0;
}
.accounting-header-actions .platform-field label {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.7rem;
}
.accounting-header-actions > button {
  min-height: 44px;
}

.accounting-context-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-raised);
}
.accounting-context-copy,
.accounting-context-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.accounting-context-copy {
  flex-wrap: wrap;
}
.accounting-context-copy strong {
  color: #ffffff;
  font-size: 0.88rem;
}
.accounting-context-copy span,
.accounting-context-actions > span {
  color: var(--muted);
  font-size: 0.75rem;
}
.accounting-context-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.accounting-context-actions .platform-status {
  flex: 0 0 auto;
}

.accounting-owner-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}
.accounting-owner-metric {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 136px;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  text-align: left;
}
.accounting-owner-metric.is-interactive {
  width: 100%;
  cursor: pointer;
  font: inherit;
}
.accounting-owner-metric.is-interactive:hover,
.accounting-owner-metric.is-interactive:focus-visible {
  border-color: var(--gold);
  background: #191918;
}
.accounting-owner-metric.positive { border-color: #2b5b39; }
.accounting-owner-metric.attention { border-color: #8d742c; }
.accounting-owner-metric-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.accounting-owner-metric-heading span {
  overflow: hidden;
  font-size: 0.72rem;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.accounting-owner-metric-heading .ui-icon:last-child {
  width: 14px;
  height: 14px;
  margin-left: auto;
}
.accounting-owner-metric > strong {
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: clamp(1.2rem, 1.7vw, 1.68rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.accounting-owner-metric > small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.accounting-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}
.accounting-chart-panel {
  min-width: 0;
}
.accounting-bars {
  display: grid;
  height: 220px;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  align-items: end;
  gap: 10px;
  padding: 22px 16px 16px;
  background: var(--surface);
}
.accounting-bar-column {
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 4px 2px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.accounting-bar-column:hover { background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
.accounting-bar-column:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.accounting-bar-track {
  display: flex;
  height: 100%;
  min-height: 0;
  align-items: end;
  justify-content: center;
}
.accounting-bar {
  position: relative;
  width: min(36px, 80%);
  min-height: 4px;
  border-radius: 7px 7px 3px 3px;
  background: var(--gold);
  box-shadow: 0 6px 16px rgba(210, 165, 50, 0.18);
}
.accounting-bar.is-inflow { background: #6fcf88; box-shadow: 0 6px 16px rgba(111, 207, 136, 0.18); }
.accounting-bar.is-outflow { background: #b36f43; box-shadow: 0 6px 16px rgba(179, 111, 67, 0.18); }
.accounting-bar span {
  position: absolute;
  right: 50%;
  bottom: calc(100% + 5px);
  color: #ffffff;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  transform: translateX(50%);
  white-space: nowrap;
}
.accounting-bar-column > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-owner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}
.accounting-quickbooks,
.accounting-bank-feeds,
.accounting-runway,
.accounting-owner-actions {
  min-width: 0;
}
.accounting-handshake {
  display: grid;
  gap: 0;
  padding: 4px 16px 12px;
}
.accounting-handshake-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
}
.accounting-handshake-row:last-child { border-bottom: 0; }
.accounting-handshake-row > span:first-child {
  color: var(--muted);
  font-size: 0.8rem;
}
.accounting-handshake-row .platform-status {
  max-width: 62%;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}
.accounting-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 16px 12px;
}
.accounting-panel-actions > button {
  min-height: 46px;
}
.accounting-sandbox-note,
.accounting-source-note {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}
.accounting-sandbox-note {
  margin: 0;
  padding: 0 16px 16px;
}
.accounting-bank-list {
  display: grid;
  gap: 0;
  padding: 0 16px 10px;
}
.accounting-bank-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-bottom: 1px solid var(--border);
}
.accounting-bank-row:last-child { border-bottom: 0; }
.accounting-bank-row strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounting-bank-row .platform-status {
  font-size: 0.68rem;
}

.accounting-runway-value {
  display: grid;
  gap: 4px;
  padding: 18px 16px 10px;
}
.accounting-runway-value strong {
  color: var(--gold-bright);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.accounting-runway-value span {
  color: var(--muted);
  font-size: 0.78rem;
}
.accounting-runway > meter {
  width: calc(100% - 32px);
  height: 12px;
  margin: 0 16px 10px;
}
.accounting-owner-action-list {
  display: grid;
  gap: 0;
}
.accounting-owner-action-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}
.accounting-owner-action-row:last-child { border-bottom: 0; }
.accounting-owner-action-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.accounting-owner-action-copy strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounting-owner-action-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounting-detail-section {
  min-width: 0;
}
.accounting-detail-section > .accounting-cash-table-panel {
  margin-top: 0;
}
.accounting-source-note {
  padding: 0 2px 8px;
}

@media (max-width: 1180px) {
  .accounting-owner-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .accounting-chart-grid,
  .accounting-owner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .work-daily-pulse { grid-template-columns: 1fr; }
  .accounting-context-bar { align-items: flex-start; flex-direction: column; }
  .accounting-context-actions { justify-content: flex-start; }
  .accounting-owner-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-header-actions { align-items: stretch; justify-self: stretch; }
  .accounting-header-actions .platform-field { width: 100%; }
  .accounting-header-actions > button { flex: 1 1 180px; }
}
@media (max-width: 520px) {
  .accounting-owner-metrics { grid-template-columns: 1fr; }
  .accounting-chart-grid,
  .accounting-owner-grid { gap: 12px; }
  .accounting-bars { height: 190px; gap: 6px; padding-inline: 10px; }
  .accounting-bar { width: min(28px, 76%); }
  .accounting-bar span { font-size: 0.6rem; }
  .accounting-context-actions > span { line-height: 1.35; }
  .accounting-owner-action-row { grid-template-columns: 18px minmax(0, 1fr) auto; padding-inline: 12px; }
}

/* Owner decision layer: one inline stack, one global footer.  These rules
   keep the accounting actions in document flow so they never collide with
   body > footer, while reducing duplicate signals from the metric row. */
.accounting-owner-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.accounting-readiness,
.accounting-cash-decisions,
.accounting-owner-actions {
  min-width: 0;
  min-height: 100%;
}
.accounting-readiness-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
  padding: 0 16px 8px;
}
.accounting-readiness-body .accounting-handshake {
  padding: 0;
}
.accounting-readiness-body .accounting-panel-actions {
  padding: 0 0 4px;
}
.accounting-readiness-cash-controls {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 0;
}
.accounting-cash-control-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.accounting-cash-control-row:hover { background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
.accounting-cash-control-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.accounting-cash-control-row > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounting-cash-control-row .platform-status {
  max-width: 100%;
  font-size: 0.7rem;
}
.accounting-readiness-cash-controls > .accounting-sandbox-note {
  padding: 10px 0 8px;
}
.accounting-bank-link {
  justify-self: start;
  min-height: 38px !important;
  padding-inline: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
}
.accounting-subheading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  color: #ffffff;
}
.accounting-subheading > strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounting-subheading .platform-status {
  flex: 0 0 auto;
}
.accounting-readiness .accounting-sandbox-note {
  padding-bottom: 16px;
}
.accounting-cash-decision-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0;
  padding: 0 16px 16px;
}
.accounting-runway-block {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
  padding: 14px 16px 0 0;
  border-right: 1px solid var(--border);
}
.accounting-kicker {
  color: var(--muted);
  font-size: 0.71rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.accounting-runway-block > strong {
  color: var(--gold);
  font-size: clamp(1.6rem, 2vw, 2.15rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.accounting-runway-caption {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}
.accounting-runway-block > meter {
  width: 100%;
  height: 11px;
  margin: 5px 0 2px;
}
.accounting-runway-block .accounting-sandbox-note {
  padding: 0;
}
.accounting-next-payments {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 4px;
  padding: 14px 0 0 16px;
}
.accounting-payment-list {
  display: grid;
  min-width: 0;
  gap: 0;
}
.accounting-payment-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 47px;
  border-bottom: 1px solid var(--border);
}
.accounting-payment-row:last-child { border-bottom: 0; }
.accounting-payment-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.accounting-payment-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.accounting-payment-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounting-payment-copy span {
  color: var(--muted);
  font-size: 0.68rem;
}
.accounting-payment-amount {
  color: #ffffff;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.accounting-action-rail {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
}
.accounting-action-rail > strong {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.accounting-action-rail-controls {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.accounting-action-rail-controls > button {
  min-height: 44px;
  padding-inline: 12px;
}
.accounting-owner-action-copy strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.accounting-owner-action-copy span {
  overflow: hidden;
  line-height: 1.3;
  white-space: normal;
  -webkit-line-clamp: 2;
}

/* Every platform page reserves the fixed global footer's full footprint. */
main {
  padding-bottom: calc(var(--space-4) + var(--footer-height) + env(safe-area-inset-bottom) + 18px);
  scroll-padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) + 18px);
}

@media (max-width: 1180px) {
  .accounting-owner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-readiness { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .accounting-owner-grid { grid-template-columns: minmax(0, 1fr); }
  .accounting-readiness { grid-column: auto; }
  .accounting-readiness-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .accounting-cash-decision-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .accounting-runway-block { padding-right: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .accounting-next-payments { padding: 0; }
  .accounting-action-rail { align-items: flex-start; flex-direction: column; }
  .accounting-action-rail-controls { width: 100%; justify-content: flex-start; }
  .accounting-action-rail-controls > button { flex: 1 1 150px; }
}
@media (max-width: 520px) {
  .accounting-readiness-body,
  .accounting-cash-decision-body { padding-inline: 12px; }
  .accounting-action-rail { padding-inline: 12px; }
  .accounting-action-rail-controls > button { flex-basis: 100%; }
}

/* The owner row follows the approved four-pane composition: ledger handshake,
   cash controls, payout runway, and owner actions.  It collapses before any
   pane becomes narrower than its readable min-content width. */
.accounting-owner-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.accounting-quickbooks,
.accounting-cash-controls-panel,
.accounting-cash-decisions,
.accounting-owner-actions,
.accounting-cash-commitments {
  min-width: 0;
  min-height: 100%;
}
.accounting-cash-controls-panel > .accounting-readiness-cash-controls {
  padding: 0 16px 12px;
}
.accounting-inline-action {
  display: inline-flex;
  min-height: 40px !important;
  margin: 0 0 4px auto;
}
.accounting-cash-controls-panel .accounting-readiness-cash-controls > .accounting-sandbox-note {
  padding-inline: 0;
}
.accounting-cash-controls-panel .accounting-bank-link {
  padding-inline: 0 !important;
}
.accounting-cash-decision-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.accounting-runway-block {
  padding-right: 0;
  padding-bottom: 12px;
  border-right: 0;
  border-bottom: 1px solid var(--border);
}
.accounting-next-payments { padding: 0; }
.accounting-owner-action-row {
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  padding-inline: 12px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.accounting-owner-action-row:hover { background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
.accounting-owner-action-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.accounting-owner-action-row > .ui-icon:last-child { justify-self: end; }
.accounting-owner-action-row > .compact-action {
  min-width: 82px;
  padding-inline: 10px;
  gap: 6px;
  justify-content: center;
}
.accounting-owner-action-copy strong,
.accounting-owner-action-copy span {
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-line-clamp: unset;
}
.accounting-owner-actions-link {
  margin: 6px 12px 12px;
}
.accounting-commitment-list {
  display: grid;
  min-width: 0;
  padding: 0 16px 8px;
}
.accounting-commitment-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.accounting-commitment-row:hover { background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
.accounting-commitment-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.accounting-commitment-row:last-child { border-bottom: 0; }
.accounting-commitment-row .accounting-payment-copy strong {
  font-size: 0.72rem;
}
.accounting-commitment-row .accounting-payment-copy span {
  font-size: 0.66rem;
}
.accounting-commitment-link {
  margin: 0 16px 12px;
}

@media (max-width: 1439px) {
  .accounting-owner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .accounting-owner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .accounting-owner-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .accounting-cash-controls-panel > .accounting-readiness-cash-controls { padding-inline: 12px; }
}

/* The owner layer uses explicit light-theme overrides because its values are
   deliberately white in dark mode and must not disappear on the ivory canvas. */
:root[data-theme="light"] #work-page :is(.accounting-context-bar, .accounting-owner-metric, .accounting-action-rail, .accounting-quickbooks, .accounting-cash-controls-panel, .accounting-cash-decisions, .accounting-owner-actions, .accounting-cash-commitments) {
  background: var(--surface-raised);
  border-color: var(--border);
}
:root[data-theme="light"] #work-page :is(.accounting-context-copy strong, .accounting-owner-metric > strong, .accounting-owner-action-copy strong, .accounting-payment-copy strong, .accounting-payment-amount, .accounting-action-rail > strong, .accounting-bank-row strong, .accounting-subheading) { color: var(--text); }
:root[data-theme="light"] #work-page :is(.accounting-context-copy span, .accounting-context-actions > span, .accounting-owner-metric > small, .accounting-owner-action-copy span, .accounting-payment-copy span, .accounting-runway-caption, .accounting-kicker, .accounting-sandbox-note, .accounting-source-note) { color: var(--muted); }
:root[data-theme="light"] #work-page .accounting-cash-control-row > span { color: var(--muted); }
:root[data-theme="light"] #work-page .accounting-context-actions .platform-status { color: #ffffff; }
:root[data-theme="light"] #work-page .accounting-bar span { color: var(--text); }
:root[data-theme="light"] #work-page .accounting-action-rail-controls > button:not(.primary-action) { color: var(--text); background: var(--surface-control); border-color: var(--border); }
:root[data-theme="light"] #work-page .accounting-owner-metric.is-interactive:hover,
:root[data-theme="light"] #work-page .accounting-owner-metric.is-interactive:focus-visible { background: var(--surface-hover); border-color: var(--border-interactive); }
:root[data-theme="light"] #work-page .accounting-owner-metric.positive,
:root[data-theme="light"] #work-page .accounting-owner-metric.attention { border-color: var(--border); }
:root[data-theme="light"] #work-page .accounting-chart-panel .accounting-bars { background: var(--surface); }

/* Sitewide interaction and hierarchy contract.  Every data-list header uses
   the same keyboard-safe sort affordance, while second-level headings and
   form labels share the gold accent used for active navigation. */
:is(.platform-panel-heading h2,
    .product-form-section-heading h3,
    .appointment-section-heading h3,
    .appointment-inline-heading h4,
    .client-form-section-heading h3,
    .section-heading h3,
    .subsection-block h4,
    #order-entry-page .details-section-title h3,
    #order-entry-page .checkout-review-header h3,
    .utility-card-heading h2) {
  color: var(--gold) !important;
}

:is(.platform-form, .quick-client-form, .override-form, .tax-form, .appointment-form, .client-record-form, .utility-form)
  :is(input, select, textarea) {
  min-width: 0;
  border-color: var(--border-strong);
  background: var(--surface-control);
}

:is(.platform-form, .quick-client-form, .override-form, .tax-form, .appointment-form, .client-record-form, .utility-form)
  :is(input, select, textarea):focus-visible {
  border-color: var(--gold);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

:is(.platform-form, .quick-client-form, .override-form, .tax-form, .appointment-form, .client-record-form, .utility-form)
  .platform-field-label {
  color: var(--gold);
}

.platform-sort-header {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin: -4px 0;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.platform-sort-header:hover {
  border-color: var(--border-interactive);
  background: var(--surface-hover);
  color: var(--gold);
}

.platform-sort-header:focus-visible {
  border-color: var(--gold);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.queue-sort-indicator {
  width: 16px;
  flex: 0 0 16px;
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}

.platform-sort-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-sort-indicator {
  width: 16px;
  flex: 0 0 16px;
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}

.platform-sort-column[aria-sort="ascending"],
.platform-sort-column[aria-sort="descending"] {
  color: var(--gold);
}

.accounting-cash-table th {
  min-width: 0;
  padding: 0 5px;
}

.accounting-cash-table th > .platform-sort-header {
  width: 100%;
}

/* Ledger headers keep a full-row hit area so sorting stays discoverable and
   comfortable on touch devices, even when the label itself is short. */
.ledger-columns .platform-sort-header,
.review-queue-columns .platform-sort-header,
.platform-list-columns .platform-sort-header {
  width: 100%;
}

#order-entry-page .product-columns > span:nth-child(n + 2) .platform-sort-header {
  justify-content: flex-end;
  text-align: right;
}

@media (max-width: 760px) {
  .platform-sort-header {
    min-height: 48px;
    gap: 5px;
    padding-inline: 5px;
  }
}

/* Route Explorer --------------------------------------------------------- */
/* A supporting map keeps the architecture visible without creating a second
   navigation rail. Each destination is an addressable, keyboard-safe button. */
.route-explorer-note {
  max-width: 900px;
  padding: 0 var(--space-1);
  color: var(--muted);
  font-size: 0.88rem;
}

.route-explorer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

.route-explorer-panel {
  min-width: 0;
}

.route-explorer-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(116px, 0.7fr) 20px;
  align-items: center;
  width: 100%;
  min-height: 68px;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border-divider);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.route-explorer-item:last-child { border-bottom: 0; }
.route-explorer-item:hover,
.route-explorer-item:focus-visible { background: var(--surface-hover); }
.route-explorer-item.is-current { box-shadow: inset 3px 0 0 var(--gold); background: #15140f; }
.route-explorer-item-icon { width: 21px; height: 21px; color: var(--gold); }
.route-explorer-item-copy { display: grid; min-width: 0; gap: 3px; }
.route-explorer-item-copy strong,
.route-explorer-item-copy small,
.route-explorer-item code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-explorer-item-copy strong { color: var(--text); font-size: 0.93rem; }
.route-explorer-item-copy small { color: var(--muted); font-size: 0.78rem; }
.route-explorer-item code { color: var(--muted); font-family: inherit; font-size: 0.76rem; text-align: right; }
.route-explorer-open-icon { width: 17px; height: 17px; color: var(--gold); }

@media (max-width: 620px) {
  .route-explorer-item {
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    gap: var(--space-2);
    min-height: 72px;
    padding-inline: var(--space-3);
  }
  .route-explorer-item code { grid-column: 2; grid-row: 2; text-align: left; }
  .route-explorer-open-icon { grid-column: 3; grid-row: 1 / span 2; }
}


/* Approved Work restoration: keep the daily workspace neutral and uncluttered. */
body[data-route="work"] .work-agenda-panel .platform-panel-heading > .panel-heading-icon,
body[data-route="work"] .work-decisions-panel .platform-panel-heading > .panel-heading-icon {
  display: none;
}
body[data-route="work"] .work-agenda-panel .platform-panel-heading h2,
body[data-route="work"] .work-decisions-panel .platform-panel-heading h2,
#work .work-agenda-panel .platform-panel-heading h2,
#work .work-decisions-panel .platform-panel-heading h2 {
  color: var(--text) !important;
}

/* Preserve readable sort affordances in the compact Work agenda. */
#work .appointment-ledger-columns .platform-sort-header {
  width: 100%;
}

/* Protected Spot Prices overview: one 2×2 decision surface, with detailed
   charts remaining available at /spot/{au|ag|pt|pd}. */
.spot-overview-note,
.spot-overview-grid {
  width: min(100%, 1120px);
  margin-inline: auto;
}
.spot-overview-note {
  margin-block: 0 18px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}
.spot-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.spot-overview-item { min-width: 0; }
.spot-overview-card {
  display: grid;
  min-width: 0;
  min-height: 220px;
  align-content: space-between;
  gap: 22px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.spot-overview-item > .spot-overview-card { height: 100%; }
.spot-overview-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.spot-overview-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.spot-overview-card-heading,
.spot-overview-card-quote,
.spot-overview-card-market { display: flex; min-width: 0; align-items: center; }
.spot-overview-card-heading { gap: 10px; }
.spot-overview-card-heading .ui-icon { width: 22px; height: 22px; color: var(--gold); }
.spot-overview-card-heading strong { font-size: 1.05rem; }
.spot-overview-card-heading small { margin-left: auto; color: var(--muted); font-size: 1rem; letter-spacing: 0.08em; }
.spot-overview-card-quote { align-items: flex-end; justify-content: space-between; gap: 14px; }
.spot-overview-card-quote strong { min-width: 0; font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }
.spot-overview-card-quote small { color: var(--green-bright); font-size: 1rem; font-weight: 600; white-space: nowrap; }
.spot-overview-card-quote small.is-down { color: #ff7b72; }
.spot-overview-card-quote small.is-unchanged { color: var(--muted); }
.spot-overview-card-market { gap: 14px; padding-top: 14px; border-top: 1px solid var(--border-divider); color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.spot-overview-card-market .ui-icon { width: 17px; height: 17px; margin-left: auto; color: var(--gold); }
.settings-accessibility-link { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.settings-accessibility-link > .ui-icon { width: 22px; height: 22px; color: var(--gold); }
.settings-accessibility-link > div { display: grid; gap: 4px; }
.settings-accessibility-link > div > p { margin: 0; color: var(--muted); font-size: 1rem; }

.permission-policy-strip,
.permission-matrix-panel {
  width: min(100%, 1180px);
  margin-inline: auto;
}
.permission-policy-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--surface-raised);
}
.permission-policy-strip > p { grid-column: 2; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.permission-policy-strip > strong { color: var(--text); font-size: 1rem; }
.permission-matrix-heading { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(220px, 320px); align-items: end; gap: 14px; }
.permission-matrix-heading .platform-field { margin: 0; }
.permission-matrix-scroll { max-width: 100%; overflow: auto; border-top: 1px solid var(--border-divider); }
.permission-matrix-table { width: 100%; min-width: 880px; border-collapse: collapse; color: var(--text); }
.permission-matrix-table :is(th, td) { height: 52px; padding: 10px 12px; border-bottom: 1px solid var(--border-divider); font-size: 1rem; text-align: center; }
.permission-matrix-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-control); text-transform: capitalize; }
.permission-matrix-table :is(th:first-child, td:first-child) { position: sticky; left: 0; z-index: 2; min-width: 190px; background: var(--surface-raised); text-align: left; }
.permission-matrix-table thead th:first-child { z-index: 3; background: var(--surface-control); }
.permission-matrix-table input[type="checkbox"] { width: 44px; height: 44px; min-height: 44px; margin: 0; accent-color: var(--gold-solid); opacity: 1; }
.permission-prerequisite { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface-control); }
.permission-prerequisite > .ui-icon { width: 22px; height: 22px; color: var(--gold); }
.permission-prerequisite > div { display: grid; gap: 4px; }
.permission-prerequisite :is(strong, p) { margin: 0; }
.permission-prerequisite p { color: var(--muted); font-size: 1rem; line-height: 1.45; }
@media (max-width: 700px) {
  .spot-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .spot-overview-card { min-height: 196px; padding: 18px; }
  .spot-overview-card-quote { align-items: flex-start; flex-direction: column; gap: 6px; }
  .settings-accessibility-link { grid-template-columns: 22px minmax(0, 1fr); }
  .settings-accessibility-link > button { grid-column: 2; justify-self: start; }
  .permission-policy-strip { grid-template-columns: minmax(0, 1fr); }
  .permission-policy-strip > p { grid-column: 1; }
  .permission-matrix-heading { grid-template-columns: 24px minmax(0, 1fr); }
  .permission-matrix-heading .platform-field { grid-column: 1 / -1; }
  .permission-prerequisite { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
  .permission-prerequisite > button { grid-column: 2; justify-self: start; }
}

/* PR #136 visual remediation: prevent min-content collapse in panel headers.
   The five-pane owner row remains on wide desktop; ordinary desktop widths
   use three columns so titles, status pills, and actions remain readable. */
.platform-panel-heading > .platform-heading-copy,
.platform-panel-heading > .platform-heading-copy h2,
.platform-panel-heading > .platform-heading-copy h3 {
  min-width: 0;
  width: auto;
}
.platform-panel-heading > .platform-heading-copy { flex: 1 1 auto; }
.platform-panel-heading > .platform-heading-copy :is(h2, h3) {
  overflow-wrap: normal;
  word-break: normal;
}
.platform-panel-heading > .platform-status {
  flex: 0 0 auto;
  max-width: 44%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.platform-page .platform-status { font-size: 0.75rem; }
.directory-list-row-copy strong { font-size: 0.875rem; }
.directory-list-row-copy span { font-size: 0.75rem; }
.spot-overview-card-heading small,
.spot-overview-card-quote small,
.spot-overview-card-market,
.settings-accessibility-link > div > p,
.permission-policy-strip > p,
.permission-policy-strip > strong,
.permission-prerequisite p { font-size: 0.8125rem; }

@media (min-width: 821px) and (max-width: 1599px) {
  .accounting-owner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}