/* Judy's Week, round 2 (Claude Design handoff, 2026-10-14): the week is the home page, one Add
   button, a Menu for everything else. Color means two things only: cyan is anything you can tap,
   magenta is Judy needs a caregiver (or a photo row needs checking). Light only for now.
   All design values live in this :root block; nothing below uses a literal color. */
:root{
  /* — surfaces & ink — */
  --bg:#F3F2F2;            /* page ground (paper) */
  --surface:#F8F4F4;       /* raised cards, sheets, light pills */
  --sunk:#EAE9E9;          /* inset fills */
  --ink:#201E1D;           /* text */
  --muted:#605D5D;         /* secondary text, time labels (6.0:1 on --bg) */
  --line:rgb(32 30 29 / .10);       /* hairline borders on pills/cards */
  --line-soft:rgb(32 30 29 / .06);  /* card border */
  --line-arrow:rgb(32 30 29 / .08); /* week arrows */
  --rule-soft:rgb(32 30 29 / .14);  /* dividers in lists */
  --track:#D7D3D3;         /* progress track */
  --unchecked:#9B9797;     /* empty radio/check ring */

  /* — action color (cyan): anything you can tap — */
  --accent:#006786;        /* primary fill + link text */
  --accent-hover:#004961;
  --accent-press:#00374A;  /* pressed: one ramp step darker than hover */
  --accent-ink:#F3F2F2;    /* text on --accent */
  --accent-tint:#E9F8FF;   /* selected item fill, hover tint, Today tag */
  --accent-tint-ink:#004961;
  --accent-border:#1186AC; /* selected item border */
  --accent-wash:rgb(0 103 134 / .10); /* menu row hover */
  --today:#38A6CF;         /* Today card ring (2px) */
  --focus:#0088B0;         /* :focus-visible outline */

  /* — alert color (magenta): Judy needs a caregiver / row to check. Nothing else. — */
  --open:#AA0B56;          /* solid alert button fill */
  --open-hover:#790E3D;
  --open-press:#5C0A2E;
  --open-ink:#790E3D;      /* text/icons on --open-bg */
  --open-bg:#FFF1F4;       /* open-shift row, alert panel */
  --open-bg-glass:rgb(255 241 244 / .88);
  --open-border:#FFDEE6;
  --star:#7D7979;          /* unrated stars; rated stars use --accent */

  /* — kind of care (Kevin, 2026-10-14: "I still want some color coding on therapists vs
     caregivers"). Overrides the handoff's two-colors-only rule. Warm gold and green stay
     clear of cyan (tap) and magenta (needs a caregiver), which still win. AA on their tints. — */
  --care:#7A4E0E;          /* caregiver shift: icon and label */
  --care-bg:#FBF1DF;
  --therapy-ink:#1E5E3C;   /* therapy visit: icon and label */
  --therapy-bg:#E6F3EB;
  --meal-ink:#4B3F8F;      /* meal picks: icon, label and group heading */
  --meal-bg:#EFEDF9;

  /* — type: one serif for everything — */
  --f-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body:"Source Serif 4", Georgia, "Times New Roman", serif;
  --w-regular:400; --w-semibold:600;
  --t-xs:.875rem;    /* 14px tags, desktop meta */
  --t-sm:.9375rem;   /* 15px time labels, kickers */
  --t-link:1rem;     /* 16px links, toast, Call */
  --t-md:1.0625rem;  /* 17px small body, pill buttons */
  --t-base:1.125rem; /* 18px body (phone) */
  --t-btn:1.1875rem; /* 19px primary button, menu labels */
  --t-week:1.3125rem;/* 21px week title (phone) */
  --t-day:1.375rem;  /* 22px day heading */
  --t-sheet:1.4375rem;/* 23px Menu sheet title, photo title */
  --t-lg:1.5625rem;  /* 25px sheet title */
  --t-desk-title:1.625rem; /* 26px desktop site title */
  --t-xl:2rem;       /* 32px page title */
  --t-big:2.25rem;   /* 36px sign-in title */
  --lh:1.45;
  --lh-tight:1.2;
  --kicker-tracking:.06em;

  /* — spacing — */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --s-gap:14px;      /* content column gap (phone) */
  --s-bar-clear:78px;/* content top padding under the fixed bar (phone) */
  --s-bar-clear-desk:96px;

  /* — radius — */
  --r-pill:999px;
  --r-check:9px;
  --r-sm:14px;     /* open-shift row inside a card, photo thumb */
  --r-row:16px;    /* photo-check row */
  --r-toast:18px;
  --r-md:20px;     /* tiles, desktop cards */
  --r-lg:22px;     /* day cards (phone), alert panel */
  --r-take:24px;   /* Take a photo */
  --r-menu:28px;   /* Menu sheet */
  --r-sheet:32px;  /* Add and Export sheets */

  /* — sizing — */
  --tap:44px;
  --btn-h:44px;
  --btn-h-md:48px;   /* desktop Menu pill, Discard */
  --btn-h-desk:52px; /* desktop Add something, Cancel */
  --btn-h-sec:54px;  /* Email it, Copy as text */
  --btn-h-row:60px;  /* Use a photo you already took, Download */
  --btn-h-lg:58px;
  --close-h:40px;
  --row-h:52px;
  --row-h-check:56px;
  --menu-row-h:64px;
  --tile-h:76px;
  --take-h:78px;
  --check:28px;      /* checkbox */
  --ring:26px;       /* meal radio ring */
  --icon:20px; --icon-sm:18px; --icon-md:22px; --icon-lg:24px; --icon-xl:32px;
  --icon-col:30px;   /* icon column in a day row */
  --icon-col-desk:18px; /* the same column in the seven-day desktop grid */
  --thumb-w:72px; --thumb-h:96px;
  --measure:68ch;
  --page-max:1360px;
  --dlg-max:520px;

  /* — elevation — */
  --shadow-sm:0 1px 2px rgb(45 43 43 / .14);
  --shadow-md:0 3px 10px rgb(45 43 43 / .16);
  --shadow-lg:0 12px 32px rgb(45 43 43 / .22);
  --btn-highlight:inset 0 1px 0 rgb(248 244 244 / .35);

  /* — glass — */
  --glass-bar:rgb(243 242 242 / .72);
  --glass-pill:rgb(248 244 244 / .75);
  --glass-close:rgb(248 244 244 / .70);
  --glass-sheet:rgb(248 244 244 / .82);
  --glass-sheet-edge:rgb(248 244 244 / .90);
  --blur-bar:blur(18px) saturate(1.4);
  --blur-sheet:blur(24px) saturate(1.5);
  --blur-scrim:blur(6px);
  --blur-toast:blur(14px);
  --scrim:rgb(45 43 43 / .28);
  --toast-bg:rgb(45 43 43 / .82);

  /* — motion — */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:180ms;
  --dur-out:160ms;  /* leaving is a little quicker than arriving */
  --lift:8px;

  /* — small steps the handoff uses between the 4px scale stops — */
  --hair:1px; --hair-md:1.5px; --bw:2px;
  --s-xxs:2px; --s-3:3px; --s-xs:6px; --s-7:7px; --s-sm:10px; --s-md:14px; --s-lg:18px; --s-xl:20px; --s-toast-y:26px;
  --s-page-end:140px; --s-page-end-desk:40px;
  --r-xs:4px;
  --icon-xxs:14px; --icon-xs:16px;
  --check-sm:22px;   /* native checkbox and radio in forms */
  --btn-h-sm:36px;   /* desktop inline alert pill and close */
  --track-h:6px;
  --doc-w:56px; --doc-h:72px; --doc-line:2px; --doc-line-md:3px; --doc-line-lg:4px;
  --reading-img-h:240px; --photo-min:220px; --auth-max:420px; --dlg-wide:980px;
  --o-disabled:.45; --o-retired:.6;
  --s-bar-left-desk:40px; --s-sheet-top:22px;
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:var(--t-base); line-height:var(--lh)}
h1,h2,h3{font-family:var(--f-display); font-weight:var(--w-semibold); text-wrap:balance; margin:0; line-height:var(--lh-tight)}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent)} a:hover{color:var(--accent-hover)}
:focus-visible{outline:var(--bw) solid var(--focus); outline-offset:var(--bw)}
.muted{color:var(--muted)}
.small{font-size:var(--t-sm)}
.xs{font-size:var(--t-xs)}
.kicker{font-size:var(--t-sm); letter-spacing:var(--kicker-tracking); text-transform:uppercase; color:var(--muted); margin:0}
.only-desk{display:none}
i[class^="ph"]{font-size:var(--icon); line-height:1; flex:none}

