/* Generated by site/explore/build.mjs from site/explore/styles/. Edit those, not this. */

/* ---- 00-base.css ---- */
/*
 * Tim's Dorris, with made-up data — base styles.
 *
 * GENERATED OUTPUT is site/public/explore/explore.css: the build joins this file and every
 * other file in site/explore/styles/, in name order. Edit these, never the output.
 *
 * This is Dorris's own "Pebble" theme (warm cream, white cards, emerald), copied value for
 * value from its stylesheet and from the Tailwind defaults it builds on. The class names
 * are ours: the explore copy is plain HTML with one stylesheet, no Tailwind.
 *
 * The site's CSP allows no inline style, so nothing here may depend on a style="" attribute.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}

/* ------------------------------------------------------------------ tokens */

:root {
  --background: #f5f0e8;
  --foreground: #1c1917;
  --card: #ffffff;
  --card-foreground: #1c1917;
  --primary: #059669;
  --primary-foreground: #ffffff;
  --secondary: #f7f3ed;
  --secondary-foreground: #1c1917;
  --muted: #f7f3ed;
  --muted-foreground: #78716c;
  --accent: #059669;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --border: #e5e0d8;
  --input: #e5e0d8;
  --ring: #059669;
  --sidebar: #ffffff;
  --sidebar-foreground: #1c1917;
  --status-yellow-bg: #fef3c7;
  --status-yellow-fg: #a16207;
  --status-green-bg: #d1fae5;
  --status-green-fg: #047857;
  --primary-ring: rgba(5, 150, 105, 0.3);
  --primary-tint: rgba(5, 150, 105, 0.1);
  --fg-subtle: rgba(28, 25, 23, 0.4);

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Tailwind's palette, for the status colours Dorris uses (Tailwind v4 values). */
  --zinc-100: oklch(96.7% 0.001 286.375); --zinc-300: oklch(87.1% 0.006 286.286);
  --zinc-700: oklch(37% 0.013 285.805); --zinc-800: oklch(27.4% 0.006 286.033);
  --blue-50: oklch(97% 0.014 254.604); --blue-100: oklch(93.2% 0.032 255.585); --blue-200: oklch(88.2% 0.059 254.128);
  --blue-300: oklch(80.9% 0.105 251.813); --blue-500: oklch(62.3% 0.214 259.815); --blue-600: oklch(54.6% 0.245 262.881);
  --blue-700: oklch(48.8% 0.243 264.376); --blue-800: oklch(42.4% 0.199 265.638); --blue-900: oklch(37.9% 0.146 265.522);
  --green-100: oklch(96.2% 0.044 156.743); --green-300: oklch(87.1% 0.15 154.449); --green-500: oklch(72.3% 0.219 149.579);
  --green-600: oklch(62.7% 0.194 149.214); --green-700: oklch(52.7% 0.154 150.069); --green-900: oklch(39.3% 0.095 152.535);
  --emerald-50: oklch(97.9% 0.021 166.113); --emerald-100: oklch(95% 0.052 163.051); --emerald-200: oklch(90.5% 0.093 164.15);
  --emerald-500: oklch(69.6% 0.17 162.48); --emerald-600: oklch(59.6% 0.145 163.225); --emerald-700: oklch(50.8% 0.118 165.612);
  --emerald-800: oklch(43.2% 0.095 166.913);
  --yellow-100: oklch(97.3% 0.071 103.193); --yellow-300: oklch(90.5% 0.182 98.111); --yellow-700: oklch(55.4% 0.135 66.442);
  --yellow-900: oklch(42.1% 0.095 57.708);
  --amber-50: oklch(98.7% 0.022 95.277); --amber-100: oklch(96.2% 0.059 95.617); --amber-200: oklch(92.4% 0.12 95.746);
  --amber-300: oklch(87.9% 0.169 91.605); --amber-500: oklch(76.9% 0.188 70.08); --amber-600: oklch(66.6% 0.179 58.318);
  --amber-700: oklch(55.5% 0.163 48.998); --amber-800: oklch(47.3% 0.137 46.201);
  --orange-100: oklch(95.4% 0.038 75.164); --orange-300: oklch(83.7% 0.128 66.29); --orange-500: oklch(70.5% 0.213 47.604);
  --orange-700: oklch(55.3% 0.195 38.402); --orange-900: oklch(40.8% 0.123 38.172);
  --red-50: oklch(97.1% 0.013 17.38); --red-100: oklch(93.6% 0.032 17.717); --red-200: oklch(88.5% 0.062 18.334);
  --red-300: oklch(80.8% 0.114 19.571); --red-500: oklch(63.7% 0.237 25.331); --red-600: oklch(57.7% 0.245 27.325);
  --red-700: oklch(50.5% 0.213 27.518); --red-900: oklch(39.6% 0.141 25.723);
  --purple-100: oklch(94.6% 0.033 307.174); --purple-300: oklch(82.7% 0.119 306.383); --purple-700: oklch(49.6% 0.265 301.924);
  --purple-900: oklch(38.1% 0.176 304.987);
  --indigo-100: oklch(93% 0.034 272.788); --indigo-300: oklch(78.5% 0.115 274.713); --indigo-700: oklch(45.7% 0.24 277.023);
  --indigo-900: oklch(35.9% 0.144 278.697);
  --sky-100: oklch(95.1% 0.026 236.824); --sky-700: oklch(50% 0.134 242.749);
  --violet-100: oklch(94.3% 0.029 294.588); --violet-700: oklch(49.1% 0.27 292.581);
  --rose-100: oklch(94.1% 0.03 12.58); --rose-700: oklch(51.4% 0.222 16.935);
  --teal-100: oklch(95.3% 0.051 180.801); --teal-700: oklch(51.1% 0.096 186.391);
  --stone-100: oklch(97% 0.001 106.424); --stone-200: oklch(92.3% 0.003 48.717); --stone-400: oklch(70.9% 0.01 56.259);
  --stone-500: oklch(55.3% 0.013 58.071); --stone-600: oklch(44.4% 0.011 73.639); --stone-900: oklch(21.6% 0.006 56.043);

  color-scheme: light;
}

.dark {
  --background: #1c1917;
  --foreground: #f5f0e8;
  --card: #292524;
  --card-foreground: #f5f0e8;
  --primary: #10b981;
  --primary-foreground: #ffffff;
  --secondary: #292524;
  --secondary-foreground: #f5f0e8;
  --muted: #292524;
  --muted-foreground: #a8a29e;
  --accent: #10b981;
  --accent-foreground: #ffffff;
  --destructive: #f87171;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.1);
  --ring: #10b981;
  --sidebar: #212121;
  --sidebar-foreground: #e7e5e4;
  --status-yellow-bg: #451a03;
  --status-yellow-fg: #fde68a;
  --status-green-bg: #064e3b;
  --status-green-fg: #6ee7b7;
  --primary-ring: rgba(16, 185, 129, 0.4);
  --primary-tint: rgba(16, 185, 129, 0.12);
  --fg-subtle: rgba(255, 255, 255, 0.35);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ preflight (Tailwind's, trimmed) */

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
* { border-color: var(--border); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--font-sans); }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; }
small { font-size: 80%; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, select, optgroup, textarea {
  font: inherit; font-feature-settings: inherit; font-variation-settings: inherit;
  letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1;
}
button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
button { cursor: pointer; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: var(--muted-foreground); }
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ------------------------------------------------------------------ icons */

.i { width: 1rem; height: 1rem; flex-shrink: 0; }
.i-2-5 { width: 0.625rem; height: 0.625rem; }
.i-3 { width: 0.75rem; height: 0.75rem; }
.i-3-5 { width: 0.875rem; height: 0.875rem; }
.i-4 { width: 1rem; height: 1rem; }
.i-5 { width: 1.25rem; height: 1.25rem; }
.i-6 { width: 1.5rem; height: 1.5rem; }
.i-7 { width: 1.75rem; height: 1.75rem; }
.i-8 { width: 2rem; height: 2rem; }
.i-10 { width: 2.5rem; height: 2.5rem; }
.i-spin { animation: xp-spin 1s linear infinite; }
@keyframes xp-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ small utilities */

.row { display: flex; align-items: center; gap: 0.5rem; }
.row-1 { display: flex; align-items: center; gap: 0.25rem; }
.row-3 { display: flex; align-items: center; gap: 0.75rem; }
.row-4 { display: flex; align-items: center; gap: 1rem; }
.stack { display: flex; flex-direction: column; gap: 0.5rem; }
.stack-1 { display: flex; flex-direction: column; gap: 0.25rem; }
.stack-4 { display: flex; flex-direction: column; gap: 1rem; }
.stack-6 { display: flex; flex-direction: column; gap: 1.5rem; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 0%; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.ml-auto { margin-left: auto; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.muted { color: var(--muted-foreground); }
.subtle { color: var(--fg-subtle); }
.fg { color: var(--foreground); }
.primary-text { color: var(--primary); }
.danger-text { color: var(--destructive); }
.text-2xs { font-size: 0.6875rem; line-height: 1rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upper-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.right { text-align: right; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: revert; } }
.hide-md { display: none; }
@media (min-width: 768px) { .hide-md { display: revert; } }
.hide-lg { display: none; }
@media (min-width: 1024px) { .hide-lg { display: revert; } }

/* ------------------------------------------------------------------ page frame: the made-up-data bar (ours, not Dorris's) */

html, body { height: 100%; }
body.xp { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

.xp-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 2.25rem; padding: 0.375rem 1rem;
  background: #1c1917; color: #f5f0e8; font-size: 0.8125rem; line-height: 1.25rem;
  border-bottom: 1px solid #000;
}
.dark .xp-bar { background: #0c0a09; }
.xp-bar__text { min-width: 0; }
.xp-bar__text strong { font-weight: 700; }
.xp-bar__more { color: #d6d3d1; }
.xp-bar__links { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.xp-bar__links a { color: #f5f0e8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 240, 232, 0.4); white-space: nowrap; }
.xp-bar__links a:hover { text-decoration-color: #f5f0e8; }
.xp-bar__links a.xp-bar__cta {
  text-decoration: none; background: #10b981; color: #052e1f; font-weight: 700;
  padding: 0.1875rem 0.625rem; border-radius: 9999px;
}
.xp-bar__links a.xp-bar__cta:hover { background: #34d399; }
@media (max-width: 767px) {
  .xp-bar { font-size: 0.75rem; padding: 0.375rem 0.75rem; }
  .xp-bar__more, .xp-bar__about { display: none; }
}
/* In the window on getdorris.com/explore the page around the copy says all of that, and
   the tour note is drawn under the window instead of on top of the app. */
.is-framed .xp-bar, .is-framed .xp-tour, .is-framed .xp-tour-pill { display: none !important; }
/* A phone that opens a page of the web copy by itself gets a note instead of the app: the copy
   is laid out for a laptop, and on /explore a phone is shown pictures of it and the copy of
   the iPhone app instead. In the window on a computer, framed, it never shows. */
.xp-phone { display: none; }
@media (max-width: 63.99rem) and (hover: none) and (pointer: coarse) {
  html:not(.is-framed) body:has(> .xp-phone) > :not(.xp-phone) { display: none !important; }
  html:not(.is-framed) body:has(> .xp-phone) { height: auto; min-height: 100dvh; overflow: auto; }
  html:not(.is-framed) .xp-phone {
    display: flex; flex-direction: column; justify-content: center; gap: 1rem;
    min-height: 100dvh; max-width: 30rem; margin: 0 auto; padding: 2.5rem 1.5rem;
  }
}
.xp-phone__mark { width: 56px; height: auto; }
.xp-phone__title { margin: 0; font-size: 1.625rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.xp-phone__text { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--muted-foreground); }
.xp-phone__actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.5rem 0 0; }
.xp-phone__actions a {
  display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.25rem;
  border-radius: var(--radius-lg); font-weight: 600; text-decoration: none;
}
.xp-phone__go { background: var(--primary); color: var(--primary-foreground); }
.xp-phone__back { border: 1px solid var(--border); background: var(--card); color: var(--foreground); }

/* ------------------------------------------------------------------ Dorris: app layout */

.app { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--background); position: relative; }
.app-main { display: flex; flex: 1 1 0%; flex-direction: column; overflow: hidden; min-width: 0; }
.main { position: relative; flex: 1 1 0%; overflow-y: auto; }
.main--fill { display: flex; flex-direction: column; overflow: hidden; }

/* sidebar.tsx */
.sidebar {
  display: flex; flex-direction: column; height: 100%; width: 15rem; flex-shrink: 0;
  background: var(--sidebar); border-right: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
  transition: width 200ms, transform 200ms;
}
.sidebar__logo {
  display: flex; align-items: center; height: 3.5rem; padding: 0 1rem; flex-shrink: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
}
.sidebar__brand { display: flex; align-items: center; gap: 0.5rem; }
.sidebar__mark { height: 1.75rem; width: 1.75rem; flex-shrink: 0; }
.sidebar__name { color: var(--foreground); font-weight: 700; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.025em; }
.sidebar__nav { flex: 1 1 0%; overflow-y: auto; padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.125rem; }
.navlink {
  position: relative; display: flex; align-items: center; gap: 0.75rem;
  border-radius: var(--radius-md); padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 60%, transparent);
  transition: color 150ms, background-color 150ms;
}
.navlink:hover { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.navlink.is-active { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); font-weight: 600; }
.navlink__label { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navlink__grip { position: absolute; left: 0; top: 0; bottom: 0; width: 1rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 150ms; color: var(--foreground); cursor: grab; }
.navlink:hover .navlink__grip { opacity: 0.4; }
.navlink--plain { padding-left: 0.75rem; }
.sidebar__admin { border-top: 1px solid color-mix(in oklab, var(--border) 20%, transparent); padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.125rem; }
.navrow { position: relative; display: flex; align-items: center; border-radius: var(--radius-md); }
.navrow > .navlink { flex: 1 1 0%; }
.navrow__chev {
  position: absolute; right: 0.25rem; display: flex; align-items: center; justify-content: center;
  height: 1.75rem; width: 1.75rem; border-radius: var(--radius-md);
  color: color-mix(in oklab, var(--foreground) 40%, transparent); transition: color 150ms, background-color 150ms;
}
.navrow__chev:hover { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 8%, transparent); }
.navrow__chev .i { transition: transform 150ms; }
.navrow__chev[aria-expanded="false"] .i { transform: rotate(-90deg); }
.sidebar__sub { padding-left: 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.sidebar__collapse {
  display: none; width: 100%; align-items: center; gap: 0.75rem; border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 40%, transparent); transition: color 150ms, background-color 150ms;
}
.sidebar__collapse:hover { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 5%, transparent); }
@media (min-width: 768px) { .sidebar__collapse { display: flex; } }
.sidebar__workspace { border-top: 1px solid color-mix(in oklab, var(--border) 20%, transparent); padding: 0.5rem; }
.workspace-chip { width: 100%; display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.5rem; border-radius: 0.5rem; text-align: left; transition: background-color 120ms; }
.workspace-chip:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.workspace-chip__logo { width: 2rem; height: 2rem; border-radius: 0.5rem; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: #166534; }
.workspace-chip__text { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.workspace-chip__name { font-size: 0.8125rem; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-chip__sub { font-size: 0.6875rem; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.workspace-chip__edit { color: color-mix(in oklab, var(--foreground) 60%, transparent); opacity: 0; transition: opacity 120ms; }
.workspace-chip:hover .workspace-chip__edit { opacity: 1; }

/* Collapsed (md:w-14): icons only. */
@media (min-width: 768px) {
  .is-collapsed .sidebar { width: 3.5rem; }
  .is-collapsed .sidebar__logo { justify-content: center; padding: 0 0.5rem; }
  .is-collapsed .sidebar__name, .is-collapsed .navlink__label, .is-collapsed .navlink__grip,
  .is-collapsed .navrow__chev, .is-collapsed .sidebar__collapse span, .is-collapsed .workspace-chip__text,
  .is-collapsed .workspace-chip__edit { display: none; }
  .is-collapsed .navlink, .is-collapsed .sidebar__collapse { justify-content: center; padding: 0.5rem; }
  .is-collapsed .sidebar__sub { padding-left: 0; }
  .is-collapsed .workspace-chip { justify-content: center; padding: 0.25rem; }
}

/* Below md the sidebar is a drawer. */
.sidebar-backdrop { display: none; }
@media (max-width: 767px) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; transform: translateX(-100%); }
  .is-drawer-open .sidebar { transform: translateX(0); }
  .is-drawer-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 0.4); }
}

/* topbar.tsx */
.topbar {
  display: flex; height: 3.5rem; flex-shrink: 0; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); background: var(--card); padding: 0 1.25rem;
}
.topbar__left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.topbar__menu { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: var(--radius-md); margin-left: -0.25rem; color: var(--muted-foreground); }
.topbar__menu:hover { background: var(--muted); }
@media (min-width: 768px) { .topbar__menu { display: none; } }
.topbar__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.topbar__right { display: flex; align-items: center; gap: 0.25rem; }
/* Two classes, so .btn's own display (later in this file) cannot switch it back on below sm. */
.topbar .topbar__search { display: none; width: 11rem; justify-content: flex-start; color: var(--muted-foreground); font-size: 0.75rem; line-height: 1rem; height: 2rem; }
.topbar__search kbd { margin-left: auto; font-size: 0.75rem; opacity: 0.5; font-family: var(--font-sans); }
@media (min-width: 640px) { .topbar .topbar__search { display: inline-flex; } }
.topbar .topbar__search:hover { color: var(--accent-foreground); }
.theme-sun { display: none; }
.dark .theme-sun { display: block; }
.dark .theme-moon { display: none; }

/* ------------------------------------------------------------------ Dorris: ui/button.tsx */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap;
  border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  height: 2.25rem; padding: 0.5rem 1rem;
  background: var(--primary); color: var(--primary-foreground);
  transition: color 150ms, background-color 150ms, border-color 150ms, opacity 150ms;
}
.btn:hover { opacity: 0.9; }
.btn:disabled, .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
.btn-destructive { background: var(--destructive); color: #fff; }
.btn-outline { border: 1px solid var(--border); background: transparent; color: inherit; }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); opacity: 1; }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { opacity: 0.8; }
.btn-ghost { background: transparent; color: inherit; }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); opacity: 1; }
.btn-link { background: transparent; color: var(--primary); text-underline-offset: 4px; }
.btn-link:hover { text-decoration: underline; opacity: 1; }
.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; line-height: 1rem; }
.btn-lg { height: 2.5rem; padding: 0 2rem; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }
.btn-icon-8 { width: 2rem; height: 2rem; padding: 0; }

/* The hand-rolled buttons most tool pages use instead of <Button>:
   "flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium" */
.pbtn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
  background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: opacity 150ms; white-space: nowrap;
}
.pbtn:hover { opacity: 0.9; }
.pbtn-outline { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
.pbtn-outline:hover { background: var(--muted); opacity: 1; }
.icon-btn { padding: 0.375rem; border-radius: var(--radius-md); color: var(--muted-foreground); transition: color 150ms, background-color 150ms; display: inline-flex; }
.icon-btn:hover { color: var(--foreground); background: var(--muted); }

/* ------------------------------------------------------------------ Dorris: ui/card.tsx */

.card { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-sm); }
.card-header { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem; }
.card-title { font-weight: 600; line-height: 1; letter-spacing: -0.025em; }
.card-desc { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.card-content { padding: 0 1.5rem 1.5rem; }
.card-footer { display: flex; align-items: center; padding: 0 1.5rem 1.5rem; }
/* "rounded-lg border border-border bg-card" without the shadow: the flat panel most pages draw by hand */
.panel { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }

/* ------------------------------------------------------------------ Dorris: ui/badge.tsx and status-badge.tsx */

.badge { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid transparent; padding: 0.125rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; background: var(--primary); color: var(--primary-foreground); white-space: nowrap; }
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-destructive { background: var(--destructive); color: #fff; }
.badge-outline { background: transparent; color: var(--foreground); border-color: var(--border); }

.status { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; }
.status-gray { background: var(--zinc-100); color: var(--zinc-700); }
.status-blue { background: var(--blue-100); color: var(--blue-700); }
.status-green { background: var(--green-100); color: var(--green-700); }
.status-yellow { background: var(--yellow-100); color: var(--yellow-700); }
.status-orange { background: var(--orange-100); color: var(--orange-700); }
.status-red { background: var(--red-100); color: var(--red-700); }
.status-purple { background: var(--purple-100); color: var(--purple-700); }
.status-indigo { background: var(--indigo-100); color: var(--indigo-700); }
.dark .status-gray { background: var(--zinc-800); color: var(--zinc-300); }
.dark .status-blue { background: color-mix(in oklab, var(--blue-900) 40%, transparent); color: var(--blue-300); }
.dark .status-green { background: color-mix(in oklab, var(--green-900) 40%, transparent); color: var(--green-300); }
.dark .status-yellow { background: color-mix(in oklab, var(--yellow-900) 40%, transparent); color: var(--yellow-300); }
.dark .status-orange { background: color-mix(in oklab, var(--orange-900) 40%, transparent); color: var(--orange-300); }
.dark .status-red { background: color-mix(in oklab, var(--red-900) 40%, transparent); color: var(--red-300); }
.dark .status-purple { background: color-mix(in oklab, var(--purple-900) 40%, transparent); color: var(--purple-300); }
.dark .status-indigo { background: color-mix(in oklab, var(--indigo-900) 40%, transparent); color: var(--indigo-300); }

/* ------------------------------------------------------------------ Dorris: form fields */

/* ui/input.tsx */
.input {
  display: flex; height: 2.25rem; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--input);
  background: transparent; padding: 0.25rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; box-shadow: var(--shadow-sm);
}
.input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
/* The hand-rolled search boxes and selects on most pages:
   "px-3 py-2 text-sm rounded-md border border-border bg-background text-foreground focus:ring-2 focus:ring-ring" */
.field {
  padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.field:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
select.field, select.input { appearance: auto; }
textarea.field, textarea.input { height: auto; min-height: 5rem; }
.label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.search-box { position: relative; }
.search-box > .i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.search-box > .field, .search-box > .input { padding-left: 2.25rem; }
.check { width: 1rem; height: 1rem; accent-color: var(--primary); }
.toggle { position: relative; display: inline-flex; width: 2.25rem; height: 1.25rem; border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 20%, transparent); flex-shrink: 0; transition: background-color 150ms; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 9999px; background: #fff; box-shadow: var(--shadow-sm); transition: transform 150ms; }
.toggle.is-on { background: var(--primary); }
.toggle.is-on::after { transform: translateX(1rem); }

/* ------------------------------------------------------------------ Dorris: page-header.tsx, the p-6 page */

.page { padding: 1.5rem; }
.page-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.page-header__title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--foreground); letter-spacing: -0.025em; }
.page-header__desc { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.page-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@media (min-width: 640px) {
  .page-header { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .page-header__title { font-size: 1.5rem; line-height: 2rem; }
  .page-header__actions { flex-wrap: nowrap; flex-shrink: 0; }
}

/* The brand switch on the supply-chain pages: "flex rounded-lg border border-border overflow-hidden" */
.seg { display: inline-flex; border-radius: 0.5rem; border: 1px solid var(--border); overflow: hidden; }
.seg > * { padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; background: var(--background); color: var(--foreground); transition: background-color 150ms; white-space: nowrap; }
.seg > *:hover { background: var(--muted); }
.seg > .is-active { background: var(--primary); color: var(--primary-foreground); }

/* support-sub-nav.tsx, and the other tools' tab rows drawn the same way */
.subnav { display: flex; flex-shrink: 0; gap: 0.25rem; border-bottom: 1px solid var(--border); padding: 0.5rem 1.5rem 0.75rem; overflow-x: auto; }
.subnav__tab { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; white-space: nowrap; }
.subnav__tab:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); color: var(--foreground); }
.subnav__tab.is-active { background: var(--muted); color: var(--foreground); }
.subnav__count { border-radius: 9999px; background: color-mix(in oklab, var(--primary) 10%, transparent); padding: 0.125rem 0.375rem; font-size: 0.625rem; line-height: 1; font-weight: 600; color: var(--emerald-700); }

/* Underlined tabs: "border-b-2 border-primary text-foreground" / "border-transparent text-muted-foreground" */
.utabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.utabs__tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.125rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.utabs__tab:hover { color: var(--foreground); }
.utabs__tab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }

/* ------------------------------------------------------------------ Dorris: data-table.tsx */

.table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.table thead tr { border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); }
.table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); white-space: nowrap; }
.table tbody tr { border-bottom: 1px solid var(--border); transition: background-color 150ms; }
.table tbody tr:last-child { border-bottom: 0; }
.table td { padding: 0.75rem 1rem; color: var(--foreground); vertical-align: middle; }
.table tr.is-link { cursor: pointer; }
.table tr.is-link:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.table tr.is-selected { background: color-mix(in oklab, var(--primary) 5%, transparent); }
.table .th-sort { display: flex; align-items: center; gap: 0.25rem; }
.table .th-sort__arrows { display: flex; flex-direction: column; }
.table .th-sort__arrows .i { width: 0.75rem; height: 0.75rem; color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); }
.table .th-sort__arrows .i + .i { margin-top: -0.25rem; }
.table a.cell-link { display: block; }
@media (max-width: 1023px) { .table .lg-only { display: none; } }
@media (max-width: 767px) { .table .md-only { display: none; } }

/* ------------------------------------------------------------------ Dorris: empty-state.tsx */

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 0; text-align: center; }
.empty__icon { width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--muted); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--muted-foreground); }
.empty__icon .i { width: 1.75rem; height: 1.75rem; }
.empty__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.empty__desc { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); max-width: 24rem; }

/* ------------------------------------------------------------------ Dorris: ui/avatar.tsx */

.avatar { position: relative; display: flex; width: 2rem; height: 2rem; flex-shrink: 0; overflow: hidden; border-radius: 9999px; }
.avatar-7 { width: 1.75rem; height: 1.75rem; }
.avatar-6 { width: 1.5rem; height: 1.5rem; }
.avatar-5 { width: 1.25rem; height: 1.25rem; }
.avatar__fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 9999px; background: var(--secondary); font-size: 0.75rem; line-height: 1rem; }
.avatar-6 .avatar__fallback, .avatar-5 .avatar__fallback { font-size: 0.625rem; }

/* ------------------------------------------------------------------ Dorris: ui/dropdown-menu.tsx */

.menu { position: relative; }
.menu__content {
  position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 50; min-width: 8rem; width: 12rem;
  overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card);
  padding: 0.25rem; color: var(--card-foreground); box-shadow: var(--shadow-md);
}
.menu__label { padding: 0.375rem 0.5rem; font-size: 0.875rem; }
.menu__name { font-size: 0.875rem; font-weight: 500; line-height: 1; }
.menu__email { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1; color: var(--muted-foreground); }
.menu__sep { margin: 0.25rem -0.25rem; height: 1px; background: var(--border); }
.menu__item { position: relative; display: flex; width: 100%; cursor: default; user-select: none; align-items: center; gap: 0.5rem; border-radius: var(--radius-sm); padding: 0.375rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; text-align: left; transition: color 150ms, background-color 150ms; }
.menu__item:hover, .menu__item:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: none; }
.menu__item .i { margin-right: 0.5rem; }
.menu__item--danger { color: var(--destructive); }
.menu__item--danger:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }

/* ------------------------------------------------------------------ Dorris: ui/dialog.tsx, used with <dialog> */

dialog.dlg {
  margin: auto; width: calc(100% - 2rem); max-width: 32rem; border: 1px solid var(--border); background: var(--card);
  color: var(--card-foreground); padding: 1.5rem; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg);
}
dialog.dlg::backdrop { background: rgb(0 0 0 / 0.6); }
.dlg__close { position: absolute; right: 1rem; top: 1rem; border-radius: var(--radius-sm); opacity: 0.7; }
.dlg__close:hover { opacity: 1; }
.dlg__header { display: flex; flex-direction: column; gap: 0.375rem; text-align: left; margin-bottom: 1rem; }
.dlg__title { font-size: 1.125rem; line-height: 1; font-weight: 600; letter-spacing: -0.025em; }
.dlg__desc { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.dlg__footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* A right-hand slide-over, as the Suppliers and CRM detail panels draw it:
   "fixed inset-0 z-50 flex" + "flex-1 bg-black/40" + "w-full max-w-2xl bg-card border-l" */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; }
.sheet__shade { flex: 1 1 0%; background: rgb(0 0 0 / 0.4); }
.sheet__panel { width: 100%; max-width: 42rem; background: var(--card); border-left: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.sheet__bar { display: flex; align-items: center; justify-content: flex-end; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sheet__body { flex: 1 1 0%; overflow-y: auto; }

/* ------------------------------------------------------------------ explore: the tour card, toasts and the ⌘K palette (ours) */

.xp-tour {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 18rem; max-width: calc(100vw - 2rem);
  background: var(--card); color: var(--card-foreground); border: 1px solid var(--border);
  border-radius: 0.75rem; box-shadow: var(--shadow-xl); padding: 0.625rem 0.875rem 0.625rem;
  font-size: 0.75rem; line-height: 1.125rem;
}
.xp-tour__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.xp-tour__kicker { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); }
.xp-tour__close { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted-foreground); border-radius: var(--radius-sm); padding: 0.125rem 0.25rem; font-size: 0.6875rem; font-weight: 600; }
.xp-tour__close:hover { color: var(--foreground); background: var(--muted); }
.xp-tour__title { margin-top: 0.125rem; font-size: 0.875rem; font-weight: 700; color: var(--foreground); }
.xp-tour__line { margin-top: 0.25rem; color: var(--muted-foreground); }
.xp-tour__nav { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; }
.xp-tour__nav a { display: inline-flex; align-items: center; gap: 0.125rem; color: var(--primary); font-weight: 600; white-space: nowrap; }
.xp-tour__nav a:hover { text-decoration: underline; }
.xp-tour__count { color: var(--muted-foreground); }
.xp-tour-pill {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.375rem;
  background: #1c1917; color: #f5f0e8; border-radius: 9999px; padding: 0.5rem 0.875rem;
  font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow-lg);
}
.dark .xp-tour-pill { background: #f5f0e8; color: #1c1917; }
@media (max-width: 767px) {
  .xp-tour { right: 0.5rem; left: 0.5rem; bottom: 0.5rem; width: auto; max-width: none; }
  .xp-tour-pill { right: 0.5rem; bottom: 0.5rem; }
}

.xp-toasts { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; }
.xp-toast {
  background: #1c1917; color: #f5f0e8; border-radius: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; line-height: 1.25rem;
  box-shadow: var(--shadow-lg); max-width: min(26rem, calc(100vw - 2rem)); display: flex; align-items: center; gap: 0.5rem;
  animation: xp-toast-in 160ms ease-out;
}
.dark .xp-toast { background: #f5f0e8; color: #1c1917; }
.xp-toast.is-leaving { opacity: 0; transition: opacity 200ms; }
@keyframes xp-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.xp-palette { position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; }
.xp-palette__panel { width: 100%; max-width: 36rem; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; }
.xp-palette__search { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.875rem; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.xp-palette__input { flex: 1 1 0%; height: 3rem; font-size: 0.875rem; color: var(--foreground); outline: none; }
.xp-palette__list { max-height: 22rem; overflow-y: auto; padding: 0.375rem; }
.xp-palette__group { padding: 0.5rem 0.5rem 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.xp-palette__item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); font-size: 0.875rem; color: var(--foreground); }
.xp-palette__item .i { color: var(--muted-foreground); }
.xp-palette__item.is-active { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.xp-palette__item.is-active .i { color: var(--primary); }
.xp-palette__empty { padding: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

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

/* ---- ab-tests.css ---- */
/* A/B Testing — routes/_auth/ab-tests* and components/ab/* */

/* ---------------------------------------------------------------- shared card + heading */
.ab-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; }
.ab-h3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.ab-hint { font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); }
.ab-back { display: inline-flex; align-items: center; margin-bottom: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.ab-back:hover { color: var(--foreground); }
.ab-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.ab-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ab-my4 { margin: 1rem 0; }

/* ---------------------------------------------------------------- Tabs (components/ab/tabs.tsx) */
.ab-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.ab-tab {
  display: inline-flex; align-items: center; gap: 0.375rem; margin-bottom: -1px; border-bottom: 2px solid transparent;
  padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted-foreground);
  white-space: nowrap; transition: color 150ms, border-color 150ms;
}
.ab-tab:hover { color: var(--foreground); }
.ab-tab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }
.ab-tab__count { border-radius: 9999px; padding: 0.125rem 0.375rem; font-size: 0.625rem; font-weight: 600; background: var(--muted); color: var(--muted-foreground); }
.ab-tab.is-active .ab-tab__count { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }

/* ---------------------------------------------------------------- list page: name cell + row menu */
.ab-name__title { font-weight: 500; color: var(--foreground); }
a.ab-name:hover .ab-name__title { text-decoration: underline; }
.ab-name__shop { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ab-pwin { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; }
.ab-rowbtn { display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--muted-foreground); transition: color 150ms, background-color 150ms; margin-left: auto; }
.ab-rowbtn:hover { color: var(--foreground); background: var(--muted); }
.ab-menu { display: inline-flex; }
.ab-menu__content { width: 11rem; }
.ab-menu--up .ab-menu__content { top: auto; bottom: calc(100% + 0.25rem); }
.ab-danger { color: var(--destructive); }
.ab-danger:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }

/* ---------------------------------------------------------------- Order-tracking pixel card (connected state) */
.ab-pixel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.ab-pixel__sub { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ab-health { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.ab-health__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--green-500); }
.ab-health--good { color: var(--green-700); }
.dark .ab-health--good { color: oklch(76.5% 0.177 163.223); }
.ab-pixel__row { display: flex; align-items: center; gap: 0.5rem; }
.ab-ok { color: var(--green-600); }
.dark .ab-ok { color: oklch(76.5% 0.177 163.223); }

/* ---------------------------------------------------------------- Stability banner */
.ab-stability { display: flex; flex-direction: column; gap: 0; }
.ab-strip { display: flex; align-items: center; gap: 0.375rem; }
.ab-strip__step { flex: 1 1 0%; display: flex; flex-direction: column; gap: 0.25rem; }
.ab-strip__bar { height: 0.375rem; border-radius: 9999px; background: var(--muted); transition: background-color 150ms; }
.ab-strip__bar.is-on { background: var(--primary); }
.ab-strip__label { font-size: 0.6875rem; font-weight: 500; color: var(--muted-foreground); }
.ab-strip__label.is-active { color: var(--foreground); }
.ab-stability__msg { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; }
.ab-q { color: var(--muted-foreground); }

/* ---------------------------------------------------------------- Variant cards */
.ab-variants { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) { .ab-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-variant.is-winner { border-color: var(--emerald-400, #34d399); box-shadow: 0 0 0 1px var(--emerald-400, #34d399); }
.ab-variant__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.ab-role { border-radius: 9999px; background: var(--muted); padding: 0.125rem 0.5rem; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.ab-winner {
  display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; padding: 0.125rem 0.5rem;
  font-size: 0.6875rem; font-weight: 600; background: var(--emerald-100, #d1fae5); color: var(--emerald-800, #065f46);
}
.dark .ab-winner { background: color-mix(in oklab, var(--emerald-900, #064e3b) 40%, transparent); color: var(--emerald-300, #6ee7b7); }
.ab-variant__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.ab-kicker { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.ab-num { margin-top: 0.125rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--foreground); }
.ab-variant__stats { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.ab-lift { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; line-height: 1rem; }
.ab-prob__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; }
.ab-prob__track { height: 0.5rem; overflow: hidden; border-radius: 9999px; background: var(--muted); }
.ab-prob__bar { height: 100%; border-radius: 9999px; background: var(--primary); }
.ab-unstable { display: flex; align-items: flex-start; gap: 0.5rem; border-radius: var(--radius-md); border: 1px dashed var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); padding: 0.625rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

/* percentage-width utility for the probability bar (0-100) */
.ab-w-0{width:0%}.ab-w-1{width:1%}.ab-w-2{width:2%}.ab-w-3{width:3%}.ab-w-4{width:4%}.ab-w-5{width:5%}.ab-w-6{width:6%}.ab-w-7{width:7%}.ab-w-8{width:8%}.ab-w-9{width:9%}
.ab-w-10{width:10%}.ab-w-11{width:11%}.ab-w-12{width:12%}.ab-w-13{width:13%}.ab-w-14{width:14%}.ab-w-15{width:15%}.ab-w-16{width:16%}.ab-w-17{width:17%}.ab-w-18{width:18%}.ab-w-19{width:19%}
.ab-w-20{width:20%}.ab-w-21{width:21%}.ab-w-22{width:22%}.ab-w-23{width:23%}.ab-w-24{width:24%}.ab-w-25{width:25%}.ab-w-26{width:26%}.ab-w-27{width:27%}.ab-w-28{width:28%}.ab-w-29{width:29%}
.ab-w-30{width:30%}.ab-w-31{width:31%}.ab-w-32{width:32%}.ab-w-33{width:33%}.ab-w-34{width:34%}.ab-w-35{width:35%}.ab-w-36{width:36%}.ab-w-37{width:37%}.ab-w-38{width:38%}.ab-w-39{width:39%}
.ab-w-40{width:40%}.ab-w-41{width:41%}.ab-w-42{width:42%}.ab-w-43{width:43%}.ab-w-44{width:44%}.ab-w-45{width:45%}.ab-w-46{width:46%}.ab-w-47{width:47%}.ab-w-48{width:48%}.ab-w-49{width:49%}
.ab-w-50{width:50%}.ab-w-51{width:51%}.ab-w-52{width:52%}.ab-w-53{width:53%}.ab-w-54{width:54%}.ab-w-55{width:55%}.ab-w-56{width:56%}.ab-w-57{width:57%}.ab-w-58{width:58%}.ab-w-59{width:59%}
.ab-w-60{width:60%}.ab-w-61{width:61%}.ab-w-62{width:62%}.ab-w-63{width:63%}.ab-w-64{width:64%}.ab-w-65{width:65%}.ab-w-66{width:66%}.ab-w-67{width:67%}.ab-w-68{width:68%}.ab-w-69{width:69%}
.ab-w-70{width:70%}.ab-w-71{width:71%}.ab-w-72{width:72%}.ab-w-73{width:73%}.ab-w-74{width:74%}.ab-w-75{width:75%}.ab-w-76{width:76%}.ab-w-77{width:77%}.ab-w-78{width:78%}.ab-w-79{width:79%}
.ab-w-80{width:80%}.ab-w-81{width:81%}.ab-w-82{width:82%}.ab-w-83{width:83%}.ab-w-84{width:84%}.ab-w-85{width:85%}.ab-w-86{width:86%}.ab-w-87{width:87%}.ab-w-88{width:88%}.ab-w-89{width:89%}
.ab-w-90{width:90%}.ab-w-91{width:91%}.ab-w-92{width:92%}.ab-w-93{width:93%}.ab-w-94{width:94%}.ab-w-95{width:95%}.ab-w-96{width:96%}.ab-w-97{width:97%}.ab-w-98{width:98%}.ab-w-99{width:99%}
.ab-w-100{width:100%}

/* ---------------------------------------------------------------- Timeline chart (analytics-chart.mjs's xyChart, prefix "ab") */
.ab-chart { height: 260px; display: flex; flex-direction: column; margin-top: 1rem; }
.ab-chart__area {
  flex: 1 1 0%; min-height: 0; display: grid; padding: 4px 8px 0 0;
  grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 30px;
}
.ab-chart__y { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; }
.ab-chart__yt {
  position: relative; height: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  font-size: 11px; line-height: 1; color: var(--muted-foreground); white-space: nowrap;
}
.ab-chart__yt::after { content: ""; position: absolute; right: 0; top: 0; width: 6px; border-top: 1px solid #666; }
.ab-chart__plot { grid-column: 2; grid-row: 1; position: relative; }
.ab-chart__plot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid #666; }
.ab-chart__plot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #666; }
.ab-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-chart__grid line { stroke: var(--border); stroke-width: 1px; stroke-dasharray: 3 3; }
.ab-chart__dots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-chart__x { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; }
.ab-chart__xt {
  position: relative; width: 0; display: flex; justify-content: center; padding-top: 9px;
  font-size: 11px; line-height: 1; color: var(--muted-foreground); white-space: nowrap;
}
.ab-chart__xt::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; border-left: 1px solid #666; }
.ab-chart__xt.is-off { visibility: hidden; }
@media (max-width: 639px) { .ab-chart__xt.is-wide { visibility: hidden; } }
.ab-area { fill: currentColor; fill-opacity: 0.12; stroke: none; }
.ab-line { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; }
.ab-line--dash { stroke-width: 1.5px; stroke-dasharray: 5 3; }
.ab-dot { fill: currentColor; }
.ab-chart__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; padding-top: 6px; font-size: 0.8125rem; line-height: 1.25rem; }
.ab-chart__legend li { display: inline-flex; align-items: center; gap: 4px; }
.ab-chart__legend--sm { gap: 0 8px; padding-top: 4px; font-size: 0.75rem; }
.ab-legend-icon { width: 14px; height: 14px; display: inline-block; }
.ab-legend-icon path { stroke: currentColor; }
.ab-legend-icon--rect path { stroke: none; fill: currentColor; }
.ab-c-control { color: #94a3b8; }
.ab-c-variant { color: #3b82f6; }

.ab-toggle { display: inline-flex; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.ab-toggle > button { padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); background: var(--background); transition: background-color 150ms, color 150ms; }
.ab-toggle > button:hover { background: var(--muted); }
.ab-toggle > button.is-active, .ab-toggle > button.is-active:hover { background: var(--primary); color: var(--primary-foreground); }
.ab-timeline__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Data health panel */
.ab-hrows { display: flex; flex-direction: column; }
.ab-hrow { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-top: 1px solid var(--border); }
.ab-hrows > .ab-hrow:first-child { border-top: 0; }
.ab-hrow__v { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; }
.ab-hrow__detail { font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); }
.ab-tri { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.ab-tri--ok { color: var(--green-700); }
.dark .ab-tri--ok { color: oklch(76.5% 0.177 163.223); }
.ab-good { color: var(--green-700); }
.dark .ab-good { color: oklch(76.5% 0.177 163.223); }
.ab-italic { font-style: italic; }

/* ---------------------------------------------------------------- Devices tab: donut + table */
.ab-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.ab-donut__svg { flex-shrink: 0; }
.ab-slice { fill: currentColor; }
.ab-c-mobile { color: #3b82f6; }
.ab-c-desktop { color: #f97316; }

/* ---------------------------------------------------------------- Preview + Apply-winner dialogs */
.ab-dlg { max-width: 30rem; }
.ab-dlg__in { position: relative; }
.ab-dlg__x { position: absolute; right: 0; top: 0; color: var(--muted-foreground); }
.ab-dlg__x:hover { color: var(--foreground); }
.ab-dlg__header { padding-right: 1.5rem; margin-bottom: 1rem; }
.ab-dlg__title { display: flex; align-items: center; gap: 0.5rem; padding-right: 1.5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.ab-dlg__title--icon { color: var(--foreground); }
.ab-dlg__desc { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted-foreground); }
.ab-dlg__footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.ab-dlg__cancel { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--foreground); }
.ab-dlg__cancel:hover { background: var(--muted); }
.ab-dlg__go { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); transition: opacity 150ms; }
.ab-dlg__go:hover { opacity: 0.9; }
.ab-dlg__go:disabled { opacity: 0.5; cursor: not-allowed; }
.ab-note { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted-foreground); }
.ab-copyrow { display: flex; align-items: center; gap: 0.5rem; }
.ab-copyrow__box { flex: 1 1 0%; min-width: 0; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); padding: 0.5rem 0.625rem; }
.ab-copyrow__label { font-size: 0.6875rem; color: var(--muted-foreground); }
.ab-copyrow__url { font-family: var(--font-mono); font-size: 0.75rem; color: var(--foreground); }
.ab-copyrow__btn { flex-shrink: 0; padding: 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--muted-foreground); }
.ab-copyrow__btn:hover { color: var(--foreground); background: var(--muted); }
.ab-impact { border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); padding: 0.75rem; }
.ab-impact__summary { font-size: 0.875rem; color: var(--foreground); }
.ab-impact__list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem; padding-left: 1rem; list-style: disc; font-size: 0.75rem; line-height: 1.25rem; color: var(--muted-foreground); }
.ab-warn { margin-top: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--amber-300); background: var(--amber-50); padding: 0.75rem; color: var(--amber-900, #78350f); }
.dark .ab-warn { border-color: color-mix(in oklab, var(--amber-900, #78350f) 50%, transparent); background: color-mix(in oklab, var(--amber-900, #78350f) 20%, transparent); color: var(--amber-200, #fde68a); }
.ab-warn__title { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.ab-warn__check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.25rem; }

/* ---------------------------------------------------------------- New A/B test wizard */
.ab-wizard__step { min-height: 18rem; display: flex; flex-direction: column; gap: 1.25rem; }
.ab-wizard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ab-wbtn { display: inline-flex; align-items: center; gap: 0.5rem; }
.ab-flabel { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.ab-fhint { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ab-ferror { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--red-600); }
.dark .ab-ferror { color: oklch(70.4% 0.191 22.216); }
.ab-select {
  width: 100%; height: 2.25rem; padding: 0 0.75rem; font-size: 0.875rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: transparent; color: var(--foreground); appearance: auto;
}
.ab-select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.ab-options { display: grid; gap: 0.75rem; }
.ab-option { border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1rem; text-align: left; transition: background-color 150ms, border-color 150ms; }
.ab-option:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.ab-option.is-selected { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.ab-option--lg .ab-option__desc { margin-top: 0.125rem; font-size: 0.875rem; color: var(--muted-foreground); }
.ab-option__desc { font-size: 0.8125rem; color: var(--muted-foreground); }
.ab-option__desc--xs { margin-top: 0.125rem; font-size: 0.75rem; }
.ab-option__caveat { margin-top: 0.375rem; font-size: 0.75rem; color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); }
.ab-locked { border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--foreground); }
.ab-extlink { margin-top: 0.375rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--primary); }
.ab-extlink:hover { text-decoration: underline; }
.ab-range { width: 100%; accent-color: var(--primary); }
.ab-radio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--foreground); cursor: pointer; }
.ab-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ab-grid2__check { display: flex; align-items: flex-end; padding-bottom: 0.5rem; }
.ab-textarea {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: transparent; color: var(--foreground); resize: vertical;
}
.ab-textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.ab-fix { display: flex; align-items: flex-start; gap: 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--amber-300); background: var(--amber-50); padding: 0.75rem; font-size: 0.875rem; color: var(--amber-900, #78350f); }
.dark .ab-fix { border-color: color-mix(in oklab, var(--amber-900, #78350f) 50%, transparent); background: color-mix(in oklab, var(--amber-900, #78350f) 20%, transparent); color: var(--amber-200, #fde68a); }
.ab-fix__list { margin-top: 0.25rem; padding-left: 1rem; list-style: disc; font-size: 0.75rem; line-height: 1.25rem; }

/* ---- amazon.css ---- */
/* Amazon — routes/_auth/amazon-insights.tsx and components/amazon/ExportSettingsDrawer.tsx */

.amz-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.amz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.75rem;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: var(--radius-lg); white-space: nowrap;
  border: 1px solid var(--border); background: var(--card); transition: background-color 150ms;
}
.amz-btn:hover { background: var(--muted); }
.amz-seg { display: flex; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.amz-seg > * {
  padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
  color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.amz-seg > *:hover { color: var(--foreground); background: var(--muted); }
.amz-seg > .is-active, .amz-seg > .is-active:hover { background: var(--primary); color: var(--primary-foreground); }

/* Account tabs (only with 2+ accounts) */
.amz-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }
.amz-tab {
  padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.amz-tab:hover { color: var(--foreground); }
.amz-tab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }

/* SummaryCard */
.amz-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .amz-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .amz-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.amz-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; min-width: 0; }
.amz-card__label { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.amz-card__value { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--foreground); }
.amz-card__sub { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.amz-refreshed { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 1rem; }

/* FBA + AWD Inventory */
.amz-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.amz-panel__head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.amz-h3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.amz-panel__desc { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.amz-count { white-space: nowrap; }
.amz-scroll { overflow-x: auto; }
.amz-table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.amz-table thead tr { border-bottom: 1px solid var(--border); }
.amz-th {
  padding-bottom: 0.5rem; color: var(--muted-foreground); font-weight: 500; cursor: pointer; user-select: none;
  white-space: nowrap; transition: color 150ms;
}
.amz-th:hover { color: var(--foreground); }
.amz-th__in { display: inline-flex; align-items: center; gap: 0.25rem; }
.amz-arrow { font-size: 10px; opacity: 0.2; }
.amz-arrow.is-active { opacity: 1; }
.amz-th-account { padding-bottom: 0.5rem; padding-left: 1.25rem; text-align: left; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); font-weight: 500; white-space: nowrap; }
.amz-table th.right, .amz-table td.right { text-align: right; }
.amz-table .amz-left { text-align: left; }
.amz-table .amz-pl5 { padding-left: 1.25rem; }
.amz-table .amz-pr5 { padding-right: 1.25rem; }
.amz-table tbody tr { border-bottom: 1px solid var(--border); transition: background-color 150ms; }
.amz-table tbody tr:last-child { border-bottom: 0; }
.amz-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.amz-table td { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.amz-table td.amz-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amz-table td.amz-sku { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amz-table tfoot tr { border-top: 2px solid var(--border); background: color-mix(in oklab, var(--muted) 20%, transparent); }
.amz-days--none { color: var(--muted-foreground); }
.amz-days--red { color: var(--red-600); font-weight: 600; }
.amz-days--yellow { color: oklch(68.1% 0.162 75.834); font-weight: 600; }
.amz-days--green { color: var(--green-600); }
.dark .amz-days--red { color: oklch(70.4% 0.191 22.216); }
.dark .amz-days--yellow { color: oklch(85.2% 0.199 91.936); }
.dark .amz-days--green { color: oklch(79.2% 0.209 151.711); }
/* hidden md:table-cell, hidden lg:table-cell, hidden xl:table-cell, lg:pl-0, lg:hidden */
.amz-table .amz-md, .amz-table .amz-lg, .amz-table .amz-xl { display: none; }
@media (min-width: 768px) { .amz-table .amz-md { display: table-cell; } }
@media (min-width: 1024px) {
  .amz-table .amz-lg { display: table-cell; }
  .amz-table .amz-lg-pl0 { padding-left: 0; }
  .amz-table .amz-lg-hide { display: none; }
}
@media (min-width: 1280px) { .amz-table .amz-xl { display: table-cell; } }

/* ExportSettingsDrawer */
.amz-drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.amz-drawer__shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); }
.amz-drawer__panel {
  position: relative; z-index: 10; width: 100%; max-width: 28rem; background: var(--background);
  border-left: 1px solid var(--border); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow-y: auto;
}
.amz-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.amz-drawer__x { padding: 0.375rem; border-radius: 0.25rem; transition: background-color 150ms; }
.amz-drawer__x:hover { background: var(--muted); }
.amz-drawer__body { flex: 1 1 0%; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.amz-label { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.375rem; }
.amz-label--row { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0; }
.amz-label .amz-inline-icon { display: inline; margin-right: 0.25rem; vertical-align: -2px; }
.amz-input {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
select.amz-input { appearance: auto; }
.amz-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.amz-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.amz-schedule > * + * { margin-top: 0.75rem; }
.amz-schedule__fields { padding-left: 0.25rem; }
.amz-schedule__fields > * + * { margin-top: 0.75rem; }
.amz-sublabel { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
/* The drawer's switches: "relative w-9 h-5 rounded-full bg-primary|bg-muted", knob left-0.5 → left-4 */
.amz-switch, .toggle.amz-toggle { position: relative; display: inline-flex; width: 2.25rem; height: 1.25rem; border-radius: 9999px; background: var(--muted); flex-shrink: 0; transition: background-color 150ms; }
.amz-switch::after, .toggle.amz-toggle::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; border-radius: 9999px; background: #fff; box-shadow: var(--shadow-sm); transition: transform 150ms; }
.amz-switch[aria-expanded="true"], .toggle.amz-toggle.is-on { background: var(--primary); }
.amz-switch[aria-expanded="true"]::after, .toggle.amz-toggle.is-on::after { transform: translateX(0.875rem); }
.amz-drawer__foot { padding: 1.25rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.amz-save {
  width: 100%; padding: 0.5rem 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: var(--radius-lg);
  background: var(--primary); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 150ms;
}
.amz-save:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.amz-foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.amz-btn--block { padding: 0.5rem 0; }

/* ---- analytics.css ---- */
/* Analytics — routes/_auth/analytics.tsx (the Revenue Dashboard) */

/* Header actions: the Refresh button and the period chips */
.an-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.an-refresh {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--card); color: var(--foreground); transition: background-color 150ms;
}
.an-refresh:hover { background: var(--muted); }
.an-seg { display: flex; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.an-seg > * {
  padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
  color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.an-seg > *:hover { color: var(--foreground); background: var(--muted); }
.an-seg > .is-active, .an-seg > .is-active:hover { background: var(--primary); color: var(--primary-foreground); }

/* SummaryCard */
.an-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .an-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .an-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.an-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; }
.an-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.an-card__label { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.an-card__icon {
  width: 2rem; height: 2rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary);
}
.an-card__value { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--foreground); }
.an-card__sub { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); }
.an-card__sub--green { color: var(--emerald-600); }
.an-card__sub--red { color: var(--red-600); }
.dark .an-card__sub--green { color: oklch(76.5% 0.177 163.223); }
.dark .an-card__sub--red { color: oklch(70.4% 0.191 22.216); }

/* The three "bg-card border border-border rounded-lg p-5" panels */
.an-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; }
.an-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.an-h3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }

/* Channel breakdown — CHANNEL_CONFIG's colours */
.an-channels > * + * { margin-top: 0.75rem; }
.an-channel__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; }
.an-channel__label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.an-channel__nums { display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; }
.an-channel__rev { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.an-track { height: 0.5rem; border-radius: 9999px; background: var(--muted); overflow: hidden; }
.an-bar { height: 100%; border-radius: 9999px; transition: width 500ms; }
.an-c-acme { color: #3b82f6; }
.an-c-north { color: #f97316; }
.an-c-amz-acme { color: #f59e0b; }
.an-c-amz-north { color: #d97706; }
.an-bg-acme { background: #3b82f6; }
.an-bg-north { background: #f97316; }
.an-bg-amz-acme { background: #f59e0b; }
.an-bg-amz-north { background: #d97706; }
.an-w-0{width:0%}.an-w-1{width:1%}.an-w-2{width:2%}.an-w-3{width:3%}.an-w-4{width:4%}.an-w-5{width:5%}.an-w-6{width:6%}.an-w-7{width:7%}.an-w-8{width:8%}.an-w-9{width:9%}
.an-w-10{width:10%}.an-w-11{width:11%}.an-w-12{width:12%}.an-w-13{width:13%}.an-w-14{width:14%}.an-w-15{width:15%}.an-w-16{width:16%}.an-w-17{width:17%}.an-w-18{width:18%}.an-w-19{width:19%}
.an-w-20{width:20%}.an-w-21{width:21%}.an-w-22{width:22%}.an-w-23{width:23%}.an-w-24{width:24%}.an-w-25{width:25%}.an-w-26{width:26%}.an-w-27{width:27%}.an-w-28{width:28%}.an-w-29{width:29%}
.an-w-30{width:30%}.an-w-31{width:31%}.an-w-32{width:32%}.an-w-33{width:33%}.an-w-34{width:34%}.an-w-35{width:35%}.an-w-36{width:36%}.an-w-37{width:37%}.an-w-38{width:38%}.an-w-39{width:39%}
.an-w-40{width:40%}.an-w-41{width:41%}.an-w-42{width:42%}.an-w-43{width:43%}.an-w-44{width:44%}.an-w-45{width:45%}.an-w-46{width:46%}.an-w-47{width:47%}.an-w-48{width:48%}.an-w-49{width:49%}
.an-w-50{width:50%}.an-w-51{width:51%}.an-w-52{width:52%}.an-w-53{width:53%}.an-w-54{width:54%}.an-w-55{width:55%}.an-w-56{width:56%}.an-w-57{width:57%}.an-w-58{width:58%}.an-w-59{width:59%}
.an-w-60{width:60%}.an-w-61{width:61%}.an-w-62{width:62%}.an-w-63{width:63%}.an-w-64{width:64%}.an-w-65{width:65%}.an-w-66{width:66%}.an-w-67{width:67%}.an-w-68{width:68%}.an-w-69{width:69%}
.an-w-70{width:70%}.an-w-71{width:71%}.an-w-72{width:72%}.an-w-73{width:73%}.an-w-74{width:74%}.an-w-75{width:75%}.an-w-76{width:76%}.an-w-77{width:77%}.an-w-78{width:78%}.an-w-79{width:79%}
.an-w-80{width:80%}.an-w-81{width:81%}.an-w-82{width:82%}.an-w-83{width:83%}.an-w-84{width:84%}.an-w-85{width:85%}.an-w-86{width:86%}.an-w-87{width:87%}.an-w-88{width:88%}.an-w-89{width:89%}
.an-w-90{width:90%}.an-w-91{width:91%}.an-w-92{width:92%}.an-w-93{width:93%}.an-w-94{width:94%}.an-w-95{width:95%}.an-w-96{width:96%}.an-w-97{width:97%}.an-w-98{width:98%}.an-w-99{width:99%}
.an-w-100{width:100%}

/* "YoY overlay" */
.an-yoy {
  padding: 0.25rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); transition: color 150ms, background-color 150ms, border-color 150ms;
  white-space: nowrap;
}
.an-yoy:hover { color: var(--foreground); }
.an-yoy.is-on { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }

/* The recharts ComposedChart (analytics-chart.mjs draws it): height 260, YAxis width 52,
   margin top 4 / right 8, grid stroke var(--border) dashed 3 3, axis and tick lines #666. */
.an-chart { height: 260px; display: flex; flex-direction: column; }
.an-chart__area {
  flex: 1 1 0%; min-height: 0; display: grid; padding: 4px 8px 0 0;
  grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 30px;
}
.an-chart__y { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; }
.an-chart__yt {
  position: relative; height: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  font-size: 11px; line-height: 1; color: var(--muted-foreground); white-space: nowrap;
}
.an-chart__yt::after { content: ""; position: absolute; right: 0; top: 0; width: 6px; border-top: 1px solid #666; }
.an-chart__plot { grid-column: 2; grid-row: 1; position: relative; }
.an-chart__plot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid #666; }
.an-chart__plot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #666; }
.an-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.an-chart__grid line { stroke: var(--border); stroke-width: 1px; stroke-dasharray: 3 3; }
.an-chart__x { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; }
.an-chart__xt {
  position: relative; width: 0; display: flex; justify-content: center; padding-top: 9px;
  font-size: 11px; line-height: 1; color: var(--muted-foreground); white-space: nowrap;
}
.an-chart__xt::before { content: ""; position: absolute; top: 0; left: 0; height: 6px; border-left: 1px solid #666; }
.an-chart__xt.is-off { visibility: hidden; }
@media (max-width: 639px) { .an-chart__xt.is-wide { visibility: hidden; } }
.an-area { fill: currentColor; fill-opacity: 0.12; stroke: none; }
.an-line { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; }
.an-line--dash { stroke-width: 1.5px; stroke-dasharray: 5 3; }
.an-chart__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; padding-top: 2px; font-size: 1rem; line-height: 1.5rem; }
.an-chart__legend li { display: inline-flex; align-items: center; gap: 4px; }
.an-legend-icon { width: 14px; height: 14px; display: inline-block; }
.an-legend-icon path { stroke: currentColor; }

/* Country breakdown */
.an-scroll { overflow-x: auto; }
.an-table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.an-table thead tr { border-bottom: 1px solid var(--border); }
.an-table th { padding-bottom: 0.5rem; color: var(--muted-foreground); font-weight: 500; text-align: right; cursor: pointer; user-select: none; white-space: nowrap; }
.an-table th:hover { color: var(--foreground); }
.an-table th.an-th-left { text-align: left; cursor: default; }
.an-table th.an-th-left:hover { color: var(--muted-foreground); }
.an-table tbody tr { border-bottom: 1px solid var(--border); }
.an-table tbody tr:last-child { border-bottom: 0; }
.an-table td { padding: 0.5rem 0; text-align: right; }
.an-table td.an-td-country { text-align: left; color: var(--foreground); }
.an-table td.an-td-total { font-weight: 500; color: var(--foreground); }
.an-code { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; background: var(--muted); padding: 0.125rem 0.375rem; border-radius: 0.25rem; margin-right: 0.5rem; }
.an-country { color: var(--muted-foreground); display: none; }
.an-sm-cell { display: none; }
@media (min-width: 640px) {
  .an-country { display: inline; }
  .an-table .an-sm-cell { display: table-cell; }
}
.an-t-acme { color: var(--blue-500); }
.an-t-north { color: var(--orange-500); }
.an-table .an-sort { display: inline; width: 0.75rem; height: 0.75rem; margin-left: 0.125rem; vertical-align: -1px; }
.an-more { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); transition: color 150ms; }
.an-more:hover { color: var(--foreground); }

/* ---- automations.css ---- */
/* Automations — routes/_auth/automations.tsx: AutomationsPage, AutomationRow,
   QuickStartTemplates, AutomationWizard (TriggerStep + ActionsStep, merged into one scrolling
   form here rather than paginated), DeleteAutomationDialog, and a detail sheet that merges the
   trigger, steps and RunHistorySheet's run items into one read-only view. */

.au-x { color: color-mix(in oklab, var(--foreground) 40%, transparent); display: inline-flex; }
.au-x:hover { color: var(--foreground); }

/* Quick-start templates: collapsible "border border-border rounded-lg" */
.au-quick { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.5rem; }
.au-quick__head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: color-mix(in oklab, var(--muted) 30%, transparent); text-align: left; transition: background-color 150ms; }
.au-quick__head:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.au-quick__chev { color: var(--muted-foreground); transition: transform 150ms; }
.au-quick__head.is-open .au-quick__chev { transform: rotate(180deg); }
.au-quick__body { padding: 1rem; }
.au-quick__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .au-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Template card — TemplatePicker's row, and the smaller quick-start grid card */
.au-tpl { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); text-align: left; transition: background-color 150ms, border-color 150ms; }
.au-tpl:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.au-tpl--blank { border-style: dashed; }
.au-tpl--grid { padding: 0.75rem; border-style: dashed; }
.au-tpl__ic { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.au-tpl--grid .au-tpl__ic { width: 2rem; height: 2rem; }
.au-tpl__body { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.au-tpl__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.au-tpl__desc { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

/* Automation list row */
.au-list { display: flex; flex-direction: column; gap: 0.75rem; }
.au-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); transition: background-color 150ms; }
.au-row:hover { background: color-mix(in oklab, var(--muted) 20%, transparent); }
.au-row__icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.au-row__main { flex: 1 1 0%; min-width: 0; }
.au-row__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.au-row__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.au-row__name:hover { color: var(--primary); text-decoration: underline; }
.au-row__desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-row__meta { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.au-row__sched { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.au-row__actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
.au-icon { padding: 0.375rem; border-radius: var(--radius-md); color: var(--muted-foreground); display: inline-flex; transition: color 150ms, background-color 150ms; }
.au-icon:hover { color: var(--foreground); background: var(--muted); }
.au-icon--danger:hover { color: var(--red-600); }
.au-toggle { margin-left: 0.25rem; flex-shrink: 0; }

/* ------------------------------------------------------------------ dialogs */

dialog.dlg.au-dlg { max-width: 34rem; max-height: 85vh; padding: 0; overflow: hidden; }
dialog.dlg.au-dlg[open] { display: flex; flex-direction: column; }
.au-dlg__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.au-dlg__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.au-dlg__body { padding: 1.25rem 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.au-dlg__foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); flex-shrink: 0; }

.au-flabel { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.au-flabel--flush { margin-bottom: 0; }
.au-input { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); }
.au-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.au-textarea { resize: none; display: block; }
.au-btn { padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--foreground); display: inline-flex; align-items: center; gap: 0.375rem; transition: background-color 150ms; }
.au-btn:hover { background: var(--muted); }
.au-btn--primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.au-btn--primary:hover { background: var(--primary); opacity: 0.9; }
.au-btn--danger { background: var(--red-600); color: #fff; border-color: transparent; }
.au-btn--danger:hover { opacity: 0.9; }

.au-seg { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.au-segbtn { padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; border: 1px solid var(--border); background: var(--background); color: var(--foreground); transition: background-color 150ms; }
.au-segbtn:hover { background: var(--muted); }
.au-segbtn.is-active, .au-segbtn.is-active:hover { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.au-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.au-note { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--muted) 40%, transparent); border: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.au-note .i { flex-shrink: 0; }
.au-divider { height: 1px; background: var(--border); margin: 0.25rem 0; }
.au-radios { display: flex; gap: 1rem; flex-wrap: wrap; }
.au-radio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); cursor: pointer; }
.au-accent { accent-color: var(--primary); }

.au-step { padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; gap: 0.5rem; }
.au-step + .au-step { margin-top: 0.75rem; }
.au-step__head { display: flex; align-items: center; justify-content: space-between; }
.au-step__n { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.au-step__del { color: var(--muted-foreground); padding: 0.125rem; border-radius: 0.25rem; }
.au-step__del:hover { color: var(--red-500); background: color-mix(in oklab, var(--red-500) 10%, transparent); }
.au-step__line { font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.au-step__meta { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.au-addaction { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: var(--radius-lg); border: 1px dashed var(--border); font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.au-addaction:hover { color: var(--foreground); background: color-mix(in oklab, var(--muted) 20%, transparent); }

/* ------------------------------------------------------------------ the detail sheet */

.au-panel { max-width: 30rem; display: flex; flex-direction: column; }
.au-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.au-panel__title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--foreground); }
.au-panel__body { flex: 1 1 0%; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.au-panel__foot { display: flex; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.au-panel__foot .au-btn { flex: 1 1 0%; justify-content: center; }
.au-h3 { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.au-steps { display: flex; flex-direction: column; gap: 0.75rem; }
.au-steps .au-step + .au-step { margin-top: 0; }
.au-runs { display: flex; flex-direction: column; gap: 0.5rem; }
.au-run { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); overflow: hidden; }
.au-run__btn { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; text-align: left; transition: background-color 150ms; }
.au-run__btn:hover { background: color-mix(in oklab, var(--muted) 20%, transparent); }
.au-run__ic--success { color: var(--green-500); flex-shrink: 0; }
.au-run__ic--failed { color: var(--red-500); flex-shrink: 0; }
.au-run__ic--running { color: var(--blue-500); flex-shrink: 0; }
.au-run__when { flex: 1 1 0%; min-width: 0; font-size: 0.75rem; line-height: 1rem; color: var(--foreground); }
.au-run__chev { color: var(--muted-foreground); flex-shrink: 0; }
.au-run__detail { padding: 0 0.75rem 0.75rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.au-run__err { margin-top: 0.5rem; padding: 0.5rem; border-radius: 0.25rem; background: var(--red-50); font-size: 0.75rem; line-height: 1rem; color: var(--red-700); font-family: var(--font-mono); white-space: pre-wrap; }
.dark .au-run__err { background: color-mix(in oklab, oklch(25.8% 0.092 26.042) 30%, transparent); color: oklch(70.4% 0.191 22.216); }
.au-run__out { margin-top: 0.5rem; padding: 0.5rem; border-radius: 0.25rem; background: color-mix(in oklab, var(--muted) 40%, transparent); font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); font-family: var(--font-mono); white-space: pre-wrap; }

/* ---- blog.css ---- */
/* Blog Posts — routes/_auth/blog.index.tsx, blog.$postId.tsx, blog.categories.tsx,
   blog.comments.tsx, blog.import.tsx, blog.settings.tsx; components/blog/*.
   The pages are "flex flex-col h-full" with no padding of their own: the header sits flush. */

.bl-page { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
.bl-new {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; white-space: nowrap;
  background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: background-color 150ms;
}
.bl-new:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.bl-scroll { flex: 1 1 0%; min-height: 0; overflow: auto; padding: 1.5rem; }
.bl-scroll--narrow { max-width: 42rem; }

/* Status filter tabs + search */
.bl-filters { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bl-tabs { display: flex; gap: 0.25rem; }
.bl-tab {
  padding: 0.375rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--muted-foreground); transition: color 150ms, background-color 150ms; white-space: nowrap;
}
.bl-tab:hover { color: var(--foreground); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.bl-tab.is-active { background: var(--muted); color: var(--foreground); }
.bl-search { position: relative; margin-left: auto; width: 16rem; }
.bl-search > .i { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.bl-search input {
  width: 100%; padding: 0.375rem 0.75rem 0.375rem 2rem; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground);
}
.bl-search input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

/* Posts table */
.bl-slug { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; font-family: var(--font-mono); color: var(--muted-foreground); }
.bl-slug--flush { margin-top: 0; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bl-chip { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; }
.bl-comments { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

/* A category's colour, tinted for chips ("`${color}20`") and solid for its dot. */
.bl-tone--blue { background: #2563eb20; color: #2563eb; }
.bl-tone--green { background: #05966920; color: #059669; }
.bl-tone--amber { background: #d9770620; color: #d97706; }
.bl-tone--red { background: #dc262620; color: #dc2626; }
.bl-tone--violet { background: #7c3aed20; color: #7c3aed; }
.bl-tone--gray { background: #6b728020; color: #6b7280; }
.bl-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; flex-shrink: 0; }
.bl-dot--blue { background: #2563eb; }
.bl-dot--green { background: #059669; }
.bl-dot--amber { background: #d97706; }
.bl-dot--red { background: #dc2626; }
.bl-dot--violet { background: #7c3aed; }
.bl-dot--gray { background: #6b7280; }

/* ---------------------------------------------------------------- the post editor */
.bl-ed { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
.bl-ed-head {
  display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--background);
}
.bl-ed-crumbs { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.bl-back { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); transition: color 150ms; white-space: nowrap; }
.bl-back:hover { color: var(--foreground); }
.bl-ed-name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-ed-actions { display: flex; align-items: center; gap: 0.5rem; }
.bl-btn {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); transition: color 150ms, background-color 150ms; white-space: nowrap;
}
.bl-btn:hover { background: var(--muted); }
.bl-btn--quiet { color: var(--muted-foreground); }
.bl-btn--quiet:hover { color: var(--foreground); background: transparent; }
.bl-btn--primary { border: 0; background: var(--primary); color: var(--primary-foreground); font-weight: 500; }
.bl-btn--primary:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }

.bl-ed-body { display: flex; flex: 1 1 0%; min-height: 0; overflow: hidden; }
.bl-ed-main { flex: 1 1 0%; min-width: 0; overflow: auto; padding: 1.5rem; }
.bl-ed-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }
.bl-ed-tab {
  padding: 0.375rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  text-transform: capitalize; color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.bl-ed-tab:hover { color: var(--foreground); }
.bl-ed-tab.is-active { background: var(--muted); color: var(--foreground); }

.bl-ed-content { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.bl-ed-title { width: 100%; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; background: transparent; border: 0; outline: none; color: var(--foreground); }
.bl-ed-slug { width: 100%; font-size: 0.875rem; line-height: 1.25rem; font-family: var(--font-mono); color: var(--muted-foreground); background: transparent; border: 0; outline: none; }
.bl-ed-excerpt {
  display: block; width: 100%; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; resize: none;
}
.bl-ed-excerpt:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

/* RichTextEditor */
.bl-rte { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.bl-rte-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent);
}
.bl-tb { display: inline-flex; padding: 0.375rem; border-radius: 0.25rem; color: var(--muted-foreground); transition: background-color 150ms; }
.bl-tb:hover { background: var(--muted); }
.bl-tb--active { background: var(--muted); color: var(--foreground); }
.bl-tb-code { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; font-weight: 700; }
.bl-tb-div { width: 1px; height: 1.25rem; background: var(--border); margin: 0 0.25rem; }
.bl-rte-body { min-height: 16rem; padding: 1rem; outline: none; }

/* "prose prose-sm max-w-none": @tailwindcss/typography's small size, gray theme. */
.bl-prose { font-size: 0.875rem; line-height: 1.7142857; color: #374151; }
.bl-prose > :first-child { margin-top: 0; }
.bl-prose > :last-child { margin-bottom: 0; }
.bl-prose p { margin: 1.1428571em 0; }
.bl-prose h2 { margin: 1.6em 0 0.8em; font-size: 1.4285714em; line-height: 1.4; font-weight: 700; color: #111827; }
.bl-prose h3 { margin: 1.5555556em 0 0.4444444em; font-size: 1.2857143em; line-height: 1.5555556; font-weight: 600; color: #111827; }
.bl-prose strong { font-weight: 600; color: #111827; }
.bl-prose ul, .bl-prose ol { margin: 1.1428571em 0; padding-left: 1.5714286em; }
.bl-prose ul { list-style: disc; }
.bl-prose ol { list-style: decimal; }
.bl-prose li { margin: 0.2857143em 0; padding-left: 0.4285714em; }
.bl-prose ul > li::marker { color: #d1d5db; }
.bl-prose ol > li::marker { color: #6b7280; }
.bl-prose blockquote { margin: 1.3333333em 0; padding-left: 1.1111111em; border-left: 0.25rem solid #e5e7eb; font-style: italic; font-weight: 500; color: #111827; }
.bl-prose blockquote p { margin: 0; }
.dark .bl-prose { color: #d1d5db; }
.dark .bl-prose h2, .dark .bl-prose h3, .dark .bl-prose strong, .dark .bl-prose blockquote { color: #ffffff; }
.dark .bl-prose blockquote { border-left-color: #374151; }
.dark .bl-prose ul > li::marker { color: #4b5563; }

/* SEO and Settings tabs */
.bl-ed-form { max-width: 42rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.bl-label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.bl-input {
  display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground);
}
.bl-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.bl-input--area { resize: none; }
.bl-input--num { width: 6rem; }
.bl-input--w32 { width: 8rem; }
.bl-input--hex { width: 10rem; font-family: var(--font-mono); }
.bl-input--css { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; resize: vertical; min-height: 8rem; }
.bl-count { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.bl-serp { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; background: color-mix(in oklab, var(--muted) 30%, transparent); }
.bl-serp__kicker { margin-bottom: 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.025em; }
.bl-serp__title { font-size: 1rem; line-height: 1.25; font-weight: 500; color: var(--blue-600); }
.bl-serp__url { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.bl-serp__desc { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.bl-danger-zone { padding-top: 1rem; border-top: 1px solid var(--border); }
.bl-delete {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  color: var(--destructive); border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent); border-radius: var(--radius-md); transition: background-color 150ms;
}
.bl-delete:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); }

/* The editor's right-hand column */
.bl-ed-side { width: 16rem; flex-shrink: 0; border-left: 1px solid var(--border); overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
.bl-side-h { margin-bottom: 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.025em; }
.bl-pill { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; background: var(--muted); color: var(--muted-foreground); }
.bl-dt {
  width: 100%; padding: 0.375rem 0.5rem; font-size: 0.75rem; line-height: 1rem; border: 1px solid var(--border);
  border-radius: 0.25rem; background: var(--background); color: var(--foreground);
}
.bl-dt:focus { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.bl-checks { display: flex; flex-direction: column; gap: 0.375rem; }
.bl-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.bl-stamps { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

/* ---------------------------------------------------------------- Categories */
.bl-cat-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bl-cat-row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--background); transition: background-color 150ms;
}
.bl-cat-row:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.bl-cat-name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.bl-cat-desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.bl-row-icons { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.bl-icon-btn { display: inline-flex; padding: 0.375rem; border-radius: 0.25rem; color: var(--muted-foreground); transition: color 150ms; }
.bl-icon-btn:hover { color: var(--foreground); }
.bl-icon-btn--danger:hover { color: var(--destructive); }
.bl-icon-btn--ok:hover { color: var(--green-600); }

/* ---------------------------------------------------------------- Comments */
.bl-ctabs { display: flex; gap: 0.25rem; padding: 0 1.5rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bl-ctotal { margin-left: auto; align-self: center; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); white-space: nowrap; }
.bl-comment-list { max-width: 48rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bl-comment { display: flex; align-items: flex-start; gap: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; background: var(--background); }
.bl-comment--pending { background: color-mix(in oklab, oklch(98.7% 0.026 102.212) 40%, transparent); border-color: oklch(94.5% 0.129 101.54); }
.bl-comment__main { flex: 1 1 0%; min-width: 0; }
.bl-comment__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.bl-comment__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.bl-cpill { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; background: var(--muted); color: var(--muted-foreground); }
.bl-cpill--pending { background: var(--yellow-100); color: oklch(47.6% 0.114 61.907); }
.bl-cpill--approved { background: var(--green-100); color: oklch(44.8% 0.119 151.328); }
.bl-reply { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.bl-comment__body { font-size: 0.875rem; line-height: 1.625; color: var(--foreground); white-space: pre-wrap; overflow-wrap: break-word; }
.bl-comment__at { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

/* ---------------------------------------------------------------- Import */
.bl-import { max-width: 36rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.bl-steps { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.bl-steps__line { width: 2rem; height: 1px; background: var(--border); }
.bl-step { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; background: var(--muted); color: var(--muted-foreground); }
.bl-step--on { background: var(--primary); color: var(--primary-foreground); }
.bl-drop {
  display: flex; flex-direction: column; align-items: center; width: 100%; padding: 2rem; text-align: center;
  border: 2px dashed var(--border); border-radius: var(--radius-lg); transition: border-color 150ms; color: var(--muted-foreground);
}
.bl-drop:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.bl-drop > .i { margin-bottom: 0.5rem; }
.bl-drop__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.bl-drop__hint { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.bl-wide-btn { width: 100%; padding: 0.5rem 1rem; background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.bl-wide-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------------------------------------------------------------- Settings */
.bl-settings { max-width: 42rem; display: flex; flex-direction: column; gap: 2rem; }
.bl-sec-title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.bl-sec-desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.bl-field { display: block; }
.bl-field__label { margin-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); }
.bl-field__hint { margin-bottom: 0.375rem; font-size: 0.6875rem; color: var(--muted-foreground); }
.bl-color { width: 3rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 0.25rem; cursor: pointer; background: transparent; }
.bl-save-row { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.bl-save {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: background-color 150ms;
}
.bl-save:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }

/* At phone width, rows that would push the page sideways in Dorris wrap instead. */
@media (max-width: 639px) {
  .bl-filters { flex-wrap: wrap; }
  .bl-search { margin-left: 0; width: 100%; }
  .bl-ed-head { flex-wrap: wrap; gap: 0.5rem; }
}

/* ---- bundles.css ---- */
/* Bundles — routes/_auth/bundles.tsx, bundles.index.tsx, bundles.reconciliations.tsx,
   components/bundles/BundlesTabs.tsx */

/* BundlesTabs.tsx: "flex gap-1 px-6 pt-2 pb-3 border-b border-border" */
.bun-tabs { display: flex; gap: 0.25rem; padding: 0.5rem 1.5rem 0.75rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bun-tab { padding: 0.375rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.bun-tab:hover { color: var(--foreground); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.bun-tab.is-active { background: var(--muted); color: var(--foreground); }

/* BundlesPage: "flex flex-col h-full" with a pinned header and a scrolling body */
.bun-root { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.bun-headwrap { padding: 1.5rem 1.5rem 0; flex-shrink: 0; }
.bun-body { flex: 1 1 0%; overflow: auto; padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* Stat pills (StatPill) */
.bun-stats { gap: 0.5rem; }
.bun-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 70%, transparent); transition: color 150ms, border-color 150ms, background-color 150ms; }
.bun-pill__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.bun-pill--default.is-active { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.bun-pill--green:hover { border-color: color-mix(in oklab, var(--emerald-600) 50%, transparent); color: var(--emerald-700); }
.bun-pill--green.is-active { border-color: var(--emerald-600); background: color-mix(in oklab, var(--emerald-600) 10%, transparent); color: var(--emerald-700); }
.dark .bun-pill--green.is-active { color: oklch(84.5% 0.143 164.978); }
.bun-pill--red:hover { border-color: color-mix(in oklab, var(--red-500) 50%, transparent); color: var(--red-700); }
.bun-pill--red.is-active { border-color: var(--red-500); background: color-mix(in oklab, var(--red-500) 10%, transparent); color: var(--red-700); }
.dark .bun-pill--red.is-active { color: var(--red-300); }
.bun-pill--gray:hover { border-color: color-mix(in oklab, var(--foreground) 30%, transparent); }
.bun-pill--gray.is-active { border-color: oklch(55.2% 0.016 285.938); background: color-mix(in oklab, oklch(55.2% 0.016 285.938) 10%, transparent); color: var(--foreground); }

.bun-search { max-width: 28rem; }
.bun-search .search-box { display: block; width: 100%; }
.bun-search .field { display: block; width: 100%; }

/* Table cells */
.bun-parentsku { color: var(--emerald-700); }
.dark .bun-parentsku { color: oklch(84.5% 0.143 164.978); }
.bun-flag { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0 0.375rem; border-radius: var(--radius-sm); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.bun-flag--amber { background: var(--amber-100); color: var(--amber-700); }
.dark .bun-flag--amber { background: color-mix(in oklab, var(--amber-800) 50%, transparent); color: var(--amber-300); }
.bun-flag--gray { background: var(--zinc-100); color: var(--zinc-700); }
.dark .bun-flag--gray { background: var(--zinc-800); color: var(--zinc-300); }
.bun-error { color: var(--red-500); }
.dark .bun-error { color: oklch(70.4% 0.191 22.216); }
.bun-warntext { color: var(--amber-700); }
.dark .bun-warntext { color: var(--amber-300); }
.bun-rowactions { justify-content: flex-end; }
.bun-syncbadge { gap: 0.25rem; }
@media (max-width: 639px) { .table .bun-sm-only { display: none; } }

/* The edit drawer (BundleEditor), a right-hand sheet like Suppliers' */
.bun-drawer { width: 100%; }
@media (min-width: 640px) { .bun-drawer { max-width: 36rem; } }
.bun-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bun-drawer__kicker { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.bun-drawer__body { flex: 1 1 0%; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.bun-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--card); }
.bun-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.bun-parent { padding: 0.625rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); }

.bun-comp { padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 20%, transparent); }
.bun-comp__meta { gap: 0.75rem; margin-top: 0.375rem; }
.bun-dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 9999px; flex-shrink: 0; }
.bun-dot--0, .bun-alloc__seg--0 { background: var(--primary); fill: var(--primary); }
.bun-dot--1, .bun-alloc__seg--1 { background: var(--blue-500); fill: var(--blue-500); }
.bun-dot--2, .bun-alloc__seg--2 { background: var(--amber-500); fill: var(--amber-500); }
.bun-dot--3, .bun-alloc__seg--3 { background: var(--orange-500); fill: var(--orange-500); }
.bun-dot--4, .bun-alloc__seg--4 { background: var(--stone-400); fill: var(--stone-400); }

.bun-alloc__bar { display: block; width: 100%; height: 0.625rem; border-radius: 9999px; overflow: hidden; background: var(--muted); }

.bun-togglerow { align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.bun-togglerow .toggle { margin-top: 0.125rem; flex-shrink: 0; }
.bun-hint { display: block; margin-top: 0.125rem; }

.bun-statuspanel { padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 20%, transparent); }
.bun-danger { color: var(--red-500); }
.bun-danger:hover { background: color-mix(in oklab, var(--red-500) 10%, transparent); color: var(--red-500); opacity: 1; }
.dark .bun-danger { color: oklch(70.4% 0.191 22.216); }

/* Reconciliations page */
.bun-warn { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--amber-300); background: var(--amber-50); }
.dark .bun-warn { border-color: color-mix(in oklab, var(--amber-800) 70%, transparent); background: color-mix(in oklab, oklch(41.4% 0.112 45.904) 25%, transparent); }
.bun-warn__ic { color: var(--amber-600); flex-shrink: 0; margin-top: 0.125rem; }
.bun-warn__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: oklch(41.4% 0.112 45.904); }
.dark .bun-warn__title { color: var(--amber-300); }
.bun-warn__desc { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--amber-800); }
.dark .bun-warn__desc { color: color-mix(in oklab, var(--amber-300) 80%, transparent); }

.bun-fieldlabel { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.bun-orderinput { width: 16rem; max-width: 100%; }
.bun-trace { padding-top: 1rem; border-top: 1px solid var(--border); }
.bun-reasons { padding-left: 1.25rem; list-style: disc; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); display: flex; flex-direction: column; gap: 0.25rem; }
.bun-childrow { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.bun-childrow td { padding-left: 2rem; color: var(--muted-foreground); }
.bun-unbroken { background: var(--amber-100); color: var(--amber-800); border-color: transparent; }
.dark .bun-unbroken { background: color-mix(in oklab, var(--amber-800) 50%, transparent); color: var(--amber-300); }
.bun-wouldcreate { padding: 0.75rem 1rem; border-radius: var(--radius-md); border: 1px solid oklch(92.5% 0.084 155.995); background: oklch(98.2% 0.018 155.826); }
.dark .bun-wouldcreate { border-color: color-mix(in oklab, oklch(44.8% 0.119 151.328) 60%, transparent); background: color-mix(in oklab, var(--green-900) 25%, transparent); }
.bun-wouldcreate__title { color: var(--green-700); }
.dark .bun-wouldcreate__title { color: var(--green-300); }
.bun-h3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.75rem; }

/* ---- cogs.css ---- */
/* COGS & Margins — routes/_auth/cogs.tsx and components/cogs/* */

/* ---------------------------------------------------------------- warning banners */
.cogs-warn {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem;
  border-radius: var(--radius-lg); border: 1px solid var(--amber-200); background: var(--amber-50);
  font-size: 0.875rem; line-height: 1.25rem; color: var(--amber-800, #92400e);
}
.dark .cogs-warn { border-color: color-mix(in oklab, var(--amber-900, #78350f) 50%, transparent); background: color-mix(in oklab, var(--amber-900, #78350f) 40%, transparent); color: var(--amber-300, #fcd34d); }
.cogs-warn__ic { flex-shrink: 0; margin-top: 0.125rem; }
.cogs-warn__fix { margin-left: auto; flex-shrink: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.cogs-warn__fix:hover { text-decoration: none; }

/* ---------------------------------------------------------------- filter bar */
.cogs-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
  padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card);
}
.cogs-flabel { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.cogs-range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.cogs-preset { position: relative; }
.cogs-preset__sel {
  appearance: none; padding: 0.375rem 2rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground); cursor: pointer;
}
.cogs-preset__sel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.cogs-preset__ic { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }

/* the local seg() helper: cogs-tests's own granularity / cost-basis / export pills */
.cogs-seg { display: flex; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.cogs-seg > button {
  padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
  background: var(--background); color: var(--foreground); transition: background-color 150ms, color 150ms;
}
.cogs-seg > button:hover { background: var(--muted); }
.cogs-seg > button.is-active, .cogs-seg > button.is-active:hover { background: var(--primary); color: var(--primary-foreground); }
.cogs-seg--cap > button { text-transform: capitalize; }
.cogs-seg--fit { width: fit-content; }

.cogs-channels { display: flex; align-items: center; gap: 0.75rem; }
.cogs-check { display: flex; align-items: center; gap: 0.375rem; cursor: pointer; }
.cogs-check input { width: 1rem; height: 1rem; border-radius: 0.25rem; accent-color: var(--primary); }
.cogs-check span { font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }

.cogs-basis { display: flex; align-items: center; gap: 0.5rem; }
.cogs-tip { position: relative; display: inline-flex; color: var(--muted-foreground); cursor: help; }
.cogs-tip__box {
  display: none; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 0.5rem;
  width: 18rem; padding: 0.625rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card);
  box-shadow: var(--shadow-lg); font-size: 0.75rem; line-height: 1.25rem; color: var(--foreground); z-index: 50;
}
.cogs-tip:hover .cogs-tip__box, .cogs-tip:focus .cogs-tip__box, .cogs-tip:focus-within .cogs-tip__box { display: block; }

.cogs-hbtn {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  font-weight: 500; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card);
  color: var(--foreground); transition: background-color 150ms;
}
.cogs-hbtn:hover { background: var(--muted); }

/* ---------------------------------------------------------------- summary cards */
.cogs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .cogs-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cogs-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; }
.cogs-card__l { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.cogs-card__v { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--foreground); }

.cogs-good { color: var(--green-600); }
.dark .cogs-good { color: oklch(79.2% 0.209 151.711); }
.cogs-ok { color: #ca8a04; }
.dark .cogs-ok { color: #facc15; }
.cogs-bad { color: var(--red-600); }
.dark .cogs-bad { color: oklch(70.4% 0.191 22.216); }

/* ---------------------------------------------------------------- chart panel */
.cogs-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; }
.cogs-h3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }

/* CogsTimeseriesChart.tsx, hand-drawn: three fixed-viewBox SVGs, one shown per breakpoint. */
.cogs-chart { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
.cogs-chart__v { display: none; width: 100%; }
.cogs-chart__v--sm { display: block; }
@media (min-width: 640px) { .cogs-chart__v--sm { display: none; } .cogs-chart__v--md { display: block; } }
@media (min-width: 1024px) { .cogs-chart__v--md { display: none; } .cogs-chart__v--lg { display: block; } }
.cogs-chart__svg { display: block; width: 100%; height: auto; }
.cogs-grid line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.cogs-ytick text, .cogs-xtick text { font-size: 11px; fill: var(--muted-foreground); font-family: var(--font-sans); }
.cogs-hit { fill: transparent; }
.cogs-bar-sr { fill: #fdba74; }
.cogs-bar-sc { fill: #f97316; }
.cogs-bar-ar { fill: #93c5fd; }
.cogs-bar-ac { fill: #3b82f6; }

.cogs-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem 0.875rem; }
.cogs-legend__item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.cogs-legend__icon { width: 0.875rem; height: 0.875rem; display: inline-block; }
.cogs-fill-shopify-revenue { fill: #fdba74; }
.cogs-fill-shopify-cogs { fill: #f97316; }
.cogs-fill-amazon-revenue { fill: #93c5fd; }
.cogs-fill-amazon-cogs { fill: #3b82f6; }
.cogs-text-shopify-revenue { color: #c2650a; }
.cogs-text-shopify-cogs { color: #f97316; }
.cogs-text-amazon-revenue { color: #4c8fd6; }
.cogs-text-amazon-cogs { color: #3b82f6; }
.dark .cogs-text-shopify-revenue { color: #fdba74; }
.dark .cogs-text-amazon-revenue { color: #93c5fd; }

/* ---------------------------------------------------------------- per-channel cards */
.cogs-channel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .cogs-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cogs-ch { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; }
.cogs-ch__t { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.cogs-ch__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.cogs-ch__l { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

/* ---------------------------------------------------------------- Per-SKU breakdown table */
.cogs-tablebox { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.cogs-scroll { overflow-x: auto; }
.cogs-table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.cogs-table thead tr { background: var(--card); border-bottom: 1px solid var(--border); }
.cogs-th { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.cogs-th--sort { cursor: pointer; user-select: none; }
.cogs-th--sort:hover { color: var(--foreground); }
.cogs-sort { width: 0.75rem; height: 0.75rem; color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); vertical-align: -1px; margin-left: 0.125rem; }
.cogs-sort--on { color: var(--primary); }
.cogs-table tbody tr { border-bottom: 1px solid var(--border); transition: background-color 150ms; }
.cogs-table tbody tr:last-child { border-bottom: 0; }
.cogs-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 20%, transparent); }
.cogs-table td { padding: 0.625rem 1rem; vertical-align: middle; }
.cogs-cap { text-transform: capitalize; }

.cogs-src { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; }
.cogs-src--override { background: var(--purple-100); color: var(--purple-700); }
.cogs-src--live { background: var(--green-100); color: var(--green-700); }
.cogs-src--map { background: var(--blue-100); color: var(--blue-700); }
.cogs-src--unknown { background: var(--red-100); color: var(--red-700); }
.dark .cogs-src--override { background: color-mix(in oklab, var(--purple-900) 40%, transparent); color: var(--purple-300); }
.dark .cogs-src--live { background: color-mix(in oklab, var(--green-900) 40%, transparent); color: var(--green-300); }
.dark .cogs-src--map { background: color-mix(in oklab, var(--blue-900) 40%, transparent); color: var(--blue-300); }
.dark .cogs-src--unknown { background: color-mix(in oklab, var(--red-900) 40%, transparent); color: var(--red-300); }

/* ---------------------------------------------------------------- drawers (SKU Mappings / Export Settings) */
.cogs-drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.cogs-drawer__shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); }
.cogs-drawer__panel {
  position: relative; width: 100%; max-width: 34rem; height: 100%; background: var(--card); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-xl); overflow-y: auto; display: flex; flex-direction: column;
}
.cogs-drawer__panel--md { max-width: 30rem; }
.cogs-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cogs-drawer__x { color: var(--muted-foreground); transition: color 150ms; }
.cogs-drawer__x:hover { color: var(--foreground); }
.cogs-drawer__body { padding: 1.25rem; flex: 1 1 0%; }

.cogs-dtabs { display: flex; gap: 0.25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cogs-dtab {
  padding: 0.625rem 0.25rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 0.875rem; line-height: 1.25rem;
  font-weight: 500; color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.cogs-dtab:hover { color: var(--foreground); }
.cogs-dtab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }
.cogs-dtabs + .cogs-drawer__body { padding-top: 1rem; }

/* SKU Mappings — Shopify overrides */
.cogs-addbox { border-radius: var(--radius-lg); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); padding: 0.875rem; }
.cogs-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.625rem; margin-bottom: 0.75rem; }
.cogs-xlabel { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.cogs-xinput {
  width: 100%; padding: 0.375rem 0.625rem; font-size: 0.8125rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.cogs-xinput:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.cogs-xinput--search { padding-left: 2rem; }
.cogs-addbtn {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--radius-md);
  background: var(--primary); color: var(--primary-foreground); font-size: 0.8125rem; font-weight: 500; transition: opacity 150ms;
}
.cogs-addbtn:hover { opacity: 0.9; }
.cogs-addlink { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--primary); }
.cogs-addlink:hover { text-decoration: underline; }

.cogs-mtable { width: 100%; font-size: 0.8125rem; line-height: 1.25rem; margin-top: 0.875rem; }
.cogs-mtable th { padding: 0.5rem 0.625rem; text-align: left; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); border-bottom: 1px solid var(--border); white-space: nowrap; }
.cogs-mtable td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cogs-mtable tr:last-child td { border-bottom: 0; }
.cogs-mtable--xs { font-size: 0.75rem; }
.cogs-sm-cell { display: none; }
.cogs-md-cell { display: none; }
@media (min-width: 480px) { .cogs-sm-cell { display: table-cell; } }
@media (min-width: 640px) { .cogs-md-cell { display: table-cell; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.cogs-w8 { width: 2rem; }
.cogs-w10 { width: 2.5rem; }
.cogs-trashcell { text-align: right; }
.cogs-trash, .cogs-pen { color: var(--muted-foreground); transition: color 150ms, background-color 150ms; padding: 0.25rem; border-radius: 0.25rem; }
.cogs-trash:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.cogs-pen:hover { color: var(--foreground); background: var(--muted); }
.cogs-cost { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SKU Mappings — Amazon mappings */
.cogs-alabel { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.cogs-asel {
  width: 100%; padding: 0.375rem 0.625rem; font-size: 0.8125rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground); appearance: auto;
}
.cogs-msearch { position: relative; display: flex; align-items: center; color: var(--muted-foreground); }
.cogs-msearch > .i { position: absolute; left: 0.625rem; }
.cogs-msearch > .cogs-xinput { padding-left: 2rem; }
.cogs-mbox { border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.cogs-mbox .cogs-mtable { margin-top: 0; }
.cogs-mbox .cogs-mtable thead tr { background: color-mix(in oklab, var(--muted) 40%, transparent); }

.cogs-sb { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; white-space: nowrap; }
.cogs-sb--shopify { background: var(--blue-100); color: var(--blue-700); }
.cogs-sb--manual { background: var(--purple-100); color: var(--purple-700); }
.cogs-sb--none { background: var(--zinc-100); color: var(--zinc-700); }
.dark .cogs-sb--shopify { background: color-mix(in oklab, var(--blue-900) 40%, transparent); color: var(--blue-300); }
.dark .cogs-sb--manual { background: color-mix(in oklab, var(--purple-900) 40%, transparent); color: var(--purple-300); }
.dark .cogs-sb--none { background: var(--zinc-800); color: var(--zinc-300); }

/* Export Settings drawer */
.cogs-ex { display: flex; flex-direction: column; gap: 1rem; }
.cogs-exlabel { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.375rem; }
.cogs-exlabel--row { display: inline-flex; align-items: center; gap: 0.375rem; margin-bottom: 0; }
.cogs-inline-ic { color: var(--muted-foreground); }
.cogs-exinput {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.cogs-exinput:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
select.cogs-exinput { appearance: auto; }
.cogs-sched { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.625rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.cogs-ex__foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.cogs-exsave { padding: 0.5rem 1rem; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; font-weight: 500; transition: opacity 150ms; }
.cogs-exsave:hover { opacity: 0.9; }
.cogs-expush { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 0.875rem; font-weight: 500; color: var(--foreground); transition: background-color 150ms; }
.cogs-expush:hover { background: var(--muted); }

/* ---- content-calendar.css ---- */
/* Content Calendar — routes/_auth/content-calendar*.tsx and components/content-calendar/* */

/* ---------------------------------------------------------------- platform glyphs (platform-icon.tsx) */
/* Base size matches Dorris's PlatformIcon default (h-4 w-4); callers pass a smaller modifier. */
.cc-pi { width: 1rem; height: 1rem; flex-shrink: 0; }
.cc-pi--3 { width: 0.75rem; height: 0.75rem; }
.cc-pi--35 { width: 0.875rem; height: 0.875rem; }
.cc-pi--4 { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------- toolbar + view switcher (calendar-toolbar.tsx, view-switcher.tsx) */
.cc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.cc-views { display: inline-flex; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.cc-view {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  font-weight: 500; color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.cc-view:hover { color: var(--foreground); background: var(--muted); }
.cc-view.is-active, .cc-view.is-active:hover { background: var(--primary); color: var(--primary-foreground); }
.cc-month { min-width: 8rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }

/* ---------------------------------------------------------------- filter pills (status-filter-pills.tsx + channel row) */
.cc-filters { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.cc-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.cc-pills__label { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); align-self: center; margin-right: 0.125rem; }
.cc-chan {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px;
  border: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground);
  text-transform: capitalize; transition: color 150ms, background-color 150ms;
}
.cc-chan:hover { color: var(--foreground); background: var(--muted); }
.cc-spill {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px;
  border: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground);
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.cc-spill:hover { color: var(--foreground); background: var(--muted); }
.cc-spill[aria-checked="true"] { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.cc-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; flex-shrink: 0; }
.cc-dot--draft { background: #a1a1aa; }
.cc-dot--submitted { background: #3b82f6; }
.cc-dot--revisions_requested { background: #f97316; }
.cc-dot--approved { background: #22c55e; }
.cc-dot--posted { background: #a855f7; }
.cc-dot--archived { background: #d4d4d8; }

/* ---------------------------------------------------------------- month grid (calendar-month-grid.tsx) */
.cc-cal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cc-cal__title { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.cc-cal__h2 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.cc-cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.cc-cal__days > div {
  padding: 0.5rem; text-align: center; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted-foreground);
}
.cc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cc-cell {
  position: relative; min-height: 6.5rem; padding: 0.375rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  transition: background-color 150ms;
}
.cc-cell:hover { background: color-mix(in oklab, var(--muted) 10%, transparent); }
.cc-cell--end { border-right: 0; }
.cc-cell--out { background: color-mix(in oklab, var(--muted) 20%, transparent); }
.cc-cell__num { display: flex; justify-content: flex-end; margin-bottom: 0.25rem; }
.cc-cell__num span { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.cc-today { display: flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); }
.cc-in { color: var(--foreground); }
.cc-out { color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); }
.cc-cell__chips { display: flex; flex-direction: column; gap: 0.125rem; }
.cc-more { width: 100%; text-align: left; padding: 0 0.25rem; font-size: 0.625rem; line-height: 1rem; color: var(--muted-foreground); }
.cc-more:hover { color: var(--foreground); }
.cc-pop {
  position: absolute; z-index: 20; margin-top: 0.25rem; width: 14rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-lg);
}
.cc-pop__date { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.cc-pop__close { margin-top: 0.25rem; width: 100%; text-align: left; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.cc-pop__close:hover { color: var(--foreground); }

/* post-chip.tsx */
.cc-chip {
  display: flex; width: 100%; align-items: center; gap: 0.25rem; padding: 0.125rem 0.25rem; border-radius: 0.25rem;
  text-align: left; font-size: 0.625rem; line-height: 1.1; font-weight: 500; background: var(--card); border: 1px solid var(--border);
  transition: background-color 150ms; overflow: hidden;
}
.cc-chip:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.cc-chip--subdued { background: color-mix(in oklab, var(--muted) 30%, transparent); color: var(--muted-foreground); border-color: transparent; }
.cc-chip--subdued:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.cc-chip__time { flex-shrink: 0; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.cc-chip__icons { display: inline-flex; align-items: center; gap: 0.125rem; flex-shrink: 0; }
.cc-chip__more { font-size: 0.5625rem; color: var(--muted-foreground); }
.cc-chip__cap { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-nocap { opacity: 0.6; font-style: italic; }

/* ---------------------------------------------------------------- Queue (queue-row.tsx) */
.cc-queue { display: flex; flex-direction: column; gap: 1.5rem; }
.cc-group-h { font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.cc-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.cc-qrow {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--card); transition: background-color 150ms; cursor: pointer;
}
.cc-qrow:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.cc-thumb {
  width: 4rem; height: 4rem; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.cc-thumb__img { width: 100%; height: 100%; }
.cc-thumb__letter { font-size: 1.125rem; font-weight: 700; color: var(--muted-foreground); }
.cc-qmain { flex: 1 1 0%; min-width: 0; }
.cc-qtop { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; }
.cc-qcap { flex: 1 1 0%; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-qicons { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.cc-qmeta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); }
.cc-owner { display: flex; align-items: center; gap: 0.375rem; }
.cc-owner__av { display: flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 10%, transparent); font-size: 0.5rem; font-weight: 700; color: var(--primary); }
.cc-clip { display: inline-flex; align-items: center; gap: 0.125rem; }
.cc-qside { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
.cc-qactions { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; }

/* ---------------------------------------------------------------- List view */
.cc-listfilters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.cc-listsearch { flex: 1 1 0%; min-width: 12rem; max-width: 20rem; }
.cc-licons { display: inline-flex; align-items: center; gap: 0.25rem; }
.cc-italic { font-style: italic; }
.cc-chev { display: flex; justify-content: flex-end; color: var(--muted-foreground); }
.cc-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: 0.875rem; line-height: 1.25rem; }

/* ---------------------------------------------------------------- Post drawer shell (post-drawer.tsx: w-full sm:w-[480px]) */
.cc-drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.cc-drawer__shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); }
.cc-drawer__panel {
  position: relative; width: 100%; height: 100%; background: var(--card); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-xl); overflow: hidden; display: flex; flex-direction: column;
}
@media (min-width: 640px) { .cc-drawer__panel { width: 30rem; } }

/* post-editor.tsx head + tabs + foot */
.cc-pe-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cc-pe-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cc-pe-close { color: var(--muted-foreground); }
.cc-pe-close:hover { color: var(--foreground); }
.cc-pe-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--card); flex-shrink: 0; }
.cc-pe-tab {
  padding: 0.625rem 1rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 0.875rem; line-height: 1.25rem;
  font-weight: 500; color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.cc-pe-tab:hover { color: var(--foreground); }
.cc-pe-tab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }
.cc-pe-body { flex: 1 1 0%; overflow-y: auto; min-height: 0; }
.cc-pe-edit { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.cc-pe-timeline { padding: 1.25rem 1.5rem; }
.cc-pe-empty { padding: 3rem 0; text-align: center; }
.cc-pe-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.5rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.cc-pe-save { font-size: 0.75rem; color: var(--muted-foreground); }
.cc-pe-actions { display: flex; align-items: center; gap: 0.5rem; }

.cc-hint { border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.cc-hint--review { border-color: var(--green-300); background: var(--green-100); color: var(--green-700); }
.dark .cc-hint--review { border-color: color-mix(in oklab, var(--green-900) 40%, transparent); background: color-mix(in oklab, var(--green-900) 20%, transparent); color: var(--green-300); }

.cc-sec-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.cc-sec-h { font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }

/* Media viewer (media-preview-grid.tsx: black stage + nav arrows + thumbnail strip) */
.cc-media { display: flex; flex-direction: column; gap: 0.5rem; }
.cc-media__main { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; aspect-ratio: 16 / 10; }
.cc-media__img { width: 100%; height: 100%; }
.cc-media__nav {
  position: absolute; top: 50%; transform: translateY(-50%); padding: 0.375rem; border-radius: 9999px;
  background: rgb(0 0 0 / 0.6); color: #fff; opacity: 0.7; transition: opacity 150ms, background-color 150ms;
}
.cc-media__nav:hover { opacity: 1; background: rgb(0 0 0 / 0.8); }
.cc-media__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cc-media__nav--prev { left: 0.5rem; }
.cc-media__nav--next { right: 0.5rem; }
.cc-media__count { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 9999px; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 0.75rem; font-weight: 500; pointer-events: none; }
.cc-media__strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.125rem; }
.cc-media__thumb { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; }
.cc-media__thumb.is-current { border-color: var(--primary); }

/* Basics grid */
.cc-basics { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 0.75rem; row-gap: 0.625rem; align-items: start; }
.cc-basics__label { padding-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.cc-input {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.cc-input:disabled { opacity: 0.7; cursor: not-allowed; }
.cc-ppills { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.125rem; }
.cc-ppill {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); font-size: 0.8125rem; color: var(--muted-foreground); transition: color 150ms, background-color 150ms, border-color 150ms;
}
.cc-ppill.is-active { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.cc-caption { resize: vertical; min-height: 8rem; }
.cc-counters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

.cc-chipinput {
  display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.375rem 0.5rem; min-height: 2.5rem; align-items: center;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background);
}
.cc-chipinput__chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-md); background: var(--muted); color: var(--foreground); font-size: 0.75rem; line-height: 1rem; }
.cc-chipinput__input { flex: 1 1 0%; min-width: 5rem; background: transparent; font-size: 0.875rem; color: var(--foreground); }
.cc-chipinput__input::placeholder { color: var(--muted-foreground); }

/* ---------------------------------------------------------------- Social Accounts (content-calendar.accounts.tsx) */
.cc-accounts .stack-4 > .cc-acct:first-child { margin-top: 0; }
.cc-acct { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cc-acct__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.cc-acct__tile { display: flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md); }
.cc-acct__name { flex: 1 1 0%; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.cc-acct__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); }
.cc-acct__av { width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); flex-shrink: 0; }
.cc-acct__meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.cc-acct__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.cc-disconnect:hover { color: var(--destructive); border-color: var(--destructive); }
.cc-acct__none { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; font-size: 0.875rem; }

/* brand tiles: background/text at ~8% of each platform's brand colour (Simple Icons hex) */
.cc-brand--instagram { background: color-mix(in oklab, #e4405f 12%, transparent); color: #e4405f; }
.cc-brand--tiktok { background: color-mix(in oklab, #6b7280 20%, transparent); color: var(--foreground); }
.cc-brand--facebook { background: color-mix(in oklab, #1877f2 12%, transparent); color: #1877f2; }
.cc-brand--linkedin { background: color-mix(in oklab, #0a66c2 12%, transparent); color: #0a66c2; }
.cc-brand--youtube { background: color-mix(in oklab, #ff0000 12%, transparent); color: #ff0000; }
.cc-brand--x { background: color-mix(in oklab, #6b7280 20%, transparent); color: var(--foreground); }
.cc-brand--pinterest { background: color-mix(in oklab, #bd081c 12%, transparent); color: #bd081c; }
.cc-brand--threads { background: color-mix(in oklab, #6b7280 20%, transparent); color: var(--foreground); }
.dark .cc-brand--tiktok, .dark .cc-brand--x, .dark .cc-brand--threads { color: var(--foreground); }

/* Connect-account dialog */
.cc-dlg { max-width: 26rem; }
.cc-dlg__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.cc-dlg__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.cc-dlg__x { color: var(--muted-foreground); }
.cc-dlg__x:hover { color: var(--foreground); }
.cc-dlg__label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.cc-dlg__foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }

/* ---- crm.css ---- */
/* CRM — routes/_auth/crm.tsx and components/crm/* */

:root {
  /* Tailwind palette values the CRM uses that the base file does not define. */
  --crm-teal-50: oklch(98.4% 0.014 180.72);
  --crm-teal-200: oklch(91% 0.096 180.426);
  --crm-teal-300: oklch(85.5% 0.138 181.071);
  --crm-teal-500: oklch(70.4% 0.14 182.503);
  --crm-teal-700: oklch(51.1% 0.096 186.391);
  --crm-teal-800: oklch(43.7% 0.078 188.216);
  --crm-teal-900: oklch(38.6% 0.063 188.416);
  --crm-gray-100: oklch(96.7% 0.003 264.542);
  --crm-gray-300: oklch(87.2% 0.01 258.338);
  --crm-gray-400: oklch(70.7% 0.022 261.325);
  --crm-gray-700: oklch(37.3% 0.034 259.733);
  --crm-gray-800: oklch(27.8% 0.033 256.848);
  --crm-purple-500: oklch(62.7% 0.265 303.9);
  --crm-purple-800: oklch(43.8% 0.218 303.724);
  --crm-orange-800: oklch(47% 0.157 37.304);
  --crm-yellow-500: oklch(79.5% 0.184 86.047);
  --crm-yellow-800: oklch(47.6% 0.114 61.907);
  --crm-green-800: oklch(44.8% 0.119 151.328);
  --crm-red-800: oklch(44.4% 0.177 26.899);
  --crm-red-400: oklch(70.4% 0.191 22.216);
  --crm-pink-100: oklch(94.8% 0.028 342.258);
  --crm-pink-300: oklch(82.3% 0.12 346.018);
  --crm-pink-500: oklch(65.6% 0.241 354.308);
  --crm-pink-800: oklch(45.9% 0.187 3.815);
  --crm-pink-900: oklch(40.8% 0.153 2.432);
  --crm-teal-100: oklch(95.3% 0.051 180.801);
}

/* ---- page header actions (the inner row wraps below sm so a phone never scrolls sideways) */
.crm-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@media (min-width: 640px) { .crm-actions { flex-wrap: nowrap; } }
.crm-brand { display: flex; align-items: center; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--muted); padding: 0.125rem; gap: 0.125rem; }
.crm-brand > button {
  padding: 0.25rem 0.625rem; border-radius: var(--radius-sm); font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.crm-brand > button:hover { color: var(--foreground); }
.crm-brand > button.is-active { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }

/* ---- top-level tab bar + attention banner (the tab row scrolls inside itself on a phone) */
.crm-tabbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.crm-tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.crm-tabs::-webkit-scrollbar { display: none; }
.crm-tab {
  padding: 0.625rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.crm-tab:hover { color: var(--foreground); }
.crm-tab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }
.crm-attn { padding-bottom: 0.25rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.crm-attn__new {
  display: inline-flex; align-items: center; gap: 0.25rem; background: var(--crm-teal-500); color: #fff;
  font-size: 0.75rem; line-height: 1rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 9999px; white-space: nowrap;
}

/* ---- KPI strip (crm-kpi-strip.tsx) */
.crm-kpi {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem;
  padding: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .crm-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.crm-kpi__close { position: absolute; top: 0.5rem; right: 0.5rem; color: var(--muted-foreground); transition: color 150ms; }
.crm-kpi__close:hover { color: var(--foreground); }
.crm-kpi__item > * + * { margin-top: 0.125rem; }
.crm-kpi__label { font-size: 0.625rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.025em; }
.crm-kpi__value { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--foreground); }
.crm-kpi__hint { font-size: 0.6875rem; color: var(--muted-foreground); }

/* ---- pipeline filter bar */
.crm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.crm-search { flex: 1 1 0%; min-width: 200px; max-width: 24rem; }
.crm-new {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--muted-foreground);
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.crm-new:hover { color: var(--foreground); background: var(--muted); }
.crm-new__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--crm-teal-500); }
.crm-layout { margin-left: auto; display: flex; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.crm-layout > a {
  padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem;
  font-weight: 500; color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.crm-layout > a:hover { color: var(--foreground); background: var(--muted); }
.crm-layout > a.is-active { background: var(--primary); color: var(--primary-foreground); }

/* ---- stage chips and dots (STAGE_COLOR_MAP / STAGE_DOT_MAP) */
.crm-stage { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.crm-stage--blue { background: var(--blue-100); color: var(--blue-800); }
.crm-stage--purple { background: var(--purple-100); color: var(--crm-purple-800); }
.crm-stage--orange { background: var(--orange-100); color: var(--crm-orange-800); }
.crm-stage--yellow { background: var(--yellow-100); color: var(--crm-yellow-800); }
.crm-stage--green { background: var(--green-100); color: var(--crm-green-800); }
.crm-stage--red { background: var(--red-100); color: var(--crm-red-800); }
.crm-stage--gray { background: var(--crm-gray-100); color: var(--crm-gray-700); }
.crm-stage--pink { background: var(--crm-pink-100); color: var(--crm-pink-800); }
.crm-stage--teal { background: var(--crm-teal-100); color: var(--crm-teal-800); }
.dark .crm-stage--blue { background: color-mix(in oklab, var(--blue-900) 40%, transparent); color: var(--blue-300); }
.dark .crm-stage--purple { background: color-mix(in oklab, var(--purple-900) 40%, transparent); color: var(--purple-300); }
.dark .crm-stage--orange { background: color-mix(in oklab, var(--orange-900) 40%, transparent); color: var(--orange-300); }
.dark .crm-stage--yellow { background: color-mix(in oklab, var(--yellow-900) 40%, transparent); color: var(--yellow-300); }
.dark .crm-stage--green { background: color-mix(in oklab, var(--green-900) 40%, transparent); color: var(--green-300); }
.dark .crm-stage--red { background: color-mix(in oklab, var(--red-900) 40%, transparent); color: var(--red-300); }
.dark .crm-stage--gray { background: var(--crm-gray-800); color: var(--crm-gray-300); }
.dark .crm-stage--pink { background: color-mix(in oklab, var(--crm-pink-900) 40%, transparent); color: var(--crm-pink-300); }
.dark .crm-stage--teal { background: color-mix(in oklab, var(--crm-teal-900) 40%, transparent); color: var(--crm-teal-300); }
.crm-fill--blue { background: var(--blue-500); }
.crm-fill--purple { background: var(--crm-purple-500); }
.crm-fill--orange { background: var(--orange-500); }
.crm-fill--yellow { background: var(--crm-yellow-500); }
.crm-fill--green { background: var(--green-500); }
.crm-fill--red { background: var(--red-500); }
.crm-fill--gray { background: var(--crm-gray-400); }
.crm-fill--pink { background: var(--crm-pink-500); }
.crm-fill--teal { background: var(--crm-teal-500); }
.crm-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; }

/* ---- kanban (KanbanView) */
.crm-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
.crm-col { flex: none; width: 16rem; }
.crm-col__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.crm-col__count { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.crm-col__cards { min-height: 80px; border-radius: var(--radius-lg); }
.crm-col__cards > * + * { margin-top: 0.5rem; }
.crm-col__empty {
  padding: 0.75rem; border-radius: var(--radius-lg); border: 1px dashed var(--border);
  font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); text-align: center;
}

/* ---- the card (crm-kanban-card.tsx) */
.crm-card { display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 0.75rem; cursor: pointer; transition: box-shadow 150ms; }
.crm-card:hover { box-shadow: var(--shadow-sm); }
.crm-card > * + * { margin-top: 0.375rem; }
.crm-card.is-new { background: var(--crm-teal-50); border-color: var(--crm-teal-200); box-shadow: 0 0 0 1px var(--crm-teal-300); }
.crm-card.is-new:hover { box-shadow: 0 0 0 1px var(--crm-teal-300), var(--shadow-sm); }
.dark .crm-card.is-new { background: color-mix(in oklab, var(--crm-teal-900) 20%, transparent); border-color: var(--crm-teal-800); box-shadow: 0 0 0 1px var(--crm-teal-700); }
.dark .crm-card.is-new:hover { box-shadow: 0 0 0 1px var(--crm-teal-700), var(--shadow-sm); }
.crm-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.25rem; }
.crm-card__name {
  flex: 1 1 0%; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.crm-card__pill {
  flex-shrink: 0; background: var(--crm-teal-500); color: #fff; font-size: 0.625rem; font-weight: 500;
  padding: 0.125rem 0.375rem; border-radius: 9999px; white-space: nowrap;
}
.crm-card__value { flex-shrink: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); white-space: nowrap; }
.crm-card__row { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.crm-card__row.is-late { color: var(--amber-600); }
.crm-owner { display: flex; align-items: center; gap: 0.375rem; }
.crm-owner__av {
  display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  font-size: 0.625rem; font-weight: 500; color: #fff; flex-shrink: 0;
}
.crm-owner__name { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-hue-211 { background: hsl(211 70% 45%); }
.crm-hue-334 { background: hsl(334 70% 45%); }
.crm-hue-262 { background: hsl(262 70% 45%); }
.crm-hue-168 { background: hsl(168 70% 45%); }
.crm-hue-94 { background: hsl(94 70% 45%); }
.crm-hue-27 { background: hsl(27 70% 45%); }

/* ---- lanes layout (crm-stream-lanes.tsx, crm-composition-ribbon.tsx) */
.crm-lanes > :not(:last-child) { margin-bottom: 1rem; }
.crm-ribbon { margin-bottom: 1rem; padding: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.crm-ribbon__title { font-size: 0.625rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.5rem; }
.crm-ribbon__bar { display: flex; height: 1.75rem; border-radius: var(--radius-md); overflow: hidden; }
.crm-ribbon__seg { display: flex; align-items: center; justify-content: center; }
.crm-ribbon__seg > span { font-size: 0.6875rem; font-weight: 600; color: #fff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.15)); }
.crm-ribbon__labels { display: flex; margin-top: 0.25rem; }
.crm-ribbon__label { min-width: 0; }
.crm-ribbon__label > p { font-size: 0.625rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Each stage's share of every company in view, in twelfths (no inline widths under the CSP). */
.crm-w12-1 { width: 8.3333%; } .crm-w12-2 { width: 16.6667%; } .crm-w12-3 { width: 25%; } .crm-w12-4 { width: 33.3333%; }
.crm-w12-5 { width: 41.6667%; } .crm-w12-6 { width: 50%; } .crm-w12-7 { width: 58.3333%; } .crm-w12-8 { width: 66.6667%; }
.crm-w12-9 { width: 75%; } .crm-w12-10 { width: 83.3333%; } .crm-w12-11 { width: 91.6667%; } .crm-w12-12 { width: 100%; }
.crm-lane { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.crm-lane__head { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; border-bottom: 1px solid var(--border); }
.crm-lane__title { display: flex; align-items: center; gap: 0.5rem; }
.crm-lane__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.crm-lane__count { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.crm-lane__sort { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.crm-lane__sort select { font-size: 0.75rem; line-height: 1rem; background: transparent; border: 0; outline: none; cursor: pointer; color: var(--foreground); }
.crm-lane__empty { padding: 1.5rem 1rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); text-align: center; }
.crm-lane__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 0.75rem; }
@media (min-width: 768px) { .crm-lane__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Companies tab */
.crm-cfilters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.crm-csearch { flex: 1 1 0%; min-width: 160px; max-width: 20rem; }
.crm-seg { display: flex; border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; }
.crm-seg > button { padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.crm-seg > button:hover { color: var(--foreground); background: var(--muted); }
.crm-seg > button.is-active { background: var(--primary); color: var(--primary-foreground); }
.crm-pc { min-width: 0; }
.crm-chev { display: flex; justify-content: flex-end; color: var(--muted-foreground); }

/* ---- modals (CreateCompanyDialog, ManageStagesModal, ManageCustomFieldsModal) */
dialog.dlg.crm-dlg { width: calc(100% - 1rem); max-width: 32rem; max-height: 85vh; overflow-y: auto; padding: 1.5rem; box-shadow: var(--shadow-xl); }
dialog.dlg.crm-dlg--tall { max-height: 90vh; }
@media (min-width: 640px) { dialog.dlg.crm-dlg { width: 100%; } }
dialog.crm-dlg::backdrop { background: rgb(0 0 0 / 0.5); }
.crm-dlg__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.crm-dlg__head--5 { margin-bottom: 1.25rem; }
.crm-dlg__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.crm-dlg__x { color: var(--muted-foreground); transition: color 150ms; }
.crm-dlg__x:hover { color: var(--foreground); }
.crm-flabel { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.crm-stack4 > :not(:last-child) { margin-bottom: 1rem; }
.crm-stack3 > :not(:last-child) { margin-bottom: 0.75rem; }
.crm-stack2 > :not(:last-child) { margin-bottom: 0.5rem; }
.crm-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.crm-grid2--tight { gap: 0.5rem; }
.crm-dsec { border-top: 1px solid var(--border); padding-top: 1rem; }
.crm-dsec__title { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.75rem; }
.crm-socialrow { display: flex; gap: 0.5rem; }
.crm-input.crm-socialsel { width: 9rem; flex-shrink: 0; }
.crm-dfoot { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
.crm-btn {
  padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border);
  color: var(--foreground); transition: background-color 150ms, opacity 150ms;
}
.crm-btn:hover { background: var(--muted); }
.crm-btn--primary { border: 0; background: var(--primary); color: var(--primary-foreground); }
.crm-btn--primary:hover { background: var(--primary); opacity: 0.9; }
.crm-btn:disabled { opacity: 0.5; cursor: default; }
.crm-btn--sm { padding: 0.375rem 0.75rem; }
.crm-btn--block { width: 100%; }
.crm-stagelist { margin-bottom: 1rem; }
.crm-stagelist > :not(:last-child) { margin-bottom: 0.5rem; }
.crm-stagerow { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); cursor: grab; }
.crm-grip { color: var(--muted-foreground); }
.crm-colordot { width: 1rem; height: 1rem; border-radius: 9999px; cursor: pointer; flex-shrink: 0; }
.crm-stagerow__label { flex: 1 1 0%; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; background: transparent; border: 0; border-radius: var(--radius-sm); padding: 0 0.25rem; }
.crm-stagerow__label:focus { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.crm-stagerow__default { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
.crm-accent { accent-color: var(--primary); }
.crm-trash { color: var(--muted-foreground); flex-shrink: 0; transition: color 150ms; }
.crm-trash:hover { color: var(--red-500); }
.crm-addstage { border-top: 1px solid var(--border); padding-top: 1rem; }
.crm-addstage__title { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.5rem; }
.crm-addstage__row { display: flex; align-items: center; gap: 0.5rem; }
.crm-addstage__input { flex: 1 1 0%; min-width: 0; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--background); }
.crm-addstage__input:focus { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.crm-kind { padding: 0.125rem 0.375rem; font-size: 0.625rem; background: var(--muted); border-radius: var(--radius-sm); font-family: var(--font-mono); color: var(--muted-foreground); flex-shrink: 0; }
.crm-fieldname { flex: 1 1 0%; min-width: 0; }
.crm-fieldkey { font-size: 0.6875rem; color: var(--muted-foreground); }
.crm-addfield { border-top: 1px solid var(--border); padding-top: 1rem; }
.crm-addfield > :not(:last-child) { margin-bottom: 0.75rem; }
.crm-required { display: flex; align-items: flex-end; padding-bottom: 0.125rem; }
.crm-required__label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); cursor: pointer; }

/* ---- form controls the screen shares (inputCls and the small ones) */
.crm-input {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.crm-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.crm-input:disabled { opacity: 0.5; }
select.crm-input, select.crm-in { appearance: auto; }
.crm-input--tight { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.crm-textarea { resize: none; display: block; }
.crm-in {
  width: 100%; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--background); color: var(--foreground);
}
.crm-in:focus { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.crm-in--sm { font-size: 0.875rem; line-height: 1.25rem; }
.crm-in--xs { font-size: 0.75rem; line-height: 1rem; }
.crm-sl { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.crm-link-btn { font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
.crm-link-btn:hover { text-decoration: underline; }
.crm-link-btn--icon { display: flex; align-items: center; gap: 0.25rem; }
.crm-row2 { display: flex; gap: 0.5rem; }
.crm-small { padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.crm-small--primary { border: 0; background: var(--primary); color: var(--primary-foreground); }
.crm-small--r { border-radius: var(--radius-sm); }
.crm-small:disabled { opacity: 0.5; cursor: default; }
.crm-mini { padding: 0.25rem 0.75rem; font-size: 0.75rem; line-height: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.crm-mini--primary { border: 0; background: var(--primary); color: var(--primary-foreground); }

/* ---- the company slide-over (CompanyDetailPanel): "w-full max-w-lg bg-card border-l" */
.crm-sheet__panel { width: 100%; max-width: 32rem; background: var(--card); border-left: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.crm-ph { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.crm-ph__main { flex: 1 1 0%; min-width: 0; padding-right: 1rem; }
.crm-ph__name { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ph__name:hover { color: var(--primary); }
.crm-ph__site { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
.crm-ph__site:hover { text-decoration: underline; }
.crm-ph__tools { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.crm-ph__trash { color: var(--muted-foreground); transition: color 150ms; }
.crm-ph__trash:hover { color: var(--red-500); }
.crm-ph__close { color: var(--muted-foreground); }
.crm-ph__close:hover { color: var(--foreground); }
.crm-pb { padding: 1.5rem; flex: 1 1 0%; }
.crm-pb > :not(:last-child) { margin-bottom: 1.5rem; }
.crm-sec { font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--muted-foreground); }
.crm-sec--mb { margin-bottom: 0.5rem; }
.crm-sec-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.crm-sec-row--3 { margin-bottom: 0.75rem; }

/* StageDropdown */
.crm-stagedd { position: relative; display: inline-block; }
.crm-stagedd__btn { display: flex; align-items: center; gap: 0.25rem; }
.crm-stagedd__btn > .i { color: var(--muted-foreground); }
.crm-stagedd__btn:hover > .i { color: var(--foreground); }
.crm-stagedd__menu {
  position: absolute; left: 0; top: 1.75rem; z-index: 50; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0.25rem 0; min-width: 140px;
}
.crm-stagedd__item { width: 100%; text-align: left; padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1rem; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.crm-stagedd__item:hover { background: var(--muted); }
.crm-stagedd__item.is-current { background: color-mix(in oklab, var(--muted) 60%, transparent); }

/* ContactCard, and its edit form in place of it */
.crm-cc { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); }
.crm-cc__av {
  width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--muted); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground);
}
.crm-cc__av.is-primary { width: 2rem; height: 2rem; background: color-mix(in oklab, var(--primary) 10%, transparent); font-weight: 600; color: var(--primary); }
.crm-cc__body { flex: 1 1 0%; min-width: 0; }
.crm-cc__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.crm-cc__role { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.crm-cc__mail { font-size: 0.75rem; line-height: 1rem; color: var(--primary); display: flex; align-items: center; gap: 0.25rem; }
.crm-cc__mail:hover { text-decoration: underline; }
.crm-cc__phone { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); display: flex; align-items: center; gap: 0.25rem; }
.crm-cc__tools { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; opacity: 0.6; transition: opacity 150ms; }
.crm-cc:hover .crm-cc__tools { opacity: 1; }
.crm-cc__tools > button { color: var(--muted-foreground); transition: color 150ms; }
.crm-cc__star:hover { color: oklch(79.5% 0.184 86.047); }
.crm-cc__edit:hover { color: var(--primary); }
.crm-cc__del:hover { color: var(--red-500); }
.crm-ccedit { padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); }
.crm-ccedit > :not(:last-child) { margin-bottom: 0.5rem; }
.crm-ccedit__btns { display: flex; gap: 0.5rem; justify-content: flex-end; }
.crm-ccwrap:has(> .crm-ccedit:not([hidden])) > .crm-cc { display: none; }

/* + Add contact, and the New Contact form that replaces it */
.crm-addc__btn {
  width: 100%; padding: 0.5rem 0; border: 1px dashed var(--border); border-radius: var(--radius-md);
  font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.crm-addc__btn:hover { color: var(--foreground); border-color: var(--foreground); }
.crm-newc > :not(:last-child) { margin-bottom: 0.5rem; }
.crm-addc:has(> .crm-newc:not([hidden])) > .crm-addc__btn { display: none; }

/* Socials, website, notes, custom fields, tags */
.crm-socials { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crm-social {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; color: var(--foreground); transition: background-color 150ms;
}
.crm-social:hover { background: var(--muted); }
.crm-social__ic { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; font-size: 0.625rem; font-weight: 700; color: var(--muted-foreground); }
.crm-site { font-size: 0.875rem; line-height: 1.25rem; color: var(--primary); display: flex; align-items: center; gap: 0.25rem; }
.crm-site:hover { text-decoration: underline; }
.crm-notes { font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); white-space: pre-wrap; }
.crm-cf__label { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.crm-cf__val { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }
.crm-cf__val > .i { color: var(--muted-foreground); opacity: 0; }
.crm-cf__val:hover > .i { opacity: 1; }
.crm-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.crm-tag { padding: 0.125rem 0.5rem; border-radius: 9999px; background: var(--muted); font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

/* Timeline, with its Log contact form */
.crm-log { margin-bottom: 1rem; padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.crm-log > :not(:last-child) { margin-bottom: 0.5rem; }
.crm-tl { position: relative; }
.crm-tl__line { position: absolute; left: 1rem; top: 0; bottom: 0; width: 1px; background: var(--border); }
.crm-tl__ev { position: relative; padding-left: 2.5rem; padding-bottom: 1rem; }
.crm-tl__dot { position: absolute; left: 0.75rem; top: 0.375rem; width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--card); border: 2px solid var(--border); }
.crm-tl__meta { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 0.125rem; display: flex; align-items: center; gap: 0.375rem; }
.crm-tl__sum { font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.crm-tl__more { display: flex; align-items: center; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.crm-tl__more:hover { color: var(--foreground); }
.crm-tl__more > span { display: flex; align-items: center; gap: 0.125rem; }
.crm-tl__more .crm-open, .crm-tl__more.is-open .crm-closed { display: none; }
.crm-tl__more.is-open .crm-open { display: flex; }
.crm-tl__body { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.25rem; white-space: pre-wrap; }

/* Email: the Gmail history and the compose form */
.crm-mails { max-height: 28rem; overflow-y: auto; }
.crm-mails > :not(:last-child) { margin-bottom: 0.375rem; }
.crm-mail { border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); overflow: hidden; }
.crm-mail__btn { width: 100%; display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; text-align: left; transition: background-color 150ms; }
.crm-mail__btn:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.crm-mail__ic { margin-top: 0.125rem; flex-shrink: 0; color: var(--muted-foreground); display: flex; }
.crm-mail__ic.is-sent { color: var(--blue-500); }
.crm-mail__main { flex: 1 1 0%; min-width: 0; display: block; }
.crm-mail__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.crm-mail__subj { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mail__date { font-size: 0.6875rem; color: var(--muted-foreground); flex-shrink: 0; }
.crm-mail__who { display: block; font-size: 0.6875rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mail__snip { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.125rem; }
.crm-mail__chev { color: var(--muted-foreground); margin-top: 0.125rem; transition: transform 150ms; }
.crm-mail__btn.is-open .crm-mail__chev { transform: rotate(180deg); }
.crm-mail__btn.is-open .crm-mail__snip { display: none; }
.crm-mail__detail { border-top: 1px solid var(--border); padding: 0.5rem; }
.crm-mail__hdrs { font-size: 0.6875rem; color: var(--muted-foreground); padding: 0 0.25rem 0.5rem; }
.crm-mail__hdrs > * + * { margin-top: 0.125rem; }
.crm-mail__k { font-weight: 500; color: var(--foreground); }
/* EmailReader renders the message in a sandboxed white iframe, whatever the theme. */
.crm-mail__body {
  min-height: 280px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #222; padding: 8px; white-space: pre-wrap; overflow-wrap: break-word;
}
.crm-compose { margin-top: 0.75rem; padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.crm-compose > :not(:last-child) { margin-bottom: 0.5rem; }
.crm-compose__top { display: flex; align-items: center; justify-content: space-between; }
.crm-compose__title { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--foreground); }
.crm-compose__sig { font-size: 0.6875rem; color: var(--muted-foreground); margin-top: 0.25rem; font-style: italic; }

/* Files and the footer line */
.crm-files > :not(:last-child) { margin-bottom: 0.375rem; }
.crm-file { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); }
.crm-file__type { font-size: 0.625rem; padding: 0.125rem 0.375rem; background: var(--muted); border-radius: var(--radius-sm); font-family: var(--font-mono); color: var(--muted-foreground); flex-shrink: 0; text-transform: uppercase; }
.crm-file__name { flex: 1 1 0%; min-width: 0; font-size: 0.75rem; line-height: 1rem; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-file__name:hover { color: var(--primary); }
.crm-file__size { font-size: 0.6875rem; color: var(--muted-foreground); flex-shrink: 0; }
.crm-file__x { color: var(--muted-foreground); flex-shrink: 0; }
.crm-file__x:hover { color: var(--red-500); }
.crm-meta { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 1rem; }

/* ---- discounts.css ---- */
/* Discounts — routes/_auth/enterprise/discounts.index.tsx, discounts.$id.tsx, components/discount-studio/* */

/* The page shell: "flex flex-col h-full", a p-6 pb-0 header and a scrolling body. */
.dc-page { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
.dc-head { padding: 1.5rem 1.5rem 0; }
.dc-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dc-body { flex: 1 1 0%; min-height: 0; overflow: auto; padding: 0 1.5rem 1.5rem; }
.dc-body > * + * { margin-top: 1.25rem; }

.dc-fg30 { color: color-mix(in oklab, var(--foreground) 30%, transparent); }
.dc-fg40 { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dc-fg50 { color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.dc-fg60, .dc-muted60 { color: color-mix(in oklab, var(--foreground) 60%, transparent); }
.dc-mb2 { margin-bottom: 0.5rem; }

/* The small segmented control: brand switch and Kind */
.dc-seg { display: inline-flex; gap: 0.125rem; padding: 0.125rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.dc-seg__btn { padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 50%, transparent); transition: color 150ms, background-color 150ms; white-space: nowrap; }
.dc-seg__btn:hover { color: var(--foreground); }
.dc-seg__btn.is-active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.dc-seg__btn--fixed { cursor: not-allowed; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dc-seg__btn--fixed:hover { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dc-seg__btn--fixed.is-active, .dc-seg__btn--fixed.is-active:hover { color: var(--foreground); }

/* "New discount" dropdown (w-80) */
.menu__content.dc-newmenu { width: 20rem; max-width: calc(100vw - 2rem); }
.dc-menu-label { padding: 0.375rem 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.menu__item.dc-menu-tpl { flex-direction: column; align-items: flex-start; gap: 0.125rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.dc-menu-tpl__top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dc-menu-tpl__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.dc-menu-tpl__kind { flex-shrink: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dc-menu-tpl__blurb { font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); white-space: normal; }

/* The list table: "rounded-md border overflow-hidden overflow-x-auto", no card fill */
.dc-table-wrap { border-radius: var(--radius-md); border: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; }
.dc-table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.dc-table thead tr { border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); }
.dc-th { text-align: left; padding: 0.625rem 1rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 50%, transparent); white-space: nowrap; }
.dc-table tbody tr + tr { border-top: 1px solid var(--border); }
.dc-row { transition: background-color 150ms; }
.dc-row:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.dc-td { padding: 0.75rem 1rem; vertical-align: middle; }
.dc-sm-cell, .dc-md-cell { display: none; }
@media (min-width: 640px) { .dc-sm-cell { display: table-cell; } }
@media (min-width: 768px) { .dc-md-cell { display: table-cell; } }
.dc-title-link { font-weight: 500; color: var(--foreground); }
.dc-title-link:hover { color: var(--primary); text-decoration: underline; }
.dc-sync-failed { margin-left: 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--red-600); white-space: nowrap; }
.dark .dc-sync-failed { color: oklch(70.4% 0.191 22.216); }
.dc-auto { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 60%, transparent); white-space: nowrap; }
.dc-code { font-size: 0.75rem; line-height: 1rem; font-family: var(--font-mono); color: var(--foreground); }
.dc-nocode { color: color-mix(in oklab, var(--foreground) 30%, transparent); font-style: italic; }
.dc-tiers { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.dc-chip { display: inline-flex; align-items: center; gap: 0.375rem; }
.dc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.dc-act { display: inline-flex; padding: 0.375rem; border-radius: var(--radius-md); color: color-mix(in oklab, var(--foreground) 50%, transparent); transition: color 150ms, background-color 150ms; }
.dc-act:hover { color: var(--foreground); background: var(--muted); }
.dc-act--danger:hover { color: var(--red-600); background: var(--red-50); }
.dark .dc-act--danger:hover { background: color-mix(in oklab, var(--red-900) 20%, transparent); }

/* ConfirmDialog */
dialog.dlg.dc-confirm { max-width: 24rem; padding: 1.5rem; box-shadow: var(--shadow-xl); }
dialog.dlg.dc-confirm::backdrop { background: rgb(0 0 0 / 0.5); }
.dc-confirm__row { display: flex; gap: 1rem; }
.dc-confirm__icon { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--red-100); color: var(--red-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dark .dc-confirm__icon { background: color-mix(in oklab, var(--red-900) 30%, transparent); color: oklch(70.4% 0.191 22.216); }
.dc-confirm__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.dc-confirm__desc { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.dc-confirm__foot { margin-top: 1.25rem; display: flex; justify-content: flex-end; gap: 0.5rem; }
.dc-confirm__cancel { padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--foreground); transition: background-color 150ms; }
.dc-confirm__cancel:hover { background: var(--muted); }
.dc-confirm__ok { padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: var(--radius-md); background: var(--red-600); color: #fff; transition: background-color 150ms; }
.dc-confirm__ok:hover { background: var(--red-700); }

/* ------------------------------------------------------------------ the editor */

.dc-ed-head { padding: 1.5rem 1.5rem 0; max-width: 56rem; }
.dc-ed-head > * + * { margin-top: 1.25rem; }
.dc-ed-body { flex: 1 1 0%; min-height: 0; overflow: auto; padding: 0 1.5rem 1.5rem; max-width: 56rem; }
.dc-ed-crumbs { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.dc-back { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: color-mix(in oklab, var(--foreground) 60%, transparent); }
.dc-back:hover { color: var(--foreground); }
.dc-ed-title { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .dc-ed-title { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.dc-ed-title__main { flex: 1 1 0%; min-width: 0; }
.dc-ed-title__main > * + * { margin-top: 0.5rem; }
.input.dc-title-input { height: auto; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.dc-ed-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dc-ed-buttons { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }

.dc-banner { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid; font-size: 0.875rem; line-height: 1.25rem; }
.dc-banner__icon { flex-shrink: 0; margin-top: 0.125rem; }
.dc-banner--red { border-color: var(--red-200); background: var(--red-50); color: var(--red-700); }
.dark .dc-banner--red { border-color: color-mix(in oklab, var(--red-900) 50%, transparent); background: color-mix(in oklab, var(--red-900) 20%, transparent); color: var(--red-300); }

/* Build / Test panel tabs */
.dc-tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; }
.dc-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 60%, transparent); transition: color 150ms, border-color 150ms; white-space: nowrap; }
.dc-tab:hover { color: var(--foreground); }
.dc-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.dc-tab__issues { margin-left: 0.25rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border-radius: 9999px; background: var(--red-600); color: #fff; font-size: 0.75rem; line-height: 1rem; font-weight: 700; }

/* SectionShell */
.dc-section { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1.25rem; }
.dc-section > * + * { margin-top: 1rem; }
/* Dorris squeezes the title into a sliver when the four preset buttons sit beside it; here
   the buttons wrap under the title instead once they do not fit. */
.dc-section__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.dc-section__titles { flex: 1 1 18rem; min-width: 0; }
.dc-section__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.dc-section__desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.dc-section__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
@media (max-width: 767px) {
  .dc-section__actions { flex-wrap: wrap; flex-shrink: 1; }
}

.dc-label { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.dc-label--plain { margin-bottom: 0; }
.dc-label--plain.dc-mb2 { margin-bottom: 0.5rem; }
.dc-hint { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dc-hint--above { margin-top: 0; margin-bottom: 0.375rem; }
.dc-error { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--red-600); }
.dark .dc-error { color: oklch(70.4% 0.191 22.216); }
.dc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dc-grid2--tight { gap: 0.75rem; }
@media (min-width: 640px) { .dc-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Toggle (a checkbox drawn as a switch) — off is bg-muted, not the base grey */
.dc-toggle { display: flex; align-items: flex-start; gap: 0.75rem; }
.toggle.dc-switch { margin-top: 0.125rem; background: var(--muted); }
.toggle.dc-switch.is-on { background: var(--primary); }
.dc-toggle__text { font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.dc-toggle__help { display: block; margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; font-weight: 400; color: color-mix(in oklab, var(--foreground) 50%, transparent); }

/* RadioRow */
.dc-radios > * + * { margin-top: 0.5rem; }
.dc-radio { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); cursor: pointer; transition: background-color 150ms, border-color 150ms; }
.dc-radio:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.dc-radio:has(input:checked) { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.dc-radio input { margin-top: 0.125rem; accent-color: var(--primary); }
.dc-radio__help { display: block; margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }

/* Eligibility → Guest checkouts */
.dc-guests { margin-left: 3rem; padding-left: 1rem; border-left: 2px solid var(--border); }
.dc-guests > * + * { margin-top: 0.5rem; }
.dc-guests > .dc-hint--tight { margin-top: 0.25rem; }

/* ChipInput */
.dc-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.375rem 0.5rem; min-height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); }
.dc-chips:focus-within { box-shadow: 0 0 0 2px var(--ring); }
.dc-chip-item { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-md); background: var(--muted); color: var(--foreground); font-size: 0.75rem; line-height: 1rem; }
.dc-chip-item button { color: var(--muted-foreground); border-radius: 0.25rem; }
.dc-chip-item button:hover { color: var(--foreground); }
.dc-chips__input { flex: 1 1 0%; min-width: 80px; background: transparent; font-size: 0.875rem; line-height: 1.25rem; outline: none; }

/* CollapsibleSection */
.dc-fold { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.dc-fold__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; text-align: left; transition: background-color 150ms; }
.dc-fold__head:hover { background: color-mix(in oklab, var(--muted) 20%, transparent); }
.dc-fold__titles { min-width: 0; }
.dc-fold__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.dc-fold__chev { width: 1rem; height: 1rem; flex-shrink: 0; color: color-mix(in oklab, var(--foreground) 40%, transparent); transition: transform 150ms; }
.dc-fold__head.is-open .dc-fold__chev { transform: rotate(180deg); }
.dc-fold__body { padding: 0.25rem 1rem 1rem; border-top: 1px solid var(--border); }
.dc-fold__body > * + * { margin-top: 1rem; }

/* Item groups */
.dc-presets { border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); background: color-mix(in oklab, var(--primary) 5%, transparent); padding: 1rem; }
.dc-presets > * + * { margin-top: 0.75rem; }
.dc-presets__note { font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 60%, transparent); }
.dc-presets__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dc-group { border-radius: var(--radius-md); border: 1px solid var(--border); }
.dc-group__head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: color-mix(in oklab, var(--muted) 20%, transparent); border-bottom: 1px solid var(--border); }
.dc-group__name { font-size: 0.875rem; line-height: 1.25rem; font-family: var(--font-mono); font-weight: 500; color: var(--foreground); }
.btn.dc-group__del { width: 1.75rem; height: 1.75rem; padding: 0; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.btn.dc-group__del:hover { color: var(--red-600); }
.dc-group__body { padding: 0.75rem; }
.dc-group__body > * + * { margin-top: 0.75rem; }
.dc-matcher { position: relative; padding: 0.75rem; border-radius: 0.25rem; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.dc-matcher > * + * { margin-top: 0.75rem; }
.dc-or { font-size: 10px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dc-matcher__x { display: inline-block; }
.dc-matcher__x button { position: absolute; top: 0.5rem; right: 0.5rem; color: color-mix(in oklab, var(--foreground) 30%, transparent); transition: color 150ms; }
.dc-matcher__x button:hover { color: var(--red-600); }
.dc-matcher__x button:disabled { opacity: 0.3; cursor: not-allowed; }
.dc-matcher__x button:disabled:hover { color: color-mix(in oklab, var(--foreground) 30%, transparent); }
.dc-newgroup { padding-top: 0.5rem; border-top: 1px solid var(--border); }
.dc-newgroup > * + * { margin-top: 0.375rem; }
.dc-newgroup__row { display: flex; align-items: center; gap: 0.5rem; }
.input.dc-newgroup__input { max-width: 20rem; min-width: 0; }

/* Tiers */
.dc-tiers-list > * + * { margin-top: 0.75rem; }
.dc-tier { padding: 0.875rem; border-radius: var(--radius-md); border: 1px solid var(--border); }
.dc-tier > * + * { margin-top: 0.875rem; }
.dc-tier__top { display: flex; align-items: flex-start; gap: 0.75rem; }
.dc-tier__moves { display: flex; flex-direction: column; gap: 0.125rem; padding-top: 0.25rem; }
.dc-tier__moves button { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dc-tier__moves button:hover { color: var(--foreground); }
.dc-tier__moves button:disabled { opacity: 0.2; cursor: not-allowed; }
.dc-tier__label { flex: 1 1 0%; min-width: 0; }
.dc-tier__label > * + * { margin-top: 0.25rem; }
.dc-tiny-label { display: block; font-size: 10px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.btn.dc-tier__del { width: 2rem; height: 2rem; padding: 0; flex-shrink: 0; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.btn.dc-tier__del:hover { color: var(--red-600); }
.dc-tier__block { padding-left: 2rem; }
.dc-tier__block > * + * { margin-top: 0.5rem; }
.dc-rule { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; padding: 0.625rem; border-radius: 0.25rem; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.dc-select { max-width: 100%; padding: 0.375rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.dc-select:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent); }
.input.dc-w28 { width: 7rem; }
.input.dc-w24 { width: 6rem; }
.input.dc-w20 { width: 5rem; }
.input.dc-w16 { width: 4rem; flex-shrink: 0; }
.btn.dc-rule__del { width: 2rem; height: 2rem; padding: 0; margin-left: auto; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.btn.dc-rule__del:hover { color: var(--red-600); }
.dc-gift-msg { width: 100%; flex: 1 1 0%; min-width: min(16rem, 100%); }

/* Schedule & limits */
.dc-split { padding-top: 0.5rem; border-top: 1px solid var(--border); }
.dc-split:not(.dc-split--grid) > * + * { margin-top: 0.75rem; }
.dc-once { display: flex; align-items: flex-end; padding-bottom: 0.375rem; }

/* Custom messages inputs */
.dc-text { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.dc-text:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent); }

/* ------------------------------------------------------------------ Test panel */

.dc-cartline { display: flex; align-items: center; gap: 0.5rem; }
.dc-combo { position: relative; }
.dc-combo > .i { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: color-mix(in oklab, var(--foreground) 40%, transparent); pointer-events: none; }
.dc-combo input { width: 100%; min-width: 0; padding: 0.5rem 0.75rem 0.5rem 2rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); font-size: 0.875rem; line-height: 1.25rem; }
.dc-combo input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent); }
.dc-combo-picked { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); font-size: 0.875rem; line-height: 1.25rem; }
.dc-combo-picked__text { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }
.dc-combo-picked button { color: color-mix(in oklab, var(--foreground) 40%, transparent); transition: color 150ms; }
.dc-combo-picked button:hover { color: var(--foreground); }
.btn.dc-cartline__btn { width: 2rem; height: 2rem; padding: 0; flex-shrink: 0; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.btn.dc-cartline__btn:hover { color: var(--foreground); }
.btn.dc-cartline__btn--del:hover { color: var(--red-600); }
.dc-runbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dc-runbar__save { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0%; min-width: 0; }
.input.dc-maxw-xs { max-width: 20rem; min-width: 0; }

.dc-result { border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1rem; }
.dc-result--success { border-color: var(--emerald-200); background: var(--emerald-50); }
.dc-result--muted { background: color-mix(in oklab, var(--muted) 20%, transparent); }
.dark .dc-result--success { border-color: color-mix(in oklab, oklch(37.8% 0.077 168.94) 50%, transparent); background: color-mix(in oklab, oklch(37.8% 0.077 168.94) 20%, transparent); }
.dc-result__head { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.dc-result--success .dc-result__head { color: var(--emerald-800); }
.dark .dc-result--success .dc-result__head { color: var(--emerald-200); }
.dc-result__cart { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.dc-trace-list > * + * { margin-top: 0.375rem; }
.dc-trace { display: flex; align-items: flex-start; gap: 0.5rem; }
.dc-trace__dot { margin-top: 0.125rem; display: inline-flex; width: 0.875rem; height: 0.875rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; font-size: 9px; line-height: 1; font-weight: 700; }
.dc-trace__dot.is-pass { background: var(--emerald-100); color: var(--emerald-700); }
.dc-trace__dot.is-fail { background: var(--red-100); color: var(--red-700); }
.dark .dc-trace__dot.is-pass { background: color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent); color: oklch(84.5% 0.143 164.978); }
.dark .dc-trace__dot.is-fail { background: color-mix(in oklab, var(--red-900) 40%, transparent); color: var(--red-300); }
.dc-trace__text { color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.dc-groupchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dc-groupchip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-md); background: var(--muted); font-size: 0.75rem; line-height: 1rem; font-family: var(--font-mono); color: var(--foreground); }
.dc-tracetier { padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); }
.dc-tracetier.is-selected { border-color: oklch(84.5% 0.143 164.978); background: color-mix(in oklab, var(--emerald-50) 50%, transparent); }
.dark .dc-tracetier.is-selected { border-color: var(--emerald-800); background: color-mix(in oklab, oklch(37.8% 0.077 168.94) 10%, transparent); }
.dc-tracetier__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; flex-wrap: wrap; }
.dc-notes { padding-top: 0.5rem; border-top: 1px solid var(--border); }
.dc-notes > * + * { margin-top: 0.25rem; }
.dc-notes p { font-size: 0.75rem; line-height: 1rem; font-style: italic; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dc-scenario { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); }
.dc-scenario__name { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }

/* ---- edi-orders.css ---- */
/* EDI Orders — Dorris's enterprise EDI route (its own file name is banned; see the
   screen module's header comment) */

/* Tab row: "flex border-b border-border overflow-x-auto", each tab
   "flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px" */
.edi-tabs { display: flex; gap: 0.125rem; border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: 1.25rem; }
.edi-tab {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 60%, transparent); white-space: nowrap; transition: color 150ms;
}
.edi-tab:hover { color: var(--foreground); }
.edi-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }

/* Environment + Service cards: "rounded-lg border border-border bg-card p-4 space-y-3" */
.edi-grid2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .edi-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.edi-card { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1rem; }
.edi-card > * + * { margin-top: 0.75rem; }
.edi-card--row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.edi-card--row > * + * { margin-top: 0; }
.edi-card__head { display: flex; align-items: center; justify-content: space-between; }
.edi-card__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }

.edi-envpills { display: inline-flex; border-radius: var(--radius-md); border: 1px solid var(--border); padding: 2px; background: color-mix(in oklab, var(--muted) 30%, transparent); }
.edi-envpill { padding: 0.375rem 1rem; border-radius: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 60%, transparent); }
.edi-envpill:hover { color: var(--foreground); background: var(--muted); }
.edi-envpill.is-active { color: #fff; box-shadow: var(--shadow-sm); }
.edi-envpill.is-active.is-live { background: var(--red-600, #dc2626); }

.edi-onrow { display: flex; align-items: center; gap: 0.75rem; }
.edi-onrow__sub { display: block; margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.edi-help { font-size: 0.75rem; line-height: 1.4; color: var(--muted-foreground); }
.edi-link { color: var(--primary); }
.edi-link:hover { text-decoration: underline; }
.edi-conn { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.edi-dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; flex-shrink: 0; background: var(--zinc-300); }
.edi-dot.is-ok { background: var(--green-500); }
.edi-testbtn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); transition: background-color 150ms; }
.edi-testbtn:hover { background: var(--muted); }

/* Stat cards: "grid grid-cols-2 sm:grid-cols-4 gap-4" */
.edi-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .edi-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.edi-stat { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1rem; }
.edi-stat__ic { display: inline-flex; }
.edi-tone-blue { color: var(--blue-500); }
.edi-tone-yellow { color: var(--amber-500); }
.edi-tone-green { color: var(--emerald-500); }
.edi-tone-red { color: var(--red-500); }
.edi-stat__val { margin-top: 0.5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; }
.edi-stat__lbl { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

.edi-poll__ic { display: inline-flex; color: var(--purple-700, #7c3aed); }
.edi-val { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }

.edi-h3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.75rem; }
.edi-h3--sm { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.5rem; }

.edi-actbtn {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground);
  transition: background-color 150ms;
}
.edi-actbtn:hover { background: var(--muted); }
.edi-actbtn--primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.edi-actbtn--primary:hover { opacity: 0.9; background: var(--primary); }

/* Orders tab filters + table */
.edi-filters { margin-bottom: 0.25rem; }
.edi-search { width: 16rem; max-width: 100%; }
.edi-count { margin-left: auto; }
.table .edi-sm-only { }
@media (max-width: 639px) { .table .edi-sm-only { display: none; } }
.table .edi-xl-only { }
@media (max-width: 1279px) { .table .edi-xl-only { display: none; } }

/* The PO detail sheet (Dialog.Content "fixed right-0 top-0 h-full w-full sm:max-w-2xl") */
.edi-detail__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.edi-detail__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.edi-detail__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.edi-smbtn {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); white-space: nowrap;
}
.edi-smbtn:hover { background: var(--muted); }

.edi-errbox { border-radius: var(--radius-md); border: 1px solid var(--red-200); background: var(--red-50); padding: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--red-700); }
.edi-errbox__t { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.dark .edi-errbox { background: color-mix(in oklab, oklch(25.8% 0.092 26.042) 30%, transparent); border-color: oklch(44.4% 0.177 26.899); color: oklch(70.4% 0.191 22.216); }

.edi-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.edi-lbl { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.edi-shipto__sub { display: block; font-size: 0.75rem; color: var(--muted-foreground); }

.edi-bundle { border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 20%, transparent); padding: 0.75rem; }
.edi-bundle__t { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.375rem; }
.edi-code { font-family: var(--font-mono); font-size: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.125rem 0.5rem; }

.edi-litable { min-width: 30rem; }
.edi-litable th { font-size: 0.6875rem; }
.edi-litable td, .edi-litable th { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
.edi-litable td:first-child, .edi-litable th:first-child,
.edi-litable td:nth-child(2), .edi-litable th:nth-child(2),
.edi-litable td:nth-child(3), .edi-litable th:nth-child(3),
.edi-litable td:nth-child(4), .edi-litable th:nth-child(4) { white-space: nowrap; }
.edi-litable td:nth-child(5), .edi-litable th:nth-child(5) { min-width: 11rem; }

/* ---- events.css ---- */
/* Events — routes/_auth/events.tsx: EventsPage, EventFormModal, AddAttendeeModal,
   CheckInScanner, AttendeeDetailPanel. */

.ev-root { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.ev-head { padding: 1.25rem 1.5rem 0; flex-shrink: 0; }

/* Buttons — hand-rolled in events.tsx: "px-3 py-1.5 text-sm rounded-md border border-border/40" */
.ev-abtn {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--border) 40%, transparent); color: var(--foreground);
  white-space: nowrap; transition: background-color 150ms;
}
.ev-abtn:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.ev-abtn--primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.ev-abtn--primary:hover { background: var(--primary); opacity: 0.9; }

/* Event switcher row: "px-6 pt-4 pb-2 flex items-center gap-3 flex-wrap border-b border-border/20" */
.ev-switchbar { padding: 1rem 1.5rem 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; border-bottom: 1px solid color-mix(in oklab, var(--border) 20%, transparent); flex-shrink: 0; }
.ev-switch { flex-shrink: 0; }
.ev-switch__btn {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; padding: 0.375rem 0.75rem; min-width: 220px;
  border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--border) 40%, transparent); background: var(--background); color: var(--foreground);
  transition: border-color 150ms;
}
.ev-switch__btn:hover { border-color: var(--border); }
.ev-switch__btn .i { margin-left: auto; color: color-mix(in oklab, var(--foreground) 40%, transparent); flex-shrink: 0; }
.ev-switch__menu { left: 0; right: auto; width: max(220px, 100%); max-width: min(20rem, 85vw); padding: 0.25rem; }
.ev-switch__item { justify-content: space-between; }
.ev-switch__item[aria-current="true"] { color: var(--primary); }

/* Filter bar: "px-6 py-3 flex items-center gap-2 flex-wrap border-b border-border/20" */
.ev-filters { padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid color-mix(in oklab, var(--border) 20%, transparent); flex-shrink: 0; }
.ev-search { flex: 1 1 200px; max-width: 20rem; }
.ev-filters__right { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }

.ev-tablewrap { flex: 1 1 0%; overflow: auto; padding: 1rem 1.5rem; }

/* ------------------------------------------------------------------ dialogs shared chrome */

.ev-x { color: color-mix(in oklab, var(--foreground) 40%, transparent); display: inline-flex; }
.ev-x:hover { color: var(--foreground); }
.ev-flabel { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 60%, transparent); margin-bottom: 0.25rem; }
.ev-flabel--flush { margin-bottom: 0; }
.ev-input {
  width: 100%; border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
  background: var(--background); color: var(--foreground); padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
}
.ev-input:focus { outline: none; box-shadow: 0 0 0 1px var(--primary); }
.ev-input--sm { padding: 0.375rem 0.5rem; }
.ev-textarea { resize: none; display: block; }
.ev-textarea--xs { font-size: 0.75rem; line-height: 1rem; }
.ev-check-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; cursor: pointer; }
.ev-btn {
  padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--border) 40%, transparent); color: color-mix(in oklab, var(--foreground) 60%, transparent); transition: color 150ms, border-color 150ms;
}
.ev-btn:hover { color: var(--foreground); border-color: var(--border); }
.ev-btn--primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.ev-btn--primary:hover { background: var(--primary); opacity: 0.9; }
.ev-btn--block { width: 100%; }
.ev-link { font-size: 0.75rem; line-height: 1rem; color: var(--primary); display: inline-flex; align-items: center; gap: 0.25rem; }
.ev-link:hover { text-decoration: underline; }

/* Centered dialogs: AddAttendeeModal (max-w-md), CheckInScanner (max-w-sm) */
dialog.dlg.ev-dlg { max-width: 28rem; }
dialog.dlg.ev-dlg.ev-dlg--narrow { max-width: 24rem; }
.ev-dlg__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.ev-dlg__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.ev-dlg__body { display: flex; flex-direction: column; gap: 0.75rem; }
.ev-dlg__foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
.ev-dlg__foot--stack { justify-content: stretch; }

/* New/Edit Event drawer: "fixed inset-y-0 right-0 w-full max-w-xl bg-background shadow-xl flex flex-col" */
dialog.dlg.ev-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: 100%; max-width: 36rem; height: 100%; max-height: 100%;
  border-radius: 0; border: 0; border-left: 1px solid var(--border); padding: 0; box-shadow: var(--shadow-xl);
  background: var(--background); color: var(--foreground);
}
dialog.dlg.ev-drawer[open] { display: flex; flex-direction: column; }
dialog.dlg.ev-drawer::backdrop { background: rgb(0 0 0 / 0.5); }
.ev-drawer .ev-dlg__head { padding: 1rem 1.5rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 20%, transparent); margin-bottom: 0; flex-shrink: 0; }
.ev-drawer__body { flex: 1 1 0%; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ev-drawer__foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid color-mix(in oklab, var(--border) 20%, transparent); flex-shrink: 0; }
.ev-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ev-col2 { grid-column: span 2 / span 2; }

.ev-tt__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ev-tt__rows { display: flex; flex-direction: column; gap: 0.5rem; }
.ev-tt__row { display: flex; gap: 0.5rem; align-items: center; }
.ev-tt__name { flex: 1 1 0%; min-width: 0; }
.ev-tt__sku, .ev-tt__price { width: 5rem; flex-shrink: 0; }
.ev-tt__x { color: color-mix(in oklab, var(--foreground) 30%, transparent); flex-shrink: 0; }
.ev-tt__x:hover { color: var(--red-500); }

/* ------------------------------------------------------------------ the attendee sheet (AttendeeDetailPanel) */

.ev-sheet { max-width: 24rem; }
.ev-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 20%, transparent); flex-shrink: 0; }
.ev-sheet__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.ev-sheet__body { flex: 1 1 0%; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.ev-sheet__id { gap: 0.25rem; }
.ev-sheet__name { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--foreground); }
.ev-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.ev-row { display: flex; justify-content: space-between; gap: 0.5rem; }
.ev-row__k { color: color-mix(in oklab, var(--foreground) 50%, transparent); flex-shrink: 0; }
.ev-row__v { text-align: right; font-weight: 500; color: var(--foreground); }
.ev-code { font-size: 0.75rem; line-height: 1rem; background: var(--muted); padding: 0 0.25rem; border-radius: 0.25rem; }
.ev-sheet__actions { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; }
.ev-sbtn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--border) 40%, transparent); color: var(--foreground); transition: background-color 150ms;
}
.ev-sbtn:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.ev-sbtn--primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; padding: 0.375rem 0.75rem; }
.ev-sbtn--primary:hover { background: var(--primary); opacity: 0.9; }
.ev-sbtn--danger { border-color: var(--red-300); color: var(--red-600); }
.ev-sbtn--danger:hover { background: var(--red-50); }
.dark .ev-sbtn--danger { border-color: var(--red-800); color: var(--red-400); }
.dark .ev-sbtn--danger:hover { background: color-mix(in oklab, oklch(25.8% 0.092 26.042) 30%, transparent); }
.ev-transfer { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--border) 40%, transparent); background: color-mix(in oklab, var(--muted) 30%, transparent); }

/* ---- fulfillment.css ---- */
/* Fulfillment — routes/_auth/enterprise/fulfillment.tsx (layout) and fulfillment/{index,
   today,scan,rules}.tsx, components/fulfillment/* */

/* The layout's rounded section tabs: "rounded-full border px-3.5 py-1.5 text-xs font-medium" */
.ff-sections { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; overflow-x: auto; margin: -0.25rem 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.ff-sectiontab {
  display: inline-block; white-space: nowrap; border-radius: 9999px; border: 1px solid var(--border);
  padding: 0.375rem 0.875rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  background: var(--card); color: var(--muted-foreground); transition: background-color 150ms, color 150ms;
}
.ff-sectiontab:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.ff-sectiontab.is-active { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }

/* Queue: search box, view pills, brand switch */
.ff-bar { margin-bottom: 1rem; }
.ff-search { width: 100%; max-width: 20rem; }
.ff-pill {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: 9999px;
  font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; background: var(--muted); color: var(--muted-foreground);
  transition: color 150ms, background-color 150ms;
}
.ff-pill:hover { color: var(--foreground); background: color-mix(in oklab, var(--muted) 80%, transparent); }
.ff-pill.is-active, .ff-pill.is-active:hover { background: var(--primary); color: var(--primary-foreground); }
.ff-pill__n { font-size: 10px; opacity: 0.6; }
.ff-pill.is-active .ff-pill__n { opacity: 0.85; }
.ff-brandrow { margin-left: auto; }
@media (max-width: 639px) { .ff-brandrow { margin-left: 0; width: 100%; } }

/* Queue cells */
.ff-dest { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ff-items { max-width: 16rem; }
.ff-sku { font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); }
.ff-weight { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ff-margin { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ff-margin--neg { color: var(--red-700); }
.dark .ff-margin--neg { color: oklch(70.4% 0.191 22.216); }
.ff-age--warn { color: var(--amber-600); font-weight: 500; }
.ff-chip { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; }
.ff-chip--yellow { background: var(--status-yellow-bg); color: var(--status-yellow-fg); }
.ff-chip--blue { background: var(--blue-100); color: var(--blue-700); }
.dark .ff-chip--blue { background: color-mix(in oklab, var(--blue-900) 40%, transparent); color: var(--blue-300); }

/* Today */
.ff-dateinput { width: auto; min-width: 11rem; }
.ff-tile__val { margin-top: 0.25rem; font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }

/* Scan station */
.ff-scan { max-width: 64rem; }
.ff-headline { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.ff-headline--good { border-color: color-mix(in oklab, var(--green-500) 50%, transparent); background: color-mix(in oklab, var(--green-500) 10%, transparent); }
.ff-headline__t { font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; color: var(--foreground); }
.ff-headline--good .ff-headline__t { color: var(--emerald-700); }
.dark .ff-headline--good .ff-headline__t { color: var(--green-300); }
.ff-headline__d { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; opacity: 0.85; }

.ff-scangrid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .ff-scangrid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }

.ff-panel { padding: 1rem; }
.ff-panel--row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ff-panel__t { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.5rem; }

.ff-itemlist { display: flex; flex-direction: column; gap: 0.5rem; }
.ff-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--muted) 20%, transparent); }
.ff-item.is-done { background: color-mix(in oklab, var(--green-500) 10%, transparent); }
.ff-item__check { display: inline-flex; width: 1.25rem; height: 1.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--emerald-600); color: #fff; }
.ff-item__sku { color: var(--muted-foreground); }

.ff-weightval { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--foreground); }
.ff-cheapest { margin-left: 0.375rem; border-radius: 9999px; background: var(--emerald-100, var(--green-100)); color: var(--emerald-700); padding: 0.0625rem 0.5rem; font-size: 0.6875rem; font-weight: 500; }
.dark .ff-cheapest { background: color-mix(in oklab, var(--green-900) 40%, transparent); color: var(--green-300); }

.ff-buybtn { background: var(--emerald-600); }
.ff-buybtn:hover { opacity: 0.92; }
.ff-kbd { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; opacity: 0.75; border: 1px solid currentColor; border-radius: 0.25rem; padding: 0 0.3125rem; }

.ff-manual { padding: 0; }
.ff-manual__input { width: 100%; padding: 0.625rem 0.75rem; font-size: 0.8125rem; background: transparent; }

.ff-shortcuts { align-self: start; }
.ff-hotkeys { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.75rem; }
.ff-hotkeys__row { display: contents; }
.ff-hint { margin-top: 0.75rem; font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); }

/* Rules */
.ff-rules__intro { max-width: 34rem; }
.ff-rulestable { min-width: 34rem; }
.ff-rulestable td, .ff-rulestable th { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.ff-rulestable th { font-size: 0.6875rem; }
.ff-ordercol { width: 4.5rem; }
.ff-rulestable td:nth-child(2), .ff-rulestable th:nth-child(2) { min-width: 14rem; }
.ff-rulestable td:nth-child(3), .ff-rulestable th:nth-child(3),
.ff-rulestable td:nth-child(4), .ff-rulestable th:nth-child(4) { white-space: nowrap; }

/* ---- gift-labels.css ---- */
/* Gift Labels — routes/_auth/enterprise/gift-label.tsx, gift-label.$orderId.tsx */

.gl-w-full { width: 100%; }
.gl-max16 { max-width: 16rem; }
.gl-panel { padding: 1.5rem; }

/* The tab row ("flex border-b border-border", each tab "border-b-2 -mb-px") */
.gl-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: 1.25rem; }
.gl-tab {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--muted-foreground); white-space: nowrap; transition: color 150ms, border-color 150ms;
}
.gl-tab:hover { color: var(--foreground); }
.gl-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }

/* Font picker cards */
.gl-fontgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.gl-fontcard { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); }
.gl-fontcard.is-active { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.gl-fontcard.is-active .i { margin-left: auto; color: var(--primary); flex-shrink: 0; }
.gl-fontcard__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.gl-fontcard__cat { font-size: 11px; line-height: 1rem; color: var(--muted-foreground); text-transform: capitalize; }

.gl-range { display: block; width: 100%; max-width: 20rem; accent-color: var(--primary); }

/* Recent Prints: stat tiles */
.gl-stat { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 0.75rem; text-align: center; }
.gl-stat__n { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--foreground); }
.gl-stat__n.is-bad { color: var(--red-500); }
.gl-stat__label { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.125rem; }

/* Recent Prints: table */
.gl-table-wrap .table th:last-child, .gl-table-wrap .table td:last-child { white-space: nowrap; }
.gl-msg { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }
.gl-actions { display: flex; align-items: center; gap: 0.5rem; }
.gl-smbtn {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem;
  border: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground);
  transition: color 150ms, background-color 150ms;
}
.gl-smbtn:hover { color: var(--foreground); background: var(--muted); }

/* One print opened: key facts grid */
.gl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .gl-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gl-fact__label { font-size: 11px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.125rem; }

.gl-msgbox { font-size: 0.875rem; line-height: 1.5rem; color: var(--foreground); white-space: pre-wrap; }

/* The label preview: a mocked-up printed label, not a real PDF */
.gl-label__body { display: flex; align-items: center; justify-content: center; padding: 1.5rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--muted) 40%, transparent); }
.gl-label__card {
  width: 100%; max-width: 22rem; aspect-ratio: 3 / 2; background: #fff; border: 1px solid var(--border);
  border-radius: 0.375rem; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.gl-label__script { font-family: "Brush Script MT", "Segoe Script", "Apple Chancery", cursive; font-size: 1.625rem; line-height: 1.4; color: #1c1917; text-align: center; white-space: pre-wrap; }

/* ---- gov-discount.css ---- */
/* Gov & Pro Discount — routes/_auth/enterprise/gov-discount.tsx */

/* "flex flex-col h-full": a p-6 pb-0 header, then "flex-1 overflow-auto px-6 pb-6 space-y-5" */
.gd-page { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
.gd-head { padding: 1.5rem 1.5rem 0; }
.gd-body { flex: 1 1 0%; min-height: 0; overflow: auto; padding: 0 1.5rem 1.5rem; }
.gd-body > * + * { margin-top: 1.25rem; }
.gd-stack4 > * + * { margin-top: 1rem; }
.gd-stack2 > * + * { margin-top: 0.5rem; }
.gd-mb2 { margin-bottom: 0.5rem; }
.gd-fg30 { color: color-mix(in oklab, var(--foreground) 30%, transparent); }
.gd-fg50 { color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.gd-fg60 { color: color-mix(in oklab, var(--foreground) 60%, transparent); }

/* Tabs: "px-4 py-2.5 text-sm font-medium border-b-2 -mb-px", the lit one primary */
.gd-tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; }
.gd-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap; color: color-mix(in oklab, var(--foreground) 60%, transparent); transition: color 150ms, border-color 150ms; }
.gd-tab:hover { color: var(--foreground); }
.gd-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.gd-tab__count { margin-left: 0.25rem; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: 0.75rem; line-height: 1rem; font-weight: 700; }

/* Program segmented control */
.gd-seg { display: inline-flex; flex-wrap: wrap; gap: 0.125rem; padding: 0.125rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); max-width: 100%; }
.gd-seg__btn { padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 50%, transparent); transition: color 150ms, background-color 150ms; }
.gd-seg__btn:hover { color: var(--foreground); }
.gd-seg__btn.is-active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.gd-seg__btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.gd-seg__btn.is-disabled:not(.is-active):hover { color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.gd-note { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 40%, transparent); }

/* Filters */
.gd-filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.gd-search { position: relative; }
.gd-search > .i { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: color-mix(in oklab, var(--foreground) 40%, transparent); pointer-events: none; }
.gd-search input { width: 14rem; max-width: 100%; padding: 0.375rem 0.75rem 0.375rem 2rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.gd-search input:focus, .gd-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent); }
.gd-select { padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.gd-refresh { display: inline-flex; padding: 0.375rem; border-radius: var(--radius-md); border: 1px solid var(--border); color: color-mix(in oklab, var(--foreground) 60%, transparent); transition: background-color 150ms; }
.gd-refresh:hover { background: var(--muted); }

/* Tables: "rounded-md border border-border overflow-hidden", no card fill */
.gd-table-wrap { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; }
.gd-table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.gd-table thead tr { border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); }
.gd-th { text-align: left; padding: 0.625rem 1rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.gd-table tbody tr + tr { border-top: 1px solid var(--border); }
.gd-row { transition: background-color 150ms; }
.gd-row:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.gd-row.is-link { cursor: pointer; }
.gd-td { padding: 0.75rem 1rem; vertical-align: middle; }
.gd-name { display: block; font-weight: 500; color: var(--foreground); }
.gd-sm, .gd-md, .gd-lg { display: none; }
@media (min-width: 640px) { .gd-sm { display: table-cell; } }
@media (min-width: 768px) { .gd-md { display: table-cell; } }
@media (min-width: 1024px) { .gd-lg { display: table-cell; } }
.gd-converted { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--emerald-700); }
.dark .gd-converted { color: oklch(76.5% 0.177 163.223); }
.gd-converted__n { font-weight: 400; color: color-mix(in oklab, var(--foreground) 50%, transparent); }

/* Stats cards */
.gd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .gd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gd-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gd-stat { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1rem; }
.gd-stat > * + * { margin-top: 0.5rem; }
.gd-stat__icon { display: inline-flex; }
.gd-ic-blue { color: var(--blue-500); }
.gd-ic-yellow { color: oklch(79.5% 0.184 86.047); }
.gd-ic-emerald { color: var(--emerald-500); }
.gd-ic-red { color: var(--red-500); }
.gd-ic-violet { color: oklch(60.6% 0.25 292.717); }
.gd-stat__value { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; }
.gd-stat__label { font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }

/* ------------------------------------------------------------------ Settings tab */

.gd-settings { max-width: 42rem; }
.gd-settings > * + * { margin-top: 1.25rem; }
.gd-pickers { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gd-pick { padding: 0.5rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 60%, transparent); transition: color 150ms, background-color 150ms; }
.gd-pick:hover { color: var(--foreground); background: var(--muted); }
.gd-pick.is-active, .gd-pick.is-active:hover { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.gd-dot { font-size: 0.875rem; line-height: 1.25rem; color: color-mix(in oklab, var(--foreground) 30%, transparent); }
.gd-form > * + * { margin-top: 1rem; }
.gd-enabled { display: flex; align-items: center; gap: 0.75rem; }
.toggle.gd-switch { background: var(--muted); }
.toggle.gd-switch.is-on { background: var(--primary); }
.gd-enabled__help { margin-left: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.gd-label { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.gd-label--tight { margin-bottom: 0.25rem; }
.gd-input { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.gd-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent); }
.gd-textarea { display: block; font-family: var(--font-mono); resize: vertical; }
.gd-textarea--fixed { font-family: var(--font-sans); resize: none; }
.gd-help { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.gd-help--above { margin-top: 0; margin-bottom: 0.375rem; }
.gd-ph { font-family: var(--font-mono); background: var(--muted); padding: 0 0.25rem; border-radius: 0.25rem; }
.gd-slug { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.gd-slug__url { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; font-family: var(--font-mono); color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.gd-slug__copy { flex-shrink: 0; font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
.gd-slug__copy:hover { text-decoration: underline; }
.gd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gd-grid2--tight { gap: 0.75rem; }
.gd-span2 { grid-column: span 2 / span 2; }
.gd-selectwrap { position: relative; }
.gd-selectwrap > .i { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); color: color-mix(in oklab, var(--foreground) 40%, transparent); pointer-events: none; }
select.gd-input--select { appearance: none; padding-right: 2rem; }
.gd-box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; }
.gd-box > * + * { margin-top: 0.75rem; }
.gd-box__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.gd-box__desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.gd-info { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--blue-200); background: var(--blue-50); }
.gd-info > .i { margin-top: 0.125rem; flex-shrink: 0; color: var(--blue-500); }
.gd-info p { font-size: 0.75rem; line-height: 1rem; color: var(--blue-800); }
.dark .gd-info { border-color: var(--blue-800); background: color-mix(in oklab, var(--blue-900) 20%, transparent); }
.dark .gd-info > .i { color: oklch(70.7% 0.165 254.624); }
.dark .gd-info p { color: var(--blue-200); }
.gd-save { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.5rem; }
.gd-savebtn { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: opacity 150ms; }
.gd-savebtn:hover { opacity: 0.9; }
.gd-savebtn:disabled { opacity: 0.4; cursor: default; }

/* ------------------------------------------------------------------ the drawer (Radix Dialog as a right-hand sheet) */

.gd-drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.gd-drawer__shade { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.5); }
.gd-drawer__panel { position: relative; z-index: 50; width: 100%; height: 100%; background: var(--card); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 640px) { .gd-drawer__panel { max-width: 32rem; } }
.gd-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.gd-drawer__who { min-width: 0; }
.gd-drawer__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.gd-drawer__email { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-drawer__close { padding: 0.25rem; border-radius: var(--radius-md); color: color-mix(in oklab, var(--foreground) 40%, transparent); transition: color 150ms, background-color 150ms; }
.gd-drawer__close:hover { color: var(--foreground); background: var(--muted); }
/* Extra room at the foot so the frame's "What's this?" pill never sits on Reject. */
.gd-drawer__body { flex: 1 1 0%; overflow-y: auto; padding: 1.25rem 1.25rem 4rem; }
.gd-drawer__body > * + * { margin-top: 1.25rem; }
.gd-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.gd-meta__label { margin-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.gd-yesno { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.gd-yesno.is-yes { color: var(--emerald-600); }
.gd-ai { border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 20%, transparent); padding: 0.75rem; }
.gd-ai > * + * { margin-top: 0.5rem; }
.gd-ai__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gd-ai__title { font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 60%, transparent); }
.gd-ai__status { font-size: 0.75rem; line-height: 1rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.gd-ai__why { font-size: 0.875rem; line-height: 1.25rem; font-style: italic; color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.gd-note-box { border-radius: var(--radius-md); border: 1px solid; padding: 0.75rem; }
.gd-note-box__title { margin-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.gd-note-box__text { font-size: 0.875rem; line-height: 1.25rem; }
.gd-note-box--ok { border-color: var(--emerald-200); background: var(--emerald-50); }
.gd-note-box--ok .gd-note-box__title { color: var(--emerald-700); }
.gd-note-box--ok .gd-note-box__text { color: var(--emerald-800); }
.gd-note-box--bad { border-color: var(--red-200); background: var(--red-50); }
.gd-note-box--bad .gd-note-box__title { color: var(--red-700); }
.gd-note-box--bad .gd-note-box__text { color: oklch(44.4% 0.177 26.899); }
.dark .gd-note-box--ok { border-color: color-mix(in oklab, oklch(37.8% 0.077 168.94) 50%, transparent); background: color-mix(in oklab, oklch(37.8% 0.077 168.94) 20%, transparent); }
.dark .gd-note-box--ok .gd-note-box__title { color: oklch(84.5% 0.143 164.978); }
.dark .gd-note-box--ok .gd-note-box__text { color: var(--emerald-200); }
.dark .gd-note-box--bad { border-color: color-mix(in oklab, var(--red-900) 50%, transparent); background: color-mix(in oklab, var(--red-900) 20%, transparent); }
.dark .gd-note-box--bad .gd-note-box__title { color: var(--red-300); }
.dark .gd-note-box--bad .gd-note-box__text { color: var(--red-200); }
.gd-doclink { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
.gd-doclink:hover { text-decoration: underline; }

/* The drawn document: an <svg> in the <img>'s place ("max-w-full rounded-md border", 400px tall at most) */
.gd-doc { display: block; width: 100%; max-height: 400px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.gd-doc__bg { fill: #d6d3d1; }
.gd-doc__card { fill: #fafaf9; stroke: #a8a29e; stroke-width: 1; }
.gd-doc__paper { fill: #fafaf9; }
.gd-doc__band { fill: #64748b; }
.gd-doc__seal { fill: #e2e8f0; }
.gd-doc__photo { fill: #e7e5e4; }
.gd-doc__person { fill: #a8a29e; }
.gd-doc__line { fill: #d6d3d1; }
.gd-doc__line--dark { fill: #78716c; }
.gd-doc__line--light { fill: #cbd5e1; }
.gd-doc__sign { fill: none; stroke: #475569; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dark .gd-doc__bg { fill: #57534e; }

/* Approve / Reject, then the note or reason that confirms it */
.gd-decide__buttons { display: flex; gap: 0.5rem; padding-top: 0.5rem; }
.gd-decide:has(.gd-decide__form:not([hidden])) .gd-decide__buttons { display: none; }
.gd-approve, .gd-reject { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.625rem 1rem; border-radius: var(--radius-md); color: #fff; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: background-color 150ms; }
.gd-approve { background: var(--emerald-600); }
.gd-approve:hover { background: var(--emerald-700); }
.gd-reject { background: var(--red-600); }
.gd-reject:hover { background: var(--red-700); }
.gd-decide__form { padding-top: 0.5rem; }
.gd-decide__form > * + * { margin-top: 0.5rem; }
.gd-input--ok:focus { border-color: var(--emerald-500); box-shadow: 0 0 0 2px color-mix(in oklab, var(--emerald-500) 40%, transparent); }
.gd-input--bad:focus { border-color: var(--red-500); box-shadow: 0 0 0 2px color-mix(in oklab, var(--red-500) 40%, transparent); }
.gd-decide__row { display: flex; gap: 0.5rem; }
.gd-confirm { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: var(--radius-md); color: #fff; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: background-color 150ms; }
.gd-confirm--ok { background: var(--emerald-600); }
.gd-confirm--ok:hover { background: var(--emerald-700); }
.gd-confirm--bad { background: var(--red-600); }
.gd-confirm--bad:hover { background: var(--red-700); }
.gd-confirm:disabled { opacity: 0.5; cursor: default; }
.gd-cancel { padding: 0 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: color-mix(in oklab, var(--foreground) 60%, transparent); }
.gd-cancel:hover { color: var(--foreground); }

/* Phones: Dorris's four tabs are wider than the screen; without their icons they fit. */
@media (max-width: 639px) {
  .gd-tab { padding-left: 0.5rem; padding-right: 0.5rem; }
  .gd-tab > .i { display: none; }
}

/* ---- help-center.css ---- */
/* Help Center — routes/_auth/help*.tsx and components/help/*.
   The pages are "flex flex-col h-full" with no padding of their own: the header sits flush. */

.hc-page { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
.hc-scroll { flex: 1 1 0%; min-height: 0; overflow: auto; padding: 1.5rem; }
.hc-narrow { max-width: 42rem; }
.hc-col-2xl { max-width: 42rem; }
.hc-col-3xl { max-width: 48rem; }
.hc-stack-3 { display: flex; flex-direction: column; gap: 0.75rem; }
.hc-stack-6 { display: flex; flex-direction: column; gap: 1.5rem; }
.hc-stack-8 { display: flex; flex-direction: column; gap: 2rem; }
.hc-new {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; white-space: nowrap;
  background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: background-color 150ms;
}
.hc-new:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.hc-h2 { margin-bottom: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.hc-h2--flush { margin-bottom: 0; }
.hc-slug { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; font-family: var(--font-mono); color: var(--muted-foreground); }
.hc-slug--flush { margin-top: 0; }
.hc-label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); }
.hc-hint { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

/* StatsCard */
.hc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 768px) { .hc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hc-stats--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hc-stats.hc-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hc-stat { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1rem; }
.hc-stat__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--muted-foreground); }
.hc-stat__label { font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; }
.hc-stat__value { font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--foreground); }

/* Status filter tabs + search (Articles), and the Mode switch on Popular */
.hc-filters { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.hc-tabs { display: flex; gap: 0.25rem; }
.hc-tab {
  padding: 0.375rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--muted-foreground); transition: color 150ms, background-color 150ms; white-space: nowrap;
}
.hc-tab:hover { color: var(--foreground); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.hc-tab.is-active { background: var(--muted); color: var(--foreground); }
.hc-tab--cap { text-transform: capitalize; }
.hc-search { position: relative; margin-left: auto; width: 16rem; }
.hc-search > .i { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.hc-search input {
  width: 100%; padding: 0.375rem 0.75rem 0.375rem 2rem; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground);
}
.hc-search input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

/* Form controls: "px-2.5 py-1.5 text-sm border border-border rounded-md bg-background" */
.hc-input {
  display: block; width: 100%; padding: 0.375rem 0.625rem; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground);
}
.hc-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.hc-input--area { resize: none; }
.hc-input--code { font-family: var(--font-mono); resize: vertical; }
.hc-input--w24 { width: 6rem; }
.hc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.hc-grid-sm-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .hc-grid-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hc-swatch { width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 0.25rem; cursor: pointer; background: transparent; flex-shrink: 0; }
.hc-small-primary {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md); transition: background-color 150ms;
}
.hc-small-primary:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.hc-btn {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--muted-foreground); transition: color 150ms; white-space: nowrap;
}
.hc-btn:hover { color: var(--foreground); }
.hc-ibtn { display: inline-flex; padding: 0.375rem; border-radius: 0.25rem; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.hc-ibtn:hover { color: var(--foreground); background: var(--muted); }
.hc-ibtn--danger:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.hc-ibtn:disabled { opacity: 0.3; cursor: default; }
.hc-ibtn:disabled:hover { color: var(--muted-foreground); background: transparent; }

/* CategoryEditor and the Popular lists: "divide-y divide-border rounded-lg border border-border overflow-hidden" */
.hc-dashed {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.hc-dashed:hover { color: var(--foreground); border-color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.hc-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.hc-list > li + li { border-top: 1px solid var(--border); }
.hc-list--scroll { max-height: 16rem; overflow-y: auto; }
.hc-list__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--card); transition: background-color 150ms; }
.hc-list > .hc-list__row:not(.hc-list__row--tight):hover, .hc-list__row--hover:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.hc-list__row--tight { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.hc-list__title { flex: 1 1 0%; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.hc-row-title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.hc-rank { width: 1.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hc-add {
  display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--muted-foreground); transition: color 150ms;
}
.hc-add:hover { color: var(--foreground); }
.hc-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; flex-shrink: 0; }
.hc-dot--emerald { background: #10b981; }
.hc-dot--pine { background: #2f6b4f; }
.hc-dot--indigo { background: #6366f1; }
.hc-dot--sky { background: #0ea5e9; }
.hc-dot--amber { background: #f59e0b; }
.hc-dot--purple { background: #a855f7; }

/* Media grid: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" */
.hc-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .hc-media { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .hc-media { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hc-media { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hc-tile {
  position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); border: 1px solid var(--border);
  overflow: hidden; background: color-mix(in oklab, var(--muted) 30%, transparent); transition: box-shadow 150ms;
}
.hc-tile:hover { box-shadow: 0 0 0 2px var(--ring); }
.hc-tile > svg { width: 100%; height: 100%; }
.hc-tile__shade { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 0); transition: background-color 150ms; }
.hc-tile:hover .hc-tile__shade { background: rgb(0 0 0 / 0.4); }
.hc-tile__label { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: #fff; opacity: 0; transition: opacity 150ms; }
.hc-tile:hover .hc-tile__label { opacity: 1; }

/* Redirects */
.hc-redirect-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; padding: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--muted) 20%, transparent);
}
.hc-redirect-form__path { flex: 1 1 0%; min-width: 180px; }
.hc-to { display: flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.table .hc-w12 { width: 3rem; }

/* ---------------------------------------------------------------- one article open (ArticleEditor) */
.hc-ed { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
.hc-ed-top { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; min-width: 0; }
.hc-back { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); transition: color 150ms; white-space: nowrap; }
.hc-back:hover { color: var(--foreground); }
.hc-ed-name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); min-width: 0; }
.hc-ed-wrap { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.hc-ed-bar {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: color-mix(in oklab, var(--muted) 20%, transparent);
}
.hc-ed-tabs { display: flex; gap: 0.25rem; }
.hc-ed-tab { padding: 0.25rem 0.75rem; border-radius: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted-foreground); transition: color 150ms; }
.hc-ed-tab:hover { color: var(--foreground); }
.hc-ed-tab.is-active { background: var(--background); border: 1px solid var(--border); color: var(--foreground); }
.hc-ed-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.hc-save {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md); transition: background-color 150ms;
}
.hc-save:disabled { opacity: 0.5; cursor: default; }
.hc-ed-status { padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--background); flex-shrink: 0; }
.hc-state { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.hc-state--published { background: var(--green-100); color: oklch(44.8% 0.119 151.328); }
.dark .hc-state--published { background: color-mix(in oklab, var(--green-900) 30%, transparent); color: oklch(79.2% 0.209 151.711); }
.hc-ed-form { flex: 1 1 0%; min-height: 0; overflow: auto; padding: 1.5rem; }
.hc-ed-content { max-width: 48rem; display: flex; flex-direction: column; gap: 1rem; }
.hc-ed-seo { max-width: 42rem; display: flex; flex-direction: column; gap: 1rem; }
.hc-title-input {
  display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground);
}
.hc-title-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

/* CoverImageUpload */
.hc-cover { display: flex; flex-direction: column; gap: 0.5rem; }
.hc-cover__frame { position: relative; display: inline-block; align-self: flex-start; }
.hc-cover__img { display: block; height: 10rem; width: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); border: 1px solid var(--border); }
.hc-cover__x {
  position: absolute; top: -0.5rem; right: -0.5rem; display: inline-flex; padding: 0.25rem; border-radius: 9999px;
  background: var(--background); border: 1px solid var(--border); color: var(--muted-foreground); transition: color 150ms;
}
.hc-cover__x:hover { color: var(--destructive); }
.hc-cover .hc-btn { display: inline-flex; }

/* HelpRichEditor */
.hc-rte { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--background); display: flex; flex-direction: column; }
.hc-rte-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent);
}
.hc-tb { display: inline-flex; padding: 0.375rem; border-radius: 0.25rem; color: var(--muted-foreground); transition: background-color 150ms; }
.hc-tb:hover { background: var(--muted); }
.hc-tb--active { background: var(--muted); color: var(--foreground); }
.hc-tb:disabled { opacity: 0.4; cursor: not-allowed; }
.hc-tb:disabled:hover { background: transparent; }
.hc-tb-code { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1; font-weight: 700; }
.hc-tb-div { width: 1px; height: 1.25rem; background: var(--border); margin: 0 0.25rem; flex-shrink: 0; }
.hc-rte-body { min-height: 400px; padding: 1rem; outline: none; }

/* "prose prose-sm max-w-none", with the editor's own table rules (borders, bg-muted headers). */
.hc-prose { font-size: 0.875rem; line-height: 1.7142857; color: #374151; }
.hc-prose > :first-child { margin-top: 0; }
.hc-prose > :last-child { margin-bottom: 0; }
.hc-prose p { margin: 1.1428571em 0; }
.hc-prose h2 { margin: 1.6em 0 0.8em; font-size: 1.4285714em; line-height: 1.4; font-weight: 700; color: #111827; }
.hc-prose h3 { margin: 1.5555556em 0 0.4444444em; font-size: 1.2857143em; line-height: 1.5555556; font-weight: 600; color: #111827; }
.hc-prose ul, .hc-prose ol { margin: 1.1428571em 0; padding-left: 1.5714286em; }
.hc-prose ul { list-style: disc; }
.hc-prose ol { list-style: decimal; }
.hc-prose li { margin: 0.2857143em 0; padding-left: 0.4285714em; }
.hc-prose li p { margin: 0.5714286em 0; }
.hc-prose ul > li::marker { color: #d1d5db; }
.hc-prose ol > li::marker { color: #6b7280; }
.hc-prose blockquote { margin: 1.3333333em 0; padding-left: 1.1111111em; border-left: 0.25rem solid #e5e7eb; font-style: italic; font-weight: 500; color: #111827; }
.hc-prose blockquote p { margin: 0; }
.hc-prose table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 0.8571429em; line-height: 1.5; }
.hc-prose th, .hc-prose td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
.hc-prose th { background: var(--muted); font-weight: 600; color: #111827; }
.hc-prose th p, .hc-prose td p { margin: 0; }
.dark .hc-prose { color: #d1d5db; }
.dark .hc-prose h2, .dark .hc-prose h3, .dark .hc-prose blockquote, .dark .hc-prose th { color: #ffffff; }
.dark .hc-prose blockquote { border-left-color: #374151; }
.dark .hc-prose ul > li::marker { color: #4b5563; }

/* At phone width, rows that would push the page sideways in Dorris wrap instead. */
@media (max-width: 639px) {
  .hc-filters { flex-wrap: wrap; }
  .hc-search { margin-left: 0; width: 100%; }
  .hc-ed-bar { flex-wrap: wrap; }
}

/* ---- invoices.css ---- */
/* Invoices — routes/_auth/invoices.tsx, components/invoices/{BulkFilters,RuleEditor,ScheduleEditor}.tsx */

/* The tab row: "border-b border-border mb-6" + "flex gap-0 -mb-px" */
.inv-tabs { border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.inv-tabs__nav { display: flex; gap: 0; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; }
.inv-tab {
  padding: 0.625rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.inv-tab:hover { color: var(--foreground); border-bottom-color: var(--border); }
.inv-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }

/* Inputs and buttons the page draws by hand */
.inv-in {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.inv-in:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
select.inv-in { appearance: auto; }
.inv-in--auto { width: auto; }
.inv-in--grow { width: auto; flex: 1 1 0%; min-width: 160px; }
.inv-in--grow1 { flex: 1 1 0%; min-width: 0; }
.inv-ta { resize: none; display: block; }
.inv-ta--mono { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; }
.inv-btn-primary {
  padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; background: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radius-md); transition: opacity 150ms; white-space: nowrap;
}
.inv-btn-primary:hover { opacity: 0.9; }
.inv-btn-primary:disabled { opacity: 0.5; cursor: default; }
.inv-btn-primary--icon { display: inline-flex; align-items: center; gap: 0.5rem; }
.inv-btn-outline {
  padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); color: var(--foreground); transition: background-color 150ms;
}
.inv-btn-outline:hover { background: var(--muted); }
.inv-btn-outline--nowrap { padding: 0.5rem 0.75rem; white-space: nowrap; }
.inv-btn-sync {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); transition: background-color 150ms; white-space: nowrap;
}
.inv-btn-sync:hover { background: var(--muted); }
.inv-btn-new {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md);
}
.inv-btn-new:hover { opacity: 0.9; }
.inv-btn-xs {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1rem;
  border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground);
}
.inv-btn-xs:hover { opacity: 0.9; }
.inv-act {
  display: inline-flex; padding: 0.375rem; border-radius: var(--radius-sm); color: var(--muted-foreground);
  transition: color 150ms, background-color 150ms;
}
.inv-act:hover { color: var(--foreground); background: var(--muted); }
.inv-act--danger:hover { color: var(--red-500); background: transparent; }
.inv-act:disabled { opacity: 0.4; cursor: default; }
.inv-edit {
  padding: 0.25rem 0.625rem; font-size: 0.75rem; line-height: 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--foreground);
}
.inv-edit:hover { background: var(--muted); }
.inv-edit--mb { margin-bottom: 1rem; padding: 0.375rem 0.75rem; }

/* Orders tab */
.inv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.inv-tablebox { border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.inv-table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.inv-thead { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.inv-th {
  text-align: left; padding: 0.625rem 1rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600;
  color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.inv-th--r { text-align: right; }
.inv-tr { background: var(--card); transition: background-color 150ms; }
.inv-tr + .inv-tr { border-top: 1px solid var(--border); }
.inv-tr:hover { background: color-mix(in oklab, var(--muted) 20%, var(--card)); }
.inv-td { padding: 0.75rem 1rem; color: var(--foreground); }
.inv-td--strong { font-weight: 500; }
.inv-td--muted { color: var(--muted-foreground); }
.inv-td--money { text-align: right; font-weight: 500; white-space: nowrap; }
.inv-sm, .inv-md, .inv-lg, .inv-xl { display: none; }
@media (min-width: 640px) { .inv-sm { display: table-cell; } }
@media (min-width: 768px) { .inv-md { display: table-cell; } }
@media (min-width: 1024px) { .inv-lg { display: table-cell; } }
@media (min-width: 1280px) { .inv-xl { display: table-cell; } }
.inv-cap { text-transform: capitalize; }

/* statusBadge(): "px-2 py-0.5 rounded-full text-[11px] font-medium" */
.inv-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; }
.inv-badge--muted { background: var(--muted); color: var(--muted-foreground); }
.inv-badge--green { background: var(--green-100); color: var(--green-700); }
.inv-badge--yellow { background: var(--yellow-100); color: var(--yellow-700); }
.inv-badge--red { background: var(--red-100); color: var(--red-700); }
.inv-badge--blue { background: var(--blue-100); color: var(--blue-700); }
.dark .inv-badge--green { background: color-mix(in oklab, var(--green-900) 30%, transparent); color: oklch(79.2% 0.209 151.711); }
.dark .inv-badge--yellow { background: color-mix(in oklab, var(--yellow-900) 30%, transparent); color: oklch(85.2% 0.199 91.936); }
.dark .inv-badge--red { background: color-mix(in oklab, var(--red-900) 30%, transparent); color: oklch(70.4% 0.191 22.216); }
.dark .inv-badge--blue { background: color-mix(in oklab, var(--blue-900) 30%, transparent); color: oklch(70.7% 0.165 254.624); }
.inv-pill { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; background: var(--muted); color: var(--muted-foreground); }
.inv-issued { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--green-600); white-space: nowrap; }
.dark .inv-issued { color: oklch(79.2% 0.209 151.711); }
.inv-none { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.inv-acts { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }

.inv-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.inv-pager__text { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.inv-pager__btns { display: flex; align-items: center; gap: 0.25rem; }
.inv-pager__btn { display: inline-flex; padding: 0.375rem; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--muted-foreground); }
.inv-pager__btn:hover { color: var(--foreground); }
.inv-pager__btn:disabled { opacity: 0.4; cursor: default; }

/* The preview dialog: "max-w-4xl bg-card rounded-lg border shadow-xl overflow-hidden", body h-[600px] */
dialog.inv-pv, .inv-pv--static {
  width: 100%; max-width: 56rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-xl); overflow: hidden;
}
dialog.inv-pv { margin: auto; }
dialog.inv-pv::backdrop { background: rgb(0 0 0 / 0.5); }
.inv-pv__head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); }
.inv-pv__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.inv-pv__x { padding: 0.25rem; border-radius: var(--radius-sm); color: var(--muted-foreground); line-height: 1; font-size: 1.125rem; }
.inv-pv__x:hover { color: var(--foreground); }
.inv-pv__body { height: 600px; max-height: calc(100dvh - 7rem); overflow: auto; background: #fff; }
.inv-pv-static { position: fixed; inset: 0; z-index: 50; }
.inv-pv-static__shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); }
.inv-pv--static { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* The two small dialogs: Download Invoice (max-w-sm) and Send Invoice (max-w-md) */
dialog.inv-dlg {
  margin: auto; width: 100%; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-xl);
}
dialog.inv-dlg::backdrop { background: rgb(0 0 0 / 0.5); }
.inv-dlg--sm { max-width: 24rem; }
.inv-dlg--md { max-width: 28rem; }
.inv-dlg__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); margin-bottom: 1rem; }
.inv-dlg__foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
.inv-dlg__foot--tight { padding-top: 0.25rem; }
.inv-label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.inv-label__opt { color: var(--muted-foreground); font-weight: 400; }
.inv-label--flush { margin-bottom: 0; }
.inv-label-xs { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.inv-label-plain { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.5rem; }
.inv-hint { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.inv-hint--flush { margin-top: 0; }
.inv-hint--below { margin-top: 0; margin-bottom: 0.75rem; }
.inv-stack-2 > * + * { margin-top: 0.5rem; }
.inv-stack-3 > * + * { margin-top: 0.75rem; }
.inv-stack-4 > * + * { margin-top: 1rem; }
.inv-stack-8 > * + * { margin-top: 2rem; }
.inv-mt-2 { margin-top: 0.5rem; }
.inv-mt-3 { margin-top: 0.75rem; }
.inv-mt-4 { margin-top: 1rem; }
.inv-mb-3 { margin-bottom: 0.75rem; }
.inv-fg { color: var(--foreground); }

/* Bulk Downloads */
.inv-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; }
.inv-card--flush { padding: 0; overflow: hidden; }
.inv-card__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); margin-bottom: 1rem; }
.inv-card__title--tight { margin-bottom: 0.25rem; }
.inv-h3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.inv-seg { display: inline-flex; border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; }
.inv-seg > button { padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; background: var(--background); color: var(--muted-foreground); transition: background-color 150ms; }
.inv-seg > button:hover { background: var(--muted); }
.inv-seg > button.is-on { background: var(--primary); color: var(--primary-foreground); }
.inv-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.inv-chip {
  padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.inv-chip:hover { color: var(--foreground); background: var(--muted); }
.inv-chip.is-on { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.inv-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.inv-grid-2--tight { gap: 0.5rem; }
.inv-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.inv-span-2 { grid-column: span 2 / span 2; }
.inv-using { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
.inv-clear { text-decoration: underline; color: var(--muted-foreground); }
.inv-clear:hover { color: var(--foreground); }
.inv-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.inv-check--top { align-items: flex-start; margin-top: 0.5rem; }
.inv-check--top .inv-accent { margin-top: 0.125rem; }
.inv-check__text { font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.inv-check__sub { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); font-weight: 400; }
.inv-accent { accent-color: var(--primary); }
.inv-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.inv-textlink { font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
.inv-textlink:hover { text-decoration: underline; }
.inv-addrow { display: flex; gap: 0.5rem; }
.inv-radios { display: flex; align-items: center; gap: 1rem; }
.inv-radio { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.inv-gen { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.inv-gen__count { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.inv-collapse { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; text-align: left; transition: background-color 150ms; }
.inv-collapse:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.inv-collapse__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.inv-collapse__sub { margin-left: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.inv-collapse__chev { color: var(--muted-foreground); transition: transform 150ms; }
.inv-collapse.is-open .inv-collapse__chev { transform: rotate(180deg); }
.inv-collapse__body { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--border); }
.inv-collapse__body > * + * { margin-top: 1rem; }
.inv-job { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.inv-job__main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.inv-job__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.inv-job__meta { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.inv-job__acts { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.inv-bar { margin-top: 0.25rem; width: 8rem; height: 0.375rem; background: var(--muted); border-radius: 9999px; overflow: hidden; }
.inv-bar__fill { height: 100%; background: var(--primary); border-radius: 9999px; }
.inv-w-64 { width: 64%; }
.inv-ic-green { color: var(--green-500); }
.inv-ic-blue { color: var(--blue-500); }
.inv-ic-red { color: var(--red-500); }
.inv-ic-yellow { color: oklch(79.5% 0.184 86.047); }

/* Schedules and Rules */
.inv-toolbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 1rem; }
.inv-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.inv-item__main { flex: 1 1 0%; min-width: 0; }
.inv-item__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.125rem; }
.inv-item__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-item__sub { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.inv-item__acts { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.inv-off { flex-shrink: 0; display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); font-size: 0.625rem; line-height: 1rem; background: var(--muted); color: var(--muted-foreground); }
.inv-prio { flex-shrink: 0; font-size: 0.625rem; line-height: 1rem; color: var(--muted-foreground); }
/* The switch: "h-5 w-9 rounded-full border-2 border-transparent bg-primary | bg-input" (the base .toggle flips it) */
.toggle.inv-switch { background: var(--input); }
.toggle.inv-switch.is-on { background: var(--primary); }

/* Settings */
.inv-settings { max-width: 42rem; }
.inv-settings > * + * { margin-top: 1.5rem; }
.inv-save-row { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.inv-logo-row { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem; }
.inv-logo {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 3.5rem; padding: 0 0.75rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff; color: #1a1a1a;
}
.inv-logo__word { font-size: 0.6875rem; line-height: 0.85rem; font-weight: 800; letter-spacing: 0.08em; }
.inv-remove {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; font-size: 0.75rem; line-height: 1rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--red-600); transition: background-color 150ms;
}
.inv-remove:hover { background: var(--red-50); }
.dark .inv-remove:hover { background: color-mix(in oklab, oklch(25.8% 0.092 26.042) 20%, transparent); }
.inv-drop {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem; text-align: center;
  border: 2px dashed var(--border); border-radius: var(--radius-lg); font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground);
  transition: border-color 150ms;
}
.inv-drop .i { color: var(--muted-foreground); }
.inv-drop:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.inv-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.inv-template { border-radius: var(--radius-lg); border: 2px solid var(--border); padding: 0.75rem; text-align: left; transition: border-color 150ms; }
.inv-template:hover { border-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent); }
.inv-template.is-on { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.inv-template__label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.inv-template__desc { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.inv-colour { display: flex; align-items: center; gap: 0.5rem; }
.inv-colour__swatch { height: 2.25rem; width: 3.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; }
.inv-ok { font-size: 0.75rem; line-height: 1rem; color: var(--green-600); margin-bottom: 0.75rem; }
.dark .inv-ok { color: oklch(79.2% 0.209 151.711); }
.inv-code { background: var(--muted); padding: 0 0.25rem; border-radius: var(--radius-sm); font-family: var(--font-mono); }

/* The invoice itself — the PDF's HTML, white paper in both themes (it is an iframe in Dorris). */
.inv-doc { min-width: 640px; padding: 3rem 3.5rem; background: #fff; color: #1a1a1a; font-size: 0.8125rem; line-height: 1.5; }
.inv-doc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.75rem; border-bottom: 2px solid #1a1a1a; }
.inv-doc__brand { display: flex; align-items: flex-start; gap: 0.875rem; }
.inv-doc__mark { width: 2.75rem; height: 2.75rem; border-radius: 0.625rem; background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inv-doc__company { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.inv-doc__small { font-size: 0.75rem; line-height: 1.55; color: #57534e; }
.inv-doc__heading { text-align: right; }
.inv-doc__word { font-size: 2.125rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; }
.inv-doc__num { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: #2563eb; }
.inv-doc__parties { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 1.5rem; padding: 1.75rem 0; }
.inv-doc__eyebrow { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #2563eb; margin-bottom: 0.375rem; }
.inv-doc__strong { font-weight: 700; }
.inv-doc__facts > div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.1875rem 0; border-bottom: 1px solid #ecebe9; font-size: 0.75rem; }
.inv-doc__facts dt { color: #78716c; }
.inv-doc__facts dd { font-weight: 600; text-align: right; }
.inv-doc__lines { width: 100%; border-collapse: collapse; font-size: 0.78125rem; }
.inv-doc__lines th { text-align: left; padding: 0.5625rem 0.75rem; background: #1a1a1a; color: #fff; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.inv-doc__lines td { padding: 0.6875rem 0.75rem; border-bottom: 1px solid #e7e5e4; }
.inv-doc__lines .inv-doc__r { text-align: right; }
.inv-doc__sku { font-family: var(--font-mono); font-size: 0.71875rem; color: #57534e; }
.inv-doc__sum { display: flex; justify-content: flex-end; padding-top: 1rem; }
.inv-doc__sum dl { width: 16.25rem; }
.inv-doc__sum dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3125rem 0; font-size: 0.78125rem; }
.inv-doc__sum dd { font-variant-numeric: tabular-nums; }
.inv-doc__sum .inv-doc__total { margin-top: 0.375rem; padding-top: 0.5625rem; border-top: 2px solid #1a1a1a; font-size: 0.9375rem; font-weight: 800; }
.inv-doc__sum .inv-doc__paid { color: #2563eb; font-weight: 600; }
.inv-doc__foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #e7e5e4; font-size: 0.6875rem; line-height: 1.6; color: #78716c; }
.inv-doc__thanks { margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 700; color: #1a1a1a; }

/* ---- ios-conversations.css ---- */
/* The iPhone app's conversation screens (Thread, Chat, Sms, Social, Customer) — the pages the
   Inbox's cards open. Classes are `ios-cv-…`; built on top of the shared `ios-*` primitives in
   ios.css (ios-card, ios-chip, ios-av, ios-btn…) and the `--ios-*` design tokens. */

/* ------------------------------------------------------------------ the screen shell
   `.ios__content` (ios.css) is the one scrolling region every ios-shell page gets. Dorris's own
   screens are a VStack of a fixed strip, a ScrollView and a fixed composer, not one region
   scrolling under fixed siblings — so `position: sticky` is the wrong tool here: a sticky footer
   does not leave its own room in the flow, so on a thread taller than the viewport it paints over
   the last message instead of the blank space after it. Instead these pages ask for the flush
   content area (`contentClass: 'ios__content--flush'`, no padding) and this becomes ITS OWN
   fixed-height flex column, with `.ios-cv-timeline` as the one
   part that scrolls (`overflow-y: auto` + `min-height: 0`, the override a flex child needs to be
   allowed to shrink below its content's height at all) — the strip and the bottom bar are
   ordinary flex siblings above and below it, never overlapped. */

.ios-cv-screen { display: flex; flex-direction: column; height: 100%; }
.ios-cv-strip {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--ios-bg); border-bottom: 0.5px solid var(--ios-border-strong);
}
.ios-cv-timeline { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 14px; }
.ios-cv-bottombar { flex: none; background: var(--ios-bg); padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.ios-cv-bottombar > * + * { border-top: 0.5px solid var(--ios-border-strong); }

/* ------------------------------------------------------------------ header card (ThreadView /
   ChatView / SmsThreadView threadHeader: avatar + name row opening the customer sheet, then the
   status/assignee/tag chips) */

.ios-cv-head { display: flex; flex-direction: column; gap: 12px; }
.ios-cv-headrow { display: flex; align-items: center; gap: 10px; color: inherit; }
.ios-cv-headrow__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ios-cv-headrow__name { font: 600 17px/22px var(--ios-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-cv-headrow__sub { font-size: 13px; line-height: 18px; color: var(--ios-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-cv-headrow__chev { width: 11px; height: 11px; stroke-width: 3; color: var(--ios-ink3); flex: none; }
.ios-cv-headrow__extra { font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-tagbtn { color: var(--ios-accent-ink); background: var(--ios-accent-wash); }

/* ------------------------------------------------------------------ the "…" toolbar menu
   (ui/dropdown-menu.tsx's .menu/.menu__content, shared with the web tools via 00-base.css) */

.ios-cv-menubtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--ios-accent); }
.ios-cv-menubtn .i { width: 21px; height: 21px; }
.ios-cv-menu { max-height: 70vh; overflow-y: auto; }
[data-menu] { position: relative; }

/* ------------------------------------------------------------------ AI summary card
   (ThreadSummaryCard, ChatView.summaryCard) */

.ios-cv-summary { padding: 14px; border-radius: 14px; background: var(--ios-violet-wash); border: 1px solid color-mix(in oklab, var(--ios-violet) 25%, transparent); }
.ios-cv-summary__head { display: flex; align-items: center; gap: 6px; color: var(--ios-violet); font: 600 13px/18px var(--ios-font); }
.ios-cv-summary__head .i { width: 11px; height: 11px; stroke-width: 2.6; }
.ios-cv-summary__age { margin-left: auto; font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-summary__body { margin: 6px 0 0; font-size: 15px; line-height: 20px; color: var(--ios-ink); white-space: pre-wrap; }

/* ------------------------------------------------------------------ one email message
   (ThreadMessageView: emerald wash leaning right for the agent, paper leaning left for the
   customer, a Sent/Received pill, attachments, Forward) */

.ios-cv-msg { padding: 12px 14px; border-radius: 18px; background: var(--ios-card); border: 1px solid var(--ios-border); margin-right: 28px; }
.ios-cv-msg--agent { background: var(--ios-accent-wash); border-color: color-mix(in oklab, var(--ios-accent) 25%, transparent); margin-right: 0; margin-left: 28px; }
.ios-cv-msg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ios-cv-msg__head .ios-av { width: 24px; height: 24px; font-size: 10px; }
.ios-cv-msg__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ios-cv-msg__name { font: 600 12px/15px var(--ios-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-cv-msg--agent .ios-cv-msg__name { color: var(--ios-accent-ink); }
.ios-cv-msg__time { font-size: 11px; line-height: 13px; color: var(--ios-ink3); }
.ios-cv-msg__pill { flex: none; padding: 3px 7px; border-radius: 999px; background: var(--ios-neutral-wash); font: 700 10px/12px var(--ios-font); letter-spacing: 0.4px; color: var(--ios-ink2); }
.ios-cv-msg--agent .ios-cv-msg__pill { background: color-mix(in oklab, var(--ios-accent) 18%, transparent); color: var(--ios-accent-ink); }
.ios-cv-msg__body { font-size: 15px; line-height: 20px; color: var(--ios-ink); white-space: pre-wrap; }
.ios-cv-msg__foot { margin-top: 8px; }
.ios-cv-forward { display: inline-flex; align-items: center; gap: 4px; color: var(--ios-ink3); font: 500 11px/13px var(--ios-rounded); }
.ios-cv-forward .i { width: 9px; height: 9px; stroke-width: 3; }

/* attachments (ThreadAttachmentsView: a labelled strip of file rows) */
.ios-cv-atts { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ios-cv-atts__label { font: 600 11px/13px var(--ios-font); letter-spacing: 0.4px; color: var(--ios-ink3); }
.ios-cv-att { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 10px; background: var(--ios-neutral-wash); border: 1px solid var(--ios-border); }
.ios-cv-att .i { width: 15px; height: 15px; stroke-width: 2.2; color: var(--ios-ink2); flex: none; }
.ios-cv-att__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ios-cv-att__name { font: 600 12px/15px var(--ios-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-cv-att__size { font-size: 11px; line-height: 13px; color: var(--ios-ink3); }
.ios-cv-att__eye { width: 12px; height: 12px; stroke-width: 2.6; color: var(--ios-ink3); }

/* internal note (ThreadNoteView: amber paper, dashed border) */
.ios-cv-note { padding: 12px 14px; border-radius: 14px; background: var(--ios-amber-wash); border: 1px dashed color-mix(in oklab, var(--ios-amber) 45%, transparent); }
.ios-cv-note__head { display: flex; align-items: center; gap: 6px; color: var(--ios-amber); }
.ios-cv-note__head .i { width: 10px; height: 10px; stroke-width: 2.8; }
.ios-cv-note__author { font: 600 12px/15px var(--ios-font); }
.ios-cv-note__tag, .ios-cv-note__time { font: 500 11px/13px var(--ios-rounded); }
.ios-cv-note__body { margin-top: 6px; font-size: 15px; line-height: 20px; color: var(--ios-ink); white-space: pre-wrap; }

/* ------------------------------------------------------------------ composer
   (ThreadComposerView / ChatComposerView / SmsComposerView / SocialComposerView) */

.ios-cv-composer { padding: 8px 16px max(10px, env(safe-area-inset-bottom)); background: var(--ios-bg); }
.ios-cv-grabber { display: flex; justify-content: center; padding: 2px 0 6px; }
.ios-cv-grabber span { width: 34px; height: 4px; border-radius: 999px; background: var(--ios-border-strong); }
.ios-cv-modes { display: flex; gap: 8px; margin-bottom: 8px; }
.ios-cv-mode { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--ios-neutral-wash); color: var(--ios-ink3); font: 600 11px/13px var(--ios-rounded); }
.ios-cv-mode .i { width: 10px; height: 10px; stroke-width: 2.8; }
.ios-cv-mode.is-active { background: var(--ios-accent-wash); color: var(--ios-accent-ink); }
.ios-cv-editor {
  display: block; width: 100%; min-height: 60px; max-height: 140px; resize: none; border: 1px solid var(--ios-border);
  border-radius: 14px; padding: 9px 12px; background: var(--ios-card); color: var(--ios-ink); font: 17px/22px var(--ios-font);
  font-family: inherit;
}
.ios-cv-editor::placeholder { color: var(--ios-ink3); }
.ios-cv-actionrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ios-cv-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--ios-card); border: 1px solid var(--ios-border); color: var(--ios-ink2); flex: none; }
.ios-cv-iconbtn .i { width: 15px; height: 15px; stroke-width: 2.2; }
.ios-cv-grow { flex: 1 1 auto; }

/* The chat/sms/social field row: a round pill editor between an attach button and a send circle
   (ChatComposerView/SmsComposerView/SocialComposerView — the same row, different rules above it). */
.ios-cv-fieldrow { display: flex; align-items: flex-end; gap: 10px; }
.ios-cv-editor--round { border-radius: 20px; min-height: 40px; max-height: 120px; padding: 9px 15px; }
.ios-cv-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--ios-accent); color: #fff; }
.ios-cv-send .i { width: 16px; height: 16px; stroke-width: 2.6; }
.ios-cv-send.is-off { background: var(--ios-ink3); }

/* the claim banner (ChatView.claimBanner): amber, above the composer */
.ios-cv-claim { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ios-amber-wash); }
.ios-cv-claim__icon { width: 16px; height: 16px; stroke-width: 2.2; color: var(--ios-amber); flex: none; }
.ios-cv-claim__text { flex: 1 1 auto; font-size: 13px; line-height: 18px; color: var(--ios-ink2); }
.ios-cv-claim__text b { color: var(--ios-ink); }

/* ------------------------------------------------------------------ chat status strip
   (ChatView.statusStrip: brand, ChatStatusPill, the socket badge) */

.ios-cv-socket { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: var(--ios-neutral-wash); font: 600 11px/13px var(--ios-rounded); color: var(--ios-ink2); }
.ios-cv-socket__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ios-accent); }

/* "Where they started" (ChatView.pageContextCard) */
.ios-cv-context__line { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--ios-ink2); }

/* ------------------------------------------------------------------ ChatCartCard */

.ios-cv-cart { display: flex; flex-direction: column; gap: 8px; }
.ios-cv-cart__head { display: flex; align-items: center; justify-content: space-between; }
.ios-cv-cart__age { font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-cart__line { display: flex; align-items: center; gap: 10px; }
.ios-cv-cart__thumb { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ios-neutral-wash); border: 1px solid var(--ios-border); flex: none; }
.ios-cv-cart__thumb .i { width: 13px; height: 13px; stroke-width: 2; color: var(--ios-ink3); }
.ios-cv-cart__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ios-cv-cart__title { font: 600 13px/17px var(--ios-font); color: var(--ios-ink); }
.ios-cv-cart__qty { color: var(--ios-ink3); font-weight: 500; }
.ios-cv-cart__variant { font-size: 11px; line-height: 14px; color: var(--ios-ink2); }
.ios-cv-cart__price { font: 600 13px/17px var(--ios-rounded); color: var(--ios-ink); flex: none; }
.ios-cv-cart__total { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--ios-border); font-size: 13px; color: var(--ios-ink2); }
.ios-cv-cart__totalprice { font-weight: 700; color: var(--ios-ink); }

/* ------------------------------------------------------------------ day separator (ChatDaySeparator) */

.ios-cv-daysep { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.ios-cv-daysep span { flex: 1 1 auto; height: 1px; background: var(--ios-border-strong); }
.ios-cv-daysep em { flex: none; font: 500 11px/13px var(--ios-rounded); font-style: normal; color: var(--ios-ink3); }

/* ------------------------------------------------------------------ chat/sms bubbles
   (ChatBubbleView: customer on paper leaning left, agent on emerald leaning right, AI on violet
   with a sparkle label, system lines centred) */

.ios-cv-bwrap { display: flex; flex-direction: column; max-width: 78%; gap: 3px; }
.ios-cv-bwrap.is-in { align-items: flex-start; align-self: flex-start; }
.ios-cv-bwrap.is-out { align-items: flex-end; align-self: flex-end; }
.ios-cv-bubble { padding: 10px 14px; border-radius: 18px; background: var(--ios-card); border: 1px solid var(--ios-border); }
.ios-cv-bubble p { margin: 0; font-size: 15px; line-height: 20px; white-space: pre-wrap; }
.ios-cv-bubble--out { background: var(--ios-accent); border-color: var(--ios-accent); color: #fff; }
.ios-cv-bubble--ai { background: var(--ios-violet-wash); border-color: color-mix(in oklab, var(--ios-violet) 25%, transparent); color: var(--ios-ink); }
.ios-cv-bubble__ai { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--ios-violet); font: 600 11px/13px var(--ios-rounded); }
.ios-cv-bubble__ai .i { width: 9px; height: 9px; stroke-width: 3; }
.ios-cv-bubble__time { padding: 0 4px; font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-sysline { display: flex; justify-content: center; padding: 2px 0; }
.ios-cv-sysline span { padding: 6px 12px; border-radius: 999px; background: var(--ios-neutral-wash); font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); text-align: center; }
.ios-cv-seen { text-align: right; padding: 0 4px; font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-bwrap.is-tight { margin-top: -6px; }

/* the SMS delivery footer (SmsStatusFooter): Sending… / Sent / Delivered, always shown, never a
   transient toast — an agent scrolling back has to see which of their texts actually landed. */
.ios-cv-smsfoot { padding: 0 4px; font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }

/* ------------------------------------------------------------------ social comment thread
   (SocialCommentThreadView: a post card, a contact row, then a list of attributed remarks) */

.ios-cv-post { display: flex; align-items: flex-start; gap: 12px; }
.ios-cv-post__thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 10px; background: var(--ios-ig-wash); color: var(--ios-ig); }
.ios-cv-post__thumb .i { width: 22px; height: 22px; }
.ios-cv-post__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ios-cv-post__meta { display: flex; align-items: center; gap: 6px; color: var(--ios-ig); font: 600 12px/16px var(--ios-font); }
.ios-cv-post__meta .i { width: 11px; height: 11px; stroke-width: 2.6; }
.ios-cv-post__age { color: var(--ios-ink3); font-weight: 500; }
.ios-cv-post__caption { margin: 0; font-size: 13px; line-height: 18px; color: var(--ios-ink); }
.ios-cv-post__stats { display: flex; gap: 10px; font-size: 11px; line-height: 14px; color: var(--ios-ink3); }
.ios-cv-post__stats b { color: var(--ios-ink); font-weight: 600; }
.ios-cv-post__open { align-self: flex-start; }

.ios-cv-comment { display: flex; flex-direction: column; gap: 6px; }
.ios-cv-comment.is-root { border-color: var(--ios-border-strong); }
.ios-cv-comment__head { display: flex; align-items: center; gap: 6px; }
.ios-cv-comment__author { font: 600 13px/17px var(--ios-font); color: var(--ios-ink); }
.ios-cv-comment__time { font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-comment__body { margin: 0; font-size: 15px; line-height: 20px; color: var(--ios-ink); white-space: pre-wrap; }

/* the public/private segmented control (SocialComposerView.replyModeControl) */
.ios-cv-replyseg { margin-bottom: 6px; }
.ios-cv-replynote { margin: 0 0 8px; font-size: 11px; line-height: 14px; color: var(--ios-amber); }
.ios-cv-editor--public { border-color: color-mix(in oklab, var(--ios-amber) 50%, transparent); }
.ios-cv-send--amber { background: var(--ios-amber); }

/* the contact sheet (SocialContactCard.swift) */
.ios-cv-sheet { display: flex; flex-direction: column; gap: 14px; }
.ios-cv-contact { display: flex; align-items: center; gap: 12px; }
.ios-cv-contact__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ios-cv-contact__handle { display: flex; align-items: center; gap: 4px; color: var(--ios-ig); font-size: 13px; line-height: 18px; }
.ios-cv-contact__handle .i:first-child { width: 11px; height: 11px; }
.ios-cv-contact__copy { display: inline-flex; color: var(--ios-ink3); }
.ios-cv-contact__copy .i { width: 10px; height: 10px; }
.ios-cv-contact__empty { margin: 0; font-size: 15px; line-height: 20px; color: var(--ios-ink2); }
.ios-cv-contact__hint { margin: 4px 0 0; font: 500 11px/16px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-contact__email { font-size: 13px; line-height: 18px; color: var(--ios-ink2); }

/* ------------------------------------------------------------------ customer sheet
   (CustomerCardSheet.swift: identity, lifetime stats, orders with their own action menu) */

.ios-cv-stats { display: flex; align-items: center; }
.ios-cv-stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ios-cv-stat b { font: 700 17px/20px var(--ios-rounded); color: var(--ios-ink); }
.ios-cv-stat span { font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-statdiv { width: 1px; height: 34px; background: var(--ios-border); }

.ios-cv-notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ios-neutral-wash); font-size: 12px; line-height: 16px; color: var(--ios-ink2); }
.ios-cv-notice .i { width: 13px; height: 13px; stroke-width: 2.2; flex: none; margin-top: 1px; color: var(--ios-ink3); }

.ios-cv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 24px 16px; }
.ios-cv-empty__icon { width: 26px; height: 26px; stroke-width: 1.6; color: var(--ios-ink3); margin-bottom: 6px; }
.ios-cv-empty p { margin: 0; font-size: 13px; line-height: 18px; color: var(--ios-ink2); }
.ios-cv-empty p b { color: var(--ios-ink); font-size: 15px; }

.ios-cv-order__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ios-cv-orow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ios-cv-orow__name { font: 600 15px/20px var(--ios-font); color: var(--ios-ink); }
.ios-cv-orow__total { font: 600 14px/18px var(--ios-rounded); color: var(--ios-ink); }
.ios-cv-orow__chips { margin: 6px 0 10px; align-items: center; }
.ios-cv-orow__date { font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }

.ios-cv-lines { display: flex; flex-direction: column; gap: 8px; }
.ios-cv-line { display: flex; align-items: center; gap: 8px; }
.ios-cv-line__thumb { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ios-sunken); flex: none; }
.ios-cv-line__thumb .i { width: 13px; height: 13px; stroke-width: 1.8; color: var(--ios-ink3); }
.ios-cv-line__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ios-cv-line__title { font-size: 13px; line-height: 17px; color: var(--ios-ink); }
.ios-cv-line__sku { font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-cv-line__qty { font: 600 12px/16px var(--ios-rounded); color: var(--ios-ink2); flex: none; }
.ios-cv-line__price { font: 500 12px/16px var(--ios-rounded); color: var(--ios-ink2); flex: none; }

.ios-cv-tracking { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 10px; border-radius: 10px; background: var(--ios-sunken); font-size: 12px; line-height: 16px; color: var(--ios-accent-ink); }
.ios-cv-tracking .i { width: 11px; height: 11px; stroke-width: 2.2; flex: none; }

.ios-cv-shipto { margin-top: 10px; }
.ios-cv-shipto p { margin: 3px 0 0; font-size: 12px; line-height: 16px; color: var(--ios-ink2); white-space: pre-wrap; }

/* the earlier-orders disclosure: a native <details>/<summary>, no script needed */
.ios-cv-earlierlist { display: flex; flex-direction: column; }
.ios-cv-earlier { padding: 10px 0; border-top: 0.5px solid var(--ios-border-strong); }
.ios-cv-earlierlist > .ios-cv-earlier:first-child { border-top: none; padding-top: 0; }
.ios-cv-earlier summary { cursor: pointer; list-style: none; }
.ios-cv-earlier summary::-webkit-details-marker { display: none; }
.ios-cv-earlier[open] summary { margin-bottom: 10px; }
.ios-cv-earlier .ios-cv-lines, .ios-cv-earlier .ios-cv-shipto { padding-left: 4px; }

.ios-cv-claimrow { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.ios-cv-claimrow__icon { width: 14px; height: 14px; stroke-width: 2; color: var(--ios-amber); flex: none; margin-top: 2px; }
.ios-cv-claimrow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ios-cv-claimrow__top { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ios-ink); }
.ios-cv-claimrow__detail { font-size: 12px; line-height: 16px; color: var(--ios-ink2); }

.ios-cv-provenance { margin: 2px 0 0; text-align: center; font: 500 11px/13px var(--ios-rounded); color: var(--ios-ink3); }

/* ---- ios-tabs.css ---- */
/* The iPhone app's Verifications, Claims and Settings tabs, plus the dialer — building on the
   base iPhone styles in styles/ios.css (read, not edited). Classes are `ios-tb-…`. */

/* ---------- layout ---------- */

.ios-tb-stack { display: flex; flex-direction: column; gap: 12px; }
.ios-tb-card { display: flex; flex-direction: column; gap: 10px; }
.ios-tb-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ios-tb-cardhead__trailing { display: flex; align-items: center; gap: 6px; flex: none; }

.ios-tb-mt6 { margin-top: 6px; }
.ios-tb-mt8 { margin-top: 8px; }
.ios-tb-mt16 { margin-top: 16px; }
.ios-tb-center { text-align: center; }
.ios-tb-strong { font-weight: 600; color: var(--ios-ink); }
.ios-tb-break { word-break: break-all; }
.ios-tb-clamp1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-tb-upper { text-transform: uppercase; letter-spacing: 0.6px; }
.ios-tb-mlauto { margin-left: auto; }
.ios-tb-hr { border: none; border-top: 0.5px solid var(--ios-border-strong); margin: 2px 0; }
.ios-tb-flex1 { flex: 1 1 0; }
.ios-tb-flex2 { flex: 2 1 0; }

.ios-tb-tone-open { color: var(--ios-accent-ink); }
.ios-tb-tone-amber { color: var(--ios-amber); }
.ios-tb-tone-danger { color: var(--ios-danger); }
.ios-tb-tone-muted { color: var(--ios-ink3); }

/* ---------- banners ---------- */

.ios-tb-banner { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; }
.ios-tb-banner .i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ios-tb-banner span { font-size: 13px; line-height: 18px; }
.ios-tb-banner--info { background: var(--ios-accent-wash); color: var(--ios-accent-ink); }
.ios-tb-banner--success { background: var(--ios-accent-wash); color: var(--ios-accent-ink); }
.ios-tb-banner--warning { background: var(--ios-amber-wash); color: var(--ios-amber); }
.ios-tb-banner--error { background: var(--ios-danger-wash); color: var(--ios-danger); }

/* ---------- a row that opens something (verifications, claims lists) ---------- */

.ios-tb-rowlist { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ios-tb-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border-radius: 16px; background: var(--ios-card); border: 1px solid var(--ios-border); box-shadow: 0 2px 6px var(--ios-shadow); color: inherit;
}
a.ios-tb-row:active { transform: scale(0.99); }
.ios-tb-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ios-tb-row__top { display: flex; align-items: center; gap: 6px; }
.ios-tb-row__clip { width: 11px; height: 11px; color: var(--ios-ink3); flex: none; }
.ios-tb-row__trail { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ios-tb-row__chev { width: 12px; height: 12px; color: var(--ios-ink3); }

/* ---------- DetailRow / legend / Q&A / steps ---------- */

.ios-tb-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ios-tb-legend > div { font-size: 12px; line-height: 16px; }
.ios-tb-legend dt { display: inline; font-weight: 600; color: var(--ios-ink); }
.ios-tb-legend dd { display: inline; margin: 0; color: var(--ios-ink2); }

.ios-tb-steps { display: flex; flex-direction: column; gap: 6px; }
.ios-tb-steps li { display: flex; gap: 8px; font-size: 13px; line-height: 18px; }
.ios-tb-steps__n {
  flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ios-neutral-wash); color: var(--ios-ink2);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.ios-tb-qa { display: flex; flex-direction: column; gap: 10px; }

/* ---------- addresses ---------- */

.ios-tb-addr { padding: 10px; border-radius: 10px; background: var(--ios-sunken); }
.ios-tb-addr.is-flagged { background: var(--ios-amber-wash); }
.ios-tb-addr__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ios-tb-addrlines { white-space: pre-line; }
.ios-tb-flagged-line { display: flex; gap: 8px; padding: 10px; border-radius: 10px; background: var(--ios-amber-wash); font-size: 13px; line-height: 18px; margin-top: 4px; }
.ios-tb-flagged-line .i { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ios-amber); }

/* ---------- evidence, document placeholder ---------- */

.ios-tb-evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ios-tb-ev { display: flex; flex-direction: column; gap: 4px; }
.ios-tb-ev__thumb { height: 84px; border-radius: 10px; background: var(--ios-sunken); display: flex; align-items: center; justify-content: center; color: var(--ios-ink3); }
.ios-tb-ev__thumb .i { width: 22px; height: 22px; }

.ios-tb-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 160px; border-radius: 14px; background: var(--ios-sunken); text-align: center; padding: 0 24px; }
.ios-tb-doc__i { width: 34px; height: 34px; color: var(--ios-ink3); }

/* ---------- parcel tracker (ParcelTrackerView.swift) ---------- */

.ios-tb-tracker { display: flex; flex-direction: column; gap: 6px; }
.ios-tb-tracker__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ios-tb-disclosure summary { font: 600 13px/18px var(--ios-font); color: var(--ios-ink2); cursor: pointer; list-style: none; }
.ios-tb-disclosure summary::-webkit-details-marker { display: none; }
.ios-tb-disclosure summary::before { content: '\25B8  '; }
.ios-tb-disclosure[open] summary::before { content: '\25BE  '; }
.ios-tb-scans { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ios-tb-scans li { display: flex; gap: 10px; align-items: flex-start; }
.ios-tb-scans__dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--ios-ink3); }
.ios-tb-scans__dot.is-first { background: var(--ios-accent); }

/* ---------- timeline ---------- */

.ios-tb-timeline { display: flex; flex-direction: column; gap: 12px; }
.ios-tb-timeline__item { display: flex; gap: 10px; }
.ios-tb-timeline__dot { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ios-neutral-wash); display: flex; align-items: center; justify-content: center; color: var(--ios-ink2); }
.ios-tb-timeline__dot .i { width: 12px; height: 12px; }
.ios-tb-timeline__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ios-tb-diff { display: flex; flex-direction: column; gap: 2px; font-family: var(--ios-mono); font-size: 12px; padding: 8px; border-radius: 8px; background: var(--ios-sunken); margin-top: 2px; }
.ios-tb-diff__old { color: var(--ios-danger); }
.ios-tb-diff__new { color: var(--ios-accent-ink); }

/* ---------- what was created / mail dialog ---------- */

.ios-tb-created + .ios-tb-created { margin-top: 16px; }
.ios-tb-linkrow-inline { display: flex; gap: 16px; margin: 2px 0; }
.ios-tb-linkrow-inline a { font: 600 12px/16px var(--ios-font); color: var(--ios-accent); }
.ios-tb-btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.ios-tb-extlink { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/16px var(--ios-font); color: var(--ios-accent); background: none; border: none; padding: 0; }
.ios-tb-extlink .i { width: 11px; height: 11px; }
.ios-tb-linklike { cursor: pointer; }

.ios-tb-maildlg__head { display: flex; flex-direction: column; gap: 2px; padding-right: 26px; margin-bottom: 10px; }
.ios-tb-mail { padding: 14px; border-radius: 12px; background: var(--ios-sunken); font-size: 13px; line-height: 19px; color: var(--ios-ink); }
.ios-tb-mail p { margin: 0 0 10px; }
.ios-tb-mail p:last-child { margin-bottom: 0; }
.ios-tb-mail__brand { font-weight: 700; color: var(--ios-accent-deep); }

/* ---------- flags (shipping claim) ---------- */

.ios-tb-flags { padding: 12px; border-radius: 12px; background: var(--ios-amber-wash); display: flex; flex-direction: column; gap: 6px; }
.ios-tb-flags__head { display: flex; align-items: center; gap: 6px; font: 700 11px/13px var(--ios-rounded); letter-spacing: 0.6px; color: var(--ios-amber); }
.ios-tb-flags__head .i { width: 12px; height: 12px; }

/* ---------- items line, decision, resolution rows ---------- */

.ios-tb-line { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.ios-tb-line__main { flex: 1 1 auto; min-width: 0; }

.ios-tb-resrows { display: flex; flex-direction: column; gap: 6px; }
.ios-tb-resrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ios-sunken); }
.ios-tb-resrow.is-selected { background: var(--ios-accent-wash); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ios-accent) 50%, transparent); }
.ios-tb-resrow__radio { width: 18px; height: 18px; color: var(--ios-ink3); flex: none; }
.ios-tb-resrow.is-selected .ios-tb-resrow__radio { color: var(--ios-accent); }
.ios-tb-resrow__icon { width: 15px; height: 15px; color: var(--ios-ink2); flex: none; }
.ios-tb-effect { padding: 10px; border-radius: 10px; background: var(--ios-sunken); }
.ios-tb-attest { padding: 10px; border-radius: 10px; background: var(--ios-sunken); margin: 6px 0; }
.ios-tb-attest p:first-child { margin: 0 0 4px; }
.ios-tb-suggest { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--ios-ink3); }
.ios-tb-suggest .i { width: 11px; height: 11px; margin-top: 2px; flex: none; }

/* ---------- bottom action bar ---------- */

/* Reserves room so the sticky bar below never overlaps the last real card —
   a sticky element floats at its "stuck" position even before the page is
   scrolled that far, so the scrolling content needs its own clearance. */
.ios-tb-stack--bar { padding-bottom: 168px; }

.ios-tb-actionbar {
  position: sticky; bottom: 0; margin: 0 -16px -20px; padding: 10px 16px 30px;
  background: color-mix(in oklab, var(--ios-bg) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--ios-border-strong);
}
.ios-tb-decisionrow { display: flex; gap: 8px; align-items: stretch; }
.ios-tb-decisionrow .ios-btn { min-height: 44px; padding: 6px 8px; font-size: 13px; line-height: 16px; text-align: center; }
/* flex-basis (not width) sizes this — `.ios-btn`'s own `width: 100%` only
   governs a flex item's hypothetical size when its flex-basis is `auto`. */
.ios-tb-iconbtn { flex: 0 0 40px; padding: 0; }
.ios-tb-flex3 { flex: 3 1 0; }

/* ---------- toggles, info rows, link rows (Settings) ---------- */

.ios-tb-togglerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; cursor: pointer; }
.ios-tb-togglerow__text { display: flex; flex-direction: column; gap: 2px; }

.ios-tb-inforow { display: flex; align-items: flex-start; gap: 10px; padding: 2px 0; }
.ios-tb-inforow__icon { width: 17px; height: 17px; margin-top: 2px; color: var(--ios-accent); flex: none; }
.ios-tb-inforow__text { display: flex; flex-direction: column; gap: 2px; }

.ios-tb-linkrow { display: flex; align-items: center; gap: 10px; color: inherit; padding: 4px 0; }
.ios-tb-linkrow__icon { width: 15px; height: 15px; color: var(--ios-ink2); flex: none; }
.ios-tb-linkrow__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ios-tb-linkrow__chev { width: 12px; height: 12px; color: var(--ios-ink3); flex: none; }

.ios-tb-avatarrow { display: flex; align-items: center; gap: 14px; }

.ios-tb-testrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.ios-tb-testrow > span:nth-child(2) { flex: 1 1 auto; }
.ios-tb-timerow { display: flex; gap: 12px; margin-top: 4px; }
.ios-tb-timerow > div { flex: 1 1 0; padding: 8px 10px; border-radius: 10px; background: var(--ios-sunken); }
.ios-tb-timerow p { margin: 2px 0 0; }

.ios-tb-trigger { padding: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.ios-tb-brandchips { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ios-tb-brandchips .i { width: 12px; height: 12px; color: var(--ios-ink3); }
.ios-tb-stepper { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ios-tb-stepper button { width: 26px; height: 26px; border-radius: 50%; background: var(--ios-neutral-wash); display: flex; align-items: center; justify-content: center; color: var(--ios-ink2); flex: none; }
.ios-tb-stepper .i { width: 12px; height: 12px; }
.ios-tb-stepper span { font-size: 12px; color: var(--ios-ink2); }

/* ---------- the dialer (DialerView.swift) ---------- */

.ios-tb-dialer { display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.ios-tb-dialer .ios-seg { align-self: stretch; }
.ios-tb-display { font: 700 40px/1 var(--ios-mono); letter-spacing: 0.5px; margin: 16px 0 20px; color: var(--ios-ink); }
.ios-tb-keypad { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.ios-tb-keyrow { display: flex; gap: 26px; }
.ios-tb-key { width: 68px; height: 68px; border-radius: 50%; background: var(--ios-neutral-wash); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ios-tb-key__digit { font-size: 28px; line-height: 1; color: var(--ios-ink); }
.ios-tb-key__letters { font: 600 10px/1 var(--ios-rounded); letter-spacing: 1px; color: var(--ios-ink3); margin-top: 3px; }
.ios-tb-callrow { display: flex; align-items: center; width: 100%; margin-top: 22px; }
.ios-tb-callrow__spacer { width: 68px; height: 68px; flex: none; }
.ios-tb-callbtn { margin: 0 auto; width: 68px; height: 68px; border-radius: 50%; background: var(--ios-accent); display: flex; align-items: center; justify-content: center; }
.ios-tb-callbtn__i { width: 26px; height: 26px; color: #fff; }
.ios-tb-delbtn { width: 68px; height: 68px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ios-ink2); }
.ios-tb-reason { margin-top: 10px; min-height: 18px; font-size: 13px; color: var(--ios-amber); text-align: center; }

/* ---- ios.css ---- */
/* The iPhone app's copy — ios/Dorris/Sources/DesignSystem: Palette.swift ("Pebble", the same
   cream, white and emerald as the web app), Typography.swift (the system font at iOS's own
   text styles) and Chips.swift. Classes are `ios-…`; pages use `shell: 'ios'`. */

.xp-ios-doc {
  --ios-bg: #F5F0E8; --ios-card: #FFFFFF; --ios-raised: #FFFFFF; --ios-sunken: #EDE7DB;
  --ios-ink: #1C1917; --ios-ink2: #6B6560; --ios-ink3: #9A938C;
  --ios-accent: #059669; --ios-accent-deep: #047857; --ios-accent-wash: rgb(5 150 105 / 0.10); --ios-accent-ink: #065F46;
  --ios-border: rgb(28 25 23 / 0.08); --ios-border-strong: rgb(28 25 23 / 0.16);
  --ios-amber: #B45309; --ios-amber-wash: rgb(180 83 9 / 0.12);
  --ios-danger: #B91C1C; --ios-danger-wash: rgb(185 28 28 / 0.10);
  --ios-neutral-wash: rgb(28 25 23 / 0.06);
  --ios-rose: #BE123C; --ios-rose-wash: rgb(190 18 60 / 0.10);
  --ios-violet: #6D28D9; --ios-violet-wash: rgb(109 40 217 / 0.10);
  --ios-badge: #DC2626; --ios-shadow: rgb(28 25 23 / 0.07);
  --ios-ig: #9D174D; --ios-ig-wash: rgb(157 23 77 / 0.10);
  --ios-fb: #1D4ED8; --ios-fb-wash: rgb(29 78 216 / 0.10);
  --ios-tt: #0F766E; --ios-tt-wash: rgb(15 118 110 / 0.10);
  --ios-yt: #B91C1C; --ios-yt-wash: rgb(185 28 28 / 0.10);
  --ios-brand-a: #065F46; --ios-brand-a-wash: rgb(6 95 70 / 0.10);
  --ios-brand-b: #3730A3; --ios-brand-b-wash: rgb(55 48 163 / 0.10);
  --ios-bar: rgb(249 247 243 / 0.94);
  --ios-fill: rgb(118 118 128 / 0.12);
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --ios-rounded: ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  --ios-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
.dark.xp-ios-doc {
  --ios-bg: #1C1917; --ios-card: #292524; --ios-raised: #322D2A; --ios-sunken: #171412;
  --ios-ink: #F7F4EF; --ios-ink2: #B4ACA3; --ios-ink3: #857D75;
  --ios-accent: #10B981; --ios-accent-deep: #34D399; --ios-accent-wash: rgb(16 185 129 / 0.16); --ios-accent-ink: #6EE7B7;
  --ios-border: rgb(255 255 255 / 0.10); --ios-border-strong: rgb(255 255 255 / 0.20);
  --ios-amber: #F59E0B; --ios-amber-wash: rgb(245 158 11 / 0.18);
  --ios-danger: #F87171; --ios-danger-wash: rgb(248 113 113 / 0.16);
  --ios-neutral-wash: rgb(255 255 255 / 0.09);
  --ios-rose: #FDA4AF; --ios-rose-wash: rgb(253 164 175 / 0.16);
  --ios-violet: #C4B5FD; --ios-violet-wash: rgb(196 181 253 / 0.16);
  --ios-badge: #EF4444; --ios-shadow: rgb(0 0 0 / 0.35);
  --ios-ig: #F9A8D4; --ios-ig-wash: rgb(249 168 212 / 0.16);
  --ios-fb: #93C5FD; --ios-fb-wash: rgb(147 197 253 / 0.16);
  --ios-tt: #5EEAD4; --ios-tt-wash: rgb(94 234 212 / 0.16);
  --ios-yt: #FCA5A5; --ios-yt-wash: rgb(252 165 165 / 0.16);
  --ios-brand-a: #6EE7B7; --ios-brand-a-wash: rgb(110 231 183 / 0.16);
  --ios-brand-b: #A5B4FC; --ios-brand-b-wash: rgb(165 180 252 / 0.16);
  --ios-bar: rgb(28 25 23 / 0.94);
  --ios-fill: rgb(118 118 128 / 0.24);
}

/* ------------------------------------------------------------------ the frame */

body.xp-ios { font-family: var(--ios-font); color: var(--ios-ink); background: var(--ios-bg); }
html:not(.is-framed) body.xp-ios { background: var(--ios-sunken); }
.ios {
  position: relative; display: flex; flex-direction: column; width: 100%; flex: 1 1 auto; min-height: 0; max-width: 430px; margin: 0 auto;
  overflow: hidden; background: var(--ios-bg); font-size: 17px; line-height: 22px; letter-spacing: -0.41px;
}
@media (min-width: 500px) { html:not(.is-framed) .ios { box-shadow: 0 0 0 1px var(--ios-border-strong), 0 20px 60px rgb(0 0 0 / 0.15); } }

/* Opened by itself on a phone, the phone draws its own status bar above the page. */
@media (hover: none) and (pointer: coarse) { html:not(.is-framed) .ios-sb { display: none; } }
.ios-sb { flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 12px 26px 0 38px; }
.ios-sb__time { font: 600 17px/22px var(--ios-font); letter-spacing: -0.4px; }
.ios-sb__sys { width: 72px; height: 14px; fill: currentColor; }

.ios-nav { flex: none; background: var(--ios-bg); }
.ios-nav__bar { position: relative; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.ios-nav__back { display: inline-flex; align-items: center; gap: 1px; margin-left: -9px; color: var(--ios-accent); font-size: 17px; white-space: nowrap; }
.ios-nav__chev { width: 26px; height: 26px; stroke-width: 2.4; }
.ios-nav__title {
  position: absolute; left: 50%; transform: translateX(-50%); max-width: 210px;
  font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ios-nav__spacer { width: 1px; }
.ios-nav__trailing { display: flex; align-items: center; gap: 18px; color: var(--ios-accent); }
.ios-nav__trailing .i { width: 22px; height: 22px; }
.ios-nav__trailing a, .ios-nav__trailing button { display: inline-flex; align-items: center; color: inherit; font-size: 17px; }
.ios-nav__large { padding: 0 16px 6px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.37px; }
.ios-nav--large .ios-nav__bar { height: 36px; }

.ios__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 20px; }
.ios__content--flush { padding: 0; }

.ios-tabs {
  flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 7px 0 28px;
  background: var(--ios-bar); border-top: 0.5px solid var(--ios-border-strong);
}
.ios-tabs__tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 0.1px; color: var(--ios-ink3); }
.ios-tabs__tab.is-active { color: var(--ios-accent); }
.ios-tabs__icon { width: 26px; height: 26px; stroke-width: 1.9; }

/* ------------------------------------------------------------------ type (Typography.swift, iOS text styles) */

.ios-t-title2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: 0.35px; }
.ios-t-title3 { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: 0.38px; }
.ios-t-headline { font-size: 17px; line-height: 22px; font-weight: 600; }
.ios-t-body { font-size: 17px; line-height: 22px; }
.ios-t-callout { font-size: 16px; line-height: 21px; letter-spacing: -0.32px; }
.ios-t-sub { font-size: 15px; line-height: 20px; letter-spacing: -0.24px; }
.ios-t-foot { font-size: 13px; line-height: 18px; letter-spacing: -0.08px; }
.ios-t-cap { font-size: 12px; line-height: 16px; letter-spacing: 0; }
.ios-t-cap2 { font-size: 11px; line-height: 13px; letter-spacing: 0.06px; }
.ios-t-rounded { font-family: var(--ios-rounded); }
.ios-t-mono { font-family: var(--ios-mono); font-size: 13px; }
.ios-ink2 { color: var(--ios-ink2); }
.ios-ink3 { color: var(--ios-ink3); }
.ios-accent { color: var(--ios-accent); }

/* SectionLabel: an uppercase caption2 in rounded semibold, tracked */
.ios-label { display: flex; align-items: center; gap: 6px; font: 600 11px/13px var(--ios-rounded); letter-spacing: 0.8px; text-transform: uppercase; color: var(--ios-ink3); }
.ios-label .i { width: 11px; height: 11px; stroke-width: 2.6; }

/* PebbleCard: 16 padding, radius 18, hairline border, soft shadow */
.ios-card { padding: 16px; border-radius: 18px; background: var(--ios-card); border: 1px solid var(--ios-border); box-shadow: 0 4px 10px var(--ios-shadow); }

/* DetailRow: a caption label and an emphasised value */
.ios-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; }
.ios-detail > :first-child { color: var(--ios-ink2); }
.ios-detail > :last-child { font-weight: 600; text-align: right; }

/* Grouped lists (Settings and the like) */
.ios-group { margin: 0 0 24px; }
.ios-group__head { padding: 0 16px 7px; font-size: 13px; line-height: 18px; text-transform: uppercase; color: var(--ios-ink2); letter-spacing: -0.08px; }
.ios-group__foot { padding: 7px 16px 0; font-size: 13px; line-height: 18px; color: var(--ios-ink2); }
.ios-list { border-radius: 12px; background: var(--ios-card); overflow: hidden; }
.ios-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; position: relative; font-size: 17px; line-height: 22px; }
.ios-row + .ios-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--ios-border-strong); }
.ios-row__main { flex: 1 1 auto; min-width: 0; }
.ios-row__value { color: var(--ios-ink2); white-space: nowrap; }
.ios-row__chev { width: 14px; height: 14px; color: var(--ios-ink3); stroke-width: 3; flex: none; }
.ios-row__icon { width: 29px; height: 29px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--ios-accent); flex: none; }
.ios-row__icon .i { width: 17px; height: 17px; }

/* A switch, as UIKit draws it (explore.js flips `.toggle`) */
.ios-switch { position: relative; display: inline-flex; width: 51px; height: 31px; border-radius: 999px; background: var(--ios-fill); flex: none; transition: background-color 0.2s; }
.ios-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.16); transition: transform 0.2s; }
.ios-switch.is-on { background: #34C759; }
.ios-switch.is-on::after { transform: translateX(20px); }

/* Buttons */
.ios-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 20px; border-radius: 14px; background: var(--ios-accent); color: #fff; font-size: 17px; font-weight: 600; width: 100%; }
.ios-btn--quiet { background: var(--ios-accent-wash); color: var(--ios-accent-deep); }
.ios-btn--danger { background: var(--ios-danger-wash); color: var(--ios-danger); }
.ios-btn--small { min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 15px; width: auto; }

/* Segmented control */
.ios-seg { display: flex; padding: 2px; border-radius: 9px; background: var(--ios-fill); }
.ios-seg > * { flex: 1 1 0; text-align: center; padding: 6px 8px; border-radius: 7px; font-size: 13px; line-height: 18px; font-weight: 500; }
.ios-seg > .is-active { background: var(--ios-card); font-weight: 600; box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.04); }

/* The search field under a large title (.searchable) */
.ios-search { display: flex; align-items: center; gap: 6px; height: 36px; margin: 0 0 12px; padding: 0 8px; border-radius: 10px; background: var(--ios-fill); color: var(--ios-ink3); font-size: 17px; }
.ios-search .i { width: 17px; height: 17px; stroke-width: 2.4; }

/* ------------------------------------------------------------------ chips (Chips.swift ChipLabel, pill font) */

.ios-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font: 600 11px/13px var(--ios-rounded); white-space: nowrap; color: var(--ios-ink2); background: var(--ios-neutral-wash); }
.ios-chip .i { width: 9px; height: 9px; stroke-width: 3; }
.ios-chip--open { color: var(--ios-accent-ink); background: var(--ios-accent-wash); }
.ios-chip--snoozed, .ios-chip--amber { color: var(--ios-amber); background: var(--ios-amber-wash); }
.ios-chip--danger { color: var(--ios-danger); background: var(--ios-danger-wash); }
.ios-chip--violet { color: var(--ios-violet); background: var(--ios-violet-wash); }
.ios-chip--brand-a { color: var(--ios-brand-a); background: var(--ios-brand-a-wash); }
.ios-chip--brand-b { color: var(--ios-brand-b); background: var(--ios-brand-b-wash); }
.ios-chip--ig { color: var(--ios-ig); background: var(--ios-ig-wash); }
.ios-chip--fb { color: var(--ios-fb); background: var(--ios-fb-wash); }
.ios-chip--tt { color: var(--ios-tt); background: var(--ios-tt-wash); }
.ios-chip--bordered { box-shadow: inset 0 0 0 1px currentColor; }
.ios-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* AvatarView: initials on a tinted circle */
.ios-av { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; flex: none; font: 600 14px/1 var(--ios-rounded); color: var(--ios-accent-ink); background: var(--ios-accent-wash); box-shadow: inset 0 0 0 1px var(--ios-border); }
.ios-av--2 { color: var(--ios-brand-b); background: var(--ios-brand-b-wash); }
.ios-av--3 { color: var(--ios-amber); background: var(--ios-amber-wash); }
.ios-av--4 { color: var(--ios-rose); background: var(--ios-rose-wash); }
.ios-av--5 { color: var(--ios-violet); background: var(--ios-violet-wash); }
.ios-av--sm { width: 30px; height: 30px; font-size: 12px; }
.ios-av--lg { width: 56px; height: 56px; font-size: 20px; }

/* ------------------------------------------------------------------ Inbox (InboxView.swift, ConversationRowView.swift) */

.ios-filters { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px; scrollbar-width: none; }
.ios-filters::-webkit-scrollbar { display: none; }
.ios-filter { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 7px 11px; border-radius: 999px; background: var(--ios-neutral-wash); color: var(--ios-ink2); font: 600 11px/13px var(--ios-rounded); white-space: nowrap; }
.ios-filter .i { width: 11px; height: 11px; stroke-width: 2.6; }
.ios-filter.is-active { background: var(--ios-accent); color: #fff; }
.ios-filter__n { opacity: 0.7; font-variant-numeric: tabular-nums; }
.ios-filter.is-active .ios-filter__n { opacity: 0.9; }
.ios-filter__n.is-urgent { opacity: 1; padding: 1.5px 5px; border-radius: 999px; background: var(--ios-badge); color: #fff; font: 700 10px/12px var(--ios-font); }
.ios-stats { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; }
.ios-stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px; border-radius: 999px; background: var(--ios-neutral-wash); font: 600 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-stat b { font: 700 15px/18px var(--ios-rounded); }
.ios-stat__amber { color: var(--ios-amber); }
.ios-stats__updated { margin-left: auto; font: 600 11px/13px var(--ios-rounded); color: var(--ios-ink3); }
.ios-convs { display: flex; flex-direction: column; gap: 10px; }
.ios-conv {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--ios-card); border: 1px solid var(--ios-border); box-shadow: 0 2px 6px var(--ios-shadow); color: inherit;
}
.ios-conv.is-unreplied { border-color: color-mix(in oklab, var(--ios-accent) 35%, transparent); }
.ios-conv:active { transform: scale(0.99); }
.ios-conv__rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ios-conv__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ios-accent); }
.ios-conv__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ios-conv__top { display: flex; align-items: center; gap: 8px; }
.ios-conv__name { font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
.ios-conv__count { padding: 2px 6px; border-radius: 999px; background: var(--ios-neutral-wash); color: var(--ios-ink3); font: 600 11px/13px var(--ios-rounded); }
.ios-conv__time { color: var(--ios-ink3); font: 500 11px/13px var(--ios-rounded); font-variant-numeric: tabular-nums; }
.ios-conv__subject { font-size: 17px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-conv.is-unreplied .ios-conv__subject { font-weight: 600; }
.ios-conv__snippet { color: var(--ios-ink2); font-size: 15px; line-height: 20px; letter-spacing: -0.24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- knowledge-base.css ---- */
/* Knowledge Base — routes/_auth/cms.tsx */

.kb-title { font-weight: 500; color: var(--foreground); text-align: left; transition: color 150ms; }
.kb-title:hover { color: var(--primary); }
.kb-slug { font-size: 0.75rem; line-height: 1rem; font-family: var(--font-mono); color: var(--muted-foreground); }
.kb-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.kb-eye { display: inline-flex; padding: 0.375rem; border-radius: var(--radius-md); color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.kb-eye:hover { color: var(--foreground); background: var(--muted); }

/* PageEditor: "flex flex-col h-full" */
.kb-editor { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
.kb-ed-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.kb-ed-crumbs { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.kb-back { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); transition: color 150ms; white-space: nowrap; }
.kb-back:hover { color: var(--foreground); }
.kb-ed-name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.kb-ed-actions { display: flex; align-items: center; gap: 0.5rem; }
.kb-btn {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--foreground); transition: background-color 150ms, opacity 150ms; white-space: nowrap;
}
.kb-btn:hover { background: var(--muted); }
.kb-btn--primary { border: 0; background: var(--primary); color: var(--primary-foreground); }
.kb-btn--primary:hover { background: var(--primary); opacity: 0.9; }
.kb-toggle.is-active { display: none; }
.kb-save { padding: 0.375rem 1rem; font-size: 0.875rem; line-height: 1.25rem; background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md); }
.kb-save:hover { opacity: 0.9; }

.kb-ed-meta {
  display: flex; gap: 1rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: color-mix(in oklab, var(--muted) 20%, transparent);
}
.kb-ed-field { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0%; min-width: 0; }
.kb-ed-label { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.kb-ed-input {
  flex: 1 1 0%; min-width: 0; padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: 0.25rem;
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.kb-ed-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

.kb-ed-content { flex: 1 1 0%; overflow: hidden; min-height: 0; }
.kb-ed-textarea {
  display: block; width: 100%; height: 100%; padding: 1.5rem; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.25rem;
  background: var(--background); color: var(--foreground); resize: none;
}
.kb-ed-textarea:focus { outline: none; }

/* The preview: "prose prose-sm dark:prose-invert max-w-3xl mx-auto", an h1 and the raw Markdown in a pre. */
.kb-preview { height: 100%; overflow-y: auto; padding: 1.5rem; }
.kb-article { max-width: 48rem; margin: 0 auto; font-size: 0.875rem; line-height: 1.7142857; color: #374151; }
.kb-article h1 { margin: 0 0 0.8em; font-size: 2.1428571em; line-height: 1.2; font-weight: 800; color: #111827; }
.kb-article pre { white-space: pre-wrap; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.625; color: var(--foreground); }
.dark .kb-article { color: #d1d5db; }
.dark .kb-article h1 { color: #ffffff; }

/* At phone width the editor's header wraps rather than pushing the page sideways. */
@media (max-width: 639px) {
  .kb-ed-head { flex-wrap: wrap; gap: 0.75rem; }
}

/* ---- po.css ---- */
/* PO Tracking — routes/_auth/po.tsx and components/po/* */

/* "absolute inset-0 flex flex-col overflow-hidden" */
.po-root { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.po-flex1 { flex: 1 1 0%; }

/* Row 1: title, brand tabs, colours, New PO */
.po-bar1 { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* On a phone this row is wider than the screen, as in Dorris; here it can be swiped to reach New PO. */
@media (max-width: 767px) { .po-bar1 { overflow-x: auto; scrollbar-width: none; } .po-bar1::-webkit-scrollbar { display: none; } }
.po-title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); white-space: nowrap; }
.po-brands { display: flex; align-items: center; gap: 0.125rem; }
.po-brand {
  padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: var(--radius-md);
  color: var(--muted-foreground); white-space: nowrap; transition: color 150ms, background-color 150ms;
}
.po-brand:hover { color: var(--foreground); background: var(--muted); }
.po-brand.is-active, .po-brand.is-active:hover { background: var(--primary); color: var(--primary-foreground); }
.po-brand__n { margin-left: 0.25rem; font-size: 11px; opacity: 0.5; }
.po-brand.is-active .po-brand__n { opacity: 0.7; }
.po-iconbtn { padding: 0.375rem; border-radius: var(--radius-md); color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.po-iconbtn:hover { color: var(--foreground); background: var(--muted); }
.po-new {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; background: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap; transition: opacity 150ms;
}
.po-new:hover { opacity: 0.9; }

/* Row 2: quick filters, search, Columns, list/calendar */
.po-bar2 { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.po-pills { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.po-pill {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 9999px;
  font-size: 0.75rem; line-height: 1rem; font-weight: 500; background: var(--muted); color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.po-pill:hover { color: var(--foreground); background: color-mix(in oklab, var(--muted) 80%, transparent); }
.po-pill.is-active, .po-pill.is-active:hover { background: var(--primary); color: var(--primary-foreground); }
.po-pill__n { font-size: 10px; opacity: 0.5; }
.po-pill.is-active .po-pill__n { opacity: 0.8; }
.po-search {
  width: 12rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.po-search:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.po-colwrap { position: relative; }
.po-colsbtn {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.po-colsbtn:hover { color: var(--foreground); }
.po-colsbtn.is-open { border-color: var(--primary); color: var(--primary); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.po-cols {
  position: absolute; right: 0; top: 100%; margin-top: 0.25rem; z-index: 50; width: 14rem; padding: 0.75rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.po-cols__title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.po-cols__list { display: flex; flex-direction: column; gap: 0.25rem; }
.po-cols__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.125rem 0; font-size: 0.875rem; line-height: 1.25rem; cursor: pointer; }
.po-check { accent-color: var(--primary); }
.po-view { display: flex; align-items: center; border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; }
.po-view__btn { display: flex; align-items: center; padding: 0.375rem 0.625rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.po-view__btn:hover { color: var(--foreground); background: var(--muted); }
.po-view__btn--cal { border-left: 1px solid var(--border); }
.po-view__btn.is-active, .po-view__btn.is-active:hover { background: var(--primary); color: var(--primary-foreground); }

/* Split pane: the list on the left, the detail panel on the right */
.po-split { display: flex; flex: 1 1 0%; min-height: 0; overflow: hidden; }
.po-listcol { flex: 1 1 0%; min-width: 0; overflow-y: auto; padding: 1rem 1.5rem; transition: all 200ms; }
@media (max-width: 639px) { .po-listcol--sel { display: none; } }
.po-panelwrap { flex-shrink: 0; border-left: 1px solid var(--border); overflow-y: auto; background: var(--card); width: 420px; min-width: 420px; }
.po-panelwrap--empty { width: 0; min-width: 0; }
/* Dorris keeps the panel 420px wide on a phone too; here it takes the screen so nothing is cut off. */
@media (max-width: 639px) { .po-panelwrap:not(.po-panelwrap--empty) { width: 100%; min-width: 0; } }

/* POListView */
.po-list { display: flex; flex-direction: column; gap: 0.25rem; }
.po-colhead {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 1rem;
  font-size: 11px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground);
}
.po-colhead__all { width: 1rem; flex-shrink: 0; color: var(--muted-foreground); transition: color 150ms; }
.po-colhead__all:hover { color: var(--foreground); }
.po-rot { transform: rotate(-90deg); }
.po-rot180 { transform: rotate(180deg); }
.po-colhead button { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; font-size: 11px; transition: color 150ms; }
.po-colhead button:hover { color: var(--foreground); }
.po-ch-po { min-width: 100px; }
.po-ch-sup { flex: 1 1 0%; }
.po-ch-items { display: none; width: 9rem; }
.po-ch-status { flex-shrink: 0; }
.po-ch-eta { display: none; width: 7rem; text-align: right; flex-shrink: 0; }
.po-ch-qty { display: none; width: 4rem; text-align: right; flex-shrink: 0; }
@media (min-width: 640px) { .po-ch-items { display: block; } }
@media (min-width: 768px) { .po-colhead .po-ch-eta { display: block; } }
@media (min-width: 1024px) { .po-ch-qty { display: block; } }

/* POCard */
.po-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); transition: all 150ms; }
.po-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 30%, transparent); }
.po-card__head {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; text-align: left;
  cursor: pointer; transition: background-color 150ms;
}
.po-card__head:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.po-card__head.po-tint-prod, .po-card__head.po-tint-prod:hover { border-left: 4px solid rgba(220, 38, 38, 0.6); background-color: rgba(220, 38, 38, 0.09); }
.po-card__head.po-tint-transit, .po-card__head.po-tint-transit:hover { border-left: 4px solid rgba(37, 99, 235, 0.4); background-color: rgba(37, 99, 235, 0.055); }
.po-card__head.po-tint-done, .po-card__head.po-tint-done:hover { border-left: 4px solid rgba(5, 150, 105, 0.8); background-color: rgba(5, 150, 105, 0.12); }
.po-chev { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; transform: rotate(-90deg); transition: transform 150ms; }
.po-card__head.is-open .po-chev { transform: none; }
.po-num { min-width: 100px; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.po-num__n { font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.po-chip { font-size: 10px; line-height: 1; padding: 0.125rem 0.375rem; border-radius: 9999px; background: var(--muted); color: var(--muted-foreground); font-weight: 500; }
.po-exc-ic { display: inline-flex; color: var(--orange-500); }
.po-sup { flex: 1 1 0%; min-width: 0; }
.po-sup > span { display: block; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-items { display: none; flex-direction: column; gap: 0.125rem; width: 9rem; }
@media (min-width: 640px) { .po-items { display: flex; } }
.po-sku { font-size: 11px; line-height: 1rem; font-family: var(--font-mono); color: var(--foreground); }
.po-status { flex-shrink: 0; }
.po-eta { display: none; width: 9rem; text-align: right; flex-shrink: 0; }
@media (min-width: 768px) { .po-eta { display: block; } }
.po-qty { display: none; width: 4rem; text-align: right; flex-shrink: 0; }
@media (min-width: 1024px) { .po-qty { display: block; } }
.po-eta__done { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--emerald-600); }
.po-eta__done-sm { font-weight: 500; color: var(--emerald-600); }
.po-eta__multi { display: flex; flex-direction: column; gap: 0.125rem; }
.po-eta__line { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; }
.po-eta__lbl { font-size: 10px; color: var(--muted-foreground); margin-right: 0.25rem; }
.po-est { color: var(--orange-500); font-style: italic; }
.po-orange { color: var(--orange-500); }

/* The expanded card: one row per destination */
.po-card__body { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 10%, transparent); }
.po-loc {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
}
.po-loc:last-child { border-bottom: 0; }
.po-loc--done { background-color: rgba(5, 150, 105, 0.07); border-left: 3px solid rgba(5, 150, 105, 0.5); }
.po-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; }
.po-dot--pending { background: oklch(87.2% 0.01 258.338); }
.po-dot--production { background: oklch(85.2% 0.199 91.936); }
.po-dot--transit { background: var(--blue-500); }
.po-dot--arrived { background: var(--green-500); }
.po-dot--delivered { background: var(--emerald-600); }
.po-flag { font-size: 1rem; line-height: 1.5rem; flex-shrink: 0; }
.po-loc__dest { min-width: 100px; }
.po-loc__name { color: var(--foreground); font-weight: 500; }
.po-loc__label { display: block; font-size: 11px; line-height: 1.25; color: var(--muted-foreground); }
.po-loc__trk { display: block; font-size: 10px; line-height: 1.25; font-family: var(--font-mono); color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.po-loc__method { color: var(--muted-foreground); font-size: 0.75rem; line-height: 1rem; flex-shrink: 0; }
.po-loc__eta { font-size: 0.75rem; line-height: 1rem; flex-shrink: 0; }
.po-loc__desc { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.po-loc__skus { text-align: right; flex-shrink: 0; min-width: 80px; }
.po-loc__sku { display: block; font-size: 11px; line-height: 1.25; }
.po-card__items { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 0.25rem; padding: 0.5rem 1rem; }
.po-card__item { font-size: 11px; line-height: 1rem; color: var(--muted-foreground); }
.po-op60 { opacity: 0.6; }
.po-card__none { padding: 0.5rem 1rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); font-style: italic; }

/* PODetailPanel */
.po-panel { width: 100%; height: 100%; background: var(--card); border-left: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.po-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  background: var(--card); position: sticky; top: 0; z-index: 10;
}
.po-panel__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.po-panel__sup { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.po-panel__btns { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.125rem; }
.po-smbtn {
  display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; padding: 0.25rem 0.5rem;
  border-radius: 0.25rem; border: 1px solid var(--border); color: var(--muted-foreground); transition: color 150ms;
}
.po-smbtn:hover { color: var(--foreground); }
.po-x { color: var(--muted-foreground); transition: color 150ms; }
.po-x:hover { color: var(--foreground); }
.po-panel__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; flex: 1 1 0%; }
.po-excs { display: flex; flex-direction: column; gap: 0.375rem; }
.po-exc {
  display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
  background: var(--red-50); border: 1px solid var(--red-200); font-size: 0.75rem; line-height: 1rem; color: var(--red-700);
}
.po-exc__ic { margin-top: 0.125rem; }
.dark .po-exc { background: color-mix(in oklab, oklch(25.8% 0.092 26.042) 30%, transparent); border-color: oklch(44.4% 0.177 26.899); color: oklch(70.4% 0.191 22.216); }
.po-ov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.po-lbl { font-size: 11px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.po-ov__badge { margin-top: 0.375rem; }
.po-val { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.po-h3 { font-size: 11px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.po-h3--2 { margin-bottom: 0.5rem; }
.po-h3--15 { margin-bottom: 0.375rem; }

/* POTimeline */
.po-tl { display: flex; flex-direction: column; gap: 0.25rem; }
.po-tl__step { display: flex; gap: 0.75rem; align-items: flex-start; }
.po-tl__col { display: flex; flex-direction: column; align-items: center; }
.po-tl__dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; margin-top: 0.125rem; flex-shrink: 0; border: 2px solid var(--border); background: var(--background); transition: all 150ms; }
.po-tl__dot--done { background: var(--primary); border-color: var(--primary); }
.po-tl__dot--cur { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 30%, transparent); }
.po-tl__line { width: 0.125rem; height: 1rem; margin-top: 0.125rem; background: var(--border); }
.po-tl__line--done { background: var(--primary); }
.po-tl__txt { padding-bottom: 0.25rem; min-width: 0; }
.po-tl__label { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); }
.po-tl__label.is-lit { color: var(--foreground); }
.po-tl__ts { font-size: 11px; line-height: 1rem; color: var(--muted-foreground); }

/* ShipmentCard / UnifiedShipmentCard */
.po-ship { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 0.5rem; }
.po-ship--done { border-color: color-mix(in oklab, var(--green-500) 50%, transparent); }
.po-ship__head {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 30%, transparent);
}
.po-ship__head--done { background: color-mix(in oklab, var(--green-500) 10%, transparent); border-color: color-mix(in oklab, var(--green-500) 30%, transparent); }
.po-ship__toggle { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0%; min-width: 0.875rem; overflow: hidden; text-align: left; cursor: pointer; }
.po-ship__toggle--ic { min-width: 2.25rem; }
.po-chev3 { width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); flex-shrink: 0; transform: rotate(-90deg); transition: transform 150ms; }
.po-ship__toggle.is-open .po-chev3, .po-sf__toggle.is-open .po-chev3 { transform: none; }
.po-ship__ic { color: var(--muted-foreground); flex-shrink: 0; display: inline-flex; }
.po-ship__label { flex: 1 1 0%; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-ship__alldel { font-size: 11px; font-weight: 600; color: var(--green-600); flex-shrink: 0; }
.dark .po-ship__alldel { color: oklch(79.2% 0.209 151.711); }
.po-ship__meta { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
.po-ship__eta { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); flex-shrink: 0; }
.po-ship__eta.po-est { color: var(--orange-500); }
.po-ship__wh { color: var(--muted-foreground); font-size: 10px; margin-left: 0.25rem; font-style: normal; }
.po-track { margin-left: 0.25rem; font-size: 11px; color: var(--muted-foreground); flex-shrink: 0; display: flex; align-items: center; gap: 0.25rem; transition: color 150ms; }
.po-track:hover { color: var(--foreground); }
.po-markdel {
  margin-left: 0.25rem; font-size: 11px; color: var(--green-600); flex-shrink: 0; display: flex; align-items: center; gap: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--green-500) 40%, transparent); border-radius: 0.25rem; padding: 0.125rem 0.375rem;
}
.po-markdel:hover { color: var(--green-700); }
.po-markdel--auto { margin-left: auto; }
.dark .po-markdel { color: oklch(79.2% 0.209 151.711); }
.dark .po-markdel:hover { color: var(--green-300); }
.po-leg { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 10%, transparent); }
.po-leg--done { background: color-mix(in oklab, var(--green-500) 10%, transparent); border-color: color-mix(in oklab, var(--green-500) 30%, transparent); }
.po-leg__t { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.po-leg--done .po-leg__t, .po-leg__ok { color: var(--green-600); }
.dark .po-leg--done .po-leg__t, .dark .po-leg__ok { color: oklch(79.2% 0.209 151.711); }
.po-leg__trk { margin-left: 0.5rem; font-size: 11px; font-family: var(--font-mono); color: var(--muted-foreground); }
.po-leg__ok { margin-left: auto; font-size: 11px; font-weight: 600; }
.po-anchor {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 20%, transparent); font-size: 11px; color: var(--muted-foreground);
}
.po-anchor__btn { margin-left: auto; color: var(--muted-foreground); display: flex; align-items: center; transition: color 150ms; }
.po-anchor__btn:hover { color: var(--foreground); }
.po-evs { padding: 0.75rem; }
.po-evlist { display: flex; flex-direction: column; gap: 0.5rem; }
.po-evlist--roomy { gap: 0.625rem; }
.po-ev { display: flex; gap: 0.75rem; }
.po-ev__col { display: flex; flex-direction: column; align-items: center; }
.po-ev__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; margin-top: 0.375rem; flex-shrink: 0; background: color-mix(in oklab, var(--muted-foreground) 30%, transparent); }
.po-ev__dot--first { background: var(--primary); }
.po-ev__line { width: 1px; flex: 1 1 0%; background: var(--border); margin-top: 0.25rem; }
.po-ev__txt { min-width: 0; }
.po-ev__txt--pad { padding-bottom: 0.5rem; }
.po-ev__d { font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.po-ev__m { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.po-ev__m--gap { margin-top: 0.125rem; }
.po-noev { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.po-noev--i { font-style: italic; }
.po-trkrow {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1rem;
  background: color-mix(in oklab, var(--muted) 10%, transparent); border-bottom: 1px solid var(--border);
}
.po-mono-fg { font-family: var(--font-mono); color: var(--foreground); }
.po-trkrow__prov { margin-left: auto; color: var(--muted-foreground); text-transform: capitalize; }
.po-etarow { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.75rem; line-height: 1rem; }
.po-excrow { padding: 0.5rem 0.75rem; background: var(--red-50); border-bottom: 1px solid var(--red-200); font-size: 0.75rem; line-height: 1rem; color: var(--red-700); }
.dark .po-excrow { background: color-mix(in oklab, oklch(25.8% 0.092 26.042) 30%, transparent); border-color: oklch(44.4% 0.177 26.899); color: oklch(70.4% 0.191 22.216); }

/* Line items */
.po-li { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; }
.po-li__t { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.po-li__t thead { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.po-li__t th { padding: 0.5rem 0.75rem; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.po-li__t th.right, .po-li__t td.right { text-align: right; }
.po-li__t td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); }
.po-li__sku { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.po-li__del { color: var(--muted-foreground); font-size: 0.75rem; line-height: 1rem; }
.po-li__del:hover { color: var(--red-500); }
.po-supcard { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem; background: color-mix(in oklab, var(--muted) 10%, transparent); }
.po-suplink { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--primary); }
.po-suplink:hover { text-decoration: underline; }
.po-supterms { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.po-notes { font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); white-space: pre-wrap; }
.po-actions { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.po-act { width: 100%; text-align: left; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid; transition: background-color 150ms; }
.po-act--ok { color: var(--emerald-600); border-color: var(--emerald-200); }
.po-act--ok:hover { background: var(--emerald-50); }
.po-act--del { color: var(--red-600); border-color: var(--red-200); }
.po-act--del:hover { background: var(--red-50); }
.dark .po-act--ok { border-color: var(--emerald-800); }
.dark .po-act--ok:hover { background: color-mix(in oklab, oklch(26.2% 0.051 172.552) 30%, transparent); }
.dark .po-act--del { border-color: oklch(44.4% 0.177 26.899); }
.dark .po-act--del:hover { background: color-mix(in oklab, oklch(25.8% 0.092 26.042) 30%, transparent); }

/* POCalendarView */
.po-cal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.po-cal__nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.po-cal__arrow { padding: 0.25rem; border-radius: 0.25rem; color: var(--muted-foreground); }
.po-cal__arrow:hover { background: var(--muted); color: var(--foreground); }
.po-cal__month { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); min-width: 140px; text-align: center; }
.po-cal__today { font-size: 0.75rem; line-height: 1rem; padding: 0.25rem 0.625rem; border-radius: 0.25rem; border: 1px solid var(--border); color: var(--muted-foreground); }
.po-cal__today:hover { color: var(--foreground); background: var(--muted); }
.po-cal__legend { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 20%, transparent); }
.po-cal__li { display: flex; align-items: center; gap: 0.375rem; }
.po-cal__sw { width: 0.625rem; height: 0.625rem; border-radius: 9999px; }
.po-cal__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.po-cal__dow > div { padding: 0.5rem; text-align: center; font-size: 11px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.po-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.po-cal__day { min-height: 90px; padding: 0.375rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--card); min-width: 0; }
.po-cal__day:nth-child(7n) { border-right: 0; }
.po-cal__day--out { background: color-mix(in oklab, var(--muted) 20%, transparent); }
.po-cal__num {
  width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px;
  margin-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground);
}
.po-cal__num--today { background: var(--primary); color: var(--primary-foreground); }
.po-cal__num--out { color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); }
.po-cal__evs { display: flex; flex-direction: column; gap: 0.125rem; }
.po-cal__ev {
  display: block; width: 100%; text-align: left; font-size: 10px; line-height: 1.25; padding: 0.125rem 0.25rem; border-radius: 0.25rem;
  font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-cal--production { background: var(--green-500); }
.po-cal--etd { background: var(--blue-500); }
.po-cal--delivery { background: var(--orange-500); }
.po-cal--arrived { background: oklch(62.7% 0.265 303.9); }
.po-cal__more { width: 100%; text-align: left; font-size: 10px; padding-left: 0.25rem; color: var(--muted-foreground); }
.po-cal__more:hover { color: var(--foreground); }

/* POModal: "max-w-2xl max-h-[90vh] overflow-y-auto bg-card rounded-lg border shadow-xl p-6" */
dialog.dlg.po-modal { max-width: 42rem; max-height: 90vh; padding: 0; overflow-y: auto; box-shadow: var(--shadow-xl); }
dialog.dlg.po-modal::backdrop { background: rgb(0 0 0 / 0.5); }
.po-form { padding: 1.5rem; }
.po-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.po-modal__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--foreground); }
.po-modal__x { color: var(--muted-foreground); transition: color 150ms; }
.po-modal__x:hover { color: var(--foreground); }
.po-modal__body { display: flex; flex-direction: column; gap: 1rem; }
.po-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.po-g2--3 { gap: 0.75rem; }
.po-flabel { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.po-flabel--flush { margin-bottom: 0; }
.po-input {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.po-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
select.po-input { appearance: auto; }
.po-textarea { resize: none; display: block; }
.po-mt15 { margin-top: 0.375rem; }
.po-modal__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.po-link { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
.po-link:hover { text-decoration: underline; }
.po-items-head { display: grid; grid-template-columns: 2fr 1.5fr 70px 80px 28px; gap: 4px; font-size: 11px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.po-items-rows { display: flex; flex-direction: column; gap: 0.375rem; }
.po-items-row { display: grid; grid-template-columns: 2fr 1.5fr 70px 80px 28px; gap: 0.5rem; align-items: center; }
.po-items-x { color: var(--muted-foreground); }
.po-items-x:hover { color: var(--red-500); }
.po-modal__help { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.po-sfs { display: flex; flex-direction: column; gap: 0.75rem; }
.po-modal__foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
.po-btn-outline { padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--foreground); }
.po-btn-outline:hover { background: var(--muted); }
.po-btn-primary { padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); }
.po-btn-primary:hover { opacity: 0.9; }

/* ShipmentFormCard */
.po-sf { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.po-sf__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; background: color-mix(in oklab, var(--muted) 30%, transparent); }
.po-sf__toggle { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0%; min-width: 0; text-align: left; cursor: pointer; }
.po-sf__title { flex: 1 1 0%; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-sf__remove { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border); }
.po-sf__remove:hover { color: var(--red-500); }
.po-sf__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.po-sf__sec { font-size: 11px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.po-sf__alloc { display: flex; flex-direction: column; gap: 0.375rem; }
.po-sf__arow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.po-sf__asku { width: 6rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-sf__aname { flex: 1 1 0%; min-width: 0; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-sf__qty { width: 5rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); }
.po-sf__qty:focus { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.po-hint { font-size: 11px; line-height: 1rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* PoPdfDropzone */
.po-drop { border-radius: var(--radius-md); border: 1px solid var(--blue-200); background: var(--blue-50); }
.po-drop__target {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); cursor: pointer;
  border: 1px dashed color-mix(in oklab, var(--blue-300) 70%, transparent);
}
.po-drop__target:hover { background: color-mix(in oklab, var(--blue-100) 60%, transparent); }
.po-drop__ic { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md); background: var(--blue-100); color: var(--blue-700); display: flex; align-items: center; justify-content: center; }
.po-drop__t { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--blue-800); }
.po-drop__s { font-size: 11px; line-height: 1rem; color: color-mix(in oklab, var(--blue-700) 80%, transparent); }
.dark .po-drop { border-color: var(--blue-800); background: color-mix(in oklab, oklch(28.2% 0.091 267.935) 40%, transparent); }
.dark .po-drop__target { border-color: color-mix(in oklab, var(--blue-700) 70%, transparent); }
.dark .po-drop__target:hover { background: color-mix(in oklab, oklch(28.2% 0.091 267.935) 60%, transparent); }
.dark .po-drop__ic { background: color-mix(in oklab, var(--blue-900) 60%, transparent); color: var(--blue-300); }
.dark .po-drop__t { color: var(--blue-200); }
.dark .po-drop__s { color: color-mix(in oklab, var(--blue-300) 80%, transparent); }

/* po-color-settings-dialog.tsx */
.po-cs { display: flex; flex-direction: column; gap: 1.5rem; }
.po-cs__h { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.75rem; }
.po-cs__rows { display: flex; flex-direction: column; gap: 0.5rem; }
.po-cs__row {
  display: grid; grid-template-columns: 120px 1fr 1fr 1fr auto auto auto; align-items: center; gap: 0.75rem; padding: 0.25rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
}
.po-cs__row:last-child { border-bottom: 0; }
.po-cs__name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.po-cs__lbl { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 0.25rem; white-space: nowrap; }
.po-color { width: 2rem; height: 2rem; border-radius: 0.25rem; cursor: pointer; border: 1px solid var(--border); padding: 0; background: transparent; }
.po-range { width: 100%; accent-color: var(--primary); }
.po-cs__prevwrap { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; }
.po-cs__prev { flex: 1 1 0%; height: 1.75rem; border-radius: 0.25rem; display: flex; align-items: center; padding: 0 0.5rem; border-left: 3px solid; }
.po-cs__pill { font-size: 10px; font-weight: 500; padding: 0.125rem 0.375rem; border-radius: 9999px; white-space: nowrap; }
.po-cs__prev--draft { background-color: rgba(120, 113, 108, 0); border-left-color: #a8a29e; }
.po-cs__prev--ordered, .po-cs__prev--production, .po-cs__prev--ready_to_ship { background-color: rgba(220, 38, 38, 0.09); border-left-color: #f87171; }
.po-cs__prev--in_transit, .po-cs__prev--customs { background-color: rgba(37, 99, 235, 0.06); border-left-color: #93c5fd; }
.po-cs__prev--arrived { background-color: rgba(22, 163, 74, 0); border-left-color: #86efac; }
.po-cs__prev--delivered { background-color: rgba(5, 150, 105, 0.12); border-left-color: #059669; }
.po-cs__prev--cancelled { background-color: rgba(220, 38, 38, 0); border-left-color: #fca5a5; }
.po-cs__pill--draft { background: #f4f4f5; color: #3f3f46; }
.po-cs__pill--ordered, .po-cs__pill--in_transit { background: #dbeafe; color: #1d4ed8; }
.po-cs__pill--production, .po-cs__pill--ready_to_ship, .po-cs__pill--customs { background: #fef9c3; color: #a16207; }
.po-cs__pill--arrived, .po-cs__pill--delivered { background: #dcfce7; color: #15803d; }
.po-cs__pill--cancelled { background: #fee2e2; color: #b91c1c; }
.po-cs__exc { display: flex; align-items: center; gap: 1.5rem; padding: 0.5rem 0; flex-wrap: wrap; }
.po-cs__excpill { font-size: 0.75rem; line-height: 1rem; font-weight: 500; padding: 0.125rem 0.625rem; border-radius: 9999px; background: #fee2e2; color: #b91c1c; }
.po-cs__locs { display: flex; flex-direction: column; gap: 0.5rem; }
.po-cs__loc { display: flex; align-items: center; gap: 0.75rem; }
.po-cs__input {
  flex: 1 1 0%; min-width: 0; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; background: var(--background);
  border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--foreground);
}
.po-cs__input:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 30%, transparent); }
.po-cs__locc { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
.po-cs__trash { padding: 0.375rem; border-radius: 0.25rem; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.po-cs__trash:hover { color: var(--red-500); background: color-mix(in oklab, var(--red-500) 10%, transparent); }
.po-cs__add { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.po-cs__add:hover { color: var(--foreground); }
.po-cs__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.po-cs__cancel { padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: var(--radius-md); }
.po-cs__cancel:hover { color: var(--foreground); }
.po-cs__save { padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md); }
.po-cs__save:hover { opacity: 0.9; }

/* ---- settings.css ---- */
/* Settings, Team and Workspace — routes/_auth/settings.tsx, settings.team.tsx,
   settings.team.$userId.permissions.tsx, settings.workspace*.tsx, and
   components/permissions/*, components/settings/notifications-tab.tsx. */

.set-maxw-xl { max-width: 36rem; }
.set-maxw-2xl { max-width: 42rem; }
.set-maxw-3xl { max-width: 48rem; }
.set-maxw-880 { max-width: 55rem; }

/* ------------------------------------------------------------------ settings.tsx: tab bar */

.set-tabbar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }
.set-tab {
  padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted-foreground);
  transition: color 150ms, border-color 150ms; white-space: nowrap;
}
.set-tab:hover { color: var(--foreground); }
.set-tab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }

/* AccountTab */

.set-label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.set-input {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.set-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.set-textarea { resize: none; display: block; }
.set-saved { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--green-600); }
.dark .set-saved { color: var(--green-500); }

.set-2fa { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.set-2fa__title { font-size: 0.875rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.set-2fa__desc { font-size: 0.75rem; color: var(--muted-foreground); margin-bottom: 0.75rem; }

/* IntegrationCard + Amazon account rows */

.set-intcards { display: flex; flex-direction: column; gap: 0.5rem; }
.set-intcard { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); flex-wrap: wrap; }
.set-intcard__left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.set-intcard__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; color: var(--foreground); flex-shrink: 0; }
.set-intcard__name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.set-intcard__detail { font-size: 0.75rem; color: var(--muted-foreground); }
.set-intcard__right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.set-intcard__status { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.set-intcard__status.is-on { color: var(--green-600); }
.dark .set-intcard__status.is-on { color: var(--green-500); }

.set-amazon { margin-top: 1.5rem; }
.set-amazon__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.set-amazon__title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.set-amazon__desc { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.set-amazon__actions { display: flex; align-items: center; gap: 0.5rem; }

/* ------------------------------------------------------------------ notifications-tab.tsx */

.set-ncard { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; }
.set-ncard__title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.25rem; }
.set-ncard__desc { font-size: 0.75rem; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.set-checklabel { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--foreground); cursor: pointer; }
.set-checklabel .check { accent-color: var(--primary); }

.set-chanrow { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.set-chan { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; }
.set-chan__name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.set-chan__state { font-size: 0.75rem; color: var(--muted-foreground); }
.set-chan__state.is-ready { color: var(--green-700); }
.dark .set-chan__state.is-ready { color: var(--green-300); }
.set-chan__test { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--primary); }
.set-chan__test:hover { text-decoration: underline; }

.set-group { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.set-group__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: color-mix(in oklab, var(--muted) 40%, transparent); border-bottom: 1px solid var(--border); }
.set-group__title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.set-group__rows > * + * { border-top: 1px solid var(--border); }

.set-trigrow { padding: 1rem; }
.set-trigrow__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.set-trigrow__label { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.set-trigrow__desc { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.set-trigrow__chans { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.set-trigrow__chan { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--foreground); }
.set-trigrow__chan .check { accent-color: var(--primary); }
.set-trigrow__conds { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.set-condgroup { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.set-condlabel { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--foreground); cursor: pointer; }
.set-condlabel .check { accent-color: var(--primary); }
.set-brand-chip { padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--muted-foreground); }
.set-brand-chip.is-on { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--foreground); }
.set-threshold { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
.set-threshold input { width: 3.5rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); }

.set-slackopts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.set-radio { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; cursor: pointer; }
.set-radio input { accent-color: var(--primary); width: 1rem; height: 1rem; }
.set-warn { font-size: 0.75rem; color: var(--amber-700); margin-bottom: 0.5rem; }
.dark .set-warn { color: var(--amber-300); }

.set-quiet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.875rem; margin-top: 0.75rem; }
.set-quiet-row input[type="time"], .set-quiet-row select { padding: 0.375rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); }
.set-quiet-sep { font-size: 0.75rem; color: var(--muted-foreground); }

/* ------------------------------------------------------------------ settings.team.tsx */

.set-teamhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 0.75rem; flex-wrap: wrap; }
.set-count { font-size: 0.875rem; color: var(--muted-foreground); }
.set-count__pending { color: var(--yellow-700); font-weight: 500; }
.dark .set-count__pending { color: var(--yellow-300); }
.set-members { display: flex; flex-direction: column; gap: 0.5rem; }

.set-member { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); flex-wrap: wrap; }
.set-member__left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.set-member__avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 10%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.set-member__avatar span { font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.set-member__meta { min-width: 0; }
.set-member__name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-member__email { font-size: 0.75rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-member__right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.set-member__role { font-size: 0.75rem; color: var(--muted-foreground); text-transform: capitalize; }

.set-permlink { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem; border-radius: var(--radius-sm); color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.set-permlink:hover { color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.set-permlink__label { font-size: 0.75rem; }
.set-iconbtn { padding: 0.375rem; border-radius: var(--radius-sm); color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.set-iconbtn:hover { color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.set-iconbtn.is-danger:hover { color: var(--red-600); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.dark .set-iconbtn.is-danger:hover { color: var(--red-300); }

.set-pending { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); flex-wrap: wrap; }
.set-pending__left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.set-pending__avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: var(--yellow-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--yellow-700); }
.dark .set-pending__avatar { background: color-mix(in oklab, var(--yellow-900) 40%, transparent); color: var(--yellow-300); }
.set-pending__meta { min-width: 0; }
.set-pending__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.set-pending__name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.set-pending__sub { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); flex-wrap: wrap; margin-top: 0.125rem; }
.set-pending__access { font-size: 0.6875rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.set-pending__access strong { color: var(--foreground); font-weight: 500; }
.set-pending__right { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }

.set-invite { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 20%, transparent); }
.set-invite__head { display: flex; align-items: center; gap: 0.5rem; }
.set-invite__head h3 { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.set-invite__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .set-invite__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-invite__field { display: flex; flex-direction: column; gap: 0.25rem; }
.set-invite__label { font-size: 0.6875rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; }
.set-invite__label small { text-transform: none; font-weight: 400; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.set-invite__input { padding: 0.375rem 0.75rem; font-size: 0.875rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); }
.set-invite__hint { font-size: 0.6875rem; color: var(--muted-foreground); }

/* ------------------------------------------------------------------ team member permissions page */

.set-backrow { margin-bottom: 1rem; }
.set-back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); transition: color 150ms; }
.set-back:hover { color: var(--foreground); }

.set-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.set-identity { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 0.75rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); flex-wrap: wrap; }
.set-identity__body { flex: 1 1 0%; min-width: 0; }
.set-identity__name { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.set-identity__email { font-size: 0.75rem; color: var(--muted-foreground); }
.set-identity__badges { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.set-identity__avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.set-identity__avatar span { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }

/* TemplatePicker */

.set-tpl-trigger { min-width: 180px; justify-content: space-between; }
.set-tpl-trigger__label { display: inline-flex; align-items: center; gap: 0.375rem; overflow: hidden; }
.set-menu-72 { width: 18rem; max-height: 24rem; overflow-y: auto; }
.set-menu-label { padding: 0.375rem 0.5rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.set-tpl-opt { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; text-align: left; width: 100%; border-radius: var(--radius-sm); }
.set-tpl-opt.is-selected { background: color-mix(in oklab, var(--accent) 15%, transparent); }
.set-tpl-opt__check { margin-top: 0.125rem; flex-shrink: 0; color: transparent; }
.set-tpl-opt.is-selected .set-tpl-opt__check { color: var(--primary); }
.set-tpl-opt__text { flex: 1 1 0%; min-width: 0; }
.set-tpl-opt__name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-tpl-opt__desc { font-size: 0.6875rem; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.set-tpl-manage { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; font-size: 0.875rem; color: var(--primary); border-radius: var(--radius-sm); }
.set-tpl-manage:hover { background: var(--accent); }

/* PermissionEditor.tsx */

.set-perm { position: relative; }
.set-perm__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 768px) { .set-perm__grid { grid-template-columns: 280px 1fr; } }
.set-perm__rail { display: none; border-right: 1px solid var(--border); padding-right: 1rem; }
@media (min-width: 768px) { .set-perm__rail { display: block; position: sticky; top: 1rem; align-self: flex-start; max-height: calc(100vh - 6rem); overflow-y: auto; } }
.set-perm__mobile { margin-bottom: 1rem; }
@media (min-width: 768px) { .set-perm__mobile { display: none; } }
.set-perm__pane { min-width: 0; }

.set-applist { display: flex; flex-direction: column; gap: 1rem; }
.set-applist__search { position: relative; display: flex; align-items: center; }
.set-applist__search .i { position: absolute; left: 0.625rem; color: var(--muted-foreground); pointer-events: none; }
.set-applist__search input { width: 100%; height: 2rem; padding: 0 0.5rem 0 1.75rem; font-size: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); }
.set-applist__search input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.set-applist__group { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--foreground) 40%, transparent); padding: 0 0.75rem; margin-bottom: 0.375rem; }
.set-applist__items { display: flex; flex-direction: column; gap: 0.125rem; }

.set-app { width: 100%; display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; text-align: left; color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: background-color 150ms, color 150ms; }
.set-app:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.set-app.is-active { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); font-weight: 600; }
.set-app__label { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-app__none { color: color-mix(in oklab, var(--foreground) 30%, transparent); font-size: 0.875rem; }

.set-editor { display: flex; flex-direction: column; gap: 1.5rem; }
.set-editor__head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.set-editor__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--primary) 10%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.set-editor__title { font-size: 1rem; font-weight: 600; color: var(--foreground); }
.set-editor__desc { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.set-h3 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.set-capgroups { display: flex; flex-direction: column; gap: 1.5rem; }

.set-presets { display: inline-flex; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); padding: 0.125rem; gap: 0.125rem; }
.set-preset { padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.25rem; color: var(--muted-foreground); transition: background-color 150ms, color 150ms; white-space: nowrap; }
.set-preset:hover { background: var(--muted); }
.set-preset.is-on { background: var(--primary); color: var(--primary-foreground); }
.set-preset.is-custom { opacity: 0.4; cursor: not-allowed; }
.set-preset.is-custom.is-on { opacity: 1; cursor: default; background: var(--yellow-100); color: var(--yellow-700); }
.dark .set-preset.is-custom.is-on { background: color-mix(in oklab, var(--yellow-900) 40%, transparent); color: var(--yellow-300); }

.set-caps { display: flex; flex-direction: column; gap: 0.125rem; }
.set-cap { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.375rem 0.25rem; border-radius: var(--radius-md); transition: background-color 150ms; cursor: pointer; }
.set-cap:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.set-cap.is-locked { cursor: default; }
.set-cap.is-locked:hover { background: none; }
.set-cap__box { padding-top: 0.125rem; }
.set-cap__box input { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid var(--border); accent-color: var(--primary); }
.set-cap.is-locked .set-cap__box input { opacity: 0.6; }
.set-cap__body { flex: 1 1 0%; min-width: 0; }
.set-cap__row { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.set-cap__label { font-size: 0.875rem; color: var(--foreground); }
.set-cap.is-locked .set-cap__label { color: var(--muted-foreground); }
.set-cap__lock { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); }
.set-cap__info { color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.set-cap__info:hover { color: var(--muted-foreground); }
.set-cap__also { font-size: 0.6875rem; color: var(--muted-foreground); margin-top: 0.125rem; }

.set-hidden { margin-top: 0.5rem; }
.set-sep { height: 1px; background: var(--border); margin-bottom: 1rem; }
.set-hidden__title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.set-hidden__desc { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.set-hidden__rows { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.set-hidden__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-md); }
.set-hidden__row:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.set-hswitch::after { width: 0.875rem; height: 0.875rem; }
.set-hswitch.is-on::after { transform: translateX(1.125rem); }

.set-aitools { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); margin-top: 0.5rem; }
.set-aitools__btn { width: 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); transition: color 150ms; }
.set-aitools__btn:hover { color: var(--foreground); }
.set-aitools__chev { transition: transform 150ms; }
.set-aitools__btn.is-open .set-aitools__chev { transform: rotate(90deg); }
.set-aitools__body { padding: 0 0.75rem 0.75rem 0.75rem; }
.set-aitools__note { font-size: 0.6875rem; color: var(--muted-foreground); line-height: 1.4; margin-bottom: 0.5rem; }
.set-aitools__list { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; }
.set-aitools__list li { border-radius: var(--radius-md); background: var(--muted); padding: 0.125rem 0.5rem; font-size: 0.6875rem; font-family: var(--font-mono); color: var(--muted-foreground); }

dialog.dlg.set-appsheet { max-width: 24rem; max-height: 85vh; overflow-y: auto; padding-top: 2.5rem; }
.set-appsheet__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }

/* SaveAsTemplateDialog.tsx */

dialog.dlg.set-dlg { max-width: 28rem; }
.set-dlg__head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.set-dlg__icon { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 10%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.set-dlg__desc { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.set-dlg__body { display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 0; }
.set-dlg__label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.375rem; }
.set-dlg__opt { font-weight: 400; color: var(--muted-foreground); }
.set-dlg__textarea { resize: none; }
.set-dlg__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); }
.set-dlg__meta--end { justify-content: flex-end; }
.set-dlg__foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }

/* components/confirm-dialog.tsx */

dialog.dlg.set-confirm { max-width: 24rem; }
.set-confirm__row { display: flex; gap: 1rem; }
.set-confirm__icon { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--red-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--red-600); }
.dark .set-confirm__icon { background: color-mix(in oklab, var(--red-900) 40%, transparent); color: var(--red-300); }
.set-confirm__title { font-size: 1rem; font-weight: 600; color: var(--foreground); }
.set-confirm__desc { margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); }
.set-confirm__foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.set-confirm__cancel { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--foreground); }
.set-confirm__cancel:hover { background: var(--muted); }
.set-confirm__ok { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md); background: var(--red-600); color: #fff; transition: background-color 150ms, opacity 150ms; }
.set-confirm__ok:hover { background: var(--red-700); }
.set-confirm__ok.is-primary { background: var(--primary); color: var(--primary-foreground); }
.set-confirm__ok.is-primary:hover { opacity: 0.9; background: var(--primary); }

/* ------------------------------------------------------------------ settings.workspace.tsx: hub cards */

.set-wscards { display: flex; flex-direction: column; gap: 0.75rem; }
.set-wscard { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); transition: background-color 150ms; }
a.set-wscard:hover, button.set-wscard:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
button.set-wscard { width: 100%; text-align: left; font: inherit; }
.set-wscard__icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--primary) 10%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.set-wscard__body { flex: 1 1 0%; min-width: 0; }
.set-wscard__title { display: block; font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.set-wscard__desc { display: block; font-size: 0.75rem; color: var(--muted-foreground); }

/* settings.workspace.permissions.tsx: workspace defaults */

.set-cardrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.set-select { width: 100%; max-width: 24rem; height: 2.25rem; padding: 0 0.75rem; font-size: 0.875rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); }

.set-denials { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.set-denial { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; background: var(--red-100); color: var(--red-700); font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.625rem; transition: background-color 150ms; }
.set-denial:hover { background: var(--red-200); }
.dark .set-denial { background: color-mix(in oklab, var(--red-900) 40%, transparent); color: var(--red-300); }

.set-planapps { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.set-planchip { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); padding: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--foreground); }
.set-planchip.is-excluded { color: var(--muted-foreground); opacity: 0.6; }

dialog.dlg.set-denialsheet { max-width: 28rem; max-height: 85vh; overflow-y: auto; }
.set-denialsheet__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.25rem; }
.set-denialsheet__desc { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.set-denialsheet__body { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.set-denialsheet__apptitle { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.375rem; }
.set-denialsheet__cap { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.875rem; color: var(--foreground); cursor: pointer; }
.set-denialsheet__cap .check { accent-color: var(--primary); }

/* settings.workspace.audit-log.tsx */

.set-auditbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 0.75rem; margin-bottom: 1rem; }
.set-auditfield { display: flex; flex-direction: column; gap: 0.25rem; }
.set-auditfield--grow { flex: 1 1 0%; min-width: 200px; }
.set-auditlabel { display: flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.set-auditfield .field { height: 2rem; font-size: 0.75rem; }
.set-auditfield--grow .search-box, .set-auditfield--grow .field { width: 100%; }
.set-audit__subject--policy { font-style: italic; color: var(--muted-foreground); }
.set-audit__pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }
.set-audit__pagebtns { display: flex; align-items: center; gap: 0.25rem; }

/* settings.workspace.templates.tsx */

.set-sectionhead { margin-bottom: 1rem; }
.set-sectionhead__title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); display: flex; align-items: center; gap: 0.5rem; }
.set-sectionhead__title .i { color: var(--muted-foreground); }
.set-sectionhead__sub { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.set-section + .set-section { margin-top: 2.5rem; }

.set-tplgrid { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .set-tplgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-tplcard { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); transition: box-shadow 150ms; }
.set-tplcard:hover { box-shadow: var(--shadow-sm); }
.set-tplcard__title { display: flex; align-items: center; gap: 0.5rem; }
.set-tplcard__title h3 { font-size: 0.875rem; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-tplcard__desc { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.set-tplcard__meta { display: flex; align-items: center; gap: 1rem; font-size: 0.6875rem; color: var(--muted-foreground); flex-wrap: wrap; }
.set-tplcard__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.set-tplcard__version { margin-left: auto; font-size: 0.625rem; font-family: var(--font-mono); }
.set-tplcard__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* ---- shipping-quote.css ---- */
/* Shipping Quote — routes/_auth/enterprise/shipping-quote.tsx */

.sq-w-full { width: 100%; }
.sq-block { display: block; }
.sq-panel { padding: 1.5rem; }

/* "grid grid-cols-1 lg:grid-cols-2 gap-6" */
.sq-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .sq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Each form section is a real <fieldset>/<legend>: "border rounded-lg p-4" */
.sq-fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; }
.sq-legend { padding: 0 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.sq-flabel { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.sq-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }

/* Product picker: qty stepper and totals */
.sq-qty { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.sq-qty__n { display: inline-block; width: 1.5rem; text-align: center; }
.sq-stepper { padding: 0.125rem; border-radius: 0.25rem; color: var(--muted-foreground); }
.sq-stepper:hover { background: var(--muted); color: var(--foreground); }
.sq-stepper:disabled { opacity: 0.4; pointer-events: none; }

/* Packages */
.sq-pkg { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sq-pkg__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sq-presel { font-size: 0.75rem; line-height: 1rem; padding: 0.25rem 0.5rem; }
.sq-pkg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.sq-addlink { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--blue-600); }
.sq-addlink:hover { color: var(--blue-700); }

/* The one hand-rolled button Dorris draws in blue, not the emerald primary */
.sq-submit {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.625rem 1rem;
  background: var(--blue-600); color: #fff; border-radius: var(--radius-lg); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  transition: background-color 150ms;
}
.sq-submit:hover { background: var(--blue-700); }

.sq-placeholder { padding: 2rem 0; text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

/* Rate results */
.sq-currency { font-size: 0.75rem; line-height: 1rem; padding: 0.25rem 0.5rem; }
.sq-carrier { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 600; white-space: nowrap; color: #fff; }
.sq-carrier--ups { background: #ffb500; }
.sq-carrier--fedex { background: #4d148c; }
.sq-carrier--ltl { background: var(--stone-500); }
.sq-chip { border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.sq-row--best td { background: color-mix(in oklab, var(--green-500) 8%, transparent); }
.sq-best { margin-left: 0.375rem; font-size: 10px; line-height: 1; font-weight: 700; color: var(--green-700); background: var(--green-100); padding: 0.125rem 0.375rem; border-radius: 0.25rem; }
.dark .sq-best { color: var(--green-300); background: color-mix(in oklab, var(--green-900) 40%, transparent); }
.sq-select { font-size: 11px; line-height: 1rem; color: var(--muted-foreground); }
.sq-select:hover { color: var(--blue-600); text-decoration: underline; }

/* Quote History */
.sq-histbtn { display: flex; width: 100%; align-items: center; justify-content: space-between; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.sq-histbtn .i { transition: transform 150ms; }
.sq-histbtn.is-open .i { transform: rotate(90deg); }
.sq-histgrid { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sq-histgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sq-histgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sq-histcard { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1rem; }
.sq-histcard__origin { font-size: 10px; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.125rem; }
.sq-histcard__price { margin-top: 0.25rem; font-weight: 500; color: var(--green-700); }
.dark .sq-histcard__price { color: var(--green-400); }

/* ---- stories.css ---- */
/* Stories — routes/_auth/stories.tsx, spotlight.$playlistId.tsx, components/stories/*,
   components/spotlight/* */

/* StoriesPage: "flex flex-col h-full" */
.st-root { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.st-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.st-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--foreground); }

/* The four underlined tabs */
.st-tabsbar { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
.st-tab { padding: 0.625rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-bottom: 2px solid transparent; color: var(--muted-foreground); white-space: nowrap; transition: color 150ms, border-color 150ms; }
.st-tab:hover { color: var(--foreground); }
.st-tab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }

.st-panelwrap { flex: 1 1 0%; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* Video Library toolbar (ReelGrid) */
.st-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.5rem; flex-wrap: wrap; min-height: 3.375rem; }
.st-toolbar .row { gap: 0.5rem; }
.st-searchbox { width: 15rem; max-width: 100%; }
.st-searchbox .field { display: block; width: 100%; height: 2rem; font-size: 0.875rem; }
.st-chipbtn { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.75rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; background: var(--card); border: 1px solid var(--border); color: var(--foreground); transition: background-color 150ms, color 150ms; }
.st-chipbtn:hover { background: var(--muted); }
.st-chipbtn.is-active, .st-chipbtn.is-active:hover { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.st-sortbtn { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.625rem; border-radius: var(--radius-md); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); }
.st-sortbtn:hover { background: var(--muted); color: var(--foreground); }

/* The grid: "grid-cols-4 sm:5 md:6 lg:7 xl:9 2xl:11 gap-2.5 px-6 pt-5 pb-8" */
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; padding: 1.25rem 1.5rem 2rem; }
@media (min-width: 640px) { .st-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 768px) { .st-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .st-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .st-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .st-grid { grid-template-columns: repeat(11, minmax(0, 1fr)); } }

/* ReelCard: "rounded-[10px] overflow-hidden bg-zinc-900 aspect-[9/16]" */
.st-card { position: relative; border-radius: 0.625rem; overflow: hidden; background: oklch(21% 0.006 285.885); aspect-ratio: 9 / 16; }
.st-card__art { position: absolute; inset: 0; }
.st-card__art svg { display: block; width: 100%; height: 100%; }
.st-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 45%, rgb(0 0 0 / 0.2)); pointer-events: none; }
.st-card__dur { position: absolute; top: 0.375rem; right: 0.375rem; background: rgb(0 0 0 / 0.6); border-radius: 0.25rem; padding: 0.125rem 0.3125rem; font-size: 10px; font-family: var(--font-mono); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.st-card__untagged { position: absolute; top: 0.375rem; left: 0.375rem; display: inline-flex; align-items: center; gap: 3px; padding: 0.125rem 0.4375rem; border-radius: 9999px; font-size: 10px; font-weight: 600; line-height: 1; background: var(--status-yellow-bg); color: var(--status-yellow-fg); }
.st-card__tagged { position: absolute; bottom: 0.375rem; left: 0.375rem; display: inline-flex; align-items: center; gap: 3px; padding: 0.125rem 0.4375rem; border-radius: 9999px; font-size: 10px; font-weight: 600; line-height: 1; background: rgb(0 0 0 / 0.6); color: #fff; }
.st-card__play { position: absolute; inset: 0; margin: auto; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgb(0 0 0 / 0.55); display: flex; align-items: center; justify-content: center; color: #fff; }
.st-card__play .i { margin-left: 1px; }

/* The title lives outside .st-card (which clips to the poster) as a caption underneath —
   Dorris's own ReelCard has no such caption, since a real poster frame carries that meaning;
   with a drawn scene standing in for one, the title is what tells two cards apart. */
.st-tile { display: flex; flex-direction: column; min-width: 0; }
.st-tile__title { margin-top: 0.375rem; font-size: 0.6875rem; line-height: 0.875rem; color: var(--muted-foreground); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Per-product Order (accordion) */
.st-orderwrap { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.st-acc { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); overflow: hidden; }
.st-acc__head { display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; text-align: left; transition: background-color 150ms; }
.st-acc__head:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.st-acc__chev { color: var(--muted-foreground); transition: transform 150ms; flex-shrink: 0; }
.st-acc__chev.is-open { transform: rotate(90deg); }
.st-acc__name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); max-width: 16rem; }
.st-acc__count { flex-shrink: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 9999px; background: var(--muted); color: var(--muted-foreground); }
.st-acc__body { border-top: 1px solid var(--border); padding: 1rem; }
.st-ordergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
@media (min-width: 480px) { .st-ordergrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .st-ordergrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.st-ocard { position: relative; border-radius: 0.5rem; overflow: hidden; background: oklch(21% 0.006 285.885); aspect-ratio: 9 / 16; }
.st-ocard__art { position: absolute; inset: 0; }
.st-ocard__art svg { display: block; width: 100%; height: 100%; }
.st-ocard__grip { position: absolute; top: 0.25rem; right: 0.25rem; z-index: 1; width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; background: rgb(0 0 0 / 0.5); color: #fff; display: flex; align-items: center; justify-content: center; }

/* Integrations (connected state only — no third-party click-path) */
.st-intwrap { padding: 1.5rem; max-width: 32rem; }
.st-connrow { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.st-connrow__ic { display: inline-flex; color: var(--foreground); }

/* Spotlight (PlaylistList) */
.st-spotwrap { padding: 1.5rem; max-width: 56rem; margin: 0 auto; width: 100%; }
.st-rowactions { justify-content: flex-end; }

/* Playlist detail (PlaylistDetail) — its own page, no Stories tab bar */
.st-detail { max-width: 42rem; margin: 0 auto; }
.st-back { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1.5rem; }
.st-back:hover { color: var(--foreground); }
.st-namefield { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0.125rem 0.375rem; margin-left: -0.375rem; background: transparent; color: var(--foreground); }
.st-namefield:hover, .st-namefield:focus { border-color: var(--border); outline: none; }
.st-slugfield { font-size: 0.75rem; border: none; border-bottom: 1px solid transparent; background: transparent; color: var(--muted-foreground); padding: 0 0.125rem; }
.st-slugfield:hover, .st-slugfield:focus { border-bottom-color: var(--muted-foreground); outline: none; }
.st-descfield { width: 100%; font-size: 0.875rem; color: var(--muted-foreground); border: none; border-bottom: 1px solid transparent; background: transparent; resize: none; padding: 0.125rem; }
.st-descfield:hover, .st-descfield:focus { border-bottom-color: var(--muted-foreground); outline: none; }
.st-idcard { padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.st-idcode { font-family: var(--font-mono); font-size: 0.875rem; word-break: break-all; }
.st-vrow { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.st-vrow__grip { color: var(--muted-foreground); flex-shrink: 0; cursor: grab; }
.st-vrow__art { position: relative; width: 2.5rem; height: 3.5rem; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: oklch(21% 0.006 285.885); }
.st-vrow__art svg { display: block; width: 100%; height: 100%; }

@media (max-width: 480px) { .st-acc__name { max-width: 8rem; } }

/* ---- suppliers.css ---- */
/* Suppliers — routes/_auth/suppliers.tsx */

.sup-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.sup-search { flex: 1 1 0%; min-width: 160px; max-width: 20rem; }
.sup-cat { margin-left: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.sup-contact { min-width: 0; }
.sup-chev { display: flex; justify-content: flex-end; color: var(--muted-foreground); }

/* SupplierFormPanel */
.sup-form { padding: 1.5rem; max-width: 48rem; }
.sup-form__title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.sup-section {
  font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em;
  color: var(--muted-foreground); margin: 1.25rem 0 0.75rem; border-top: 1px solid var(--border); padding-top: 1rem;
}
.sup-form__title + .sup-section { border-top: 0; padding-top: 0; margin-top: 0; }
.sup-label { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; }
.sup-label--inline { display: inline; margin-bottom: 0; }
.sup-input {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
}
.sup-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.sup-input--sm { padding: 0.375rem 0.5rem; }
.sup-input--sm:focus { box-shadow: 0 0 0 1px var(--ring); }
.sup-textarea { resize: none; display: block; }
.sup-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sup-grid-3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sup-grid-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sup-grid-2 .span-2, .sup-grid-4 .span-2 { grid-column: span 2 / span 2; }
.sup-grid-3 .span-2-sm { grid-column: span 2 / span 2; }
@media (min-width: 640px) {
  .sup-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sup-grid-3 .span-2-sm { grid-column: span 1 / span 1; }
  .sup-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sup-add {
  width: 100%; padding: 0.5rem 0; border: 1px dashed var(--border); border-radius: var(--radius-md);
  font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); transition: color 150ms, border-color 150ms;
}
.sup-add:hover { color: var(--foreground); border-color: var(--foreground); }
.sup-product { display: flex; gap: 0.5rem; align-items: flex-start; }
.sup-product__name { flex: 2 1 0%; }
.sup-linked { padding: 0.125rem 0.375rem; font-size: 0.625rem; line-height: 1; border-radius: var(--radius-sm); background: var(--green-100); color: var(--green-700); font-weight: 500; }
.dark .sup-linked { background: color-mix(in oklab, var(--green-900) 40%, transparent); color: var(--green-300); }
.sup-remove { margin-top: 1.5rem; color: var(--muted-foreground); flex-shrink: 0; }
.sup-remove:hover { color: var(--red-500); }
.sup-hint { font-size: 0.6875rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.sup-meta { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.sup-po-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
.sup-po-link:hover { text-decoration: underline; }
.sup-actions { margin-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 1rem; }
.sup-delete { font-size: 0.875rem; color: var(--red-600); }
.sup-delete:hover { color: var(--red-700); }
.dark .sup-delete { color: oklch(70.4% 0.191 22.216); }

/* ---- support.css ---- */
/* Support — routes/_auth/support*.tsx and components/support/**. Class names are ours (sp-),
   values are the ones Dorris's Tailwind classes resolve to (lib/support/styles.ts for colors). */

.sp-shell {
  display: flex; flex: 1 1 0%; min-height: 0; flex-direction: column;
  /* Tailwind v4 shades the base stylesheet does not carry. */
  --sp-violet-300: oklch(81.1% 0.111 293.571); --sp-violet-500: oklch(60.6% 0.25 292.717); --sp-violet-900: oklch(38% 0.189 293.745);
  --sp-rose-300: oklch(81% 0.117 11.638); --sp-rose-900: oklch(41% 0.159 10.272);
  --sp-teal-300: oklch(85.5% 0.138 181.071); --sp-teal-500: oklch(70.4% 0.14 182.503); --sp-teal-900: oklch(38.6% 0.063 188.416);
  --sp-sky-300: oklch(82.8% 0.111 230.318); --sp-sky-400: oklch(74.6% 0.16 232.661); --sp-sky-500: oklch(68.5% 0.169 237.323);
  --sp-sky-600: oklch(58.8% 0.158 241.966); --sp-sky-800: oklch(44.3% 0.11 240.79); --sp-sky-900: oklch(39.1% 0.09 240.876);
  --sp-amber-400: oklch(82.8% 0.189 84.429); --sp-amber-900: oklch(41.4% 0.112 45.904); --sp-amber-950: oklch(27.9% 0.077 45.635);
  --sp-emerald-300: oklch(84.5% 0.143 164.978); --sp-emerald-400: oklch(76.5% 0.177 163.223); --sp-emerald-900: oklch(37.8% 0.077 168.94);
  --sp-emerald-950: oklch(26.2% 0.051 172.552);
  --sp-stone-300: oklch(86.9% 0.005 56.366);
  --sp-zinc-200: oklch(92% 0.004 286.32);
  --sp-indigo-300: oklch(78.5% 0.115 274.713);
  --sp-yellow-300: oklch(90.5% 0.182 98.111);
  --sp-acme: #d17046;
}

/* support-sub-nav.tsx: the count pill's dark colors */
.dark .sp-shell .subnav__count { background: color-mix(in oklab, var(--primary) 20%, transparent); color: var(--sp-emerald-300); }

/* small shared bits */
.sp-muted { color: var(--muted-foreground); }
.sp-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-inline { display: inline; }
.sp-ml-auto { margin-left: auto; }
.sp-mt-px { margin-top: 1px; }
.sp-mt1 { margin-top: 0.25rem; }
.sp-mt15 { margin-top: 0.375rem; }
.sp-mt2 { margin-top: 0.5rem; }
.sp-mt3 { margin-top: 0.75rem; }
.sp-mt35 { margin-top: 0.875rem; }
.sp-mt4 { margin-top: 1rem; }
.sp-mb1 { margin-bottom: 0.25rem; }
.sp-i11 { width: 11px; height: 11px; }
.sp-i13 { width: 13px; height: 13px; }
.sp-i15 { width: 15px; height: 15px; }
.sp-tiny { font-size: 11px; color: var(--muted-foreground); }
.sp-is-dim { opacity: 0.5; cursor: not-allowed; }
.sp-check { width: 0.875rem; height: 0.875rem; cursor: pointer; accent-color: var(--primary); }
.sp-t2 { display: none; }
.is-open > .sp-t1, .is-open .sp-t1 { display: none; }
.is-open > .sp-t2, .is-open .sp-t2 { display: inline; }

/* shared/pill.tsx — PILL_BASE plus the tone pairs in lib/support/styles.ts */
.sp-pill {
  display: inline-flex; flex-shrink: 0; align-items: center; border-radius: 9999px; padding: 2px 7px;
  font-size: 10px; font-weight: 600; line-height: 1rem; white-space: nowrap;
}
.sp-pill__i { margin-right: 0.25rem; width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
.sp-pill--acme { background: #fbe9e1; color: #a34e28; }
.dark .sp-pill--acme { background: color-mix(in oklab, #d17046 25%, transparent); color: #f0a882; }
.sp-pill--northbound, .sp-pill--form { background: var(--teal-100); color: var(--teal-700); }
.dark .sp-pill--northbound, .dark .sp-pill--form { background: color-mix(in oklab, var(--sp-teal-900) 40%, transparent); color: var(--sp-teal-300); }
.sp-pill--open, .sp-pill--blue { background: var(--blue-100); color: var(--blue-700); }
.dark .sp-pill--open, .dark .sp-pill--blue { background: color-mix(in oklab, var(--blue-900) 40%, transparent); color: var(--blue-300); }
.sp-pill--snoozed, .sp-pill--orange { background: var(--orange-100); color: var(--orange-700); }
.dark .sp-pill--snoozed, .dark .sp-pill--orange { background: color-mix(in oklab, var(--orange-900) 40%, transparent); color: var(--orange-300); }
.sp-pill--closed, .sp-pill--theirs, .sp-pill--idle, .sp-pill--gray { background: var(--zinc-100); color: var(--zinc-700); }
.dark .sp-pill--closed, .dark .sp-pill--theirs, .dark .sp-pill--idle, .dark .sp-pill--gray { background: var(--zinc-800); color: var(--zinc-300); }
.sp-pill--mine { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--emerald-700); }
.dark .sp-pill--mine { background: color-mix(in oklab, var(--primary) 20%, transparent); color: var(--sp-emerald-300); }
.sp-pill--chat { background: var(--violet-100); color: var(--violet-700); }
.dark .sp-pill--chat { background: color-mix(in oklab, var(--sp-violet-900) 40%, transparent); color: var(--sp-violet-300); }
.sp-pill--sms { background: var(--sky-100); color: var(--sky-700); }
.dark .sp-pill--sms { background: color-mix(in oklab, var(--sp-sky-900) 40%, transparent); color: var(--sp-sky-300); }
.sp-pill--ig-comment { color: var(--rose-700); box-shadow: inset 0 0 0 1px var(--sp-rose-300); }
.dark .sp-pill--ig-comment { color: var(--sp-rose-300); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rose-700) 60%, transparent); }
.sp-pill--ig-dm { background: var(--rose-100); color: var(--rose-700); }
.dark .sp-pill--ig-dm { background: color-mix(in oklab, var(--sp-rose-900) 40%, transparent); color: var(--sp-rose-300); }
.sp-pill--fb-dm { background: var(--blue-100); color: var(--blue-700); }
.dark .sp-pill--fb-dm { background: color-mix(in oklab, var(--blue-900) 40%, transparent); color: var(--blue-300); }
.sp-pill--green, .sp-pill--live { background: var(--green-100); color: var(--green-700); }
.dark .sp-pill--green, .dark .sp-pill--live { background: color-mix(in oklab, var(--green-900) 40%, transparent); color: var(--green-300); }
.sp-pill--yellow, .sp-pill--pending-agent { background: var(--yellow-100); color: var(--yellow-700); }
.dark .sp-pill--yellow, .dark .sp-pill--pending-agent { background: color-mix(in oklab, var(--yellow-900) 40%, transparent); color: var(--sp-yellow-300); }
.sp-pill--ai { background: var(--indigo-100); color: var(--indigo-700); }
.dark .sp-pill--ai { background: color-mix(in oklab, var(--indigo-900) 40%, transparent); color: var(--sp-indigo-300); }
.sp-pill--red { background: var(--red-100); color: var(--red-700); }
.dark .sp-pill--red { background: color-mix(in oklab, var(--red-900) 40%, transparent); color: var(--red-300); }

/* shared/avatar-circle.tsx — AVATAR_BASE, sized by prop (font is 34% of the size) */
.sp-av { display: flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 700; }
.sp-av--26 { width: 26px; height: 26px; font-size: 9px; }
.sp-av--30 { width: 30px; height: 30px; font-size: 10px; }
.sp-av--32 { width: 32px; height: 32px; font-size: 11px; }
.sp-av--42 { width: 42px; height: 42px; font-size: 14px; }
.sp-av--acme { background: #fbe9e1; color: #a34e28; }
.dark .sp-av--acme { background: color-mix(in oklab, #d17046 25%, transparent); color: #f0a882; }
.sp-av--northbound { background: var(--teal-100); color: var(--teal-700); }
.dark .sp-av--northbound { background: color-mix(in oklab, var(--sp-teal-900) 40%, transparent); color: var(--sp-teal-300); }
.sp-av--agent { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--emerald-700); }
.dark .sp-av--agent { background: color-mix(in oklab, var(--primary) 20%, transparent); color: var(--sp-emerald-300); }
.sp-av--plain { border: 1px solid var(--border); background: var(--muted); color: var(--foreground); }

/* the details cards' small section label */
.sp-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-subtle); }

/* ticket-controls.tsx */
.sp-sel {
  height: 30px; cursor: pointer; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card);
  padding: 0 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--foreground); max-width: 100%;
}
.sp-sel--status { font-weight: 600; }
.sp-st--open { background: var(--blue-100); color: var(--blue-700); }
.sp-st--snoozed { background: var(--orange-100); color: var(--orange-700); }
.sp-st--closed { background: var(--zinc-100); color: var(--zinc-700); }
.dark .sp-st--open { background: color-mix(in oklab, var(--blue-900) 40%, var(--card)); color: var(--blue-300); }
.dark .sp-st--snoozed { background: color-mix(in oklab, var(--orange-900) 40%, var(--card)); color: var(--orange-300); }
.dark .sp-st--closed { background: var(--zinc-800); color: var(--zinc-300); }
.sp-sqbtn {
  display: flex; width: 30px; height: 30px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
}
.sp-sqbtn:hover { background: var(--muted); }

/* ui/dropdown-menu.tsx as the thread header and comment menus use it */
.sp-menu.menu__content { width: 206px; }
.sp-menu--cm.menu__content { width: 212px; }
.sp-mi {
  display: flex; width: 100%; cursor: pointer; align-items: center; gap: 0.625rem; border-radius: var(--radius-sm);
  padding: 0.375rem 0.5rem; font-size: 12.5px; line-height: 1.25rem; text-align: left; color: var(--card-foreground);
}
.sp-mi:hover { background: var(--accent); color: var(--accent-foreground); }
.sp-mi--danger { color: var(--destructive); }

/* ------------------------------------------------------------------ inbox-workspace.tsx */

.sp-ws { display: flex; flex: 1 1 0%; min-height: 0; overflow-x: auto; overflow-y: hidden; }
/* RESIZER_CLASS */
.sp-resizer {
  position: relative; z-index: 5; margin: 0 -2px; width: 5px; flex-shrink: 0; cursor: col-resize;
  border-right: 1px solid var(--border); background: transparent;
}
.sp-resizer:hover { background: color-mix(in oklab, var(--primary) 20%, transparent); }

/* ------------------------------------------------------------------ views-panel.tsx */

.sp-views { display: flex; width: 200px; flex-shrink: 0; flex-direction: column; overflow-y: auto; background: var(--card); padding: 0.75rem 0.5rem; }
.sp-sec { padding: 0 0.5rem 0.375rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-subtle); }
.sp-vgroup { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.sp-vrows { display: flex; flex-direction: column; gap: 0.125rem; }
.sp-vrow {
  display: flex; cursor: pointer; align-items: center; gap: 9px; border-radius: var(--radius-md); padding: 0.375rem 0.5rem;
  font-size: 12.5px; font-weight: 500; color: color-mix(in oklab, var(--foreground) 70%, transparent);
}
.sp-vrow:hover { background: var(--muted); }
.sp-vrow.is-active { background: color-mix(in oklab, var(--primary) 10%, transparent); font-weight: 600; color: var(--primary); }
.sp-vrow__label { min-width: 0; flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-vrow__hide { display: none; flex-shrink: 0; color: var(--muted-foreground); }
.sp-vrow:hover .sp-vrow__count, .sp-vrow:focus-within .sp-vrow__count { display: none; }
.sp-vrow:hover .sp-vrow__hide, .sp-vrow:focus-within .sp-vrow__hide { display: block; }
.sp-cnt { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.sp-cnt--hot {
  display: inline-block; min-width: 19px; flex-shrink: 0; border-radius: 9999px; background: var(--red-600); padding: 1px 0.375rem;
  text-align: center; font-size: 10px; font-weight: 700; line-height: 15px; color: #fff;
}
.dark .sp-cnt--hot { background: var(--red-500); }
.sp-dot { width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 9999px; }
.sp-dot--acme { background: #d17046; }
.sp-dot--northbound { background: #0d9488; }
.sp-vhead { display: flex; align-items: center; padding: 0 0.5rem 0.375rem; }
.sp-vhead .sp-sec { flex: 1 1 0%; padding: 0; }
.sp-vhead__add { display: flex; color: var(--muted-foreground); }
.sp-vhead__add:hover { color: var(--foreground); }
.sp-newview {
  display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); padding: 0.375rem 0.5rem; text-align: left;
  font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--muted-foreground);
}
.sp-newview:hover { background: var(--muted); }

/* ------------------------------------------------------------------ conversation-list.tsx */

.sp-list { display: flex; width: 344px; flex-shrink: 0; flex-direction: column; overflow: hidden; background: var(--card); }
.sp-list__bar { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding: 0.625rem 0.75rem; }
.sp-search {
  display: flex; height: 2rem; min-width: 0; flex: 1 1 0%; align-items: center; gap: 7px; border-radius: var(--radius-md);
  border: 1px solid var(--border); padding: 0 0.625rem; color: var(--muted-foreground);
}
.sp-search input { min-width: 0; flex: 1 1 0%; background: transparent; font-size: 0.75rem; line-height: 1rem; color: var(--foreground); outline: none; }
.sp-sq {
  display: flex; width: 2rem; height: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md);
  border: 1px solid var(--border); color: var(--muted-foreground);
}
.sp-sq:hover { background: var(--muted); }
.sp-sq--new { border: 0; background: var(--primary); color: #fff; transition: opacity 150ms; }
.sp-sq--new:hover { background: var(--primary); opacity: 0.9; }

/* view-edit-bar.tsx FolderEditBar */
.sp-fbar { flex-shrink: 0; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); }
.sp-fbar__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; }
.sp-fbar__btn { display: flex; min-width: 0; flex: 1 1 0%; cursor: pointer; align-items: center; gap: 0.375rem; text-align: left; }
.sp-fbar__btn .sp-chev { transition: transform 150ms; }
.sp-fbar__btn.is-open .sp-chev { transform: rotate(90deg); }
.sp-fbar__name { flex-shrink: 0; font-size: 11.5px; font-weight: 600; }
.sp-fbar__sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-fedit { border-top: 1px solid var(--border); padding: 0.625rem 0.75rem; }
.sp-fedit__empty { padding: 0.25rem 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--stone-400); }
.dark .sp-fedit__empty { color: var(--stone-500); }
.sp-fedit__add {
  margin-top: 0.5rem; display: flex; cursor: pointer; align-items: center; gap: 0.375rem; border-radius: var(--radius-lg);
  border: 1px dashed var(--border); padding: 0.375rem 0.625rem; font-size: 12px; color: var(--muted-foreground);
}
.sp-fedit__add:hover { background: var(--muted); color: var(--foreground); }
.sp-fedit__foot { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.625rem; font-size: 11px; color: var(--muted-foreground); }

/* ListHeader */
.sp-lhead {
  display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border);
  background: var(--card); padding: 0.5rem 0.875rem; font-size: 0.75rem; line-height: 1rem;
}
.sp-list__scroll { flex: 1 1 0%; overflow-y: auto; }
.sp-list__foot { flex-shrink: 0; border-top: 1px solid var(--border); padding: 0.5rem 0.875rem; text-align: center; font-size: 10.5px; color: var(--muted-foreground); }

/* conversation-row.tsx (SELECTED_ROW / UNSELECTED_ROW) */
.sp-conv { position: relative; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.sp-row { display: block; width: 100%; border-left: 2px solid transparent; background: var(--card); padding: 0.75rem 0.875rem; text-align: left; }
.sp-row:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.sp-row.is-selected { border-left-color: var(--primary); background: color-mix(in oklab, var(--primary) 6%, transparent); }
.sp-row__in { display: flex; align-items: flex-start; gap: 0.625rem; }
.sp-row__av { display: flex; flex-shrink: 0; transition: opacity 150ms; }
.sp-conv:hover .sp-row__av, .sp-conv:focus-within .sp-row__av { opacity: 0; }
.sp-conv__check {
  position: absolute; left: 15px; top: 19px; display: flex; width: 1rem; height: 1rem; cursor: pointer; align-items: center;
  justify-content: center; opacity: 0; transition: opacity 150ms;
}
.sp-conv:hover .sp-conv__check, .sp-conv:focus-within .sp-conv__check { opacity: 1; }
.sp-row__main { display: block; min-width: 0; flex: 1 1 0%; }
.sp-row__top { display: flex; align-items: center; gap: 0.375rem; }
.sp-unreplied { width: 7px; height: 7px; flex-shrink: 0; border-radius: 9999px; background: var(--primary); }
.sp-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.sp-row__time { margin-left: auto; flex-shrink: 0; font-size: 11px; color: var(--muted-foreground); }
.sp-row__subj { margin-top: 3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; }
.sp-row__snip { margin-top: 0.125rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.sp-row__meta { margin-top: 7px; display: flex; align-items: center; gap: 0.375rem; }
.sp-row__asg { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; font-size: 11px; color: var(--muted-foreground); }

/* ------------------------------------------------------------------ thread-panel.tsx */

.sp-thread { display: flex; min-width: 420px; flex: 1 1 0%; flex-direction: column; overflow: hidden; background: var(--background); }
.sp-thread__scroll { display: flex; flex: 1 1 0%; flex-direction: column; overflow-y: auto; background: var(--card); }

/* thread-header.tsx */
.sp-th { display: flex; height: 3.5rem; flex-shrink: 0; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border); background: var(--card); padding: 0 1rem; }
.sp-th__main { min-width: 0; flex: 1 1 0%; }
.sp-th__top { display: flex; align-items: center; gap: 7px; }
.sp-th__subj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.sp-th__sub { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-th__ctl { display: flex; flex-shrink: 0; align-items: center; gap: 0.375rem; }
/* presence-stack.tsx */
.sp-presence { display: flex; flex-shrink: 0; align-items: center; }
.sp-presence .sp-av { box-shadow: 0 0 0 2px var(--card); }
.sp-presence .sp-av + .sp-av { margin-left: -0.5rem; }

/* MailboxBanner */
.sp-mailbox {
  display: flex; flex-shrink: 0; align-items: center; gap: 0.625rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 50%, transparent); padding: 0.625rem 1.125rem; color: var(--muted-foreground);
}
.sp-mailbox__name { font-size: 12.5px; font-weight: 600; color: var(--foreground); }
.sp-mailbox__addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); }

/* thread-summary-block.tsx */
.sp-sum { flex-shrink: 0; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--emerald-600) 4%, transparent); }
.dark .sp-sum { background: color-mix(in oklab, var(--sp-emerald-400) 5%, transparent); }
.sp-sum__btn { display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; text-align: left; }
.sp-sum__ic { color: var(--emerald-600); }
.dark .sp-sum__ic { color: var(--sp-emerald-400); }
.sp-sum__title { font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--emerald-700); }
.dark .sp-sum__title { color: var(--sp-emerald-400); }
.sp-sum__age { font-size: 11px; color: var(--muted-foreground); }
.sp-sum__chev { margin-left: auto; display: flex; flex-shrink: 0; color: var(--muted-foreground); transition: transform 150ms; }
.sp-sum__btn.is-open .sp-sum__chev { transform: rotate(180deg); }
.sp-sum__body { padding: 0 1.125rem 0.875rem 39px; }
.sp-sum__text { white-space: pre-wrap; font-size: 13px; line-height: 1.7; color: var(--foreground); }
.sp-sum__regen {
  margin-top: 11px; display: inline-flex; height: 26px; align-items: center; gap: 5px; border-radius: 9999px;
  border: 1px solid var(--emerald-200); background: #fff; padding: 0 0.625rem; font-size: 11px; font-weight: 600; color: var(--emerald-700);
}
.sp-sum__regen:hover { background: var(--emerald-50); }
.dark .sp-sum__regen { border-color: var(--emerald-800); background: transparent; color: var(--emerald-200); }
.dark .sp-sum__regen:hover { background: color-mix(in oklab, var(--sp-emerald-950) 50%, transparent); }

/* thread-message.tsx: a <details>, so a collapsed message opens in place */
.sp-msg { border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.sp-msg[open] { background: var(--card); padding: 0.875rem 1.125rem 1.5rem; }
.sp-msg > summary { cursor: pointer; list-style: none; }
.sp-msg > summary::-webkit-details-marker { display: none; }
.sp-msg:not([open]) > summary { padding: 0.75rem 1.125rem; }
.sp-msg__closed { display: flex; width: 100%; align-items: center; gap: 0.75rem; }
.sp-msg__open { display: flex; width: 100%; align-items: flex-start; gap: 0.75rem; }
.sp-msg[open] .sp-msg__closed, .sp-msg:not([open]) .sp-msg__open { display: none; }
.sp-msg__cmain, .sp-msg__omain { min-width: 0; flex: 1 1 0%; }
.sp-msg__cname { display: block; font-size: 13px; font-weight: 700; }
.sp-msg__oname { font-size: 13px; font-weight: 700; }
.sp-msg__snip { margin-top: 0.125rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted-foreground); }
.sp-msg__time { white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-msg__clip { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-msg__line1 { display: flex; align-items: baseline; gap: 0.5rem; }
.sp-msg__to { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.375rem; }
.sp-msg__toaddr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-msg__body { padding: 1.125rem 0 0 2.75rem; }
.sp-msg__text { white-space: pre-wrap; overflow-wrap: break-word; font-size: 13.5px; line-height: 1.75; }
.sp-msg__acts { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.75rem; }
.sp-msg__more { font-size: 11px; font-weight: 600; letter-spacing: 0.025em; color: var(--muted-foreground); }
.sp-msg__more:hover { color: var(--foreground); }
.sp-fwd {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.375rem; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); padding: 0.25rem 0.5rem; font-size: 11px; font-weight: 600; color: var(--muted-foreground);
  transition: color 150ms, background-color 150ms;
}
.sp-fwd:hover { background: var(--muted); color: var(--foreground); }

/* message-attachments.tsx */
.sp-att { margin-top: 0.875rem; }
.sp-att__label { margin-bottom: 0.375rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.sp-att__list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; }
.sp-att__chip {
  display: flex; max-width: 100%; align-items: center; gap: 0.5rem; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--muted) 40%, transparent); padding: 0.5rem 0.625rem; font-size: 12px; transition: background-color 150ms;
}
.sp-att__chip:hover { background: var(--muted); }
.sp-att__txt { min-width: 0; }
.sp-att__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sp-att__size { display: block; font-size: 11px; color: var(--muted-foreground); }

/* ThreadNote (NOTE_SURFACE / NOTE_TEXT) */
.sp-note { border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: var(--card); }
.sp-note__in { padding: 0.75rem 1.125rem; }
.sp-note__box { border-radius: 10px; border: 1px solid var(--amber-200); background: var(--amber-50); padding: 0.625rem 0.875rem; }
.dark .sp-note__box { border-color: color-mix(in oklab, var(--sp-amber-900) 50%, transparent); background: color-mix(in oklab, var(--sp-amber-950) 30%, transparent); }
.sp-note__head { margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.375rem; color: var(--amber-800); }
.dark .sp-note__head { color: var(--amber-200); }
.sp-note__head span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.sp-note__body { white-space: pre-wrap; font-size: 13px; line-height: 1.625; }

/* ai-assist.tsx: ThreadAiBar and AiResultCard */
.sp-aibar { flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--card); padding: 0.5rem 1rem; }
.sp-aibar__row { display: flex; align-items: center; gap: 0.375rem; }
.sp-aipill {
  display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid var(--border);
  padding: 0.25rem 0.625rem; font-size: 11.5px; font-weight: 600; color: var(--foreground);
}
.sp-aipill:hover { background: var(--muted); }
.sp-aicard {
  border-radius: var(--radius-lg); border: 1px solid var(--sp-emerald-300); background: var(--emerald-50); padding: 0.75rem;
  font-size: 13px; line-height: 1.625; color: var(--sp-emerald-950);
}
.dark .sp-aicard { border-color: var(--emerald-800); background: color-mix(in oklab, var(--sp-emerald-950) 30%, transparent); color: var(--emerald-100); }
.sp-aicard__head { margin-bottom: 0.375rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sp-aicard__kind { display: flex; align-items: center; gap: 0.375rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--emerald-700); }
.dark .sp-aicard__kind { color: var(--sp-emerald-400); }
.sp-aicard__x { color: color-mix(in oklab, var(--emerald-700) 70%, transparent); }
.sp-aicard__x:hover { color: var(--sp-emerald-900); }
.dark .sp-aicard__x { color: color-mix(in oklab, var(--sp-emerald-400) 70%, transparent); }
.sp-aicard__text { white-space: pre-wrap; }
.sp-aicard__acts { margin-top: 0.625rem; display: flex; align-items: center; gap: 0.5rem; }
.sp-aicard__insert { border-radius: var(--radius-md); background: var(--emerald-700); padding: 0.25rem 0.625rem; font-size: 11.5px; font-weight: 600; color: #fff; }
.sp-aicard__insert:hover { background: var(--emerald-800); }
.dark .sp-aicard__insert { background: var(--emerald-600); }
.dark .sp-aicard__insert:hover { background: var(--emerald-500); }
.sp-aicard__dismiss {
  border-radius: var(--radius-md); border: 1px solid var(--sp-emerald-300); background: #fff; padding: 0.25rem 0.625rem;
  font-size: 11.5px; font-weight: 600; color: var(--emerald-800);
}
.sp-aicard__dismiss:hover { background: var(--emerald-100); }
.dark .sp-aicard__dismiss { border-color: var(--emerald-800); background: transparent; color: var(--emerald-200); }

/* composer.tsx */
.sp-comp { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--card); padding: 0.75rem 1rem 0.875rem; }
.sp-comp__box { overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: var(--card); }
.sp-comp__box--note { background: var(--amber-50); }
.dark .sp-comp__box--note { background: color-mix(in oklab, var(--sp-amber-950) 30%, transparent); }
/* composer-tabs.tsx */
.sp-comp__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.125rem; border-bottom: 1px solid var(--border); padding: 0.375rem 0.5rem; }
.sp-ctab {
  height: 26px; border-radius: var(--radius-md); padding: 0 0.625rem; font-size: 11.5px; font-weight: 600; color: var(--muted-foreground);
  transition: color 150ms, background-color 150ms;
}
.sp-ctab:hover { color: var(--foreground); }
.sp-ctab.is-active { background: var(--foreground); color: var(--background); }
.sp-tochip {
  margin-left: 0.5rem; display: inline-flex; min-width: 0; max-width: 280px; align-items: center; gap: 0.25rem; border-radius: 9999px;
  border: 1px solid transparent; background: var(--zinc-100); padding: 3px 0.5rem; font-size: 11px; color: var(--stone-600);
  transition: background-color 150ms;
}
.sp-tochip:hover { background: var(--sp-zinc-200); }
.dark .sp-tochip { background: var(--zinc-800); color: var(--sp-stone-300); }
.dark .sp-tochip:hover { background: var(--zinc-700); }
.sp-comp__acts { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }
.sp-cact {
  display: flex; height: 26px; align-items: center; gap: 0.375rem; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); padding: 0 0.625rem; font-size: 11px; font-weight: 500; color: var(--foreground); transition: background-color 150ms;
}
.sp-cact:hover { background: var(--muted); }
.sp-ctrash {
  display: flex; width: 26px; height: 26px; cursor: default; align-items: center; justify-content: center; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card); color: var(--sp-stone-300);
}
.dark .sp-ctrash { color: var(--stone-600); }
/* composer-format-row.tsx and shared/format-toolbar.tsx */
.sp-comp__fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; border-bottom: 1px solid var(--border); padding: 0.25rem 0.5rem; }
.sp-fsize {
  margin-right: 0.25rem; height: 26px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card);
  padding: 0 0.375rem; font-size: 11px; color: var(--stone-600);
}
.dark .sp-fsize { color: var(--sp-stone-300); }
.sp-ftool {
  display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: var(--radius-md);
  color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.sp-ftool:hover { background: var(--muted); color: var(--foreground); }
.sp-fattach {
  margin-left: 0.25rem; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center;
  border-radius: var(--radius-md); color: var(--stone-600);
}
.sp-fattach:hover { background: var(--muted); }
.dark .sp-fattach { color: var(--sp-stone-300); }
.sp-comp__ta {
  display: block; min-height: 92px; width: 100%; resize: none; border: 0; background: transparent; padding: 0.75rem 0.875rem;
  font-size: 13px; line-height: 1.625; color: var(--foreground); outline: none;
}
/* signature-section.tsx and signature-preview.tsx */
.sp-sig { border-top: 1px solid var(--border); }
.sp-sig__row { display: flex; align-items: center; gap: 0.375rem; padding: 7px 0.875rem; font-size: 11px; color: var(--muted-foreground); }
.sp-sig__toggle { margin-left: 0.25rem; border-radius: var(--radius-sm); font-weight: 600; color: var(--foreground); text-underline-offset: 2px; }
.sp-sig__toggle:hover { text-decoration: underline; }
.sp-sig__preview { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0 0.875rem 0.75rem; }
.sp-sig__lines { min-width: 0; flex: 1 1 0%; font-size: 12.5px; line-height: 1.625; color: var(--stone-600); }
.dark .sp-sig__lines { color: var(--stone-400); }
.sp-sig__edit { display: flex; width: 1.5rem; height: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--stone-400); }
.sp-sig__edit:hover { background: var(--muted); color: var(--foreground); }
/* composer-footer.tsx */
.sp-comp__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; border-top: 1px solid var(--border); padding: 0.5rem 0.625rem; }
.sp-comp__from { font-size: 11px; color: var(--muted-foreground); }
.sp-comp__send { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.sp-comp__hint { font-size: 11px; color: var(--stone-400); }
.dark .sp-comp__hint { color: var(--stone-500); }
.sp-cbtn {
  display: inline-flex; height: 30px; align-items: center; gap: 0.25rem; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); padding: 0 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--foreground);
}
.sp-cbtn--close { padding: 0 0.75rem; }
.sp-csend { height: 30px; border-radius: var(--radius-md); background: var(--primary); padding: 0 0.875rem; font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: #fff; }
.sp-csend--note { background: var(--amber-700); }
.dark .sp-csend--note { background: var(--amber-600); }

/* ------------------------------------------------------------------ chat, social and text thread views */

/* the bg-muted/50 bar across the top of chat-, social- and sms-thread-view.tsx */
.sp-cbar {
  display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 50%, transparent); padding: 0.625rem 1.125rem;
}
.sp-ctl { flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.sp-cbar__ctx { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-cbar__right { margin-left: auto; display: flex; flex-shrink: 0; align-items: center; gap: 0.375rem; }
.sp-cbar__id { display: flex; min-width: 0; flex: 1 1 0%; align-items: center; gap: 0.5rem; }
.sp-cbar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.sp-cbar__handle, .sp-cbar__phone { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-cbar__phone { font-variant-numeric: tabular-nums; }

/* chat-transcript.tsx and sms-transcript.tsx bubbles */
.sp-tx { display: flex; flex-direction: column; padding: 0.5rem 0; }
.sp-bub { display: flex; flex-direction: column; padding: 0.25rem 0.5rem; }
.sp-bub--l { align-items: flex-start; }
.sp-bub--r { align-items: flex-end; }
.sp-bub__who { margin-bottom: 0.125rem; padding: 0 0.25rem; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }
.sp-bub__body { max-width: 80%; white-space: pre-wrap; overflow-wrap: break-word; border-radius: 1rem; padding: 0.5rem 0.75rem; font-size: 13px; line-height: 1.625; }
.sp-bub--l .sp-bub__body { border-top-left-radius: var(--radius-sm); }
.sp-bub--r .sp-bub__body { border-top-right-radius: var(--radius-sm); }
.sp-bub__body--customer { background: var(--muted); color: var(--foreground); }
.sp-bub__body--agent { background: var(--foreground); color: var(--background); }
.sp-bub__body--ai {
  background: color-mix(in oklab, var(--sp-violet-500) 10%, transparent); color: var(--foreground);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sp-violet-500) 25%, transparent);
}
.sp-bub__time { margin-top: 0.125rem; padding: 0 0.25rem; font-size: 10px; color: var(--muted-foreground); }
.sp-sys { margin: 0.5rem 0; display: flex; justify-content: center; padding: 0 0.5rem; }
.sp-sys__box {
  display: flex; max-width: 85%; align-items: center; gap: 0.375rem; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 60%, transparent); padding: 0.375rem 0.75rem; text-align: center;
  font-size: 11.5px; font-weight: 500; color: var(--muted-foreground);
}
/* DaySeparator */
.sp-day { margin: 0.75rem 0; display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; }
.sp-day__rule { height: 1px; flex: 1 1 0%; background: var(--border); }
.sp-day__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--muted-foreground); }

/* chat-composer.tsx, sms-composer.tsx and the social composer */
.sp-ccomp { flex-shrink: 0; border-top: 1px solid var(--border); padding: 0.75rem; }
.sp-claimbtn { margin-bottom: 0.375rem; font-size: 11px; font-weight: 600; color: var(--primary); }
.sp-claimbtn:hover { text-decoration: underline; }
.sp-ccomp__row { display: flex; align-items: flex-end; gap: 0.5rem; }
.sp-ccomp__ta {
  min-height: 36px; min-width: 0; flex: 1 1 0%; resize: none; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); padding: 0.375rem 0.625rem; font-size: 13px; line-height: 1.5; color: var(--foreground); outline: none;
}
.sp-ccomp__ta:focus { border-color: var(--primary); }
.sp-icbtn {
  display: flex; width: 2rem; height: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md);
  border: 1px solid var(--border); color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.sp-icbtn:hover { background: var(--muted); color: var(--foreground); }
.sp-sendbtn { height: 2rem; flex-shrink: 0; border-radius: var(--radius-md); background: var(--primary); padding: 0 0.75rem; font-size: 12px; font-weight: 600; color: #fff; }
.sp-ccomp__pills { margin-top: 0.375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.sp-pbtn {
  display: flex; height: 1.75rem; flex-shrink: 0; align-items: center; gap: 0.375rem; border-radius: var(--radius-md); border: 1px solid var(--border);
  padding: 0 0.5rem; font-size: 11px; font-weight: 600; color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.sp-pbtn:hover { background: var(--muted); color: var(--foreground); }
.sp-aimenu.menu__content {
  top: auto; bottom: 100%; left: 0; right: auto; z-index: 20; margin-bottom: 0.25rem; width: 14rem; overflow: hidden;
  border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg);
}
.sp-aimi { display: block; width: 100%; padding: 0.5rem 0.75rem; text-align: left; transition: background-color 150ms; }
.sp-aimi:hover { background: var(--muted); }
.sp-aimi__t { display: block; font-size: 12px; font-weight: 600; color: var(--foreground); }
.sp-aimi__h { display: block; font-size: 11px; color: var(--muted-foreground); }

/* social-comment-thread-view.tsx: PostCard, CommentRow, the composer's two tabs */
.sp-post { flex-shrink: 0; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); padding: 0.75rem 1.125rem; }
.sp-post__row { margin-top: 0.375rem; display: flex; align-items: flex-start; gap: 0.75rem; }
.sp-post__ph {
  display: flex; width: 3.5rem; height: 3.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground);
}
.sp-post__main { min-width: 0; flex: 1 1 0%; }
.sp-post__cap { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.625; color: var(--foreground); }
.sp-post__meta { margin-top: 0.375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 11px; color: var(--muted-foreground); }
.sp-post__open { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; color: var(--primary); }
.sp-post__open:hover { text-decoration: underline; }
.sp-post__stats { margin-top: 0.375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: 11px; color: var(--muted-foreground); }
.sp-post__num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground); }
.sp-comments { padding: 0.5rem 0.75rem; }
.sp-cm { padding: 0.25rem 0; }
.sp-cm--indent { margin-left: 1rem; border-left: 1px solid var(--border); padding-left: 0.75rem; }
.sp-cm__box { border-radius: var(--radius-lg); border: 1px solid transparent; background: color-mix(in oklab, var(--muted) 50%, transparent); padding: 0.5rem 0.75rem; }
.sp-cm__box.is-target { border-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.sp-cm__head { display: flex; align-items: center; gap: 0.375rem; }
.sp-cm__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.sp-cm__time { margin-left: auto; flex-shrink: 0; font-size: 10.5px; color: var(--muted-foreground); }
.sp-cm__mod { display: flex; width: 1.5rem; height: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--muted-foreground); }
.sp-cm__mod:hover { background: var(--muted); }
.sp-cm__body { margin-top: 0.25rem; white-space: pre-wrap; overflow-wrap: break-word; font-size: 12.5px; line-height: 1.625; }
.sp-cm__reply { margin-top: 0.375rem; font-size: 11px; font-weight: 600; color: var(--primary); }
.sp-cm__reply:hover { text-decoration: underline; }
.sp-scomp__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sp-seg { display: inline-flex; align-items: center; gap: 0.125rem; border-radius: 9999px; background: var(--muted); padding: 0.125rem; }
.sp-seg__tab { border-radius: 9999px; padding: 3px 0.625rem; font-size: 11px; font-weight: 600; color: var(--muted-foreground); transition: color 150ms; }
.sp-seg__tab:hover { color: var(--foreground); }
.sp-seg__tab.is-active { background: var(--card); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
.sp-scomp__note { min-width: 0; flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-draftbtn {
  display: flex; height: 2rem; flex-shrink: 0; align-items: center; gap: 0.375rem; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); padding: 0 0.625rem; font-size: 12px; font-weight: 600;
}
.sp-draftbtn:hover { background: var(--muted); }

/* ------------------------------------------------------------------ details-panel.tsx */

.sp-details { width: 352px; flex-shrink: 0; overflow-y: auto; background: var(--card); }
.sp-dsec { border-bottom: 1px solid var(--border); padding: 1rem; }
.sp-cust { display: flex; align-items: center; gap: 0.625rem; }
.sp-cust__main { min-width: 0; flex: 1 1 0%; }
.sp-cust__row { display: flex; min-width: 0; align-items: center; gap: 0.375rem; }
.sp-cust__name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.sp-cust__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.sp-cust__edit { display: flex; flex-shrink: 0; align-self: flex-start; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.sp-cust__edit:hover, .sp-cust__ext:hover { color: var(--foreground); }
.sp-cust__ext { flex-shrink: 0; border-radius: var(--radius-sm); color: var(--muted-foreground); }
.sp-stats { margin-top: 0.875rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.sp-stat { border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 0.5rem 0.625rem; }
.sp-stat__v { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; white-space: nowrap; }
.sp-foot { margin-top: 0.5rem; display: flex; align-items: flex-start; gap: 0.375rem; }
.sp-foot__txt { font-size: 11px; line-height: 1.625; color: var(--muted-foreground); }
.sp-foot__link { margin-left: auto; display: flex; flex-shrink: 0; align-items: center; gap: 0.25rem; font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
.sp-foot__link:hover { color: var(--foreground); }
.sp-hint2 { margin-top: 0.5rem; font-size: 11px; color: var(--muted-foreground); }
/* ticket-tags-editor.tsx */
.sp-tt__head { display: flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); }
.sp-chips { margin-top: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.sp-chip { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; background: var(--muted); padding: 3px 0.375rem 3px 0.625rem; font-size: 11px; font-weight: 500; }
.sp-chip__x { display: flex; color: var(--muted-foreground); }
.sp-chip__x:hover { color: var(--foreground); }
.sp-chip-add {
  display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; border: 1px dashed var(--border); padding: 3px 0.625rem;
  font-size: 11px; font-weight: 600; color: var(--muted-foreground);
}
/* ShopifyTagsSection */
.sp-stags { margin-top: 0.875rem; border-top: 1px dashed var(--border); padding-top: 0.75rem; }
.sp-sky { color: var(--sp-sky-600); }
.dark .sp-sky { color: var(--sp-sky-400); }
.sp-slabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sky-700); }
.dark .sp-slabel { color: var(--sp-sky-400); }
.sp-stags__desc { margin-top: 0.125rem; font-size: 10.5px; line-height: 1.625; color: var(--muted-foreground); }
.sp-schip {
  display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--sp-sky-500) 30%, transparent);
  background: color-mix(in oklab, var(--sp-sky-500) 10%, transparent); padding: 3px 0.375rem 3px 0.625rem; font-size: 11px; font-weight: 500; color: var(--sp-sky-800);
}
.dark .sp-schip { color: var(--sp-sky-300); }
.sp-schip__x { display: flex; color: color-mix(in oklab, var(--sky-700) 70%, transparent); }
.dark .sp-schip__x { color: color-mix(in oklab, var(--sp-sky-300) 70%, transparent); }
.sp-schip-add {
  display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; border: 1px dashed color-mix(in oklab, var(--sp-sky-500) 50%, transparent);
  padding: 3px 0.625rem; font-size: 11px; font-weight: 600; color: var(--sky-700);
}
.dark .sp-schip-add { color: var(--sp-sky-400); }

/* details-order-card.tsx */
.sp-sechead { margin-bottom: 0.625rem; display: flex; align-items: center; gap: 7px; }
.sp-sectitle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in oklab, var(--foreground) 55%, transparent); }
.sp-sechead__meta { margin-left: auto; font-size: 11px; color: var(--muted-foreground); }
.sp-hint { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.sp-hint--pad { padding: 0.375rem 0.125rem; }
.sp-hint--py { padding: 0.375rem 0; }
.sp-noorders { display: flex; flex-direction: column; gap: 0.625rem; }
.sp-noorders__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sp-blocked { margin-bottom: 0.5rem; font-size: 11px; color: var(--amber-700); }
.dark .sp-blocked { color: var(--sp-amber-400); }
.sp-blocked__btn { font-weight: 600; text-decoration: underline; }
.sp-lo { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.sp-lo__head { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); background: var(--muted); padding: 0.625rem 0.75rem; }
.sp-lo__name { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.sp-lo__total { margin-left: auto; font-size: 13px; font-weight: 700; }
.sp-lines { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.625rem 0.75rem; }
.sp-lines--compact { padding: 0.625rem; }
.sp-line { display: flex; align-items: flex-start; gap: 0.625rem; }
.sp-line__qty {
  display: flex; width: 1.5rem; height: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md);
  background: var(--foreground); padding: 0 0.25rem; font-size: 10px; font-weight: 700; color: var(--background);
}
.sp-line__main { min-width: 0; flex: 1 1 0%; }
.sp-line__title { font-size: 0.75rem; font-weight: 500; line-height: 1.25; }
.sp-line__sku { margin-top: 0.125rem; font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); }
.sp-line__price { font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
.sp-lo__ship { border-top: 1px solid var(--border); background: var(--card); padding: 0.625rem 0.75rem; }
.sp-lo__shiphead { margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.375rem; }
.sp-lo__pencil {
  margin-left: auto; display: flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: var(--radius-md);
  color: var(--stone-400); transition: color 150ms, background-color 150ms;
}
.sp-lo__pencil:hover { background: var(--muted); color: var(--foreground); }
.sp-lo__pencil:disabled { cursor: not-allowed; opacity: 0.5; }
.sp-addr { white-space: pre-line; font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }
.sp-addr--sm { font-size: 11px; }
.sp-track { margin-top: 0.375rem; display: flex; align-items: flex-start; gap: 0.375rem; font-size: 11px; color: var(--muted-foreground); }
.sp-track__txt { min-width: 0; line-height: 1.625; overflow-wrap: anywhere; }
.sp-track__num { font-weight: 500; color: var(--foreground); }
.sp-track__num:hover { text-decoration: underline; }
.sp-lo__foot { display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid var(--border); background: var(--card); padding: 0.625rem 0.75rem; }
.sp-fbtn {
  display: inline-flex; height: 1.75rem; align-items: center; gap: 0.375rem; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); padding: 0 0.625rem; font-size: 11px; font-weight: 600; color: var(--foreground); transition: background-color 150ms;
}
.sp-fbtn:hover { background: var(--muted); }
.sp-fbtn:disabled { cursor: not-allowed; opacity: 0.5; }
.sp-ficon {
  margin-left: auto; display: flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
}
.sp-ficon:hover { background: var(--muted); color: var(--foreground); }
/* OrderActionsMenu */
.sp-omenu { display: flex; }
.sp-omenu__btn {
  display: flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: var(--radius-md);
  color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.sp-omenu__btn:hover { background: var(--muted); color: var(--foreground); }
.sp-omenu__list.menu__content {
  top: 1.5rem; z-index: 20; display: flex; width: 210px; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
  padding: 0.25rem 0; box-shadow: var(--shadow-lg);
}
.sp-omi {
  display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; text-align: left; font-size: 11.5px;
  font-weight: 500; color: var(--foreground); transition: background-color 150ms;
}
.sp-omi:hover { background: var(--muted); }
/* EarlierOrders: each a <details> that opens in place */
.sp-earlier { margin-top: 0.625rem; display: flex; flex-direction: column; }
.sp-eo { position: relative; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.sp-eo__row { display: flex; cursor: pointer; list-style: none; align-items: center; gap: 0.5rem; padding: 0.375rem 1.75rem 0.375rem 0; font-size: 11.5px; }
.sp-eo__row::-webkit-details-marker { display: none; }
.sp-eo__chev { transition: transform 150ms; }
.sp-eo__d[open] .sp-eo__chev { transform: rotate(90deg); }
.sp-eo__name { font-family: var(--font-mono); font-weight: 500; }
.sp-eo__date { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.sp-eo__total { margin-left: auto; flex-shrink: 0; font-weight: 600; }
.sp-eo > .sp-omenu { position: absolute; right: 0; top: 0.3rem; }
.sp-eo__box { margin-bottom: 0.5rem; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.sp-eo__head { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); background: var(--muted); padding: 0.375rem 0.625rem; }
.sp-eo__fin { font-size: 10.5px; color: var(--muted-foreground); }
.sp-eo__ship { border-top: 1px solid var(--border); padding: 0.5rem 0.625rem; }
/* the returns card and details-claims-card.tsx */
.sp-claims { display: flex; flex-direction: column; gap: 7px; }
.sp-claim { display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 0.625rem; }
.sp-claim:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.sp-claim__top { display: flex; align-items: center; gap: 7px; }
.sp-claim__kind { font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
.sp-claim__id { font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); }
.sp-claim__detail { margin-top: 0.375rem; display: block; font-size: 11px; line-height: 1.5; color: var(--muted-foreground); }
/* chat-details-card.tsx and chat-cart-card.tsx */
.sp-pills { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.375rem; }
.sp-pageview { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--primary); }
.sp-pageview:hover { text-decoration: underline; }
.sp-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sp-cart__age { font-size: 10px; color: var(--muted-foreground); }
.sp-cart__lines { margin-top: 0.375rem; display: flex; flex-direction: column; gap: 0.125rem; }
.sp-cline { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.25rem; }
.sp-cline__img {
  display: flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground);
}
.sp-cline__main { min-width: 0; flex: 1 1 0%; }
.sp-cline__top { display: flex; align-items: baseline; gap: 0.375rem; }
.sp-cline__qty { flex-shrink: 0; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.sp-cline__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.sp-cline__var { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
.sp-cline__price { flex-shrink: 0; text-align: right; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-cart__total { margin-top: 0.625rem; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.sp-cart__count { font-size: 11px; color: var(--muted-foreground); }
.sp-cart__sum { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* social-contact-card.tsx and phone-header-card.tsx */
.sp-followers { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.sp-linkbtn {
  margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.375rem; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); padding: 0.375rem 0.625rem; font-size: 11px; font-weight: 600;
}
.sp-linkbtn:hover { background: var(--muted); }
.sp-auto { margin-top: 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--amber-200); background: var(--amber-50); padding: 0.625rem; }
.dark .sp-auto { border-color: color-mix(in oklab, var(--sp-amber-900) 50%, transparent); background: color-mix(in oklab, var(--sp-amber-950) 30%, transparent); }
.sp-auto__t { font-size: 11.5px; font-weight: 500; color: var(--amber-800); }
.sp-auto__d { margin-top: 0.125rem; font-size: 11px; color: color-mix(in oklab, var(--amber-800) 80%, transparent); }
.dark .sp-auto__t, .dark .sp-auto__other { color: var(--amber-200); }
.dark .sp-auto__d { color: color-mix(in oklab, var(--amber-200) 80%, transparent); }
.sp-auto__acts { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sp-auto__ok { border-radius: var(--radius-md); background: var(--primary); padding: 0.25rem 0.625rem; font-size: 11px; font-weight: 600; color: #fff; }
.sp-auto__other { font-size: 11px; font-weight: 600; color: var(--amber-800); text-decoration: underline; }
.sp-phone { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.375rem; }
.sp-phone__num { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-phone__copy { display: flex; width: 1.5rem; height: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--muted-foreground); }
.sp-phone__copy:hover { background: var(--muted); }

/* ------------------------------------------------------------------ fitting the four panels on smaller screens
   Dorris keeps all four panels at their dragged widths and lets the workspace scroll sideways.
   Here the panels start narrower on laptop screens (within Dorris's own minimums), the views
   and details panels step out as the screen shrinks, and below 1024px one panel shows at a
   time: the list on support.html, the thread with its details under it on a ticket page. */

@media (max-width: 1599px) {
  .sp-views { width: 164px; }
  .sp-list { width: 300px; }
  .sp-details { width: 312px; }
}
@media (max-width: 1439px) {
  .sp-views, .sp-resizer--views { display: none; }
}
@media (max-width: 1279px) {
  .sp-details, .sp-resizer--details { display: none; }
}
@media (max-width: 1023px) {
  .sp-ws { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .sp-resizer { display: none; }
  .sp-list { width: auto; flex: none; overflow: visible; }
  .sp-list__scroll { flex: none; overflow: visible; }
  .sp-thread { min-width: 0; flex: none; overflow: visible; }
  .sp-thread__scroll { flex: none; overflow: visible; }
  .sp-ws--list .sp-thread, .sp-ws--list .sp-details { display: none; }
  .sp-ws--ticket .sp-list { display: none; }
  .sp-ws--ticket .sp-details { display: block; width: auto; flex: none; overflow: visible; border-top: 1px solid var(--border); }
}
@media (max-width: 639px) {
  .sp-th { height: auto; min-height: 3.5rem; flex-wrap: wrap; padding: 0.5rem 1rem; row-gap: 0.5rem; }
  .sp-th__main { flex-basis: 100%; }
  .sp-th__ctl { flex-wrap: wrap; }
  .sp-msg__body { padding-left: 0; }
  .sp-cbar { padding: 0.625rem 0.875rem; }
  .sp-cbar__right { margin-left: 0; flex-wrap: wrap; }
  .sp-comp { padding: 0.75rem 0.75rem 0.875rem; }
  .sp-comp__acts { margin-left: 0; }
  .sp-tochip { margin-left: 0; max-width: 100%; }
}

/* ==================================================================================
   Macros, Knowledge, Rules and Settings — support.macros.tsx, support.knowledge.tsx,
   support.rules.tsx, support.settings.tsx and their components/support/{macros,knowledge,
   rules,settings}/*. Appended by a later builder; everything below is new. */

/* ------------------------------------------------------------------ macro-list.tsx, macro-detail.tsx */

.sp-macros { display: flex; min-height: 0; flex: 1 1 0%; overflow: hidden; }
.sp-mlist { display: flex; width: 400px; flex-shrink: 0; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); background: var(--card); }
.sp-mlist__head { border-bottom: 1px solid var(--border); padding: 1rem; }
.sp-mlist__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.sp-mlist__desc { margin-top: 2px; font-size: 0.75rem; color: var(--muted-foreground); }
.sp-mlist__scroll { flex: 1 1 0%; overflow-y: auto; }
.sp-mrow { display: block; width: 100%; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); padding: 0.8125rem 1rem; text-align: left; }
.sp-mrow.is-selected { background: color-mix(in oklab, var(--primary) 6%, transparent); }
.sp-mrow__top { display: flex; align-items: center; gap: 0.5rem; }
.sp-mrow__name { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.sp-mrow__snip { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.sp-mrow__meta { margin-top: 7px; display: flex; align-items: center; gap: 0.375rem; }
.sp-mrow__used { margin-left: auto; font-size: 11px; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.sp-mdetail { flex: 1 1 0%; min-width: 0; overflow-y: auto; padding: 1.5rem; }
.sp-mdetail__inner { max-width: 720px; }
.sp-mdetail__top { margin-bottom: 18px; display: flex; align-items: flex-start; gap: 10px; }
.sp-mdetail__name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.sp-mdetail__meta { margin-top: 3px; font-size: 0.75rem; color: var(--muted-foreground); }
.sp-mdetail__acts { display: flex; flex-shrink: 0; gap: 0.5rem; }
.sp-mbody { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1.25rem; box-shadow: var(--shadow-xs); }
.sp-mbody__label { margin-bottom: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.sp-mbody__text { white-space: pre-wrap; font-size: 13px; line-height: 1.75; }
.sp-var { border-radius: var(--radius-sm); background: color-mix(in oklab, var(--primary) 10%, transparent); padding: 1px 4px; font-family: var(--font-mono); font-size: 0.85em; color: var(--emerald-700); }
.dark .sp-var { color: var(--sp-emerald-300); }
.sp-mpreview { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.sp-mpcard { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1rem; box-shadow: var(--shadow-xs); }
.sp-mpcard__label { margin-bottom: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.sp-mpcard__note { font-size: 11px; line-height: 1.6; color: var(--muted-foreground); }
.sp-mpcard__text { white-space: pre-wrap; font-size: 0.75rem; line-height: 1.7; color: var(--muted-foreground); }
.sp-varchips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) {
  .sp-macros { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .sp-mlist { width: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); }
  .sp-mdetail { overflow-y: visible; }
}
@media (max-width: 639px) { .sp-mpreview { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ support.knowledge.tsx and knowledge/* */

.sp-know { padding-bottom: 0.5rem; }
.sp-src__head, .sp-prev__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--border); padding: 1rem; }
.sp-src__title, .sp-prev__title { font-size: 0.875rem; font-weight: 700; }
.sp-src__sub { margin-top: 2px; font-size: 0.75rem; color: var(--muted-foreground); }
.sp-src__log { border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--muted-foreground); }
.sp-src__grid { display: grid; gap: 0.75rem; padding: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.sp-srcstat { border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.75rem; }
.sp-srcstat__name { font-size: 0.875rem; font-weight: 600; }
.sp-srcstat__count { margin-top: 2px; font-size: 0.75rem; color: var(--muted-foreground); }
.sp-srcstat__note { margin-top: 0.25rem; font-size: 11px; color: var(--muted-foreground); }
.sp-src__sched { display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--border); padding: 1rem; }
.sp-src__hint { font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }
.sp-prev__desc { margin-top: 0.25rem; max-width: 46rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted-foreground); }
.sp-prev__hits { border-top: 1px solid var(--border); }
.sp-prev__hit { display: flex; gap: 0.625rem; border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; }
.sp-prev__hit:last-child { border-bottom: 0; }
.sp-prev__hnum { flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: var(--muted-foreground); }
.sp-prev__htitle { font-size: 0.875rem; font-weight: 600; }
.sp-prev__hbody { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }
.sp-kentries__bar { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--border); padding: 0.75rem; }
.sp-krows { display: flex; flex-direction: column; }
.sp-krow { display: flex; gap: 0.75rem; border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; }
.sp-krow:last-child { border-bottom: 0; }
.sp-krow__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.sp-krow__title { font-size: 0.875rem; font-weight: 600; }
.sp-krow__window { font-size: 11px; color: var(--muted-foreground); }
.sp-krow__body { margin-top: 0.25rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }
.sp-krow__acts { display: flex; flex-shrink: 0; align-items: flex-start; gap: 0.375rem; }
.sp-krow__btn { border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 0.25rem 0.5rem; font-size: 11px; font-weight: 600; }
.sp-krow__btn:hover { background: var(--muted); }
.sp-krow__btn--danger { color: var(--destructive); }
@media (max-width: 639px) { .sp-krow { flex-direction: column; } .sp-krow__acts { justify-content: flex-end; } }

/* ------------------------------------------------------------------ support.rules.tsx: table page */

.sp-rulewarn { margin: -0.75rem 0 1rem; border-radius: var(--radius-md); border: 1px solid var(--amber-300); background: var(--amber-50); padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1.5; color: var(--amber-800); }
.dark .sp-rulewarn { border-color: color-mix(in oklab, var(--sp-amber-900) 60%, transparent); background: color-mix(in oklab, var(--sp-amber-950) 30%, transparent); color: var(--amber-200); }

/* ------------------------------------------------------------------ builder-canvas.tsx, builder-node.tsx, builder-edges.tsx, step-palette.tsx, node-config-panel.tsx
   Dorris positions these with absolute coordinates and SVG edges; the build allows no style=""
   attribute, so the same flow reads top to bottom instead: a trigger, a condition, then a
   Yes/No branch drawn as two columns with plain CSS connector lines. */

.sp-ruleopen { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; overflow: hidden; }
.sp-fbar2 { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border); background: var(--card); padding: 0.75rem 1.25rem; }
.sp-fbar2__crumb { font-size: 0.75rem; color: var(--muted-foreground); }
.sp-fbar2__name { height: 34px; width: 320px; max-width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 0 11px; font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.sp-fbar2__status { height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); padding: 0 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--foreground); }
.sp-fbar2__acts { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.sp-flowpage { display: flex; min-height: 0; flex: 1 1 0%; overflow: hidden; }
.sp-fpalette { width: 216px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--border); background: var(--card); padding: 18px 14px; }
.sp-fpalette__title { font-size: 0.875rem; font-weight: 700; }
.sp-fpalette__hint { margin-top: 5px; font-size: 0.75rem; line-height: 1.55; color: var(--muted-foreground); }
.sp-fpalette__list { margin-top: 1rem; display: flex; flex-direction: column; gap: 6px; }
.sp-fpitem { display: flex; align-items: center; gap: 9px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 9px 10px; }
.sp-fpitem__label { font-size: 0.75rem; font-weight: 600; }
.sp-fpitem__hint { font-size: 10px; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.sp-flowcanvas {
  position: relative; flex: 1 1 0%; overflow: auto; display: flex; justify-content: center;
  background: #faf8f4; background-image: radial-gradient(#ded8cc 1px, transparent 1px); background-size: 16px 16px;
  padding: 32px 20px 60px;
}
.dark .sp-flowcanvas { background: #1c1917; background-image: radial-gradient(#3a352e 1px, transparent 1px); }
.sp-flow { display: flex; flex-direction: column; align-items: center; }
.sp-fstem { width: 2px; height: 26px; background: var(--stone-400); }
.dark .sp-fstem { background: var(--stone-500); }
.sp-fstem--short { height: 18px; }
.sp-fsplit { display: flex; justify-content: center; }
.sp-fsplit__bar { width: 280px; height: 2px; background: var(--stone-400); }
.dark .sp-fsplit__bar { background: var(--stone-500); }
.sp-fbranch { display: flex; justify-content: center; gap: 40px; }
.sp-fbranch__col { display: flex; width: 240px; flex-direction: column; align-items: center; }
.sp-fbranch__label { font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
.sp-fnode { width: 240px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); padding: 11px 13px; }
.sp-fnode.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.sp-fnode__top { display: flex; align-items: center; gap: 9px; }
.sp-fnode__ic { display: flex; width: 22px; height: 22px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; }
.sp-fnode__ic--trigger { background: var(--blue-100); color: var(--blue-700); }
.dark .sp-fnode__ic--trigger { background: color-mix(in oklab, var(--blue-900) 40%, transparent); color: var(--blue-300); }
.sp-fnode__ic--condition { background: var(--amber-100); color: var(--amber-800); }
.dark .sp-fnode__ic--condition { background: color-mix(in oklab, var(--sp-amber-900) 40%, transparent); color: var(--amber-300); }
.sp-fnode__ic--action { background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--emerald-700); }
.dark .sp-fnode__ic--action { background: color-mix(in oklab, var(--primary) 20%, transparent); color: var(--sp-emerald-300); }
.sp-fnode__ic--wait { background: var(--zinc-100); color: var(--zinc-700); }
.dark .sp-fnode__ic--wait { background: var(--zinc-800); color: var(--zinc-300); }
.sp-fnode__title { flex: 1 1 0%; font-size: 12.5px; font-weight: 600; color: var(--foreground); }
.sp-fnode__del { display: flex; color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.sp-fnode__detail { margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--muted-foreground); }
.sp-fplus { display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 9999px; background: var(--foreground); color: var(--background); }
.sp-fconfig { width: 320px; flex-shrink: 0; overflow-y: auto; border-left: 1px solid var(--border); background: var(--card); padding: 18px; }
.sp-fconfig__head { margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.sp-fconfig__title { flex: 1 1 0%; font-size: 0.875rem; font-weight: 700; }
.sp-fconfig__x { display: flex; color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.sp-fconfig__hint { margin-bottom: 1rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }
.sp-fconfig__note { margin-bottom: 1rem; border-radius: var(--radius-md); border: 1px solid var(--amber-300); background: var(--amber-50); padding: 0.5rem 0.625rem; font-size: 11px; line-height: 1.5; color: var(--amber-800); }
.dark .sp-fconfig__note { border-color: color-mix(in oklab, var(--sp-amber-900) 60%, transparent); background: color-mix(in oklab, var(--sp-amber-950) 40%, transparent); color: var(--amber-200); }
.sp-fconfig__field { margin-top: 14px; }
.sp-fconfig__label { margin-bottom: 5px; font-size: 11px; font-weight: 600; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.sp-fconfig__value + .sp-fconfig__value { margin-top: 6px; }
@media (max-width: 1100px) { .sp-fpalette { display: none; } }
@media (max-width: 860px) {
  .sp-flowpage { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .sp-fconfig { width: auto; border-left: 0; border-top: 1px solid var(--border); }
  .sp-flowcanvas { overflow: visible; padding: 24px 12px 40px; }
}
@media (max-width: 560px) {
  .sp-fbranch { flex-direction: column; align-items: center; gap: 18px; }
  .sp-fsplit__bar { width: 2px; height: 18px; }
}

/* ------------------------------------------------------------------ support.settings.tsx and settings/* */

.sp-settings { max-width: 840px; }
.sp-scard { margin-bottom: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-xs); }
.sp-scard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; }
.sp-scard__title { font-size: 0.875rem; font-weight: 700; }
.sp-scard__desc { margin-top: 2px; max-width: 44rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }
.sp-scard__body { padding: 1rem 1.25rem; }
.sp-scard__body--flush { padding: 0; }
.sp-scard__btn { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.375rem; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); padding: 0 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--foreground); }
.sp-scard__btn:hover { background: var(--muted); }
.sp-scard__sentence { font-size: 13px; line-height: 1.6; }
.sp-scard__sentence .field { display: inline-block; height: 28px; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.sp-scard__num { width: 3.5rem; height: 28px; padding-top: 0; padding-bottom: 0; text-align: center; display: inline-block; vertical-align: middle; }
.sp-scard__note { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }
.sp-scard__row3 { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.sp-scard__grid2 { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sp-scard__value { font-size: 13px; color: var(--foreground); }
.sp-scard__mini { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
.sp-scard__status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.sp-live-on { color: var(--emerald-700); }
.dark .sp-live-on { color: var(--sp-emerald-300); }
.sp-inlinecheck { font-size: 13px; }
.sp-chips2 { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sp-dot--live { background: var(--green-500); }
.sp-brandtabs { display: inline-flex; margin-bottom: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.sp-brandtab { display: flex; align-items: center; gap: 6px; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.sp-brandtab:hover { background: color-mix(in oklab, var(--muted) 60%, transparent); }
.sp-brandtab.is-active { background: var(--muted); color: var(--foreground); }
.sp-qlist { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem; }
.sp-qrow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.5rem 0.75rem; font-size: 13px; }
.sp-inboxrow { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; }
.sp-inboxrow + .sp-inboxrow { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.sp-inboxrow--sm { padding: 0.5rem 0; }
.sp-inboxrow--sm + .sp-inboxrow--sm { border-top: 0; }
.sp-inboxrow__name { font-size: 13px; font-weight: 600; }
.sp-inboxrow__addr { margin-top: 1px; font-size: 0.75rem; color: var(--muted-foreground); }
.sp-social { display: flex; flex-direction: column; gap: 0.875rem; }
.sp-socialrow { display: flex; align-items: center; gap: 0.625rem; }
.sp-socialrow__ic { display: flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); }
.sp-socialrow__name { font-size: 13px; font-weight: 600; }
.sp-socialrow__handle { margin-top: 1px; font-size: 0.75rem; color: var(--muted-foreground); }
.sp-socialrow__scopes { margin: 0.375rem 0 0.875rem 2.375rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sp-blist { display: flex; flex-direction: column; }
.sp-blrow { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; }
.sp-blrow + .sp-blrow { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.sp-blrow__email { font-size: 13px; font-weight: 500; }
.sp-blrow__meta { margin-top: 1px; font-size: 0.75rem; color: var(--muted-foreground); }
@media (max-width: 639px) {
  .sp-scard__head { flex-direction: column; align-items: flex-start; }
  .sp-inboxrow { flex-wrap: wrap; }
  .sp-blrow { flex-wrap: wrap; }
}

/* ---- video-analytics.css ---- */
/* Video Analytics — routes/_auth/video-analytics.tsx → components/video-analytics/page.tsx */

.va-root { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
.va-head { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.va-periods { display: flex; align-items: center; gap: 0.25rem; }
.va-period {
  padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--radius-md); font-weight: 500;
  color: var(--muted-foreground); transition: color 150ms, background-color 150ms;
}
.va-period:hover { color: var(--foreground); background: var(--muted); }
.va-period.is-active, .va-period.is-active:hover { background: var(--primary); color: var(--primary-foreground); }
.va-body { flex: 1 1 0%; overflow-y: auto; padding: 1.5rem; }

/* KpiCard */
.va-kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .va-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .va-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.va-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; min-width: 0; }
.va-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.va-card__label { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.va-card__icon {
  width: 2rem; height: 2rem; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary);
}
.va-card__value { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--foreground); }
.va-h2 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.75rem; }

/* ---- warranty.css ---- */
/* Warranty & Claims — routes/_auth/enterprise/warranty.tsx and warranty/**, components/warranty/** */

/* ---------------------------------------------------------------- type helpers (text-[13px] and friends set only the size) */
.war-t105 { font-size: 10.5px; }
.war-t11 { font-size: 11px; }
.war-t115 { font-size: 11.5px; }
.war-t12 { font-size: 12px; }
.war-t125 { font-size: 12.5px; }
.war-t13 { font-size: 13px; }
.war-t135 { font-size: 13.5px; }
.war-t15 { font-size: 15px; }
.war-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.war-relaxed { line-height: 1.625; }
.war-mr { margin-right: 0.375rem; }
.war-uncosted { color: var(--yellow-700); }
.dark .war-uncosted { color: oklch(79.5% 0.184 86.047); }
.war-stack-3 > * + * { margin-top: 0.75rem; }
.war-stack-4 > * + * { margin-top: 1rem; }
.war-stack-5 > * + * { margin-top: 1.25rem; }
.war-stack-2 > * + * { margin-top: 0.5rem; }
.war-fg80 { color: color-mix(in oklab, var(--foreground) 80%, transparent); }

/* ---------------------------------------------------------------- the layout's pill row */
.war-tabs { margin: 0 -0.25rem 1.25rem; overflow-x: auto; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }
.war-tabs ul { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.25rem; }
.war-tab {
  display: inline-block; white-space: nowrap; border-radius: 9999px; border: 1px solid var(--border);
  padding: 0.375rem 0.875rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  background: var(--card); color: var(--muted-foreground); transition: color 150ms, background-color 150ms, border-color 150ms;
}
.war-tab:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.war-tab.is-active { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }

/* ---------------------------------------------------------------- primitives.tsx */
.war-eyebrow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.war-stats { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .war-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .war-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .war-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.war-stat { border-radius: 10px; border: 1px solid var(--border); background: var(--card); padding: 1rem; box-shadow: var(--shadow-xs); }
.war-stat__value { margin-top: 0.375rem; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--foreground); }
.war-stat__sub { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

.war-pill {
  display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid var(--border);
  padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  background: var(--card); color: var(--muted-foreground); transition: color 150ms, background-color 150ms, border-color 150ms; white-space: nowrap;
}
.war-pill:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.war-pill.is-active { border-color: color-mix(in oklab, var(--primary) 30%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.war-pill__count { font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.war-pill.is-active .war-pill__count { color: var(--primary); }

.war-panel { border-radius: 10px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-xs); min-width: 0; }
.war-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; }
.war-panel__title { font-size: 13.5px; font-weight: 600; color: var(--foreground); }
.war-panel__body { padding: 1rem; }

.war-warn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; border-radius: 10px;
  border: 1px solid oklch(94.5% 0.129 101.54); background: var(--yellow-100); padding: 0.75rem 1rem; color: oklch(47.6% 0.114 61.907);
}
.dark .war-warn { border-color: color-mix(in oklab, var(--yellow-900) 50%, transparent); background: color-mix(in oklab, var(--yellow-900) 30%, transparent); color: oklch(94.5% 0.129 101.54); }
.war-warn__text { min-width: 0; flex: 1 1 0%; font-size: 13px; line-height: 1.625; }
.war-warn__text strong { font-weight: 700; }
.war-warn__text a { text-decoration: underline; text-underline-offset: 2px; }
.war-warn__actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }

.war-effect { border-radius: 10px; background: var(--muted); padding: 1rem; }
.war-effect__text { margin-top: 0.375rem; font-size: 13px; line-height: 1.625; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.war-effect__text a { display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: underline; text-underline-offset: 2px; }

.war-row { display: flex; justify-content: space-between; gap: 0.75rem; }
.war-row > dt { flex-shrink: 0; color: var(--muted-foreground); }
.war-row > dd { min-width: 0; text-align: right; color: var(--foreground); overflow-wrap: anywhere; }
.war-dl { display: flex; flex-direction: column; gap: 0.375rem; }

.war-check { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; }
.war-check input {
  appearance: none; width: 1rem; height: 1rem; cursor: pointer; border-radius: 4px; border: 1px solid var(--input); background: var(--card);
}
.war-check input:checked { border-color: var(--primary); background: var(--primary); }
.war-check input.is-mixed { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 40%, transparent); }
.war-check svg { pointer-events: none; position: absolute; left: 0; top: 0; width: 1rem; height: 1rem; opacity: 0; }
.war-check svg path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.war-check input:checked + svg { opacity: 1; }

.war-thumb { display: flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.25rem; background: var(--muted); color: var(--muted-foreground); }
.war-thumb--sm { width: 2rem; height: 2rem; }

.war-select { display: flex; width: 100%; align-items: flex-start; gap: 0.75rem; border-radius: 9px; border: 1px solid var(--border); background: var(--card); padding: 0.75rem; text-align: left; transition: background-color 150ms; }
.war-select:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.war-select.is-selected { border: 1.5px solid var(--primary); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.war-select__icon { margin-top: 0.125rem; flex-shrink: 0; color: var(--muted-foreground); }
.war-select.is-selected .war-select__icon { color: var(--primary); }
.war-select__text { min-width: 0; }
.war-select__label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.war-select__desc { margin-top: 0.125rem; display: block; font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground); }

.war-steps { display: flex; flex-direction: column; gap: 0.5rem; color: var(--foreground); font-size: 13px; }
.war-steps--compact { font-size: 12.5px; }
.war-steps li { display: flex; gap: 0.625rem; }
.war-steps__n { margin-top: 2px; display: flex; width: 18px; height: 18px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--muted); font-size: 10px; font-weight: 600; color: var(--muted-foreground); }
.war-steps__text { line-height: 1.625; }

.war-refusal { display: flex; align-items: flex-start; gap: 0.375rem; font-size: 11.5px; line-height: 1.625; color: var(--muted-foreground); }
.war-refusal .i { margin-top: 2px; }

.war-ext { display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: underline; text-underline-offset: 2px; }
.war-link { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- the queue (warranty/index.tsx) */
.war-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.war-search { position: relative; width: 100%; }
@media (min-width: 640px) { .war-search { width: 20rem; } }
.war-search > .i { pointer-events: none; position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
.war-search > .input { padding-left: 2rem; }
.war-px3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* ---------------------------------------------------------------- timeline ($claimId.tsx Timeline, shipping-claim-panels ShippingTimeline) */
.war-timeline { display: flex; flex-direction: column; gap: 1rem; }
.war-timeline > li { display: flex; gap: 0.75rem; }
.war-timeline__dot { margin-top: 0.125rem; display: flex; width: 1.5rem; height: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--muted); color: var(--muted-foreground); }
.war-timeline__dot--bad { background: var(--red-100); }
.dark .war-timeline__dot--bad { background: color-mix(in oklab, var(--red-900) 40%, transparent); }
.war-timeline__title { font-size: 13px; font-weight: 500; color: var(--foreground); overflow-wrap: anywhere; }
.war-timeline__meta { font-size: 11px; color: var(--muted-foreground); }
.war-timeline__note { margin-top: 0.25rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.625; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.war-diff { margin-top: 0.375rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--radius-md); background: var(--muted); padding: 0.5rem; font-family: var(--font-mono); font-size: 11px; line-height: 1.625; }
.war-diff__old { display: block; color: var(--red-600); }
.war-diff__new { display: block; color: var(--green-700); }
.dark .war-diff__old { color: oklch(70.4% 0.191 22.216); }
.dark .war-diff__new { color: oklch(79.2% 0.209 151.711); }

/* ---------------------------------------------------------------- evidence-grid.tsx */
.war-tiles { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .war-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .war-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.war-tile { overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: var(--card); }
.war-tile__frame { position: relative; display: flex; height: 8rem; width: 100%; align-items: center; justify-content: center; background: var(--muted); color: var(--muted-foreground); }
.war-tile__hover { pointer-events: none; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 0); opacity: 0; color: #fff; transition: all 150ms; }
.war-tile__frame:hover .war-tile__hover, .war-tile__frame:focus-visible .war-tile__hover { background: rgb(0 0 0 / 0.25); opacity: 1; }
.war-tile__cap-wrap { position: relative; }
.war-tile__remove { position: absolute; right: 0.375rem; top: 0.375rem; border-radius: 0.25rem; background: color-mix(in oklab, var(--card) 90%, transparent); padding: 0.25rem; color: var(--muted-foreground); transition: color 150ms; }
.war-tile__remove:hover { color: var(--destructive); }
.war-tile__cap { padding: 0.5rem 2rem 0.5rem 0.5rem; }
.war-tile__cap > p.truncate { font-size: 12px; color: var(--foreground); }
.war-drop {
  display: flex; min-height: 7.5rem; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
  border-radius: 10px; border: 1px dashed var(--border); padding: 1rem; text-align: center; color: var(--muted-foreground); transition: background-color 150ms;
}
.war-drop:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.war-drop span { font-size: 12px; }

/* The viewer: "fixed inset-0 z-50 flex flex-col bg-black/85 p-4" */
dialog.war-lightbox { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; padding: 1rem; background: rgb(0 0 0 / 0.85); color: #fff; }
dialog.war-lightbox[open] { display: flex; flex-direction: column; }
dialog.war-lightbox::backdrop { background: transparent; }
.war-lightbox__head { display: flex; flex-shrink: 0; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.war-lightbox__title { font-size: 13px; font-weight: 500; }
.war-lightbox__meta { font-size: 0.75rem; line-height: 1rem; color: rgb(255 255 255 / 0.6); }
.war-lightbox__btn { border-radius: 0.25rem; padding: 0.375rem; color: rgb(255 255 255 / 0.8); transition: background-color 150ms, color 150ms; }
.war-lightbox__btn:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.war-lightbox__stage { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; color: rgb(255 255 255 / 0.35); }

/* ---------------------------------------------------------------- parcel-tracker.tsx */
.war-parcel { min-width: 0; border-radius: 8px; border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 30%, transparent); padding: 0.625rem; }
.war-parcel__label { display: block; margin-bottom: 0.375rem; min-width: 0; word-break: break-all; font-size: 11px; line-height: 1.375; color: var(--muted-foreground); }
.war-parcel__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.war-parcel__summary { min-width: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.375; color: var(--foreground); }
.war-parcel__facts { margin-top: 0.25rem; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.625; color: var(--muted-foreground); }
.war-parcel__more { margin-top: 0.25rem; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }
.war-flip__open { display: none; }
.war-flip.is-open .war-flip__open { display: inline; }
.war-flip.is-open .war-flip__closed { display: none; }
.war-parcel__events { margin-top: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.war-parcel__events > li { position: relative; display: flex; gap: 0.625rem; padding-bottom: 0.625rem; }
.war-parcel__events > li:last-child { padding-bottom: 0; }
.war-rail { position: relative; display: flex; width: 0.75rem; flex-shrink: 0; justify-content: center; }
.war-rail__dot { margin-top: 0.375rem; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: color-mix(in oklab, var(--muted-foreground) 40%, transparent); }
.war-rail__dot.is-first { background: var(--primary); }
.war-rail__line { position: absolute; bottom: -0.25rem; top: 0.75rem; width: 1px; background: var(--border); }
.war-parcel__event { overflow-wrap: anywhere; font-size: 12px; line-height: 1.375; color: var(--foreground); }
.war-parcel__when { overflow-wrap: anywhere; font-size: 11px; color: var(--muted-foreground); }
.war-parcel__checked { margin-top: 0.375rem; font-size: 10.5px; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }

/* ---------------------------------------------------------------- a claim ($claimId.tsx) */
.war-claim-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.war-claim-head__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.war-claim-code { font-size: 18px; font-weight: 600; color: var(--foreground); }
.war-locked { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 11px; color: var(--muted-foreground); }
.war-claim-head__meta { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.war-claim-head__email { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); word-break: break-all; }
.war-claim-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.war-store { margin-left: 0.25rem; display: inline-flex; align-items: center; vertical-align: middle; border-radius: 0.25rem; border: 1px solid var(--border); padding: 1px 0.25rem; font-size: 10px; font-weight: 500; color: var(--muted-foreground); }

.war-detail { display: grid; align-items: start; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .war-detail { grid-template-columns: minmax(0, 1fr) 340px; } }
.war-col { min-width: 0; }
.war-aside { min-width: 0; }
.war-aside--first { order: -9999; }
@media (min-width: 1024px) { .war-aside--first { order: 0; } }

.war-item-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 13px; font-weight: 500; color: var(--foreground); }
.war-claim-note { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

.war-notes { margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--amber-300) 60%, transparent); background: var(--amber-50); padding: 0.75rem; }
.war-notes li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 13px; color: oklch(41.4% 0.112 45.904); }
.war-notes li .i { margin-top: 2px; flex-shrink: 0; }
.dark .war-notes { border-color: color-mix(in oklab, var(--amber-500) 30%, transparent); background: color-mix(in oklab, var(--amber-500) 10%, transparent); }
.dark .war-notes li { color: var(--amber-200); }
.war-filed-against { margin-bottom: 0.75rem; font-size: 13px; color: var(--muted-foreground); }
.war-ml15 { margin-left: 0.375rem; }
.war-answers { display: flex; flex-direction: column; gap: 0.75rem; }
.war-answers dt { font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.war-answers dd { margin-top: 0.125rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.625; color: var(--foreground); }
.war-tags { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.war-tag { border-radius: 0.25rem; background: var(--muted); padding: 0.125rem 0.375rem; font-size: 11px; color: var(--muted-foreground); }

/* claim-decision.tsx: the outcome card, the decision panel */
.war-outcome { margin-top: 0.25rem; font-size: 15px; font-weight: 600; color: var(--foreground); }
.war-outcome-words { margin-top: 0.25rem; font-size: 12.5px; line-height: 1.625; color: var(--muted-foreground); }
.war-choice { margin-top: 0.5rem; border-radius: 8px; background: var(--muted); padding: 0.5rem 0.625rem; font-size: 12.5px; line-height: 1.625; color: var(--foreground); }
.war-outcome-rows { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 13px; }
.war-suggest { margin-top: 0.75rem; display: flex; align-items: flex-start; gap: 0.375rem; font-size: 11.5px; line-height: 1.625; color: var(--muted-foreground); }
.war-suggest .i { margin-top: 2px; flex-shrink: 0; }
.btn.war-btn-wrap { height: auto; min-height: 2.25rem; width: 100%; white-space: normal; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.btn.war-w-full { width: 100%; }
.war-legend { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 12.5px; line-height: 1.625; }
.war-legend dt { display: inline; font-weight: 600; color: var(--foreground); }
.war-legend dd { display: inline; color: var(--muted-foreground); }

/* "What was created" */
.war-created { display: flex; flex-direction: column; gap: 0.625rem; font-size: 13px; }
.war-created__links { margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.75rem; line-height: 1rem; }
.war-created__order { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--foreground); }
.war-created__ship { margin-top: 0.125rem; }
.war-created__btns { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn.war-btn-7 { height: 1.75rem; font-size: 0.75rem; }
.war-parcel-link { margin-top: 0.125rem; display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; text-decoration: underline; text-underline-offset: 2px; }
.war-parcel-link .war-mono { word-break: break-all; }

/* the confirm dialogs (ui/dialog.tsx: "grid gap-4 p-6", title "pr-6 text-[16px] leading-snug") */
dialog.war-dlg[open] { display: grid; gap: 1rem; max-height: 90vh; overflow-y: auto; }
dialog.war-dlg::backdrop { background: rgb(0 0 0 / 0.6); }
.war-dlg__header { display: flex; flex-direction: column; gap: 0.375rem; text-align: center; }
@media (min-width: 640px) { .war-dlg__header { text-align: left; } }
.war-dlg__title { padding-right: 1.5rem; font-size: 16px; line-height: 1.375; font-weight: 600; letter-spacing: -0.025em; color: var(--foreground); }
.war-dlg__footer { display: flex; flex-direction: column-reverse; gap: 0.5rem; }
@media (min-width: 640px) { .war-dlg__footer { flex-direction: row; justify-content: flex-end; } }
.war-dlg__x { display: inline-flex; color: var(--foreground); }
.war-textarea { display: block; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--input); background: var(--card); padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.war-textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.war-hint { margin-top: 0.25rem; display: block; font-size: 11px; line-height: 1.625; color: var(--muted-foreground); }
.war-normal { font-weight: 400; }

/* the sent email viewer: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" */
dialog.war-mail { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; padding: 1rem; background: rgb(0 0 0 / 0.4); }
dialog.war-mail[open] { display: flex; align-items: center; justify-content: center; }
dialog.war-mail::backdrop { background: transparent; }
.war-mail__panel { display: flex; height: 85vh; width: 100%; max-width: 42rem; flex-direction: column; border-radius: 10px; border: 1px solid var(--border); background: var(--background); padding: 1rem; box-shadow: var(--shadow-lg); }
.war-mail__head { margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.war-mail__to { font-size: 13px; font-weight: 600; color: var(--foreground); }
.war-mail__subject { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.war-mail__frame { flex: 1 1 0%; overflow-y: auto; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: #1c1917; }
.war-mail__doc { max-width: 32rem; margin: 0 auto; padding: 2rem 1.5rem; font-size: 14px; line-height: 1.6; }
.war-mail__doc p + p { margin-top: 0.875rem; }
.war-mail__brand { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid #e7e5e4; }
.war-mail__cta span { display: inline-block; margin-top: 0.5rem; background: #1c1917; color: #fff; border-radius: 6px; padding: 0.625rem 1.125rem; font-weight: 600; font-size: 14px; }
.war-mail__foot { margin-top: 2rem !important; font-size: 12px; color: #78716c; }

/* ---------------------------------------------------------------- New claim (new.tsx, component-tree.tsx) */
.war-wizard { display: grid; align-items: start; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .war-wizard { grid-template-columns: minmax(0, 1fr) 300px; } }
.war-wizard__main { min-width: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-xs); overflow: hidden; }
.war-wizard__body { padding: 1.5rem; }
.war-wizard__body > * + * { margin-top: 1.25rem; }
.war-strip { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); }
.war-strip > li { flex: 1 1 0%; }
.war-strip__step { display: flex; width: 100%; align-items: center; gap: 0.5rem; white-space: nowrap; padding: 0.75rem 1rem; text-align: left; background: color-mix(in oklab, var(--muted) 60%, transparent); transition: background-color 150ms; }
.war-strip__step:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.war-strip__step.is-current { background: var(--card); }
.war-strip__n { display: flex; width: 22px; height: 22px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; font-size: 11px; font-weight: 600; background: var(--border); color: var(--muted-foreground); }
.war-strip__n.is-on { background: var(--primary); color: var(--primary-foreground); }
.war-strip__label { font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.war-strip__step.is-current .war-strip__label { color: var(--foreground); }
.war-wiz-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 1rem; }
.war-ml { margin-left: 0.375rem; }
.war-mr-1 { margin-right: 0.25rem; }
.war-block { display: block; }
.war-maxw-420 { max-width: 420px; }
.war-select-input { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--input); background: var(--card); padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); appearance: auto; }
.war-select-input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }

.war-order { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--border); background: var(--card); padding: 1rem; text-align: left; transition: background-color 150ms; }
.war-order:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.war-order.is-selected { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 4%, transparent); }
.war-order__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.war-order__who { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.war-order__sub { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.war-order__lines { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.war-order__lines li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.war-order__lines li > .truncate { font-size: 13px; color: var(--foreground); }
.war-order__tree { flex-shrink: 0; font-size: 11px; color: var(--primary); }
.war-order__whole { flex-shrink: 0; font-size: 11px; color: var(--muted-foreground); }

.war-kit { overflow: hidden; border-radius: 10px; border: 1px solid var(--border); }
.war-kit__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--card); transition: background-color 150ms; }
.war-kit__head.is-some { background: color-mix(in oklab, var(--primary) 5%, transparent); }
.war-kit__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--foreground); }
.war-kit__count { flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--primary); }
.war-kit__parts { border-top: 1px solid var(--border); }
.war-kit__parts > li { display: flex; align-items: center; gap: 0.75rem; background: var(--card); padding: 0.625rem 1rem 0.625rem 2.75rem; }
.war-kit__parts > li + li { border-top: 1px solid var(--border); }

.war-outcomes { margin-top: 0.5rem; display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .war-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.war-defect { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.war-photos-help { margin: 0.25rem 0 0.5rem; }
.war-tile__frame > .war-tile__remove { position: absolute; right: 0.375rem; top: 0.375rem; }
.war-tile__cap--staged { padding: 0.5rem; }
.war-summary { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 13px; }
.war-basket-total { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* ---------------------------------------------------------------- Repair bench (repair.tsx, bench-panel.tsx) */
.war-board { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .war-board { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.war-lane { border-radius: 10px; border: 1px solid var(--border); background: var(--card); padding: 0.75rem; box-shadow: var(--shadow-xs); min-width: 0; }
.war-lane__head { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; color: var(--muted-foreground); }
.war-lane__head h2 { flex: 1 1 0%; font-size: 12.5px; font-weight: 600; color: var(--foreground); }
.war-lane__count { border-radius: 9999px; background: var(--muted); padding: 0.125rem 0.5rem; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.war-lane__cards { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.war-lane__empty { padding: 0.75rem 0; text-align: center; font-size: 11px; color: var(--muted-foreground); }
.war-card { border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.625rem; min-width: 0; }
.war-card__code { font-size: 11.5px; font-weight: 500; color: var(--foreground); }
.war-card__item { margin-top: 0.125rem; font-size: 12.5px; color: var(--foreground); }
.war-card__who { font-size: 11px; color: var(--muted-foreground); }
.war-stepper { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .war-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .war-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.war-stepper > li { border-radius: 10px; border: 1px solid var(--border); padding: 0.75rem; }
.war-stepper__n { display: flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: 9999px; font-size: 11px; font-weight: 600; background: var(--muted); color: var(--muted-foreground); }
.war-stepper__n.is-done { background: var(--primary); color: var(--primary-foreground); }
.war-stepper__detail { margin-top: 0.375rem; font-size: 12px; line-height: 1.625; color: var(--muted-foreground); }
.war-stepper__foot { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.war-bench { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .war-bench { grid-template-columns: minmax(0, 1fr) 320px; } }
.war-fee { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
.input.war-w28 { width: 7rem; }
.war-invoice { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* ---------------------------------------------------------------- Supplier recovery (recovery.tsx) */
.war-recovery { display: grid; align-items: start; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .war-recovery { grid-template-columns: minmax(0, 1fr) 280px; } }
.war-note-primary { border-radius: 10px; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); background: color-mix(in oklab, var(--primary) 6%, transparent); padding: 0.75rem 1rem; font-size: 13px; line-height: 1.625; color: var(--foreground); }
.war-rec-facts { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .war-rec-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.war-rec-big { margin-top: 0.25rem; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground); }
.war-rec-rows { margin-top: 0.75rem; border-top: 1px solid var(--border); }
.war-rec-rows > li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.75rem; row-gap: 0.25rem; padding: 0.5rem 0; }
.war-rec-rows > li + li { border-top: 1px solid var(--border); }
.war-rec-note { min-width: 0; flex: 1 1 0%; font-size: 12.5px; color: var(--muted-foreground); }
.war-rec-unassigned { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.war-rec-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.war-totals { display: flex; flex-direction: column; gap: 0.5rem; font-size: 13px; }
.war-totals__sum { border-top: 1px solid var(--border); padding-top: 0.5rem; }
.war-bar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.war-bar { margin-top: 0.25rem; height: 0.375rem; overflow: hidden; border-radius: 9999px; background: var(--muted); }
.war-bar__fill { height: 100%; border-radius: 9999px; background: var(--primary); }

/* ---------------------------------------------------------------- Products & components (products.tsx) */
.war-products { display: grid; align-items: start; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .war-products { grid-template-columns: 280px minmax(0, 1fr); } }
.war-treelist { margin: 0 -0.25rem; display: flex; flex-direction: column; gap: 0.125rem; }
.war-treelist__btn { display: block; width: 100%; border-radius: var(--radius-md); padding: 0.375rem 0.5rem; text-align: left; transition: background-color 150ms; }
.war-treelist__btn:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.war-treelist__btn.is-active { background: color-mix(in oklab, var(--primary) 7%, transparent); }
.war-treelist__title { display: block; font-size: 13px; color: var(--foreground); }
.war-treelist__btn.is-active .war-treelist__title { font-weight: 600; }
.war-treelist__covers { display: block; font-size: 11px; color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); }
.war-picked { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--primary); background: color-mix(in oklab, var(--primary) 4%, transparent); padding: 0.625rem; }
.war-picked__x { flex-shrink: 0; border-radius: 0.25rem; padding: 0.25rem; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.war-picked__x:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); color: var(--foreground); }
.war-variant { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.war-variant__select { margin-top: 0.375rem; width: 100%; border-radius: 8px; border: 1px solid var(--border); background: var(--background); padding: 0.375rem 0.5rem; font-size: 13px; color: var(--foreground); appearance: auto; }
.war-del-tree { display: flex; align-items: center; gap: 0.25rem; font-size: 12px; color: var(--muted-foreground); transition: color 150ms; }
.war-del-tree:hover { color: var(--destructive); }
.war-scroll-x { overflow-x: auto; }
.war-simple { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.war-simple thead tr { border-bottom: 1px solid var(--border); text-align: left; }
.war-simple th { padding: 0.5rem 0.75rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); white-space: nowrap; }
.war-simple tbody tr { border-bottom: 1px solid var(--border); }
.war-simple tbody tr:last-child { border-bottom: 0; }
.war-simple td { padding: 0.625rem 0.75rem; }
.war-retire { color: var(--muted-foreground); transition: color 150ms; }
.war-retire:hover { color: var(--destructive); }
.war-add { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.war-add__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.war-mode { display: flex; align-items: center; gap: 0.25rem; border-radius: var(--radius-md); background: var(--muted); padding: 0.125rem; }
.war-mode__btn { border-radius: 0.25rem; padding: 0.25rem 0.625rem; font-size: 12px; font-weight: 500; color: var(--muted-foreground); transition: color 150ms, background-color 150ms; }
.war-mode__btn:hover { color: var(--foreground); }
.war-mode__btn.is-active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }
.war-add__grid { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .war-add__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .war-span-2 { grid-column: span 2 / span 2; } }
@media (min-width: 1024px) { .war-add__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.war-search--full { width: 100% !important; }
.war-picker-input { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--input); background: var(--card); padding: 0.5rem 0.75rem 0.5rem 2rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.war-picker-input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.war-tree-note { margin-top: 1rem; border-radius: 10px; background: var(--muted); padding: 0.75rem; font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground); }
.war-disc { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.5rem 0.75rem; }
.war-mt05 { margin-top: 0.125rem; }
.war-flag { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.war-flag__grid { margin-top: 0.5rem; display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .war-flag__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Analytics (analytics.tsx) */
.war-an-top { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .war-an-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.war-an-bottom { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .war-an-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.war-chart-box { height: 16rem; }
.war-hchart { display: flex; height: 100%; flex-direction: column; font-size: 11px; color: #666; }
.war-hchart__plot { position: relative; display: flex; flex: 1 1 0%; min-height: 0; padding-top: 8px; }
.war-hchart__y { position: relative; width: 28px; flex-shrink: 0; }
.war-hchart__ylab { position: absolute; right: 8px; transform: translateY(50%); line-height: 1; }
.war-hchart__area { position: relative; flex: 1 1 0%; margin-right: 8px; }
.war-hchart__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--border); }
.war-hchart__at-0 { bottom: 0; } .war-hchart__at-3 { bottom: 25%; } .war-hchart__at-6 { bottom: 50%; } .war-hchart__at-9 { bottom: 75%; } .war-hchart__at-12 { bottom: 100%; }
.war-hchart__cols { position: absolute; inset: 0; display: flex; }
.war-hchart__col { flex: 1 1 0%; display: flex; flex-direction: column-reverse; align-items: center; }
.war-hchart__seg { display: block; width: 80%; }
.war-hchart__s0 { background: #059669; } .war-hchart__s1 { background: #34d399; } .war-hchart__s2 { background: #a7f3d0; }
.war-h12-1 { height: 8.3333%; } .war-h12-2 { height: 16.6667%; } .war-h12-3 { height: 25%; } .war-h12-4 { height: 33.3333%; }
.war-h12-5 { height: 41.6667%; } .war-h12-6 { height: 50%; } .war-h12-7 { height: 58.3333%; } .war-h12-8 { height: 66.6667%; }
.war-h12-9 { height: 75%; } .war-h12-10 { height: 83.3333%; } .war-h12-11 { height: 91.6667%; } .war-h12-12 { height: 100%; }
.war-hchart__x { display: flex; margin: 0 8px 0 28px; padding-top: 9px; }
.war-hchart__x > span { flex: 1 1 0%; text-align: center; line-height: 1; }
.war-hchart__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.625rem; padding-top: 10px; font-size: 12px; line-height: 1; }
.war-hchart__key { display: inline-flex; align-items: center; gap: 4px; }
.war-hchart__k0 { color: #059669; } .war-hchart__k1 { color: #34d399; } .war-hchart__k2 { color: #a7f3d0; }
.war-hchart__swatch { display: inline-block; width: 14px; height: 14px; }
.war-alerts { display: flex; flex-direction: column; gap: 0.625rem; }
.war-alert { border-radius: 10px; border: 1px solid; padding: 0.75rem; }
.war-alert--spike { border-color: oklch(90.1% 0.076 70.697); background: oklch(98% 0.016 73.684); }
.war-alert--trend { border-color: oklch(94.5% 0.129 101.54); background: oklch(98.7% 0.026 102.212); }
.war-alert--improving { border-color: oklch(92.5% 0.084 155.995); background: oklch(98.2% 0.018 155.826); }
.dark .war-alert--spike { border-color: color-mix(in oklab, var(--orange-900) 40%, transparent); background: color-mix(in oklab, var(--orange-900) 20%, transparent); }
.dark .war-alert--trend { border-color: color-mix(in oklab, var(--yellow-900) 40%, transparent); background: color-mix(in oklab, var(--yellow-900) 20%, transparent); }
.dark .war-alert--improving { border-color: color-mix(in oklab, var(--green-900) 40%, transparent); background: color-mix(in oklab, var(--green-900) 20%, transparent); }
.war-alert__row { display: flex; align-items: flex-start; gap: 0.5rem; }
.war-alert__icon { margin-top: 0.125rem; color: oklch(64.6% 0.222 41.116); }
.war-alert__icon.is-good { color: var(--green-700); }
/* progress fills: w-[N%] */
.war-w-0 { width: 0%; } .war-w-1 { width: 1%; } .war-w-2 { width: 2%; } .war-w-3 { width: 3%; } .war-w-4 { width: 4%; } .war-w-5 { width: 5%; } .war-w-6 { width: 6%; } .war-w-7 { width: 7%; } .war-w-8 { width: 8%; } .war-w-9 { width: 9%; } .war-w-10 { width: 10%; } .war-w-11 { width: 11%; } .war-w-12 { width: 12%; } .war-w-13 { width: 13%; } .war-w-14 { width: 14%; } .war-w-15 { width: 15%; } .war-w-16 { width: 16%; } .war-w-17 { width: 17%; } .war-w-18 { width: 18%; } .war-w-19 { width: 19%; } .war-w-20 { width: 20%; } .war-w-21 { width: 21%; } .war-w-22 { width: 22%; } .war-w-23 { width: 23%; } .war-w-24 { width: 24%; } .war-w-25 { width: 25%; } .war-w-26 { width: 26%; } .war-w-27 { width: 27%; } .war-w-28 { width: 28%; } .war-w-29 { width: 29%; } .war-w-30 { width: 30%; } .war-w-31 { width: 31%; } .war-w-32 { width: 32%; } .war-w-33 { width: 33%; } .war-w-34 { width: 34%; } .war-w-35 { width: 35%; } .war-w-36 { width: 36%; } .war-w-37 { width: 37%; } .war-w-38 { width: 38%; } .war-w-39 { width: 39%; } .war-w-40 { width: 40%; } .war-w-41 { width: 41%; } .war-w-42 { width: 42%; } .war-w-43 { width: 43%; } .war-w-44 { width: 44%; } .war-w-45 { width: 45%; } .war-w-46 { width: 46%; } .war-w-47 { width: 47%; } .war-w-48 { width: 48%; } .war-w-49 { width: 49%; } .war-w-50 { width: 50%; } .war-w-51 { width: 51%; } .war-w-52 { width: 52%; } .war-w-53 { width: 53%; } .war-w-54 { width: 54%; } .war-w-55 { width: 55%; } .war-w-56 { width: 56%; } .war-w-57 { width: 57%; } .war-w-58 { width: 58%; } .war-w-59 { width: 59%; } .war-w-60 { width: 60%; } .war-w-61 { width: 61%; } .war-w-62 { width: 62%; } .war-w-63 { width: 63%; } .war-w-64 { width: 64%; } .war-w-65 { width: 65%; } .war-w-66 { width: 66%; } .war-w-67 { width: 67%; } .war-w-68 { width: 68%; } .war-w-69 { width: 69%; } .war-w-70 { width: 70%; } .war-w-71 { width: 71%; } .war-w-72 { width: 72%; } .war-w-73 { width: 73%; } .war-w-74 { width: 74%; } .war-w-75 { width: 75%; } .war-w-76 { width: 76%; } .war-w-77 { width: 77%; } .war-w-78 { width: 78%; } .war-w-79 { width: 79%; } .war-w-80 { width: 80%; } .war-w-81 { width: 81%; } .war-w-82 { width: 82%; } .war-w-83 { width: 83%; } .war-w-84 { width: 84%; } .war-w-85 { width: 85%; } .war-w-86 { width: 86%; } .war-w-87 { width: 87%; } .war-w-88 { width: 88%; } .war-w-89 { width: 89%; } .war-w-90 { width: 90%; } .war-w-91 { width: 91%; } .war-w-92 { width: 92%; } .war-w-93 { width: 93%; } .war-w-94 { width: 94%; } .war-w-95 { width: 95%; } .war-w-96 { width: 96%; } .war-w-97 { width: 97%; } .war-w-98 { width: 98%; } .war-w-99 { width: 99%; } .war-w-100 { width: 100%; }

/* ---------------------------------------------------------------- Decision tree (tree.tsx: hard-coded white cards, no dark variants) */
.war-tree { max-width: 42rem; }
.war-tree-card { background: #fff; border: 2px solid oklch(96.7% 0.003 264.542); border-radius: 0.5rem; padding: 1.5rem; box-shadow: var(--shadow-sm); color: #1c1917; }
.war-tree-card__title { display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: oklch(70.5% 0.213 47.604); }
.war-tree-card__n { display: inline-flex; width: 2rem; height: 2rem; flex-shrink: 0; align-items: center; justify-content: center; margin-right: 0.5rem; border-radius: 9999px; background: oklch(70.5% 0.213 47.604); color: #fff; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.war-tree-card__q { margin-bottom: 1rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: oklch(37.3% 0.034 259.733); }
.war-tree-card__options { display: flex; flex-direction: column; gap: 0.625rem; }
.war-tree-opt {
  width: 100%; text-align: left; border: 2px solid oklch(75% 0.183 55.934); color: oklch(64.6% 0.222 41.116); background: #fff;
  padding: 0.75rem 1rem; border-radius: var(--radius-md); font-weight: 500; transition: all 150ms;
}
.war-tree-opt:hover { background: oklch(70.5% 0.213 47.604); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.war-tree-opt__title { font-weight: 600; }
.war-tree-opt__sub { display: block; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; opacity: 0.8; }
.war-tree-back { margin-top: 1rem; padding: 0.5rem 1.25rem; background: oklch(96.7% 0.003 264.542); border: 2px solid oklch(92.8% 0.006 264.531); color: oklch(55.1% 0.027 264.364); border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; transition: background-color 150ms; }
.war-tree-back:hover { background: oklch(92.8% 0.006 264.531); }
.war-tree-out { border-left: 4px solid oklch(70.5% 0.213 47.604); background: oklch(98.5% 0.002 247.839); padding: 1.25rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.war-tree-badge { display: inline-block; margin-bottom: 0.75rem; border-radius: 0.25rem; padding: 0.25rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; color: #fff; background: oklch(70.7% 0.022 261.325); }
.war-tree-badge--warranty_defect { background: oklch(70.5% 0.213 47.604); }
.war-tree-badge--revival { background: oklch(55.1% 0.027 264.364); }
.war-tree-badge--pad_repair { background: oklch(70.7% 0.165 254.624); }
.war-tree-out__title { margin-bottom: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: oklch(70.5% 0.213 47.604); }
.war-tree-out__desc { margin-bottom: 1rem; color: oklch(37.3% 0.034 259.733); }
.war-tree-discount { margin-bottom: 1rem; background: #fff; border: 2px dashed oklch(75% 0.183 55.934); border-radius: var(--radius-md); padding: 0.875rem; }
.war-tree-discount p { font-size: 0.875rem; line-height: 1.25rem; color: oklch(37.3% 0.034 259.733); }
.war-tree-discount strong, .war-tree-sample strong { color: oklch(64.6% 0.222 41.116); }
.war-tree-actions { margin-bottom: 1rem; list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.war-tree-actions li { font-size: 0.875rem; line-height: 1.25rem; color: oklch(37.3% 0.034 259.733); }
.war-tree-sample { background: var(--amber-50); border: 1px solid var(--orange-300); border-radius: var(--radius-md); padding: 0.875rem; font-size: 0.875rem; line-height: 1.25rem; color: oklch(37.3% 0.034 259.733); }
.war-tree-foot { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.war-tree-start { padding: 0.5rem 1.25rem; background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: opacity 150ms; }
.war-tree-start:hover { opacity: 0.9; }
.war-tree-over { padding: 0.5rem 1.25rem; background: var(--muted); border: 1px solid var(--border); color: var(--foreground); border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.war-tree-over:hover { background: color-mix(in oklab, var(--muted) 70%, transparent); }

/* ---------------------------------------------------------------- Flow builder list (flow-builder/flow-list.tsx) */
.war-flow-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.war-flow-new { border-radius: var(--radius-md); background: var(--primary); padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--primary-foreground); }
.war-flow-new:disabled { opacity: 0.5; }
.war-flow-cancel { border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.war-flow-name { text-align: left; font-weight: 500; color: var(--primary); }
.war-flow-name:hover { text-decoration: underline; }
.war-flow-desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); max-width: 24rem; }
.war-kind { border-radius: 9999px; padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.war-kind--warranty { background: color-mix(in oklab, var(--orange-700) 10%, transparent); color: var(--orange-700); }
.war-kind--shipping { background: var(--blue-100); color: var(--blue-700); }
.war-live { border-radius: 9999px; padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; background: var(--muted); color: var(--muted-foreground); white-space: nowrap; }
.war-live.is-live { background: var(--green-100); color: var(--green-700); }
.war-kinds { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .war-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.war-kindcard { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border-radius: 7px; border: 1px solid var(--border); padding: 0.625rem 0.75rem; text-align: left; }
.war-kindcard:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.war-kindcard__title { display: flex; align-items: center; gap: 0.5rem; font-size: 13px; font-weight: 600; color: var(--foreground); }
.war-kindcard__dot { display: flex; width: 0.875rem; height: 0.875rem; flex-shrink: 0; border-radius: 9999px; border: 1.5px solid var(--border); background: var(--card); }
.war-kindcard__blurb { margin-top: 0.25rem; display: block; font-size: 11.5px; line-height: 1.375; color: var(--muted-foreground); }
.war-field-label { margin-bottom: 0.25rem; display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); }
.war-flow-input { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); padding: 0.375rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }

/* ---- wholesale.css ---- */
/* Wholesale — routes/_auth/enterprise/wholesale.tsx, components/wholesale/{account-detail,catalogue-tab,price-lists}.tsx */

/* "space-y-4 p-6" */
.ws-page > * + * { margin-top: 1rem; }

/* The tab row: "border-b border-border" + "-mb-px flex gap-4", each "border-b-2 px-1 py-2 text-sm font-medium" */
.ws-tabs { border-bottom: 1px solid var(--border); }
.ws-tabs__nav { display: flex; gap: 1rem; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; }
.ws-tab {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.25rem; border-bottom: 2px solid transparent;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap;
  transition: color 150ms, border-color 150ms;
}
.ws-tab:hover { color: var(--foreground); }
.ws-tab.is-active { border-bottom-color: var(--primary); color: var(--foreground); }
/* ReviewBadge: "min-w-[18px] rounded-full bg-destructive px-1.5 py-0.5 text-[10px] font-bold leading-none text-white" */
.ws-badge {
  display: inline-flex; min-width: 18px; align-items: center; justify-content: center; border-radius: 9999px;
  background: var(--destructive); padding: 0.125rem 0.375rem; font-size: 0.625rem; font-weight: 700; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}

/* Pill, Money and Table */
.ws-pill { display: inline-flex; align-items: center; border-radius: 9999px; background: var(--muted); padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; text-transform: capitalize; white-space: nowrap; }
.ws-num { font-variant-numeric: tabular-nums; }
.ws-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.ws-table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.ws-table thead { background: color-mix(in oklab, var(--muted) 40%, transparent); text-align: left; }
.ws-table th { padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); text-align: left; }
.ws-table tbody tr + tr { border-top: 1px solid var(--border); }
.ws-table td { padding: 0.625rem 0.75rem; vertical-align: middle; }
.ws-table--tight td { padding: 0.5rem 0.75rem; }
.ws-table-wrap--wide .ws-table { min-width: 64rem; }

/* Layout helpers these screens use */
.ws-stack-2 > * + * { margin-top: 0.5rem; }
.ws-stack-15 > * + * { margin-top: 0.375rem; }
.ws-stack-3 > * + * { margin-top: 0.75rem; }
.ws-stack-4 > * + * { margin-top: 1rem; }
.ws-stack-6 > * + * { margin-top: 1.5rem; }
.ws-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ws-bar--center { flex-wrap: nowrap; gap: 0.5rem; }
.ws-items-start { align-items: flex-start; }
.ws-items-end { align-items: flex-end; }
.ws-row { display: flex; align-items: center; gap: 0.5rem; }
.ws-row-1 { display: flex; align-items: center; gap: 0.375rem; }
.ws-row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ws-gap-3 { gap: 0.75rem; }
.ws-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.ws-grid-sm-3 { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .ws-grid-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-grid-lg-2 { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .ws-grid-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-span-lg-2 { grid-column: span 2 / span 2; } }
.ws-block { display: block; }
.ws-grow { flex: 1 1 0%; min-width: 0; }
.ws-shrink-0 { flex-shrink: 0; }
.ws-minw0 { min-width: 0; }
.ws-ml-auto { margin-left: auto; }
.ws-mt-05 { margin-top: 0.125rem; }
.ws-mt-1 { margin-top: 0.25rem; }
.ws-mt-2 { margin-top: 0.5rem; }
.ws-mt-4 { margin-top: 1rem; }
.ws-center { text-align: center; }
.ws-nowrap { white-space: nowrap; }
.ws-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cap { text-transform: capitalize; }

/* Text */
.ws-text-xs { font-size: 0.75rem; line-height: 1rem; }
.ws-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.ws-text-13 { font-size: 0.8125rem; line-height: 1.25rem; }
.ws-muted { color: var(--muted-foreground); }
.ws-fg { color: var(--foreground); }
.ws-fg-medium { font-weight: 500; color: var(--foreground); }
.ws-semibold { font-weight: 600; }
.ws-normal { font-weight: 400; }
.ws-mono { font-family: var(--font-mono); }
.ws-sub { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-stat { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.ws-note { font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-warn-text { font-size: 0.75rem; line-height: 1rem; color: var(--amber-600); }
.ws-h2 { margin-top: 0.25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.ws-h2--mono { font-family: var(--font-mono); font-size: 1.25rem; line-height: 1.75rem; }
.ws-hover-fg:hover { color: var(--foreground); }

/* Buttons and links, as the file draws them by hand */
.ws-btn-outline { border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; white-space: nowrap; }
.ws-btn-outline:disabled { opacity: 0.5; cursor: default; }
.ws-btn-icon { display: inline-flex; align-items: center; gap: 0.375rem; }
.ws-btn-sm { border-radius: var(--radius-md); background: var(--primary); padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--primary-foreground); white-space: nowrap; }
.ws-btn-sm:disabled { opacity: 0.5; cursor: default; }
.ws-btn-md { border-radius: var(--radius-md); background: var(--primary); padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--primary-foreground); }
.ws-btn-xs { border-radius: var(--radius-md); background: var(--primary); padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--primary-foreground); }
.ws-btn-xs-outline { border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1rem; white-space: nowrap; }
.ws-btn-xs-outline:disabled { opacity: 0.4; cursor: default; }
.ws-btn-danger-outline { border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent); padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--destructive); }
.ws-btn-danger-outline--md { padding: 0.5rem 1rem; font-weight: 500; }
.ws-btn-block { width: 100%; border-radius: var(--radius-md); background: var(--primary); padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--primary-foreground); }
.ws-btn-block--outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); font-weight: 400; }
.ws-btn-block--danger { background: transparent; border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent); color: var(--destructive); font-weight: 400; }
.ws-btn-block:disabled { opacity: 0.5; cursor: default; }
.ws-btn-apply { border-radius: var(--radius-md); background: var(--primary); padding: 0.375rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--primary-foreground); }
.ws-btn-apply:disabled { opacity: 0.4; cursor: default; }
.ws-btn-30 { height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0 0.625rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.ws-btn-30:hover { background: color-mix(in oklab, var(--foreground) 3%, transparent); }
.ws-btn-30--primary { border-color: transparent; background: var(--primary); padding: 0 0.75rem; font-weight: 600; color: var(--primary-foreground); }
.ws-btn-30--primary:hover { background: var(--primary); opacity: 0.9; }
.ws-code-link { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; color: var(--primary); }
a.ws-code-link:hover { text-decoration: underline; }
.ws-po-code { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; white-space: nowrap; }
.ws-po-code:hover { text-decoration: underline; }
.ws-link-primary { color: var(--primary); }
.ws-link-primary:hover { text-decoration: underline; }
.ws-link-xs { font-size: 0.75rem; line-height: 1rem; color: var(--primary); white-space: nowrap; }
.ws-link-xs:hover { text-decoration: underline; }
.ws-link-xs--strong { font-weight: 500; }
.ws-link-xs--muted { color: var(--muted-foreground); }
.ws-link-xs--muted:hover { color: var(--foreground); }
.ws-under { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; }
.ws-under:hover { color: var(--foreground); }
.ws-back { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-back:hover { color: var(--foreground); }
.ws-trash { flex-shrink: 0; color: var(--muted-foreground); }
.ws-trash:hover { color: var(--destructive); }

/* Inputs: inputClass "w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm" */
.ws-in { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); padding: 0.375rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--foreground); }
.ws-in:disabled { opacity: 0.6; }
select.ws-in { appearance: auto; }
textarea.ws-in { display: block; }
.ws-in--mono { font-family: var(--font-mono); }
.ws-in--mono-sm { font-family: var(--font-mono); font-size: 0.875rem; }
.ws-in--auto { width: auto; }
.ws-in--xs { width: auto; padding: 0.25rem 0.5rem; }
.ws-max-260 { max-width: 260px; }
.ws-w-24 { width: 6rem; }
.ws-w-64 { width: 16rem; max-width: 100%; padding: 0.375rem 0.625rem; }
.ws-field { display: block; font-size: 0.875rem; line-height: 1.25rem; }
.ws-field__label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); }
.ws-field__strong { display: block; margin-bottom: 0.25rem; font-weight: 500; }
/* The small in-table controls: "rounded border bg-background px-1.5 py-1 text-xs" */
.ws-mini { border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--background); padding: 0.25rem 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--foreground); }
select.ws-mini { appearance: auto; }
.ws-mini.is-over { border-color: var(--indigo-500, oklch(58.5% 0.233 277.117)); }
.ws-mini--num { width: 6rem; text-align: right; font-family: var(--font-mono); }
.ws-mini--moq, .ws-mini--16 { width: 4rem; text-align: right; }
.ws-mini--20 { width: 5rem; text-align: right; }
.ws-mini--24 { width: 6rem; text-align: right; }
.ws-mini--160 { max-width: 160px; border-radius: var(--radius-md); }
.ws-mini--150 { max-width: 150px; border-radius: var(--radius-md); }
.ws-mini--full { width: 100%; border-radius: var(--radius-md); }
.ws-mini--11 { font-size: 0.6875rem; }
.ws-mini--lg { border-radius: var(--radius-md); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.ws-mini--note { width: 16rem; max-width: 100%; }

/* Cards */
.ws-card { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 1rem; }
.ws-card--sm { padding: 0.75rem; }
.ws-card--flush { padding: 0; }
.ws-card--bulk { padding: 0.5rem 0.75rem; }
.ws-card__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.ws-divide { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.ws-statcard { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 0.75rem; }
.ws-statcard__value { margin-top: 0.125rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Order numbering steps (Step: every one carries its top rule — first-of-type never matches it) */
.ws-step { display: flex; gap: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.ws-step__n { margin-top: 0.125rem; display: flex; height: 1.25rem; width: 1.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--muted); font-size: 0.6875rem; font-weight: 500; color: var(--muted-foreground); }
.ws-step__body { min-width: 0; flex: 1 1 0%; }
.ws-step__title { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }

/* The account's "off list" chip and the per-account users */
.ws-offlist { border-radius: 9999px; background: var(--amber-50); padding: 0 0.375rem; font-size: 0.625rem; font-weight: 600; line-height: 1.6; color: var(--amber-700); }
.dark .ws-offlist { background: oklch(27.9% 0.077 45.635); color: var(--amber-300); }
.ws-invite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); padding: 0.75rem; }
.ws-invite .ws-field { flex: 1 1 10rem; }

/* Claim review */
.ws-review { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .ws-review { grid-template-columns: 1fr 340px; } }
.ws-answers { margin-top: 0.75rem; display: grid; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
@media (min-width: 640px) { .ws-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-answers dt { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-answers dd { margin-top: 0.125rem; }
.ws-evidence { margin-top: 0.75rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .ws-evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-tile { overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border); }
.ws-tile__btn { display: block; width: 100%; text-align: left; }
.ws-tile__img { display: flex; height: 8rem; width: 100%; align-items: center; justify-content: center; background: var(--muted); color: var(--muted-foreground); }
.ws-tile__cap { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.375rem 0.5rem; font-size: 0.75rem; line-height: 1rem; }
.ws-msgs { margin-top: 0.75rem; }
.ws-msgs > li { font-size: 0.875rem; line-height: 1.25rem; }
.ws-msgs > li + li { margin-top: 0.75rem; }
.ws-msg { margin-top: 0.125rem; white-space: pre-wrap; }
.ws-reply { margin-top: 1rem; display: flex; gap: 0.5rem; }
.ws-credit { border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); padding: 0.375rem 0.5rem; }
.ws-credit__value { font-family: var(--font-mono); font-size: 1rem; line-height: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-credit__hint { margin-left: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-timeline { margin-top: 0.5rem; }
.ws-timeline > li { font-size: 0.75rem; line-height: 1rem; }
.ws-timeline > li + li { margin-top: 0.5rem; }

/* Purchase orders */
.ws-dedicated { font-weight: 500; color: var(--primary); }
.ws-split { margin-top: 0.125rem; display: block; font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-matched { margin-top: 0.5rem; }
.ws-matched > li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.ws-matched > li + li { margin-top: 0.375rem; }
.ws-carried { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-carried > li + li { margin-top: 0.25rem; }

/* Catalogue & tiers */
.ws-lists { border-radius: var(--radius-lg); border: 1px solid var(--border); }
.ws-list { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; }
.ws-list + .ws-list { border-top: 1px solid var(--border); }
.ws-list__main { min-width: 0; flex: 1 1 0%; text-align: left; }
.ws-list__name { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.ws-list__main:hover .ws-list__name { text-decoration: underline; }
.ws-list__sub { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-bulkrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.ws-bulk { display: flex; flex-direction: column; gap: 0.125rem; }
.ws-bulk__label { font-size: 0.6875rem; font-weight: 500; }
.ws-bulk__hint { font-size: 0.625rem; color: var(--muted-foreground); }
.ws-section { white-space: nowrap; text-align: left; font-size: 0.75rem; line-height: 1rem; }
.ws-section:hover { text-decoration: underline; }
.ws-set { margin-left: 0.25rem; border-radius: var(--radius-sm); background: color-mix(in oklab, oklch(58.5% 0.233 277.117) 15%, transparent); padding: 0 0.25rem; font-size: 0.625rem; color: oklch(51.1% 0.262 276.966); }
.ws-dim { opacity: 0.6; }

/* Supplier recovery */
.ws-rec-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; }
.ws-rec-line { display: grid; gap: 0.75rem; padding: 0.75rem 1rem; font-size: 0.8125rem; }
.ws-rec-line + .ws-rec-line { border-top: 1px solid var(--border); }
.ws-rec-line__acct { margin-left: 0.5rem; font-family: var(--font-sans); font-size: 0.6875rem; color: var(--muted-foreground); }
.ws-rec-line__dealer { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
@media (min-width: 768px) {
  .ws-rec-line { grid-template-columns: 130px 1fr 70px 90px 150px; }
  .ws-rec-line__acct { display: none; }
  .ws-rec-line__dealer { display: block; }
}
.ws-unit { margin-left: 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); }

/* Settings: production runs */
.ws-settings { max-width: 36rem; }
.ws-runs { border-radius: var(--radius-md); border: 1px solid var(--border); }
.ws-run { padding: 0.5rem 0.75rem; }
.ws-run + .ws-run { border-top: 1px solid var(--border); }
.ws-run__row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: left; }
.ws-run-editor { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.ws-run-editor > * + * { margin-top: 0.75rem; }
.ws-run-field { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.ws-run-field .ws-in { color: var(--foreground); }
.ws-picker { border-radius: var(--radius-md); border: 1px solid var(--border); padding: 0.75rem; }
.ws-picker > * + * { margin-top: 0.5rem; }
.ws-picker__list { max-height: 20rem; overflow-y: auto; }
.ws-picker__list > * + * { margin-top: 0.75rem; }
.ws-picker__group { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.025em; color: var(--muted-foreground); }
.ws-picker__row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; min-width: 0; }
.ws-picker li + li { margin-top: 0.125rem; }