/* FlashDeutsch shell — design tokens + the shared header.
 *
 * Loaded by every page through one tag. This file also carries the design tokens, so it
 * replaces the separate theme.css that Phase 2 was going to create: one file, one tag.
 *
 * Tokens are lifted verbatim from apps/deutsch-hub/index.html so the shell is visually
 * identical to the hub's existing nav. Pages that still declare their own copies keep
 * working -- their inline <style> comes after this file and simply wins. As each page
 * drops its copy it inherits these instead.
 */

/* ---------- tokens: light is the default, matching <html data-theme="light"> ---------- */
:root {
  --bg: #edf5f1;
  --card: #fff;
  --line: #d4e2db;
  --ink: #0d2119;
  --accent: #087f5b;
  --accent-bright: #10a777;
  --accent-ink: #fff;
  --lime: #65a30d;
  --teal: #0f8b8d;
  --amber: #b7791f;
  --dot: rgba(13, 33, 25, .065);
  --glow: rgba(8, 127, 91, .13);
  --shadow: 0 1px 2px rgba(13, 33, 25, .04), 0 18px 40px -28px rgba(13, 33, 25, .36);
  --display: "Syne", system-ui, sans-serif;
  --body: "DM Sans", "Noto Sans Bengali", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --max: 1200px;
  --radius: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --fd-header-h: 56px;
}

[data-theme="dark"] {
  --bg: #06110d;
  --card: #0b1d16;
  --line: #19382c;
  --ink: #e8f5ef;
  --accent: #35dda3;
  --accent-bright: #5aebba;
  --accent-ink: #032117;
  --lime: #a3e635;
  --teal: #49d6d8;
  --amber: #f2bd5b;
  --dot: rgba(255, 255, 255, .045);
  --glow: rgba(53, 221, 163, .14);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 42px -24px rgba(0, 0, 0, .92);
}

/* Reserve the header's space in CSS, not JS. The header is position:fixed and the JS
 * injects it after parse, so without this the page would jump when the script runs. */
body {
  padding-block-start: var(--fd-header-h);
}

/* ---------- header ----------
 * The shell is dropped onto pages whose CSS it does not control, and those pages style
 * bare element selectors. flashcards ships
 *   header { width:100%; max-width:760px; padding:18px 20px 8px; display:flex }
 * which matches .fd-header too, because .fd-header IS a <header>. The class selector
 * outranks it, but only for properties actually declared here -- anything left unset is
 * inherited from the page's rule. So the box model is stated explicitly rather than
 * relied upon: without `display:block` the page's `display:flex` made .fd-inner a flex
 * item and shrank it to 461px inside a 660px bar.
 *
 * Same reasoning for the resets on the elements inside it.
 */
.fd-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
  height: var(--fd-header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  font-family: var(--body);
  color: var(--ink);
}

.fd-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max);
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
}

/* Neutralise page rules on the bare element selectors the shell uses inside itself.
 *
 * These are descendant selectors (0,1,1), so they outrank the plain class rules above
 * (0,1,0). That is deliberate for list-style and padding -- but it also silently killed
 * `.fd-nav { margin-inline-end: auto }`, the auto margin that pushes the tools group to
 * the right edge, collapsing the whole header leftward. Anything below that these resets
 * would otherwise clobber has to be restated at matching or higher specificity.
 */
.fd-header ul,
.fd-header li { list-style: none; margin: 0; padding: 0 }
.fd-header a { text-decoration: none }
.fd-header button { font-family: inherit; margin: 0; min-width: 0; min-height: 0 }
.fd-header img { max-width: none }

/* Restated after the resets, at 0,2,0, so the layout survives them.
 *
 * The min-* pins are the third instance of the same lesson: flashcards ships
 *   button { min-width: 48px; min-height: 48px }
 * as a touch-target floor, and a floor beats `height` no matter the specificity of the
 * height rule. The shell has to state every box property a host page might set on a bare
 * element selector, not just the ones it cares about. 34px still clears the WCAG 2.5.8
 * AA target of 24px comfortably.
 */
