/* NAVC: option C (the section map) as the end of every lesson, chosen 2026-10-29.
   Copied from navopt.css so lessons do not depend on it. On top of tokens/tokens.css, tokens/app.css, css/shell.css, css/ds7.css.
   Section colours come from .t-red / .t-green / .t-cream of ds7.css (--stripe, --tint). Never restyles the shell. */

/* ---------- shared pieces ---------- */
.nv-end{margin-top:var(--s-7);margin-bottom:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--color-line);scroll-margin-top:var(--s-6)}
.nv-ic{width:16px;height:16px;flex:0 0 auto;vertical-align:-3px}
.nv-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-4);margin-bottom:var(--s-4)}

/* mark as read: a quiet toggle, not a button-looking block */
.nv-read{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;font-size:var(--t-sm);font-weight:600;color:var(--color-body);
  padding:.4rem .8rem .4rem .45rem;border-radius:999px;border:1px solid var(--color-line);background:var(--color-card);transition:border-color .15s,background .15s}
.nv-read:hover{border-color:var(--color-muted)}
.nv-read:focus-visible{box-shadow:0 0 0 3px rgba(225,115,53,.45)}
.nv-read .box{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--color-muted);display:inline-flex;align-items:center;justify-content:center;color:transparent;background:var(--color-card)}
.nv-read .box svg{width:12px;height:12px}
.nv-read[aria-pressed="true"]{background:var(--color-success-wash);border-color:var(--color-success);color:var(--color-success-ink)}
.nv-read[aria-pressed="true"] .box{background:var(--color-success);border-color:var(--color-success);color:var(--color-on-accent)}

/* ---------- C: the section map ---------- */
.nv-map-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-4)}
.nv-map-head h2{margin:0;font-size:var(--t-lg);display:flex;align-items:center;gap:.55rem}
.nv-map-head h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--stripe,var(--color-accent))}
.nv-map-head .c{font-size:var(--t-sm);color:var(--color-muted)}
.nv-steps{list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.nv-steps li{position:relative;min-width:0}
.nv-steps li::before{content:"";position:absolute;top:17px;left:calc(-50% + 22px);right:calc(50% + 22px);height:2px;background:var(--color-line)}
.nv-steps li:first-child::before{display:none}
.nv-steps li.is-here::before{background:var(--stripe,var(--color-accent))}
.nv-steps li.is-read::before{background:var(--color-success)}
.nv-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:0 var(--s-2) var(--s-3);text-decoration:none;color:var(--color-body);border-radius:var(--radius)}
.nv-step:hover{text-decoration:none;color:var(--color-ink)}
.nv-step:hover .t{text-decoration:underline;text-underline-offset:3px}
.nv-step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.45)}
.nv-step .tx{display:flex;flex-direction:column;gap:.2rem}
.nv-step .o{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:var(--t-sm);
  background:var(--color-card);border:2px solid var(--color-line);color:var(--color-muted);position:relative;z-index:1}
.nv-step .o svg{width:16px;height:16px}
.nv-step .t{font-size:var(--t-sm);font-weight:600;color:var(--color-ink);line-height:1.3}
.nv-step .s{font-size:var(--t-xs);color:var(--color-muted)}
.is-read .nv-step .o{background:var(--color-success);border-color:var(--color-success);color:var(--color-on-accent)}
.is-here .nv-step .o{border-color:var(--stripe,var(--color-accent));color:var(--color-ink);box-shadow:0 0 0 4px var(--tint,var(--color-accent-wash))}
.is-read.is-here .nv-step .o{background:var(--color-success);border-color:var(--color-success);color:var(--color-on-accent)}
.is-here .nv-step .s{color:var(--color-ink);font-weight:700}
.is-next .nv-step .o{border-color:var(--color-accent);color:var(--color-accent-text)}
.is-next .nv-step .s{color:var(--color-accent-text);font-weight:700}
.nv-teaser{display:grid;grid-template-columns:1fr auto;gap:var(--s-2) var(--s-5);align-items:center;text-decoration:none;color:var(--color-ink);
  background:var(--color-card);border:1px solid var(--color-line);border-left:6px solid var(--stripe,var(--color-accent));border-radius:var(--radius-lg);padding:var(--s-5) var(--s-6)}
.nv-teaser:hover{text-decoration:none;border-color:var(--color-muted);border-left-color:var(--stripe,var(--color-accent))}
.nv-teaser:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.45)}
.nv-teaser .k{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);margin-bottom:.3rem}
.nv-teaser .t{display:block;font-family:var(--font-head);font-size:var(--t-xl);font-weight:700}
.nv-teaser ul{margin:.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:var(--t-sm);color:var(--color-body)}
.nv-teaser li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--stripe,var(--color-accent));margin-right:.45rem;vertical-align:2px}
.nv-teaser .go{font-size:var(--t-sm);font-weight:700;color:var(--color-accent-text);display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
@media(max-width:600px){
  .nv-steps{grid-template-columns:1fr;gap:0}
  .nv-steps li::before{top:-12px;left:calc(var(--s-2) + 17px);right:auto;width:2px;height:16px}
  .nv-steps li:first-child::before{display:none}
  .nv-steps li + li{margin-top:var(--s-2)}
  .nv-step{flex-direction:row;align-items:center;text-align:left;gap:.75rem;padding:var(--s-2)}
  .is-here .nv-step{background:var(--tint,var(--color-accent-wash))}
  .nv-teaser{grid-template-columns:1fr;padding:var(--s-4) var(--s-5)}
}


/* up to 8 lessons: --n columns (max 4), wraps into rows; no connector at the start of a row */
.nv-steps{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));row-gap:var(--s-3)}
@media(min-width:601px){.nv-steps li:nth-child(4n+1)::before{display:none}}
.nv-step .t{overflow-wrap:anywhere}
.nv-teaser .d{display:block;margin-top:.5rem;font-size:var(--t-sm);color:var(--color-body);max-width:56ch}
.nv-teaser.nv-finish .go{align-self:center}
@media(max-width:600px){.nv-steps{grid-template-columns:1fr}.nv-map-head{align-items:flex-start}}

/* ---------- the page footer ---------- */
.nv-foot{margin:0;background:transparent}
.nv-foot-in{padding:var(--s-5) 0 var(--s-7);border-top:1px solid var(--color-line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-5);font-size:var(--t-sm);color:var(--color-muted)}
.nv-foot-brand strong{font-family:var(--font-head);color:var(--color-ink);font-weight:700}
.nv-foot a{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--color-accent-text);text-decoration:none}
.nv-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.nv-foot a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.45);border-radius:var(--radius-sm)}
@media(max-width:600px){.nv-foot-in{padding:var(--s-4) 0 var(--s-6);flex-direction:column;align-items:flex-start}}

/* R4LESSON: every text at least 14 px; finish title keeps "pre-course" whole */
.nv-end{--t-xs:.875rem}
.nv-end .s,.nv-end .k,.nv-end .c,.nv-end .go{font-size:max(.875rem,1em)}
.nv-teaser .t,.nv-teaser .t *{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
.nv-finish .t{text-wrap:balance}