/* --------------------------------------------------------------------------
   The palette and type are design/folded-week.html's, carried over rather than
   re-picked: concrete neutrals with a green-grey bias, a slate blue for
   things that are on your calendar, and one amber reserved entirely for
   travel and leave-by. That reservation is the point -- the amber never
   decorates anything, so anywhere it appears is somewhere you have to move.

   System faces here, not the prototype's Google Fonts: this is an installed
   app that has to open on a train.
   -------------------------------------------------------------------------- */

:root {
  --ground:#EDEEEC; --surface:#F7F8F6; --sunken:#E4E6E2;
  --ink:#1A1D1F; --ink-2:#4A5257; --ink-3:#7A8288;
  --rule:#CDD0CB; --rule-soft:#DEE0DC;
  --event:#3C5A73; --event-ink:#F2F5F7;
  --travel:#B7690B; --travel-fill:#F7E9D2; --travel-rule:#E0B472;
  --free-ink:#79817F;
  --conflict:#A32B36; --conflict-fill:#F6E3E4;
  --today:#3C5A73;
  --shadow:0 1px 2px rgba(26,29,31,.10), 0 10px 30px rgba(26,29,31,.09);
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#16181A; --surface:#1E2124; --sunken:#242729;
    --ink:#EDEEEC; --ink-2:#B0B7BA; --ink-3:#828A8E;
    --rule:#33383B; --rule-soft:#282C2F;
    --event:#7FA8C6; --event-ink:#101619;
    --travel:#E8A73F; --travel-fill:#3A2E18; --travel-rule:#6E5522;
    --free-ink:#868E92;
    --conflict:#E8737D; --conflict-fill:#3A1F22;
    --today:#7FA8C6;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* The UA stylesheet's [hidden]{display:none} is a bare attribute selector, so
   any class rule that sets display beats it -- .btn and .row both do, and both
   are toggled with .hidden. Without this the Connect button and the sync row
   show while signed out, which is where this was found. */
[hidden] { display:none !important; }
html, body { height:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}

/* ── view stack ─────────────────────────────────────────────────────────── */
.view { position:fixed; inset:0; display:flex; flex-direction:column; }
.view--home { overflow-y:auto; padding:calc(var(--safe-t) + 22px) 18px calc(var(--safe-b) + 40px); gap:18px; }
.view--schedule {
  background:var(--surface); transform:translateX(0);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.view--schedule.is-entering { transform:translateX(100%); }
@media (prefers-reduced-motion: reduce) { .view--schedule { transition:none; } }

/* ── home ───────────────────────────────────────────────────────────────── */
.home-head { display:flex; flex-direction:column; gap:2px; }
.home-title { margin:0; font-size:30px; font-weight:700; letter-spacing:-.022em; }
.home-build { margin:0; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.03em; }

.open-schedule {
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 16px 16px 18px; background:var(--surface);
  border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow);
  font:inherit; color:inherit; cursor:pointer;
}
.open-schedule:active { background:var(--sunken); }
.open-schedule-main { flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.open-schedule-label { font-size:19px; font-weight:600; letter-spacing:-.012em; }
.open-schedule-sub { font-size:13.5px; color:var(--ink-3); }
.chevron { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.panel {
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  padding:4px 16px 14px; display:flex; flex-direction:column;
}
.panel-title {
  margin:14px 0 8px; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.row { display:flex; align-items:center; gap:12px; padding:9px 0; }
.row + .row { border-top:1px solid var(--rule-soft); }
.row--actions { flex-direction:column; align-items:stretch; gap:8px; }
.row-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.row-label { font-size:15.5px; font-weight:500; overflow-wrap:anywhere; }
.row-sub { font-size:13px; color:var(--ink-3); overflow-wrap:anywhere; }
.row-sub.is-warn { color:var(--conflict); }
.row-sub.is-travel { color:var(--travel); }

.btn {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border:1px solid var(--rule); border-radius:8px;
  background:var(--ground); color:var(--ink); font:inherit; font-size:14.5px;
  font-weight:500; text-decoration:none; cursor:pointer;
}
.btn:active { background:var(--sunken); }
.btn--wide { width:100%; padding:11px 14px; }
.btn--danger { color:var(--conflict); border-color:var(--conflict); }

.cal-list { display:flex; flex-direction:column; padding:2px 0 6px; }
.cal { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14.5px; }
.cal input { width:19px; height:19px; accent-color:var(--event); flex:0 0 auto; }
.cal span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.field { display:flex; flex-direction:column; gap:5px; padding:10px 0; }
.field + .field, .field--pair { border-top:1px solid var(--rule-soft); }
.field-label { font-size:14px; font-weight:500; display:flex; flex-direction:column; gap:1px; }
.field-label em { font-style:normal; font-weight:400; font-size:12.5px; color:var(--ink-3); }
.field-input {
  width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:8px;
  background:var(--ground); color:var(--ink); font:inherit; font-size:16px;
}
.field-input:focus-visible { outline:2px solid var(--event); outline-offset:1px; }
.field-input--num { width:96px; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.pair { display:flex; align-items:center; gap:10px; }
.pair-sep { font-size:14px; color:var(--ink-3); }

.footnote {
  margin:0; padding:0 2px; font-family:var(--mono); font-size:11px;
  line-height:1.6; color:var(--ink-3); letter-spacing:.02em;
}

/* ── schedule ───────────────────────────────────────────────────────────── */
.sched-head {
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:calc(var(--safe-t) + 10px) 14px 10px;
  border-bottom:1px solid var(--rule-soft); background:var(--surface);
}
.sched-head-text { flex:1 1 auto; min-width:0; }
.sched-month { font-size:17px; font-weight:600; letter-spacing:-.012em; }
.sched-range { font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.03em; }
.back, .chip {
  flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:10px; background:var(--ground);
  cursor:pointer; padding:0;
}
.back:active, .chip:active { background:var(--sunken); }
.back svg, .chip svg { width:21px; height:21px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chip.is-spinning svg { animation:spin 900ms linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chip.is-spinning svg { animation:none; } }

.sched-scroll { flex:1 1 auto; overflow-y:auto; padding-bottom:calc(var(--safe-b) + 28px); }

.day { border-bottom:1px solid var(--rule-soft); }
.dayhead {
  width:100%; display:grid; grid-template-columns:52px minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:11px 16px; background:none;
  border:none; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.dayhead:active { background:var(--sunken); }
.dayhead:focus-visible { outline:2px solid var(--travel); outline-offset:-2px; }
.dow { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); line-height:1.3; }
.dom { display:block; font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.todaytag { display:block; font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--today); }
.day.is-today .dow, .day.is-today .dom { color:var(--today); }
.count { font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.04em; white-space:nowrap; }

.pips { position:relative; height:16px; background:var(--sunken); border-radius:2px; overflow:hidden; }
.pip { position:absolute; top:0; bottom:0; background:var(--event); border-radius:1px; }
.pip.is-allday { opacity:.4; }
.pip.is-clash { background:var(--conflict); }
.pip.is-travel { background:var(--travel); border-radius:0; }
.day.is-open .pips { display:none; }
.day.is-open .dayhead { background:var(--sunken); border-bottom:1px solid var(--rule-soft); }
.openlabel { display:none; font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }
.day.is-open .openlabel { display:block; }

.rows { display:none; flex-direction:column; }
.day.is-open .rows { display:flex; }

.rw { display:grid; grid-template-columns:66px minmax(0,1fr); gap:11px; padding:0 16px; border-bottom:1px solid var(--rule-soft); align-items:center; }
.rw .when { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* Free time. Height is set inline from the compression curve in app.js -- see
   GAP_ALPHA there, and design/folded-week.html for how 0.41 was chosen. */
.rw--free { background:var(--sunken); }
.rw--free .label { font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--free-ink); }
.rw--free .label i { font-style:normal; opacity:.6; margin-left:7px; }

.rw--event { padding-top:9px; padding-bottom:10px; align-items:baseline; }
.rw--event .what { font-weight:600; font-size:14.5px; line-height:1.3; letter-spacing:-.005em; }
.rw--event .where { font-size:11.5px; color:var(--ink-3); line-height:1.4; margin-top:1px; }
.rw--event.is-clash { background:var(--conflict-fill); }
.rw--event.is-clash .what { color:var(--conflict); }
.rw--event.is-clash .where { color:var(--conflict); }

.rw--travel {
  background:var(--travel-fill); padding-top:8px; padding-bottom:9px; align-items:baseline;
  border-top:1px dashed var(--travel-rule); border-bottom:1px dashed var(--travel-rule);
}
.rw--travel .when { color:var(--travel); }
.rw--travel .lede { font-family:var(--mono); font-size:11px; color:var(--travel); letter-spacing:.03em; display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.rw--travel .lede b { font-weight:500; text-transform:uppercase; letter-spacing:.09em; font-size:9.5px; }
.rw--travel .via { font-family:var(--mono); font-size:10px; color:var(--travel); opacity:.8; margin-top:4px; }
.rw--travel.is-conflict { background:var(--conflict-fill); border-color:var(--conflict); }
.rw--travel.is-conflict .when, .rw--travel.is-conflict .lede, .rw--travel.is-conflict .via { color:var(--conflict); }
.rw--travel.is-pending { opacity:.72; }

.allday-strip { display:flex; flex-direction:column; gap:5px; padding:10px 16px; background:var(--sunken); }
.chip-allday { display:flex; gap:8px; align-items:baseline; font-size:13px; font-weight:600; border-left:2px solid var(--event); padding:3px 0 3px 8px; line-height:1.3; }
.chip-allday span { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:400; }

.empty-note { padding:13px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-3); background:var(--sunken); }

.sched-empty { padding:44px 24px; text-align:center; color:var(--ink-3); font-size:14.5px; line-height:1.6; }