/* ═══════════════════════════════════════════════════════
   ORTBITE Dashboard v3 — Minimal Professional
   Neutral slate palette · single blue accent · airy + crisp.
   Class names preserved from v2 so existing JS keeps working.
═══════════════════════════════════════════════════════ */

:root {
  /* Accent — pulled from the TGL ORTBITE logo navy blue */
  --accent:        #2F4DA3;
  --accent-hover:  #26419A;
  --accent-press:  #1E3588;
  --accent-soft:   #EBF0FA;
  --accent-softer: #F3F6FD;

  /* Ink / neutrals (slate) */
  --ink:         #111722;
  --text:        #2B313B;
  --text-muted:  #69727E;
  --text-faint:  #98A0AB;
  --border:      #E8EAEE;
  --border-soft: #F0F2F4;
  --border-strong:#D9DDE3;

  --surface:   #FFFFFF;
  --surface-2: #F8F9FB;
  --surface-3: #F2F4F7;
  --page:      #F5F6F8;

  /* Semantic (muted, professional) */
  --success:      #0E9F6E;
  --success-soft: #E7F6F0;
  --warning:      #B7791F;
  --warning-soft: #FBF3E4;
  --danger:       #DC4040;
  --danger-soft:  #FCEDED;
  --purple:       #7C5CFC;
  --purple-soft:  #F0EDFE;
  --grey:         #6B7480;
  --grey-soft:    #F0F2F4;

  /* Legacy aliases — keep old component rules pointing at the new palette */
  --clr-primary:        var(--accent);
  --clr-primary-dark:   var(--accent-hover);
  --clr-primary-light:  var(--accent-soft);
  --clr-primary-xlight: var(--accent-softer);
  --clr-secondary:      var(--accent);
  --clr-accent:         var(--accent);
  --clr-accent-light:   var(--accent-soft);
  --clr-sun:            var(--warning);
  --clr-sand:           var(--surface-3);
  --clr-page:           var(--page);
  --clr-surface:        var(--surface);
  --clr-success:        var(--success);
  --clr-success-bg:     var(--success-soft);
  --clr-warning:        var(--warning);
  --clr-warning-bg:     var(--warning-soft);
  --clr-danger:         var(--danger);
  --clr-danger-bg:      var(--danger-soft);
  --clr-purple:         var(--purple);
  --clr-purple-bg:      var(--purple-soft);
  --clr-grey:           var(--grey);
  --clr-grey-bg:        var(--grey-soft);
  --clr-text:           var(--text);
  --clr-text-muted:     var(--text-muted);
  --clr-border:         var(--border-strong);
  --clr-border-light:   var(--border);

  --radius-sm: 7px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-xs: 0 1px 2px rgba(17,23,34,.05);
  --shadow-sm: 0 1px 2px rgba(17,23,34,.04), 0 1px 3px rgba(17,23,34,.06);
  --shadow-md: 0 4px 12px rgba(17,23,34,.07), 0 2px 4px rgba(17,23,34,.04);
  --shadow-lg: 0 12px 32px rgba(17,23,34,.12), 0 4px 8px rgba(17,23,34,.05);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  --sidebar-w: 244px;
  --transition: .16s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--page);
  min-height: 100vh;
  line-height: 1.5;
  letter-spacing: -0.002em;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D6DAE0; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #C2C7CF; background-clip: padding-box; }

h1, h2, h3 { letter-spacing: -0.018em; color: var(--ink); }

/* ════ APP SHELL (director view) ═════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 20px 14px 16px;
}
.sidebar-brand { padding: 6px 10px 18px; }
.brand-mark {
  font-size: 1.18rem; font-weight: 800; color: var(--ink);
  letter-spacing: .04em; display: flex; align-items: center; gap: 8px;
}
.brand-mark::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.brand-tag { font-size: .72rem; color: var(--text-faint); margin-top: 4px; letter-spacing: .02em; padding-left: 1px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; padding-top: 4px; }
.sidebar-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border); }

/* Nav items reuse .tab-btn (only used inside the sidebar now) */
.tab-btn {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border: none; background: none; cursor: pointer;
  font-size: .9rem; font-weight: 500; color: var(--text-muted);
  border-radius: var(--radius-sm); transition: var(--transition);
  text-align: left; text-decoration: none; position: relative;
}
.tab-btn:hover { background: var(--surface-2); color: var(--ink); }
.tab-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tab-btn.active .tab-icon { filter: none; }
.tab-icon { font-size: 1.02rem; width: 20px; text-align: center; flex-shrink: 0; }
.tab-btn span:not(.tab-icon):not(.tab-badge) { flex: 1; }
.sidebar-foot .tab-btn { font-size: .84rem; color: var(--text-muted); padding: 8px 12px; }

.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 19px; padding: 0 6px;
  background: var(--surface-3); color: var(--text-muted);
  border-radius: 10px; font-size: .7rem; font-weight: 600;
}
.tab-btn.active .tab-badge { background: var(--accent); color: #fff; }
.tab-badge:empty { display: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 62px;
}
.topbar-title { font-size: 1.18rem; font-weight: 700; }
.topbar-sub { font-size: .8rem; color: var(--text-muted); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.save-indicator { font-size: .78rem; color: var(--text-faint); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.save-indicator.unsaved { color: var(--warning); }

/* ════ BUTTONS ═══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: var(--transition);
  white-space: nowrap; text-decoration: none; font-family: var(--font); line-height: 1.2;
}
.btn:active { transform: translateY(.5px); }
.btn-primary       { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary       { background: var(--ink); color: #fff; }
.btn-secondary:hover { background: #000; }
.btn-outline       { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn-outline-light       { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); font-weight: 500; }
.btn-outline-light:hover { background: var(--surface-2); }
.btn-ghost       { background: transparent; color: var(--text-muted); border: none; padding: 7px 10px; font-weight: 500; }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-danger  { background: var(--danger);  color: #fff; }
.btn-danger:hover { filter: brightness(.94); }
.btn-success { background: var(--success); color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: .8rem; }
.btn-xs { padding: 4px 8px; font-size: .74rem; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; font-size: .9rem;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition); color: var(--text-muted);
}
.btn-icon:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }

/* ════ CONTENT AREA ══════════════════════════════════════ */
.tab-content { padding: 26px 32px 64px; max-width: 1320px; width: 100%; }
.tab-panel { display: none; animation: fadeIn .22s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.panel-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.filter-select {
  padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: .84rem; color: var(--text); background: var(--surface); cursor: pointer; font-family: var(--font);
  transition: var(--transition);
}
.filter-select:hover { border-color: var(--text-faint); }
.filter-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ════ KPI / SUMMARY CARDS (Overview) ════════════════════ */
.summary-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.summary-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  transition: var(--transition); cursor: pointer; position: relative; overflow: hidden;
}
.summary-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.summary-card::after { display: none; }
.sc-label { font-size: .76rem; font-weight: 600; color: var(--text-muted); letter-spacing: .01em; display: flex; align-items: center; justify-content: space-between; }
.sc-main  { font-size: 1.9rem; font-weight: 800; margin: 10px 0 3px; color: var(--ink); line-height: 1.05; letter-spacing: -0.02em; }
.sc-sub   { font-size: .78rem; color: var(--text-muted); }
.sc-detail {
  font-size: .74rem; color: var(--text-muted); margin-top: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease, padding-top .25s ease;
  border-top: 1px solid transparent;
}
.summary-card:hover .sc-detail { max-height: 60px; opacity: 1; margin-top: 9px; padding-top: 9px; border-top-color: var(--border); }
.sc-positive { color: var(--success) !important; }
.sc-negative { color: var(--danger)  !important; }
.sc-warn     { color: var(--warning) !important; }
/* drop the v2 coloured top-borders for a calmer look */
.card-attendance, .card-collected, .card-spent, .card-pot, .card-balance, .card-budget { border-top: 1px solid var(--border); background: var(--surface); }

/* Overview quick-actions row */
.overview-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.overview-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 4px 0 12px; }

/* ════ TABLES ════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 200px); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .855rem; }
.data-table thead tr { background: var(--surface-2); }
.data-table thead th {
  padding: 11px 16px; text-align: left; font-weight: 600; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10; background: var(--surface-2);
}
.data-table thead th.num { text-align: right; }
.data-table tbody tr { border-bottom: 1px solid var(--border-soft); transition: background var(--transition); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody td { padding: 11px 16px; vertical-align: middle; color: var(--text); }
.data-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tfoot tr { background: var(--surface-2); font-weight: 700; border-top: 1px solid var(--border); }
.data-table tfoot td { padding: 11px 16px; color: var(--ink); }
.data-table tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
.actions-col-wide { width: 110px; text-align: center; white-space: nowrap; }
.empty-row td { text-align: center; padding: 40px 16px; color: var(--text-faint); font-style: normal; }
.editable { padding: 3px 6px; border-radius: 5px; cursor: text; min-width: 50px; transition: var(--transition); }
.editable:hover { background: var(--accent-soft); }
.editable:focus { outline: 2px solid var(--accent); background: #fff; }

/* Status badges — flat, soft */
.status-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .73rem; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.4; }
.status-Confirmed  { background: var(--success-soft); color: var(--success); }
.status-Invited    { background: var(--accent-soft);  color: var(--accent); }
.status-Proposed   { background: var(--warning-soft); color: var(--warning); }
.status-Waitlisted { background: var(--purple-soft);  color: var(--purple); }
.status-Rejected   { background: var(--danger-soft);  color: var(--danger); }
.status-Cancelled  { background: var(--grey-soft);    color: var(--grey); }
/* Unlock-quiz guests: no members row, so no member status — see Code.gs
   _unlockQuizGuests_. Shown in the Emails tab recipient list. */
.status-Guest      { background: var(--accent-soft);  color: var(--accent); }
.status-Accepted   { background: #e7f5ec; color: #1a7c45; }
.status-Declined   { background: var(--danger-soft);  color: var(--danger); }
.status-Test       { background: var(--surface-3);    color: var(--text-muted); }
.status-Expected   { background: var(--accent-soft);  color: var(--accent); }
.status-Booked     { background: var(--warning-soft); color: var(--warning); }
.status-Incurred   { background: var(--success-soft); color: var(--success); }
.status-pot        { background: var(--warning-soft); color: var(--warning); }

/* Role chips */
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: var(--surface-3); color: var(--text); border-radius: 999px; font-size: .73rem; font-weight: 500; }
.role-chip-remove { cursor: pointer; opacity: .5; font-size: .85rem; background: none; border: none; color: inherit; padding: 0; }
.role-chip-remove:hover { opacity: 1; color: var(--danger); }

.bal-positive { color: var(--success); font-weight: 600; }
.bal-negative { color: var(--danger);  font-weight: 600; }
.bal-zero     { color: var(--text-faint); }
.dual-balance { display: flex; flex-direction: column; gap: 1px; }
.dual-balance-a { font-size: .82rem; }
.dual-balance-b { font-size: .73rem; color: var(--text-muted); }
.inline-actions { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }

/* ════ CHASE LOG ═════════════════════════════════════════ */
.chase-indicator { font-size: .73rem; color: var(--warning); white-space: nowrap; }
.chase-indicator.never { color: var(--danger); }
.chase-summary-bar { margin-top: 16px; padding: 12px 16px; background: var(--warning-soft); border-radius: var(--radius); border: 1px solid #F0DFC0; font-size: .84rem; }
.chase-summary-bar strong { color: var(--warning); }

/* ════ PAYMENTS ══════════════════════════════════════════ */
.payments-grid { display: flex; flex-direction: column; gap: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 12px; font-weight: 700; font-size: .98rem; color: var(--ink); }
.section-heading-label { display: flex; align-items: center; gap: 8px; }
.section-heading-total { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.section-note { font-size: .82rem; color: var(--text-muted); padding: 0 0 14px; }

/* ════ FUND TRACKER BAR ══════════════════════════════════ */
.fund-tracker-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 22px; margin-bottom: 24px;
}
.fund-stat { text-align: left; min-width: 120px; }
.fund-stat-label { font-size: .74rem; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.fund-stat-value { font-size: 1.45rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.fund-stat-value-positive { color: var(--success) !important; }
.fund-stat-value-negative { color: var(--danger)  !important; }
.fund-stat-sub  { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
.fund-in  .fund-stat-value { color: var(--success); }
.fund-out .fund-stat-value { color: var(--warning); }
.fund-arrow { font-size: 1.1rem; color: var(--border-strong); flex-shrink: 0; }

/* ════ BUDGET ════════════════════════════════════════════ */
.budget-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; margin-bottom: 26px; }
@media (max-width: 980px) { .budget-layout { grid-template-columns: 1fr; } }
.comparison-header { font-weight: 700; font-size: .98rem; color: var(--ink); margin-bottom: 12px; }
.comparison-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; font-size: .85rem; }
.comparison-table thead tr { background: var(--surface-2); }
.comparison-table th { padding: 11px 14px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); text-align: left; border-bottom: 1px solid var(--border); }
.comparison-table th.num { text-align: right; }
.comparison-table tbody tr { border-bottom: 1px solid var(--border-soft); }
.comparison-table tbody tr:hover { background: var(--surface-2); }
.comparison-table td { padding: 10px 14px; }
.comparison-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.comparison-table tfoot tr { background: var(--surface-2); font-weight: 700; border-top: 1px solid var(--border); }
.comparison-table tfoot td { padding: 11px 14px; }
.comparison-table tfoot td.num { text-align: right; }
.delta-positive { color: var(--danger); font-weight: 600; }
.delta-negative { color: var(--success); font-weight: 600; }
.cap-input { width: 82px; padding: 4px 7px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .8rem; text-align: right; font-family: var(--font); }
.cap-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cap-ok { color: var(--success); font-weight: 600; }
.cap-warning { color: var(--warning); font-weight: 600; }
.cap-over { color: var(--danger); font-weight: 600; }

.budget-health { display: flex; flex-direction: column; gap: 12px; }
.health-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.pot-health-card { background: var(--accent-softer); border-color: var(--accent-soft); }
.health-title { font-size: .73rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; margin-bottom: 7px; }
.health-value { font-size: 1.4rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.health-sub { font-size: .76rem; color: var(--text-muted); margin-top: 4px; }
.health-green .health-value { color: var(--success); }
.health-red   .health-value { color: var(--danger); }
.progress-bar { height: 9px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-bottom: 7px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; }
.progress-fill.progress-members { background: var(--success); }
.progress-label { font-size: .76rem; color: var(--text-muted); }
.budget-bars { margin-top: 12px; }
.budget-bar-row { display: flex; align-items: center; gap: 12px; font-size: .83rem; margin-bottom: 10px; }
.budget-bar-label { width: 130px; text-align: right; color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.budget-bar-track { flex: 1; height: 22px; background: var(--surface-3); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.budget-bar-fill-exp { height: 100%; background: var(--accent-soft); border-radius: var(--radius-sm); position: absolute; }
.budget-bar-fill-act { height: 100%; background: var(--accent); border-radius: var(--radius-sm); position: absolute; }
.budget-bar-amount { width: 82px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .8rem; }

/* ════ GRAPHS ════════════════════════════════════════════ */
.graphs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .graphs-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px)  { .graphs-grid { grid-template-columns: 1fr; } }
.graph-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.graph-card-wide { grid-column: span 2; }
.graph-card-full { grid-column: 1 / -1; }
.graph-card-title { font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.donut-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.graph-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .76rem; color: var(--text-muted); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: .8rem; }
.gbar-label { width: 140px; text-align: right; color: var(--text-muted); font-weight: 500; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbar-track { flex: 1; position: relative; }
.gbar-bg { height: 20px; background: var(--surface-3); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.gbar-fill-a { height: 100%; border-radius: var(--radius-sm); position: absolute; opacity: .35; }
.gbar-fill-b { height: 100%; border-radius: var(--radius-sm); position: absolute; }
.gbar-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.gbar-amount { width: 90px; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .78rem; }
.member-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: .8rem; }
.mbar-name { width: 120px; text-align: right; flex-shrink: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbar-track { flex: 1; height: 18px; background: var(--surface-3); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.mbar-fill-exp { position: absolute; height: 100%; background: var(--accent-soft); border-radius: var(--radius-sm); }
.mbar-fill-rec { position: absolute; height: 100%; background: var(--success); border-radius: var(--radius-sm); }
.mbar-amount { width: 80px; font-size: .76rem; font-variant-numeric: tabular-nums; }
.mbar-label { font-size: .68rem; color: var(--text-muted); white-space: nowrap; }

/* ════ UNLOCK QUIZ ═══════════════════════════════════════ */
.unlock-section-card, .unlock-status-card {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 16px;
}
.unlock-status-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.unlock-status-sub { margin-top: 4px; font-size: .84rem; color: var(--text-muted); }
.unlock-progress-track { margin-top: 10px; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.unlock-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .2s; }
.unlock-golive-row {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border); font-weight: 600; font-size: .9rem; cursor: pointer;
}
.unlock-golive-row input[type=checkbox] { width: 20px; height: 20px; }
.unlock-golive-row.unlock-disabled { color: var(--text-faint); cursor: not-allowed; }
.unlock-golive-note { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
.unlock-section-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.unlock-section-title { font-weight: 700; font-size: .95rem; color: var(--ink); flex: 1; min-width: 0; overflow-wrap: break-word; }
.unlock-section-head .unlock-section-title { margin-bottom: 0; }
.unlock-section-hint { font-weight: 400; font-size: .8rem; color: var(--text-muted); }
.unlock-step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .78rem; font-weight: 700;
  flex-shrink: 0; vertical-align: middle;
}
.unlock-section-move { display: flex; gap: 6px; flex-shrink: 0; }
/* .btn-icon is 30px dashboard-wide; these are new touch controls, so
   they meet the 44px tap-target bar on phones rather than inherit it. */
@media (max-width: 540px) {
  .unlock-section-move .btn-icon { width: 44px; height: 44px; font-size: 1rem; }
}
.unlock-edit-warning { margin-top: 6px; font-size: .78rem; color: var(--warning); }
.unlock-warn-banner {
  background: var(--warning-soft); color: var(--warning); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: .84rem; margin-bottom: 14px;
}
.unlock-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: .73rem; font-weight: 600; white-space: nowrap;
}
.unlock-chip-done { background: var(--success-soft); color: var(--success); }
.unlock-chip-pending { background: var(--surface-3); color: var(--text-muted); }
.unlock-chip-warn { background: var(--warning-soft); color: var(--warning); }
.unlock-chip-exempt { background: var(--surface-3); color: var(--text-muted); }
.unlock-reset-all { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); text-align: right; }
.unlock-warn-banner-info { background: var(--accent-soft); color: var(--accent); }
.unlock-row-exempt { opacity: .65; }
.unlock-exempt-toggle {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: .76rem; font-weight: 500; color: var(--text-muted); cursor: pointer;
}
.unlock-exempt-toggle input[type=checkbox] { width: 16px; height: 16px; }
@media (max-width: 540px) {
  .unlock-exempt-toggle { font-size: .82rem; }
  .unlock-exempt-toggle input[type=checkbox] { width: 20px; height: 20px; }
}

/* Opted-in participants: a member at a non-Confirmed status, or a standalone
   guest. Their code is shown inline because the director sends it by hand. */
.unlock-name-row { display: flex; align-items: center; gap: 8px; }
.unlock-name-row strong { flex: 1; min-width: 0; overflow-wrap: break-word; }
.unlock-name-row .btn-icon { flex-shrink: 0; }
.unlock-guest-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.unlock-chip-guest { background: var(--accent-soft); color: var(--accent); }
.unlock-guest-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--ink); user-select: all;
}
.unlock-add { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.unlock-add > summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent); padding: 6px 0; }
.unlock-add-note { font-size: .78rem; color: var(--text-muted); margin: 6px 0 10px; overflow-wrap: break-word; }
.unlock-add-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.unlock-add-row .form-select, .unlock-add-row .form-textarea { flex: 1 1 200px; min-width: 0; }
.unlock-add-row .btn { flex-shrink: 0; }
@media (max-width: 540px) {
  /* New touch controls, so they meet the 44px bar on phones rather than
     inherit the dashboard-wide 30px .btn-icon / 40px summary defaults. */
  .unlock-add > summary { min-height: 44px; display: flex; align-items: center; font-size: .9rem; }
  .unlock-add-row { flex-direction: column; align-items: stretch; }
  /* flex-basis follows the main axis, so the 200px basis these fields carry
     for the row layout becomes a 200px HEIGHT once the container turns into a
     column — an empty one-line box rendering ~200px tall. Reset to auto so
     they keep their own height on a phone. */
  .unlock-add-row .form-select, .unlock-add-row .form-textarea { flex: 0 0 auto; }
  .unlock-add-row .btn { width: 100%; min-height: 44px; }
  .unlock-name-row .btn-icon { width: 44px; height: 44px; font-size: 1rem; }
}

/* ════ EMAILS — recipient picker ═════════════════════════ */
/* Name / address / group toggle. Three controls never fit one line on a phone,
   and the name was the flex child losing the fight, so below 540px the row
   wraps: name on its own line, address and toggle sharing the next. */
.email-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.email-row-name { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; min-width: 0; }
.email-row-label {
  font-weight: 600; font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-row .email-recipient-input {
  width: 190px; flex-shrink: 0; font-size: .82rem; padding: 6px 9px;
}
.email-group-toggle {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  cursor: pointer; font-size: .74rem; color: var(--text-muted);
}
#mass-email-body { font-size: .85rem; }
@media (max-width: 540px) {
  .email-row { flex-wrap: wrap; row-gap: 8px; }
  .email-row-name { flex: 1 1 100%; }
  .email-row-label { white-space: normal; overflow-wrap: break-word; }
  .email-row .email-recipient-input { width: auto; flex: 1 1 140px; min-width: 0; font-size: 16px; }
  .email-group-toggle { min-height: 44px; font-size: .82rem; }
  .email-group-toggle input[type=checkbox] { width: 20px; height: 20px; }
  /* The compose body is the one field people actually type prose into, and at
     .85rem iOS Safari zooms the whole viewport the moment it's focused. */
  #mass-email-body, #mass-email-subject { font-size: 16px; }
}
/* At 320px an address is wider than any share of the row, so it takes its own
   line rather than scrolling sideways inside a 182px box. */
@media (max-width: 360px) {
  .email-row .email-recipient-input { flex: 1 1 100%; }
  .email-group-toggle { margin-left: auto; }
}

/* ════ ROLES ═════════════════════════════════════════════ */
.roles-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; }
@media (max-width: 760px) { .roles-layout { grid-template-columns: 1fr; } }
.roles-list-heading { font-weight: 700; font-size: .9rem; color: var(--ink); margin-bottom: 12px; }
.roles-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.roles-list-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: .85rem; }
.roles-list-item-name { font-weight: 500; }
.roles-assignment-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 18px; margin-bottom: 12px; }
.rac-name { font-weight: 700; margin-bottom: 9px; color: var(--ink); }
.rac-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.rac-role-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; background: var(--success-soft); color: var(--success); }
.rac-add-btn { padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; background: var(--surface-2); color: var(--text-muted); border: 1px dashed var(--border-strong); cursor: pointer; transition: var(--transition); }
.rac-add-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ════ CATEGORY SUMMARY CHIPS ════════════════════════════ */
.expenses-category-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cat-summary-chip { padding: 11px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: .8rem; min-width: 130px; }
.cat-summary-chip.cap-warn { border-color: #F0DFC0; background: var(--warning-soft); }
.cat-summary-chip.cap-over { border-color: #F3CACA; background: var(--danger-soft); }
.cs-name { font-weight: 600; color: var(--text-muted); font-size: .71rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-expected { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.cs-actual { font-size: .75rem; color: var(--text-muted); }
.cs-cap-bar { height: 4px; background: var(--surface-3); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.cs-cap-fill { height: 100%; border-radius: 2px; background: var(--success); }
.cs-cap-fill.warn { background: var(--warning); }
.cs-cap-fill.over { background: var(--danger); }

/* ════ MODAL ═════════════════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(17,23,34,.40); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
.modal-overlay.hidden { display: none; }
.modal-box { background: var(--surface); border-radius: var(--radius-xl); padding: 28px; max-width: 560px; width: 100%; position: relative; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; animation: modalIn .2s cubic-bezier(.2,.8,.3,1); border: 1px solid var(--border); }
@keyframes modalIn { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-faint); width: 30px; height: 30px; border-radius: var(--radius-sm); transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-title { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin-bottom: 20px; }

/* Forms */
.form-group { margin-bottom: 15px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 15px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 15px; }
.form-label { display: block; font-size: .76rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: .88rem; font-family: var(--font); color: var(--text); background: var(--surface); transition: var(--transition);
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--text-faint); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-textarea { resize: vertical; min-height: 70px; }
/* One-row auto-growing textarea (via App.utils.autoGrow) — never <input
   type=text>. An input scrolls sideways and hides the start of what you
   typed; this wraps and grows instead. */
.form-textarea-auto { resize: none; overflow: hidden; min-height: 40px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.form-check { display: flex; align-items: center; gap: 8px; font-size: .87rem; cursor: pointer; }
.form-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.form-note { font-size: .76rem; color: var(--text-muted); margin-top: 6px; }
.form-section-title { font-weight: 700; font-size: .85rem; color: var(--ink); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Chase log / history */
.chase-log-entry { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 12px; background: var(--warning-soft); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: .8rem; }
.chase-log-date { color: var(--warning); font-weight: 600; white-space: nowrap; }
.chase-log-note { color: var(--text-muted); flex: 1; margin: 0 8px; }
.history-timeline { display: flex; flex-direction: column; gap: 8px; }
.history-item { padding: 10px 13px; border-radius: var(--radius-sm); border-left: 3px solid var(--accent); background: var(--surface-2); }
.history-item.expense-item { border-left-color: var(--warning); background: var(--warning-soft); }
.history-date { font-size: .72rem; color: var(--text-muted); }
.history-ref { font-weight: 600; font-size: .85rem; }
.history-amt { font-size: .85rem; font-weight: 700; float: right; }
.history-stat { font-size: .78rem; display: flex; gap: 16px; margin-top: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.history-stat-item { text-align: center; flex: 1; }
.history-stat-val { font-weight: 800; font-size: 1.1rem; color: var(--ink); display: block; }
.history-stat-label { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }

/* ════ TRIP LOG — split checklist & per-person tally ═════ */
.split-checklist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 12px; max-height: 210px; overflow-y: auto;
  padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2);
}
.split-check { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; user-select: none; }
.split-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.trip-tally { margin-top: 26px; }
.trip-tally-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.trip-tally-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; }
.ttc-name { font-size: .8rem; color: var(--text-muted); }
.ttc-amt { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin-top: 3px; letter-spacing: -0.02em; }

/* ════ TRIP LOG — itemised split editor ═══════════════════ */
.li-row { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px 12px; margin-bottom: 10px; }
.li-row-top { display: grid; grid-template-columns: 1fr 110px 32px; gap: 8px; align-items: center; }
.li-remove { border: none; background: none; color: var(--text-faint); font-size: .95rem; cursor: pointer; width: 28px; height: 28px; border-radius: var(--radius-sm); transition: var(--transition); }
.li-remove:hover { background: var(--surface-3); color: var(--danger); }
.li-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.li-chip, .li-chip-action { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: .78rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; cursor: pointer; transition: var(--transition); }
.li-chip:hover { border-color: var(--accent); }
.li-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.li-chip-action { color: var(--text-muted); border-style: dashed; }
.li-chip-action:hover { color: var(--ink); border-color: var(--text-faint); }
.te-summary-box { margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.te-summary-total { font-size: .85rem; color: var(--ink); }
.te-summary-split { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.te-summary-chip { font-size: .78rem; color: var(--text-muted); }
.te-summary-chip strong { color: var(--ink); }
.li-detail-list { padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.li-detail-row { display: grid; grid-template-columns: 1fr 90px 1fr 100px; gap: 12px; font-size: .82rem; color: var(--text-muted); }
.li-d-desc { color: var(--ink); font-weight: 600; }
.li-d-amt, .li-d-each { text-align: right; }
.li-detail-tr td { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 4px 16px !important; }

/* ════ FUNDING COVERAGE ══════════════════════════════════ */
.funding-verdict {
  margin-top: 14px; padding: 14px 18px; border-radius: var(--radius);
  font-size: .92rem; line-height: 1.55; border: 1px solid var(--border);
}
.funding-verdict strong { font-weight: 700; }
.funding-verdict.short { background: var(--warning-soft); border-color: #F0DFC0; color: #7a5212; }
.funding-verdict.short strong { color: var(--warning); }
.funding-verdict.ok { background: var(--success-soft); border-color: #C7EBD9; color: #0c6b4b; }
.funding-verdict.ok strong { color: var(--success); }

/* ════ WHAT-IF / MISC ════════════════════════════════════ */
.whatif-result { background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: var(--radius); padding: 14px 16px; margin-top: 14px; }
.whatif-row { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; padding: 5px 0; }
.whatif-row span:first-child { color: var(--text-muted); }
.variance-over  { color: var(--danger);  font-weight: 600; }
.variance-under { color: var(--success); font-weight: 600; }
.progress-mini { height: 5px; background: var(--surface-3); border-radius: 3px; margin-top: 5px; overflow: hidden; min-width: 55px; }
.progress-mini-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s ease; }
.progress-mini-full { background: var(--success); }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-mono { font-variant-numeric: tabular-nums; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ════ TOAST ═════════════════════════════════════════════ */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.toast { padding: 11px 18px; border-radius: var(--radius); font-size: .85rem; font-weight: 500; box-shadow: var(--shadow-lg); animation: toastIn .22s ease; max-width: 340px; border: 1px solid rgba(255,255,255,.12); }
@keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.toast-success { background: var(--success); color: #fff; }
.toast-error   { background: var(--danger);  color: #fff; }
.toast-info    { background: var(--ink);     color: #fff; }
.toast-warning { background: var(--warning); color: #fff; }

/* ════ MOBILE DRAWER ═════════════════════════════════════
   The menu button and scrim. Hidden entirely on desktop, where the sidebar
   is always visible; below 820px they are the only way to reach navigation.
   Sized to a 44px tap target — the icon buttons elsewhere in this dashboard
   are ~28px, which is why they feel like they are "missing" on a phone. */
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* The page title is a short known label ("Overview", "Trip Log"), not user
   text — so it truncates rather than wrapping. overflow-wrap:anywhere is the
   right rule for names and descriptions people type, but applied here it
   broke "Overview" into "Overvi / ew" at 320px and pushed the topbar to two
   rows. min-width:0 is what actually lets a flex child shrink far enough for
   the ellipsis to engage. */
.topbar-left .topbar-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-toggle {
  display: none;                       /* shown only in the mobile block below */
  width: 44px; height: 44px;
  flex: 0 0 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; padding: 0;
  touch-action: manipulation;          /* removes the 300ms tap delay */
  -webkit-tap-highlight-color: transparent;
}
.sidebar-toggle:active { background: var(--clr-primary-xlight, rgba(0,0,0,.05)); }

/* Three bars drawn from one element: the middle is the box itself, the outer
   two are its pseudo-elements. Keeps the markup to a single span. */
.sidebar-toggle-bars,
.sidebar-toggle-bars::before,
.sidebar-toggle-bars::after {
  display: block; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.sidebar-toggle-bars { position: relative; }
.sidebar-toggle-bars::before,
.sidebar-toggle-bars::after { content: ''; position: absolute; left: 0; }
.sidebar-toggle-bars::before { top: -6px; }
.sidebar-toggle-bars::after  { top: 6px; }

/* Becomes an X while the drawer is open, so the button reads as "close" too */
.sidebar-toggle[aria-expanded="true"] .sidebar-toggle-bars { background: transparent; }
.sidebar-toggle[aria-expanded="true"] .sidebar-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.sidebar-toggle[aria-expanded="true"] .sidebar-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.sidebar-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 89;
  background: rgba(15, 23, 42, .45);
  opacity: 0; transition: opacity .25s ease;
}
.sidebar-scrim.visible { opacity: 1; }

/* ════ RESPONSIVE ════════════════════════════════════════ */
@media (max-width: 820px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 90; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .tab-content { padding: 20px 18px 56px; }
  .topbar { padding: 0 18px; }

  .sidebar-toggle { display: flex; }
  .sidebar-scrim { display: block; pointer-events: none; }
  .sidebar-scrim.visible { pointer-events: auto; }

  /* Freeze the page behind the drawer so it can't scroll under a thumb */
  body.sidebar-open { overflow: hidden; }

  /* The topbar's buttons (.btn) are unshrinkable (white-space:nowrap), and
     their text is what actually squeezes the page title — .topbar-title
     already ellipsizes, so it's the one thing quietly absorbing all of the
     topbar-right buttons' width instead of them absorbing it themselves.
     Going icon-only on mobile for every labelled topbar-right button (not
     just Publish Update — Log out was the same fixed-width text button and
     still ate the room the first pass freed up) gives the title back that
     space. */
  .topbar-right .btn .btn-label { display: none; }
  .topbar-right .btn { padding-left: 10px; padding-right: 10px; }
}

/* On the narrowest phones the topbar is tight, so the save indicator gives up
   a little size. It is deliberately NOT hidden: its text is set in JS to
   '● Saved' / '● Unsaved' / '⚠ Save failed' as one string, so any trick that
   hides the label also hides the failure warning — the one state that must
   always be visible. Shrinking is safe; hiding is not. */
@media (max-width: 400px) {
  .save-indicator { font-size: .7rem; }
  .topbar { gap: 8px; }
}

/* ════ PRINT ═════════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .btn, .modal-overlay, #toast-container, .tab-panel:not(.active), .panel-actions, .overview-tools { display: none !important; }
  body { background: #fff; }
  .app-main { display: block; }
  .tab-content { padding: 0; max-width: none; }
  .table-wrap, .summary-card, .graph-card, .health-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ════ ITINERARY TIMELINE ════════════════════════════════ */
.itin-day { margin-bottom: 22px; }
.itin-day-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 2px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.itin-day-label { font-size: .95rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.itin-day-items { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.itin-empty { color: var(--text-faint); font-size: .85rem; padding: 4px 2px 8px; font-style: italic; }

.itin-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow-xs); transition: var(--transition);
  min-height: 44px;
}
.itin-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.itin-item-clickable { cursor: pointer; }
.itin-item-clickable:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-sm); }
.itin-card-hint { font-size: .75rem; opacity: .7; margin-left: 2px; }
.itin-time {
  flex: 0 0 auto; min-width: 52px;
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: .9rem; color: var(--accent);
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 4px 8px; text-align: center; line-height: 1.3;
}
.itin-body { flex: 1 1 auto; min-width: 0; }
.itin-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* One row for the title, one for status chips — replaces the old itin-head
   free-for-all that wrapped title + up to 5 badges/buttons together. */
.itin-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.itin-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.itin-meta-row:empty { display: none; }
.itin-title { font-weight: 600; color: var(--ink); font-size: .92rem; overflow-wrap: break-word; }
.itin-notes { color: var(--text-muted); font-size: .82rem; margin-top: 3px; overflow-wrap: break-word; word-break: break-word; }
.itin-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.itin-chevron {
  flex: 0 0 auto; align-self: center; font-size: 1.3rem; color: var(--text-faint);
  line-height: 1;
}

.itin-vis {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 999px; line-height: 1.4;
}
.itin-vis-public  { background: var(--accent-soft); color: var(--accent); }
.itin-vis-private { background: #FBECEC; color: #C0392B; }

/* ── Itinerary suggestions (Epernay's tracked changes) ────────── */
.itin-toggle { display: flex; gap: 6px; margin-bottom: 16px; }
.itin-toggle-btn {
  padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: .82rem; font-weight: 700; cursor: pointer;
}
.itin-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.itin-item-edited  { background: #FFFBEA; }
.itin-item-removed { background: #FCEEEE; opacity: .8; }
.itin-item-added   { background: #EEFBF3; }
.itin-diff-old { color: #C0392B; text-decoration: line-through; opacity: .75; }
.itin-diff-new { color: #0E7D45; font-weight: 700; }
.itin-sugg-badge {
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; margin-left: 2px; line-height: 1.4;
}
.itin-sugg-edit { background: #FFF3D6; color: #9A6700; }
.itin-sugg-del  { background: #FBE2E2; color: #C0392B; }
.itin-sugg-add  { background: #DFF7E9; color: #0E7D45; }

/* ── Vote-to-reveal game (director-side) ────────────────────────── */
.itin-vote-chip {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px; line-height: 1.4;
  background: #EAE3FB; color: #6B3FD9;
}
.itin-vote-chip-done { background: #DFF7E9; color: #0E7D45; }
.itin-vote-chip-closed { background: #FBE2E2; color: #C0392B; }
.itin-vote-chip-locked { background: #FFE9D6; color: #B5570A; }
.itin-vote-deadline { font-size: .72rem; color: var(--text-faint, #98A0AB); margin-left: 2px; }
.itin-vote-reset {
  border: none; background: none; cursor: pointer; color: var(--text-faint);
  font-size: .82rem; padding: 0 2px; vertical-align: middle;
}
.itin-vote-reset:hover { color: var(--accent); }
.itin-vote-lock-active { color: #B5570A; }
.agenda-vote-controls { display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.agenda-vote-status { font-size: .8rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.agenda-vote-status.agenda-vote-live { color: #C0392B; }
.agenda-vote-controls .form-select { width: auto; min-width: 140px; }

/* At phone widths the day header's three pieces (label, per-day reveal-date
   lock, + Add) no longer fit one row, and the timeline card's time badge sits
   above the title instead of squeezed beside it. */
@media (max-width: 560px) {
  .itin-day-head { flex-wrap: wrap; row-gap: 8px; }
  .itin-day-label { flex: 1 1 100%; }
  .itin-day-reveal { margin-left: 0; margin-right: 0; }
  .itin-day-reveal-input { padding: 9px 8px; font-size: 1rem; min-height: 44px; }
  .itin-day-head .btn { min-height: 44px; }

  .itin-item { flex-wrap: wrap; }
  .itin-time { order: -1; flex: 0 1 100%; align-self: flex-start; margin-bottom: 4px; }
  .itin-chevron { display: none; }
}

/* ── History tab ──────────────────────────────────── */
.history-log { display: flex; flex-direction: column; gap: 0; }
.history-entry {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.history-entry:last-child { border-bottom: none; }
.history-entry-icon { font-size: 1.1rem; flex: 0 0 auto; margin-top: 1px; }
.history-entry-body { flex: 1; min-width: 0; }
.history-entry-detail { font-size: .88rem; color: var(--ink); font-weight: 500; }
.history-entry-time { font-size: .76rem; color: var(--text-muted); margin-top: 2px; }

/* ── Notification bell + panel ───────────────────── */
.notif-badge {
  position: absolute; top: 0; right: 0;
  background: var(--danger, #DC4040); color: #fff;
  font-size: .6rem; font-weight: 800; line-height: 1;
  min-width: 14px; height: 14px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 300px; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: var(--radius-lg, 10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 200;
  overflow: hidden;
}
.notif-items { max-height: 320px; overflow-y: auto; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.notif-item:hover { background: var(--surface-2, #f6f8fb); }
.notif-item:last-child { border-bottom: none; }
.notif-icon { font-size: 1rem; flex: 0 0 auto; margin-top: 1px; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: .84rem; color: var(--ink); font-weight: 500; }
.notif-time { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 18px 16px; font-size: .84rem; color: var(--text-muted); text-align: center; }
.notif-foot { padding: 10px 14px; border-top: 1px solid var(--border); text-align: right; }

/* ── Overdue badge ───────────────────────────────── */
.overdue-badge {
  display: inline-block; font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  background: #DC4040; color: #fff;
  padding: 1px 6px; border-radius: 4px; margin-left: 5px;
  vertical-align: middle;
}

/* ── Attendee: itinerary suggestions (tracked changes) ───────── */
.ac-itin-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
.ac-itin-toggle-btn {
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--border, #e5e9f0);
  background: var(--surface, #fff); color: var(--text-muted, #7a8899); font-size: .82rem; font-weight: 700; cursor: pointer;
}
.ac-itin-toggle-btn.active { background: var(--accent, #1E6F8E); border-color: var(--accent, #1E6F8E); color: #fff; }
.ac-itin-collab-note { font-size: .78rem; color: var(--text-muted, #7a8899); margin: 0 0 14px; line-height: 1.4; }
.ac-itin-edited  { background: #FFFBEA; }
.ac-itin-removed { background: #FCEEEE; opacity: .8; }
.ac-itin-added   { background: #EEFBF3; }
.ac-diff-old { color: #C0392B; text-decoration: line-through; opacity: .75; }
.ac-diff-new { color: #0E7D45; font-weight: 700; }
.ac-itin-sugg-badge {
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle;
}
.ac-itin-sugg-edit { background: #FFF3D6; color: #9A6700; }
.ac-itin-sugg-del  { background: #FBE2E2; color: #C0392B; }
.ac-itin-sugg-add  { background: #DFF7E9; color: #0E7D45; }
.ac-itin-sugg-dot  { color: #C58F00; font-size: .7rem; margin-left: 5px; }
.ac-itin-row-actions { display: flex; gap: 14px; margin-top: 7px; }
.ac-itin-act {
  background: none; border: none; padding: 0; font-size: .76rem; font-weight: 700;
  color: var(--accent, #1E6F8E); cursor: pointer; text-decoration: underline;
}
.ac-itin-act-danger { color: #C0392B; }
.ac-itin-day-add {
  display: block; margin: 8px 14px 12px; font-size: .78rem; font-weight: 700;
  color: var(--accent, #1E6F8E); background: none; border: 1.5px dashed var(--border-strong, #c7ced9);
  border-radius: 8px; padding: 8px; width: calc(100% - 28px); cursor: pointer;
}

/* ── Attendee: essentials ─────────────────────────── */
.ac-essentials { padding: 0; }
.ac-ess-row { display: flex; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border, #e5e9f0); align-items: flex-start; }
.ac-ess-row:last-child { border-bottom: none; }
.ac-ess-label { font-weight: 600; font-size: .84rem; min-width: 150px; flex: 0 0 auto; color: var(--ink, #111); }
.ac-ess-packing { align-items: flex-start; }
.ac-pack-list { margin: 0; padding-left: 18px; font-size: .84rem; color: var(--ink, #111); }
.ac-pack-list li { margin-bottom: 3px; }

/* ── Attendee: itinerary ──────────────────────────── */
.ac-itin { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.ac-itin-day { background: var(--surface-2, #f6f8fb); border: 1px solid var(--border, #e5e9f0); border-radius: 10px; overflow: hidden; }
.ac-itin-day-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #7a8899); padding: 8px 14px 6px; background: var(--surface-3, #eff1f5); border-bottom: 1px solid var(--border, #e5e9f0); }
.ac-itin-day-locked-note { font-size: .82rem; color: var(--text-muted, #7a8899); font-style: italic; padding: 12px 14px; }
.ac-itin-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border, #e5e9f0); }
.ac-itin-item:last-child { border-bottom: none; }
.ac-itin-time { font-size: .78rem; font-weight: 700; color: var(--accent, #1E6F8E); min-width: 44px; flex: 0 0 auto; margin-top: 2px; }
.ac-itin-icon { font-size: 1.1rem; flex: 0 0 auto; margin-top: 1px; }
.ac-itin-body { flex: 1; min-width: 0; }
.ac-itin-title { font-weight: 600; font-size: .9rem; color: var(--ink, #111); }
.ac-itin-notes { font-size: .81rem; color: var(--text-muted, #7a8899); margin-top: 3px; line-height: 1.45; }
.ac-itin-item-expandable { cursor: pointer; }
.ac-itin-item-expandable:hover .ac-itin-title { color: var(--accent, #2F4DA3); }
.ac-itin-expand-hint { font-size: .74rem; font-weight: 600; color: var(--accent, #2F4DA3); margin-left: 4px; }
.ac-itin-details { margin-top: 8px; padding: 10px 12px; background: var(--surface-3, #eff1f5); border-radius: 8px; }
.ac-itin-detail-row { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; padding: 3px 0; }
.ac-itin-detail-label { color: var(--text-muted, #7a8899); font-weight: 600; flex: 0 0 auto; }
.ac-itin-detail-value { color: var(--ink, #111); text-align: right; }
.ac-itin-detail-plain { color: var(--ink, #111); }

/* ── Vote-to-reveal game (flagged events) ──────────────────────── */
.ac-itin-item-redacted { opacity: .82; }
.ac-itin-locked-note { font-style: italic; color: var(--text-muted, #7a8899); font-weight: 500; }
.ac-vote-widget { margin-top: 10px; }
.ac-vote-rule {
  font-size: .84rem; font-weight: 600; line-height: 1.5; color: var(--accent, #2F4DA3);
  background: var(--accent-soft, #EBF0FA); border: 1px solid var(--accent, #2F4DA3);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
}
.ac-vote-status { font-size: .82rem; font-weight: 600; margin-bottom: 8px; }
.ac-vote-status-pending { color: #9A6700; }
.ac-vote-status-valid { color: #0E7D45; }
.ac-vote-status-incorrect { color: #C0392B; margin-bottom: 6px; }
.ac-vote-options { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.ac-vote-option-btn {
  padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--accent, #1E6F8E);
  background: var(--surface, #fff); color: var(--accent, #1E6F8E); font-size: .82rem; font-weight: 700; cursor: pointer;
}
.ac-vote-option-btn:hover { background: var(--accent, #1E6F8E); color: #fff; }
.ac-vote-option-selected { background: var(--accent, #1E6F8E); color: #fff; }
.ac-vote-text { display: flex; gap: 8px; margin-bottom: 10px; }
.ac-vote-text-input { flex: 1; }
.ac-vote-text-submit { flex: 0 0 auto; }
.ac-vote-progress { margin-top: 4px; }
.ac-vote-summary { font-size: .76rem; color: var(--text-muted, #7a8899); margin-bottom: 5px; font-weight: 600; }
.ac-vote-voters { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.ac-vote-voter { font-size: .74rem; color: var(--text-faint, #9aa5b3); }
.ac-vote-voter-done { color: #0E7D45; font-weight: 600; }
.ac-vote-status-closed { color: #C0392B; }
.ac-vote-deadline-note { font-size: .76rem; color: var(--text-faint, #98A0AB); margin-bottom: 10px; }
.ac-vote-reveal-toggle {
  display: block; margin-top: 10px; border: none; background: none; cursor: pointer;
  color: var(--accent, #1E6F8E); font-size: .78rem; font-weight: 700; padding: 0;
}
.ac-vote-choices { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.ac-vote-choice-row { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; padding: 3px 0; border-bottom: 1px dashed var(--border, #e5e9f0); }
.ac-vote-choice-name { color: var(--ink, #111); font-weight: 600; }
.ac-vote-choice-value { color: var(--text-muted, #7a8899); text-align: right; }
.ac-vote-choice-none { color: var(--text-faint, #98A0AB); font-style: italic; }

/* ── Attendee: day quiz (step-by-step guess/vote wizard) ──────── */
.ac-quiz-teaser { padding: 12px 14px; }
.ac-quiz-start-btn {
  display: block; width: 100%; margin-top: 8px; padding: 10px; border: none; border-radius: 8px;
  background: var(--accent, #1E6F8E); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.ac-quiz-deadline { font-size: .76rem; color: var(--text-faint, #98A0AB); margin-top: 4px; }
.ac-quiz-wizard { max-width: 480px; margin: 0 auto; }
.ac-quiz-exit {
  background: none; border: none; padding: 0; margin-bottom: 16px; font-size: .82rem; font-weight: 700;
  color: var(--accent, #1E6F8E); cursor: pointer; text-decoration: underline;
}
.ac-quiz-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.ac-quiz-dot {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; flex: 0 0 auto;
  background: var(--surface-3, #eff1f5); color: var(--text-faint, #98A0AB); border: 1.5px solid var(--border, #e5e9f0);
}
.ac-quiz-dot-active { background: var(--accent, #1E6F8E); color: #fff; border-color: var(--accent, #1E6F8E); }
.ac-quiz-dot-done { background: #DFF7E9; color: #0E7D45; border-color: #0E7D45; }
.ac-quiz-card {
  background: var(--surface-2, #f6f8fb); border: 1px solid var(--border, #e5e9f0); border-radius: 10px;
  padding: 16px; margin-bottom: 14px;
}
.ac-quiz-mixed-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted, #7a8899); margin-bottom: 8px;
}
.ac-quiz-prompt { font-weight: 700; font-size: .96rem; color: var(--ink, #111); margin-bottom: 10px; }
.ac-quiz-numeric-row { display: flex; gap: 8px; }
.ac-quiz-numeric-input { flex: 1; }
.ac-quiz-guess-btn {
  flex: 0 0 auto; border: none; border-radius: 8px; padding: 0 18px; background: var(--accent, #1E6F8E);
  color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.ac-quiz-guess-result { font-size: .86rem; color: var(--text-muted, #7a8899); margin-bottom: 4px; }
.ac-quiz-answer-reveal { font-size: .96rem; color: #0E7D45; font-weight: 700; }
.ac-quiz-answer-pending { font-size: .9rem; color: var(--text-muted, #7a8899); font-weight: 600; }
.ac-quiz-answer-wrong { font-size: .9rem; color: #B3261E; font-weight: 700; margin-bottom: 8px; }
/* Marks a question as fun-guess vs must-be-right-test vs real-decision so
   attendees know whether their answer is being scored, gating them, or
   actually used to plan the trip. */
.ac-quiz-tag {
  display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; white-space: nowrap;
}
.ac-quiz-tag-guess  { background: #FFF1D6; color: #8A5A00; }
.ac-quiz-tag-decide { background: #E4ECFB; color: #2F4DA3; }
.ac-quiz-tag-test   { background: #FDE2E1; color: #B3261E; }
.ac-quiz-guess-btn:disabled { background: var(--border-strong, #c7ced9); cursor: not-allowed; }
.ac-vote-option-btn:disabled { opacity: .55; cursor: not-allowed; }
/* Inline busy indicator for quiz submits — Apps Script round trips are slow
   enough that the wizard read as frozen without it. */
.ac-spinner {
  display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 5px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: ac-spin .7s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.ac-quiz-continue {
  border: none; border-radius: 8px; padding: 9px 20px; background: var(--accent, #1E6F8E);
  color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.ac-quiz-continue:disabled { background: var(--border-strong, #c7ced9); cursor: not-allowed; }

/* ── Receipt manager ─────────────────────────────── */
.rcpt-btn { position: relative; }
.rcpt-count {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent, #1E6F8E); color: #fff;
  font-size: .58rem; font-weight: 800; line-height: 1;
  min-width: 14px; height: 14px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
}
.rcpt-has { color: var(--accent, #1E6F8E); }
.rcpt-grid { display: flex; flex-wrap: wrap; gap: 12px; min-height: 60px; }
.rcpt-empty { color: var(--text-muted); font-size: .85rem; padding: 10px 0; }
.rcpt-thumb {
  position: relative; width: 100px; height: 100px;
  border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
}
.rcpt-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcpt-file {
  font-size: .75rem; text-align: center; padding: 8px;
  color: var(--accent); word-break: break-word; text-decoration: none;
}
.rcpt-file:hover { text-decoration: underline; }
.rcpt-del {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,.55); color: #fff; border: none;
  border-radius: 50%; width: 18px; height: 18px; font-size: .7rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
}
.rcpt-del:hover { background: var(--danger, #DC4040); }

/* ════ BRANDING / LOGOS ══════════════════════════════════ */
.sidebar-logo-img {
  display: block;
  max-width: 130px;
  height: auto;
  margin: 0 auto 10px;
}
.dir-lock-logo {
  display: block;
  height: 72px;
  width: auto;
  margin: 0 auto 18px;
}

/* Main public hero — TGL acrostic logo */
.lp-hero-logo {
  display: block;
  height: 224px;
  width: auto;
  margin: 0 auto 36px;
  filter: drop-shadow(0 2px 8px rgba(47,77,163,.08));
}

/* ORTBITE August 2026 logo — cropped from the transparent slide PNG.
   Exact content bounding box in the native 1280×720 canvas:
   x=219–409, y=257–470 (190×213px). Image scaled to 910px wide (0.711×).
   Content at scale: x=156–291, y=183–334. Box adds 20px padding each side. */
.ortbite-aug-logo {
  display: block;
  width: 175px;
  height: 192px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.ortbite-aug-logo img {
  position: absolute;
  width: 910px;
  height: auto;
  left: -136px;
  top: -163px;
}

/* Attendee page — logo band that sits outside .wrap so it never shifts */
.att-logo-band { text-align: center; padding: 28px 0 4px; }
/* ════ SPLIT — BALANCES & SETTLE UP ══════════════════════
   Written mobile-first: the base rules target a phone, and the min-width
   block below adds desktop. Deliberately no <table> anywhere — cards reflow,
   tables force horizontal scrolling on a 390px screen. */

.split-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 16px;
}
.split-section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-bottom: 12px;
}
.split-section-title { font-size: .95rem; font-weight: 800; color: var(--ink); }
.split-section-sub   { font-size: .78rem; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }

/* ── Balances ── */
.split-bal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.split-bal {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;                      /* lets long names ellipsis instead of overflowing */
  min-height: 60px;                  /* comfortably over the 44px tap minimum */
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.split-bal:active { transform: scale(.985); }
.split-bal.up    { border-left-color: var(--success, #16a34a); }
.split-bal.down  { border-left-color: var(--danger, #c0392b); }
.split-bal.level { opacity: .72; }
.split-bal-name {
  font-size: .82rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.split-bal-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.split-bal-amt   { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.split-bal.up   .split-bal-amt { color: var(--success, #16a34a); }
.split-bal.down .split-bal-amt { color: var(--danger, #c0392b); }

/* ── Settle up ── */
.split-transfers { display: flex; flex-direction: column; gap: 8px; }
.split-transfer {
  display: grid;
  grid-template-columns: 1fr auto;   /* stacks on a phone; one row on desktop */
  grid-template-areas: "who amt" "btn btn";
  gap: 8px 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.split-transfer-who { grid-area: who; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .85rem; }
.stf-from, .stf-to { min-width: 0; overflow-wrap: anywhere; font-weight: 700; color: var(--ink); }
.stf-arrow { color: var(--text-faint); flex: 0 0 auto; }
.split-transfer-amt { grid-area: amt; font-size: 1rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.split-transfer-btn { grid-area: btn; width: 100%; min-height: 44px; }

.split-alldone {
  padding: 14px; text-align: center;
  font-size: .88rem; font-weight: 600; color: var(--success, #16a34a);
  background: var(--page); border-radius: var(--radius-sm);
}

/* ── Recorded payments ── */
.split-done { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.split-done-head { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; }
.split-done-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "who amt del" "meta meta meta";
  gap: 2px 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft, var(--border));
  font-size: .82rem;
}
.sdr-who  { grid-area: who; min-width: 0; overflow-wrap: anywhere; }
.sdr-amt  { grid-area: amt; font-weight: 700; white-space: nowrap; }
.sdr-meta { grid-area: meta; font-size: .74rem; color: var(--text-muted); }
.split-done-row .btn-icon { grid-area: del; min-width: 44px; min-height: 44px; }

/* ── Warnings ── */
.split-warn {
  background: #fff8e6; border: 1px solid #f0c36d;
  border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 16px;
}
.split-warn-head { font-size: .85rem; font-weight: 800; color: #8a5a00; margin-bottom: 6px; }
.split-warn-list { margin: 0; padding-left: 18px; font-size: .8rem; color: #6b4a08; }
.split-warn-list li { margin-bottom: 4px; overflow-wrap: anywhere; }
.split-warn-fix {
  background: none; border: 0; padding: 2px 6px; margin-left: 2px;
  color: var(--accent); font-weight: 700; font-size: .78rem;
  cursor: pointer; text-decoration: underline;
}

/* ── Empty state (designed, not an afterthought — see SPLIT-SPEC P1) ── */
.split-empty {
  text-align: center; padding: 28px 18px; margin-bottom: 16px;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.split-empty-icon  { font-size: 1.8rem; margin-bottom: 8px; }
.split-empty-title { font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.split-empty-note  { font-size: .82rem; color: var(--text-muted); max-width: 42ch; margin: 0 auto; }

/* ── Person detail modal ── */
.split-person-top { padding: 14px; border-radius: var(--radius-lg); background: var(--page); margin-bottom: 14px; text-align: center; }
.split-person-top.up   { background: #eaf7ee; }
.split-person-top.down { background: #fdecea; }
.spt-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.spt-amt   { font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.spt-sub   { font-size: .78rem; color: var(--text-muted); overflow-wrap: anywhere; }

.split-person-rows { display: flex; flex-direction: column; }
.spr-head, .spr-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.spr-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.spr-head span:not(:first-child), .spr-num { text-align: right; min-width: 68px; }
.spr-row { padding: 8px 0; border-bottom: 1px solid var(--border-soft, var(--border)); font-size: .84rem; }
.spr-what { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
.spr-what em { font-style: normal; font-size: .72rem; color: var(--text-muted); }
.spr-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* On very narrow phones a two-up grid truncates real names — "Thomas
   O'Connell" became "Thomas O'C…". One per row costs a little height and
   keeps every name readable in full. */
@media (max-width: 360px) {
  .split-bal-grid { grid-template-columns: 1fr; }
  .split-bal-name { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Desktop ── */
@media (min-width: 700px) {
  .split-section { padding: 18px; }
  .split-bal-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .split-transfer {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "who amt btn";
  }
  .split-transfer-btn { width: auto; }
  .split-done-row {
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas: "who meta amt del";
  }
  .sdr-meta { text-align: right; }
}

/* ════ TABLES → CARDS ON MOBILE ══════════════════════════
   The dashboard's tables are 8–10 columns wide. Left as tables on a phone,
   `.table-wrap { overflow-x:auto }` turns each one into a sideways-scroll
   cave — you drag left and right to read a single row, which is exactly the
   thing that makes the dashboard unusable on mobile.

   Below 760px each row becomes a self-contained card: one label/value pair
   per line, with the label taken from the column header via data-label
   (set by App.ui.labelTableCells). Nothing scrolls sideways. */
@media (max-width: 760px) {

  /* Stop the wrapper clipping and scrolling — the cards flow vertically now */
  .table-wrap {
    overflow-x: visible;
    overflow-y: visible;
    max-height: none;
    border: 0;
    background: none;
    border-radius: 0;
  }

  .data-table,
  .data-table tbody,
  .data-table tfoot,
  .data-table tr,
  .data-table td { display: block; width: auto; }

  /* Headers become the per-cell labels instead */
  .data-table thead { display: none; }

  .data-table tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    padding: 4px 12px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
  }

  /* Flex, not grid: a cell can hold several children (a value plus a notes
     span, a badge, a cluster of buttons) and CSS grid gives each one its own
     track — which pushed notes into the label column and stretched category
     badges to full width. Flex keeps the label fixed and lets the rest of the
     cell flow and wrap as one group, whatever it contains. */
  .data-table tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft, var(--border));
    text-align: left !important;      /* .num cells are right-aligned on desktop */
    min-width: 0;
    overflow-wrap: anywhere;          /* long names/notes wrap instead of overflowing */
    white-space: normal;
  }
  .data-table tbody td:last-child { border-bottom: 0; }

  .data-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    width: 36%;
    min-width: 88px;
    max-width: 130px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding-top: 2px;
  }

  /* Rows that span every column (empty states, the itemised detail row) have
     no single header to name them, so they run full width with no label. */
  .data-table tbody td[colspan] {
    display: block;
    text-align: center !important;
    padding: 16px 4px;
    color: var(--text-muted);
  }
  .data-table tbody td[colspan]::before { content: none; }
  .data-table tbody tr.li-detail-tr { padding: 0; background: var(--page); }
  .data-table tbody tr.li-detail-tr td[colspan] { text-align: left !important; padding: 10px 12px; }

  /* Action buttons get a full row and real tap targets */
  /* Badges and pills size to their text rather than filling the cell */
  .data-table tbody td .status-badge { display: inline-block; width: auto; }

  /* Buttons keep their icon and count on one line — min-width:44px is a tap
     target, not an instruction to wrap "\1F9FE 3" into two rows. */
  .data-table tbody td .btn-icon {
    white-space: nowrap;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .data-table .inline-actions {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start;
  }
  .data-table .inline-actions .btn-icon,
  .data-table .inline-actions .btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Totals row reads as a summary card, not a stray row */
  .data-table tfoot tr {
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px 12px;
    margin-top: 4px;
    display: block;
  }
  .data-table tfoot td {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; text-align: left !important;
  }
  .data-table tfoot td:empty { display: none; }

  /* Sticky headers are meaningless once the header row is hidden */
  .data-table thead th { position: static; }
}

/* ════ DIRECTOR ITINERARY — "VOTING & QUIZZES" ACCORDION ══
   The day-quiz builder, vote-events panel, reminder config and moderation
   queue used to stack above the timeline. On a phone that is a screen and a
   half of admin before Day 1 — the "impossible to navigate properly on
   mobile" complaint. They are collapsed behind this one row instead, closed
   by default, so the tab opens on the timeline.

   Written mobile-first: the base rules target a phone and the min-width
   block adds desktop. */
.itin-admin {
  margin: 14px 0 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E4E7EE);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}

.itin-admin-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;                 /* tap-target floor, not a suggestion */
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;                 /* kill the native disclosure triangle… */
  -webkit-tap-highlight-color: transparent;
}
.itin-admin-summary::-webkit-details-marker { display: none; }  /* …and Safari's */
.itin-admin-summary:hover { background: var(--surface-2, #FAFBFD); }

.itin-admin-head { flex: 1; min-width: 0; }   /* flex children refuse to shrink without this */

.itin-admin-title {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink, #16181D);
  overflow-wrap: break-word;
}

.itin-admin-hint {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  color: var(--text-muted, #6B7280);
  overflow-wrap: break-word;
}

.itin-admin-caret {
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-faint, #9AA1AE);
  transition: transform .18s ease;
}
.itin-admin[open] .itin-admin-caret { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .itin-admin-caret { transition: none; }
}

.itin-admin-body {
  padding: 4px 15px 15px;
  border-top: 1px solid var(--border, #E4E7EE);
}
/* The panels inside render their own cards; drop their leading margin so the
   first one does not double up on the body's padding. */
.itin-admin-body > div:first-of-type > *:first-child { margin-top: 0; }