/* ==========================================================================
   Adaptive Daily Plan — the Today section.
   Tokens follow the spec's palette; sizing follows its accessibility floor
   (15px body, 13px supporting, 44px minimum touch target).
   ========================================================================== */
#today .td-wrap{ max-width:560px; margin:0 auto; padding:0 16px 40px; }

/* ── header: compact, never more than ~96px ─────────────────────────────── */
.td-head{ padding:14px 2px 6px; }
.td-greet{ font-size:22px; font-weight:700; letter-spacing:-.03em; color:var(--cx-text,#F7F8FA); margin:0; }
.td-date{ font-size:13px; color:var(--cx-muted,#AEB5C2); margin-top:3px; }

/* ── progress ───────────────────────────────────────────────────────────── */
.td-prog{
  margin-top:14px; border:1px solid var(--cx-line,#343A48); border-radius:16px;
  background:var(--cx-surface,#1A1E26); padding:16px; cursor:pointer;
}
.td-prog-top{ display:flex; align-items:center; gap:14px; }
.td-ring{ width:64px; height:64px; flex:none; }
.td-ring circle{ fill:none; stroke-width:7; }
.td-ring .bg{ stroke:#2C3240; }
.td-ring .fg{ stroke:#29D98B; stroke-linecap:round; transition:stroke-dashoffset .3s ease; }
.td-ring text{ fill:#F7F8FA; font-size:15px; font-weight:700; }
.td-prog-copy .t{ font-size:16px; font-weight:700; letter-spacing:-.02em; }
.td-prog-copy .d{ font-size:13px; color:var(--cx-muted,#AEB5C2); margin-top:3px; }
.td-prog-break{ display:none; gap:8px; margin-top:14px; }
.td-prog.open .td-prog-break{ display:flex; }
.td-brk{ flex:1; background:#222733; border-radius:10px; padding:9px 10px; min-width:0; }
.td-brk .k{ font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--cx-dim,#7C8496); text-transform:uppercase; }
.td-brk .v{ font-size:15px; font-weight:700; margin-top:2px; }

/* ── adaptive suggestion ────────────────────────────────────────────────── */
.td-sugg{
  margin-top:14px; border:1px solid rgba(141,131,255,.4); border-radius:16px;
  background:linear-gradient(180deg, rgba(141,131,255,.10), rgba(141,131,255,.03));
  padding:15px;
}
.td-sugg .lab{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#8D83FF; display:flex; align-items:center; gap:6px;
}
.td-sugg .why{ font-size:15px; line-height:1.45; margin-top:8px; color:var(--cx-text,#F7F8FA); }
.td-sugg .imp{ font-size:13px; color:var(--cx-muted,#AEB5C2); margin-top:5px; line-height:1.45; }
.td-sugg-acts{ display:flex; gap:9px; margin-top:13px; }
.td-btn{
  min-height:44px; padding:11px 18px; border-radius:12px; font-family:inherit;
  font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent;
}
.td-btn-primary{ background:#29D98B; color:#0C1A13; }
.td-btn-primary:active{ background:#20B976; }
.td-btn-ghost{ background:none; border-color:var(--cx-line,#343A48); color:var(--cx-muted,#AEB5C2); }
.td-undo{ display:flex; align-items:center; gap:10px; margin-top:12px; font-size:13px; color:var(--cx-muted,#AEB5C2); }

/* ── timeline ───────────────────────────────────────────────────────────── */
.td-seclabel{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cx-dim,#7C8496); padding:22px 2px 10px; display:flex; align-items:baseline;
}
.td-seclabel .r{ margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none;
  font-size:12.5px; color:var(--cx-muted,#AEB5C2); }

.td-item{
  display:flex; align-items:center; gap:12px; padding:13px 14px; margin-bottom:9px;
  border:1px solid var(--cx-line,#343A48); border-radius:16px; background:var(--cx-surface,#1A1E26);
}
.td-item.is-overdue{ border-color:rgba(245,196,81,.45); }
.td-item.is-done{ opacity:.62; }
.td-item.is-skipped{ opacity:.55; }
.td-ic{
  width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:#222733; font-size:18px;
}
.td-body{ min-width:0; flex:1; }
.td-t{ font-size:15px; font-weight:600; letter-spacing:-.015em; }
.td-item.is-done .td-t{ text-decoration:line-through; }
.td-s{ font-size:13px; color:var(--cx-muted,#AEB5C2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* State is never carried by colour alone. */
.td-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; margin-top:5px; padding:3px 7px;
  border-radius:6px; border:1px solid var(--cx-line,#343A48); color:var(--cx-muted,#AEB5C2);
}
.td-tag.done{ color:#29D98B; border-color:rgba(41,217,139,.45); }
.td-tag.late{ color:#F5C451; border-color:rgba(245,196,81,.45); }
.td-tag.skip{ color:var(--cx-dim,#7C8496); }

.td-act{
  min-width:44px; min-height:44px; flex:none; border-radius:12px; cursor:pointer;
  border:1px solid var(--cx-line,#343A48); background:#222733; color:#F7F8FA;
  font-family:inherit; font-size:13px; font-weight:700; padding:0 14px;
}
.td-act.primary{ background:#29D98B; border-color:#29D98B; color:#0C1A13; }
.td-more{
  min-width:44px; min-height:44px; flex:none; border:0; background:none; cursor:pointer;
  color:var(--cx-dim,#7C8496); font-size:19px; line-height:1;
}

/* ── nutrition ──────────────────────────────────────────────────────────── */
.td-nut{
  border:1px solid var(--cx-line,#343A48); border-radius:16px;
  background:var(--cx-surface,#1A1E26); padding:15px;
}
.td-nut-row{ display:flex; gap:10px; }
.td-nut-cell{ flex:1; min-width:0; }
.td-nut-cell .k{ font-size:10.5px; font-weight:700; letter-spacing:.05em;
  color:var(--cx-dim,#7C8496); text-transform:uppercase; }
.td-nut-cell .v{ font-size:19px; font-weight:700; letter-spacing:-.02em; margin-top:3px; }
.td-nut-cell .v small{ font-size:12.5px; font-weight:600; color:var(--cx-muted,#AEB5C2); }
.td-bar{ height:6px; border-radius:3px; background:#2C3240; margin-top:8px; overflow:hidden; }
.td-bar span{ display:block; height:100%; border-radius:3px; background:#29D98B; }
.td-bar.over span{ background:#F5C451; }
.td-est{ font-size:11.5px; color:var(--cx-dim,#7C8496); margin-top:10px; }

/* ── weekly scorecard ───────────────────────────────────────────────────── */
.td-week{ display:flex; gap:6px; margin-top:2px; }
.td-day{ flex:1; text-align:center; }
.td-day .n{ font-size:10px; font-weight:700; color:var(--cx-dim,#7C8496); text-transform:uppercase; }
.td-day .b{ height:44px; border-radius:8px; background:#222733; margin-top:5px; position:relative; overflow:hidden; }
.td-day .b span{ position:absolute; left:0; right:0; bottom:0; background:#29D98B; border-radius:8px; }
.td-week-tot{ display:flex; gap:10px; margin-top:14px; }

/* ── plan (the week) ────────────────────────────────────────────────────── */
.td-weeknav{ display:flex; gap:8px; margin-top:12px; }
.td-weeknav .td-btn{ flex:1; }
.td-chips{ display:flex; gap:8px; margin-top:12px; overflow-x:auto; scrollbar-width:none; }
.td-chips::-webkit-scrollbar{ display:none; }
.td-chip{
  flex:none; min-height:38px; padding:8px 15px; border-radius:20px; cursor:pointer;
  border:1px solid var(--cx-line,#343A48); background:var(--cx-surface,#1A1E26);
  color:var(--cx-muted,#AEB5C2); font-family:inherit; font-size:13.5px; font-weight:600;
}
.td-chip.on{ background:#29D98B; border-color:#29D98B; color:#0C1A13; }

.td-planday{
  margin-top:14px; border:1px solid var(--cx-line,#343A48); border-radius:16px;
  background:var(--cx-surface,#1A1E26); overflow:hidden;
}
.td-planday.is-today{ border-color:rgba(41,217,139,.5); }
.td-planday-h{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-bottom:1px solid var(--cx-line,#343A48);
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
}
.td-planday-h .r{ margin-left:auto; font-weight:600; font-size:12.5px; color:var(--cx-muted,#AEB5C2); }
.td-today-pill{
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#29D98B; border:1px solid rgba(41,217,139,.45); border-radius:6px; padding:2px 6px;
}
.td-planrow{
  display:flex; align-items:center; gap:11px; width:100%; min-height:44px;
  padding:11px 14px; border:0; border-top:1px solid rgba(52,58,72,.55);
  background:none; color:inherit; font-family:inherit; text-align:left; cursor:pointer;
}
.td-planrow:first-of-type{ border-top:0; }
.td-planrow.is-done{ opacity:.6; }
.td-planrow .w{ font-size:12px; color:var(--cx-dim,#7C8496); min-width:42px; font-variant-numeric:tabular-nums; }
.td-planrow .i{ font-size:15px; }
.td-planrow .t{ font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.td-planrow.is-done .t{ text-decoration:line-through; }
.td-rest{ padding:14px; font-size:13px; color:var(--cx-dim,#7C8496); text-align:center; }
.td-linkbtn{
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:#29D98B; text-transform:none; letter-spacing:0;
}

/* ── workout session sheet ──────────────────────────────────────────────── */
.ws-overlay{
  position:fixed; inset:0; z-index:10060; background:rgba(6,7,12,.72);
  display:flex; align-items:flex-end; justify-content:center;
}
.ws-sheet{
  width:100%; max-width:560px; max-height:92vh; display:flex; flex-direction:column;
  background:var(--cx-bg,#111318); border-top:1px solid var(--cx-line,#343A48);
  border-radius:22px 22px 0 0;
}
.ws-head{
  display:flex; align-items:flex-start; gap:12px; padding:16px 18px 12px;
  border-bottom:1px solid var(--cx-line,#343A48);
}
.ws-title{ font-size:19px; font-weight:700; letter-spacing:-.025em; }
.ws-sub{ font-size:13px; color:var(--cx-muted,#AEB5C2); margin-top:3px; }
.ws-body{ flex:1; min-height:0; overflow-y:auto; padding:8px 18px; }
.ws-ex{ padding:14px 0; border-bottom:1px solid rgba(52,58,72,.55); }
.ws-ex-h{ display:flex; align-items:baseline; gap:10px; }
.ws-ex-h .t{ font-size:15.5px; font-weight:600; letter-spacing:-.015em; }
.ws-ex-h .n{ margin-left:auto; font-size:12.5px; color:var(--cx-dim,#7C8496); }
.ws-sets{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.ws-set{
  display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:9px;
  background:#222733; border:1px solid var(--cx-line,#343A48);
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
}
.ws-set button{
  border:0; background:none; color:var(--cx-dim,#7C8496); cursor:pointer;
  font-size:11px; padding:0; min-width:20px; min-height:20px;
}
.ws-add{ margin-top:11px; min-height:44px; width:100%; }
.ws-foot{ padding:14px 18px calc(env(safe-area-inset-bottom,14px) + 16px);
  border-top:1px solid var(--cx-line,#343A48); }
.ws-foot .td-btn{ width:100%; }

/* ── states ─────────────────────────────────────────────────────────────── */
.td-skel{ border:1px solid var(--cx-line,#343A48); border-radius:16px; background:var(--cx-surface,#1A1E26);
  height:70px; margin-bottom:9px; position:relative; overflow:hidden; }
.td-skel::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation:td-shimmer 1.1s infinite;
}
@keyframes td-shimmer{ to{ transform:translateX(100%) } }
.td-empty{
  border:1px dashed var(--cx-line,#343A48); border-radius:16px; padding:28px 20px;
  text-align:center; color:var(--cx-muted,#AEB5C2); font-size:14px; line-height:1.5;
}
.td-empty .td-btn{ margin-top:14px; }
.td-error{
  border:1px solid rgba(255,102,115,.45); background:rgba(255,102,115,.08);
  border-radius:16px; padding:16px; font-size:14px; color:#FFB3B9;
}
.td-error .td-btn{ margin-top:12px; }
.td-offline{
  border:1px solid rgba(245,196,81,.4); background:rgba(245,196,81,.08); color:#F5C451;
  border-radius:12px; padding:10px 13px; font-size:13px; margin-top:12px;
}
@media (prefers-reduced-motion:reduce){
  .td-skel::after{ animation:none }
  .td-ring .fg{ transition:none }
}
