/* AutoTextback · Material 3 (Expressive) design tokens + components.
   Hand-built from the M3 spec: color roles, type scale, shape, motion, state layers. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('../fonts/material-symbols-rounded.woff2') format('woff2');
  font-weight: 300 600;
  font-display: block;
}

/* ---------- Color roles (seed: indigo #4F3FD8) ---------- */
:root {
  color-scheme: light;
  --md-primary: #4535c6;
  --md-on-primary: #ffffff;
  --md-primary-container: #e4dfff;
  --md-on-primary-container: #1d0a8c;
  --md-primary-fixed-dim: #c6bfff;
  --md-secondary: #5d5b73;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e3dffa;
  --md-on-secondary-container: #1a1a2d;
  --md-tertiary: #006b5c;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #9ef3df;
  --md-on-tertiary-container: #00201b;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
  --md-warning-container: #ffe08f;
  --md-on-warning-container: #3c2f00;
  --md-surface: #fcf8ff;
  --md-surface-dim: #dcd8e3;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f6f2fc;
  --md-surface-container: #f0ecf7;
  --md-surface-container-high: #eae6f1;
  --md-surface-container-highest: #e4e1eb;
  --md-on-surface: #1c1a22;
  --md-on-surface-variant: #47454f;
  --md-outline: #787580;
  --md-outline-variant: #c9c4d1;
  --md-inverse-surface: #312f38;
  --md-inverse-on-surface: #f3eff9;
  --md-inverse-primary: #c6bfff;
  --md-scrim: #000000;
  --md-shadow: #000000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --md-primary: #c6bfff;
    --md-on-primary: #2a14a6;
    --md-primary-container: #3c2bbd;
    --md-on-primary-container: #e4dfff;
    --md-primary-fixed-dim: #c6bfff;
    --md-secondary: #c6c3dd;
    --md-on-secondary: #2f2e43;
    --md-secondary-container: #45445b;
    --md-on-secondary-container: #e3dffa;
    --md-tertiary: #82d6c3;
    --md-on-tertiary: #00382f;
    --md-tertiary-container: #005145;
    --md-on-tertiary-container: #9ef3df;
    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-warning-container: #574500;
    --md-on-warning-container: #ffe08f;
    --md-surface: #131219;
    --md-surface-dim: #131219;
    --md-surface-container-lowest: #0e0d14;
    --md-surface-container-low: #1c1a22;
    --md-surface-container: #201e26;
    --md-surface-container-high: #2a2931;
    --md-surface-container-highest: #35343c;
    --md-on-surface: #e5e0ec;
    --md-on-surface-variant: #c9c4d1;
    --md-outline: #928f9a;
    --md-outline-variant: #47454f;
    --md-inverse-surface: #e5e0ec;
    --md-inverse-on-surface: #312f38;
    --md-inverse-primary: #4535c6;
  }
}

/* ---------- Type, shape, motion, elevation ---------- */
:root {
  --md-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* M3 emphasized easing + an expressive spring for small spatial moves */
  --md-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --md-dur-short: 150ms;
  --md-dur-medium: 300ms;
  --md-dur-long: 500ms;

  --md-elev-1: 0 1px 2px rgb(0 0 0 / 0.14), 0 1px 3px 1px rgb(0 0 0 / 0.07);
  --md-elev-2: 0 1px 2px rgb(0 0 0 / 0.14), 0 2px 6px 2px rgb(0 0 0 / 0.08);
  --md-elev-3: 0 4px 8px 3px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.14);

  --gutter: 16px;
  --content-max: 600px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --md-dur-short: 1ms; --md-dur-medium: 1ms; --md-dur-long: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--md-font);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.01em;
  background: var(--md-surface);
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--md-primary); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type scale (M3 Expressive: heavier emphasized weights) */
.display-sm { font-size: 36px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }
.headline-lg { font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; }
.headline-md { font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -0.015em; }
.headline-sm { font-size: 24px; line-height: 32px; font-weight: 750; letter-spacing: -0.01em; }
.title-lg { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.005em; }
.title-md { font-size: 16px; line-height: 24px; font-weight: 700; }
.title-sm { font-size: 14px; line-height: 20px; font-weight: 700; }
.body-lg { font-size: 16px; line-height: 24px; }
.body-md { font-size: 14px; line-height: 20px; }
.body-sm { font-size: 12px; line-height: 16px; }
.label-lg { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.01em; }
.label-md { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.04em; }
.label-sm { font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; }
.muted { color: var(--md-on-surface-variant); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Icons ---------- */
.icon {
  font-family: 'Material Symbols Rounded';
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  flex: none;
}
.icon.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.icon.sm { font-size: 20px; }
.icon.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- State layer (hover / press) ---------- */
.state {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
}
.state::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-dur-short) linear;
  border-radius: inherit;
  pointer-events: none;
}
@media (hover: hover) { .state:hover::after { opacity: 0.08; } }
.state:active::after { opacity: 0.12; }
.state:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  --h: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 24px;
  border: 0;
  border-radius: var(--md-shape-full);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-radius var(--md-dur-medium) var(--md-spring), box-shadow var(--md-dur-short) linear,
    background-color var(--md-dur-short) linear, transform var(--md-dur-medium) var(--md-spring);
}
.btn .icon { font-size: 20px; }
.btn:active:not(:disabled) { border-radius: var(--md-shape-md); } /* expressive shape morph on press */
.btn:disabled { cursor: default; opacity: 0.38; }
.btn.lg { --h: 56px; padding: 0 28px; font-size: 16px; }
.btn.lg .icon { font-size: 24px; }
.btn.block { width: 100%; }
.btn.filled { background: var(--md-primary); color: var(--md-on-primary); }
@media (hover: hover) { .btn.filled:hover:not(:disabled) { box-shadow: var(--md-elev-1); } }
.btn.tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn.primary-tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.btn.outlined { background: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.btn.text { background: transparent; color: var(--md-primary); padding: 0 12px; }
.btn.danger { background: var(--md-error); color: var(--md-on-error); }
.btn.danger-text { background: transparent; color: var(--md-error); padding: 0 12px; }
.btn.sm { --h: 32px; padding: 0 16px; font-size: 13px; }

.icon-btn {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--md-shape-full);
  background: transparent;
  color: var(--md-on-surface-variant);
  flex: none;
}
.icon-btn.filled-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

.fab {
  position: fixed;
  right: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: var(--md-shape-lg);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: var(--md-elev-3);
  font-weight: 700;
  transition: border-radius var(--md-dur-medium) var(--md-spring);
}
.fab:active { border-radius: var(--md-shape-xl); }

/* ---------- Top app bar ---------- */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 64px;
  padding: 0 8px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: var(--md-surface);
  transition: background-color var(--md-dur-medium) linear;
}
.top-bar.scrolled { background: var(--md-surface-container); }
.top-bar .spacer { flex: 1; }

/* ---------- Progress ---------- */
.progress {
  height: 6px;
  border-radius: var(--md-shape-full);
  background: var(--md-primary-container);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--md-primary);
  transition: width var(--md-dur-long) var(--md-ease-emphasized);
}

/* ---------- Cards ---------- */
.card {
  border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-low);
  padding: 20px;
}
.card.elevated { background: var(--md-surface-container-low); box-shadow: var(--md-elev-1); }
.card.filled { background: var(--md-surface-container-highest); }
.card.outlined { background: var(--md-surface); box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.card.primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.card.tertiary { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.card.warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.card.error { background: var(--md-error-container); color: var(--md-on-error-container); }

/* ---------- Text fields (outlined) ---------- */
.field { position: relative; display: block; }
.field input, .field textarea {
  width: 100%;
  min-height: 56px;
  padding: 16px;
  border: 0;
  border-radius: var(--md-shape-sm);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--md-outline);
  font-size: 16px;
  outline: none;
  transition: box-shadow var(--md-dur-short) linear;
}
.field textarea { resize: vertical; line-height: 24px; min-height: 120px; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px var(--md-on-surface); }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 2px var(--md-primary); }
.field .label {
  position: absolute;
  left: 12px;
  top: -9px;
  padding: 0 4px;
  background: var(--field-bg, var(--md-surface));
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  pointer-events: none;
}
.field:focus-within .label { color: var(--md-primary); }
.field .lead { position: absolute; left: 16px; top: 16px; color: var(--md-on-surface-variant); pointer-events: none; }
.field .lead ~ input { padding-left: 52px; }
.field .supporting { display: flex; justify-content: space-between; gap: 12px; padding: 4px 16px 0; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.field.invalid input, .field.invalid textarea { box-shadow: inset 0 0 0 2px var(--md-error); }
.field.invalid .label, .field.invalid .supporting { color: var(--md-error); }

/* ---------- Search bar ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 8px 0 16px;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  transition: border-radius var(--md-dur-medium) var(--md-ease-emphasized), background-color var(--md-dur-short) linear;
}
.search-bar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--md-on-surface);
  font-size: 16px;
}
.search-bar input::placeholder { color: var(--md-on-surface-variant); }
.search-bar:focus-within { background: var(--md-surface-container-highest); }

/* ---------- Lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}
.list-item .content { flex: 1; min-width: 0; }
.list-item .headline { font-size: 16px; line-height: 24px; font-weight: 600; }
.list-item .supporting { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.list-item .trailing { color: var(--md-on-surface-variant); font-size: 12px; white-space: nowrap; }
.avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--md-shape-full);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  flex: none;
  font-weight: 700;
}

/* ---------- Switch ---------- */
.switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch .track {
  position: absolute;
  inset: 0;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-container-highest);
  box-shadow: inset 0 0 0 2px var(--md-outline);
  transition: background-color var(--md-dur-medium) linear, box-shadow var(--md-dur-medium) linear;
}
.switch .handle {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--md-outline);
  display: grid;
  place-items: center;
  transition: all var(--md-dur-medium) var(--md-spring);
}
.switch .handle .icon { font-size: 16px; opacity: 0; color: var(--md-on-primary-container); transition: opacity var(--md-dur-short) linear; }
.switch input:checked ~ .track { background: var(--md-primary); box-shadow: none; }
.switch input:checked ~ .handle { left: 36px; width: 24px; height: 24px; margin: -12px 0 0 -12px; background: var(--md-on-primary); }
.switch input:checked ~ .handle .icon { opacity: 1; }
.switch input:active ~ .handle { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.switch input:focus-visible ~ .track { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.switch input:disabled ~ * { opacity: 0.38; }

/* ---------- Radio ---------- */
.radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--md-primary-container);
  color: var(--md-on-primary);
  transition: background-color var(--md-dur-short) linear, transform var(--md-dur-medium) var(--md-spring);
}
.radio .icon { font-size: 18px; transform: scale(0); transition: transform var(--md-dur-medium) var(--md-spring); }
[aria-checked='true'] .radio, .radio.on { background: var(--md-primary); }
[aria-checked='true'] .radio .icon, .radio.on .icon { transform: scale(1); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface-container-low);
  box-shadow: inset 0 0 0 1px var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chip .icon { font-size: 18px; }
.chip.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }
.chip.good { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); box-shadow: none; }
.chip.warn { background: var(--md-warning-container); color: var(--md-on-warning-container); box-shadow: none; }
.chip.bad { background: var(--md-error-container); color: var(--md-on-error-container); box-shadow: none; }

/* ---------- Snackbar ---------- */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom) + var(--snackbar-offset, 0px));
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(calc(100vw - 2 * var(--gutter)), 560px);
  min-height: 48px;
  padding: 6px 8px 6px 16px;
  border-radius: var(--md-shape-sm);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  box-shadow: var(--md-elev-3);
  font-size: 14px;
  line-height: 20px;
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--md-dur-medium) var(--md-ease-emphasized), opacity var(--md-dur-short) linear;
}
.snackbar.open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.snackbar .msg { flex: 1; padding: 8px 0; }
.snackbar .btn.text { color: var(--md-inverse-primary); }

/* ---------- Dialog + bottom sheet (native <dialog>) ---------- */
dialog {
  border: 0;
  padding: 0;
  color: var(--md-on-surface);
  background: transparent;
  max-width: none;
  max-height: none;
}
dialog::backdrop { background: rgb(0 0 0 / 0.32); animation: fade-in var(--md-dur-medium) linear; }
@keyframes fade-in { from { opacity: 0; } }

dialog.m3-dialog {
  width: min(calc(100vw - 48px), 400px);
  margin: auto;
}
dialog.m3-dialog .surface {
  border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-high);
  padding: 24px;
  animation: dialog-in var(--md-dur-long) var(--md-ease-emphasized);
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(-16px) scale(0.96); } }
dialog.m3-dialog .dialog-icon { color: var(--md-secondary); display: flex; justify-content: center; margin-bottom: 16px; }
dialog.m3-dialog h2 { margin: 0 0 16px; }
dialog.m3-dialog .dialog-icon + h2 { text-align: center; }
dialog.m3-dialog .body { color: var(--md-on-surface-variant); font-size: 14px; line-height: 20px; }
dialog.m3-dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

dialog.sheet {
  width: 100%;
  max-width: 640px;
  margin: auto auto 0;
}
dialog.sheet .surface {
  border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0;
  background: var(--md-surface-container-low);
  padding: 0 0 calc(16px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
  animation: sheet-in var(--md-dur-long) var(--md-ease-emphasized);
}
@keyframes sheet-in { from { transform: translateY(100%); } }
dialog.sheet .drag-handle { width: 32px; height: 4px; border-radius: 2px; background: var(--md-on-surface-variant); opacity: 0.4; margin: 22px auto 12px; }

/* ---------- Skeleton loading ---------- */
.skeleton {
  border-radius: var(--md-shape-sm);
  background: linear-gradient(90deg, var(--md-surface-container-high) 0%, var(--md-surface-container-highest) 50%, var(--md-surface-container-high) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.divider { height: 1px; background: var(--md-outline-variant); border: 0; margin: 0; }