/* Tari's Day: all styles. Two parts, merged from the design mockups (mockup/core.css, then the style block of
   mockup/week-strip.html), followed by styles for the real-app pieces: sign-in and startup screens, change-or-remove
   tasks (edit mode), the install card, the bottom bar, the Settings sheet and its pages, and the "not saved yet" banner. */

/* ===== part 1: shared pieces (from mockup/core.css) ===== */
:root{
  color-scheme:light;
  --bg:#FFF4F7; --paper:#FFFFFF; --ink:#3A2530; --ink-soft:#6E5560;
  --accent:#C94370; --accent-edge:#A3325A; --on-accent:#FFFFFF; --accent-ink:#B23A63;
  --pink:#F5B8CB; --pink-soft:#FFEFF4; --yellow:#FFE08A; --yellow-soft:#FFF6D6; --yellow-ink:#6B5000;
  --line:#F2DCE3; --shadow:rgba(150,60,95,.12); --scrim:rgba(47,34,38,.42);
  --display:"Nunito",system-ui,sans-serif; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:18px; --btn-radius:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* sample-mode bar (deliberately plain so it reads as "not part of the app") */
.demo-bar{position:relative;z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;
  max-width:480px;margin:8px auto 0;padding:4px 10px;font:700 13px/1.3 "Nunito",system-ui,sans-serif;color:#6E5560;
  background:rgba(255,255,255,.92);border:1.5px dashed #E4B5C5;border-radius:14px;
  margin-left:max(16px, env(safe-area-inset-left,0px));margin-right:max(16px, env(safe-area-inset-right,0px))}
@media (min-width:512px){.demo-bar{margin-left:auto;margin-right:auto}}
.demo-link{color:#A12D5B;font-weight:800;text-decoration:none;padding:6px 2px}
.demo-btns{display:flex;gap:2px}
.demo-btns button{font-weight:800;color:#A12D5B;background:none;border:0;padding:6px;cursor:pointer}

/* buttons + small controls */
.btn{font-weight:800;font-size:17px;border-radius:var(--btn-radius);padding:12px 20px;border:0;cursor:pointer;min-height:52px}
.btn.primary{background:var(--btn);color:var(--on-accent)}
.btn.soft{background:var(--pink-soft);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink-soft)}
.btn.light{background:var(--paper);color:var(--accent-ink)}
.btn.full{width:100%}
.btn.big{font-size:18px;min-height:58px;margin-top:24px}
.btn:disabled{opacity:.45;cursor:default}
.linkbtn{display:inline-block;background:none;border:0;font-weight:700;color:var(--accent-ink);padding:12px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{font-weight:700;border-radius:var(--btn-radius);border:2px solid var(--line);background:var(--paper);color:var(--ink);padding:10px 16px;min-height:48px;cursor:pointer}
.input{font:inherit;font-size:18px;font-weight:600;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
.input::placeholder{color:var(--ink-soft);opacity:.8;font-weight:500}
.input:focus{outline:none;border-color:var(--accent)}
.input.slim{padding:10px 14px;font-size:16px}
.daterow{display:flex;gap:8px;margin-top:10px;align-items:center}
.daterow .input{flex:1;min-width:0}

/* pop-up sheet (its max height is divided by the text-size zoom, which also scales vh units): slides up from the bottom when it opens (.35s, easing out) and back down when it closes (.3s,
   easing in), with the dim background fading in step. app.js hides it only when the slide has finished. It sits
   above the bottom bar (z-index 30) the whole time. */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;opacity:0;transition:opacity .3s ease}
.scrim.show{opacity:1;transition:opacity .35s ease}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:calc(90vh / var(--zoom,1));max-height:calc(90dvh / var(--zoom,1));overflow:auto;overflow-x:hidden;overscroll-behavior:contain;background:var(--bg);border-radius:28px 28px 0 0;box-shadow:0 -10px 40px var(--shadow);
  padding-top:18px;padding-left:max(18px, env(safe-area-inset-left,0px));padding-right:max(18px, env(safe-area-inset-right,0px));padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.9,.6)}
.sheet.show{transform:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sheet-in{max-width:480px;margin:0 auto}
/* new content in a sheet that stays open fades and rises in, so the change is visible */
#sheet-body.swap{animation:sheetswap .3s ease-out}
@keyframes sheetswap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Settings pages: the next page slides in from the right, going back slides in from the left (the sheet clips it) */
#sheet-body.page-next{animation:pagenext .3s cubic-bezier(.2,.8,.2,1)}
#sheet-body.page-prev{animation:pageprev .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pagenext{from{transform:translateX(100%)}to{transform:none}}
@keyframes pageprev{from{transform:translateX(-100%)}to{transform:none}}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sheet-head .sheet-title{flex:1;min-width:0;padding-top:4px}
.sheet-cancel{flex:none;min-height:48px;min-width:48px;margin:-4px -10px 0 0;padding:0 12px;border:0;border-radius:999px;background:transparent;
  color:var(--accent-ink);font-weight:800;font-size:18px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.field-err{margin:4px 0 0;color:var(--accent-ink);font-weight:800;font-size:16px}
.picks-empty{padding:8px 2px}
.sheet-title{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.15;margin:0;color:var(--ink);text-wrap:balance}
.sheet-sub{margin:6px 0 0;color:var(--ink-soft);font-weight:600}
.center{text-align:center}
.field{display:grid;gap:8px;margin-top:20px}
.label{font-family:var(--display);font-weight:700;font-size:19px}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.choices.stack{grid-template-columns:1fr}
.choice{font-weight:800;font-size:16px;padding:10px 8px;border-radius:calc(var(--radius) * .8);border:2px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.choices.stack .choice{align-items:flex-start;text-align:left;padding:12px 16px;min-height:0}
.choice small{font-weight:600;font-size:15px;color:var(--ink-soft);line-height:1.25}
.choice[aria-pressed="true"]{border-color:var(--accent);background:var(--pink-soft)}
.picks{display:grid;gap:10px;margin-top:18px}
.pick{width:100%;text-align:left;font-weight:700;font-size:18px;padding:16px 18px;border-radius:calc(var(--radius) * .8);border:2px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.pick:hover,.pick:active{border-color:var(--accent)}
.burst{display:grid;place-items:center;margin:0 0 4px}
.burst svg{width:124px;height:124px}
.rays{transform-box:view-box;transform-origin:60px 60px;animation:spin 9s linear infinite}
.bpop{transform-box:view-box;transform-origin:60px 60px;animation:pop .55s cubic-bezier(.3,1.6,.5,1)}

.toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + var(--fab-rise) + 18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);background:var(--ink);color:#fff;font-weight:700;padding:12px 20px;border-radius:999px;opacity:0;transition:opacity .22s, transform .22s;z-index:50;max-width:calc(100% - 32px);width:max-content;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;width:10px;height:10px;border-radius:3px;pointer-events:none;z-index:60}

@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  /* less motion: sheets don't slide, they fade quickly in and out instead (never an instant jump) */
  .sheet{transform:none!important;opacity:0;transition:opacity .2s ease!important}
  .sheet.show{opacity:1}
  .scrim{transition:opacity .2s ease!important}
  #sheet-body.swap,#sheet-body.page-next,#sheet-body.page-prev{animation:sheetfade .2s ease-out!important}
}
@keyframes sheetfade{from{opacity:0}to{opacity:1}}

/* ===== part 2: the chosen design (from mockup/week-strip.html) ===== */
/* Seven rainbow themes (data-palette on <html>); Pink Lemonade is the default. Backgrounds stay calm: two
   close pastel stops and one soft glow. Each theme also picks its glass in THEMES below (data-cards).
   --btn is a slightly softer, rosier step from --accent for the solid primary buttons, the round Add button
   (--btn-grad) and the selected day pill: the lightest shade that still gives white text 4.5:1 contrast. */
:root{
  color-scheme:light;
  --paper:#FFFFFF; --card:rgba(255,255,255,.88); --on-accent:#FFFFFF;
  --yellow:#FFE08A; --yellow-ink:#6B5000; --gold:#E0A100; --scrim:rgba(40,30,36,.42);
  --display:"Quicksand","Nunito",system-ui,sans-serif; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:22px; --btn-radius:16px;
  --bar-h:72px;      /* the bottom bar's height (plus the phone's safe area under it) */
  --fab-rise:22px;   /* how far the round Add button rises above the bar */
  --bg:#FFEFF3; --bg-grad:radial-gradient(90% 50% at 90% 0%,#FFC8D899 0%,#FFC8D800 70%),linear-gradient(170deg,#FFEFF3 0%,#FFF8E5 100%);
  --ink:#3B2A33; --ink-soft:#6A5460;
  --accent:#C04A63; --accent-edge:#A23A52; --accent-ink:#A23F58; --accent-grad:linear-gradient(135deg,#DE7189,#C04A63);
  --btn:#C44F68; --btn-grad:linear-gradient(135deg,#DE7189,#C44F68);
  --pink:#F4B4C0; --pink-soft:#FFEDF0; --peach:#FFD8CB; --peach-soft:#FFF1EB; --yellow-soft:#FFF6D8; --yellow-line:#F3D678;
  --check-line:#E9A2B2; --hover:#FFF9FA; --hero-grad:linear-gradient(135deg,#FFD3E0 0%,#FFE6D6 45%,#FFF1BF 100%); --bar-grad:linear-gradient(90deg,#FFD36E,#F4A0B7 45%,#C04A63);
  --line:#F5E2E6; --shadow:rgba(170,80,100,.12); --seg-bg:rgba(240,190,206,.38); --chip:#FFE5EC; --chip-2:#FFF0C7;
  --glow-a:#FFC8D8; --glow-b:#FFE8A6; --glow-c:#FFD9C9;
}
:root[data-palette="strawberry"]{
  --bg:#FFF0F3; --bg-grad:radial-gradient(90% 50% at 90% 0%,#FFC4D399 0%,#FFC4D300 70%),linear-gradient(170deg,#FFF0F3 0%,#FFF9F7 100%);
  --ink:#3B2A33; --ink-soft:#6A5460;
  --accent:#C2456A; --accent-edge:#A0375A; --accent-ink:#A63C5E; --accent-grad:linear-gradient(135deg,#E2718F,#C2456A);
  --btn:#C64B6F; --btn-grad:linear-gradient(135deg,#E2718F,#C64B6F);
  --pink:#F6B1C5; --pink-soft:#FFEEF3; --peach:#FFE0E6; --peach-soft:#FFF4F6; --yellow-soft:#FFF7DE; --yellow-line:#F1D27E;
  --check-line:#EDA3BA; --hover:#FFFAFB; --hero-grad:linear-gradient(135deg,#FFC9D8 0%,#FFE4EC 55%,#FFF6EE 100%); --bar-grad:linear-gradient(90deg,#FFD6E2,#F49AB6 50%,#C2456A);
  --line:#F6E2E8; --shadow:rgba(180,70,110,.12); --seg-bg:rgba(240,184,202,.38); --chip:#FFE6EE; --chip-2:#FFD6E2;
  --glow-a:#FFC4D3; --glow-b:#FFE3EA; --glow-c:#FFD3DE;
}
:root[data-palette="peach"]{
  --bg:#FFF0E8; --bg-grad:radial-gradient(90% 50% at 90% 0%,#FFC9B599 0%,#FFC9B500 70%),linear-gradient(170deg,#FFF0E8 0%,#FFF7E6 100%);
  --ink:#3B2A2A; --ink-soft:#6C5650;
  --accent:#B4474C; --accent-edge:#933840; --accent-ink:#9E3F44; --accent-grad:linear-gradient(135deg,#D86A5E,#B4474C);
  --btn:#C15453; --btn-grad:linear-gradient(135deg,#D86A5E,#C15453);
  --pink:#F5B5A8; --pink-soft:#FFEEE8; --peach:#FFD2BF; --peach-soft:#FFF0E8; --yellow-soft:#FFF4D6; --yellow-line:#F2CF7A;
  --check-line:#ECA594; --hover:#FFF8F4; --hero-grad:linear-gradient(135deg,#FFCDB8 0%,#FFD9DE 45%,#FFEDBE 100%); --bar-grad:linear-gradient(90deg,#FFD884,#F6A98F 45%,#B4474C);
  --line:#F6E1D8; --shadow:rgba(180,90,60,.12); --seg-bg:rgba(240,186,164,.36); --chip:#FFE7DE; --chip-2:#FFEFC9;
  --glow-a:#FFC9B5; --glow-b:#FFE3B8; --glow-c:#FFD0D8;
}
:root[data-palette="butter"]{
  --bg:#FFF8E2; --bg-grad:radial-gradient(90% 50% at 90% 0%,#FFE59A99 0%,#FFE59A00 70%),linear-gradient(170deg,#FFF8E2 0%,#FFFCF2 100%);
  --ink:#3A2E1A; --ink-soft:#6E604A;
  --accent:#9C6200; --accent-edge:#7C4E00; --accent-ink:#865500; --accent-grad:linear-gradient(135deg,#B57A12,#9C6200);
  --btn:#A56A06; --btn-grad:linear-gradient(135deg,#B57A12,#A56A06);
  --pink:#FFE08A; --pink-soft:#FFF6D6; --peach:#FFE9B0; --peach-soft:#FFF8E2; --yellow-soft:#FFF6D6; --yellow-line:#EBC660;
  --check-line:#E2BE62; --hover:#FFFCF2; --hero-grad:linear-gradient(135deg,#FFE39A 0%,#FFF0C4 55%,#FFF9E6 100%); --bar-grad:linear-gradient(90deg,#FFE7A0,#E8B43C 50%,#9C6200);
  --line:#F3E8C8; --shadow:rgba(160,120,30,.13); --seg-bg:rgba(236,210,130,.36); --chip:#FFF1C6; --chip-2:#FFE4A0;
  --glow-a:#FFE59A; --glow-b:#FFF0C2; --glow-c:#FFE2A8;
}
:root[data-palette="mint"]{
  --bg:#EEF9F2; --bg-grad:radial-gradient(90% 50% at 90% 0%,#C6EBD599 0%,#C6EBD500 70%),linear-gradient(170deg,#EEF9F2 0%,#F8FCF7 100%);
  --ink:#22332B; --ink-soft:#536259;
  --accent:#2E7D5B; --accent-edge:#22604A; --accent-ink:#276B4E; --accent-grad:linear-gradient(135deg,#43966F,#2E7D5B);
  --btn:#348461; --btn-grad:linear-gradient(135deg,#43966F,#348461);
  --pink:#BFE6CF; --pink-soft:#EAF7EF; --peach:#D8F1E3; --peach-soft:#F2FBF5; --yellow-soft:#FFF7DE; --yellow-line:#EBD58A;
  --check-line:#9ED3B6; --hover:#F6FCF8; --hero-grad:linear-gradient(135deg,#CDEEDB 0%,#E4F6EB 55%,#F6FBF4 100%); --bar-grad:linear-gradient(90deg,#D3F0DF,#7CC6A0 50%,#2E7D5B);
  --line:#E0EFE6; --shadow:rgba(40,110,80,.12); --seg-bg:rgba(160,210,184,.36); --chip:#E2F4E9; --chip-2:#CDEDDA;
  --glow-a:#C6EBD5; --glow-b:#DFF4E7; --glow-c:#D2F0E4;
}
:root[data-palette="sky"]{
  --bg:#EDF5FD; --bg-grad:radial-gradient(90% 50% at 90% 0%,#C9E2F899 0%,#C9E2F800 70%),linear-gradient(170deg,#EDF5FD 0%,#F8FBFE 100%);
  --ink:#1F2D3D; --ink-soft:#4F5F70;
  --accent:#2F6FA8; --accent-edge:#24578A; --accent-ink:#2A6296; --accent-grad:linear-gradient(135deg,#4C87BE,#2F6FA8);
  --btn:#3D7AB2; --btn-grad:linear-gradient(135deg,#4C87BE,#3D7AB2);
  --pink:#BFDBF3; --pink-soft:#EAF3FC; --peach:#D7E8F8; --peach-soft:#F2F8FD; --yellow-soft:#FFF7DE; --yellow-line:#EBD58A;
  --check-line:#9FC5E8; --hover:#F6FAFE; --hero-grad:linear-gradient(135deg,#CFE4F8 0%,#E5F0FB 55%,#F7FAFD 100%); --bar-grad:linear-gradient(90deg,#D6E8F9,#7FB0DC 50%,#2F6FA8);
  --line:#E0EAF4; --shadow:rgba(40,90,140,.12); --seg-bg:rgba(165,198,228,.36); --chip:#E2EEFA; --chip-2:#CFE2F6;
  --glow-a:#C9E2F8; --glow-b:#E0EEFB; --glow-c:#D3E6FA;
}
:root[data-palette="lavender"]{
  --bg:#F4EEFD; --bg-grad:radial-gradient(90% 50% at 90% 0%,#DCCBF699 0%,#DCCBF600 70%),linear-gradient(170deg,#F4EEFD 0%,#FBF8FE 100%);
  --ink:#2E2540; --ink-soft:#5F5570;
  --accent:#7A4FB0; --accent-edge:#613D8F; --accent-ink:#6B449C; --accent-grad:linear-gradient(135deg,#9270C4,#7A4FB0);
  --btn:#8A64BD; --btn-grad:linear-gradient(135deg,#9270C4,#8A64BD);
  --pink:#D8C6F2; --pink-soft:#F3EDFC; --peach:#E6DAF8; --peach-soft:#F8F4FE; --yellow-soft:#FFF7DE; --yellow-line:#EBD58A;
  --check-line:#C4AEE6; --hover:#FBF9FE; --hero-grad:linear-gradient(135deg,#E0D0F8 0%,#EFE6FC 55%,#FAF7FE 100%); --bar-grad:linear-gradient(90deg,#E5D8F9,#B194E0 50%,#7A4FB0);
  --line:#EBE3F5; --shadow:rgba(100,70,150,.12); --seg-bg:rgba(205,186,236,.38); --chip:#EEE5FC; --chip-2:#E0D2F8;
  --glow-a:#DCCBF6; --glow-b:#ECE2FB; --glow-c:#E3D3F8;
}
body{background:var(--bg);color:var(--ink)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg-grad);pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The bottom padding keeps the last row clear of the bottom bar (and its raised Add button), plus breathing room;
   while "Back to today" shows, its height and gap are added too. */
.wrap{max-width:480px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) calc(var(--bar-h) + var(--fab-rise) + 32px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
body.has-back .wrap{padding-bottom:calc(var(--bar-h) + var(--fab-rise) + 14px + 58px + 32px + env(safe-area-inset-bottom,0px))}
body.has-back .toast{bottom:calc(var(--bar-h) + var(--fab-rise) + 14px + 58px + 14px + env(safe-area-inset-bottom,0px))}
.main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 6px 22px var(--shadow)}

.soft{color:var(--ink-soft);font-weight:600;font-size:16px;margin:0}
.kicker{margin:0;font-size:15px;font-weight:800;color:var(--accent-ink);letter-spacing:.02em}
.sheet-title{font-family:var(--display)}
.btn.primary{box-shadow:0 4px 0 var(--accent-edge)}
.btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--accent-edge)}

/* ---- bottom bar: My Day | round Add | Rewards (pinned to the bottom; the one glass layer for controls) ---- */
.tabbar{position:fixed;z-index:30;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom,0px);border-radius:24px 24px 0 0;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 -1px 0 rgba(255,255,255,.85),0 -6px 22px var(--shadow)}
.tabbar-in{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:center;gap:6px;height:var(--bar-h);padding:8px 10px}
.tab-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:56px;height:100%;padding:4px 6px;border:0;border-radius:20px;
  background:transparent;color:var(--ink-soft);font-family:var(--display);font-weight:700;cursor:pointer}
.tab-btn[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 3px 10px var(--shadow)}
/* Rewards tab while a reward waits for her (to enjoy or to pick): a soft theme-coloured ring and glow, no number */
.tab-btn.pending{color:var(--accent-ink);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 2px var(--accent),0 0 14px 2px var(--pink)}
.tab-btn.pending[aria-pressed="true"]{background:var(--paper);box-shadow:inset 0 0 0 2px var(--accent),0 0 14px 2px var(--pink),0 3px 10px var(--shadow)}
.tab-ico{display:flex;align-items:center;gap:5px;height:24px}
.tab-ico > svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab-lbl{font-size:17px;line-height:1.1;white-space:nowrap}
.tab-mid{display:flex;justify-content:center;align-self:stretch}
.add-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:84px;height:56px;padding:0 0 2px;border:0;background:none;color:var(--ink);cursor:pointer}
.add-circle{position:absolute;left:50%;top:-30px;transform:translateX(-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--btn-grad);color:var(--on-accent);box-shadow:0 0 0 4px rgba(255,255,255,.9),0 8px 20px var(--shadow)}
.add-circle svg{width:30px;height:30px}
.add-btn:active .add-circle{transform:translateX(-50%) scale(.95)}
.add-lbl{font-weight:800;font-size:16px;line-height:1.1}
/* edit mode: its banner sticks to the top of the screen */
.editbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin:0 -16px 8px;padding:10px 16px;border-radius:0 0 24px 24px;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.85),0 6px 20px var(--shadow)}

