/* ==========================================================================
   Fekriyeh — design tokens
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

:root {
  /* Raw boutique Pantone palette */
  --charcoal: #1A1A1A;
  --charcoal-dark: #0A0A0F;
  --charcoal-elevated: rgba(255, 255, 255, 0.04);
  --teal: #52212E;
  --teal-dark: #52212E;
  --teal-bright: #94B2C4;
  --olive: #94B2C4;
  --olive-dark: #6E8CA0;
  --olive-bright: #94B2C4;
  --terracotta: #52212E;
  --terracotta-dark: #3A1620;
  --terracotta-bright: #94B2C4;
  --beige: #F0F0F0;
  --on-accent: #F0F0F0;
  --success-light: #4F583D;
  --success-dark: #A1AD92;
  --success: var(--success-dark);
  --success-bg: rgba(161, 173, 146, 0.12);
  --error-bg: rgba(82, 33, 46, 0.22);

  --bg: var(--charcoal-dark);
  --bg-panel: var(--charcoal-elevated);
  --bg-panel-alt: rgba(255, 255, 255, 0.02);
  --border: rgba(255, 255, 255, 0.06);
  --border-bright: rgba(255, 255, 255, 0.12);
  --border-elevated: rgba(255, 255, 255, 0.06);

  /* Text-safe variants of --teal/--terracotta/--olive — brightened in dark
     mode so they read against a dark charcoal background, reused as-is
     (already dark enough) in light mode. Solid fills (--teal, --terracotta,
     --olive, their -dark companions) stay identical across themes; these
     --*-ink tokens are for plain text/border/icon-stroke uses instead. */
  --teal-ink: var(--teal-bright);
  --terracotta-ink: var(--terracotta-bright);
  --olive-ink: var(--olive-bright);

  --text: var(--beige);
  --heading: var(--beige);
  --text-muted: #A0A0A0;
  /* Dimmer than --text-muted while still clearing WCAG AA against
     --bg-panel (Dark Charcoal). */
  --text-dim: #6E6E6E;

  /* Subtle "elevated surface" tint over a panel background — lightens in
     dark mode, darkens in light mode, so the effect reads correctly in both. */
  --surface-tint: rgba(255, 255, 255, 0.04);

  --radius: 16px;
  --radius-sm: 10px;

  --font-display: "El Messiri", "Amiri", "Traditional Arabic", serif;
  --font-body: "Cairo", "Segoe UI", Tahoma, sans-serif;

  /* Spacing scale — consistent rhythm across every panel/section instead of
     ad-hoc rem values. */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* Soft, single-layer elevation shadows tinted toward the navy hue — no
     hard offset "sticker" layer, so panels read as gently lifted rather
     than pinned like a vector sticker. */
  --shadow-color: 220deg 10% 3%;
  --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.35);
  --shadow-md: 0 8px 20px hsl(var(--shadow-color) / 0.35);
  --shadow-lg: 0 16px 36px hsl(var(--shadow-color) / 0.4);
}

/* ==========================================================================
   Light theme
   ========================================================================== */
[data-theme="light"] {
  --bg: #F0EDE5;
  --bg-panel: rgba(255, 255, 255, 0.5);
  --bg-panel-alt: rgba(255, 255, 255, 0.35);
  --border: #E5E5E5;
  --border-bright: #CCCCCC;
  --border-elevated: var(--border);

  --on-accent: #FFFFFF;
  --success: var(--success-light);
  --success-bg: rgba(79, 88, 61, 0.10);
  --error-bg: rgba(82, 33, 46, 0.08);

  --text: var(--charcoal);
  --heading: var(--charcoal);
  --text-muted: #595959;
  --text-dim: #8A8A8A;

  --teal-ink: var(--teal);
  --terracotta-ink: var(--terracotta);
  --olive-ink: var(--olive);

  --surface-tint: rgba(0, 0, 0, 0.03);

  /* Literal neutral shadows for the light theme — no hue tint, per spec. */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.06);

  color-scheme: light;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
@property --mouse-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --mouse-y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

html {
  color-scheme: dark;
  overflow-x: hidden;
  max-width: 100vw;
  transition: --mouse-x 0.6s ease-out, --mouse-y 0.6s ease-out;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
  overflow-wrap: break-word;
  word-wrap: break-word;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(148, 178, 196, 0.07), transparent 45%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 250, 240, 0.5), transparent 45%),
    var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--heading);
  margin: 0;
  line-height: 1.3;
}

h1, h2 {
  text-wrap: balance;
}

p {
  margin: 0;
  line-height: 1.8;
}

li {
  line-height: 1.8;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

/* ==========================================================================
   Top navigation
   ========================================================================== */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel));
  border-block-end: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  background: var(--teal-dark);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  border-radius: 50%;
  border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-sm);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.brand-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
}

.nav-links a {
  position: relative;
  padding-block: 0.3rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.35rem;
  block-size: 2px;
  background: var(--teal-ink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-links a.active {
  color: var(--success);
}

.nav-links a.active::after {
  background: var(--success);
  transform: scaleX(1);
}

.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  margin-inline-start: 0.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--teal-dark);
  transform: translateY(-1px);
}

/* ---- pure-CSS hover dropdowns (Modules / user menu) ---- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.3rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger {
  color: var(--text);
}

.nav-caret {
  font-size: 0.7rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
  transform: rotate(180deg);
}

.nav-avatar {
  display: grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  background: var(--teal-dark);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-sm);
}

.nav-dropdown-menu {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + 0.85rem);
  inline-size: min(220px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-elevated);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 20;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-menu a:hover {
  background: var(--surface-tint);
  color: var(--teal-ink);
}

.nav-dropdown-menu a.active {
  color: var(--success);
  background: var(--success-bg);
  border-inline-start: 3px solid var(--success);
}

/* The admin dashboard's sub-nav reuses .nav-links/.nav-dropdown verbatim
   outside of .topnav's own flex row, so it needs its own breathing room
   from the sections above/below it — no other property is overridden. */
.admin-subnav {
  margin-block-end: 1.5rem;
}

/* ---- click-to-expand accordion (Case Management on the admin hub) ---- */
.case-accordion {
  display: block;
  width: 100%;
}

.case-accordion > summary {
  width: 100%;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}

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

.case-accordion > summary .nav-caret {
  transition: transform 0.2s ease;
}

.case-accordion[open] > summary .nav-caret {
  transform: rotate(180deg);
}

/* Grid-row trick: always laid out (overrides the UA's display:none / recent
   Chromium content-visibility:hidden for closed <details> content) so the
   0fr -> 1fr row transition can actually animate instead of hard-snapping. */
.case-accordion-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.case-accordion[open] .case-accordion-menu {
  grid-template-rows: 1fr;
}

.case-accordion-menu-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  margin-block-start: 0.6rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-elevated);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.case-accordion-menu-inner a {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.case-accordion-menu-inner a:hover {
  background: var(--surface-tint);
  color: var(--teal-ink);
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.app-main {
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 4vw, 3rem) 4rem;
  max-inline-size: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

/* ---- dashboard overview grid ---- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

.dashboard-span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 880px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-span-2 {
    grid-column: auto;
  }
}

/* ==========================================================================
   Rounded panel primitive — shared by hero badge, launch cards, activity list
   ========================================================================== */
.angled {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.card {
  padding: var(--space-4) var(--space-5);
  margin-block-end: var(--space-3);
}

/* Plain .card (used by moot-court / ip-office list pages) gets the same
   rounded treatment without requiring markup changes on those pages. */
.card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-elevated);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card h2 {
  font-size: 1.2rem;
  margin-block-end: 0.5rem;
}

/* ==========================================================================
   Glassmorphism (dark mode) — real frosted-glass panels. --bg-panel/-alt are
   already translucent in dark mode and borders already resolve via
   --border/--border-elevated; backdrop-filter has no variable hook, so every
   consumer of those two background tokens is grouped here. Scoped with
   html:not([data-theme="light"]) rather than [data-theme="dark"] because a
   fresh visit with no saved preference renders dark mode with no
   data-theme attribute at all (see templates/base.html's toggle script).
   ========================================================================== */
html:not([data-theme="light"]) .theme-toggle,
html:not([data-theme="light"]) .nav-dropdown-menu,
html:not([data-theme="light"]) .case-accordion-menu-inner,
html:not([data-theme="light"]) .angled,
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .dilemma-choice-btn,
html:not([data-theme="light"]) .stat-bar,
html:not([data-theme="light"]) .activity-item,
html:not([data-theme="light"]) .flash,
html:not([data-theme="light"]) .auth-error,
html:not([data-theme="light"]) .leaderboard-row,
html:not([data-theme="light"]) .case-manage-row,
html:not([data-theme="light"]) .evidence-item,
html:not([data-theme="light"]) .feedback-item,
html:not([data-theme="light"]) .timeline-content {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (prefers-reduced-transparency: reduce) {
  html:not([data-theme="light"]) .theme-toggle,
  html:not([data-theme="light"]) .nav-dropdown-menu,
  html:not([data-theme="light"]) .case-accordion-menu-inner,
  html:not([data-theme="light"]) .angled,
  html:not([data-theme="light"]) .card,
  html:not([data-theme="light"]) .dilemma-choice-btn,
  html:not([data-theme="light"]) .stat-bar,
  html:not([data-theme="light"]) .activity-item,
  html:not([data-theme="light"]) .flash,
  html:not([data-theme="light"]) .auth-error,
  html:not([data-theme="light"]) .leaderboard-row,
  html:not([data-theme="light"]) .case-manage-row,
  html:not([data-theme="light"]) .evidence-item,
  html:not([data-theme="light"]) .feedback-item,
  html:not([data-theme="light"]) .timeline-content {
    background: #121218;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ==========================================================================
   Glassmorphism (light mode) — mirrors the dark-mode block above using the
   same selector list. --border/--border-elevated stay opaque light-gray for
   every other use (they're shared with non-panel elements, and a translucent
   white border would be invisible against the light page background), so
   the delicate glass edge is applied here as a scoped border-color override
   instead of a token change.
   ========================================================================== */
[data-theme="light"] .theme-toggle,
[data-theme="light"] .nav-dropdown-menu,
[data-theme="light"] .case-accordion-menu-inner,
[data-theme="light"] .angled,
[data-theme="light"] .card,
[data-theme="light"] .dilemma-choice-btn,
[data-theme="light"] .stat-bar,
[data-theme="light"] .activity-item,
[data-theme="light"] .flash,
[data-theme="light"] .auth-error,
[data-theme="light"] .leaderboard-row,
[data-theme="light"] .case-manage-row,
[data-theme="light"] .evidence-item,
[data-theme="light"] .feedback-item,
[data-theme="light"] .timeline-content {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-transparency: reduce) {
  [data-theme="light"] .theme-toggle,
  [data-theme="light"] .nav-dropdown-menu,
  [data-theme="light"] .case-accordion-menu-inner,
  [data-theme="light"] .angled,
  [data-theme="light"] .card,
  [data-theme="light"] .dilemma-choice-btn,
  [data-theme="light"] .stat-bar,
  [data-theme="light"] .activity-item,
  [data-theme="light"] .flash,
  [data-theme="light"] .auth-error,
  [data-theme="light"] .leaderboard-row,
  [data-theme="light"] .case-manage-row,
  [data-theme="light"] .evidence-item,
  [data-theme="light"] .feedback-item,
  [data-theme="light"] .timeline-content {
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--border-elevated);
  }
}

.card p {
  color: var(--text-muted);
}

/* ==========================================================================
   Hero header
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.5rem;
  justify-content: space-between;
}

.hero-text {
  position: relative;
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: center;
}

.hero-doodle {
  position: absolute;
  inset-block-start: -1.5rem;
  inset-inline-end: -1.5rem;
  inline-size: 7rem;
  block-size: 7rem;
  color: var(--border-bright);
  opacity: 0.5;
  pointer-events: none;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--teal-ink);
  text-transform: uppercase;
}

.hero-text h1 {
  font-size: clamp(1.85rem, 4vw, 3rem);
}

.hero-sub {
  color: var(--text-muted);
  max-inline-size: 46ch;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ---- student status badge ---- */
.status-badge {
  flex: 0 1 300px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(160deg, var(--bg-panel-alt), var(--bg-panel));
  border-color: var(--border-bright);
}

.rank-badge {
  position: relative;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  inline-size: 6.5rem;
  block-size: 6.5rem;
  padding: 0.5rem;
  text-align: center;
  background: var(--teal-dark);
  color: var(--on-accent);
  border-radius: 50%;
  border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-sm);
  margin-inline: auto;
}

.rank-badge-label {
  font-size: 0.65rem;
  font-weight: 700;
  opacity: 0.75;
}

.rank-badge-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.15;
}

.status-stats {
  display: flex;
  gap: 1rem;
}

.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding-block: 0.6rem;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.stat-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}

.stat-value--success {
  color: var(--success);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.status-name {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-muted);
}

/* ==========================================================================
   Daily dilemma
   ========================================================================== */
.dilemma-panel {
  padding: 1.75rem;
}

.dilemma-question {
  font-size: 1.05rem;
  margin-block-end: 1.25rem;
  user-select: none;
  -webkit-user-select: none;
}

.dilemma-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
}

