/* Classroom Instructions Board. The step size is --fs, set by the fit in
   instructions.js (text size "Fit"), or fixed in container units. */

.ib {
  --fs: 28px;
  --ctl-h: calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
  overflow: hidden;
}
.ib [hidden] { display: none !important; }

.ib-wrap {
  position: absolute; inset: 0 0 var(--ctl-h); display: flex; flex-direction: column;
  gap: clamp(6px, 2.2cqmin, 30px); padding: clamp(10px, 3.2cqmin, 40px) clamp(12px, 4.4cqmin, 56px) clamp(4px, 1cqmin, 12px);
}

/* ---- title ---- */
.ib-head { flex: none; display: flex; align-items: center; gap: clamp(8px, 2cqmin, 24px); min-width: 0; }
.ib-title, .ib-title-in {
  font: 700 clamp(18px, max(8.4cqmin, var(--fs) * 1.2), 190px)/1.1 var(--font-display); letter-spacing: -.015em;
}
.ib-title {
  position: relative; min-width: 0; max-width: 100%; padding: .02em .18em .14em; margin-left: -.18em; border: 0; border-radius: .18em;
  background: none; color: var(--stage-ink); text-align: left; cursor: text; overflow-wrap: anywhere;
}
.ib-title::after { content: ""; position: absolute; left: .18em; bottom: 0; width: 1.6em; height: .1em; border-radius: 99px; background: var(--cat); }
.ib-title:hover { background: color-mix(in srgb, var(--stage-ink) 5%, transparent); }
.ib-title-in {
  flex: 1; min-width: 0; min-height: 0; padding: .02em .18em; margin-left: -.18em; border: 2px solid var(--cat); border-radius: .18em;
  background: var(--field); color: var(--ink);
}
.ib-done { flex: none; animation: t-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.ib-done .icon { color: var(--cat); }

/* ---- steps ---- */
.ib-body { flex: 1 1 auto; min-height: 0; display: flex; gap: clamp(10px, 3cqmin, 44px); }
.ib-list {
  flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0; padding: .1em .1em 0 0; list-style: none; overflow: hidden;
  font-size: var(--fs); font-family: var(--font-display);
}
.ib[data-size="large"] { --fs: clamp(16px, 6.6cqmin, 130px); }
.ib[data-size="huge"] { --fs: clamp(20px, 9.6cqmin, 190px); }
.ib[data-size="large"] .ib-list, .ib[data-size="huge"] .ib-list { overflow-y: auto; }
/* Wide and short (a strip across the Board): two columns. */
@container (min-aspect-ratio: 21/10) {
  .ib-list { columns: 2; column-gap: 1.4em; }
}

.ib-step { display: flex; align-items: center; gap: .42em; margin: 0 0 .3em; line-height: 1.18; break-inside: avoid; }
.ib-tick {
  flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; min-width: 28px; min-height: 28px; padding: 0;
  border-radius: 50%; border: max(2px, .08em) solid color-mix(in srgb, var(--cat) 55%, transparent);
  background: color-mix(in srgb, var(--cat) 10%, var(--stage-bg)); color: var(--cat); cursor: pointer;
  font: 700 .7em/1 var(--font-display); font-variant-numeric: tabular-nums;
  transition: background .2s, border-color .2s, color .2s, transform .1s;
}
.ib-tick:hover { background: color-mix(in srgb, var(--cat) 22%, var(--stage-bg)); }
.ib-tick:active { transform: scale(.94); }
.ib-tick .ib-check { display: none; width: 62%; height: 62%; stroke-width: 3; }
.ib:not(.is-numbered) .ib-n { display: none; }
.is-done .ib-tick { background: var(--cat); border-color: transparent; color: #fff; }
.is-done .ib-tick .ib-n { display: none; }
.is-done .ib-tick .ib-check { display: block; animation: t-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.ib-icon { flex: none; display: grid; place-items: center; color: var(--cat); transition: opacity .3s; }
.ib-icon .icon { width: 1.05em; height: 1.05em; }
.ib-text {
  flex: 1 1 auto; min-width: 0; padding: .04em .16em; margin: 0; border: 0; border-radius: .18em;
  background: none; color: var(--stage-ink); text-align: left; cursor: text;
  font: 560 1em/1.18 var(--font-display); overflow-wrap: anywhere;
  text-decoration: line-through transparent; text-decoration-thickness: .07em;
  transition: opacity .3s, text-decoration-color .3s;
}
.ib-text:hover { background: color-mix(in srgb, var(--stage-ink) 5%, transparent); }
.is-done .ib-text { opacity: .4; text-decoration-color: currentColor; }
.is-done .ib-icon { opacity: .35; }
.ib-empty { font-size: .7em; color: color-mix(in srgb, var(--stage-ink) 50%, transparent); padding: .3em 0; }

/* ---- editing a step on the board ---- */
.ib-step.is-editing { flex-wrap: wrap; }
.ib-input {
  flex: 1 1 8em; min-width: 0; min-height: 0; padding: .04em .2em; border: 2px solid var(--cat); border-radius: .18em;
  background: var(--field); color: var(--ink); font: 560 1em/1.18 var(--font-display);
}
.ib-tools { flex: none; display: flex; gap: 4px; font-size: 16px; }
.ib-tool {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer;
}
.ib-tool:hover { background: var(--card-alt); }
.ib-tool:disabled { opacity: .4; cursor: default; }
.ib-tool.is-up .icon { transform: rotate(-90deg); }
.ib-tool.is-down .icon { transform: rotate(90deg); }
.ib-tool-icon { color: var(--cat); }
.ib-picker {
  position: absolute; z-index: 20; display: grid; grid-template-columns: repeat(5, 42px); gap: 4px; padding: 8px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.ib-pick {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 10px;
  border: 1px solid transparent; background: none; color: var(--ink); cursor: pointer;
}
.ib-pick:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ib-pick.is-on { background: color-mix(in srgb, var(--cat) 15%, var(--card)); border-color: var(--cat); color: var(--cat); }
.ib-pick-none { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed var(--muted); }

/* ---- next ---- */
.ib-next {
  flex: 0 0 auto; align-self: flex-start; width: clamp(140px, 27cqw, 620px);
  padding: clamp(8px, 2.2cqmin, 30px) clamp(10px, 2.8cqmin, 36px); border-radius: clamp(12px, 2.6cqmin, 30px);
  background: color-mix(in srgb, var(--cat) 7%, var(--stage-bg)); border: 2px dashed color-mix(in srgb, var(--cat) 45%, transparent);
}
.ib-next-cap {
  display: flex; align-items: center; gap: .4em; color: var(--cat);
  font: 700 clamp(11px, 2.8cqmin, 44px)/1.2 var(--font-display); letter-spacing: .07em; text-transform: uppercase;
}
.ib-next-cap .icon { width: 1.2em; height: 1.2em; }
.ib-next-text { margin-top: .35em; font: 600 clamp(14px, 4.4cqmin, 92px)/1.25 var(--font-display); overflow-wrap: anywhere; }
.ib-next-text.is-placeholder { opacity: .45; font-style: italic; font-weight: 500; }
@container (max-aspect-ratio: 1/1) {
  .ib-body { flex-direction: column; }
  .ib-next { width: auto; align-self: stretch; display: flex; align-items: baseline; gap: .8em; }
  .ib-next-text { margin-top: 0; font-size: clamp(13px, 4cqmin, 70px); }
}

/* Short spaces (a strip on the Board): no buttons, the keys and clicks still work. */
@container (max-height: 340px) {
  .ib-controls { display: none; }
  .ib-wrap { inset: 0; }
}