/* ============================================================
   UnexpectED Education — Level Tracker
   Builds on css/styles.css tokens (cream / amber / clay).
   Sheet colors match Google Sheets: green #b6d7a8 · yellow #ffe599 · grey #d9d9d9
   ============================================================ */
:root {
  --s-green: #b6d7a8; --s-green-ink: #2f6b2a;
  --s-yellow: #ffe599; --s-yellow-ink: #7a5a00;
  --s-grey: #d9d9d9; --s-grey-ink: #6b6b6b;
  --s-none: #ffffff;
  --sheet-blue: #2e75b6; --sheet-navy: #1f4e78; --sheet-orange: #ed7d31; --sheet-strand: #ddebf7;
  --lt-col: 106px; /* the narrowest a Level column gets; columns share any extra width */
}
.lt-page [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.lt-lock { overflow: hidden; }
.lt-app { padding-top: var(--nav-h); min-height: 70vh; }
.lt-page .nav-links a[aria-current="page"] { color: var(--orange-deep); }
.btn-sm { min-height: 40px; padding: 9px 18px; font-size: .92rem; }
.lt-fine { font-size: .86rem; color: var(--ink-soft); }
.lt-link { background: none; border: 0; color: var(--orange-deep); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 6px; font: inherit; }
.lt-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); font-size: 1.1rem; cursor: pointer; display: inline-grid; place-items: center; flex: none; transition: transform .2s var(--ease), background .2s; }
.lt-icon-btn:hover { transform: rotate(12deg); background: var(--cream-2); }
.lt-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; font-weight: 700; background: var(--math-bg); color: #8a5a00; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.lt-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lt-danger { color: var(--error) !important; border-color: #f3c3c3 !important; }

/* ---------- Hero ---------- */
.lt-hero { background: radial-gradient(120% 140% at 0% 0%, #fff3d6 0%, var(--cream) 55%); border-bottom: 1px solid var(--border); padding: 34px 0 26px; }
.lt-hero-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.lt-title h1 { font-size: clamp(2.1rem, 4vw, 3rem); margin: 10px 0 8px; }
.lt-title p { color: var(--ink-soft); max-width: 58ch; }
.lt-student { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-clay); }
.lt-avatar { width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: #fff; background: linear-gradient(135deg, var(--amber), var(--orange)); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), 0 6px 14px rgba(236,124,42,.35); }
.lt-student-main { flex: 1; min-width: 0; }
.lt-student-name { font-family: var(--font-head); font-size: 1.3rem; }
.lt-select { width: 100%; font: 700 1.1rem var(--font-head); color: var(--ink); border: 2px solid var(--border); border-radius: 12px; padding: 6px 10px; background: var(--cream); }
.lt-stats { font-size: .9rem; color: var(--ink-soft); margin: 6px 0 6px; }
.lt-meter { height: 9px; border-radius: 99px; background: var(--cream-2); overflow: hidden; }
.lt-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--amber), var(--orange)); transition: width .8s var(--ease); }
.lt-student-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* ---------- Toolbar & tabs ---------- */
.lt-body { padding: 22px 0 60px; }
.lt-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.lt-tabs { display: inline-flex; background: var(--cream-2); border-radius: var(--r-pill); padding: 5px; gap: 4px; }
.lt-tab { border: 0; background: transparent; font: 700 1rem var(--font-head); color: var(--ink-soft); padding: 9px 20px; border-radius: var(--r-pill); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.lt-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.lt-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lt-sync { font: 700 .85rem var(--font-body); border: 2px dashed var(--border); background: transparent; color: var(--ink-soft); border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer; }
.lt-sync.on { border-style: solid; color: var(--success); border-color: #bfe3cf; background: #eefaf3; }
.lt-focus-strip { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 2px solid #f6d27a; background: linear-gradient(90deg, #fff6d9, #fff); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 14px; cursor: pointer; font: inherit; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s; }
.lt-focus-strip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.lt-focus-strip .lt-go { margin-left: auto; font-weight: 800; color: var(--orange-deep); white-space: nowrap; }
.lt-pulse { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(236,124,42,.6); animation: lt-pulse 1.8s infinite; }
@keyframes lt-pulse { 70% { box-shadow: 0 0 0 12px rgba(236,124,42,0); } 100% { box-shadow: 0 0 0 0 rgba(236,124,42,0); } }

.lt-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--ink-soft); margin: 4px 0 12px; }
.lt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid #c9c9c9; display: inline-block; }
.s-green { background: var(--s-green); } .s-yellow { background: var(--s-yellow); } .s-grey { background: var(--s-grey); } .s-none { background: var(--s-none); }

/* ---------- Level map (sheet) ---------- */
/* All nine Levels fit side by side when the window is wide enough (the map may reach past the page column on
   big screens). When they don't fit, the table scrolls sideways: the bar is always visible, there is a second
   one above the table, and the "Earlier / Later levels" buttons step through the Levels. */
.lt-sheet-wrap { overflow-x: auto; border: 2px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.lt-sheet { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; min-width: calc(190px + 9 * var(--lt-col)); }
.lt-topscroll { overflow-x: scroll; overflow-y: hidden; height: 18px; margin: 0 0 6px; }
.lt-topscroll > div { height: 1px; }
.lt-sheet-wrap::-webkit-scrollbar, .lt-topscroll::-webkit-scrollbar { height: 16px; -webkit-appearance: none; }
.lt-sheet-wrap::-webkit-scrollbar-track, .lt-topscroll::-webkit-scrollbar-track { background: var(--cream-2); border-radius: 999px; }
.lt-sheet-wrap::-webkit-scrollbar-thumb, .lt-topscroll::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 999px; border: 3px solid var(--cream-2); min-width: 60px; }
.lt-sheet-wrap::-webkit-scrollbar-thumb:hover, .lt-topscroll::-webkit-scrollbar-thumb:hover { background: var(--orange-deep); }
@supports not selector(::-webkit-scrollbar) { .lt-sheet-wrap, .lt-topscroll { scrollbar-color: var(--orange) var(--cream-2); scrollbar-width: auto; } }
.lt-lvnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.lt-lvnav[hidden], .lt-topscroll[hidden] { display: none; }
.lt-lvnav-info { flex: 1; text-align: center; font: 700 .9rem var(--font-head); color: var(--ink-soft); }
.lt-lvnav-btn { flex: none; border: 2px solid var(--border); background: var(--surface); border-radius: var(--r-pill); padding: 8px 16px; font: 700 .9rem var(--font-head); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); }
.lt-lvnav-btn:hover:not([disabled]) { background: var(--cream-2); }
.lt-lvnav-btn[disabled] { opacity: .35; cursor: default; }
@media (min-width: 1300px) { .lt-sheet-wrap, .lt-topscroll, .lt-lvnav { margin-inline: calc((1180px - min(100vw - 64px, 1560px)) / 2); } }
@media print { .lt-lvnav, .lt-topscroll { display: none !important; } .lt-sheet-wrap { margin-inline: 0 !important; } .lt-sheet-wrap::-webkit-scrollbar { display: none; } }
.lt-sheet thead th { position: sticky; top: 0; z-index: 3; background: var(--sheet-blue); color: #fff; font: 700 .95rem var(--font-head); padding: 10px 8px; text-align: center; }
.lt-sheet th.lt-strand { position: sticky; left: 0; z-index: 2; width: 190px; min-width: 190px; text-align: left; background: var(--sheet-strand); border-right: 2px solid #b8cfe6; border-bottom: 1px solid #cfdcec; padding: 10px 12px; font: 700 .92rem var(--font-head); color: #1d3b57; vertical-align: top; }
.lt-sheet thead th.lt-strand { z-index: 4; background: var(--sheet-navy); color: #fff; }
.lt-sheet th.lt-strand small { display: block; font: 700 .76rem var(--font-body); color: var(--orange-deep); margin-top: 4px; }
.lt-domain th { position: sticky; left: 0; background: var(--sheet-orange); color: #fff; text-align: left; padding: 7px 12px; font: 800 1rem var(--font-head); letter-spacing: .01em; }
.lt-domain th span:first-child { position: sticky; left: 12px; }
.lt-dprog { float: right; font: 700 .8rem var(--font-body); background: rgba(255,255,255,.22); padding: 2px 10px; border-radius: 99px; margin-left: 12px; }
.lt-sheet td { padding: 0; border-bottom: 1px solid #e6e0d6; border-right: 1px solid #ece7de; vertical-align: top; }
.lt-cell { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 104px; height: 100%; padding: 9px 9px 8px; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s; }
.lt-cell:hover, .lt-cell:focus-visible { transform: scale(1.04); z-index: 1; box-shadow: 0 10px 22px rgba(90,60,10,.22); outline: none; border-radius: 8px; }
.lt-cell:focus-visible { box-shadow: 0 0 0 3px var(--ring), 0 10px 22px rgba(90,60,10,.22); }
.lt-cell.s-grey { color: var(--s-grey-ink); }
.lt-cell.s-grey .lt-cell-title { opacity: .75; }
.lt-cell-code { font: 800 .74rem ui-monospace, Menlo, monospace; letter-spacing: -.01em; }
.lt-cell-title { font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lt-cell-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; font: 700 .72rem var(--font-body); }
.lt-cell-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(0,0,0,.09); overflow: hidden; }
.lt-cell-bar i { display: block; height: 100%; background: var(--s-green-ink); border-radius: inherit; }
.lt-cell.s-green .lt-cell-bar i { background: #3f8a36; }
.lt-cell.is-current { box-shadow: inset 0 0 0 3px var(--orange); }
.lt-cell.is-focus::after { content: '★'; position: absolute; top: 5px; right: 7px; color: var(--orange-deep); font-size: .95rem; }
.lt-here { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); font-size: .7rem; color: var(--orange); animation: lt-nudge 1.2s ease-in-out infinite; }
@keyframes lt-nudge { 50% { transform: translate(3px, -50%); } }
.lt-cell.pop { animation: lt-pop .8s var(--ease); }
@keyframes lt-pop { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(-2deg); box-shadow: 0 0 0 6px rgba(182,215,168,.8); } 100% { transform: scale(1); } }

/* ---------- Drawer ---------- */
.lt-scrim { position: fixed; inset: 0; background: rgba(42,36,29,.38); z-index: 140; backdrop-filter: blur(2px); animation: lt-fade .25s; }
.lt-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 150; background: var(--cream); box-shadow: -20px 0 50px rgba(60,40,10,.25); transform: translateX(105%); transition: transform .35s var(--ease); display: flex; flex-direction: column; }
.lt-drawer.open { transform: none; }
.lt-dr-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 2px solid rgba(0,0,0,.06); }
.lt-dr-head.s-none { background: #fff; }
.lt-dr-head h2 { font-size: 1.35rem; margin: 4px 0 8px; outline: none; }
.lt-crumb { font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.lt-pill { display: inline-block; font: 700 .8rem var(--font-body); padding: 4px 12px; border-radius: 99px; border: 1px solid rgba(0,0,0,.12); }
.lt-dr-body { overflow-y: auto; padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.lt-ican { font-family: var(--font-head); font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
.lt-goal { background: #fff; border-left: 4px solid var(--amber); padding: 8px 12px; border-radius: 8px; font-size: .92rem; }
.lt-h3 { font-size: 1.02rem; margin-top: 4px; }
.lt-task { background: #fff2cc; border: 2px solid #f3dc92; border-radius: var(--r-md); padding: 14px 16px; }
.lt-task p { margin: 6px 0 10px; }
.lt-done { color: var(--success); font-weight: 800; font-size: .88rem; }
.lt-stds { display: flex; flex-direction: column; gap: 10px; }
.lt-std { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; transition: border-color .3s, background .3s; }
.lt-std.is-mastered { border-color: #cfe6c6; background: #f5fbf2; }
.lt-std-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.lt-std-text { margin: 6px 0; font-weight: 600; }
.lt-std-scores { display: flex; gap: 6px; flex-wrap: wrap; }
.lt-score { font: 700 .78rem var(--font-body); padding: 2px 9px; border-radius: 99px; background: #fdeae3; color: #a2412a; }
.lt-score.pass { background: #e3f4e6; color: #226b3c; }
.lt-std-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.lt-res { display: inline-flex; align-items: center; gap: 4px; font: 700 .85rem var(--font-body); padding: 8px 12px; border-radius: 99px; border: 2px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; }
.lt-res.yt { color: #c4302b; border-color: #f4c8c6; }
.lt-res.tpt { color: #1a7f5a; border-color: #bfe3cf; }
.lt-res:hover { background: var(--cream-2); }
.lt-links-form { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.lt-links-form label, .lt-settings label, .lt-add-form label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.lt-links-form input, .lt-settings input:not([type="checkbox"]):not([type="radio"]), .lt-add-form input:not([type="checkbox"]), .lt-add-form select { font: 500 1rem var(--font-body); padding: 10px 12px; border: 2px solid var(--border); border-radius: 12px; background: #fff; width: 100%; }
.lt-video summary, .lt-notes summary, .lt-review summary { cursor: pointer; font-weight: 700; color: var(--orange-deep); margin-top: 8px; }
.lt-embed { position: relative; aspect-ratio: 16 / 9; margin-top: 8px; border-radius: 12px; overflow: hidden; background: #000; }
.lt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lt-notes { background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; }
.lt-note { border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--cream); font-size: .9rem; }
.lt-note p { margin: 4px 0 0; }
.lt-note.n-found { background: #e2efda; }
.lt-note.n-review { background: #fce4d6; }
.lt-note.n-priority { background: #fff0c2; border: 1px solid #ffc000; }
.lt-controls { border-top: 2px dashed var(--border); padding-top: 12px; }
.lt-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.lt-seg button { font: 700 .85rem var(--font-body); padding: 8px 14px; border-radius: 10px; border: 2px solid #d5cdbd; cursor: pointer; background: #fff; }
.lt-seg button.on { outline: 3px solid var(--orange); outline-offset: 1px; }
.lt-ctl-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Modal & quiz ---------- */
.lt-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(42,36,29,.45); backdrop-filter: blur(2px); animation: lt-fade .25s; }
.lt-modal-card { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 24px; animation: lt-rise .35s var(--ease); }
.lt-modal.is-wide .lt-modal-card { width: min(760px, 100%); }
.lt-modal.is-quiz .lt-modal-card { width: min(720px, 100%); background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.lt-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
@keyframes lt-rise { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes lt-fade { from { opacity: 0; } }
.lt-quiz-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lt-quiz-ican { margin: 6px 0 0; color: var(--ink-soft); font-weight: 600; }
.lt-badge { display: inline-block; font: 800 .75rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 99px; }
.lt-badge.pre { background: #e4f1fb; color: #1f5f99; }
.lt-badge.post { background: #fde7d8; color: #b45411; }
.lt-dots { display: flex; gap: 8px; margin: 16px 0 12px; }
.lt-dots i { flex: 1; height: 8px; border-radius: 99px; background: var(--cream-2); transition: background .3s; }
.lt-dots i.done { background: var(--amber); }
.lt-dots i.on { background: var(--orange); }
.lt-q { animation: lt-slide .35s var(--ease); }
@keyframes lt-slide { from { opacity: 0; transform: translateX(26px); } }
.lt-qnum { font: 700 .82rem var(--font-body); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.lt-qprompt { font: 600 1.28rem/1.4 var(--font-head); margin: 6px 0 12px; }
.lt-qprompt .cmp, .lt-qprompt .data { display: block; margin-top: 8px; font-size: 1.6rem; text-align: center; letter-spacing: .03em; }
.lt-qprompt .data { font-size: 1.2rem; background: #fff; border-radius: 12px; padding: 8px; }
.lt-qprompt .blank { display: inline-block; min-width: 1.6em; border-bottom: 3px solid var(--orange); color: var(--orange); }
.lt-qprompt .hint { display: block; font-size: .9rem; color: var(--ink-soft); font-weight: 500; }
.lt-qvisual { display: flex; justify-content: center; margin: 4px 0 14px; overflow-x: auto; }
.lt-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lt-opts.many { grid-template-columns: 1fr; }
.lt-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; min-height: 60px; border-radius: 16px; border: 2px solid var(--border); background: #fff; font: 600 1.08rem var(--font-body); color: var(--ink); cursor: pointer; transition: transform .15s var(--ease), border-color .15s, background .15s, box-shadow .15s; box-shadow: 0 3px 0 #efe3cf; }
.lt-opt:hover { transform: translateY(-2px); border-color: #f3c982; }
.lt-opt.picked { border-color: var(--orange); background: #fff4e6; box-shadow: 0 3px 0 var(--orange); animation: lt-pick .3s var(--ease); }
@keyframes lt-pick { 50% { transform: scale(1.04); } }
.lt-opt-key { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-2); font: 800 .85rem var(--font-head); color: var(--ink-soft); }
.lt-opt.picked .lt-opt-key { background: var(--orange); color: #fff; }
.lt-quiz-foot { display: flex; justify-content: space-between; margin-top: 18px; }
.lt-quiz-foot .btn[disabled], .lt-wt-bar .btn[disabled], .lt-wt-qs .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: .9em; line-height: 1.05; margin: 0 .12em; }
.frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .15em; }
.rep { text-decoration: overline; }

/* Visuals inside questions */
.viz-svg { max-width: 100%; height: auto; }
.viz-clock { width: 190px; }
.viz-emoji { display: grid; grid-template-columns: repeat(var(--per, 5), auto); gap: 4px 6px; font-size: 1.7rem; justify-content: center; }
.viz-emoji .gone { position: relative; opacity: .35; }
.viz-emoji .gone::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--error); font-size: 1.3rem; font-weight: 900; opacity: 1; }
.viz-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.viz-op { font: 800 2rem var(--font-head); color: var(--orange); }
.viz-bag { border: 2px dashed #e9c98b; border-radius: 16px; padding: 6px 8px; background: #fffaf0; }
.viz-bag .viz-emoji { font-size: 1.3rem; }
.viz-groups { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.viz-group { background: #fff; border-radius: 14px; padding: 8px 12px; text-align: center; }
.viz-group b { display: block; font-family: var(--font-head); margin-bottom: 4px; }
.viz-table, .viz-pic { border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 1rem; }
.viz-table th, .viz-table td { border: 1px solid #e6dccb; padding: 6px 14px; text-align: center; }
.viz-table th { background: var(--math-bg); }
.viz-pic caption { font: 800 1rem var(--font-head); padding: 4px; }
.viz-pic th { text-align: right; padding: 6px 12px; font-family: var(--font-head); }
.viz-pic td { padding: 6px 10px; font-size: 1.4rem; letter-spacing: 2px; border-bottom: 1px solid #f0e6d6; }
.viz-pic .key td { font-size: .9rem; letter-spacing: 0; color: var(--ink-soft); }

/* Results */
.lt-result { text-align: center; position: relative; }
.lt-ring { display: block; margin: 0 auto; width: 150px; height: 150px; transform: rotate(-90deg); }
.lt-ring circle { fill: none; stroke-width: 12; }
.lt-ring .bg { stroke: var(--cream-2); }
.lt-ring .fg { stroke: url(#none); stroke: var(--orange); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--c); animation: lt-ring 1s .15s var(--ease) forwards; }
.lt-result.pass .lt-ring .fg { stroke: var(--success); }
@keyframes lt-ring { to { stroke-dashoffset: var(--off); } }
.lt-ring-num { position: absolute; top: 48px; left: 0; right: 0; font: 800 2rem var(--font-head); }
.lt-result h2 { margin: 8px 0 6px; }
.lt-result.pass h2 { color: var(--success); animation: lt-bounce .7s .5s var(--ease) both; }
@keyframes lt-bounce { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.lt-review { text-align: left; margin: 12px 0; background: #fff; border-radius: 12px; padding: 8px 14px; }
.lt-review li { margin: 8px 0; padding-left: 4px; }
.lt-review li.ok > div:last-child { color: var(--success); font-weight: 700; }
.lt-review li.no > div:last-child { color: #a2412a; font-weight: 700; }
.lt-result-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }

/* ---------- Level up / path / celebrate ---------- */
.lt-fx { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, rgba(58,40,12,.86), rgba(20,14,6,.96)); opacity: 0; transition: opacity .3s; overflow: auto; }
.lt-fx.show { opacity: 1; }
.lt-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 320; pointer-events: none; }
.lt-lvlup, .lt-celebrate, .lt-path { position: relative; text-align: center; color: #fff; max-width: 760px; width: 100%; }
.lt-lvlup h2, .lt-celebrate h2, .lt-path h2 { color: #fff; }
.lt-rays { position: absolute; left: 50%; top: 130px; width: 760px; height: 760px; margin: -380px 0 0 -380px; background: repeating-conic-gradient(from 0deg, rgba(246,184,41,.28) 0 10deg, transparent 10deg 20deg); border-radius: 50%; mask: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); animation: lt-spin 14s linear infinite; pointer-events: none; }
@keyframes lt-spin { to { transform: rotate(360deg); } }
.lt-medal { position: relative; width: 210px; height: 210px; margin: 10px auto 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--amber) 45%, var(--orange-deep)); box-shadow: 0 0 0 10px rgba(255,255,255,.14), 0 0 60px rgba(246,184,41,.8), inset 0 -10px 0 rgba(0,0,0,.15); display: grid; place-items: center; animation: lt-medal 1s var(--ease) both; overflow: hidden; }
@keyframes lt-medal { 0% { transform: scale(0) rotate(-200deg); } 70% { transform: scale(1.12) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
.lt-medal span { grid-area: 1 / 1; font: 800 5.2rem var(--font-head); color: #fff; text-shadow: 0 5px 0 rgba(0,0,0,.18); }
.lt-from { animation: lt-out .5s 1s var(--ease) forwards; }
.lt-to { opacity: 0; transform: translateY(80px); animation: lt-in .6s 1.3s var(--ease) forwards; }
@keyframes lt-out { to { opacity: 0; transform: translateY(-90px) scale(.6); } }
@keyframes lt-in { to { opacity: 1; transform: none; } }
.lt-lvlup-title { font-size: clamp(2.6rem, 8vw, 4.4rem); letter-spacing: .04em; background: linear-gradient(180deg, #fff6c9, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: lt-bounce .8s .4s var(--ease) both; text-shadow: none; }
.lt-lvlup p, .lt-celebrate p { font-size: 1.1rem; margin: 6px 0 20px; color: #fbe9c7; }
.lt-stars i { position: absolute; left: 50%; top: 115px; color: var(--amber); font-style: normal; font-size: 1.6rem; opacity: 0; animation: lt-star 1.6s var(--ease) forwards; }
.lt-stars i:nth-child(1) { --x: -190px; --y: -80px; animation-delay: .5s; } .lt-stars i:nth-child(2) { --x: 180px; --y: -90px; animation-delay: .6s; }
.lt-stars i:nth-child(3) { --x: -230px; --y: 40px; animation-delay: .7s; } .lt-stars i:nth-child(4) { --x: 220px; --y: 50px; animation-delay: .8s; }
.lt-stars i:nth-child(5) { --x: -120px; --y: -150px; animation-delay: .9s; } .lt-stars i:nth-child(6) { --x: 130px; --y: -150px; animation-delay: 1s; }
.lt-stars i:nth-child(7) { --x: -80px; --y: 120px; animation-delay: 1.1s; } .lt-stars i:nth-child(8) { --x: 90px; --y: 120px; animation-delay: 1.2s; }
@keyframes lt-star { 0% { opacity: 0; transform: translate(0, 0) scale(.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.3) rotate(160deg); } }
.lt-trophy { font-size: 8rem; line-height: 1; animation: lt-trophy 1.2s var(--ease) both; filter: drop-shadow(0 12px 30px rgba(246,184,41,.7)); }
@keyframes lt-trophy { 0% { transform: translateY(-120vh) rotate(-30deg); } 60% { transform: translateY(20px) rotate(8deg); } 80% { transform: translateY(-10px); } 100% { transform: none; } }
.lt-celebrate h2 { font-size: clamp(2.2rem, 6vw, 3.4rem); animation: lt-bounce .8s .8s var(--ease) both; }

.lt-path .eyebrow { background: rgba(255,255,255,.12); color: #ffe599; border-color: transparent; }
.lt-path h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 10px 0 4px; }
.lt-path-svg { width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.lt-trail { fill: none; stroke: url(#ltg); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 460; stroke-dashoffset: 460; animation: lt-draw 1.1s .2s var(--ease) forwards; opacity: .95; }
.lt-trail.b { animation-delay: .5s; stroke: #2ba199; }
.lt-trail-dash { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; opacity: 0; animation: lt-fadein .4s 1.4s forwards, lt-march 1s 1.4s linear infinite; }
@keyframes lt-draw { to { stroke-dashoffset: 0; } }
@keyframes lt-fadein { to { opacity: 1; } }
@keyframes lt-march { to { stroke-dashoffset: -16; } }
.lt-node circle { fill: #fff; stroke-width: 6; }
.lt-node.a circle { stroke: var(--amber); } .lt-node.b circle { stroke: #2ba199; }
.lt-node text { font-size: 30px; font-weight: 800; fill: var(--ink); }
.lt-node { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lt-nodepop .5s var(--ease) forwards; }
.lt-node.a { animation-delay: 1.1s; } .lt-node.b { animation-delay: 1.4s; }
@keyframes lt-nodepop { 0% { opacity: 0; transform: scale(0); } 70% { transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
.lt-token circle { fill: var(--orange); stroke: #fff; stroke-width: 5; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.lt-token text { fill: #fff; font: 800 22px var(--font-head); }
.lt-token-hop { animation: lt-hop 1s ease-in-out infinite; }
.lt-path-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.lt-path-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px; border-radius: var(--r-md); border: 3px solid transparent; background: #fff; color: var(--ink); cursor: pointer; font: inherit; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; opacity: 0; animation: lt-cardin .5s var(--ease) forwards; }
@keyframes lt-cardin { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.lt-path-card.a { border-color: var(--amber); animation-delay: 1.3s; } .lt-path-card.b { border-color: #2ba199; animation-delay: 1.6s; }
.lt-path-card:hover:not([disabled]) { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,.3); }
.lt-path-card.chosen { box-shadow: 0 0 0 5px rgba(255,255,255,.5); transform: scale(1.03); }
.lt-path-card[disabled]:not(.chosen) { opacity: .45 !important; }
.lt-path-card.off { opacity: .7; cursor: default; }
.lt-path-tag { font: 800 .75rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--orange-deep); }
.lt-path-card.b .lt-path-tag { color: #1c7a73; }
.lt-path-card b { font: 700 1.15rem var(--font-head); }
.lt-path-card small { color: var(--ink-soft); }
.lt-path-sub { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }
.lt-path-go { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; animation: lt-rise .4s var(--ease); }
.lt-path .lt-link, .lt-path-go .lt-link { color: #ffe599; }
@keyframes lt-hop { 50% { transform: translateY(-3px); } }

/* ---------- Schedule ---------- */
.lt-focus-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; background: linear-gradient(120deg, #fff6d9, #fff 60%); border: 2px solid #f6d27a; border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-clay); }
.lt-focus-card h2 { font-size: 1.6rem; margin: 8px 0 4px; }
.lt-focus-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-sched-head { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 12px; gap: 10px; }
.lt-sched-head h2 { font-size: 1.4rem; }
.lt-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.lt-dcard { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.lt-dcard header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.lt-dcard h3 { font-size: 1.15rem; }
.lt-dcard header span { font: 700 .85rem var(--font-body); color: var(--ink-soft); }
.lt-dcard ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.lt-srow { display: flex; gap: 12px; align-items: flex-start; }
.lt-srow.is-focus { background: #fff6d9; border-radius: 12px; margin: -4px; padding: 4px; }
.lt-srow b { display: block; font-family: var(--font-head); }
.lt-srow small { display: block; font-size: .86rem; line-height: 1.35; }
.lt-srow .lt-sub { color: var(--ink-soft); margin-top: 2px; }
.lt-lv { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(0,0,0,.12); font: 800 1.15rem var(--font-head); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease); }
.lt-lv:hover { transform: scale(1.1) rotate(-4deg); }
.lt-scores { font-weight: 700; color: var(--success); }

/* ---------- Growth log ---------- */
.lt-log-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.lt-log-stats div { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-md); padding: 14px; text-align: center; }
.lt-log-stats b { display: block; font: 800 1.8rem var(--font-head); color: var(--orange-deep); }
.lt-log-stats span { font-size: .85rem; color: var(--ink-soft); }
.lt-table-wrap { overflow-x: auto; border: 2px solid var(--border); border-radius: var(--r-md); background: #fff; }
.lt-log { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lt-log th { background: var(--sheet-blue); color: #fff; text-align: left; padding: 10px; font-family: var(--font-head); }
.lt-log td { padding: 9px 10px; border-bottom: 1px solid #efe6d6; vertical-align: top; }
.lt-empty { text-align: center; padding: 50px 16px; color: var(--ink-soft); }

/* ---------- Welcome, forms, export ---------- */
.lt-welcome { padding: 40px 0 70px; display: grid; place-items: center; }
.lt-welcome-card { width: min(560px, 100%); text-align: center; background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-xl); padding: 34px 30px; box-shadow: var(--shadow-clay); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.lt-welcome-art { font-size: 4rem; animation: lt-hop 2.4s ease-in-out infinite; }
.lt-welcome-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lt-add-form { display: grid; gap: 12px; width: 100%; text-align: left; }
.lt-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px !important; font-weight: 600 !important; }
.lt-check input { width: 18px; height: 18px; accent-color: var(--orange); }
.lt-place-grade { max-width: 160px; }
.lt-settings { display: grid; gap: 14px; }
.lt-settings fieldset { border: 2px solid var(--border); border-radius: var(--r-md); padding: 12px 16px 16px; display: grid; gap: 10px; background: #fff; }
.lt-settings legend { font: 700 1.05rem var(--font-head); padding: 0 6px; }
.lt-steps { margin: 0; padding-left: 20px; font-size: .92rem; display: grid; gap: 4px; }
.lt-steps code { background: var(--cream-2); padding: 1px 6px; border-radius: 6px; }
.lt-file { cursor: pointer; }
.lt-export { display: grid; gap: 10px; }
.lt-export-btn { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: var(--r-md); border: 2px solid var(--border); background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .2s, transform .2s var(--ease); }
.lt-export-btn:hover { border-color: var(--amber); transform: translateX(4px); }
.lt-export-btn b { font-family: var(--font-head); font-size: 1.05rem; }
.lt-export-btn span { font-size: .88rem; color: var(--ink-soft); }
.lt-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 400; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 99px; font-weight: 700; box-shadow: var(--shadow-md); transition: transform .35s var(--ease); max-width: calc(100% - 32px); text-align: center; }
.lt-toast.show { transform: translate(-50%, 0); }
.lt-footer { margin-top: 0; }
.lt-footer .footer-bottom { padding-top: 18px; }
.lt-footer a { color: inherit; text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lt-hero-in { grid-template-columns: 1fr; }
  .lt-log-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  :root { --lt-col: 104px; } /* two whole Levels beside the strand names on a phone */
  .lt-hero { padding: 22px 0 18px; }
  .lt-lvnav-btn { padding: 8px 12px; font-size: .84rem; }
  .lt-lvnav-info { font-size: .8rem; }
  .lt-student { flex-wrap: wrap; }
  .lt-student-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
  .lt-sheet th.lt-strand { width: 120px; min-width: 120px; font-size: .8rem; padding: 8px; }
  .lt-sheet { min-width: calc(120px + 9 * var(--lt-col)); }
  .lt-opts { grid-template-columns: 1fr; }
  .lt-qprompt { font-size: 1.12rem; }
  .lt-modal-card { padding: 18px; }
  .lt-path-cards { grid-template-columns: 1fr; }
  .lt-medal { width: 160px; height: 160px; }
  .lt-medal span { font-size: 4rem; }
  .lt-rays { width: 520px; height: 520px; margin: -260px 0 0 -260px; top: 110px; }
  .lt-dgrid { grid-template-columns: 1fr; }
  .lt-focus-strip { font-size: .9rem; }
  .lt-tabs { width: 100%; }
  .lt-tab { flex: 1; padding: 9px 8px; }
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .lt-app *, .lt-fx *, .lt-modal * { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .lt-trail { stroke-dashoffset: 0; } .lt-node, .lt-path-card, .lt-trail-dash { opacity: 1; }
}
@media print {
  .nav, .mobile-menu, .lt-toolbar, .lt-focus-strip, .lt-student-actions, .lt-footer, .lt-drawer, .lt-scrim, .lt-toast, .lt-focus-actions, .lt-sched-head button { display: none !important; }
  .lt-app { padding-top: 0; }
  .lt-hero { padding: 0 0 10px; background: none; }
  .lt-dcard, .lt-focus-card { box-shadow: none; break-inside: avoid; }
  .lt-dgrid { grid-template-columns: 1fr 1fr; }
  body { background: #fff; }
}

/* ---------- Google sign-in, roles & resources ---------- */
.lt-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 12px 26px; border-radius: var(--r-pill); border: 2px solid #dadce0; background: #fff; color: #3c4043; font: 700 1.05rem var(--font-head); cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s var(--ease); }
.lt-google-btn:hover:not([disabled]) { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lt-google-btn[disabled] { opacity: .7; cursor: progress; }
.lt-error { color: var(--error); background: #fdecec; border: 1px solid #f5c2c2; border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.lt-admin-link { font-size: .85rem; color: var(--ink-soft); }
.lt-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #eef6fd; border: 2px solid #c9e0f5; border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; }
.lt-banner span { flex: 1; min-width: 200px; }
.lt-banner.warn { background: #fff6d9; border-color: #f6d27a; }
.lt-account { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-soft); background: var(--cream-2); border-radius: var(--r-pill); padding: 4px 6px 4px 12px; max-width: 100%; }
.lt-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.lt-account .lt-link { padding: 4px 8px; font-size: .85rem; }
.lt-admin-badge { background: var(--ink); color: #fff; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }
.lt-sync.err { color: var(--error); border-color: #f5c2c2; background: #fdecec; border-style: solid; }
a.lt-sync { text-decoration: none; }
.lt-fieldset { border: 2px solid var(--border); border-radius: var(--r-md); padding: 10px 14px 14px; display: grid; gap: 8px; }
.lt-fieldset legend { font: 700 1rem var(--font-head); padding: 0 6px; }
.lt-more summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); margin-top: 8px; font-size: .9rem; }
.lt-reslist { list-style: none; padding: 8px 0 0; margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.lt-reslist a { color: var(--ink); font-weight: 600; }
.lt-reslist a:hover { color: var(--orange-deep); }
.lt-reshead { font: 800 .72rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-top: 4px; }
.lt-tag { display: inline-block; font: 800 .66rem var(--font-body); text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 99px; background: #e4f1fb; color: #1f5f99; vertical-align: 1px; }
.lt-tag.free { background: #e3f4e6; color: #226b3c; }
@media (max-width: 600px) { .lt-account-email { max-width: 140px; } }
.lt-invites { background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; text-align: left; width: 100%; }
.lt-invites summary { cursor: pointer; font-weight: 800; font-family: var(--font-head); }
.lt-invites ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.lt-invites li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px dashed var(--border); padding-top: 10px; }
.lt-invites li .lt-fine { display: block; }
.lt-invite-link code { display: block; word-break: break-all; background: var(--cream-2); padding: 8px 10px; border-radius: 10px; font-size: .8rem; }

/* ---------- Outline drafts, painter & Google Sheet import ---------- */
.lt-banner.draft { background: #f3f0ff; border-color: #d8cff8; }
.lt-banner.draft.warn { background: #fff6d9; border-color: #f6d27a; }
.lt-banner .lt-banner-actions { flex: 0 1 auto; min-width: 0; gap: 8px; }
.lt-paint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; margin: 0 0 10px; }
.lt-paint-label { font: 800 .95rem var(--font-head); margin-right: 4px; }
.lt-brush { font: 700 .84rem var(--font-body); padding: 7px 12px; border-radius: 10px; border: 2px solid #d5cdbd; background: #fff; cursor: pointer; transition: transform .15s var(--ease); }
.lt-brush:hover { transform: translateY(-1px); }
.lt-brush.b-start { background: var(--cream-2); }
.lt-brush.b-green { background: var(--s-green); } .lt-brush.b-yellow { background: var(--s-yellow); } .lt-brush.b-grey { background: var(--s-grey); }
.lt-brush.b-auto { background: repeating-linear-gradient(45deg, #fff 0 6px, #f1ede4 6px 12px); }
.lt-brush.on { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--ink); }
.lt-sheet-wrap.is-painting { box-shadow: 0 0 0 3px var(--orange); }
.lt-sheet-wrap.is-painting .lt-cell { cursor: crosshair; }
.lt-import-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 12px; font-size: .92rem; }
.lt-import-stats span { display: inline-flex; align-items: center; gap: 6px; }
.lt-mini-wrap { max-height: 46vh; overflow: auto; border: 2px solid var(--border); border-radius: var(--r-md); background: #fff; margin-bottom: 12px; }
.lt-mini { border-collapse: collapse; width: 100%; font-size: .78rem; }
.lt-mini thead th { position: sticky; top: 0; background: var(--sheet-blue); color: #fff; padding: 4px; z-index: 1; }
.lt-mini th { text-align: left; font-weight: 700; padding: 2px 8px; white-space: nowrap; }
.lt-mini .lt-mini-d th { background: var(--sheet-orange); color: #fff; font-family: var(--font-head); }
.lt-mini td { padding: 2px; text-align: center; }
.lt-mini td i { display: block; width: 100%; min-width: 18px; height: 16px; border-radius: 4px; border: 1px solid #c9c9c9; }
.lt-mini td i.unmarked { background: #fff; border-style: dashed; }
@media (max-width: 600px) { .lt-paint-label { width: 100%; } .lt-mini th { white-space: normal; min-width: 110px; } }

/* "Explore" (sample student) button on the sign-in page: big, and wraps on small screens */
.lt-demo-btn { font-size: 1.25rem; min-height: 68px; padding: 16px 34px; margin-top: 6px; white-space: normal; text-wrap: balance; line-height: 1.3; max-width: 100%; text-align: center; }
@media (max-width: 600px) { .lt-demo-btn { font-size: 1.05rem; padding: 14px 20px; width: 100%; } }

/* ---------- Domain arrows on the Level Map (one domain at a time) ---------- */
.lt-domnav { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.lt-domnav-arrow { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 1.2rem; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--ease), background .2s; }
.lt-domnav-arrow:hover:not([disabled]) { transform: scale(1.06); background: var(--cream-2); }
.lt-domnav-arrow[disabled] { opacity: .35; cursor: default; }
.lt-domnav-mid { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: center; text-align: center; }
.lt-dom-select { width: 100%; max-width: 460px; font: 800 1.05rem var(--font-head); text-align: center; }
.lt-domnav-count { font-size: .82rem; color: var(--ink-soft); }
.lt-domnav-bottom { justify-content: space-between; flex-wrap: wrap; margin: 12px 0 0; }
.lt-domnav-bottom .btn { max-width: 48%; white-space: normal; text-align: left; line-height: 1.25; }
.lt-domnav-bottom .btn-primary { text-align: right; margin-left: auto; }
@media (max-width: 600px) { .lt-domnav-arrow { width: 44px; height: 44px; } .lt-dom-select { font-size: .95rem; } .lt-domnav-bottom .btn { max-width: 100%; } }
@media print { .lt-domnav { display: none; } }

/* ---------- Recommended next skills ---------- */
.lt-recs { background: #fff; border: 2px solid #f6d27a; border-radius: var(--r-md); padding: 10px 14px 12px; margin: 0 0 14px; box-shadow: var(--shadow-sm); }
.lt-recs > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 800 1.12rem var(--font-head); list-style-position: inside; }
.lt-recs > summary small { font: 600 .84rem var(--font-body); color: var(--ink-soft); }
.lt-recs[open] > summary { margin-bottom: 10px; }
.lt-recs[open] > summary small { display: none; }
.lt-recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lt-recs-note { margin: -4px 0 12px; }
.lt-rec { display: flex; flex-direction: column; gap: 6px; background: var(--cream); border: 2px solid var(--border); border-radius: var(--r-md); padding: 12px; }
.lt-rec.k-focus, .lt-rec.k-practice { border-color: #f6d27a; background: linear-gradient(160deg, #fff6d9, #fff 70%); }
.lt-rec header { display: flex; align-items: center; gap: 10px; }
.lt-rec header b { display: block; font-family: var(--font-head); line-height: 1.2; }
.lt-rec header small { color: var(--ink-soft); font-size: .82rem; }
.lt-rec-top { margin-left: auto; align-self: flex-start; font: 800 .68rem var(--font-body); text-transform: uppercase; letter-spacing: .05em; background: var(--orange); color: #fff; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.lt-rec-text { margin: 0; font-size: .92rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lt-rec-why { margin: 0; font-size: .84rem; font-weight: 700; color: #8a5a00; }
.lt-rec-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 4px; }
.lt-legend-next { color: var(--orange); font-size: .8rem; }
.lt-dr-body > .lt-rec-why { background: #fff6d9; border: 1px solid #f6d27a; border-radius: 10px; padding: 8px 12px; }
@media (max-width: 600px) { .lt-recs-grid { grid-template-columns: 1fr; } }
@media print { .lt-rec-actions, .lt-recs > summary small { display: none; } .lt-rec { break-inside: avoid; } }

/* ---------- Subjects (Math / Reading) ---------- */
.lt-subjects { display: inline-flex; gap: 6px; padding: 5px; background: var(--cream-2); border-radius: var(--r-pill); margin: 4px 0 10px; }
.lt-subject { font: 800 1rem var(--font-head); padding: 9px 20px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s; }
.lt-subject.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.lt-cell.s-na { background: repeating-linear-gradient(135deg, #faf8f3 0 8px, #f1ede4 8px 16px); color: #a59c8b; cursor: default; display: grid; place-items: center; min-height: 86px; font-size: .78rem; text-align: center; }
.lt-tabs { flex-wrap: wrap; }

/* ---------- Reading: checks ---------- */
.lt-adult { display: inline-block; margin: 0 0 8px; font-weight: 800; font-size: .88rem; color: #1f5f99; background: #e4f1fb; border-radius: 99px; padding: 4px 12px; }
.lt-qtext { background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; margin: 0 0 12px; max-height: 38vh; overflow: auto; font-size: 1.05rem; line-height: 1.6; text-align: left; }
.lt-qtext p { margin: 0 0 .7em; white-space: pre-line; } /* poems and dictionary entries keep their line breaks */ .lt-qtext p:last-child { margin: 0; }
.lt-qbig { font: 800 clamp(2.6rem, 9vw, 4.6rem) var(--font-head); text-align: center; letter-spacing: .02em; margin: 6px 0 16px; padding: 18px 10px; background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); overflow-wrap: anywhere; line-height: 1.15; }
.lt-qbig:has(+ .lt-opts.is-adult) { min-height: 110px; }
.lt-say { font: 800 .9rem var(--font-body); margin-left: 8px; padding: 6px 14px; border-radius: 99px; border: 2px solid #c9e0f5; background: #eef6fd; color: #1f5f99; cursor: pointer; vertical-align: middle; }
.lt-say:hover { background: #dcecfa; }
.lt-hear-help { font-size: .82rem; color: var(--ink-soft); margin: 0 0 10px; }
.lt-hear-help summary { cursor: pointer; }
.lt-hear-help b { display: block; font-size: 1.4rem; color: var(--ink); margin-top: 4px; }
.lt-hear-help .lt-fine { display: block; }
/* ---------- Notes ---------- */
.lt-notes-view { display: grid; gap: 14px; }
.lt-notes-view .lt-banner { margin-bottom: 0; }
.lt-note-add { display: grid; gap: 8px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-sm); }
.lt-note-add label { font: 700 1rem var(--font-head); }
.lt-note-add textarea, .lt-add-form textarea { width: 100%; min-height: 84px; resize: vertical; font: inherit; line-height: 1.45; padding: 10px 12px; border: 2px solid var(--border); border-radius: var(--r-sm, 10px); background: #fff; color: var(--ink); }
.lt-note-add textarea:focus, .lt-add-form textarea:focus { outline: 3px solid rgba(236, 124, 42, .35); border-color: var(--orange); }
.lt-note-list { display: grid; gap: 10px; }
.lt-tnote { background: var(--surface); border: 2px solid var(--border); border-left: 6px solid var(--amber); border-radius: var(--r-md); padding: 10px 14px; }
.lt-tnote header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .86rem; color: var(--ink-soft); }
.lt-tnote header b { color: var(--ink); font-family: var(--font-head); }
.lt-tnote p { margin: 6px 0 0; white-space: normal; overflow-wrap: anywhere; }
.lt-note-actions { margin-left: auto; display: inline-flex; gap: 12px; }
.lt-chk-notes { min-width: 150px; max-width: 280px; font-size: .86rem; }
.lt-chk-note { display: block; overflow-wrap: anywhere; }
.lt-note-table td:last-child { min-width: 200px; }
.lt-std-note { margin: 6px 0 0; padding: 6px 10px; background: #fff8e1; border-left: 4px solid var(--amber); border-radius: 6px; font-size: .88rem; overflow-wrap: anywhere; }
@media print { .lt-note-add, .lt-note-actions, .lt-notes-view .lt-banner { display: none; } }
.lt-sheetlink { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; padding: 8px 12px; background: #eef6fd; border: 2px solid #c9e0f5; border-radius: var(--r-md); font-size: .9rem; }
@media print { .lt-sheetlink { display: none; } }
.lt-opts.is-adult { grid-template-columns: 1fr 1fr; }
.lt-opts.is-adult .lt-opt { justify-content: center; font-size: 1.15rem; min-height: 64px; }
.lt-opts.is-adult .lt-opt-key { display: none; }

/* ---------- Reading: Level checklist ---------- */
.lt-lvtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.lt-lvtab { display: grid; gap: 1px; justify-items: center; min-width: 58px; padding: 7px 10px; border-radius: 12px; border: 2px solid var(--border); background: #fff; cursor: pointer; font-family: var(--font-head); }
.lt-lvtab b { font-size: 1rem; } .lt-lvtab small { font: 600 .7rem var(--font-body); color: var(--ink-soft); }
.lt-lvtab.some { background: var(--s-yellow); border-color: #e8c96a; } .lt-lvtab.done { background: var(--s-green); border-color: #8fbf7f; }
.lt-lvtab.on { outline: 3px solid var(--orange); outline-offset: 1px; }
.lt-chk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 6px; }
.lt-chk-head h2 { font-size: 1.6rem; margin: 0; } .lt-chk-head p { flex-basis: 100%; margin: 0; }
.lt-chk { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
.lt-chk th, .lt-chk td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.lt-chk thead th { background: #ffc72c; color: #1f1f1f; font-family: var(--font-head); white-space: nowrap; }
.lt-chk thead th small { display: block; font: 600 .7rem var(--font-body); opacity: .8; }
.lt-chk tbody th { font-family: var(--font-head); background: #fbe4d5; }
.lt-chk td small { display: block; color: var(--ink-soft); font-size: .78rem; margin-top: 2px; }
.lt-chk tr.is-mastered td { background: #eef7ea; } .lt-chk tr.is-started td { background: #fffaea; }
.lt-chk-check { white-space: nowrap; } .lt-chk-date { color: var(--ink-soft); font-size: .82rem; } .lt-chk-pct { font-family: var(--font-head); }
.lt-chk-status { font: 800 1.1rem var(--font-head); text-align: center !important; color: var(--s-green-ink); }
.lt-chk-act { white-space: nowrap; text-align: right !important; }
.lt-chk-act .lt-link { font-size: .8rem; }
.lt-lexile { display: inline-flex; gap: 6px; align-items: center; }
.lt-lexile input { width: 96px; font: 600 .95rem var(--font-body); padding: 7px 9px; border: 2px solid var(--border); border-radius: 10px; }
.lt-checklist .lt-h3 { margin: 18px 0 8px; }

/* ---------- Reading: words per minute ---------- */
.lt-wpm .lt-focus-card { margin-bottom: 10px; }
.lt-wpm-chart { margin: 14px 0; background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 10px 12px 6px; }
.lt-wpm-chart svg { width: 100%; height: auto; display: block; }
.lt-wpm-chart .target { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 6 5; }
.lt-wpm-chart .tlabel { font: 700 12px var(--font-body); fill: var(--orange-deep); }
.lt-wpm-chart .line { fill: none; stroke: #2e75b6; stroke-width: 3; stroke-linejoin: round; }
.lt-wpm-chart .dot { fill: #2e75b6; stroke: #fff; stroke-width: 2; }
.lt-wpm-chart .vlabel { font: 800 12px var(--font-head); fill: var(--ink); }
.lt-modal.is-wpm .lt-modal-card { width: min(860px, 100%); }
.lt-wt-intro { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 14px 6px 6px; }
.lt-wt-intro h2 { margin: 0; font-size: 1.6rem; } .lt-wt-intro p { margin: 0; max-width: 56ch; }
.lt-wt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 8px 0 10px; }
.lt-wt-clock { font: 800 1.5rem var(--font-head); font-variant-numeric: tabular-nums; }
.lt-wt-clock.over { color: var(--orange-deep); }
.lt-wt-text { background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; max-height: 58vh; overflow: auto; font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 2; text-align: left; }
.lt-w { border-radius: 6px; padding: 1px 2px; cursor: pointer; }
.lt-wt-text .lt-w:hover { background: var(--cream-2); }
.lt-w.err { background: #fbd5d5; color: #a11; text-decoration: line-through; }
.lt-wt-text.is-last .lt-w.last { background: var(--orange); color: #fff; }
.lt-para { display: block; height: .6em; }
.lt-wt-qs { display: grid; gap: 14px; padding: 8px 0; } .lt-wt-qs h2 { margin: 0; font-size: 1.3rem; }
.lt-wt-q { border: 0; padding: 0; margin: 0; } .lt-wt-q legend { font-weight: 800; margin-bottom: 8px; }
.lt-wt-big { display: grid; justify-items: center; margin: 6px 0 4px; }
.lt-wt-big b { font: 800 clamp(3.4rem, 12vw, 5.5rem) var(--font-head); line-height: 1; color: var(--orange-deep); }
.lt-wt-big span { font-weight: 700; color: var(--ink-soft); }
.lt-pace-rate { display: flex; align-items: center; gap: 16px; }
.lt-pace-rate b { display: block; font: 800 3rem var(--font-head); line-height: 1; } .lt-pace-rate span { font-size: .85rem; color: var(--ink-soft); }
.lt-pace-box { position: relative; height: min(56vh, 440px); overflow: hidden; background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); }
.lt-pace-box::before { content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 2.4em; transform: translateY(-50%); background: #fff6d9; border-top: 2px solid #f6d27a; border-bottom: 2px solid #f6d27a; font-size: clamp(1.25rem, 3vw, 1.7rem); }
.lt-pace-box::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#fff 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 68%, #fff 100%); }
.lt-pace-text { position: relative; padding: 0 22px; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 2.1; text-align: left; will-change: transform; }
.lt-pace-text .lt-w { cursor: default; color: #5c5446; }
.lt-pace-text .lt-w.past { color: #b9b1a2; }
.lt-pace-text .lt-w.cur { background: var(--orange); color: #fff; }
@media (max-width: 700px) {
  .lt-chk thead { display: none; }
  .lt-chk, .lt-chk tbody, .lt-chk tr, .lt-chk td, .lt-chk tbody th { display: block; width: 100%; }
  .lt-chk tr { border: 2px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
  .lt-chk td, .lt-chk tbody th { border: 0; padding: 6px 12px; }
  .lt-chk:not(.lt-note-table) td:first-child { display: none; }
  .lt-chk-notes { max-width: none; min-width: 0; }
  .lt-chk-act { text-align: left !important; white-space: normal; }
  .lt-chk td[data-label]::before { content: attr(data-label) ': '; font-weight: 700; }
  .lt-chk-status { text-align: left !important; }
  .lt-subject { padding: 8px 14px; font-size: .92rem; }
}
@media print { .lt-subjects, .lt-lvtabs, .lt-chk-act, .lt-chk:not(.lt-note-table) thead th:last-child { display: none !important; } }
.lt-chk:not(.lt-chk-metrics) td:nth-child(2) { width: 38%; min-width: 220px; }
.lt-chk-metrics tbody th { width: 26%; min-width: 180px; }
@media (max-width: 700px) { .lt-chk:not(.lt-chk-metrics) td:nth-child(2), .lt-chk-metrics tbody th { width: 100%; min-width: 0; } }

/* words of the timed read are buttons (keyboard-friendly) that still look like text */
button.lt-w { font: inherit; color: inherit; background: none; border: 0; margin: 0; line-height: inherit; }
button.lt-w:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
button.lt-w.err { background: #fbd5d5; color: #a11; }
.lt-wt-text.is-last button.lt-w.last { background: var(--orange); color: #fff; }
/* adult-scored items: letters and words are huge, phrases smaller, sentences smaller still */
.lt-qbig.is-mid { font-size: clamp(1.9rem, 6vw, 2.9rem); }
.lt-qbig.is-long { font: 700 clamp(1.15rem, 3.4vw, 1.5rem) var(--font-body); letter-spacing: 0; text-align: left; line-height: 1.45; padding: 14px 16px; }
@media (max-width: 600px) { .lt-tabs { gap: 2px; } .lt-tab { padding: 8px 12px; font-size: .88rem; white-space: nowrap; } }