/* ---- greeting: date with the Settings gear on its right, then greeting + points badge ---- */
.hello{display:grid;gap:0;padding:2px 4px 2px}
.hello-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.hello-date{margin:0;min-width:0;font-weight:700;font-size:16px;color:var(--ink-soft)}
.gear-btn{flex:none;display:grid;place-items:center;width:48px;height:48px;margin-right:-8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer}
.gear-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gear-btn:active{background:rgba(255,255,255,.6)}
.hello-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hello h1{margin:0;min-width:0;font-family:var(--display);font-weight:700;font-size:30px;line-height:1.15;text-wrap:balance;overflow-wrap:anywhere}
.savebanner{margin:0;padding:12px 16px;border-radius:18px;background:var(--yellow-soft);border:1.5px solid var(--yellow-line);color:var(--ink);font-weight:700;font-size:16px;line-height:1.35}
.pts{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;min-height:76px;border-radius:24px;
  background:var(--yellow-soft);border:2px solid var(--yellow-line);cursor:pointer;padding:6px}
.pts-num{display:flex;align-items:center;gap:3px;font-family:var(--display);font-weight:700;font-size:28px;line-height:1}
.pts-num svg{width:20px;height:20px;color:var(--gold)}
.pts-lbl{font-size:15px;font-weight:700;color:var(--ink-soft)}

