/* Map of the Day — UAT v1.
   Warm, calm, iPad-primary. The canvas IS the day (P11): continuous time,
   quiet daylight ground, compact moment marks, soft state bands.
   Type: New York serif (ui-serif) display + SF Rounded (ui-rounded) body —
   iOS-native, offline-always, built for a tired mind (P9). */

:root{
  --bg:#FBF6EE; --ink:#241A12; --ink-soft:#5B4B3B; --card:#FFFFFF; --line:#E7DCCB;
  --gold:#C58A1B; --gold-soft:#FBEFCF; --gold-deep:#8a6112;
  --done:#2E7D46; --done-soft:#E4F3E8; --done-deep:#245E37;
  --ask:#A84C15; --ask-soft:#FCE9DC;
  --blood:#8a2f2f; --blood-soft:#FBE4E4;
  --c1:#C0392B; --c2:#2E6FB0; --c3:#2E7D46; --c4:#D98A00; --c5:#6C3FA0; --c6:#137C7C;
  --c7:#C64B8C; --c8:#7A5230; --c9:#34497A; --c10:#6E7B1F; --c11:#566270;
  --shadow:0 6px 22px rgba(60,40,15,.10);
  --serif:ui-serif, "New York", Georgia, "Times New Roman", serif;
  --round:ui-rounded, -apple-system, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--round);
  font-size:17px; line-height:1.4; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer}
input,select{font:inherit; color:var(--ink)}
h1,h2,h3{font-family:var(--serif); font-weight:700; margin:0}
[hidden]{display:none !important}

/* ---------- app frame ---------- */
#app{height:100%; height:100dvh; display:flex; flex-direction:column; padding-top:var(--sat)}
#views{flex:1; min-height:0; display:flex}
.view{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden}
#view-medicines,#view-day{overflow-y:auto; padding:18px 16px 24px}

#tabs{
  display:flex; gap:6px; padding:8px 14px calc(8px + var(--sab));
  background:linear-gradient(#fffdf8,#FBF6EE); border-top:1px solid var(--line);
}
.tab{
  flex:1; min-height:52px; border-radius:14px; font-size:15px; font-weight:700;
  color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:1px;
  justify-content:center;
}
.tab .tic{font-size:20px; line-height:1}
.tab.on{background:var(--gold-soft); color:var(--gold-deep)}

/* ---------- Today: the day canvas ---------- */
#view-today{padding:14px 14px 6px}
.today-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:2px 4px 10px}
.today-head .date{font-family:var(--serif); font-size:24px}
.today-head .date small{display:block; font-family:var(--round); font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft)}
.progress{min-width:130px; text-align:right}
.progress .n{font-size:15px; font-weight:800; color:var(--done-deep)}
.progress .bar{height:10px; border-radius:6px; background:#EEE4D2; overflow:hidden; margin-top:5px}
.progress .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--done)); border-radius:6px; transition:width .5s ease}

.daywrap{flex:1; min-height:0; position:relative; border-radius:20px; border:1px solid var(--line);
  overflow:hidden; box-shadow:var(--shadow)}
