/* ════════════════════════════════════════════════════════════════════════════
   subjects.css  —  v1.0  (Commit 1: mechanical split — no behaviour change)
   ----------------------------------------------------------------------------
   Source: split out of pages/subjects.html <style> block (Architect-Scholar
   reskin). Every selector here was previously inline inside that page's
   <style> tag; rules are reproduced verbatim and in their original order.

   Preserved verbatim:
     - Every selector, declaration, and value
     - Every @media / @keyframes block
     - All hardcoded values (no token retirements in this commit)

   Section banners mirror subjects.js for cross-file navigation.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   1. PAGE CHROME
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Page chrome ───────────────────────────────────────────────── */
body.subjects-page {
  background: var(--surface);
  background-image:
    linear-gradient(rgba(81, 97, 94, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 97, 94, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. WIZARD HERO + BREADCRUMB
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Wizard hero header ────────────────────────────────────────── */
.wizard-hero {
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wizard-hero__title {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--text-main);
  line-height: 1.05;
  max-width: 100%;
  text-align: center;
}

.wizard-hero__title em {
  color: var(--brand-rose);
  font-style: normal;
}

.wizard-hero__lede {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-muted);
  text-align: center;
}

/* ── Breadcrumb step indicator ─────────────────────────────────── */
.wizard-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wizard-breadcrumb__step {
  color: var(--text-muted);
  opacity: 0.55;
  transition: opacity 200ms ease, color 200ms ease;
}

.wizard-breadcrumb__step.is-active {
  color: var(--brand-rose);
  opacity: 1;
}

.wizard-breadcrumb__step.is-done {
  color: var(--text-main);
  opacity: 0.85;
}

.wizard-breadcrumb__sep {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 12px;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. TRIO CARD CORE
   ════════════════════════════════════════════════════════════════════════════ */

/* ── The Trio Card (canonical for all 3 steps) ─────────────────── */
.trio-grid {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.trio-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 920px;
}

.trio-grid--many {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  max-width: 1100px;
}

.trio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  background: var(--glass-bg, rgba(255, 255, 255, 0.4));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(81, 97, 94, 0.04);
  cursor: pointer;
  transition: transform 280ms cubic-bezier(.2, .7, .2, 1),
    border-color 200ms ease,
    box-shadow 280ms ease;
  overflow: hidden;
}

.trio-card:hover {
  transform: translateY(-2px);
  border-color: rgba(183, 110, 121, 0.45);
  box-shadow: 0 8px 24px rgba(81, 97, 94, 0.08);
}

/* Sonar pulse on hover (single ring, ::after) */
.trio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid var(--brand-rose);
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .trio-card:hover::after {
    animation: trioSonarPulse 1200ms ease-out forwards;
  }
}

@keyframes trioSonarPulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

.trio-card.is-selected {
  border-color: var(--brand-rose);
  box-shadow: 0 0 0 1px rgba(183, 110, 121, 0.35),
    0 8px 24px rgba(183, 110, 121, 0.12);
}


/* ════════════════════════════════════════════════════════════════════════════
   4. SUB-TOPIC ACCORDION DRAWER  (.trio-card.has-drawer / .is-expanded)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Sub-topic accordion drawer (Comprehension / Cloze only) ───────── */

.trio-card__chevron {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 280ms cubic-bezier(.2, .7, .2, 1), color 200ms ease;
  pointer-events: none;
}
.trio-card.has-drawer:hover .trio-card__chevron { color: var(--brand-rose); }

/* ── Sub-topic drawer (Comprehension / Cloze) ─────────────────────
   When a card expands, the card spans the full grid row and the
   drawer occupies the right half (or stacks below on mobile). The
   card's original content (glyph, title, subline) sits on the left.
   This is the "folded letter opens" pattern — the layout grows
   horizontally rather than pushing all content downward. */

.trio-card.has-drawer {
  position: relative;
}

/* The card spans the full row when expanded.
   grid-column: 1 / -1 makes it stretch all columns of the parent
   grid regardless of how many columns trio-grid--many uses. */
.trio-card.is-expanded {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--space-5);
  align-items: start;
  text-align: left;
}

/* When expanded, the card's left-side content (glyph, title, subline)
   lives in column 1; tweak alignment so it reads as a definition,
   not as a centered card thumbnail. */
.trio-card.is-expanded .trio-card__glyph,
.trio-card.is-expanded .trio-card__title,
.trio-card.is-expanded .trio-card__sub {
  text-align: left;
}
.trio-card.is-expanded .trio-card__glyph {
  margin-left: 0;
  margin-bottom: var(--space-2);
}
.trio-card.is-expanded .trio-card__check {
  display: none;  /* the chevron is the affordance now */
}


/* ════════════════════════════════════════════════════════════════════════════
   5. SUB-TOPIC POPOVER  (.subtopic-pop, .subtopic-card, scrim, skeleton)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Sub-topic popover ─────────────────────────────────────────────
   Floating, scrim-backed sheet anchored to viewport (centered on
   desktop, bottom-sheet on mobile). Does NOT disrupt the topic grid.
   Cards inside use the same .trio-card design language; differentiated
   only by a dashed border to signal "drilling deeper". */

.subtopic-pop-scrim {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(44, 62, 58, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.subtopic-pop-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.subtopic-pop {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(960px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--surface-container-lowest, #fff);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  box-shadow: 0 32px 64px rgba(44, 62, 58, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 280ms cubic-bezier(.2, .9, .25, 1);
  overflow: hidden;
}
.subtopic-pop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.subtopic-pop__head {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-light);
}
.subtopic-pop__title-block {
  min-width: 0;
}
.subtopic-pop__eyebrow {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-rose);
  margin-bottom: 6px;
}
.subtopic-pop__title {
  font-family: var(--font-display, 'Bebas Neue'), sans-serif;
  font-size: 32px;
  letter-spacing: 0.02em;
  color: var(--text-main);
  line-height: 1.05;
  margin: 0;
}
.subtopic-pop__lede {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}
.subtopic-pop__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, color 180ms ease;
}
.subtopic-pop__close:hover {
  background: rgba(81, 97, 94, 0.08);
  color: var(--brand-rose);
}
.subtopic-pop__close svg { width: 20px; height: 20px; }

.subtopic-pop__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  -webkit-overflow-scrolling: touch;
}

/* Sub-topic cards — same .trio-card design; dashed border + smaller scale */
.subtopic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.subtopic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-container-lowest, rgba(255, 255, 255, 0.7));
  border: 1.5px dashed var(--border-light);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  transition: border-color 200ms ease, background 200ms ease,
              transform 200ms ease, box-shadow 200ms ease;
}
.subtopic-card:hover {
  border-color: var(--brand-rose);
  border-style: dashed;
  background: rgba(183, 110, 121, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(183, 110, 121, 0.10);
}
.subtopic-card.is-selected {
  border-color: var(--brand-rose);
  border-style: solid;     /* solid on commit — confirms the choice */
  background: rgba(183, 110, 121, 0.08);
}
.subtopic-card.is-empty {
  opacity: 0.55;
  cursor: not-allowed;
}
.subtopic-card.is-empty:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-light);
  background: var(--surface-container-lowest, rgba(255, 255, 255, 0.7));
}

.subtopic-card__check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-rose);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 180ms ease, transform 180ms ease;
}
.subtopic-card.is-selected .subtopic-card__check {
  opacity: 1;
  transform: scale(1);
}
.subtopic-card__check svg { width: 12px; height: 12px; }

.subtopic-card__glyph {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(81, 97, 94, 0.06);
  color: var(--text-muted);
  transition: background 200ms ease, color 200ms ease;
}
.subtopic-card:hover .subtopic-card__glyph,
.subtopic-card.is-selected .subtopic-card__glyph {
  background: rgba(183, 110, 121, 0.14);
  color: var(--brand-rose);
}
.subtopic-card__glyph svg { width: 18px; height: 18px; }

.subtopic-card__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-main);
  line-height: 1.3;
}
.subtopic-card__sub {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.subtopic-card.is-selected .subtopic-card__title {
  color: var(--brand-rose);
}

.subtopic-pop__foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-light);
  background: var(--surface, transparent);
}
.subtopic-pop__foot-status {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text-muted);
}
.subtopic-pop__foot-status strong {
  color: var(--brand-rose);
  font-weight: 700;
}

/* Loading skeleton inside body */
.subtopic-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.subtopic-skeleton {
  height: 110px;
  border-radius: 16px;
  background: linear-gradient(90deg,
    rgba(81, 97, 94, 0.04) 25%,
    rgba(81, 97, 94, 0.10) 50%,
    rgba(81, 97, 94, 0.04) 75%);
  background-size: 200% 100%;
  animation: subtopicShimmer 1400ms linear infinite;
}
@keyframes subtopicShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .subtopic-pop, .subtopic-pop-scrim,
  .subtopic-card, .subtopic-card__glyph, .subtopic-card__check {
    transition: none !important;
  }
  .subtopic-card:hover { transform: none; }
  .subtopic-skeleton { animation: none; background: rgba(81, 97, 94, 0.06); }
}

/* Mobile — bottom sheet */
@media (max-width: 640px) {
  .subtopic-pop {
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateY(20px);
    width: 100vw;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
  }
  .subtopic-pop.is-visible {
    transform: translateY(0);
  }
  .subtopic-pop__head { padding: var(--space-4); }
  .subtopic-pop__body { padding: var(--space-3) var(--space-4); }
  .subtopic-pop__foot {
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
  }
  .subtopic-pop__foot .btn { width: 100%; }
  .subtopic-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .subtopic-card { padding: var(--space-3); }
}

.trio-card.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.6);
}

.trio-card.is-locked:hover {
  transform: none;
  border-color: var(--border-light);
  box-shadow: none;
}

.trio-card.is-locked::after {
  display: none;
}

.trio-card__lock {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  opacity: 0.6;
}

.trio-card__check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 22px;
  height: 22px;
  color: var(--brand-rose);
  opacity: 0;
  transition: opacity 200ms ease;
}

.trio-card.is-selected .trio-card__check {
  opacity: 1;
}

