/* ---------- Buttons ---------- */

.btn {
  --btn-radius: var(--radius-md);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: 0.004em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* Light sweep: a single moving highlight, not a gradient fill. Decorative
   only, so it never carries meaning and respects reduced motion. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, oklch(1 0 0 / 0.16) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--duration-slow) var(--ease-out);
  pointer-events: none;
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn .icon {
  flex: 0 0 auto;
}

.btn:hover {
  color: var(--color-text);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn:disabled::after,
.btn[aria-disabled="true"]::after {
  display: none;
}

.btn--primary {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.12), transparent 55%),
    var(--color-primary);
  color: var(--color-on-primary);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.22) inset,
    0 14px 28px -14px oklch(0.62 0.215 25 / 0.9),
    0 2px 8px -4px oklch(0.62 0.215 25 / 0.7);
}

.btn--primary:hover {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.16), transparent 55%),
    var(--color-primary-hover);
  color: var(--color-on-primary);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.24) inset,
    0 20px 38px -14px oklch(0.62 0.215 25 / 0.95),
    var(--shadow-focus-primary);
}

.btn--primary:active {
  background:
    linear-gradient(180deg, transparent 30%, oklch(0 0 0 / 0.12)),
    var(--color-primary-active);
  transform: translateY(0);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.1) inset;
}

.btn--primary .icon {
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn--primary:hover .icon {
  transform: scale(1.06);
}

.btn--secondary {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.06), transparent 60%),
    color-mix(in oklab, var(--color-surface-raised) 86%, transparent);
  border-color: color-mix(in oklab, var(--color-text) 16%, transparent);
  color: var(--color-text);
  box-shadow: var(--shadow-inset-hairline);
  backdrop-filter: blur(8px);
}

.btn--secondary:hover {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.08), transparent 60%),
    color-mix(in oklab, var(--color-text) 16%, transparent);
  border-color: color-mix(in oklab, var(--color-text) 34%, transparent);
  transform: translateY(-1px);
}

.btn--outline {
  border-color: color-mix(in oklab, var(--color-text) 26%, transparent);
  color: var(--color-text);
}

.btn--outline:hover {
  border-color: color-mix(in oklab, var(--color-text) 68%, transparent);
  background: color-mix(in oklab, var(--color-text) 8%, transparent);
  transform: translateY(-1px);
}

.btn--ghost {
  color: var(--color-text-muted);
}

.btn--ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.btn--danger {
  background: var(--color-danger);
  color: oklch(0.99 0.005 80);
}

.btn--danger:hover {
  background: var(--color-danger-hover);
  color: oklch(0.99 0.005 80);
}

.btn--outline-danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn--outline-danger:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.btn--sm {
  min-height: 2.5rem;
  padding-inline: 0.875rem;
  font-size: var(--text-xs);
}

.btn--lg {
  --btn-radius: var(--radius-lg);
  min-height: 3.25rem;
  padding-inline: 1.6rem;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
}

.btn.is-loading {
  pointer-events: none;
}

.btn__spinner,
.spinner {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.icon-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.icon-btn[aria-pressed="true"] {
  color: var(--color-primary);
}

/* ---------- Fields ---------- */

.form {
  display: grid;
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-ui);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-danger);
  line-height: var(--leading-ui);
}

.field__error .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.15em;
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  /* Acrylic: lightened surface with a real blur over whatever sits behind the control. */
  background: linear-gradient(180deg, oklch(1 0 0 / 0.05), oklch(1 0 0 / 0)) var(--color-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.35;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.select:not([multiple]):not([size]) {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cbc5ba' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.25 8 10.25l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem 1rem;
  cursor: pointer;
}

/* White-on-charcoal native option lists cannot be restyled much, but these
   two rules stop Windows/Chrome from rendering white-on-white entries. */
.select option,
.select optgroup {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.select optgroup {
  font-weight: var(--weight-semibold);
}

.select:not([multiple]):not([size]):hover {
  background-color: var(--color-surface-raised);
}

.select:not([multiple]):not([size]):focus-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e8a09a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.25 8 10.25l4-4'/%3E%3C/svg%3E");
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--color-text-subtle);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  box-shadow: var(--shadow-focus-primary);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-subtle);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.input[disabled],
.select[disabled] {
  opacity: 0.65;
}

.field__control .input {
  padding-right: 3rem;
}

.field__action {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-muted);
}

.field__action:hover {
  color: var(--color-text);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding-block: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.checkbox__body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.checkbox__input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin: 0.1rem 0 0;
  accent-color: var(--color-primary);
}

.checkbox a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  cursor: pointer;
}

.switch__input {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  flex: 0 0 auto;
  margin: 0;
  appearance: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.switch__input::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.switch__input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.switch__input:checked::after {
  background: var(--color-on-primary);
  transform: translateX(1.25rem);
}

.switch__input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.form__row {
  display: grid;
  gap: var(--space-4);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  font-size: var(--text-sm);
}

.form-error .icon {
  margin-top: 0.1rem;
}

/* ---------- Chips, tabs, badges ---------- */

.chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.chip[aria-pressed="true"],
.chip[aria-current="page"],
.chip--active {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.tab {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0 var(--space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--color-text);
}

.tab[aria-current="page"],
.tab--active {
  border-bottom-color: var(--color-primary);
  color: var(--color-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.375rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge--primary {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.badge--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
  transition:
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

/* The bar starts as a hairline and gains weight once content passes under it. */
.site-header.is-scrolled {
  background: color-mix(in oklab, var(--color-bg-deep) 88%, transparent);
  border-bottom-color: var(--color-border);
  box-shadow: 0 18px 40px -32px oklch(0.02 0.01 55 / 0.95);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    backdrop-filter: blur(18px) saturate(1.2);
  }

  .site-header.is-scrolled {
    backdrop-filter: blur(22px) saturate(1.3);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  color: var(--color-text);
}

.brand:hover {
  color: var(--color-text);
}

.brand:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.brand__mark {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
}

.brand__mark-svg {
  flex: 0 0 auto;
  color: var(--color-primary);
  filter: drop-shadow(0 4px 10px oklch(0.62 0.215 25 / 0.45));
}

.brand__word {
  font-family: var(--font-display);
  font-feature-settings: var(--font-feature-display);
  font-variation-settings: "opsz" 48, "SOFT" 12, "WONK" 0;
  font-weight: 620;
  font-size: 1.52rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.brand__word b,
.brand__word strong {
  font-weight: 620;
  color: var(--color-primary);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: var(--space-4);
}

.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: color-mix(in oklab, var(--color-text) 64%, transparent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.008em;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.main-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.1rem;
  width: 1.1rem;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out);
}

.main-nav__link:hover {
  color: var(--color-text);
}

.main-nav__link[aria-current="page"] {
  color: var(--color-text);
}

.main-nav__link[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
}

.main-nav__link:active {
  transform: translateY(1px);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.header-account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Expanding search ---------- */

.header-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.header-search__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.header-search__trigger:hover {
  border-color: var(--color-border);
  color: var(--color-text);
  background: var(--color-surface-2);
}

.header-search__trigger.is-active {
  color: var(--color-primary);
}

.header-search__trigger:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.header-search__form {
  display: none;
  align-items: center;
  gap: var(--space-1);
  height: 2.5rem;
  padding-inline: var(--space-3) var(--space-1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, oklch(1 0 0 / 0.05), oklch(1 0 0 / 0)) var(--color-surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: var(--shadow-sm);
}

.header-search--open .header-search__form {
  display: flex;
  animation: search-in var(--duration-base) var(--ease-out);
}

.header-search--open .header-search__trigger {
  display: none;
}

@keyframes search-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.header-search__form:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-focus-primary);
}

.header-search__input {
  width: 14rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  outline: none;
}

.header-search__input::placeholder {
  color: var(--color-text-subtle);
}

.header-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.header-search__submit:hover {
  color: var(--color-on-primary);
  background: var(--color-primary);
}

.header-search__submit:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

@media (max-width: 899px) {
  .header-search {
    display: none;
  }
}

.profile {
  position: relative;
}

.profile__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0.2rem 0.45rem 0.2rem 0.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.profile__trigger:hover,
.profile__trigger[aria-expanded="true"] {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.profile__trigger:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.profile__name {
  display: none;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.profile__chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-text-subtle);
  transition: transform var(--duration-fast) var(--ease-out);
}

.profile__trigger[aria-expanded="true"] .profile__chevron {
  transform: rotate(180deg);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

/* Low-chroma tints keep identities distinguishable without competing with
   the single red accent. */
.avatar--1 {
  background: oklch(0.36 0.05 25);
}
.avatar--2 {
  background: oklch(0.36 0.04 55);
}
.avatar--3 {
  background: oklch(0.36 0.03 100);
}
.avatar--4 {
  background: oklch(0.36 0.04 200);
}
.avatar--5 {
  background: oklch(0.36 0.04 290);
}
.avatar--guest {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.profile__trigger--placeholder {
  cursor: default;
  pointer-events: none;
}

.avatar.avatar--placeholder {
  border-radius: 50%;
}

.profile__name--placeholder {
  width: 5.5rem;
  height: 0.85rem;
  border-radius: var(--radius-full);
}

.profile-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-menu);
  width: min(19rem, calc(100vw - 2rem));
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--color-surface-raised) 96%, transparent);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: menu-in var(--duration-base) var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) {
  .profile-menu {
    backdrop-filter: blur(24px);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.profile-menu__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.profile-menu__avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-sm);
}

.profile-menu__identity {
  min-width: 0;
}

.profile-menu__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.profile-menu__email {
  margin-top: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.profile-menu__group {
  display: grid;
  gap: 0.1rem;
}

.profile-menu__group--footer {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.profile-menu__link,
.profile-menu__signout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.6rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.profile-menu__link:hover,
.profile-menu__signout:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.profile-menu__link--primary {
  color: var(--color-text);
}

.profile-menu__link:focus-visible,
.profile-menu__signout:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.profile-menu__signout {
  color: var(--color-danger);
}

.profile-menu__signout:hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

.mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  display: none;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-bg-deep) 94%, transparent);
}

@supports (backdrop-filter: blur(1px)) {
  .mobile-nav {
    backdrop-filter: blur(20px) saturate(1.2);
  }
}

.mobile-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-height: var(--bottom-nav-h);
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  transition: color var(--duration-fast) var(--ease-out);
}

.mobile-nav__link:hover {
  color: var(--color-text);
}

.mobile-nav__link[aria-current="page"] {
  color: var(--color-text);
}

.mobile-nav__link[aria-current="page"] .icon {
  color: var(--color-primary);
}

.mobile-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1.6rem;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 12px oklch(0.62 0.22 26 / 0.6);
}

.mobile-nav__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.mobile-nav__link .icon {
  width: 1.375rem;
  height: 1.375rem;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--space-9);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-deep);
}

.site-footer__inner {
  padding-block: var(--space-7) var(--space-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.7fr));
  gap: var(--space-6);
}

.footer-brand .brand__word {
  font-size: 1.9rem;
}

.footer-tagline {
  margin-top: var(--space-3);
  max-width: 34ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.footer-col__title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.footer-links {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.footer-links a:hover {
  color: var(--color-primary);
}

.footer-legal__trigger {
  margin-top: var(--space-3);
  justify-self: flex-start;
}

.footer-legal-modal__intro {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.footer-legal-modal__list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.footer-legal-modal__item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.footer-legal-modal__link {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-legal-modal__copy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.footer-legal {
  max-width: 58ch;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.footer-legal a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Rail and cards ---------- */

.rail {
  margin-top: var(--space-6);
}

.rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.rail__title {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}

.rail__sub {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.rail__controls {
  display: flex;
  gap: var(--space-1);
}

.rail__tools {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.rail__link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.rail__link .icon {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

.rail__link:hover {
  color: var(--color-primary);
}

.rail__link:hover .icon {
  transform: translateX(2px);
}

.rail__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.rail__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
}

.rail__button:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.rail__button:disabled {
  opacity: 0.3;
}

.rail__viewport {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--page-gutter);
  padding: var(--space-1) var(--page-gutter) var(--space-3);
  margin-inline: calc(var(--page-gutter) * -1);
  scrollbar-width: none;
}

.rail__viewport::-webkit-scrollbar {
  display: none;
}

.rail__viewport:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.card {
  position: relative;
  flex: 0 0 clamp(8.5rem, 19vw, 11rem);
  min-width: 0;
  scroll-snap-align: start;
  transition: transform var(--duration-fast) var(--ease-out);
  will-change: transform;
  content-visibility: auto;
  contain-intrinsic-size: 11rem 16.5rem;
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
}

.card__link {
  display: block;
  border-radius: var(--radius-md);
}

.card__link:hover {
  color: inherit;
}

.card__poster {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  transform: translateZ(0);
  will-change: transform;
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card:hover .card__image,
.card:focus-within .card__image {
  transform: scale(1.04);
}

.card:hover .card__poster,
.card:focus-within .card__poster {
  border-color: var(--color-border-strong);
  box-shadow: 0 12px 28px -8px oklch(0 0 0 / 0.65), 0 0 0 1px var(--color-border-strong);
}

.card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.06 0.008 65 / 0.82), transparent 46%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.card:hover .card__overlay,
.card:focus-within .card__overlay {
  opacity: 1;
}

.card__actions {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.card:hover .card__actions,
.card:focus-within .card__actions {
  opacity: 1;
  transform: none;
}

.card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid oklch(0.95 0.01 80 / 0.28);
  border-radius: 50%;
  background: oklch(0.1 0.01 65 / 0.76);
  color: var(--color-text);
}

.card__action:hover {
  border-color: var(--color-primary);
  background: oklch(0.1 0.01 65 / 0.92);
  color: var(--color-primary);
}

.card__action--play {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.card__action--play:hover {
  border-color: transparent;
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.card__action .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
}

.card__saved {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.card__saved .icon {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 2.5;
}

.card__body {
  padding-top: var(--space-2);
}

.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--color-text);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.card__progress {
  width: 100%;
  height: 3px;
  margin-top: var(--space-2);
  appearance: none;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.card__progress::-webkit-progress-bar {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.card__progress::-webkit-progress-value {
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.card__progress::-moz-progress-bar {
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.poster-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 10px,
      oklch(0.95 0.01 80 / 0.025) 10px 11px
    ),
    var(--color-surface-2);
  color: var(--color-text-muted);
  text-align: center;
}

.poster-fallback__title {
  font-family: var(--font-display);
  font-feature-settings: var(--font-feature-display);
  font-variation-settings: "opsz" 48, "SOFT" 12, "WONK" 0;
  font-weight: 560;
  font-size: var(--text-lg);
  line-height: 1.15;
  color: var(--color-text);
  text-wrap: balance;
}

.poster-fallback__label {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-subtle);
}

.card--ranked {
  flex-basis: clamp(10.5rem, 23vw, 13.5rem);
  padding-left: 1.75rem;
}

/* Top 10 cards reserve a gutter for the numeral next to the poster. */
.rail--ranked .card {
  flex-basis: calc(clamp(8.5rem, 19vw, 11rem) + 2.4rem);
  padding-left: 2.4rem;
}

.card__rank {
  position: absolute;
  left: 0;
  bottom: 3.1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px oklch(0.98 0.01 86 / 0.82);
  paint-order: stroke fill;
  text-shadow: 0 4px 16px oklch(0.02 0 0 / 0.6);
  pointer-events: none;
}

.card--ranked:hover .card__rank,
.card--ranked:focus-within .card__rank {
  -webkit-text-stroke-color: var(--color-primary);
}

.rail--ranked .card__body {
  padding-left: 0;
}

/* ---------- Hero billboard ---------- */

.billboard {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(32rem, 72vh, 48rem);
  overflow: hidden;
  background: var(--color-bg-deep);
  content-visibility: auto;
  contain: layout paint;
  isolation: isolate;
}

.billboard__track {
  position: absolute;
  inset: 0;
}

.billboard__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-hero) var(--ease-out),
    visibility 0s linear var(--duration-hero);
}

.billboard__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--duration-hero) var(--ease-out),
    visibility 0s;
}

.billboard__slide.is-active .billboard__image {
  animation: billboard-kenburns 10s var(--ease-soft-out) both;
}

@keyframes billboard-kenburns {
  from { transform: scale(1.03) translateY(0); }
  to { transform: scale(1.09) translateY(-0.6rem); }
}

.billboard__media {
  position: absolute;
  inset: 0;
}

.billboard__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: translateZ(0);
  will-change: transform;
}

.billboard__scrim {
  position: absolute;
  inset: 0;
  background:
    var(--scrim-bottom),
    var(--scrim-left);
}

/* Alternating scrim shapes keep the carousel visibly alive between slides. */
.billboard__scrim--1 {
  background:
    linear-gradient(to top, var(--color-bg) 2%, oklch(0.16 0.008 65 / 0.7) 32%, transparent 70%),
    radial-gradient(72% 92% at 18% 38%, oklch(0.32 0.06 24 / 0.42), transparent 72%),
    linear-gradient(to right, oklch(0.1 0.008 65 / 0.82) 0%, transparent 76%);
}

.billboard__scrim--2 {
  background:
    linear-gradient(to top, var(--color-bg) 2%, oklch(0.16 0.008 65 / 0.7) 34%, transparent 70%),
    radial-gradient(60% 80% at 78% 24%, oklch(0.28 0.05 250 / 0.32), transparent 74%),
    linear-gradient(to left, oklch(0.1 0.008 65 / 0.72) 0%, transparent 66%);
}

.billboard__carousel {
  position: absolute;
  top: calc(var(--header-h) + var(--space-4));
  right: var(--page-gutter);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.billboard__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-full);
  background: oklch(0.11 0.008 60 / 0.62);
  color: var(--color-text);
  backdrop-filter: blur(10px);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.billboard__arrow:hover {
  border-color: oklch(1 0 0 / 0.4);
  background: oklch(0.18 0.01 60 / 0.8);
}

.billboard__arrow:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.billboard__dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.billboard__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: oklch(1 0 0 / 0.35);
  cursor: pointer;
  transition:
    width var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.billboard__dot:hover {
  background: oklch(1 0 0 / 0.7);
}

.billboard__dot.is-active {
  width: 1.4rem;
  background: var(--color-primary);
}

.billboard__dot:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.billboard__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-9) var(--space-7);
}

.billboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}

.billboard__content {
  max-width: 42rem;
}

/* The hero poster reads as a physical object lifted off the backdrop, using
   the same three-plane shadow as the artwork on the landing page. */
.billboard__plate {
  position: relative;
  width: clamp(13rem, 17vw, 17.5rem);
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg);
  transform: rotateY(-6deg) rotateZ(1.5deg);
  transform-style: preserve-3d;
  filter: saturate(1.03);
  animation: billboard-plate-in var(--duration-slow) var(--ease-out) both;
}

.billboard__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  box-shadow: var(--shadow-poster-lift);
}

.billboard__poster-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--shine-edge);
  box-shadow: var(--shadow-inset-hairline);
  pointer-events: none;
}

@keyframes billboard-plate-in {
  from {
    opacity: 0;
    transform: translateY(14px) rotateY(-6deg) rotateZ(1.5deg);
  }
  to {
    opacity: 1;
  }
}

.billboard__eyebrow {
  margin-bottom: var(--space-4);
}

.billboard__title {
  margin-bottom: var(--space-4);
  font-variation-settings: "opsz" 144, "SOFT" 12, "WONK" 0;
  font-weight: 580;
  font-size: var(--text-6xl);
  line-height: 0.97;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.billboard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.billboard__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.billboard__meta-item + .billboard__meta-item {
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-strong);
}

.billboard__meta-item .icon {
  color: var(--color-primary);
}

.billboard__overview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 54ch;
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.billboard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.billboard__actions .btn {
  min-height: 3rem;
  padding-inline: 1.35rem;
}

/* ---------- Skeletons and states ---------- */

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    oklch(0.95 0.01 80 / 0.055),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }

  .billboard__slide,
  .billboard__slide.is-active {
    transition: none;
  }
}

html[data-reduce-motion='true'] .skeleton::after {
  animation: none;
}

html[data-reduce-motion='true'] .billboard__slide,
html[data-reduce-motion='true'] .billboard__slide.is-active {
  transition: none;
}

.skeleton--poster {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-md);
}

.skeleton--title {
  height: 0.85rem;
  margin-top: var(--space-2);
  width: 82%;
}

.skeleton--meta {
  height: 0.7rem;
  margin-top: var(--space-2);
  width: 48%;
}

.skeleton--text {
  height: 0.8rem;
  width: 100%;
}

.skeleton--button {
  height: 3rem;
  width: 8rem;
  border-radius: var(--radius-sm);
}

.skeleton--eyebrow {
  height: 1.15rem;
  width: 9rem;
  border-radius: var(--radius-full);
}

.skeleton--hero-title {
  height: clamp(2.75rem, 7vw, 4.5rem);
  width: min(26rem, 88%);
  border-radius: var(--radius-md);
}

.skeleton--hero-meta {
  height: 0.9rem;
  width: 15rem;
}

.skeleton--text-short {
  width: 62%;
}

.skeleton--rail-title {
  height: 1.35rem;
  width: 11rem;
}

.hero-skeleton {
  min-height: clamp(31rem, 68vh, 46rem);
  padding-block: var(--space-9) var(--space-7);
  display: flex;
  align-items: flex-end;
  background: var(--color-bg-deep);
}

.hero-skeleton__content {
  width: min(34rem, 100%);
  display: grid;
  gap: var(--space-3);
}

.empty-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: 34rem;
  margin: var(--space-8) auto;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
}

.empty-state__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.empty-state__title,
.error-state__title {
  font-size: var(--text-2xl);
}

.empty-state__body,
.error-state__body {
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.empty-state__actions,
.error-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.notice .icon {
  margin-top: 0.1rem;
  color: var(--color-primary);
}

.notice--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-subtle);
  color: var(--color-text);
}

.notice--danger {
  border-color: var(--color-danger);
  background: var(--color-danger-subtle);
}

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.03 0.005 65 / 0.82);
  animation: fade-in var(--duration-base) var(--ease-out);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal__panel {
  position: relative;
  width: min(38rem, 100%);
  max-height: min(88dvh, 56rem);
  overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--duration-slow) var(--ease-out);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.modal__title {
  font-size: var(--text-2xl);
}

.modal__close {
  flex: 0 0 auto;
}

.modal__body {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.modal__actions:empty {
  display: none;
}

.modal--legal .modal__panel {
  width: min(34rem, calc(100vw - 2rem));
}

.modal--trailer .modal__panel {
  width: min(64rem, 100%);
  padding: 0;
  overflow: hidden;
  background: var(--color-scrim);
  border-color: var(--color-border-strong);
}

.modal--trailer .modal__header {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  margin: 0;
}

.modal--trailer .modal__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.modal--trailer .modal__close {
  border: 1px solid var(--color-border-strong);
  background: oklch(0.08 0.01 65 / 0.72);
  color: var(--color-text);
}

.modal__frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
}

/* ---------- Toasts ---------- */

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: toast-in var(--duration-base) var(--ease-out);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.toast--error {
  border-color: var(--color-danger);
}

.toast--success {
  border-color: var(--color-success);
}

.toast__message {
  flex: 1;
  line-height: var(--leading-ui);
}

.toast__action {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-subtle);
}

.toast__close:hover {
  color: var(--color-text);
}

/* ---------- Shared layout pieces ---------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-7) var(--space-5);
}

.page-head__title {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-display);
}

.page-head__sub {
  margin-top: var(--space-2);
  max-width: 54ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.section {
  padding-block: var(--space-6);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section__title {
  font-size: var(--text-2xl);
}

.section__link {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4) var(--space-3);
}

.media-grid .card {
  flex: none;
}

.results-summary {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.load-more {
  display: flex;
  justify-content: center;
  padding-block: var(--space-6);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding-block: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.filter-group {
  display: grid;
  gap: var(--space-1);
  min-width: 10rem;
}

.filter-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.filter-bar .select {
  min-width: 10rem;
}

.filter-bar__spacer {
  flex: 1;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.meta-row > * + * {
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-strong);
}

.hairline {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-6);
}

/* ---------- Responsive ---------- */

@media (min-width: 700px) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}

@media (min-width: 900px) {
  .profile__name {
    display: inline;
  }
}

@media (max-width: 899px) {
  .main-nav {
    display: none;
  }

  .brand__word {
    font-size: 1.5rem;
  }

  .billboard__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .billboard__plate {
    display: none;
  }
}

@media (max-width: 899px) {
  .mobile-nav {
    display: grid;
  }
}

@media (max-width: 819px) {
  .site-header {
    border-bottom-color: var(--color-border);
  }

  .site-header__inner {
    min-height: 3.75rem;
    gap: var(--space-3);
  }

  .header-tools {
    gap: var(--space-1);
  }

  .billboard {
    min-height: clamp(28rem, 76vh, 38rem);
  }

  .billboard__inner {
    padding-block: var(--space-8) var(--space-6);
  }

  .billboard__title {
    font-size: clamp(2.75rem, 11vw, 4rem);
  }

  .billboard__overview {
    -webkit-line-clamp: 3;
    font-size: var(--text-sm);
  }

  .billboard__scrim {
    background:
      linear-gradient(to top, var(--color-bg) 2%, oklch(0.16 0.008 65 / 0.82) 44%, oklch(0.1 0.008 65 / 0.12) 88%),
      linear-gradient(to right, oklch(0.1 0.008 65 / 0.55) 0%, transparent 85%);
  }

  .billboard__scrim.billboard__scrim--1 {
    background:
      linear-gradient(to top, var(--color-bg) 2%, oklch(0.16 0.008 65 / 0.8) 44%, oklch(0.1 0.008 65 / 0.12) 88%),
      radial-gradient(80% 70% at 20% 40%, oklch(0.34 0.07 24 / 0.42), transparent 74%),
      linear-gradient(to right, oklch(0.1 0.008 65 / 0.55) 0%, transparent 85%);
  }

  .billboard__scrim.billboard__scrim--2 {
    background:
      linear-gradient(to top, var(--color-bg) 2%, oklch(0.16 0.008 65 / 0.8) 44%, oklch(0.1 0.008 65 / 0.12) 88%),
      radial-gradient(70% 70% at 80% 26%, oklch(0.3 0.05 250 / 0.34), transparent 74%),
      linear-gradient(to right, oklch(0.1 0.008 65 / 0.55) 0%, transparent 85%);
  }

  .billboard__carousel {
    top: calc(var(--header-h) + var(--space-2));
    gap: var(--space-2);
  }

  .billboard__arrow {
    width: 2.25rem;
    height: 2.25rem;
  }

  .billboard__slide.is-active .billboard__image {
    animation: none;
  }

  .billboard__dots {
    gap: 0.3rem;
  }

  .rail__controls {
    display: none;
  }

  .rail,
  .billboard,
  .card,
  .card__poster {
    will-change: auto;
  }

  .rail__viewport {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .rail {
    margin-top: var(--space-5);
  }

  .rail__viewport {
    gap: var(--space-2);
  }

  .page-head {
    padding-block: var(--space-5) var(--space-4);
  }

  .page-head__title {
    font-size: var(--text-3xl);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .toast-region {
    right: var(--space-3);
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--space-3));
    left: var(--space-3);
    width: auto;
  }

  .card__actions {
    opacity: 1;
    transform: none;
  }

  .card__overlay {
    opacity: 0.65;
  }
}

@media (max-width: 499px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billboard__actions {
    gap: var(--space-2);
  }

  .billboard__actions .btn {
    flex: 1 1 auto;
  }

  .modal {
    padding: var(--space-2);
  }

  .modal__panel {
    padding: var(--space-4);
  }
}

@media (hover: none) {
  .card {
    transform: none;
  }

  .card:hover,
  .card:focus-within {
    transform: none;
  }

  .card__actions {
    opacity: 1;
    transform: none;
  }

  .card__overlay {
    opacity: 0.55;
  }
}

@media (pointer: coarse) {
  .billboard__slide.is-active .billboard__image {
    animation: none;
  }

  .billboard__scrim,
  .billboard__scrim--1,
  .billboard__scrim--2 {
    backdrop-filter: none;
    background:
      linear-gradient(to top, var(--color-bg) 2%, oklch(0.16 0.008 65 / 0.8) 44%, oklch(0.1 0.008 65 / 0.12) 88%),
      linear-gradient(to right, oklch(0.1 0.008 65 / 0.5) 0%, transparent 85%);
  }

  .card,
  .card__poster,
  .billboard__arrow,
  .btn {
    transform: translateZ(0);
  }
}