/*
 * Malvern POS app chrome, October 2026: the header and the side menu.
 *
 * Header: a slim black bar (42px on tills, 40px on phones) with the white lockup, the workspace
 * title, a mono clock, one status capsule where every state is a dot plus words, and the staff
 * pill. All text on the black ground is white (brand rule: no grey on dark).
 *
 * Side menu: white rail, small mono group labels, 20px icons, the whole row tappable, and the
 * current page marked by a soft Cobalt tint, a Cobalt icon, a heavier label and a short Cobalt
 * marker at the rail edge, so the state is never carried by colour alone.
 *
 * Loaded last so it settles the older layers in styles.css, the brand remap and base.css.
 * Header selectors are anchored on `html .app-shell > .topbar.topbar`; side-menu layout uses
 * `.main-nav .nav-btn` so an interface style (for example Counter) can still reshape its rail,
 * while colours use higher-specificity selectors. Same text, ids and hooks as before.
 */
:root {
  --chrome-black: #08080A;
  --chrome-line: rgba(255, 255, 255, .14);
  --chrome-fill: rgba(255, 255, 255, .08);
  --chrome-fill-hover: rgba(255, 255, 255, .14);
  --nav-ink: #08080A;
  --nav-ink-2: #3A3A40;
  --nav-hover: #F4F4F6;
  --nav-accent: var(--brand-primary, #2D4BFF);
  --nav-active-bg: color-mix(in srgb, var(--nav-accent) 14%, #FFFFFF);
  --nav-active-line: color-mix(in srgb, var(--nav-accent) 24%, #FFFFFF);
  --nav-active-ink: color-mix(in srgb, var(--nav-accent) 70%, #08080A);
  --nav-press: color-mix(in srgb, var(--nav-accent) 20%, #FFFFFF);
  --nav-ease: cubic-bezier(.2, 0, 0, 1);
}
@media (min-width: 980px) {
  :root { --header-height: 42px; }
}
@media (max-width: 979px) {
  :root { --header-height: 40px; }
}

/* ===================================================================== Header */
html .app-shell > .topbar.topbar {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr) auto;
  grid-template-rows: var(--header-height);
  align-items: center;
  min-height: var(--header-height);
  height: var(--header-height);
  padding: 0;
  color: #FFFFFF;
  background: var(--chrome-black);
  border-bottom: 0;
  box-shadow: none;
}
html .app-shell > .topbar.topbar::before,
html .app-shell > .topbar.topbar::after { content: none; display: none; }
html .app-shell > .topbar.topbar :focus-visible { outline: 2px solid var(--mp-cobalt-300, #94AFFF); outline-offset: 2px; }

/* Brand: the supplied white lockup at a 16px cap, aligned with the side rail. */
html .app-shell > .topbar.topbar .brand-zone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: stretch;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0 18px;
  border-right: 1px solid var(--chrome-line);
}
html .app-shell > .topbar.topbar .brand-zone picture { display: block; width: 92px; max-width: 100%; height: auto; }
html .app-shell > .topbar.topbar .brand-zone .brand-logo { display: block; width: 100%; max-width: none; height: auto; margin: 0; filter: none; }

/* Workspace title and clock. */
html .app-shell > .topbar.topbar .workspace-context {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 16px;
  border-left: 0;
}
html .app-shell > .topbar.topbar .workspace-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html .app-shell > .topbar.topbar .header-clock {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: #FFFFFF;
  background: var(--chrome-fill);
  white-space: nowrap;
}
html .app-shell > .topbar.topbar .header-clock-time {
  font-family: var(--mp-font-family-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
html .app-shell > .topbar.topbar .header-clock-date { color: #FFFFFF; font-size: 11.5px; font-weight: 500; }

/* Actions: status capsule, menu button (small screens) and staff pill. */
html .app-shell > .topbar.topbar .top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding: 0 10px 0 8px;
}
html .app-shell > .topbar.topbar .header-statuses {
  position: static;
  display: flex;
  align-items: center;
  gap: 0;
  height: 28px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--chrome-line);
  border-radius: 8px;
  background: var(--chrome-fill);
  box-shadow: none;
}
html .app-shell > .topbar.topbar .service-statuses { display: flex; gap: 0; min-width: 0; }
html .app-shell > .topbar.topbar :is(.scanner-badge, .header-status) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  color: #FFFFFF;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
html .app-shell > .topbar.topbar .header-status { border-left: 1px solid var(--chrome-line); }
html .app-shell > .topbar.topbar .header-status .ui-icon { display: none; }

/* One dot per status, in the dark-ground status colours. Green ready, amber working, red needs
   attention, grey off. The words beside each dot carry the meaning. */
html .app-shell > .topbar.topbar .scanner-badge .status-dot,
html .app-shell > .topbar.topbar .header-status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #86868E;
  box-shadow: none;
  animation: none;
}
html .app-shell > .topbar.topbar .scanner-badge .status-dot,
html .app-shell > .topbar.topbar .header-status:is([data-state="connected"], [data-state="synced"], [data-state="online"], [data-state="ready"])::before {
  background: #3DD68C;
  box-shadow: 0 0 0 3px rgba(61, 214, 140, .16);
}
html .app-shell > .topbar.topbar .scanner-badge.paused .status-dot,
html .app-shell > .topbar.topbar .header-status:is([data-state="reconnecting"], [data-state="syncing"], [data-state="checking"], [data-state="pending"])::before {
  background: #F5B544;
  box-shadow: 0 0 0 3px rgba(245, 181, 68, .16);
}
html .app-shell > .topbar.topbar .header-status:is([data-state="reconnecting"], [data-state="syncing"], [data-state="checking"], [data-state="pending"])::before {
  animation: app-chrome-pulse 1.4s ease-in-out infinite;
}
html .app-shell > .topbar.topbar .header-status:is([data-state="offline"], [data-state="error"], [data-state="failed"])::before {
  background: #FF6369;
  box-shadow: 0 0 0 3px rgba(255, 99, 105, .18);
}
@keyframes app-chrome-pulse { 50% { opacity: .35; } }

/* Staff pill: 32px to look slim, with an invisible hit area that keeps the 44px touch target. */
html .app-shell > .topbar.topbar .staff-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 1 auto;
  width: auto;
  min-width: 44px;
  max-width: 220px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--chrome-line);
  border-radius: 999px;
  color: #FFFFFF;
  background: var(--chrome-fill);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 120ms cubic-bezier(.2, 0, 0, 1);
}
html .app-shell > .topbar.topbar :is(.staff-pill, .nav-disclosure)::after { content: ""; position: absolute; inset: -6px -5px; }
html .app-shell > .topbar.topbar .staff-pill:hover { background: var(--chrome-fill-hover); }
html .app-shell > .topbar.topbar .staff-pill:active { background: rgba(255, 255, 255, .2); }
html .app-shell > .topbar.topbar .staff-avatar {
  display: grid;
  flex: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #000000;
  background: var(--mp-brand-volt, #DDFF2A);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
html .app-shell > .topbar.topbar .staff-avatar:empty { display: none; }
html .app-shell > .topbar.topbar .staff-pill:has(.staff-avatar:empty) { padding-left: 10px; }
html[data-shop-colours="1"] .app-shell > .topbar.topbar .staff-avatar { color: var(--shop-on-primary, #FFFFFF); background: var(--color-brand); }
html .app-shell > .topbar.topbar #currentStaffLabel {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html .app-shell > .topbar.topbar .staff-pill .ui-icon { flex: none; width: 16px; height: 16px; color: #FFFFFF; opacity: 1; }

html .app-shell > .topbar.topbar .nav-disclosure {
  position: relative;
  display: none;
  width: 34px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--chrome-line);
  border-radius: 8px;
  color: #FFFFFF;
  background: var(--chrome-fill);
}
html .app-shell > .topbar.topbar .nav-disclosure .ui-icon { width: 18px; height: 18px; }
/* Keyboard-help button, when present: a quiet round "?" matching the slim bar. */
html .app-shell > .topbar.topbar .shortcut-help {
  position: relative;
  display: inline-grid;
  flex: none;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--chrome-line);
  border-radius: 50%;
  color: #FFFFFF;
  background: var(--chrome-fill);
  font-size: 13px;
  font-weight: 600;
}
html .app-shell > .topbar.topbar .shortcut-help::after { content: ""; position: absolute; inset: -8px; }
html .app-shell > .topbar.topbar .shortcut-help:hover { background: var(--chrome-fill-hover); }
@media (max-width: 979px) {
  html .app-shell > .topbar.topbar .shortcut-help { display: none; }
}
html .app-shell > .topbar.topbar .nav-disclosure[aria-expanded="true"] { color: #000000; border-color: #FFFFFF; background: #FFFFFF; }

@media (min-width: 980px) and (max-width: 1279px) {
  html .app-shell > .topbar.topbar .brand-zone { padding: 0 14px; }
  html .app-shell > .topbar.topbar .brand-zone picture { width: 84px; }
  html .app-shell > .topbar.topbar .workspace-context { padding: 0 14px; }
  html .app-shell > .topbar.topbar .header-clock-date { display: none; }
  html .app-shell > .topbar.topbar :is(.scanner-badge, .header-status) { padding: 0 9px; font-size: 11.5px; }
  html .app-shell > .topbar.topbar .staff-pill { max-width: 204px; }
}
@media (min-width: 980px) and (max-width: 1099px) {
  html .app-shell > .topbar.topbar .header-clock { display: none; }
}

/* Tablets and phones: the rail becomes a drawer, so the header carries the menu button. */
@media (max-width: 979px) {
  html .app-shell > .topbar.topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 10px; }
  html .app-shell > .topbar.topbar .brand-zone { width: 26px; height: 100%; padding: 0; border-right: 0; }
  html .app-shell > .topbar.topbar .brand-zone picture,
  html .app-shell > .topbar.topbar .brand-zone .brand-logo { width: 26px; height: 26px; }
  html .app-shell > .topbar.topbar .workspace-context { gap: 8px; padding: 0 10px; }
  html .app-shell > .topbar.topbar .header-clock { display: none; }
  html .app-shell > .topbar.topbar .top-actions { gap: 6px; padding: 0; }
  html .app-shell > .topbar.topbar :is(.scanner-badge, .header-status) { padding: 0 8px; font-size: 11.5px; }
  html .app-shell > .topbar.topbar .header-status > span,
  html .app-shell > .topbar.topbar #scannerBadgeLabel { display: inline; }
  html .app-shell > .topbar.topbar .nav-disclosure { display: inline-grid; }
  html .app-shell > .topbar.topbar .staff-pill { max-width: 172px; }
}
/* Phones: show only what needs attention, with its words. */
@media (max-width: 700px) {
  html .app-shell > .topbar.topbar .scanner-badge:not(.paused),
  html .app-shell > .topbar.topbar .header-status:is([data-state="connected"], [data-state="synced"], [data-state="online"], [data-state="ready"], [data-state="disabled"], [data-state="setup_required"], [data-state="not_configured"], [data-state="neutral"]) { display: none; }
  html .app-shell > .topbar.topbar .header-statuses:not(:has(.scanner-badge.paused, .header-status:is([data-state="offline"], [data-state="error"], [data-state="failed"], [data-state="reconnecting"], [data-state="syncing"], [data-state="checking"], [data-state="pending"]))) { display: none; }
  html .app-shell > .topbar.topbar .header-status { border-left: 0; }
  html .app-shell > .topbar.topbar .staff-pill { width: 34px; min-width: 34px; max-width: 34px; padding: 0; justify-content: center; }
  html .app-shell > .topbar.topbar .staff-pill #currentStaffLabel,
  html .app-shell > .topbar.topbar .staff-pill .ui-icon { display: none; }
  html .app-shell > .topbar.topbar .staff-pill:has(.staff-avatar:empty) .ui-icon { display: block; }
}
@media (max-width: 420px) {
  html .app-shell > .topbar.topbar { padding: 0 8px; }
  html .app-shell > .topbar.topbar .workspace-context { padding: 0 8px; }
  html .app-shell > .topbar.topbar .header-status > span { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
}

/* ================================================================= Side menu */
.side-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 8px 10px;
  background: #FFFFFF;
  border-right: 1px solid #E8E8EB;
}
.main-nav {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  height: auto;
  min-height: 0;
  gap: 2px;
  overflow: hidden;
}
.main-nav .nav-section-label {
  display: block;
  flex: 0 0 auto;
  height: auto;
  margin: 0;
  padding: 12px 10px 4px;
  color: #55555D;
  font-family: var(--mp-font-family-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-nav .nav-section-label:first-child { padding-top: 4px; }
.main-nav .nav-btn {
  position: relative;
  display: flex;
  flex: 0 0 44px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--nav-ink-2);
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: left;
  transition: background-color 200ms var(--nav-ease), border-color 200ms var(--nav-ease), color 200ms var(--nav-ease), transform 120ms var(--nav-ease);
}
.main-nav .nav-btn > .ui-icon { flex: 0 0 20px; width: 20px; height: 20px; padding: 0; color: currentColor; stroke-width: 1.75; transition: color 200ms var(--nav-ease), transform 200ms var(--nav-ease); }
.main-nav .nav-label { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-nav .nav-short-label { display: none; }
.main-nav .nav-suppliers { margin-top: 0; }
.main-nav .nav-suppliers::after { content: none; }
.main-nav > [hidden] { display: none !important; }
.side-rail > .fit-pager { display: grid; flex: 0 0 52px; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 2px; padding: 6px 0 0; }
.side-rail > .fit-pager .fp-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.side-rail > .fit-pager .fp-status { min-width: 0; font-size: 10px; text-align: center; }
.side-rail > .fit-pager .fp-dots { display: none; }
.side-rail > .fit-pager .fp-text { display: block; }

/* Colours: hover is a quiet grey; the current page is a soft Cobalt tint with a Cobalt icon,
   a heavier deep-Cobalt label and a short marker on the rail edge. */
html .app-shell .side-rail .main-nav .nav-btn:not(.active):hover { color: var(--nav-ink); background: var(--nav-hover); }
/* Pressed: a quick Cobalt-tinted press with a slight scale, on every row including the current one. */
html .app-shell .side-rail .main-nav .nav-btn:active { transform: scale(.98); }
html .app-shell .side-rail .main-nav .nav-btn:active:not(.active) { color: var(--nav-active-ink); background: var(--nav-press); }
html .app-shell .side-rail .main-nav .nav-btn:active > .ui-icon { color: var(--nav-accent); }
html:not([data-shop-colours="1"]) .app-shell .side-rail .main-nav .nav-btn.active,
html:not([data-shop-colours="1"]) .app-shell .side-rail .main-nav .nav-btn.active:hover {
  color: var(--nav-active-ink);
  background: var(--nav-active-bg);
  border-color: var(--nav-active-line);
  box-shadow: none;
  font-weight: 650;
}
html .app-shell .side-rail .main-nav .nav-btn.active > .ui-icon { color: var(--nav-accent); stroke-width: 2; animation: nav-icon-in 320ms var(--nav-ease); }
html .app-shell .side-rail .main-nav .nav-btn.active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: var(--nav-accent);
  transform: translateY(-50%);
  animation: nav-marker-in 280ms var(--nav-ease);
}
/* When a page becomes current, its marker grows from the centre and the icon gives a small lift. */
@keyframes nav-marker-in {
  from { transform: translateY(-50%) scaleY(0); opacity: 0; }
  to { transform: translateY(-50%) scaleY(1); opacity: 1; }
}
@keyframes nav-icon-in {
  0% { transform: scale(.88); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
html[data-shop-colours="1"] .app-shell .side-rail { --nav-accent: var(--color-brand); }
html .app-shell .side-rail .main-nav .nav-btn:focus-visible { outline: 2px solid var(--mp-brand-cobalt, #2D4BFF); outline-offset: 1px; }

/* Narrower tills keep full labels at a slightly smaller size. */
@media (min-width: 980px) and (max-width: 1279px) {
  .main-nav .nav-btn { gap: 9px; padding: 0 8px 0 10px; font-size: 12.5px; }
  .main-nav .nav-label { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; }
  .main-nav .nav-btn > .ui-icon { flex-basis: 18px; width: 18px; height: 18px; }
  .main-nav .nav-section-label { padding-inline: 8px; font-size: 10px; }
}
/* Drawer on tablets and phones: comfortable 48px rows. */
@media (max-width: 979px) {
  .side-rail { top: var(--header-height); padding: 10px; }
  .main-nav { overflow-y: auto; }
  .main-nav .nav-btn { flex: 0 0 48px; max-height: 48px; font-size: 15px; }
  .main-nav .nav-section-label { font-size: 11px; }
}

/* ======================================================= Checkout states */
/* One state grammar for the sale screen, in the current brand: hover is a quiet neutral, a
   press is a soft Cobalt tint with a Cobalt edge, and a basket line that has just changed
   glows Cobalt for a moment with a marker on its edge. No Volt or legacy oxblood here. */
:root {
  --sale-accent: var(--brand-primary, #2D4BFF);
  --sale-press-bg: color-mix(in srgb, var(--sale-accent) 12%, #FFFFFF);
  --sale-press-line: color-mix(in srgb, var(--sale-accent) 45%, #FFFFFF);
  --sale-press-ink: color-mix(in srgb, var(--sale-accent) 72%, #08080A);
  --sale-flash-bg: color-mix(in srgb, var(--sale-accent) 10%, #FFFFFF);
}
html .app-shell #productList .product-tile { transition: background-color 160ms cubic-bezier(.2, 0, 0, 1), border-color 160ms cubic-bezier(.2, 0, 0, 1), transform 120ms cubic-bezier(.2, 0, 0, 1); }
html .app-shell #productList .product-tile:hover { color: var(--mp-text-primary, #08080A); background: #F8FFDD; border-color: var(--mp-volt-400, #A9CB00); }
html .app-shell #productList .product-tile:active { color: var(--sale-press-ink); background: var(--sale-press-bg); border-color: var(--sale-press-line); box-shadow: none; transform: scale(.97); }
html .app-shell .basket-panel .qty-control :is([data-minus], [data-plus]):active {
  color: var(--sale-press-ink);
  background: var(--sale-press-bg);
  border-color: var(--sale-press-line);
  transform: scale(.94);
}
html .app-shell .tool-tile:active:not(:disabled) { color: var(--sale-press-ink); background: var(--sale-press-bg); border-color: var(--sale-press-line); }
html .app-shell .basket-panel .basket-line.just-changed { animation: sale-line-flash 1.2s cubic-bezier(.2, 0, 0, 1); }
@keyframes sale-line-flash {
  0%, 30% { background: var(--sale-flash-bg); box-shadow: inset 3px 0 0 var(--sale-accent); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}

/* Product lookup heading: one line for the title and the "New product" button on every till size. */
html .app-shell .catalog-panel > .panel-heading { align-items: center; gap: 12px; }
html .app-shell .catalog-panel > .panel-heading h1 { white-space: nowrap; }
html .app-shell .catalog-panel > .panel-heading #newProductBtn { flex: none; min-height: 44px; padding: 0 14px; gap: 6px; white-space: nowrap; font-size: 14px; }
@media (min-width: 980px) and (max-width: 1279px) {
  html .app-shell .catalog-panel > .panel-heading h1 { font-size: 22px; }
}

/* Product lookup heading: one line for the title and the "New product" button on every till size. */
html .app-shell .catalog-panel > .panel-heading { align-items: center; gap: 12px; }
html .app-shell .catalog-panel > .panel-heading h1 { white-space: nowrap; }
html .app-shell .catalog-panel > .panel-heading #newProductBtn { flex: none; min-height: 44px; padding: 0 14px; gap: 6px; white-space: nowrap; font-size: 14px; }
@media (min-width: 980px) and (max-width: 1279px) {
  html .app-shell .catalog-panel > .panel-heading h1 { font-size: 22px; }
}

/* Category chips under the scan box: smaller, with clear space above so they never touch the
   field. They look 36px tall but keep a 44px hit area. */
html .app-shell #checkoutCategories.checkout-categories { gap: 6px; margin-top: 12px; padding: 4px 2px 8px; }
html .app-shell #checkoutCategories .category-filter {
  position: relative;
  min-height: 36px;
  height: 36px;
  padding: 0 13px;
  gap: 6px;
  font-size: 13px;
  font-weight: 550;
}
html .app-shell #checkoutCategories .category-filter::after { content: ""; position: absolute; inset: -4px 0; }
html .app-shell #checkoutCategories .category-filter .cat-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; line-height: 1; }
html .app-shell #checkoutCategories .category-more { padding-right: 10px; }
html .app-shell #checkoutCategories .category-more svg { width: 16px; height: 16px; }

/* ========================================================== Focus and cash */
/* Keyboard focus is Cobalt (the brand's focus colour), lighter Cobalt on dark grounds; the old
   Volt ring with a dark halo is retired. */
html:not([data-shop-colours="1"]) {
  --focus-ring: var(--mp-brand-cobalt, #2D4BFF);
  --focus-ring-on-light: transparent;
}
html :focus-visible { box-shadow: none; }
html :is(.login-brand-panel, .startup-screen) :focus-visible { outline-color: var(--mp-cobalt-300, #94AFFF); }
/* Cash dialog: "Exact" is a quick amount like the others, not a second Volt fill beside the
   Volt "Complete cash sale" button. */
html .app-shell ~ dialog .rd-notes #cashExactBtn,
html dialog .rd-notes #cashExactBtn { color: var(--sale-press-ink); background: var(--sale-press-bg); border-color: var(--sale-press-line); font-weight: 650; }

/* ============================================================ Offer badges */
/* Product tiles mark an offer with a "%" on a Volt dot: black on Volt, never white. */
html #productList .product-tile .tile-foot .tile-badge.deal.deal { color: #000000; background: var(--mp-brand-volt, #DDFF2A); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  html .app-shell > .topbar.topbar .header-status::before { animation: none; }
  .main-nav .nav-btn,
  .main-nav .nav-btn > .ui-icon { transition: none; }
  html .app-shell .side-rail .main-nav .nav-btn:active { transform: none; }
  html .app-shell .side-rail .main-nav .nav-btn.active::before,
  html .app-shell .side-rail .main-nav .nav-btn.active > .ui-icon { animation: none; }
  html .app-shell #productList .product-tile:active,
  html .app-shell .basket-panel .qty-control :is([data-minus], [data-plus]):active { transform: none; }
  html .app-shell .basket-panel .basket-line.just-changed { animation: none; background: var(--sale-flash-bg); }
}

/* ===================================================================== Coffee bar
 * Own cup: a sale tool beside Held, one tap per cup. Pressed reads as a Cobalt tint plus a
 * count, so the state is never colour alone. The usual order and the own-cup stepper live in
 * Customer & order details, beside the stamp card. */
html .basket-panel .basket-tools:has(> #ownCupBtn:not([hidden])) { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
html .basket-panel .basket-tools:has(> #ownCupBtn:not([hidden])) .tool-tile { padding-inline: 2px; font-size: 11.5px; letter-spacing: -.01em; }
html .app-shell .tool-tile.own-cup-btn[aria-pressed="true"] { color: var(--nav-active-ink); background: var(--nav-active-bg); border-color: var(--nav-active-line); }
html .app-shell .tool-tile.own-cup-btn[aria-pressed="true"] .ui-icon { color: var(--nav-active-ink); }
.tool-tile.own-cup-btn:disabled { opacity: .5; }
html .tool-tile .own-cup-count { color: #FFFFFF; background: var(--nav-accent); }
.own-cup-count[hidden] { display: none !important; }
@media (max-width: 700px) {
  html .basket-panel .basket-tools:has(> #ownCupBtn:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  html .basket-panel .basket-tools:has(> #ownCupBtn:not([hidden])) .tool-tile { font-size: 12px; letter-spacing: 0; }
}

#checkoutDetailsDialog .checkout-usual, #checkoutDetailsDialog .checkout-own-cups { grid-column: 1 / -1; display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--rd-line, #E4E4E8); border-radius: var(--rd-radius, 12px); }
#checkoutDetailsDialog .checkout-usual[hidden], #checkoutDetailsDialog .checkout-own-cups[hidden] { display: none; }
.checkout-usual-label, .checkout-own-cups-label { font: 600 11px/1.2 var(--font-mono, "Geist Mono", ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--nav-ink-2); }
.checkout-own-cups-label small { margin-left: 6px; font: 500 13px/1.2 var(--font-sans, "Geist", system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: var(--nav-ink-2); }
.checkout-usual-list { display: flex; flex-wrap: wrap; gap: 8px; }
.checkout-usual-item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; text-align: left; }
.checkout-usual-item small { font: 600 12px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace); color: var(--nav-ink-2); }
#checkoutDetailsDialog .checkout-own-cups { grid-template-columns: minmax(0, 1fr) 168px; align-items: center; }
.own-cup-stepper output { display: grid; place-items: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.own-cup-stepper .stepper-btn { min-width: 52px; min-height: 52px; font-size: 20px; font-weight: 700; cursor: pointer; }
.own-cup-stepper { grid-template-columns: 52px minmax(0, 1fr) 52px; }
html .app-shell .basket-panel .qty-control { grid-template-columns: 44px minmax(44px, 1fr) 44px; }
html .app-shell .basket-panel .qty-control .qty-value { min-width: 44px; }
.product-record-table .mini-button { white-space: nowrap; }
.own-cup-stepper .stepper-btn:disabled { opacity: .4; cursor: default; }

/* Barista queue: the drink as the barista says it, and when the next order will be ready */
.barista-drink { font-weight: 650; }
.barista-eta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--nav-ink-2); }
.barista-eta { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; color: var(--nav-active-ink); background: var(--nav-active-bg); font: 600 12px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 820px) {
  #checkoutDetailsDialog .checkout-own-cups { grid-template-columns: minmax(0, 1fr); }
}
/* A confirmation inside a dialog reads as plain text; only problems are red. */
.dialog-status[data-type="success"] { color: var(--nav-ink, #08080A); }
/* Swiss keeps a 44px tools strip; with Own cup added, words beat icons for room. */
html[data-ui="swiss"] .basket-panel .basket-tools:has(> #ownCupBtn:not([hidden])) .tool-tile .ui-icon { display: none; }