/* Adapted presentation from the supplied exam_practice.py APP_CSS. */

.exam-app.exam-question{width:calc(100% - 2 * var(--space));max-width:var(--exam-width,740px);margin:var(--space) auto;padding:0}
.exam-app *{box-sizing:border-box}
.exam-app .exam-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space);margin-bottom:var(--space);padding:0 var(--space)}
.exam-app .exam-heading{min-width:0}
.exam-app h1{font-size:16px;margin:0;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.exam-app .exam-meta{font-size:12px;opacity:.78}
.exam-app .exam-image{display:block;width:100%;height:auto;margin:0}
.exam-app .exam-choices,.exam-app .exam-answer{margin:0}
.exam-app .exam-answer{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:var(--space);row-gap:var(--space);align-items:center}
.exam-app .exam-answer-left{display:contents}
.exam-app .exam-answer-actions{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:var(--space)}
.exam-app .exam-answer-label{grid-column:1;white-space:nowrap;font-weight:700;cursor:text}
.exam-app .exam-answer-left .exam-answer-fields{grid-column:2;min-width:0}
.exam-app .exam-answer-fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space)}
.exam-app .exam-answer-part{display:inline-flex;align-items:center;gap:var(--space);max-width:100%}
.exam-app .exam-answer-text{white-space:pre-wrap;align-self:center;line-height:1.4}
/* 入力枠の明示高さも、行高＋上下の半余白＋枠線に合わせる。 */
.exam-app .exam-answer-input,.exam-app .exam-answer-value{
  display:inline-block;width:8ch;min-width:5ch;max-width:100%;height:calc(1.4em + var(--space) + 2px);margin:0;padding:calc(var(--space) / 2) var(--space);
  border:1px solid #f5f3e99c;border-radius:var(--radius);background:#f5f3e9;color:var(--exam-board-bg);
  font:inherit;font-size:18px;font-weight:700;line-height:1.4;text-align:center;vertical-align:middle;
  box-shadow:inset 0 2px 3px #20382d1a;appearance:none;color-scheme:light;
}
.exam-app .exam-answer-input{width:var(--exam-control-width);min-width:var(--exam-control-width);max-width:var(--exam-control-width);flex:0 0 var(--exam-control-width);background:var(--exam-input-bg);color:var(--exam-chalk-color);resize:none;white-space:pre;overflow:auto;caret-color:var(--exam-chalk-color)}
.exam-app .exam-answer-value{width:auto;min-width:5ch}
.exam-app .exam-answer-value.is-wrong{background:#ffe0ce;color:#652f24;border-color:#f4b59c}
.exam-app .exam-answer-fraction{margin:0!important;line-height:1.2}
.exam-app .exam-answer-fraction>span{padding:calc(var(--space) / 2)!important}
.exam-app .exam-answer-fraction>span:first-child{border-bottom:1px solid currentColor}
.exam-app button,.exam-app .exam-next{width:var(--exam-control-width);flex:0 0 var(--exam-control-width);border:1px solid #f5f3e966;border-radius:var(--radius);padding:calc(var(--space) / 2) var(--space);cursor:pointer;font:inherit;font-weight:700;text-decoration:none;display:inline-block;text-align:center;transition:transform .12s,background-color .12s}
.exam-app button{margin:0;box-shadow:0 2px 0 #0e261b66;white-space:nowrap}
.exam-app .exam-submit{background:transparent;color:var(--exam-chalk-color);border-color:#f5f3e985;box-shadow:none;font-weight:800}
.exam-app .exam-skip{background:transparent;color:var(--exam-chalk-color);border-color:#f5f3e95c;box-shadow:none;font-weight:500;white-space:nowrap}
.exam-app .exam-submit:hover{background:#f5f3e914;border-color:#f5f3e9c2}.exam-app .exam-skip:hover{background:#f5f3e90e;color:var(--exam-chalk-color);border-color:#f5f3e9ad}
.exam-app button:active,.exam-app .exam-next:active{transform:translateY(1px)}
.exam-app .exam-feedback{padding:var(--space);border-radius:var(--radius);background:#ffffff08;border:1px solid #f5f3e94d;margin:var(--space) 0}
.exam-app .exam-feedback-line{margin-top:var(--space)}.exam-app .exam-feedback-label{font-size:13px;margin-bottom:var(--space);opacity:.85}
.exam-app .exam-review-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space);margin-top:var(--space)}
.exam-app .exam-review-actions button{width:auto;min-width:var(--exam-control-width);max-width:100%;flex:0 1 auto;white-space:normal}
.exam-app .exam-explanation{margin-top:var(--space);padding-top:var(--space);border-top:1px solid #f5f3e94d}
.exam-app .exam-explanation>h2{font-size:18px;margin:0;padding:0 var(--space)}
.exam-app .exam-solution-feedback{padding:0 var(--space) var(--space)}
.exam-app .exam-review-note{font-size:13px;margin:var(--space) 0 0;opacity:.85}
.exam-app .exam-missing-solution{padding:var(--space)}
.exam-app .exam-error{background:#49302e;color:var(--error-text);border:1px solid #a66a64;padding:var(--space);border-radius:var(--radius);margin-bottom:var(--space)}
.exam-app .exam-interaction{overflow-anchor:none}
.exam-app button:disabled{cursor:wait;transform:none}
.exam-app button:focus-visible,.exam-app a:focus-visible,.exam-app textarea:focus-visible{outline:3px solid #dcc88d;outline-offset:3px}

@media(prefers-reduced-motion:reduce){.exam-app *{transition:none!important}}

/* Integration with the existing blackboard panel. */
.practice-shell{--exam-control-width:148px}
.practice-shell .exam-app.exam-question{width:100%;max-width:900px;margin:0 auto;padding:0}
.practice-shell .exam-top{padding:0 0 var(--space)}
.practice-shell .exam-heading h2{font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.practice-shell .exam-error{background:#49302e;color:var(--error-text);border:1px solid #a66a64;padding:var(--space);border-radius:var(--radius);margin-bottom:var(--space)}
.practice-shell [hidden]{display:none!important}
.practice-shell .exam-review-note{overflow-wrap:anywhere}

/* １行の解答欄は縦バーを隠す。高さは上の共通入力規則に任せ、余白を二重管理しない。 */
.practice-shell .exam-answer-input{overflow-y:hidden}

/* Full-viewport focus mode; long questions scroll between fixed controls. */
html.practice-focus-open{overflow:hidden;scrollbar-gutter:stable}
.practice-focus-dialog{
 position:fixed;inset:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;
 top:var(--practice-viewport-top,0px);bottom:auto;
 height:var(--practice-viewport-height,100dvh);max-height:var(--practice-viewport-height,100dvh);margin:0;padding:0;border:0;border-radius:var(--radius);
 color:var(--exam-chalk-color);background:var(--exam-board-bg);overflow:hidden;font:inherit;
}
.practice-focus-dialog[open]{display:flex;flex-direction:column}
.practice-focus-dialog::backdrop{background:#16271f}
.practice-error-toast{opacity:1;transition:opacity 1s ease-out}
.practice-error-toast.is-fading{opacity:0}
.practice-error-toast{position:fixed;top:calc(var(--space) + env(safe-area-inset-top,0px));right:calc(var(--space) + env(safe-area-inset-right,0px));z-index:2;max-width:min(440px,calc(100vw - 2 * var(--space)));margin:0;padding:var(--space);border:1px solid var(--toast-border);border-radius:var(--radius);background:var(--toast-bg);color:#fff;font-size:var(--toast-font-size);line-height:1.7;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.25);overflow-wrap:anywhere;pointer-events:none}
.practice-focus-header{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space);padding:var(--space);border-bottom:1px solid var(--line);background:var(--exam-board-bg)}
.practice-focus-identity{display:flex;align-items:center;gap:var(--space);min-width:0;flex:1 1 450px}
.practice-focus-path{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space);min-width:0}
.practice-focus-brand{flex-shrink:0;font-size:24px;font-weight:700;letter-spacing:.08em;color:var(--mint)}
.practice-focus-header h2{margin:0;min-width:0;max-width:100%;font-size:20px;line-height:1.6;overflow:hidden;white-space:nowrap;text-overflow:clip}
.practice-correct-rate{font-size:12px;color:#b4b9b5;white-space:nowrap}
.practice-focus-timer{flex:none;display:flex;align-items:baseline;margin:0 0 0 auto;color:#b4b9b5;font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:13px;font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:pre}
.practice-focus-timer time{display:inline-block;min-width:5ch;text-align:right;font:inherit;font-size:18px;font-kerning:none;letter-spacing:0}
.practice-focus-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--space);scrollbar-gutter:stable}
.practice-focus-body:focus-visible{outline:2px solid var(--mint);outline-offset:-3px}
.practice-start-gate{max-width:560px;margin:0 auto;padding:var(--space);text-align:center}
.practice-start-gate .practice-gate-subject{margin:0 auto var(--space);color:var(--mint);font-size:48px;line-height:1.4;font-weight:700}
.practice-start-gate h3{margin:0 0 var(--space);font-size:28px;line-height:1.6}
.practice-start-gate p{margin:0 0 var(--space);line-height:1.9;font-size:17px}
.practice-gate-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--space)}
.practice-start-gate .practice-gate-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:300px;margin-inline:auto;align-items:stretch}
:is(.practice-focus-dialog,.practice-leave-dialog) button{font:inherit;cursor:pointer;min-height:48px;padding:calc(var(--space) / 2) var(--space);border-radius:var(--radius);border:1px solid var(--border);font-weight:700}
:is(.practice-focus-dialog,.practice-leave-dialog) .practice-primary,
.exam-card[aria-pressed="true"],.exam-card[aria-pressed="true"]:hover{color:#fff;background:var(--primary-button-fill);border-color:var(--primary-button-fill)}
:is(.practice-focus-dialog,.practice-leave-dialog) .practice-secondary{color:var(--text);background:var(--panel-2)}
:is(.practice-focus-dialog,.practice-leave-dialog) button:hover,.exam-card[aria-pressed="true"]:hover{filter:brightness(1.08)}
:is(.practice-focus-dialog,.practice-leave-dialog) button:disabled{opacity:.55;cursor:wait}
:is(.practice-focus-dialog,.practice-leave-dialog) button:focus-visible{outline:3px solid #dcc88d;outline-offset:3px}
.practice-focus-footer{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,240px));justify-content:center;gap:var(--space);padding:var(--space) var(--space) max(var(--space),env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--exam-board-bg)}
.practice-focus-footer.practice-finished-actions{grid-template-columns:repeat(2,minmax(0,260px))}
/* Reserve space for iPad's floating keyboard/AutoFill accessory while answering. */
.practice-touch-editing .practice-focus-footer{padding-bottom:calc(max(var(--space),env(safe-area-inset-bottom,0px)) + 80px)}
@media(prefers-reduced-motion:reduce){.practice-error-toast{transition:none}}
.practice-leave-dialog{width:min(460px,calc(100vw - 2 * var(--space)));max-width:calc(100vw - 2 * var(--space));margin:auto;padding:var(--space);border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);color:var(--text);font:inherit}
.practice-leave-dialog[open]{display:grid;gap:var(--space)}
.practice-leave-dialog::backdrop{background:rgba(0,0,0,.65)}
.practice-leave-dialog h2{margin:0;font-size:22px}
.practice-leave-dialog p{line-height:1.9;margin:0}


/* Primary actions remain focused for Enter, without a decorative focus ring. */
:is(.practice-focus-dialog,.practice-leave-dialog) .practice-primary:focus{outline:none}