/* ============================================================
   Harriet's Ironman Journey — premium pastel UI
   Muted, refined, calendar-first · built by Ali ♡
   ============================================================ */
:root{
  /* neutrals */
  --bg:#F4F1EA; --paper:#FFFFFF; --ink:#2C2B2E; --ink-soft:#5A5760; --muted:#9A968E;
  --line:rgba(44,43,46,.07); --line-2:rgba(44,43,46,.12);
  /* muted premium pastels */
  --sage:#8FA383; --sage-d:#63775A; --sage-s:#EAEDE3;
  --clay:#C68A6B; --clay-d:#A9694A; --clay-s:#F2E7DE;
  --blue:#8AA6BC; --blue-d:#5A7C97; --blue-s:#E5ECF1;
  --sand:#CBAA79; --sand-d:#A9874F; --sand-s:#F3EBDB;
  --lilac:#A79FB2; --lilac-d:#7B7288; --lilac-s:#ECE8F0;
  --iron:#DE2A40; --iron-s:#F7DDE0;
  /* session colors (muted) */
  --c-run:#C67B57; --c-bike:#6F8A5E; --c-swim:#5C8199; --c-strength:#BE9455;
  --c-mobility:#8E82A0; --c-rest:#B4AFA4; --c-race:#DE2A40;
  /* fx */
  --sh-1:0 1px 2px rgba(44,43,46,.04), 0 4px 16px rgba(44,43,46,.05);
  --sh-2:0 2px 4px rgba(44,43,46,.05), 0 12px 34px rgba(44,43,46,.09);
  --sh-lg:0 30px 80px rgba(28,26,32,.26);
  --r:18px; --r-sm:13px;
  --f-round: ui-rounded, "SF Pro Rounded", "Quicksand", -apple-system, system-ui, sans-serif;
  --f-body: "Nunito", ui-rounded, -apple-system, system-ui, sans-serif;
  --f-hand: "Caveat", cursive;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;}
body{background-image:
  radial-gradient(circle at 8% 0%, rgba(143,163,131,.10), transparent 34%),
  radial-gradient(circle at 96% 6%, rgba(138,166,188,.10), transparent 32%);
  background-attachment:fixed;}
h1,h2,h3,h4{font-family:var(--f-round);font-weight:600;color:var(--ink);margin:0;letter-spacing:-.015em;}
button{font-family:inherit;cursor:pointer;}

/* ============ SPLASH · M-DOT ============ */
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%, #24313f 0%, #1c2836 60%, #141d28 100%);
  transition:opacity .85s ease, visibility .85s ease;}
.splash.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.splash-inner{text-align:center;animation:sRise 1s cubic-bezier(.2,.8,.2,1) both;}
.mdot{width:132px;height:auto;animation:mPop 1.1s cubic-bezier(.2,1.2,.35,1) both;
  filter:drop-shadow(0 12px 34px rgba(222,42,64,.42));}
.md-head,.md-body{fill:var(--iron);}
.md-reg circle{fill:none;stroke:var(--iron);stroke-width:1.4;}
.md-reg text{fill:var(--iron);font:700 10px var(--f-body);}
.splash-word{font-family:var(--f-round);font-weight:600;letter-spacing:.34em;color:#fff;font-size:22px;margin-top:26px;
  opacity:0;animation:fUp .7s ease forwards .6s;}
.splash-word span{color:var(--iron);}
.splash-name{font-family:var(--f-hand);font-size:32px;color:#cfd6de;margin-top:4px;opacity:0;animation:fUp .7s ease forwards .8s;}
.splash-sig{font-family:var(--f-hand);font-size:19px;color:var(--iron);opacity:0;animation:fUp .7s ease forwards 1s;margin-top:2px;}
.splash-skip{position:absolute;bottom:30px;right:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);border-radius:22px;padding:8px 18px;font-size:13px;font-weight:700;letter-spacing:.02em;
  opacity:0;animation:fUp .5s ease forwards 1.3s;transition:background .2s;}
.splash-skip:hover{background:rgba(255,255,255,.18);}
@keyframes mPop{0%{opacity:0;transform:scale(.72);}60%{opacity:1;}100%{opacity:1;transform:scale(1);}}
@keyframes sRise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes fUp{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}

/* ============ APP REVEAL ============ */
.app{opacity:0;transform:translateY(6px);}
.app.show{opacity:1;transform:none;transition:opacity .7s ease .05s, transform .7s ease .05s;}

