/* =============================================================
   Hallway — wall-mounted glance dashboard
   Warm editorial dark theme. Vanilla CSS, Safari-safe.
   Palette: warm charcoal + amber + clay
   Type: Newsreader (editorial serif, clock/greeting) + Fira Sans
   ============================================================= */

:root{
  /* --- surfaces (cool, brighter) --- */
  --bg:        #0f1419;   /* cool near-black */
  --bg-top:    #141c23;   /* slightly lifted top */
  --bg-off:    #080b0e;   /* off-hours / greeting */
  --panel:     #172029;   /* card surface */
  --panel-2:   #1e2731;   /* inset (add row, art) */
  --hair:      rgba(238,243,247,0.10);
  --hair-2:    rgba(238,243,247,0.05);

  /* --- ink --- */
  --ink:       #eff4f8;   /* bright cool white */
  --ink-2:     #c6d3dd;   /* secondary */
  --ink-dim:   #8898a6;   /* muted labels */
  --ink-faint: #55636f;   /* faint / dividers / empty */

  /* --- utility accent: weather, today, progress, mic --- */
  --sky:       #3ecad6;
  --sky-soft:  #86dbe3;
  --sky-glow:  rgba(62,202,214,0.13);

  /* --- the couple: one hue each (share L/C, vary hue) --- */
  --p1:        #5aa2f2;   /* person A */
  --p1-soft:   #9cc5f7;
  --p2:        #f5897c;   /* person B */
  --p2-soft:   #f8ada3;

  /* --- type --- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- rhythm --- */
  --pad:   clamp(20px, 3.2vmin, 42px);
  --gap:   clamp(14px, 2.2vmin, 26px);
  --card-pad: clamp(20px, 2.8vmin, 32px);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
/* Lock the page: no whole-page scroll or rubber-band. Inner scrollers opt back in. */
html,body{
  height:100%; margin:0;
  position:fixed; inset:0; width:100%;
  overflow:hidden; overscroll-behavior:none;
  touch-action:none;
}
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.25;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  text-rendering:optimizeLegibility;
}
/* the only places a finger may scroll */
.list-card__items, .agenda__scroll, .ov-panel, .pl-grid{
  touch-action:pan-y; overscroll-behavior:contain;
}
button{ font:inherit; color:inherit; background:none; border:0; margin:0; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
input{ font:inherit; }
a{ color:var(--sky); text-decoration:none; }
a:hover{ color:var(--sky-soft); }
::-webkit-scrollbar{ width:0; height:0; }

/* warm ambient glow, top-left, behind clock */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120vmin 90vmin at 12% -8%, var(--sky-glow), transparent 60%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 42%);
  transition:opacity .8s ease;
}

/* =============================================================
   APP GRID
   ============================================================= */
.app{
  position:relative; z-index:1;
  height:100vh; width:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--gap);
  padding:calc(var(--pad) + env(safe-area-inset-top,0)) var(--pad) calc(var(--pad) - 4px);
}

/* =============================================================
   HEADER — clock (left) · weather (right)
   ============================================================= */
.head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:var(--gap);
  padding-bottom:clamp(6px,1.4vmin,16px);
}

/* --- clock / date --- */
.clock{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(96px, 18.5vmin, 210px);
  line-height:0.9;
  letter-spacing:-0.01em;
  color:var(--ink);
  font-feature-settings:"tnum" 1, "lnum" 1;
  font-variant-numeric:tabular-nums;
}
.date{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px, 3.4vmin, 38px);
  color:var(--ink-dim);
  margin-top:clamp(6px,1.4vmin,14px);
  letter-spacing:0.01em;
}

/* --- weather --- */
.wx{
  justify-self:end;
  text-align:right;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(6px,1.2vmin,12px);
  max-width:42vw;
}
.wx__main{
  display:flex; align-items:center; justify-content:flex-end;
  gap:clamp(12px,2.2vmin,26px);
}
.wx__icon{
  width:clamp(52px, 8.4vmin, 96px);
  height:clamp(52px, 8.4vmin, 96px);
  color:var(--sky);
  flex:none;
}
.wx__icon svg{ width:100%; height:100%; display:block; }
.wx__temp-wrap{ display:flex; flex-direction:column; align-items:flex-end; }
.wx__temp{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(64px, 12vmin, 128px);
  line-height:0.86;
  color:var(--sky);
  font-variant-numeric:tabular-nums;
}
.wx__feels{
  font-size:clamp(16px, 2.3vmin, 24px);
  color:var(--ink-dim);
  margin-top:6px; letter-spacing:0.01em;
}
.wx__umbrella{
  font-size:clamp(20px, 2.9vmin, 32px);
  font-weight:500;
  color:var(--ink-2);
  letter-spacing:0.005em;
  text-wrap:balance;
  display:flex; align-items:center; gap:.5em; justify-content:flex-end;
}
.wx__umbrella::before{
  content:""; width:.62em; height:.62em; border-radius:50%;
  background:var(--ink-faint); flex:none;
}
.wx__umbrella.is-wet{ color:var(--sky-soft); }
.wx__umbrella.is-wet::before{ background:var(--sky); box-shadow:0 0 14px rgba(62,202,214,0.5); }
.wx__umbrella.is-dry{ color:var(--ink-dim); }
.wx__range{
  font-size:clamp(16px, 2.3vmin, 24px);
  color:var(--ink-dim);
  display:flex; align-items:center; gap:.6em;
  font-variant-numeric:tabular-nums;
}
.wx__range .wx__sep{ color:var(--ink-faint); }
.wx__tom{ color:var(--ink-faint); }

/* =============================================================
   MIDDLE — two lists + this-week agenda
   ============================================================= */
.cols{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.24fr;   /* three people lists + a wider agenda */
  gap:var(--gap);
  min-height:0;
}

/* shared card treatment */
.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:var(--card-pad);
  display:flex; flex-direction:column;
  min-height:0;
  box-shadow:0 1px 0 rgba(255,255,255,0.02) inset, 0 10px 30px rgba(0,0,0,0.22);
}

/* ---- list card ---- */
.list-card{ --accent:var(--sky); overflow:hidden; }
.list-card[data-accent="amber"]{ --accent:var(--sky); }
.list-card[data-accent="clay"]{ --accent:var(--sky); }
/* slim top accent, the "colored top accent" — not a left border */
.list-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--accent);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  opacity:0.9;
}
.list-card__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
  padding-bottom:clamp(10px,1.6vmin,18px);
  margin-bottom:clamp(4px,1vmin,10px);
  border-bottom:1px solid var(--hair-2);
}
.list-card__title{
  font-size:clamp(22px, 3vmin, 31px);
  font-weight:600; letter-spacing:0.005em; color:var(--ink);
}
.list-card__count{
  font-size:clamp(15px, 2.1vmin, 21px);
  font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.list-card__items{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  margin:0 calc(var(--card-pad) * -0.4);
  padding:2px calc(var(--card-pad) * 0.4);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);
}

/* ---- item ---- */
.item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(12px,1.8vmin,18px);
  min-height:58px;
  padding:clamp(8px,1.3vmin,13px) 4px;
  border-bottom:1px solid var(--hair-2);
  cursor:pointer;
  transition:opacity .25s ease;
}
.item:last-child{ border-bottom:0; }
.item__check{
  width:clamp(28px,3.6vmin,34px); height:clamp(28px,3.6vmin,34px);
  border-radius:9px; border:2px solid var(--ink-faint);
  position:relative; flex:none;
  transition:background .18s ease, border-color .18s ease;
}
.item__text{
  font-size:clamp(19px, 2.7vmin, 27px);
  color:var(--ink-2); letter-spacing:0.003em;
  transition:color .25s ease;
}
.item--done{ opacity:0.5; }
.item--done .item__check{ background:var(--owner,var(--accent)); border-color:var(--owner,var(--accent)); }
.item--done .item__check::after{
  content:""; position:absolute;
  left:33%; top:14%; width:26%; height:52%;
  border:solid var(--bg); border-width:0 3px 3px 0;
  transform:rotate(43deg); box-sizing:border-box;
}
.item--done .item__text{ color:var(--ink-dim); text-decoration:line-through; text-decoration-color:var(--ink-faint); }

