/* GENERATED by tools/build_css.py from static/arsenal/*.css and static/app.css. Do not edit. */

/* ==== arsenal/arsenal-tokens.css ==== */
:root {
  --navy-50: #EEF1F7;
  --navy-100: #D3DBEA;
  --navy-200: #A7B6D2;
  --navy-300: #7B8FBA;
  --navy-400: #52699C;
  --navy-500: #345289;
  --navy-600: #243D6F;
  --navy-700: #1C3059;
  --navy-800: #152444;
  --navy-900: #0E1930;
  --orange-50: #FDEEE9;
  --orange-100: #FAD2C5;
  --orange-200: #F3AB97;
  --orange-300: #ED8668;
  --orange-400: #E86B47;
  --orange-500: #E4572E;
  --orange-600: #C4431E;
  --orange-700: #9E3717;
  --orange-800: #782910;
  --orange-900: #531C0A;
  --n0: #FFFFFF;
  --n50: #F7F8FA;
  --n100: #EDEFF3;
  --n200: #DDE1E8;
  --n300: #C3C9D4;
  --n400: #98A1B2;
  --n500: #6B7488;
  --n600: #4C5568;
  --n700: #353D4D;
  --n800: #242A36;
  --n900: #12151C;
  --orange-bright: #FF8832;
  --blue: #3363AD;
  --tint: #E9EEF7;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 44px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --bar-h: 64px;
  --ars-bar-h: 64px;
  --ctl-r: 8px;
  --sheet-r: 12px;
  --tag-r: 6px;
  --ctl-h: 36px;
  --ctl-h-sm: 28px;
  --ctl-h-lg: 40px;
  --row-pad: 12px;
  --rail-row: 36px;
  --rail-mod: 40px;
  --pop-row: 40px;
  --fs-body: 14px;
  --fs-btn: 14px;
  --fs-input: 14px;
  --fs-row-title: 15px;
  --fs-nav: 14px;
  --gutter: 24px;
  --bg: #E9EEF7;
  --surface: #FFFFFF;
  --surface-2: #EEF1F7;
  --surface-3: #F5F7FB;
  --line: #E3E9F3;
  --line-strong: #C9D3E3;
  --ink: #16203A;
  --muted: #4A6078;
  --faint: #5A6B85;
  --accent: #E4572E;
  --accent-ink: #9E3717;
  --accent-soft: #FFF1EA;
  --ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #E4572E;
  --el-1: 0 1px 2px rgba(22,32,58,.06);
  --el-2: 0 12px 28px -16px rgba(22,32,58,.30);
  --el-3: 0 24px 48px -20px rgba(30,48,80,.32);
  --nv-page: #E9EEF7;
  --nv-sidebar: #FFFFFF;
  --nv-canvas: #E9EEF7;
  --nv-chrome: #F5F7FB;
  --nv-hover: #EEF1F7;
  --nv-group: #FFFFFF;
  --nv-tile: #E9EEF7;
  --nv-tile-ink: #243D6F;
  --nv-id: #243D6F;
  --nv-leaf: #EEF1F7;
  --nv-skel: #E3E9F3;
  --nv-logo: #243D6F;
  --nv-reg: #243D6F;
  --nv-reg-h: #1C3059;
  --lineage-renamed-bg: #F0F9FF;
  --lineage-renamed-ink: #0C4A6E;
  --lineage-consolidated-bg: #EEF1F7;
  --lineage-consolidated-ink: #1C3059;
  --heading: #243D6F;
  --text-2: #4A6078;
  --placeholder: #5A6B85;
  --control-border: #7A88A3;
  --control-border-strong: #4A6078;
  --chip-border: #C9D3E3;
  --selection: #EEF1F7;
  --selection-strong: #E3E9F3;
  --link: #3363AD;
  --link-h: #243D6F;
  --chevron: #7A88A3;
  --disabled-fill: #EEF1F7;
  --disabled-ink: #8C98AE;
  --avatar: #243D6F;
  --on-avatar: #FFFFFF;
  --scrim: rgba(14,25,48,.42);
  --primary: #C4431E;
  --primary-h: #9E3717;
  --primary-a: #782910;
  --on-primary: #FFFFFF;
  --core: #243D6F;
  --core-h: #1C3059;
  --core-a: #152444;
  --on-core: #FFFFFF;
  --on-nv-reg: #FFFFFF;
  --on-danger: #FFFFFF;
  --icon-tile: #FFF1EA;
  --icon-stroke: #C4431E;
  --well-tile: #EEF1F7;
  --well-stroke: #52699C;
  --rail-bg: #FFFFFF;
  --rail-ink: #16203A;
  --rail-strong: #243D6F;
  --rail-muted: #4A6078;
  --rail-faint: #5A6B85;
  --rail-line: #C9D3E3;
  --rail-edge: #E3E9F3;
  --rail-hover: #EEF1F7;
  --rail-active-bg: #EEF1F7;
  --rail-active-ink: #243D6F;
  --rail-chevron: #7A88A3;
  --cease: #DC3545;
  --cease-a: #A71D2A;
  --on-cease: #FFFFFF;
  --now: #243D6F;
  --on-now: #FFFFFF;
  --hatch-a: #F5F7FB;
  --hatch-b: #E3E9F3;
  --lane-live-bar: #243D6F;
  --reserved-line: #7B8FBA;
  --alarm-ink: #16203A;
  --alarm-heading: #243D6F;
  --alarm-muted: #4A6078;
  --alarm-critical-ink: #A71D2A;
  --alarm-critical-fill: #FDECEE;
  --alarm-critical-line: #F5C2C7;
  --alarm-critical-dot: #DC3545;
  --st-success-ink: #065F46;
  --st-success-fill: #F0FDF4;
  --st-success-line: #BBF7D0;
  --st-success-dot: #0E8A5F;
  --st-warning-ink: #854D0E;
  --st-warning-fill: #FEFCE8;
  --st-warning-line: #FDE68A;
  --st-warning-dot: #B7791F;
  --st-critical-ink: #A71D2A;
  --st-critical-fill: #FDECEE;
  --st-critical-line: #F5C2C7;
  --st-critical-dot: #DC3545;
  --st-info-ink: #243D6F;
  --st-info-fill: #EEF1F7;
  --st-info-line: #D3DBEA;
  --st-info-dot: #3363AD;
  --st-neutral-ink: #4A6078;
  --st-neutral-fill: #F5F7FB;
  --st-neutral-line: #E3E9F3;
  --st-neutral-dot: #6B7A93;
}

:root[data-density="touch"] {
  --ctl-h: 44px;
  --ctl-h-sm: 44px;
  --ctl-h-lg: 48px;
  --row-pad: 16px;
  --rail-row: 44px;
  --rail-mod: 48px;
  --pop-row: 48px;
  --fs-body: 15px;
  --fs-btn: 15px;
  --fs-input: 16px;
  --fs-row-title: 16px;
  --fs-nav: 15px;
  --gutter: 20px;
}

@media screen {
  :root[data-theme="dark"] {
    --bg: #0E1930;
    --surface: #152444;
    --surface-2: #1C3059;
    --surface-3: #1A2A4C;
    --line: #2C3B5B;
    --line-strong: #3A4A69;
    --ink: #EAF0FA;
    --muted: #A7B6D2;
    --faint: #8FA1C6;
    --accent: #E4572E;
    --accent-ink: #F3AB97;
    --accent-soft: #362C40;
    --ring: 0 0 0 2px #152444, 0 0 0 4px #ED8668;
    --el-1: 0 1px 2px rgba(0,0,0,.4);
    --el-2: 0 12px 28px -16px rgba(0,0,0,.7);
    --el-3: 0 24px 48px -20px rgba(0,0,0,.8);
    --nv-page: #0E1930;
    --nv-sidebar: #152444;
    --nv-canvas: #0E1930;
    --nv-chrome: #152444;
    --nv-hover: #1C3059;
    --nv-group: #152444;
    --nv-tile: #1C3059;
    --nv-tile-ink: #A7B6D2;
    --nv-id: #345289;
    --nv-leaf: #1C3059;
    --nv-skel: #22365C;
    --nv-logo: #FFFFFF;
    --nv-reg: #7B8FBA;
    --nv-reg-h: #A7B6D2;
    --lineage-renamed-bg: rgba(51,99,173,.30);
    --lineage-renamed-ink: #D3DBEA;
    --lineage-consolidated-bg: rgba(167,182,210,.16);
    --lineage-consolidated-ink: #D3DBEA;
    --heading: #FFFFFF;
    --text-2: #A7B6D2;
    --placeholder: #8FA1C6;
    --control-border: #6E84B3;
    --control-border-strong: #A7B6D2;
    --chip-border: #3A4A69;
    --selection: #1C3059;
    --selection-strong: #22386A;
    --link: #A9C1EC;
    --link-h: #D3DBEA;
    --chevron: #8FA1C6;
    --disabled-fill: #1A2A4C;
    --disabled-ink: #5D719B;
    --avatar: #345289;
    --on-avatar: #FFFFFF;
    --scrim: rgba(3,7,16,.60);
    --primary: #C4431E;
    --primary-h: #9E3717;
    --primary-a: #782910;
    --on-primary: #FFFFFF;
    --core: #FFFFFF;
    --core-h: #E9EEF7;
    --core-a: #D3DBEA;
    --on-core: #0E1930;
    --on-nv-reg: #0E1930;
    --on-danger: #0E1930;
    --icon-tile: #362C40;
    --icon-stroke: #ED8668;
    --well-tile: #1C3059;
    --well-stroke: #A7B6D2;
    --rail-bg: #152444;
    --rail-ink: #EAF0FA;
    --rail-strong: #FFFFFF;
    --rail-muted: #A7B6D2;
    --rail-faint: #8FA1C6;
    --rail-line: #3A4A69;
    --rail-edge: #2C3B5B;
    --rail-hover: #1C3059;
    --rail-active-bg: #1C3059;
    --rail-active-ink: #FFFFFF;
    --rail-chevron: #8FA1C6;
    --cease: #DC3545;
    --cease-a: #A71D2A;
    --on-cease: #FFFFFF;
    --now: #D3DBEA;
    --on-now: #0E1930;
    --hatch-a: #152444;
    --hatch-b: #1C3059;
    --lane-live-bar: #D3DBEA;
    --reserved-line: #7B8FBA;
    --alarm-ink: #16203A;
    --alarm-heading: #243D6F;
    --alarm-muted: #4A6078;
    --alarm-critical-ink: #A71D2A;
    --alarm-critical-fill: #FDECEE;
    --alarm-critical-line: #F5C2C7;
    --alarm-critical-dot: #DC3545;
    --st-success-ink: #6EE7B7;
    --st-success-fill: #19394E;
    --st-success-line: #24644F;
    --st-success-dot: #34D399;
    --st-warning-ink: #FCD34D;
    --st-warning-fill: #313740;
    --st-warning-line: #6A5A2E;
    --st-warning-dot: #FBBF24;
    --st-critical-ink: #FCA5A5;
    --st-critical-fill: #352F4A;
    --st-critical-line: #7A3E52;
    --st-critical-dot: #F87171;
    --st-info-ink: #C3CFE6;
    --st-info-fill: #293858;
    --st-info-line: #41547E;
    --st-info-dot: #A9C1EC;
    --st-neutral-ink: #A7B6D2;
    --st-neutral-fill: #1A2A4C;
    --st-neutral-line: #2C3B5B;
    --st-neutral-dot: #8FA1C6;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1930;
    --surface: #152444;
    --surface-2: #1C3059;
    --surface-3: #1A2A4C;
    --line: #2C3B5B;
    --line-strong: #3A4A69;
    --ink: #EAF0FA;
    --muted: #A7B6D2;
    --faint: #8FA1C6;
    --accent: #E4572E;
    --accent-ink: #F3AB97;
    --accent-soft: #362C40;
    --ring: 0 0 0 2px #152444, 0 0 0 4px #ED8668;
    --el-1: 0 1px 2px rgba(0,0,0,.4);
    --el-2: 0 12px 28px -16px rgba(0,0,0,.7);
    --el-3: 0 24px 48px -20px rgba(0,0,0,.8);
    --nv-page: #0E1930;
    --nv-sidebar: #152444;
    --nv-canvas: #0E1930;
    --nv-chrome: #152444;
    --nv-hover: #1C3059;
    --nv-group: #152444;
    --nv-tile: #1C3059;
    --nv-tile-ink: #A7B6D2;
    --nv-id: #345289;
    --nv-leaf: #1C3059;
    --nv-skel: #22365C;
    --nv-logo: #FFFFFF;
    --nv-reg: #7B8FBA;
    --nv-reg-h: #A7B6D2;
    --lineage-renamed-bg: rgba(51,99,173,.30);
    --lineage-renamed-ink: #D3DBEA;
    --lineage-consolidated-bg: rgba(167,182,210,.16);
    --lineage-consolidated-ink: #D3DBEA;
    --heading: #FFFFFF;
    --text-2: #A7B6D2;
    --placeholder: #8FA1C6;
    --control-border: #6E84B3;
    --control-border-strong: #A7B6D2;
    --chip-border: #3A4A69;
    --selection: #1C3059;
    --selection-strong: #22386A;
    --link: #A9C1EC;
    --link-h: #D3DBEA;
    --chevron: #8FA1C6;
    --disabled-fill: #1A2A4C;
    --disabled-ink: #5D719B;
    --avatar: #345289;
    --on-avatar: #FFFFFF;
    --scrim: rgba(3,7,16,.60);
    --primary: #C4431E;
    --primary-h: #9E3717;
    --primary-a: #782910;
    --on-primary: #FFFFFF;
    --core: #FFFFFF;
    --core-h: #E9EEF7;
    --core-a: #D3DBEA;
    --on-core: #0E1930;
    --on-nv-reg: #0E1930;
    --on-danger: #0E1930;
    --icon-tile: #362C40;
    --icon-stroke: #ED8668;
    --well-tile: #1C3059;
    --well-stroke: #A7B6D2;
    --rail-bg: #152444;
    --rail-ink: #EAF0FA;
    --rail-strong: #FFFFFF;
    --rail-muted: #A7B6D2;
    --rail-faint: #8FA1C6;
    --rail-line: #3A4A69;
    --rail-edge: #2C3B5B;
    --rail-hover: #1C3059;
    --rail-active-bg: #1C3059;
    --rail-active-ink: #FFFFFF;
    --rail-chevron: #8FA1C6;
    --cease: #DC3545;
    --cease-a: #A71D2A;
    --on-cease: #FFFFFF;
    --now: #D3DBEA;
    --on-now: #0E1930;
    --hatch-a: #152444;
    --hatch-b: #1C3059;
    --lane-live-bar: #D3DBEA;
    --reserved-line: #7B8FBA;
    --alarm-ink: #16203A;
    --alarm-heading: #243D6F;
    --alarm-muted: #4A6078;
    --alarm-critical-ink: #A71D2A;
    --alarm-critical-fill: #FDECEE;
    --alarm-critical-line: #F5C2C7;
    --alarm-critical-dot: #DC3545;
    --st-success-ink: #6EE7B7;
    --st-success-fill: #19394E;
    --st-success-line: #24644F;
    --st-success-dot: #34D399;
    --st-warning-ink: #FCD34D;
    --st-warning-fill: #313740;
    --st-warning-line: #6A5A2E;
    --st-warning-dot: #FBBF24;
    --st-critical-ink: #FCA5A5;
    --st-critical-fill: #352F4A;
    --st-critical-line: #7A3E52;
    --st-critical-dot: #F87171;
    --st-info-ink: #C3CFE6;
    --st-info-fill: #293858;
    --st-info-line: #41547E;
    --st-info-dot: #A9C1EC;
    --st-neutral-ink: #A7B6D2;
    --st-neutral-fill: #1A2A4C;
    --st-neutral-line: #2C3B5B;
    --st-neutral-dot: #8FA1C6;
  }
}
/* ==== arsenal/components.css ==== */
/* Copied verbatim from orchidpos/retailer@64db064d apps/hq-web/src/components/components.css (Erik Sherman's Orchid Arsenal reskin, #73/#81). Do not restyle here. */
.ars-page-header {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ars-page-header__index {
  margin-bottom: 6px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 20px;
  text-transform: uppercase;
}
.ars-page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.ars-page-header__row > .ars-page-title {
  flex: 1 1 auto;
  min-width: 0;
}
.ars-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ars-page-header__lead {
  max-width: 72ch;
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}
.ars-page-title {
  margin: 0;
  color: var(--heading);
  font-size: 28px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: -0.02em;
  white-space: normal;
  overflow-wrap: break-word;
}

.ars-status {
  --t-ink: var(--st-neutral-ink);
  --t-fill: var(--st-neutral-fill);
  --t-line: var(--st-neutral-line);
  --t-dot: var(--st-neutral-dot);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--t-line);
  border-radius: var(--tag-r);
  background: var(--t-fill);
  color: var(--t-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.ars-status > svg {
  flex: none;
  color: var(--t-dot);
}
.ars-status--success {
  --t-ink: var(--st-success-ink);
  --t-fill: var(--st-success-fill);
  --t-line: var(--st-success-line);
  --t-dot: var(--st-success-dot);
}
.ars-status--warning {
  --t-ink: var(--st-warning-ink);
  --t-fill: var(--st-warning-fill);
  --t-line: var(--st-warning-line);
  --t-dot: var(--st-warning-dot);
}
.ars-status--critical {
  --t-ink: var(--st-critical-ink);
  --t-fill: var(--st-critical-fill);
  --t-line: var(--st-critical-line);
  --t-dot: var(--st-critical-dot);
}
.ars-status--info {
  --t-ink: var(--st-info-ink);
  --t-fill: var(--st-info-fill);
  --t-line: var(--st-info-line);
  --t-dot: var(--st-info-dot);
}
.ars-status--solid {
  border-color: var(--t-dot);
  background: var(--t-dot);
  color: var(--on-danger);
}
.ars-status--solid > svg {
  color: inherit;
}
.ars-status--compact {
  height: 26px;
}

.ars-empty.ant-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.45;
  text-align: start;
}
.ars-empty.ant-empty .ant-empty-image {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  opacity: 1;
}
.ars-empty__tile {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ctl-r);
  background: var(--well-tile);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--well-stroke);
}
.ars-empty.ant-empty .ars-empty__tile svg {
  width: 20px;
  height: 20px;
  margin: 0;
}
.ars-empty.ant-empty .ant-empty-description {
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
}
.ars-empty.ant-empty .ant-empty-footer {
  margin: 0;
}

.ars-icon-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ctl-r);
  background: var(--icon-tile);
  color: var(--icon-stroke);
}

.ars-numerals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: 0;
}
.ars-numerals__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
  min-width: 112px;
}
.ars-numerals__figure {
  margin: 0;
  color: var(--heading);
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ars-numerals__caption {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.ars-modules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--sheet-r);
  background: var(--surface);
  overflow: hidden;
}
@media (min-width: 576px) {
  .ars-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .ars-modules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ars-modules__cell {
  box-shadow: 0 0 0 1px var(--line);
}
.ars-modules__link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  column-gap: 16px;
  align-items: start;
  height: 100%;
  min-height: 104px;
  padding: 20px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 120ms;
}
.ars-modules__link:active {
  background: var(--selection);
}
@media (hover: hover) {
  .ars-modules__link:hover {
    background: var(--surface-3);
    color: var(--ink);
  }
}
.ars-modules__link:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--accent),
    inset 0 0 0 4px var(--surface);
}
.ars-modules__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ars-modules__title {
  padding-top: 2px;
  color: var(--heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}
.ars-modules__line {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.45;
}
.ars-modules__chevron {
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--chevron);
}

.ars-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: max(44px, var(--ctl-h-lg));
  cursor: pointer;
}
.ars-switch-row--disabled {
  cursor: not-allowed;
}
.ars-switch-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ars-switch-row__label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.ars-switch-row__help {
  color: var(--text-2);
  font-size: 13px;
  line-height: 18px;
}
.ars-switch-row > .ant-switch {
  flex: none;
}

/* ===========================================================================
   FCH additions (release 3b shared primitives). NOT part of the kit copy
   above: these extend the kit's look to FCH's older shared components
   (components/ui/*, components/UIComponents.js, components/Toast.js).
   Selectors that must beat `.fch-btn` (fch-shell.css loads after this file)
   use two classes.
   =========================================================================== */

/* Extra-small button for dense table rows. Fixed 24 px so a react-window row
   (fixed item size) never grows; the old ui/Button xs was 25–27 px. */
.fch-btn.fch-btn--xs {
  height: 24px;
  padding: 0 8px;
  gap: 4px;
  border-radius: var(--r-sm, 6px);
  font-size: 11px;
}
/* In-row button for dense, fixed-height table rows (UpcRow, CategoryUpcRow,
   category review, preclassified disagreements). Same kit look as .fch-btn
   (border, tones, focus ring); only the box is smaller. Height comes from
   --row-btn-h so each table keeps the exact height its old button had --
   react-window rows have fixed sizes and must not move. */
.fch-btn.fch-btn--row {
  height: var(--row-btn-h, 20px);
  padding: 0 6px;
  gap: 3px;
  border-radius: var(--r-sm, 6px);
  font-size: 10px;          /* the old in-row size: no row grows wider */
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
/* Icon-led buttons in the tightest action columns (CategoryUpcRow). */
.fch-btn.fch-btn--row.fch-btn--tight {
  padding: 0 5px;
  gap: 2px;
}
.fch-btn.fch-btn--row svg {
  width: 12px;
  height: 12px;
}
/* Large button (old ui/Button size="lg"). */
.fch-btn.fch-btn--lg {
  height: var(--ctl-h-lg);
  padding: 0 20px;
  font-size: 15px;
}

/* Status tag sized for dense rows (UpcRow): same tones as .ars-status, 20 px. */
.ars-status.ars-status--xs {
  height: 20px;
  gap: 4px;
  padding: 0 7px 0 6px;
  font-size: 11px;
}

/* Dialog (components/ui/Modal.jsx): white surface, 8 px radius, kit shadow. */
.fch-dialog-scrim {
  background: var(--scrim);
}
.fch-dialog {
  border: 1px solid var(--line);
  border-radius: var(--ctl-r);
  background: var(--surface);
  box-shadow: var(--el-3);
  color: var(--ink);
}
.fch-dialog__title {
  margin: 0;
  color: var(--heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

/* Toast (components/Toast.js): small neutral surface, status shown only by a
   3 px accent on the left and the icon color. */
.fch-toast {
  --toast-accent: var(--st-info-dot);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--toast-accent);
  border-radius: var(--ctl-r);
  background: var(--surface);
  box-shadow: var(--el-2);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.fch-toast--success { --toast-accent: var(--st-success-dot); }
.fch-toast--error { --toast-accent: var(--st-critical-dot); }
.fch-toast--warning { --toast-accent: var(--st-warning-dot); }
.fch-toast--info { --toast-accent: var(--st-info-dot); }
.fch-toast__icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--toast-accent);
}

/* Data table (components/ui/PaginatedDataTable.jsx). Alignment and wrapping
   stay Tailwind classes on the cells so callers' column classes still win. */
.fch-table {
  min-width: 100%;
  border-collapse: collapse;
}
.fch-table > thead > tr > th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.fch-table > tbody > tr + tr {
  border-top: 1px solid var(--line);
}
@media (hover: hover) {
  .fch-table > tbody > tr:hover {
    background: var(--surface-3);
  }
}

/* ==== arsenal/product-icons.css ==== */
/* Copied verbatim from orchidpos/retailer@64db064d apps/hq-web/src/components/product-icons.css (Erik Sherman's Orchid Arsenal reskin, #73/#81). Do not restyle here. */
/* Arsenal product icons (product-icons.tsx). One construction at every size: the navy app tile, radius 0.22 of the
   side T, the product's drawing at T minus twice round(0.09 T), centered, so it lands on whole pixels (30 in the 36
   tile, 36 in the 44), with its lines in white and the accent in bright orange (4.47:1 on the tile; brand orange is under
   3:1 there). Every color is a token; the tile stays Orchid Navy in light and dark. */
.ars-picon {
  --pi-s: 36px;
  --pi-d: 30px;
  --pi-tile: var(--navy-600);
  --pi-line: var(--n0);
  --pi-accent: var(--orange-bright);
  display: inline-grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: var(--pi-s);
  height: var(--pi-s);
  border-radius: calc(var(--pi-s) * 0.22);
  background: var(--pi-tile);
  color: var(--pi-line);
}
.ars-picon > svg {
  display: block;
  width: var(--pi-d);
  height: var(--pi-d);
}
.ars-picon .accent {
  color: var(--pi-accent);
}
.ars-picon--44 {
  --pi-s: 44px;
  --pi-d: 36px;
}
/* Navy only: nothing orange, for the bar on every Range screen, where CEASE FIRE is the one warm color. */
.ars-picon[data-tone="mono"] {
  --pi-accent: var(--n0);
}
/* An app with no address yet: the neutral well. */
.ars-picon[data-tone="off"] {
  --pi-tile: var(--well-tile);
  --pi-line: var(--well-stroke);
  --pi-accent: var(--well-stroke);
}

/* Windows high contrast: the icon is brand art like the lockup, so it keeps its tile and gains an edge. */
@media (forced-colors: active) {
  .ars-picon {
    forced-color-adjust: none;
    outline: 1px solid CanvasText;
  }
}

/* ==== arsenal/rail.css ==== */
/* Copied verbatim from orchidpos/retailer@64db064d apps/hq-web/src/shell/rail.css (Erik Sherman's Orchid Arsenal reskin, #73/#81). Do not restyle here. */
/*
 * The Arsenal frame and rail (spec-0255). Sizes, weights and radii are the standard's
 * (docs/standards/arsenal-shell.md); every colour is a custom property from
 * theme/css-variables.ts, so dark mode needs nothing here. Buttons and links reset to the rail's
 * type so the row grammar (mark, label, disclosure) reads the same at every depth.
 */

/* ---- frame: bar across the top, then rail | main[canvas] ---- */
.ars-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--nv-canvas);
  color: var(--ink);
  font-family: var(--sans);
}
.ars-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.ars-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
/* --ars-incident-h: the serious-incident strip under the bar below 1024 px (utility-bar.css). */
.ars-canvas {
  flex: 1;
  padding: calc(var(--s6) + var(--ars-incident-h, 0px)) var(--gutter) 40px;
}

