/* The display of a station: output only. A student reads it from an arm's length to a metre away, so nothing here is small: the text is
   never under 20 px, and every size is a multiple of one number, --st, that grows with the width of the screen (21 px on a 1280 or 1366
   screen, 31 px on full HD). The page itself never scrolls: the bar and the person stay where they are, and the part below them scrolls
   only if the content is longer than the screen (a long problem, a program with many lines), with a soft shadow at the edge that says so. */

body.station-display { --st: clamp(21px, 1.6vw, 34px); --st-bg: #e9eefb; margin: 0; background: var(--st-bg); font-size: var(--st); line-height: 1.55; overflow: hidden; }
.st-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.st-bar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: .3em .9em; padding: .12em 1.3em; color: #fff;
  background: linear-gradient(100deg, #17267c 0%, #2740c9 62%, #3d5af0 100%); box-shadow: 0 6px 18px rgba(20, 30, 90, .28);
}
.st-badge { display: flex; align-items: baseline; gap: .5em; margin: 0; font-size: calc(var(--st) * 1.3); font-weight: 600; line-height: 1.2; }
.st-number { font-size: calc(var(--st) * 1.9); font-weight: 700; line-height: 1.1; color: #ffd45c; text-shadow: 0 0 .25em rgba(255, 212, 92, .9), 0 0 .7em rgba(255, 196, 51, .55); animation: st-glow 2.6s ease-in-out infinite alternate; }
@keyframes st-glow { from { text-shadow: 0 0 .2em rgba(255, 212, 92, .7), 0 0 .5em rgba(255, 196, 51, .35); } to { text-shadow: 0 0 .35em rgba(255, 212, 92, 1), 0 0 1em rgba(255, 196, 51, .7); } }
@media (prefers-reduced-motion: reduce) { .st-number { animation: none; } }
.st-class { margin: 0; font-size: calc(var(--st) * 1.1); font-weight: 700; color: #fff; white-space: nowrap; }
.st-class[hidden] { display: none; }
.st-topic { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: calc(var(--st) * 1.4); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-state { margin: 0; padding: 0 .8em; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: calc(var(--st) * 1.2); font-weight: 600; white-space: nowrap; }
.st-state:empty { display: none; }
/* the small way in: a person may also log in on this very computer */
.st-login { color: #fff; opacity: .88; font-size: var(--st); white-space: nowrap; }
.st-login:hover, .st-login:focus-visible { opacity: 1; }

/* the part under the bar that scrolls when it has to: the shadows are drawn by the background, no script is needed */
.st-grid, .st-idle .st-problem {
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background:
    linear-gradient(var(--st-bg) 30%, rgba(233, 238, 251, 0)) 0 0 / 100% 2.4em no-repeat local,
    linear-gradient(rgba(233, 238, 251, 0), var(--st-bg) 70%) 0 100% / 100% 2.4em no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(20, 30, 90, .3), rgba(20, 30, 90, 0)) 0 0 / 100% .7em no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(20, 30, 90, .3), rgba(20, 30, 90, 0)) 0 100% / 100% .7em no-repeat scroll;
}

/* ---------- the problem, as the shared card draws it, set in two columns when the screen is wide: the words on one side, the examples on the other ---------- */
.st-problem .problem { --pc: var(--st); margin: 0; padding: .45em 1.1em .5em; border-width: 3px; border-radius: 1em; font-size: var(--pc); line-height: 1.55; box-shadow: 0 8px 22px rgba(30, 40, 90, .1); }
.st-busy .st-problem .problem { --pc: max(20px, calc(var(--st) * .92)); }        /* beside a person's state the problem is a reference: a little smaller */
.st-problem .problem h2 { margin: 0 0 .1em; font-size: calc(var(--pc) * 1.45); line-height: 1.4; font-weight: 700; }
.st-problem code.inline { font-size: max(20px, .92em); }
.st-problem .statement, .st-problem .spec dd, .st-problem .hint { line-height: 1.7; }          /* DESIGN 11.2: paragraphs breathe */
.st-problem .concepts { margin-block: .1em .3em; }
.st-problem .concept { font-size: max(20px, .95em); padding: 0 .7em; font-weight: 600; }
.st-problem .spec { margin-block: .3em; }
.st-problem .spec dt { font-weight: 700; }
.st-problem .example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }          /* what is read and what is printed, side by side */
.st-problem .example h3 { grid-column: 1 / -1; padding: 0 .6em; font-size: max(20px, .95em); font-weight: 600; }
.st-problem .example pre + pre { border-inline-start: 1px solid var(--rule); }
.st-problem .example pre { padding: .1em .6em; font-size: 1em; unicode-bidi: plaintext; }        /* each line decides its own direction: a Latin line keeps its ! and . at the end */
.st-problem .example .label { font-size: max(20px, .9em); line-height: 1.4; }
.st-problem .hint { margin-block: .3em 0; font-size: max(20px, .92em); }
.pc-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 1.5em; align-items: start; }
.pc-cols .examples { grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); margin-block: .35em 0; }      /* side by side where the column is wide enough */
.pc-cols.stacked { grid-template-columns: minmax(0, 1fr); }              /* station.js picks this when it makes the card shorter */
@media (max-width: 999px) { .pc-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- free ---------- */
.st-idle { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .5em 1.4em .6em; }
.st-free { flex: none; margin: 0; font-size: calc(var(--st) * 1.85); line-height: 1.35; text-align: center; font-weight: 700; }
.st-no-problem { margin: 0; color: var(--ink-2); font-size: calc(var(--st) * 1.35); }
.st-idle .st-problem { flex: 1 1 0; min-height: 0; width: 100%; padding: .3em .2em .6em; }
.st-idle .st-problem .problem { max-width: 80em; margin: 0 auto; padding: .4em 1.3em .5em; border-width: 4px; border-radius: 1.1em; box-shadow: 0 12px 30px rgba(30, 40, 90, .14); }
.st-idle .st-problem .problem h2 { font-size: calc(var(--pc) * 1.6); }

/* ---------- taken ---------- */
.st-busy { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .45em; padding: .5em 1.3em .6em; }
/* the person: the face, the name and the title of the stop, and on the other side the way to the next stop */
.st-who {
  flex: none; display: grid; grid-template-columns: auto auto minmax(8em, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 1.1em;
  padding: .3em 1.1em; border-radius: 1.2em; background: #fff; box-shadow: 0 10px 26px rgba(30, 40, 90, .14);
}
.st-who .av { --av: calc(var(--st) * 3.5); box-shadow: 0 0 0 4px #fff, 0 0 0 8px #2740c9, 0 10px 24px rgba(20, 30, 90, .3); }
.st-id { display: contents; }
.st-face { grid-column: 1; grid-row: 1 / span 2; display: flex; padding: 8px; }
.st-name { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: calc(var(--st) * 2); line-height: 1.3; font-weight: 700; }
.st-title { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: calc(var(--st) * 1.25); line-height: 1.5; font-weight: 600; color: var(--accent-dark); }
.st-title-icon { font-size: .95em; display: inline-grid; place-items: center; vertical-align: middle; }
.st-title-icon .ic, .pbar-stop .ic { width: 1em; height: 1em; }
.st-bar-slot { grid-column: 3; grid-row: 1 / span 2; padding-inline-start: 1.2em; }

/* the way to the next stop: the emoji of the stop you are at, a bar, the emoji of the next one. No numbers. */
.pbar { display: flex; align-items: center; gap: .6em; }
.pbar-stop { flex: none; font-size: calc(var(--st) * 1.7); line-height: 1; display: inline-grid; place-items: center; color: var(--accent, #2740c9); }
.pbar-track { display: block; flex: 1; height: .9em; border-radius: 999px; background: #d9e0f5; overflow: hidden; box-shadow: inset 0 2px 5px rgba(20, 30, 90, .18); }
.pbar-fill { display: block; height: 100%; width: calc(var(--p, 0) * 1%); min-width: 1.1em; border-radius: 999px; background: linear-gradient(90deg, #ff7a00, #ffb400); box-shadow: 0 0 0 3px #fff inset; }
.pbar-done .pbar-fill { background: linear-gradient(90deg, #18a957, #7bd88f); }

/* under the person: the state of the newest try, or its report; and, while there is no report, the problem */
.st-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .5em; padding: .2em .15em .8em; }
.st-grid.has-report .st-problem { display: none; }          /* the problem is in the bar; the report gets the whole screen */
.st-busy .st-problem .problem > h2 { display: none; }       /* its title is in the bar already */
.st-main { display: grid; gap: .5em; min-width: 0; align-content: start; }

/* a try that has no report yet: one big line */
.st-banner { display: flex; align-items: center; gap: .8em; padding: .35em 1em; border-radius: 1.1em; background: #fff; border-inline-start: .45em solid var(--accent); box-shadow: 0 10px 26px rgba(30, 40, 90, .12); }
.st-banner-icon { flex: none; font-size: calc(var(--st) * 2.5); line-height: 1; }
.st-banner-text { margin: 0; font-size: calc(var(--st) * 1.75); line-height: 1.4; font-weight: 700; }
.st-banner-more { margin: 0; font-size: calc(var(--st) * 1.1); line-height: 1.7; color: var(--ink-2); }
.st-waiting { border-inline-start-color: #d98a00; }
.st-approved { border-inline-start-color: var(--accent); }
.st-returned { border-inline-start-color: var(--warn); }
.st-start { border-inline-start-color: #18a957; }

/* the report of a compiled program: Board.report, made big, in two columns: the program on one side, on the other what strict Python
   said, what the machine said and the verdict (the verdict first: it is what the person looks for) */
.st-main .report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: .5em 1em; align-items: start; font-size: var(--st); line-height: 1.55; }
.st-main .report > .codeview { grid-column: 1; grid-row: 1 / span 4; }
.st-main .report > :not(.codeview) { grid-column: 2; }
.st-main .report > .notice { order: -1; }
.st-main .report.st-wide { grid-template-columns: minmax(0, 1fr); }
.st-main .report.st-wide > * { grid-column: 1; }
.st-main .py-box, .st-main .machine, .st-main .coach { padding: .3em 1em .4em; border-radius: 1em; background: #fff; box-shadow: 0 8px 22px rgba(30, 40, 90, .1); }
.st-main .py-box h3, .st-main .machine h3, .st-main .coach h3 { font-size: calc(var(--st) * 1.1); font-weight: 700; line-height: 1.5; }
.st-main .closeness { font-size: calc(var(--st) * 1.15); font-weight: 700; }
.st-main .meter-bar i { width: .5em; height: 1.1em; }
.st-main .summary { margin: 0; font-size: var(--st); line-height: 1.7; }
.st-main .codeview { max-height: none; padding: .45em 0; border-radius: 1em; font-size: calc(var(--st) * 1.1); line-height: 1.55; box-shadow: 0 10px 26px rgba(15, 23, 48, .28); }
.st-main .codeview .cl-note { font-size: max(20px, .85em); line-height: 1.5; }
.st-main .codeview .py { font-size: max(20px, .8em); }
.st-main .machine p { margin: 0; line-height: 1.7; }
.st-main .machine ul { font-size: var(--st); }
.st-main .coach ul, .st-main .coach ol { font-size: var(--st); line-height: 1.7; }
.st-main .coach h4 { font-size: calc(var(--st) * 1.05); }
.st-main .coach .hint { font-size: max(20px, .9em); }
.st-main .machine .hint { font-size: max(20px, .9em); }
.st-main .cases { display: flex; flex-wrap: wrap; gap: .05em 1.2em; }
.st-main .cases li { gap: 0 .5em; }
.st-main .cases code { font-size: max(20px, .9em); white-space: normal; }
.st-main .notice { margin: 0; padding: .25em 1em; border-radius: .9em; font-size: calc(var(--st) * 1.2); font-weight: 700; }

.st-prev { padding: .15em 1em; border-radius: 1em; background: rgba(255, 255, 255, .75); }
.st-prev h3 { margin: 0; font-size: var(--st); font-weight: 600; color: var(--ink-2); }
.st-prev ul { margin: 0; padding: 0; list-style: none; }
.st-prev li { display: flex; align-items: center; gap: .6em; font-size: var(--st); line-height: 1.6; }
.st-prev-when { color: var(--ink-2); min-width: 4.5em; }

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

/* ---------- a low screen (1280x720 and the like): the same, with less air ---------- */
@media (max-height: 740px) {
  .st-bar { padding-block: 0; }
  .st-idle { gap: .15em; padding-top: .3em; }
  .st-free { font-size: calc(var(--st) * 1.7); }
  .st-busy { gap: .3em; padding-top: .35em; }
  .st-who { padding-block: .15em; }
  .st-who .av { --av: calc(var(--st) * 3.1); }
  .st-name { font-size: calc(var(--st) * 1.8); }
  .st-banner { padding-block: .2em; }
  .st-banner-icon { font-size: calc(var(--st) * 2.1); }
  .st-banner-text { font-size: calc(var(--st) * 1.55); }
  .st-start .st-banner-more, .st-waiting .st-banner-more, .st-approved .st-banner-more { display: none; }      /* the headline says it; only the reason of a returned try is always kept */
  .st-busy .st-problem .concepts { display: none; }               /* beside a person's state the problem keeps its words and examples; the topic chips are on the idle screen */
  .st-main .py-box, .st-main .machine { padding-block: .15em .25em; }
}
@media (max-height: 800px) {
  .st-main .cases li > .hint:last-child { display: none; }      /* a hidden test is only «آزمون N ✅»: the tests with an input are the ones that say more */
}
@media (max-width: 1100px) {
  .st-who { grid-template-columns: auto minmax(0, 1fr); }
  .st-bar-slot { grid-column: 1 / -1; grid-row: 3; padding-inline-start: 0; }
  .st-main .report { grid-template-columns: minmax(0, 1fr); }
  .st-main .report > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ---- the set: the other open problems, in the bar ---- */
.st-set { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font-size: .95rem; }
.st-set[hidden] { display: none; }
.st-set-chip { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.st-set-chip.on { background: rgba(255, 255, 255, .3); }