/* Shared learning surfaces; the brand palette remains the site's authority. */
.flow-art { object-fit:contain; flex:none; max-width:100%; }
.flow-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.flow-heading h1 { margin:0 0 10px; font-size:clamp(25px,4vw,34px); color:var(--heading); letter-spacing:-.025em; }
.flow-heading p { color:var(--text-muted); line-height:1.7; margin:0; }
.flow-heading .flow-art { width:120px; height:120px; }
.flow-kicker { font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--primary); margin-bottom:10px; }
.flow-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.flow-actions a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.flow-filters { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.flow-filters label { display:grid; gap:6px; font-size:13px; color:var(--text-muted); flex:1 1 130px; }
.flow-filters select { background:var(--bg); color:var(--text); border:1px solid var(--border-strong); border-radius:6px; padding:10px 12px; font:inherit; min-height:44px; width:100%; }
.flow-note { font-size:13px; line-height:1.7; color:var(--text-muted); }
.flow-disclosure { border-top:1px solid var(--border); padding:18px 0; margin-top:22px; }
.flow-disclosure > summary { cursor:pointer; font-size:15px; font-weight:600; color:var(--heading); min-height:30px; }
.flow-empty { text-align:center; padding:24px 16px; }
.flow-empty .flow-art { width:140px; height:140px; }
.flow-empty h2 { color:var(--heading); font-size:20px; }
.flow-empty p { color:var(--text-muted); line-height:1.7; }
.flow-nav { display:none; }
.flow-context { display:flex; flex-wrap:wrap; gap:10px; color:var(--text-muted); font-size:13px; margin-bottom:18px; }
.flow-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.flow-tabs button { background:var(--bg); border:1px solid var(--border-strong); border-radius:6px; color:var(--text); font:inherit; padding:10px 16px; cursor:pointer; min-height:44px; }
.flow-tabs button[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.flow-next { display:flex; gap:18px; align-items:center; background:var(--surface); padding:22px; border-radius:10px; margin:24px 0; }
.flow-next .flow-art { width:100px; height:100px; }
.flow-next h2 { margin:0 0 8px; font-size:20px; color:var(--heading); }
.flow-next p { margin:0; color:var(--text-muted); line-height:1.7; }
.flow-resume { border:1px solid var(--primary); padding:20px; border-radius:10px; margin:16px 0 26px; background:var(--bg); }
.flow-resume h2 { font-size:18px; margin:0 0 8px; }
.flow-resume p { color:var(--text-muted); font-size:14px; line-height:1.7; }
.flow-resume article + article { border-top:1px solid var(--border); margin-top:16px; padding-top:16px; }
@media(max-width:599px) {
  .has-flow-nav { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
  .flow-nav { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; bottom:0; left:0; right:0; z-index:900; background:var(--bg); border-top:1px solid var(--border); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .flow-nav a { display:flex; align-items:center; justify-content:center; min-height:48px; font-size:14px; color:var(--text-muted); text-decoration:none; border-radius:6px; }
  .flow-nav a[aria-current] { color:var(--primary); background:var(--surface); font-weight:700; }
  .flow-heading { gap:12px; margin-bottom:16px; }
  .flow-heading .flow-art { width:76px; height:76px; }
  .flow-heading h1 { font-size:25px; }
  .flow-filters { gap:8px; }
  .flow-filters label { flex-basis:90px; }
  .flow-next { padding:18px; gap:12px; }
  .flow-next .flow-art { width:74px; height:74px; }
  .flow-actions .btn { flex:1 1 auto; }
}
@media print { .flow-nav { display:none; } .has-flow-nav { padding-bottom:0; } }

/* Paper feedback: hue describes this score, never an official pass or mastery. */
:root { --flow-red:#B42318; --flow-orange:#B45309; --flow-gold:#8A6100; --flow-green:#2E7D32; --flow-full:#166534; }
:root[data-theme="dark"] { --flow-red:#FFACA3; --flow-orange:#FFC193; --flow-gold:#F3D47D; --flow-green:#A7D995; --flow-full:#86DFB1; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --flow-red:#FFACA3; --flow-orange:#FFC193; --flow-gold:#F3D47D; --flow-green:#A7D995; --flow-full:#86DFB1; } }
.flow-tone-red { --flow-score:var(--flow-red); }
.flow-tone-orange { --flow-score:var(--flow-orange); }
.flow-tone-gold { --flow-score:var(--flow-gold); }
.flow-tone-green { --flow-score:var(--flow-green); }
.flow-tone-full { --flow-score:var(--flow-full); }
.r-score.flow-colored-score { color:var(--flow-score); }
.h-score.flow-colored-score b { color:var(--flow-score); }
.r-score.flow-pending-score { color:var(--text-muted); }
.flow-score-feedback { margin:20px 0; padding:18px 20px; background:var(--surface); border-radius:8px; }
.flow-score-state { color:var(--flow-score); font-size:14px; font-weight:650; line-height:1.7; margin:0 0 15px; }
.flow-score-state span { display:inline-block; margin-left:8px; font-variant-numeric:tabular-nums; }
.flow-score-track { position:relative; height:9px; background:var(--border); border-radius:8px; margin:12px 0 18px; }
.flow-score-track i { display:block; height:100%; border-radius:8px; background:var(--flow-score); }
.flow-score-track b { position:absolute; top:-5px; height:19px; width:2px; background:var(--heading); transform:translateX(-1px); }
.flow-goal-line { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:12px 0 8px; }
.flow-goal-line label { display:flex; gap:9px; align-items:center; font-size:13px; color:var(--text-muted); }
.flow-goal-line select { min-height:44px; max-width:100%; padding:8px; background:var(--bg); color:var(--text); border:1px solid var(--border-strong); border-radius:6px; font:inherit; }
.flow-goal-line strong { font-size:15px; color:var(--heading); }
.flow-score-change { margin:14px 0; }
.flow-home { border:1px solid var(--border); border-radius:10px; padding:26px; margin:20px 0 30px; background:var(--bg); }
.flow-home-paper { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.flow-home-paper h2 { margin:7px 0; font-size:21px; line-height:1.5; color:var(--heading); overflow-wrap:anywhere; }
.flow-home-paper p { margin:5px 0; }
.flow-home-score { text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }
.flow-home-score b { font-size:40px; color:var(--flow-score); }
.flow-home-score small { font-size:15px; color:var(--text-muted); }
.flow-home-score p { font-size:12px; color:var(--text-muted); }
.flow-home-next { border-left:3px solid var(--primary); background:var(--surface); padding:20px; margin:22px 0; }
.flow-home-next h3,.flow-home h3 { margin:0 0 9px; font-size:19px; color:var(--heading); }
.flow-milestones { list-style:none; padding:0; margin:12px 0 20px; }
.flow-milestones li { display:flex; gap:12px; margin:14px 0; line-height:1.65; }
.flow-milestones li>span { background:var(--surface); color:var(--flow-full); border:1px solid var(--border); border-radius:50%; width:25px; height:25px; text-align:center; flex-shrink:0; }
.flow-milestones b { font-size:14px; color:var(--heading); }
.flow-milestones p { margin:3px 0 0; font-size:13px; color:var(--text-muted); }
.flow-home-report { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.flow-home-start { background:var(--surface); padding:18px 22px; border-radius:8px; margin:20px 0; }
.flow-home-start p { font-size:14px; line-height:1.7; color:var(--text-muted); margin:7px 0 0; }
.flow-review-check { display:flex; align-items:center; gap:9px; font-size:14px; padding:12px 0; min-height:44px; color:var(--text); cursor:pointer; }
.flow-review-check input { width:20px; height:20px; accent-color:var(--primary); flex-shrink:0; }
.flow-review-progress { padding:16px 20px; background:var(--surface); border-radius:8px; margin:18px 0; }
.flow-review-progress p { margin:5px 0; }
.flow-complete { max-width:720px; margin:20px auto; padding:24px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.flow-complete .flow-art { width:110px; height:110px; display:block; margin:0 auto 18px; }
.flow-complete h2 { text-align:center; margin:8px 0 12px; }
.flow-complete>p { text-align:center; }
.flow-complete .flow-actions { justify-content:center; }
.flow-result-milestone { display:flex; gap:14px; align-items:center; margin:16px 0; }
.flow-result-milestone .flow-art { width:74px; height:74px; }
.flow-result-milestone p { margin:0; line-height:1.7; }
.flow-result-milestone b { color:var(--heading); font-size:15px; }
.flow-result-milestone span { display:block; color:var(--text-muted); font-size:13px; }
@media(max-width:599px) {
  .flow-home { padding:18px; }
  .flow-home-paper { flex-direction:column; align-items:flex-start; gap:10px; }
  .flow-home-score { text-align:left; }
  .flow-home-paper h2 { font-size:19px; }
  .flow-score-feedback { padding:16px; }
  .flow-home-next { padding:16px; }
  .flow-goal-line { align-items:flex-start; flex-direction:column; }
  .flow-complete { padding:18px; }
}