/* The office dashboard, "The Line, field-grade" (docs/DESIGN-SYSTEM.md). A survey plan, one green line: green-tinted neutrals,
   type and hairlines instead of boxes, colour only as an event. Every colour, size, radius and motion value is a token from
   tokens.gen.css (made from design/tokens.mjs); this file holds none of its own (the drawing paper is a token too).
   The old names (--surface, --line, --accent, --ok, --warn, --bad, --chrome ...) are aliases in tokens.gen.css so a screen not
   yet rebuilt still resolves; a rule written now uses the new names. */

/* The one family: IBM Plex Sans in three weights, IBM Plex Mono for EPA, license and record numbers only (SIL OFL, office/fonts). */
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-600.woff2) format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/IBMPlexMono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
b, strong { font-weight: var(--w-semibold); }
::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell: a light sidebar in the page's own family, a hairline edge, a page bar over the work ---------- */
.shell { display: grid; grid-template-columns: var(--w-side) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 14px 12px 12px;
  background: var(--side); border-right: 1px solid var(--hair); overflow-y: auto;
}
.side > * { flex-shrink: 0; } /* the controls keep their height; the sidebar scrolls instead */
.brand { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; }
.brand-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--saguaro); }
.brand-mark svg { display: block; }
.brand-product { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semibold); letter-spacing: var(--ls-h3); color: var(--ink); }
/* the company, a small line under the mark; it is also the way to the account menu (no avatar disc, no company card) */
.top-account { position: relative; }
.brand-co {
  display: flex; align-items: center; gap: 4px; width: 100%; min-height: 20px; margin: 2px 0 0; padding: 0 8px 0 36px; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); text-align: left; cursor: pointer;
}
.brand-co .co-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-co svg { flex: none; margin-left: 2px; }
.brand-co { position: relative; }
.brand-co .news-dot { position: static; margin-left: 4px; }
@media (hover: hover) { .brand-co:hover { color: var(--ink); } }
.jump {
  display: flex; align-items: center; gap: 8px; width: 100%; height: var(--h-control); margin: 14px 0 4px; padding: 0 10px; border: 1px solid var(--edge);
  border-radius: var(--r-2); background: var(--bg); color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); text-align: left; cursor: pointer;
}
.jump .jump-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .jump:hover { background: var(--hover); } }
.nav { display: flex; flex-direction: column; gap: 0; }
.nav-group { padding: 18px 8px 4px; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-3); }
.nav a {
  position: relative; display: flex; align-items: center; gap: 10px; height: var(--h-nav); padding: 0 8px; border-radius: var(--r-2); text-decoration: none;
  color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); transition: background-color var(--dur-state) var(--ease);
}
.nav a svg { flex: none; color: var(--ink-3); }
@media (hover: hover) { .nav a:not([aria-current="page"]):hover { background: var(--hover); } }
/* the current page: the selected fill, ink, a Saguaro icon; the weight never changes (a row must not jump) */
.nav a[aria-current="page"] { background: var(--sel); color: var(--ink); }
.nav a[aria-current="page"] svg { color: var(--saguaro); }
/* a bare count, no badge */
.nav .nav-count, .nav .nav-setup { margin-left: auto; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-regular); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.side-fold {
  display: flex; align-items: center; gap: 10px; height: var(--h-nav); margin-top: 8px; padding: 0 8px; border: 0; border-radius: var(--r-2); background: transparent;
  color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); text-align: left; cursor: pointer; position: relative;
}
@media (hover: hover) { .side-fold:hover { background: var(--hover); color: var(--ink); } }
.side-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--hair); display: grid; gap: 8px; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.side-foot b { font-weight: var(--w-medium); color: var(--ink-2); }
.side-foot p { margin: 0; }
/* on a short window the offer steps aside (the tour stays under the account menu) so the controls and the foot stay in view */
@media (min-width: 901px) and (max-height: 820px) { .side-tour { display: none; } }

.main { min-width: 0; padding: 0 var(--gutter) 64px; }
/* the demo note: a single line in the sidebar's foot on a computer; on a phone, one slim dismissible line over the page */
.demo-line { display: none; }

/* ---------- the page bar: 48 high, a hairline below, the name (or the trail) and the page's tabs ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; min-height: var(--h-bar); margin: 0 calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter);
  background: var(--bg); border-bottom: 1px solid var(--hair);
}
.topbar-left { display: flex; align-items: stretch; gap: 24px; min-width: 0; flex: 1 1 auto; align-self: stretch; }
.topbar-name { align-self: center; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semibold); letter-spacing: var(--ls-h3); white-space: nowrap; }
.crumbs { display: flex; align-items: center; gap: 8px; font-weight: var(--w-regular); color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); letter-spacing: 0; }
.crumbs a { text-decoration: none; }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); } }
.crumbs [aria-current="page"] { font-weight: var(--w-semibold); color: var(--ink); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.crumb-sep { color: var(--ink-3); } /* --ink-4 read 2.9:1 on the page; a separator is still text */
.topbar-tabs { display: flex; gap: 20px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar-tabs a {
  position: relative; display: flex; align-items: center; color: var(--ink-3); text-decoration: none; font-weight: var(--w-medium); font-size: var(--fs-sec); line-height: var(--lh-sec);
  white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.topbar-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) { .topbar-tabs a:hover { color: var(--ink); } }
/* the page's own actions and date navigation (ui.js PageActions): at the right of the bar, quiet buttons first, the one filled button last */
.pagebar-slot { display: flex; align-items: center; margin-left: auto; min-width: 0; }
.pagebar-slot:empty { display: none; }
.pagebar-actions { display: flex; align-items: center; gap: 8px; }

/* a page's own tabs, when the page is too narrow for the name and the tabs on one line: the tabs go under the name (as on a phone) */
@media (min-width: 901px) { .main { container: page / inline-size; } }
@container page (max-width: 700px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding-top: 8px; }
  .topbar-left { display: contents; }
  .topbar-name { grid-column: 1; grid-row: 1; overflow: hidden; text-overflow: ellipsis; padding: 4px 0 6px; }
  .pagebar-slot { grid-column: 2; grid-row: 1; }
  .topbar-tabs { grid-column: 1 / -1; grid-row: 2; gap: 16px; }
  .topbar-tabs a { padding: 8px 0 10px; }
  .topbar-tabs.wraps { flex-wrap: wrap; overflow: visible; } /* Records' five tabs go on two lines, so State rules is never past the edge */
  .t th { top: 78px; } /* the bar is two lines tall here */
}

/* the account menu opens under the company line */
.account-menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; width: 224px; display: grid; gap: 2px; padding: 6px;
  background: var(--raise); border-radius: var(--r-3); box-shadow: var(--shadow-pop); color: var(--ink);
}
.account-menu .who { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu a, .account-menu .menu-line {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink);
  font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); text-align: left; text-decoration: none; cursor: pointer;
}
.account-menu a svg, .account-menu .menu-line svg { color: var(--ink-3); }
@media (hover: hover) { .account-menu a:hover, .account-menu .menu-line:hover { background: var(--hover); } }
.account-menu .btn { justify-self: start; margin: 2px 4px 4px; }
.account-menu .appearance { display: grid; gap: 6px; margin-top: 4px; padding: 10px 10px 8px; border-top: 1px solid var(--hair); }
.account-menu .appearance > span { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); }
.account-menu .appearance .seg-radio { display: flex; }
.account-menu .appearance .seg-radio label { flex: 1; text-align: center; }
.account-menu .menu-line .kbd { margin-left: auto; }
.news-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--saguaro); flex: none; }
.news-dot.inline { display: inline-block; margin-left: 6px; }

/* a top-level page is named in the page bar, so its own heading is kept for screen readers only; its line and buttons stay */
.main[data-titled] .page-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.main[data-titled] .page-head { align-items: center; }
.main[data-titled] .page-head .sub { margin-top: 0; }
.main[data-titled] .page-head:not(:has(.sub, .actions)) { margin-bottom: 0; }

/* ---------- page furniture ---------- */
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-semibold); }
.page-head .sub { color: var(--ink-2); margin-top: 4px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumb { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); text-decoration: none; font-weight: var(--w-medium); margin-bottom: 10px; }
@media (hover: hover) { .crumb:hover { color: var(--ink); } }
.section { margin-top: 28px; }
.section > h2, .h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semibold); letter-spacing: var(--ls-h3); }
.section > h2 { margin-bottom: 8px; }
.h3 { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-semibold); color: var(--ink-2); }
.h-card { font-size: var(--fs-body); font-weight: var(--w-semibold); }
/* a count beside a heading ("Visits 9") reads lighter than its heading */
.n { font-weight: var(--w-regular); }
.section > .hint { color: var(--ink-3); margin: -4px 0 10px; font-size: var(--fs-sec); line-height: var(--lh-sec); }
/* a bordered surface exists only for a real object: this one is for the few panels not yet rebuilt as plain sections */
.panel { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-2); }
.panel.pad { padding: 16px 18px; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.small { font-size: var(--fs-sec); line-height: var(--lh-sec); }
.strong { font-weight: var(--w-semibold); }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); font-weight: var(--w-regular); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* the lede opens a page: one sentence (red when something needs the owner), the cause under it, labelled figures at the right */
.lede { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 4px 0 16px; }
.lede-h { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-semibold); color: var(--ink); }
.lede-h.bad { color: var(--red-text); }
.lede-p { margin-top: 4px; max-width: 62ch; color: var(--ink-2); }
/* labelled figures: no tiles, no boxes, no dividers. Label quiet, figure 600. A figure that was not measured reads "Not available yet". */
.figs { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.fig .l { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-3); }
.fig .v { position: relative; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-semibold); white-space: nowrap; color: var(--ink); }
.fig .v small { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-regular); color: var(--ink-3); letter-spacing: 0; }
.fig .v.bad { color: var(--red-text); }
.fig .v.none { font-size: var(--fs-sec); line-height: var(--lh-h2); font-weight: var(--w-regular); color: var(--ink-3); letter-spacing: 0; }
a.fig { color: inherit; text-decoration: none; }
@media (hover: hover) { a.fig:hover .l { color: var(--ink); } }
/* the red mark: a 7px dot that hangs before the number in the gutter, so the figure stays under its label */
.mk { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.mk.red { background: var(--red); } .mk.amber { background: var(--amber); }
.fig .v > .mk { position: absolute; left: -12px; top: 50%; margin-top: -3px; }

/* ---------- keys: a key cap only in the palette and the keyboard sheet ---------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--edge); border-radius: var(--r-1);
  font-size: var(--fs-meta); line-height: 1; font-weight: var(--w-medium); color: var(--ink-3); background: var(--bg);
}
.hints { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); }
.hints span { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- controls ---------- */
/* buttons: 32 high, 13/18 500, radius 6; one filled (Saguaro) per screen state, quiet by default; pressed feedback is a 97% scale */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-control); padding: 0 14px; border-radius: var(--r-2);
  border: 1px solid var(--edge); background: transparent; color: var(--ink); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), transform var(--dur-press) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn.small, .btn.sm { height: var(--h-control-sm); padding: 0 12px; }
.btn.xs { height: var(--h-control-xs); padding: 0 10px; }
.btn.primary { background: var(--saguaro); border-color: var(--saguaro); color: var(--on-saguaro); }
.btn.ghost { border-color: transparent; color: var(--ink-2); padding: 0 8px; }
.btn.link { border-color: transparent; color: var(--saguaro-text); padding: 0 4px; height: auto; }
.btn.danger { color: var(--red-text); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.btn.danger.fill { background: var(--red); border-color: var(--red); color: var(--bg); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--sunk); border-color: transparent; color: var(--ink-3); cursor: default; transform: none; }
.btn .kbd { background: transparent; border-color: color-mix(in srgb, currentColor 35%, transparent); color: inherit; opacity: .85; }
@media (hover: hover) {
  .btn:hover { background: var(--hover); }
  .btn.primary:hover { background: var(--saguaro-hi); border-color: var(--saguaro-hi); }
  .btn.ghost:hover { background: var(--hover); color: var(--ink); }
  .btn.link:hover { background: transparent; text-decoration: underline; }
  .btn.danger:hover { background: var(--red-tint); }
  .btn.danger.fill:hover { background: var(--red); }
  .btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--sunk); }
}
.btn svg { flex: none; }
.btn.icon, .btn.icon-only { width: var(--h-control); padding: 0; }
.btn.icon.small, .btn.icon.sm, .btn.icon-only.small { width: var(--h-control-sm); }
.btn.icon.xs { width: var(--h-control-xs); }
/* fields: 32 high, one 1px edge that is the sign of an input, a Saguaro edge and halo on focus (no layout shift) */
.input, .select, .textarea {
  height: var(--h-control); padding: 0 10px; border-radius: var(--r-2); border: 1px solid var(--edge-strong); background: var(--bg); color: var(--ink); min-width: 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  transition: border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.textarea { height: auto; min-height: 120px; padding: 6px 10px; line-height: var(--lh-body); resize: vertical; width: 100%; }
.textarea.code { font-family: var(--font-mono); font-size: var(--fs-mono); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--saguaro); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saguaro) 28%, transparent); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .input.err { border-color: var(--red); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--sunk); border-color: var(--edge); color: var(--ink-3); }
.field { display: grid; gap: 4px; min-width: 0; }
.field-in { display: grid; gap: 4px; min-width: 0; }
.field > span, .field-in > span, .field > label.field-label { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-2); }
.field.wide { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; align-items: end; }
/* a form whose fields are sized to what goes in them: an address or a time zone gets two columns */
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
.field-hint { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); }
.field-hint.err, .field .hint.err { color: var(--red-text); }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--w-medium); cursor: pointer; user-select: none; }
.check input { flex: none; }
/* the box and the round: the real input, drawn the system's way (docs/DESIGN-SYSTEM.md 4.11). 16 px, radius 3 (the radio round), a 1.5 px field edge; on, a Saguaro fill
   with the mark in on-saguaro. A test's check() and a form's FormData keep working because nothing is replaced. */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center; box-sizing: border-box; width: 16px; height: 16px; margin: 0;
  vertical-align: -3px; border: 1.5px solid var(--edge-strong); border-radius: var(--r-1); background: var(--bg); color: var(--on-saguaro); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before, input[type="radio"]::before { content: ""; width: 12px; height: 12px; opacity: 0; background: currentColor; transition: opacity var(--dur-state) var(--ease); }
input[type="checkbox"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.3 3.3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.3 3.3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type="radio"]::before { width: 6px; height: 6px; border-radius: 50%; }
input[type="checkbox"]:indeterminate::before { opacity: 1; height: 2px; width: 8px; border-radius: 1px; -webkit-mask: none; mask: none; }
input[type="checkbox"]:checked, input[type="radio"]:checked, input[type="checkbox"]:indeterminate { background: var(--saguaro); border-color: var(--saguaro); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { opacity: 1; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { background: var(--sunk); border-color: var(--edge); color: var(--ink-3); cursor: default; }
input[type="checkbox"]:disabled:checked, input[type="radio"]:disabled:checked, input[type="checkbox"]:disabled:indeterminate { background: var(--sunk); border-color: var(--edge-strong); }
@media (hover: hover) { input[type="checkbox"]:not(:checked, :indeterminate, :disabled):hover, input[type="radio"]:not(:checked, :disabled):hover { border-color: var(--ink-3); } }
@media (forced-colors: active) { input[type="checkbox"], input[type="radio"] { appearance: auto; -webkit-appearance: auto; } }
/* Pick (a choice) and DatePick (a day): a field that opens a popover, never a native select or date input. The popover is --raise with the popover ring,
   rows 36 high (44 on a phone), the chosen row marked with a check, the row under the pointer or keys on --sel; it opens with no animation (used tens of times a day). */
.pick-btn { display: flex; align-items: center; min-width: 0; text-align: left; cursor: pointer; }
.field > .pick-btn, .field-in > .pick-btn { width: 100%; }
.pick-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-empty .pick-v { color: var(--ink-3); } /* a Pick's placeholder is the button's only words ("Give Jim Hill to…"): it reads at 4.5:1, not --ink-4's 2.9 */
.pick-btn[aria-expanded="true"] { border-color: var(--saguaro); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saguaro) 28%, transparent); }
.pick-btn:disabled { cursor: default; }
.pick-menu, .cal {
  position: fixed; z-index: 88; box-sizing: border-box; padding: 4px; background: var(--raise); color: var(--ink); border-radius: var(--r-3); box-shadow: var(--shadow-pop);
  overscroll-behavior: contain; outline: 0;
}
.pick-menu { min-width: 160px; max-width: min(420px, calc(100vw - 16px)); max-height: 320px; overflow-y: auto; }
.pick-o { display: flex; align-items: flex-start; gap: 4px; min-height: 36px; padding: 8px 8px 8px 4px; border-radius: var(--r-2); font-size: var(--fs-body); line-height: var(--lh-body); cursor: pointer; }
.pick-o.pick-on { background: var(--sel); }
.pick-o.pick-off { color: var(--ink-3); cursor: default; }
.pick-ck { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--saguaro-text); }
.pick-l { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-h { flex: none; margin-left: 12px; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-3); }
.pick-none { padding: 6px 8px; color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.datepick { position: relative; display: block; width: 188px; max-width: 100%; }
.field > .datepick, .field-in > .datepick { width: 100%; }
.datepick .input { width: 100%; padding-right: 34px; }
.datepick-btn { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink-3); cursor: pointer; }
.datepick-btn:disabled { color: var(--ink-4); cursor: default; }
@media (hover: hover) { .datepick-btn:not(:disabled):hover { background: var(--hover); color: var(--ink); } }
.cal { width: 256px; padding: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
.cal-head { display: flex; align-items: center; height: 32px; }
.cal-title { flex: 1; text-align: center; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-semibold); }
.cal-nav { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.cal-nav:disabled { color: var(--ink-4); cursor: default; }
@media (hover: hover) { .cal-nav:not(:disabled):hover { background: var(--hover); color: var(--ink); } }
.cal-grid { width: 100%; margin-top: 4px; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { height: 24px; padding: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); text-align: center; }
.cal-grid td { padding: 0; text-align: center; }
.cal-d { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto; padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink); cursor: pointer; font-size: var(--fs-sec); line-height: var(--lh-sec); }
.cal-d:focus-visible { outline-offset: -2px; }
.cal-d.cal-out { color: var(--ink-3); }
.cal-d.cal-now { box-shadow: inset 0 0 0 1.5px var(--edge-strong); }
.cal-d.cal-chosen { background: var(--sel); box-shadow: inset 0 0 0 1.5px var(--saguaro); }
.cal-d[aria-disabled="true"] { color: var(--ink-4); cursor: default; }
@media (hover: hover) { .cal-d:not(.cal-chosen, [aria-disabled="true"]):hover { background: var(--hover); } }
.cal-foot { display: flex; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hair); }
/* a finger needs 44 (the office's tap rule, pages-ops.css): taller rows, bigger days and month arrows; the calendar widens to hold seven of them */
@media (max-width: 900px), (pointer: coarse) {
  .pick-o { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .cal { width: 324px; max-width: calc(100vw - 16px); }
  .cal-head { height: 44px; }
  .cal-nav, .cal-d { width: 44px; height: 44px; }
  .cal-grid th { height: 28px; }
  .cal-foot .btn { min-height: 44px; }
}
/* segmented: two states or a few views; one hairline, the current one on the selected fill */
.seg { display: inline-flex; height: var(--h-control-sm); border: 1px solid var(--edge); border-radius: var(--r-2); overflow: hidden; background: transparent; }
.seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; height: 100%; padding: 0 12px; min-width: 28px;
  font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-2); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.seg button + button { border-left: 1px solid var(--edge); }
.seg button[aria-pressed="true"] { background: var(--sel); color: var(--ink); }
.error-text { color: var(--red-text); font-weight: var(--w-medium); }
.warn-text { color: var(--amber-text); }
.bad-text { color: var(--red-text); }
.ok-text { color: var(--saguaro-text); }
/* a table's small grey line keeps its meaning when it carries a warning or an all-clear */
.t .sub.ok-text { color: var(--saguaro-text); } .t .sub.warn-text { color: var(--amber-text); } .t .sub.bad-text { color: var(--red-text); }

/* ---------- status: a 6px mark and a word. Colour only on an exception; no capsule chips on rows ---------- */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--ink-3); flex: none; }
.dot.done, .dot.ok { background: var(--saguaro); }
.dot.ring { background: transparent; box-shadow: inset 0 0 0 1.5px var(--saguaro); width: 8px; height: 8px; }
.dot.todo, .dot.info { background: transparent; box-shadow: inset 0 0 0 1.5px var(--edge-strong); width: 8px; height: 8px; }
.dot.amber, .dot.warn { background: var(--amber); }
.dot.red, .dot.bad { background: var(--red); }
.st { display: inline-flex; align-items: center; gap: 6px; }
.st.amber { color: var(--amber-text); } .st.red { color: var(--red-text); }
/* .pill is a status line (a mark and a word), not a capsule: the old class names still read right */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-regular); white-space: nowrap; color: var(--ink-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.pill.ok::before { background: var(--saguaro); }
.pill.info::before { width: 8px; height: 8px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--saguaro); }
.pill.warn { color: var(--amber-text); } .pill.warn::before { background: var(--amber); }
.pill.bad { color: var(--red-text); } .pill.bad::before { background: var(--red); }

/* ---------- tables: no card around a table that is the page. Hairlines divide; rows are 40 high, the head 32. The text sits on
   the page's gutter; the hover, selection and focus band reaches 8px into it, so a focus ring is whole and never touches the edge. ---------- */
.table-wrap { overflow-x: auto; margin: 0 -8px; background: transparent; }
.panel .table-wrap, .sheet .table-wrap, .drawer .table-wrap { margin: 0; }
table.t { width: 100%; border-collapse: collapse; }
.t th {
  position: sticky; top: var(--h-bar); z-index: 1; height: 32px; text-align: left; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3);
  padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.t td { height: var(--h-row); padding: 9px 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.t th:first-child, .t td:first-child { padding-left: 8px; }
.t th:last-child, .t td:last-child { padding-right: 8px; }
.t td a:not(.btn), .risk a.strong { text-decoration: none; }
@media (hover: hover) { .t td a:not(.btn):hover, .risk a.strong:hover { text-decoration: underline; } }
.t tbody tr.link { cursor: pointer; }
@media (hover: hover) { .t tbody tr.link:hover td { background: var(--hover); } }
.t tbody tr[aria-selected="true"] td { background: var(--sel); }
.t tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.t .sub { color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); margin-top: 1px; }
.t td.num, .t th.num { text-align: right; }
.t tr.dim td { color: var(--ink-3); }
@media (min-width: 901px) and (max-width: 1180px) { .t th, .t td { padding-left: 8px; padding-right: 8px; } } /* the wrap clips here to keep the header stuck, so the cells give back room instead of the last column going */
.t tr.group td { background: transparent; font-weight: var(--w-semibold); color: var(--ink); height: 32px; padding-top: 4px; padding-bottom: 4px; }

/* ---------- empty / loading ---------- */
/* plain words and the one next action, left-aligned: no illustration, no card; the chrome stays */
.empty { padding: 24px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--ink-2); text-align: left; }
.empty h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); color: var(--ink); }
.empty p, .empty > div { max-width: 52ch; }
/* an empty state that is all a panel holds is plain: the panel draws nothing round it */
.panel:has(> .empty:only-child) { border: 0; background: none; }
.empty-mark { width: 36px; height: 36px; border-radius: var(--r-2); background: var(--sunk); color: var(--ink-2); display: grid; place-items: center; }
.loading { padding: 40px; text-align: center; color: var(--ink-3); }

/* ---------- notices: one slim notice per page at most, never stacked. Money or compliance, never "welcome". ---------- */
.notice, .banner {
  display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: var(--r-2); margin-bottom: 16px;
  background: var(--amber-tint); color: var(--amber-text); font-size: var(--fs-body); line-height: var(--lh-body);
}
.notice b, .notice strong, .banner b, .banner strong { font-weight: var(--w-semibold); }
.notice .btn, .banner .btn { color: var(--amber-text); border-color: color-mix(in srgb, var(--amber-text) 35%, transparent); }
@media (hover: hover) { .notice .btn:hover, .banner .btn:hover { background: color-mix(in srgb, var(--amber) 14%, transparent); } }
.banner.warn, .notice.warn { background: var(--amber-tint); color: var(--amber-text); }
.banner.bad, .notice.bad { background: var(--red-tint); color: var(--red-text); }
.banner.bad .btn, .notice.bad .btn { color: var(--red-text); border-color: color-mix(in srgb, var(--red-text) 35%, transparent); }
.banner.ok, .notice.ok { background: var(--sel); color: var(--ink); }
.banner.ok .btn, .banner.info .btn, .notice.ok .btn, .notice.info .btn { color: var(--ink); border-color: var(--edge); }
.banner.info, .notice.info { background: var(--sunk); color: var(--ink-2); }
.banner .grow, .notice .grow { color: inherit; }
.banner svg, .notice svg { flex: none; }
/* the gate note: the loudest text after the customer's name */
.access { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-2); background: var(--amber-tint); color: var(--amber-text); font-weight: var(--w-semibold); font-size: var(--fs-body); line-height: var(--lh-body); }
.access .grow { flex: 1; }
.access .code { background: color-mix(in srgb, var(--amber) 22%, transparent); padding: 0 4px; border-radius: var(--r-1); }

