/* ==========================================================================
   Apply Hub — Soft Sun design system
   One token set, one type scale, one book. Replaces the four stacked
   generations that used to live in this file and in base.html's <style>.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Surfaces & ink */
  --bg: #fff8ee;
  --bg-tint: #fdf2e2;
  --card: #ffffff;
  --card-soft: #faefde;
  --ink: #221912;
  --ink-2: #4d3d31;
  --ink-3: #8a7868;
  --ink-4: #b7a99a;
  --rule: #f0e5d3;
  --rule-2: #faefde;
  --rule-strong: #e4d4bd;

  /* Accents */
  --coral: #f37c5f;
  --coral-2: #ffe2d5;
  --coral-ink: #c24a2a;
  --sun: #ffc857;
  --sun-2: #fff1cc;
  --mint: #87c7a4;
  --mint-2: #dcefe3;
  --sky: #7fb7e0;
  --sky-2: #dceef8;
  --lilac: #b6a4d6;
  --lilac-2: #ece3f8;

  /* Paper (book surfaces) */
  --leaf: #fffdf7;
  --leaf-edge: #efe2cd;


  /* Type scale — nothing in this product is larger than --text-3xl. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 44px;

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading: 1.55;
  --measure: 62ch;

  --font-ui: "Outfit", "Vazirmatn", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", "Vazirmatn", Georgia, serif;

  /* Space — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(34, 25, 18, .06);
  --shadow-2: 0 8px 24px -12px rgba(80, 52, 28, .28);
  --shadow-3: 0 20px 48px -24px rgba(80, 52, 28, .36);
  --shadow-accent: 0 12px 28px -16px rgba(243, 124, 95, .75);

  /* Motion */
  --ease-page: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* Back-compat aliases. Older rules and templates still name these. */
  --bg-color: var(--bg);
  --surface: var(--card);
  --surface-soft: var(--card-soft);
  --text-heading: var(--ink);
  --text-body: var(--ink-2);
  --text-muted-warm: var(--ink-3);
  --primary: var(--coral);
  --primary-hover: var(--coral-ink);
  --primary-soft: var(--coral-2);
  --mint-soft: var(--mint-2);
  --sky-soft: var(--sky-2);
  --lilac-soft: var(--lilac-2);
  --sun-soft: var(--sun-2);
  --border-radii: var(--radius-lg);
  --shadow-soft: var(--shadow-2);
  --shadow-hover: var(--shadow-3);
  --shadow-primary: var(--shadow-accent);
  --v2-bg: var(--bg);
  --v2-card: var(--card);
  --v2-ink: var(--ink);
  --v2-ink-2: var(--ink-2);
  --v2-ink-3: var(--ink-3);
  --v2-ink-4: var(--ink-4);
  --v2-rule: var(--rule);
  --v2-rule-2: var(--rule-2);
  --v2-coral: var(--coral);
  --v2-coral-2: var(--coral-2);
  --v2-coral-ink: var(--coral-ink);
  --v2-sun: var(--sun);
  --v2-sun-2: var(--sun-2);
  --v2-mint: var(--mint);
  --v2-mint-2: var(--mint-2);
  --v2-sky: var(--sky);
  --v2-sky-2: var(--sky-2);
  --v2-lilac: var(--lilac);
  --v2-lilac-2: var(--lilac-2);
}

html[data-theme="dark"] {
  --bg: #17120e;
  --bg-tint: #1d1712;
  --card: #221b15;
  --card-soft: #2a211a;
  --ink: #f7efe4;
  --ink-2: #ddcfbe;
  --ink-3: #ab9884;
  --ink-4: #7d6c5c;
  --rule: #33291f;
  --rule-2: #2a211a;
  --rule-strong: #3f3326;

  --coral: #ff9678;
  --coral-2: #46271e;
  --coral-ink: #ffb9a3;
  --sun: #ffd071;
  --sun-2: #453619;
  --mint: #9ad6b6;
  --mint-2: #22392d;
  --sky: #97c7ea;
  --sky-2: #1f3242;
  --lilac: #c6b7e2;
  --lilac-2: #2f2740;

  --leaf: #241d17;
  --leaf-edge: #3a2f24;


  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-3: 0 20px 48px -24px rgba(0, 0, 0, .7);
  --shadow-accent: 0 12px 28px -16px rgba(255, 150, 120, .45);
}

/* --- 2. Base ------------------------------------------------------------ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body,
html[lang="fa"] body { font-family: "Noto Naskh Arabic", "Vazirmatn", system-ui, sans-serif; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}

h1, .h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: -.015em; }
h2, .h2 { font-size: var(--text-xl); letter-spacing: -.01em; }
h3, .h3 { font-size: var(--text-lg); }
h4, .h4 { font-size: var(--text-md); }
h5, .h5 { font-size: var(--text-base); }
h6, .h6 { font-size: var(--text-sm); }

/* Bootstrap's display classes top out at 80px. Cap them to our ceiling. */
.display-1, .display-2, .display-3 { font-size: var(--text-3xl); font-family: var(--font-display); line-height: var(--leading-tight); }
.display-4, .display-5, .display-6 { font-size: var(--text-2xl); font-family: var(--font-display); line-height: var(--leading-tight); }

p { margin: 0 0 var(--space-4); }
p, li { max-width: var(--measure); }
.lead { font-size: var(--text-md); color: var(--ink-2); line-height: var(--leading); }
small, .small { font-size: var(--text-xs); }

a { color: var(--coral-ink); text-decoration: none; }
a:hover { color: var(--coral); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--rule); opacity: 1; margin: var(--space-5) 0; }

code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); }
pre { background: var(--card-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; }

::selection { background: var(--coral-2); color: var(--coral-ink); }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: var(--radius-sm); }

.text-muted, .text-secondary { color: var(--ink-3) !important; }
.text-body { color: var(--ink-2) !important; }
.bg-light, .bg-white { background: var(--card) !important; }

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.measure { max-width: var(--measure); }

/* --- 3. Bootstrap components, restyled ---------------------------------- */

.card {
  background: var(--card) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1);
  color: var(--ink-2);
}

.card-header, .card-footer {
  background: transparent !important;
  border-color: var(--rule) !important;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.card-title { font-size: var(--text-md); }
.card-body { padding: var(--space-5); }

.btn {
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  transition: transform .15s var(--ease-page), box-shadow .2s var(--ease-page), background-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { font-size: var(--text-base); padding: var(--space-3) var(--space-5); }
.btn-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }

.btn-primary {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--coral-ink);
  border-color: var(--coral-ink);
  color: #fff;
}

.btn-outline-primary { border-color: var(--rule-strong); color: var(--coral-ink); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--coral-2); border-color: var(--coral); color: var(--coral-ink); }

.btn-secondary, .btn-outline-secondary { border-color: var(--rule-strong); color: var(--ink-2); background: transparent; }
.btn-secondary:hover, .btn-outline-secondary:hover { background: var(--card-soft); color: var(--ink); border-color: var(--rule-strong); }

.btn-link { color: var(--coral-ink); }

.form-control, .form-select, .form-check-input {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}
.form-control::placeholder { color: var(--ink-4); }
.form-control:focus, .form-select:focus {
  background: var(--card);
  border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-2);
  color: var(--ink);
}
.form-check-input:checked { background-color: var(--coral); border-color: var(--coral); }
.form-label { color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-1); }
.form-text { color: var(--ink-3); font-size: var(--text-xs); }
.input-group-text { background: var(--card-soft); border-color: var(--rule-strong); color: var(--ink-3); font-size: var(--text-xs); }

.table { color: var(--ink-2); font-size: var(--text-sm); --bs-table-bg: transparent; }
.table > thead th {
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink-3);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
}
.table > tbody td { border-color: var(--rule); padding: var(--space-3); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--card-soft); color: var(--ink); }

.badge { border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 600; padding: .34em .75em; }
.bg-primary { background: var(--coral) !important; }
.bg-success { background: var(--mint) !important; color: var(--ink) !important; }
.bg-warning { background: var(--sun) !important; color: var(--ink) !important; }
.bg-info { background: var(--sky) !important; color: var(--ink) !important; }

.alert {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
}
.alert-success { background: var(--mint-2); border-color: var(--mint); color: var(--ink); }
.alert-danger { background: var(--coral-2); border-color: var(--coral); color: var(--coral-ink); }
.alert-warning { background: var(--sun-2); border-color: var(--sun); color: var(--ink); }
.alert-info { background: var(--sky-2); border-color: var(--sky); color: var(--ink); }

.modal-content, .dropdown-menu, .offcanvas {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  color: var(--ink-2);
  box-shadow: var(--shadow-3);
}
.dropdown-item { color: var(--ink-2); font-size: var(--text-sm); }
.dropdown-item:hover { background: var(--card-soft); color: var(--ink); }

.list-group-item { background: var(--card); border-color: var(--rule); color: var(--ink-2); font-size: var(--text-sm); }

.nav-tabs { border-bottom: 1px solid var(--rule); }
.nav-tabs .nav-link { border: 0; color: var(--ink-3); font-size: var(--text-sm); font-weight: 600; }
.nav-tabs .nav-link.active { background: transparent; border-bottom: 2px solid var(--coral); color: var(--ink); }

.breadcrumb { font-size: var(--text-xs); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-4); }

.page-link { background: var(--card); border-color: var(--rule); color: var(--ink-2); font-size: var(--text-sm); }
.page-item.active .page-link { background: var(--coral); border-color: var(--coral); color: #fff; }

.accordion-item { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); margin-bottom: var(--space-2); overflow: hidden; }
.accordion-button { background: var(--card); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.accordion-button:not(.collapsed) { background: var(--coral-2); color: var(--coral-ink); box-shadow: none; }
.accordion-button:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-2); }

.progress { background: var(--rule-2); border-radius: var(--radius-pill); height: 6px; }
.progress-bar { background: var(--coral); }

.tooltip-inner { background: var(--ink); border-radius: var(--radius); font-size: var(--text-xs); }

/* --- 4. The book -------------------------------------------------------- */

/* 4b. Spine + page edges. Pure CSS, always present, no JS. */
.book-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.book-frame::before,
.book-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background:
    repeating-linear-gradient(90deg,
      var(--leaf-edge) 0 1px,
      transparent 1px 3px);
  opacity: .5;
}
.book-frame::before { left: 0; }
.book-frame::after { right: 0; }

/* 4c. Public two-page spread. */
.book-spread {
  background: var(--bg-tint);
  min-height: 100vh;
  padding: var(--space-5) var(--space-4);
}

.book-spread__book {
  background: var(--leaf);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  margin: 0 auto;
  max-width: 1180px;
  position: relative;
  overflow: hidden;
}

/* The gutter shadow down the middle of the spread. */
.book-spread__book::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 46px;
  margin-left: -23px;
  background: linear-gradient(90deg,
    transparent,
    rgba(138, 120, 104, .10) 42%,
    rgba(138, 120, 104, .16) 50%,
    rgba(138, 120, 104, .10) 58%,
    transparent);
  pointer-events: none;
  z-index: 2;
}

.book-spread__leaves {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.book-spread__leaf { padding: var(--space-7) var(--space-6); }
.book-spread__leaf--full { grid-column: 1 / -1; }

.book-spread__foot {
  border-top: 1px solid var(--rule);
  color: var(--ink-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-2xs);
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
}

@media (max-width: 900px) {
  .book-spread__leaves { grid-template-columns: 1fr; }
  .book-spread__book::before { display: none; }
  .book-spread__leaf { padding: var(--space-6) var(--space-5); }
}

/* --- 5. App shell ------------------------------------------------------- */

.v2-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading);
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

.v2-shell[dir="rtl"] { grid-template-columns: minmax(0, 1fr) 240px; }
.v2-shell[lang="ar"], .v2-shell[lang="fa"] { font-family: "Noto Naskh Arabic", "Vazirmatn", system-ui, sans-serif; }

.v2-side {
  background: var(--card);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 100vh;
  padding: var(--space-5) var(--space-4);
}
.v2-shell[dir="rtl"] .v2-side { border-left: 1px solid var(--rule); border-right: 0; order: 2; }

.v2-brand {
  align-items: center;
  color: var(--ink);
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  text-decoration: none;
}
.v2-brand:hover { text-decoration: none; }

.v2-mark {
  align-items: center;
  background: linear-gradient(140deg, var(--coral), var(--coral-ink));
  border-radius: var(--radius);
  color: #fff;
  display: flex;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.v2-brand-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.v2-brand-name em { color: var(--coral); font-style: normal; }

.v2-nav { display: flex; flex-direction: column; gap: 2px; }

.v2-nav-label {
  color: var(--ink-4);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  margin: var(--space-4) 0 var(--space-1);
  padding: 0 var(--space-2);
  text-transform: uppercase;
}

.v2-nav-item {
  align-items: center;
  border-radius: var(--radius);
  color: var(--ink-2);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.v2-nav-item > span { align-items: center; display: flex; gap: var(--space-2); min-width: 0; }
.v2-nav-item i { color: var(--ink-3); font-size: var(--text-md); }
.v2-nav-item:hover { background: var(--card-soft); color: var(--ink); text-decoration: none; }
.v2-nav-item.active { background: var(--coral-2); color: var(--coral-ink); font-weight: 600; }
.v2-nav-item.active i { color: var(--coral-ink); }

.v2-count {
  background: var(--rule-2);
  border-radius: var(--radius-pill);
  color: var(--ink-3);
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 1px var(--space-2);
}

.v2-cycle { margin-top: var(--space-1); }
.v2-dot { background: var(--mint); border-radius: 50%; flex: none; height: 7px; width: 7px; }

.v2-side-foot {
  align-items: center;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
}

.v2-avatar {
  align-items: center;
  background: linear-gradient(140deg, var(--sun), var(--coral));
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: none;
  font-size: var(--text-sm);
  font-weight: 600;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.v2-side-user { min-width: 0; }
.v2-side-name { color: var(--ink); font-size: var(--text-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-side-user a, .v2-link-button { color: var(--ink-3); font-size: var(--text-2xs); }
.v2-link-button { background: none; border: 0; cursor: pointer; padding: 0; }
.v2-link-button:hover { color: var(--coral-ink); }

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

.v2-top {
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  position: sticky;
  top: 0;
  z-index: 20;
}

.v2-search {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  display: flex;
  flex: 1;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-4);
}
.v2-search i { color: var(--ink-4); }
.v2-search input {
  background: none;
  border: 0;
  color: var(--ink);
  flex: 1;
  font-family: inherit;
  font-size: var(--text-sm);
  min-width: 0;
  outline: none;
}
.v2-search input::placeholder { color: var(--ink-4); }
.v2-search:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-2); }

.v2-language-form { margin-left: auto; }
.v2-shell[dir="rtl"] .v2-language-form { margin-left: 0; margin-right: auto; }
.v2-language-form .form-select { font-size: var(--text-xs); padding: var(--space-1) var(--space-5) var(--space-1) var(--space-2); }

.v2-btn {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  display: inline-flex;
  flex: none;
  font-size: var(--text-sm);
  font-weight: 600;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  transition: transform .15s var(--ease-page), box-shadow .2s;
}
.v2-btn:hover { text-decoration: none; transform: translateY(-1px); }
.v2-btn.coral { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: var(--shadow-accent); }
.v2-btn.coral:hover { background: var(--coral-ink); border-color: var(--coral-ink); color: #fff; }

.v2-content { flex: 1; padding: var(--space-6) var(--space-6) var(--space-8); }
.v2-content > .container, .v2-content > .container-fluid { padding-left: 0; padding-right: 0; max-width: none; }

/* --- 6. Page furniture -------------------------------------------------- */

.v2-page-heading { margin-bottom: var(--space-5); }

.v2-eyebrow, .soft-eyebrow {
  color: var(--coral-ink);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[dir="rtl"] .v2-eyebrow, html[dir="rtl"] .soft-eyebrow { letter-spacing: 0; text-transform: none; }

.v2-title, .soft-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.02em;
  line-height: var(--leading-tight);
}

.soft-hero {
  background: linear-gradient(140deg, var(--card) 0%, var(--card-soft) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-7) var(--space-6);
  position: relative;
}
.soft-hero::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sun-2), transparent 68%);
  pointer-events: none;
}
html[dir="rtl"] .soft-hero::after { right: auto; left: -70px; }
.soft-hero .lead { font-size: var(--text-md); max-width: 54ch; }

.soft-stat, .v2-stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
}
.soft-stat strong, .v2-stat strong { color: var(--ink); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.soft-stat span, .v2-stat span { color: var(--ink-3); font-size: var(--text-xs); }

.soft-feature-card, .v2-action-card, .v2-filter-card, .v2-profile-card, .professor-card {
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  transition: transform .2s var(--ease-page), box-shadow .2s var(--ease-page);
}
.soft-feature-card:hover, .v2-action-card:hover, .professor-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.soft-feature-card p, .professor-card p { color: var(--ink-3); font-size: var(--text-sm); }

.soft-orb {
  align-items: center;
  background: linear-gradient(140deg, var(--coral), var(--sun));
  border-radius: var(--radius);
  color: #fff;
  display: flex;
  font-size: var(--text-md);
  height: 36px;
  justify-content: center;
  margin-bottom: var(--space-3);
  width: 36px;
}

.professor-avatar, .detail-avatar {
  align-items: center;
  background: linear-gradient(140deg, var(--sky), var(--lilac));
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-weight: 600;
  justify-content: center;
}
.professor-avatar { font-size: var(--text-sm); height: 36px; width: 36px; }
.detail-avatar { font-size: var(--text-xl); height: 64px; width: 64px; }

.v2-pill, .badge.v2-pill {
  align-items: center;
  background: var(--rule-2);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  display: inline-flex;
  font-size: var(--text-2xs);
  font-weight: 600;
  gap: var(--space-1);
  padding: 2px var(--space-2);
}
.v2-pill.coral { background: var(--coral-2); color: var(--coral-ink); }
.v2-pill.mint { background: var(--mint-2); color: #276b4a; }
.v2-pill.sun { background: var(--sun-2); color: #8a6512; }
.v2-pill.sky { background: var(--sky-2); color: #1f5d8a; }
.v2-pill.lilac { background: var(--lilac-2); color: #5b4585; }
.v2-pill.solid { background: var(--coral); color: #fff; }
html[data-theme="dark"] .v2-pill.mint { color: var(--mint); }
html[data-theme="dark"] .v2-pill.sun { color: var(--sun); }
html[data-theme="dark"] .v2-pill.sky { color: var(--sky); }
html[data-theme="dark"] .v2-pill.lilac { color: var(--lilac); }

.v2-filter-card .form-check { padding-left: 1.6em; }
html[dir="rtl"] .v2-filter-card .form-check { padding-left: 0; padding-right: 1.6em; }

/* Program catalog — now on real tokens instead of raw --bs-* and hex. */
.program-beta-banner {
  background: var(--sun-2);
  border: 1px solid var(--sun);
  border-radius: var(--radius-lg);
  color: var(--ink);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
}
.program-card, .department-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  height: 100%;
  transition: transform .2s var(--ease-page), box-shadow .2s var(--ease-page);
}
.program-card:hover, .department-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.program-card-facts dt { color: var(--ink-3); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.program-card-facts dd { color: var(--ink-2); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.program-completeness { background: var(--rule-2); border-radius: var(--radius-pill); height: 5px; overflow: hidden; }
.program-completeness > span { background: var(--mint); display: block; height: 100%; }
.program-filter-section { border-bottom: 1px solid var(--rule); padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
.program-source { color: var(--ink-3); font-size: var(--text-xs); }
.program-missing { color: var(--ink-4); font-style: italic; }
.university-crest {
  align-items: center;
  background: var(--card-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-3);
  display: flex;
  font-weight: 600;
  height: 40px;
  justify-content: center;
  width: 40px;
}

/* --- 7. Auth & public layouts ------------------------------------------- */

.auth-page {
  align-items: center;
  background:
    radial-gradient(900px 420px at 12% -8%, var(--sun-2), transparent 62%),
    radial-gradient(760px 420px at 92% 108%, var(--coral-2), transparent 62%),
    var(--bg);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6) var(--space-4);
}

.auth-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  max-width: 420px;
  padding: var(--space-7) var(--space-6);
  width: 100%;
}
.auth-card h1 { font-size: var(--text-xl); }
.auth-card .form-control { padding: var(--space-3); }

.auth-brand {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  text-decoration: none;
}
.auth-foot { color: var(--ink-3); font-size: var(--text-xs); margin-top: var(--space-5); text-align: center; }

.public-nav {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin: 0 auto var(--space-5);
  max-width: 1180px;
  padding: 0 var(--space-2);
}
.public-nav__links { align-items: center; display: flex; gap: var(--space-4); }
.public-nav__links a { color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }

/* --- 8. Utilities & motion ---------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg, var(--rule-2) 25%, var(--card-soft) 37%, var(--rule-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.toast-stack { bottom: var(--space-5); position: fixed; right: var(--space-5); z-index: 1080; }
html[dir="rtl"] .toast-stack { left: var(--space-5); right: auto; }

.animate-on-load { animation: fadeSlideUp .45s var(--ease-page) both; }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#cookie-banner {
  background: var(--card) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
}

footer { color: var(--ink-3); font-size: var(--text-xs); }

body.protect-professor-data { -webkit-user-select: none; user-select: none; }
body.protect-professor-data .copy-allowed { -webkit-user-select: text; user-select: text; }

/* --- 9. Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .v2-shell, .v2-shell[dir="rtl"] { grid-template-columns: 1fr; }
  .v2-side {
    border-bottom: 1px solid var(--rule);
    border-right: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 0;
    overflow-x: auto;
    padding: var(--space-3) var(--space-4);
  }
  .v2-shell[dir="rtl"] .v2-side { border-left: 0; order: 0; }
  .v2-brand { margin-bottom: 0; }
  .v2-nav { flex-direction: row; flex-wrap: nowrap; }
  .v2-nav-label, .v2-side-foot, .v2-cycle { display: none; }
  .v2-nav-item { padding: var(--space-1) var(--space-2); white-space: nowrap; }
  .v2-top { padding: var(--space-3) var(--space-4); }
  .v2-content { padding: var(--space-5) var(--space-4) var(--space-7); }
  .book-frame { display: none; }
}

@media (max-width: 575.98px) {
  .v2-top { flex-wrap: wrap; }
  .v2-search { order: 3; width: 100%; flex-basis: 100%; }
  .soft-hero { padding: var(--space-6) var(--space-4); }
  .auth-card { padding: var(--space-6) var(--space-5); }
}

/* --- 10. Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 11. Paper-plane scene ---------------------------------------------- */
/* Timeline is 8.2s. Static default (no JS, or reduced motion) renders the
   final happy frame, so the story still reads without any animation. */

.plane-scene {
  display: block;
  height: auto;
  width: 100%;
  min-height: 210px;
  margin: 0 auto;
  overflow: visible;
  --ps-dur: 8.2s;
}

.plane-scene.is-clickable { cursor: pointer; }

/* Static frame: happy professor, no flyer, no plane. */
.ps-flyer, .ps-plane, .ps-trail, .ps-spark, .ps-stars, .ps-burst, .ps-arms-up { opacity: 0; }
.ps-face-idle { opacity: 0; }
.ps-face-happy { opacity: 1; }
.ps-note-held { opacity: 1; }

/* While playing, the timeline takes over. */
.plane-scene.is-playing .ps-face-idle { animation: ps-face-idle var(--ps-dur) linear infinite; }
.plane-scene.is-playing .ps-face-happy { animation: ps-face-happy var(--ps-dur) linear infinite; }
.plane-scene.is-playing .ps-note-held { animation: ps-note var(--ps-dur) linear infinite; }
.plane-scene.is-playing .ps-flyer { animation: ps-flyer var(--ps-dur) linear infinite; }
.plane-scene.is-playing .ps-spark { animation: ps-spark var(--ps-dur) linear infinite; }
.plane-scene.is-playing .ps-plane { animation: ps-plane var(--ps-dur) linear infinite; }
.plane-scene.is-playing .ps-trail { animation: ps-trail var(--ps-dur) linear infinite; }
.plane-scene.is-playing .ps-arm { animation: ps-arm var(--ps-dur) ease-in-out infinite; }
.plane-scene.is-playing .ps-student { animation: ps-student var(--ps-dur) var(--ease-spring) infinite; }
.plane-scene.is-playing .ps-arms-up { animation: ps-arms-up var(--ps-dur) var(--ease-spring) infinite; }
.plane-scene.is-playing .ps-prof { animation: ps-prof var(--ps-dur) var(--ease-spring) infinite; }
.plane-scene.is-playing .ps-prof-head { animation: ps-head var(--ps-dur) var(--ease-spring) infinite; }
.plane-scene.is-playing .ps-glasses { animation: ps-glasses var(--ps-dur) var(--ease-spring) infinite; }
.plane-scene.is-playing .ps-stars { animation: ps-stars var(--ps-dur) ease-out infinite; }
.plane-scene.is-playing .ps-mug { animation: ps-mug var(--ps-dur) ease-out infinite; }
.plane-scene.is-playing .ps-burst { animation: ps-burst var(--ps-dur) var(--ease-spring) infinite; }
.plane-scene.is-playing .ps-lamp-glow { animation: ps-lamp var(--ps-dur) ease-in-out infinite; }

/* The flyer folds into a plane: three shape beats before launch. */
@keyframes ps-flyer {
  0%, 6% { opacity: 0; transform: translateY(0) scale(.6) rotate(0deg); }
  8% { opacity: 1; transform: translateY(-4px) scale(1) rotate(-4deg); }
  12% { opacity: 1; transform: translateY(-6px) scale(.94) rotate(6deg); }
  15% { opacity: 1; transform: translateY(-4px) scale(.82) rotate(-10deg); }
  17.1% { opacity: 0; transform: translateY(-2px) scale(.7) rotate(-14deg); }
  100% { opacity: 0; }
}

@keyframes ps-spark {
  0%, 4% { opacity: 0; transform: scale(.4); }
  6.5% { opacity: 1; transform: scale(1.15); }
  10% { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; }
}

/* Wind up, then throw. */
@keyframes ps-arm {
  0%, 14% { transform: rotate(0deg); }
  18% { transform: rotate(-34deg); }
  20.7% { transform: rotate(46deg); }
  24% { transform: rotate(10deg); }
  30%, 100% { transform: rotate(0deg); }
}

/* Flight along the arc. offset-rotate makes it bank into the curve. */
@keyframes ps-plane {
  0%, 20.4% { opacity: 0; offset-distance: 0%; }
  20.7% { opacity: 1; offset-distance: 0%; }
  37.8% { opacity: 1; offset-distance: 100%; }
  39.2% { opacity: 0; offset-distance: 100%; }
  100% { opacity: 0; }
}

@keyframes ps-trail {
  0%, 20.7% { opacity: 0; stroke-dashoffset: 760; }
  22% { opacity: .55; }
  37.8% { opacity: .55; stroke-dashoffset: 0; }
  44% { opacity: 0; stroke-dashoffset: 0; }
  100% { opacity: 0; }
}

/* Bonk: head jolts back, then settles. */
@keyframes ps-head {
  0%, 37.5% { transform: translate(0, 0) rotate(0deg); }
  38.6% { transform: translate(7px, -3px) rotate(7deg); }
  40% { transform: translate(-2px, 1px) rotate(-3deg); }
  42%, 55% { transform: translate(0, 0) rotate(0deg); }
  57% { transform: translate(-4px, 0) rotate(-5deg); }
  61% { transform: translate(-2px, -3px) rotate(-2deg); }
  66% { transform: translate(-2px, -6px) rotate(0deg); }
  100% { transform: translate(-2px, -4px) rotate(0deg); }
}

@keyframes ps-glasses {
  0%, 37.8% { transform: translateY(0) rotate(0deg); }
  38.8% { transform: translateY(-9px) rotate(9deg); }
  40.5% { transform: translateY(2px) rotate(-3deg); }
  42%, 100% { transform: translateY(0) rotate(0deg); }
}

@keyframes ps-stars {
  0%, 37.6% { opacity: 0; transform: scale(.3); }
  38.8% { opacity: 1; transform: scale(1.15); }
  45% { opacity: 1; transform: scale(1.3); }
  49% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; }
}

@keyframes ps-mug {
  0%, 37.8% { transform: translateY(0) rotate(0deg); }
  39% { transform: translateY(-2px) rotate(-4deg); }
  41% { transform: translateY(0) rotate(3deg); }
  43%, 100% { transform: translateY(0) rotate(0deg); }
}

/* Slumped while reading, pops upright when delighted. */
@keyframes ps-prof {
  0% { transform: translateY(3px); }
  30% { transform: translateY(4px); }
  37.8% { transform: translateY(3px); }
  39% { transform: translateY(6px); }
  56% { transform: translateY(3px); }
  61% { transform: translateY(-8px); }
  66% { transform: translateY(-4px); }
  70% { transform: translateY(-7px); }
  100% { transform: translateY(-6px); }
}

@keyframes ps-face-idle {
  0%, 56% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes ps-face-happy {
  0%, 57% { opacity: 0; }
  61% { opacity: 1; }
  100% { opacity: 1; }
}

/* The note only exists in the professor's hands after the bonk. */
@keyframes ps-note {
  0%, 39.5% { opacity: 0; transform: translateY(-6px) rotate(-12deg); }
  43.9% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes ps-burst {
  0%, 59% { opacity: 0; transform: scale(.4) rotate(0deg); }
  63% { opacity: .9; transform: scale(1.05) rotate(8deg); }
  70% { opacity: .55; transform: scale(1) rotate(14deg); }
  100% { opacity: .55; transform: scale(1) rotate(20deg); }
}

@keyframes ps-lamp {
  0%, 58% { opacity: .18; }
  62% { opacity: .62; }
  100% { opacity: .5; }
}

/* Student cheers back. */
@keyframes ps-student {
  0%, 60% { transform: translateY(0); }
  63% { transform: translateY(-9px); }
  68% { transform: translateY(0); }
  71% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@keyframes ps-arms-up {
  0%, 60% { opacity: 0; transform: translateY(6px); }
  63% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}


/* Send-confirmation overlay */
.send-success {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: rgba(34, 25, 18, .48);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-page), visibility .3s;
}
.send-success.is-open { opacity: 1; visibility: visible; }
.send-success__card {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  max-width: 360px;
  padding: var(--space-6);
  text-align: center;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .plane-scene.is-playing *,
  .plane-send * { animation: none !important; }
  .plane-scene .ps-face-happy, .plane-send .ps-face-happy { opacity: 1; }
  .plane-scene .ps-face-idle, .plane-send .ps-face-idle { opacity: 0; }
  .plane-scene .ps-note-held { opacity: 1; }
  .plane-scene .ps-burst { opacity: .55; }
}

/* Transform origins for the scene's moving parts. Not applied to .ps-plane,
   which is positioned by offset-path and must stay in user space. */
.plane-scene .ps-flyer,
.plane-scene .ps-spark,
.plane-scene .ps-arm,
.plane-scene .ps-student,
.plane-scene .ps-arms-up,
.plane-scene .ps-prof,
.plane-scene .ps-prof-head,
.plane-scene .ps-glasses,
.plane-scene .ps-stars,
.plane-scene .ps-mug,
.plane-scene .ps-note-held,
.plane-scene .ps-burst { transform-box: fill-box; transform-origin: center; }

.plane-scene .ps-arm { transform-origin: 8% 50%; }
.plane-scene .ps-prof-head { transform-origin: 50% 88%; }
.plane-scene .ps-prof { transform-origin: 50% 100%; }
.plane-scene .ps-student { transform-origin: 50% 100%; }
.plane-scene .ps-mug { transform-origin: 50% 100%; }
.plane-scene .ps-burst { transform-origin: 50% 70%; }
.plane-scene .ps-flyer { transform-origin: 30% 60%; }

/* Fallback for browsers without CSS motion paths: keyframed translate. */
.plane-scene.no-offset-path .ps-plane { offset-path: none; }
.plane-scene.no-offset-path.is-playing .ps-plane { animation: ps-plane-fallback var(--ps-dur) linear infinite; }

@keyframes ps-plane-fallback {
  0%, 20.4% { opacity: 0; transform: translate(200px, 186px) rotate(-20deg); }
  20.7% { opacity: 1; transform: translate(200px, 186px) rotate(-20deg); }
  26% { transform: translate(340px, 104px) rotate(-10deg); }
  31% { transform: translate(470px, 78px) rotate(0deg); }
  37.8% { opacity: 1; transform: translate(712px, 152px) rotate(16deg); }
  39.2% { opacity: 0; transform: translate(712px, 152px) rotate(16deg); }
  100% { opacity: 0; }
}

/* Django renders these form widgets without Bootstrap classes, so style the
   bare inputs directly rather than patching every auth template. */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"],
.auth-card select,
.auth-card textarea {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  display: block;
  font-family: inherit;
  font-size: var(--text-sm);
  padding: var(--space-3);
  width: 100%;
}
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-2);
  outline: none;
}
.auth-card label { color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-1); }
.auth-card ul.errorlist { color: var(--coral-ink); font-size: var(--text-xs); list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.auth-card .helptext { color: var(--ink-3); display: block; font-size: var(--text-2xs); margin-top: var(--space-1); }

/* Success mark used by the password-reset confirmations. */
.state-mark {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  font-size: var(--text-xl);
  height: 56px;
  justify-content: center;
  margin-bottom: var(--space-3);
  width: 56px;
}
.state-mark.mint { background: var(--mint-2); color: #276b4a; }
html[data-theme="dark"] .state-mark.mint { color: var(--mint); }

/* --- 12. Pricing -------------------------------------------------------- */

.measure-wide { max-width: 880px; }

.pricing-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pricing-tier {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  position: relative;
}

.pricing-tier.is-featured {
  border-color: var(--coral);
  box-shadow: var(--shadow-2);
}

.pricing-tier.is-current { border-color: var(--mint); }

.pricing-tier__flag {
  position: absolute;
  top: calc(var(--space-3) * -1);
  left: var(--space-5);
}
html[dir="rtl"] .pricing-tier__flag { left: auto; right: var(--space-5); }

.pricing-tier__price {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.pricing-tier__price span { color: var(--ink-3); font-family: var(--font-ui); font-size: var(--text-sm); }

.pricing-tier__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.pricing-tier__list li {
  align-items: flex-start;
  color: var(--ink-2);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
  max-width: none;
}
.pricing-tier__list i { color: var(--mint); flex: none; margin-top: 2px; }

/* --- 13. Empty states --------------------------------------------------- */

.empty-state {
  align-items: center;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.empty-state__art { color: var(--ink-4); font-size: var(--text-2xl); }
.empty-state h3 { font-size: var(--text-md); margin: 0; }
.empty-state p { color: var(--ink-3); font-size: var(--text-sm); margin: 0; max-width: 46ch; }

/* --- 14. Page-specific, lifted out of per-template <style> blocks -------- */


/* selection_flow: bounded pick lists */
.scroll-box {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  max-height: 150px;
  overflow-y: auto;
  padding: var(--space-1);
}
.scroll-box ul { list-style: none; margin-bottom: 0; padding-left: 0; }
.scroll-box li { margin-bottom: 3px; max-width: none; }

/* Search results are unbounded, and a broad filter used to push the
   "generate emails" step far below the fold. Cap the list and give it its own
   scrollbar so the next step stays visible however many professors match. */
.results-scroll {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  max-height: 45vh;
  min-height: 160px;
  overflow: auto;
}
.results-scroll table { margin-bottom: 0; }

/* Column labels have to survive scrolling inside the box, otherwise the
   checkbox column is unidentifiable a few rows down. */
.results-scroll thead th {
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--rule-strong);
  position: sticky;
  top: 0;
  z-index: 2;
}

.university-crest-img {
  background: var(--card-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  object-fit: contain;
  padding: 4px;
}

/* --- 15. Usage meters --------------------------------------------------- */

.usage-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.usage-meter {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.usage-meter__head {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.usage-meter__head span { color: var(--ink-3); font-size: var(--text-xs); }
.usage-meter__head strong { color: var(--ink); font-size: var(--text-md); font-family: var(--font-display); }
.usage-meter__head strong span { color: var(--ink-4); font-family: var(--font-ui); font-size: var(--text-xs); }

.progress-bar.is-mint { background: var(--mint); }

.pricing-tier__list li.is-off { color: var(--ink-4); }
.pricing-tier__list li.is-off i { color: var(--ink-4); }

/* --- 16. Page header + toolbar ------------------------------------------ */

.page-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.page-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.stat-strip {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: var(--space-5);
}

/* --- 17. Inline notes and setting rows ---------------------------------- */

.inline-note {
  align-items: center;
  background: var(--card-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}
.inline-note.is-mint { background: var(--mint-2); border-color: var(--mint); }
.inline-note.is-sun { background: var(--sun-2); border-color: var(--sun); }
.inline-note strong { color: var(--ink); font-size: var(--text-sm); }

.setting-row {
  align-items: center;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-4) 0;
}
.setting-row:first-of-type { border-top: 0; padding-top: 0; }
.setting-row:last-child { padding-bottom: 0; }
.setting-row strong { color: var(--ink); font-size: var(--text-sm); }
.setting-row--stack { align-items: flex-start; }

@media (max-width: 575.98px) {
  .setting-row, .inline-note { align-items: flex-start; flex-direction: column; }
}

/* --- 18. Long-form text ------------------------------------------------- */

.prose { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.7; max-width: var(--measure); }
.prose p { margin-bottom: var(--space-3); }
.prose p:last-child { margin-bottom: 0; }
.prose a { text-decoration: underline; }

/* --- 19. Professor card ------------------------------------------------- */

.prof-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4);
  transition: transform .2s var(--ease-page), box-shadow .2s var(--ease-page);
}
.prof-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

.prof-card__head { align-items: flex-start; display: flex; gap: var(--space-2); }
.prof-card__id { flex: 1; min-width: 0; }
.prof-card__name { font-size: var(--text-md); margin: 0 0 2px; line-height: 1.25; }
.prof-card__name a { color: var(--ink); }
.prof-card__name a:hover { color: var(--coral-ink); }
.prof-card__org {
  color: var(--ink-3);
  font-size: var(--text-xs);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prof-card__tools { align-items: center; display: flex; flex: none; gap: var(--space-2); }
.prof-card__bookmark {
  background: none;
  border: 0;
  color: var(--ink-4);
  cursor: pointer;
  font-size: var(--text-md);
  line-height: 1;
  padding: 0;
}
.prof-card__bookmark:hover { color: var(--sun); }
.prof-card__bookmark .is-on { color: var(--sun); }

.prof-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.prof-card__bio {
  color: var(--ink-3);
  font-size: var(--text-xs);
  margin: 0;
  max-width: none;
}

.prof-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* --- 20. Pipeline board ------------------------------------------------- */

.kanban {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-4);
}

.kanban-col {
  background: var(--card-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  flex: 0 0 272px;
  max-height: 72vh;
}

.kanban-col__head {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  display: flex;
  font-size: var(--text-2xs);
  font-weight: 700;
  gap: var(--space-2);
  justify-content: space-between;
  letter-spacing: .08em;
  padding: var(--space-3);
  text-transform: uppercase;
}
html[dir="rtl"] .kanban-col__head { letter-spacing: 0; text-transform: none; }

.kanban-drop {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  padding: var(--space-3);
}
.kanban-drop.drag-over { background: var(--coral-2); }

.kanban-col__empty {
  color: var(--ink-4);
  font-size: var(--text-xs);
  margin: 0;
  padding: var(--space-5) 0;
  text-align: center;
}

.kanban-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--space-3);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .45; }
.kanban-card__name { color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.kanban-card__org { color: var(--ink-3); font-size: var(--text-2xs); margin: 0; max-width: none; }
.kanban-card__note {
  color: var(--ink-3);
  font-size: var(--text-2xs);
  margin: var(--space-1) 0 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kanban-card__due {
  align-items: center;
  color: var(--coral-ink);
  display: flex;
  font-size: var(--text-2xs);
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  max-width: none;
}

.add-results { max-height: 240px; overflow-y: auto; }
.add-results .list-group-item { font-size: var(--text-xs); }

/* --- 21. Draft review rows ---------------------------------------------- */

.draft-head {
  align-items: stretch;
  display: flex;
  margin: 0;
}

.draft-head__check {
  align-items: center;
  border-right: 1px solid var(--rule);
  display: flex;
  flex: none;
  padding: 0 var(--space-4);
}
html[dir="rtl"] .draft-head__check { border-left: 1px solid var(--rule); border-right: 0; }
.draft-head__check .form-check-input { cursor: pointer; height: 18px; margin: 0; width: 18px; }

.draft-head__btn {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  min-width: 0;
}
.draft-head__btn.accordion-button { background: transparent; box-shadow: none; }
.draft-head__btn.accordion-button:not(.collapsed) { background: var(--card-soft); color: var(--ink); }

.draft-head__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: start;
}
.draft-head__who strong { color: var(--ink); font-size: var(--text-sm); }
.draft-head__who .text-muted { font-size: var(--text-2xs); }

.draft-head__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* --- 22. Application flow ----------------------------------------------- */

.flow-step__head {
  align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
}

.flow-step__num {
  align-items: center;
  background: var(--coral);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  height: 32px;
  justify-content: center;
  width: 32px;
}

/* Tick-to-pick card, used for the shortlist quick-pick. */
.pick-card {
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3);
  transition: border-color .15s, background-color .15s;
}
.pick-card:hover { border-color: var(--rule-strong); background: var(--card-soft); }
.pick-card:has(input:checked) { border-color: var(--coral); background: var(--coral-2); }
.pick-card input { flex: none; margin-top: 2px; }
.pick-card__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pick-card__body strong { color: var(--ink); font-size: var(--text-sm); }
.pick-card__body .text-muted { font-size: var(--text-2xs); }

/* The filter form renders Django multi-selects straight into these boxes. */
.scroll-box select { border: 0; font-size: var(--text-sm); width: 100%; }
.scroll-box select:focus { box-shadow: none; outline: none; }

/* Pills are inline-flex, so inside a column flex card they stretch to the full
   width unless told otherwise. */
.soft-feature-card > .v2-pill,
.v2-action-card > .v2-pill,
.prof-card > .v2-pill,
.pricing-tier > .v2-pill { align-self: flex-start; }

/* Buttons in a column flex card stretch the same way. */
.soft-feature-card > .btn,
.v2-action-card > .btn { align-self: flex-start; }

/* ==========================================================================
   23. Illustrated scenes — shared character kit
   Every scene's STATIC state is its resting frame, so with JS off or reduced
   motion on the drawing still reads. Story beats run once under .is-playing;
   only idle motion (breathing, sway, blink) loops.
   ========================================================================== */

.scene {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}
.scene.is-clickable { cursor: pointer; }

/* NOTE for new scenes: a CSS transform (including one from an animation)
   overrides the SVG `transform` presentation attribute outright. Never put
   both on the same element, or the figure snaps to the origin and disappears.
   Position with a plain wrapper <g transform="translate(x,y)"> and animate the
   <g> inside it. */

/* Everything animated gets a sane transform box. Figures rotate about their
   feet, props about their own centre. */
.scene [class*="sc-"] { transform-box: fill-box; transform-origin: center; }
.scene .sc-bob,
.scene .sc-sway,
.scene .sc-figure { transform-origin: 50% 100%; }
/* An arm (and whatever it holds) pivots at the shoulder, near its bbox top. */
.scene .sc-arm { transform-origin: 50% 8%; }
/* A hinged prop — lid, door, page — pivots at one edge. */
.scene .sc-hinge-l { transform-origin: 0% 50%; }
.scene .sc-hinge-b { transform-origin: 50% 100%; }

/* ---- idle: always running ---- */
.scene .sc-bob { animation: sc-bob 3.2s ease-in-out infinite; }
.scene .sc-sway { animation: sc-sway 4.4s ease-in-out infinite; }
.scene .sc-float { animation: sc-float 3.6s ease-in-out infinite; }
.scene .sc-blink { animation: sc-blink 5.2s steps(1, end) infinite; }
.scene .sc-spin { animation: sc-spin 9s linear infinite; }
.scene .sc-pulse { animation: sc-pulse 2.4s ease-in-out infinite; }

/* Must out-specify the `animation:` shorthands below, which reset the delay. */
.scene .sc-d1, .scene.is-playing .sc-d1 { animation-delay: .25s; }
.scene .sc-d2, .scene.is-playing .sc-d2 { animation-delay: .5s; }
.scene .sc-d3, .scene.is-playing .sc-d3 { animation-delay: .8s; }
.scene .sc-d4, .scene.is-playing .sc-d4 { animation-delay: 1.15s; }

@keyframes sc-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes sc-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}
@keyframes sc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes sc-blink {
  0%, 92%, 96% { transform: scaleY(1); }
  94% { transform: scaleY(.15); }
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-pulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.06); }
}

/* ---- story beats: play once when the scene comes into view ---- */
/* Props that only exist mid-story rest at opacity 0. */
.scene .sc-cue { opacity: 0; }
.scene.is-playing .sc-cue { animation: sc-cue 4.2s ease-out 1 both; }
@keyframes sc-cue {
  0%, 8% { opacity: 0; transform: translateY(4px) scale(.6); }
  22% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  46% { opacity: 1; transform: translateY(-4px) scale(1); }
  62%, 100% { opacity: 0; transform: translateY(-8px) scale(.9); }
}

/* Two-state faces: resting shows the resolved one. */
.scene .sc-before { opacity: 0; }
.scene .sc-after { opacity: 1; }
.scene.is-playing .sc-before { animation: sc-before 4.2s linear 1 both; }
.scene.is-playing .sc-after { animation: sc-after 4.2s linear 1 both; }
@keyframes sc-before { 0%, 62% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes sc-after { 0%, 64% { opacity: 0; } 72%, 100% { opacity: 1; } }

/* A prop that swings once (wrench, pen, rod, arm). */
.scene.is-playing .sc-swing { animation: sc-swing 4.2s ease-in-out 1 both; }
@keyframes sc-swing {
  0%, 10% { transform: rotate(0deg); }
  26% { transform: rotate(-24deg); }
  42% { transform: rotate(16deg); }
  58% { transform: rotate(-10deg); }
  72%, 100% { transform: rotate(0deg); }
}

/* A prop that is thrown up and comes back. */
.scene.is-playing .sc-toss { animation: sc-toss 4.2s cubic-bezier(.3,.1,.5,1) 1 both; }
@keyframes sc-toss {
  0%, 14% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-46px) rotate(180deg); }
  66% { transform: translateY(-10px) rotate(320deg); }
  78%, 100% { transform: translateY(0) rotate(360deg); }
}

/* A line or path that draws itself in. */
.scene .sc-draw { stroke-dasharray: 260; stroke-dashoffset: 0; }
.scene.is-playing .sc-draw { animation: sc-draw 4.2s ease-out 1 both; }
@keyframes sc-draw {
  0%, 12% { stroke-dashoffset: 260; }
  62%, 100% { stroke-dashoffset: 0; }
}

/* A small celebration pop at the end of the beat. */
.scene.is-playing .sc-cheer { animation: sc-cheer 4.2s var(--ease-spring) 1 both; }
@keyframes sc-cheer {
  0%, 66% { transform: translateY(0); }
  74% { transform: translateY(-9px); }
  84% { transform: translateY(-2px); }
  90%, 100% { transform: translateY(-5px); }
}

/* Something sliding in from the left, then settling. */
.scene.is-playing .sc-enter { animation: sc-enter 4.2s var(--ease-page) 1 both; }
@keyframes sc-enter {
  0% { opacity: 0; transform: translateX(-38px); }
  30%, 100% { opacity: 1; transform: translateX(0); }
}

/* Something that fills up (water, progress, a jar). */
.scene.is-playing .sc-fill { animation: sc-fill 4.2s ease-out 1 both; }
@keyframes sc-fill {
  0%, 10% { transform: scaleY(0); }
  70%, 100% { transform: scaleY(1); }
}
.scene .sc-fill { transform-origin: 50% 100%; }

/* ---- the hero band each page opens with ---- */

.page-hero {
  align-items: center;
  display: flex;
  gap: var(--space-5);
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.page-hero__text { flex: 1; min-width: 0; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.page-hero__art { flex: none; width: 280px; }
.page-hero__art .scene { max-height: 180px; }

@media (max-width: 991.98px) { .page-hero__art { width: 210px; } }
@media (max-width: 767.98px) { .page-hero__art { display: none; } }
/* --- 25. Tiny status figures -------------------------------------------- */

.mini-fig {
  display: inline-block;
  height: 30px;
  width: 24px;
  vertical-align: middle;
  overflow: visible;
}
.mini-fig [class*="mf-"] { transform-box: fill-box; transform-origin: 50% 100%; }

.mini-fig--happy .mf-jump { animation: mf-jump 1.1s var(--ease-spring) 2 both; }
@keyframes mf-jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-7px); }
  55% { transform: translateY(0); }
  70% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.mini-fig--sad .mf-slump { animation: mf-slump 1.3s ease-out 1 both; }
@keyframes mf-slump {
  0% { transform: translateY(-4px) rotate(0deg); }
  60% { transform: translateY(1px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}
.mini-fig--sad .mf-rain { animation: mf-rain 1.4s ease-in-out infinite; transform-origin: 50% 0%; }
@keyframes mf-rain {
  0%, 100% { transform: translateY(0); opacity: .85; }
  50% { transform: translateY(2px); opacity: 1; }
}

.status-with-fig { align-items: center; display: inline-flex; gap: var(--space-2); }

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

/* --- 26. Postman and money-grab, both one-shot on .is-sent --------------- */

.plane-send [class*="pm-"],
.plane-send [class*="mn-"] { transform-box: fill-box; transform-origin: center; }
.plane-send .pm-arm, .plane-send .mn-reach { transform-origin: 50% 8%; }

/* -- postman -- */
.plane-send .pm-walk { transform: translateX(120px); opacity: 0; }
.plane-send .pm-letters { opacity: 1; }

.plane-send.is-sent .pm-walk { animation: pm-walk 2.2s var(--ease-page) 1 both; }
.plane-send.is-sent .pm-arm { animation: pm-arm 2.2s ease-in-out 1 both; }
.plane-send.is-sent .pm-letters { animation: pm-letters 2.2s ease-in 1 both; }

@keyframes pm-walk {
  0% { opacity: 0; transform: translateX(120px); }
  22% { opacity: 1; transform: translateX(0); }
  62% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(150px); }
}
@keyframes pm-arm {
  0%, 24% { transform: rotate(0deg); }
  38% { transform: rotate(-52deg); }
  52% { transform: rotate(-10deg); }
  70% { transform: rotate(-44deg); }
  82% { transform: rotate(-18deg); }
  100% { transform: rotate(-40deg); }
}
@keyframes pm-letters {
  0%, 36% { opacity: 1; transform: translate(0, 0) scale(1); }
  54% { opacity: 0; transform: translate(60px, -26px) scale(.7); }
  100% { opacity: 0; transform: translate(60px, -26px) scale(.7); }
}

/* -- money grab -- */
.plane-send .mn-note { transform: translate(0, 0); }
.plane-send .mn-coin { opacity: 0; }
.plane-send .mn-taker { opacity: 1; }

.plane-send.is-sent .mn-note { animation: mn-note 1.8s var(--ease-page) 1 both; }
.plane-send.is-sent .mn-reach { animation: mn-reach 1.8s ease-in-out 1 both; }
.plane-send.is-sent .mn-coin--1 { animation: mn-coin 1.8s ease-out 1 both; animation-delay: .35s; }
.plane-send.is-sent .mn-coin--2 { animation: mn-coin 1.8s ease-out 1 both; animation-delay: .55s; }
.plane-send.is-sent .mn-taker { animation: mn-taker 1.8s var(--ease-spring) 1 both; }

@keyframes mn-note {
  0%, 12% { transform: translate(0, 0) rotate(0deg); }
  70% { transform: translate(112px, -28px) rotate(12deg); }
  100% { transform: translate(122px, -30px) rotate(10deg); }
}
@keyframes mn-reach {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(16deg); }
  75%, 100% { transform: rotate(-8deg); }
}
@keyframes mn-coin {
  0% { opacity: 0; transform: translate(0, 10px) scale(.5); }
  45% { opacity: 1; transform: translate(14px, -10px) scale(1); }
  100% { opacity: 0; transform: translate(30px, -26px) scale(.8); }
}
@keyframes mn-taker {
  0%, 60% { transform: translateY(0); }
  76% { transform: translateY(-7px); }
  100% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .plane-send * { animation: none !important; }
  .plane-send .pm-walk { opacity: 1; transform: none; }
  .plane-send .mn-coin { opacity: 1; }
}

/* Shared frame for the one-shot action scenes (postman, money grab). */
.plane-send {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 300px;
  overflow: visible;
  width: 100%;
}