/* MedinaMania. Sally's palette, in her words: warm cream, terracotta band,
   sage labels, dusty-rose rules, Playfair over Lato. One theme on purpose:
   this is a kitchen screen and a kid's iPad, not a document. */
:root{
  --cream:#FBF6EE; --paper:#FFFDF9; --ink:#2B241E; --soft:#6B5E52;
  --terracotta:#B9603C; --terracotta-wash:#F6E3D9;
  --sage:#7C8F6E; --sage-wash:#E9EEE3;
  --rose:#D9A9A0; --rose-wash:#F7E6E2; --rule:#EBD3CD; --rule-soft:#F1E4DA;
  --display:"Playfair Display",Georgia,serif; --body:"Lato","Public Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100%}
button,input,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0}
.lab{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:700}
[hidden]{display:none !important}

.band{background:var(--terracotta);color:var(--cream);padding:14px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.brand h1{font-size:1.5rem}
.brand .date{font-family:var(--display);font-style:italic;font-size:1.05rem;opacity:.95}
.tabs{display:flex;gap:4px;margin-left:auto}
.tabs button{background:transparent;border:1px solid rgba(251,246,238,.35);color:var(--cream);border-radius:3px;padding:10px 18px;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.tabs button[aria-selected=true]{background:var(--cream);color:var(--terracotta);border-color:var(--cream)}
.btn{background:var(--terracotta);color:var(--cream);border:1px solid var(--terracotta);border-radius:3px;padding:10px 18px;font-weight:700;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase}
.btn.quiet{background:transparent;color:var(--terracotta)}
.btn.danger{background:transparent;color:#A8323C;border-color:#A8323C}
.band .btn.add{background:var(--cream);color:var(--terracotta);border-color:var(--cream)}
.btn:disabled{opacity:.5;cursor:default}

.notice{margin:12px 22px 0;padding:10px 14px;border-radius:4px;background:var(--rose-wash);border:1px solid var(--rose);font-size:.9rem;color:var(--soft)}

main{padding:20px 22px 40px;max-width:1320px;margin:0 auto}
.pane{display:none}
.pane.on{display:block}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:16px 18px}
.who{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:middle}

.today{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}
.today.evening{grid-template-columns:1fr 1.25fr}
.today.evening #todayCard{order:2}
.today.evening #tomorrowCard{order:1;border-color:var(--terracotta)}
.tomorrowHead{font-size:1.7rem;margin:4px 0 8px}
.agenda{list-style:none;margin:0;padding:0}
.agenda li{display:grid;grid-template-columns:6.4rem 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule-soft);align-items:start;cursor:pointer}
.agenda li:last-child{border-bottom:none}
.agenda .t{font-variant-numeric:tabular-nums;color:var(--soft);font-size:.9rem;padding-top:2px}
.agenda .what{font-weight:700}
.agenda .sub{color:var(--soft);font-size:.9rem;font-weight:400}
.agenda li.now{background:var(--terracotta-wash);margin:0 -10px;padding:12px 10px;border-radius:4px}
.agenda li.past{opacity:.55}
.agenda li.empty{color:var(--soft);font-style:italic;grid-template-columns:1fr;cursor:default}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.range{font-family:var(--display);font-size:1.15rem;margin-left:6px}
.legend{margin-left:auto;display:flex;gap:12px;font-size:.84rem;color:var(--soft);flex-wrap:wrap}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:10px;min-height:280px}
.day.today{border-color:var(--terracotta);box-shadow:inset 0 3px 0 var(--terracotta)}
.day .dh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:6px;margin-bottom:8px;cursor:pointer}
.day .dh b{font-family:var(--display);font-size:1.3rem;font-weight:500}
.day .dh span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);font-weight:700}
.ev{border-left:4px solid var(--sage);background:var(--cream);border-radius:0 4px 4px 0;padding:6px 8px;margin-bottom:6px;font-size:.86rem;line-height:1.3;cursor:pointer}
.ev .t{display:block;color:var(--soft);font-size:.74rem;font-variant-numeric:tabular-nums}
.ev .dots{float:right;margin-left:6px}
.ev .dots .who{margin:0 0 0 3px;width:9px;height:9px}

.setup{max-width:36rem;margin:30px auto}
.setup h2{font-size:1.6rem;margin-bottom:8px}
.keyform{display:flex;gap:8px;align-items:end;margin-top:12px}
.keyform label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--soft)}
.keyform input{padding:10px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--paper)}

dialog{border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);padding:0;width:min(34rem,94vw);box-shadow:0 12px 40px rgba(43,36,30,.25)}
dialog::backdrop{background:rgba(43,36,30,.35)}
dialog form{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
dialog h2{font-size:1.4rem}
dialog label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);font-weight:700}
dialog input,dialog textarea{padding:10px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--cream);font-size:1rem;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink)}
dialog .row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
dialog .row label{flex:1}
dialog .check{flex-direction:row;align-items:center;gap:8px;padding-bottom:10px}
dialog .check input{width:22px;height:22px;accent-color:var(--terracotta)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--rose);border-radius:20px;padding:7px 14px;font-size:.9rem;background:var(--paper);color:var(--ink);display:flex;align-items:center;gap:6px}
.chip[aria-pressed=true]{background:var(--sage-wash);border-color:var(--sage);font-weight:700}
.hint{margin:0;font-size:.84rem;color:var(--soft);font-style:italic}
.actions{display:flex;gap:8px;align-items:center;margin-top:6px}
.actions .spacer{flex:1}

.foot{padding:10px 22px 30px;font-size:.78rem;color:var(--soft);text-align:center}

@media(max-width:900px){
  .today,.today.evening{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
  .day{min-height:0}
  .brand h1{font-size:1.25rem}
  .tabs{margin-left:0}
}