/* Dark is the app's look on every computer (operators' choice, 6 October 2026). */
:root {
  color-scheme: dark;
  --bg: #111419;
  --surface: #1a1e25;
  --surface-2: #232833;
  --surface-3: #161a20;     /* card footers */
  --text: #e8eaee;
  --text-2: #c9ced8;        /* secondary text that still needs full contrast */
  --muted: #a7afbd;
  --border: #2c323d;
  --focus: #7fb0ff;
  --accent: #6ea2ff;
  --accent-soft: #1d2b45;
  --accent-text: #0b1220;
  --hold: #ffb27a;          /* review holds and blocked reviews */
  --hold-bg: #3a2415;
  --hold-border: #6b3a1c;
  --waiting: #7cc4f0;       /* pending worker checks, queued rechecks */
  --waiting-bg: #13293a;
  --unverified: #d3a6f5;    /* unconfirmed automatic writes */
  --unverified-bg: #2c1d3a;
  --ok: #7fd49a;            /* verified saved results */
  --ok-bg: #16301f;
  --danger: #ff8f98;        /* unknown outcome, errors */
  --danger-bg: #3b1a1e;
  --demo: #ffe08a;
  --demo-bg: #3a3212;
  --skip: #8456c2;
  --live: #3fb06a;
  --radius: 10px;
  --radius-lg: 16px;
  /* The page is three rota cards wide; each card fits the longest rota's order on one line.
     The app sets --rota-members from the dashboard (5 to 10); 7 is a sensible start. */
  --rota-members: 7;
  --chain-item: 66px;
  --chain-gap: 6px;
  --rota-card: calc(var(--rota-members) * (var(--chain-item) + var(--chain-gap)) - var(--chain-gap) + 46px);
  --page-max: calc(3 * var(--rota-card) + 2 * var(--grid-gap) + 48px);
  --grid-gap: 20px;
  --later: #5aa8d8;
  --shadow: none;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
/* The earlier light palette, kept for a possible light option (not switched on). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9; --surface: #ffffff; --surface-2: #eef0f4; --surface-3: #fafbfd; --text: #1b1f27; --text-2: #3d4554; --muted: #555e6e; --border: #e1e5ec;
  --focus: #1a5fd6; --accent: #1a5fd6; --accent-soft: #e8effc; --accent-text: #ffffff;
  --hold: #9a3b00; --hold-bg: #fff1e6; --hold-border: #f0c9a8; --waiting: #0b5a87; --waiting-bg: #e7f3fb; --unverified: #6a2c91; --unverified-bg: #f4ecfa;
  --ok: #1e6b35; --ok-bg: #e8f5ec; --danger: #a3141f; --danger-bg: #fdecee; --demo: #6b4e00; --demo-bg: #fff4c2; --skip: #6a2c91; --live: #2e8b57;
  --shadow: 0 1px 2px rgba(20, 24, 33, 0.06), 0 1px 1px rgba(20, 24, 33, 0.04);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 0.6rem; }
a { color: var(--accent); }
code, .mono { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: 0.86em; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: 0.87rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--surface); color: var(--text); padding: 8px 12px; border: 2px solid var(--focus); z-index: 10; }
.skip-link:focus { top: 8px; }

/* Header */
.mode-banner { padding: 8px 16px; font-weight: 600; text-align: center; }
.mode-banner.demo { background: repeating-linear-gradient(135deg, var(--demo-bg), var(--demo-bg) 14px, transparent 14px, transparent 28px), var(--demo-bg); color: var(--demo); border-bottom: 2px solid var(--demo); }
.mode-banner.live { background: var(--surface-2); color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border); }
.app-header { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding: 12px max(24px, calc((100% - var(--page-max)) / 2 + 24px)); background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: flex; gap: 10px; align-items: center; min-width: 0; }
/* The logo's navy centre needs a light tile to stay visible on the dark header. */
.brand-logo { width: 30px; height: 30px; flex: none; display: block; box-sizing: content-box; background: #f5f6f8; border-radius: 9px; padding: 3px; }
.brand-name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.brand-sub { color: var(--muted); font-size: 0.83rem; overflow-wrap: anywhere; line-height: 1.2; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.conn.on { color: var(--live); }
.conn.on .conn-dot { box-shadow: 0 0 0 3px var(--ok-bg); }
.conn.problem { color: var(--hold); }
.conn.off { color: var(--muted); font-weight: 500; }
.header-status { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-left: auto; }
.header-status button { font-size: 0.87rem; padding: 5px 11px; min-height: 34px; }
.header-status .who { margin-right: 4px; }
.who { font-size: 0.9rem; text-align: right; line-height: 1.25; }
.who strong { display: block; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 1 auto; }
.tabs[hidden] { display: none; }
.tabs a { padding: 8px 14px; border-radius: 9px; color: var(--text-2); text-decoration: none; white-space: nowrap; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tabs a:hover { color: var(--text); background: var(--surface-2); }
.tabs a[aria-current="page"]:hover { background: var(--accent-soft); color: var(--accent); }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--hold); color: #1a0d03; font-size: 0.78rem; font-weight: 700; }

main { max-width: var(--page-max); margin: 0 auto; padding: 28px 24px 48px; }
main:focus { outline: none; }
/* Wide screens: keep running text to a readable line length; grids and tables still use the full width. */
main p, main li { max-width: 110ch; }
.notices { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; }
.notices:empty { display: none; }
.notices > * { margin-top: 14px; }

/* Buttons and forms */
button, .button { font: inherit; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; min-height: 36px; }
button:hover:not(:disabled), .button:hover { background: var(--surface-2); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
button.danger { border-color: var(--danger); color: var(--danger); }
button.link { border: none; background: none; color: var(--accent); padding: 0 2px; min-height: auto; text-decoration: underline; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
label { font-weight: 600; }
input[type="text"], input[type="search"], select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; max-width: 100%; }
textarea { width: 100%; min-height: 84px; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-hint { font-size: 0.86rem; color: var(--muted); font-weight: 400; }
.field-error { color: var(--danger); font-size: 0.9rem; }
/* Filters sit in a toolbar card above the list they filter. */
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 14px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.filters label { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.filters .field { flex: 1 1 180px; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.checkbox input { margin-top: 4px; width: 18px; height: 18px; flex: none; }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.card + .card, .section + .section { margin-top: 16px; }
/* Inside a grid the gap does the spacing; a sibling margin would push cards out of line. */
.grid > .card { margin-top: 0; }
.grid > .card { display: flex; flex-direction: column; }
.section { margin-top: 24px; }
.section-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.stale-note { font-weight: 600; color: var(--danger); }

.kv { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; padding: 1px 10px; font-size: 0.82rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.chip.hold { background: var(--hold-bg); color: var(--hold); border-color: var(--hold); }
.chip.waiting { background: var(--waiting-bg); color: var(--waiting); border-color: var(--waiting); }
.chip.unverified { background: var(--unverified-bg); color: var(--unverified); border-color: var(--unverified); }
.chip.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.chip.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.chip.neutral { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.chip.demo { background: var(--demo-bg); color: var(--demo); border-color: var(--demo); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

/* Alerts */
.alert { border-radius: var(--radius); padding: 14px 16px; border: 1px solid; border-left-width: 6px; background: var(--surface); }
.alert h2, .alert h3 { font-size: 1.02rem; margin-bottom: 4px; }
.alert.danger { border-color: var(--danger); background: var(--danger-bg); }
.alert.hold { border-color: var(--hold); background: var(--hold-bg); }
.alert.waiting { border-color: var(--waiting); background: var(--waiting-bg); }
.alert.ok { border-color: var(--ok); background: var(--ok-bg); }
.alert.info { border-color: var(--border); background: var(--surface); }
.alert.demo { border-color: var(--demo); background: var(--demo-bg); }
.alert .code { font-size: 0.82rem; color: var(--muted); }

/* Review queue */
.ticket-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; }
.ticket-group > header { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ticket-group > header h3 { margin: 0; font-size: 1.05rem; }
.case-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.case-row:last-child { border-bottom: none; }
.case-row .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.9rem; color: var(--muted); margin-top: 4px; }
.case-row .problem { font-weight: 600; }

/* Guided review */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; counter-reset: step; }
.steps li { counter-increment: step; padding: 4px 12px 4px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 0.87rem; }
.steps li::before { content: counter(step); display: inline-block; width: 1.4em; height: 1.4em; margin-right: 6px; border-radius: 50%; text-align: center; background: var(--border); color: var(--text); font-weight: 700; font-size: 0.8rem; line-height: 1.4em; }
.steps li[aria-current="step"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.steps li[aria-current="step"]::before { background: var(--accent-text); color: var(--accent); }
.options { display: flex; flex-direction: column; gap: 10px; border: none; padding: 0; margin: 0; }
.options legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.option { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-weight: 400; }
.option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.option input { margin-top: 5px; width: 18px; height: 18px; }
.option .desc { font-weight: 600; }
.option .effect { grid-column: 2; font-size: 0.9rem; color: var(--muted); }
.change { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; background: var(--surface-2); margin: 0; }
.change-row { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 2px 16px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.change-row:last-child { border-bottom: none; }
.change-row dt { color: var(--muted); }
.change-row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.change .arrow { color: var(--muted); }
.change-none { padding: 10px 14px; }
@media (max-width: 640px) { .change-row { grid-template-columns: 1fr; } }
.expiry { font-variant-numeric: tabular-nums; font-weight: 600; }
.person-id { color: var(--muted); font-size: 0.8rem; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.loading { display: flex; gap: 10px; align-items: center; padding: 14px 0; color: var(--muted); }

/* History */
details.record { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 8px; }
details.record > summary { cursor: pointer; padding: 10px 14px; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: baseline; list-style: none; }
details.record > summary::-webkit-details-marker { display: none; }
.record-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; min-width: 0; }
.record-chevron { color: var(--accent); display: inline-block; }
details.record[open] > summary .record-chevron { transform: rotate(90deg); }
details.record[open] > summary { border-bottom: 1px solid var(--border); }
details.record .body { padding: 12px 14px; }
.reason-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); padding: 8px 10px; border-radius: 6px; }

/* Sign-in */
.signin { max-width: 440px; margin: clamp(16px, 8vh, 88px) auto 24px; }
.signin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px 22px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); }
.signin-logo { display: block; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px; }
.signin-card h1 { font-size: 1.5rem; margin-bottom: 6px; }
.signin-lead { color: var(--muted); margin-bottom: 24px; }
.signin-card .alert, .signin-panel { text-align: left; margin: 0 0 16px; }
.signin-loading { justify-content: center; }
.signin-button { width: 100%; justify-content: center; min-height: 46px; font-size: 1rem; font-weight: 600; gap: 12px; }
/* Microsoft's sign-in button style: white, with the four-square logo. */
.signin-button.microsoft { background: #fff; color: #1b1f27; border-color: #fff; }
.signin-button.microsoft:hover:not(:disabled) { background: #eceef2; }
.ms-logo { display: inline-grid; grid-template-columns: 9px 9px; gap: 2px; }
.ms-logo span { width: 9px; height: 9px; background: #f25022; }
.ms-logo span:nth-child(2) { background: #7fba00; }
.ms-logo span:nth-child(3) { background: #00a4ef; }
.ms-logo span:nth-child(4) { background: #ffb900; }
.signin-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.signin-step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.signin-step .step-number { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
.signin-step .step-title { font-weight: 600; margin: 3px 0 8px; }
.signin-step .loading { padding: 0; }
.code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.signin-help { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.signin-help p { margin-bottom: 4px; }
.device-code { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.12em; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; padding: 8px 14px; border: 2px dashed var(--accent); border-radius: 8px; display: inline-block; user-select: all; }
.plain-page { max-width: 640px; margin: 60px auto; padding: 0 16px; }
.demo-controls { border: 2px dashed var(--demo); background: var(--demo-bg); }
.demo-controls .actions button { font-size: 0.88rem; }

@media (max-width: 640px) {
  /* Header, notices and page keep one shared edge. */
  .app-header { padding: 10px 12px; }
  .who { text-align: left; }
  main { padding: 16px 12px 40px; }
  .notices { padding-left: 12px; padding-right: 12px; }
  .case-row { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 0 0; }
  .kv dt { margin-top: 8px; }
}
.options-intro { margin: 18px 0; }
.button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.button.primary:hover { filter: brightness(1.08); background: var(--accent); }
.signin-step .button { margin-bottom: 6px; }

/* Dashboard (6 October 2026 redesign: design A, dark).
   Rota cards sit 3 across on desktop screens (1080p and 4K alike), 2 on smaller laptops and
   tablets, 1 on phones. */
.dash { display: flex; flex-direction: column; gap: 28px; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dash-head h1 { margin: 0; font-size: 1.75rem; font-weight: 650; letter-spacing: -0.01em; }
.dash-meta { margin: 4px 0 0; color: var(--muted); }
.auto-refresh { position: relative; display: inline-flex; align-items: center; gap: 16px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; flex: none; }
.auto-refresh-copy { display: grid; gap: 1px; font-size: 0.86rem; line-height: 1.3; }
.auto-refresh-copy .muted { font-size: 0.78rem; font-weight: 400; }
.auto-refresh input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { width: 34px; height: 20px; padding: 2px; border: 1px solid var(--muted); border-radius: 20px; background: var(--surface-2); pointer-events: none; }
.switch-track::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); }
.auto-refresh input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.auto-refresh input:checked + .switch-track::before { transform: translateX(14px); background: var(--accent-text); }
.auto-refresh:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.auto-refresh:hover { border-color: var(--accent); }
.review-link { color: var(--accent); font-weight: 600; }
.review-link svg { width: 16px; height: 16px; }
.dash-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-section > p { margin: 0; }
.dash-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 36px; }
.dash-section-head h2 { margin: 0; font-size: 1.25rem; }
.dash .table-wrap { border-radius: var(--radius-lg); }

.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.tile-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.tile-icon svg { width: 20px; height: 20px; }
.tile-icon.hold { background: var(--hold-bg); color: var(--hold); }
.tile-icon.waiting { background: var(--waiting-bg); color: var(--waiting); }
.tile-icon.ok { background: var(--ok-bg); color: var(--ok); }
.tile-icon.neutral { background: var(--surface-2); color: var(--text-2); }
.tile-icon.skip { background: #2a1f3d; color: #b48ef0; }

/* Status bar: the three counts, the most recent turn and future skips, in one card.
   The 1px grid gap over the border colour draws the dividers, however the segments wrap. */
.statusbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.stat { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
a.stat:hover { background: var(--surface-2); }
.stat-text { min-width: 0; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 2rem; }
.stat-value.is-text { font-size: 1.15rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-label { font-weight: 600; }
.stat-desc { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.statusbar.is-stale .stat-value { opacity: 0.6; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.83rem; color: var(--muted); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-ring { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.legend-away { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); outline: 1.5px dashed var(--hold); outline-offset: 1px; }
.legend-off { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); outline: 1.5px solid #5d6576; outline-offset: 1px; opacity: 0.75; }

.avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--avatar, #4a6f84); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-weight: 650; line-height: 1; }
.avatar.is-last { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.avatar.is-away { background: var(--surface-2); color: var(--muted); outline: 1.5px dashed var(--hold); outline-offset: 1px; }
.skip-badge { position: absolute; top: -6px; right: -10px; padding: 1px 6px; border-radius: 99px; background: var(--skip); color: #ffffff; font-size: 0.72rem; font-weight: 700; line-height: 1.35; border: 2px solid var(--surface); }
.skip-badge.static { position: static; border: 0; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 0.83rem; font-weight: 600; white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.hold, .pill.away { background: var(--hold-bg); color: var(--hold); }
.pill.part { background: var(--waiting-bg); color: var(--waiting); }
.pill.off { background: var(--surface-2); color: var(--text-2); }

/* Rota cards: cards in a row share a height, so the footers line up along the bottom. */
.rcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.rcard.is-held { border-color: var(--hold-border); }
.rcard.is-stale .rcard-last, .rcard.is-stale .rcard-order { opacity: 0.6; }
.rcard-head { padding: 18px 20px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rcard-head h3 { margin: 0; font-size: 1.2rem; font-weight: 650; overflow-wrap: anywhere; }
.rcard-sub { font-size: 0.83rem; color: var(--muted); }
.rcard-hold { margin: 14px 20px 0; padding: 10px 12px; border-radius: 10px; background: var(--hold-bg); color: var(--hold); font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rcard-hold a { margin-left: auto; color: var(--hold); font-weight: 600; }
.rcard-last { padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.rcard-last-name { font-size: 1.1rem; font-weight: 650; line-height: 1.3; }
.rcard-meta { font-size: 0.83rem; color: var(--muted); }
.eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.rcard-order { padding: 0 20px 18px; }
.rcard-order .eyebrow { margin-bottom: 10px; }
.chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px var(--chain-gap); align-items: flex-start; }
.chain-item { width: var(--chain-item); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.chain-avatar { position: relative; display: inline-flex; }
.chain-name { font-size: 0.83rem; line-height: 1.2; color: var(--text-2); overflow-wrap: anywhere; }
.chain-name.is-last { font-weight: 650; color: var(--text); }
.chain-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.chain-away { font-size: 0.73rem; line-height: 1.2; }
.chain-away.now { color: var(--hold); }
.chain-away.later { color: var(--waiting); }
.rcard-foot { margin-top: auto; min-height: 50px; padding: 10px 20px; border-top: 1px solid var(--border); background: var(--surface-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.writes { display: inline-flex; align-items: center; gap: 7px; font-size: 0.87rem; color: var(--text-2); }
.writes .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.on { background: var(--live); }
.dot.off { background: var(--muted); }
.foot-link { font-weight: 600; text-decoration: none; }
.foot-link:hover { text-decoration: underline; }

/* Today's availability: a full-width strip; the people inside flow into as many columns as fit. */
.avail-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.87rem; color: var(--muted); }
.btn-small { font-size: 0.9rem; padding: 6px 12px; min-height: 36px; white-space: nowrap; flex: none; }
.avail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.avail-card > .alert, .avail-card > .loading { margin: 0; }
.avail-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.avail-count { font-size: 1.05rem; }
.avail-later { display: inline-flex; align-items: center; gap: 7px; font-size: 0.87rem; color: var(--muted); }
.avail-later::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--later); }
.avail-bar { flex: 1 1 240px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; display: flex; }
.avail-bar .seg-all { background: var(--live); }
.avail-bar .seg-later { background: var(--later); }
.avail-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.avail-person { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.avail-who { flex: 1; min-width: 0; line-height: 1.3; }
.avail-name { font-weight: 600; overflow-wrap: anywhere; }
.avail-rotas { font-size: 0.83rem; color: var(--muted); overflow-wrap: anywhere; }
.avail-when { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; line-height: 1.3; }
.avail-time { font-size: 0.83rem; color: var(--muted); }
.avail-foot, .avail-empty, .avail-note { margin: 0; font-size: 0.83rem; color: var(--muted); }
.avail-foot { padding-top: 14px; border-top: 1px solid var(--border); }
.avail-empty { color: var(--text-2); }

.empty-panel { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.empty-title { font-weight: 600; }
.empty-text { font-size: 0.87rem; color: var(--muted); }
.empty-panel > .btn-small { margin-left: auto; }

/* Page heads for Reviews, History and Help, matching the dashboard greeting. */
.page-head { margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: 1.75rem; font-weight: 650; letter-spacing: -0.01em; }
.page-sub { margin: 4px 0 0; color: var(--muted); }
.results-count { margin: 0 0 12px; font-size: 0.87rem; color: var(--muted); }
.results-count:empty { display: none; }

/* Header Refresh: keeps its width while it shows progress and the result. */
.refresh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 8.2em; }
.refresh-btn .spinner { width: 13px; height: 13px; }
.refresh-btn:disabled { opacity: 1; cursor: progress; }
.refresh-btn.is-done { color: var(--ok); border-color: var(--ok); }
.refresh-btn.is-failed { color: var(--hold); border-color: var(--hold); }

/* Help: two columns of cards, technical details across the full width. */
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.help-grid > .card { margin-top: 0; }
.help-grid > .wide { grid-column: 1 / -1; }
.help-grid h2 { font-size: 1.15rem; margin-bottom: 12px; }
.help-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.help-grid .card > p { margin: 0 0 10px; }
.technical-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.technical-layout > .card { margin: 0; padding: 22px 24px; }
.technical-card h2 { font-size: 1.1rem; margin: 0; }
.technical-card code { font-size: 0.82rem; color: var(--text-2); overflow-wrap: anywhere; }
/* Label and value rows with a hairline between them. */
.technical-kv { font-size: 0.9rem; gap: 0; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); }
.technical-kv > dt, .technical-kv > dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--border); }
.technical-kv > dt:first-of-type, .technical-kv > dd:first-of-type { border-top: 0; padding-top: 0; }
.technical-kv > dd { padding-left: 18px; }
.technical-kv dt { overflow-wrap: anywhere; }
.technical-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.technical-card-head p { margin: 3px 0 0; }
.technical-head-actions { display: flex; align-items: center; gap: 10px; }
.technical-card-head h2 { margin: 0; }
.archive-card, .reports-status { grid-column: 1 / -1; }
.archive-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.archive-mode { padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-3); }
.archive-mode > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.archive-mode p { margin: 4px 0 0; font-size: 0.82rem; }
.archive-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.archive-group { min-width: 0; }
.archive-group h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
/* Measurements: label on the left, figure on the right. */
.archive-group .technical-kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); font-size: 0.86rem; }
.archive-group .technical-kv > dd { text-align: right; font-variant-numeric: tabular-nums; }
.archive-group .technical-kv > dt:first-of-type, .archive-group .technical-kv > dd:first-of-type { padding-top: 9px; }
.archive-result { margin-top: 20px; }
.reports-status-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.reports-status-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; background: var(--surface-3); }
.reports-status-label { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.reports-status-tile strong { font-size: 1rem; overflow-wrap: anywhere; }
.reports-status .alert { margin: 14px 0 0; }
.help-foot { margin: 20px 0 0; }

/* Help as a guide (19 Oct 2026): a key with small samples, short definitions, tiles, and folds
   for the less common problems, so nothing reads as a wall of text. */
.help-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.help-key { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.help-key-sample { display: inline-flex; justify-content: center; align-items: center; min-height: 22px; }
.help-key strong { display: block; }
.help-key .muted, .help-terms dd { font-size: 0.92rem; }
.help-dot { width: 12px; height: 12px; border-radius: 50%; }
.help-dot.paused { background: var(--waiting); }
.help-dot.live { background: var(--live); }
.help-terms { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.help-terms dt { font-weight: 600; }
.help-terms dd { margin: 0; color: var(--muted); }
.help-note { max-width: none; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }
.help-grid .card > p.help-note { margin: 16px 0 0; }
.help-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.help-tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-3); }
.help-tile p { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.help-tile-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.help-tile-icon svg { width: 17px; height: 17px; }
.help-grid .help-list li { color: var(--text-2); }
.help-fold { margin-bottom: 8px; background: var(--surface-3); }
.help-fold > summary { list-style: none; }
.help-fold > summary::-webkit-details-marker { display: none; }
.help-fold > summary::before { content: "\25B8"; color: var(--muted); width: 1em; }
.help-fold[open] > summary::before { content: "\25BE"; }
.help-fold:last-of-type { margin-bottom: 0; }
.help-fold .body p { margin: 0 0 8px; }
.help-fold .body p:last-child { margin-bottom: 0; }
.help-grid > .help-foot { grid-column: 1 / -1; margin: 0; }
.changelog-list { list-style: none; margin: 0; padding: 0; display: grid; }
.changelog-release > summary { display: grid; grid-template-columns: 145px minmax(0, 1fr) 14px; gap: 12px 24px; align-items: center; padding: 18px 0; cursor: pointer; list-style: none; border-radius: 6px; }
.changelog-release > summary::-webkit-details-marker { display: none; }
.changelog-release > summary:hover .changelog-title { color: var(--accent); }
.changelog-release[open] > summary .record-chevron { transform: rotate(90deg); }
.changelog-title { font-weight: 600; font-size: 1rem; }
.changelog-items { list-style: none; margin: 0; padding: 0 26px 20px 169px; display: grid; gap: 10px; }
.changelog-items li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; color: var(--text-2); }
.changelog-items .chip { justify-content: center; }

/* Rota settings and the shared change forms (14 Oct 2026). The settings page, skips and the review
   pages share one look: a card per step, fields side by side, compact choices and a one-line reason. */
.settings-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.settings-head .pill { font-size: 0.9rem; padding: 4px 12px; }
.pill svg { width: 12px; height: 12px; }
.settings-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.settings-tabs a { padding: 8px 16px; border-radius: 9px; color: var(--text-2); text-decoration: none; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; }
.settings-tabs a:hover { background: var(--surface-2); color: var(--text); }
.settings-tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.review-choice { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; min-width: 0; }
.form-card-head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.form-card-head p { margin: 0; }
.form-card h3 { margin: 0; font-size: 1rem; }
.change-form { display: flex; flex-direction: column; gap: 14px; }
.change-form .actions { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.form-grid > .field-wide, .form-grid > fieldset.options { grid-column: 1 / -1; }
.form-card label, .form-card legend { font-size: 0.9rem; font-weight: 600; color: var(--text-2); }
.form-card input[type="text"], .form-card input[type="date"], .form-card select { width: 100%; min-height: 44px; border-radius: 9px; background: var(--surface-3); padding: 9px 12px; font: inherit; color: var(--text); border: 1px solid var(--border); }
.form-card input:focus-visible, .form-card select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.reason-row { display: flex; align-items: center; gap: 10px; }
.reason-row input { flex: 1 1 auto; }
.reason-count { flex: none; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.reason-count.is-bad { color: var(--danger); }

.choices { border: none; padding: 0; margin: 0; min-width: 0; }
.choices legend { margin-bottom: 4px; padding: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-3); cursor: pointer; font-weight: 500; color: var(--text); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.choice.is-disabled { opacity: 0.5; cursor: not-allowed; }

.status-panel, .note-panel { padding: 12px 14px; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 0.93rem; }
.status-panel.waiting, .note-panel.waiting { background: var(--waiting-bg); color: #a9d4ef; }
.status-panel.waiting strong, .note-panel.waiting strong { color: var(--waiting); }
.note-panel ul { margin: 4px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }

.member-list { list-style: none; margin: 0 -24px; padding: 0; border-top: 1px solid var(--border); }
.member-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border); max-width: none; }
.member-row.is-off { background: var(--surface-3); }
.member-row.is-selected { box-shadow: inset 3px 0 0 var(--accent); }
.member-text { flex: 1 1 auto; min-width: 0; }
.member-name { font-weight: 600; overflow-wrap: anywhere; }
.member-status { font-size: 0.87rem; color: var(--muted); overflow-wrap: anywhere; }
.member-status.is-off { color: var(--text-2); }
.member-status.is-away { color: var(--hold); }
.member-row.is-off .avatar { opacity: 0.6; }
.member-form { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-3); }

.details-kv { font-size: 0.95rem; }
.form-card .eyebrow { margin: 4px 0 0; }

/* The review pages: steps as numbered pills, and the preview in one card. */
.steps li { padding: 6px 14px 6px 6px; }
.steps li::before { width: 1.6em; height: 1.6em; line-height: 1.6em; }

/* Rota card: settings, a paused rota, and members off the rota. */
.rcard-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
.rcard.is-paused { border-color: #1f4a66; }
.rcard-paused { margin: 14px 20px 0; padding: 10px 12px; border-radius: 10px; background: var(--waiting-bg); color: var(--waiting); font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
.rcard-paused > div { flex: 1 1 220px; min-width: 0; }
.rcard-paused-queue { color: #a9d4ef; font-size: 0.85rem; }
.rcard-paused a { color: var(--waiting); font-weight: 600; }
.chain-item.is-off-rota .avatar, .avatar.is-off-rota { background: var(--surface-2); color: var(--muted); outline: 1.5px solid #5d6576; outline-offset: 1px; opacity: 0.75; box-shadow: none; }
.chain-item.is-off-rota .chain-name { color: var(--muted); }
.chain-off { font-size: 0.73rem; line-height: 1.2; color: var(--muted); }
.dot.paused { background: var(--waiting); }

@media (max-width: 759px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card { padding: 18px 16px; }
  .member-list { margin: 0 -16px; }
  .member-row { padding: 12px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .settings-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .settings-tabs a { flex: 1 0 auto; justify-content: center; padding: 8px 10px; font-size: 0.92rem; white-space: nowrap; }
}

@media (max-width: 1179px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statusbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stat { grid-column: span 2; }
  .stat:nth-child(4) { grid-column: span 4; }
}
@media (max-width: 1179px) {
  .help-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .help-grid, .technical-layout, .archive-groups { grid-template-columns: minmax(0, 1fr); }
  .reports-status-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .dash-grid, .avail-list, .statusbar { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat:nth-child(4) { grid-column: auto; }
  .help-tiles, .archive-modes { grid-template-columns: minmax(0, 1fr); }
  .technical-layout > .card { padding: 18px 16px; }
  .help-terms { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .help-terms dd { margin-bottom: 8px; }
  .changelog-items li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .changelog-items .chip { justify-self: start; }
}
@media (max-width: 640px) {
  .technical-card-head { align-items: flex-start; flex-direction: column; }
  .technical-card .technical-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .technical-card .technical-kv > dd { border-top: 0; padding-top: 0; padding-left: 0; }
  .technical-card .technical-kv > dt:first-of-type { padding-top: 0; }
  .archive-group .technical-kv > dd { text-align: left; }
  .reports-status-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dash-head h1 { font-size: 1.45rem; }
}

/* Schedule 1.4.0: the approved people-calendar mock-up, using the existing app palette. */
.schedule-page { min-width: 0; }
.schedule-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 23px; }
.schedule-heading .page-head { margin: 0; }
.schedule-heading h1 { font-size: 1.65rem; letter-spacing: -0.025em; }
.schedule-heading .page-sub { font-size: 0.9rem; }
.schedule-source { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 3px; font-size: 0.83rem; color: var(--muted); }
.schedule-source button { font-size: 0.87rem; }
.schedule-source > svg { width: 15px; height: 15px; }
.schedule-toolbar { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 17px; }
.schedule-date-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.schedule-date-controls button { min-height: 36px; }
#schedule-previous, #schedule-next { padding: 3px 12px; font-size: 1.35rem; line-height: 1; }
.schedule-date-label { font-size: 1rem; font-weight: 600; margin-left: 4px; }
.schedule-filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.schedule-filters select { min-width: 130px; font-size: 0.9rem; }
.schedule-filters .checkbox { align-items: center; }
.schedule-filters .checkbox input { margin: 0; }
.schedule-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.schedule-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.schedule-panel-head h2 { margin: 0; font-size: 1.05rem; }
.schedule-scroll { overflow-x: auto; isolation: isolate; }
.schedule-calendar { width: 100%; min-width: 920px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.schedule-calendar th, .schedule-calendar td { border: 0; vertical-align: middle; }
.schedule-calendar thead th { padding: 8px 3px; height: 63px; background: var(--surface-3); text-align: center; font-weight: 400; color: var(--muted); font-size: 0.77rem; border-bottom: 1px solid var(--border); }
.schedule-calendar thead th:first-child { width: 205px; padding: 0 18px; text-align: left; position: sticky; left: 0; z-index: 3; border-right: 1px solid var(--border); }
.schedule-date-number { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin: 0 auto; color: var(--text); font-size: 0.93rem; font-weight: 600; border-radius: 8px; }
.schedule-calendar th.is-today { color: var(--accent); }
.schedule-calendar .is-today .schedule-date-number { color: var(--accent); background: var(--accent-soft); }
.schedule-calendar td { height: 40px; border-bottom: 1px solid var(--border); padding: 0; text-align: center; }
.schedule-calendar .schedule-person-column { padding: 4px 12px 4px 18px; text-align: left; position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.schedule-calendar tbody tr:last-child > * { border-bottom: 0; }
.schedule-person { display: flex; gap: 10px; align-items: center; min-width: 0; }
.schedule-person > div { min-width: 0; }
.schedule-person-name { font-size: 0.83rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
.schedule-person-rotas { font-size: 0.75rem; font-weight: 400; color: var(--muted); line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
.schedule-cell { position: relative; display: flex; width: 100%; min-height: 36px; padding: 0 3px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 0.77rem; justify-content: center; line-height: 1.2; }
.schedule-cell:hover { background: var(--surface-2); }
.schedule-mark { display: inline-flex; width: 100%; justify-content: center; align-items: center; min-height: 24px; max-width: 100%; padding: 3px 2px; border-radius: 5px; overflow-wrap: anywhere; pointer-events: none; }
.schedule-cell.is-away .schedule-mark { background: var(--hold-bg); color: var(--hold); }
.schedule-cell.is-part .schedule-mark { background: var(--waiting-bg); color: var(--waiting); }
.schedule-cell.is-nonworking .schedule-mark { background: var(--surface-2); color: var(--muted); }
.schedule-cell.is-off .schedule-mark { background: var(--surface-3); color: var(--muted); border: 1px solid #5d6576; }
.schedule-cell[aria-pressed="true"]::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 5px; pointer-events: none; z-index: 1; }
.schedule-calendar .is-weekend { background: var(--surface-3); }
.schedule-calendar tr > :nth-child(n + 3) { border-left: 1px solid var(--border); }
.schedule-legend { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface-3); font-size: 0.77rem; color: var(--muted); }
.schedule-key { display: inline-flex; align-items: center; gap: 6px; }
.schedule-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--hold-bg); border: 1px solid var(--hold); flex: none; }
.schedule-swatch.is-part { background: var(--waiting-bg); border-color: var(--waiting); }
.schedule-swatch.is-nonworking { background: var(--surface-2); border-color: var(--muted); }
.schedule-swatch.is-off { background: var(--surface-3); border-color: #5d6576; }
.schedule-detail { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-height: 84px; }
.schedule-detail-copy { flex: 1; min-width: 0; }
.schedule-detail h2 { font-size: 0.97rem; line-height: 1.5; margin: 0; }
.schedule-detail h2 .muted { font-weight: 400; }
.schedule-detail p { margin: 3px 0 0; }
.schedule-detail-source { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 0.77rem; background: var(--hold-bg); color: var(--hold); white-space: nowrap; }
.schedule-detail-source.is-part { background: var(--waiting-bg); color: var(--waiting); }
.schedule-detail-source.is-free { background: var(--ok-bg); color: var(--ok); }
.schedule-detail-source.is-off, .schedule-detail-source.is-nonworking { background: var(--surface-2); color: var(--muted); }
.schedule-detail-list { padding-left: 18px; margin: 6px 0 0; font-size: 0.83rem; color: var(--text-2); }
.schedule-footnote { margin: 14px 0 0; font-size: 0.77rem; color: var(--muted); }
.schedule-panel.is-stale .schedule-cell { opacity: 0.65; }
@media (max-width: 759px) {
  .schedule-source { width: 100%; }
  .schedule-filters { width: 100%; justify-content: space-between; }
  .schedule-detail { flex-wrap: wrap; }
  .schedule-detail-source { margin-left: 44px; }
}
@media (max-width: 440px) {
  .schedule-date-label { order: -1; width: 100%; margin-left: 0; margin-bottom: 3px; }
  .schedule-calendar thead th:first-child { width: 170px; }
  .schedule-calendar .schedule-person-column { padding-left: 12px; }
}

/* Reports: the dashboard's cards, tiles and avatars, with restrained chart colour.
   Series colours follow the data (an issue type, created or resolved), never position. */
.reports-page {
  --series-0: #6ea2ff; --series-1: #f08a8f; --series-2: #b48ef0; --series-3: #4fc1b0;
  --series-4: #e8b45a; --series-5: #7cc4f0; --series-6: #d98cc8; --series-7: #6b7383;
  --created: var(--accent); --resolved: var(--ok); --gridline: #232832;
  display:grid; gap:20px; padding-bottom:32px; min-width:0;
}
.reports-page .card { margin:0; }
.reports-heading,.reports-toolbar,.reports-period,.reports-period-step,.reports-panel-head,.reports-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-width:0; }
.reports-heading h1,.reports-heading h2,.reports-panel-head h2 { margin:0; }
.reports-heading .actions { margin:0; }
.reports-icon { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* Navigation, period and capture */
.reports-toolbar { gap:16px 20px; }
.reports-nav { display:flex; gap:6px; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.reports-nav button { min-height:40px; padding:8px 16px; border-color:transparent; background:transparent; color:var(--muted); font-weight:600; gap:9px; }
.reports-nav button:hover:not(:disabled) { color:var(--text); background:var(--surface-2); }
.reports-nav button.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); }
.reports-period { justify-content:flex-start; gap:8px; }
.reports-period-label { color:var(--muted); font-size:.85rem; }
.reports-period-step { flex-wrap:nowrap; gap:6px; }
.reports-period-step button { justify-content:center; width:36px; padding:5px; }
.reports-period-step button.is-next .reports-icon { transform:scaleX(-1); }
.reports-period select { min-width:0; max-width:100%; }
.reports-period label { display:flex; gap:6px; align-items:center; font-size:.85rem; color:var(--muted); }
.reports-period input[type=date] { font:inherit; background:var(--surface); color:var(--text); border:1px solid var(--border); padding:6px; border-radius:6px; max-width:150px; }
.reports-capture { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:-6px; color:var(--text-2); }
.reports-capture-time { display:inline-flex; align-items:center; gap:6px; }
.reports-capture .reports-icon { width:15px; height:15px; color:var(--muted); }
.reports-capture-note { flex-basis:100%; font-size:.8rem; }
.reports-refresh-notice { display:flex; align-items:flex-start; gap:12px; padding:15px 18px; border:1px solid var(--waiting); border-radius:var(--radius); background:var(--waiting-bg); color:var(--text); }
.reports-refresh-notice>.reports-icon { margin-top:3px; color:var(--waiting); }
.reports-refresh-notice p { margin:4px 0 0; font-size:.9rem; }
.reports-refresh-notice.ok { border-color:var(--ok); background:var(--ok-bg); }
.reports-refresh-notice.ok>.reports-icon { color:var(--ok); }
.reports-refresh-notice.hold { border-color:var(--hold); background:var(--hold-bg); }
.reports-refresh-notice.hold>.reports-icon { color:var(--hold); }
/* Jira update progress: the tracker shows where the collection is, the bar shows it is moving. */
.reports-refresh-notice { position:relative; overflow:hidden; }
.reports-refresh-body { flex:1; min-width:0; }
.reports-refresh-close { margin:-6px -8px 0 0; }
.reports-refresh-spin { display:inline-flex; margin-top:2px; color:var(--waiting); }
.reports-refresh-spin .reports-icon { animation:reports-spin 1.4s linear infinite; }
.reports-refresh-steps { display:flex; flex-wrap:wrap; gap:6px 22px; list-style:none; margin:12px 0 2px; padding:0; font-size:.82rem; color:var(--muted); }
.reports-refresh-steps li { display:inline-flex; align-items:center; gap:7px; }
.reports-refresh-steps li+li::before { content:""; width:14px; height:1px; background:var(--border); margin-left:-15px; margin-right:1px; }
.reports-step-dot { width:9px; height:9px; border-radius:50%; border:1.5px solid var(--muted); flex:none; }
.reports-refresh-steps .is-done { color:var(--text-2); }
.reports-refresh-steps .is-done .reports-step-dot { background:var(--ok); border-color:var(--ok); }
.reports-refresh-steps .is-active { color:var(--waiting); font-weight:600; }
.reports-refresh-steps .is-active .reports-step-dot { background:var(--waiting); border-color:var(--waiting); animation:reports-pulse 1.6s ease-out infinite; }
.reports-refresh-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:color-mix(in srgb, var(--waiting) 18%, transparent); }
.reports-refresh-bar::after { content:""; position:absolute; top:0; bottom:0; width:30%; border-radius:3px; background:var(--waiting); animation:reports-slide 1.6s ease-in-out infinite; }
.reports-refresh-notice.is-leaving { animation:reports-fade-out .45s ease forwards; }
.reports-updating .spinner { border-color:rgba(11,18,32,.25); border-top-color:var(--accent-text); width:14px; height:14px; }
@keyframes reports-spin { to { transform:rotate(360deg); } }
@keyframes reports-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--waiting) 55%, transparent); } 100% { box-shadow:0 0 0 7px transparent; } }
@keyframes reports-slide { 0% { left:-30%; } 100% { left:100%; } }
@keyframes reports-fade-out { to { opacity:0; transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .reports-refresh-spin .reports-icon,.reports-refresh-steps .is-active .reports-step-dot,.reports-refresh-bar::after { animation:none; } .reports-refresh-bar::after { left:0; width:100%; opacity:.6; } .reports-refresh-notice.is-leaving { animation-duration:.01s; } }
.reports-badge { border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--text-2); padding:2px 8px; font-size:.77rem; font-weight:600; }
.reports-badge.is-live { border-color:var(--live); color:var(--ok); background:var(--ok-bg); }

/* Filters */
.reports-filters { padding:16px 18px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.reports-filter-primary,.reports-filter-extra { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.reports-filters label { display:grid; gap:6px; color:var(--muted); font-size:.8rem; font-weight:600; min-width:0; }
.reports-filters select,.reports-filters input { width:100%; min-width:0; font-size:.9rem; font-weight:400; }
.reports-more-filters { margin-top:10px; }
.reports-more-filters summary { display:flex; width:max-content; max-width:100%; align-items:center; gap:8px; color:var(--text-2); font-size:.85rem; cursor:pointer; padding:5px 0; }
.reports-more-filters summary::after { content:'+'; margin-left:2px; color:var(--accent); font-weight:700; }
.reports-more-filters[open] summary::after { content:'−'; }
.reports-filter-extra { margin:10px 0 4px; }
.reports-filter-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--border); padding-top:10px; margin-top:8px; }
.reports-filter-chips .chip { white-space:normal; overflow-wrap:anywhere; background:var(--accent-soft); color:var(--accent); border-color:#2d4778; padding:3px 10px; min-height:28px; }
.reports-clear { margin-left:auto; font-size:.82rem; min-height:28px; padding:3px 10px; background:transparent; }
.reports-filter-chips.is-empty .reports-clear { visibility:hidden; }

/* Summary strip: the dashboard status bar, with each figure opening its tickets */
.reports-content,.reports-stack { display:grid; gap:20px; min-width:0; }
.reports-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.reports-metric { display:flex; align-items:center; gap:14px; text-align:left; border:0; border-radius:0; padding:16px 20px; background:var(--surface); min-width:0; color:var(--text); min-height:96px; }
button.reports-metric:hover:not(:disabled) { background:var(--surface-2); }
button.reports-metric:focus-visible { outline:2px solid var(--focus); outline-offset:-3px; }
.reports-metric-text { display:flex; flex-direction:column; min-width:0; }
.reports-metric-label { font-weight:600; font-size:.88rem; color:var(--text-2); }
.reports-metric strong { font-size:1.75rem; line-height:2.15rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.reports-metric small { color:var(--muted); font-size:.8rem; font-weight:400; overflow-wrap:anywhere; }

/* Panels */
.reports-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; min-width:0; }
.reports-overview-top { grid-template-columns:minmax(0,2.2fr) minmax(270px,1fr); }
.reports-panel { padding:20px 22px; min-width:0; border-radius:var(--radius-lg); }
.reports-panel-head { align-items:flex-start; margin-bottom:14px; }
.reports-panel-head h2 { font-size:1.08rem; }
.reports-panel-head p { margin:4px 0 0; }
.reports-page .table-scroll { max-width:100%; overflow:auto; }
.reports-page th { background:var(--surface-3); color:var(--muted); font-size:.78rem; font-weight:600; }
.reports-page td { font-size:.88rem; }
.reports-page table button { font-size:inherit; }
.reports-link { padding:3px 0; border:0; background:transparent; color:var(--accent); text-align:left; min-height:28px; }
.reports-page .reports-link:hover:not(:disabled) { background:transparent; text-decoration:underline; }
.reports-link:disabled { color:var(--muted); opacity:1; }
.reports-swatch { display:inline-block; width:10px; height:10px; border-radius:3px; flex:none; background:var(--series-7); }
.reports-legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.8rem; color:var(--text-2); margin:0 0 6px; }
.reports-legend>span { display:inline-flex; gap:7px; align-items:center; }
.reports-line-key { display:inline-block; width:18px; height:3px; border-radius:2px; background:var(--created); }
.reports-line-key.resolved { background:var(--resolved); }
.reports-line-key.gap { height:0; border-top:2px dashed var(--muted); background:none; }

/* Colour classes shared by bars, swatches and chart marks */
.series-0 { --mark: var(--series-0); } .series-1 { --mark: var(--series-1); } .series-2 { --mark: var(--series-2); } .series-3 { --mark: var(--series-3); }
.series-4 { --mark: var(--series-4); } .series-5 { --mark: var(--series-5); } .series-6 { --mark: var(--series-6); } .series-7 { --mark: var(--series-7); }
.created { --mark: var(--created); } .resolved { --mark: var(--resolved); } .support { --mark: var(--waiting); }
.unscheduled { --mark: var(--hold); } .scheduled { --mark: #8aa9d6; }
.sla-met { --mark: var(--ok); } .sla-breached { --mark: var(--hold); } .sla-pending { --mark: var(--waiting); } .sla-none { --mark: var(--series-7); }
.reports-swatch[class*=" "] { background:var(--mark); }
.reports-bar-fill { fill:var(--mark, var(--accent)); }

/* Activity chart */
.reports-chart-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.reports-toggle { display:flex; gap:4px; padding:3px; background:var(--surface-3); border:1px solid var(--border); border-radius:10px; }
.reports-toggle button { min-height:30px; padding:4px 11px; border-color:transparent; background:transparent; color:var(--muted); font-size:.83rem; font-weight:600; gap:6px; }
.reports-toggle button .reports-icon { width:15px; height:15px; }
.reports-toggle button.active { background:var(--accent-soft); color:var(--accent); }
.reports-chart-controls select { font-size:.85rem; min-height:36px; }
.reports-chart-scroll { overflow-x:auto; max-width:100%; }
.reports-trend-svg { display:block; width:100%; min-width:560px; height:auto; overflow:visible; }
.reports-axis-line { stroke:var(--gridline); stroke-width:1; }
.reports-y-tick { fill:var(--muted); font-size:11.5px; text-anchor:end; font-variant-numeric:tabular-nums; }
.reports-x-tick { fill:var(--text-2); font-size:11.5px; text-anchor:middle; }
.reports-x-tick.is-missing { fill:var(--muted); }
.reports-x-caption { fill:var(--accent); font-size:11px; font-weight:600; text-anchor:middle; }
.reports-selected-week { fill:var(--accent-soft); opacity:.5; }
.reports-chart-hit,.reports-point-hit { fill:transparent; }
.reports-gap-line { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 4; opacity:.7; }
.reports-gap-line.loading { stroke:var(--border); }
.reports-gap-line.failed { stroke:var(--hold); }
.reports-line { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.reports-line.created { stroke:var(--created); } .reports-line.resolved { stroke:var(--resolved); }
.reports-point { stroke:var(--surface); stroke-width:2; }
.reports-point.created { fill:var(--created); } .reports-point.resolved { fill:var(--resolved); }
.reports-trend-point { cursor:pointer; outline:none; }
.reports-trend-point:hover .reports-point,.reports-trend-point:focus-visible .reports-point { stroke:var(--text); }
.reports-trend-point:focus-visible .reports-point-hit { stroke:var(--focus); stroke-width:2; }
.reports-end-label { font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
.reports-end-label.created { fill:var(--created); } .reports-end-label.resolved { fill:var(--resolved); }
.reports-tip { pointer-events:none; }
.reports-tip-box { fill:#0c0f14; stroke:var(--border); }
.reports-tip-title { fill:var(--text); font-size:12px; font-weight:650; }
.reports-tip-text { fill:var(--text-2); font-size:12px; font-variant-numeric:tabular-nums; }
.reports-type-fill { fill:var(--mark); cursor:pointer; }
.reports-type-fill:hover { filter:brightness(1.2); }
.reports-type-column { outline:none; }
.reports-type-column[role=button] { cursor:pointer; }
.reports-type-column:focus-visible .reports-chart-hit { stroke:var(--focus); stroke-width:2; }
.reports-bar-value { fill:var(--text-2); font-size:11.5px; font-weight:600; text-anchor:middle; font-variant-numeric:tabular-nums; }
.reports-progress { margin:8px 0 0; }
.reports-chart-loading { display:flex; align-items:center; justify-content:center; gap:10px; aspect-ratio:760/296; min-height:200px; color:var(--muted); font-size:.88rem; background:var(--surface-3); border-radius:12px; }
.reports-chart-data { border-top:1px solid var(--border); padding-top:10px; margin-top:10px; font-size:.83rem; }
.reports-chart-data summary { cursor:pointer; color:var(--muted); }
.reports-chart-data table { margin-top:10px; }
.reports-chart-data td { font-variant-numeric:tabular-nums; }
.reports-single { display:grid; gap:4px; margin-bottom:10px; }

/* This period */
.reports-highlight { font-size:1.2rem; font-weight:650; line-height:1.35; margin:0 0 14px; }
.reports-comparison { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px 12px; padding:11px 0; border-top:1px solid var(--border); }
.reports-comparison>span { color:var(--text-2); font-weight:600; font-size:.9rem; }
.reports-comparison strong { font-size:1.25rem; font-variant-numeric:tabular-nums; }
.reports-comparison small { grid-column:1/-1; font-size:.8rem; }
.reports-delta { font-weight:650; margin-right:4px; color:var(--text-2); }
.reports-page tbody th { background:transparent; }
.reports-insight { border-top:1px solid var(--border); margin:0 0 6px; padding-top:12px; font-size:.9rem; max-width:none; }

/* Rankings */
.reports-breakdown { width:100%; display:block; padding:8px 8px 9px; text-align:left; border:0; background:transparent; border-radius:8px; min-height:0; }
.reports-breakdown>span { display:block; }
.reports-breakdown:hover:not(:disabled) { background:var(--surface-2); }
.reports-bar-label { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:7px; font-size:.88rem; font-weight:400; }
.reports-bar-name { display:inline-flex; align-items:center; gap:8px; overflow-wrap:anywhere; min-width:0; }
.reports-bar-numbers { display:flex; gap:12px; align-items:baseline; white-space:nowrap; font-variant-numeric:tabular-nums; }
.reports-bar-numbers small { color:var(--muted); min-width:34px; text-align:right; font-size:.78rem; }
.reports-horizontal-bar { display:block; width:100%; height:6px; border-radius:3px; overflow:hidden; }
.reports-bar-track { fill:var(--surface-2); }
.reports-breakdown-list.expanded { max-height:420px; overflow:auto; padding-right:8px; }
.reports-breakdown-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
/* Side-by-side panels end level: organisations scroll within the height of software and type,
   and This period stretches beside the chart, so neither leaves a gap below it. */
.reports-breakdowns,.reports-overview-top { align-items:stretch; }
.reports-breakdown-panel[data-dimension=organisation] { display:flex; flex-direction:column; }
.reports-breakdown-panel[data-dimension=organisation] .reports-breakdown-list { flex:1 1 0; min-height:300px; max-height:none; contain:size; overflow:auto; padding-right:8px; }
.reports-highlights { display:flex; flex-direction:column; }
.reports-highlights>p:last-child { margin-top:auto; padding-top:10px; }

/* Service levels */
/* Service levels: first response and resolution beside the priority table, all in matching frames. */
.reports-sla-grid { display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:16px; align-items:stretch; }
.reports-sla-side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.reports-sla-block { border:1px solid var(--border); border-radius:12px; background:var(--surface-3); padding:14px 16px 16px; }
.reports-sla-block:last-child { flex:1; }
.reports-sla-block-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.reports-sla-block-head h3 { margin:0; font-size:.95rem; }
.reports-sla-note { margin:12px 0 0; }
.reports-resolution-figures { display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; margin-bottom:10px; font-size:.88rem; }
.reports-resolution-figures>span { display:inline-flex; align-items:center; gap:7px; color:var(--text-2); }
.reports-resolution-figures>span strong { color:var(--text); font-variant-numeric:tabular-nums; }
.reports-resolution-figures .reports-met { margin-left:auto; font-size:1.05rem; }
.reports-sla-side .reports-horizontal-bar { height:8px; }
.reports-sla-overview { display:grid; grid-template-columns:104px minmax(0,1fr); gap:20px; align-items:center; }
.reports-ring-wrap { display:grid; place-items:center; }
.reports-ring-wrap>* { grid-area:1/1; }
.reports-ring { width:104px; height:104px; }
.reports-ring-track { fill:none; stroke:var(--surface-2); stroke-width:11; }
.reports-ring-part { fill:none; stroke:var(--mark); stroke-width:11; }
.reports-ring-label { display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.reports-ring-label strong { font-size:1.2rem; font-variant-numeric:tabular-nums; }
.reports-ring-label span { color:var(--muted); font-size:.75rem; }
.reports-sla-legend { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.reports-sla-legend li { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:.88rem; }
.reports-sla-legend strong { font-variant-numeric:tabular-nums; }
.reports-resolution { border-top:1px solid var(--border); margin-top:18px; padding-top:16px; }
.reports-resolution h3 { font-size:.95rem; }
.reports-resolution p { margin:0 0 4px; }
.reports-priority-table td:not(:first-child),.reports-priority-table th:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.reports-priority-table .reports-sla-bar { width:30%; min-width:90px; }
.reports-priority-table .reports-sla-bar svg { height:8px; }

/* Tags, priorities and people */
.reports-tag,.reports-priority { display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); color:var(--text-2); padding:2px 8px; border-radius:6px; white-space:nowrap; font-size:.78rem; font-weight:600; }
.reports-priority.high { background:var(--hold-bg); color:var(--hold); }
.reports-priority.mid { background:var(--accent-soft); color:var(--accent); }
.reports-avatar { flex:none; display:block; }
.reports-avatar-text { fill:#ffffff; font-size:12.5px; font-weight:650; font-family:inherit; }
.reports-avatar-neutral { fill:var(--surface-2); stroke:#5d6576; stroke-width:1.5; }
.reports-avatar.is-historical .reports-avatar-neutral { stroke-dasharray:3 2.5; }
.reports-avatar.is-unassigned .reports-avatar-text,.reports-avatar.is-historical .reports-avatar-text { fill:var(--muted); }
.reports-person-name { display:inline-flex; align-items:center; gap:10px; min-width:0; color:var(--text); }
.reports-person-name>span { overflow-wrap:anywhere; }
.reports-imported { color:var(--muted); font-weight:400; }

/* Team queues */
.reports-team-grid { grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr); }
.reports-team-table { min-width:640px; }
.reports-team-table thead th { white-space:nowrap; }
.reports-team-table thead th:not(:first-child) { text-align:right; }
.reports-team-table th button,.reports-ticket-table th button { border:0; background:transparent; color:var(--muted); padding:0; min-height:28px; font-weight:600; gap:4px; }
.reports-team-table th[aria-sort=ascending] button,.reports-team-table th[aria-sort=descending] button,
.reports-ticket-table th[aria-sort=ascending] button,.reports-ticket-table th[aria-sort=descending] button { color:var(--accent); }
.reports-team-table th button:hover:not(:disabled),.reports-ticket-table th button:hover:not(:disabled) { background:transparent; color:var(--text); }
.reports-sort { font-size:.85em; }
.reports-team-table tbody th[scope=row] { background:transparent; min-width:220px; font-weight:400; }
.reports-team-table td { text-align:right; font-variant-numeric:tabular-nums; }
.reports-team-table tbody tr:hover { background:var(--surface-3); }
.reports-team-table tr.is-unassigned { background:var(--surface-3); }
.reports-team-table tr.is-unassigned .reports-person-name>span { color:var(--text-2); font-style:italic; }
.reports-person { color:var(--text); min-height:32px; }
.reports-page .reports-person:hover:not(:disabled) { text-decoration:none; }
.reports-page .reports-person:hover .reports-person-name>span { text-decoration:underline; }
.reports-team-cell { display:inline-grid; grid-template-columns:auto 64px; gap:10px; align-items:center; justify-items:end; }
.reports-team-cell .reports-horizontal-bar { width:64px; height:5px; }
.reports-count { min-height:28px; min-width:34px; justify-content:center; padding:2px 9px; border-color:transparent; background:var(--accent-soft); color:var(--accent); font-variant-numeric:tabular-nums; font-weight:600; }
.reports-zero { display:inline-block; min-width:34px; line-height:28px; vertical-align:middle; text-align:center; color:var(--muted); opacity:.7; }
.reports-bug-list { display:grid; }
.reports-bug-row { padding:12px 0; border-bottom:1px solid var(--border); }
.reports-bug-row:first-child { padding-top:4px; } .reports-bug-row:last-child { border:0; padding-bottom:0; }
.reports-bug-row .reports-horizontal-bar { height:8px; }
.reports-bug-counts { display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; }
.reports-bug-counts .reports-link { display:inline-flex; gap:7px; align-items:center; font-size:.83rem; min-height:26px; }
.reports-queue-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.reports-queue-links button { padding:14px 20px; border-radius:var(--radius-lg); }
.reports-queue-links button>span { width:100%; display:flex; justify-content:space-between; gap:10px; color:var(--text-2); font-weight:600; }
.reports-queue-links strong { color:var(--text); font-size:1.1rem; font-variant-numeric:tabular-nums; }

/* Tickets */
.reports-ticket-layout { display:grid; gap:18px; align-items:start; min-width:0; }
.reports-ticket-layout.has-detail { grid-template-columns:minmax(0,1fr) minmax(300px,360px); }
.reports-ticket-panel .reports-panel-head { margin-bottom:10px; }
.reports-ticket-toolbar { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.reports-breadcrumb { flex:1 1 260px; min-width:0; }
.reports-breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
.reports-breadcrumb li { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.reports-breadcrumb li+li::before { content:'›'; color:var(--muted); font-size:1rem; line-height:1; }
.reports-crumb { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:3px 11px; border-radius:99px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); font-size:.83rem; font-weight:600; overflow-wrap:anywhere; text-align:left; }
button.reports-crumb:hover:not(:disabled) { border-color:var(--accent); color:var(--text); background:var(--surface-2); }
.reports-crumb .reports-icon { width:15px; height:15px; margin-left:-3px; }
.reports-crumb.is-filter { background:var(--accent-soft); border-color:#2d4778; color:var(--accent); }
.reports-crumb-key { color:var(--muted); font-weight:500; }
.reports-crumb.is-filter .reports-crumb-key { color:#8fb4f5; }
.reports-crumb.is-current { background:transparent; border-color:transparent; color:var(--text); padding-left:4px; }
.reports-population { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); margin-left:auto; }
.reports-population select { min-width:0; max-width:100%; }
.reports-ticket-table { min-width:820px; }
.reports-ticket-table td { padding:12px; vertical-align:top; }
.reports-ticket-table td:first-child { min-width:280px; width:40%; }
.reports-ticket-table tbody tr:hover { background:var(--surface-3); }
.reports-ticket-table tbody tr.is-selected { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.reports-key { font-weight:650; }
.reports-summary { max-width:460px; margin:2px 0; white-space:normal; line-height:1.4; color:var(--text); }
.reports-ticket-table .reports-person-name { font-size:.86rem; }
.reports-status-cell { color:var(--text-2); white-space:nowrap; }
.reports-age { white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.reports-ticket-table th:last-child { text-align:right; }
.reports-empty { padding:24px 0; text-align:center; }
.reports-pagination { border-top:1px solid var(--border); padding-top:14px; margin-top:12px; font-size:.83rem; justify-content:flex-start; }
.reports-pagination>span { margin-right:auto; color:var(--text-2); }
.reports-pagination label { display:flex; align-items:center; gap:7px; color:var(--muted); }
.reports-detail { position:sticky; top:18px; background:var(--surface); border:1px solid var(--border); box-shadow:inset 0 3px 0 var(--accent); border-radius:var(--radius-lg); padding:18px 20px 20px; min-width:0; max-height:calc(100vh - 36px); overflow:auto; }
.reports-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.reports-detail-head h2 { margin:0; font-size:1.2rem; }
.reports-icon-button { width:34px; min-height:34px; padding:0; justify-content:center; background:transparent; }
.reports-detail-title { font-weight:600; margin:10px 0 12px; line-height:1.4; }
.reports-detail-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.reports-detail-grid { display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px 14px; font-size:.86rem; margin:0 0 18px; padding-top:14px; border-top:1px solid var(--border); }
.reports-detail-grid dt { color:var(--muted); }
.reports-detail-grid dd { margin:0; overflow-wrap:anywhere; }
.reports-sla-text.met { color:var(--ok); } .reports-sla-text.breached { color:var(--hold); } .reports-sla-text.pending { color:var(--waiting); }
.reports-jira { width:100%; justify-content:center; }
.reports-jira .reports-icon { width:16px; height:16px; }
.reports-status { padding:20px; }

@media(max-width:1100px) {
 .reports-toolbar { align-items:flex-start; }.reports-overview-top,.reports-team-grid { grid-template-columns:minmax(0,1fr); }
 .reports-ticket-layout.has-detail { grid-template-columns:1fr; }.reports-detail { position:static; grid-row:1; max-height:none; }
 .reports-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) { .reports-team-cell { grid-template-columns:auto; }.reports-team-cell .reports-horizontal-bar { display:none; }.reports-team-table { min-width:540px; } }
@media(max-width:760px) {
 .reports-heading .actions { width:100%; }.reports-nav { width:100%; }.reports-nav button { flex:1; justify-content:center; padding:8px 10px; }
 .reports-period { width:100%; }.reports-period-step { flex:1; min-width:0; }.reports-period-step select { flex:1; width:100%; }
 .reports-grid,.reports-sla-grid { grid-template-columns:1fr; }.reports-sla-block:last-child { flex:none; }.reports-filter-primary,.reports-filter-extra { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .reports-metric { padding:14px 16px; gap:12px; min-height:0; }.reports-metric strong { font-size:1.5rem; line-height:1.9rem; }
 .reports-metric .tile-icon { width:36px; height:36px; border-radius:10px; }
 .reports-panel { padding:18px; }.reports-chart-controls { width:100%; }
 .reports-queue-links { grid-template-columns:1fr; }.reports-queue-links button { padding:12px 18px; }
 .reports-breakdown-list.expanded { max-height:360px; }.reports-breakdown-panel[data-dimension=organisation] .reports-breakdown-list { flex:none; height:400px; }.reports-page .reports-heading h1 { font-size:1.45rem; }
 .reports-pagination { gap:8px; }.reports-pagination>span { width:100%; }.reports-population { margin-left:0; }
}
@media(max-width:430px) {
 .reports-heading .actions button { font-size:.8rem; padding:7px 10px; }.reports-nav button { font-size:.84rem; gap:5px; padding:8px 5px; }.reports-nav .reports-icon { width:15px; }
 .reports-filters { padding:14px 12px 10px; }.reports-metrics { grid-template-columns:1fr; }.reports-metric small { font-size:.75rem; }
 .reports-period { flex-wrap:wrap; }.reports-period>select { width:100%; }.reports-period-step { flex-basis:100%; }
 .reports-sla-overview { grid-template-columns:88px minmax(0,1fr); gap:14px; }.reports-ring { width:88px; height:88px; }
 .reports-panel { padding:16px; }.reports-detail-grid { grid-template-columns:90px minmax(0,1fr); }
}
.reports-point.is-partial { fill:var(--surface); stroke-width:2.5; }
.reports-point.is-partial.created { stroke:var(--created); } .reports-point.is-partial.resolved { stroke:var(--resolved); }
.reports-chart-unit { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius); color:var(--text-2); font-size:.85rem; }
/* Tables inside report panels sit in their own frame, so they read as one block. */
.reports-table-frame { border:1px solid var(--border); border-radius:12px; background:var(--surface-3); }
.reports-table-frame table { border-collapse:separate; border-spacing:0; }
.reports-table-frame th,.reports-table-frame td { border:0; padding:11px 14px; vertical-align:middle; }
.reports-table-frame thead th { background:var(--surface-2); border-bottom:1px solid var(--border); }
.reports-table-frame thead th:first-child { border-top-left-radius:11px; } .reports-table-frame thead th:last-child { border-top-right-radius:11px; }
.reports-table-frame tbody tr+tr>* { border-top:1px solid var(--border); }
.reports-table-frame tbody tr:hover>* { background:var(--surface-2); }
.reports-table-frame tbody tr:last-child>:first-child { border-bottom-left-radius:11px; } .reports-table-frame tbody tr:last-child>:last-child { border-bottom-right-radius:11px; }
.reports-priority-table .reports-met { font-weight:650; }
.reports-met.is-good { color:var(--ok); } .reports-met.is-low { color:var(--hold); }
/* Backlog and oldest open tickets: queues keep one colour each, as lines, keys and figures. */
.reports-page { --queue-support: var(--waiting); --queue-customer: #b48ef0; --queue-bugs: #f08a8f; }
.reports-backlog-row { grid-template-columns:minmax(0,2.2fr) minmax(300px,1fr); align-items:stretch; }
.reports-line.support { stroke:var(--queue-support); } .reports-line.customer { stroke:var(--queue-customer); } .reports-line.bugs { stroke:var(--queue-bugs); }
.reports-point.support { fill:var(--queue-support); } .reports-point.customer { fill:var(--queue-customer); } .reports-point.bugs { fill:var(--queue-bugs); }
.reports-point.is-partial.support { stroke:var(--queue-support); } .reports-point.is-partial.customer { stroke:var(--queue-customer); } .reports-point.is-partial.bugs { stroke:var(--queue-bugs); }
.reports-end-label.support { fill:var(--queue-support); } .reports-end-label.customer { fill:var(--queue-customer); } .reports-end-label.bugs { fill:var(--queue-bugs); }
.reports-line-key.support { background:var(--queue-support); } .reports-line-key.customer { background:var(--queue-customer); } .reports-line-key.bugs { background:var(--queue-bugs); }
.reports-backlog-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-bottom:12px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.reports-backlog-stat { display:flex; flex-direction:column; gap:2px; min-width:0; padding:12px 14px; background:var(--surface-3); }
.reports-backlog-label { display:inline-flex; align-items:center; gap:8px; color:var(--text-2); font-size:.82rem; font-weight:600; }
.reports-backlog-stat strong { font-size:1.45rem; line-height:1.9rem; font-variant-numeric:tabular-nums; }
.reports-backlog-change { color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums; }
.reports-backlog-change.is-up { color:var(--hold); } .reports-backlog-change.is-down { color:var(--ok); }
.reports-oldest { display:flex; flex-direction:column; }
.reports-oldest .reports-panel-head { flex-wrap:wrap; }
/* The list scrolls within the height of the backlog chart beside it, like the organisation ranking. */
.reports-oldest-list { list-style:none; margin:0; padding:0 6px 0 0; display:grid; align-content:start; gap:8px; flex:1 1 0; min-height:220px; overflow:auto; contain:size; }
.reports-oldest-item { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:stretch; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-3); }
.reports-oldest-item:hover { border-color:#3a4252; }
/* The age badge spans the card height, its number centred beside the ticket details. */
.reports-age-pill { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:46px; border-radius:10px; background:var(--surface-2); color:var(--muted); font-size:.7rem; line-height:1.1; }
.reports-age-pill strong { color:var(--text); font-size:1.15rem; font-variant-numeric:tabular-nums; }
.reports-age-pill.is-ageing { background:var(--waiting-bg); color:var(--waiting); } .reports-age-pill.is-ageing strong { color:var(--waiting); }
.reports-age-pill.is-old { background:var(--hold-bg); color:var(--hold); } .reports-age-pill.is-old strong { color:var(--hold); }
.reports-oldest-body { display:grid; align-content:center; gap:3px; min-width:0; }
.reports-oldest-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.reports-oldest-top .reports-key { color:var(--accent); font-size:.88rem; text-decoration:none; }
.reports-oldest-top a.reports-key:hover { text-decoration:underline; }
.reports-oldest-summary { margin:0; font-size:.86rem; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reports-oldest-body .reports-person-name { font-size:.8rem; color:var(--text-2); gap:7px; }
.reports-oldest-body .reports-avatar { width:20px; height:20px; }
.reports-oldest .reports-breakdown-footer { margin-top:auto; padding-top:12px; }
.reports-oldest-list.is-loading { opacity:.7; }
.reports-skeleton .reports-oldest-body span { display:block; height:10px; border-radius:5px; background:var(--surface-2); }
.reports-skeleton .reports-oldest-body span+span { width:60%; }
.reports-skeleton .reports-age-pill, .reports-skeleton .reports-oldest-body span { animation:reports-shimmer 1.4s ease-in-out infinite; }
.reports-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; flex:1; min-height:180px; padding:20px; text-align:center; color:var(--muted); font-size:.88rem; border:1px dashed var(--border); border-radius:12px; }
.reports-empty-state p { margin:0; max-width:34ch; }
@keyframes reports-shimmer { 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .reports-skeleton .reports-age-pill, .reports-skeleton .reports-oldest-body span { animation:none; } }
@media(max-width:1100px) { .reports-backlog-row { grid-template-columns:minmax(0,1fr); } .reports-oldest-list { flex:none; contain:none; min-height:0; max-height:520px; } }
@media(max-width:430px) { .reports-backlog-stats { grid-template-columns:minmax(0,1fr); } }

/* ---- Polish pass (app 1.9.0): reviews, the guided review, history, change log and schedule ---- */
.rota-tag { display:inline-flex; align-items:center; padding:2px 9px; border-radius:6px; background:var(--surface-2); color:var(--text-2); font-size:0.8rem; font-weight:600; white-space:nowrap; }
.case-id { color:var(--muted); font-size:0.78rem; }
.case-id code { font-size:0.76rem; color:var(--muted); }

/* Review queue: a summary strip, then calm rows with one quiet action each. */
.review-summary { grid-template-columns:repeat(3, minmax(0, 1fr)); margin-bottom:18px; }
.ticket-group > header { align-items:center; padding:12px 18px; background:var(--surface-3); }
.ticket-group > header h3 { font-size:1rem; }
.case-row { grid-template-columns:auto minmax(0, 1fr) auto; gap:4px 16px; padding:14px 18px; }
.case-row .tile-icon { width:36px; height:36px; border-radius:10px; align-self:start; }
.case-row .tile-icon svg { width:18px; height:18px; }
.case-row:hover { background:var(--surface-3); }
.case-main { display:grid; gap:5px; min-width:0; }
.case-row .problem { font-size:0.98rem; }
.case-row .meta { margin-top:0; gap:6px 14px; font-size:0.85rem; }
.case-go { gap:6px; padding:6px 10px 6px 14px; border-color:var(--accent-soft); background:var(--accent-soft); color:var(--accent); font-weight:600; }
.case-go:hover:not(:disabled) { background:#26385a; }
.case-go svg { width:16px; height:16px; }

/* Guided review: page header, connected steps, framed facts, clear choices, a framed confirmation. */
.back-link { display:inline-flex; align-items:center; gap:4px; margin-bottom:14px; padding:4px 10px 4px 6px; border:1px solid var(--border); border-radius:99px; color:var(--text-2); font-size:0.85rem; font-weight:600; text-decoration:none; }
.back-link:hover { border-color:var(--accent); color:var(--text); }
.back-link svg { width:16px; height:16px; }
.review-flow { display:flex; flex-direction:column; }
.review-flow .form-card, .review-flow .review-choice { max-width:none; }
.review-flow > * { margin-top:0; }
.review-flow > .back-link { align-self:flex-start; }
.review-head { margin-bottom:18px; }
.review-head-main { min-width:0; }
.review-head .eyebrow { display:block; color:var(--muted); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.review-head h1 { margin:2px 0 4px; font-size:1.75rem; letter-spacing:-0.01em; }
.review-reason { margin:0; color:var(--text-2); }
.review-head-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:10px; }
.steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; gap:0; margin:0 0 20px; }
.steps li:last-child { padding-right:0; }
.steps li { display:flex; align-items:center; gap:8px; padding:0 12px 0 0; background:none; border-radius:0; color:var(--muted); font-size:0.87rem; position:relative; }
.steps li::before { flex:none; width:26px; height:26px; line-height:24px; margin:0; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); font-size:0.78rem; }
.steps li::after { content:''; flex:1; height:2px; margin-left:4px; background:var(--border); border-radius:1px; }
.steps li:last-child::after { display:none; }
.steps li.is-done { color:var(--text-2); }
.steps li.is-done::before { content:'\2713'; background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
.steps li.is-done::after { background:var(--ok); opacity:0.6; }
.steps li[aria-current="step"] { background:none; color:var(--text); font-weight:650; }
.steps li[aria-current="step"]::before { background:var(--accent); border-color:var(--accent); color:var(--accent-text); box-shadow:0 0 0 4px var(--accent-soft); }
.review-facts-title { margin:0 0 12px; font-size:0.95rem; color:var(--text-2); }
.review-facts .technical-kv { font-size:0.92rem; }
.option { gap:4px 12px; padding:14px 16px; border-radius:12px; background:var(--surface-3); transition:border-color .12s ease, background .12s ease; }
.option:hover { border-color:#3a4252; }
.option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent); }
.option input { accent-color:var(--accent); margin-top:3px; }
.option .desc { font-weight:400; line-height:1.45; }
.option .desc strong { font-weight:650; color:var(--text); }
.option .desc-more { color:var(--text-2); }
.option .effect { display:inline-flex; align-items:flex-start; gap:4px; color:var(--text-2); font-weight:400; }
.option .effect svg { flex:none; width:15px; height:15px; margin-top:3px; color:var(--accent); }
.confirm-box { padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.confirm-box .checkbox { font-weight:600; }
.confirm-box .actions { margin-top:14px; margin-bottom:0; }
.expiry-chip { margin-left:4px; }

/* History: a heading per day, then aligned rows with a small tile for the kind of change. */
.history-day { margin-bottom:20px; }
.history-day-title { margin:0 0 10px; font-size:0.95rem; color:var(--text-2); }
.history-day-title .muted { font-weight:400; }
details.record { border-radius:12px; margin-bottom:8px; }
details.record > summary { grid-template-columns:auto minmax(0, 1fr) auto; gap:14px; align-items:center; padding:10px 14px; }
details.record > summary:hover { background:var(--surface-3); }
.record-kind { width:32px; height:32px; border-radius:9px; }
.record-kind svg { width:16px; height:16px; }
.record-summary { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap:6px 16px; align-items:center; }
.record-what { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; }
.record-rotas { display:flex; flex-wrap:wrap; gap:6px; }
.record-when { font-variant-numeric:tabular-nums; text-align:right; }
.record-chevron { display:inline-flex; align-items:center; transition:transform .15s ease; }
.record-chevron svg { width:16px; height:16px; }

/* Change log: a timeline by day. */
.changelog { display:grid; gap:18px; max-width:1100px; margin:0 auto; }
.changelog-list > .changelog-entry { max-width:none; }
.changelog-day { display:grid; grid-template-columns:170px minmax(0, 1fr); gap:0 20px; }
.changelog-date { margin:12px 0 0; font-size:0.95rem; display:flex; flex-direction:column; gap:2px; }
.changelog-date .muted { font-size:0.8rem; font-weight:400; }
.changelog-day .changelog-list { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:6px 0; }
.changelog-entry { border-top:1px solid var(--border); }
.changelog-entry:first-child { border-top:0; }
.changelog-release > summary { grid-template-columns:auto auto minmax(0, 1fr) auto; gap:12px; align-items:center; padding:12px 18px; }
.changelog-dot { width:9px; height:9px; border-radius:50%; background:var(--border); box-shadow:0 0 0 3px var(--surface); }
.changelog-release[open] .changelog-dot { background:var(--accent); }
.changelog-version { padding:2px 9px; border-radius:6px; background:var(--accent-soft); color:var(--accent); font-size:0.8rem; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.changelog-title { font-size:0.95rem; }
.changelog-items { padding:0 18px 16px 61px; gap:8px; }

/* Schedule: today down its whole column, a divider between weeks, quieter lines, consistent pills. */
.schedule-calendar tr > .is-week-start { border-left:2px solid #3a4252; }
.schedule-calendar td.is-today { background:color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.schedule-calendar thead th.is-today { background:color-mix(in srgb, var(--accent-soft) 70%, var(--surface-3)); }
.schedule-calendar tbody tr:hover > td { background-color:color-mix(in srgb, var(--surface-2) 55%, transparent); }
.schedule-mark { min-height:26px; border-radius:6px; font-weight:600; font-size:0.76rem; border:1px solid transparent; }
.schedule-cell.is-away .schedule-mark { border-color:color-mix(in srgb, var(--hold) 35%, transparent); }
.schedule-cell.is-part .schedule-mark { border-color:color-mix(in srgb, var(--waiting) 35%, transparent); }
.schedule-cell.is-nonworking .schedule-mark { border-color:var(--border); }
.schedule-cell.is-off .schedule-mark { border:1px dashed #5d6576; }
.schedule-swatch { width:12px; height:12px; border-radius:4px; }
.schedule-swatch.is-off { border-style:dashed; }
.schedule-panel-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.schedule-today { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.schedule-today-label { color:var(--text-2); font-size:0.8rem; font-weight:650; margin-right:2px; }
.schedule-today-chip { padding:2px 9px; border-radius:99px; font-size:0.78rem; font-weight:600; background:var(--surface-2); color:var(--text-2); }
.schedule-today-chip.is-away { background:var(--hold-bg); color:var(--hold); }
.schedule-today-chip.is-part { background:var(--waiting-bg); color:var(--waiting); }
.schedule-today-chip.is-free { background:var(--ok-bg); color:var(--ok); }
.schedule-detail { align-items:center; border-radius:var(--radius-lg); }

@media (max-width: 900px) {
  .record-summary { grid-template-columns:minmax(0, 1fr) auto; }
  .record-rotas, .record-who { grid-column:1; }
  .record-when { grid-row:1; grid-column:2; }
}
@media (max-width: 760px) {
  .review-summary { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .review-summary .stat { grid-column:auto; padding:12px 14px; }
  .review-summary .tile-icon, .review-summary .stat-desc { display:none; }
  .review-summary .stat-label { font-size:0.82rem; line-height:1.25; }
  .case-row { grid-template-columns:auto minmax(0, 1fr); }
  .case-row .case-go, .case-row .btn-small { grid-column:2; justify-self:start; }
  .steps { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:10px; }
  .steps li:nth-child(2)::after { display:none; }
  .changelog-day { grid-template-columns:minmax(0, 1fr); }
  .changelog-date { flex-direction:row; align-items:baseline; gap:8px; margin:0 0 8px; }
  .changelog-release > summary { gap:10px; padding:12px 14px; }
  .changelog-items { padding:0 14px 14px; }
}