/* Teach (js/teach-room.js): a card at a time, on the choir's tokens. */
body[data-room="teach"] main, body[data-room="teach"] #book, body[data-room="teach"] #inspector { display: none; }
body[data-room="teach"] header > :not(.brand):not(a.home):not(#rooms) { display: none !important; }
body[data-room="teach"] .echos { display: none !important; }
#teach { grid-row: 2 / span 2; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); position: relative;
  background: radial-gradient(ellipse at 40% 0%, #1b1e27 0%, var(--nave) 60%); }
#teach[hidden] { display: none; }
#teach .spacer { flex: 1; }
#teach kbd { font: 11px var(--mono); padding: 0 4px; margin-left: 4px; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); }

#teachBar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-block: 7px; min-height: 30px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line); background: var(--stone); }
#teachBar button { font-size: 12.5px; padding: 4px 10px; }
.tc-crumb { font: 700 15px var(--label); letter-spacing: 0.06em; color: var(--gold); }
.tc-sub { color: var(--dim); font-size: 14px; }
.tc-where { font: 12px var(--label); letter-spacing: 0.04em; color: var(--dim); }
#teachStatus { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 20; pointer-events: none; max-width: calc(100% - 32px);
  font-family: var(--label); font-size: 13px; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--stone) 94%, transparent); border: 1px solid var(--line); }
#teachStatus:empty { display: none; }

#teachMain { min-height: 0; overflow: auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); scrollbar-width: thin; }
.tc-card { flex: 1 1 520px; max-width: 760px; min-width: 0; display: grid; gap: 14px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--stone); }
.tc-who { margin: 0; font: 13px var(--label); letter-spacing: 0.06em; color: var(--rubric); }
.tc-text { margin: 0; font: 500 clamp(21px, 3.2vw, 28px)/1.3 var(--display); color: var(--vellum); overflow-wrap: anywhere; }
.tc-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tc-side { display: grid; gap: 6px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--nave); }
.tc-play { font-size: 17px; padding: 8px 12px; }
.tc-play.on, [data-a=playfix].on { outline: 2px solid var(--vellum); outline-offset: 2px; }
canvas.tc-line { width: 100%; height: 44px; display: block; }
.tc-n { color: var(--dim); font: 12px var(--label); letter-spacing: 0.04em; }
.tc-vote { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tc-vote button { padding: 9px 6px; font-size: 14px; }
#teach button:disabled { opacity: 0.45; cursor: default; }
.tc-more { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; }
.tc-more button { font-size: 12.5px; padding: 4px 10px; }

.tc-q { margin: 0; font: 600 clamp(19px, 2.6vw, 24px)/1.25 var(--display); color: var(--vellum); }
.tc-judging { margin: -4px 0 0; display: flex; align-items: center; gap: 8px; font: 12.5px var(--label); letter-spacing: 0.06em; color: var(--dim); }
.tc-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); font: 600 13.5px var(--label); letter-spacing: 0.05em; }
.tc-dlg { display: grid; gap: 6px; }
.tc-turn { margin: 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tc-turn > b { flex: none; padding: 2px 8px; border-radius: 999px; font: 700 11.5px var(--label); letter-spacing: 0.05em; font-style: normal; align-self: center; }
.tc-a { max-width: 92%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--stone-2); border: 1px solid var(--line); font: italic 17px/1.35 var(--display); color: var(--vellum); }
.tc-a > b { background: var(--nave); color: var(--dim); font-style: normal; }
.tc-a > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tc-mini { flex: none; font-size: 12px; padding: 2px 8px; font-style: normal; }
.tc-b { justify-self: end; max-width: 96%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.tc-b > b { background: var(--gold); color: var(--nave); }
.tc-b .tc-text { font-size: clamp(20px, 3vw, 26px); }
.tc-dlg .tc-who { justify-self: end; }
.tc-ctx { margin: -4px 0 0; font: italic 17px/1.35 var(--display); color: var(--gold); }
.tc-nudge { margin: 0; font: 12.5px var(--label); letter-spacing: 0.04em; color: var(--dim); }
.tc-linebox { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--nave); }
.tc-linebox .tc-slider { width: 100%; margin: 0; accent-color: var(--gold); }
.tc-linebox canvas.tc-line, .tc-linebox .tc-n { grid-column: 1 / -1; }
.tc-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tc-rank li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--nave); cursor: grab; }
.tc-rank li.drag { opacity: 0.5; }
.tc-rank li > button:not(.tc-play) { font-size: 13px; padding: 3px 9px; }
.tc-rank .tc-play { font-size: 15px; padding: 5px 12px; }
.tc-grip { color: var(--dim); font-size: 14px; letter-spacing: -2px; }
.tc-rank .spacer { flex: 1; }

.tc-fix { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.tc-fix[hidden] { display: none; }
.tc-fix h3 { margin: 0; font: 700 15px var(--label); letter-spacing: 0.06em; color: var(--gold); }
.tc-fix h3 small { font-weight: 400; color: var(--dim); margin-left: 6px; }
.tc-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 16px; }
.tc-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 5.2em; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.tc-row.moved { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.tc-row .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-row input[type=range] { width: 100%; margin: 0; }
.tc-row input[type=checkbox] { justify-self: start; accent-color: var(--gold); }
.tc-row output { font: 12px var(--mono); color: var(--dim); text-align: right; }
.tc-fixbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc-fixbar canvas.tc-line { width: 180px; height: 34px; flex: 0 1 180px; }
.tc-fixbar button { font-size: 13px; padding: 5px 11px; }

.tc-stats { flex: 0 1 340px; min-width: 0; display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--stone); }
.tc-stats[hidden] { display: none; }
.tc-stats h3 { margin: 4px 0 0; font: 700 14px var(--label); letter-spacing: 0.06em; color: var(--gold); }
.tc-stats p { margin: 0; }
.tc-big { font-size: 15px; }
.tc-big b { font: 700 22px var(--display); color: var(--gold); }
.tc-small { font-size: 12.5px; color: var(--dim); line-height: 1.45; overflow-wrap: anywhere; }
.tc-last { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.tc-last .tc-ex { font-family: var(--display); font-size: 14px; color: var(--vellum); }
.tc-last .tc-ab { display: block; color: var(--dim); }
.tc-last b { color: var(--gold); font-weight: 500; }
.tc-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-tools button { font-size: 12.5px; padding: 4px 10px; }

/* the single page's home: Teach under the four rooms */
#home .home-teach { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--stone); color: inherit; text-decoration: none; }
#home .home-teach:hover, #home .home-teach:focus-visible { border-color: var(--gold); background: var(--stone-2); outline: none; }
#home .home-teach b { font: 700 17px var(--label); letter-spacing: 0.06em; color: var(--gold); }
#home .home-teach span { color: var(--dim); font-size: 14px; }

@media (max-width: 600px) {
  .tc-sub { display: none; }
  #teachMain { padding-top: 14px; }
  .tc-card { padding: 14px 14px 16px; }
  .tc-vote { grid-template-columns: 1fr 1fr; }
  .tc-row { grid-template-columns: 7.5em minmax(0, 1fr) 4.6em; }
  .tc-fixbar canvas.tc-line { flex-basis: 100%; width: 100%; order: 9; }
}
.tc-fix h3 .tc-link { font: 12px var(--label); letter-spacing: 0.04em; padding: 2px 9px; margin-left: 6px; vertical-align: 1px; }
.tc-fix .tc-linebox canvas.tc-line { height: 34px; }
/* the fix: modes, listening, what changed, the phone strip */
.tc-modes { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: 1px; }
.tc-fix h3 .tc-modes .tc-link { margin-left: 0; }
.tc-modes .tc-link.on { border-color: var(--gold); color: var(--gold); }
.tc-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tc-listen button { font-size: 13px; padding: 5px 11px; }
.tc-loop { display: inline-flex; align-items: center; gap: 4px; font: 12.5px var(--label); color: var(--dim); }
.tc-loop input { accent-color: var(--gold); }
.tc-lat { font: 12px var(--mono); color: var(--dim); }
.tc-fix canvas.tc-fixline { height: 44px; }
.tc-changes { margin: 0; font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; }
.tc-fixslider { width: 100%; accent-color: var(--gold); }
.tc-strip { border: 1px solid var(--line); border-radius: 8px; background: var(--nave); overflow-x: auto; scrollbar-width: thin; }
.tc-strip-in { position: relative; height: 46px; touch-action: pan-x; }
.tc-ph { position: absolute; top: 4px; height: 28px; min-width: 0; padding: 0; overflow: hidden; font: 13px var(--display); border-radius: 4px; border: 1px solid var(--line); background: var(--stone-2); color: var(--vellum); }
.tc-ph.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, var(--stone-2)); }
.tc-bd { position: absolute; top: 0; width: 12px; height: 34px; margin-left: -6px; cursor: ew-resize; z-index: 2; }
.tc-bd::after { content: ""; position: absolute; left: 5px; top: 2px; bottom: 2px; width: 2px; background: var(--gold); opacity: 0.5; }
.tc-ticks i { position: absolute; bottom: 2px; width: 1px; height: 8px; background: var(--dim); opacity: 0.6; }