/* Pebble teacher page: layout only. Colours, buttons, panels and the number look come from ../pebble.css (pb- classes).
 * Everything here starts with tc- . Made for a laptop, a tablet or a classroom projector (big, readable numbers). */
.tc-screen { display: none; }
.tc-screen.on { display: block; }
.tc-wrap { max-width: 1280px; margin: 0 auto; padding: 14px 18px 40px; padding-left: max(18px, var(--zb-home-space, 190px)); }
.tc-wrap > .pb-panel, .tc-wrap > .pb-h1 { margin-bottom: 16px; }
.tc-narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.tc-grow { flex: 1 1 auto; }
.tc-note { margin: 0 0 8px; font-size: 16px; }
.tc-hint { color: var(--pb-ink-soft); font-size: 15px; margin: 0 0 6px; }
.tc-h3 { font-family: "Fredoka", "Andika", sans-serif; font-size: 22px; margin: 18px 0 8px; color: var(--pb-forest); }

/* top strip */
.tc-bar { position: sticky; top: 0; z-index: 800; background: var(--pb-forest2); color: var(--pb-cream); border-bottom: 4px solid var(--pb-forest); }
.tc-bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 14px; padding-left: max(14px, var(--zb-home-space, 190px)); max-width: 1500px; margin: 0 auto; }
.tc-bar-code { font-family: "Fredoka", sans-serif; font-size: 18px; letter-spacing: .04em; display: inline-flex; flex-direction: column; line-height: 1.05; }
.tc-bar-code b { letter-spacing: .16em; font-size: 26px; }
.tc-bar-cl { white-space: nowrap; }
.tc-bar-code .tc-bar-url { font-family: "Andika", sans-serif; letter-spacing: 0; font-size: 13px; opacity: .85; margin: 0; }
.tc-bar .pb-pill { min-height: 34px; padding: 2px 12px; font-size: 15px; }
/* Every bar button is drawn here, so none of them can turn cream-on-cream. (pebble.css makes plain buttons inherit the bar's
   cream text; that is what made the music button look white and empty when it was off.) States: normal, hover, focus, on (pressed), off, disabled. */
.tc-bar .tc-tool, .tc-endmusic {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 14px 4px 10px; border-radius: 14px;
  border: 3px solid var(--pb-stone3); background: var(--pb-cream); color: var(--pb-forest); text-align: left;
  font: 700 16px/1.1 "Andika", sans-serif; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); cursor: pointer; touch-action: manipulation;
}
.tc-tool .tc-ico { width: 26px; height: 26px; flex: none; }
.tc-tool-t { display: flex; flex-direction: column; gap: 1px; }
.tc-tool-t b { font-size: 17px; }
.tc-tool-t small { font-size: 12px; font-weight: 400; color: var(--pb-ink-soft); max-width: 160px; line-height: 1.15; }
.tc-bar .tc-tool:hover, .tc-endmusic:hover { background: #fff; border-color: var(--pb-sun); }
.tc-bar .tc-tool:focus-visible, .tc-endmusic:focus-visible { outline: 3px solid var(--pb-sun); outline-offset: 2px; }
.tc-bar .tc-tool:active, .tc-endmusic:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.tc-bar .tc-tool[disabled], .tc-endmusic[disabled] { opacity: .55; cursor: not-allowed; }
/* music ON: light stone button with a green tick bar; OFF: dark button with a dashed cream border, cream text and a slashed note */
.tc-bar .tc-tool[aria-pressed="true"], .tc-endmusic[aria-pressed="true"] { background: var(--pb-cream); color: var(--pb-forest); border-color: var(--pb-moss); }
.tc-bar .tc-tool[aria-pressed="false"], .tc-endmusic[aria-pressed="false"] { background: #2b4636; color: var(--pb-cream); border: 3px dashed #e9dfc3; box-shadow: none; }
.tc-bar .tc-tool[aria-pressed="false"]:hover, .tc-endmusic[aria-pressed="false"]:hover { background: #3a5a47; border-color: var(--pb-sun); }
.tc-bar .tc-endbtn { background: #fde1e4; color: #7d1625; border-color: #e58a96; }

/* the small feedback button adds a 48px spacer under the footer; on the one-screen pages that alone would force scrolling */
body:has(#sSetup.on) #zb-feedback-room, body:has(#sJoin.on) #zb-feedback-room, body:has(#sEnd.on) #zb-feedback-room { display: none; }
body.tc-hasbar #sSetup .tc-logo-xl { height: clamp(64px, 9vh, 96px); }
/* setup + join pages: everything on one screen (no scrolling on a laptop or an iPad lying down) */
.tc-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tc-logo { height: 84px; width: auto; }
.tc-setupwrap { padding-top: 8px; padding-bottom: 14px; padding-left: 18px; }
.tc-sethead { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; padding-left: max(0px, calc(var(--zb-home-space, 190px) - 18px)); margin-bottom: 8px; }
.tc-logo-xl { height: clamp(84px, 14vh, 150px); width: auto; flex: none; filter: drop-shadow(0 4px 0 rgba(40, 70, 30, .18)); }
.tc-settitle { margin: 0; font-size: clamp(30px, 5vh, 46px); }
.tc-setgrid { display: grid; grid-template-columns: minmax(250px, 0.7fr) minmax(0, 2.3fr); gap: 12px; align-items: start; }
.tc-setleft { display: grid; gap: 10px; }
.tc-tight { padding: 10px 14px 12px; }
.tc-tight .pb-h2 { font-size: clamp(20px, 2.6vh, 26px); margin-bottom: 4px; }
.tc-h2note { font-size: 14px; font-weight: 400; font-family: "Andika", sans-serif; margin-left: 8px; }
.tc-optgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.tc-opt2 { border: 2px solid var(--pb-stone2); border-radius: 14px; background: #fff; padding: 0 10px 5px; }
.tc-opt2 .pb-switch { min-height: 44px; gap: 8px; }
.tc-opt2 .pb-switch span { font-size: 16px; line-height: 1.15; }
.tc-opt2 input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--pb-leaf); flex: none; }
.tc-opt2 .tc-hint { font-size: 13px; margin: 0 0 1px; line-height: 1.15; }
.tc-opt2 .tc-sub { padding: 0 0 2px; gap: 4px 10px; }
.tc-opt2 .tc-sub label { font-size: 14.5px; }
.tc-opt2 .pb-select, .tc-opt2 .pb-input { min-height: 40px; font-size: 17px; padding: 2px 10px; }
.tc-opt2 .tc-num { width: 120px; }
.tc-ready { display: grid; gap: 4px; }
.tc-ready .pb-h2 { margin: 0; }
.tc-ready .tc-hint { margin: 0 0 4px; font-size: 15px; }
.tc-ready .pb-big { width: 100%; }
.tc-start-card .pb-err { min-height: 0; }
.tc-opt { border-top: 2px solid var(--pb-stone2); padding: 4px 0 2px; margin-top: 6px; }
.tc-opt .pb-switch span { font-size: 16px; line-height: 1.2; }
.tc-opt input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--pb-leaf); flex: none; }
.tc-opt .tc-hint { font-size: 14px; }
.tc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 2px 0 8px 4px; }
.tc-sub.off { opacity: .45; }
.tc-sub label { font-weight: 700; }
.tc-num { width: 150px; }
#classCard .pb-select { min-height: 44px; font-size: 17px; }
#classCard .pb-label { margin-top: 0; margin-bottom: 2px; }
#botCard .tc-note { margin: 0 0 4px; font-size: 15px; }
#botCard .tc-sub { padding-bottom: 0; }
#botCard .pb-select { min-height: 44px; font-size: 17px; }
.tc-roster { margin-top: 4px; max-height: 96px; overflow: auto; min-height: 0; }
/* join page */
.tc-join { text-align: center; padding-top: 10px; padding-bottom: 10px; }
.tc-join-lab { color: var(--pb-ink-soft); font-size: 17px; }
.tc-joinurl, .tc-bigcode { font-family: "Fredoka", sans-serif; font-weight: 700; color: var(--pb-forest); line-height: 1.12; white-space: nowrap; font-size: var(--tc-joinfs, clamp(24px, 2.9vw, 44px)); }
.tc-bigcode { letter-spacing: .12em; padding-left: .12em; background: #fff4c4; border: 4px solid var(--pb-sun); border-radius: 18px; display: inline-block; padding: 0 .3em 0 .42em; margin: 2px 0 6px; }
.tc-joinurl { margin-bottom: 4px; }
.tc-qrrow { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.tc-qr { background: #fff; padding: 10px; border-radius: 12px; border: 3px solid var(--pb-stone3); width: 192px; height: 192px; display: grid; place-items: center; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.tc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 2px solid var(--pb-stone3); font-weight: 700; font-size: 18px; }
.tc-chip i, .tc-card-name i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid rgba(0, 0, 0, .25); flex: none; }
.tc-start { margin-top: 14px; display: grid; gap: 6px; justify-items: start; }
.tc-startnote { font-size: 18px; font-weight: 700; color: var(--pb-forest2); }
.tc-joingrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.tc-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* round setup */
.tc-modes .pb-btn { flex: 1 1 280px; }
.tc-rsgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 10px; }
.tc-rsright { position: sticky; top: 76px; }
.tc-three { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
.tc-three .pb-input { font-size: 26px; min-height: 60px; }
.tc-levels { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tc-level { display: flex; gap: 12px; align-items: center; text-align: left; padding: 4px 12px; border-radius: 14px; border: 3px solid var(--pb-stone3); background: var(--pb-cream); min-height: 56px; font-size: 15px; line-height: 1.2; }
.tc-level-n { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--pb-leaf); color: #fff; display: grid; place-items: center; font-family: "Fredoka", sans-serif; font-size: 22px; }
.tc-level[aria-pressed="true"] { background: var(--pb-forest2); border-color: var(--pb-forest); color: var(--pb-cream); box-shadow: 0 0 0 4px var(--pb-sun); }
.tc-level[aria-pressed="true"] .tc-level-n { background: var(--pb-sun); color: #3a2300; }
.tc-trick { display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fde1e4; color: #7d1625; border: 2px dashed var(--pb-bad); font-size: 15px; font-family: "Andika", sans-serif; font-weight: 700; vertical-align: middle; }
.tc-pushrow { margin-top: 12px; }
.pb-btn.pb-primary[disabled] { background: #cfd8cf; border-color: #9aa89a; border-style: dashed; color: #4b5a4f; opacity: 1; }
.tc-three .pb-input[aria-invalid="true"] { border-color: var(--pb-bad); background: #fff3f4; }
/* the reason the Push button cannot be pressed: about twice the size of the old note, red, right under the button */
.tc-why { margin-top: 10px; min-height: 36px; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; font-weight: 700; color: #9c1f2e; }
.tc-why.soft { color: var(--pb-forest2); font-weight: 400; font-size: clamp(18px, 2vw, 22px); }
.tc-why:empty { display: none; }

/* the path preview: a tick mark at each end (with its number) and the Pebble Number on a line.
   Outside the path: the number sits centered above the line, red, in a dotted outline, with no arrow. */
.tc-preview { margin: 6px 0 4px; }
.tc-pv { position: relative; height: 190px; background: linear-gradient(#e9f7da, #d3edba); border: 3px solid var(--pb-stone3); border-radius: 20px; overflow: hidden; }
.tc-pv-line { position: absolute; left: 8%; right: 8%; top: 98px; height: 14px; border-radius: 8px; background: var(--pb-stone2); border: 3px solid var(--pb-stone3); box-sizing: border-box; }
.tc-pv-end { position: absolute; top: 74px; width: 16%; text-align: center; transform: translateX(-50%); }
.tc-pv-end.l { left: 8%; } .tc-pv-end.r { left: 92%; }
.tc-pv-tick { display: block; width: 7px; height: 62px; margin: 0 auto; background: var(--pb-forest); border-radius: 4px; }
.tc-pv-lab { display: block; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 30px; color: var(--pb-forest); margin-top: 2px; line-height: 1.1; }
.tc-pv-mark { position: absolute; top: 6px; transform: translateX(-50%); text-align: center; z-index: 2; }
.tc-pv-num { display: inline-block; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 38px; background: var(--pb-sun); color: #3a2300; border: 3px solid var(--pb-sun-dk); border-radius: 14px; padding: 0 14px; }
.tc-pv-arrow { display: block; color: var(--pb-sun-dk); font-size: 26px; line-height: .8; }
.tc-pv-mark.out { left: 50%; background: #fff3f4; border: 3px dotted var(--pb-bad); border-radius: 16px; padding: 2px 16px 3px; }
.tc-pv-mark.out .tc-pv-num { background: transparent; border: 0; color: #b3303f; padding: 0; display: block; line-height: 1.1; }
.tc-pv-outlab { display: block; font-family: "Andika", sans-serif; font-weight: 700; font-size: 15px; color: #9c1f2e; }
.tc-q { opacity: .45; }
.tc-three + .tc-hint { margin-top: 10px; }
.tc-bigprev .tc-pv { height: 280px; }
.tc-bigprev .tc-pv-line { top: 150px; height: 18px; }
.tc-bigprev .tc-pv-end { top: 118px; }
.tc-bigprev .tc-pv-tick { height: 84px; width: 9px; }
.tc-bigprev .tc-pv-lab { font-size: 46px; }
.tc-bigprev .tc-pv-num { font-size: 60px; }
.tc-bigprev .tc-pv-mark { top: 8px; }
.tc-bigprev .tc-pv-outlab { font-size: 20px; }

.tc-smallprev .tc-pv { height: 150px; }
.tc-smallprev .tc-pv-line { top: 88px; }
.tc-smallprev .tc-pv-end { top: 66px; }
.tc-smallprev .tc-pv-tick { height: 46px; }
.tc-smallprev .tc-pv-end .tc-pv-lab { font-size: 26px; }
.tc-smallprev .tc-pv-num { font-size: 32px; }
.tc-smallprev .tc-pv-mark { top: 4px; }

/* round open */
.tc-livecard { text-align: center; }
.tc-livetop { margin-bottom: 8px; }
.tc-bigtimer { font-size: clamp(48px, 7vw, 84px); }
.tc-count { font-family: "Fredoka", sans-serif; font-size: clamp(54px, 8vw, 96px); font-weight: 700; color: var(--pb-forest); margin: 14px 0 6px; line-height: 1.1; }
.tc-count-of { font-size: clamp(24px, 3.2vw, 38px); font-weight: 600; color: var(--pb-forest2); }
.tc-locking { margin: 12px auto; max-width: 560px; }

/* end of round: results (left) + discussion path (right) */
.tc-reviewwrap { padding-top: 6px; padding-bottom: 8px; }
body.tc-hasbar .tc-wrap { padding-left: 14px; padding-right: 14px; }
.tc-rvhead { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-bottom: 6px; }
.tc-rvhead .pb-h1 { margin: 0; font-size: clamp(24px, 3.8vh, 36px); }
.tc-rvprob { font-size: clamp(18px, 2.6vh, 24px); font-weight: 700; color: var(--pb-forest2); }
.tc-dash { display: grid; grid-template-columns: minmax(340px, 4.4fr) minmax(0, 7.6fr); gap: 12px; align-items: start; }
.tc-dash > .pb-panel { padding: 10px 12px 12px; }
.tc-resp { display: flex; flex-direction: column; gap: 8px; }
.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.tc-stat { background: #fff; border: 2px solid var(--pb-stone2); border-radius: 12px; padding: 4px 8px 5px; text-align: center; }
.tc-stat b { display: block; font-family: "Fredoka", sans-serif; font-size: 24px; line-height: 1.1; color: var(--pb-forest); }
.tc-stat span { font-size: 12.5px; color: var(--pb-ink-soft); line-height: 1.1; display: block; }
.tc-dist .tc-bar-d { display: flex; height: 26px; border-radius: 13px; overflow: hidden; border: 2px solid var(--pb-stone3); background: var(--pb-stone); }
.tc-seg { display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; min-width: 0; }
.tc-seg.exact { background: #1f8a3c; } .tc-seg.close { background: #6cb44a; color: #14301c; } .tc-seg.off { background: #f5a623; color: #3a2300; }
.tc-seg.far { background: #c8453f; } .tc-seg.none { background: #9aa39a; }
.tc-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; margin-top: 3px; color: var(--pb-ink); }
.tc-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.tc-legend .exact i { background: #1f8a3c; } .tc-legend .close i { background: #6cb44a; } .tc-legend .off i { background: #f5a623; }
.tc-legend .far i { background: #c8453f; } .tc-legend .none i { background: #9aa39a; }
.tc-perfect { background: linear-gradient(#fff7d0, #ffeaa0); border: 2px solid var(--pb-sun); border-radius: 14px; padding: 5px 10px 6px; }
.tc-perfect h3 { margin: 0 0 3px; font-family: "Fredoka", sans-serif; font-size: 18px; color: #6a4300; }
.tc-perfect .tc-pchips { display: flex; flex-wrap: wrap; gap: 4px 6px; max-height: 64px; overflow: auto; }
.tc-pchip { background: #fff; border: 2px solid var(--pb-sun); border-radius: 999px; padding: 0 10px; font-weight: 700; font-size: 16px; }
.tc-perfect .tc-none { font-size: 14px; color: #6a4300; }
.tc-rowhead { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px; color: var(--pb-forest2); margin-top: 2px; }
.tc-rows { display: flex; flex-direction: column; gap: 4px; overflow: auto; max-height: max(130px, calc(100vh - 500px)); padding-right: 2px; }
.tc-row { background: #fff; border: 2px solid var(--pb-stone2); border-radius: 12px; padding: 3px 8px; }
.tc-row-main { display: flex; align-items: center; gap: 6px 8px; min-height: 44px; }
.tc-row-name { flex: 1 1 110px; min-width: 0; text-align: left; line-height: 1.15; }
.tc-namebtn { background: none; border: 0; padding: 4px 2px; font: 700 17px/1.15 "Andika", sans-serif; color: var(--pb-forest); text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.tc-namebtn:hover, .tc-namebtn:focus-visible { color: var(--pb-leaf-dk); }
.tc-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); flex: none; }
.tc-notetxt { display: block; font-size: 13.5px; font-weight: 400; color: var(--pb-ink-soft); overflow-wrap: anywhere; }
.tc-res { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; text-align: right; }
.tc-badge { padding: 2px 10px; border-radius: 999px; font-size: 14.5px; font-weight: 700; background: var(--pb-stone2); color: var(--pb-ink); white-space: nowrap; }
.tc-badge.exact { background: #1f8a3c; color: #fff; } .tc-badge.close { background: #d8f0c8; color: #14301c; } .tc-badge.off { background: #ffe9b8; color: #5a3800; }
.tc-badge.far { background: #fde1e4; color: #7d1625; } .tc-badge.none { background: #e6e6e0; color: #444; }
.tc-small-flag { font-size: 12px; color: #7a5200; font-weight: 700; }
.tc-dia { font-weight: 700; color: #0a5b7d; white-space: nowrap; font-size: 15px; min-width: 38px; text-align: right; }
.tc-noteb { white-space: nowrap; min-height: 40px; min-width: 40px; padding: 2px 8px; border-radius: 10px; border: 2px solid var(--pb-stone3); background: var(--pb-cream); color: var(--pb-forest); font: 700 14px "Andika", sans-serif; display: inline-flex; align-items: center; gap: 4px; }
.tc-noteb:hover, .tc-noteb:focus-visible { border-color: var(--pb-leaf); }
.tc-noteedit { display: flex; gap: 6px; padding: 2px 0 4px; }
.tc-noteedit input { flex: 1 1 auto; min-height: 42px; font: inherit; font-size: 16px; padding: 4px 10px; border: 3px solid var(--pb-leaf); border-radius: 10px; min-width: 0; }
.tc-noteedit .pb-btn { min-height: 42px; padding: 2px 12px; font-size: 15px; }
.tc-disc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px; }
.tc-disc-head .pb-h2 { margin: 0; font-size: clamp(20px, 2.8vh, 26px); }
.tc-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 260px; }
.tc-ans-text { font-size: 16px; }
.tc-answer .pb-pill { padding: 2px 10px; font-size: 14px; }
.tc-answer .pb-btn.pb-small { min-height: 40px; padding: 2px 10px; font-size: 14px; }
.tc-big { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1.3em; }
.tc-boardhost { min-height: 160px; }
/* the discussion board: its picture is sized to the height that is left on the screen so the tools and buttons stay in view */
#rvPathBoard { --pb-stage-maxh: max(170px, calc(100vh - 556px)); padding: 4px; }
#rvPathBoard .pb-board { gap: 4px; }
#rvPathBoard .pb-tools { gap: 3px; justify-content: flex-start; }
#rvPathBoard .pb-tgroup { padding: 0 3px; gap: 3px; }
#rvPathBoard .pb-tool { min-height: 44px; padding: 2px 7px; font-size: 14px; gap: 3px; }
#rvPathBoard .pb-sw { width: 40px; height: 40px; border-width: 3px; }
.tc-ctls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.tc-ctls .pb-btn { min-height: 46px; padding: 4px 14px; font-size: 16px; }
.tc-ctls2 { margin-top: 6px; }
.tc-ctl-lab { font-weight: 700; font-size: 16px; }
.tc-sel { width: auto; min-width: 150px; flex: 1 1 150px; max-width: 280px; min-height: 46px; font-size: 16px; }
.tc-ctl { background: #cfeec6; border-color: var(--pb-leaf-dk); color: var(--pb-forest); }
.tc-boardsdet { margin-top: 12px; }
.tc-boardsdet > summary { cursor: pointer; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; color: var(--pb-forest); min-height: 40px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc-boardsdet[open] > summary { margin-bottom: 10px; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tc-card { background: #fff; border: 3px solid var(--pb-stone3); border-radius: 18px; padding: 8px 10px 10px; cursor: pointer; text-align: left; }
.tc-card:hover, .tc-card:focus-visible { border-color: var(--pb-leaf); box-shadow: 0 0 0 4px rgba(47, 143, 58, .3); outline: none; }
.tc-card.blank { background: #f6f1e4; border-style: dashed; }
.tc-card-name { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.tc-card-board { pointer-events: none; min-height: 90px; }
.tc-card-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 30px; margin-top: 6px; }
.tc-flag { padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--pb-stone2); }
.tc-flag.bad { background: #fde1e4; color: #7d1625; }
.tc-flag.warn { background: #ffe9b8; color: #5a3800; }
.tc-noboard { padding: 18px; color: var(--pb-ink-soft); }
.tc-tablewrap { overflow-x: auto; }
.tc-spacer { height: 70px; }
.tc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 700; background: rgba(18, 54, 31, .96); border-top: 4px solid var(--pb-sun); }
.tc-sticky-in { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: center; padding: 4px 14px calc(4px + env(safe-area-inset-bottom, 0px)); }
.tc-sticky-in .pb-big { min-height: 50px; font-size: 20px; padding: 4px 24px; }
.tc-sticky-q { color: var(--pb-cream); font-family: "Fredoka", sans-serif; font-size: 24px; font-weight: 600; }
#sReview:not(.on) .tc-sticky { display: none; }

/* full-screen board */
.tc-fs { position: fixed; inset: 0; z-index: 2000; background: linear-gradient(#d7f0c4, #a6d58b); display: flex; flex-direction: column; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
.tc-fs[hidden] { display: none; }
.tc-fs-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.tc-fs-board { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .45); border: 3px solid var(--pb-stone3); border-radius: 20px; padding: 8px; }
.tc-fs .tc-fs-board > * { width: min(100%, calc((100vh - 310px) * 2.3)); min-width: 320px; }
.tc-fs-note { text-align: center; }
body.tc-fs-open { overflow: hidden; }
body.tc-fs-open .tc-sticky { display: none; }

/* the end: a Pebble celebration (sky, sun, hills) */
body.tc-endbg { background:
  radial-gradient(circle at 88% 9%, #ffe27a 0, #f5c542 7%, rgba(245, 197, 66, 0) 17%),
  radial-gradient(1100px 380px at 20% 108%, #5eae4a 0, #5eae4a 60%, transparent 61%),
  radial-gradient(900px 320px at 90% 112%, #3f9040 0, #3f9040 60%, transparent 61%),
  linear-gradient(#7cc8f0 0%, #bfe9ff 42%, #e4f5cf 72%, #b5e39a 100%);
  background-attachment: fixed; }
#sEnd { position: relative; overflow: hidden; min-height: 100vh; }
.tc-endwrap { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 6px 18px 12px; text-align: center; }
.tc-endlogo { height: clamp(70px, 11.5vh, 120px); width: auto; filter: drop-shadow(0 4px 0 rgba(30, 80, 40, .25)); }
.tc-endwait { font-family: "Fredoka", sans-serif; font-size: 28px; color: var(--pb-forest); margin-top: 30px; }
.tc-endtitle { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(32px, 5.8vh, 54px); margin: 0; color: var(--pb-forest); text-shadow: 0 3px 0 #fff, 0 6px 0 rgba(40, 90, 40, .2); letter-spacing: .01em; }
.tc-endsub { font-size: clamp(16px, 2.3vh, 20px); color: var(--pb-forest2); font-weight: 700; margin: 0 0 4px; }
.tc-endmusic { position: absolute; top: 10px; right: 12px; z-index: 5; min-height: 44px; padding: 2px 12px; font-size: 15px; }
.tc-podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 4px auto 4px; }
.tc-place { flex: 1 1 0; max-width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; animation: tc-rise .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.tc-place.p2 { animation-delay: .15s; } .tc-place.p1 { animation-delay: .4s; } .tc-place.p3 { animation-delay: .0s; }
.tc-who { background: #fff; border: 4px solid var(--tc-medal, var(--pb-stone3)); border-radius: 18px; padding: 2px 10px 4px; margin-bottom: 4px; width: 100%; box-shadow: 0 5px 0 rgba(40, 70, 30, .22); }
.tc-who .tc-medal { font-size: clamp(26px, 4.2vh, 38px); line-height: 1; display: block; }
.tc-who .tc-names { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(18px, 2.9vh, 27px); color: var(--pb-forest); line-height: 1.15; overflow-wrap: anywhere; }
.tc-who .tc-val { font-weight: 700; color: #0a5b7d; font-size: clamp(15px, 2.1vh, 18px); }
.tc-who .tc-tie { display: inline-block; background: var(--pb-sun); color: #3a2300; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0 8px; margin-left: 4px; vertical-align: middle; }
.tc-step { width: 100%; border-radius: 14px 14px 0 0; display: grid; place-items: start center; padding-top: 4px; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(24px, 4.4vh, 42px); color: rgba(255, 255, 255, .95); text-shadow: 0 3px 0 rgba(0, 0, 0, .22); border: 4px solid rgba(0, 0, 0, .15); border-bottom: 0; }
.tc-place.p1 .tc-step { height: clamp(52px, 9.5vh, 90px); background: linear-gradient(#ffd84d, #e2a40f); }
.tc-place.p2 .tc-step { height: clamp(40px, 6.8vh, 66px); background: linear-gradient(#e4e8ee, #9aa5b3); }
.tc-place.p3 .tc-step { height: clamp(30px, 4.6vh, 46px); background: linear-gradient(#e0a070, #a8662f); }
.tc-place.p1 { --tc-medal: #e2a40f; } .tc-place.p2 { --tc-medal: #9aa5b3; } .tc-place.p3 { --tc-medal: #a8662f; }
.tc-rest { list-style: none; margin: 10px auto 0; padding: 0; max-width: 520px; display: grid; gap: 3px; max-height: 15vh; overflow: auto; text-align: left; }
.tc-rest li { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .92); border: 2px solid var(--pb-stone3); border-radius: 12px; padding: 0 12px; font-size: 18px; font-weight: 700; min-height: 34px; }
.tc-rest .rk { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pb-forest2); color: var(--pb-cream); display: grid; place-items: center; font-family: "Fredoka", sans-serif; }
.tc-rest .nm { flex: 1 1 auto; } .tc-rest .vl { color: #0a5b7d; }
.tc-endstats { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; margin: 8px 0 4px; }
.tc-endstat { background: rgba(255, 255, 255, .92); border: 3px solid var(--pb-stone3); border-radius: 16px; padding: 2px 14px 4px; min-width: 110px; }
.tc-endstat b { display: block; font-family: "Fredoka", sans-serif; font-size: clamp(22px, 3.4vh, 30px); color: var(--pb-forest); line-height: 1.1; }
.tc-endstat span { font-size: 13px; color: var(--pb-ink-soft); }
.tc-endactions { margin: 6px 0 4px; }
.tc-endactions .pb-btn { text-decoration: none; min-height: 56px; font-size: 21px; }
.tc-endreports { max-width: 760px; margin: 10px auto 0; }
.tc-endreports .pb-banner { font-size: clamp(14px, 2vh, 18px); padding: 4px 12px; }
.tc-reportbtn { text-decoration: none; }
.tc-saved { background: #cfeec6; border-color: var(--pb-leaf-dk); color: var(--pb-forest); }
.tc-notsaved { background: #fff1c6; font-weight: 600; }
.tc-reportbtn { margin-left: 10px; }
.tc-link { color: var(--pb-forest); text-decoration: underline; }
.great .tc-endstat { min-width: 150px; padding: 8px 20px 10px; } .great .tc-endstat b { font-size: clamp(32px, 6vh, 52px); }
.great .tc-endstats { margin-top: 24px; }
.great .tc-endtitle::before { content: "\1F389  "; }
.great .tc-endtitle::after { content: "  \1F389"; }
@keyframes tc-rise { from { transform: translateY(60px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.tc-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tc-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; opacity: .9; animation: tc-fall linear infinite; }
@keyframes tc-fall { from { transform: translateY(-30px) rotate(0deg); } to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) {
  .tc-place { animation: none; }
  .tc-confetti { display: none; }
}

/* fractions inside headings/preview must not shrink below readable */
.tc-pv .pb-frac, .tc-ans-text .pb-frac, .tc-pnum .pb-frac { font-size: 1em; }

@media (max-width: 1250px) { #barRound { display: none; } }
@media (max-width: 1100px) {
  .tc-bar-url { display: none; }
  .tc-bar-code { font-size: 16px; }
  .tc-tool-t small { max-width: 140px; }
  .tc-bar .tc-tool { padding-right: 10px; }
  .tc-bar .tc-endbtn { padding: 4px 10px; }
  body:has(#sReview.on) #barEnd { display: none; }   /* the What next bar has End session */
}
@media (max-width: 699px) {
  .tc-optgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tc-two, .tc-joingrid { grid-template-columns: 1fr; }
  .tc-rsgrid { grid-template-columns: 1fr; }
  .tc-rsright { position: static; }
  .tc-levels { grid-template-columns: 1fr; }
  .tc-wrap { padding-left: max(14px, var(--zb-home-space, 110px)); }
  .tc-wrap.tc-setupwrap { padding-left: 14px; }
  .tc-setgrid { grid-template-columns: 1fr; }
  .tc-setleft { grid-template-columns: 1fr 1fr; grid-template-areas: "cls bots"; align-items: start; }
  .tc-setleft #classCard { grid-area: cls; } .tc-setleft #botCard { grid-area: bots; } .tc-setleft .tc-start-card { grid-area: ready; }
  .tc-settitle { font-size: 34px; }
  .tc-logo-xl { height: 108px; }
  .tc-sethead { flex-wrap: nowrap; }
  .tc-dash { grid-template-columns: 1fr; }
  .tc-rows { max-height: none; }
}
@media (max-width: 640px) {
  .tc-pv-lab { font-size: 22px; } .tc-pv-num { font-size: 28px; }
  .tc-logo { height: 60px; }
  .tc-optgrid { grid-template-columns: 1fr; }
  .tc-podium { flex-wrap: wrap; }
}

/* setup page: who gets the Join button, and the status line on the join page */
.tc-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tc-pick input { width: 22px; height: 22px; accent-color: var(--pb-leaf); }
.tc-invstatus { margin-top: 8px; font-weight: 700; }

/* join info overlay (late joiners): the address is as big as the code */
.tc-joinov { position: fixed; inset: 0; z-index: 50; background: rgba(10,30,15,.72); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.tc-joinov[hidden] { display: none; }
.tc-joinov-card { background: var(--pb-cream); border: 5px solid var(--pb-leaf); border-radius: 26px; padding: 14px 30px 18px; text-align: center; max-width: 96vw; }
.tc-joinov-h { font-family: "Fredoka", "Andika", sans-serif; font-weight: 700; font-size: 38px; color: var(--pb-forest); }
.tc-joinov-qr { display: inline-block; margin: 6px 0; padding: 10px; min-width: 300px; min-height: 300px; background: #fff; border-radius: 16px; }
.tc-joinov-lab { color: var(--pb-ink-soft); font-size: 18px; }
.tc-joinov-u, .tc-joinov-c { font-family: "Fredoka", sans-serif; font-weight: 700; color: var(--pb-forest); white-space: nowrap; line-height: 1.12; font-size: clamp(26px, 5.2vw, 60px); }
.tc-joinov-c { letter-spacing: .14em; padding-left: .14em; margin-bottom: 8px; }

@media (max-width: 760px) { .tc-bar-url { display: none; } }

/* the Add Students button lives at the top right of the Setup page (Tim, 12 Oct 2026) */
.tc-startbox { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; max-width: 380px; }
.tc-startbox .tc-hint { margin: 0; font-size: 14px; }
.tc-startbox .pb-err { min-height: 0; font-size: 15px; }
.tc-startbox .pb-big { white-space: nowrap; }
@media (max-width: 900px) { .tc-sethead { flex-wrap: nowrap; } .tc-logo-xl { height: 96px; } .tc-settitle { font-size: 28px; } .tc-startbox { margin-left: auto; align-items: flex-end; text-align: right; } }

/* short windows (a laptop with browser bars, about 590px tall): four columns of options and a smaller logo so Setup still fits without scrolling */
@media (max-height: 700px) and (min-width: 1100px) {
  .tc-optgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #sSetup .tc-logo-xl { height: 84px; }
  .tc-sethead { margin-bottom: 2px; }
  .tc-startbox .pb-h2 { font-size: 22px; margin: 0; line-height: 1; }
  .tc-startbox .pb-big { min-height: 56px; padding-top: 4px; padding-bottom: 4px; }
  .tc-startbox .tc-practicebtn { min-height: 44px; margin-top: 0; padding-top: 2px; padding-bottom: 2px; font-size: 17px; }
}

/* ================= whole-class practice (Tim, 12 Oct 2026): made for a projector or smartboard ================= */
.tc-practicebtn { min-height: 46px; font-size: 18px; padding: 4px 16px; white-space: nowrap; margin-top: 4px; }
.tc-startbox .tc-practicebtn { align-self: flex-end; }
.pb-btn.tc-practicebtn { background: #fff; border-color: var(--pb-leaf); color: var(--pb-forest); }
.tc-practicebtn:hover, .tc-practicebtn:focus-visible { background: #e6f5e1; }
/* "How will the class answer?" on the problem setup screen */
#practiceHow { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--pb-stone2); }
#practiceHow[hidden] { display: none; }
#practiceHow .tc-hint { margin: 6px 0 0; font-size: 17px; }
#practiceExit { margin-left: 12px; }

/* the practice screen: one screen, no scrolling */
body.tc-practicing .zb-site-footer { padding-top: 2px; padding-bottom: 4px; }
body.tc-practicing #zb-feedback-room { display: none; }
.tc-prwrap { max-width: 2400px; margin: 0 auto; padding: 4px 14px 2px; }
.tc-prhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-left: max(0px, calc(var(--zb-home-space, 190px) - 14px)); min-height: 54px; }
.tc-prtitle { font-family: "Fredoka", "Andika", sans-serif; font-size: 28px; white-space: nowrap; margin: 0; color: var(--pb-forest); line-height: 1.1; }
.tc-prn { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 22px; background: var(--pb-forest2); color: var(--pb-cream); border-radius: 999px; padding: 2px 16px; white-space: nowrap; }
.tc-score { order: 6; flex: 0 0 auto; margin: 0 auto; display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; background: #fff; border: 3px solid var(--pb-leaf); border-radius: 16px; padding: 2px 14px; }
.tc-score-main { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 22px; color: var(--pb-forest); white-space: nowrap; }
.tc-score-main b { margin-left: 6px; font-size: 34px; color: var(--pb-leaf-dk); display: inline-block; min-width: 1.2ch; text-align: center; }
.tc-score-tally { font-weight: 700; font-size: 17px; color: var(--pb-ink); white-space: nowrap; }
.tc-score-streak { font-weight: 700; font-size: 17px; color: #3a2300; background: #ffe9b8; border: 2px solid var(--pb-sun-dk); border-radius: 999px; padding: 0 12px; white-space: nowrap; }
.tc-score-streak.hot { background: var(--pb-sun); }
.tc-pop .tc-score-main b { animation: tc-pop .7s ease-out; }
@keyframes tc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.5); color: var(--pb-sun-dk); } 100% { transform: scale(1); } }
.tc-prmusic { position: static; white-space: nowrap; }
.tc-prmusic .tc-tool-t { white-space: nowrap; }
.tc-prend { min-height: 48px; }
.tc-prboard { margin-top: 4px; padding: 4px; }
.tc-prboard .pb-board { gap: 4px; }
.tc-prboard .pb-challenge { font-size: clamp(18px, 3.4vh, 30px); line-height: 1.1; }
.tc-prboard .pb-tools { gap: 3px; justify-content: flex-start; }
.tc-prboard .pb-tgroup { padding: 0 3px; gap: 3px; }
.tc-prboard .pb-tool { min-height: 44px; padding: 2px 7px; font-size: 14px; gap: 3px; }
.tc-prboard .pb-sw { width: 40px; height: 40px; border-width: 3px; }
/* the line under the picture: hint, "Locked in", or the result of the problem */
.tc-prmsg { margin-top: 5px; min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px 14px;
  font-family: "Fredoka", "Andika", sans-serif; font-weight: 600; font-size: clamp(20px, 3.2vh, 28px); line-height: 1.15; color: var(--pb-forest2);
  border-radius: 16px; border: 3px solid transparent; }
.tc-prmsg.locked { background: #fff1c6; border-color: var(--pb-sun-dk); color: #3a2300; }
.tc-prmsg.res-perfect { background: #1f7a3c; color: #fff; font-size: clamp(26px, 4.4vh, 40px); font-weight: 700; }
.tc-prmsg.res-close { background: #d8f0c8; border-color: var(--pb-leaf-dk); color: #14301c; font-size: clamp(24px, 4vh, 36px); font-weight: 700; }
.tc-prmsg.res-near { background: #ffe9b8; border-color: var(--pb-sun-dk); color: #3a2300; font-size: clamp(24px, 4vh, 36px); font-weight: 700; }
.tc-prmsg.res-far { background: #fde1e4; border-color: var(--pb-bad); color: #7d1625; font-size: clamp(24px, 4vh, 36px); font-weight: 700; }
.tc-prbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 5px; min-height: 66px; padding-right: 150px; }
.tc-prbar .pb-big { min-height: 60px; font-size: 22px; padding: 6px 22px; }
.tc-prbar .tc-prout[aria-pressed="true"] { background: var(--pb-forest2); color: var(--pb-cream); }
.tc-prtimer { font-size: clamp(40px, 7vh, 60px); line-height: 1; min-width: 3.6ch; background: #fff; border: 3px solid var(--pb-stone3); border-radius: 16px; padding: 0 12px; }
.tc-prtimer[hidden] { display: none; }
.tc-prtimer.pb-low { border-color: var(--pb-bad); }
.tc-votes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tc-vote { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; min-width: 190px; padding: 4px 22px 4px 8px; border-radius: 18px;
  border: 4px solid var(--vc); background: #fff; color: var(--pb-forest); font: 700 22px/1.1 "Andika", sans-serif; cursor: pointer; touch-action: manipulation; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.tc-vote-l { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--vc); color: #fff; display: grid; place-items: center; font: 700 30px/1 "Fredoka", sans-serif; }
.tc-vote-t { text-align: left; }
.tc-vote:hover:not([disabled]) { background: #f1f7ff; }
.tc-vote:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.tc-vote:focus-visible { outline: 4px solid var(--pb-sun); outline-offset: 3px; }
.tc-vote[disabled] { cursor: default; opacity: 1; }
.tc-vote[disabled]:not(.chosen):not(.right) { opacity: .78; }
.tc-vote.chosen { box-shadow: 0 0 0 5px var(--pb-sun); }
.tc-vote.right { background: #d8f0c8; box-shadow: 0 0 0 5px var(--pb-good); }
.tc-vote-ok { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); background: var(--pb-forest2); color: var(--pb-cream); font: 700 13px/1 "Andika", sans-serif; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.tc-vote.right .tc-vote-ok { background: var(--pb-good); color: #fff; }
.tc-pendactions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
#sPEnd { position: relative; overflow: hidden; min-height: calc(100vh - 62px); }   /* leaves room for the page footer so nothing scrolls */
#sPEnd .tc-endwrap { padding-top: 24px; }
#sPEnd .tc-endstats { margin-top: 22px; }
#sPEnd .tc-endstat { min-width: 150px; padding: 8px 20px 10px; }
#sPEnd .tc-endstat b { font-size: clamp(32px, 6vh, 52px); }
#sPEnd .tc-endtitle::before { content: "\1F389  "; }
#sPEnd .tc-endtitle::after { content: "  \1F389"; }
body:has(#sPEnd.on) #zb-feedback-room { display: none; }
@media (prefers-reduced-motion: reduce) { .tc-pop .tc-score-main b { animation: none; } .tc-prtimer.pb-low { animation: none; } }
@media (max-width: 1100px) { .tc-prtitle { font-size: 26px; } .tc-score-tally, .tc-score-streak { font-size: 15px; } .tc-prbar { padding-right: 0; } }

/* with a session open (the top bar is showing) the Setup header is just the button: no 'Ready?' line, a smaller logo */
body.tc-hasbar #sSetup #readyTitle { display: none; }
body.tc-hasbar #sSetup .tc-logo-xl { height: 64px; }
body.tc-hasbar #sSetup .tc-sethead { margin-bottom: 2px; }

/* the preview hides where the Pebble Number goes unless the teacher presses Peek (the class may be watching) */
.tc-pv-mark.plain { left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tc-pv-mark.plain .tc-pv-lab2 { font-size: 14px; font-weight: 700; color: var(--pb-ink-soft); }
.tc-peek { margin-left: 10px; vertical-align: middle; font-size: 15px; }
.tc-peek[aria-pressed="true"] { background: #fff4c4; border-color: #f5a623; }