/* The projector: read from the back of a classroom. Everything is measured in --sz, which is 28 px on a full-HD screen (1920 px wide)
   and scales with the width of the picture (1366 px: 20 px), never below 18 px: the picture is the same, only smaller, so a 16:9
   projector at any resolution shows the same layout. Weights: 400 text, 500-600 labels, 700 headings. Fonts come from board.css (Vazirmatn).
   The road itself is drawn by journey.css. */

body.screen { --sz: clamp(20px, 1.4584vw, 44px); margin: 0; background: #e9eefb; font-size: var(--sz); line-height: 1.6; }
.screen-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }       /* the picture is exactly the screen: nothing scrolls, in a window or in full screen */

/* ---------- the bar: the day, the problem, the counts ---------- */
.screen-bar {
  position: relative; z-index: 5; display: grid; grid-template-columns: auto minmax(22%, 1fr) fit-content(52%); align-items: center; gap: calc(var(--sz) * .9);   /* the end of the bar (clock, counts, buttons) wraps before it eats the problem's title */
  padding: calc(var(--sz) * .25) calc(var(--sz) * 1.2); color: #fff; background: linear-gradient(100deg, #17267c 0%, #2740c9 62%, #3d5af0 100%);
  box-shadow: 0 6px 18px rgba(20, 30, 90, .28);
}
.screen-bar .brand { display: flex; align-items: baseline; gap: calc(var(--sz) * .7); white-space: nowrap; }   /* the name and the day never wrap: the framed clock takes its room from the title in the middle */
.screen-bar h1 { margin: 0; font-size: calc(var(--sz) * 1.2); font-weight: 700; line-height: 1.4; }
.screen-bar .date { margin: 0; font-size: var(--sz); line-height: 1.4; opacity: .92; }
.screen-bar .topic { min-width: 0; text-align: center; }
.topic-clock { flex: none; white-space: nowrap; padding: 2px 18px; border: 3px solid currentColor; border-radius: 16px; background: rgba(0, 0, 0, .18); font-size: calc(var(--sz) * 1.25); font-weight: 700; font-variant-numeric: tabular-nums; color: #ffe08a; line-height: 1.5; }   /* a frame of its own at the start of the bar's end: the time left is seen from the back of the room */
.topic-clock.soon { color: #ffb3b3; }
.topic-clock.over { color: #ff8a8a; }
.topic-clock[hidden] { display: none; }
.screen-bar .topic strong { display: block; font-size: calc(var(--sz) * 1.15); font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-bar .bar-end { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: calc(var(--sz) * .45); }
.counts { display: flex; gap: calc(var(--sz) * .45); }
.count-pill { display: inline-flex; align-items: baseline; gap: .35em; padding: 0 .65em; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: var(--sz); line-height: 1.5; white-space: nowrap; }
.count-pill b { font-size: 1.15em; font-weight: 700; }
.problem-toggle { min-height: 0; white-space: nowrap; padding: 0 .8em; border: 2px solid rgba(255, 255, 255, .7); border-radius: 999px; background: transparent; color: #fff; font-size: var(--sz); font-weight: 500; line-height: 1.5; }
.problem-toggle:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }

/* ---------- the road and under it the dock ---------- */
.road-view { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: calc(var(--sz) * .5) calc(var(--sz) * .9) calc(var(--sz) * .6); }
.class-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(var(--sz) * .45); min-height: 0; }
.road { flex: none; }

.dock { flex: 1 1 0; min-height: calc(var(--sz) * 5); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: calc(var(--sz) * .65); }
.dock.no-wall { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: calc(var(--sz) * .4) calc(var(--sz) * .75) calc(var(--sz) * .5); border-radius: calc(var(--sz) * .85); background: #fff; box-shadow: 0 8px 22px rgba(30, 40, 90, .12); }
.panel h2 { flex: none; margin: 0 0 calc(var(--sz) * .15); font-size: var(--sz); font-weight: 700; line-height: 1.5; }
.panel .count { color: var(--ink-2); font-weight: 400; }
.here-dot { display: inline-block; width: calc(var(--sz) * .5); height: calc(var(--sz) * .5); border-radius: 50%; background: #18a957; border: 2px solid #fff; box-shadow: 0 0 0 1px #9ac9ad; vertical-align: -1px; }
.feed, .seats, .here { list-style: none; margin: 0; padding: 0; }
.feed { flex: 1; min-height: 0; overflow: hidden; }
.feed-row { display: flex; align-items: center; gap: calc(var(--sz) * .45); padding: calc(var(--sz) * .1) 0; border-top: 1px solid #e6eaf6; font-size: var(--sz); line-height: 1.5; }
.feed-row:first-child { border-top: 0; }
.feed-row .av { --av: calc(var(--sz) * 1.2); }
.feed-icon { flex: none; font-size: calc(var(--sz) * 1.1); line-height: 1; }
.feed-text { flex: 1; min-width: 0; font-weight: 500; }
.feed-when { flex: none; color: var(--ink-2); white-space: nowrap; }
.feed-empty, .here-empty { color: var(--ink-2); }
.seats { display: flex; flex-wrap: wrap; gap: calc(var(--sz) * .25) calc(var(--sz) * .4); margin-bottom: calc(var(--sz) * .25); }
.seat { display: inline-flex; align-items: center; gap: calc(var(--sz) * .3); padding: 0 .6em 0 .25em; border: 2px dashed #b9c3e3; border-radius: calc(var(--sz) * .7); line-height: 1.5; }
.seat .av { --av: calc(var(--sz) * 1.15); }
.seat.taken { border-style: solid; border-color: var(--accent); background: var(--accent-wash); }
.seat-no { color: var(--ink-2); }
.seat.taken .seat-no { color: var(--accent-dark); font-weight: 600; }
.seat-who { font-weight: 600; }
.seat-free { color: var(--ink-2); }
.here { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: calc(var(--sz) * .3); overflow: hidden; }
.here-more { color: var(--ink-2); line-height: 1.5; padding: 0 .3em; }
/* not enough room for a face and a frame per person: the names, one after the other (screen.js asks for this look when it has to) */
.here.names { display: block; line-height: 1.6; }
.here.names .here-chip { display: inline; padding: 0; border: 0; border-radius: 0; background: none; }
.here.names .here-chip .av { display: none; }
.here.names .here-chip + .here-chip::before { content: "، "; font-weight: 400; }
.here.names .here-more { display: inline; padding: 0 .3em 0 0; }
.here-chip { display: inline-flex; align-items: center; gap: calc(var(--sz) * .3); padding: 0 .65em 0 .2em; border-radius: 999px; background: #e9f7ee; border: 2px solid #b6e1c4; font-weight: 600; line-height: 1.5; }
.here-chip .av { --av: calc(var(--sz) * 1.15); }

/* the class wall: the programs the teacher chose, one after the other */
.wall { flex: 1; min-height: 0; overflow: hidden; }
.wall-card { animation: wall-in .6s ease-out both; }
.wall-head { display: flex; align-items: center; gap: calc(var(--sz) * .35); margin-bottom: calc(var(--sz) * .15); line-height: 1.5; }
.wall-head .av { --av: calc(var(--sz) * 1.15); }
.wall-head strong { font-weight: 700; }
.wall-problem { color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-dots { display: inline-flex; gap: 6px; }
.wall-dots i { width: calc(var(--sz) * .35); height: calc(var(--sz) * .35); border-radius: 50%; background: #c9d1ea; }
.wall-dots i.on { background: var(--accent); }
.wall .codeview { max-height: none; font-size: var(--sz); line-height: 1.5; padding: 6px 0; }
.wall .codeview .cl-note { font-size: var(--sz); }
.wall .codeview .py { font-size: calc(var(--sz) * .8); }
@keyframes wall-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* a screen that is too low for the road and the whole dock: only a slim bar under the road (the newest event and how many are here);
   the feed, the people and the wall then get the whole stage now and then (screen.js: the class wall, every minute, twenty seconds) */
.class-body.slim-dock:not(.board) .dock { flex: none; min-height: 0; height: calc(var(--sz) * 2.3); grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--sz) * .5); }
.class-body.slim-dock:not(.board) .dock .wall-box { display: none; }
.class-body.bare:not(.board) .dock { display: none; }                      /* the last way out on a very low screen: the road alone */
.class-body.slim-dock:not(.board) .dock .panel { flex-direction: row; align-items: center; gap: calc(var(--sz) * .5); padding-block: 0; border-radius: calc(var(--sz) * .7); }
.class-body.slim-dock:not(.board) .dock .panel h2 { margin: 0; white-space: nowrap; }
.class-body.slim-dock:not(.board) .feed { flex: 1; min-width: 0; }
.class-body.slim-dock:not(.board) .feed-row:nth-child(n+2) { display: none; }
.class-body.slim-dock:not(.board) .feed-row { padding: 0; border: 0; }
.class-body.slim-dock:not(.board) .seats, .class-body.slim-dock:not(.board) .here { display: none; }
.class-body.board .road { display: none; }
.class-body.board .dock { flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: calc(var(--sz) * .8); }
.class-body.board .dock.no-wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.class-body.board .panel { padding: calc(var(--sz) * .6) calc(var(--sz) * .9); }
.class-body.board .feed-row { padding: calc(var(--sz) * .25) 0; }

/* ---------- the problem, big ---------- */
.learn-view { flex: 1 1 auto; min-height: 0; display: flex; }
.learn-view iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #fbfcfd; }
a.problem-toggle { display: inline-flex; align-items: center; text-decoration: none; }
.problem-view { flex: 1 1 auto; padding: calc(var(--sz) * .8) calc(var(--sz) * 1.4) calc(var(--sz) * 1.2); }
.problem-view .problem { max-width: calc(var(--sz) * 56); margin: 0 auto; padding: calc(var(--sz) * .9) calc(var(--sz) * 1.3); border-width: 4px; border-radius: calc(var(--sz) * 1); font-size: calc(var(--sz) * 1.1); line-height: 1.8; box-shadow: 0 12px 30px rgba(30, 40, 90, .14); }
.problem-view .problem h2 { font-size: calc(var(--sz) * 1.5); font-weight: 700; line-height: 1.5; margin-bottom: calc(var(--sz) * .2); }
.problem-view .concept { font-size: var(--sz); padding: 0 .6em; font-weight: 500; }
.problem-view .spec { gap: 6px calc(var(--sz) * .8); }
.problem-view .examples { grid-template-columns: repeat(auto-fit, minmax(calc(var(--sz) * 11), 1fr)); gap: calc(var(--sz) * .55); }
.problem-view .example h3 { font-size: var(--sz); padding: 4px 16px; }
.problem-view .example pre { font-size: var(--sz); padding: 8px 16px; }
.problem-view .example .label { font-size: var(--sz); }
.problem-view .hint { font-size: var(--sz); }

/* ---------- a program on the screen: the road shrinks to a strip ---------- */
.focus-view { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(var(--sz) * .5); padding: calc(var(--sz) * .45) calc(var(--sz) * .9) calc(var(--sz) * .9); }
.focus-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: calc(var(--sz) * .85); align-items: start; }
.focus-head { display: flex; align-items: center; gap: calc(var(--sz) * .65); margin-bottom: calc(var(--sz) * .4); }
.focus-head .av { --av: calc(var(--sz) * 2.8); }
.focus-who { margin: 0; font-size: calc(var(--sz) * 1.4); font-weight: 700; line-height: 1.4; }
.focus-problem { margin: 0; font-size: var(--sz); color: var(--ink-2); line-height: 1.5; }
.focus-wait { margin: calc(var(--sz) * .4) 0; padding: calc(var(--sz) * .7) calc(var(--sz) * .85); border-radius: calc(var(--sz) * .65); background: var(--accent-wash); font-size: var(--sz); font-weight: 600; }
.focus-code .codeview { max-height: none; padding: calc(var(--sz) * .5) 0; border-radius: calc(var(--sz) * .65); font-size: var(--sz); line-height: 1.6; box-shadow: 0 10px 26px rgba(15, 23, 48, .3); }
.focus-code .codeview .cl-note { font-size: var(--sz); line-height: 1.6; }
.focus-code .codeview .py { font-size: calc(var(--sz) * .8); }          /* the one thing smaller than the rest: Python's own words under a note, for whoever wants to read them */
.focus-side { display: grid; gap: calc(var(--sz) * .5); font-size: var(--sz); line-height: 1.7; }
.focus-img { width: 100%; max-height: 36vh; object-fit: contain; background: #0e1424; border-radius: calc(var(--sz) * .55); }
.focus-side .report { gap: calc(var(--sz) * .5); }
.focus-side .py-box, .focus-side .machine { padding: calc(var(--sz) * .4) calc(var(--sz) * .65); border-radius: calc(var(--sz) * .55); background: #fff; box-shadow: 0 6px 16px rgba(30, 40, 90, .1); }
.focus-side .py-box h3, .focus-side .machine h3 { font-size: var(--sz); font-weight: 700; }
.focus-side .closeness { font-size: var(--sz); }
.focus-side .meter-bar i { width: calc(var(--sz) * .45); height: calc(var(--sz) * .9); }
.focus-side .machine ul { font-size: var(--sz); }
.focus-side .machine .hint { font-size: var(--sz); }
.focus-side .notice { margin: 0; padding: calc(var(--sz) * .45) calc(var(--sz) * .7); border-radius: calc(var(--sz) * .55); font-size: var(--sz); font-weight: 600; }
.focus-side .cases code { font-size: var(--sz); white-space: normal; }
.focus-side .cases { display: flex; flex-wrap: wrap; gap: 0 calc(var(--sz) * 1.2); }          /* the tests one after the other, not one under the other */
.focus-side .cases li { gap: 0 calc(var(--sz) * .4); }
.focus-side .cases li > .hint:last-child { display: none; }                                  /* a hidden test is only «آزمون N ✅» */
.focus-side .report > .notice { order: -1; }                                                  /* the verdict first: it is what the class asks */
.focus-side.tight .focus-img { max-height: 20vh; }

/* ---------- not a member: the class code, once ---------- */
.join-slot { flex: 1 1 auto; display: grid; place-items: center; padding: calc(var(--sz) * 1); }
.join { width: min(calc(var(--sz) * 28), 100%); padding: calc(var(--sz) * 1.2) calc(var(--sz) * 1.5) calc(var(--sz) * 1.4); border-radius: calc(var(--sz) * 1.1); background: #fff; text-align: center; box-shadow: 0 16px 40px rgba(30, 40, 90, .16); }
.join h2 { margin: 0 0 calc(var(--sz) * .3); font-size: calc(var(--sz) * 1.3); font-weight: 700; line-height: 1.5; }
.join-lead { margin: 0 0 calc(var(--sz) * .8); color: var(--ink-2); font-size: var(--sz); line-height: 1.8; }
.join-form { display: flex; justify-content: center; gap: calc(var(--sz) * .5); }
.join-code { width: min(calc(var(--sz) * 13), 100%); font-size: calc(var(--sz) * 1.2); text-align: center; font-family: var(--mono); letter-spacing: .12em; }
.join .big { min-height: calc(var(--sz) * 2.2); font-size: var(--sz); }
.join-error { margin: calc(var(--sz) * .5) 0 0; color: var(--bad); font-size: var(--sz); font-weight: 600; }

@media (max-width: 1100px) {
  .screen-bar { grid-template-columns: minmax(0, 1fr); gap: 4px; text-align: center; }
  .screen-bar .brand, .counts, .bar-end { justify-content: center; flex-wrap: wrap; }
  .dock { grid-template-columns: minmax(0, 1fr); }
  .focus-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .wall-card { animation: none; } }

/* ---- the set strip under the topic: the open problems with their clocks ---- */
.set-strip { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 24px; background: linear-gradient(90deg, #2a2f9a, #3a3fd1); color: #fff; }   /* a row of its own under the bar: the open problems, their clocks and counts */
.set-strip[hidden] { display: none; }
.set-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 1.05rem; white-space: nowrap; }
.set-chip.on { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.set-chip.bonus { border: 1px dashed rgba(255, 255, 255, .6); }
.set-chip b { font-weight: 700; }
.set-clock { font-variant-numeric: tabular-nums; font-weight: 700; padding: 0 8px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 999px; }
.set-group, .set-count { opacity: .85; font-size: 1rem; }