/* Daily Life Doc, revision 3: the experiment report (SPEC-R3 rules 23 to 25): the report row of the experiment page
   and the Experiments list (.rp-row), and the report page (.rp): the answer, then ONE sheet (.rp-doc) with the chart
   of each Measure control, Actions, the written parts with their "Writing" state, What research says, Also noticed
   and Learnings parted by hairlines (round 2, the look: no card per part), the buttons, and the care team's review.
   The line, the day marks and the key of a chart are the ones of Progress (css/progress.css: .spark, .sp-*, .dm). Colours are tokens only (LOOK.md); the place's colour comes from --pc-bg, --pc, --pc-d.
   Nothing here has a hover rule, and nothing that changes (a tick, a tag, the reviewed line) moves a neighbour. */

/* ---------- The report row ---------- */
.rp-row { display: block; }
.rp-row-b { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border-radius: 18px; background: var(--pc-bg); color: var(--ink); text-align: left;
  transition: transform var(--m-press) var(--ease-out); }
.rp-row-b:active { transform: scale(0.98); }
.rp-row-b .tile { width: 36px; height: 36px; border-radius: 12px; background: var(--surface); }
.rp-row-b .tile svg { width: 20px; height: 20px; }
.rp-row-b > svg { flex: none; width: 18px; height: 18px; color: var(--pc-d); }
.rp-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-row-t b { font-size: var(--t-m); font-weight: 600; }
.rp-row-t small { font-size: var(--t-sm); font-weight: 500; color: var(--pc-d); }
.rp-row-l { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--t-m); font-weight: 500; }
.rp-row-b + .rp-row-l, .rp-row-b + .rp-row-b { margin-top: 6px; }
.rp-row-n { margin: 8px 2px 0; font-size: var(--t-sm); color: var(--ink2); }
/* Round 3: the report that is due is written by the server's worker. Quiet words where the report will be, and
   when the writing failed one quiet line with Try again. */
.rp-row-l > span:first-of-type { min-width: 0; }
.rp-row-dots { color: var(--ink3); }
.rp-row-again { flex: none; margin-left: auto; min-height: 44px; }

