/* R4 — Reflections page (/journal, src/pages/journal.rs). Prototype ?page=reflections.
   Page classes are prefixed `rf-`; the shared system classes (tl-card, tl-tape,
   tl-ruled, tl-check/tl-box, tl-chips, tl-slips/tl-slip, tl-stamp) live in
   teachloop.css. Each history slip wraps the shared JournalEntryCard
   (components/mod.rs) — the `.rf-body` rules below flatten that card into the
   slip and hide what the slip's stamp + meta line already say. Scoped to
   `.rf-body` so the card is untouched everywhere else. */

.rf-cols { margin-top: 26px; }

/* ── write card ───────────────────────────────────────────────────────── */
.rf-write { margin-bottom: 0; }
.rf-prompt { font: 700 23px/34px var(--tl-font-hand); color: var(--tl-teal); margin: 0 0 4px; }
.rf-write textarea.tl-ruled { display: block; margin-bottom: 6px; }
.rf-write textarea.tl-ruled::placeholder { color: #9aa8c2; opacity: 1; }
.rf-write label.tl-check { position: relative; }
.rf-write .tl-acts { margin-top: 18px; }
.rf-err { margin: 12px 0 0; font-size: .85rem; }

/* Real checkbox kept for keyboard + screen readers; the square .tl-box draws it. */
input.rf-cb {
    position: absolute; left: 0; top: 0; width: 22px; height: 22px;
    margin: 0; padding: 0; opacity: 0; pointer-events: none;
}
input.rf-cb:focus-visible + .tl-box { outline: 3px dashed var(--tl-coral); outline-offset: 3px; }
.rf-check .tl-box { color: var(--tl-ink); }

/* ── history: chips + slips ───────────────────────────────────────────── */
.rf-chips { margin: 4px 0 18px; }
.rf-empty { padding: 22px 26px; }
.rf-empty p { margin: 0; opacity: .75; }

/* Contain the floated stamp (and the card's floated status row, below). */
.rf-slip { display: flow-root; }
.rf-meta { margin-top: 2px; line-height: 1.4; }

/* Deep-linked (?entry=…) slip: a mustard ring that flashes once. */
.tl-slip.rf-hl {
    box-shadow: 0 0 0 3px var(--tl-mustard), 0 10px 22px -12px rgba(29,36,72,.6);
    animation: rf-hl-flash 1.6s ease-out 1;
}
@keyframes rf-hl-flash {
    0%, 30% { background: #fbeccb; }
    100% { background: var(--tl-paper); }
}

/* ── the shared JournalEntryCard, flattened into the slip ─────────────── */
.rf-body { margin-top: 4px; font-size: 15px; line-height: 1.45; }
.rf-body .je-rail, .rf-body .je-above { display: block; }
.rf-body .je-ts { display: none; }              /* the meta line carries the date */
.rf-body .card {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; margin: 0;
}
/* Header row: the kind chip, "Shared" badge and author name are replaced by the
   stamp and meta line; what's left (a feedback status tag, the edit pen) floats
   under the stamp, top-right. */
.rf-body .card > .row {
    float: right; clear: right; margin: 6px 0 4px 10px;
    gap: 6px; align-items: center; flex-wrap: nowrap;
}
.rf-body .card > .row > span:first-child > .badge:first-child,
.rf-body .card > .row [title="Shared with leads"],
.rf-body .card > .row > span:first-child > strong { display: none; }
/* Remaining status tags read as small stamps, like the corner one. */
.rf-body .card > .row .badge {
    background: transparent; color: var(--tl-grey-text); border: 1.5px solid currentColor; border-radius: 0;
    font: 600 10px/1 var(--tl-font-body); letter-spacing: .08em; text-transform: uppercase; padding: 3px 5px;
}
.rf-body .entry-edit { color: var(--tl-ink); }
.rf-body .journal-entry-title { font-family: var(--tl-font-body); font-weight: 600; font-size: 15px; margin: 6px 0 2px; }
.rf-body .action-step-row { flex-wrap: wrap; }
.rf-body .action-step-row > p { font-size: 14px; }
.rf-body .lf-status-list { clear: both; margin-top: 8px; }

/* ── mobile: single column (tl-cols collapses at 860px) ───────────────── */
@media (max-width: 600px) {
    .rf-cols { gap: 28px; margin-top: 20px; }
    .rf-write { padding: 26px 18px 22px; }
    .rf-write .tl-tape { left: 22px; }
    .tl-slip.rf-slip { padding: 14px 14px 14px 18px; }
    .rf-slip .tl-corner { margin-bottom: 4px; }
}

/* ── Journal calendar (JournalCalendar): quiet, lots of air ─────────────── */
.rf-cal { margin-top: 28px; padding: 26px 28px 22px; }
.rf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.rf-cal-month { font: 400 18px/1 var(--tl-font-slab); letter-spacing: 0; font-synthesis: none; }
.rf-cal-nav {
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none;
    color: var(--tl-ink); font: 400 22px/1 var(--tl-font-body); opacity: .45; cursor: pointer;
}
.rf-cal-nav:hover { opacity: 1; background: rgba(29,36,72,.06); }
.rf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; text-align: center; }
.rf-cal-dow { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; opacity: .4; padding-bottom: 8px; }
.rf-cal-day {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0 4px; border: 0; background: none; color: var(--tl-ink); font: inherit; cursor: default;
}
.rf-cal-n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 13.5px; opacity: .35; }
.rf-cal-day.has { cursor: pointer; }
.rf-cal-day.has .rf-cal-n { opacity: 1; font-weight: 600; }
.rf-cal-day.has:hover .rf-cal-n { background: rgba(29,36,72,.06); }
.rf-cal-day.today .rf-cal-n { box-shadow: inset 0 0 0 1.5px var(--tl-ink); opacity: 1; }
.rf-cal-day.sel .rf-cal-n, .rf-cal-day.sel:hover .rf-cal-n { background: var(--tl-ink); color: var(--tl-paper); }
.rf-cal-day:disabled { cursor: default; }
.rf-cal-dots { display: flex; gap: 4px; height: 8px; }
.rf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tl-mustard); }
.rf-dot.r { background: var(--tl-teal); }
.rf-dot.f { background: var(--tl-coral); }
.rf-dot.d { background: var(--tl-sage); }
.rf-cal-key { display: flex; gap: 16px; justify-content: center; margin-top: 18px; font-size: 11.5px; opacity: .6; }
.rf-cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.rf-cal-key .rf-dot { width: 7px; height: 7px; }
.rf-day-bar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: -6px 0 14px; font-size: 14px; }
.rf-day-clear { border: 0; background: none; padding: 0; color: var(--tl-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .7; }
.rf-day-clear:hover { opacity: 1; }