/* Underhill Adventures – Class celebration board (teacher.html). Uses the brand variables from style.css, so the
   comfort tints, dark and high-contrast themes apply. Loose pen-and-watercolour feel: wobbly ink edges, soft washes. */
.cb-tools { margin: 6px 0 16px; }
.cb-who { border: 2px dashed #CFC8B3; border-radius: 16px; padding: 12px 16px 14px; margin: 0 0 8px; }
.cb-who legend { font-weight: 800; color: var(--forest-deep); padding: 0 6px; }
.cb-checks { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.cb-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 2px solid #CFC8B3; border-radius: 12px; background: #fff; font-weight: 700; cursor: pointer; }
.cb-check input { width: 22px; height: 22px; accent-color: var(--forest); margin: 0; }
.cb-check:has(input:not(:checked)) { border-style: dashed; color: var(--muted); }
.cb-check:has(input:focus-visible) { outline: 3px solid var(--forest); outline-offset: 2px; }

/* Cards: hand-drawn ink outline and a watercolour wash in one corner */
.cb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cb-card { position: relative; background-color: var(--paper); color: var(--ink); border: 2px solid var(--bark); padding: 16px 18px 14px;
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; box-shadow: 3px 4px 0 rgba(107, 76, 59, .18); overflow: hidden; }
.cb-card::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 70%; height: 80%; border-radius: 48% 52% 60% 40%; opacity: .28; pointer-events: none;
  background: radial-gradient(closest-side, var(--wash, #E9D27F), transparent); }
.cb-tint-0 { --wash: #E9D27F; } .cb-tint-1 { --wash: #8DB487; } .cb-tint-2 { --wash: #E9A98F; } .cb-tint-3 { --wash: #9FC2D9; }
.cb-card > * { position: relative; }
.cb-name { font-family: var(--font-display); font-size: 1.45rem; color: var(--forest); margin: 0 0 8px; }
.cb-moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-m { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.cb-m .icon { color: var(--amber-deep); margin-top: .12em; }
.cb-empty { text-align: center; padding: 28px 16px; color: var(--muted); border: 2px dashed #CFC8B3; border-radius: 18px; }
.cb-empty p { color: inherit; }

/* Full-screen "Show to class" */
html.cb-open, html.cb-open body { overflow: hidden; }
.cb-stage { position: fixed; inset: 0; z-index: 1000; overflow: auto; background-color: var(--cream); background-image: var(--paper-tex); color: var(--ink); }
.cb-stage[hidden] { display: none; }
.cb-stage::before { content: ""; position: fixed; inset: auto 0 0 0; height: 45vh; background: url("../assets/washes/wash-2.svg") center bottom / cover no-repeat; opacity: .35; pointer-events: none; }
.cb-stage-inner { position: relative; width: min(1500px, 100% - 48px); margin: 0 auto; padding: 22px 0 48px; }
.cb-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cb-logo { height: 52px; width: auto; }
.cb-stage .tbtn { font-size: 1.15rem; min-height: 52px; padding: 10px 20px; }
.cb-kbd { font: 800 .8rem var(--font-body); border: 1.5px solid currentColor; border-radius: 6px; padding: 1px 6px; }
.cb-stage-title { font-size: clamp(2.4rem, 5vw, 4rem); text-align: center; margin: 18px 0 4px; color: var(--forest); }
.cb-stage-sub { text-align: center; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.cb-guides { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-bottom: 22px; }
.cb-guide { display: flex; align-items: center; gap: 12px; max-width: 560px; }
.cb-guide img { width: 120px; height: 120px; object-fit: contain; flex: none; }
.cb-bubble { margin: 0; background: var(--paper); color: var(--ink); border: 2px solid var(--bark); padding: 12px 16px; font-size: 1.2rem; line-height: 1.4;
  border-radius: 22px 255px 18px 225px / 225px 18px 255px 22px; }
.cb-stage-board:focus-visible { outline: 3px solid var(--forest); outline-offset: 6px; border-radius: 18px; }
.cb-big { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.cb-big .cb-card { padding: 22px 24px 20px; }
.cb-big .cb-name { font-size: clamp(2rem, 3vw, 2.6rem); }
.cb-big .cb-m { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.cb-stage .cb-empty { font-size: 1.5rem; background: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.ua-calm) .cb-stage:not([hidden]) .cb-card { animation: cbIn .45s ease-out both; }
  html:not(.ua-calm) .cb-stage .cb-card:nth-child(2n) { animation-delay: .06s; }
  html:not(.ua-calm) .cb-stage .cb-card:nth-child(3n) { animation-delay: .12s; }
}
@keyframes cbIn { from { opacity: 0; transform: translateY(10px) rotate(-.6deg); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .cb-guide img { width: 84px; height: 84px; } .cb-bubble { font-size: 1.05rem; } }
@media print { .cb-panel { display: none; } }

/* Dark tint and high-contrast dark: --forest turns gold and --paper dark, so cards follow automatically */
.ua-dark .cb-card, .ua-dark .cb-bubble, .ua-dark .cb-check, .ua-dark .cb-stage .cb-empty { background-color: var(--paper); color: var(--ink); border-color: var(--forest); }
.ua-dark .cb-card { box-shadow: 3px 4px 0 rgba(0, 0, 0, .35); }
.ua-dark .cb-card::before { opacity: .16; }
.ua-dark .cb-m .icon { color: #F3D27A; }
.ua-dark .cb-stage::before { opacity: .08; }
.ua-dark .cb-who, .ua-dark .cb-empty { border-color: var(--muted); }
.ua-dark .cb-check:has(input:not(:checked)) { color: var(--ink); }
.ua-contrast-high-dark .cb-card, .ua-contrast-high-dark .cb-bubble { background: #000; border: 3px solid #FFE76A; box-shadow: none; }
.ua-contrast-high-dark .cb-card::before, .ua-contrast-high-dark .cb-stage::before, .ua-hc .cb-stage::before { display: none; }
.ua-contrast-high .cb-card, .ua-contrast-high .cb-bubble { border: 3px solid #000; box-shadow: none; }
/* Order buttons show which order is on; the logo sits on a cream patch in dark themes so its green ink stays readable */
.cb-panel .tbtn[aria-pressed="true"], .cb-stage .tbtn[aria-pressed="true"] { background: #EAF1EA; box-shadow: inset 0 0 0 2px var(--forest); }
.cb-panel .tbtn[aria-pressed="true"]::after { content: "✓"; font-weight: 900; }
.ua-dark .cb-panel .tbtn[aria-pressed="true"] { background: #2E5A43 !important; color: var(--ink) !important; }
.ua-dark .cb-logo { background: #FBF5E6; border-radius: 12px; padding: 6px 10px; height: 64px; box-sizing: border-box; }