.qm-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9}.qm-case{border:1px solid #d8e1ee;border-radius:12px;background:#f7f9fc;margin-bottom:16px;overflow:hidden}.qm-case summary{cursor:pointer;font-weight:650;padding:14px 18px;color:#174778}.qm-case-body{padding:0 18px 18px;max-height:55vh;overflow:auto;overscroll-behavior:contain}.qm-image{margin:14px 0;max-width:100%}.qm-image button{font:inherit}.qm-zoom{display:block;max-width:100%;padding:0;background:white;border:1px solid #dce5f0;border-radius:8px;cursor:zoom-in}.qm-image img{max-width:100%;height:auto;display:block}.qm-image figcaption{font-size:13px;color:#52657b;margin-top:6px}.qm-image [data-qm-retry]{padding:10px;color:#a03924;border:1px solid #e6b1a4;background:#fff5f1;border-radius:6px}.qm-image-dialog{max-width:94vw;max-height:92vh;border:0;border-radius:12px;padding:16px}.qm-image-dialog::backdrop{background:#102338b3}.qm-image-dialog img{display:block;max-width:88vw;max-height:80vh;object-fit:contain}.qm-image-dialog button{display:block;margin:0 0 12px auto;padding:8px 18px}.qm-matching{width:100%}.qm-help{font-size:14px;color:#52657b;line-height:1.6}.qm-pairs,.qm-candidates{display:grid;gap:12px}.qm-pair{position:relative}.qm-target{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center;width:100%;text-align:left;padding:16px;border:1px solid #cbd9ea;border-radius:10px;background:#f7faff;color:#16344f;font:inherit;line-height:1.7;cursor:pointer}.qm-target b{font-weight:500}.qm-target span{border:1px dashed #a4bad6;border-radius:6px;padding:10px 14px;background:white;min-height:44px;overflow-wrap:anywhere}.qm-target[aria-pressed=true]{outline:3px solid #3482cc;outline-offset:2px}.qm-target:disabled{opacity:1;cursor:default}.qm-clear{margin:6px 0 0 auto;display:block;border:0;color:#486585;background:transparent;cursor:pointer;padding:4px 10px}.qm-candidates{border-top:1px dashed #ccd9e8;padding-top:18px;margin-top:20px}.qm-candidate{font:inherit;text-align:left;line-height:1.6;padding:12px 16px;border:1px solid #c6d9ef;border-radius:9px;background:white;color:#183b63;cursor:grab;box-shadow:0 2px 5px #1933510b}.qm-candidate small{display:block;color:#64748b}.qm-status{min-height:22px;color:#24588e;font-size:13px}.qm-pair-feedback{font-size:14px;line-height:1.6;margin:6px 0}.qm-pair.is-correct .qm-target{border-color:#3c9868}.qm-pair.is-wrong .qm-target{border-color:#cf6858}.qm-pair.is-wrong .qm-pair-feedback{color:#a13324}.qm-matching button:focus-visible,.qm-image button:focus-visible{outline:3px solid #3482cc;outline-offset:3px}.qm-editor{border:1px solid #d8e1ee;border-radius:10px;padding:16px;margin:16px 0}.qm-editor label{display:block;margin:10px 0}.qm-editor input,.qm-editor textarea,.qm-editor select{width:100%;box-sizing:border-box;padding:9px;font:inherit}.qm-editor-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;margin:10px 0;align-items:start}.qm-editor-actions{display:flex;gap:10px;flex-wrap:wrap}.qm-editor button{padding:8px 12px;cursor:pointer}.qm-editor-error{color:#a13324;white-space:pre-wrap}.qm-case-layout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:24px}.qm-case-layout>.qm-question-materials{grid-column:1;grid-row:1 / span 20;min-width:0}.qm-case-layout>:not(.qm-question-materials){grid-column:2;min-width:0}.qm-question-materials:empty{display:none}@media(max-width:760px){.qm-case-layout{display:block}.qm-target{grid-template-columns:1fr;gap:8px;padding:12px}.qm-case-body{max-height:40vh}.qm-editor-row{grid-template-columns:1fr 1fr}.qm-editor-row select{grid-column:1 / -1}.qm-case summary{padding:12px}.qm-case-body{padding:0 12px 12px}}

.qm-case-layout .practice-mark-question{justify-self:end}
.qm-matching .qm-target,.qm-matching .qm-candidate{white-space:normal;overflow-wrap:anywhere;min-width:0}
.qm-target b,.qm-target span{min-width:0}

/* Canvas cards: original media first, question/options second, one shared frame. */
.qm-card-layout{container-type:inline-size;min-width:0;width:100%}
.qm-card-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:18px;align-items:start}
.qm-card-main,.qm-card-media{min-width:0;overflow-wrap:anywhere}
.qm-card-media .qm-image{margin:0 0 14px}
.qm-card-media .qm-zoom{width:100%}
.qm-card-media .qm-image img{width:100%;max-height:320px;object-fit:contain}
.qm-card-media .qm-case summary{padding:10px 12px}
.qm-card-media .qm-case-body{padding:0 12px 12px}
@container(max-width:360px){.qm-card-columns{grid-template-columns:minmax(0,1fr);gap:12px}}

