/* m3.css — Material 3 Expressive shared design tokens & components */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0');
/* Material Icons Sharp — required by Shaka Player UI (navigate_next, settings, arrow_back_ios_new, etc.) */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Sharp');

/* ── MD3 Expressive Dark Tokens ── */
:root {
  /* Primary – violet */
  --md-sys-color-primary:           #D0BCFF;
  --md-sys-color-on-primary:        #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;

  /* Secondary */
  --md-sys-color-secondary:           #CCC2DC;
  --md-sys-color-on-secondary:        #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;

  /* Error */
  --md-sys-color-error:            #F2B8B5;
  --md-sys-color-error-container:  #8C1D18;

  /* Surfaces */
  --md-sys-color-surface:          #141218;
  --md-sys-color-surface-dim:      #141218;
  --md-sys-color-surface-container-lowest:  #0F0D13;
  --md-sys-color-surface-container-low:     #1D1B20;
  --md-sys-color-surface-container:         #211F26;
  --md-sys-color-surface-container-high:    #2B2930;
  --md-sys-color-surface-container-highest: #36343B;

  --md-sys-color-on-surface:         #E6E0E9;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-outline:            #938F99;
  --md-sys-color-outline-variant:    #49454F;

  /* Shapes */
  --md-sys-shape-extra-small: 4px;
  --md-sys-shape-small:       8px;
  --md-sys-shape-medium:      12px;
  --md-sys-shape-large:       16px;
  --md-sys-shape-extra-large: 28px;
  --md-sys-shape-full:        9999px;

  /* Type scale */
  --md-sys-typescale-display-font:   'Google Sans Display', sans-serif;
  --md-sys-typescale-body-font:      'Google Sans', sans-serif;

  /* Elevation (tonal) */
  --md-elevation-1: rgba(208,188,255,.05);
  --md-elevation-2: rgba(208,188,255,.08);
  --md-elevation-3: rgba(208,188,255,.11);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  min-height: 100%;
  background-color: var(--md-sys-color-surface-dim);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ── Material Symbols utility ── */
.icon {
  font-family: 'Material Symbols Rounded';
  font-size: 24px;
  line-height: 1;
  user-select: none;
  vertical-align: middle;
}

/* ── MD3 Filled Button ── */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: var(--md-sys-shape-full);
  font-family: var(--md-sys-typescale-body-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.md-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s;
  border-radius: inherit;
}
.md-btn:hover::before  { opacity: .08; }
.md-btn:active::before { opacity: .12; }
.md-btn:active         { transform: scale(.97); }

/* Filled */
.md-btn-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.md-btn-filled:hover { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15); }

/* Filled Tonal */
.md-btn-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Outlined */
.md-btn-outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

/* Text */
.md-btn-text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 12px;
}

/* ── MD3 Text Field (Outlined) ── */
.md-field {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.md-field label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  transition: .18s cubic-bezier(0.4,0,0.2,1);
  background: transparent;
  padding: 0 4px;
  line-height: 1;
}
.md-field input,
.md-field textarea {
  width: 100%;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-extra-small);
  padding: 16px;
  font-family: var(--md-sys-typescale-body-font);
  font-size: 16px;
  outline: none;
  transition: border-color .18s;
  caret-color: var(--md-sys-color-primary);
}
.md-field textarea { resize: vertical; min-height: 90px; padding-top: 20px; }
.md-field input:focus,
.md-field textarea:focus { border-color: var(--md-sys-color-primary); border-width: 2px; }

/* Float label when focused or has value */
.md-field input:focus ~ label,
.md-field input:not(:placeholder-shown) ~ label,
.md-field textarea:focus ~ label,
.md-field textarea:not(:placeholder-shown) ~ label {
  top: 0;
  font-size: 12px;
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container);
}
.md-field input:not(:focus):not(:placeholder-shown) ~ label,
.md-field textarea:not(:focus):not(:placeholder-shown) ~ label {
  color: var(--md-sys-color-on-surface-variant);
}

/* ── MD3 Card ── */
.md-card {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-extra-large);
  overflow: hidden;
}
.md-card-elevated {
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 100%, var(--md-sys-color-primary) 5%);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
}

/* ── Snackbar ── */
.md-snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  padding: 14px 20px;
  border-radius: var(--md-sys-shape-extra-small);
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: transform .3s cubic-bezier(0.4,0,0.2,1), opacity .3s;
  max-width: calc(100vw - 48px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-snackbar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Chip ── */
.md-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-full);
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  font-family: var(--md-sys-typescale-body-font);
}
.md-chip:hover { background: rgba(208,188,255,.08); }
.md-chip.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

/* ── Responsive layout helpers ── */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

@media (min-width: 600px) {
  .page { padding: 24px; }
}

/* ── Animation helpers ── */
@keyframes md-ripple {
  from { transform: scale(0); opacity: .3; }
  to   { transform: scale(4); opacity: 0; }
}
.ripple-host { overflow: hidden; position: relative; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  animation: md-ripple .5s ease-out forwards;
  transform-origin: center;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fade-in-up .3s cubic-bezier(0.4,0,0.2,1) both; }
.delay-1 { animation-delay: .05s; }
.delay-2 { animation-delay: .10s; }
.delay-3 { animation-delay: .15s; }
.delay-4 { animation-delay: .20s; }