/* Admin styling. Standalone — it does not load the marketing site's
   stylesheet, because this is a tool, not a page, and it should look like one:
   dense, fast to scan, no display type. */

* { box-sizing: border-box; }

/* hidden must always hide, even on elements whose class sets display. */
[hidden] { display: none !important; }

:root {
  --brand: #6e1f33;
  --brand-deep: #4a0e1f;
  --brand-tint: #f4ecee;
  --ink: #1c1a19;
  --ink-2: #4b4643;
  --ink-3: #6f6862;
  --line: #e3ddd6;
  --line-2: #cfc7bf;
  --paper: #fff;
  --shell: #f7f5f2;
  --ok: #1f6b45;
  --warn: #a8641c;
  --bad: #b3261e;
  --r: 4px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink-2);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }

/* --- Chrome ------------------------------------------------------------- */

.ops-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.ops-head-in {
  max-width: 80rem; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; min-height: 3.5rem;
}
.ops-brand {
  font-weight: 700; color: var(--ink); text-decoration: none; font-size: 0.9375rem;
  display: flex; flex-direction: column; line-height: 1.2;
}
.ops-brand span { font-weight: 400; font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }

.ops-menu { display: contents; }
.ops-menu-btn, .ops-nav-check { display: none; }
.ops-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ops-nav { display: flex; gap: 0.25rem; flex: 1; flex-wrap: wrap; }
.ops-nav a {
  padding: 0.4rem 0.7rem; border-radius: var(--r); text-decoration: none;
  color: var(--ink-2); font-size: 0.875rem; font-weight: 500;
}
.ops-nav a:hover { background: var(--shell); }
.ops-nav a.is-current { background: var(--brand-tint); color: var(--brand); }

.ops-logout button {
  background: none; border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 0.35rem 0.7rem; font: inherit; font-size: 0.8125rem; color: var(--ink-3); cursor: pointer;
}
.ops-logout button:hover { border-color: var(--ink-3); color: var(--ink); }

.ops-main { max-width: 80rem; margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }

.ops-h1 { font-size: 1.5rem; color: var(--ink); margin: 0 0 0.4rem; font-weight: 600; }
.ops-h2 { font-size: 1.0625rem; color: var(--ink); margin: 2rem 0 0.75rem; font-weight: 600; }
.ops-sub { color: var(--ink-3); margin: 0 0 1.5rem; font-size: 0.9375rem; max-width: 46rem; }
.ops-hint { color: var(--ink-3); font-size: 0.8125rem; font-weight: 400; }
.ops-muted { color: var(--ink-3); font-size: 0.8125rem; }
.ops-empty { color: var(--ink-3); background: var(--paper); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 1.5rem; text-align: center; }

/* --- Flash -------------------------------------------------------------- */

