/* ---------------------------------------------------------------------------
   סאו סימפל — מרכז הלימודים
   Base stylesheet. Palette and font taken from the existing LearnWorlds site
   (see source-capture/CAPTURE_NOTES.md) so the new site keeps the same look.

   Two rules that are not negotiable here:
   1. Legibility over fashion — large type, strong contrast, no grey-on-grey.
   2. Meaning is never carried by red-vs-green alone. Shape, position and words
      do that work; colour only reinforces it.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Varela Round';
  src: url('/fonts/varela-round-hebrew.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Varela Round';
  src: url('/fonts/varela-round-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --purple: #694eff;
  --purple-dark: #4e24c3;
  --purple-soft: #8c77ff;
  --teal: #00d9c0;

  --ink: #151515;
  --ink-soft: #3d3d47;
  --paper: #ffffff;
  --paper-soft: #f7f7f9;
  --line: #dadae3;

  /* The edge of a CONTROL — a text field, a select, a box you can act on. It has to
     be its own colour because --line is far too faint to serve as one: at 1.39:1
     against white it is fine for a decorative rule between rows, and nowhere near the
     3:1 that WCAG 1.4.11 requires of anything telling you where a control begins.
     This is 3.38:1 on white and 3.16:1 on the soft band, so it holds on both. */
  --field-line: #8a8a9e;

  /* Orange = add/select, red = remove/stop. Darkened from #e2760b, which carried
     white text at 3.07:1 and failed AA for normal text; this is 4.59:1. Same hue, so
     the rule that orange means a constructive action is untouched. */
  --action: #b85c08;
  --stop: #d83232;

  --font: 'Varela Round', Arial, sans-serif;

  --wrap: 1100px;
  --radius: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 18px floor — this site is read by adults, not scanned by designers. */
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --- typography ---------------------------------------------------------- */

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 0.5em;
  font-weight: 400;
}

h1 {
  font-size: 2.4rem;
}
h2 {
  font-size: 1.8rem;
}
h3 {
  font-size: 1.35rem;
}

p {
  margin: 0 0 1em;
}

.lead {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

.eyebrow {
  font-size: 1rem;
  color: var(--purple-dark);
  margin-bottom: 0.4em;
}

a {
  color: var(--purple-dark);
}

a:hover {
  color: var(--purple);
}

/* Focus must always be obvious — keyboard users need to see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

/* On the purple bands the ring above is invisible — a purple outline on a purple
   background measures 1.0:1, and the hero is precisely where the buy button, the
   curriculum button and the nine taste tiles are. White instead: 5.08:1 at the light
   end of the band and 8.88:1 at the dark end. */
.hero-home a:focus-visible,
.hero-home button:focus-visible,
.section-purple a:focus-visible,
.section-purple button:focus-visible {
  outline-color: var(--paper);
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 100;
}

.skip-link:focus {
  inset-inline-start: 0;
}

/* --- header -------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

/* One row: the brand at the start edge, the menu at the far end.
   nowrap, deliberately. With wrapping allowed the menu — six items, one of them 27
   characters — no longer fitted beside a brand that is two lines tall, so the whole
   nav dropped to a line of its own. Kept on the row it belongs on; if it runs out of
   width, its own items wrap within it rather than the menu leaving the row. */
.header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
}

/* The line sits under the logo and centred on it, rather than beside it. Next to the
   logo it read as a second, competing wordmark; underneath it reads as what it is —
   a description of the place. */
.brand {
  font-size: 1.4rem;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.brand img {
  width: 150px;
  height: auto;
}

.brand-sub {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  /* Tighter than it was: seven items have to share the row with the logo. */
  gap: 4px 18px;
  /* Without this the items stretch to the tallest one and sit at its top edge, which
     is what left "יציאה" standing proud of the rest of the menu. */
  align-items: center;
  /* Takes the rest of the row and sits at its far end, away from the brand. */
  flex: 1 1 auto;
  justify-content: flex-end;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
  white-space: nowrap;
  /* 44px tall so it is a comfortable tap target on a phone. */
  padding: 10px 4px;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--purple);
}

/* The page you are on is marked for screen readers with aria-current; the underline
   is driven by that same attribute so the two can never disagree. */
.site-nav a[aria-current='page'] {
  border-bottom-color: var(--purple);
}

/* --- sections ------------------------------------------------------------ */

.hero {
  background: var(--paper-soft);
  padding-block: 64px;
}

.section {
  padding-block: 72px;
}

.notice {
  border: 2px solid var(--line);
  border-inline-start: 6px solid var(--purple);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--paper-soft);
}

.notice h2 {
  margin-top: 0;
}

.notice p:last-child {
  margin-bottom: 0;
}

/* --- buttons ------------------------------------------------------------- */

.cta-row {
  margin-top: 28px;
}

.btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
}

.btn-primary {
  background: var(--purple);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--purple-dark);
  color: var(--paper);
}

/* Sits on the dark footer. Dark text on teal, not white — white on teal is too weak. */
.btn-teal {
  background: var(--teal);
  color: var(--ink);
  text-decoration: none;
}

.btn-teal:hover {
  background: #00b8a3;
  color: var(--ink);
}

.btn-large {
  font-size: 1.25rem;
  padding: 20px 40px;
}

/* --- home page sections -------------------------------------------------- */

/* The hero deliberately carries no photograph. A flat brand-coloured field costs
   nothing to load, cannot be a licensing problem, and keeps the headline the
   loudest thing on the screen. */
/* The gradient used to finish on --purple-soft. That end was too light to carry text
   at all: white on it is 3.39:1, under the 4.5 AA asks of normal text, so no colour
   the paragraph could have been would have passed. Stopping at --purple instead puts
   the whole band at 5.08:1 or better for white, and it is still visibly a gradient —
   --purple-dark to --purple is a wide enough run. */
.hero-home {
  background: linear-gradient(160deg, var(--purple-dark) 0%, var(--purple) 100%);
  color: var(--paper);
  padding-block: 80px;
}

.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.hero-text {
  flex: 1 1 380px;
}

.hero-media {
  flex: 1 1 380px;
}

/* The still already carries its own title text, so it sits beside the headline
   rather than behind it — two sets of words on one image reads as a mistake. */
.hero-media img,
.hero-media .video-frame {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* --- click-to-play video ------------------------------------------------- */

/* The shape is pinned here rather than left to the file to announce.
   A <video> reports the shape of its poster until the real dimensions load, and then
   changes to the video's own — which is why the frame used to resize the instant
   playback began. Fixing the ratio means the box never moves, whatever loads. */
.video-frame {
  position: relative;
  overflow: hidden;
  line-height: 0;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* `cover` rather than the default `contain`: the poster and the clip are the same
   shape now, so there is nothing to letterbox, and cover means a stray pixel of
   rounding is cropped instead of showing as a black seam down one edge. */
.video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Covers the whole still, so a click anywhere on the picture starts the clip
   rather than only a click on the browser's own small play icon. */
.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-play svg {
  width: 88px;
  height: 88px;
}

.video-play circle {
  fill: rgba(255, 255, 255, 0.92);
}

.video-play path {
  fill: var(--purple-dark);
}

.video-play:hover circle {
  fill: #ffffff;
}

.video-play:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: -6px;
}

/* Once it is playing the overlay must get out of the way of the real controls. */
.is-playing .video-play {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 4.63:1 against the lightest point of the band behind it. #ede9ff, which was here
   before, came to 4.28:1 and missed. */
.hero-home .eyebrow,
.hero-home .lead {
  color: #f5f3ff;
}

.hero-home h1 {
  font-size: 3rem;
  max-width: 18ch;
}

.hero-home .btn-primary {
  background: var(--paper);
  color: var(--purple-dark);
}

.hero-home .btn-primary:hover {
  background: #f0edff;
  color: var(--purple-dark);
}

/* --- the tastes, inside the blue ------------------------------------------- */

.hero-tastes {
  margin-top: 44px;
}

/* Everything in here sits on the purple, so the text that was dark on white has to
   become light on colour — a lesson name in --ink on this background is unreadable. */
.hero-tastes .teaser-intro,
.hero-tastes .teaser-title {
  color: var(--paper);
}

/* Lifted from #ede9ff, which came to 4.28:1 on the purple and missed AA by a hair.
   White is the ceiling here at 5.08:1; this is 4.63:1, so it still reads as quieter
   than the lesson title above it while clearing the bar. */
.hero-tastes .teaser-dur {
  color: #f5f3ff;
}

/* Two buttons on a purple field: the sale is a solid white block, the curriculum an
   outline. Distinguished by weight rather than by hue, so the difference survives
   for anyone who does not separate these two colours. */
.hero-home .btn-secondary {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.75);
}

.hero-home .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--paper);
  border-color: var(--paper);
}

/* The arrows sit on colour here rather than on white, so they keep their own light
   background to stay findable. */
.hero-tastes .carousel-nav {
  border-color: rgba(255, 255, 255, 0.6);
}

/* The original page gave its section headings real vertical space. Matching that
   rhythm is most of what made it feel designed rather than typed. */
.section-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 48px;
}

/* "מה כלול בקורס?" is not a centred banner — it heads the first column, level with
   the icons of the other two, with the tick list running underneath it. */
.panel-title {
  text-align: start;
  font-size: 2.2rem;
  margin: 0 0 24px;
  line-height: 1.2;
}

.section-soft {
  background: var(--paper-soft);
}

.section-purple {
  background: var(--purple);
  color: var(--paper);
}

.section-purple h2,
.section-purple h3 {
  color: var(--paper);
}

/* --- student quotes ------------------------------------------------------ */

.quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.quote {
  background: var(--paper-soft);
  border-radius: var(--radius);
  border-top: 5px solid var(--purple);
  padding: 24px;
  text-align: center;
}

/* Held at 90px because the smallest of the four portraits is only 86 pixels
   wide — anything larger and that one turns to mush. */
.quote img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  background: var(--paper);
}

.quote blockquote {
  margin: 0;
  font-size: 1.05rem;
}

.quote blockquote::before {
  content: '”';
}

.quote blockquote::after {
  content: '“';
}

.quote-name {
  margin: 16px 0 0;
  color: var(--purple-dark);
}

/* --- the three panels ---------------------------------------------------- */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  /* Columns hang from a shared top line rather than stretching to equal height. */
  align-items: start;
}

.panel {
  text-align: center;
}

.panel-headless {
  text-align: start;
}

.panel-icon {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 12px;
}

/* The play triangle is the one filled shape in the set. */
.panel-icon path[d^='M20 19'] {
  fill: currentColor;
}

.panel h3 {
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.4em;
  margin-bottom: 0.9em;
}

.panel .ticks {
  text-align: start;
  display: inline-block;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticks li {
  position: relative;
  padding-inline-start: 32px;
  margin-bottom: 14px;
}

/* A tick drawn in text, not an icon font or an image — it survives with the page. */
.ticks li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  font-size: 1.2rem;
  line-height: 1.4;
}

/* --- curriculum ---------------------------------------------------------- */

.curriculum {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.chapter {
  display: flex;
  gap: 24px;
  padding-block: 28px;
  border-top: 2px solid var(--line);
}

.chapter-num {
  font-size: 2rem;
  color: var(--purple);
  min-width: 2.5ch;
  line-height: 1.2;
}

.chapter-body {
  flex: 1;
}

.chapter-body h3 {
  margin-bottom: 0.2em;
}

.chapter-meta {
  color: var(--purple-dark);
  margin-bottom: 0.6em;
}

/* On the course page the instructor follows a long list, so it needs the air a
   section break would have given it there. */
.instructor-heading {
  margin-top: 56px;
}

.chapter-body p:last-child {
  margin-bottom: 0;
  max-width: 72ch;
}

/* --- questions and answers ----------------------------------------------- */

.faq {
  margin: 0;
}

.faq dt {
  font-size: 1.25rem;
  color: var(--purple-dark);
  margin-top: 32px;
}

.faq dd {
  margin: 8px 0 0;
  max-width: 72ch;
}

/* --- instructor ---------------------------------------------------------- */

.instructor {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.instructor img {
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-soft);
}

.instructor-body {
  flex: 1 1 320px;
}

.instructor-body p {
  max-width: 72ch;
}

.closing-cta {
  text-align: center;
  padding-block: 52px;
}

.closing-cta .lead {
  margin-inline: auto;
}

/* --- forms ---------------------------------------------------------------- */

.wrap-narrow {
  max-width: 560px;
}

.form {
  margin-top: 32px;
}

.field {
  margin-bottom: 24px;
}

.field label {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: inherit;
  /* 1.05rem, not smaller: iOS zooms the whole page when a field is under 16px. */
  font-size: 1.05rem;
  padding: 14px 16px;
  /* --field-line, not --line: this edge is what tells you where the box you can type
     in starts, and that has a contrast floor of its own. See the palette. */
  border: 2px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  min-height: 48px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--purple);
}

