/* Your reports (#/reports, KT-60073; docs/design/kt-60073-screens/), the approved high-fidelity pass of
   2026-10-12 with the 2026-10-13 review's fixes: sentence-case section labels, step labels at 0.8125rem.
   Loaded after styles.css + refined.css + mail.css.
   Every colour is a refined.css token (--d-*, = theme.ts via docs/design/tokens.json). No new tokens.
   Shapes follow Mail's list (mail.css .mail-cap / .mail-letter / .mail-split) so the page reads as Kit.
   Every rule here is NEW (a new page); each names the existing rule it copies. */

/* ---- page ---- */
.rep-view { max-width: 1060px; }
body.embed-mobile .rep-view .view-head { display: none; }            /* the native header carries the title (mail.css:242) */
html[data-kit-brand="refined"] body.embed-mobile .rep-view { padding: 6px 0 30px; }                  /* rows run edge to edge on the phone, like Mail */

/* ---- section caps: mail.css .mail-cap, verbatim values ---- */
.rep-cap { display: flex; align-items: baseline; gap: 8px; font-size: 0.875rem; font-weight: 600;
  color: var(--d-olive-ink); margin: 20px 0 4px; padding: 0 16px; }  /* sentence case, not all caps (review 2026-10-13) */
.rep-cap:first-child { margin-top: 8px; }
.rep-cap .n { color: var(--d-muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- the list: mail.css .mail-list / .mail-letter (8px dot column, hairlines) ---- */
.rep-list { border-top: 1px solid var(--d-line); }
.rep-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 18px; gap: 10px; align-items: start;
  padding: 12px 16px; min-height: 56px; border-bottom: 1px solid var(--d-line); color: var(--d-ink); text-decoration: none; }
.rep-row:hover { background: var(--d-paper2); }
.rep-row:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(var(--d-olive-rgb),.32); } /* mail.css --ring */
.rep-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; }
.rep-row.new .rep-dot { background: var(--d-olive); }                 /* mail.css .unread .mail-dot (--postmark = olive) */
.rep-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rep-sum { font-size: 1rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rep-row.new .rep-sum { font-weight: 600; }
.rep-meta { font-size: 0.8125rem; line-height: 1.4; color: var(--d-muted); }
.rep-st { font-weight: 600; color: var(--d-olive-ink); }              /* Read / Fixed / Answered */
.rep-st.sent { font-weight: 400; color: var(--d-muted); }           /* Sent stays quiet */
.rep-prev { font-size: 0.8125rem; line-height: 1.4; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-prev b { font-weight: 600; color: var(--d-olive-ink); }
.rep-chev { width: 18px; height: 18px; margin-top: 2px; color: var(--d-soft); align-self: center; }
/* desktop selection: mail.css .mail-letter.sel */
.rep-row.sel { background: var(--d-surface); box-shadow: inset 0 0 0 1px rgba(var(--d-ink-rgb),.13); border-radius: 10px 0 0 10px; margin-right: -1px; position: relative; z-index: 1; }

/* another adult's reports: kind · date only (Michelle 2026-10-12), not a link */
.rep-row.other { display: block; min-height: 44px; padding: 11px 16px; color: var(--d-muted); font-size: 0.9333rem; }
.rep-row.other:hover { background: none; }
.rep-note { font-size: 0.8125rem; line-height: 1.45; color: var(--d-muted); padding: 10px 16px 0; margin: 0; }
.rep-note + .rep-note { padding-top: 6px; }

/* offline: one quiet line above the list (paper2 = mail.css --table-worn) */
.rep-offline { background: var(--d-paper2); color: var(--d-muted); font-size: 0.8125rem; padding: 9px 16px; border-bottom: 1px solid var(--d-line); }

/* loading: Today's text line (today.css .today-loading), no skeleton component */
.rep-loading { color: var(--d-muted); font-size: 0.9333rem; padding: 18px 16px; display: flex; align-items: center; gap: 8px; }
.rep-loading::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--d-olive); opacity: .6; } /* Transcript Pulse, olive */

/* empty / kid / error: refined .empty (fox, surface, solid hairline) with Kit's olive link */
.rep-view .empty { margin: 16px; }
.empty h2 { font-size: 1.0667rem; font-weight: 600; margin: 0 0 6px; color: var(--d-ink); }
html[data-kit-brand="refined"] .kit-board .empty.rep-error::before { display: none; }                          /* no sleeping fox on a failure */
.rep-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--d-olive-ink); }
.empty .btn.primary { min-height: 44px; padding: 10px 20px; margin-top: 10px; }

