/* ── Design tokens (ported verbatim from the approved prototype) ───── */
:root{
  --ink:#1B1E1C; --ink-soft:#5B5A54; --paper:#F1F0EC; --paper-raised:#FFFFFF;
  --line:#DAD7CE; --brass:#B8843C; --brass-dark:#93672C;
  --available:#3F6B4A; --available-bg:#E8F0E9;
  --unavailable:#9C3B3B; --unavailable-bg:#F5E9E9;
  --awaiting:#93672C; --maybe:#6C6355; --maybe-bg:#F4ECE0;
  /* Event-type tag colours (Gig/Studio/Rehearsal/Other) */
  --type-gig:#93672C; --type-gig-bg:#F3E8D4;
  --type-studio:#3B6FA0; --type-studio-bg:#E7EEF5;
  --type-rehearsal:#6B5B95; --type-rehearsal-bg:#ECE8F2;
  --type-other:#5B5A54; --type-other-bg:#E7E5DE;
  --font-display:'Fraunces',Georgia,serif; --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EFEDE7; --ink-soft:#B9B6AC; --paper:#191A18; --paper-raised:#232522;
    --line:#3A3C37; --brass:#D9A25C; --brass-dark:#E8B679;
    --available:#6FAE7D; --available-bg:#1E2C21;
    --unavailable:#E08383; --unavailable-bg:#2E1C1C;
    --awaiting:#D9A25C; --maybe:#B9B6AC; --maybe-bg:#2A2622;
    --type-gig:#F5CD8F; --type-gig-bg:#F3E8D4;
    --type-studio:#A8D0F2; --type-studio-bg:#E7EEF5;
    --type-rehearsal:#CFC3F5; --type-rehearsal-bg:#ECE8F2;
    --type-other:#D6D3C9; --type-other-bg:#E7E5DE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#EFEDE7; --ink-soft:#B9B6AC; --paper:#191A18; --paper-raised:#232522;
  --line:#3A3C37; --brass:#D9A25C; --brass-dark:#E8B679;
  --available:#6FAE7D; --available-bg:#1E2C21;
  --unavailable:#E08383; --unavailable-bg:#2E1C1C;
  --awaiting:#D9A25C; --maybe:#B9B6AC; --maybe-bg:#2A2622;
  --type-gig:#F5CD8F; --type-gig-bg:#F3E8D4;
  --type-studio:#A8D0F2; --type-studio-bg:#E7EEF5;
  --type-rehearsal:#CFC3F5; --type-rehearsal-bg:#ECE8F2;
  --type-other:#D6D3C9; --type-other-bg:#E7E5DE;
  color-scheme: dark;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.5;padding-inline:16px;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
.hidden{display:none!important;}
.wrap{max-width:1040px;margin:0 auto;padding-block:20px 48px;}
.muted{color:var(--ink-soft);font-size:13px;}
.wordmark{font-family:var(--font-display);font-weight:700;}

/* ── Login screen ─────────────────────────────────────────── */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);margin-inline:-16px;}
.login-card{background:var(--paper);padding:40px 36px;border-radius:8px;width:100%;max-width:360px;}
.login-card .wordmark{color:var(--ink);font-size:22px;}
.login-tag{color:var(--ink-soft);margin:6px 0 24px;font-size:13px;}
.login-switch{text-align:center;margin:16px 0 0;font-size:13px;color:var(--ink-soft);}
.login-switch a{color:var(--brass-dark);font-weight:500;text-decoration:underline;}
.login-hint{color:var(--ink-soft);font-size:11px;margin:-8px 0 12px;line-height:1.4;}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px;padding-top:14px;}
.topbar .wordmark{font-size:22px;display:flex;align-items:center;gap:10px;}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mode-toggle{display:flex;gap:2px;background:var(--paper-raised);border:1px solid var(--line);border-radius:8px;padding:3px;}
.mode-btn{font-family:var(--font-body);font-size:13px;font-weight:500;padding:8px 16px;border-radius:6px;border:none;background:transparent;color:var(--ink-soft);cursor:pointer;}
.mode-btn.active{background:var(--ink);color:var(--paper);}

/* ── Buttons & inputs ────────────────────────────────────── */
.btn{font-family:var(--font-body);font-size:13px;font-weight:500;padding:9px 15px;border-radius:6px;border:1px solid var(--line);cursor:pointer;background:var(--paper-raised);color:var(--ink);}
.btn-primary{background:var(--brass);color:#fff;border-color:var(--brass);}
.btn-primary:hover{background:var(--brass-dark);border-color:var(--brass-dark);}
.btn-ghost:hover{background:var(--paper);}
.btn-block{width:100%;}
.btn-small{font-size:11.5px;padding:6px 10px;}
.btn-danger-text{color:var(--unavailable);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
input,select,textarea{font-family:var(--font-body);font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper-raised);color:var(--ink);width:100%;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;}
label{display:block;font-size:12px;font-weight:500;color:var(--ink-soft);margin-bottom:12px;}
label input,label select,label textarea{margin-top:5px;}
.field-row{display:flex;gap:10px;}
.field-row label{flex:1;}

/* Message template textareas: a highlight "backdrop" div sits exactly
   behind the real textarea (same font/padding/line-height, synced on every
   keystroke and scroll) so the {placeholder} tokens can show up in colour —
   a plain <textarea> can't style part of its own text. The real textarea's
   own text is made transparent (just the caret stays visible) so only the
   backdrop's coloured version is ever actually seen. */
.tpl-highlight-wrap{position:relative;}
.tpl-highlight-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;pointer-events:none;font-family:var(--font-body);line-height:1.5;padding:8px 10px;border:1px solid transparent;border-radius:6px;color:var(--ink);}
.tpl-highlight-input{position:relative;background:transparent!important;color:transparent;caret-color:var(--ink);line-height:1.5;}
.tpl-token{color:#2B6CB0;}
:root[data-theme="dark"] .tpl-token{color:#6FA8DC;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tpl-token{color:#6FA8DC;}}
@media (min-width:641px){
  /* Smaller than the general 13px input text so a whole template reads in
     one view without scrolling — phone keeps 16px (see the media query
     below) since iOS auto-zooms on focus of anything smaller. */
  .tpl-highlight-input,.tpl-highlight-backdrop{font-size:12.5px;}
}

/* ── Nav tabs (organiser sub-nav) ────────────────────────── */
.subnav{display:flex;gap:4px;margin:20px 0 20px;border-bottom:1px solid var(--line);}
.subnav-item{font-family:var(--font-body);font-size:13px;font-weight:500;padding:10px 4px;margin-right:20px;border:none;background:none;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;}
.subnav-item.active{color:var(--ink);border-bottom-color:var(--brass);}

/* ── Section headers ─────────────────────────────────────── */
.section-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.section-header h2{font-family:var(--font-display);font-size:22px;margin:0 0 2px;}
.overview-header{align-items:baseline;}
.overview-header h2{margin:0;}
.overview-subtitle{font-family:var(--font-body);font-size:13px;font-weight:400;}
.overview-sort-label{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;}
.header-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ── Toolbar ──────────────────────────────────────────────── */
.toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.toolbar input[type=search]{flex:1;min-width:180px;}
.toolbar select{width:auto;min-width:130px;}

/* ── Table ────────────────────────────────────────────────── */
.table-wrap{background:var(--paper-raised);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:11px;font-weight:600;color:var(--ink-soft);padding:9px 12px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.03em;}
td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.inactive-row{opacity:.5;}
.row-link{background:none;border:none;margin:0;padding:0;color:var(--brass-dark);font-weight:600;cursor:pointer;font-size:13px;font-family:var(--font-body);text-decoration:underline;text-align:left;display:inline-block;white-space:nowrap;}
.venue-cell{font-weight:500;}
.lineup-cell{font-weight:700;}
.lineup-cell.confirmed{color:var(--available);}
.lineup-cell.open{color:var(--awaiting);}
.status-tag{display:inline-flex;align-items:center;gap:6px;}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.dot.active{background:var(--available);}
.dot.inactive{background:var(--maybe);}
.empty-state{padding:36px;text-align:center;color:var(--ink-soft);}

/* ── Overview grid ───────────────────────────────────────── */
.overview-scroll{overflow-x:auto;background:var(--paper-raised);border:1px solid var(--line);border-radius:8px;}
/* `width:100%` (not `min-width:100%`) is the important bit here: a table's
   automatic column-sizing only redistributes extra space to fill the
   'width' property, not a 'min-width' floor — with min-width, a grid with
   few musicians/dates was leaving a dead strip of empty space on the right
   instead of stretching its columns into it. `width:100%` still overflows
   into a scroll (handled by .overview-scroll above) once there are enough
   columns that their natural content width needs more than that, exactly
   like it did before — a table can never be squeezed below its content's
   minimum width, specified width or not. */
table.overview-table{width:100%;}
table.overview-table th,table.overview-table td{text-align:center;white-space:nowrap;}
table.overview-table th.ov-name-col,table.overview-table td.ov-name-col{text-align:left;position:sticky;left:0;background:var(--paper-raised);z-index:1;}
table.overview-table th.ov-date-col{cursor:pointer;}
table.overview-table th.ov-date-col:hover{color:var(--ink);}
.ov-date-label{display:block;font-size:11px;}
.ov-date-label .ov-venue{display:block;font-weight:400;text-transform:none;letter-spacing:0;font-size:10px;margin-top:1px;}
.ov-cell{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:700;}
.ov-cell.ov-available{background:var(--available-bg);color:var(--available);}
.ov-cell.ov-maybe{background:var(--maybe-bg);color:var(--maybe);}
.ov-cell.ov-unavailable{background:var(--unavailable-bg);color:var(--unavailable);}
.ov-cell.ov-pending{background:var(--paper);color:var(--ink-soft);}
.ov-cell.ov-none{background:none;color:var(--line);}
.ov-cell.ov-pickable{cursor:pointer;transition:transform .08s ease;}
.ov-cell.ov-pickable:hover{filter:brightness(0.93);}
.ov-cell.ov-pickable:active{transform:scale(0.92);}
.ov-cell.ov-picked{box-shadow:0 0 0 2px var(--brass);}
.ov-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:var(--ink-soft);align-items:center;}
.ov-legend span{display:inline-flex;align-items:center;gap:5px;}
.ov-pending-group{margin:0 0 8px;padding:8px 12px;background:var(--paper);border-radius:8px;font-size:13px;color:var(--ink-soft);}
.ov-pending-group .link-toggle{font-weight:600;color:var(--ink);}
.section-count{font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-soft);margin-left:6px;}
.pool-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pool-row select{width:auto;min-width:160px;}
.ov-picked-count{font-size:10px;font-weight:400;color:var(--ink-soft);display:block;margin-top:2px;}
.ov-confirm-btn{display:inline-block;margin-top:5px;font-family:var(--font-body);font-size:10px;font-weight:600;text-transform:none;letter-spacing:0;padding:3px 8px;border-radius:10px;border:1px solid var(--brass);background:none;color:var(--brass-dark);cursor:pointer;}
.ov-confirm-btn:hover{background:var(--brass);color:#fff;}
.ov-confirmed-tag{display:inline-block;margin-top:5px;font-size:10px;font-weight:600;text-transform:none;letter-spacing:0;padding:3px 8px;border-radius:10px;background:var(--available-bg);color:var(--available);}
.bm-subnav{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);}
.bm-subnav button{font-family:var(--font-body);font-size:13px;font-weight:500;padding:8px 4px;margin-right:18px;border:none;background:none;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;}
.bm-subnav button.active{color:var(--ink);border-bottom-color:var(--brass);}
.confirmed-gig{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px;background:var(--paper-raised);}
.confirmed-gig:last-of-type{margin-bottom:0;}
.confirmed-gig .date-eyebrow{margin:0 0 2px;}
.confirmed-gig .date-name{margin:0 0 4px;}
.confirmed-gig .gig-fee{font-size:12px;color:var(--available);font-weight:600;margin:0 0 8px;}
.lineup-confirmed-list{list-style:none;margin:0;padding:0;}
.lineup-confirmed-list li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;}
.lineup-confirmed-list li:last-child{border-bottom:none;}
.lineup-confirmed-list .check-dot{width:8px;height:8px;border-radius:50%;background:var(--available);flex-shrink:0;}
.lineup-confirmed-list .instr{color:var(--ink-soft);font-size:12px;margin-left:auto;}
.confirmed-lineup{font-size:12px;color:var(--ink-soft);}
.confirmed-lineup b{color:var(--ink);font-weight:500;}
.inline-check{font-size:11px;font-style:italic;font-weight:400;color:var(--ink-soft);margin-left:8px;white-space:nowrap;}
.inline-check input{width:auto;display:inline-block;vertical-align:middle;margin:0 3px 0 0;}
.pool-order-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;}
.pool-order-row:last-child{border-bottom:none;}
.pool-order-row .ord-btns{display:flex;gap:2px;flex-shrink:0;}
.pool-order-row .ord-btns button{background:none;border:1px solid var(--line);border-radius:4px;width:22px;height:22px;cursor:pointer;font-size:11px;color:var(--ink-soft);padding:0;}
.pool-order-row .ord-btns button:disabled{opacity:.3;cursor:not-allowed;}
.pool-name-btn{background:none;border:none;padding:0;font-weight:600;color:var(--ink);cursor:pointer;font-family:var(--font-body);font-size:13px;text-decoration:underline;text-decoration-color:var(--line);text-align:left;}
.pool-name-btn:hover{text-decoration-color:var(--brass);}
.extra-date-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.extra-date-row input{flex:1;}
.option-date-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.option-date-row .ef-option-date-input{flex:1;min-width:0;}
.option-date-row.has-date .ef-option-date-input{flex:0 0 132px;}
.option-date-row-times{display:none;align-items:center;gap:4px;flex:1;min-width:0;}
.option-date-row.has-date .option-date-row-times{display:flex;}
.option-date-row-times select{flex:1;font-size:12px;padding:4px;min-width:0;color:var(--ink-soft);opacity:0.5;transition:opacity .15s,color .15s;}
.option-date-row-times select.touched{opacity:1;color:var(--ink);}
.option-date-row-times span{font-size:11px;color:var(--ink-soft);}
.eo-response-list{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:4px;}
.eo-response-list li{font-size:13px;}
.eo-response-list li.eo-response-available{color:var(--available);}
.eo-response-list li.eo-response-unavailable{color:var(--unavailable);}
.eo-response-list li.eo-response-maybe{color:var(--maybe);}
.eo-response-list li.eo-response-pending{color:var(--ink-soft);}
.contact-link{color:var(--brass-dark);font-size:12px;text-decoration:underline;}
.pool-chip{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:2px 8px;font-size:11px;color:var(--ink-soft);margin:1px 3px 1px 0;white-space:nowrap;}
.pool-add-btn{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:var(--paper-raised);color:var(--ink-soft);font-size:12px;line-height:1;padding:0;cursor:pointer;vertical-align:middle;display:inline-flex;align-items:center;justify-content:center;}
.pool-add-btn:hover{background:var(--paper);color:var(--ink);}
.pool-popover{position:fixed;z-index:30;min-width:190px;max-height:260px;overflow-y:auto;background:var(--paper-raised);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.pool-popover .check-row{padding:7px 12px;font-size:12px;}
.ov-group-row td{background:var(--paper);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);text-align:left;padding:6px 12px;border-bottom:1px solid var(--line);}
.lineup-cell .lineup-musician{white-space:nowrap;display:inline-block;margin-right:6px;}
.fee-tag{font-size:11px;color:var(--ink-soft);}
.type-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;padding:2px 7px;border-radius:10px;margin-left:6px;white-space:nowrap;vertical-align:middle;}
.type-tag-gig{background:var(--type-gig-bg);color:var(--type-gig);}
.type-tag-studio{background:var(--type-studio-bg);color:var(--type-studio);}
.type-tag-rehearsal{background:var(--type-rehearsal-bg);color:var(--type-rehearsal);}
.type-tag-other{background:var(--type-other-bg);color:var(--type-other);}
.help-btn{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);font-size:11px;font-weight:600;line-height:1;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.help-btn:hover{background:var(--paper-raised);color:var(--ink);}
.chase-summary-toggle{display:none;}

@media (max-width:640px){
  /* Musicians/Events tables (and the archived-events table) keep their real
     row/column layout on phones — just smaller and horizontally scrollable —
     instead of collapsing into unlabeled stacked blocks. .table-wrap is
     overflow:hidden by default (see ~line 86); override that here so a table
     wider than the screen scrolls instead of clipping. This also fixes the
     Overview grid (a musicians×events matrix inside .overview-scroll, not
     .table-wrap): it used to get caught by a blanket `table,tbody,tr,td{
     display:block}` rule here, which scrambled its row/column structure —
     removing that blanket rule leaves the grid's own horizontal scroll
     (.overview-scroll, already overflow-x:auto) working as intended. */
  .table-wrap{overflow-x:auto;overflow-y:hidden;}
  .table-wrap table{font-size:11px;}
  .table-wrap th,.table-wrap td{padding:6px 8px;}

  /* Export payments (Invoices tab): the desktop row of two date pickers +
     two buttons wraps onto overlapping lines at phone width because its
     inline style only sets flex-wrap, with no per-item width — each item
     keeps its intrinsic/desktop size and the wrapped rows collide. Force it
     into one tidy column instead, full-width, so nothing overlaps. */
  .export-controls{flex-direction:column !important;align-items:stretch !important;gap:8px !important;}
  .export-controls label{display:flex;flex-direction:column;gap:3px;}
  .export-controls input,.export-controls button{width:100% !important;box-sizing:border-box;}

  /* iOS Safari auto-zooms the whole page in on focus of any text input,
     select or textarea with a computed font-size under 16px — and because
     switching tabs here never navigates (it's all one page, just toggling
     which section is visible), that zoom/scroll position sticks around and
     makes the next tab look cropped/zoomed rather than resetting. Raising
     every form control to 16px on phone-width screens stops the zoom from
     triggering in the first place; setTab()/setBmTab() in app.js also force
     a zoom reset on every switch as a backstop for any zoom from pinching. */
  input,select,textarea,.tpl-highlight-backdrop{font-size:16px;}

  /* Musicians tab only: Contact is dropped from the phone list entirely —
     tap a name to open the profile drawer for phone/email instead — because
     keeping it in the grid let a long email force the row (and the whole
     page) wider than the screen, which both misaligned columns row-to-row
     and was the cause of the "zoom in" feeling when switching to this tab.
     Each remaining cell gets min-width:0 + ellipsis truncation so a long
     name/instrument/pool list can never do the same thing again. Desktop is
     untouched since this whole block only applies under 640px. */
  .musicians-table tr{display:grid;grid-template-columns:1.5fr 1fr 1fr;column-gap:8px;align-items:center;}
  .musicians-table .col-contact{display:none;}
  .musicians-table th,.musicians-table td{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .musicians-table td .row-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;}

  /* Home tab's 3 stat tiles: on a phone-width screen the desktop sizing
     (flex-basis 160px + 28px numbers) wraps onto two uneven rows. Force all
     3 into one neat row — !important because the sizing above is inline
     style on each button, which otherwise wins over any plain selector here. */
  .home-stat-btn{flex:1 1 0 !important;min-width:0 !important;padding:10px 8px !important;}
  .home-stat-btn p:first-child{font-size:20px !important;}
  .home-stat-btn p.muted{font-size:11px !important;line-height:1.25;}

  /* Overview grid: shrink everything a notch so more musicians/dates fit
     on screen without scrolling — the instrument name under each musician
     is the easiest win since it's secondary info, not something read at
     a glance across the whole row. */
  table.overview-table th,table.overview-table td{padding:4px 6px;}
  table.overview-table td.ov-name-col{font-size:12px;}
  table.overview-table td.ov-name-col .muted{font-size:9.5px;}
  .ov-cell{width:20px;height:20px;font-size:11px;}
  .ov-date-label{font-size:10px;}
  .ov-date-label .ov-venue{font-size:9px;}

  /* Bandmate mode's simulated phone subnav (Home/Event offers/Confirmed
     events/Invoices): the desktop spacing (18px margin between each,
     13px text) adds up to wider than a phone screen, pushing Invoices off
     the edge with nowhere to scroll to reach it. Tighten it up and add
     horizontal scroll as a safety net for any future tab/longer label. */
  /* Organiser tab menu (Home/Musicians/Events/Overview/Invoices/Activity/
     Settings): same idea — wider than a phone, so let it swipe sideways
     inside its own row (like the Overview grid does) instead of running off
     the edge of the page. Desktop is untouched (this is phone-only). */
  .subnav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .subnav::-webkit-scrollbar{display:none;}
  .subnav-item{flex:none;white-space:nowrap;}

  .bm-subnav{overflow-x:auto;flex-wrap:nowrap;}
  .bm-subnav button{font-size:11.5px;padding:7px 2px;margin-right:10px;white-space:nowrap;}

  /* Auto-chase / urgent-chase boxes: collapse to just the clickable
     headline on phone, since the full checkbox+dropdown explanation takes
     up real estate that matters more on a small screen. Desktop never sees
     .chase-summary-toggle (display:none outside this query) and always
     shows .chase-detail in full, so this is phone-only either way. */
  .chase-summary-toggle{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--brass-dark);cursor:pointer;}
  .urgent-section .chase-summary-toggle{color:var(--unavailable);background:var(--unavailable-bg);border-color:transparent;}
  .chase-detail{display:none;margin-top:8px;}
  .chase-detail.expanded{display:block;}

  .overview-subtitle{display:block;font-size:11px;margin-top:1px;}
  .overview-sort-label{font-size:11.5px;}

  /* Event detail drawer + its panels (line-up builder, candidate-date
     picker, etc): these kept their full desktop padding/font-sizes while
     Overview/Home got shrunk down above, so opening an event felt like a
     sudden zoom-in by comparison — bigger text and padding eating the
     screen right when there's the least room to spare. Match the same
     denser feel here, and let the drawer use the full screen width
     instead of floating with ~30px of dead margin on both sides (92vw of
     a phone screen), so its content reaches the edges the same way the
     rest of the phone layout now does. */
  .drawer{width:100%;max-width:100%;padding:16px;}
  .panel{padding:12px;}
  .panel-title{font-size:14px;}
  .drawer-section-title{font-size:11px;}
  .check-row{padding:7px 8px;font-size:12.5px;}
  .lineup-section-title{font-size:10px;}
  .lineup-person{font-size:12.5px;padding:5px 0;}
}

/* ── Panels (event detail) ───────────────────────────────── */
.panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:18px;}
.panel-title{font-family:var(--font-display);font-size:16px;margin:0 0 12px;}
.back-link{margin-bottom:14px;}
.checklist{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:6px;margin-bottom:12px;}
.check-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px;}
.check-row:last-child{border-bottom:none;}
.check-row.already{opacity:.5;}
.check-row.unasked{opacity:.55;}
.check-row.picked-to-top{background:var(--available-bg);}
.check-row input[type=checkbox]{width:auto;}
.check-row .tag{color:var(--ink-soft);font-size:11px;margin-left:auto;}

.lineup-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
#lineup-groups{max-height:380px;overflow-y:auto;padding-right:4px;margin-bottom:12px;}
.lineup-section{margin-bottom:14px;}
.lineup-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);font-weight:600;margin:0 0 6px;}
.lineup-person{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;cursor:pointer;}
.lineup-person input{width:16px;height:16px;accent-color:var(--brass);flex-shrink:0;}
.maybe-badge{font-size:10px;color:var(--awaiting);margin-left:4px;}
.lineup-empty{color:var(--ink-soft);font-size:12px;padding:4px 0;}
.awaiting-box{background:var(--paper);border-radius:6px;padding:10px 12px;margin-bottom:12px;font-size:12px;color:var(--ink-soft);}
.awaiting-box .label{color:var(--awaiting);font-weight:500;}
.chase-all-btn{background:none;border:none;color:var(--brass-dark);font-size:11px;text-decoration:underline;cursor:pointer;padding:0;margin-left:6px;font-family:var(--font-body);}

/* ── Drawer ───────────────────────────────────────────────── */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:20;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:var(--paper-raised);z-index:21;padding:24px;overflow-y:auto;box-shadow:-8px 0 24px rgba(0,0,0,.18);}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.drawer-head h3{font-family:var(--font-display);font-size:18px;margin:0;}
.icon-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft);line-height:1;}
.drawer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.drawer-section{border-top:1px solid var(--line);margin:16px 0 4px;padding-top:14px;}
.drawer-section-title{font-size:12px;font-weight:500;color:var(--ink-soft);margin:0 0 8px;}
.bulk-row{background:var(--paper);border-radius:6px;}
.urgent-section .bulk-row{background:var(--unavailable-bg);}
.urgent-section #urgent-chase-note{color:var(--unavailable);}
.link-toggle{background:none;border:none;color:var(--brass-dark);font-size:11px;padding:6px 0 0;cursor:pointer;font-family:var(--font-body);}
#mf-phone-edit-toggle,#mf-email-edit-toggle{padding:0 0 0 4px;font-size:10.5px;vertical-align:middle;}
#mf-phone-display,#mf-email-display{font-size:14px;margin:4px 0 2px;}
#mf-phone-display a,#mf-email-display a{color:var(--brass-dark);}
.error-text{color:var(--unavailable);font-size:12px;margin:-2px 0 10px;}
.success-text{color:var(--available);font-size:12px;margin:-2px 0 10px;font-weight:500;}

/* ── Bandmate view ────────────────────────────────────────── */
.bandmate-picker{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.bandmate-picker label{margin:0;white-space:nowrap;}
.bandmate-picker select{width:auto;min-width:200px;}
.bandmate-note{font-size:11px;color:var(--brass-dark);font-weight:500;margin:0 0 20px;}
/* Bandmate mode is an organiser-facing preview of what a musician sees, not
   a literal phone simulation — on a desktop it reads at the same width as
   the organiser's own tabs rather than being squeezed into a narrow column. */
.phone-frame{max-width:1040px;margin:0 auto;}
.phone-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:22px 20px;}
.bm-greeting{font-size:12px;color:var(--ink-soft);margin:0 0 2px;}
.bm-title{font-family:var(--font-display);font-size:19px;font-weight:600;margin:0 0 14px;}
.date-row{border-bottom:1px solid var(--line);padding:14px 0;}
.date-row:last-of-type{border-bottom:none;}
/* Multi-date ("a few possible dates") offers: a grey box with a slight
   warm tinge rather than a flat grey, and a visible border (plain
   date-rows have none, so this is what tells the two apart at a glance).
   Giving it the SAME padding as its surroundings actually made it look
   narrower, not wider — it sits inside .phone-card, which already has its
   own 20px padding, so an equal padding on this box stacked on top of
   that. The negative side margin cancels most of that outer padding
   (down to a 6px gutter) so the box reads at close to the same width as a
   regular gig-offer row, not visibly nested/squeezed-in. */
.date-options-card{background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 -14px 14px;}
@supports (background: color-mix(in srgb, red, blue)){
  .date-options-card{background:color-mix(in srgb, var(--line) 85%, var(--brass) 15%);border-color:color-mix(in srgb, var(--line) 55%, var(--brass) 45%);}
}
.date-options-card .date-row{padding:10px 0;}
.date-options-card .date-row:first-of-type{padding-top:2px;}
.date-eyebrow{font-size:11px;color:var(--ink-soft);margin:0 0 2px;}
.date-name{font-size:14px;font-weight:500;margin:0 0 9px;}
.date-name .venue{font-weight:400;color:var(--ink-soft);}
.tick-options{display:flex;gap:12px;flex-wrap:wrap;}
.tick-option{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;}
.tick-option input{width:16px;height:16px;}
.tick-option.available input{accent-color:var(--available);}
.tick-option.maybe input{accent-color:var(--maybe);}
.tick-option.unavailable input{accent-color:var(--unavailable);}
.date-notes{display:none;width:100%;margin-top:8px;font-size:12px;padding:7px 9px;resize:vertical;}
.submit-btn{width:100%;padding:13px;margin-top:4px;font-weight:600;font-size:14px;background:var(--ink);color:var(--paper);border:none;border-radius:8px;cursor:pointer;}
.bm-empty{text-align:center;color:var(--ink-soft);padding:30px 10px;}

/* Musicians list: has this person switched on app notifications? */
.push-tag{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:9px;font-size:10.5px;font-weight:500;vertical-align:middle;white-space:nowrap;}
.push-tag.on{background:rgba(63,107,74,.14);color:var(--available);}
.push-tag.off{background:rgba(0,0,0,.06);color:var(--ink-soft);}

.pw-wrap{position:relative;display:block;}
.pw-wrap input{padding-right:64px;}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--brass-dark);font-size:12px;font-weight:600;cursor:pointer;padding:6px 8px;}

/* Events list: name first (clickable) with its type pill underneath, date second. */
.events-table .ev-name-cell .row-link{white-space:normal;}
.events-table .ev-name-cell .type-tag{display:block;width:fit-content;margin:3px 0 0;}
.events-table .ev-date-cell{white-space:nowrap;}
.events-table td.lineup-cell{white-space:nowrap;}
@media (max-width:700px){
  .events-table{table-layout:fixed;width:100%;}
  .events-table th:nth-child(1){width:38%;}
  .events-table th:nth-child(2){width:19%;}
  .events-table th:nth-child(3),.events-table th:nth-child(4){width:12%;}
  .events-table th:nth-child(5){width:19%;}
  .events-table th,.events-table td{padding:6px 5px;font-size:11px;}
  .events-table .row-link{font-size:12px;word-break:break-word;}
  .events-table .type-tag{font-size:9px;padding:1px 6px;}
}

.md-tabs{display:flex;gap:6px;margin:0 0 14px;}
.md-tabs button{flex:1;padding:8px 10px;border:1px solid var(--line);background:var(--paper);border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.md-tabs button.active{background:var(--brass-dark);border-color:var(--brass-dark);color:#fff;}

#splash{position:fixed;inset:0;z-index:9999;background:#1B1E1C;color:#F1F0EC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;transition:opacity .45s ease;font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;}
#splash.fade{opacity:0;pointer-events:none;}
#splash img.sp-main{width:84px;height:84px;border-radius:20px;}
#splash .sp-word{font-family:'Fraunces',Georgia,serif;font-size:30px;font-weight:600;letter-spacing:.01em;margin:6px 0 0;}
#splash .sp-part{margin-top:34px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9d9a90;}
#splash img.sp-group{width:40px;height:40px;border-radius:10px;margin-top:4px;}
#splash .sp-group-name{font-family:'Fraunces',Georgia,serif;font-size:16px;font-weight:600;margin:0;}
#splash .sp-by{font-size:12px;color:#9d9a90;margin:2px 0 0;}

.login-brand{margin:18px 0 0;text-align:center;font-size:11px;color:var(--ink-soft);letter-spacing:.02em;}

#splash img.sp-group{width:52px;height:52px;box-shadow:0 0 0 1px #3a3d3a;}

/* Event type shows as a soft row colour (no text tag): gig, studio, rehearsal, other. */
.type-row-gig{background:var(--type-gig-bg) !important;}
.type-row-studio{background:var(--type-studio-bg) !important;}
.type-row-rehearsal{background:var(--type-rehearsal-bg) !important;}
.type-row-other{background:var(--type-other-bg) !important;}
tr.type-row td{background:transparent;}
.confirmed-gig.type-row,.date-row.type-row,.date-options-card.type-row{border-radius:8px;padding-left:12px;padding-right:12px;}
th.ov-date-col.type-row,td.type-row{box-shadow:none;}

.brand{display:inline-flex;flex-direction:column;}
.type-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;font-weight:600;margin:0 0 12px;}
.type-key .tk{display:inline-flex;align-items:center;gap:6px;}
.type-key .tk:before{content:"";width:10px;height:10px;border-radius:3px;background:currentColor;}
.tk-gig{color:var(--type-gig);}.tk-studio{color:var(--type-studio);}.tk-rehearsal{color:var(--type-rehearsal);}.tk-other{color:var(--type-other);}
.brand-bars{display:flex;height:4px;margin-top:2px;border-radius:2px;overflow:hidden;}
.brand-bars i{flex:1;}.brand-bars i:nth-child(1){background:var(--type-gig);}.brand-bars i:nth-child(2){background:var(--type-studio);}.brand-bars i:nth-child(3){background:var(--type-rehearsal);}

/* Offer boxes: single-date and multi-date offers share one size and gutter. */
#bm-date-rows > .date-row,#bm-date-rows > .date-options-card{margin:0 0 10px;padding:14px;border:1px solid var(--line);border-radius:10px;box-sizing:border-box;}
#bm-date-rows > .date-row{background:var(--paper);}
.date-options-card .date-row{border-bottom:1px solid var(--line);}
.date-options-card .date-row:last-of-type{border-bottom:none;}

/* Multi-date offers: bold dashed outline so they stand apart from single-date ones. */
#bm-date-rows > .date-options-card{border:2px dashed var(--ink-soft);}


.not-setup-list{background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;}
.ns-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);}
.ns-row:last-child{border-bottom:none;}
.ns-info{min-width:0;}
.ns-row .btn{flex:none;white-space:nowrap;}

/* Coloured rows are always pastel with dark text, in light AND dark mode, so
   the writing never fades into the colour. Inside one, the theme colours are
   pinned back to their light values. */
.type-row,.type-row *{--ink:#1B1E1C;--ink-soft:#5B5A54;--line:#DAD7CE;--paper:#F1F0EC;--paper-raised:#FFFFFF;--brass:#B8843C;--brass-dark:#7A5420;--awaiting:#7A5420;--available:#3F6B4A;--available-bg:#E8F0E9;--unavailable:#9C3B3B;--unavailable-bg:#F5E9E9;--maybe:#6C6355;--maybe-bg:#F4ECE0;}
.type-row{color:#1B1E1C;}

.org-band-tabs{display:flex;gap:2px;align-items:flex-end;margin:16px 0 0;overflow-x:auto;}
.org-band-tabs button{font-family:var(--font-body);font-size:13px;padding:8px 14px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;background:var(--paper-raised);color:var(--ink-soft);cursor:pointer;white-space:nowrap;border-top:3px solid var(--line);}
.org-band-tabs button.on{background:var(--paper);color:var(--ink);font-weight:600;border-top-color:var(--brass);margin-bottom:-1px;}
.org-band-tabs + .card + .subnav,.org-band-tabs ~ .subnav{margin-top:0;border-top:1px solid var(--line);padding-top:6px;}

.bm-set-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;}
.bm-set-row span:last-child{color:var(--ink-soft);text-align:right;}
#bm-content .home-cap{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:16px 0 4px;}