/* Deneme screen: the booklet (question) and the answer sheet (optik form). Loaded after app.css.
   Habit it teaches: circle the letter in the question, then fill the bubble on the form.
   The circle is pencil-like ink; a filled bubble is solid ink, like a pencil on the paper sheet.
   Laptop: no page scroll, the question on the left, the form on the right with its own scroll.
   Phone: question, a one-row form strip under the choices, form. */

/* ---------- Exam clock in the top bar: the number she checks all the time ---------- */
.dn-clock { gap: var(--sp-2); padding: 0 var(--sp-4) 0 var(--sp-3); }
.dn-clock .ic { width: 22px; height: 22px; }
.dn-clock b { font-size: var(--fs-lg); line-height: 1; min-width: 4.4ch; }
/* Narrow phones (360px): the pill must not push the top bar past the screen edge. */
@media (max-width: 380px) {
  .dn-clock { padding: 0 var(--sp-3) 0 var(--sp-2); }
  .dn-clock b { font-size: 1.2rem; }
}

/* ---------- Head: "Ana sayfa" opens the break question first ---------- */
.dn-head h1 { overflow-wrap: anywhere; }

/* ---------- Booklet: the question card ---------- */
.dn-qcard .q-label { margin: 0; }
.dn-qcard .stem { max-width: 68ch; }
.dn-choices { margin-bottom: 0; }
.dn-code { margin-top: var(--sp-3); }
@media (min-width: 560px) { .dn-choices.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { .dn-choices.four { grid-template-columns: 1fr 1fr; } }
.dn-choices .choice .letter { position: relative; }
.dn-choices .choice.marked { border-color: var(--ink-3); }
.dn-choices .choice.marked .letter { background: var(--surface); color: var(--ink); }
/* A hand-drawn pencil ring around the letter: slightly uneven, slightly turned. */
.dn-choices .choice.marked .letter::after {
  content: ''; position: absolute; inset: -5px -6px -4px -5px; border: 2.5px solid var(--ink);
  border-radius: 54% 46% 52% 48% / 48% 56% 44% 52%; transform: rotate(-12deg); opacity: .85;
  animation: dn-ring var(--t-med) var(--ease);
}
@keyframes dn-ring { from { opacity: 0; transform: rotate(-40deg) scale(.7); } }

/* One line under the choices says what to do next. Calm tints, never an alarm. */
.dn-code { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.dn-guide {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0; min-height: 40px; padding: 6px var(--sp-3);
  border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dn-guide .ic { width: 18px; height: 18px; }
.dn-guide.todo { background: var(--accent-soft); color: var(--accent-ink); }
.dn-guide.ok { background: var(--mint-soft); color: var(--mint); }
.dn-guide.diff { background: var(--sky-soft); color: var(--ink); }
.dn-guide.diff .ic { color: var(--sky); }

/* Phone: the current form row right under the question, the same bubbles as the full form. */
.dn-strip {
  display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
/* Row header like the sheet's number column: a small caption over the question number. */
.dn-strip-name { display: grid; justify-items: start; margin-right: auto; line-height: 1.2; white-space: nowrap; }
.dn-strip-name span { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.dn-strip-name b { font-size: var(--fs-lg); font-weight: 800; }
@media (max-width: 380px) { .dn-strip .dn-bubbles { gap: 6px; } }

/* ---------- Optik form ---------- */
.dn-form-head h2 { font-size: var(--fs-lg); }
.dn-exits { display: flex; align-items: center; gap: 6px; margin: var(--sp-1) 0 0; }
.dn-exits .ic { width: 16px; height: 16px; }
.dn-form .dn-subj { margin: var(--sp-3) 0 var(--sp-1); }

/* A filled bubble is solid ink, like pencil on paper. */
.dn-bub:hover:not(.on) { border-color: var(--ink-2); background: var(--surface-2); }
.dn-bub.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* Booklet form rows: the number is a button that opens that question. */
button.dn-no {
  min-height: 44px; padding: 0 2px; border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-weight: 700; color: var(--ink-2); text-align: right; cursor: pointer;
}
button.dn-no:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.dn-exam .dn-row { grid-template-columns: 3ch 1fr; padding: 2px var(--sp-2); border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease); }
.dn-exam .dn-row.now { background: var(--surface-2); border-bottom-color: transparent; }
.dn-exam .dn-row.now .dn-no { color: var(--accent-ink); font-weight: 800; }
.dn-exam .dn-row.now.todo { background: var(--accent-soft); }
.dn-row.nudge { animation: dn-nudge 900ms var(--ease); }
@keyframes dn-nudge { 25% { box-shadow: inset 0 0 0 2px var(--accent); } }

/* ---------- Laptop and tablet (≥ 960 px): the form sits on the right ---------- */
@media (min-width: 960px) {
  .dn-exam .dn-strip { display: none; }
  .dn-exam .q-head { margin-bottom: var(--sp-2); }
  .dn-exam .q-head .btn { min-height: 40px; }
  .dn-choices .choice { min-height: 48px; padding: 6px var(--sp-3); }
  .dn-qcard { padding: var(--sp-4) var(--sp-5); }
  .dn-qcard .stem:not(.big) { font-size: 1.2rem; line-height: 1.5; margin-bottom: var(--sp-3); }
  .dn-desk {
    display: grid; gap: var(--sp-4); align-items: start;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 32vw, 400px);
    grid-template-areas: "q form";
  }
  .dn-desk > .card { margin: 0; min-height: 0; }
  .dn-qcard { grid-area: q; }
  /* The page scrolls here; the form stays in view beside it with its own scroll. */
  .dn-exam .dn-form {
    grid-area: form; position: sticky; top: 76px; max-height: calc(100dvh - 92px);
    display: flex; flex-direction: column; padding: var(--sp-4);
  }
  .dn-exam .dn-form-head { flex: none; }
  .dn-exam .dn-form-rows {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: var(--sp-2) calc(-1 * var(--sp-2)) 0; padding: 0 var(--sp-2);
  }
  .dn-exam .dn-rows { columns: auto; }
  .dn-exam .dn-form .dn-subj { position: sticky; top: 0; z-index: 1; margin: 0; padding: var(--sp-2) 0 var(--sp-1); background: var(--surface); }
  .dn-exam .dn-finish { flex: none; margin-top: var(--sp-3); }
}
/* Wide screens (1366×768, 1920×1080): one screen, no page scroll, two columns: the question
   and the optik form, both full height. No scratchpad: she works in her notebook, as on paper
   in the real exam. Long reading passages scroll inside the card with a soft fade. */
@media (min-width: 1200px) and (min-height: 560px) {
  body:has(.dn-exam) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body:has(.dn-exam) > .top { flex: none; }
  body:has(.dn-exam) > .view {
    flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1320px; padding-top: var(--sp-3); padding-bottom: var(--sp-4);
    display: flex; flex-direction: column;
  }
  .dn-exam { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .dn-desk {
    flex: 1; min-height: 0; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 420px);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "q form";
  }
  .dn-qcard { display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-6); }
  /* The question keeps a readable line length inside the wider card. */
  .dn-qbody, .dn-code, .dn-qcard .dn-nav { width: 100%; max-width: 820px; margin-left: auto; margin-right: auto; }
  .dn-qcard .stem:not(.big) { font-size: 1.3rem; line-height: 1.55; }
  .dn-choices .choice { min-height: 56px; font-size: 1.125rem; }
  .dn-qbody { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-2); }
  .dn-qbody.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
  .dn-code, .dn-qcard .dn-nav { flex: none; }
  .dn-exam .dn-form { position: static; max-height: none; }
}
/* Big monitors (1920×1080): the question a size up again, so the card does not look empty. */
@media (min-width: 1600px) and (min-height: 900px) {
  body:has(.dn-exam) > .view { max-width: 1480px; }
  .dn-qbody, .dn-code, .dn-qcard .dn-nav { max-width: 920px; }
  .dn-qcard { padding: var(--sp-6) var(--sp-7); }
  .dn-qcard .q-label { font-size: var(--fs-md); }
  .dn-qcard .stem:not(.big) { font-size: 1.5rem; margin-bottom: var(--sp-4); }
  .dn-choices .choice { min-height: 64px; font-size: 1.25rem; }
  .dn-choices { gap: var(--sp-3); }
  .dn-guide { font-size: var(--fs-md); }
}
/* Mouse: smaller bubbles, so more rows show at once. Touch keeps 44 px. */
@media (pointer: fine) and (min-width: 960px) {
  .dn-exam .dn-bub { width: 36px; height: 36px; }
  .dn-exam button.dn-no { min-height: 36px; }
}
/* The form column is wider now that the scratchpad is gone: bubbles a size up again. */
@media (pointer: fine) and (min-width: 1200px) {
  .dn-exam .dn-bub { width: 40px; height: 40px; font-size: 1rem; }
  .dn-exam button.dn-no { min-height: 40px; }
}

/* ---------- Hub and result on a laptop: two columns instead of one long 640 px strip ---------- */
@media (min-width: 960px) {
  .narrow.dn-two {
    max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-4); align-items: start;
  }
  .dn-two > * + * { margin-top: 0; }
  .dn-two > .q-head { grid-column: 1 / -1; }
}