/* ---------- buttons: every control is a pill ---------- */
.pill{min-height:var(--btn-h); padding:0 var(--s4); border-radius:var(--r-pill); border:var(--hair) solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--f-display); font-weight:var(--w-semibold); font-size:var(--t-md); line-height:var(--lh-tight); text-decoration:none; cursor:pointer; background:none; color:var(--accent); white-space:nowrap}
.pill.primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--btn-highlight), var(--shadow-sm)}
.pill.primary:hover{background:var(--accent-hover); color:var(--accent-ink)}
.pill.primary:active{background:var(--accent-press)}
.pill.glass{background:var(--glass-pill); border-color:var(--line); box-shadow:var(--shadow-sm); color:var(--ink)}
.pill.glass:hover{background:var(--surface)}
.pill.plain{background:var(--bg); border-color:var(--line); color:var(--accent)}
.pill.plain:hover{background:var(--accent-tint); color:var(--accent)}
.pill.plain:active{background:var(--accent-wash)}
.pill.urgent{background:var(--open); color:var(--accent-ink); padding:0 var(--s-lg); box-shadow:var(--btn-highlight), var(--shadow-sm)}
.pill.urgent:hover{background:var(--open-hover); color:var(--accent-ink)}
.pill.urgent:active{background:var(--open-press)}
.pill.ghost{color:var(--accent)}
.pill.ghost:hover{background:var(--accent-wash)}
.pill.danger{color:var(--open-ink); background:var(--bg); border-color:var(--line)}
.pill.danger-solid{background:var(--open); color:var(--accent-ink)}
.pill.danger-solid:hover{background:var(--open-hover)}
.pill.wide{width:100%}
.pill.lg{min-height:var(--btn-h-lg); font-size:var(--t-btn)}
.pill.row-h{min-height:var(--btn-h-row); font-size:var(--t-base)}
.pill.sec-h{min-height:var(--btn-h-sec)}
.pill.md-h{min-height:var(--btn-h-md)}
.pill:disabled,.pill[aria-disabled="true"]{opacity:var(--o-disabled); cursor:default; pointer-events:none}
.pill .ph-plus{font-size:var(--icon)}
.round{width:var(--tap); height:var(--tap); border-radius:var(--r-pill); display:grid; place-items:center; flex:none; cursor:pointer; color:var(--accent);
  background:var(--glass-pill); border:var(--hair) solid var(--line-arrow); box-shadow:var(--shadow-sm); padding:0}
