/* Layout pass: comfortable on a phone, a tablet and a computer, and at any browser zoom.
   Loaded last (after styles.css and extra.css) and only changes layout: widths, grids, gutters, wrapping and the
   size of things you tap. Colours, fonts and components stay as they are.

   How it is organised
   1. Nothing may make the page wider than the screen (a wider page makes a phone zoom out and look "stretched").
   2. Side gutters: about 16px on a phone, as before on larger screens; very wide screens get a maximum width.
   3. Computer: lists of cards use the width (grids), reading text keeps a comfortable line length.
   4. Phone: top bar that always fits, larger tap targets, tables and panels that fit.
   5. Small fixes: RTL alignment of the logo and of mixed Hebrew/English lines, short screens (zoomed in, landscape).

   Page-level grids answer to the width of the content area (.shell-main, a size container named "main"), not the
   window, so the sidebar and the reading-size settings (larger text) are taken into account. Browsers without
   container queries or :has() simply keep the one-column layout. */

/* ============================================================ 1. never wider than the screen */
:root { --gutter: 1.25rem; }                                   /* each side; 2.5rem in total, as before */
@media (max-width: 599px) { :root { --gutter: clamp(14px, 4.4vw, 18px); } }

/* A grid with no column template sizes its one column to its widest child (a wide table, a long word), and the
   page then grows past the screen. These all get one column that can shrink; wide tables scroll inside their panel. */
.page, .narrow, .school-page, .demoai, .cards, .suggest, .pick, .draft-form, .syllabus, .bank, .live-form,
.chat-inner, .builder-foot, .admin-form, .dai-findings, .dai-rules {
  grid-template-columns: minmax(0, 1fr);
}
.build { grid-template-columns: minmax(min(320px, 100%), 0.85fr) minmax(0, 1.15fr); }
.q { grid-template-columns: 1.6rem minmax(0, 1fr); }
.q-fields { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.q-option { grid-template-columns: auto minmax(0, 1fr) auto; }
.class-form, .student-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student summary, .student-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr) auto; }
.bar-row { grid-template-columns: minmax(0, 1fr) 90px 3rem; }
.class-access { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.live-rounds { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.suggest-list { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
@media (max-width: 860px) {
  .build, .class-form, .student-detail, .q-fields { grid-template-columns: minmax(0, 1fr); }
  .student summary, .student-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Long words, codes and links wrap instead of pushing the page wider. */
.page h1, .page h2, .page h3, .panel-body p, .action-card p, .lesson-row h3 { overflow-wrap: anywhere; }
.tags .chip, .chips .chip { max-width: 100%; }

/* The safety net: whatever still sticks out is cut at the screen edge instead of widening the page. "clip" (not
   "hidden") keeps the sticky top bar and sidebar working. */
.shell-main, main.auth, .session { overflow-x: clip; }

/* ============================================================ 2. widths and gutters */
.shell-main { container: main / inline-size; }
.page, .page-wide { width: min(var(--page-max, 760px), 100% - 2 * var(--gutter)); }
.page-wide { --page-max: 1480px; }                              /* teacher pages: was 1180px */
.column { width: min(680px, 100% - 2 * var(--gutter)); }
.wide { width: min(1180px, 100% - 2 * var(--gutter)); }

/* Student pages that are lists of cards use more of a computer's screen (settings and a lesson stay narrow). */
.shell:has(.nav-link[aria-current="page"]:is([href="#/"], [href="#/lessons"], [href="#/progress"], [href="#/badges"])) .page:not(.page-wide) {
  --page-max: 1100px;
}

/* The admin's Teacher | Student switch lines up with the page edge instead of sitting in the far corner. */
.role-corner { padding-inline: max(var(--gutter), (100% - 1480px) / 2); }

/* Intro paragraphs stay readable when the page is wide. */
.page > p.muted, .narrow > p.muted, .school-page > p.muted, .page-head + p { max-width: 80ch; }

/* ============================================================ 3. computer: use the width */

/* ---- Demo AI (frontend/demo_ai.js): the page uses the full teacher width; the problems become a grid of cards */
.narrow.wide-ish { width: 100%; }
.dai-kinds { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }   /* the four kinds of check, 2 x 2 */
@container main (min-width: 800px) {
  .dai-findings { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0.9rem; }
  .dai-finding, .dai-finding:first-child {
    display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
    padding: 0.85rem 1rem 0.6rem; border: 1px solid var(--line); border-inline-start: 4px solid var(--line);
    border-radius: var(--radius); background: var(--surface);
  }
  .dai-finding.sev-high { border-inline-start-color: var(--wrong); }
  .dai-finding.sev-medium { border-inline-start-color: var(--mark); }
  .dai-finding > .actions { margin-top: auto; }                 /* "Copy for Claude" lines up at the bottom of each row */
  .dai-dismissed .dai-findings { margin-top: 0.6rem; }
  .dai-rules { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0.45rem 2rem; align-items: start; }
  /* What was checked: the steps side by side */
  .panel-body:has(> .dai-step) { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); column-gap: 2rem; align-items: start; }
  .panel-body > .dai-step, .panel-body > .dai-step:first-child { border-top: 0; border-bottom: 1px solid var(--line); }
}

/* ---- Classes (teacher): class cards side by side */
.narrow:has(> .class-card) {
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
  align-items: start;
}
.narrow:has(> .class-card) > :not(.class-card) { grid-column: 1 / -1; }
.narrow:has(> .class-card) > div:not([class]) { max-width: 52rem; }       /* the new-class form */
.narrow:has(> .class-card) > div:not([class]):empty { display: none; }   /* no empty row while it is closed */

/* ---- School classes (the owner): adding on one side, the list on the other */
.narrow:has(> .school-page) { width: 100%; }
.narrow:has(> .school-page) > .page-title, .school-page > p { max-width: 80ch; }
@container main (min-width: 1040px) {
  .school-page:has(> .table-wrap) { grid-template-columns: minmax(19rem, 1fr) minmax(0, 2.2fr); align-items: start; }
  .school-page:has(> .table-wrap) > p { grid-column: 1 / -1; }
  .school-page > .panel:not(.table-wrap) .field + .field { margin-top: 0.4rem; }
}
.school-grid td:first-child { min-width: 5.5rem; }              /* a class name is not squeezed to a word a line */

/* ---- Today (teacher): what was missed and who to talk to, side by side */
@container main (min-width: 1040px) {
  .shell:has(.nav-link[aria-current="page"][href="#/today"]) .page { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .shell:has(.nav-link[aria-current="page"][href="#/today"]) .page > * { grid-column: 1 / -1; }
  .shell:has(.nav-link[aria-current="page"][href="#/today"]) .page > section.panel:not(.table-wrap) { grid-column: auto; }
}

/* ---- Students (teacher): five columns only when there is room for them; else the phone's two */
@container main (max-width: 1000px) {
  .student summary, .student-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-head span:nth-child(n+3) { display: none; }
}

/* ---- Build (teacher): two columns only when both have room; below that, one above the other */
@container main (max-width: 900px) {
  .build { grid-template-columns: minmax(0, 1fr); }
  .builder-chat { position: static; }
}
.builder-chat { height: min(max(72vh, 26rem), 720px, 100vh - 2rem); }   /* never so short that the chat disappears */
@media (max-width: 860px) { .builder-chat { height: max(60vh, 26rem); } }

/* ---- Student home: the action cards and the topic list in columns */
@container main (min-width: 900px) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: stretch; }
  .cards > .action-card { align-content: center; }
  /* Lesson lists (home "All topics", Lessons "To do" and "Completed"): two columns of cards */
  .lesson-list { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 0.6rem; background: none; border-radius: 0; overflow: visible; }
  .lesson-list > .lesson-row { border: 1.5px solid var(--line); border-radius: var(--radius-lg); }
  /* Progress: the bars in two columns; the memory notes keep a reading width */
  .bars { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); column-gap: 2.5rem; }
  .memory p { max-width: 75ch; }
}
/* Badges: even tiles instead of boxes as wide as their text */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.6rem; }
.badge { min-width: 0; display: grid; align-content: start; justify-items: center; }

/* ============================================================ 4. phone */
@media (max-width: 599px) {
  .auth-form { padding-inline: var(--gutter); }
  .auth-demo { padding-inline: calc(var(--gutter) + 0.25rem); }
  .panel-head, .panel-body, .setting-row { padding-inline: 0.95rem; }
  .action-card { padding: 1rem 1.05rem; gap: 0.8rem; }
  table.grid th, table.grid td { padding-inline: 0.6rem; }
  table.grid th:first-child, table.grid td:first-child { padding-inline-start: 0.95rem; }
  table.grid th:last-child, table.grid td:last-child { padding-inline-end: 0.95rem; }
  .metrics { gap: 1rem 1.6rem; }
  .dai-rules details p { padding-inline-start: 0; }
  .lesson-row { padding-inline: 0.95rem; gap: 0.75rem; }
  .student summary, .student-head { padding-inline: 0.95rem; gap: 0.6rem 0.8rem; }
  .student-detail { padding-inline: 0.95rem; }
}
/* A panel title and its button: the button drops under a long title instead of squeezing it to one word a line */
.panel-head { flex-wrap: wrap; }
.panel-head h2 { min-width: min(100%, 8rem); }

/* Insights on a phone: the table scrolls sideways inside its panel instead of squeezing the question names to a word
   per line. Published lessons on a phone: each lesson is a small card that fits the screen (the title on its own line,
   then its class, questions and students, each with its label, then its buttons), so nothing is cut off. */
@container main (max-width: 600px) {
  .shell:has(.nav-link[aria-current="page"][href="#/insights"]) .page-wide .table-wrap > table.grid { min-width: 28rem; }
  table.lessons-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.lessons-grid tbody { display: block; }
  table.lessons-grid tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding: 0.8rem 0.95rem;
    border-bottom: 1px solid var(--line); }
  table.lessons-grid tr:last-child { border-bottom: 0; }
  table.lessons-grid tr > td, table.lessons-grid tr > td:first-child, table.lessons-grid tr > td:last-child { display: block; padding: 0; border: 0; }
  table.lessons-grid tr > td:first-child { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  table.lessons-grid td[data-label] { font-size: 0.88rem; }
  table.lessons-grid td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-family: var(--font-body, inherit); }
  table.lessons-grid tr > td.lesson-actions { width: auto; flex: 1 1 100%; white-space: normal; }
  /* A class card's Edit and Delete sit together under the class name */
  .class-card-head .grow { flex: 1 1 100%; }
  /* Progress bars: more room for the topic name */
  .bars .bar-row { grid-template-columns: minmax(0, 1fr) minmax(70px, 32%) 2.8rem; }
}

/* ---- The phone's top bar (menu, logo, the admin's Teacher | Student switch, "Get the app") always fits */
.mobile-bar .wordmark { min-width: 0; overflow: hidden; }
.mobile-bar .wordmark svg { height: 1.7rem; }
.mobile-bar > .icon-btn { flex: none; }
.mobile-bar .install-top { flex: none; justify-content: center; min-height: 2.4rem; min-width: 2.4rem; }
@media (max-width: 860px) {
  .mobile-bar { padding-inline: var(--gutter); }
  .mobile-bar:has(.role-switch) { padding-inline: min(var(--gutter), 0.75rem); }
}
/* Not enough room for the button's words: just its icon (this was a fixed 360px; em follows the text size) */
@container main (max-width: 23em) {
  .mobile-bar .install-top span { display: none; }
  .mobile-bar .install-top { padding: 0.5rem; }
}
/* With the admin's switch: smaller logo, then a tighter switch */
@container main (max-width: 22em) {
  .mobile-bar:has(.role-switch) .wordmark svg { height: 1.4rem; }
  .mobile-bar .role-switch .segmented button { padding: 0.28rem 0.55rem; font-size: 0.82rem; }
}
@container main (max-width: 19.5em) {
  .mobile-bar:has(.role-switch) { gap: 0.35rem; }
  .mobile-bar .role-switch .segmented button { padding-inline: 0.45rem; }
}
/* Very large text on a small phone: the switch and the menu matter more than the logo */
@container main (max-width: 18em) {
  .mobile-bar:has(.role-switch) .wordmark { display: none; }
}

/* ---- Tap targets of at least ~40px on touch screens */
@media (pointer: coarse) {
  .mobile-bar > .icon-btn { min-height: 2.5rem; min-width: 2.5rem; }
  .role-switch .segmented button { min-height: 2.15rem; }
  .btn.text { min-height: 2.4rem; }
  .sure-btn { min-height: 2.3rem; padding-inline: 0.85rem; }
  .segmented button { min-height: 2.3rem; }
  .chip button { min-width: 1.6rem; min-height: 1.6rem; margin: -0.3rem -0.35rem; }
  .dai-finding details summary, .dai-step summary, .dai-dismissed summary, .dai-log summary, .dai-rules summary,
  details.completed > summary { padding-block: 0.45rem; }
  .pick-open { min-height: 2.5rem; }
  .pick-leaf { padding-block: 0.6rem; }
  .choice { min-height: 2.6rem; align-items: center; }
  .choice input { margin-top: 0; }
}

/* ============================================================ 5. small fixes */
/* On a phone the top bar stays on screen: things the page scrolls to (a new-class form, a found item) stop below it */
@media (max-width: 860px) { html { scroll-padding-top: 4.5rem; } }

/* A live question on a computer: the answer options keep a sensible width instead of crossing the whole page */
.live-card .choice-form { max-width: 40rem; }

/* The logo is written left to right, but on a Hebrew page it belongs on the right like everything else
   (in the sidebar it sat on the left above a right-aligned menu; on the sign-in page it hid under "Get the app"). */

/* Lines that keep their own direction (a Hebrew page with an English question, or the reverse) still line up with
   the rest of the column instead of jumping to the other side. */
[dir="rtl"] :is(.missed h3, .dai-finding h3, .dai-detail, .dai-where, .dai-tester-line, .dai-rules details p, .live-card h2, .live-prompt) { text-align: right; }
[dir="ltr"] :is(.missed h3, .dai-finding h3, .dai-detail, .dai-where, .dai-tester-line, .dai-rules details p, .live-card h2, .live-prompt) { text-align: left; }
/* The same for titles in tables and lists: an English question in a Hebrew table reads "What is 1/2 + 1/4?", not
   "?1/2 + 1/4 What is", and stays aligned with the Hebrew rows */
table.grid td > b, table.grid td > div, .lesson-row h3, .suggest-topic { unicode-bidi: plaintext; }
[dir="rtl"] :is(table.grid td > div, .lesson-row h3, .suggest-topic) { text-align: right; }
[dir="ltr"] :is(table.grid td > div, .lesson-row h3, .suggest-topic) { text-align: left; }

/* Short screens (a phone on its side, or a computer zoomed in a lot): less padding around the lesson chat */
@media (max-height: 520px) {
  .session-head { padding-block: 0.4rem; }
  .chat { padding-block: 0.75rem 0.5rem; }
  .composer { padding-block: 0.45rem max(0.45rem, env(safe-area-inset-bottom)); }
  .page { padding-top: 1rem; }
  .auth-demo { padding-block: 1.25rem; gap: 0.8rem; }
}

/* ============================================================ the Demo AI's link for Claude (frontend/demo_ai.js) */
.dai-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dai-link { flex: 1 1 260px; min-width: 0; font-size: 0.85rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line, #d9dee5);
  border-radius: 10px; background: transparent; color: inherit; text-overflow: ellipsis; }

/* Phone: messages (#toast) show at the top, under the top bar, above everything. At the bottom they covered the
   student's bar and the round help button covered them (tester, 375 px, 3 November 2026). */
@media (max-width: 860px) {
  #toast { top: calc(3.6rem + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -1rem); z-index: 70;
           width: min(92vw, 28rem); }
  #toast.show { transform: translate(-50%, 0); }
}