/* The look every grown-up page shares (home, lesson plan, journal, dashboard, release notes): the
   colours, light and dark, and the app shell drawn by site.js — the top bar, the boy-and-week picker,
   the account menu, the section bar (at the bottom on a phone), sheets and the undo message.
   The talk page keeps its own look for the boys. */
/* Text follows the phone's own text size: every size is in rem (relative to the root), and on iPhone and
   iPad the root is the system's body text (Dynamic Type: 17px at the default setting, larger or smaller
   with Settings > Display & Brightness > Text Size). Android's Chrome scales the root with the phone's
   font size by itself; a computer's browser uses its own font-size setting and zoom. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

:root {
  --bg: #f5f6fb; --card: #ffffff; --card-2: #eef0f8; --line: #e2e4ef; --ink: #1e2140; --muted: #6b6f8a;
  --accent: #4f5bd5; --accent-ink: #3d48b8; --soft: #e6e8fb;
  --amber: #8a5600; --amber-bg: #fdf3dc; --red: #c93c3c; --ok: #1f8a5b; --warm: #e07a5f; --warm-bg: #fde6dc;
  --shell-h: 56px; --tabs-h: 64px;
  /* Motion (Emil Kowalski's curves): entering and leaving, moving on screen, sheets from the bottom. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
:root[data-theme="dark"] {
  --bg: #12131a; --card: #1c1e29; --card-2: #23263a; --line: #2c2f40; --ink: #e7e8f2; --muted: #9a9db5;
  --accent: #5b66e0; --accent-ink: #a5acf6; --soft: #262a4a; --amber: #e8b44a; --amber-bg: #3a3020; --red: #ef7a7a; --ok: #5fc896;
  --warm: #f0a48d; --warm-bg: #3a2620;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #12131a; --card: #1c1e29; --card-2: #23263a; --line: #2c2f40; --ink: #e7e8f2; --muted: #9a9db5;
    --accent: #5b66e0; --accent-ink: #a5acf6; --soft: #262a4a; --amber: #e8b44a; --amber-bg: #3a3020; --red: #ef7a7a; --ok: #5fc896;
    --warm: #f0a48d; --warm-bg: #3a2620;
  }
}

/* ---- top bar: the JJ mark, the page, (on a laptop) the sections, saved state, the picker, the account ---- */
.shell-top { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); color: var(--ink); font: 0.9375rem/1.4 system-ui, -apple-system, sans-serif; }
.shell-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 0.8125rem;
  background: var(--accent); color: #fff; text-decoration: none; flex: none; }
.shell-title { flex: 0 1 auto; font-size: 1rem; font-weight: 700; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-title small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.shell-spacer { flex: 1 1 0; min-width: 0; }
/* A long name shrinks the title (ending in …), never pushes the ? or the account circle to a new line. */
@media (max-width: 899px) { .shell-spacer { display: none; } .shell-title { flex: 1 1 0; } .shell-help, .shell-avatar, .shell-mark { flex: none; }
  .shell-saved { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; } }
/* Long words and pasted links wrap instead of pushing the page sideways. */
body { overflow-wrap: break-word; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Hebrew (or any right-to-left) text runs and aligns right to left, paragraph by paragraph. */
p, li, textarea, .it-text, .dnote, .pa span, .item > span, .aim span { unicode-bidi: plaintext; }
.shell-saved { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.shell-saved.error { color: var(--red); font-weight: 600; }
.shell-ctx { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
/* At least 36px high, taller when the phone's text is large. */
.shell-ctx button { all: unset; cursor: pointer; box-sizing: border-box; min-height: 36px; padding-block: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.shell-ctx .step { width: 36px; font-size: 1.125rem; }
.shell-ctx .step:disabled { opacity: .35; cursor: default; }
.shell-ctx .pill { padding: 0 14px; gap: 6px; max-width: 340px; min-width: 0; }
.shell-ctx .pill > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-ctx .pill::after { flex: none; }
.shell-ctx .pill::after { content: '▾'; font-size: 0.6875rem; color: var(--muted); }
.shell-ctx button:focus-visible, .shell-avatar:focus-visible, .shell-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shell-avatar { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--soft); color: var(--accent-ink); font-weight: 700; font-size: 0.875rem; border: 1px solid var(--line); }
.shell-avatar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- sections: centred in the top bar on a laptop, a bar at the bottom on a phone ---- */
.shell-tabs { display: flex; gap: 4px; }
.shell-tabs button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px;
  font-size: 0.875rem; font-weight: 600; color: var(--muted); white-space: nowrap; position: relative; }
.shell-tabs button[aria-current="page"] { color: var(--accent-ink); background: var(--soft); }
.shell-tabs svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell-tabs .badge { font-size: 0.6875rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--amber-bg); color: var(--amber); display: inline-grid; place-items: center; }
@media (max-width: 899px) {
  .shell-top { gap: 8px 10px; }
  .shell-ctx { order: 10; flex-basis: 100%; }
  .shell-ctx .pill { flex: 1; max-width: none; }
  .shell-tabs { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; justify-content: space-around; gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 94%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  /* Tab labels grow with the phone's text size only up to 13px, as the phones' own tab bars do, and are cut short with … rather than run into each other. */
  .shell-tabs button { flex: 1; min-width: 0; max-width: 120px; flex-direction: column; gap: 2px; padding: 6px 0; font-size: min(0.6875rem, 13px); justify-content: center; }
  .shell-tabs button > span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell-tabs button[aria-current="page"] { background: none; }
  .shell-tabs svg { width: 24px; height: 24px; }
  .shell-tabs .badge { position: absolute; top: 2px; left: calc(50% + 6px); }
  body.has-tabs { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
}
/* A narrow laptop: one row still, so the subtitle goes and the picker and tabs tighten. */
@media (min-width: 900px) { .shell-top { flex-wrap: nowrap; } .shell-mark, .shell-tabs, .shell-ctx, .shell-help, .shell-avatar { flex-shrink: 0; } }
@media (min-width: 900px) and (max-width: 1149px) {
  .shell-top { gap: 8px; }
  .shell-title small { display: none; }
  .shell-ctx .pill { max-width: 210px; }
  .shell-tabs button { padding: 7px 8px; }
}
@media (min-width: 900px) {
  .shell-tabs { order: 0; }
  .shell-tabs svg { display: none; }
}
/* On a laptop the sections sit in the exact middle of the bar, whatever is beside them (a picker with
   arrows on one page, none on another), so they never shift between pages or sections. */
@media (min-width: 1280px) {
  .shell-tabs { position: absolute; left: 50%; top: 50%; translate: -50% calc(-50% + env(safe-area-inset-top) / 2); }
  .shell-ctx .pill { max-width: 260px; }
}

/* ---- the account menu and the picker: a popover on a laptop, a sheet from the bottom on a phone ---- */
.shell-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(15, 17, 35, .28); opacity: 1; transition: opacity 200ms var(--ease-out); }
@starting-style { .shell-scrim { opacity: 0; } }
.shell-scrim.closing { opacity: 0; transition-duration: 150ms; }
.shell-sheet { position: fixed; z-index: 41; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(15, 17, 35, .18); font: 0.9375rem/1.4 system-ui, -apple-system, sans-serif; overflow-y: auto; }
/* A sheet slides up from the bottom of a phone, and goes back down faster than it came. */
@media (max-width: 899px) {
  .shell-sheet { left: 0; right: 0; bottom: 0; max-height: 82dvh; border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(0); transition: transform 280ms var(--ease-drawer); }
  @starting-style { .shell-sheet { transform: translateY(100%); } }
  .shell-sheet.closing { transform: translateY(100%); transition-duration: 180ms; transition-timing-function: var(--ease-out); }
  .shell-sheet { padding-top: 14px; }
}
/* On a laptop it is a popover that grows from what opened it: the account circle (top right) or the
   picker (top centre). */
@media (min-width: 900px) {
  .shell-sheet { top: 62px; right: 16px; width: 360px; max-height: calc(100dvh - 90px); border-radius: 16px; padding: 12px 14px;
    transform-origin: top right; opacity: 1; transform: scale(1); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
  @starting-style { .shell-sheet { opacity: 0; transform: scale(0.97); } }
  .shell-sheet.closing { opacity: 0; transform: scale(0.97); transition-duration: 120ms; }
  .shell-sheet.wide { width: 520px; right: auto; left: 50%; translate: -50% 0; transform-origin: top center; }
}
.shell-sheet h4 { margin: 12px 4px 6px; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.shell-sheet h4:first-child { margin-top: 2px; }
.shell-sheet .who { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.shell-sheet .who b { display: block; }
.shell-sheet .who > div { min-width: 0; }
.shell-sheet .who span { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.shell-item { all: unset; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border-radius: 10px; font-size: 0.9375rem; text-decoration: none; color: var(--ink); }
.shell-item:focus-visible { background: var(--card-2); }
@media (hover: hover) and (pointer: fine) { .shell-item:hover { background: var(--card-2); } }
.shell-item small { margin-left: auto; color: var(--muted); font-size: 0.8125rem; }
.shell-item[aria-current="true"] { background: var(--soft); color: var(--accent-ink); font-weight: 600; }
.shell-seg { display: flex; padding: 3px; gap: 2px; margin: 0 4px 4px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.shell-seg button { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 9px 0; border-radius: 9px; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.shell-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
/* Notifications in the account menu: a line saying where it stands, then its buttons side by side. */
.shell-note { margin: 0 4px 4px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.shell-push-actions { display: flex; gap: 4px; }
.shell-push-actions .shell-item { width: auto; flex: 1; justify-content: center; border: 1px solid var(--line); padding: 8px 10px; font-size: 0.875rem; font-weight: 600; }
.shell-push-actions .shell-item:disabled { opacity: .5; cursor: default; }
.shell-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.shell-chips button { all: unset; cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; }
.shell-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.shell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 0 4px; }
.shell-grid button { all: unset; cursor: pointer; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.3; }
.shell-grid button b { display: block; font-size: 0.875rem; }
.shell-grid button span { color: var(--muted); }
.shell-grid button[aria-current="true"] { border: 2px solid var(--accent); padding: 7px 9px; }
.shell-grid button.now b::after { content: ' ·'; color: var(--accent); }
.shell-grid button.later { border-style: dashed; }

/* ---- the tour ---- */
.shell-help { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); font-weight: 700; font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) { .shell-help:hover { color: var(--accent-ink); border-color: var(--accent); } }
.shell-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- the bell ---- */
.shell-bell { position: relative; }
.shell-bell svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: var(--red, #d64545); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center; }
.shell-badge[hidden] { display: none; }
.shell-notice { align-items: flex-start; color: var(--ink); border-radius: 10px; }
.shell-notice + .shell-notice { margin-top: 2px; }
.shell-notice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shell-notice-text > b { font-size: 0.875rem; color: var(--ink); }
.shell-notice-text > span { font-size: 0.8125rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shell-notice-text > small { font-size: 0.75rem; color: var(--muted); margin-left: 0; }
.shell-notice.new { background: var(--soft); }
.shell-notice.new > .shell-notice-text > b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.shell-tour-ring { position: fixed; z-index: 60; border-radius: 12px; border: 2px solid var(--accent); pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 17, 35, .45); left: 0; top: 0; opacity: 1; transition: opacity 150ms var(--ease-out); }
@starting-style { .shell-tour-ring { opacity: 0; } }
/* Gliding to the next part only when the step changes; scrolling moves it with the page at once. */
.shell-tour-ring.moving { transition: opacity 150ms var(--ease-out), transform 250ms var(--ease-in-out), width 250ms var(--ease-in-out), height 250ms var(--ease-in-out); }
.shell-tour-ring.closing, .shell-tour-card.closing { opacity: 0; transition: opacity 120ms var(--ease-out); }
.shell-tour-card { position: fixed; z-index: 61; width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 14px 16px; border-radius: 16px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(15, 17, 35, .25); font: 0.9375rem/1.45 system-ui, -apple-system, sans-serif;
  opacity: 1; scale: 1; transition: opacity 150ms var(--ease-out), scale 150ms var(--ease-out); }
@starting-style { .shell-tour-card { opacity: 0; scale: 0.97; } }
@media (max-width: 899px) { .shell-tour-card { width: auto; } }
.shell-tour-head { display: flex; align-items: flex-start; gap: 8px; }
.shell-tour-head b { flex: 1; font-size: 1rem; }
.shell-tour-x { all: unset; cursor: pointer; color: var(--muted); padding: 0 4px; }
.shell-tour-card p { margin: 6px 0 12px; color: var(--ink); }
.shell-tour-foot { display: flex; align-items: center; gap: 8px; }
.shell-tour-foot span { flex: 1; font-size: 0.8125rem; color: var(--muted); }
.shell-tour-foot button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 0.875rem; border: 1px solid var(--line); }
.shell-tour-foot .next { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- the undo message ---- */
.shell-toast { position: fixed; z-index: 50; left: 50%; translate: -50% 0; bottom: calc(24px + env(safe-area-inset-bottom));
  opacity: 1; transform: translateY(0); transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--ink); color: var(--bg);
  font: 0.875rem/1.4 system-ui, -apple-system, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; }
/* Up from below, and back down a little faster. Transitions, not keyframes: a new one can replace it mid-way. */
@starting-style { .shell-toast { opacity: 0; transform: translateY(calc(100% + 24px)); } }
.shell-toast.leaving { opacity: 0; transform: translateY(calc(100% + 24px)); transition-duration: 160ms; }
.shell-toast button { all: unset; cursor: pointer; font-weight: 700; color: var(--soft); padding: 10px 12px; margin: -6px -6px -6px 0; border-radius: 10px; }
@media (max-width: 899px) { body.has-tabs .shell-toast { bottom: calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom)); } }

/* ---- the footer ---- */
.site-footer { max-width: 1040px; margin: 32px auto 0; padding: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; text-align: center; }

/* ---- pressing: buttons answer at once ---- */
.shell-ctx button, .shell-tabs button, .shell-avatar, .shell-help, .shell-chips button, .shell-grid button, .shell-item, .shell-tour-foot button, .shell-toast button {
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.shell-ctx button:not(:disabled):active, .shell-tabs button:active, .shell-avatar:active, .shell-help:active, .shell-chips button:active,
.shell-grid button:active, .shell-tour-foot button:active, .shell-toast button:active { transform: scale(0.97); }

/* ---- less motion, for those who ask for it: fades stay, movement goes ---- */
@media (prefers-reduced-motion: reduce) {
  .shell-sheet, .shell-toast, .shell-tour-card { transform: none !important; scale: 1 !important; transition: opacity 150ms ease !important; }
  .shell-sheet.closing, .shell-toast.leaving { opacity: 0; }
  @starting-style { .shell-sheet, .shell-toast, .shell-tour-card { opacity: 0; } }
  .shell-tour-ring, .shell-tour-ring.moving { transition: opacity 150ms ease; }
  .shell-ctx button:active, .shell-tabs button:active, .shell-avatar:active, .shell-help:active, .shell-chips button:active,
  .shell-grid button:active, .shell-tour-foot button:active, .shell-toast button:active, .btn:active, .chip:active, .card:active { transform: none !important; }
}

/* ---- every control shows where the keyboard is ---- */
:where(button, a, summary, [role="tab"], [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- on a phone, fields at 16px so the iPhone does not zoom in on them ---- */
@media (max-width: 899px) { input, select, textarea { font-size: 1rem !important; } }

/* ---- the photo viewer: full screen, swipe or ‹ › between photos, the day and teacher underneath ---- */
.jj-viewer { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .92); color: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  font: 0.875rem/1.4 system-ui, -apple-system, sans-serif; opacity: 1; transition: opacity 180ms var(--ease-out); touch-action: pan-y; }
@starting-style { .jj-viewer { opacity: 0; } }
.jj-viewer.closing { opacity: 0; transition-duration: 140ms; }
.jj-viewer .bar { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 6px; }
.jj-viewer .bar span { flex: 1; color: rgba(255, 255, 255, .75); }
.jj-viewer button { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 1.375rem; color: #fff; }
.jj-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jj-viewer .stage { position: relative; display: grid; place-items: center; min-height: 0; }
.jj-viewer .stage img, .jj-viewer .stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.jj-viewer .prev, .jj-viewer .next { position: absolute; top: 50%; translate: 0 -50%; background: rgba(255, 255, 255, .12); }
.jj-viewer .prev { left: 10px; }
.jj-viewer .next { right: 10px; }
.jj-viewer .cap { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); text-align: center; color: rgba(255, 255, 255, .85); }
@media (hover: none) { .jj-viewer .prev, .jj-viewer .next { display: none; } }