/* Shared styles for Interview Intelligence: the hub (interview.html) and all 5 dedicated
   track pages (interview-<id>.html). Split out of interview.html so the content-heavy rules
   (question bank, drill, cases, sheets, mcq, firm guides) aren't duplicated across 6 files. */

main.wide{max-width:1000px}
.ivhero{margin:6px 0 18px}
.ivhero h1{margin:0 0 8px}
.ivhero p{color:var(--ink2);font-size:15.5px;line-height:1.55;max-width:64ch;margin:0}
.ivstat{display:inline-flex;gap:18px;margin-top:14px;flex-wrap:wrap;font-size:13.5px;color:var(--mute);font-weight:600}
.ivstat b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}

/* process overview - collapsed into a toggle by default so questions lead */
.proctoggle{margin:0 0 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.proctoggle>summary{list-style:none;cursor:pointer;padding:12px 15px;font-size:13.5px;font-weight:700;color:var(--ink2);display:flex;align-items:center}
.proctoggle>summary::-webkit-details-marker{display:none}
.proctoggle>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);margin-left:auto;transition:transform var(--t-fast,.16s) var(--ease,ease)}
.proctoggle[open]>summary::after{transform:rotate(-135deg)}
.proctoggle>summary:hover{color:var(--accent)}
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:2px 15px 15px}
@media(max-width:720px){.proc{grid-template-columns:1fr}}
.proccard{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.proccard .h{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 7px}
.proccard p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2)}

/* mode switcher (segmented) - kept compact & secondary */
.modebar{display:inline-flex;gap:3px;background:var(--line2);border-radius:10px;padding:3px;margin:0 0 16px;flex-wrap:wrap;max-width:100%}
.modebar button{flex:0 1 auto;border:none;background:none;border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--mute);cursor:pointer;font-family:var(--sans);display:flex;align-items:center;justify-content:center;gap:6px}
.modebar button.on{background:var(--panel);color:var(--accent);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.modebar button svg{width:14px;height:14px}

.secintro{color:var(--mute);font-size:13.5px;margin:0 0 14px;line-height:1.5}

/* filters */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filters select{padding:8px 30px 8px 11px;font-size:13px;border-radius:9px;max-width:210px}
.dchips{display:flex;gap:6px;flex-wrap:wrap}
.dchip{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer;font-family:var(--sans)}
.dchip.on{border-color:var(--accent2);color:var(--accent);background:var(--accent-soft)}

/* difficulty badges */
.diff{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.02em;border-radius:6px;padding:3px 8px;white-space:nowrap}
.d-Core{color:#157a52;background:#e7f1ea}
.d-Intermediate{color:#17416e;background:#eef2f7}
.d-Hard{color:#8a6410;background:#f6efdd}
.d-Advanced{color:#b5561f;background:#f6e7dd}
.d-Expert{color:#7a3ea8;background:#efe6f6}
:root[data-theme="dark"] .d-Core{color:#4fbf8f;background:#14261e}
:root[data-theme="dark"] .d-Intermediate{color:#7aa8dd;background:#182533}
:root[data-theme="dark"] .d-Hard{color:#d4a24a;background:#2a2213}
:root[data-theme="dark"] .d-Advanced{color:#e2915f;background:#2a1c12}
:root[data-theme="dark"] .d-Expert{color:#c08fdc;background:#241830}

/* topic groups (collapsible, labelled) - keep the bank organised, not an endless scroll */
.expall{margin-left:auto;border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:5px 13px;font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer;font-family:var(--sans)}
.expall:hover{border-color:var(--accent2);color:var(--accent)}
.qgroups{display:flex;flex-direction:column;gap:10px}
.qgroup{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.qghead{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;user-select:none;transition:background-color .13s ease}
.qghead:hover{background:var(--accent-soft)}
.qgname{flex:1;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);min-width:0}
.qgcount{flex:none;font-size:11px;font-weight:800;color:var(--accent);background:var(--accent-soft);border-radius:20px;padding:2px 10px;font-variant-numeric:tabular-nums}
.qgchev{flex:none;color:var(--mute);transition:transform var(--t-fast,.16s) var(--ease,ease)}
.qgroup.open .qgchev{transform:rotate(180deg)}
.qgbody{display:none;flex-direction:column;gap:8px;padding:10px;border-top:1px solid var(--line2,var(--line))}
.qgroup.open .qgbody{display:flex}
.qgbody .qhidden{display:none}
.qgroup.qshowall .qgbody .qhidden{display:block}
.showall{align-self:flex-start;margin-top:2px;border:1px dashed var(--accent2);background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.showall:hover{background:var(--panel)}
.qgbody .qitem{border-color:var(--line2,var(--line))}
/* question accordion */
.qhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 12px}
.qhead h2{margin:0;font-size:17px}
.qhead .n{font-size:13px;color:var(--mute);font-weight:600}
.qlist{display:flex;flex-direction:column;gap:10px}
.qitem{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qtop{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;cursor:pointer;user-select:none}
.qtop:hover{background:var(--accent-soft)}
.qtag{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft,#e8f0fb);border-radius:6px;padding:3px 8px;margin-top:1px}
.qtxt{flex:1;font-weight:700;font-size:14.5px;line-height:1.4;color:var(--ink);min-width:0}
.qchev{flex:none;color:var(--mute);transition:transform var(--t-fast,.16s) var(--ease,ease);margin-top:2px}
.qitem.open .qchev{transform:rotate(180deg)}
.qans{display:none;padding:0 16px 16px 16px;font-size:14px;line-height:1.65;color:var(--ink2)}
.qitem.open .qans{display:block}
.qans .lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin:2px 0 6px}
.qblur .qtop{cursor:default}
.qblur .qtop:hover{background:transparent}
.qblur .qtag,.qblur .qtxt{filter:blur(4.5px);user-select:none;pointer-events:none}
.qblur .qlk{flex:none;color:var(--accent)}
.qmore{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft,#e8f0fb);border:1px solid var(--accent2);border-radius:8px;padding:14px 18px;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.qmore a{background:var(--accent);color:#fff;border-radius:9px;padding:9px 18px;font-weight:800;font-size:13.5px;text-decoration:none;white-space:nowrap}
.qmore a:hover{background:var(--accent2)}
/* one calm, quiet unlock line under the free questions */
.unlockline{margin:16px 2px 2px;font-size:13px;color:var(--mute);font-weight:600;text-align:center}
.unlockline a{color:var(--accent);font-weight:800;white-space:nowrap;text-decoration:none}
.unlockline a:hover{text-decoration:underline}
/* one CTA per gated section (cases / cheat-sheets) instead of repeating it per item */
.sectcta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent2);border-radius:10px;padding:12px 15px;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--ink2)}
.sectcta .g{flex:1;min-width:160px}
.sectcta a{background:var(--accent);color:#fff;border-radius:9px;padding:8px 16px;font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}
.sectcta a:hover{background:var(--accent2)}
.caselock{margin-top:12px;font-size:12.5px;color:var(--mute);font-weight:700}
.sheetlist{display:flex;flex-direction:column;gap:8px}
.sheetrow{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.sheetrow .sp{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:3px 8px;flex:none}
.sheetrow .st{font-weight:700;font-size:14px;color:var(--ink)}
.sheetrow .lk{margin-left:auto;color:var(--mute);flex:none}

/* drill (flashcard) */
.drill{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;max-width:640px}
.drill .meta{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.drill .prog{margin-left:auto;font-size:12.5px;color:var(--mute);font-weight:700;font-variant-numeric:tabular-nums}
.drill .dq{font-size:17px;font-weight:700;line-height:1.4;color:var(--ink);margin:2px 0 16px}
.drill .da{font-size:14px;line-height:1.65;color:var(--ink2);border-top:1px solid var(--line2);padding-top:14px;margin-bottom:16px;display:none}
.drill.revealed .da{display:block}
.drill .acts{display:flex;gap:10px;flex-wrap:wrap}
.drill .acts .grow{flex:1}
.drill-done{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px;max-width:640px;text-align:center}
.drill-done h3{margin:0 0 6px}
.drill-done p{color:var(--ink2);margin:0 0 16px}

/* mock interview (branching, scripted chat) */
.mocklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mockcard{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;font-family:var(--sans);display:flex;flex-direction:column;gap:8px;transition:border-color .16s ease}
.mockcard:hover:not(.lk){border-color:var(--accent2)}
.mockcard.lk{cursor:default}
.mockcard .top{display:flex;align-items:center;gap:8px}
.mockcard .mc-title{font-weight:800;font-size:14.5px;color:var(--ink);letter-spacing:-.01em}
.mockcard .mc-go{font-size:12.5px;font-weight:800;color:var(--accent)}
.mockback{background:none;border:none;padding:0 0 12px;font-size:13px;font-weight:700;color:var(--mute);cursor:pointer;font-family:var(--sans)}
.mockback:hover{color:var(--accent)}
.mockchat{display:flex;flex-direction:column;gap:10px;max-width:640px;margin-bottom:16px}
.mockmsg{max-width:80%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55}
.mockmsg.interviewer{align-self:flex-start;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.mockmsg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.mockinputrow{display:flex;gap:10px;max-width:640px}
.mockinputrow input{flex:1;border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:14px;font-family:var(--sans);background:var(--panel);color:var(--ink)}
.mockinputrow input:focus{outline:none;border-color:var(--accent2)}
.mockend{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;max-width:640px}
.mockend .lab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.mockend p{font-size:14px;line-height:1.65;color:var(--ink2);margin:0 0 16px}
.mockend .acts{display:flex;gap:10px;flex-wrap:wrap}
.mockend .acts .grow{flex:1}

/* cases */
.clist{display:flex;flex-direction:column;gap:14px}
.case{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.case .ctop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.case .ctitle{font-weight:800;font-size:16px;color:var(--ink);letter-spacing:-.01em;margin:0}
.case .subj{font-size:12.5px;color:var(--mute);font-weight:600;margin:-2px 0 10px}
.rtag{flex:none;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:20px;padding:3px 9px}
.rtag.real{color:#157a52;background:#e7f1ea}
.rtag.hypo{color:#8a6410;background:#f6efdd}
:root[data-theme="dark"] .rtag.real{color:#4fbf8f;background:#14261e}
:root[data-theme="dark"] .rtag.hypo{color:#d4a24a;background:#2a2213}
.case .lab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:14px 0 5px}
.case p{margin:0;font-size:13.8px;line-height:1.6;color:var(--ink2)}
.case .ask{font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-top:10px}
.case ul{margin:5px 0 0;padding-left:18px}
.case li{font-size:13.6px;line-height:1.55;color:var(--ink2);margin-bottom:5px}
.case .rec{background:var(--green-soft,#e7f1ea);border:1px solid var(--green);border-radius:9px;padding:11px 13px;margin-top:12px;font-size:13.8px;line-height:1.55;color:var(--ink)}
.case .tested{font-size:12.5px;color:var(--mute);margin-top:10px;font-style:italic}
.case .revealbtn{margin-top:14px}
.case .work{display:none}
.case.open .work{display:block}
.case .lockbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft);border:1px dashed var(--accent2);border-radius:9px;padding:12px 14px;margin-top:14px;font-size:13px;font-weight:600;color:var(--ink2)}
.case .lockbox a{background:var(--accent);color:#fff;border-radius:8px;padding:8px 15px;font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}

/* cheat sheets */
.slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
@media(max-width:560px){.slist{grid-template-columns:1fr}}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column}
.sheet .stitle{font-weight:800;font-size:15.5px;color:var(--ink);margin:0 0 2px}
.sheet .stopic{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sheet .lab{display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin:10px 0 5px}
.sheet ul{margin:0;padding-left:17px}
.sheet li{font-size:13px;line-height:1.5;color:var(--ink2);margin-bottom:5px}
.sheet .traps li{color:var(--ink2)}
.sheet.lk .sbody{filter:blur(5px);pointer-events:none;user-select:none;position:relative}
.sheet.lk{position:relative}
.sheet .slock{display:none}
.sheet.lk .slock{display:flex;position:absolute;inset:auto 0 16px 0;justify-content:center}
.sheet.lk .slock a{font-size:12.5px;font-weight:800;color:#fff;background:var(--accent);border-radius:8px;padding:8px 15px;text-decoration:none}

/* mcq */
.mcq{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;max-width:640px}
.mcq .meta{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.mcq .prog{margin-left:auto;font-size:12.5px;color:var(--mute);font-weight:700;font-variant-numeric:tabular-nums}
.mcq .mq{font-size:16.5px;font-weight:700;line-height:1.4;color:var(--ink);margin:2px 0 15px}
.mopts{display:flex;flex-direction:column;gap:9px}
.mopt{text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:var(--sans);display:flex;gap:10px;align-items:flex-start}
.mopt .k{flex:none;font-weight:800;color:var(--mute)}
.mopt:hover:not(:disabled){border-color:var(--accent2)}
.mopt.correct{border-color:var(--green);background:var(--green-soft,#e7f1ea);color:var(--ink)}
.mopt.wrong{border-color:var(--danger);background:var(--danger-soft,#f7e7e7)}
.mexplain{display:none;margin-top:14px;border-top:1px solid var(--line2);padding-top:13px;font-size:13.6px;line-height:1.6;color:var(--ink2)}
.mexplain.show{display:block}
.mexplain .lab{font-weight:800;color:var(--green);text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;margin-right:6px}
.mcq .next{margin-top:15px}

.lockwrap{background:var(--accent-soft,#e8f0fb);border:1px solid var(--accent2);border-radius:11px;padding:22px;text-align:center}
.lockwrap h3{margin:0 0 6px;font-size:16px}
.lockwrap p{color:var(--ink2);margin:0 0 15px;font-size:14px;max-width:52ch;margin-inline:auto;line-height:1.55}
.lockwrap a{background:var(--accent);color:#fff;border-radius:10px;padding:11px 22px;font-weight:800;font-size:14px;text-decoration:none}

/* firm guides */
.fsec{margin-top:36px;border-top:1px solid var(--line);padding-top:26px}
.fsec h2{font-size:19px;margin:0 0 4px}
.fsec .sub{color:var(--mute);font-size:13.5px;margin:0 0 14px}
.fsearch{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 13px;margin-bottom:14px;max-width:420px}
.fsearch svg{width:17px;height:17px;color:var(--mute);flex:none}
.fsearch input{flex:1;border:none;outline:none;background:none;font-size:14px;color:var(--ink);font-family:var(--sans);min-width:0}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fg{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:flex;flex-direction:column}
.fg .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fg .fn{font-weight:800;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.fg .ty{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft,#e8f0fb);border-radius:20px;padding:3px 9px;white-space:nowrap}
.fg .fgguide{display:flex;flex-direction:column;flex:1;min-width:0}
.fg .row{font-size:13px;line-height:1.5;color:var(--ink2);margin-top:9px}
.fg .row b{color:var(--ink);font-weight:700}
.fg .tip{font-size:12.5px;color:var(--ink2);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-top:16px;line-height:1.5}
.fg .spacer{flex:1;min-height:6px}
.fg.lk .row,.fg.lk .tip{filter:blur(5px);pointer-events:none;user-select:none}
.fg .fglock{display:none}
.fg.lk .fgguide{position:relative}
.fg.lk .fglock{display:flex;position:absolute;inset:auto 0 14px 0;justify-content:center}
.fg.lk .fglock a{font-size:12.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:8px;padding:8px 15px;text-decoration:none}
.fg .reportsToggle{margin-top:12px;align-self:flex-start;border:1px dashed var(--accent2);background:var(--accent-soft);
  color:var(--accent);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.fg .reportsToggle:hover{background:var(--panel)}
.fg .freports{margin-top:4px}
.fg .freports:not([hidden]){border-top:1px solid var(--line2);padding-top:10px;margin-top:12px}
.freports .rep{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.freports .tag{display:inline-block;margin-right:6px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent)}
.freports .tag.o{background:var(--green-soft);color:var(--green)}
.freports .qs{white-space:pre-wrap;font-size:13.5px;color:var(--ink);line-height:1.5;margin:4px 0 0}

/* premium banner */
.pbanner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(90deg,var(--accent-soft,#e8f0fb),transparent);border:1px solid var(--accent2);border-radius:8px;padding:16px 20px;margin:0 0 18px}
.pbanner .t{flex:1;min-width:220px}
.pbanner .t b{font-size:15px;color:var(--ink)}
.pbanner .t p{margin:3px 0 0;font-size:13px;color:var(--ink2)}
.pbanner a{background:var(--accent);color:#fff;border-radius:10px;padding:11px 22px;font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.pbanner a:hover{background:var(--accent2)}

/* readiness meter styles now live in app.css (shared with Quick Drill, which
   does not load this file). See readyBarHTML() in js/readiness.js. */
.qdpromo{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:16px 18px;margin:0 0 22px;
  transition:border-color .16s ease,transform .16s ease}
.qdpromo:hover{border-color:var(--accent2);border-left-color:var(--gold);transform:translateY(-1px)}
.qdp-ic{flex:none;width:38px;height:38px;border-radius:9px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.qdp-ic svg{width:19px;height:19px}
.qdp-tx{flex:1;display:flex;flex-direction:column;gap:2px}
.qdp-tx b{font-size:15px;color:var(--ink)}
.qdp-tx span{font-size:13px;color:var(--ink2)}
.qdp-go{flex:none;font-weight:800;font-size:13.5px;color:var(--gold)}

/* course entry strip: a single unobtrusive line, not a flanking hero box */
.coursestrip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 18px;margin:0 0 20px}
.coursestrip .cs-ic{flex:none;width:36px;height:36px;border-radius:9px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.coursestrip .cs-ic svg{width:18px;height:18px}
.coursestrip .t{flex:1;min-width:220px}
.coursestrip .t b{font-size:14px;color:var(--ink);letter-spacing:-.01em}
.coursestrip .t p{margin:2px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.45;max-width:60ch}
.coursestrip .prog{margin-top:5px;font-size:11.5px;color:var(--accent);font-weight:800;display:flex;align-items:center;gap:7px}
.coursestrip .prog .mini{flex:none;width:72px;height:5px;border-radius:4px;background:var(--line2);overflow:hidden}
.coursestrip .prog .mini i{display:block;height:100%;background:var(--accent);border-radius:4px}
.coursestrip a.go{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:9px 16px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.coursestrip a.go:hover{border-color:var(--accent2);color:var(--accent)}

/* the difficulty ladder, told as a progression (identity through level) */
.ladder{font-size:12.5px;color:var(--mute);line-height:1.55;margin:0 0 12px;max-width:80ch}
.ladder b{color:var(--ink2);font-weight:700}
.ladder a{color:var(--accent);font-weight:700;text-decoration:none}
.ladder a:hover{text-decoration:underline}
.dchip .ldot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
.dchip.on .ldot{outline:2px solid rgba(255,255,255,.5)}
.l-Core{background:#157a52}.l-Intermediate{background:#17416e}.l-Hard{background:#8a6410}.l-Advanced{background:#b5561f}.l-Expert{background:#7a3ea8}
:root[data-theme="dark"] .l-Core{background:#4fbf8f}:root[data-theme="dark"] .l-Intermediate{background:#7aa8dd}:root[data-theme="dark"] .l-Hard{background:#d4a24a}:root[data-theme="dark"] .l-Advanced{background:#e2915f}:root[data-theme="dark"] .l-Expert{background:#c08fdc}

.fg,.proccard,.qitem,.case,.sheet{transition:border-color var(--t-fast,.16s) var(--ease,ease),box-shadow var(--t-fast,.16s) var(--ease,ease),transform var(--t-fast,.16s) var(--ease,ease)}
.fg:hover{border-color:var(--accent2);transform:translateY(-2px);box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 26px -16px rgba(16,24,40,.22)}
.qitem:hover,.case:hover,.sheet:hover{border-color:var(--accent2)}
@media(prefers-reduced-motion:reduce){.fg:hover{transform:none!important}}

/* ── Behavioural practice ──────────────────────────────────────────────────── */
.behav-q{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin:12px 0}
.behav-q h3{font-size:17px;margin:0 0 6px;line-height:1.35}
.behav-q p{color:var(--ink2);font-size:13px;margin:0;line-height:1.55}
.behav-input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;resize:vertical}
.behav-input:focus{outline:none;border-color:var(--accent2)}
.behav-input:disabled{opacity:.6}
.behav-act{display:flex;align-items:center;gap:12px;margin-top:10px}
.behav-count{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.behav-err{background:var(--gold-soft);color:var(--gold);border-radius:9px;padding:10px 13px;font-size:13px;margin-top:12px;line-height:1.5}

.behav-fb{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:14px}
.behav-fb p{font-size:13.5px;line-height:1.6;margin:0 0 10px;color:var(--ink)}
.behav-fb b{color:var(--ink)}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 18px;margin-bottom:14px}
.scrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink2);
  border-bottom:1px solid var(--line2);padding:5px 0}
.sc{letter-spacing:2px;font-size:12px}
.sc.hi{color:var(--green)} .sc.mid{color:var(--gold)} .sc.lo{color:var(--danger)}
.behav-rewrite{background:var(--accent-soft);border-radius:9px;padding:12px 14px;margin:12px 0 10px}
.behav-rewrite b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin-bottom:5px}
.behav-rewrite p{margin:0;font-size:13.5px;line-height:1.6}
/* Stated plainly rather than buried: the model can be generous, and a student treating a
   good score as a pass is the failure mode worth guarding against. */
.behav-caveat{font-size:11.5px;color:var(--mute);font-style:italic;margin:0}

.behav-notes{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 17px;margin-top:14px}
.behav-notes h4{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);margin:0 0 8px}
.behav-notes ul{margin:0;padding-left:18px}
.behav-notes li{font-size:13px;line-height:1.6;color:var(--ink2);margin-bottom:5px}

/* Before any practice, the bar explains itself instead of showing five zeros. */
.readybar-empty{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  background:var(--panel);font-size:13.5px;line-height:1.5;color:var(--ink2)}
.readybar-empty b{color:var(--ink)}


/* Eight tabs read as a wall. Two labelled groups read as a choice.
   The label sits ON ITS OWN LINE rather than inline: "LEARN IT" and "TEST YOURSELF" are
   different widths, so an inline label pushed each row's buttons to a different left edge
   and the two rows never lined up. */
.modebar{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.mbgroup{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.mblab{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);line-height:1}
.mbrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mbgroup + .mbgroup{padding-top:13px;border-top:1px solid var(--line)}


/* ── Practice memory ──────────────────────────────────────────────────────────
   Where you stand in this track. The drill used to forget every result the moment
   you left the page, so there was no position to show and no reason to return. */
.pbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative;
  border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:14px;
  background:var(--panel);overflow:hidden}
.pb-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.pb-track span{display:block;height:100%;background:var(--green);transition:width .35s ease}
.pb-tx{font-size:14px;color:var(--ink2);line-height:1.35}
.pb-tx b{color:var(--ink);font-weight:700}
.pb-sub{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.pb-go{margin-left:auto;border:1px solid var(--accent);background:var(--accent);color:#fff;
  border-radius:9px;padding:8px 15px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer}
.pb-go:hover{filter:brightness(1.07)}
.pb-rest{margin-left:auto;font-size:12.5px;color:var(--mute);font-weight:600}
.pb-reset{border:none;background:none;color:var(--mute);font-size:12px;font-family:inherit;
  cursor:pointer;text-decoration:underline;padding:4px}
.pb-reset:hover{color:var(--danger)}

/* Why this card came up. Without it the ordering looks random and gets no credit. */
.drill .qwhy{font-size:11.5px;font-weight:700;color:var(--mute);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.drill .qwhy.warn{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 34%,transparent);
  background:var(--gold-soft)}
.drill-done .dd-standing{color:var(--ink2);font-size:14px;line-height:1.5;margin-top:4px}

@media(max-width:620px){
  .pbar{gap:10px;padding:12px 13px}
  .pb-go,.pb-rest{margin-left:0;width:100%;text-align:center}
  .pb-reset{position:absolute;top:10px;right:12px}
}

/* ── Your applications, inside the firm guides ────────────────────────────────
   The guides were only reachable by typing a firm name into a search box, which
   assumes you remember who you applied to and think to look them up. */
.yourfirms h2{margin:0 0 4px}
.yourfirms .sub{margin:0 0 12px;color:var(--mute);font-size:13.5px;line-height:1.45}
.yf-list{display:flex;flex-wrap:wrap;gap:9px}
.yf{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  border:1px solid var(--line);background:var(--panel);border-radius:10px;
  padding:10px 14px;cursor:pointer;font-family:inherit}
.yf:hover{border-color:var(--accent)}
.yf-n{font-size:14px;font-weight:700;color:var(--ink)}
.yf-m{font-size:11.5px;color:var(--mute);font-weight:600}
.yf-gap{margin:11px 0 0;font-size:12.5px;color:var(--mute)}

/* Locked (Premium) questions in the bank. Visible on purpose: a free member should see
   the question and the depth badge, and only the answer is withheld. */
.qitem.qlocked .qtxt{color:var(--ink2)}
.qlock{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  border-radius:6px;padding:3px 8px;white-space:nowrap;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent2)}
.qans-locked p{margin:6px 0 10px;color:var(--mute)}
.qunlock{display:inline-block;font-weight:700;color:var(--accent);border-bottom:1px solid currentColor;text-decoration:none}
.qunlock:hover{color:var(--accent2)}