/* 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;}