/* The task takes over the viewport without changing the surrounding app layout.
   360x640 budget: 344 board + 240 chrome = 584px, including all five gaps. */
body.task-active { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body.task-active > main { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; padding: 0; overflow: hidden; }
body.task-active > main > :not(#study-app) { display: none !important; }
body.task-active #study-app { width: 100%; height: 100%; margin: 0; padding: 0; }
.task-screen {
  --task-chrome-height: 240px;
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(0,1fr);
  grid-template-rows: 56px auto 56px 48px 28px 28px;
  align-content: start; justify-items: center; row-gap: 4px;
  width: 100%; height: 100vh; height: 100dvh; margin: 0;
  padding: env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) max(4px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none;
}
.task-screen > :not(.task-board) { width: 100%; max-width: 480px; min-width: 0; margin: 0; }
.task-screen .task-top { display: grid; grid-template-columns: 44px minmax(0,1fr); grid-template-rows: 34px 6px; align-content: center; align-items: center; column-gap: 8px; row-gap: 3px; height: 56px; min-height: 0; padding: 0; }
.task-screen .task-top h2 { margin: 0; font-size: 18px; line-height: 24px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.task-screen .task-back { grid-row: 1 / 3; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); box-shadow: none; font-size: 24px; }
.task-screen .task-top progress { display: block; grid-column: 2; width: 100%; height: 6px; margin: 0; border: 0; border-radius: 5px; overflow: hidden; accent-color: var(--accent); background: var(--surface-raised); }
.task-screen .task-top progress::-webkit-progress-bar { background: var(--surface-raised); border-radius: 5px; }
.task-screen .task-top progress::-webkit-progress-value { background: var(--accent); border-radius: 5px; }
.task-screen .task-top progress::-moz-progress-bar { background: var(--accent); border-radius: 5px; }
/* StudyBoard sizes its child to 8 * floor(availableWidth / 8). Do not stretch
   its integer tracks or reserve fractional aspect-ratio whitespace here. */
.task-screen .task-board { display: grid; place-items: center; width: min(100%,480px,calc(100vh - var(--task-chrome-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))); width: min(100%,480px,calc(100dvh - var(--task-chrome-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))); min-width: 0; padding: 0; margin: 0; border: 0; overflow: visible; }
.task-screen .task-result { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 56px; min-height: 56px; max-height: 56px; padding: 4px 9px; border: 0; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; line-height: 18px; overflow: hidden; }
.task-screen .task-result.neutral { background: var(--surface); }
.task-screen .task-result.neutral .task-turn::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; border: 1px solid var(--muted); border-radius: 50%; background: #fff; vertical-align: -1px; }
.task-screen .task-result.neutral .task-turn.black::before { background: #171717; }
.task-screen .task-result.correct { background: rgba(129,182,76,.15); }
.task-screen .task-result.wrong { background: rgba(227,105,105,.15); }
.task-screen .task-theme { display: block; margin: 0; color: var(--muted); font-size: 12px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-screen .task-theme:empty { display: none; }
.task-screen .task-actions { display: flex; gap: 8px; align-items: stretch; height: 48px; min-height: 48px; }
.task-screen .task-actions > button { flex: 1 1 0; min-width: 0; width: auto; height: 48px; min-height: 48px; margin: 0; padding: 8px 10px; font-size: 14px; line-height: 18px; box-shadow: none; }
.task-screen .task-skip { display: inline-block; justify-self: center; width: max-content; max-width: 100%; min-width: 0; height: 28px; min-height: 28px; margin: 0; padding: 2px 4px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-size: 14px; line-height: 24px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.task-screen .task-skip:hover:not(:disabled), .task-screen .task-skip:focus:not(:disabled), .task-screen .task-skip:focus-visible:not(:disabled), .task-screen .task-skip:active:not(:disabled) { background: transparent; color: var(--text); box-shadow: none; transform: none; text-decoration: underline; }
.task-screen .task-skip:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 1px; }
.task-screen .task-skip:disabled { background: transparent; color: var(--muted); opacity: .55; }
.task-screen .task-skip:active:not(:disabled), .task-screen .task-back:active:not(:disabled) { box-shadow: none; transform: none; }
.task-screen .task-moves { position: relative; height: 28px; min-height: 28px; border: 0; padding: 0; z-index: 60; }
.task-screen .task-moves > summary { display: block; list-style: none; min-height: 28px; height: 28px; margin: 0; padding: 2px 8px; text-align: center; font-size: 14px; line-height: 24px; color: var(--muted); }
.task-screen .task-moves > summary::-webkit-details-marker { display: none; }
/* Expanding notation overlays the board instead of adding a page-height row. */
.task-screen .task-moves[open] > :not(summary) { position: absolute; inset-inline: 0; bottom: 32px; z-index: 1; max-height: min(180px,40vh); max-height: min(180px,40dvh); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 4px 24px #0005; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }