/* ============================================================================
   M3 Expressive integration layer (real Material web components).

   This file wires the vendored Material 3 Expressive component library
   (vendor/material — npm package `material` v3.8.0, MIT) into the app:
   · real <m-progress shape="wavy"> squiggle progress for the reading bar
   · real <m-loading-indicator> for the boot / loading state
   The library theme (M3E “ocean” scheme) is mapped onto the app's
   `--md-sys-color-*` roles in css/tokens.css, so custom app components and
   real Material components share one M3 scheme in light and dark.

   Motion: Material 3 Expressive spring curves are exposed as motion tokens
   here and used for the app-level integration transitions; component-internal
   motion (loading indicator morph, wavy progress) ships with the library.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Boot / loading state — real M3 loading indicator (expressive morphing shape)
   --------------------------------------------------------------------------- */
.boot-loader {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-lightbox) + 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  transition: opacity var(--md-sys-motion-duration-medium2)
      var(--md-sys-motion-easing-emphasized-decelerate),
    visibility 0s linear var(--md-sys-motion-duration-medium2);
  /* Safety: never trap the app behind the loader if a script fails. */
  animation: boot-loader-auto-hide 0s linear 4s forwards;
}
.boot-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-loader-label {
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
@keyframes boot-loader-auto-hide {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ---------------------------------------------------------------------------
   Reading progress — real M3 Expressive wavy linear progress indicator
   --------------------------------------------------------------------------- */
.learn-reader ~ * .reading-progress-bar,
.reading-progress-bar {
  height: auto;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.reading-progress-bar > m-progress {
  display: block;
  width: 100%;
  --mtrl-sys-color-primary: var(--md-sys-color-primary);
}

/* Reduced motion: keep the indicator, clamp the app-level transitions. */
@media (prefers-reduced-motion: reduce) {
  .boot-loader {
    transition: none;
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Subject switch — M3 loading transition (real Material loading indicator)
   --------------------------------------------------------------------------- */
.subject-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space200);
  padding: var(--md-sys-measurement-space300);
  text-align: center;
  background: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard),
    visibility 0s linear var(--md-sys-motion-duration-short4);
}
.subject-loader.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.subject-loader-label {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
}
@media (prefers-reduced-motion: reduce) {
  .subject-loader { transition: none; }
}

/* ---------------------------------------------------------------------------
   Material selectors — real M3 <m-select> elements (vendor/material)
   The host is a custom element, so it only needs layout sizing; the M3 text
   field / dropdown / menu rendering and motion come from the component.
   --------------------------------------------------------------------------- */
m-select {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
m-select.inline-chapter-select {
  display: flex;
  width: 100%;
  min-width: 0;
}
m-select.flash-chapter-select,
.field > m-select {
  display: flex;
  width: 100%;
}
m-select.cloze-select {
  display: inline-flex;
  width: auto;
  min-width: 180px;
  max-width: 100%;
  margin: var(--md-sys-measurement-space50);
  vertical-align: middle;
}
.cloze-item.correct m-select.cloze-select {
  --mtrl-sys-color-outline: var(--md-sys-color-tertiary);
  --mtrl-sys-color-primary: var(--md-sys-color-tertiary);
}
.cloze-item.wrong m-select.cloze-select {
  --mtrl-sys-color-outline: var(--md-sys-color-error);
  --mtrl-sys-color-primary: var(--md-sys-color-error);
}

/* Inline cloze / table selects: compact M3 dropdown so it reads as a token
   inside a sentence instead of a large empty form field. */
m-select.cloze-select {
  --mtrl-sys-color-outline: var(--md-sys-color-outline);
  width: 210px;
  min-width: 150px;
  max-width: 100%;
  margin: 0 var(--md-sys-measurement-space50);
  vertical-align: middle;
}
m-select.cloze-select::part(field),
m-select.cloze-select::part(text-field) {
  height: 40px;
  min-height: 40px;
}
m-select.cloze-select::part(input) {
  height: 40px;
  padding: 8px 12px;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  font-weight: var(--md-sys-typescale-weight-medium);
}
m-select.cloze-select::part(outline) {
  border-radius: var(--md-sys-shape-corner-small);
}
m-select.cloze-select::part(trailing-icon) {
  right: 8px;
  width: 20px;
  height: 20px;
}
m-select.cloze-select::part(input)::-webkit-input-placeholder { color: var(--md-sys-color-on-surface-variant); }
m-select.hero-select {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* Legacy layer leak: old native-select rules (.cloze-select, .inline-chapter-select)
   also match the custom <m-select> hosts, adding a second border + padding on top
   of the M3 text-field outline. Reset the hosts so exactly ONE M3 outline shows. */
m-select.cloze-select,
.cloze-item m-select.cloze-select,
m-select.inline-chapter-select,
.learn-reader m-select.inline-chapter-select,
m-select.flash-chapter-select,
m-select.hero-select,
.field > m-select {
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  min-height: 0;
}

/* White field background for the inline Material selects (single outline). */
m-select.cloze-select,
m-select.hero-select {
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-small);
}
m-select.cloze-select::part(field),
m-select.hero-select::part(field) {
  background: transparent;
}

/* White fill behind the inline dropdown (beat the earlier reset rule). */
.cloze-item m-select.cloze-select,
.cloze-item m-select.hero-select,
m-select.hero-select {
  background: var(--md-sys-color-surface-container-lowest);
}

/* ---------------------------------------------------------------------------
   Material sliders — real M3 <m-slider> elements (vendor/material)
   The component owns the expressive track/handle/state-layer motion
   (drag state layer, settling animation, value indicator); the host only
   needs layout sizing, and the component picks up the app's M3 colour roles
   through the --mtrl-sys-color-* mapping in css/tokens.css (light + dark).
   --------------------------------------------------------------------------- */
m-slider {
  display: block;
  width: 100%;
  min-width: 0;
  --mtrl-slider-color: var(--md-sys-color-primary);
}
m-slider:not(:defined) {
  min-height: var(--md-comp-target-size);
}
.rapid-calc-field m-slider,
.sandbox-control m-slider {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.sandbox-control m-slider {
  margin-block-start: var(--md-sys-measurement-space50);
}