.round:hover{background:var(--surface)}
.link{background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; text-underline-offset:var(--s-3); cursor:pointer; font-size:var(--t-link); min-height:var(--tap); display:inline-flex; align-items:center; gap:var(--s1)}
.link:hover{color:var(--accent-hover)}
.link:has(> i){text-decoration:none} .link:has(> i) span{text-decoration:underline; text-underline-offset:var(--s-3)}
.link.danger{color:var(--open-ink)}

/* ---------- top bar (glass, fixed) ---------- */
.bar{position:fixed; top:0; left:0; right:0; z-index:5; padding:var(--s4) var(--s4) var(--s3) var(--s-xl); display:flex; align-items:center; gap:var(--s2);
  background:var(--glass-bar); -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar)}
.bar .title{font-family:var(--f-display); font-weight:var(--w-semibold); font-size:var(--t-day); flex:1; min-width:0; margin:0; line-height:var(--lh-tight)}
.bar .title.center{text-align:center}
.bar .pill.primary{padding:0 var(--s4) 0 var(--s3); gap:var(--s-xs)}
.bar .pill.glass{gap:var(--s2)}
.bar .add{order:2} .bar .menubtn{order:3}
.bar .spacer{flex:1}
.bar .pill.wrap{white-space:normal; text-align:center; padding:var(--s1) var(--s4)}
.row-links{display:flex; gap:var(--s4)}
.field-group{display:flex; flex-direction:column; gap:var(--s3)}

/* ---------- page column ---------- */
.content{padding:var(--s-bar-clear) var(--s4) var(--s-page-end); display:flex; flex-direction:column; gap:var(--s-gap); max-width:var(--page-max); margin:0 auto}
.weekrow{display:flex; align-items:center; gap:var(--s2); padding:0 var(--s1)}
.weekrow h2{flex:1; text-align:center; font-size:var(--t-week)}
.intro h2{font-size:var(--t-week)}
.intro p{margin:var(--s1) 0 0; font-size:var(--t-link); color:var(--muted)}

/* ---------- open-shift alert ---------- */
.alert{border-radius:var(--r-lg); padding:var(--s3) var(--s-sm) var(--s-md) var(--s4); background:var(--open-bg-glass); border:var(--hair) solid var(--open-border); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:var(--s-sm); color:var(--open-ink)}
.alert .head{display:flex; align-items:center; gap:var(--s2)}
.alert .head i{font-size:var(--icon-md)}
.alert .head b{font-weight:var(--w-semibold); font-size:var(--t-base); flex:1}
.alert .x{width:var(--close-h); height:var(--close-h); border-radius:var(--r-pill); display:grid; place-items:center; border:0; background:var(--glass-close); color:var(--open-ink); cursor:pointer; padding:0}
.alert .x i{font-size:var(--icon-sm)}
.alert .chips{display:flex; flex-wrap:wrap; gap:var(--s-xs)}
.chip{border-radius:var(--r-pill); padding:var(--s1) var(--s3); background:var(--surface); font-size:var(--t-sm)}
.chip b{font-weight:var(--w-semibold)}
.alert .pill.urgent{align-self:flex-start}
.alert-inline{display:none}

/* ---------- days ---------- */
.earlier{align-self:flex-start; font-size:var(--t-link)}
.days{display:grid; grid-template-columns:1fr; gap:var(--s-gap)}
.day{background:var(--surface); border:var(--hair) solid var(--line-soft); border-radius:var(--r-lg); padding:var(--s-md) var(--s4) var(--s-sm); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-width:0}
.day.today{box-shadow:0 0 0 var(--bw) var(--today), var(--shadow-md)}
.collapsible .before{display:none}
.collapsible.show-before .before{display:flex}
.day header{display:flex; align-items:center; gap:var(--s-sm); margin-bottom:var(--s-xs)}
.day header h3{font-size:var(--t-day)}
.tag-today{font-size:var(--t-xs); font-weight:var(--w-semibold); padding:var(--s-xxs) var(--s-sm); border-radius:var(--r-pill); background:var(--accent-tint); color:var(--accent-tint-ink); font-family:var(--f-body)}
.kick-today{display:none}
.day .none{font-size:var(--t-sm); color:var(--muted); margin:var(--s1) 0 var(--s2)}
.item{display:grid; grid-template-columns:var(--icon-col) 1fr auto; gap:var(--s2); align-items:center; padding:var(--s-xs) var(--s-xxs); min-width:0}
.item > i{font-size:var(--icon-md); color:var(--muted); justify-self:center; align-self:start; margin-top:var(--s-3)}
.item .body{display:flex; flex-direction:column; min-width:0; text-align:left; background:none; border:0; padding:0; color:inherit; min-height:var(--tap); justify-content:center; overflow-wrap:anywhere}
button.body{cursor:pointer}
button.body:hover .who{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:var(--s-3)}
.item .lbl{font-size:var(--t-sm); color:var(--muted); line-height:1.3}
.item .lbl .short{display:none}
.item .who{font-size:var(--t-base); line-height:1.3}
.item .note{font-size:var(--t-sm); color:var(--muted); line-height:1.3}
.item .links{grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); font-size:var(--t-sm); margin-top:calc(var(--s1) * -1)}
.item .links a{text-decoration:none; display:inline-flex; align-items:center; gap:var(--s1); min-height:var(--tap); overflow-wrap:anywhere}
.item .links a span{text-decoration:underline; text-underline-offset:var(--s-3)}
.item.care,.item.therapy,.item.open{padding:var(--s2) var(--s-sm); margin:var(--s-xxs) calc(var(--s2) * -1); border-radius:var(--r-sm)}
.item.care{background:var(--care-bg)} .item.care > i,.item.care .lbl{color:var(--care)}
.item.therapy{background:var(--therapy-bg)} .item.therapy > i,.item.therapy .lbl{color:var(--therapy-ink)}
.item.meal{background:var(--meal-bg); padding:var(--s2) var(--s-sm); margin:var(--s-xxs) calc(var(--s2) * -1); border-radius:var(--r-sm)}
.item.meal > i,.item.meal .lbl{color:var(--meal-ink)}
.group{display:flex; flex-direction:column; margin-top:var(--s-xs)}
.group .gl{margin:0; font-size:var(--t-xs); font-weight:var(--w-semibold); letter-spacing:var(--kicker-tracking); text-transform:uppercase; color:var(--muted)}
.group.care .gl{color:var(--care)} .group.therapy .gl{color:var(--therapy-ink)} .group.meal .gl{color:var(--meal-ink)}
.item.open{background:var(--open-bg); color:var(--open-ink)}
.item.open > i,.item.open .lbl{color:var(--open-ink)}
.item.open .who{font-weight:var(--w-semibold)}
.item .pill.plain{font-size:var(--t-link); gap:var(--s-xs)}
.item .pill.plain i{font-size:var(--icon-sm)}

