:root{
  --paper:#ffffff;
  --paper-raised:#ffffff;
  --ink:#202124;
  --ink-soft:#5f6368;
  --sand:#f1f3f4;
  --sand-line:#dadce0;
  --sage:#1a73e8;
  --sage-dark:#174ea6;
  --sage-tint:#e8f0fe;
  --coral:#ea4335;
  --coral-tint:#fce8e6;
  --ok:#1e8e3e;
  --warn:#f9ab00;
  --danger:#d93025;
  --danger-tint:#fce8e6;
  --focus:#1a73e8;
  --shadow: 0 1px 2px rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#202124;
    --paper-raised:#2d2e30;
    --ink:#e8eaed;
    --ink-soft:#9aa0a6;
    --sand:#28292c;
    --sand-line:#3c4043;
    --sage:#8ab4f8;
    --sage-dark:#aecbfa;
    --sage-tint:#2a3a54;
    --coral:#f28b82;
    --coral-tint:#3d2422;
    --ok:#81c995;
    --warn:#fdd663;
    --danger:#f28b82;
    --danger-tint:#3d2422;
    --focus:#8ab4f8;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px 2px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#202124;
  --paper-raised:#2d2e30;
  --ink:#e8eaed;
  --ink-soft:#9aa0a6;
  --sand:#28292c;
  --sand-line:#3c4043;
  --sage:#8ab4f8;
  --sage-dark:#aecbfa;
  --sage-tint:#2a3a54;
  --coral:#f28b82;
  --coral-tint:#3d2422;
  --ok:#81c995;
  --warn:#fdd663;
  --danger:#f28b82;
  --danger-tint:#3d2422;
  --focus:#8ab4f8;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px 2px rgba(0,0,0,.3);
  color-scheme: dark;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,.brand{font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;}
.mono{font-family:"Roboto Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;}
button{font-family:inherit;}
a{color:inherit;}
[hidden]{display:none!important;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
.btn{
  border:1px solid var(--sand-line); background:var(--paper-raised); color:var(--ink);
  padding:9px 15px; border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:transform .12s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap; text-decoration:none;
}
.btn:hover{border-color:var(--sage);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--sage); border-color:var(--sage); color:#fff;}
.btn-primary:hover{background:var(--sage-dark); border-color:var(--sage-dark);}
.btn-coral{background:var(--coral); border-color:var(--coral); color:#fff;}
.btn-coral:hover{filter:brightness(.94);}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger);}
.btn-danger:hover{background:var(--danger-tint);}
.btn-ghost{background:transparent;border-color:transparent;padding:9px 12px;}
.btn-ghost:hover{background:var(--sand);}
.btn-sm{padding:6px 11px;font-size:12.5px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}
.icon{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.pill-sage{background:var(--sage-tint);color:var(--sage-dark);}
.pill-warn{background:color-mix(in srgb, var(--warn) 22%, transparent);color:var(--warn);}
.pill-danger{background:var(--danger-tint);color:var(--danger);}
.dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--paper-raised);}

#app{display:none;min-height:100vh;grid-template-rows:60px 1fr;}
#app.show{display:grid;}
.topbar{
  grid-row:1; display:flex; align-items:center; gap:14px;
  padding:0 18px; border-bottom:1px solid var(--sand-line); background:var(--paper-raised);
  position:sticky; top:0; z-index:30;
}
.brand-mark{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:600;color:var(--sage-dark);}
.brand-mark svg{width:24px;height:24px;}
.topbar .spacer{flex:1;}
.view-toggle{display:flex;background:var(--sand);border-radius:999px;padding:3px;gap:2px;}
.view-toggle button{border:none;background:transparent;padding:7px 14px;border-radius:999px;font-weight:600;font-size:13px;color:var(--ink-soft);cursor:pointer;}
.view-toggle button.active{background:var(--paper-raised);color:var(--ink);box-shadow:var(--shadow);}
.bell-btn{position:relative;}
.badge{position:absolute;top:-4px;right:-4px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.me-chip{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--sand);cursor:pointer;border:1px solid transparent;flex:none;}
.me-chip:hover{border-color:var(--sand-line);}
.view-select{display:none;}
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex:none;}
.avatar-sm{width:20px;height:20px;font-size:9.5px;}
.avatar-lg{width:56px;height:56px;font-size:20px;}

