/* In-question catalogue labs (catalogue-labs.js) on the board and on phones (plan 106 step A2), and the topic
   investigation dialog (catalogue-explorations.js) on the board. The base lab styles live in ui-overhaul.css; this
   sheet only lays the labs out so they fit. */

/* Landscape boards (1366×768, 1280×720): the whole lab fits the stage with no scrolling. The kicker goes, the
   prompt shrinks, and the lab becomes two columns: the figure (or the algorithm flow or a data plot) on the left, the
   controls, the answer form and "Bu modeli sıfırla" on the right. The figure is capped by the height the
   header, scoreboard, footer, prompt and paddings leave (--cl-chrome). Rows have no gap, so the empty rows the
   figure spans add no height; right-column items are spaced with margins instead. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card[data-engine="catalogue-lab"] { --cl-chrome: 360px; width:min(1320px, 100%); padding:14px 24px; }
  .question-card[data-engine="catalogue-lab"] .question-kicker { display:none; }
  .question-card[data-engine="catalogue-lab"] .question-copy { max-width:none; margin-bottom:10px; }
  .question-card[data-engine="catalogue-lab"] .question-copy h2 { font-size:clamp(22px, 2.3vw, 30px); }
  .question-card[data-engine="catalogue-lab"] .cl-lab { row-gap:0; align-items:start; text-align:left; }
  .question-card[data-engine="catalogue-lab"] .cl-lab > * { margin-bottom:10px; }
  .question-card[data-engine="catalogue-lab"] .cl-lab:has(> :is(.cl-diagram, .cl-reflect-stage, .cl-flow, .cl-dot-plot, table)) { grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); column-gap:24px; }
  .question-card[data-engine="catalogue-lab"] .cl-lab:has(> :is(.cl-diagram, .cl-reflect-stage, .cl-flow, .cl-dot-plot, table)) > * { grid-column:2; }
  .question-card[data-engine="catalogue-lab"] .cl-lab > :is(.cl-diagram, .cl-reflect-stage, .cl-flow, .cl-dot-plot, table) { grid-column:1; grid-row:1 / span 12; margin:0 auto; align-self:center; }
  .question-card[data-engine="catalogue-lab"] .cl-diagram { max-width:100%; max-height:min(400px, calc(100dvh - var(--cl-chrome))); }
  /* The Pythagoras squares use a taller viewBox, so its a², b², c² labels need a larger size to read from the back row. */
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="pythagoras"] .cl-diagram text { font-size:26px; }
  .question-card[data-engine="catalogue-lab"] .cl-lab > p { font-size:17px; line-height:1.35; }
  .question-card[data-engine="catalogue-lab"] .cl-answer { grid-template-columns:minmax(0, 1fr) auto; gap:10px; }
  .question-card[data-engine="catalogue-lab"] .cl-answer:has(> :only-child) { grid-template-columns:1fr; }
  .question-card[data-engine="catalogue-lab"] .cl-answer > .form-field:nth-last-child(n+3) { grid-column:1 / -1; }
  .question-card[data-engine="catalogue-lab"] .cl-controls { gap:8px; }
  .question-card[data-engine="catalogue-lab"] .cl-flow { justify-self:stretch; width:100%; max-width:520px; }
  /* Text-first labs (proof, subjective probability, factoring) have no figure: one column, the answer
     fields side by side in one row with the button at the end. */
  .question-card[data-engine="catalogue-lab"] .cl-lab:not(:has(> :is(.cl-diagram, .cl-reflect-stage, .cl-flow, .cl-dot-plot, table))) .cl-answer { display:flex; align-items:end; gap:10px; }
  .question-card[data-engine="catalogue-lab"] .cl-lab:not(:has(> :is(.cl-diagram, .cl-reflect-stage, .cl-flow, .cl-dot-plot, table))) .cl-answer > .form-field { flex:1 1 0; }
  .question-card[data-engine="catalogue-lab"] .cl-lab:not(:has(> :is(.cl-diagram, .cl-reflect-stage, .cl-flow, .cl-dot-plot, table))) .cl-answer > .form-field:has(select) { flex:0 0 auto; }
  .question-card[data-engine="catalogue-lab"] .cl-lab > .button { justify-self:start; }
  .question-card[data-engine="catalogue-lab"] .cl-lab > [data-lab="reset"] { min-height:44px; }

  /* Plan 106 step A3, the reflection lab: the grid fills the left column under the prompt; the cursor line, the
     hints, undo beside reset, the check and the app's answer strip stack on the right. The mount and the lab are
     display:contents so the strip joins that column: stacked under the grid it pushed the stage into scrolling at
     1280×720 once three hints showed. The world chip goes like the kicker (the header names the world). */
  .question-card[data-engine="catalogue-lab"]:has(.cl-lab[data-lab-type="reflection"]) { display:grid; grid-template-columns:530px repeat(2, minmax(0, 1fr)); column-gap:24px; row-gap:0; align-items:start; align-content:start; }
  .question-card[data-engine="catalogue-lab"]:has(.cl-lab[data-lab-type="reflection"]) .question-experience { display:none; }
  .question-card[data-engine="catalogue-lab"]:has(.cl-lab[data-lab-type="reflection"]) > .question-copy { grid-column:1 / -1; }
  .question-card[data-engine="catalogue-lab"]:has(.cl-lab[data-lab-type="reflection"]) > .question-interaction,
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] { display:contents; }
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] > * { grid-column:2 / span 2; order:4; }
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] > .cl-controls { grid-column:2; order:5; }
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] > .cl-controls button,
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] > [data-lab="reset"] { width:100%; }
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] > [data-lab="reset"] { grid-column:3; order:5; }
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] > .cl-answer { order:6; grid-template-columns:1fr; }
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] > .cl-feedback { order:7; }
  .question-card[data-engine="catalogue-lab"] .cl-lab[data-lab-type="reflection"] > .cl-reflect-stage { grid-column:1; grid-row:2 / span 12; align-self:start; }
  .question-card[data-engine="catalogue-lab"]:has(.cl-lab[data-lab-type="reflection"]) > .feedback-slot { grid-column:2 / span 2; order:8; }
  .question-card[data-engine="catalogue-lab"]:has(.cl-lab[data-lab-type="reflection"]) > .feedback-slot .inline-feedback { margin-top:0; }
}

/* Phones keep vertical scrolling, but figure labels stay at least 14 px on a 390 px screen: a narrower card
   padding gives the figure more width and the labels grow one step (large text keeps its own size). */
@media (max-width: 700px) {
  .question-card[data-engine="catalogue-lab"] { padding-left:14px; padding-right:14px; }
  .question-card[data-engine="catalogue-lab"] .cl-diagram text { font-size:26px; }
  body.large-text .question-card[data-engine="catalogue-lab"] .cl-diagram text { font-size:29px; }
}

/* Lab dialogs on landscape boards: the topic investigation (#catalogueExploreDialog) and the Sınıfça keşif dialog
   (#explorerDialog, explorers.js) fit 1366×768 and 1280×720 with no scrolling, even with the status line showing. The
   dialog is wide; the save button moves up beside the instruction band, so the status line is the only row under the
   body. A lab with a figure becomes two columns like the in-question labs: the figure on the left, capped by the height
   the chrome leaves (--ce-chrome), everything else stacked on the right. The last row is 1fr, so a tall figure stretches
   that row and the right column stays packed at the top. The find labs (π, volume, data) and the reflection grid keep
   their own layouts. The Sınıfça keşif models do the same: the balance (equation and pans) on the left of its form and
   history, the fence rectangle in a column of its own beside its controls and the table. */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 820px) {
  #catalogueExploreDialog { --ce-chrome: 230px; }
  #explorerDialog, #catalogueExploreDialog:not(.vl-wide) { width:min(1240px, 96vw); }
  #explorerDialog[open], #catalogueExploreDialog[open] { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto minmax(0, 1fr) auto; }
  :is(#explorerDialog, #catalogueExploreDialog) > .arena-header { grid-column:1 / -1; padding-block:8px; }
  :is(#explorerDialog, #catalogueExploreDialog) > .explorer-participation { grid-column:1; grid-row:2; align-self:center; margin:10px 0 0 24px; padding:8px 12px; }
  :is(#explorerDialog, #catalogueExploreDialog) > footer { grid-column:2; grid-row:2; align-self:center; padding:10px 24px 0 16px; border-top:0; }
  #explorerBody, #catalogueExploreBody { grid-column:1 / -1; grid-row:3; padding:12px 24px; }
  #explorerFeedback { grid-column:1 / -1; grid-row:4; margin:0 24px 12px; }
  #catalogueExploreFeedback { grid-column:1 / -1; grid-row:4; }
  #catalogueExploreFeedback:not(:empty) { padding:8px 24px 12px; border-top:1px solid var(--line); }
  #catalogueExploreBody .cl-lab:not([data-lab-type="reflection"]):has(> .cl-diagram) { grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows:repeat(11, auto) 1fr; column-gap:24px; row-gap:0; align-items:start; }
  #catalogueExploreBody .cl-lab:not([data-lab-type="reflection"]):has(> .cl-diagram) > * { grid-column:2; margin-bottom:10px; }
  #catalogueExploreBody .cl-lab:not([data-lab-type="reflection"]) > .cl-diagram { grid-column:1; grid-row:1 / span 12; align-self:center; max-height:calc(100dvh - var(--ce-chrome)); margin:0 auto; }
  #explorerBody:has(> #balanceForm) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:repeat(5, auto) 1fr; column-gap:24px; align-content:start; }
  #explorerBody:has(> #balanceForm) > * { grid-column:2; }
  #explorerBody:has(> #balanceForm) > .explorer-equation { grid-column:1; grid-row:1; margin:0 0 8px; }
  #explorerBody:has(> #balanceForm) > .balance-model { grid-column:1; grid-row:2 / span 5; align-self:start; }
  #explorerBody:has(> #balanceForm) > #balanceForm { grid-row:1 / span 2; align-self:start; gap:10px; margin:0 0 12px; }
  #explorerBody:has(> #balanceForm) > ol { margin-block:12px 0; }
  .explorer-split:has(.rectangle-model) { grid-template-columns:auto minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:repeat(4, auto) 1fr; align-items:center; margin-top:0; }
  .explorer-split:has(.rectangle-model) > .explorer-col--visual { display:contents; }
  .explorer-split:has(.rectangle-model) .rectangle-model { grid-column:1; grid-row:1 / span 5; align-self:start; margin:0; }
  .explorer-split:has(.rectangle-model) > .explorer-col--visual > :not(.rectangle-model) { grid-column:2; justify-self:center; text-align:center; }
  .explorer-split:has(.rectangle-model) > .explorer-col--data { grid-column:3; grid-row:1 / span 5; align-self:start; }
  .explorer-split:has(.rectangle-model) .explorer-table { margin-top:0; }
}

/* Boards from 1000 px wide have room to spare: the fence gets a wider first column and larger squares, centred. */
@media (orientation: landscape) and (min-width: 1000px) and (max-height: 820px) {
  .explorer-split:has(.rectangle-model) { grid-template-columns:minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .explorer-split:has(.rectangle-model) .rectangle-model { --cell:28px; justify-self:center; }
}
/* Phones, upright or sideways: both lab dialogs get smaller margins, pans, table cells, fence squares and slider
   fields (buttons and sliders keep 44 px). The columns space their items with their own gap, so paragraphs and tables
   drop their margins. The balance and the fence fit the screen this way; the denser labs scroll inside the sheet. */
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 700px) {
  :is(#explorerDialog, #catalogueExploreDialog) > .explorer-participation { font-size:15px; line-height:1.3; }
  .explorer-dialog h3 { margin:0 0 6px; font-size:20px; }
  .explorer-dialog .explorer-split { gap:12px; margin:6px 0; }
  .explorer-dialog .explorer-col > p, .explorer-dialog .explorer-table { margin:0; }
  .explorer-dialog .probability-bag { margin:8px 0; }
  #explorerBody .button { min-height:44px; }
  .explorer-dialog .balance-model { gap:12px; padding:8px 12px 12px; }
  .explorer-dialog .balance-model div { min-width:0; padding:10px 16px 16px; font-size:20px; }
  .explorer-dialog .form-field:has(> input[type=range]) { gap:2px; }
  .explorer-dialog .form-field > input[type=range] { min-height:44px; padding-block:0; }
  #catalogueExploreBody .cl-lab { gap:10px; }
  .explorer-dialog .rectangle-model { --cell:20px; margin:4px auto; }
  .explorer-dialog .explorer-table th, .explorer-dialog .explorer-table td { padding:6px 10px; }
  #balanceForm { gap:10px; margin:12px 0; }
}
/* Sideways phone (844x390) and upright phone (390x844): the lab dialogs (the topic investigation and the Sınıfça keşif
   dialog, same header, note, body, status and footer) are full-screen sheets: the header with Kapat stays at the top, the
   save button stays in view (beside the note sideways, at the bottom upright) and only the body scrolls, when a lab's
   model and controls cannot share the screen. Sideways, the dialogs keep the board grid above with tighter chrome, and
   the angle figure gets the left column. */
@media (orientation: landscape) and (max-height: 500px) {
  #explorerDialog, #catalogueExploreDialog:not(.vl-wide) { width:100vw; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; }
  #catalogueExploreDialog { --ce-chrome: 128px; }
  #catalogueExploreBody .cl-lab:not([data-lab-type="reflection"]):has(> .cl-diagram) { grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); column-gap:16px; }
  #catalogueExploreBody .cl-lab:not([data-lab-type="reflection"]):has(> .cl-diagram) > * { margin-bottom:8px; }
  :is(#explorerDialog, #catalogueExploreDialog) > .arena-header { padding:6px 16px; }
  :is(#explorerDialog, #catalogueExploreDialog) .arena-header h2 { font-size:20px; }
  :is(#explorerDialog, #catalogueExploreDialog) .arena-header .button, :is(#explorerDialog, #catalogueExploreDialog) > footer .button { min-height:44px; padding-block:6px; }
  #explorerTopic { display:none; }
  :is(#explorerDialog, #catalogueExploreDialog) > .explorer-participation { margin:6px 0 0 16px; padding:5px 12px; }
  :is(#explorerDialog, #catalogueExploreDialog) > footer { padding:6px 16px 0 12px; }
  #explorerBody, #catalogueExploreBody { padding:8px 16px; }
  #explorerFeedback { margin:0 16px 8px; }
  .explorer-dialog .explorer-split:has(.rectangle-model) { row-gap:6px; margin-top:0; }
  #explorerBody:has(> .explorer-angle-stage) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:24px; align-content:start; }
  #explorerBody:has(> .explorer-angle-stage) > * { grid-column:2; }
  #explorerBody > .explorer-angle-stage { grid-column:1; grid-row:1 / span 8; align-self:center; }
}
@media (orientation: portrait) and (max-width: 700px) {
  #explorerDialog, #catalogueExploreDialog:not(.vl-wide) { width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; }
  #explorerDialog > .arena-header, #catalogueExploreDialog > .arena-header { padding:10px 16px; }
  #explorerDialog > .explorer-participation, #catalogueExploreDialog > .explorer-participation { margin:8px 16px 0; padding:8px 12px; }
  #explorerBody, #catalogueExploreBody { padding:10px 16px; }
  #explorerDialog > footer, #catalogueExploreDialog > footer { padding:8px 16px; }
  .cl-diagram { max-height:30dvh; }
}

/* The knobs (touch kit D7). Açı Radarı (explorers.js): the figure sits in a stage of its own 360 × 220 shape, so the
   measure knob, placed in per cent of the figure, stays on the arc at any width. The first-use hint sits at the top,
   clear of the vertex. */
.explorer-angle-stage { position:relative; width:360px; max-width:100%; aspect-ratio:360 / 220; margin:auto; }
.explorer-angle-stage > .explorer-angle { width:100%; height:100%; }
.explorer-angle-stage > .uk-hint { top:4px; bottom:auto; }
/* The reflection grid (catalogue-labs.js): its cursor knob is dragged to a grid point and lifted to place the next image.
   Both rings are hollow, so the ray or the point under them stays in sight; the grid knob keeps half its size inside
   the stage at the edge columns and rows. */
.cl-reflect-stage { position:relative; width:min(100%, 530px); margin:0 auto; }
.cl-reflect-stage > .cl-reflect-grid { display:block; width:100%; }
.explorer-angle__knob, .cl-reflect-knob { position:absolute; translate:-50% -50%; cursor:grab; --uk-knob:transparent; }
.cl-reflect-knob { left:clamp(var(--uk-knob-size) / 2, var(--x), 100% - var(--uk-knob-size) / 2); top:clamp(var(--uk-knob-size) / 2, var(--y), 100% - var(--uk-knob-size) / 2); touch-action:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.explorer-angle__knob[data-uk-dragging], .cl-reflect-knob[data-uk-dragging] { cursor:grabbing; }
/* The phone cursor pad: one arrow turned for each direction. */
.cl-reflect-pad [data-lab="cursor-up"] .uk-icon { rotate:-90deg; }
.cl-reflect-pad [data-lab="cursor-down"] .uk-icon { rotate:90deg; }