@media (min-width:720px){
  .days{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- desktop ---------- */
@media (min-width:1180px){
  .only-phone{display:none!important}
  .only-desk{display:inline}
  .bar .menubtn{order:2} .bar .add{order:3}
  .bar{padding:var(--s-lg) var(--s6) var(--s-lg) var(--s-bar-left-desk)}
  .bar .title{font-size:var(--t-desk-title)}
  .bar .pill.glass{min-height:var(--btn-h-md)}
  .bar .pill.primary{min-height:var(--btn-h-desk); padding:0 var(--s5); font-size:var(--t-base)}
  .content{padding:var(--s-bar-clear-desk) var(--s6) var(--s-page-end-desk); gap:var(--s4)}
  .weekrow{gap:var(--s3)}
  .weekrow h2{flex:none; font-size:var(--t-xl)}
  .weekrow .spacer{flex:1}
  .alert{display:none}
  .alert-inline{display:flex; align-items:center; gap:var(--s2); border-radius:var(--r-pill); padding:var(--s1) var(--s1) var(--s1) var(--s4); background:var(--open-bg-glass);
    border:var(--hair) solid var(--open-border); color:var(--open-ink); font-size:var(--t-sm); font-weight:var(--w-semibold)}
  .alert-inline > i{font-size:var(--icon-sm)}
  .alert-inline .pill.urgent{min-height:var(--btn-h-sm); font-size:var(--t-sm); padding:0 var(--s-md)}
  .alert-inline .x{width:var(--btn-h-sm); height:var(--btn-h-sm); border-radius:var(--r-pill); display:grid; place-items:center; border:0; background:none; color:var(--open-ink); cursor:pointer}
  .earlier{display:none}
  .days{grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--s3)}
  .collapsible .before{display:flex}
  .day{border-radius:var(--r-md); padding:var(--s-md) var(--s3) var(--s-sm)}
  .day header{margin-bottom:var(--s2)}
  .day header h3{font-size:var(--t-base)}
  .day .tag-today{display:none}
  .kick-today{display:block; font-size:var(--t-xs); font-weight:var(--w-semibold); color:var(--accent); margin-bottom:var(--s-xxs)}
  .item{grid-template-columns:var(--icon-col-desk) minmax(0,1fr); gap:var(--s-xs); padding:var(--s1) 0}
  .item > i{font-size:var(--icon-sm); margin-top:var(--s-xxs)}
  .item .pill.plain{display:none}
  .item .links{grid-column:2; margin-top:0}
  .item .links a{min-height:0}
  .item .body{min-height:0}
  .item .lbl{font-size:var(--t-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .item .lbl .long{display:none} .item .lbl .short{display:inline}
  .item .who{font-size:var(--t-md)}
  .item.care,.item.therapy,.item.meal,.item.open{margin:var(--s-xxs) calc(var(--s-xs) * -1); padding:var(--s-xs)}
}

/* ---------- sheets (Menu, Add, Export) and dialogs ---------- */
dialog{border:0; padding:0; color:var(--ink); background:none; max-width:none; max-height:none}
dialog::backdrop{background:var(--scrim); -webkit-backdrop-filter:var(--blur-scrim); backdrop-filter:var(--blur-scrim)}
.sheet{position:fixed; inset:var(--s3) var(--s3) auto; margin:0 auto; width:auto; max-width:var(--dlg-max);
  background:var(--glass-sheet); -webkit-backdrop-filter:var(--blur-sheet); backdrop-filter:var(--blur-sheet);
  border:var(--hair) solid var(--glass-sheet-edge); box-shadow:var(--shadow-lg); border-radius:var(--r-sheet); overflow:auto; max-height:calc(100dvh - var(--s5))}
.sheet[open]{animation:sheet-in var(--dur) var(--ease)}
@keyframes sheet-in{from{opacity:0; transform:translateY(calc(var(--lift) * -1))}}
@media (prefers-reduced-motion: reduce){.sheet[open],.dlg[open]{animation:none}}
.sheet .inner{padding:var(--s-sheet-top) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s3)}
.sheet h2{font-size:var(--t-lg)}

.sheet.menu{border-radius:var(--r-menu)}
.sheet.menu .inner{padding:var(--s-sm) var(--s-sm) var(--s-md); gap:var(--s1)}
.sheet.menu .head{display:flex; align-items:center; justify-content:space-between; padding:var(--s1) var(--s1) var(--s2) var(--s-md)}
.sheet.menu h2{font-size:var(--t-sheet)}
.mrow{display:grid; grid-template-columns:var(--tap) 1fr var(--icon); gap:var(--s3); align-items:center; min-height:var(--menu-row-h); padding:var(--s-xs) var(--s3); border-radius:var(--r-toast);
  background:none; border:0; text-align:left; cursor:pointer; color:var(--ink); width:100%}
.mrow:hover{background:var(--accent-wash)}
.mrow .ic{width:var(--tap); height:var(--tap); border-radius:var(--r-pill); display:grid; place-items:center; background:var(--accent-tint); color:var(--accent)}
.mrow .ic i{font-size:var(--icon-md)}
.mrow b{display:block; font-size:var(--t-btn); font-weight:var(--w-semibold); line-height:var(--lh-tight)}
.mrow span span{display:block; font-size:var(--t-sm); color:var(--muted); line-height:1.3; margin-top:var(--s-xxs)}
.mrow > i{color:var(--muted)}
.sheet.menu .foot{display:flex; justify-content:space-between; align-items:center; padding:var(--s2) var(--s-md) 0; font-size:var(--t-link); color:var(--muted)}
.sheet.menu .foot .link{color:var(--muted)}

.take{display:grid; grid-template-columns:auto 1fr; gap:var(--s-md); align-items:center; min-height:var(--take-h); border-radius:var(--r-take); padding:var(--s3) var(--s4); border:0;
  background:var(--accent); color:var(--accent-ink); text-align:left; cursor:pointer; box-shadow:var(--btn-highlight), var(--shadow-sm)}
.take:hover{background:var(--accent-hover)}
.take i{font-size:var(--icon-xl)}
.take b{display:block; font-size:var(--t-btn); font-weight:var(--w-semibold); line-height:var(--lh-tight)}
.take span span{display:block; font-size:var(--t-sm); line-height:1.3; margin-top:var(--s-xxs)}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.tile{min-height:var(--tile-h); border-radius:var(--r-md); padding:var(--s3) var(--s-md); background:var(--bg); border:var(--hair) solid var(--line-soft); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-xs);
  font-size:var(--t-md); text-align:left; cursor:pointer; color:var(--ink); line-height:var(--lh-tight)}
.tile:hover{background:var(--accent-tint)}
.tile i{font-size:var(--icon-lg); color:var(--accent)}

.export-head{display:flex; gap:var(--s-md); align-items:center}
.doc-thumb{width:var(--doc-w); height:var(--doc-h); flex:none; background:var(--surface); border:var(--hair) solid var(--line); border-radius:var(--r-xs); box-shadow:var(--shadow-sm); padding:var(--s2) var(--s-7); display:flex; flex-direction:column; gap:var(--s1)}
.doc-thumb span{display:block; height:var(--doc-line); background:var(--ink); opacity:.5}
.doc-thumb span:first-child{height:var(--doc-line-md); opacity:1}
.doc-thumb span:nth-child(3){width:70%; height:var(--doc-line-lg); opacity:.8}
.export-head h2{font-size:var(--t-sheet)}
.export-head p{margin:var(--s-xxs) 0 0; font-size:var(--t-sm); color:var(--muted)}
.two-btn{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}

/* edit dialogs: a sheet from the bottom on phones, a card in the middle on wide screens */
.dlg{position:fixed; inset:auto 0 0; margin:0; width:100%; max-width:none; background:var(--surface); border-radius:var(--r-sheet) var(--r-sheet) 0 0; box-shadow:var(--shadow-lg); max-height:92dvh; overflow:auto}
.dlg[open]{animation:dlg-in var(--dur) var(--ease)}
@keyframes dlg-in{from{opacity:0; transform:translateY(var(--lift))}}
@media (min-width:720px){.dlg{inset:0; margin:auto; width:calc(100% - var(--s6)); max-width:var(--dlg-max); height:fit-content; border-radius:var(--r-sheet)}}
.dlg.wide{max-width:var(--dlg-wide)}
.dlg form{padding:var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:var(--s3)}
@media (min-width:720px){.dlg form{padding:var(--s5)}}
.dlg h2{font-size:var(--t-lg)}
.dlg .actions{display:grid; grid-template-columns:auto 1fr; gap:var(--s2); margin-top:var(--s2)}
.dlg .actions.one{grid-template-columns:1fr}
.dlg .actions .pill{min-height:var(--btn-h-desk)}
.dlg .sub{text-align:center; font-size:var(--t-sm); color:var(--muted); margin:0}
.dlg img.full{max-height:80vh; width:auto; margin:0 auto; display:block; border-radius:var(--r-sm)}
.field{display:flex; flex-direction:column; gap:var(--s-xs)}
.field label,.field .lab{font-size:var(--t-md)}
.field input,.field select,.field textarea{min-height:var(--btn-h-md); border:var(--hair) solid var(--line); border-radius:var(--r-sm); padding:var(--s2) var(--s3); background:var(--bg); width:100%; font-size:var(--t-base)}
.field select.open{color:var(--open-ink); background:var(--open-bg)}
.field textarea{min-height:6rem; resize:vertical}
.hint{font-size:var(--t-sm); color:var(--muted); margin:0}
.two{display:grid; gap:var(--s3); grid-template-columns:1fr 1fr}
details.more summary{cursor:pointer; color:var(--accent); font-size:var(--t-link); min-height:var(--tap); display:flex; align-items:center}
details.more[open]{display:flex; flex-direction:column; gap:var(--s3)}
.radio{display:flex; gap:var(--s3); align-items:center; min-height:var(--tap); cursor:pointer}
.radio input{width:var(--check-sm); height:var(--check-sm); accent-color:var(--accent); margin:0}
.checkline{display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--t-sm); cursor:pointer}
.checkline input{width:var(--check-sm); height:var(--check-sm); accent-color:var(--accent); margin:0; flex:none}