.layout{grid-row:2; display:grid; grid-template-columns:236px 1fr; min-height:0;}
.rail{
  border-right:1px solid var(--sand-line); background:var(--paper-raised);
  padding:18px 14px; overflow-y:auto;
}
.rail h3{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin:18px 0 8px; font-family:"Roboto",sans-serif; font-weight:700;}
.rail h3:first-child{margin-top:0;}
.rail-subgroup{margin-bottom:10px;}
.rail-subhead{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700;padding:4px 8px 2px;opacity:.75;}
.person-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--radius-s);cursor:pointer;}
.person-row:hover{background:var(--sand);}
.person-row input{accent-color:var(--sage);}
.person-name{flex:1;font-weight:600;font-size:13px;}
.person-role{font-size:10.5px;color:var(--ink-soft);}
.rail-actions{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.main{padding:20px 22px;overflow-y:auto;min-width:0;}
.main-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.main-head h2{margin:0;font-size:22px;font-weight:600;flex:1;min-width:160px;}
.nav-arrows{display:flex;gap:8px;align-items:center;}
/* This used to be ".nav-arrows button", which also caught #todayBtn and
   forced it into the same fixed 32x32 circle as the round prev/next
   arrows — no amount of padding on #todayBtn could grow that box, so its
   text just overflowed past the (too-small) circular edge. Scoping this
   to the round arrow buttons specifically, and letting Today size itself
   from its own padding, is the actual fix. */
.nav-arrows .arrow-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--sand-line);background:var(--paper-raised);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;}
.nav-arrows .arrow-btn:hover{border-color:var(--sage);}
#todayBtn{width:auto;height:auto;border-radius:999px!important;flex:none;white-space:nowrap;padding:7px 14px!important;line-height:1.2;}

.month-grid{border:1px solid var(--sand-line);border-radius:var(--radius-m);overflow:hidden;background:var(--sand-line);display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.dow{background:var(--paper-raised);padding:8px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);text-align:center;}
.day-cell{background:var(--paper-raised);min-height:104px;padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;}
.day-cell:hover{background:var(--sage-tint);}
.day-cell.other-month{opacity:.4;}
.day-cell.drag-span{background:color-mix(in srgb, var(--focus) 18%, var(--paper-raised));outline:1.5px dashed var(--focus);outline-offset:-2px;}
.day-num{font-size:12.5px;font-weight:700;color:var(--ink-soft);align-self:flex-start;padding:2px 6px;border-radius:999px;}
.day-cell.today .day-num{background:var(--coral);color:#fff;}
.evt-chip{font-size:11px;padding:2px 6px;border-radius:6px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.evt-more{font-size:10.5px;color:var(--ink-soft);font-weight:600;padding:1px 6px;}

.week-wrap{overflow-x:auto;border:1px solid var(--sand-line);border-radius:var(--radius-m);background:var(--paper-raised);}
.week-head{display:grid;grid-template-columns:52px repeat(7,minmax(120px,1fr));border-bottom:1px solid var(--sand-line);position:sticky;top:0;background:var(--paper-raised);z-index:2;}
.week-head-cell{padding:10px 6px;text-align:center;border-left:1px solid var(--sand-line);}
.week-head-cell .wd{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700;}
.week-head-cell .wn{font-size:17px;font-weight:700;font-family:"Fraunces",serif;}
.week-head-cell.today .wn{color:var(--coral);}
.allday-row{display:grid;grid-template-columns:52px repeat(7,minmax(120px,1fr));border-bottom:1px solid var(--sand-line);min-height:26px;}
.allday-row .lbl{font-size:9.5px;color:var(--ink-soft);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;}
.allday-cell{border-left:1px solid var(--sand-line);padding:2px 3px;display:flex;flex-direction:column;gap:2px;}
.week-body{display:grid;grid-template-columns:52px repeat(7,minmax(120px,1fr));position:relative;}
.hour-col{display:flex;flex-direction:column;}
.hour-lbl{height:48px;font-size:10px;color:var(--ink-soft);text-align:right;padding-right:6px;transform:translateY(-6px);}
.day-col{border-left:1px solid var(--sand-line);position:relative;background-image:repeating-linear-gradient(to bottom, var(--sand-line) 0, var(--sand-line) 1px, transparent 1px, transparent 48px);}
.day-col.today{background-color:color-mix(in srgb, var(--coral) 6%, transparent);}
.evt-block{position:absolute;left:2px;right:2px;border-radius:7px;padding:4px 7px;color:#fff;font-size:11px;font-weight:600;overflow:hidden;cursor:pointer;box-shadow:var(--shadow);}
.evt-block small{display:block;font-weight:500;opacity:.9;font-size:10px;}
.drag-ghost{position:absolute;left:2px;right:2px;background:color-mix(in srgb, var(--focus) 30%, transparent);border:1.5px dashed var(--focus);border-radius:7px;pointer-events:none;}

/* single-day view — hour rows are sized dynamically in JS so the whole
   24-hour column fits the viewport without its own scrollbar */
.day-wrap{border:1px solid var(--sand-line);border-radius:var(--radius-m);background:var(--paper-raised);overflow:hidden;}
.day-allday-row{grid-template-columns:52px 1fr;}
.day-body{display:grid;grid-template-columns:52px 1fr;position:relative;}
.day-body .hour-col{display:flex;flex-direction:column;}
.day-body .hour-lbl{font-size:10px;color:var(--ink-soft);text-align:right;padding-right:6px;transform:translateY(-6px);}
.day-body .day-col{border-left:1px solid var(--sand-line);position:relative;}
.day-body .day-col.today{background-color:color-mix(in srgb, var(--coral) 6%, transparent);}

.overlay{position:fixed;inset:0;background:rgba(20,22,17,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;}
.sheet{background:var(--paper-raised);border-radius:var(--radius-l);max-width:520px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow);}
.sheet-wide{max-width:640px;}
.sheet-head{display:flex;align-items:center;gap:10px;padding:18px 20px 6px;}
.sheet-head h3{margin:0;font-size:19px;flex:1;}
.sheet-body{padding:12px 20px 20px;}
.sheet-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px 20px;border-top:1px solid var(--sand-line);margin-top:8px;}
.x-btn{border:none;background:transparent;cursor:pointer;color:var(--ink-soft);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.x-btn:hover{background:var(--sand);color:var(--ink);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em;}
.field input[type=text],.field input[type=number],.field input[type=date],.field input[type=time],.field input[type=password],.field select,.field textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--sand-line);border-radius:var(--radius-s);background:var(--paper);color:var(--ink);font-size:16px;font-family:inherit;
}
/* 16px minimum stops iOS Safari auto-zooming the page when a field gets focus */
.field textarea{resize:vertical;min-height:56px;}
.field-row{display:flex;gap:10px;}
.field-row>.field{flex:1;}
.autocomplete-field{position:relative;}
.autocomplete-list{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--paper-raised);border:1px solid var(--sand-line);border-radius:var(--radius-m);box-shadow:var(--shadow);max-height:220px;overflow-y:auto;margin-top:2px;}
.autocomplete-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--sand-line);}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item:hover{background:var(--sage-tint);}
.autocomplete-item .n{font-weight:700;font-size:12.5px;}
.autocomplete-item .a{font-size:11.5px;color:var(--ink-soft);}
.chip-group{display:flex;flex-wrap:wrap;gap:7px;}
.chip-check{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--sand-line);cursor:pointer;font-size:13px;font-weight:600;}
.chip-check.on{border-color:var(--sage);background:var(--sage-tint);}
.chip-check input{display:none;}
.type-row{display:flex;gap:7px;flex-wrap:wrap;}
.type-opt{border:1.5px solid var(--sand-line);border-radius:var(--radius-s);padding:7px 12px;cursor:pointer;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;}
.type-opt.on{border-color:var(--sage);background:var(--sage-tint);}
.type-opt input{display:none;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;}
.switch{position:relative;width:38px;height:22px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:var(--sand-line);border-radius:999px;cursor:pointer;transition:.15s;}
.slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;}
input:checked+.slider{background:var(--sage);}
input:checked+.slider:before{transform:translateX(16px);}
.help{font-size:11.5px;color:var(--ink-soft);margin-top:4px;}
.color-swatches{display:flex;gap:7px;flex-wrap:wrap;}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.swatch.on{border-color:var(--ink);}

