/* Forwarder Ops — base styles from the design's helmet, plus hover/focus
   classes standing in for the prototype's style-hover / style-focus
   attributes. The design runtime injected those with !important, so these
   keep !important to beat the inline base styles the same way. */

html, body { margin: 0; background: #f6f7f9; color: #0f172a; font-family: 'Figtree', system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: #0d9488; }
a:hover { color: #0f766e; }
button { font-family: inherit; }
input, select { font-family: inherit; }
::selection { background: #99f6e4; }
:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* ---------- glass ----------
   The page lies on a soft wash of the brand's teal, so the white panes over
   it read as frosted glass rather than grey boxes. Blur is kept to the layers
   that float — the navigation and dialogs — because a blurred pane for each
   of fifty container cards is what makes a laptop's fan spin. */
body {
  background:
    radial-gradient(1100px 640px at 6% -8%, rgba(45, 212, 191, 0.22), transparent 62%),
    radial-gradient(900px 560px at 100% 0%, rgba(125, 211, 252, 0.16), transparent 60%),
    radial-gradient(1000px 700px at 60% 110%, rgba(52, 211, 153, 0.14), transparent 62%),
    #eef3f5;
  background-attachment: fixed;
  min-height: 100vh;
}
.glass {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03), 0 14px 34px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* The navigation's items sit on the glass: white when hovered or current, never grey. */
.nav-item { background: transparent; transition: background 0.12s, box-shadow 0.12s; }
.nav-item:hover { background: rgba(255, 255, 255, 0.8) !important; }
.nav-item[aria-current="page"] {
  background: #fff !important; color: #0f766e !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(13, 148, 136, 0.12);
}
/* A group's head opens and closes the pages under it, which sit 22px in and carry no rule of their own. */
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-group-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; border-radius: 12px;
  background: transparent; font-family: inherit; font-weight: 600; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: background 0.12s;
}
.nav-group-head:hover { background: rgba(255, 255, 255, 0.8); }
.nav-children { display: flex; flex-direction: column; gap: 3px; }
.nav-child { margin-left: 22px; width: calc(100% - 22px) !important; }
.nav-add { box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28); }
.dlg-bg { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.glass-dialog {
  background: rgba(255, 255, 255, 0.9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22) !important;
}

/* ---------- signing in ----------
   A page of its own: one glass card in the middle of the wash. */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; }
.auth-card { width: 100%; max-width: 400px; border-radius: 22px; padding: 28px 28px 24px; box-sizing: border-box; }
.auth-alert { font-size: 13px; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.auth-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.auth-note { background: #f0fdfa; border: 1px solid #99f6e4; color: #0f766e; }

/* The starting password, named at the top of every screen until it is changed. */
.pw-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 30px 0; padding: 10px 14px;
  border-radius: 14px; background: rgba(255, 251, 235, 0.92); border: 1px solid #fde68a; font-size: 13px; color: #78350f;
}

/* A control that cannot be used should look it. The inline styles paint a
   button or a field the same whether it is disabled or not, so an "Add BL"
   with nothing typed looked as ready as one with a number in it. */
button:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
input:disabled, select:disabled, textarea:disabled { background: #f8fafc !important; color: #94a3b8 !important; cursor: not-allowed; }

/* style-hover equivalents */
.h-teal:hover { background: #f0fdfa !important; }
.h-gray:hover { background: #f1f5f9 !important; }
.h-gray2:hover { background: #f1f5f9 !important; color: #475569 !important; }
.h-mut:hover { color: #475569 !important; }
.h-red:hover { background: #fee2e2 !important; color: #b91c1c !important; }
.h-soft:not(:disabled):hover { background: #f8fafc !important; }
.h-row:hover { background: #fafbfc !important; }
.h-row2:hover { background: #f8fafc !important; }
.h-dark:not(:disabled):hover { background: #0f766e !important; border-color: #0f766e !important; }
.h-br:not(:disabled):hover { filter: brightness(0.97) !important; }
/* A tick box that ticks its step: the ring fills on hover. */
.h-box:hover { background: #ccfbf1 !important; }
.h-ver:hover { background: #e2e8f0 !important; }
.h-chip:hover { border-color: #99f6e4 !important; background: #f0fdfa !important; }

/* style-focus equivalents */
.f-ring:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 3px rgba(13,148,136,.12) !important; }
.f-bdr:focus { border-color: #0d9488 !important; }

/* Arriving from a "view this" link. The row is scrolled into view and flashes,
   so it is obvious which of forty rows was being pointed at. */
/* What a row does when a link somewhere else has just opened it: it is scrolled
   to, and then says so for long enough to be seen. The open row keeps a ring
   of its own after this fades — the flash is for finding it, the ring for
   knowing which one you are reading. */
.just-opened { animation: just-opened 2.2s ease-out; border-radius: 16px; }

/* A container's steps scroll with the page. The padding leaves room for the
   ring a step wears when it is opened. */
.steps-scroll {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px; margin: -4px;
}
@keyframes just-opened {
  0%, 12%  { box-shadow: 0 0 0 4px rgba(13,148,136,.45); }
  55%      { box-shadow: 0 0 0 4px rgba(13,148,136,.28); }
  100%     { box-shadow: 0 0 0 4px rgba(13,148,136,0); }
}



/* Keyboard reachability. Every clickable row carries role=button and a tab
   stop, so it hints in extensions like Vimium and works without a mouse. */

[role="button"] { cursor: pointer; }
[role="button"]:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* A two-way answer drawn as one control — a container's VO, on its job's
   page. A ring goes round the option chosen when it has the focus, and round
   the whole toggle while it has none. */
.pl-toggle { display: inline-flex; border-radius: 8px; outline: none; }
.pl-toggle:focus-visible { outline: none; }
.pl-opt { font-family: inherit; font-size: 12px; font-weight: 600; box-sizing: border-box; height: 27px; padding: 0 11px;
  border: 1px solid #d0d5dd; background: #fff; color: #475569; cursor: pointer; }
.pl-opt-l { border-radius: 8px 0 0 8px; }
.pl-opt-r { border-radius: 0 8px 8px 0; border-left: none; }
.pl-opt-m { border-radius: 0; border-left: none; }
/* The dashboard's date: which date — load, ETA, ETD — then when. */
.dash-date { display: inline-flex; align-items: center; gap: 6px; }
.dash-date .pl-opt { height: 34px; padding: 0 9px; white-space: nowrap; }
@media (max-width: 640px) { .dash-date { flex: 1 1 100%; } .dash-date > .fl { flex: 1; width: auto !important; } }
/* A desk keeps the dashboard's search and its filters on one line. */
@media (min-width: 641px) {
  .dash-bar .sbox { flex: 1 1 200px; min-width: 170px; max-width: 280px; }
  .dash-bar .col-pick { min-width: 0; width: 128px; }
  .dash-bar .dash-date > .fl { width: 165px !important; }
}
.pl-opt[aria-checked="true"] { background: #0d9488; border-color: #0d9488; color: #fff; }
.pl-toggle:focus .pl-opt[aria-checked="true"] { position: relative; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d9488; }
.pl-toggle.unmarked:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d9488; }

/* ---------- spreadsheet grids ----------
   Tables that fill like Excel (grid.ts): gridlines rather than a box per cell,
   the active cell ringed, the selection tinted, a frozen heading row. The
   ring dims while the keyboard is elsewhere, as Excel's does. */
.xg { position: relative; }
.xg-scroll { overflow: auto; max-height: 420px; border: 1px solid #e4e7ec; border-radius: 10px; background: #fff; }
.xg table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-variant-numeric: tabular-nums; }
.xg th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 8px; background: #f8fafc; border-bottom: 1px solid #e4e7ec;
  border-right: 1px solid #eef1f4; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none; }
.xg th:hover, .xg th.in { color: #0f766e; }
.xg th.in { background: #e6f7f5; }
.xg td { height: 30px; box-sizing: border-box; padding: 0 8px; background: #fff; border-bottom: 1px solid #eef1f4;
  border-right: 1px solid #eef1f4; font-size: 12.5px; color: #101828; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: cell; user-select: none; scroll-margin-top: 31px; }
.xg td.ro { background: #fcfcfd; color: #667085; }
.xg td.in { background: #e6f7f5; }
.xg td.bad { background: #fef2f2; color: #b91c1c; }
.xg td.in.bad { background: #fde4e4; }
.xg td.pre { color: #0f766e; font-style: italic; }
.xg td.act { position: relative; box-shadow: inset 0 0 0 2px #0d9488; }
.xg:not(:focus-within) td.act { box-shadow: inset 0 0 0 2px #99f6e4; }
.xg td.edit { padding: 0; background: #fff; box-shadow: inset 0 0 0 2px #0d9488; }
.xg-editor { width: 100%; height: 100%; box-sizing: border-box; padding: 0 8px; border: 0; outline: none; background: transparent;
  font: inherit; color: inherit; text-align: inherit; }
/* The keyboard's field between edits: in the active cell, unseen and unclickable. */
.xg-nav { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.xg-tag { margin-left: 5px; font-size: 10px; font-weight: 700; color: #0f766e; }
/* What the cell being typed in offers, pinned under it (grid.ts places it). */
.xg-choices { position: fixed; z-index: 60; min-width: 260px; max-width: 460px; padding: 4px; background: #fff; border-radius: 10px;
  box-shadow: 0 14px 34px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06); font-size: 12.5px; }

/* ---------- the page in the middle ----------
   Each screen is capped at its own width and sits in the middle of the room
   beside the navigation, so a wide or zoomed-out window does not leave it
   hugging the left edge. */
.screen > [data-screen-label] { margin-left: auto; margin-right: auto; }

/* ---------- the filters bar ----------
   The search, the tabs and the selects stay in reach while the list scrolls
   under them, on a pane of the same glass as the navigation, stuck where the
   navigation's top is. Under the dialogs (100) and the navigation (40). */
.toolbar-wrap {
  position: sticky; top: 14px; z-index: 30;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03), 0 10px 26px rgba(15, 23, 42, 0.07);
}
/* On a desktop the parts lie in the bar's own row; the wrappers exist for the phone. */
.tb-seg-row, .tb-more { display: contents; }
.tb-more-btn { display: none; }

/* A field whose name sits inside it as a placeholder until it holds
   something — typed, or picked from its dropdown — and then shrinks to its
   top-left corner, above the value. The filters and the search boxes. Sized
   and drawn like the toolbar's selects, so a row of them reads as one. */
.fl { position: relative; min-width: 0; }
.fl > .fl-box {
  box-sizing: border-box; width: 100%; height: 34px; margin: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; background: #fff; border: 1px solid #d0d5dd; border-radius: 9px;
  font: inherit; font-size: 12.5px; color: #334155; text-align: left; cursor: pointer;
}
.fl > input.fl-box { cursor: text; display: block; }
.fl.has-icon > .fl-box { padding-left: 32px; }
.fl.filled > .fl-box,
.fl > input.fl-box:focus,
.fl > input.fl-box:not(:placeholder-shown) { padding-top: 12px; }
.fl > .fl-box .fl-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #0f766e; line-height: 1; }
.fl > .fl-box .fl-caret { display: inline-flex; color: #667085; margin-left: auto; flex: none; }
.fl.filled > .fl-box .fl-caret { margin-top: -12px; }
.fl > .fl-label {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 12.5px; color: #94a3b8; pointer-events: none; white-space: nowrap;
  max-width: calc(100% - 34px); overflow: hidden; text-overflow: ellipsis; line-height: 1;
  transition: top .12s ease, font-size .12s ease, color .12s ease;
}
.fl.has-icon > .fl-label { left: 33px; }
.fl.filled > .fl-label,
.fl.open > .fl-label,
.fl > input:focus + .fl-label,
.fl > input:not(:placeholder-shown) + .fl-label { top: 9px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: #64748b; }
.fl.filled > .fl-box { border-color: #0d9488; }
/* A menu is fixed in the window, placed under its trigger when it opens (pick-place.ts), so no scrolling box clips it. */
.fl-menu {
  position: fixed; z-index: 61; top: var(--mt, 0); left: var(--ml, 0);
  width: var(--mw, 260px); max-width: 360px; box-sizing: border-box;
  background: #fff; border: 1px solid #d0d5dd; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); padding: 8px;
}

/* A preset's chip: its name to load it, and a cross to delete it that shows
   when the chip is hovered or focused — and always on a touch screen. */
.preset-chip {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: #fff; color: #334155; border: 1px solid #e2e8f0;
}
.preset-chip.on { background: #0d9488; color: #fff; border-color: #0d9488; }
.preset-chip-name {
  background: transparent; border: none; color: inherit; font: inherit; font-weight: 600; font-size: 12.5px;
  padding: 5px 11px; cursor: pointer; border-radius: 999px;
}
.preset-chip-name.removable { padding-right: 4px; }
.preset-chip-x {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-height: 0;
  margin-right: 4px; padding: 0; border: none; border-radius: 50%; background: transparent;
  color: inherit; opacity: 0.4; cursor: pointer; transition: opacity .12s, background .12s, color .12s;
}
.preset-chip:hover .preset-chip-x, .preset-chip-x:focus-visible { opacity: 1; }
.preset-chip-x:hover { background: #fee2e2; color: #b42318; }
.preset-chip.on .preset-chip-x:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* ---------- the Orders pages' column ----------
   A fixed 1200 px, centred, in card and table view alike: the title, the bar
   and the list. Zooming out leaves the room empty rather than stretching it. */
.orders-col { max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }

/* ---------- the dashboard's cards ---------- */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dash-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  outline: 2px solid transparent; transition: outline-color .15s, box-shadow .15s;
}
.dash-card.on { outline-color: var(--tone); box-shadow: 0 8px 28px rgba(16,24,40,.09); }
.dash-card-pick { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.dash-card-pick:focus-visible { outline: 2px solid var(--tone); outline-offset: 4px; border-radius: 8px; }
.dash-card-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #344054; }
.dash-card-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.dash-card-num { font-size: 34px; font-weight: 750; line-height: 1; letter-spacing: -0.02em; color: #101828; font-variant-numeric: tabular-nums; }
.dash-card.on .dash-card-num { color: var(--tone); }
.dash-card-cap { font-size: 12px; color: #667085; }

@media (hover: none) { .preset-chip-x { opacity: 0.8; width: 28px; height: 28px; margin-right: 2px; } }

/* ---------- the filter panel ----------
   A row per subject: its name down a narrow left column, its controls
   flowing across. Each kind of control looks like what it is — toggles for
   a few choices, a field with a caret for a long list, a calendar for a
   date, a switch for yes or no — so the eye can tell them apart. (Not a
   container query: containment would make the panel the box a dropdown's
   fixed click-catcher fills, and a click beside the panel would not close it.) */
.fp { padding: 14px 18px 12px; }
.fp-head { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.fp-title { font-size: 14px; font-weight: 700; color: #101828; }
.fp-count { border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; line-height: 19px; background: #ccfbf1; color: #0f766e; }
.fp-sub { font-size: 12px; color: #667085; }
/* Saving the panel as a preset sits beside its name. */
.fp-save { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.fp-save > input { width: 190px; }
.fp-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.fp-close {
  display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none;
  color: #475569; font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.fp-close:hover { background: #f1f5f9; color: #0f172a; }

/* What is in force, each undone by its cross. */
.fp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fp-tag {
  display: inline-flex; align-items: center; gap: 2px; height: 24px; max-width: 300px; box-sizing: border-box;
  padding: 0 3px 0 9px; border-radius: 999px; background: #f0fdfa; border: 1px solid #99f6e4;
  color: #0f766e; font-size: 12px; font-weight: 600;
}
.fp-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-tag > button {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; min-height: 0;
  border: none; border-radius: 50%; background: transparent; color: #0f766e; cursor: pointer; padding: 0;
}
.fp-tag > button:hover { background: #ccfbf1; }

.fp-rows { margin-top: 10px; }
.fp-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 9px 0; border-top: 1px solid #f1f5f9;
}
.fp-row-h { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0f766e; line-height: 34px; }
.fp-row-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; min-width: 0; }
.fp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* Toggles and a field that answer one question, kept on one line together. */
.fp-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* Dropdowns give a little before they wrap, so four dates can share a row. */
.fp-sel { flex: 0 1 168px; width: 168px; min-width: 128px; }
.fp-sel.fp-wide { flex-basis: 210px; width: 210px; }

/* Toggles: every choice in view, a tick on the ones picked. */
.fp-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.fp-inl { font-size: 12px; font-weight: 600; color: #64748b; margin-right: 2px; white-space: nowrap; }
.fp-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; box-sizing: border-box;
  padding: 0 11px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff;
  color: #475569; font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.fp-chip.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.fp-chip-n { margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.fp-chip[aria-pressed="true"] .fp-chip-n { background: #ccfbf1; color: #0f766e; }
.fp-chip:hover { border-color: #99f6e4; background: #f0fdfa; }
.fp-chip[aria-pressed="true"] { background: #f0fdfa; border-color: #0d9488; color: #0f766e; font-weight: 600; }
.fp-chip.warn:hover { border-color: #fcd34d; background: #fffbeb; }
.fp-chip.warn[aria-pressed="true"] { background: #fffbeb; border-color: #f59e0b; color: #b45309; }
/* The two document questions read as one table: names in a column, the same documents under each other. */
.fp-docs { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fp-docs .fp-inl { width: 78px; }
.fp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* A yes-or-no is a switch, its words beside it. */
.fp-toggle { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12.5px; color: #475569; min-height: 30px; }
.fp-toggle-name { font-weight: 600; color: #334155; cursor: pointer; }
/* Words that wrap as a sentence does, the number box among them. */
.fp-toggle-desc { color: #667085; line-height: 30px; }
.fp-toggle-desc > .fp-days { margin: 0 4px; vertical-align: middle; }
.fp-switch {
  position: relative; flex: none; width: 32px; height: 18px; min-height: 0; padding: 0; border: none; border-radius: 999px;
  background: #cbd5e1; cursor: pointer; transition: background .15s;
}
.fp-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); transition: transform .15s;
}
.fp-switch[aria-checked="true"] { background: #0d9488; }
.fp-switch[aria-checked="true"]::after { transform: translateX(14px); }
.fp-days {
  box-sizing: border-box; width: 52px; height: 28px; padding: 0 6px; text-align: center;
  background: #fff; border: 1px solid #d0d5dd; border-radius: 8px; font: inherit; font-size: 12.5px; color: #0f172a;
}
.fp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #334155; cursor: pointer; white-space: nowrap; height: 30px; }
.fp-check > input { accent-color: #0d9488; width: 15px; height: 15px; margin: 0; cursor: pointer; }

/* A date's dropdown: quick picks over a range. */
.fp-menu-h { font-size: 11px; font-weight: 600; color: #64748b; margin: 0 2px 6px; }

.fp-more {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 3px 0;
  color: #0d9488; font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.fp-more:hover { color: #0f766e; }
.fp-more-caret { display: inline-flex; transform: rotate(-90deg); transition: transform .15s; }
.fp-more[aria-expanded="true"] .fp-more-caret { transform: none; }
.fp-more-hint { font-size: 12px; color: #94a3b8; }

/* Narrow: each subject's name sits over its controls, and the dropdowns share the width. */
@media (max-width: 640px) {
  .fp { padding: 12px 14px 10px; }
  .fp-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fp-row-h { line-height: 1.4; }
  .fp-row-body { gap: 8px 16px; }
  .fp-cluster { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .fp-sel, .fp-sel.fp-wide { width: 100%; min-width: 0; }
  .fp-sub { flex-basis: 100%; order: 3; }
  .fp-save { flex-basis: 100%; order: 4; margin: 4px 0 0; }
  .fp-save > input { flex: 1; width: auto; min-width: 0; height: 38px; }
  /* A tag is something to tap: bigger, with a cross to hit. */
  .fp-tag { height: 30px; font-size: 12.5px; }
  .fp-tag > button { width: 26px; height: 26px; }
}

/* Sortable table headers read as buttons. */
.col-sort { background: none; border: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: baseline; gap: 5px; }
.col-sort:hover { color: #0d9488 !important; }

/* On a phone the bar keeps its first box and a Filters button; the rest unfold. */
.search-bar .sb-more { display: contents; }
.search-bar .sb-toggle { display: none; }

/* ---------- the container list's simple filtering ---------- */
.quick-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.quick-tab {
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid #d0d5dd; background: #fff; color: #475569;
}
.quick-tab.on { background: #0d9488; border-color: #0d9488; color: #fff; }
.search-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; background: #fff; border: 1px solid #e4e7ec; border-radius: 12px;
}
.search-bar-end { display: inline-flex; gap: 10px; align-items: center; margin-left: auto; }
.search-bar .tb-count { font-size: 12.5px; font-weight: 600; color: #475569; white-space: nowrap; }
.col-search {
  box-sizing: border-box; height: 30px; width: 112px; min-width: 0; padding: 0 9px;
  font-size: 12px; color: #1e293b; background: #fff; border: 1px solid #d0d5dd; border-radius: 8px;
}
.col-search::placeholder { color: #94a3b8; }
/* The search box every screen with filters starts its toolbar with: an icon
   on the left, and a cross on the right once something is typed. The cross
   keeps to the box's height on a phone too, where every other button grows
   to 38px — it sits inside the field, not beside it. */
.sbox { position: relative; display: inline-flex; align-items: center; flex: 1 1 240px; min-width: 200px; max-width: 340px; }
.sbox-x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; min-height: 0; padding: 0; border: none; border-radius: 7px;
  background: transparent; color: #94a3b8; font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.sbox-x:hover { background: #f1f5f9; color: #475569; }
.col-pick { min-width: 150px; }
/* The filter panel's Order and Container prefixes: sized by their row, as its other dropdowns. */
.fp-sel .col-pick { min-width: 0; }
@media (max-width: 640px) {
  .search-bar .col-search, .search-bar .col-pick { flex: 1 1 calc(50% - 6px); width: auto; }
  .search-bar-end { margin-left: 0; width: 100%; justify-content: space-between; }
}


.account-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 61; min-width: 220px;
  display: flex; flex-direction: column; padding: 5px; background: #fff;
  border: 1px solid #e4e7ec; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.12);
}
.account-menu button {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: none; background: none;
  border-radius: 8px; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; text-align: left;
}
.account-menu button:hover { background: #f1f5f9; }
/* The container's ⋯ menu opens downwards, under its button. */
.account-menu.drop { top: calc(100% + 6px); bottom: auto; }
.account-menu button.danger { color: #b42318; }
.account-menu button.danger:hover { background: #fef3f2; }

/* A data table: the dashboard's and the documents
   register's, so the two read alike. Columns size to what is in them; the
   card scrolls sideways when they do not fit, rather than clipping. */
.dt-card { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #334155; }
.dt th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  color: #94a3b8; padding: 9px 12px; background: #fcfdfd; border-bottom: 1px solid #e4e7ec; white-space: nowrap;
}
.dt td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
/* Every other row a shade off white, just enough to follow a row across. */
.dt tbody tr:nth-child(even) td { background: #fbfcfd; }
.dt tbody tr:hover td { background: #f3f6f9; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt .nw { white-space: nowrap; }
.dt .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt .muted { color: #94a3b8; }
.dt .sub { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.dt .ord { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #0f766e; cursor: pointer; white-space: nowrap; }
.dt .ord:hover { text-decoration: underline; }
.dt .acts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.cell-in { font: inherit; color: #334155; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 3px 6px; width: 136px; box-sizing: border-box; }
.cell-in.money { width: 112px; text-align: right; font-variant-numeric: tabular-nums; }
.cell-in:hover:not(:disabled) { border-color: #d0d5dd; background: #fff; }
.cell-in:focus { outline: none; border-color: #0d9488; background: #fff; }
.cell-in:disabled { color: #cbd5e1; cursor: not-allowed; }
.paid { color: #047857; font-weight: 600; }
.sd-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sd-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #475569; }
.sd-f .cell-in { width: 150px; border-color: #e4e7ec; background: #fff; }
.dt-empty { padding: 14px; font-size: 13px; color: #94a3b8; }
/* A grouped table: a row per group, closed until clicked, its rows under it. */
.dt tbody tr.dt-group td { background: #fff; cursor: pointer; vertical-align: middle; border-bottom: 1px solid #eef2f6; }
.dt tbody tr.dt-group:hover td { background: #f6f8fa; }
.dt tbody tr.dt-group.open td { background: #f8fafc; }
.dt tbody tr.dt-in td { background: #fcfdfe; }
.dt tbody tr.dt-in td:first-child { padding-left: 32px; }
.dt .dt-chev { display: inline-flex; vertical-align: -2px; margin-right: 7px; color: #94a3b8; transition: transform 0.15s; }
.dt tr.dt-group.open .dt-chev { transform: rotate(90deg); }
.dt .dt-counts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mc-grp.open .mc-go { transform: rotate(90deg); }
.mc-group { display: flex; flex-direction: column; gap: 8px; margin: -2px 0 4px 14px; }

/* A heading is its column's menu: sort, and narrow to some of its values. One
   symbol says which — up or down when sorted, a funnel when narrowed. */
.th-btn {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap;
}
.th-btn:hover { color: #475569; }
.th-ic { display: inline-flex; opacity: 0.45; }
.th-btn:hover .th-ic { opacity: 0.8; }
.th-btn.on { color: #0f766e; }
.th-btn.on .th-ic { opacity: 1; }
/* A column title that filters: its name and chevron one line, a sort arrow beside, a dot once it narrows the list. */
.th-pick-wrap { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: #94a3b8; }
.th-pick-wrap .th-btn { min-width: 0; }
.th-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.th-dot { flex: none; min-width: 6px; height: 6px; border-radius: 6px; background: #0d9488; color: #fff; font-size: 8px; line-height: 6px; text-align: center; letter-spacing: 0; }
.th-dot:not(:empty) { height: 12px; min-width: 12px; line-height: 12px; padding: 0 2px; box-sizing: border-box; }
.th-sort-btn { flex: none; display: inline-flex; border: 0; background: none; padding: 0; cursor: pointer; color: #94a3b8; opacity: 0.45; }
.th-sort-btn:hover { opacity: 0.9; color: #475569; }
.th-sort-btn.on { opacity: 1; color: #0d9488; }
/* A date menu opens from a point in the window: its own menu hangs 4 px below it. */
.drp-at { position: fixed; z-index: 61; top: calc(var(--mt, 0px) - 4px); left: var(--ml, 0px); width: 0; height: 0; }
.th-menu {
  position: fixed; z-index: 61; width: 260px; box-sizing: border-box; padding: 6px 0;
  background: #fff; border: 1px solid #d0d5dd; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  font-size: 12.5px; color: #334155; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.th-sort { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; padding: 6px 12px; cursor: pointer; }
.th-sort:hover { background: #f1f5f9; }
.th-sort.on { color: #0f766e; font-weight: 600; }
.th-sep { height: 1px; background: #f1f5f9; margin: 4px 0; }
.th-search { box-sizing: border-box; width: calc(100% - 20px); margin: 2px 10px 4px; height: 28px; border: 1px solid #d0d5dd; border-radius: 7px; padding: 0 8px; font: inherit; font-size: 12px; }
.th-vals { max-height: 240px; overflow-y: auto; }
.th-val { display: flex; align-items: center; gap: 8px; padding: 4px 12px; cursor: pointer; }
.th-val:hover { background: #f8fafc; }
.th-val input { margin: 0; accent-color: #0d9488; }
.th-val span:nth-of-type(1) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-n { font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.th-none { padding: 6px 12px; color: #94a3b8; }
.th-foot { display: flex; gap: 4px; border-top: 1px solid #f1f5f9; margin-top: 4px; padding: 6px 8px 0; }
.th-foot button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: #0d9488; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.th-foot button:hover { background: #f0fdfa; }

/* What a container still needs, one chip each, its action first: Upload · BL. */
.needs { display: flex; flex-wrap: wrap; gap: 4px; }
.need {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e4e7ec; border-radius: 999px;
  background: #fff; padding: 2px 8px; font: inherit; font-size: 11.5px; color: #334155; cursor: pointer; white-space: nowrap;
}
.need:hover { border-color: #0d9488; }
.need b { font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.need.upload b { color: #0f766e; }
.need.input b { color: #1d4ed8; }
.need.decide b { color: #b45309; }
.need.mark b { color: #64748b; }
.need.blocked { opacity: 0.55; }
.need.doc { color: #b45309; border-color: #fde7c7; background: #fffbf5; }
.need.doc:hover { border-color: #f59e0b; }

/* The date picker: a dropdown of quick picks, and two small months once
   "Custom range" is chosen. */
.drp-backdrop { position: fixed; inset: 0; z-index: 60; }
.drp-menu {
  position: absolute; z-index: 61; top: calc(100% + 4px); left: 0; box-sizing: border-box;
  max-width: calc(100vw - 24px); background: #fff; border: 1px solid #d0d5dd; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); font-size: 12px; color: #334155; text-align: left;
}
.drp-list { width: 170px; padding: 4px 0; }
/* A field at the right of the screen opens its picker leftward. */
.drp-right > .drp-menu { left: auto; right: 0; }
.drp-pick {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; font: inherit; font-size: 12.5px; color: #334155; text-align: left;
  padding: 6px 12px; cursor: pointer;
}
.drp-pick:hover { background: #f1f5f9; }
.drp-pick.on { background: #0d9488; color: #fff; }
.drp-n { font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.drp-cals { display: flex; gap: 14px; padding: 8px 10px 4px; }
/* The simple picker's ready ranges, over its calendar: one click fills the range. */
.drp-ranges { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 10px 7px; border-bottom: 1px solid #f1f5f9; }
.drp-range { height: 26px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #334155; cursor: pointer; white-space: nowrap; }
.drp-range:hover { background: #f1f5f9; }
.drp-range.on { background: #0d9488; border-color: #0d9488; color: #fff; }
.drp-cal { width: 182px; }
.drp-head { position: relative; display: flex; align-items: center; justify-content: center; gap: 1px; height: 24px; }
.drp-nav { position: absolute; top: 0; height: 24px; border: 0; background: none; font-size: 17px; line-height: 1; color: #334155; cursor: pointer; padding: 0 5px; }
.drp-nav.prev { left: 0; }
.drp-nav.next { right: 0; }
.drp-nav.next-m { display: none; }
.drp-ym { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: #0f172a; padding: 2px 4px; border-radius: 5px; cursor: pointer; }
.drp-ym:hover { background: #f1f5f9; }
.drp-ym.on { background: #0d9488; color: #fff; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1px; text-align: center; }
.drp-wd { font-size: 10.5px; font-weight: 700; color: #64748b; padding: 3px 0; }
.drp-day { height: 24px; border: 0; border-radius: 5px; background: none; font: inherit; font-size: 11.5px; color: #334155; cursor: pointer; font-variant-numeric: tabular-nums; }
.drp-day:hover { background: #f1f5f9; }
.drp-day.out { color: #b6bec9; }
.drp-day.today { font-weight: 700; color: #0f766e; }
.drp-day.in { background: #e6f6f4; border-radius: 0; }
.drp-day.on { background: #0d9488; color: #fff; }
.drp-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding: 6px 10px 8px; border-top: 1px solid #f1f5f9; }
.drp-sum { margin-right: auto; font-size: 12px; color: #334155; }
.drp-clear { border: 0; background: none; font: inherit; font-size: 12px; color: #64748b; cursor: pointer; padding: 0 4px; }
.drp-btn { height: 26px; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #0f172a; cursor: pointer; }
.drp-btn.primary { background: #0d9488; border-color: #0d9488; color: #fff; }
.drp-btn:disabled { opacity: 0.5; cursor: default; }
/* A phone: one month at a time. */
@media (max-width: 640px) {
  .drp-cal + .drp-cal { display: none; }
  .drp-nav.next-m { display: block; }
}

/* The advanced filters open downward, in place of the simple ones. */
@keyframes fp-expand { from { opacity: 0; max-height: 0; transform: translateY(-4px); } to { opacity: 1; max-height: 1400px; transform: none; } }
.fp.fp-enter { animation: fp-expand 280ms ease-out; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .fp.fp-enter { animation: none; } }

/* ---------- a row as a card (table.ts) ----------
   Drawn only on a phone, where a table's columns have no room: what the row
   is with its status chip, the line that names it, its dates, and whatever it
   can be done from. */
.mc-list { display: flex; flex-direction: column; gap: 10px; }
.mc {
  background: #fff; border-radius: 16px; padding: 14px 14px 13px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.06);
  display: flex; flex-direction: column; gap: 6px;
}
.mc-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mc-tap:active { background: #f8fafc; }
.mc-top { display: flex; align-items: center; gap: 10px; }
.mc-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; color: #0f172a; line-height: 1.3; overflow-wrap: anywhere; }
.mc-chip { flex: none; display: inline-flex; }
.mc-go { flex: none; display: inline-flex; color: #94a3b8; margin-right: -4px; transition: transform 0.15s; }
.mc-sub { font-size: 13.5px; color: #475569; overflow-wrap: anywhere; }
.mc-dot { margin: 0 6px; color: #cbd5e1; }
.mc-dates { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 2px; }
.mc-date { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 14px; font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums; }
.mc-date > b { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; line-height: 1; }
.mc-body { font-size: 13px; color: #475569; }
.mc-note { font-size: 13px; color: #667085; overflow-wrap: anywhere; }
.mc-miss > b { color: #b45309; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 4px; }
.mc-changes { display: flex; flex-direction: column; gap: 2px; font-size: 13px; margin-bottom: 2px; }
.mc-rowno {
  display: inline-block; margin-right: 8px; vertical-align: 2px; padding: 0 7px; border-radius: 6px;
  background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; font-size: 12px; font-variant-numeric: tabular-nums;
}
.mc-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mc-acts > button { justify-content: center; font-size: 14px !important; padding: 0 18px !important; }
.mc-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mc-sort {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 12px;
  background: #fff; color: #334155; font-weight: 600;
}
.mc-clear { border: 0; background: none; color: #0d9488; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }

/* What only a phone shows: kept out of a desk's way. */
.tb-sheet-bg, .tb-sheet-head, .fp-sheet-foot { display: none; }

/* ---------- a phone ----------
   An app's layout rather than the desk's squeezed: a bar across the top with
   the page's name and the add button, tabs along the bottom, cards where a
   desk has tables, and sheets — rising from the bottom, or filling the
   screen — where a desk has dropdowns, panels and dialogs. Every control is a
   44px target, every field 16px so iOS does not zoom into it, and nothing is
   wider than the screen. The breakpoint is runtime.ts's PHONE. */
@keyframes m-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .m-sheet, .add-menu, .m-dlg, [data-filter-panel], .fl-menu, .drp-menu, .tb-more,
  .m-sheet-bg, .add-menu-bg, .fl-backdrop, .drp-backdrop, .tb-sheet-bg { animation: none !important; }
}

@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; overflow-x: clip; }
  /* A sheet up: the page under it stays put. */
  body:has(.m-lock), body:has([data-filter-panel]), body:has(.toolbar-wrap.open) { overflow: hidden; }

  .app-shell { flex-direction: column !important; }
  .screen { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)) !important; }
  .hide-mobile { display: none !important; }
  /* The app bar names the page, so its heading and lede give way — and a row left with nothing in it goes too. */
  .page-intro { display: none !important; }
  .page-head:not(:has(> :not(.page-intro, .hide-mobile))) { display: none !important; }
  .page-head .fl { flex: 1 1 100%; width: 100% !important; }

  /* Touch: a target you can hit, and a field iOS will not zoom into. */
  button, [role="button"], select { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.xg-editor):not(.xg-nav):not(.fp-days), select { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not(.xg-editor):not(.xg-nav), select, textarea { font-size: 16px !important; }
  .fl > .fl-box { height: 44px; font-size: 15px; }
  .fl > .fl-label { font-size: 15px; }
  .fl.filled > .fl-box, .fl > input.fl-box:focus, .fl > input.fl-box:not(:placeholder-shown) { padding-top: 14px; }
  /* Tick boxes stay small to look at and grow to be hit. */
  button.task-box, button[role="checkbox"], .fp-switch { min-height: 0; }
  button.task-box, button[role="checkbox"] { position: relative; }
  button.task-box::after, button[role="checkbox"]::after { content: ""; position: absolute; inset: -12px; }
  .fp-switch { width: 44px; height: 26px; }
  .fp-switch::after { width: 22px; height: 22px; }
  .fp-switch[aria-checked="true"]::after { transform: translateX(18px); }

  /* ---------- the app bar and the tabs ---------- */
  .m-appbar {
    position: sticky; top: 0; z-index: 40; box-sizing: border-box; min-height: 56px;
    display: flex; align-items: center; gap: 10px;
    padding: calc(env(safe-area-inset-top) + 8px) 12px 8px 14px;
    background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  }
  .m-appbar-logo {
    width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2dd4bf, #0d9488); box-shadow: 0 4px 10px rgba(13, 148, 136, 0.28);
  }
  .m-appbar-title { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-appbar-add {
    flex: none; width: 44px; height: 44px; border-radius: 14px; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: #0d9488; color: #fff; box-shadow: 0 6px 14px rgba(13, 148, 136, 0.3);
  }
  .m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex;
    padding: 4px 4px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.9); border-top: 1px solid rgba(15, 23, 42, 0.08);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  }
  .m-tab {
    flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; padding: 0; cursor: pointer; color: #64748b;
    font-size: 11px; font-weight: 600; line-height: 1.1; -webkit-tap-highlight-color: transparent;
  }
  .m-tab > svg { box-sizing: content-box; padding: 3px 16px; border-radius: 999px; transition: background 0.15s; }
  .m-tab[aria-current="page"] { color: #0f766e; font-weight: 700; }
  .m-tab[aria-current="page"] > svg { background: #ccfbf1; }

  /* A sheet from the bottom: More, and the add menu. */
  .m-sheet-bg, .add-menu-bg { position: fixed; inset: 0; z-index: 60 !important; background: rgba(16, 24, 40, 0.45); animation: m-fade 0.18s; }
  .m-sheet, .add-menu {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 61 !important;
    display: flex; flex-direction: column; max-height: 85vh; overflow-y: auto; box-sizing: border-box;
    padding: 6px 8px calc(env(safe-area-inset-bottom) + 10px) !important;
    background: #fff !important; border-radius: 20px 20px 0 0 !important; border: 0 !important;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2) !important; animation: m-up 0.22s ease-out;
  }
  .add-menu { padding-top: 14px !important; }
  .add-menu > button { min-height: 56px; align-items: center !important; }
  .m-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: #d0d5dd; align-self: center; margin: 4px 0 8px; flex: none; }
  .m-sheet-item {
    display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; flex: none;
    border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left;
    font-size: 15.5px; font-weight: 600; color: #1e293b;
  }
  .m-sheet-item > svg:first-child { color: #0d9488; flex: none; }
  .m-sheet-item[aria-current="page"] { background: #f0fdfa; color: #0f766e; }
  .m-sheet-who { display: flex; flex-direction: column; margin: 8px 4px 4px; padding: 12px 8px 6px; border-top: 1px solid #eef1f4; }
  .m-sheet-who > b { font-size: 15px; color: #0f172a; }
  .m-sheet-who > span { font-size: 12.5px; color: #94a3b8; }
  #sync-badge { bottom: calc(72px + env(safe-area-inset-bottom)) !important; right: 12px !important; }

  .pw-banner { margin: 10px 12px 0; padding: 10px 12px; flex-wrap: nowrap; font-size: 13px; }
  .pw-banner > span:nth-child(2) { min-width: 0 !important; }

  /* ---------- toolbars ----------
     Stuck under the app bar — whose height runtime.ts measures. The search
     and the tabs stay in the bar; the selects are a sheet behind Filters. */
  /* In the page rather than stuck under the app bar: on a phone the screen is for the cards. */
  .toolbar-wrap { position: relative; top: auto; padding: 8px; gap: 8px !important; }
  .tb-search { flex: 1 1 100% !important; min-width: 0; max-width: none !important; }
  .tb-seg-row { display: flex; flex: 1 1 100%; gap: 8px; align-items: center; min-width: 0; }
  .tb-seg { max-width: 100%; min-width: 0; overflow-x: auto !important; scrollbar-width: none; }
  .tb-seg-row > .tb-seg { flex: 1 1 auto; }
  .tb-seg::-webkit-scrollbar { display: none; }
  .tb-seg > button { flex: none; font-size: 14px !important; }
  .tb-more-btn { display: inline-flex; flex: none; height: 44px; font-size: 14px; }
  .tb-more { display: none; }
  /* Open: the bar drops its blur, which would otherwise be the box the sheet is fixed to. */
  .toolbar-wrap.open { z-index: 120; -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  .toolbar-wrap.open > .tb-sheet-bg { display: block; position: fixed; inset: 0; background: rgba(16, 24, 40, 0.45); animation: m-fade 0.18s; }
  .toolbar-wrap.open > .tb-more {
    position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px;
    max-height: 85vh; overflow-y: auto; box-sizing: border-box; padding: 0 16px calc(env(safe-area-inset-bottom) + 16px);
    background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2); animation: m-up 0.22s ease-out;
  }
  .tb-more > * { width: 100% !important; max-width: none !important; min-width: 0; box-sizing: border-box; }
  .tb-more > .tb-sheet-head {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1;
    padding: 14px 0 6px; background: #fff; font-size: 17px;
  }
  .tb-sheet-head > button { border: 0; background: none; color: #0d9488; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 4px; }
  .tb-more > .tb-count { font-size: 13px !important; text-align: center; }

  /* The container list's bar: the order number to search, the Filters button, the count. */
  .m-listbar { display: flex; flex-wrap: wrap; align-items: center; }
  .m-search { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
  .m-search > svg { position: absolute; left: 12px; pointer-events: none; }
  .m-search > .col-search { width: 100%; height: 44px; padding-left: 38px; border-radius: 12px; }
  .m-filter-btn {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; cursor: pointer;
    border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; color: #334155;
  }
  .m-filter-btn.on { border-color: #0d9488; background: #f0fdfa; color: #0f766e; }
  .m-badge { display: inline-flex; border-radius: 999px; padding: 0 7px; font-size: 11.5px; line-height: 18px; background: #0d9488; color: #fff; }
  .m-count { flex: 1 1 100%; padding: 0 4px; font-size: 12.5px; color: #64748b; }
  .quick-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .quick-tabs::-webkit-scrollbar { display: none; }
  .preset-chip { flex: none; }
  .preset-chip-name { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .preset-chip-name.removable { padding-right: 4px; }

  /* ---------- the filters, as a sheet over the whole screen ---------- */
  [data-filter-panel] {
    position: fixed !important; inset: 0; z-index: 110; display: flex; flex-direction: column;
    margin: 0; padding: 0 !important; overflow-y: auto; overscroll-behavior: contain;
    background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  .fp.fp-enter { animation: m-up 0.24s ease-out; overflow-y: auto; }
  .fp-head { position: sticky; top: 0; z-index: 2; background: #fff; padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; border-bottom: 1px solid #eef1f4; }
  .fp-title { font-size: 19px; font-weight: 800; }
  .fp-save, .fp-sub { display: none !important; }
  .fp-actions > button:first-child { display: none; } /* Clear all is in the foot. */
  .fp-close { font-size: 14px; }
  .fp-tags { padding: 0 16px; }
  .fp-rows { flex: 1; padding: 0 16px 8px; }
  .fp-row { padding: 14px 0; }
  .fp-row-h { font-size: 12px; }
  .fp-chip { height: 40px; padding: 0 14px; font-size: 14px; }
  .fp-chip.sm { height: 36px; font-size: 13.5px; }
  .fp-check { height: 44px; font-size: 14px; }
  .fp-toggle { font-size: 14px; }
  .fp-sheet-foot {
    display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 2;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px); background: #fff; border-top: 1px solid #eef1f4;
  }
  .fp-sheet-clear, .fp-sheet-done { height: 48px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
  .fp-sheet-clear { flex: none; padding: 0 18px; border: 1px solid #d0d5dd; background: #fff; color: #334155; }
  .fp-sheet-done { flex: 1; border: 0; background: #0d9488; color: #fff; }
  .m-sort { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .m-sort > select { flex: 1 1 100%; height: 44px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; color: #334155; }
  .m-sort > .pl-toggle { flex: 1 1 100%; }
  .m-sort .pl-opt { flex: 1; height: 44px; font-size: 14px; }

  /* A dropdown's list, and a date's picker: sheets from the bottom, over whatever opened them. */
  .fl-backdrop, .drp-backdrop { z-index: 130 !important; background: rgba(16, 24, 40, 0.45); animation: m-fade 0.18s; }
  .fl-menu, .fl > .fl-menu {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 131; width: auto; max-width: none;
    display: flex; flex-direction: column; max-height: 75vh; box-sizing: border-box;
    padding: 14px 14px calc(env(safe-area-inset-bottom) + 14px); border: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2); animation: m-up 0.2s ease-out;
  }
  .fl-menu > [data-sk] { max-height: none !important; flex: 1 1 auto; min-height: 0; }
  .fl-menu label { min-height: 44px; font-size: 15px !important; gap: 12px !important; }
  .fl-menu input[type="checkbox"] { width: 20px; height: 20px; accent-color: #0d9488; }
  .fl-menu button { font-size: 15px !important; }
  .drp-menu, .drp-right > .drp-menu {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 131; max-width: none; max-height: 88vh; overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom); border: 0; border-radius: 20px 20px 0 0; font-size: 14px;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2); animation: m-up 0.2s ease-out;
  }
  .drp-list { width: auto; padding: 10px 0; }
  .drp-pick { min-height: 48px; padding: 0 20px; font-size: 15.5px; }
  .drp-n { font-size: 13px; }
  .drp-cals { justify-content: center; padding: 14px 14px 6px; }
  .drp-ranges { padding: 14px 14px 10px; gap: 8px; }
  .drp-range { height: 38px; padding: 0 14px; font-size: 14px; }
  .drp-cal { width: 100%; max-width: 400px; }
  .drp-head { height: 44px; }
  .drp-nav { height: 44px; width: 44px; font-size: 26px; }
  .drp-ym { font-size: 16px; padding: 6px 10px; min-height: 0; }
  .drp-wd { font-size: 12px; padding: 6px 0; }
  .drp-day { height: 44px; font-size: 15px; border-radius: 10px; }
  .drp-foot { gap: 10px; padding: 10px 14px 14px; }
  .drp-sum { flex-basis: 100%; font-size: 14px; }
  .drp-btn { height: 44px; padding: 0 18px; border-radius: 10px; font-size: 15px; }
  .drp-clear { font-size: 14.5px; }

  /* ---------- dialogs: a form fills the screen; a question rises from the foot ---------- */
  .m-dlg-bg { padding: 0 !important; align-items: stretch !important; }
  .m-dlg {
    max-width: none !important; box-sizing: border-box; overscroll-behavior: contain;
    border: 0 !important; animation: m-up 0.24s ease-out;
  }
  .m-dlg-full .m-dlg {
    height: 100%; max-height: none !important; border-radius: 0 !important; display: flex; flex-direction: column;
    padding: calc(env(safe-area-inset-top) + 18px) 16px 0 !important;
  }
  .m-dlg-sheet { align-items: flex-end !important; }
  .m-dlg-sheet .m-dlg { max-height: 92vh !important; border-radius: 20px 20px 0 0 !important; padding: 20px 16px 0 !important; }
  .m-dlg-foot {
    position: sticky; bottom: 0; z-index: 2; margin: auto -16px 0 !important; box-sizing: border-box;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px); background: #fff; border-top: 1px solid #eef1f4;
  }
  .m-dlg-foot > button { flex: 1; min-height: 48px; font-size: 15px !important; }
  .m-one-col { grid-template-columns: minmax(0, 1fr) !important; }
  .m-dlg-full .m-dlg > :last-child:not(.m-dlg-foot) { margin-bottom: calc(env(safe-area-inset-bottom) + 20px); }
  .bl-upload { grid-template-columns: 1fr !important; }
  .bl-upload-preview { height: 300px !important; }

  /* ---------- tables become cards ---------- */
  .dt-card, .dash-pick { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
  .dash-pick-head { padding: 2px 2px 10px !important; border: 0 !important; flex-wrap: wrap; }
  .table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ---------- the dashboard ---------- */
  /* Two cards a row. */
  .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dash-card { padding: 12px; }
  .dash-card-num { font-size: 26px; }
  .job-row { flex-wrap: wrap; row-gap: 4px !important; }
  .job-row > span:first-child { flex: 1 1 auto !important; width: auto !important; font-size: 14px !important; }
  .job-row > span:nth-child(2) { order: 3; flex: 1 1 100% !important; }

  /* ---------- the container list's cards ---------- */
  .c-card { overflow: clip !important; }
  .c-card-in { padding: 14px 14px 12px; }
  .c-head { display: flex; flex-direction: column; gap: 7px; margin: -14px -14px 0; padding: 14px 14px 2px; -webkit-tap-highlight-color: transparent; }
  .c-head:active { background: #f8fafc; }
  .c-card .rail { margin: 12px 0 0 !important; max-width: none !important; }
  /* Under the dots, only the stage it is at: eight labels do not fit across a phone. */
  .rail-lbl { display: none !important; }
  .rail-lbl.rail-cur { display: block !important; font-size: 10px !important; letter-spacing: 0.02em !important; white-space: nowrap; }
  .rail-step { min-height: 40px; }
  .work-panel { margin: 10px 0 0 !important; }

  /* ---------- a container, opened ---------- */
  .c-detail { padding: 12px 10px 0 !important; gap: 12px !important; }
  .stage-box { padding: 3px 12px 4px !important; border-radius: 12px !important; }
  .stage-box > [role="button"] { min-height: 48px; }
  .stage-box > :last-child:not([role="button"]) { margin-bottom: 8px; }
  .do-dates { flex-wrap: wrap; }
  .do-dates > div { flex: 1 1 130px; min-width: 0; }
  .do-dates input { width: 100%; padding: 0 8px !important; }
  section .mc { box-shadow: 0 0 0 1px #eef1f4; }
  .steps-scroll { padding: 0; margin: 0; gap: 12px; }
  .kd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px !important; }
  .kd-grid input, .kd-grid select { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  .task-row { flex-wrap: wrap; gap: 8px 12px !important; padding: 12px 0 !important; }
  .task-main { flex: 1 1 0 !important; }
  .task-label { font-size: 15px !important; }
  .task-box { width: 24px !important; height: 24px !important; margin-top: 0 !important; }
  .task-acts { flex: 1 1 100% !important; max-width: none !important; justify-content: flex-start !important; gap: 8px !important; padding-left: 36px; }
  .task-acts:empty { display: none; }
  .task-acts > button, .task-acts > span > button { font-size: 14px !important; padding: 0 16px !important; }
  .task-acts > input[type="date"] { flex: 1 1 100%; width: 100% !important; }
  .task-main button { font-size: 13.5px !important; }
  .log-row { flex-wrap: wrap; column-gap: 8px !important; row-gap: 2px !important; font-size: 13px !important; }
  .log-time { width: auto !important; }
  .log-msg { flex-basis: 100%; }
  .m-detail-bar {
    display: flex; align-items: center; gap: 8px; position: sticky; z-index: 5;
    bottom: calc(64px + env(safe-area-inset-bottom)); margin: 4px -10px 0; padding: 8px 10px;
    background: rgba(255, 255, 255, 0.94); border-top: 1px solid #eef1f4;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .m-detail-close, .m-detail-next { display: inline-flex; align-items: center; gap: 4px; border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
  .m-detail-close { border: 1px solid #d0d5dd; background: #fff; color: #334155; }
  .m-detail-next { border: 0; background: #0d9488; color: #fff; }
  .m-detail-name { flex: 1; min-width: 0; text-align: center; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- toasts ----------
   The shelf feedback.ts keeps outside the app: top-centre on a desk, readable
   from across the room; the width of the screen less a margin on a phone,
   under the top bar. */
.toasts {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); right: auto; bottom: auto; z-index: 9998;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 520px; box-sizing: border-box;
  padding: 12px 10px 12px 16px; border-radius: 12px; font: 600 14.5px Figtree, system-ui, sans-serif;
  background: #0f172a; color: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
  animation: toast-in 180ms ease-out;
}
.toast.ok { border-left: 4px solid #2dd4bf; }
.toast.error { background: #7f1d1d; border-left: 4px solid #fca5a5; }
.toast.out { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.toast-text { flex: 1; min-width: 0; }
.toast-x {
  flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; border: none; border-radius: 7px;
  background: transparent; color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.toast-action {
  flex: none; min-height: 0; padding: 4px 10px; border: none; border-radius: 7px; background: transparent;
  color: #5eead4; font: inherit; font-weight: 700; cursor: pointer;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.toast-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.out { transition: none; } }
@media (max-width: 860px) {
  .toasts { top: calc(64px + env(safe-area-inset-top)); left: 12px; right: 12px; transform: none; }
  .toast { max-width: 100%; width: 100%; }
}

/* ---------- Saved ✓ beside a field ----------
   feedback.ts puts one after the field it names and takes it away again. */
.saved-tick { display: inline-flex; align-items: center; margin-left: 6px; font: 600 12px Figtree, system-ui, sans-serif; color: #047857; white-space: nowrap; }
.saved-tick.bad { color: #b42318; }
.saved-tick.fresh { animation: tick-up 220ms ease-out; }
@keyframes tick-up { from { opacity: 0; transform: translateY(6px); } }
.saved-tick.pending { color: #667085; }
.saved-tick .spin {
  width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid #d0d5dd; border-top-color: #667085; animation: tick-spin 700ms linear infinite;
}
@keyframes tick-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .saved-tick.fresh, .saved-tick .spin { animation: none; } }

/* ---------- the confirm question ----------
   Takes the toast's type scale: 14.5px, 12px corners, dark-on-white buttons. */
@media (min-width: 861px) { .m-dlg:has(> .confirm-dlg) { border-radius: 12px !important; } }
.confirm-dlg { font-size: 14.5px; }
.confirm-dlg .confirm-body { font-size: 14.5px !important; }
.confirm-dlg button { font-size: 14.5px !important; border-radius: 10px !important; padding: 8px 16px !important; }
.confirm-dlg button.h-soft { background: #fff !important; color: #0f172a !important; border: 1px solid #d0d5dd !important; }
.confirm-dlg button.h-dark { background: #0f172a !important; color: #fff !important; border: 1px solid #0f172a !important; }
.confirm-dlg button.h-dark:not(:disabled):hover { background: #1e293b !important; border-color: #1e293b !important; }

/* ---------- HS codes page (src/hs.ts) ----------
   One calm table, the same read-only and in edit mode: no borders, no
   stripes, rows told apart by a hairline and a hover. Revamped 2026-10-22. */
.hs-page { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.hs-grow { flex: 1; }
.hs-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hs-title h1 { font-size: 22px; letter-spacing: -.015em; margin: 0; }
.hs-back { background: none; border: none; padding: 4px 8px 4px 0; font: inherit; font-size: 13px; font-weight: 600; color: #667085; cursor: pointer; }
.hs-back:hover { color: #0f766e; }

.hs-btn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 10px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; background: #fff; color: #344054; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.06); transition: background .12s, box-shadow .12s; }
.hs-btn:hover { background: #f9fafb; }
.hs-btn-dark { background: #101828; color: #fff; }
.hs-btn-dark:hover { background: #1d2939; }
.hs-btn-teal { background: #0f766e; color: #fff; }
.hs-btn-teal:hover { background: #115e59; }
.hs-btn-icon { padding: 8px 11px; }
.hs-btn-small { padding: 3px 10px; font-size: 12px; border-radius: 8px; }

.hs-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.hs-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hs-b-ai { background: #f4f3ff; color: #5925dc; }
.hs-b-ok { background: #ecfdf3; color: #067647; }
.hs-b-edit { background: #fffaeb; color: #b54708; }
.hs-b-bad { background: #fef3f2; color: #b42318; }

.hs-tabsbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hs-sheets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #667085; margin-top: -4px; }
.hs-sheets .hs-utabs button { padding: 4px 10px; font-size: 12.5px; white-space: nowrap; }
.hs-sheets .hs-utabs button:disabled { cursor: default; opacity: .55; }
.hs-sheet-warn { color: #b45309; font-size: 12.5px; }
.hs-utabs { display: inline-flex; gap: 4px; padding: 3px; background: #eef2f6; border-radius: 10px; }
.hs-utabs button { background: none; border: none; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: #667085; cursor: pointer; }
.hs-utabs button span { margin-left: 6px; font-size: 11.5px; color: #98a2b3; font-variant-numeric: tabular-nums; }
.hs-utabs button.on { background: #fff; color: #101828; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.hs-utabs button.on span { color: #475467; }
.hs-find { position: relative; }
.hs-find input { border: none; border-radius: 10px; background: #fff; padding: 8px 30px 8px 12px; width: 240px; font: inherit; font-size: 13px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.hs-find input:focus { outline: 2px solid #99f6e4; }
.hs-find button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; font-size: 16px; color: #98a2b3; cursor: pointer; }
.hs-menu-at { position: relative; }
.hs-menu-back { position: fixed; inset: 0; z-index: 40; }
.hs-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 41; min-width: 220px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.16); }
.hs-menu label:hover, .hs-menu button:hover { background: #f9fafb; }

.hs-plain { padding: 28px; text-align: center; color: #667085; font-size: 13.5px; }
.hs-plain.is-warn { color: #b45309; }
.hs-skel { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #eef2f6 0%, #f8fafc 50%, #eef2f6 100%); background-size: 200% 100%; animation: hs-shimmer 1.4s linear infinite; }
.hs-glass { position: relative; color: #94a3b8; font-style: italic; border-radius: 6px; background: linear-gradient(90deg, #f2f4f7 0%, #fafbfc 50%, #f2f4f7 100%); background-size: 200% 100%; animation: hs-shimmer 1.4s linear infinite; }
.hs-glass-row { height: 30px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; }
@keyframes hs-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .hs-skel, .hs-glass { animation: none; } }

.hs-item b { font-weight: 600; }
.hs-note { color: #98a2b3; font-weight: 400; }
.hs-code { display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; padding: 0 4px; }
.hs-code input { width: 104px; border: none; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 7px 4px; color: #64748b; }
.hs-code select { width: 22px; border: none; background: transparent; cursor: pointer; }
.hs-code.is-done input { color: #047857; }
.hs-code.is-bad { background: #fef2f2; }
.hs-code-text { font-weight: 600; font-variant-numeric: tabular-nums; }
.hs-ok { width: 26px; height: 26px; border-radius: 50%; border: none; background: #f2f4f7; color: #98a2b3; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hs-ok:not(:disabled):hover { background: #ccfbf1; color: #0f766e; }
.hs-ok.is-done { background: #dcfce7; color: #15803d; }
.hs-ok:disabled { cursor: default; }
.hs-ok.is-done:disabled { opacity: 1; }
.hs-price { width: 100px; border: none; border-radius: 8px; background: #f2f4f7; padding: 6px 9px; font: inherit; font-size: 13px; text-align: right; }
.hs-selbar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(16,24,40,.16); font-size: 13px; }
.hs-fill { display: inline-flex; gap: 6px; align-items: center; }

/* The table: the spreadsheet grid, without the spreadsheet look. */
.hs-sheetwrap { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05); overflow: hidden; }
.hs-grid .xg-scroll { max-height: calc(100vh - 230px); min-height: 280px; border: none; border-radius: 0; }
.hs-grid table { min-width: 900px; font-size: 13.5px; }
.hs-grid th { height: 40px; border: none; border-bottom: 1px solid #f2f4f7; background: #fff; color: #98a2b3; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0 12px; }
.hs-grid th:hover, .hs-grid th.in { background: #fff; color: #0f766e; }
.hs-grid td { height: 46px; border: none; border-bottom: 1px solid #f5f6f8; padding: 0 12px; background: #fff; }
.hs-grid tbody tr:last-child > td { border-bottom: none; }
.hs-grid td.ro:not(.in) { background: #fff; color: #101828; }
.hs-grid tbody tr:hover > td:not(.in):not(.edit):not(.bad) { background: #f8fbfb; }
.hs-grid td.in { background: #effcf9; }
/* The active cell: a soft ring only where typing goes; elsewhere the row is lit instead. */
.hs-grid td.act { box-shadow: inset 0 0 0 2px #5eead4; border-radius: 8px; }
.hs-grid:not(.is-writable) td.act { box-shadow: none; }
.hs-grid:not(:focus-within) td.act { box-shadow: none; }
.hs-grid td.edit { box-shadow: inset 0 0 0 2px #0d9488; border-radius: 8px; }
.hs-grid .xg-editor { padding: 0 12px; font-size: 13.5px; font-weight: 600; }
.hs-grid td.hs-strip { position: relative; color: #98a2b3; padding-left: 18px; font-variant-numeric: tabular-nums; }
.hs-grid td.hs-strip::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.hs-grid td.hs-s-used::before { background: #14b8a6; }
.hs-grid td.hs-s-book::before { background: #3b82f6; }
.hs-grid td.hs-s-g::before { background: #22c55e; }
.hs-grid td.hs-s-y::before { background: #f59e0b; }
.hs-grid td.hs-s-r::before { background: #ef4444; }
.hs-grid td.hs-s-wait::before { background: #cbd5e1; }
.hs-grid td.hs-c-desc { color: #101828; font-weight: 500; }
.hs-grid td.ro.hs-c-quiet:not(.in) { color: #667085; }
.hs-grid td.hs-c-sug, .hs-grid td.ro.hs-c-sug:not(.in) { color: #94a3b8; font-weight: 600; }
.hs-grid td.hs-c-carry { color: #0d9488; font-weight: 600; font-style: italic; }
.hs-grid td.hs-c-ok, .hs-grid td.ro.hs-c-ok:not(.in) { color: #101828; font-weight: 700; }
.hs-grid td.hs-c-wait { padding: 6px 8px; }
.hs-grid td.hs-c-btn { cursor: default; text-overflow: clip; text-align: center !important; }
.hs-mean { margin-left: 10px; font-size: 12px; font-weight: 400; font-style: normal; color: #98a2b3; }
.hs-tabkey { margin-left: 8px; vertical-align: 1px; }
.hs-glass-cell { display: flex; align-items: center; height: 30px; padding: 0 10px; font-size: 12px; }
.hs-drop { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: none; border-radius: 7px; background: #f2f4f7; color: #334155; cursor: pointer; font-size: 11px; }
.hs-drop:hover { background: #ccfbf1; color: #0f766e; }
.hs-grid .xg-quiet { min-height: 0; padding: 0 16px; font-size: 12px; color: #0f766e; font-weight: 600; }
.hs-grid .xg-quiet:not(:empty) { padding: 10px 16px; border-top: 1px solid #f5f6f8; }
.hs-grid .xg-refused { color: #b91c1c; }
.hs-keys { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #98a2b3; margin-top: -6px; }
.hs-keys .hs-kbd { margin-left: 8px; }
.hs-keys .hs-kbd:first-child { margin-left: 0; }
.hs-choice { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.hs-choice:hover, .hs-choice.on { background: #f0fdfa; }
.hs-choice b { min-width: 80px; font-variant-numeric: tabular-nums; color: #101828; }
.hs-choice .t { flex: 1; min-width: 0; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-choice-why { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.hs-choice.is-quiet { cursor: default; background: none; }
.hs-kbd { font-size: 10.5px; font-weight: 700; color: #0f766e; background: #ccfbf1; border-radius: 5px; padding: 1px 6px; font-style: normal; }

/* Phone: a compact card per row. */
.hs-cards { display: flex; flex-direction: column; gap: 8px; }
.hs-card { background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.05); }
.hs-card.is-flag { box-shadow: inset 3px 0 0 #f04438, 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.05); }
.hs-card-top { display: flex; align-items: center; gap: 8px; }
.hs-card-item { flex: 1; min-width: 0; font-size: 13px; }
.hs-line { color: #94a3b8; font-size: 12px; min-width: 18px; }
.hs-card-meta { font-size: 11.5px; color: #667085; padding-left: 26px; }
.hs-card-price { display: flex; align-items: center; gap: 10px; padding-left: 26px; font-size: 12px; color: #475569; }
.hs-card-price .hs-price { width: 120px; }
.hs-card-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 26px; }
.hs-card-code .hs-code { background: #f2f4f7; }
.hs-card-src { display: inline-flex; align-items: center; gap: 6px; }
.hs-mfn { font-size: 11px; color: #667085; }
@media (max-width: 860px) {
  .hs-find, .hs-find input { width: 100%; }
  .hs-utabs { gap: 14px; overflow-x: auto; max-width: 100%; }
  .hs-title { flex-wrap: wrap; }
  .hs-selbar { position: fixed; left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .hs-selbar .hs-fill { flex: 1 1 100%; }
  .hs-selbar .hs-fill input { flex: 1; min-width: 0; width: auto !important; }
  .hs-page { padding-bottom: 200px; }
}

/* ---------- Unassigned Orders: Take this order, then Open this order ---------- */
.btn-take, .btn-open {
  box-sizing: border-box; height: 32px; padding: 0 14px; border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.btn-take { background: #0d9488; border: 1px solid #0d9488; color: #fff; }
.btn-take:not(:disabled):hover { background: #0f766e; border-color: #0f766e; }
.btn-take:disabled { opacity: .6; cursor: default; }
.btn-open { background: #fff; border: 1px solid #2563eb; color: #1d4ed8; }
.btn-open:hover { background: #eff6ff; }
.take-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.taken-by { font-size: 12px; font-weight: 600; color: #94a3b8; white-space: nowrap; }
.mc-acts > .btn-take, .mc-acts > .btn-open { flex: 1; height: 38px; }
.mc-acts > .take-cell { flex: 1; gap: 8px; }
.mc-acts > .take-cell > button { justify-content: center; height: 38px; font-size: 14px !important; padding: 0 18px !important; }
.mc-acts > .take-cell > .btn-open { flex: 1; }

/* ---------- the staging bar ----------
   Across the top of every page on the test copy (envbar.ts). Sticky, above the
   shell, so everything else that sticks to the top of the window — the
   sidebar, the toolbar, the phone's top bar, the toasts — sits under it. */
:root { --env-bar-h: calc(30px + env(safe-area-inset-top)); }
.env-bar {
  position: sticky; top: 0; z-index: 90; box-sizing: border-box; height: var(--env-bar-h);
  padding: env(safe-area-inset-top) 8px 0; display: flex; align-items: center; justify-content: center;
  background: #f79009; color: #fff; font-size: 13px; font-weight: 700; text-align: center; line-height: 18px;
}
body:has(.env-bar) .sidebar { top: calc(var(--env-bar-h) + 14px) !important; height: calc(100vh - var(--env-bar-h) - 28px) !important; }
body:has(.env-bar) .m-appbar { top: var(--env-bar-h); padding-top: 8px; }
body:has(.env-bar) .toasts { top: calc(var(--env-bar-h) + 16px); }
/* The toolbar sticks on a desk only; on a phone it is in the flow. */
@media (min-width: 861px) {
  body:has(.env-bar) .toolbar-wrap { top: calc(var(--env-bar-h) + 14px); }
}
@media (max-width: 860px) {
  body:has(.env-bar) .toasts { top: calc(var(--env-bar-h) + 64px); }
}

/* A file's chip: one width for every name, so Download / Replace / Delete line up down a section. */
.file-chip { display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; width: 280px; flex: none; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; background: #f0fdfa; color: #0f766e; }
.file-chip-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: #64748b; }
.file-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .file-chip { width: 100%; max-width: 280px; } }

/* The SPPB comment: one line until it is clicked into, then as tall as what is in it (2026-11-10). */
.step-comment { resize: none; height: 29px !important; padding: 5px 10px !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 18px; box-sizing: border-box; }
.step-comment:focus { height: auto !important; min-height: 29px; max-height: 180px; overflow: auto; white-space: pre-wrap; field-sizing: content; }

/* The DO's two dates: "Saved" goes under its field, so the field beside it does not move as it appears (2026-11-10). */
.do-dates > div { position: relative; }
.do-dates .saved-tick { position: absolute; left: 0; top: 100%; margin: 2px 0 0; font-size: 11px; }
.do-dates { padding-bottom: 14px; }