/* ===== Visual refresh (v10). Loaded after planner.css; changes look only, not features or data. =====
   Tokens: 4/8/12/16/24/32 spacing scale; 13/15/17/20/24/30 type scale; calmer neutral palette;
   colours chosen for WCAG 2.2 AA (text ≥ 4.5:1, UI boundaries ≥ 3:1); touch targets ≥ 44px (Apple HIG). */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --fs-xs:.8125rem;--fs-sm:.9375rem;--fs-md:1.0625rem;--fs-lg:1.25rem;--fs-xl:1.5rem;--fs-2xl:1.875rem;
  --paper:#f6f5f1;--card:#fff;--line:#e4e1d8;--line-2:#8a94a6;--ink:#1b2430;--muted:#4a5565;
  --navy:#1f3a5f;--navy-tint:#e9eff6;--navy-tint-2:#d6e1ee;
  --ok:#1d6b42;--ok-tint:#e8f4ec;--warn-ink:#7a4f00;--warn-tint:#fff4dc;--bad:#b3261e;--bad-tint:#fdeceb;
  --fly:#c0392b;--home:#2f7a57;--radius:16px;--r-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --target:44px;
}
body.planner-page{background:var(--paper);font-size:var(--fs-md);line-height:1.5;padding-bottom:84px}
.planner h1,.planner h2,.planner h3,.planner h4{letter-spacing:-.005em}
/* icons */
svg.ic{width:1.15em;height:1.15em;vertical-align:-.2em;flex:0 0 auto;stroke-width:1.9}
.box>h2:first-child>svg.ic:first-child,.box>h3:first-child>svg.ic:first-child,.tile h3>svg.ic:first-child,.box>summary h3>svg.ic:first-child{width:32px;height:32px;padding:6px;margin-right:var(--s2);border-radius:var(--r-sm);background:var(--navy-tint);color:var(--navy);vertical-align:middle;stroke-width:2}
.sdot{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.3em;vertical-align:.05em}.sdot-g{background:#2f8a52}.sdot-a{background:#d98a00}.sdot-r{background:var(--bad)}
/* page top: less chrome above the fold */
.pl-top{padding-top:var(--s4);gap:var(--s2) var(--s4)}
.pl-top .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--muted);margin-bottom:var(--s1)}
.pl-top .eyebrow .tag{margin:0;padding:2px 8px;font-size:.6875rem;background:var(--navy-tint);color:var(--navy)}
.pl-h1{font-size:clamp(1.5rem,5vw,2rem);font-weight:800}
.privacy-note{font-size:var(--fs-xs);line-height:1.45;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2) var(--s3);box-shadow:none}
.privacy-note svg.ic{color:var(--ok)}
/* main tab bar */
.tabs{gap:var(--s2);padding:var(--s2) var(--s4);background:rgba(246,245,241,.94);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.tabs button,.tab-more{display:inline-flex;align-items:center;gap:6px;min-height:var(--target);padding:0 14px;font-size:var(--fs-sm);font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--navy);border-radius:999px;box-shadow:var(--shadow)}
.tabs button svg.ic{width:18px;height:18px}
.tabs button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:none}
.tab-more.active{text-decoration:none;outline:2px solid var(--navy);outline-offset:-2px}
/* cards */
.pl-body{padding-top:var(--s4)}
.box,.tile,.month,.hit,.itemcard,.plan-day{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--card)}
.box{padding:var(--s4);margin-bottom:var(--s4)}
.tile{padding:var(--s4)}
.tiles{gap:var(--s3)}
.box h2{font-size:var(--fs-lg);margin-bottom:var(--s3)}
.box h3,.tile h3{font-size:var(--fs-md);margin-bottom:var(--s2);display:flex;align-items:center;flex-wrap:wrap}
.tile h3{color:var(--muted);font-weight:700}
.tbig,.big{font-size:var(--fs-xl);line-height:1.2;margin:var(--s1) 0 var(--s2)}
.tabpane>h2{font-size:var(--fs-xl);margin:0 0 var(--s3)}
.small,.hint,.src{line-height:1.45}
/* today hero */
.today-hero{border-radius:20px;padding:var(--s5) var(--s4);border:0;box-shadow:0 6px 18px rgba(31,58,95,.18)}
.today-hero.st-N{background:linear-gradient(160deg,#22355f 0%,#2e4a80 100%)}
.today-hero.st-D{background:linear-gradient(160deg,#f7cf6a 0%,#f2b941 100%)}
.today-hero.st-travel{background:linear-gradient(160deg,#b3352a 0%,#c84a3c 100%)}
.today-hero.st-off{background:linear-gradient(160deg,#2a6e4f 0%,#358660 100%)}
.today-hero h2{font-size:var(--fs-xl)}
.today-hero h2 svg.ic{margin-right:6px}
.today-hero .linkbtn,.today-hero button{min-height:var(--target)}
/* status colours with AA contrast for white text */
.dcell.out,.pill-out{background:var(--fly)}.dcell.home,.pill-home{background:var(--home)}
.plan-day.out{border-left-color:var(--fly)}.plan-day.home{border-left-color:var(--home)}
.badge.amber{background:#a86a00}
/* segmented sub-navigation: tonal, so it reads differently from the main tabs */
.seg{gap:var(--s2)}
.seg button,.energy button,.step{min-height:var(--target);border:1px solid transparent;background:var(--navy-tint);color:var(--navy);border-radius:var(--r-sm);padding:0 14px;display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed=true],.seg button.on,.energy button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.seg-sm button{min-height:var(--target);padding:0 12px;font-size:var(--fs-sm)}
.subnav{margin-bottom:var(--s4)}
/* buttons and targets */
.planner .btn{min-height:var(--target);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-sm{min-height:var(--target);padding:0 16px;font-size:var(--fs-sm)}
.xbtn{min-width:var(--target);min-height:var(--target);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.planner .chip,.planner .chips .chip,.planner .logf .chip,.planner #sickf .chip{min-width:var(--target);justify-content:center;min-height:var(--target);padding:0 14px;display:inline-flex;align-items:center;gap:6px;border-color:var(--line);font-size:var(--fs-sm)}
.chip[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.helpfab{left:var(--s3);right:auto;bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));padding:0 18px;min-height:48px;font-size:var(--fs-sm);box-shadow:0 6px 16px rgba(179,38,30,.35)}
.planner .linkbtn{min-height:var(--target);display:inline-flex;align-items:center;gap:6px}
/* forms */
.planner input:not([type=checkbox]):not([type=radio]):not([type=file]),.planner select,.planner textarea{border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:var(--target);padding:var(--s2) var(--s3)}
.planner input:focus,.planner select:focus,.planner textarea:focus{outline:3px solid var(--navy-tint-2);border-color:var(--navy)}
.fgrid{gap:var(--s3)}
.fgrid label,.fl{font-size:var(--fs-sm);gap:var(--s1)}
.fgrid label .hint{display:inline;font-size:var(--fs-xs)}
#bmf.fgrid{grid-template-columns:1fr 1fr}#bmf.fgrid>:not(label){grid-column:1/-1;justify-self:start}
.check-list li,.kitlist li,.medrow{min-height:var(--target)}
/* alerts: red only for real warnings; disclaimers are neutral info */
.alert{border-radius:var(--r-sm);border-left-width:4px;background:var(--bad-tint);padding:var(--s3) var(--s4)}
.alert.fa-disc,.alert.small{background:var(--navy-tint);border-left-color:var(--navy);color:var(--ink)}
.nudge,.def{border-style:solid}
.def{background:var(--warn-tint);border-color:#e7c27a;color:var(--warn-ink)}
/* All tabs index */
.more-menu{border-radius:var(--radius);box-shadow:0 12px 32px rgba(16,24,40,.16);padding:var(--s2);margin:var(--s2) var(--s3)}
.tabindex{gap:var(--s2)}
.tabindex .ti{min-height:92px;border-radius:14px;gap:var(--s2);border:1px solid var(--line)!important;font-size:var(--fs-xs);color:var(--navy)}
.tabindex .ti.cur{border:2px solid var(--navy)!important;background:var(--navy-tint)!important}
.ti-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--navy-tint);color:var(--navy);font-size:1rem}
.ti-ic svg.ic{width:24px;height:24px}
.tabindex .ti.cur .ti-ic{background:var(--navy);color:#fff}
.ti-pin{top:6px;right:6px;color:var(--muted)}.ti-pin svg.ic{width:14px;height:14px}
.more-edit{display:flex;align-items:center;gap:var(--s2)}
/* first-run picker */
.chk.big{display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:var(--s2) var(--s1)}
.chk.big svg.ic{color:var(--navy)}
.chk input[type=checkbox]{width:22px;height:22px;accent-color:var(--navy)}
/* money */
.itemcard{padding:var(--s3) var(--s4);margin:var(--s3) 0;box-shadow:none;background:#fbfaf7}
.irow strong,.irow b{font-size:var(--fs-md)}
.ictr .btn{min-width:var(--target);min-height:var(--target);padding:0;border-radius:50%}
.icount{font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums}
.swapres{background:var(--ok-tint);border-radius:var(--r-sm);padding:var(--s2) var(--s3);color:var(--ink)}
.mtot div{background:var(--navy-tint);border-radius:var(--r-sm);padding:var(--s3)}
/* trends */
.trend i{background:#4f7fb3}
/* meds */
.dosebtn{border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.dose-due .dosebtn{border:2px solid #d99a2b}.dose-overdue .dosebtn{border:2px solid var(--bad)}
/* body */
.bm-body{fill:#e9eef4;stroke:#9aa7b8}
.bm-lab{fill:#4a5565}
.sevopt span{border:1px solid var(--line-2)}
/* tables */
table.tbl{font-size:var(--fs-sm)}.tbl th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
/* summaries */
.smallcard summary::after,.campcard summary::after{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--muted)}
.camptile{border-radius:14px;box-shadow:var(--shadow);min-height:92px}
.camptile svg.ic{width:24px;height:24px}
@media(max-width:599px){
  .pl-h1{font-size:1.375rem}
  .tabs{padding:var(--s2) var(--s3)}
  .tabs button{font-size:var(--fs-sm);padding:0 12px;min-height:var(--target)}
  .box{padding:var(--s4) var(--s4)}
  .planner .wrap{padding-left:var(--s4);padding-right:var(--s4)}
  .month{padding:var(--s2) var(--s1)}
  .mgrid{gap:2px}
}
@media print{body.planner-page{padding-bottom:0}}