/* IPC Question Bank — Tian2 design system site styles (shared by app + browse) */
*{box-sizing:border-box;}
html,body{margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body-en);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;}
a{color:var(--ink);text-underline-offset:3px;}
a:hover{color:var(--coral);}
.wrap{max-width:920px;margin:0 auto;padding:0 24px 96px;}

/* ---- masthead ---- */
.masthead{border-bottom:var(--stroke) solid var(--ink);margin-bottom:8px;padding:40px 0 22px;}
.masthead .eyebrow{font-family:var(--font-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral);font-size:15px;}
.masthead h1{font-family:var(--font-display-en);font-weight:800;font-size:46px;line-height:1.08;
  margin:.12em 0 .15em;letter-spacing:-.01em;}
.masthead .sub{font-family:var(--font-display-en);font-style:italic;font-size:19px;color:var(--ink-2);margin:0;}
.masthead .crumb{font-family:var(--font-label);letter-spacing:.14em;text-transform:uppercase;
  font-size:13px;color:var(--ink-3);margin-bottom:6px;}
.masthead .crumb a{text-decoration:none;}

/* ---- toolbar (app) ---- */
.toolbar{position:sticky;top:0;z-index:20;background:var(--cream);
  border-bottom:var(--stroke-hairline) solid var(--ink);padding:14px 0;margin-bottom:18px;}
.toolbar .row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;}
.toolbar .grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.toolbar .glabel{font-family:var(--font-label);letter-spacing:.14em;text-transform:uppercase;
  font-size:12px;color:var(--ink-3);margin-right:2px;}
.search{font-family:var(--font-body-en);font-size:16px;padding:8px 12px;border:var(--stroke) solid var(--ink);
  background:var(--cream);color:var(--ink);border-radius:0;min-width:230px;flex:1;}
.search::placeholder{color:var(--ink-3);}
.count{font-family:var(--font-label);letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--ink-3);}

/* ---- filter pills (toggle buttons) ---- */
.pill{font-family:var(--font-body-en);font-size:13.5px;font-weight:500;padding:5px 11px;cursor:pointer;
  border:var(--stroke-hairline) solid var(--ink);background:var(--cream);color:var(--ink-2);
  border-radius:3px;transition:all .12s;user-select:none;}
.pill:hover{background:var(--cream-2);}
.pill.on{background:var(--ink);color:var(--cream);border-color:var(--ink);font-weight:600;}

/* ---- chips (metadata) ---- */
.chip{display:inline-block;font-family:var(--font-label);letter-spacing:.08em;text-transform:uppercase;
  font-size:11.5px;padding:3px 9px;border:1.5px solid var(--ink);border-radius:3px;
  background:var(--cream);color:var(--ink);line-height:1.4;white-space:nowrap;}
.chip.sec{background:var(--ink);color:var(--cream);}
.chip.d1,.chip.d2{background:var(--mint);}
.chip.d3{background:var(--mustard);}
.chip.d4{background:var(--burnt);color:var(--cream);}
.chip.d5{background:var(--coral);color:var(--cream);}

/* ---- question card ---- */
.qcard{border:var(--stroke) solid var(--ink);background:var(--cream);padding:20px 22px;margin:0 0 22px;}
.qcard-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;
  padding-bottom:10px;border-bottom:var(--stroke-hairline) solid var(--ink);}
.qcard-head .qid{font-family:var(--font-label);letter-spacing:.06em;font-size:20px;color:var(--ink);margin-right:4px;}
.qcard-head .qsub{font-style:italic;color:var(--ink-2);font-size:15px;margin-left:auto;text-align:right;}
.qbody{font-size:16.5px;}
.qbody p{margin:.5em 0;}
.qbody .center{text-align:center;margin:14px 0;}
.qbody figure.q-fig{margin:14px auto;text-align:center;}
.qbody figure.q-fig img{max-width:88%;max-height:360px;height:auto;border:1.5px solid var(--ink);background:#fff;padding:6px;}
.qbody ul,.qbody ol{margin:.5em 0 .5em 1.2em;}
.q-table{border-collapse:collapse;margin:14px auto;font-size:14.5px;}
.q-table th,.q-table td{border:1px solid var(--ink);padding:6px 11px;text-align:left;vertical-align:top;}
.q-table thead th{background:var(--ink);color:var(--cream);font-family:var(--font-label);
  letter-spacing:.05em;font-weight:400;}
.q-table tbody tr:nth-child(even){background:var(--cream-2);}

/* ---- reveal (native <details>) ---- */
details.reveal{margin-top:14px;border-top:var(--stroke-hairline) solid var(--ink-3);padding-top:12px;}
details.reveal>summary{font-family:var(--font-body-en);font-weight:600;font-size:15px;cursor:pointer;
  display:inline-block;padding:8px 16px;border:var(--stroke) solid var(--ink);background:var(--cream);
  color:var(--ink);list-style:none;user-select:none;transition:background .12s;}
details.reveal>summary:hover{background:var(--cream-2);}
details.reveal[open]>summary{background:var(--ink);color:var(--cream);margin-bottom:14px;}
details.reveal>summary::-webkit-details-marker{display:none;}
.answer{border:var(--stroke) solid var(--coral);background:var(--coral);color:var(--cream);
  padding:10px 16px;margin:0 0 14px;font-weight:600;}
.answer .lab{font-family:var(--font-label);letter-spacing:.16em;text-transform:uppercase;font-size:12px;
  display:block;color:rgba(255,255,255,.85);margin-bottom:2px;}
.answer .val{font-size:21px;font-family:var(--font-display-en);font-weight:800;}
.solution{border-left:var(--stroke) solid var(--ink);padding:2px 0 2px 18px;}
.solution p{margin:.55em 0;}
.solution .center,.solution figure.q-fig{text-align:center;}
.solution figure.q-fig img{max-width:80%;max-height:340px;border:1.5px solid var(--ink);background:#fff;padding:6px;}

/* overflow guard for wide display math */
mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;}

/* ---- category index grid (browse home) ---- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:24px;}
.cat-card{border:var(--stroke) solid var(--ink);padding:18px 20px;background:var(--cream);text-decoration:none;
  color:var(--ink);transition:background .12s;display:block;}
.cat-card:hover{background:var(--cream-2);}
.cat-card .n{font-family:var(--font-label);letter-spacing:.1em;font-size:13px;color:var(--coral);}
.cat-card h3{font-family:var(--font-display-en);font-weight:700;font-size:23px;margin:.2em 0;}
.cat-card .meta{font-size:14px;color:var(--ink-3);}
.empty{padding:40px;text-align:center;color:var(--ink-3);font-style:italic;}
.footer{margin-top:40px;padding-top:18px;border-top:var(--stroke-hairline) solid var(--ink);
  font-size:13px;color:var(--ink-3);font-family:var(--font-label);letter-spacing:.08em;text-transform:uppercase;}

/* ===== practice / diagnostic / nav (Tian2) ===== */
.nav{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;}
.nav a{font-family:var(--font-label);letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;
  text-decoration:none;color:var(--ink-2);border:1.5px solid var(--ink);padding:6px 12px;border-radius:3px;background:var(--cream);}
.nav a:hover{background:var(--cream-2);}
.nav a.cur{background:var(--ink);color:var(--cream);}
.btn-primary{font-family:var(--font-body-en);font-weight:600;font-size:15px;padding:10px 20px;cursor:pointer;
  border:var(--stroke) solid var(--ink);background:var(--coral);color:var(--cream);border-radius:0;transition:background .12s;}
.btn-primary:hover{background:var(--burnt);}
.btn-ghost{font-family:var(--font-body-en);font-weight:600;font-size:14px;padding:8px 16px;cursor:pointer;
  border:var(--stroke) solid var(--ink);background:var(--cream);color:var(--ink);border-radius:0;}
.btn-ghost:hover{background:var(--cream-2);}
.tabs{display:flex;gap:0;margin:18px 0;border-bottom:var(--stroke) solid var(--ink);}
.tab{font-family:var(--font-label);letter-spacing:.1em;text-transform:uppercase;font-size:13px;cursor:pointer;
  padding:10px 18px;border:none;background:none;color:var(--ink-3);border-bottom:3px solid transparent;margin-bottom:-2.5px;}
.tab.cur{color:var(--ink);border-bottom-color:var(--coral);}
.panel{display:flex;gap:14px;flex-wrap:wrap;align-items:center;border:var(--stroke) solid var(--ink);
  background:var(--cream-2);padding:14px 18px;margin-bottom:20px;}
.panel label{font-size:15px;display:flex;align-items:center;gap:6px;}
.panel select,.panel input[type=number]{font:inherit;padding:5px 8px;border:1.5px solid var(--ink);background:var(--cream);}
.timer{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--cream);font-family:var(--font-label);
  letter-spacing:.12em;font-size:18px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.timer.warn{background:var(--coral);}
/* MCQ option buttons */
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px;}
.opt{font-family:var(--font-body-en);font-weight:700;font-size:16px;width:42px;height:42px;cursor:pointer;
  border:var(--stroke) solid var(--ink);background:var(--cream);color:var(--ink);border-radius:50%;transition:all .1s;}
