/* Material 3 components, built against the M3 spec token-by-token.
   Each component reads md-sys tokens only, so colour schemes, dark theme and seeds just work. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

/* ---------- Icons (Material Symbols Rounded) ---------- */
.icon {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  display: inline-block; flex: none; width: 1em; height: 1em; overflow: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased; user-select: none;
}
.icon.filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ---------- State layer + ripple (shared) ---------- */
.state { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; -webkit-user-select: none; user-select: none; }
.state::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--state-color, currentColor); opacity: 0; z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) linear;
}
@media (hover: hover) { .state:hover::before { opacity: var(--md-sys-state-hover-state-layer-opacity); } }
.state:focus-visible::before { opacity: var(--md-sys-state-focus-state-layer-opacity); }
.state:active::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: var(--state-color, currentColor); opacity: 0.12; transform: scale(0);
  animation: ripple 450ms var(--md-sys-motion-easing-standard) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
:disabled.state, .state[aria-disabled="true"] { cursor: default; pointer-events: none; }

/* ---------- Common buttons ---------- */
.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-corner-full);
  font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px; white-space: nowrap;
  background: transparent; text-decoration: none;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn .icon { font-size: 18px; margin-inline-start: -8px; }
.btn.trailing-icon .icon { margin-inline: 0 -8px; }
.btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
@media (hover: hover) { .btn-filled:hover, .btn-tonal:hover { box-shadow: var(--md-sys-elevation-level1); } }
.btn-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-outlined { color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline-variant); }
.btn-text { color: var(--md-sys-color-primary); padding: 0 12px; }
.btn-text .icon { margin-inline-start: -4px; }
.btn-elevated { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-primary); box-shadow: var(--md-sys-elevation-level1); }
.btn-large { height: 56px; padding: 0 28px; font: var(--md-sys-typescale-title-medium); border-radius: var(--md-sys-shape-corner-full); }
.btn-large .icon { font-size: 24px; }
.btn:disabled { background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); box-shadow: none; border-color: transparent; }
.btn-text:disabled, .btn-outlined:disabled { background: transparent; }
.btn-outlined:disabled { border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }

/* ---------- Icon buttons ---------- */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0; border: none; border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
}
.icon-btn[aria-pressed="true"] { color: var(--md-sys-color-primary); }
.icon-btn[aria-pressed="true"] .icon { font-variation-settings: "FILL" 1; }
.icon-btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.icon-btn-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.icon-btn-tonal[aria-pressed="true"] { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }
.icon-btn-outlined { border: 1px solid var(--md-sys-color-outline-variant); }
.icon-btn-outlined[aria-pressed="true"] { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-color: transparent; }
.icon-btn-large { width: 56px; height: 56px; }
.icon-btn-large .icon { font-size: 28px; }
.icon-btn:disabled { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
.icon-btn-filled:disabled, .icon-btn-tonal:disabled { background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }

/* ---------- FAB ---------- */
.fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; min-width: 56px; padding: 0 16px; border: none;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-level3); font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) { .fab:hover { box-shadow: var(--md-sys-elevation-level4); } }
.fab.extended { padding: 0 20px 0 16px; }
.fab-secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.fab-tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.fab-large { height: 96px; min-width: 96px; border-radius: var(--md-sys-shape-corner-extra-large); }
.fab-large .icon { font-size: 36px; }
.fab-lowered { box-shadow: var(--md-sys-elevation-level1); }

/* ---------- Cards ---------- */
.card { border-radius: var(--md-sys-shape-corner-medium); color: var(--md-sys-color-on-surface); display: block; text-decoration: none; }
.card-elevated { background: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-level1); }
.card-filled { background: var(--md-sys-color-surface-container-highest); }
.card-outlined { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); }
.card.state { --state-color: var(--md-sys-color-on-surface); }
@media (hover: hover) { .card-elevated.state:hover { box-shadow: var(--md-sys-elevation-level2); } .card-filled.state:hover { box-shadow: var(--md-sys-elevation-level1); } }

/* ---------- Top app bar ---------- */
.top-app-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 4px;
  min-height: 64px; padding: 8px 4px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}