.dilemma-choice-btn {
  inline-size: 100%;
  margin-block-start: 0;
  padding: 1rem 1.25rem;
  background: var(--bg-panel-alt);
  border: 2px solid var(--olive-dark);
  color: var(--text);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dilemma-choice-btn:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.decision-btn {
  inline-size: 100%;
  margin-block-start: 0;
  padding: 1rem 1.25rem;
  color: var(--text);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.decision-btn--approve {
  background: rgba(82, 33, 46, 0.10);
  border: 2px solid var(--teal-dark);
}

.decision-btn--approve:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.decision-btn--reject {
  background: rgba(82, 33, 46, 0.10);
  border: 2px solid var(--terracotta);
}

.decision-btn--reject:hover {
  border-color: var(--terracotta-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.dilemma-result-badge {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  margin-block-end: 0.85rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  background: rgba(82, 33, 46, 0.12);
  color: var(--teal-ink);
  border: 1px solid var(--teal-dark);
  border-radius: 999px;
}

.dilemma-answer {
  margin-block-end: 0.6rem;
}

.dilemma-explanation {
  color: var(--text-muted);
  margin-block-end: 0.6rem;
}

.dilemma-citation {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-block-end: 1.1rem;
}

.dilemma-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-bar {
  block-size: 0.6rem;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.stat-bar-fill {
  block-size: 100%;
  background: linear-gradient(90deg, var(--teal-dark), var(--teal));
}

.dilemma-stats-label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ==========================================================================
   Launch cards
   ========================================================================== */
.launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

.launch-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  --accent: var(--teal-ink);
}

.launch-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.launch-card--moot {
  --accent: var(--olive-ink);
  border-color: var(--olive-dark);
}

.launch-card--office {
  --accent: var(--teal-ink);
  border-color: var(--teal-dark);
}

.launch-icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  color: var(--accent);
  background: var(--surface-tint);
  border: 1px solid var(--border-bright);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.launch-icon svg {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.launch-kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-block-end: 0.35rem;
}

.launch-card h2 {
  font-size: 1.4rem;
  margin-block-end: 0.5rem;
}

.launch-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.launch-cta {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--accent);
}

.launch-cta .arrow {
  transition: transform 0.18s ease;
}

.launch-card:hover .launch-cta .arrow {
  transform: translateX(-4px);
}

/* ==========================================================================
   Activity panel
   ========================================================================== */
.panel-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1.25rem;
}

.panel-heading h2 {
  font-size: 1.3rem;
  white-space: nowrap;
}

.panel-heading-line {
  flex: 1;
  block-size: 2px;
  background: linear-gradient(to left, var(--border), transparent);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
}

.activity-icon {
  flex: none;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  background: var(--text-dim);
  border-radius: 50%;
}

.activity-item--dilemma_vote { border-inline-start-color: var(--terracotta-bright); }
.activity-item--dilemma_vote .activity-icon { background: var(--terracotta-bright); }

.activity-item--consultation { border-inline-start-color: var(--teal-bright); }
.activity-item--consultation .activity-icon { background: var(--teal-bright); }

.activity-item--moot_submission { border-inline-start-color: var(--terracotta); }
.activity-item--moot_submission .activity-icon { background: var(--terracotta); }

.activity-item--ip_decision { border-inline-start-color: var(--olive-bright); }
.activity-item--ip_decision .activity-icon { background: var(--olive-bright); }

.activity-info {
  flex: 1;
  min-inline-size: 0;
}

.activity-label {
  font-weight: 600;
}

.activity-time {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.activity-reward {
  flex: none;
  display: flex;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--teal-ink);
}

.activity-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.empty-doodle {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--border-bright);
}

/* ==========================================================================
   Flash messages
   ========================================================================== */
.flash-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-end: 0.5rem;
}

.flash {
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--text-dim);
  background: var(--bg-panel);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.flash--success {
  border-inline-start-color: var(--success);
  color: var(--text);
}

.flash--error {
  border-inline-start-color: var(--terracotta);
  color: var(--text);
}

/* ==========================================================================
   Form controls & buttons
   ========================================================================== */
label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-block-end: 0.35rem;
  margin-block-start: 1rem;
}

label:first-of-type {
  margin-block-start: 0;
}

input,
textarea,
select {
  inline-size: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
}

textarea {
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(82, 33, 46, 0.2);
}

select {
  cursor: pointer;
}

/* Tactile press feedback — a real physical "push" on click, shared across
   every hover-lift interactive element (buttons, choice cards, clickable
   cards) rather than only ever animating on hover. */
.btn:active,
.btn-delete:active,
.btn-edit:active,
.btn-secondary:active,
.dilemma-choice-btn:active,
.decision-btn:active,
.theme-toggle:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-sm);
}

/* Removes the mobile double-tap-zoom delay and the native tap-highlight
   flash on every tappable control — safe to fully suppress the highlight
   since each of these already has a real :active press effect above. */
.btn,
.btn-delete,
.btn-edit,
.btn-secondary,
.dilemma-choice-btn,
.decision-btn,
.theme-toggle,
.nav-links a,
.nav-dropdown-trigger {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  margin-block-start: 1.5rem;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--teal-dark);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--terracotta);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  background: transparent;
  color: var(--terracotta-ink);
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-delete:hover {
  background: rgba(82, 33, 46, 0.1);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--teal);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  background: transparent;
  color: var(--teal-ink);
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-edit:hover {
  background: rgba(82, 33, 46, 0.12);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.table-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-visibility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1.5px solid var(--border-bright);
  cursor: pointer;
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-visibility svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.btn-visibility:hover,
.btn-visibility:focus-visible {
  color: var(--teal);
  background: rgba(82, 33, 46, 0.1);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--olive);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-secondary:hover {
  background: var(--surface-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:disabled,
.btn-primary:disabled,
.decision-btn:disabled,
.btn-visibility:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  pointer-events: none;
}

#reset-request-submit:disabled::after {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-block-start-color: var(--on-accent);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #reset-request-submit:disabled::after {
    animation: none;
  }
}

.ai-generate-status {
  font-size: 0.85rem;
  min-block-size: 1.2em;
}

.ai-generate-status--success {
  color: var(--teal-ink);
}

.ai-generate-status--error {
  color: var(--terracotta-ink);
}

/* ==========================================================================
   Auth (login) shell
   ========================================================================== */
.auth-shell {
  display: flex;
  justify-content: center;
  padding-block: 2rem;
}

.auth-card {
  inline-size: min(100%, 420px);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-card h1 {
  font-size: 1.6rem;
  margin-block: 0.35rem 0.5rem;
}

.auth-card--recovery {
  border-color: var(--teal-dark);
}

.auth-card--recovery .eyebrow {
  color: var(--teal-ink);
}

.auth-shell--recovery {
  gap: 2rem;
  align-items: stretch;
}

.auth-shell--recovery .auth-card--recovery {
  inline-size: min(100%, 420px);
}

.auth-story {
  inline-size: min(100%, 320px);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(82, 33, 46, 0.28), transparent 65%),
    var(--bg-panel);
}

.auth-story-icon {
  color: var(--olive-ink);
  flex-shrink: 0;
}

.auth-story-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--heading);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 880px) {
  .auth-shell--recovery {
    flex-direction: column;
    align-items: center;
  }

  .auth-story {
    order: -1;
    padding: 1.5rem;
  }

  .auth-story-icon {
    width: 72px;
    height: 72px;
  }
}

.auth-error {
  padding: 0.85rem 1.1rem;
  margin-block-end: 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--terracotta);
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}

.auth-form {
  margin-block-start: 1rem;
}

.auth-form .btn {
  inline-size: 100%;
}

.auth-switch {
  margin-block-start: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.auth-switch a {
  color: var(--teal-ink);
  font-weight: 700;
}

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-section {
  padding: 1.75rem;
}

.admin-form {
  max-inline-size: 640px;
}

.table-scroll {
  overflow-x: auto;
}

.admin-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.admin-table th,
.admin-table td {
  padding: 0.75rem 1rem;
  text-align: start;
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}

.admin-table th {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--teal-ink);
  background: var(--surface-tint);
}

.admin-table tr:hover td {
  background: var(--surface-tint);
}

.admin-table tr.is-hidden td {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   Leaderboard
   ========================================================================== */
.leaderboard-panel {
  padding: 1.75rem;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
}

.leaderboard-row--self {
  border-color: var(--text-muted);
  box-shadow: 0 0 0 1px var(--text-muted);
}

.leaderboard-rank {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.leaderboard-row--1 { background: linear-gradient(90deg, rgba(82, 33, 46, 0.08), var(--bg-panel) 60%); }

.leaderboard-row--1 .leaderboard-rank,
.leaderboard-row--2 .leaderboard-rank,
.leaderboard-row--3 .leaderboard-rank {
  inline-size: 2.6rem;
  block-size: 2.6rem;
  color: var(--beige);
  border: none;
}

.leaderboard-row--1 .leaderboard-rank {
  background: var(--teal-dark);
  color: var(--on-accent);
}

.leaderboard-row--2 .leaderboard-rank {
  background: var(--olive);
  color: var(--on-accent);
}

.leaderboard-row--3 .leaderboard-rank {
  background: var(--terracotta);
}

.leaderboard-info {
  flex: 1;
  min-inline-size: 0;
}

.leaderboard-name {
  font-family: var(--font-body);
  font-weight: 700;
}

.leaderboard-title {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.leaderboard-xp {
  flex: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}

.leaderboard-xp small {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.8;
}

/* ---- admin: manage moot court cases ---- */
.case-manage-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.case-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
}

.case-manage-info {
  flex: 1;
  min-inline-size: 0;
}

.case-manage-title {
  font-family: var(--font-body);
  font-weight: 700;
  margin-block-end: 0.4rem;
}

/* ---- admin: submission review grid ---- */
.submission-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.5rem;
}

.submission-review-card {
  padding: 1.5rem;
}

.submission-review-card form {
  margin-block-start: 1.25rem;
}

/* ==========================================================================
   Tag / chip primitive
   ========================================================================== */
.tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--text-muted);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ==========================================================================
   Moot Court — case detail (dual panel)
   ========================================================================== */
.dual-panel-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.case-file-panel,
.submission-panel {
  padding: 1.75rem;
}

.case-title {
  font-size: 1.5rem;
  margin-block-end: 0.75rem;
}

/* ---- point-decay attempts-remaining badge ----
   Hangs above the panel's top border rather than sitting inside its padded
   content area, so it never overlaps the panel-heading text/line below it
   regardless of heading length — a corner-tag placement, not an inline one. */
.attempts-badge {
  position: absolute;
  inset-block-start: -0.85rem;
  inset-inline-start: 1.5rem;
  padding: 0.4rem 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--beige);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.attempts-badge--ok {
  background: var(--teal);
}

.attempts-badge--warn {
  background: var(--olive);
  color: var(--on-accent);
}

.attempts-badge--danger {
  background: var(--terracotta);
}

.attempts-badge--closed {
  background: var(--charcoal-dark);
}

.locked-banner {
  padding: 1.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--terracotta-ink);
  background: rgba(82, 33, 46, 0.08);
  border: 1px solid var(--terracotta-dark);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* ---- educational reveal: "declassified document" card, shown only once a
   case is permanently closed — deliberately theme-invariant (always the same
   beige/terracotta look in both light and dark mode), unlike every other
   card in this file. ---- */
.model-answer-card {
  padding: 1.5rem;
  margin-block-start: 1.25rem;
  background: var(--beige);
  border-block-start: 4px solid var(--terracotta);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--charcoal);
}

.model-answer-card h3 {
  color: var(--charcoal);
  margin-block-end: 0.75rem;
}

.model-answer-decision {
  font-weight: 700;
  margin-block-end: 0.5rem;
}

.model-answer-text {
  white-space: pre-wrap;
}

.case-tags {
  display: flex;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.case-parties {
  font-family: var(--font-body);
  font-weight: 700;
  margin-block-end: 1rem;
  user-select: none;
  -webkit-user-select: none;
}

.case-summary {
  color: var(--text-muted);
  margin-block-end: 1.25rem;
  user-select: none;
  -webkit-user-select: none;
}

.legal-issue-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--teal-ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-block-end: 0.6rem;
}

.legal-issue-box {
  padding: 1rem 1.25rem;
  margin-block-end: 1rem;
  background: rgba(82, 33, 46, 0.06);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--teal);
  border-radius: var(--radius-sm);
  user-select: none;
  -webkit-user-select: none;
}

.case-citation {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-block-end: 1.5rem;
  user-select: none;
  -webkit-user-select: none;
}

.evidence-section {
  margin-block-start: 1.5rem;
}

.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.evidence-item {
  padding: 0.85rem 1rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--teal-dark);
  border-radius: var(--radius-sm);
}

.evidence-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 0.4rem;
}

.evidence-title {
  font-weight: 700;
}

.evidence-content {
  color: var(--text-muted);
  font-size: 0.9rem;
  user-select: none;
  -webkit-user-select: none;
}

.submission-form textarea {
  min-block-size: 16rem;
}

.decision-form textarea {
  min-block-size: 9rem;
  margin-block-end: 1.25rem;
}

.submission-display .dilemma-result-badge {
  margin-block-end: 0.75rem;
}

.submission-score {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--teal-ink);
  margin-block-end: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.submission-score small {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dim);
}

.submission-text {
  color: var(--text-muted);
  white-space: pre-wrap;
  margin-block-end: 1.25rem;
}

.submission-awaiting {
  color: var(--text-dim);
  margin-block-end: 1.25rem;
}

/* ---- AI judge verdict ("court ruling") ---- */
.court-ruling {
  padding: 1.5rem;
  margin-block-end: 1.25rem;
}

.court-ruling-badge--passed {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success);
}