/* ============ HERO ============ */
.hero{background:linear-gradient(160deg,#eef0e8 0%,#e9edf1 52%,#f1ebe2 100%);
  border-bottom:1px solid var(--line);padding:40px 0 30px;margin-bottom:6px;}
.hero-wrap{max-width:1060px;margin:0 auto;padding:0 24px;}
.hero-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;}
.hero-kicker{font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-d);}
.hero-title{font-size:42px;font-weight:600;margin:8px 0 6px;letter-spacing:-.02em;}
.hero-sub{color:var(--ink-soft);font-size:16px;max-width:500px;margin:0;font-weight:500;}
.hero-mark{flex:none;opacity:.9;}
.hero-mark svg{width:58px;height:auto;}
.hero-mark svg circle,.hero-mark svg path{fill:var(--iron);}
.goals{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.goal{background:rgba(255,255,255,.66);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-sm);
  padding:12px 16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;min-width:150px;}
.goal b{font-family:var(--f-round);font-weight:600;font-size:14.5px;color:var(--ink);}
.goal .g-date{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.02em;margin-top:2px;}
.goal.g-key{border-bottom:2.5px solid var(--iron);}

/* ============ LAYOUT ============ */
.wrap{max-width:1060px;margin:0 auto;padding:24px 24px 90px;}

/* segmented control */
.segmented{display:inline-flex;background:rgba(44,43,46,.05);border-radius:14px;padding:4px;margin-bottom:24px;gap:2px;}
.seg{border:none;background:transparent;color:var(--ink-soft);font-weight:700;font-size:14px;padding:9px 22px;border-radius:11px;transition:.18s;}
.seg.active{background:var(--paper);color:var(--ink);box-shadow:var(--sh-1);}
.seg:not(.active):hover{color:var(--ink);}

/* coach note */
.coach-note{border-radius:var(--r);padding:15px 18px;margin-bottom:22px;font-weight:600;font-size:15px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--sh-1);border:1px solid var(--line);line-height:1.42;background:var(--paper);}
.coach-note::before{content:"♡";font-size:19px;flex:none;color:var(--iron);}
.coach-note.easy::before{content:"☾";color:var(--lilac-d);}
.coach-note.fire::before{content:"▲";color:var(--clay-d);}
.coach-note{color:var(--sage-d);}
.coach-note.easy{color:var(--lilac-d);}
.coach-note.fire{color:var(--clay-d);}
.coach-note.hide{display:none;}

/* stats */
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.stat{flex:1;min-width:148px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--sh-1);}
.stat .n{font-family:var(--f-round);font-size:33px;font-weight:600;line-height:1;color:var(--ink);letter-spacing:-.02em;}
.stat:nth-child(1) .n{color:var(--iron);} .stat:nth-child(2) .n{color:var(--blue-d);}
.stat:nth-child(3) .n{color:var(--sand-d);} .stat:nth-child(4) .n{color:var(--sage-d);}
.stat .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-weight:800;}
.progress{height:7px;background:var(--blue-s);border-radius:20px;overflow:hidden;margin-top:12px;}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-d),var(--sage-d));border-radius:20px;transition:width .5s ease;}

/* 80/20 gauge */
.polar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-1);margin-bottom:22px;}
.polar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;}
.polar-kicker{font-family:var(--f-round);font-weight:600;font-size:15px;color:var(--ink);}
.polar-sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px;}
.polar-badge{font-family:var(--f-round);font-weight:700;font-size:12.5px;padding:6px 13px;border-radius:20px;background:var(--sage-s);color:var(--sage-d);white-space:nowrap;}
.polar-badge.off{background:var(--sand-s);color:var(--sand-d);}
.polar-bar{height:14px;border-radius:20px;overflow:hidden;display:flex;background:var(--line);}
.polar-bar > i{height:100%;transition:width .5s ease;}
.pb-easy{background:linear-gradient(90deg,var(--blue-d),var(--sage));}
.pb-hard{background:linear-gradient(90deg,var(--clay),var(--iron));}
.polar-legend{display:flex;gap:20px;margin-top:11px;font-size:12.5px;color:var(--ink-soft);font-weight:600;flex-wrap:wrap;}
.polar-legend b{color:var(--ink);}
.pl-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.pl-dot.easy{background:var(--blue-d);} .pl-dot.hard{background:var(--iron);}