/* ---- the report page ---- */
.rep-page { padding: 16px 16px 8px; max-width: 680px; }
.rep-kind { font-size: 0.8125rem; font-weight: 600; color: var(--d-olive-ink); }
.rep-title { font-size: 1.1333rem; line-height: 1.45; font-weight: 500; margin: 4px 0 0; letter-spacing: -.005em; }
.rep-saw { font-size: 0.875rem; line-height: 1.45; color: var(--d-muted); margin: 10px 0 0; }
.rep-scope { font-size: 0.8125rem; line-height: 1.45; color: var(--d-muted); margin: 4px 0 0; }

/* status: one small line + subdued steps (Theo: a full stepper read as an accountability bar) */
.rep-status { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--d-line); }
.rep-line { font-size: 0.875rem; font-weight: 600; color: var(--d-olive-ink); }
.rep-line.sent { color: var(--d-ink); font-weight: 500; }
.rep-steps { list-style: none; display: flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 0; font-size: 0.8125rem; color: var(--d-muted); }  /* 0.8125rem, the board's floor (review) */
.rep-steps li { display: inline-flex; align-items: center; gap: 5px; }
.rep-steps li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--d-soft); }  /* soft ring: 4.08:1, meets 3:1 for a state mark */
.rep-steps li.done::before { background: var(--d-olive); box-shadow: none; }
.rep-steps li + li::after { content: none; }
.rep-steps .bar { width: 14px; height: 1px; background: var(--d-sage-edge); }
.rep-wait { font-size: 0.875rem; line-height: 1.5; color: var(--d-muted); margin: 14px 0 0; }

/* the reply: a sage band (refined.css .tp-band ground/edge, radius 14 = mail --r-card) */
.rep-reply { background: var(--d-sage); border: 1px solid var(--d-sage-edge); border-radius: 14px; padding: 14px 16px 6px; margin-top: 18px; }
.rep-who { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; }
.rep-who b { font-weight: 600; }
.rep-who time { color: var(--d-muted); }
.rep-who .avatar { width: 28px; height: 28px; font-size: 12px; }    /* styles.css .avatar at the chat size */
.rep-reply p { margin: 8px 0 0; font-size: 1rem; line-height: 1.55; }
.rep-reply .rep-link { margin-top: 2px; }
.rep-reply.fresh { animation: rep-fresh 1.2s ease-out 1; box-shadow: 0 0 0 2px var(--d-olive-ink); }
@keyframes rep-fresh { from { box-shadow: 0 0 0 2px var(--d-olive-ink); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .rep-reply.fresh { animation: none; } }

.rep-more { font-size: 0.875rem; color: var(--d-muted); margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--d-line); }

/* ---- desktop: Mail's split (mail.css .mail-split, 392px list) ---- */
.rep-split { display: grid; grid-template-columns: minmax(0, 392px) minmax(0, 1fr); align-items: start; }
.rep-col { border-right: 1px solid rgba(var(--d-ink-rgb),.13); min-height: 600px; }
.rep-col .rep-cap { padding: 0 12px; }
.rep-col .rep-row { padding: 12px; }
.rep-col .rep-note { padding: 10px 12px 0; }
.rep-pane { padding-left: 28px; position: sticky; top: 16px; min-width: 0; }
.rep-pane .rep-page { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 14px; padding: 24px 28px 14px;
  box-shadow: 0 1px 2px rgba(var(--d-shade-rgb),.05), 0 20px 45px -30px rgba(var(--d-shade-rgb),.33); max-width: 640px; }  /* mail.css --lift: the one lifted surface */
/* phones: the round + sits above the tab bar; the page's last line clears it (56px + 16px) */
@media (max-width: 719px) { .rep-view { padding-bottom: 72px; } }
@media (max-width: 1023px) { .rep-split { display: block; } .rep-col { border-right: 0; min-height: 0; } .rep-pane { display: none; } }

/* ---- avatar menu: a count beside "Your reports" (olive, like Mail's caps) ---- */
.me-menu-item .me-menu-n { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--d-olive-ink); }

/* the build's additions: her reply box under a Kit team reply, the chevron dropped in desktop split (review nit 4), time never wraps */
.rep-answer { margin-top: 12px; display: grid; gap: 8px; }
.rep-answer textarea { width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--d-line); border-radius: 10px; background: var(--d-surface); color: var(--d-ink); resize: vertical; min-height: 88px; }
.rep-answer textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--d-olive-rgb),.32); }
.rep-answer .btn.primary { justify-self: start; min-height: 44px; }
.rep-answer .rep-said { font-size: 0.8125rem; color: var(--d-muted); margin: 0; }
.rep-mine { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-surface); }
.rep-mine p { margin: 6px 0 0; font-size: 1rem; line-height: 1.55; white-space: pre-wrap; }
.rep-reply p { white-space: pre-wrap; overflow-wrap: anywhere; }
.rep-nowrap { white-space: nowrap; }
.rep-items { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
@media (min-width: 1024px) { .rep-col .rep-chev { display: none; } .rep-col .rep-row { grid-template-columns: 8px minmax(0, 1fr); } }