/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.27_@playwright+test@1.63.0_@types+node@22.20.4_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.27_@playwright+test@1.63.0_@types+node@22.20.4_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * ⚠️ Bright white, at every OS theme setting — the same decision the marketing
 * site records. There is deliberately NO `prefers-color-scheme: dark` block:
 * a dark inversion was never approved, and an automatic one turns a clinical
 * form black on a patient's phone at 06:00.
 */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #000000;
  --body: #3d3d3d;
  --muted: #6e6e6e;
  --line: #e3e3e3;
  --blue: #0a5fc2;
  --red: #c42a3e;
  --green: #075e54;
  --amber: #8a5a00;
  --maxw: 44rem;
  --f: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* , *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--f); font-size: 17px; line-height: 1.55;
}
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 8px; inset-block-start: 8px; background: #fff; padding: 8px; z-index: 10; }
.topbar {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; -webkit-border-after: 1px solid var(--line); border-block-end: 1px solid var(--line);
}
.brand { font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.topbar-note { color: var(--muted); font-size: .9rem; }
main { max-width: var(--maxw); margin-inline: auto; padding: 24px 20px 64px; }
h1 { color: var(--ink); font-size: clamp(1.5rem, 4vw, 2rem); margin-block: 0 8px; }
h2 { color: var(--ink); font-size: 1.15rem; margin-block: 28px 8px; }
.lead { color: var(--muted); margin-block: 0 24px; }
.steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 24px; flex-wrap: wrap; }
.steps li {
  font-size: .78rem; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.steps li[aria-current='step'] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.steps li[data-done='true'] { border-color: var(--green); color: var(--green); }
.field { -webkit-margin-after: 16px; margin-block-end: 16px; }
label { display: block; font-weight: 600; color: var(--ink); -webkit-margin-after: 4px; margin-block-end: 4px; }
.opt { font-weight: 400; color: var(--muted); font-size: .85rem; }
input, select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px;
}
.hint { color: var(--muted); font-size: .85rem; -webkit-margin-before: 4px; margin-block-start: 4px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 8px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; min-height: 48px;
}
.btn-secondary { background: #fff; color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 12px; flex-wrap: wrap; -webkit-margin-before: 24px; margin-block-start: 24px; }
.grid2 { display: grid; grid-gap: 12px; gap: 12px; }
@media (min-width: 620px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.panel { border: 1px solid var(--line); border-radius: 12px; padding: 16px; -webkit-margin-after: 16px; margin-block-end: 16px; }
.notice { -webkit-border-start: 4px solid var(--blue); border-inline-start: 4px solid var(--blue); background: #f5f9ff; padding: 12px 14px; border-radius: 8px; }
.notice-warn { border-inline-start-color: var(--amber); background: #fff9ec; }
.notice-error { border-inline-start-color: var(--red); background: #fff5f6; }
.notice-ok { border-inline-start-color: var(--green); background: #f2fbf8; }
.price { display: flex; justify-content: space-between; padding: 6px 0; -webkit-border-after: 1px dashed var(--line); border-block-end: 1px dashed var(--line); }
.price:last-child { border: 0; font-weight: 700; color: var(--ink); }
.footer { -webkit-border-before: 1px solid var(--line); border-block-start: 1px solid var(--line); padding: 16px 20px; color: var(--muted); font-size: .85rem; }
.err { color: var(--red); font-size: .9rem; -webkit-margin-before: 4px; margin-block-start: 4px; }

/* ── admin shell ─────────────────────────────────────────────────────────── */
:root { --maxw: 100%; }
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }
.sidebar { -webkit-border-end: 1px solid var(--line); border-inline-end: 1px solid var(--line); padding: 16px 12px; background: #fff; }
.sidebar h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 16px 8px 6px; }
.navlink { display: block; padding: 8px 10px; border-radius: 7px; text-decoration: none;
  color: var(--body); font-size: .93rem; }
.navlink:hover { background: #f5f7fa; }
.navlink[aria-current='page'] { background: var(--ink); color: #fff; font-weight: 600; }
.navlink[data-locked='true'] { opacity: .45; cursor: not-allowed; }
.content { padding: 20px 24px 64px; max-width: 1200px; }
main { max-width: none; margin: 0; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: start; padding: 9px 10px; -webkit-border-after: 1px solid var(--line); border-block-end: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .82rem; }
tr[data-selected='true'] td { background: #eef4ff; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem;
  border: 1px solid var(--line); }
.tag-ok { border-color: var(--green); color: var(--green); }
.tag-warn { border-color: var(--amber); color: var(--amber); }
.tag-bad { border-color: var(--red); color: var(--red); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; -webkit-margin-after: 16px; margin-block-end: 16px; }
.toolbar .field { margin: 0; }
.toolbar input, .toolbar select { min-width: 160px; }
.split { display: grid; grid-gap: 16px; gap: 16px; }
@media (min-width: 1000px) { .split { grid-template-columns: 1.1fr 1fr; } }
.cand { border: 1px solid var(--line); border-radius: 10px; padding: 12px; -webkit-margin-after: 10px; margin-block-end: 10px; }
.cand[data-eligible='false'] { background: #fafafa; opacity: .8; }
.cand[data-selected='true'] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.cand h4 { margin: 0 0 4px; color: var(--ink); font-size: 1rem; }
.cand ul { margin: 6px 0 0; -webkit-padding-start: 18px; padding-inline-start: 18px; font-size: .85rem; color: var(--red); }
.map { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line);
  border-radius: 10px; background: #f7f9fc; overflow: hidden; }
/* ⚠️ Geography is not a reading direction: pins use physical left/top so that
   east stays east in an RTL document. */
.pin { position: absolute; transform: translate(-50%, -50%); font-size: .72rem;
  text-align: center; white-space: nowrap; direction: rtl; }
.pin[data-kind="stop"] { opacity: .75; }
.pin button { border: 0; background: none; cursor: pointer; font: inherit; padding: 0; }
.pin-dot { display: block; width: 14px; height: 14px; border-radius: 50%; margin-inline: auto; }
.mono { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ══ Dispatch ═══════════════════════════════════════════════════════════════
   The screen was reported as unusable, and the layout was most of the reason:
   the same six collectors were drawn three times, the confirm button sat below
   two thousand pixels of that repetition, and the two columns stretched to the
   same height so the short one ended in a screen and a half of white space. */

/* ⚠️ `align-items: start` is the fix for the dead white space. A grid stretches
   its children to the tallest row by default, so the short side was painted as an
   empty block the length of the long one. */
.split.dispatch { align-items: start; }
@media (min-width: 900px) {
  .split.dispatch { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* ⚠️ The confirm step follows the dispatcher down the page instead of waiting
   at the bottom of it. */
.dispatch-side { position: -webkit-sticky; position: sticky; top: 16px; }

.dispatch-req .summary { -webkit-margin-after: 0; margin-block-end: 0; }

/* ── The queue of pending requests ───────────────────────────────────────── */
.queue-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-gap: 6px; gap: 6px; }
.queue-item {
  display: grid; grid-template-columns: auto 1fr auto; grid-gap: 12px; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  text-decoration: none; color: inherit; background: #fff;
}
.queue-item:hover { border-color: var(--ink); }
/* ⚠️ Not colour alone: the current row is marked by a heavier border as well,
   so it is distinguishable without seeing the fill. */
.queue-item[data-current='true'] {
  border-color: var(--ink); border-width: 2px; background: #f4f7ff;
}
.queue-when { font-weight: 600; color: var(--ink); white-space: nowrap; }
.queue-who { display: grid; grid-gap: 2px; gap: 2px; min-width: 0; }
.queue-who .hint { margin: 0; }
.queue-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Candidates ──────────────────────────────────────────────────────────── */
.cand-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-gap: 8px; gap: 8px; }
.cand-row {
  display: grid; grid-template-columns: auto 1fr; grid-gap: 4px 12px; gap: 4px 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer;
  font-weight: 400;
}
.cand-row:hover { border-color: var(--ink); }
.cand-row[data-selected='true'] { border-color: var(--ink); border-width: 2px; background: #f4f7ff; }
.cand-row input { inline-size: auto; width: auto; margin: 0; }
.cand-name { display: grid; grid-gap: 2px; gap: 2px; }
.cand-name .hint { margin: 0; }
.cand-facts {
  grid-column: 2; display: flex; gap: 18px; flex-wrap: wrap; -webkit-margin-before: 6px; margin-block-start: 6px;
}
.cand-facts > span { display: grid; grid-gap: 1px; gap: 1px; }
.cand-facts .hint { margin: 0; font-size: .78rem; }
.cand-row .tag { grid-column: 2; justify-self: start; }

details.panel > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details.panel[open] > summary { -webkit-margin-after: 12px; margin-block-end: 12px; }
.cand.blocked { background: #fafafa; }
.cand.blocked h4 { -webkit-margin-after: 2px; margin-block-end: 2px; }
.cand.blocked .hint { margin-block: 0 4px; }

/* The schematic is a reference, not the main event: it no longer sets the
   height of the page. */
.dispatch-side .map { aspect-ratio: 1 / 1; }

/* ── Editing a service on the plans screen ───────────────────────────────── */
.plan-actions { display: grid; grid-gap: 8px; gap: 8px; justify-items: start; min-width: 190px; }
.plan-actions > details { width: 100%; }
.plan-actions > details > summary {
  cursor: pointer; color: var(--blue); font-size: .88rem; padding-block: 4px;
}
.plan-edit {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; -webkit-margin-before: 8px; margin-block-start: 8px;
}
.plan-edit .field { -webkit-margin-after: 10px; margin-block-end: 10px; }
.plan-edit input, .plan-edit textarea { width: 100%; }
/* ⚠️ Red, and only here. A destructive control should not look like the two
   controls beside it that merely change a state. */
.btn-danger { color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: #fff5f6; }

/* ══ Signing in ═════════════════════════════════════════════════════════════ */
.signin { max-width: 560px; margin-inline: auto; padding-block: 32px; }
.signin-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-gap: 8px; gap: 8px; }
.signin-person {
  inline-size: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; text-align: start; cursor: pointer; font: inherit;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff;
}
.signin-person:hover { border-color: var(--ink); }
.signin-person span { display: grid; grid-gap: 2px; gap: 2px; }
.signin-person .hint { margin: 0; }

/* Who is signed in, where the role dropdown used to be. */
.whoami {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 8px 12px; -webkit-border-after: 1px solid var(--line); border-block-end: 1px solid var(--line); -webkit-margin-after: 8px; margin-block-end: 8px;
}
.whoami > div { display: grid; grid-gap: 1px; gap: 1px; min-width: 0; }
.whoami .hint { margin: 0; font-size: .72rem; }
.btn-signout { min-height: 28px; padding: 2px 10px; font-size: .8rem; }

/* The one-time enrolment code: large enough to dictate across a room. */
.enrol { -webkit-margin-before: 12px; margin-block-start: 12px; }
.enrol-code {
  font-size: 1.6rem; font-weight: 700; letter-spacing: .12em;
  margin: 6px 0; direction: ltr; text-align: start;
}

/* ── Field staff, collapsed ─────────────────────────────────────────────── */
.staff-row > summary {
  cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  list-style: none;
}
.staff-row > summary::-webkit-details-marker { display: none; }
/* ⚠️ A disclosure triangle drawn by hand, because the native one sits on the
   wrong side in RTL and cannot be moved. */
.staff-row > summary::before {
  content: '▸'; color: var(--muted); transition: transform .12s; display: inline-block;
}
.staff-row[open] > summary::before { transform: rotate(-90deg); }
.staff-row[open] > summary { -webkit-margin-after: 12px; margin-block-end: 12px; -webkit-border-after: 1px solid var(--line); border-block-end: 1px solid var(--line); -webkit-padding-after: 10px; padding-block-end: 10px; }
.staff-actions { gap: 8px; flex-wrap: wrap; align-items: center; }
.staff-actions form { display: inline; }

/* ── Five doors instead of sixteen ──────────────────────────────────────────
   Each link carries one line saying what it is for, so the navigation does not
   assume the reader already knows the job. */
.navlink-wide { display: grid; grid-gap: 2px; gap: 2px; padding: 10px; line-height: 1.3; }
.navlink-wide strong { color: inherit; }
.navlink-wide .hint { margin: 0; font-size: .74rem; }
.navlink-wide[aria-current='page'] .hint { color: #d8dde6; }