/* up next */
.upnext{margin-bottom:26px;}
.upnext-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;}
.upnext-head{margin-bottom:10px;}
.upnext-list{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;}
.upnext-list::-webkit-scrollbar{display:none;}
.un-card{flex:0 0 auto;min-width:150px;max-width:180px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;box-shadow:var(--sh-1);cursor:pointer;transition:.16s;border-top:3px solid var(--line-2);}
.un-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);}
.un-card.tint-p1{border-top-color:var(--blue-d);} .un-card.tint-base{border-top-color:var(--sage-d);}
.un-card.tint-build{border-top-color:var(--sand-d);} .un-card.tint-taper{border-top-color:var(--clay-d);}
.un-card.tint-recovery{border-top-color:var(--lilac-d);}
.un-day{font-family:var(--f-round);font-weight:700;font-size:13px;color:var(--ink);}
.un-day span{color:var(--muted);font-weight:600;}
.un-card.is-today .un-day{color:var(--iron);}
.un-sess{font-size:12px;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:6px;margin-top:7px;}
.un-sess .dot{width:7px;height:7px;border-radius:50%;flex:none;}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.cal-head h2{font-size:25px;font-weight:600;}
.cal-nav{display:flex;gap:8px;align-items:center;}
.btn{background:var(--paper);border:1px solid var(--line-2);border-radius:12px;padding:9px 15px;color:var(--ink);
  font-size:15px;font-weight:700;transition:.15s;min-width:42px;box-shadow:var(--sh-1);}
.btn:hover{transform:translateY(-1px);}
.btn.solid{background:var(--ink);color:#fff;border-color:var(--ink);}

.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:9px;}
.weekdays div{text-align:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.cell{background:var(--paper);border:1px solid var(--line);border-radius:15px;min-height:104px;padding:10px;
  position:relative;cursor:pointer;transition:.16s;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-1);}
.cell:hover{box-shadow:var(--sh-2);transform:translateY(-2px);}
.cell.empty{background:transparent;border:1px dashed var(--line-2);cursor:default;box-shadow:none;}
.cell.empty:hover{transform:none;box-shadow:none;}
.cell .dnum{font-family:var(--f-round);font-size:16px;font-weight:700;color:var(--ink);line-height:1;}
.cell.today{border-color:var(--iron);box-shadow:0 0 0 1px var(--iron),var(--sh-1);}
.cell.today .dnum{color:var(--iron);}
.cell.today::before{content:"today";position:absolute;top:10px;right:10px;font-size:8px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--iron);background:var(--iron-s);padding:2px 6px;border-radius:7px;}
.cell.race-day{background:linear-gradient(160deg,#fff,var(--iron-s));}
.cell.rest-day{background:linear-gradient(160deg,#fff,#faf8f4);}
.cell.p1{border-top:3px solid var(--blue-d);}
.cell.recovery{border-top:3px solid var(--lilac-d);}
.cell.base{border-top:3px solid var(--sage-d);}
.cell.build{border-top:3px solid var(--sand-d);}
.cell.taper{border-top:3px solid var(--clay-d);}
.cell.post{border-top:3px solid var(--iron);}
.chips{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.chip{font-size:11px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none;}
.chip.done{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--sage);}
.star{position:absolute;bottom:8px;right:10px;font-size:14px;}
.cell.all-done{background:linear-gradient(160deg,#fff,var(--sage-s));}
.cell.all-done .heart-bloom{opacity:1;transform:scale(1);}
.heart-bloom{position:absolute;top:9px;right:10px;font-size:13px;opacity:0;transform:scale(0);transition:.4s cubic-bezier(.2,1.4,.4,1);color:var(--iron);}
.cell.missed{opacity:.6;}

/* legend */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0 6px;font-size:12.5px;color:var(--ink-soft);font-weight:600;}
.legend span{display:flex;align-items:center;gap:6px;}
.legend .dot{width:9px;height:9px;border-radius:50%;}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:500;}
.reset-link{background:none;border:none;color:var(--muted);font-size:12px;text-decoration:underline;padding:8px 0;font-weight:600;}
.reset-link:hover{color:var(--iron);}

/* ============ BLOCKS VIEW ============ */
.blocks-intro{margin-bottom:24px;max-width:640px;}
.blocks-intro h2{font-size:26px;font-weight:600;margin-bottom:8px;}
.blocks-intro p{color:var(--ink-soft);font-size:15px;font-weight:500;margin:0;}
.blocks-intro b{color:var(--ink);}
.blocks-list{display:flex;flex-direction:column;gap:14px;}
.block{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-1);
  position:relative;overflow:hidden;transition:.18s;}
.block:hover{box-shadow:var(--sh-2);}
.block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--bl,#ccc);}
.block.tint-p1{--bl:var(--blue-d);} .block.tint-recovery{--bl:var(--lilac-d);}
.block.tint-base{--bl:var(--sage-d);} .block.tint-build{--bl:var(--sand-d);} .block.tint-taper{--bl:var(--clay-d);}
.block-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.block-n{font-family:var(--f-round);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.block h3{font-size:21px;font-weight:600;}
.block-now{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--iron);padding:3px 9px;border-radius:20px;}
.block-meta{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 12px;font-size:12.5px;color:var(--muted);font-weight:700;}
.block-meta b{color:var(--ink-soft);}
.block-focus{color:var(--ink-soft);font-size:14.5px;font-weight:500;line-height:1.5;margin-bottom:12px;}
.block-key{display:flex;gap:8px;flex-wrap:wrap;}
.block-key span{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--ink-soft);}

.ali-card{margin-top:24px;background:linear-gradient(160deg,#fff,var(--clay-s));border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--sh-1);text-align:center;}
.ali-quote{font-family:var(--f-hand);font-size:26px;color:var(--clay-d);line-height:1.3;}
.ali-sign{font-family:var(--f-hand);font-size:20px;color:var(--iron);margin-top:8px;}

/* footer */
.foot{font-family:var(--f-hand);font-size:25px;color:var(--iron);text-align:center;margin:46px 0 4px;}
.foot-mini{text-align:center;font-size:12px;color:var(--muted);font-weight:600;margin:0;}

/* ============ DRAWER ============ */
.scrim{position:fixed;inset:0;background:rgba(28,26,32,.4);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.3s;z-index:40;}
.scrim.open{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--bg);z-index:50;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.3,.9,.3,1);display:flex;flex-direction:column;box-shadow:var(--sh-lg);}
.drawer.open{transform:none;}
.drawer-head{padding:26px 26px 22px;color:#fff;position:relative;flex:none;background:linear-gradient(140deg,var(--blue-d),var(--sage-d));}
.drawer-head.ph-p1{background:linear-gradient(140deg,var(--blue-d),var(--lilac-d));}
.drawer-head.ph-base{background:linear-gradient(140deg,var(--sage-d),var(--blue-d));}
.drawer-head.ph-build{background:linear-gradient(140deg,var(--sand-d),var(--clay-d));}
.drawer-head.ph-taper{background:linear-gradient(140deg,var(--clay-d),var(--iron));}
.drawer-head.ph-recovery{background:linear-gradient(140deg,var(--lilac-d),var(--blue-d));}
.dclose{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.18);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;display:grid;place-items:center;}
.dclose:hover{background:rgba(255,255,255,.32);}
.dphase{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.92;}
.drawer-head h3{color:#fff;font-size:27px;margin:6px 0 2px;}
.ddate{font-size:13.5px;opacity:.92;font-weight:600;}
.devent{display:inline-block;margin-top:10px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700;}
.drawer-body{padding:20px 22px 40px;overflow-y:auto;flex:1;}
.banner{background:var(--sand-s);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 15px;font-size:13.5px;color:var(--sand-d);margin-bottom:16px;font-weight:600;line-height:1.45;}
.sess{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;margin-bottom:12px;box-shadow:var(--sh-1);transition:.15s;}
.sess.done{background:var(--sage-s);}
.sess.rest-card{background:var(--lilac-s);}
.sess-top{display:flex;align-items:center;gap:12px;}
.sess-badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:none;color:#fff;box-shadow:var(--sh-1);}
.sess-main{flex:1;min-width:0;}
.stype{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.sess h4{font-size:16px;font-weight:600;margin:1px 0;line-height:1.25;}
.ssub{font-size:12.5px;color:var(--muted);font-weight:600;}
.sess-check{flex:none;}
.chk{width:25px;height:25px;accent-color:var(--sage-d);cursor:pointer;}
.expand-hint{font-size:11.5px;color:var(--blue-d);font-weight:700;margin-top:10px;cursor:pointer;}
.sess-detail{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.sess.expanded .sess-detail{max-height:900px;}
.sblock{border-left:2px solid var(--line-2);padding:2px 0 2px 12px;margin-top:12px;}
.sblock .lab{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-d);margin-bottom:2px;}
.sblock div:last-child{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.notes-wrap{margin-top:22px;}
.notes-wrap label{font-family:var(--f-round);font-weight:600;font-size:14px;color:var(--ink);display:block;margin-bottom:8px;}
#d-notes{width:100%;min-height:90px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px;font-family:var(--f-body);font-size:14px;resize:vertical;background:var(--paper);color:var(--ink);}
#d-notes:focus{outline:none;border-color:var(--blue-d);box-shadow:0 0 0 3px var(--blue-s);}
.saved-tag{font-size:12px;color:var(--sage-d);font-weight:700;height:16px;margin-top:6px;}

/* ============ RESPONSIVE ============ */
@media (max-width:680px){
  .hero-title{font-size:33px;} .hero-mark{display:none;}
  .cell{min-height:80px;padding:7px;border-radius:12px;}
  .cell .dnum{font-size:14px;} .chip{font-size:9.5px;}
  .grid,.weekdays{gap:5px;} .stat{min-width:120px;padding:14px;} .stat .n{font-size:27px;}
  .cell.today::before{display:none;}
}