.ops-flash { padding: 0.75rem 1rem; border-radius: var(--r); margin-bottom: 1.25rem; font-size: 0.9375rem; }
.ops-flash-ok { background: #e8f3ed; color: #145033; border: 1px solid #bfdfcf; }
.ops-flash-error { background: #fdecea; color: #8c1d18; border: 1px solid #f2c4c0; }

/* --- Panels & forms ----------------------------------------------------- */

.ops-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.ops-panel h2 { font-size: 0.9375rem; color: var(--ink); margin: 0 0 0.75rem; font-weight: 600; }
.ops-panel-quiet { background: none; border-style: dashed; }

label { display: block; font-size: 0.875rem; color: var(--ink); font-weight: 500; }

input[type=text], input[type=password], input[type=number], input[type=time],
input[type=search], input[type=email], input[type=tel], select, textarea {
  font: inherit; font-size: 0.9375rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 0.45rem 0.6rem;
  width: 100%; margin-top: 0.3rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
textarea { resize: vertical; font-family: var(--font); }
input[type=color] { width: 3rem; height: 2.1rem; padding: 2px; margin-top: 0.3rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); }

.ops-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 0.5rem 0.9rem; font: inherit; font-size: 0.875rem;
  font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ops-btn:hover:not(:disabled) { border-color: var(--ink-3); }
.ops-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.ops-btn-primary:hover:not(:disabled) { background: var(--brand-deep); border-color: var(--brand-deep); }
.ops-btn-ghost { background: none; }
.ops-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ops-inline-form { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ops-inline { display: inline; }
.ops-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8125rem; color: var(--brand); text-decoration: underline; cursor: pointer; }

/* --- Tables ------------------------------------------------------------- */

.ops-scroll { overflow-x: auto; }

.ops-table {
  width: 100%; border-collapse: collapse; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); font-size: 0.875rem;
  margin-bottom: 1.25rem;
}
.ops-table th, .ops-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.ops-table thead th { background: var(--shell); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; }
.ops-table tbody tr:last-child td { border-bottom: 0; }
.ops-num { text-align: right; }
.ops-nowrap { white-space: nowrap; }
.ops-ref { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }
.ops-note, .ops-note-inline { font-size: 0.8125rem; color: var(--ink-3); }

.ops-cap { width: 4.5rem; text-align: right; margin: 0; padding: 0.25rem 0.4rem; }
.is-full { color: var(--ink-3); }
.is-over td, tr.is-over { background: #fdecea; }
/* Delete: a quiet button that turns red on hover. Greyed out when it can't be used. */
.ops-del { color: var(--ink-3); }
.ops-del svg { flex: none; }
.ops-del:hover:not(:disabled) { border-color: #f2c4c0; background: #fdecea; color: var(--bad); }
.ops-del:disabled { opacity: 0.4; border-color: transparent; }

/* An on/off switch in place of a checkbox. */
.ops-switch { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
.ops-switch input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 2.6rem; height: 1.5rem; margin: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background 0.15s; }
.ops-switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.ops-switch input:checked { background: var(--ok); }
.ops-switch input:checked::before { transform: translateX(1.1rem); }
.ops-switch input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.ops-status { display: inline-block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 2px; }
.ops-status-confirmed { background: #e8f3ed; color: #145033; }
.ops-status-held { background: #fff4e0; color: #7a4a10; }
.ops-status-expired, .ops-status-cancelled { background: #f0eeec; color: var(--ink-3); }

.ops-flagged td { background: #fdecea; color: #8c1d18; font-size: 0.8125rem; }

.ops-swatch { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.4rem; vertical-align: baseline; }

.ops-fill { white-space: nowrap; font-size: 0.75rem; color: var(--ink-3); }
.ops-fill-bar { display: inline-block; width: 4rem; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-right: 0.5rem; vertical-align: middle; }
.ops-fill-bar span { display: block; height: 100%; background: var(--brand); }

/* --- Dashboard ---------------------------------------------------------- */

.ops-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.ops-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; }
.ops-stat-n { display: block; font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ops-stat-l { display: block; font-size: 0.75rem; color: var(--ink-3); margin-top: 0.25rem; }

/* A fill bar, in the zone's colour where there is one. */
.ops-meter { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ops-meter span { display: block; height: 100%; border-radius: inherit; background: var(--zone, var(--brand)); }
.ops-stat-fill .ops-meter { margin-top: 0.6rem; }

/* Bookings by zone: one row per zone, how full it is at a glance. Each row opens that zone's bookings. */
.ops-zfill { margin: 0 0 0.5rem; padding: 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ops-zfill li + li { border-top: 1px solid var(--line); }
.ops-zfill-row {
  display: grid; align-items: center; gap: 0.4rem 1.25rem;
  grid-template-columns: minmax(10rem, 1.3fr) minmax(6rem, 2fr) 8.5rem 7.5rem 6.5rem 0.5rem;
  grid-template-areas: "name meter booked left value chev";
  padding: 0.8rem 1rem; color: var(--ink-2); font-size: 0.875rem; text-decoration: none; font-variant-numeric: tabular-nums;
}
.ops-zfill-row:hover { background: var(--shell); }
.ops-zfill-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ops-zfill-row::after { content: ""; grid-area: chev; width: 0.45rem; height: 0.45rem; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: rotate(45deg); }
.ops-zfill-name { grid-area: name; display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.ops-zfill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-zfill-dot { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--zone); }
.ops-zfill-row .ops-meter { grid-area: meter; }
.ops-zfill-row .ops-badge { margin-left: 0; }
.ops-zfill-booked { grid-area: booked; white-space: nowrap; }
.ops-zfill-booked strong { color: var(--ink); font-weight: 600; }
.ops-zfill-left { grid-area: left; text-align: right; white-space: nowrap; }
.ops-zfill-left.is-full { color: var(--bad); font-weight: 600; }
.ops-zfill-value { grid-area: value; text-align: right; color: var(--ink); font-weight: 600; white-space: nowrap; }
.ops-zfill-row.is-off .ops-zfill-name, .ops-zfill-row.is-off .ops-zfill-value { color: var(--ink-3); }
.ops-zfill-row.is-off .ops-meter span { opacity: 0.5; }

/* --- Setup checks ------------------------------------------------------- */

.ops-checks th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ops-check-status { width: 1.5rem; }
.ops-check-detail { color: var(--ink-3); font-size: 0.8125rem; }
.ops-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-top: 0.35rem; }
.ops-dot-ok { background: var(--ok); }
.ops-dot-warn { background: var(--warn); }
.ops-dot-fail { background: var(--bad); }

/* --- Zones -------------------------------------------------------------- */

.ops-zone-layout { display: grid; grid-template-columns: 23rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 64rem) { .ops-zone-layout { grid-template-columns: 1fr; } }
.ops-zone-side { display: grid; gap: 1.25rem; }
.ops-zone-side .ops-panel { margin-bottom: 0; }

.ops-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.ops-panel-head h2 { margin: 0; }
.ops-count { display: inline-block; min-width: 1.5rem; padding: 0 0.4rem; margin-left: 0.3rem; border-radius: 999px; background: var(--shell); color: var(--ink-3); font-size: 0.75rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.ops-zone-list { list-style: none; margin: 0 -0.5rem; padding: 0; }
.ops-zone-row { padding: 0.55rem 0.5rem; border: 1px solid transparent; border-radius: var(--r); }
.ops-zone-row + .ops-zone-row { margin-top: 0.2rem; }
.ops-zone-row:hover { background: var(--shell); }
.ops-zone-row.is-selected { background: var(--brand-tint); border-color: #e8d2d8; }
.ops-zone-row.is-off .ops-zone-name { color: var(--ink-3); }

.ops-zone-select { display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ops-zone-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.ops-zone-select .ops-swatch { flex: none; width: 0.8rem; height: 0.8rem; margin: 0.28rem 0 0; border-radius: 3px; }
.ops-zone-text { display: grid; gap: 0.1rem; min-width: 0; }
.ops-zone-name { font-size: 0.9375rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ops-zone-meta { font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ops-zone-meta strong { color: var(--warn); font-weight: 600; }

.ops-zone-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.5rem 0 0 1.4rem; }
.ops-zone-tools .ops-inline { display: inline-flex; }
.ops-zone-order { display: inline-flex; margin-left: auto; }
.ops-icon-btn { width: 1.75rem; height: 1.75rem; background: none; border: 1px solid transparent; border-radius: var(--r); font: inherit; color: var(--ink-3); cursor: pointer; }
.ops-icon-btn:hover:not(:disabled) { border-color: var(--line-2); color: var(--ink); }
.ops-icon-btn:disabled { opacity: 0.3; cursor: default; }
.ops-danger-text { color: var(--bad); }
.ops-danger-text:hover:not(:disabled) { border-color: var(--bad); }
.ops-zone-footnote { margin: 0.75rem 0 0; }

.ops-map-bar { display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; margin-bottom: 0.6rem; }
.ops-map-hint { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--ink-3); }
.ops-map { position: relative; z-index: 0; height: 34rem; border: 1px solid var(--line-2); border-radius: var(--r); background: #e9e6e1; }
.ops-map.is-drawing { cursor: crosshair; }
/* While drawing, one finger works the points and two move the map: the browser mustn't scroll or zoom the page. */
.ops-map.leaflet-container.is-drawing { touch-action: none; }
.ops-map.leaflet-container.is-drawing.is-over-point { cursor: move; }

.ops-zone-save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-top: 0.75rem; padding: 0.9rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.ops-save-title { align-self: center; min-width: 8rem; font-size: 0.9375rem; color: var(--ink); }
.ops-zone-save label { font-size: 0.75rem; color: var(--ink-3); }
.ops-zone-save input[type=text] { width: 16rem; }

.ops-test-form { display: flex; gap: 0.5rem; align-items: flex-end; }
.ops-test-form input { margin-top: 0; }
.ops-test-out { display: block; margin: 0.75rem 0 0; padding: 0.6rem 0.75rem; border-radius: var(--r); font-size: 0.8125rem; }
.ops-test-out strong { display: block; margin-bottom: 0.2rem; color: var(--ink); }
.ops-test-out.is-good { background: #e8f3ed; color: #145033; }
.ops-test-out.is-bad { background: #fdecea; color: #8c1d18; }

/* --- Slots -------------------------------------------------------------- */

.ops-zone-head { font-size: 0.9375rem; color: var(--ink); margin: 1.5rem 0 0.5rem; font-weight: 600; }
.ops-add summary { cursor: pointer; font-size: 0.9375rem; }
.ops-add-form { margin-top: 1rem; display: grid; gap: 0.9rem; }
.ops-add-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.75rem; }
@media (max-width: 44rem) { .ops-add-grid { grid-template-columns: 1fr 1fr; } }
.ops-add-form button { justify-self: start; }

.ops-sticky-save {
  position: sticky; bottom: 0; background: var(--shell);
  padding: 0.75rem 0; border-top: 1px solid var(--line); margin-top: 0.5rem;
}

/* --- Filters ------------------------------------------------------------ */

.ops-filters { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.ops-filters label { font-size: 0.75rem; color: var(--ink-3); }
.ops-filters select, .ops-filters input { min-width: 9rem; }
.ops-search input { min-width: 16rem; }

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

.ops-settings { max-width: 46rem; }
/* Fields line up along their inputs, so a label that wraps to two lines ("Freeze-protection discount") doesn't push its box down. */
.ops-money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; gap: 0.9rem; margin-bottom: 1rem; }
.ops-money { display: flex; align-items: center; gap: 0.3rem; }
.ops-money > span { color: var(--ink-3); }
.ops-check { display: flex; align-items: center; gap: 0.5rem; }
.ops-check input { width: auto; margin: 0; }
.ops-full { display: block; margin-top: 1rem; }

/* --- Login -------------------------------------------------------------- */

.ops-login-body { display: grid; place-items: center; min-height: 100vh; }
.ops-login {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 2rem; width: min(22rem, 90vw);
}
.ops-login h1 { font-size: 1.125rem; margin: 0 0 1.25rem; color: var(--ink); }
.ops-login button { width: 100%; margin-top: 1rem; background: var(--brand); color: #fff; border: 0; border-radius: var(--r); padding: 0.65rem; font: inherit; font-weight: 600; cursor: pointer; }
.ops-login button:hover { background: var(--brand-deep); }
.ops-login-error { background: #fdecea; color: #8c1d18; padding: 0.6rem 0.75rem; border-radius: var(--r); font-size: 0.8125rem; margin: 0 0 1rem; }

/* --- Added: detail page, settings, window presets ------------------------ */

.ops-titlebar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.ops-titlebar .ops-sub { margin: 0; }
.ops-window-state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.875rem; margin: 0 0 1rem; }
.ops-window-state .ops-dot { margin-top: 0; }
.ops-back { margin: 0 0 0.5rem; font-size: 0.875rem; }
.ops-back a { text-decoration: none; }

.ops-detail { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 1.25rem; align-items: start; }
@media (max-width: 64rem) { .ops-detail { grid-template-columns: 1fr; } }

.ops-dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.55rem 1rem; margin: 0; font-size: 0.9375rem; }
.ops-dl dt { color: var(--ink-3); font-size: 0.8125rem; padding-top: 0.1rem; }
.ops-dl dd { margin: 0; color: var(--ink); }

.ops-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ops-form-grid .ops-span { grid-column: 1 / -1; }
.ops-form-pair { display: grid; grid-template-columns: 5rem 1fr; gap: 0.75rem; }
@media (max-width: 40rem) { .ops-form-grid { grid-template-columns: 1fr; } }

.ops-stack { display: grid; gap: 0.6rem; }
.ops-stack .ops-btn { justify-self: start; }

.ops-mini { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; margin-bottom: 0.75rem; }
.ops-mini td { padding: 0.3rem 0; }
.ops-mini-total td { border-top: 1px solid var(--line); padding-top: 0.5rem; font-weight: 600; color: var(--ink); }

.ops-panel-danger { border-color: #f2c4c0; }
.ops-panel-danger h2 { color: #8c1d18; }
.ops-policy-now { font-size: 0.875rem; margin: 0 0 0.75rem; }
.ops-btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.ops-btn-danger:hover:not(:disabled) { background: #8c1d18; border-color: #8c1d18; }
.ops-btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8125rem; }

.ops-radio, .ops-check-inline { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.ops-radio input, .ops-check-inline input { width: auto; margin: 0; accent-color: var(--brand); }
.ops-radio .ops-money input { margin: 0; }

.ops-badge { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.35rem; border-radius: 2px; background: var(--line); color: var(--ink-3); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.ops-tag { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 2px; background: #eaf0f5; color: #2d4a63; margin-top: 0.2rem; }
.ops-tfoot th, .ops-tfoot td { background: var(--shell); font-weight: 600; color: var(--ink); border-top: 1px solid var(--line-2); }
tr.is-past td { color: var(--ink-3); }

.ops-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.ops-grid-2 .ops-hint { display: block; margin-top: 0.25rem; }
.ops-pause { align-self: end; padding-bottom: 0.5rem; }
.ops-error-list { margin: 0.4rem 0 0; padding-left: 1.1rem; }

.ops-fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 0.75rem 1rem 1rem; margin: 0; }
.ops-fieldset legend { font-size: 0.875rem; font-weight: 500; color: var(--ink); padding: 0 0.3rem; }
.ops-checks-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0.25rem 0 0.75rem; }
.ops-custom-window { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ops-custom-window input { width: auto; margin: 0; }
.ops-add-grid { grid-template-columns: 2fr 1fr; }

.ops-zone-head .ops-muted { font-weight: 400; margin-left: 0.5rem; }

/* --- User guide ---------------------------------------------------------- */

.ops-guide { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 56rem) { .ops-guide { grid-template-columns: 1fr; gap: 1.5rem; } }

.ops-guide-toc { position: sticky; top: 1.25rem; font-size: 0.875rem; }
@media (max-width: 56rem) { .ops-guide-toc { position: static; } }
.ops-guide-toc > p { margin: 0 0 0.6rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ops-guide-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.ops-guide-toc a { display: block; margin-left: -1px; padding: 0.3rem 0 0.3rem 0.85rem; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.ops-guide-toc a:hover, .ops-guide-toc a:focus-visible { color: var(--brand); border-left-color: var(--brand); }

.ops-guide-body { max-width: 44rem; }
.ops-guide-body > .ops-h1 { margin-bottom: 0.5rem; }
.ops-guide-lede { margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }

.ops-guide-section { padding: 2rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.ops-guide-section:first-of-type { padding-top: 0.5rem; border-top: 0; }
.ops-guide-section h2 { margin: 0 0 0.75rem; font-size: 1.3125rem; font-weight: 600; color: var(--ink); text-wrap: balance; }
.ops-guide-section h3 { margin: 1.75rem 0 0.5rem; font-size: 1rem; font-weight: 600; color: var(--ink); scroll-margin-top: 1rem; }

.ops-guide-body p { margin: 0 0 0.9rem; line-height: 1.65; }
.ops-guide-body ul, .ops-guide-body ol { margin: 0 0 1rem; padding-left: 1.25rem; line-height: 1.65; }
.ops-guide-body li + li { margin-top: 0.4rem; }
.ops-guide-body a { text-underline-offset: 2px; }

/* Numbered steps. Numbers only where order matters. */
.ops-guide-body .ops-guide-steps { list-style: none; padding-left: 0; counter-reset: step; }
.ops-guide-steps > li { position: relative; padding-left: 2.25rem; counter-increment: step; }
.ops-guide-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0.15rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 0.75rem; font-weight: 700; }

/* Names of buttons and fields, so they stand out from the sentence around them. */
.ops-ui { font-weight: 600; color: var(--ink); }
.ops-ref { font-family: var(--mono); font-size: 0.875em; background: var(--shell); padding: 0.05rem 0.3rem; border-radius: 3px; white-space: nowrap; }

.ops-guide-body .ops-guide-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.25rem 1.5rem; padding-left: 1.25rem; }
.ops-guide-jobs li + li { margin-top: 0; }

.ops-guide-terms { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.6rem 1.25rem; margin: 0 0 1rem; line-height: 1.55; }
.ops-guide-terms dt { font-weight: 600; color: var(--ink); }
.ops-guide-terms dd { margin: 0; }
@media (max-width: 40rem) { .ops-guide-terms { grid-template-columns: 1fr; gap: 0.15rem; } .ops-guide-terms dd { margin-bottom: 0.6rem; } }

.ops-guide-note { margin: 1.25rem 0 0; padding: 0.9rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.ops-guide-note > *:last-child { margin-bottom: 0; }
.ops-guide-note ul { margin-top: 0.25rem; }

.ops-guide-table { margin: 0.25rem 0 1rem; }
.ops-guide-table td { line-height: 1.5; }
.ops-guide-table td:first-child { white-space: nowrap; }

.ops-guide-faq { border-top: 1px solid var(--line); }
.ops-guide-faq details { border-bottom: 1px solid var(--line); }
.ops-guide-faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.ops-guide-faq summary::-webkit-details-marker { display: none; }
.ops-guide-faq summary::after { content: "+"; flex: none; font-weight: 400; color: var(--ink-3); }
.ops-guide-faq details[open] summary::after { content: "\2212"; }
.ops-guide-faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ops-guide-faq details > div { padding: 0 0 0.9rem; }
.ops-guide-faq details > div > p:last-child { margin-bottom: 0; }

/* --- Bookings sort -------------------------------------------------------- */

.ops-sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
/* The bookings table always fits the window: fixed column widths, with the
   address taking what's left, so no text (a long link pasted into the notes,
   say) can widen it. Notes show two lines; the whole note is on hover and on
   the booking page. On phones the rows become cards instead. */
@media (min-width: 48.01rem) {
  .ops-bookings { table-layout: fixed; }
  .ops-bookings th:nth-child(1) { width: 8.5rem; }
  .ops-bookings th:nth-child(2) { width: 17%; }
  .ops-bookings th:nth-child(4) { width: 8rem; }
  .ops-bookings th:nth-child(5) { width: 8rem; }
  .ops-bookings th:nth-child(6) { width: 9rem; }
  .ops-bookings td { overflow-wrap: anywhere; }
}
/* It never scrolls sideways: everything in a cell wraps to fit it, including the
   payment tag under Total and the one-tap payment button under Status. */
.ops-scroll:has(> .ops-bookings) { overflow-x: visible; }
.ops-bookings .ops-pay { white-space: normal; border-radius: 0.6rem; max-width: 100%; line-height: 1.35; padding: 0.15rem 0.5rem; }
.ops-bookings .ops-pay-step .ops-btn { white-space: normal; max-width: 100%; text-align: left; line-height: 1.3; }
.ops-bookings .ops-swatch { vertical-align: 0; }
.ops-bookings .ops-note-inline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0.15rem; overflow-wrap: anywhere; }
.ops-break { overflow-wrap: anywhere; }
.ops-sort-link:hover, .ops-sort-link.is-active { color: var(--brand); }

/* --- Time slots: one collapsible group per zone ---------------------------- */

.ops-group-tools { display: flex; justify-content: flex-end; gap: 0.5rem; margin: 0.5rem 0; }

.ops-zone-group { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 0.6rem; }
.ops-zone-group > summary.ops-zone-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem;
  margin: 0; padding: 0.8rem 1rem; cursor: pointer; list-style: none;
}
.ops-zone-group > summary::-webkit-details-marker { display: none; }
.ops-zone-group > summary::before {
  content: ""; flex: none; width: 0.45rem; height: 0.45rem; margin-right: 0.15rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.ops-zone-group[open] > summary::before { transform: rotate(45deg); }
.ops-zone-group[open] > summary { border-bottom: 1px solid var(--line); }
.ops-zone-group > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ops-zone-group .ops-zone-head .ops-muted { margin-left: 0; }
.ops-zone-group .ops-table { border: 0; border-radius: 0; margin: 0; }
.ops-badge-bad { background: #fdecea; color: #8c1d18; margin-left: 0; }
.ops-slots td { vertical-align: middle; }
.ops-slots .ops-unit, .ops-slot-day { display: none; }
.ops-slot-cap-in { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ink-3); font-size: 0.8125rem; font-weight: 400; }
.ops-slot-del { width: 1%; white-space: nowrap; text-align: right; }

/* --- Dashboard calendar ---------------------------------------------------- */

.ops-cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 2rem 0 0.75rem; }
.ops-cal-head .ops-h2 { margin: 0; }
.ops-cal-nav { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.ops-view-toggle { display: inline-flex; padding: 2px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); }
.ops-view-toggle a { padding: 0.3rem 0.8rem; border-radius: 3px; color: var(--ink-2); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.ops-view-toggle a:hover { color: var(--ink); }
.ops-view-toggle a.is-current { background: var(--brand-tint); color: var(--brand); }
.ops-cal-head .ops-h2 { margin-right: auto; }
.ops-cal-nav strong { min-width: 8.5rem; text-align: center; color: var(--ink); font-weight: 600; }

/* No overflow: hidden on the calendar, or a window's booking list is cut off at its edge. */
.ops-cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 0.5rem;
}
.ops-cal-dow { padding: 0.4rem 0.5rem; background: var(--shell); border-bottom: 1px solid var(--line); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.ops-cal-dow:first-child { border-top-left-radius: var(--r); }
.ops-cal-dow:nth-child(7) { border-top-right-radius: var(--r); }
.ops-cal-day { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; min-height: 6.5rem; padding: 0.35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ops-cal-day:nth-child(7n) { border-right: 0; }
.ops-cal-day.is-other { background: #fbfaf8; }
.ops-cal-day.is-other .ops-cal-n { color: var(--line-2); }
.ops-cal-day.is-past .ops-cal-slot { opacity: 0.55; }
.ops-cal-date { display: flex; align-items: center; gap: 0.35rem; min-height: 1.4rem; font-size: 0.8125rem; color: var(--ink-2); }
.ops-cal-wd { display: none; }
.ops-cal-n { font-variant-numeric: tabular-nums; }
.ops-cal-day.is-today .ops-cal-n { min-width: 1.4rem; padding: 0 0.3rem; border-radius: 999px; background: var(--brand); color: #fff; text-align: center; }
.ops-cal-route { margin-left: auto; font-size: 0.6875rem; }

/* A window: zone first and bold, then AM / PM. Clicking it lists its bookings. */
.ops-cal-slot {
  position: relative; border-left: 3px solid var(--zone, var(--brand)); border-radius: 3px;
  background: var(--shell); color: var(--ink); font-size: 0.6875rem; line-height: 1.3;
}
.ops-cal-slot > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.3rem;
  padding: 0.25rem 0.35rem 0.3rem; cursor: pointer; list-style: none;
}
.ops-cal-slot > summary::-webkit-details-marker { display: none; }
.ops-cal-slot > summary:hover, .ops-cal-slot[open] > summary { background: var(--brand-tint); }
.ops-cal-slot > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ops-cal-zone { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-cal-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ops-cal-time { grid-column: 1 / -1; color: var(--ink-3); font-weight: 500; letter-spacing: 0.03em; }
.ops-cal-fill { grid-column: 1 / -1; height: 3px; margin-top: 0.2rem; border-radius: 2px; background: var(--line); overflow: hidden; }
.ops-cal-fill span { display: block; height: 100%; background: var(--zone, var(--brand)); }
.ops-cal-slot.is-full .ops-cal-count { color: var(--bad); font-weight: 600; }
.ops-cal.is-empty { display: none; }

.ops-cal-pop {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: -3px;
  width: max-content; min-width: 14rem; max-width: 22rem; max-height: 22rem; overflow-y: auto;
  padding: 0.6rem 0.75rem; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(28, 26, 25, 0.14); font-size: 0.8125rem; line-height: 1.4;
}
/* Friday and Saturday lists open leftwards, so they stay on the page. */
.ops-cal-day:nth-child(7n) .ops-cal-pop, .ops-cal-day:nth-child(7n+6) .ops-cal-pop { left: auto; right: 0; }
.ops-cal-pop-head { margin: 0 0 0.4rem; color: var(--ink-3); }
.ops-cal-pop-head strong { color: var(--ink); }
.ops-cal-pop p { margin: 0 0 0.3rem; }
.ops-cal-pop ul { list-style: none; margin: 0; padding: 0; }
.ops-cal-pop li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; border-top: 1px solid var(--line); }
.ops-cal-who { display: grid; min-width: 0; line-height: 1.3; }
.ops-cal-pop li a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ops-cal-pop li a:hover { color: var(--brand); text-decoration: underline; }
.ops-cal-pop .ops-cal-pop-foot { margin: 0.4rem 0 0; padding-top: 0.45rem; border-top: 1px solid var(--line); }

.ops-status-done { background: #e3ecf5; color: #1f4a6e; }

/* --- Route: map and stop order --------------------------------------------- */

.ops-route-tools { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; }
.ops-route-tools > details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.ops-route-tools summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.75rem 0.9rem; cursor: pointer; list-style: none; }
.ops-route-tools summary::-webkit-details-marker { display: none; }
.ops-route-tools summary::after { content: "+"; margin-left: auto; color: var(--ink-3); }
.ops-route-tools details[open] > summary::after { content: "\2212"; }
.ops-route-tools summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ops-route-tools summary > span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.ops-route-tools summary > strong { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.ops-route-tools details > :not(summary) { margin-left: 0.9rem; margin-right: 0.9rem; }
.ops-route-tools details > .ops-hint { display: block; margin-top: 0.7rem; margin-bottom: 0.85rem; }
/* Its own stacking context: Leaflet's layers have z-indexes in the hundreds and
   would otherwise slide over the sticky day picker while scrolling. */
.ops-route-mapview { position: relative; z-index: 0; height: 24rem; border: 1px solid var(--line-2); border-radius: 10px; background: #e9e6e1; }

/* Time slot switcher: one segment per slot, in the slot's colour. */
.ops-seg { display: flex; gap: 0.25rem; margin-bottom: 0.6rem; padding: 0.25rem; border-radius: 10px; background: var(--shell); overflow-x: auto; }
.ops-seg-btn { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.6rem; padding: 0.35rem 0.85rem; border-radius: 8px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ops-seg-btn:hover { color: var(--ink); }
.ops-seg-btn[aria-current="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(28, 26, 25, 0.16); }
.ops-seg-btn:focus-visible { outline: 2px solid var(--win); outline-offset: 1px; }
.ops-seg-dot { flex: none; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--win); }
.ops-seg-n { min-width: 1.5rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--shell); background: color-mix(in srgb, var(--win) 14%, #fff); color: var(--win); font-size: 0.75rem; text-align: center; }

/* The selected slot's route: where it starts and where it ends. */
.ops-win-card { margin-top: 0.75rem; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: inset 5px 0 0 var(--win); }
.ops-win-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.55rem; padding: 0.75rem 0.9rem 0.65rem 1.2rem; }
.ops-win-card-head strong { font-size: 1.0625rem; color: var(--ink); }
.ops-win-badge { margin-left: auto; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--shell); color: var(--ink-3); font-size: 0.75rem; font-weight: 600; }
.ops-win-badge.is-sorted { background: color-mix(in srgb, var(--win) 14%, #fff); color: var(--win); }
.ops-win-form { margin: 0; transition: opacity 0.15s; }
.ops-win-form.is-saving { opacity: 0.55; pointer-events: none; }
.ops-win-row { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0.2rem 0.9rem 0.2rem 1.2rem; border-top: 1px solid var(--line); }
.ops-win-row-label { flex: none; width: 2.75rem; color: var(--ink); font-weight: 600; }
.ops-win-row select { flex: 1; min-width: 0; min-height: 2.75rem; margin: 0; padding-left: 0; border: 0; background-color: transparent; color: var(--ink-2); font-weight: 500; text-align: right; text-align-last: right; cursor: pointer; }
.ops-win-foot { padding: 0.65rem 0.9rem 0.8rem 1.2rem; border-top: 1px solid var(--line); }
.ops-win-foot .ops-btn { width: 100%; justify-content: center; min-height: 2.75rem; }
.ops-win-reset { margin: 0; padding: 0.55rem 0.9rem 0.7rem 1.2rem; border-top: 1px solid var(--line); text-align: center; }
.ops-win-card .ops-plan-note { margin: 0; padding: 0 0.9rem 0.7rem 1.2rem; color: #7a4a10; }
.ops-plan-tag { display: inline-block; margin-right: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px; }

/* A slot's Stop order list: drag a row by its handle to move that stop. */
.ops-order { padding: 0.6rem 0.9rem 0.7rem 1.2rem; border-top: 1px solid var(--line); scroll-margin-top: 9rem; transition: opacity 0.15s; }
.ops-order.is-saving { opacity: 0.55; pointer-events: none; }
.ops-order .ops-flash { margin: 0 0 0.6rem; }
.ops-order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; margin-bottom: 0.35rem; color: var(--ink); font-weight: 600; }
.ops-order-list { margin: 0; padding: 0; list-style: none; }
.ops-order-row { display: flex; align-items: center; gap: 0.7rem; min-height: 3.1rem; padding: 0.25rem 0.1rem 0.25rem 0.25rem; border-bottom: 1px solid var(--line); background: var(--paper); -webkit-user-select: none; user-select: none; }
.ops-order-row:last-child { border-bottom: 0; }
.ops-order-row.is-dragging { position: relative; z-index: 2; will-change: transform; border-radius: 10px; border-bottom-color: transparent; box-shadow: 0 8px 22px rgba(28, 26, 25, 0.2); }
.ops-order-num { flex: none; display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--win); color: #fff; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ops-order-row.is-done .ops-order-num { background: var(--paper); color: var(--win); box-shadow: inset 0 0 0 2px var(--win); }
.ops-order-who { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ops-order-who strong { overflow: hidden; color: var(--ink); font-size: 0.9375rem; text-overflow: ellipsis; white-space: nowrap; }
.ops-order-who .ops-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-order-handle { flex: none; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: grab; touch-action: none; }
.ops-order-handle:hover { background: var(--shell); color: var(--ink); }
.ops-order-row.is-dragging .ops-order-handle { cursor: grabbing; color: var(--win); }
.ops-order-handle:focus-visible { outline: 2px solid var(--win); outline-offset: -2px; }
.ops-map-pop-pos { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.15rem 0 0; color: var(--ink); font-weight: 600; }
.ops-map-pop-pos select { width: auto; min-width: 4.5rem; margin: 0; padding: 0.3rem 0.5rem; }

/* Pins, drawn by route.js: the slot's colour, the stop number, and a Start or End tag.
   The number sits in its own element because Leaflet's stylesheet sets the
   marker itself to display: block, which undoes any centring put on it. */
.leaflet-marker-icon.ops-pin { overflow: visible; background: none; border: 0; }
.ops-pin-dot { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; background: var(--win); color: #fff; font: 700 0.8125rem/1 var(--font); font-variant-numeric: tabular-nums; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.ops-pin.is-done .ops-pin-dot { border-color: var(--win); background: #fff; color: var(--win); }
.ops-pin.is-pinned .ops-pin-dot { border-width: 3px; box-shadow: 0 0 0 2px var(--win), 0 2px 8px rgba(0, 0, 0, 0.4); }
.ops-pin-tag { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--ink); color: #fff; font: 700 0.625rem/1.3 var(--font); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); pointer-events: none; }
.ops-map-pop { display: grid; gap: 0.35rem; min-width: 13rem; font: 0.8125rem/1.4 var(--font); }
.ops-map-pop-slot { justify-self: start; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--win); color: #fff; font-size: 0.6875rem; font-weight: 700; }
.ops-map-pop strong { color: var(--ink); font-size: 0.9375rem; }
.ops-map-pop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-top: 0.2rem; }
.ops-map-pop-actions .ops-btn { justify-content: center; min-height: 2.4rem; }
.ops-map-pop-actions .ops-btn.is-on { border-color: var(--win); background: color-mix(in srgb, var(--win) 12%, #fff); color: var(--win); }

/* --- Booking page: the crew's buttons --------------------------------------- */

.ops-job-state { margin: 0 0 0.25rem; color: var(--ink); }
.ops-stop-actions.ops-job-actions { margin-top: 0.75rem; }

/* --- Route (the crew's phone view) ---------------------------------------- */

.ops-route { max-width: 42rem; margin: 0 auto; }

.ops-route-top { position: sticky; top: 0; z-index: 5; margin: -0.5rem 0 0.25rem; padding: 0.5rem 0 0.75rem; background: var(--shell); border-bottom: 1px solid var(--line); }
.ops-route-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.ops-route-pick select { margin: 0; min-height: 2.75rem; }
.ops-nav-btn { justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0; font-size: 1.4rem; line-height: 1; }
.ops-nav-btn[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.ops-route-progress { display: flex; align-items: center; gap: 0.6rem; margin: 0.65rem 0 0; font-size: 0.875rem; }
.ops-route-progress .ops-fill-bar { flex: 1; width: auto; height: 6px; margin: 0; }
.ops-route-progress .ops-fill-bar span { background: var(--ok); }

/* Each time slot is its own route: a coloured band heads it, and its stops carry the same colour. */
.ops-route-window { --win: var(--brand); margin-top: 1.75rem; }
.ops-route-window-head { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; padding: 0.85rem 1rem 0.85rem 1.2rem; border-radius: 12px; background: var(--brand-tint); background: color-mix(in srgb, var(--win) 11%, #fff); box-shadow: inset 6px 0 0 var(--win); }
.ops-win-title { margin: 0; color: var(--ink); font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.ops-win-sub { margin: 0.1rem 0 0; color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; }
.ops-win-count { margin-left: auto; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--paper); color: var(--win); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ops-stop { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; scroll-margin-top: 8.5rem; }
.ops-stop.is-done { background: #f4f9f6; border-color: #cfe5d8; }
.ops-route-window .ops-stop { border-left: 5px solid var(--win); }
.ops-route-window .ops-stop-num { background: color-mix(in srgb, var(--win) 14%, #fff); color: var(--win); }
.ops-stop .ops-flash { margin: 0 0 0.75rem; }

.ops-stop-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.ops-stop-num { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 0.875rem; font-weight: 700; }
.ops-stop.is-done .ops-stop-num { background: var(--ok); color: #fff; }
.ops-stop-who { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.ops-stop-name { font-size: 1.0625rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.ops-pill { flex: none; padding: 0.2rem 0.5rem; border-radius: 999px; background: #fff4e0; color: #7a4a10; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.ops-pill-done { background: #e1f0e7; color: #145033; }

.ops-stop-addr { margin: 0.75rem 0 0.6rem; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); }
.ops-stop-go { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.5rem; }
.ops-stop-go .ops-btn, .ops-stop-actions .ops-btn { justify-content: center; min-height: 2.9rem; font-size: 1rem; }
.ops-stop-alt { display: inline-block; margin-top: 0.45rem; font-size: 0.8125rem; }

.ops-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.ops-fact { padding: 0.25rem 0.55rem; border: 1px solid var(--line); border-radius: 4px; background: var(--shell); color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; }
.ops-fact.is-warn { background: #fff4e0; border-color: #f0d39c; color: #7a4a10; }
.ops-fact.is-ok { background: #eaf0f5; border-color: #cddbe7; color: #2d4a63; }

.ops-stop-note { margin: 0.75rem 0 0; padding: 0.6rem 0.75rem; border-left: 3px solid #e0b84a; border-radius: 4px; background: #fffbea; color: var(--ink); font-size: 0.9375rem; overflow-wrap: anywhere; }
.ops-stop-note > span { display: block; margin-bottom: 0.15rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.ops-stop-note p { margin: 0; }
.ops-stop-note.is-office { background: var(--shell); border-left-color: var(--line-2); font-size: 0.875rem; }

.ops-stop-office { margin-top: 0.5rem; }
.ops-stop-office summary { padding: 0.4rem 0; color: var(--brand); font-size: 0.875rem; cursor: pointer; }
.ops-stop-office form { display: grid; gap: 0.5rem; }
.ops-stop-office textarea { margin: 0; }
.ops-stop-office .ops-btn { justify-self: start; }

.ops-stop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.ops-stop-actions form { display: grid; }
.ops-stop-actions form:only-child { grid-column: 1 / -1; }
.ops-btn-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.ops-btn-done:hover:not(:disabled) { background: #175636; border-color: #175636; }

/* --- Payments taken by hand ------------------------------------------------- */

.ops-pay { display: inline-block; margin-top: 0.2rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--shell); color: var(--ink-3); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.ops-pay-to_invoice, .ops-pay-to_deposit { background: #fff4e0; color: #7a4a10; }
.ops-pay-invoiced { background: #eaf0f5; color: #2d4a63; }
.ops-pay-settled { background: #e8f3ed; color: #145033; }
.ops-pay-now { margin: 0.25rem 0 0.75rem; }
.ops-pay-now .ops-pay { font-size: 0.8125rem; padding: 0.2rem 0.65rem; }
.ops-pay-form { margin-top: 0.75rem; }
.ops-pay-undo { margin-top: 0.6rem; }
.ops-pay-step { margin-top: 0.4rem; }

/* Route card: a payment the crew collects at the job. The only payment the route shows. */
.ops-collect { margin: 0.75rem 0 0; padding: 0.7rem 0.8rem 0.8rem; border: 1px solid #f0d39c; border-left: 4px solid #e0a23a; border-radius: 8px; background: #fff8ea; }
.ops-collect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0; color: #7a4a10; }
.ops-collect-head strong { font-size: 1rem; }
.ops-collect-head span { color: var(--ink); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ops-collect-sub { margin: 0.1rem 0 0.55rem; color: #7a4a10; font-size: 0.8125rem; }
.ops-collect-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.ops-collect-btns form { display: grid; margin: 0; }
.ops-collect-btns .ops-btn { justify-content: center; min-height: 2.75rem; font-size: 1rem; }

/* Dashboard: what's left to invoice or deposit. */
.ops-paydue { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.ops-paydue-item { display: grid; gap: 0.1rem; padding: 0.9rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-2); text-decoration: none; }
.ops-paydue-item:hover { border-color: var(--line-2); }
.ops-paydue-item.is-due { box-shadow: inset 4px 0 0 #e0a23a; }
.ops-paydue-n { color: var(--ink); font-size: 1.5rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ops-paydue-item:not(.is-due) .ops-paydue-n { color: var(--ink-3); }
.ops-paydue-l { color: var(--ink); font-size: 0.875rem; font-weight: 500; }
.ops-paydue-v { color: var(--ink-3); font-size: 0.75rem; }
.ops-paydue-clear { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0; color: var(--ink-3); font-size: 0.875rem; }
.ops-paydue-clear .ops-dot { flex: none; margin-top: 0; }
.ops-block { display: block; margin-top: 0.35rem; }

/* New booking: one column of short panels, address first. */
.ops-newb { max-width: 44rem; }
.ops-newb .ops-panel { display: grid; gap: 0.9rem; }
.ops-newb .ops-panel h2 { margin: 0; }
.ops-newb p { margin: 0; }
.ops-newb .ops-hint { font-weight: 400; }
.ops-newb-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ops-field .ops-hint { margin-top: 0.35rem; }
.ops-suggest-wrap { position: relative; }
.ops-suggest { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 18rem; overflow-y: auto; margin: 0; padding: 0.3rem; list-style: none; background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 30px rgba(28, 26, 25, 0.16); }
.ops-suggest li { padding: 0.55rem 0.65rem; border-radius: 8px; cursor: pointer; }
.ops-suggest li[aria-selected="true"], .ops-suggest li:hover { background: var(--brand-tint); }
.ops-suggest .s-main { display: block; color: var(--ink); }
.ops-suggest .s-sub { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.ops-suggest .is-empty { color: var(--ink-3); cursor: default; }
.ops-suggest .is-empty:hover { background: none; }
.ops-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.ops-q legend { margin-bottom: 0.4rem; padding: 0; color: var(--ink); font-size: 0.875rem; font-weight: 500; }
.ops-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ops-choice { position: relative; margin: 0; font-weight: 400; }
.ops-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ops-choice span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.05rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; }
.ops-choice input:checked + span { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.ops-choice input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ops-newb-price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--shell); color: var(--ink-3); font-size: 0.875rem; }
.ops-newb-price strong { color: var(--ink); font-size: 1.125rem; }
.ops-newb .ops-money input { max-width: 9rem; }

/* --- Phones ------------------------------------------------------------- */

@media (max-width: 48rem) {
  /* The menu sits behind a button that always names the page you're on. It
     opens as a panel over the page, with the current page ticked. */
  .ops-head { position: relative; z-index: 40; }
  .ops-head-in { gap: 0.75rem; min-height: 3.5rem; padding: 0.4rem 1rem; }
  .ops-brand { flex: 1; min-width: 0; }
  .js .ops-menu-btn { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 62%; min-height: 2.75rem; padding: 0 1rem 0 0.8rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
  .ops-menu-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .ops-menu-btn svg { flex: none; color: var(--brand); }
  .ops-menu-here { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ops-menu-close { display: none; }
  .ops-head.is-open .ops-menu-btn { border-color: #e8d2d8; background: var(--brand-tint); }
  .ops-head.is-open .ops-menu-open { display: none; }
  .ops-head.is-open .ops-menu-close { display: block; }

  .js .ops-menu { display: none; }
  .js .ops-head.is-open .ops-menu {
    display: block; position: absolute; top: calc(100% - 0.35rem); right: 0.75rem; left: 0.75rem;
    padding: 0.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(28, 26, 25, 0.2);
  }
  .ops-nav { display: grid; gap: 0.1rem; }
  .ops-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0 0.85rem; border-radius: 10px; font-size: 1rem; }
  .ops-nav a.is-current { font-weight: 600; }
  .ops-nav-check { display: block; }
  .ops-logout { margin: 0.3rem 0 0; padding-top: 0.3rem; border-top: 1px solid var(--line); }
  .ops-logout button { width: 100%; min-height: 3rem; padding: 0 0.85rem; border: 0; border-radius: 10px; font-size: 1rem; text-align: left; }
  .ops-logout button:hover { background: var(--shell); }
  /* Without JavaScript the pages are simply listed under the header. */
  html:not(.js) .ops-head-in { flex-wrap: wrap; }
  html:not(.js) .ops-menu { display: block; flex: 1 0 100%; padding-bottom: 0.5rem; }

  .ops-main { padding: 1rem 1rem 4rem; }
  .ops-h1 { font-size: 1.3125rem; }
  .ops-h2 { margin-top: 1.5rem; }
  .ops-panel { padding: 1rem; }

  /* 16px stops iOS Safari zooming the page when a field is tapped. */
  input[type=text], input[type=password], input[type=number], input[type=time], input[type=date],
  input[type=search], input[type=email], input[type=tel], select, textarea { font-size: 16px; }
  .ops-btn { min-height: 2.5rem; }
  .ops-btn-sm { min-height: 2.25rem; }

  .ops-stats { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .ops-stat-fill { grid-column: 1 / -1; }

  .ops-zfill-row {
    grid-template-columns: minmax(0, 1fr) auto 0.5rem;
    grid-template-areas: "name value chev" "meter meter chev" "booked left chev";
    gap: 0.45rem 0.75rem; padding: 0.85rem 0.9rem;
  }

  /* Time slots: each window is two short lines instead of a card.
     Date and time with the Live switch; then booked and left, openings and Delete. */
  .ops-slots, .ops-slots tbody { display: block; }
  .ops-slots thead { display: none; }
  .ops-slots tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "when when when live" "booked left cap del" "note note note note"; align-items: center; gap: 0.2rem 0.5rem; padding: 0.55rem 0.75rem 0.55rem 0.9rem; border-bottom: 1px solid var(--line); }
  .ops-slots tbody tr:last-child { border-bottom: 0; }
  .ops-slots td { display: block; padding: 0; border: 0; text-align: left; white-space: nowrap; }
  .ops-slots td.ops-slot-dow { display: none; }
  .ops-slots .ops-unit, .ops-slot-day { display: inline; }
  .ops-slot-day { color: var(--ink-3); font-weight: 500; }
  .ops-slot-when { grid-area: when; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
  .ops-slot-when .ops-unit { color: var(--ink-3); font-weight: 400; }
  .ops-slot-cap { grid-area: cap; }
  .ops-slot-booked { grid-area: booked; font-size: 0.875rem; }
  .ops-slot-left { grid-area: left; overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; color: var(--ink-3); }
  .ops-slot-left::before { content: "\00b7\00a0"; }
  .ops-slot-live { grid-area: live; justify-self: end; }
  .ops-slot-live .ops-unit { display: none; }
  .ops-slot-del { grid-area: del; width: auto; }
  .ops-slots td.ops-note { grid-area: note; white-space: normal; }
  .ops-slots td.ops-note:empty { display: none; }
  .ops-slots .ops-cap { width: 4.25rem; min-height: 2.5rem; }
  .ops-del { justify-content: center; width: 2.5rem; min-height: 2.5rem; padding: 0; }
  .ops-del-text { display: none; }
  .ops-stat { padding: 0.75rem; }
  .ops-stat-n { font-size: 1.25rem; }

  .ops-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .ops-filters select, .ops-filters input, .ops-search input { min-width: 0; }
  .ops-filters .ops-search, .ops-filters .ops-sort { grid-column: 1 / -1; }
  .ops-filters .ops-btn { justify-content: center; }

  .ops-dl { grid-template-columns: 1fr; gap: 0; }
  .ops-dl dt { padding-top: 0.55rem; }
  .ops-form-pair { grid-template-columns: 5rem minmax(0, 1fr); }
  .ops-sticky-save .ops-btn { width: 100%; justify-content: center; }
  .ops-inline-form input { max-width: none !important; }

  .ops-map { height: 55vh; min-height: 20rem; }
  .ops-map-bar { flex-wrap: wrap; }
  .ops-zone-save label { flex: 1 1 12rem; }
  .ops-zone-save input[type=text] { width: 100%; }
  .ops-test-form { flex-wrap: wrap; }
  .ops-test-form input { flex: 1 1 12rem; }
  .ops-icon-btn { width: 2.25rem; height: 2.25rem; }
  .ops-zone-tools { margin-left: 0; }

  .ops-cap { width: 5.5rem; }

  /* Tables marked ops-cards become one card per row: the title cell on top,
     every other cell as "label ... value". */
  .ops-cards, .ops-cards tbody, .ops-cards tfoot { display: block; }
  .ops-cards { border: 0; background: none; }
  .ops-cards thead { display: none; }
  .ops-cards tr { display: flex; flex-direction: column; margin-bottom: 0.6rem; padding: 0.35rem 0.85rem 0.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
  .ops-cards td, .ops-cards th { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.3rem 0; border: 0; text-align: right; white-space: normal; }
  .ops-cards td[data-label]::before { content: attr(data-label); flex: none; font-size: 0.75rem; color: var(--ink-3); text-align: left; }
  .ops-cards .ops-card-title { order: -1; display: block; margin-bottom: 0.2rem; padding: 0.4rem 0 0.5rem; border-bottom: 1px solid var(--line); font-size: 0.9375rem; text-align: left; }
  .ops-cards .ops-card-block { display: block; text-align: left; }
  .ops-cards .ops-card-block::before { display: block; margin-bottom: 0.1rem; }
  .ops-cards .ops-card-end { justify-content: flex-end; }
  .ops-cards td.ops-note:empty { display: none; }
  .ops-cards tr.ops-flagged { border-color: #f2c4c0; background: #fdecea; }
  .ops-cards tr.ops-flagged td { display: block; text-align: left; background: none; }
  .ops-cards tr.is-over { background: #fdecea; }
  .ops-cards tfoot th, .ops-cards tfoot td { background: none; border-top: 0; }
  .ops-scroll:has(> .ops-cards) { overflow-x: visible; }

  /* The calendar becomes a list of the days that have windows. */
  .ops-cal { display: block; background: none; border: 0; }
  .ops-cal-dow, .ops-cal-day:not(.has-windows), .ops-cal-day.is-other { display: none; }
  .ops-cal-day { min-height: 0; margin-bottom: 0.5rem; padding: 0.6rem 0.75rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
  .ops-cal-date { font-size: 0.9375rem; }
  .ops-cal-wd { display: inline; font-weight: 600; color: var(--ink); }
  .ops-cal-n { font-weight: 600; color: var(--ink); }
  .ops-cal-day.is-today .ops-cal-n { min-width: 0; padding: 0 0.4rem; }
  .ops-cal-route { font-size: 0.875rem; }
  .ops-cal-slot { font-size: 0.875rem; }
  .ops-cal-slot > summary { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 0.6rem; padding: 0.45rem 0.6rem; }
  .ops-cal-zone { grid-column: 1; grid-row: 1; }
  .ops-cal-time { grid-column: 2; grid-row: 1; }
  .ops-cal-count { grid-column: 3; grid-row: 1; }
  .ops-cal-fill { grid-column: 1 / -1; }
  /* On a phone a window's bookings open underneath it instead of floating. */
  .ops-cal-pop { position: static; width: auto; min-width: 0; max-width: none; max-height: none; margin: 0.2rem 0.4rem 0.45rem; box-shadow: none; }

  .ops-win-title { font-size: 1.1875rem; }
  .ops-seg-btn { padding: 0.35rem 0.6rem; font-size: 0.875rem; }
  .ops-route-mapview { height: 60vh; min-height: 18rem; }

  .ops-paydue { grid-template-columns: 1fr; gap: 0.5rem; }
  .ops-paydue-item { grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.6rem; padding: 0.75rem 0.9rem; }
  .ops-paydue-n { font-size: 1.25rem; }
  .ops-newb-2 { grid-template-columns: 1fr; }
  .ops-newb-submit { width: 100%; justify-content: center; min-height: 3rem; font-size: 1rem; }
  .ops-titlebar .ops-btn-primary { margin-bottom: 0.75rem; }
}

/* --- Time slots board: a row per week, a column per zone ------------------- */

.ops-slots-titlebar { align-items: center; }
.ops-slots-titlebar .ops-h1 { margin: 0; }

.ops-board { position: relative; }
.ops-board.is-saving { cursor: progress; }
.ops-board.is-dragging, .ops-board.is-dragging * { cursor: grabbing !important; }

.ops-bd-table {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 0.875rem;
}
.ops-bd-table th, .ops-bd-table td { padding: 0.45rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.ops-bd-table tr > :last-child { border-right: 0; }
.ops-bd-table tbody tr:last-child > * { border-bottom: 0; }
.ops-bd-table thead th { padding: 0.6rem 0.55rem; background: var(--shell); color: var(--ink); font-size: 0.8125rem; font-weight: 600; vertical-align: bottom; }
.ops-bd-corner { width: 7.25rem; }
.ops-bd-zname { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-bd-zname .ops-swatch { flex: none; margin: 0; }
.ops-bd-towns { display: block; margin-top: 0.1rem; color: var(--ink-3); font-size: 0.75rem; font-weight: 400; line-height: 1.3; overflow-wrap: break-word; }

.ops-bd-weekhead { background: var(--shell); color: var(--ink); }
.ops-bd-week-label { display: block; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.ops-bd-week-n { display: block; color: var(--ink-3); font-size: 0.75rem; font-weight: 400; }
.ops-bd-week.is-past .ops-bd-weekhead { color: var(--ink-3); }
.ops-bd-cell { transition: background-color 0.12s; }
.ops-bd-cell.is-drop { background: var(--brand-tint); box-shadow: inset 0 0 0 2px var(--brand); }
.ops-bd-cell.is-drop-bad { background: #fdecea; box-shadow: inset 0 0 0 2px #e3a19b; }
.ops-bd-cellzone { display: none; }

.ops-bd-chip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.35rem; align-items: baseline;
  width: 100%; margin: 0 0 0.3rem; padding: 0.3rem 0.45rem 0.32rem 0.5rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--zone, var(--brand)); border-radius: 5px;
  font: inherit; text-align: left; line-height: 1.3; cursor: grab;
  box-shadow: 0 1px 1px rgba(28, 26, 25, 0.04);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.12s, border-color 0.12s, opacity 0.12s;
}
.ops-bd-chip:hover { border-color: var(--line-2); border-left-color: var(--zone, var(--brand)); box-shadow: 0 2px 8px rgba(28, 26, 25, 0.1); }
.ops-bd-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ops-bd-chip.is-locked { cursor: pointer; }
.ops-bd-chip-day { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 600; }
.ops-bd-chip-n { color: var(--ink-3); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ops-bd-chip-time { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 0.78rem; }
.ops-bd-chip-tag { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ops-bd-chip.is-hidden { background: var(--shell); border-style: dashed; border-left-style: solid; color: var(--ink-3); }
.ops-bd-chip.is-hidden .ops-bd-chip-time { color: var(--ink-3); }
.ops-bd-chip.is-full .ops-bd-chip-n, .ops-bd-chip.is-over .ops-bd-chip-n { color: var(--bad); font-weight: 600; }
.ops-bd-chip.is-over { background: #fdecea; border-color: #f2c4c0; border-left-color: var(--zone, var(--brand)); }
.ops-bd-chip.is-past { opacity: 0.6; }
.ops-bd-chip.is-lifted { opacity: 0.3; }
.ops-bd-chip.is-new { animation: ops-bd-new 1.4s ease-out; }
@keyframes ops-bd-new { from { box-shadow: 0 0 0 3px rgba(110, 31, 51, 0.35); } to { box-shadow: 0 0 0 3px rgba(110, 31, 51, 0); } }
.ops-bd-ghost { position: fixed; top: 0; left: 0; z-index: 60; margin: 0; pointer-events: none; box-shadow: 0 14px 30px rgba(28, 26, 25, 0.24); }

.ops-bd-plus {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 1.75rem; padding: 0;
  background: none; color: var(--line-2); border: 1px dashed transparent; border-radius: 5px; font: inherit; cursor: pointer;
}
.ops-bd-week:hover .ops-bd-plus, .ops-bd-plus:focus-visible { border-color: var(--line-2); color: var(--ink-3); }
.ops-bd-plus:hover { background: var(--brand-tint); border-color: var(--brand) !important; color: var(--brand) !important; }
.ops-bd-plus:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (hover: none) { .ops-bd-plus { border-color: var(--line); color: var(--ink-3); } }
.ops-board.is-dragging .ops-bd-plus { visibility: hidden; }

.ops-bd-more { display: flex; justify-content: center; margin: 0.4rem 0; }
.ops-bd-more .ops-btn { color: var(--ink-3); border-color: transparent; }
.ops-bd-more .ops-btn:hover { color: var(--ink); border-color: var(--line-2); }

.ops-bd-start { padding: 1.5rem; background: var(--paper); border: 1px dashed var(--line-2); border-radius: 8px; }
.ops-bd-start-lead { margin: 0 0 0.9rem; color: var(--ink-2); }
.ops-bd-start-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.ops-bd-start-row input { width: auto; }
/* The shared input styles leave out date boxes on a computer; the board's match its other fields. */
.ops-board input[type=date], .ops-bd-pop input[type=date] {
  font: inherit; font-size: 0.9375rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 0.4rem 0.6rem; width: 100%; margin-top: 0.3rem;
}
.ops-bd-start-row input[type=date] { width: auto; }
.ops-bd-pop input:disabled, .ops-bd-pop select:disabled { background: var(--shell); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }

/* The popover: beside what was clicked on a computer, a sheet from the bottom on a phone. */
.ops-bd-pop {
  position: fixed; inset: auto; margin: 0; padding: 0;
  width: min(21rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(28, 26, 25, 0.2);
}
.ops-bd-pop::backdrop { background: rgba(28, 26, 25, 0.08); }
.ops-bd-pop-in { display: grid; gap: 0.8rem; padding: 1rem; }
.ops-bd-pop-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.55rem; }
.ops-bd-pop-sw { margin: 0.4rem 0 0; }
.ops-bd-pop-title { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.ops-bd-pop-sub { color: var(--ink-3); font-size: 0.8125rem; }
.ops-bd-x { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: -0.3rem -0.4rem 0 0; padding: 0; background: none; color: var(--ink-3); border: 0; border-radius: 6px; cursor: pointer; }
.ops-bd-x:hover { background: var(--shell); color: var(--ink); }
.ops-bd-pop-lock, .ops-bd-pop-err { margin: 0; padding: 0.5rem 0.65rem; border-radius: 6px; font-size: 0.8125rem; }
.ops-bd-pop-lock { background: var(--shell); }
.ops-bd-pop-err { background: #fdecea; color: #8c1d18; }
.ops-bd-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ops-bd-fieldset legend { padding: 0; color: var(--ink); font-size: 0.875rem; font-weight: 500; }
.ops-bd-seg { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.ops-bd-tog { position: relative; margin: 0; font-weight: 500; }
.ops-bd-tog input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ops-bd-tog span { display: block; padding: 0.4rem 0.65rem; background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; font-size: 0.8125rem; line-height: 1.25; text-align: center; }
.ops-bd-tog small { display: block; font-size: 0.6875rem; font-weight: 400; opacity: 0.85; }
.ops-bd-tog input:checked + span { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }
.ops-bd-tog input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.ops-bd-tog input:disabled { cursor: not-allowed; }
.ops-bd-tog input:disabled + span { opacity: 0.5; }
.ops-bd-tog.is-past span { color: var(--ink-3); }
.ops-bd-tog.has-slots span { box-shadow: inset 0 -2px 0 var(--line-2); }
.ops-bd-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin-top: 0.3rem; }
.ops-bd-days .ops-bd-tog span { padding: 0.35rem 0; font-size: 0.75rem; }
.ops-bd-custom { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; }
.ops-bd-custom input { margin: 0; }
.ops-bd-pair { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.75rem; }
.ops-bd-live { margin-bottom: 0.45rem; }
.ops-bd-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.15rem; }
.ops-bd-pop-foot .ops-btn-primary { margin-left: auto; }

.ops-bd-toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 70; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.9rem; max-width: calc(100vw - 2rem); padding: 0.6rem 0.7rem 0.6rem 1rem;
  background: var(--ink); color: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); font-size: 0.875rem;
}
.ops-bd-toast.is-error { background: #8c1d18; }
.ops-bd-toast button { padding: 0.25rem 0.65rem; background: none; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
.ops-bd-toast button:hover { background: rgba(255, 255, 255, 0.12); }

/* Phones: each week is a card, with a line per zone. */
@media (max-width: 48rem) {
  .ops-bd-table, .ops-bd-table tbody, .ops-bd-table tr { display: block; }
  .ops-bd-table { background: none; border: 0; border-radius: 0; overflow: visible; }
  .ops-bd-table thead { display: none; }
  .ops-bd-week { margin-bottom: 0.75rem; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
  .ops-bd-table tbody tr.ops-bd-week > * { border-right: 0; border-bottom: 1px solid var(--line); }
  .ops-bd-table tbody tr.ops-bd-week > :last-child { border-bottom: 0; }
  .ops-bd-weekhead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.8rem; }
  .ops-bd-week-label { font-size: 0.9375rem; }
  .ops-bd-cell { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 2.5rem; align-items: start; gap: 0.4rem; padding: 0.4rem 0.5rem 0.4rem 0.8rem; }
  .ops-bd-cellzone { display: flex; align-items: center; gap: 0.35rem; min-width: 0; padding-top: 0.55rem; color: var(--ink); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
  .ops-bd-cellzone .ops-swatch { flex: none; margin: 0; }
  .ops-bd-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; }
  .ops-bd-chip { width: auto; min-width: 7rem; margin: 0; padding: 0.4rem 0.55rem; }
  .ops-bd-plus { width: 2.5rem; min-height: 2.5rem; }
  .ops-bd-pop { top: auto !important; right: 0; bottom: 0; left: 0 !important; width: 100%; max-width: none; max-height: 88vh; border-radius: 16px 16px 0 0; }
  .ops-bd-pop::backdrop { background: rgba(28, 26, 25, 0.3); }
  .ops-bd-pop-in { padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .ops-bd-tog span { padding: 0.55rem 0.7rem; }
  .ops-bd-days .ops-bd-tog span { padding: 0.45rem 0; }
  .ops-bd-toast { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}