#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{max-width:420px;width:100%;background:var(--paper-raised);border-radius:var(--radius-l);box-shadow:var(--shadow);padding:34px 30px;text-align:center;}
.login-card h1{font-size:26px;margin:12px 0 4px;}
.login-card p.sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 22px;}
.logo-ring{width:58px;height:58px;border-radius:50%;background:var(--sage-tint);display:flex;align-items:center;justify-content:center;margin:0 auto;color:var(--sage-dark);}
.logo-ring svg{width:30px;height:30px;}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 18px;}
.profile-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:var(--radius-m);border:1.5px solid var(--sand-line);background:var(--paper);cursor:pointer;}
.profile-btn:hover{border-color:var(--sage);}
.profile-btn .nm{font-weight:700;font-size:13px;}
.profile-btn .rl{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:220px;margin:14px auto 0;}
.pin-pad button{padding:14px 0;border-radius:var(--radius-s);border:1.5px solid var(--sand-line);background:var(--paper);font-size:18px;font-weight:600;cursor:pointer;}
.pin-pad button:hover{border-color:var(--sage);}
.pin-dots{display:flex;gap:10px;justify-content:center;margin:16px 0;flex-wrap:wrap;}
.pin-dots span{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--sand-line);}
.pin-dots span.filled{background:var(--sage);border-color:var(--sage);}
.err-text{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:16px;}

.people-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.people-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--sand-line);border-radius:var(--radius-s);}
.convo-item:hover{background:var(--sage-tint);border-color:var(--sage);}
#convoListWrap{padding:0 20px 16px;}
#threadWrap{display:flex;flex-direction:column;flex:1;min-height:0;}
.people-item .meta{flex:1;min-width:0;}
.people-item .meta .n{font-weight:700;font-size:13.5px;}
.people-item .meta .r{font-size:11px;color:var(--ink-soft);}
#callLiftBtn{position:relative;}

/* ---- print ---- */
.print-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--sand-line);border-radius:var(--radius-s);margin-bottom:6px;}
.print-order-btns{display:flex;gap:4px;flex:none;}
.print-order-btns button{border:1px solid var(--sand-line);background:var(--paper-raised);border-radius:6px;width:26px;height:26px;cursor:pointer;color:var(--ink);font-size:11px;}
.print-order-btns button:disabled{opacity:.3;cursor:not-allowed;}
.chip-check-inline{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:13.5px;}

/* The print area lives off-screen (not display:none) at print width so a
   Leaflet map inside it has real dimensions to render tiles into before
   window.print() fires; @media print below swaps it into normal flow and
   hides everything else. */
