/* ── EdWorld ───────────────────────────────────────────────────────
   The stylesheet for www.edworld.app. Standalone on purpose: styles.css is
   1600 lines of quiz-authoring UI that this site has no use for.

   It DOES define the Submitz primitive classes (.panel, .dash-section,
   .text-input, .primary-btn, .hint, .legal-*) because shared/settings-page.js
   and shared/legal-page.js emit markup using those names. Change one of those
   shared modules and check this file still dresses it.

   Type is deliberately the same as Submitz — same family, same two weights —
   so the two products read as siblings. The palette is not.
   ────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #eef0f6;
  --ink:       #17203a;
  --muted:     #6b7280;
  --line:      #e3e6ef;
  --accent:    #299bda;
  --accent-2:  #62b8e8;
  --accent-ink:#ffffff;
  --bubble-in: #eef0f6;
  --tint:      #e3f2fb;
  --bad-tint:  #fee2e2;
  --ok:        #147a32;
  --bad:       #b42318;
  --unread:    #e23d3d;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
}

/* Appearance (Settings → Appearance): follows the device unless the person
   chose; app/ew-theme.js puts the choice on <html data-theme>. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg:        #0f1424;
    --surface:   #1a2036;
    --surface-2: #252c45;
    --ink:       #e8ebf5;
    --muted:     #9aa3b8;
    --line:      #2c3350;
    --bubble-in: #252c45;
    --tint:      #16324a;
    --bad-tint:  #3d1d22;
    --ok:        #4ade80;
    --bad:       #f87171;
    color-scheme: dark;
  }
}
html[data-theme="dark"] {
  --bg:        #0f1424;
  --surface:   #1a2036;
  --surface-2: #252c45;
  --ink:       #e8ebf5;
  --muted:     #9aa3b8;
  --line:      #2c3350;
  --bubble-in: #252c45;
  --tint:      #16324a;
  --bad-tint:  #3d1d22;
  --ok:        #4ade80;
  --bad:       #f87171;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Anything given an explicit `display` outranks the browser's own rule for the
   `hidden` attribute, so a hidden flex row keeps showing. This is the one place
   !important earns its keep: toggling `el.hidden` should always mean hidden. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

code, kbd, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

a { color: var(--accent); }

/* ── App shell ─────────────────────────────────────────────────── */
/* Two rows: one bar holding the brand and the tabs together, then content.
   The content row is the only one that scrolls, so the composer never leaves
   the viewport — the thing most web chat gets wrong on a phone. */
.ew-app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
}

.ew-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  min-height: 54px;
}

.ew-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.3px;
  color: var(--ink);
  text-decoration: none;
}
.ew-brand svg { flex: 0 0 auto; }
.ew-brand { flex: 0 0 auto; margin-inline-end: 6px; }
.ew-header-spacer { flex: 1; }

.ew-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
}
.ew-icon-btn:hover { background: var(--surface-2); }

.ew-main { overflow: hidden; min-height: 0; }

/* ── Tabs ──────────────────────────────────────────────────────── */
/* In the header itself, on the same line as the brand, at every width. */
.ew-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ew-tabs::-webkit-scrollbar { display: none; }
.ew-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.ew-tab svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The selected tab is its colour alone — no underline. */
.ew-tab-active { color: var(--accent); }
.ew-tab-badge {
  min-width: 17px;
  padding: 0 4px;
  height: 17px;
  border-radius: var(--r-pill);
  background: var(--unread);
  color: #fff;
  font-size: 0.65rem;
  line-height: 17px;
  text-align: center;
}

/* Narrow: the brand and three labels will not fit on one line, so the tabs
   drop to icons. Better than a row that scrolls and hides "More" off the edge.
   The threshold is higher than before because the header now carries the brand
   as well. */
@media (max-width: 560px) {
  .ew-tab { padding: 0 9px; gap: 4px; }
  .ew-tab span:not(.ew-tab-badge) { display: none; }
  .ew-brand span { display: none; }
}

/* ── Messages: two panes on desktop, one at a time on a phone ──── */
.ew-messages { display: grid; height: 100%; min-height: 0; min-width: 0; }
/* Grid items, like flex items, default to min-width:auto and refuse to shrink
   below their content. A single wide bubble would then push the whole pane
   past the screen — and because .ew-main clips, it would do so invisibly,
   with no scrollbar to reveal it. */
.ew-messages > * { min-width: 0; }

@media (min-width: 900px) {
  .ew-messages { grid-template-columns: 340px 1fr; }
  .ew-list { border-inline-end: 1px solid var(--line); }
}
@media (max-width: 899px) {
  .ew-messages { grid-template-columns: 1fr; }
  /* One pane visible at a time; data-view says which. */
  .ew-messages[data-view="list"]   .ew-thread { display: none; }
  .ew-messages[data-view="thread"] .ew-list   { display: none; }
}

.ew-list {
  background: var(--surface);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ew-list-head {
  padding: 12px 16px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

/* A class card is a grid, not a stack of absolutely-placed pieces. The session
   control gets a column of its own, so the space it needs is space the text
   beside it never had — which is what stops the two from ever meeting. The due
   strip spans the full width underneath, and only exists when a student has
   something outstanding, so an admin's list stays as compact as it was. */
.ew-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "row"
    "session"
    "due";
  align-items: center;
}
.ew-card:hover { background: var(--surface-2); }
.ew-card-active { background: var(--surface-2); }


.ew-row {
  grid-area: row;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 10px 16px;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
  color: inherit;
}
/* Search results reuse .ew-row without a card around it. */
.ew-row:hover { background: var(--surface-2); }

.ew-avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
/* A flex column, and not only for the layout: `text-overflow: ellipsis` is
   ignored on a non-replaced INLINE element, so while this was a plain block
   the preview span below was inline, never truncated, and a long message ran
   straight out of the row and under the session button. Making these two flex
   items blockifies them, which is what makes the ellipsis real. */
.ew-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ew-row-top { display: flex; align-items: baseline; gap: 8px; }
.ew-row-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.94rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ew-row-time { flex: 0 0 auto; font-size: 0.72rem; color: var(--muted); }
.ew-row-preview {
  font-size: 0.84rem;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.ew-card-unread .ew-row-name,
.ew-card-unread .ew-row-preview { font-weight: 700; color: var(--ink); }
.ew-count {
  flex: 0 0 auto;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--unread);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ── Thread ────────────────────────────────────────────────────── */
.ew-thread {
  /* Flex, not `grid-template-rows: auto 1fr auto`. The rows were positional,
     and every child here appears and disappears — the pin strip, the offline
     bar, the typing line, and now the shelf. A hidden element is not a grid
     item, so the 1fr landed on whichever child happened to be second: with a
     message pinned it was the pin strip, which then ate the screen. In a
     column flex the flexible child says so itself. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  background: var(--bg);
}
.ew-thread > * { flex: 0 0 auto; }
.ew-thread > .ew-scroll,
.ew-thread > .ew-panel { flex: 1 1 auto; }
.ew-thread > * { min-width: 0; }
.ew-thread-head .ew-seg { margin: 0; }
.ew-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ew-back {
  display: none;
  border: 0; background: none; cursor: pointer;
  color: var(--ink); padding: 4px 2px;
  line-height: 0;
}
@media (max-width: 899px) { .ew-back { display: block; } }
/* ‹ and › are direction-bearing: they must mirror in RTL. */
html[dir="rtl"] .ew-back { transform: scaleX(-1); }

/* The name is the button — a class's settings live behind the thing the class
   is called, not behind a separate glyph beside it. */
.ew-thread-title {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch;
  border: 0; background: none; padding: 2px 4px; margin: 0 -4px;
  border-radius: var(--r-sm);
  font: inherit; color: inherit; cursor: pointer; text-align: start;
}
.ew-thread-title:hover { background: var(--surface-2); }
/* Block children, or `text-overflow` is ignored on an inline span and a long
   class name runs under the icons. Same trap as .ew-row-preview. */
.ew-thread-name { display: block; font-weight: 700; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-thread-sub  { display: block; font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Two icons where the info button was: the conversation, or the shelf. */
.ew-seg.ew-seg-icons { flex: 0 0 auto; padding: 3px; gap: 2px; }
.ew-seg-icons .ew-seg-btn {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 30px; padding: 0;
}
.ew-seg-icons .ew-seg-on { color: var(--accent); }
/* Superscript count on a view icon (ewPaintViewBadges). */
.ew-seg-icons .ew-seg-btn { position: relative; }
.ew-seg-badge {
  position: absolute; top: -5px; inset-inline-end: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill); border: 2px solid var(--surface-2);
  background: var(--unread); color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 12px; text-align: center;
  box-sizing: content-box; pointer-events: none;
}
.ew-seg-badge[hidden] { display: none; }
.ew-seg-badge-mark { background: #d97706; }
/* An admin's thread head carries four views and the share button; on a phone
   that left the class name a few letters wide. Narrower buttons and tighter
   gaps give it back without dropping any of them. */
@media (max-width: 420px) {
  .ew-thread-head { gap: 6px; padding-inline: 10px; }
  .ew-seg.ew-seg-icons { gap: 0; padding: 2px; }
}

/* ── The shelf ─────────────────────────────────────────────────── */
.ew-panel { overflow-y: auto; min-height: 0; padding: 8px 10px 20px; background: var(--bg); }
.ew-panel-head {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); padding: 14px 6px 6px;
}
.ew-saved-row, .ew-file-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); font: inherit; color: inherit;
  cursor: pointer; text-align: start;
}
.ew-saved-row:hover, .ew-file-row:hover { background: var(--surface-2); }
.ew-saved-body, .ew-file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ew-saved-who, .ew-file-meta { font-size: 0.72rem; color: var(--muted); }
.ew-saved-text, .ew-file-name {
  font-size: 0.87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ew-saved-row .ew-act { flex: 0 0 auto; color: var(--accent); }
/* The thread's Schedule view reuses the dialog's rows; give them the card
   the dialog would. */
.ew-panel-sched {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 6px 14px 12px; margin-top: 6px;
}
.ew-seg-icons .ew-seg-btn[hidden] { display: none; }
/* ── The Track view's gradesheet ──
   Scrolls both ways inside the panel; the student column and the header row
   stay put so a mark is always readable against its name and assignment. */
.ew-gs-wrap {
  overflow: auto; max-height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ew-gs { border-collapse: separate; border-spacing: 0; font-size: 0.8rem; min-width: 100%; }
.ew-gs th, .ew-gs td {
  padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: center;
}
.ew-gs thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
}
.ew-gs thead th span { display: block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.ew-gs .ew-gs-name {
  position: sticky; inset-inline-start: 0; z-index: 2; text-align: start;
  background: var(--surface); font-weight: 600; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; border-inline-end: 1px solid var(--line);
}
.ew-gs thead .ew-gs-name { z-index: 3; background: var(--surface-2); }
.ew-gs .ew-gs-sum { background: var(--surface-2); font-weight: 600; }
.ew-gs .ew-gs-overall { color: var(--accent); }
.ew-gs-cell { font-variant-numeric: tabular-nums; }
.ew-gs-hi  { color: var(--ok); }
.ew-gs-mid { color: #b45309; }
.ew-gs-lo  { color: var(--bad); }
.ew-gs-none { color: var(--line); }
/* Track's Admin / Member switch, and the member's own marks. */
.ew-seg.ew-gs-mode { margin: 2px 0 10px; max-width: 260px; }
.ew-gs-sums { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.ew-gs-sumcard {
  flex: 1 1 110px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.ew-gs-sumval { font-size: 1.2rem; font-weight: 700; }
.ew-gs-main .ew-gs-sumval { color: var(--accent); }
.ew-gs-sumname { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-gs-mine { cursor: default; }
.ew-gs-mypct { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Release beside a marked, unreleased submission; Release all in its head. */
.ew-subs-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ew-subs-row .ew-file-row { flex: 1; min-width: 0; margin-bottom: 0; }
.ew-subs-release {
  flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--accent); border-radius: var(--r-md);
  background: var(--surface); color: var(--accent); font: inherit; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.ew-subs-release:hover { background: var(--accent); color: #fff; }
.ew-subs-release:disabled { opacity: 0.5; cursor: default; }
.ew-panel-head.ew-subs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* The Mark view's submissions page: back row, avatar initials, absentees. */
.ew-subs-back {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 10px 6px; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--ink); cursor: pointer; text-align: start;
}
.ew-subs-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-subs-missing { margin: 0 6px 10px; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
button.ew-work-row { width: 100%; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.ew-work-row .ew-file-icon { font-size: 0.72rem; font-weight: 700; }
.ew-due-next .ew-due-icon { color: var(--muted); }
/* Submit / Mark / Track rows are links styled as the shelf's file rows. */
.ew-work-row { text-decoration: none; }
.ew-work-row .ew-file-icon { color: var(--accent); }
.ew-work-mark .ew-file-icon, .ew-work-mark .ew-file-meta { color: #b45309; }
.ew-work-soon { border-color: var(--bad); }
.ew-work-soon .ew-file-icon, .ew-work-soon .ew-file-meta { color: var(--bad); }
.ew-file-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface-2); color: var(--muted);
}
.ew-file-icon img { width: 100%; height: 100%; object-fit: cover; }

/* ── Pickers (assign a quiz: which quiz, which classes) ────────── */
.ew-assign-search { display: flex; gap: 8px; align-items: center; }
.ew-assign-search .text-input { flex: 1; min-width: 0; }
.ew-assign-search .ew-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; }
.ew-pick-list {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 4px; margin-top: 8px;
}
.ew-pick-short { max-height: 150px; }
.ew-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.ew-pick-row:hover { background: var(--surface-2); }
.ew-pick-row input { flex: 0 0 auto; accent-color: var(--accent); }
.ew-pick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ew-pick-name {
  font-size: 0.88rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ew-pick-meta { font-size: 0.74rem; color: var(--muted); }

/* Quizzes as cards. A column of titles all looks the same at a glance; in a
   grid the one you want has a shape and a place. The radio inside each is real
   and merely invisible — arrow keys, focus and the reader announcement all
   come free, and a grid of buttons would have to rebuild them. */
.ew-qgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; margin-top: 8px;
  overflow-y: auto; padding: 2px;
}
/* A step owns the dialog now, so the grid gets room rather than being cut off
   mid-card by whatever was crammed underneath it. Capped against the viewport
   as well as in pixels: on a short window the dialog must still show its
   buttons. */
.ew-qgrid-tall { max-height: min(46vh, 420px); }
.ew-qgrid > .hint { grid-column: 1 / -1; margin: 0; }
.ew-qcard {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.ew-qcard:hover { background: var(--surface-2); }
.ew-qcard input { position: absolute; opacity: 0; pointer-events: none; }
.ew-qcard:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.ew-qcard:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ew-qcard-title {
  font-size: 0.86rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ew-qcard-meta { font-size: 0.73rem; color: var(--accent); font-weight: 600; }
.ew-qcard-doc {
  font-size: 0.71rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Everything most people never need, behind one line they can ignore. */
.ew-disclose {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin-top: 14px; padding: 8px 2px;
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 0.83rem; font-weight: 600; cursor: pointer; text-align: start;
}
.ew-disclose:hover { color: var(--ink); }
.ew-disclose svg { flex: 0 0 auto; transition: transform 0.15s ease; }
.ew-disclose-open svg { transform: rotate(90deg); }
/* Back out of step two. Same row idiom as the disclosure, but it names the
   thing you chose in step one rather than a setting. */
.ew-step-back { margin-top: 0; color: var(--ink); }
.ew-step-back span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ew-step-back:hover { color: var(--accent); }
html[dir="rtl"] .ew-step-back svg { transform: scaleX(-1); }
html[dir="rtl"] .ew-disclose svg { transform: scaleX(-1); }
html[dir="rtl"] .ew-disclose-open svg { transform: scaleX(-1) rotate(-90deg); }

/* ── Share the class ───────────────────────────────────────────── */
.ew-share-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ew-share-row .text-input { flex: 1; min-width: 0; margin: 0; }
.ew-share-row .ew-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; }
.ew-share-code {
  flex: 1; min-width: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.05rem; font-weight: 700; letter-spacing: 2px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); text-align: center;
}

.ew-scroll {
  overflow-y: auto;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* min-width:0 is load-bearing. A flex item defaults to min-width:auto, which
   refuses to shrink below its content — and the reply quote is deliberately
   nowrap, so without this its min-content width beats max-width and the whole
   bubble hangs off the edge of a phone screen. */
.ew-msg {
  display: flex; flex-direction: column;
  max-width: min(620px, 82%); min-width: 0;
  align-self: flex-start; margin-top: 10px;
}
.ew-msg-mine { align-self: flex-end; align-items: flex-end; }
/* Consecutive messages from one person read as one block. */
.ew-msg-cont { margin-top: 2px; }
.ew-msg-who { font-size: 0.72rem; color: var(--muted); margin: 0 6px 3px; }

.ew-bubble {
  padding: 8px 12px;
  border-radius: var(--r-lg);
  background: var(--bubble-in);
  color: var(--ink);
  font-size: 0.93rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ew-msg-mine .ew-bubble { background: var(--accent); color: var(--accent-ink); }
.ew-msg-deleted .ew-bubble { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-style: italic; }
.ew-msg-pending .ew-bubble { opacity: 0.6; }
.ew-msg-failed  .ew-bubble { background: var(--bad); color: #fff; }

.ew-msg-meta { font-size: 0.68rem; color: var(--muted); margin: 3px 6px 0; display: flex; gap: 8px; align-items: center; }
.ew-msg-del {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 0.68rem; text-decoration: underline;
}
.ew-event {
  align-self: center;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  padding: 6px 10px;
  margin-top: 10px;
}
.ew-daysep {
  align-self: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  margin: 14px 0 4px;
}

.ew-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.ew-composer textarea {
  flex: 1;
  resize: none;
  max-height: 140px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.93rem;
  line-height: 1.4;
}
.ew-composer textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ew-send {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ew-send:disabled { opacity: 0.4; cursor: default; }
.ew-send svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .ew-send svg { transform: scaleX(-1); }

.ew-locked {
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Connection state. Silent when things are fine. */
.ew-conn {
  font-size: 0.75rem;
  text-align: center;
  padding: 5px;
  background: #fff4e5;
  color: #8a5a00;
  border-bottom: 1px solid var(--line);
}
.ew-conn[hidden] { display: none; }

/* ── Empty states ──────────────────────────────────────────────── */
.ew-empty {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
}
.ew-empty-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  display: grid; place-items: center;
}
.ew-empty-icon svg { width: 26px; height: 26px; stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ew-empty h2 { margin: 0; font-size: 1.05rem; color: var(--ink); }
.ew-empty p { margin: 0; font-size: 0.88rem; max-width: 38ch; line-height: 1.5; }

/* ── Scrollable page (Explore, More, legal) ────────────────────── */
.ew-page { overflow-y: auto; height: 100%; padding: 20px 16px 40px; }
.ew-page-inner { max-width: 640px; margin: 0 auto; }
.ew-page h1 { font-size: 1.3rem; margin: 0 0 4px; }

/* ── Modal ─────────────────────────────────────────────────────── */
.ew-modal-back {
  position: fixed; inset: 0; z-index: 900;
  background: #0f172a66;
  display: grid; place-items: center;
  padding: 20px;
}
.ew-modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  width: min(420px, 100%);
  box-shadow: 0 20px 60px #0f172a33;
  /* A form with a calendar in it is taller than a phone. Without this the
     dialog centres on the viewport and its top runs off the screen, taking
     the title with it — and there is nothing to scroll, because the backdrop
     is fixed. The 40px is the backdrop's own padding, both ends. */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.ew-modal h2 { margin: 0 0 6px; font-size: 1.05rem; }
.ew-modal p  { margin: 0 0 14px; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.ew-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ── Auth / landing ────────────────────────────────────────────── */
.ew-auth-page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(1000px 600px at 12% 0%, #e8e6ff 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 100%, #dcefff 0%, transparent 55%),
    var(--bg);
}
.ew-auth-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 18px 50px #17203a1a;
}
.ew-auth-lead { text-align: center; margin-bottom: 20px; }
.ew-auth-lead h1 { font-size: 1.35rem; margin: 10px 0 4px; letter-spacing: -0.4px; }
.ew-auth-lead p  { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.ew-auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--surface-2); padding: 4px; border-radius: var(--r-md); }
.ew-auth-tab {
  flex: 1; border: 0; background: none; padding: 8px; border-radius: var(--r-sm);
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.ew-auth-tab-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #17203a1a; }
.ew-auth-form { display: none; flex-direction: column; }
.ew-auth-form-active { display: flex; }
.ew-auth-label { font-size: 0.8rem; font-weight: 600; margin: 10px 0 4px; }
.ew-auth-error { font-size: 0.82rem; color: var(--bad); min-height: 18px; margin: 8px 0 0; }
.ew-auth-error-ok { color: var(--ok); }
.ew-auth-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: 0.76rem; }
.ew-auth-or::before, .ew-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ew-oauth { display: flex; flex-direction: column; gap: 8px; }
.ew-oauth button { width: 100%; }
.ew-auth-foot { margin-top: 18px; font-size: 0.76rem; color: var(--muted); text-align: center; line-height: 1.6; }
.ew-forgot { background: none; border: 0; color: var(--accent); font: inherit; font-size: 0.8rem; cursor: pointer; padding: 8px 0 0; text-align: start; }

/* ── Primitives the shared modules render into ─────────────────── */
/* shared/settings-page.js and shared/legal-page.js build markup with the
   Submitz class names. These are those names, dressed for EdWorld. */
.panel, .dash-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 14px;
}
.dash-main { display: block; }
.dash-heading { font-size: 0.98rem; font-weight: 700; margin: 0 0 8px; }
.settings-field + .settings-field { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.hint { color: var(--muted); font-size: 0.85rem; }

.text-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}
.text-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.primary-btn, .ghost-btn, .file-btn {
  display: inline-block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.primary-btn { background: var(--accent); color: #fff; }
.primary-btn:hover { background: #1f86c0; }
.primary-btn:disabled { opacity: 0.55; cursor: default; }
.ghost-btn { background: var(--surface); color: var(--ink); border-color: var(--line); }
.ghost-btn:hover { background: var(--surface-2); }

/* ── Legal pages (shared/legal-page.js) ────────────────────────── */
.legal-page { max-width: 760px; margin: 0 auto; padding: 28px 18px 60px; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 700; margin-bottom: 18px; }
.legal-back-arrow { font-size: 1.1rem; }
html[dir="rtl"] .legal-back-arrow { transform: scaleX(-1); display: inline-block; }
.legal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; }
.legal-title { font-size: 1.4rem; margin: 0 0 4px; }
.legal-meta { font-size: 0.8rem; color: var(--muted); margin: 0 0 18px; }
.legal-body { font-size: 0.95rem; line-height: 1.72; }
.legal-body h2 { font-size: 1.05rem; margin: 22px 0 8px; }
.legal-body h3 { font-size: 0.95rem; margin: 18px 0 6px; }
.legal-body ul, .legal-body ol { padding-inline-start: 22px; }
.legal-body blockquote { margin: 12px 0; padding-inline-start: 14px; border-inline-start: 3px solid var(--line); color: var(--muted); }
.legal-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.83rem; }

/* ── Language toggle on signed-out surfaces ────────────────────── */
.lang-toggle-fixed {
  position: fixed;
  top: 14px; inset-inline-end: 14px;
  z-index: 50;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── RTL ───────────────────────────────────────────────────────── */
/* Direction comes from <html dir> via shared/i18n.js applyDir(). Layout uses
   logical properties throughout, so only genuinely direction-bearing glyphs
   are mirrored above (the back chevron, the send arrow). */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] input:not([dir]), html[dir="rtl"] textarea:not([dir]) { text-align: right; }
html[dir="rtl"] code, html[dir="rtl"] [dir="ltr"] { direction: ltr; text-align: left; unicode-bidi: isolate; }

@media (prefers-reduced-motion: no-preference) {
  .ew-msg { animation: ew-in 140ms ease-out; }
  @keyframes ew-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ══════════════════════════════════════════════════════════════════
   Rich messages: replies, attachments, reactions to a message, pins,
   mentions, typing, presence, search.
   ══════════════════════════════════════════════════════════════════ */

/* ── Thread header extras ──────────────────────────────────────── */
.ew-online {
  display: inline-flex; align-items: center; gap: 5px;
}
.ew-online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex: 0 0 auto;
}

/* ── Pinned strip ──────────────────────────────────────────────── */
.ew-pinned {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  cursor: pointer;
  font-size: 0.83rem;
}
.ew-pinned[hidden] { display: none; }
.ew-pinned-icon { flex: 0 0 auto; }
.ew-pinned-body { flex: 1; min-width: 0; }
.ew-pinned-label { font-weight: 700; color: #92400e; font-size: 0.72rem; }
.ew-pinned-text {
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ew-pinned-close {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: #92400e; font: inherit;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--r-pill); line-height: 0; padding: 0;
}
.ew-pinned-close:hover { background: #fde68a; }

/* ── Reply quote ───────────────────────────────────────────────── */
.ew-quote {
  border-inline-start: 3px solid var(--accent);
  padding: 4px 8px;
  margin-bottom: 4px;
  background: #ffffff55;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}
.ew-msg-mine .ew-quote { background: #ffffff2e; border-inline-start-color: #ffffffaa; }
.ew-quote-who { font-weight: 700; display: block; }
.ew-quote-text {
  display: block; opacity: 0.8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ew-quote-gone { font-style: italic; opacity: 0.7; }

/* A message the reader has just jumped to. */
@keyframes ew-flash { from { background: #fde68a88; } to { background: transparent; } }
.ew-msg-flash .ew-bubble { animation: ew-flash 1.6s ease-out; }

/* ── Forwarded / mention ───────────────────────────────────────── */
.ew-fwd {
  font-size: 0.72rem; opacity: 0.75; font-style: italic;
  margin-bottom: 3px; display: flex; gap: 4px; align-items: center;
}
.ew-msg-mention .ew-bubble {
  box-shadow: inset 0 0 0 2px var(--accent-2);
}
.ew-mention {
  color: var(--accent); font-weight: 700;
}
.ew-msg-mine .ew-mention { color: #dbd9ff; }

/* ── Attachments ───────────────────────────────────────────────── */
.ew-atts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.ew-att-img {
  display: block; max-width: min(320px, 70vw); max-height: 340px;
  border-radius: var(--r-md); cursor: pointer; background: var(--surface-2);
  object-fit: cover;
}
.ew-att-video { max-width: min(320px, 70vw); border-radius: var(--r-md); }
.ew-att-file {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  background: #ffffff8c; border: 1px solid var(--line);
  text-decoration: none; color: inherit; min-width: 180px;
}
/* A file card sits OUTSIDE the bubble, on the thread background — the bubble
   is only drawn when there is text. Styling it as a translucent white panel
   assumed an accent bubble behind it, so on your own messages it was white
   text at 15% white over a near-white page: legible only if you knew it was
   there. It carries its own accent now, the way .ew-voice already did. */
.ew-msg-mine .ew-att-file {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.ew-att-file-icon { flex: 0 0 auto; }
.ew-att-file-name { font-size: 0.85rem; font-weight: 600; word-break: break-word; }
.ew-att-file-meta { font-size: 0.72rem; opacity: 0.75; }

/* Voice note. Carries its own bubble: without one the controls float on the
   thread background and stop reading as a message. */
.ew-voice {
  display: flex; align-items: center; gap: 10px;
  min-width: 200px; padding: 8px 12px;
  border-radius: var(--r-lg);
  background: var(--bubble-in);
}
.ew-msg-mine .ew-voice { background: var(--accent); color: var(--accent-ink); }
.ew-voice-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.ew-msg-mine .ew-voice-btn { background: #ffffff; color: var(--accent); }
.ew-voice-bar { flex: 1; height: 4px; border-radius: 2px; background: #00000022; position: relative; }
.ew-msg-mine .ew-voice-bar { background: #ffffff55; }
.ew-voice-fill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0%; border-radius: 2px; background: var(--accent); }
.ew-msg-mine .ew-voice-fill { background: #fff; }
.ew-voice-time { flex: 0 0 auto; font-size: 0.74rem; font-variant-numeric: tabular-nums; }

/* Lightbox for a tapped image */
.ew-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: #0b1020ee; display: grid; place-items: center; padding: 20px;
}
.ew-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-md); }
.ew-lightbox-bar {
  position: absolute; top: 0; inset-inline: 0;
  display: flex; gap: 8px; justify-content: flex-end; padding: 12px;
}

/* ── Message actions ───────────────────────────────────────────── */
.ew-msg-actions {
  position: absolute; top: -10px; inset-inline-end: 4px;
  display: none; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 2px; box-shadow: 0 4px 14px #17203a22;
}
.ew-msg { position: relative; }
.ew-msg:hover .ew-msg-actions,
.ew-msg-actions-open { display: flex; }
.ew-act {
  border: 0; background: none; cursor: pointer; padding: 5px 7px;
  border-radius: var(--r-pill); color: var(--muted); line-height: 0;
}
.ew-act:hover { background: var(--surface-2); color: var(--ink); }
.ew-act svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ew-act-on { color: var(--accent-2); }

/* Sheet of actions on touch (no hover to reveal the row above) */
.ew-sheet {
  position: fixed; inset: 0; z-index: 950; background: #0f172a55;
  display: flex; align-items: flex-end;
}
.ew-sheet-inner {
  width: 100%; background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
}
.ew-sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.95rem; text-align: start; color: var(--ink);
  border-radius: var(--r-md);
}
.ew-sheet-item:hover { background: var(--surface-2); }
.ew-sheet-item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ew-sheet-item-bad { color: var(--bad); }

/* ── Seen-by / delivery ────────────────────────────────────────── */
.ew-seen { font-size: 0.68rem; opacity: 0.8; cursor: pointer; }
.ew-seen-tick { color: var(--accent); font-weight: 700; }

/* ── Typing ────────────────────────────────────────────────────── */
.ew-typing {
  padding: 2px 16px 6px; font-size: 0.78rem; color: var(--muted); min-height: 20px;
}
.ew-typing[hidden] { display: none; }
.ew-typing-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-inline-start: 4px; }
.ew-typing-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
  animation: ew-bounce 1.2s infinite;
}
.ew-typing-dots i:nth-child(2) { animation-delay: .15s; }
.ew-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ew-bounce { 0%,60%,100% { opacity:.3; transform: none; } 30% { opacity:1; transform: translateY(-3px); } }

/* ── Composer extras ───────────────────────────────────────────── */
.ew-reply-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}
.ew-reply-strip[hidden] { display: none; }
.ew-reply-strip-body { flex: 1; min-width: 0; }
.ew-reply-strip-who { font-weight: 700; color: var(--accent); display: block; }
.ew-reply-strip-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }

.ew-tray {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface);
}
.ew-tray[hidden] { display: none; }
.ew-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 6px 8px; font-size: 0.8rem; max-width: 220px;
}
.ew-chip img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
.ew-chip-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-chip-x { border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; }
/* Group info → Teachers: chips that wrap, then an email + button on one row. */
.ew-teachers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ew-teacher-add { display: flex; gap: 6px; margin-top: 10px; }
/* Both base rules say width:100%, which in a row means the button takes it all
   and the input is squeezed to nothing; the row decides widths instead. */
.ew-teacher-add .text-input { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.ew-teacher-add .ghost-btn { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; }
.ew-chip-bar { width: 100%; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ew-chip-bar i { display: block; height: 100%; width: 0; background: var(--accent); }

.ew-composer-tools { display: flex; gap: 2px; align-items: center; }
.ew-tool {
  border: 0; background: none; cursor: pointer; padding: 8px;
  border-radius: var(--r-pill); color: var(--muted); line-height: 0;
}
.ew-tool:hover { background: var(--surface-2); color: var(--ink); }
.ew-tool svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ew-tool-rec { color: var(--bad); background: var(--bad-tint); }

/* Emoji picker */
.ew-emoji {
  position: absolute; bottom: 58px; inset-inline-start: 8px; z-index: 40;
  width: min(320px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 12px 34px #17203a26;
  padding: 8px;
}
.ew-emoji[hidden] { display: none; }
.ew-emoji-tabs { display: flex; gap: 2px; margin-bottom: 6px; overflow-x: auto; }
.ew-emoji-tab {
  border: 0; background: none; cursor: pointer; padding: 5px 7px;
  border-radius: var(--r-sm); font-size: 1.05rem; line-height: 1;
}
.ew-emoji-tab-active { background: var(--surface-2); }
.ew-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 2px; max-height: 210px; overflow-y: auto;
}
.ew-emoji-grid button {
  border: 0; background: none; cursor: pointer; font-size: 1.25rem;
  padding: 4px 0; border-radius: var(--r-sm); line-height: 1.2;
}
.ew-emoji-grid button:hover { background: var(--surface-2); }
.ew-composer { position: relative; }

/* Mention autocomplete */
.ew-mentions {
  position: absolute; bottom: 58px; inset-inline: 8px; z-index: 45;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 34px #17203a26;
  max-height: 220px; overflow-y: auto;
}
.ew-mentions[hidden] { display: none; }
.ew-mention-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: start; color: inherit;
}
.ew-mention-row:hover, .ew-mention-row-active { background: var(--surface-2); }

/* Recording bar */
.ew-rec {
  display: flex; align-items: center; gap: 12px; flex: 1;
  padding: 6px 10px; background: var(--bad-tint); border-radius: var(--r-lg);
  font-size: 0.86rem; color: #991b1b;
}
.ew-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #dc2626; animation: ew-pulse 1s infinite; }
@keyframes ew-pulse { 50% { opacity: .25; } }

/* ── Search ────────────────────────────────────────────────────── */
.ew-searchbar { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.ew-searchbar input { margin-top: 0; }
.ew-search-tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.ew-search-tab {
  border: 0; background: var(--surface-2); cursor: pointer;
  padding: 5px 11px; border-radius: var(--r-pill);
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--muted);
}
.ew-search-tab-active { background: var(--accent); color: #fff; }
.ew-search-group-label {
  padding: 10px 16px 4px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.ew-search-snippet { font-size: 0.83rem; color: var(--muted); }
.ew-search-snippet mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }

/* ── Forward / class picker ────────────────────────────────────── */
.ew-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: start; color: inherit;
}
.ew-pick-row input { width: 17px; height: 17px; accent-color: var(--accent); }

/* ── Image albums ──────────────────────────────────────────────── */
/* Several pictures in one message become a grid, not a stack. The tiles are
   square so a mixed-orientation burst still lines up; the full aspect ratio is
   kept for a lone image, where it is the whole point. */
.ew-album {
  display: grid; gap: 3px; margin-bottom: 4px;
  width: min(320px, 70vw);
  border-radius: var(--r-md); overflow: hidden;
}
.ew-album-1 { grid-template-columns: 1fr; }
.ew-album-2 { grid-template-columns: 1fr 1fr; }
.ew-album-3 { grid-template-columns: 1fr 1fr; }
.ew-album-3 .ew-album-cell:first-child { grid-column: span 2; }
.ew-album-4 { grid-template-columns: 1fr 1fr; }
.ew-album-cell { position: relative; aspect-ratio: 1; cursor: pointer; background: var(--surface-2); }
.ew-album-3 .ew-album-cell:first-child { aspect-ratio: 2 / 1; }
.ew-album-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ew-album-more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #0b1020a8; color: #fff; font-size: 1.3rem; font-weight: 700;
}
.ew-att-wrap { position: relative; display: inline-block; cursor: pointer; }
.ew-play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.ew-play svg {
  background: #0b1020a8; border-radius: 50%; padding: 8px; width: 38px; height: 38px;
}

/* ── Assignment notice ─────────────────────────────────────────── */
/* A quiz being assigned is the one event someone has to act on, so it gets a
   card with a way in rather than a grey line of text. */
.ew-notice {
  align-self: center;
  display: flex; align-items: center; gap: 12px;
  width: min(460px, 100%);
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.ew-notice-icon {
  flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--tint); color: var(--accent);
  display: grid; place-items: center;
}
.ew-notice-body { flex: 1; min-width: 0; }
.ew-notice-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--accent);
}
.ew-notice-title {
  font-size: 0.93rem; font-weight: 600; margin-top: 1px;
  overflow-wrap: anywhere;
}
.ew-notice-due { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.ew-notice-go {
  flex: 0 0 auto;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: 0.83rem; font-weight: 600; text-decoration: none;
}
.ew-notice-go:hover { background: #1f86c0; }
.ew-notice-time {
  position: absolute; inset-inline-end: 12px; bottom: 3px;
  font-size: 0.64rem; color: var(--muted);
}
.ew-notice { position: relative; }

/* ── Link preview card ─────────────────────────────────────────── */
.ew-link-card {
  display: flex; gap: 10px; align-items: stretch;
  margin-top: 4px; max-width: min(360px, 100%);
  background: #ffffff8c; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  text-decoration: none; color: inherit;
}
/* Same trap: the preview card is inserted AFTER the bubble, not inside it. */
.ew-msg-mine .ew-link-card {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.ew-link-img {
  flex: 0 0 auto; width: 76px; height: 76px; object-fit: cover; background: var(--surface-2);
}
.ew-link-text {
  flex: 1; min-width: 0; padding: 8px 10px 8px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ew-msg-mine .ew-link-text { padding-inline: 0 10px; }
.ew-link-card:not(:has(.ew-link-img)) .ew-link-text { padding-inline-start: 10px; }
.ew-link-site { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .5px; opacity: .7; }
.ew-link-title {
  font-size: 0.85rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ew-link-desc {
  font-size: 0.76rem; opacity: .75; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Links inside a bubble must be visible against both bubble colours. */
.ew-bubble a { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; }
.ew-msg-mine .ew-bubble a { color: #fff; text-decoration-color: #ffffffaa; }

/* Classes or cohorts — the same classes, the school's grouping or none.
   It sits on the head's own line beside the schedule and add buttons, and
   takes the slack so they stay at the end. The pane is ~340px, so the type
   steps down a little to fit all three on one row. */
.ew-seg.ew-list-seg { flex: 1 1 auto; min-width: 0; margin: 0; padding: 3px; }
.ew-list-seg .ew-seg-btn {
  padding: 5px 6px; font-size: 0.78rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ew-avatar-cohort { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
/* Leaving a cohort is undoing something that happened to this pane, so the
   control lives in the pane rather than in the header above it. */
.ew-cohort-back {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; text-align: start;
}
.ew-cohort-back:hover { background: var(--line); }
.ew-cohort-back span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[dir="rtl"] .ew-cohort-back svg { transform: scaleX(-1); }

/* The drop target for a file that becomes a quiz. */
.ew-upload-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; padding: 22px 16px;
  border: 2px dashed var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.ew-upload-drop:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
.ew-upload-drop span { word-break: break-word; text-align: center; }

/* ── Group settings: three toggles on one row ───────────────────── */
/* Each setting is a yes/no. A labelled two-option control spent a heading, two
   buttons and a line of explanation saying so — 327px of a 619px dialog for
   three booleans. A chip that is lit or not says it in a quarter of that.
   Each is named for the state it turns ON, so unlit means the opposite. */
.ew-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ew-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.ew-toggle:hover { border-color: var(--accent); color: var(--accent); }
.ew-toggle svg { opacity: 0; flex: 0 0 auto; transition: opacity .12s; }
.ew-toggle-on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.ew-toggle-on:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.ew-toggle-on svg { opacity: 1; }
.ew-setting-hint { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.35; min-height: 16px; }

/* ── Explore ───────────────────────────────────────────────────── */
.ew-exp-head { margin-bottom: 10px; }
.ew-exp-title { font-size: 1.05rem; margin: 4px 0 2px; }
.ew-exp-row { cursor: default; }
.ew-exp-btn {
  flex: 0 0 auto; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; cursor: pointer;
  padding: 7px 14px; font: inherit; font-size: 0.8rem; font-weight: 600;
}
.ew-exp-btn:hover { background: var(--accent-2); }
.ew-exp-btn-wait, .ew-exp-btn:disabled {
  background: var(--surface-2); color: var(--muted); cursor: default;
}

/* ── Crop and mark up a photo ───────────────────────────────────── */
/* Full screen and dark, because the thing being judged is the picture and
   everything else should get out of its way. Above the sheets (950) so the
   chooser that opened it cannot sit on top. */
.ew-photo {
  position: fixed; inset: 0; z-index: 960;
  background: #0b1020;
  display: grid; grid-template-rows: auto 1fr auto;
  color: #fff;
  /* The canvas handles its own drags; the browser must not also scroll or
     zoom the page under the finger. */
  touch-action: none;
  user-select: none;
}
.ew-photo-bar {
  display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
}
.ew-photo-bar .ew-seg { flex: 0 0 auto; margin: 0; background: #ffffff1f; }
.ew-photo-seg { margin-inline: auto; }
.ew-photo-seg .ew-seg-btn { color: #ffffffb3; padding: 6px 14px; }
.ew-photo-seg .ew-seg-on { background: #ffffff; color: #0b1020; box-shadow: none; }
.ew-photo-btn {
  flex: 0 0 auto; border: 0; background: none; color: #fff;
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-sm);
}
.ew-photo-btn:hover { background: #ffffff1f; }
.ew-photo-done { color: #a5b4fc; }
.ew-photo-stage { position: relative; min-height: 0; overflow: hidden; }
.ew-photo-stage canvas { display: block; cursor: crosshair; }
.ew-photo-tools { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
.ew-photo-colors {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 6px;
}
.ew-photo-color {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid #ffffff55; padding: 0;
}
.ew-photo-color-on { border-color: #fff; box-shadow: 0 0 0 3px #ffffff40; }
.ew-photo-width {
  display: grid; place-items: center; width: 30px; height: 28px;
  border: 1px solid #ffffff33; border-radius: var(--r-sm);
  background: none; cursor: pointer; padding: 0;
}
.ew-photo-width i { display: block; border-radius: 50%; background: #fff; }
.ew-photo-width-on { background: #ffffff26; border-color: #fff; }
.ew-photo-sep { width: 1px; height: 22px; background: #ffffff33; }
.ew-photo-undo { margin-inline-start: auto; }
.ew-photo-hint { font-size: 0.78rem; color: #ffffff8c; min-height: 18px; }

/* ── Creating a class ──────────────────────────────────────────── */
.ew-list-head {
  /* flex-end, not space-between: with the switcher gone — an account with no
     cohorts never sees it — space-between would push the two buttons to
     opposite ends of an otherwise empty row. */
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
/* The picture button doubles as the preview once one is chosen. */
.ew-nc-pic {
  width: 56px; height: 56px; flex: 0 0 auto;
  border: 0; cursor: pointer; padding: 0;
  background-size: cover; background-position: center;
}
.ew-nc-pic-set svg { display: none; }

/* Class name(s): chips for each committed name, the field after them. */
.ew-nc-top { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.ew-nc-names {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 42px; cursor: text; padding: 6px 8px;
}
.ew-nc-names input {
  flex: 1 1 120px; min-width: 120px; border: 0; outline: 0; background: none;
  font: inherit; color: inherit; padding: 4px 2px;
}
.ew-nc-names:focus-within { border-color: var(--accent); }
.ew-nc-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px 4px 3px 10px; border-radius: var(--r-pill);
  background: var(--tint); color: var(--ink); font-size: 0.85rem; font-weight: 600;
}
.ew-nc-chip bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-nc-chip button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 1rem; line-height: 1; padding: 0 4px;
}
.ew-nc-chip button:hover { color: var(--bad); }
.ew-nc-multi-hint { margin: 4px 0 0; font-size: 0.74rem; }
/* Several names: the picture shrinks (still there, for one shared picture)
   and the names get the room. */
.ew-nc-top.ew-nc-multi { align-items: flex-start; }
.ew-nc-top.ew-nc-multi .ew-nc-pic { width: 34px; height: 34px; margin-top: 22px; }
.ew-nc-top.ew-nc-multi .ew-nc-pic svg { width: 14px; height: 14px; }
.ew-nc-top.ew-nc-multi .ew-nc-names { min-height: 96px; align-content: flex-start; }

.ew-join-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px; border-radius: var(--r-sm); cursor: pointer;
}
.ew-join-opt:hover { background: var(--surface-2); }
.ew-join-opt input { margin-top: 3px; accent-color: var(--accent); }
.ew-join-opt strong { display: block; font-size: 0.88rem; font-weight: 600; }
.ew-join-opt small { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 1px; }

/* A class picture replaces its initials tile. */
.ew-avatar-img { background-size: cover; background-position: center; color: transparent; }

/* ── Join or create chooser ────────────────────────────────────── */
/* The plus is an icon and nothing else, so the two ways into a class are a
   real choice rather than one default with the other tucked away. */
.ew-newclass-btn {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--accent);
  cursor: pointer; line-height: 0;
}
.ew-newclass-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* The sort button while "needs attention" is on: lit, so a list that is not in
   date order says why. */
.ew-newclass-btn.ew-sort-on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* On a wide screen a bottom sheet would be odd; centre it instead.
   EVERY sheet, not just .ew-sheet-centered. The message action list is a
   plain .ew-sheet, so on a desktop it ran the full width of the window —
   eight short rows stretched across two thousand pixels, with the labels
   stranded in the far corner. A sheet is a phone idiom; at this width it
   should be a panel. */
@media (min-width: 700px) {
  .ew-sheet { align-items: center; justify-content: center; }
  .ew-sheet-inner {
    width: min(420px, 100%); border-radius: var(--r-lg);
  }
}
.ew-chooser { padding: 8px; }
.ew-chooser-item.ew-chooser-danger strong,
.ew-chooser-item.ew-chooser-danger .ew-chooser-icon { color: var(--bad); }
/* Long-pressable session controls: no iOS callout or text selection under the
   finger while it is held. */
#ewSessFab, .ew-due-live, .ew-due-next { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ew-chooser-item {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  padding: 14px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: start; color: var(--ink);
  border-radius: var(--r-md);
}
.ew-chooser-item:hover { background: var(--surface-2); }
.ew-chooser-icon {
  flex: 0 0 auto; width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: var(--tint); color: var(--accent);
  display: grid; place-items: center;
}
.ew-chooser-icon svg {
  width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ew-chooser-item strong { display: block; font-size: 0.95rem; font-weight: 600; }
.ew-chooser-item small { display: block; font-size: 0.79rem; color: var(--muted); margin-top: 2px; }

/* An invite code is six characters and easier to read spaced out. */
.ew-code-input {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.35rem; letter-spacing: 0.32em;
  text-align: center; text-transform: uppercase;
  padding: 12px; direction: ltr;
}

/* ── Live sessions ─────────────────────────────────────────────── */
/* The floating button sits above the composer inside the thread. Dimmed means
   "nothing is happening yet" — it is still there for admins, because having to
   hunt for where to start a call is worse than a faint button. */
.ew-thread { position: relative; }
.ew-fab {
  position: absolute;
  inset-inline-end: 18px;
  /* Above the typing line and the message bar, whatever height they are. */
  bottom: calc(var(--ew-below, 70px) + 14px);
  z-index: 30;
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 0.87rem; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px #17203a2e;
  transition: opacity .15s, transform .15s;
}
.ew-fab svg { flex: 0 0 auto; }
.ew-fab:hover { transform: translateY(-1px); }

.ew-fab-idle {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
  opacity: 0.55;
}
.ew-fab-idle:hover { opacity: 1; color: var(--accent); }

.ew-fab-live {
  background: var(--ok);
  color: #fff;
}
.ew-fab-live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; animation: ew-livedot 1.4s infinite;
}
@keyframes ew-livedot { 50% { opacity: .35; } }

/* The marker on a class card. */
/* Sized to be pressed rather than merely read: this is a control, and a 20px
   chip on a phone is a control you miss. It sits in the card's own column, so
   the width it takes is width the preview text gives up, never width it
   overlaps. */
.ew-pill {
  grid-area: session;
  /* Its own row, indented past the avatar so it reads as belonging to the
     class above it. Beside the name it would be competing for a 340px pane,
     and the name — the thing you are actually scanning for — lost. */
  justify-self: start;
  margin-inline-start: 72px;      /* 16 padding + 44 avatar + 12 gap */
  margin-bottom: 10px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
  margin-inline-end: 14px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 0.76rem; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.ew-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ew-pill-live { background: var(--ok); color: #fff; }
.ew-pill-live:hover { filter: brightness(1.08); }
.ew-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: ew-livedot 1.4s infinite; }
.ew-pill-soon { background: var(--surface); border-color: var(--line); color: var(--muted); }
.ew-pill-soon:hover { border-color: var(--accent); color: var(--accent); }

/* ── The due strip ──────────────────────────────────────────────────
   A horizontal carousel of what this student still owes. It scrolls on its
   own rather than wrapping, so one busy class cannot push every other class
   off the screen; snap points stop it resting mid-chip. */
.ew-due {
  grid-area: due;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Indented to the class name (16px row padding + 44px avatar + 12px gap),
     so the chips read as belonging to the text, not sitting under the picture. */
  padding-block: 0 10px;
  padding-inline: 72px 16px;
  /* Snapping aligns a chip to the SCROLLPORT edge, which ignores padding and
     would park the first chip flush against the pane. scroll-padding is what
     the snap actually respects. */
  scroll-padding-inline-start: 72px;
  margin-top: -2px;
  scrollbar-width: thin;
}
.ew-due::-webkit-scrollbar { height: 4px; }
.ew-due::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.ew-due-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  max-width: 200px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.ew-due-chip:hover { border-color: var(--accent); background: var(--surface-2); }
.ew-due-icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); }
.ew-due-text { min-width: 0; display: flex; flex-direction: column; }
.ew-due-title {
  font-size: 0.78rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ew-due-when { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
/* Close enough to matter. Colour is not the only signal — the text says the
   day either way. */
.ew-due-soon { border-color: var(--bad); }
.ew-due-soon .ew-due-icon,
.ew-due-soon .ew-due-when { color: var(--bad); }

/* Work waiting to be marked (admins only). Amber, so it reads as "your move"
   without borrowing the red that means a deadline is close. */
.ew-due-mark { border-color: #f5c27a; }
.ew-due-mark .ew-due-icon,
.ew-due-mark .ew-due-when { color: #b45309; }

/* A session happening now: the green the live pill used, and a button reset
   since it joins rather than links. */
.ew-due-live { font: inherit; text-align: start; cursor: pointer;
  background: var(--ok); border-color: var(--ok); color: #fff; }
.ew-due-live:hover { background: var(--ok); border-color: var(--ok); filter: brightness(1.08); }
.ew-due-live .ew-due-when { color: #ffffffd9; }
.ew-due-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A count chip: one line, a button rather than a link. */
.ew-due-count { font: inherit; cursor: pointer; padding: 6px 11px; gap: 6px; }
.ew-due-count .ew-due-title { font-size: 0.76rem; }


/* Kind picker in the session form. */
.ew-kinds { display: flex; gap: 6px; margin-bottom: 12px; }
.ew-kind {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer;
}
.ew-kind-on { border-color: var(--accent); color: var(--accent); background: var(--tint); }
.ew-kind:disabled { opacity: 0.45; cursor: not-allowed; }

.ew-when-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.ew-when-row .text-input { margin-top: 4px; }

/* Now vs a date. A two-way switch rather than a tickbox, because "now" is the
   common case and a ticked box that hides two fields below it reads as an
   afterthought rather than as the default. */
.ew-seg {
  display: flex; gap: 4px; margin: 14px 0 0;
  background: var(--surface-2); padding: 4px; border-radius: var(--r-md);
}
.ew-seg-btn {
  flex: 1; border: 0; background: none; padding: 8px; border-radius: var(--r-sm);
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.ew-seg-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #17203a1a; }

/* The date the form shows. The month itself is a tap away, in its own sheet:
   fifteen lines of grid in a dialog that is read once pushed the times and the
   buttons off a phone. */
.ew-datefield {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.92rem; cursor: pointer; text-align: start;
}
.ew-datefield:hover { background: var(--surface-2); }
.ew-datefield span { flex: 1; min-width: 0; }
.ew-datefield svg { flex: 0 0 auto; color: var(--muted); }

/* The month. One tap picks a day, a second picks the far end of a span. */
.ew-cal-sheet { padding: 14px 14px max(14px, env(safe-area-inset-bottom)); }
.ew-cal-sheet .ew-cal { margin-top: 0; }
.ew-cal { margin-top: 12px; }
.ew-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ew-cal-head strong { flex: 1; text-align: center; font-size: 0.88rem; }
.ew-cal-nav {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--muted); cursor: pointer;
}
/* The grid itself needs no mirroring — in RTL it lays out right-to-left on its
   own, which is how an Arabic month is read. Only the arrows are drawn. */
html[dir="rtl"] .ew-cal-nav svg { transform: scaleX(-1); }
.ew-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ew-cal-dow span {
  text-align: center; padding: 2px 0;
  font-size: 0.68rem; font-weight: 700; color: var(--muted);
}
.ew-cal-day {
  padding: 7px 0; border: 0; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: 0.8rem; font-variant-numeric: tabular-nums;
  color: var(--ink); cursor: pointer; text-align: center;
}
.ew-cal-day:hover:not(:disabled) { background: var(--surface-2); }
.ew-cal-day:disabled { color: #c9cddb; cursor: default; }
.ew-cal-pad { visibility: hidden; }
.ew-cal-today { box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
/* Distinctly darker than the hover tint (--surface-2, #eef0f6). At var(--tint)
   the two were a hair apart and a span looked like wherever the mouse was. */
.ew-cal-mid { background: #ffd3d3; color: var(--accent); font-weight: 600; }
.ew-cal-edge { background: var(--accent); color: #fff; font-weight: 700; box-shadow: none; }
.ew-cal-hint { margin: 6px 0 2px; font-size: 0.78rem; min-height: 18px; }

.ew-weekdays { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 10px; }
.ew-weekday {
  flex: 1 1 auto; min-width: 40px;
  padding: 6px 4px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer;
}
.ew-weekday-on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Schedule across all classes. */
.ew-modal-wide { width: min(560px, 100%); }
.ew-sheet-title { padding: 10px 14px 6px; }
.ew-sheet-title strong { display: block; font-size: 0.95rem; }
.ew-sheet-title small { display: block; font-size: 0.78rem; color: var(--muted); }

.ew-sched-day {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 4px;
}
.ew-sched-day:first-child { margin-top: 0; }
.ew-sched-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: var(--r-sm);
}
.ew-sched-row:hover { background: var(--surface-2); }
.ew-sched-live { background: #e9f9ee; }
.ew-sched-time {
  flex: 0 0 48px; font-variant-numeric: tabular-nums;
  font-size: 0.82rem; font-weight: 600; color: var(--muted);
}
.ew-sched-icon { flex: 0 0 auto; color: var(--accent); line-height: 0; }
.ew-sched-body { flex: 1; min-width: 0; }
.ew-sched-title {
  display: block; font-size: 0.89rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ew-sched-class { display: block; font-size: 0.75rem; color: var(--muted); }
.ew-sched-go {
  flex: 0 0 auto; border: 0; border-radius: var(--r-pill);
  background: var(--ok); color: #fff; cursor: pointer;
  padding: 5px 12px; font: inherit; font-size: 0.77rem; font-weight: 600;
}

/* The soon-pill carries a small calendar glyph, so a time on a class card is
   not mistaken for the timestamp of the last message sitting beside it. */
.ew-pill-soon svg { opacity: 0.75; }

/* ── Help & Support (ew-help.js) ─────────────────────────────────── */
.ew-tk .ew-panel-head { padding-inline: 2px; }
.ew-tk-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ew-tk-form {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-decoration: none;
}
.ew-tk-form:hover { border-color: var(--accent); background: var(--surface-2); }
.ew-tk-form-ico {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--tint); color: var(--accent);
}
.ew-tk-form-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ew-tk-form-text strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-tk-form-text small { font-size: 0.76rem; color: var(--muted); }
.ew-tk-list { display: flex; flex-direction: column; gap: 6px; }
.ew-tk-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-decoration: none;
}
.ew-tk-row:hover { background: var(--surface-2); }
.ew-tk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ew-tk-row-title { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-tk-row-unread .ew-tk-row-title { font-weight: 700; }
.ew-tk-row-meta { font-size: 0.74rem; color: var(--muted); }
.ew-tk-num { color: var(--muted); font-weight: 600; margin-inline-end: 4px; }
.ew-tk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--unread); margin-inline-end: 6px; vertical-align: middle; }
.ew-tk-status { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); }
.ew-tk-open        { background: #e0e7ff; color: #3730a3; }
.ew-tk-in_progress { background: #fef3c7; color: #92400e; }
.ew-tk-resolved    { background: #dcfce7; color: #166534; }
.ew-tk-closed      { background: var(--surface-2); color: var(--muted); }
.ew-tk-back {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px;
  font-size: 0.85rem; font-weight: 600; color: var(--muted); text-decoration: none;
}
.ew-tk-back:hover { color: var(--accent); }
.ew-tk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin: 0; }
.ew-tk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ew-tk-head h1 { font-size: 1.1rem; margin: 0; }
.ew-tk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
.ew-tk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ew-tk-btn { width: auto !important; margin-top: 0 !important; padding: 8px 14px; text-decoration: none; display: inline-block; }
.ew-seg.ew-tk-statuses { margin: 12px 0 0; }
.ew-tk-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ew-tk-people-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); margin-inline-end: 4px; }
.ew-tk-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2);
  font: inherit; font-size: 0.78rem;
}
.ew-tk-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 0.95rem; padding: 0 0 0 2px; }
.ew-tk-chip-add { cursor: pointer; color: var(--accent); border-style: dashed; background: none; }
.ew-tk-answers { display: flex; flex-direction: column; gap: 10px; }
.ew-tk-answer dt { font-size: 0.74rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.ew-tk-answer dd { margin: 0; font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ew-tk-img { max-width: 100%; max-height: 280px; border-radius: var(--r-sm); }
.ew-tk-rate { display: flex; gap: 4px; margin-bottom: 8px; }
.ew-tk-star { border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--line); cursor: pointer; padding: 0 2px; }
.ew-tk-star.on { color: #f59e0b; }
.ew-tk-stars { color: #f59e0b; letter-spacing: 1px; }
.ew-tk-stars-lg { font-size: 1.3rem; }
.ew-tk-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ew-tk-event { text-align: center; font-size: 0.74rem; color: var(--muted); }
.ew-tk-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.ew-tk-mine { align-self: flex-end; align-items: flex-end; }
.ew-tk-who { font-size: 0.72rem; color: var(--muted); margin-bottom: 2px; }
.ew-tk-bubble {
  padding: 8px 12px; border-radius: 14px; background: var(--bubble-in);
  font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ew-tk-mine .ew-tk-bubble { background: var(--accent); color: #fff; }
.ew-tk-composer { display: flex; gap: 8px; align-items: flex-end; }
.ew-tk-composer textarea { flex: 1; margin: 0; resize: vertical; }
.ew-tk-pick { max-height: 280px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ew-tk-pick-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font: inherit; cursor: pointer; text-align: start;
}
.ew-tk-pick-row:hover { background: var(--surface-2); }
.ew-tk-pick-row small { color: var(--muted); font-size: 0.74rem; }

/* Group info: make a member an admin from the members list. */
.ew-make-admin {
  flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--accent); border-radius: var(--r-pill);
  background: var(--surface); color: var(--accent); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.ew-make-admin:hover { background: var(--accent); color: #fff; }
.ew-make-admin:disabled { opacity: 0.5; cursor: default; }

/* The + menu's session class picker. */
.ew-sess-classes { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ew-sess-class {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.ew-sess-class:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.ew-sess-class span { display: flex; flex-direction: column; min-width: 0; }
.ew-sess-class small { color: var(--muted); font-size: 0.74rem; }

/* My Classes head: the list switch as one button, and Submit / Mark / Track
   across every class. */
.ew-list-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.ew-list-toggle:hover { border-color: var(--accent); color: var(--accent); }
.ew-head-fill { flex: 1; }
.ew-gbtn { position: relative; }
.ew-gbtn .ew-seg-badge { top: -6px; inset-inline-end: -6px; border-color: var(--surface); }

/* The views row under the list head: the same icons a class has, across
   every class. */
.ew-list-views { padding: 0 16px 8px; }
.ew-list-views .ew-seg.ew-seg-icons { margin: 0; display: flex; }
.ew-list-views .ew-seg-icons .ew-seg-btn { flex: 1 1 0; width: auto; }

/* Search with + beside it; then the list dropdown and the view icons. */
.ew-list-top {
  display: flex; align-items: flex-start; gap: 4px; padding-inline-end: 12px;
  border-bottom: 1px solid var(--line);
}
.ew-list-top #ewSearchHost { flex: 1; min-width: 0; }
.ew-list-top .ew-searchbar { border-bottom: 0; }
.ew-list-top > .ew-newclass-btn { flex: 0 0 auto; margin-top: 13px; }
.ew-list-sort-ico { flex: 0 0 auto; color: var(--muted); }
.ew-list-toggle.ew-sort-on .ew-list-sort-ico { color: var(--accent); }
.ew-list-head .ew-seg.ew-seg-icons { margin: 0; }
.ew-menu-back { position: fixed; inset: 0; z-index: 950; }
.ew-menu {
  position: fixed; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 12px 32px #17203a2e;
}
.ew-menu-head { font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.ew-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: 0.88rem; color: var(--ink); cursor: pointer; text-align: start;
}
.ew-menu-item:hover { background: var(--surface-2); }
.ew-menu-on { color: var(--accent); font-weight: 700; }

/* The Schedule view's floating "Schedule a session" (admins): the accent, and
   lower than the chat's session button since there is no composer under it. */
.ew-fab.ew-fab-sched { background: var(--accent); color: #fff; bottom: 22px; }

/* On a phone the list's controls are thumb-sized: the dropdown, the view
   icons beside it and the + by the search box. */
@media (max-width: 600px) {
  .ew-list-toggle { height: 38px; padding: 0 14px; font-size: 0.92rem; }
  .ew-list-sort-ico { width: 19px; height: 19px; }
}

/* Submit and Mark lay their assignments out as a grid of cards. */
.ew-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ew-work-grid > .ew-file-row { margin-bottom: 0; min-width: 0; align-items: flex-start; }
.ew-work-grid .ew-file-name {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* One size for the view icons everywhere — a class's header and the row on
   My Classes — so the same icon is never two sizes. */
.ew-seg.ew-seg-icons .ew-seg-btn { width: 32px; height: 32px; }
.ew-seg.ew-seg-icons .ew-seg-btn svg { width: 20px; height: 20px; }

/* The list head row: dropdown left; the view icons and + to the right. */
.ew-list-head { gap: 6px; }
.ew-list-top > .ew-newclass-btn { width: 38px; height: 38px; margin-top: 9px; }

/* Search on Submit / Mark / Track pages; what it filters out is hidden even
   where a class sets display. */
.ew-panel-search { margin: 4px 0 10px !important; }
.ew-panel [hidden] { display: none !important; }
.ew-work-grid > .ew-subs-row { margin-bottom: 0; min-width: 0; }
.ew-work-grid .ew-file-meta { white-space: normal; }

/* A recording in the schedule: a link styled as a session row. */
.ew-rec-row { color: inherit; text-decoration: none; }
.ew-rec-row:hover { background: var(--surface-2); }

/* ── An organization's page (ew-orgpage.js) ─────────────────────── */
.ew-op-sec { margin: 18px 0 6px; }
.ew-op-head h3 { margin: 0; font-size: 1.05rem; }
.ew-op-head p { margin: 2px 0 8px; color: var(--muted); font-size: 0.86rem; }
.ew-op-card {
  display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.ew-op-card:hover { border-color: var(--accent); }
.ew-op-pic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); background-size: cover; background-position: center;
}
.ew-op-pic-cohort { border-radius: var(--r-md); }
.ew-op-pic-page { background: var(--tint); color: var(--accent); border-radius: var(--r-md); }
.ew-op-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ew-op-name { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-op-meta { font-size: 0.74rem; color: var(--muted); }
.ew-op-list { display: flex; flex-direction: column; gap: 6px; }
.ew-op-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ew-op-vgrid .ew-op-card, .ew-op-hgrid .ew-op-card { flex-direction: column; align-items: flex-start; }
.ew-op-vgrid .ew-op-body, .ew-op-hgrid .ew-op-body { width: 100%; }
.ew-op-hgrid {
  display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 180px;
  gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity;
}
.ew-op-hgrid > * { scroll-snap-align: start; }
.ew-op-carousel { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.ew-op-carousel .ew-op-card {
  flex: 0 0 260px; flex-direction: column; align-items: flex-start; padding: 14px; scroll-snap-align: start;
}
.ew-op-carousel .ew-op-pic { width: 64px; height: 64px; font-size: 1rem; }
.ew-op-carousel .ew-op-body { width: 100%; }
.ew-op-banner {
  position: relative; margin: 18px 0 6px; min-height: 150px; border-radius: var(--r-md); overflow: hidden;
  display: flex; align-items: flex-end;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); background-size: cover; background-position: center;
}
.ew-op-banner.ew-op-click { cursor: pointer; }
.ew-op-banner-text {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 16px; color: #fff;
  background: linear-gradient(transparent, #0000008c);
}
.ew-op-banner-text strong { font-size: 1.2rem; }
.ew-op-banner-text span { font-size: 0.88rem; opacity: 0.92; }
.ew-op-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 2px; }
.ew-op-tab {
  flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--ink);
}
.ew-op-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ew-op-edit { margin-inline-start: 8px; font-size: 0.8rem; font-weight: 600; color: var(--accent); }

/* ── Organization pages editor (ew-orgpages.js) ─────────────────── */
.ew-ope .text-input { margin-top: 6px; }
.ope-page-top { display: flex; align-items: center; gap: 10px; }
.ope-page-top .text-input { flex: 1; font-weight: 700; margin-top: 0; }
.ope-home { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.ope-sec {
  margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.ope-sec-top { display: flex; align-items: center; gap: 8px; }
.ope-sec-top select { flex: 0 1 220px; margin-top: 0; }
.ope-sec-moves { margin-inline-start: auto; display: flex; gap: 4px; }
.ope-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ope-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 4px 6px 4px 10px; border-radius: var(--r-pill); background: var(--tint); font-size: 0.84rem; font-weight: 600;
}
.ope-chip small { font-weight: 500; color: var(--muted); font-size: 0.7rem; }
.ope-chip bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ope-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 0.95rem; padding: 0 3px; }
.ope-chip button:hover { color: var(--accent); }
.ope-add {
  padding: 4px 12px; border: 1px dashed var(--accent); border-radius: var(--r-pill); background: none;
  color: var(--accent); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
.ope-banner-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ope-banner-img {
  width: 200px; height: 80px; border: 1px dashed var(--line); border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-2) center / cover; color: var(--muted); font: inherit; font-size: 0.8rem;
}
.ope-banner-target { display: flex; flex-direction: column; gap: 4px; }
.ope-banner-target small { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.ope-add-sec { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.ope-bar {
  position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 10px 0;
  background: var(--bg); border-top: 1px solid var(--line);
}


/* Settings as a list of cards (ew-more.js). */
.ew-more-list { display: flex; flex-direction: column; gap: 8px; }
.ew-more-card { width: 100%; font: inherit; text-align: start; cursor: pointer; }
.ew-more-card .ew-more-chev { margin-inline-start: auto; flex: 0 0 auto; color: var(--muted); }
html[dir="rtl"] .ew-more-chev { transform: scaleX(-1); }

/* ── A recording on a page of its own (ew-recording.js) ─────────── */
.ew-rp-body { margin: 0; background: #0b1020; height: 100dvh; overflow: hidden; }
.ew-rp { display: flex; flex-direction: column; height: 100dvh; background: #0b1020; }
.ew-rp-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top));
  background: #0b1020; color: #fff; touch-action: none;
}
.ew-rp-back, .ew-rp-nav {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #ffffff1f; color: #fff; font: inherit; font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.ew-rp-back:hover, .ew-rp-nav:hover { background: #ffffff38; }
.ew-rp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ew-rp-title strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-rp-title small { color: #ffffffb3; font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-rp-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.ew-rp-stage iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff;
  transition: transform .3s ease; transform: translateY(0);
}
.ew-rp-stage iframe.in-below  { transform: translateY(100%); }
.ew-rp-stage iframe.in-above  { transform: translateY(-100%); }
.ew-rp-stage iframe.out-above { transform: translateY(-100%); }
.ew-rp-stage iframe.out-below { transform: translateY(100%); }
.ew-rp-handle {
  display: grid; place-items: center; height: 34px; padding-bottom: env(safe-area-inset-bottom);
  background: #0b1020; touch-action: none;
}
.ew-rp-handle span { width: 44px; height: 5px; border-radius: 3px; background: #ffffff59; }
@media (min-width: 900px) { .ew-rp-handle { display: none; } }

/* A grade in Track is a link to its feedback / the marking page. */
.ew-gs-link { color: inherit; text-decoration: none; display: block; margin: -7px -10px; padding: 7px 10px; }
.ew-gs-link:hover { background: var(--surface-2); text-decoration: underline; }
a.ew-gs-mine { text-decoration: none; color: inherit; cursor: pointer; }
a.ew-gs-mine:hover { background: var(--surface-2); }

/* Plan view: a class's plan tables */
.ewp-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.ewp { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
.ewp th, .ewp td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; min-width: 120px; }
.ewp th { position: sticky; top: 0; background: var(--bg, #fff); font-weight: 700; white-space: nowrap; }
.ewp .ewp-h, .ewp .ewp-c, .ewp .ewp-a { min-width: 0; width: 1%; white-space: nowrap; text-align: center; }
.ewp-in { width: 100%; min-width: 110px; border: 1px solid transparent; border-radius: 8px; padding: 5px 6px; font: inherit; background: transparent; color: inherit; }
.ewp-in:hover, .ewp-in:focus { border-color: var(--line); background: var(--card, #fff); outline: none; }
.ewp-done td { opacity: 0.6; }
.ewp-drag { cursor: grab; color: var(--muted); user-select: none; padding: 0 4px; }
.ewp-type { color: var(--muted); font-weight: 400; }
.ewp-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ewp-file { position: relative; display: inline-flex; }
.ewp-file img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.ewp-x { position: absolute; top: -6px; inset-inline-end: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: #0008; color: #fff; cursor: pointer; line-height: 1; }
.ewp-add-file { border: 1px dashed var(--line); background: transparent; border-radius: 8px; padding: 4px 8px; cursor: pointer; color: var(--muted); font: inherit; }

/* Progress Tracker timeline: a line, a dot per entry (filled = complete) */
.ewp-line { list-style: none; margin: 4px 0 0; padding: 0; }
.ewp-line li { position: relative; padding: 0 0 14px 34px; }
.ewp-line li::before { content: ""; position: absolute; inset-inline-start: 10px; top: 14px; bottom: -2px; width: 2px; background: var(--line); }
.ewp-line li:last-child::before { display: none; }
.ewp-dot { position: absolute; inset-inline-start: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  background: var(--bg, #fff); border: 2.5px solid var(--muted); }
.ewp-l-now .ewp-dot { width: 20px; height: 20px; inset-inline-start: 1px; top: 1px; border-color: var(--accent); }
.ewp-l-done .ewp-dot { background: var(--accent); border-color: var(--accent); }
.ewp-l-card { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--surface, #fff); }
.ewp-l-row small { display: block; color: var(--muted); font-weight: 700; font-size: 0.72rem; margin-top: 4px; }
.ewp-l-row:first-child small { margin-top: 0; }
.ewp-skip td { color: var(--muted); font-style: italic; background: repeating-linear-gradient(135deg, transparent 0 6px, #0000000a 6px 12px); }
.ewp-l-skip .ewp-dot { background: transparent; border-style: dashed; border-color: var(--muted); }
.ewp-l-skiptxt { color: var(--muted); font-style: italic; padding: 2px 0 8px; }

/* Progress Tracker: the continuous line of days */
.ewp-days { padding-bottom: 40vh; }
.ewp-days li.ewp-month { padding: 10px 0 8px 34px; font-weight: 800; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ewp-days li.ewp-month::before { display: none; }
.ewp-day.ewp-empty { padding-bottom: 6px; }
.ewp-day.ewp-empty .ewp-dot { width: 10px; height: 10px; inset-inline-start: 6px; top: 6px; border-width: 2px; border-color: var(--line); }
.ewp-day.ewp-empty .ewp-d-head { color: var(--muted); font-size: 0.8rem; }
.ewp-d-head { font-weight: 700; font-size: 0.86rem; padding: 1px 0 4px; display: flex; gap: 8px; align-items: center; }
.ewp-chip { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 0.68rem; font-weight: 800; }
.ewp-chip-draft { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.ewp-today .ewp-d-head { color: var(--accent); }
.ewp-today:not(.ewp-empty) .ewp-l-card, .ewp-today.ewp-empty .ewp-d-head { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 12px; }
.ewp-tap { cursor: pointer; }
.ewp-tap:hover .ewp-l-card { border-color: var(--accent); }
.ewp-range { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 4px 2px 10px; font-size: 0.82rem; }
.ewp-range input { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; background: var(--surface, #fff); color: inherit; }

/* The circle of an unreleased entry is a release button: a bigger target, and it says so on hover. */
.ewp-dot-act { cursor: pointer; }
.ewp-dot-act::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.ewp-dot-act:hover { box-shadow: 0 0 0 4px #299bda33; }

/* An entry's values sit side by side as columns (wrapping when narrow) instead of stacked rows. */
.ewp-l-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 16px; align-items: start; }
.ewp-l-card > .hint { grid-column: 1 / -1; }
.ewp-l-card .ewp-l-row small { margin-top: 0; }

/* The add sign between two entries on the line. */
.ewp-days li.ewp-ins { padding: 0 0 0 34px; height: 22px; }
.ewp-days li.ewp-ins::before { top: 0; bottom: 0; }
.ewp-ins button { position: absolute; inset-inline-start: 1px; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--surface, #fff); color: var(--muted); font: 700 14px/1 inherit; line-height: 17px; padding: 0; cursor: pointer; opacity: .55; }
.ewp-ins button:hover, .ewp-ins button:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }

/* An unavailable (skipped) day is not an empty one: a hatched bar, a dashed crossed dot, a struck-through date. */
.ewp-l-skiptxt { padding: 6px 10px; margin: 0 0 8px; border: 1px dashed var(--muted); border-radius: 10px; font-style: normal; font-weight: 700; font-size: 0.8rem;
  background: repeating-linear-gradient(135deg, transparent 0 6px, #00000010 6px 12px); }
.ewp-l-skip .ewp-d-head bdi { text-decoration: line-through; color: var(--muted); }
.ewp-l-skip .ewp-dot { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--muted) 3px 4px); }

/* The circle sits at the vertical centre of its entry, with the line running through it. */
.ewp-days li.ewp-day::before { top: 0; bottom: 0; }
.ewp-days li.ewp-day.ewp-first::before { top: calc(50% - 7px); }
.ewp-days li.ewp-day.ewp-last::before { display: block; bottom: calc(50% + 7px); }
.ewp-days li.ewp-ins::before { top: 0; bottom: 0; }
.ewp-days .ewp-dot, .ewp-days .ewp-l-now .ewp-dot, .ewp-days .ewp-day.ewp-empty .ewp-dot { top: calc(50% - 7px); transform: translateY(-50%); }

/* Released = a red (filled) circle; unreleased = a ring; complete adds a tick. */
.ewp-days .ewp-rel .ewp-dot { background: var(--accent); border-color: var(--accent); }
.ewp-days .ewp-l-done .ewp-dot::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 10px; font-weight: 800; line-height: 11px; text-align: center; }

/* Tighter spacing between the days. (The dot's centring offset is half the bottom padding.) */
.ewp-days li.ewp-day { padding-bottom: 5px; }
.ewp-days li.ewp-day.ewp-empty { padding-bottom: 1px; }
.ewp-days li.ewp-month { padding-top: 6px; padding-bottom: 4px; }
.ewp-days li.ewp-ins { height: 18px; }
.ewp-days .ewp-d-head { padding: 0 0 2px; }
.ewp-days .ewp-l-skiptxt { margin-bottom: 4px; padding: 4px 10px; }
.ewp-days .ewp-dot, .ewp-days .ewp-l-now .ewp-dot { top: calc(50% - 2px); }
.ewp-days .ewp-day.ewp-empty .ewp-dot { top: calc(50% - 0.5px); }
.ewp-days li.ewp-day.ewp-first::before { top: calc(50% - 2px); }
.ewp-days li.ewp-day.ewp-last::before { bottom: calc(50% + 2px); }
.ewp-days .ewp-l-card { padding: 6px 10px; }
.ewp-ins button { top: -1px; }

/* An unavailable day is simply greyed out: no label, no bar. */
.ewp-days li.ewp-l-skip { opacity: .5; }
.ewp-days li.ewp-l-skip .ewp-d-head { padding-bottom: 6px; }

/* Selecting and dragging entries */
.ewp-btn-on { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.ewp-picked .ewp-l-card { outline: 2px solid var(--accent); outline-offset: 1px; background: #299bda1a; }
.ewp-dragging { opacity: .45; }
.ewp-day.ewp-drop { background: #299bda26; border-radius: 10px; box-shadow: inset 0 3px 0 var(--accent); }
.ewp-day[draggable="true"] { cursor: grab; }

/* The add sign between entries only shows when you hover (or focus) the gap. */
.ewp-ins button { opacity: 0; transition: opacity .12s; }
.ewp-days li.ewp-ins:hover button, .ewp-ins button:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .ewp-ins button { opacity: .55; } }     /* touch has no hover: keep it faintly visible */
.ewp-days li.ewp-ins { height: 20px; }

/* The date sits on the same line as its entry (a narrow column left of the card); rows are tight. */
.ewp-days li.ewp-day { display: flex; align-items: center; gap: 10px; padding-bottom: 3px; }
.ewp-days li.ewp-day .ewp-d-head { flex: 0 0 96px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; font-size: 0.82rem; }
.ewp-days li.ewp-day .ewp-chip { font-size: 0.62rem; padding: 0 7px; }
.ewp-days li.ewp-day .ewp-l-card, .ewp-days li.ewp-day .ewp-l-skiptxt { flex: 1; min-width: 0; margin: 0; padding: 4px 10px; }
.ewp-days li.ewp-day.ewp-empty { padding-bottom: 0; }
.ewp-days li.ewp-month { padding-top: 4px; padding-bottom: 2px; }
.ewp-days .ewp-dot, .ewp-days .ewp-l-now .ewp-dot { top: calc(50% - 1.5px); }
.ewp-days li.ewp-day.ewp-first::before { top: calc(50% - 1.5px); }
.ewp-days li.ewp-day.ewp-last::before { bottom: calc(50% + 1.5px); }
.ewp-days li.ewp-ins { height: 16px; }
.ewp-ins button { top: -2px; }
@media (max-width: 520px) { .ewp-days li.ewp-day .ewp-d-head { flex-basis: 76px; } }

.ewp-days li.ewp-more { color: var(--muted); padding: 6px 0 0 34px; letter-spacing: .3em; }
.ewp-days li.ewp-more::before { display: none; }

/* Every day takes the same height, with or without a card, so the dates are evenly spaced. */
.ewp-days li.ewp-day, .ewp-days li.ewp-day.ewp-empty { min-height: 44px; padding-bottom: 3px; box-sizing: border-box; }
/* The add sign overlays the boundary between two entries instead of adding a gap of its own. */
.ewp-days li.ewp-ins { height: 0; padding: 0; position: relative; z-index: 2; }
.ewp-days li.ewp-ins::before { display: none; }
.ewp-ins button { top: -10px; }
.ewp-ins button::after { content: ""; position: absolute; inset: -6px; }

.ew-edited { opacity: .7; font-style: italic; }

.ew-op-map { height: 320px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); z-index: 0; }

.ew-op-map .leaflet-popup-content { max-height: 240px; overflow: auto; }

/* The map on a page is a still preview; a tap opens it full screen. */
.ew-op-map.ew-op-map-still { cursor: pointer; position: relative; }
.ew-op-map.ew-op-map-still::after { content: ""; position: absolute; inset: 0; z-index: 500; }
.ew-opmap-full { position: fixed; inset: 0; z-index: 3000; background: var(--bg, #fff); }
.ew-opmap-canvas { position: absolute; inset: 0; }
.ew-opmap-close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1000; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--surface, #fff); color: var(--ink, #111); box-shadow: 0 2px 10px #0003; font-size: 1.1rem; cursor: pointer; }
.ew-opmap-card { position: absolute; z-index: 1000; inset-inline: 12px; bottom: 12px; max-width: 520px; margin-inline: auto; max-height: 46vh; overflow: auto;
  background: var(--surface, #fff); border-radius: 16px; box-shadow: 0 6px 28px #0004; padding: 10px; }
.ew-opmap-card-head { padding: 4px 6px 8px; display: flex; flex-direction: column; }
.ew-opmap-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 1px solid var(--line); border-radius: 12px; background: transparent;
  padding: 10px 12px; margin-top: 6px; font: inherit; color: inherit; cursor: pointer; }
.ew-opmap-item:hover { border-color: var(--accent); }
.ew-opmap-item-name { flex: 1; font-weight: 700; min-width: 0; }
.ew-opmap-item small { color: var(--muted); }
.ew-opmap-locate { position: absolute; z-index: 1000; inset-inline-end: 12px; top: 64px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--surface, #fff); color: var(--ink, #111); box-shadow: 0 2px 10px #0003; display: grid; place-items: center; cursor: pointer; }

/* A pin's card: the organization, then carousels of its cohorts and classes (each can open out into a list). */
.ew-opmap-org { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: transparent; padding: 10px 12px;
  font: inherit; color: inherit; cursor: pointer; }
.ew-opmap-org:hover, .ew-opmap-mini:hover { border-color: var(--accent); }
.ew-opmap-sec { margin-top: 10px; }
.ew-opmap-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px; font-size: 0.84rem; }
.ew-opmap-all { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.ew-opmap-rail { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
.ew-opmap-mini { flex: 0 0 150px; scroll-snap-align: start; text-align: start; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 12px;
  background: transparent; padding: 10px; font: inherit; color: inherit; cursor: pointer; }
.ew-opmap-mini small { color: var(--muted); }
.ew-opmap-rail.ew-opmap-rail-all { flex-direction: column; overflow-x: visible; }
.ew-opmap-rail.ew-opmap-rail-all .ew-opmap-mini { flex: 0 0 auto; width: 100%; }

.ew-send[hidden] { display: none; }

.ew-tool[hidden] { display: none; }

/* The steps of reading a file, and the pages done. */
.ew-nqsteps { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, #0000000a); font-size: 0.86rem; }
.ew-nqs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ew-nqs-list li { display: flex; gap: 8px; align-items: baseline; color: var(--muted); }
.ew-nqs-list small { color: var(--muted); }
.ew-nqs-mark { width: 14px; text-align: center; flex: 0 0 14px; }
.ew-nqs-done { color: var(--ink); } .ew-nqs-done .ew-nqs-mark { color: var(--ok, #16a34a); }
.ew-nqs-now { color: var(--ink); font-weight: 700; } .ew-nqs-now .ew-nqs-mark { color: var(--accent); animation: ew-nqs-pulse 1s ease-in-out infinite; }
.ew-nqs-bad { color: var(--bad); font-weight: 700; }
.ew-nqs-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 8px; }
.ew-nqs-bar span { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
@keyframes ew-nqs-pulse { 50% { opacity: .35; } }

.ew-notice-done { font-weight: 700; font-size: 0.8rem; color: var(--ok, #16a34a); white-space: nowrap; }

/* The notice's actions: a released grade, and Open / Change submission and/or Manage side by side. */
.ew-notice-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ew-notice-go-alt { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.ew-notice-grade { font-weight: 800; font-size: 0.86rem; color: var(--ok, #16a34a); white-space: nowrap; }

/* The notice: the text gets its room first; the actions (a grade, Open / Change submission, Manage) sit stacked at the
   end and drop to their own row when the thread is narrow, instead of squeezing the title into a sliver. */
.ew-notice { flex-wrap: wrap; width: min(520px, 100%); padding-bottom: 20px; }
.ew-notice-body { flex: 1 1 180px; min-width: 0; }
.ew-notice-actions { flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 6px; margin-inline-start: auto; }
.ew-notice-actions .ew-notice-go { white-space: nowrap; }

.ew-notice-click { cursor: pointer; }
.ew-notice-click:hover { border-color: var(--accent); }
.ew-notice-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ew-notice-st { font-weight: 700; font-size: 0.74rem; white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: var(--surface-2, #eef0f5); color: var(--muted); }
.ew-notice-st.ew-st-todo { background: #fff1f1; color: var(--accent); }
.ew-notice-st.ew-st-wait { background: #fff7e6; color: #b26a00; }
.ew-notice-st.ew-st-done { background: #e8f7ee; color: var(--ok, #16a34a); }

.ew-seg.ew-seg-icons .ew-seg-btn.ew-seg-labelled { width: auto; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; }
.ew-seg-text { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }

/* Explore takes the whole page, not the 640px column the settings pages use. */
.ew-page-inner.ew-page-full { max-width: none; }

/* Class pictures are rounded squares, not circles (people stay round). */
.ew-avatar.ew-avatar-sq { border-radius: var(--r-md); }

/* The app's logo, in the list head's place when there is no dropdown to show. */
.ew-list-logo { display: block; height: 30px; width: auto; max-width: 60%; object-fit: contain; }
html[data-theme="dark"] .ew-list-logo { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ew-list-logo { filter: invert(1) hue-rotate(180deg); } }

/* Carousels run to the edge of the page: they cancel the page's side padding and restore it as scroll padding, so the
   first card lines up with the content and the last one slides all the way out. */
.ew-page .ew-op-carousel, .ew-page .ew-op-hgrid { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.ew-op-carousel::-webkit-scrollbar, .ew-op-hgrid::-webkit-scrollbar { display: none; }
.ew-op-carousel, .ew-op-hgrid { scrollbar-width: none; }
/* Explore: section headings and tile cards (picture on top). */
.ew-op-head h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.ew-op-sec { margin: 24px 0 8px; }
.ew-op-card.ew-op-tile { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: var(--r-lg); }
.ew-op-tile .ew-op-art {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center;
  background-color: var(--tint); color: var(--accent); font-weight: 700; font-size: 2rem;
}
.ew-op-tile .ew-op-art-logo { background-size: contain; background-repeat: no-repeat; background-origin: content-box; padding: 14px; background-color: #fff; }
.ew-op-tile .ew-op-body { padding: 12px 14px 14px; gap: 3px; }
.ew-op-tile .ew-op-name { font-size: 1.02rem; }
.ew-op-desc { font-size: 0.82rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ew-op-tile .ew-op-meta { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-top: 2px; }
.ew-op-carousel .ew-op-card.ew-op-tile { flex: 0 0 min(280px, 78vw); padding: 0; }
.ew-op-vgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ew-op-hgrid { grid-auto-columns: 240px; gap: 14px; }
.ew-op-map { border-radius: var(--r-lg); height: 260px; border: 0; }



/* Class pictures on Explore cards are rounded squares too. */
.ew-op-pic { border-radius: var(--r-md); }

/* The top bar is translucent light blue (over the white page), not a solid white band. */
.ew-header { background: rgba(227, 242, 251, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-theme="dark"] .ew-header { background: rgba(26, 32, 54, 0.82); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ew-header { background: rgba(26, 32, 54, 0.82); } }

/* Smaller carousel cards. */
.ew-op-carousel .ew-op-card.ew-op-tile { flex: 0 0 min(190px, 60vw); }
.ew-op-hgrid { grid-auto-columns: 170px; }
.ew-op-tile .ew-op-body { padding: 9px 11px 11px; }
.ew-op-tile .ew-op-name { font-size: 0.92rem; }
.ew-op-desc { font-size: 0.76rem; -webkit-line-clamp: 2; }
.ew-op-tile .ew-op-art { font-size: 1.5rem; }
.ew-explore-logo { display: block; height: 30px; width: auto; margin: 0 0 14px; }

/* More: the active organization's name is the heading, with an arrow to switch. */
.ew-org-switch { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 1.3rem; font-weight: 700; color: var(--ink); max-width: 100%; }
.ew-org-switch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ew-org-switch.ew-org-switch-sec { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* The logo sits in the top bar, before Explore. */
.ew-nav-logo { display: block; height: 26px; width: auto; }
html[data-theme="dark"] .ew-nav-logo { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ew-nav-logo { filter: invert(1) hue-rotate(180deg); } }

/* A place on a class's Explore page: a still map thumbnail across the top of its card. */
.ew-sp-thumb { height: 140px; cursor: pointer; z-index: 0; position: relative; }
.ew-sp-thumb::after { content: ""; position: absolute; inset: 0; z-index: 500; }

.ew-list-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }