/* Establish Tailwind’s layer order even when this stylesheet loads first. */
@layer theme, base, components, utilities;

/* Shared actions and account forms use the existing First Light palette. */
@layer components {
  .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.625rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-sandbar) 30%, transparent);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-breakwater);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms, color 150ms;
  }
  .ui-button:hover {
    background: var(--color-squid-lighter);
    border-color: var(--color-sandbar);
  }
  .ui-button--primary {
    background: var(--color-accent);
    border-color: transparent;
    color: var(--color-squid);
  }
  .ui-button--primary:hover {
    background: var(--color-accent-hover);
    border-color: transparent;
  }
}

.ui-button:focus-visible,
.account-page :where(a, button, summary, input[type="submit"]):focus-visible {
  outline: 2px solid var(--color-glass);
  outline-offset: 3px;
}
.ui-button:disabled {
  cursor: wait;
  opacity: 0.65;
}
html:has(.account-page) { color-scheme: dark; }
.account-page {
  --account-nav-clearance: calc(5.25rem + env(safe-area-inset-bottom));
}
.account-page :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]), select, textarea) {
  min-width: 0;
  min-height: 44px;
  border-radius: 0.5rem;
  color-scheme: dark;
  scroll-margin-block: 6rem 12rem;
}
.account-page label:has(> input.sr-only) {
  /* Keep clipped inputs inside scrolling chip grids, rather than the page. */
  position: relative;
  min-height: 44px;
  border-radius: 0.5rem;
}
.account-page label:has(> input.sr-only:focus-visible) {
  outline: 2px solid var(--color-glass);
  outline-offset: -2px;
}
.account-page input.sr-only + label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.account-page input.sr-only:checked + label {
  color: var(--color-squid);
}
.account-page input.sr-only:focus-visible + label {
  outline: 2px solid var(--color-glass);
  outline-offset: -3px;
}
.account-page [aria-invalid="true"]:not(fieldset) {
  border-color: #f87171;
}
.account-disclosure {
  border: 1px solid color-mix(in srgb, var(--color-sandbar) 20%, transparent);
  border-radius: 0.75rem;
  background: var(--color-squid);
}
.account-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.875rem 1rem;
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
}
.account-disclosure > summary::-webkit-details-marker { display: none; }
.account-disclosure > summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--color-glass);
  font-size: 1.25rem;
}
.account-disclosure[open] > summary::after { content: "−"; }
.account-disclosure > .account-disclosure-body { padding: 0 1rem 1rem; }
.account-form-actions {
  position: sticky;
  bottom: var(--account-nav-clearance);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-squid-light);
  box-shadow: 0 -12px 20px -16px #000;
}
.account-tabs { max-width: 100%; }
.account-tabs > * { justify-content: center; white-space: nowrap; }
.account-tabs [aria-current="page"] { color: var(--color-squid); }
.account-page [data-onboarding-chip-filter-target="chip"]:has(:checked) {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-squid));
}
.account-page [data-onboarding-chip-filter-target="chip"]:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 639.98px) {
  /* 16px prevents Safari zooming in when an angler focuses a form field. */
  .account-page :where(input[type="text"], input[type="search"], input[type="email"], input[type="number"]:not([data-catch-length-target="number"]), input[type="datetime-local"], select, textarea) {
    font-size: max(1rem, 1em);
  }
  .account-tabs { display: flex; width: 100%; }
  .account-tabs > * { flex: 1; }
}
@media (min-width: 1280px) {
  .account-page { --account-nav-clearance: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-button, .account-page :where(button, a, label, summary, label span) {
    transition: none;
  }
}