/* Original-image answer controls and shared reading sub-question selectors. */
.cie-choice, .cie-choice-image, .cie-choice-shared-picker, .cie-choice-focus-entry { --cc-theme-accent: var(--tm-accent-ink, var(--warm-accent, #dc2626)); }
body.theme-dark :is(.cie-choice, .cie-choice-image, .cie-choice-shared-picker, .cie-choice-focus-entry) { --cc-theme-accent: var(--tm-accent-ink, #e37b70); }
.cie-choice {
    --cc-bg: #fff; --cc-line: #cbd5e1; --cc-ink: #334155; --cc-muted: #64748b;
    --cc-hover: #f8fafc; --cc-accent: var(--cc-theme-accent); --cc-ok: #15803d; --cc-ok-bg: #f0fdf4;
    --cc-bad: #b91c1c; --cc-bad-bg: #fef2f2;
    margin: 16px 0 4px; padding: 14px 0 0; border-top: 1px solid var(--cc-line); color: var(--cc-ink);
    font-family: inherit; font-size: 14px; line-height: 1.5; text-align: left;
}
body.skin-warm-paper .cie-choice { --cc-bg: #fffefb; --cc-line: #d4d1c6; --cc-ink: #45464b; --cc-muted: #6b6b66; --cc-hover: #f7f4ed; --cc-accent: var(--cc-theme-accent); }
body.theme-dark .cie-choice { --cc-bg: #24282d; --cc-line: #4a5057; --cc-ink: #edece7; --cc-muted: #a4a59f; --cc-hover: #30363c; --cc-accent: var(--cc-theme-accent); --cc-ok: #7fcf9b; --cc-ok-bg: #1e3327; --cc-bad: #f2978b; --cc-bad-bg: #3c2522; }
/* Mobile image cards have no content padding of their own. Keep all answer text, options and retry actions
   inside the same inset; desktop and focus hosts already supply their own content gutters. */
.mobile-question-card > .cie-choice, .fav-m-row > .cie-choice { margin: 0; padding: 14px 14px 12px; }
.cie-choice:empty { display: none; }
.cie-choice-image-source { display: block; width: 100%; }
.cie-choice-shared-picker { display: block; padding: 10px 12px; color: #334155; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.cie-choice-shared-picker.is-below-image { border-top: 1px solid #e2e8f0; border-bottom: 0; }
.cie-choice-shared-picker[hidden] { display: none; }
.cie-choice-shared-label { display: block; margin-bottom: 7px; font-size: 12px; }
.cie-choice-shared-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cie-choice-shared-tabs button { min-height: 38px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #334155; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.cie-choice-shared-tabs button[aria-pressed="true"] { outline: 2px solid var(--cc-theme-accent); outline-offset: 1px; }
.cie-choice-shared-tabs button:hover { background: color-mix(in srgb, var(--cc-theme-accent) 10%, #fff); border-color: var(--cc-theme-accent); }
.cie-choice-shared-tabs button:focus-visible { outline: 3px solid var(--cc-theme-accent); outline-offset: 2px; }
.cie-choice-shared-tabs button.is-correct { color: #15803d; }
.cie-choice-shared-tabs button.is-wrong { color: #b91c1c; }
body.theme-dark .cie-choice-shared-picker { background: #24282d; color: #edece7; border-color: #4a5057; }
body.theme-dark .cie-choice-shared-tabs button { background: #30363c; color: #edece7; border-color: #4a5057; }
body.theme-dark .cie-choice-shared-tabs button.is-correct { color: #7fcf9b; }
body.theme-dark .cie-choice-shared-tabs button.is-wrong { color: #f2978b; }
body.theme-dark .cie-choice-shared-tabs button:hover { background: color-mix(in srgb, var(--cc-theme-accent) 16%, #24282d); border-color: var(--cc-theme-accent); }
body.theme-dark .cie-choice-shared-tabs button:is([aria-pressed="true"], :focus-visible) { outline-color: var(--cc-theme-accent); }
/* This stable gutter belongs to the card, outside the image/option coordinate plane. */
.cie-choice-image { --cc-image-gutter: 22px; --cc-image-line: rgb(158 151 137 / 48%); --cc-image-idle: rgb(255 252 244 / 2%); --cc-image-accent: #b2aa9b; --cc-image-hover: rgb(255 252 244 / 8%); --cc-image-press: rgb(255 252 244 / 13%); --cc-image-ring: rgb(188 181 166 / 20%); --cc-image-shadow: rgb(96 88 72 / 10%); --cc-image-ok: #15803d; --cc-image-ok-fill: rgb(34 197 94 / 10%); --cc-image-bad: #b91c1c; --cc-image-bad-fill: rgb(239 68 68 / 9%); display: block; position: relative; box-sizing: border-box; width: 100%; padding: 0 var(--cc-image-gutter) 0 0; margin: 0; border: 0; }
body.theme-dark .cie-choice-image { --cc-image-line: rgb(175 165 144 / 50%); --cc-image-idle: rgb(255 249 235 / 2%); --cc-image-accent: #c4beb1; --cc-image-hover: rgb(255 249 235 / 10%); --cc-image-press: rgb(255 249 235 / 16%); --cc-image-ring: rgb(226 219 205 / 16%); --cc-image-shadow: rgb(0 0 0 / 18%); --cc-image-ok: #7fcf9b; --cc-image-ok-fill: rgb(74 222 128 / 13%); --cc-image-bad: #f2978b; --cc-image-bad-fill: rgb(248 113 113 / 14%); }
.cie-choice-image > img { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; }
.cie-choice-image-layer, .cie-choice-hotspot-item { position: absolute; inset: 0; display: block; padding: 0; margin: 0; pointer-events: none; }
/* Keep options above the image, below the mobile action menu (z-index: 8).
   Do not isolate the image wrapper: dark paper images blend with the card background. */
.cie-choice-image-layer { right: var(--cc-image-gutter); z-index: 1; }
.cie-choice-image .cie-choice-hotspot { position: absolute; display: block; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--cc-image-line); border-radius: 4px; box-sizing: border-box; background: var(--cc-image-idle); color: var(--cc-image-ok); pointer-events: auto; cursor: pointer; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; transition: background-color .12s, border-color .12s, box-shadow .12s; }
@media (hover: hover) { .cie-choice-image .cie-choice-hotspot:hover:not(:disabled) { border-color: var(--cc-image-accent); background: var(--cc-image-hover); box-shadow: 0 0 0 2px var(--cc-image-ring), 0 2px 6px var(--cc-image-shadow); } }
.cie-choice-image[data-cie-choice-image] .cie-choice-hotspot:focus-visible { outline: 3px solid var(--cc-image-accent); outline-offset: 2px; border-color: var(--cc-image-accent); background: var(--cc-image-hover); box-shadow: 0 2px 6px var(--cc-image-shadow); }
.cie-choice-image .cie-choice-hotspot:active:not(:disabled) { border-color: var(--cc-image-accent); background: var(--cc-image-press); box-shadow: inset 0 0 0 1px var(--cc-image-accent); }
.cie-choice-image .cie-choice-hotspot:disabled { cursor: default; }
.cie-choice-image .cie-choice-hotspot.is-selected { border-width: 2px; border-color: var(--cc-image-accent); background: var(--cc-image-hover); }
.cie-choice-image .cie-choice-hotspot.is-correct { border-width: 2px; border-color: var(--cc-image-ok); background: var(--cc-image-ok-fill); color: var(--cc-image-ok); }
.cie-choice-image .cie-choice-hotspot.is-wrong { border-width: 2px; border-color: var(--cc-image-bad); background: var(--cc-image-bad-fill); color: var(--cc-image-bad); }
.cie-choice-image .cie-choice-hotspot[data-cie-choice-hit-target] { --cc-hit-border: 1px; overflow: visible; }
.cie-choice-image .cie-choice-hotspot[data-cie-choice-hit-target]:is(.is-selected, .is-correct, .is-wrong) { --cc-hit-border: 2px; }
.cie-choice-image .cie-choice-hotspot[data-cie-choice-hit-target]::before { content: ''; position: absolute; left: calc(var(--cc-hit-x) - var(--cc-hit-border)); top: calc(var(--cc-hit-y) - var(--cc-hit-border)); width: var(--cc-hit-width); height: var(--cc-hit-height); border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: auto; }
.cie-choice-image .cie-choice-hotspot[data-cie-choice-hit-target]:disabled::before { pointer-events: none; }
.cie-choice-hotspot-status { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; font: 800 14px/1 system-ui, sans-serif; pointer-events: none; user-select: none; }
.cie-choice-hotspot-status.is-correct { color: var(--cc-image-ok); }
.cie-choice-hotspot-status.is-wrong { color: var(--cc-image-bad); }
.cie-choice .cie-choice-item + .cie-choice-item { margin-top: 16px; }
.cie-choice .cie-choice-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.cie-choice-response-context { color: var(--cc-ink); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.cie-choice-response-context p { margin: 0 0 8px; }
.cie-choice-response-context[data-cie-choice-response-context="after"] { margin-top: 10px; }
.cie-choice-response-options { display: grid; gap: 8px; }
.cie-choice-response-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 3px; }
.cie-choice .cie-choice-response-option { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--cc-line); border-radius: 4px; background: var(--cc-bg); color: var(--cc-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.cie-choice-response-option strong { flex: 0 0 16px; }
.cie-choice .cie-choice-response-option:focus-visible { outline: 2px solid #b2aa9b; outline-offset: 2px; }
@media (hover: hover) { .cie-choice .cie-choice-response-option:hover:not(:disabled) { background: var(--cc-hover); border-color: #b2aa9b; box-shadow: 0 0 0 2px rgb(188 181 166 / 20%); } }
.cie-choice .cie-choice-response-option:active:not(:disabled), .cie-choice .cie-choice-response-option.is-selected { border-color: #b2aa9b; background: var(--cc-hover); box-shadow: inset 0 0 0 1px #b2aa9b; }
.cie-choice .cie-choice-response-option:disabled { cursor: default; }
.cie-choice .cie-choice-response-option.is-correct { border-color: var(--cc-ok); background: var(--cc-ok-bg); }
.cie-choice .cie-choice-response-option.is-wrong { border-color: var(--cc-bad); background: var(--cc-bad-bg); }
.cie-choice-response-status { background: transparent; border: 0; box-shadow: none; text-align: center; font: 800 16px/1 system-ui, sans-serif; }
.cie-choice-response-status.is-correct { color: var(--cc-ok); }
.cie-choice-response-status.is-wrong { color: var(--cc-bad); }
@media (prefers-reduced-motion: reduce) { .cie-choice .cie-choice-response-option { transition: none; } }
.cie-choice button:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 3px; }
.cie-choice .cie-choice-note, .cie-choice .cie-choice-error, .cie-choice .cie-choice-verdict { margin: 8px 0 0; font-size: 13px; }
.cie-choice .cie-choice-note { color: var(--cc-muted); }
.cie-choice .cie-choice-error, .cie-choice .cie-choice-verdict.is-wrong { color: var(--cc-bad); }
.cie-choice .cie-choice-verdict.is-correct { color: var(--cc-ok); }
.cie-choice .cie-choice-feedback { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.cie-choice .cie-choice-again { padding: 5px 0; border: 0; background: transparent; color: var(--cc-ink); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cie-choice-focus-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 0; }
.hall-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px 0; }
.hall-filter-actions[hidden], .hall-bulk-add-button[hidden] { display: none !important; }
.hall-filter-actions #cieChoiceFocusEntry:empty { display: none; }
.hall-filter-actions .cie-choice-focus-entry { padding: 0; }
.hall-filter-actions .hall-bulk-add-button { margin-left: auto; }
#hallBulkAddStatus { flex: 0 0 100%; margin: 0; color: var(--warm-muted, var(--workspace-muted, #64748b)); font-size: 12px; line-height: 1.5; text-align: right; overflow-wrap: anywhere; }
#hallBulkAddStatus:empty { display: none; }
:is(.cie-choice-focus-button, .hall-bulk-add-button) {
    --hall-action-fill: var(--warm-accent, var(--workspace-accent-fill, var(--tm-accent, #dc2626)));
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 40px; padding: 8px 14px; border: 1px solid var(--hall-action-fill); border-radius: 9px;
    background: var(--hall-action-fill); color: #fff; font-family: inherit; font-size: 13px; line-height: 1.4; font-weight: 600;
    white-space: nowrap; cursor: pointer; box-shadow: 0 2px 5px color-mix(in srgb, var(--hall-action-fill) 16%, transparent);
    transition: background-color .16s, border-color .16s, box-shadow .16s, transform .16s;
}
:is(.cie-choice-focus-button, .hall-bulk-add-button):hover:not(:disabled) { background-color: color-mix(in srgb, var(--hall-action-fill) 90%, #000); border-color: color-mix(in srgb, var(--hall-action-fill) 90%, #000); box-shadow: 0 3px 9px color-mix(in srgb, var(--hall-action-fill) 24%, transparent); }
:is(.cie-choice-focus-button, .hall-bulk-add-button):active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
:is(.cie-choice-focus-button, .hall-bulk-add-button):focus-visible { outline: 3px solid var(--hall-action-fill); outline-offset: 3px; }
:is(.cie-choice-focus-button, .hall-bulk-add-button):disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
:is(.cie-choice-focus-button, .hall-bulk-add-button)[aria-busy="true"] { cursor: progress; }
body.theme-dark :is(.cie-choice-focus-button, .hall-bulk-add-button) { --hall-action-fill: var(--warm-accent, var(--workspace-accent-fill, #c64444)); }
body.style-liquid-glass :is(.cie-choice-focus-button, .hall-bulk-add-button) { border-radius: 12px; background-image: var(--glass-sheen); }
body.style-liquid-glass :is(.cie-choice-focus-button, .hall-bulk-add-button):not(:disabled) { box-shadow: 0 4px 12px color-mix(in srgb, var(--hall-action-fill) 20%, transparent), var(--glass-highlight); }
.cie-choice-focus-caption { color: #64748b; font-size: 12px; }
body.theme-dark .cie-choice-focus-caption { color: #a4a59f; }
body.theme-dark #hallBulkAddStatus { color: var(--warm-muted, var(--workspace-muted, #a4a59f)); }
@media (max-width: 640px) { .cie-choice-focus-entry { margin: 0 12px; padding: 8px 0; gap: 6px 10px; } .cie-choice-focus-caption { flex-basis: 100%; } }
@media (max-width: 640px) { .hall-filter-actions { gap: 8px 12px; } .hall-filter-actions .cie-choice-focus-entry { margin: 0; } #hallBulkAddStatus { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .cie-choice-image .cie-choice-hotspot, .cie-choice-focus-button, .hall-bulk-add-button { transition: none; } }
@media print { .cie-choice, .cie-choice-image-layer { display: none !important; } }