/*
CCS - Training section styles.

@web @ccs
Styles for the interactive tutorial hub + player (#/learn): module cards
with progress bars, the step player, callout boxes, quiz options, and the
teaching widgets (dosage sandbox, lifecycle simulator, ΔE explorer, label
anatomy). Extends styles.css primitives; no view logic.
Keywords: training, tutorial, quiz, simulator
*/

/* ---------- hub ---------- */
.ln-part-title {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-soft); margin: 1.6rem 0 .8rem;
  display: flex; align-items: center; gap: .8rem;
}
.ln-part-title::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.ln-part-title:first-of-type { margin-top: .2rem; }

.ln-modules { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ln-mod {
  border: 2px solid var(--ink); background: var(--card); box-shadow: var(--shadow);
  padding: .9rem 1rem .8rem; cursor: pointer; display: flex; flex-direction: column; gap: .45rem;
}
.ln-mod:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-lift); }
.ln-mod .ln-mod-no { font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); letter-spacing: .18em; }
.ln-mod .ln-mod-title { font-weight: 800; font-stretch: 110%; text-transform: uppercase; font-size: .95rem; letter-spacing: .02em; }
.ln-mod .ln-mod-sub { font-size: .78rem; color: var(--ink-soft); line-height: 1.45; flex: 1; }
.ln-mod .ln-mod-foot { display: flex; align-items: center; gap: .6rem; margin-top: .2rem; }
.ln-mod.ln-done { border-color: var(--good); }
.ln-mod.ln-done .ln-mod-no::after { content: " ✓ DONE"; color: var(--good); }

.ln-bar { flex: 1; height: 8px; border: 1.5px solid var(--ink); background: var(--paper); position: relative; }
.ln-bar i { position: absolute; inset: 0; width: 0; background: var(--oxide); display: block; }
.ln-mod.ln-done .ln-bar i { background: var(--good); }
.ln-bar-pct { font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); min-width: 2.6em; text-align: right; }

/* ---------- player ---------- */
.ln-player-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ln-dots { display: flex; gap: .3rem; flex-wrap: wrap; }
.ln-dot {
  width: 22px; height: 10px; border: 1.5px solid var(--ink); background: var(--paper);
  cursor: pointer; padding: 0;
}
.ln-dot.cur { background: var(--oxide); }
.ln-dot.seen { background: var(--paper-2); }
.ln-dot.cur.seen { background: var(--oxide); }

.ln-step { max-width: 880px; }
.ln-step h3 {
  font-weight: 800; font-stretch: 112%; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: .02em; margin: 0 0 .8rem;
}
.ln-body { font-size: .92rem; line-height: 1.65; }
.ln-body p { margin: 0 0 .8rem; }
.ln-body ul, .ln-body ol { margin: 0 0 .8rem; padding-left: 1.3rem; }
.ln-body li { margin-bottom: .35rem; }
.ln-body table.tbl { margin: .4rem 0 .9rem; }
.ln-body .code-chip { font-size: .78rem; }

.ln-nav { display: flex; gap: .6rem; align-items: center; margin-top: 1.4rem; flex-wrap: wrap; }
.ln-nav .spacer { flex: 1; }

/* callouts */
.ln-note, .ln-warn, .ln-rule, .ln-try {
  border: 2px solid var(--ink); padding: .7rem .9rem; margin: 0 0 .9rem;
  font-size: .85rem; background: var(--card); box-shadow: var(--shadow);
}
.ln-note::before, .ln-warn::before, .ln-rule::before, .ln-try::before {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; margin-bottom: .35rem;
}
.ln-note { border-left: 6px solid var(--sky); } .ln-note::before { content: "note"; color: var(--sky); }
.ln-warn { border-left: 6px solid var(--bad); } .ln-warn::before { content: "careful"; color: var(--bad); }
.ln-rule { border-left: 6px solid var(--oxide); } .ln-rule::before { content: "lab rule"; color: var(--oxide); }
.ln-try  { border-left: 6px solid var(--good); } .ln-try::before { content: "try it in the app"; color: var(--good); }

.ln-flow { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-family: var(--mono); font-size: .74rem; margin: 0 0 .9rem; }
.ln-flow b { border: 1.5px solid var(--ink); background: var(--paper-2); padding: .25rem .5rem; font-weight: 600; white-space: nowrap; }
.ln-flow b.auto { border-style: dashed; color: var(--ink-soft); }
.ln-flow i { color: var(--oxide); font-style: normal; }

/* ---------- quiz ---------- */
.ln-quiz { border: 2px solid var(--ink); background: var(--paper-2); box-shadow: var(--shadow); padding: .9rem 1rem; margin: 0 0 .9rem; }
.ln-quiz .q { font-weight: 600; margin-bottom: .7rem; }
.ln-quiz .q::before { content: "QUIZ — "; font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; color: var(--oxide); }
.ln-opt {
  display: block; width: 100%; text-align: left; font-family: var(--sans); font-size: .85rem;
  border: 1.5px solid var(--ink); background: var(--card); padding: .5rem .7rem;
  margin-bottom: .4rem; cursor: pointer;
}
.ln-opt:hover { background: #fff; }
.ln-opt.right { border-color: var(--good); background: #dfe8d3; font-weight: 600; }
.ln-opt.wrong { border-color: var(--bad); background: #f0c4b4; }
.ln-quiz .why { font-size: .8rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }

/* ---------- checklist ---------- */
.ln-check { border: 2px solid var(--ink); background: var(--card); box-shadow: var(--shadow); padding: .8rem 1rem; margin: 0 0 .9rem; }
.ln-check label { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; margin: 0 0 .5rem; cursor: pointer; }
.ln-check input { width: auto; margin-top: .2rem; accent-color: var(--oxide); }
.ln-check label.ck-done { color: var(--ink-soft); text-decoration: line-through; }

/* ---------- widgets shared ---------- */
.ln-widget { border: 2px solid var(--ink); background: var(--card); box-shadow: var(--shadow); padding: .9rem 1rem; margin: 0 0 .9rem; }
.ln-widget .wt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--oxide); margin-bottom: .7rem;
}
.ln-widget .frm-row label { font-size: .7rem; }
.ln-widget input[type="number"], .ln-widget select {
  font-family: var(--mono); border: 1.5px solid var(--ink); background: var(--paper); padding: .3rem .45rem;
}

/* dosage sandbox */
.ln-dose-controls { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ln-dose-controls label { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); display: flex; flex-direction: column; gap: .25rem; }
.ln-dose-controls input { width: 90px; text-align: right; }
.ln-dose-sum { font-family: var(--mono); font-size: .78rem; margin-top: .6rem; line-height: 1.7; }

/* lifecycle simulator */
.ln-sim { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ln-sim-col .ct { font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem; }
.ln-sim-task { border: 1.5px solid var(--ink); background: var(--paper); padding: .5rem .6rem; margin-bottom: .45rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ln-sim-task .tt { font-size: .8rem; flex: 1; min-width: 130px; }
.ln-sim-tile { border: 1.5px solid var(--ink); background: var(--paper); padding: .45rem .6rem; margin-bottom: .4rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: .72rem; }
.ln-sim-clock { font-family: var(--mono); font-size: .8rem; border: 1.5px solid var(--ink); background: var(--paper-2); display: inline-block; padding: .25rem .6rem; margin-bottom: .7rem; }
.ln-sim-log { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); margin-top: .7rem; max-height: 130px; overflow-y: auto; border-top: 1px solid var(--line); padding-top: .5rem; }
.ln-sim-log div { margin-bottom: .25rem; }
.ln-sim-log .new { color: var(--oxide); }

/* ΔE explorer */
.ln-de { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.ln-de .pair { display: flex; gap: .6rem; }
.ln-de .sw { width: 92px; height: 92px; border: 2px solid var(--ink); box-shadow: inset 0 3px 5px rgba(255,255,255,.3), inset 0 -3px 5px rgba(0,0,0,.22); }
.ln-de .labs { font-family: var(--mono); font-size: .7rem; margin-top: .35rem; text-align: center; }
.ln-de-verdict { font-family: var(--mono); font-size: .8rem; margin-top: .6rem; }
.ln-de-sliders { flex: 1; min-width: 240px; }
.ln-de-sliders label { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .74rem; margin-bottom: .45rem; }
.ln-de-sliders input[type="range"] { flex: 1; accent-color: var(--oxide); }
.ln-de-sliders .v { min-width: 3.4em; text-align: right; }

/* label anatomy */
.ln-label-wrap { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }
.ln-label-stage { position: relative; padding: .6rem; background: var(--paper-2); border: 1.5px dashed var(--line); }
.ln-label-stage .label { transform: scale(1.7); transform-origin: top left; margin-right: 21mm; margin-bottom: 33mm; }
.ln-callouts { flex: 1; min-width: 230px; font-size: .82rem; }
.ln-callouts div { margin-bottom: .5rem; display: flex; gap: .5rem; }
.ln-cn {
  font-family: var(--mono); font-size: .7rem; font-weight: 600; border: 1.5px solid var(--oxide);
  color: var(--oxide); min-width: 1.5em; height: 1.5em; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.ln-pin { position: absolute; font-family: var(--mono); font-size: .62rem; font-weight: 600; background: var(--oxide); color: #fff; padding: .05rem .3rem; z-index: 2; }

@media (max-width: 760px) {
  .ln-sim { grid-template-columns: 1fr; }
  .ln-label-stage .label { transform: scale(1.25); margin-right: 8mm; margin-bottom: 12mm; }
}