/* ── THEME VARIABLES ───────────────────────────────────── */
:root {
  --bg:#0a0e17;--surface:#111827;--surface2:#1a2336;--surface3:#222f45;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.15);
  --text:#e8edf5;--text2:#8899b4;--text3:#4d637f;
  --accent:#3b82f6;--accent2:#1d4ed8;--green:#10b981;--red:#ef4444;
  --amber:#f59e0b;--purple:#8b5cf6;--junior:#0891b2;--senior:#1d4ed8;--super:#f97316;
  /* 5 shift type palette — 4 fully distinct hues, no ambiguity at any size
     Adult Senior  → navy-blue  (#1d4ed8)
     Adult Junior  → cyan       (#0891b2)
     PEDS  Senior  → violet     (#7c3aed)
     PEDS  Junior  → rose-pink  (#db2777)
     Transport     → orange + 🚁 */
  --adult-senior:#1d4ed8;--adult-junior:#0891b2;
  --peds-senior:#7c3aed;--peds-junior:#db2777;--peds-transport:#f97316;
  --fellow:#ec4899;
  --radius:10px;--radius-lg:16px;--font:'Sora',sans-serif;--mono:'DM Mono',monospace;
  --shadow:none;
}
body.light {
  --bg:#f0f4f8;--surface:#ffffff;--surface2:#eef2f7;--surface3:#e2e8f0;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.15);
  --text:#1a202c;--text2:#4a5568;--text3:#a0aec0;
  --accent:#2563eb;--accent2:#1d4ed8;
  --shadow:0 1px 3px rgba(0,0,0,0.1);
}
/* ── RESET ─────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.6;transition:background .2s,color .2s}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
/* ── LAYOUT ─────────────────────────────────────────────── */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
#app{display:none}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:224px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;box-shadow:var(--shadow)}
.main-content{margin-left:224px;min-height:100vh;padding:2rem}
.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:10px}
/* ── LOGIN ──────────────────────────────────────────────── */
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow)}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:2rem}
.login-logo .logo-mark{width:40px;height:40px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;color:white}
.login-logo h1{font-size:20px;font-weight:600;letter-spacing:-.5px}
.login-logo span{color:var(--text2);font-weight:300;font-size:13px;display:block}
.login-tabs{display:flex;gap:4px;background:var(--surface2);border-radius:var(--radius);padding:4px;margin-bottom:1.5rem}
.login-tab{flex:1;padding:8px;border:none;background:none;color:var(--text2);border-radius:7px;cursor:pointer;font-family:var(--font);font-size:13px;transition:all .2s}
.login-tab.active{background:var(--surface3);color:var(--text)}
/* ── FORMS ──────────────────────────────────────────────── */
.field{margin-bottom:1rem}
.field label{display:block;font-size:12px;color:var(--text2);margin-bottom:6px;letter-spacing:.3px}
.field input,.field select,.field textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field select option{background:var(--surface2);color:var(--text)}
.field textarea{resize:vertical}
/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius);border:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:white}.btn-primary:hover{background:var(--accent2)}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface3);border-color:var(--border2)}
.btn-danger{background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.3)}.btn-danger:hover{background:rgba(239,68,68,.25)}
.btn-warn{background:rgba(234,179,8,.18);color:#a16207;border:1px solid rgba(234,179,8,.4)}.btn-warn:hover{background:rgba(234,179,8,.28)}
.btn-success{background:rgba(16,185,129,.15);color:var(--green);border:1px solid rgba(16,185,129,.3)}.btn-success:hover{background:rgba(16,185,129,.25)}
.btn-sm{padding:6px 12px;font-size:12px}.btn-full{width:100%;justify-content:center}.btn-icon{padding:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* ── THEME TOGGLE ────────────────────────────────────────── */
.theme-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;cursor:pointer;font-size:12px;color:var(--text2);transition:all .2s;font-family:var(--font)}
.theme-toggle:hover{border-color:var(--border2);color:var(--text)}
/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar-header{padding:1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.sidebar-logo .mark{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:white}
.sidebar-logo h2{font-size:15px;font-weight:600}
.sidebar-user{padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.user-pill{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:13px;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:11px;color:var(--text2)}
/* ── BADGES ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500}
.badge-junior,.badge-adult_junior{background:rgba(8,145,178,.15);color:var(--adult-junior);border:1px solid rgba(8,145,178,.35)}
.badge-senior,.badge-adult_senior{background:rgba(29,78,216,.2);color:#93c5fd;border:1px solid rgba(29,78,216,.4)}
.badge-peds_senior{background:rgba(124,58,237,.15);color:var(--peds-senior);border:1px solid rgba(124,58,237,.3)}
.badge-peds_junior{background:rgba(167,139,250,.15);color:var(--peds-junior);border:1px solid rgba(167,139,250,.3)}
.badge-peds_transport{background:rgba(249,115,22,.15);color:var(--peds-transport);border:1px solid rgba(249,115,22,.3)}
.badge-fellow{background:rgba(236,72,153,.15);color:var(--fellow);border:1px solid rgba(236,72,153,.3)}
.badge-admin{background:rgba(59,130,246,.15);color:var(--accent);border:1px solid rgba(59,130,246,.3)}
.badge-pending{background:rgba(245,158,11,.12);color:var(--amber)}
.badge-approved{background:rgba(16,185,129,.12);color:var(--green)}
.badge-declined{background:rgba(239,68,68,.12);color:var(--red)}
/* ── NAV ─────────────────────────────────────────────────── */
.nav-menu{flex:1;padding:.75rem 0;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 1.25rem;color:var(--text2);cursor:pointer;transition:all .15s;font-size:13px;font-weight:400;border:none;background:none;width:100%;text-align:left}
.nav-item:hover{color:var(--text);background:var(--surface2)}
.nav-item.active{color:var(--accent);background:rgba(59,130,246,.1)}
.nav-item svg{width:16px;height:16px;flex-shrink:0}
.nav-section{padding:1.25rem 1.25rem 6px;font-size:10px;letter-spacing:1px;color:var(--text3);text-transform:uppercase}
.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border)}
.app-version{font-size:11px;color:var(--text3);text-align:center;margin-top:8px;letter-spacing:.3px}
/* Smart Swap Finder controls — stack on phones */
.sf-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
@media(max-width:820px){
  .sf-controls{flex-direction:column;align-items:stretch}
  .sf-controls .field{min-width:0!important;flex:none!important}
  .sf-controls .btn{width:100%}
}
.notif-dot{width:6px;height:6px;background:var(--red);border-radius:50%;margin-left:auto}
/* ── PANELS ──────────────────────────────────────────────── */
.panel{display:none}.panel.active{display:block}
/* ── CARDS ───────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.card-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-size:15px;font-weight:500}
.card-body{padding:1.5rem}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.stat-label{font-size:11px;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:300;font-family:var(--mono)}
.stat-sub{font-size:12px;color:var(--text3);margin-top:4px}
/* ── CALENDAR ────────────────────────────────────────────── */
.cal-nav{display:flex;align-items:center;gap:12px;margin-bottom:1rem;flex-wrap:wrap;gap:8px}
.cal-nav h3{font-size:16px;font-weight:500;flex:1;text-align:center}
.cal-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
/* Scroll-to-today lands with the day's top edge (not its middle) just below any
   sticky header, so the day is fully readable from its start instead of the
   viewport centering on whichever shift happens to fall in the middle. */
.cal-day-mine.today,.cal-mday.today,.cal-date-row-cell.today,.cal-day-grouped.today,.agenda-day.is-today{scroll-margin-top:16px}
/* Sick-call header label: full text on desktop, compact "Intern SC"/"Super SC"
   on mobile. Header never wraps; on mobile the font scales with the viewport so
   the short label always stays on one line no matter the phone width. */
.sc-lbl-short{display:none}
.shift-card.sick-call .shift-card-header{white-space:nowrap}
@media (max-width:820px){
  .sc-lbl-full{display:none}
  .sc-lbl-short{display:inline}
  .shift-card.sick-call .shift-card-header{font-size:clamp(7px,2.6vw,11px)}
}
.cal-header-cell{background:var(--surface2);padding:6px 4px;text-align:center;font-size:11px;color:var(--text2);font-weight:500;letter-spacing:.5px;border-bottom:1px solid var(--border)}
/* Date-number row cells (one row per week) */
.cal-date-row-cell{background:var(--surface2);padding:4px 7px 3px;font-size:13px;color:var(--text2);font-weight:700;border-bottom:2px solid var(--border2);border-right:1px solid var(--border);min-height:26px;letter-spacing:-.2px}
.cal-date-row-cell:nth-child(7n){border-right:none}
.cal-date-row-cell.today{background:rgba(59,130,246,.1);border-bottom-color:var(--accent)}
.cal-date-row-cell.today .cal-day-num{color:var(--accent)}
.cal-date-row-cell.other-month{background:var(--bg);opacity:.3}
.cal-day-num{font-size:13px;color:var(--text2);font-weight:700}
/* Time-slot cells — per-cell time label via data-time + ::before */
.cal-time-cell{position:relative;background:var(--surface);padding:14px 3px 2px;min-height:28px;border-right:1px solid var(--border);border-bottom:1px solid rgba(255,255,255,.03)}
.cal-time-cell:nth-child(7n){border-right:none}
.cal-time-cell.other-month-cell{background:var(--bg);opacity:.12}
.cal-time-cell.week-gap{border-bottom:3px solid var(--border2)}
/* Show time label at top of each cell when the time changes (first type in a time group) */
.cal-time-cell.time-label-row[data-time]::before{content:attr(data-time);position:absolute;top:2px;left:4px;right:4px;font-size:8px;font-family:var(--mono);color:var(--text3);font-weight:600;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Subsequent type-rows at the same time get smaller top-padding (no label) */
.cal-time-cell.same-time-row{padding-top:2px}
/* ── My Shifts simple monthly view ── */
.cal-day-mine{background:var(--surface);padding:6px 5px 5px;min-height:80px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.cal-day-mine:nth-child(7n){border-right:none}
.cal-day-mine.other-month{background:var(--bg);opacity:.3}
.cal-day-mine.today{background:rgba(59,130,246,.05);border-bottom-color:var(--accent)}
.cal-day-mine .cal-day-num{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:5px}
.cal-day-mine.today .cal-day-num{color:var(--accent)}
.cal-day-mine .shift-card{margin-bottom:3px}
/* Clickable individual resident names inside a combined chip */
.combined-name{cursor:pointer;padding:0 5px 2px;border-radius:3px;transition:background .1s;font-size:9.5px;font-weight:500}
.combined-name:hover{background:rgba(255,255,255,.15)}
.combined-name.dim-name{opacity:.45}
.combined-name.is-mine{font-weight:700}
body.light .combined-name:hover{background:rgba(0,0,0,.08)}
/* Special top row: sick call + PEDS transport share a compact row */
.cal-time-cell.cal-special-row{background:rgba(0,0,0,.1);display:flex;flex-wrap:wrap;gap:2px;padding:2px 3px;min-height:20px}
.cal-time-cell.cal-special-row .shift-card{flex:1;min-width:0;margin-bottom:0}
.cal-time-cell.cal-special-row .shift-card .shift-card-time{display:none}
/* Chips fill the full cell width in time-slot rows */
.cal-time-cell .shift-card{width:100%;margin-bottom:2px}
.cal-time-cell .shift-card:last-child{margin-bottom:0}
/* Keep .cal-day for backward-compat (not used in new render) */
.cal-day{background:var(--surface);padding:5px}
.cal-day.other-month{background:var(--bg);opacity:.4}
/* ── GROUPED DAY CELLS (new layout) ─────────────────────── */
.cal-day-grouped{background:var(--surface);padding:3px 2px 4px;border-right:1px solid var(--border);border-bottom:3px solid var(--border2);vertical-align:top;min-height:40px;min-width:0;overflow:hidden}
.cal-day-grouped:nth-child(7n){border-right:none}
.cal-day-grouped.other-month-cell{background:var(--bg);opacity:.12}
.cal-day-grouped.today{background:rgba(59,130,246,.04)}
/* SC + Transport bar at top of each day */
.cal-day-special{display:flex;flex-direction:column;gap:3px;padding:0 1px 3px;margin-bottom:3px;border-bottom:1px solid var(--border)}
.cal-day-special .shift-card{width:100%;min-width:0;margin-bottom:0}
.cal-day-special .shift-card .shift-card-time{display:none}
/* Single-column day list */
.cal-day-list{}
/* ── Slot-group: bold header + time + name rows ──────────── */
.cal-slot-group{margin-bottom:3px;border-radius:3px;overflow:hidden}
.cal-slot-group:last-child{margin-bottom:0}
/* Header row ("Adult Sr Morning 5a") */
.cal-slot-hdr{font-size:8.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 4px;border-left:2px solid;line-height:1.3}
.cal-slot-hdr.adult_senior{background:#03112a;border-left-color:#1d4ed8;color:#93c5fd}
.cal-slot-hdr.adult_junior{background:#041920;border-left-color:#0891b2;color:#67e8f9}
.cal-slot-hdr.peds_senior {background:#180b2e;border-left-color:#7c3aed;color:#c4b5fd}
.cal-slot-hdr.peds_junior {background:#2a0519;border-left-color:#db2777;color:#fbcfe8}
body.light .cal-slot-hdr.adult_senior{background:#dbeafe;border-left-color:#1d4ed8;color:#1e3a8a}
body.light .cal-slot-hdr.adult_junior{background:#cffafe;border-left-color:#0891b2;color:#155e75}
body.light .cal-slot-hdr.peds_senior {background:#ede9fe;border-left-color:#7c3aed;color:#4c1d95}
body.light .cal-slot-hdr.peds_junior {background:#fce7f3;border-left-color:#db2777;color:#831843}
/* Compact shift time under header */
.cal-slot-time{font-family:var(--mono);font-size:9px;font-weight:700;padding:0 4px 1px 8px;opacity:.55;line-height:1.3}
/* Name row under time */
.cal-slot-name{font-size:10px;font-weight:500;padding:1px 4px 1px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:flex;align-items:center;gap:3px;line-height:1.4}
.cal-slot-name:hover{opacity:.75}
.cal-slot-name.empty-slot{opacity:.35;font-style:italic;cursor:default}
.cal-slot-name.protected-slot{color:#6ee7b7;font-weight:700;cursor:default}
.cal-slot-name .row-tag{font-family:var(--mono);font-size:7px;font-weight:800;letter-spacing:.3px;background:rgba(255,255,255,.18);border-radius:2px;padding:0 2px;line-height:1;flex-shrink:0}
.cal-slot-name .row-event{font-size:7px;font-weight:800;padding:0 2px;border-radius:2px;background:rgba(16,185,129,.25);color:#a7f3d0;flex-shrink:0;vertical-align:middle}
/* Whole-group dimming when filtering */
.cal-slot-group.dim{opacity:.2;pointer-events:none}
/* Whole-group highlight — mine (blue glow) */
.cal-slot-group.hl-mine{background:rgba(37,99,235,.18);border-radius:3px}
.cal-slot-group.hl-mine .cal-slot-name{font-weight:700;color:#60a5fa}
.cal-slot-group.hl-mine .cal-slot-time{opacity:1;color:#93c5fd}
/* Whole-group highlight — other resident (green glow) */
.cal-slot-group.hl-other{background:rgba(16,185,129,.15);border-radius:3px}
.cal-slot-group.hl-other .cal-slot-name{font-weight:700;color:#34d399}
.cal-slot-group.hl-other .cal-slot-time{opacity:1;color:#059669}
/* Protected group */
.cal-slot-group.protected{opacity:.6}
body.light .cal-slot-group.hl-mine{background:rgba(37,99,235,.12)}
body.light .cal-slot-group.hl-mine .cal-slot-name{color:#1d4ed8}
body.light .cal-slot-group.hl-mine .cal-slot-time{color:#2563eb}
body.light .cal-slot-group.hl-other{background:rgba(5,150,105,.1)}
body.light .cal-slot-group.hl-other .cal-slot-name{color:#047857}
body.light .cal-slot-group.hl-other .cal-slot-time{color:#065f46}
body.light .cal-slot-name.protected-slot{color:#047857}
body.light .cal-slot-name .row-tag{background:rgba(0,0,0,.12);color:inherit}
/* Section header pill */
.cal-type-header{font-size:7px;font-weight:700;letter-spacing:.5px;padding:2px 3px;text-align:center;margin-bottom:2px;border-radius:2px;color:#fff;text-transform:uppercase}
.cal-type-header.adult_senior{background:#1d4ed8}
.cal-type-header.adult_junior{background:#0891b2}
.cal-type-header.peds_senior{background:#7c3aed}
.cal-type-header.peds_junior{background:#db2777}
.cal-type-header.peds_transport{background:#f97316}
/* Column header (SENIOR / JUNIOR / PEDS TRANSPORT) — neutral since columns mix types */
.cal-col-header{font-size:7.5px;font-weight:800;letter-spacing:.6px;padding:2px 3px;text-align:center;margin-bottom:2px;border-radius:2px;text-transform:uppercase;background:var(--surface3);color:var(--text2)}
.cal-col-header.peds_transport{background:#f97316 !important;color:#fff !important}
body.light .cal-col-header{background:#e2e8f0;color:#475569}
/* Protected-day badge inline in the date-number row */
.cal-prot-badge{font-size:6.5px;font-weight:700;color:#059669;letter-spacing:.2px;vertical-align:middle;display:inline-block;margin-left:5px;white-space:nowrap}
body.light .cal-prot-badge{color:#047857}
/* Compact shift row */
.shift-row{border-radius:3px;padding:2px 4px 3px;margin-bottom:2px;cursor:pointer;line-height:1.25;border-left:2px solid transparent}
.shift-row:last-child{margin-bottom:0}
.shift-row .row-head{display:flex;align-items:center;gap:3px;justify-content:space-between}
.shift-row .row-dept{font-size:6px;font-weight:800;letter-spacing:.2px;padding:0 2px;border-radius:2px;background:rgba(0,0,0,.3);flex-shrink:0;line-height:1.5}
body.light .shift-row .row-dept{background:rgba(0,0,0,.15);color:inherit}
.shift-row .row-time{font-family:var(--mono);font-size:9.5px;font-weight:700;white-space:nowrap;flex-shrink:0}
.shift-row .row-name{display:block;font-weight:500;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shift-row .row-tag{font-family:var(--mono);font-size:7.5px;font-weight:800;letter-spacing:.3px;background:rgba(255,255,255,.2);border-radius:2px;padding:0 2px;line-height:1;vertical-align:middle;display:inline-block;margin-left:2px}
body.light .shift-row .row-tag{background:rgba(0,0,0,.12)}
.shift-row.adult_senior{background:#03112a;border-left-color:#1d4ed8;color:#93c5fd}
.shift-row.adult_junior{background:#041920;border-left-color:#0891b2;color:#67e8f9}
.shift-row.peds_senior{background:#180b2e;border-left-color:#7c3aed;color:#c4b5fd}
.shift-row.peds_junior{background:#2a0519;border-left-color:#db2777;color:#fbcfe8}
.shift-row.peds_transport{background:#1a0d00;border-left-color:#f97316;color:#fb923c}
.shift-row.dim{opacity:.22}
.shift-row.highlight-mine{background:#1e3a5f !important;border-left-color:#60a5fa !important;color:#bfdbfe !important;font-weight:600 !important}
.shift-row.highlight-other{background:#f0fdf4 !important;border-left-color:#16a34a !important;color:#14532d !important}
.shift-row.empty-slot{opacity:.3;cursor:default;border-left-style:dashed}
.shift-row.empty-slot .row-name{font-style:italic}
/* Protected-time slot — empty shift inside a protected window (green) */
.shift-row.protected-slot{background:rgba(16,185,129,.14)!important;border-left:2px solid var(--green)!important;color:#6ee7b7!important;cursor:default;opacity:1}
.shift-row.protected-slot .row-name{font-weight:700;color:#6ee7b7;display:flex;align-items:center;gap:3px}
.shift-row.protected-slot .row-event{font-size:6px;font-weight:800;letter-spacing:.2px;padding:0 2px;border-radius:2px;background:rgba(16,185,129,.25);color:#a7f3d0}
.cal-protected-banner{font-size:8px;font-weight:700;letter-spacing:.3px;color:#065f46;background:rgba(16,185,129,.85);border-radius:3px;padding:2px 4px;margin-bottom:3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.light .shift-row.protected-slot{background:rgba(16,185,129,.12)!important;color:#065f46!important}
body.light .shift-row.protected-slot .row-name{color:#047857}
body.light .shift-row.adult_senior{background:#dbeafe;color:#1e3a8a;border-left-color:#1d4ed8}
body.light .shift-row.adult_junior{background:#cffafe;color:#155e75;border-left-color:#0891b2}
body.light .shift-row.peds_senior{background:#ede9fe;color:#4c1d95;border-left-color:#7c3aed}
body.light .shift-row.peds_junior{background:#fce7f3;color:#831843;border-left-color:#db2777}
body.light .shift-row.peds_transport{background:#ffedd5;color:#9a3412;border-left-color:#f97316}
body.light .shift-row.highlight-mine{background:#1d4ed8 !important;border-left-color:#93c5fd !important;color:#fff !important}
body.light .swap-chip-mine{background:rgba(37,99,235,.2);color:#1e3a8a}
body.light .swap-chip-offered{background:rgba(139,92,246,.2);color:#4c1d95;box-shadow:inset 0 0 0 1.5px rgba(139,92,246,.6)}
body.light .swap-chip-eligible{background:rgba(5,150,105,.2);color:#064e3b}
body.light .swap-chip-blocked{background:rgba(220,38,38,.2);color:#7f1d1d}
/* ── SHIFT CARDS IN CALENDAR ─────────────────────────────── */
.shift-card{border-radius:4px;margin-bottom:3px;overflow:hidden;font-size:10px;line-height:1.35;border-left:3px solid transparent;border-top:1px solid transparent;border-right:1px solid transparent;border-bottom:1px solid transparent;cursor:pointer}
.shift-card-header{padding:3px 5px 1px;font-weight:700;letter-spacing:.1px;font-size:9.5px}
.shift-card-time{padding:0 5px 1px;font-size:9px;opacity:.8;font-family:var(--mono)}
.shift-card-resident{padding:0 5px 3px;font-size:9.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Adult Junior — cyan */
.shift-card.junior,.shift-card.adult_junior{background:#041920;border-left-color:#0891b2;border-top-color:#08303f;border-right-color:#08303f;border-bottom-color:#08303f;color:#67e8f9}
/* Adult Senior — navy blue */
.shift-card.senior,.shift-card.adult_senior{background:#03112a;border-left-color:#1d4ed8;border-top-color:#0a1e4a;border-right-color:#0a1e4a;border-bottom-color:#0a1e4a;color:#93c5fd}
/* PEDS Senior — teal */
/* PEDS Senior — violet */
.shift-card.peds_senior{background:#180b2e;border-left-color:#7c3aed;border-top-color:#2d1560;border-right-color:#2d1560;border-bottom-color:#2d1560;color:#c4b5fd}
/* PEDS Junior — sky blue */
/* PEDS Junior — rose-pink */
.shift-card.peds_junior{background:#2a0519;border-left-color:#db2777;border-top-color:#4a0a2e;border-right-color:#4a0a2e;border-bottom-color:#4a0a2e;color:#fbcfe8}
/* PEDS Transport — orange */
/* PEDS Transport — orange with helicopter icon */
.shift-card.peds_transport{background:#1a0d00;border-left-color:#f97316;border-left-width:4px;border-top-color:#3a1800;border-right-color:#3a1800;border-bottom-color:#3a1800;color:#fb923c}
/* Light-mode overrides */
body.light .shift-card.junior,body.light .shift-card.adult_junior{background:#cffafe;color:#155e75;border-left-color:#0891b2;border-top-color:#67e8f9;border-right-color:#67e8f9;border-bottom-color:#67e8f9}
body.light .shift-card.senior,body.light .shift-card.adult_senior{background:#dbeafe;color:#1e3a8a;border-left-color:#1d4ed8;border-top-color:#93c5fd;border-right-color:#93c5fd;border-bottom-color:#93c5fd}
body.light .shift-card.peds_senior{background:#ede9fe;color:#4c1d95;border-left-color:#7c3aed;border-top-color:#c4b5fd;border-right-color:#c4b5fd;border-bottom-color:#c4b5fd}
body.light .shift-card.peds_junior{background:#fce7f3;color:#831843;border-left-color:#db2777;border-top-color:#f9a8d4;border-right-color:#f9a8d4;border-bottom-color:#f9a8d4}
body.light .shift-card.peds_transport{background:#ffedd5;color:#9a3412;border-left-color:#f97316;border-left-width:4px;border-top-color:#fed7aa;border-right-color:#fed7aa;border-bottom-color:#fed7aa}
.shift-card.highlight-mine{background:#eff6ff !important;border-left-color:#2563eb !important;border-top-color:#bfdbfe !important;border-right-color:#bfdbfe !important;border-bottom-color:#bfdbfe !important;color:#1e40af !important}
.shift-card.highlight-other{background:#f0fdf4 !important;border-left-color:#16a34a !important;border-top-color:#bbf7d0 !important;border-right-color:#bbf7d0 !important;border-bottom-color:#bbf7d0 !important;color:#14532d !important}
.shift-card.dim{opacity:.22}
.shift-card.sick-call{background:#fef2f2;border-left-color:#dc2626;border-top-color:#fecaca;border-right-color:#fecaca;border-bottom-color:#fecaca;color:#7f1d1d}
.shift-card.sick-call.highlight-mine{background:#fee2e2 !important;border-left-color:#dc2626 !important;color:#7f1d1d !important}
.shift-card.sick-call.highlight-other{background:#fce7f3 !important;border-left-color:#be185d !important;color:#831843 !important}
.shift-card.sick-call.intern{background:#fefce8;border-left-color:#eab308;border-top-color:#fef08a;border-right-color:#fef08a;border-bottom-color:#fef08a;color:#713f12}
.shift-card.sick-call.intern.highlight-mine{background:#fef9c3 !important;border-left-color:#ca8a04 !important;color:#713f12 !important}
.shift-card.sick-call.intern.highlight-other{background:#fef3c7 !important;border-left-color:#b45309 !important;color:#78350f !important}
/* Super Sick Call — light orange (senior covering a day with no intern) */
.shift-card.sick-call.super{background:#fff7ed;border-left-color:#f97316;border-top-color:#fed7aa;border-right-color:#fed7aa;border-bottom-color:#fed7aa;color:#9a3412}
.shift-card.sick-call.super.highlight-mine{background:#ffedd5 !important;border-left-color:#ea580c !important;color:#9a3412 !important}
.shift-card.sick-call.super.highlight-other{background:#ffedd5 !important;border-left-color:#c2410c !important;color:#7c2d12 !important}
.shift-card.sick-call.empty-sick{opacity:.75}
.shift-card.sick-call .shift-card-resident.empty-slot{font-style:italic;opacity:.8}
/* ── REQUESTS ────────────────────────────────────────────── */
.request-list{display:flex;flex-direction:column;gap:10px}
.request-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.request-item.pending{border-left:3px solid var(--amber)}
.request-item.approved{border-left:3px solid var(--green)}
.request-item.declined{border-left:3px solid var(--red)}
.request-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.request-title{font-size:14px;font-weight:500}
.request-body{font-size:13px;color:var(--text2);margin-bottom:12px}
.request-actions{display:flex;gap:8px}
.shift-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:12px}
.shift-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.shift-box-label{font-size:10px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.shift-box-date{font-size:14px;font-weight:500}
.shift-box-time{font-size:12px;color:var(--text2)}
/* ── NOTIFICATIONS ───────────────────────────────────────── */
.notif-list{display:flex;flex-direction:column;gap:8px}
.notif-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)}
.notif-item.unread{border-left:3px solid var(--accent);background:rgba(59,130,246,.04)}
.notif-content{flex:1;min-width:0}
.install-steps{margin-top:1.25rem}
.install-steps h4{font-size:14px;font-weight:600;margin:1.25rem 0 .5rem}
.install-steps:first-of-type h4{margin-top:0}
.install-steps ol{margin:0;padding-left:1.25rem;line-height:1.7;font-size:14px;color:var(--text2)}
.install-steps li{margin-bottom:.35rem}
.install-note{font-size:12px;color:var(--text3);margin:.6rem 0 0;padding:.5rem .75rem;background:var(--surface2);border-radius:8px;line-height:1.5}
.fb-drop-area{border:2px dashed var(--border);border-radius:10px;padding:1rem;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:border-color .15s,background .15s;
  color:var(--text3);font-size:13px;min-height:72px;text-align:center}
.fb-drop-area:hover,.fb-drop-area.drag-over{border-color:var(--accent);background:rgba(var(--accent-rgb,59,130,246),.05)}
.fb-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fb-thumb{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.fb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fb-thumb-del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;
  background:rgba(0,0,0,.6);color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.feedback-fab{position:fixed;bottom:1.75rem;right:1.75rem;width:48px;height:48px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);z-index:200;transition:transform .15s,box-shadow .15s}
.feedback-fab:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.3)}
@media(max-width:820px){.feedback-fab{display:none}}
/* Mobile-only "scroll to top" FAB for the Calendar tab — small, floats clear of
   both the day cells and the bottom tab bar so it can't be mistaken for a
   calendar element or a nav tab. */
.cal-scrolltop-fab{display:none}
.notif-del{flex-shrink:0;align-self:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface2);color:var(--text3);font-size:13px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.notif-del:hover{color:var(--red);border-color:var(--red)}
.notif-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--surface2);font-size:16px}
.notif-content{flex:1}
.notif-text{font-size:13px;margin-bottom:2px}
.notif-time{font-size:11px;color:var(--text3)}
/* notification preference toggles */
.notif-pref-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--border)}
.notif-pref-row:last-child{border-bottom:none}
.notif-pref-label{font-size:13px;font-weight:500}
.notif-pref-desc{font-size:11px;color:var(--text3);margin-top:1px}
.notif-toggle{position:relative;width:42px;height:24px;border-radius:13px;border:none;background:var(--surface3);cursor:pointer;flex-shrink:0;transition:background .18s;padding:0}
.notif-toggle.on{background:var(--accent)}
.notif-toggle:disabled{opacity:.4;cursor:not-allowed}
.notif-toggle-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.notif-toggle.on .notif-toggle-knob{transform:translateX(18px)}
/* ── MODALS ──────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)}
/* Sticky-footer variant — header + footer stay fixed; inner content scrolls */
.modal.modal-sticky{display:flex;flex-direction:column;overflow:hidden}
.modal.modal-sticky .modal-header{flex-shrink:0}
.modal.modal-sticky .modal-scroll-body{flex:1;overflow-y:auto;min-height:0}
.modal.modal-sticky .modal-footer{flex-shrink:0}
.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.modal-header h3{font-size:16px;font-weight:500}
.modal-body{padding:1.5rem}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
/* ── TABLES ──────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
/* ── MANAGE RESIDENTS STATS PANEL ─────────────────────────── */
.res-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem;overflow:hidden}
.res-group-header{padding:10px 14px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;border-left:3px solid var(--border)}
.res-stats-table{width:100%;border-collapse:collapse}
.res-stats-table th{padding:6px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom:1px solid var(--border);white-space:nowrap;text-align:left}
.res-stats-table th:not(:first-child){text-align:center;min-width:44px}
.res-stats-table td{padding:7px 10px;font-size:12px;border-bottom:1px solid var(--border2)}
.res-stats-table td:not(:first-child){text-align:center;font-family:var(--mono);font-size:12px}
.res-stats-table tr:last-child td{border-bottom:none}
.res-stat-zero{opacity:.3}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;font-size:11px;font-weight:500;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--border)}
td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface2)}
/* ── TOASTS ──────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:8px;z-index:2000;pointer-events:none}
.toast{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:12px 16px;font-size:13px;max-width:320px;animation:slideUp .3s ease;pointer-events:all;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.toast.success{border-left:3px solid var(--green)}.toast.error{border-left:3px solid var(--red)}.toast.info{border-left:3px solid var(--accent)}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* ── MISC ────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:3rem;color:var(--text3)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.info-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border)}
.info-row:last-child{border-bottom:none}
.info-label{color:var(--text2)}
/* ── SWAP STEP 2 ─────────────────────────────────────────── */
.swap-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--amber);margin-bottom:1rem;line-height:1.5}
.resident-section-header{background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.3);border-radius:8px;padding:10px 14px;margin:14px 0 5px;display:flex;align-items:center;justify-content:space-between}
body.light .resident-section-header{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.25)}
.resident-section-header .rsh-name{font-size:13px;font-weight:700;color:var(--accent)}
.resident-section-header .rsh-email{font-size:11px;color:var(--text2)}
.resident-section-header .rsh-count{font-size:11px;color:var(--green);background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);padding:2px 8px;border-radius:10px;font-weight:500}
.blocked-section-title{font-size:11px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;padding:12px 0 6px;border-top:1px solid var(--border);margin-top:8px}
/* Flat section headers for the sorted swap list */
.swap-section-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:10px 1.5rem 6px;color:var(--green);background:rgba(16,185,129,.06);border-top:1px solid rgba(16,185,129,.2);border-bottom:1px solid rgba(16,185,129,.12);display:flex;justify-content:space-between;align-items:center;margin:0}
.swap-section-hdr-blocked{color:var(--red);background:rgba(239,68,68,.06);border-top-color:rgba(239,68,68,.2);border-bottom-color:rgba(239,68,68,.12)}
/* View toggle */
.swap-view-toggle{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:3px}
.swap-view-toggle button{border:none;background:none;padding:5px 14px;border-radius:6px;font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;color:var(--text2);transition:all .15s}
.swap-view-toggle button.active{background:var(--surface3);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.my-shift-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:space-between}
.my-shift-card:hover{border-color:var(--accent);background:rgba(59,130,246,.06)}
.their-shift-card-el{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .15s;margin:0 1.5rem .5rem}
.their-shift-card-el:hover{border-color:var(--green);background:rgba(16,185,129,.05)}
.their-shift-card-el.selected{border-color:var(--green);background:rgba(16,185,129,.08)}
.their-shift-card-el.blocked-card{opacity:.45;cursor:not-allowed}
.their-shift-card-el.blocked-card:hover{border-color:var(--border);background:var(--surface2)}
/* ── SWAP CALENDAR VIEW ──────────────────────────────────── */
.swap-cal-view{padding:1rem 1.5rem 1.5rem}
/* Two-pane: calendar on the left, eligible list sidebar on the right */
.swap-cal-layout{display:grid;grid-template-columns:1fr 260px;gap:1rem;align-items:start}
.swap-cal-main{min-width:0}
.swap-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.swap-cal-dow{text-align:center;font-size:10px;color:var(--text3);padding:2px 0;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.swap-cal-day{min-height:72px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:3px;overflow:hidden;font-size:9px;position:relative;transition:border-color .15s}
.swap-cal-day.today-day{border-color:var(--accent)}
.swap-cal-day.other-month{opacity:.3}
.swap-cal-day.past-day{opacity:.4}
.swap-cal-day-num{font-size:9px;font-weight:600;color:var(--text3);margin-bottom:2px}
/* Calendar chip — bg = swap status, left border = shift type */
.swap-chip{border-radius:3px;padding:1px 4px 2px;margin-bottom:2px;line-height:1.2;overflow:hidden;border-left:3px solid transparent;transition:filter .1s,box-shadow .1s}
.swap-chip .sc-top{display:flex;justify-content:space-between;align-items:center;gap:3px}
.swap-chip .sc-type{font-size:6.5px;font-weight:800;letter-spacing:.2px;opacity:.85;white-space:nowrap}
.swap-chip .sc-time{font-family:var(--mono);font-size:7.5px;opacity:.8;white-space:nowrap}
.swap-chip .sc-name{display:block;font-size:9px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swap-chip-mine{background:rgba(37,99,235,.22);color:#bfdbfe}
.swap-chip-offered{background:rgba(139,92,246,.32);color:#ddd6fe;box-shadow:inset 0 0 0 1.5px rgba(139,92,246,.75);font-weight:600}
.swap-chip-eligible{background:rgba(16,185,129,.18);color:#6ee7b7;cursor:pointer}
.swap-chip-eligible:hover{filter:brightness(1.2)}
.swap-chip-blocked{background:rgba(239,68,68,.14);color:#fca5a5;cursor:pointer}
.swap-chip-blocked:hover{filter:brightness(1.2)}
.swap-chip-warn{background:rgba(245,158,11,.2);color:#fcd34d;cursor:pointer}
.swap-chip-warn:hover{filter:brightness(1.2)}
body.light .swap-chip-warn{background:rgba(217,119,6,.22);color:#7c2d12}
/* Vacation "requested off" soft-warning cards (still selectable) */
.their-shift-card-el.vac-warn{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.06)}
.their-shift-card-el.vac-warn:hover{border-color:var(--amber);background:rgba(245,158,11,.1)}
.their-shift-card-el.vac-warn.selected{border-color:var(--amber);background:rgba(245,158,11,.14)}
.swap-cal-side-item.vac-warn{border-color:rgba(245,158,11,.5)}
/* Legend */
.swap-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--text2);padding:2px 1.5rem 12px;align-items:center}
.swap-legend.swap-legend-col{flex-direction:column;align-items:flex-start;gap:5px;padding:0 0 12px}
.swap-legend .lg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.lg-dot.lg-green{background:var(--green)}.lg-dot.lg-amber{background:var(--amber)}.lg-dot.lg-red{background:var(--red)}
/* Shift-type left border accent */
.swap-chip.type-adult_senior{border-left-color:#1d4ed8}
.swap-chip.type-adult_junior{border-left-color:#0891b2}
.swap-chip.type-peds_senior{border-left-color:#7c3aed}
.swap-chip.type-peds_junior{border-left-color:#db2777}
.swap-chip.type-peds_transport{border-left-color:#f97316}
/* Highlight from sidebar hover */
.swap-chip-hl{box-shadow:0 0 0 2px #fff,0 0 6px rgba(255,255,255,.4);filter:brightness(1.3);position:relative;z-index:2}
body.light .swap-chip-hl{box-shadow:0 0 0 2px var(--accent)}
/* Eligible sidebar */
.swap-cal-side{border-left:1px solid var(--border);padding-left:1rem;max-height:520px;overflow-y:auto;position:sticky;top:0}
.swap-cal-side-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green);margin-bottom:.6rem;display:flex;align-items:center;gap:6px}
.swap-cal-side-count{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:10px;padding:1px 7px;font-size:11px}
.swap-cal-side-item{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;transition:all .12s}
.swap-cal-side-item:hover,.swap-cal-side-item.swap-side-hl{border-color:var(--green);background:rgba(16,185,129,.08)}
/* Calendar swap confirm panel */
.swap-cal-confirm{display:none;padding:1.5rem}
.swap-cal-confirm.open{display:block}
.swap-cal-confirm-card{background:var(--surface2);border:1.5px solid var(--accent);border-radius:12px;padding:1.25rem 1.5rem;max-width:560px;margin:0 auto}
/* Month nav header for the swap calendar */
.swap-cal-month-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.swap-cal-month-label{font-size:14px;font-weight:600;color:var(--text)}
.swap-cal-nav-btn{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:13px;cursor:pointer;color:var(--text2);font-family:var(--font);transition:border-color .15s}.swap-cal-nav-btn:hover{border-color:var(--border2);color:var(--text)}
/* Narrow screens — stack calendar above the list */
@media(max-width:720px){.swap-cal-layout{grid-template-columns:1fr}.swap-cal-side{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:1rem;position:static;max-height:none}}
/* attending schedule image */
.attending-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .2s;position:relative}
.attending-box:hover{border-color:var(--border2);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.attending-box img{width:100%;height:180px;object-fit:cover;object-position:top;display:block}
.attending-box .attending-label{padding:10px 14px;font-size:12px;color:var(--text2);display:flex;align-items:center;justify-content:space-between}
/* Adult/PEM schedule toggle */
.att-month-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
.att-month-nav #att-month-label{font-weight:600;font-size:13px;min-width:120px;text-align:center}
.att-toggle{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px}
.att-toggle .att-tab{border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:500;padding:4px 12px;border-radius:6px;cursor:pointer;line-height:1.4;-webkit-tap-highlight-color:transparent}
.att-toggle .att-tab.active{background:var(--accent);color:#fff}
.att-toggle.att-toggle-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.att-toggle.att-toggle-dark .att-tab{color:rgba(255,255,255,.8)}
.att-toggle.att-toggle-dark .att-tab.active{background:var(--accent);color:#fff}
/* image lightbox */
#img-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:3000;display:none;flex-direction:column;cursor:default}
#img-lightbox.open{display:flex}
#img-lightbox #lb-img-wrap img{user-select:none;display:block;border-radius:6px}
/* Top bar: zoom (left) + close (right). Adult/PEM toggle + hint live in a centered
   bottom bar — this guarantees nothing overlaps even on the smallest phones. */
#lb-topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 12px 8px;z-index:10}
#lb-zoom-controls{display:flex;gap:6px}
.lb-zbtn{background:rgba(255,255,255,.15);border:none;color:#fff;height:36px;min-width:36px;border-radius:18px;
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 6px}
.lb-zbtn.lb-zlabel{font-size:12px;padding:0 12px}
.lb-zbtn:hover{background:rgba(255,255,255,.28)}
#img-lightbox .close-lb{background:rgba(255,255,255,.12);border:none;color:#fff;width:40px;height:40px;border-radius:50%;
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#img-lightbox .close-lb:hover{background:rgba(255,255,255,.25)}
#lb-img-wrap{flex:1 1 auto;overflow:auto;width:100%;max-width:1100px;margin:0 auto;min-height:0}
#lb-bottombar{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px))}
#lb-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px}
#lb-month-nav{display:flex;align-items:center;gap:8px}
#lb-month-nav #lb-month-label{color:#fff;font-size:13px;font-weight:600;min-width:118px;text-align:center}
.lb-mbtn{background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:50%;
  font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-mbtn:hover{background:rgba(255,255,255,.28)}
#lb-hint{text-align:center;font-size:12px;color:rgba(255,255,255,.55)}
@media(max-width:480px){
  #lb-topbar{padding-left:8px;padding-right:8px}
  .lb-zbtn{height:32px;min-width:32px;font-size:16px}
  .lb-zbtn.lb-zlabel{padding:0 8px;font-size:11px}
  #img-lightbox .close-lb{width:34px;height:34px;font-size:17px}
  #lb-hint{font-size:11px}
}
/* vacation badge */
.vacation-badge{font-size:11px;color:var(--amber);background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:6px;padding:4px 8px;margin-top:5px}
/* csv upload area */
.upload-area{border:2px dashed var(--border2);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;font-size:13px;color:var(--text2)}
.upload-area:hover{border-color:var(--accent);color:var(--accent)}
.upload-area.has-data{border-color:var(--green);color:var(--green);border-style:solid}
/* ── RESIDENT FILTER BAR (calendar) ─────────────────────── */
.filter-pill{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);font-size:12px;cursor:pointer;color:var(--text2);transition:all .15s;white-space:nowrap}
.filter-pill.active-mine{border-color:var(--accent);background:rgba(59,130,246,.12);color:var(--accent)}
.filter-pill.active-other{border-color:var(--green);background:rgba(16,185,129,.12);color:var(--green)}
.filter-pill.active{border-color:var(--border2);background:var(--surface3);color:var(--text)}
.filter-pill:hover{border-color:var(--border2);color:var(--text)}
/* ── DASHBOARD REDESIGN ─────────────────────────────────── */
.dash-hero{background:linear-gradient(135deg,#1e3a5f 0%,#1a4d6e 50%,#0f766e 100%);border-radius:var(--radius-lg);padding:1.75rem;color:white;margin-bottom:1.5rem;position:relative;overflow:hidden}
.dash-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:rgba(255,255,255,.06);border-radius:50%}
.dash-hero::after{content:'';position:absolute;bottom:-60px;right:60px;width:140px;height:140px;background:rgba(255,255,255,.04);border-radius:50%}
.dash-hero-greeting{font-size:26px;font-weight:600;margin-bottom:2px;position:relative}
.dash-hero-date{font-size:13px;opacity:.75;margin-bottom:1.25rem;position:relative}
.dash-hero-on-today{background:rgba(255,255,255,.12);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:14px 16px;position:relative}
.dash-hero-shift-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;opacity:.7;margin-bottom:4px}
.dash-hero-shift-name{font-size:20px;font-weight:700;margin-bottom:4px}
.dash-hero-shift-meta{font-size:13px;opacity:.8;display:flex;align-items:center;gap:8px}
.dash-hero-actions{display:flex;gap:8px;margin-top:12px}
.dash-hero-btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);border:none;transition:all .15s}
.dash-hero-btn-primary{background:rgba(255,255,255,.2);color:white;border:1px solid rgba(255,255,255,.3)}.dash-hero-btn-primary:hover{background:rgba(255,255,255,.3)}
.dash-hero-btn-secondary{background:white;color:#1e3a5f}.dash-hero-btn-secondary:hover{background:rgba(255,255,255,.9)}
.dash-hero-badge{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:500}
.dash-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:1.5rem}
.dash-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;box-shadow:var(--shadow)}
.dash-stat-val{font-size:26px;font-weight:300;font-family:var(--mono);margin-bottom:2px}
.dash-stat-label{font-size:11px;color:var(--text2);letter-spacing:.4px}
.upcoming-shift-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.upcoming-shift-row:hover{background:var(--surface2);margin:0 -1rem;padding:10px 1rem;border-radius:6px}
.upcoming-shift-row:last-child{border-bottom:none}
.ushift-date-col{text-align:center;min-width:40px}
.ushift-dow{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.ushift-day{font-size:18px;font-weight:600;line-height:1;color:var(--text)}
.ushift-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ushift-info{flex:1}
.ushift-name{font-size:13px;font-weight:500}
.ushift-time{font-size:12px;color:var(--text2)}
/* Shift detail panel (slides over upcoming) */
.shift-detail-panel{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.4);align-items:flex-end}
.shift-detail-panel.open{display:flex}
.shift-detail-inner{background:var(--surface);border-radius:16px 16px 0 0;width:100%;max-width:600px;margin:0 auto;padding:1.5rem;max-height:80vh;overflow-y:auto}
.shift-detail-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 1rem}
.also-on-day-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.also-on-day-row:last-child{border-bottom:none}
.aod-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE LAYER — phones only; desktop is untouched
   ═══════════════════════════════════════════════════════════ */
.mobile-topbar,.mobile-tabbar{display:none}
.mobile-more-sheet{display:none}
.cal-agenda,.cal-mobile-controls{display:none}

@media (max-width:820px){
  /* Hide the desktop sidebar, reclaim the full width */
  .sidebar{display:none}
  .main-content{margin-left:0;padding:1rem 1rem calc(82px + env(safe-area-inset-bottom,0px))}

  /* Form controls ≥16px so iOS Safari never auto-zooms on focus (would leave the
     whole app zoomed-in after sign-in). */
  input,select,textarea,.field input,.field select,.field textarea{font-size:16px}

  /* ── Top app bar ── */
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:90;height:54px;box-sizing:content-box;
    padding:env(safe-area-inset-top,0px) 14px 0;
    background:var(--surface);border-bottom:1px solid var(--border)}
  .mobile-topbar .mtb-logo{display:flex;align-items:center;gap:8px}
  .mobile-topbar .mtb-logo .mark{width:28px;height:28px;background:var(--accent);border-radius:7px;
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:#fff}
  .mobile-topbar .mtb-logo span{font-size:15px;font-weight:600;letter-spacing:-.3px}
  .mobile-topbar .mtb-actions{display:flex;align-items:center;gap:8px}
  .mobile-topbar .mtb-icon{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
    background:var(--surface2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .mobile-topbar .mtb-avatar{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
    font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;
    background:var(--surface3);color:var(--text)}

  /* ── Bottom tab bar ── */
  .mobile-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:var(--surface);border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 14px rgba(0,0,0,.18)}
  .mtab{flex:1;background:none;border:none;cursor:pointer;font-family:var(--font);
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;
    color:var(--text3);position:relative;min-height:46px;justify-content:center;
    -webkit-tap-highlight-color:transparent}
  .mtab svg{width:23px;height:23px;stroke-width:1.9}
  .mtab span{font-size:10px;font-weight:500;letter-spacing:.1px}
  .mtab.active{color:var(--accent)}
  .mtab.active svg{stroke-width:2.4}
  .mtab-dot{position:absolute;top:2px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;
    background:var(--red);display:none;border:1.5px solid var(--surface)}

  /* ── Scroll-to-today lands below the sticky 54px top bar, not flush against it ── */
  .cal-day-mine.today,.cal-mday.today,.cal-date-row-cell.today,.cal-day-grouped.today,.agenda-day.is-today{
    scroll-margin-top:calc(54px + env(safe-area-inset-top,0px) + 14px)}

  /* ── Calendar "scroll to top" FAB — sits above the tab bar, right-aligned,
     clearly separated from day cells by its own shadow + circular shape ── */
  .cal-scrolltop-fab{display:flex;position:fixed;right:14px;
    bottom:calc(70px + env(safe-area-inset-bottom,0px));
    width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;
    background:var(--surface2);color:var(--text2);border:1px solid var(--border);cursor:pointer;
    box-shadow:0 3px 12px rgba(0,0,0,.24);z-index:96;-webkit-tap-highlight-color:transparent;
    transition:transform .15s}
  .cal-scrolltop-fab:active{transform:scale(.9)}

  /* ── "More" bottom sheet ── */
  .mobile-more-sheet{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.5);
    align-items:flex-end;justify-content:center}
  .mobile-more-sheet.open{display:flex}
  .more-sheet-inner{background:var(--surface);width:100%;max-width:600px;
    border-radius:18px 18px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));
    max-height:84vh;overflow-y:auto;animation:slideUp .25s ease}
  .more-sheet-handle{width:38px;height:4px;background:var(--border2);border-radius:2px;margin:4px auto 12px}
  .more-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .more-user{display:flex;align-items:center;gap:10px}
  .more-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
  .more-name{font-size:15px;font-weight:600}
  .more-role{margin-top:3px;display:inline-flex}
  .more-close{background:var(--surface2);border:1px solid var(--border);color:var(--text2);
    width:34px;height:34px;border-radius:50%;font-size:15px;cursor:pointer;flex-shrink:0}
  .more-sheet-body{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
  .more-row{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;
    background:var(--surface2);border:1px solid var(--border);color:var(--text);
    font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;text-align:left;position:relative;
    -webkit-tap-highlight-color:transparent}
  .more-row:hover{border-color:var(--border2)}
  .more-row svg{width:18px;height:18px;flex-shrink:0;color:var(--accent)}
  .more-row .notif-dot{position:absolute;top:10px;right:10px;margin:0}
  .more-sheet-foot{display:flex;gap:8px}
  .more-sheet-foot .btn{flex:1;justify-content:center}

  /* ── Collapse 2-up grids to single column ── */
  .main-content [style*="1fr 1fr"]{grid-template-columns:1fr !important}
  .two-col{grid-template-columns:1fr}

  /* ── Tighten headers; let control row wrap instead of scrolling sideways ── */
  .top-bar{margin-bottom:1rem}
  .cal-controls{flex-wrap:wrap;max-width:100%}
  .cal-controls .btn,.cal-controls .filter-pill{flex-shrink:0}
  .cal-controls #resident-picker{position:fixed;top:auto;left:1rem;right:1rem}
  /* Redundant on phones: My Shifts lives in the segmented control below;
     PDF/Excel live in the More → Export panel. */
  .cal-controls #filter-mine-btn,
  .cal-controls #cal-pdf-btn,
  .cal-controls #cal-excel-btn{display:none}

  /* ── Mobile board: day cards flow & wrap responsively, scroll vertically ── */
  #panel-schedule .card>.card-body{padding:.5rem}
  #cal-grid.cal-mobile-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));
    gap:6px;border:none;min-width:0;overflow:visible}
  .cal-mday{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;
    display:flex;flex-direction:column;min-width:0;overflow:hidden}
  .cal-mday.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
  .cal-mday-hdr{display:flex;align-items:baseline;justify-content:space-between;
    padding:1px 3px 4px;border-bottom:1px solid var(--border);margin-bottom:4px}
  .cal-mday-dow{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
  .cal-mday-num{font-size:15px;font-weight:700;color:var(--text)}
  .cal-mday.today .cal-mday-num{color:var(--accent)}

  /* ── Admin stat tables scroll instead of squashing ── */
  .res-group{overflow-x:auto}
  .res-stats-table{min-width:540px}

  /* ── Cards — tighter on phones ── */
  .card-header{padding:.9rem 1rem}
  .card-body{padding:1rem}
  .top-bar{gap:8px;margin-bottom:1.25rem}
  .top-bar h2{font-size:18px !important}

  /* ── Dashboard hero ── */
  .dash-hero{padding:1.25rem}
  .dash-hero-greeting{font-size:22px}
  .dash-hero-actions{flex-wrap:wrap}
  .dash-stats-row{gap:8px;grid-template-columns:repeat(2,1fr)}
  .dash-stat{padding:.85rem 1rem}
  .dash-stat-val{font-size:22px}

  /* ── Upcoming shifts ── */
  .upcoming-shift-row{gap:8px;padding:9px 0}
  .ushift-info{min-width:0}
  .ushift-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ── Request cards ── */
  .request-item{padding:1rem}
  .request-actions{flex-wrap:wrap;gap:6px}

  /* ── Notifications ── */
  .notif-item{padding:.85rem 1rem}

  /* ── Modals → bottom sheets ── */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{max-width:100% !important;width:100%;max-height:94vh;border-radius:18px 18px 0 0}
  .their-shift-card-el{margin-left:0;margin-right:0}
  .swap-cal-view{padding:1rem}

  /* ── Phone-native agenda calendar ── */
  .cal-mobile-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .agenda-seg{display:flex;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px}
  .agenda-seg-btn,.agenda-filt{border:none;background:none;color:var(--text2);font-family:var(--font);
    font-size:12px;font-weight:500;padding:7px 13px;border-radius:7px;cursor:pointer;white-space:nowrap;
    -webkit-tap-highlight-color:transparent}
  .agenda-seg-btn.active,.agenda-filt.active{background:var(--surface3);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.25)}
  /* Agenda is the default mobile calendar; dense board is opt-in */
  #panel-schedule .card{display:none}
  #panel-schedule #cal-agenda{display:block}
  #panel-schedule.board-mode .card{display:block}
  #panel-schedule.board-mode #cal-agenda{display:none}
  #panel-schedule:not(.board-mode) .cal-controls .filter-pill{display:none}

  .cal-agenda{display:block}
  .agenda-day{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--border)}
  .agenda-day:last-child{border-bottom:none}
  .agenda-date{width:46px;flex-shrink:0;text-align:center;padding-top:3px}
  .agenda-dow{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
  .agenda-num{font-size:23px;font-weight:700;line-height:1.05;color:var(--text)}
  .agenda-mon{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
  .agenda-day.is-today .agenda-num{color:#fff;background:var(--accent);border-radius:9px;width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;margin:1px auto 0;font-size:18px}
  .agenda-shifts{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .agenda-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);
    border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:11px;padding:11px 13px;
    cursor:pointer;font-family:var(--font);-webkit-tap-highlight-color:transparent}
  .agenda-row.mine{background:rgba(59,130,246,.07);border-color:rgba(59,130,246,.28)}
  body.light .agenda-row.mine{background:rgba(37,99,235,.06)}
  .agenda-row-main{flex:1;min-width:0}
  .agenda-row-label{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .agenda-row-time{font-size:12px;color:var(--text2);font-family:var(--mono);margin-top:2px}
  .agenda-row-who{font-size:11px;color:var(--text2);flex-shrink:0;max-width:84px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;text-align:right}
  .agenda-row-who.me{color:var(--accent);font-weight:700}
  .agenda-empty{text-align:center;padding:3rem 1rem;color:var(--text3);font-size:13px}
}

@media (max-width:380px){
  .mtab span{font-size:9px}
  .more-sheet-body{grid-template-columns:1fr}
}


/* ── Refresh: desktop button + mobile pull-to-refresh ──────────────────── */
/* Sits above the feedback FAB. Hidden on mobile, where the pull gesture
   replaces it — a second floating button there would crowd the tab bar. */
.refresh-fab{position:fixed;bottom:5.25rem;right:1.75rem;width:48px;height:48px;border-radius:50%;
  display:none;align-items:center;justify-content:center;cursor:pointer;z-index:90;
  background:var(--surface);color:var(--text2);border:1px solid var(--border);box-shadow:var(--shadow)}
.refresh-fab:hover{color:var(--accent);border-color:var(--accent)}
.refresh-fab svg{width:20px;height:20px}
.refresh-fab.spinning svg{animation:refresh-spin .8s linear infinite}
@keyframes refresh-spin{to{transform:rotate(360deg)}}

#ptr-indicator{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;
  z-index:94;pointer-events:none;opacity:0;transform:translateY(-60px);
  transition:opacity .15s ease}
#ptr-indicator .ptr-circle{width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:var(--surface);color:var(--text2);
  border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .15s ease,color .15s ease,border-color .15s ease}
#ptr-indicator.ptr-ready .ptr-circle{color:var(--accent);border-color:var(--accent);transform:rotate(180deg)}
#ptr-indicator.ptr-busy .ptr-circle{color:var(--accent);border-color:var(--accent);
  animation:refresh-spin .8s linear infinite}

/* Only once signed in — refreshing on the login screen does nothing. */
body.signed-in .refresh-fab{display:flex}
@media(max-width:820px){body.signed-in .refresh-fab{display:none}}
/* Keeps iOS rubber-banding the page out of the way of the pull gesture. */
body{overscroll-behavior-y:contain}