/* ---------- toast ---------- */
.toast{position:fixed; left:var(--s4); right:var(--s4); bottom:calc(var(--s-toast-y) + env(safe-area-inset-bottom, 0px)); margin:0 auto; max-width:var(--dlg-max); z-index:20;
  border-radius:var(--r-toast); padding:var(--s-md) var(--s4); background:var(--toast-bg); -webkit-backdrop-filter:var(--blur-toast); backdrop-filter:var(--blur-toast);
  color:var(--surface); font-size:var(--t-link); display:flex; gap:var(--s3); align-items:center; line-height:1.35}
.toast i{font-size:var(--icon-md)}
.toast{opacity:0; transform:translateY(var(--lift)); transition:opacity var(--dur-out) ease-in, transform var(--dur-out) ease-in}
.toast.in{opacity:1; transform:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
@media (prefers-reduced-motion: reduce){.toast,.toast.in{transform:none; transition:opacity var(--dur-out) linear}}

/* ---------- cards, lists (Meals, People, Photos, History, Family) ---------- */
.card{background:var(--surface); border:var(--hair) solid var(--line-soft); border-radius:var(--r-lg); padding:var(--s-md) var(--s4); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--s2); min-width:0}
.card h3{font-size:var(--t-day)}
.card .cardhead{display:flex; align-items:center; justify-content:space-between; gap:var(--s2)}
.cards{display:grid; gap:var(--s-gap); grid-template-columns:1fr}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

.choices{display:flex; flex-direction:column; gap:var(--s2); border:0; margin:0; padding:0; min-width:0}
.choices legend{padding:0; margin-bottom:var(--s2)}
.choice{display:grid; grid-template-columns:var(--check) 1fr; gap:var(--s3); align-items:center; min-height:var(--row-h); padding:var(--s-xs) var(--s-md); border-radius:var(--r-pill); border:var(--hair-md) solid var(--line); background:var(--bg); cursor:pointer; line-height:1.3}
.choice:hover{background:var(--accent-tint)}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice .ring{width:var(--ring); height:var(--ring); border-radius:var(--r-pill); border:var(--bw) solid var(--unchecked); display:grid; place-items:center; color:var(--accent-ink)}
.choice .ring i{display:none; font-size:var(--icon-xxs)}
.choice.picked{background:var(--accent-tint); border-color:var(--accent-border); font-weight:var(--w-semibold)}
.choice.picked .ring{background:var(--accent); border-color:var(--accent)}
.choice.picked .ring i{display:block}
.choice:has(input:focus-visible){outline:var(--bw) solid var(--focus); outline-offset:var(--bw)}
.choice.ro{cursor:default}
.by{font-size:var(--t-xs); color:var(--muted); margin:0}

.plist{display:flex; flex-direction:column}
.prow{display:flex; flex-direction:column; gap:var(--s1); padding:var(--s3) 0; border-top:var(--hair) solid var(--rule-soft)}
.prow:first-child{border-top:0; padding-top:0}
.prow .top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); flex-wrap:wrap}
.prow .name{font-weight:var(--w-semibold)}
.disc{font-size:var(--t-sm); color:var(--muted); margin-left:var(--s-xs); font-weight:var(--w-regular)}
.prow.retired{opacity:var(--o-retired)}
.phone{font-variant-numeric:tabular-nums; white-space:nowrap}
.stars{display:flex; gap:0; align-items:center; flex-wrap:wrap}
.star{width:var(--tap); height:var(--tap); border:0; background:none; cursor:pointer; padding:0; color:var(--star); display:grid; place-items:center}
.star i{font-size:var(--icon-lg)}
.star.on{color:var(--accent)}
.star:disabled{cursor:default}
.comments{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s1); font-size:var(--t-sm)}
.comments li{background:var(--bg); border-radius:var(--r-sm); padding:var(--s2) var(--s3)}

.photos{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--photo-min)),1fr))}
.photo{background:var(--surface); border:var(--hair) solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column}
.photo img{width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--sunk); display:block; cursor:zoom-in; border:0; padding:0}
.photo .meta{padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2)}
.ok{color:var(--accent); font-size:var(--t-sm); font-weight:var(--w-semibold); display:flex; gap:var(--s-xs); align-items:center}

