/* KAVACH Question Bank — Style A
   Self-contained: a theme's own rules for buttons, headings and paragraphs are
   usually more specific than ours, so anything a theme habitually restyles is
   pinned here rather than left to inherit. */

.kqb{
  --kqb:#0d9488;--kqb-ink:#111827;--kqb-mut:#6b7280;--kqb-line:#e8eaee;
  color:var(--kqb-ink);text-align:left;max-width:100%;
  font-size:16px;line-height:1.6;
}
.kqb *{box-sizing:border-box}

/* Themes paint headings with a gradient (background-clip:text plus a
   transparent fill). Our markup sits inside their content area and inherited
   it, which rendered chapter names and badges as pale smudges. */
.kqb .kqb-hero-title,.kqb .kqb-hero-desc,.kqb .kqb-hero-meta,
.kqb .kqb-unit-name,.kqb .kqb-unit-blurb,.kqb .kqb-unit-num,
.kqb .kqb-q-title,.kqb .kqb-qnum,.kqb .kqb-type,.kqb .kqb-marks,
.kqb .kqb-count,.kqb .kqb-star,.kqb .kqb-answer,.kqb .kqb-answer *{
  -webkit-text-fill-color:currentColor;
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
}

.kqb-empty{padding:20px;border:1px dashed #d5d8dd;border-radius:12px;color:var(--kqb-mut);background:#fff}

/* ---------- hero ---------- */
.kqb-hero{background:#fff;border-radius:16px;padding:20px 18px;margin:0 0 14px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.kqb .kqb-hero-title{margin:0 0 6px;font-size:22px;line-height:1.25;font-weight:700;
  letter-spacing:-.01em;color:var(--kqb-ink)}
.kqb .kqb-hero-desc{margin:0 0 14px;color:var(--kqb-mut);font-size:14px;line-height:1.55}
.kqb .kqb-hero-meta{margin:0;color:var(--kqb-mut);font-size:13px}
.kqb .kqb-hero-meta strong{color:var(--kqb-ink);font-size:17px}
.kqb-hy{color:#b45309}

/* ---------- toolbar ---------- */
.kqb-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}

/* ---------- chapter ---------- */
.kqb-unit{background:#fff;border-radius:14px;margin:0 0 10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.kqb-unit-head{display:flex;align-items:flex-start;gap:11px;width:100%;padding:15px 14px;
  text-align:left;cursor:pointer}
.kqb .kqb-unit-num{flex:0 0 26px;height:26px;border-radius:8px;text-align:center;
  background:#eef6f5;color:var(--kqb);font-weight:700;font-size:13px;line-height:26px}
.kqb-unit-text{flex:1;min-width:0}
.kqb .kqb-unit-name{display:block;font-weight:650;font-size:15.5px;line-height:1.35;color:var(--kqb-ink)}
.kqb .kqb-unit-blurb{display:block;color:var(--kqb-mut);font-size:12.5px;margin-top:3px;line-height:1.45}
.kqb-unit-meta{flex:0 0 auto;display:flex;gap:7px;align-items:center;font-size:11.5px;color:var(--kqb-mut)}
.kqb .kqb-star{color:#b45309;background:#fef4e2;border-radius:20px;padding:2px 8px;font-size:11.5px}
.kqb-chev{flex:0 0 auto;width:8px;height:8px;margin-top:8px;
  border-right:2px solid #9aa3af;border-bottom:2px solid #9aa3af;
  transform:rotate(45deg);transition:transform .2s}
[aria-expanded="true"] .kqb-chev{transform:rotate(-135deg)}
.kqb-unit-body{border-top:1px solid var(--kqb-line)}

/* ---------- question ---------- */
.kqb-q{border-bottom:1px solid var(--kqb-line)}
.kqb-q:last-child{border-bottom:0}
.kqb-q.is-hidden{display:none}
.kqb-q-head{display:block;width:100%;padding:14px;text-align:left;cursor:pointer}
.kqb-q-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.kqb .kqb-qnum{background:var(--kqb);color:#fff;-webkit-text-fill-color:#fff;
  border-radius:6px;padding:2px 7px;font-weight:700;font-size:11px;line-height:1.45;letter-spacing:.01em}
.kqb .kqb-type{background:#f2f3f6;color:#4b5563;border-radius:6px;padding:3px 8px;
  font-weight:600;font-size:10.5px;line-height:1.4;letter-spacing:.07em}
.kqb .kqb-marks{border:1px solid var(--kqb-line);color:var(--kqb-mut);border-radius:6px;
  padding:3px 7px;font-weight:600;font-size:11px;line-height:1.4}
.kqb-q-row .kqb-chev{margin-left:auto;margin-top:0}
.kqb .kqb-q-title{display:block;font-weight:600;font-size:15.5px;line-height:1.45;color:var(--kqb-ink)}
.kqb-q[data-open="1"] .kqb-q-head{background:linear-gradient(#fbfdfd,#fff)}
.kqb-answer{padding:2px 14px 20px}

/* ---------- answer body ---------- */
.kqb-answer h4.mqb-sec{display:flex;align-items:center;gap:8px;margin:20px 0 9px;
  font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.09em;
  text-transform:uppercase;color:var(--kqb)}
.kqb-answer .mqb-sec-bar{order:2;flex:1;height:1px;background:var(--kqb-line)}
.kqb-answer p,.kqb-answer li{font-size:15px;line-height:1.62;margin:8px 0;
  hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word}
.kqb-answer .mqb-def{background:#f1f8f7;border:0;border-radius:11px;padding:12px 14px;margin:10px 0}
.kqb-answer .mqb-pts{margin:9px 0;padding:0;list-style:none}
.kqb-answer .mqb-pts li{position:relative;padding-left:17px}
.kqb-answer .mqb-pts li:before{content:"";position:absolute;left:3px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--kqb);opacity:.55}
.kqb-answer .mqb-callout{background:#fffaf0;border-left:3px solid #e0a12a;border-radius:11px;
  padding:12px 14px;margin:12px 0}
.kqb-answer .mqb-tablewrap{overflow-x:auto;margin:14px 0;border:1px solid var(--kqb-line);
  border-radius:11px;-webkit-overflow-scrolling:touch}
.kqb-answer .mqb-table{border-collapse:collapse;width:100%;font-size:14px;min-width:300px}
.kqb-answer .mqb-table th,.kqb-answer .mqb-table td{padding:9px 11px;text-align:left;
  vertical-align:top;border-bottom:1px solid var(--kqb-line)}
.kqb-answer .mqb-table th{background:#fafbfc;font-weight:650;font-size:12.5px;
  letter-spacing:.02em;text-transform:uppercase;color:#4b5563}
.kqb-answer .mqb-table tr:last-child td{border-bottom:0}
.kqb-answer .mqb-fig{margin:14px 0;text-align:center}
.kqb-answer .mqb-fig img,.kqb-answer .mqb-fig svg{max-width:100%;height:auto;border-radius:10px}
.kqb-answer .mqb-figcap{color:var(--kqb-mut);font-size:12.5px;font-style:italic;margin-top:6px}


/* ---------- subject rail ---------- */
.kqb-rail{position:sticky;top:0;z-index:20;margin:0 0 14px;padding:9px 0 8px;
  background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--kqb-line)}
.kqb-rail-in{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kqb-rail-in::-webkit-scrollbar{display:none}
.kqb .kqb-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 12px;
  background:#fff;border:1px solid var(--kqb-line);border-radius:999px;
  font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none;color:var(--kqb-ink)}
.kqb .kqb-chip .kqb-dot{width:7px;height:7px;border-radius:50%;background:var(--kqb)}
.kqb .kqb-chip.is-on{background:var(--kqb);border-color:var(--kqb);color:#fff;-webkit-text-fill-color:#fff}
.kqb .kqb-chip.is-on .kqb-dot{background:#fff}
.kqb button.kqb-more{flex:0 0 auto;width:auto !important;padding:7px 12px !important;
  border:1px dashed #cfd4da !important;border-radius:999px !important;background:#fff !important;
  font-size:13px !important;font-weight:600 !important;color:var(--kqb-mut) !important;cursor:pointer}

/* ---------- all-subjects sheet ---------- */
.kqb-sheet{position:fixed;inset:0;z-index:9999;display:none}
.kqb-sheet.is-open{display:block}
.kqb-veil{position:absolute;inset:0;background:rgba(17,24,39,.42)}
.kqb-panel{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;
  background:#fff;border-radius:18px 18px 0 0;padding:8px 14px 26px}
.kqb-grab{width:38px;height:4px;border-radius:4px;background:#d8dce1;margin:8px auto 12px}
.kqb-panel h3{margin:0 0 10px;font-size:16px;color:var(--kqb-ink)}
.kqb-sgroup{margin:0 0 16px}
.kqb-sgroup h4{margin:0 0 7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--kqb-mut);font-weight:700}
.kqb .kqb-srow{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:11px;
  border:1px solid var(--kqb-line);margin-bottom:6px;text-decoration:none;color:var(--kqb-ink)}
.kqb .kqb-srow.is-on{border-color:var(--kqb);background:#f4faf9}
.kqb-sdot{width:9px;height:9px;border-radius:50%;background:var(--kqb);flex:0 0 auto}
.kqb-sname{flex:1;font-weight:600;font-size:14.5px}
.kqb-smeta{font-size:11.5px;color:var(--kqb-mut);white-space:nowrap}

/* ---------- breadcrumb + toolbar rows ---------- */
.kqb-crumb{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--kqb-mut);margin-bottom:7px}
.kqb-toolbar{display:block}
.kqb-trow{display:flex;gap:8px;margin-top:8px;max-width:360px}
.kqb .kqb-trow button.kqb-btn{flex:1 1 0;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-align:center}

/* ---------- chapter jump ---------- */
.kqb-jump{display:flex;gap:7px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px;scrollbar-width:none}
.kqb-jump::-webkit-scrollbar{display:none}
.kqb .kqb-jump a{flex:0 0 auto;padding:6px 11px;background:#fff;border:1px solid var(--kqb-line);
  border-radius:8px;font-size:12.5px;color:var(--kqb-mut);white-space:nowrap;max-width:190px;
  overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.kqb-unit{scroll-margin-top:66px}

/* ---------- subject grid ---------- */
.kqb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.kqb-card{display:block;background:#fff;border-radius:14px;padding:18px;text-decoration:none;
  color:inherit;box-shadow:0 1px 2px rgba(16,24,40,.05);border-top:3px solid var(--kqb)}
.kqb-card-parent{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--kqb-mut)}
.kqb-card-name{display:block;font-weight:700;font-size:16px;margin:6px 0 4px;color:var(--kqb-ink)}
.kqb-card-meta{display:block;color:var(--kqb-mut);font-size:13px}

/* ---------- theme button reset ----------
   The chapter and question rows are buttons so the keyboard can reach them,
   and themes style every button on the page. Without this an opened question
   turned into a solid coloured block. */
.kqb button.kqb-unit-head,.kqb button.kqb-q-head,.kqb button.kqb-btn,
.kqb button.kqb-unit-head:hover,.kqb button.kqb-q-head:hover,
.kqb button.kqb-unit-head:focus,.kqb button.kqb-q-head:focus,.kqb button.kqb-btn:focus,
.kqb button.kqb-unit-head:active,.kqb button.kqb-q-head:active,
.kqb button.kqb-unit-head[aria-expanded="true"],.kqb button.kqb-q-head[aria-expanded="true"]{
  background:#fff !important;background-image:none !important;
  color:var(--kqb-ink) !important;-webkit-text-fill-color:currentColor !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;text-shadow:none !important;
  text-transform:none !important;letter-spacing:normal !important;font-family:inherit !important;
  font-size:16px !important;font-weight:400 !important;line-height:1.6 !important;
  min-height:0 !important;width:100% !important;transform:none !important;outline:0;
}
.kqb button.kqb-unit-head:hover,.kqb button.kqb-q-head:hover{background:#fcfdfd !important}
.kqb-q[data-open="1"] button.kqb-q-head{background:linear-gradient(#fbfdfd,#fff) !important}
.kqb button.kqb-unit-head:focus-visible,.kqb button.kqb-q-head:focus-visible,
.kqb button.kqb-btn:focus-visible{outline:2px solid var(--kqb);outline-offset:-2px}

.kqb button.kqb-btn{width:auto !important;border:1px solid var(--kqb-line) !important;
  border-radius:10px !important;padding:10px 14px !important;font-size:14px !important;
  font-weight:600 !important;background:#fff !important}
.kqb button.kqb-btn.is-on{background:var(--kqb) !important;color:#fff !important;
  -webkit-text-fill-color:#fff !important;border-color:var(--kqb) !important}
.kqb input.kqb-search{flex:1 1 200px;min-width:0;font-size:16px !important;
  padding:11px 14px !important;border:1px solid var(--kqb-line) !important;border-radius:10px !important;
  background:#fff !important;color:var(--kqb-ink) !important;box-shadow:none !important;
  height:auto !important;text-transform:none !important}

/* ---------- phones ---------- */
@media (max-width:640px){
  .kqb{font-size:15px}
  .kqb-hero{padding:16px 14px;border-radius:13px}
  .kqb .kqb-hero-title{font-size:19px}
  .kqb-unit{border-radius:12px;margin-bottom:9px}
  .kqb-unit-head{padding:13px 11px}
  .kqb-q-head{padding:13px 11px}
  .kqb-answer{padding:2px 11px 18px}
  .kqb-answer p,.kqb-answer li{font-size:15px}
  .kqb-answer .mqb-def,.kqb-answer .mqb-callout{padding:11px 12px}
  .kqb-answer .mqb-table th,.kqb-answer .mqb-table td{padding:8px 9px}
  .kqb button.kqb-unit-head,.kqb button.kqb-q-head{font-size:15px !important}
  .kqb-trow{max-width:none}
  .kqb-rail{padding:8px 0 7px}
}