/* FPA nav row + rail fold + legend + state dots.
   Building block, Future Prep, 19 Aug 2026.
   Implements screen set v2 rules 4 (nav row), 6 (folding rail) and the
   B1 state-dot legend. Selectors match the fpa-lms templates
   (.fpa-app, .fpa-side, #fpa-tree, .fpa-node, .fpa-dot, state classes).
   Enqueue after fpa.css. No em dashes in any UI text. */

/* ---- 1. Navigation row (v2 rule 4): every app screen ---- */
.fpa-navrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:0 0 18px;padding:0}
.fpa-navrow a{display:block;text-align:center;padding:12px 8px;
  background:#fff;border:1px solid #DDD8CB;border-radius:10px;
  font-size:13.5px;font-weight:600;color:#0B6B6B;text-decoration:none;
  line-height:1.25}
.fpa-navrow a:hover{border-color:#159E9E;background:#F2FAF9}
.fpa-navrow a.fpa-nav-active{background:#159E9E;border-color:#159E9E;color:#fff}
@media (max-width:700px){.fpa-navrow{grid-template-columns:repeat(2,1fr)}}

/* ---- 2. State dots (B1): one size, one alignment ---- */
#fpa-tree .fpa-node{display:flex;align-items:center;min-height:30px}
#fpa-tree .fpa-node a{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
#fpa-tree .fpa-dot{flex:0 0 10px;width:10px;height:10px;margin:0;
  border-radius:50%;vertical-align:initial}
/* done: solid green. current (exactly one, set by JS): solid teal.
   started-but-unfinished: teal ring. to do: grey ring. flagged: orange ring. */
#fpa-tree .fpa-state-completed .fpa-dot{background:var(--fpa-dot-done, #1F7A45)}
#fpa-tree .fpa-state-completed_flagged .fpa-dot,
#fpa-tree .fpa-node.fpa-has-flag .fpa-dot{background:#fff;border:2.5px solid var(--fpa-dot-flag, #D67617)}
#fpa-tree .fpa-state-in_progress .fpa-dot{background:#fff;border:2.5px solid var(--fpa-dot-now, #159E9E)}
#fpa-tree .fpa-node.fpa-current .fpa-dot{background:var(--fpa-dot-now, #159E9E);border:none}
#fpa-tree .fpa-state-not_started .fpa-dot{background:#fff;border:2px solid var(--fpa-dot-todo, #CFCABB)}

/* ---- 3. Folding rail (v2 rule 6) ---- */
#fpa-tree .fpa-domain{cursor:pointer;user-select:none;border-radius:8px;
  background:#fff;border:1px solid #E2DCCC;margin-top:8px;padding:7px 10px;
  font-weight:600}
#fpa-tree .fpa-domain .fpa-fold-caret{margin-left:auto;font-size:12px;
  color:#6E7B76;transition:transform .15s}
#fpa-tree .fpa-domain.fpa-folded .fpa-fold-caret{transform:rotate(-90deg)}
#fpa-tree .fpa-fold-hidden{display:none}
#fpa-tree .fpa-domain .fpa-domain-pct{margin-left:8px;font-size:12px;
  color:#6E7B76;font-weight:600}

/* ---- 4. Legend, 2 by 2 ---- */
.fpa-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;
  margin-top:14px;padding-top:10px;border-top:1px solid #E2DCCC;
  font-size:12.5px;color:#6E7B76}
.fpa-legend span{display:flex;align-items:center;gap:6px}
.fpa-legend i{width:10px;height:10px;border-radius:50%;flex:0 0 10px;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:8px;line-height:1;color:#fff}
.fpa-legend .l-done i{background:#1F7A45}
.fpa-legend .l-current i{background:#159E9E}
.fpa-legend .l-flagged i{background:#fff;border:2.5px solid #D67617}
.fpa-legend .l-todo i{background:#fff;border:2px solid #CFCABB}