/* 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-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-flow, .cl-dot-plot, table)) > * { grid-column:2; }
  .question-card[data-engine="catalogue-lab"] .cl-lab > :is(.cl-diagram, .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-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-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-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-grid { 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; }
}

/* Topic investigations (#catalogueExploreDialog) on landscape boards: the dialog fits 1366×768 and 1280×720 with no
   scrolling, even with the status line showing. The dialog is wide; "Gözlemi bu cihaza kaydet" 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. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  #catalogueExploreDialog { --ce-chrome: 230px; }
  #catalogueExploreDialog:not(.vl-wide) { width:min(1240px, 96vw); }
  #catalogueExploreDialog[open] { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto minmax(0, 1fr) auto; }
  #catalogueExploreDialog > .arena-header { grid-column:1 / -1; padding-block:8px; }
  #catalogueExploreDialog > .explorer-participation { grid-column:1; grid-row:2; align-self:center; margin:10px 0 0 24px; padding:8px 12px; }
  #catalogueExploreDialog > footer { grid-column:2; grid-row:2; align-self:center; padding:10px 24px 0 16px; border-top:0; }
  #catalogueExploreBody { grid-column:1 / -1; grid-row:3; padding:12px 24px; }
  #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; }
}