/* ---- rail ---- */
.ars-rail {
  position: sticky;
  top: var(--ars-bar-h, 0px);
  /* sticky makes the rail a stacking context, and its flyouts mount inside it (popupOnRail); without a z-index the
     report screen's positioned filter bar, later in the DOM, paints over an open flyout (Jon, 2026-09-15). */
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  box-sizing: border-box;
  width: 268px;
  padding-top: calc(var(--s3) + var(--ars-incident-h, 0px));
  height: 100vh;
  height: 100dvh;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-edge);
  color: var(--rail-ink);
}
/*
 * Scoped resets at (0,0,1): `:where()` strips the class from the specificity, so every single-class
 * component rule below (.ars-modbtn, .ars-g2btn, .ars-leaf …) outranks them,
 * while antd's own `button` / `a` resets, at the same specificity, lose on order: rail.css loads later.
 * At (0,1,1) these resets beat the component rules and the group rows rendered 16px/400/ink.
 */
:where(.ars-rail) button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
:where(.ars-rail) a {
  color: inherit;
  text-decoration: none;
}
/* A popover trigger's wrapper: the panel mounts in here, next to its trigger in DOM order (use-popover-menu.ts). */
.ars-anchor {
  position: relative;
}
.ars-body > .ars-rail {
  height: calc(100vh - var(--ars-bar-h));
  height: calc(100dvh - var(--ars-bar-h));
}

.ars-idtile {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ctl-r);
  background: var(--nv-id);
  color: var(--n0);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ars-idtile.ars-sm {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 12px;
}
.ars-idtile.ars-neutral {
  background: var(--surface-3);
  color: var(--text-2);
}
.ars-tx {
  flex: 1;
  min-width: 0;
}
.ars-nm {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ars-sub {
  display: block;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ars-sw {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--chevron);
}

.ars-sdiv {
  height: 1px;
  margin: var(--s2) var(--s3) var(--s3);
  border: 0;
  background: var(--rail-line);
}

/* nav body scrolls; the brand row, store tile and footer stay */
.ars-navbody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s1) var(--s3) var(--s6);
}
.ars-railfoot {
  flex: none;
  padding: var(--s2) var(--s3) var(--s3);
  border-top: 1px solid var(--rail-line);
}
.ars-railfoot .ars-anchor {
  display: block;
}
.ars-helpbtn {
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.ars-grouplbl {
  margin: 2px 0 6px;
  padding: 0 var(--s3);
  color: var(--rail-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * Rows. Every top-level row shares one left edge: 12 px, an 18 px mark, then the label at 40 px.
 * Depth reads from indent and a guide line, never from smaller text.
 */
.ars-leaves,
.ars-leaves3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ars-leaf,
.ars-g2btn,
.ars-modbtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--rail-row);
  margin-bottom: 2px;
  padding: 4px 12px;
  border-radius: var(--ctl-r);
  color: var(--rail-ink);
  font-size: var(--fs-nav);
  line-height: 1.25;
  transition:
    background 0.12s var(--ease),
    color 0.12s var(--ease);
}
.ars-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--rail-muted);
}
.ars-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ars-chev {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--chevron);
  transition: transform 0.16s var(--ease);
}
.ars-rail .ars-chev {
  color: var(--rail-chevron);
}
[aria-expanded="true"] > .ars-chev {
  transform: rotate(90deg);
}
.ars-ic {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--rail-muted);
}

/* module row (Website, Reporting): its rows sit in under its label */
.ars-mod {
  margin-top: var(--s1);
}
.ars-mod.ars-open {
  padding-bottom: var(--s1);
  background: var(--nv-group);
}
.ars-modbtn {
  min-height: var(--rail-mod);
}
.ars-lbl {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ars-modbtn[aria-expanded="true"] .ars-lbl {
  color: var(--rail-strong);
}
.ars-mod > .ars-leaves {
  padding-left: 28px;
}

/* group row (Catalog, Site Builder, Admin, Safety): the module row's grammar one step down */
.ars-g2 {
  position: relative;
}
.ars-g2btn {
  font-weight: 600;
}
.ars-g2btn[aria-expanded="true"] {
  color: var(--rail-strong);
}

/* leaves */
.ars-leaf {
  font-weight: 500;
}
.ars-navbody > .ars-leaves > li > .ars-leaf {
  font-weight: 600;
}
/* A top-level group's rows hang from a guide line under its mark, their words under its label. */
.ars-leaves3 {
  margin: 0 0 6px 20px;
  padding-left: 6px;
  border-left: 1px solid var(--rail-line);
}
.ars-leaves3 .ars-leaf {
  padding-left: 13px;
}
/* Inside a module the group has no mark: the guide line drops just inside its label. */
.ars-mod .ars-leaves3 {
  margin-left: 16px;
}

/* the one place orange is spent: you are here */
.ars-leaf.ars-on {
  background: var(--rail-active-bg);
  box-shadow: none;
  color: var(--rail-active-ink);
  font-weight: 700;
}
.ars-leaf.ars-on .ars-mark {
  color: var(--rail-active-ink);
}
.ars-leaf.ars-on::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: translateY(-50%);
}
.ars-leaf.ars-off {
  color: var(--rail-faint);
  cursor: default;
}
a.ars-leaf:active,
.ars-g2btn:active,
.ars-modbtn:active {
  background: var(--selection);
}
/* the catalog's pending / failed state, in the leaf grammar */
.ars-state {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 6px 12px;
  color: var(--rail-faint);
  font-size: 13px;
}

/* ---- popovers (the bar's Stores, Settings, Help): antd Popover with the standard's panel ---- */
.ars-pop .ant-popover-inner {
  min-width: 264px;
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--sheet-r);
  background: var(--nv-sidebar);
  box-shadow: var(--el-3);
  color: var(--ink);
  font-family: var(--sans);
}
:where(.ars-pop) button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
:where(.ars-pop) a {
  color: inherit;
  text-decoration: none;
}
.ars-plbl {
  margin: 0;
  padding: 8px 12px 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ars-prow {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--pop-row);
  padding: 4px 12px;
  border-radius: var(--ctl-r);
  transition: background 0.12s var(--ease);
}
.ars-prow:active {
  background: var(--selection);
}
.ars-prow .ars-nm {
  font-size: var(--fs-nav);
  font-weight: 600;
  line-height: 1.3;
}
.ars-prow .ars-sub {
  color: var(--text-2);
  font-size: 12px;
}
.ars-prow .ars-ic {
  color: var(--text-2);
}
.ars-pdiv {
  height: 1px;
  margin: 6px 8px;
  border: 0;
  background: var(--line);
}
.ars-tick {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.ars-keys {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0 4px 4px;
  list-style: none;
}
.ars-key {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  color: var(--text-2);
  font-size: 14px;
}
.ars-kbd {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}

/* My reports (spec-0270): the saved builds under the Build a report leaf, a level in from it. Each row is a leaf
   with a menu button that shows on hover or focus (always, on touch); a stale row keeps the leaf's greyed treatment. */
.ars-myreports {
  margin-bottom: 4px;
}
.ars-myreports__lbl {
  margin: 8px 0 4px;
}
.ars-myreport {
  position: relative;
  display: flex;
  align-items: center;
}
.ars-myreport > .ars-leaf {
  flex: 1;
  min-width: 0;
  padding-right: 32px;
}
.ars-myreport__more {
  position: absolute;
  right: 4px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--rail-chevron);
  opacity: 0;
  transform: translateY(-50%);
  transition:
    opacity 0.12s var(--ease),
    background 0.12s var(--ease);
}
.ars-myreport__more:focus-visible,
.ars-myreport__more[aria-expanded="true"] {
  opacity: 1;
}
/* A colleague's saved report says who saved it, on a second line under the name (ADR-0221 decision 5). */
.ars-myreport {
  flex-wrap: wrap;
}
.ars-myreport__by {
  flex-basis: 100%;
  padding: 0 12px 4px 13px;
  color: var(--rail-muted);
  font-size: 12px;
  line-height: 1.3;
}

/* a flyout row that is the page or the current choice: the selection fill, in the popover grammar */
.ars-prow.ars-on,
.ars-prow[aria-current="true"],
.ars-prow[aria-checked="true"] {
  background: var(--selection);
  box-shadow: none;
}
.ars-prow.ars-on .ars-ic {
  color: var(--heading);
}
.ars-prow.ars-off {
  color: var(--faint);
  cursor: default;
}
.ars-prow.ars-off:active {
  background: transparent;
}
/* The menu opens on the current choice, so that row must show the keyboard ring: the current-row rule above sets
   box-shadow: none over the global :focus-visible ring. */
.ars-pop .ars-prow:focus-visible {
  box-shadow: var(--ring);
}

/* The Switch app menu (ProductSwitcher.tsx). It mounts inside the switcher's anchor, so `.ars-suite` scopes it.
   Headed by the website's ARSENAL CORE card as a navy band (the white Arsenal badge, then the menu's label in the
   index voice), then one row per app in alphabetical order: the app icon, the name and one line. The band says
   ARSENAL once for every row, so the rows do not repeat it. */
.ars-suite .ars-pop .ant-popover-inner {
  width: min(360px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}
/* The label sits on ARSENAL's baseline (the badge's bottom edge), and the 22 px badge is centered in the 56 px band. */
.ars-suite .ars-plbl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  height: 56px;
  padding: 17px 16px;
  background: var(--navy-600);
  color: var(--navy-200);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
/* The Arsenal badge (public/brand/arsenal-badge.svg): the bloom and ARSENAL, drawn the way the ORCHID lockup is. */
.ars-badge {
  flex: none;
  height: 22px;
  aspect-ratio: 1417.62 / 281;
  background: var(--n0);
  -webkit-mask: url(/static/brand/arsenal-badge.svg) no-repeat left center / contain;
  mask: url(/static/brand/arsenal-badge.svg) no-repeat left center / contain;
}
.ars-suite [role="menu"] {
  display: grid;
  gap: 2px;
  padding: 8px;
}
.ars-suite .ars-prow {
  gap: 12px;
  min-height: 60px;
  padding: 8px 12px 8px 8px;
}
.ars-suite .ars-prow .ars-nm {
  color: var(--heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
.ars-suite .ars-prow .ars-sub {
  font-size: 13px;
  line-height: 18px;
}
.ars-suite .ars-prow > .ars-ic,
.ars-suite .ars-prow > .ars-tick {
  margin-left: auto;
  padding-left: 4px;
}
.ars-suite .ars-prow.ars-off .ars-nm {
  color: var(--text-2);
}

/* ---- the tablet-portrait drawer: under the bar, so Menu, the store and CEASE FIRE stay in reach ---- */
.ant-drawer.shell-chrome {
  top: calc(var(--bar-h) + var(--ars-incident-h, 0px));
}
.ant-drawer.shell-chrome .ant-drawer-content-wrapper {
  box-shadow: var(--el-3);
}
.ant-drawer.shell-chrome .ant-drawer-content {
  background: var(--rail-bg);
}
.ant-drawer.shell-chrome .ars-rail {
  width: 100%;
  height: 100%;
  padding-top: var(--s3);
  border-right: 0;
}
/* The drawer is a container, not a control: no focus ring on it. */
.ant-drawer.shell-chrome:focus-visible,
.ant-drawer.shell-chrome [data-sentinel]:focus-visible,
.ant-drawer.shell-chrome .ant-drawer-content-wrapper:focus-visible,
.ant-drawer.shell-chrome .ant-drawer-content:focus-visible,
.ant-drawer.shell-chrome .ant-drawer-section:focus-visible {
  outline: none;
  box-shadow: none;
}

@media (hover: hover) {
  a.ars-leaf:not(.ars-on):hover,
  .ars-helpbtn:hover,
  .ars-g2btn:hover,
  .ars-modbtn:hover {
    background: var(--rail-hover);
  }
  .ars-prow:not(.ars-off):hover {
    background: var(--nv-hover);
  }
  .ars-myreport:hover .ars-myreport__more {
    opacity: 1;
  }
  .ars-myreport__more:hover {
    background: var(--nv-hover);
    color: var(--ink);
  }
}
/* Nothing hover-only: on touch the My reports menu button is always there, at 44 px. */
@media (hover: none) {
  .ars-myreport > .ars-leaf {
    padding-right: 48px;
  }
  .ars-myreport__more {
    right: 0;
    width: 44px;
    height: 44px;
    opacity: 1;
  }
}

/* Phone (spec-0271 §18): the canvas gives its margins to the content; the rail is already a drawer here (AppShell.tsx). */
@media (max-width: 560px) {
  .ars-canvas {
    padding: calc(var(--s3) + var(--ars-incident-h, 0px)) var(--s3) var(--s5);
  }
}

/* ==== arsenal/utility-bar.css ==== */
/* Copied verbatim from orchidpos/retailer@64db064d apps/hq-web/src/shell/utility-bar.css (Erik Sherman's Orchid Arsenal reskin, #73/#81). Do not restyle here. */
/* Utility bar, report finder and product switcher: the Arsenal back-office standard
   (docs/standards/arsenal-shell.md). Every colour is a token from theme/css-variables.ts,
   so dark mode needs nothing here. */

/* z-index 10: above the schedule board's sticky label column, so the bar's popovers never sit under it. */
.ars-util {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: var(--bar-h);
  padding: 0 20px;
  background: var(--nv-sidebar);
  border-bottom: 1px solid var(--line);
}

/* Menu: 44 x 44; its word shows where the drawer is the only way to navigate (below 992). */
.ars-util .ars-menubtn.ant-btn {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 6px;
  border-radius: var(--ctl-r);
  color: var(--heading);
}
.ars-menu-lbl {
  display: none;
  font-size: 15px;
  font-weight: 600;
}

/* The lockup at the brand minimum, with one bloom height (18 px) clear on both sides: 12 px gap + 6 px margin. */
.ars-lockup {
  flex: none;
  width: 120px;
  height: 20px;
  margin: 0 6px;
  background: var(--nv-logo);
  -webkit-mask: url(/static/brand/orchid-lockup.png) no-repeat left center / contain;
  mask: url(/static/brand/orchid-lockup.png) no-repeat left center / contain;
}
/* Switch app (ProductSwitcher.tsx): after the lockup's clear space a hairline, like the store's own divider, so the
   ORCHID lockup stands alone; then the current product's Arsenal lockup. One grid, set by the app icon (36 px, so
   u = icon / 9 = 4 px): the icon spans both lines, 2.5u to the name block, ARSENAL with a 2u cap height and its cap
   top at 1u, the product name at 5u in the heavy weight on a baseline at 8u. */
.ars-suite {
  --u: 4px;
  display: inline-flex;
  flex: none;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.ars-prodbtn {
  flex: none;
  display: inline-grid;
  grid-template-columns: calc(11.5 * var(--u)) auto auto;
  grid-template-rows: calc(3 * var(--u)) calc(6 * var(--u));
  align-content: center;
  box-sizing: border-box;
  height: 44px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: calc(var(--ctl-r) + 4px);
  background: transparent;
  color: var(--heading);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.ars-prodbtn[aria-expanded="true"],
.ars-prodbtn:active {
  background: var(--nv-hover);
}
.ars-prodbtn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.ars-prodbtn > .ars-picon {
  grid-row: 1 / 3;
  grid-column: 1;
}
/* ARSENAL: the Arsenal badge's own letters (Montserrat Bold outlines, tracked 0.1 em) without its bloom, drawn
   through a mask in the ORCHID lockup's color. The art is 1.1 cap heights tall with the cap 0.05 down, so a 2u cap
   starting at 1u puts the element 0.9u down. The bloom stays out of the bar: ORCHID carries one and the product's
   app icon another. */
.ars-suite-word {
  grid-row: 1;
  grid-column: 2;
  align-self: start;
  justify-self: start;
  margin-top: calc(0.9 * var(--u));
  height: calc(2.2 * var(--u));
  aspect-ratio: 1123.79 / 154.55;
  background: var(--nv-logo);
  -webkit-mask: url(/static/brand/arsenal-letters.svg) no-repeat left center / contain;
  mask: url(/static/brand/arsenal-letters.svg) no-repeat left center / contain;
}
/* The product name, as the app writes it, on the lockup's baseline (8u): a 5u line box, 0.68u down (Segoe UI's
   metrics plus the quarter unit it renders high in Chrome on Windows). */
.ars-prod {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
  padding-top: calc(0.68 * var(--u));
  font-size: calc(5 * var(--u));
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: calc(5 * var(--u));
}
/* The chevron rides the name's x-height, 6 px after it, and turns over while the menu is open. */
.ars-prodbtn > svg:last-child {
  grid-row: 2;
  grid-column: 3;
  align-self: start;
  margin: calc(3.75 * var(--u) - 7px) 0 0 6px;
  color: var(--chevron);
  transition: transform 0.16s var(--ease);
}
.ars-prodbtn[aria-expanded="true"] > svg:last-child {
  transform: rotate(180deg);
}
@media (forced-colors: active) {
  .ars-suite-word,
  .ars-badge {
    forced-color-adjust: none;
    background: CanvasText;
  }
}
.ars-submenu {
  margin: 0 0 var(--s1) var(--s4);
  padding-left: var(--s1);
  border-left: 1px solid var(--line);
}
.ars-prow .ars-chev {
  color: var(--chevron);
}
.ars-prow[aria-expanded="true"] > .ars-chev {
  transform: rotate(90deg);
}

/* Find a report: in-page, at the head of a reporting screen. */
.ars-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  width: 280px;
  max-width: 100%;
  min-height: var(--ctl-h);
  padding: 0 var(--s3);
  border: 1px solid var(--chip-border);
  border-radius: var(--ctl-r);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s var(--ease);
}
.ars-search:active {
  background: var(--selection);
}
.ars-search:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.ars-search__kbd {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
}
/* A keyboard hint means nothing on a touch screen. */
:root[data-density="touch"] .ars-search__kbd {
  display: none;
}

/* The search, the store and the avatar (store-selector.css); the store gives up width before CEASE FIRE does. */
.ars-ucluster {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}
/* The account popover anchor (rail.css `.ars-anchor`) is a flex item here. */
.ars-ucluster > .ars-anchor {
  display: inline-flex;
}

/* Site-wide search, a placeholder: a 280 px field from 1200 px, its magnifier on the right, against the account button. */
.ars-sitesearch {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  box-sizing: border-box;
  width: 280px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--ctl-r);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--chip-border);
  color: var(--text-2);
}
.ars-sitesearch:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--heading),
    0 0 0 1px var(--heading);
}
.ars-sitesearch input {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

/* Report finder (the ⌘K dialog). */
.ars-search-status {
  display: block;
  margin-top: var(--s3);
}
.ars-search-results {
  max-height: 60vh;
  margin-top: var(--s3);
  overflow: auto;
}
.ars-search-group__label {
  padding: 8px 12px 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ars-search-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--pop-row);
  padding: 0 12px;
  border: 0;
  border-radius: var(--ctl-r);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-nav);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.ars-search-option[aria-selected="true"] {
  background: var(--selection);
}
.ars-search-option:disabled {
  color: var(--faint);
  cursor: default;
}
.ars-search-option__soon {
  margin-left: auto;
  color: var(--faint);
  font-size: 13px;
}
.ars-search-empty {
  margin: var(--s4) 0 0;
  color: var(--text-2);
  font-size: 14px;
  text-align: center;
}

/* Present for assistive technology, not on screen. */
.ars-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* CEASE FIRE and the serious-incident banner: their own group, away from the utility cluster so
   neither is clicked by accident, and beside each other because both can be true at once. */
.ars-stopline {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  margin-left: 12px;
}
/* CEASE FIRE: its red comes from its own ConfigProvider; never squeezed, never hidden. */
.ars-stopline .ant-btn-dangerous {
  flex: none;
  min-width: 148px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
/* While a cease fire is in effect, All clear takes CEASE FIRE's slot and size, and the bar's rule turns red. */
.ars-util .ars-stopline .ars-allclear.ant-btn,
.ars-util .ars-stopline .ars-allclear.ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
  flex: none;
  min-width: 148px;
  border: 2px solid var(--cease);
  background: var(--surface);
  color: var(--st-critical-ink);
  font-size: 15px;
  font-weight: 800;
}
.ars-util .ars-stopline .ars-allclear.ant-btn:not(:disabled):not(.ant-btn-disabled):active {
  border-color: var(--cease-a);
  background: var(--st-critical-fill);
  color: var(--st-critical-ink);
}
.ars-ceaserule {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  background: var(--cease);
  pointer-events: none;
}
/* A serious incident: a status chip with its words, never a second red button. */
.ars-incident {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--st-critical-dot);
  border-radius: var(--ctl-r);
  background: var(--st-critical-fill);
  color: var(--st-critical-ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

@media (hover: hover) {
  .ars-prodbtn:hover,
  .ars-util .ars-menubtn.ant-btn:not(:disabled):hover {
    background: var(--nv-hover);
  }
  .ars-search:hover {
    border-color: var(--control-border-strong);
  }
  .ars-search-option:not(:disabled):hover {
    background: var(--nv-hover);
  }
}
@media (hover: none) {
  .ars-util .ars-menubtn.ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
    background: transparent;
  }
}

/* Collapse ladder: CEASE FIRE never yields. The switcher gives back its own art first, and CEASE FIRE, the incident
   status and the store never yield to it.
   1. 1024 to 1439 px while a serious incident shares the bar (the incident banner sets data-incident; only Range
      screens carry one): the app icon steps out, leaving ARSENAL over the product name. */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root[data-incident] .ars-prodbtn {
    grid-template-columns: 0 auto auto;
    padding-left: 10px;
    border-radius: var(--ctl-r);
  }
  :root[data-incident] .ars-prodbtn > .ars-picon {
    display: none;
  }
}
@media (max-width: 1199px) {
  /* The search becomes an unboxed 44 px icon; focusing it opens a visible field under the bar's right edge. */
  .ars-sitesearch {
    width: 44px;
    padding: 0;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    color: var(--heading);
  }
  .ars-sitesearch svg {
    width: 20px;
    height: 20px;
  }
  .ars-sitesearch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
  .ars-sitesearch:focus-within {
    background: var(--selection);
    box-shadow: none;
  }
  .ars-sitesearch:focus-within input {
    position: fixed;
    inset: calc(var(--bar-h) + var(--ars-incident-h, 0px) + 8px) 16px auto auto;
    z-index: 20;
    box-sizing: border-box;
    width: min(360px, calc(100vw - 32px));
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--heading);
    border-radius: var(--ctl-r);
    background: var(--surface);
    box-shadow:
      0 0 0 1px var(--heading),
      var(--el-3);
    color: var(--ink);
    opacity: 1;
    cursor: text;
  }
}
@media screen and (max-width: 1023px) {
  /* The incident chip becomes a full-width strip under the bar, keeping every word; the canvas makes room. */
  :root[data-incident] {
    --ars-incident-h: 44px;
  }
  .ars-incident {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    border-width: 0 0 1.5px;
    border-radius: 0;
  }
}
@media (max-width: 991px) {
  .ars-util {
    gap: 8px;
    padding: 0 16px;
  }
  .ars-util .ars-menubtn.ant-btn {
    width: auto;
    padding: 0 12px 0 10px;
  }
  .ars-util .ars-menubtn.ant-btn[aria-expanded="true"],
  .ars-util .ars-menubtn.ant-btn[aria-expanded="true"]:not(:disabled):not(.ant-btn-disabled):hover {
    background: var(--selection);
  }
  .ars-menu-lbl {
    display: inline;
  }
  /* 8 px gap + 10 px margin keeps one bloom height clear beside the lockup. */
  .ars-lockup {
    margin: 0 10px;
  }
  .ars-stopline {
    margin-left: 4px;
  }
  /* 2. A Range screen on a portrait iPad: the app icon and the hairline step out, so a short store name stays whole
        beside CEASE FIRE and a long one keeps most of its room. ARSENAL over Range stays. */
  .ars-suite[data-product="range"] {
    padding-left: 0;
    border-left: 0;
  }
  .ars-suite[data-product="range"] > .ars-prodbtn {
    grid-template-columns: 0 auto auto;
    padding-left: 10px;
    border-radius: var(--ctl-r);
  }
  .ars-suite[data-product="range"] > .ars-prodbtn > .ars-picon {
    display: none;
  }
}

@media (max-width: 560px) {
  /* 3. Phones, where the ORCHID lockup hides: ARSENAL over the product name on every product. */
  .ars-suite {
    padding-left: 0;
    border-left: 0;
  }
  .ars-prodbtn {
    grid-template-columns: 0 auto auto;
    padding-left: 10px;
    border-radius: var(--ctl-r);
  }
  .ars-prodbtn > .ars-picon {
    display: none;
  }
  /* One line: at 390 px the placeholder wrapped to two and the bar grew a row (spec-0271 §18). */
  .ars-search {
    max-width: none;
    width: 100%;
    white-space: nowrap;
  }
  .ars-lockup {
    display: none;
  }
}

/* ==== arsenal/settings-rows.css ==== */
/* Copied verbatim from orchidpos/retailer@64db064d apps/hq-web/src/website/screens/settings-rows.css (Erik Sherman's Orchid Arsenal reskin, #73/#81). Do not restyle here. */
.ars-settings + .ars-settings {
  margin-top: 28px;
}
.ars-settings__title {
  margin: 0 0 4px;
  color: var(--heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}
.ars-settings__lead {
  max-width: 72ch;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}
.ars-settings__rows > * + * {
  border-top: 1px solid var(--line);
}
.ars-settings__rows > .ars-switch-row {
  padding-block: 4px;
}

.ars-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-block: 12px;
}
.ars-setting__text,
.ars-setting__control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.ars-setting__control {
  max-width: 720px;
}
.ars-setting--full {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.ars-setting__label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.ars-setting__note {
  max-width: 72ch;
  color: var(--text-2);
  font-size: 13px;
  line-height: 18px;
}

@media (min-width: 992px) {
  .ars-setting:not(.ars-setting--full) {
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .ars-setting:not(.ars-setting--full) > .ars-setting__text {
    padding-top: calc((var(--ctl-h) - 20px) / 2);
  }
  .ars-setting--radios:not(.ars-setting--full) > .ars-setting__text {
    padding-top: 1px;
  }
}

/* ==== arsenal/shell.css ==== */
/*
 * FCH's own shell pieces, for the parts of the Arsenal shell the kit builds with Ant Design
 * (the Menu button, popovers, the narrow-screen drawer). Drawn only with the kit's tokens, in the
 * kit's sizes, so they read as the kit's own. The kit files next to this one are verbatim copies.
 */

/* Menu: 44 x 44; its word shows below 992 px, where the drawer is the only way to navigate. */
.fch-menubtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--ctl-r);
  background: transparent;
  color: var(--heading);
  cursor: pointer;
}
.fch-menubtn:focus-visible,
.fch-avatarbtn:focus-visible,
.fch-prow:focus-visible,
.fch-segbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--heading);
}

