/* AMA Client Tracker - the tracker's own stylesheet (HTML 7-240), ported token for token.
   The only additions are classes for markup the tracker wrote as inline styles (group
   headings, pills, note boxes, the month grid, the preview table) and the sign-in page. */

:root {
  --bg: #15181a;
  --panel: #1e2226;
  --panel-alt: #242a2e;
  --border: #33393e;
  --accent: #C2CAD1;
  --accent-dim: #9BA4AC;
  --yellow: #ffc300;
  --red: #e13438;
  --teal: #4fa893;
  --text: #ece9e4;
  --text-mute: #A6AEB5;
  --text-mute2: #838C93;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  /* The content column's width, shared with the environment ribbon so the two cannot
     drift apart: the ribbon is positioned against this column, not the viewport. */
  --wrap-max: 1100px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--body);
  font-weight: 600;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 0 0 80px 0;
}
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 20px 16px; }
a { color: inherit; text-decoration: none; }

/* HEADER */
.hdr {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 14px; margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.hdr-logo { height: 44px; display: block; }
.hdr-title { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 1px; text-transform: uppercase; color: var(--text); }
.hdr-title span { color: var(--accent); }
.hdr-sub { font-family: var(--mono); font-size: 11px; color: var(--text-mute); letter-spacing: 0.5px; margin-top: 2px; }
.hdr-right { text-align: right; }
.hdr-stamp { font-family: var(--mono); font-size: 11px; color: var(--text-mute2); font-weight: 600; text-align: right; }
.hdr-user { font-family: var(--mono); font-size: 11px; color: var(--text-mute); margin-top: 4px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.hdr-user form { margin: 0; }
.link-btn { background: none; border: none; padding: 0; margin: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* TABS */
.tabs {
  display: flex; gap: 4px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; overflow-x: auto;
}
.tab-btn {
  flex: 1; min-width: 90px;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 12.5px; font-weight: 700;
  background: transparent; border: none; color: var(--text-mute);
  padding: 10px 8px; border-radius: 6px; cursor: pointer;
  transition: all .15s; white-space: nowrap; text-align: center;
}
.tab-btn.active { background: var(--accent); color: #151515; font-weight: 700; }
.tab-btn:not(.active):hover { background: var(--panel-alt); color: var(--text); }

/* STATS BAR */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.stats.three { grid-template-columns: repeat(3, 1fr); }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.stat-num { font-family: var(--mono); font-size: 26px; font-weight: 700; }
.stat-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; font-weight: 700; }
.stat-card.crit .stat-num { color: var(--red); }
.stat-card.warn .stat-num { color: var(--yellow); }
.stat-card.good .stat-num { color: var(--teal); }
@media (max-width: 640px) { .stats, .stats.three { grid-template-columns: repeat(2, 1fr); } }

/* PANEL / CARD */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.panel.accent { border-color: var(--accent); padding: 12px 16px; }
.panel-title {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.panel-title .hint { font-family: var(--body); font-weight: 600; font-size: 11.5px; color: var(--text-mute2); text-transform: none; letter-spacing: 0; }
.hint { font-weight: 600; font-size: 11.5px; color: var(--text-mute2); text-transform: none; letter-spacing: 0; }

/* FORMS */
label { font-size: 11.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; display: block; margin-bottom: 5px; }
input, select, textarea {
  width: 100%; background: var(--panel-alt); border: 1px solid var(--border);
  color: var(--text); padding: 9px 10px; border-radius: 6px; font-family: var(--body);
  font-size: 14px; font-weight: 600; margin-bottom: 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 60px; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.9); cursor: pointer; }
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.9); cursor: pointer; }
input[type="checkbox"] { width: auto; margin-bottom: 0; accent-color: var(--accent); }
input[type="file"] { padding: 8px; }
input::file-selector-button {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; font-size: 12px;
  background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
.tight { margin-bottom: 0; }
.check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; text-transform: none; font-size: 13px; color: var(--text); letter-spacing: 0; cursor: pointer; }
.check-row.tight { margin-bottom: 0; }
.note-box { margin: 12px 0; padding: 10px 12px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; }
.note-box > .client-meta { margin-top: 4px; }
.warn-box { background: rgba(194, 202, 209, 0.15); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 12.5px; color: var(--text); }
.error-box { background: rgba(225, 52, 56, 0.12); border: 1px solid var(--red); border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 12.5px; color: var(--text); }
.ac-wrap { position: relative; }
.ac-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px;
  max-height: 240px; overflow-y: auto; margin-top: -10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.ac-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--panel); }