.top-app-bar.scrolled { background: var(--md-sys-color-surface-container); }
.top-app-bar .title { flex: 1; min-width: 0; font: var(--md-sys-typescale-title-large); margin: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-app-bar.center .title { text-align: center; }
.top-app-bar .trailing { display: flex; align-items: center; gap: 4px; }
.top-app-bar-large-title { padding: 0 16px 28px; font: var(--md-sys-typescale-headline-medium); margin: 0; }

/* ---------- Navigation bar (compact) ---------- */
.m3-nav-bar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: flex; justify-content: space-around; gap: 8px;
  height: calc(80px + env(safe-area-inset-bottom)); padding: 12px 8px calc(16px + env(safe-area-inset-bottom));
  background: var(--md-sys-color-surface-container);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: none; background: none; padding: 0; color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-medium); letter-spacing: 0.5px; cursor: pointer; text-decoration: none;
  -webkit-user-select: none; user-select: none;
}
.nav-item .indicator {
  position: relative; display: grid; place-items: center; width: 64px; height: 32px;
  border-radius: var(--md-sys-shape-corner-full); overflow: hidden; isolation: isolate;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.nav-item .indicator::before { content: ""; position: absolute; inset: 0; background: var(--md-sys-color-on-surface); opacity: 0; z-index: -1; border-radius: inherit; }
@media (hover: hover) { .nav-item:hover .indicator::before { opacity: var(--md-sys-state-hover-state-layer-opacity); } }
.nav-item:active .indicator::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); }
.nav-item:focus-visible { outline: none; }
.nav-item:focus-visible .indicator { outline: 3px solid var(--md-sys-color-secondary); }
.nav-item[aria-current="page"] { color: var(--md-sys-color-on-surface); font-weight: 700; }
.nav-item[aria-current="page"] .indicator { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.nav-item[aria-current="page"] .icon { font-variation-settings: "FILL" 1; }
.nav-item .badge { position: absolute; top: 2px; left: calc(50% + 6px); }

/* ---------- Navigation rail (medium / expanded) ---------- */
.m3-nav-rail {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: 80px;
  display: none; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px 0; background: var(--md-sys-color-surface);
}
.m3-nav-rail .rail-logo { margin-bottom: 28px; width: 56px; height: 56px; }
.m3-nav-rail .nav-item { flex: none; width: 80px; }
.m3-nav-rail .indicator { width: 56px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);
  font: var(--md-sys-typescale-label-small); letter-spacing: 0.5px;
}
.badge.small { min-width: 6px; height: 6px; padding: 0; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-small); border: 1px solid var(--md-sys-color-outline-variant);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px; white-space: nowrap;
}
.chip .icon { font-size: 18px; margin-inline-start: -8px; color: var(--md-sys-color-primary); }
.chip.trailing .icon { margin-inline: 0 -8px; color: inherit; }
.chip-assist { color: var(--md-sys-color-on-surface); padding: 0 16px; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent;
}
.chip[aria-pressed="true"] .icon { color: inherit; }
.chip-elevated { border-color: transparent; background: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-level1); }
.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Lists ---------- */
.list { list-style: none; margin: 0; padding: 8px 0; }
.list-item {
  display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 24px 8px 16px;
  color: var(--md-sys-color-on-surface); text-decoration: none; width: 100%; border: none; background: none; text-align: start;
}
.list-item.two-line { min-height: 72px; }
.list-item .leading { flex: none; color: var(--md-sys-color-on-surface-variant); }
.list-item .content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-item .headline { font: var(--md-sys-typescale-body-large); letter-spacing: 0.5px; }
.list-item .supporting { font: var(--md-sys-typescale-body-medium); letter-spacing: 0.25px; color: var(--md-sys-color-on-surface-variant); }
.list-item .overline { font: var(--md-sys-typescale-label-small); color: var(--md-sys-color-on-surface-variant); }
.list-item .trailing { flex: none; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-small); display: flex; align-items: center; gap: 8px; }
.avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-title-medium);
}
.divider { height: 1px; border: none; margin: 0; background: var(--md-sys-color-outline-variant); }
.divider.inset { margin-inline-start: 16px; }
.subheader { font: var(--md-sys-typescale-title-small); letter-spacing: 0.1px; color: var(--md-sys-color-primary); padding: 16px 16px 8px; margin: 0; }

/* ---------- Progress indicators (M3 2024: track gap + stop indicator) ---------- */
.linear-progress { position: relative; height: 4px; display: flex; gap: 4px; align-items: center; }
.linear-progress .active { height: 4px; border-radius: 2px; background: var(--md-sys-color-primary); transition: width var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized); }
.linear-progress .track { flex: 1; height: 4px; border-radius: 2px; background: var(--md-sys-color-secondary-container); position: relative; }
.linear-progress .track::after { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--md-sys-color-primary); }
.linear-progress.full .track { display: none; }
.circular-progress { --size: 40px; --p: 0; width: var(--size); height: var(--size); display: inline-block; flex: none; }
.circular-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.circular-progress .track-ring { stroke: var(--md-sys-color-secondary-container); }
.circular-progress .active-ring { stroke: var(--md-sys-color-primary); transition: stroke-dasharray var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized); }

/* ---------- Switch ---------- */
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 52px; height: 32px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest); border: 2px solid var(--md-sys-color-outline);
  transition: background-color var(--md-sys-motion-duration-short4) linear, border-color var(--md-sys-motion-duration-short4) linear;
}
.switch::before {
  content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--md-sys-color-outline); transform: translateY(-50%);
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}
.switch:checked { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.switch:checked::before { left: 22px; width: 24px; height: 24px; background: var(--md-sys-color-on-primary); }
.switch:active::before { width: 28px; height: 28px; left: 0; }
.switch:checked:active::before { left: 18px; }
.switch::after { /* state layer around the handle */
  content: ""; position: absolute; top: 50%; left: -6px; width: 40px; height: 40px; border-radius: 50%;
  transform: translateY(-50%); background: var(--md-sys-color-on-surface); opacity: 0; transition: left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}
.switch:checked::after { left: 14px; background: var(--md-sys-color-primary); }
@media (hover: hover) { .switch:hover::after { opacity: var(--md-sys-state-hover-state-layer-opacity); } }
.switch:focus-visible::after { opacity: var(--md-sys-state-focus-state-layer-opacity); }

/* ---------- Segmented buttons ---------- */
.segmented { display: flex; width: 100%; }
.segmented button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 12px; margin-inline-start: -1px;
  border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px; white-space: nowrap;
}
.segmented button:first-child { border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full); margin: 0; }
.segmented button:last-child { border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; }
.segmented button .icon { font-size: 18px; display: none; }
.segmented button[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.segmented button[aria-pressed="true"] .icon { display: inline-block; }

/* ---------- Tabs (primary) ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--md-sys-color-surface-variant); background: var(--md-sys-color-surface); overflow-x: auto; scrollbar-width: none; }
.tab {
  flex: 1; min-width: 90px; height: 48px; padding: 0 16px; border: none; background: none; position: relative;
  color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small); letter-spacing: 0.1px;
}
.tab[aria-selected="true"] { color: var(--md-sys-color-primary); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100% - 16px, 64px); height: 3px; border-radius: 3px 3px 0 0; background: var(--md-sys-color-primary);
}

/* ---------- Dialog ---------- */
dialog.dialog {
  border: none; padding: 24px; border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  min-width: 280px; max-width: min(560px, calc(100vw - 48px)); box-shadow: var(--md-sys-elevation-level3);
}
dialog.dialog::backdrop { background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); }
dialog.dialog[open] { animation: dialog-in var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(-24px) scale(0.96); } }
.dialog .icon.hero { display: block; margin: 0 auto 16px; color: var(--md-sys-color-secondary); }
.dialog h2 { margin: 0 0 16px; font: var(--md-sys-typescale-headline-small); color: var(--md-sys-color-on-surface); }
.dialog .icon.hero + h2 { text-align: center; }
.dialog p { margin: 0; font: var(--md-sys-typescale-body-medium); letter-spacing: 0.25px; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* ---------- Bottom sheet (modal) ---------- */
dialog.sheet {
  border: none; padding: 0 0 max(16px, env(safe-area-inset-bottom)); margin: auto auto 0; width: 100%; max-width: 640px;
  max-height: 85vh; border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-level1);
}
dialog.sheet::backdrop { background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); }
dialog.sheet[open] { animation: sheet-in var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet .drag-handle { width: 32px; height: 4px; border-radius: 2px; margin: 22px auto 14px; background: var(--md-sys-color-on-surface-variant); opacity: 0.4; }
.sheet h2 { font: var(--md-sys-typescale-title-large); margin: 4px 24px 8px; }

/* ---------- Snackbar ---------- */
.m3-snackbar-host { position: fixed; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 100; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.snackbar {
  pointer-events: auto; display: flex; align-items: center; gap: 4px; min-height: 48px; max-width: 600px; width: 100%;
  padding: 4px 8px 4px 16px; border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  box-shadow: var(--md-sys-elevation-level3); font: var(--md-sys-typescale-body-medium); letter-spacing: 0.25px;
  animation: snack-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}
.snackbar .msg { flex: 1; padding: 10px 0; }
.snackbar .btn-text { color: var(--md-sys-color-inverse-primary); }
.snackbar.out { animation: snack-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
@keyframes snack-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes snack-out { to { opacity: 0; } }

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