/* ---- week strip ---- */
.week{padding:10px 2px 12px}
.wk-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:0 4px 10px}
.wk-btn{min-height:48px;padding:0 12px;border:0;border-radius:999px;background:var(--pink-soft);color:var(--accent-ink);font-weight:800;font-size:16px;cursor:pointer;white-space:nowrap}
.wk-btn b{font-size:22px;line-height:0;vertical-align:-1px}
.wk-label{text-align:center;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;text-wrap:balance}
.pills{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}   /* minmax(0,..) + 1px gap: seven day pills fit at 360px wide even at Largest text, each about 44px wide */
.pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:78px;padding:6px 0;border-radius:22px;
  border:2px solid transparent;background:transparent;cursor:pointer}
.pill-day{font-size:15px;font-weight:700;color:var(--ink-soft)}
.pill-num{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1;color:var(--ink)}
.pill-dot{width:8px;height:8px;border-radius:50%;background:transparent;margin-top:2px}
.pill.got .pill-dot{background:var(--accent)}
.pill.is-today{background:var(--yellow-soft);border-color:var(--yellow-line)}
.pill.sel{background:var(--btn);border-color:var(--btn)}   /* solid, not the gradient: white text needs the contrast */
.pill.sel .pill-day,.pill.sel .pill-num{color:var(--on-accent)}
.pill.sel.got .pill-dot{background:#fff}
.pill.sel.is-today{box-shadow:0 0 0 3px var(--yellow)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;margin:10px 0 0;font-size:15px;font-weight:600;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.lg-today,.lg-dot{display:inline-block;flex:none}
.lg-today{width:16px;height:16px;border-radius:6px;background:var(--yellow-soft);border:2px solid var(--yellow-line)}
.lg-dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* ---- missed card ---- */
.missed{padding:18px;background:var(--peach-soft);border:2px solid var(--peach);box-shadow:none}
.missed-name{margin:4px 0 4px;font-weight:800;font-size:20px;line-height:1.3}
.mbtns{display:grid;gap:8px;margin-top:14px}
.mbtns .btn{width:100%}
.mbtns .btn.soft{background:var(--paper);border:2px solid var(--peach);color:var(--accent-ink)}
.missed .label{display:block;margin-top:14px}
.missed .daterow .btn{flex:none}
/* the round icon on the Rewards screen's "big reward to pick" and "waiting" cards */
.nudge-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--paper);color:var(--accent-ink)}
.nudge-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- hero: the daily point ring ---- */
.hero{display:flex;align-items:center;gap:18px;padding:20px;background:var(--hero-grad);box-shadow:none}
.ring-wrap{position:relative;flex:none;width:112px;height:112px}
.ring{width:112px;height:112px;display:block}
.ring-track{fill:none;stroke:rgba(255,255,255,.9);stroke-width:11}
.ring-fill{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;transition:stroke-dasharray .5s}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring-mid b{font-family:var(--display);font-weight:700;font-size:30px}
.ring-mid small{font-size:15px;font-weight:700;color:var(--ink-soft);margin-top:2px}
.ring-mid svg{width:46px;height:46px;color:var(--gold)}
.hero-text{min-width:0}
.hero h2{margin:0;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15}
.hero-count{margin:4px 0 4px;font-weight:800;font-size:18px}

/* ---- the other-day title ---- */
.daytitle{padding:2px 4px 0}
.daytitle h2{margin:2px 0 4px;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15}

/* ---- the lists: each section (Today, This week, Anytime, Coming later) is its own card ---- */
.list{overflow:hidden}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:18px 18px 8px;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}
.sec-title{margin:0;font-family:var(--display);font-weight:700;font-size:24px}
.sec-count{font-size:15px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:12px 12px 12px 18px;border:0;border-top:1px solid var(--line);
  background:transparent;text-align:left;color:var(--ink);cursor:pointer}
.sec + .row{border-top:0}
button.row:hover{background:var(--hover)}
button.row:active{background:var(--pink-soft)}
.row-main{flex:1;min-width:0;display:grid;gap:4px}
.row-name{font-weight:700;font-size:19px;line-height:1.3;overflow-wrap:anywhere}
/* the small info line under the name: info text (or due tag) on the left, the level pill pushed to the right end, so
   the pills line up in a column beside the check circle (when there is no room it wraps under, still on the right) */
.row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px;font-weight:600;color:var(--ink-soft)}
.row-meta .lvl{margin-left:auto}
.row-check{flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:3px}
.check{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:3px solid var(--check-line);background:var(--paper);color:var(--accent-ink);transition:background .15s,border-color .15s}
.check svg{width:24px;height:24px;opacity:0}
.check-lbl{font-size:15px;font-weight:800;color:var(--accent-ink);min-height:1px}
.row.done .check{background:var(--pink);border-color:var(--check-line)}   /* soft fill, theme-ink tick (3:1+ on every theme) */
.row.done .check svg{opacity:1}
.row.done .row-name{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--pink);text-decoration-thickness:2px}
/* Coming later: a dashed, faded circle (named "soon", not "wait": .wait is the Rewards card and its border rules would win) */
.check.soon{border:3px dashed var(--check-line);background:transparent;opacity:.7}
.row.later{cursor:default}
.row.later .check-lbl,.row.static .check-lbl{color:var(--ink-soft)}
.row.static{cursor:default}
.row.static.done .row-name{text-decoration:none;color:var(--ink)}
.empty{padding:22px 20px;text-align:center}
.empty p{margin:0}
.empty .big{font-weight:800;font-size:19px;margin-bottom:4px}