.field-hint {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* The one-time question at the top of a student's course list. Marked out by an edge
   and a tint rather than shouted at, because it interrupts somebody who came here to
   watch a lesson. */
.consent-ask {
  border-inline-start: 8px solid var(--purple);
}

.consent-ask p {
  margin: 0 0 10px;
}

/* Two answers, side by side and equally reachable. "No" is not a smaller or fainter
   button than "yes" — a refusal that is harder to press than an agreement is not much
   of a choice. */
.consent-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 14px;
}

/* Confirmation that something was saved. Green is not doing the work — the words are;
   the tint only reinforces them, and the left edge gives it a shape that survives for
   anyone who does not separate the colour from the page. */
.notice-ok {
  border-inline-start: 8px solid var(--purple);
  background: var(--paper-soft);
}

/* Name and address on the account page: label above value, generous spacing. */
.detail-list {
  margin: 0 0 8px;
}

.detail-list dt {
  font-weight: 700;
  margin-top: 14px;
}

.detail-list dd {
  margin: 2px 0 0;
}

/* A form whose controls simply stack, with room to breathe between them. */
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* The one number that is the point of the panel it sits in. */
.stat-big {
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 4px 0 0;
  color: var(--purple-dark);
}

/* A row with nothing in it — a taste nobody pressed, a lesson a student never opened.
   Dimmed rather than hidden: the empty rows are half the reason to read the table, and
   never dimmed so far that the title stops being legible. 7.4:1 against white. */
.table tr.is-quiet td {
  color: #55555f;
}

/* The asterisk beside the course figures, and the note it points at.
   A link rather than a bare "*", so it can be reached and followed by keyboard and so
   a screen reader announces what it is for instead of reading a punctuation mark. The
   star itself is hidden from assistive technology; the words beside it do that job. */
.footnote-ref {
  text-decoration: none;
  font-size: 0.85em;
  vertical-align: super;
  line-height: 0;
  padding-inline: 2px;
  color: var(--purple-dark);
}

.footnote-ref:hover {
  text-decoration: underline;
}

/* This note lives in the FOOTER, which is near-black. It was written with --ink-soft,
   the grey used for secondary text on a white page — 1.7:1 against this background,
   which is not "quiet", it is unreadable, and it made the accessibility statement's
   claim that every colour was measured against its own background untrue.
   #c9c9d2 is 11.1:1 here, and is the same value .footer-note already used for exactly
   this job a few rules further down. */
.footnote {
  margin: 0 0 20px;
  font-size: 0.9rem;
  color: #c9c9d2;
  max-width: 70ch;
}

/* Following the asterisk lands on the note — a moment of highlight so it is obvious
   which line was being pointed at. Light-on-dark, for the same reason: the first
   version of this set a near-white background under light grey text and would have
   erased the sentence it was meant to point at. */
.footnote:target {
  background: #26262f;
  border-inline-start: 4px solid var(--teal);
  padding: 8px 12px;
}

/* The price reads as a sentence, at the same size as the words around it. It was set
   large at first; a figure three times the size of its own explanation shouts, and the
   explanation — including that the payment is by phone — is the half that answers the
   next question.

   Deliberately NOT .num. That class sets direction: ltr, which is right for a duration
   or a date but wrong here: it moved the ₪ to the right of the figure. Left in the
   page's own right-to-left flow, the number reads first and the sign falls to its
   left, which is how Hebrew writes it. */
.price-line {
  margin: 20px 0;
}

.price-figure {
  color: var(--purple-dark);
  white-space: nowrap;
}

.price-note {
  color: var(--ink-soft);
}

/* The invoice questions, grouped so it is obvious they belong together and that the
   whole block is optional. */
.invoice-fields {
  border: 2px solid var(--field-line);
  border-radius: var(--radius);
  padding: 16px 20px 20px;
  margin-block: 8px;
}

.invoice-fields legend {
  padding-inline: 8px;
  font-weight: 700;
}

.invoice-fields .field-check {
  margin-bottom: 8px;
}

.invoice-fields input[type='radio'] {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--purple);
}

/* The share beside the watched time. Quieter than the figure it qualifies, and still
   7.4:1 on white. */
.watch-share {
  color: #55555f;
  font-size: 0.85rem;
  white-space: nowrap;
}

.message-invoice {
  margin: 8px 0 0;
  font-size: 0.95rem;
}

/* "בקשת רכישה" at the head of an enquiry. Heavier and in the brand colour so it is
   caught while scanning — but the words say it too, so the colour is never carrying
   the meaning by itself. */
.message-kind {
  color: var(--purple-dark);
}

/* The consent line on an enquiry in the admin. Quiet, but not so quiet it is missed —
   it is an instruction about what may be sent to this person. */
.message-consent {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.message-consent-text {
  font-style: italic;
}

/* A tick box beside its sentence. The box is 22px rather than the browser's default
   13px: this is read and pressed by people in their sixties, and a consent nobody can
   hit is not much of a consent. The label is the same target — pressing the words
   ticks the box. */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.field-check input[type='checkbox'] {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--purple);
}

