:root {
  --navy: #1f3a5f;
  --navy-deep: #16293f;
  --sky: #cfe3f4;
  --ink: #1d232b;
  --muted: #5d6673;
  --line: #d9dee5;
  --paper: #f7f8fa;
  --white: #ffffff;
  --red: #b3261e;
  --red-bg: #fbe9e7;
  --amber: #8a5a00;
  --amber-bg: #fff3d6;
  --green: #1f6b3a;
  --green-bg: #e3f3e8;
  --purple: #5b3d9a;
  --purple-bg: #ece6f7;
  /* surfaces and accents: light values here, dark values under [data-theme="dark"] at the end */
  --field: #ffffff;        /* inputs, chips, menus, modals */
  --hover: var(--hover);        /* row and button hover */
  --th: var(--th);           /* table headers, neutral pills */
  --neutral-bg: var(--neutral-bg);   /* grey pills and badges */
  --soft: var(--soft);         /* selected list item */
  --soft2: var(--soft2);        /* opened card inside a panel */
  --note-bg: var(--note-bg);      /* notes, legacy text, staff-only boxes */
  --note-line: var(--note-line);
  --disabled-bg: var(--disabled-bg);
  --slate-text: var(--slate-text);
  --accent: #1f3a5f;       /* links and outlined buttons (= navy in light mode) */
  --accent-deep: #16293f;  /* headings in navy */
  --overlay: rgba(20,30,45,.45);
  --radius: 6px;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); }