/* ---------- Official booklet: the answer sheet, and MEB's PDF beside it on a PC ---------- */
.dn-sheet > .q-head, .dn-sheet-side { max-width: 640px; margin-left: auto; margin-right: auto; }
.dn-sheet-side > .card + .card { margin-top: var(--sp-4); }
.dn-pdf { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; }
.dn-pdf iframe { flex: 1; width: 100%; min-height: 0; border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); }
.dn-pdf a { align-self: flex-start; color: var(--ink-2); }
@media (min-width: 960px) and (min-height: 560px) {
  /* One screen, no page scroll: the booklet on the left (about 60%), form and clock on the right. */
  body:has(.dn-sheet.split) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body:has(.dn-sheet.split) > .top { flex: none; }
  body:has(.dn-sheet.split) > .view {
    flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; padding-top: var(--sp-3); padding-bottom: var(--sp-4);
    display: flex; flex-direction: column;
  }
  .dn-sheet.split { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .dn-sheet.split > .q-head { max-width: none; width: 100%; margin-bottom: var(--sp-2); }
  .dn-sheet.split .dn-sheet-body {
    flex: 1; min-height: 0; display: grid; gap: var(--sp-4);
    grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr); grid-template-rows: minmax(0, 1fr);
  }
  .dn-sheet.split .dn-sheet-side { max-width: none; margin: 0; min-height: 0; display: flex; flex-direction: column; }
  .dn-sheet.split .dn-book { display: none; }
  .dn-sheet.split .dn-form { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--sp-4); }
  .dn-sheet.split .dn-form-head, .dn-sheet.split .dn-finish { flex: none; }
  .dn-sheet.split .dn-finish { margin-top: var(--sp-3); }
  .dn-sheet.split .dn-form-rows {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: var(--sp-2) calc(-1 * var(--sp-2)) 0; padding: 0 var(--sp-2);
  }
  .dn-sheet.split .dn-form .dn-subj { position: sticky; top: 0; z-index: 1; margin: 0; padding: var(--sp-2) 0 var(--sp-1); background: var(--surface); }
}