:root{
  /* Neutrals + accent aligned to reindeer-standards base.css (GitHub-dark palette) */
  --bg:#0d1117; --surface:#161b22; --surface-2:#1c232d; --border:#30363d; --text:#e6edf3; --text-muted:#8b949e;
  --accent:#f0883e; --accent-hover:#d47a30; --green:#3fb950; --red:#f85149;
  /* Functional time-of-day shading (app-specific) */
  --work:#1f6f43; --work2:#123f27; --waking:#5a4a1e; --waking2:#2f2810; --night:#20293a; --night2:#161d29;
  --home:#b98bff;
  --radius:12px; font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header{position:sticky;top:0;z-index:1000;display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(14,17,22,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);flex-wrap:wrap}
.brand{font-weight:700;font-size:18px;letter-spacing:.2px}.logo{font-size:20px}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search{position:relative}
#cityInput{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:20px;padding:8px 14px;width:200px;outline:none}
#cityInput:focus{border-color:var(--accent)}
.suggest{position:absolute;top:110%;left:0;right:0;list-style:none;margin:0;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;max-height:320px;overflow:auto;z-index:1001;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.suggest li{padding:8px 10px;border-radius:7px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.suggest li span{color:var(--text-muted);font-size:12px}
.suggest li:hover{background:var(--accent);color:#fff}
.suggest.hidden{display:none}
.chip{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:20px;padding:8px 14px;cursor:pointer;font-size:13px}
.chip:hover{border-color:var(--accent)}
.chip.small{padding:4px 10px;font-size:12px}
.sync{color:var(--text-muted);font-size:12px;min-width:0}
.user-name{color:var(--text);font-size:13px;white-space:nowrap;opacity:.85}
main{max-width:1000px;margin:0 auto;padding:16px}

.board{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);position:relative}
.row.work{background:linear-gradient(90deg,var(--work2),var(--surface));border-color:var(--work)}
.row.waking{background:linear-gradient(90deg,var(--waking2),var(--surface));border-color:#6b5a26}
.row.night{background:linear-gradient(90deg,var(--night2),var(--surface))}
.row.home{border-color:var(--home);box-shadow:inset 3px 0 0 var(--home)}
.row.dragging{opacity:.4}
.row[draggable=true]{cursor:grab}
.city{display:flex;flex-direction:column;gap:2px;min-width:0}
.city .fl{font-size:18px;margin-right:6px}
.city .nm{font-weight:600}.city .nm em{color:var(--home);font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-left:6px}
.city .meta{color:var(--text-muted);font-size:12px}
.time{text-align:right;display:flex;flex-direction:column;gap:1px;align-items:flex-end}
.time .t{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.time .rel{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.time .sun{color:var(--text-muted);font-size:11px}.time .wx{color:var(--text-muted);font-size:12px}
.rm{background:transparent;border:none;color:var(--text-muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.rm:hover{color:var(--red)}

.slider-wrap{margin:22px 0;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#sliderLabel{font-weight:600}
#timeSlider{width:100%;accent-color:var(--accent)}
.slider-scale{position:relative;height:16px;margin-top:2px}
.slider-scale span{position:absolute;transform:translateX(-50%);color:var(--text-muted);font-size:11px}

.overlap{margin:22px 0;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.overlap-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:8px;font-weight:600}
.overlap-head label{font-weight:400;color:var(--text-muted);font-size:13px;display:flex;gap:6px;align-items:center}
.overlap-head select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:4px 8px}
.overlap-result .ov-row{padding:6px 0;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}
.ov-when{color:var(--accent);margin-right:4px}
.overlap-result .none{color:var(--text-muted)}

.map-wrap{margin:22px 0}
#map{height:420px;border-radius:var(--radius);border:1px solid var(--border);background:#0b0e13}
.map-hint{color:var(--text-muted);font-size:12px;margin-top:6px;text-align:center}
.pin{transform:translate(-50%,-100%);background:var(--night);border:1px solid var(--border);border-radius:8px;padding:2px 6px;white-space:nowrap;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none}
.pin.work{background:var(--work);border-color:#2c9e5f}.pin.waking{background:#6b5a26}.pin.home{outline:2px solid var(--home)}
.pin b{display:block;font-size:11px}.pin span{font-size:11px;font-variant-numeric:tabular-nums}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--accent);color:#fff;padding:10px 18px;border-radius:20px;z-index:2000;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.toast.hidden{display:none}

/* login gate — covers everything until authenticated */
.gate{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.gate-card{text-align:center;padding:40px;max-width:340px}
.gate-logo{font-size:56px}
.gate-card h1{margin:8px 0 4px;font-size:28px}
.gate-card p{color:var(--text-muted);margin:0 0 24px}
.gate-btn{background:var(--accent);color:#fff;border:none;border-radius:24px;padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer}
.gate-btn:hover{filter:brightness(1.1)}
.gate-btn:disabled{opacity:.6;cursor:default}
body.authed .gate{display:none}
body:not(.authed) header,body:not(.authed) main{display:none}

/* set-as-home + remove actions */
.acts{display:flex;gap:2px;align-items:center}
.hm{background:transparent;border:none;color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
.hm:hover{color:var(--home)}

/* first-run home picker dialog */
.dialog{position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
.dialog.hidden{display:none}
.dialog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;width:min(420px,90vw);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dialog-card h2{margin:0 0 6px;font-size:22px}
.dialog-card p{color:var(--text-muted);margin:0 0 18px}
.dialog-card .search{position:relative}
.dialog-card #homeInput{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 14px;outline:none}
.dialog-card #homeInput:focus{border-color:var(--accent)}
.dialog-card #homeKeep{margin-top:16px}

/* visible keyboard focus (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* view toggle: board vs grid mode */
.date-chip{font-size:12px;color-scheme:dark;max-width:150px}
#gridWrap{display:none}
body.mode-grid #board,body.mode-grid .slider-wrap,body.mode-grid .overlap,body.mode-grid .map-wrap{display:none}
body.mode-grid #gridWrap{display:block}

/* grid view — horizontal all-day hour strip */
.grid-wrap{margin:8px 0}
.grid-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.grid{min-width:660px}
.grid-row{display:grid;grid-template-columns:130px repeat(24,1fr);align-items:stretch}
.grid-label{padding:7px 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:5px;align-items:center;border-right:1px solid var(--border)}
.grid-label span{font-weight:600}
.grid-row.home .grid-label span{color:var(--home)}
.grid-axis{position:sticky;top:0;z-index:1;background:var(--surface);border-bottom:1px solid var(--border)}
.grid-hcell{padding:6px 0;text-align:center;font-size:11px;color:var(--text-muted);user-select:none}
.grid-cell{padding:9px 0;text-align:center;font-size:11px;font-variant-numeric:tabular-nums;cursor:pointer;user-select:none;border-left:1px solid rgba(0,0,0,.18);touch-action:none}
.grid-cell.work{background:var(--work2);color:#cfe9d8}
.grid-cell.waking{background:var(--waking2);color:#e6d9b3}
.grid-cell.night{background:var(--night2);color:var(--text-muted)}
.grid-cell.now,.grid-hcell.now{box-shadow:inset 0 0 0 2px var(--accent);color:var(--text);font-weight:700}
.grid-cell.sel,.grid-hcell.sel{background:var(--accent);color:#fff}
.grid-readout{margin-top:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.grid-readout:empty{display:none}
.ro-head{font-weight:600;margin-bottom:6px}
.ro-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-variant-numeric:tabular-nums}
.ro-city{color:var(--text-muted)}
.mtg-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.mtg-bar.hidden{display:none}
.mtg-bar input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 12px;outline:none;font-size:13px}
.mtg-bar #mtgTitle{width:180px}
.mtg-bar #mtgEmails{flex:1;min-width:220px}
.mtg-bar input:focus{border-color:var(--accent)}
#addGcal{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;white-space:nowrap}
#addGcal:hover{filter:brightness(1.08)}

@media(max-width:640px){
  .row{grid-template-columns:1fr auto;gap:8px;padding:10px}
  .time .t{font-size:19px}
  #cityInput{width:150px}
  #map{height:320px}
  .brand{font-size:16px}
  .grid-row{grid-template-columns:92px repeat(24,1fr)}
  .grid-label{font-size:11px;padding:7px 6px}
}