.opt:hover{background:var(--cream-2);}
.opt.sel{background:var(--ink);color:var(--cream);}
.opt.correct{background:var(--mint);border-color:var(--ink);color:var(--ink);}
.opt.wrong{background:var(--coral);color:var(--cream);}
.verdict{font-family:var(--font-label);letter-spacing:.1em;text-transform:uppercase;font-size:13px;margin:8px 0;}
.verdict.ok{color:#3f7a52;} .verdict.no{color:var(--coral);}
.scorecard{border:var(--stroke) solid var(--ink);background:var(--cream);padding:22px;margin-bottom:22px;text-align:center;}
.scorecard .big{font-family:var(--font-display-en);font-weight:900;font-size:64px;line-height:1;color:var(--coral);}
.scorecard .lab{font-family:var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-size:13px;}
/* progress bars */
.statgrid{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 20px;}
.statrow{display:grid;grid-template-columns:230px 1fr 70px;gap:12px;align-items:center;font-size:14px;}
.track{height:18px;background:var(--cream-2);border:1.5px solid var(--ink);}
.fill{height:100%;background:var(--mint);}
.fill.low{background:var(--coral);} .fill.mid{background:var(--mustard);}
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:8px 0 22px;}
.metric{border:var(--stroke) solid var(--ink);background:var(--cream);padding:16px 18px;}
.metric .v{font-family:var(--font-display-en);font-weight:800;font-size:34px;line-height:1;}
.metric .k{font-family:var(--font-label);letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--ink-3);margin-top:4px;}
/* diagnostic roadmap */
.rec{border-left:var(--stroke) solid var(--coral);background:var(--cream-2);padding:12px 16px;margin:10px 0;}
.rec h4{margin:.1em 0 .3em;font-family:var(--font-display-en);}
.rec .themes{font-size:14px;color:var(--ink-2);}
.solzh-toggle{display:inline-flex;gap:0;margin:0 0 8px;}
.solzh-toggle button{font-family:var(--font-label);letter-spacing:.08em;font-size:12px;padding:4px 12px;cursor:pointer;
  border:1.5px solid var(--ink);background:var(--cream);color:var(--ink-2);}
.solzh-toggle button.cur{background:var(--ink);color:var(--cream);}
/* hero cards (home) */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px;}
.hero-card{border:var(--stroke) solid var(--ink);background:var(--cream);padding:22px;text-decoration:none;color:var(--ink);transition:background .12s;}
.hero-card:hover{background:var(--cream-2);}
.hero-card .ic{font-family:var(--font-label);letter-spacing:.1em;color:var(--coral);font-size:13px;}
.hero-card h3{font-family:var(--font-display-en);font-weight:700;font-size:24px;margin:.25em 0;}
.hero-card p{font-size:14.5px;color:var(--ink-2);margin:0;}

/* home hero chips + roadmap rec internals */
.hero-card .tag{display:inline-block;font-family:var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--coral);font-size:12px;border:1.5px solid var(--coral);padding:2px 8px;}
.hero-card .go{display:inline-block;margin-top:10px;font-weight:600;color:var(--coral);font-size:14px;}
.rec ul{margin:.3em 0 .6em;padding-left:1.1em;}
.rec li{font-size:14.5px;color:var(--ink-2);margin:.12em 0;}
.rec p{font-size:14.5px;color:var(--ink-2);margin:.2em 0;}
.rec .btn-ghost{margin-top:6px;}
.rec h4 .qsub{font-weight:400;}