/* SPDX-License-Identifier: AGPL-3.0-only
   Kibo interface styles. Colours, fonts, sizes, corner rounding and
   spacing come from CSS variables set on the Appearance page (/theme.css).
   The values below are only fallbacks. */

:root {
  --c-primary: #1f5f8b; --c-on-primary: #fff; --c-accent: #d9731a;
  --c-background: #f3f5f7; --c-surface: #fff; --c-text: #1c2733; --c-muted: #566371;
  --c-border: #d3dae1; --c-sidebar: #16324a; --c-on-sidebar: #e9eff4;
  --c-success: #2e7d32; --c-warning: #a85d00; --c-danger: #c62828;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --fs: 15px; --radius: 6px; --space: 8px;
  --mono: ui-monospace, Consolas, "Courier New", monospace;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .05);
  --tint: color-mix(in srgb, var(--c-primary) 9%, var(--c-surface));
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--c-text); background: var(--c-background);
  line-height: 1.5;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 calc(var(--space) * 1.5); }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--space); }
a { color: var(--c-primary); }
code, .mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--c-muted); }
.small { font-size: .87rem; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--c-accent) 70%, transparent); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: calc(var(--space) * 2) 0; }
@media print { .sidebar, .topbar, .btn, .steps, .check { display: none !important; } .center-screen { min-height: 0; } }
.boot { padding: 3rem; text-align: center; color: var(--c-muted); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--c-sidebar); color: var(--c-on-sidebar);
  display: flex; flex-direction: column; padding: calc(var(--space) * 2) var(--space);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space); padding: 0 var(--space) calc(var(--space) * 2); }
.brand.no-name .name, .brand-sample.no-name .name { display: none; }
.brand img { max-height: 40px; max-width: 150px; object-fit: contain; }
.brand .name { font-weight: 700; font-size: 1.15rem; min-width: 0; overflow-wrap: break-word; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  color: inherit; text-decoration: none; padding: var(--space) calc(var(--space) * 1.5);
  border-radius: var(--radius); display: flex; align-items: center; gap: var(--space); opacity: .88;
}
.nav a:hover { background: color-mix(in srgb, var(--c-on-sidebar) 10%, transparent); opacity: 1; }
.nav a.active { background: color-mix(in srgb, var(--c-on-sidebar) 18%, transparent); opacity: 1; font-weight: 600; }
.nav .ico { width: 1.25em; text-align: center; }
.nav-sep { height: 1px; margin: var(--space) calc(var(--space) * 1.5); background: color-mix(in srgb, var(--c-on-sidebar) 20%, transparent); }
.sidebar .foot { margin-top: auto; padding: var(--space) calc(var(--space) * 1.5); font-size: .8rem; opacity: .7; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: calc(var(--space) * 1.5);
  padding: var(--space) calc(var(--space) * 3); background: var(--c-surface);
  border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 1.2rem; margin: 0; flex: 1; }
.topbar .who { text-align: end; line-height: 1.2; }
.topbar .who small { display: block; color: var(--c-muted); }
.btn.menu-btn { display: none; }
.content { padding: calc(var(--space) * 3); max-width: 1280px; width: 100%; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(80vw, 280px); z-index: 20;
    transform: translateX(-105%); transition: transform .2s;
  }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  .shell.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgb(0 0 0 / .35); }
  .btn.menu-btn { display: inline-flex; }
  .topbar { padding: var(--space) calc(var(--space) * 1.5); }
  .topbar .who { display: none; }
  .content { padding: calc(var(--space) * 1.5); }
}

