/* Desktop screens (dispatch): dense, mouse and keyboard, a large screen. Builds on the tablet's colours (tablet.css). */
.desk {
    --lvl-red: #c8102e;
    --lvl-yellow: #e0a100;
    --lvl-green: #1f8a4c;
    --lvl-non_injury: #5b6b80;
    --lvl-unknown: #b8c2cf;
    --st-available: #1f8a4c;
    --st-responding: #e0a100;
    --st-onscene: #c8102e;
    --st-firstaid: #7c3aed;
    --st-unavailable: #9aa5b4;
    --st-returning: #b7791f;
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.35;
}

.desk-top {
    display: flex; align-items: center; gap: 14px;
    height: 52px; padding: 0 20px;
    background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--rule);
}
.desk-top .wordmark { font-size: 1.1rem; }
.desk-top .module { padding-left: 14px; }
.desk-resort { color: var(--muted); }
.desk-top .spacer { flex: 1; }
.desk-link { color: var(--muted); }
.desk-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
    margin: 0; padding: 6px 20px; background: var(--warn-bg); color: var(--warn-ink); font-size: 0.85rem;
}
.desk-main { max-width: none; padding: 14px 20px 32px; }

.desk h2 { font-size: 1rem; margin: 0 0 10px; }
.desk .muted { color: var(--muted); }

/* ---------- Today strip (R45) ---------- */

.desk-summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px;
    padding: 10px 16px; margin-bottom: 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.sum-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.sum-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sum b { font-size: 1.15rem; margin-right: 3px; }
