/* One stylesheet, no framework. Follows the reader's light/dark preference,
   or the choice made with the switch in the top bar,
   because half of this will be read at night from a phone.

   Colour comes from the unit's own Discord roles: wings and ranks are drawn
   in their role colours, so the site's own palette stays quiet around them.
   The accent is for things you can press. */

:root {
  color-scheme: light;
  /* ground and surfaces */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --line: #e1e4ea;
  --line-strong: #c9ced7;
  /* text, darkest to faintest */
  --ink: #12151b;
  --ink-2: #4b5261;
  --ink-3: #737a88;
  /* pressable */
  --accent: #3a4fd0;
  --accent-hover: #2f43bd;
  --accent-ink: #ffffff;
  --accent-soft: #e9ecfc;
  /* chart marks: the accent held in a steady lightness band */
  --chart: #3a4fd0;
  /* meaning, never decoration */
  --ok: #1f8a4c;
  --ok-soft: #e2f3e9;
  --warn: #a8660a;
  --warn-soft: #faf0dc;
  --bad: #c53743;
  --bad-soft: #fbe6e8;

  --shadow: 0 1px 2px rgba(18, 21, 27, .05), 0 1px 1px rgba(18, 21, 27, .03);
  --shadow-lift: 0 10px 30px rgba(18, 21, 27, .12);
  --radius: 8px;
  --radius-lg: 12px;

  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* the names older rules use */
  --card: var(--surface);
  --muted: var(--ink-2);
  --ok-bg: var(--ok-soft);
  --ok-line: color-mix(in srgb, var(--ok) 45%, transparent);
  --warn-bg: var(--warn-soft);
  --warn-line: color-mix(in srgb, var(--warn) 45%, transparent);
}

/* Dark, when the device asks for it and nobody has chosen light on this
   site, or when they have chosen dark. The same tokens twice, because a media
   query cannot be combined with an attribute selector any other way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1014;
    --surface: #161920;
    --surface-2: #1d2028;
    --line: #262a33;
    --line-strong: #353a45;
    --ink: #e9ebef;
    --ink-2: #aab0bc;
    --ink-3: #7d8493;
    --accent: #8d9bff;
    --accent-hover: #a5b0ff;
    --accent-ink: #0e1014;
    --accent-soft: #232848;
  --chart: #7885e7;
    --ok: #4fc58c;
    --ok-soft: #15291e;
    --warn: #e3a64a;
    --warn-soft: #2e2416;
    --bad: #f27d88;
    --bad-soft: #351c21;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lift: 0 12px 32px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1014;
  --surface: #161920;
  --surface-2: #1d2028;
  --line: #262a33;
  --line-strong: #353a45;
  --ink: #e9ebef;
  --ink-2: #aab0bc;
  --ink-3: #7d8493;
  --accent: #8d9bff;
  --accent-hover: #a5b0ff;
  --accent-ink: #0e1014;
  --accent-soft: #232848;
  --chart: #7885e7;
  --ok: #4fc58c;
  --ok-soft: #15291e;
  --warn: #e3a64a;
  --warn-soft: #2e2416;
  --bad: #f27d88;
  --bad-soft: #351c21;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
/* Anything given display: flex or grid below would otherwise ignore it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------- type */

h1 { font-size: 1.65rem; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; margin: 0 0 .25rem; text-wrap: balance; }
h1 .muted { font-weight: 450; color: var(--ink-3); }
h2 { font-size: 1.06rem; line-height: 1.3; font-weight: 620; letter-spacing: -.005em; margin: 2.2rem 0 .7rem; text-wrap: balance; }
h3 { font-size: .95rem; font-weight: 620; margin: 1.4rem 0 .5rem; }
p { margin: .5rem 0; }
.muted { color: var(--ink-2); font-weight: 400; }
.faint { color: var(--ink-3); }
.small { font-size: .86em; }
.error { color: var(--bad); }
.warn-text { color: var(--bad); }
.bad-text { color: var(--bad); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.num, time, .stats, .readout dd, td.num { font-variant-numeric: tabular-nums; }

/* An intro paragraph under a heading or a set of tabs. */
.lede { color: var(--ink-2); max-width: 70ch; margin: 0 0 1rem; }
/* A heading with a count beside it. */
.section-head { display: flex; align-items: center; gap: .5rem; }
.count-pill {
  display: inline-grid; place-items: center; min-width: 1.6rem; padding: 0 .45rem;
  border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1.5;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.count-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.count-pill.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }

/* Links read as links in sentences, and as names everywhere else. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
p a, li a, .notice a, .hint a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a[data-member] { color: var(--ink); font-weight: 560; cursor: pointer; text-decoration: none; }
a[data-member]:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

code {
  font-family: var(--mono); font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; padding: .05em .35em;
}

/* ----------------------------------------------------------- top bar */

/* The top bar only. A bare `header` selector also styled the header inside
   every card, spreading its contents to either edge. */
body > header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .55rem 1.25rem; min-height: 3.5rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  color: var(--ink); font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 7px; background: var(--ink); color: var(--surface);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
img.brand-mark { background: none; object-fit: cover; }

/* One button, three states: the icon shown is the theme in use. */
.theme-switch {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto;
  border-radius: 7px; color: var(--ink-3);
}
.theme-switch:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.theme-switch svg { display: none; }
.theme-switch[data-mode="system"] .icon-system,
.theme-switch[data-mode="light"] .icon-light,
.theme-switch[data-mode="dark"] .icon-dark { display: block; }
body > header nav { display: flex; align-items: center; gap: .9rem; min-width: 0; }

.tabs { display: flex; gap: .15rem; margin-right: .4rem; }
.tabs a {
  color: var(--ink-2); font-weight: 520; font-size: .92rem;
  padding: .38rem .65rem; border-radius: 7px;
}
.tabs a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.tabs a.on { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tabs .count {
  display: inline-block; min-width: 1.35em; padding: 0 .4em; margin-left: .3rem;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; font-weight: 650; line-height: 1.5; text-align: center; vertical-align: 1px;
}

.who { display: flex; align-items: center; gap: .55rem; padding-left: .9rem; border-left: 1px solid var(--line); }
.who-name { display: flex; flex-direction: column; line-height: 1.2; }
.who-name strong { font-size: .88rem; font-weight: 600; }
.who-name .muted { font-size: .76rem; color: var(--ink-3); }
.avatar { width: 28px; height: 28px; border-radius: 50%; }
body > header form button.link { color: var(--ink-3); font-size: .86rem; }

/* ------------------------------------------------------------ layout */

main { max-width: 1080px; margin: 0 auto; padding: 1.8rem 1.25rem 4rem; }
footer { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem 2rem; }

/* Title and any buttons on one line, the introduction on its own below. */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem 1.2rem; margin-bottom: 1.1rem; }
.page-head h1 { margin: 0; }
.page-head .lede { grid-column: 1 / -1; margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 640px) {
  .page-head { grid-template-columns: minmax(0, 1fr); }
}

.crumb { margin: 0 0 .5rem; font-size: .88rem; }
.crumb a { color: var(--ink-2); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.15rem 1.25rem; margin: 1rem 0;
  box-shadow: var(--shadow);
}
.narrow { max-width: 30rem; }

.notice {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .9rem; margin: 1rem 0; background: var(--surface);
}
.notice.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.notice ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* A paragraph of explanation, folded away until somebody wants it. */
details.help { margin: 1.2rem 0; color: var(--ink-2); max-width: 75ch; }
details.help summary { cursor: pointer; color: var(--ink-2); font-size: .9rem; font-weight: 520; }
details.help summary:hover { color: var(--ink); }
details.help[open] summary { margin-bottom: .4rem; }

/* ------------------------------------------------------------- forms */

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
input, select, textarea {
  font: inherit; font-size: .93rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 7px; padding: .45rem .6rem;
  min-height: 2.35rem;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink-3) 60%, var(--line-strong)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { min-height: 0; accent-color: var(--accent); }
input[type=search] { min-width: 16rem; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { width: 100%; resize: vertical; line-height: 1.5; }

button, .button {
  font: inherit; font-size: .92rem; font-weight: 560; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: 7px;
  padding: .45rem .95rem; min-height: 2.35rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  text-decoration: none; white-space: nowrap;
}
button:hover, .button:hover { background: var(--accent-hover); color: var(--accent-ink); text-decoration: none; }
button:disabled { opacity: .55; cursor: default; }
button.secondary, .button.secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow);
}
button.secondary:hover, .button.secondary:hover { background: var(--surface-2); color: var(--ink); }
button.link, .link {
  background: none; color: var(--accent); padding: 0; min-height: 0;
  border: 0; font-weight: 500; box-shadow: none;
}
button.link:hover, .link:hover { background: none; color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.danger-button { background: var(--bad); color: #fff; }
.danger-button:hover { background: color-mix(in srgb, var(--bad) 85%, black); color: #fff; }
.danger { margin-top: .55rem; }
.danger button, button.link.danger-link { color: var(--bad); }

.field { margin: 0 0 1rem; }
.field label { display: block; font-weight: 560; margin-bottom: .3rem; font-size: .86rem; color: var(--ink-2); }
.field output { display: block; padding: .42rem 0; color: var(--ink); }
.field input, .field select { width: 100%; }
.hint { margin: .35rem 0 0; font-size: .84rem; color: var(--ink-3); }
.actions { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* Two columns of fields where there is room for them. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.readout { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
.readout dt { color: var(--ink-3); font-size: .88rem; }
.readout dd { margin: 0; }

/* ------------------------------------------------------------ tables */

/* Wide tables scroll inside their own box rather than the page. */
.scroll {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); background: var(--surface-2); white-space: nowrap;
}
th.num, td.num { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
tr.inactive td > * { opacity: .6; }
tr.inactive td .status { opacity: 1; }

.badge {
  display: inline-block; min-width: 1.3em; text-align: center;
  border-radius: 5px; font-weight: 600; font-size: .76rem; line-height: 1.6; padding: 0 .4em;
}
.badge.bad { background: var(--bad); color: #fff; }

/* ------------------------------------------------ roles and statuses */

/* A wing or rank in its Discord role's colour. */
.role-chip {
  --role: var(--ink-3);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .12rem .55rem .12rem .45rem; border-radius: 999px;
  font-size: .84rem; font-weight: 520; line-height: 1.45; white-space: nowrap;
  color: var(--ink);
  background: color-mix(in srgb, var(--role) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--role) 32%, transparent);
}
.role-chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--role); flex: 0 0 auto; }
.role-chip.plain { background: var(--surface-2); border-color: var(--line); }

.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 520; white-space: nowrap; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.status.active::before { background: var(--ok); }
.status.loa { color: var(--warn); }
.status.loa::before { background: var(--warn); }
.status.reserve { color: var(--ink-2); }
.status.discharged { color: var(--bad); }
.status.discharged::before { background: var(--bad); }
.status-until { font-weight: 400; color: var(--ink-3); }

.flag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 600; white-space: nowrap; cursor: help;
  color: var(--bad); background: var(--bad-soft);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
  border-radius: 999px; padding: .05rem .55rem;
}
.flag::before { content: "!"; font-weight: 800; }

.initials {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  font-size: .78rem; font-weight: 650; letter-spacing: .02em;
}
.initials.lg { width: 3.4rem; height: 3.4rem; font-size: 1.15rem; }
.initials.sm { width: 1.45rem; height: 1.45rem; font-size: .62rem; }
.avatar-img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--surface-2); }
.avatar-img.lg { width: 3.4rem; height: 3.4rem; }
.avatar-img.sm { width: 1.45rem; height: 1.45rem; }

/* ----------------------------------------------------------- roster */

