:root{
  --teal:#2A9D8F; --teal-dark:#1F7A6F; --coral:#E76F51; --canvas:#F8F9FA;
  --panel:#FFFFFF; --ink:#212529; --muted:#5C6670; --line:#E3E7EA;
  --ok:#2F8F5B; --warn:#C9821A; --bad:#C4453B; --radius:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--teal-dark)}
h1,h2,h3{line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
p{margin:.4rem 0 .9rem}
.wrap{max-width:900px;margin:0 auto;padding:16px}
.wrap-narrow{max-width:640px;margin:0 auto;padding:16px}
header.app{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:20}
header.app .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.brand{font-weight:650;letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand .dot{width:22px;height:22px;border-radius:6px;background:var(--teal);display:inline-block;position:relative}
.brand .dot::after{content:"";position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border-radius:50%;background:var(--coral)}
nav.main{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;align-items:center}
nav.main a{color:var(--muted);text-decoration:none;font-size:.92rem;padding:6px 9px;border-radius:999px}
nav.main a.active,nav.main a:hover{background:#EEF6F4;color:var(--teal-dark)}
nav.main form{margin:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 14px;box-shadow:var(--shadow)}
.panel.tight{padding:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{display:flex;gap:10px;justify-content:space-between;align-items:center}
.muted{color:var(--muted);font-size:.9rem}
.tiny{font-size:.8rem;color:var(--muted)}
.grid{display:grid;gap:14px}
@media(min-width:720px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
label{display:block;font-weight:550;font-size:.9rem;margin:10px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=time],
input[type=datetime-local],input[type=number],select,textarea{
  width:100%;padding:11px 12px;border:1px solid #D5DBDF;border-radius:6px;font:inherit;background:#fff;
  min-height:44px;
}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #BCE3DD;border-color:var(--teal)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  background:var(--teal);color:#fff;border:0;border-radius:6px;padding:11px 16px;font:inherit;font-weight:600;
  text-decoration:none;min-height:44px}
.btn:hover{background:var(--teal-dark)}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid #D5DBDF}
.btn.secondary:hover{background:#F2F5F6}
.btn.coral{background:var(--coral)} .btn.coral:hover{background:#D25C40}
.btn.danger{background:#fff;color:var(--bad);border:1px solid #E9C4C0}
.btn.small{padding:7px 12px;min-height:36px;font-size:.88rem}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.pill{display:inline-block;font-size:.76rem;font-weight:650;padding:3px 9px;border-radius:999px;background:#EEF1F3;color:#48525A}
.pill.taken{background:#E4F4EA;color:#226B44} .pill.missed{background:#FBE7E5;color:#A5362C}
.pill.pending{background:#FFF3DE;color:#8A5A10} .pill.sent{background:#E7F1FE;color:#255C9B}
.pill.snoozed,.pill.skipped{background:#EEF1F3;color:#48525A}
.dose{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #F0F2F4}
.dose:last-child{border-bottom:0}
.dose .name{font-weight:600}
.avatar{width:30px;height:30px;border-radius:50%;background:#DCEBE8;color:var(--teal-dark);
  display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.flash{padding:11px 13px;border-radius:6px;margin:0 0 12px;font-size:.92rem}
.flash.ok{background:#E4F4EA;color:#1E6440;border:1px solid #C7E6D4}
.flash.error{background:#FBE7E5;color:#9B3229;border:1px solid #F0CFCB}
.notice{background:#EEF6F4;border:1px solid #CFE5E1;border-radius:var(--radius);padding:12px}
.stat{text-align:center;padding:12px 10px}
.stat .n{display:block;font-size:1.55rem;font-weight:680;letter-spacing:-.02em;line-height:1.15}
.stat .l{display:block;margin-top:4px;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dose .name{flex:1 1 auto;min-width:0}
/* Phone: the dose name gets its own line so "Amlodipine 5 mg" never breaks mid-dose,
   and the three stat cards stay on one row instead of three full-height cards. */
@media (max-width:560px){
  .grid.three{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{padding:10px 4px}
  .stat .n{font-size:1.15rem}
  .stat .l{font-size:.62rem;letter-spacing:.02em}
  .dose{flex-wrap:wrap}
  .dose .name{flex-basis:100%}
}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid #EFF1F3}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem}
.token{background:#F3F5F6;border:1px dashed #CFD6DA;border-radius:6px;padding:9px;word-break:break-all;font-size:.84rem}
footer.site{border-top:1px solid var(--line);background:#fff;margin-top:26px;padding:18px 0}
footer.site .wrap{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.hero{padding:34px 0 6px}
.hero h1{font-size:2rem;letter-spacing:-.02em}
.hero .lede{font-size:1.08rem;color:#3C464E;max-width:34rem}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.feat{display:flex;gap:12px;align-items:flex-start}
.feat .num{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#EEF6F4;color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.feed-item{padding:12px 0;border-bottom:1px solid #F0F2F4}
.feed-item:last-child{border-bottom:0}
.feed-item img{max-width:100%;border-radius:6px;margin-top:6px}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:8px 0;border-bottom:1px solid #F2F4F6;font-size:.9rem}
.share{display:flex;gap:8px;flex-wrap:wrap}
/* senior / kiosk view */
body.kiosk{background:#fff}
.kiosk h1{font-size:2rem}
.kiosk .dose-lg{border:2px solid var(--line);border-radius:12px;padding:18px;margin:0 0 16px}
.kiosk .dose-lg .med{font-size:1.7rem;font-weight:700}
.kiosk .dose-lg .time{font-size:1.25rem;color:var(--muted);margin:6px 0 14px}
.kiosk .btn.xl{font-size:1.5rem;min-height:76px;width:100%;border-radius:12px}
.kiosk .taken-note{font-size:1.4rem;color:#226B44;font-weight:650}
.skip-link{position:absolute;left:-9999px}
.kiosk-sub{font-size:1.25rem;color:var(--muted)}
.kiosk-error{font-size:1.2rem;color:var(--bad);font-weight:650}
.kiosk-help{font-size:1.05rem;color:var(--muted);margin-top:18px}
.pin-input{width:100%;font-size:2.6rem;letter-spacing:.5rem;text-align:center;padding:14px;
  border:2px solid var(--line);border-radius:12px;margin:10px 0 16px}
@media print{header.app,nav.main,footer.site,.btn{display:none!important}}