/* The product lockup is a name here, not a switcher: FCH has no other apps to switch to. */
.fch-prod-static {
  cursor: default;
}
/* No ARSENAL word over the name (Michelle, 10-15): the name sits centered beside the app icon. */
.fch-prod-static.ars-prodbtn {
  grid-template-columns: calc(11.5 * var(--u)) auto;
  grid-template-rows: auto;
  align-items: center;
}
.fch-prod-static > .ars-picon {
  grid-row: 1;
}
.fch-prod-static > .ars-prod {
  grid-row: 1;
  align-self: center;
  padding-top: 0;
}
@media (max-width: 560px) {
  .fch-prod-static.ars-prodbtn {
    grid-template-columns: 0 auto;
  }
}

/* The person on the right: name, then the avatar that opens the account menu. */
.fch-who {
  overflow: hidden;
  max-width: 220px;
  color: var(--heading);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fch-avatarbtn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.fch-av {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--avatar);
  color: var(--on-avatar);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Popover panel: the kit's .ars-pop panel without Ant Design. */
.fch-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  min-width: 264px;
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--sheet-r);
  background: var(--nv-sidebar);
  box-shadow: var(--el-3);
  color: var(--ink);
  font-family: var(--sans);
}
.fch-pop-who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.fch-pop-who .fch-av {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.fch-pop-nm {
  display: block;
  color: var(--heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
.fch-pop-sub {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  line-height: 18px;
}
.fch-plbl {
  margin: 0;
  padding: 8px 12px 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fch-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0 8px 8px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--ctl-r);
  background: var(--surface-3);
}
.fch-segbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border: 0;
  border-radius: calc(var(--ctl-r) - 2px);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.fch-segbtn[aria-checked="true"] {
  background: var(--surface);
  box-shadow: var(--el-1);
  color: var(--heading);
}
.fch-prow {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--pop-row);
  padding: 4px 12px;
  border: 0;
  border-radius: var(--ctl-r);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-nav);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fch-prow svg {
  color: var(--text-2);
}

/* Counts on rail rows: a navy pill for a queue waiting on a person, a warning-toned one for a backlog. */
.fch-count {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.fch-count--alert {
  background: var(--core);
  color: var(--on-core);
}
.fch-count--badge {
  border: 1px solid var(--st-warning-line);
  background: var(--st-warning-fill);
  color: var(--st-warning-ink);
}

/* The rail: hidden by Menu on wide screens, a drawer under the bar below 992 px. */
.fch-scrim {
  display: none;
}
@media (min-width: 992px) {
  .fch-rail--closed {
    display: none;
  }
}
@media (max-width: 991px) {
  .fch-menubtn {
    width: auto;
    padding: 0 12px 0 10px;
  }
  .fch-menubtn[aria-expanded="true"] {
    background: var(--selection);
  }
  .fch-menubtn .ars-menu-lbl {
    display: inline;
  }
  .ars-body > .fch-rail {
    position: fixed;
    top: var(--bar-h);
    left: 0;
    z-index: 40;
    width: 268px;
    height: calc(100dvh - var(--bar-h));
    box-shadow: var(--el-3);
    transform: translateX(-100%);
    transition: transform 0.2s var(--ease);
  }
  :root[data-density="touch"] .ars-body > .fch-rail {
    width: 320px;
  }
  .ars-body > .fch-rail.fch-rail--drawer {
    transform: none;
  }
  .fch-scrim.fch-scrim--on {
    display: block;
    position: fixed;
    inset: var(--bar-h) 0 0 0;
    z-index: 35;
    background: var(--scrim);
  }
}
@media (max-width: 560px) {
  .fch-who {
    display: none;
  }
}

@media (hover: hover) {
  .fch-menubtn:hover,
  .fch-prow:hover {
    background: var(--nv-hover);
  }
  .fch-segbtn:not([aria-checked="true"]):hover {
    color: var(--heading);
  }
}

/* ---- Page furniture (release 2): the kit's frame sheet and buttons, without Ant Design ---- */

/* The page: canvas padding as in the kit (.ars-canvas), then header, then the white sheet. */
.fch-page {
  padding: var(--s6) var(--gutter) 40px;
}
.fch-page > .ars-page-header + * {
  margin-top: 20px;
}
@media (max-width: 560px) {
  .fch-page {
    padding: var(--s3) var(--s3) var(--s5);
  }
}
.fch-sheet {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--sheet-r);
  background: var(--surface);
}
.fch-sheet + .fch-sheet {
  margin-top: 20px;
}
.fch-sheet > * + * {
  margin-top: 24px;
}
@media (max-width: 560px) {
  .fch-sheet {
    padding: var(--s3);
  }
}
/* A wide table inside a sheet scrolls sideways instead of widening the page. */
.fch-scroll-x {
  position: relative; /* so absolutely positioned bits (sr-only labels) are clipped too */
  max-width: 100%;
  overflow-x: auto;
}

/* Buttons: outlined navy is the default; the page's ONE main action is orange (--primary). */
.fch-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--ctl-h);
  padding: 0 15px;
  border: 1px solid var(--heading);
  border-radius: var(--ctl-r);
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
.fch-btn--sm {
  height: var(--ctl-h-sm);
  padding: 0 10px;
  font-size: 13px;
}
.fch-btn--core {
  border-color: var(--core);
  background: var(--core);
  color: var(--on-core);
}
.fch-btn--main {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}
.fch-btn--quiet {
  border-color: transparent;
  background: transparent;
}
.fch-btn--danger {
  border-color: var(--st-critical-dot);
  color: var(--st-critical-ink);
}
.fch-btn:disabled {
  border-color: transparent;
  background: var(--disabled-fill);
  color: var(--disabled-ink);
  cursor: not-allowed;
}
.fch-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--heading);
}
.fch-btn:active:not(:disabled) {
  background: var(--selection);
}
.fch-btn--core:active:not(:disabled) {
  background: var(--core-a);
}
.fch-btn--main:active:not(:disabled) {
  border-color: var(--primary-a);
  background: var(--primary-a);
}
@media (hover: hover) {
  .fch-btn:hover:not(:disabled) {
    background: var(--nv-hover);
  }
  .fch-btn--core:hover:not(:disabled) {
    border-color: var(--core-h);
    background: var(--core-h);
  }
  .fch-btn--main:hover:not(:disabled) {
    border-color: var(--primary-h);
    background: var(--primary-h);
  }
}

/* Help with this page: a side panel, so the page you were on stays put. */
.fch-help-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--scrim);
}
.fch-help-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  background: var(--surface);
  box-shadow: var(--el-3);
  color: var(--ink);
}
.fch-help-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--line);
}
.fch-help-head h2 {
  flex: 1;
  margin: 0;
  color: var(--heading);
  font-size: 16px;
  font-weight: 700;
}
.fch-help-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.fch-help-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.fch-help-list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.fch-help-list > li:last-child {
  border-bottom: 1px solid var(--line);
}
.fch-help-item {
  flex: 1;
  min-width: 0;
}
.fch-help-item b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.fch-help-item span,
.fch-help-meta {
  color: var(--text-2);
  font-size: 13px;
}
.fch-help-steps {
  list-style: decimal;
  margin: 12px 0 0;
  padding-left: 20px;
  line-height: 1.55;
}
.fch-help-steps > li + li {
  margin-top: 8px;
}
.fch-help-tip {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--st-info-line);
  border-radius: var(--ctl-r);
  background: var(--st-info-fill);
  color: var(--st-info-ink);
  font-size: 14px;
  line-height: 1.5;
}

/* ==== app.css ==== */
/*
 * Accounting Command's own styles on top of the Orchid Arsenal kit (static/arsenal/).
 *
 * The pages were written against a small set of shared classes (.card, .btn, table, .badge,
 * .flash, .stat) and a handful of color variables. Both are redrawn here with the kit's tokens,
 * so every page changes look without its markup changing. Pages are restyled one area at a
 * time after this; until a page has been, its inline hex colors stay as they were.
 *
 * Colors are always a kit variable, never a hex value, so light and dark both work.
 */

/* ---- The variables the pages already use, pointed at the kit's roles ----
 * --primary is NOT redefined: in the kit it is the orange of the page's one main action, and
 * the pages' old blue uses (links, active tabs, focus borders) now read var(--link) instead. */
:root {
  --border: var(--line);
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-secondary: var(--muted);
  --card-bg: var(--surface);
  --success: var(--st-success-dot);
  --danger: var(--st-critical-dot);
  --warning: var(--st-warning-dot);
}

/* ---- Base ---- */
/* `hidden` always hides, even on elements whose class sets display (the help panel). */
[hidden] { display: none !important; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
body {
  background: var(--nv-canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
a:hover { color: var(--link-h); }

h1 { margin-bottom: 4px; color: var(--heading); font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
h2 { margin-bottom: 6px; color: var(--heading); font-size: 18px; font-weight: 700; }
h3 { margin-bottom: 4px; color: var(--text-2); font-size: 14px; font-weight: 700; }
p { margin-bottom: 6px; }
.text-muted { color: var(--muted); font-size: 13px; }

/* ---- The page: canvas padding as in the kit (.ars-canvas) ---- */
.container {
  width: 100%;
  max-width: 1400px;
  padding: var(--s6) var(--gutter) 40px;
}
@media (max-width: 560px) {
  .container { padding: var(--s3) var(--s3) var(--s5); }
}

/* ---- Cards are the kit's white frame sheet ---- */
.card {
  min-width: 0;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--sheet-r);
  background: var(--surface);
}
@media (max-width: 560px) {
  .card { padding: var(--s3); }
}
/* No overflow on .card itself: it would clip the merchant typeahead and other dropdowns.
 * Wide tables get a .fch-scroll-x wrapper page by page instead. */

/* ---- Buttons ----
 * Outlined navy is the default. .btn-primary and .btn-success were the old blue and green
 * solid buttons; both become the kit's solid navy (core) until each page picks its ONE main
 * action, which alone turns orange (.btn-main). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ctl-h);
  padding: 0 15px;
  border: 1px solid var(--heading);
  border-radius: var(--ctl-r);
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
.btn-primary,
.btn-success {
  border-color: var(--core);
  background: var(--core);
  color: var(--on-core);
}
.btn-main {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}
.btn-outline {
  border-color: var(--heading);
  background: var(--surface);
  color: var(--heading);
}
.btn-quiet {
  border-color: transparent;
  background: transparent;
}
.btn-danger {
  border-color: var(--st-critical-dot);
  background: var(--surface);
  color: var(--st-critical-ink);
}
.btn:disabled,
.btn[disabled] {
  border-color: transparent;
  background: var(--disabled-fill);
  color: var(--disabled-ink);
  cursor: not-allowed;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--heading);
}
@media (hover: hover) {
  .btn:hover:not(:disabled) { background: var(--nv-hover); color: var(--heading); }
  .btn-primary:hover:not(:disabled),
  .btn-success:hover:not(:disabled) { border-color: var(--core-h); background: var(--core-h); color: var(--on-core); }
  .btn-main:hover:not(:disabled) { border-color: var(--primary-h); background: var(--primary-h); color: var(--on-primary); }
}

/* ---- Form controls ---- */
input[type="file"], input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select {
  width: 100%;
  max-width: 400px;
  padding: 6px 10px; /* no min-height: dense pages (Command Center) size their own inputs */
  border: 1px solid var(--control-border);
  border-radius: var(--ctl-r);
  font: inherit;
  font-size: var(--fs-input);
}
/* Every control without its own background takes the surface and ink, so dark mode never
 * shows a white box with pale text. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background-color: var(--surface);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--disabled-fill);
  color: var(--disabled-ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--heading);
  box-shadow: 0 0 0 1px var(--heading);
}
input[type="number"], input[type="date"], input[type="month"], textarea {
  padding: 4px 8px;
  border: 1px solid var(--control-border);
  border-radius: var(--ctl-r);
  font: inherit;
}
code { padding: 1px 5px; border-radius: var(--r-xs); background: var(--surface-2); font-family: var(--mono); font-size: 0.92em; }
label { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; font-weight: 600; }
.form-group { margin-bottom: 12px; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
tr:hover { background: var(--nv-hover); }

/* ---- Status: tones, not raw colors ---- */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: var(--tag-r);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.badge-success { border-color: var(--st-success-line); background: var(--st-success-fill); color: var(--st-success-ink); }
.badge-warning { border-color: var(--st-warning-line); background: var(--st-warning-fill); color: var(--st-warning-ink); }
.badge-danger { border-color: var(--st-critical-line); background: var(--st-critical-fill); color: var(--st-critical-ink); }
.badge-info { border-color: var(--st-info-line); background: var(--st-info-fill); color: var(--st-info-ink); }
.badge-muted { border-color: var(--st-neutral-line); background: var(--st-neutral-fill); color: var(--st-neutral-ink); }

.flash {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--ctl-r);
  font-size: 14px;
}
.flash-error { border-color: var(--st-critical-line); background: var(--st-critical-fill); color: var(--st-critical-ink); }
.flash-success { border-color: var(--st-success-line); background: var(--st-success-fill); color: var(--st-success-ink); }
.flash-info { border-color: var(--st-info-line); background: var(--st-info-fill); color: var(--st-info-ink); }

/* ---- Figures ---- */
.stats { display: flex; flex-wrap: wrap; gap: 16px; }
.stat {
  flex: 1;
  min-width: 120px;
  padding: 10px;
  border-radius: var(--ctl-r);
  background: var(--surface-3);
  text-align: center;
}
.stat-value { color: var(--heading); font-size: 24px; font-weight: 800; }
.stat-label { color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.amount { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.score-bar {
  display: inline-block;
  width: 50px;
  height: 6px;
  margin-right: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
  vertical-align: middle;
}
.score-fill { height: 100%; border-radius: 3px; }

/* ---- Shell pieces this app adds ---- */
/* The rail's icons are inline SVG here (FCH draws them with lucide-react). */
.ars-mark svg, .ars-chev svg, .fch-menubtn svg, .fch-prow svg, .ars-picon svg { display: block; }
/* "Accounting Command" is longer than FCH's "Catalog Hub": smaller on a phone so the avatar fits. */
@media (max-width: 560px) {
  .fch-prod-static .ars-prod { font-size: 17px; }
}
.fch-segbtn svg { display: block; }
/* Connect Zoho sits in the account menu as a plain row. */
a.fch-prow { color: var(--ink); text-decoration: none; }

/* ---- Page parts (release 3 on): use these instead of inline style="" colors ---- */
/* Page header: the kit's .ars-page-header / .ars-page-title / __lead / __actions (components.css). */
.ars-page-header { margin-bottom: 20px; }

/* Text tones. Status words and figures, never decoration. */
.tone-success { color: var(--st-success-ink); }
.tone-warning { color: var(--st-warning-ink); }
.tone-critical { color: var(--st-critical-ink); }
.tone-info { color: var(--st-info-ink); }
.tone-muted, .muted { color: var(--text-2); }
.small { font-size: 13px; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* A boxed note inside a sheet: the flash look, any tone. */
.flash-warning { border-color: var(--st-warning-line); background: var(--st-warning-fill); color: var(--st-warning-ink); }
.note { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--st-neutral-line); border-radius: var(--ctl-r);
        background: var(--st-neutral-fill); color: var(--st-neutral-ink); font-size: 14px; }
.note--success { border-color: var(--st-success-line); background: var(--st-success-fill); color: var(--st-success-ink); }
.note--warning { border-color: var(--st-warning-line); background: var(--st-warning-fill); color: var(--st-warning-ink); }
.note--critical { border-color: var(--st-critical-line); background: var(--st-critical-fill); color: var(--st-critical-ink); }
.note--info { border-color: var(--st-info-line); background: var(--st-info-fill); color: var(--st-info-ink); }

/* A row of controls: filters, search, buttons. Wraps on a phone. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.toolbar > .spacer { flex: 1; }
.toolbar input[type="text"], .toolbar select { width: auto; }

/* Smaller buttons: --sm for toolbars and cards, --xs for buttons inside table rows. */
.btn-sm { min-height: var(--ctl-h-sm); padding: 0 10px; font-size: 13px; }
.btn-xs { min-height: 24px; padding: 0 8px; border-radius: var(--r-sm); font-size: 12px; }
/* A button that reads as a link (secondary actions inside text). */
.btn-link { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; }
.btn-link:hover { color: var(--link-h); text-decoration: underline; }

/* Wide tables: wrap in <div class="fch-scroll-x"> so a phone scrolls the table, not the page. */
.fch-scroll-x > table { min-width: 640px; }
.fch-scroll-x { -webkit-overflow-scrolling: touch; }

/* Tabs across the top of a page (the _tabs partials). */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 12px; border-bottom: 3px solid transparent; color: var(--text-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tabs a[aria-current="page"] { border-bottom-color: var(--heading); color: var(--heading); }

/* Expanders. */
details > summary { color: var(--heading); font-weight: 600; cursor: pointer; }

/* Selected / highlighted table rows. */
tr.is-selected, tr.is-selected:hover { background: var(--selection-strong); }
tr.is-muted td { color: var(--disabled-ink); }

/* Last-updated line beside a page or section heading. */
.as-of { color: var(--text-2); font-size: 13px; }