/* ── Building blocks ────────────────────────────────────────────────────── */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: calc(var(--space) * 2.5); box-shadow: var(--shadow); margin-bottom: calc(var(--space) * 2);
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.grid { display: grid; gap: calc(var(--space) * 2); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.row { display: flex; gap: var(--space); align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.stack > * + * { margin-top: calc(var(--space) * 1.5); }

.btn {
  font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: calc(var(--space) * .8) calc(var(--space) * 1.8); min-height: 2.4rem;
  border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--tint); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.btn.primary:hover { background: color-mix(in srgb, var(--c-primary) 86%, #000); }
.btn.danger { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border)); }
.btn.danger:hover { background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface)); }
.btn.primary.danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.small { min-height: 2rem; padding: calc(var(--space) * .4) var(--space); font-size: .9rem; }
.sidebar .btn.ghost, .topbar .btn.primary.danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn.ghost { color: inherit; }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-weight: 600; font-size: .92rem; }
.field .hint { font-weight: 400; color: var(--c-muted); font-size: .84rem; }
input, select, textarea {
  font: inherit; color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: calc(var(--space) * .75) var(--space); min-height: 2.4rem; width: 100%;
}
textarea { min-height: 8rem; font-family: var(--mono); font-size: .9rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--c-primary); outline: 2px solid color-mix(in srgb, var(--c-primary) 30%, transparent); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--c-primary); }
input[type="color"] { padding: 2px; width: 3rem; height: 2.4rem; cursor: pointer; }
input[type="range"] { padding: 0; accent-color: var(--c-primary); }
.check { display: flex; align-items: center; gap: var(--space); cursor: pointer; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
form .actions { display: flex; gap: var(--space); justify-content: flex-end; flex-wrap: wrap; margin-top: calc(var(--space) * 2); }

.alert { padding: var(--space) calc(var(--space) * 1.5); border-radius: var(--radius); border: 1px solid; margin-bottom: calc(var(--space) * 1.5); }
.alert.info { background: var(--tint); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border)); }
.alert.ok { background: color-mix(in srgb, var(--c-success) 9%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-success) 40%, var(--c-border)); }
.alert.warn { background: color-mix(in srgb, var(--c-warning) 10%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-warning) 45%, var(--c-border)); }
.alert.err { background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border)); color: color-mix(in srgb, var(--c-danger) 75%, var(--c-text)); }

.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--tint); color: color-mix(in srgb, var(--c-primary) 80%, var(--c-text)); white-space: nowrap;
}
.badge.ok { background: color-mix(in srgb, var(--c-success) 14%, var(--c-surface)); color: color-mix(in srgb, var(--c-success) 85%, #000); }
.badge.warn { background: color-mix(in srgb, var(--c-warning) 15%, var(--c-surface)); color: color-mix(in srgb, var(--c-warning) 85%, #000); }
.badge.err { background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface)); color: color-mix(in srgb, var(--c-danger) 85%, #000); }
.badge.muted { background: color-mix(in srgb, var(--c-muted) 14%, var(--c-surface)); color: var(--c-muted); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: start; padding: var(--space) calc(var(--space) * 1.5); border-bottom: 1px solid var(--c-border); vertical-align: top; }
table.data th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); background: color-mix(in srgb, var(--c-background) 60%, var(--c-surface)); white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--tint); }
table.data td.details { font-family: var(--mono); font-size: .8rem; max-width: 380px; overflow-wrap: anywhere; color: var(--c-muted); }
.empty { padding: calc(var(--space) * 3); text-align: center; color: var(--c-muted); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space); align-items: flex-end; margin-bottom: calc(var(--space) * 1.5); }
.toolbar .field { min-width: 160px; flex: 0 1 220px; }
.toolbar .grow { flex: 1 1 240px; }

.stat { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.stat:hover { background: var(--tint); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space) calc(var(--space) * 2); }
.stat .num { font-size: 1.8rem; font-weight: 700; color: var(--c-primary); }

/* ── Login and set-up screens ───────────────────────────────────────────── */
.center-screen { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--space) * 2); }
.login-card { width: min(420px, 100%); }
.login-card .brand { justify-content: center; flex-direction: column; color: var(--c-text); padding-bottom: calc(var(--space) * 2); }
.login-card .brand img { max-height: 72px; max-width: 240px; }
.setup-card { width: min(560px, 100%); }
.qr { display: flex; gap: calc(var(--space) * 2); align-items: center; flex-wrap: wrap; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; }
.secret { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .08em; overflow-wrap: anywhere; background: var(--c-background); padding: 4px 8px; border-radius: var(--radius); }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; font-family: var(--mono); font-size: 1.05rem; }
.codes span { background: var(--c-background); padding: 4px 8px; border-radius: var(--radius); text-align: center; direction: ltr; }
.steps { display: flex; gap: var(--space); margin-bottom: calc(var(--space) * 2); flex-wrap: wrap; }
.steps .badge.current { background: var(--c-primary); color: var(--c-on-primary); }

/* ── Dialogs and side panels ────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgb(10 20 30 / .45); z-index: 30; display: flex; justify-content: center; align-items: flex-start; padding: 6vh calc(var(--space) * 2); overflow-y: auto; }
.overlay.drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.dialog { background: var(--c-surface); border-radius: var(--radius); width: min(520px, 100%); padding: calc(var(--space) * 3); box-shadow: 0 10px 40px rgb(0 0 0 / .25); }
.drawer .dialog { width: min(560px, 100%); border-radius: 0; min-height: 100%; overflow-y: auto; }
/* Narrow panel: let headers wrap and tighten cells so tables fit without sideways scrolling. */
.drawer table.data th { white-space: normal; }
.drawer table.data th, .drawer table.data td { padding: calc(var(--space) * .75) var(--space); }
.dialog-head { display: flex; align-items: center; gap: var(--space); margin-bottom: calc(var(--space) * 2); }
.dialog-head h2 { margin: 0; flex: 1; }
.toast-host { position: fixed; inset-block-end: calc(var(--space) * 2); inset-inline-end: calc(var(--space) * 2); z-index: 40; display: flex; flex-direction: column; gap: var(--space); }
.toast { background: var(--c-text); color: var(--c-surface); padding: var(--space) calc(var(--space) * 2); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 360px; }
.toast.err { background: var(--c-danger); color: #fff; }
.copy-row { display: flex; gap: var(--space); align-items: center; }
.copy-row .secret { flex: 1; }

/* ── Appearance editor ──────────────────────────────────────────────────── */
.appearance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: calc(var(--space) * 2); align-items: start; }
@media (max-width: 1100px) { .appearance { grid-template-columns: 1fr; } }
.appearance .preview { position: sticky; top: 70px; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space) calc(var(--space) * 2); }
.color-field { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space); align-items: center; }
.color-field label, .color-field .hint { grid-column: 1 / -1; }
.color-field label { font-weight: 600; font-size: .9rem; }
.color-field input[type="text"] { font-family: var(--mono); text-transform: lowercase; }
.presets { display: flex; flex-wrap: wrap; gap: var(--space); }
.preset { display: flex; align-items: center; gap: var(--space); }
.swatches { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--c-border); }
.swatches i { width: 14px; height: 18px; display: block; }
.range-row { display: flex; gap: var(--space); align-items: center; }
.range-row output { min-width: 3.5em; text-align: end; font-variant-numeric: tabular-nums; }
.logo-box { display: flex; align-items: center; gap: calc(var(--space) * 2); flex-wrap: wrap; }
.logo-box .logo-preview { background: var(--c-sidebar); padding: var(--space); border-radius: var(--radius); min-width: 120px; min-height: 56px; display: grid; place-items: center; color: var(--c-on-sidebar); }
.logo-box .logo-preview img { max-height: 48px; max-width: 200px; }
.contrast td:last-child { white-space: nowrap; }
.mini-shell { display: grid; grid-template-columns: 90px 1fr; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-background); }
.mini-shell .mini-side { background: var(--c-sidebar); color: var(--c-on-sidebar); padding: var(--space); font-size: .8rem; display: flex; flex-direction: column; gap: 6px; }
.mini-shell .mini-side img { max-width: 70px; max-height: 28px; object-fit: contain; }
.mini-shell .mini-main { padding: var(--space); display: flex; flex-direction: column; gap: var(--space); min-width: 0; }
.mini-shell .card { padding: var(--space); margin: 0; }

/* ── Settings tabs ──────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--c-border); margin-bottom: calc(var(--space) * 2); scrollbar-width: thin; }
.tabs a { padding: var(--space) calc(var(--space) * 1.5); text-decoration: none; color: var(--c-muted); white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--c-text); background: var(--tint); }
.tabs a.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: calc(var(--space) * 2); }
.settings-grid .wide { grid-column: 1 / -1; }
.setting-check { align-self: center; }
table.matrix td.center, table.matrix th { text-align: center; }
table.matrix td:first-child, table.matrix th:first-child { text-align: start; }
.duress-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--space); align-items: end; }
@media (max-width: 600px) { .duress-row { grid-template-columns: 1fr; } }
.field .hint.below { font-size: .8rem; }
.settings-grid { align-items: start; }
select.org-pick { min-width: min(100%, 340px); }

/* ── Fleet module ───────────────────────────────────────────────────────── */
.map { height: 380px; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-background); z-index: 0; }
.map-small { height: 240px; }
.map-card { padding: var(--space); }
.legend { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: calc(var(--space) * 2); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.validated { background: var(--c-primary); }
.dot.proposed { background: var(--c-warning); }
.greyed { color: var(--c-muted); text-decoration: line-through; }
input.upper { text-transform: uppercase; }
pre.sample { background: var(--c-background); padding: var(--space); border-radius: var(--radius); font-size: .82rem; overflow-x: auto; direction: ltr; text-align: left; }
details.doc-add summary { cursor: pointer; font-weight: 600; color: var(--c-primary); margin: var(--space) 0; }
.leaflet-container { font: inherit; }
.leaflet-container a { color: var(--c-primary); }

/* Damage diagram */
.vdiag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space); }
.vdiag-cell { margin: 0; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); padding: 4px; }
.vdiag-cell figcaption { font-size: .8rem; color: var(--c-muted); text-align: center; }
.vdiag-one { max-width: 420px; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 4px; }
.vdiag { display: block; width: 100%; height: auto; user-select: none; direction: ltr; } /* a physical drawing: never mirrored for right-to-left */
.vdiag.pick { cursor: crosshair; }
.vdiag .v-body { fill: var(--c-surface); stroke: var(--c-muted); stroke-width: 1.4; stroke-linejoin: round; }
.vdiag .v-under { fill: color-mix(in srgb, var(--c-muted) 8%, var(--c-surface)); stroke: var(--c-muted); stroke-width: 1.4; }
.vdiag .v-glass { fill: color-mix(in srgb, var(--c-primary) 14%, var(--c-surface)); stroke: var(--c-muted); stroke-width: 1; }
.vdiag .v-line { fill: none; stroke: var(--c-muted); stroke-width: 1; }
.vdiag .v-thick { fill: none; stroke: var(--c-muted); stroke-width: 3; stroke-linecap: round; }
.vdiag .v-tyre { fill: color-mix(in srgb, var(--c-text) 70%, var(--c-surface)); }
.vdiag .v-ring { fill: none; stroke: color-mix(in srgb, var(--c-text) 70%, var(--c-surface)); stroke-width: 6; }
.vdiag .v-hub { fill: var(--c-surface); stroke: var(--c-muted); stroke-width: 1; }
.vdiag .v-light { fill: color-mix(in srgb, var(--c-warning) 25%, var(--c-surface)); stroke: var(--c-muted); stroke-width: 1; }
.vdiag .v-text { font-size: 8px; fill: var(--c-muted); font-family: var(--font); }
.vdiag .v-arrow { fill: var(--c-muted); }
.dmark { cursor: pointer; }
.dmark circle { stroke: #fff; stroke-width: 1.5; }
.dmark text { font-size: 8.5px; font-weight: 700; fill: var(--sev-text, #fff); font-family: var(--font); pointer-events: none; }
.dmark:focus { outline: none; }
.dmark:focus circle, .dmark:hover circle { stroke: var(--c-text); stroke-width: 2; }
.sev-minor { --sev: #f2c230; --sev-text: #1c2733; }
.sev-moderate { --sev: var(--c-accent); }
.sev-major { --sev: var(--c-danger); }
.repaired { --sev: var(--c-muted); }
.dmark circle { fill: var(--sev); }
.dmark.repaired circle { fill: var(--c-surface); stroke: var(--c-muted); stroke-dasharray: 2 2; }
.dmark.repaired text { fill: var(--c-muted); }
.dot.sev-minor, .dot.sev-moderate, .dot.sev-major { background: var(--sev); }
.dnum { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--sev); color: var(--sev-text, #fff); font-weight: 700; font-size: .8rem; }
.dnum.repaired { background: none; border: 1px dashed var(--c-muted); color: var(--c-muted); }
.title-badge { margin-inline-start: var(--space); vertical-align: middle; font-size: .78rem; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 22em; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space); }
.thumb { position: relative; }
.thumb-img { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-background); cursor: zoom-in; }
.thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-del { position: absolute; top: 4px; inset-inline-end: 4px; padding: 2px 4px; }
.photo-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: var(--radius); }
label.btn input[type=file] { display: none; }
@media (max-width: 420px) { .vdiag-grid { grid-template-columns: 1fr; } }
.dmark.reported circle { fill: var(--c-surface); stroke: var(--sev); stroke-width: 2.6; stroke-dasharray: 3 1.6; }
.dmark.reported text { fill: var(--c-text); }
.dnum.reported { background: var(--c-surface); border: 2px dashed var(--sev); color: var(--c-text); }
.dot.ring { background: var(--c-surface); border: 2px dashed var(--c-danger); width: 8px; height: 8px; }
.map-tiny { height: 160px; border-radius: var(--radius); }
.ok-text { color: var(--c-success); }

/* Security levels */
:root { --lvl-yellow: #f2c230; }
.badge.lvl { color: #fff; border: 0; }
.badge.lvl-green { background: var(--c-success); }
.badge.lvl-yellow { background: var(--lvl-yellow); color: #1c2733; }
.badge.lvl-orange { background: var(--c-accent); }
.badge.lvl-red { background: var(--c-danger); }
.dot.lvl-green { background: var(--c-success); }
.dot.lvl-yellow { background: var(--lvl-yellow); }
.dot.lvl-orange { background: var(--c-accent); }
.dot.lvl-red { background: var(--c-danger); }

/* Bookings */
.row.wrap { flex-wrap: wrap; }
.stops { gap: calc(var(--space) * .75); }
.stop-row { display: flex; align-items: flex-end; gap: var(--space); }
.stop-row .field { flex: 1; margin: 0; }
.stop-n, .stop-pin span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); font-weight: 700; font-size: .8rem; flex: none; }
.stop-n { margin-bottom: 8px; }
.stop-pin { background: none; border: 0; }
.stop-pin span { box-shadow: 0 0 0 2px #fff; }
.stop-list { margin: 0; padding-inline-start: 1.4em; }
.stop-list li { margin: 2px 0; }
.card.assign { border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border)); }
.pick-list { display: flex; flex-direction: column; gap: 2px; }
.pick { text-align: start; padding: 6px 10px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); cursor: pointer; font: inherit; }
.pick:hover, .pick:focus { background: var(--tint); }
.linkish { background: none; border: 0; padding: 0 2px; color: inherit; cursor: pointer; font: inherit; font-weight: 700; }

/* One-click answer page (from clearance emails) */
.act-page { max-width: 640px; margin: 2rem auto; padding: 0 16px; }
.act-summary { white-space: pre-wrap; font: inherit; font-size: .92rem; background: var(--c-background); padding: var(--space); border-radius: var(--radius); margin: 0; }