/* Test board (widgets/testboard/testboard.js) */
.tb { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; }
.tb__tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.tb__tabs .aha-i { font-size: 13px; }
.tb__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 16px; }
.tb--cmp .tb__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.tb__ph { position: relative; margin: 0; min-height: 0; border-radius: 12px; overflow: hidden; background: var(--tile-bg); }
.tb__frame { position: relative; display: block; width: 100%; height: 100%; }
.tb__ph img { width: 100%; height: 100%; object-fit: cover; display: block; animation: tb-in .5s ease both; }
/* With pins the photo is shown whole, so the pins stay on their notes. */
.tb__ph--pins { display: grid; place-items: center; background: #ececec; }
.tb__ph--pins .tb__frame { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.tb__ph--pins .tb__frame { width: min(100%, calc((100cqh - 120px) * 1.333)); }
.tb__pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--a-orange); box-shadow: 0 0 0 0 rgba(247,147,30,.5); animation: tb-pulse 2.4s ease infinite; }
.tb__pin.is-answered { background: var(--a-teal); }
.tb__pin:hover, .tb__pin:focus-visible { outline: none; transform: scale(1.2); }
@keyframes tb-pulse { 70% { box-shadow: 0 0 0 8px rgba(247,147,30,0); } 100% { box-shadow: 0 0 0 0 rgba(247,147,30,0); } }
.tb__ph figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 100px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.tb__cards { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.tb__what { margin: 0; font-size: 13px; color: var(--ink-2); }
.tb__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: hidden; }
.tb__col { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.tb__col .aha-eye { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.tb__card { padding: 6px 9px; border-radius: 10px; font-size: 12px; line-height: 1.3; animation: tb-in .45s ease both; animation-delay: var(--d); }
.tb__col--seen .tb__card { background: color-mix(in srgb, #f7931e 22%, transparent); }
.tb__col--wrong .tb__card { background: color-mix(in srgb, #f15a24 16%, transparent); }
.tb__col--next .tb__card { background: color-mix(in srgb, var(--a-teal) 20%, transparent); }
@keyframes tb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tb__keep { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 8px; border-top: 1px solid var(--a-line); font-size: 12px; color: var(--ink-2); }
.tb__keep b { font-weight: 600; color: var(--ink); margin-right: 4px; }
.tb__chart { min-height: 0; display: grid; place-items: center; }
.tb__chart svg { width: 100%; height: 100%; overflow: visible; }
.tb__grid { stroke: var(--a-line); }
.tb__axis { font: 600 9.5px var(--font); letter-spacing: .04em; fill: var(--muted); text-anchor: middle; text-transform: uppercase; }
.tb__l { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: tb-draw 1.1s ease forwards; }
.tb__l--pot { stroke-dasharray: 5 5; animation: none; stroke-dashoffset: 0; opacity: .8; }
.tb__l-dot { fill: var(--c); }
.tb__l--pot-dot { fill: var(--a-surface); stroke: var(--c); stroke-width: 2; }
.tb__gap { stroke: var(--a-teal); stroke-dasharray: 2 3; }
@keyframes tb-draw { to { stroke-dashoffset: 0; } }
.tb__cmp { align-self: center; display: flex; flex-direction: column; gap: 10px; }
.tb__cmp p { margin: 0; color: var(--ink-2); }
.tb__modes { display: flex; flex-wrap: wrap; gap: 5px; }
.tb__legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.tb__legend li { display: inline-flex; align-items: center; gap: 6px; }
.tb__legend i { width: 10px; height: 10px; border-radius: 50%; }
/* Narrow frames (≤ 560px; class set by widgets/aha-kit/kit.js). */
.tb.aha--w560 { padding: 12px; }
.aha--w560 .tb__tabs span { display: none; }
.aha--w560 .tb__tabs .aha-chip { width: 34px; padding: 0; justify-content: center; }
.aha--w560 .tb__body, .aha--w560 .tb--cmp .tb__body { grid-template-columns: 1fr; grid-template-rows: 30% minmax(0, 1fr); }
.aha--w560 .tb--cmp .tb__body { grid-template-rows: minmax(0, 1fr) auto; }
.aha--w560 .tb__cols { grid-template-columns: 1fr; overflow: auto; overscroll-behavior: contain; }
.aha--w560 .tb__col { min-height: auto; }
@media (prefers-reduced-motion: reduce) { .tb__l { animation: none; stroke-dashoffset: 0; } }
/* Stacked page: as tall as its content (ratioV 'auto'), so nothing scrolls inside it. */
.is-vertical .tb__body, .is-vertical .tb--cmp .tb__body { grid-template-rows: auto auto; }
.is-vertical .tb__ph { aspect-ratio: 16 / 10; max-height: 320px; }
.is-vertical .tb__ph--pins .tb__frame { width: 100%; }
.is-vertical .tb__cols { overflow: visible; }
.is-vertical .tb__chart { aspect-ratio: 560 / 272; }
.tb:not(.tb--pins) .aha-tap { display: none !important; }