/* Quiet daylight ground: morning at the top, night at the bottom. Nothing louder. */
.canvas{position:absolute; inset:0;
  background:linear-gradient(to bottom,
    #F6E3C4 0%, #FBF0D6 10%, #FEF8E2 24%, #FDF6DC 42%, #F8EBCD 60%,
    #F0DCC2 74%, #E3CCC4 86%, #CFC5D2 100%);
}
.hourrail{position:absolute; inset:0; pointer-events:none}
.hour{position:absolute; left:0; right:0; display:flex; align-items:center; gap:8px;
  transform:translateY(-50%); padding:0 10px}
.hour .hl{font-size:12px; font-weight:700; color:rgba(60,42,20,.8); width:44px; text-align:right}
.hour .rule{flex:1; border-top:1px dashed rgba(60,42,20,.10)}

.band{position:absolute; left:64px; right:10px; border-radius:12px; pointer-events:none}
.band .blab{position:absolute; top:4px; left:10px; font-size:12px; font-weight:800; letter-spacing:.04em}
.band.nofood{background:repeating-linear-gradient(135deg, rgba(180,83,26,.10), rgba(180,83,26,.10) 10px, rgba(180,83,26,.045) 10px, rgba(180,83,26,.045) 20px);
  border:1px dashed rgba(180,83,26,.35)}
.band.nofood .blab{color:var(--ask)}
.band.foodok{background:rgba(46,125,70,.07); border:1px solid rgba(46,125,70,.18)}
.band.foodok .blab{color:var(--done-deep)}
.band.bloodhold{background:repeating-linear-gradient(135deg, rgba(138,47,47,.10), rgba(138,47,47,.10) 10px, rgba(138,47,47,.04) 10px, rgba(138,47,47,.04) 20px);
  border:1px dashed rgba(138,47,47,.4)}
.band.bloodhold .blab{color:var(--blood)}

.nowline{position:absolute; left:52px; right:0; height:0; border-top:3px solid var(--gold);
  filter:drop-shadow(0 1px 2px rgba(197,138,27,.4)); transition:top 60s linear}
.nowline::before{content:""; position:absolute; left:-7px; top:-7px; width:11px; height:11px;
  border-radius:50%; background:var(--gold); border:2px solid #fff}
.nowline .nlab{position:absolute; right:8px; top:-22px; font-size:12px; font-weight:800;
  letter-spacing:.06em; color:var(--gold-deep); background:var(--gold-soft);
  border:1px solid #EAD9A6; border-radius:999px; padding:2px 9px}

/* Compact moment marks — small on the canvas, the card opens on tap (P11) */
.moment{position:absolute; left:60px; right:8px; transform:translateY(-50%);
  display:flex; align-items:center; gap:9px; padding:7px 12px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(2px);
  border:1px solid var(--line); border-radius:999px; box-shadow:0 2px 10px rgba(60,40,15,.08);
  min-height:48px; text-align:left}
.moment:active{transform:translateY(-50%) scale(.985)}
.moment .mic{font-size:22px; line-height:1}
.moment .mname{font-weight:800; font-size:15.5px; margin-right:2px; white-space:nowrap}
.moment .mtoks{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.moment.now{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft), 0 2px 10px rgba(60,40,15,.10)}
.moment.alldone{border-color:var(--done); background:rgba(228,243,232,.9)}
.moment .mdone{margin-left:auto; font-size:16px; color:var(--done-deep); font-weight:800}
.moment.life{background:transparent; border:none; box-shadow:none; backdrop-filter:none}
.moment.life .mname{color:rgba(60,42,20,.8); font-weight:700}
.moment.finish{border-color:var(--gold); background:linear-gradient(180deg,#FFFDF7,#FFF9EC)}
.moment.finish .mname{color:var(--gold-deep)}

.tok{width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px; border:2px solid rgba(0,0,0,.15); flex:0 0 auto}
.tok.dark{color:#3a2a00}
.tok.crit{box-shadow:0 0 0 2px var(--gold)}
.tok.taken{opacity:.35; position:relative}
.tok.taken::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:var(--done-deep); font-size:15px; opacity:1}

.doneband{position:absolute; left:60px; right:8px; transform:translateY(-50%);
  text-align:center; pointer-events:none}
.doneband .dcard{display:inline-flex; align-items:center; gap:9px; background:var(--done-soft);
  border:2px solid var(--done); color:var(--done-deep); border-radius:999px; padding:8px 18px;
  font-weight:800; font-size:15px}
.doneband.reached .dcard{background:var(--done); color:#fff; box-shadow:0 4px 18px rgba(46,125,70,.35)}

.celebrate{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(251,246,238,.92); backdrop-filter:blur(3px); z-index:5; border-radius:20px;
  animation:fadein .6s ease}
.celebrate .inner{text-align:center; padding:30px}
.celebrate .tick{font-size:56px; color:var(--done); line-height:1}
.celebrate h2{font-size:30px; color:var(--done-deep); margin:10px 0 6px}
.celebrate p{font-size:17px; color:#2f4a37; font-weight:600; margin:0 0 18px}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- shared: cards, chips, buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  border-radius:13px; padding:10px 18px; font-size:16px; font-weight:700;
  border:1px solid var(--line); background:#FCF8F0}
.btn.primary{background:var(--gold); border-color:var(--gold); color:#3a2a00}
.btn.good{background:var(--done); border-color:var(--done); color:#fff}
.btn.quiet{background:transparent}
.btn.wide{width:100%}

.chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 12px;
  font-size:14px; font-weight:600; border:1px solid var(--line); background:#FCF8F0}
.chip.food{background:var(--done-soft); border-color:#BFE0C9; color:var(--done-deep)}
.chip.rhythm{background:#E5EEF7; border-color:#C4D9EE; color:#22527f}
.chip.clock{background:var(--gold-soft); border-color:#EAD9A6; color:var(--gold-deep)}
.chip.crit{background:var(--gold-soft); border-color:var(--gold); color:var(--gold-deep)}
.chip.ask{background:var(--ask-soft); border-color:#E8C4A6; color:var(--ask)}
.chip .src{display:block; width:100%; font-size:12px; font-weight:500; color:var(--ink-soft)}
.chipwrap{display:flex; flex-wrap:wrap; gap:8px}
.chipline{margin:3px 0}
.chipline .srcline{font-size:12.5px; color:var(--ink-soft); margin:2px 0 0 4px}

/* ---------- Medicines deck ---------- */
.deckhead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.deckhead h1{font-size:26px}
.deckprog{font-size:14px; font-weight:700; color:var(--done-deep)}
.medcard{width:100%; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:14px 16px; margin-bottom:12px;
  display:flex; align-items:center; gap:13px}
.medcard:active{transform:scale(.99)}
.medcard .tok{width:46px; height:46px; font-size:20px; border-width:3px}
.medcard .mid{flex:1; min-width:0}
.medcard h3{font-size:19px; font-family:var(--round); font-weight:800}
.medcard .sub{font-size:14px; color:var(--ink-soft)}
.medcard .minichips{display:block; margin-top:5px; font-size:12.5px; color:var(--ink-soft); font-weight:600; line-height:1.5}
.medcard .minichips span{white-space:nowrap}
.medcard .state{font-size:12.5px; font-weight:800; border-radius:999px; padding:5px 11px; white-space:nowrap}
.medcard .state.ok{background:var(--done-soft); color:var(--done-deep)}
.medcard .state.ask{background:var(--ask-soft); color:var(--ask)}
.medcard.stopped{opacity:.55}
.sectionlabel{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin:18px 2px 10px}
.addbtn{width:100%; border:1px dashed var(--gold); background:var(--gold-soft); border-radius:18px;
  padding:16px; font-size:17px; font-weight:700; color:var(--gold-deep)}

/* ---------- pane / sheet ---------- */
#scrim{position:fixed; inset:0; background:rgba(36,26,18,.35); z-index:8; animation:fadein .25s}
#pane{position:fixed; z-index:9; background:var(--bg); box-shadow:0 -8px 40px rgba(60,40,15,.25);
  left:0; right:0; bottom:0; top:auto; max-height:86dvh; border-radius:22px 22px 0 0;
  display:flex; flex-direction:column; animation:sheetup .3s ease}
@keyframes sheetup{from{transform:translateY(40px); opacity:0} to{transform:none; opacity:1}}
.panehead{display:flex; align-items:center; gap:12px; padding:16px 18px 10px}
.panehead .tok{width:44px; height:44px; font-size:19px; border-width:3px}
.panehead h2{font-size:23px; flex:1; min-width:0}
.panehead .mic{font-size:30px}
.panehead .close{min-width:48px; min-height:48px; font-size:22px; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; border-radius:12px}
.panebody{overflow-y:auto; padding:4px 18px calc(20px + var(--sab))}
.panebody .say{font-size:15.5px; color:var(--ink-soft); margin:0 0 14px}

/* moment card dose rows — big tap targets (P9) */
.doserow{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:12px 14px; margin-bottom:10px; min-height:64px}
.doserow .tok{width:42px; height:42px; font-size:18px; border-width:3px}
.doserow .mid{flex:1; min-width:0}
.doserow .nm{font-weight:800; font-size:17.5px}
.doserow .ds{font-size:14px; color:var(--ink-soft)}
.doserow .heart{font-size:12px; color:var(--gold-deep); font-weight:800}
.doserow .mark{font-size:15px; font-weight:800; border-radius:999px; padding:9px 15px;
  border:2px solid var(--line); color:var(--ink-soft); min-height:44px}
.doserow.taken{background:var(--done-soft); border-color:#BFE0C9}
.doserow.taken .mark{background:var(--done); border-color:var(--done); color:#fff}
.doserow.crit{border-color:var(--gold)}
.trigger{display:flex; align-items:center; gap:11px; background:#FFF7E6; border:1px dashed var(--gold);
  border-radius:13px; padding:11px 14px; font-size:14.5px; font-weight:600; color:var(--gold-deep); margin:4px 0 12px}
.trigger .big{font-size:22px}
.bloodsnote{display:flex; gap:9px; background:var(--blood-soft); border:1px dashed #D89393;
  border-radius:12px; padding:10px 13px; font-size:14px; font-weight:600; color:var(--blood); margin:4px 0 12px}
.foodrelease{display:flex; align-items:center; gap:10px; margin:4px 0 12px}
.foodrelease .go{display:inline-flex; align-items:center; gap:8px; background:var(--done); color:#fff;
  border-radius:12px; padding:9px 16px; font-size:17px; font-weight:800}
.foodrelease.waiting .go{background:#EBD9BE; color:#6b5636}

/* card detail: the medication's story (P3, P4) */
.storylabel{font-family:var(--serif); font-size:18px; margin:18px 0 8px}
.logline{display:flex; gap:10px; padding:10px 2px; border-bottom:1px dashed var(--line); align-items:flex-start}
.logline .dot{width:9px; height:9px; border-radius:50%; background:var(--gold); margin-top:7px; flex:0 0 auto}
.logline .what{flex:1; font-size:15.5px}
.logline .when{font-size:13px; color:var(--ink-soft); white-space:nowrap; font-weight:600}
.logline .srcnote{display:block; font-size:13px; color:var(--ink-soft)}
.logline .undo{font-size:13px; font-weight:700; color:var(--ask); min-height:44px; padding:0 8px}
.askbar{background:var(--ask-soft); border:1px dashed var(--ask); border-radius:14px; padding:12px 14px; margin:10px 0}
.askbar p{margin:0 0 10px; font-size:15px; font-weight:600; color:var(--ask)}
.askbar .row{display:flex; gap:8px; flex-wrap:wrap}
.askbar input{flex:1; min-width:120px; border:1px solid #E8C4A6; border-radius:10px; padding:10px 12px; background:#fff}

/* forms (add medicine / record a change) */
.form label{display:block; font-size:13.5px; font-weight:700; color:var(--ink-soft); margin:12px 0 5px}
.form input[type=text],.form input[type=time],.form select{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 13px; background:#fff; min-height:48px}
.form .seg{display:flex; gap:7px; flex-wrap:wrap}
.form .seg button{border:2px solid var(--line); border-radius:11px; padding:9px 14px; font-size:15px;
  font-weight:700; color:var(--ink-soft); background:#fff; min-height:48px}
.form .seg button.on{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-deep)}
.form .actions{display:flex; gap:10px; margin-top:18px}
.formnote{font-size:13.5px; color:var(--ink-soft); margin-top:8px}

/* ---------- Day view ---------- */
#view-day h1{font-size:26px; margin-bottom:12px}
.dayrow{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:12px 15px; margin-bottom:10px; min-height:58px}
.dayrow .ic{font-size:24px}
.dayrow .nm{flex:1; font-weight:700; font-size:17px}
.dayrow .tm{font-size:17px; font-weight:800}
.dayrow .tbd{font-size:12px; color:var(--ask); font-weight:700; font-style:italic; display:block}
.dayrow input[type=time]{border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-height:44px}
.typerow{display:flex; gap:8px; margin-bottom:6px}
.typerow button{flex:1; border:2px solid var(--line); border-radius:13px; padding:12px; font-weight:700;
  color:var(--ink-soft); background:#fff; min-height:52px}
.typerow button.on{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-deep)}
.confirmlist{margin:0; padding:0; list-style:none}
.confirmlist li{display:flex; gap:9px; padding:9px 4px; font-size:15px; border-bottom:1px dashed var(--line)}
.confirmlist li::before{content:"?"; font-weight:800; color:var(--ask)}
.formel{opacity:.85}
.exportout{width:100%; min-height:90px; border:1px solid var(--line); border-radius:12px; padding:10px;
  font-family:ui-monospace,Consolas,monospace; font-size:12px; background:#FCF8F0; margin-top:8px}

/* ---------- wide: iPad two-pane (spec §8) ---------- */
@media (min-width:700px){
  #view-today{padding:20px 22px 10px}
  .today-head .date{font-size:30px}
  .moment{left:76px; right:14px; min-height:54px; padding:9px 16px}
  .moment .mname{font-size:17px}
  .tok{width:30px; height:30px; font-size:14px}
  .hour .hl{font-size:13px; width:52px}
  .band{left:84px; right:14px}
  #view-medicines,#view-day{padding:26px 8vw}
  #app.paned #views{margin-right:420px}
  #pane{left:auto; top:var(--sat); bottom:0; right:0; width:420px; max-height:none;
    border-radius:22px 0 0 22px; border-left:1px solid var(--line); animation:panein .28s ease}
  @keyframes panein{from{transform:translateX(40px); opacity:0} to{transform:none; opacity:1}}
  #scrim{background:rgba(36,26,18,.12)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}