/* Yallah Deutsch visual system: quiet editorial surfaces, clear accent, shadcn-style semantic tokens. */
:root {
  color-scheme: light;
  --background: #f7f6f0;
  --foreground: #23352f;
  --card: #fffefa;
  --card-foreground: #23352f;
  --primary: #087263;
  --primary-foreground: #ffffff;
  --secondary: #e8efeb;
  --muted-foreground: #53655d;
  --border: #d2ddd6;
  --ring: #245f83;
  --radius: 0.75rem;

  --paper: var(--background);
  --white: var(--card);
  --soft: var(--secondary);
  --text: var(--foreground);
  --navy: #193a38;
  --deep: var(--foreground);
  --muted: var(--muted-foreground);
  --line: var(--border);
  --teal: var(--primary);
  --aqua: #e2f2eb;
  --blue: #245f83;
  --accent: var(--primary);
  --accent-soft: #e2f2eb;
  --accent-line: #9dcbbc;
  --accent-ink: var(--primary-foreground);
  --red: #a52e3a;
  --red-bg: #f9e9e9;
}

html[data-theme="dark"] {
  color-scheme: dark;
  /* Ink blue surfaces with a warm coral action color: energetic without
     making the whole learning space glow or compete with the lesson. */
  --background: #121a24;
  --foreground: #f1f3f5;
  --card: #202b38;
  --card-foreground: #f1f3f5;
  --primary: #ff9b78;
  --primary-foreground: #2b1c19;
  --secondary: #2b3745;
  --muted-foreground: #bdc7d2;
  --border: #68798d;
  --ring: #ffd18b;

  --paper: var(--background);
  --white: var(--card);
  --soft: var(--secondary);
  --text: var(--foreground);
  --navy: #f5eee6;
  --deep: var(--foreground);
  --muted: var(--muted-foreground);
  --line: var(--border);
  --teal: var(--primary);
  --aqua: #3a2b2e;
  --blue: #a9cef2;
  --accent: var(--primary);
  --accent-soft: #3a2b2e;
  --accent-line: #bd8173;
  --accent-ink: var(--primary-foreground);
  --red: #ffaaa5;
  --red-bg: #452b30;
}

html,
body {
  min-width: 0;
  width: 100%;
  overflow-x: clip;
}

body {
  color: var(--foreground);
  font-family: "Aptos", "Noto Sans Arabic", "Trebuchet MS", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: "Aptos Display", "Noto Naskh Arabic", Georgia, serif;
}

#main,
.shell,
.screen,
.landing,
.landing-hero,
.landing-intro,
.landing-notebook {
  min-width: 0;
  max-width: 100%;
}

/* The context bar used to paint above the open menu on narrow screens. Put the
   whole header in a higher stacking layer; raising only the menu was ineffective
   when its ancestor participated below the sticky page-location layer. */
.topbar {
  position: relative;
  z-index: 120;
  isolation: isolate;
}

.more-navigation {
  z-index: 121;
}

.more-navigation[open] .more-panel {
  z-index: 122;
  inset-inline-end: auto;
  right: 0;
  left: auto;
  width: min(360px, calc(100vw - 24px));
  max-height: min(70dvh, 560px);
  overscroll-behavior: contain;
  background: var(--card);
  color: var(--card-foreground);
  border-color: var(--border);
  box-shadow: 0 18px 48px rgb(13 28 25 / 24%);
}

.more-panel button {
  min-height: 48px;
  color: var(--foreground);
}

.more-panel button:hover,
.more-panel button.active {
  background: var(--aqua);
  color: var(--primary);
}

/* Replace legacy charcoal overrides with the same cool ink surfaces used by
   the rest of dark mode, including the frequently used level controls. */
html[data-theme="dark"] .topbar {
  background: var(--card);
  color: var(--foreground);
}

html[data-theme="dark"] .level-switch button[aria-pressed="true"],
html[data-theme="dark"] .explore-skill-switch button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

html[data-theme="dark"] .mobile-nav button[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--primary);
}

.explorer-tab[aria-pressed="true"],
.level-switch button[aria-pressed="true"],
.explore-skill-switch button.active,
#screen-learn .learn-levels button[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.button-primary,
html[data-theme="dark"] .button-primary,
.in-exam .button-primary {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
}

.button-primary:hover,
.in-exam .button-primary:hover {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
  filter: brightness(0.94);
}

.button-quiet,
.option.bilingual-option,
.offer-card,
.stat-card,
.subject-card,
.journey-next,
.journey-calendar,
.guide-card,
.sibling-card {
  background-color: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

.journey-progress-grid,
.journey-metrics,
.journey-calendar,
.quick-stats,
.landing-guide-list > li {
  min-width: 0;
}

.journey-daily progress,
.progress-track,
.subject-progress-track {
  accent-color: var(--primary);
}

.journey-today {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 4px 4px 18px 4px;
  box-shadow: none;
}

.journey-today .journey-session-steps li,
.journey-today .journey-duration {
  color: var(--foreground);
  border-color: var(--border);
  background: var(--card);
}

.journey-today .journey-session-steps li.is-current {
  color: var(--primary);
  border-color: var(--primary);
}

.journey-calendar li.has-activity {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--accent-soft);
}

.cloud-card,
.cloud-page input,
.cloud-page textarea,
.cloud-page select {
  color: var(--foreground);
  background: var(--card);
  border-color: var(--border);
}

.feedback,
.grammar-results:not(:empty) {
  color: var(--foreground);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.feedback.error {
  color: var(--foreground);
  background: var(--red-bg);
  border-color: var(--red);
}

.landing-guide {
  border-block: 1px solid var(--border);
}

.landing-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.landing-guide-list > li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 21px 0;
  border-bottom: 1px solid var(--border);
}

.landing-guide-index {
  color: var(--primary);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}

.landing-guide-list h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.landing-guide-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1.85;
}

.landing-guide-example {
  display: block;
  margin-top: 5px;
  color: var(--foreground);
}

.landing-guide-link {
  min-height: 44px;
  margin: 7px -8px 0;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}

.landing-guide-link:hover {
  background: var(--aqua);
}

:focus-visible {
  outline-color: var(--ring);
}

@media (max-width: 620px) {
  .topbar {
    z-index: 120;
  }

  .more-navigation[open] .more-panel {
    position: absolute;
    top: calc(100% + 10px);
    width: min(300px, calc(100vw - 32px));
    max-height: min(72dvh, 560px);
    inset-inline-end: auto;
    right: 12px;
    left: auto;
    padding: 10px;
  }

  .more-navigation {
    position: static;
  }

  .more-navigation[open] .more-panel {
    width: min(320px, calc(100vw - 24px));
  }

  .landing-guide-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-guide-list p {
    font-size: 16px;
  }
}

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

/* Keep frequent controls comfortable to tap, especially on phones. */
.brand {
  min-height: 44px;
}

.icon-button {
  min-width: 44px;
  min-height: 44px;
}

.header-actions .theme-toggle {
  min-width: 44px;
  min-height: 44px;
  height: auto;
  padding: 0;
}

summary {
  min-height: 44px;
}

.landing-masthead > a,
.research-note a,
.learn-credit a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-block: 6px;
}

.answer-tools .icon-button,
.exam-tools .icon-button,
.exam-part-tabs button,
.mobile-text-tabs button,
.mobile-nav button {
  min-width: 44px;
  min-height: 44px;
}