/* Phase 17: one restrained visual language across the existing vanilla app. */
:root {
  --most-primary: #1267d6;
  --most-primary-strong: #0c4fa9;
  --most-background: #f2f7fd;
  --most-surface: #fff;
  --most-ink: #102244;
  --most-secondary: #435773;
  --most-helper: #586b84;
  --most-border: #d8e4f2;
  --most-success: #167a54;
  --most-warning: #9b5518;
  --most-missed: #b33f40;
  --most-radius: 18px;
  --most-button-radius: 12px;
  --most-shadow: 0 8px 24px rgba(20, 62, 114, .07);
  --cefr-a1: #3b82f6;
  --cefr-a2: #087d96;
  --cefr-b1: #7445cf;
  --cefr-b2: #4c50c9;
  --blue: var(--most-primary);
  --blue-dark: var(--most-primary-strong);
  --ink: var(--most-ink);
  --muted: var(--most-secondary);
  --line: var(--most-border);
  --bg: var(--most-background);
  --shadow: var(--most-shadow);
}
html { overflow-x: clip; }
body { color: var(--most-ink); background: var(--most-background); }
.main, .workspace, .start-dashboard, .plan-shell { min-width: 0; }
.workspace-hero, .paper-card, .tool-card, .v3-category-card,
.curriculum-level-card, .grammar-level-card, .category-card,
.plan-panel, .sidebar .sidebar-progress {
  border-color: var(--most-border);
  box-shadow: var(--most-shadow);
}
:where(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--most-primary) !important;
  outline-offset: 2px;
}
:where(.primary, .plan-button) { border-radius: var(--most-button-radius); }
:where(.primary, .secondary, .danger, .plan-button, .start-plan) { min-height: 44px; }
:where(.workspace, .plan-shell, .start-dashboard) [lang="ru"] {
  color: var(--most-helper);
}
.sidebar .nav-item .ml-bi-ru, .start-page .sidebar .start-nav-label > small {
  color: var(--most-helper);
}

/* CEFR chips share the same identity in setup, plan, Grammar and Vocabulary. */
:where(.curriculum-level-card, .grammar-level-card, .plan-level[data-plan-level]) {
  --level-accent: var(--cefr-a1);
  --level-tint: #edf5ff;
}
:where(.curriculum-level-card, .grammar-level-card, .plan-level)[data-level="A2"],
.plan-level[data-plan-level="A2"] { --level-accent: var(--cefr-a2); --level-tint: #e6f7fa; }
:where(.curriculum-level-card, .grammar-level-card, .plan-level)[data-level="B1"],
.plan-level[data-plan-level="B1"] { --level-accent: var(--cefr-b1); --level-tint: #f1ebff; }
:where(.curriculum-level-card, .grammar-level-card, .plan-level)[data-level="B2"],
.plan-level[data-plan-level="B2"] { --level-accent: var(--cefr-b2); --level-tint: #eeeeff; }
.grammar-level-card[data-english-level="A2"], .grammar-level-card[data-grammar-level="A2"] { --level-accent: var(--cefr-a2); --level-tint: #e6f7fa; }
.grammar-level-card[data-english-level="B1"], .grammar-level-card[data-grammar-level="B1"] { --level-accent: var(--cefr-b1); --level-tint: #f1ebff; }
.grammar-level-card[data-grammar-level="B2"] { --level-accent: var(--cefr-b2); --level-tint: #eeeeff; }
.curriculum-level-card, .grammar-level-card {
  position: relative; border-top: 3px solid var(--level-accent);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.curriculum-level-badge, .grammar-level-badge {
  background: var(--level-tint); color: var(--level-accent);
}
.curriculum-level-stats span[lang="ru"] { opacity: 1; }
.plan-level[data-plan-level] { border-bottom: 3px solid var(--level-accent); }
.plan-level[data-plan-level].is-selected {
  border-color: var(--level-accent); background: var(--level-tint);
  color: var(--most-ink);
}
.plan-dashboard-route span { border-color: var(--most-border); }
.plan-route-arrow { color: var(--most-helper); }
.plan-dashboard-route span[data-cefr] {
  color: var(--level-accent, var(--most-primary));
  border-color: currentColor; background: var(--level-tint, #edf5ff);
  font-weight: 800;
}
.plan-dashboard-route span[data-cefr="A2"] { --level-accent: var(--cefr-a2); --level-tint: #e6f7fa; }
.plan-dashboard-route span[data-cefr="B1"] { --level-accent: var(--cefr-b1); --level-tint: #f1ebff; }
.plan-dashboard-route span[data-cefr="B2"] { --level-accent: var(--cefr-b2); --level-tint: #eeeeff; }

/* Approved illustrated icon set: one unmasked image per task type. */
.most-task-icon, .note-type-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px;
  background: #f1f7ff;
}
.most-task-icon::before, .note-type-icon::before {
  content: ""; width: 43px; height: 43px;
  background: var(--icon-url, url("/public/most-learn/approved-icons/task-exercise.png")) center / contain no-repeat;
}
.most-task-icon[data-kind="grammar"] { --icon-url: url("/public/most-learn/approved-icons/task-grammar.png"); }
.most-task-icon[data-kind="vocabulary_topic"] { --icon-url: url("/public/most-learn/approved-icons/task-vocabulary.png"); }
.most-task-icon[data-kind="review"], .most-task-icon[data-kind="repetition"] { --icon-url: url("/public/most-learn/approved-icons/task-review-repeat.png"); }
.most-task-icon[data-kind="exercise"] { --icon-url: url("/public/most-learn/approved-icons/task-exercise.png"); }
.most-task-icon[data-kind="reading"], .note-type-icon--lesen { --icon-url: url("/public/most-learn/approved-icons/task-reading.png"); }
.most-task-icon[data-kind="listening"], .note-type-icon--hoeren { --icon-url: url("/public/most-learn/approved-icons/task-listening.png"); }
.most-task-icon[data-kind="writing"], .note-type-icon--schreiben { --icon-url: url("/public/most-learn/approved-icons/task-writing.png"); }
.most-task-icon[data-kind="speaking"], .most-task-icon[data-kind="dialog"] { --icon-url: url("/public/most-learn/approved-icons/task-speaking.png"); }
.most-task-icon[data-kind="quiz"], .most-task-icon[data-kind="test"] { --icon-url: url("/public/most-learn/approved-icons/task-quiz.png"); }
.most-task-icon[data-kind="error_journal"], .note-type-icon--fehler { --icon-url: url("/public/most-learn/approved-icons/task-error-journal.png"); }
.plan-today-task[data-state="completed"] {
  border-color: #b8dece; background: #f8fdfa;
}
.plan-today-task[data-state="completed"] .most-task-icon {
  background: #e5f6ed;
}
.plan-today-task[data-state="in_progress"] { border-left: 4px solid var(--most-primary); }
.plan-today-task .plan-task-main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.plan-today-task .plan-task-main > div { min-width: 0; }
.plan-today-task h3 { overflow-wrap: anywhere; color: var(--most-ink); line-height: 1.28; }
.plan-today-task .plan-eyebrow { color: var(--most-primary-strong); font-weight: 800; }
.plan-today-task .plan-task-main p { color: var(--most-secondary); }
.plan-today-task .plan-task-status { font-weight: 750; color: var(--most-secondary); }
.plan-today-task[data-state="completed"] .plan-task-status { color: var(--most-success); }
.plan-reschedule { border-left: 4px solid var(--most-warning); }
.plan-reschedule h3 { color: var(--most-ink); }
.plan-reschedule .plan-mascot, .plan-dashboard-reviews .plan-mascot { float: right; width: 72px; height: 72px; margin: 0 0 8px 12px; }
.plan-dashboard-next { border-top: 3px solid var(--most-primary); }
.plan-dashboard-hero { background: linear-gradient(110deg,#fff,#edf6ff); }
.plan-dashboard-percent { box-shadow: inset 0 0 0 1px #fff; }
.plan-dashboard-bar span { background: var(--most-primary); }
.plan-today > header { position: relative; overflow: hidden; background: linear-gradient(110deg,#fff,#edf6ff); }
.plan-today > header.is-complete { border-top: 4px solid var(--most-success); background: #f4fcf8; }
.plan-today > header > :not(.plan-mascot) { position: relative; z-index: 1; }
.plan-mascot { width: 104px; height: 104px; object-fit: contain; flex: none; pointer-events: none; }
.plan-hero img[data-mascot-state="plan"] { mix-blend-mode: normal; }
.plan-dashboard-hero .plan-mascot { width: 110px; height: 110px; }
.plan-today > header .plan-mascot { position: absolute; width: 90px; height: 90px; right: 22px; top: 16px; opacity: .86; }
.plan-today > header h2, .plan-today > header p { max-width: calc(100% - 110px); }
.plan-dashboard-hero .plan-dashboard-percent { margin-left: auto; }

/* Start: make the plan a clear, connected primary action. */
.start-journey {
  align-items: center; padding: 21px 23px; margin: 20px 0 16px;
  border: 1px solid var(--most-border); border-radius: 20px;
  background: #f8fbff; box-shadow: 0 5px 20px rgba(20,62,114,.045);
}
.start-journey > div { min-width: 0; align-self: center; }
.start-journey h2 { color: var(--most-ink); }
.start-journey p { color: var(--most-secondary); font-weight: 550; }
.start-plan {
  flex: 0 1 258px; min-width: 210px; padding: 10px 14px;
  gap: 9px; border: 1px solid #bdd6f3; border-radius: 16px;
  background: #fff; box-shadow: 0 5px 14px rgba(20,62,114,.08);
  color: var(--most-primary-strong); transition: border-color .16s, transform .16s, box-shadow .16s;
}
.start-plan img { flex: none; width: 54px; height: 54px; object-fit: contain; }
.start-plan-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.start-plan-label .start-primary { font-size: 15px; line-height: 1.15; }
.start-plan-label .start-ru { font-size: 11px; line-height: 1.2; color: var(--most-secondary); }
.start-plan .start-plan-arrow { margin-left: auto; font-size: 20px; }
.start-plan:hover { border-color: var(--most-primary); transform: translateY(-2px); box-shadow: 0 9px 20px rgba(20,62,114,.12); }
.start-dashboard .start-ru { color: var(--most-helper); }
.start-hero .start-robot {
  right: 0; bottom: 0; height: 100%; max-width: 45%;
  object-fit: contain; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 65% 67% at 50% 52%, #000 46%, transparent 88%);
  mask-image: radial-gradient(ellipse 65% 67% at 50% 52%, #000 46%, transparent 88%);
}
.start-progress .start-ru { color: #d5eaff; }
.start-course { box-shadow: var(--most-shadow); }

#most-learn-sync-status:not([hidden]) {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  max-width: min(360px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid #deb6a8; border-radius: 12px;
  background: #fff9f6; color: #713e2c;
  box-shadow: var(--most-shadow); font: 600 12px/1.45 "Golos Text", sans-serif;
}

/* Notes: recognizable line icons and calmer readable cards. */
.notebook-category-grid .category-card { border-radius: var(--most-radius); }
.notebook-category-grid .category-card > span:first-child {
  width: 50px; height: 50px; font-size: 0;
}
.notebook-category-grid .category-card .note-type-icon { background: #f1f7ff !important; }
.notebook-category-grid .category-card strong { color: var(--most-ink); }
.notebook-category-grid .category-card small { color: var(--most-secondary); font-weight: 600; }
.v3-category-icon { font-size: 0; }
.v3-category-icon::before {
  content: ""; display: block; width: 42px; height: 42px;
  background: url("/public/most-learn/approved-icons/task-vocabulary.png") center/contain no-repeat;
}
.v3-category-icon[data-category-icon="structures"]::before {
  background-image: url("/public/most-learn/approved-icons/task-grammar.png");
}
.v3-category-icon[data-category-icon="writing"]::before {
  background-image: url("/public/most-learn/approved-icons/task-writing.png");
}

.sidebar .nav-item .nav-asset { width: 30px; height: 30px; object-fit: contain; }
.sidebar .nav-item { color: var(--most-secondary); }
.sidebar .nav-item.active { color: var(--most-primary-strong); }
.sidebar .nav-item .ml-bi-label, .sidebar .nav-item .start-nav-label { font-weight: 700; }
.v3-category-card p, .v3-category-card small, .grammar-level-card small,
.curriculum-level-card small { color: var(--most-secondary); }

/* One predictable mobile navigation, with room for every section. */
@media (max-width: 760px) {
  .app-shell { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .sidebar {
    height: calc(80px + env(safe-area-inset-bottom, 0px));
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    background: var(--most-surface); border-top: 1px solid var(--most-border);
  }
  .sidebar .brand, .sidebar .sidebar-bottom { display: none; }
  .sidebar .nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(52px, 1fr);
    grid-template-columns: none; align-items: stretch; gap: 2px;
    height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  }
  .sidebar .nav-item {
    min-width: 0; min-height: 64px; height: 100%; padding: 5px 2px;
    border-radius: 11px; gap: 4px; font-size: 10px; line-height: 1.12;
  }
  .sidebar .nav-item .nav-asset { flex: 0 0 30px; width: 30px; height: 30px; }
  .sidebar .nav-item .ml-bi-label, .start-page .sidebar .nav-item .start-nav-label {
    display: block; text-align: center; width: 100%; font-size: 10px;
  }
  .sidebar .nav-item .ml-bi-ru, .start-page .sidebar .start-nav-label > small { display: none; }
  .sidebar .nav-item .ml-bi-de, .start-page .sidebar .start-nav-label > span {
    display: block; width: 100%; text-align: center;
    overflow-wrap: normal; word-break: normal; hyphens: auto;
  }
  .sidebar .nav-item.active { background: #eaf3ff; color: var(--most-primary-strong); }
  #most-learn-sync-status { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .plan-today-return { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: 12px; }
  .start-journey { flex-direction: column; align-items: stretch; }
  .start-journey { padding: 17px; margin: 15px 0 13px; }
  .start-hero .start-robot { right: 0; bottom: 0; height: 90%; max-width: 47%; }
  .start-plan { flex: none; min-width: 0; width: 100%; margin: 4px 0 0; }
  .plan-dashboard-hero .plan-mascot { display: none; }
  .plan-today-actions { width: 100%; }
  .plan-today-actions .plan-button { white-space: normal; }
  .workspace, .plan-shell { overflow-wrap: anywhere; }
}
@media (max-width: 359px) {
  .app-shell { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  .sidebar { height: calc(128px + env(safe-area-inset-bottom, 0px)); }
  .sidebar .nav {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(2, 1fr);
    overflow: visible;
  }
  .sidebar .nav-item { min-height: 54px; }
  #most-learn-sync-status { bottom: calc(135px + env(safe-area-inset-bottom, 0px)); }
  .plan-today-return { bottom: calc(139px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}