/* Mobile first. Every layout rule here starts from a phone and widens with min-width queries —
   most of the 6,000 drivers will only ever see this on a phone, in a yard, in daylight. */
:root {
  --navy: #13407a;
  --navy-dark: #0e3161;
  --yellow: #f6b40e;
  --ink: #10213a;
  --muted: #5b6b85;
  --line: #dde3ec;
  --bg: #f4f6f9;
  --card: #ffffff;
  --danger: #b4232a;
  --ok: #176b3a;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(16, 33, 58, .08), 0 6px 20px rgba(16, 33, 58, .06);
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute must win over a display rule set by a class — .btn sets inline-flex, and
   without this a hidden button stays on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Respect the notch/home indicator so nothing sits under the iOS gesture bar. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── Header ───────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar img { height: 34px; width: auto; display: block; background: #fff; border-radius: 6px; padding: 3px 6px; }
.topbar h1 { font-size: 1rem; margin: 0; font-weight: 600; flex: 1; min-width: 0; }
.topbar .who { font-size: .8rem; opacity: .85; display: block; font-weight: 400; }
.topbar a, .topbar button.link {
  color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600;
  background: rgba(255, 255, 255, .14); border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}

/* ── Layout ───────────────────────────────────────────── */
main { padding: 16px; max-width: 1100px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
.muted { color: var(--muted); font-size: .88rem; }

/* ── Bid band ─────────────────────────────────────────── */
/* Deliberately louder than anything else on the page: it is the one thing a driver is meant to do
   after reading the trips, and it competes with a list of documents for attention. */
.bid-band {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 16px;
  background: var(--navy); color: #fff; text-decoration: none;
  border-radius: var(--radius); box-shadow: var(--shadow);
  border-left: 6px solid var(--yellow);
}
.bid-band:hover, .bid-band:focus-visible { background: var(--navy-dark); }
.bid-label { font-size: 1.1rem; font-weight: 700; }
.bid-label::after { content: ' \2197'; }
.bid-sub { font-size: .84rem; opacity: .85; }

/* ── Login ────────────────────────────────────────────── */
.login-wrap { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 18px; }
.login-wrap .logo { width: min(260px, 70vw); }
.login-card { width: 100%; max-width: 26rem; }

/* ── Form controls ────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 6px; }
input, select, button, textarea { font: inherit; }
input[type=text], input[type=password], input[type=search], input[type=date], input[type=time], input[type=month], select {
  width: 100%;
  /* 16px minimum: anything smaller makes iOS Safari zoom the whole page on focus. */
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  margin-bottom: 14px;
  min-height: 48px;
}
input:focus, select:focus, button:focus-visible { outline: 3px solid rgba(19, 64, 122, .35); outline-offset: 1px; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;           /* thumb-sized tap target, with gloves on */
  padding: 12px 18px;
  border: 0; border-radius: 10px;
  background: var(--navy); color: #fff; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { background: var(--navy-dark); }
button:disabled { opacity: .55; cursor: progress; }
button.wide { width: 100%; }
button.ghost, .btn.ghost { background: #eef2f8; color: var(--navy); }
button.ghost:hover { background: #e2e9f4; }
button.danger { background: var(--danger); }
/* On a location row, Delete is outlined rather than solid: it repeats once per yard down the whole
   page, and solid red on every row makes the one action nobody wants the loudest thing on screen.
   It fills in on hover, so it still reads as destructive at the moment it could be clicked. The
   dialog's own Delete stays solid — that one IS the decision. Inset shadow, not a border, so the
   button does not change size. */
.loc-item button.danger {
  background: #fff; color: var(--danger);
  box-shadow: inset 0 0 0 1.5px var(--danger);
}
.loc-item button.danger:hover, .loc-item button.danger:focus-visible {
  background: var(--danger); color: #fff;
}
button.small, .btn.small { min-height: 40px; padding: 8px 12px; font-size: .88rem; }

.msg { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-size: .92rem; }
.msg.error { background: #fdecec; color: var(--danger); border: 1px solid #f5c6c6; }
.msg.ok { background: #e8f5ed; color: var(--ok); border: 1px solid #bfe3cd; }

/* ── File list ────────────────────────────────────────── */
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.file-icon { flex: none; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #fff; background: var(--muted); letter-spacing: .02em; }
.file-icon.pdf { background: #b4232a; }
.file-icon.doc { background: #1b5bbf; }
.file-icon.xls { background: #176b3a; }
.file-icon.img { background: #6d4aa8; }
.file-meta { flex: 1; min-width: 0; }
.file-meta .name { font-weight: 600; word-break: break-word; }
.file-meta .sub { font-size: .8rem; color: var(--muted); }
.file-actions { display: flex; gap: 8px; flex: none; }

/* Below ~480px the two buttons go under the name instead of squeezing it. */
@media (max-width: 480px) {
  .file-row { flex-wrap: wrap; }
  .file-actions { width: 100%; }
  .file-actions .btn { flex: 1; }
}

/* ── Viewer ───────────────────────────────────────────── */
.viewer { position: fixed; inset: 0; z-index: 50; background: #26303f; display: flex; flex-direction: column; }
.viewer[hidden] { display: none; }
.viewer-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--navy); color: #fff;
}
.viewer-bar .title { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.viewer-body canvas { display: block; width: 100%; height: auto; margin: 0 auto 12px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); border-radius: 4px; }
.viewer-body img.preview { display: block; max-width: 100%; margin: 0 auto; border-radius: 6px; background: #fff; }

/* Converted Word output. Width-capped for reading, and tables scroll instead of blowing out the page. */
.docx {
  background: #fff; color: var(--ink); max-width: 46rem; margin: 0 auto;
  padding: 22px 20px; border-radius: 8px; line-height: 1.65; overflow-wrap: break-word;
}
.docx h1, .docx h2, .docx h3 { line-height: 1.3; }
.docx img { max-width: 100%; height: auto; }
.docx table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.docx td, .docx th { border: 1px solid var(--line); padding: 7px 9px; text-align: left; }

/* ── Find in a PDF ─────────────────────────────────────── */
.viewer-find {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--navy-dark); color: #fff;
}
.viewer-find input[type=search] { flex: 1; min-width: 0; margin: 0; min-height: 40px; }
.viewer-find span { font-size: .85rem; opacity: .9; white-space: nowrap; }

/* The wrapper exists so the highlight boxes have something to position against — a canvas cannot
   hold children. The boxes are EMPTY divs: they mark where a word is without putting selectable
   text on the page, which would hand a driver copy-and-paste on a document they cannot download. */
.pdf-page { position: relative; margin: 0 auto 12px; width: 100%; }
.pdf-page canvas { margin: 0; }
.pdf-marks { position: absolute; inset: 0; pointer-events: none; }
.pdf-mark { position: absolute; background: rgba(246, 180, 14, .45); border-radius: 2px; }
.pdf-mark.on { background: rgba(246, 180, 14, .85); outline: 2px solid #b4232a; }

.spinner { text-align: center; color: #dbe3ee; padding: 36px 12px; }

/* ── Admin ────────────────────────────────────────────── */
.row { display: grid; gap: 12px; }
@media (min-width: 720px) { .row.two { grid-template-columns: 1fr 1fr; } }

.loc-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: #fff; }
.loc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The location name is an input that reads as plain text until it is hovered or focused — renaming is
   rare, so it must not shout, but it must not need a dialog either. 16px (inherited) keeps iOS from
   zooming the page when it takes focus. */
/* Name and state sit together on the left and the rest is pushed right (.pw below), so the state reads
   as part of the location rather than drifting to wherever the name happens to end. */
.loc-head .nm {
  font: inherit; font-weight: 700; color: inherit;
  flex: 0 1 15rem; min-width: 7rem; min-height: 44px;
  margin: 0; padding: 8px 10px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.loc-head .nm:hover { border-color: var(--line); }
.loc-head .nm:focus { background: #fff; border-color: var(--navy); outline: 2px solid rgba(19, 64, 122, .2); }
.state-pick {
  width: auto; min-width: 5.2rem; min-height: 40px;
  padding: 6px 8px; margin-bottom: 0; font-size: .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The region reads as words, not a code, so it gets room and the monospace of .state-pick off. */
.region-pick { min-width: 9rem; font-family: inherit; }

/* margin-left:auto eats the slack, so the password and the buttons line up down the page instead of
   following the name's width. On a phone the row wraps and the auto margin collapses to nothing. */
.loc-head .pw { margin-left: auto; }

/* A location with no files posted is the thing worth spotting, so that is the one that is coloured. */
.count { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.count.none { color: var(--danger); font-weight: 600; }
.pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f4f9; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; letter-spacing: .04em; }

/* The files panel sits inside the open location's row, so it reads as part of that yard rather
   than as a second card that happens to be about it. */
.file-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.dropzone { border: 2px dashed #b9c6d8; border-radius: 12px; padding: 22px 16px; text-align: center; color: var(--muted); background: #fbfcfe; }
.dropzone.over { border-color: var(--navy); background: #eef3fa; }

/* ── Confirm dialog ───────────────────────────────────── */
dialog {
  width: min(28rem, calc(100vw - 32px));
  padding: 20px;
  border: 0; border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(16, 33, 58, .55); }
dialog h3 { margin: 0 0 8px; font-size: 1.1rem; }
/* pre-line so a dialog body can show "old → new" on its own line without any markup in the text. */
dialog p { margin: 0 0 14px; color: var(--muted); font-size: .94rem; white-space: pre-line; }
dialog label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
dialog input { width: 100%; margin-bottom: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 480px) { .modal-actions button { flex: 1; } }

/* ── Who can administer what ───────────────────────────── */
.who { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 2px; }
.who li { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 9px; }
.who li:hover { background: #f4f6f9; }
/* Region colours, taken from the org chart so the two read as the same scheme. The section carries
   the colour as a custom property and the heading and discs inherit it, which means a new region is
   one line here and nothing in the JavaScript. The data attribute is the region name slugified. */
.who-sec { --region: var(--navy); }
.who-sec[data-region="gateway-region"]     { --region: #1b5bbf; }   /* blue */
.who-sec[data-region="great-lakes-region"] { --region: #1f7a3d; }   /* green */
.who-sec[data-region="mid-states-region"]  { --region: #7b4ea8; }   /* purple */
.who-sec[data-region="northwest-region"]   { --region: #8a6a3b; }   /* brown */
.who-sec + .who-sec { margin-top: 14px; }

/* Sticky so it stays reachable once the list is long enough to need it in the first place. */
.who-search {
  position: sticky; top: 0; z-index: 1;
  margin: 0 0 10px; min-height: 42px;
}

.who-disc {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--region, var(--navy)); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}
.who-name { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.who-mail { font-size: .82rem; color: var(--muted); text-decoration: none; word-break: break-all; }
a.who-mail:hover { color: var(--navy); text-decoration: underline; }
/* A bar in the region's colour, like the headings on the org chart it mirrors. */
.who-head {
  margin: 0 0 6px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: #fff;
  background: var(--region, var(--navy));
  padding: 7px 10px; border-radius: 7px;
}
/* The region, beside a location name: present but not competing with it. */
/* The region bar is the disclosure control: collapsing a region IS filtering to the others, which
   is why there is no separate region picker. */
.who-head { cursor: pointer; list-style: none; }
.who-head::-webkit-details-marker { display: none; }
.who-head::before { content: "▾"; margin-right: 8px; font-size: .8em; display: inline-block; }
.who-sec:not([open]) > .who-head::before { transform: rotate(-90deg); }

/* A location inside a region. The rule in the region colour is what ties it to the bar above. */
.who-grp { margin: 0 0 6px 2px; padding-left: 10px; border-left: 3px solid var(--region, var(--line)); }
.who-sub {
  margin: 8px 0 2px; font-size: .82rem; font-weight: 700;
  color: var(--region, var(--ink)); letter-spacing: .01em;
}

.who-head-sub { float: right; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
/* The list can outgrow a phone screen; the dialog scrolls rather than the page behind it. */
#modalRich { max-height: min(60vh, 30rem); overflow-y: auto; margin-bottom: 4px; }

/* ── Charters or Exceptions, on the sign-in page ──────── */
/* Two equal buttons side by side. The pressed one fills in, so which door the password below is for
   is never in doubt — the same password opens both. */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.choice button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* ── Exception sheet ──────────────────────────────────── */
main.narrow { max-width: 40rem; }
/* A label that wraps its field. Form controls inherit the label's bold through `font: inherit`,
   so the weight is put back here. */
.field > span { display: block; }
.field input, .field select { font-weight: 400; margin-top: 6px; }
/* Every field already carries its own space underneath; a row gap on top of it would make the
   fields that happen to share a row sit further apart than the ones that do not. */
.exc .row { row-gap: 0; }
.exc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.exc-head h2 { margin: 0; }
.sent-list { margin: 0 0 16px; padding-left: 1.2rem; }
.sent-list li { margin-bottom: 6px; }

/* The two doors on a location. A tick box, sized for a thumb, with its word beside it. */
.switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; font-size: .88rem; min-height: 40px; cursor: pointer; white-space: nowrap; }
.switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.switches { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin: 14px 0 0; display: flex; gap: 18px; flex-wrap: wrap; }
.switches legend { font-weight: 600; font-size: .9rem; padding: 0 6px; }

/* ── Exception sheets, admin ──────────────────────────── */
main.wide-page { max-width: 1500px; }
/* Filters and the add-employee form: fields in a row that wraps, the button level with the boxes. */
.filters { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
/* margin 0: a label carries 6px under it everywhere else, and here that sat every box 6px above the
   button beside it. */
.filters .field { flex: 1 1 11rem; margin: 0; }
/* One height for everything in the row. Left to themselves a month box, a text box, a dropdown and a
   button come out 52, 50, 49 and 48px, which puts their labels and edges on four different lines. */
.filters input, .filters select, .filters > button, .filters > .btn { height: 52px; }
.filters > button, .filters > .btn { margin-bottom: 14px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid { border-collapse: collapse; width: 100%; font-size: .88rem; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.grid td { white-space: nowrap; }
.grid th { background: #f1f4f9; white-space: nowrap; }
.grid tbody tr:hover { background: #f8fafc; }
/* The header is the sort control. It reads as a heading, not as one more navy button. */
.grid button.sort { all: unset; cursor: pointer; font-weight: 700; color: var(--ink); }
.grid button.sort:focus-visible { outline: 3px solid rgba(19, 64, 122, .35); outline-offset: 2px; }

/* ── Printing, on the driver page only ────────────────── */
/* Ctrl+P, the browser menu and "Save as PDF" are all the same thing to a browser: a print. The driver
   page prints a notice instead of the document, which also makes "Save as PDF" produce the notice.
   ponytail: this is a control, not DRM — it goes away if someone disables CSS, and no web page can see
   a screenshot or a phone camera. It stops the casual copy, which is what was asked for. */
@media print {
  body.no-print > * { display: none !important; }
  body.no-print::after {
    content: "This document is not available in print. Open it on the Driver Portal, or ask your location manager for a copy.";
    display: block;
    padding: 2rem;
    font: 16px/1.6 system-ui, sans-serif;
    color: #000;
  }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Exception options (admin): the sheet's questions as a tree ─────────── */
/* One screen: the topbar, a tool row, then the tree and its edit panel filling what is left.
   The site's buttons are 48px for gloved thumbs; this is a desk page with many small controls. */
body.xo-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.xo-page button, .xo-page .btn { min-height: 0; padding: 6px 12px; font-size: .85rem; border-radius: 8px; }
.xo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--card); border-bottom: 1px solid var(--line); }
.xo-grp { display: flex; align-items: center; gap: 4px; }
#zoomPct { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; font-size: .85rem; }
.xo-spacer { flex: 1; }
.xo-msg { margin: 8px 16px 0; }
.xo-main { flex: 1; display: flex; min-height: 0; }
.xo-view { flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: grab; touch-action: none;
  background-image: radial-gradient(#d3dae5 1px, transparent 1px); background-size: 22px 22px; }
.xo-view.panning { cursor: grabbing; }
.xo-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.xo-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.xo-edges path { fill: none; stroke: #9fb0c8; stroke-width: 2; }

.xo-node { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; box-shadow: var(--shadow); cursor: pointer; font-size: .88rem; line-height: 1.35; }
.xo-node:hover { border-color: var(--navy); }
.xo-node:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.xo-node.sel { outline: 3px solid var(--yellow); outline-offset: 1px; }
.xo-kick { font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  display: flex; gap: 6px; align-items: center; }
.xo-name { font-weight: 600; overflow-wrap: break-word; }
.xo-q { color: var(--muted); font-style: italic; margin-top: 2px; }
.xo-node .xo-add { margin-top: 6px; padding: 2px 8px; font-size: .75rem; }
.xo-node .xo-toggle { margin-left: auto; padding: 0 6px; font-size: .7rem; }
.k-root { width: 250px; background: var(--navy); color: #fff; border-color: var(--navy); }
.k-root .xo-kick { color: #c9d6ea; }
.k-root ol { margin: 6px 0 0; padding-left: 18px; }
.k-cat { width: 280px; border-left: 5px solid var(--navy); }
.k-reason, .k-more { width: 250px; }
.k-more { color: var(--muted); font-style: italic; }
.k-extra { width: 250px; background: #fff8e6; border-style: dashed; border-color: #e6c66d; }
.k-extra ul { margin: 2px 0 0; padding-left: 16px; }
.xo-tag { font-size: .65rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; text-transform: none; letter-spacing: 0; }
.xo-tag.new { background: #dff3e6; color: var(--ok); }
.xo-tag.changed { background: #e3ecfa; color: var(--navy); }
.xo-tag.warn { background: #fdecc8; color: #9a5b00; }
.xo-tag.follow { background: #fff1c7; color: #6b4b00; }

.xo-panel { width: 360px; max-width: 100%; background: var(--card); border-left: 1px solid var(--line);
  overflow-y: auto; padding: 16px; }
.xo-panel h2 { font-size: 1rem; margin: 2px 0 4px; overflow-wrap: break-word; }
.xo-panel h3 { font-size: .9rem; margin: 18px 0 6px; }
.xo-panel .field { margin-top: 12px; }
.xo-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.xo-warn { background: #fdecc8; color: #9a5b00; border-radius: 8px; padding: 8px 10px; margin-top: 12px; font-size: .85rem; }
.xo-list { padding-left: 18px; margin: 4px 0 0; font-size: .85rem; }
.xo-list li { margin: 2px 0; }
.xo-hist { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.xo-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xo-page button.xo-danger { background: #fff; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger); }
.xo-page button.xo-danger[data-armed], .xo-page button.xo-danger:hover { background: var(--danger); color: #fff; }

@media (max-width: 760px) {
  .xo-main { flex-direction: column; }
  .xo-panel { width: 100%; height: 45%; border-left: 0; border-top: 1px solid var(--line); }
}
.xo-qedit { border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px 10px; margin-top: 10px; }
.xo-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .85rem; }
.xo-check input { width: auto; margin: 0; }
.xo-page button.xo-link { background: none; color: var(--navy); padding: 0; min-height: 0; font-weight: 600; text-decoration: underline; }
.k-extra .xo-name { font-size: .8rem; }
.xo-panel .field input, .xo-panel .field select { width: 100%; }
.xo-panel .field textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
.xo-pick { display: block; color: var(--muted); font-size: .75rem; }

/* ── Exception sheets: the decision on each row ─────────── */
.grid td.decide { white-space: nowrap; }
.grid td.decide button { margin-right: 4px; }

/* ── Who has access: the full administrators' lookup and rules ── */
.who-lookup { margin-bottom: 14px; }
.who-lookup-row { display: flex; gap: 6px; align-items: center; }
.who-lookup-row .who-search { flex: 1; margin: 0; }
.who-lookup-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.who-lookup-list li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: .88rem; }
.who-verdict { font-weight: 600; color: var(--ok); margin-top: 4px; }
.who-verdict.none { color: var(--danger); }
.who-rules { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.who-rules .grid { margin: 6px 0; }
.who-stale { white-space: pre-line; background: #fdecc8; color: #7a4a00; border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }