:root {
  color-scheme: light;
  font-family: "Aptos", "Trebuchet MS", sans-serif;
  color: #20382d;
  background: #f5f4ec;
  font-size: 16px;
  --line: #cdd5c4;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.tv-app { height: 100vh; height: 100dvh; width: 100%; display: grid; grid-template-rows: 3vh 12vh 6.5vh minmax(0,1fr) 10.5vh; overflow: hidden; }
.demo-ribbon { display: flex; align-items: center; gap: 1.4vw; padding: 0 2.6vw; background: #f0ce85; color: #493c22; font-size: 1.4vh; letter-spacing: .035em; }
.demo-ribbon strong { font-size: 1.35vh; letter-spacing: .12em; }
#previewFlag { margin-left: auto; font-weight: 800; }
.tv-header { position: relative; padding: 1.65vh 2.6vw 1.2vh; display: flex; align-items: center; justify-content: space-between; gap: 2vw; background: #203c2f; color: #f9f6e8; }
.tv-heading { min-width: 0; }
.tv-eyebrow { font-size: 1.28vh; letter-spacing: .19em; font-weight: 600; color: #c4d4b9; }
h1 { font-family: "Bahnschrift", "Aptos Display", "Trebuchet MS", sans-serif; font-size: min(5.5vh,4vw); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin: .9vh 0 0; }
.lm-mark { border-left: 1px solid #708369; padding-left: 2.2vw; padding-right: 1.7vw; display: flex; align-items: center; gap: 1.5vw; flex-shrink: 0; }
.lm-mark span { font-size: 1.55vh; letter-spacing: .12em; font-weight: 600; }
.lm-mark strong { font-family: "Bahnschrift", "Trebuchet MS", sans-serif; color: #f0ce85; font-size: 6.3vh; font-weight: 400; letter-spacing: -.04em; }
.context-bar { display: flex; align-items: center; justify-content: space-between; gap: 1vw; padding: .6vh 2.6vw; border-bottom: 1px solid var(--line); background: #e8ecdf; }
.context-bar div:first-child { display: flex; align-items: center; gap: 1.2vw; }
.context-bar strong { font-size: min(2.05vh,1.7vw); font-weight: 650; }
.context-divider { color: #809276; font-size: 2.4vh; }
#sosTime { color: #52644b; font-size: 1.65vh; margin-left: .4vw; }
.screen-scope { display: flex; flex-direction: column; align-items: end; }
.screen-scope strong { font-size: min(1.9vh,1.8vw); }
#otherScreen { font-size: 1.4vh; color: #596c51; margin-top: .2vh; }
#tvMain { min-height: 0; padding: 1.3vh 2.6vw 1.1vh; display: flex; }
.board { width: 100%; min-height: 0; display: grid; gap: 2.3vw; }
.board.columns-1 { grid-template-columns: minmax(0,1fr); }
.board.columns-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.board-column { display: grid; grid-template-rows: 3.6vh minmax(0,1fr); min-width: 0; min-height: 0; }
.column-labels, .tv-row { display: grid; grid-template-columns: 1.18fr .85fr 1.27fr .68fr; gap: .65vw; align-items: center; }
.column-labels { font-size: 1.28vh; font-weight: 700; letter-spacing: .08em; color: #526448; padding: 0 .7vw; border-bottom: 2px solid #718367; }
.column-labels span:nth-child(3) { color: #244b31; }
.tv-rows { display: grid; grid-auto-rows: minmax(0,1fr); min-height: 0; }
.tv-row { padding: 0 .7vw; border-bottom: 1px solid var(--line); min-width: 0; min-height: 0; }
.tv-row:nth-child(even) { background: #edf0e5; }
.tv-row span { min-width: 0; display: block; white-space: nowrap; line-height: 1.06; }
.tv-worker { font-family: "Bahnschrift", "Aptos", "Trebuchet MS", sans-serif; font-size: var(--worker-size); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.tv-source { color: #596b50; font-size: var(--source-size); }
.tv-target { font-family: "Bahnschrift", "Aptos", "Trebuchet MS", sans-serif; font-size: var(--target-size); color: #183d27; font-weight: 650; letter-spacing: -.02em; }
.tv-point { font-family: "Bahnschrift", "Aptos", "Trebuchet MS", sans-serif; font-size: var(--point-size); font-weight: 500; color: #344f31; font-variant-numeric: tabular-nums; }
.board.hero { --worker-size: 8.4vh; --target-size: 9.2vh; --source-size: 4.4vh; --point-size: 7.1vh; }
.board.large { --worker-size: 5.8vh; --target-size: 6.2vh; --source-size: 3.3vh; --point-size: 4.9vh; }
.board.medium { --worker-size: 4.0vh; --target-size: 4.4vh; --source-size: 2.3vh; --point-size: 3.6vh; }
.board.compact { --worker-size: 3.7vh; --target-size: 3.85vh; --source-size: 2.2vh; --point-size: 3.7vh; }
.state-panel { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: 4vh 5vw; width: 100%; border-bottom: 1px solid var(--line); }
.state-code { font-size: 1.65vh; font-weight: 700; letter-spacing: .13em; padding: .65vh .8vw; background: #e0e6d6; color: #47643d; margin-bottom: 2.2vh; }
.state-panel h2 { font-family: "Bahnschrift", "Aptos", "Trebuchet MS", sans-serif; font-size: min(7.2vh,5.8vw); font-weight: 500; letter-spacing: -.04em; line-height: 1.08; max-width: 85%; margin: 0; }
.state-panel p { font-size: min(3.0vh,2.8vw); line-height: 1.45; max-width: 85%; margin: 2.5vh 0 0; color: #51664a; }
.state-detail { font-size: 1.8vh; margin-top: 2.8vh; color: #5f7157; }
body[data-state=unavailable] .state-code, body[data-state=session] .state-code, body[data-state=stale] .state-code, body[data-state=capacity] .state-code { background: #f3ddcc; color: #843d20; }
body[data-state=unavailable] h2, body[data-state=session] h2, body[data-state=stale] h2, body[data-state=capacity] h2 { color: #74391f; }
.tv-footer { background: #e3e8d7; padding: .75vh 2.6vw; border-top: 2px solid #879b70; display: flex; flex-direction: column; justify-content: space-between; gap: .5vh; }
.instruction-line { display: flex; gap: 1.1vw; align-items: center; min-height: 5vh; }
.direction-icon { font-family: "Bahnschrift", sans-serif; color: #4a6640; font-size: 4vh; line-height: 1; }
.instruction-line strong { font-size: min(2.6vh,2vw); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
/* Quiet contact pill: readable from a distance, lighter than the routing instruction. */
.feedback-note { margin-left: auto; flex: none; padding: .4vh 1vw; border: 1px solid #a9b897; border-radius: 999px; background: #eef1e6; color: #4a603f; font-size: min(1.8vh,1.4vw); line-height: 1.2; white-space: nowrap; }
.instruction-line .feedback-note strong { font-size: inherit; line-height: inherit; letter-spacing: .01em; font-weight: 650; color: #203c2f; }
.verification-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5vh 1.2vw; border-top: 1px solid #bac7a9; padding-top: .65vh; font-size: 1.38vh; color: #4a603f; font-variant-numeric: tabular-nums; }
#connectionStatus { font-weight: 700; }
body[data-state=unavailable] .tv-footer, body[data-state=session] .tv-footer, body[data-state=stale] .tv-footer, body[data-state=capacity] .tv-footer { background: #f4e2d1; border-color: #b78058; }
body[data-state=unavailable] .verification-line, body[data-state=session] .verification-line, body[data-state=stale] .verification-line, body[data-state=capacity] .verification-line { color: #704b34; border-color: #d9b598; }
.noscript-warning { position: fixed; inset: 0; z-index: 100; background: #f5ead6; color: #74391f; padding: 20vh 8vw; font-size: 6vh; }
body.preview .demo-ribbon { background: #ead298; }
@media(max-aspect-ratio: 7/5) {
  h1 { font-size: 4.5vw; }
  .lm-mark { gap: 1.3vw; padding-inline: 1.3vw; }
  .lm-mark span { font-size: 1.45vw; }
  .lm-mark strong { font-size: 5vw; }
  .context-bar strong { font-size: 2vw; }
  #sosTime { font-size: 1.55vw; }
  .tv-eyebrow, .demo-ribbon, .demo-ribbon strong { font-size: 1.55vw; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto !important; } }

.welcome-panel { display: grid; grid-template-columns: 1.6fr 1fr; width: 100%; min-height: 0; background: #edf0e5; border: 1px solid var(--line); }
.welcome-copy { position: relative; padding: 5.4vh 4vw; overflow: hidden; background: #244132; color: #f7f3e4; display: flex; flex-direction: column; justify-content: center; }
.welcome-eyebrow { font-size: 1.7vh; font-weight: 700; letter-spacing: .14em; }
.welcome-copy .welcome-eyebrow { color: #cedfbd; }
.welcome-copy h2 { font: 500 min(7.5vh,5.1vw)/1.12 "Bahnschrift", "Aptos", sans-serif; letter-spacing: -.04em; margin: 2.6vh 0; }
.welcome-copy p { font-size: min(2.55vh,1.8vw); line-height: 1.55; color: #dae6cb; margin: 0; }
.welcome-arrow { position: absolute; right: 3vw; bottom: 2vh; font: 300 12vh/1 "Bahnschrift", sans-serif; color: #f0ce85; }
.welcome-schedule { padding: 5.5vh 3.5vw; display: flex; flex-direction: column; justify-content: center; }
.welcome-schedule .welcome-eyebrow { color: #526748; }
.welcome-schedule h3 { font: 500 3.5vh/1.2 "Bahnschrift", "Aptos", sans-serif; margin: 1.8vh 0 .6vh; }
.welcome-schedule p { margin: 0; font-size: 1.9vh; color: #526748; }
.welcome-schedule dl { margin: 3vh 0 2vh; }
.welcome-schedule dl div { border-top: 1px solid #bfccb3; padding: 1.7vh 0; display: flex; justify-content: space-between; align-items: center; gap: 1vw; }
.welcome-schedule dt { font-size: 1.9vh; }
.welcome-schedule dd { font: 500 5vh/1 "Bahnschrift", "Aptos", sans-serif; font-variant-numeric: tabular-nums; margin: 0; }
.welcome-schedule .welcome-opening dd { color: #315b36; }
.welcome-schedule .welcome-countdown { font-size: 2.15vh; font-weight: 650; color: #244c30; margin: .6vh 0 2.1vh; }
.welcome-schedule .welcome-note { font-size: 1.6vh; line-height: 1.5; max-width: 33ch; }
@media(max-aspect-ratio:7/5) {
  .welcome-panel { grid-template-columns: 1fr; overflow: auto; }
  .welcome-copy { padding: 3vh 5vw; }
  .welcome-copy h2 { font-size: 5.5vw; }
  .welcome-copy p { font-size: 2.7vw; }
  .welcome-schedule { padding: 2.5vh 5vw; }
}

/* Arbitrary fictional codes can be longer than the original demo-01 fixture.
   Keep the target department prominent; never cut a worker code silently. */
.tv-worker[data-long="true"] { font-size: min(var(--worker-size),3.1vh); letter-spacing: -.035em; }
.board.hero .tv-worker[data-long="true"] { font-size: min(var(--worker-size),6vh); }
.board.large .tv-worker[data-long="true"] { font-size: min(var(--worker-size),4.6vh); }

/* At 11+ rows the board uses two columns. Widen the fictional-code cell:
   the original demo-01 width clips user-written 13–18 character examples. */
.board.medium .column-labels, .board.medium .tv-row,
.board.compact .column-labels, .board.compact .tv-row {
  grid-template-columns: 1.8fr .63fr 1fr .53fr;
  gap: .5vw;
}
.board.compact { --worker-size: 3.6vh; --target-size: 3.65vh; --source-size: 2.05vh; --point-size: 3.25vh; }
.board.compact .tv-worker[data-long="true"] { font-size: min(var(--worker-size),2.75vh); }
.board.compact .tv-row span { line-height: 1; }

/* v0.5: IB/OB lists, free-text meeting points and fitted cells. */
.context-bar { gap: 1.4vw; }
.side-status { display: flex; gap: .6vw; margin-left: auto; }
.side-chip { font-size: min(1.75vh,1.5vw); padding: .45vh .75vw; border-radius: .5vh; white-space: nowrap; font-variant-numeric: tabular-nums; }
.side-chip strong { font-weight: 800; letter-spacing: .04em; }
.side-chip.published { background: #d5e6d3; color: #1f4a2e; }
.side-chip.pending { background: #f3dcae; color: #6a4508; }
.column-labels, .tv-row { grid-template-columns: 1.1fr .7fr 1.2fr 1fr; }
.board.medium .column-labels, .board.medium .tv-row,
.board.compact .column-labels, .board.compact .tv-row { grid-template-columns: 1.3fr .55fr 1.05fr .95fr; gap: .5vw; }
.tv-row span { overflow: hidden; }
.tv-point.wrap { white-space: normal; overflow-wrap: anywhere; line-height: 1.02; }
.tv-point.none { color: #8a9a80; }

/* Fit the browser viewport, not the laptop used to build the application. */
.tv-app { grid-template-rows:minmax(28px,3vh) minmax(62px,11vh) auto minmax(0,1fr) auto; }
.demo-ribbon { min-width:0; flex-wrap:wrap; font-size:clamp(10px,1.4vh,24px); }
.demo-ribbon strong { font-size:clamp(10px,1.35vh,22px); }
.context-bar { display:grid; grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr); min-width:0; padding:.8vh 2.6vw; }
.context-bar>div:first-child { flex-wrap:wrap; gap:.2vh .8vw; min-width:0; }
.context-bar strong { font-size:clamp(11px,1.9vh,36px); }
#sosTime { font-size:clamp(10px,1.6vh,30px); }
.side-status { min-width:0; flex-wrap:wrap; gap:4px; }
.side-chip { font-size:clamp(10px,1.65vh,30px); }
.screen-scope { min-width:0; }
.screen-scope strong, #otherScreen { overflow-wrap:anywhere; text-align:right; }
.screen-scope strong { font-size:clamp(11px,1.85vh,34px); }
#otherScreen { font-size:clamp(10px,1.4vh,26px); }
#tvMain { flex-direction:column; gap:.6vh; }
.board { flex:1; }
.board-column { grid-template-rows:minmax(18px,3.2vh) minmax(0,1fr); }
.column-labels { font-size:clamp(9px,1.3vh,24px); letter-spacing:.02em; }
.column-labels span { min-width:0; }
.tv-row span { overflow:visible; }
.board.medium .column-labels,.board.medium .tv-row,.board.compact .column-labels,.board.compact .tv-row,.column-labels,.tv-row { grid-template-columns:1.5fr .85fr 1.1fr 1.05fr; gap:.6vw; }
.tv-footer { min-width:0; padding:.65vh 2.6vw; gap:.4vh; }
.instruction-line { min-height:3.2vh; }
.instruction-line strong { font-size:clamp(11px,2.05vh,39px); overflow-wrap:anywhere; }
.verification-line { font-size:clamp(9px,1.3vh,25px); }
.page-bar { display:flex; align-items:center; gap:.8vw; min-height:32px; padding:.4vh .6vw; background:#e8ecdf; color:#20382d; flex-wrap:wrap; }
.page-bar strong { font-size:clamp(11px,1.8vh,34px); flex:1; overflow-wrap:anywhere; }
.page-bar span { font-size:clamp(10px,1.3vh,25px); }
.page-bar button { font:inherit; font-size:clamp(10px,1.5vh,27px); background:#244132; color:#f7f3e4; border:0; padding:.6vh .8vw; min-height:28px; cursor:pointer; }
.page-bar button:focus-visible { outline:3px solid #a86a12; outline-offset:2px; }
@media(max-aspect-ratio:7/5) {
  .context-bar { grid-template-columns:1fr 1fr; gap:8px; }
  .context-bar>div:first-child { grid-column:1/-1; }
  .side-status { margin-left:0; }
  .tv-header { padding-block:1vh; }
  .lm-mark { padding-right:24px; }
  .lm-mark span { font-size:clamp(10px,1.45vw,22px); }
  .page-bar span { flex-basis:100%; text-align:center; order:4; }
  .tv-eyebrow { font-size:clamp(9px,1.55vw,20px); }
  .demo-ribbon>span:not(#previewFlag) { display:none; }
}

/* Keep the site label and draft-preview warning inside the ribbon. */
.demo-ribbon { flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
.demo-ribbon>span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.demo-ribbon>strong, .demo-ribbon>#previewFlag { flex-shrink:0; }