.ac-item-title { font-weight: 700; font-size: 13px; color: var(--text); }
.ac-item-sub { font-size: 11px; font-weight: 600; color: var(--text-mute); font-family: var(--mono); margin-top: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .form-grid, .form-grid.three { grid-template-columns: 1fr; } }
.rep-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .rep-stats-grid { grid-template-columns: 1fr; } }
.inline-add { display: flex; gap: 8px; margin-bottom: 12px; }
.inline-add input { margin-bottom: 0; }
.btn {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; font-size: 13px;
  background: var(--accent); color: #151515; border: none; border-radius: 6px;
  padding: 11px 18px; cursor: pointer; transition: background .15s; display: inline-block; line-height: normal;
}
.btn:hover { background: var(--accent-dim); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn.danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn.small { padding: 5px 10px; font-size: 11px; }
.btn.compact { padding: 8px 14px; font-size: 11px; white-space: nowrap; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* CLIENT LIST / GAUGE ROWS */
.client-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 10px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .1s;
}
.client-row.static { cursor: default; }
.client-row:last-child { border-bottom: none; }
.client-row:hover { background: var(--panel-alt); }
.client-name-block { flex: 1; min-width: 0; }
.client-name { font-weight: 700; font-size: 15.5px; letter-spacing: 0.1px; }
.client-name.small { font-size: 14px; }
.client-meta { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-mute); margin-top: 3px; line-height: 1.5; }
.client-meta.italic { font-style: italic; }
.client-meta.inline { display: inline; }
.client-meta strong { color: var(--text); }
.client-meta strong.over { color: var(--red); }
.mono-sub { color: var(--text-mute); font-weight: 400; font-family: var(--mono); font-size: 11px; }
.mono-sub.larger { font-size: 12px; }
.company-tag { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.company-tag.mono { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.contact-name-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.flag-badge {
  font-family: var(--display); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 4px 9px; border-radius: 20px; white-space: nowrap;
}
.flag-ok { background: rgba(79, 168, 147, 0.15); color: var(--teal); }
.flag-warn { background: rgba(255, 195, 0, 0.15); color: var(--yellow); }
.flag-high { background: rgba(194, 202, 209, 0.18); color: var(--accent); }
.flag-crit {
  background: repeating-linear-gradient(45deg, rgba(225, 52, 56, 0.25), rgba(225, 52, 56, 0.25) 6px, rgba(225, 52, 56, 0.4) 6px, rgba(225, 52, 56, 0.4) 12px);
  color: #ff9b9d;
}
.flag-teal { background: rgba(79, 168, 147, 0.15); color: var(--teal); }
.flag-accent { background: rgba(194, 202, 209, 0.15); color: var(--accent); }
.flag-yellow { background: rgba(255, 195, 0, 0.15); color: var(--yellow); }
.flag-red { background: rgba(225, 52, 56, 0.15); color: var(--red); }
.priority-select { width: 130px; margin-bottom: 0; font-size: 11px; }

/* GAUGE BAR */
.gauge { width: 150px; flex-shrink: 0; }
.gauge-track {
  position: relative; height: 8px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, var(--teal) 0 15%, var(--yellow) 15% 33%, var(--accent) 33% 66%, var(--red) 66% 100%);
}
.gauge-marker { position: absolute; top: -3px; width: 2px; height: 14px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); }
.gauge-days { font-family: var(--mono); font-size: 11px; color: var(--text-mute); text-align: right; margin-top: 3px; font-weight: 700; }
@media (max-width: 640px) { .gauge { width: 70px; } }

/* GROUP HEADINGS (the tracker's inline Oswald headings) */
.group-head {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; font-weight: 700;
  color: var(--accent); padding: 10px 0 6px; border-top: 1px solid var(--border); margin-top: 10px;
}
.group-head.first { border-top: none; margin-top: 0; }
.group-head.underline { font-weight: 600; padding: 8px 0 4px; border-top: none; border-bottom: 1px solid var(--border); margin: 0 0 4px; }
.group-head .count { color: var(--text-mute2); font-weight: 400; }
.group-head.red { color: var(--red); }
.group-head.yellow { color: var(--yellow); }
.group-head.teal { color: var(--teal); }
.group-head.mute { color: var(--text-mute); }
.group-head.clickable { cursor: pointer; }
.group { margin-bottom: 14px; }
.section-label { text-transform: uppercase; letter-spacing: 0.5px; margin: 14px 0 6px; color: var(--text-mute); }

/* PILLS */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pill { display: flex; align-items: center; gap: 6px; background: var(--panel-alt); border: 1px solid var(--border); padding: 5px 10px; border-radius: 20px; color: var(--text); font-size: 12px; }
.pill .x { cursor: pointer; color: var(--red); font-weight: 700; }

/* TIMELINE */
.timeline-item { display: flex; gap: 12px; padding: 12px 0; border-left: 2px solid var(--border); margin-left: 6px; padding-left: 16px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.timeline-item.job::before { background: var(--teal); }
.timeline-content { flex: 1; }
.timeline-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.timeline-type { font-family: var(--display); font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: 0.5px; }
.timeline-item.job .timeline-type { color: var(--teal); }
.timeline-date { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--text-mute); }
.timeline-note { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 4px; line-height: 1.55; }
.timeline-rep { font-size: 11.5px; color: var(--text-mute2); margin-top: 3px; font-weight: 700; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-mute2); font-weight: 600; }
.empty-state.tight { padding: 16px; }
.empty-state .big { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--text-mute); margin-bottom: 6px; text-transform: uppercase; }

.back-link { color: var(--accent); cursor: pointer; font-size: 12px; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; display: inline-block; }

.toast-stack { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 999; width: max-content; max-width: 90vw; }
.toast {
  background: var(--panel-alt); border: 1px solid var(--accent); color: var(--text);
  padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  font-family: var(--mono); max-width: min(90vw, 720px); text-align: center;
}
.stub-note { color: var(--text-mute); font-weight: 400; }

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.fab {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--accent); color: #151515; border: none;
  width: 56px; height: 56px; border-radius: 50%; font-size: 26px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); cursor: pointer; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 641px) { .modal-overlay { align-items: center; } }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px 14px 0 0; padding: 20px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; }
.modal.wide { max-width: 640px; }
@media (min-width: 641px) { .modal { border-radius: 14px; } }
.modal .message { font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: pre-line; margin-bottom: 14px; }

/* BIG NUMBERS (Rep View cards) */
.split { display: flex; }
.split > div { flex: 1; text-align: center; padding: 6px 0; }
.split > div + div { border-left: 1px solid var(--border); }
.big-num { font-family: var(--mono); font-size: 32px; font-weight: 600; color: var(--teal); }
.big-num.red { color: var(--red); }
.big-num.larger { font-size: 36px; }
.centered { text-align: center; padding: 6px 0 2px; }
.breakdown { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 6px; }
.breakdown-row { display: flex; justify-content: space-between; padding: 3px 0; }
.breakdown-row .client-meta { margin: 0; }
.breakdown-row .client-meta.value { color: var(--text); font-weight: 700; }

/* MONTH GRID */
.month-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-family: var(--mono); font-size: 10px; color: var(--text-mute); text-align: center; margin-bottom: 4px; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day-cell { padding: 8px 4px; text-align: center; cursor: pointer; border-radius: 6px; border: 1px solid transparent; font-family: var(--mono); font-size: 12px; color: var(--text); }
.day-cell.today { background: var(--panel-alt); border-color: var(--accent); }
.day-cell:hover { background: var(--panel-alt); }
.day-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin: 3px auto 0; }
.day-title { font-family: var(--display); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.day-title .today-tag { color: var(--accent); font-size: 11px; font-family: var(--mono); }

/* SHEET IMPORT PREVIEW */
.scroll-x { overflow-x: auto; }
.preview-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.preview-table th { text-align: left; border-bottom: 1px solid var(--border); padding: 4px 8px; color: var(--text-mute); font-weight: 700; white-space: nowrap; }
.preview-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.preview-table .none { color: var(--text-mute2); }

/* SIGN-IN */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 16px; }
.login-card { width: 100%; max-width: 400px; }
.login-card .hdr { justify-content: center; }
.validation-message { color: var(--red); font-size: 12px; font-family: var(--mono); margin: -8px 0 10px; }

/* THE HOSTING NOTICE (Components/Shared/HostingNotice.razor) - the one thing in the app
   that is meant to be read rather than used, so it is built to be noticed and then to be
   calm: the staging yellow down its left edge, the panel's own background, and prose in
   the body font. It sits above the stat cards on the Dashboard, and it exists only while
   the site is not Production. */
.notice {
  background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--yellow);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
}
.notice-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.notice-title {
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text);
}
/* Put away: one line and the way back into it. Same yellow edge, so the thing he
   collapsed is visibly the same thing he can open again. */
.notice.collapsed { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; }
.notice-line { font-size: 12.5px; color: var(--text-mute); font-weight: 600; }
.notice-foot { color: var(--text-mute2) !important; font-size: 12px !important; }
.notice p { margin: 9px 0; font-size: 13px; color: var(--text-mute); line-height: 1.6; max-width: 74ch; }
.notice strong { color: var(--text); font-weight: 700; }
.notice ul { margin: 8px 0 10px; padding-left: 20px; max-width: 74ch; }
.notice li { font-size: 13px; color: var(--text-mute); line-height: 1.55; margin: 5px 0; }
.notice li::marker { color: var(--yellow); }

/* THE FOOT OF EVERY SCREEN - the one link to Pages/WhatsNext.razor, at the weight of a
   footnote: present when he wonders, invisible when he is working. */
.page-foot { text-align: center; margin: 30px 0 6px; font-family: var(--mono); font-size: 11px; }
.page-foot a { color: var(--text-mute2); text-decoration: underline; text-underline-offset: 3px; }
.page-foot a:hover, .page-foot a:focus-visible { color: var(--accent); }

/* WHAT THIS COULD BECOME - one idea per block, ruled off rather than boxed, so the page
   reads as a letter and not as a price list. */
/* Prose, not metadata: .client-meta is monospace and sized for a one-line note under a
   row, which reads like a machine talking when it carries a paragraph. */
.next-intro { font-size: 13px; color: var(--text-mute); line-height: 1.6; margin: 8px 0 4px; max-width: 68ch; }
.next-item { border-left: 2px solid var(--border); padding: 2px 0 2px 14px; margin: 18px 0; }
.next-item h4 {
  margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--text);
}
.next-item p { margin: 5px 0; font-size: 13px; color: var(--text-mute); line-height: 1.5; }
.next-item p.why { color: var(--teal); }

/* ENVIRONMENT RIBBON - a corner tag on every non-Production host (Components/Shared/
   EnvironmentRibbon.razor): the same site on the dev rig and on the staging address look
   identical otherwise, and the book kept on staging is not the one production will carry.
   Mistaking one for the other is the failure this exists to prevent, so the ribbon is
   deliberately laid ACROSS the AMA logo: a header that looks untouched is exactly what
   would let a rehearsal site pass for the real one. Hence the left offset - it tracks the
   content column (--wrap-max), not the viewport, so the ribbon crosses the logo at every
   window width instead of drifting into the empty margin on a wide screen. Fixed, so it
   survives scrolling; under the modals; and pointer-events none, so it covers no control. */
