/* The whiteboard of the lessons (/learn): a slim marker-tray header, one slide stage, a slide tray footer.
   Deliberately light-only (a white board). Every class here starts with ln- because board.css owns .tip .warn .code .hint .empty .big .row .card.
   The look is the one of the teacher's whiteboard prompt; the code font is the board's own var(--mono) (no font is loaded from the internet). */
:root {
  color-scheme: light;
  --ln-board: #fbfcfd;
  --ln-ink: #1d2433;
  --ln-soft: #5b6478;
  --ln-rule: #dfe3ea;
  --ln-blue: #1f5fd1;      /* marker blue: titles, keywords */
  --ln-red: #d63a2f;       /* marker red: warnings, emphasis */
  --ln-green: #128a55;     /* marker green: output, correct */
  --ln-amber: #c27a00;     /* strings */
  --ln-purple: #7a3fc4;    /* builtins */
  --ln-code-bg: #f1f4f9;
  --ln-term-bg: #16202e;
  --ln-term-fg: #d7f5e3;
  --ln-hl: #fff2a8;
  --ln-code: var(--mono);
  --ln-s-title: clamp(28px, 3.6vw, 64px);
  --ln-s-body: clamp(17px, 1.75vw, 32px);
  --ln-s-code: clamp(15px, 1.55vw, 30px);
  --ln-s-small: clamp(12px, 0.95vw, 17px);
}
html { height: 100%; }
body.ln-body {
  height: 100%; background: var(--ln-board); color: var(--ln-ink); font-family: var(--font); line-height: 1.5;
  direction: rtl; overflow: hidden;
}
.ln-app { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
@supports (height: 100dvh) { .ln-app { height: 100dvh; } }

/* buttons: the board's global button look (44 px, thick border) is replaced by the slim one of the whiteboard */
.ln-btn {
  font: 600 var(--ln-s-small) var(--font); color: var(--ln-ink); background: transparent; border: 1.5px solid var(--ln-rule); border-radius: 8px;
  padding: 5px 11px; min-height: 0; cursor: pointer; display: inline-block; line-height: 1.5; white-space: nowrap;
}
.ln-btn:hover:not(:disabled) { background: transparent; border-color: var(--ln-soft); }
.ln-btn[aria-pressed="true"], .ln-btn[aria-pressed="true"]:hover:not(:disabled) { background: var(--ln-ink); color: var(--ln-board); border-color: var(--ln-ink); }
.ln-btn:focus-visible, .ln-dot:focus-visible, .ln-pen:focus-visible, .ln-les:focus-visible { outline: 3px solid var(--ln-blue); outline-offset: 2px; }

/* header */
.ln-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px clamp(16px, 2.4vw, 40px); border-bottom: 2px solid var(--ln-rule); }
.ln-home-link { font-size: var(--ln-s-small); color: var(--ln-soft); min-height: 40px; padding: 0 8px; order: 99; margin-inline-start: auto; }      /* the far left of the top line */
.ln-embed .ln-home-link { display: none; }
.ln-lesson { font-weight: 800; font-size: var(--ln-s-small); color: var(--ln-soft); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-lesson b { color: var(--ln-blue); }
.ln-live { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ln-s-small); color: var(--ln-soft); }
.ln-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--ln-rule); }
.ln-live.on i { background: var(--ln-green); box-shadow: 0 0 0 0 rgba(18, 138, 85, .5); animation: ln-pulse 2s infinite; }
@keyframes ln-pulse { 70% { box-shadow: 0 0 0 9px rgba(18, 138, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 138, 85, 0); } }
.ln-tools { display: flex; gap: 6px; align-items: center; }
.ln-pens { display: flex; gap: 5px; }
.ln-pen { width: 22px; height: 22px; min-height: 0; border-radius: 50%; border: 3px solid var(--ln-board); outline: 1.5px solid var(--ln-rule); cursor: pointer; padding: 0; }
.ln-pen-red { background: #d63a2f; }
.ln-pen-blue { background: #1f5fd1; }
.ln-pen-green { background: #128a55; }
.ln-pen:hover:not(:disabled) { background: inherit; }
.ln-pen-red:hover:not(:disabled) { background: #d63a2f; }
.ln-pen-blue:hover:not(:disabled) { background: #1f5fd1; }
.ln-pen-green:hover:not(:disabled) { background: #128a55; }
.ln-pen[aria-pressed="true"] { outline: 2.5px solid var(--ln-ink); }

/* stage */
.ln-stage { position: relative; min-height: 0; overflow: hidden; }
.ln-slide { height: 100%; overflow-y: auto; padding-block: clamp(18px, 3vh, 48px); padding-inline: clamp(16px, 5vw, 110px); }
.ln-fit { display: flex; flex-direction: column; gap: clamp(12px, 2.2vh, 30px); }      /* js sets its zoom so that a slide fits the screen (width >= 900) */
.ln-kicker { font-size: var(--ln-s-small); font-weight: 800; color: var(--ln-red); }
.ln-title { margin: 0; font-size: var(--ln-s-title); font-weight: 900; line-height: 1.25; text-wrap: balance; color: var(--ln-ink); }
.ln-title u { text-decoration: none; background: linear-gradient(transparent 62%, var(--ln-hl) 62%); }
.ln-blocks { display: flex; flex-direction: column; gap: clamp(12px, 2.2vh, 28px); }
.ln-blk { animation: ln-rise .45s both; }
@keyframes ln-rise { from { opacity: 0; transform: translateY(-10px); } }      /* drops into place: never pushes the end of the slide down, so a fitted slide shows no scroll bar while it appears */
@media (prefers-reduced-motion: reduce) { .ln-blk, .ln-live.on i { animation: none; } }

.ln-p { font-size: var(--ln-s-body); line-height: 1.9; margin: 0; max-width: 46ch; }
.ln-p strong, .ln-list strong, .ln-note strong, .ln-quiz strong { color: var(--ln-blue); }
.ln-i { font-family: var(--ln-code); font-size: .88em; background: var(--ln-code-bg); padding: .05em .35em; border-radius: 6px; direction: ltr; unicode-bidi: isolate; color: var(--ln-red); }
.ln-big { font-size: calc(var(--ln-s-title) * 1.15); font-weight: 900; line-height: 1.4; margin: 0; text-wrap: balance; }
.ln-big strong { color: var(--ln-red); }

.ln-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5em; font-size: var(--ln-s-body); line-height: 1.7; }
.ln-list li { display: grid; grid-template-columns: 1.4em 1fr; gap: .3em; }
.ln-list li::before { content: "✓"; color: var(--ln-green); font-weight: 900; }

.ln-code {
  direction: ltr; text-align: left; margin: 0; background: var(--ln-code-bg); border: 1.5px solid var(--ln-rule); border-radius: 14px;
  font-family: var(--ln-code); font-size: var(--ln-s-code); line-height: 1.65; padding: .8em 1em; overflow-x: auto; min-width: 0; counter-reset: ln;
}
.ln-code .ln-ln { display: block; padding-left: 2.6em; position: relative; white-space: pre; }
.ln-code .ln-ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 1.8em; text-align: right; color: #8993a6; font-size: .8em; line-height: 2.05; }
.ln-code .ln-ln.ln-mark { background: var(--ln-hl); border-radius: 4px; }
.ln-tk-kw { color: var(--ln-blue); font-weight: 700; }
.ln-tk-bi { color: var(--ln-purple); font-weight: 600; }
.ln-tk-str { color: var(--ln-amber); }
.ln-tk-num { color: var(--ln-red); font-weight: 600; }
.ln-tk-com { color: #7b8497; font-style: italic; }
.ln-tk-op { color: var(--ln-soft); }
.ln-tk-bool { color: var(--ln-red); font-weight: 700; }

.ln-term {
  direction: ltr; text-align: left; margin: 0; background: var(--ln-term-bg); color: var(--ln-term-fg); border-radius: 14px;
  font-family: var(--ln-code); font-size: var(--ln-s-code); line-height: 1.6; padding: .8em 1em; white-space: pre-wrap; overflow-x: auto; min-width: 0;
}
.ln-term::before { content: "خروجی ▸"; display: block; direction: rtl; text-align: right; font-family: var(--font); font-size: var(--ln-s-small); color: #8ea2bd; margin-bottom: .3em; }
.ln-cap { font-size: var(--ln-s-small); color: var(--ln-soft); margin-top: .4em; }

.ln-pair { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 28px); align-items: stretch; direction: ltr; }
.ln-pair > * { direction: rtl; min-width: 0; }
@media (max-width: 760px) { .ln-pair { grid-template-columns: 1fr; } }

/* memory boxes: a variable as a labelled box */
.ln-boxes { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 34px); direction: ltr; justify-content: flex-start; }
.ln-box { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.ln-box .ln-nm { font-family: var(--ln-code); font-weight: 700; font-size: var(--ln-s-code); color: var(--ln-blue); }
.ln-box .ln-vl {
  min-width: 4.2em; padding: .55em .9em; text-align: center; font-family: var(--ln-code); font-size: var(--ln-s-code); font-weight: 600;
  border: 3px solid var(--ln-ink); border-radius: 10px; background: #fff; box-shadow: 5px 5px 0 var(--ln-rule);
}
.ln-box .ln-ty { font-family: var(--ln-code); font-size: var(--ln-s-small); color: var(--ln-board); background: var(--ln-soft); padding: .1em .6em; border-radius: 99px; }
.ln-box.ln-t-str .ln-vl { color: var(--ln-amber); } .ln-box.ln-t-str .ln-ty { background: var(--ln-amber); }
.ln-box.ln-t-int .ln-vl, .ln-box.ln-t-float .ln-vl { color: var(--ln-red); } .ln-box.ln-t-int .ln-ty, .ln-box.ln-t-float .ln-ty { background: var(--ln-red); }
.ln-box.ln-t-bool .ln-vl { color: var(--ln-purple); } .ln-box.ln-t-bool .ln-ty { background: var(--ln-purple); }

.ln-note { font-size: var(--ln-s-body); line-height: 1.8; padding: .7em 1em; border-radius: 12px; border: 2px dashed; max-width: 52ch; }
.ln-note b.ln-h { display: block; font-size: var(--ln-s-small); margin-bottom: .2em; }
.ln-tip { border-color: var(--ln-green); } .ln-tip b.ln-h { color: var(--ln-green); }
.ln-warn { border-color: var(--ln-red); } .ln-warn b.ln-h { color: var(--ln-red); }

.ln-quiz { font-size: var(--ln-s-body); line-height: 1.8; border: 2.5px solid var(--ln-blue); border-radius: 14px; padding: .7em 1em; max-width: 56ch; }
.ln-quiz .ln-q b { color: var(--ln-blue); }
.ln-quiz .ln-btn { margin-top: .5em; display: flex; width: fit-content; margin-inline-start: auto; }      /* buttons sit on the left: the end of a right-to-left line */
.ln-quiz .ln-a { margin-top: .5em; color: var(--ln-green); font-weight: 700; }

.ln-table-wrap { overflow-x: auto; }
.ln-tbl { border-collapse: collapse; font-size: var(--ln-s-body); }
.ln-tbl th, .ln-tbl td { border-bottom: 1.5px solid var(--ln-rule); padding: .35em .9em; text-align: right; }
.ln-tbl th { color: var(--ln-soft); font-size: var(--ln-s-small); font-weight: 800; }
.ln-tbl td .ln-i { color: var(--ln-ink); background: transparent; padding: 0; }

/* empty state and the class-code panel */
.ln-empty { height: 100%; display: grid; place-content: center; text-align: center; gap: 14px; padding-inline: 16px; }
.ln-empty h2 { margin: 0; font-size: var(--ln-s-title); font-weight: 900; }
.ln-empty p { margin: 0; color: var(--ln-soft); font-size: var(--ln-s-body); }
.ln-join-slot { height: 100%; display: grid; place-items: center; padding: 16px; }
.ln-join-slot .join { width: min(34em, 100%); padding: 1.3em 1.6em 1.5em; border-radius: 1.2em; background: #fff; text-align: center; box-shadow: 0 16px 40px rgba(30, 40, 90, .16); font-size: var(--ln-s-body); }
.ln-join-slot .join h2 { margin: 0 0 .3em; font-size: 1.3em; line-height: 1.4; }
.ln-join-slot .join-lead { margin: 0 0 .9em; color: var(--ln-soft); font-size: .9em; line-height: 1.7; }
.ln-join-slot .join-form { display: flex; justify-content: center; gap: .6em; flex-wrap: wrap; }
.ln-join-slot .join-code { width: min(10em, 100%); font-size: 1.2em; text-align: center; font-family: var(--mono); letter-spacing: .12em; }
.ln-join-slot .join-error { margin: .6em 0 0; color: var(--bad); font-weight: 700; }

/* home: the lesson index, written like a numbered list on the board */
.ln-home { height: 100%; overflow-y: auto; padding-block: clamp(18px, 4vh, 56px); padding-inline: clamp(16px, 6vw, 130px); }
.ln-home > .ln-fit { gap: clamp(14px, 3vh, 36px); }
.ln-home-head { display: flex; flex-direction: column; gap: 6px; }
.ln-home-head .ln-title { font-size: calc(var(--ln-s-title) * 1.1); }
.ln-home-head p { margin: 0; color: var(--ln-soft); font-size: var(--ln-s-body); }
.ln-les-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ln-les {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.4vw, 40px);
  background: transparent; border: 0; border-bottom: 2px dashed var(--ln-rule); border-radius: 0; min-height: 0; padding: clamp(12px, 2.2vh, 26px) 4px;
  font-family: var(--font); font-weight: 400; color: var(--ln-ink); text-align: right; cursor: pointer;
}
.ln-les:hover:not(:disabled) { background: linear-gradient(90deg, transparent, var(--ln-code-bg)); }
.ln-les .ln-num { font-size: calc(var(--ln-s-title) * 1.35); font-weight: 900; color: var(--ln-blue); line-height: 1; min-width: 1.2em; text-align: center; }
.ln-les .ln-txt { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.ln-les .ln-nm { font-size: var(--ln-s-title); font-weight: 900; line-height: 1.3; }
.ln-les .ln-tp { font-size: var(--ln-s-small); color: var(--ln-soft); line-height: 1.7; }
.ln-les .ln-tp .ln-i { background: transparent; padding: 0; }
.ln-les .ln-go { font-size: var(--ln-s-small); color: var(--ln-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ln-les.ln-cur .ln-num { color: var(--ln-red); }
.ln-les.ln-cur .ln-go { color: var(--ln-red); font-weight: 800; }
@media (max-width: 640px) { .ln-les { grid-template-columns: auto minmax(0, 1fr); } .ln-les .ln-go { grid-column: 2; } }

canvas.ln-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.ln-stage.ln-drawing canvas.ln-ink { pointer-events: auto; cursor: crosshair; }

/* footer tray: the dots fill from the right (RTL); BOTH buttons sit together on the LEFT, «→ قبلی» to the right of «بعدی ←» */
.ln-tray { display: flex; align-items: center; gap: 12px; padding: 8px clamp(16px, 2.4vw, 40px); border-top: 2px solid var(--ln-rule); }
.ln-dots { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; min-width: 0; }
.ln-dot { position: relative; width: 26px; height: 8px; min-height: 0; border-radius: 99px; border: 0; background: var(--ln-rule); cursor: pointer; padding: 0; }
.ln-dot::after { content: ""; position: absolute; inset: -14px -2px; }
.ln-dot:hover:not(:disabled) { background: var(--ln-soft); }
.ln-dot.ln-on, .ln-dot.ln-on:hover:not(:disabled) { background: var(--ln-blue); width: 44px; }
.ln-count { font-size: var(--ln-s-small); color: var(--ln-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-hint { font-size: var(--ln-s-small); color: var(--ln-soft); }
.ln-nav { display: flex; gap: 8px; }
@media (max-width: 640px) {
  .ln-hint { display: none; }
  .ln-btn { min-height: 40px; }
  .ln-pen { width: 28px; height: 28px; }
  .ln-top { gap: 6px; flex-wrap: nowrap; padding-block: 6px; }      /* one row: the home icon, the title (cut with …), the live dot, the tools */
  .ln-lesson { flex: 1 1 0; }
  .ln-home-link { padding: 0 4px; order: 0; margin-inline-start: 0; }
  .ln-home-link span, .ln-live #liveTxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ln-live { gap: 0; }
  .ln-tools { gap: 4px; flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
  .ln-btn { padding: 4px 8px; }
  .ln-tray { flex-wrap: wrap; }
  .ln-dots { flex: 1 1 100%; }
  .ln-nav { margin-inline-start: auto; }
}

/* goals and exercises of a lesson; the index with many lessons (compact rows, the page scrolls) and the teacher's publish marks */
.ln-extras { display: flex; flex-wrap: wrap; gap: .4em 2em; margin-top: .4em; }
.ln-extras.ln-compact { font-size: var(--ln-s-small); color: var(--ln-soft); }
.ln-goals { font-size: var(--ln-s-body); line-height: 1.7; }
.ln-extras.ln-compact .ln-goals { font-size: inherit; line-height: 1.6; }
.ln-goals b { color: var(--ln-blue); font-size: var(--ln-s-small); }
.ln-goals ul { margin: .2em 0 0; padding: 0; list-style: none; }
.ln-goals li::before { content: "◂ "; color: var(--ln-green); }
.ln-ex li::before { content: "✎ "; color: var(--ln-purple); }
.ln-row { display: flex; align-items: center; gap: 12px; border-bottom: 2px dashed var(--ln-rule); }
.ln-row .ln-les { flex: 1 1 auto; min-width: 0; width: auto; border-bottom: 0; }
.ln-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ln-mark-pub { font-size: var(--ln-s-small); font-weight: 700; color: #5b3600; background: #fff1d6; border-radius: 99px; padding: 2px 12px; white-space: nowrap; }
.ln-mark-pub.ln-is-pub { color: #0b5a37; background: #dff3e8; }
.ln-many .ln-les { padding-block: clamp(6px, 1.2vh, 14px); gap: clamp(10px, 1.6vw, 24px); }
.ln-many .ln-num { font-size: calc(var(--ln-s-title) * .8); }
.ln-many .ln-nm { font-size: calc(var(--ln-s-title) * .65); }
@media (max-width: 640px) { .ln-row { flex-wrap: wrap; } .ln-acts { margin-inline-start: auto; } }
.ln-many .ln-goals li:nth-child(n+3) { display: none; }       /* a long index shows the first two goals of each lesson; the last slide of the lesson has them all */

/* a student's device follows the teacher: what it may not use is dimmed, and says so */
.ln-btn:disabled { opacity: .45; cursor: default; }
.ln-les:disabled { opacity: 1; cursor: default; }
.ln-dot:disabled { cursor: default; }
/* the projector shows this page in a frame (/learn?embed=1): no header of its own (the board's bar is above), only the controller's tools */
.ln-embed .ln-lesson { display: none; }
.ln-embed.ln-nohead .ln-top { display: none; }
.ln-embed .ln-top { justify-content: flex-end; padding-block: 4px; }
.ln-embed .ln-home, .ln-embed .ln-slide { scrollbar-width: none; }

.ln-join-slot .join-class { font: inherit; font-size: 1.05em; padding: .3em .7em; margin-inline-end: .6em; border: 2px solid var(--ln-rule); border-radius: 10px; background: #fff; color: var(--ln-ink); }