/* ---------- popovers, sheets, the palette, the keyboard sheet, toasts ---------- */
.scrim, .drawer-back, .sheet-back { position: fixed; inset: 0; background: var(--scrim); }
.toast {
  position: fixed; left: calc(var(--toast-l, var(--w-side)) + (100vw - var(--toast-l, var(--w-side)) - var(--toast-r, 0px)) / 2); transform: translateX(-50%); bottom: var(--gutter); z-index: 90; display: flex; align-items: center; gap: 16px;
  min-height: 36px; width: max-content; max-width: calc(100vw - var(--toast-l, var(--w-side)) - var(--toast-r, 0px) - 2 * var(--gutter)); padding: 4px 8px 4px 14px; border-radius: var(--r-2);
  background: var(--inverse); color: var(--on-inverse); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); box-shadow: 0 0 0 1px var(--hair);
}
.toast svg { flex: none; }
@media (max-width: 900px) { .toast { left: 50%; max-width: calc(100vw - 2 * var(--gutter)); bottom: calc(var(--bar-h, 0px) + var(--gutter)); } }
.toast a, .toast button { padding: 0 8px; color: var(--on-inverse); font-weight: var(--w-semibold); text-decoration: underline; text-underline-offset: 3px; background: transparent; border: 0; cursor: pointer; }
/* the palette: a real command palette, over a half scrim; it opens and closes with no animation (the keyboard owns it) */
.pal-back { position: fixed; inset: 0; z-index: 85; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: color-mix(in srgb, var(--scrim) 50%, transparent); }
.pal { width: 600px; max-width: 100%; max-height: 76vh; display: flex; flex-direction: column; background: var(--raise); border-radius: var(--r-3); box-shadow: var(--shadow-pop); overflow: hidden; color: var(--ink); }
.pal-in { flex: none; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--hair); color: var(--ink-3); }
.pal-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.pal-in input::placeholder { color: var(--ink-3); }
.pal-in input:focus, .pal-in input:focus-visible { outline: none; }
.pal-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 8px; }
.pal-g { padding-top: 4px; }
.pal-gl { padding: 8px 8px 4px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); }
.pal-i {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 8px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink);
  font-size: var(--fs-body); line-height: var(--lh-body); text-align: left; cursor: pointer;
}
.pal-i .sub { margin-left: auto; padding-left: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.pal-i .keys { margin-left: auto; display: inline-flex; gap: 4px; }
.pal-i .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i[aria-selected="true"] { background: var(--sel); }
.pal-i mark { background: none; color: inherit; font-weight: var(--w-semibold); }
.pal-none { padding: 20px 8px; color: var(--ink-3); }
.pal-f { flex: none; height: 36px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-top: 1px solid var(--hair); }
.pal-f span { display: inline-flex; align-items: center; gap: 6px; }
/* ---------- loading (docs/UI-GUIDE.md, "Loading") ----------
   content on its way: still blocks in the sunk colour, shaped like what is coming (same padding, radius and row height, so
   nothing jumps when it lands). Nothing moves. The first 150 ms keep the space and draw nothing (.wait). */
.skel-shape.wait { visibility: hidden; }
.skel { display: grid; gap: 12px; padding: 22px 20px; }
.panel .skel { padding: 4px 0 8px; }
.skel-row { display: block; height: 12px; border-radius: 6px; background: var(--sunk); width: 86%; }
.skel-row.head { height: 18px; width: 38%; margin-bottom: 4px; }
.skel-row:nth-child(3n + 3) { width: 64%; } .skel-row:nth-child(3n + 4) { width: 92%; } .skel-row:nth-child(3n + 5) { width: 74%; }
.skel-head { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.skel-btn { border-radius: var(--r-sm); min-width: 110px; width: auto !important; }
.skel-b { display: block; border-radius: 5px; background: var(--sunk); max-width: 100%; }
.skel-field { border-radius: var(--r-sm); }
.skel-table th, .skel-table td { overflow: hidden; }
.skel-table tbody td { height: var(--skel-h, auto); }
/* a cell's line is 22 high (its line height), the block 14 inside it; a header with sort buttons is 60 high */
.skel-table td .skel-b, .skel-table th .skel-b { margin: 4px 0; }
/* the header row sits on the surface, and in the dark the sunk blocks barely show on it: a little of the ink in them */
.skel-table th .skel-b { background: color-mix(in oklch, var(--sunk), var(--ink) 9%); }
.skel-table td .sub { display: flow-root; }
.skel-table td .sub .skel-b { margin: 5px 0; }
.skel-under { margin-top: 16px; }

.skel-tech { display: flex; gap: 12px; align-items: center; }
.skel-tech > div { display: grid; gap: 8px; flex: 1; min-width: 0; }
.skel-dot { flex: none; border-radius: 50%; }
.skel-toprow { display: flex; align-items: center; height: 36px; margin-bottom: 17px; }
.skel-side { display: grid; gap: 8px; align-content: start; flex: 1; }
.skel-sheet .sheet table.t { margin-top: 22px; }
.skel-feed { border-top: 1px solid var(--line); }
.skel-fi { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.skel-fb { display: grid; gap: 10px; flex: 1; min-width: 0; }
.skel-numbers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.skel-num { display: grid; gap: 10px; align-content: start; padding: 14px 16px 18px; border-left: 1px solid var(--line); }
.skel-num:first-child { border-left: 0; }
.skel-chart { display: grid; gap: 14px; margin-bottom: 16px; }
@media (max-width: 720px) { .skel-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skel-num:nth-child(odd) { border-left: 0; } .skel-tabs { overflow: hidden; } }
.skel-ledger { display: flex; align-items: center; height: 44px; border-block: 1px solid var(--line); margin-bottom: 17px; }
.skel-table .sort th { height: 60px; }
.skel-n { display: inline-block; width: 3ch; height: 0.8em; vertical-align: -0.05em; }
.skel-chip { display: inline-flex; align-items: center; }
.skel-ghost { width: 9ch; height: 14px; }
.skel-sentence { display: inline-block; width: min(24em, 100%); height: 0.85em; vertical-align: -0.1em; }
.skel-sortsel { display: none; }
@media (max-width: 720px) { .skel-sortsel { display: flex; align-items: center; gap: 8px; height: 44px; margin-bottom: 12px; } .skel-sortsel .skel-field { height: 40px; } }
.skel-count { display: flex; align-items: center; height: 22px; margin-bottom: 8px; }
@media (max-width: 720px) { .skel-count { height: 36px; } }
.skel-list { overflow: hidden; }
.skel-li { display: grid; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.skel-li:last-child { border-bottom: 0; }
.skel-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.skel-card { display: grid; gap: 9px; align-content: start; }
.skel-record { display: grid; gap: 9px; align-content: start; }
.skel-record .kv { margin-top: 10px; }
.skel-record .kv .k { display: block; }
.skel-record .kv .v { margin-top: 5px; }
.skel-form .field > span { display: block; }
/* the office opening: the mark and a thin line running under it (the same before and after the script takes over) */
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; background: var(--bg); }
.boot-mark { width: 48px; height: 48px; }
.boot-bar { position: relative; width: 120px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.boot-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 3px; background: var(--accent); animation: boot 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes boot { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .boot-bar::after { animation: none; width: 100%; opacity: 0.5; } }
.boot-fail h1 { font-size: 22px; letter-spacing: -0.4px; }
.boot-fail p { max-width: 30em; margin: 0; }
/* ---------- the date control (Schedule's, too) ---------- */
.day-nav { display: inline-flex; align-items: center; gap: 4px; }

.summary { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 16px; color: var(--ink-2); font-size: var(--fs-b); }
.summary b { color: var(--ink); font-size: var(--fs-b); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 22px 0 10px; }

/* ---------- the record ---------- */
.record { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; }
.sheet-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.sheet-head h2 { font-size: var(--fs-l); letter-spacing: calc(-0.3px * var(--tight)); }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin-top: 16px; }
.kv .k { font-size: var(--fs-s); color: var(--ink-3); font-weight: var(--w-semi); }
.kv .v { font-weight: var(--w-semi); margin-top: 1px; }
.sheet h3 { font-size: var(--fs-sm); margin: 22px 0 8px; }
.sheet table.t { border: 1px solid var(--line); border-radius: var(--r-sm); }
.drawing { border: 1px solid var(--paper-line); border-radius: var(--r-sm); padding: 8px; background: var(--paper); }
.drawing svg { display: block; width: 100%; height: auto; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photos figure { margin: 0; }
.photos img, .photos video, .photos .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--sunk); display: block; }
.photos .ph { display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-s); text-align: center; padding: 8px; }
.photos figcaption { font-size: var(--fs-s); color: var(--ink-2); margin-top: 4px; }
.side-col { display: grid; gap: 14px; position: sticky; top: 20px; }

/* ---------- team / codes ---------- */
.code-box {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 16px; margin-top: 10px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--bg);
}
.code-box .qr svg { width: 132px; height: 132px; display: block; }
.code-box .code { font: var(--w-semibold) 30px/1 var(--mono); letter-spacing: 3px; }

