/* ITSL Path — page styles layered on study.css */

/* header */
.top-progress b{font-size:15px}
.top-progress .tiny{display:block;font-size:10px;color:var(--faint);font-weight:700;letter-spacing:.02em}

/* generic guards: flex/grid children must be allowed to shrink */
#app,.card,.row{min-width:0}
.row.wrap{min-width:0}

/* ---------- grand tour ---------- */
#tour-note{margin:6px 0 0;line-height:1.4}
.tour-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.tour-stat{border:1px solid var(--line);background:var(--card2);border-radius:11px;padding:8px 10px;min-width:0}
.tour-stat .n{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.tour-stat .k{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.tour-stat.wide{grid-column:1/-1}
.diff-mix{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.diff-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;border:1px solid var(--line);color:var(--muted);background:#0d1620}
.diff-pill i{width:8px;height:8px;border-radius:50%;display:inline-block}
.tour-strip{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 0;min-width:0}
.tour-chip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#131c26;color:var(--muted);font-size:11px;font-weight:800;text-decoration:none;font-variant-numeric:tabular-nums;flex:none}
.tour-chip:active{transform:scale(.96)}
.tour-chip.d1{background:#111a24;color:#93a4b8;border-color:#1f2a37}
.tour-chip.d2{background:#16293f;color:#bcdcff;border-color:#24486e}
.tour-chip.d3{background:#1d3a63;color:#d6e7ff;border-color:#2f6fed}
.tour-chip.d4{background:#3a2f14;color:#ffdf9a;border-color:#6b571f}
.tour-chip.d5{background:#3a2414;color:#ffc59a;border-color:#7a4a1f}
.tour-chip.d6{background:#123528;color:#a7f3d0;border-color:#1f6f52}
#tour-start{margin-top:12px;text-decoration:none}
.tour-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;font-size:10px;color:var(--faint)}
.tour-legend span{display:inline-flex;align-items:center;gap:4px}
.tour-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ---------- eigensolution basis ---------- */
.basis-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px;min-width:0}
.basis-card{margin:0;padding:12px;min-width:0;display:flex;flex-direction:column}
.basis-more{grid-column:1/-1;border:1px dashed var(--line);border-radius:12px;background:var(--card2);padding:0 12px}
.basis-more summary{display:flex;align-items:center;min-height:46px;cursor:pointer;font-size:12px;font-weight:800;color:var(--accent);list-style:none}
.basis-more summary::-webkit-details-marker{display:none}
.basis-more summary:after{content:"+";margin-left:auto;color:var(--muted);font-size:16px;font-weight:800}
.basis-more[open] summary:after{content:"–"}
.basis-rest{display:grid;grid-template-columns:1fr;gap:10px;padding:0 0 12px}
.basis-top{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.basis-label{font-size:14.5px;font-weight:800;line-height:1.25;margin:7px 0 8px;overflow-wrap:anywhere}
.basis-why{line-height:1.35;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- formulas (uniform fixed-height KaTeX boxes) ---------- */
.formula-box{width:100%;max-width:100%;min-width:0;height:96px;border:1px solid var(--line);border-radius:10px;background:#0b131b;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;padding:6px 8px;-webkit-overflow-scrolling:touch}
.formula-box .fx{display:block;margin:0 auto;padding:0 2px;min-width:0}
.formula-box .katex{font-size:15px;white-space:nowrap}
.formula-box .katex-display{margin:0;white-space:nowrap}
.formula-box.compact{height:78px}
.formula-box.prose{display:block;padding:9px 10px;overflow-y:auto;font-size:12px;color:var(--muted);line-height:1.35}
.formula-box .fx-fallback{display:block;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.tex-err{color:var(--bad);font-size:12px;white-space:normal;font-family:ui-monospace,Menlo,monospace}

/* ---------- target ---------- */
.select,.input{display:block;width:100%;min-height:46px;border:1px solid var(--line);background:#0d1620;color:var(--text);border-radius:11px;padding:0 10px;font:inherit;font-size:14px;min-width:0;max-width:100%}
.select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 20px,calc(100% - 11px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.or{display:flex;align-items:center;gap:8px;margin:12px 0 8px;color:var(--faint);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
#target-note{margin-top:9px;line-height:1.4}

/* ---------- mastery ---------- */
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.preset{width:100%;min-height:50px;padding:0 6px;font-size:11.5px;line-height:1.15;font-weight:800;border:1px solid var(--line);background:#16202b;border-radius:10px;color:var(--text)}
.preset.on{border-color:var(--accent);color:var(--accent);background:rgba(110,168,254,.1)}
.btn.full{width:100%}
#mastery-note{margin-top:9px;line-height:1.4}

/* ---------- mode + compile ---------- */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#0d1620;border:1px solid var(--line);border-radius:12px;padding:4px;margin:0 0 10px}
.seg-btn{min-height:42px;border-radius:9px;color:var(--muted);font-weight:800;font-size:13px}
.seg-btn.active{background:#16293f;color:var(--accent)}
#compile-status{margin:10px 0 0;line-height:1.4}
.warn-text{color:var(--warn)}

/* ---------- compiled path summary ---------- */
.path-sum{margin:0 0 12px;padding:12px 14px}
.path-title{margin:0;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.path-sum .row{align-items:flex-start}

/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:26px;margin:0 0 12px;min-width:0}
.timeline:before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;background:var(--line);border-radius:2px}
.step{position:relative;margin:0 0 10px;min-width:0}
.step:before{content:"";position:absolute;left:-23px;top:16px;width:12px;height:12px;border-radius:50%;background:#26333f;border:2px solid var(--bg);z-index:1}
.step.st-review:before{background:var(--warn)}
.step.st-learn:before{background:var(--accent)}
.step.st-target:before{background:var(--ok);box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.step.st-skip:before{background:#334155}
.step-body{background:var(--card);border:1px solid var(--line);border-left:3px solid #334155;border-radius:14px;padding:11px 12px;min-width:0}
.step.st-review .step-body{border-left-color:var(--warn)}
.step.st-learn .step-body{border-left-color:var(--accent)}
.step.st-target .step-body{border-left-color:var(--ok);background:linear-gradient(180deg,rgba(52,211,153,.07),rgba(52,211,153,.015))}
.step.st-skip .step-body{opacity:.58}
.step-top{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.step-id{color:var(--faint);font-weight:700;white-space:nowrap}
.step-label{font-size:14.5px;font-weight:800;line-height:1.25;margin:6px 0 8px;overflow-wrap:anywhere}
.step-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:8px}
.step-meta>span{white-space:nowrap}
.step-open{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#131c26;color:var(--accent);font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}
.step-why{margin-top:7px;line-height:1.35}
.timeline .step:last-child{margin-bottom:0}

/* ---------- empty state ---------- */
.empty{border-style:dashed}
.empty p{margin:0}
.empty.error{border-color:rgba(251,113,133,.4)}
[hidden]{display:none!important}

/* ---------- bottom nav: 3 links ---------- */
.nav-inner{grid-template-columns:repeat(3,1fr)}
.nav-inner a{display:grid;place-items:center;min-height:52px;border-radius:10px;color:var(--faint);font-size:11px;font-weight:800;text-decoration:none}
.nav-inner a.active{color:var(--accent);background:rgba(110,168,254,.1)}
.nav-inner a:active{background:rgba(110,168,254,.06)}

@media (min-width:600px){
  .tour-stats{grid-template-columns:repeat(4,1fr)}
  .tour-stat.wide{grid-column:auto}
  .basis-grid{grid-template-columns:1fr 1fr}
  .basis-grid .basis-card:first-child{grid-column:1/-1}
  .basis-rest{grid-template-columns:1fr 1fr}
}

.run-step .run-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.run-step .run-label{font-size:16px;font-weight:800;margin:2px 0 8px}
.run-step .run-why{font-size:12px;color:var(--muted);margin-top:8px}
.run-progress{height:7px;background:#0d1620;border-radius:99px;overflow:hidden;margin:6px 0 12px}
.run-progress i{display:block;height:100%;background:var(--accent);border-radius:99px}
.run-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.run-actions .btn{width:100%}
.run-actions .wide{grid-column:1/-1}
.step.run-done{border-color:rgba(52,211,153,.45)}
.run-done-badge{font-size:10px;color:var(--ok);font-weight:800;margin-left:6px}