:root{
  --ink:#0F0B14;
  --ink2:#171021;
  --card:rgba(255,255,255,.045);
  --card2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.18);
  --cream:#F6EFE8;
  --muted:#A497B0;
  --rose:#EFA7A7;
  --gold:#E9C79B;
  --sage:#98C7B4;
  --violet:#B9A0F0;
  --a:#EFA7A7;   /* Elena */
  --b:#98C7B4;   /* Marcus */
  --ok:#8FD3A8;
  --warn:#F0C86B;
  --bad:#F09292;
  --r:20px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --vh:1vh;              /* JS overwrites with a real 1% of innerHeight */
  --navh:0px;            /* height of the mobile bottom bar, 0 on desktop */
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow:hidden; overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
img,svg,canvas{max-width:100%}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 620px at 12% -10%, rgba(239,167,167,.16), transparent 60%),
    radial-gradient(800px 600px at 92% 8%, rgba(152,199,180,.13), transparent 60%),
    radial-gradient(1000px 700px at 50% 115%, rgba(185,160,240,.13), transparent 60%);
}
.serif{font-family:"Instrument Serif",Georgia,serif; font-weight:400; letter-spacing:.2px}
button{font-family:inherit; color:inherit; cursor:pointer; border:0; background:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:10px; border:3px solid transparent; background-clip:content-box}

/* ---------- SCREEN SYSTEM ---------- */
/* Height that survives a mobile address bar: dvh where supported, the
   JS-measured --vh everywhere else. */
#app{position:relative; z-index:1; width:100%; height:calc(var(--vh) * 100)}
@supports (height:100dvh){ #app{height:100dvh} }
.screen{position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); transform:scale(.995)}
.screen.on{opacity:1; pointer-events:auto; transform:none}

.av{width:66px;height:66px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:24px;font-weight:600;color:#20161f}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;font-weight:500;font-size:15px;
  border:1px solid var(--line2); background:var(--card2); transition:.2s; white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.13); transform:translateY(-2px)}