/* ---------- The page ---------- */
.rp-host { position: relative; }
.rp-doc { margin-top: 12px; padding-top: 4px; padding-bottom: 8px; }
.rp-kick { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
/* The experiment's name wraps beside the dates; no word is cut (round 8). */
.rp-kick b { min-width: 0; font-size: var(--t-m); font-weight: 600; overflow-wrap: anywhere; }
.rp-kick span { flex: none; white-space: nowrap; font-size: var(--t-sm); font-weight: 500; color: var(--pc-d); }
.rp-nums { margin-bottom: 12px; }

/* The parts arrive one after the other; the answer lands first. Only on the first draw (data-enter). */
.rp[data-enter] > * { animation: dd-rise var(--m-add) var(--ease-out) both; }
.rp[data-enter] > .rp-ans { animation: rp-land 460ms var(--ease-out) both; }
.rp[data-enter] > .rp-ans ~ * { animation-delay: 260ms; }
.rp[data-enter] > .rp-ans ~ * ~ * { animation-delay: 340ms; }
.rp[data-enter] > .rp-ans ~ * ~ * ~ * { animation-delay: 420ms; }
.rp[data-enter] > .rp-ans ~ * ~ * ~ * ~ * { animation-delay: 500ms; }
.rp[data-enter] > .rp-ans ~ * ~ * ~ * ~ * ~ * { animation-delay: 580ms; }
@keyframes rp-land { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* The answer: a mark, the answer large, Confidence as three small bars, the evidence line, the reviewed line. */
.rp-ans { border-radius: 26px; padding: 20px 18px 18px; background: var(--surface); }
.rp-ans-top { display: flex; align-items: center; gap: 14px; }
.rp-mark { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink2); }
.rp-mark svg { width: 26px; height: 26px; stroke-width: 2.4; }
.rp-ans[data-a="helped"] .rp-mark { background: var(--good-bg); color: var(--good-d); }
.rp-ans[data-a="worse"] .rp-mark { background: var(--bad-bg); color: var(--bad-d); }
.rp[data-enter] .rp-mark { animation: rp-mark 420ms var(--ease-spring) 220ms both; }
@keyframes rp-mark { from { opacity: 0; transform: scale(.5); } }
.rp-ans h1 { min-width: 0; font-size: var(--t-xxl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.rp-ans h1 .lv { font-weight: 600; }
.rp-conf { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-top: 14px; font-size: var(--t-s); font-weight: 500; color: var(--ink2); }
.rp-conf b, .rp-conf .lv { font-weight: 600; color: var(--ink); }
.rp-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.rp-bars i { width: 5px; border-radius: 2px; background: var(--line); }
.rp-bars i:nth-child(1) { height: 8px; } .rp-bars i:nth-child(2) { height: 12px; } .rp-bars i:nth-child(3) { height: 16px; }
.rp-bars[data-c="low"] i:nth-child(1), .rp-bars[data-c="medium"] i:nth-child(-n+2), .rp-bars[data-c="high"] i { background: var(--pc-d); }
.rp-ev { margin-top: 8px; font-size: var(--t-m); line-height: 1.5; }
.rp-rev { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; min-height: 24px; margin-top: 14px; }
.rp-inchat { flex: none; font-size: var(--t-sm); color: var(--ink2); }
.rp-send { flex: none; white-space: nowrap; }
/* The answer's place while the report is being written, or when the writing failed: quiet, no large word. */
.rp-pend { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; font-size: var(--t-m); color: var(--ink2); }
.rp-pend p { min-width: 0; }
.rp-pend .dots { color: var(--ink3); }
.rp-pend .link { flex: none; margin-left: auto; min-height: 44px; }

/* A part: its heading and what belongs to it, parted from the part above by a hairline. */
.rp-sec { padding: 18px 0 20px; }
.rp-doc .rp-sec { border-top: 1px solid var(--line); }
.rp-doc > .rp-sec:first-child { border-top: 0; }
.rp-sec .sect { margin: 0 0 12px; }
.rp-sec .sect > small { color: var(--pc-d); font-weight: 600; }
.rp-p { font-size: var(--t-m); line-height: 1.55; overflow-wrap: anywhere; }
.rp-small { margin-top: 10px; font-size: var(--t-xs); color: var(--ink2); }
/* What the report says about one Measure: its result word, then one sentence. */
.rp-said { margin-top: 14px; }
.rp-said b { font-weight: 600; margin-right: 2px; }
.rp-said[data-a="helped"] b { color: var(--good-d); }
.rp-said[data-a="worse"] b { color: var(--bad-d); }
.rp-said + .rp-small { margin-top: 6px; }

/* The chart of one Measure control: the thin line of Progress, a day mark on each answered day, the two averages
   as dashed lines with their names. */
.rp-chart svg { width: 100%; height: auto; margin-top: 0; overflow: visible; font-family: var(--font); }
.rp-chart .ag-days { width: 100%; }
.rp-chart .ag-r { height: 34px; }
.rp-chart .ag-r.hd { height: 18px; }
.rp-chart .dm.wide { flex: 1; padding: 0 2px; margin-top: 0; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-ax { font-size: 11.5px; fill: var(--ink3); font-variant-numeric: tabular-nums; }
.ch-mean { stroke-width: 1.2; stroke-dasharray: 4 4; stroke-linecap: round; fill: none; }
.ch-mean.a { stroke: var(--ink3); } .ch-mean.b { stroke: var(--pc-d); }
.ch-lab { font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.ch-lab.a { fill: var(--ink2); } .ch-lab.b { fill: var(--pc-d); }
.ch-dot.kept, .ch-dot.open { fill: var(--pc-d); }
.ch-dot.not { fill: var(--surface); stroke: var(--ink3); stroke-width: 1.5; }
.rp[data-enter] .ch-dot { animation: dd-fade 300ms ease both; animation-delay: calc(var(--d) * 24ms + 420ms); }
.rp[data-enter] .ch-mean, .rp[data-enter] .ch-lab { animation: dd-fade 500ms ease both 900ms; }
/* The two averages under the chart: plain, side by side, each with the dash of its line. */
.rp-means { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.rp-means span { display: flex; flex-direction: column; gap: 2px; }
.rp-means small { display: flex; align-items: center; gap: 7px; font-size: var(--t-xs); font-weight: 500; color: var(--ink2); }
.rp-means small::before { content: ''; flex: none; width: 16px; border-top: 1.2px dashed var(--ink3); }
.rp-means span[data-g="b"] small::before { border-color: var(--pc-d); }
.rp-means b { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.01em; }

/* Actions: each with how often it was kept and a thin line filled by that share. */
.rp-act { padding: 10px 0 12px; }
.rp-act:first-child { padding-top: 0; } .rp-act:last-child { padding-bottom: 0; }
.rp-act p { font-size: var(--t-m); line-height: 1.4; }
.rp-act small { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink2); }
.rp-bar { height: 3px; margin-top: 8px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rp-bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 2px; background: var(--pc-d); transform-origin: left center; }
.rp[data-enter] .rp-bar i { animation: rp-bar 620ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 620ms); }
@keyframes rp-bar { from { transform: scaleX(0); } }

/* The written parts: "Writing" over the place they will take; the failed state; the parts themselves. */
.rp-wait { min-height: 196px; }
.rp-wait-w { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: var(--t-m); }
.rp-wait-w b { font-weight: 600; } .rp-wait-w .dots { color: var(--pc-d); }
.rp-skel i { display: block; height: 12px; margin-top: 14px; border-radius: 6px; background: var(--bg); animation: dd-wait 1100ms ease-in-out infinite; }
.rp-skel i:nth-child(2) { width: 92%; animation-delay: 120ms; } .rp-skel i:nth-child(3) { width: 97%; animation-delay: 240ms; }
.rp-skel i:nth-child(4) { width: 58%; animation-delay: 360ms; } .rp-skel i:nth-child(5) { width: 84%; margin-top: 26px; animation-delay: 480ms; }
.rp-fail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rp-fail p { font-size: var(--t-m); }
textarea.rp-ta { line-height: 1.5; min-height: 52px; }
textarea.rp-ev-ta { margin-top: 8px; width: 100%; font-size: var(--t-m); }
.rp-none { margin-top: 12px; font-size: var(--t-sm); }
.rp-q + .rp-q { margin-top: 16px; }
.rp-q blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--pc); font-size: var(--t-m); line-height: 1.5; quotes: '“' '”'; }
.rp-q blockquote::before { content: open-quote; } .rp-q blockquote::after { content: close-quote; }
.rp-q-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.rp-link { min-width: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--pc-d); font-size: var(--t-sm); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; }
.rp-link svg { flex: none; width: 16px; height: 16px; }
.rp-link span { min-width: 0; overflow-wrap: anywhere; }

/* Also noticed. */
.rp-nt { list-style: none; margin: 0; padding: 0; }
.rp-nt li { position: relative; padding-left: 18px; font-size: var(--t-m); line-height: 1.45; }
.rp-nt li + li { margin-top: 10px; }
.rp-nt li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--pc); }

/* Learnings: the tag, the line, and a + that becomes a tick. */
.rp-l { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.rp-l:first-child { padding-top: 0; } .rp-l:last-child { padding-bottom: 0; }
.rp-l + .rp-l { border-top: 1px solid var(--line); }
.rp-l-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rp-l-t p { font-size: var(--t-m); line-height: 1.45; overflow-wrap: anywhere; }
/* (.icon-btn.tint is not used: css/ui.css gives .tint a full width.) */
/* The quiet plus beside a learning (it adds the learning to To try in Atlas): a sign with no fill; a tick once added. */
.rp-add { background: none; color: var(--ink3); }
.rp-add[data-done] { color: var(--good-d); cursor: default; }
.rp-add svg { stroke-width: 2.4; }
.rp-tagb { display: inline-flex; align-items: center; min-height: 32px; border-radius: 9px; transition: transform var(--m-press) var(--ease-out); }
.rp-tagb:active { transform: scale(0.95); }
.rp-tagb .chip { box-shadow: 0 2px 0 -0.5px var(--pc); }

/* Add to Atlas: the line, its section under it, and Add (a quiet "Added" once it is in Atlas). */
.rp-at .rp-l-t { gap: 2px; }
.rp-at .rp-l-t small { font-size: var(--t-xs); color: var(--ink2); }
.rp-at .btn { flex: none; min-width: 72px; }
.rp-at-done { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 72px; height: 42px; justify-content: center; font-size: var(--t-s); font-weight: 500; color: var(--good-d); }
.rp-at-done svg { width: 16px; height: 16px; stroke-width: 2.4; }
/* The small cross that dismisses a line of Add to Atlas (round 3, change 18). */
.rp-at-x { flex: none; width: 36px; height: 36px; margin-right: -8px; color: var(--ink2); }
.rp-at-x svg { width: 15px; height: 15px; }

/* The buttons at the foot. */
.rp-next { display: grid; gap: 10px; margin-top: 22px; }
.rp-next.two { grid-template-columns: 1fr 1fr; }
.rp-next .rp-next { margin-top: 0; }
.rp-next.two .btn { padding: 0 10px; font-size: var(--t-m); white-space: nowrap; }

/* ---------- The line that names what the report added to Atlas ---------- */
/* The worker adds lines to Atlas by itself when the worker writes a report; the report page only names the added
   lines (js/report/report-view.js, `atlas`). Plain small words, no button, no frame. */
.at-auto { margin: 0; padding: 14px 0 18px; border-top: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }