/* DT Nexus webapp-aligned tokens (dtnexus_webapp / AdminLayout) — mobile-first */
:root {
  --ink: #111827; /* gray-900 */
  --muted: #6b7280; /* gray-500 */
  --line: #e5e7eb; /* gray-200 */
  --paper: #f9fafb; /* gray-50 */
  --panel: #ffffff;
  --control-bg: #ffffff;
  --control-hover: #f9fafb;
  --accent: #2ba3de; /* brand-200 PRIMARY */
  --accent-hover: #397aa9; /* brand-300 */
  --accent-deep: #345575; /* brand-400 / steel */
  --accent-dark: #085574; /* brand-500 */
  --accent-soft: #ecf5fd; /* brand-50 */
  --accent-mid: #9cccf0; /* brand-100 */
  --nav: #232323; /* desktop main window */
  --nav-top: #232323;
  --nav-ink: #e5e7eb;
  --nav-muted: #9ca3af; /* gray-400 */
  --nav-active: #273345; /* brand tinted */
  --warn: #f59e0b;
  --danger: #f45300; /* nexus danger */
  --danger-soft: #fff7ed;
  --req: #dc2626; /* required-field marker */
  --badge-off: #f3f4f6;
  --badge-on: color-mix(in srgb, #2f9e44 18%, transparent);
  --badge-on-ink: #1b5e2a;
  --badge-offer: #f45300;
  --badge-offer-ink: #ffffff;
  --badge-related: #0b7ea4;
  --badge-related-ink: #ffffff;
  --badge-planned: color-mix(in srgb, #64748b 16%, transparent);
  --badge-planned-ink: #334155;
  --badge-presale: color-mix(in srgb, #0b7ea4 16%, transparent);
  --badge-presale-ink: #0c4a6e;
  --badge-current: var(--badge-on);
  --badge-current-ink: var(--badge-on-ink);
  --badge-sunset: color-mix(in srgb, #ca8a04 20%, transparent);
  --badge-sunset-ink: #854d0e;
  --badge-end-of-sale: color-mix(in srgb, #d9a441 22%, transparent);
  --badge-end-of-sale-ink: #7a5300;
  --badge-end-of-support: color-mix(in srgb, #f45300 16%, transparent);
  --badge-end-of-support-ink: #9a3412;
  --badge-internal: var(--badge-off);
  --badge-internal-ink: var(--muted);
  --badge-embargoed: color-mix(in srgb, #c2410c 18%, transparent);
  --badge-embargoed-ink: #9a3412;
  --badge-public: color-mix(in srgb, #0b7ea4 18%, transparent);
  --badge-public-ink: #0c4a6e;
  --badge-supply-available: var(--badge-on);
  --badge-supply-available-ink: var(--badge-on-ink);
  --badge-supply-constrained: color-mix(in srgb, #d9a441 22%, transparent);
  --badge-supply-constrained-ink: #7a5300;
  --badge-supply-unavailable: color-mix(in srgb, #94a3b8 18%, transparent);
  --badge-supply-unavailable-ink: #475569;
  --badge-supply-mixed: color-mix(in srgb, #0b7ea4 14%, transparent);
  --badge-supply-mixed-ink: #0c4a6e;
  --badge-procurement-available: var(--badge-on);
  --badge-procurement-available-ink: var(--badge-on-ink);
  --badge-procurement-constrained: color-mix(in srgb, #d9a441 22%, transparent);
  --badge-procurement-constrained-ink: #7a5300;
  --badge-procurement-unavailable: color-mix(in srgb, #b45309 18%, transparent);
  --badge-procurement-unavailable-ink: #9a3412;
  --on-accent: #ffffff;
  --glow-1: transparent;
  --glow-2: transparent;
  --scrim: rgb(17 24 39 / 0.45); /* modal backdrop tint */
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --radius: 0.5rem;
  --sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --display: "Comfortaa", ui-sans-serif, system-ui, sans-serif;
  --space: 1rem;
  --touch: 2.75rem;
  --icon-btn-size: 2.25rem;
  --nav-sticky-height: 4rem;
  --page-head-height: 0px;
  --wiki-title-bar-height: 0px;
  /* SKU codes are always 8 chars; size for td.code + cell pad (0.55rem×2). */
  --sku-code-font: 0.85rem;
  --sku-code-col: calc(8 * 0.62 * var(--sku-code-font) + 1.1rem);
  /* Products list SKU col: 8-char code + room for “+N” marker. */
  --sku-code-extra-col: calc(var(--sku-code-col) + 2.5rem);
  /* MPN list col — wider than secondary code rail (4.5rem); ~12 glyph budget. */
  --mpn-col: calc(12 * 0.62 * var(--sku-code-font) + 1.1rem);
  /* Frozen Name pin on SKU / price explorer — shared fixed width. */
  --sku-name-col: 24rem;
  /* Manufacturer / vendor party selects in Product create variant rows. */
  --party-col: 9rem;
  --sticky-select-w: 2.5rem;
  --sticky-actions-w: 2.75rem;
  /* H-scroll edge fades: always a dark shadow (not --ink, which inverts in dark). */
  --scroll-fade: rgb(0 0 0 / 0.07);
  --scroll-fade-soft: rgb(0 0 0 / 0.025);
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f4f6;
  --scroll-fade: rgb(0 0 0 / 0.32);
  --scroll-fade-soft: rgb(0 0 0 / 0.12);
  --muted: #9ca3af;
  --line: #323946;
  --paper: #18181b;
  --panel: #232323;
  --control-bg: #1c1c1f;
  --control-hover: #2a2a2e;
  --accent: #2ba3de;
  --accent-hover: #3bb4e8;
  --accent-deep: #9cccf0;
  --accent-dark: #ecf5fd;
  --accent-soft: #1a3344;
  --accent-mid: #345575;
  --nav: #0e0e0e;
  --nav-top: #0e0e0e;
  --nav-ink: #e5e7eb;
  --nav-muted: #9ca3af;
  --nav-active: #273345;
  --warn: #fbbf24;
  --danger: #ff8b52;
  --danger-soft: #3a2420;
  --req: #f87171;
  --badge-off: #2a2a2e;
  --badge-on: color-mix(in srgb, #40c057 22%, transparent);
  --badge-on-ink: #b2f2bb;
  --badge-offer: #ff6b2c;
  --badge-offer-ink: #1a0a00;
  --badge-related: #38bdf8;
  --badge-related-ink: #082f49;
  --badge-planned: color-mix(in srgb, #94a3b8 22%, transparent);
  --badge-planned-ink: #cbd5e1;
  --badge-presale: color-mix(in srgb, #38bdf8 22%, transparent);
  --badge-presale-ink: #bae6fd;
  --badge-current: var(--badge-on);
  --badge-current-ink: var(--badge-on-ink);
  --badge-sunset: color-mix(in srgb, #eab308 22%, transparent);
  --badge-sunset-ink: #fde68a;
  --badge-end-of-sale: color-mix(in srgb, #fbbf24 22%, transparent);
  --badge-end-of-sale-ink: #fde68a;
  --badge-end-of-support: color-mix(in srgb, #ff8b52 20%, transparent);
  --badge-end-of-support-ink: #fed7aa;
  --badge-internal: var(--badge-off);
  --badge-internal-ink: var(--muted);
  --badge-embargoed: color-mix(in srgb, #fb923c 20%, transparent);
  --badge-embargoed-ink: #fdba74;
  --badge-public: color-mix(in srgb, #38bdf8 22%, transparent);
  --badge-public-ink: #bae6fd;
  --badge-supply-available: var(--badge-on);
  --badge-supply-available-ink: var(--badge-on-ink);
  --badge-supply-constrained: color-mix(in srgb, #fbbf24 22%, transparent);
  --badge-supply-constrained-ink: #fde68a;
  --badge-supply-unavailable: color-mix(in srgb, #94a3b8 22%, transparent);
  --badge-supply-unavailable-ink: #cbd5e1;
  --badge-supply-mixed: color-mix(in srgb, #38bdf8 18%, transparent);
  --badge-supply-mixed-ink: #bae6fd;
  --badge-procurement-available: var(--badge-on);
  --badge-procurement-available-ink: var(--badge-on-ink);
  --badge-procurement-constrained: color-mix(in srgb, #fbbf24 22%, transparent);
  --badge-procurement-constrained-ink: #fde68a;
  --badge-procurement-unavailable: color-mix(in srgb, #fb923c 20%, transparent);
  --badge-procurement-unavailable-ink: #fdba74;
  --on-accent: #ffffff;
  --scrim: rgb(0 0 0 / 0.65);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.35);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f3f4f6;
    --scroll-fade: rgb(0 0 0 / 0.32);
    --scroll-fade-soft: rgb(0 0 0 / 0.12);
    --muted: #9ca3af;
    --line: #323946;
    --paper: #18181b;
    --panel: #232323;
    --control-bg: #1c1c1f;
    --control-hover: #2a2a2e;
    --accent: #2ba3de;
    --accent-hover: #3bb4e8;
    --accent-deep: #9cccf0;
    --accent-dark: #ecf5fd;
    --accent-soft: #1a3344;
    --accent-mid: #345575;
    --nav: #0e0e0e;
    --nav-top: #0e0e0e;
    --nav-ink: #e5e7eb;
    --nav-muted: #9ca3af;
    --nav-active: #273345;
    --warn: #fbbf24;
    --danger: #ff8b52;
    --danger-soft: #3a2420;
    --req: #f87171;
    --badge-off: #2a2a2e;
    --badge-on: color-mix(in srgb, #40c057 22%, transparent);
    --badge-on-ink: #b2f2bb;
    --badge-offer: #ff6b2c;
    --badge-offer-ink: #1a0a00;
    --badge-related: #38bdf8;
    --badge-related-ink: #082f49;
    --badge-planned: color-mix(in srgb, #94a3b8 22%, transparent);
    --badge-planned-ink: #cbd5e1;
    --badge-presale: color-mix(in srgb, #38bdf8 22%, transparent);
    --badge-presale-ink: #bae6fd;
    --badge-current: var(--badge-on);
    --badge-current-ink: var(--badge-on-ink);
    --badge-sunset: color-mix(in srgb, #eab308 22%, transparent);
    --badge-sunset-ink: #fde68a;
    --badge-end-of-sale: color-mix(in srgb, #fbbf24 22%, transparent);
    --badge-end-of-sale-ink: #fde68a;
    --badge-end-of-support: color-mix(in srgb, #ff8b52 20%, transparent);
    --badge-end-of-support-ink: #fed7aa;
    --badge-internal: var(--badge-off);
    --badge-internal-ink: var(--muted);
    --badge-embargoed: color-mix(in srgb, #fb923c 20%, transparent);
    --badge-embargoed-ink: #fdba74;
    --badge-public: color-mix(in srgb, #38bdf8 22%, transparent);
    --badge-public-ink: #bae6fd;
    --badge-supply-available: var(--badge-on);
    --badge-supply-available-ink: var(--badge-on-ink);
    --badge-supply-constrained: color-mix(in srgb, #fbbf24 22%, transparent);
    --badge-supply-constrained-ink: #fde68a;
    --badge-supply-unavailable: color-mix(in srgb, #94a3b8 22%, transparent);
    --badge-supply-unavailable-ink: #cbd5e1;
    --badge-supply-mixed: color-mix(in srgb, #38bdf8 18%, transparent);
    --badge-supply-mixed-ink: #bae6fd;
    --badge-procurement-available: var(--badge-on);
    --badge-procurement-available-ink: var(--badge-on-ink);
    --badge-procurement-constrained: color-mix(in srgb, #fbbf24 22%, transparent);
    --badge-procurement-constrained-ink: #fde68a;
    --badge-procurement-unavailable: color-mix(in srgb, #fb923c 20%, transparent);
    --badge-procurement-unavailable-ink: #fdba74;
    --on-accent: #ffffff;
    --scrim: rgb(0 0 0 / 0.65);
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.35);
  }
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Brief surface ease on theme toggle. Skip color/fill — animating ink on
   every node causes a visible text snap when the temporary class drops. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  background: var(--paper);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

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

/* ── Shell (Nexus AdminLayout: topbar + sidebar) ─────────────────────── */

.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

/* Narrow viewport gate when DTPF_MOBILE_UI is off (no data-mobile-ui on <html>). */
.desktop-only-gate {
  display: none;
}

@media (max-width: 899px) {
  html:not([data-mobile-ui]) .shell,
  html:not([data-mobile-ui]) .env-ribbon {
    display: none !important;
  }

  html:not([data-mobile-ui]) .desktop-only-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem;
    background: var(--paper);
    color: var(--ink);
  }

  html:not([data-mobile-ui]) .desktop-only-gate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 22rem;
    text-align: center;
  }

  html:not([data-mobile-ui]) .desktop-only-gate-mark {
    display: block;
    margin-bottom: 0.85rem;
  }

  html:not([data-mobile-ui]) .desktop-only-gate-brand {
    margin: 0 0 1.25rem;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-dark);
  }

  html:not([data-mobile-ui]) .desktop-only-gate-title {
    margin: 0 0 0.5rem;
    font-family: var(--sans);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
  }

  html:not([data-mobile-ui]) .desktop-only-gate-copy {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--muted);
  }
}

html[data-theme="dark"] .desktop-only-gate-brand {
  color: var(--accent-mid);
}

/* Fixed corner ribbon — out of flow so it never shrinks the shell. */
.env-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 55;
  width: 8.5rem;
  height: 8.5rem;
  overflow: hidden;
  pointer-events: none;
}

.env-ribbon > span {
  position: absolute;
  top: 1.65rem;
  left: -2.6rem;
  width: 12rem;
  padding: 0.4rem 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

.env-ribbon--dev > span {
  background: rgb(245 158 11 / 0.55);
  color: #1a1200;
}

.env-ribbon--staging > span {
  background: rgb(14 165 233 / 0.55);
  color: #041018;
}

html[data-theme="dark"] .env-ribbon--dev > span {
  background: rgb(251 191 36 / 0.45);
  color: #fff8e7;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}

html[data-theme="dark"] .env-ribbon--staging > span {
  background: rgb(56 189 248 / 0.45);
  color: #e8f7ff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  height: 4rem;
  min-height: 4rem;
  padding: 0 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}

@media (min-width: 640px) {
  .topbar {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .topbar {
    padding: 0 2rem;
  }
}

.shell-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}

.nav {
  z-index: 40;
  display: none;
  flex-direction: column;
  padding: 0 0 1.25rem;
  background: var(--nav);
  color: var(--nav-ink);
  border-bottom: 1px solid color-mix(in srgb, #fff 8%, transparent);
}

html[data-nav-open] .shell-body > .nav-shell > .nav {
  display: flex;
}

.nav-shell {
  display: none;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

html[data-nav-open] .shell-body > .nav-shell {
  display: flex;
}

.global-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 28rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.global-search-field {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.global-search-icon {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.global-search-icon svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

.global-search-spinner {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  z-index: 1;
  display: none;
  box-sizing: border-box;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  transform: translateY(-50%);
  animation: global-search-spin 0.7s linear infinite;
}

.global-search.is-finding .global-search-icon {
  visibility: hidden;
}

.global-search.is-finding .global-search-spinner {
  display: block;
}

@keyframes global-search-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.global-search input[type="search"] {
  width: 100%;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0.35rem 0.75rem 0.35rem 2.35rem;
  margin: 0;
}

.nav-top-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: auto;
}

button.theme-toggle:not(.row-menu-item) {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  min-width: var(--icon-btn-size);
  min-height: var(--icon-btn-size);
  max-width: var(--icon-btn-size);
  max-height: var(--icon-btn-size);
  margin: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 0;
  line-height: 0;
  font-weight: 400;
  box-shadow: none;
  cursor: pointer;
}

button.theme-toggle:not(.row-menu-item):hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--line);
}

button.theme-toggle:not(.row-menu-item):active {
  background: var(--control-hover);
  color: var(--muted);
}

button.theme-toggle:not(.row-menu-item) svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

/* Visibility must beat any svg sizing rules on the login icon button. */
.theme-toggle .icon-moon {
  display: block;
}

.theme-toggle .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: none;
  }

  html:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: block;
  }
}

button.row-menu-item.theme-toggle .icon-sun,
button.row-menu-item.theme-toggle .icon-moon {
  width: 0.95rem;
  height: 0.95rem;
}

button.row-menu-item.theme-toggle .theme-toggle-label {
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  flex: 0 0 auto;
  height: 1.75rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
}

html[data-theme="dark"] .brand-mark {
  filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .brand-mark {
    filter: brightness(0) invert(1);
  }
}

.brand-divider {
  color: var(--line);
  font-weight: 300;
  user-select: none;
  display: none;
}

.brand-name {
  display: none;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--accent);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .brand-divider,
  .brand-name {
    display: inline;
  }
}

button.nav-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  min-width: var(--icon-btn-size);
  min-height: var(--icon-btn-size);
  max-width: var(--icon-btn-size);
  max-height: var(--icon-btn-size);
  margin: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--ink);
  font-size: 0;
  line-height: 0;
  font-weight: 400;
  box-shadow: none;
  cursor: pointer;
}

button.nav-toggle:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--line);
}

button.nav-toggle:active {
  background: var(--control-hover);
  color: var(--ink);
}

button.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Rail control is desktop-only; mobile uses the topbar hamburger. */
button.nav-toggle-rail {
  display: none;
}

.nav-head {
  display: none;
}

.nav-toggle-panel {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

html[data-nav-open] .topbar .nav-toggle-bars {
  background: transparent;
}

html[data-nav-open] .topbar .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

html[data-nav-open] .topbar .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem 0;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-section + .nav-section {
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, #fff 10%, transparent);
}

.nav-section-links {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-section-fold.is-open > .nav-section-links {
  display: flex;
}

.nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0.2rem 0.75rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--nav-muted) 78%, transparent);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  min-height: 0;
  cursor: pointer;
  text-align: left;
}

.nav-section-toggle:hover {
  background: transparent;
  color: #d1d5db;
}

.nav-section-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, #fff 35%, transparent);
  outline-offset: 1px;
}

.nav-section-toggle .nav-label {
  flex: 1 1 auto;
}

.nav-section-chevron {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.nav-section-fold.is-open > .nav-section-toggle .nav-section-chevron {
  transform: rotate(180deg);
}

.nav-section-fold.is-open > .nav-section-toggle {
  color: #e5e7eb;
}

.nav nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  color: var(--nav-muted);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  min-height: var(--touch);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-icon {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  opacity: 0.9;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav nav a:hover {
  background: color-mix(in srgb, #fff 6%, transparent);
  color: #f3f4f6;
  text-decoration: none;
}

.nav nav a[aria-current="page"] {
  background: var(--nav-active);
  color: #fff;
  box-shadow: none;
  text-decoration: none;
}

.nav-user {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}

.nav-user-toggle {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  max-width: 12rem;
  min-height: var(--icon-btn-size);
  margin: 0;
  padding: 0.2rem 0.35rem 0.2rem 0.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-user-toggle:hover,
.nav-user-toggle:focus-visible,
.nav-user.is-open .nav-user-toggle {
  background: var(--control-hover);
  color: var(--ink);
  border-color: var(--line);
  outline: none;
}

.nav-user-toggle:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--accent-dark, var(--accent));
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

/* Shared initial avatars (wiki contributors, etc.) */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 28%, var(--panel));
  color: var(--accent-dark, var(--accent));
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: default;
}

.user-avatar-stack {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.user-avatar-stack > [role="listitem"] {
  display: inline-flex;
}

.user-avatar-stack > [role="listitem"] + [role="listitem"] {
  margin-left: -0.35rem;
}

.user-avatar-stack .user-avatar {
  border: 1.5px solid var(--panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}

.user-avatar-stack > [role="listitem"]:hover .user-avatar,
.user-avatar-stack > [role="listitem"]:focus-within .user-avatar {
  position: relative;
  z-index: 1;
}

.nav-user-name {
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-chevron {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.05rem;
  flex: 0 0 auto;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.nav-user.is-open .nav-user-chevron {
  transform: rotate(180deg);
}

.nav-user-panel.row-menu-panel {
  top: calc(100% + 0.35rem);
  right: 0;
  bottom: auto;
  left: auto;
  min-width: 11rem;
  z-index: 60;
}

.nav-user-role {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.55rem 0.5rem;
}

.nav-user-role .badge {
  width: fit-content;
  padding: 0.12rem 0.45rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-dark);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 639px) {
  .nav-user-name,
  .nav-user-chevron {
    display: none;
  }

  .nav-user-toggle {
    max-width: none;
    padding: 0.15rem;
    min-width: var(--touch);
    min-height: var(--touch);
    justify-content: center;
  }
}

.nav-user-panel .nav-meta {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.15rem;
  margin: 0.2rem 0 0;
  padding: 0.45rem 0.55rem 0.35rem;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
}

.nav-user-panel .nav-rev {
  opacity: 0.85;
}

/* ── Main content ────────────────────────────────────────────────────── */

.main {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space) var(--space);
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  background: var(--paper);
}

.page {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-head {
  position: sticky;
  top: 0;
  /* Above in-document sticky chrome (.wiki-doc-chrome) so breadcrumbs stay clear. */
  z-index: 30;
  margin: 0 0 1.25rem;
  padding: var(--space) 0 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  /* Margin below sticky heads is unpainted — solid shadow fills that band so
     scrolled body content cannot show through the gap. */
  box-shadow: 0 1.25rem 0 0 var(--paper);
  flex-shrink: 0;
}

/* Document pages render the title in-content — collapse empty chrome.
   Keep an opaque background: this header is sticky, so transparent lets
   scrolled body content show above the in-document title. */
.page.is-document .page-head {
  margin: 0;
  padding: 0;
  border-bottom: none;
  background: var(--paper);
  box-shadow: none;
}

.page.is-document .page-head:has(.callout),
.page.is-document .page-head:has(.breadcrumb:not([hidden])) {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0 0.65rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 0.85rem 0 0 var(--paper);
}

.page.is-document .page-head .breadcrumb:not([hidden]) {
  margin-bottom: 0;
}

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

/* List pages: table fills remaining viewport; rows scroll inside the panel. */
.page:has(> .page-body > .panel.data-table),
.page:has(> .page-body > .js-view-mode) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page:has(> .page-body > .panel.data-table) .page-head,
.page:has(> .page-body > .js-view-mode) .page-head {
  position: static;
  /* Match .data-table-chrome vertical padding so air above/below the bar matches. */
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
  /* Sticky heads use a tall paper box-shadow to seal their margin; with static
     position that shadow paints over the table chrome and clips its top. */
  box-shadow: none;
}

.page:has(> .page-body > .panel.data-table) .page-body,
.page:has(> .page-body > .js-view-mode) .page-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.page:has(> .page-body > .js-view-mode) .page-body > .js-view-mode {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page:has(> .page-body > .js-view-mode) .view-panel[data-view] {
  flex: 1 1 0;
  min-height: 0;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="list"] > .view-panel[data-view="list"],
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tiles"] > .view-panel[data-view="tiles"],
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tree"] > .view-panel[data-view="tree"] {
  display: flex;
}

.page:has(> .page-body > .panel.data-table) .page-body > .data-table-filter,
.page:has(> .page-body > .panel.data-table) .page-body > .data-table-filter-form-desktop,
.page:has(> .page-body > .panel.data-table) .page-body > .page-callouts,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="list"] > .view-panel[data-view="list"] > .data-table-filter,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="list"] > .view-panel[data-view="list"] > .data-table-filter-form-desktop,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="list"] > .view-panel[data-view="list"] > .page-callouts,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tiles"] > .view-panel[data-view="tiles"] > .data-table-filter,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tiles"] > .view-panel[data-view="tiles"] > .data-table-filter-form-desktop,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tiles"] > .view-panel[data-view="tiles"] > .page-callouts,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tree"] > .view-panel[data-view="tree"] > .data-table-filter,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tree"] > .view-panel[data-view="tree"] > .data-table-filter-form-desktop,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tree"] > .view-panel[data-view="tree"] > .page-callouts {
  flex-shrink: 0;
}

.page:has(> .page-body > .panel.data-table) .page-body > .panel.data-table,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="list"] > .view-panel[data-view="list"] > .panel.data-table,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="list"] > .view-panel[data-view="list"] > .panel.tree-browser,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tiles"] > .view-panel[data-view="tiles"] > .panel.data-table,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tiles"] > .view-panel[data-view="tiles"] > .panel.tree-browser,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tree"] > .view-panel[data-view="tree"] > .panel.data-table,
.page:has(> .page-body > .js-view-mode) .js-view-mode[data-active-view="tree"] > .view-panel[data-view="tree"] > .panel.tree-browser {
  /* Always fill the viewer — don't shrink when the page has few rows
     (keeps the scrollbar gutter from shifting column widths). */
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page:has(> .page-body > .panel.data-table) .data-table-chrome,
.page:has(> .page-body > .panel.data-table) .data-table-mobile-toolbar,
.page:has(> .page-body > .js-view-mode) .data-table-chrome,
.page:has(> .page-body > .js-view-mode) .data-table-mobile-toolbar {
  flex-shrink: 0;
}

.page:has(> .page-body > .panel.data-table) .data-table-body,
.page:has(> .page-body > .js-view-mode) .data-table-body {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
  scrollbar-gutter: stable;
}

.page-title-row {
  display: block;
  width: 100%;
}

.page-title-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  min-width: 0;
  width: 100%;
}

.page-title-text {
  min-width: 0;
  flex: 1 1 auto;
}

.page-title-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.page-title-heading .eyebrow {
  margin: 0 0 0.35rem;
}

.page-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}

.page-title-copy h1,
.page-title-text h1,
.page-title-row h1,
.page-title-line h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  min-width: 0;
}

/* In-place record title/name while creating or editing (page_frame title_field). */
.page-title-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  min-width: 0;
  field-sizing: content;
}

.page-title-input::placeholder {
  color: var(--muted);
  font-weight: 600;
}

.page-title-input:focus,
.page-title-input:focus-visible {
  outline: none;
}

.page-title-copy .meta,
.page-title-text .meta,
.page-head .meta {
  margin: 0.35rem 0 0;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Primary “Add …” labels match neighboring page-action icon buttons. */
.page-actions > a.button,
.page-actions > button.button {
  min-height: var(--icon-btn-size);
  height: var(--icon-btn-size);
  padding: 0 0.75rem;
  box-sizing: border-box;
}

.page-actions .page-menu .row-menu-toggle {
  opacity: 1;
}

.page-title-filter {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 0.35rem;
}

.page-title-filter-label {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  width: auto;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.page-title-filter input[type="date"] {
  width: auto;
  min-width: 11rem;
  max-width: 13rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
}

.eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

h1 {
  margin: 0 0 0.85rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  word-break: break-word;
  color: var(--ink);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0 0 0.45rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--muted);
}

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

.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.breadcrumb-back-arrow {
  font-size: 0.95em;
  line-height: 1;
}

@media (max-width: 899px) {
  .topbar:has(.mobile-back-nav:not([hidden])) {
    gap: 0.5rem;
  }

  .topbar:has(.mobile-back-nav:not([hidden])) .global-search {
    display: none;
  }

  .mobile-back-nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .mobile-back-nav[hidden],
  .page-head > .breadcrumb[hidden] {
    display: none;
  }

  .page-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    margin: 0 0 0.65rem;
    padding: 0.4rem 0 0.5rem;
  }

  .page:has(> .page-body > .panel.data-table) .page-head,
  .page:has(> .page-body > .js-view-mode) .page-head {
    margin-bottom: 0.45rem;
    box-shadow: none;
  }

  .page-head > .breadcrumb {
    grid-column: 1;
    justify-self: start;
    margin: 0;
    min-width: 0;
  }

  .page-head > .page-title-row,
  .page-head > .error {
    grid-column: 1 / -1;
  }

  .page-title-copy .meta,
  .page-title-text .meta,
  .page-head .meta {
    margin-top: 0.15rem;
  }

  /* Title wraps in the remaining width; actions stay on the right, flush
     with the bottom of the meta line. */
  .page-title-copy {
    flex-wrap: nowrap;
    align-items: flex-end;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
  }

  .page-title-text {
    flex: 1 1 0;
    min-width: 0;
  }

  .page-title-heading,
  .page-title-text h1 {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .page-actions {
    flex: 0 0 auto;
    align-self: flex-end;
  }

  .breadcrumb {
    margin: 0;
    font-size: 0.875rem;
  }

  .breadcrumb-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--touch);
    height: var(--touch);
    min-width: var(--touch);
    min-height: var(--touch);
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--control-bg);
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
  }

  .breadcrumb-back:hover {
    background: var(--accent-soft);
    color: var(--accent);
    text-decoration: none;
  }

  .breadcrumb-back-icon,
  .breadcrumb-back-arrow {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1;
  }
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

.breadcrumb-sep {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  user-select: none;
}

.page.is-editing .page-head .eyebrow {
  color: var(--accent);
}

.page-head .error {
  margin: 0.65rem 0 0;
}

.page-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
  margin: 0 0 1rem;
}

.page-body > .filters.panel {
  margin-bottom: 1rem;
}

/* Edit forms reuse .filters for shared input styles, but must not inherit
   the filter-bar's flex-grow labels (that stretches fields apart vertically). */
.form-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0;
}

.user-password-actions {
  max-width: 24rem;
}

.user-password-actions form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0;
}

.user-password-actions .meta {
  margin: 0 0 0.15rem;
}

.form-panel label {
  width: 100%;
  flex: 0 0 auto;
}

.form-panel label.checkbox {
  padding-bottom: 0;
}

.req {
  color: var(--req);
  font-weight: 600;
}

/* Labels are flex-column; a bare .req sibling would sit on its own row.
   Place the marker beside the caption text instead. */
label:has(> .req) {
  display: grid;
  grid-template-columns: max-content max-content max-content 1fr;
  column-gap: 0.15em;
  row-gap: 0.25rem;
  align-items: baseline;
}

label:has(> .req) > .req {
  grid-column: 2;
  grid-row: 1;
}

label:has(> .field-help):not(.checkbox) > .field-help {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}

label:has(> .req) > *:not(.req):not(.field-help) {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

/* Same caption+help layout when the field is optional (no .req).
   Skip .checkbox — those stay flex-row (input + label + ?). */
label:has(> .field-help):not(:has(> .req)):not(.checkbox) {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  column-gap: 0.15em;
  row-gap: 0.25rem;
  align-items: baseline;
}

label:has(> .field-help):not(:has(> .req)):not(.checkbox) > .field-help {
  grid-column: 2;
  grid-row: 1;
}

label:has(> .field-help):not(:has(> .req)):not(.checkbox) > *:not(.field-help) {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.field-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
}

.field-help:hover,
.field-help:focus {
  color: var(--fg);
  border-color: var(--muted);
  outline: none;
}

th .req {
  font-weight: 600;
}

.meta {
  margin: -0.35rem 0 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.field-with-action {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
}

.field-with-action > select,
.field-with-action > input:not([type="hidden"]) {
  flex: 1 1 auto;
  min-width: 0;
}

.field-with-action > .icon-btn {
  flex: 0 0 auto;
}

#sku-product-field > .meta {
  margin: 0.35rem 0 0;
}

.section-note {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.88rem;
}

label.inline-date {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
}

label.inline-date input[type="date"] {
  font: inherit;
}

.notice {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
}

.notice p {
  margin: 0.35rem 0;
}

/* Zero-footprint wrapper: children lay out as if directly in the page body. */
.page-callouts {
  display: contents;
}

.callout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
}

.callout strong {
  font-weight: 600;
}

.callout-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 1.9rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.callout-action:focus-visible {
  outline: 2px solid var(--warn);
  outline-offset: 2px;
}

.callout-warn {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  color: var(--ink);
}

/* Action button adopts the callout's own colour scheme. */
.callout-warn .callout-action {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 18%, var(--panel));
  color: color-mix(in srgb, var(--warn) 72%, var(--ink));
}

.callout-warn .callout-action:hover {
  background: color-mix(in srgb, var(--warn) 28%, var(--panel));
  border-color: color-mix(in srgb, var(--warn) 60%, var(--line));
}

.callout-warn .callout-action:active {
  background: color-mix(in srgb, var(--warn) 36%, var(--panel));
}

.page-head .meta {
  margin: 0.35rem 0 0;
}

.panel {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.filters > button,
.filters > .button {
  width: 100%;
  min-height: var(--touch);
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  width: 100%;
}

/* Flex/grid display beats the UA [hidden] rule — restore hide for typed fields.
   Must also beat label:has(> .req|.field-help) { display: grid }. */
label[hidden],
label[hidden]:has(> .req),
label[hidden]:has(> .field-help),
label[hidden]:has(> .req):has(> .field-help) {
  display: none !important;
}

/* Same for icon actions toggled with .hidden outside a hidden label. */
button.icon-btn[hidden],
a.icon-btn[hidden] {
  display: none !important;
}

.allow-flag-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.allow-flag-editor .checkbox {
  width: auto;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}

/* Slightly larger mask discs than the shared control text size. */
input[type="password"] {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--control-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.95rem;
  padding-right: 2.35rem;
}

html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
}

.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.45rem;
}

button:not(.icon-btn):not(.theme-toggle):not(.nav-toggle):not(.nav-user-toggle):not(.nav-section-toggle):not(.multiselect-trigger):not(.multiselect-chip-remove):not(.keyword-chip-remove):not(.tab):not(.row-menu-item):not(.callout-action):not(.sheet-backdrop):not(.select-sheet-option):not(.bundle-add):not(.bundle-row-dismiss):not(.table-add):not(.view-toggle-btn):not(.tile-main):not(.tree-toggle):not(.tree-chrome-btn):not(.tree-name):not(.login-user-btn):not(.col-vis-show-all):not(.col-vis-reset-widths):not(.wiki-editor-btn):not(.wiki-drag-delete):not(.wiki-block-picker-item):not(.wiki-color-swatch):not(.wiki-table-btn):not(.wiki-table-handle-btn):not(.wiki-table-bar):not(.wiki-table-border-toggle):not(.wiki-table-border-weight):not(.wiki-table-border-style):not(.wiki-table-border-preset):not(.wiki-add-block):not(.wiki-callout-type-btn):not(.brand-coding-token-add):not(.brand-coding-chip-remove),
.button:not(.table-add) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--touch);
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

button:not(.icon-btn):not(.theme-toggle):not(.nav-toggle):not(.nav-user-toggle):not(.nav-section-toggle):not(.multiselect-trigger):not(.multiselect-chip-remove):not(.keyword-chip-remove):not(.tab):not(.row-menu-item):not(.callout-action):not(.sheet-backdrop):not(.select-sheet-option):not(.bundle-add):not(.bundle-row-dismiss):not(.table-add):not(.view-toggle-btn):not(.tile-main):not(.tree-toggle):not(.tree-chrome-btn):not(.tree-name):not(.login-user-btn):not(.col-vis-show-all):not(.col-vis-reset-widths):not(.wiki-editor-btn):not(.wiki-drag-delete):not(.wiki-block-picker-item):not(.wiki-color-swatch):not(.wiki-table-btn):not(.wiki-table-handle-btn):not(.wiki-table-bar):not(.wiki-table-border-toggle):not(.wiki-table-border-weight):not(.wiki-table-border-style):not(.wiki-table-border-preset):not(.wiki-add-block):not(.wiki-callout-type-btn):not(.brand-coding-token-add):not(.brand-coding-chip-remove):hover,
.button:not(.table-add):hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  text-decoration: none;
}

button:not(.icon-btn):not(.theme-toggle):not(.nav-toggle):not(.nav-user-toggle):not(.nav-section-toggle):not(.multiselect-trigger):not(.multiselect-chip-remove):not(.keyword-chip-remove):not(.tab):not(.row-menu-item):not(.callout-action):not(.sheet-backdrop):not(.select-sheet-option):not(.bundle-add):not(.bundle-row-dismiss):not(.table-add):not(.view-toggle-btn):not(.tile-main):not(.tree-toggle):not(.tree-chrome-btn):not(.tree-name):not(.login-user-btn):not(.col-vis-show-all):not(.col-vis-reset-widths):not(.wiki-editor-btn):not(.wiki-drag-delete):not(.wiki-block-picker-item):not(.wiki-color-swatch):not(.wiki-table-btn):not(.wiki-table-handle-btn):not(.wiki-table-bar):not(.wiki-table-border-toggle):not(.wiki-table-border-weight):not(.wiki-table-border-style):not(.wiki-table-border-preset):not(.wiki-add-block):not(.wiki-callout-type-btn):not(.brand-coding-token-add):not(.brand-coding-chip-remove):active,
.button:not(.table-add):active {
  background: var(--accent-deep);
}

button:not(.icon-btn):not(.theme-toggle):not(.nav-toggle):not(.nav-user-toggle):not(.nav-section-toggle):not(.multiselect-trigger):not(.multiselect-chip-remove):not(.keyword-chip-remove):not(.tab):not(.row-menu-item):not(.callout-action):not(.sheet-backdrop):not(.select-sheet-option):not(.bundle-add):not(.bundle-row-dismiss):not(.table-add):not(.view-toggle-btn):not(.tile-main):not(.tree-toggle):not(.tree-chrome-btn):not(.tree-name):not(.login-user-btn):not(.col-vis-show-all):not(.col-vis-reset-widths):not(.wiki-editor-btn):not(.wiki-drag-delete):not(.wiki-block-picker-item):not(.wiki-color-swatch):not(.wiki-table-btn):not(.wiki-table-handle-btn):not(.wiki-table-bar):not(.wiki-table-border-toggle):not(.wiki-table-border-weight):not(.wiki-table-border-style):not(.wiki-table-border-preset):not(.wiki-add-block):not(.wiki-callout-type-btn):not(.brand-coding-token-add):not(.brand-coding-chip-remove):focus-visible,
.button:not(.table-add):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button.secondary:not(.icon-btn):not(.row-menu-item),
.button.secondary {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

button.secondary:not(.icon-btn):not(.row-menu-item):hover,
.button.secondary:hover {
  background: var(--control-hover);
  color: var(--ink);
}

button.danger:not(.icon-btn):not(.row-menu-item),
.button.danger {
  background: var(--danger);
  color: #fff;
}

.icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.icon-action-form {
  display: inline-flex;
  margin: 0;
}

.row-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

button.icon-btn.row-menu-toggle {
  display: inline-flex;
  opacity: 0.55;
}

button.icon-btn.row-menu-toggle:hover,
button.icon-btn.row-menu-toggle:focus-visible,
.row-menu.is-open button.icon-btn.row-menu-toggle {
  opacity: 1;
}

tr:hover button.icon-btn.row-menu-toggle,
tr:focus-within button.icon-btn.row-menu-toggle {
  opacity: 0.9;
}

.row-menu-panel {
  display: none;
  position: absolute;
  right: 0;
  top: auto;
  bottom: calc(100% + 0.25rem);
  z-index: 30;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 10.5rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card), 0 10px 24px rgb(15 23 42 / 0.14);
}

.page-menu .row-menu-panel {
  top: calc(100% + 0.25rem);
  bottom: auto;
}

.row-menu.is-open .row-menu-panel {
  display: flex;
}

.row-menu-panel.is-fixed {
  position: fixed;
  right: auto;
  bottom: auto;
  top: auto;
  /* Percentage min-widths would resolve against the viewport once fixed. */
  min-width: 0;
  transform: none;
  z-index: 80;
}

.row-menu-form {
  display: block;
  width: 100%;
  margin: 0;
}

.row-menu-item,
a.row-menu-item,
button.row-menu-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  max-height: none;
  min-height: 2rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  gap: 0.5rem;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.row-menu-item:hover,
a.row-menu-item:hover,
button.row-menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.row-menu-item.danger,
button.row-menu-item.danger {
  background: transparent;
  color: var(--danger);
}

.row-menu-item.danger:hover,
button.row-menu-item.danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.row-menu-item svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
}

.row-menu-label {
  display: inline;
}

/* Created on demand for mobile action sheets; stay hidden on desktop. */
.sheet-backdrop,
.sheet-drag-handle,
.select-sheet {
  display: none;
}

/* Long-press reveal for truncated cells / chips (mobile).
   Inverted surface so it stays readable on both themes. */
.overflow-tip {
  position: fixed;
  z-index: 90;
  box-sizing: border-box;
  max-width: min(22rem, calc(100vw - 1.5rem));
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--panel) 22%, transparent);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--panel);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: var(--shadow-card), 0 10px 28px rgb(15 23 42 / 0.2);
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
  -webkit-tap-highlight-color: transparent;
}

html[data-theme="dark"] .overflow-tip {
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
  box-shadow: var(--shadow-card), 0 12px 32px rgb(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .overflow-tip {
    border-color: color-mix(in srgb, var(--paper) 55%, transparent);
    box-shadow: var(--shadow-card), 0 12px 32px rgb(0 0 0 / 0.55);
  }
}

.overflow-tip[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .overflow-tip:not([hidden]) {
    animation: overflow-tip-in 0.14s ease-out;
  }
}

@keyframes overflow-tip-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

a.icon-btn,
button.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  min-width: var(--icon-btn-size);
  min-height: var(--icon-btn-size);
  max-width: var(--icon-btn-size);
  max-height: var(--icon-btn-size);
  margin: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0;
  font-weight: 400;
  line-height: 0;
  box-shadow: none;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a.icon-btn:hover,
button.icon-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}

a.icon-btn:active,
button.icon-btn:active {
  background: var(--control-hover);
  color: var(--ink);
}

a.icon-btn:focus-visible,
button.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button.icon-btn.danger {
  background: var(--control-bg);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}

button.icon-btn.danger:hover,
button.icon-btn.danger:active {
  background: var(--danger-soft);
  color: var(--danger);
}

button.icon-btn.accent,
a.icon-btn.accent {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

button.icon-btn.accent:hover,
a.icon-btn.accent:hover,
button.icon-btn.accent:active,
a.icon-btn.accent:active {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  color: var(--on-accent);
}

.icon-btn svg {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.panel.data-table {
  padding: 0;
  overflow: visible;
}

.data-table-chrome {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  transition: background-color 0.15s ease;
  min-height: 2.45rem;
  box-sizing: border-box;
}

/* `display: flex` beats the UA [hidden] rule. */
.data-table-chrome.js-bom-meta[hidden],
.js-bom-meta .js-bom-current-meta[hidden],
.js-bom-meta .callout[hidden] {
  display: none !important;
}

.data-table-chrome.js-bom-meta:has(.callout:not([hidden])) {
  padding: 0.45rem 0.65rem;
  background: transparent;
  border-bottom-color: transparent;
}

.data-table-chrome .callout {
  flex: 1 1 auto;
  margin: 0;
}

.data-table-chrome:has(.data-table-bulk:not(.is-idle)) {
  background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft));
}

.data-table-chrome .list-count {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.data-table-chrome .list-count strong {
  color: var(--ink);
  font-weight: 600;
}

.data-table-chrome-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.data-table-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.15s ease;
}

.data-table-bulk.is-idle {
  opacity: 0.72;
}

.data-table-bulk .bulk-count {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.data-table-bulk .bulk-count strong {
  color: var(--ink);
  font-weight: 600;
}

.data-table-bulk select {
  width: auto;
  min-width: 6.5rem;
  max-width: 10rem;
  min-height: 1.75rem;
  padding: 0.15rem 1.65rem 0.15rem 0.4rem;
  font-size: 0.8125rem;
  background-position: right 0.4rem center;
  background-size: 0.8rem;
}

.data-table-bulk select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.data-table-chrome-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex: 0 0 auto;
}

.chrome-col-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: 0.15rem;
}

/* Match Show inactive muted chrome tone (not the boxed accent icon-btn). */
.chrome-col-tools .icon-btn,
button.icon-btn.chrome-tool-btn {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  max-width: 1.75rem;
  max-height: 1.75rem;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.chrome-col-tools .icon-btn:hover,
.chrome-col-tools .col-vis-menu.is-open .js-col-vis-toggle,
button.icon-btn.chrome-tool-btn:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}

.chrome-col-tools .icon-btn:active,
button.icon-btn.chrome-tool-btn:active {
  background: transparent;
  color: var(--ink);
}

.col-vis-menu {
  position: relative;
}

.col-vis-panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 12rem;
  max-width: 16rem;
  max-height: min(20rem, 70vh);
  overflow: auto;
  padding: 0.35rem;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

/* Fixed escape when a clipping ancestor would crop the absolute panel. */
.col-vis-panel.is-fixed {
  position: fixed;
  right: auto;
  bottom: auto;
  top: auto;
  z-index: 80;
}

.col-vis-panel[hidden] {
  display: none !important;
}

/* Beat global label { flex-direction: column; width: 100% }. */
label.col-vis-option {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  position: relative;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border-radius: calc(var(--radius) - 2px);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
}

label.col-vis-option:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

label.col-vis-option.is-selected {
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

label.col-vis-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

label.col-vis-option.is-disabled:hover {
  background: transparent;
  color: var(--ink);
}

label.col-vis-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.col-vis-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: var(--control-bg);
  color: transparent;
  font-size: 0.7rem;
  line-height: 1;
}

label.col-vis-option.is-selected .col-vis-check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

label.col-vis-option.is-selected .col-vis-check::before {
  content: "✓";
}

.col-vis-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.col-vis-show-all,
.col-vis-reset-widths {
  display: block;
  width: 100%;
  margin: 0.2rem 0 0;
  padding: 0.4rem 0.45rem;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.col-vis-show-all:hover:not(:disabled),
.col-vis-reset-widths:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--line) 40%, transparent);
}

.col-vis-show-all:disabled {
  opacity: 0.4;
  cursor: default;
}

.col-vis-reset-widths {
  margin-top: 0;
}

.col-vis-empty {
  margin: 0;
  padding: 0.45rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

label.chrome-toggle {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

label.chrome-toggle:hover {
  color: var(--ink);
}

label.chrome-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

label.chrome-toggle .chrome-toggle-ui {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--line);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: background-color 0.15s ease;
}

label.chrome-toggle .chrome-toggle-ui::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
  transition: transform 0.15s ease;
}

label.chrome-toggle input[type="checkbox"]:checked + .chrome-toggle-ui {
  background: var(--accent);
  box-shadow: none;
}

label.chrome-toggle input[type="checkbox"]:checked + .chrome-toggle-ui::after {
  transform: translateX(0.75rem);
}

label.chrome-toggle input[type="checkbox"]:focus-visible + .chrome-toggle-ui {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

label.chrome-toggle .chrome-toggle-label {
  min-width: 0;
}

.chrome-static {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.chrome-static .chrome-static-label {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.chrome-static .chrome-static-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

label.chrome-date {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

label.chrome-date .chrome-date-label {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

label.chrome-date input[type="date"] {
  width: auto;
  min-width: 11rem;
  max-width: 13rem;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.15rem 0.4rem;
  font-size: 0.8125rem;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
}

label.chrome-select {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.chrome-saved-filters {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

label.chrome-select .chrome-select-label {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

label.chrome-select select {
  /* Size to the longest common option (e.g. Educational) so switching
     Standard/Educational does not reflow chrome height. */
  width: 9.75rem;
  min-width: 9.75rem;
  max-width: 12rem;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.15rem 1.6rem 0.15rem 0.4rem;
  font-size: 0.8125rem;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
}

.pager.data-table-pager {
  margin: 0;
  gap: 0.45rem;
  font-size: 0.8125rem;
  min-height: 1.75rem;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
}

/* Desktop: compact text Prev/Next. Mobile swaps icons via ::before. */
.pager.data-table-pager .pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 1.75rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

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

.pager.data-table-pager .pager-status {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.pager.data-table-pager .pager-slot {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

th.col-select,
td.col-select {
  position: relative;
  width: 2.5rem;
  text-align: center;
  vertical-align: middle;
}

/* Full-cell hit target for row/select-all checkboxes. */
label.col-select-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

/* In-flow size so the cell keeps a checkbox-sized content box (absolute label
   alone would collapse when it is the tallest cell in the row). */
th.col-select:has(> label.col-select-hit)::after,
td.col-select:has(> label.col-select-hit)::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

th.col-select input[type="checkbox"],
td.col-select input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

td.col-select input[type="checkbox"]:disabled,
td.col-select input.js-row-select-locked,
label.col-select-hit:has(input:disabled),
label.col-select-hit:has(input.js-row-select-locked) {
  cursor: not-allowed;
}

td.col-select input[type="checkbox"]:disabled,
td.col-select input.js-row-select-locked {
  opacity: 0.45;
}

tr.is-selected {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

.data-table-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.65rem;
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.data-table-filter-mobile {
  display: none;
}

.data-table-filter-summary {
  display: none;
}

.data-table-mobile-toolbar {
  display: none;
}

.data-table-filter label {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}

.data-table-filter label.grow {
  flex: 1 1 12rem;
}

.data-table-filter label.checkbox {
  flex: 0 0 auto;
  padding-bottom: 0.55rem;
  white-space: nowrap;
}

.data-table-filter input[type="search"],
.data-table-filter input[type="text"] {
  width: 100%;
  min-width: 0;
}

.data-table-filter-form-desktop {
  display: none;
}

.col-filters {
  display: none;
}

.col-filters th {
  padding: 0.4rem 0.5rem;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-family: var(--sans);
  color: var(--ink);
  vertical-align: middle;
  background: color-mix(in srgb, var(--nav-active) 4%, var(--panel));
}

.data-table-grid tr.col-filters th,
.data-table-grid tr.col-filters th.slug,
.data-table-grid tr.col-filters th.code {
  font-family: var(--sans);
  font-size: 0.85rem;
}

.col-filter-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.combobox {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
}

.combobox input {
  width: 100%;
}

.combobox-list {
  /* Fixed painted shell; option text scrolls in .combobox-list-scroll. */
  margin: 0;
  padding: 0;
  max-height: min(16rem, 50vh);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  /* filter (not box-shadow) so overflow:hidden can clip rows to the radius. */
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.06))
    drop-shadow(0 10px 22px rgb(15 23 42 / 0.14));
  color: var(--ink);
  z-index: 80;
}

.combobox-list-scroll {
  max-height: inherit;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0;
  background: transparent;
}

.combobox-option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combobox-option.is-active,
.combobox-option:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.col-filters input,
.col-filters select {
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.45rem;
  font-size: 0.85rem;
}

/* Avoid WebKit search-field chrome scrolling inside narrow sticky columns. */
.col-filters input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  line-height: 1.25;
}

.col-filters select {
  padding-right: 1.85rem;
  background-position: right 0.45rem center;
  background-size: 0.85rem;
}

.col-filter-check {
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.72rem;
}

.multiselect {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
}

.multiselect.has-label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.multiselect-label {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Combobox shell: match single-line <input> / combobox height. */
.multiselect-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: calc(0.875rem * 1.25 + 1rem + 2px);
  margin: 0;
  padding: 0.5rem 0.75rem;
  padding-right: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--control-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.95rem;
  cursor: text;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

html[data-theme="dark"] .multiselect-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.multiselect-control:hover {
  background-color: var(--control-hover);
}

.multiselect.is-open .multiselect-control,
.multiselect-control:focus-within {
  border-color: var(--accent);
  outline: none;
}

.multiselect-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  /* Stay sized to chips so the input starts after the last chip. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 1.25em;
  padding: 0 0.15rem 0 0.35rem;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}

.multiselect-chip.is-overflow {
  flex: 0 0 auto;
  max-width: none;
  padding: 0 0.35rem;
  cursor: default;
}

.multiselect-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.multiselect-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

button.multiselect-chip-remove:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-dark);
}

/* Flex-grow lives on the wrap — not the <input> — so the caret paints after
   typed text instead of at the far right of the control (Chromium quirk). */
.multiselect-input-wrap {
  flex: 1 1 auto;
  min-width: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.multiselect-input {
  display: block;
  box-sizing: border-box;
  /* Size to typed text so the caret sits after the value, not at the far
     right of a full-width flex input. */
  flex: 0 0 auto;
  width: auto !important;
  min-width: 2ch;
  max-width: 100%;
  field-sizing: content;
  height: 1.25em;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink);
  font: inherit;
  font-size: inherit;
  line-height: 1.25;
  text-align: left;
}

.multiselect-control:not(:has(.multiselect-chip)) .multiselect-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.multiselect-control:not(:has(.multiselect-chip)) .multiselect-input {
  /* Empty control: fill so the placeholder reads like a normal text field. */
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0;
  field-sizing: fixed;
}

/* An empty chip strip still grows and indents the placeholder — drop it until
   there is a chip to show. */
.multiselect-control:not(:has(.multiselect-chip)) .multiselect-chips {
  display: none;
}

.multiselect-input:focus {
  outline: none;
}

.multiselect-input::placeholder {
  color: var(--muted);
}

.multiselect-panel {
  z-index: 80;
  margin: 0;
  padding: 0.2rem;
  min-width: 8rem;
  max-height: min(14rem, 45vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card), 0 8px 20px rgb(15 23 42 / 0.12);
  color: var(--ink);
}

.multiselect-panel[hidden] {
  display: none !important;
}

.multiselect-empty {
  margin: 0;
  padding: 0.4rem 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Override global / .add-modal-body <label> column layout so options stay
   left-aligned in form modals as well as filter bars. */
label.multiselect-option,
.add-modal-body label.multiselect-option {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0.28rem 0.4rem;
  border-radius: calc(var(--radius) - 2px);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

label.multiselect-option[hidden] {
  display: none !important;
}

/* Freeform keyword chips (Identity Keywords field). */
.keyword-chips {
  width: 100%;
}

.keyword-chips-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
}

.keyword-chips-control:focus-within {
  border-color: var(--accent);
  outline: none;
}

.keyword-chips-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.keyword-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  max-width: 100%;
  padding: 0.15rem 0.2rem 0.15rem 0.45rem;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
}

.keyword-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.keyword-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

button.keyword-chip-remove:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-dark);
}

.keyword-chips-input-wrap {
  flex: 1 1 6rem;
  min-width: 4rem;
}

/* Beat global `input[type="text"]` border/padding so this is one field, not
   a text box nested inside the chip control. */
label.keyword-chips input.keyword-chips-input[type="text"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0.15rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  box-shadow: none;
  outline: none;
}

label.keyword-chips input.keyword-chips-input[type="text"]:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.keyword-chips-view {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

label.multiselect-option:hover,
label.multiselect-option.is-active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

label.multiselect-option.is-selected {
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

label.multiselect-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.multiselect-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--control-bg);
  color: transparent;
  font-size: 0.65rem;
  line-height: 1;
}

label.multiselect-option.is-selected .multiselect-check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.multiselect-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.col-filters .multiselect-control,
table .multiselect-control {
  min-height: calc(0.85rem * 1.25 + 0.8rem + 2px);
  padding: 0.4rem 0.45rem;
  padding-right: 1.85rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  background-position: right 0.45rem center;
  background-size: 0.85rem;
  box-shadow: none;
  /* Chips must not grow the column — truncate inside the locked cell. */
  max-width: 100%;
  overflow: hidden;
}

.col-filters .multiselect,
table .col-filters .multiselect {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: var(--sans);
}

.col-filters .multiselect-chip,
table .multiselect-chip {
  font-family: var(--sans);
  font-size: 0.75rem;
  max-width: 100%;
}

.col-filters .multiselect-chips {
  /* Cap chip strip so long labels ellipsize instead of widening the column. */
  flex: 0 1 auto;
  max-width: calc(100% - 2rem);
  min-width: 0;
}

.col-filters .multiselect-input,
table .multiselect-input {
  font-size: inherit;
  padding: 0 !important;
}

.col-filters .multiselect-input-wrap,
table .multiselect-input-wrap {
  min-width: 1.75rem;
}

.col-filters label.multiselect-option {
  padding: 0.22rem 0.35rem;
  font-size: 0.8rem;
}

.data-table-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Legacy embedded staged lists used .table-scroll; alias onto the body primitive. */
.panel.data-table > .table-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table-empty {
  margin: 0;
  padding: 1rem 0.9rem;
}

.data-table-grid thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--nav-active) 4%, var(--panel));
  /* Bottom edge is th border only — box-shadow is clipped by width-lock overflow. */
  box-shadow: none;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: bottom;
  white-space: nowrap;
}

/* Column resize handle — desktop only; injected by app.js. */
@media (min-width: 900px) {
  /* Clear the 8px handle so sort icons / labels never sit underneath it. */
  .data-table-grid thead tr:first-child th:not(.col-select):not(.col-actions):not(
      .filler
    ) {
    padding-right: 1rem;
  }

  .data-table-grid thead tr:first-child th > .col-resize {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    /* Stay inside the cell — locked th uses overflow:hidden. */
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
  }

  .data-table-grid thead tr:first-child th > .col-resize::after {
    content: "";
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 50%;
    width: 2px;
    border-radius: 1px;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--line) 70%, transparent);
    transition: background 0.12s ease, width 0.12s ease;
  }

  .data-table-grid thead tr:first-child th > .col-resize:hover::after {
    width: 3px;
    background: color-mix(in srgb, var(--accent) 45%, var(--line));
  }

  html.is-col-resizing,
  html.is-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
  }
}

.data-table-grid thead th.is-sortable a.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.data-table-grid thead th.is-sortable a.sort-link:hover {
  color: var(--text);
  text-decoration: none;
}

.data-table-grid thead .sort-indicator {
  display: inline-block;
  /* Fixed rem size — header text is 0.7rem uppercase, so em was unreadably small. */
  width: 0.7rem;
  height: 0.85rem;
  flex: 0 0 auto;
  opacity: 0.4;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath fill='%23000' d='M4 0L7.5 4h-7zM4 10L.5 6h7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath fill='%23000' d='M4 0L7.5 4h-7zM4 10L.5 6h7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.data-table-grid thead th.is-sortable a.sort-link:hover .sort-indicator {
  opacity: 0.7;
}

.data-table-grid thead th.is-sorted .sort-indicator {
  opacity: 0.85;
}

.data-table-grid thead th.is-sorted-asc .sort-indicator {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath fill='%23000' d='M4 0L7.5 4h-7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath fill='%23000' d='M4 0L7.5 4h-7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.data-table-grid thead th.is-sorted-desc .sort-indicator {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath fill='%23000' d='M4 10L.5 6h7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath fill='%23000' d='M4 10L.5 6h7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Sit labels flush above column filters (no fat padding seam). */
.data-table-grid thead tr:first-child:has(+ tr.col-filters) th {
  padding-top: 0.55rem;
  padding-bottom: 0.15rem;
  border-bottom: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--nav-active) 4%, var(--panel));
}

/* Label-row select/actions above a filter strip: no control, just fill the rail. */
.data-table-grid thead tr:first-child:has(+ tr.col-filters) th.col-select,
.data-table-grid thead tr:first-child:has(+ tr.col-filters) th.col-actions {
  border-bottom: none;
  box-shadow: none;
}

/* Select-all lives on the filter row so it sits with the filter controls. */
.data-table-grid thead tr.col-filters th.col-select,
.data-table-grid thead tr.col-filters th.col-actions {
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0.45rem;
}

.data-table-grid thead tr.col-filters th {
  position: sticky;
  top: var(--thead-row1-height, 0px);
  z-index: 2;
  padding-top: 0;
  padding-bottom: 0.45rem;
  /* Bottom edge is th border only — matches pinned cells after sticky overrides. */
  box-shadow: none;
}

/* Mobile: stacked cards. Desktop (900px+): real table. */
@media (max-width: 899px) {
  button.theme-toggle:not(.row-menu-item),
  button.nav-toggle {
    width: var(--touch);
    height: var(--touch);
    min-width: var(--touch);
    min-height: var(--touch);
    max-width: var(--touch);
    max-height: var(--touch);
  }

  /* Kill rubber-band bounce on the scroll surfaces (x and y). */
  html,
  body {
    overscroll-behavior: none;
  }

  .main {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
  }

  .nav {
    overscroll-behavior: none;
  }

  .page,
  .page-body {
    max-width: 100%;
  }

  /* Detail / multi-section pages: keep .main as the only vertical scroller.
     overflow-x:hidden alone computes overflow-y:auto (CSS overflow quirk),
     which traps scroll in .page-body so focus/scrollIntoView jumps the
     window and leaves the shell half off-screen. clip + no shrink lets
     content grow; list pages keep their :has(...) overflow:hidden rules. */
  .page:not(:has(> .page-body > .panel.data-table)) {
    overflow-x: clip;
    flex: 0 0 auto;
    min-height: min-content;
  }

  .page:not(:has(> .page-body > .panel.data-table)) .page-body {
    overflow-x: clip;
  }

  .panel.data-table {
    border: 0;
    background: transparent;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .tabs .panel.data-table {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .data-table-mobile-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .data-table-filter-mobile {
    display: block;
    margin: 0 0 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: var(--page-head-height);
    z-index: 20;
    overflow: hidden;
  }

  /* Toggle lives in the title bar; collapsed filters take no vertical space. */
  .data-table-filter-mobile:not([open]) {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    position: static;
    overflow: visible;
  }

  .data-table-filter-summary {
    /* Native summary kept for a11y / progressive enhancement; title-bar
       button is the primary control on mobile. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .data-table-filter-mobile[open] > .data-table-filter-summary {
    display: none;
  }

  .data-table-filter-summary::-webkit-details-marker {
    display: none;
  }

  .data-table-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
  }

  .page-actions .js-mobile-filter-toggle {
    position: relative;
  }

  .page-actions .js-mobile-filter-toggle .data-table-filter-count {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.28rem;
    font-size: 0.65rem;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bg);
  }

  .data-table-filter-mobile > .data-table-filter {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: static;
  }

  .data-table-filter-mobile[open] > .data-table-filter {
    display: flex;
  }

  .data-table-filter-mobile > .data-table-filter > label,
  .data-table-filter-mobile > .data-table-filter > .multiselect {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .data-table-filter-mobile > .data-table-filter > label.grow {
    flex: none;
  }

  .data-table-filter {
    position: sticky;
    top: var(--page-head-height);
    z-index: 20;
  }

  .page:has(> .page-body > .panel.data-table) .data-table-filter-mobile,
  .page:has(> .page-body > .panel.data-table) .data-table-filter {
    position: static;
  }

  .data-table-mobile-toolbar:not(:has(.data-table-filter)) {
    justify-content: flex-end;
  }

  /* Full-width pager row — desktop chrome is a single nowrap strip that pushes
     Prev/Next off-screen on narrow viewports. */
  .data-table-chrome {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.65rem;
    padding: 0.55rem 0.75rem;
    min-height: 0;
    min-width: 0;
  }

  /* Date + list (Price explorer): full-width stacked controls so the native
     date field isn’t clipped; list sits on the next row. */
  .data-table-chrome-tools {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 0.45rem;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  label.chrome-date,
  label.chrome-select,
  .chrome-static {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    min-width: 0;
    width: auto;
    max-width: none;
    white-space: normal;
  }

  label.chrome-date .chrome-date-label,
  label.chrome-select .chrome-select-label,
  .chrome-static .chrome-static-label {
    line-height: 1.1;
  }

  label.chrome-date input[type="date"],
  label.chrome-select select {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: var(--touch);
    padding: 0.45rem 0.65rem;
    font-size: 1rem; /* ≥16px — avoids iOS focus zoom */
  }

  label.chrome-select select {
    padding-right: 2rem;
  }

  /* Native date: larger calendar affordance, full tap target. */
  input[type="date"] {
    min-height: var(--touch);
    font-size: 1rem;
    line-height: 1.25;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.2rem;
    margin-left: 0.25rem;
    cursor: pointer;
    opacity: 0.75;
  }

  input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }

  .add-modal-body input[type="date"],
  .notice-modal-body input[type="date"],
  .form-panel input[type="date"],
  .filters input[type="date"] {
    min-height: var(--touch);
    font-size: 1rem;
  }

  /* Selects in chrome/filters: match date to avoid iOS zoom. */
  .data-table-filter select,
  .data-table-filter input[type="search"],
  .data-table-filter input[type="text"],
  label.chrome-select select {
    font-size: 1rem;
  }

  label.chrome-toggle {
    grid-column: 1 / -1;
    min-height: var(--touch);
    align-self: stretch;
  }

  /* Checkboxes: the box itself clears the 24px minimum target size and the
     whole label row is tappable at the 44px touch target. The visually hidden
     inputs behind the switch / multiselect rows keep their own sizing — those
     selectors are more specific than this one. */
  input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
  }

  label.checkbox {
    min-height: var(--touch);
    gap: 0.65rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1rem;
    line-height: 1.25;
    cursor: pointer;
  }

  .data-table-filter label.checkbox {
    padding-bottom: 0;
  }

  /* Multiselect rows draw their own check; scale it with the 16px labels. */
  .multiselect-check {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.85rem;
  }

  .desktop-only {
    display: none !important;
  }

  /* Collapse chrome that only holds desktop-only column tools. */
  .data-table-chrome:not(:has(.data-table-bulk)):not(
      :has(.data-table-chrome-tools:not(.desktop-only))
    ):not(:has(.list-count, .data-table-pager)) {
    display: none !important;
  }

  .user-password-actions {
    max-width: none;
    width: 100%;
  }

  .user-password-actions button {
    width: 100%;
  }

  /* Edit-page actions (Add rate / band / component / price, form submits) span
     the full row. The card layout blocks out tbody, which leaves the footer
     cell sizing to its content, so block out the footer row as well. */
  .data-table-grid tfoot:has(.schedule-add-row),
  .data-table-grid tfoot .schedule-add-row {
    display: block;
  }

  .data-table-grid tfoot .schedule-add-row td {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    white-space: normal;
  }

  .data-table-grid tfoot .schedule-add-row td::before {
    content: none;
  }

  .schedule-add-row button.table-add,
  .schedule-add-row .button.table-add,
  .schedule-add-row a.table-add,
  .form-panel > button,
  .form-panel > .button {
    width: 100%;
  }

  .data-table-filter .filter-inactive-toggle {
    margin-top: 0.15rem;
    min-height: var(--touch);
    color: var(--ink);
    font-size: 0.875rem;
  }

  .data-table-chrome-nav {
    flex: 1 1 100%;
    order: 10;
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .data-table-chrome .list-count {
    font-size: 0.8125rem;
  }

  .pager.data-table-pager {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.25rem;
    min-width: 0;
  }

  .pager.data-table-pager .pager-btn {
    min-width: var(--touch);
    min-height: var(--touch);
    padding: 0;
    font-size: 0;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
  }

  .pager.data-table-pager .pager-prev::before,
  .pager.data-table-pager .pager-next::before {
    font-size: 1.35rem;
    line-height: 1;
  }

  .pager.data-table-pager .pager-prev::before {
    content: "‹";
  }

  .pager.data-table-pager .pager-next::before {
    content: "›";
  }

  .pager.data-table-pager a.pager-btn {
    background: var(--accent-soft);
    color: var(--accent-dark);
  }

  .pager.data-table-pager a.pager-btn:hover {
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent));
    text-decoration: none;
  }

  .pager.data-table-pager .pager-status {
    min-width: 2.75rem;
    padding: 0 0.25rem;
    text-align: center;
    font-size: 0;
  }

  .pager.data-table-pager .pager-status::before {
    content: attr(data-compact);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }

  /* Keep disabled Prev/Next visible so the controls don't jump, but muted. */
  .pager.data-table-pager .pager-slot {
    visibility: visible;
    opacity: 0.35;
    background: color-mix(in srgb, var(--line) 55%, var(--panel));
    color: var(--muted);
  }

  .data-table-add-btn {
    flex: 0 0 auto;
    align-self: flex-end;
  }

  .data-table-grid tr.inline-add {
    display: none !important;
  }

  .data-table-body {
    overflow-x: hidden;
    overflow-y: visible;
    max-height: none;
    width: 100%;
    max-width: 100%;
    scrollbar-gutter: auto;
  }

  .page:has(> .page-body > .panel.data-table) .page-body > .panel.data-table {
    overflow: hidden;
    max-width: 100%;
  }

  .page:has(> .page-body > .panel.data-table) .data-table-body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    scrollbar-gutter: auto;
  }

  .data-table-grid {
    display: block;
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .data-table-grid thead {
    display: none;
  }

  .data-table-grid tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .data-table-grid tbody tr {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.75rem 1rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  /* Bulk select, bulk actions, and row menus are desktop-only; mobile cards are
     tap-to-open (with swipe-to-delete / swipe-to-archive). Inline add/edit rows
     keep non-trash actions so their forms stay usable. */
  .data-table-bulk,
  .data-table-grid th.col-select,
  .data-table-grid td.col-select,
  .data-table-grid th.col-actions,
  .data-table-grid th.filler,
  .data-table-grid td.filler,
  .data-table-grid
    tbody
    tr:not(.inline-add, .inline-edit-row, .inline-fields-row)
    td.col-actions {
    display: none !important;
  }

  /* Trash / remove icon buttons → swipe left instead. */
  .data-table-grid tbody td.col-actions .js-staged-remove,
  .data-table-grid tbody td.col-actions .js-tier-remove,
  .data-table-grid tbody td.col-actions .js-dup-price-remove {
    display: none !important;
  }

  .data-table-grid tbody tr.swipe-row {
    /* Keep card padding on the sliding front; underlay fills the card. */
    padding: 0 !important;
  }

  /* touch-action is NOT inherited — the event target is the td/text, so the
     front (and descendants) must opt into pan-y or the browser steals the
     horizontal gesture for callouts / scrolling and cancels our swipe. */
  .data-table-grid tbody tr.swipe-row > .swipe-front,
  .data-table-grid tbody tr.swipe-row > .swipe-front * {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .data-table-grid tbody tr.swipe-row input,
  .data-table-grid tbody tr.swipe-row textarea,
  .data-table-grid tbody tr.swipe-row select {
    -webkit-user-select: text;
    user-select: text;
    touch-action: auto;
  }

  /* No gutter for the old trash control — swipe owns delete/remove. */
  .data-table-grid tbody tr.swipe-row[data-swipe-ready="1"] td.col-actions {
    display: none !important;
  }

  .data-table-grid tbody tr.swipe-row > .swipe-under {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
    /* Hide until swiping — otherwise border-radius AA lets the action color bleed. */
    opacity: 0;
  }

  .data-table-grid tbody tr.swipe-row.is-swiping > .swipe-under,
  .data-table-grid tbody tr.swipe-row.is-open > .swipe-under,
  .data-table-grid tbody tr.swipe-row[data-swipe-x]:not([data-swipe-x="0"]) > .swipe-under {
    opacity: 1;
  }

  .data-table-grid tbody tr.swipe-row > .swipe-front {
    position: relative;
    z-index: 1;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0.75rem 1rem 0.85rem;
    background: var(--panel);
    border-radius: inherit;
    will-change: transform;
  }

  .data-table-grid tbody tr.swipe-row.is-swiping > .swipe-front {
    transition: none;
  }

  .data-table-grid tbody tr.swipe-row:not(.is-swiping) > .swipe-front {
    transition: transform 0.2s ease;
  }

  .swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 5.5rem;
    padding: 0 0.5rem;
    font-family: var(--display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-accent);
    text-align: center;
  }

  .swipe-action svg {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
  }

  .swipe-action-archive {
    left: 0;
    background: var(--accent-deep);
  }

  .swipe-action-delete {
    right: 0;
    background: var(--danger);
  }

  .swipe-row[data-swipe-has-archive="0"] .swipe-action-archive,
  .swipe-row[data-swipe-has-delete="0"] .swipe-action-delete {
    display: none;
  }

  .swipe-row[data-swipe-has-archive="0"][data-swipe-has-delete="1"] .swipe-action-delete,
  .swipe-row[data-swipe-has-delete="0"][data-swipe-has-archive="1"] .swipe-action-archive {
    width: 5.5rem;
  }

  /* Commit fly-off: fill the row with only the chosen action color. */
  .swipe-row.is-committing-archive > .swipe-under {
    background: var(--accent-deep);
  }

  .swipe-row.is-committing-archive .swipe-action-delete {
    display: none;
  }

  .swipe-row.is-committing-archive .swipe-action-archive {
    left: 0;
    right: 0;
    width: auto;
  }

  .swipe-row.is-committing-delete > .swipe-under {
    background: var(--danger);
  }

  .swipe-row.is-committing-delete .swipe-action-archive {
    display: none;
  }

  .swipe-row.is-committing-delete .swipe-action-delete {
    left: 0;
    right: 0;
    width: auto;
  }

  .data-table-grid tbody tr.inline-add {
    background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel));
  }

  .data-table-grid td {
    display: block;
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 0.55rem 0 0.55rem 38%;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Class+element `display: block` beats the UA `[hidden]` rule — restore it. */
  .data-table-grid td[hidden],
  .data-table-grid th[hidden] {
    display: none !important;
  }

  .data-table-grid td:last-child {
    border-bottom: 0;
  }

  .data-table-grid td:has(+ td.col-actions) {
    border-bottom: 0;
  }

  .data-table-grid td::before {
    content: var(--label, "");
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: calc(38% - 0.65rem);
    max-width: calc(38% - 0.65rem);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .data-table-grid td:nth-child(1) { --label: var(--c1, ""); }
  .data-table-grid td:nth-child(2) { --label: var(--c2, ""); }
  .data-table-grid td:nth-child(3) { --label: var(--c3, ""); }
  .data-table-grid td:nth-child(4) { --label: var(--c4, ""); }
  .data-table-grid td:nth-child(5) { --label: var(--c5, ""); }
  .data-table-grid td:nth-child(6) { --label: var(--c6, ""); }
  .data-table-grid td:nth-child(7) { --label: var(--c7, ""); }
  .data-table-grid td:nth-child(8) { --label: var(--c8, ""); }
  .data-table-grid td:nth-child(9) { --label: var(--c9, ""); }
  .data-table-grid td:nth-child(10) { --label: var(--c10, ""); }
  .data-table-grid td:nth-child(11) { --label: var(--c11, ""); }
  .data-table-grid td:nth-child(12) { --label: var(--c12, ""); }

  .data-table-grid td.num {
    text-align: left;
    font-size: 0.95rem;
  }

  .data-table-grid td > * {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .data-table-grid .badge,
  .data-table-grid .badge-group {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
  }

  .data-table-grid .badge-group {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
  }

  /* Page header ⋮ menu stays; only in-row menus are dropped. */
  button.icon-btn.row-menu-toggle {
    width: var(--touch);
    height: var(--touch);
    min-width: var(--touch);
    min-height: var(--touch);
    max-width: var(--touch);
    max-height: var(--touch);
    opacity: 0.85;
  }

  /* Action menus + multiselects + comboboxes + selects open as bottom sheets. */
  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 79;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(15 23 42 / 0.42) !important;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
  }

  .sheet-backdrop[hidden] {
    display: none !important;
  }

  body:has(.sheet-backdrop:not([hidden])) {
    overflow: hidden;
  }

  /* Sheet panels are position:fixed; z-index:80, but that only competes inside
     their ancestor stacking context. Hosts like .page-head (25) and .nav (40)
     sit below .sheet-backdrop (79), so the dimmer steals every tap and the
     menu appears to do nothing. Lift hosts while their sheet is open. */
  .page-head:has(.row-menu.is-open),
  .nav:has(.row-menu.is-open),
  .topbar:has(.row-menu.is-open),
  .data-table-filter:has(.multiselect.is-open),
  .data-table-filter-mobile:has(.multiselect.is-open),
  .data-table-chrome:has(.multiselect.is-open),
  .multiselect.is-open {
    z-index: 81;
  }

  .row-menu.is-open .row-menu-panel,
  .row-menu.is-open .row-menu-panel.is-fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: min(70vh, 28rem);
    margin: 0;
    padding: 0.35rem 0.65rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -12px 36px rgb(15 23 42 / 0.22);
    z-index: 80;
    transform: none;
    touch-action: pan-y;
  }

  .row-menu.is-open .row-menu-panel.is-sheet-dragging,
  .row-menu.is-open .row-menu-panel.is-sheet-dismissing,
  .multiselect.is-open .multiselect-panel.is-sheet-dragging,
  .multiselect.is-open .multiselect-panel.is-sheet-dismissing,
  .select-sheet.is-sheet-dragging,
  .select-sheet.is-sheet-dismissing {
    overflow: hidden;
    touch-action: none;
    will-change: transform;
  }

  .sheet-drag-handle {
    display: block;
    position: relative;
    width: 100%;
    height: 1.75rem;
    margin: -0.15rem 0 0.2rem;
    flex: 0 0 auto;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sheet-drag-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 0.28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 55%, var(--line));
    transform: translate(-50%, -50%);
  }

  .is-sheet-dragging > .sheet-drag-handle {
    cursor: grabbing;
  }

  .row-menu-item,
  a.row-menu-item,
  button.row-menu-item {
    min-height: var(--touch);
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    font-size: 1rem;
    border-radius: calc(var(--radius) + 2px);
  }

  .row-menu-item svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .multiselect.is-open .multiselect-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(55vh, 22rem) !important;
    margin: 0;
    padding: 0.35rem 0.55rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -12px 36px rgb(15 23 42 / 0.22);
    z-index: 80;
    touch-action: pan-y;
  }

  .select-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: min(70vh, 28rem);
    margin: 0;
    padding: 0.35rem 0.65rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 -12px 36px rgb(15 23 42 / 0.22);
    z-index: 80;
    touch-action: pan-y;
  }

  .select-sheet-title {
    margin: 0 0.35rem 0.35rem;
    padding: 0 0.4rem;
    font-family: var(--display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .select-sheet-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  button.select-sheet-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--touch);
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 0;
    border-radius: calc(var(--radius) + 2px);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }

  button.select-sheet-option:hover,
  button.select-sheet-option:focus-visible {
    background: var(--accent-soft);
    color: var(--accent-dark);
    outline: none;
  }

  button.select-sheet-option.is-selected {
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 600;
  }

  button.select-sheet-option.is-disabled,
  button.select-sheet-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  label.multiselect-option {
    min-height: var(--touch);
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
  }

  .data-table-grid td.empty {
    display: block;
    text-align: center;
    padding: 1rem 0.25rem;
    border-bottom: 0;
  }

  .data-table-grid td.empty::before {
    content: none;
  }

  .data-table-grid tr.inline-add td:empty,
  .data-table-grid tr.inline-add td:not(:has(input, select, button, .icon-actions, .icon-btn, .row-menu)) {
    display: none;
  }

  .data-table-grid tr.inline-add td {
    grid-template-columns: 1fr;
  }

  .data-table-grid tr.inline-add td::before {
    margin-bottom: 0.15rem;
  }

  .data-table-grid tbody tr.inline-fields-row:has(td.col-actions > *) {
    padding-right: 3.25rem;
  }

  .data-table-grid tr.inline-fields-row td.col-actions {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 2;
  }

  .data-table-grid tr.inline-fields-row td.col-actions::before {
    content: none;
  }

  .data-table-grid tr.inline-add td.col-actions > .icon-btn {
    width: var(--touch);
    height: var(--touch);
    min-width: var(--touch);
    min-height: var(--touch);
    max-width: var(--touch);
    max-height: var(--touch);
  }
}

@media (min-width: 900px) {
  .data-table-filter-mobile,
  .data-table-mobile-toolbar {
    display: none !important;
  }

  .mobile-only {
    display: none !important;
  }

  .col-filters {
    display: table-row;
  }

  /* Match action-button rows: text-only tables (e.g. Price explorer) share the same density. */
  .data-table-grid {
    --data-table-row-control: 1.75rem;
  }

  .data-table-grid tbody td {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    vertical-align: middle;
    height: calc(var(--data-table-row-control) + 0.8rem);
  }

  .data-table-grid tbody td.col-actions .icon-btn,
  .data-table-grid tbody td.col-actions a.icon-btn,
  .data-table-grid tbody td.col-actions button.icon-btn {
    width: var(--data-table-row-control);
    height: var(--data-table-row-control);
    min-width: var(--data-table-row-control);
    min-height: var(--data-table-row-control);
    max-width: var(--data-table-row-control);
    max-height: var(--data-table-row-control);
  }

  .data-table-grid tbody td.col-actions .icon-btn svg {
    width: 0.9rem;
    height: 0.9rem;
  }
}

table select {
  min-width: 0;
  width: 100%;
  padding: 0.45rem 0.5rem;
  padding-right: 1.95rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background-color: var(--control-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.85rem;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}

html[data-theme="dark"] table select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

th.col-actions,
td.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

table input[type="text"],
table input[type="email"],
table input[type="url"],
table input[type="date"],
table input[type="search"],
table input[type="password"] {
  min-width: 0;
  width: 100%;
  padding: 0.45rem 0.5rem;
  font-size: 0.9rem;
}

table td.num input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tr.inline-add {
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel));
}

tr.inline-edit-row {
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel));
}

/* Desktop: keep add row pinned; style inline field rows like data cells. */
@media (min-width: 900px) {
  .data-table-grid tfoot.inline-add-foot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    vertical-align: middle;
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel));
    box-shadow: 0 -1px 0 var(--line);
  }

  .data-table-grid tr.inline-edit-row td {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    vertical-align: middle;
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel));
  }

  .data-table-grid tr.inline-edit-row[hidden] {
    display: none;
  }

  /* Table-like, but clearly editable: light underline field. */
  .data-table-grid tr.inline-fields-row input[type="text"],
  .data-table-grid tr.inline-fields-row input[type="email"],
  .data-table-grid tr.inline-fields-row input[type="url"],
  .data-table-grid tr.inline-fields-row input[type="search"],
  .data-table-grid tr.inline-fields-row input[type="date"],
  .data-table-grid tr.inline-fields-row input[type="password"],
  .data-table-grid tr.inline-fields-row select {
    width: 100%;
    min-height: 0;
    padding: 0.15rem 0.1rem 0.2rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, var(--ink));
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font: inherit;
    font-size: inherit;
    color: inherit;
  }

  .data-table-grid tr.inline-add input::placeholder,
  .data-table-grid tr.inline-add textarea::placeholder {
    font-style: italic;
  }

  .data-table-grid tr.inline-add select:has(option[value=""][disabled]:checked) {
    font-style: italic;
    color: var(--muted);
  }

  .data-table-grid tr.inline-fields-row td.code input,
  .data-table-grid tr.inline-fields-row td.code select,
  .data-table-grid tr.inline-fields-row td.num input {
    font-family: var(--sans);
    font-size: 0.85rem;
  }

  .data-table-grid tr.inline-fields-row td.num input {
    text-align: right;
  }

  .data-table-grid tr.inline-fields-row select {
    padding-right: 1.15rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.05rem center;
    background-size: 0.85rem;
  }

  html[data-theme="dark"] .data-table-grid tr.inline-fields-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .data-table-grid tr.inline-fields-row input:hover,
  .data-table-grid tr.inline-fields-row select:hover {
    border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  }

  .data-table-grid tr.inline-fields-row input:focus,
  .data-table-grid tr.inline-fields-row select:focus {
    outline: none;
    border-bottom-color: var(--accent);
    background-color: transparent;
    box-shadow: none;
  }

  .data-table-grid tr.inline-fields-row select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.05rem center;
    background-size: 0.85rem;
  }

  html[data-theme="dark"] .data-table-grid tr.inline-fields-row select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25L8 10.25L12 6.25' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .data-table-grid tr.inline-fields-row td.col-actions .icon-btn,
  .data-table-grid tr.inline-fields-row td.col-actions a.icon-btn,
  .data-table-grid tr.inline-fields-row td.col-actions button.icon-btn {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    max-width: 1.75rem;
    max-height: 1.75rem;
  }

  .data-table-grid tr.inline-fields-row td.col-actions .icon-btn svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  .data-table-grid tr.inline-fields-row td.col-actions .icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
  }

  .data-table-grid tr.inline-fields-row td.col-actions form {
    display: none;
  }
}

@media (max-width: 899px) {
  .data-table-grid tr.inline-edit-row {
    display: none !important;
  }
}

tr.row-link {
  cursor: pointer;
}

tr.row-link:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
}

tr.row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

tr.inline-add td {
  border-bottom: 0;
  vertical-align: middle;
}

.add-modal {
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(90vh, 40rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  box-shadow: var(--shadow-card);
}

.add-modal::backdrop {
  background: var(--scrim);
}

.add-modal-form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.add-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}

.add-modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.add-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  overflow: auto;
}

.add-modal-body label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Checkboxes stay horizontal (input + caption + ?); column rule above would stack them. */
.add-modal-body label.checkbox {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-bottom: 0;
}

/* flex-column above ties global label:has(> .req|.field-help) — restore
   caption + * + ? on one row, control full-width below.
   Skip .checkbox (flex-row: input + text + ?). */
.add-modal-body label:has(> .req):not(.checkbox),
.add-modal-body label:has(> .field-help):not(.checkbox) {
  display: grid;
  grid-template-columns: max-content max-content max-content 1fr;
  column-gap: 0.15em;
  row-gap: 0.35rem;
  align-items: baseline;
}

.add-modal-body label[hidden],
.add-modal-body label[hidden]:has(> .req),
.add-modal-body label[hidden]:has(> .field-help) {
  display: none !important;
}

.add-modal-body label:has(> .req):not(.checkbox) > .req {
  grid-column: 2;
  grid-row: 1;
}

.add-modal-body label:has(> .field-help):not(.checkbox) > .field-help {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}

.add-modal-body label:has(> .req):not(.checkbox) > *:not(.req):not(.field-help) {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.add-modal-body label:has(> .field-help):not(:has(> .req)):not(.checkbox) {
  grid-template-columns: max-content max-content 1fr;
}

.add-modal-body label:has(> .field-help):not(:has(> .req)):not(.checkbox) > .field-help {
  grid-column: 2;
}

.add-modal-body label:has(> .field-help):not(:has(> .req)):not(.checkbox) > *:not(.field-help) {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.add-modal-body .bulk-modal-count {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.add-modal-body .bulk-modal-count strong {
  color: var(--ink);
  font-weight: 600;
}

.add-modal-body input:not([type="checkbox"]):not([type="radio"]),
.add-modal-body select {
  width: 100%;
  min-height: var(--touch);
}

/* Beat the full-width/touch rules above — keep native checkbox size. */
.add-modal-body input[type="checkbox"],
.add-modal-body input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  flex: 0 0 auto;
}

.add-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
}

/* Wider modal for the multi-band commercial-rule builder on the SKU edit page. */
.add-modal.rule-modal {
  width: min(60rem, calc(100vw - 2rem));
  max-height: min(92vh, 48rem);
}

.rule-modal .add-modal-body .data-table {
  padding: 0;
  box-shadow: none;
  border: 0;
}

.notice-modal {
  width: min(24rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  box-shadow: var(--shadow-card);
}

.notice-modal::backdrop {
  background: var(--scrim);
}

.notice-modal-card {
  display: flex;
  flex-direction: column;
}

.notice-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}

.notice-modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.notice-modal-body {
  padding: 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.notice-modal-body p {
  margin: 0;
}

.notice-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
}

/* Price Explorer commercial peek: pin head/foot; scroll offers in the middle.
   Flex column (same pattern as .add-modal), scoped to the dialog — does not
   fight the app shell nav. Mobile sheet rules below override max-height. */
dialog.notice-modal.peek-modal {
  width: min(56rem, calc(100vw - 2rem));
  max-width: min(56rem, calc(100vw - 2rem));
  max-height: min(90vh, 48rem);
  max-height: min(90dvh, 48rem);
  overflow: hidden;
}

.peek-modal .notice-modal-card {
  max-height: inherit;
  min-height: 0;
  overflow: hidden;
}

.peek-modal .notice-modal-head,
.peek-modal .notice-modal-foot {
  flex-shrink: 0;
}

.peek-modal .notice-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Keep last offer card clear of the pinned action footer. */
  padding-bottom: 1.25rem;
}

.find-dropdown {
  display: none;
  position: fixed;
  z-index: 80;
  box-sizing: border-box;
  min-width: 18rem;
  max-width: min(36rem, calc(100vw - 1rem));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  box-shadow: var(--shadow-card), 0 10px 28px rgb(15 23 42 / 0.18);
  overflow: hidden;
}

html[data-theme="dark"] .find-dropdown {
  box-shadow: var(--shadow-card), 0 12px 32px rgb(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .find-dropdown {
    box-shadow: var(--shadow-card), 0 12px 32px rgb(0 0 0 / 0.55);
  }
}

.find-dropdown.is-open {
  display: flex;
  flex-direction: column;
}

.find-dropdown-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.find-dropdown .find-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.find-dropdown .find-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.15rem;
}

.find-dropdown .find-section-head h3 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.find-dropdown .find-section-head a {
  font-size: 0.8rem;
}

.find-dropdown .find-hit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.find-dropdown .find-hit-list li + li {
  border-top: 1px solid var(--line);
}

.find-dropdown .find-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  padding: 0.55rem 0.7rem;
  color: inherit;
  text-decoration: none;
}

.find-dropdown .find-hit:hover,
.find-dropdown .find-hit:focus-visible {
  background: var(--row-hover, color-mix(in srgb, var(--accent) 8%, transparent));
  outline: none;
}

.find-dropdown .find-hit-title {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.find-dropdown .find-hit-meta {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.82rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.find-dropdown .find-hit-kind {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  align-self: start;
}

.find-dropdown .find-empty {
  margin: 0;
  padding: 0.25rem 0.15rem;
}

@media (max-width: 899px) {
  /* Full-screen sheets below the top bar — leave brand / menu visible. */
  dialog.add-modal:modal,
  dialog.add-modal.rule-modal:modal,
  dialog.notice-modal:modal,
  dialog.peek-modal:modal,
  dialog.add-modal,
  dialog.add-modal.rule-modal,
  dialog.notice-modal,
  dialog.peek-modal {
    position: fixed;
    top: var(--nav-sticky-height, 4rem);
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  dialog.add-modal::backdrop,
  dialog.notice-modal::backdrop,
  dialog.peek-modal::backdrop {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--nav-sticky-height, 4rem),
      var(--scrim) var(--nav-sticky-height, 4rem),
      var(--scrim) 100%
    );
  }

  .add-modal-form,
  .notice-modal-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .add-modal-head,
  .notice-modal-head {
    flex-shrink: 0;
    min-height: var(--touch);
    padding: 0.75rem 1rem;
  }

  .add-modal-body,
  .notice-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .add-modal-foot,
  .notice-modal-foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .add-modal-head .icon-btn,
  .notice-modal-head .icon-btn,
  .add-modal-head a.icon-btn,
  .notice-modal-head a.icon-btn {
    width: var(--touch);
    height: var(--touch);
    min-width: var(--touch);
    min-height: var(--touch);
    max-width: var(--touch);
    max-height: var(--touch);
  }

  .add-modal-head .icon-btn svg,
  .notice-modal-head .icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .add-modal-foot .secondary,
  .add-modal-foot button[type="submit"],
  .add-modal-foot .button,
  .add-modal-foot a.button,
  .add-modal-foot button,
  .notice-modal-foot .button,
  .notice-modal-foot a.button,
  .notice-modal-foot button {
    width: 100%;
    min-height: var(--touch);
  }

  .attach-preview-head-actions .icon-btn,
  .attach-preview-head-actions a.icon-btn {
    width: var(--touch);
    height: var(--touch);
    min-width: var(--touch);
    min-height: var(--touch);
    max-width: var(--touch);
    max-height: var(--touch);
  }

  /* Header ✕ already dismisses; a second Cancel is redundant on sheets. */
  .add-modal-foot .js-add-modal-close {
    display: none;
  }
}

.peek-price-dl {
  margin: 0;
}

.peek-section-title {
  margin: 0.85rem 0 0.55rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.peek-section-title:first-child {
  margin-top: 0;
}

/* Discrete nested cards (SKU detail + Price Explorer peek). */
.peek-rule {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 55%, var(--panel));
  box-shadow: var(--shadow-card);
}

.peek-section-title + .peek-rule {
  margin-top: 0;
}

.peek-rule-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  color: inherit;
  text-decoration: none;
}

.peek-rule-head:hover .peek-rule-name,
.peek-rule-head:hover .code {
  color: var(--accent);
}

/* Section title > card title > body. */
.peek-rule-head .peek-rule-name {
  flex: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.peek-qualifier-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
}

.peek-qualifier-benefit {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.peek-qualifier-action {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.peek-qualifier-targets {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.peek-qualifier-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background: var(--panel);
}

.peek-qualifier-member-list li {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.28rem 0.5rem;
  border-top: 1px solid var(--line);
}

.peek-qualifier-member-list li:first-child {
  border-top: 0;
}

.peek-qualifier-member-list li:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
}

.peek-qualifier-member-list .code {
  flex: 0 0 auto;
  min-width: 5.5rem;
  font-size: var(--sku-code-font, 0.85rem);
  text-decoration: none;
}

.peek-qualifier-member-list a.code:hover {
  color: var(--accent);
}

.peek-qualifier-member-list .meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.sku-offer-breakdown > .meta:first-child {
  margin: 0 0 0.85rem;
}

.sku-offer-breakdown .peek-outcome-list {
  font-size: 0.85rem;
}

/* Expandable offer cards (product rollup): padded chevron on the right. */
.peek-rule > .peek-rule-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  list-style: none;
  cursor: pointer;
  color: inherit;
}

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

.peek-rule-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  margin-left: 0.15rem;
  border-radius: calc(var(--radius) - 1px);
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, var(--panel));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, background 0.12s ease, border-color 0.12s ease;
}

.peek-rule-caret svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.peek-rule > .peek-rule-summary:hover .peek-rule-caret {
  background: color-mix(in srgb, var(--ink) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
}

.peek-rule[open] > .peek-rule-summary .peek-rule-caret {
  transform: rotate(180deg);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent);
}

.peek-rule-summary-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.2rem 0.55rem;
}

.peek-rule-summary .peek-rule-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.peek-rule-summary .peek-rule-name:hover {
  color: var(--accent);
}

.peek-offer-variant {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.peek-offer-variant + .peek-offer-variant {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.peek-offer-variant-label {
  margin: 0;
  font-size: 0.82rem;
}

.peek-outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
}

.peek-outcome-list li {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 0.85fr) minmax(0, 0.85fr)
    minmax(0, 0.65fr);
  gap: 0.5rem;
  color: var(--muted);
}

/* Offer-first by-list rows: List | Rule | Discount | Unit | Sales COGS | STM.
   Must follow the 5-col default so it wins the cascade. */
.peek-outcome-list--by-list li {
  grid-template-columns:
    minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 0.85fr)
    minmax(0, 0.85fr) minmax(0, 0.65fr);
}

.peek-outcome-list--by-list li > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.peek-outcome-list .peek-outcome-head {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.peek-outcome-list .num {
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.schedule-lines-table th[hidden],
.schedule-lines-table td[hidden] {
  display: none;
}

.schedule-lines-table .js-sale-percent-field,
.schedule-lines-table .js-sale-amount-field,
.schedule-lines-table .js-stm-explicit-field,
.schedule-lines-table .js-stm-category-field,
.schedule-lines-table .js-stm-sku-field {
  display: block;
}

.schedule-lines-table .companion-fields {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 12rem;
}

.schedule-lines-table .companion-fields .combobox {
  flex: 1 1 auto;
  min-width: 0;
}

.schedule-lines-table .companion-fields .companion-qty {
  flex: 0 0 3.25rem;
  width: 3.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

/* Bundle schedule: discount terms + DNF qualify paths. */
.bundle-lines {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bundle-lines-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bundle-lines-empty,
.bundle-lines > .empty {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--line);
  border-radius: 0.5rem;
  color: var(--muted);
  background: var(--panel);
}

.bundle-line-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--panel);
  overflow: hidden;
}

.bundle-line-terms {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.7rem;
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--panel));
  border-bottom: 1px solid var(--line);
}

.bundle-line-terms-view {
  align-items: center;
  min-height: 2.35rem;
}

.bundle-line-terms-view > .bundle-term-pill,
.bundle-line-terms-view > .bundle-term-value,
.bundle-line-terms-view > .meta,
.bundle-line-terms-view > .badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0;
  line-height: 1.2;
}

.bundle-line-terms-view > .badge {
  height: 1.35rem;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}

.bundle-option-label {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-right: 0.15rem;
}

/* Beat global `label { width: 100% }` / form-panel label so fields sit in a toolbar row. */
.bundle-line-terms > label.bundle-field {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.bundle-line-terms > label.bundle-field > select,
.bundle-line-terms > label.bundle-field > input,
.bundle-line-terms > label.bundle-field .js-sale-percent-field input,
.bundle-line-terms > label.bundle-field .js-sale-amount-field input,
.bundle-line-terms > label.bundle-field .js-stm-explicit-field input,
.bundle-line-terms > label.bundle-field .js-stm-category-field input {
  width: auto;
  max-width: none;
  min-width: 7rem;
  min-height: 0;
  height: 1.9rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}

/* Compact padding was eating the global select caret gutter. */
.bundle-line-terms > label.bundle-field > select {
  min-width: 8.5rem;
  padding-right: 1.85rem;
  background-position: right 0.4rem center;
  background-size: 0.85rem;
}

.bundle-line-terms > label.bundle-field-value {
  min-width: 0;
}

.bundle-line-terms > label.bundle-field-value .js-sale-percent-field input,
.bundle-line-terms > label.bundle-field-value .js-sale-amount-field input,
.bundle-line-terms .bundle-input-num {
  width: 4.25rem;
  min-width: 3.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bundle-line-terms > label.bundle-field-stm-detail {
  min-width: 0;
}

/* Control row height matches Sale term / Value selects (1.9rem). */
.bundle-line-terms > label.bundle-field-stm-detail > span {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  width: auto;
}

/* SKU-default dash: do not inherit .meta paragraph margins in the toolbar. */
.bundle-line-terms > label.bundle-field-stm-detail .js-stm-sku-field {
  box-sizing: border-box;
  height: 1.9rem;
  min-width: 7rem;
  margin: 0;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
}

/* Must beat the display:inline-flex above so [hidden] actually hides. */
.bundle-line-terms > label.bundle-field-stm-detail > span[hidden],
.bundle-line-terms > label.bundle-field-stm-detail .js-stm-sku-field[hidden],
.bundle-line-terms > label.bundle-field-stm-detail .js-stm-explicit-field[hidden],
.bundle-line-terms > label.bundle-field-stm-detail .js-stm-category-field[hidden] {
  display: none;
}

.bundle-line-terms > label.bundle-field-active,
.bundle-line-terms > label.bundle-field-active.checkbox {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  gap: 0.2rem;
  width: auto;
  max-width: none;
  min-height: 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: 0.01em;
  padding: 0;
  cursor: pointer;
}

.bundle-line-terms > label.bundle-field-active .bundle-active-control {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
}

.bundle-line-terms > label.bundle-field-active input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.bundle-line-terms > .icon-btn.js-staged-remove,
.bundle-line-terms > .icon-btn.js-tier-remove {
  margin-left: auto;
  align-self: center;
}

.bundle-term-pill {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}

.bundle-term-value {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.bundle-line-cart {
  padding: 0.55rem 0.7rem 0.65rem;
}

.bundle-qualify-lead {
  margin: 0 0 0.4rem;
}

.bundle-qualify-block {
  margin-top: 0.85rem;
}

.bundle-lines-add {
  padding: 0.35rem 0 0.1rem;
  margin-top: 0.1rem;
}

button.bundle-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  margin: 0;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0.2rem 0.45rem;
  border: 1px dashed var(--line);
  border-radius: 0.3rem;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
}

button.bundle-add:hover,
button.bundle-add:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

button.bundle-add svg {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

button.bundle-row-dismiss {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.1rem 0.3rem;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  min-height: 0;
  height: auto;
  cursor: pointer;
}

button.bundle-row-dismiss:hover,
button.bundle-row-dismiss:focus-visible {
  color: var(--danger, #b42318);
  background: none;
}

.condition-groups,
.condition-groups-view {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.condition-groups > .js-condition-group-add {
  margin-top: 0.15rem;
  align-self: flex-start;
}

.condition-group,
.condition-group-view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem 0.6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--panel));
}

.condition-group-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.5rem;
}

.condition-group-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--panel));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.condition-group-kind {
  flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.condition-group-head .js-condition-group-remove,
.condition-group-head .icon-btn {
  margin-left: auto;
}

.condition-group-table {
  margin: 0;
  width: 100%;
  box-shadow: none;
}

.condition-group-table .table-scroll {
  margin: 0;
}

.condition-group-table .data-table-grid {
  width: 100%;
}

.condition-group-table .data-table-grid th.num,
.condition-group-table .data-table-grid td.num {
  width: 4.5rem;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

.condition-group-table .data-table-grid th.code,
.condition-group-table .data-table-grid td.code {
  width: 11rem;
  vertical-align: middle;
}

.condition-group-table .data-table-grid th.name,
.condition-group-table .data-table-grid td.name {
  vertical-align: middle;
}

.condition-group-table .data-table-grid td.col-actions {
  width: 2.5rem;
  vertical-align: middle;
}

.condition-group-table .combobox {
  display: block;
  width: 100%;
  max-width: 14rem;
}

.condition-group-table td.name .combobox {
  max-width: none;
}

.condition-group-table .combobox input,
.condition-group-table .combobox input[type="text"] {
  width: 100%;
  max-width: none;
}

.condition-group-table td.name .combobox input,
.condition-group-table td.name .combobox input[type="text"] {
  font-family: var(--sans);
}

.condition-group-table .bundle-input-qty,
.condition-group-table .js-condition-member-qty {
  width: 3.25rem;
  min-width: 3.25rem;
  max-width: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  padding: 0.25rem 0.35rem;
  min-height: 0;
  height: auto;
}

.condition-or {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.2rem 0;
  text-align: center;
  text-transform: lowercase;
}

.condition-group > .js-condition-member-add,
.condition-group > .bundle-add {
  align-self: flex-start;
}

.condition-group-any {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* Same width:100% trap as terms fields — Qty must shrink to content. */
.condition-group > label.condition-group-qty,
.condition-member > label.condition-member-qty {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.condition-group > label.condition-group-qty .bundle-input-qty,
.condition-group > label.condition-group-qty input,
.condition-member > label.condition-member-qty .bundle-input-qty,
.condition-member > label.condition-member-qty input,
.bundle-input-qty {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.2rem 0.3rem;
  min-height: 0;
  height: 1.75rem;
}

.condition-group-qty-view,
.condition-member-qty-view {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.schedule-lines-table .js-sale-percent-field[hidden],
.schedule-lines-table .js-sale-amount-field[hidden],
.schedule-lines-table .js-stm-explicit-field[hidden],
.schedule-lines-table .js-stm-category-field[hidden],
.schedule-lines-table .js-stm-sku-field[hidden],
.bundle-line-card .js-sale-percent-field[hidden],
.bundle-line-card .js-sale-amount-field[hidden],
.bundle-line-card .js-stm-explicit-field[hidden],
.bundle-line-card .js-stm-category-field[hidden],
.bundle-line-card .js-stm-sku-field[hidden] {
  display: none;
}

.data-table-grid tfoot .schedule-add-row td,
.schedule-lines-table tfoot .schedule-add-row td {
  padding: 0.35rem 0.65rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--panel));
}

/* Compact “Add …” controls in table footers — excluded from touch-sized button chrome. */
button.table-add,
.button.table-add,
a.table-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  min-height: var(--icon-btn-size);
  height: var(--icon-btn-size);
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
}

button.table-add:focus-visible,
.button.table-add:focus-visible,
a.table-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button.table-add svg,
.button.table-add svg,
a.table-add svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.data-table-grid tfoot .schedule-add-row button,
.data-table-grid tfoot .schedule-add-row .table-add,
.schedule-lines-table tfoot .schedule-add-row button,
.schedule-lines-table tfoot .schedule-add-row .table-add {
  margin: 0;
}

.schedule-list-ref {
  margin: 0 0 0.65rem;
}

.inline-rate {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.inline-rate input[type="text"] {
  width: 3.5rem;
  min-width: 3.5rem;
}

.inline-rate input[type="date"] {
  width: 9rem;
  min-width: 0;
  max-width: 100%;
}

textarea {
  resize: vertical;
  min-height: 6rem;
}

.product-information {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
}

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

@media (min-width: 640px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.stat {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.stat strong {
  display: block;
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.stat span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

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

.stat a:hover {
  color: var(--accent);
}

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

a.stat:hover strong {
  color: var(--accent);
}

/* Overview — quiet dashboard composition */
.overview {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.overview > .section {
  margin-top: 0;
}

.overview .stats {
  margin: 0;
}

/* Compact callout — hugs its content inside the side-by-side grid. */
.overview-attention {
  align-self: start;
  width: fit-content;
  max-width: 100%;
}

.overview-attention > .section {
  margin-top: 0;
}

.overview-alerts {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: max-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 8%, var(--panel));
  overflow: hidden;
}

.overview-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 22%, var(--line));
}

.overview-alert:last-child {
  border-bottom: 0;
}

.overview-alert-count {
  flex: 0 0 auto;
  min-width: 1.5rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--warn) 70%, var(--ink));
  text-align: right;
}

.overview-alert-label {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--ink);
}

.overview-alert .callout-action {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 18%, var(--panel));
  color: color-mix(in srgb, var(--warn) 72%, var(--ink));
}

.overview-alert .callout-action:hover {
  background: color-mix(in srgb, var(--warn) 28%, var(--panel));
  border-color: color-mix(in srgb, var(--warn) 60%, var(--line));
}

.overview-alert .callout-action:active {
  background: color-mix(in srgb, var(--warn) 36%, var(--panel));
}

/* Side-by-side feeds; tables keep natural column widths and scroll sideways. */
.overview-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
}

.overview-columns > .section {
  margin-top: 0;
  min-width: 0;
}

.overview-columns .panel.data-table {
  margin: 0;
  max-width: 100%;
}

.overview-columns .data-table-body {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 900px) {
  .overview-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Needs attention stays compact; Upcoming takes the rest. */
  .overview-columns:has(> .overview-attention) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .overview-columns:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Content-sized columns + horizontal scroll (app.js width lock skipped). */
  .overview-columns .data-table-grid {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  .overview-columns .data-table-grid th,
  .overview-columns .data-table-grid td {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap;
  }

  .overview-columns .data-table-grid th.name,
  .overview-columns .data-table-grid td.name {
    max-width: 18rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

@media (min-width: 900px) {
  .data-table-grid {
    table-layout: fixed;
    width: 100%;
    /* separate + sticky thead avoids collapse gaps between header rows */
    border-collapse: separate;
    border-spacing: 0;
  }

  .data-table-grid.is-width-locked th,
  .data-table-grid.is-width-locked td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Non-scroll lists: JS pins exact px widths to the panel. CSS class mins
     (name 12rem, secondary 6rem, slug 9rem, …) must not force the table wider
     than the frame and create a needless horizontal scrollbar. */
  .panel.data-table:not(.is-h-scroll) .data-table-grid.is-width-locked th,
  .panel.data-table:not(.is-h-scroll) .data-table-grid.is-width-locked td {
    min-width: 0;
  }

  .page:has(> .page-body > .panel.data-table)
    .panel.data-table:not(.is-h-scroll)
    .data-table-body,
  .panel.data-table:not(.is-h-scroll) .data-table-body {
    overflow-x: hidden;
  }

  .data-table-grid.is-width-locked td.col-actions,
  .data-table-grid.is-width-locked th.col-actions {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  /* Primary SKU/code column: never ellipsize — match SKU list (8-char rail;
     longer codes may paint slightly into the next column). */
  .data-table-grid.is-width-locked th.code:first-child,
  .data-table-grid.is-width-locked td.code:first-child,
  .data-table-grid.is-width-locked th.col-select + th.code,
  .data-table-grid.is-width-locked td.col-select + td.code,
  .panel.data-table.is-h-scroll
    .data-table-grid.is-width-locked
    th.name
    + th.code,
  .panel.data-table.is-h-scroll
    .data-table-grid.is-width-locked
    td.name
    + td.code {
    overflow: visible;
    text-overflow: clip;
  }

  .data-table-grid th.num,
  .data-table-grid td.num {
    width: 6.75rem;
  }

  .data-table-grid th.date,
  .data-table-grid td.date {
    width: 10.5rem;
    max-width: 10.5rem;
    white-space: nowrap;
  }

  .data-table-grid.is-width-locked th.date {
    width: 10.5rem !important;
    max-width: 10.5rem !important;
  }

  .data-table-grid th.col-actions,
  .data-table-grid td.col-actions {
    width: var(--sticky-actions-w);
  }

  .data-table-grid th.col-select,
  .data-table-grid td.col-select {
    width: var(--sticky-select-w);
  }

  .data-table-grid th.name,
  .data-table-grid td.name {
    min-width: 12rem;
  }

  .data-table-grid th.filler,
  .data-table-grid td.filler {
    width: auto;
    padding: 0;
  }

  .data-table-grid.is-width-locked th.filler,
  .data-table-grid.is-width-locked td.filler {
    overflow: hidden;
  }

  .data-table-grid th.secondary,
  .data-table-grid td.secondary {
    min-width: 6rem;
  }

  /* Party (manufacturer / vendor) selects — fixed rail; content fit must not
     use concatenated <option> textContent (see columnContentWidthPx). */
  .data-table-grid th.party,
  .data-table-grid td.party {
    width: var(--party-col);
    min-width: var(--party-col);
    max-width: var(--party-col);
    box-sizing: border-box;
    overflow: hidden;
  }

  .data-table-grid.is-width-locked th.party {
    width: var(--party-col) !important;
    min-width: var(--party-col) !important;
    max-width: var(--party-col) !important;
  }

  .data-table-grid tr.inline-fields-row td.party select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .data-table-grid td .js-middle-truncate {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
  }

  /* Seed a compact secondary width only on wide sideways-scroll lists;
     narrow lists (product lines, …) size from content via flex fit. */
  .panel.data-table.is-h-scroll .data-table-grid th.secondary,
  .panel.data-table.is-h-scroll .data-table-grid td.secondary {
    width: 8.5rem;
  }

  .data-table-grid th.flags,
  .data-table-grid td.flags {
    width: 9.5rem;
    max-width: 9.5rem;
  }

  .data-table-grid.is-width-locked th.flags {
    width: 9.5rem !important;
    max-width: 9.5rem !important;
  }

  /* Short codes / prefixes — compact on all desktop grids (SKU lists, etc.). */
  .data-table-grid th.code:not(:first-child),
  .data-table-grid td.code:not(:first-child),
  .data-table-grid th.narrow,
  .data-table-grid td.narrow {
    width: 4.5rem;
    max-width: 4.5rem;
  }

  /* MPN (Products / Items / Price Explorer) — beats secondary .code rail. */
  .data-table-grid th.code.mpn,
  .data-table-grid td.code.mpn {
    width: var(--mpn-col);
    min-width: var(--mpn-col);
    max-width: var(--mpn-col);
    box-sizing: border-box;
  }

  /* SKU / code as first data column (after optional select): exactly 8 chars.
     On the wide lists SKU sits after Name and keeps that same 8-char rail. */
  .data-table-grid th.code:first-child,
  .data-table-grid td.code:first-child,
  .data-table-grid th.col-select + th.code,
  .data-table-grid td.col-select + td.code,
  .panel.data-table.is-h-scroll .data-table-grid th.name + th.code,
  .panel.data-table.is-h-scroll .data-table-grid td.name + td.code {
    width: var(--sku-code-col);
    min-width: var(--sku-code-col);
    max-width: var(--sku-code-col);
    box-sizing: border-box;
  }

  /* Products list: Name + SKU codes (+N chip) — wider than bare code rail;
     stretch via column resize to reveal more codes. */
  .panel.data-table.is-h-scroll .data-table-grid th.name + th.code.code-extra,
  .panel.data-table.is-h-scroll .data-table-grid td.name + td.code.code-extra,
  .data-table-grid th.code.code-extra,
  .data-table-grid td.code.code-extra {
    width: var(--sku-code-extra-col);
    min-width: var(--sku-code-extra-col);
    max-width: none;
    box-sizing: border-box;
  }

  .data-table-grid.is-width-locked th.code.code-extra,
  .panel.data-table.is-h-scroll
    .data-table-grid.is-width-locked
    th.name
    + th.code.code-extra {
    width: var(--sku-code-extra-col) !important;
    min-width: var(--sku-code-extra-col) !important;
    max-width: none !important;
  }

  .data-table-grid.is-width-locked th.code:not(:first-child),
  .data-table-grid.is-width-locked th.narrow {
    width: 4.5rem !important;
    max-width: 4.5rem !important;
  }

  .data-table-grid.is-width-locked th.code.mpn {
    width: var(--mpn-col) !important;
    min-width: var(--mpn-col) !important;
    max-width: var(--mpn-col) !important;
  }

  .data-table-grid.is-width-locked th.code:first-child,
  .data-table-grid.is-width-locked th.col-select + th.code,
  .panel.data-table.is-h-scroll
    .data-table-grid.is-width-locked
    th.name
    + th.code {
    width: var(--sku-code-col) !important;
    min-width: var(--sku-code-col) !important;
    max-width: var(--sku-code-col) !important;
  }

  .panel.data-table.is-h-scroll
    .data-table-grid.is-width-locked
    th.name
    + th.code.code-extra {
    width: var(--sku-code-extra-col) !important;
    min-width: var(--sku-code-extra-col) !important;
    max-width: var(--sku-code-extra-col) !important;
  }

  /* Shared Name pin width on SKU / price explorer. */
  .panel.data-table.is-h-scroll .data-table-grid th.name,
  .panel.data-table.is-h-scroll .data-table-grid td.name {
    width: var(--sku-name-col) !important;
    min-width: var(--sku-name-col) !important;
    max-width: var(--sku-name-col) !important;
    box-sizing: border-box;
  }

  /* User-dragged widths beat rem/code/name locks via --user-col-w.
     Include adjacent-sibling code selectors so specificity matches those locks. */
  .data-table-grid th.is-user-sized,
  .data-table-grid.is-width-locked th.is-user-sized,
  .data-table-grid.is-width-locked th.is-user-sized.code:first-child,
  .data-table-grid.is-width-locked th.col-select + th.is-user-sized.code,
  .panel.data-table.is-h-scroll .data-table-grid th.is-user-sized,
  .panel.data-table.is-h-scroll .data-table-grid th.is-user-sized.name,
  .panel.data-table.is-h-scroll .data-table-grid.is-width-locked th.is-user-sized,
  .panel.data-table.is-h-scroll
    .data-table-grid.is-width-locked
    th.name
    + th.is-user-sized.code {
    width: var(--user-col-w) !important;
    min-width: var(--user-col-w) !important;
    max-width: var(--user-col-w) !important;
    box-sizing: border-box;
  }

  /* Short enum / status labels (Kind, Lifecycle, Visibility, …). Fixed rail so
     multiselect chips / badges cannot grow the column on soft filter refresh. */
  .data-table-grid th.slug,
  .data-table-grid td.slug {
    width: 10rem;
    min-width: 10rem;
    max-width: 10rem;
    font-size: var(--sku-code-font);
    box-sizing: border-box;
    overflow: hidden;
  }

  .data-table-grid.is-width-locked th.slug {
    width: 10rem !important;
    min-width: 10rem !important;
    max-width: 10rem !important;
  }

  /* Short enum labels (Goods / Bundle / …) — tighter than slug’s fixed rail. */
  .data-table-grid th.item-type,
  .data-table-grid td.item-type {
    width: 7.25rem;
    max-width: 7.25rem;
  }

  .data-table-grid.is-width-locked th.item-type {
    width: 7.25rem !important;
    max-width: 7.25rem !important;
  }

  .col-filters input,
  .col-filters select {
    max-width: 100%;
  }

  /*
   * Shared data_table shell (horizontal_scroll / .is-h-scroll, default on):
   * table may exceed the panel and scroll horizontally. Pin select + Name on
   * the left; everything else scrolls. Keep thead `top` when re-declaring
   * sticky for left/right, or filter cells lose vertical stickiness.
   */
  .panel.data-table.is-h-scroll .data-table-grid {
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  .panel.data-table.is-h-scroll .data-table-grid td.col-select {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--panel);
  }

  .panel.data-table.is-h-scroll
    .data-table-grid
    thead
    tr:first-child
    th.col-select {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 6;
    background: color-mix(in srgb, var(--nav-active) 4%, var(--panel));
  }

  .panel.data-table.is-h-scroll
    .data-table-grid
    tr.col-filters
    > th.col-select {
    position: sticky;
    top: var(--thead-row1-height, 0px);
    left: 0;
    z-index: 6;
    background: color-mix(in srgb, var(--nav-active) 4%, var(--panel));
  }

  /* Name pin — body. Edge fade is ::after on these sticky cells (below). */
  .panel.data-table.is-h-scroll .data-table-grid td.name:first-child,
  .panel.data-table.is-h-scroll .data-table-grid td.col-select + td.name {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--panel);
  }

  /* Name pin — header label */
  .panel.data-table.is-h-scroll
    .data-table-grid
    thead
    tr:first-child
    th.name:first-child,
  .panel.data-table.is-h-scroll
    .data-table-grid
    thead
    tr:first-child
    th.col-select
    + th.name {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 6;
    background: color-mix(in srgb, var(--nav-active) 4%, var(--panel));
  }

  /* Name pin — filter row (keep thead sticky top) */
  .panel.data-table.is-h-scroll
    .data-table-grid
    tr.col-filters
    > th.name:first-child,
  .panel.data-table.is-h-scroll
    .data-table-grid
    tr.col-filters
    > th.col-select
    + th.name {
    position: sticky;
    top: var(--thead-row1-height, 0px);
    left: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--nav-active) 4%, var(--panel));
    overflow: hidden;
  }

  /* A select column sits outside Name, so Name clears its width.
     Filter row: select often rowspans, so Name is :first-child there. */
  .panel.data-table.is-h-scroll .data-table-grid td.col-select + td.name,
  .panel.data-table.is-h-scroll
    .data-table-grid
    thead
    tr:first-child
    th.col-select
    + th.name,
  .panel.data-table.is-h-scroll
    .data-table-grid
    tr.col-filters
    > th.col-select
    + th.name,
  .panel.data-table.is-h-scroll
    .data-table-grid:has(> thead th.col-select)
    tr.col-filters
    > th.name:first-child {
    left: var(--sticky-select-w);
  }

  .panel.data-table.is-h-scroll
    .data-table-grid
    tbody
    tr.row-link:hover
    > td.col-select,
  .panel.data-table.is-h-scroll
    .data-table-grid
    tbody
    tr.row-link:hover
    > td.name:first-child,
  .panel.data-table.is-h-scroll
    .data-table-grid
    tbody
    tr.row-link:hover
    > td.col-select
    + td.name,
  .panel.data-table.is-h-scroll
    .data-table-grid
    tbody
    tr.is-selected
    > td.col-select,
  .panel.data-table.is-h-scroll
    .data-table-grid
    tbody
    tr.is-selected
    > td.name:first-child,
  .panel.data-table.is-h-scroll
    .data-table-grid
    tbody
    tr.is-selected
    > td.col-select
    + td.name {
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
  }

  /* Footer add row: pin select + Name on the left while sticking to the bottom. */
  .panel.data-table.is-h-scroll .data-table-grid tfoot.inline-add-foot td.col-select,
  .panel.data-table.is-h-scroll .data-table-grid tfoot.inline-add-foot td.name:first-child,
  .panel.data-table.is-h-scroll
    .data-table-grid
    tfoot.inline-add-foot
    td.col-select
    + td.name {
    position: sticky;
    bottom: 0;
    z-index: 7;
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel));
    box-shadow: 0 -1px 0 var(--line);
  }

  .panel.data-table.is-h-scroll .data-table-grid tfoot.inline-add-foot td.col-select {
    left: 0;
  }

  .panel.data-table.is-h-scroll .data-table-grid tfoot.inline-add-foot td.name:first-child {
    left: 0;
  }

  .panel.data-table.is-h-scroll
    .data-table-grid
    tfoot.inline-add-foot
    td.col-select
    + td.name {
    left: var(--sticky-select-w);
  }
}

/* Hidden below 900px; desktop block below re-shows with display:flex. */
.data-table-scroll-cue {
  display: none;
}

@media (min-width: 900px) {
  .panel.data-table.is-h-scroll,
  .overview-columns .panel.data-table {
    --scroll-cue-right: 0rem;
  }

  .panel.data-table.is-h-scroll,
  .overview-columns .panel.data-table {
    position: relative;
  }

  /*
   * Freeze-edge fade on sticky Name cells (::after) so it sticks/rubberbands
   * with the pin. overflow:visible is required for ::after at left:100% — but
   * that disables ellipsis on the cell, so body Name text is clipped by an
   * inner .cell-clip wrapper (ensureStickyNameCellClips). Extend ::after 1px
   * past top/bottom to cover row-border seams.
   */
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    td.name:first-child,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    td.col-select
    + td.name,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    thead
    tr:first-child
    th.name:first-child,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    thead
    tr:first-child
    th.col-select
    + th.name,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    tr.col-filters
    > th.name:first-child,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    tr.col-filters
    > th.col-select
    + th.name,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    tfoot.inline-add-foot
    td.name:first-child,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    tfoot.inline-add-foot
    td.col-select
    + td.name {
    overflow: visible;
  }

  .panel.data-table.is-h-scroll .data-table-grid td.name > .cell-clip {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    td.name:first-child::after,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    td.col-select
    + td.name::after,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    thead
    tr:first-child
    th.name:first-child::after,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    thead
    tr:first-child
    th.col-select
    + th.name::after,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    tr.col-filters
    > th.name:first-child::after,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    tr.col-filters
    > th.col-select
    + th.name::after,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    tfoot.inline-add-foot
    td.name:first-child::after,
  .panel.data-table.has-scroll-left.is-h-scroll
    .data-table-grid
    tfoot.inline-add-foot
    td.col-select
    + td.name::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 100%;
    width: 14px;
    margin-left: -1px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      to right,
      var(--scroll-fade) 0%,
      var(--scroll-fade-soft) 45%,
      transparent 100%
    );
  }

  .panel.data-table.is-h-scroll .data-table-body,
  .panel.data-table.is-h-scroll > .table-scroll,
  .overview-columns .panel.data-table .data-table-body {
    position: relative;
  }

  /* Chevron cue only on the right; the left edge uses sticky-cell ::after. */
  .data-table-scroll-cue {
    position: absolute;
    top: var(--scroll-cue-top, 0px);
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 5.5rem;
    height: var(--scroll-cue-band, 0px);
    color: color-mix(in srgb, var(--accent-deep) 70%, var(--muted));
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
    box-sizing: border-box;
  }

  .data-table-scroll-cue.is-right {
    right: calc(var(--scroll-cue-body-right, 0px) + var(--scroll-cue-right));
    padding-right: 0.15rem;
  }

  .data-table-scroll-cue-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent),
      0 1px 3px rgb(0 0 0 / 0.1);
    transition: background-color 0.15s ease, transform 0.1s ease;
  }

  /* Only the visible cue's disc takes clicks (idle cue sits at opacity 0). */
  .panel.data-table.has-scroll-right .data-table-scroll-cue.is-right {
    cursor: pointer;
  }

  .panel.data-table.has-scroll-right
    .data-table-scroll-cue.is-right
    .data-table-scroll-cue-chip {
    pointer-events: auto;
    cursor: pointer;
  }

  .panel.data-table.has-scroll-right
    .data-table-scroll-cue.is-right:hover
    .data-table-scroll-cue-chip {
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    color: var(--accent);
  }

  .panel.data-table.has-scroll-right
    .data-table-scroll-cue.is-right:active
    .data-table-scroll-cue-chip {
    transform: scale(0.92);
  }

  .data-table-scroll-cue-chip svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
  }

  /* Right edge fade lives on the cue band (row actions scroll with the table). */
  .panel.data-table.is-h-scroll .data-table-scroll-cue.is-right,
  .overview-columns .panel.data-table .data-table-scroll-cue.is-right {
    background: linear-gradient(
      to left,
      var(--scroll-fade) 0%,
      var(--scroll-fade-soft) 38%,
      transparent 100%
    );
  }

  .overview-columns .panel.data-table .data-table-scroll-cue {
    z-index: 12;
    width: 4.5rem;
  }

  .panel.data-table.has-scroll-right .data-table-scroll-cue.is-right {
    opacity: 1;
  }
}

th,
td {
  padding: 0.65rem 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

td.num {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

/* SKU / code cells: same face as the rest of the table (never mono). */
td.code,
td.code a,
span.code,
a.code {
  font-family: var(--sans);
  font-variant-numeric: normal;
}

td.code {
  overflow: hidden;
}

td.code .code-former {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

td.secondary .product-extra {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

td.code.code-extra {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Products list: pack as many SKU codes as the column width allows. */
td.code.code-extra > .sku-codes-fit,
td.code.code-extra > .js-sku-codes-fit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  vertical-align: bottom;
  font-family: inherit;
}

td.code.code-extra .js-sku-code {
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-family: inherit;
}

td.code.code-extra .product-sku-more,
td.code.code-extra .js-sku-codes-more {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  overflow: visible;
  font-family: inherit;
}

/* `.badge { display: inline-flex }` beats the UA [hidden] rule — restore it
   so fit JS can hide +N when every code is already visible. */
td.code.code-extra .product-sku-more[hidden],
td.code.code-extra .js-sku-codes-more[hidden] {
  display: none;
}

/* Products list: expand multi-variant SKUs as child rows. */
.product-name-expand {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  max-width: 100%;
}

.product-name-expand .product-name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.name > .cell-clip > .product-name-expand {
  max-width: 100%;
}

button.icon-btn.product-variants-toggle {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

button.icon-btn.product-variants-toggle:hover,
button.icon-btn.product-variants-toggle:focus-visible {
  border: none;
  background: transparent;
  color: var(--accent);
}

button.icon-btn.product-variants-toggle:active {
  border: none;
  background: transparent;
  color: var(--ink);
}

button.icon-btn.product-variants-toggle svg {
  transition: transform 0.15s ease;
}

button.icon-btn.product-variants-toggle[aria-expanded="true"] svg {
  transform: rotate(0deg);
}

button.icon-btn.product-variants-toggle[aria-expanded="false"] svg,
button.icon-btn.product-variants-toggle:not([aria-expanded="true"]) svg {
  transform: rotate(-90deg);
}

.product-sku-count,
td.code.code-extra .product-sku-count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.product-sku-count.js-product-variants-expand-chip {
  cursor: pointer;
}

.product-sku-count.js-product-variants-expand-chip:hover,
.product-sku-count.js-product-variants-expand-chip:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.product-sku-count.js-product-variants-expand-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Soften count chips while variant rows are open — keep layout, mute chrome. */
tr[data-variants-open="true"] .product-sku-count,
tr[data-variants-open="true"] td.code.code-extra .product-sku-count {
  opacity: 0.4;
  color: var(--muted);
  box-shadow: none;
  pointer-events: none;
}

tr.product-variant-row {
  --product-variant-bg: color-mix(in srgb, var(--panel) 78%, var(--line));
  --product-variant-hover: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
}

tr.product-variant-row > td {
  background-color: var(--product-variant-bg);
}

tr.product-variant-row:hover > td,
tr.product-variant-row:focus-visible > td {
  background-color: var(--product-variant-hover);
}

/* Sticky select / Name pins default to --panel; keep the darker variant shade
   (and full-row hover) on those frozen cells too. */
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row
  > td.col-select,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row
  > td.name:first-child,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row
  > td.col-select
  + td.name {
  background-color: var(--product-variant-bg);
}

.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row:hover
  > td.col-select,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row:hover
  > td.name:first-child,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row:hover
  > td.col-select
  + td.name,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row:focus-visible
  > td.col-select,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row:focus-visible
  > td.name:first-child,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row:focus-visible
  > td.col-select
  + td.name,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row.is-selected
  > td.col-select,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row.is-selected
  > td.name:first-child,
.panel.data-table.is-h-scroll
  .data-table-grid
  tbody
  tr.product-variant-row.is-selected
  > td.col-select
  + td.name {
  background-color: var(--product-variant-hover);
}

tr.product-variant-row td.name .product-variant-name,
tr.product-variant-row td.name > .cell-clip .product-variant-name {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding-left: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

tr.product-variant-row[hidden] {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  /* Don't inherit a different face from parent cells. */
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.badge.off {
  background: var(--badge-off);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 20%, transparent);
}

.badge.pending {
  background: var(--warn-soft, color-mix(in srgb, #d9a441 22%, transparent));
  color: var(--warn-dark, #7a5300);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d9a441 40%, transparent);
}

.badge.on {
  background: var(--badge-on);
  color: var(--badge-on-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-on-ink) 35%, transparent);
}

.badge.offer {
  background: var(--badge-offer);
  color: var(--badge-offer-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
}

.badge.related {
  background: var(--badge-related);
  color: var(--badge-related-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
}

.badge.cs-planned,
.data-table-grid .badge.cs-planned {
  background: var(--badge-planned);
  color: var(--badge-planned-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-planned-ink) 28%, transparent);
}

.badge.cs-presale,
.data-table-grid .badge.cs-presale {
  background: var(--badge-presale);
  color: var(--badge-presale-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-presale-ink) 30%, transparent);
}

.badge.cs-current,
.data-table-grid .badge.cs-current {
  background: var(--badge-current);
  color: var(--badge-current-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-current-ink) 35%, transparent);
}

.badge.cs-sunset,
.data-table-grid .badge.cs-sunset {
  background: var(--badge-sunset);
  color: var(--badge-sunset-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-sunset-ink) 35%, transparent);
}

.badge.cs-end-of-sale,
.data-table-grid .badge.cs-end-of-sale {
  background: var(--badge-end-of-sale);
  color: var(--badge-end-of-sale-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-end-of-sale-ink) 35%, transparent);
}

.badge.cs-end-of-support,
.data-table-grid .badge.cs-end-of-support {
  background: var(--badge-end-of-support);
  color: var(--badge-end-of-support-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-end-of-support-ink) 30%, transparent);
}

.badge.vis-internal,
.data-table-grid .badge.vis-internal {
  background: var(--badge-internal);
  color: var(--badge-internal-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 20%, transparent);
}

.badge.vis-embargoed,
.data-table-grid .badge.vis-embargoed {
  background: var(--badge-embargoed);
  color: var(--badge-embargoed-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-embargoed-ink) 30%, transparent);
}

.badge.vis-public,
.data-table-grid .badge.vis-public {
  background: var(--badge-public);
  color: var(--badge-public-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-public-ink) 30%, transparent);
}

.badge.supply-available,
.data-table-grid .badge.supply-available {
  background: var(--badge-supply-available);
  color: var(--badge-supply-available-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-supply-available-ink) 35%, transparent);
}

.badge.supply-constrained,
.data-table-grid .badge.supply-constrained {
  background: var(--badge-supply-constrained);
  color: var(--badge-supply-constrained-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-supply-constrained-ink) 35%, transparent);
}

.badge.supply-unavailable,
.data-table-grid .badge.supply-unavailable {
  background: var(--badge-supply-unavailable);
  color: var(--badge-supply-unavailable-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-supply-unavailable-ink) 28%, transparent);
}

.badge.supply-mixed,
.data-table-grid .badge.supply-mixed {
  background: var(--badge-supply-mixed);
  color: var(--badge-supply-mixed-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-supply-mixed-ink) 30%, transparent);
}

.badge.procurement-available,
.data-table-grid .badge.procurement-available {
  background: var(--badge-procurement-available);
  color: var(--badge-procurement-available-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-procurement-available-ink) 35%, transparent);
}

.badge.procurement-constrained,
.data-table-grid .badge.procurement-constrained {
  background: var(--badge-procurement-constrained);
  color: var(--badge-procurement-constrained-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-procurement-constrained-ink) 35%, transparent);
}

.badge.procurement-unavailable,
.data-table-grid .badge.procurement-unavailable {
  background: var(--badge-procurement-unavailable);
  color: var(--badge-procurement-unavailable-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-procurement-unavailable-ink) 30%, transparent);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.pager a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

/* Media aside + identity form (wiki space settings, etc.). */
.panel-split {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.25rem;
}

.panel-split > .panel-split-aside {
  flex: 0 1 22rem;
  width: 22rem;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-self: stretch;
}

.panel-split > .form-panel {
  flex: 1 1 20rem;
  min-width: 0;
  margin: 0;
  align-self: stretch;
}

.panel-split-label {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-split-aside .wiki-space-cover-preview,
.panel-split-aside .drop-zone-field {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

.panel-split-aside .drop-zone-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Immediate upload wraps .drop-zone in a form — stretch that too. */
.panel-split-aside .drop-zone-upload {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  width: 100%;
}

.panel-split-aside .drop-zone {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.panel-split-aside .drop-zone-target {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.panel-split-aside .wiki-space-cover-preview {
  display: flex;
  flex-direction: column;
}

.panel-split-aside .wiki-space-cover-preview img {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

.form-grid .form-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.field-value {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--control-bg) 55%, var(--panel));
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.35;
}

.field-value.product-information {
  align-items: flex-start;
  min-height: 0;
  white-space: pre-wrap;
}

.field-value-inline {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  min-height: 0;
}

.identity-grid .dl + .dl {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.commercial-label {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--muted);
}

.commercial-source {
  color: var(--muted);
}

.commercial-shared {
  margin: 0 0 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.commercial-shared dd {
  margin-bottom: 0;
}

.commercial-grid .commercial-col + .commercial-col {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.commercial-grid .dl {
  margin: 0;
}

.dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem 0.75rem;
  margin: 0;
  font-size: 0.92rem;
}

.metadata-panel {
  max-width: 36rem;
}

.metadata-panel .dl {
  color: var(--muted);
}

.metadata-panel .dl dd {
  color: var(--ink);
}

.dl dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.dl dd {
  margin: 0 0 0.55rem;
}

.section {
  margin-top: 1.25rem;
}

.section + .panel {
  margin-top: 1.25rem;
}

.section-head h2 {
  margin: 0 0 0.65rem;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.section-head h2 .field-help {
  text-transform: none;
  letter-spacing: normal;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.section-head-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin: 0 0 0.65rem;
}

.section-subhead {
  margin: 1.1rem 0 0.55rem;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-subhead:first-child {
  margin-top: 0;
}

.battlecard-section + .battlecard-section {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.battlecard-section .prose {
  white-space: pre-wrap;
}

.section-action {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.2rem;
  margin: 0;
  padding: 0 0.15rem;
  width: fit-content;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
  z-index: 2;
}

button.tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 0 0 -1px;
  padding: 0.45rem 0.95rem;
  min-height: 0;
  min-width: 0;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

button.tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

button.tab[aria-selected="true"] {
  z-index: 3;
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
  border-bottom-color: var(--panel);
  box-shadow: none;
}

button.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.tab-panel {
  min-height: 3.25rem;
  position: relative;
  z-index: 1;
}

.tab-panel[hidden] {
  display: none !important;
}

/* Panel sits under the selected tab so the chrome reads as one piece. */
.tabs .panel.data-table,
.tabs .tab-panel > .panel {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--panel);
}

.tabs .tab-panel > p.empty,
.tabs .data-table-empty {
  margin: 0;
  padding: 1.1rem 0.95rem;
}

.tabs:has(.tab:first-child[aria-selected="true"]) .tab-panel > .panel.data-table {
  border-top-left-radius: 0;
}

@media (max-width: 899px) {
  .tab-list {
    width: 100%;
    max-width: none;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  button.tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--touch);
    padding: 0.65rem 0.75rem;
    font-size: 0.9375rem;
  }

  /* Full-width tabs sit flush on the panel below. */
  .tabs .panel.data-table,
  .tabs .tab-panel > .panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.empty {
  color: var(--muted);
  font-style: italic;
}

td.empty {
  text-align: center;
  padding: 1.1rem 0.9rem;
}


.error {
  color: var(--warn);
}

/* ── Tablet+ ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  :root {
    --space: 1.25rem;
  }

  .brand-name {
    font-size: 0.75rem;
  }

  h1,
  .page-title-copy h1,
  .page-title-row h1,
  .page-title-input {
    font-size: 1.35rem;
  }

  .breadcrumb {
    margin: 0 0 0.55rem;
    font-size: 0.8125rem;
  }

  .filters {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: end;
  }

  .filters label {
    width: auto;
    flex: 1 1 10rem;
  }

  .filters.form-panel {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .filters.form-panel label {
    width: 100%;
    flex: 0 0 auto;
  }

  .filters > button,
  .filters > .button {
    width: auto;
    flex: 0 0 auto;
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="date"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: inherit;
  }

  .dl {
    grid-template-columns: 9rem 1fr;
    gap: 0.35rem 0.75rem;
  }

  .dl dt {
    font-size: inherit;
  }

  .dl dd {
    margin: 0;
  }
}

/* ── Desktop: topbar + dark sidebar (Nexus AdminLayout) ───────────────── */

@media (min-width: 900px) {
  :root {
    --space: 1.5rem;
    --icon-btn-size: 2rem;
  }

  .shell-body {
    flex-direction: row;
    align-items: stretch;
  }

  .nav-shell {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 0 0 auto;
    position: relative;
    z-index: 40;
    overflow: visible;
  }

  .nav {
    display: flex;
    position: sticky;
    top: 4rem;
    align-self: start;
    width: 14rem;
    flex: 0 0 14rem;
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    padding: 0 0.65rem 1.25rem;
    border-right: 1px solid #1a1a1a;
    border-bottom: 0;
    background: var(--nav);
    transition: width 0.18s ease, flex-basis 0.18s ease, padding 0.18s ease;
  }

  html[data-nav-collapsed] .shell-body > .nav-shell > .nav {
    width: 3.5rem;
    flex: 0 0 3.5rem;
    padding: 0 0.4rem 1rem;
  }

  button.nav-toggle-bar {
    display: none;
  }

  .nav-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -0.65rem;
    padding: 0.75rem 0.75rem 0.35rem;
    background: var(--nav);
  }

  html[data-nav-collapsed] .nav-head {
    justify-content: center;
    margin: 0 -0.4rem;
    padding: 0.75rem 0.4rem 0.35rem;
  }

  button.nav-toggle-rail {
    display: inline-flex;
    border-color: color-mix(in srgb, #fff 14%, transparent);
    background: transparent;
    color: var(--nav-muted);
  }

  button.nav-toggle-rail:hover {
    background: color-mix(in srgb, #fff 10%, transparent);
    color: var(--nav-ink);
    border-color: color-mix(in srgb, #fff 22%, transparent);
  }

  button.nav-toggle-rail:active {
    background: color-mix(in srgb, #fff 14%, transparent);
    color: var(--nav-ink);
  }

  .nav nav {
    padding: 0.15rem 0 0;
    flex: 1 1 auto;
  }

  .nav nav a {
    padding: 0.5rem 0.75rem;
    min-height: 0;
    font-size: 0.875rem;
    border-radius: var(--radius);
  }

  .nav-section-toggle {
    padding: 0.15rem 0.75rem;
  }

  html[data-nav-collapsed] .nav nav a {
    justify-content: center;
    gap: 0;
    padding: 0.55rem 0.35rem;
  }

  html[data-nav-collapsed] .nav-label,
  html[data-nav-collapsed] .nav-section-toggle {
    display: none;
  }

  html[data-nav-collapsed] .nav nav {
    gap: 0.45rem;
  }

  html[data-nav-collapsed] .nav-section + .nav-section {
    padding-top: 0.45rem;
  }

  html[data-nav-collapsed] .nav-section-fold > .nav-section-links {
    display: flex;
  }

  html[data-nav-collapsed] .nav-section-toggle {
    min-height: 0;
  }

  .nav nav a[aria-current="page"] {
    background: var(--nav-active);
    box-shadow: none;
  }

  .main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0 1.75rem 1.5rem;
    max-width: none;
  }

  h1,
  .page-title-row h1,
  .page-title-input {
    font-size: 1.35rem;
  }

  .panel {
    padding: 1rem 1.1rem;
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .identity-grid .dl + .dl {
    padding-top: 0;
    padding-left: 0.85rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .grid-2.commercial-grid .commercial-col + .commercial-col {
    padding-top: 0;
    padding-left: 0.85rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  button:not(.icon-btn):not(.theme-toggle):not(.nav-toggle):not(.nav-user-toggle):not(.nav-section-toggle):not(.multiselect-trigger):not(.multiselect-chip-remove):not(.keyword-chip-remove):not(.tab):not(.row-menu-item):not(.callout-action):not(.sheet-backdrop):not(.select-sheet-option):not(.bundle-add):not(.bundle-row-dismiss):not(.table-add):not(.view-toggle-btn):not(.tile-main):not(.tree-toggle):not(.tree-chrome-btn):not(.tree-name):not(.login-user-btn):not(.col-vis-show-all):not(.col-vis-reset-widths):not(.wiki-editor-btn):not(.wiki-drag-delete):not(.wiki-block-picker-item):not(.wiki-color-swatch):not(.wiki-table-btn):not(.wiki-table-handle-btn):not(.wiki-table-bar):not(.wiki-table-border-toggle):not(.wiki-table-border-weight):not(.wiki-table-border-style):not(.wiki-table-border-preset):not(.wiki-add-block):not(.wiki-callout-type-btn):not(.brand-coding-token-add):not(.brand-coding-chip-remove),
  .button:not(.table-add) {
    min-height: 0;
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
  }

  .page-actions > a.button,
  .page-actions > button.button {
    min-height: var(--icon-btn-size);
    height: var(--icon-btn-size);
    padding: 0 0.75rem;
  }

  .filters > button:not(.icon-btn):not(.theme-toggle),
  .filters > .button {
    min-height: 0;
  }
}

/* ── Login (Nexus SigninView card) ───────────────────────────────────── */

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: calc(100dvh - 4rem - 2 * var(--space));
  padding: var(--space) 0 2rem;
}

.login-intro {
  text-align: center;
  max-width: 24rem;
}

.login-intro h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.login-intro .meta {
  margin: 0.4rem 0 0;
}

.login-card {
  width: 100%;
  max-width: 26rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  overflow: hidden;
}

.login-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.75rem;
  background: #273345;
  border-bottom: 1px solid #323946;
  color: #2ba3de;
}

.login-card-head img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}

.login-card-head span {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.login-card-body {
  padding: 1.5rem 1.75rem 1.75rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.login-form button {
  width: 100%;
  margin-top: 0.35rem;
  min-height: 2.5rem;
}

.login-hint {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.login-user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login-user-list > li {
  margin: 0;
}

.login-user-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  min-height: 2.75rem;
  text-align: left;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.login-user-btn:hover {
  border-color: var(--accent);
  background: var(--control-hover);
}

.login-user-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.login-user-primary {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.login-user-name {
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-user-email {
  color: var(--muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-user-btn .badge {
  flex-shrink: 0;
  text-transform: lowercase;
}

.login-footer {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.88rem;
}

.login-footer a {
  color: var(--accent);
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

.login-card-body .error {
  margin: 0 0 0.85rem;
}

.login-card-body code {
  font-size: 0.85em;
}

.trade-ins-table .stack-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
}

.trade-ins-table .stack-label input,
.trade-ins-table .stack-label select {
  font-size: 0.875rem;
}

.trade-ins-table .js-staged-row.is-focus.is-highlight {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}

tr.is-highlight,
tr.is-highlight > td {
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
}

.page-actions .button.secondary {
  margin-right: 0.35rem;
}

.product-change-modal.add-modal {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(92vh, 48rem);
}

.product-sku-modal.add-modal {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(92vh, 52rem);
}

.product-sku-modal .add-modal-body > .grid-2.form-grid,
.product-sku-modal .add-modal-body .section .grid-2.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
}

.product-sku-modal .add-modal-body > .section {
  margin-top: 0.15rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}

.product-sku-modal .add-modal-body > .section:first-of-type,
.product-sku-modal .add-modal-body > .error + .section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.product-sku-modal .add-modal-body > .section > .section-head h2 {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
}

.product-sku-modal .add-modal-body > .section > label + .grid-2.form-grid {
  margin-top: 0.75rem;
}

.product-sku-modal .product-sku-modal-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  margin-top: 0.55rem;
}

.product-sku-modal .product-sku-modal-phase-one:not(:has(label:not([hidden]))) {
  display: none;
}

.product-sku-modal .add-modal-body textarea {
  width: 100%;
  min-height: 3.5rem;
  resize: vertical;
}

.product-change-modal .add-modal-body,
.product-change-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
}

.product-change-modal .add-modal-body > .error,
.product-change-modal .add-modal-body > label:has([name="summary"]),
.product-change-modal .add-modal-body > .product-change-applies,
.product-change-modal .add-modal-body > label:has([name="notes"]),
.product-change-modal .add-modal-body > label:has([name="source_url"]),
.product-change-form-grid > label:has([name="summary"]),
.product-change-form-grid > .product-change-applies,
.product-change-form-grid > label:has([name="notes"]),
.product-change-form-grid > label:has([name="source_url"]) {
  grid-column: 1 / -1;
}

.product-change-applies {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.product-change-applies-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-size: 0.85rem;
  font-weight: 500;
}

.product-change-applies-label .req {
  flex: 0 0 auto;
}

.product-change-applies-label .field-help {
  flex: 0 0 auto;
  align-self: center;
}

/* Form pick-list: selection is shown via chips, not checkbox glyphs. */
.multiselect.no-checks .multiselect-check {
  display: none;
}

.multiselect.no-checks label.multiselect-option,
.add-modal-body .multiselect.no-checks label.multiselect-option {
  gap: 0;
}

/* Beat .add-modal-body input { min-height: touch; width: 100% }. */
.add-modal-body .multiselect-input {
  min-height: 0;
  height: 1.25em;
}

.add-modal-body .multiselect-control:has(.multiselect-chip) .multiselect-input {
  width: auto !important;
}

.add-modal-body .multiselect-control:not(:has(.multiselect-chip)) .multiselect-input {
  width: 100% !important;
}

.product-change-applies .multiselect {
  width: 100%;
}

.product-change-applies .multiselect-chip.is-pinned {
  padding-right: 0.55rem;
}

.js-product-change-row.is-removed td {
  opacity: 0.55;
  text-decoration: line-through;
}

.js-product-change-row.is-removed td.col-actions,
.js-product-change-row.is-removed td.flags {
  text-decoration: none;
}

.col-actions .inline-action {
  display: inline;
}

@media (max-width: 700px) {
  .product-change-modal .add-modal-body,
  .product-change-form-grid,
  .product-sku-modal .add-modal-body > .grid-2.form-grid,
  .product-sku-modal .add-modal-body .section .grid-2.form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Drop zone (reusable file upload) ─────────────────────────────── */

.drop-zone-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.drop-zone-caption {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.drop-zone {
  position: relative;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.drop-zone:hover,
.drop-zone:focus-within {
  border-color: var(--accent-mid);
  background: var(--accent-soft);
}

.drop-zone.is-dragover {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.drop-zone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.drop-zone-target {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  text-align: center;
}

.drop-zone-prompt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
}

.drop-zone-hint {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 28rem;
  line-height: 1.35;
  pointer-events: none;
}

.drop-zone-files {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drop-zone-files[hidden] {
  display: none;
}

.drop-zone-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 0.82rem;
}

.drop-zone-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.drop-zone-file-size {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}

.drop-zone-file-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.drop-zone-file-remove:hover,
.drop-zone-file-remove:focus-visible {
  color: var(--danger);
  background: var(--danger-soft);
  outline: none;
}

/* Attachments shell: drop zone + list/tiles share one panel. */
.attachments-shell {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.attachments-shell-upload {
  padding: 0.75rem;
  background: color-mix(in srgb, var(--paper) 70%, var(--panel));
  border-bottom: 1px solid var(--line);
}

.attachments-shell-upload .drop-zone-field {
  width: 100%;
}

.attachments-shell-upload .drop-zone {
  border-color: color-mix(in srgb, var(--line) 85%, var(--muted));
  background: var(--panel);
  box-shadow: none;
}

.attachments-shell-upload .drop-zone:hover,
.attachments-shell-upload .drop-zone:focus-within {
  border-color: var(--accent-mid);
  background: var(--accent-soft);
}

.attachments-shell-upload .drop-zone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.drop-zone.is-uploading {
  opacity: 1;
  pointer-events: none;
  border-style: solid;
  border-color: var(--accent-mid);
  background: var(--accent-soft);
  cursor: progress;
}

.drop-zone.is-uploading .drop-zone-prompt {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.drop-zone.is-uploading .drop-zone-prompt::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: attach-upload-spin 0.7s linear infinite;
}

.attachments-shell-upload .drop-zone.is-uploading {
  opacity: 1;
  pointer-events: none;
}

/* Global upload status (⋮ Add attachment). */
html.is-attach-uploading,
html.is-attach-uploading body {
  cursor: progress;
}

.attach-upload-status {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1210;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  pointer-events: none;
}

.attach-upload-status[hidden] {
  display: none !important;
}

.attach-upload-spinner {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: attach-upload-spin 0.7s linear infinite;
}

@keyframes attach-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.attachments-shell-upload .drop-zone-target {
  min-height: 4.25rem;
  padding: 0.85rem 1rem;
}

.attachments-shell-upload .drop-zone-upload {
  margin: 0;
}

.attachments-shell.has-upload.is-dragover,
.attachments-shell:has(.drop-zone.is-dragover) {
  border-color: var(--accent);
  box-shadow:
    var(--shadow-card),
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.attachments-shell-body {
  min-width: 0;
}

.attachments-shell .view-mode {
  gap: 0;
}

.attachments-shell .panel.data-table {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.attachments-shell .data-table-body {
  margin: 0;
}

.attachments-shell .data-table-empty {
  margin: 0;
  padding: 1rem 0.9rem;
  border: 0;
}

.attachments-shell .tile-grid {
  padding: 0.75rem;
}

.attachments-shell .tile-grid-empty {
  margin: 0;
  padding: 1rem 0.9rem;
}

/* ── View mode (list / tiles) ─────────────────────────────────────── */

.view-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem;
  gap: 0.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  box-shadow: none;
}

button.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  max-width: 1.85rem;
  max-height: 1.85rem;
  margin: 0;
  padding: 0;
  gap: 0;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0;
  font-weight: 400;
  line-height: 0;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

button.view-toggle-btn svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

button.view-toggle-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

button.view-toggle-btn:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button.view-toggle-btn[aria-pressed="true"] {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

button.view-toggle-btn[aria-pressed="true"]:hover {
  color: var(--accent);
}

/* Wiki TipTap toolbar — compact icon chrome, not primary CTA buttons. */
button.wiki-editor-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 0;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  max-width: 1.85rem;
  max-height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0;
  font-weight: 400;
  line-height: 0;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

button.wiki-editor-btn svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  display: block;
}

button.wiki-editor-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}

button.wiki-editor-btn:active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

button.wiki-editor-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.view-mode {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Attachments and other non-page shells: hide inactive panels via data-active-view. */
.view-mode > .view-panel[data-view] {
  display: none;
}

.view-mode[data-active-view="list"] > .view-panel[data-view="list"],
.view-mode[data-active-view="tiles"] > .view-panel[data-view="tiles"],
.view-mode[data-active-view="tree"] > .view-panel[data-view="tree"] {
  display: block;
}

.tile-grid {
  --tile-size: 9.5rem;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--tile-size)), 1fr)
  );
  justify-content: stretch;
  gap: 0.75rem;
}

.tile-grid--wide {
  --tile-size: 15rem;
}

.tile-grid > .tile {
  width: auto;
  min-width: 0;
}

.tile-grid > .tile-drag-placeholder {
  width: auto;
  min-width: 0;
  min-height: 0;
}

.tile-grid-empty {
  margin: 0;
  padding: 1rem 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-width: 0;
}

.tile.is-sortable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.tile.is-sortable img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.tile.is-sortable.is-dragging {
  position: fixed !important;
  left: -10000px !important;
  top: 0 !important;
  opacity: 0;
  pointer-events: none;
  margin: 0 !important;
  z-index: -1;
}

.tile-drag-placeholder {
  box-sizing: border-box;
  border: 1.5px dashed var(--accent-mid);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--paper));
  pointer-events: none;
}

/* Cloned tile face used as the drag preview — keep real tile layout/cover fit. */
.tile.tile-drag-ghost {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  margin: 0;
  opacity: 0.96;
  cursor: grabbing;
  pointer-events: none;
  box-shadow: var(--shadow-card), 0 10px 28px rgb(0 0 0 / 0.18);
}

.tile.tile-drag-ghost .tile-main,
.tile.tile-drag-ghost button.tile-main {
  cursor: grabbing;
  pointer-events: none;
}

/* Ghost lives on <body>, so reapply wide-grid cover fit. */
.tile.tile-drag-ghost--wide .tile-preview {
  aspect-ratio: 16 / 9;
}

.tile.tile-drag-ghost--wide .tile-preview img {
  object-fit: contain;
}

.tile-main,
button.tile-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  box-shadow: none;
  white-space: normal;
  cursor: pointer;
}

a.tile-main:hover .tile-title,
a.tile-main:focus-visible .tile-title,
button.tile-main:hover .tile-title,
button.tile-main:focus-visible .tile-title {
  color: var(--accent-dark);
}

button.tile-main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tile-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  color: var(--muted);
  overflow: hidden;
}

.tile-grid--wide .tile-preview {
  aspect-ratio: 16 / 9;
}

.tile-grid--wide .tile-preview img {
  object-fit: contain;
}

.tile-preview.has-image {
  background: #0f172a0a;
  position: relative;
}

.tile-preview.has-play {
  position: relative;
}

.tile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wiki-space-cover-preview {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.wiki-space-cover-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.wiki-space-cover-preview .wiki-space-cover-clear,
.wiki-space-cover-preview .js-image-drop-clear {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  margin: 0;
}

/* Wiki ACL: checkbox flags in staged grant tables. */
.js-wiki-grants .checkbox,
.form-panel .js-wiki-grants .checkbox {
  width: auto;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0;
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
}

.wiki-grant-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiki-grant-role {
  font-size: 0.72rem;
}

.js-wiki-grants .wiki-grant-flag {
  width: 4.5rem;
  max-width: 6rem;
  text-align: center;
  vertical-align: middle;
}

.js-wiki-grants .wiki-grant-flag .checkbox {
  display: inline-flex;
  justify-content: center;
  margin: 0;
}

.wiki-link-kind-label,
.wiki-link-label {
  display: inline-block;
  min-width: 0;
}

.wiki-space-cover-preview .icon-btn {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.drop-zone.has-preview .drop-zone-target {
  display: none;
}

.drop-zone .js-image-drop-preview-el {
  margin: 0;
  width: 100%;
}

.tile-preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #fff;
}

.tile-preview-play svg {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.45rem 0.4rem 0.45rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, #0f172a 42%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, #0f172a 25%, transparent);
  opacity: 0.72;
}

.tile-main:hover .tile-preview-play svg,
.tile-main:focus-visible .tile-preview-play svg {
  opacity: 0.9;
}

.tile-preview-glyph {
  display: inline-flex;
  opacity: 0.78;
  color: var(--muted);
}

.tile-preview-glyph[hidden] {
  display: none !important;
}

.tile-preview-glyph[data-kind="pdf"] {
  color: #c2410c;
  opacity: 0.9;
}

.tile-preview-glyph[data-kind="audio"] {
  color: #0e7490;
  opacity: 0.88;
}

.tile-preview-glyph[data-kind="video"] {
  color: #2563eb;
  opacity: 0.88;
}

.tile-preview-glyph[data-kind="archive"] {
  color: #a16207;
  opacity: 0.88;
}

.tile-preview-glyph[data-kind="spreadsheet"] {
  color: #15803d;
  opacity: 0.88;
}

.tile-preview-glyph[data-kind="presentation"] {
  color: #c2410c;
  opacity: 0.88;
}

.tile-preview-glyph[data-kind="document"] {
  color: #1d4ed8;
  opacity: 0.88;
}

.tile-preview-glyph[data-kind="cad"] {
  color: #0f766e;
  opacity: 0.88;
}

.tile-preview-glyph[data-kind="code"],
.tile-preview-glyph[data-kind="text"] {
  color: var(--ink);
  opacity: 0.55;
}

.tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem 0.65rem;
  min-width: 0;
}

.tile-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-subtitle,
.tile-meta {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-actions {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.tile-delete-form {
  margin: 0;
}

.tile-actions .icon-btn {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.tile-actions .tile-menu {
  position: relative;
}

.tile-actions .row-menu-panel {
  right: 0;
  left: auto;
}

/* Attachment preview modal */
dialog.attach-preview-modal {
  width: min(64rem, calc(100vw - 2rem));
  max-width: min(64rem, calc(100vw - 2rem));
  max-height: min(92vh, 52rem);
  max-height: min(92dvh, 52rem);
}

dialog.attach-preview-modal .notice-modal-head {
  position: relative;
  z-index: 1;
  background: var(--panel);
}

dialog.attach-preview-modal.is-fullscreen {
  width: 100vw;
  width: 100dvw;
  max-width: 100vw;
  max-width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
}

dialog.attach-preview-modal.is-fullscreen .notice-modal-card {
  height: 100%;
  max-height: 100%;
  border-radius: 0;
}

dialog.attach-preview-modal.is-fullscreen .attach-preview-image,
dialog.attach-preview-modal.is-fullscreen .attach-preview-video {
  max-height: calc(100dvh - 8rem);
}

dialog.attach-preview-modal.is-fullscreen .attach-preview-frame {
  height: calc(100dvh - 8rem);
}

.attach-preview-fs-enter[hidden],
.attach-preview-fs-exit[hidden] {
  display: none !important;
}

.attach-preview-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main";
  align-items: center;
  gap: 0.35rem 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem 0.75rem 0.75rem;
  background: var(--paper);
}

.attach-preview-stage.has-nav {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "prev main next";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.attach-preview-stage .js-attach-preview-prev[hidden],
.attach-preview-stage .js-attach-preview-next[hidden],
.attach-preview-count[hidden] {
  display: none !important;
}

.attach-preview-modal .notice-modal-body.js-attach-preview-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: min(60vh, 28rem);
  padding: 0.5rem;
  padding-bottom: 0.5rem;
  background: transparent;
  overflow: auto;
}

.attach-preview-stage .js-attach-preview-prev {
  grid-area: prev;
}

.attach-preview-stage .js-attach-preview-next {
  grid-area: next;
}

.attach-preview-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;
}

.attach-preview-side {
  flex-shrink: 0;
  align-self: center;
}

.attach-preview-side:disabled {
  opacity: 0.35;
  cursor: default;
}

.attach-preview-image {
  display: block;
  max-width: 100%;
  max-height: min(70vh, 40rem);
  max-height: min(70dvh, 40rem);
  object-fit: contain;
}

.attach-preview-video {
  display: block;
  width: 100%;
  max-height: min(70vh, 40rem);
  max-height: min(70dvh, 40rem);
  background: #000;
  border-radius: calc(var(--radius) - 2px);
}

.attach-preview-audio {
  display: block;
  width: min(100%, 28rem);
  margin: 1.5rem auto;
}

.attach-preview-md-toggle[hidden] {
  display: none !important;
}

.attach-preview-md-toggle {
  margin-right: 0.15rem;
}

.attach-preview-md-toggle .view-toggle-btn {
  min-width: 4.25rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.attach-preview-md-shell {
  width: 100%;
  min-height: 0;
}

.attach-preview-markdown,
.attach-preview-md-source {
  width: 100%;
  max-height: min(70vh, 40rem);
  max-height: min(70dvh, 40rem);
  overflow: auto;
}

.attach-preview-markdown {
  padding: 0.25rem 0.35rem 0.75rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.attach-preview-md-source {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--ink) 4%, var(--panel));
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.attach-preview-md-source[hidden],
.attach-preview-markdown[hidden] {
  display: none !important;
}

.attach-preview-markdown > :first-child {
  margin-top: 0;
}

.attach-preview-markdown > :last-child {
  margin-bottom: 0;
}

.attach-preview-markdown h1,
.attach-preview-markdown h2,
.attach-preview-markdown h3,
.attach-preview-markdown h4,
.attach-preview-markdown h5,
.attach-preview-markdown h6 {
  margin: 1.1rem 0 0.45rem;
  line-height: 1.25;
  font-weight: 650;
}

.attach-preview-markdown h1 { font-size: 1.45rem; }
.attach-preview-markdown h2 { font-size: 1.25rem; }
.attach-preview-markdown h3 { font-size: 1.1rem; }

.attach-preview-markdown p,
.attach-preview-markdown ul,
.attach-preview-markdown ol,
.attach-preview-markdown blockquote,
.attach-preview-markdown pre {
  margin: 0.65rem 0;
}

.attach-preview-markdown ul,
.attach-preview-markdown ol {
  padding-left: 1.35rem;
}

.attach-preview-markdown li + li {
  margin-top: 0.2rem;
}

.attach-preview-markdown blockquote {
  padding: 0.15rem 0 0.15rem 0.85rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.attach-preview-markdown code {
  font-family: var(--sans);
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--ink) 6%, var(--panel));
}

.attach-preview-markdown pre {
  padding: 0.75rem 0.85rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--ink) 4%, var(--panel));
}

.attach-preview-markdown pre code {
  padding: 0;
  background: transparent;
}

.attach-preview-markdown a {
  color: var(--accent);
}

.attach-preview-markdown hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1rem 0;
}

dialog.attach-preview-modal.is-fullscreen .attach-preview-markdown,
dialog.attach-preview-modal.is-fullscreen .attach-preview-md-source {
  max-height: calc(100dvh - 8rem);
}

.attach-preview-frame {
  width: 100%;
  height: min(70vh, 40rem);
  height: min(70dvh, 40rem);
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: #fff;
}

.attach-preview-fallback {
  margin: 0;
  padding: 1rem;
  color: var(--muted);
  text-align: center;
  max-width: 28rem;
}

.attach-preview-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.attach-preview-title-row .js-attach-preview-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-preview-type-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  max-width: min(10rem, 40vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, var(--panel));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: none;
}

.attach-preview-type-chip[hidden] {
  display: none !important;
}

.attach-preview-type-chip[data-kind="pdf"] {
  color: #c2410c;
  border-color: color-mix(in srgb, #c2410c 28%, var(--line));
  background: color-mix(in srgb, #c2410c 10%, var(--panel));
}

.attach-preview-type-chip[data-kind="video"] {
  color: #1d4ed8;
  border-color: color-mix(in srgb, #2563eb 28%, var(--line));
  background: color-mix(in srgb, #2563eb 10%, var(--panel));
}

.attach-preview-type-chip[data-kind="audio"] {
  color: #0e7490;
  border-color: color-mix(in srgb, #0e7490 28%, var(--line));
  background: color-mix(in srgb, #0e7490 10%, var(--panel));
}

.attach-preview-type-chip[data-kind="markdown"],
.attach-preview-type-chip[data-kind="text"] {
  color: var(--ink);
  opacity: 0.85;
}

.attach-preview-type-chip[data-kind="html"] {
  color: #b45309;
  border-color: color-mix(in srgb, #b45309 28%, var(--line));
  background: color-mix(in srgb, #b45309 10%, var(--panel));
}

.attach-preview-type-chip[data-kind="image"] {
  color: #0f766e;
  border-color: color-mix(in srgb, #0f766e 28%, var(--line));
  background: color-mix(in srgb, #0f766e 10%, var(--panel));
}

.attach-preview-head-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.attach-preview-count {
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 899px) {
  .attach-preview-stage.has-nav {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "main main"
      "prev next";
    padding: 0.5rem 0.75rem max(0.75rem, env(safe-area-inset-bottom));
  }

  .attach-preview-count {
    width: 100%;
  }

  .attach-preview-main {
    gap: 0.65rem;
  }

  .attach-preview-stage .js-attach-preview-prev,
  .attach-preview-stage .js-attach-preview-next {
    width: var(--touch);
    height: var(--touch);
    min-width: var(--touch);
    min-height: var(--touch);
    max-width: var(--touch);
    max-height: var(--touch);
    justify-self: center;
  }
}

/* ── Tree browser ─────────────────────────────────────────────────── */

.panel.tree-browser {
  padding: 0;
  overflow: hidden;
}

.tree-browser-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  min-height: 2.45rem;
  box-sizing: border-box;
}

.tree-browser-chrome .list-count {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-browser-chrome .list-count strong {
  color: var(--ink);
  font-weight: 600;
}

.tree-browser-chrome .tree-browser-heading {
  font-size: 0.82rem;
}

.tree-browser-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.tree-inactive-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  margin-right: 0.15rem;
}

button.icon-btn.tree-chrome-btn {
  color: var(--muted);
}

button.icon-btn.tree-chrome-btn:hover {
  color: var(--accent);
}

.tree-browser-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: 0.35rem 0.35rem 0.75rem;
}

/* Hide tree until collapse state is applied (avoids expand→collapse flash). */
.js-tree-browser.is-booting .tree-browser-body {
  visibility: hidden;
}

.tree-browser-empty {
  margin: 0;
  padding: 1.25rem 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.tree-list,
.tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-children {
  margin-left: 0.85rem;
  padding-left: 0.55rem;
  border-left: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}

.tree-node.is-collapsed > .tree-children,
.tree-children[hidden] {
  display: none;
}

.tree-node.is-inactive > .tree-row .tree-name,
.tree-node.is-inactive > .tree-row .tree-code {
  color: color-mix(in srgb, var(--muted) 72%, var(--ink));
  font-weight: 500;
}

.tree-node.is-inactive > .tree-row .tree-main {
  opacity: 0.78;
}

.tree-node.is-brand-forest > .tree-row {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  padding-bottom: 0.25rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.tree-list > .tree-node.is-brand-forest:first-child > .tree-row {
  margin-top: 0;
  border-top: none;
  padding-top: 0.1rem;
}

.tree-node.is-brand-forest > .tree-row .tree-name {
  font-weight: 650;
  letter-spacing: 0.01em;
}

.tree-node.is-brand-forest > .tree-row .tree-code {
  font-weight: 650;
  color: var(--ink);
}

.tree-node.is-brand-forest > .tree-children {
  margin-left: 0.55rem;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 2rem;
  padding: 0.1rem 0.35rem 0.1rem 0.15rem;
  border-radius: calc(var(--radius) - 1px);
}

.tree-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

.tree-node.is-selected > .tree-row {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

.tree-node.is-selected > .tree-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.tree-node.is-selected.is-dragging > .tree-row {
  background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
}

.tree-node.is-current > .tree-row {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.tree-node.is-current > .tree-row:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.tree-node.is-current > .tree-row .tree-name {
  font-weight: 650;
  color: var(--ink);
}

.tree-node.is-current.is-selected > .tree-row {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

button.icon-btn.tree-toggle {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  color: var(--muted);
  border-radius: calc(var(--radius) - 2px);
}

button.icon-btn.tree-toggle svg {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.12s ease;
}

.tree-node[aria-expanded="true"] > .tree-row > .tree-toggle:not(.tree-toggle-add) svg {
  transform: rotate(0deg);
}

.tree-node[aria-expanded="false"] > .tree-row > .tree-toggle:not(.tree-toggle-add) svg,
.tree-node.is-collapsed > .tree-row > .tree-toggle:not(.tree-toggle-add) svg {
  transform: rotate(-90deg);
}

button.icon-btn.tree-toggle.tree-toggle-add[aria-expanded="true"],
.tree-node[aria-expanded="true"] > .tree-row > .tree-toggle-add {
  color: var(--accent);
  background: var(--accent-soft);
}

button.icon-btn.tree-toggle:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.tree-toggle-spacer {
  display: inline-block;
  width: 1.5rem;
  min-width: 1.5rem;
  flex: 0 0 auto;
}

button.icon-btn.tree-toggle:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.tree-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* Linked rows: whole heading (line between toggle and menu) is the hit target. */
a.tree-heading-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.tree-heading-link:hover .tree-name {
  color: var(--accent);
}

a.tree-heading-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 4px;
}

.tree-row-menu {
  flex: 0 0 auto;
  margin: 0 0 0 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.tree-row:hover > .tree-row-menu,
.tree-row-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Touch: reveal on the selected row (no hover). */
@media (hover: none) {
  .tree-node.is-selected > .tree-row > .tree-row-menu,
  .tree-row-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.tree-row-menu .row-menu-toggle {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  opacity: 1;
}

.tree-row-menu .row-menu-toggle svg {
  width: 0.85rem;
  height: 0.85rem;
}

.tree-main {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  flex: 0 1 auto;
  color: inherit;
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.35;
}

.tree-code {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.tree-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

button.tree-name {
  display: inline;
  margin: 0;
  padding: 0.05rem 0.15rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  cursor: text;
}

button.tree-name:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

button.tree-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.tree-rename-form {
  display: inline;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.tree-rename-input {
  box-sizing: content-box;
  display: inline;
  margin: 0;
  padding: 0.05rem 0.15rem;
  min-width: 4ch;
  max-width: 40ch;
  border: 1px solid transparent;
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 70%, var(--accent-soft));
  color: var(--ink);
  font: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  box-shadow: inset 0 -1px 0 var(--accent);
}

.tree-rename-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow:
    inset 0 -1px 0 var(--accent),
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.tree-node.is-renaming > .tree-row {
  background: transparent;
}

.tree-meta {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.tree-add-slot {
  list-style: none;
  margin: 0.2rem 0 0.15rem;
  padding: 0;
}

.tree-root-add {
  margin-top: 0.55rem;
  padding-top: 0.35rem;
  border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}

.tree-root-add > .tree-add-new {
  margin-left: 0;
}

.tree-add-new {
  margin: 0.1rem 0 0.15rem 0.15rem;
  color: var(--accent);
  background: transparent;
}

.tree-add-new:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.tree-add-new:disabled,
.tree-add-slot.is-disabled > .tree-add-new {
  opacity: 0.4;
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
}

.tree-add-new:disabled:hover,
.tree-add-slot.is-disabled > .tree-add-new:hover {
  background: transparent;
  color: var(--muted);
}

/* table-add sets display:inline-flex, which beats the UA [hidden] rule. */
button.tree-add-new[hidden],
.tree-add-slot.is-open > .tree-add-new {
  display: none !important;
}

.tree-add-item {
  list-style: none;
  margin: 0.15rem 0 0.35rem;
  padding: 0;
}

.tree-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px dashed color-mix(in srgb, var(--line) 85%, var(--accent));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent));
}

.tree-add-field {
  flex: 1 1 8rem;
  min-width: 7rem;
  max-width: 16rem;
  margin: 0;
}

.tree-add-field input {
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  box-sizing: border-box;
}

.tree-add-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.tree-add-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.tree-browser.is-movable .tree-row.js-tree-draggable {
  cursor: grab;
}

.tree-browser.is-movable .tree-row.js-tree-draggable:active {
  cursor: grabbing;
}

.tree-node.is-dragging {
  opacity: 0.45;
}

.tree-drag-ghost {
  position: absolute;
  top: -1000px;
  left: -1000px;
  z-index: 9999;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.tree-node.tree-drop-before > .tree-row {
  box-shadow: inset 0 2px 0 0 var(--accent);
}

.tree-node.tree-drop-after > .tree-row {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

.tree-node.tree-drop-into > .tree-row {
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  outline: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  outline-offset: -1px;
}

.tree-browser-body.tree-drop-root {
  outline: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  outline-offset: -4px;
  border-radius: var(--radius);
}

.page:has(> .page-body > .js-view-mode) .tree-browser-chrome {
  flex-shrink: 0;
}

.page:has(> .page-body > .js-view-mode) .tree-browser-body {
  flex: 1 1 0;
  min-height: 0;
}

/* Brand SKU coding template composer. */
.brand-coding-panel {
  max-width: 36rem;
  flex-direction: column;
  align-items: stretch;
}

.brand-coding-template-label {
  display: block;
  margin: 0 0 0.35rem;
}

.brand-coding-editor {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  margin: 0 0 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  letter-spacing: 0.01em;
  cursor: text;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.brand-coding-editor.is-focused,
.brand-coding-editor.is-drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.brand-coding-editor.is-empty:not(.is-focused)::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.brand-coding-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0 0.1rem;
  padding: 0.1rem 0.2rem 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--panel));
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  user-select: none;
  vertical-align: baseline;
  white-space: nowrap;
  cursor: grab;
}

.brand-coding-chip.is-seq {
  letter-spacing: 0.04em;
}

.brand-coding-chip.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.brand-coding-chip-label {
  min-width: 0;
}

button.brand-coding-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  opacity: 0.65;
}

button.brand-coding-chip-remove:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
  opacity: 1;
}

button.brand-coding-chip-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  opacity: 1;
}

.brand-coding-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

button.brand-coding-token-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--panel));
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: grab;
  box-shadow: none;
}

button.brand-coding-token-add:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--muted) 55%, var(--line));
  color: var(--ink);
}

button.brand-coding-token-add:active,
button.brand-coding-token-add.is-dragging {
  cursor: grabbing;
}

button.brand-coding-token-add.is-dragging {
  opacity: 0.55;
}

button.brand-coding-token-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input.code {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}