.field-check label {
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

/* Errors are announced by a border, an icon and words — never by colour alone. */
.form-error {
  border: 2px solid var(--stop);
  border-inline-start: 8px solid var(--stop);
  border-radius: var(--radius);
  background: #fff5f5;
  padding: 16px 20px;
  margin: 24px 0 0;
}

.form-error::before {
  content: '⚠ ';
}

.form-success {
  border: 2px solid var(--purple);
  border-inline-start: 8px solid var(--purple);
  border-radius: var(--radius);
  background: var(--paper-soft);
  padding: 16px 20px;
  margin: 24px 0 0;
}

.form-success::before {
  content: '✓ ';
}

.form-note {
  margin-top: 32px;
  color: var(--ink-soft);
}

.nav-logout {
  display: inline-flex;
  align-items: center;
}

/* A button does not inherit line-height the way a link does, so the same padding
   produced a different height and the word sat off the line the rest of the menu
   shares. Inheriting it makes the two identical. */
.nav-logout button {
  font-family: inherit;
  /* The same size as the links beside it — see .site-nav a. */
  font-size: 0.95rem;
  line-height: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 10px 4px;
  cursor: pointer;
}

.nav-logout button:hover {
  border-bottom-color: var(--purple);
}

/* --- admin ---------------------------------------------------------------- */

/* The admin runs tighter than the rest of the site. It is Jacki's own workspace and
   the tables need the width; the student-facing pages keep their generous sizes,
   because those are read by people who need them. Nothing here drops below 15px. */
.admin-page {
  font-size: 0.9rem;
}

.admin-page h1 {
  font-size: 1.85rem;
}

.admin-page h2 {
  font-size: 1.35rem;
}

.admin-page h3 {
  font-size: 1.1rem;
}

.admin-page .lead {
  font-size: 1rem;
}

.admin-page .section {
  padding-block: 32px;
}

.admin-page .table {
  font-size: 0.86rem;
}

.admin-page .table th,
.admin-page .table td {
  padding: 9px 10px;
}

.admin-page .field label {
  font-size: 0.95rem;
}

.admin-page .field input,
.admin-page .field select,
.admin-page .field textarea {
  font-size: 0.95rem;
  padding: 10px 12px;
  min-height: 42px;
}

.admin-page .link-button {
  font-size: 0.88rem;
  min-height: 38px;
}

.admin-page .pill {
  font-size: 0.78rem;
}

.admin-page .field-hint {
  font-size: 0.83rem;
}

.admin-header {
  border-bottom: 3px solid var(--purple);
  background: var(--paper-soft);
}

.tiles {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.tile {
  background: var(--paper-soft);
  border-radius: var(--radius);
  border-top: 5px solid var(--purple);
  padding: 24px;
}

.tile-number {
  font-size: 2.2rem;
  margin: 0;
  line-height: 1.1;
}

.tile-label {
  margin: 6px 0 0;
  color: var(--ink-soft);
}

.plain-list {
  padding-inline-start: 1.2em;
}

.plain-list li {
  margin-bottom: 10px;
}

.form-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 24px;
  align-items: start;
  background: var(--paper-soft);
  border-radius: var(--radius);
  padding: 24px;
}

.field-wide {
  grid-column: 1 / -1;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
}

.checkbox input {
  width: 22px;
  height: 22px;
}

/* Orange for the constructive action, per Jacki's rule. Red is only ever removal. */
.btn-action {
  background: var(--action);
  color: var(--paper);
}

/* Darker than the base, which is now #b85c08 — hover has to keep going the same way
   it always did. 5.99:1 with white on it. */
.btn-action:hover {
  background: #9c4e05;
  color: var(--paper);
}

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.table-scroll {
  overflow-x: auto;
  margin-bottom: 40px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.table th,
.table td {
  text-align: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table th {
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

/* A frozen row is marked by a bar and by the word "מוקפא", never by colour alone. */
.row-frozen {
  background: #f2f2f5;
}

.row-frozen td:first-child {
  border-inline-start: 5px solid var(--ink-soft);
}

/* The actions on a row of the people list.
   Only the common one — freeze — sits out here. Everything else folds into the
   disclosure beside it, because the row used to carry three open forms at once: two
   text fields and a checkbox on every line, for actions done perhaps once a week, in
   a list that is read every day. That is what made it five lines tall and pushed the
   table into sideways scrolling. */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.row-more summary {
  cursor: pointer;
  padding: 4px 2px;
  color: var(--purple-dark);
  white-space: nowrap;
}

.row-more summary:hover {
  text-decoration: underline;
}

/* Focus has to be visible on a summary as on anything else reachable by keyboard. */
.row-more summary:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

/* Opens under the row's own cell. Enough width for a small field and its button on
   one line, so the panel reads as three short rows rather than a tangle. */
.row-more-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0 4px;
  min-width: 250px;
}

/* Labels inside the panel: small, above nothing — each form is one line. */
.row-more-panel label:not(.confirm-check) {
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.inline-password {
  display: flex;
  gap: 6px;
  align-items: center;
}

.inline-password input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 8px 10px;
  border: 2px solid var(--field-line);
  border-radius: 8px;
  width: 150px;
}

/* Editing a name in the row it belongs to, rather than on a screen of its own. */
.inline-name {
  display: flex;
  gap: 6px;
  align-items: center;
}

.inline-name input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 8px 10px;
  border: 2px solid var(--field-line);
  border-radius: 8px;
  width: 14ch;
  min-width: 0;
}

.link-button {
  font-family: inherit;
  font-size: 0.98rem;
  background: none;
  border: 0;
  padding: 8px 4px;
  color: var(--purple-dark);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}

.link-button.danger {
  color: var(--stop);
}

.pill {
  display: inline-block;
  font-size: 0.85rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  white-space: nowrap;
}

.pill-ok {
  border-color: var(--purple);
  color: var(--purple-dark);
}

/* Latin text — file names, email addresses — reads left to right but still sits at
   the start edge of its cell, which in an RTL table is the right. */
.ltr {
  direction: ltr;
  text-align: right;
}

/* Numbers and durations pushed hard against the right edge, so the columns take only
   the width they need instead of the width the header does.
   Written as .table .num because the plain `.table td` rule above is more specific
   than a bare class and would otherwise win. */
.table .num,
.num {
  direction: ltr;
  text-align: right;
  white-space: nowrap;
}

/* Control columns hold one icon or one small box — never let them stretch. */
.col-control {
  width: 1%;
  white-space: nowrap;
}

.chapter-heading {
  margin-top: 48px;
  padding-top: 12px;
  border-top: 2px solid var(--line);
}

/* After an upload the server sends you back to the row you were on. Without this the
   browser parks that row flush against the top edge, which reads as if the page had
   jumped somewhere unrelated. */
.media-table tr[id],
.chapter-heading[id] {
  scroll-margin-top: 90px;
}

/* And the row you were returned to is marked, so it is obvious which one just changed. */
.media-table tr:target {
  background: #fff3e4;
  outline: 2px solid var(--action);
}

/* Drop a file on it, or click it to open the picker — the same target does both. */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  min-width: 170px;
}

.dropzone label {
  display: block;
  padding: 14px 12px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}

.dropzone-browse {
  color: var(--purple-dark);
  text-decoration: underline;
}

/* While a file is held over it. Thicker border and a filled background, so the
   change is visible without relying on the colour shift alone. */
.dropzone.is-over {
  border-style: solid;
  border-color: var(--action);
  background: #fff3e4;
}

.dropzone.is-over label {
  color: var(--ink);
}

/* The input is visually hidden, so its focus ring has to be drawn on the box. */
.dropzone input:focus-visible + label {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.upload-status {
  display: block;
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.upload-status.is-ok {
  color: var(--purple-dark);
}

.upload-status.is-error {
  color: var(--stop);
}

/* Icon only, so the column stays narrow. What it means and what a click does live in
   the hover text and in the label a screen reader reads — a padlock and a globe are
   different enough in shape to tell apart at a glance. */
.visibility-form {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The icon IS the control. Sized as a proper 44px target, not a decoration. */
.icon-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: var(--paper);
  border: 2px solid var(--field-line);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-toggle svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-toggle:hover {
  border-color: var(--purple);
  background: var(--paper-soft);
}

/* Replace-this-file. Orange, because it is the constructive action that puts a new
   file in — red is kept for removal, and nothing here removes anything. */
.icon-redo {
  width: 38px;
  height: 38px;
  padding: 7px;
  vertical-align: middle;
}

.icon-redo svg {
  stroke: var(--action);
  stroke-width: 2.2;
}

.icon-redo:hover {
  border-color: var(--action);
  background: #fff3e4;
}

.icon-redo:hover svg {
  stroke: #9c4e05;
}

.icon-toggle:hover svg {
  stroke: var(--purple-dark);
}

.file-meta {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* File names run long and are usually Latin — let them wrap rather than stretch
   the table sideways. */
.file-name {
  display: inline-block;
  max-width: 260px;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}

.is-hidden {
  display: none;
}

/* --- watching a lesson from the admin screen ------------------------------ */

/* A lesson title that plays. Styled as a link, but it is a button, because it acts
   rather than navigates. */
.lesson-preview {
  font-family: inherit;
  font-size: inherit;
  text-align: start;
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--purple-dark);
  text-decoration: underline;
  cursor: pointer;
}

.lesson-preview:hover {
  color: var(--purple);
}

.preview {
  width: min(900px, 92vw);
  border: 0;
  border-radius: var(--radius);
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
}

.preview::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.preview-head h2 {
  font-size: 1.3rem;
  margin: 0;
}

.preview-close {
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  background: none;
  border: 2px solid var(--field-line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}

.preview-close:hover {
  border-color: var(--stop);
  color: var(--stop);
}

.preview-meta {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 4px 0 14px;
}

.preview video {
  width: 100%;
  height: auto;
  max-height: 65vh;
  display: block;
  border-radius: var(--radius);
  background: #000;
}

/* The small drop boxes beside subtitles and chapter booklets. Same behaviour as the
   video box — drag or click — just less of it. */
.dropzone-sm {
  min-width: 130px;
}

.dropzone-sm label {
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.chapter-pdf-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  background: var(--paper-soft);
  border-radius: var(--radius);
  border-inline-start: 6px solid var(--purple);
  padding: 16px 20px;
  margin: -20px 0 40px;
}

.chapter-pdf-label {
  font-size: 1.05rem;
}

.chapter-pdf-note {
  flex-basis: 100%;
  margin: 0;
}

/* --- the course area ------------------------------------------------------ */

.lesson-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

/* --- a row in a chapter, whatever kind of thing it is ---------------------- */
/*
   One shape for all of them — lesson, exam, exercise, worksheet, booklet. The old
   site's chapter list was readable because every row began at the same place with an
   icon saying what it was; ours had three different layouts stacked in one chapter,
   and the kind was spelled out in a grey label after each title.

   A grid, not a flex row: the icons, the figures and the titles line up down the whole
   chapter instead of each row placing them wherever the one above it happened to end.
   The middle column is kept even when a row has nothing to put in it, because that is
   what holds the titles on one line.
*/
.course-row {
  display: grid;
  grid-template-columns: 28px 6ch minmax(200px, 1fr) 164px;
  align-items: center;
  gap: 8px 14px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

/* All one colour and one weight. Which row is which is said by the shape — nothing
   here is allowed to depend on telling two colours apart. */
.row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

.row-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* The length of a lesson, or how many questions an exam holds. Small and quiet: it is
   there to be found, not read. */
.row-figure {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.row-title {
  font-size: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/* Where the student's own standing on that row goes: how far into a lesson they got,
   or the deadline they are working to. Far from the icon column on purpose. */
.row-status {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

/* Drawn once at the top of the page and referenced by every row — see
   views/partials/icon-sprite.ejs. It must take up no space itself. */
.icon-sprite {
  display: none;
}

/* A visitor's list keeps its own layout: pictures of the lessons instead of an icon
   column, and no last column, because there is no progress to show somebody who has
   not started. */
.lesson-row {
  display: grid;
  grid-template-columns: 3ch minmax(200px, 1fr) 6ch 164px;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

/* A visitor's row: the picture takes the place the number had, and the last column
   goes with it — there is no progress to show somebody who has not started. */
.lesson-row-guest {
  grid-template-columns: 164px minmax(200px, 1fr) 6ch;
}

.lesson-thumb {
  display: flex;
  align-items: center;
}

.lesson-title {
  font-size: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Same size as the progress text beside it — two sets of numbers on one row should
   not be two different sizes. */
.lesson-meta {
  color: var(--ink-soft);
  font-size: 1rem;
}

/* --- how far the student got ---------------------------------------------- */

.lesson-progress {
  display: flex;
  align-items: center;
}

/* The bar runs left to right even though the page is RTL. A progress bar is read as a
   filling vessel rather than as text, and every player and download meter fills from
   the left — following the text direction here would read as draining. */
.progress {
  display: block;
  width: 120px;
  direction: ltr;
}

.progress-bar {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  background: var(--purple);
  border-radius: 4px 0 0 4px;
}

/* Sits directly under the end of the filled part: the number and the bar mark the same
   point, so the eye reads one thing rather than two. */
.progress-mark {
  display: block;
  text-align: right;
  white-space: nowrap;
  line-height: 1.2;
}

.progress-time {
  font-size: 0.8rem;
  color: var(--ink-soft);
  /* Centred on the end of the fill rather than hanging to its left. */
  display: inline-block;
  transform: translateX(50%);
}

.progress-time.is-done {
  color: var(--purple-dark);
  /* At 100% the label would sit half outside the bar, so it stays put. */
  transform: none;
}

.resume-note {
  background: var(--paper-soft);
  border-inline-start: 6px solid var(--purple);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin: 24px 0 0;
}

/* --- the course list as a stranger sees it -------------------------------- */

.chapter-blurb {
  max-width: 72ch;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.lock {
  font-size: 0.9em;
}

/* A frame from the lesson, with a play mark over it. A picture of the actual slide
   says far more than the word "טעימה" ever could, and a column of them reads as a
   real course rather than a list of titles. */
.taste-thumb {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  width: 160px;
}

.taste-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.taste-thumb:hover {
  border-color: var(--purple);
}

.taste-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.taste-play svg {
  width: 40px;
  height: 40px;
}

.taste-play circle {
  fill: rgba(0, 0, 0, 0.5);
}

.taste-play path {
  fill: #ffffff;
}

.taste-thumb:hover .taste-play circle {
  fill: var(--purple-dark);
}

.taste-thumb.is-playing {
  border-color: var(--purple);
}

.taste-thumb.is-playing .taste-play {
  display: none;
}

/* The teaser opens directly beneath the lesson it belongs to. */
.taste-panel {
  margin: 0 0 16px;
  padding: 16px;
  background: var(--paper-soft);
  border-radius: var(--radius);
  border-inline-start: 6px solid var(--purple);
  max-width: 640px;
}

.taste-panel video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: #000;
}

.taste-note {
  margin: 12px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.taste-error {
  border-inline-start-color: var(--stop);
}

.enrol {
  margin-top: 48px;
  text-align: center;
}

.enrol .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.chapter-summary {
  margin: 8px 0 40px;
}

.btn-secondary {
  background: var(--paper);
  color: var(--purple-dark);
  border-color: var(--purple);
}

.btn-secondary:hover {
  background: var(--paper-soft);
  color: var(--purple-dark);
}

.lesson-breadcrumb {
  color: var(--ink-soft);
}

.lesson-video {
  margin: 24px 0;
  max-width: 900px;
}

.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid var(--line);
}

.lesson-nav-link {
  display: block;
  max-width: 45%;
  text-decoration: none;
}

.lesson-nav-next {
  text-align: end;
}

.lesson-nav-label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.lesson-nav-title {
  display: block;
  color: var(--purple-dark);
  text-decoration: underline;
}

/* Subtitles: large enough to read from across a room, and never thin grey text. */
video::cue {
  font-family: var(--font);
  font-size: 1.05em;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
}

/* --- article pages ------------------------------------------------------- */

/* The text pages: about, terms, privacy, accessibility. Measured line length,
   clear separation between clauses — these are long documents and people
   actually have to read them. */
.article {
  padding-block: 48px;
}

.article h1 {
  margin-bottom: 0.6em;
}

.article h2 {
  margin-top: 1.8em;
  padding-top: 0.4em;
  border-top: 2px solid var(--line);
  color: var(--purple-dark);
}

.article h3 {
  margin-top: 1.4em;
  color: var(--purple-dark);
}

.article h1 + p,
.article h2 + p,
.article h3 + p {
  margin-top: 0;
}

.article p {
  max-width: 72ch;
}

.article .lead {
  max-width: 60ch;
}

/* --- team ---------------------------------------------------------------- */

.team {
  list-style: none;
  margin: 40px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.team-member {
  background: var(--paper-soft);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  flex: 1 1 240px;
  max-width: 320px;
}

.team-member img {
  width: 180px;
  height: 180px;
  max-width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.team-name {
  margin: 16px 0 0;
  font-size: 1.15rem;
}

/* --- footer -------------------------------------------------------------- */

.site-footer {
  /* No top margin. The last section on every page already ends with its own padding,
     and adding to it left a band of bare page colour above the footer. */
  padding-block: 40px;
  background: var(--ink);
  color: var(--paper);
}

/* No max-width. The 60ch cap was what broke this sentence across two lines; it now
   takes the width it needs and wraps only when the screen genuinely cannot hold it.
   Smaller than body text, because it sits with the copyright rather than above the
   footer as it used to. 15.6:1 on the footer's near-black. */
.footer-about {
  color: #e3e3ea;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.footer-heading {
  font-size: 1.15rem;
  margin-bottom: 0.6em;
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.site-footer a {
  color: var(--paper);
  text-decoration: underline;
  padding-block: 6px;
}

.site-footer a:hover {
  color: var(--teal);
}

/* The one thing in the footer that asks for something, and now the first thing in it.
   It used to sit between the links and the copyright with a rule above it — that rule
   is gone, because a line drawn above the first element in a block rules off nothing.

   Marked out as a panel rather than shouted: a slightly lifted background and a teal
   edge on the reading side. The panel is only 1.16:1 against the footer, which is
   fine — it is not carrying information, the border and the button do that, and the
   text on it stays at 15.8:1. */
.footer-cta {
  margin-bottom: 36px;
  padding: 24px 28px;
  background: #22222b;
  border-radius: var(--radius);
  border-inline-start: 5px solid var(--teal);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}

.footer-cta p {
  margin: 0;
  max-width: 52ch;
  font-size: 1.1rem;
}

.footer-cta a {
  text-decoration: none;
}

.footer-note {
  color: #c9c9d2;
  margin: 28px 0 0;
}

/* --- narrower screens ---------------------------------------------------- */

/* iPad portrait and below */
@media (max-width: 820px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.6rem;
  }
  .hero {
    padding-block: 48px;
  }
  .hero-home h1 {
    font-size: 2.3rem;
  }
  .hero-home {
    padding-block: 56px;
  }
}

/* Phones */
@media (max-width: 560px) {
  html {
    font-size: 17px;
  }
  h1 {
    font-size: 1.75rem;
  }
  .hero-home h1 {
    font-size: 1.9rem;
    max-width: none;
  }
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Stacked, so the menu no longer has a row to share — it starts at the near edge
     under the logo and takes only the height it needs. */
  .site-nav {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .brand img {
    width: 130px;
  }
  /* The frame still has to be visible, but 24px each side is a lot of a phone. */
  .tastes-panel {
    padding: 16px;
  }
  .btn {
    display: block;
    text-align: center;
  }
  .btn-large {
    font-size: 1.15rem;
    padding: 18px 24px;
  }
  /* The chapter number moves above its title rather than squeezing the text
     into a narrow column beside it. */
  .chapter {
    flex-direction: column;
    gap: 4px;
  }
  .chapter-num {
    font-size: 1.5rem;
  }
  .instructor img {
    width: 150px;
    height: 150px;
  }
  /* Too narrow for four columns: the title takes the width it needs, and the
     duration and progress sit together on a line beneath it. */
  .lesson-row {
    grid-template-columns: 3ch 1fr;
    gap: 6px 12px;
  }
  .lesson-meta,
  .lesson-progress {
    grid-column: 2;
    justify-content: flex-start;
  }
  /* The same on a student's rows: the icon keeps its column — it is the thing that
     makes the chapter readable — and the rest stacks beside it.

     Every cell is placed by hand rather than left to the browser. With only some of
     them pinned to the second column the title falls into the first, underneath the
     icon. The title goes on the top line next to the icon so a document, which has no
     figure and no status, is still one tidy line. */
  .course-row {
    grid-template-columns: 28px 1fr;
    gap: 4px 12px;
  }
  .row-icon {
    grid-area: 1 / 1;
  }
  .row-title {
    grid-area: 1 / 2;
  }
  .row-figure {
    grid-area: 2 / 2;
  }
  .row-status {
    grid-area: 3 / 2;
    justify-content: flex-start;
  }
  /* On a phone the picture keeps its own column but a narrower one, so the title
     still has room to be read rather than wrapping a word at a time. */
  .lesson-row-guest {
    grid-template-columns: 116px 1fr;
  }
  /* Four video tiles across a phone would be postage stamps. One at a time, and the
     arrows stay useful because there is always somewhere to scroll to. */
  .carousel-item {
    flex-basis: 86%;
  }
  .carousel-nav {
    display: none !important;
  }
  /* A 200px picture beside a Hebrew title leaves the title a word per line. The
     picture goes above it instead. */
  .story-card {
    flex-direction: column;
    gap: 14px;
  }
  .story-thumb {
    width: 100%;
  }
  .story-thumb img {
    height: 180px;
  }
  .lesson-row-guest .taste-thumb img {
    width: 116px;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* --- quizzes, exercises and exams ------------------------------------------
   Two screens: the student's, which is mostly reading, and the admin's, which is
   mostly forms. Every destructive control here is guarded by a checkbox rather
   than by a JavaScript confirm box — it works with no script at all, it can be
   reached by keyboard, and the label says what is about to happen. */

/* Wider than a form, narrower than a table. Questions are read, not scanned. */
.wrap-reading {
  max-width: 760px;
}

/* --- the student's page --- */

.assignment-intro {
  font-size: 1.1rem;
  line-height: 1.8;
  white-space: pre-line; /* the admin types plain paragraphs, not HTML */
  margin-bottom: 28px;
}

.assignment-questions {
  font-size: 1.1rem;
  line-height: 1.8;
  padding-inline-start: 1.4em;
}

.assignment-questions li {
  margin-bottom: 20px;
  white-space: pre-line;
}

/* The deadline is the one thing on this page that must be impossible to miss, so
   it gets size and a heavy edge — never colour alone. */
.deadline {
  border: 2px solid var(--line);
  border-inline-start: 8px solid var(--purple);
  border-radius: var(--radius);
  background: var(--paper-soft);
  padding: 18px 22px;
  margin-bottom: 28px;
}

.deadline-main {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.deadline-sub {
  margin: 0;
  color: var(--ink-soft);
}

/* Time gone: a different edge weight and the words say so. The colour is the last
   of the three signals, not the only one. */
.deadline.is-past {
  border-inline-start-color: var(--stop);
  border-inline-start-width: 12px;
}

.reveal-form {
  margin-top: 24px;
}

/* The admin's preview shows the real control, switched off — a gap where the button
   should be would not tell them what the student meets. */
.reveal-form button[disabled] {
  background: var(--line);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.confirm-check input[disabled] + span {
  color: var(--ink-soft);
}

/* --- the reveal / removal confirmation --- */

.confirm-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  cursor: pointer;
}

.confirm-check input {
  width: 22px;
  height: 22px;
  flex: none;
}

.confirm-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.confirm-form .confirm-check {
  margin-bottom: 0;
}

/* Red is only ever removal, per the rule at the top of this file. */
.btn-danger {
  background: var(--stop);
  color: var(--paper);
}

.btn-danger:hover {
  background: #b32020;
  color: var(--paper);
}

/* --- impersonation banner ---------------------------------------------------
   Sits above everything, on every page including the error pages. The risk in this
   feature is not that it exists, it is forgetting it is on — so the words say what is
   happening and the bar is impossible to mistake for part of the site. Orange,
   because it is a state you are in rather than a failure. */
.impersonating {
  background: var(--action);
  color: var(--paper);
  padding: 12px 0;
  border-bottom: 4px solid var(--ink);
}

.impersonating-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.impersonating-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
}

.impersonating-form {
  margin: 0;
}

/* Dark on light inside an orange bar — white on orange is too weak to read. */
.impersonating .btn-action {
  background: var(--paper);
  color: var(--ink);
  padding: 10px 20px;
  font-size: 1rem;
  white-space: nowrap;
}

.impersonating .btn-action:hover {
  background: var(--paper-soft);
  color: var(--ink);
}

/* --- video carousel ---------------------------------------------------------
   An ordinary horizontally scrolling row with snap points. It works by touch, by
   trackpad and by keyboard with no JavaScript at all; the arrows are a convenience
   laid on top, and they are hidden when everything already fits. */

.carousel {
  position: relative;
  margin: 8px 0;
}

.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  /* Room for the arrows to sit over the row without covering a tile's edge. */
  scroll-padding-inline: 4px;
}

.carousel-item {
  flex: 0 0 calc((100% - 48px) / 4);
  scroll-snap-align: start;
}

.video-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1b1b22;
  line-height: 0;
}

.video-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A white triangle with a shadow and nothing behind it. The badge marks the tile as a
   video; it is not supposed to cover the picture, which is the only thing telling a
   reader who is in it. The shadow is what keeps it visible on a pale still — white on
   white would disappear, and there is no panel to fall back on. */
.tile-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tile-play svg {
  width: 44px;
  height: 44px;
  fill: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
  transition: transform 0.15s ease;
}

/* Grows rather than changes colour. A size change reads for everyone. */
.video-tile:hover .tile-play svg,
.video-tile:focus-visible .tile-play svg {
  transform: scale(1.15);
}

/* The player takes the tile's place rather than appearing under it. Without this the
   class's own `display: block` beats the browser's rule for [hidden], the still stays
   on screen, and the new player is pushed below it. */
.video-tile[hidden] {
  display: none;
}

.video-tile:focus-visible {
  outline: 3px solid var(--purple-dark);
  outline-offset: 3px;
}

/* The player that replaces a tile once it is pressed. */
.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  display: block;
}

.carousel-nav {
  position: absolute;
  top: calc(50% - 26px);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--field-line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Only shown once there is somewhere to scroll to. */
.carousel.has-overflow .carousel-nav {
  display: flex;
}

.carousel-nav:hover {
  border-color: var(--purple);
}

.carousel-prev {
  inset-inline-start: -10px;
}

.carousel-next {
  inset-inline-end: -10px;
}

.carousel-channel {
  margin: 0;
}

/* --- tastes from the course ------------------------------------------------- */

.teaser-block {
  margin-block: 8px;
}

.teaser-intro {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

/* Unlike the recommendation tiles, these carry their lesson's name: a taste is only
   worth pressing if you know which lesson it comes from. */
.teaser-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.teaser-tile {
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 100%;
}

.teaser-caption {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  line-height: 1.4;
}

.teaser-title {
  font-size: 0.95rem;
}

.teaser-dur {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* The player takes the still's place inside the same cell, so the row does not
   change height when one is opened. */
.teaser-player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: var(--radius);
  background: #000;
}

.teaser-error {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--paper-soft);
  font-size: 0.95rem;
}

/* On the curriculum page the tastes follow a paragraph rather than a video, so they
   need room above them to read as their own thing. On the home page the hero's own
   spacing already does this. */
.course-tastes {
  margin-block: 32px;
}

/* On a page that is NOT about the course — the about page — the tastes have to be
   visibly a promotion rather than another paragraph of the article. Three separate
   signals, so none of them has to carry it alone: a tinted field, a solid border,
   and space around it. The tint is a wash of the brand purple rather than grey, so
   it reads as ours; the border is what makes the boundary unmistakable for anyone
   who does not see the tint. */
.tastes-panel {
  margin-block: 40px;
  padding: 24px;
  background: #f3f0ff;
  border: 2px solid var(--purple-soft);
  border-radius: var(--radius);
}

.teaser-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 18px 0 0;
}


/* Tablet: two across. Four is too many for the width, one wastes it. */
@media (min-width: 641px) and (max-width: 1024px) {
  .carousel-item {
    flex-basis: calc((100% - 16px) / 2);
  }
}

/* A section that only holds a carousel. Its contents already have breathing room;
   the standard 72px on top of that reads as a hole in the page. */
.section-tight {
  padding-block: 24px;
}

/* --- recommendations and success stories ------------------------------------ */

/* Where the filmed recommendations will go. Drawn at 16:9, the shape the videos will
   be, so that when they arrive nothing on the page moves — an empty box of the right
   size is worth more than no box at all. */
.video-slots {
  list-style: none;
  margin: 32px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.video-slot {
  aspect-ratio: 16 / 9;
  background: #1b1b22;
  border-radius: var(--radius);
}

.video-slots-note {
  margin-bottom: 48px;
}

.quotes-full {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}

.quote-full {
  border: 2px solid var(--line);
  border-inline-start: 6px solid var(--purple);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 20px;
  background: var(--paper-soft);
}

.quote-full blockquote {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.8;
}

.quote-full .quote-name {
  margin: 0;
  font-size: 1rem;
  color: var(--purple-dark);
}

.story-list {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}

.story-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

/* The pictures came from the old site at every shape and size, so they are cropped to
   one box rather than left to set the height of each row themselves — otherwise the
   list steps up and down the page. */
.story-thumb {
  flex: none;
  width: 200px;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}

.story-thumb img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

.story-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.story-card h2 {
  font-size: 1.4rem;
  margin-bottom: 0.4em;
}

/* On the story itself the picture is shown whole — it is the person the story is
   about, and cropping a face to fit a box is worse than a tall image. */
.story-image {
  display: block;
  max-width: 420px;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 0 0 28px;
}

.story-card p {
  margin-bottom: 0.5em;
  max-width: 70ch;
}

.story-more {
  margin: 0;
}

/* A story is read start to finish rather than scanned, so it gets the wider line
   height and the reading measure the lesson pages use. */
.story-body p {
  font-size: 1.1rem;
  line-height: 1.85;
  margin-bottom: 1.2em;
}

/* --- contact form and email admin ------------------------------------------ */

/* Out of sight, out of the tab order, and hidden from screen readers. Only an
   automated form-filler ever puts anything in it, which is what makes it useful. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The wording on one side, the rendered email on the other — so an edit can be
   judged against what it produces rather than imagined. */
.email-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.email-fields {
  flex: 1 1 380px;
  min-width: 0;
}

.email-preview {
  flex: 1 1 420px;
  min-width: 0;
}

.email-frame {
  width: 100%;
  height: 620px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.message-card {
  border: 2px solid var(--line);
  border-inline-start: 6px solid var(--purple);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 20px;
}

/* Handled is said by the word "טופל" and by a lighter edge — never by colour alone. */
.message-card.is-handled {
  border-inline-start-color: var(--line);
  background: var(--paper-soft);
}

.message-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  margin-bottom: 4px;
}

.message-contact {
  margin-bottom: 10px;
}

.message-body {
  white-space: pre-line;
  margin-bottom: 12px;
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.message-notes {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 1 260px;
}

.message-notes input {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 8px 10px;
  border: 2px solid var(--field-line);
  border-radius: 8px;
}

/* --- multiple-choice quizzes ------------------------------------------------
   Right and wrong are carried by a symbol, a word and the weight of an edge.
   Colour is the last of the three signals here, never the only one. */

.quiz-questions,
.quiz-review {
  padding-inline-start: 1.4em;
  margin: 0 0 32px;
}

.quiz-item,
.quiz-review-item {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.quiz-item fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.quiz-question {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 12px;
  padding: 0;
}

/* The whole row is the target, not just the small circle — this is read on phones
   by people who should not have to aim. */
.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 2px solid var(--field-line);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 44px;
}

.quiz-option:hover {
  border-color: var(--purple-soft);
}

.quiz-option input {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 3px;
}

.quiz-review-item.is-right {
  border-inline-start: 6px solid var(--purple);
  padding-inline-start: 14px;
}

/* Wrong gets the heavier edge, so the eye finds what needs re-reading first. */
.quiz-review-item.is-wrong {
  border-inline-start: 10px solid var(--ink);
  padding-inline-start: 14px;
}

.quiz-answer-line {
  margin: 0 0 6px;
  line-height: 1.6;
}

.result {
  border: 2px solid var(--line);
  border-inline-start: 10px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-soft);
  padding: 22px 24px;
  margin-bottom: 32px;
}

.result.is-pass {
  border-inline-start-color: var(--purple);
}

.result-score {
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 0 0 6px;
}

.result-verdict {
  font-size: 1.2rem;
  margin: 0 0 4px;
}

.result-when {
  margin: 0;
  color: var(--ink-soft);
}

/* --- documents inside the chapter list --- */

.material-list {
  margin: 0 0 32px;
  padding: 0;
}

.materials-heading {
  margin-top: 36px;
}

/* One upload block per chapter — kept narrow so it reads as a form rather than as
   another column of the table above it. */
.material-add {
  max-width: 560px;
  margin: 0 0 16px;
  padding: 18px 20px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}

.material-add .field {
  margin-bottom: 16px;
}

/* --- the admin screens --- */

.settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  padding: 18px 20px;
  margin-bottom: 32px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}

.settings-row .field-hint {
  flex-basis: 100%;
  margin: 0;
}

.field-inline {
  margin-bottom: 0;
  min-width: 280px;
}

.allowance-row {
  display: flex;
  gap: 10px;
}

.allowance-row input {
  width: 8ch;
}

.allowance-row select {
  width: auto;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 8px;
}

.status-now {
  margin: 0;
}

.question-list {
  margin: 0 0 32px;
  padding-inline-start: 1.6em;
}

.question-item {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.question-edit textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 2px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.question-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}

.question-actions form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* A note that explains rather than warns — quieter than .notice, same shape. */
.notice-quiet {
  border-inline-start-color: var(--ink-soft);
  padding: 16px 20px;
}

@media (max-width: 640px) {
  .settings-row,
  .status-row {
    flex-direction: column;
    align-items: stretch;
  }
}