.fd-header .fd-nav { margin-inline-end: auto; margin-block: 0 }
.fd-header .fd-icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px }
.fd-header .fd-lang button { min-width: 34px; min-height: 26px; height: 26px }
.fd-header .fd-signin { height: 34px; min-height: 34px }
.fd-header .fd-account > summary { height: 34px; min-height: 34px }

.fd-logo {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.fd-logo .fd-blink { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .fd-logo .fd-blink { animation: fd-blink 1.2s steps(1) infinite; }
  @keyframes fd-blink { 50% { opacity: 0 } }
}

.fd-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}

.fd-nav a {
  display: block;
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}

.fd-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.fd-nav a[aria-current="page"] { color: var(--accent); background: var(--glow); font-weight: 600; }

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

.fd-lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--card) 58%, transparent);
}

.fd-lang button {
  min-width: 34px;
  padding: 0 8px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.fd-lang button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.fd-icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.fd-icon-btn:hover { border-color: var(--accent); background: var(--glow); }
.fd-icon-btn svg { width: 15px; height: 15px; }

/* ---------- auth ---------- */
.fd-signin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.fd-signin:hover { border-color: var(--accent); background: var(--glow); }
.fd-signin svg { width: 14px; height: 14px; }

.fd-account { position: relative; }

.fd-account > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  max-width: 168px;
}

.fd-account > summary::-webkit-details-marker { display: none }
.fd-account > summary:hover { border-color: var(--accent) }

.fd-avatar { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; flex: none }

.fd-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-popover {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 7px);
  min-width: 172px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  display: grid;
  gap: 2px;
}

.fd-popover a,
.fd-popover button {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.fd-popover a:hover,
.fd-popover button:hover { background: var(--glow); color: var(--accent) }

/* ---------- responsive: nav collapses under 720px ---------- */
.fd-burger { display: none }

@media (max-width: 720px) {
  .fd-inner { padding: 0 18px; gap: 12px }
  /* Both need .fd-header scoping to clear the element resets above -- a media query adds
   * no specificity, so `.fd-burger` is still 0,1,0 and loses its auto margin to
   * `.fd-header button { margin: 0 }`, and `.fd-nav` loses the dropdown's padding to
   * `.fd-header ul { padding: 0 }`. */
  .fd-header .fd-burger { display: grid; margin-inline-end: auto }
  .fd-header .fd-nav {
    position: fixed;
    inset: var(--fd-header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 18px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .fd-nav[hidden] { display: none }
  .fd-nav a { padding: 11px 12px; font-size: 15px }
  .fd-account-name { display: none }
  .fd-account > summary { padding-inline: 5px }
}

@media (max-width: 420px) {
  .fd-lang button { min-width: 32px; padding: 0 6px }
}

@media (prefers-reduced-motion: reduce) {
  .fd-header *, .fd-header *::before, .fd-header *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- retire the per-page headers ----------
 * Each page shipped its own header (hub .nav, docs .topbar, flashcards .app-header) and
 * its own inline JS binds to elements inside them -- #themeToggle, #sunIcon, #hamburger,
 * #sign-in-btn, #user-info and friends. Deleting the markup would make those
 * getElementById calls return null and throw.
 *
 * So slice 0 hides them instead of deleting them. One visible header, no JS errors, and
 * the change is one rule to revert. The markup and its dead JS come out per page in a
 * later slice, once each page's script is refactored to stop reaching into the header.
 *
 * Theme stays in sync for free: the hidden toggle cannot be clicked, and the shell writes
 * the same `flashdeutsch-theme` key and the same data-theme attribute the pages already use.
 */
.fd-has-shell .app-header,
.fd-has-shell .topbar,
.fd-has-shell nav.nav,
.fd-has-shell .mobile-menu { display: none !important; }