/* Title & subtitle */
.trio-card__title {
  font-family: var(--font-display, 'Bebas Neue'), sans-serif;
  font-size: 32px;
  letter-spacing: 0.05em;
  color: var(--text-main);
  text-align: center;
  line-height: 1;
  margin: 0;
}

.trio-card__title--small {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--text-main);
  text-transform: none;
}

.trio-card__sub {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.trio-card__sub--accent {
  color: var(--brand-sage);
}


/* ════════════════════════════════════════════════════════════════════════════
   6. TRIO ORB  (Step 1 — Subject)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── ORB (Step 1, Subject) — glass sphere with micro-world ─────── */
.trio-orb {
  width: 200px;
  height: 200px;
  position: relative;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .trio-orb {
    animation: trioOrbBob 6s ease-in-out infinite;
  }

  .trio-card[data-orb-stagger="1"] .trio-orb {
    animation-delay: -2s;
  }

  .trio-card[data-orb-stagger="2"] .trio-orb {
    animation-delay: -4s;
  }
}

@keyframes trioOrbBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.trio-orb svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Inner micro-world rotation/drift, paused on reduced motion */
@media (prefers-reduced-motion: no-preference) {

  .orb-rot-slow {
    transform-origin: 100px 100px;
    animation: orbRot 16s linear infinite;
  }

  .orb-rot-med {
    transform-origin: 100px 100px;
    animation: orbRot 12s linear infinite;
  }

  .orb-rot-fast {
    transform-origin: 100px 100px;
    animation: orbRot 8s linear infinite reverse;
  }

  .orb-drift {
    animation: orbDrift 7s ease-in-out infinite alternate;
  }

  .orb-drift-2 {
    animation: orbDrift 9s ease-in-out infinite alternate-reverse;
  }

  .orb-drift-3 {
    animation: orbDrift 11s ease-in-out infinite alternate;
  }

  .orb-glyph-fade {
    animation: orbGlyphFade 6s ease-in-out infinite;
  }

  .orb-glyph-fade-2 {
    animation: orbGlyphFade 6s ease-in-out infinite;
    animation-delay: -2s;
  }

  .orb-glyph-fade-3 {
    animation: orbGlyphFade 6s ease-in-out infinite;
    animation-delay: -4s;
  }
}

@keyframes orbRot {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbDrift {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(6px, -4px);
  }
}

@keyframes orbGlyphFade {

  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   7. TOPIC GLYPH  (Step 2 — Topic)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── TOPIC GLYPH (Step 2) — small SVG signature ────────────────── */
.trio-glyph {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  color: var(--brand-sage);
}

.trio-card.is-selected .trio-glyph {
  color: var(--brand-rose);
}

.trio-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ════════════════════════════════════════════════════════════════════════════
   8. TYPE PREVIEW  (Step 3 — Format)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── TYPE PREVIEW (Step 3) — typographic preview ───────────────── */
.trio-preview {
  width: 100%;
  max-width: 200px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2);
  background: var(--surface-container-lowest, #fff);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.trio-preview__line {
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
}

.trio-preview__line--full {
  width: 100%;
}

.trio-preview__line--med {
  width: 70%;
}

.trio-preview__line--short {
  width: 40%;
}

.trio-preview__line--blank {
  width: 30%;
  background: var(--brand-rose);
  opacity: 0.55;
}

.trio-preview__bullet {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trio-preview__radio {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--text-muted);
  border-radius: 50%;
  flex-shrink: 0;
}

.trio-preview__radio.is-on {
  background: var(--brand-rose);
  border-color: var(--brand-rose);
}


/* ════════════════════════════════════════════════════════════════════════════
   9. WIZARD ACTIONS + LOADING + EMPTY STATES
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Action row ────────────────────────────────────────────────── */
.wizard-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  width: 100%;
  max-width: 360px;
}

.wizard-actions .btn {
  width: 100%;
}

/* ── Loading & empty states ────────────────────────────────────── */
.wizard-loading,
.wizard-empty {
  max-width: 480px;
  width: 100%;
  padding: var(--space-6);
  text-align: center;
  background: var(--glass-bg, rgba(255, 255, 255, 0.4));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  border-radius: 24px;
}

.wizard-skeleton {
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.wizard-skeleton__card {
  height: 320px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.4) 25%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0.4) 75%);
  background-size: 200% 100%;
  border: 1px solid var(--border-light);
  border-radius: 24px;
  animation: wizardSkeletonShimmer 1800ms linear infinite;
}

@keyframes wizardSkeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE + BOTTOM-NAV CLEARANCE
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mobile responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .wizard-hero {
    margin-bottom: var(--space-6);
  }

  .trio-grid--three,
  .trio-grid--many {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .wizard-skeleton {
    grid-template-columns: 1fr;
  }

  .trio-orb {
    width: 160px;
    height: 160px;
  }

  @keyframes trioOrbBob {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-3px);
    }
  }
}

/* ── Bottom-nav clearance (consistent with architect-scholar pattern) ── */
body.subjects-page #app {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) and (max-width: 1279px) {
  body.subjects-page #app {
    padding-right: 120px;
  }
}