/* Printable quiz (docs/specs/print-quiz.md): the Yazdır dialog of a Konular unit, the preview and the A4 sheet.
   The sheet (.pq-sheet) is black on white in every theme; the dialog follows the theme tokens. */

/* ---------- The Yazdır button in a unit header ---------- */
.topic-group__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
/* Phones: the tools take the header's full width, the count first and Yazdır at the right end of its line; a 3D link
   that does not fit beside the count wraps to the next line with Yazdır. */
@media (max-width: 680px) {
  .topic-group__header > .topic-group__tools { grid-column: 1 / -1; justify-content: flex-start; gap: 4px 8px; }
  .topic-group__tools > [data-print-quiz] { margin-left: auto; }
}

/* ---------- The dialog ---------- */
/* The form sits in two columns, the topics beside the settings, so a unit of six topics fits the 768 px board without
   scrolling; phones stack them (below). */
.print-quiz-dialog { width: min(1240px, 96vw); height: min(92dvh, 860px); padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden; }
.print-quiz-dialog[open] { display: flex; flex-direction: column; }
.print-quiz-dialog::backdrop { background: rgba(18, 12, 48, .55); }
.print-quiz-dialog__header { display: flex; flex-shrink: 0; align-items: center; gap: 14px; padding: 16px 20px 14px 24px; background: linear-gradient(125deg, var(--surface), var(--primary-soft)); border-bottom: 1px solid var(--line); }
.print-quiz-dialog__header > div { flex: 1; min-width: 0; }
.print-quiz-dialog__header h2 { margin: 0; font-size: 26px; }
.print-quiz-dialog__header p { margin: 3px 0 0; color: var(--ink-soft); font-size: 14px; font-weight: 650; }
.print-quiz-dialog__body { display: grid; flex: 1; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); min-height: 0; }
.print-quiz-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 22px; padding: 18px 22px 22px; overflow: auto; border-right: 1px solid var(--line); }
.print-quiz-form__settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.print-quiz-form fieldset { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.print-quiz-form legend, .print-quiz-form__label { margin-bottom: 4px; padding: 0; font-size: 15px; font-weight: 800; }
.print-quiz-form label.print-quiz-choice { display: flex; align-items: center; gap: 10px; min-height: var(--touch, 44px); font-weight: 600; cursor: pointer; }
.print-quiz-form input[type="checkbox"], .print-quiz-form input[type="radio"] { flex: none; width: 22px; height: 22px; accent-color: var(--brand); }
.print-quiz-counts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.print-quiz-code { display: flex; gap: 8px; }
.print-quiz-code input { flex: 1; min-width: 0; min-height: var(--touch, 44px); padding: 6px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; font: 800 18px/1.2 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.print-quiz-form__hint { margin: 0; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; }
.print-quiz-form__error { margin: 0; padding: 8px 12px; color: var(--ink); background: var(--red-tint); border: 2px solid var(--red-base); border-radius: 12px; font-weight: 700; }
.print-quiz-form__error[hidden] { display: none; }
.print-quiz-form__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.print-quiz-preview { min-width: 0; padding: 18px; overflow: auto; background: var(--surface-soft); }
.print-quiz-preview__empty { margin: 0; padding: 24px; color: var(--ink-soft); border: 2px dashed var(--line-strong); border-radius: 14px; text-align: center; font-weight: 650; }
@media (max-width: 760px) {
  .print-quiz-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .print-quiz-dialog__body { display: block; overflow: auto; }
  .print-quiz-form { grid-template-columns: minmax(0, 1fr); border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  /* The topics in two columns (labels wrap to two lines), so six of them and the settings fit above the preview. */
  .print-quiz-form > fieldset:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .print-quiz-preview { overflow: visible; }
  /* A phone's preview page: a narrower margin, and the name fields in two rows so Tarih stays on the page. */
  .print-quiz-preview .pq-page { padding: 6mm; }
  .print-quiz-preview .pq-fields { grid-template-columns: 1.6fr 1fr; gap: 3mm 5mm; }
}

/* Sideways phone (844x390): the dialog takes the whole screen; the close button and the choices are 44 px (the design
   system's minimum) and packed tight, so six topics and every setting, both buttons included, show without scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  .print-quiz-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .print-quiz-dialog__header { padding: 6px 16px; }
  .print-quiz-dialog__header h2 { font-size: 20px; }
  .print-quiz-dialog__header p { margin-top: 0; font-size: 13px; }
  .print-quiz-dialog__header .modal__close { --uk-size: 44px; }
  .print-quiz-dialog__body { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
  .print-quiz-form { gap: 8px 16px; padding: 8px 16px; }
  .print-quiz-form__settings { gap: 4px; }
  .print-quiz-form fieldset { gap: 0; }
  .print-quiz-form label.print-quiz-choice { min-height: 44px; }
  /* The 44 px label is the touch target, so the 48 px floor touch screens give a bare checkbox (styles.css) is dropped. */
  .print-quiz-form input[type="checkbox"], .print-quiz-form input[type="radio"] { min-height: 0; }
  .print-quiz-code input { min-height: 44px; }
  .print-quiz-form legend, .print-quiz-form__label { margin-bottom: 0; }
  .print-quiz-preview { padding: 12px; }
}

/* ---------- The sheet: black on white, the same on screen (preview) and on paper ---------- */
.pq-sheet {
  color: #000; background: #fff; font: 400 11pt/1.35 Inter, Arial, Helvetica, sans-serif;
  /* The unit pictures paint with theme tokens; on paper every colour becomes black, white or a grey. */
  --ink: #000; --ink-2: #1a1a1a; --ink-3: #333; --surface: #fff; --surface-2: #f0f0f0; --surface-soft: #f0f0f0; --paper: #fff;
  --line: #666; --line-strong: #000; --brand: #222; --brand-ink: #000; --brand-tint: #e4e4e4;
  --green-base: #333; --green-ink: #000; --green-tint: #e4e4e4; --red-base: #000; --red-ink: #000; --red-tint: #d4d4d4;
  --coral-base: #444; --gold-base: #555; --gold-ink: #000; --gold-tint: #ececec; --gold-fill: #ddd; --sky-base: #555;
  --world-ink: #000; --world-band: #e8e8e8; --world-band-edge: #000; --world-model: #cfcfcf; --world-model-edge: #000; --world-accent: #222;
  --marble-tint: #e4e4e4; --marble-edge: #000; --chart-1: #222; --chart-2: #555; --chart-3: #777; --chart-4: #999; --chart-5: #bbb; --chart-6: #ddd;
}
.pq-sheet > * { margin: 0 auto 18px; }
.pq-page { max-width: 210mm; padding: 14mm; background: #fff; border: 1px solid #888; }
.pq-head { margin-bottom: 5mm; padding-bottom: 3mm; border-bottom: 0.6mm solid #000; }
.pq-head h1 { margin: 0; font-size: 17pt; line-height: 1.15; }
.pq-head__meta { margin: 1mm 0 3mm; font-size: 10pt; }
.pq-fields { display: grid; grid-template-columns: 2.6fr 0.8fr 0.7fr 1.1fr; gap: 0 5mm; margin: 0; }
.pq-field { display: flex; align-items: flex-end; gap: 2mm; margin: 0; font-size: 10pt; font-weight: 700; white-space: nowrap; }
.pq-field i { flex: 1; min-width: 6mm; height: 6mm; border-bottom: 0.3mm solid #000; }
.pq-q { margin: 0 0 3mm; break-inside: avoid; }
.pq-q__prompt { margin: 0 0 1.5mm; font-weight: 600; }
.pq-q__no { display: inline-block; min-width: 7mm; font-weight: 800; }
.pq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 6mm; margin: 0; padding: 0 0 0 7mm; list-style: none; }
.pq-options--long { grid-template-columns: 1fr; }
.pq-options li { display: flex; gap: 2mm; }
.pq-options b { flex: none; }
.pq-q__work { min-height: 7mm; }
.pq-sheet[data-count="20"] .pq-q__work { min-height: 5mm; }
.pq-art { margin: 1mm 0 2mm 7mm; }
.pq-art svg { display: block; width: auto; max-width: 100%; max-height: 50mm; }
.pq-art svg text { fill: #000; font-family: inherit; }
/* The three views of 7-solids at paper size: their names as large as the sheet's text, not the board's. */
.pq-sheet .u7s-figure.u7s-views { width: min(100%, 62mm); margin-inline: 0; }
.pq-sheet .u7s-views .u7s-label { font-size: 14px; }
.pq-key-page h1 { margin: 0 0 1mm; font-size: 17pt; }
.pq-key-page .pq-head__meta { margin-bottom: 4mm; }
.pq-keytable { width: 100%; border-collapse: collapse; font-size: 10pt; }
.pq-keytable th, .pq-keytable td { padding: 1.4mm 2mm; border: 0.3mm solid #000; text-align: left; vertical-align: top; }
.pq-keytable th { background: #e8e8e8; }
.pq-keytable td:first-child, .pq-keytable td:nth-child(2) { white-space: nowrap; font-weight: 800; }
.pq-keytable tr { break-inside: avoid; }

/* Figures drawn by print-quiz-figures.js: strokes and hatches only, values written on the marks. */
.pq-axis, .pq-line__axis { fill: none; stroke: #000; stroke-width: 2; }
.pq-grid { stroke: #bbb; stroke-width: 1; }
.pq-tick { fill: #000; font-size: 16px; }
.pq-label, .pq-key { fill: #000; font-size: 17px; font-weight: 700; }
.pq-value { fill: #000; font-size: 17px; font-weight: 800; }
.pq-series { fill: none; stroke: #000; stroke-width: 2.5; }
.pq-mark { fill: #fff; stroke: #000; stroke-width: 2; }
.pq-bar { fill: #bbb; stroke: #000; stroke-width: 1.5; }
.pq-bar.is-negative { fill: #fff; }
.pq-slice { stroke: #000; stroke-width: 1.5; }
.pq-hatch { stroke: #000; stroke-width: 1.5; fill: #000; }
.pq-part { fill: #fff; stroke: #000; stroke-width: 1; }
.pq-part.is-shaded { fill: #aaa; }
.pq-cells { fill: none; stroke: #000; stroke-width: 1; }
.pq-frame { fill: none; stroke: #000; stroke-width: 2; }
.pq-legend { display: flex; flex-wrap: wrap; gap: 1mm 5mm; margin: 1mm 0 0; font-size: 10pt; }
/* 150 mm wide: the tick labels come out at the sheet's text size. */
.pq-art svg.pq-line { display: block; width: 100%; max-width: 150mm; max-height: 28mm; }
.pq-art svg.pq-line--double { max-height: 44mm; }
.pq-line__tick { stroke: #000; stroke-width: 1.5; }
.pq-line__tick--major { stroke-width: 2.5; }
.pq-line__mark { fill: #000; stroke: #000; }
.pq-line__link { stroke: #000; stroke-width: 1.5; stroke-dasharray: 4 4; }
.pq-tables { display: flex; flex-wrap: wrap; gap: 3mm 8mm; }
.pq-table { border-collapse: collapse; font-size: 10.5pt; }
.pq-table caption { margin-bottom: 1mm; font-weight: 800; text-align: left; }
.pq-table th, .pq-table td { min-width: 12mm; padding: 1mm 2.5mm; border: 0.3mm solid #000; text-align: center; }
.pq-table th { background: #e8e8e8; text-align: left; }

/* ---------- On paper: only the sheet prints ---------- */
.pq-print { display: none; }
@page { size: A4; margin: 12mm; }
@media print {
  body.has-print-quiz { display: block; height: auto; overflow: visible; background: #fff; }
  body.has-print-quiz > :not(.pq-print) { display: none !important; }
  html:has(body.has-print-quiz) { height: auto; overflow: visible; background: #fff; }
  body.has-print-quiz .pq-print { display: block; }
  .pq-sheet > * { margin: 0; }
  .pq-sheet > * + * { break-before: page; }
  .pq-page { max-width: none; padding: 0; border: 0; }
}