/* Colors live here and only here (Stage A groundwork, Oct 12): every component reads these custom properties, so
   Light / Dark (data-theme on <html>) changes them in one place. Classic is the one look (Oct 14). Light values in :root; dark values in the two dark blocks below, which must stay identical (tests/test_looks.py).
   Colors typed straight into web/js fail tests/test_looks.py unless they are data (a group's or event's own color, a
   choice list of colors to store) or a paper document printed in its own window. */
:root {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f8f9fb; --border: #e3e6ea; --border-strong: #cfd4da;
  --text: #16191d; --text-2: #4b5563; --muted: #6b7280;
  /* Events United blue for buttons and active items, EU navy for the sidebar, Studio Lab green for highlights */
  --nav: #2b5672; --nav-text: #d3dee7; --nav-active: #ffffff; --nav-dim: #b5cddc; --nav-hover: rgb(255 255 255 / 9%); --nav-sel: rgb(255 255 255 / 15%);
  --accent: #44a0c8; --accent-strong: #2f88b0; --accent-ink: #062534; --link: #1f6f99;
  --highlight: #44b844; --highlight-ink: #06290a; --highlight-hover: #3aa53a; --brand-strip: linear-gradient(90deg, #44a0c8, #44b844);
  --green: #257a2f; --green-bg: #e6f6e6; --teal: #0f766e; --teal-bg: #ccfbf1; --amber: #a16207; --amber-bg: #fef3c7;
  --red: #b91c1c; --red-bg: #fee2e2; --blue: #1d4ed8; --blue-bg: #dbeafe; --gray: #4b5563; --gray-bg: #eef0f3;
  --green-solid: #44b844; --green-btn: #257a2f;
  --hover: rgb(127 127 127 / 8%);
  --tap-highlight: rgb(68 160 200 / 18%);
  /* on the navy bars (sidebar, phone top bars, the clock card, show panels, docks): text, quieter text, lines, see-through fills */
  --on-nav: #ffffff; --on-nav-muted: #aab1ba; --on-nav-soft: #c9ced6; --on-nav-line: #3a4047; --on-nav-accent: #8fd0ec;
  --on-nav-warn: #fbbf24; --on-nav-warn-bg: #33270b;
  --glass-faint: rgb(255 255 255 / 7%); --glass: rgb(255 255 255 / 12%); --glass-strong: rgb(255 255 255 / 18%);
  --glass-line: rgb(255 255 255 / 25%); --glass-line-strong: rgb(255 255 255 / 30%);
  /* text on a solid colored fill (a red or green button, a count badge, a person's or department's own color), a switch's knob */
  --on-solid: #ffffff; --knob: #ffffff;
  /* behind pop-ups, the search box, the phone menu and the "more" sheets */
  --scrim: rgb(10 12 15 / 55%); --scrim-soft: rgb(10 12 15 / 45%); --scrim-nav: rgb(0 0 0 / 45%); --scrim-menu: rgb(0 0 0 / 40%);
  /* paper: quotes, invoices, signatures, logos and email previews stay black on white in light and dark */
  --paper: #ffffff; --paper-ink: #111111; --paper-line: #e5e7eb; --paper-muted: #6b7280; --paper-soft: #666666; --paper-note: #444444;
  /* fields on that paper (a quote's line items): light matches every other field; dark keeps them paper-colored */
  --paper-field: #ffffff; --paper-field-ink: #16191d; --paper-field-line: #cfd4da;
  --logo-dark-bg: #2b5672;
  /* the sign-in page's glow over the navy */
  --login-glow-1: rgb(68 160 200 / 45%); --login-glow-2: rgb(68 184 68 / 28%);
  /* people's initials: the hue is each person's own (--h), these set how light and strong it is */
  --avatar-bg-s: 55%; --avatar-bg-l: 88%; --avatar-ink-s: 45%; --avatar-ink-l: 28%;
  /* Show Flow and Live: the show panel (on --nav), the message banner, timers */
  --show-sub: #c9d7e2; --show-pres: #d6e3ec; --show-local: #ffd98a; --show-saved: #9fe0a6;
  --show-good: #7ee787; --show-warn: #ffc53d; --show-danger: #ff8a8a; --show-danger-bar: #ff6b6b;
  --show-msg: #ffc53d; --show-msg-ink: #2a1d00; --show-msg-label: #5a4300; --show-msg-btn: rgb(255 255 255 / 55%); --show-input: rgb(255 255 255 / 95%);
  /* the stage screen, file viewer and prompter: always black, in every theme (a dark room) */
  --stage-bg: #000000; --stage-ink: #ffffff; --stage-bar: rgb(0 0 0 / 80%); --stage-clock: #cfd6dd; --stage-dim: #8b949e; --stage-soft: #c9d1d9;
  --stage-edge: #666666; --stage-track: #1f2328; --stage-msg: #ffc53d; --stage-msg-ink: #1a1200; --stage-warn: #ffc53d; --stage-danger: #ff5c5c; --stage-over: #7a0b0b;
  --prompter-bar: #111111; --prompter-btn: #1d1d1d; --prompter-btn-line: #555555; --prompter-go: #2f8f2f; --prompter-dim: #aaaaaa;
  --prompter-heading: #44a0c8; --prompter-current: #7ee787;
  /* the warehouse camera */
  --camera-bg: #000000; --camera-ink: #ffffff; --camera-aim: rgb(255 255 255 / 85%); --camera-hit: #3ddc84; --camera-dim: rgb(0 0 0 / 28%);
  /* route maps (the pins sit on light map tiles in every theme) */
  --map-pin: #2b5672; --map-pin-ink: #ffffff; --map-pin-first: #44b844; --map-pin-first-ink: #06290a; --map-route: #44a0c8;
  --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
  --shadow-lg: 0 12px 32px rgb(16 24 40 / 18%);
  --shadow-dock: 0 -6px 20px rgb(0 0 0 / 25%); --shadow-sheet: 0 -8px 20px rgb(16 24 40 / 12%); --shadow-bar: 0 -8px 14px -10px rgb(0 0 0 / 22%);
  --shadow-edge: -8px 0 8px -8px rgb(0 0 0 / 25%); --shadow-float: 0 2px 8px rgb(0 0 0 / 8%); --shadow-pin: 0 1px 4px rgb(0 0 0 / 45%);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* how far down a sticky bar must sit to clear the app's own sticky header (the phone top bar; on a computer the search
     bar across the top of the page sets it, search.js) */
  --sticky-top: 0px;
  /* the page's side gutter and top space on a computer ; the search bar across the top of the
     page uses the same gutter, so the field lines up with the page title in light and dark */
  --page-gutter: 28px;
  --page-top: 22px;
  /* the smallest comfortable thing to tap with a thumb (or a glove) */
  --tap: 44px;
  color-scheme: light;
}
/* Dark: follows the computer unless the person picked Light (data-theme="light"), and always when they picked Dark.
   The two blocks hold the same values (tests/test_looks.py checks). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1113; --surface: #181b1f; --surface-2: #1e2226; --border: #2b3036; --border-strong: #3a4047;
    --text: #eceef1; --text-2: #b6bcc5; --muted: #8b939e; --nav: #10283a; --link: #6cbde0;
    --green: #6fd36f; --green-bg: #12301f; --green-btn: #2e8a38; --teal: #5eead4; --teal-bg: #0f2e2b; --amber: #fbbf24; --amber-bg: #33270b;
    --red: #f87171; --red-bg: #3a1616; --blue: #93c5fd; --blue-bg: #172745; --gray: #b6bcc5; --gray-bg: #262a30;
    --avatar-bg-s: 35%; --avatar-bg-l: 25%; --avatar-ink-s: 60%; --avatar-ink-l: 85%;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%); --shadow-lg: 0 12px 32px rgb(0 0 0 / 50%);
    --paper-field: #ffffff; --paper-field-ink: #111111; --paper-field-line: #8a919b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1113; --surface: #181b1f; --surface-2: #1e2226; --border: #2b3036; --border-strong: #3a4047;
  --text: #eceef1; --text-2: #b6bcc5; --muted: #8b939e; --nav: #10283a; --link: #6cbde0;
  --green: #6fd36f; --green-bg: #12301f; --green-btn: #2e8a38; --teal: #5eead4; --teal-bg: #0f2e2b; --amber: #fbbf24; --amber-bg: #33270b;
  --red: #f87171; --red-bg: #3a1616; --blue: #93c5fd; --blue-bg: #172745; --gray: #b6bcc5; --gray-bg: #262a30;
  --avatar-bg-s: 35%; --avatar-bg-l: 25%; --avatar-ink-s: 60%; --avatar-ink-l: 85%;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%); --shadow-lg: 0 12px 32px rgb(0 0 0 / 50%);
  --paper-field: #ffffff; --paper-field-ink: #111111; --paper-field-line: #8a919b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* turning a phone sideways never blows the text up */
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
  -webkit-tap-highlight-color: var(--tap-highlight); }
/* no double-tap zoom on controls, so quick taps (with gloves too) always land */
a, button, input, select, textarea, label, summary, [data-act], [data-href] { touch-action: manipulation; }
a { color: var(--link); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
h1, h2, .page-title { overflow-wrap: anywhere; }  /* a long event name or email never pushes the page sideways */
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num .settled-note { white-space: normal; }  /* "Payments tracked in QuickBooks" in a balance cell wraps rather than widening its table */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.grow { flex: 1; }
.hide { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; min-height: 100dvh; }
.sidebar { background: var(--nav); color: var(--nav-text); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; color: var(--on-nav); font-weight: 700; font-size: 15px; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent) 55%, var(--highlight)); display: grid; place-items: center; color: var(--accent-ink); font-weight: 800; flex: none; }
.brand small { display: block; font-weight: 500; color: var(--nav-text); font-size: 11px; }
.brand-home { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; border-radius: 8px; }  /* the name: back to the dashboard */
.brand-home:hover { color: inherit; text-decoration: none; }
.brand-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar .brand { border-bottom: 2px solid; border-image: var(--brand-strip) 1; margin-bottom: 4px; }
.nav-group { padding: 6px 8px; }
.nav-title { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--nav-dim); padding: 10px 10px 4px; }
.nav-title-t { flex: 1; min-width: 0; }
.nav-caret { font-size: 13px; line-height: 1; letter-spacing: 0; transition: transform .15s ease-out; }
.nav-group.folded .nav-caret { transform: rotate(-90deg); }
.nav-group.fold-pending .nav-caret { transform: rotate(-45deg); opacity: .6; }  /* (folds when you leave the page it holds) */
.nav-sum { background: var(--highlight); color: var(--highlight-ink); border-radius: 999px; font-size: 11px; padding: 0 7px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.nav-group:not(.folded) .nav-sum { display: none; }  /* (open: the counts are on the links themselves) */
.nav-group.folded { padding-bottom: 2px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--nav-text); font-weight: 500; }
.nav-link.active { background: var(--nav-sel); color: var(--nav-active); box-shadow: inset 3px 0 0 var(--highlight); }
.nav-link .ico { width: 18px; text-align: center; opacity: .85; }
.nav-link .pill { margin-left: auto; background: var(--highlight); color: var(--highlight-ink); border-radius: 999px; font-size: 11px; padding: 0 7px; font-weight: 700; }
.sidebar-foot { margin-top: auto; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--nav-sel); font-size: 12px; }
.sidebar-foot button { width: 100%; }
.sidebar-foot .btn-ghost { color: var(--on-nav-soft); width: auto; }
.sidebar-foot .nav-crew-app { margin-top: 8px; background: transparent; color: var(--on-nav); border-color: var(--on-nav-line); }
.side-me { display: flex; align-items: center; gap: 8px; min-width: 0; }
img.avatar { object-fit: cover; }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
/* a group with one link (Otis): just the link, no title to fold */
.nav-group.nav-solo { padding-top: 8px; }
/* hide the sidebar (Batch 8 item 2): a computer only; a phone keeps its ☰ menu */
.side-hide, .side-show { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 16px; line-height: 1; flex: none; }
.side-hide { background: none; color: var(--nav-dim); }
.side-hide:hover { background: var(--nav-sel); color: var(--on-nav); }
.side-show { display: none; position: fixed; top: calc(10px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); z-index: 30;
  background: var(--nav); color: var(--on-nav); box-shadow: var(--shadow); }
@media (min-width: 861px) {
  .shell.side-hidden { grid-template-columns: minmax(0, 1fr); }
  .shell.side-hidden .sidebar { display: none; }
  .shell.side-hidden .side-show { display: inline-grid; }
  .shell.side-hidden .content { padding-left: max(var(--page-gutter), 48px); }
}
.main { min-width: 0; }
.topbar { display: none; }
.content { padding: calc(var(--page-top) + env(safe-area-inset-top)) max(var(--page-gutter), env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) var(--page-gutter); max-width: 1400px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head > * { min-width: 0; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.page-title::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; margin-top: 6px; background: var(--brand-strip); }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); }
/* staging / demo copies say so in the top bar on phones (the floating tag would sit on the bottom bars) */
.env-tag { display: none; flex: none; background: var(--amber-bg); color: var(--amber); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  padding: 7px 12px; border-radius: var(--radius-sm); font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; min-height: 34px; text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-dark { background: var(--text); color: var(--surface); border-color: var(--text); }
.btn-danger { background: var(--red); border-color: var(--red); color: var(--on-solid); }
.btn-danger-ghost { color: var(--red); border-color: transparent; background: transparent; margin-right: auto; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: 4px 9px; min-height: 28px; font-size: 12.5px; }
.btn-lg { padding: 12px 18px; font-size: 16px; min-height: 48px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-green { background: var(--green-btn); border-color: var(--green-btn); color: var(--on-solid); }
.btn:not(:disabled):active { filter: brightness(.93); }
.icon-btn { border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: 6px;
  display: inline-grid; place-items: center; padding: 0; flex: none; }
.icon-btn:active { background: var(--surface-2); }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 10px; width: 100%; min-height: 34px; max-width: 100%; }
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--highlight); }
input[type=color] { padding: 2px; height: 34px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
.search { max-width: 260px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filters select, .filters input { width: auto; }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.seg a, .seg button { white-space: nowrap; padding: 6px 11px; color: var(--text-2); background: var(--surface); border: 0; font: inherit; cursor: pointer; border-right: 1px solid var(--border); flex: none; }
.seg a:last-child, .seg button:last-child { border-right: 0; }
.seg .active { background: var(--text); color: var(--surface); box-shadow: inset 0 -3px 0 var(--highlight); }

/* ---------------------------------------------------------------- cards / kpis */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; flex-wrap: wrap; }
.card-head > * { min-width: 0; }
.card-body { padding: 0 16px 16px; }
.card-pad { padding: 16px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); color: inherit; display: block; min-width: 0; }
.kpi-label { color: var(--muted); font-size: 12px; font-weight: 550; }
.kpi-value { font-size: 24px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-sub { color: var(--muted); font-size: 12px; }
.fill-box { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.fill-box > div { padding: 10px 6px; }
.fill-box .big { font-size: 26px; font-weight: 700; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }
.list > li:first-child { border-top: 0; }
.list > li > * { min-width: 0; }
.list .meta { color: var(--muted); font-size: 12px; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.loading { padding: 40px; text-align: center; color: var(--muted); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--highlight); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.callout { padding: 10px 12px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: 13px; }
.callout.info { background: var(--blue-bg); color: var(--blue); }
.callout.ok { background: var(--green-bg); color: var(--green); }
/* a question asked in the page beside what was pressed (lib.askInline), e.g. "Book anyway" for overtime */
.ask-inline { margin: 8px 0; flex: 1 1 100%; max-height: min(60vh, 420px); overflow: auto; }
.ask-inline p { margin: 0 0 6px; }
.ask-list { margin: 0 0 8px; padding-left: 18px; }
.ask-list li { margin: 2px 0; overflow-wrap: anywhere; }
.ask-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.callout.ask-inline .btn { background: var(--surface); color: var(--text); border-color: var(--border); }
.callout.ask-inline .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 860px), (pointer: coarse) { .ask-btns .btn { min-height: var(--tap); flex: 1 1 auto; } }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c, var(--muted)); flex: none; }

