/* A student's learning flow (console/js/flow.js, 2026-09-24).
 * Spec: docs/superpowers/specs/2026-09-24-learning-flow.md.
 * Every colour is a theme token, so LORE Blue, Light, Dark and Easy reading
 * all work without a second palette. Colour is never the only signal: tone
 * pairs with an icon, failures are hatched, and edge styles differ in dash
 * and weight as well as hue. */

.flow-card .card-head select { max-width: 22rem; }
.fl-rows { display: flex; flex-direction: column; gap: var(--space-4, 1rem); margin-top: .6rem; }
.fl-row { border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface);
          padding: .7rem .8rem .5rem; }
.fl-row-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .35rem; }
.fl-seq { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem;
          border-radius: 50%; background: var(--surface-2); color: var(--text-dim); font-size: .8rem; font-weight: 600; }
.fl-title { font-weight: 600; color: var(--text); flex: 1 1 auto; min-width: 0; }
.fl-scroll { overflow-x: auto; padding-bottom: .2rem; }
.fl-svg { display: block; overflow: visible; }

/* nodes */
.fl-box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.fl-inner { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .55; }
.fl-bar { fill: currentColor; }
.fl-node { color: var(--text-dim); cursor: pointer; outline: none; }
.fl-node .fl-icon { color: currentColor; }
.fl-t1 { fill: var(--text); font-size: 13px; font-weight: 650; }
.fl-t2 { fill: var(--text-dim); font-size: 11.5px; }
.fl-t3 { fill: var(--text-dim); font-size: 10.5px; }
.fl-tone-ok { color: var(--ok); }
.fl-tone-ok .fl-box { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.fl-tone-danger { color: var(--danger); }
.fl-tone-danger .fl-box { stroke: var(--danger); }
.fl-tone-warn { color: var(--warn); }
.fl-tone-warn .fl-box { stroke: var(--warn); }
.fl-outcome.fl-tone-ok .fl-box { stroke-width: 2.5; }
.fl-hatch { stroke: none; pointer-events: none; }
.fl-hatch-bg { fill: transparent; }
.fl-hatch-line { stroke: var(--danger); stroke-width: 2; opacity: .16; }
.fl-sparkle { color: var(--brand-ink, var(--accent)); }
.fl-node:hover .fl-box { stroke-width: 2.5; }
.fl-node:focus-visible .fl-box { stroke: var(--accent); stroke-width: 3; }

/* edges */
.fl-edge { fill: none; }
.fl-edge-success { stroke: var(--brand-fill); stroke-width: 2.5; }
.fl-edge-failed { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 6 4; }
.fl-edge-neutral { stroke: var(--border-strong); stroke-width: 1.5; }
.fl-arrow-success { fill: var(--brand-fill); }
.fl-arrow-failed { fill: var(--danger); }
.fl-arrow-neutral { fill: var(--border-strong); }

/* the detail under a row */
.fl-detail { margin: .5rem 0 .3rem; padding: .7rem .85rem; border-radius: var(--radius); background: var(--surface-2);
             border: 1px solid var(--border); max-width: 72ch; }
.fl-detail-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.fl-detail p { margin: .25rem 0; }
.fl-d-head { font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim);
             margin: .5rem 0 .2rem; }
.fl-answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.fl-answers li { display: flex; gap: .4rem; align-items: flex-start; font-size: .9rem; }
.fl-answers li.ok .icon { color: var(--ok); }
.fl-answers li.miss .icon { color: var(--danger); }
.fl-preview { margin: .4rem 0; padding: .4rem .7rem; border-left: 3px solid var(--border-strong); color: var(--text);
              font-size: .92rem; line-height: 1.5; }

/* legend and the not-started line */
.fl-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; font-size: .82rem; color: var(--text-dim); }
.fl-key { display: inline-flex; align-items: center; gap: .35rem; }
.fl-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; border-radius: 5px;
           border: 1.5px solid var(--border-strong); background: var(--surface); }
.fl-chip.fl-tone-ok { border-color: var(--ok); }
.fl-chip.fl-tone-danger { border-color: var(--danger);
  background: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, var(--danger) 20%, transparent) 3px 5px); }
.fl-chip.fl-correction-chip { color: var(--brand-ink, var(--accent)); border-left-width: 4px; }
.fl-notstarted { margin-top: .8rem; color: var(--text-dim); }
.fl-notstarted > summary { cursor: pointer; font-weight: 600; }
.fl-notstarted ul { margin: .3rem 0 0 1.1rem; }

/* Easy reading: no line in a node below 14px (flow.js textWidth() sizes the
   boxes for these same sizes). */
[data-theme="reading"] .fl-t1 { font-size: 14.5px; }
[data-theme="reading"] .fl-t2, [data-theme="reading"] .fl-t3 { font-size: 14px; }

/* The lesson the teacher clicked through from (Class progress grid, 2026-09-24). */
.fl-row.fl-row-focus { border-color: var(--accent, #2E8FBB); box-shadow: 0 0 0 2px var(--accent, #2E8FBB); scroll-margin-top: 1rem; }