/*
 * Find labs of plan 115 (lab-find-sector.js, lab-find-proportion.js, lab-find-events.js, lab-find-algebra.js), drawn in the topic
 * investigation dialog (#catalogueExploreDialog). Each lab has its own block under its [data-find-lab] root. Colours
 * come only from tokens.css, so light, dark and high contrast follow; no color-mix(). Motion is the labs' own Web
 * Animations (transform and opacity), skipped by the scripts under body.reduced-motion.
 */
#catalogueExploreDialog:has([data-find-lab]) { width: min(1180px, 96vw); }
.cl-lab[data-find-lab] { display: block; color: var(--ink); }
.cl-lab[data-find-lab] p { margin: 0; }
.cl-lab[data-find-lab] .button { min-height: 46px; padding: 8px 16px; }
.cl-lab[data-find-lab] button { font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cl-lab[data-find-lab] :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cl-lab[data-find-lab] .button[aria-pressed="true"] { color: var(--on-brand); background: var(--brand); border-color: transparent; }
html:not([data-input="touch"]) .cl-lab[data-find-lab] .button[aria-pressed="true"]:hover:where(:not(:disabled)) { color: var(--on-brand); background: var(--brand); }

/* ---- Shared by the find labs: the figure with its action bar | the stage panel, rows, tags and choices ---------- */
.find-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.find-figure { display: grid; justify-items: center; align-content: start; gap: 12px; min-width: 0; }
.find-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.cl-lab[data-find-lab] .find-action { min-width: 180px; font-size: 18px; }
.find-count { color: var(--ink-2); font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.find-count b { color: var(--ink); font-size: 24px; }
.find-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.find-field { display: grid; gap: 6px; }
.find-label { color: var(--ink-2); font-size: 15px; font-weight: 700; }
.find-stepper { display: flex; align-items: center; gap: 10px; }
.cl-lab[data-find-lab] .find-step { min-width: 64px; font-size: 19px; font-variant-numeric: tabular-nums; }
.find-value { min-width: 84px; font-size: 24px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.find-task { font-size: 19px; font-weight: 700; line-height: 1.3; }
.find-hint { color: var(--ink-2); font-size: 16px; line-height: 1.4; }
.find-setupline { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); font-size: 16px; }
.find-setupline b { color: var(--ink); }
.find-rows { display: grid; gap: 6px; }
.find-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 7px 12px; border-radius: 10px; background: var(--surface-2); font-size: 18px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.find-row b { font-size: 21px; white-space: nowrap; }
.find-row--answer { background: var(--green-tint); box-shadow: inset 4px 0 0 var(--green-base); }
.find-row--rule { background: var(--brand-tint); box-shadow: inset 4px 0 0 var(--brand); font-weight: 700; }
.find-tag { color: var(--ink-2); font-size: 15px; font-weight: 650; }
.find-tag--hit { color: var(--green-ink); }
.find-ask { display: grid; gap: 8px; }
.find-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cl-lab[data-find-lab] .find-option { padding-inline: 4px; white-space: nowrap; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cl-lab[data-find-lab] .find-option[data-wrong] { text-decoration: line-through; }
.find-again { display: flex; }

/* ---- Sector lab: the circle and the copy button | the stage panel -------------------------------------------- */
.fs-circle { display: block; width: min(100%, 340px); height: auto; aspect-ratio: 1; overflow: visible; }
.fs-whole { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 2.5; stroke-dasharray: 6 6; }
.fs-circle.is-full .fs-whole { stroke: var(--ink-3); stroke-dasharray: none; }
/* Copies turn about the centre of the circle (110, 110 in the 220-unit viewBox). */
.fs-slice { fill: var(--gold-fill); stroke: var(--gold-line); stroke-width: 2; stroke-linejoin: round; transform-box: view-box; transform-origin: 110px 110px; }
.fs-slice--copy { fill: var(--brand-tint-2); stroke: var(--brand); }
.fs-mark { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.fs-centre { fill: var(--ink); }
.fs-setup { display: grid; gap: 10px; }
.fs-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cl-lab[data-find-lab] .fs-chip { padding-inline: 4px; font-size: 19px; font-variant-numeric: tabular-nums; }
.fs-guesses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cl-lab[data-find-lab] .fs-guess { padding-inline: 2px; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }

/* Landscape boards (1366×768, 1280×720): the figure on the left, capped by the height the dialog chrome leaves. */
@media (min-width: 900px) {
  .find-main { grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); column-gap: 28px; align-items: start; }
  .fs-circle { width: min(100%, 360px, calc(100dvh - 340px)); }
}
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  #catalogueExploreDialog:has([data-find-lab]) #catalogueExploreBody { padding-block: 10px; }
}
@media (max-width: 420px) {
  .fs-guesses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-circle { width: min(100%, 260px); }
}

/* ---- Proportion lab (Sepet): the TL-by-adet graph and the add button | price, tables and verdicts ------------- */
.fp-graph { display: block; width: min(100%, 440px); height: auto; aspect-ratio: 340 / 280; overflow: visible; }
.fp-grid { stroke: var(--line); stroke-width: 1; }
.fp-axis { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.fp-tick, .fp-axis-name, .fp-label { fill: var(--ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-axis-name { fill: var(--ink-2); font-weight: 650; }
.fp-tick--fee { fill: var(--gold-ink); }
.fp-origin { fill: var(--ink); }
.fp-line { stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.fp-line--fee { stroke: var(--gold-line); }
.fp-start { fill: var(--surface); stroke: var(--gold-line); stroke-width: 2.5; }
/* Points grow about their own centre; the risers grow up from the old point. */
.fp-point { fill: var(--brand); stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.fp-point--fee { fill: var(--gold-base); stroke: var(--gold-line); }
.fp-ghost { fill: none; stroke: var(--brand); stroke-width: 2; opacity: .55; }
.fp-riser { fill: var(--gold-line); transform-box: fill-box; transform-origin: center bottom; }
.fp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.fp-card { padding: 10px 18px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line-strong); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-card b { font-size: 26px; }
/* Two columns from the start, so the basket table keeps its place when the fee table joins it; one column on phones. */
.fp-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
.fp-block { display: grid; gap: 6px; min-width: 0; }
.cl-lab[data-find-lab] .fp-table { width: 100%; border-collapse: collapse; font-size: 19px; font-variant-numeric: tabular-nums; }
.fp-table caption { padding-bottom: 4px; color: var(--ink-2); font-size: 15px; font-weight: 700; text-align: start; }
.cl-lab[data-find-lab] .fp-table th, .cl-lab[data-find-lab] .fp-table td { padding: 5px 8px; border: 0; border-bottom: 1px solid var(--line); text-align: center; }
.cl-lab[data-find-lab] .fp-table th { color: var(--ink-2); font-size: 15px; font-weight: 700; white-space: nowrap; }
.cl-lab[data-find-lab] .fp-table td { font-weight: 650; }
.cl-lab[data-find-lab] .fp-table .fp-ratio { color: var(--brand-ink); font-weight: 800; background: var(--brand-tint); }
.cl-lab[data-find-lab] .fp-table--fee .fp-ratio { color: var(--gold-ink); background: var(--gold-tint); }
.cl-lab[data-find-lab] .fp-empty td { color: var(--ink-2); font-size: 16px; font-weight: 600; }
.fp-verdict { padding: 6px 10px; border-radius: 10px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.fp-verdict--yes { color: var(--green-ink); background: var(--green-tint); }
.fp-verdict--no { color: var(--red-ink); background: var(--red-tint); }
.fp-yesno { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .fp-tables { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .fp-graph { width: min(100%, 440px, calc((100dvh - 400px) * 340 / 280)); }
}

/* ---- Events lab (Zar): six die faces or the rolling tray (cube, six tally columns, roll buttons) | the stage panel -- */
.cl-lab[data-find-lab="events"] { --cube: 92px; --track: 84px; }
.fe-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 112px)); gap: 14px; justify-content: center; width: 100%; padding: 6px; }
.cl-lab[data-find-lab] .fe-face { position: relative; display: block; width: 100%; aspect-ratio: 1; min-height: 44px; padding: 0; border: 2px solid var(--line-strong); border-radius: 18px; background: var(--surface); cursor: pointer; transition: transform 160ms ease-out; }
.cl-lab[data-find-lab] .fe-face:active { transform: scale(.97); }
html:not([data-input="touch"]) .cl-lab[data-find-lab] .fe-face:hover { border-color: var(--brand); }
.cl-lab[data-find-lab] .fe-face[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.fe-face[aria-pressed="true"] .fe-pip { background: var(--on-brand); }
/* The ring marks A's outcomes once A is known; the gap keeps it clear of the face beside it. */
.cl-lab[data-find-lab] .fe-face[data-in-a] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px var(--gold-line); }
.fe-a { position: absolute; top: 6px; right: 6px; min-width: 24px; padding: 0 6px; border-radius: 999px; color: var(--gold-ink); background: var(--gold-tint); box-shadow: inset 0 0 0 2px var(--gold-line); font-size: 15px; font-weight: 800; line-height: 22px; text-align: center; }
/* A die face: pips on a 3 × 3 grid (cells 0–8 row by row). */
.fe-die { display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); width: 100%; height: 100%; padding: 17%; }
.fe-pip { width: 78%; aspect-ratio: 1; place-self: center; border-radius: 50%; background: var(--ink); }
.fe-pip[data-p="0"] { grid-area: 1 / 1; } .fe-pip[data-p="1"] { grid-area: 1 / 2; } .fe-pip[data-p="2"] { grid-area: 1 / 3; }
.fe-pip[data-p="3"] { grid-area: 2 / 1; } .fe-pip[data-p="4"] { grid-area: 2 / 2; } .fe-pip[data-p="5"] { grid-area: 2 / 3; }
.fe-pip[data-p="6"] { grid-area: 3 / 1; } .fe-pip[data-p="7"] { grid-area: 3 / 2; } .fe-pip[data-p="8"] { grid-area: 3 / 3; }
/* The tray: the stage cube above the six columns; flying dice are positioned in its coordinates. */
.fe-tray { position: relative; display: grid; justify-items: center; gap: 6px; width: min(100%, 470px); }
.fe-stage { position: relative; display: grid; place-items: center; width: 100%; height: calc(var(--cube) + 44px); perspective: 700px; }
.fe-hop, .fe-cube { transform-style: preserve-3d; }
.fe-cube { position: relative; width: var(--cube); height: var(--cube); }
.fe-side { position: absolute; inset: 0; display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); padding: 17%; border-radius: 14%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); backface-visibility: hidden; }
.fe-side[data-side="1"] { transform: translateZ(calc(var(--cube) / 2)); }
.fe-side[data-side="6"] { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.fe-side[data-side="2"] { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.fe-side[data-side="5"] { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.fe-side[data-side="3"] { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }
.fe-side[data-side="4"] { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }
.fe-shadow { position: absolute; bottom: 4px; left: 50%; width: calc(var(--cube) * 1.1); height: 16px; margin-left: calc(var(--cube) * -.55); border-radius: 50%; background: radial-gradient(closest-side, var(--line-strong), transparent); }
.fe-tally { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; }
.fe-col { display: grid; justify-items: center; gap: 4px; padding: 6px 2px 8px; border-radius: 12px; background: var(--surface-2); }
.fe-col[data-in-a="true"] { background: var(--gold-tint); box-shadow: inset 0 0 0 3px var(--gold-line); }
.fe-count { display: block; color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fe-track { position: relative; width: 20px; height: var(--track); overflow: hidden; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.fe-bar { position: absolute; inset: 0; background: var(--brand); transform: scaleY(0); transform-origin: bottom; transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.fe-die--bin, .fe-die--fly { width: 36px; height: 36px; padding: 5px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.fe-die--fly { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; will-change: transform; }
.fe-rolls { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; justify-content: center; }
.cl-lab[data-find-lab] .fe-rolls .button { padding-inline: 14px; font-size: 17px; white-space: nowrap; }
.fe-share b { white-space: nowrap; }
.fe-sums { justify-content: flex-start; gap: 4px 20px; }
.fe-cap { color: var(--ink); font-weight: 700; }
.fe-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cl-lab[data-find-lab] .fe-card { padding-inline: 6px; font-size: 17px; line-height: 1.2; }
.fe-yesno { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.reduced-motion .fe-bar, body.reduced-motion .cl-lab[data-find-lab] .fe-face { transition: none; }
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .cl-lab[data-find-lab="events"] { --cube: 80px; --track: 64px; }
  .fe-faces { grid-template-columns: repeat(3, minmax(0, 104px)); }
}
@media (max-width: 560px) {
  .fe-rolls { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .cl-lab[data-find-lab="events"] { --cube: 76px; --track: 64px; }
  .fe-tally { gap: 5px; }
  .fe-die--bin, .fe-die--fly { width: 30px; height: 30px; padding: 4px; }
}

/* ---- Algebra lab (Karo): the frame (x + a)(x + b) or the cut square and the tile tray | steppers, guesses, rows --- */
.fa-board { display: block; width: min(100%, 420px); height: auto; aspect-ratio: 1; overflow: visible; }
.fa-slot { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
.fa-outline { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.fa-ghost { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 6 6; }
.fa-hole { fill: var(--surface); stroke: var(--red-base); stroke-width: 2; stroke-dasharray: 6 4; }
.fa-dimline { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.fa-text { fill: var(--ink); font-size: 19px; font-weight: 750; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.fa-text--big { font-size: 30px; }
.fa-dim { fill: var(--ink-2); }
.fa-dim--left { text-anchor: end; }
/* A tile or a cut piece moves as one group about its own centre. */
.fa-tile, .fa-restore, [data-cut-shade] { transform-box: fill-box; transform-origin: center; }
.fa-tile-face { stroke-width: 2; }
.fa-tile--square .fa-tile-face { fill: var(--brand-tint-2); stroke: var(--brand); }
.fa-tile--strip .fa-tile-face { fill: var(--gold-tint); stroke: var(--gold-line); }
.fa-tile--unit .fa-tile-face { fill: var(--green-tint); stroke: var(--green-base); }
/* Cut parts are shaded where they were; where two shades overlap the corner reads darker: it was cut twice. */
.fa-cut { fill: var(--red-base); fill-opacity: .16; stroke: var(--red-base); stroke-width: 2; stroke-dasharray: 6 4; }
.fa-restore-face { fill: var(--gold-fill); stroke: var(--gold-line); stroke-width: 2.5; }
.fa-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; width: min(100%, 420px); gap: 8px 10px; }
.cl-lab[data-find-lab] .fa-tray-tile { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 8px; font-size: 22px; font-weight: 800; }
.cl-lab[data-find-lab] .fa-tray-tile:active { transform: scale(.97); }
.fa-swatch { display: inline-block; flex: none; border: 2px solid; border-radius: 3px; }
.fa-swatch--square { width: 22px; height: 22px; background: var(--brand-tint-2); border-color: var(--brand); }
.fa-swatch--strip { width: 8px; height: 22px; background: var(--gold-tint); border-color: var(--gold-line); }
.fa-swatch--unit { width: 8px; height: 8px; background: var(--green-tint); border-color: var(--green-base); }
.fa-card { justify-self: start; padding: 8px 18px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line-strong); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fa-steppers { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.fa-steppers .find-value { min-width: 48px; }
.fa-guesses, .fa-cuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fa-cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-actions { flex-wrap: wrap; gap: 8px; }
.cl-lab[data-find-lab] .fa-table { width: 100%; border-collapse: collapse; font-size: 18px; font-variant-numeric: tabular-nums; }
.fa-table caption { padding-bottom: 2px; color: var(--ink-2); font-size: 15px; font-weight: 700; text-align: start; }
.cl-lab[data-find-lab] .fa-table th, .cl-lab[data-find-lab] .fa-table td { padding: 3px 8px; border: 0; border-bottom: 1px solid var(--line); text-align: center; }
.cl-lab[data-find-lab] .fa-table thead th { color: var(--ink-2); font-size: 15px; font-weight: 700; }
.cl-lab[data-find-lab] .fa-table tbody th { font-weight: 750; text-align: start; white-space: nowrap; }
.fa-expression b { font-size: 22px; white-space: normal; }
.fa-step { margin: 0; }
.fa-say { font-size: 18px; font-weight: 650; line-height: 1.35; }
.fa-math { white-space: nowrap; }
@media (min-width: 900px) {
  .fa-board { width: min(100%, 440px, calc(100dvh - 330px)); }
}
@media (max-width: 560px) {
  .fa-guesses { grid-template-columns: minmax(0, 1fr); }
  .fa-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fa-tray .find-count { grid-column: 1 / -1; justify-self: center; }
}