/* Strata — material.css
 * Shared Material Design 3 foundation for every extension surface (popup,
 * options, reader/viewer, library, dictionary popup). Pure CSS — no external
 * library is loaded, so there are no CSP or bundle-size concerns.
 *
 * It defines:
 *   • the M3 colour system as design tokens (light + dark),
 *   • elevation (layered shadows), shape (radii), the 8dp spacing grid,
 *     the type scale, and standard motion easings/durations,
 *   • a handful of reusable component primitives (buttons, switches, ripple).
 *
 * Individual pages consume these tokens; they keep their own class names so the
 * JavaScript that drives them keeps working unchanged.
 */

/* ------------------------------------------------------------------ Tokens -- */
:root {
  /* Light scheme (default). Seeded from Strata's teal brand colour. */
  --m-primary: #006a5f;
  --m-on-primary: #ffffff;
  --m-primary-container: #9ff2e4;
  --m-on-primary-container: #00201c;
  --m-secondary: #4a635f;
  --m-on-secondary: #ffffff;
  --m-secondary-container: #cce8e2;
  --m-on-secondary-container: #05201c;
  --m-tertiary: #7d5700;
  --m-on-tertiary: #ffffff;
  --m-tertiary-container: #ffddb0;
  --m-on-tertiary-container: #271900;
  --m-error: #ba1a1a;
  --m-on-error: #ffffff;
  --m-error-container: #ffdad6;
  --m-on-error-container: #410002;

  --m-background: #f4fbf8;
  --m-on-background: #171d1b;
  --m-surface: #f4fbf8;
  --m-on-surface: #171d1b;
  --m-surface-variant: #dae5e1;
  --m-on-surface-variant: #3f4946;
  --m-outline: #6f7975;
  --m-outline-variant: #bec9c4;
  --m-inverse-surface: #2b3230;
  --m-inverse-on-surface: #ecf2ef;

  /* Surface container tones (M3 elevation-by-colour). */
  --m-surface-dim: #d5dbd8;
  --m-surface-bright: #f4fbf8;
  --m-surface-container-lowest: #ffffff;
  --m-surface-container-low: #eef4f1;
  --m-surface-container: #e8eeeb;
  --m-surface-container-high: #e2e9e5;
  --m-surface-container-highest: #dde3e0;

  /* State-layer opacities (M3 spec). */
  --m-state-hover: 0.08;
  --m-state-focus: 0.10;
  --m-state-press: 0.12;

  /* Shape scale. */
  --m-radius-xs: 4px;
  --m-radius-sm: 8px;
  --m-radius-md: 12px;
  --m-radius-lg: 16px;
  --m-radius-xl: 28px;
  --m-radius-full: 999px;

  /* 8dp spacing grid. */
  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 24px;
  --m-space-6: 32px;

  /* Elevation — layered shadows (M3 levels 1–5). */
  --m-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --m-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --m-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --m-elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);
  --m-elev-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.30);

  /* Motion — standard Material easing curves + durations. */
  --m-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --m-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --m-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --m-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --m-dur-short: 150ms;
  --m-dur-medium: 250ms;
  --m-dur-long: 300ms;

  --m-font: "Roboto", "Roboto Flex", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Dark scheme — applied via the OS preference or an explicit data-theme flag. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-primary: #52dbc9;
    --m-on-primary: #003731;
    --m-primary-container: #005048;
    --m-on-primary-container: #74f8e5;
    --m-secondary: #b0ccc6;
    --m-on-secondary: #1b3531;
    --m-secondary-container: #324b47;
    --m-on-secondary-container: #cce8e2;
    --m-tertiary: #f4bd6e;
    --m-on-tertiary: #422c00;
    --m-tertiary-container: #5e4100;
    --m-on-tertiary-container: #ffddb0;
    --m-error: #ffb4ab;
    --m-on-error: #690005;
    --m-error-container: #93000a;
    --m-on-error-container: #ffdad6;

    --m-background: #0e1513;
    --m-on-background: #dde3e0;
    --m-surface: #0e1513;
    --m-on-surface: #dde3e0;
    --m-surface-variant: #3f4946;
    --m-on-surface-variant: #bec9c4;
    --m-outline: #899390;
    --m-outline-variant: #3f4946;
    --m-inverse-surface: #dde3e0;
    --m-inverse-on-surface: #2b3230;

    --m-surface-dim: #0e1513;
    --m-surface-bright: #343b39;
    --m-surface-container-lowest: #090f0e;
    --m-surface-container-low: #171d1b;
    --m-surface-container: #1b211f;
    --m-surface-container-high: #252b29;
    --m-surface-container-highest: #303634;
  }
}
/* Explicit dark override (used by the reader, which is always a dark app frame). */
[data-theme="dark"] {
  --m-primary: #52dbc9;
  --m-on-primary: #003731;
  --m-primary-container: #005048;
  --m-on-primary-container: #74f8e5;
  --m-secondary: #b0ccc6;
  --m-on-secondary: #1b3531;
  --m-secondary-container: #324b47;
  --m-on-secondary-container: #cce8e2;
  --m-tertiary: #f4bd6e;
  --m-on-tertiary: #422c00;
  --m-tertiary-container: #5e4100;
  --m-on-tertiary-container: #ffddb0;
  --m-error: #ffb4ab;
  --m-on-error: #690005;
  --m-error-container: #93000a;
  --m-on-error-container: #ffdad6;
  --m-background: #0e1513;
  --m-on-background: #dde3e0;
  --m-surface: #0e1513;
  --m-on-surface: #dde3e0;
  --m-surface-variant: #3f4946;
  --m-on-surface-variant: #bec9c4;
  --m-outline: #899390;
  --m-outline-variant: #3f4946;
  --m-inverse-surface: #dde3e0;
  --m-inverse-on-surface: #2b3230;
  --m-surface-dim: #0e1513;
  --m-surface-bright: #343b39;
  --m-surface-container-lowest: #090f0e;
  --m-surface-container-low: #171d1b;
  --m-surface-container: #1b211f;
  --m-surface-container-high: #252b29;
  --m-surface-container-highest: #303634;
}

/* ------------------------------------------------------------- Ripple ------ */
/* Material touch ripple. material.js appends a <span class="md-ripple"> into any
   element carrying [data-ripple]; the element must be position:relative +
   overflow:hidden (the component styles below already ensure this). */
.md-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: currentColor;
  opacity: 0.28;
  animation: md-ripple-in var(--m-dur-long) var(--m-ease-standard) forwards;
}
@keyframes md-ripple-in {
  to { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .md-ripple { animation-duration: 1ms; }
}

/* ------------------------------------------------- Reusable components ------ */
/* Filled / tonal / text buttons. Optional: pages may keep their own .btn styles,
   but these give a consistent Material baseline anywhere they're used. */
.md-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-space-2);
  border: 0;
  border-radius: var(--m-radius-full);
  padding: 10px 20px;
  font-family: var(--m-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  color: var(--m-on-primary);
  background: var(--m-primary);
  transition: box-shadow var(--m-dur-short) var(--m-ease-standard),
              background-color var(--m-dur-short) var(--m-ease-standard),
              filter var(--m-dur-short) var(--m-ease-standard);
}
.md-btn:hover { box-shadow: var(--m-elev-1); filter: brightness(1.05); }
.md-btn:active { box-shadow: none; }
.md-btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.md-btn.tonal { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.md-btn.text { background: transparent; color: var(--m-primary); padding: 10px 12px; }
.md-btn.text:hover { background: color-mix(in srgb, var(--m-primary) 8%, transparent); box-shadow: none; filter: none; }

/* Icon button (48dp target, circular state layer). */
.md-icon-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--m-radius-full);
  background: transparent;
  color: var(--m-on-surface-variant);
  cursor: pointer;
  transition: background-color var(--m-dur-short) var(--m-ease-standard),
              color var(--m-dur-short) var(--m-ease-standard);
}
.md-icon-btn:hover { background: color-mix(in srgb, var(--m-on-surface) 8%, transparent); color: var(--m-on-surface); }
.md-icon-btn:disabled { opacity: .38; cursor: default; }

/* Material switch (M3 sizing: 52×32 track, 16→24 thumb). Pages wire the input;
   this markup pattern is <label><input><span class="md-track"><span class="md-thumb"/></span></label>. */
.md-switch { display: inline-flex; cursor: pointer; }
.md-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.md-track {
  position: relative;
  width: 52px; height: 32px;
  border-radius: var(--m-radius-full);
  background: var(--m-surface-container-highest);
  border: 2px solid var(--m-outline);
  transition: background-color var(--m-dur-short) var(--m-ease-standard),
              border-color var(--m-dur-short) var(--m-ease-standard);
}
.md-thumb {
  position: absolute;
  top: 50%; left: 8px;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--m-outline);
  transition: transform var(--m-dur-short) var(--m-ease-emphasized),
              width var(--m-dur-short) var(--m-ease-emphasized),
              height var(--m-dur-short) var(--m-ease-emphasized),
              margin var(--m-dur-short) var(--m-ease-emphasized),
              background-color var(--m-dur-short) var(--m-ease-standard);
}
.md-switch input:checked + .md-track { background: var(--m-primary); border-color: var(--m-primary); }
.md-switch input:checked + .md-track .md-thumb {
  transform: translateX(20px);
  width: 24px; height: 24px; margin-top: -12px; left: 4px;
  background: var(--m-on-primary);
}
.md-switch input:focus-visible + .md-track { outline: 2px solid var(--m-primary); outline-offset: 2px; }