/* ===== Bold UI (v11): native-app layout, section accents, dark mode. Look only. ===== */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  --font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  --bg:#f2f4f7;--card:#ffffff;--card-2:#f7f8fa;--ink:#111827;--muted:#4b5563;--line:#e5e7eb;--line-2:#8b95a5;
  --paper:var(--bg);--navy:#1e3a5f;
  --nav-h:68px;--bar-h:56px;
  --acc:#1d4ed8;--acc-2:#3b82f6;--acc-l:#93c5fd;
}
*{--tint:color-mix(in srgb,var(--acc-2) 13%,var(--card));--tint-2:color-mix(in srgb,var(--acc-2) 24%,var(--card));--acc-ink:var(--acc)}
html[data-theme=dark] *{--tint:color-mix(in srgb,var(--acc-2) 20%,var(--card));--tint-2:color-mix(in srgb,var(--acc-2) 34%,var(--card));--acc-ink:var(--acc-l)}
html[data-theme=dark]{
  --bg:#0b1220;--card:#141c2e;--card-2:#1b2540;--ink:#e8edf5;--muted:#a9b4c6;--line:#26324a;--line-2:#6b7a93;--navy:#c7d6ee;
  --navy-tint:#1f2b45;--navy-tint-2:#2c3b5d;--ok-tint:#123326;--bad-tint:#3a1717;--warn-tint:#3a2a0c;--warn-ink:#f5d08a;
  color-scheme:dark;
}
/* section accents: 700 (buttons/text, white text >= 4.5:1), 500 (charts/decor), 300 (text on dark) */
[data-sec=today],[data-tab=today],[data-sec=next],[data-tab=next],[data-sec=cal],[data-tab=cal],[data-sec=rem],[data-tab=rem]{--acc:#1d4ed8;--acc-2:#3b82f6;--acc-l:#93c5fd}
[data-sec=sleep],[data-tab=sleep],[data-sec=log],[data-tab=log]{--acc:#4338ca;--acc-2:#6366f1;--acc-l:#a5b4fc}
[data-sec=caf]{--acc:#92400e;--acc-2:#d97706;--acc-l:#fcd34d}
[data-sec=sick],[data-tab=sick],[data-sec=meds],[data-tab=meds]{--acc:#b91c1c;--acc-2:#ef4444;--acc-l:#fca5a5}
[data-sec=family],[data-tab=family]{--acc:#b45309;--acc-2:#f59e0b;--acc-l:#fcd34d}
[data-sec=meals],[data-tab=meals]{--acc:#c2410c;--acc-2:#f97316;--acc-l:#fdba74}
[data-sec=fit],[data-tab=fit]{--acc:#0f766e;--acc-2:#14b8a6;--acc-l:#5eead4}
[data-sec=body],[data-tab=body]{--acc:#6d28d9;--acc-2:#8b5cf6;--acc-l:#c4b5fd}
[data-sec=heat],[data-tab=heat]{--acc:#0369a1;--acc-2:#0ea5e9;--acc-l:#7dd3fc}
[data-sec=mind],[data-tab=mind]{--acc:#a21caf;--acc-2:#d946ef;--acc-l:#f0abfc}
[data-sec=money],[data-tab=money]{--acc:#047857;--acc-2:#10b981;--acc-l:#6ee7b7}
[data-sec=pack],[data-tab=pack],[data-sec=camp],[data-tab=camp]{--acc:#a16207;--acc-2:#eab308;--acc-l:#fde047}
[data-sec=ask],[data-tab=ask],[data-sec=my],[data-tab=my],[data-sec=setup],[data-tab=setup]{--acc:#475569;--acc-2:#64748b;--acc-l:#cbd5e1}
html,body.planner-page{background:var(--bg)}
body.planner-page{font-family:var(--font);color:var(--ink);padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom,0px));-webkit-font-smoothing:antialiased}
.planner h1,.planner h2,.planner h3,.planner h4,.ab-title{font-family:var(--font-d);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.planner a{color:var(--acc-ink)}
.planner .small,.planner .hint,.planner .src{color:var(--muted)}
/* ---------- top app bar ---------- */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:calc(var(--bar-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 12px 0;background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.appbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--acc-2)}
.ab-brand{display:flex;flex:0 0 auto;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px}
.ab-title{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;line-height:1.1;font-size:1.25rem}
.ab-kicker{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#ab-sec{color:var(--acc-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--card-2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ab-btn svg.ic{width:22px;height:22px}
#ab-help-slot{display:contents}
#ab-help-slot .helpfab{position:static;flex:0 0 auto;min-height:44px;padding:0 14px;font-size:.875rem;font-weight:800;border-radius:999px;box-shadow:none;display:inline-flex;align-items:center;gap:6px;background:#b91c1c;color:#fff}
.ab-sheet{position:fixed;z-index:29;top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 6px);left:8px;right:8px;max-width:30rem;margin-left:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 48px rgba(0,0,0,.28);padding:16px 18px}
.ab-sheet .eyebrow{font-size:.75rem;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ab-lede{font-family:var(--font-d);font-weight:800;font-size:1.375rem;margin:0 0 8px}
.ab-sheet .privacy-note{background:var(--card-2);border:0;font-size:.875rem;color:var(--muted);max-width:none}
.ab-links{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ab-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:var(--card-2);text-decoration:none;font-weight:700;color:var(--ink)}
/* ---------- bottom navigation bar ---------- */
.planner .tabs{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:32;max-width:none;margin:0;display:flex;gap:0;justify-content:safe center;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid var(--line);border-bottom:0;box-shadow:0 -6px 24px rgba(0,0,0,.06)}
.planner .tabs button,.planner .tabs .tab-more{flex:1 1 0;min-width:58px;max-width:96px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;border:0;border-radius:14px;background:transparent;box-shadow:none;color:var(--muted);font-size:.6875rem;font-weight:700;line-height:1.1;text-align:center;white-space:normal;outline:0}
.planner .tabs button svg.ic,.planner .tabs .tab-more svg.ic{width:24px;height:24px;margin:0;padding:3px 0;box-sizing:content-box;width:24px;border-radius:999px;transition:background .15s,width .15s}
.planner .tabs button[aria-selected=true]{background:transparent;color:var(--acc-ink)}
.planner .tabs button[aria-selected=true] svg.ic{background:var(--tint-2);padding:3px 16px;color:var(--acc-ink)}
.planner .tabs .tab-more{position:sticky;right:0;background:color-mix(in srgb,var(--card) 96%,transparent);color:var(--ink);text-decoration:none}
.planner .tabs .tab-more.active{outline:0;color:var(--acc-ink)}
.planner .tabs button:focus-visible{outline:3px solid var(--acc-2);outline-offset:-3px}
/* All tabs = bottom sheet */
.planner .more-menu{position:fixed;z-index:26;left:8px;right:8px;bottom:calc(var(--nav-h) + 8px + env(safe-area-inset-bottom,0px));top:auto;max-width:34rem;margin:0 auto;max-height:calc(100vh - var(--nav-h) - var(--bar-h) - 40px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.3);padding:12px}
.tabindex .ti-head{color:var(--ink)}.tabindex .ti-head strong{font-family:var(--font-d);font-size:1.25rem}
.tabindex .ti{min-height:96px;background:var(--card-2)!important;border:0!important;color:var(--ink)!important;border-radius:18px}
.tabindex .ti.cur{background:var(--tint)!important;border:0!important;box-shadow:inset 0 0 0 2px var(--acc-2)}
.ti-ic{width:48px;height:48px;border-radius:16px;background:var(--acc);color:#fff}
.tabindex .ti.cur .ti-ic{background:var(--acc)}
.ti-ic svg.ic{width:26px;height:26px}
.more-menu .more-edit{color:var(--ink);min-height:48px}
/* ---------- page body ---------- */
.planner .pl-body{padding-top:16px}
.planner .box,.planner .tile,.planner .month,.planner .hit,.planner .plan-day,.planner details.box{background:var(--card);border:0;border-radius:20px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 2px 8px rgba(16,24,40,.04);color:var(--ink)}
html[data-theme=dark] .planner .box,html[data-theme=dark] .planner .tile,html[data-theme=dark] .planner .month{box-shadow:none;border:1px solid var(--line)}
.tabpane>h2:first-child,.tabpane>.box:first-child>h2:first-child{font-size:1.75rem;color:var(--ink)}
.box>h2:first-child>svg.ic:first-child,.box>h3:first-child>svg.ic:first-child,.box>summary h3>svg.ic:first-child{background:var(--acc);color:#fff;border-radius:12px}
.box h2,.box h3{color:var(--ink)}
/* segmented controls + chips use the section accent */
.seg button,.energy button,.step{background:var(--tint);color:var(--acc-ink);font-weight:700;border-radius:12px}
.seg button[aria-pressed=true],.seg button.on,.energy button[aria-pressed=true],.planner .chip[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.planner .chip{background:var(--card-2);color:var(--ink);border:1px solid var(--line)}
.planner .btn{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:800}
.planner .btn:hover{background:var(--acc);filter:brightness(1.08);color:#fff}
.planner .btn-ghost,.planner .btn.btn-ghost{background:transparent;color:var(--acc-ink);border:2px solid var(--acc-ink)}
.planner .btn-danger{background:transparent;color:#dc2626;border-color:#dc2626}
html[data-theme=dark] .planner .btn-danger{color:#fca5a5;border-color:#fca5a5}
/* inputs */
.planner input:not([type=checkbox]):not([type=radio]):not([type=file]),.planner select,.planner textarea{background:var(--card-2);color:var(--ink);border:1px solid var(--line-2);border-radius:12px}
.fgrid label,.fl,.lbl{color:var(--ink)}
.planner input:focus,.planner select:focus,.planner textarea:focus{outline:3px solid color-mix(in srgb,var(--acc-2) 45%,transparent);border-color:var(--acc-2)}
/* collapsible disclaimers ('i') */
.disc{position:relative;cursor:pointer;max-height:3.1em;overflow:hidden;padding:10px 40px 10px 42px!important;margin:12px 0;border:0!important;border-radius:14px!important;background:var(--card-2)!important;color:var(--muted)!important;font-size:.8125rem!important;line-height:1.45;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.disc *{font-size:inherit}
.disc::before{content:"i";position:absolute;left:12px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--muted);color:var(--card);font:800 13px/20px Georgia,serif;text-align:center;font-style:italic}
.disc::after{content:"";position:absolute;right:14px;top:12px;width:16px;height:16px;background:var(--muted);-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.5' 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.disc.open{max-height:none;-webkit-mask:none;mask:none}.disc.open::after{transform:rotate(180deg)}
.disc p{margin:0 0 .5em}
.pl-foot.disc{margin:16px}
/* ---------- Today dashboard ---------- */
#tab-today .today-hero{position:relative;overflow:hidden;border-radius:24px;padding:20px;margin-bottom:14px;color:#fff;box-shadow:0 10px 30px rgba(29,78,216,.25)}
#tab-today .today-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
#tab-today .today-hero.st-N{background:linear-gradient(145deg,#1e1b4b 0%,#3730a3 60%,#4f46e5 100%)}
#tab-today .today-hero.st-D{background:linear-gradient(145deg,#b45309 0%,#d97706 55%,#f59e0b 100%);color:#fff}
#tab-today .today-hero.st-travel{background:linear-gradient(145deg,#7f1d1d 0%,#b91c1c 60%,#dc2626 100%)}
#tab-today .today-hero.st-off{background:linear-gradient(145deg,#064e3b 0%,#047857 60%,#059669 100%)}
#tab-today .today-hero.st-X{background:linear-gradient(145deg,#4c1d95 0%,#6d28d9 60%,#7c3aed 100%);color:#fff}
#tab-today .today-hero .eyebrow{color:rgba(255,255,255,.85);opacity:1;font-size:.75rem;letter-spacing:.1em}
#tab-today .today-hero h2{color:#fff;font-size:1.375rem;line-height:1.2;margin:4px 0 14px}
#tab-today .today-hero h2 svg.ic{width:28px;height:28px;vertical-align:-6px}
#tab-today .today-hero .cd{margin:0 0 4px}
#tab-today .today-hero .cd strong{display:inline-block;font-family:var(--font-d);font-size:2.25rem;line-height:1.05;font-weight:800;letter-spacing:-.03em;margin-right:6px}
#tab-today .today-hero .cd .hint{color:rgba(255,255,255,.85);display:inline-block;font-size:.875rem}
#tab-today .today-hero .linkbtn{margin-top:12px;background:rgba(255,255,255,.18);border:0;color:#fff;min-height:44px;padding:0 16px;font-size:.9375rem}
#tab-today .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
#tab-today .tile{position:relative;display:flex;flex-direction:column;min-height:150px;padding:14px;border-radius:22px;background:var(--tint);box-shadow:none;border:0;overflow:hidden}
#tab-today .tile h3{order:0;font-size:.8125rem;font-weight:800;color:var(--acc-ink);letter-spacing:0;margin:0 0 8px;flex-wrap:nowrap;line-height:1.2}
#tab-today .tile h3>svg.ic:first-child{width:36px;height:36px;padding:7px;border-radius:12px;background:var(--acc);color:#fff;margin-right:8px;flex:0 0 auto}
#tab-today .tile .tbig{font-family:var(--font-d);font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:2px 0 4px;line-height:1.1}
#tab-today .tile .tbig small{font-size:.55em;color:var(--muted);font-weight:700}
#tab-today .tile .small,#tab-today .tile .small-list{font-size:.75rem;line-height:1.35;color:var(--muted);margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#tab-today .tile .small:last-child{margin-top:auto}
#tab-today .tile .def{font-size:.6875rem;padding:0 4px}
#tab-today .tile[data-sec=meals]{grid-column:1/-1}
#tab-today .tile .small-list{-webkit-line-clamp:4;padding-left:1rem}
#tab-today .tile .sdot{width:.55em;height:.55em}
#tab-today .box{border-radius:22px}
#quicklog{--acc:#4338ca;--acc-2:#6366f1;--acc-l:#a5b4fc}
#tab-today .promo{--acc:#b45309;--acc-2:#f59e0b;--acc-l:#fcd34d;background:var(--tint)}
#tab-today .ybig div{background:var(--card-2);border:0;border-radius:16px;color:var(--muted)}
#tab-today .ybig span{color:var(--acc-ink);font-family:var(--font-d)}
#navpick{border:0;box-shadow:inset 0 0 0 2px var(--acc-2)}
.chk.big{border-bottom:1px solid var(--line);color:var(--ink)}
.chk.big svg.ic{color:var(--acc-ink)}
@media(min-width:700px){#tab-today .tiles{grid-template-columns:repeat(3,1fr)}#tab-today .tile[data-sec=meals]{grid-column:auto}}
/* charts take the section colour */
.trend i{background:var(--acc-2)}
.trend-block rect.bar{fill:var(--acc-2)}.trend-block rect.curbar,.curbar{fill:var(--acc)}
.trend-block .trsum strong,.mtot strong{color:var(--acc-ink)}
.mtot div{background:var(--tint)}
/* money list */
.planner .itemcard{background:var(--card-2);border:0;border-radius:18px}
.ictr .btn{background:var(--acc);border-color:var(--acc);color:#fff;font-size:1.25rem}
.ictr .btn.btn-ghost,.ictr .btn:first-child{background:transparent;color:var(--acc-ink);border:2px solid var(--acc-ink)}
.icount{color:var(--acc-ink)}
.swapres{background:var(--tint);color:var(--ink)}
/* meds */
.dosebtn{background:var(--card-2);color:var(--ink);border:0;border-radius:18px;box-shadow:none}
.dchk{border-color:var(--acc)}
.dose-due .dosebtn{background:color-mix(in srgb,#f59e0b 16%,var(--card));border:2px solid #d97706}
.dose-overdue .dosebtn{background:var(--bad-tint);border:2px solid #dc2626}
.dose-taken .dosebtn{background:var(--ok-tint);border:0}
/* alerts */
.planner .alert{background:var(--bad-tint);color:var(--ink);border-left-color:#dc2626}
.planner .def{background:var(--warn-tint);color:var(--warn-ink);border-color:transparent}
.nudge,.example,.vet-real,.redflag,.ready{color:var(--ink)}
/* body map */
.bm-body{fill:var(--tint-2);stroke:var(--acc-2)}
.bm-reg.on{fill:color-mix(in srgb,var(--acc-2) 35%,transparent);stroke:var(--acc)}
.sevopt span{background:var(--card-2);color:var(--ink)}
.sevopt input:checked+span{background:var(--acc);border-color:var(--acc);color:#fff}
/* tables + calendar in dark */
.tbl th,.tbl td{border-color:var(--line)}
html[data-theme=dark] .dcell{background:#1f2a44;color:var(--ink)}
html[data-theme=dark] .dcell.D{background:#f6c453;color:#3b2900}
html[data-theme=dark] .mgrid .dow{color:var(--muted)}
html[data-theme=dark] .check-list li,html[data-theme=dark] .kitlist li,html[data-theme=dark] .medrow,html[data-theme=dark] .chk.big{border-color:var(--line)}
html[data-theme=dark] .camptile,html[data-theme=dark] .ovbtn,html[data-theme=dark] .hit,html[data-theme=dark] .ncard,html[data-theme=dark] .wcard,html[data-theme=dark] .symg{background:var(--card-2);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] .swapres,html[data-theme=dark] .ready-ok{background:var(--ok-tint)}
html[data-theme=dark] .ready-amber,html[data-theme=dark] .kit-soon{background:var(--warn-tint)}
html[data-theme=dark] .ready-red,html[data-theme=dark] .kit-expired,html[data-theme=dark] .redflag,html[data-theme=dark] .sym-stroke{background:var(--bad-tint)}
html[data-theme=dark] .vet-real,html[data-theme=dark] .nudge,html[data-theme=dark] .example,html[data-theme=dark] .mtot div{background:var(--card-2)}
html[data-theme=dark] dialog{background:var(--card);color:var(--ink)}
html[data-theme=dark] .sh{fill:#1f2a44}
html[data-theme=dark] .bm-lab{fill:var(--muted)}
html[data-theme=dark] .up{color:#fca5a5}html[data-theme=dark] .down{color:#6ee7b7}html[data-theme=dark] .amber{color:#fcd34d}
html[data-theme=dark] #toast{background:#e8edf5;color:#0b1220}
html[data-theme=dark] img[src$="favicon.svg"]{filter:brightness(1.1)}
@media(max-width:599px){.planner .wrap{padding-left:14px;padding-right:14px}}
@media print{.appbar,.ab-sheet,.planner .tabs{display:none!important}body.planner-page{padding-bottom:0}}

/* Setup lives in the app bar as a gear (still the same .tabs button) */
.planner .tabs button[data-tab=setup]{position:fixed;z-index:31;top:calc(6px + env(safe-area-inset-top,0px));right:60px;width:44px;height:44px;min-height:44px;max-width:44px;flex:none;padding:0;border-radius:50%;background:var(--card-2);color:var(--ink);font-size:0;gap:0}
.planner .tabs button[data-tab=setup] svg.ic{padding:0;width:22px;height:22px}
.planner .tabs button[data-tab=setup][aria-selected=true]{background:var(--acc);color:#fff}
.planner .tabs button[data-tab=setup][aria-selected=true] svg.ic{background:none;padding:0;color:#fff}
.appbar{padding-right:116px}
.appbar #ab-info{position:fixed;top:calc(6px + env(safe-area-inset-top,0px));right:12px;z-index:31}
.ab-theme{display:flex;align-items:center;gap:6px;margin:0 0 12px;flex-wrap:wrap}.ab-theme .lbl{margin:0 6px 0 0;font-weight:800}
.ab-theme button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card-2);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.ab-theme button[aria-pressed=true]{background:var(--ink);color:var(--card);border-color:var(--ink)}

.tm-l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.planner .tabs{position:fixed!important}
#ab-help-slot .helpfab{font-size:.8125rem;padding:0 12px;gap:4px}
#ab-help-slot .helpfab svg.ic{width:18px;height:18px}
.ab-title{font-size:1.125rem}
#ab-sec{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.05}
@media(max-width:380px){.ab-kicker{display:none}}