/* Case materials use a wider reading column and retain their 16:9 surface. */
.qm-card-case-layout .qm-card-columns{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:24px}
.qm-card-case-layout .qm-card-media{grid-column:1;grid-row:1}
.qm-card-case-layout .qm-card-main{grid-column:2;grid-row:1}
:is(.kr-question-card,.qw-question-card[data-display-mode="full"]):has(.qm-card-case-layout){--qm-case-width:min(1360px,calc(100vw - 120px),calc(max(540px,100vh - 180px)*16/9))}
.knowledge-recall-page .kr-question-card:has(.qm-card-case-layout){width:var(--qm-case-width);max-width:none;height:calc(var(--qm-case-width)*9/16);display:flex;flex-direction:column;gap:16px}
:is(.kr-question-card,.qw-question-card[data-display-mode="full"]) .qm-card-case-layout{flex:1;min-height:0}
:is(.kr-question-card,.qw-question-card[data-display-mode="full"]) .qm-card-case-layout .qm-card-columns{height:100%;min-height:0;align-items:stretch}
:is(.kr-question-card,.qw-question-card[data-display-mode="full"]) .qm-card-case-layout :is(.qm-card-main,.qm-card-media){min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.qm-card-case-layout .qm-card-media .qm-case{display:flex;flex-direction:column;margin:0;height:100%;min-height:0;overflow:auto}
.qm-card-case-layout .qm-card-media .qm-case:not([open]){height:auto}
.qm-card-case-layout .qm-case summary{flex:none;line-height:1.6;padding:14px 18px}
.qm-card-case-layout .qm-card-media .qm-case-body{min-height:0;max-height:none;flex:1;padding:0 18px 18px;overflow:auto;touch-action:pan-y}
.qw-question-card[data-display-mode="full"]:has(.qm-card-case-layout) .qw-card-body{display:flex;flex-direction:column;flex:1;min-height:0}
.qw-question-card[data-display-mode="full"]:has(.qm-card-case-layout) .qw-card-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.qw-question-card[data-display-mode="full"]:has(.qm-card-case-layout) .qw-card-actions{flex:none}
@container(max-width:700px){
  .qm-card-case-layout .qm-card-columns{grid-template-columns:minmax(0,1fr);height:auto!important;gap:18px}
  .qm-card-case-layout .qm-card-media{grid-column:1;grid-row:1}
  .qm-card-case-layout .qm-card-main{grid-column:1;grid-row:2;overflow:visible!important}
  .qm-card-case-layout .qm-card-media .qm-case{height:auto}
  .qm-card-case-layout .qm-card-media .qm-case-body{max-height:40vh;flex:auto}
}
@media(max-width:999px){
  .knowledge-recall-page .kr-question-card:has(.qm-card-case-layout){width:min(960px,calc(100vw - 28px));height:auto;max-height:calc(100dvh - 160px);overflow:auto;touch-action:pan-y}
  :is(.kr-question-card,.qw-question-card[data-display-mode="full"]) .qm-card-case-layout{flex:none}
  .qw-question-card[data-display-mode="full"]:has(.qm-card-case-layout) .qw-card-content{overflow:auto;touch-action:pan-y}
}
/* Native details wraps its body in ::details-content; let that wrapper shrink too. */
.qm-card-case-layout .qm-case::details-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.knowledge-recall-page .kr-question-card:has(.qm-card-case-layout)>.kr-question-order-badge{align-self:flex-start}