:root {
  /* Revolut Semantic Status Scale (WCAG AAA compliant) */
  --spraga: #ff3b30;
  --spraga-surface: rgba(255, 59, 48, 0.1);
  --spraga-border: rgba(255, 59, 48, 0.3);
  --spraga-text: #e0241b;

  --pradzia: #ff9500;
  --pradzia-surface: rgba(255, 149, 0, 0.1);
  --pradzia-border: rgba(255, 149, 0, 0.3);
  --pradzia-text: #d97706;

  --gerai: #f59e0b;
  --gerai-surface: rgba(245, 158, 11, 0.12);
  --gerai-border: rgba(245, 158, 11, 0.35);
  --gerai-text: #b45309;

  --ivaldyta: #58cc02;
  --ivaldyta-surface: rgba(88, 204, 2, 0.12);
  --ivaldyta-border: rgba(88, 204, 2, 0.6);
  --ivaldyta-text: #059669;

  --nezinoma: #94a3b8;
  --nezinoma-surface: rgba(148, 163, 184, 0.12);
  --nezinoma-border: rgba(148, 163, 184, 0.3);

  /* Revolut Nordic Slate Light Ground */
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-secondary: #eef2f6;
  --surface-tertiary: #e3e8ee;
  --border: #e2e8f0;
  --border-subtle: rgba(15, 23, 42, 0.06);
  --text: #0b0f19;
  --text-mute: #334155;

  /* Duolingo Feather Green primary. Too light for white text (2.1:1), so labels on it use --accent-ink */
  --accent: #58cc02;
  --accent-ink: #0b2a00;
  --accent-hover: #66da27;
  --accent-active: #46a504;
  --accent-surface: #e9ffe1;
  --accent-border: rgba(88, 204, 2, 0.25);
  --accent-text: #296900;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;

  /* Revolut Radii & Squircles */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Revolut Spring Curves & Micro-Elevations */
  --spring: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --spring-snappy: all 0.12s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  --shadow-sm: 0 1px 3px rgba(11, 15, 25, 0.04), 0 1px 2px rgba(11, 15, 25, 0.02);
  --shadow-card: 0 4px 18px -2px rgba(11, 15, 25, 0.05), 0 1px 3px rgba(11, 15, 25, 0.02);
  --shadow-card-hover: 0 10px 30px -4px rgba(11, 15, 25, 0.08), 0 2px 6px rgba(11, 15, 25, 0.03);
  --inner-specular: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Tactile Button Shadows */
  --btn-3d-shadow: 0 4px 0 var(--accent-active);
  --btn-3d-shadow-hover: 0 5px 0 var(--accent-active);
  --btn-3d-shadow-active: 0 1px 0 var(--accent-active);
  --btn-secondary-shadow: 0 3px 0 var(--border);
  --btn-secondary-hover: 0 4px 0 var(--border);
  --btn-secondary-active: 0 1px 0 var(--border);

  /* Modern Optical Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-math: "Latin Modern Math", Cambria, serif;

  /* Upgrade prompts (views/upsell.js). Own tokens, not the mastery bands: an advert must
     never read as a mastery signal, even though both are warm colours. */
  --upsell: #facc15;
  --upsell-surface: #fef9c3;
  --upsell-border: #eab308;
  --upsell-text: #422006;
  --upsell-hot: #f97316;
  --upsell-hot-surface: #ffedd5;
  --upsell-hot-border: #fb923c;
  --upsell-hot-text: #431407;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--space-4);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Card shell with Apple-like squircle smoothing and subtle specular highlight */
.card {
  max-width: 580px;
  margin: 0 auto;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  transition: var(--spring);
}

/* --- Topbar & Navigation (Apple glass / pill style) --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-mute);
  font-size: 14px;
}

.topbar > span:last-child {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.topic {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Difficulty Pips: Duolingo / Apple micro-gems */
.difficulty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-secondary);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-subtle);
}

.diff-pips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.diff-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nezinoma) 35%, transparent);
  transition: var(--spring-snappy);
}

.diff-pip.filled {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(88, 204, 2, 0.4);
}

/* --- Practice Formula Stage (Apple Studio Canvas) --- */
.prompt-text {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.formula {
  position: relative;
  overflow-x: auto;
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-5) var(--space-4);
  font-size: 26px;
  text-align: center;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  /* Smooth fading gradient mask on horizontal overflow */
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

.formula:empty {
  display: none;
}

/* --- Interactive Form Controls --- */
form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

input {
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 550;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: var(--spring);
}

input:hover:not(:focus) {
  border-color: var(--text-mute);
}

input:focus,
input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(88, 204, 2, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Duolingo 3D Tactile Buttons --- */
.primary {
  position: relative;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--btn-3d-shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
}

.primary:hover:not([disabled]) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--btn-3d-shadow-hover);
}

.primary:active:not([disabled]) {
  transform: translateY(3px);
  box-shadow: var(--btn-3d-shadow-active);
}

.primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.secondary {
  position: relative;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--btn-secondary-shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s ease, background-color 0.15s ease;
  user-select: none;
  text-decoration: none;
}

.secondary:hover:not([disabled]) {
  border-color: var(--text-mute);
  transform: translateY(-1px);
  box-shadow: var(--btn-secondary-hover);
}

.secondary:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: var(--btn-secondary-active);
}

.text-button {
  min-height: 44px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: var(--spring-snappy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.text-button:hover {
  background: var(--surface-secondary);
}

.text-button:active {
  transform: scale(0.97);
}

#next {
  width: 100%;
  margin-top: var(--space-4);
}

/* --- Feedback State (Duolingo Encouragement + Clear Teaching) --- */
.feedback {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--surface-secondary);
  border: 1.5px solid var(--border);
  border-inline-start: 5px solid var(--pradzia);
  box-shadow: var(--shadow-sm);
  animation: feedbackIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes feedbackIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedback h2 {
  margin: 0 0 var(--space-2);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.feedback p {
  margin: 0 0 var(--space-2);
  line-height: 1.45;
}

.feedback p:last-child {
  margin-bottom: 0;
}

.feedback.correct {
  background: var(--ivaldyta-surface);
  border-color: var(--ivaldyta-border);
  border-inline-start-color: var(--ivaldyta);
}

.feedback.correct h2 {
  color: var(--ivaldyta-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.feedback.correct h2::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ivaldyta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.mistake-name {
  color: var(--text-mute);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.map-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Revolut Fintech Topic Architecture --- */
.topic-map {
  display: grid;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

/* A divided list, not boxed cards: boxes inside a panel were a card in a card. The whole row
   opens the topic, but through the name button stretched over it, so keyboard and screen
   readers still meet one control named after the topic. */
.topic-row {
  position: relative;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name  value"
    "bar   bar"
    "lock  lock";
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.topic-row:last-child {
  border-bottom: 0;
}

.topic-open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.topic-name {
  grid-area: name;
  font-weight: 650;
  font-size: 15px;
  color: var(--text);
}

.topic-value {
  grid-area: value;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
}

.topic-gain {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  white-space: nowrap;
}

.topic-gain small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
}

/* Accent is kept for "+N t." — points still to win. A partial score is a reading, not a gain. */
.topic-row.partial .topic-gain {
  color: var(--text);
}

.topic-gain.muted {
  color: var(--text-mute);
  font-weight: 600;
}

.topic-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 650;
  margin-top: 3px;
  background: var(--surface-secondary);
  color: var(--text-mute);
  letter-spacing: -0.01em;
}

.topic-row.spraga .topic-meta { background: var(--spraga-surface); color: var(--spraga-text); }
.topic-row.pradžia .topic-meta { background: var(--pradzia-surface); color: var(--pradzia-text); }
.topic-row.gerai .topic-meta { background: var(--gerai-surface); color: var(--gerai-text); }
/* Mastered shares the brand green's hue; the ring keeps it a tinted chip, never a solid button. */
.topic-row.įvaldyta .topic-meta { background: var(--ivaldyta-surface); color: var(--ivaldyta-text); box-shadow: inset 0 0 0 1.5px var(--ivaldyta-border); }
/* A coverage pill, not a mastery verdict: neutral whatever band the tested part scored. */
.topic-row.partial .topic-meta { background: var(--surface-secondary); color: var(--text-mute); }

.topic-lock {
  grid-area: lock;
  color: var(--text-mute);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--border-subtle);
}

.topic-lock::before {
  content: "";
  display: inline-block;
  margin-right: 6px;
  vertical-align: -1px;
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bar {
  grid-area: bar;
  width: 100%;
}

.bar-track {
  min-width: 10px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--nezinoma);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hatching for unmeasured topics — honest precision */
.bar-track.unknown {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    color-mix(in srgb, var(--nezinoma) 30%, transparent) 6px 12px
  );
}

.topic-row.spraga .bar-fill { background: var(--spraga); }
.topic-row.pradžia .bar-fill { background: var(--pradzia); }
.topic-row.gerai .bar-fill { background: var(--gerai); }
.topic-row.įvaldyta .bar-fill { background: var(--ivaldyta); }

@media (min-width: 700px) {
  .topic-row {
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) minmax(9rem, auto);
    column-gap: var(--space-5);
    grid-template-areas:
      "name bar value"
      "lock lock lock";
  }
}

/* --- Revolut & Apple Net-Worth Progress (Bullet Chart) --- */
.bullet {
  position: relative;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}

.bullet-track {
  position: relative;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.bullet-track.unknown {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    color-mix(in srgb, var(--nezinoma) 30%, transparent) 6px 12px
  );
}

.bullet-fill {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The likely-result range: wider than the fill and paler, so the point estimate stays the
   main mark and the band reads as "somewhere in here". */
.bullet-range {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.bullet-note {
  margin-top: var(--space-3);
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.5;
}

.bullet-target {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 3px;
  margin-inline-start: -1.5px;
  border-radius: 2px;
  background: var(--text);
  box-shadow: 0 0 0 2px var(--surface);
}

/* Centred on the marker, clamped so a goal near either end never spills out of the panel. */
.bullet-flag {
  position: absolute;
  top: 0;
  left: clamp(3rem, var(--at), calc(100% - 3rem));
  transform: translateX(-50%);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bullet-scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  color: var(--text-mute);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Band Distribution Strip --- */
.mix-strip {
  display: flex;
  gap: 3px;
  height: 12px;
  margin: var(--space-2) 0 var(--space-4);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-secondary);
}

.mix-segment {
  min-width: 6px;
  background: var(--nezinoma);
  transition: flex-basis 0.3s ease;
}

/* Unmeasured points get the same hatching as unmeasured topic bars. */
.mix-segment.nezinoma {
  background: repeating-linear-gradient(
    135deg,
    var(--nezinoma-surface) 0 6px,
    color-mix(in srgb, var(--nezinoma) 45%, transparent) 6px 12px
  );
}

.mix-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--nezinoma);
  flex-shrink: 0;
}

.mix-segment.spraga, .mix-legend-item.spraga .mix-dot { background: var(--spraga); }
.mix-segment.pradžia, .mix-legend-item.pradžia .mix-dot { background: var(--pradzia); }
.mix-segment.gerai, .mix-legend-item.gerai .mix-dot { background: var(--gerai); }
.mix-segment.įvaldyta, .mix-legend-item.įvaldyta .mix-dot { background: var(--ivaldyta); }

.mix-legend {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mix-legend-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  font-size: 14px;
  font-weight: 550;
}

.mix-points {
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.meter-track {
  height: 12px;
  margin: var(--space-3) 0 var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.meter-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Dashboard Shell (Revolut Grid Style) --- */
.dash {
  max-width: 1240px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.dash-grid {
  display: grid;
  gap: var(--space-4);
}

.panel {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card), var(--inner-specular);
  position: relative;
}

.panel-title {
  margin: 0 0 var(--space-2);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-note {
  margin: 0 0 var(--space-4);
  color: var(--text-mute);
  font-size: 13.5px;
  line-height: 1.45;
}

.dash-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* `.card .primary` adds a top margin for stacked forms; in this row it made the primary
   button sit lower than its neighbours and stretched them taller. */
.dash .dash-actions .primary {
  margin-top: 0;
}

/* --- Practice Studio Screen --- */
#practice-view {
  max-width: 740px;
  margin: 0 auto;
}

#practice-view .formula {
  font-size: 26px;
  padding: var(--space-5) var(--space-4);
}

/* ==========================================================================
   MOBILE LAYOUT (<768px): Revolut iOS / Android Native App Experience
   ========================================================================== */
@media (max-width: 767px) {
  body {
    padding: 0;
    background: var(--bg);
  }

  .card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .dash {
    padding: var(--space-4) var(--space-4) calc(var(--space-7) + 60px);
  }

  .dash-head {
    margin-bottom: var(--space-3);
    padding: var(--space-1) 0;
  }

  .dash-head .headline {
    font-size: 26px;
  }

  .panel {
    padding: var(--space-4);
    border-radius: var(--radius);
  }

  /* Net-worth style hero points card */
  .panel-goal {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  .score-block.hero .score-value {
    font-size: 42px;
  }

  #home-view .primary,
  #result-view .primary {
    width: 100%;
  }

  .topic-name {
    font-size: 15px;
  }


}

/* ==========================================================================
   DESKTOP LAYOUT (≥768px): Revolut Web Command Center Dashboard
   ========================================================================== */
@media (min-width: 768px) {
  body {
    padding: var(--space-5) var(--space-6);
  }

  .dash {
    max-width: 1240px;
    margin: 0 auto;
  }

  .dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-5);
  }

  .dash-head .headline {
    font-size: 32px;
  }

  /* Dual-column command center: Left (Topics + Hero), Right (Stats & Distribution) */
  .dash-grid {
    grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1.15fr);
    grid-template-rows: auto auto 1fr;
    gap: var(--space-5);
  }

  .panel-goal {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .panel-topics {
    grid-column: 1 / 2;
    grid-row: 2 / span 2;
  }

  .panel-side {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .panel-mix {
    grid-column: 2 / 3;
    grid-row: 3;
    align-self: start;
  }

  .dash-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--space-5);
  }

  .dash-actions .primary {
    min-width: 260px;
  }

  /* The result screen has no "today" column: the band mix sits beside the goal and the topic
     list takes the full width, instead of a tall column next to a short one. */
  #result-view .dash-grid {
    grid-template-rows: auto auto;
  }

  #result-view .panel-side {
    grid-row: 1;
    align-self: stretch;
  }

  #result-view .panel-topics {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #practice-view {
    max-width: 760px;
    margin: var(--space-6) auto;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
  }

  #practice-view .formula {
    font-size: 32px;
    padding: var(--space-6) var(--space-5);
  }

  #practice-view .prompt-text {
    font-size: 21px;
  }
}

/* --- Onboarding, placement, result and home (Slice 4) ------------------------------- */

.headline {
  margin: 0;
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.subhead {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 13px;
  font-weight: 750;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lede {
  margin: var(--space-4) 0 var(--space-5);
  color: var(--text-mute);
  font-size: 17px;
  line-height: 1.5;
}

.note {
  margin: var(--space-3) 0 0;
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.45;
}

.error {
  margin: var(--space-3) 0 0;
  color: var(--spraga-text);
  font-size: 14px;
  font-weight: 600;
}

#onboarding-view .primary {
  width: 100%;
  margin-top: var(--space-5);
}

/* --- Duolingo Choice Cards --- */
.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--btn-secondary-shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s ease, background-color 0.15s ease;
  user-select: none;
}

.choice:hover:not([disabled]) {
  transform: translateY(-1px);
  border-color: var(--text-mute);
  box-shadow: var(--btn-secondary-hover);
}

.choice:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: var(--btn-secondary-active);
}

.choice.chosen {
  border-color: var(--accent);
  background: var(--accent-surface);
  color: var(--accent-text);
  box-shadow: 0 3px 0 var(--accent);
}

.choice[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.choice-note {
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 500;
}

/* Symbol bar under the answer field. Wraps rather than scrolls, so no symbol hides off-screen. */
.symbol-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.symbol {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--btn-secondary-shadow);
}

.symbol:hover {
  border-color: var(--text-mute);
}

.symbol:active {
  transform: translateY(2px);
  box-shadow: var(--btn-secondary-active);
}

.field-label {
  display: block;
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text-mute);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.goal-number {
  display: block;
  font-size: clamp(48px, 15vw, 72px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}

.goal-feedback {
  margin: var(--space-4) 0 0;
  min-height: 3em;
  font-size: 16px;
  font-weight: 550;
  color: var(--text);
  line-height: 1.45;
}

.counter {
  color: var(--text-mute);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.reveal {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--accent);
  background: var(--accent-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 650;
  color: var(--accent-text);
}

.wide {
  width: 100%;
  margin-top: var(--space-3);
}

/* --- Headline figures ---
   Plain figures on the goal panel, not grey boxes inside a tinted card: the hero figure
   carries the colour, the others stay text. */
.score-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
  margin: 0;
}

.score-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.score-label {
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.score-value {
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 750;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.score-block.hero .score-label {
  color: var(--accent-text);
}

.score-block.hero .score-value {
  font-size: clamp(40px, 6vw, 56px);
  line-height: 1;
  color: var(--accent-text);
  font-weight: 800;
}

.progress {
  margin-bottom: var(--space-4);
}

.progress-bar {
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.progress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.today {
  margin: 0;
  font-size: clamp(34px, 7vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.stats dt {
  color: var(--text-mute);
  font-size: 14px;
}

.stats dd {
  margin: 0;
  font-weight: 700;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* --- Hint Ladder & Gate --- */
.help {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.help-ladder {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-ladder:empty {
  display: none;
}

.help-rung {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-secondary);
  box-shadow: var(--shadow-sm);
}

.help-rung p {
  margin: 0;
  line-height: 1.5;
}

.help-rung .help-title {
  margin-bottom: var(--space-2);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.help-rung .note {
  margin-top: var(--space-3);
}

.help-gate {
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  font-weight: 550;
}

.solution-steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-mute);
  font-size: 13px;
  font-weight: 700;
}

.step-formula {
  margin-top: var(--space-2);
  overflow-x: auto;
  font-size: 18px;
}

.self-explain {
  margin-top: var(--space-5);
}

.self-explain .choice-row {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.twin-note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--accent-surface);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 600;
}

/* --- Auth & Account --- */
#auth-view .primary,
#account-view .primary {
  width: 100%;
}

#auth-view form,
#account-view form {
  margin-top: var(--space-4);
}

.provider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--btn-secondary-shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s ease;
}

.provider:hover {
  border-color: var(--text-mute);
  transform: translateY(-1px);
  box-shadow: var(--btn-secondary-hover);
}

.provider:active {
  transform: translateY(2px);
  box-shadow: var(--btn-secondary-active);
}

.provider-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: 13px;
  font-weight: 800;
}

.or {
  margin: var(--space-4) 0 0;
  color: var(--text-mute);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  position: relative;
}

.or::before,
.or::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}

.or::before { left: 0; }
.or::after { right: 0; }

#account-details {
  margin-top: var(--space-4);
}

#account-view .text-button.wide {
  margin-top: var(--space-3);
}

/* PliusMinus: green primary, blue secondary, shared by app and public pages. */
/* Light only (color-scheme: only light; "only" also opts out of browser auto-dark). A prefers-color-scheme: dark block used to swap some
   tokens but not the ground, so dark-mode Macs got pale-yellow text on pale yellow. Dark mode
   needs a complete palette, never a partial override. */
:root{color-scheme:only light;--bg:#f5f9fa;--surface:#fff;--surface-secondary:#eef3f7;--surface-tertiary:#e5ecf1;--text:#172235;--text-mute:#334155;--border:#dee6ec;--accent:#58cc02;--accent-hover:#66da27;--accent-active:#46a504;--accent-text:#296900;--accent-ink:#0b2a00;--accent-surface:#e9ffe1;--accent-border:#c1edb1;--shadow-card:0 8px 30px #23395706;--radius:14px;--font:'Avenir Next','Avenir','Segoe UI',sans-serif;--btn-3d-shadow:0 4px 0 var(--accent-active);--btn-3d-shadow-hover:0 5px 0 var(--accent-active);--btn-3d-shadow-active:0 1px 0 var(--accent-active);--btn-secondary-shadow:none;--btn-secondary-hover:none;--btn-secondary-active:none;--spring:background .18s,color .18s,transform .18s;--pradzia-text:#a65d0b;--ivaldyta-text:#296900;--spraga-text:#b53932}
[hidden]{display:none!important}::placeholder{color:#5b6576;opacity:1}button,input,select,textarea{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #388604;outline-offset:4px}.primary,.secondary{border-radius:9px;min-height:48px;padding:13px 20px;font-size:14px;font-weight:650;box-shadow:none;transform:none;transition:background .15s,transform .15s}.primary{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);box-shadow:var(--btn-3d-shadow)}.primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--btn-3d-shadow-hover)}.secondary{border:1px solid var(--border);background:var(--surface);color:var(--text)}.secondary:hover{background:#eef3f8;box-shadow:none;transform:none}.text-button{min-height:44px;color:var(--accent-text);padding:10px 8px;border:0;background:transparent;font-size:14px;box-shadow:none}.ink-underline{background:linear-gradient(transparent 83%,#90d4ff 83%,#90d4ff 97%,transparent 97%)}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--accent-text)}.learning-app{padding:0 24px;background:var(--bg);min-height:100vh}.app-header{max-width:1120px;margin:auto;height:88px;display:flex;align-items:center;gap:28px}.app-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-size:23px;font-weight:750;text-decoration:none}.app-caption{font-size:12px;color:var(--text-mute)}.app-header nav{display:flex;margin-left:auto;gap:10px}.app-header button{border:0;background:transparent;min-height:44px;padding:10px 14px;color:var(--text-mute);border-radius:8px;font-size:14px;font-weight:650}.app-header button:hover{background:#e9ffe1;color:var(--accent-text)}.learning-app main.card{margin:35px auto 60px;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-card);padding:36px;width:min(100%,720px);animation:appear .25s ease-out}.learning-app main.dash{width:min(100%,1080px);border:0;background:transparent;box-shadow:none;padding:12px 0}.headline{font-size:clamp(31px,4vw,47px);line-height:1.13;letter-spacing:-1.5px;font-weight:750}.lede{color:var(--text-mute);line-height:1.7;font-size:16px}.card .primary{margin-top:16px}.card input{border-radius:9px;min-height:48px;font-size:16px;box-shadow:none}.card input[type=range]{padding:0;accent-color:var(--accent)}.card input[type=checkbox]{width:20px;min-height:20px;flex:none;accent-color:var(--accent)}.choice{min-height:46px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);box-shadow:none;padding:12px 16px;flex:1;font-size:15px}.choice.chosen{background:#e9ffe1;border-color:var(--accent);color:var(--accent-text)}.choice-row{flex-wrap:wrap;gap:10px}.goal-number{color:var(--accent-text);font-size:70px}.dash-grid{gap:20px}.dash .panel{border-radius:15px;box-shadow:none;padding:26px;border:1px solid var(--border);background:var(--surface)}.panel:hover{transform:none;box-shadow:none}.score-value{font-size:clamp(24px,3vw,30px);letter-spacing:-1px}.dash .panel-goal{background:var(--accent-surface);border-color:var(--accent-border)}.topic-open{text-align:left;min-height:44px;border:0;background:none;padding:0;color:var(--text);font-size:14px;font-weight:650}.topic-open:hover{color:var(--accent-text)}.topic-lock{font-size:12px;color:var(--text-mute)}.app-footer{max-width:1080px;display:flex;justify-content:space-between;gap:20px;margin:30px auto;padding:20px 0;color:var(--text-mute);font-size:12px;border-top:1px solid var(--border)}.app-footer a{color:inherit}.app-error{position:sticky;top:10px;z-index:30;max-width:800px;margin:8px auto;padding:16px 20px;background:#fff4e2;border:1px solid #e1bc78;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:20px}.app-error button{background:none;border:0;font-size:25px;min-width:44px;min-height:44px}.depth-choices{display:flex;gap:5px;background:#edf2f7;border-radius:11px;padding:5px;margin:24px 0}.depth-choices button{flex:1;min-height:44px;border:0;background:transparent;border-radius:8px;color:var(--text-mute);font-size:14px}.depth-choices [aria-pressed=true]{background:white;color:var(--accent-text);box-shadow:0 2px 6px #23394c10;font-weight:650}.theory-formula{background:#eff8fe;border-radius:12px;margin:24px 0;padding:25px 12px}.formula{overflow-x:auto;overflow-y:hidden;max-width:100%;font-size:clamp(21px,3vw,30px);color:var(--text)}.theory-points{padding-left:22px;line-height:1.9}.theory-points li{padding-left:9px;margin-bottom:14px}.worked-example{padding:22px 24px;background:#f1fde9;border-radius:12px;margin:25px 0;line-height:1.8}.micro-check{border-block:1px solid var(--border);padding:25px 0;margin:30px 0}.micro-check .choice-row{display:grid;grid-template-columns:1fr;gap:9px}.micro-check .choice{text-align:left}.lesson-progress{display:flex;align-items:center;gap:18px;font-size:13px;margin:18px 0;color:var(--text-mute)}progress{flex:1;height:7px;accent-color:var(--accent);border:0;border-radius:10px;overflow:hidden}progress::-webkit-progress-bar{background:#e8edf3}progress::-webkit-progress-value{background:var(--accent)}.topbar{flex-wrap:wrap;gap:12px}.topbar>span:last-child{display:flex;align-items:center;gap:5px}.prompt-text{line-height:1.65;font-size:18px;margin-top:25px}.earned-points{color:#296900;font-weight:700;font-size:25px}.feedback.correct{background:#f1fde9;border:1px solid #c1edb1;color:var(--text);border-radius:12px;padding:20px}.lesson-result-points{font-size:64px;font-weight:750;letter-spacing:-3px;color:var(--accent-text);margin:30px 0 15px}.consent-row{display:flex;gap:12px;align-items:start;margin-top:25px;line-height:1.6}.delete-section{margin-top:28px;border-top:1px solid var(--border);padding-top:20px}.delete-section summary{min-height:44px;cursor:pointer;color:#934339}.delete-section p{font-size:14px;color:var(--text-mute)}#account-goal-form{margin-top:30px}#account-goal-form .secondary{margin-top:12px}.app-header button:disabled{cursor:default}.skip{position:absolute;left:12px;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:12px}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:700px){.learning-app{padding:0 16px 70px}.app-header{height:73px}.app-caption{margin-left:auto;max-width:150px;text-align:right;font-size:10px}.app-header nav{position:fixed;bottom:0;left:0;right:0;background:#fbfdfff5;backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:8px 12px max(8px,env(safe-area-inset-bottom));z-index:25;justify-content:space-around}.app-header nav button{flex:1;min-height:44px}.learning-app main.card{padding:24px 20px;margin:15px auto 35px;border-radius:15px}.learning-app main.dash{padding:10px 0;border:0}.headline{font-size:34px;letter-spacing:-1.2px}.dash-grid{grid-template-columns:1fr!important}.dash-grid>section{grid-column:1!important;grid-row:auto!important}.dash .panel{padding:21px}.dash-head{flex-wrap:wrap;gap:16px}.dash-actions{display:flex;flex-wrap:wrap;gap:10px}.dash-actions button{flex:1;min-width:140px}.topic-value{font-size:13px}.topic-meta{font-size:11px}.score-value{font-size:26px}.topbar>span:last-child{flex-wrap:wrap}.topbar .text-button{font-size:12px;padding-inline:6px}.topbar .difficulty{margin-right:auto}.formula{font-size:23px}.app-footer{font-size:10px;gap:12px}.depth-choices button{font-size:12px;padding:8px}.lesson-result-points{font-size:52px}.theory-points{font-size:15px}.goal-number{font-size:62px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.coach-actions{display:flex;flex-direction:column;gap:9px;margin-top:18px}.coach-actions button{text-align:left;justify-content:space-between;font-size:13px}.coach-actions+.note{font-size:12px}#coach-evidence{font-size:14px;line-height:1.7;margin-top:18px;padding-top:12px;border-top:1px solid var(--border)}#ai-help-text,#theory-ai-text{padding:16px;background:#eff8fe;border-radius:10px}

/* A companion beside the lesson; a bounded sheet on small screens. Blue marks the buddy
   everywhere — launcher, avatar, call button — so the student always knows who is talking. */
.buddy-launcher{position:fixed;right:24px;bottom:24px;z-index:30;display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 20px 12px 16px;border:1px solid #1cb0f6;border-radius:30px;background:#1cb0f6;color:#032b40;font-family:inherit;font-size:15px;font-weight:650;line-height:1.2;box-shadow:0 6px 20px #1722351f;cursor:pointer;transition:transform .2s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s,background .2s;animation:buddy-arrive .45s cubic-bezier(.2,.9,.3,1.2) both}
.buddy-launcher:hover{background:#66c6ff;transform:translateY(-2px);box-shadow:0 10px 26px #17223526}.buddy-launcher:active{transform:scale(.96)}.buddy-launcher[aria-expanded="true"]{visibility:hidden}
@keyframes buddy-arrive{from{opacity:0;transform:translateY(12px) scale(.9)}}

/* Sound bars: the launcher icon and the call button's face. They move only when something
   is happening — hover, thinking, speaking — so motion always means something. */
.buddy-bars{display:inline-flex;align-items:center;gap:3px;height:20px}.buddy-bars i{width:3px;height:40%;border-radius:3px;background:currentColor}.buddy-bars i:nth-child(2){height:80%;--d:.12s}.buddy-bars i:nth-child(3){height:100%;--d:.24s}.buddy-bars i:nth-child(4){height:55%;--d:.36s}
.buddy-launcher:hover .buddy-bars i,.buddy-call[data-state=speaking] .buddy-bars i{animation:buddy-wave .45s ease-in-out var(--d,0s) infinite alternate}
.buddy-call[data-state=thinking] .buddy-bars i{animation:buddy-think 1s ease-in-out var(--d,0s) infinite}
@keyframes buddy-wave{to{transform:scaleY(.35)}}@keyframes buddy-think{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}

.buddy-panel{position:fixed;inset:auto 24px 24px auto;margin:0;width:min(400px,calc(100vw - 32px));max-width:none;max-height:min(700px,calc(100dvh - 48px));padding:0;border:1px solid #c9d3df;border-radius:24px;background:#fbfcfe;color:#172235;box-shadow:0 24px 70px #1722352e;z-index:40;overflow-y:auto;overscroll-behavior:contain}
.buddy-panel[open]{display:flex;flex-direction:column;animation:buddy-open .28s cubic-bezier(.2,.9,.3,1.15)}.buddy-panel::backdrop{background:#17223542}
@keyframes buddy-open{from{opacity:0;transform:translateY(14px) scale(.97)}}
.buddy-heading{display:flex;align-items:flex-start;gap:12px;padding:16px 10px 14px 18px;border-bottom:1px solid #e3e9f0}.buddy-heading>div{flex:1;min-width:0}.buddy-heading h2{font-size:19px;line-height:1.2;margin:2px 0 3px;letter-spacing:-.4px}
.buddy-avatar,.buddy-orb,.buddy-line.assistant::before{background:radial-gradient(circle at 30% 25%,#eff8fe,#66c6ff 52%,#89e219);box-shadow:inset 0 0 10px #fff9}
.buddy-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%}
.buddy-panel:has(.buddy-call:is([data-state=thinking],[data-state=speaking])) .buddy-avatar{animation:buddy-breathe 1.4s ease-in-out infinite}
@keyframes buddy-breathe{50%{transform:scale(1.08)}}
.buddy-disclosure{font-size:12px;line-height:1.45;margin:0;color:#334155}
.buddy-close{flex:0 0 44px;border:0;background:transparent;font:28px/1 sans-serif;min-width:44px;min-height:44px;color:inherit;cursor:pointer;border-radius:50%;transition:background .15s,transform .2s}.buddy-close:hover{background:#edf1f6;transform:rotate(90deg)}

/* Chat bubbles: the buddy on the left with its blue dot, the student on the right in accent.
   Speaker names stay in the DOM for screen readers; position and the dot carry them visually. */
.buddy-log{flex:1 1 auto;min-height:160px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px 18px}
.buddy-line{position:relative;max-width:84%;align-self:flex-start;margin-left:30px;padding:10px 14px;border-radius:18px 18px 18px 6px;background:#edf1f6;overflow-wrap:anywhere;animation:buddy-pop .28s cubic-bezier(.2,.9,.3,1.25) both}
.buddy-line.assistant::before{content:"";position:absolute;left:-30px;bottom:0;width:22px;height:22px;border-radius:50%}
.buddy-line.student{align-self:flex-end;margin-left:0;border-radius:18px 18px 6px 18px;background:#58cc02;color:var(--accent-ink)}
.buddy-line strong{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.buddy-line p{font-size:15px;line-height:1.5;margin:0}
.buddy-line.typing p{display:flex;gap:4px;padding:6px 0}.buddy-line.typing span{width:7px;height:7px;border-radius:50%;background:#7a889a;animation:buddy-dot 1s ease-in-out infinite}.buddy-line.typing span:nth-child(2){animation-delay:.15s}.buddy-line.typing span:nth-child(3){animation-delay:.3s}
@keyframes buddy-dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes buddy-pop{from{opacity:0;transform:translateY(8px) scale(.96)}}

.buddy-dock{display:flex;flex-direction:column;gap:10px;padding:14px 18px 8px;border-top:1px solid #e3e9f0;background:#f3f6fa}
.buddy-voice{display:flex;align-items:center;gap:8px}.buddy-voice .text-button{font-size:13px;min-height:44px;color:#172235}
.buddy-call{flex:1;display:flex;align-items:center;gap:12px;min-height:56px;padding:5px 20px 5px 5px;border:1px solid #1cb0f6;border-radius:999px;background:#1cb0f6;color:#032b40;box-shadow:none;font:inherit;font-size:15px;font-weight:650;text-align:left;transition:transform .2s cubic-bezier(.2,.9,.3,1.3),background .2s,color .2s}
.buddy-call:hover:not(:disabled){background:#66c6ff;transform:translateY(-1px)}.buddy-call:active:not(:disabled){transform:scale(.97)}
.buddy-call.live{background:#172235;border-color:#172235;color:#90d4ff}.buddy-call.live:hover:not(:disabled){background:#243650}
.buddy-orb{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;color:#034564}
.buddy-orb::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #66c6ff;opacity:0;pointer-events:none}
.buddy-call[data-state=listening] .buddy-orb::after{animation:buddy-ring 1.6s ease-out infinite}
@keyframes buddy-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.55);opacity:0}}
.buddy-status{font-size:13px;line-height:1.45;margin:0;padding:0 4px;min-height:19px;color:#334155}
.buddy-panel audio{width:100%;height:36px;flex-shrink:0}

/* Quick questions: one tap sends. A horizontal strip so four chips cost one row, faded at the
   edge to show there is more. */
.buddy-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent)}.buddy-chips::-webkit-scrollbar{display:none}
.buddy-chips button{flex:0 0 auto;min-height:44px;padding:0 15px;border:1px solid #cdd8e5;border-radius:999px;background:#fff;color:#172235;font-size:13px;font-weight:600;white-space:nowrap;transition:transform .2s cubic-bezier(.2,.9,.3,1.3),background .15s,border-color .15s}
.buddy-chips button:hover:not(:disabled){border-color:#172235;background:#dff2fe;transform:translateY(-1px)}.buddy-chips button:active:not(:disabled){transform:scale(.95)}

.buddy-form{margin:0}.buddy-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.buddy-composer{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 16px;border:1px solid #cdd8e5;border-radius:999px;background:#fff;transition:border-color .15s,box-shadow .15s}
.buddy-composer:focus-within{border-color:#58cc02;box-shadow:0 0 0 3px #58cc022e}
.buddy-composer input{flex:1;min-width:0;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:16px;font-weight:500}
.buddy-composer input:focus,.buddy-composer input:focus-visible{outline:none;box-shadow:none}
.buddy-send{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;padding:0;border:0;border-radius:50%;background:#58cc02;color:var(--accent-ink);transition:transform .2s cubic-bezier(.2,.9,.3,1.3),background .15s}
.buddy-send svg{transition:transform .2s}.buddy-send:hover:not(:disabled){background:#66da27;transform:scale(1.06)}.buddy-send:hover:not(:disabled) svg{transform:translateX(2px)}.buddy-send:active:not(:disabled){transform:scale(.9)}

.buddy-privacy summary{font-size:12px;min-height:44px;line-height:44px;color:#334155;cursor:pointer}
.buddy-consent{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:12px;line-height:1.45;color:#334155;cursor:pointer}.buddy-consent input{width:18px;height:18px;min-height:18px;flex:0 0 18px;margin:2px 0;padding:0;accent-color:#58cc02}.buddy-consent a{color:inherit;text-decoration:underline}

@media(max-width:700px){.app-header nav{padding-right:70px;gap:0}.app-header nav button{flex:1;min-width:0;padding:10px 5px;font-size:12px}.app-footer{padding-bottom:84px}.buddy-launcher{right:16px;bottom:calc(8px + env(safe-area-inset-bottom));padding:12px;border-radius:50%;min-height:48px;min-width:48px;justify-content:center}.buddy-launcher-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.buddy-panel{inset:auto 10px max(10px,env(safe-area-inset-bottom)) 10px;width:auto;max-height:calc(100dvh - 20px);border-radius:22px}.buddy-heading{padding:14px 8px 12px 16px}.buddy-log{min-height:120px;padding:14px 16px}.buddy-dock{padding:12px 16px 6px}.buddy-chips{margin:0 -16px;padding:2px 16px}}
@media(max-height:650px){.buddy-log{min-height:90px}.buddy-avatar{width:32px;height:32px;flex-basis:32px}.buddy-call{min-height:48px}.buddy-orb{width:38px;height:38px;flex-basis:38px}}

/* The buddy always shows which screen it is grounded on, and re-grounds when that changes. */
.buddy-context-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 18px 0}
.buddy-context{display:flex;align-items:center;gap:7px;margin:0;min-width:0;font-size:13px;color:#3b4a5c}
.buddy-context>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.context-label{flex:0 0 auto;padding:3px 8px;border-radius:20px;background:#e1eaf7;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
#buddy-open-chat{flex:0 0 auto;min-height:40px;font-size:13px}
/* An authored fallback is not an AI answer; the label keeps the student calibrated. */
.chat-source{display:inline-block;margin-top:6px;font-size:11px;color:#334155}
.buddy-line.student .chat-source{color:#0b2a00}

/* The full chat page. The thread scrolls; the composer stays put. */
.chat-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px}
.chat-line{padding:12px 15px;background:#edf1f6;border-radius:14px;margin-right:12px;overflow-wrap:anywhere}
.chat-line.student{margin-right:0;margin-left:24px;background:#e9ffe1}
.chat-line[data-pending]{opacity:.6}
.chat-speaker{display:block;font-size:12px;font-weight:600}
.chat-text{font-size:15px;line-height:1.55;margin:4px 0 0;white-space:pre-wrap}
.chat-page{display:flex;flex-direction:column;gap:13px;height:calc(100dvh - 168px);min-height:380px}
.chat-page>*{flex:0 0 auto}
.chat-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chat-title{flex:1 1 200px}.chat-title .eyebrow{margin:0}.chat-page .headline{font-size:29px;margin:2px 0 0}
.chat-page .chat-log{padding:16px;border:1px solid var(--border);border-radius:16px;background:#f6f8fb}
.chat-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:232px minmax(0,1fr);gap:16px}
.chat-main{min-width:0;display:flex;flex-direction:column;gap:11px}
.chat-main>*{flex:0 0 auto}
.chat-rail{min-height:0;display:flex;flex-direction:column;gap:8px;padding-right:4px;border-right:1px solid var(--border)}
.chat-rail-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-rail .panel-title{margin:0;font-size:13px}
#chat-new{font-size:13px;min-height:40px;white-space:nowrap}
.chat-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
/* With no conversations the list must not grow, or it pushes the empty note to the rail's bottom. */
.chat-list:empty{flex:0 0 auto}
.chat-list-item{display:flex;align-items:stretch;gap:2px}
.chat-list-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:inherit;font-family:inherit;text-align:left;cursor:pointer}
.chat-list-open:hover{background:#edf1f6}
.chat-list-open[aria-current=true]{background:#e9ffe1}
.chat-list-open strong{font-size:13px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-list-when{font-size:11px;color:#334155}
.chat-list-delete{flex:0 0 auto;min-width:36px;min-height:36px;align-self:center;border:0;border-radius:9px;background:transparent;color:#334155;font-family:inherit;font-size:17px;cursor:pointer}
.chat-list-delete:hover{background:#f3e2e2;color:#8a2f2f}
.chat-list-delete.confirming{min-width:auto;padding:0 9px;font-size:12px;font-weight:600;background:#f3e2e2;color:#8a2f2f}
.chat-composer{display:flex;align-items:flex-end;gap:8px}
.chat-attach{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:19px;cursor:pointer}
.chat-attach:hover{background:#edf1f6}
.chat-attach:focus-within{outline:2px solid #58cc02;outline-offset:2px}
.chat-attachment{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:11px;background:#f3f5f9}
.chat-attachment-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-attachment-remove{flex:0 0 auto;min-height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#334155;font-family:inherit;font-size:13px;cursor:pointer}
.chat-attachment-remove:hover{background:#f3e2e2;color:#8a2f2f}
.chat-composer textarea{flex:1;min-width:0;max-height:160px;resize:none;overflow-y:auto;font-family:inherit;font-size:16px;line-height:1.5;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;color:inherit}
.chat-composer button{min-height:48px;padding:12px 20px}
.chat-page>.note{font-size:12px;margin:0}
/* .card is 580px wide and the global form rule stacks its children: the chat page needs room
   for the rail beside the thread, a thread that takes the height, and a one-row composer. */
.learning-app main.chat-page{max-width:880px;width:min(100%,880px)}
.chat-main{min-height:0}.chat-main>.chat-log{flex:1 1 auto}
.chat-composer{flex-direction:row}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.buddy-context-row{padding:8px 16px 0}.chat-page{height:calc(100dvh - 196px);gap:11px}.chat-page .headline{font-size:26px}.chat-page .chat-log{padding:13px}}




@media(max-width:700px){.chat-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px}.chat-rail{border-right:0;border-bottom:1px solid var(--border);padding:0 0 9px;gap:7px}.chat-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:7px;padding-bottom:2px}.chat-list-item{flex:0 0 auto;max-width:64vw;border:1px solid var(--border);border-radius:11px}.chat-list-open{padding:8px 9px}.chat-list-delete{min-width:32px;min-height:32px}}

.memory-section{margin:26px 0 8px;padding-top:20px;border-top:1px solid var(--border)}
.memory-section .subhead{margin:0 0 10px}
.memory-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.memory-item{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:11px 13px;border:1px solid var(--border);border-radius:12px}
.memory-kind{flex:0 0 auto;padding:3px 9px;border-radius:20px;background:#e1eaf7;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.memory-text{flex:1 1 190px;min-width:0;font-size:14px;line-height:1.5}
.memory-delete{flex:0 0 auto;min-height:38px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:#334155;font-family:inherit;font-size:13px;cursor:pointer}
.memory-delete:hover{background:#f3e2e2;color:#8a2f2f}
@media(max-width:700px){.memory-item{padding:10px}.memory-text{flex-basis:100%}}

/* Preserve mathematical letter case and readable worked examples at narrow widths. */
.micro-check .subhead,#theory-deep-title{text-transform:none;letter-spacing:-.3px;font-size:20px;line-height:1.5}
@media(max-width:700px){.worked-example{padding:18px 14px}.worked-example .theory-points{line-height:1.7;padding-left:18px}.worked-example .theory-points li{padding-left:3px}}

/* Plan screen. Same button affordance as every other choice in onboarding, only wider and
   left-aligned, because a price and a feature line do not read centred. */
.plan-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.plan-card {
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  min-height: 150px;
  text-align: left;
}

.plan-name {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.plan-price {
  font-size: 24px;
  font-weight: 800;
}

.plan-price small {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
}

.plan-card .choice-note {
  white-space: normal;
}

/* Dashboard chat. On desktop it takes the right column under the insights and stretches to
   the bottom of the topic list; the thread scrolls inside it so the page never grows. */
/* min-width: the chips row never wraps, and a grid item otherwise grows to fit it — on a
   phone that pushed the whole panel past the screen edge. */
.panel-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 420px;
  min-width: 0;
}

/* The phone rule that widens the dashboard's main action to full width must not reach the
   send button, or it squeezes the text box to nothing. */
#home-view .panel-chat .chat-composer button {
  flex: 0 0 auto;
  width: auto;
}

.panel-chat .panel-title {
  margin: 0;
}

.dash-chat-log {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: min(60vh, 520px);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f6f8fb;
}

.panel-chat .buddy-chips {
  margin: 0;
  padding: 2px 0;
}

.panel-chat .primary {
  margin-top: 0;
}

.panel-chat .note {
  margin: 0;
  font-size: 12px;
}

.panel-chat .text-button {
  align-self: flex-start;
}

/* Learning paths: calm, directional motion; one focal lesson, then a readable sequence. */
.path-page{--path-ease:cubic-bezier(.2,0,0,1)}
.path-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:start;margin-top:24px}
.path-overview{position:sticky;top:30px}.path-overview .headline{margin:14px 0 20px;font-size:clamp(36px,4vw,54px);overflow-wrap:anywhere}
.path-overview .lede{max-width:390px;font-size:16px}.path-completion{margin:28px 0 32px;display:flex;flex-direction:column;gap:12px;font-size:13px;font-weight:600;color:var(--text-mute)}
.path-completion progress{width:100%;flex:none;height:8px}.path-completion progress::-webkit-progress-value{background:#58cc02}
.path-current{position:relative;padding:27px;background:#dff2fe;border-radius:20px;overflow:hidden;border:1px solid #bde4fe}
.path-current .eyebrow{margin:0 0 12px}.path-current h2{position:relative;margin:0 0 12px;font-size:24px;line-height:1.25;letter-spacing:-.7px;max-width:270px}.path-current p:not(.eyebrow){position:relative;font-size:14px;line-height:1.65;color:#334155;max-width:290px}
.path-current .primary{position:relative;width:100%;margin-top:10px}.path-spark{position:absolute;right:16px;top:8px;color:#bde4fe;font-size:112px;font-weight:400;line-height:1;transform:rotate(-9deg);transition:transform 350ms var(--path-ease)}
.path-current:hover .path-spark{transform:translate(3px,-3px) rotate(-5deg)}
.path-footnote{font-size:13px;line-height:1.7;color:var(--text-mute);margin:22px 0;max-width:350px}
.path-track{min-width:0}.path-track-head{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--text-mute);font-size:13px;border-bottom:1px solid var(--border);padding:0 0 21px;margin-bottom:22px}.path-track-head>span:last-child{font-size:23px;color:var(--accent-text)}
.path-lessons{margin:0;padding:0;list-style:none}.path-stop{position:relative;padding:0 0 22px 0;margin:0;--offset:0px}.path-stop:nth-child(even){--offset:26px;padding-left:var(--offset)}
.path-stop:before{content:'';position:absolute;left:34px;top:50px;bottom:-45px;width:26px;border-left:2px dashed #bed0e8;transform:skewX(11deg);transform-origin:top;pointer-events:none}.path-stop:nth-child(even):before{left:60px;transform:skewX(-11deg)}.path-stop:last-child:before{bottom:-13px}
.path-lesson{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr) 22px;align-items:center;gap:18px;width:100%;min-height:132px;padding:18px 20px 18px 0;border:1px solid transparent;border-radius:18px;background:transparent;text-align:left;color:var(--text);transition:transform 220ms var(--path-ease),background 120ms,box-shadow 220ms var(--path-ease)}
.path-lesson:hover{background:#f7faff;transform:translateY(-3px)}.path-lesson:active{transform:translateY(1px)}
.path-marker{position:relative;display:grid;place-items:center;width:66px;height:66px;border:2px solid #c8d6e9;border-radius:50%;background:#f0f5fc;font-size:21px;font-weight:650;color:#334155;box-shadow:0 4px 0 #dce5f0;transition:transform 220ms var(--path-ease),box-shadow 220ms var(--path-ease)}
.path-lesson:hover .path-marker{transform:translateY(-2px);box-shadow:0 6px 0 #dce5f0}.path-lesson-copy{display:flex;flex-direction:column;gap:7px}.path-lesson-copy strong{font-size:19px;line-height:1.3;letter-spacing:-.45px}.path-description{font-size:14px;line-height:1.6;color:var(--text-mute)}.path-status{font-size:11px;font-weight:700;letter-spacing:.65px;text-transform:uppercase;color:#334155}.path-arrow{font-size:22px;color:#334155;transition:transform 180ms var(--path-ease)}.path-lesson:hover .path-arrow{transform:translate(2px,-2px)}
.is-current .path-lesson{background:#f7fef3;border-color:#c1edb1;box-shadow:0 8px 24px #58cc020b}.is-current .path-marker{background:#58cc02;border-color:#58cc02;color:var(--accent-ink);box-shadow:0 5px 0 #46a504;outline:6px solid #d1fec2}.is-current .path-status{color:#296900}
.is-complete .path-marker{background:#d1fec2;border-color:#c1edb1;color:#296900;box-shadow:0 4px 0 #c1edb1}.is-complete .path-status{color:#296900}
.path-finish{display:flex;gap:20px;align-items:center;margin:6px 0 0;padding:10px 0;font-size:13px;color:var(--text-mute)}.path-finish>span:first-child{display:grid;place-items:center;width:66px;height:50px;font-size:26px;color:#296900}
.lesson-position{display:inline-block;font-size:12px;font-weight:650;padding:6px 10px;border-radius:6px;background:#eff8fe;color:#035f88;margin:14px 0 24px}.theory-card #theory-duration{margin-top:0}.practice-setup{margin-top:34px;padding-top:28px;border-top:1px solid var(--border)}.practice-setup .subhead{text-transform:none;letter-spacing:-.4px;font-size:23px;line-height:1.35}.practice-setup select{min-height:48px;width:100%;padding:12px 16px;border:1px solid #bccbe0;border-radius:10px;background:#f7faff;color:var(--text);font:inherit}.practice-setup select:focus-visible{outline:3px solid #388604;outline-offset:3px}.practice-setup select:disabled{color:#334155;opacity:1}.theory-card #theory-chat{margin-top:12px}.practice-subtopic{font-size:14px;color:#035f88;border-top:1px solid var(--border);padding-top:18px}#lesson-result-view .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}#lesson-result-view .actions button{margin:0}#lesson-next{flex-basis:100%}#lesson-next{white-space:normal;text-align:left}
@media(min-width:701px){.path-track{padding-top:8px}}
@media(max-width:800px){.path-layout{grid-template-columns:minmax(0,1fr);gap:28px}.path-overview{position:static}.path-overview .headline{font-size:40px}.path-overview .lede{max-width:100%}.path-current{padding:23px}.path-current h2,.path-current p:not(.eyebrow){max-width:85%}.path-footnote{max-width:none}.path-completion{margin:22px 0}.path-track{max-width:600px;width:100%;margin:auto}}
@media(max-width:450px){.path-stop:nth-child(even){--offset:14px}.path-lesson{grid-template-columns:54px minmax(0,1fr) 16px;gap:12px;padding-right:10px;min-height:128px}.path-marker{width:52px;height:52px;font-size:17px}.path-stop:before{left:26px;transform:skewX(6deg)}.path-stop:nth-child(even):before{left:40px;transform:skewX(-6deg)}.path-lesson-copy strong{font-size:17px}.path-description{font-size:14px}.path-finish>span:first-child{width:52px}.path-track-head{font-size:12px}.path-overview .headline{font-size:36px}.path-current h2{font-size:23px}.path-status{font-size:10px}.lesson-position{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.learning-app main.card,.path-lesson,.path-marker,.path-arrow,.path-spark{animation:none!important;transition:none!important}.path-lesson:hover,.path-lesson:hover .path-marker,.path-lesson:hover .path-arrow,.path-current:hover .path-spark{transform:none}}

.path-footnote summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0}.path-footnote p{margin:0 0 12px}
.path-page .headline:focus,.theory-card .headline:focus{outline:none}
@media(max-width:450px){.path-current{padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.path-current .eyebrow,.path-current .path-spark,.path-current p:not(.eyebrow){display:none}.path-current h2{font-size:17px;max-width:none;margin:0}.path-current .primary{width:auto;margin:0;padding:10px 12px;font-size:12px;min-height:44px}.path-footnote{margin:10px 0}.path-layout{gap:12px}.path-overview .lede{font-size:15px}.path-track-head{padding-bottom:14px;margin-bottom:16px}}

/* The lesson path is its own scroll window. A long topic used to make the whole page taller
   than the viewport, so the sticky overview scrolled away and the page lost its desktop
   shape. Bounding the list keeps the card still and moves the scrolling inside it. */
.path-lessons {
  position: relative; /* also the offsetParent centerCurrentLesson() measures against */
  max-height: min(60vh, 600px);
  max-height: min(60dvh, 600px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 4px 6px 10px 8px; /* room for the current marker's outline ring */
}

@media (max-width: 800px) {
  /* On a phone the overview above it must stay on screen, so the window is shorter. */
  .path-lessons {
    max-height: min(52vh, 460px);
    max-height: min(52dvh, 460px);
  }
}

/* Motion. One easing family for the app and the public pages: fast out, soft landing. The
   global prefers-reduced-motion rule above switches every animation and transition off. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.6); }
}

@keyframes fill-x {
  to { transform: scaleX(1); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 #58cc0266; }
  70%, 100% { box-shadow: 0 0 0 9px #58cc0200; }
}

@keyframes grow-x {
  from { transform: scaleX(0); }
}

/* Icons: inline SVG line icons, never emoji — emoji render differently on every platform and
   ignore the brand colour. Sized by font-size, coloured by currentColor. */
svg.i {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}

.path-spark svg.i {
  stroke-width: 1.2;
}

/* --- App: motion ------------------------------------------------------------------------
   A view is display:none until show() reveals it, and CSS animations restart on every reveal,
   so entering a screen replays its entrance without any JavaScript. */
.learning-app main.card {
  animation: rise 0.45s var(--ease-out) both;
}

.dash-grid > .panel,
.home-tiles > .home-tile,
.topics-list > .topic-card,
.dash-actions {
  animation: rise 0.55s var(--ease-out) both;
}

.dash-grid > .panel:nth-child(2) { animation-delay: 0.05s; }
.dash-grid > .panel:nth-child(3) { animation-delay: 0.1s; }
.dash-grid > .panel:nth-child(4) { animation-delay: 0.15s; }
.dash-grid > .panel:nth-child(5) { animation-delay: 0.2s; }
.dash-grid > .panel:nth-child(n + 6) { animation-delay: 0.25s; }
.dash-actions { animation-delay: 0.2s; }
.home-tiles > .home-tile:nth-child(2) { animation-delay: 0.14s; }
.home-tiles > .home-tile:nth-child(n + 3) { animation-delay: 0.18s; }
.topics-list > .topic-card:nth-child(2) { animation-delay: 0.04s; }
.topics-list > .topic-card:nth-child(3) { animation-delay: 0.08s; }
.topics-list > .topic-card:nth-child(4) { animation-delay: 0.12s; }
.topics-list > .topic-card:nth-child(5) { animation-delay: 0.16s; }
.topics-list > .topic-card:nth-child(n + 6) { animation-delay: 0.2s; }

/* Bars grow from their start edge each time their screen appears. */
.bullet-fill,
.bullet-range,
.bar-track,
.meter-fill,
.mix-strip,
.topic-progress::after,
.step-progress i {
  transform-origin: left;
  animation: grow-x 0.9s var(--ease-out) 0.15s both;
}

.bar-fill {
  transform-origin: left;
  animation: grow-x 0.8s var(--ease-out) 0.45s both;
}

.topic-row:nth-child(2) .bar-track { animation-delay: 0.2s; }
.topic-row:nth-child(3) .bar-track { animation-delay: 0.25s; }
.topic-row:nth-child(4) .bar-track { animation-delay: 0.3s; }
.topic-row:nth-child(n + 5) .bar-track { animation-delay: 0.35s; }

.bullet-target,
.bullet-flag {
  animation: rise 0.5s var(--ease-out) 0.7s both;
}

.score-value,
.today,
.lesson-result-points {
  animation: pop-in 0.5s var(--ease-spring) 0.2s both;
}

/* --- App: shell matches the public header ----------------------------------------------- */
@media (min-width: 701px) {
  .app-header {
    position: sticky;
    top: 0;
    z-index: 35;
    height: 76px;
    /* The header is max-width bound; the outset border image paints its ground edge to edge. */
    border-image: linear-gradient(color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 90%, transparent)) fill 0 / 0 / 0 100vmax;
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
  }
}

.app-header nav button {
  transition: background 0.2s, color 0.2s;
}

.app-header nav button[aria-current] {
  background: var(--accent-surface);
  color: var(--accent-text);
}

/* The launcher floats over the bottom-right corner; the footer keeps its text clear of it. */
body:has(#buddy-launcher:not([hidden])) .app-footer {
  padding-right: 200px;
}

@media (max-width: 700px) {
  body:has(#buddy-launcher:not([hidden])) .app-footer {
    padding-right: 0;
  }
}

/* --- App: layout fixes ------------------------------------------------------------------ */

/* A plain 1fr track grows to its widest child's min-content: five quick actions pushed the
   dashboard to 468px on a 360px phone. minmax(0, 1fr) keeps the column the screen's width. */
@media (max-width: 700px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Plans side by side: three prices read as a comparison, two-plus-one read as a leftover. */
#plan-view {
  width: min(100%, 780px);
  max-width: 780px;
}

@media (min-width: 640px) {
  #plan-view .plan-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plan-card {
  transition: transform 0.25s var(--ease-out), border-color 0.2s, background 0.2s;
}

.plan-card:hover {
  transform: translateY(-3px);
}

/* The exams page has no goal panel until a first sitting exists; without this the paper list
   sat in the right column beside an empty left one. */
@media (min-width: 768px) {
  #exams-view .dash-grid:not(:has(.panel-goal:not([hidden]))) > .panel {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Placement: how far through the check, as a bar. Approximate, like the "~" count above it. */
.step-progress {
  height: 6px;
  margin: 0 0 18px;
  border-radius: 6px;
  background: var(--surface-tertiary);
  overflow: hidden;
}

.step-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.6s var(--ease-out);
}

/* Three readable stages, matching the established app palette. */
.path-levels{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.level-jump{min-height:44px;padding:10px 15px;border:1px solid currentColor;border-radius:8px;font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.level-1{background:#edf4d8;color:#39521c}.level-2{background:#e6efff;color:#224f9d}.level-3{background:#f8eadb;color:#754317}
.level-jump:hover{filter:brightness(.96)}.level-jump:focus-visible{outline:3px solid #388604;outline-offset:3px}
.path-stage{position:relative;margin:20px 0 16px;padding:18px 20px;border-radius:10px;list-style:none}
.path-stage h2{margin:0 0 5px;font-size:23px;letter-spacing:-.5px;scroll-margin-top:24px}
.path-stage p{margin:0;font-size:14px;line-height:1.5}.path-task-count{font-size:13px;color:var(--text-mute)}
.path-stop:has(+.path-stage):before{display:none}
.calculator-guide{margin-top:28px;padding:24px;background:#edf4df;border-radius:12px;color:#304a20}
.calculator-guide .subhead{font-size:22px;letter-spacing:-.4px;line-height:1.35;text-transform:none}
.calculator-guide .theory-points{margin-bottom:18px}.calculator-guide .note,.calculator-guide .eyebrow{color:#455b35}
.calculator-guide a{color:#284c19;text-decoration:underline;text-underline-offset:3px}
@media(max-width:450px){.level-jump{flex:1;padding:10px 8px;font-size:13px}.calculator-guide{padding:20px 16px}.path-stage{padding:16px}.difficulty{flex-wrap:wrap}}

/* Direction arrows are drawn, not typed: a text arrow changes shape with the font and sits off
   the baseline. JS rewrites these labels with textContent, which leaves the class — and so the
   arrow — in place. */
.go::after,
.back::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s var(--ease-out);
}

.go::after { margin-left: 0.45em; }
.back::before { margin-right: 0.45em; transform: scaleX(-1); }
.go:hover:not(:disabled)::after { transform: translateX(3px); }
.back:hover::before { transform: scaleX(-1) translateX(3px); }

/* Boot loader. Invisible for its first 350ms: most boots finish sooner and should land on the
   dashboard with no intermediate page. The pen rides the same path the ink draws, and both
   animations share duration and timing, so the tip stays on the wet end of the line. Under
   reduced motion the line is simply drawn and the pen rests at its end. */
.boot {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin: 18vh auto 24vh;
  animation: boot-in 0.4s ease-out 0.35s both;
}

.boot-ink {
  position: relative;
  width: 180px;
  height: 80px;
}

.boot-ink path[pathLength] {
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: boot-write 2.6s infinite;
}

.boot-pen {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--text);
  /* Must match the ink path in mokytis.html. */
  offset-path: path("M8 58C22 58 26 30 36 24S48 40 38 52 44 66 56 52 70 26 80 28 82 52 74 54 76 64 92 56 110 36 120 40 118 60 132 60 156 44 172 48");
  offset-anchor: 3px 21px;
  offset-rotate: 0deg;
  offset-distance: 100%;
  animation: boot-pen 2.6s infinite;
}

.boot-caption {
  margin: 0;
  color: var(--text-mute);
  font-size: 15px;
}

/* A failed boot shows the error banner and the retry button; a pen still writing would claim
   progress that is not happening. */
.boot:has(#boot-retry:not([hidden])) :is(.boot-ink, .boot-caption) { display: none; }

@keyframes boot-in {
  from { opacity: 0; }
}

@keyframes boot-write {
  0% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  70% { stroke-dashoffset: 0; opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* After the stroke the pen lifts off the page, fades, and the next line starts fresh. */
@keyframes boot-pen {
  0% { offset-distance: 0%; opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  70% { offset-distance: 100%; opacity: 1; transform: none; }
  80% { transform: translate(4px, -6px) rotate(-8deg); }
  90% { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; transform: translate(4px, -6px) rotate(-8deg); }
}

/* Upgrade prompts: inline, never sticky, so they are seen without taking the screen. */
.upsell{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px 14px;border:1px solid var(--upsell-border);border-radius:var(--radius-sm);background:var(--upsell-surface);color:var(--upsell-text);font-size:14px;line-height:1.55}
.upsell p{margin:0;flex:1}
.upsell-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--upsell);color:#422006}
.upsell-icon .i{width:18px;height:18px}
.upsell-hot{border-color:var(--upsell-hot-border);background:var(--upsell-hot-surface);color:var(--upsell-hot-text)}
.upsell-hot .upsell-icon{background:var(--upsell-hot);color:#1c0a00}
.upsell-action{flex:none;min-height:44px;padding:10px 16px;border:0;border-radius:9px;background:var(--upsell);color:#422006;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center}
.upsell-hot .upsell-action{background:var(--upsell-hot);color:#1c0a00}
.upsell-action:hover{filter:brightness(1.05)}
@media(max-width:560px){.upsell{flex-wrap:wrap}.upsell p{flex-basis:calc(100% - 44px)}.upsell-action{width:100%;justify-content:center}}
.upgrade-dialog{width:min(440px,calc(100vw - 32px));padding:28px;border:1px solid var(--upsell-border);border-top:6px solid var(--upsell);border-radius:var(--radius-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-card-hover)}
.upgrade-dialog::backdrop{background:#0b0f1966}
.upgrade-dialog[open]{animation:appear .2s ease-out}
.upgrade-reason{margin:8px 0 12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--upsell-hot-surface);color:var(--upsell-hot-text);font-weight:600;line-height:1.5}
.upgrade-list{padding-left:20px;line-height:1.6;margin:0 0 12px}
.upgrade-list li{margin-bottom:6px}
.upgrade-actions .upsell-action{width:100%;justify-content:center;margin-top:8px;min-height:48px}

/* --- Home: one grid, one primary action, tiles for everything else ----------------------
   Panels used to be placed by three rule sets (here, the chat block and exam.css) that each
   renumbered the rows, so adding one panel shifted the rest. Areas name the layout once.
   Playful comes from the tactile edge the buttons and path markers already use, not from
   mascots or rewards (docs/07-design-system.md §8). */
#home-view .dash-head {
  align-items: flex-end;
  gap: 20px 32px;
  margin-bottom: 28px;
  padding-bottom: 0;
  border: 0;
}

#home-view .dash-intro {
  flex: 1 1 420px;
  min-width: 0;
}

#home-view .dash-intro .eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-surface);
  font-size: 12px;
  letter-spacing: 0.6px;
}

#home-view .dash-head .headline {
  margin: 0 0 10px;
  font-size: clamp(34px, 4.4vw, 52px);
}

#home-view .dash-intro .note {
  max-width: 620px;
  margin: 0;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1.6;
}

#home-view .dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

#home-view .dash-actions button {
  min-height: 54px;
  margin: 0;
  padding: 15px 26px;
  border-radius: 14px;
  font-size: 16px;
}

#home-view .dash-grid {
  gap: 22px;
}

#home-view .panel {
  padding: 26px;
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--border);
}

#home-view .panel-title {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.4px;
  text-transform: none;
}

#home-view .panel-note {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
}

.panel-subtitle {
  margin: 24px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* Beside the taller "today" column the goal card stretches; centring its content turns the
   extra height into even margins instead of a hole under the bar. */
#home-view .panel-goal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  box-shadow: 0 4px 0 var(--accent-border);
}

#home-view .panel-goal .bullet-note {
  font-size: 14.5px;
  line-height: 1.55;
}

#home-view .panel-goal .score-row {
  gap: 18px 44px;
}

#home-view .score-label {
  font-size: 12px;
}

#home-view .panel-goal .score-block.hero .score-value {
  font-size: clamp(52px, 6vw, 72px);
}

#home-view .today {
  margin: 6px 0 2px;
  font-size: 40px;
}

/* Rows, not tiles: five tiles stacked three high made this card taller than the goal card
   beside it, which then stretched around a hole. */
#home-stats {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin-top: 18px;
  padding: 4px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-secondary);
}

#home-stats > div {
  display: contents;
}

#home-stats dt,
#home-stats dd {
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

#home-stats > div:first-child dt,
#home-stats > div:first-child dd {
  border-top: 0;
}

#home-stats dt {
  color: var(--text-mute);
  font-size: 14.5px;
}

#home-stats dd {
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  white-space: nowrap;
}

#home-stats > div:first-child dd {
  color: var(--accent-text);
}

/* Flex, not grid: whatever tiles are left after a full-row one share their row evenly. */
.home-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.home-tiles > .home-tile {
  flex: 1 1 230px;
  min-width: 0;
}

/* Tints come from the lesson-level palette: decoration only, every tile is named in text. */
#home-view .home-tile {
  --tint: #edf4d8;
  --ink: #39521c;
  --edge: #d3e3ad;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px;
  border-color: var(--edge);
  background: var(--tint);
  box-shadow: 0 5px 0 var(--edge);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

#home-view .tile-exam { --tint: #e6efff; --ink: #224f9d; --edge: #c9dafc; }
#home-view .tile-map { --tint: #dff2fe; --ink: #035f88; --edge: #bde4fe; }
#home-view .tile-homework { --tint: #f8eadb; --ink: #754317; --edge: #efd3b4; }

/* Locked on the free plan: the tile itself becomes the lock instead of carrying a boxed advert,
   so it keeps the size of its neighbours. The milestone note and start button are hidden —
   neither can be acted on until the plan changes; the exams page keeps the full explanation. */
#home-view .tile-exam:has(.upsell) { --tint: #ffedd5; --ink: #9a3412; --edge: #fdba74; }

#home-view .tile-exam:has(.upsell) .tile-note,
#home-view .tile-exam:has(.upsell) .score-row,
#home-view .tile-exam:has(.upsell) .tile-action { display: none; }

#home-view .tile-exam:has(.upsell) .tile-title { padding-right: 48px; }

#home-view .tile-exam:has(.upsell) [data-upsell] {
  display: flex;
  flex: 1;
}

#home-view .tile-exam .upsell {
  position: static;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-mute);
  font-size: 14.5px;
}

#home-view .tile-exam .upsell p { flex: 0 0 auto; }

#home-view .tile-exam .upsell-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  box-shadow: 0 3px 0 #c2410c;
}

#home-view .tile-exam .upsell-icon .i { width: 20px; height: 20px; }

#home-view .tile-exam .upsell-action { width: auto; }

#home-view .home-tile:has(.tile-action:hover) {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--edge);
}

#home-view .home-tile:has(.tile-action:active) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--edge);
}

#home-view .home-tile:has(.tile-action:focus-visible) {
  outline: 3px solid #388604;
  outline-offset: 3px;
}

.tile-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 24px;
  box-shadow: 0 3px 0 var(--edge);
}

.tile-title {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.3px;
}

.tile-note {
  flex: 1;
  margin: 0;
  color: var(--text-mute);
  font-size: 14.5px;
  line-height: 1.5;
}

.home-tile .score-row {
  margin-top: 6px;
}

#home-view .home-tile .score-block.hero .score-label,
#home-view .home-tile .score-block.hero .score-value {
  color: var(--ink);
}

#home-view .home-tile .score-block.hero .score-value {
  font-size: 30px;
}

.tile-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

/* The whole tile is the target; the button stays the one labelled, focusable control. */
.tile-action::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tile-action:focus-visible {
  outline: none;
}

#home-view .topic-row {
  padding: 14px 0;
}

#home-view .topic-name {
  font-size: 16px;
}

#home-view .topic-meta {
  font-size: 12.5px;
}

@media (min-width: 768px) {
  #home-view .dash-grid {
    grid-template-columns: minmax(0, 1.75fr) minmax(290px, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "goal   today"
      "tiles  tiles"
      "topics mix"
      "topics chat";
  }

  #home-view .panel-goal { grid-area: goal; }
  #home-view .panel-side { grid-area: today; align-self: stretch; }
  #home-view .home-tiles { grid-area: tiles; }
  #home-view .panel-topics { grid-area: topics; align-self: start; }
  #home-view .panel-mix { grid-area: mix; align-self: start; }
  #home-view .panel-chat { grid-area: chat; }
}

@media (max-width: 700px) {
  #home-view .dash-actions { width: 100%; }
  #home-view .dash-actions button { flex: 1 1 100%; }
  #home-view .panel,
  #home-view .panel-goal { padding: 20px; }
  #home-view .panel-goal .score-block.hero .score-value { font-size: 52px; }
  #home-view .home-tile { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; padding: 18px; }
  #home-view .home-tile > :not(.tile-icon) { grid-column: 2; }
  #home-view .tile-icon { grid-row: 1 / span 4; margin: 0; }
  #home-view .tile-action { margin-top: 0; }
}

/* --- Topic library: cards in the path page's language ----------------------------------
   Numbered tactile markers like the lesson path, a lift on hover like the home tiles. */
.topics-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: 34px;
}

.topics-head > div:first-child {
  flex: 1 1 460px;
  min-width: 0;
}

.topics-head .lede {
  max-width: 560px;
  margin-bottom: 0;
}

.topic-search {
  flex: 0 1 340px;
  width: 100%;
}

.topic-search-field {
  position: relative;
  display: block;
}

.topic-search-field svg {
  position: absolute;
  top: 50%;
  left: 16px;
  color: var(--text-mute);
  font-size: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.topic-search-field input {
  width: 100%;
  min-height: 54px;
  padding-left: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 3px 0 var(--border);
}

.topics-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

.topic-card {
  --tint: #edf4d8;
  --ink: #39521c;
  --edge: #d3e3ad;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  box-shadow: 0 5px 0 var(--border);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.2s;
}

.topic-card:nth-child(4n + 2) { --tint: #e6efff; --ink: #224f9d; --edge: #c9dafc; }
.topic-card:nth-child(4n + 3) { --tint: #dff2fe; --ink: #035f88; --edge: #bde4fe; }
.topic-card:nth-child(4n + 4) { --tint: #f8eadb; --ink: #754317; --edge: #efd3b4; }

.topic-card:hover {
  border-color: var(--edge);
  box-shadow: 0 9px 0 var(--edge);
  transform: translateY(-4px);
}

.topic-card:active {
  box-shadow: 0 2px 0 var(--edge);
  transform: translateY(3px);
}

.topic-card.is-started {
  border-color: var(--accent-border);
}

.topic-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.topic-marker {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--edge);
  border-radius: 50%;
  background: var(--tint);
  color: var(--ink);
  font-size: 18px;
  font-weight: 750;
  box-shadow: 0 4px 0 var(--edge);
}

.topic-card.is-complete .topic-marker {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 0 var(--accent-active);
  font-size: 24px;
}

.topic-chip {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-surface);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}

.topic-arrow {
  margin-left: auto;
  color: var(--ink);
  font-size: 22px;
  transition: transform 0.25s var(--ease-out);
}

.topic-card:hover .topic-arrow {
  transform: translate(3px, -3px);
}

.topic-card-title {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.topic-description {
  flex: 1;
  color: var(--text-mute);
  font-size: 15px;
  line-height: 1.6;
}

.topic-card-foot {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.topic-progress {
  display: block;
  height: 8px;
  border-radius: 8px;
  background: var(--surface-tertiary);
  overflow: hidden;
}

.topic-progress::after {
  content: "";
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.topic-status {
  color: var(--text-mute);
  font-size: 13.5px;
  font-weight: 600;
}

@media (max-width: 700px) {
  .topics-head { margin-bottom: 24px; }
  .topic-card { padding: 18px; }
  .topic-card-title { font-size: 20px; }
}
/* Plan screen age question and purchase terms (mokytis.html #plan-view). Mirrors .practice-setup select. */
.plan-age{margin:24px 0 8px;max-width:260px}.plan-age select{min-height:48px;width:100%;padding:12px 16px;border:1px solid #bccbe0;border-radius:10px;background:#f7faff;color:var(--text);font:inherit}.plan-age select:focus-visible{outline:3px solid #388604;outline-offset:3px}.plan-terms{line-height:1.6}
#account-withdraw-receipt{white-space:pre-line}#account-withdraw,#account-withdraw-done{margin-top:16px}