.btn.primary{background:linear-gradient(100deg,var(--rose),var(--gold)); color:#241a20; border-color:transparent; font-weight:600}
.btn.primary:hover{box-shadow:0 18px 44px -16px rgba(233,199,155,.75)}
.btn:disabled{opacity:.35; pointer-events:none}
.btn.sm{padding:9px 16px; font-size:13px}
.btn.ghost{background:transparent}
.tiny{font-size:12px;color:var(--muted)}

/* ---------- APP SHELL ---------- */
#shell{display:grid; grid-template-columns:clamp(66px,5vw,84px) 1fr; height:100%; overflow:hidden}
.rail{
  border-right:1px solid var(--line); background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; align-items:center; padding:clamp(10px,1.6vh,18px) 0 clamp(8px,1.2vh,14px); gap:clamp(2px,.5vh,6px); backdrop-filter:blur(20px); overflow:hidden;
}
.rail .logo{width:clamp(32px,3vh,38px);height:clamp(32px,3vh,38px);border-radius:12px;background:linear-gradient(140deg,var(--rose),var(--gold));display:grid;place-items:center;color:#241a20;font-family:"Instrument Serif",serif;font-size:clamp(17px,1.8vh,21px);margin-bottom:clamp(6px,1.4vh,16px);flex:none}
.nav{width:56px;height:clamp(42px,5.2vh,52px);border-radius:15px;display:grid;place-items:center;gap:2px;color:var(--muted);transition:.18s;position:relative;flex:none}
.nav svg{width:clamp(17px,2vh,21px);height:clamp(17px,2vh,21px);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav span{font-size:9.5px;letter-spacing:.03em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav:hover{background:var(--card); color:var(--cream)}
.nav.on{background:var(--card2); color:var(--cream)}
.nav.on::before{content:"";position:absolute;left:-14px;top:14px;bottom:14px;width:3px;border-radius:3px;background:linear-gradient(var(--rose),var(--gold))}
.rail .spacer{flex:1}

.main{overflow:hidden; display:flex; flex-direction:column; min-height:0}
.topbar{
  display:flex;align-items:center;gap:14px;flex:none;
  padding:clamp(10px,1.7vh,20px) clamp(16px,2vw,34px) clamp(8px,1.3vh,16px);border-bottom:1px solid var(--line);
}
.topbar h1{margin:0;font-size:clamp(19px,2.6vh,27px);font-weight:400;line-height:1.15}
.topbar .crumb{font-size:clamp(9.5px,1.15vh,12px);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.grow{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:12.5px}
.dot{width:7px;height:7px;border-radius:50%}
.stack-av{display:flex}
.stack-av div{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:#20161f;border:2px solid var(--ink)}
.stack-av div+div{margin-left:-9px}
/* ---------- FIT-TO-SCREEN PAGE GRID ---------- */
.page{
  flex:1; min-height:0; overflow:hidden; display:grid; gap:var(--gap);
  padding:clamp(12px,1.8vh,22px) clamp(16px,2vw,34px) clamp(14px,2vh,24px);
  animation:rise .4s cubic-bezier(.2,.8,.2,1);
}
:root{--gap:clamp(9px,1.5vh,16px)}
.page.v-home {grid-template-rows:auto auto minmax(0,1fr) auto auto}
.page.v-calendar{grid-template-rows:auto minmax(0,1.35fr) auto minmax(0,.85fr)}
.page.v-home2 {grid-template-rows:minmax(0,1fr) auto auto}
.page.v-kids  {grid-template-rows:minmax(0,1.15fr) auto minmax(0,.85fr)}
.page.v-money {grid-template-rows:auto auto minmax(0,1fr)}
.page.v-us    {grid-template-rows:minmax(0,1fr) auto auto}
.page.v-settings{grid-template-rows:minmax(0,1fr) auto minmax(0,.9fr)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- BUILDING BLOCKS ---------- */
.card{
  border:1px solid var(--line); background:var(--card); border-radius:var(--r);
  padding:clamp(13px,1.9vh,21px); backdrop-filter:blur(18px);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.card h3{margin:0 0 2px; font-size:clamp(13.5px,1.65vh,16px); font-weight:600; flex:none}
.card .hint{color:var(--muted); font-size:clamp(10.5px,1.25vh,12.5px); margin:0 0 clamp(6px,1.1vh,14px); flex:none; line-height:1.35}
.list{flex:1; min-height:0; overflow-y:auto; scrollbar-width:none}
.list::-webkit-scrollbar{display:none}
.grid{display:grid; gap:var(--gap); min-height:0}
.head{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap}
.head h2{margin:0;font-size:clamp(16px,2.1vh,20px);font-weight:400}
.sec-label{font-size:clamp(9px,1.1vh,11px);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:clamp(2px,.6vh,6px) 0 0}
.row{display:flex;align-items:center;gap:10px}
.badge{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.badge.a{color:var(--a);border-color:rgba(239,167,167,.4);background:rgba(239,167,167,.1)}
.badge.b{color:var(--b);border-color:rgba(152,199,180,.4);background:rgba(152,199,180,.1)}
.badge.both{color:var(--gold);border-color:rgba(233,199,155,.4);background:rgba(233,199,155,.1)}
.badge.ok{color:var(--ok);border-color:rgba(143,211,168,.4);background:rgba(143,211,168,.1)}
.badge.warn{color:var(--warn);border-color:rgba(240,200,107,.4);background:rgba(240,200,107,.1)}
.badge.bad{color:var(--bad);border-color:rgba(240,146,146,.4);background:rgba(240,146,146,.1)}

/* Big buttons */
.tiles{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--gap); min-height:0}
.tile{
  text-align:left; padding:clamp(11px,1.6vh,17px); border-radius:20px; border:1px solid var(--line); background:var(--card);
  transition:.24s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden; min-height:0;
  display:flex; flex-direction:column; backdrop-filter:blur(18px);
}
.tile::after{content:"";position:absolute;inset:0;opacity:0;transition:.24s;background:radial-gradient(420px 200px at 20% 0%, var(--glow,rgba(239,167,167,.22)), transparent 70%)}
.tile:hover{transform:translateY(-5px); border-color:var(--line2); box-shadow:var(--shadow)}
.tile:hover::after{opacity:1}
.tile .ic{width:clamp(30px,3.7vh,40px);height:clamp(30px,3.7vh,40px);border-radius:12px;display:grid;place-items:center;background:var(--card2);margin-bottom:clamp(6px,1.1vh,12px);position:relative;z-index:1;flex:none}
.tile .ic svg{width:clamp(16px,1.9vh,20px);height:clamp(16px,1.9vh,20px);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile strong{font-size:clamp(13px,1.65vh,16px);font-weight:600;position:relative;z-index:1;line-height:1.2}
.tile p{margin:4px 0 0;color:var(--muted);font-size:clamp(10.5px,1.25vh,12.5px);position:relative;z-index:1;line-height:1.3;overflow:hidden}
.tile .meta{margin-top:auto;padding-top:clamp(6px,1.1vh,12px);font-size:11px;position:relative;z-index:1;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.arrow{position:absolute;top:clamp(11px,1.6vh,17px);right:clamp(11px,1.4vw,17px);color:var(--muted);transition:.24s;z-index:1;font-size:13px}
.tile:hover .arrow{color:var(--cream);transform:translateX(4px)}

/* list rows */
.item{display:flex;align-items:center;gap:11px;padding:clamp(6px,1.05vh,12px) 2px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .t{flex:1;min-width:0}
.item .t b{display:block;font-weight:500;font-size:clamp(12.5px,1.5vh,14.5px);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .t small{color:var(--muted);font-size:clamp(10px,1.2vh,12px);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check{width:20px;height:20px;border-radius:7px;border:1.5px solid var(--line2);flex:none;display:grid;place-items:center;transition:.18s}
.check:hover{border-color:var(--gold)}
.check.done{background:linear-gradient(120deg,var(--rose),var(--gold));border-color:transparent;color:#241a20}
.check svg{width:12px;height:12px;stroke:currentColor;stroke-width:3;fill:none;opacity:0}
.check.done svg{opacity:1}
.item.done .t b{opacity:.4;text-decoration:line-through}

/* progress */
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--rose),var(--gold))}
.split{height:9px;border-radius:99px;overflow:hidden;display:flex}
.split i{height:100%}

/* calendar */
.cal{
  display:grid;grid-template-columns:clamp(40px,4vw,58px) repeat(7,minmax(0,1fr));
  grid-template-rows:auto repeat(8,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  height:100%;min-height:0;
}
.cal>div{background:var(--ink2);padding:clamp(3px,.6vh,7px);min-height:0;overflow:hidden}
.cal .hh{background:rgba(255,255,255,.035);text-align:center;padding:clamp(5px,1vh,10px) 6px}
.cal .hh b{display:block;font-size:clamp(11px,1.4vh,14px);font-weight:500}
.cal .hh small{color:var(--muted);font-size:clamp(9px,1.05vh,11px)}
.cal .tm{background:rgba(255,255,255,.02);color:var(--muted);font-size:clamp(9px,1.05vh,11px);text-align:right;padding-top:5px}
.cal .cell{display:flex;flex-direction:column;gap:3px;justify-content:flex-start}
.ev{border-radius:8px;padding:clamp(3px,.55vh,6px) 7px;font-size:clamp(9.5px,1.15vh,11.5px);line-height:1.2;border-left:3px solid; text-align:left; width:100%; transition:.16s; overflow:hidden; flex:none}
.ev:hover{transform:translateX(2px); filter:brightness(1.18)}
.ev b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev small{opacity:.62;font-size:clamp(8.5px,1vh,10px)}
.ev.a{background:rgba(239,167,167,.14);border-color:var(--a)}
.ev.b{background:rgba(152,199,180,.14);border-color:var(--b)}
.ev.both{background:rgba(233,199,155,.16);border-color:var(--gold)}
.ev.kid{background:rgba(185,160,240,.14);border-color:var(--violet)}
.scrollx{overflow-x:auto;padding-bottom:6px}

/* chat */
#chat{background:rgba(10,7,14,.86); backdrop-filter:blur(28px); display:flex; flex-direction:column}
.chat-top{display:flex;align-items:center;gap:14px;padding:18px 30px;border-bottom:1px solid var(--line)}
.chat-body{flex:1;min-height:0;overflow-y:auto;padding:clamp(18px,3.4vh,38px) 24px;scrollbar-width:none}
.chat-body::-webkit-scrollbar{display:none}
.chat-inner{max-width:780px;margin:0 auto}
.msg{display:flex;gap:14px;margin-bottom:26px;animation:rise .35s ease}
.msg .who-av{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:600;color:#241a20}
.msg .bub{padding-top:4px}
.msg .bub .nm{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.msg.si .bub{font-size:15.5px;line-height:1.65}
.msg .bub p{margin:0 0 10px}
.msg .bub p:last-child{margin-bottom:0}
.msg .bub ul{margin:0 0 10px;padding-left:18px}
.chat-empty{max-width:780px;margin:clamp(8px,4vh,52px) auto 0;text-align:center}
.chat-empty .big{font-size:clamp(24px,5.2vh,48px);line-height:1.1;margin:0 0 12px}
.sugg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.3vh,12px);margin-top:clamp(14px,3.4vh,34px);text-align:left}
.sugg button{padding:clamp(11px,1.8vh,17px) 16px;border-radius:16px;border:1px solid var(--line);background:var(--card);transition:.2s;font-size:clamp(12px,1.5vh,13.5px);line-height:1.35}
.sugg button:hover{background:var(--card2);border-color:var(--line2);transform:translateY(-3px)}
.sugg button small{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.chat-dock{padding:16px 24px 26px;border-top:1px solid var(--line)}
.composer{max-width:780px;margin:0 auto;display:flex;gap:10px;align-items:flex-end;border:1px solid var(--line2);background:rgba(255,255,255,.06);border-radius:22px;padding:9px 9px 9px 18px}
.composer textarea{flex:1;background:none;border:0;outline:0;color:var(--cream);font:inherit;resize:none;max-height:170px;padding:10px 0;line-height:1.5}
.composer textarea::placeholder{color:var(--muted)}
.send{width:40px;height:40px;border-radius:14px;background:linear-gradient(120deg,var(--rose),var(--gold));color:#241a20;display:grid;place-items:center;flex:none;transition:.2s}
.send:hover{transform:scale(1.06)}
.typing{display:flex;gap:5px;padding:8px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bob 1.2s infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.ask-bar{
  display:flex;align-items:center;gap:13px;width:100%;padding:clamp(10px,1.7vh,18px) 20px;border-radius:18px;
  border:1px solid var(--line2);background:linear-gradient(100deg,rgba(239,167,167,.1),rgba(233,199,155,.07),rgba(152,199,180,.09));
  transition:.22s;text-align:left;
}
.ask-bar:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
.ask-bar .k{margin-left:auto;font-size:11px;color:var(--muted);border:1px solid var(--line);padding:4px 9px;border-radius:7px}

/* inputs */
input[type=text],input[type=password],select{
  width:100%;padding:12px 14px;border-radius:13px;border:1px solid var(--line2);
  background:rgba(255,255,255,.05);color:var(--cream);font:inherit;outline:0;
}
input:focus{border-color:var(--gold)}
label.fl{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
/* Sits above the mobile bottom bar rather than on top of it. */
.toast{
  position:fixed;left:50%;bottom:calc(34px + var(--navh) + var(--safe-b));
  transform:translate(-50%,26px);z-index:99;
  max-width:min(420px,calc(100vw - 32px));text-align:center;
  background:rgba(28,20,36,.96);border:1px solid var(--line2);padding:13px 22px;border-radius:14px;
  font-size:13.5px;opacity:0;transition:.3s;pointer-events:none;box-shadow:var(--shadow);backdrop-filter:blur(20px)
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.k{font-variant-numeric:tabular-nums}
.big-num{font-family:"Instrument Serif",serif;font-size:clamp(24px,3.9vh,38px);line-height:1}

/* wide-but-short screens: shed the least important lines rather than overflow */
@media(max-height:680px){
  .tile p{display:none}
  .card>.hint{display:none}
  /* collapse, don't remove — the page grid counts on these rows existing */
  .sec-label{height:0;margin:0;overflow:hidden;visibility:hidden}
  .page{gap:9px}
}
/* keep the top bar on one line */
@media(max-width:1180px){ #syncPill{display:none} }
@media(max-width:1000px){ .topbar .stack-av{display:none} }
/* ============================================================
   MOBILE  (≤900px)
   A phone gets a different shape, not a squeezed desktop:
   · the rail becomes a bottom tab bar that stays in normal flow,
     so it can never overlap content — the page simply ends above it
   · the fit-to-screen page grid relaxes into one scrolling column
   · the 7-day calendar grid is replaced by a day agenda (see vAgenda)
   ============================================================ */
@media(max-width:900px){
  #shell{display:flex; flex-direction:column}
  .main{order:1; flex:1 1 auto; min-height:0}
  .rail{
    order:2; flex:none; flex-direction:row; justify-content:space-between;
    border-right:0; border-top:1px solid var(--line);
    background:rgba(16,11,21,.94);
    padding:6px max(8px,env(safe-area-inset-left)) calc(6px + var(--safe-b)) max(8px,env(safe-area-inset-right));
    gap:2px; overflow:visible;
  }
  .rail .logo,.rail .spacer{display:none}
  .nav{flex:1 1 0; width:auto; min-width:0; height:50px; border-radius:13px; gap:3px}
  .nav span{font-size:9px}
  .nav.on::before{left:22%;right:22%;top:auto;bottom:-6px;width:auto;height:2.5px;
    background:linear-gradient(90deg,var(--rose),var(--gold))}

  .topbar{padding:calc(10px + var(--safe-t)) 16px 10px; gap:10px}
  .topbar h1{font-size:20px}
  .topbar .crumb{font-size:9.5px;letter-spacing:.18em}

  /* one scrolling column; momentum scrolling, and a floor so the last card
     clears the tab bar even mid-bounce */
  .page{
    display:block; overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding:14px 16px calc(24px + var(--safe-b));
  }
  .page>*+*{margin-top:12px}
  .page.v-home,.page.v-calendar,.page.v-home2,.page.v-kids,
  .page.v-money,.page.v-us,.page.v-settings{grid-template-rows:none}

  /* nothing is height-constrained any more, so let content set the height */
  .card,.tile{overflow:visible; min-height:0}
  .list{overflow:visible; flex:none}
  .grid{grid-template-columns:1fr !important; gap:12px}
  .tiles{grid-auto-flow:row; grid-template-columns:1fr 1fr}
  .tile{min-height:132px}
  .tile p{display:block}
  .card>.hint{display:block}
  .sec-label{height:auto;visibility:visible;margin:16px 0 -2px;font-size:10px}

  .cal{display:none}                 /* replaced by .agenda */
  .head{gap:8px}
  .head h2{width:100%;font-size:19px}
  .item{padding:11px 2px;gap:10px}
  .item .t b{font-size:14px;white-space:normal}
  .item .t small{white-space:normal}
  .big-num{font-size:30px}

  /* comfortable thumbs: 44px minimum on anything tappable */
  .btn{padding:13px 22px}
  .btn.sm{padding:11px 16px;font-size:13px}
  .check{width:24px;height:24px}
  .ev{padding:9px 11px;font-size:12.5px}
  .ev b{white-space:normal}

  /* 16px stops iOS zooming the whole page when a field is focused */
  input[type=text],input[type=password],select,.composer textarea{font-size:16px}

  .sugg{grid-template-columns:1fr}
  .chat-top{padding:calc(10px + var(--safe-t)) 14px 10px;gap:10px}
  .chat-top .tiny{display:none}
  .chat-body{padding:18px 16px}
  .chat-dock{padding:10px 14px calc(12px + var(--safe-b))}
  .chat-empty{margin-top:12px}
  .msg{gap:11px;margin-bottom:20px}
  .msg.si .bub{font-size:15px}
  .ask-bar .k{display:none}
  .toast{bottom:calc(18px + var(--navh) + var(--safe-b))}
}

/* very small phones: eight labels won't fit, so drop to icons only */
@media(max-width:430px){
  .nav span{display:none}
  .nav{height:46px}
  .tiles{grid-template-columns:1fr}
  .topbar .crumb{display:none}
}

/* ---------- mobile agenda (calendar replacement) ---------- */
.agenda{display:none}
@media(max-width:900px){
  .agenda{display:flex;flex-direction:column;gap:10px}
  .agenda .day{
    border:1px solid var(--line);background:var(--card);border-radius:16px;
    padding:12px 13px;display:flex;flex-direction:column;gap:7px;
  }
  .agenda .day.today{border-color:rgba(233,199,155,.45);background:rgba(233,199,155,.06)}
  .agenda .day>header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .agenda .day>header b{font-size:15px;font-weight:600}
  .agenda .day>header span{font-size:11.5px;color:var(--muted)}
  .agenda .day>header .count{margin-left:auto;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
  .agenda .day.today>header .count{color:var(--gold)}
}

/* people who prefer less motion get less motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* keyboard focus needs to be visible */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}