/* One-column phone app for older users. Hero element: a blister-pack strip with four intake pockets (breakfast, lunch, dinner, bedtime). Everything else stays plain, large and high-contrast. */
:root{
  color-scheme:light;
  --bg:#EDF2F3; --surface:#FFFFFF; --ink:#10242F; --muted:#48616E; --line:#CBD8DD;
  --strip:#D9E5E8; --strip2:#C9D9DD; --accent:#0B6E6E; --on-accent:#FFFFFF;
  --ok:#1B7F43; --on-ok:#FFFFFF; --ok-bg:#E0F2E7;
  --warn:#8F5A00; --warn-bg:#FFF0CC;
  --bad:#B3261E; --bad-bg:#FCE3E0;
  --display:'Lexend',system-ui,sans-serif;
  --body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C1A20; --surface:#14262E; --ink:#EAF2F4; --muted:#A3BAC4; --line:#2B434E;
    --strip:#1B323B; --strip2:#223C46; --accent:#4FC3C0; --on-accent:#04211F;
    --ok:#6FD59A; --on-ok:#05230F; --ok-bg:#12301F;
    --warn:#F2C264; --warn-bg:#3A2D0B;
    --bad:#FF9E96; --bad-bg:#401814;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1A20; --surface:#14262E; --ink:#EAF2F4; --muted:#A3BAC4; --line:#2B434E;
  --strip:#1B323B; --strip2:#223C46; --accent:#4FC3C0; --on-accent:#04211F;
  --ok:#6FD59A; --on-ok:#05230F; --ok-bg:#12301F;
  --warn:#F2C264; --warn-bg:#3A2D0B;
  --bad:#FF9E96; --bad-bg:#401814;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 18px/1.45 var(--body);
  padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:130px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.wrap{max-width:560px;margin:0 auto;display:grid;gap:18px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3,p{margin:0}
h1{font:700 24px/1.2 var(--display)}
h2{font:700 30px/1.15 var(--display);text-wrap:balance}
h3{font:700 20px/1.25 var(--display);text-wrap:balance}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lang{display:flex;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.lang button{min-width:52px;min-height:46px;border:0;background:transparent;font-weight:700;font-size:16px;letter-spacing:.04em}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:50px;padding:0 20px;border-radius:999px;border:2px solid var(--line);background:var(--surface);font-weight:700;font-size:18px}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.hello{display:grid;gap:4px}
.date{color:var(--muted);font-size:18px;text-transform:capitalize}
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge-ex{font:700 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:2px dashed var(--muted);color:var(--muted)}

/* blister strip */
.blister{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 12px 12px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg,var(--strip),var(--strip2))}
.pocket{display:grid;justify-items:center;gap:6px;text-align:center;min-width:0}
.dome{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--line);background:var(--surface);font:700 22px/1 var(--display);font-variant-numeric:tabular-nums;box-shadow:inset 0 -4px 0 rgba(0,0,0,.07)}
.pocket .nm{font-size:15px;font-weight:700;overflow-wrap:anywhere}
.pocket .tm{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.pocket.done .dome{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.pocket.due .dome{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.pocket.missed .dome{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.pocket.later .dome{border-color:var(--muted)}
.pocket.off .dome{border-style:dashed;opacity:.5;font-weight:400}
.pocket.off .nm,.pocket.off .tm{opacity:.6}

/* slot cards */
.slot{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;display:grid;gap:16px}
.slot.due{border:3px solid var(--warn)}
.slot.missed{border:3px solid var(--bad)}
.slot-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.slot-time{font:700 36px/1 var(--display);font-variant-numeric:tabular-nums}
.slot-name{font-size:19px;color:var(--muted);margin-top:4px}
.pill{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;font-weight:700;font-size:16px;background:var(--bg);border:2px solid var(--line)}
.pill.due{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.pill.missed{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.pill.done{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.meds-list{display:grid;gap:12px}
.med{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center}
.check{width:52px;height:52px;border-radius:14px;border:3px solid var(--muted);background:var(--surface);display:grid;place-items:center;color:var(--on-ok);padding:0}
.med.is-taken .check{background:var(--ok);border-color:var(--ok)}
.mname{font-weight:700;font-size:21px;line-height:1.25;overflow-wrap:anywhere}
.mdetail{color:var(--muted);font-size:17px;overflow-wrap:anywhere}
.slot.done{padding:14px 16px}
.done-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.tick{width:40px;height:40px;border-radius:50%;background:var(--ok);color:var(--on-ok);display:grid;place-items:center}
.tick svg{width:22px;height:22px}
.done-row .t{font-weight:700;font-size:19px}
.link{background:none;border:0;color:var(--accent);font-weight:700;text-decoration:underline;min-height:48px;padding:0 6px;font-size:17px}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;width:100%;padding:0 18px;border-radius:16px;border:3px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:20px;text-decoration:none;text-align:center}
.btn.big{min-height:68px;font-size:23px;font-family:var(--display)}
.btn.sec{background:var(--surface);color:var(--accent)}
.btn.bad{background:var(--surface);color:var(--bad);border-color:var(--bad)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn[disabled]{opacity:.5;cursor:default}
.btn svg{flex:none}
.actions{display:grid;gap:10px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;display:grid;gap:14px}
.card.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.card.ok h3{color:inherit}
.muted{color:var(--muted)}
.fine{color:var(--muted);font-size:15px;max-width:60ch}
.err{background:var(--bad-bg);color:var(--bad);border:2px solid var(--bad);border-radius:14px;padding:12px 14px;font-weight:700}
.warn-box{background:var(--warn-bg);color:var(--warn);border:2px solid var(--warn);border-radius:14px;padding:12px 14px;font-weight:700}

.banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border-radius:16px;padding:14px 16px;font-weight:700;font-size:18px;border:3px solid var(--warn);background:var(--warn-bg);color:var(--warn)}
.banner.missed{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.banners{display:grid;gap:10px}
.banners:empty{display:none}

/* meds tab */
.add-row{display:grid;gap:10px}
.med-card{display:grid;gap:12px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px 18px}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mini div{display:grid;justify-items:center;gap:2px;padding:8px 2px;border-radius:12px;background:var(--bg);min-width:0}
.mini span{font-size:14px;color:var(--muted)}
.mini b{font:700 22px/1 var(--display)}
.mini div.zero b{color:var(--muted);font-weight:500}
.mini div.on{background:var(--ok-bg)}
.mini div.on b{color:var(--ok)}

.field{display:grid;gap:6px}
.field>label,.field>.lbl{font-weight:700;font-size:17px}
input[type=text],input[type=tel],input[type=time],input[type=number],select{width:100%;min-height:54px;padding:0 14px;border:2px solid var(--line);border-radius:14px;background:var(--surface);font-size:19px}
input[type=time]{font-variant-numeric:tabular-nums}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid4 .field>label,.grid2 .field>label{font-size:15px;font-weight:700}
.grid4 input[type=number]{padding:0 6px;text-align:center}
.thumb{width:100%;max-height:220px;object-fit:contain;border-radius:14px;background:var(--strip)}
.spin{width:30px;height:30px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.row{display:flex;gap:12px;align-items:center}

/* sheet */
.backdrop{position:fixed;inset:0;z-index:50;background:rgba(5,15,20,.6);display:grid;align-items:end}
.sheet{width:100%;max-width:560px;margin:0 auto;background:var(--surface);border-radius:26px 26px 0 0;display:grid;gap:14px;max-height:92vh;overflow:auto;
  padding:22px max(16px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.msg{padding:14px;border-radius:14px;background:var(--bg);border:1px solid var(--line);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:2px solid var(--line);display:flex;gap:6px;
  padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.tabbar button{flex:1;display:grid;justify-items:center;gap:2px;min-height:60px;border:0;border-radius:16px;background:transparent;color:var(--muted);font-weight:700;font-size:15px;padding:6px 0}
.tabbar button[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:700;max-width:calc(100% - 32px)}
.toast[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.spin{animation:none;border-top-color:var(--line);border-right-color:var(--accent)}}
@media (max-width:360px){.dome{width:50px;height:50px;font-size:19px}.slot-time{font-size:32px}}

/* hosted version additions */
.login{max-width:420px;margin:12vh auto 0;display:grid;gap:16px}
.login h2{font-size:28px}
input[type=password],input[type=email]{width:100%;min-height:54px;padding:0 14px;border:2px solid var(--line);border-radius:14px;background:var(--surface);font-size:19px}
.offline{background:var(--warn-bg);color:var(--warn);border:2px solid var(--warn);border-radius:14px;padding:10px 14px;font-weight:700}
.status-ok{color:var(--ok);font-weight:700}