/* Shared components on top of site.css tokens: content blocks (render.js), MCQ, page shells. */

/* ---------- page shell ---------- */
.page{max-width:var(--page-w,880px);margin:0 auto;padding:28px 16px 80px}
.page-head{padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:20px}
.eyebrow{font:700 12px/1.4 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px}
.page h1{font:800 clamp(28px,4.4vw,40px)/1.1 var(--f-ui);letter-spacing:-.02em;margin:0}
.page h2{font:800 22px/1.25 var(--f-ui);letter-spacing:-.01em;margin:0 0 10px}
.page .sec-label{font:800 12px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:32px 0 10px;padding-bottom:6px;border-bottom:1.5px solid var(--rule)}
.muted{color:var(--ink-2)}
.empty{padding:18px 16px;border:1.5px dashed var(--rule);border-radius:8px;color:var(--ink-2);background:var(--surface)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:18px clamp(14px,3vw,24px)}
.card + .card{margin-top:16px}
.pill{display:inline-block;font:700 11px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid currentColor;color:var(--ink-3);white-space:nowrap}
.pill.exam{color:var(--accent)}
.pill.good{color:var(--good)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-btn{appearance:none;font:600 13px/1 var(--f-ui);padding:9px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);cursor:pointer}
.chip-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.chip-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.toc{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none}
.toc a{display:inline-block;font:600 13px/1.2 var(--f-ui);padding:7px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);text-decoration:none}
.toc a:hover{border-color:var(--ink-3)}

/* ---------- progress ---------- */
.progress{height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.progress > span{display:block;height:100%;background:var(--good);border-radius:inherit;transition:width .3s}
.progress-row{display:flex;align-items:center;gap:12px;font:600 13px/1 var(--f-ui);color:var(--ink-2);font-variant-numeric:tabular-nums}
.progress-row .progress{flex:1}

/* ---------- content blocks ---------- */
.blocks{display:grid;gap:14px;min-width:0}
.b-p{margin:0;line-height:1.6}
.b-list,.b-steps{margin:0;padding-left:22px;display:grid;gap:6px;line-height:1.5}
.b-steps li::marker{font-weight:700;color:var(--ink-2)}
.b-formula{margin:0;padding:10px 14px;border-radius:6px;background:var(--paper-2);font:600 14.5px/1.5 var(--f-num);overflow-wrap:anywhere}
.b-tip{padding:10px 14px;border-left:4px solid var(--accent);background:var(--surface);border-radius:0 6px 6px 0;font-size:14.5px;line-height:1.5}
.b-tip > b{display:block;font:700 11px/1.4 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.ph{color:var(--ink-3);font-style:italic}
.blank{display:inline-block;min-width:64px;height:1.1em;border-bottom:1.5px dashed var(--ink-3);vertical-align:-2px}
.b-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.b-num{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}

.b-table table{width:100%;border-collapse:collapse;font-size:14px}
.b-table th{font:600 11px/1.3 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:8px;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
.b-table th.b-num{text-align:right}
.b-table td{padding:7px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.b-table td.b-num{font-size:13.5px}

/* journal */
.b-journal,.b-statement,.b-taccount{margin:0;min-width:0}
.b-journal figcaption{font:700 12px/1.4 var(--f-ui);letter-spacing:.04em;color:var(--ink-2);margin-bottom:6px}
.b-journal table{width:100%;border-collapse:collapse;font:14.5px/1.4 var(--f-form);background:var(--surface)}
.b-journal th{font:600 10.5px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:7px 6px;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
.b-journal th.b-num{text-align:right}
.b-journal td{padding:4px 6px;vertical-align:top}
.b-journal td.b-num{font-size:13.5px;min-width:72px}
.b-date{white-space:nowrap;font:500 13px/1.45 var(--f-num)}
.b-crl{padding-left:30px!important}
.b-ref{color:var(--ink-3);font:500 12.5px/1.45 var(--f-num);text-align:center}
.b-expl td{font-style:italic;color:var(--ink-2);padding-left:44px!important;padding-bottom:10px!important;border-bottom:1px solid var(--rule)}

/* statement */
.b-statement{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:18px clamp(10px,3vw,30px) 20px}
.b-shead{text-align:center;font:15px/1.4 var(--f-form);margin-bottom:12px}
.b-shead b{display:block;font-size:16px}
.b-shead i{display:block;color:var(--ink-2)}
.b-shead small{display:block;font:12px var(--f-ui);color:var(--ink-3);margin-top:2px}
.b-statement table{width:100%;border-collapse:collapse;font:15px/1.4 var(--f-form)}
.b-statement td{padding:4px 8px;vertical-align:bottom}
.b-statement td.b-num{font-size:14px;width:1%;min-width:92px}
.b-statement .b-head td{font-weight:700;padding-top:12px}
.b-statement .b-total td{font-weight:700}
.b-l0{padding-left:8px} .b-l1{padding-left:24px!important} .b-l2{padding-left:42px!important} .b-l3{padding-left:60px!important}
.b-u{border-bottom:1px solid var(--ink)}
.b-uu{border-bottom:3px double var(--ink)}

/* T-account */
.b-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.b-taccount{padding:6px 4px}
.b-thead{display:flex;gap:6px;justify-content:center;padding:0 4px 5px;border-bottom:2.5px solid var(--ink);font:700 14px/1.3 var(--f-ui)}
.b-tno{font:700 12.5px/1.4 var(--f-num);color:var(--ink-2)}
.b-tbody{display:grid;grid-template-columns:1fr 1fr;min-height:48px}
.b-tside{padding:4px 6px;display:grid;gap:1px;align-content:start}
.b-tside.b-cr{border-left:2.5px solid var(--ink)}
.b-tside > i{font:600 9.5px/1.2 var(--f-ui);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.b-tside.b-dr > i{color:var(--dr)} .b-tside.b-cr > i{color:var(--cr)}
.b-trow,.b-tbal{display:flex;justify-content:space-between;gap:6px;font:500 13px/1.5 var(--f-num);font-variant-numeric:tabular-nums}
.b-trow span,.b-tbal span{font-size:11px;color:var(--ink-3);white-space:nowrap}
.b-tside.b-dr .b-trow b{color:var(--dr);font-weight:500} .b-tside.b-cr .b-trow b{color:var(--cr);font-weight:500}
.b-tfoot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.b-tbal{padding:3px 6px 0}
.b-tbal b{border-bottom:3px double var(--ink)}

/* ---------- MCQ ---------- */
.mcq{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:16px clamp(14px,3vw,20px)}
.mcq + .mcq{margin-top:14px}
.mcq-meta{margin:0 0 6px;font:600 11px/1.3 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mcq-q{margin:0 0 12px;font:600 16px/1.5 var(--f-ui)}
.mcq-opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mcq-opt{appearance:none;width:100%;display:flex;gap:10px;align-items:flex-start;text-align:left;padding:11px 12px;border:1.5px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:500 15px/1.45 var(--f-ui);cursor:pointer}
.mcq-opt:hover:not(:disabled){border-color:var(--ink-3)}
.mcq-opt:disabled{cursor:default}
.mcq-letter{font:700 14px/1.45 var(--f-num);color:var(--ink-3);flex:none}
.mcq-opt.is-answer{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--paper))}
.mcq-opt.is-answer .mcq-letter{color:var(--good)}
.mcq-opt.is-wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--paper))}
.mcq-opt.is-wrong .mcq-letter{color:var(--bad)}
.mcq-opt:disabled:not(.is-answer):not(.is-wrong){opacity:.6}
.mcq-why{margin-top:12px;padding-top:10px;border-top:1px dashed var(--rule);font-size:14.5px;line-height:1.55}
.mcq-why p{margin:0}
.mcq-why p + p{margin-top:6px}
.mcq-verdict{font:800 15px/1.3 var(--f-ui)}
.mcq.is-correct .mcq-verdict{color:var(--good)}
.mcq.is-incorrect .mcq-verdict{color:var(--bad)}
.mcq-src{font-size:12.5px;color:var(--ink-3)}

/* ---------- lesson ---------- */
.lesson-step h2{margin-top:4px}
.step-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.step-nav .btn{min-height:42px;padding:0 18px;font-size:14px}
.step-dots{display:flex;flex-wrap:wrap;gap:4px;margin:12px 0 0;padding:0;list-style:none}
.step-dots button{width:28px;height:28px;border-radius:6px;border:1px solid var(--rule);background:transparent;color:var(--ink-3);font:600 11px/1 var(--f-num);cursor:pointer}
.step-dots button.done{background:var(--paper-2);border-color:var(--paper-2);color:var(--ink-2)}
.step-dots button[aria-current="step"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.step-dots button:disabled{opacity:.4;cursor:not-allowed}
.check-box{margin-top:22px}
.check-box > h3{font:700 11px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.gate{font-size:13px;color:var(--ink-3);margin-top:8px;text-align:right}

/* ---------- templates / problems ---------- */
.tpl{scroll-margin-top:16px}
.tpl + .tpl{margin-top:36px}
.tpl-use{margin:4px 0 14px;color:var(--ink-2);font-size:14.5px}
.part{border-top:1px solid var(--rule);padding-top:14px;margin-top:14px}
.part > summary{cursor:pointer;font:700 15px/1.4 var(--f-ui);list-style:none;display:flex;gap:10px;align-items:baseline}
.part > summary::-webkit-details-marker{display:none}
.part > summary::before{content:"▸";color:var(--ink-3);transition:transform .2s}
.part[open] > summary::before{transform:rotate(90deg)}
.part > summary .reveal{margin-left:auto;font:600 12px/1 var(--f-ui);color:var(--ink-3);white-space:nowrap}
.part[open] > summary .reveal{display:none}
.part > .blocks{margin-top:12px}

@media (max-width:560px){
  .b-statement{padding:14px 8px 16px}
  .b-statement table{font-size:14px}
  .b-statement td{padding:4px 5px}
  .b-statement td.b-num{min-width:0;font-size:12.5px}
  .b-l1{padding-left:12px!important} .b-l2{padding-left:20px!important} .b-l3{padding-left:28px!important}
  .b-journal table{font-size:13.5px}
  .b-crl{padding-left:16px!important}
  .b-expl td{padding-left:22px!important}
}

/* Lesson list (learn/) */
.lesson-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lesson-list a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;color:inherit;text-decoration:none;font-weight:600}
.lesson-list a:hover{border-color:var(--ink-3)}