.print-area{position:fixed;left:-99999px;top:0;width:190mm;background:#fff;color:#111;font-family:"Roboto",sans-serif;}
.print-title{font-size:18px;margin:0 0 10px;font-weight:700;}
.print-month-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.print-month-table th{border:1px solid #ccc;padding:4px;font-size:10px;background:#f3f3f3;}
.print-month-table td{border:1px solid #ccc;vertical-align:top;padding:4px;font-size:9px;height:24mm;overflow:hidden;}
.print-month-table td.out{color:#aaa;}
.pnum{font-weight:700;font-size:11px;margin-bottom:2px;}
.pev{font-size:8.5px;margin-bottom:3px;line-height:1.3;}
.pmeta{color:#555;font-size:7.5px;}
.print-week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.print-week-col{border:1px solid #ccc;padding:5px;min-height:150mm;}
.pwhead{font-weight:700;font-size:10px;border-bottom:1px solid #ccc;margin-bottom:5px;padding-bottom:3px;}
.pday-head{font-weight:700;font-size:12.5px;margin:12px 0 5px;border-bottom:1px solid #ccc;padding-bottom:2px;}
.pempty{color:#999;font-size:10px;}
.print-map{width:100%;height:240mm;}
@media print{
  @page{ size:A4; margin:12mm; }
  body > *:not(#printArea){ display:none!important; }
  .print-area{ position:static; left:auto; width:auto; }
  .print-section{ page-break-after:always; }
  .print-section:last-child{ page-break-after:auto; }
}

/* ---- Call for lift ---- */
.lift-item{border:1px solid var(--sand-line);border-radius:var(--radius-s);padding:12px;margin-bottom:10px;}
.lift-item .lift-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;}
.lift-item .lift-head strong{font-size:14px;}
.lift-status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;}
.lift-status.pending{background:var(--sand);color:var(--ink-soft);}
.lift-status.accepted{background:var(--sage-tint);color:var(--sage-dark);}
.lift-status.declined{background:var(--danger-tint);color:var(--danger);}
.lift-status.cancelled{background:var(--sand);color:var(--ink-soft);}
.lift-status.completed{background:var(--sage-tint);color:var(--sage-dark);}
.lift-adult-picker{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.lift-adult-picker label{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--sand-line);border-radius:var(--radius-s);cursor:pointer;}

/* ---- panic ---- */
.panic-banner{background:var(--danger);color:#fff;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:13.5px;flex-wrap:wrap;}
.panic-banner .sync-links a, .panic-banner button{background:#fff;color:var(--danger);border:none;padding:6px 12px;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:none;}
.bn-add{position:relative;overflow:visible;}
.bn-add-ring{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-90deg);opacity:0;}
.bn-add-ring circle{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:100.5;stroke-dashoffset:100.5;}
.bn-add.holding .bn-add-ring{opacity:1;}
.bn-add.holding .bn-add-ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 3s linear;}
.bn-add.holding{background:var(--danger)!important;}
.tabs{display:flex;gap:4px;background:var(--sand);border-radius:999px;padding:3px;margin-bottom:16px;width:fit-content;flex-wrap:wrap;}
.tabs button{border:none;background:transparent;padding:7px 16px;border-radius:999px;font-weight:600;font-size:12.5px;cursor:pointer;color:var(--ink-soft);}
.tabs button.active{background:var(--paper-raised);color:var(--ink);box-shadow:var(--shadow);}
.ev-tabs{width:100%;justify-content:space-between;}
.ev-tabs button{flex:1;text-align:center;padding:7px 6px;}
.tab-pane{padding-top:2px;}
.map-frame{width:100%;height:280px;border:1px solid var(--sand-line);border-radius:var(--radius-m);}
.perm-group{flex-direction:column;align-items:flex-start;}
.perm-check{width:100%;}
/* compact inline numeric pickers for recurrence — a real scroll-wheel
   control isn't a standard web widget, but a small centered number field
   next to its label reads as one compact control rather than a full-width
   form row, which was the actual complaint. */
.recur-compact-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.compact-label{font-size:12.5px;color:var(--ink-soft);font-weight:600;}
.compact-num{width:60px;padding:6px 4px;border:1.5px solid var(--sand-line);border-radius:var(--radius-s);background:var(--paper);color:var(--ink);font-size:15px;text-align:center;font-family:inherit;}

/* family chat */
.chat-sheet{display:flex;flex-direction:column;max-height:82vh;}
.chat-body{flex:1;overflow-y:auto;padding:6px 20px;display:flex;flex-direction:column;gap:10px;min-height:200px;}
.chat-msg{max-width:78%;align-self:flex-start;}
.chat-msg.mine{align-self:flex-end;text-align:right;}
.chat-from{font-size:11px;font-weight:700;color:var(--ink-soft);margin-bottom:2px;}
.chat-bubble{background:var(--sand);color:var(--ink);padding:8px 12px;border-radius:14px;font-size:13.5px;display:inline-block;text-align:left;word-break:break-word;}
.chat-msg.mine .chat-bubble{color:#fff;}
.chat-time{font-size:10px;color:var(--ink-soft);margin-top:2px;}
.chat-input-row{display:flex;gap:8px;padding:12px 20px 18px;border-top:1px solid var(--sand-line);}
.chat-input-row textarea{flex:1;resize:none;padding:9px 11px;border:1.5px solid var(--sand-line);border-radius:var(--radius-s);font:inherit;font-size:16px;min-height:20px;max-height:100px;}

/* agenda (schedule) view */
.agenda-list{border:1px solid var(--sand-line);border-radius:var(--radius-m);background:var(--paper-raised);overflow:hidden;}
.agenda-day-head{padding:10px 16px;font-weight:700;font-size:12.5px;background:var(--sand);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}
.agenda-day-head.today{color:var(--sage-dark);}
.agenda-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--sand-line);cursor:pointer;}
.agenda-item:hover{background:var(--sage-tint);}
.agenda-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.agenda-time{width:64px;flex:none;font-size:12px;color:var(--ink-soft);font-weight:600;}
.agenda-title{font-size:13.5px;flex:1;min-width:0;}
.agenda-loc{color:var(--ink-soft);font-weight:400;}

/* bottom mobile nav */
.bottom-nav{display:none;}

.detail-line{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--sand-line);font-size:13.5px;}
.detail-line:last-child{border-bottom:none;}
.detail-line .ic{width:18px;color:var(--ink-soft);flex:none;margin-top:1px;}
.approval-item{border:1px solid var(--sand-line);border-radius:var(--radius-m);padding:12px 14px;margin-bottom:10px;}
.approval-item .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:8px;}
.diff-line{font-size:12.5px;margin:2px 0;}
.diff-old{color:var(--danger);text-decoration:line-through;opacity:.75;}
.diff-new{color:var(--ok);font-weight:600;}
.empty-note{text-align:center;color:var(--ink-soft);padding:26px 10px;font-size:13px;}
.sync-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;z-index:200;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;max-width:88vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}
.feed-box{display:flex;gap:6px;align-items:center;background:var(--sand);border-radius:var(--radius-s);padding:8px 10px;font-size:12px;word-break:break-all;}
.feed-box input{flex:1;border:none;background:transparent;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--ink);}

.hamburger{display:none;}
.rail-backdrop{display:none;}
.week-view-hint{display:none;font-size:11px;color:var(--ink-soft);margin:-8px 0 8px;}
@media (max-width:820px){
  .topbar{flex-wrap:wrap;height:auto;min-height:60px;padding:8px 10px;gap:6px;}
  .topbar .spacer{flex-basis:100%;height:0;order:5;}
  .layout{grid-template-columns:1fr;}
  .rail{display:none;position:fixed;top:0;left:0;bottom:0;width:82vw;max-width:270px;z-index:41;box-shadow:var(--shadow);padding-top:70px;}
  .rail.open{display:block;}
  .rail-backdrop.open{display:block;position:fixed;inset:0;background:rgba(20,22,17,.4);z-index:40;}
  .hamburger{display:flex;order:-1;}
  .brand-mark{order:-1;flex:1;min-width:0;}
  .brand-mark span{display:none;}
  /* the person's name kept overflowing/wrapping the header on narrow
     screens — on mobile the chip shrinks to just the avatar, and moves
     to the front of the bar instead of trailing off the end. */
  .me-chip{order:-2;padding:0;background:transparent;}
  .me-chip .me-name{display:none;}
  .view-toggle{display:none;}
  .view-select{
    display:block; order:1; flex:1 1 auto; max-width:150px;
    padding:7px 10px; border-radius:999px; border:1.5px solid var(--sand-line);
    background:var(--paper-raised); color:var(--ink); font-weight:600; font-size:13px;
  }
  .main{padding:12px;padding-bottom:76px;}
  .main-head{gap:8px;}
  .main-head h2{font-size:15px;min-width:0;flex-basis:100%;order:3;}
  #newEventBtn span.btn-label{display:none;}
  .week-wrap{position:relative;scroll-snap-type:x proximity;}
  .week-head,.allday-row,.week-body{grid-template-columns:34px repeat(7,minmax(64px,1fr));}
  .day-col,.week-head-cell{scroll-snap-align:start;}
  .week-view-hint{display:block;}
  .profile-grid{grid-template-columns:1fr 1fr;}
  .day-cell{min-height:64px;padding:4px;}
  .day-num{font-size:11px;padding:1px 5px;}
  .evt-chip{font-size:9.5px;padding:1px 4px;}
  .evt-more{font-size:9px;}
  .sheet-head{padding:14px 14px 4px;}
  .sheet-body{padding:10px 14px 16px;}
  .sheet-foot{padding:12px 14px 16px;}
  .ev-tabs button{padding:7px 4px;font-size:11px;}
  .day-body,.day-allday-row{grid-template-columns:36px 1fr;}

  /* fixed bottom bar: menu / chat / (+) / alerts / more — replaces the
     rail's filter access on phones where there's no room for a sidebar */
  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--paper-raised); border-top:1px solid var(--sand-line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around; align-items:center;
  }
  .bottom-nav button{
    border:none;background:transparent;color:var(--ink-soft);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;
    padding:4px 8px;flex:1;
  }
  .bottom-nav button .icon{width:20px;height:20px;}
  .bottom-nav button.bn-add{
    background:var(--sage);color:#fff;border-radius:50%;width:48px;height:48px;
    flex:none;margin-top:-22px;box-shadow:var(--shadow);justify-content:center;
  }
  .bottom-nav button.bn-add .icon{width:24px;height:24px;}
}
@media (max-width:480px){
  .profile-grid{grid-template-columns:1fr;}
  .field-row{flex-direction:column;}
  .day-cell{min-height:52px;}
  .main-head h2{font-size:15px;}
  .week-head,.allday-row,.week-body{grid-template-columns:30px repeat(7,minmax(58px,1fr));}
  .day-body,.day-allday-row{grid-template-columns:30px 1fr;}
  .chat-msg{max-width:88%;}
  .bottom-nav button span{font-size:9px;}
}
@media (max-width:360px){
  .view-toggle button{padding:5px 7px;font-size:11px;}
  .nav-arrows .arrow-btn{width:28px;height:28px;}
  #todayBtn{padding:6px 10px!important;font-size:12px;}
  .main-head h2{font-size:13.5px;}
}