/* Google's and Apple's own button looks (their brand rules, light and dark), not ours */
.providers { display: grid; gap: 10px; }
.btn.google { background: #FFFFFF; color: #1F1F1F; border-color: #747775; height: 46px; justify-content: center; gap: 10px; font-size: 15px; }
@media (hover: hover) { .btn.google:hover { background: #F7F8F8; } }
.btn.apple { background: #FFFFFF; color: #000000; border-color: #000000; height: 46px; justify-content: center; gap: 10px; font-size: 15px; }
@media (hover: hover) { .btn.apple:hover { background: #F7F8F8; } }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .btn.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
  :root:not([data-scheme="light"]) .btn.apple { background: #000000; color: #FFFFFF; border-color: #8E918F; } }
:root[data-scheme="dark"] .btn.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
:root[data-scheme="dark"] .btn.apple { background: #000000; color: #FFFFFF; border-color: #8E918F; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; margin: 4px 0 -2px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- small screens: the owner checking from a truck ---------- */
@media (max-width: 900px) {
  
  
  .page-head .actions { margin-left: 0; width: 100%; min-width: 0; }
  .seg { max-width: 100%; min-width: 0; overflow-x: auto; }
  .seg button { white-space: nowrap; flex: none; }
  .table-wrap > table.t { min-width: 680px; }
  .btn { height: 42px; padding: 0 14px; }
  .btn.small { height: 36px; padding: 0 11px; }
  .seg { height: 40px; }
  .input, .select { height: 42px; }
  .record { grid-template-columns: minmax(0, 1fr); }
  .side-col { position: static; }
  .kv { grid-template-columns: 1fr; }
  .sheet { padding: 18px; }
}

/* ---------- printing a record ---------- */
@media print {
  @page { size: letter; margin: 0.5in; }
  body { background: none; font-size: var(--fs-xs); }
  .side, .topbar, .demo-line, .crumb, .page-head .actions, .side-col, .no-print { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  .record { display: block; }
  .sheet { border: 0; padding: 0; }
  .photos { grid-template-columns: repeat(3, 1fr); }
  .t th { position: static; }
}

@media print { .assist, .nav-more-list { display: none !important; } }



.notes { position: fixed; left: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; width: min(420px, calc(100vw - 32px)); }
.note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); }
.note.urgent { border-color: var(--bad); }
.prefs td.c, .prefs th.c { text-align: center; width: 96px; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 2px; cursor: pointer; font: inherit; }
@media (hover: hover) { .linkish:hover { color: var(--ink); } }
@media print { .correct { display: none; } }
.changes .row-line { display: flex; gap: 12px; align-items: center; padding: 10px 16px; }
.changes .grow { display: grid; gap: 2px; }
.changes li.undone .row-line { opacity: 0.7; }
.news .row-line { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; }
.news .when { min-width: 52px; padding-top: 1px; }
.news .grow { display: grid; gap: 3px; }
/* the compact list for a busy day (F9): one line a stop */
.t.compact td { padding-top: 5px; padding-bottom: 5px; }
.t.compact .sub { display: none; }

.label-rows { display: grid; gap: 8px; }
.label-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.label-row .input, .label-row .select { width: auto; }
.label-row .narrow { width: 7.5em; }
.label-row .grow-input { flex: 1; min-width: 14em; }


.tarf-asks td { background: var(--sunk, transparent); }

.sw { display: inline-block; flex: none; width: 18px; height: 12px; border-radius: 3px; border: 1.5px solid var(--line-strong); background: var(--surface); }
.sw.done { background: var(--ok-bg); border-color: var(--ok-line); }
.sw.active { background: var(--chrome); border-color: var(--chrome); }
.sw.skipped { background: var(--warn-bg); border-color: var(--warn-line); }
.sw.cancelled { background: repeating-linear-gradient(135deg, var(--sunk) 0 3px, var(--surface) 3px 6px); }
.sw.attention { box-shadow: inset 0 0 0 2px var(--warn); }
.sw.now-mark { width: 2px; height: 14px; border: 0; border-radius: 1px; background: var(--accent); }


/* ---------- Team: each login on two lines, its Remove in the same place on every row ---------- */
.login-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: center; margin-bottom: 6px; }
.login-who { overflow-wrap: anywhere; }
.login-meta { grid-column: 2 / -1; }

/* ---------- the menu on a phone: a row of tabs at the bottom (pages-ops.css fixes it there), then More ---------- */
.nav-more { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { height: auto; flex-direction: row; align-items: stretch; gap: 2px; padding: 4px 6px; overflow: visible; border-right: 0; border-top: 1px solid var(--hair); }
  .brand, .brand-co, .top-account, .jump, .nav-group, .side-foot, .side-fold, .side-tour { display: none; }
  .nav { flex: 5 1 0; flex-direction: row; min-width: 0; gap: 2px; }
  .nav a, .nav-more {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 52px; height: auto; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 6px 2px; margin: 0;
    border-radius: var(--r-2); font-size: var(--fs-meta); line-height: 14px; font-weight: var(--w-medium);
  }
  .nav a.nav-extra { display: none; }
  .nav-more { display: flex; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-family: inherit; }
  .nav-more svg { color: var(--ink-3); }
  .nav-more[aria-current="page"], .nav-more[aria-expanded="true"] { background: var(--sel); color: var(--ink); }
  .nav-more[aria-current="page"] svg { color: var(--saguaro); }
  .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .nav-count { position: absolute; top: 2px; left: calc(50% + 12px); margin: 0; color: var(--ink); font-weight: var(--w-semibold); }
  .nav-more .news-dot { position: absolute; top: 8px; left: calc(50% + 8px); margin: 0; }
  .nav-more-list {
    position: absolute; top: auto; bottom: calc(100% + 6px); right: 6px; width: min(280px, calc(100vw - 12px)); z-index: 50; display: grid; gap: 2px; padding: 6px;
    background: var(--raise); color: var(--ink); border-radius: var(--r-3); box-shadow: var(--shadow-pop);
  }
  .nav-more-list a, .nav-more-list .menu-line {
    display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink);
    text-decoration: none; font-size: var(--fs-body); font-weight: var(--w-medium); text-align: left;
  }
  .nav-more-list a svg, .nav-more-list .menu-line svg { color: var(--ink-3); }
  .nav-more-list a[aria-current="page"] { background: var(--sel); }
  .nav-more-list .news-dot { margin-left: auto; }
  .nav-more-list .who { padding: 10px 12px 4px; margin-top: 4px; border-top: 1px solid var(--hair); font-size: var(--fs-sec); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
  .nav-more-list .btn { justify-self: start; margin: 0 4px 4px; }
  .nav-more-list .appearance { display: grid; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--hair); }
  .nav-more-list .appearance > span { font-size: var(--fs-meta); font-weight: var(--w-medium); color: var(--ink-3); }
  .main { padding: 0 16px 48px; }
  .topbar { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; margin: 0 -16px 16px; padding: 8px 16px 0; }
  .topbar-left { display: contents; }
  .topbar-name { grid-column: 1; grid-row: 1; overflow: hidden; text-overflow: ellipsis; padding: 4px 0 6px; }
  .pagebar-slot { grid-column: 2; grid-row: 1; }
  .t th { top: 0; } /* the bar scrolls away on a phone */
  .topbar-tabs { grid-column: 1 / -1; grid-row: 2; gap: 16px; margin-bottom: -1px; }
  .topbar-tabs a { padding: 8px 0 10px; min-height: 44px; }
  .topbar-tabs.wraps { flex-wrap: wrap; overflow: visible; }
  /* Today's date control and Add a stop are wider than the bar beside the name at this type size: they take the line under it */
  .topbar:has(.day-seg) .pagebar-slot { grid-column: 1 / -1; grid-row: 2; margin: 0 0 4px; }
  .topbar:has(.day-seg) .pagebar-actions { width: 100%; }
  .topbar:has(.day-seg) .pagebar-actions .btn.primary { margin-left: auto; }
  .demo-line { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0 -16px; padding: 4px 16px; border-bottom: 1px solid var(--hair); color: var(--ink-3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
  .demo-line .grow { min-width: 0; }
  .demo-line button { flex: none; width: 32px; height: 32px; margin: -4px -8px -4px 0; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
  /* things a finger has to hit: at least 32px */
  .crumb { min-height: 32px; }
  .check { min-height: 32px; }
  .check input { width: 22px; height: 22px; }
  .prefs td.c input { width: 24px; height: 24px; }
  .form-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2, .form-grid .span-3 { grid-column: auto; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .span-3 { grid-column: span 2; }
}

/* ---------- finding a customer inside a form (FindCustomer) ---------- */
.find { position: relative; display: flex; align-items: center; gap: 8px; height: var(--h-control); padding: 0 8px 0 10px; border-radius: var(--r-2); background: var(--bg);
  border: 1px solid var(--edge-strong); color: var(--ink-3); }
.find:focus-within { border-color: var(--saguaro); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saguaro) 28%, transparent); }
.find input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-body); }
.find input:focus, .find input:focus-visible { outline: none; }
.find input::placeholder { color: var(--ink-3); }
.find kbd { font: var(--w-medium) var(--fs-meta) var(--font-sans); color: var(--ink-3); border: 1px solid var(--edge); border-radius: var(--r-1); padding: 0 5px; }
.find-hits { position: absolute; top: calc(100% + 6px); left: 0; width: min(340px, calc(100vw - 24px)); z-index: 60; display: grid; padding: 4px;
  background: var(--raise); color: var(--ink); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.find-hits button { display: grid; gap: 1px; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--r-2); background: transparent;
  color: inherit; font: inherit; cursor: pointer; }
.find-hits button.on { background: var(--sel); }
@media (hover: hover) { .find-hits button:hover { background: var(--hover); } }
.find-none { padding: 10px; }
@media print { .find { display: none !important; } }

/* ---- billing (P67) ------------------------------------------------------------------------------------------------ */
.money-line { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -6px 0 14px; color: var(--ink-2); }
.money-line a { color: inherit; text-decoration: none; }
@media (hover: hover) { .money-line a:hover { color: var(--ink); text-decoration: underline; } }
.billing-tabs { margin-bottom: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field.inline { display: inline-flex; align-items: center; gap: 8px; }
.field.inline .select { width: auto; }
.t .pick { width: 36px; }
.visit-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 2px 0; }
.price-it, .void-it { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.small-input { width: 8em; height: 30px; }
.void-it .small-input { width: 16em; }
.pay-form .seg { flex-wrap: wrap; justify-self: start; max-width: 100%; }
@media (max-width: 720px) {
  .t.ready thead { display: none; }
  .t.ready, .t.ready tbody { display: block; }
  .t.ready tr { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
  .t.ready tr:last-child { border-bottom: 0; }
  /* height: auto: a table cell's 44px is a minimum in a table but a cap in a grid, and the address and Add a discount spilled onto the visit line */
  .t.ready td { border-bottom: 0; height: auto; }
  .t.ready td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; padding-top: 0; }
}
.find.in-form { margin: 0; max-width: 420px; }
.pay-form .banner { margin-bottom: 12px; }
/* Record a payment, "Put it on": the customer's unpaid invoices to tick, each with the amount that goes on it */
.pay-pick { display: grid; gap: 4px; margin-top: 6px; }
.pay-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 36px; }
.pay-pick-row .check { flex: 1 1 16em; font-weight: var(--w-medium); }
.pay-pick-row .small-input { width: 7.5em; }
.put-rest { max-width: 640px; padding: 4px 0; }
@media (max-width: 900px) { .pay-pick-row { min-height: 44px; } }

.new-invoice { display: grid; gap: 6px; }
.inv-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.inv-line > :first-child { grid-column: 1 / -1; }
.inv-line .field > span { font-size: var(--fs-s); }
.inv-line-top { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px; align-items: end; }
.inv-line-top > .field:only-child { grid-column: 1 / -1; }
.inv-line-why { grid-column: 1 / -1; }
.inv-discount td { color: var(--ink-2); }
.discount-fields .seg { flex: none; }
.discount-fields .grow { min-width: 12ch; }

.summary a { color: inherit; text-decoration: none; }
@media (hover: hover) { .summary a:hover { text-decoration: underline; } }

/* ---- hours (the time clock) -------------------------------------------------------------------------------------- */
.hours-cell { min-width: 52px; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit;
  font-variant-numeric: tabular-nums; cursor: pointer; }
.hours-cell.on { background: var(--sunk); }
@media (hover: hover) { .hours-cell:hover { background: var(--sunk); } }
.shift-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.shift-row:first-of-type { border-top: 0; }
.shift-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; width: 100%; }
.shift-form .field { min-width: 180px; }
.restock-tech { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.restock-tech:first-of-type { border-top: 0; }
.restock-tech > .strong { min-width: 140px; }
/* what they asked for needs a line of its own on a phone: beside the name and the picker it was one word wide */
.restock-tech > .grow { flex: 1 1 220px; min-width: 0; }

/* a list whose filter just changed: the old rows stay, quieter, until the new ones come (useLoad keep) */
.table-wrap.refreshing { opacity: 0.55; transition: opacity 120ms ease-out; }

/* ---- the closest tech, when booking (near.js) -------------------------------------------------------------------- */
.near { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 12px; }
.near-tech { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: baseline; padding: 6px 10px; font: inherit; font-size: var(--fs-sm);
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; text-align: left; }
.near-tech[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--sunk); }
@media (hover: hover) { .near-tech:hover { background: var(--row-hover); } }


/* a long note in a table: two lines, the rest on the visit */
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 460px; }

.t .sub.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.t tr.group .gcount { margin-left: 10px; font-weight: 400; color: var(--ink-3); font-size: var(--fs-sm); }
/* a row's action: shown under the mouse or with the keyboard on it (always, on a touch screen) */
.row-menu { position: relative; display: inline-block; }

.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; display: grid; padding: 4px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.menu [role="menuitem"] { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
@media (hover: hover) { .menu [role="menuitem"]:hover { background: var(--row-hover); } }
.menu [role="menuitem"]:focus-visible { outline-offset: -2px; }
.t td.act, .t th.act { width: 1%; white-space: nowrap; padding-left: 4px; }

/* ---------- headline numbers (Reports, Billing) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); color: inherit; text-decoration: none; }
a.kpi { transition: border-color 120ms ease; }
@media (hover: hover) { a.kpi:hover { border-color: var(--line-strong); } }
.kpi-label { font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--ink-3); }
.kpi-value { font-size: var(--fs-xxl); line-height: 1.1; font-weight: var(--w-bold); letter-spacing: calc(-0.5px * var(--tight)); font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: var(--fs-sm); color: var(--ink-2); }


/* a long unbroken word (a pasted note, a 300-letter name) wraps instead of pushing the page wider than the screen */
.contact-id .grow, .contact-side .dl dd, .sheet .kv .v { overflow-wrap: anywhere; min-width: 0; }

/* ---------- the menu folded to icons: by the button at its foot (remembered on this computer), and always below 1100px.
   The labels become tooltips, with no animation. ---------- */
@media (max-width: 900px) { .side-fold { display: none; } }
@media (min-width: 901px) {
  .shell.rail { grid-template-columns: 56px minmax(0, 1fr); }
  .rail .side { padding: 14px 8px 12px; z-index: 31; overflow: visible; }
  .rail .brand { justify-content: center; padding: 0; }
  .rail .brand-product, .rail .jump-text, .rail .nav-group, .rail .side-foot, .rail .side-tour { display: none; }
  .rail .brand-co { justify-content: center; padding: 0; margin-top: 4px; min-height: 24px; }
  .rail .brand-co .co-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rail .account-menu { left: 0; }
  .rail .jump { justify-content: center; margin: 10px 0 4px; padding: 0; position: relative; }
  /* hidden from sight only: the label is still each link's name for a screen reader */
  .rail .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rail .nav a, .rail .side-fold { justify-content: center; gap: 0; padding: 0; }
  .rail .nav .nav-count { position: absolute; top: 0; right: 2px; margin: 0; font-size: var(--fs-meta); color: var(--ink); font-weight: var(--w-semibold); }
  .rail .nav .nav-setup { position: absolute; top: 0; right: 0; margin: 0; }
  .rail .nav a { margin-top: 2px; }
  /* folded, every icon says where it goes: its name beside it on hover or keyboard focus */
  .rail .nav a::after, .rail .jump::after, .rail .side-fold::after {
    content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    padding: 4px 10px; border-radius: var(--r-2); background: var(--inverse); color: var(--on-inverse); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium);
    white-space: nowrap; pointer-events: none; opacity: 0; z-index: 60;
  }
  @media (hover: hover) { .rail .nav a:hover::after, .rail .jump:hover::after, .rail .side-fold:hover::after { opacity: 1; } }
  .rail .nav a:focus-visible::after, .rail .jump:focus-visible::after, .rail .side-fold:focus-visible::after { opacity: 1; }
}
/* the toast centres on the page column: the folded rail and the Ask panel move its edges (--toast-l, --toast-r) */
.shell.rail { --toast-l: 56px; }
@media (min-width: 901px) and (max-width: 1335px) { .shell.with-assist { --toast-r: clamp(300px, 27vw, 380px); } }
@media (min-width: 1336px) { .shell.with-assist { --toast-r: 380px; } }
@media (min-width: 901px) and (max-width: 1335px) { .shell.with-assist { grid-template-columns: var(--w-side) minmax(0, 1fr) clamp(300px, 27vw, 380px); } .shell.rail.with-assist { grid-template-columns: 56px minmax(0, 1fr) clamp(300px, 27vw, 380px); } }
@media (min-width: 1336px) { .shell.with-assist { grid-template-columns: var(--w-side) minmax(0, 1fr) 380px; } .shell.rail.with-assist { grid-template-columns: 56px minmax(0, 1fr) 380px; } }
/* ===================================================================================================================
   Office, Oct 9 pass: easier to read and less machine-made. A bookkeeper's ledger line instead of stat cards, columns that
   sort, headers that stay put, sections that fold, forms ruled like paper, an invoice that looks like a service ticket.
   =================================================================================================================== */

/* the table header stays under the top bar on a long table: the rounded wrapper clips instead of scrolling, so sticky holds */
@media (min-width: 901px) {
  .table-wrap { overflow: clip; }
  .sheet .t th { position: static; }
}

/* the ledger: figures written the way a bookkeeper writes them, tabular, one ruled line */
.ledger { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 16px; padding: 8px 0; border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; max-width: none; }
.ledger .lg { color: inherit; text-decoration: none; }
.ledger .lg:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--ink-3); font-weight: 600; }
.ledger .lg-l { color: var(--ink-3); }
.ledger .lg-v { font-size: 17px; font-weight: 600; color: var(--ink); }
.ledger .lg-n { color: var(--ink-2); }
.ledger .bad-text, .ledger .lg-v.bad-text { color: var(--bad); }
.ledger .warn-text { color: var(--warn); }
.ledger .ok-text { color: var(--ok); }
p.ledger.sentence { display: block; border-top: 0; border-bottom: 0; padding: 0; font-size: 17px; color: var(--ink); max-width: 65ch; }
@media (hover: hover) { a.lg:hover { text-decoration: underline; } }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 8px 0; }
.list-head .ledger { margin: 0; padding: 0; border: 0; }
.handled, .handled a:not(.btn), .handled .strong { color: var(--ink-3); }

/* columns that sort */
.t th.sortable { padding: 0; }
.sort-btn { appearance: none; border: 0; background: none; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px; padding: 0 12px; cursor: pointer; white-space: nowrap; text-align: inherit; width: 100%; }
.t th.sortable:first-child .sort-btn { padding-left: 8px; }
.t th.sortable:last-child .sort-btn { padding-right: 8px; }
.t th.num .sort-btn { justify-content: flex-end; }
.sort-arrow { color: var(--ink-3); font-size: var(--fs-meta); }
.sort-arrow:not(.on) { opacity: 0.55; }
/* no sort glyph until hover or focus, and only on the sorted column (a touch screen keeps it faint, so a column that sorts is still found) */
@media (hover: hover) { .sort-arrow:not(.on) { opacity: 0; } .sort-btn:focus-visible .sort-arrow:not(.on) { opacity: 1; } }
.sort-arrow.on { color: var(--ink); }
.t th[aria-sort="ascending"], .t th[aria-sort="descending"] { color: var(--ink); }
@media (hover: hover) { .sort-btn:hover { color: var(--ink); } .sort-btn:hover .sort-arrow { opacity: 1; } }
.sort-select { display: none; align-items: center; gap: 8px; margin: 0 0 12px; }
.sort-select .select { width: auto; }
@media (max-width: 720px) { .sort-select { display: inline-flex; } }
@media (max-width: 900px), (pointer: coarse) { .sort-btn { min-height: 44px; } }

/* filters with counts: one segmented strip, the chosen one on the selected fill (never a row of pills); filters that navigate are underline tabs */
.chips { display: flex; width: fit-content; max-width: 100%; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--edge); border-radius: var(--r-2); }
.chip { flex: none; height: var(--h-control-sm); padding: 0 12px; border: 1px solid var(--edge); border-radius: var(--r-2); background: transparent; color: var(--ink-2);
  font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); cursor: pointer; font-variant-numeric: tabular-nums; }
.chips .chip { height: calc(var(--h-control-sm) - 2px); border: 0; border-radius: 0; }
.chips .chip + .chip { border-left: 1px solid var(--edge); }
.chip[aria-pressed="true"] { background: var(--sel); color: var(--ink); }
.chip-n { font-weight: var(--w-regular); color: var(--ink-3); }
@media (hover: hover) { .chip:not([aria-pressed="true"]):hover { background: var(--hover); color: var(--ink); } }
@media (max-width: 900px), (pointer: coarse) { .chip { height: 44px; } .chips .chip { height: 42px; } }
.utabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 0 0 12px; overflow-x: auto; }
.utabs button { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 8px 0; min-height: 40px;
  font: inherit; font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; flex: none; }
.utabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.utabs .n { font-weight: 400; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .utabs button:hover { color: var(--ink); } }
@media (max-width: 900px), (pointer: coarse) { .utabs button { min-height: 44px; min-width: 32px; } }
/* the same strip made of links, for parts of a page that have their own address (Records, Company records) */
.utabs a { display: flex; align-items: center; margin-bottom: -1px; padding: 8px 0; min-height: 40px; border-bottom: 3px solid transparent;
  font-weight: 600; color: var(--ink-3); text-decoration: none; white-space: nowrap; flex: none; }
.utabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) { .utabs a:hover { color: var(--ink); } }
@media (max-width: 900px), (pointer: coarse) { .utabs a { min-height: 44px; } }


/* a form area is a ruled section, like a paper form: a heavy rule over a small label, no box */
.ruled { border-top: 2px solid var(--ink); padding-top: 8px; margin-bottom: 24px; }
.rule-label { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.restock-head .rule-label { margin-bottom: 0; }


/* Ready to bill on a phone: the tick sits at the card's left edge beside the name, and the select-all line leads the list */
.ready-selbar { display: none; align-items: center; gap: 16px; margin: 0 0 8px; }
.th-count { margin-left: 8px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .ready-selbar { display: flex; }
  .t.ready td.pick { align-self: start; padding-top: 12px; }
}



/* =====================================================================================================================
   EASIER TO FIND YOUR WAY, PART TWO (Oct 9): the command bar, the bell, folds, the Add a stop drawer, the keys sheet,
   row targets, the stop as a service ticket. One section so it merges cleanly; later rules win over older ones above.
   ===================================================================================================================== */

/* ---- a fold toggle: a small real button with a chevron that turns ---- */

.t tr.group td { padding-top: 4px; padding-bottom: 4px; }

/* ---- Today ---- */

/* a finished stop is a plain check in its block's color: seventeen filled circles shouted */

@media (max-width: 600px) {
}

/* ---- Settings: one section at a time ---- */

/* ---- row menus: a 32px target, centered on its row; the daily action shows on hover ---- */
.t td.act { vertical-align: middle; }
.row-menu .btn.icon-only,
.row-menu .menu-dots { min-width: 32px; height: 32px; padding: 0 6px; }
.row-menu .btn.icon-only, .row-menu .menu-dots { width: 32px; }
@media (pointer: coarse) { .row-menu .btn.icon-only, .row-menu .menu-dots { width: 44px; height: 44px; } }

/* ---- Add a stop: one drawer from the right (a right panel: the list stays beside it), for Today and Schedule alike ---- */
.drawer-back { z-index: 80; animation: back-in var(--dur-state) ease-out; }
@keyframes back-in { from { opacity: 0; } }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--raise); border-left: 1px solid var(--hair); animation: drawer-in var(--dur-sheet) var(--ease-drawer); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
.drawer form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--hair); }
.drawer-head h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semibold); letter-spacing: var(--ls-h3); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 20px; display: grid; gap: 14px; align-content: start; }
.drawer-foot { display: flex; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hair); background: var(--raise); }
.drawer-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drawer-new { display: grid; gap: 8px; }
.drawer .row { display: flex; align-items: center; gap: 8px; }
.drawer .one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-matches { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 260px; overflow-y: auto; padding: 4px;
  background: var(--raise); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.drawer-matches button { display: grid; width: 100%; gap: 0; padding: 8px 10px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
@media (hover: hover) { .drawer-matches button:hover { background: var(--hover); } }
@media (max-width: 480px) { .drawer-two { grid-template-columns: 1fr; } }

/* ---- the keyboard sheet ("?"): opened from the keyboard, so it has no animation ---- */
.sheet-back { z-index: 85; display: grid; place-items: center; padding: 16px; }
.keys-sheet { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--raise); color: var(--ink); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.keys-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 20px; }
.keys-head h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semibold); letter-spacing: var(--ls-h3); }
.keys-list { margin: 0; padding: 0 20px 16px; display: grid; }
.keys-group { padding: 12px 0 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); }
.keys-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; border-top: 1px solid var(--hair); }
.keys-list > .keys-group + div, .keys-list > div:first-child { border-top: 0; }
.keys-list dt { display: inline-flex; align-items: center; gap: 6px; }
.keys-list dd { margin: 0; color: var(--ink-2); text-align: right; }
.keys-list .then { font-size: var(--fs-meta); color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .saved-note, .drawer, .drawer-back { animation: none; }
}
@media print { .drawer-back, .sheet-back, .pal-back { display: none !important; } }

.act-line { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-height: 32px; }
.act-line .row-menu { display: block; }

/* ---- the stop record reads like a service ticket: ruled form lines, an applicator box like the state form, a stub ---- */
.record .sheet { border-top: 3px solid var(--ink); border-radius: var(--r-sm); }
.record .sheet .kv { gap: 0 32px; margin-top: 8px; }
.record .sheet .kv > div { padding: 9px 0 8px; border-bottom: 1px solid var(--line-strong); min-width: 0; }
.record .sheet .kv .k { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-2); }
.record .sheet .kv .v { margin-top: 2px; }
.kv .v a.plain { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (hover: hover) { .kv .v a.plain:hover { text-decoration-color: var(--ink); } }
.record .sheet .kv > .kv-box { grid-column: 1 / -1; margin-top: 12px; padding: 8px 12px 10px; border: 1.5px solid var(--ink); border-radius: 2px; }
.kv-box .box-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 28px; margin-top: 4px; }
.kv-box .box-row > div { padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); }
.record .sheet .stub { margin-top: 26px; padding-top: 10px; border-top: 1.5px dashed var(--line-strong); }
@media print {
  .record .sheet { border-top: 0; }
  .record .sheet .kv > div, .kv-box .box-row > div { border-bottom-color: var(--ink); }
  .record .sheet .stub { border-top-color: var(--ink); }
}

.empty-mark { border-radius: var(--r-sm); }

/* a finished stop that still needs a look shows the warning mark on its own disc (the plain-check rule above is for
   done stops with nothing wrong) */

/* a row's "…" menu floats over the page (useFloatingMenu): a table's clipping box can't cut it off */
.menu.floating { position: fixed; right: auto; z-index: 80; }

/* a part of a page behind a switch: hidden on screen while another part shows, always on paper (the stations audit) */
@media screen { .screen-off { display: none !important; } }
.station-switch { margin: 4px 0 6px; }

.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sec-head h2 { margin: 0; }
.sec-head .utabs { margin: 0; }
.btn.dismiss { margin-right: 8px; color: var(--ink-3); }
@media (hover: hover) { .btn.dismiss:hover { color: var(--ink); background: var(--row-hover); } }

/* a filter strip's choices wrap on a narrow page and never break inside a word */
@container page (max-width: 980px) { .filters .seg { flex-wrap: wrap; } }
.filters .seg button { white-space: nowrap; }


/* ---- Find a tech: a page with many techs narrows to the ones you're looking for ---- */
.tech-find { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; max-width: 520px; position: relative; }
.tech-find > svg { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.tech-find .input { padding-left: 34px; max-width: 300px; }

.truck-asks { margin: -4px 0 10px; }


/* What's new: a day at a time; each change is its title, the part of Barrierline it's in, one line, and Show me */



/* ---------- motion: state changes are quick (160ms, ease-out) and calm. Colour, opacity and transform only; never `transition: all`;
   nothing bounces or moves on its own; nothing animates on a keyboard action or a thing used a hundred times a day (the palette, row
   selection, J and K, the theme switch); exits are quicker than enters; reduced motion removes the movement and keeps the fade. ---------- */
@media (prefers-reduced-motion: no-preference) {
  :where(a, button, summary, select, input, textarea, [role="tab"], [role="menuitem"], .t tbody tr td, .chip) {
    transition: color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease), opacity var(--dur-state) var(--ease);
  }
  :where(.btn, .utabs button, .seg button, .chip, .picks button, .dismiss, .find-hits button):active:not(:disabled) { transform: scale(.97); }
  :where(.wk-cell):active { transform: scale(.985); }
  /* menus and pop-overs open from their button */
  :where(.menu, .account-menu, .find-hits) { animation: pop-in var(--dur-pop) var(--ease); transform-origin: top left; }
  @keyframes pop-in { from { opacity: 0; transform: scale(.96); } }
  /* a card or note rising into place */
  :where(.note) { animation: rise-in var(--dur-pop) var(--ease); }
  @keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
  /* what opens under a header (a tech's route on Schedule, a Reports tab's chart) fades in */
  @keyframes fade-in { from { opacity: 0; } }
}
@media (hover: hover) {
  .utabs :is(button:not([aria-pressed="true"]), a:not([aria-current])):hover { color: var(--ink); border-bottom-color: var(--edge); }
  .seg button:not([aria-pressed="true"]):hover { color: var(--ink); background: var(--hover); }
  .topbar-tabs a:not([aria-current]):hover { color: var(--ink); }
  .dismiss:hover { background: var(--hover); color: var(--ink); }
}
/* ---------- from the live check (Oct 10) ----------------------------------------------------------------------------
   Keyboard focus landed under the sticky top bar and table headers (on Billing 25 of 158 rows were hidden): the page's
   own controls keep a margin clear of them (a margin on the controls, not padding on the page: padding on html made the
   browser scroll the page while you typed in the top bar's search, which sits inside that padding). A focus ring on a tab, a switch button or a number tab drew outside its
   box and was cut off by the row around it: it goes just inside. Cards that sit side by side on a computer stack on a
   phone (the page's container query only runs on a computer). The menu scrolls on a short window, so Settings and
   Fold the menu never fall off the bottom (the folded rail only when the window is too short for it, or its labels
   would be cut off; and no overscroll-behavior, which made the menu swallow the wheel). Printing a record or invoice leaves out the top bar and anything that only
   helps on screen, and never splits a row across two pages. */
@media (min-width: 901px) { .page :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin: 132px 0 24px; } }
@media (max-width: 900px) { .page :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin: 64px 0 96px; } }
/* Billing's bill bar sticks to the bottom (about 100px, more when it wraps): the rows keep clear of it too */
@media (min-width: 901px) { .page:has(.bk-makebar) :is(a, button, input, select, textarea, summary, [tabindex]):not(.bk-makebar *) { scroll-margin-bottom: 180px; } }
@media (max-width: 900px) { .page:has(.bk-makebar) :is(a, button, input, select, textarea, summary, [tabindex]):not(.bk-makebar *) { scroll-margin-bottom: calc(var(--bar-h) + 120px); } }
:is(.topbar-tabs a, .tablist [role="tab"], .utabs button, .utabs a, .seg button, .settings-nav button):focus-visible { outline-offset: -3px; }
@media (min-width: 901px) { .shell:not(.rail) .side { overflow-y: auto; } }
@media (max-width: 900px) {
}
@media print {
  .topbar,
.tour,
.side-tour,
.toast,
.notes,
.demo-line,
.version-bar { display: none !important; }
  .main { padding-bottom: 0 !important; }
  tr, .t tr, li { break-inside: avoid; page-break-inside: avoid; }
}

/* Stored documents (views/doc-picker.js) */
.docs-list { list-style: none; margin: 0; padding: 0; }
.doc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.doc-main { display: flex; gap: 10px; min-width: 0; flex: 1 1 260px; }
.doc-main > svg { flex: none; margin-top: 2px; color: var(--ink-2); }
.doc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.doc.voided .strong { text-decoration: line-through; color: var(--ink-2); }
.doc-void { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; flex-basis: 100%; }
.doc-void .field { flex: 1 1 260px; max-width: 420px; }
.docs-voided { margin-top: 8px; }
.docs-voided summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); }
.docs-note { margin-top: 8px; }

/* The team file (views/team-file.js) */
.tf .warn-text { color: var(--warn); font-weight: var(--w-semi); }
.tf-list .doc:first-child { border-top: 0; }
.tf-detail { padding: 6px 0 2px 30px; }
.tf-print { display: none; }
.tf-print-detail { display: none; }
@media print {
  .tf-print { display: block; margin-bottom: 12px; }
  /* a printed training always carries what R3-8-502 asks for, whether or not it was opened on screen */
  .tf-detail { display: none; }
  .tf-print-detail { display: block; flex-basis: 100%; padding: 2px 0 6px 30px; font-size: var(--fs-xs); }
  .tf-print-detail p { margin: 2px 0; }
}