/* The class builders (Tarsia, dominoes, picture reveal, diagram labeller),
   laid out like the escape rooms page: a hero with a small live example
   beside it, then "Build one for your topic" (from the question bank, or
   your own), then the editor. The topic picker itself is tools/topics.js. */

/* ---------- hero ---------- */
.cb-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px 44px; align-items: center; margin: 4px 0 30px; }
.cb-hero-text { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.cb-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.cb-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 5vw, 54px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.cb-hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--riso-pink-deep); }
.cb-hero p { margin: 0; max-width: 62ch; color: var(--ink-dim); font-size: 16.5px; line-height: 1.55; }
.cb-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-white); color: var(--ink); font: inherit; font-family: var(--font-display); font-size: 15px; font-weight: 650; line-height: 1.3; text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.cb-btn:hover { transform: translateY(-1px); }
.cb-btn:active:not(:disabled) { transform: translate(1px, 1px); }
.cb-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper-white); }
.cb-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* The live example: a card beside the words, its own animation per tool. */
.cb-demo { position: relative; justify-self: end; width: min(100%, 360px); min-height: 220px; padding: 14px 16px; background: var(--paper-white); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--riso-pink); overflow: hidden; }
.cb-demo-cap { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.cb-demo-cap b { font-weight: 500; color: var(--riso-green-deep); }

/* ---------- build one for your topic ---------- */
.cb-build { margin: 0 0 34px; }
.cb-build-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.cb-build-h h2 { margin: 0; font-family: var(--font-display); font-size: 26px; letter-spacing: -.015em; }
.cb-build-h span { color: var(--ink-dim); font-size: 15px; }
.cb-card { display: grid; gap: 14px; padding: 18px 20px; background: var(--paper-white); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--riso-green); }
.cb-card > * { min-width: 0; }
.cb-pane[hidden] { display: none; }

/* Pills: a segmented switch, wrapping on a phone. */
.cb-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper-white); }
.cb-seg button { border: 0; background: transparent; padding: 7px 13px; color: var(--ink); font: inherit; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cb-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper-white); }
/* hidden means hidden: the level pills on a course without levels, the
   course pills on a builder with one course */
.cb-seg[hidden], .cb-courses[hidden], .cb-go-act[hidden] { display: none; }
.cb-seg button:focus-visible { outline: 2px solid var(--riso-pink-deep); outline-offset: -3px; }
.cb-top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.cb-courses { display: flex; flex-wrap: wrap; gap: 8px; }

/* Themes as tabs, one at a time. */
.cb-themes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; border-bottom: 1.5px solid var(--line); }
.cb-themes[hidden] { display: none; }
.cb-themes button { position: relative; display: grid; justify-items: start; gap: 1px; margin-bottom: -1.5px; padding: 8px 12px 10px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink-dim); font: inherit; text-align: left; cursor: pointer; }
.cb-themes button b { font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.cb-themes button span { font-size: 12px; white-space: nowrap; }
.cb-themes button i { position: absolute; top: 4px; right: 0; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--riso-pink); color: var(--on-brand); font-family: var(--font-mono); font-size: 11px; font-style: normal; text-align: center; }
.cb-themes button[aria-selected="true"] { border-bottom-color: var(--riso-pink-deep); color: var(--ink); }

.cb-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px 22px; align-items: start; }
.cb-note { grid-column: 1 / -1; margin: 0 0 6px; color: var(--ink-dim); font-size: 14px; }
.cb-row { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; font-size: 14.5px; line-height: 1.3; cursor: pointer; }
.cb-row input { flex: none; accent-color: var(--riso-pink-deep); transform: translateY(1px); }
.cb-row .code { min-width: 3.2em; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.cb-row .n { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cb-row.off { opacity: .45; cursor: not-allowed; }
.cb-all { justify-self: start; padding: 6px 0; border: 0; background: none; color: var(--riso-pink-deep); font: inherit; font-size: 13.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.cb-go { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.cb-meter { flex: 1 1 260px; font-size: 14px; color: var(--ink-dim); }
.cb-meter.ready { color: var(--riso-green-deep); font-weight: 600; }
.cb-go-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cb-go-act label { font-size: 13.5px; color: var(--ink-dim); }
.cb-msg { margin: 0; font-size: 14px; color: var(--riso-green-deep); }
.cb-msg.bad { color: var(--riso-pink-deep); }

/* A grid of pictures to choose from (the diagram labeller's bank diagrams). */
.cb-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cb-pic { display: grid; gap: 6px; padding: 8px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cb-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 6px; }
.cb-pic small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.cb-pic span { font-size: 13.5px; line-height: 1.25; }
.cb-pic[aria-pressed="true"], .cb-pic:hover { border-color: var(--ink); box-shadow: 3px 3px 0 var(--riso-green); }

/* On a narrow phone a pill group wraps: each choice becomes its own pill. */
@media (max-width: 420px) {
  .cb-seg { gap: 6px; border: 0; border-radius: 0; overflow: visible; background: none; }
  .cb-seg button { border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-white); }
  .cb-seg button[aria-pressed="true"] { background: var(--ink); }
}
@media (max-width: 760px) {
  .cb-hero { grid-template-columns: minmax(0, 1fr); }
  .cb-demo { justify-self: start; }
  .cb-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-demo *, .cb-demo *::before, .cb-demo *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}
@media print { .cb-hero, .cb-build { display: none !important; } }

/* A CSV dragged over the pairs card (tools/csv-pairs.js): the whole card
   takes it, and says so. */
.pr-card.csv-over { position: relative; outline: 2.5px dashed var(--riso-green-deep); outline-offset: 5px; }
.pr-card.csv-over::after { content: "Drop the CSV to fill the table"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: inherit; background: color-mix(in srgb, var(--paper-white) 88%, transparent); color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 650; pointer-events: none; }
.pr-csv-strip .csv-pick { flex: none; }
.pr-csv-strip small a { color: var(--riso-pink-deep); font-weight: 600; text-underline-offset: 2px; }

/* The ready-made packs' drawings ink their lines in currentColor, so they
   follow the theme. */
.pr-stock-thumb { color: var(--ink); }