.history{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.history li{padding:var(--s3) 0; border-top:var(--hair) solid var(--rule-soft)}
.history li:first-child{border-top:0}
.history .kicker{text-transform:none; letter-spacing:0; font-size:var(--t-sm)}

.linkbox{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; background:var(--accent-tint); color:var(--accent-tint-ink); border-radius:var(--r-sm); padding:var(--s3); overflow-wrap:anywhere; font-size:var(--t-sm)}
.frow{display:flex; flex-direction:column; gap:var(--s2); padding:var(--s3) 0; border-top:var(--hair) solid var(--rule-soft)}
.frow:first-child{border-top:0}
.frow .acts{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center}
.frow select{min-height:var(--tap); border:var(--hair) solid var(--line); border-radius:var(--r-pill); padding:0 var(--s3); background:var(--bg)}

/* ---------- photo: reading and checking ---------- */
.reading{display:flex; flex-direction:column; gap:var(--s3)}
.reading img{width:100%; max-height:var(--reading-img-h); object-fit:cover; border-radius:var(--r-md); box-shadow:var(--shadow-md)}
.reading h2{font-size:var(--t-lg)}
.track{height:var(--track-h); border-radius:var(--r-pill); background:var(--track); overflow:hidden}
.track span{display:block; height:100%; width:15%; background:var(--accent); border-radius:var(--r-pill); animation:fill 30s var(--ease) forwards}
@keyframes fill{to{width:90%}}
@media (prefers-reduced-motion: reduce){.track span{animation:none; width:50%}}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); font-size:var(--t-md)}
.steps li{display:flex; gap:var(--s2); align-items:center; color:var(--muted)}
.steps li.done{color:var(--ink)} .steps li.done i{color:var(--accent)}
.steps li.now{color:var(--ink); font-weight:var(--w-semibold)}
.steps .dot{width:var(--icon); height:var(--icon); border-radius:var(--r-pill); border:var(--bw) solid var(--unchecked); flex:none}
.steps li.now .dot{border-color:var(--accent); border-right-color:transparent; animation:spin .8s linear infinite}

.checkhead{display:grid; grid-template-columns:var(--thumb-w) 1fr; gap:var(--s-md); align-items:start}
.checkhead img{width:var(--thumb-w); height:var(--thumb-h); object-fit:cover; border-radius:var(--r-sm); box-shadow:var(--shadow-md); cursor:zoom-in; display:block}
.checkhead h2{font-size:var(--t-sheet)}
.checkhead p{margin:var(--s-xxs) 0 0; font-size:var(--t-sm); color:var(--muted)}
.checkhead .link{min-height:var(--s6); font-size:var(--t-sm)}
.unsure{border-radius:var(--r-md); padding:var(--s3) var(--s-md); background:var(--open-bg); border:var(--hair) solid var(--open-border); color:var(--open-ink); display:grid; grid-template-columns:auto 1fr; gap:var(--s2); font-size:var(--t-md)}
.unsure i{margin-top:var(--s-3)}
.unsure p{margin:0}
.crow{display:grid; grid-template-columns:var(--check) 1fr auto; gap:var(--s3); align-items:center; min-height:var(--row-h-check); padding:var(--s1) var(--s2); margin:0 calc(var(--s2) * -1); border-radius:var(--r-row); cursor:pointer}
.crow input{position:absolute; opacity:0; pointer-events:none}
.crow .box{width:var(--check); height:var(--check); border-radius:var(--r-check); border:var(--bw) solid var(--unchecked); background:var(--bg); display:grid; place-items:center; color:var(--accent-ink)}
.crow .box i{display:none; font-size:var(--icon-xs)}
.crow input:checked + .box{background:var(--accent); border-color:var(--accent)}
.crow input:checked + .box i{display:block}
.crow:has(input:focus-visible){outline:var(--bw) solid var(--focus); outline-offset:var(--bw)}
.crow .t{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.crow .t small{font-size:var(--t-sm); color:var(--muted)}
.crow.flag{background:var(--open-bg)}
.crow.flag .t small{color:var(--open-ink); font-weight:var(--w-semibold)}
.crow .link{font-size:var(--t-sm)}

.spin{display:inline-block; width:1em; height:1em; border:var(--bw) solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin,.steps li.now .dot{animation:none}}

/* ---------- sign-in pages ---------- */
.auth{min-height:100vh; display:grid; place-items:center; padding:var(--s6) var(--s4)}
.auth .card{width:100%; max-width:var(--auth-max); padding:var(--s6) var(--s5); gap:var(--s4); border-radius:var(--r-sheet)}
.auth h1{font-size:var(--t-big)}
.auth .brand{font-family:var(--f-display); font-weight:var(--w-semibold); font-size:var(--t-base); margin:0}
.auth .err{color:var(--open-ink); font-weight:var(--w-semibold); margin:0}
.auth form{display:flex; flex-direction:column; gap:var(--s3)}
.auth .pill.primary{min-height:var(--btn-h-md); font-size:var(--t-base)}
.auth .lede{margin:var(--s1) 0 0}
.auth form .lede{margin:0}
.dlg form p,.card p,.content > p,.intro h2 + p{margin:0}
.intro p{margin-top:var(--s1)}
.photo img{aspect-ratio:4/3}
.row-links .link{white-space:nowrap}
.auth .row-links{justify-content:space-between; flex-wrap:wrap}