/* ---- add row ---- */
.list-card__add{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(12px,1.8vmin,18px);
  margin-top:clamp(10px,1.6vmin,16px);
  padding-top:clamp(10px,1.6vmin,16px);
  border-top:1px solid var(--hair);
}
.list-card__add .plus{
  width:clamp(28px,3.6vmin,34px); height:clamp(28px,3.6vmin,34px);
  border-radius:9px; border:2px dashed var(--ink-faint);
  color:var(--ink-dim); flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(20px,2.6vmin,26px); line-height:1;
}
.add-input{
  width:100%; min-height:44px;
  background:transparent; border:0; color:var(--ink);
  font-size:clamp(18px,2.5vmin,25px);
  -webkit-user-select:text; user-select:text;
  padding:6px 0;
}
.add-input::placeholder{ color:var(--ink-faint); }
.add-input:focus{ outline:none; }
.list-card__add:focus-within .plus{ border-style:solid; border-color:var(--accent); color:var(--accent); }

/* ---- owner chip: whose item / who added it ---- */
.owner-chip{
  width:clamp(24px,3.1vmin,31px); height:clamp(24px,3.1vmin,31px);
  border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(12px,1.7vmin,15px); font-weight:700;
  color:var(--bg); background:var(--sky);
}
.agenda-event .owner-chip{ align-self:center; }

/* ---- add-row: who's adding? ---- */
.add-who{ display:flex; gap:8px; align-items:center; }
.who-chip{
  width:clamp(38px,4.6vmin,46px); height:clamp(38px,4.6vmin,46px);
  border-radius:50%; border:2px solid var(--hair);
  color:var(--ink-dim); font-weight:700; font-size:clamp(14px,1.9vmin,17px);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.who-chip.is-active{ color:var(--bg); }

/* ---- empty state (editorial, calm) ---- */
.empty{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(19px,2.6vmin,26px);
  color:var(--ink-faint);
  padding:clamp(20px,3vmin,34px) 4px;
  line-height:1.4; text-wrap:pretty;
}

/* =============================================================
   AGENDA — this week
   ============================================================= */
.agenda__label{
  font-size:clamp(13px,1.7vmin,16px);
  font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-dim);
  padding-bottom:clamp(10px,1.6vmin,18px);
  margin-bottom:clamp(6px,1.2vmin,12px);
  border-bottom:1px solid var(--hair-2);
}
.agenda__scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.agenda-day{ padding:clamp(10px,1.6vmin,16px) 0; border-bottom:1px solid var(--hair-2); }
.agenda-day:last-child{ border-bottom:0; }
.agenda-day__head{
  display:flex; align-items:baseline; gap:.6em;
  margin-bottom:clamp(6px,1vmin,10px);
}
.agenda-day__name{
  font-size:clamp(18px,2.5vmin,25px); font-weight:600; color:var(--ink-2);
}
.agenda-day__date{ font-size:clamp(14px,1.9vmin,19px); color:var(--ink-faint); }
.agenda-day--today .agenda-day__name{ color:var(--sky); }
.agenda-day--today .agenda-day__date{ color:var(--sky-soft); opacity:.7; }