.court-ruling-badge--failed {
  background: rgba(82, 33, 46, 0.10);
  color: var(--terracotta-ink);
  border-color: var(--terracotta);
}

.ruling-feedback {
  padding: 1rem 1.25rem;
  background: rgba(82, 33, 46, 0.06);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--teal-dark);
  border-radius: var(--radius-sm);
}

.ruling-feedback p {
  color: var(--text-muted);
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feedback-item {
  padding: 0.75rem 1rem;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.feedback-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 700;
}

.feedback-score {
  color: var(--teal-ink);
}

.feedback-comment {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-block-start: 0.35rem;
}

/* ==========================================================================
   Client Consultations (visual novel dialogue)
   ========================================================================== */
.consultation-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.consultation-header-info {
  flex: 1;
  min-inline-size: 0;
}

.consultation-header-info h1 {
  font-size: 1.5rem;
  margin-block-end: 0.5rem;
}

.consultation-trust {
  flex: 0 0 auto;
  min-inline-size: 8rem;
}

.dialogue-bubble {
  padding: 2rem;
  font-size: 1.15rem;
  line-height: 1.8;
  border-color: var(--border-bright);
  user-select: none;
  -webkit-user-select: none;
}

.consultation-choices {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.consultation-choices .dilemma-choice-btn {
  text-align: start;
}

/* ==========================================================================
   Profile page
   ========================================================================== */
.profile-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
}

.rank-badge--large {
  flex: none;
  inline-size: 9rem;
  block-size: 9rem;
  margin-inline: 0;
}

.rank-badge--large .rank-badge-name {
  font-size: 1rem;
}

.profile-hero-info {
  flex: 1;
  min-inline-size: 260px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-hero-info h1 {
  font-size: 1.6rem;
}

.xp-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-bar--large {
  block-size: 1rem;
}

.xp-progress-label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ---- vertical activity timeline ---- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-inline-start: 1.5rem;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.3rem;
  inset-block: 0.3rem;
  inline-size: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 1rem;
}

.timeline-dot {
  position: absolute;
  inset-inline-start: -1.5rem;
  inset-block-start: 0.3rem;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  background: var(--text-dim);
  border: 2px solid var(--bg);
  border-radius: 50%;
}

.timeline-item--dilemma_vote .timeline-dot { background: var(--terracotta-bright); }
.timeline-item--consultation .timeline-dot { background: var(--teal-bright); }
.timeline-item--moot_submission .timeline-dot { background: var(--terracotta); }
.timeline-item--ip_decision .timeline-dot { background: var(--olive-bright); }

.timeline-content {
  flex: 1;
  padding: 0.85rem 1.1rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.timeline-content .activity-reward {
  margin-block-start: 0.4rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 880px) {
  .dual-panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --radius: 12px;
  }

  .topnav {
    flex-wrap: wrap;
  }

  .nav-links {
    gap: 1rem;
    font-size: 0.85rem;
  }

  .status-badge {
    flex: 1 1 100%;
  }

  .hero-doodle {
    display: none;
  }
}

/* ==========================================================================
   Subtle hover cue — a quiet brightness shift only. No transform, no shadow
   change, so the element never moves. Gated behind (hover: hover) so touch
   devices never get a stuck :hover state.
   ========================================================================== */
@media (hover: hover) {
  .btn-primary,
  a.card,
  .angled {
    transition: filter 0.2s ease;
  }

  .btn-primary:hover,
  a.card:hover,
  .angled:hover {
    filter: brightness(1.08);
  }
}

/* ==========================================================================
   Academic integrity toast — shown when a student attempts to paste into a
   [data-no-paste] field (see static/no-paste.js).
   ========================================================================== */
.integrity-toast {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 2rem;
  margin-inline: auto;
  width: fit-content;
  max-width: min(90vw, 420px);
  padding: 0.85rem 1.5rem;
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-elevated);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  z-index: 10000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.integrity-toast--visible {
  opacity: 1;
  transform: translateY(0);
}