/* Shared visual language for authoring, solving, reviewing and print preview.
   Screen-only rules leave the physical worksheet geometry intact. */
@media screen {
  body.test-builder, body.test-page {
    --ink: #233d35; --muted: #66756e; --accent: #24664f; --accent-dark: #184c3a;
    --panel-bg: #fffefa; --panel-border: #dce3dc; --hero-ink: #233d35; --hero-muted: #66756e;
    --test-paper: var(--panel-bg); --test-ink: var(--ink); --test-line: var(--panel-border); --test-accent: var(--accent);
    background: #f3f4ef; color: var(--ink); font: 15px/1.6 system-ui, sans-serif;
  }
  .test-builder #test-app { max-width: 1080px; padding: 48px 32px 64px; }
  .test-builder .picker-header { margin: 0 0 32px; padding-right: 28px; }
  .test-builder .picker-path { font-size: 12px; margin-bottom: 32px; }
  .test-builder .picker-path a { color: var(--muted); }
  .workspace-eyebrow, .workspace-step { font-size: 11px; letter-spacing: .16em; font-weight: 750; color: var(--accent); }
  .workspace-eyebrow { margin: 0 0 8px; }
  .workspace-step { margin: 0 0 10px; }
  .test-builder #builder-heading { font-size: clamp(30px, 5vw, 48px); letter-spacing: -.045em; line-height: 1.15; margin: 0; }
  .test-builder .picker-description { color: var(--muted); font-size: 14px; line-height: 1.65; }
  .test-builder .builder-section, .test-page .test-card {
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 20px;
    padding: clamp(22px, 3.5vw, 40px); box-shadow: 0 4px 20px #243b2e04; margin-bottom: 20px;
  }
  .test-builder h2 { font-size: 23px; letter-spacing: -.025em; line-height: 1.3; margin: 0 0 22px; }
  .test-builder .builder-fields { gap: 12px 24px; }
  .test-builder label { font-size: 13px; font-weight: 600; }
  .test-builder input:not([type=checkbox]), .test-builder select, .test-builder textarea,
  .test-page input:not([type=checkbox]), .test-page select, .test-page textarea {
    background: #fff; color: var(--ink); border: 1px solid #cdd7cf; border-radius: 10px;
    padding: 12px 14px; min-height: 46px; font: inherit; box-shadow: 0 2px 3px #243b2e03;
  }
  .test-builder input[type=file] { background: #f5f7f2; border-style: dashed; padding: 20px; }
  .test-builder input::file-selector-button { border: 0; border-radius: 6px; background: #e4ece4; color: var(--ink); padding: 8px 12px; margin-right: 12px; font: inherit; cursor: pointer; }
  .test-builder input[type=checkbox], .test-page input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
  .test-builder .controls { gap: 10px; margin-top: 16px; }
  .test-builder button:not(.icon-btn), .test-page button:not(.icon-btn) { border-radius: 10px; min-height: 44px; font: 600 14px/1.4 system-ui, sans-serif; padding: 11px 16px; }
  .test-builder button:not(.icon-btn) { background: #f1f5ef; color: var(--ink); border: 1px solid var(--panel-border); }
  .test-builder #generate-link, .test-builder [data-test-action=load-pgn], .test-builder [data-test-action=copy-link],
  .test-builder #sheet-print, .print-builder #open-question-sheet { background: var(--accent); border-color: var(--accent); color: white; }
  .test-builder :focus-visible, .test-page :focus-visible { outline: 3px solid #b58837; outline-offset: 3px; }
  .test-builder button:not(:disabled):hover, .test-page button:not(:disabled):hover { filter: brightness(.95); }
  .test-builder .builder-options { margin-top: 14px; }
  .test-builder summary { cursor: pointer; font-weight: 600; }
  .test-builder .builder-options > summary { padding: 18px 0; }
  .test-builder #builder-status { border-radius: 10px; background: #eef3ec; padding: 12px 16px; margin-top: 20px; }
  .test-builder #builder-status.test-error { background: #fff1e8; color: #8c361a; }
  .test-builder .builder-question { padding: 10px 14px; border: 1px solid var(--panel-border); border-radius: 12px; margin-top: 10px; background: #fff; }
  .test-builder .builder-question:has(input[name=include]:checked) { background: #f0f5ee; border-color: #a4bca9; }
  .test-builder .builder-question-caption { line-height: 1.5; }
  .test-builder #selected-questions-section { margin-top: 28px; padding-top: 26px; }
  .test-builder .picker-count { background: #eaf0e7; color: var(--accent-dark); border-radius: 20px; padding: 5px 11px; font-size: 12px; }
  .test-builder #builder-output { border-color: #a4bca9; }
  body.test-page { padding: 36px 24px; }
  .test-page .test-shell { max-width: 1080px; }
  .test-page .test-brand { display: flex; align-items: center; gap: 12px; letter-spacing: .02em; text-transform: none; margin: 0 0 28px; font-size: 13px; }
  .test-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; background: #234f3d; border-radius: 10px; color: white; font-size: 26px; }
  .test-brand-divider { color: #b4bfb4; }
  .test-page .test-card h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.04em; margin-bottom: 18px; }
  .test-page .test-eyebrow { font-size: 11px; letter-spacing: .14em; margin: 0 0 12px; }
  .test-page .test-muted { color: var(--muted); font-size: 14px; }
  .test-page #welcome { max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vw, 56px); }
  .test-page #student-form { margin: 28px 0 0; max-width: 420px; }
  .test-page #student-form button { width: 100%; }
  .test-guidance { padding-top: 24px; margin-top: 28px; border-top: 1px solid var(--test-line); line-height: 1.8; }
  .test-page .test-note:empty { display: none; }
  .test-page .test-list { display: grid; gap: 10px; margin-top: 24px; }
  .test-page .test-list li { padding: 18px; border: 1px solid var(--test-line); border-radius: 12px; background: #fff; }
  .test-page #result-share-tools { margin-top: 26px; padding: 24px; border: 1px solid var(--test-line); border-radius: 14px; background: #f4f7f1; }
  .test-page .teacher-question-card { padding: 16px; background: #fff; border: 1px solid var(--test-line); border-radius: 14px; }
  .test-page .teacher-view-options { padding-bottom: 12px; border-bottom: 1px solid var(--test-line); }
  .test-page[data-theme=space] { --panel-bg: #172736; --ink: #e7eee9; --muted: #b3c3bc; --panel-border: #41515c; background: #10202d; }
  .test-page[data-theme=space] :is(.test-list li, .teacher-question-card, #result-share-tools) { background: #243b45; }
  .test-page[data-theme=space] :is(input:not([type=checkbox]), select, textarea) { background: #203440; color: #e7eee9; border-color: #607582; }
  body[data-test-screen=question-play] #test-review { border: 1px solid var(--panel-border); padding: 14px; border-radius: 14px; }
  :is(.test-builder, .test-page) .sheet-tools { padding: 18px; margin: 18px 0; background: #eef3ec; border: 1px solid #dce3dc; border-radius: 12px; }
  :is(.test-builder, .test-page) .sheet-viewport { background: #e5e9e2; border: 1px solid #d5ddd2; border-radius: 12px; }
  @media (max-width: 700px) {
    .test-builder #test-app { padding: 28px 16px 40px; }
    .test-builder .picker-path { margin-bottom: 24px; }
    .test-builder .builder-section, .test-page .test-card { padding: 22px 18px; border-radius: 16px; }
    .test-builder .builder-fields { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .test-builder input:not([type=checkbox]), .test-builder select, .test-builder textarea { font-size: 16px; }
    body.test-page { padding: max(20px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom)); }
    .test-page .test-brand { gap: 8px; font-size: 12px; margin-bottom: 20px; }
    .test-page #result-share-tools { padding: 16px; }
    .test-page .teacher-question-card { padding: 10px; }
    .test-builder .controls { flex-wrap: wrap; }
    .test-builder .controls > button { flex: 1 1 auto; }
    .test-page:is([data-test-screen=question-list], [data-test-screen=test-report]) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  }
}