:root {
  --ink: #1b2430;
  --ink-soft: #262f3d;
  --gold: #a6802d;
  --gold-soft: #f4ead2;
  --gold-border: #ecdfc0;
  --bg: #fbf9f3;
  --panel: #f3f0e7;
  --card: #fffdf8;
  --border: #e4dfd0;
  --text: #1b2430;
  --muted: #6b6456;
  --danger: #a3403a;
  --success: #4a7a4f;
  --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.hidden { display: none !important; }

h1 { font-size: 1.5rem; margin: 0 0 4px; font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; }
h2 { font-size: 1.2rem; margin: 0 0 10px; font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; }
h3 { font-size: 0.95rem; margin: 0 0 10px; }

.muted { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--danger); font-size: 0.85rem; margin-top: 10px; }
.saved-note { color: var(--success); font-size: 0.85rem; }

.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.brand-mark { color: var(--gold); }
.brand-lg { font-size: 1.35rem; justify-content: center; margin-bottom: 10px; }

/* ---------- Buttons & inputs ---------- */

.btn {
  border: none;
  border-radius: 7px;
  padding: 9px 15px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary { background: var(--ink); color: #fdfbf6; }
.btn-primary:hover { background: var(--ink-soft); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--gold-soft); }
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-danger:hover { background: #9c3a32; border-color: #9c3a32; }
.btn-danger-ghost { background: transparent; color: var(--danger); border: 1px solid var(--border); }
.btn-danger-ghost:hover { background: #f7ecec; }
.btn-back { margin-bottom: 14px; }

input, textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}

label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 14px;
  text-align: left;
}

.field-hint { font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.optional-tag { font-weight: 400; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

/* ---------- Standalone (login / onboarding) ---------- */

.standalone-view { display: block; }
.center-card { max-width: 400px; margin: 14vh auto 0; text-align: center; }
#googleSignInBtn { display: flex; justify-content: center; margin-top: 18px; }

/* Onboarding is a single centred column, not a grid: the options are of very
   different sizes, and a multi-column layout left a one-line tutor card beside
   a tall school form. Each option stays collapsed until chosen, so the page
   reads as a short list of questions rather than a wall of inputs. */
.onboard-wrap { max-width: 560px; margin: 7vh auto 0; padding: 0 24px 60px; }
.onboard-brand { margin-bottom: 14px; }
.onboard-account { text-align: center; margin: 0 0 30px; }
.onboard-title { text-align: center; font-size: 1.5rem; margin-bottom: 22px; }

.choices {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.choice + .choice { border-top: 1px solid var(--border); }

.choice > summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.choice > summary::-webkit-details-marker { display: none; }

.choice > summary::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.2rem;
  transition: transform 0.15s;
}

.choice[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.choice > summary:hover { background: #fbf7ec; }
.choice[open] > summary { background: #fbf7ec; }

.choice-title { font-weight: 600; font-size: 0.95rem; padding-right: 24px; }
.choice-sub { font-size: 0.82rem; color: var(--muted); padding-right: 24px; }

.choice-body { padding: 4px 18px 20px; }
.choice-body > p:first-child { margin-top: 0; }
.choice-body form { margin-top: 12px; }
.choice-body .btn { margin-top: 4px; }

.linkish {
  background: none;
  border: none;
  padding: 0 0 0 6px;
  font: inherit;
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- App shell ---------- */

.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 4px 10px 18px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }

.nav-group-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 16px 10px 6px;
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.nav-item:hover { background: rgba(27, 36, 48, 0.06); }
.nav-item.active { background: var(--card); box-shadow: 0 1px 2px rgba(27, 36, 48, 0.08); font-weight: 600; }
.nav-icon { width: 16px; text-align: center; color: var(--muted); }
.nav-item.active .nav-icon { color: var(--gold); }

.sidebar-footer { position: relative; padding-top: 12px; border-top: 1px solid var(--border); }

.seat-meter { padding: 4px 10px 12px; font-size: 0.78rem; color: var(--muted); }
.seat-meter-row { display: flex; justify-content: space-between; margin-bottom: 5px; }
.seat-bar { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }
.seat-bar-fill { height: 100%; width: 0%; background: var(--gold); }

.org-switcher {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.org-switcher:hover { background: rgba(27, 36, 48, 0.06); }

.org-avatar {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: none;
}

.org-switcher-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.org-switcher-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-switcher-sub { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-switcher-caret { color: var(--muted); font-size: 0.8rem; }

.org-menu {
  position: absolute;
  bottom: 56px;
  left: 6px;
  right: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(27, 36, 48, 0.18);
  padding: 8px;
  z-index: 40;
}

.org-menu-email { font-size: 0.76rem; color: var(--muted); padding: 6px 8px; }
.org-menu-current { display: flex; align-items: center; gap: 9px; padding: 6px 8px; }
.org-menu-check { color: var(--gold); }
.org-menu-sep { border: none; border-top: 1px solid var(--border); margin: 7px 0; }

.org-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.org-menu-item:hover { background: var(--gold-soft); }

/* ---------- Main area ---------- */

.main { display: flex; flex-direction: column; min-width: 0; }

.main-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 32px 18px;
  border-bottom: 1px solid var(--border);
}

.main-header-actions { display: flex; gap: 8px; }
.main-body { padding: 24px 32px 60px; max-width: 1100px; }

/* ---------- Stats ---------- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.stat-value { font-size: 1.5rem; font-weight: 700; font-family: Georgia, serif; }
.stat-label { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

/* ---------- Classes ---------- */

.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.class-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.class-card:hover { box-shadow: 0 4px 16px rgba(27, 36, 48, 0.12); transform: translateY(-2px); }
.class-card h3 { margin: 0 0 4px; font-size: 1rem; }

.class-code, code {
  display: inline-block;
  font-family: ui-monospace, monospace;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.82rem;
  letter-spacing: 1px;
  border: 1px solid var(--gold-border);
}

.class-detail-head { margin-bottom: 16px; }

.term-heading {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 22px 0 10px;
}
.term-heading:first-child { margin-top: 0; }

.class-card.archived { opacity: 0.62; }
.class-card-actions { display: flex; gap: 6px; margin-top: 12px; }
.class-card-actions .btn { padding: 5px 10px; font-size: 0.78rem; }

.toggle-inline {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 16px;
}
.toggle-inline input { width: auto; }

.tiny { font-size: 0.74rem; }

.inline-select {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 10px;
}
.inline-select select { width: auto; font-size: 0.83rem; padding: 5px 8px; }

.app-notice {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fdfbf6;
  font-size: 0.87rem;
  padding: 11px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 17, 10, 0.28);
  z-index: 80;
  max-width: 90vw;
}

/* ---------- Tabs & tables ---------- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }

.tab-btn {
  background: none;
  border: none;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}

.tab-btn.active { color: var(--ink); border-bottom-color: var(--gold); }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.data-table th { color: var(--muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover { background: #fbf7ec; }

.badge { padding: 3px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.badge-none { background: #f1efe7; color: var(--muted); }
.badge-low { background: var(--gold-soft); color: var(--gold); }
.badge-active { background: #e3ede3; color: var(--success); }
.badge-high { background: #e5e8ee; color: var(--ink); }
.badge-revoked { background: #f7ecec; color: var(--danger); }

/* ---------- Assignments / analytics ---------- */

.assignment-list { display: flex; flex-direction: column; gap: 12px; }

.assignment-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 17px;
}

.assignment-card h3 { margin-bottom: 4px; }
.assignment-meta { display: flex; gap: 16px; font-size: 0.82rem; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }

.analytics-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.bar-chart .bar { flex: 1; background: var(--gold); opacity: 0.85; border-radius: 3px 3px 0 0; min-height: 2px; }

.vocab-list { margin: 0; padding-left: 20px; }
.vocab-list li { padding: 3px 0; font-size: 0.88rem; }
.vocab-list .count { color: var(--muted); font-size: 0.8rem; }

.lookup-history, .submission-list { display: flex; flex-direction: column; gap: 12px; }

.lookup-item, .submission-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
}

.lookup-item .lookup-text { font-weight: 700; }
.lookup-item .lookup-meta { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.paste-flag { color: var(--danger); font-weight: 700; }

/* ---------- Forms & plans ---------- */

.settings-form { max-width: 460px; }
.form-actions { display: flex; align-items: center; gap: 12px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 200px; }
.inline-form select { width: auto; }

.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0; font-size: 0.9rem; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; }

.plan-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold-border);
  text-transform: capitalize;
}

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

.plan-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--bg);
}

.plan-card.current { border-color: var(--gold); background: var(--gold-soft); }
.plan-card h4 { margin: 0 0 4px; font-size: 0.95rem; }
.plan-price { font-size: 1.2rem; font-weight: 700; font-family: Georgia, serif; margin-bottom: 8px; }
.plan-features { margin: 0 0 12px; padding-left: 18px; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.plan-note { margin-top: 14px; }

.help-list { margin: 0; padding-left: 20px; font-size: 0.9rem; line-height: 1.7; }
.help-list li { margin-bottom: 6px; }

/* ---------- Dialogs ---------- */

dialog { border: none; border-radius: var(--radius); padding: 0; }
dialog::backdrop { background: rgba(20, 17, 10, 0.4); }
.dialog-form { padding: 22px; width: 380px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .analytics-grid { grid-template-columns: 1fr; }
}

.clickable-card { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.clickable-card:hover { box-shadow: 0 4px 16px rgba(27, 36, 48, 0.12); transform: translateY(-2px); }

.submission-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.submission-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.submission-body {
  white-space: pre-wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 0.9rem;
}
.badge-late { background: #f7ecec; color: var(--danger); }

/* Labelled chart: value above each bar, date below, so the numbers are on the
   page rather than only in a tooltip. */
.bar-chart.labelled { height: 170px; align-items: stretch; gap: 2px; }
.bar-chart.labelled .bar-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
.bar-col .bar-value { font-size: 0.66rem; color: var(--muted); }
.bar-col .bar-fill { width: 100%; background: var(--gold); opacity: 0.85; border-radius: 3px 3px 0 0; }
.bar-col .bar-label { font-size: 0.6rem; color: var(--muted); white-space: nowrap; transform: rotate(-45deg); transform-origin: center; height: 14px; }

/* Action buttons in a table cell need breathing room between them. */
.data-table td .btn + .btn { margin-left: 8px; }
.data-table td { white-space: nowrap; }
.data-table td:first-child { white-space: normal; }

/* Eight stats in an auto-fit grid wrapped 6+2, which reads as a mistake.
   A fixed four-column grid gives two even rows. */
.stat-row.stat-row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stat-row.stat-row-4 { grid-template-columns: repeat(2, 1fr); } }

/* Cost figures are secondary to the counts — tint them so the eye reads the
   usage numbers first. */
.stat.stat-cost { background: var(--gold-soft); border-color: var(--gold-border); }
.stat.stat-cost .stat-value { color: var(--gold); }

/* Rotated date labels collided and the bars ran full-bleed. Cap the width and
   only label periodically. */
.bar-chart.labelled { height: 190px; gap: 4px; padding-bottom: 4px; }
.bar-col .bar-fill { max-width: 46px; margin: 0 auto; }
.bar-col .bar-label { transform: none; height: auto; font-size: 0.62rem; }
.bar-col .bar-label:empty { visibility: hidden; }
.bar-col .bar-value { font-weight: 600; }

.integrity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 0.85rem;
}
.integrity strong { font-size: 0.88rem; }
.integrity span { color: var(--muted); }
.integrity-clean { background: #e9f0e9; border: 1px solid #cfe0cf; }
.integrity-clean strong { color: var(--success); }
.integrity-flagged { background: #f9eeed; border: 1px solid #e6d4d2; }
.integrity-flagged strong { color: var(--danger); }

/* Pasted passages inside a submission. Deliberately a soft amber rather than a
   red: this marks text for a teacher to ask about, not text proven to be
   plagiarised, and the colour shouldn't pass judgement the data can't support. */
.submission-body mark.pasted {
  background: #fdf1d8;
  box-shadow: inset 0 -1px 0 #e8c479;
  color: inherit;
  padding: 1px 0;
  border-radius: 2px;
}

/* ---- Reading assignments ---- */

.kind-picker {
  border: 1px solid #e6e1d4;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 4px;
}

.kind-picker legend { font-size: 13px; color: #6b7280; padding: 0 6px; }

.kind-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  font-weight: 400;
}

.kind-option input { margin-top: 3px; }
.kind-option span { display: flex; flex-direction: column; }
.kind-option small { color: #6b7280; font-size: 12px; margin-top: 1px; }

.field-note { font-size: 12px; color: #6b7280; margin: 4px 2px 0; }

.reading-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
  font-size: 13px;
}

.reading-block strong { font-size: 13px; }

.reading-none { background: #f4f4f5; border: 1px solid #e4e4e7; }
.reading-none strong { color: #6b7280; }
.reading-partial { background: #fdf3dc; border: 1px solid #e8d5a0; }
.reading-through { background: #eef5ee; border: 1px solid #cfe0d0; }

/* The caveat is part of the reading, not a footnote to skip — it's what keeps
   these numbers from being mistaken for proof that someone read the text. */
.reading-caveat {
  color: #6b7280;
  font-size: 11.5px;
  margin-top: 4px;
}

.page-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 34px;
  margin: 8px 0 2px;
}

.page-bar {
  flex: 1 1 0;
  min-width: 3px;
  max-width: 22px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: rgba(27, 36, 48, 0.06);
  border-radius: 2px;
}

.page-bar-fill {
  width: 100%;
  background: #1b2430;
  border-radius: 2px;
  min-height: 0;
}

/* Shared by the student app and the teaching console — both have an account
   area with supporting links and a destructive action. */
.link-row { display: flex; gap: 16px; margin-top: 12px; font-size: 14px; flex-wrap: wrap; }
.link-row a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-border); }
.link-row a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.danger-card { border-color: #e6d4d2; }
.danger-card h3 { color: var(--danger); }

/* The teacher/tutor choice holds two routes; these separate them without
   turning one panel back into two top-level options. */
.choice-lead { font-weight: 600; font-size: 0.92rem; margin: 0 0 4px; }
.choice-rule { border: 0; border-top: 1px solid var(--border); margin: 22px 0 16px; }

/* Impersonation banner — intentionally impossible to miss. */
#ll-impersonation-bar {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 16px;
  background: #b4453c;
  color: #fff;
  font-size: 13px;
}

#ll-impersonation-bar button {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 6px;
  padding: 3px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* Row actions in the operator tables.
   Four full-size buttons per row pushed the last column past the card edge and
   turned every row into a wall of identical dark rectangles. Compact, right
   aligned, and allowed to wrap so the table stays inside its card. */
.data-table td:last-child {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.data-table td:last-child .btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  margin-left: 6px;
  border-color: #e4dfd0;
}

.data-table td:last-child .btn:first-child { margin-left: 0; }

/* Primary and destructive actions should stand out from the routine ones
   rather than every button competing equally for attention. */
.data-table td:last-child .btn-ghost { color: var(--muted); }
.data-table td:last-child .btn-ghost:hover { color: var(--ink); border-color: var(--gold-border); }
.data-table td:last-child .btn-danger-ghost { color: var(--danger); }

/* A wide table inside a card scrolls itself rather than overflowing the page. */
.card:has(> .data-table) { overflow-x: auto; }

@media (max-width: 1100px) {
  .data-table td:last-child { white-space: normal; }
  .data-table td:last-child .btn { margin: 2px 0 2px 6px; }
}

/* Consequences of a destructive action, listed rather than summarised. */
.consequence-list { margin: 8px 0 14px; padding-left: 20px; line-height: 1.65; font-size: 0.9rem; }
.consequence-list li { margin-bottom: 7px; }

/* ---- Student places ----
   Discrete slots rather than a percentage: "2 of 3 used" is something a teacher
   can act on, a progress bar isn't. */
.seat-summary { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.seat-slots { display: flex; gap: 6px; }

.seat-slot {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: #c9cfd6;
  font-size: 13px;
}

.seat-slot.is-taken { background: var(--gold-soft); border-color: var(--gold-border); color: var(--gold); }
.seat-text { font-size: 0.9rem; }

.seat-overage {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #fdf3dc;
  border: 1px solid #e8d5a0;
  font-size: 0.87rem;
  line-height: 1.55;
}

.join-code-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.join-code-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.join-code-row .jc-name { font-weight: 600; font-size: 0.92rem; }
.join-code-row .class-code { margin-left: auto; }

.plan-change-price { font-weight: 700; font-size: 1.1rem; margin: 0 0 10px; }
.plan-requirement { font-size: 0.78rem; line-height: 1.5; margin: 8px 0 0; }
.plan-card .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.faq { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq:last-of-type { border-bottom: none; }
.faq > summary { cursor: pointer; padding: 9px 0; font-weight: 600; font-size: 0.9rem; }
.faq > summary:hover { color: var(--gold); }
.faq p { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.6; }
.contact-inline { font-size: 1.05rem; margin: 6px 0 0; }
.contact-inline a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold-border); }

/* ---- Invitations ---- */

.invite-form { display: grid; gap: 12px; margin-top: 14px; max-width: 480px; }
.invite-form label { display: block; font-size: 0.86rem; font-weight: 600; }
.invite-form .btn { justify-self: start; }

.invite-result {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 9px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-border);
  font-size: 0.88rem;
}

.invite-result p { margin: 0 0 8px; }
.invite-link-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.invite-link-row code {
  flex: 1 1 260px;
  min-width: 0;
  padding: 8px 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.invite-list-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 22px 0 8px; }

.invite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}

.invite-row-main { flex: 1; min-width: 0; }

/* A place promised to someone who hasn't signed up is neither free nor in use. */
.seat-slot.is-pending { background: #fdf3dc; border-color: #e8d5a0; color: #9a7b28; }

/* ---- Reactivation after a trial ---- */
.trial-over {
  padding: 16px 18px;
  border-radius: 10px;
  background: #fdf3dc;
  border: 1px solid #e8d5a0;
  margin-bottom: 18px;
}

.trial-over strong { display: block; margin-bottom: 4px; }
.trial-over p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.55; }

/* Console front page — the teacher equivalent of the student greeting. */
.console-welcome { margin-bottom: 22px; }
.console-welcome h2 { font-size: 1.5rem; margin: 0 0 5px; }
.console-welcome p { margin: 0 0 14px; }
.console-welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Form fields in the invite card. Bare <label> wrapping a control put the text
   hard against the box and left the fields out of line with each other. */
.invite-form .field { display: flex; flex-direction: column; gap: 6px; }
.invite-form .field > label { font-size: 0.86rem; font-weight: 600; margin: 0; }
.invite-form .field > select,
.invite-form .field > input { width: 100%; margin: 0; }

.buy-places { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.dialog-actions-wrap { flex-wrap: wrap; }

.ext-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--gold-border);
  background: var(--gold-soft);
  border-radius: 11px;
  margin-bottom: 20px;
}

.ext-banner strong { display: block; font-size: 0.98rem; margin-bottom: 3px; }
.ext-banner p { margin: 0; font-size: 0.86rem; line-height: 1.55; max-width: 60ch; }
.ext-banner .btn { flex: none; }

/* ---- Explanation cards on the web surfaces ----
   LLRender emits the same markup for the extension and for the web app, but
   these classes were only styled inside the extension's card — so on the
   reading and writing pages a label ran straight into its text
   ("StructureZwei Hauptsätze…") with nothing separating them. */
.ll-section { margin-bottom: 14px; }
.ll-section:last-child { margin-bottom: 0; }

.ll-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}

.ll-headword { font-size: 1.15rem; font-weight: 700; margin-bottom: 2px; }
.ll-pron { font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; }

.ll-chip {
  display: inline-block;
  padding: 3px 9px;
  margin: 0 5px 5px 0;
  background: var(--gold-soft);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  font-size: 0.8rem;
}

.ll-hint-list { margin: 0; padding-left: 18px; line-height: 1.6; }
.ll-hint-list li { margin-bottom: 5px; }
.ll-loading { color: var(--muted); }
.ll-error { color: var(--danger); }

/* ---------- Stacked help entries ----------
   The help panel keeps every answer it has given. Earlier entries collapse to
   their heading so the newest one is where you expect it, and one click brings
   an older one back. */

.ll-entry {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 12px;
}
.ll-entry:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.ll-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--muted);
}

.ll-entry-title {
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ll-entry-toggle {
  flex: none;
  transition: transform 0.15s ease;
}

.ll-entry.is-collapsed .ll-entry-toggle { transform: rotate(-90deg); }
.ll-entry.is-collapsed .ll-entry-body { display: none; }

.ll-entry-body { padding-top: 6px; }

.ll-followup-turn + .ll-followup-turn { margin-top: 10px; }

.ll-entry-when {
  margin-left: auto;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* ---------- Account-kind chooser ----------
   A department and a school are different products, so the choice between them
   is spelled out rather than hidden behind a plan name. */

.choice-kind {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 14px;
}

.choice-kind legend {
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.kind-option {
  display: flex;
  /* The base label rule stacks its children in a column, which put the radio
     button above its own text instead of beside it. */
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 0;
  padding: 8px 0;
  font-weight: 400;
  cursor: pointer;
}

.kind-option + .kind-option { border-top: 1px solid var(--border); }
.kind-option input { margin-top: 3px; flex: none; width: auto; }
/* Takes the rest of the row. Without flex:1 the text column collapsed to its
   minimum width and wrapped one word per line. */
.kind-option > span { flex: 1; min-width: 0; display: block; }
.kind-option strong { display: block; margin-bottom: 2px; font-weight: 700; }
.kind-option .field-hint { display: block; }

/* A day with no lookups still gets a hairline. A gap in the row reads as
   missing data; a flat line reads as a quiet day, which is what it is. */
.bar-chart .bar.is-empty { background: var(--border); opacity: 1; }

/* Offered inline on the roster for a student who's covered but in no class. */
.add-to-class {
  margin-right: 8px;
  padding: 5px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
}

/* ---------- Term calendar ----------
   The academic year as the account has described it, so an administrator can
   check it against the one they actually run. */

.term-calendar { margin: 4px 0 16px; }

.term-calendar-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 6px;
}

.term-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.84rem;
}

.term-row + .term-row { margin-top: 6px; }
.term-row.is-current { border-color: var(--gold-border); background: var(--gold-soft); }
.term-name { font-weight: 600; min-width: 8.5em; }
.term-span { color: var(--muted); font-variant-numeric: tabular-nums; }
.term-row .badge { margin-left: auto; }

/* The class a piece of work belongs to, above its title. "Essay 2" says nothing
   on its own when a student is in three classes. */
.a-class-line {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* ---------- Access codes (platform console) ---------- */

.inline-form .field { display: flex; flex-direction: column; gap: 4px; }
.inline-form .field > span { font-size: 12px; color: var(--muted, #6b6456); }
.inline-form .field-wide { flex: 1 1 260px; }
.inline-form select,
.inline-form input[type="date"],
.inline-form input[type="number"] {
  padding: 8px 10px;
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.btn-small { padding: 5px 10px; font-size: 12px; }
.row-muted { opacity: 0.55; }

.code-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.code-new {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--gold-border);
  border-radius: 10px;
  background: #fffdf8;
}

/* The code is the product of this screen and is about to be pasted into a
   message to a person — big enough to read aloud down a phone. */
.code-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  letter-spacing: 0.08em;
  margin: 6px 0 12px;
  color: #1b2430;
}

.p-confirm .dialog-form h2 { font-size: 16px; margin: 0 0 8px; }

/* ---------- Invitation page ----------
   The shared 400px centred card is sized for a sign-in box; this page has a
   heading, three paragraphs, an account line and a button, and at that width
   the title wrapped mid-phrase and everything sat shoulder to shoulder. */

.join-card {
  max-width: 480px;
  margin-top: 10vh;
  padding: 34px 38px 32px;
}

.join-card .brand-lg { margin-bottom: 22px; }

.join-title {
  font-size: 1.55rem;
  line-height: 1.25;
  margin: 0 0 6px;
  /* Keeps "You've been invited to Explica" from breaking after "to". */
  text-wrap: balance;
}

.join-card #joinFrom { margin: 0 0 22px; }

.join-what {
  text-align: left;
  background: #fffdf8;
  border: 1px solid var(--gold-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 24px;
}

.join-what p { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.join-what p + p { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0ebdd; }
.join-covered, .join-selfpay { font-weight: 600; }

.join-card #joinSignIn { margin-top: 4px; }
.join-card #joinAs { margin: 18px 0 10px; line-height: 1.5; }
.join-card .btn { margin-top: 4px; }

@media (max-width: 540px) {
  .join-card { margin-top: 6vh; padding: 26px 22px 24px; }
  .join-title { font-size: 1.35rem; }
}