.env-ribbon {
  position: fixed; top: 0; left: max(0px, calc((100vw - var(--wrap-max)) / 2));
  width: 140px; height: 140px; overflow: hidden;
  z-index: 150; pointer-events: none;
}
.env-ribbon span {
  position: absolute; top: 30px; left: -42px; width: 190px;
  transform: rotate(-45deg);
  background: var(--yellow); color: #15181a;
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  text-align: center; line-height: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 0.92;
}
.env-ribbon.dev span { background: var(--teal); color: #15181a; }

/* Blazor's reconnect / error UI, restyled to the panel palette */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel-alt); border-top: 1px solid var(--red); color: var(--text); padding: 12px 20px; font-size: 13px; z-index: 1000; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 10px; cursor: pointer; }
/* The reconnect dialog. This used to be one line - `#components-reconnect-modal { color:
   var(--text) }` - which was worse than nothing: it left the framework drawing its own white
   card and coloured the text on it near-white, so the ONE message this site could show about
   a dropped connection was white on white.

   The class names below are the framework's contract, read off
   _framework/blazor.web.js rather than remembered. blazor.web.js has two implementations: its
   own dialog, and this one - "user-specified" - which is used the moment an element with this
   id exists. The difference that matters is that the default's rejected() calls
   location.reload() and the user-specified one only adds a class, so the link out of the
   rejected state below is load-bearing rather than decoration. A publish produces exactly
   that state (docs/deployment.md). */
#components-reconnect-modal { display: none; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex; position: fixed; inset: 0; z-index: 1001;
  background: rgba(0, 0, 0, 0.6); align-items: center; justify-content: center;
}

.reconnect-card {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 18px 20px; max-width: 420px; margin: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.reconnect-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; font-size: 13px; color: var(--accent); margin-bottom: 8px;
}

/* One line per state, and the state class on the dialog decides which. */
.reconnect-line { display: none; font-size: 13px; margin: 0 0 12px; }

#components-reconnect-modal.components-reconnect-show .reconnect-when-trying,
#components-reconnect-modal.components-reconnect-retrying .reconnect-when-trying,
#components-reconnect-modal.components-reconnect-paused .reconnect-when-trying,
#components-reconnect-modal.components-reconnect-failed .reconnect-when-failed,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-when-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-when-rejected {
  display: block;
}

/* READ-ONLY BANNER - ADR-0003's recovery state, on every screen (Components/Shared/
   ReadOnlyBanner.razor). Red rather than the grey of .warn-box, and in the content column
   rather than a toast: this is not advice that can scroll past in 2.2 seconds, it is the
   difference between typing an afternoon in and having it saved. */
.read-only-banner {
  background: rgba(224, 82, 82, 0.12); border: 1px solid var(--red); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 14px; font-size: 13px; color: var(--text);
}
.read-only-banner strong {
  color: var(--red); font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.5px; margin-right: 8px;
}

/* FOCUS, VISIBLE. The rule above turns the outline off on every form control and swaps the
   border colour instead, which reads well and works - for a control that HAS a border. A
   checkbox, a radio and a file input do not, so for those the swap is invisible and the
   whole screen could be tabbed through with nothing showing where you were. :focus-visible
   rather than :focus, so a mouse click does not paint a ring nobody asked for. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* The tracker's rows, name links and company tags are divs and spans that behave as buttons
   (Keys.Activate gives them Enter and Space). A real button shows focus for free; these have
   to be told to. */
[role="button"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

.modal:focus { outline: none; }

/* The two administration screens (People, Kinds of user), added with the permission system.
   They reuse .panel, .client-row and .btn wholesale - the only genuinely new thing here is the
   permission checklist, which has no precedent in the tracker because the tracker had nothing
   to grant. A switched-off person is dimmed rather than hidden: they are still the name on
   two years of touchpoints, and a list that hid them would make that history look authorless. */
.client-row.off .client-name { color: var(--text-mute); text-decoration: line-through; }
.client-row.off { opacity: 0.72; }

.perm-checklist { margin: 14px 0 4px; }
.perm-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px 6px; margin-bottom: 12px; }
.perm-group > legend { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-mute); padding: 0 6px; }
.perm-group > .hint { margin: 0 0 8px; }
.perm-row { display: block; padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.perm-row:last-child { border-bottom: none; }
.perm-row > input { margin-right: 8px; vertical-align: top; }
.perm-title { font-weight: 700; font-size: 13.5px; }
/* The consequence, not the name, is what somebody deciding this actually reads. */
.perm-consequence { display: block; margin: 2px 0 0 22px; font-size: 12px; color: var(--text-mute); line-height: 1.45; }
.perm-row-locked { cursor: not-allowed; opacity: 0.55; }
.perm-locked-note { display: block; margin: 3px 0 0 22px; font-size: 11.5px; color: var(--yellow); }