/* ==========================================================================
   VoloRota — Design Tokens & Base Styles
   Accent: deep teal (#0f766e). No external resources — system font stack only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Accent */
  --accent:        #0f766e;   /* teal-700 */
  --accent-light:  #ccfbf1;   /* teal-100 */
  --accent-dark:   #0d5e58;   /* teal-800 */
  --accent-muted:  #5eead4;   /* teal-300 */

  /* Surfaces */
  --surface-bg:    #f8fafc;   /* slate-50 */
  --surface-card:  #ffffff;
  --surface-raised:#f1f5f9;   /* slate-100 */
  --surface-border:#e2e8f0;   /* slate-200 */
  --surface-line:  #f1f5f9;   /* table row borders */

  /* Text */
  --text-primary:  #0f172a;   /* slate-900 */
  --text-secondary:#475569;   /* slate-600 */
  --text-muted:    #94a3b8;   /* slate-400 */
  --text-inverse:  #ffffff;

  /* Nav */
  --nav-bg:        #0f172a;   /* slate-900 */
  --nav-text:      #cbd5e1;   /* slate-300 */
  --nav-hover:     #f1f5f9;   /* slate-100 */
  --nav-active:    var(--accent-muted);

  /* State: confirmed */
  --state-confirmed-bg:     #dcfce7;  /* green-100 */
  --state-confirmed-border: #16a34a;  /* green-600 */
  --state-confirmed-text:   #14532d;  /* green-900 */
  --state-confirmed-symbol: #16a34a;

  /* State: pending */
  --state-pending-bg:     #fef9c3;   /* yellow-100 */
  --state-pending-border: #ca8a04;   /* yellow-600 */
  --state-pending-text:   #713f12;   /* yellow-900 */
  --state-pending-symbol: #ca8a04;

  /* State: declined */
  --state-declined-bg:     #fee2e2;  /* red-100 */
  --state-declined-border: #dc2626;  /* red-600 */
  --state-declined-text:   #7f1d1d;  /* red-900 */
  --state-declined-symbol: #dc2626;

  /* State: unfilled */
  --state-unfilled-bg:     #f8fafc;  /* slate-50 */
  --state-unfilled-border: #94a3b8;  /* slate-400 */
  --state-unfilled-text:   #475569;  /* slate-600 */
  --state-unfilled-symbol: #94a3b8;

  /* State: none */
  --state-none-bg:     #f1f5f9;
  --state-none-text:   #cbd5e1;

  /* Flash / banners */
  --flash-success-bg:  #f0fdf4;
  --flash-success-text:#166534;
  --flash-success-border:#bbf7d0;
  --flash-error-bg:    #fff1f2;
  --flash-error-text:  #881337;
  --flash-error-border:#fecdd3;
  --flash-info-bg:     #eff6ff;
  --flash-info-text:   #1e40af;
  --flash-info-border: #bfdbfe;
  --flash-warn-bg:     #fffbeb;
  --flash-warn-text:   #92400e;
  --flash-warn-border: #fde68a;

  /* Type scale */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */

  /* Spacing rhythm (4px grid) */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:  0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
  --shadow-md:  0 4px 6px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.05);
  --shadow-lg:  0 10px 15px rgba(15,23,42,.08), 0 4px 6px rgba(15,23,42,.04);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  margin: 0;
  background: var(--surface-bg);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Top navigation
   -------------------------------------------------------------------------- */
.top-nav {
  background: var(--nav-bg);
  color: var(--nav-text);
  padding: 0 var(--sp-6);
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), var(--shadow-sm);
}

/* Wordmark */
.top-nav .brand {
  color: var(--text-inverse);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: var(--sp-8);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  position: relative;
}

/* Teal accent glyph before the wordmark */
.top-nav .brand::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent-muted);
  border-radius: 50%;
  flex-shrink: 0;
}

.top-nav a {
  color: var(--nav-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.top-nav a:hover {
  color: var(--nav-hover);
  border-bottom-color: var(--accent-muted);
  text-decoration: none;
}

/* Logout form inside nav */
.top-nav form {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.top-nav .btn-logout {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--nav-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: background .15s;
}
.top-nav .btn-logout:hover {
  background: rgba(255,255,255,.16);
}

/* --------------------------------------------------------------------------
   Main content area
   -------------------------------------------------------------------------- */
main {
  max-width: 900px;
  margin: var(--sp-8) auto;
  padding: 0 var(--sp-6);
}

/* Page title */
h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--sp-6);
  line-height: 1.25;
}

h2 {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--sp-8) 0 var(--sp-4);
  line-height: 1.3;
}

h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--sp-6) 0 var(--sp-3);
}

p {
  margin: 0 0 var(--sp-4);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--surface-border);
  margin-bottom: var(--sp-6);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--surface-border);
  font-size: var(--text-sm);
}

/* Override: don't clip — needed for matrix sticky columns */
table:not(.matrix-table) {
  overflow: hidden;
}

th {
  background: var(--surface-raised);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--surface-border);
}

td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--surface-line);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: #f8fafc;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .01em;
}

input[type=text],
input[type=email],
input[type=file],
input[type=date],
input[type=time],
input[type=number],
input[type=password],
select,
textarea {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: inherit;
  width: 100%;
  max-width: 420px;
  background: var(--surface-card);
  color: var(--text-primary);
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.5;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=number]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

input::placeholder {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--accent);
  color: var(--text-inverse);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .08s;
  white-space: nowrap;
  line-height: 1.5;
}

button:hover, .btn:hover {
  background: var(--accent-dark);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
}

button:active, .btn:active {
  transform: translateY(1px);
}

.btn-sm {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
}

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--surface-border);
}
.btn-secondary:hover {
  background: var(--surface-raised);
}

.btn-danger {
  background: #dc2626;
  border-color: transparent;
}
.btn-danger:hover {
  background: #b91c1c;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-individual { background: #dbeafe; color: #1e40af; }
.badge-crew       { background: #fae8ff; color: #6b21a8; }
.badge-pending    {
  background: var(--state-pending-bg);
  color: var(--state-pending-text);
}
.badge-confirmed  {
  background: var(--state-confirmed-bg);
  color: var(--state-confirmed-text);
}
.badge-declined   {
  background: var(--state-declined-bg);
  color: var(--state-declined-text);
}

/* --------------------------------------------------------------------------
   Flash / banner messages
   -------------------------------------------------------------------------- */
.flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}

.flash-success {
  background: var(--flash-success-bg);
  color: var(--flash-success-text);
  border-color: var(--flash-success-border);
}

.flash-error {
  background: var(--flash-error-bg);
  color: var(--flash-error-text);
  border-color: var(--flash-error-border);
}

.flash-info {
  background: var(--flash-info-bg);
  color: var(--flash-info-text);
  border-color: var(--flash-info-border);
}

.flash-warn {
  background: var(--flash-warn-bg);
  color: var(--flash-warn-text);
  border-color: var(--flash-warn-border);
}

/* --------------------------------------------------------------------------
   Import summary / error list
   -------------------------------------------------------------------------- */
.import-summary { margin-top: var(--sp-4); }
.import-summary h3 { margin-bottom: var(--sp-2); }
.error-list { list-style: none; padding: 0; }
.error-list li {
  background: var(--flash-warn-bg);
  border: 1px solid var(--flash-warn-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--flash-warn-text);
}

/* --------------------------------------------------------------------------
   Matrix view — ISC-16, ISC-17, ISC-18
   HARD CONTRACT: do not change overflow/position/border-collapse semantics
   -------------------------------------------------------------------------- */

/* Outer wrapper: enables horizontal scroll without breaking sticky column */
.matrix-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--surface-border);
  margin-top: var(--sp-4);
}

/* Override main's max-width constraint for the matrix page so wide grids breathe */
.matrix-page main,
main:has(.matrix-wrapper) {
  max-width: 100%;
  padding: 0 var(--sp-6);
}

.matrix-table {
  /* separate, NOT collapse: position:sticky on th/td silently fails with
     border-collapse:collapse in Chromium — labels scroll away with the table */
  border-collapse: separate;
  border-spacing: 0;
  /* the generic `table { overflow: hidden }` (border-radius clipping) makes the
     table the sticky containing block, so labels pin to the table instead of the
     scrolling wrapper — must stay visible here */
  overflow: visible;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: var(--surface-card);
  width: max-content;
  min-width: 100%;
}

/* ---- First column: role labels, sticky ---- */
.matrix-row-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface-raised);
  border-right: 1px solid var(--surface-border);
  min-width: 160px;
  max-width: 200px;
  padding: var(--sp-2) var(--sp-4);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* Corner header cell (top-left) */
.matrix-corner {
  z-index: 3;
  background: #e8edf5;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.row-team {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.row-role {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 1px;
}
.row-pos {
  font-weight: 400;
  color: var(--text-secondary);
}

/* ---- Column headers ---- */
.matrix-col-header {
  background: #e8edf5;
  border-bottom: 1px solid var(--surface-border);
  border-right: 1px solid var(--surface-border);
  text-align: center;
  padding: var(--sp-3) var(--sp-3);
  min-width: 108px;
  vertical-align: top;
}

.matrix-col-weekday {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.matrix-col-date {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.matrix-col-name {
  display: block;
  font-size: var(--text-xs);
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  margin-top: 2px;
  font-weight: 500;
}

/* ---- Data cells ---- */
.matrix-cell {
  padding: var(--sp-2) var(--sp-2);
  text-align: center;
  border-bottom: 1px solid var(--surface-line);
  border-right: 1px solid var(--surface-line);
  vertical-align: middle;
  min-width: 96px;
  transition: filter .1s;
}

.matrix-cell:hover {
  filter: brightness(0.96);
}

.matrix-cell .cell-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: var(--sp-1);
}
.matrix-cell .cell-link:hover {
  text-decoration: none;
}

.cell-symbol {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}
.cell-name {
  font-size: var(--text-xs);
  line-height: 1.3;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- State: confirmed --- */
.cell-confirmed {
  background: var(--state-confirmed-bg);
  border-left: 3px solid var(--state-confirmed-border);
  color: var(--state-confirmed-text);
}
.cell-confirmed .cell-symbol { color: var(--state-confirmed-symbol); }

/* --- State: pending --- */
.cell-pending {
  background: var(--state-pending-bg);
  border-left: 3px solid var(--state-pending-border);
  color: var(--state-pending-text);
}
.cell-pending .cell-symbol { color: var(--state-pending-symbol); }

/* --- State: declined --- */
.cell-declined {
  background: var(--state-declined-bg);
  border-left: 3px solid var(--state-declined-border);
  color: var(--state-declined-text);
}
.cell-declined .cell-symbol { color: var(--state-declined-symbol); }

/* --- State: unfilled --- */
.cell-unfilled {
  background: var(--state-unfilled-bg);
  border-left: 3px solid var(--state-unfilled-border);
  color: var(--state-unfilled-text);
}
.cell-unfilled .cell-symbol { color: var(--state-unfilled-symbol); }

/* --- State: none (service lacks this slot) --- */
.cell-none {
  background: var(--state-none-bg);
  color: var(--state-none-text);
  border-left: 3px solid transparent;
}

/* --- Blocked-out conflict indicator --- */
.cell-blocked {
  outline: 2px dashed #f59e0b;
  outline-offset: -2px;
}
.cell-conflict {
  font-size: var(--text-xs);
  color: #d97706;
  margin-left: 2px;
  vertical-align: middle;
}

/* ---- Paging ---- */
.matrix-paging {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2);
  flex-wrap: wrap;
}
.matrix-paging-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* ---- Legend ---- */
.matrix-legend {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  margin-bottom: var(--sp-3);
  align-items: center;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.legend-item.cell-confirmed {
  background: var(--state-confirmed-bg);
  color: var(--state-confirmed-text);
  border-left: none;
}
.legend-item.cell-pending {
  background: var(--state-pending-bg);
  color: var(--state-pending-text);
  border-left: none;
}
.legend-item.cell-declined {
  background: var(--state-declined-bg);
  color: var(--state-declined-text);
  border-left: none;
}
.legend-item.cell-unfilled {
  background: var(--state-unfilled-bg);
  color: var(--state-unfilled-text);
  border: 1px solid var(--surface-border);
  border-left: none;
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--surface-border);
  padding: var(--sp-4) var(--sp-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-10);
  letter-spacing: .02em;
}
.footer-sep {
  margin: 0 var(--sp-2);
  opacity: .5;
}

/* --------------------------------------------------------------------------
   Login page
   -------------------------------------------------------------------------- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 52px);
  padding: var(--sp-8);
}
.login-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-10);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--surface-border);
  width: 100%;
  max-width: 380px;
}
.login-wordmark {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.login-wordmark .wordmark-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.login-wordmark .wordmark-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.login-wordmark .wordmark-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Dashboard home quick-links
   -------------------------------------------------------------------------- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.dash-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--text-primary);
  transition: box-shadow .15s, border-color .15s, transform .1s;
  display: block;
}
.dash-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}
.dash-card-title {
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--sp-1);
  color: var(--accent);
}
.dash-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Onboarding: setup checklist (ISC-56)
   -------------------------------------------------------------------------- */
.setup-checklist {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.setup-checklist-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 var(--sp-3);
}

.setup-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.setup-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.setup-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid var(--surface-border);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  background: var(--surface-raised);
}

.setup-step-done .setup-step-icon {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.setup-step a {
  color: var(--accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Onboarding: inline hint paragraph (ISC-55, zero-slot notice)
   -------------------------------------------------------------------------- */
.onboarding-hint {
  background: var(--flash-info-bg);
  color: var(--flash-info-text);
  border: 1px solid var(--flash-info-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  margin: var(--sp-4) 0;
  line-height: 1.5;
}

.onboarding-hint a {
  color: var(--flash-info-text);
  font-weight: 700;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Volunteer surface (mobile-first) — tokens only, no override of volLayout inline
   -------------------------------------------------------------------------- */
.vol-surface {
  --vol-accent:       #0f766e;
  --vol-accent-dark:  #0d5e58;
  font-family: var(--font-sans);
}

/* ---- Responsive: compact cells at narrow widths ---- */
@media (max-width: 768px) {
  .matrix-col-header  { min-width: 72px; padding: var(--sp-2) var(--sp-2); }
  .matrix-cell        { min-width: 72px; padding: var(--sp-1) var(--sp-1); }
  .cell-name          { font-size: 0.68rem; max-width: 68px; }
  .matrix-row-label   { min-width: 120px; padding: var(--sp-2) var(--sp-3); }
  .matrix-col-name    { max-width: 70px; }
}