/* ---- "Back to today": floats centred just above the bottom bar and its raised Add button ---- */
.back-today{position:fixed;z-index:25;left:50%;transform:translateX(-50%);bottom:calc(var(--bar-h) + var(--fab-rise) + 14px + env(safe-area-inset-bottom,0px));
  height:58px;padding:0 22px 0 16px;border-radius:999px;border:2px solid var(--yellow-line);background:var(--yellow);color:var(--ink);white-space:nowrap;
  font-weight:800;font-size:18px;cursor:pointer;box-shadow:0 8px 22px rgba(140,100,0,.22)}
.back-today b{font-size:24px;line-height:0;vertical-align:-2px;margin-right:4px}

/* ---- collapsible headers ---- */
.sec{display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:12px 14px 12px 18px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.sec:first-child{border-top:0}
.fold-title{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;overflow-wrap:anywhere}
.fold-word{flex:none;margin-right:-4px;font-size:15px;font-weight:800;color:var(--accent-ink);white-space:nowrap}
.chev{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pink-soft);color:var(--accent-ink);font-weight:800;font-size:22px;line-height:1;transform:rotate(90deg);transition:transform .2s}
[aria-expanded="false"] > .chev{transform:rotate(0deg)}
.wk-fold{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 6px 6px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.wk-fold .fold-title{font-size:20px}
.week.folded{padding:10px 8px 6px}
.hero{position:relative}
.hero h2{padding-right:64px}
.hide-btn{position:absolute;top:8px;right:8px;min-height:48px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.75);color:var(--accent-ink);font-weight:800;font-size:15px;cursor:pointer}
.hero-mini{padding:4px 2px}
.mini-fold{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:4px 12px 4px 16px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.mini-fold .fold-title{font-size:20px}
.fold-h2{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink);padding:4px}
.fold-h2 .fold-title{font-size:24px}

/* ---- rewards ---- */
.h2{margin:8px 4px -4px;font-family:var(--display);font-weight:700;font-size:24px}
.rhero{padding:24px 20px;text-align:center;background:var(--hero-grad);box-shadow:none}
.rhero-num{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:700;font-size:60px;line-height:1}
.rhero-num svg{width:44px;height:44px;color:var(--gold)}
.rhero-lbl{margin:6px 0 8px;font-weight:800;font-size:19px}
.topick{padding:18px;display:grid;gap:12px;border:2px solid var(--peach);background:var(--peach-soft);box-shadow:none}
.topick-top{display:flex;gap:14px;align-items:center}
.topick h3,.wait h3{margin:0;font-weight:800;font-size:19px}
.topick .nudge-icon svg{fill:currentColor;stroke:none;color:var(--gold)}
.tiers{padding:6px 18px}
.tier{padding:16px 0;border-top:1px solid var(--line);display:grid;gap:8px}
.tier:first-child{border-top:0}
.tier-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tier-name{font-weight:800;font-size:19px}
.tier-cost{font-weight:700;font-size:16px;color:var(--ink-soft)}
.bar{height:14px;border-radius:999px;background:var(--pink-soft);overflow:hidden}
.bar span{display:block;height:100%;border-radius:999px;background:var(--bar-grad)}
.tier .btn{margin-top:4px}
.wait{padding:16px 18px;display:grid;gap:12px;background:var(--yellow-soft);border:2px solid var(--yellow-line);box-shadow:none}
.wait-top{display:flex;gap:14px;align-items:center}
.ideas{overflow:hidden}
.idea + .idea{border-top:1px solid var(--line)}
.idea-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:64px;padding:0 18px;border:0;background:transparent;text-align:left;cursor:pointer}
.idea-head .t{font-weight:800;font-size:19px}
.idea-go{font-weight:800;font-size:16px;color:var(--accent-ink);background:var(--pink-soft);border-radius:999px;padding:6px 14px}
.idea-body{padding:0 18px 18px}
.idea-list{list-style:none;margin:0 0 12px;padding:0}
.idea-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:600}
.rm{flex:none;min-height:48px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:var(--paper);color:var(--ink-soft);font-weight:800;font-size:15px;cursor:pointer}
.addrow{display:flex;gap:8px}
.addrow .input{flex:1;min-width:0}
.addrow .btn{flex:none}
.hist{padding:4px 18px}
.hist li{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.hist li:first-child{border-top:0}
.hist ul{list-style:none;margin:0;padding:0}
.hist .n{font-weight:700;font-size:18px}

/* ===== card styles (data-cards on <html>) =====
   Refined after the Apple HIG and polished-app research: cards stay mostly solid so text is easy to read,
   glass is "thick" (like Apple's Regular material), colour comes as gentle tints, shadows are soft and wide.
   Every style restyles EVERY card; coloured notice cards keep their colour as a "tone". */
.card{--tone:var(--pink);--tone-soft:var(--pink-soft)}
.missed,.topick{--tone:var(--peach);--tone-soft:var(--peach-soft)}
.wait{--tone:var(--yellow-line);--tone-soft:var(--yellow-soft)}
.week{--tone:var(--peach);--tone-soft:var(--yellow-soft)}
:root{--lift:0 1px 2px rgba(120,60,80,.05),0 10px 28px var(--shadow)}

/* Glass needs colour behind it or it just reads as white. For the two glass styles only, three big, very
   soft glows in the theme's own colours sit behind the page; they stay put while the cards
   scroll over them, so the glass picks up shifting colour without the background looking busy. */
/* wide, very soft washes rather than distinct orbs */
html[data-cards="frosted"] body::after,html[data-cards="clear"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 55% at 100% 15%,var(--glow-a) 0%,transparent 78%),
    radial-gradient(110% 60% at 0% 60%,var(--glow-b) 0%,transparent 80%),
    radial-gradient(120% 55% at 90% 100%,var(--glow-c) 0%,transparent 80%);opacity:.7}

/* Frosted glass: milky glass that picks up the colour behind it, with a bright sheen along the top */
html[data-cards="frosted"] .card{background:linear-gradient(140deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.34) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #FFFFFF,inset 0 0 0 1px rgba(255,255,255,.25),var(--lift)}
html[data-cards="frosted"] :is(.missed,.wait,.topick){border:1.5px solid var(--tone)}

/* Light glass: thin, clearer glass; much more of the colour shows through */
html[data-cards="clear"] .card{background:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(12px) saturate(1.7);backdrop-filter:blur(12px) saturate(1.7);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 18px var(--shadow)}
html[data-cards="clear"] :is(.missed,.wait,.topick){border:1.5px solid var(--tone)}

/* the one coloured hero card stays a gentle gradient in every style (colour in one place, not everywhere) */
html[data-cards] :is(.hero,.rhero){background:var(--hero-grad)}


/* buttons: solid pills with a soft shadow instead of a hard ledge; secondary buttons are tonal */
.btn{border-radius:999px;min-height:56px;font-size:18px}
.btn.primary{box-shadow:0 6px 16px var(--shadow)}
.btn.primary:active{transform:scale(.98);box-shadow:0 3px 8px var(--shadow)}
.mbtns .btn.soft{background:#FFFFFF;border:0;box-shadow:inset 0 0 0 1.5px var(--check-line);color:var(--accent-ink)}

/* people who ask their phone for less transparency get solid cards */
@media (prefers-reduced-transparency: reduce){
  .card,.tabbar,.editbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .tabbar,.editbar{background:#FFFFFF}
  html[data-cards="frosted"] .card,html[data-cards="clear"] .card{background:#FFFFFF}
}

/* ---- pills and badges: theme-coloured, one height, one shape ---- */
.row-meta{gap:6px 8px}
.lvl,.due-tag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-weight:800;font-size:15px;line-height:1;border:0;white-space:nowrap}
/* level pills: one family per theme, light -> heavy (Easy outline, Medium soft fill, Big fuller fill), same everywhere */
.lvl{flex:none;justify-content:center;min-width:74px;border:1.5px solid var(--check-line);color:var(--accent-ink)}
.lvl-easy{background:transparent}
.lvl-medium{background:var(--pink-soft)}
.lvl-big{background:var(--pink);color:var(--ink)}
.due-tag{background:#FFFFFF;color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.due-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* points: a soft white badge with a gold star in the greeting */
.pts-num svg{color:var(--gold)}
.pts{background:rgba(255,255,255,.78);border:1px solid #FFFFFF;box-shadow:var(--lift);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* the Settings pages: Text size (sizes) and Colors (themes) */
.size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.size-btn{display:grid;justify-items:start;align-content:center;gap:4px;min-height:84px;padding:10px 14px;border:0;border-radius:20px;background:#FFFFFF;
  box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);cursor:pointer;text-align:left}
.size-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--accent)}
.size-aa{font-family:var(--display);font-weight:700;line-height:1.1}
.size-name{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;font-weight:800;font-size:16px}
.size-name svg{width:20px;height:20px;color:var(--accent);flex:none}
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.theme-btn{position:relative;display:grid;gap:8px;padding:8px;border:0;border-radius:22px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;text-align:left;color:var(--ink)}
.theme-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--accent)}
.theme-prev{position:relative;display:block;height:88px;border-radius:16px;overflow:hidden}
.theme-card{position:absolute;left:12px;right:12px;top:16px;height:30px;border-radius:12px;border:1px solid rgba(255,255,255,.95)}
.theme-card + .theme-card{top:52px;right:40px;height:20px}
.theme-dot{position:absolute;right:12px;bottom:12px;width:22px;height:22px;border-radius:50%}
.theme-name{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 6px 4px;font-weight:800;font-size:16px}
.theme-name svg{width:20px;height:20px;color:var(--accent);flex:none}
/* the Settings menu: one full-width row per page (SET_PAGES in app.js), white on the sheet with a fine line */
.set-menu{display:grid;gap:10px;margin-top:18px}
.set-row{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:8px 14px 8px 12px;border:1.5px solid var(--line);border-radius:20px;
  background:#FFFFFF;color:var(--ink);cursor:pointer;text-align:left}
.set-row:active{background:var(--hover)}
.set-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pink-soft);color:var(--accent-ink)}
.set-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.set-word{flex:1;min-width:0;font-weight:800;font-size:19px;line-height:1.25}
.set-go{flex:none;font-size:30px;line-height:1;font-weight:700;color:var(--accent-ink)}
/* a Settings page: the "‹ Settings" back button, then the page title */
.set-back{display:inline-flex;align-items:center;gap:6px;min-height:48px;margin:-8px 0 2px -10px;padding:0 14px 0 10px;border:0;border-radius:999px;background:transparent;
  color:var(--accent-ink);font-weight:800;font-size:18px;cursor:pointer}
