@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;

  /* --- surfaces & ink --- */
  --paper: #F1F4EE;
  --panel: #FFFFFF;
  --panel-translucent: rgba(255,255,255,0.78);
  --hover: var(--paper);
  --ink: #16241C;
  --ink-soft: #55624F;
  --pine: #234D34;
  --line: #D7DED1;
  /* Backdrop behind a map before its tiles arrive. */
  --map-bg: #EAEEE5;
  --checker: #E7EBE2;

  /* --- accent (UI chrome: buttons, links, selection) --- */
  --control: #7A2E6B;
  --control-tint: #F3E9F1;
  --on-control: #FFFFFF;
  --focus-ring: var(--control);

  --course-purple: #A526FFE4;

  /* --- notices --- */
  --danger: #B42318;
  --warn-bg: #FFF4D6;
  --warn-border: #B8860B;

  /* --- elevation & motion --- */
  --shadow-resting: 0 1px 0 rgba(22,36,28,0.03), 0 4px 16px -12px rgba(22,36,28,0.15);
  --shadow-raised: 0 4px 24px -12px rgba(22,36,28,0.25);
  --shadow-modal: 0 20px 60px -20px rgba(22,36,28,0.4);
  --shadow-hover: 0 3px 10px -5px rgba(22,36,28,0.35);
  --shadow-seg: 0 1px 3px rgba(22,36,28,0.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
}

.app-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 40px;
  background: var(--panel-translucent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-resting);
}
@media (max-width: 640px) {
  .app-header { padding: 14px 16px; }
}

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo span { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: var(--fs-xl); }
.logo svg { color: var(--control); }

.seg {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
}
.seg > button {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; margin: 0; padding: 6px 14px;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; white-space: nowrap;
  color: var(--ink-soft); background: transparent;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.seg > button:hover { color: var(--ink); }
.seg > button.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-seg); }
.seg-fill { display: flex; width: 100%; }
.seg-fill > button { flex: 1; }
@media (max-width: 760px) {
  /* finger-sized on touch screens */
  .seg > button { min-height: 36px; }
}

.sm-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; text-align: left; line-height: 1.25;
}
.sm-trigger:disabled { opacity: .5; cursor: default; }
.sm-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-chevron {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: var(--ink-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease-out);
}
.sm-trigger[aria-expanded="true"] { border-color: var(--control); }
.sm-trigger[aria-expanded="true"] .sm-chevron { transform: rotate(180deg); }

.sm-list {
  position: fixed; z-index: 1000;
  max-width: calc(100vw - 16px); max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  padding: 5px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-raised);
  font-size: var(--fs-sm); color: var(--ink);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s var(--ease-out);
}
.sm-list.sm-up { transform: translateY(4px); }
.sm-list::-webkit-scrollbar { width: 8px; }
.sm-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid var(--panel); }
.sm-list.open { opacity: 1; transform: none; }
.sm-list:focus { outline: none; }
.sm-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 10px 9px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.sm-opt.is-active { background: var(--paper); }
.sm-opt[aria-selected="true"] { font-weight: 500; }
.sm-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
.sm-check {
  width: 15px; height: 15px; flex-shrink: 0; visibility: hidden;
  fill: none; stroke: var(--control); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.sm-opt[aria-selected="true"] .sm-check { visibility: visible; }
@media (max-width: 760px) {
  .sm-opt { padding: 12px 10px 12px 12px; } /* finger-sized */
}
@media (prefers-reduced-motion: reduce) {
  .sm-list, .sm-chevron { transition: none; }
}

.app-nav { display: flex; align-items: center; flex-shrink: 0; }
.app-nav-links { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.app-nav-link {
  position: relative; overflow: hidden;
  display: flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  min-height: 38px; padding: 8px 14px;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
  color: var(--ink-soft); background: transparent; border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s var(--ease-out);
}
.app-nav-link:hover { background: var(--hover); color: var(--ink); }
.app-nav-link:active { transform: scale(0.96); }
.app-nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }

.chevron-btn {
  position: relative; overflow: hidden; flex-shrink: 0;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-soft); background: var(--panel); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s var(--ease-out);
}
.chevron-btn:hover { border-color: var(--control); color: var(--control); }
.chevron-btn:active { transform: scale(0.9); }
.chevron-icon { display: block; transform: rotate(90deg); transition: transform .35s var(--ease-out); }
.chevron-btn[aria-expanded="true"] .chevron-icon { transform: rotate(0deg); }
.app-nav-toggle { display: none; }

.app-nav-drop .app-nav-toggle { display: flex; }
.app-nav-drop .app-nav-links {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  flex-wrap: wrap; justify-content: center; gap: 6px;
  max-height: 0; padding: 0 16px; opacity: 0; overflow: hidden; pointer-events: none;
  background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-raised);
  transition: max-height .35s var(--ease-out), opacity .28s ease, padding .35s var(--ease-out);
}
.app-nav-drop.open .app-nav-links { max-height: 220px; padding: 10px 16px 12px; opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .app-nav-link, .chevron-btn, .chevron-icon, .app-nav-links { transition: none; }
}

/* ---------- Language picker ---------- */
.lang-picker { position: relative; display: inline-flex; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 7px 12px 7px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s var(--ease-out);
}
.lang-btn:hover { border-color: var(--ink-soft); }
.lang-btn:active { transform: scale(0.97); }
.lang-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--control-tint); border-color: var(--control); }
.lang-picker.open .lang-btn { border-color: var(--control); }
.lang-globe { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--control); stroke-width: 1.8; stroke-linecap: round; }
.lang-chevron {
  width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: var(--ink-soft); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out);
}
.lang-picker.open .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1000;
  min-width: 190px; margin: 0; padding: 5px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-raised);
  font-size: var(--fs-sm); color: var(--ink);
  animation: lang-menu-in .14s var(--ease-out);
}
.lang-menu[hidden] { display: none; }
.lang-menu:focus { outline: none; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.lang-opt {
  display: grid; grid-template-columns: 1fr auto 16px; align-items: center; gap: 10px;
  padding: 9px 10px 9px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.lang-opt.is-active { background: var(--paper); }
.lang-opt[aria-selected="true"] { font-weight: 600; }
.lang-code {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-2xs); letter-spacing: .04em;
  color: var(--ink-soft); padding: 2px 6px; border-radius: 6px; background: var(--paper);
}
.lang-opt.is-active .lang-code { background: var(--panel); }
.lang-check {
  width: 16px; height: 16px; fill: none; stroke: var(--control); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; visibility: hidden;
}
.lang-opt[aria-selected="true"] .lang-check { visibility: visible; }

/* Full-width variant for settings forms (Profile). */
.lang-picker-field .lang-btn { min-width: 170px; justify-content: flex-start; padding: 10px 14px; background: var(--paper); }
.lang-picker-field .lang-current { flex: 1; text-align: left; }

@media (pointer: coarse) { .lang-opt { padding: 12px 10px 12px 12px; } }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } .lang-chevron, .lang-btn { transition: none; } }