.agenda-event{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:clamp(12px,1.8vmin,20px);
  padding:clamp(5px,0.9vmin,9px) 0;
}
.agenda-event__time{
  font-size:clamp(16px,2.2vmin,23px); font-weight:600; color:var(--ink-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.agenda-day--today .agenda-event__time{ color:var(--sky); }
.agenda-event__body{ display:flex; flex-direction:column; }
.agenda-event__title{ font-size:clamp(18px,2.5vmin,25px); color:var(--ink); }
.agenda-event__who{ font-size:clamp(14px,1.9vmin,19px); color:var(--ink-faint); margin-top:2px; }
.agenda-event--allday .agenda-event__time{ font-size:clamp(13px,1.7vmin,17px); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }

/* =============================================================
   FOOTER — now playing + mic
   ============================================================= */
.foot{
  display:grid; grid-template-columns:1fr auto; gap:var(--gap);
  align-items:stretch;
}
.np{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(14px,2.4vmin,26px);
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:clamp(12px,1.8vmin,18px) clamp(16px,2.2vmin,24px);
  box-shadow:0 10px 30px rgba(0,0,0,0.22);
}
.np__art{
  width:clamp(56px,8.2vmin,86px); height:clamp(56px,8.2vmin,86px);
  border-radius:var(--r-md); flex:none; overflow:hidden;
  background:var(--panel-2);
  position:relative;
}
.np__art img{ width:100%; height:100%; object-fit:cover; display:block; }
/* striped placeholder when no art */
.np__art.is-empty{
  background:
    repeating-linear-gradient(135deg, #232c34 0 10px, #1b232a 10px 20px);
}
.np__art.is-empty::after{
  content:"no art"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; letter-spacing:0.06em; color:var(--ink-faint);
}
.np__meta{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.np__track{
  font-size:clamp(19px,2.6vmin,26px); font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.np__artist{
  font-size:clamp(15px,2.1vmin,21px); color:var(--ink-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.np__progress{
  height:4px; border-radius:2px; background:var(--hair);
  margin-top:6px; overflow:hidden; max-width:60%;
}
.np__progress-fill{ height:100%; background:var(--sky); border-radius:2px; width:0%; transition:width .4s linear; }
.np__controls{ display:flex; align-items:center; gap:clamp(6px,1.2vmin,12px); }
.np__btn{
  width:clamp(52px,7vmin,64px); height:clamp(52px,7vmin,64px);
  border-radius:50%; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease, transform .1s ease;
}
.np__btn svg{ width:44%; height:44%; }
.np__btn:active{ transform:scale(.92); background:var(--panel-2); }
.np__btn--play{ background:var(--ink); color:var(--bg); width:clamp(58px,7.8vmin,72px); height:clamp(58px,7.8vmin,72px); }
.np__btn--play:active{ background:var(--sky-soft); }
.np__btn--play svg{ width:40%; height:40%; }
.np__btn--list svg{ width:50%; height:50%; }
.np.is-idle{ opacity:0.62; }
.np.is-idle .np__progress{ visibility:hidden; }

/* mic */
.mic{
  width:clamp(72px,10vmin,104px);
  border-radius:var(--r-lg);
  background:var(--panel); border:1px solid var(--hair);
  color:var(--sky);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.22);
  transition:background .2s ease, color .2s ease, transform .1s ease;
}
.mic svg{ width:44%; height:44%; }
.mic:active{ transform:scale(.95); }
.mic--listening{ background:var(--sky); color:var(--bg); border-color:var(--sky); animation:micPulse 1.9s infinite; }
@keyframes micPulse{
  0%{ box-shadow:0 0 0 0 rgba(62,202,214,.45); }
  70%{ box-shadow:0 0 0 24px rgba(62,202,214,0); }
  100%{ box-shadow:0 0 0 0 rgba(62,202,214,0); }
}

/* =============================================================
   OFF-HOURS — calm near-black night face
   ============================================================= */
body.off{ background:var(--bg-off); }
body.off::before{ opacity:0.25; }
.off .card,
.off .np,
.off .mic{ background:transparent; border-color:transparent; box-shadow:none; }
.off .cols{ opacity:0.34; transition:opacity .8s ease; }
.off .foot{ opacity:0.28; transition:opacity .8s ease; }
.off .list-card::before{ opacity:0.4; }
.off .clock{ color:#a9bcc9; }
.off .date{ color:var(--ink-faint); }
.off .wx__temp{ color:#7fb3bf; }
.off .wx__umbrella{ color:var(--ink-dim); }
.app{ transition:padding .4s ease; }

/* =============================================================
   GOOD MORNING — full-screen greeting (3 variants)
   ============================================================= */
.greeting{
  position:fixed; inset:0; z-index:50;
  background:
    radial-gradient(130vmin 100vmin at 20% -10%, var(--sky-glow), transparent 55%),
    var(--bg-off);
  color:var(--ink);
  padding:clamp(40px,7vmin,110px);
  display:flex;
  opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility .7s ease;
}
.greeting.is-on{ opacity:1; visibility:visible; }
.greeting__inner{ width:100%; display:flex; flex-direction:column; }
.greeting__eyebrow{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(22px,3.4vmin,40px); color:var(--sky);
  margin:0;
}
.greeting__hello{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(64px,11.5vmin,148px); line-height:0.98;
  letter-spacing:-0.01em; margin:0.12em 0 0; color:var(--ink);
  text-wrap:balance;
}
.greeting__hello .greeting__name{ font-style:normal; color:var(--sky-soft); }
.greeting__brief{ margin-top:clamp(20px,3vmin,44px); display:flex; flex-direction:column; gap:clamp(10px,1.6vmin,18px); }
.greeting__wx{ display:flex; align-items:center; gap:.5em; font-size:clamp(28px,4vmin,52px); color:var(--ink); }
.greeting__wx-icon{ width:1.05em; height:1.05em; color:var(--sky); flex:none; }
.greeting__wx-icon svg{ width:100%; height:100%; }
.greeting__wx-temp{ font-family:var(--serif); font-weight:500; }
.greeting__wx-cond{ color:var(--ink-dim); }
.greeting__umb{ font-size:clamp(22px,3vmin,38px); color:var(--sky-soft); margin:0; font-weight:500; text-wrap:balance; }
.greeting__umb.is-dry{ color:var(--ink-dim); }
.greeting__first{ font-size:clamp(20px,2.7vmin,32px); color:var(--ink-2); margin:0; }
.greeting__first b{ color:var(--sky); font-weight:600; }
.greeting__hint{
  position:absolute; left:0; right:0; bottom:clamp(24px,4vmin,48px);
  text-align:center; color:var(--ink-faint);
  font-size:clamp(14px,1.9vmin,19px); letter-spacing:0.04em;
}

/* Variant 1 — centered editorial */
.greeting[data-variant="1"]{ align-items:center; text-align:center; }
.greeting[data-variant="1"] .greeting__inner{ align-items:center; max-width:20em; margin:0 auto; }
.greeting[data-variant="1"] .greeting__brief{ align-items:center; }
.greeting[data-variant="1"] .greeting__brief{
  border-top:1px solid var(--hair); padding-top:clamp(20px,3vmin,40px); margin-top:clamp(26px,4vmin,52px);
}

/* Variant 2 — morning almanac (masthead + two columns) */
.greeting[data-variant="2"]{ align-items:stretch; text-align:left; }
.greeting[data-variant="2"] .greeting__inner{ justify-content:flex-end; }
.greeting[data-variant="2"] .greeting__eyebrow{
  order:-1; align-self:stretch; font-style:normal; color:var(--ink-dim);
  font-family:var(--sans); font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  font-size:clamp(13px,1.8vmin,18px);
  border-bottom:1px solid var(--hair); padding-bottom:clamp(14px,2vmin,22px);
  display:flex; justify-content:space-between;
}
.greeting[data-variant="2"] .greeting__body2{
  display:grid; grid-template-columns:1.25fr 1fr; align-items:end; gap:clamp(24px,4vmin,72px);
  margin-top:auto; padding-top:clamp(24px,4vmin,60px);
}
.greeting[data-variant="2"] .greeting__hello{ margin:0; }
.greeting[data-variant="2"] .greeting__brief{
  margin-top:0; padding-bottom:clamp(6px,1vmin,12px);
  border-left:1px solid var(--hair); padding-left:clamp(20px,3vmin,40px);
}

/* Variant 3 — weather-first hero */
.greeting[data-variant="3"]{ align-items:stretch; text-align:left; }
.greeting[data-variant="3"] .greeting__inner{ height:100%; }
.greeting[data-variant="3"] .greeting__hello{ font-size:clamp(40px,6.5vmin,88px); margin:0; }
.greeting[data-variant="3"] .greeting__eyebrow{ order:-1; }
.greeting[data-variant="3"] .greeting__hero{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
}
.greeting[data-variant="3"] .greeting__wx{ font-size:clamp(64px,13vmin,168px); align-items:baseline; }
.greeting[data-variant="3"] .greeting__wx-icon{ width:clamp(64px,11vmin,150px); height:clamp(64px,11vmin,150px); align-self:center; }
.greeting[data-variant="3"] .greeting__umb{ font-size:clamp(24px,3.6vmin,46px); margin-top:.2em; }
.greeting[data-variant="3"] .greeting__first{
  border-top:1px solid var(--hair); padding-top:clamp(16px,2.4vmin,28px);
}

/* body lock while greeting is up */
body.greeting-active .app{ visibility:hidden; }

/* narrow / portrait fallback so nothing collides on odd viewports */
@media (max-aspect-ratio:1/1){
  .cols{ grid-template-columns:1fr 1fr 1fr; }
  .agenda{ grid-column:1 / -1; }
}

/* =============================================================
   OVERLAYS (setup / playlists / ask) — match the design system
   ============================================================= */
.ov{
  position:fixed; inset:0; z-index:60;
  background:rgba(6,9,12,0.72);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,4vmin,60px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.ov.is-on{ opacity:1; visibility:visible; }
.ov-panel{
  background:var(--panel); border:1px solid var(--hair);
  border-radius:var(--r-lg); padding:clamp(22px,3vmin,40px);
  width:min(78vw,860px); max-height:84vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.ov-title{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(28px,4vmin,44px); margin:0 0 clamp(10px,1.6vmin,18px); color:var(--ink);
}
.ov-note{ font-size:clamp(15px,2vmin,20px); color:var(--ink-dim); line-height:1.5; margin:0 0 clamp(14px,2vmin,22px); }
.ov-note b{ color:var(--ink-2); }
.code{
  display:block; background:var(--panel-2); border-radius:var(--r-sm);
  padding:clamp(10px,1.4vmin,16px); margin-bottom:clamp(16px,2.2vmin,24px);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:clamp(14px,1.9vmin,19px);
  color:var(--sky); word-break:break-all;
}
.field{ display:flex; flex-direction:column; gap:.5vmin; margin-bottom:clamp(14px,2vmin,20px); }
.field label{ font-size:clamp(14px,1.9vmin,18px); color:var(--ink-dim); }
.field input{
  background:var(--panel-2); border:1px solid var(--hair); border-radius:var(--r-sm);
  color:var(--ink); font-size:clamp(17px,2.3vmin,22px); padding:clamp(10px,1.4vmin,15px);
  -webkit-user-select:text; user-select:text; outline:none;
}
.field input:focus{ border-color:var(--sky); }
.ov-msg{ font-size:clamp(15px,2vmin,20px); color:var(--ink-dim); min-height:1.4em; margin-bottom:clamp(12px,1.8vmin,18px); }
.ov-actions{ display:flex; gap:clamp(8px,1.4vmin,14px); flex-wrap:wrap; align-items:center; margin-top:clamp(8px,1.4vmin,16px); }
.btn-primary, .ov-close{
  border-radius:var(--r-md); font-size:clamp(16px,2.2vmin,22px);
  padding:clamp(11px,1.6vmin,16px) clamp(18px,2.6vmin,28px);
  border:1px solid var(--hair); color:var(--ink);
}
.btn-primary{ background:var(--sky); color:var(--bg); border-color:var(--sky); font-weight:600; }
.btn-primary:active{ transform:scale(.97); }
.ov-close{ margin-left:auto; background:var(--panel-2); color:var(--ink-2); }

/* playlists grid */
.pl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vmin,18px); }
.pl{
  background:var(--panel-2); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:clamp(10px,1.4vmin,16px); color:var(--ink-2);
  display:flex; flex-direction:column; gap:1vmin; align-items:center;
  font-size:clamp(14px,1.9vmin,18px); text-align:center;
}
.pl img{ width:100%; aspect-ratio:1; border-radius:var(--r-sm); object-fit:cover; }
.pl:active{ transform:scale(.97); border-color:var(--sky); }

/* ask (voice) */
.ask-panel{ text-align:center; }
.ask-status{ font-size:clamp(19px,2.6vmin,26px); color:var(--sky); margin-bottom:clamp(10px,1.6vmin,18px); }
.ask-q{ font-size:clamp(18px,2.4vmin,24px); color:var(--ink-dim); margin-bottom:clamp(12px,2vmin,20px); font-family:var(--serif); font-style:italic; }
.ask-a{ font-size:clamp(24px,3.2vmin,38px); color:var(--ink); line-height:1.4; min-height:1.4em; }
.ask-actions{ justify-content:center; }
.ask-actions .ov-close{ margin-left:0; }

/* icloud person rows */
.icloud-person{ background:var(--panel-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:clamp(14px,2vmin,20px); margin-bottom:clamp(12px,1.8vmin,18px); }
.icloud-head{ display:flex; align-items:center; gap:.7em; font-size:clamp(18px,2.5vmin,24px); font-weight:600; margin-bottom:clamp(8px,1.4vmin,14px); }
.icloud-head .dot{ width:.7em; height:.7em; border-radius:50%; flex:none; }
.icloud-head .status{ margin-left:auto; font-size:clamp(14px,1.9vmin,18px); font-weight:400; color:var(--ink-dim); }
.icloud-head .status.on{ color:var(--sky); }
.icloud-person .field input{ background:var(--panel); }
.row-actions{ display:flex; gap:.8vmin; margin-top:.4vmin; }
.row-actions button{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-sm); color:var(--ink-2); font-size:clamp(15px,2vmin,19px); padding:clamp(9px,1.3vmin,13px) clamp(14px,2vmin,20px); }
.row-actions .ic-save{ background:var(--sky); color:var(--bg); border-color:var(--sky); font-weight:600; }
.ic-msg{ font-size:clamp(14px,1.9vmin,18px); color:var(--ink-dim); min-height:1.3em; margin:.5vmin 0; }

/* off-hours: keep overlays crisp even while body dims */
.off .ov{ opacity:1; }

/* =============================================================
   SURPRISE — full-screen note left from the remote app
   ============================================================= */
.surprise{
  position:fixed; inset:0; z-index:120;
  background:
    radial-gradient(130vmin 100vmin at 50% -10%, var(--sky-glow), transparent 55%),
    var(--bg-off);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(30px,6vmin,90px);
  opacity:0; visibility:hidden;
  transition:opacity .6s ease, visibility .6s ease;
}
.surprise.is-on{ opacity:1; visibility:visible; }
.surprise__from{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,3.2vmin,36px); color:var(--sky);
  margin:0 0 clamp(14px,2.4vmin,28px);
}
.surprise__text{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(44px,8.5vmin,110px); line-height:1.12;
  color:var(--ink); margin:0; text-wrap:balance; max-width:88vw;
  overflow-wrap:break-word;
}
.surprise__hint{
  position:absolute; left:0; right:0; bottom:clamp(24px,4vmin,48px);
  text-align:center; color:var(--ink-faint);
  font-size:clamp(14px,1.9vmin,19px); letter-spacing:0.04em;
}

/* stacked personal lists (Jack + Bryony share a column) */
.list-stack{ display:flex; flex-direction:column; gap:var(--gap); min-height:0; }
.list-stack .list-card{ flex:1 1 0; min-height:0; }

/* =============================================================
   DENSITY PASS — smaller lists/agenda/footer so nothing scrolls.
   Clock + weather keep their editorial scale.
   ============================================================= */
.app{ gap:clamp(10px,1.6vmin,18px); padding:calc(clamp(14px,2.2vmin,30px) + env(safe-area-inset-top,0)) clamp(14px,2.2vmin,30px) clamp(10px,1.6vmin,22px); }
.head{ padding-bottom:clamp(2px,0.8vmin,8px); }

.card{ padding:clamp(12px,1.8vmin,20px); border-radius:16px; }
.list-card::before{ border-radius:16px 16px 0 0; }

.list-card__head{ padding-bottom:clamp(6px,1vmin,10px); margin-bottom:clamp(2px,0.6vmin,6px); }
.list-card__title{ font-size:clamp(16px,2.2vmin,22px); }
.list-card__count{ font-size:clamp(12px,1.6vmin,16px); }

.item{ min-height:40px; padding:clamp(4px,0.7vmin,7px) 2px; gap:clamp(8px,1.3vmin,13px); }
.item__check{ width:clamp(20px,2.6vmin,26px); height:clamp(20px,2.6vmin,26px); border-radius:7px; }
.item__text{ font-size:clamp(14px,1.9vmin,18px); }

.list-card__add{ gap:clamp(8px,1.3vmin,13px); margin-top:clamp(5px,0.9vmin,9px); padding-top:clamp(5px,0.9vmin,9px); }
.list-card__add .plus{ width:clamp(20px,2.6vmin,26px); height:clamp(20px,2.6vmin,26px); border-radius:7px; font-size:clamp(14px,1.9vmin,18px); }
.add-input{ font-size:clamp(13px,1.8vmin,17px); min-height:34px; padding:3px 0; }
.empty{ font-size:clamp(14px,1.9vmin,18px); padding:clamp(10px,1.6vmin,18px) 2px; }

.agenda__label{ font-size:clamp(11px,1.4vmin,13px); padding-bottom:clamp(6px,1vmin,10px); margin-bottom:clamp(3px,0.6vmin,6px); }
.agenda-day{ padding:clamp(6px,1vmin,10px) 0; }
.agenda-day__head{ margin-bottom:clamp(3px,0.6vmin,6px); }
.agenda-day__name{ font-size:clamp(14px,1.9vmin,18px); }
.agenda-day__date{ font-size:clamp(11px,1.5vmin,14px); }
.agenda-event{ padding:clamp(2px,0.5vmin,5px) 0; gap:clamp(8px,1.3vmin,14px); }
.agenda-event__time{ font-size:clamp(13px,1.7vmin,16px); }
.agenda-event__title{ font-size:clamp(14px,1.9vmin,18px); }
.agenda-event__who{ font-size:clamp(11px,1.5vmin,14px); }
.owner-chip{ width:clamp(18px,2.3vmin,23px); height:clamp(18px,2.3vmin,23px); font-size:clamp(10px,1.3vmin,12px); }

.np{ padding:clamp(8px,1.2vmin,13px) clamp(12px,1.7vmin,18px); gap:clamp(10px,1.7vmin,18px); }
.np__art{ width:clamp(44px,6.2vmin,62px); height:clamp(44px,6.2vmin,62px); border-radius:12px; }
.np__track{ font-size:clamp(15px,2vmin,20px); }
.np__artist{ font-size:clamp(12px,1.6vmin,16px); }
.np__btn{ width:clamp(42px,5.6vmin,52px); height:clamp(42px,5.6vmin,52px); }
.np__btn--play{ width:clamp(48px,6.4vmin,60px); height:clamp(48px,6.4vmin,60px); }
.mic{ width:clamp(56px,8vmin,84px); border-radius:16px; }

/* stacked (personal) cards run tighter still; shorter bottom fade everywhere */
.list-card__items{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 12px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 12px),transparent 100%);
}
.list-stack .list-card{ padding:clamp(9px,1.3vmin,14px) clamp(11px,1.6vmin,16px) clamp(7px,1vmin,11px); }
.list-stack .list-card__head{ padding-bottom:4px; margin-bottom:2px; }
.list-stack .item{ min-height:33px; padding:2px 2px; }
.list-stack .list-card__add{ margin-top:3px; padding-top:4px; }
.list-stack .add-input{ min-height:28px; }

/* =============================================================
   WARM EDITORIAL RESKIN — espresso surfaces, cream ink, brass
   accent. Candlelit, classy; teal is gone.
   ============================================================= */
:root{
  --bg:        #16120c;
  --bg-top:    #1d1810;
  --bg-off:    #0c0a06;
  --panel:     #201a12;
  --panel-2:   #2a2318;
  --hair:      rgba(243,234,217,0.10);
  --hair-2:    rgba(243,234,217,0.05);

  --ink:       #f3ead9;
  --ink-2:     #d6c9b2;
  --ink-dim:   #a08f75;
  --ink-faint: #66594a;

  --sky:       #d8a44e;   /* brass */
  --sky-soft:  #eac488;   /* champagne */
  --sky-glow:  rgba(216,164,78,0.13);

  --p1:        #86a9d8;   /* dusty blue */
  --p1-soft:   #b3cbe8;
  --p2:        #dd8e73;   /* terracotta */
  --p2-soft:   #edb5a2;
}

/* warm re-tints of the few hardcoded cool values */
.wx__umbrella.is-wet::before{ background:var(--sky); box-shadow:0 0 14px rgba(216,164,78,0.55); }
.np__art.is-empty{ background:repeating-linear-gradient(135deg, #2b241a 0 10px, #221c13 10px 20px); }
.np__btn--play:active{ background:var(--sky-soft); }
.mic--listening{ animation:micPulseWarm 1.9s infinite; }
@keyframes micPulseWarm{
  0%{ box-shadow:0 0 0 0 rgba(216,164,78,.45); }
  70%{ box-shadow:0 0 0 24px rgba(216,164,78,0); }
  100%{ box-shadow:0 0 0 0 rgba(216,164,78,0); }
}
.off .clock{ color:#c6b491; }
.off .date{ color:var(--ink-faint); }
.off .wx__temp{ color:#a98d55; }
#off-clock{ color:#3a3226; }

/* editorial touches */
.list-card__title{
  font-family:var(--serif); font-weight:500; font-style:normal;
  font-size:clamp(18px,2.5vmin,25px); letter-spacing:0.015em;
}
.agenda__label{ color:var(--sky); opacity:.85; }
.agenda-day__name{ font-family:var(--serif); font-weight:500; font-size:clamp(15px,2.1vmin,20px); }
.list-card__count{ font-weight:500; }
.card{ box-shadow:0 1px 0 rgba(255,255,255,0.015) inset, 0 12px 34px rgba(0,0,0,0.3); }
.np__progress-fill{ background:var(--sky); }

/* keyboard shift smoothing */
.app{ transition:transform .25s ease, padding .4s ease; }