:root{
  --cream:#FFF6DC; --cream2:#FFEFC2; --sun:#F6B800; --sun-hi:#FFD54A; --amber:#E88C00; --ink:#2B2418; --mut:#5E5238;
  --line:#EBD9A6; --card:#FFFFFF; --ok:#1F7A3D; --warn:#9A5B00; --bad:#B3261E; --focus:#1A4FD6;
  --r:20px; --shadow:0 6px 24px rgba(160,110,0,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:18px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;min-height:100vh}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:8px}
a{color:#7A4A00}
h1,h2,h3{line-height:1.2;margin:.2em 0 .5em}
button,input,select,textarea{font:inherit;color:inherit}
.sr{position:absolute;left:-9999px}
.brand{display:flex;align-items:center;gap:.5em;font-weight:800;font-size:1.5rem;text-decoration:none;color:var(--ink)}
.brand img{width:40px;height:40px;border-radius:10px}
.disclaimer{background:#FFE9A8;border:2px solid var(--sun);border-radius:14px;padding:.7em 1em;font-weight:600;margin:1em 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:.6em 1.2em;border:0;border-radius:14px;font-weight:700;cursor:pointer;background:var(--sun);color:#2B1B00;text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn:hover{background:var(--sun-hi)}
.btn.alt{background:#fff;border:2px solid var(--sun)}
.btn.danger{background:#fff;color:var(--bad);border:2px solid var(--bad)}
.btn.small{min-height:40px;padding:.3em .8em;font-size:.95rem}
.btn:disabled{opacity:.55;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1em 1.3em;box-shadow:var(--shadow);margin:1em 0}
.row{display:flex;flex-wrap:wrap;gap:.7em;align-items:center}
.grow{flex:1 1 220px}
label{display:block;font-weight:700;margin:.8em 0 .25em}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=time],input[type=date],input[type=number],select,textarea{width:100%;max-width:520px;min-height:48px;padding:.5em .8em;border:2px solid #CDB46C;border-radius:12px;background:#fff}
input[type=checkbox]{width:24px;height:24px;vertical-align:middle;margin-right:.5em;accent-color:#B87500}
.check{display:flex;align-items:flex-start;gap:.4em;font-weight:500;margin:.6em 0}
.hint{color:var(--mut);font-size:.95rem}
.pill{display:inline-block;padding:.15em .7em;border-radius:999px;font-weight:700;font-size:.95rem;border:2px solid currentColor;background:#fff}
.pill.ok{color:var(--ok)} .pill.overdue{color:var(--bad)} .pill.waiting,.pill.offday{color:var(--mut)} .pill.away,.pill.setup,.pill.acked{color:var(--warn)}
.err{color:var(--bad);font-weight:700;margin:.5em 0}
.msg{color:var(--ok);font-weight:700}
table.t{border-collapse:collapse;width:100%;font-size:.95rem}
table.t td,table.t th{padding:.4em .6em;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sun-bg{background:linear-gradient(180deg,#FFD54A 0,#FFE9A8 38%,var(--cream) 80%)}

/* ----- landing / family shell ----- */
.shell{max-width:980px;margin:0 auto;padding:1em 1.1em 4em}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6em;padding:.4em 0}
.hero{padding:2.2em 0 1em;text-align:center}
.hero h1{font-size:clamp(2.2rem,6vw,3.6rem)}
.hero p{font-size:1.25rem;max-width:34em;margin:.5em auto}
.bigchoice{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1em;margin:1.5em 0}
.bigchoice .btn{min-height:84px;font-size:1.3rem;flex-direction:column}
.tabs{display:flex;flex-wrap:wrap;gap:.4em;margin:1em 0}
.tabs a{padding:.5em 1em;border-radius:999px;background:#fff;border:2px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700}
.tabs a[aria-current=page]{background:var(--sun);border-color:var(--sun)}
.daygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5em}
.day{border:2px solid var(--line);border-radius:12px;padding:.4em;text-align:center;background:#fff;font-size:.9rem}
.day.ok{border-color:var(--ok);background:#EAF7EE} .day.miss{border-color:#D8A5A0;background:#FDF0EE}
.qr svg{max-width:100%;height:auto;background:#fff;padding:8px;border-radius:12px}
.code{font-size:2.6rem;font-weight:800;letter-spacing:.25em;background:#fff;border:3px dashed var(--sun);border-radius:14px;padding:.2em .6em;display:inline-block}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7em}
.thumbs figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px}
.thumbs img{width:100%;height:120px;object-fit:cover;border-radius:8px;display:block}
.timeline li{margin:.3em 0}
footer.small{margin-top:2em;color:var(--mut);font-size:.95rem}

/* ----- senior screen: everything at least 24px ----- */
body.senior{font-size:26px;background:linear-gradient(180deg,#FFD54A 0,#FFEDB0 30%,var(--cream) 70%) fixed;overflow-x:hidden;-webkit-user-select:none;user-select:none}
.senior .wrap{max-width:900px;margin:0 auto;padding:.6em 1em 8.5em;min-height:100vh}
.clock{text-align:center;padding-top:.3em}
.clock .time{font-size:clamp(4rem,16vw,8rem);font-weight:800;line-height:1;letter-spacing:.02em}
.clock .date{font-size:clamp(1.6rem,5vw,2.6rem);font-weight:600;margin-top:.2em}
.greet{text-align:center;font-size:2rem;font-weight:700;margin:.4em 0}
.okwrap{display:flex;flex-direction:column;align-items:center;margin:.5em 0 .8em}
.okbtn{position:relative;width:min(78vw,56vh,520px);aspect-ratio:1;border-radius:50%;border:8px solid #fff;cursor:pointer;color:#2B1B00;background:radial-gradient(circle at 50% 35%,#FFE27A 0,#F6B800 62%,#E88C00 100%);box-shadow:0 12px 40px rgba(180,110,0,.45),inset 0 -10px 24px rgba(200,110,0,.35);font-size:clamp(2.4rem,8vw,4.2rem);font-weight:800;line-height:1.1;padding:1em;transition:transform .15s ease}
.okbtn:active{transform:scale(.97)}
.okbtn .sunsvg{display:block;margin:0 auto .15em;width:34%;height:auto}
.okbtn:not(:disabled){animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 12px 40px rgba(180,110,0,.45),0 0 0 0 rgba(246,184,0,.55)}50%{box-shadow:0 12px 40px rgba(180,110,0,.45),0 0 0 26px rgba(246,184,0,0)}}
.done-box{text-align:center;background:#fff;border:6px solid var(--ok);border-radius:28px;padding:.8em 1em;margin:.6em 0;animation:pop .6s ease both}
.done-box .big{font-size:2.6rem;font-weight:800;color:var(--ok)}
@keyframes pop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
.rise{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(180deg,#FFF1C2,#FFD54A);text-align:center;padding:1em}
.rise .sunrise{width:min(60vw,50vh);height:auto;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
.rise .rays{transform-origin:50% 50%;animation:spin 14s linear infinite}
.rise h2{font-size:clamp(2.4rem,8vw,4.4rem);margin:.4em 0 .1em;animation:fade 1s .5s both}
.rise p{font-size:2rem;font-weight:600;margin:0;animation:fade 1s .9s both}
@keyframes rise{0%{transform:translateY(40%) scale(.5);opacity:0}100%{transform:none;opacity:1}}
@keyframes fade{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.rcard{background:#fff;border:4px solid var(--sun);border-radius:24px;padding:.7em .9em;margin:.7em 0;display:flex;gap:.7em;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rcard.due{border-color:var(--amber);background:#FFF3CF}
.rcard .rt{font-size:1.9rem;font-weight:700;flex:1 1 260px}
.rcard .tm{display:block;font-size:1.5rem;font-weight:600;color:var(--mut)}
.sbtn{min-height:72px;min-width:160px;padding:.3em 1.2em;border-radius:20px;border:0;background:var(--sun);font-size:1.7rem;font-weight:800;color:#2B1B00;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.sbtn.alt{background:#fff;border:4px solid var(--sun)}
.sbtn.green{background:#1F7A3D;color:#fff}
.sbtn.block{display:flex;width:100%;align-items:center;justify-content:center;gap:.5em;text-decoration:none;margin:.5em 0;min-height:96px;font-size:2rem}
.notice{background:#fff;border:4px solid var(--amber);border-radius:20px;padding:.6em 1em;font-size:1.5rem;font-weight:600;text-align:center;margin:.6em 0}
.snav{position:fixed;left:0;right:0;bottom:0;z-index:10;background:#fff;border-top:4px solid var(--sun);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.snav button{flex:1;min-height:84px;border:0;background:#fff;font-size:1.6rem;font-weight:800;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em}
.snav button[aria-current=true]{background:var(--sun)}
.snav .ico{font-size:2rem;line-height:1}
.sfoot{text-align:center;font-size:1.5rem;color:var(--mut);margin:1.2em 0 0}
.sfoot a{color:#7A2A00;font-weight:800}
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1em;-webkit-overflow-scrolling:touch;padding-bottom:.5em}
.slide{flex:0 0 100%;scroll-snap-align:center;background:#fff;border:4px solid var(--sun);border-radius:24px;padding:.5em;text-align:center}
.slide .ph{width:100%;height:min(58vh,640px);display:flex;align-items:center;justify-content:center;background:#FFF3CF;border-radius:16px;overflow:hidden}
.slide img{max-width:100%;max-height:100%;object-fit:contain}
.slide .cap{font-size:1.9rem;font-weight:700;margin:.4em 0 .1em}
.slide .cnt{font-size:1.5rem;color:var(--mut)}
.hide{display:none!important}
.pairbox{max-width:640px;margin:0 auto;text-align:center}
.pairbox input{font-size:3rem;text-align:center;letter-spacing:.3em;max-width:100%;min-height:96px;border-radius:20px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (max-height:640px) and (orientation:landscape){
  .okbtn{width:min(60vh,40vw)} .clock .time{font-size:4rem}
}