.set-back b{font-size:30px;line-height:0;margin-top:-3px}
/* the every-day / every-week task lists: rows like My Day's, each opening the Change form */
.set-list{margin-top:16px;border:1.5px solid var(--line);border-radius:20px;background:#FFFFFF;overflow:hidden}
.set-task{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:12px 12px 12px 16px;border:0;border-top:1px solid var(--line);
  background:transparent;text-align:left;color:var(--ink);cursor:pointer}
.set-task:first-child{border-top:0}
.set-task:active{background:var(--pink-soft)}
.set-task .row-meta .lvl{margin-left:0}
.set-empty{margin:16px 2px 0}
.set-add{margin-top:16px}

/* ===== part 3: the real app ===== */
.demo-note{font-weight:800;color:#A12D5B;padding:6px 2px}

/* ---- startup, sign-in and "can't reach the internet" screens ---- */
.gate{min-height:calc(100vh / var(--zoom,1));min-height:calc(100dvh / var(--zoom,1));display:grid;place-items:center;padding:24px max(16px, env(safe-area-inset-left,0px))}
.gate-card{width:100%;max-width:420px;padding:34px 24px 28px;text-align:center;display:grid;justify-items:center;gap:14px}
.gate-icon{width:96px;height:96px;border-radius:24px;box-shadow:0 8px 22px var(--shadow)}
.gate h1{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:34px;line-height:1.15;text-wrap:balance}
.gate h2{margin:0;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.2;text-wrap:balance}
.gate p{margin:0}
.gate .btn{width:100%;margin-top:6px}
.gate-load{font-family:var(--display);font-weight:700;font-size:24px;color:var(--ink-soft);animation:gatefade .5s .4s both}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;margin-top:10px;padding:0 20px;border:0;border-radius:999px;
  background:#FFFFFF;color:var(--ink);font:800 18px/1 var(--body);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--check-line),0 6px 16px var(--shadow)}
.gbtn:active{transform:scale(.98)}
.gbtn:disabled{opacity:.7;cursor:default}
.gbtn svg{width:24px;height:24px;flex:none}
.who{font-weight:800;overflow-wrap:anywhere}
@keyframes gatefade{from{opacity:0}to{opacity:1}}

/* ---- change or remove tasks (edit mode) ---- */
.list-foot{padding:14px 18px 18px;border-top:1px solid var(--line)}
.list-foot .btn{display:flex;align-items:center;justify-content:center;gap:10px}
.btn svg,.change-pill svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.editbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.editbar-text{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25}
.editbar .btn{flex:none;min-height:48px;padding:6px 26px}
.row-check.edit{width:auto}
.change-pill{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;border-radius:999px;background:var(--pink-soft);box-shadow:inset 0 0 0 1.5px var(--check-line);color:var(--accent-ink);font-weight:800;font-size:16px}
.change-pill svg{width:20px;height:20px}
.sec.static{cursor:default}
.confirm-btns{display:grid;gap:8px;margin-top:22px}
.confirm-btns .btn{margin:0}
.btn.danger{background:var(--paper);color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--accent)}
.btn.remove{margin-top:12px;display:flex;align-items:center;justify-content:center}

/* ---- install to home screen card ---- */
.install{display:grid;gap:12px;padding:16px 18px;border:2px solid var(--yellow-line);background:var(--yellow-soft);box-shadow:none}
.install-title{margin:0;font-family:var(--display);font-weight:700;font-size:21px;line-height:1.25}
.install-btns{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.install-btns .btn{margin:0;padding:10px 12px}

/* ---- the version, in small print at the very bottom of the Settings sheet ---- */
.ver{margin:18px 0 0;font-size:15px;font-weight:600;color:var(--ink-soft);opacity:.85;text-align:center}

/* ---- after Add / Change: the task's row glows softly for a moment so she sees where it landed ---- */
.row.flash{animation:rowflash 1.2s ease-out}
@keyframes rowflash{0%,40%{background:var(--pink-soft);box-shadow:inset 0 0 0 3px var(--accent)}100%{background:transparent;box-shadow:inset 0 0 0 3px transparent}}
@media (prefers-reduced-motion: reduce){.row.flash{background:var(--pink-soft);box-shadow:inset 0 0 0 3px var(--accent)}}