@font-face { font-family: 'ASL'; src: url('fonts/asl.ttf') format('truetype'); font-display: block; }      /* ASL font: each letter shows as its handshape */
/* ASL Fingerspelling Practice: light and warm, rounded cards, ASL Study's fonts and colors */
:root {
  --bg: #F6F2EA; --surface: #FFFFFF; --surface2: #EFE8DC; --ink: #1B1E3C; --muted: #5A6185; --line: #E3D9CC;
  --accent: #2F6BFF; --accent-ink: #FFFFFF; --sun: #FFC83D; --good: #14804D; --good-soft: #DCF4E7; --bad: #C7362E; --bad-soft: #FBE3E1;
  --display: 'Fredoka', system-ui, sans-serif; --body: 'Nunito', system-ui, sans-serif; --r: 18px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }      /* buttons set their own display; hidden must still win */
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.45 var(--body); }
h1, h2 { font-family: var(--display); font-weight: 600; margin: 0 0 12px; line-height: 1.15; }
h1 { font-size: clamp(30px, 5vw, 46px); } h2 { font-size: 26px; }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; max-width: 1140px; margin: 0 auto; }
.brand { font: 600 21px var(--display); color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.logo { font-size: 26px; }
.top nav { display: flex; gap: 6px 16px; flex-wrap: wrap; } .top nav a { white-space: nowrap; } .top nav a { color: var(--ink); text-decoration: none; font-weight: 700; } .top nav a:hover { color: var(--accent); }
main { max-width: 1140px; margin: 0 auto; padding: 0 16px 24px; }
.screen { display: none; } .screen.on { display: block; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: 0 2px 10px rgba(60, 40, 20, .06); margin-bottom: 16px; }
.foot { text-align: center; color: var(--muted); font-size: 14px; padding: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 10px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 800; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.06); } .btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: var(--surface2); color: var(--ink); }
.btn.big { font-size: 20px; padding: 14px 30px; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 2px 4px; font-weight: 700; }
.link.danger { color: var(--bad); margin-top: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; } .row.between { justify-content: space-between; }
.hint { color: var(--muted); font-size: 15px; margin: 4px 0; }

.hero { text-align: center; padding: 40px 22px; }
.hero p { font-size: 19px; max-width: 620px; margin: 0 auto 20px; }
.points { list-style: none; padding: 0; margin: 26px auto 0; max-width: 560px; text-align: left; }
.points li { padding: 6px 0 6px 30px; position: relative; } .points li::before { content: '✓'; position: absolute; left: 4px; color: var(--good); font-weight: 800; }

.field { display: block; margin: 16px 0; } .field.small { margin: 18px 0 6px; }
.lab { display: block; font-weight: 800; margin-bottom: 6px; }
select, input[type=email], input:not([type]), #p-answer { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--surface); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.seg { display: inline-flex; background: var(--surface2); border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-weight: 700; }
.seg button { color: var(--ink); }
.seg button.on { background: var(--pick, var(--accent)); color: var(--accent-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }      /* the chosen one is filled with the scheme's accent, clear in every color scheme (Colleen) */
.seg.sm button { padding: 4px 10px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-weight: 700; font-size: 15px; }
.chips button { color: var(--muted); }
.chips button.on { background: var(--good); border-color: var(--good); color: var(--accent-ink); }      /* chosen = green with a check, not chosen = white (Colleen: dark vs white was unclear) */
.chips button.on::before { content: '✓ '; } .chips.letters button.on::before { content: none; }
.chips button small { opacity: .7; font-weight: 600; }
.check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.sub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
details summary { cursor: pointer; }
.pool { color: var(--muted); }
.tones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tones button.sw { width: 32px; height: 32px; border-radius: 50%; padding: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.tones button.on { box-shadow: 0 0 0 3px var(--accent); }
.tones button.rnd { border-radius: 999px; padding: 5px 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; }
.tones button.rnd.on { box-shadow: 0 0 0 3px var(--accent); }

/* speed slider: slow on the left, fast on the right, four labelled marks (Colleen) */
.speed { position: relative; padding-bottom: 26px; } .speed input { width: 100%; accent-color: var(--accent); }
.marks { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; }
.marks span { position: absolute; transform: translateX(-50%); font-size: 13px; white-space: nowrap; color: var(--muted); }
.marks span::before { content: ''; position: absolute; left: 50%; top: -8px; width: 2px; height: 6px; background: #b8ad9e; }
.marks span:first-child { transform: none; } .marks span:first-child::before { left: 6px; }
.marks span:last-child { transform: translateX(-100%); } .marks span:last-child::before { left: auto; right: 6px; }

/* play: the hand's square on the left, everything else on the right; stacked (hand on top) on a phone */
.play { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.stage-slot { position: sticky; top: 12px; }
.stage { position: relative; }
.stage canvas { width: 100%; height: auto; aspect-ratio: 1; display: block; background: var(--surface); border-radius: var(--r); box-shadow: 0 2px 10px rgba(60, 40, 20, .08); }
body > .stage { position: absolute; left: -9999px; width: 400px; }      /* parked off screen when no screen shows it */
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
/* letter support: always the same spot, centred, its bottom just above the hand's square (Colleen: students never chase it) */
.assist { display: none; text-align: center; font: 700 44px/1 var(--display); color: var(--ink); height: 56px; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.assist.small { display: flex; } .assist.large { display: flex; height: 34vh; font-size: min(30vh, 260px); }
.panel .count { font-weight: 800; color: var(--muted); }
#p-answer { font-size: 26px; text-transform: uppercase; letter-spacing: 2px; margin: 4px 0 6px; }
.blanks { font: 700 26px var(--display); letter-spacing: 5px; word-spacing: 22px; white-space: pre; min-height: 0; color: var(--muted); }
.blanks:empty { display: none; }
.blanks .fbl { display: inline-block; width: 1.4em; text-align: center; color: var(--ink, inherit); }
.blanks .fbox { width: 1.4em; height: 1.6em; margin: 0 2px; padding: 0; text-align: center; font: 700 24px var(--display); text-transform: uppercase; border: 0; border-bottom: 3px solid var(--muted); border-radius: 6px 6px 0 0; background: rgba(127, 127, 127, .1); color: inherit; vertical-align: bottom; }
.blanks .fbox.fblur { background: repeating-linear-gradient(135deg, rgba(120, 130, 160, .16) 0 6px, rgba(120, 130, 160, .05) 6px 12px); border-bottom-style: dashed; }      /* a blurred letter (Fill in the blanks) */
.blanks .fbox.fblur::placeholder { color: var(--muted); opacity: .9; }
.blanks .fbox:focus { outline: 2px solid var(--accent); border-bottom-color: var(--accent); }
.clue { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 12px; }
.clue-box { min-width: 200px; min-height: 120px; display: grid; place-items: center; border-radius: 14px; background: var(--surface2); font: 700 30px var(--display); padding: 10px 18px; }
.clue-box img { max-width: 240px; max-height: 200px; border-radius: 10px; }
.clue-lab { font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.meaning { background: var(--surface2); border-radius: 14px; padding: 10px 14px; margin: 6px 0; } .meaning p { margin: 4px 0; } .meaning .note { color: var(--muted); font-size: 14px; }
.feedback { min-height: 30px; font-weight: 800; font-size: 20px; }
.feedback.good { color: var(--good); } .feedback.bad { color: var(--bad); }
.feedback .ans { display: block; font: 600 24px var(--display); color: var(--ink); }

.big-score { font: 700 56px var(--display); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.stat { background: var(--surface2); border-radius: 14px; padding: 10px 14px; } .stat b { display: block; font: 600 24px var(--display); } .stat span { color: var(--muted); font-size: 14px; }
.words { padding-left: 24px; columns: 2; column-gap: 32px; } @media (max-width: 760px) { .words { columns: 1; } }
.words li { break-inside: avoid; padding: 3px 0; } .words .ok { color: var(--good); font-weight: 800; } .words .no { color: var(--bad); font-weight: 800; } .words .typed { color: var(--muted); }
table.t { border-collapse: collapse; width: 100%; margin: 8px 0 18px; font-size: 15px; }
table.t th, table.t td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); } table.t th { color: var(--muted); font-weight: 800; }
.bar { height: 10px; border-radius: 6px; background: var(--surface2); overflow: hidden; min-width: 80px; } .bar i { display: block; height: 100%; background: var(--good); }
.code { font: 12px ui-monospace, Menlo, monospace; word-break: break-all; color: var(--muted); background: var(--surface2); padding: 8px; border-radius: 8px; }
.shot ul { padding-left: 20px; } .shot li { margin: 4px 0; }

.chart .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.chart .t { position: relative; display: block; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; }
.chart .t:hover { border-color: var(--accent); }
.chart .t .L { position: absolute; top: 6px; left: 10px; font: 700 28px var(--display); }
.chart .t img { width: 94%; aspect-ratio: 1; display: block; margin: 10% auto 0; }
.chart .arr { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #c2410c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 5; opacity: .85; }
.ad { min-height: 90px; border: 1px dashed var(--line); border-radius: var(--r); display: grid; place-items: center; color: var(--muted); font-size: 13px; }


/* games menu */
.pad { padding: 6px 4px 0; }
.gamegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 22px; }
.gcard { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; color: var(--ink); text-decoration: none; box-shadow: 0 2px 10px rgba(60, 40, 20, .06); }
.gcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.gcard .gi { font-size: 30px; } .gcard b { font: 600 20px var(--display); } .gcard span:last-child { color: var(--muted); font-size: 15px; }
.gcard .tag { align-self: flex-start; background: var(--good-soft); color: var(--good); font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.chips.letters button { width: 40px; padding: 5px 0; text-align: center; }

/* choices (Pick the word, Look-alike letters) */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; }
.choices button { border: 2px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px 8px; font: 600 24px var(--display); letter-spacing: 1px; cursor: pointer; }
.choices button:hover:not(:disabled) { border-color: var(--accent); }
.choices button.right { background: var(--good-soft); border-color: var(--good); } .choices button.wrong { background: var(--bad-soft); border-color: var(--bad); }
.ladder { display: flex; justify-content: space-between; font-weight: 800; background: var(--surface2); border-radius: 12px; padding: 8px 12px; margin: 6px 0; }

/* Fill in the blanks: frosted glass over the hand for the hidden letters */
.frost { position: absolute; inset: 0; border-radius: var(--r); backdrop-filter: blur(30px) saturate(.75); -webkit-backdrop-filter: blur(30px) saturate(.75); background: rgba(240, 236, 228, .55); opacity: 0; transition: opacity .06s linear; pointer-events: none; }
.stage.frosted .frost { opacity: 1; }
.cv { position: relative; }

/* classroom: a bigger hand for the projector */
.teach { display: grid; grid-template-columns: minmax(320px, 1.4fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.reveal { font: 700 clamp(34px, 6vw, 64px) var(--display); min-height: 1.3em; text-align: center; letter-spacing: 2px; }
.teach.solo { grid-template-columns: minmax(280px, 720px); justify-content: center; }
.reveal.peek { color: var(--accent); }
.done { columns: 2; font-size: 15px; } .done .hid { color: var(--muted); }
.wordlist textarea { width: 100%; min-height: 150px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; font: inherit; }
.wordlist .row { margin: 6px 0; } .wordlist .msg { color: var(--muted); font-size: 14px; }
.cardview table { border-collapse: collapse; margin: 8px 0; } .cardview td { border: 1px solid var(--line); padding: 4px 6px; font-size: 13px; text-align: center; min-width: 60px; }
.cardview td.hit { background: var(--good-soft); font-weight: 800; } .cardview .verdict { font-weight: 800; }

/* Bingo cards (screen preview and print) */
.bpreview { margin-top: 12px; max-width: 420px; }
.bpreview { margin: 8px 0 16px; overflow: hidden; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.bpreview .bhalf { display: flex; transform-origin: top left; }      /* one card at the size it prints (its share of a portrait page), shrunk: words wrap exactly as they will print */
.bpreview .bcard { flex: 1; }
.bcard.ownfont h4, .bcard.ownfont th, .bcard.ownfont td { font-family: inherit; }
.bcard.aslfont td:not(.free), .sgrid.aslfont button:not(.free) { font-family: 'ASL', Arial, sans-serif; font-weight: 400; }
.bcard { border: 3px solid var(--bc, #2F6BFF); border-radius: 14px; padding: 10px; background: #fff; color: #1B1E3C; display: flex; flex-direction: column; }
.bcard h4 { margin: 0; text-align: center; font: 700 22px var(--display); color: var(--bc); }
.bcard .bsub { text-align: center; font-size: 12px; margin: 2px 0 6px; color: #444; }
.bcard table { width: 100%; border-collapse: collapse; table-layout: fixed; flex: 1; }
.bcard th { background: var(--bc); color: #fff; font: 700 22px var(--display); padding: 4px 0; }
.bcard td { border: 2px solid var(--bc); text-align: center; vertical-align: middle; font-weight: 800; padding: 4px; word-break: break-word; hyphens: auto; line-height: 1.15; }
.bcard td.free { background: color-mix(in srgb, var(--bc) 14%, white); font-family: var(--display); }
.bcard .bno { text-align: right; font-size: 11px; color: #666; margin-top: 4px; }
.alert.warn { background: #FFF4D6; color: #7a4b00; border-color: #e0a800; }
.alert { background: var(--bad-soft); color: var(--bad); border: 2px solid var(--bad); border-radius: 12px; padding: 12px 16px; font-weight: 800; font-size: 18px; margin: 12px 0; }
.printonly { display: none; }
@media print {
  body.printing > *:not(#print-cards) { display: none !important; }
  body.printing #print-cards { display: block; }
  .ppage { break-after: page; display: grid; gap: 10mm; height: 255mm; padding: 6mm; }
  .ppage.n1 { grid-template-rows: 1fr; } .ppage.n2 { grid-template-rows: 1fr 1fr; } .ppage.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .ppage .bcard { height: 100%; }
  .caller { break-before: page; columns: 3; font-size: 13px; } .caller h4 { column-span: all; font: 700 20px var(--display); }
}


/* student digital Bingo card */
.scard-wrap { max-width: 640px; margin: 0 auto; }
.sbingo { text-align: center; font: 700 44px var(--display); color: var(--bc, #2F6BFF); margin: 4px 0 10px; animation: pop .5s ease-out; } .sbingo span { display: block; font: 700 16px var(--body); color: var(--ink); }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.scno { text-align: right; font-size: 13px; color: var(--muted); margin: -6px 2px 8px; }      /* small, bottom right, like the printed cards */
.sgrid { display: grid; gap: 0; border: 3px solid var(--bc, #2F6BFF); border-radius: 12px; overflow: hidden; margin: 10px 0; touch-action: manipulation; }
.sgrid .sh { background: var(--bc, #2F6BFF); color: #fff; font: 700 clamp(18px, 6vw, 30px) var(--display); text-align: center; padding: 4px 0; }
.sgrid button { position: relative; aspect-ratio: 1; min-width: 0; font-family: inherit; border: 1.5px solid var(--bc, #2F6BFF); background: var(--surface); font-weight: 800; font-size: 17px; line-height: 1.1; padding: 3px; overflow: hidden; cursor: pointer; color: var(--ink); }
.sgrid button span { display: block; }
.sgrid button.free { background: color-mix(in srgb, var(--bc, #2F6BFF) 14%, white); font-family: var(--display); }
.sgrid button.on::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: color-mix(in srgb, var(--bc, #2F6BFF) 45%, transparent); }
.modal { position: fixed; inset: 0; background: rgba(20, 20, 40, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal-card { max-width: 560px; width: 100%; max-height: 92vh; overflow: auto; }
.qr { display: grid; place-items: center; margin: 10px 0; } .qr img, .qr canvas { width: min(320px, 80vw) !important; height: auto !important; image-rendering: pixelated; }
#share-link { font-size: 13px; flex: 1; min-width: 0; }


/* the student report: one clean page */
.rsheet { background: #fff; color: #1B1E3C; max-width: 760px; margin: 0 auto 20px; padding: 34px 40px; border-radius: var(--r); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(60, 40, 20, .06); }
.rs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 3px solid var(--accent); padding-bottom: 10px; }
.rs-kicker { font: 700 13px var(--body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.rs-name { font: 600 34px var(--display); margin: 2px 0 0; }
.rs-name.empty { color: #b9b2a6; }
.rs-date { text-align: right; color: var(--muted); font-size: 14px; white-space: nowrap; }
.rs-game { margin: 12px 0 4px; font-size: 15px; color: #333; } .rs-game b { font-family: var(--display); font-size: 19px; color: #1B1E3C; margin-left: 4px; }
/* each number in its own box, with a heading on top */
.rs-h { font: 700 14px var(--body); text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin: 16px 0 8px; }
.rs-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.rs-box { border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px 10px; background: #fff; break-inside: avoid; display: flex; flex-direction: column; }
.rs-box h3 { margin: 0 -12px 8px; padding: 6px 12px; background: #F4EFE6; border-radius: 10px 10px 0 0; font: 800 12px var(--body); text-transform: uppercase; letter-spacing: 1px; color: #4A4F6E; }
.rs-box b { font: 700 24px/1.15 var(--display); color: #1B1E3C; }
.rs-box > span { font-size: 13px; color: var(--muted); margin-top: 2px; }
.rs-box.main { border-color: #C9D7FF; } .rs-box.main h3 { background: #DCE6FF; color: #1D46B8; } .rs-box.main b { font-size: 38px; color: var(--accent); }
.rs-boxes.settings .rs-box b { font-size: 17px; }
.rs-box.wide { margin-top: 10px; }
.rs-mix { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; } .rs-mix b { font: 700 18px var(--display); }
.rs-bottom { display: grid; grid-template-columns: 1fr 170px; gap: 10px; align-items: stretch; }
.rs-bottom .rs-box.wide { margin-top: 10px; }
.rs-qrbox { margin-top: 10px; align-items: center; text-align: center; }
.rs-qrbox h3 { align-self: stretch; text-align: left; }
.rs-qr { width: 132px; height: 132px; display: grid; place-items: center; margin: 2px auto 4px; }
.rs-qr img, .rs-qr canvas { width: 132px !important; height: 132px !important; image-rendering: pixelated; }
.rs-qrfail { font-size: 12px; color: var(--muted); }
.rs-words { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 18px; font-size: 14px; }
.rs-words li { break-inside: avoid; padding: 2px 0; } .rs-words .ok::before { content: '✓ '; color: var(--good); font-weight: 800; } .rs-words .no::before { content: '✗ '; color: var(--bad); font-weight: 800; }
.rs-words .no { color: var(--bad); font-weight: 700; } .rs-words .typed { color: var(--muted); font-weight: 500; font-size: 12px; }
/* ASL Study 3.82 (Colleen): the diagnostic report inside the app: the student on top, compared with the program level below */
.rs-diag .rs-head { border-bottom-color: #1B1E3C; }
.rs-diag .rs-h { margin: 14px 0 6px; font-size: 13px; }
.rs-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 14px; }
.rs-info div { border-bottom: 1px dashed var(--line); padding: 3px 0; font-weight: 700; color: #1B1E3C; }
.rs-info small { display: block; color: #5A6185; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.rs-boxes.four { grid-template-columns: repeat(4, 1fr); }
.rs-diag .rs-box.main b { font-size: 30px; }
.rs-diag .rs-box b { font-size: 22px; }
.rs-sets { margin: 8px 0 0; font-size: 12.5px; color: #5A6185; } .rs-sets b { color: #1B1E3C; }
.rs-diag .rs-words { columns: 4; font-size: 13px; }
.rs-diag .rs-bottom { grid-template-columns: 1fr 140px; }
.rs-diag .rs-qr, .rs-diag .rs-qr img, .rs-diag .rs-qr canvas { width: 100px !important; height: 100px !important; }
.rs-half { border-top: 3px double #CFC3B2; margin-top: 18px; padding-top: 2px; }
.rs-wait { color: #5A6185; font-weight: 700; padding: 10px 0; }
.rs-note { color: #5A6185; font-size: 14px; background: #F4EFE6; border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; }
.rs-small { font-size: 13px; color: #7a4b00; background: #FFF4D6; border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; }
table.rs-cmp { width: 100%; border-collapse: collapse; font-size: 14px; color: #1B1E3C; }
table.rs-cmp th, table.rs-cmp td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.rs-cmp th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #5A6185; font-weight: 800; }
table.rs-cmp td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-bar { position: relative; height: 14px; background: linear-gradient(to right, #F6D3CF 0 20%, #FBEEC2 20% 40%, #DCE5FF 40% 75%, #D3EEDD 75% 100%); border-radius: 7px; min-width: 130px; }      /* percentile zones: Beginning, Developing, Meeting, Exceeding */
.rs-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: #C9D8FF; }
.rs-bar .me { position: absolute; top: -4px; width: 4px; height: 22px; margin-left: -2px; background: #1B1E3C; border-radius: 2px; }
.rs-pill { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; color: #fff; }
.p-above { background: #2F9E5F; } .p-on { background: #2F6BFF; } .p-near { background: #D98B00; } .p-behind { background: #C7362E; }
.rs-summary { margin-top: 14px; border: 2px solid #2F6BFF; border-radius: 12px; padding: 12px 16px; background: #F4F7FF; color: #1B1E3C; break-inside: avoid; }
.rs-summary.b-above { border-color: #2F9E5F; background: #F1FAF4; } .rs-summary.b-near { border-color: #D98B00; background: #FFF8EA; } .rs-summary.b-behind { border-color: #C7362E; background: #FDF1F0; }
.rs-summary p { margin: 6px 0; font-size: 14.5px; }
.rs-summary .rs-verdict { font: 700 20px var(--display); margin: 0 0 4px; }
.rs-scale { display: flex; gap: 6px; margin: 8px 0 2px; font-size: 12px; }
.rs-scale span { flex: 1; text-align: center; padding: 5px 4px; border-radius: 6px; color: #fff; font-weight: 700; opacity: .35; line-height: 1.25; }
.rs-scale span.on { opacity: 1; outline: 3px solid #1B1E3C; outline-offset: 1px; }
.rs-foot { font-size: 11.5px; color: #5A6185; margin: 12px 0 0; }
@media (max-width: 640px) { .rs-info, .rs-boxes.four { grid-template-columns: repeat(2, 1fr); } .rs-diag .rs-words { columns: 2; } .rs-bar { min-width: 70px; } table.rs-cmp { font-size: 13px; } table.rs-cmp th, table.rs-cmp td { padding: 5px 3px; } }
@media (max-width: 760px) { .rsheet { padding: 20px 16px; } .rs-words { columns: 2; } .rs-name { font-size: 26px; } .rs-bottom { grid-template-columns: 1fr; } }
@media print {
  body.printing-report * { visibility: hidden; }
  body.printing-report .screen.on .rsheet, body.printing-report .screen.on .rsheet * { visibility: visible; }
  body.printing-report .screen.on .rsheet { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; border: 0; box-shadow: none; padding: 0.3in 0.4in; }
  body.printing-report .rs-words { columns: 3; } body.printing-report .rs-bottom { grid-template-columns: 1fr 170px; }
  body.printing-report .rs-box h3 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-report .rs-diag * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }      /* 3.82: bars, pills and the band scale print in color */
  body.printing-report .rs-diag { zoom: .8; } body.printing-report .screen.on .rsheet:has(.rs-diag) { padding: 0.1in 0.2in; }      /* both halves on one page */
  body.printing-report .rs-diag .rs-words { columns: 5; font-size: 12px; } body.printing-report .rs-diag .rs-words li { padding: 1px 0; } body.printing-report .rs-diag .rs-bottom { grid-template-columns: 1fr 120px; }
  body.printing-report .rs-diag .rs-qr, body.printing-report .rs-diag .rs-qr img, body.printing-report .rs-diag .rs-qr canvas { width: 80px !important; height: 80px !important; }
  body.printing-report .rs-diag .rs-qrbox > span { font-size: 10px; } body.printing-report .rs-diag .rs-box b { font-size: 19px; } body.printing-report .rs-diag .rs-box.main b { font-size: 24px; }
  body.printing-report .rs-diag .rs-summary { padding: 8px 12px; } body.printing-report .rs-diag .rs-summary p { font-size: 13px; margin: 4px 0; } body.printing-report .rs-diag .rs-summary .rs-verdict { font-size: 18px; }
  body.printing-report .rs-info, body.printing-report .rs-boxes.four { grid-template-columns: repeat(4, 1fr); }
  body.printing-report .rs-diag .rs-name { font-size: 28px; } body.printing-report .rs-diag .rs-h { margin: 10px 0 5px; }
  body.printing-report .rs-diag .rs-box { padding-bottom: 6px; } body.printing-report .rs-diag .rs-box h3 { margin-bottom: 4px; padding: 4px 12px; }
  body.printing-report .rs-diag table.rs-cmp th, body.printing-report .rs-diag table.rs-cmp td { padding: 4px 6px; }
  body.printing-report .rs-summary, body.printing-report table.rs-cmp { break-inside: avoid; }
}

@media (max-width: 760px) {
  .play, .grid2, .teach { grid-template-columns: 1fr; }
  .choices button { font-size: 20px; padding: 10px 6px; }
  .play { gap: 10px; } .stage-slot { position: static; }
  .cv { width: min(100%, 42vh); margin: 0 auto; }      /* on a phone the hand and the answer box fit on one screen */
  .assist.large { height: 18vh; font-size: 16vh; }
  .top { padding: 8px 16px; } .brand { font-size: 18px; } .top nav { gap: 12px; font-size: 15px; }
  .panel { padding: 14px; } h2 { font-size: 22px; }
  .scard-wrap { padding: 12px 6px; } .sgrid button { padding: 1px; }
  .clue-box { min-height: 64px; min-width: 160px; font-size: 24px; padding: 8px 14px; }
}
@media print {
  .top, .foot, .ad, .noprint, nav { display: none !important; }
  body { background: #fff; } .card { box-shadow: none; border: 0; padding: 0; }
  .chart .cgrid { grid-template-columns: repeat(6, 1fr); gap: 6px; } .chart .t { break-inside: avoid; }
}

/* Colors, Text size and Font: the same choices (and saved settings) as the Hearing and the Ear site, so a choice made on either site is used on both */
body.dark { --bg: #1d1930; --surface: #28223f; --surface2: #362e55; --ink: #f4effa; --muted: #c3b9da; --line: #453c6b; --accent: #8aa8ff; --accent-ink: #1d1930; --good: #6fdca4; --good-soft: #1f3b30; --bad: #ff8a80; --bad-soft: #4a2430; }
body.contrast { --bg: #000; --surface: #000; --surface2: #111; --ink: #fff; --muted: #fff; --line: #fff; --accent: #ffe600; --accent-ink: #000; --good: #7CFF9B; --good-soft: #002a10; --bad: #ff8080; --bad-soft: #2a0000; }
body.contrast .card, body.contrast .gcard, body.contrast .chips button, body.contrast .seg { border: 2px solid #fff; }
body.dark .stage canvas, body.contrast .stage canvas { background: #fff; }
/* more color schemes (Colleen, 2026-10-14: "more variety to select color schemes for both letters and numbers ... that high schoolers would appreciate"); body.sch-<name>, chosen in the Colors menu */
body.sch-neon { --bg: #0D0D1A; --surface: #16162B; --surface2: #222240; --ink: #F2F2FF; --muted: #A9A9D0; --line: #34345C; --accent: #FF3EA5; --accent-ink: #0D0D1A; --good: #39FFB6; --good-soft: #0F3A2E; --bad: #FF6B6B; --bad-soft: #3D1A24; --sun: #F9F871; }
body.sch-galaxy { --bg: #14102B; --surface: #1F1940; --surface2: #2B2356; --ink: #EFE9FF; --muted: #B7A9E0; --line: #3C3170; --accent: #9D7CFF; --accent-ink: #14102B; --good: #6FE3C1; --good-soft: #193A36; --bad: #FF8FA3; --bad-soft: #3E1F33; --sun: #FFD166; }
body.sch-arcade { --bg: #0B0F0C; --surface: #121A14; --surface2: #1B271E; --ink: #E8FFE9; --muted: #9DC7A2; --line: #284232; --accent: #3DFF6E; --accent-ink: #0B0F0C; --good: #3DFF6E; --good-soft: #10331C; --bad: #FF5A5F; --bad-soft: #3A1517; --sun: #FFE14D; }
body.sch-matcha { --bg: #EEF2E6; --surface: #FBFCF7; --surface2: #DDE6CF; --ink: #24301E; --muted: #5F6E55; --line: #CCD9BB; --accent: #5E8C4A; --accent-ink: #fff; --sun: #E8C468; }
body.sch-latte { --bg: #F3EBE2; --surface: #FFFCF8; --surface2: #E6D7C6; --ink: #3B2A20; --muted: #7A6455; --line: #DCC8B3; --accent: #9C6644; --accent-ink: #fff; --sun: #E9B872; }
body.sch-sunset { --bg: #FFF0E8; --surface: #FFFFFF; --surface2: #FFDCCB; --ink: #3A1F2B; --muted: #7D5563; --line: #F6C8B7; --accent: #F2545B; --accent-ink: #fff; --sun: #FFB347; }
body.sch-ocean { --bg: #E7F4F6; --surface: #FFFFFF; --surface2: #D0EAEF; --ink: #0E2A36; --muted: #4A6B78; --line: #B9DCE4; --accent: #0FA3B1; --accent-ink: #fff; --sun: #FFD166; }
body.sch-mono { --bg: #F4F4F4; --surface: #FFFFFF; --surface2: #E6E6E6; --ink: #111111; --muted: #5C5C5C; --line: #D4D4D4; --accent: #111111; --accent-ink: #fff; --sun: #FFD400; }
body.sch-neon .stage canvas, body.sch-galaxy .stage canvas, body.sch-arcade .stage canvas { background: #fff; }      /* the hand keeps its light backdrop so skin tones read true */
      /* the hand keeps its light backdrop so skin tones read true */
body.big { zoom: 1.15; }
.look { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; color: var(--muted); }
.look select { width: auto; padding: 4px 8px; border-radius: 999px; font-size: 14px; }
@media print { .look { display: none !important; } }

/* Numbers: a label and Choose all above each group of number chips */
.nmg { margin: 12px 0 6px; display: flex; gap: 10px; align-items: baseline; }
.nmg:first-child { margin-top: 4px; }

/* Build a number: the row of blocks and the number pad */
.blocks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 52px; padding: 8px 0; }
.blocks .blk { display: inline-block; min-width: 44px; text-align: center; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); font-weight: 800; font-size: 22px; }
.blocks .blk.h { font-size: 16px; letter-spacing: .04em; }
.blocks .blk.now { border-color: var(--accent, #2f6f5e); box-shadow: 0 0 0 3px rgba(47, 111, 94, .25); }
.blocks .plus { font-weight: 800; opacity: .5; }
.bd-total { font-size: 28px; font-weight: 800; margin: 2px 0 10px; min-height: 1.2em; }
.bd-pad { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 6px 0 10px; }      /* one row, so the wider Build it box stays short */
.bd-pad .btn { padding: 10px 0; font-size: 18px; font-weight: 800; }
#bd-num { width: 130px; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }

/* Build a number: the hand, then "Type it in" next to it, then the number building blocks on the far side (Colleen) */
.play.wide { grid-template-columns: auto minmax(520px, 1fr); }      /* the hand column's width is set to the boxes' height (bdFitStage), so the square hand panel matches their height */
.play.wide .stage-slot { width: 360px; }
.bd-cols { display: grid; grid-template-columns: minmax(190px, 0.7fr) minmax(300px, 1.45fr); gap: 18px; align-items: stretch; }      /* the two boxes the same height; Build it wider (Colleen) */
.bd-clearall { display: block; width: 100%; margin-top: 16px; padding: 16px; font-size: 20px; font-weight: 800; }
.bd-cols h3 { margin: 0 0 8px; }
.bd-type, .bd-blockpanel { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.bd-big { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 40px; font-weight: 800; line-height: 1.1; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); letter-spacing: .03em; }
.bd-type .btn.big { width: 100%; margin: 6px 0 10px; }
@media (max-width: 1000px) { .play.wide { grid-template-columns: 1fr; } .play.wide .stage-slot { width: auto; } }
@media (max-width: 640px) { .bd-cols { grid-template-columns: 1fr; } }
.bd-type .speed .marks span { font-size: 10px; }      /* the narrow Type it in box: the speed names fit without overlapping */
.bd-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex-wrap: nowrap; }
.bd-big3 .btn { padding: 10px 4px; font-size: 14px; white-space: nowrap; min-width: 0; }      /* HUNDRED, THOUSAND and MILLION on one line (Colleen) */
/* blocks a little smaller on the Build page, so most numbers fit on one or two rows and the boxes stay as tall as the hand */
.bd-blockpanel .blocks .blk { padding: 6px 10px; font-size: 18px; min-width: 34px; border-radius: 10px; }
.bd-blockpanel .blocks .blk.h { font-size: 13px; }
.bd-blockpanel .blocks { gap: 4px; min-height: 40px; padding: 4px 0; }
.bd-blockpanel .bd-total { font-size: 24px; margin: 0 0 6px; }
/* the typed number lines up with the row of blocks (Colleen) */
.bd-blockpanel .blocks { min-height: 66px; align-content: center; }
.bd-type .bd-big { height: 66px; padding-top: 0; padding-bottom: 0; }

/* inside ASL Study: the app has its own Back button, so the site header links that leave are hidden */
html.embedded header nav a[href="../"] { display: none; }
.alert.good { background: #e7f6ec; color: #17633a; border-color: #2f9e5f; }
#rp-sent:not(.good) { background: var(--surface); color: var(--ink); border-color: var(--line); }
#rp-sent.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
#rp-kind a.on { font-weight: 800; text-decoration: none; background: var(--ink); color: var(--bg); padding: 2px 10px; border-radius: 999px; }

/* the approved sample look for every report (Colleen, 2026-10-14: "make them look like the samples"; dev/fs-report-sample.html): plain system text, a gray kicker, a 2px dark rule, small gray headings, simple boxes */
.rsheet, .rsheet * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; }
.rsheet { color: #1f2340 !important; background: #fff !important; border: 1px solid #e3d9cc !important; border-radius: 14px !important; box-shadow: 0 2px 12px rgba(60, 40, 20, .08) !important; }
.rsheet .rs-head { border-bottom: 2px solid #1f2340 !important; padding-bottom: 10px !important; }
.rsheet .rs-kicker { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #5a6185 !important; }
.rsheet .rs-name { font-size: 30px !important; font-weight: 700 !important; line-height: 1.15 !important; color: #1f2340 !important; letter-spacing: 0 !important; }
.rsheet .rs-date { color: #5a6185 !important; font-size: 14px !important; }
.rsheet .rs-h, .rsheet h4, .rsheet .rpart { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #5a6185 !important; border: 0 !important; padding: 0 !important; margin: 18px 0 8px !important; }
.rsheet .rpart { font-size: 16px !important; color: #1f2340 !important; padding-top: 12px !important; border-top: 3px double #e3d9cc !important; }
.rsheet .rs-info small { color: #5a6185 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; }
.rsheet .rs-info div { font-weight: 500 !important; font-size: 14px !important; border-bottom: 1px dashed #e3d9cc !important; }
.rsheet .rs-box { border: 1px solid #e3d9cc !important; border-radius: 10px !important; padding: 10px 12px !important; background: #fff !important; }
.rsheet .rs-box h3, .rsheet .rs-box h5 { margin: 0 0 2px !important; padding: 0 !important; background: none !important; border-radius: 0 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #5a6185 !important; }
.rsheet .rs-box b { font-size: 24px !important; font-weight: 700 !important; line-height: 1.15 !important; color: #1f2340 !important; }
.rsheet .rs-box > span, .rsheet .rs-box span { font-size: 12px !important; color: #5a6185 !important; }
.rsheet .rs-box.main { background: #eef3ff !important; border-color: #c9d8ff !important; }
.rsheet .rs-box.main b { font-size: 24px !important; color: #1f2340 !important; }
.rsheet .rs-box.wide b, .rsheet .rs-words b, .rsheet .rs-mix b { font-size: inherit !important; }
.rsheet table.rs-cmp th { font-size: 11px !important; color: #5a6185 !important; }
.rsheet .rs-summary .rs-verdict { font-size: 20px !important; font-weight: 800 !important; }
.rsheet .rs-half { border-top: 3px double #e3d9cc !important; }
.rsheet .rs-foot, .rsheet .rs-sets { color: #5a6185 !important; }

.top nav a.tptlink { background: #FFC83D; color: #1B1E3C !important; border-radius: 999px; padding: 7px 16px; font-weight: 800; font-size: 16px; box-shadow: 0 2px 6px rgba(60,40,20,.15); }      /* Colleen's shop (aslstudyhall.com, Shopify), on every page of the public site */
html.embedded .top nav a.tptlink { display: none; }

/* band colors (Colleen, 2026-10-14): Beginning red, Developing yellow, Meeting blue, Exceeding green; dark text on yellow */
.rsheet .p-behind, .rsheet .rs-scale span.p-behind { background: #C7362E !important; color: #fff !important; }
.rsheet .p-near, .rsheet .rs-scale span.p-near { background: #F2C230 !important; color: #1f2340 !important; }
.rsheet .p-on, .rsheet .rs-scale span.p-on { background: #2F6BFF !important; color: #fff !important; }
.rsheet .p-above, .rsheet .rs-scale span.p-above { background: #2F9E5F !important; color: #fff !important; }
.rsheet .rs-summary { border-color: #2F6BFF !important; background: #F4F7FF !important; }
.rsheet .rs-summary.b-above { border-color: #2F9E5F !important; background: #F1FAF4 !important; }
.rsheet .rs-summary.b-near { border-color: #F2C230 !important; background: #FFF9E0 !important; }
.rsheet .rs-summary.b-behind { border-color: #C7362E !important; background: #FDF1F0 !important; }
.rsheet .rs-scale span { opacity: 1 !important; }      /* the other bands: pale with colored text, easy to read (was faded white text) */
.rsheet .rs-scale span.p-behind:not(.on) { background: #FDF1F0 !important; color: #C7362E !important; box-shadow: inset 0 0 0 2px #EBB9B6; }
.rsheet .rs-scale span.p-near:not(.on) { background: #FFF9E0 !important; color: #8A6A00 !important; box-shadow: inset 0 0 0 2px #EED68A; }
.rsheet .rs-scale span.p-on:not(.on) { background: #F4F7FF !important; color: #2F6BFF !important; box-shadow: inset 0 0 0 2px #B6CBFF; }
.rsheet .rs-scale span.p-above:not(.on) { background: #F1FAF4 !important; color: #1E7B45 !important; box-shadow: inset 0 0 0 2px #B6DDC7; }
.top nav a.tptlink.shoplink { background: #05274C; color: #fff !important; }      /* Shopify (navy) next to TpT (yellow) */
.top nav a.tptlink, .shopcard { display: none !important; }      /* SHOP-HIDE (Colleen, 2026-10-14): shop links hidden until her school approves the domain; on asl.cool the Worker removes this line when admin > Show the shop to everyone is on */
#r-teach { margin-top: 16px; border: 2px solid var(--sun); }      /* the teacher card after a round (Colleen) */
#r-teach h2 { margin-top: 0; }
.teach-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.teach-products:empty { display: none; }
.teach-product { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); background: var(--surface2); border-radius: 12px; padding: 8px; font-size: 14px; }
.teach-product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #fff; }
.teach-product span { color: var(--muted); }
.btn.teach-tpt { background: #FFC83D; color: #1B1E3C; }

/* Sign the number (Colleen): the number in big print; the hand stays covered until Check me */
.sg-num { font: 700 clamp(56px, 12vw, 110px)/1.1 Fredoka, system-ui, sans-serif; text-align: center; margin: 10px 0 14px; letter-spacing: .02em; }
.sg-cover { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--surface, #fff); border-radius: 18px; border: 2px dashed var(--line, #ddd); text-align: center; padding: 16px; }
.sg-cover[hidden] { display: none; }
.sg-cover p { font-weight: 800; font-size: 20px; margin: 0; }
#signnum-slot { min-height: 240px; position: relative; }

/* Build a number: speed and the signing choices are for both panels (Colleen), centered under them */
.bd-shared { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px 28px; margin: 16px 0 6px; padding: 14px; border-radius: 16px; background: var(--surface2, rgba(0,0,0,.03)); }
.bd-shared .field { margin: 0; }
.bd-shared .bd-speedf { flex: 1 1 260px; max-width: 360px; }
.blocks-why { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--surface2, rgba(0,0,0,.04)); border: 1px solid var(--line, #e3d9cc); font-size: 15px; line-height: 1.45; }

/* the speed slider by the question (Colleen) */
.p-speedf { margin: 6px 0 10px; }
.p-speedf[hidden] { display: none; }
/* a deeper shade of the accent for the chosen option where the accent is pale (white words stay readable) */
body.sch-ocean { --pick: #0A7A86; } body.sch-sunset { --pick: #C9363E; } body.sch-matcha { --pick: #456E35; }

/* Timeline (Colleen): proportional ticks; an event spot above each tick, a year (signing hand) spot below */
.tl-board { position: relative; height: 330px; margin: 10px 0 6px; }
.tl-row { position: absolute; left: 0; right: 0; height: 128px; }
.tl-top { top: 0; } .tl-bottom { bottom: 0; }
.tl-axis { position: absolute; left: 0; right: 0; top: 163px; height: 4px; border-radius: 2px; background: var(--ink); }
.tl-axis .tick { position: absolute; top: -9px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.tl-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tl-links line { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 3; }
.tl-slot { position: absolute; width: var(--slot, 118px); height: var(--slot, 118px); margin-left: calc(var(--slot, 118px) / -2); border: 2px dashed var(--line); border-radius: 14px; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.tl-top .tl-slot { top: 0; } .tl-bottom .tl-slot { bottom: 0; }
.tl-slot.hot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.tl-slot.ok { border: 3px solid var(--good, #2F9E5F); } .tl-slot.no { border: 3px solid var(--bad, #C7362E); }
.tl-tray { display: flex; flex-wrap: wrap; gap: 10px; min-height: 124px; padding: 8px; border-radius: 14px; background: var(--surface2); }
.tl-item { width: 110px; height: 110px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); cursor: grab; touch-action: none; user-select: none; position: relative; overflow: hidden; }
.tl-item.sel { outline: 3px solid var(--accent); }
.tl-item.dragging { position: fixed; z-index: 50; pointer-events: none; cursor: grabbing; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.tl-hand canvas { width: 100%; height: 100%; display: block; }
.tl-hand .tl-play { position: absolute; left: 6px; bottom: 4px; font-size: 13px; font-weight: 800; color: var(--muted); pointer-events: none; }
.tl-hand .tl-year { position: absolute; right: 6px; top: 4px; font: 700 15px var(--display); background: var(--surface); border-radius: 6px; padding: 0 4px; pointer-events: none; }
.tl-ev { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; font-size: 12.5px; line-height: 1.2; font-weight: 700; }
.tl-ev .ic { font-size: 34px; line-height: 1; margin-bottom: 4px; }
.tl-ev img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.tl-slot .tl-item { width: calc(var(--slot, 118px) - 8px); height: calc(var(--slot, 118px) - 8px); }
.tl-slot .tl-ev { font-size: 11px; } .tl-slot .tl-ev .ic { font-size: 26px; }
.tl-lab { margin: 10px 0 4px; }
@media (max-width: 640px) { .tl-item { width: 78px; height: 78px; } .tl-row { height: 92px; } .tl-board { height: 250px; } .tl-axis { top: 123px; } .tl-ev { font-size: 10px; } .tl-ev .ic { font-size: 24px; } }
/* on a phone held upright, a note to turn it sideways (Colleen) */
.tl-turn { display: none; margin: 4px 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface2); font-weight: 800; }
@media (orientation: portrait) and (max-width: 640px) { .tl-turn { display: block; } }

/* Ages (Colleen): a quiet lower face (lips, chin, neck) behind the hand; its skin follows the hand's tone */
.cv { position: relative; }
.ageface { display: none; position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.ageface svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .95; }
.stage.agemode .ageface { display: block; }
.stage.agemode canvas { background: transparent; position: relative; z-index: 1; filter: drop-shadow(0 0 2px rgba(255, 252, 248, .9)) drop-shadow(0 4px 9px rgba(40, 18, 8, .5)); }      /* the hand stands out from the neck in every skin tone (Colleen) */

/* How old is Charlie? (Colleen): her picture beside four small hands, each with the face behind it */
.ap-wrap { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 16px; align-items: start; margin: 8px 0 12px; }
.ap-pic svg { width: 100%; height: auto; display: block; border-radius: 18px; }
.ap-pic img { width: 100%; height: min(62vh, 520px); object-fit: contain; display: block; border-radius: 18px; background: var(--surface); }      /* Colleen's pictures are tall: whole picture shown */
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-choice { position: relative; border: 3px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--surface); }
.ap-choice:hover { border-color: var(--accent); }
.ap-choice .ap-face { position: absolute; inset: 0; }
.ap-choice .ap-face svg { width: 100%; height: 100%; display: block; opacity: .95; }
.ap-choice canvas { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 1; display: block; background: transparent; filter: drop-shadow(0 0 2px rgba(255, 252, 248, .9)) drop-shadow(0 3px 7px rgba(40, 18, 8, .5)); }
.ap-choice .ap-tap { position: absolute; z-index: 2; left: 8px; bottom: 6px; font-size: 13px; font-weight: 800; color: var(--muted); background: var(--surface); border-radius: 8px; padding: 1px 7px; pointer-events: none; }
.ey-event img { width: 100%; height: auto; display: block; border-radius: 18px; }
.ey-ph { aspect-ratio: 300 / 320; border: 3px dashed var(--line); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center; background: var(--surface); }
.ey-ph .ic { font-size: 64px; line-height: 1; } .ey-ph b { font: 700 22px var(--display); } .ey-ph small { color: var(--muted); }
.ey-choice canvas { filter: none; }
.ey-why { font-size: 14px; color: var(--muted); text-align: center; }
.ap-cell { display: flex; flex-direction: column; gap: 8px; } .ap-pickbtn { width: 100%; font-size: 18px; }
.ap-pickbtn.ok, .ap-pickbtn.no { opacity: 1 !important; } .ap-pickbtn.ok { background: var(--good, #2F9E5F); color: #fff; border-color: transparent; } .ap-pickbtn.no { background: var(--bad, #C7362E); color: #fff; border-color: transparent; }
.ap-choice .ap-tag { position: absolute; z-index: 2; left: 8px; top: 6px; font: 700 18px var(--display); background: var(--surface); border-radius: 8px; padding: 0 7px; }
.ap-choice .ap-age { position: absolute; z-index: 2; right: 8px; bottom: 6px; font: 700 20px var(--display); background: var(--surface); border-radius: 8px; padding: 0 8px; }
.ap-choice.ok { border-color: var(--good, #2F9E5F); } .ap-choice.no { border-color: var(--bad, #C7362E); }
@media (max-width: 640px) { .ap-wrap { grid-template-columns: 1fr; } .ap-pic { max-width: 220px; margin: 0 auto; } }

/* Math in ASL (Colleen): shortcut buttons for the operations under the answer box */
.mt-inrow { gap: 8px; } .mt-inrow input { flex: 1; font-size: 24px; min-width: 0; }
.mt-keys { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.mt-keys button { min-width: 60px; font: 700 34px/1 Arial, Helvetica, sans-serif; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.mt-keys button:hover { border-color: var(--accent); }
.mt-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.mt-picks .btn { font-size: 22px; }
.mt-picks .btn.ok, #mt-in.ok { background: var(--good, #2F9E5F); color: #fff; border-color: transparent; } .mt-picks .btn.no, #mt-in.no { background: var(--bad, #C7362E); color: #fff; border-color: transparent; }
.mt-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0; align-items: stretch; }
.mt-tile { position: relative; aspect-ratio: 1; border: 3px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.mt-tile.hand { cursor: pointer; } .mt-tile.hand:hover, .mt-tile.on { border-color: var(--accent); }
.mt-tile canvas { width: 100%; height: 100%; display: block; }
.mt-tile .ap-tap { position: absolute; left: 6px; bottom: 4px; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--surface); border-radius: 8px; padding: 1px 6px; pointer-events: none; }
.mt-tile.blank, .mt-tile.box { display: flex; align-items: center; justify-content: center; font: 700 clamp(34px, 8vw, 72px)/1 Arial, Helvetica, sans-serif; color: var(--ink); }
.mt-tile.blank { border-style: dashed; cursor: pointer; } .mt-tile.blank.sel { border-color: var(--accent); border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.mt-tile.box input { width: 80%; font: 700 clamp(22px, 5vw, 44px) var(--display); text-align: center; border: 0; border-bottom: 3px solid var(--line); background: transparent; color: var(--ink); }
.mt-tile.ok { border-color: var(--good, #2F9E5F); } .mt-tile.no { border-color: var(--bad, #C7362E); }
.mt-settings { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 640px) { .mt-row { gap: 5px; } .mt-tile { border-width: 2px; border-radius: 10px; } }
.mt-tile.blank.sel.ok, .mt-tile.blank.ok { border-color: var(--good, #2F9E5F); border-style: solid; box-shadow: none; } .mt-tile.blank.no { border-color: var(--bad, #C7362E); border-style: solid; box-shadow: none; }
.mt-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mt-drop { height: 56px; border: 3px dashed var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 34px/1 Arial, Helvetica, sans-serif; color: var(--ink); background: var(--surface); }
.mt-drop.op { cursor: pointer; } .mt-drop.hot { border-color: var(--accent); border-style: solid; }
.mt-drop input { width: 90%; height: 100%; font: 700 28px/1 Arial, Helvetica, sans-serif; text-align: center; border: 0; background: transparent; color: var(--ink); }
.mt-drop.ok { border-color: var(--good, #2F9E5F); border-style: solid; } .mt-drop.no { border-color: var(--bad, #C7362E); border-style: solid; }
.mt-bank { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.mt-bank .chip-op { width: 64px; height: 64px; border-radius: 12px; border: 3px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; font: 700 36px/1 Arial, Helvetica, sans-serif; color: var(--ink); cursor: grab; touch-action: none; user-select: none; }
.mt-bank .chip-op.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.mt-ghost { position: fixed; z-index: 999; pointer-events: none; width: 64px; height: 64px; border-radius: 12px; border: 3px solid var(--accent); background: var(--surface); display: flex; align-items: center; justify-content: center; font: 700 36px/1 Arial, Helvetica, sans-serif; color: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
@media (max-width: 640px) { .mt-tile .ap-tap { display: none; } .mt-tile.hand::after { content: '▶'; position: absolute; right: 4px; bottom: 2px; font-size: 11px; color: var(--muted); } }      /* phones: the tap label would cover the small hands */
.tl-item .tl-yr { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); background: var(--ink); color: var(--surface); font: 800 15px/1 Arial, Helvetica, sans-serif; padding: 3px 7px; border-radius: 8px; pointer-events: none; }      /* the year on an event (Event years: Shown) */
/* Timeline colors from the theme (Colleen: one color for the pictures and their boxes, another for the signs and theirs) */
.tl-card { --tl-ev: var(--accent); --tl-sign: color-mix(in srgb, var(--sun, #FFC83D) 72%, var(--ink)); }
.tl-card .tl-ev { border: 4px solid var(--tl-ev); }
.tl-card .tl-hand { border: 4px solid var(--tl-sign); }
.tl-card .tl-top .tl-slot { border: 3px dashed var(--tl-ev); background: color-mix(in srgb, var(--tl-ev) 8%, var(--surface)); }
.tl-card .tl-bottom .tl-slot { border: 3px dashed var(--tl-sign); background: color-mix(in srgb, var(--tl-sign) 10%, var(--surface)); }
.tl-card #tl-events { background: color-mix(in srgb, var(--tl-ev) 12%, var(--surface2)); }
.tl-card #tl-hands { background: color-mix(in srgb, var(--tl-sign) 14%, var(--surface2)); }
.tl-card .tl-lab:nth-of-type(1) { color: var(--tl-ev); } .tl-card .tl-lab:nth-of-type(2) { color: var(--tl-sign); }
.tl-card .tl-slot.hot { border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent); }
.tl-card .tl-slot.ok { border: 3px solid var(--good, #2F9E5F); } .tl-card .tl-slot.no { border: 3px solid var(--bad, #C7362E); }
/* Learn Numbers (Colleen) */
.learngrid .gcard .ln-num { position: absolute; left: 12px; top: 8px; font: 800 13px var(--display); color: var(--accent); } .learngrid .gcard .ln-num::before { content: "Lesson "; }
.learngrid .gcard { position: relative; padding-top: 30px; }
.learngrid .gcard.done::after { content: '✓'; position: absolute; right: 10px; top: 6px; font: 800 18px var(--display); color: var(--good); }
.learn-step { margin: 0; font: 800 13px var(--display); color: var(--accent); letter-spacing: .03em; text-transform: uppercase; }
.ln-part { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.ln-part h3 { margin: 0 0 4px; font-size: 17px; } .ln-part p { margin: 0 0 8px; }
.ln-ex { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ln-ex button { font: 700 17px var(--display); padding: 6px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.ln-ex button:hover { border-color: var(--accent); } .ln-ex button.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.ln-ex button small { display: block; font: 600 11px var(--body, inherit); color: inherit; opacity: .8; }
.ln-try { margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--surface2); }
.ln-try h3 { margin: 0 0 4px; }
.ln-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.ln-choices .btn { font-size: 20px; } .ln-choices .btn.ok { background: var(--good); color: #fff; border-color: transparent; } .ln-choices .btn.no { background: var(--bad); color: #fff; border-color: transparent; }
.ln-nav { margin-top: 12px; }
.learngrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }      /* smaller lesson boxes (Colleen) */
.learngrid .gcard { padding: 26px 12px 10px; min-height: 0; } .learngrid .gcard .gi { font-size: 24px; } .learngrid .gcard b { font-size: 16px; } .learngrid .gcard span:not(.gi):not(.ln-num) { font-size: 12.5px; line-height: 1.3; }
.learnbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.learnbar .ln-focus { font: 800 18px var(--display); margin-right: 4px; }
.learnbar .ln-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 700 15px var(--display); text-decoration: none; }
.learnbar .ln-btn:hover { border-color: var(--accent); }
.learnbar .ln-btn.done { border-color: var(--good); } .learnbar .ln-btn.done::after { content: '✓'; color: var(--good); font-weight: 800; margin-left: 2px; }
.mt-keys .mt-clear { font: 700 16px var(--display); min-width: 70px; color: var(--muted); }
#mt-clear2 { display: none; } body:has(#mt-keys[hidden]) #mt-clear2 { display: inline-flex; }      /* Clear sits with the sign buttons; in Solve it and Read and build (no sign buttons) it sits by Check */
/* Timeline: tall picture boxes to fit Colleen's pictures (3 wide : 4 tall), and results that are easy to see (Colleen) */
.tl-card .tl-board { --tall: calc(var(--slot, 118px) * 1.34); height: calc(var(--tall) + var(--slot, 118px) + 76px); }
.tl-card .tl-top { height: calc(var(--tall) + 4px); } .tl-card .tl-bottom { height: calc(var(--slot, 118px) + 4px); }
.tl-card .tl-axis { top: calc(var(--tall) + 36px); }
.tl-card .tl-top .tl-slot { height: var(--tall); }
.tl-card .tl-top .tl-slot .tl-item { height: calc(var(--tall) - 8px); }
.tl-card #tl-events .tl-ev { height: 147px; }
.tl-card .tl-ev img { object-fit: contain; background: var(--surface); }
.tl-card .tl-slot.ok, .tl-card .tl-slot.no { border-width: 5px; border-style: solid; }
.tl-card .tl-slot.ok { border-color: var(--good); background: var(--good-soft, #DCF4E7); } .tl-card .tl-slot.no { border-color: var(--bad); background: var(--bad-soft, #FBE3E1); }
.tl-card .tl-slot.ok .tl-item { border-color: var(--good); } .tl-card .tl-slot.no .tl-item { border-color: var(--bad); }
.tl-card .tl-slot.ok::after, .tl-card .tl-slot.no::after { position: absolute; z-index: 3; right: -10px; top: -10px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 900 19px/1 Arial, Helvetica, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tl-card .tl-slot.ok::after { content: '✓'; background: var(--good); } .tl-card .tl-slot.no::after { content: '✗'; background: var(--bad); }
#tl-msg.res { font: 800 18px var(--display); padding: 12px 16px; border-radius: 12px; color: var(--ink); }
#tl-msg.res.allok { background: var(--good-soft, #DCF4E7); border: 3px solid var(--good); } #tl-msg.res.some { background: var(--bad-soft, #FBE3E1); border: 3px solid var(--bad); }
@media (max-width: 640px) { .tl-card #tl-events .tl-ev { height: 104px; } }
.learnbar .ln-focus { flex-basis: 100%; }
.learnbar .ln-btn { border-radius: 10px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 35%, transparent); }
.learnbar .ln-btn:hover { background: var(--accent); color: var(--accent-ink); }
.learnbar .ln-btn .ln-go { font-weight: 900; color: var(--accent); } .learnbar .ln-btn:hover .ln-go { color: inherit; }
.tl-links line.pair-ok { stroke: var(--good); stroke-width: 5; stroke-dasharray: none; }
.tl-links line.pair-no { stroke: var(--bad); stroke-width: 3; }
.tl-links .tl-x circle { fill: var(--bad); stroke: #fff; stroke-width: 2.5; } .tl-links .tl-x path { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
/* ACTIVITY PAGE (Colleen, 2026-10-15: start from "Look C"): picture cards, a color per section, and spacing rules: all of a section's cards on one
   line when they fit; if not, two (or more) even rows, centered, every card the same width (app.js layoutGrids sets --per). */
.sec-fs { --c: #0FA3B1; } .sec-show { --c: #7B61FF; } .sec-num { --c: #2F6BFF; } .sec-age { --c: #E8743B; } .sec-year { --c: #14804D; } .sec-tools { --c: #9C6644; }
h2.sechead { display: table; border-bottom: 4px solid var(--c); padding-bottom: 2px; margin-top: 8px; }
.gamegrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; --per: 4; margin-left: auto; margin-right: auto; }
.gamegrid .gcard { flex: 0 0 calc((100% - (var(--per) - 1) * 14px) / var(--per)); max-width: 250px; min-width: 0; padding: 0 0 12px; gap: 2px; overflow: hidden; position: relative; border: 0; box-shadow: 0 3px 12px rgba(27, 30, 60, .09); }
.gamegrid .gcard:hover { box-shadow: 0 0 0 3px var(--c, var(--accent)), 0 6px 16px rgba(27, 30, 60, .12); }
.gamegrid .gcard .gi { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; margin-bottom: 8px; font-size: 46px; background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--accent)) 34%, var(--surface)), color-mix(in srgb, var(--c, var(--accent)) 9%, var(--surface))); }
.gamegrid .gcard .gi img { width: 100%; height: 100%; object-fit: cover; }      /* Colleen's own pictures drop in here later */
.gamegrid .gcard b { padding: 0 12px; font-size: 17px; line-height: 1.2; }
.gamegrid .gcard > span:last-child { padding: 0 12px; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gamegrid .gcard .tag { position: absolute; left: 8px; top: 8px; z-index: 1; }
body.contrast .gamegrid .gcard { border: 2px solid #fff; }
/* inset pictures (Colleen: "I prefer these inset images over the ones that go to the edge") */
.gamegrid .gcard { padding: 12px 12px 14px; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(27, 30, 60, .06); }
.gamegrid .gcard .gi { border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.gamegrid .gcard b, .gamegrid .gcard > span:last-child { padding: 0 4px; }
.ln-part.star { border: 3px solid var(--sun, #FFC83D); border-radius: 14px; padding: 10px 12px; margin: 8px 0; background: color-mix(in srgb, var(--sun, #FFC83D) 14%, var(--surface)); }      /* a highlighted part, like ZZ (Colleen: draw attention to it) */
[data-yearonly="1"] .not-year { display: none !important; }      /* years have no 16–19, 23 & 25 or HUNDRED choices (Colleen) */
.sec-expr { --c: #D6457A; }
.modehead { margin: 26px 0 6px; padding: 12px 16px; border-radius: 16px; background: var(--surface2); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }      /* Receptive / Expressive (Colleen) */
.modehead h2 { margin: 0; font-size: 28px; } .modehead p { margin: 0; color: var(--muted); }
.meaning .def { font-size: 17px; } .meaning .def span { margin-right: 4px; }      /* the word's description after an answer (Colleen) */
body.nocam [data-cam] { display: none !important; }      /* TpT editions without the Expressive part */
body.nocamnum [data-camnum] { display: none !important; }      /* TpT sheets without the expressive numbers part */
/* games page panels (Colleen, 2026-10-17): Receptive on the left, Expressive on the right; stacked on a phone; one panel fills the row when the other is hidden (no camera) */
.panels { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.panels .pcol { flex: 1 1 340px; min-width: 0; padding: 4px 12px 8px; border-radius: 18px; background: color-mix(in srgb, var(--surface2) 45%, transparent); }
.panels .pcol .modehead { margin-top: 10px; }
/* the home pages' teacher box (Colleen, 2026-10-17): hidden with the other shop links until admin > Show the shop to everyone */
.home-teach { margin: 22px auto 0; max-width: 640px; padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, var(--sun, #FFC83D) 20%, var(--surface)); text-align: left; }
.home-teach h2 { margin: 0 0 6px; font-size: 22px; text-align: center; } .home-teach p { margin: 0 0 10px; }
/* the tip link (Colleen's Ko-fi, 2026-10-17): home pages and results only; never inside ASL Study, the paid copies, or on a class-password device */
.tiplink { margin: 16px auto 0; text-align: center; font-size: 15px; color: var(--muted); } .tiplink a { color: var(--accent); font-weight: 800; }
html.noshop .tiplink, html.embedded .tiplink { display: none !important; }
.ad .adlabel { margin: 0 0 4px; font-size: 12px; color: var(--muted); text-align: center; }      /* ads are labeled */

/* Return to Sender (2026-10-17): a street of mailboxes (Colleen's background can replace .mail-street later) */
.mail-head { font: 700 18px var(--display); margin: 4px 0; } .mail-top { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .mail-slot { flex: 1 1 320px; display: flex; justify-content: center; } .mail-slot > .stage { width: min(100%, 42vh, 340px); }      /* the hand stays small enough that the mailboxes show */
.mail-side { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 200px; } .mail-item { font-size: 64px; text-align: center; line-height: 1; } #mail-express.on { background: var(--sun, #FFC83D); color: #1B1E2E; }
.mail-msg { min-height: 44px; font-size: 17px; } .mail-msg .btn { margin-left: 8px; }
.mail-street { border-radius: 18px; padding: 18px 12px 10px; background: linear-gradient(#bfe3ff 0 55%, #8fce6b 55% 78%, #9aa0a6 78%); }
.mail-boxes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mbox { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 120px; height: 150px; border: 0; background: none; cursor: pointer; padding: 0; }
.mbox b { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 104px; padding: 22px 4px 14px; border-radius: 52px 52px 10px 10px; background: #2F6BFF; color: #fff; font: 700 17px var(--display); letter-spacing: .04em; box-shadow: 0 4px 0 rgba(0,0,0,.2); overflow-wrap: anywhere; }
.mbox .post { width: 12px; height: 54px; background: #6b4f33; border-radius: 4px; } .mbox .flag { position: absolute; top: 30px; right: 4px; width: 8px; height: 30px; background: #E5484D; border-radius: 2px; z-index: 1; }
.mbox:hover b { transform: translateX(-50%) translateY(-3px); } .mbox.ok b { background: #1F9D55; } .mbox.no b { background: #E5484D; }

/* Lucky Claw questions (2026-10-17) */
.cq-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .cq-side { display: flex; flex-direction: column; gap: 10px; flex: 1 1 220px; }
.cq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cq-opt { font: 700 20px var(--display); padding: 12px 8px; } .cq-opt.ok { background: #1F9D55; color: #fff; } .cq-opt.no { background: #E5484D; color: #fff; }
/* Show Me Days of the Week / Seasons (Colleen, 2026-10-18) */
.stbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.stbtns .btn.on { outline: 3px solid var(--accent, #2b6cb0); outline-offset: 1px; }
.stword { font-size: 2rem; font-weight: 800; min-height: 2.6rem; margin: 6px 0; text-align: center; }
/* the signer page (Case Closed clues in ASL Study): only the hand */
body.signer-only .top, body.signer-only .foot, body.signer-only .ad { display: none !important; }
body.signer-only { margin: 0; background: transparent; }
body.signer-only .signer-slot { width: 100%; max-width: 100vh; margin: 0 auto; }
body.signer-only .signer-slot .stage { width: 100%; margin: 0; }
/* Clock Reading (Colleen, 2026-10-18) */
.ck-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .ck-top { grid-template-columns: 1fr; } }
.ck-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ck-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ck-grid[hidden] { display: none; } .ck-tile canvas { background: #fff; }
.ck-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-opt { border: 3px solid var(--line); border-radius: 14px; background: var(--surface); padding: 10px; cursor: pointer; }
.ck-opt:hover { border-color: var(--accent); } .ck-opt.ok { border-color: var(--good, #2F9E5F); } .ck-opt.no { border-color: var(--bad, #C7362E); } .ck-opt.x { opacity: .55; }
.ck-lcd { display: inline-flex; align-items: baseline; gap: 6px; background: #1c2321; color: #7CFFB2; border-radius: 10px; padding: 6px 14px; font: 700 2rem ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; box-shadow: inset 0 0 0 3px #39463f; }
.ck-lcd small { font-size: .9rem; } .ck-lcd.big { font-size: 3.2rem; padding: 10px 22px; }
.ck-analog, .ck-set { position: relative; width: 100%; max-width: 280px; margin: 0 auto; color: var(--ink); }
.ck-face { width: 100%; height: auto; display: block; touch-action: none; } .ck-rim { fill: var(--surface); stroke: currentColor; stroke-width: 4; }
.ck-face .ck-hh line, .ck-face .ck-hh circle { stroke: currentColor; fill: currentColor; } .ck-face .ck-mh line { stroke: var(--accent); } .ck-face .ck-mh circle { fill: var(--accent); }
.ck-set .ck-face { cursor: grab; } .ck-readout { text-align: center; font: 800 1.4rem var(--display); margin: 4px 0 0; }
.ck-ap { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); font: 800 1rem var(--display); background: var(--surface); border-radius: 6px; padding: 0 6px; }
.ck-ans { margin-top: 8px; max-width: 140px; margin-left: auto; margin-right: auto; text-align: center; } .ck-ans small { display: block; color: var(--muted); }
.ck-show { display: flex; justify-content: center; } .ck-show .ck-analog { max-width: 240px; } .ck-apseg { justify-content: center; }
body.signer-only .cv { width: min(100vw, 100vh) !important; margin: 0 auto; }      /* the frame is small like a phone, but the hand should fill it */
body.signer-only main, body.signer-only .screen.on { padding: 0 !important; margin: 0 !important; }
body.signer-only .assist { display: none; }
/* 4.69 (Colleen): the four families of activities, her palette (Show Me, Watch, Sign It, Class; accent #F72585), with her pictures and a corner badge */
.gamegrid .gcard.fam-show { --c: #00F5D4; } .gamegrid .gcard.fam-watch { --c: #00A8E8; } .gamegrid .gcard.fam-sign { --c: #F9D405; } .gamegrid .gcard.fam-class { --c: #773EA9; }
.gamegrid .gcard .gi.pic { position: relative; background: radial-gradient(circle at 50% 48%, #fff 0 28%, color-mix(in srgb, var(--c) 22%, #fff) 75%); box-shadow: inset 0 -6px 0 var(--c); }      /* contrast (Colleen): a pale wash and a white glow behind the picture; the family color is the stripe and the badge ring */
.gamegrid .gcard .gi.pic img { width: auto; height: 92%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.gamegrid .gcard .gi .gbadge { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 15px; line-height: 1; box-shadow: 0 0 0 2px var(--c), 0 2px 6px rgba(0, 0, 0, .2); }
.gamegrid .gcard .tag { background: #F72585; color: #fff; }