/*
 * Tokens: the navy chrome is the same in both schemes; each content token holds its light and its dark value, and
 * color-scheme picks one: the OS scheme by default, Light or Dark when picked.
 */
:root {
  color-scheme: light dark;
  --top: #053f5e;
  --side: #0b4f78;
  --side-active: #2a6a92;
  --side-label: #b7c9d8;
  --bg: light-dark(#ffffff, #1e2124);
  --surface: light-dark(#ffffff, #262a2e);
  --chip: light-dark(#ebebeb, #363b40);
  --border: light-dark(#dfe4e8, #3a4046);
  --text: light-dark(#1f2a33, #eef1f3);
  --muted: light-dark(#5c6872, #a9b2ba);
  --hover: light-dark(#f1f5f9, #2d3338);
  --stripe: light-dark(#fafbfc, #2a2e32);
  --open: light-dark(#e6eef5, #223241);
  --accent: light-dark(#0b4f78, #8cc4ea);
  --primary: light-dark(#0b4f78, #1d6390);
  --danger: light-dark(#c0505f, #d27782);
  --pill-green-bg: light-dark(#dcf5e1, #233a2a);
  --pill-green-fg: light-dark(#1d7a35, #a6d8ae);
  --pill-orange-bg: light-dark(#fde5cf, #40311f);
  --pill-orange-fg: light-dark(#9a4b08, #e8b98a);
  --pill-red-bg: light-dark(#fde2e5, #42272b);
  --pill-red-fg: light-dark(#b42836, #eda7ae);
  --pill-blue-bg: light-dark(#dbedfb, #213547);
  --pill-blue-fg: light-dark(#1765ad, #9fc8ea);
  --pill-grey-bg: light-dark(#e5e5e5, #383c40);
  --pill-grey-fg: light-dark(#555555, #c6cacd);
  --pill-leaver-bg: light-dark(#ece6f6, #352f45);
  --pill-leaver-fg: light-dark(#5b3f8f, #d4c4ee);
  --warn-bg: light-dark(#fff7ec, #2e2a22);
  --warn-border: light-dark(#f1d3a6, #5a4630);
  --ok-bg: light-dark(#eef8f0, #263329);
  --fail-bg: light-dark(#fdf0f1, #3a2c2e);
  --panel-shadow: light-dark(rgba(15, 30, 45, 0.18), rgba(0, 0, 0, 0.5));
  --scrim: light-dark(rgba(20, 30, 40, 0.38), rgba(0, 0, 0, 0.55));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
[hidden] { display: none !important; }
a { color: var(--accent); }
/* Text for screen readers only. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar: the app title on the left, the signed-in email and Sign out on the right. */
header.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 56px; padding: 0 24px;
  background: var(--top); color: #ffffff;
}
.app-title { font-size: 16px; font-weight: 700; }
header.topbar .signin {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-left: auto; min-width: 0; overflow-wrap: anywhere;
}
header.topbar .signin .sub { color: #ffffff; font-size: 14px; }
header.topbar .signin button:not(.primary) {
  background: transparent; border: 1px solid #ffffff; color: #ffffff; padding: 0 10px; font-size: 12px;
}
header.topbar .signin button:not(.primary):hover { background: rgba(255, 255, 255, 0.12); }
/* The theme picker, white on navy like Sign out; its open list uses the page colours. */
header.topbar select.theme-pick {
  background: transparent; border: 1px solid #ffffff; color: #ffffff; padding: 0 4px; font-size: 12px; height: 32px;
}
header.topbar select.theme-pick:hover { background: rgba(255, 255, 255, 0.12); }
header.topbar select.theme-pick option { background: var(--surface); color: var(--text); }
header.topbar button.enrol-open { margin-left: auto; background: transparent; border: 1px solid #ffffff; color: #ffffff; padding: 0 10px; font-size: 12px; }
header.topbar button.enrol-open:hover { background: rgba(255, 255, 255, 0.12); }
header.topbar button.enrol-open:not([hidden]) + .signin { margin-left: 0; }

/* Shell: the navy sidebar column runs the page height; the sidebar itself pins to the top of the window. */
.shell {
  display: flex; align-items: stretch; min-height: calc(100vh - 56px);
  background: linear-gradient(to right, var(--side) 220px, transparent 220px);
}
.sidebar {
  flex: 0 0 220px; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto;
  background: var(--side); padding: 16px 12px;
}
main.content { flex: 1 1 auto; min-width: 0; padding: 18px 24px 28px; }
.nav-label {
  margin: 0; padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--side-label);
}
.nav-link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; margin: 2px 0 0; padding: 0 10px;
  background: none; border: 0; border-radius: 4px; color: #ffffff; font-size: 14px; text-align: left;
}
.nav-link svg { flex: 0 0 16px; }
.nav-link:hover { background: rgba(255, 255, 255, 0.08); }
.nav-link.active, .nav-link.active:hover { background: var(--side-active); }
header.topbar button:focus-visible, header.topbar select:focus-visible, .nav-link:focus-visible { outline-color: #ffffff; }
.nav-divider { height: 1px; margin: 12px 10px; background: rgba(255, 255, 255, 0.18); }
.badge {
  margin-left: auto; padding: 0 8px; border-radius: 10px; background: #40311f; color: #e8b98a; font-size: 12px;
  font-weight: 700; line-height: 20px;
}
.badge-zero { background: rgba(255, 255, 255, 0.12); color: #d6e2ec; }
/* Under the nav: one thin bar per seat tier, amber when no seat is free, then the status key. */
.side-group { margin-top: 16px; }
.seat { padding: 4px 10px 6px; color: #d6e2ec; font-size: 12px; line-height: 16px; }
.seat-line { display: flex; justify-content: space-between; gap: 8px; }
.seat.full .seat-num { color: #ffd9a8; font-weight: 700; }
progress.seat-bar {
  display: block; width: 100%; height: 4px; margin-top: 3px; border: 0; border-radius: 2px; overflow: hidden;
  appearance: none; background: rgba(255, 255, 255, 0.16); color: #b7c9d8;
}
progress.seat-bar::-webkit-progress-bar { background: rgba(255, 255, 255, 0.16); }
progress.seat-bar::-webkit-progress-value { background: #b7c9d8; border-radius: 2px; }
progress.seat-bar::-moz-progress-bar { background: #b7c9d8; border-radius: 2px; }
.seat.full progress.seat-bar::-webkit-progress-value { background: #ffd9a8; }
.seat.full progress.seat-bar::-moz-progress-bar { background: #ffd9a8; }
.key-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px; }
.key-pills .pill { margin: 0; }
/* The same seats and key in a closed disclosure, shown only in the narrow nav strip. */
details.side-narrow { display: none; }
details.side-narrow > summary {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 4px; color: #ffffff;
  font-size: 14px; cursor: pointer;
}
details.side-narrow > summary:hover { background: rgba(255, 255, 255, 0.08); }
details.side-narrow > summary:focus-visible { outline-color: #ffffff; }
details.side-narrow[open] { padding-bottom: 6px; }

.page-title { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0 0 10px; color: var(--accent); }
h2 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--accent); }
h2 .sub { font-weight: 400; margin-left: 6px; }
section { margin: 12px 0 0; min-width: 0; }
.sub, .muted, .noop { color: var(--muted); }
.sub { font-size: 12px; }

/* Buttons are grey; primary actions are navy, destructive ones muted red. */
button {
  min-height: 32px; padding: 0 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer;
}
button:hover { background: var(--chip); }
button.primary { background: var(--primary); border-color: var(--primary); color: #ffffff; }
button.primary:hover { background: var(--primary); filter: brightness(1.08); }
button.danger { color: var(--danger); border-color: var(--danger); }
button.danger:hover { background: var(--danger); color: #ffffff; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:disabled:hover { background: var(--surface); filter: none; }
button.primary:disabled:hover { background: var(--primary); }
button.danger:disabled:hover { background: var(--surface); color: var(--danger); }
button.sm { padding: 0 10px; font-size: 12px; margin-left: 6px; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
/* A button that reads as a link, for an action inside a line of text. */
button.link {
  min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent); font: inherit;
  text-decoration: underline;
}
button.link:hover { background: none; }

select, input[type=search], input[type=text] {
  height: 32px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; padding: 0 8px; max-width: 100%;
}
select:disabled, input:disabled { opacity: 0.5; cursor: not-allowed; }
input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); vertical-align: middle; }

/* Result lines: an icon and a coloured left rule by outcome, green done, red failed, blue anything else; Dismiss. */
.message {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 6px 6px 6px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
.res-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.res {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 10px; border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere;
}
.res svg { flex: 0 0 16px; color: var(--accent); }
.res-ok { border-left-color: var(--pill-green-fg); background: var(--ok-bg); }
.res-ok svg { color: var(--pill-green-fg); }
.res-fail { border-left-color: var(--pill-red-fg); background: var(--fail-bg); }
.res-fail svg { color: var(--pill-red-fg); }
.message > button.sm { flex: 0 0 auto; margin-left: 0; }

/* Banner notices: an amber warning box, or a muted information line. */
.notice {
  display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; color: var(--muted); font-size: 13px;
  line-height: 20px; overflow-wrap: anywhere;
}
.notice svg { flex: 0 0 16px; margin-top: 2px; }
.notice b { color: var(--text); font-weight: 600; }
.notice-amber {
  padding: 6px 10px; color: var(--text); background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-left: 3px solid var(--pill-orange-fg); border-radius: 0 6px 6px 0;
}
.notice-amber svg { color: var(--pill-orange-fg); }
.notice-info { padding: 2px 10px 2px 13px; }
.mfa-drift { list-style: none; margin: 4px 0 0; padding: 0 10px; font-size: 13px; }
.mfa-drift li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--border); overflow-wrap: anywhere;
}
.tag-red::before, .tag-amber::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  background: var(--accent); vertical-align: 1px;
}

/*
 * Tables: no scroll box above 560 px, so the page scrolls and the header row pins to the top of the window; the box
 * clips anything wider than itself.
 */
.table-scroll {
  max-width: 100%; overflow-x: clip; background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
thead th {
  text-align: left; vertical-align: middle; font-size: 13px; font-weight: 700; color: var(--text);
  height: 36px; padding: 2px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; z-index: 2; background: var(--surface);
}
/* A sortable header looks like the header text. */
button.sort {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; border-radius: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
button.sort:hover { background: none; }
.sort-arrow { color: var(--accent); }
tbody td { padding: 4px 8px; line-height: 20px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
.greyed, tr.greyed td { color: var(--muted); opacity: 0.7; }
table.cards td.c-name { overflow-wrap: anywhere; }
.c-name .name, .c-name .upn, .c-name .sub { display: block; }
td.c-tier { white-space: nowrap; }
table.people td.c-tier { white-space: normal; }
td.c-num { text-align: right; font-variant-numeric: tabular-nums; }
td.c-actions { white-space: nowrap; }
td.c-actions button.sm { margin: 2px 6px 2px 0; }

/* People bar: search, Show, the tick-box filters and Sort on the left; the attention count and Fix all on the right. */
.people-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.people-bar input[type=search] { flex: 0 1 240px; min-width: 0; }
.bar-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.attention-note { color: var(--muted); font-size: 13px; }
/* The Sort select shows only on narrow screens, where the column headers are hidden. */
select.sort-pick { display: none; }
/* A tick-box filter: a button with the ticked labels, opening a panel of tick boxes under it. */
.pick { position: relative; }
button.pick-btn {
  position: relative; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 26px 0 10px; text-align: left; vertical-align: middle;
}
button.pick-btn::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; margin-top: -4px;
  border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
button.pick-btn[aria-expanded="true"]::after { margin-top: -1px; transform: rotate(-135deg); }
.pick-panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; width: max-content; min-width: 100%;
  max-width: calc(100vw - 16px); max-height: min(360px, 60vh); overflow: hidden auto; padding: 6px 22px 6px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 14px var(--panel-shadow);
}
/* A panel that would run off the right of the window lines up with its button's right edge instead. */
.pick-panel.pick-end { left: auto; right: 0; }
label.pick-opt { display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; font-size: 13px; line-height: 24px; }
.no-match { margin: 8px 0 0; }
.section-sub { margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }

/*
 * People rows: fixed columns above 560 px, so a long status reason cuts off with an ellipsis. Until the columns are
 * fitted they share the width by percent; once fitted the table takes the sum of its session widths, and its box hugs
 * it, scrolling sideways only when the sum is wider than the room.
 */
@media (min-width: 561px) {
  table.people { table-layout: fixed; }
  table.people.sized { width: var(--table-w); }
  .people-box:has(> table.sized) { width: fit-content; }
  .people-box:has(> table.sized):not(.fits) { overflow-x: auto; }
  table.people > thead th:nth-child(1) { width: 13%; }
  table.people > thead th:nth-child(2) { width: 18%; }
  table.people > thead th:nth-child(3) { width: 7%; }
  table.people > thead th:nth-child(4) { width: 10%; }
  table.people > thead th:nth-child(5) { width: 8%; }
  table.people > thead th:nth-child(6) { width: 10%; }
  table.people > thead th:nth-child(7) { width: 17%; }
  table.people > thead th:nth-child(8) { width: 8%; }
  table.people > thead th:nth-child(9) { width: 9%; }
}
/* A flagged Equipment row is red. */
table.equipment tr.quiet > td { background: var(--pill-red-bg); color: var(--pill-red-fg); }
table.people > tbody > tr > td { font-size: 14px; }
tr.row-toggle { cursor: pointer; }
/* Every second People row is striped; a closed row's hover is --hover. */
table.people tbody tr.alt td { background: var(--stripe); }
table.people tbody tr:hover td { background: var(--hover); }
/* A row that opens starts with its open button, a chevron pointing right, and down while the row is open. */
table.people td.c-name { position: relative; }
table.people td.c-name:has(> .chev), table.people:has(.chev) > thead th:first-child { padding-left: 44px; }
button.chev {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center;
  justify-content: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted);
}
button.chev:hover { background: var(--chip); color: var(--text); }
button.chev svg { transition: transform 0.12s; }
tr.row-open button.chev { color: var(--accent); }
tr.row-open button.chev svg { transform: rotate(90deg); }
.role-chip {
  display: inline-block; margin: 1px 4px 1px 0; padding: 0 8px; font-size: 12px; line-height: 20px;
  background: var(--chip); border-radius: 10px; white-space: nowrap; vertical-align: middle;
}
.chip-personal { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.role-chip.via-roles { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); color: var(--muted); }
/* A draftee level and its work on a line of their own. */
.dline { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skills { margin-right: 8px; color: var(--muted); font-size: 12px; vertical-align: middle; }
.dev { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.dev svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted); }
.pill {
  display: inline-block; margin-right: 6px; padding: 0 10px; border-radius: 10px; font-size: 12px; font-weight: 700;
  line-height: 20px; white-space: nowrap;
}
.pill-green { background: var(--pill-green-bg); color: var(--pill-green-fg); }
.pill-orange { background: var(--pill-orange-bg); color: var(--pill-orange-fg); }
.pill-red { background: var(--pill-red-bg); color: var(--pill-red-fg); }
.pill-blue { background: var(--pill-blue-bg); color: var(--pill-blue-fg); }
.pill-grey { background: var(--pill-grey-bg); color: var(--pill-grey-fg); }
.pill-leaver { background: var(--pill-leaver-bg); color: var(--pill-leaver-fg); }
/* The Equipment type toggles: on is outlined in the accent colour, off is muted. */
.equipment-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.equipment-types button.sm { margin-left: 0; }
.equipment-types button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.equipment-types button[aria-pressed="false"] { color: var(--muted); }
/* The status: the pill, then one reason line under it, cut off with an ellipsis. */
td.c-status .pill { margin: 0; }
td.c-status .reason {
  display: block; max-width: 100%; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.should-be { display: block; color: var(--muted); font-size: 12px; line-height: 16px; }
td.c-signin { white-space: nowrap; }
table.people.sized td.c-signin { white-space: normal; }

/* The open row and its edit row: the --open tint, hovered or not, and one 3 px accent bar down their left edge. */
table.people tbody tr.row-open td, table.people tbody tr.row-edit td { background: var(--open); }
table.people tbody tr.row-open td { border-bottom-color: transparent; }
table.people tbody tr.row-edit td { cursor: default; }
table.people tbody tr.row-open td:first-child, table.people tbody tr.row-edit td:first-child {
  background: linear-gradient(to right, var(--accent) 3px, var(--open) 3px);
}
/* The edit area: a card inset in the open row, one wrapping line of groups with thin dividers, then the foot. */
td.c-edit { padding: 0 10px 10px 13px; }
.edit-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
.edit-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.edit-cols > fieldset + fieldset { border-left: 1px solid var(--border); padding-left: 12px; }
fieldset.role-group { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.role-group legend { padding: 0; margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
select.draftee-short { width: 110px; }
.draftee-note { margin: 4px 0 0; max-width: 160px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
label.role-opt { display: flex; align-items: center; gap: 6px; min-height: 28px; white-space: nowrap; cursor: pointer; font-size: 13px; }
label.role-opt.leaver-box { color: var(--danger); }
/* An override the selected roles already give: greyed, disabled, with a small "via roles" note. */
label.role-opt.covered { color: var(--muted); cursor: default; }
label.role-opt.covered input { cursor: default; }
.via { color: var(--muted); font-size: 11px; font-weight: 400; white-space: nowrap; }
.edit-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.edit-note { flex: 1 1 200px; min-width: 0; margin-right: auto; }
/* The Changes line: green chips for roles added, red for roles removed, then the licence move, amber with no seat. */
.changes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.foot-label { margin-right: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.change {
  display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 20px;
  white-space: nowrap;
}
.change-add { background: var(--pill-green-bg); color: var(--pill-green-fg); }
.change-del { background: var(--pill-red-bg); color: var(--pill-red-fg); }
.summary { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.summary.seat-short { color: var(--pill-orange-fg); font-weight: 600; }
/* A Save that cannot run keeps full strength: muted text on grey with its lock, its title saying why. */
.edit-foot button[data-act="save"]:disabled {
  display: inline-flex; align-items: center; gap: 6px; opacity: 1; background: var(--chip); border-color: var(--border);
  color: var(--muted);
}
.edit-foot button[data-act="save"]:disabled:hover { background: var(--chip); filter: none; }
/* The open row's devices, under the groups: a small table without the People row tints, hover or pinned header. */
.edit-devices { margin-top: 10px; }
.edit-devices-head { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.edit-devices .table-scroll { display: inline-block; }
table.person-devices {
  width: auto; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px;
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
table.people tbody tr.row-edit table.person-devices th {
  position: static; width: auto; height: auto; padding: 5px 10px; font-size: 12px; background: var(--chip);
}
table.people tbody tr.row-edit table.person-devices td {
  padding: 5px 10px; font-size: 13px; background: var(--bg); overflow-wrap: anywhere;
}
table.people tbody tr.row-edit table.person-devices td.c-device { white-space: normal; max-width: 260px; }
ul.steps { margin: 4px 0 0; padding-left: 20px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* The unsaved-changes, Fix all and enrolment dialogs: a small card over the dimmed page, its buttons on the right. */
dialog.unsaved, dialog.confirm, dialog.enrol {
  width: min(360px, calc(100vw - 32px)); padding: 18px 20px 16px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 14px 36px var(--panel-shadow);
}
dialog.unsaved::backdrop, dialog.confirm::backdrop, dialog.enrol::backdrop { background: var(--scrim, rgba(20, 30, 40, 0.38)); }
dialog.unsaved h2, dialog.confirm h2, dialog.enrol h2 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
dialog.unsaved p, dialog.confirm p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
dialog.enrol { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.enrol-block { margin-top: 14px; }
.enrol-block h3 { margin: 0; font-size: 14px; color: var(--text); }
.enrol-block p { margin: 4px 0 0; font-size: 13px; }
img.enrol-qr { display: block; width: 360px; max-width: 100%; height: auto; margin: 8px auto 0; padding: 12px; background: #ffffff; border-radius: 4px; }
.enrol-howto-head { margin: 16px 0 4px; font-size: 13px; color: var(--text); }
ol.enrol-howto { margin: 0; padding-left: 20px; font-size: 13px; }

/* Roles and admins tab */
.tag { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.grant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
/*
 * The role matrix: columns sized from the session widths, the box hugging the table and scrolling sideways when the
 * table is wider than the page, else clipping so the head pins.
 */
.matrix-box { overflow-x: auto; }
.matrix-box:has(> table.sized) { width: fit-content; }
.matrix-box.fits { overflow-x: clip; }
table.matrix { table-layout: fixed; }
table.matrix.sized { width: var(--table-w); }
table.matrix thead th {
  vertical-align: bottom; height: auto; padding: 6px 8px; font-size: 12px; line-height: 15px; white-space: normal;
}
table.matrix thead tr + tr th { top: var(--band-h, 25px); }
table.matrix thead th.band {
  text-align: center; padding: 5px 4px 3px; border-bottom: 2px solid var(--border); color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
table.matrix thead th.box { text-align: center; padding: 4px 3px 6px; line-height: 14px; }
table.matrix .g { border-left: 1px solid var(--border); }
.sg { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 12px; overflow-wrap: anywhere; }
table.matrix tbody td { padding: 2px 8px; font-size: 13px; line-height: 17px; }
table.matrix tbody td.c-box { text-align: center; padding: 0 2px; }
label.cb { display: flex; align-items: center; justify-content: center; min-height: 28px; cursor: pointer; }
table.matrix td.c-num, table.matrix th.h-members { text-align: center; }
table.matrix td.c-name, table.matrix td.c-tier { overflow-wrap: anywhere; }
table.matrix td.c-tier { white-space: normal; }
td.c-special { color: var(--muted); font-style: italic; }
table.matrix tbody tr.alt td { background: var(--stripe); }
table.matrix tbody tr:hover td { background: var(--hover); }
/* A role whose line is broken: a red bar down its left edge, its cheapest tier an amber warning, its Retire red. */
table.matrix tbody tr.row-broken td:first-child { box-shadow: inset 3px 0 0 var(--pill-red-fg); }
.warn { display: flex; align-items: flex-start; gap: 5px; color: var(--pill-orange-fg); font-size: 12px; line-height: 15px; }
.warn svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }
/* Retire is quiet text, red on hover or on a broken row; a quiet Save until there is something to save. */
button.retire { background: transparent; border-color: transparent; color: var(--muted); padding: 0 8px; }
button.retire:hover { background: transparent; color: var(--pill-red-fg); text-decoration: underline; }
button.retire:disabled { opacity: 0.7; }
button.retire:disabled:hover { background: transparent; color: var(--muted); text-decoration: none; }
button.retire.hot, button.retire.hot:disabled:hover { color: var(--pill-red-fg); text-decoration: underline; opacity: 1; }
button.save:disabled { opacity: 1; background: transparent; border-color: var(--border); color: var(--muted); }
button.save:disabled:hover { background: transparent; }
tr.new-role td { border-top: 1px solid var(--border); }
tr.new-role td.c-name { white-space: nowrap; }
tr.new-role .prefix { color: var(--muted); margin-right: 0.25em; }
tr.new-role input[data-act="new-role-name"] { width: calc(100% - 3em); min-width: 0; }
table.matrix input[type=text] { height: 28px; font-size: 12px; }
table.matrix input.note-input { display: block; width: 100%; min-width: 0; background: var(--bg); }
/* A matrix row with unsaved changes: the --open tint and accent bar of an open People row. */
table.matrix tbody tr.row-unsaved td { background: var(--open); }
table.matrix tbody tr.row-unsaved td:first-child { background: linear-gradient(to right, var(--accent) 3px, var(--open) 3px); }
/* Column grips: a strip on each header's right edge; drag to resize, double-click to fit. */
.col-grip { position: absolute; top: 0; right: 0; width: 8px; height: 100%; z-index: 3; cursor: col-resize; touch-action: none; }
th:hover > .col-grip::after, .col-grip:hover::after {
  content: ""; position: absolute; right: 0; top: 4px; bottom: 4px; width: 2px; background: var(--accent);
}
table.resizing { cursor: col-resize; user-select: none; }
/* Once sized, a header wraps at its spaces when its column is narrower than its text; measuring keeps it on one line. */
table.sized > thead th, table.sized > thead th button.sort { white-space: normal; }
table.sized > thead th button.sort { text-align: left; }
table.measuring, table.measuring * { white-space: nowrap !important; }

/* Card layout on narrow screens */
@media (max-width: 560px) {
  header.topbar { padding: 8px; justify-content: flex-end; }
  .app-title { flex: 1 1 100%; }
  .shell { display: block; min-height: 0; background: none; }
  .sidebar { position: static; max-height: none; overflow: visible; padding: 4px 8px; }
  .nav-label, .nav-divider, .side-wide { display: none; }
  details.side-narrow { display: block; margin-top: 4px; }
  details.side-narrow .nav-label { display: block; }
  details.side-narrow .side-group { margin-top: 6px; }
  .nav-link { display: inline-flex; width: auto; margin: 0 4px 0 0; padding: 0 10px; }
  .badge { margin-left: 2px; }
  main.content { padding: 12px 8px 28px; }
  .page-title { font-size: 20px; }
  select.sort-pick { display: inline-block; }
  .table-scroll { overflow-x: auto; }
  .matrix-box, .matrix-box:has(> table.sized) { width: auto; }
  table.matrix.sized, table.people.sized { width: 100%; }
  thead th { padding: 4px 3px; font-size: 11px; }
  tbody td { padding: 3px 4px; }
  table.cards thead, table.cards colgroup { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; }
  table.cards tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
  table.cards tr:last-child { border-bottom: 0; }
  table.cards tbody td { border-bottom: 0; padding: 1px 8px; min-width: 0; }
  table.cards td[data-label]::before {
    content: attr(data-label); display: inline-block; min-width: 82px; color: var(--muted); font-size: 11px;
  }
  table.people.cards td.c-name::before { content: none; }
  table.cards td.c-actions:empty { display: none; }
  table.people.cards td.c-name:has(> .chev) { min-height: 40px; padding-left: 44px; }
  table.matrix td.c-box { display: inline-block; text-align: left; padding-right: 4px; }
  table.matrix td.c-box::before { min-width: 0; margin-right: 4px; }
  table.matrix.cards label.cb { display: inline-flex; min-height: 0; }
  table.matrix .g { border-left: 0; }
  table.matrix td.c-num, table.matrix td.c-special { text-align: left; }
  table.matrix.cards tbody tr.row-unsaved { background: var(--open); box-shadow: inset 3px 0 0 var(--accent); }
  table.matrix.cards tbody tr.row-unsaved td { background: transparent; }
  table.matrix.cards tbody tr.row-broken td:first-child { box-shadow: none; }
  table.cards tr.row-open { border-bottom: 0; }
  table.people.cards tbody tr.alt { background: var(--stripe); }
  table.people.cards tbody tr.row-open, table.people.cards tbody tr.row-edit {
    background: var(--open); box-shadow: inset 3px 0 0 var(--accent);
  }
  table.people.cards tbody tr.row-open td, table.people.cards tbody tr.row-edit td { background: transparent; }
  table.cards tr.row-edit td.c-edit { padding: 0 8px 10px 11px; }
  .edit-card { padding: 12px; }
  .edit-cols { flex-direction: column; gap: 12px; }
  .edit-cols > fieldset + fieldset { border-left: 0; padding-left: 0; }
  label.role-opt { white-space: normal; }
  .people-bar input[type=search] { flex: 1 1 100%; }
  .bar-end { margin-left: 0; }
  /* The tick-box panel spans the people bar under it, so it never runs off the window. */
  .people-bar { position: relative; }
  .pick { position: static; }
  .pick-panel, .pick-panel.pick-end { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  label.pick-opt { white-space: normal; }
}