.who-cell { min-width: 11rem; }
.who-line { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.who-text { min-width: 0; }
.who-cell .name { display: block; line-height: 1.3; }
.who-cell .lore { display: block; font-size: .8rem; color: var(--ink-3); line-height: 1.3; }
.who-cell .name:not(a) { font-weight: 560; }
.flag-cell { width: 1%; text-align: right; }

/* Rank and wing under the name, for when there is no room for their own
   columns. Hidden until then. */
.stacked-roles { display: none; }
@media (max-width: 640px) {
  table.roster .col-wing, table.roster .col-rank, table.roster .flag-cell { display: none; }
  table.roster .stacked-roles { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
  table.roster .stacked-roles > * { font-size: .74rem; }
  table.roster .who-cell { min-width: 0; }
  table.roster th, table.roster td { padding-left: .5rem; padding-right: .5rem; }
  table.roster th { white-space: normal; }
  table.roster td.num { white-space: nowrap; }
  table.roster .status { white-space: normal; flex-wrap: wrap; }
  table.roster .status-until { flex-basis: 100%; font-size: .8rem; }
}
.roster-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: -.4rem 0 1rem; color: var(--ink-3); font-size: .88rem; }
.roster-summary strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------- member record */

.record-head { display: flex; align-items: center; gap: 1rem; margin: .2rem 0 1rem; }
.record-head h1 { margin: 0; }
.record-meta { margin: .15rem 0 .45rem; color: var(--ink-3); font-size: .86rem; }
.record-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px; margin: 0 0 1.2rem; padding: 0;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.stat-row > div { background: var(--surface); padding: .7rem .9rem; }
.stat-row dt { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.stat-row dd { margin: .15rem 0 0; font-weight: 560; font-variant-numeric: tabular-nums; }
.stat-row dd .faint { font-weight: 400; }

.section-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 .8rem; }

/* ------------------------------------------------------------ side panel */

/* The panel is fixed to the right edge; on a wide screen the page is padded
   out of its way so nothing is hidden behind it. The scrim only appears on
   narrow screens, where the panel has to cover the list instead. */
:root { --panel-w: 32rem; }

#panel {
  position: fixed; inset: 0 0 0 auto;
  width: var(--panel-w); max-width: 100%;
  background: var(--bg); border-left: 1px solid var(--line);
  overflow-y: auto; z-index: 30;
  padding: 1.2rem 1.4rem 3rem;
  box-shadow: var(--shadow-lift);
}
#panel .record-head { margin-right: 2rem; }       /* clear of the close button */
#panel h1 { font-size: 1.35rem; }
#panel .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#panel .readout { margin-bottom: 1rem; }

.panel-close {
  position: absolute; top: .8rem; right: .9rem;
  background: none; color: var(--ink-3); border: 0; min-height: 0;
  font-size: 1.5rem; line-height: 1; padding: .15rem .45rem; border-radius: 6px;
}
.panel-close:hover { color: var(--ink); background: var(--surface-2); }

#panel-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.45); }

body.panel-open { padding-right: var(--panel-w); }

/* The row being edited, so the panel and the list stay connected. */
tr.current td { background: var(--accent-soft) !important; }
tr[data-row] td { transition: background-color .12s ease; }

@media (max-width: 900px) {
  /* No room to sit beside the list, so cover it and dim what is behind. */
  :root { --panel-w: 100%; }
  body.panel-open { padding-right: 0; overflow: hidden; }
}
@media (min-width: 901px) {
  /* Nothing to dim when the list is still fully visible. */
  #panel-scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  tr[data-row] td { transition: none; }
}

/* --------------------------------------------------------- squad builder */

/* Rows of related controls, each introduced by a label in its own column. */
.toolbar {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .55rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: .75rem .95rem; margin: 0 0 .8rem; box-shadow: var(--shadow);
}
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem; min-width: 0; }
.toolbar form { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; }
.toolbar-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
@media (max-width: 640px) {
  .toolbar { grid-template-columns: minmax(0, 1fr); }
  .toolbar-label { margin-top: .3rem; }
}

.board { display: grid; gap: 1rem; grid-template-columns: 18.5rem minmax(0, 1fr); margin-top: 1rem; }
.squads { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); align-content: start; }

.bench, .squad, .voice-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: .85rem .95rem; box-shadow: var(--shadow);
}
.bench h2, .squad h2, .voice-panel h2 { margin: 0 0 .15rem; font-size: 1rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.bench .hint, .squad .hint, .voice-panel .hint { margin: 0 0 .65rem; }
.squad.is-live { border-top: 3px solid var(--ok); }
.empty { margin: .4rem 0; }

.chips { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; min-height: 1.6rem; }
.chip {
  display: flex; align-items: center; gap: .5rem;
  padding: .32rem .5rem; border-radius: 7px;
  background: var(--surface-2); border: 1px solid transparent;
}
.chip:hover { border-color: var(--line-strong); }
.chip[draggable="true"] { cursor: grab; }
.chip.dragging { opacity: .4; }
.chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-name .avatar-img, .chip-name .initials { vertical-align: middle; margin-right: .4rem; }
.chip.voice .chip-name .avatar-img, .chip.voice .chip-name .initials { margin-right: .4rem; }
.chip-rank { flex: 0 0 auto; color: var(--ink-3); }
.chip-actions { display: flex; gap: .1rem; flex: 0 0 auto; }
.chip-actions form { display: inline; }
.chip.leader { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.star { color: var(--accent); }

button.icon {
  background: none; color: var(--ink-3); padding: 0 .35rem; min-height: 1.6rem;
  font-size: .95rem; line-height: 1.4; border-radius: 5px; border: 0;
}
button.icon:hover { background: var(--line); color: var(--ink); }

/* Drop targets only light up while something is actually over them. */
.droppable.over { outline: 2px dashed var(--accent); outline-offset: 2px; }

.add { display: flex; gap: .35rem; }
.add select { flex: 1; min-width: 0; }

.badge.live { background: var(--ok-soft); color: var(--ok); font-weight: 600; padding: .05em .5em; }
.badge.draft { background: var(--surface-2); color: var(--ink-3); font-weight: 600; padding: .05em .5em; border: 1px solid var(--line); }

@media (max-width: 860px) {
  .board { grid-template-columns: minmax(0, 1fr); }   /* see .ops-layout */
  .bench { position: static; }
}

/* ----------------------------------------------------- voice and ops */

.sidebar { display: flex; flex-direction: column; gap: 1rem; align-self: start; position: sticky; top: 4.4rem; }
.bench { position: static; }

/* The two sidebar lists scroll inside their own boxes, so a long bench does
   not stretch the page. Short enough that both fit on screen at once. */
.sidebar .chips {
  max-height: min(22rem, 34vh); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding-right: .15rem; margin-bottom: .2rem;
}
.sidebar .chips > .chip { flex-shrink: 0; }
.list-search { width: 100%; min-height: 2.1rem; padding: .3rem .55rem; font-size: .88rem; margin: 0 0 .5rem; }
.sidebar [data-no-match] { margin: .2rem 0; }

/* A member in voice. Green dot rather than a word, since the list is long
   and the channel name is the more useful thing to read. */
.dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); margin-right: .4rem; flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.chip.voice .chip-name { display: flex; align-items: center; min-width: 0; }
.chip.unavailable { opacity: .5; }
.chip.unavailable .dot { background: var(--ink-3); box-shadow: none; }

.ops { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .8rem 0; }
.squad-ops { display: flex; align-items: center; gap: .7rem; margin-top: .55rem; }

/* What the bot has been asked to do, and what came back. */
.activity { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.activity li { font-size: .86rem; padding: .35rem .6rem; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.activity li.pending { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.activity li.failed { border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.activity li.failed .muted { color: var(--bad); }
.activity:empty { display: none; }

@media (max-width: 860px) {
  .sidebar { position: static; }
  .sidebar .chips { max-height: 20rem; }
}

/* ------------------------------------------------------------- requests */

.subtabs { display: flex; flex-wrap: wrap; gap: .2rem; margin: 1rem 0; border-bottom: 1px solid var(--line); }
.subtabs a { color: var(--ink-2); padding: .45rem .7rem; font-weight: 540; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs a:hover { color: var(--ink); text-decoration: none; }
.subtabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.subtabs .count-pill { margin-left: .3rem; vertical-align: 1px; }
.count-pill.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* Two or three views of the same list, one of them on. */
.segmented {
  display: inline-flex; gap: .15rem; padding: .2rem; margin: 0 0 1rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
}
.segmented a { color: var(--ink-2); font-size: .88rem; font-weight: 540; padding: .3rem .75rem; border-radius: 6px; }
.segmented a:hover { color: var(--ink); text-decoration: none; }
.segmented a.on { color: var(--ink); background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.segmented .num { color: var(--ink-3); margin-left: .2rem; }

.requests { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); }
.request { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.request.pending { border-top: 3px solid var(--accent); }
.request.approved { border-top: 3px solid var(--ok); }
.request.denied, .request.withdrawn { border-top: 3px solid var(--line-strong); }
.request header { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.request-who { flex: 1; min-width: 0; }
.request header h2 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.request-meta { display: block; color: var(--ink-3); font-size: .82rem; overflow-wrap: anywhere; }
.request header .badge.kind { align-self: flex-start; }
.badge.kind { background: var(--surface-2); color: var(--ink-2); font-weight: 600; padding: .05em .5em; border: 1px solid var(--line); }
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; margin: 0 0 .6rem; }
.ask-arrow { color: var(--ink-3); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: .4rem 0 .7rem; font-size: .9rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.request blockquote {
  margin: .5rem 0 .8rem; padding: .55rem .8rem; border-left: 3px solid var(--line-strong);
  background: var(--surface-2); border-radius: 0 7px 7px 0; white-space: pre-wrap;
}
.decide { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; }
.decide details { flex: 1 1 12rem; }
.decide summary { cursor: pointer; color: var(--bad); padding: .45rem 0; }
.decide details form { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }
.decide > a { align-self: center; }
.verdict { margin: .3rem 0 .2rem; }

/* Seven tabs, a name and a sign-out link do not fit across a phone. Let the
   bar wrap and keep the tabs on a row of their own. */
@media (max-width: 760px) {
  body > header { flex-wrap: wrap; gap: .45rem .8rem; position: static; }
  body > header nav { flex-wrap: wrap; gap: .45rem .9rem; flex: 1 1 100%; justify-content: space-between; }
  .who { border-left: 0; padding-left: 0; }
  .who-name .muted { display: none; }
  .tabs { margin-right: 0; flex-wrap: wrap; gap: .15rem; flex: 1 1 100%; }
  .tabs a { padding: .32rem .5rem; }
  input[type=search] { min-width: 100%; }
  .filters > * { flex: 1 1 auto; }
}

/* ----------------------------------------------------------- operations */

.stats { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: .4rem 0 1rem; color: var(--ink-3); font-size: .9rem; }
.stats strong { color: var(--ink); font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; margin-right: .15rem; }
.ops-layout { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.ops-layout h2 { margin-top: 0; }
.op-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.op-list details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .8rem; box-shadow: var(--shadow); }
.op-list summary { cursor: pointer; display: flex; flex-direction: column; gap: .1rem; list-style: none; }
.op-list summary::-webkit-details-marker { display: none; }
.op-list summary .op-name { font-weight: 580; }
.op-list summary .op-name::before { content: "▸ "; color: var(--ink-3); }
.op-list details[open] summary .op-name::before { content: "▾ "; }
.op-list summary .muted { color: var(--ink-3); }
table.attendees { margin-top: .5rem; background: none; }
table.attendees td { padding: .3rem .4rem; }
table.attendees tbody tr:hover td { background: none; }

/* The top three, set apart by weight rather than medals. */
table.leaderboard td.place { color: var(--ink-3); width: 1%; }
table.leaderboard tr.podium td.place { color: var(--accent); font-weight: 650; }
.arrival { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-3); }
.arrival::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--line-strong); }
.arrival.on-time { color: var(--ink-2); }
.arrival.on-time::before { background: var(--ok); }
.recent-ops { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.recent-ops li { display: flex; flex-direction: column; }

@media (max-width: 860px) {
  /* minmax(0, ...) rather than 1fr: a bare 1fr column is at least as wide as
     its widest table, which pushes the page sideways instead of letting the
     table scroll inside its own box. */
  .ops-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ audit log */

table.audit td { vertical-align: top; }
table.audit .when { font-variant-numeric: tabular-nums; }
table.audit .field-name {
  font-size: .78rem; color: var(--ink-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 0 .35rem; margin-left: .2rem; white-space: nowrap;
}
table.audit .change { overflow-wrap: anywhere; }
table.audit .change .before { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 50%, transparent); }
table.audit .change .after { font-weight: 540; }
.chip-filter { margin: -.3rem 0 .8rem; }
.pager { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; }
.history { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.history li { display: flex; flex-direction: column; padding-left: .8rem; border-left: 2px solid var(--line); }
.history li .muted { color: var(--ink-3); }

/* -------------------------------------------------------------- reports */

label.inline { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); }
label.inline input[type=number] { width: 5.5rem; }
.namelist { line-height: 1.9; }

/* ------------------------------------------------------ squad templates */

.templates { margin-top: 2.2rem; }
.template-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.template-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .65rem .85rem; box-shadow: var(--shadow);
}
.template-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.template-actions form { display: flex; align-items: center; gap: .6rem; }

/* ------------------------------------------------------------- settings */

.settings-form fieldset { border: 1px solid var(--line); border-radius: var(--radius-lg); margin: 1rem 0; padding: .5rem 1.1rem .9rem; background: var(--surface); box-shadow: var(--shadow); }
.settings-form legend { font-weight: 650; padding: 0 .4rem; }
.setting { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin-bottom: .35rem; }
.setting-head label { font-weight: 560; }
.setting input.wide { width: 100%; max-width: 32rem; }
.setting.has-error input, .setting.has-error select { border-color: var(--bad); }
.setting .hint { margin-top: .3rem; }
label.switch { display: inline-flex; align-items: center; gap: .45rem; }
.config-history, .access-changes, .warnings { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.config-history li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .8rem; }
.config-history li > div { display: flex; flex-direction: column; }
.access-changes li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.badge.lose { background: var(--bad-soft); color: var(--bad); padding: .05em .5em; font-weight: 600; }
.badge.gain { background: var(--ok-soft); color: var(--ok); padding: .05em .5em; font-weight: 600; }
.warnings li { padding: .5rem .75rem; border-radius: 7px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }

/* -------------------------------------------------------------- mapping */

table.mapping input, table.mapping select { width: 100%; min-width: 7rem; }
table.mapping input.narrow { min-width: 3.5rem; width: 4.5rem; }
table.mapping td { vertical-align: middle; padding: .3rem .4rem; }
table.mapping tbody tr:hover td { background: none; }
tr.row-error td { background: var(--bad-soft) !important; }
.mapping-changes { list-style: none; margin: .6rem 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.mapping-changes li { padding: .6rem .8rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-left-width: 3px; }
.mapping-changes li.added { border-left-color: var(--ok); }
.mapping-changes li.removed { border-left-color: var(--bad); }
.mapping-changes li.moved, .mapping-changes li.changed { border-left-color: var(--warn); }
.warnings.plain li { background: var(--surface); border-color: var(--line); }
.notice.danger { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-soft); }
.notice.danger ul { margin: .4rem 0 .6rem; }

/* --------------------------------------------------- running operation */

.muster-ops form.muster { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.muster-ops select { max-width: 100%; }
details.purge { margin: 1.5rem 0; }
details.purge summary { cursor: pointer; color: var(--bad); font-size: .9rem; }
details.purge form { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }

form.clear-records { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .6rem 0; }
form.clear-records label.check { display: flex; gap: .45rem; align-items: flex-start; font-size: .9rem; flex: 1 1 22rem; }
form.clear-records label.check input { margin-top: .3rem; }

details.discharge { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); box-shadow: none; }
details.discharge summary { cursor: pointer; font-weight: 600; color: var(--bad); }
details.discharge form { margin-top: .8rem; }
details.discharge label.check { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; }
details.discharge label.check input { margin-top: .3rem; flex: 0 0 auto; }

.op-now h2 { margin: 0 0 .3rem; }
.op-now.is-live { border-top: 3px solid var(--ok); }
.op-now-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.op-now-head h2 { margin: 0; overflow-wrap: anywhere; }
.op-now .stats { margin: .8rem 0 .4rem; }
.op-now .field { max-width: 26rem; }
.op-where { border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .85rem .75rem; margin: 0 0 1rem; min-width: 0; }
.op-where legend { font-weight: 560; font-size: .88rem; padding: 0 .3rem; }
.op-where label.check { display: flex; align-items: flex-start; gap: .45rem; padding: .22rem 0; cursor: pointer; }
.op-where label.check input { margin-top: .25rem; flex: 0 0 auto; }
.op-where label.check > span { min-width: 0; overflow-wrap: anywhere; }
.op-where label.check .small { display: block; }
.op-where label.off { opacity: .45; }
.op-where-group { margin: .5rem 0 .2rem; }
.op-where-category { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.op-where-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 1rem; }
.op-where-channels label.check .small { display: inline; }
.op-where-any { border-top: 1px solid var(--line); margin-top: .45rem; padding-top: .5rem !important; }
.op-now .field input, .op-now .field select { width: 100%; }
.op-now .actions { margin-top: .2rem; }
.op-rules { margin: .9rem 0 0; padding-left: 1.1rem; }
.op-rules li + li { margin-top: .2rem; }
.op-people { margin: .4rem 0 .2rem; }
.op-people summary { cursor: pointer; color: var(--accent); }
.op-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.op-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.discard summary { cursor: pointer; color: var(--ink-3); font-size: .85rem; }
.discard form { margin-top: .5rem; }
.op-last { margin: 1rem 0 0; }

/* ---------------------------------------------------------- sign in */

.signin { min-height: calc(100vh - 12rem); display: grid; place-items: center; }
.signin .card { width: 100%; max-width: 26rem; padding: 1.8rem 1.8rem 1.5rem; text-align: left; }
.signin .brand-mark { width: 2.8rem; height: 2.8rem; font-size: 1.05rem; border-radius: 10px; margin-bottom: 1rem; }
.signin h1 { font-size: 1.5rem; }
.signin .tagline { color: var(--ink-3); margin: .1rem 0 1rem; }
.signin .button { width: 100%; margin-top: .4rem; min-height: 2.7rem; }
.status-hint { margin: -.5rem 0 1rem; }
.signin .button code { background: transparent; border-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); color: inherit; }

/* ---------------------------------------------------------- branding */

.colour-field { display: inline-flex; align-items: center; gap: .4rem; }
.colour-field input[type=color] { width: 2.35rem; height: 2.35rem; padding: .15rem; cursor: pointer; }
.colour-field .colour-text { width: 7.5rem; font-family: var(--mono); }
.zone-field { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.zone-field input { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.zone-field button { white-space: nowrap; }
.logo-card { display: flex; gap: 1.1rem; align-items: flex-start; }
.logo-preview img, .logo-preview .brand-mark { width: 4.5rem; height: 4.5rem; border-radius: 14px; object-fit: cover; font-size: 1.4rem; }
.logo-body { flex: 1; min-width: 0; }
.logo-body .hint { margin: 0 0 .6rem; }
.logo-upload { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.logo-upload input[type=file] { min-height: 0; padding: .35rem; max-width: 100%; }
@media (max-width: 640px) { .logo-card { flex-direction: column; } }

/* ------------------------------------------------- roster: sort and pick */

/* The roster's heading stays in view while the list scrolls. Its card does
   not clip, because a scrolling box would pin the heading to the box rather
   than the page. On a phone the columns fit, so nothing needs to scroll. */
:root { --topbar: 3.5rem; }
@media (max-width: 760px) { :root { --topbar: 0px; } }
.table-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.table-card table { background: none; }
table.roster thead th { position: sticky; top: var(--topbar); z-index: 2; }
table.roster thead th:first-child { border-top-left-radius: var(--radius-lg); }
table.roster thead th:last-child { border-top-right-radius: var(--radius-lg); }
table.roster .who-cell .name { overflow-wrap: anywhere; }

th a.sort { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
th a.sort:hover { color: var(--ink); text-decoration: none; }
th a.sort.on { color: var(--ink); }
th.num a.sort { justify-content: flex-end; }
.sort-arrow { font-size: .8rem; min-width: .6rem; }

td.pick, th.pick { width: 1%; padding-right: 0; }
td.pick input, th.pick input { width: 1rem; height: 1rem; min-height: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
tr.picked td { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }

/* Under the table, and pinned to the bottom of the window while the table
   is longer than it, so it is there whichever row you are looking at. */
.bulk-bar {
  position: sticky; bottom: .8rem; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  margin-top: .8rem; padding: .6rem .8rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.bulk-bar.has-selection { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-lift); }
.bulk-count { color: var(--ink-3); font-size: .88rem; }
.bulk-bar.has-selection .bulk-count { color: var(--ink); font-weight: 600; }
.bulk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.bulk-date { width: 11rem; }
@media (max-width: 640px) {
  td.pick, th.pick { padding-left: .5rem; }
  .bulk-controls > select, .bulk-controls > input { flex: 1 1 9rem; }
}
@media (max-width: 640px) {
  main { padding-left: .8rem; padding-right: .8rem; }
  /* Rank and wing already sit under the name; the picture would push the
     table wider than the screen. */
  table.roster .who-line > .avatar-img, table.roster .who-line > .initials { display: none; }
}

/* ---------------------------------------------------- qualifications */

.qual-chip {
  --qual: var(--accent);
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .08rem .55rem; border-radius: 6px; font-size: .84rem; font-weight: 560;
  color: var(--ink); white-space: nowrap;
  background: color-mix(in srgb, var(--qual) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--qual) 40%, var(--line));
}
.qual-chip::before {
  content: ""; width: .45rem; height: .45rem; transform: rotate(45deg);
  background: var(--qual); flex: 0 0 auto; border-radius: 1px;
}
.quals { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); align-items: start; }
.qual {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: .9rem 1rem; box-shadow: var(--shadow); scroll-margin-top: 5rem;
}
.qual header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.qual header h2 { margin: 0; font-size: 1rem; }
.qual header .qual-chip { font-size: .95rem; padding: .15rem .65rem; }
.qual-desc { color: var(--ink-2); margin: .2rem 0 .5rem; }
.holders { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.holders li { display: flex; align-items: center; gap: .45rem; min-height: 1.8rem; }
.holders li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-form { display: inline; margin: 0; }
.award-form { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.award-form select { flex: 1 1 10rem; min-width: 0; }
.award-form input[name=note] { flex: 1 1 8rem; min-width: 0; }
.qual-edit { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.qual-edit summary, .new-qual summary { cursor: pointer; color: var(--ink-2); font-weight: 540; }
.new-qual[open] summary { margin-bottom: .6rem; }
.qual-form { margin-top: .5rem; }
.delete-qual { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; }
/* A member's qualifications: what they hold, and what can be added. */
.member-quals {
  margin: 0 0 1.2rem; padding: .8rem .9rem .85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.quals-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; }
.quals-head .section-label { margin: 0; }
.quals-notice {
  margin: 0 0 .65rem; padding: .35rem .6rem; border-radius: 7px; font-size: .84rem;
  background: var(--ok-soft); color: var(--ok);
}
.quals-notice::before { content: "✓ "; font-weight: 700; }
.quals-empty { margin: 0; font-size: .86rem; color: var(--ink-3); }
.quals-all { margin-top: .7rem; }

.quals-held { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.qual-chip.qual-held { padding: .18rem .3rem .18rem .6rem; gap: .4rem; font-size: .86rem; border-radius: 999px; }
.qual-held:not(:has(.qual-remove)) { padding-right: .65rem; }
.qual-remove {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; min-height: 0;
  padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none;
  color: var(--ink-3); font-size: 1rem; line-height: 1; cursor: pointer; opacity: .6;
  transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
.qual-held:hover .qual-remove, .qual-remove:focus-visible { opacity: 1; }
.qual-remove:hover { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }

/* Adding: each qualification is a pill to tap. The Award button only
   appears once one is picked, and counts them. */
.award-picker { margin-top: .8rem; padding-top: .75rem; border-top: 1px dashed var(--line); counter-reset: picked; }
.quals-sub { margin: 0 0 .45rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.qual-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.qual-option {
  --qual: var(--accent);
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
  padding: .18rem .7rem .18rem .25rem; border-radius: 999px; cursor: pointer; user-select: none;
  border: 1px dashed color-mix(in srgb, var(--qual) 50%, var(--line-strong));
  color: var(--ink-2); font-size: .86rem; font-weight: 540;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.qual-option:hover { color: var(--ink); background: color-mix(in srgb, var(--qual) 8%, transparent); }
.qual-check { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.qual-tick {
  display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: color-mix(in srgb, var(--qual) 15%, var(--surface)); color: var(--qual);
  font-size: .82rem; font-weight: 700; line-height: 1;
  transition: background-color .12s ease, color .12s ease, transform .15s ease;
}
.qual-tick::before { content: "+"; }
.qual-option:has(.qual-check:checked) {
  border-style: solid; border-color: color-mix(in srgb, var(--qual) 65%, transparent);
  background: color-mix(in srgb, var(--qual) 15%, var(--surface)); color: var(--ink);
  counter-increment: picked;
}
.qual-option:has(.qual-check:checked) .qual-tick { background: var(--qual); color: var(--surface); transform: scale(1.05); }
.qual-option:has(.qual-check:checked) .qual-tick::before { content: "✓"; }
.qual-option:has(.qual-check:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.award-confirm { display: flex; gap: .45rem; margin-top: .7rem; }
.award-confirm input { flex: 1; min-width: 0; }
.award-button { white-space: nowrap; }
.award-picker:has(.qual-check:checked) .award-button::after { content: " " counter(picked); }
/* Browsers that can tell nothing is picked hide the button until something is. */
.award-picker:not(:has(.qual-check:checked)) .award-confirm { display: none; }
@media (prefers-reduced-motion: reduce) {
  .qual-option, .qual-tick, .qual-remove { transition: none; }
}
.ok-text { color: var(--ok); }

/* ------------------------------------------------------------ points */

.points-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .5rem 0; }
.points-input { width: 5.5rem; }
.live-points { margin: .6rem 0 .2rem; }
.op-points { max-width: 26rem; }
.pts { color: var(--ink); font-weight: 600; }
.points-chip {
  display: inline-flex; align-items: center; padding: .02rem .45rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  table.roster .col-points { display: none; }
}
@media (min-width: 641px) {
  table.roster .stacked-roles .points-chip { display: none; }
}

.attendee-editor { margin: .4rem 0 0; }
.attendee-scroll { box-shadow: none; margin: .4rem 0; }
.attendee-scroll table.attendees { margin: 0; }
table.attendees th { padding: .35rem .5rem; }
.points-input.compact { width: 4.2rem; min-height: 1.9rem; padding: .2rem .4rem; text-align: right; }
.points-input.custom { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
tr.opted-out td { color: var(--ink-3); }
tr.opted-out .points-input { text-decoration: line-through; }
.attendee-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .5rem 0 .2rem; }
.award-inline { display: inline-flex; flex-wrap: wrap; gap: .4rem; }

/* ------------------------------------------------------- permissions */

.tier-key { margin: 0 0 1rem; }
table.permissions td:first-child strong { display: block; font-weight: 560; }
table.permissions td:last-child { width: 1%; }
table.permissions select { min-width: 8rem; }

/* ------------------------------------------------ promotion requirements */

.checklist {
  margin: .2rem 0 .8rem; padding: .6rem .75rem; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
}
.checklist-head { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 .35rem; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.checklist-score { color: var(--warn); font-variant-numeric: tabular-nums; }
.checklist-score.all { color: var(--ok); }
.checklist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.checklist li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; font-size: .9rem; }
.checklist .mark { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: .68rem; font-weight: 700; }
.checklist li.met .mark { background: var(--ok-soft); color: var(--ok); }
.checklist li.unmet .mark { background: var(--bad-soft); color: var(--bad); }
.checklist li.unknown .mark { background: var(--surface); color: var(--ink-3); border: 1px solid var(--line); }
.checklist .detail { color: var(--ink-3); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.checklist-notes { margin: .45rem 0 0; font-size: .86rem; color: var(--ink-2); white-space: pre-wrap; }
.reason-label { margin: .2rem 0 .3rem; }

table.requirements td { vertical-align: top; }
table.requirements input.narrow { width: 5.5rem; }
table.requirements textarea { min-width: 14rem; }
.req-quals { display: flex; flex-direction: column; gap: .2rem; min-width: 10rem; }
.req-quals label { display: flex; gap: .35rem; align-items: center; font-size: .88rem; }
.req-quals input { min-height: 0; width: auto; }

/* --------------------------------------------------------------- home */

.home-hero { display: flex; align-items: center; gap: 1.1rem; margin: .2rem 0 1.3rem; }
.home-hero h1 { margin: .05rem 0 .45rem; font-size: 1.85rem; }
.home-hero-text { min-width: 0; }
.eyebrow { margin: 0; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.home-quals { margin-top: .55rem; }
.avatar-img.xl, .initials.xl { width: 4.2rem; height: 4.2rem; font-size: 1.35rem; }

.home-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.home-main, .home-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.home-grid .card { margin: 0; }
.home-grid h2 { margin: 0 0 .7rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.card-head h2 { margin: 0; }
@media (max-width: 860px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

.tiles { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem;
  border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink);
}
.tile:hover { text-decoration: none; border-color: var(--line-strong); color: var(--ink); }
.tile-value { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; color: var(--ink-3); }
.tile-label { font-size: .8rem; color: var(--ink-2); }
.tile.has { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tile.has .tile-value { color: var(--accent); }
.tile.warn .tile-value { color: var(--warn); }
.live-line { margin: .8rem 0 0; }
.attention .section-label { margin: 1rem 0 .4rem; }
.people-line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.people-line li { display: flex; align-items: center; gap: .45rem; }
.people-line li .faint { margin-left: auto; }

.home-stats { margin-bottom: .9rem; }
.chart-caption { margin: 0 0 .35rem; font-size: .8rem; color: var(--ink-3); }

.my-requests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.my-requests li { display: flex; flex-direction: column; gap: .1rem; padding-left: .7rem; border-left: 3px solid var(--line-strong); }
.my-requests li.pending { border-left-color: var(--accent); }
.my-requests li.approved { border-left-color: var(--ok); }
.my-requests li.denied { border-left-color: var(--bad); }
.my-request-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.my-requests blockquote { margin: .3rem 0 0; padding: .35rem .6rem; background: var(--surface-2); border-radius: 6px; }
.my-requests form { margin: .15rem 0 0; }
.request-status { font-size: .76rem; font-weight: 600; white-space: nowrap; color: var(--ink-3); }
.request-status.pending { color: var(--accent); }
.request-status.approved { color: var(--ok); }
.request-status.denied { color: var(--bad); }

.stack-form { display: flex; flex-direction: column; gap: .7rem; }
.stack-form .field { margin: 0; }
.stack-form .field input, .stack-form .field select, .stack-form .field textarea { width: 100%; }
.stack-form .hint { margin: 0; }
.stack-form .checklist { margin: 0; }
.stack-form .actions { margin: 0; }

/* --------------------------------------------------------- column chart */

.colchart { position: relative; margin: 0; }
.colchart-frame {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 9.5rem auto; column-gap: .5rem; padding-top: .55rem;
}
.colchart-y { position: relative; grid-row: 1; min-width: 2.2rem; }
/* The widest label sets the column's width; the rest are placed on the scale. */
.colchart-y::before { content: attr(data-widest); visibility: hidden; font-size: .72rem; white-space: nowrap; }
.colchart-y span {
  position: absolute; right: 0; transform: translateY(50%); white-space: nowrap;
  font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1;
}
.colchart-plot { position: relative; grid-row: 1; grid-column: 2; }
.colchart-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.colchart-grid[style="bottom: 0.0%"], .colchart-grid[style="bottom: 0%"] { background: var(--line-strong); }
.colchart-cols { position: absolute; inset: 0; display: flex; align-items: stretch; }
.colchart-col {
  flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center;
  cursor: default; border-radius: 4px; outline-offset: 0;
}
.colchart-col.on { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.colchart-bar {
  display: block; width: min(24px, 62%); background: var(--chart);
  border-radius: 4px 4px 0 0; min-height: 0; transition: filter .12s ease;
}
.colchart-col.on .colchart-bar { filter: brightness(1.12); }
.colchart-bar.zero { height: 0 !important; }
.colchart-x { grid-row: 2; grid-column: 2; display: flex; padding-top: .35rem; }
.colchart-x span {
  flex: 1 1 0; text-align: center; font-size: .72rem; color: var(--ink-3);
  white-space: nowrap; overflow: visible;
}
.colchart-tip {
  position: absolute; top: -.4rem; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; gap: .05rem; padding: .4rem .55rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  box-shadow: var(--shadow-lift); font-size: .8rem; white-space: nowrap;
}
.colchart-tip strong { font-size: .95rem; }
.chart-table { margin-top: .5rem; }
.chart-table summary { cursor: pointer; font-size: .8rem; color: var(--ink-3); }
.chart-table .scroll { margin-top: .4rem; box-shadow: none; }
.chart-table td, .chart-table th { padding: .35rem .6rem; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .colchart-bar { transition: none; } }

.dev-as { margin-top: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.dev-as-row { display: flex; gap: .4rem; }
.dev-as-row select { flex: 1; min-width: 0; }

/* ------------------------------------------------- planned operations */

.upcoming h2 { margin-top: 1.8rem; }
.plan-new summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.plan-new[open] summary { margin-bottom: .8rem; }
.planned-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.planned {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: .85rem 1rem; box-shadow: var(--shadow); scroll-margin-top: 5rem;
}
.planned-list.compact .planned { box-shadow: none; background: var(--surface-2); padding: .7rem .8rem; grid-template-columns: 3.9rem minmax(0, 1fr); }
.planned.answered-yes { border-left: 3px solid var(--ok); }
.planned.answered-maybe { border-left: 3px solid var(--warn); }
.planned-when {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); padding: .45rem .25rem;
  align-self: start;
}
.planned-day { font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.planned-date { font-size: 1.05rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.planned-time { font-size: .76rem; font-weight: 560; color: var(--ink-2); white-space: nowrap; }
.planned-body { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.planned-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.planned-head h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.planned-head .faint { white-space: nowrap; }
.planned-meta { margin: 0; font-size: .84rem; color: var(--ink-2); }
.planned-desc { margin: .1rem 0; white-space: pre-wrap; font-size: .92rem; }
.planned-going { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.face-stack { display: inline-flex; }
.face-stack > * { margin-left: -.35rem; box-shadow: 0 0 0 2px var(--surface); }
.face-stack > *:first-child { margin-left: 0; }
.planned-list.compact .face-stack > * { box-shadow: 0 0 0 2px var(--surface-2); }
.planned-who summary { cursor: pointer; color: var(--ink-3); }
.planned-who p { margin: .3rem 0 0; }
.rsvp { display: flex; flex-wrap: wrap; gap: .35rem; }
.rsvp-btn {
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong);
  box-shadow: none; min-height: 2rem; padding: .25rem .75rem; font-size: .86rem; font-weight: 560;
}
.rsvp-btn:hover { background: var(--surface-2); color: var(--ink); }
.rsvp-btn.on.rsvp-yes { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.rsvp-btn.on.rsvp-maybe { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.rsvp-btn.on.rsvp-no { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.rsvp-btn.on::before { content: "✓ "; }
.planned-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .2rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.planned-actions form { margin: 0; }
.planned-edit { flex-basis: 100%; order: 3; }
.planned-edit summary { cursor: pointer; color: var(--ink-2); font-weight: 540; display: inline; }
.planned-edit[open] { padding-top: .5rem; }
.danger-link { color: var(--bad) !important; }
.schedule-form .op-where, .schedule-form .announce { border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .85rem .75rem; margin: 0; min-width: 0; }
.announce legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.announce-options { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.announce-options select { max-width: 100%; }
.field-label { display: block; font-weight: 560; font-size: .9rem; margin-bottom: .3rem; }
.ping-choices { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .4rem; }
.ran { margin-top: 1rem; }
.ran summary { cursor: pointer; color: var(--ink-2); font-weight: 540; }
.ran-list { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.ran-list li { display: flex; flex-direction: column; gap: .05rem; }
@media (max-width: 640px) {
  .planned, .planned-list.compact .planned { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .planned-when { align-self: stretch; }
  .planned-when { flex-direction: row; gap: .5rem; justify-content: flex-start; padding: .3rem .6rem; }
}

/* A tick box or radio beside its words. Pages with their own layout for
   these (Where, discharge, clearing records) are more specific and win. */
label.check { display: flex; align-items: flex-start; gap: .45rem; cursor: pointer; }
label.check input[type=checkbox], label.check input[type=radio] {
  min-height: 0; width: auto; padding: 0; margin: .25rem 0 0; flex: 0 0 auto; accent-color: var(--accent);
}
.schedule-form .form-grid { row-gap: .85rem; }
.stack-form .field > label { display: block; margin-bottom: .3rem; }