/* Assessment surfaces reconstructed from the public video references.
   Scoped to the exercise dialog; the preparation site keeps its own identity. */
body.exam-open { overflow: hidden; }
body.exam-open > :not(#exam) { display: none !important; }
#exam {
  --yellow: #ffc400; --blue: #269fd1; --magenta: #ae3485;
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #fff; color: #555; font-family: Arial, Helvetica, sans-serif;
  overflow: auto; overscroll-behavior: contain;
}
#exam::backdrop { background: #fff; }
#exam:fullscreen { width: 100vw; height: 100dvh; }
#exam .exam-controls { position: absolute; right: 9px; top: 5px; display: flex; z-index: 2; }
#exam .exam-controls button { width: 44px; height: 44px; border: 0; background: transparent; color: #777; font-size: 25px; border-radius: 0; }
#exam button:active { transform: none; }
#exam button:focus-visible { outline: 2px solid #064bb5; outline-offset: 3px; }
#exam .play-area { padding: 0; width: 100%; min-height: 100%; font-family: inherit; }
#exam .play-top { flex: none; height: 61px; margin: 0 30px; padding: 18px 102px 19px 0; border: 0; position: relative; color: #777; font-size: 13px; }
#exam .play-top::before, #exam .play-top::after { content: ''; position: absolute; bottom: 0; left: 0; height: 3px; }
#exam .play-top::before { width: 100%; background: #eee; }
#exam .play-top::after { width: var(--remaining, 100%); background: var(--yellow); }
#exam[data-kind="grid"] .play-top::after { background: var(--magenta); }
#exam .clock { color: #777; }
#exam .clock.urgent { color: #c12e30; }
#exam #stage { padding: 22px 16px; min-height: calc(100dvh - 61px); flex: 1; width: 100%; gap: 0; }
#exam #feedback { display: none; }
#exam h3 { font-family: inherit; }
:is(#exam,.assessment-preview) .digit-machine { display: flex; flex-direction: column; align-items: center; width: min(420px, 100%); }
:is(#exam,.assessment-preview) .equation { width: 100%; min-height: 74px; gap: 6px; margin: 0 0 13px; padding: 9px 10px; flex-wrap: nowrap; font-size: 27px; font-weight: 300; background: linear-gradient(135deg,#fff 66%,#ececec); box-shadow: 0 2px 5px #0000001a; border: 1px solid #f4f4f4; border-radius: 2px; }
:is(#exam,.assessment-preview) .equation strong { font-weight: 400; }
:is(#exam,.assessment-preview) .slot { min-width: 34px; width: 42px; height: 51px; font-size: 32px; border: 0; border-radius: 9px; background: linear-gradient(140deg,#e1e1e1,#efefef); color: #555; }
:is(#exam,.assessment-preview) .slot.active { background: #ff9d00; box-shadow: inset 0 1px 3px #b5760055; border: 0; }
:is(#exam,.assessment-preview) .keypad { display: grid; grid-template-columns: repeat(3, 1fr); width: 278px; max-width: 100%; gap: 12px; }
:is(#exam,.assessment-preview) .keypad button { height: 74px; border: 1px solid #ffdb54; border-radius: 14px; background: linear-gradient(132deg,#ffd000,#ffbd00); box-shadow: inset 3px 3px 7px #ffe96888, 1px 3px 4px #d2b54a35; color: #7d6829; font-size: 33px; font-weight: 300; }
:is(#exam,.assessment-preview) .keypad button:disabled { opacity: 1; background: #eee; border-color: #eee; box-shadow: none; color: #ccc; }
:is(#exam,.assessment-preview) .erase-key { display: grid; place-items: center; width: 278px; max-width: 100%; height: 48px; margin-top: 12px; border: 0; border-radius: 3px; background: linear-gradient(135deg,#f8f8f8,#eee); color: #999; }
:is(#exam,.assessment-preview) .erase-key svg { height: 28px; width: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; }
:is(#exam,.assessment-preview) .exam-confirm { display: grid; place-items: center; width: 58px; height: 57px; flex: none; border: 0; border-radius: 15px; margin: 18px auto 0; color: #555; background: linear-gradient(130deg,#f1f1f1,#dedede); box-shadow: 1px 2px 4px #00000016; }
:is(#exam,.assessment-preview) .exam-confirm svg { width: 27px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(#exam,.assessment-preview) .exam-confirm:disabled { opacity: .35; }
:is(#exam,.assessment-preview) .switch-machine { width: min(360px,100%); display: flex; flex-direction: column; align-items: center; }
:is(#exam,.assessment-preview) .two-row .branch-network { height: 90px; }
:is(#exam,.assessment-preview) .two-row .funnel { height: 30px; }
:is(#exam,.assessment-preview) .two-row .fixed-code { font-size: 21px; padding: 7px 12px; }
:is(#exam,.assessment-preview) .shapes { gap: 14px; margin: 0; }
:is(#exam,.assessment-preview) .shape { width: 57px; height: 57px; background: linear-gradient(130deg,#e8e8e8,#d4d4d4); border-radius: 13px; box-shadow: 1px 2px 4px #00000016; }
:is(#exam,.assessment-preview) .shape svg { width: 35px; height: 35px; fill: currentColor; }
:is(#exam,.assessment-preview) .shape.s0 { color: #ffe000; }
:is(#exam,.assessment-preview) .shape.s1 { color: #00b779; }
:is(#exam,.assessment-preview) .shape.s2 { color: #f52222; }
:is(#exam,.assessment-preview) .shape.s3 { color: #04a1df; }
:is(#exam,.assessment-preview) .funnel { display: block; width: 76px; height: 43px; flex: none; overflow: visible; margin: 8px 0 0; }
:is(#exam,.assessment-preview) .funnel.flipped { transform: rotate(180deg); margin: 0 0 8px; }
:is(#exam,.assessment-preview) .fixed-code { background: linear-gradient(#2465b7,#164790); border: 2px solid #245bab; color: #fff; border-radius: 6px; padding: 9px 13px; font-size: 24px; letter-spacing: 6px; line-height: 1; font-weight: 300; }
:is(#exam,.assessment-preview) .pipe-stem { height: 12px; width: 6px; background: #aed5e7; }
:is(#exam,.assessment-preview) .branch-network { position: relative; width: 100%; height: 126px; flex: none; }
:is(#exam,.assessment-preview) .pipes { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #b0d9e7; stroke-width: 6; }
:is(#exam,.assessment-preview) .branches { display: flex; justify-content: space-between; gap: 10px; position: absolute; inset: 0; align-items: center; padding: 0; }
:is(#exam,.assessment-preview) .branches button { padding: 12px 7px; font-size: 23px; letter-spacing: 5px; border: 2px solid #8dc7e5; background: linear-gradient(145deg,#c3e9fa,#9dd6f1); border-radius: 5px; color: #5796bc; font-weight: 300; min-width: 0; width: 30%; }
:is(#exam,.assessment-preview) .branches button.selected { border-color: #2465b7; background: linear-gradient(#3278c9,#164790); color: #fff; }
#exam[data-kind="grid"] #stage { justify-content: center; }
:is(#exam,.assessment-preview) .dot-board, #exam .visual-board { width: min(800px,calc(100vw - 64px)); height: min(460px,calc(100dvh - 170px)); min-height: 230px; aspect-ratio: auto; background: var(--blue); border-radius: 0; margin: 0; flex: none; }
:is(#exam,.assessment-preview) .dot { width: 44px; height: 44px; border-radius: 50%; }
:is(#exam,.assessment-preview) .dot::before { width: clamp(20px,3vw,34px); height: clamp(20px,3vw,34px); background: #fff; box-shadow: none; }
:is(#exam,.assessment-preview) .dot.lit::before { background: var(--magenta); width: clamp(20px,3vw,34px); height: clamp(20px,3vw,34px); box-shadow: 0 0 0 2px white; }
:is(#exam,.assessment-preview) .dot.chosen::before { width: clamp(24px,3vw,34px); height: clamp(24px,3vw,34px); background: var(--magenta); box-shadow: 0 0 0 2px white; }
:is(#exam,.assessment-preview) .dot span { font: 18px Arial,sans-serif; }
:is(#exam,.assessment-preview) .dot:active { transform: translate(-50%,-50%); }
#exam .visual-board { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
#exam .visual-board h3 { color: #fff; font: 14px Arial,sans-serif; text-align: center; margin: 0 0 20px; letter-spacing: 0; }
#exam .patterns { display: flex; flex-wrap: nowrap; margin: 0; gap: clamp(20px,4vw,45px); align-items: stretch; justify-content: center; }
#exam .pattern { display: grid; grid-template-columns: repeat(var(--columns),1fr); gap: clamp(8px,1.6vw,17px); border-radius: 0; background: transparent; padding: 6px; align-content: center; }
#exam .cell { height: clamp(11px,1.5vw,17px); width: clamp(11px,1.5vw,17px); border-radius: 0; background: transparent; display: grid; place-items: center; }
#exam .cell::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #c0e7f6; }
#exam .cell.on::before { background: #fff; width: 100%; height: 100%; border-radius: 2px; }
#exam .mirror-axis { width: 2px; background: #fff; }
#exam .visual-actions { display: flex; align-items: center; justify-content: center; gap: 25px; height: 66px; width: 100%; }
#exam .visual-actions button { min-height: 40px; min-width: 100px; padding: 9px 25px; border: 0; border-radius: 25px; color: white; background: var(--magenta); font: 14px Arial,sans-serif; }
#exam .visual-actions .undo-recall { position: absolute; margin-right: 210px; min-width: 44px; padding: 0; width: 44px; color: #888; background: transparent; font-size: 25px; }
#exam[data-phase="memorize"] .dot-board { margin-bottom: 66px; }
#exam .line-composition { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#exam .line-composition>div { display: flex; align-items: center; gap: 18px; }
#exam .line-composition strong { color: white; font: 32px Arial,sans-serif; }
#exam .line-pattern { width: min(145px,25vw); height: min(145px,25vw); border: 1px solid #ffffff88; fill: #d6f1ff; }
#exam .line-pattern line { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
#exam[data-phase="finished"] #stage { min-height: calc(100dvh - 61px); max-width: 800px; margin: auto; }
#exam .session-review { max-width: 550px; width: 100%; text-align: left; margin: 25px 0; }
#exam .session-review summary { cursor: pointer; padding: 14px; background: #f3f3f3; }
#exam .session-review p { border-bottom: 1px solid #ddd; padding-bottom: 12px; max-width: none; }
@media(max-width:500px) {
  #exam .play-top { margin: 0 12px; font-size: 11px; padding-right: 80px; height: 55px; }
  #exam .exam-controls { right: 0; }
  #exam .exam-controls button { width: 39px; }
  #exam #stage { min-height: calc(100dvh - 55px); padding: 15px 12px; }
  :is(#exam,.assessment-preview) .keypad { width: 250px; gap: 10px; }
  :is(#exam,.assessment-preview) .keypad button { height: 68px; }
  :is(#exam,.assessment-preview) .erase-key { width: 250px; }
  :is(#exam,.assessment-preview) .equation { font-size: 22px; gap: 4px; padding: 8px 4px; }
  :is(#exam,.assessment-preview) .slot { min-width: 29px; width: 36px; height: 49px; font-size: 27px; }
  :is(#exam,.assessment-preview) .dot-board, #exam .visual-board { width: calc(100vw - 24px); height: min(390px,calc(100dvh - 160px)); }
  #exam .visual-board { padding: 12px; }
  #exam .visual-board h3 { font-size: 12px; }
  #exam .patterns { gap: 18px; }
  #exam .pattern { gap: 10px; padding: 4px; }
  :is(#exam,.assessment-preview) .shape { width: 49px; height: 49px; }
  :is(#exam,.assessment-preview) .shapes { gap: 11px; }
  :is(#exam,.assessment-preview) .branches button { font-size: 21px; letter-spacing: 3px; }
  #exam .stats { gap: 18px; }
}
@media(max-height:600px) and (min-width:501px) {
  #exam #stage { padding: 10px; }
  :is(#exam,.assessment-preview) .digit-machine { width: 330px; }
  :is(#exam,.assessment-preview) .equation { min-height: 57px; margin-bottom: 9px; }
  :is(#exam,.assessment-preview) .slot { height: 41px; }
  :is(#exam,.assessment-preview) .keypad { width: 225px; gap: 8px; }
  :is(#exam,.assessment-preview) .keypad button { height: 52px; font-size: 27px; border-radius: 10px; }
  :is(#exam,.assessment-preview) .erase-key { width: 225px; height: 36px; margin-top: 8px; }
  :is(#exam,.assessment-preview) .exam-confirm { margin-top: 10px; height: 46px; width: 48px; }
  :is(#exam,.assessment-preview) .shape { width: 44px; height: 44px; border-radius: 9px; }
  :is(#exam,.assessment-preview) .shape svg { width: 28px; height: 28px; }
  :is(#exam,.assessment-preview) .funnel { height: 31px; width: 57px; margin-top: 5px; }
  :is(#exam,.assessment-preview) .funnel.flipped { margin-bottom: 5px; }
  :is(#exam,.assessment-preview) .branch-network { height: 91px; }
  :is(#exam,.assessment-preview) .fixed-code { padding: 7px 12px; font-size: 20px; }
  #exam .cell { height: 11px; width: 11px; }
  #exam .pattern { gap: 9px; }
  #exam .line-pattern { width: 100px; height: 100px; }
}