/* Spark Study Lab */
.lab-card { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: color-mix(in oklab, var(--ta) 5%, var(--sheet)); margin-top: 8px; }
.lab-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lab-row label { display: grid; gap: 2px; font-size: 12px; font-weight: 700; }
.lab-row input[type=number] { width: 92px; }
.lab-mode { font-size: 1rem; text-align: center; }
.lab-time { font: 800 3.2rem var(--f-mono); text-align: center; letter-spacing: .04em; line-height: 1.1; }
.lab-track { height: 10px; border-radius: 999px; background: color-mix(in oklab, var(--ta) 14%, var(--sheet)); overflow: hidden; }
.lab-track.small { height: 6px; }
.lab-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ta), var(--tb)); transition: width .4s linear; }
.lab-fill.goal { background: linear-gradient(90deg, #22c55e, #14b8a6); }
.lab-hint { color: var(--muted); font-size: 13px; margin: 0; }
.lab-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font-weight: 700; cursor: pointer; }
.lab-chip.on { background: color-mix(in oklab, var(--ta) 24%, var(--sheet)); border-color: var(--ta); color: var(--ta); }
.lab-flash { border: 2px solid var(--ta); border-radius: 16px; padding: 16px; background: var(--sheet); display: grid; gap: 6px; min-height: 120px; }
.lab-flash p { margin: 0; font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.lab-flash small { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.lab-ans { color: #16a34a; }
.lab-study { display: grid; gap: 8px; }
.lab-det { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--sheet); }
.lab-det summary { font-weight: 800; cursor: pointer; padding: 4px 0; }
.lab-cardrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lab-cardrow span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.lab-cardrow small { color: var(--muted); }
.lab-x { border: 0; background: transparent; color: #dc2626; font-weight: 800; cursor: pointer; padding: 6px; }
.lab-result { border-radius: 14px; padding: 12px; background: color-mix(in oklab, var(--ta) 10%, var(--sheet)); display: grid; gap: 4px; }
.lab-result .ok { color: #16a34a; font-size: 1.2rem; }
.lab-result .bad { color: #dc2626; font-size: 1.2rem; }
.lab-result small { color: var(--muted); }
.lab-body textarea { width: 100%; }
@media (max-width: 900px) {
  .hdr-actions .chip.tool#labBtn { grid-column: 1 / -1; flex-direction: row; gap: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 800;
    background: linear-gradient(135deg, rgb(255 255 255 / .3), rgb(255 255 255 / .12)); border-color: #fff; }
  .hdr-actions .chip.tool#labBtn .ci { font-size: 20px; }
}

/* power tools */
.tl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.tl-tile { display: grid; gap: 2px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklab, var(--ta) 6%, var(--sheet)); color: inherit; cursor: pointer; }
.tl-tile:active { background: color-mix(in oklab, var(--ta) 18%, var(--sheet)); }
.tl-ic { font-size: 1.6rem; }
.tl-tile small { color: var(--muted); }
.tl-expr { width: 100%; font: 600 1.15rem var(--f-mono); }
.tl-preview { min-height: 1.6em; font: 800 1.3rem var(--f-mono); color: var(--ta); overflow-wrap: anywhere; }
.tl-preview.err { color: #dc2626; font-size: .9rem; }
.tl-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tl-key { padding: 12px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font-weight: 800; cursor: pointer; }
.tl-key.op { background: color-mix(in oklab, var(--ta) 16%, var(--sheet)); }
.tl-key:active { background: color-mix(in oklab, var(--ta) 30%, var(--sheet)); }
.tl-hist { display: grid; gap: 4px; }
.tl-h { text-align: left; border: 0; background: transparent; color: var(--muted); font: 500 12px var(--f-mono); cursor: pointer; padding: 3px 0; }
.tl-canvas { width: 100%; height: auto; border-radius: 12px; background: var(--sheet); border: 1px solid var(--line); touch-action: none; }
.tl-fnrow { display: flex; align-items: center; gap: 8px; }
.tl-fn { flex: 1; font: 600 1rem var(--f-mono); }
.tl-trow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.tl-trow span { color: var(--muted); font-size: 13px; }
.tl-trow strong { font-family: var(--f-mono); text-align: right; }
.tl-table { display: grid; }
.tl-mat { display: grid; gap: 4px; }
.tl-mat input { width: 100%; min-width: 0; padding: 6px 4px; text-align: center; }
.tl-mat.out span { text-align: center; font: 600 .95rem var(--f-mono); padding: 6px 2px; background: var(--sheet); border-radius: 8px; overflow-wrap: anywhere; }
.tl-float { display: grid; gap: 4px; margin-bottom: 6px; }
.tl-bits { font: 700 .9rem var(--f-mono); overflow-wrap: anywhere; letter-spacing: .04em; }
.tl-bits .s { color: #dc2626; } .tl-bits .e { color: #2563eb; } .tl-bits .m { color: #16a34a; }
.lab-card input[type=text], .lab-card input[type=number], .lab-card select, .lab-card textarea { min-width: 0; max-width: 100%; }

/* logic lab and electronics */
.tl-tt { border-collapse: collapse; margin: 6px 0; font: 600 .9rem var(--f-mono); }
.tl-tt th, .tl-tt td { border: 1px solid var(--line); padding: 3px 9px; text-align: center; }
.tl-tt th { background: color-mix(in oklab, var(--ta) 12%, var(--sheet)); }
.tl-tt tr.one td.out { background: color-mix(in oklab, #22c55e 25%, var(--sheet)); font-weight: 800; }
.tl-km { border-collapse: collapse; margin: 6px 0; }
.tl-km th, .tl-km td { border: 1px solid var(--line); text-align: center; min-width: 52px; padding: 5px 2px; }
.tl-km th { background: color-mix(in oklab, var(--ta) 12%, var(--sheet)); font: 600 .8rem var(--f-mono); }
.tl-km td b { display: block; font-size: 1.1rem; }
.tl-km td small { color: var(--muted); font-size: 9px; }
.tl-km td.one { background: color-mix(in oklab, #22c55e 28%, var(--sheet)); }
.tl-km td.dc { background: color-mix(in oklab, #f59e0b 28%, var(--sheet)); }
.tl-resistor { display: flex; gap: 10px; justify-content: center; align-items: center; height: 46px; padding: 0 22px; margin: 6px auto; width: max-content; max-width: 100%; border-radius: 23px; background: #d6b88a; box-shadow: inset 0 0 0 2px rgb(0 0 0 / .15); }
.tl-band { width: 14px; height: 100%; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.lab-body { overflow-x: auto; }

/* life tools */
.tl-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.tl-col { display: grid; gap: 6px; align-content: start; background: var(--sheet); border-radius: 10px; padding: 6px; min-width: 0; }
.tl-col > strong { font-size: 12px; }
.tl-task { display: grid; gap: 4px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg, #fff); font-size: 13px; overflow-wrap: anywhere; }
.tl-task.late { border-color: #dc2626; }
.tl-task small { color: var(--muted); }
.tl-habit { margin: 8px 0; }
.tl-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tl-dot { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); font: 600 11px var(--f-mono); color: var(--muted); cursor: pointer; }
.tl-dot.on { background: #22c55e; color: #fff; border-color: #16a34a; }
.tl-dot.today { outline: 2px solid var(--ta); }
.tl-pw { font: 700 1.15rem var(--f-mono); overflow-wrap: anywhere; padding: 10px; border-radius: 10px; background: var(--sheet); user-select: all; }
.tl-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 500 .85rem var(--f-mono); background: var(--sheet); padding: 8px; border-radius: 8px; max-height: 260px; overflow: auto; margin: 6px 0; }
.tl-hash { font-size: 10px; word-break: break-all; }
.devid { font: 600 .9rem var(--f-mono); overflow-wrap: anywhere; }
.lab-det summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
.lab-x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; }

/* focus mode */
#focusBtn.on { background: #16a34a; border-color: #fff; color: #fff; }
@media (max-width: 900px) {
  .hdr-actions .chip.tool#focusBtn { grid-column: 1 / -1; flex-direction: row; gap: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; }
}
body.focus .tabs button[data-tab="ideas"], body.focus .tabs button[data-tab="clubs"], body.focus .tabs button[data-tab="challenges"],
body.focus .tabs button[data-tab="market"], body.focus .tabs button[data-tab="jobs"],
body.focus #funBtn, body.focus #storyBar { display: none !important; }

/* college switcher and college-specific hiding */
.college-btn { margin: 4px 0 2px; padding: 3px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .55); background: rgb(255 255 255 / .14); color: #fff; font: 700 12px system-ui; cursor: pointer; }
.college-list { display: grid; gap: 6px; margin: 8px 0; }
.college-list .campus-link.sel { outline: 2px solid var(--accent, #7c3aed); }
body.no-bot #botBtn, body.no-bot #sbw, body.no-alumni #alumniBtn, body.no-fun #funBtn,
body.no-jobs .tabs button[data-tab="jobs"], body.no-market .tabs button[data-tab="market"], body.no-challenges .tabs button[data-tab="challenges"] { display: none !important; }

/* no college chosen yet: show only the header and the college picker */
body.nocollege .tabs, body.nocollege .hdr-actions, body.nocollege #bottomNav, body.nocollege .rail, body.nocollege .listcol,
body.nocollege #storyBar, body.nocollege #sbw, body.nocollege #trendBar, body.nocollege .exams { display: none !important; }
body.nocollege .layout { display: block; }

/* college picker: colour badge per college, nothing wider than the screen */
.college-list { grid-template-columns: minmax(0, 1fr); }
.college-list .campus-link, #sheet select, #sheet input[type=search] { box-sizing: border-box; max-width: 100%; min-width: 0; }
#sheet select, #sheet input[type=search] { width: 100%; }
.col-row { display: flex !important; align-items: center; gap: 12px; border-left: 5px solid var(--row, var(--line)) !important; }
.col-badge { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font: 800 .9rem system-ui; letter-spacing: .02em; text-shadow: 0 1px 2px rgb(0 0 0 / .3); box-shadow: 0 6px 14px -8px var(--row, #000); }
.col-text { min-width: 0; display: grid; gap: 2px; }
.col-row strong { white-space: normal !important; overflow-wrap: anywhere; }
.col-row small { overflow-wrap: anywhere; }
body.tenant header.top { box-shadow: inset 0 6px 0 var(--brand-a), 0 18px 40px -18px color-mix(in oklab, var(--brand-a) 60%, transparent); }
body.tenant .college-btn { background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); border-color: rgb(255 255 255 / .8); }

/* streaks, frames, share */
.streak-chip { margin: 4px 0 2px 6px; padding: 3px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .7); background: rgb(0 0 0 / .22); color: #fff; font: 800 12px system-ui; cursor: pointer; }
.streak-chip.risk { animation: skrisk 1.6s ease-in-out infinite; border-color: #fde047; }
@keyframes skrisk { 50% { box-shadow: 0 0 0 5px rgb(253 224 71 / .35); } }
.sk-dots { display: flex; gap: 6px; margin: 8px 0; }
.sk-dot { flex: 1; height: 34px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--line); display: grid; place-items: center; font-size: 16px; }
.sk-dot.on { background: linear-gradient(135deg, #f59e0b, #ef4444); border-color: transparent; }
.sk-dot.today { outline: 2px solid var(--accent, #7c3aed); }
.fr-t1 { box-shadow: 0 0 0 3px #cd7f32; } .fr-t2 { box-shadow: 0 0 0 3px #cbd5e1, 0 0 0 6px #94a3b8; }
.fr-t3 { box-shadow: 0 0 0 3px #facc15, 0 0 12px 4px rgb(250 204 21 / .6); }
.fr-t4 { box-shadow: 0 0 0 3px #67e8f9, 0 0 14px 5px rgb(103 232 249 / .7); }
.fr-t5 { box-shadow: 0 0 0 3px #f472b6, 0 0 14px 5px rgb(167 139 250 / .7); animation: frhue 4s linear infinite; }
.fr-t6 { box-shadow: 0 0 0 4px #fde047, 0 0 18px 7px rgb(251 146 60 / .8); animation: frhue 3s linear infinite; }
@keyframes frhue { to { filter: hue-rotate(360deg); } }