/* ---------------------------------------------------------------- badges / chips / avatars */
.badge { display: inline-flex; align-items: center; align-self: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tone-green { background: var(--green-bg); color: var(--green); }
.tone-teal { background: var(--teal-bg); color: var(--teal); }
.tone-amber { background: var(--amber-bg); color: var(--amber); }
.tone-red { background: var(--red-bg); color: var(--red); }
.tone-blue { background: var(--blue-bg); color: var(--blue); }
.tone-gray { background: var(--gray-bg); color: var(--gray); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: var(--gray-bg); color: var(--text-2); font-size: 12px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none;
  background: hsl(var(--h) var(--avatar-bg-s) var(--avatar-bg-l)); color: hsl(var(--h) var(--avatar-ink-s) var(--avatar-ink-l)); }
.avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.stars { color: var(--amber); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
/* sortable headings (table({ sort })): the heading is the button */
.th-sort { all: unset; cursor: pointer; white-space: nowrap; }
.th-sort:hover, th[aria-sort=ascending] .th-sort, th[aria-sort=descending] .th-sort { color: var(--text); }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:active td { background: var(--surface-2); }
.table .sel { width: 34px; }
/* lib.js table() puts each tick box in a label whose tap area fills its cell: a tap anywhere in the cell ticks the row
   instead of opening it (app.js never follows a row link for a tap on a label). The box itself stays where it was. */
.sel-hit { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: pointer; }
.table > * > tr > .sel { position: relative; }
.table > * > tr > .sel > .sel-hit::after { content: ""; position: absolute; inset: 0; }
.table tr.warn td { background: color-mix(in srgb, var(--amber-bg) 45%, var(--surface)); }
.card > .table-wrap .table th:first-child, .card > .table-wrap .table td:first-child { padding-left: 16px; }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell strong { display: block; }
.bulkbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 9px 13px; color: var(--text-2); font-weight: 550; border-bottom: 2px solid transparent; white-space: nowrap; flex: none; }
.tabs a.active { color: var(--text); border-bottom-color: var(--highlight); }
.tabs .count { margin-left: 6px; font-size: 11px; background: var(--gray-bg); border-radius: 999px; padding: 1px 6px; }
/* the tab or segment holding what a sidebar count counts (app.js paintDue, Batch 3B item 4): solid green with the count
   while it isn't open, a green count once it is */
.seg a.due:not(.active), .tabs a.due:not(.active) { background: var(--highlight); color: var(--highlight-ink); font-weight: 650; }
.seg a.due:not(.active):hover, .tabs a.due:not(.active):hover { background: var(--highlight-hover); color: var(--highlight-ink); }
.tabs a.due:not(.active) { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.due-n { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  background: var(--highlight-ink); color: var(--highlight); }
.due-n:empty { display: none; }
.active > .due-n, .tabs a.due .count { background: var(--highlight); color: var(--highlight-ink); font-weight: 700; }
.tabs a.due:not(.active) .count { background: var(--highlight-ink); color: var(--highlight); }

/* ---------------------------------------------------------------- event header & crewing */
.event-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.event-head > * { min-width: 0; }
.event-swatch { width: 6px; align-self: stretch; border-radius: 4px; background: var(--c); }
.fill-metrics { display: inline-grid; grid-template-columns: repeat(4, auto); gap: 2px 12px; font-size: 12px; }
.fill-metrics span { color: var(--muted); }
.fill-metrics b { font-variant-numeric: tabular-nums; }
.meter { height: 6px; background: var(--gray-bg); border-radius: 99px; overflow: hidden; min-width: 70px; }
.meter > i { display: block; height: 100%; background: var(--green-solid); }
.meter.low > i { background: var(--red); }
.meter.mid > i { background: var(--amber); }
/* warehouse progress on job rows (Batch 4 item 10): prepared, then back / missing or lost / still out once it has gone */
.meter.gp { display: flex; margin: 3px 0 2px; }
.meter.gp > i { background: var(--accent); }
.meter.gp > i.b { background: var(--green-solid); }
.meter.gp > i.m { background: var(--red); }
.meter.gp > i.o { background: var(--amber); }
.gp-line { display: block; min-width: 0; }
.gp-line .small { color: var(--muted); }
.call-group { margin-bottom: 16px; }
.call-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--nav); color: var(--on-nav); border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; }
.call-head .muted { color: var(--on-nav-muted); }
.call-head .btn { background: transparent; color: var(--on-nav); border-color: var(--on-nav-line); }
.pos { border: 1px solid var(--border); border-top: 0; background: var(--surface); border-left: 4px solid var(--red); }
.pos.full { border-left-color: var(--highlight); }
.pos.part { border-left-color: var(--amber); }
.pos:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.pos-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(56px, .5fr)) auto; gap: 8px; align-items: center; padding: 10px 14px; }
.pos-row .stat { text-align: center; }
.pos-row .stat b { display: block; font-size: 15px; }
.pos-row .stat small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.pos-title { font-weight: 650; }
.pos-sub { color: var(--muted); font-size: 12px; }
.pos-crew { padding: 0 14px 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.crew-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px 2px 2px; background: var(--surface-2); font-size: 12.5px; max-width: 100%; }
.crew-pill .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.crew-pill button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 13px; }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--muted); }
.toggle input { appearance: none; width: 34px; height: 20px; border-radius: 99px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; border: 0; min-height: 0; padding: 0; flex: none; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--knob); transition: transform .15s; }
.toggle input:checked { background: var(--green-solid); }
.toggle input:checked::after { transform: translateX(14px); }

/* ---------------------------------------------------------------- schedule / calendar */
.sched { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sched table { border-collapse: collapse; width: 100%; min-width: 900px; table-layout: fixed; }
.sched th, .sched td { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); padding: 6px; vertical-align: top; }
.sched th { background: var(--surface-2); font-size: 12px; font-weight: 600; text-align: left; }
.sched th.today { background: var(--amber-bg); }
.sched td.name { width: 180px; border-left: 0; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched th:first-child { width: 180px; border-left: 0; }
/* the name column stays put while the days scroll sideways */
.sched td.name, .sched th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--border); }
.sched td.name { background: var(--surface); }
.slot { display: block; border-radius: 5px; padding: 3px 6px; font-size: 11.5px; margin-bottom: 3px; background: color-mix(in srgb, var(--c) 18%, var(--surface)); border-left: 3px solid var(--c); color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.pending { border-left-style: dashed; opacity: .75; }
.unav { display: block; font-size: 11px; color: var(--red); background: var(--red-bg); border-radius: 4px; padding: 2px 5px; margin-bottom: 3px; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.month .dow { background: var(--surface-2); font-size: 11.5px; font-weight: 600; padding: 6px; color: var(--muted); border-bottom: 1px solid var(--border); }
.month .day { min-height: 110px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 4px; min-width: 0; }
.month .day:nth-child(7n+1) { border-left: 0; }
.month .day.other { background: var(--surface-2); color: var(--muted); }
.month .day.today .dnum { background: var(--highlight); color: var(--highlight-ink); border-radius: 99px; padding: 0 6px; }
.month .dnum { font-size: 12px; font-weight: 600; margin-bottom: 3px; display: inline-block; }

/* ---------------------------------------------------------------- forms */
.form-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.field { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.half { flex: 1 1 calc(50% - 6px); }
.field.third { flex: 1 1 calc(33% - 8px); }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.req { color: var(--red); margin-left: 2px; }
.help { color: var(--muted); font-size: 11.5px; }
.help.field-msg { color: var(--red); flex-basis: 100%; }  /* a phone or email box that isn't one (Batch 9 items 1 and 2) */
/* a field a source keeps (Stage C2 item 7): read only, with "From the rental system: change it there" right under it */
.field.is-locked input[readonly], .field.is-locked textarea[readonly], .field.is-locked select:disabled,
.field.is-locked input:disabled { background: var(--surface-2); color: var(--text-2); cursor: not-allowed; }
.check.is-locked { cursor: default; }
.help.lock-note { color: var(--text-2); flex-basis: 100%; }
.check { display: flex; gap: 8px; align-items: center; flex: 1 1 100%; font-weight: 500; flex-wrap: wrap; cursor: pointer; }
.check.half { flex: 1 1 calc(50% - 6px); }
.form-more { display: contents; }
.form-more[hidden] { display: none; }
.field[hidden] { display: none; }
.form-more-toggle { flex: 1 1 100%; justify-content: flex-start; }
/* "+ New …" beside a dropdown fed by a Settings list, and its small form under the field (listedit.js) */
.list-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.list-pick > select { flex: 1 1 140px; min-width: 0; }
.list-pick > .list-add-btn { flex: 0 0 auto; white-space: nowrap; }
.list-home { margin: 2px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.list-home.empty { color: var(--amber); font-weight: 600; }
.list-add { margin-top: 4px; padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.list-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.list-add-f { flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.list-add-f[hidden] { display: none; }
.list-add-f > span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.list-add-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-section { flex: 1 1 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }
.multicheck { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; position: relative; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 10px; cursor: pointer; font-size: 12.5px; }
.chip-check input:checked + span { background: var(--text); color: var(--surface); border-color: var(--text); }
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); }

/* ---------------------------------------------------------------- modal / toast */
.modal-wrap { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; animation: fade .12s ease-out; overscroll-behavior: contain; }
/* (lib.js fits the backdrop to the part of the screen the keyboard leaves free, so the pop-up and its buttons shrink to fit too) */
.modal { background: var(--surface); border-radius: 14px; width: min(560px, 100%); min-width: 0; max-height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); outline: none; }
.modal-wide { width: min(980px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex: none; }
.modal-head h2 { min-width: 0; }
.modal-body { padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); flex: none; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
#toasts { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { background: var(--text); color: var(--surface); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-weight: 550; transition: opacity .3s, transform .3s; max-width: 100%; }
.toast-error { background: var(--red); color: var(--on-solid); }
.toast:not(.toast-error) { border-left: 4px solid var(--highlight); }
.toast.out { opacity: 0; transform: translateY(8px); }
/* in the crew app toasts sit above the bottom tabs; while a pop-up is open they move to the top, clear of its buttons */
body:has(.bottom-nav) #toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
body:has(.modal-wrap) #toasts { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }

/* ---------------------------------------------------------------- bars (reports) */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bar-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 14px; background: var(--gray-bg); border-radius: 4px; overflow: hidden; }
.bar-track > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bar-track.alt > i { background: var(--teal); }
.cols { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 10px; }
.cols .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.cols .pair { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.cols .pair i { width: 40%; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--accent); min-height: 2px; }
.cols .pair i.rev { background: var(--teal); }
.cols small { font-size: 11px; color: var(--muted); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* ---------------------------------------------------------------- documents (quote / invoice) */
.doc { background: var(--paper); color: var(--paper-ink); max-width: 820px; margin: 0 auto; padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow); }
.doc table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.doc th, .doc td { padding: 8px 6px; border-bottom: 1px solid var(--paper-line); text-align: left; }
.doc th { font-size: 11px; text-transform: uppercase; color: var(--paper-muted); }
.doc .totals { margin-left: auto; width: 280px; margin-top: 14px; }
.doc .totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.doc .totals .grand { font-weight: 700; font-size: 17px; border-top: 2px solid var(--paper-ink); padding-top: 8px; }
.doc-head { display: flex; justify-content: space-between; gap: 20px; }
.doc h1 { font-size: 28px; }
/* fields on the paper stay paper-colored in dark too (not dark boxes on a white page); the focus edge still shows */
.doc :is(input, select, textarea) { background: var(--paper-field); color: var(--paper-field-ink); }
.doc :is(input, select, textarea):not(:focus) { border-color: var(--paper-field-line); }
.line-edit input, .line-edit textarea { min-height: 30px; padding: 4px 6px; }
.line-edit textarea { display: block; width: 100%; resize: vertical; overflow: hidden; line-height: 1.35; }
.doc table.doc-lines td:first-child { white-space: pre-line; }  /* a line description typed on several lines reads that way */
/* internal unit cost under each line (people who see costs; never printed): the pair reads as one line */
@media screen { .doc table.doc-lines tr.has-cost > td { border-bottom: 0; } .doc table.doc-lines tr.line-cost-row > td { padding-top: 0; } }
.doc table.doc-lines td.lc-label { text-align: right; color: var(--paper-muted); font-size: 12px; }
/* percent discounts (Batch 3 item 5): a line's discount in words under it, and the document's percents under the lines.
   Grey text on the paper stays paper grey in light and in dark (the page around it may be dark). */
.doc .muted { color: var(--paper-muted); }
.doc .doc-off { font-size: 12px; color: var(--paper-muted); white-space: normal; margin-top: 2px; }
.doc .doc-off:empty { display: none; }
/* a line's kind, picked in its row (never printed) */
.doc .doc-kind { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--paper-muted); }
.doc .doc-kind select { font-size: 12px; padding: 2px 6px; min-height: 26px; width: auto; }
.doc-disc { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--paper-line); border-radius: var(--radius-sm); }
.doc-disc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.doc-disc-f { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--paper-ink); }
.doc-disc-f input { width: 88px; text-align: right; }
/* "Apply <client>'s discounts" wraps on a phone instead of widening the page (long client names) */
.doc-disc-row .btn { white-space: normal; text-align: left; max-width: 100%; }
/* a client's discount rules (discounts.js), inline on the client's page */
.dsc-list { list-style: none; margin: 0 0 10px; padding: 0; }
.dsc-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dsc-row:last-child { border-bottom: 0; }
.dsc-acts { display: inline-flex; align-items: center; gap: 6px; }
.dsc-acts input { width: 76px; text-align: right; }
.dsc-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; align-items: end; }
.dsc-f { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.dsc-edit { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.dsc-edit .dsc-acts { align-self: end; }
.dsc-warn { flex-basis: 100%; color: var(--amber); }
.tx-body { display: grid; gap: 10px; }
.tx-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.tx-f { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.tx-f input, .tx-f select { width: 100%; }
.tx-n { max-width: 110px; }
.tx-prompt { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--blue-bg); color: var(--text); border: 1px solid var(--border); }
.tx-prompt a { color: var(--link); }
.tx-log { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.tx-log li { display: grid; gap: 2px; font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.tx-log li:last-child { border-bottom: 0; }
.tx-hist summary { cursor: pointer; color: var(--link); min-height: 24px; }
.tx-strip { display: grid; gap: 6px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 13px; }
.tx-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tx-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tx-acts { gap: 6px; flex-wrap: wrap; }
.tx-ask { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.tx-ask .grow { flex: 1 1 200px; }
.qb-taxslot .tx-strip { margin-top: 10px; }
.doc .tx-strip { background: transparent; border: 1px dashed var(--paper-line); color: var(--paper-ink); }
.doc .tx-strip .tx-title { color: var(--paper-muted); }
/* credit notes and extra billing (Batch 4 item 7, credits.js) */
.cn-body { display: grid; gap: 10px; }
.cn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cn-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.cn-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cn-list li > div.muted.small { flex: 1 1 100%; }
.cn-list .num { font-variant-numeric: tabular-nums; }
.cn-form, .cn-act { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
.cn-how { display: flex; justify-self: stretch; overflow: visible; }
.cn-how button { flex: 1 1 0; min-width: 0; white-space: normal; padding: 6px 6px; line-height: 1.2; }
.cn-how button[disabled] { opacity: .45; cursor: not-allowed; }
.cn-lines { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; padding-right: 6px; }
@media (max-width: 700px) { .cn-lines { max-height: none; overflow: visible; padding-right: 0; } }
.cn-line { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; }
.cn-desc { min-width: 0; overflow-wrap: anywhere; }
.cn-q { display: flex; gap: 6px; align-items: center; flex: none; }
.cn-q input { width: 64px; min-width: 0; padding-left: 6px; padding-right: 6px; text-align: right; }
.cn-q .muted { white-space: nowrap; }
.cn-row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.cn-row .grow { flex: 1 1 160px; }
.cn-err { color: var(--red); }
.cn-void { margin: 16px 0 0; padding: 8px 10px; border: 1px dashed var(--paper-line); border-radius: var(--radius-sm); color: var(--paper-ink); }
.cn-voidbox summary { cursor: pointer; color: var(--link); min-height: 24px; margin-top: 10px; }
.doc .tx-strip a { color: var(--link); }
.doc .tx-strip .tx-f { color: var(--paper-muted); }
.doc .tx-strip .btn-ghost { color: var(--paper-ink); border-color: var(--paper-line); }
.doc .tx-strip .btn-ghost:hover { background: var(--paper-line); }
.doc-disc-k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--paper-muted); }

/* damaged or lost gear on return (Batch 4 item 2, damage.js) */
.wh-hooks:empty { display: none; }
.wh-hooks > div:not(:empty) { margin-top: 14px; }
.dmg-body { display: grid; gap: 12px; }
.dmg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dmg-list > li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dmg-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.dmg-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.dmg-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.dmg-pick { display: inline-flex; align-items: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.dmg-pick input { width: 20px; height: 20px; margin: 0; }
.dmg-meta { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.dmg-meta a { color: var(--link); }
.dmg-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dmg-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.dmg-side { flex: 0 1 280px; min-width: 0; display: grid; gap: 6px; justify-items: end; text-align: right; }
.dmg-dec { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; font-size: 13px; }
.dmg-dec a { color: var(--link); }
.dmg-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dmg-price { width: 150px; text-align: left; }
.dmg-off { justify-self: stretch; text-align: left; }
.dmg-file { cursor: pointer; }
.dmg-nb { display: grid; gap: 8px; }
.dmg-charge { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
@media (max-width: 600px) {
  .dmg-side { flex: 1 1 100%; justify-items: start; text-align: left; }
  .dmg-dec, .dmg-acts { justify-content: flex-start; }
  .dmg-price { width: 100%; }
}

/* ---------------------------------------------------------------- auth */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(1100px 560px at 15% -10%, var(--login-glow-1) 0%, transparent 60%), radial-gradient(900px 520px at 105% 110%, var(--login-glow-2) 0%, transparent 60%), var(--nav); }
.auth-card { background: var(--surface); border-radius: 16px; padding: 28px; width: min(400px, 100%); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-strip); }
.auth-card .brand { color: var(--text); padding: 0 0 18px; font-size: 18px; }
/* the bot check's hidden field (protect_api.py): off screen, out of the tab order and hidden from screen readers */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.auth-card .brand small { color: var(--muted); }
.demo-box { margin-top: 18px; border-top: 1px dashed var(--border-strong); padding-top: 14px; }
.demo-box .row .btn { flex: 1; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 14px; }
.auth-links a, .linkish { color: var(--link); }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.auth-links a, .auth-links .linkish { min-height: 32px; display: inline-flex; align-items: center; }
.help-box { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.help-box p + p { margin-top: 8px; }
/* passkeys (passkeys.js): "or" before Sign in with a passkey, the "Use Face ID next time?" card, the lists */
.pk-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted); font-size: 12.5px; }
.pk-or::before, .pk-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.pk-help { margin: 6px 0 0; text-align: center; }
.pk-offer-btns { display: grid; gap: 8px; margin-top: 14px; }
.pk-msg:empty { display: none; }
.pk-msg { margin: 10px 0 0; color: var(--red); }
.pk-list > li { padding-left: 0; padding-right: 0; flex-wrap: wrap; }
.pk-list > li > .grow { flex: 1 1 240px; }
.pk-list .pk-name { overflow-wrap: anywhere; }
.pk-acts { gap: 4px; flex-wrap: nowrap; margin-left: auto; }
.pk-remove { color: var(--red); }
.pk-warn { color: var(--amber); }
.pk-step { margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.pk-step label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.pk-step-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pk-step-row input { flex: 1 1 180px; min-width: 0; }
.pk-step .btn-ghost { margin-top: 8px; }
.pk-rename .pk-step-row input { flex-basis: 140px; }
.pk-crew-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pk-admin-inline { border-top: 1px solid var(--border); padding-top: 10px; }
@media (max-width: 860px), (pointer: coarse) { .pk-acts .btn, .pk-step-row .btn { min-height: var(--tap); } }
.help-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.help-contact .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- crew (mobile-first) app */
.m-shell { max-width: 640px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.m-top { position: sticky; top: 0; z-index: 10; background: var(--nav); color: var(--on-nav); border-bottom: 3px solid; border-image: var(--brand-strip) 1;
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 10px; }
.m-top h1 { font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-top .icon-btn { color: var(--on-nav); }
.m-top .icon-btn:active { background: var(--nav-hover); }
.m-top .env-tag { display: inline-block; }
.m-top .m-office { flex: none; background: transparent; color: var(--on-nav); border-color: var(--on-nav-line); }
.m-content { padding: 14px max(14px, env(safe-area-inset-right)) 20px max(14px, env(safe-area-inset-left)); }
.m-content > * + * { margin-top: 14px; }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); z-index: 20; }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 2px 9px; min-height: 54px; color: var(--muted); font-size: 11px; font-weight: 600; position: relative; }
.bottom-nav a .ico { font-size: 20px; line-height: 1; }
.bottom-nav a.active { color: var(--text); }
.bottom-nav a.active .ico { transform: translateY(-1px); }
.bottom-nav .pill { position: absolute; top: 4px; left: calc(50% + 8px); background: var(--red); color: var(--on-solid); border-radius: 99px; font-size: 10px; padding: 0 5px; }
/* the crew app on a computer (Batch 3B item 13): from 1024px wide an account layout, the header across the window with
   the company on the left and Messages and the account on the right, a 240px left menu (the tabs, then the Me page's
   items) and the page about 960px wide; no bottom bar. Phones and tablets in portrait keep the phone layout. */
.m-brand, .m-acct, .m-side { display: none; }
@media (min-width: 1024px) {
  .m-shell { max-width: none; padding-bottom: 0; }
  /* (an iPad in landscape is this wide: the installed app draws under its status bar and over its home bar, so the
     header and everything at the bottom of the window keep the safe-area insets) */
  .m-top { padding: calc(10px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 10px max(24px, env(safe-area-inset-left)); gap: 14px; }
  .m-top .m-brand { display: flex; align-items: center; gap: 10px; flex: none; max-width: 340px; color: var(--on-nav); font-size: 17px; font-weight: 700; text-decoration: none; }
  .m-brand img { height: 30px; max-width: 150px; object-fit: contain; }
  .m-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-top h1.m-same { visibility: hidden; }
  .m-top h1 { font-size: 15px; font-weight: 600; color: var(--on-nav-muted); padding-left: 14px; border-left: 1px solid var(--on-nav-line); }
  .m-top .m-acct { display: flex; align-items: center; gap: 8px; flex: none; max-width: 260px; min-height: 36px; padding: 4px 14px 4px 10px; border: 1px solid var(--on-nav-line);
    border-radius: 999px; color: var(--on-nav); font-size: 14px; font-weight: 600; text-decoration: none; }
  .m-acct-i { font-size: 17px; line-height: 1; }
  .m-acct-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-body { display: grid; grid-template-columns: 240px minmax(0, 960px); gap: 24px; justify-content: center; padding: 0 24px; }
  .m-side { display: block; position: sticky; top: var(--sticky-top); align-self: start; max-height: calc(100vh - var(--sticky-top)); max-height: calc(100dvh - var(--sticky-top));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 2px 24px; }
  .m-side a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; }
  .m-side a .ico { flex: none; width: 20px; text-align: center; color: var(--muted); }
  .m-side a .t { flex: 1; min-width: 0; }
  .m-side a.active { background: var(--surface); color: var(--text); box-shadow: inset 3px 0 0 var(--highlight), var(--shadow); }
  .m-side a.active .ico { color: var(--text); }
  .m-side .pill { flex: none; background: var(--red); color: var(--on-solid); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 18px; }
  .m-side-h { margin: 18px 12px 6px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .m-side-me { list-style: none; margin: 0; padding: 0; }
  .m-content { padding: 18px 0 40px; }
  .bottom-nav { display: none; }
  body:has(.bottom-nav) #toasts { bottom: calc(24px + env(safe-area-inset-bottom)); }
  /* the Me page is the account overview: its items are in the left menu, the rest side by side */
  .m-content:has(> .ca-me-list) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
  .m-content:has(> .ca-me-list) > * { margin-top: 0; grid-column: 1 / -1; }
  .m-content:has(> .ca-me-list) > :is([data-appearance], .ca-me-start) { grid-column: auto; }
  .m-content > .ca-me-list { display: none; }
  .m-content > .ca-me-acct { display: flex; flex-wrap: wrap; gap: 10px; }
  .m-content > .ca-me-acct .btn-block { width: auto; flex: 0 1 auto; }
  /* what sat on top of the bottom bar sits at the bottom of the window */
  body .m-shell .lv.dock .lv-ctl { bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@media (hover: hover) and (min-width: 1024px) {
  .m-side a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
  .m-top .m-acct:hover, .m-top .m-brand:hover { text-decoration: none; background: var(--nav-hover); }
}
.ca-me-acct { display: grid; gap: 14px; }
.m-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.m-card h2 { font-size: 15px; }
.m-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; margin: 18px 2px 8px; }
.shift-card { display: block; color: inherit; border-left: 5px solid var(--c, var(--accent)); }
.shift-when { font-weight: 700; font-size: 15px; }
.shift-what { color: var(--text-2); margin-top: 2px; }
.shift-where { color: var(--muted); font-size: 13px; margin-top: 2px; }
.clock-card { background: var(--nav); color: var(--on-nav); border: 0; }
.clock-card .muted { color: var(--on-nav-muted); }
.clock-big { font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-pair .m-card b { display: block; font-size: 22px; }
.actions-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: 10px 0; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.info-list li > * { min-width: 0; }
.info-list li:first-child { border-top: 0; }
.info-list .k { color: var(--muted); width: 92px; flex: none; font-size: 13px; }
.msg { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg.mine { background: var(--blue-bg); border-color: transparent; }
.compose { display: flex; gap: 8px; margin-top: 10px; }
.compose textarea { min-height: 40px; }

/* ---------------------------------------------------------------- hover (mouse and trackpad only: on a touchscreen a tap would leave it stuck on) */
@media (hover: hover) {
  a:hover { text-decoration: underline; }
  .nav-link:hover { background: var(--nav-hover); color: var(--nav-active); text-decoration: none; }
  .nav-title:hover { color: var(--nav-text); }
  .btn:hover { background: var(--surface-2); text-decoration: none; }
  .btn-primary:hover { background: var(--accent-strong); }
  .btn-dark:hover { background: var(--text); filter: brightness(1.15); }
  .btn-danger:hover { background: var(--red); filter: brightness(.92); }
  .btn-green:hover { background: var(--green-btn); filter: brightness(.92); }
  .btn-danger-ghost:hover { background: var(--red-bg); }
  .btn:disabled:hover { filter: none; }
  .icon-btn:hover { background: var(--surface-2); }
  .seg a:hover, .tabs a:hover, .kpi:hover, .slot:hover, .shift-card:hover, .bottom-nav a:hover { text-decoration: none; }
  .tabs a:hover { color: var(--text); }
  a.kpi:hover { border-color: var(--highlight); }
  .table tr.clickable:hover td { background: var(--surface-2); }
  .slot:hover { filter: brightness(.97); }
  .m-top .icon-btn:hover, .topbar .icon-btn:hover, .call-head .btn:hover { background: var(--nav-hover); }
  .sidebar .btn-ghost:hover { background: var(--nav-hover); color: var(--nav-active); }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) { .grid-main { grid-template-columns: minmax(0, 1fr); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .doc { padding: 18px; } .doc .totals { width: auto; max-width: 280px; } .doc-head { flex-wrap: wrap; } }
/* document lines on a phone: the description gets its own row, then qty · unit · rate · amount */
@media screen and (max-width: 600px) {
  .doc table.doc-lines thead { display: none; }
  .doc table.doc-lines, .doc table.doc-lines tbody { display: block; }
  .doc table.doc-lines tr { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.1fr) 5.6em 44px; gap: 4px 6px;
    align-items: center; padding: 8px 0; border-bottom: 1px solid var(--paper-line); }
  .doc table.doc-lines td { display: block; width: auto !important; padding: 0; border: 0; }
  .doc table.doc-lines td:first-child { grid-column: 1 / -1; }
  .doc table.doc-lines input, .doc table.doc-lines textarea { min-height: 44px; }
  .doc table.doc-lines .icon-btn { width: 44px; height: 44px; }
  /* a line's internal unit cost: label, box and the line's profit in one row under the line */
  .doc table.doc-lines tr.has-cost { border-bottom: 0; padding-bottom: 4px; }
  .doc table.doc-lines tr.line-cost-row { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
  .doc table.doc-lines tr.line-cost-row td { flex: none; text-align: left !important; }
  .doc table.doc-lines tr.line-cost-row td.lc-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .doc table.doc-lines tr.line-cost-row input { width: 8.5em; }
  /* a line's percent off goes on a row of its own under qty · unit · rate · amount (placeholder "% off") */
  .doc table.doc-lines tr:not(.line-cost-row) td.doc-pct { order: 1; }
  .doc table.doc-lines td.doc-pct:empty { display: none; }
  .doc-disc-f { flex: 1 1 140px; justify-content: space-between; }
  .doc-disc-k { flex-basis: 100%; }
}

/* tablets (and touch screens wider than a phone): the line's "% off" box wide enough for its 16px placeholder */
@media (min-width: 601px) and (max-width: 860px), (min-width: 601px) and (pointer: coarse) {
  .doc table.doc-lines td.doc-pct { width: 96px !important; }
  /* with the % column the number boxes are narrow: slimmer side padding so a quantity like 13.92 shows whole */
  .doc table.doc-lines td input[type=number] { padding-left: 4px; padding-right: 4px; }
}

/* Touchscreens and narrow windows: thumb-sized targets and 16px fields (iPhone zooms the page into anything smaller). */
@media (max-width: 860px), (pointer: coarse) {
  input, select, textarea { font-size: 16px; min-height: var(--tap); }
  input[type=color] { height: var(--tap); }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; flex: none; }
  /* iOS draws date and time pickers centred and, when empty, shorter than other fields */
  input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] { -webkit-appearance: none; appearance: none; text-align: left; display: block; }
  input::-webkit-date-and-time-value { text-align: left; min-height: 1.45em; }
  .line-edit input, .line-edit textarea { font-size: 16px; }
  .doc .doc-kind select { font-size: 16px; min-height: var(--tap); }
  .th-sort { display: flex; align-items: center; min-height: var(--tap); margin: -9px -12px; padding: 0 12px; }  /* fills its heading, for a thumb */
  .btn { min-height: var(--tap); min-width: var(--tap); padding: 9px 14px; }
  .btn-sm { min-height: 40px; min-width: 40px; padding: 7px 12px; font-size: 13.5px; }
  .btn-lg { min-height: 50px; }
  .icon-btn { width: var(--tap); height: var(--tap); font-size: 18px; }
  .seg a, .seg button { min-height: calc(var(--tap) - 2px); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; }
  .tabs a { min-height: var(--tap); display: inline-flex; align-items: center; padding: 10px 14px; }
  .chip-check span { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; font-size: 14px; }
  .check { min-height: var(--tap); }
  .check > input + span, .check > input + strong { flex: 1 1 0; min-width: 0; }  /* a long label wraps beside its box, not under it */
  .toggle { min-height: var(--tap); }
  .toggle input { width: 44px; height: 26px; }
  .toggle input::after { width: 22px; height: 22px; }
  .toggle input:checked::after { transform: translateX(18px); }
  .crew-pill button { min-width: 32px; min-height: 32px; font-size: 15px; }
  /* small "Schedules →" links beside card titles, and breadcrumbs: same look, a bigger place to tap */
  .card-head > a:not(.btn), .crumbs a, .row-between > a.small { display: inline-flex; align-items: center; min-height: var(--tap); margin: -10px 0; }
  .crumbs a { padding: 0 4px; margin: -10px -4px; }
  .card-head { padding-top: 12px; padding-bottom: 8px; }
  .nav-link { min-height: var(--tap); }
  .nav-title { min-height: var(--tap); }  /* (a tablet in landscape keeps the desktop sidebar: the fold button is thumb-sized too) */
  .list > li > a:only-child { margin: -10px 0; padding: 10px 0; min-height: var(--tap); }  /* a list row that's one link: the whole row taps */
  .modal-head .icon-btn { margin: -8px -10px -8px 0; }
  .m-top .icon-btn { margin: -6px -10px -6px 0; }  /* a bigger target without making the header taller (sticky bars below rely on its height) */
  .field label { font-size: 13px; }
  .help { font-size: 12.5px; }
}

/* ------------------------------------------------ phones (and narrow windows): the office app with a top bar and a slide-out menu */
@media (max-width: 860px) {
  :root { --sticky-top: calc(48px + env(safe-area-inset-top)); }  /* (until app.js measures the bar: it can grow) */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); z-index: 40; transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease-out, visibility 0s linear .2s; padding-bottom: 0; }
  .shell.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform .2s ease-out; }
  .shell.nav-open::after { content: ""; position: fixed; inset: 0; background: var(--scrim-nav); z-index: 38; animation: fade .2s ease-out; }
  body:has(.shell.nav-open) { overflow: hidden; }
  .nav-link { padding: 10px 12px; font-size: 15px; }
  .nav-link .ico { width: 22px; font-size: 16px; }
  .nav-title { padding: 12px 12px 6px; font-size: 11.5px; }
  .sidebar-foot { font-size: 13px; }
  .side-hide, .side-show { display: none !important; }  /* (the phone's ☰ menu stays as it is) */
  .sidebar-foot .btn-ghost { border-color: var(--glass-line); }
  .topbar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 20; background: var(--nav); color: var(--on-nav); min-height: calc(48px + env(safe-area-inset-top));
    padding: calc(1px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 1px max(6px, env(safe-area-inset-left));
    border-bottom: 2px solid; border-image: var(--brand-strip) 1; }
  .topbar .icon-btn { color: var(--on-nav); font-size: 20px; }
  .topbar .icon-btn:active { background: var(--nav-hover); }
  .topbar .brand-mark { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
  .topbar .brand-home { flex: 1; min-width: 0; gap: 8px; }
  .topbar strong { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .env-tag { display: inline-block; }
  body:has(.shell) .env-banner { display: none; }
  /* (no room kept for Otis at the bottom: at this width Otis sits in the top bar, ai.js) */
  .content { padding: 16px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .page-head { margin-bottom: 14px; gap: 10px; }
  .page-head h1 { font-size: 21px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .pos-row { grid-template-columns: repeat(4, 1fr); }
  .pos-row > div:first-child { grid-column: 1 / -1; }
  .pos-row .stat.opt { display: none; }
  .pos-row .pos-actions { grid-column: 1 / -1; }
  .field.half, .field.third, .check.half { flex-basis: 100%; }
  .search { max-width: none; }
  .filters > select, .filters > input, .filters > .search { flex: 1 1 150px; min-width: 0; max-width: 100%; }
  .filters > .seg { max-width: 100%; }
  .sched td.name, .sched th:first-child { width: 128px; }
  .month .day { min-height: 76px; padding: 3px; }
  .month .dow { padding: 6px 3px; text-align: center; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .kpi { padding: 10px 12px; }
  .kpi-value { font-size: 22px; }
  .bar-row { grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) auto; gap: 8px; }

  /* Wide tables scroll sideways inside their box: the first column (after any tick box) stays put, and a shadow on the right
     says there is more. Tables marked .stack-sm turn into one small card per row instead. */
  :is(.card, .modal, .m-card) .table-wrap { background: linear-gradient(to right, transparent, var(--surface) 75%) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) right / 12px 100% no-repeat scroll; }
  /* a table too wide for the screen scrolls anyway, so text columns keep a readable width instead of one word per line
     (not numbers, tick boxes, lone buttons or badges) */
  .table-wrap > .table:not(.stack-sm) > tbody > tr > td:not(.num, .sel, :empty, [data-label=""]):not(:has(> :is(input[type=checkbox], button, .btn, .badge):only-child)) { min-width: 7.5em; }
  /* The name column stays put. A leading tick-box column (.sel, or one with no heading) scrolls away and the column after it
     is the one that stays. */
  .table-wrap > .table:not(.stack-sm) > * > tr > :first-child:not(.sel, [data-label=""], th:empty, :has(> input[type=checkbox]:only-child)),
  .table-wrap > .table:not(.stack-sm) > * > tr > :is(.sel, [data-label=""], th:empty, :has(> input[type=checkbox]:only-child)):first-child + * {
    position: sticky; left: 0; z-index: 1; background: var(--cell-bg, var(--surface)); box-shadow: inset -1px 0 0 var(--border); }
  .table-wrap > .table:not(.stack-sm) > tbody > tr > td:first-child:not(.sel, .num, [data-label=""], :has(> input[type=checkbox]:only-child)),
  .table-wrap > .table:not(.stack-sm) > tbody > tr > td:is(.sel, [data-label=""], :has(> input[type=checkbox]:only-child)):first-child + td:not(.num) { min-width: min(42vw, 12em); }
  .table-wrap > .table:not(.stack-sm) > * > tr > .sel:first-child { width: 44px; min-width: 44px; padding-right: 0; }
  .card > .table-wrap > .table:not(.stack-sm) > * > tr > .sel:first-child { padding-left: 14px; }
  /* (the cell that stays put needs a solid background; rows pass theirs down) */
  .table thead > tr { --cell-bg: var(--surface-2); }
  .table tr.warn { --cell-bg: color-mix(in srgb, var(--amber-bg) 45%, var(--surface)); }
  .table tr.clickable:active { --cell-bg: var(--surface-2); }
  .table td { padding: 11px 12px; }

  .table.stack-sm thead { display: none; }
  .table.stack-sm, .table.stack-sm tbody { display: block; }
  .table.stack-sm tr { display: block; border-bottom: 1px solid var(--border); padding: 8px 0; }
  .table.stack-sm tr:last-child { border-bottom: 0; }
  .table.stack-sm td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 4px 16px; min-height: 32px; }
  .table.stack-sm td > * { min-width: 0; }
  .table.stack-sm td::before { content: attr(data-label); color: var(--muted); font-size: 12px; flex: none; max-width: 45%; }
  .table.stack-sm td:first-child { font-weight: 600; justify-content: flex-start; }
  .table.stack-sm td:first-child::before, .table.stack-sm td[data-label=""]::before { content: none; }
  .table.stack-sm td.sel { position: absolute; right: 4px; margin-top: -4px; }
  .table.stack-sm tr:has(> td.sel) { position: relative; padding-right: 40px; }
}

/* phone-size pop-ups: a sheet up from the bottom, edge to edge, with its buttons in thumb reach (and kept above the keyboard by lib.js) */
@media (max-width: 640px) {
  .modal-wrap { align-items: flex-end; padding: calc(8px + env(safe-area-inset-top)) 0 0; }
  .modal, .modal-wide { width: 100%; max-height: 100%; border-radius: 16px 16px 0 0; animation: sheet-up .2s ease-out; }
  .modal-wide { height: 100%; }
  .modal-head { padding: 10px 14px 10px 16px; min-height: 54px; }
  .modal-head h2 { font-size: 17px; }
  .modal-body { padding: 14px 16px; }
  .modal-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1 1 0; min-width: max-content; }
  .modal-foot .btn-danger-ghost { flex: 0 1 auto; }
  .modal > :last-child { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  body:has(.modal-wrap) { overflow: hidden; }
  .auth-card { padding: 22px 20px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-wide, .modal-wrap, .shell.nav-open::after { animation: none; }
  .sidebar, .toast, .toggle input, .toggle input::after, .nav-caret { transition: none; }
}

/* grid children may hold wide tables (inside .table-wrap); never let them widen the page */
.grid > * { min-width: 0; }

/* staging / demo copies (CORRAL_ENV_LABEL) */
.env-banner { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; pointer-events: none; background: var(--amber-bg); color: var(--amber); border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: .02em; box-shadow: var(--shadow); max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the crew app always has its top bar (which carries the tag); pop-ups cover the floating one */
body:has(.m-shell) .env-banner, body:has(.modal-wrap) .env-banner { display: none; }
/* Light / Dark / Follow my computer (looks.js themePicker): three equal buttons, thumb-sized */
.theme-pick { display: flex; width: 100%; max-width: 420px; }
.theme-pick button { flex: 1 1 0; min-width: 0; min-height: var(--tap); padding: 6px 8px; white-space: normal; line-height: 1.2; }

/* ---------------------------------------------------------------- print */
@media print {
  .sidebar, .topbar, .no-print, .bottom-nav, .m-top, #toasts, .env-banner, .env-tag, .modal-wrap, .sc-fab, #reconnecting,
  .tabs, .filters, .bulkbar, .btn, .icon-btn, .page-error button { display: none !important; }
  .shell { display: block; min-height: 0; }
  .content, .m-content { padding: 0; max-width: none; }
  .m-shell { padding: 0; max-width: none; min-height: 0; }
  body { background: var(--paper); color: var(--paper-ink); }
  .doc { box-shadow: none; padding: 0; }
  .card, .kpi, .m-card { box-shadow: none; break-inside: avoid; }
  .table-wrap, .sched, .tabs, .seg { overflow: visible !important; background: none !important; }
  .table th, .table td, .sched td.name, .sched th:first-child { position: static !important; box-shadow: none !important; }
  .sel-hit::after { content: none !important; }
  .sched table { min-width: 0; }
  .table tr { break-inside: avoid; }
  a { color: inherit; }
}
/* product photos (photos.js, Batch 2E item 4): square thumbnails, on white paper in light and dark */
.ph-thumb { flex: none; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--paper); border: 1px solid var(--border); }
.ph-thumb.sm { width: 34px; height: 34px; }
.ph-thumb.lg { width: 72px; height: 72px; }
/* one card per person or company (cards.js): the Card page, Possible duplicates and the crew profile's card line */
.cards-code { width: 12ch; max-width: 100%; font-size: 13px; padding: 4px 6px; }
.cards-roles td { vertical-align: top; }
.cards-add { margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.cards-add select, .cards-add input { width: auto; max-width: 100%; }
.cards-list { list-style: none; margin: 0; padding: 0 16px 12px; }
.cards-list li { padding: 8px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.cards-list li:first-child { border-top: 0; }
.cards-diff { margin: 6px 0; padding-left: 18px; }
.cards-diff .chip, .cards-panel .chip, .cards-side .chip { margin: 2px 4px 2px 0; overflow-wrap: anywhere; }
.cards-panel { flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cards-pair { padding: 12px 16px; }
.cards-pair .grid-2 { gap: 12px; }
.cards-side { min-width: 0; overflow-wrap: anywhere; }
.cards-why { margin-bottom: 8px; }
.cards-preview fieldset { border: 0; padding: 0; margin: 0 0 8px; flex-wrap: wrap; gap: 10px; }
.cards-preview legend { margin-bottom: 4px; }
.cards-pick { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 4px 0; border-top: 1px solid var(--border); }
.cards-pick > span { min-width: 9em; font-weight: 600; }
.cards-unlink { margin-top: 10px; }
.cards-default select { width: auto; max-width: 100%; }
.cards-edit { margin: 0 0 12px; }
.cards-edit label { display: block; margin-bottom: 8px; }
.cards-edit input:not([type="search"]), .cards-edit textarea { width: 100%; max-width: 40em; display: block; }
.cards-edit .row { flex-wrap: wrap; gap: 6px; margin-top: 4px; }
[data-linkfind] input[type="search"] { min-width: 0; flex: 1 1 14em; }
@media (max-width: 860px), (pointer: coarse) { .cards-code { font-size: 16px; min-height: var(--tap); width: 16ch; } .cards-pair .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) {  /* phones: each role is a small stacked block, not a squeezed table */
  .cards-roles thead { display: none; }
  .cards-roles, .cards-roles tbody, .cards-roles tr, .cards-roles td { display: block; width: 100%; }
  .cards-roles tr { padding: 10px 16px; border-top: 1px solid var(--border); }
  .cards-roles tr:first-child { border-top: 0; }
  .cards-roles td, .card > .table-wrap .table.cards-roles td { padding: 3px 0; border: 0; }
}
.evx-bookas { display: block; margin-top: 4px; } .evx-bookas select { width: auto; max-width: 100%; }
/* Safer delete for linked records (Batch 4 item 4, safedelete.js): the inline panel on a record's page */
.sd-panel { margin: 0 0 12px; border-color: var(--border-strong); }
.sd-panel .sd-title { margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere; }
.sd-panel p { margin: 0 0 8px; }
.sd-links { margin: 0 0 8px; padding-left: 18px; }
.sd-links li { margin: 3px 0; overflow-wrap: anywhere; }
.sd-acts { flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sd-note { margin-top: 8px; }
.sd-merge { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.sd-merge input[type="search"] { width: 100%; max-width: 28em; display: block; margin: 4px 0 8px; }
.sd-res .list > li { padding: 8px 0; }
.sd-confirm { margin-top: 10px; } .sd-confirm .row { flex-wrap: wrap; gap: 8px; margin-top: 6px; } .sd-confirm p { margin: 0 0 6px; }
.sd-off { opacity: .7; }
[data-contact-remove] > .sd-panel { margin: 0 16px 12px; }

/* Email a quote or invoice (Batch 5 item 2, docmail.js): the send panel above the document, its preview and Settings → Email templates */
.dm-panel { margin: 0 0 16px; border-left: 4px solid var(--accent); }
.dm-panel .card-head { flex-wrap: nowrap; align-items: flex-start; }
.dm-panel .card-head .icon-btn { flex: 0 0 auto; }
.dm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dm-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-f { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 13px; min-width: 0; }
.dm-f input, .dm-f select, .dm-f textarea { width: 100%; font-weight: 400; }
.dm-f textarea { resize: vertical; min-height: 9em; }
.dm-ins select { max-width: 100%; }
.dm-to { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px 10px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dm-to legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.dm-to .check span { overflow-wrap: anywhere; }
.dm-help { margin-top: -6px; color: var(--muted); }
.dm-sig summary { cursor: pointer; font-weight: 500; font-size: 13px; }
.dm-sig textarea { width: 100%; margin-top: 6px; }
.dm-actions { gap: 8px; flex-wrap: wrap; align-items: center; }
.dm-warn { color: var(--amber); }
.dm-preview { position: sticky; top: calc(var(--sticky-top) + 8px); min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dm-ph { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dm-meta { font-size: 13px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.dm-meta .muted { display: inline-block; min-width: 4.5em; }
.dm-note { margin: 0; }
.dm-frame { width: 100%; height: 420px; border: 1px solid var(--paper-line); border-radius: var(--radius-sm); background: var(--paper); }
.dm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; max-width: 100%; overflow-wrap: anywhere; }
.dm-sent { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.dm-sent h3 { margin: 0 0 6px; font-size: 14px; }
.dm-hist { list-style: none; margin: 0; padding: 0; }
.dm-hist li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.dm-hist li:last-child { border-bottom: 0; }
.dm-hist-top { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; overflow-wrap: anywhere; }
.dm-hist-to { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dm-hist-to .dm-chip { flex-wrap: wrap; border: 0; background: none; padding: 0; border-radius: 0; gap: 6px; font-size: 13px; }
.dm-tpls { list-style: none; margin: 0; padding: 0; }
.dm-tpls > li { border-bottom: 1px solid var(--border); padding: 10px 0; }
.dm-tpls > li:last-child { border-bottom: 0; }
.dm-tpl-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.dm-tpl-main { min-width: 0; flex: 1 1 16em; overflow-wrap: anywhere; }
.dm-tpl-acts { gap: 6px; flex-wrap: wrap; }
.dm-tpl-edit { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; }
.dm-set-card .card-head { flex-wrap: wrap; gap: 8px; }
.dm-fieldlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm-fieldlist code { font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
@media (max-width: 900px) {
  .dm-grid { grid-template-columns: minmax(0, 1fr); }
  .dm-preview { position: static; }
  .dm-frame { height: 360px; }
}