/* Today › Readiness detail and the Everyday habits page (js/sections/readiness.js, js/pages/choices.js).
   The waterfall keeps the R chart's three stage colours (past week & 2 days ago, yesterday, last night's sleep) and its
   two greys: not true = the darker grey (adds 0), unknown = the lighter grey (adds weight × share). */

:root {
  --rd-stage-1: var(--c-expected); --rd-stage-2: var(--c-sleep); --rd-stage-3: var(--c-exercise);
  --rd-off: #a9a9b1; --rd-unknown: #dcdce2;
  --rd-lo-tint: rgba(163, 90, 0, .05); --rd-hi-tint: rgba(24, 117, 69, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) { --rd-off: #7d8598; --rd-unknown: #3a4152; --rd-lo-tint: rgba(227, 160, 79, .06); --rd-hi-tint: rgba(79, 201, 138, .06); }
}
:root[data-mode="dark"] { --rd-off: #7d8598; --rd-unknown: #3a4152; --rd-lo-tint: rgba(227, 160, 79, .06); --rd-hi-tint: rgba(79, 201, 138, .06); }

/* ---- expected → felt → gap (app.R reveal-row) ---- */
.rv-row { display: flex; align-items: stretch; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-1) 0 10px; }
.rv-step { flex: 1 1 170px; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 14px; min-height: 78px; min-width: 0; }
.rv-label { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }
.rv-value { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rv-value strong { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.rv-value span { font-size: var(--t-xs); color: var(--ink-3); }
.rv-step.felt strong { color: var(--c-felt); }
.rv-step.muted strong { color: var(--ink-3); opacity: .7; }
.rv-step.rv-action .btn { align-self: flex-start; margin-top: var(--s-1); }
.rv-arrow { align-self: center; color: var(--ink-3); font-size: var(--t-lg); }
.rv-equation { font-size: var(--t-sm); color: var(--ink-2); margin: 0; max-width: 100ch; }
.rv-equation strong { color: var(--ink); }
.rv-equation .rv-hide { display: inline; min-height: 0; padding: 0 0 0 var(--s-2); font-size: var(--t-sm); }
@media (max-width: 700px) { .rv-arrow { display: none; } .rv-step { flex-basis: 100%; } }

/* ---- felt vs expected ---- */
.rdy-acc { font-size: var(--t-sm); color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-md); padding: 10px 14px; margin: var(--s-2) 0 0; max-width: 100ch; }
.rdy-acc strong { color: var(--ink); }
.fn-mark { font-size: .7em; margin-left: 1px; }
.fe-svg text, .wf-svg text, .ic-svg text { font-family: var(--font); }
.fe-focus { fill: var(--c-expected-soft); }
.fe-grid, .wf-grid, .ic-grid { stroke: var(--c-grid); stroke-width: 1; }
.fe-tick, .wf-tick, .wf-xtick, .ic-tick { fill: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fe-ytitle, .wf-ytitle, .wf-xtitle, .ic-title { fill: var(--ink-3); font-size: 12px; }
.fe-gap { stroke: var(--c-gap); stroke-width: 2; }
.fe-line { fill: none; stroke: var(--c-expected); stroke-width: 2; stroke-linejoin: round; }
.fe-exp { fill: var(--surface); stroke: var(--c-expected); stroke-width: 1.8; }
.fe-felt { fill: var(--c-felt); }
.fe-miss { stroke: var(--c-gap); stroke-width: 1.5; fill: none; }
.fe-q { fill: var(--c-expected); font-size: 15px; font-weight: 700; }
.fe-hit, .wf-hit, .ic-hit { cursor: pointer; outline: none; }
.wf-hit { cursor: default; }
.fe-hit:hover, .fe-hit:focus-visible { fill: var(--c-band); }
.fe-hit:focus-visible, .wf-hit:focus-visible, .ic-hit:focus-visible { stroke: var(--accent); stroke-width: 2; }
.ic-empty { fill: var(--ink-3); font-size: 13px; }

/* ---- how the expected value is built ---- */
details.rdy-build { margin-top: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-3); }
details.rdy-build > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; }
details.rdy-build > summary::-webkit-details-marker { display: none; }
details.rdy-build > summary::before { content: "›"; display: inline-block; width: 14px; color: var(--ink-3); font-size: var(--t-lg); transition: transform .15s var(--ease); }
details.rdy-build[open] > summary { margin-bottom: var(--s-3); }
details.rdy-build[open] > summary::before { transform: rotate(90deg); }
.rdy-actions { display: flex; justify-content: flex-end; margin: calc(-1 * var(--s-1)) 0 var(--s-1); }
.wf-box { margin-bottom: var(--s-3); }
.wf-axis { stroke: var(--c-axis); stroke-width: 1; }
.wf-divider { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.wf-stage-name { font-size: 11px; font-weight: 700; }
.wf-stage-name.s1 { fill: var(--rd-stage-1); } .wf-stage-name.s2 { fill: var(--rd-stage-2); } .wf-stage-name.s3 { fill: var(--rd-stage-3); }
.wf-base { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 5 4; }
.wf-base-label { fill: var(--ink-2); font-size: 11px; }
.wf-felt { stroke: var(--c-felt); stroke-width: 2.5; }
.wf-felt-label { fill: var(--c-felt); font-size: 12px; font-weight: 700; }
.wf-bar.off, .wf-dot.off { fill: var(--rd-off); }
.wf-bar.unknown, .wf-dot.unknown { fill: var(--rd-unknown); }
.wf-bar.held { stroke: var(--ink); stroke-width: 2; }
.wf-bar.s1, .wf-dot.s1 { fill: var(--rd-stage-1); }
.wf-bar.s2, .wf-dot.s2 { fill: var(--rd-stage-2); }
.wf-bar.s3, .wf-dot.s3 { fill: var(--rd-stage-3); }
.wf-dot { stroke: var(--surface); stroke-width: 1.5; }
.wf-run { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.wf-label { fill: var(--ink); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.wf-end { fill: var(--c-expected); font-size: 11.5px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
@media (max-width: 520px) { .wf-label { font-size: 9.5px; } }
/* the steps come in one after another; Replay animation draws the chart again */
.wf-svg.anim .wf-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: wf-grow .52s cubic-bezier(.33, 1, .68, 1) both; animation-delay: calc(var(--i) * 110ms); }
.wf-svg.anim .wf-bar.down { transform-origin: 50% 0; }
.wf-svg.anim .wf-dot, .wf-svg.anim .wf-label, .wf-svg.anim .wf-end { animation: wf-fade .32s ease both; animation-delay: calc(var(--i) * 110ms + 160ms); }
.wf-svg.anim .wf-run { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wf-draw 1.6s linear .16s forwards; }
@keyframes wf-grow { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wf-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wf-svg.anim .wf-bar, .wf-svg.anim .wf-dot, .wf-svg.anim .wf-label, .wf-svg.anim .wf-end { animation: none; }
  .wf-svg.anim .wf-run { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* the three stages as numbered lists (story_visuals.R readiness_factor_key_ui) */
.wf-key { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: var(--s-3); margin: var(--s-2) 0 var(--s-1); }
.wf-stage { background: var(--surface-2); border-top: 4px solid var(--rd-stage-1); border-radius: var(--r-md); padding: 14px 15px; min-width: 0; }
.wf-stage.stage-2 { border-top-color: var(--rd-stage-2); }
.wf-stage.stage-3 { border-top-color: var(--rd-stage-3); }
.wf-stage-head { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; margin-bottom: var(--s-2); }
.wf-stage-head strong { font-size: var(--t-sm); }
.wf-stage-head span { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.wf-stage ol { margin: 0; padding-left: 1.7em; }
.wf-stage li { padding: 3px 0 5px; line-height: 1.35; color: var(--ink-2); }
.wf-stage li::marker { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wf-stage li > span { display: block; font-size: var(--t-xs); }
.wf-stage li > small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.wf-stage li.held > span { font-weight: 700; color: var(--ink); }
.wf-stage li.held::marker { color: var(--c-expected); font-weight: 700; }
.wf-stage li.unknown { opacity: .6; }
@media (max-width: 860px) { .wf-key { grid-template-columns: 1fr; } }

/* ---- the interval charts (day_view.R health_interval_rows) ---- */
.ev-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: var(--t-xs); color: var(--ink-3); margin: 0 0 var(--s-2); }
.ev-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ev-legend .lg-diamond::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--ink); background: var(--surface); display: inline-block; }
.ev-legend .lg-diamond.today { color: var(--c-expected); font-weight: 600; }
.ev-legend .lg-diamond.today::before { background: var(--c-expected); border-color: var(--c-expected); }
.ev-legend .lg-line::before { content: ""; width: 20px; height: 2.5px; border-radius: 2px; background: var(--c-unclear); display: inline-block; }
.ev-legend .lg-line.clear { color: var(--ink); font-weight: 600; }
.ev-legend .lg-line.clear::before { height: 5px; background: var(--c-clear); }
.ev-legend .lg-note { flex-basis: 100%; }
.ic-lo { fill: var(--rd-lo-tint); }
.ic-hi { fill: var(--rd-hi-tint); }
.ic-zero { stroke: var(--ink); stroke-width: 1; }
.ic-side { font-size: 11.5px; font-weight: 700; }
.ic-side.lo { fill: var(--c-load); }
.ic-side.hi { fill: var(--c-felt); }
.ic-head { fill: var(--ink); font-weight: 700; }
.ic-label { fill: var(--ink-3); }
.ic-label.clear { fill: var(--ink); }
.ic-label.ring { fill: var(--c-expected); font-weight: 700; }
.ic-value { fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.ic-value.clear { fill: var(--ink); font-weight: 700; }
.ic-ci { stroke: var(--c-unclear); stroke-width: 2.5; stroke-linecap: round; }
.ic-ci.clear { stroke: var(--c-clear); stroke-width: 5; }
.ic-diamond { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.ic-diamond.ring { fill: var(--c-expected); stroke: var(--c-expected); }
.ic-picked { fill: var(--accent-soft); }
.ic-hit:hover { fill: var(--c-band); }
.definition-note { margin-top: var(--s-3); }
/* the "Show the data" tables keep a readable width and scroll sideways on a phone */
.rdy-t6 table { min-width: 520px; }
.rdy-t10 table { min-width: 860px; }
details.rdy-build .comparison-conclusion { margin: 0 0 var(--s-2); }
.definition-note p { font-size: var(--t-sm); }
.rdy-fx-card .comparison-conclusion { margin-top: var(--s-4); }

/* ---- Everyday habits: the group filter and the order ---- */
.chs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.chs-seg { flex-wrap: wrap; max-width: 100%; }
.chs-seg button { min-height: 32px; }
@media (max-width: 640px) {
  .chs-seg { border-radius: var(--r-md); }
  .chs-seg button { border-radius: var(--r-sm); flex: 1 1 auto; }
}
.chs-note-card .reading-list strong { color: var(--ink); }