body { padding-bottom: env(safe-area-inset-bottom, 0); }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 14px; }
h2 { font-size: 17px; font-weight: 600; margin: 22px 0 10px; }
h2.first { margin-top: 0; }
.mt0 { margin-top: 0; }
.pre { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.m-only { display: none; }

/* top bar */
.topbar { background: var(--navy); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 52px; padding-top: env(safe-area-inset-top, 0); position: sticky; top: 0; z-index: 5; }
.topbar .brand { font-weight: 600; letter-spacing: .01em; margin-right: 6px; white-space: nowrap; }
.topbar nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.topbar nav a { color: #d6e2f0; text-decoration: none; padding: 8px 10px; border-radius: 4px; white-space: nowrap; }
.topbar nav a.active { background: var(--navy-deep); color: #fff; }
.topbar nav a.cta { border: 1px solid #5a7aa0; }
.topbar .who { color: #c9d6e6; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.topbar .who button { background: none; border: 1px solid #5a7aa0; color: #fff; padding: 3px 9px; border-radius: 4px; cursor: pointer; }

main { max-width: 1280px; margin: 0 auto; padding: 22px 18px 60px; }

/* login */
.login { max-width: 380px; margin: 10vh auto; background: var(--white); border: 1px solid var(--line); padding: 28px; border-radius: 8px; }
.login h1 { margin-bottom: 4px; }
.login p { color: var(--muted); margin: 0 0 18px; }
.login .phi { font-size: 12.5px; color: var(--muted); margin-top: 18px; }

/* forms */
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
label .req { color: var(--red); }
input[type=text], input[type=date], input[type=password], input[type=tel], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); color: var(--ink);
}
input:disabled, select:disabled, textarea:disabled { background: var(--disabled-bg); color: var(--muted); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 70px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.check { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; color: var(--ink); }
.check input { width: 16px; height: 16px; flex: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
button.primary { background: var(--navy); color: #fff; border: 0; padding: 9px 16px; border-radius: var(--radius); cursor: pointer; font-weight: 500; }
button.primary:hover { background: var(--navy-deep); }
button.secondary { background: var(--field); color: var(--accent); border: 1px solid var(--accent); padding: 8px 14px; border-radius: var(--radius); cursor: pointer; }
button.quiet { background: none; border: 1px solid var(--line); color: var(--ink); padding: 7px 12px; border-radius: var(--radius); cursor: pointer; }
button.quiet:hover { background: var(--hover); }
button.danger { background: var(--red-bg); color: var(--red); border: 1px solid #e6b3ae; padding: 8px 14px; border-radius: var(--radius); cursor: pointer; }
button.link { background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0; }
button.small { padding: 4px 9px; font-size: 13px; }
a.btnlink { display: inline-block; padding: 8px 12px; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--field); }
a.btnlink:hover { background: var(--hover); }
h3 { font-size: 14.5px; font-weight: 600; margin: 18px 0 4px; color: var(--accent-deep); }
form h3:first-child { margin-top: 0; }
button:disabled { opacity: .45; cursor: not-allowed; }
.error { color: var(--red); background: var(--red-bg); padding: 8px 10px; border-radius: var(--radius); margin: 10px 0; font-size: 14px; }
.notice { color: var(--amber); background: var(--amber-bg); padding: 8px 10px; border-radius: var(--radius); margin: 10px 0; font-size: 14px; }
.info { color: var(--accent-deep); background: var(--sky); padding: 8px 10px; border-radius: var(--radius); margin: 10px 0; font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; }
.warnbox { border: 1px solid #e6c98a; background: var(--amber-bg); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.warnbox ul { margin: 6px 0 0; padding-left: 18px; }

/* admin tabs */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 500; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--accent-deep); border-bottom-color: var(--accent); }
button.link.small { font-size: 12.5px; }

/* segmented control (Open in: Panel · Pop-up · Page) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--field); }
.seg .lbl { padding: 6px 8px; font-size: 12.5px; color: var(--muted); background: var(--th); border-right: 1px solid var(--line); }
.seg button { background: var(--field); border: 0; border-left: 1px solid var(--line); padding: 6px 10px; font-size: 13px; cursor: pointer; color: var(--muted); }
.seg button:first-of-type { border-left: 0; }
.seg button.on { background: var(--navy); color: #fff; }
a.btnlink.small { padding: 4px 9px; font-size: 13px; }

/* referral workspace beside (panel) or over (pop-up) a list */
main.with-drawer { max-width: none; margin: 0 var(--drawer-w, 45vw) 0 0; }
.drawer { background: var(--paper); }
.drawer.side { position: fixed; top: 52px; right: 0; bottom: 0; width: var(--drawer-w, 45vw); overflow: auto; border-left: 1px solid var(--line); box-shadow: -6px 0 18px rgba(20,30,45,.08); z-index: 6; padding: 0 16px 40px; }
.drawer-bar { position: sticky; top: 0; z-index: 4; background: var(--paper); display: flex; gap: 6px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.drawer-bar .spacer { flex: 1; }
.drawer .detail-head h1 { font-size: 18px; }
.drawer .cols, .drawer .cols.even { grid-template-columns: 1fr; }
.drawer .panel { padding: 14px; }
.modal-bg.drawer-bg { z-index: 7; padding: 3vh 3vw; }
.modal.drawer.popup { max-width: 1100px; width: 100%; max-height: 94vh; height: 94vh; padding: 0 20px 30px; background: var(--paper); }
main.with-drawer .c-opt { display: none; } /* Reason, Office, Last contact step aside while a referral is open in the side panel */
tr.row.open td { background: var(--sky); }
tr.row.open:hover td { background: var(--sky); }

/* panels */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin-bottom: 16px; }
.panel.tight { padding: 12px 14px; }

/* toolbar & chips */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input, .toolbar select { width: auto; }
.toolbar input[type=search] { min-width: 260px; }
.toolbar .spacer { flex: 1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border: 1px solid var(--line); background: var(--field); color: var(--ink); padding: 4px 10px; border-radius: 14px; font-size: 13px; cursor: pointer; }
.chip:hover { background: var(--hover); }
.chip.on { background: var(--navy); color: #fff; border-color: var(--accent); }
.chip .n { opacity: .75; margin-left: 4px; }
.bulkbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--sky); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }
.bulkbar select { width: auto; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin: 10px 0; color: var(--muted); font-size: 13.5px; }

/* table: the wrapper scrolls both ways; the header row and the name column stay put; soft edges show when there is more to the side */
.tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background-color: var(--white); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  background-image: linear-gradient(90deg, var(--white) 30%, transparent), linear-gradient(270deg, var(--white) 30%, transparent),
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.22), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.22), rgba(0,0,0,0));
  background-position: 0 0, 100% 0, 0 0, 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
th { background: var(--th); color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; position: sticky; top: 0; z-index: 2; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sorted { color: var(--accent-deep); }
th.sorted::after { content: " ↑"; }
th.sorted.desc::after { content: " ↓"; }
tr:last-child td { border-bottom: 0; }
tr.row { cursor: pointer; }
tr.row:hover td { background: var(--hover); }
tr.row.urgent td:first-child { box-shadow: inset 3px 0 0 var(--red), 1px 0 0 var(--line); }
tr.inactive td { color: var(--muted); }
td .sub { display: block; color: var(--muted); font-size: 12.5px; }
td.sel, th.sel { width: 34px; min-width: 34px; padding-right: 0; position: sticky; left: 0; z-index: 1; background: var(--white); }
th.sel { z-index: 3; background: var(--th); }
td.sel input { width: 15px; height: 15px; }
td.title, th.title { position: sticky; left: 0; z-index: 1; background: var(--white); min-width: 150px; box-shadow: 1px 0 0 var(--line); }
th.title { z-index: 3; background: var(--th); }
.has-sel td.title, .has-sel th.title { left: 34px; }
td.act, th.act { width: 62px; min-width: 62px; position: sticky; left: 0; z-index: 1; background: var(--white); }
th.act { z-index: 3; background: var(--th); }
.has-act td.title, .has-act th.title { left: 62px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td a.plain { color: inherit; text-decoration: none; font-weight: 600; }

/* pills & badges */
.pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pill.new { background: var(--sky); color: var(--accent-deep); }
.pill.contacting { background: var(--neutral-bg); color: var(--slate-text); }
.pill.under_review { background: var(--purple-bg); color: var(--purple); }
.pill.completed { background: var(--neutral-bg); color: var(--muted); }
.pill.scheduled { background: var(--green-bg); color: var(--green); }
.pill.unreachable, .pill.declined { background: var(--red-bg); color: var(--red); }
.pill.not_accepted { background: var(--purple-bg); color: var(--purple); }
.pill.rec_received, .pill.rec_not_needed { background: var(--green-bg); color: var(--green); }
.pill.rec_requested, .pill.rec_partial { background: var(--amber-bg); color: var(--amber); }
.pill.rec_not_requested { background: var(--neutral-bg); color: var(--muted); }
.flag.records_overdue { background: var(--red-bg); color: var(--red); }
.timeline li.office { border-left: 3px solid var(--sky); padding-left: 8px; }
.pill.redirected, .pill.duplicate, .pill.no_visit_needed { background: var(--neutral-bg); color: var(--muted); }
.flag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; margin: 2px 4px 0 0; white-space: nowrap; }
.flag.urgent { background: var(--red); color: #fff; }
.flag.accepted { background: var(--green); color: #fff; }
.decision-sub { color: var(--ink) !important; font-weight: 500; }
.decision { padding: 10px 14px; border-radius: var(--radius); margin: 0 0 12px; font-size: 14.5px; border-left: 4px solid; }
.decision.ok { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.decision.no { background: var(--purple-bg); border-color: var(--purple); color: var(--purple); }
.flag.kypho { background: var(--purple); color: #fff; letter-spacing: .02em; }
.flag.kypho_late { background: #3d1f7a; color: #fff; }
tr.row.kypho td:first-child { box-shadow: inset 3px 0 0 var(--purple), 1px 0 0 var(--line); }
.flag.overdue { background: var(--red-bg); color: var(--red); }
.flag.due_today { background: var(--amber-bg); color: var(--amber); }
.flag.stale_new, .flag.stale_contacting, .flag.stale_review { background: var(--amber-bg); color: var(--amber); }
.flag.review { background: var(--purple-bg); color: var(--purple); }
.due.overdue { color: var(--red); font-weight: 600; }
.due.today { color: var(--amber); font-weight: 600; }
.docs { display: inline-block; background: var(--navy); color: #fff; border: 0; border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; margin-left: 5px; white-space: nowrap; vertical-align: 1px; }
button.docs { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
button.docs:hover { background: var(--navy-deep); }
.badge-internal { color: var(--muted); font-size: 12px; border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; }

/* quick-log strip: pinned under the referral header (and under the drawer bar) */
.quicklog { position: sticky; top: 52px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--sky); border: 1px solid #b9d3ea; border-radius: var(--radius); padding: 8px 10px; margin: 0 0 14px; }
.quicklog select, .quicklog input { width: auto; padding: 6px 8px; font-size: 14px; }
.quicklog .grow { flex: 1 1 200px; min-width: 140px; }
.quicklog label.inline { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12.5px; color: var(--muted); }
.drawer .quicklog { top: 50px; }
.quicklog.inmodal { position: static; margin-top: 8px; }
@media (max-width: 640px) { .quicklog { position: static; } .quicklog select, .quicklog input, .quicklog label.inline { flex: 1 1 45%; } .quicklog .grow { flex-basis: 100%; } }

/* quick date buttons beside a date field: +1 / +3 business days, next Monday */
.qd { display: inline-flex; gap: 3px; margin: 4px 0 0; vertical-align: middle; }
.quicklog .qd, .inline + .qd { margin: 0; }
.qdb { background: var(--field); border: 1px solid var(--line); color: var(--accent); border-radius: 4px; padding: 2px 7px; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.4; }
.qdb:hover { background: var(--hover); border-color: var(--accent); }
label + input + .qd, div > input + .qd { display: flex; }

/* notes log */
.addnote textarea { min-height: 54px; }
.addnote-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.notes-log li .pre { font-size: 14.5px; }

/* documents: preview inside the referral; drop files onto the card */
.docprev { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--disabled-bg); overflow: hidden; }
.docprev iframe { display: block; width: 100%; height: 70vh; border: 0; background: var(--field); }
.docprev img { display: block; max-width: 100%; margin: 0 auto; }
#docs.dragging { outline: 2px dashed var(--accent); outline-offset: -6px; background: var(--hover); }

/* phones: a round "+" for a new referral, always within reach */
.fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0)); width: 54px; height: 54px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 30px; line-height: 52px; text-align: center; text-decoration: none; box-shadow: 0 6px 18px rgba(20,30,45,.28); z-index: 6; }
.fab:active { background: var(--navy-deep); }

/* detail */
.detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.detail-head h1 { margin: 0; }
.detail-head .meta { color: var(--muted); font-size: 13px; margin-left: auto; }
.stepper { display: flex; gap: 4px; list-style: none; margin: 0 0 10px; padding: 0; }
.stepper li { flex: 1; text-align: center; font-size: 12.5px; padding: 5px 4px; border-radius: 4px; background: var(--th); color: var(--muted); }
.stepper li.done { background: var(--green-bg); color: var(--green); }
.stepper li.current { background: var(--navy); color: #fff; font-weight: 600; }
.stepper li.end { font-weight: 600; }
.stepper li.end.good { background: var(--green); color: #fff; }
.stepper li.end.closed { background: #4a5568; color: #fff; }
.nextbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.nextbar .lbl { color: var(--muted); font-size: 13px; }
.nextbar .spacer { flex: 1; }
.menu { position: relative; display: inline-block; }
.menu summary { list-style: none; cursor: pointer; background: var(--field); color: var(--accent); border: 1px solid var(--accent); padding: 8px 14px; border-radius: var(--radius); user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 6; background: var(--field); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,30,45,.14); min-width: 230px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.menu-list button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 4px; cursor: pointer; font: inherit; color: var(--ink); }
.menu-list button:hover { background: var(--hover); }
.menu-list button:disabled { color: var(--muted); cursor: not-allowed; opacity: 1; }
.menu-list .hint { padding: 4px 10px 6px; white-space: normal; max-width: 300px; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cardhead h2 { margin: 0; }
.working { display: flex; flex-wrap: wrap; gap: 6px 22px; background: var(--sky); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 14px; font-size: 14.5px; }
.working b { font-weight: 500; color: var(--accent-deep); margin-right: 4px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.facts h3, #docs h3 { margin: 0 0 6px; }
#docs h3 + .kv, #docs h3 + ul { margin-top: 4px; }
#docs h3:not(:first-of-type) { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.facts .kv { grid-template-columns: 92px 1fr; }
.facts .kv .sub { display: block; color: var(--muted); font-size: 12.5px; }
.notes { background: var(--note-bg); border: 1px solid var(--note-line); border-radius: var(--radius); padding: 10px 12px; font-size: 14.5px; }
.legacy-wrap { margin-top: 8px; }
.attach { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.attach select, .attach input[type=file] { width: auto; }
.attach .grow { flex: 1 1 160px; min-width: 120px; }
.timeline details summary { cursor: pointer; padding: 6px 0; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } .stepper li { font-size: 11px; padding: 4px 2px; } .detail-head .meta { margin-left: 0; flex-basis: 100%; } }
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.cols.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .cols, .cols.even { grid-template-columns: minmax(0, 1fr); } } /* minmax: a wide table scrolls inside its box instead of widening the page on small phones */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 5px 12px; font-size: 14px; }
.kv .k { color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.timeline li:last-child { border-bottom: 0; }
.timeline .meta { color: var(--muted); font-size: 12.5px; }
.gate { padding: 10px 12px; border-radius: var(--radius); font-size: 13.5px; margin: 8px 0; }
.gate.blocked { background: var(--amber-bg); color: var(--amber); }
.gate.ok { background: var(--green-bg); color: var(--green); }
.outcome-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.outcome-buttons button { padding: 7px 12px; }
.legacy { background: var(--note-bg); border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: 13px; white-space: pre-wrap; max-height: 180px; overflow: auto; }

/* dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 4px 0 14px; }
.hero .stat .n { font-size: 36px; }
.hero .stat .l { font-size: 13.5px; }
.attention { padding: 0; overflow: hidden; }
.attention .ahead { padding: 10px 14px; font-weight: 600; color: var(--accent-deep); }
.attention .ahead .hint { font-weight: 400; margin-left: 6px; }
.attention .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14.5px; }
.attention a.row:hover { background: var(--hover); }
.attention .n { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; font-size: 16px; }
.attention .row.warn .n { color: var(--red); }
.attention .row.amber .n { color: var(--amber); }
.attention .row.good .n { color: var(--green); }
.small90 { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; color: var(--muted); font-size: 13.5px; margin: 14px 2px 16px; }
.small90 .lbl { font-weight: 600; color: var(--accent-deep); }
.small90 a { color: var(--muted); text-decoration: none; }
.small90 a:hover { color: var(--ink); }
.small90 b { color: var(--ink); font-size: 17px; font-weight: 600; margin-right: 4px; }
.small90 a.warn b { color: var(--red); }
details.dsec { border: 1px solid var(--line); border-radius: 8px; background: var(--white); margin-bottom: 10px; }
details.dsec > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; color: var(--accent-deep); list-style: none; user-select: none; }
details.dsec > summary::-webkit-details-marker { display: none; }
details.dsec > summary::before { content: "▸"; display: inline-block; width: 16px; color: var(--muted); }
details.dsec[open] > summary::before { content: "▾"; }
details.dsec > div { padding: 0 14px 14px; }
details.dsec h3 { margin: 8px 0 6px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 14px; text-decoration: none; color: inherit; display: block; }
a.stat:hover { border-color: var(--accent); }
.stat .n { font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: 13px; margin-top: 2px; }
.stat.warn .n { color: var(--red); }
.stat.amber .n { color: var(--amber); }
.stat.good .n { color: var(--green); }
.chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(40px, 1fr); gap: 6px; align-items: end; height: 150px; padding-top: 18px; overflow-x: auto; overflow-y: hidden; }
.chart .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.chart .bar { width: 100%; max-width: 46px; background: var(--navy); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart .bar.sched { background: var(--green); }
.chart .val { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.chart .lbl { font-size: 11.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.chart .col:hover .bar { filter: brightness(1.15); }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--navy); }
.legend i.sched { background: var(--green); }

.empty { color: var(--muted); padding: 30px; text-align: center; background: var(--white); border: 1px dashed var(--line); border-radius: 8px; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 10; max-width: 90vw; }
#toast.show { opacity: 1; }
#toast.err { background: var(--red); }

/* modal */
.modal-bg { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 8; padding: 16px; }
.modal { background: var(--field); border-radius: 8px; padding: 22px; width: 100%; max-width: 540px; max-height: 92vh; overflow: auto; }
.modal.wide { max-width: 760px; }
.modal h2 { margin-top: 0; }

/* staff hub: tool tiles; each tool's top bar has a "Hub" link and its own accent */
.hub-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 6px; }
.hub-tile { display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 18px; text-decoration: none; color: var(--ink); min-height: 120px; }
.hub-tile:hover { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.hub-name { font-size: 17px; font-weight: 600; color: var(--accent-deep); }
.hub-what { color: var(--muted); font-size: 14px; line-height: 1.45; }
.topbar nav a.hublink { border: 1px solid #5a7aa0; margin-right: 6px; }
.topbar.tool-coverage { background: #1d4a4a; }
.topbar.tool-coverage nav a.active { background: #133434; }
.topbar.tool-admin, .topbar.tool-hub { background: #2d3440; }
.topbar.tool-admin nav a.active { background: #1f252e; }
.hub-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-top: 18px; align-items: start; }
.hub-cols h2 { margin: 0; }
.hub-ann { padding: 14px 16px; margin-bottom: 10px; }
.hub-ann.unread { box-shadow: inset 3px 0 0 var(--amber); }
.hub-ann.pinned { border-color: var(--accent); }
.hub-ann h3 { margin: 6px 0 4px; font-size: 16px; }
.hub-ann-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hub-ann-head .spacer { flex: 1; }
.hub-ann-body { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.pill.hub-cat { background: var(--sky); color: var(--accent-deep); }
.hub-links { line-height: 1.9; margin-bottom: 10px; }
a.chip { text-decoration: none; display: inline-block; }
.hub-doc { margin-bottom: 10px; }
.hub-doc.inactive { opacity: .65; }
.hub-vers { margin-top: 6px; }
.hub-vers summary { cursor: pointer; }
.hub-url { word-break: break-all; font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) { .hub-cols { grid-template-columns: minmax(0, 1fr); } }
/* coverage and coding */
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
.cov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cov-head h1 { margin-bottom: 8px; }
.cov-sync { color: var(--muted); font-size: 13px; }
.cov-sync.off { color: var(--amber); font-weight: 500; }
.tabs a .n { background: var(--amber-bg); color: var(--amber); border-radius: 10px; padding: 0 7px; font-size: 12px; margin-left: 4px; }
.covbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.covbar input[type=search] { flex: 1 1 340px; }
.covbar select { flex: 0 1 280px; width: auto; }
.cov-cols { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.cov-list { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; }
.cov-cats { margin-bottom: 8px; }
.cov-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; margin-bottom: 6px; cursor: pointer; font: inherit; color: var(--ink); }
.cov-item:hover { border-color: var(--accent); }
.cov-item.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: var(--soft); }
.cov-item .nm { font-weight: 500; }
.cov-item .cd { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.cov-item .bd { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.cov-picked { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.cov-picked strong { flex: 1 1 160px; }
.cov-detail .panel h2 { font-size: 17px; }
.cov-detail .sub, .cov-rule .sub, .cov-ins .sub { display: block; color: var(--muted); font-size: 12.5px; }
.cov-codes div { padding: 3px 0; font-size: 14px; }
.cov-codes .sub { display: block; color: var(--muted); font-size: 12.5px; margin-left: 4.2em; }
.cov-criteria { background: var(--sky); color: var(--accent-deep); border-radius: var(--radius); padding: 8px 10px; margin: 10px 0 0; font-size: 14px; }
.cb, .ab { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; margin-right: 4px; }
.cb.covered { background: var(--green-bg); color: var(--green); }
.cb.criteria { background: #e3f0e8; color: #1f5f3a; box-shadow: inset 0 0 0 1px #b9dcc5; }
.cb.not_covered { background: var(--red-bg); color: var(--red); }
.cb.case_by_case { background: var(--amber-bg); color: var(--amber); }
.cb.unknown, .cb.none { background: var(--neutral-bg); color: var(--muted); font-weight: 500; }
.ab.yes { background: var(--purple-bg); color: var(--purple); }
.ab.no { background: var(--th); color: var(--slate-text); font-weight: 500; }
.ab.varies { background: var(--amber-bg); color: var(--amber); }
.vline { display: block; font-size: 12.5px; margin-top: 3px; }
span.vline.unverified { display: inline; }
.vline.ok { color: var(--green); }
.vline.stale, .vline.unverified { color: var(--amber); }
.cov-payers { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cov-prow { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); cursor: pointer; background: var(--white); }
.cov-prow:first-child { border-top: 0; }
.cov-prow:hover { background: var(--soft); }
.cov-prow.static { cursor: default; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 6px; }
.cov-prow .pn { font-weight: 500; }
.cov-prow.sub .pn { font-weight: 400; color: var(--muted); padding-left: 10px; }
.cov-prow .vline { grid-column: 1 / -1; margin: 0; }
.cov-pcard { border-top: 1px solid var(--line); padding: 12px 14px; background: var(--soft2); }
.cov-rule .rhead { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }
.cov-rule .kv { margin-top: 12px; }
.cov-nc { background: var(--red-bg); border: 1px solid #efc6c0; border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; }
.cov-nc p { margin: 0 0 8px; color: var(--red); }
.cov-nc .kv .k { color: #7a3a33; }
.cov-alt { font-weight: 500; }
.cov-staff { background: var(--note-bg); border: 1px dashed #d9d4b8; border-radius: var(--radius); padding: 8px 10px; margin-top: 10px; font-size: 13.5px; }
.checklist { list-style: none; margin: 6px 0 10px; padding: 0; }
.checklist li { position: relative; padding: 6px 0 6px 26px; border-top: 1px solid var(--line); font-size: 14px; }
.checklist li:first-child { border-top: 0; }
.checklist li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 13px; height: 13px; border: 1.5px solid var(--muted); border-radius: 3px; }
.dxg { margin: 10px 0; }
.dxg .gname { font-weight: 600; font-size: 14px; color: var(--accent-deep); margin-bottom: 4px; }
.dxg.dx-flag .gname { color: var(--red); }
h3.deny { color: var(--red); }
.dxc { padding: 4px 0 4px 10px; border-left: 3px solid #b9dcc5; font-size: 14px; margin-bottom: 3px; }
.dxc.dx-flag { border-left-color: #e6b3ae; }
.dxc .code { font-weight: 600; margin-right: 4px; }
.dxc .tip, .dxhit .tip { display: block; color: var(--muted); font-size: 12.5px; }
.dxhit .tip.warn { color: var(--amber); }
.dxfind { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dxhit { padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.dxhit.dx-covered { background: linear-gradient(90deg, var(--green-bg), transparent 40%); }
.dxhit.dx-flag { background: linear-gradient(90deg, var(--red-bg), transparent 40%); }
.cov-mods { display: flex; flex-wrap: wrap; gap: 5px; }
.cov-mods .pill { background: var(--th); color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 400; }
.cov-fee { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); margin-bottom: 10px; }
.pairchk { margin-top: 12px; }
.pairchk select { max-width: 460px; }
.cov-ins { padding: 0; overflow: hidden; }
.cov-irow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cov-irow:first-child { border-top: 0; }
.cov-irow:hover { background: var(--soft); }
.cov-irow .sub { display: block; color: var(--muted); font-size: 12.5px; }
.cov-irow.nc .nm { color: var(--muted); }
.cov-irow .bd { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cov-foot { margin-top: 26px; }
.cov-altlist { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 10px; background: var(--field); }
.cov-altlist .check { margin: 6px 0; }
.cov-codetab input[type=text] { padding: 5px 7px; }
.cov-codetab td { padding: 5px 6px; vertical-align: middle; }
.cov-planrow { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.cov-planrow input[type=text] { flex: 1; }
.cov-planrow .check { margin: 0; }
.cov-announce { margin-top: 14px; }
.actions .spacer { flex: 1; }
@media (max-width: 999px) { .cov-cols { grid-template-columns: minmax(0, 1fr); } .cov-list { position: static; max-height: none; overflow: visible; } }
@media (max-width: 640px) { .covbar select { flex: 1 1 100%; } .cov-prow { grid-template-columns: 1fr; } .cov-prow .bd { justify-self: start; } .cov-codes .sub { margin-left: 0; } }
@media print { .covbar, .cov-list, .dxfind, #covreport, .cov-head .cov-sync { display: none !important; } .cov-cols { display: block; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* phones and narrow windows */
@media (max-width: 640px) {
  main { padding: 12px 12px 50px; }
  h1 { font-size: 19px; margin-bottom: 10px; }
  .topbar { flex-wrap: wrap; height: auto; gap: 4px 8px; padding: 6px 12px 0; padding-top: calc(6px + env(safe-area-inset-top, 0)); }
  .topbar .brand { flex: 1; font-size: 15px; margin: 0; }
  .topbar .who span { display: none; }
  .topbar nav { order: 3; flex-basis: 100%; margin: 0 -12px; padding: 2px 8px 6px; }
  .topbar nav a { padding: 7px 9px; font-size: 14px; }
  .m-only { display: inline-block; }
  .topbar nav a.cta { display: none; } /* the round + button replaces it on phones */
  main { padding-bottom: 90px; } /* room above the round + button */
  .d-only { display: none !important; }
  input[type=text], input[type=date], input[type=password], input[type=tel], input[type=search], input[type=number], select, textarea { font-size: 16px; } /* iPhones zoom in on smaller fields */
  .toolbar select, .toolbar input[type=text] { flex: 1 1 40%; min-width: 0; }
  .toolbar input[type=search] { min-width: 0; flex: 1 1 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 10px; padding: 0 12px 4px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .kv { grid-template-columns: 105px 1fr; }
  .panel { padding: 14px; }
  .login { margin: 4vh 12px; padding: 20px; }
  .modal-bg { padding: 8px; }
  .modal { padding: 16px; max-height: 96vh; }
  .chart .lbl { font-size: 10px; }
  .stat .n { font-size: 24px; }
  .check { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; align-items: start; }
  .check input { margin-top: 2px; }
  .check .hint, .check button { grid-column: 2; }
  /* wide lists become cards: one record per block, with a label in front of each value */
  .tablewrap.fit { max-height: none !important; }
  .cards table, .cards tbody { display: block; }
  .cards thead { display: none; }
  .cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--line); position: relative; }
  .cards tr:last-child { border-bottom: 0; }
  .cards td { display: block; border: 0; padding: 1px 0; font-size: 13.5px; position: static; background: transparent; width: auto; min-width: 0; text-align: left; box-shadow: none; }
  .cards td:empty { display: none; }
  .cards td.title { grid-column: 1 / -1; font-size: 15px; padding: 0 30px 3px 0; }
  .cards td.wide { grid-column: 1 / -1; }
  .cards td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; }
  .cards td.sel { position: absolute; left: auto; right: 8px; top: 8px; padding: 0; width: auto; }
  .cards td.act { position: absolute; left: auto; right: 8px; top: 8px; padding: 0; width: auto; }
  .cards td.sel input { width: 20px; height: 20px; }
  .cards td .sub { display: inline; margin-left: 4px; }
  .cards tr.row.urgent { box-shadow: inset 3px 0 0 var(--red); }
  .cards tr.row.kypho { box-shadow: inset 3px 0 0 var(--purple); }
  .cards tr.row.urgent td:first-child { box-shadow: none; }
  .cards tr.row:hover td { background: transparent; }
}
/* touch screens: bigger targets */
@media (pointer: coarse) {
  button.primary, button.secondary, button.quiet, button.danger, a.btnlink { min-height: 40px; }
  .chip { padding: 7px 12px; }
  .topbar .who button { padding: 6px 10px; }
  .timeline li { padding: 10px 0; }
  /* text-style links a thumb has to hit: at least ~36 px tall on touch screens */
  button.link, .hub-links a, .cov-detail .kv a, .hub-vers a { display: inline-block; padding: 8px 2px; }
  button.link.small { padding: 9px 2px; }
  .cards td.title a, .small90 a { display: inline-block; padding: 7px 0; }
}
@media print {
  .fab, .qd, .addnote,
  .topbar, .toolbar, .chips, .actions, .bulkbar, .pager, #toast { display: none !important; }
  main { max-width: none; padding: 0; }
  .panel, table { border: 1px solid #999; }
}

/* ---------- dark theme (the sun / moon button in every top bar; saved per login) ---------- */
.themebtn { background: none; border: 1px solid #5a7aa0; color: #fff; border-radius: 4px; padding: 2px 7px; cursor: pointer; display: inline-flex; align-items: center; }
.themebtn svg { width: 16px; height: 16px; }
.login .themebtn { color: var(--ink); border-color: var(--line); float: right; }
.hub-badge { background: var(--amber-bg); color: var(--amber); border-radius: 10px; padding: 0 6px; font-size: 12px; margin-left: 4px; font-weight: 600; }
:root[data-theme="dark"] {
  /* a softer "dim" dark: slate surfaces rather than near-black, brighter text, panels clearly lifted off the page */
  color-scheme: dark;
  --ink: #eef1f5; --muted: #b6c0cc; --line: #414c5d; --paper: #1d2430; --white: #29323f; --field: #232b37;
  --hover: #333d4d; --th: #2f3847; --neutral-bg: #3a4454; --soft: #2d3a4c; --soft2: #262f3c; --note-bg: #2e2f27; --note-line: #4d4d3c;
  --disabled-bg: #2c333e; --slate-text: #cfd8e5; --sky: #2a4566; --accent: #a4c8f7; --accent-deep: #cfe0f8;
  --red: #ffa39b; --red-bg: #4d2b28; --amber: #f7d184; --amber-bg: #4a3c1e; --green: #9ae0b6; --green-bg: #21402c;
  --purple: #d5bef8; --purple-bg: #3d3256; --overlay: rgba(0,0,0,.55);
}
:root[data-theme="dark"] .topbar { background: #1a2d47; }
:root[data-theme="dark"] .topbar nav a.active { background: #2b4a73; }
:root[data-theme="dark"] .topbar.tool-coverage { background: #1a3d3d; }
:root[data-theme="dark"] .topbar.tool-coverage nav a.active { background: #265757; }
:root[data-theme="dark"] .topbar.tool-admin, :root[data-theme="dark"] .topbar.tool-hub { background: #2a313d; }
:root[data-theme="dark"] button.primary, :root[data-theme="dark"] .chip.on, :root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .stepper li.current,
:root[data-theme="dark"] .docs, :root[data-theme="dark"] .fab { background: #3a6ca8; }
:root[data-theme="dark"] button.primary:hover { background: #4679b5; }
:root[data-theme="dark"] .flag.urgent { background: #b3261e; color: #fff; }
:root[data-theme="dark"] .flag.accepted, :root[data-theme="dark"] .stepper li.end.good { background: #1f6b3a; color: #fff; }
:root[data-theme="dark"] .flag.kypho { background: #5b3d9a; color: #fff; }
:root[data-theme="dark"] .chart .bar { background: #4a7fc0; }
:root[data-theme="dark"] .chart .bar.sched, :root[data-theme="dark"] .legend i.sched { background: #3d9a63; }
:root[data-theme="dark"] .legend i { background: #4a7fc0; }
:root[data-theme="dark"] .tablewrap { background-image: linear-gradient(90deg, var(--white) 30%, transparent), linear-gradient(270deg, var(--white) 30%, transparent),
  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.6), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.6), transparent); }
:root[data-theme="dark"] .cb.criteria { background: #21402c; color: #aee6c4; box-shadow: inset 0 0 0 1px #3b6a4b; }
:root[data-theme="dark"] .cov-nc { border-color: #5a2a26; }
:root[data-theme="dark"] .cov-nc .kv .k { color: #e9a79f; }
:root[data-theme="dark"] .dxc { border-left-color: #2f5a3d; }
:root[data-theme="dark"] .dxc.dx-flag { border-left-color: #6b302b; }
:root[data-theme="dark"] .warnbox { border-color: #5a4a1e; }
:root[data-theme="dark"] .quicklog { border-color: #2a4a6e; }
:root[data-theme="dark"] .cov-staff { border-color: #4a4630; }
:root[data-theme="dark"] .docprev iframe { background: #fff; } /* documents keep their own white page */