.sum[class*="lvl-"]::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--lvl); }
.sum-clock { margin-left: auto; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.lvl-red { --lvl: var(--lvl-red); }
.lvl-yellow { --lvl: var(--lvl-yellow); }
.lvl-green { --lvl: var(--lvl-green); }
.lvl-non_injury { --lvl: var(--lvl-non_injury); }
.lvl-unknown { --lvl: var(--lvl-unknown); }

/* ---------- Three columns ---------- */

/* D168: the new call is wider on a wide screen, so its answers sit on fewer rows and a call fits without scrolling. */
.desk-grid { --intake-width: clamp(340px, 24vw, 460px); display: grid; grid-template-columns: var(--intake-width) minmax(0, 1fr) var(--side-width); gap: 14px; align-items: start; }
.side-cols { display: grid; grid-template-columns: 250px 270px; gap: 14px; align-items: start; }
.desk-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
/* D85: two columns beside the board, the patrollers and the gear; below 1800 px the gear goes under the patrollers. */
.desk-main { --side-width: 534px; }
@media (max-width: 1799px) {
    .desk-main { --side-width: 260px; }
    .side-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
    .desk-grid { grid-template-columns: 1fr; }
}
/* D152: the board fits the window like a console: the page never scrolls, each column scrolls on its own, and Take call
   stays in view below the questions. A narrow window keeps one column and the page scrolls. */
@media screen and (min-width: 1101px) {
    .desk:has(.desk-grid) { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; }
    .desk:has(.desk-grid) .desk-main { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; padding-bottom: 14px; }
    .desk-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
    .desk-grid > .desk-panel, .side-cols { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
    .desk-grid > .intake { display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden; }
    .intake form { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
    .intake-body { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
    .intake-actions { flex: none; margin: 0 -14px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
    .intake-actions .d-hint { margin-bottom: 0; }
    /* D157: the days and filters stay at the top of the calls as they scroll. */
    .desk-grid > .board .board-top { position: sticky; top: -14px; z-index: 3; margin: -14px -14px 10px; padding: 14px 14px 2px; background: var(--surface); border-bottom: 1px solid var(--line); }
}
@media screen and (min-width: 1800px) {
    .side-cols { height: 100%; grid-template-rows: minmax(0, 1fr); overflow: visible; }
    .side-cols > .desk-panel { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
}
/* D176: on a tall screen the new call is a narrow column the whole height, beside the day's counts too, and the calls get
   the width. Its answers take more rows, which a tall screen has room for: a call of one person fits without scrolling. */
@media screen and (min-width: 1101px) and (min-height: 1150px) {
    .desk:has(.desk-grid) .desk-main {
        display: grid; grid-template-columns: 320px minmax(0, 1fr) var(--side-width);
        grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "intake summary summary" "intake board side";
        gap: 14px; align-items: start;
    }
    .desk-main > .desk-grid { display: contents; }
    .desk-main > .desk-summary { grid-area: summary; margin: 0; }
    .desk-grid > .intake { grid-area: intake; }
    .desk-grid > .board { grid-area: board; }
    .desk-grid > .side-cols { grid-area: side; }
}

/* ---------- Intake ---------- */

.d-field { display: block; margin-bottom: 12px; }
.d-label, .gps-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.d-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-chips .d-label { margin: 0 4px 0 0; }
.d-chips.where-detail { margin-top: 6px; padding: 6px 0 2px 10px; border-left: 3px solid var(--line); }
.d-chip {
    padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.d-chip:hover { border-color: var(--navy); }
.d-chip.on { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); }
.d-chip[class*="lvl-"] { border-left: 6px solid var(--lvl); }
.d-chip[class*="lvl-"].on { background: var(--lvl); border-color: var(--lvl); color: #fff; }
.d-input {
    width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.d-input:focus { outline: 2px solid var(--focus); border-color: transparent; }
.d-button {
    padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.d-button:hover:not(:disabled) { border-color: var(--navy); }
.d-button:disabled { opacity: 0.5; cursor: not-allowed; }
.d-button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.d-button.primary:hover:not(:disabled) { background: var(--brand-dark); }
.d-button.small { padding: 4px 8px; font-size: 0.8rem; font-weight: 500; }
.d-button.ghost { background: transparent; }
.intake .d-button.primary { width: 100%; padding: 10px; font-size: 1rem; }
.d-hint, .gps-hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }

/* D151: the start questions at the desk, the tablet's own, sized for the panel; nothing is marked missing at a call. */
.call-steps { display: grid; gap: 0; margin-bottom: 12px; }
.call-steps .step { padding: 10px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.call-steps .step:last-child { border-bottom: 1px solid var(--line); }
.call-steps .step h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.call-steps .num { width: 18px; height: 18px; font-size: 0.7rem; }
.call-steps .group, .call-steps .group.pad { padding: 0; background: none; overflow: visible; border-radius: 0; }
.call-steps .group > * + *::before { content: none; }
.call-steps .chips { gap: 6px; margin-top: 6px; }
.call-steps .chips:first-child { margin-top: 0; }
.call-steps .chip {
    min-height: 0; min-width: 0; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 0.85rem; font-weight: 400;
}
.call-steps .chip.yn { min-width: 42px; padding: 3px 8px; }
.call-steps .chip-hint { font-size: 0.7rem; }
.call-steps .yes-nos { gap: 2px; margin-top: 8px; }
.call-steps .yes-nos.incident { grid-template-columns: minmax(0, 1fr); }
.call-steps .yes-no { gap: 6px; padding: 2px 0; border-left: 0; }
.call-steps .yn-label { font-size: 0.85rem; font-weight: 500; }
.call-steps .yn-buttons { gap: 4px; }
.call-steps .cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.call-steps .card { padding: 8px 10px; border-width: 1px; border-radius: 8px; }
.call-steps .card h3 { margin: 0 0 6px; font-size: 0.85rem; }
.call-steps .cards + .together { margin-top: 6px; }
.call-steps .step-detail { margin-top: 6px; padding: 4px 0 2px 10px; background: none; border-radius: 0; }
.call-steps .detail-label, .call-steps .quick-label { margin: 0 0 4px; font-size: 0.8rem; color: var(--muted); }
.call-steps .quick-row { padding: 6px 0 2px; }
.call-steps .group-foot { margin: 0; font-size: 0.8rem; }
.call-steps .stepper { gap: 6px; margin-top: 6px; }
.call-steps .stepper output { min-width: 70px; }
.call-steps .where-more { margin-top: 10px; }
.call-steps .where-more .d-field:last-child { margin-bottom: 0; }
.call-steps .caller-says { display: grid; gap: 4px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.call-steps .caller-says .d-label { margin: 4px 0 0; }
.intake .cancel-change { width: 100%; margin-top: 6px; }

/* D168: a call fits one screen: each label on its answers' row, and chips sized for a mouse, not a finger. */
.intake-body .d-field { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 4px; margin-bottom: 6px; }
.intake-body .d-field > .d-label { margin: 0; }
.intake-body .d-field > :not(.d-label) { grid-column: 2; }
.intake-body .d-chips { gap: 4px; }
.intake-body .d-chip { padding: 2px 7px; font-size: 0.8rem; }
.intake-body .d-input { padding: 4px 8px; font-size: 0.85rem; }
.call-steps { margin-bottom: 8px; }
.call-steps .step { padding: 6px 0; }
.call-steps .step h2 { margin-bottom: 3px; }
.call-steps .chips { gap: 4px; margin-top: 4px; }
.call-steps .chip { padding: 2px 7px; font-size: 0.8rem; }
.call-steps .chip.yn { min-width: 36px; padding: 1px 8px; }
.call-steps .yes-nos { margin-top: 4px; }
.call-steps .yes-no { padding: 1px 0; }
.call-steps .card { padding: 6px 8px; }
.call-steps .card h3 { margin-bottom: 4px; }
/* D196: the place's own questions (on snow: where on snow, the run, the exact location; a lift and where on it) in one box
   under the places, as each person's card is under Who, every label in the panel's label column. */
.call-steps .step-detail, .call-steps .where-more { margin-top: 4px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; }
.call-steps .step-detail:has(+ .where-more) { border-bottom: 0; border-radius: 8px 8px 0 0; }
.call-steps .step-detail + .where-more { margin-top: 0; padding-top: 0; border-top: 0; border-radius: 0 0 8px 8px; }
.call-steps .step-detail { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: start; column-gap: 8px; }
.call-steps .step-detail .detail-label { margin: 3px 0 0; font-weight: 600; }
.call-steps .step-detail .chips { margin-top: 0; }
.call-steps .caller-says { gap: 3px; margin-top: 6px; padding-top: 4px; }
.call-steps .caller-says .d-label { margin: 0; }
.call-steps .caller-says .d-chips .d-label { margin-right: 2px; }
/* The people count beside its question, and no Person A title for one person. D175: who on its row, under 18 on the next,
   its Yes and No beside it like the panel's other answers. */
.call-steps .step:first-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.call-steps .step:first-child h2 { margin: 0; }
.call-steps .cards > .card:only-child h3 { display: none; }
.call-steps .card > .group { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.call-steps .card > .group > .yes-nos { margin-top: 0; }
.call-steps .card > .group > :not(.chips) { flex-basis: 100%; }
.call-steps .card > .group > .yes-nos .yes-no { justify-content: flex-start; column-gap: 10px; }
.intake .intake-actions .d-button.primary { padding: 7px; }
/* D153: the patrollers already on the call, one click to put one with this person. */
.move-here { gap: 4px; }
.d-link { font-weight: 600; color: var(--focus); }

/* ---------- Live calls (R38) ---------- */

.board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
/* D172: once the board has room for two, the cards sit side by side, as many columns as fit (four on an ultrawide
   screen), in the list's order row by row. A narrow card puts the step under the number and the patrollers beside it;
   the open card spans two columns and keeps the wide layout for its steps, people and treatment. */
.call-list { container: calls / inline-size; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 8px 10px; align-items: start; }
.call {
    display: grid;
    grid-template-columns: 90px minmax(0, 1.3fr) minmax(0, 1fr) 100px minmax(210px, 1.2fr);
    grid-template-areas: "name name name name name" "id what where stage pats" "acts acts acts acts acts";
    gap: 6px 12px; align-items: start;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--line); border-left: 8px solid var(--lvl); border-radius: 8px;
    background: var(--surface); cursor: pointer;
}
@container calls (min-width: 1130px) {
    .call:not(.selected) {
        grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "name name name" "id what where" "stage pats pats" "acts acts acts";
    }
    .call.selected { grid-column: span 2; }
}
.call:hover { border-color: var(--navy); border-left-color: var(--lvl); }
.call.selected { box-shadow: 0 0 0 2px var(--focus); }
/* D131: the call's name as patrol says it on the radio. */
.call-name { grid-area: name; font-weight: 700; font-size: 1.02rem; }
/* D142: the call sign first, as said on the radio, then the person's name, lighter; D213: a call sign that is the first
   name is shown once, bold in the name. */
.roster-sign { margin-right: 6px; font-weight: 700; color: var(--ink); }
.roster-sign + .roster-full, .roster-full.with-sign { font-weight: 400; color: var(--muted); }
.roster-full > .roster-sign { margin-right: 0; }
.roster-find { margin: 6px 0 2px; }
.shift-sign { margin-left: 6px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.call-id { grid-area: id; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.call-what { grid-area: what; display: flex; flex-direction: column; }
.call-kind { font-weight: 600; }
.call-note { color: var(--muted); }
.call-reported { font-size: 0.85rem; font-weight: 600; }
.call-heard { font-size: 0.85rem; }
.d-chip.small { padding: 3px 8px; font-size: 0.8rem; }
.call.lvl-unknown { border-left-style: dashed; }
.call-where { grid-area: where; display: flex; flex-direction: column; gap: 2px; }
.run-name { display: inline-flex; align-items: center; gap: 8px; }
.run-input { position: relative; display: block; }
.run-input .run-grade { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.call-stage { grid-area: stage; display: flex; flex-direction: column; gap: 2px; }
.stage-pill { align-self: start; padding: 2px 8px; border-radius: 999px; background: #ececec; font-weight: 600; font-size: 0.85rem; }
.stage-time { font-variant-numeric: tabular-nums; color: var(--muted); }
.call.overdue .stage-pill { background: var(--warn-bg); color: var(--warn-ink); }
.call.overdue .stage-time { color: var(--warn-ink); font-weight: 700; }
.call.overdue .stage-time::after { content: " over limit"; font-weight: 500; }
.call-pats { grid-area: pats; display: flex; flex-wrap: wrap; gap: 4px; }
.pat { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border-radius: 999px; background: #ececec; font-size: 0.85rem; white-space: nowrap; }
.pat-x { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); padding: 0 4px; }
.call-pats { flex-direction: column; align-items: flex-start; }
.pat { gap: 6px; max-width: 100%; flex-wrap: wrap; }
.pat.arrived { background: var(--ok-bg); color: var(--ok-ink); }
.pat.responding { background: var(--warn-bg); color: var(--warn-ink); }
.pat-time { font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.pat-arrive { border: 1px solid currentColor; border-radius: 999px; background: var(--surface); color: inherit; font: inherit; font-size: 0.75rem; padding: 0 6px; cursor: pointer; }
/* D223: the × that takes a piece of gear off a call. */
.gear-off { padding: 0 3px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.9rem; line-height: 1; cursor: pointer; }
.gear-off:hover { color: var(--ink); }
.tag-1035 { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 700; }
/* D174: a menu that opens under its button and floats over the board (the browser's popover: a click elsewhere or Escape
   closes it); above the button when there is no room below. Without anchor positioning it opens in the middle. */
.pop-menu { flex-direction: column; min-width: 12rem; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
.pop-menu:popover-open { display: flex; }
.pop-menu button { padding: 7px 12px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.pop-menu button:hover, .pop-menu button:focus-visible { background: #f0f0f0; outline: none; }
/* D180: what patrol asked for, short until sent or met; Ask for opens patrollers by number, the gear, EMS, its own words. */
.call-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; }
.need { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; }
.need.open { background: var(--warn-bg); border-color: var(--lvl-yellow); color: var(--warn-ink); font-weight: 600; }
.need.met { color: var(--muted); }
.need.met > span:first-child::before { content: "\2713  "; color: var(--st-available); }
.need .undo { padding: 0 4px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.need-menu { min-width: 16rem; max-width: 22rem; }
.need-menu .d-label { padding: 6px 12px 0; }
.need-group { display: flex; flex-wrap: wrap; gap: 0 2px; padding-bottom: 2px; }
.pop-menu .need-group button { padding: 5px 10px; }
/* D195: what is asked and still short, checked as on the call; the menu stays open until Done. */
.pop-menu.need-menu button.on { background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
.pop-menu.need-menu button.on::before { content: "\2713  "; }
.pop-menu .need-group .need-done { margin-left: auto; background: var(--navy); color: var(--navy-ink); font-weight: 600; }
.pop-menu .need-group .need-done:hover, .pop-menu .need-group .need-done:focus-visible { background: var(--navy); opacity: 0.9; }
.need-other { display: flex; gap: 6px; padding: 6px 8px 4px; }
.need-other .d-input { flex: 1; min-width: 0; }
/* D182, D183: a note from the radio under the steps; the EMS steps under the way to the base. */
.call-note-add { display: flex; gap: 6px; margin-top: 8px; }
.call-note-add .d-input { flex: 1; min-width: 0; }
.ems-steps { margin-top: 8px; }
/* D184: a search's zones, each one's 10-4 to the description. */
.zone-acks { margin-top: 8px; }
/* D188: all stations called for a call nobody was sent to; cover asked for a hut or a zone; a zone with nobody free. */
.all-stations, .cover-ask, .cover-asked { margin-left: 6px; }
.all-stations.muted, .cover-asked { font-size: 0.8rem; }
.zone-count.none-free, .zone-count.none-free b { color: var(--warn-ink); font-weight: 700; }
/* D180: the strip over the calls: what is short now, the most serious first, each for how long. */
/* D191: at the bottom of the new call, what is still going on with nobody covering it: how long, and a reminder when due. */
.watching { flex: none; margin: 0 -14px; padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.watching .d-label { margin-bottom: 2px; }
.watching ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 12rem; overflow-y: auto; scrollbar-width: thin; }
.watching li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 0.85rem; }
.watch-time { min-width: 3.6rem; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.watch-what { padding: 0; font-weight: 600; }
.watch-reminded { color: var(--muted); }
.watching li.due { padding: 2px 6px; margin: 0 -6px; border-radius: 6px; background: var(--warn-bg); }
.watching li.due .watch-reminded { color: var(--warn-ink); font-weight: 600; }
@media screen and (min-width: 1101px) {
    /* The new call reaches the bottom of the window, so what is going on sits at the bottom left. */
    .desk-grid > .intake:has(.watching) { align-self: stretch; }
    .intake .watching { margin-top: auto; }
}

/* D190: a scenario replay's bar under the top bar: its clock and controls, the words said last, what the board refused. */
.replay-bar { padding: 6px 16px 8px; border-bottom: 1px solid var(--line); background: var(--warn-bg); }
.replay-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.replay-clock { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.replay-controls .spacer { flex: 1; }
.replay-said { margin: 4px 0 0; font-size: 0.9rem; }
.replay-at { font-weight: 700; font-variant-numeric: tabular-nums; }
.replay-refused { margin-top: 4px; font-size: 0.85rem; color: var(--warn-ink); }
.replay-refused ul { margin: 2px 0 0; padding-left: 18px; }

/* D180, D186: what is short now and what is still open share one warning panel. */
.short-now, .still-open { border: 1px solid var(--lvl-yellow); border-radius: 8px; background: var(--warn-bg); }
.short-now { margin-top: 8px; padding: 6px 10px; }
.short-now h3 { margin: 0 0 2px; color: var(--warn-ink); }
.short-now ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: 9.5rem; overflow-y: auto; }
.short-now li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 0.85rem; }
.short-now .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lvl, var(--lvl-yellow)); flex: none; }
.short-now .short-what { padding: 0; font-weight: 600; }
.short-now .d-button { padding: 1px 8px; font-size: 0.75rem; }
.short-since { margin-left: auto; font-weight: 700; color: var(--warn-ink); white-space: nowrap; }
@supports (anchor-name: --menu) {
    .pop-menu { inset: auto; margin: 4px 0; position-area: bottom span-right; position-try-fallbacks: flip-block; }
}
.pat-x:hover { color: var(--alert); }
.call-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* D171: the level patrol radios in once on scene, beside the next step; a row per person when there are several.
   D172: at the end of the row, or under the buttons on a card too narrow for both. */
.call-level { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; }
.call-level .d-chips { align-items: center; justify-content: flex-end; gap: 4px; }
/* D124: each person of a call with several: their level's colour, what they have, their own patrollers. */
.pat-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pat-person + .pat-person { margin-top: 4px; }
.person-tag {
    padding: 1px 8px; border: 2px solid var(--lvl, var(--line)); border-radius: 6px; background: var(--lvl, var(--surface));
    color: #fff; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.person-tag.lvl-unknown { background: var(--surface); border-style: dashed; color: var(--ink); }
.person-tag.on { outline: 2px solid var(--focus); outline-offset: 1px; }
.person-tag.all { background: #ececec; border-color: #ececec; color: var(--ink); font-weight: 600; cursor: default; }
.person-what { font-size: 0.8rem; color: var(--muted); }
/* D126: a person's own case on the board, under the call's number. */
.call-id .case-tag { align-self: flex-start; margin: 2px 0; cursor: default; }

.call-detail {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
    padding-top: 8px; border-top: 1px dashed var(--line); cursor: default;
}
.detail-cols { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.detail-cols section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detail-cols section + section { border-left: 1px solid var(--line); padding-left: 16px; }
.detail-cols h3 { margin: 0; }
.detail-cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* D125: with several people, each is their own case under the call: level, patrollers, treatment, EMS details. */
.person-case { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px 12px; border-left: 4px solid var(--lvl, var(--line)); border-top: 1px dashed var(--line); }
.person-case.lvl-unknown { border-left-style: dashed; }
.case-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.detail-cols .d-hint { margin: 0; }
.timeline { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.timeline b { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .detail-cols { grid-template-columns: 1fr; }
    .detail-cols section + section { border-left: 0; padding-left: 0; }
}
/* D205: the open card's last row: the incident form on the left, Flag for management review in the corner. */
.call-foot { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.call-rare { margin-left: auto; }
.people-count { display: inline-flex; align-items: center; gap: 6px; }
/* D208, D231: a reckless skier's name and pass as patrol reads them, and whether the file has them already. */
.on-file { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.on-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.on-file-row .d-input { width: 12em; }
.on-file-found { padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; background: var(--warn-bg); color: var(--warn-ink, #7a4a00); }
/* D208: the file of who was warned for a closed area. */
.violation-counts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0; padding: 0; list-style: none; font-size: 0.9rem; }
.violation-find { max-width: 320px; margin: 4px 0 10px; }
.violation-table td { vertical-align: top; }
.seen-tag { margin-left: 8px; padding: 0 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: var(--warn-bg); color: var(--warn-ink, #7a4a00); white-space: nowrap; }
.people-count b { min-width: 1ch; text-align: center; font-variant-numeric: tabular-nums; }

/* EMS details (R38): what dispatch tells the ambulance, per person, with the sets of vitals taken. */
.ems { flex-basis: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ems .d-field { margin: 0; }
.ems-person { display: flex; flex-direction: column; gap: 8px; }
.ems-person + .ems-person { padding-top: 10px; border-top: 1px dashed var(--line); }
.ems-person h4 { margin: 0; font-size: 0.95rem; }
.ems-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 20px; }
.ems-row .d-chips { margin-top: 2px; }
.ems-age { display: flex; flex-direction: column; }
.ems-age .d-input { width: 5.5em; }
/* D197: the weight in the tablet's units box, sized like the panel's other answers; nature of injury beside its cause. */
.ems-weight .measure { gap: 4px; }
.ems-weight .measure .input { width: 5em; min-height: 0; padding: 7px 10px; border-width: 1px; border-radius: 8px; }
.ems-weight .measure .unit { display: none; }
.ems-weight .measure .chip { min-width: 0; min-height: 0; padding: 3px 8px; font-size: 0.8rem; }
.ems-nature .d-field:first-child { flex: 2 1 18em; }
.ems-nature .d-field:last-child { flex: 1 1 12em; }
.ems-nature .d-input { width: 100%; }
.ems-pickup .d-chips { align-items: center; }
.ems-pickup .d-input.small { width: 8.5em; }
/* D161: how the person reached the base, and how they leave it when EMS is called. */
.to-base { margin-top: 8px; align-items: center; gap: 4px; }
.ems-leaves .d-field .d-input, .ems-heli .d-field .d-input { min-width: 14em; }
.vitals { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.vitals-row { display: grid; grid-template-columns: 6.5rem repeat(5, minmax(3rem, 4.5rem)) repeat(2, minmax(4.5rem, 1fr)) 3.5rem; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.vitals-row.head { color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.vitals-row.new .d-input { width: 100%; min-width: 0; padding: 3px 6px; }
.ems-say { padding: 8px 10px; border-radius: 6px; background: #f2f2f2; }
.ems-say p { margin: 2px 0 0; }

.undo { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 1rem; line-height: 1; padding: 0 2px; }
.undo:hover { color: var(--alert); }
/* D154: every step of the call from the start, Now on the steps to come; a time moves a minute at a time, always in order. */
.step-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.step-row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 28px; }
.step-time { font-variant-numeric: tabular-nums; }
.step-row.open .step-name { color: var(--muted); }
.step-tools { display: inline-flex; align-items: center; gap: 4px; }
/* More specific than .d-chip.small, which comes later. */
.step-tools .d-chip.small, .step-row .d-chip.step-now { min-width: 30px; padding: 1px 8px; }
.step-row .d-chip.step-now { padding: 0 7px; font-size: 0.75rem; }
.step-tools .d-chip:disabled { opacity: 0.35; cursor: default; }
.step-note { font-size: 0.8rem; color: var(--muted); }
/* D156: a step asked of a call with no patroller on it. */
.no-patroller { margin: 6px 0 0; font-size: 0.8rem; }
.call-acts .no-patroller { flex-basis: 100%; margin: 0; }
/* D155: the level with the description, optional; one row per person when there are several. */
.call-level-pick .d-chips { align-items: center; gap: 4px; }
.call-level-pick .level-who { min-width: 5.5em; font-size: 0.85rem; }

/* ---------- Off the board ---------- */

.ended-head { margin-top: 18px; }
.ended { margin: 0; padding: 0; list-style: none; }
.ended li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.ended .dot, .roster .dot, .gear-column .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lvl, var(--st)); flex: none; }
.tag { padding: 1px 8px; border-radius: 999px; background: #ececec; font-size: 0.8rem; }
.tag.warn { background: var(--warn-bg); color: var(--warn-ink); }

/* ---------- Roster (R40) ---------- */

.zone { margin-top: 10px; padding: 6px 8px; border: 1px dashed transparent; border-radius: 8px; }
.zone.drop { border-color: var(--navy); background: #f2f2f2; }
.zone-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; margin: 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.zone-head > span:first-child { white-space: nowrap; }
/* D207: the zone name folds the zone; the arrow points down when open, right when folded. */
.zone-fold { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }
.zone-fold::before { content: ""; width: 6px; height: 6px; margin: 0 2px 3px 1px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.zone-fold[aria-expanded="false"]::before { margin-bottom: 0; transform: rotate(-45deg); }
.zone-fold:hover::before { border-color: var(--navy); }
.zone.folded .zone-head { border-bottom-color: transparent; padding-bottom: 0; }
.zone-count { font-size: 0.8rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
/* D88: patrollers in a zone against what it needs today, the category of those not full-time, and the shift screen. */
.zone-need { margin-left: 6px; font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.zone-need.short { color: var(--warn-ink, #7a4a00); font-weight: 700; }
.roster-role { margin-left: 6px; padding: 0 5px; border-radius: 4px; background: #ececec; font-size: 0.7rem; font-weight: 600; }
.roster-qual { margin-left: 6px; padding: 0 5px; border: 1px solid var(--st-firstaid); border-radius: 4px; color: var(--st-firstaid); font-size: 0.68rem; font-weight: 600; }
.roster-category { margin-left: 6px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.7rem; font-weight: 500; color: var(--muted); }
.shift-zones .mgmt-card.short h2 .zone-need { color: var(--warn-ink, #7a4a00); font-weight: 700; }
.shift-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.shift-zones h2 { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 1rem; }
/* D122: the zones with who is in each, the staff not on the shift in a column per category, a name dragged or clicked
   and then its zone; each category has a colour, on its column and on its names in the zones. */
.shift-hint { margin: 4px 0 0; font-size: 0.9rem; }
.shift-hint .link { padding: 0 0 0 8px; }
.mgmt-grid.shift-zones { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: start; }
.shift-zone.target, .shift-pool.target { cursor: pointer; }
.shift-zone.target:hover, .shift-pool.target:hover, .shift-zone.drop, .shift-pool.drop { background: #f2f2f2; border-color: var(--navy); border-style: dashed; }
.shift-names { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; }
.shift-names li { display: block; padding: 0; cursor: grab; }
.shift-name {
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%;
    padding: 3px 8px; border: 1px solid var(--line); border-left: 4px solid var(--cat); border-radius: 6px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: 0.85rem; text-align: left; cursor: grab;
}
.shift-name:hover { border-color: var(--navy); border-left-color: var(--cat); }
.shift-name.held { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); }
.shift-name.found { outline: 2px solid var(--focus); }
.shift-status { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.shift-name.held .shift-status { color: inherit; }
.shift-put { margin-top: 8px; }
.shift-pool-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 0; }
.shift-pool-head h2 { margin: 0; }
.shift-pool-head .d-input { width: 240px; max-width: 100%; }
.shift-pool { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px; margin-top: 8px; padding: 8px; border: 1px dashed transparent; border-radius: 10px; }
.shift-pool > .shift-put { grid-column: 1 / -1; justify-self: start; margin: 0; }
.shift-col h3 { display: flex; align-items: center; margin: 0; font-size: 0.95rem; }
.shift-col h3 .muted { margin-left: 6px; font-weight: 500; font-size: 0.8rem; }
.shift-col .shift-names { flex-direction: row; flex-wrap: wrap; align-content: flex-start; max-height: 42vh; overflow-y: auto; }
.shift-col .shift-name { width: auto; }
/* D127: teams: a row to move one together, names grouped by team in the staff columns, a lead's role on their name. */
.shift-teams { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.shift-teams .d-label { margin-right: 4px; }
.shift-team-drag[draggable="true"] { cursor: grab; }
.shift-team-drag .d-chip:disabled { opacity: 0.5; cursor: default; }
.shift-col-names { max-height: 42vh; overflow-y: auto; }
.shift-col .shift-col-names .shift-names { max-height: none; overflow: visible; }
.shift-team { margin: 8px 0 2px; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.shift-role { margin-left: 6px; padding: 0 5px; border-radius: 4px; background: #ececec; font-size: 0.7rem; font-weight: 600; color: var(--ink); }
.shift-name.held .shift-role { background: rgba(255, 255, 255, 0.2); color: inherit; }
.cat-swatch { width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; background: var(--cat); }
.cat-0 { --cat: #1c1c1c; }
.cat-1 { --cat: #2563eb; }
.cat-2 { --cat: #1f8a4c; }
.cat-3 { --cat: #9aa5b4; }
.zone-count b { color: var(--st-available); }
.zone-empty { margin: 6px 0 0; font-size: 0.8rem; }
.roster-list li[draggable="true"] { cursor: grab; }
.roster-list { margin: 4px 0 0; padding: 0; list-style: none; }
.roster-list li { position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.roster-pick {
    flex: 1; display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: center; text-align: left;
    padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; color: inherit; cursor: pointer;
}
/* D216: a row pointed at lights up as a tile that can be dragged, with a grip at its right and a grab hand when there is
   nothing to click, so moving a patroller to another zone or a hut is as plain as it is possible. */
.roster-list li:hover > .roster-pick, .roster-list li:focus-within > .roster-pick { border-color: var(--navy); background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.roster-pick:disabled { cursor: default; }
.roster-list li[draggable="true"] > .roster-pick { padding-right: 22px; }
.roster-list li[draggable="true"] > .roster-pick:disabled { cursor: grab; }
.roster-list li[draggable="true"]::after { content: "⠿"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 0.95rem; color: var(--muted); opacity: 0; pointer-events: none; transition: opacity 0.1s; }
.roster-list li[draggable="true"]:hover::after { opacity: 0.8; }
/* While a name is dragged: every zone shows it takes a drop, the one under the mouse more, the dragged row is lifted and
   no card is in the way. */
.roster.dragging .zone:not(.join) { border-color: color-mix(in srgb, var(--navy) 45%, var(--surface)); }
.roster.dragging .roster-card { display: none; }
.roster-list li.lifted { opacity: 0.45; }
/* D218: the call card or the person's case a name is dragged over takes it. */
.call.drop, .person-case.drop { outline: 2px dashed var(--navy); outline-offset: 2px; }
.roster-name { font-weight: 600; }
.roster-status { grid-column: 2; font-size: 0.8rem; color: var(--muted); }
.st-available { --st: var(--st-available); }
.st-responding { --st: var(--st-responding); }
.st-onscene { --st: var(--st-onscene); }
.st-clinic { --st: var(--st-firstaid); }
.st-returning { --st: var(--st-returning); }
.st-unavailable { --st: var(--st-unavailable); }
.st-unavailable .roster-name { color: var(--muted); font-weight: 500; }
/* D215: pointing at a row (or focusing it) opens a card under the name: the rest about them (category, qualifications)
   and what to do with them, Not available with its reason, Available, To the hut, Out of the hut, Gear back (D123, D177,
   D185). It comes after a moment, so a mouse going down the list does not flash one per row, and nothing in the row
   moves or is covered. */
.roster-card { position: absolute; left: 24px; right: 0; top: 100%; z-index: 5; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); font-size: 0.8rem; visibility: hidden; opacity: 0; transition: opacity 0.1s, visibility 0s 0.1s; }
.roster-list li:hover > .roster-card, .roster-list li:focus-within > .roster-card { visibility: visible; opacity: 1; transition-delay: 0.25s; }
/* D218: the card lies over the rows under it, so only its own lines take the mouse; a click beside them reaches the row
   below, and the card goes as the mouse leaves. */
.roster-card { pointer-events: none; }
.roster-card > * { pointer-events: auto; }
.card-about { color: var(--muted); }
/* The doings one under the other, Not available last at the bottom, its reasons under it. */
.card-acts { display: flex; flex-direction: column; gap: 1px; margin: 0 -4px; }
.card-about + .card-acts { padding-top: 5px; border-top: 1px solid var(--line); }
.card-act { padding: 3px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 0.8rem; color: var(--ink); text-align: left; cursor: pointer; }
.card-act:hover, .card-act[aria-expanded="true"] { background: #ececec; }
.card-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 6px; }
.card-why .link { padding: 0 4px; font-size: 0.8rem; }
/* D177, D178: a zone's hut first, with the patroller up there, who goes first; a hut with nobody free in it is flagged
   so dispatch sends someone up. */
.hut { margin-top: 6px; padding-top: 4px; border: 1px solid var(--line); border-left: 4px solid var(--st-available); border-radius: 8px; background: var(--surface); }
.hut:not(.ready) { border-left-color: var(--lvl-yellow); }
.hut.drop { border-color: var(--navy); border-style: dashed; background: #f2f2f2; }
.hut-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; padding: 0 8px; font-size: 0.78rem; font-weight: 600; }
.hut-state { font-weight: 500; color: var(--muted); }
.hut:not(.ready) .hut-state { color: var(--warn-ink); font-weight: 700; }
.hut .roster-list { margin: 0; }
/* D179: an empty hut: who came down, and one click to send cover up. */
.hut-cover { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 8px 8px; font-size: 0.8rem; }

/* ---------- Review queue (R19, R43, R44) ---------- */

.review-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .review-grid { grid-template-columns: 1fr; } }
.review-list h2 { margin-top: 14px; }
/* D166: forms collected on their own and not attached yet, at the top of the review list. */
.loose-forms li, .map-change-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.loose-forms li > span:first-child { display: flex; flex-direction: column; }
.loose-actions { display: flex; align-items: center; gap: 8px; }
.review-list h2:first-child { margin-top: 0; }
.small { font-size: 0.8rem; }
.review-items, .map-change-list { margin: 0; padding: 0; list-style: none; }
.review-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-bottom: 6px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.review-item:hover { border-color: var(--navy); }
.review-item.on { box-shadow: 0 0 0 2px var(--focus); }
.review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.review-head p { margin: 0; }
.review-detail h3 { font-size: 0.95rem; margin: 18px 0 6px; }
.status-pill { padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; background: #ececec; }
.status-pill.st-submitted { background: var(--warn-bg); color: var(--warn-ink); }
.status-pill.st-approved, .status-pill.st-closed { background: var(--ok-bg); color: var(--ok-ink); }
.status-pill.st-returned { background: #fde2e4; color: var(--alert-dark); }
.review-forms { margin: 0; padding: 0; list-style: none; }
.review-forms li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.review-forms li > span:first-child { flex: 1; }
.review-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.review-history { margin: 0; padding-left: 18px; font-size: 0.9rem; }

/* ---------- Management (R45) ---------- */

.mgmt-title { font-size: 1.3rem; margin-bottom: 4px; }
.mgmt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.mgmt-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
/* D167: the map's changes waiting for management. */
.map-waiting { margin: 10px 0 0; }
.map-changes h2 { margin: 16px 0 6px; font-size: 1rem; }
.map-change-list li.approved > span:first-child { color: var(--ok-ink); font-weight: 600; }
.map-change-list li.dismissed > span:first-child { color: var(--muted); text-decoration: line-through; }
/* D163: the calls of today, the last 7 days and the season, side by side. */
.mgmt-summary { margin-top: 14px; }
.mgmt-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mgmt-table th, .mgmt-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.mgmt-table th:first-child { text-align: left; font-weight: 500; }
.mgmt-table thead th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.mgmt-table tr.total td, .mgmt-table tr.total th { font-weight: 700; }
.mgmt-table .dot { display: inline-block; margin-right: 6px; }
.mgmt-card ul { margin: 0; padding: 0; list-style: none; }
.mgmt-card li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.mgmt-card li b { margin-left: auto; }
/* R40, D82: gear counted by kind; the resort's first kinds (toboggans, trauma packs, pain management, Vac Mats) above a line. */
.gear-lines { margin: 0 0 6px; padding: 0; list-style: none; }
.gear-line, .gear-caches li.gear-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 3px 0; }
.gear-column .cache { padding: 6px 0 4px; }
.gear-column .cache + .cache { border-top: 1px dashed var(--line); }
.gear-column .cache-name { display: block; margin-bottom: 4px; font-size: 0.85rem; font-weight: 600; }
/* D217, D220: the gear rows look and move like the patrollers' (the same list, tile, grip and lifted look): a dot for the
   state of a kind in its cache, full, short, more than usual (gear left there for now) or none, and the count at the
   right. While a piece is dragged every cache shows a dashed edge, the one under the mouse filled. */
.gear-column .cache-name { margin-bottom: 0; }
/* D221: the cache's head says when it was last confirmed as counted; amber after a day or never, with Confirm in view,
   otherwise Confirm shows when the cache is pointed at. */
.cache-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.cache-check { font-size: 0.75rem; color: var(--muted); }
.cache-check.stale { color: var(--warn-ink, #7a4a00); font-weight: 600; }
.d-button.cache-confirm { margin-left: auto; padding: 1px 7px; font-size: 0.72rem; opacity: 0; }
.cache:hover .cache-confirm, .cache:focus-within .cache-confirm, .cache-check.stale ~ .cache-confirm { opacity: 1; }
.gear-list { margin: 0; }
.gear-list li { padding: 1px 0; }
.gear-list .roster-pick { grid-template-columns: 10px 1fr auto; padding-top: 3px; padding-bottom: 3px; }
.gear-list li.full { --st: var(--st-available); }
.gear-list li.short { --st: var(--lvl-yellow); }
.gear-list li.extra { --st: var(--navy); }
.gear-list li.none { --st: var(--line); }
.gear-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.gear-list li.short .gear-n { color: var(--warn-ink, #7a4a00); }
.gear-list li.extra .gear-n { color: var(--navy); }
.gear-list li.none .roster-name, .gear-list li.none .gear-n { color: var(--muted); font-weight: 400; }
/* D226: what is out of the caches heads the column: a piece at a call (amber), left at the clinic, out somewhere (grey),
   with the tally under the head; the rows drag like the others but take no click. */
.gear-out li.at-call { --st: var(--st-responding); }
.gear-out li.left { --st: var(--st-firstaid); }
.gear-out li.somewhere { --st: var(--st-unavailable); }
.gear-pick.still { cursor: grab; }
.gear-tally { margin: 4px 0 0; font-size: 0.75rem; color: var(--muted); }
/* D227: the nearest runs to the caller's coordinates, under the GPS box, each with its distance. */
.gps-near { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -2px 0 8px; }
.gps-near .d-chip b { margin-left: 4px; font-weight: 500; color: var(--muted); }
.gps-near .d-chip.on b { color: inherit; }
.gear-column.dragging .cache { outline: 1px dashed color-mix(in srgb, var(--navy) 45%, var(--surface)); outline-offset: 2px; border-radius: 6px; }
.gear-column.dragging .cache.drop { outline-color: var(--navy); background: #f2f2f2; }
/* D229: each zone's "somewhere else" shows while a piece is dragged; dropped there, a box names the place. */
.gear-column .cache.staging { display: none; margin-top: 6px; padding: 6px 8px; border: 1px dashed var(--line); border-radius: 6px; }
.gear-column .cache.staging .cache-name { font-weight: 500; color: var(--muted); }
.gear-column.dragging .cache.staging { display: block; }
.gear-column .cache.staging.drop { border-color: var(--navy); background: #f2f2f2; }
.staging-name { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.staging-name .d-input { flex: 1; min-width: 0; }
.gear-line.extra .gear-count { color: var(--navy); }
.gear-acts { display: inline-flex; gap: 4px; justify-self: end; }
.gear-line.after-first { margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--line); }
.mgmt-grid.gear-caches { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.gear-line .gear-kind { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gear-line .gear-count { min-width: 3.2em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.gear-line.short .gear-count { color: var(--warn-ink, #7a4a00); }
.gear-line.empty .gear-kind, .gear-line.empty .gear-count { color: var(--muted); font-weight: 400; }
.d-button.step { min-width: 30px; padding-left: 0; padding-right: 0; }
.gear-add { display: flex; gap: 6px; margin-top: 8px; }
.gear-add .d-input { flex: 1; min-width: 0; }
.gear-away-list { margin: 12px 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.gear-away-list h2 { margin: 0 0 6px; font-size: 1rem; }
.gear-away-list ul { margin: 0; padding: 0; list-style: none; }
.gear-away-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.gear-caches h2 { margin: 0 0 6px; font-size: 1rem; }
.mgmt-card .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lvl); }
.mgmt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mgmt-zone { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.mgmt-zone .d-input { width: auto; max-width: 100%; }
.mgmt-calls { margin-top: 12px; }
.mgmt-calls .time { font-variant-numeric: tabular-nums; min-width: 3rem; }

/* R43, R44, R49: returning with questions, corrections and voiding. */
.status-pill.st-voided { background: #e6e6e6; color: #444; text-decoration: line-through; }
.review-box { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.review-box h4 { margin: 0 0 4px; font-size: 0.95rem; }
.review-box .d-field { margin-top: 8px; }
.review-box > .d-button { margin-top: 8px; }
.ask-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
@media (max-width: 700px) { .ask-row { grid-template-columns: 1fr; } }
.question-list { margin: 8px 0; padding-left: 18px; font-size: 0.9rem; }
.question-list li { margin: 2px 0; }
.fix-input { margin: 6px 0; }
.void-box summary { cursor: pointer; font-weight: 600; }
.d-hint.checkout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.d-hint.warn { color: var(--warn-ink); background: var(--warn-bg); padding: 6px 10px; border-radius: 8px; }

/* R45: adding someone from the staff list to today's shift. */
.zone.join .join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 6px 0 2px; }
.zone.join .join-row select:first-child { grid-column: 1 / -1; }
.zone.join .join-row select { min-width: 0; width: 100%; }

/* R49: paperwork still open the day after. */
.tag.late { background: #fde2e4; color: #9b1028; }

/* R37: level and stage filters on the live board. */
/* D157: when, level and stage; a hidden level or stage is struck through. D206: side by side on one line, wrapping only
   when the pane is too narrow for them. */
.board-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 4px 0 10px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-row .d-label { margin: 0; }
.filter-row .d-chip b { margin-left: 2px; font-variant-numeric: tabular-nums; }
.filter-row .d-chip.off { opacity: 0.45; text-decoration: line-through; }
.filter-row .day-pick { width: auto; padding: 3px 6px; font-size: 0.82rem; }
.past-days { margin: 0 0 8px; }
.d-chip.small { padding: 3px 10px; font-size: 0.82rem; }
.board-head .d-link { margin-left: auto; }

/* R41: the day view, a timeline and a map of the day's calls. */
.day-view h2 { font-size: 1rem; margin: 18px 0 6px; }
/* D128: a day picker (shift, day view), and who worked the day with the calls they were sent to. */
.shift-day { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.day-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* The day itself reads a little larger than the buttons around it. */
.day-picker .d-input.small { width: auto; font-size: 0.9rem; }
.day-crews { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.day-crew { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); }
.day-crew h3 { margin: 0 0 4px; font-size: 0.9rem; }
.day-crew ul { list-style: none; margin: 0; padding: 0; }
.day-crew li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0; font-size: 0.85rem; }
.day-calls { margin-left: auto; color: var(--muted); font-size: 0.78rem; }
/* D129: the schedule, a week of the regular staff: a cell per person and day, a row per team. */
.schedule-wrap { overflow-x: auto; }
.schedule-grid { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.schedule-grid th, .schedule-grid td { padding: 2px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.schedule-grid thead th { font-weight: 600; white-space: nowrap; }
.schedule-grid thead th span { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.schedule-grid thead th.today { box-shadow: inset 0 -3px 0 var(--navy); }
.schedule-grid tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.schedule-sum td.short { color: var(--warn-ink, #7a4a00); font-weight: 700; }
.schedule-cat th { padding-top: 14px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.schedule-team th { font-weight: 600; }
.schedule-team select { width: auto; margin-left: 8px; }
.schedule-cell { width: 100%; min-width: 76px; height: 28px; padding: 0 4px; border: 1px solid var(--line); border-radius: 6px; background: transparent;
    color: var(--ink); font: inherit; font-size: 0.75rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-cell.on { background: color-mix(in srgb, var(--lvl-green) 16%, var(--surface)); border-color: var(--lvl-green); }
.schedule-cell.team { font-weight: 600; }
.schedule-cell.team.on { background: color-mix(in srgb, var(--navy) 10%, var(--surface)); border-color: var(--navy); }
.schedule-cell:disabled { cursor: default; opacity: 0.55; }
/* D143: approved time off blocks a day; a day asked off waits for an answer; each person's week in hours and overtime. */
.schedule-cell.away { opacity: 1; color: var(--muted); background: repeating-linear-gradient(135deg, #f1f1f1 0 6px, var(--surface) 6px 12px); }
.schedule-cell.asked { border-style: dashed; border-color: var(--warn-ink, #7a4a00); color: var(--warn-ink, #7a4a00); }
.schedule-cell.on.asked { color: inherit; }
.schedule-hours { white-space: nowrap; text-align: right !important; font-variant-numeric: tabular-nums; padding-left: 10px !important; }
.schedule-hours b, .schedule-hours .muted { margin-left: 6px; }
.schedule-hours.overtime b { color: var(--warn-ink, #7a4a00); }
.schedule-size { margin-left: 6px; font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.schedule-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.schedule-week { margin: 6px 0 8px; }
.schedule-short { margin-left: 8px; color: var(--warn-ink, #7a4a00); font-weight: 600; }
.schedule-filled { display: block; margin-top: 4px; color: var(--muted); }
.timeoff-ask { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 14px; margin: 8px 0; }
.timeoff-ask .d-field { margin-bottom: 0; }
.timeoff-ask select.d-input, .timeoff-ask input.d-input { width: auto; }
.timeoff h2 { margin: 18px 0 6px; font-size: 1rem; }
.timeoff-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.timeoff-table th, .timeoff-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.timeoff-table thead th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.timeoff-table tbody th { font-weight: 500; white-space: nowrap; }
.timeoff-clash { color: var(--warn-ink, #7a4a00); }
.timeoff-answers { display: inline-flex; gap: 6px; }
.setup-week label, .setup-overtime { display: inline-flex; align-items: center; gap: 6px; }
.setup-left { white-space: nowrap; }
.setup-left .muted { margin-right: 6px; font-size: 0.8rem; }

/* D144: the daily logs: a checklist gone through each day, lines kept as written, and the day's record printed. */
.log-page h2, .day-view h2 { margin-top: 18px; }
.log-who { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.log-who .d-input { width: 18em; }
.log-sheet, .log-lines { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.log-sheet th, .log-sheet td, .log-lines th, .log-lines td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.log-sheet tbody th, .log-lines tbody th { font-weight: 500; }
.log-group th { padding-top: 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.log-missing { color: var(--warn-ink, #7a4a00); }
.log-missed { margin-left: 8px; padding: 0 6px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; background: var(--warn-bg); color: var(--warn-ink, #7a4a00); }
.day-log-lines summary { cursor: pointer; margin: 2px 0 6px; color: var(--muted); }
.log-actions { white-space: nowrap; text-align: right !important; }
.log-actions .d-chip { margin-left: 4px; }
.log-lines thead th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
/* D181: the dispatch log of a day: kinds shown or hidden, a search, each call's lines marked with its level's colour. */
.log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.log-filters .d-input { flex: 0 1 280px; margin-left: auto; }
.day-log-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.day-log-table thead th:nth-child(2) { width: 30%; }
.day-log-table thead th:nth-child(3) { width: 18%; }
.day-log-table td:last-child { white-space: nowrap; }
/* D186: a call off the board is closed once nothing waits; the day's calls still open, at the top of the log. */
.tag.ok { background: #e6f4ea; color: var(--st-available); }
.still-open { margin: 10px 0; padding: 8px 12px; }
.still-open h2 { margin: 0 0 2px; font-size: 1rem; }
.still-open ul { margin: 4px 0 0; padding: 0 0 0 4px; list-style: none; }
.still-open li { padding: 2px 0 2px 8px; border-left: 4px solid var(--lvl, var(--line)); font-size: 0.9rem; }
.day-log-table tr[class*="lvl-"] th { border-left: 4px solid var(--lvl); }
.day-log-table tr.kind-shift th, .day-log-table tr.kind-logs th { border-left: 4px solid var(--line); color: var(--muted); }
.log-record { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.log-record > .d-input { width: 16em; }
.day-log { margin: 6px 0 12px; }
.day-log h3 { margin: 8px 0 4px; font-size: 0.95rem; }
/* The logs of a day line up, one under the other: time, what, done, note, by. */
.day-log .log-lines { table-layout: fixed; }
.day-log .log-lines td:nth-child(1) { width: 4.5em; }
.day-log .log-lines th { width: 30%; }
.day-log .log-lines td:nth-child(3) { width: 14%; }
.day-log .log-lines td:nth-child(5) { width: 18%; }

@media print {
    .desk-top, .desk-banner, .day-picker, .no-print, .shift-day { display: none !important; }
    .desk-panel { border: 0; padding: 0; }
    a.d-link { color: inherit; text-decoration: none; }
}
/* D130, D136: volunteer days as the roster the volunteers know: a calendar of the months, each open day with how many are
   rostered (blue with someone, green once full), the day picked beside it to sign up or to place everyone in a zone. */
.roster-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin: 8px 0 12px; }
.roster-me .d-input { width: auto; min-width: 16em; }
.roster-months { display: flex; align-items: center; gap: 6px; }
.roster-months .d-input { width: auto; }
/* The calendar and the day's panel side by side; its own name, since the board's patroller column is .roster. */
.roster-days { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.roster-calendar { max-height: 72vh; overflow-y: auto; padding-right: 6px; }
.roster-month { margin: 10px 0 4px; padding: 4px; text-align: center; font-size: 1rem; background: color-mix(in srgb, var(--navy) 8%, var(--surface)); border-radius: 6px; }
.roster-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.roster-weekday { padding: 2px 4px; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.roster-day { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 64px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 0.75rem; text-align: left; color: var(--muted); background: transparent; }
.roster-day .roster-date { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.roster-day.open { cursor: pointer; color: var(--ink); border-color: var(--line); background: var(--surface); }
.roster-day.open.some { background: color-mix(in srgb, #5b6ee0 20%, var(--surface)); border-color: color-mix(in srgb, #5b6ee0 45%, var(--surface)); }
.roster-day.open.full { background: color-mix(in srgb, var(--lvl-green) 28%, var(--surface)); border-color: var(--lvl-green); }
.roster-day.open.past { opacity: 0.55; }
.roster-day.open.on { box-shadow: 0 0 0 2px var(--navy); }
.roster-mine { margin-top: auto; padding: 0 5px; border-radius: 4px; background: var(--navy); color: var(--navy-ink); font-weight: 600; }
.roster-panel { position: sticky; top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.roster-panel h2 { margin: 0 0 2px; font-size: 1.1rem; }
.roster-panel h3 { margin: 12px 0 4px; font-size: 0.85rem; color: var(--muted); }
.roster-count { margin: 0 0 8px; color: var(--muted); }
.roster-names { margin: 0; padding-left: 18px; }
.roster-zones { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.roster-place { max-width: none; }
.roster-place th[scope="row"] { color: var(--ink); font-weight: 500; white-space: nowrap; }
@media (max-width: 900px) { .roster-days { grid-template-columns: minmax(0, 1fr); } }
/* D132: the reviewer's day summary, the one place with the guests' names, and its search. */
.review-links { margin: 0 0 8px; }
.day-summary .shift-day .d-input[type="search"] { width: auto; min-width: 18em; }
.day-summary-table { border-collapse: collapse; width: 100%; }
.day-summary-table th, .day-summary-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.day-summary-table thead th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.day-summary-table .summary-person { display: flex; align-items: center; gap: 6px; }
.day-summary-table .summary-person .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lvl, var(--lvl-unknown)); flex: none; }
.day-summary-table mark { background: color-mix(in srgb, var(--lvl-yellow) 35%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; }
.timeline-chart, .map-chart { width: 100%; height: auto; display: block; background: var(--surface, #fff); }
.timeline-chart .hour { stroke: var(--line); stroke-width: 1; }
.timeline-chart .now { stroke: var(--alert, #c8102e); stroke-width: 2; stroke-dasharray: 4 3; }
.timeline-chart .hour-label { font-size: 11px; fill: #5c5c5c; text-anchor: middle; }
.timeline-chart .row-label { font-size: 11px; fill: #111111; text-anchor: end; }
.timeline-chart .span { fill: var(--lvl, var(--lvl-unknown)); }
.timeline-chart .span.ended { opacity: 0.45; }
.timeline-chart .span-label { font-size: 10px; font-weight: 700; fill: #fff; }
.map-chart { max-width: 820px; border: 1px solid var(--line); border-radius: 10px; background: #f7f7f7; }
.map-chart .run { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.map-chart .grade-easiest { stroke: #1f8a4c; }
.map-chart .grade-more_difficult { stroke: #1d5fbf; }
.map-chart .grade-most_difficult, .map-chart .grade-extreme { stroke: #1b1b1b; }
.map-chart .grade-extreme { stroke-dasharray: 6 3; }
.map-chart .lift { fill: none; stroke: #8a94a3; stroke-width: 1.5; stroke-dasharray: 2 4; }
.map-chart .spot { fill: var(--lvl, var(--lvl-unknown)); stroke: #fff; stroke-width: 2; }
.map-chart .ended .spot { opacity: 0.5; }
.map-chart .spot-label { font-size: 11px; font-weight: 700; fill: #fff; text-anchor: middle; }
g.lvl-unknown { --lvl: var(--lvl-unknown); }

/* R40: equipment on the board. */
.d-input.small { padding: 2px 6px; font-size: 0.8rem; width: auto; }
.call-gear { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; grid-column: 2 / -1; }
.call-gear .gear { white-space: nowrap; }
.gear { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; background: #f0f0f0; }
.gear.arrived { background: var(--ok-bg); color: var(--ok-ink); }

/* R51: a staff task, the part only. */
fieldset.task-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.task-page .step { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.task-page .step h2 { font-size: 1rem; margin: 0 0 6px; }

/* D121: the resort setup: tabs, a form for the resort, tables for the staff, zones and runs, a card per cache. */
.setup-actions { display: flex; gap: 8px; }
.setup-tabs { margin: 12px 0 14px; }
.setup-problems { margin: 8px 0; padding: 8px 10px 8px 28px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); font-size: 0.85rem; }
.setup-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; max-width: 900px; }
.setup-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.setup-form small { font-weight: 400; color: var(--muted); }
.d-input.short { width: 6em; }
.setup-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.setup-add .d-input { width: auto; flex: 0 1 240px; }
.setup-categories { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.setup-categories .link { margin-left: 4px; border: 0; background: none; cursor: pointer; color: var(--muted); }
/* D173: a list of the record with the resort's own added at its end; what each list does, just under it. */
.setup-categories .setup-add { flex-wrap: nowrap; gap: 6px; margin: 0 0 0 6px; }
.setup-categories .setup-add .d-input { flex: 0 1 200px; }
.setup-hint { max-width: 900px; margin: -6px 0 18px; }
/* D178: the zones table has room for each zone's hut and keeps the zone names whole. */
.setup-table.setup-zones { max-width: 1120px; }
.setup-zones td:first-child .d-input { min-width: 150px; }
.setup-hut { display: flex; align-items: center; gap: 6px; }
.setup-hut .d-input { flex: 0 0 190px; }
.setup-table { width: 100%; max-width: 900px; border-collapse: collapse; font-size: 0.85rem; }
.setup-table th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 600; color: var(--muted); }
.setup-table td { padding: 3px 6px; border-bottom: 1px solid var(--rule); }
/* D135: the staff table describes each person, their roles open under their row; the teams table names each person. */
.setup-table.setup-staff { max-width: none; }
.setup-table.setup-staff .d-input { min-width: 0; }
.setup-roles td { background: var(--bg); padding: 6px 8px; }
.setup-roles .d-label { margin-right: 6px; }
.teams .setup-table th[scope="row"] { color: var(--ink); font-weight: 500; white-space: nowrap; }
.setup-table td .d-input:not(.short) { width: 100%; }
.setup-caches { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.setup-cache { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.setup-cache-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.setup-cache-head .d-input { width: auto; min-width: 0; }
.setup-cache-head .d-input:first-child { flex: 1 1 auto; font-weight: 600; }
.setup-cache-head select.d-input { flex: 0 1 40%; }
.setup-cache .d-button.small:last-child { margin-top: 6px; }

/* D204: the record read on the review desk, every answer once; Ask and Correct beside the answer, the box they open under it. */
.review-record { margin: 4px 0 18px; }
.review-record .fr-part { margin-top: 18px; font-size: 1.1rem; }
.review-record .fr-fields > div { padding: 2px 6px; border-radius: 6px; }
.review-record .fr-fields > div:hover { background: #f4f4f6; }
.review-record .fr-fields > div.missing dd { color: var(--warn-ink); font-style: italic; }
.review-record .fr-fields > div.asked { box-shadow: inset 3px 0 0 var(--warn-ink); }
.review-record dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.review-record dd .fr-text, .review-record dd .fr-parts { flex: 1 1 auto; }
.review-record .row-tool { padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: 0.78rem; line-height: 1.5; cursor: pointer; }
.review-record .row-tool:hover { border-color: var(--navy); color: var(--navy); }
.review-record .fr-asked { grid-column: 1 / -1; margin: 2px 0 4px; font-size: 0.9rem; color: var(--warn-ink); }
.review-record .fr-under { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.review-record .fr-under .d-input { flex: 1 1 18em; }
.review-record .fr-under .fix-input { flex: 1 1 100%; }
.review-record .row-tool { opacity: 0.55; }
.review-record .fr-fields > div:hover .row-tool, .review-record .row-tool:focus-visible { opacity: 1; }