/* ============================================
   REFLECT VIEW STYLES
   css/components/reflect.css

   17 Oct 2026 v5

   v5 - D662-7 (Graeme's device check, 13 Oct). The finish's number tiles
   share the row: one tile fills it, two halve it, three take a third
   each. A lone "1 min" sat in a third with the rest empty.

   12 Oct 2026 v4

   v4 - A-5 SIGNATURE-MOMENTS. The tick larger and centred (it scales in
   once, never under Reduce motion); .finish-arc, the Plan's arc line;
   .finish-keep, Keep to repeat folded like Add a note.

   04 Oct 2026 v3

   v3 - LOOK-4. The finish screen: a tick tile above the heading; the
   stats as number tiles (.finish-stat, colour from .k-*, the words
   beside every number); How did it feel? as three equal buttons; the
   coach's answer and Add a note as cards.

   28 Sep 2026 v2

   v2 - SMOOTH-P2d. The finish screen: .finish-stats (what was done, in
   one quiet line under the heading) and .finish-more (the note and mood,
   one tap away). The disclosure keeps its native marker so open and
   closed are not shown by colour alone.

   New file (S4-B3-3 completion). .reflect-textarea and .reflect-chips
   were confirmed via GitHub code search to have NO existing CSS
   anywhere in the repo — not an override bug, a genuine gap. Browsers
   do not inherit color/font into form elements by default, so the
   unstyled textarea was rendering with default (near-black) text and
   no explicit width/height on this dark theme — invisible against the
   placeholder and cramped, exactly as reported twice (B3-2-Test and
   the prior B3-3 session, both with annotated screenshots).

   This file adds the missing rules only. .reflect-chips itself needs
   no layout fix — it's a flex wrapper around .chip children, and .chip
   is styled elsewhere (not touched here, out of this fix's scope).
   ============================================ */

.reflect-textarea {
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.reflect-textarea::placeholder {
  color: var(--color-text-muted);
  -webkit-text-fill-color: var(--color-text-muted);
  opacity: 1;
}

.reflect-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.reflect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
}


/* SMOOTH-P2d. One finish screen. */
.finish-view .view-header h1 { margin-bottom: var(--space-1); }

.finish-stats {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.finish-more {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
}

.finish-more__summary {
  min-height: 44px;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.finish-more__summary:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.finish-more[open] .reflect-textarea { min-height: 96px; }

/* Air between the questions, and a coach line that sits beside its
   icon rather than under a large one. */
.finish-view .reflect-section,
.finish-view .finish-coach-card,
.finish-view .finish-more { margin-top: var(--space-5, 1.5rem); }
.finish-view .reflect-section-label { margin-bottom: var(--space-3); }
.finish-coach-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.finish-coach-card[hidden] { display: none; }
.finish-coach-card .coach-icon-small { width: 36px; height: 36px; flex-shrink: 0; }
.finish-coach-card .coach-message-text { margin: 0; }


/* LOOK-4 — the finish screen, 04 Oct 2026 */
.finish-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.finish-head h1 { margin: 0; }
.finish-view .finish-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-2) 0 0;
}
.finish-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
}
.finish-stat__n { font-size: var(--text-3xl); font-weight: 700; line-height: 1; color: var(--k, var(--color-primary)); }
.finish-stat__l { font-size: var(--text-sm); color: var(--color-text-secondary); }
.finish-stat__sep { display: none; }
.finish-view .reflect-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.finish-view .reflect-chips .chip {
  min-height: 56px;
  justify-content: center;
  border-radius: 16px;
  font-size: var(--text-base);
  text-align: center;
}
.finish-view .reflect-chips:has(.chip--sm) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finish-view .finish-coach-card,
.finish-view .finish-more {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
}
.finish-view .finish-more { padding: var(--space-2) var(--space-4); }

/* A-5 SIGNATURE-MOMENTS, 12 Oct 2026 (both tiers; .finish-arc the Plan's).
   The finish as a moment: the tick larger and centred over the heading;
   the arc line; Keep to repeat folded like Add a note. */
.finish-head { align-items: center; text-align: center; }
.finish-head > .kind-tile--lg {
  width: 88px; height: 88px; border-radius: 50%;
  border: 3px solid var(--kind-teal, var(--color-primary));
}
.finish-head > .kind-tile--lg svg { width: 44px; height: 44px; }
.finish-arc {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4);
  background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 16px;
  color: var(--color-text-secondary); line-height: 1.45;
}
.finish-arc svg { flex: none; color: var(--kind-teal, var(--color-primary)); }
.finish-arc strong { color: var(--color-text); }
.finish-view .finish-keep { margin-top: var(--space-3); }
.finish-keep .save-block { border: 0; padding: 0; background: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.reduce-motion) .finish-head > .kind-tile--lg { animation: finish-tick 420ms ease-out both; }
}
@keyframes finish-tick { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }