/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *


 */

@layer reset, base, components, utilities;
@layer components {
  .auth-container {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-subtle);
    padding: var(--space-m);
  }

  .auth-box {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-l);
    padding: var(--space-xl);
    box-shadow: var(--shadow-s);
    width: 100%;
    max-width: var(--width-form);

    h1 {
      margin: 0 0 var(--space-l);
      font-size: var(--text-xl);
      font-weight: 600;
      text-align: center;
      color: var(--color-fg);
    }
  }

  .auth-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .auth-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-m);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-elevated);
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--color-fg-default);
    cursor: pointer;
    transition: background-color var(--transition-default), color var(--transition-default);
    text-decoration: none;
    font-family: inherit;

    &:hover,
    &:focus-visible {
      background-color: var(--color-bg-hover);
    }

    &.apple:hover,
    &.apple:focus-visible {
      background-color: var(--color-brand-apple);
      color: var(--color-on-accent);
    }

    &.spotify:hover,
    &.spotify:focus-visible {
      background-color: var(--color-brand-spotify);
      color: var(--color-on-accent);
    }

    &.passkey:hover,
    &.passkey:focus-visible {
      background-color: var(--color-brand-passkey);
      color: var(--color-on-accent);
    }
  }

  .auth-icon {
    width: var(--size-icon);
    height: var(--size-icon);
    margin-inline-end: var(--space-s);
    fill: currentColor;
  }

  .error-message {
    margin-top: var(--space-s);
    color: var(--color-danger);
    font-size: var(--text-s);
    text-align: center;
  }

  .auth-page {
    max-width: var(--width-form);
    margin: var(--space-2xl) auto;

    h1 {
      margin-bottom: var(--space-l);
    }

    h2 {
      margin-bottom: var(--space-m);
    }

    hr {
      margin: var(--space-xl) 0;
    }
  }

  .auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    label {
      font-size: var(--text-s);
      color: var(--color-fg-muted);
    }

    input {
      width: 100%;
    }
  }

  .auth-submit {
    margin-top: var(--space-s);
    width: 100%;
  }
}
@layer components {
  .flash-messages {
    position: fixed;
    inset-block-start: var(--space-m);
    inset-inline: 0;
    margin-inline: auto;
    z-index: 1000;
    width: 90%;
    max-width: var(--width-flash);
  }

  .flash {
    padding: var(--space-m);
    border-radius: var(--radius-m);
    margin-bottom: var(--space-s);
    box-shadow: var(--shadow-s);
    transform: translateY(0);
    opacity: 1;
    transition: transform var(--transition-slow) ease-out, opacity var(--transition-slow) ease-out;

    @starting-style {
      transform: translateY(-100%);
      opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .flash-notice {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
  }

  .flash-alert {
    background-color: var(--color-danger);
    color: var(--color-on-accent);
  }

  .flash-messages + .auth-container {
    padding-top: var(--space-2xl);
  }
}
@layer base {
  @font-face {
    font-family: "Cherry Bomb One";
    src: url(/fonts/CherryBombOne-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
}
@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-m);
    border: none;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: inherit;
    font-size: var(--text-s);
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-default);

    &:hover {
      opacity: 0.9;
    }

    & svg {
      display: block;
    }
  }

  .button--secondary {
    background: transparent;
    border: 1px solid var(--color-border-muted);
    color: var(--color-fg-default);

    &:hover {
      border-color: var(--color-fg-muted);
      opacity: 1;
    }
  }

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

  .button--full {
    width: 100%;
  }

  .friends-page h1 {
    margin-bottom: var(--space-l);
  }

  .user-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-s) 0;
    border-bottom: 1px solid var(--color-border-accent);

    &:last-child {
      border-bottom: none;
    }
  }

  .user-name {
    font-weight: 500;
    color: var(--color-fg);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover,
    &:focus-visible {
      color: var(--color-accent);
    }
  }

  .empty-state {
    color: var(--color-fg-muted);
    font-style: italic;
  }

  .follow-requests {
    background: var(--color-accent-subtle);
    padding: var(--space-m);
    border-radius: var(--radius-m);
    margin-block-end: var(--space-l);

    --color-fg-muted: var(--color-accent-fg-muted);
    --color-bg-hover: var(--color-accent-bg-hover);
    --color-border-accent: var(--color-accent-border);

    h2 {
      margin-block-start: 0;
    }
  }

  .request-actions {
    display: flex;
    gap: var(--space-xs);
  }

  .profile-stats {
    display: flex;
    gap: var(--space-m);
  }

  .profile-stat {
    display: flex;
    gap: var(--space-xs);
    text-decoration: none;
    color: var(--color-fg-default);

    &:hover,
    &:focus-visible {
      color: var(--color-accent);
    }
  }

  .stat-count {
    font-weight: 600;
  }

  .stat-label {
    color: var(--color-fg-muted);
  }

  .user-list-page {
    h1 a {
      color: inherit;
      text-decoration: none;

      &:hover,
      &:focus-visible {
        color: var(--color-accent);
      }
    }
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .follows-you-badge {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    background: var(--color-bg-subtle);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
  }
}
@property --color-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(65% 0.17 160);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(header) {
  display: none;
}

::view-transition-new(header) {
  animation: none;
}

::view-transition-old(main-content),
::view-transition-new(main-content) {
  animation-duration: 150ms;
  animation-timing-function: ease-in-out;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

@layer base {
  :root {
    color-scheme: light dark;

    /*
     * Color System
     *
     * Built on OKLCH with light-dark() for automatic theme switching.
     * Accent-derived colors use relative color syntax: oklch(from var(--color-accent) L C h)
     *
     * Lightness scale (light / dark):
     *   bg:       97-100% / 0-20%   - backgrounds
     *   border:   88-94%  / 25-32%  - dividers and borders
     *   fg-muted: 45%     / 65%     - secondary text
     *   fg:       0-15%   / 83-100% - primary text
     *
     * Chroma scale:
     *   0.03 - hint      (barely tinted)
     *   0.05 - subtle    (noticeable tint)
     *   0.07 - soft      (clear tint)
     *   0.10 - medium    (pronounced)
     *   0.17 - full      (brand color)
     */

    /* Brand */
    --color-accent: oklch(65% 0.17 160);
    --color-accent-subtle: light-dark(oklch(97% 0.03 160), oklch(15% 0.05 160));
    --color-accent-muted: light-dark(oklch(93% 0.05 160), oklch(20% 0.07 160));
    --color-danger: oklch(60% 0.2 25);

    /* Third-party brand colours */
    --color-brand-apple: oklch(0% 0 0);
    --color-brand-spotify: oklch(60% 0.17 145);
    --color-brand-passkey: oklch(50% 0.15 250);

    /* Foreground */
    --color-fg: light-dark(oklch(0% 0 0), oklch(100% 0 0));
    --color-fg-default: light-dark(oklch(15% 0 0), oklch(83% 0 0));
    --color-fg-muted: light-dark(oklch(45% 0 0), oklch(65% 0 0));
    --color-fg-subtle: light-dark(oklch(35% 0 0), oklch(88% 0 0));

    /* Background */
    --color-bg: light-dark(oklch(100% 0 0), oklch(0% 0 0));
    --color-bg-subtle: light-dark(oklch(97% 0 0), oklch(10% 0 0));
    --color-bg-elevated: light-dark(oklch(100% 0 0), oklch(20% 0 0));
    --color-bg-hover: light-dark(oklch(97% 0 0), oklch(30% 0 0));

    /* Border */
    --color-border: light-dark(oklch(94% 0 0), oklch(25% 0 0));
    --color-border-muted: light-dark(oklch(82% 0 0), oklch(32% 0 0));
    --color-border-subtle: light-dark(oklch(90% 0 0), oklch(30% 0 0));
    --color-border-accent: light-dark(
      oklch(from var(--color-accent) 90% 0.05 h),
      oklch(from var(--color-accent) 25% 0.07 h)
    );

    /*
     * Accent context overrides
     * Use these inside accent-colored containers to theme child elements
     */
    --color-accent-fg-muted: light-dark(
      oklch(from var(--color-accent) 45% 0.10 h),
      oklch(from var(--color-accent) 65% 0.10 h)
    );
    --color-accent-bg-hover: light-dark(
      oklch(from var(--color-accent) 93% 0.05 h),
      oklch(from var(--color-accent) 22% 0.07 h)
    );
    --color-accent-bg-elevated: light-dark(
      oklch(from var(--color-accent) 99% 0.03 h),
      oklch(from var(--color-accent) 18% 0.05 h)
    );
    --color-accent-border: light-dark(
      oklch(from var(--color-accent) 88% 0.05 h),
      oklch(from var(--color-accent) 28% 0.07 h)
    );

    /* Spacing */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-s: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-m: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    --space-l: clamp(1rem, 0.75rem + 1.5vw, 2rem);
    --space-xl: clamp(1.5rem, 1rem + 2vw, 3rem);
    --space-2xl: clamp(2rem, 1.5rem + 3vw, 5rem);

    /* Width constraints */
    --width-prose: 65ch;
    --width-content: 80ch;
    --width-form: 25rem;
    --width-flash: 40ch;

    /* Radius */
    --radius-s: 0.25rem;
    --radius-m: 0.5rem;
    --radius-l: 0.75rem;
    --radius-full: 50%;

    /* Shadows */
    --shadow-s: 0 0.25rem 0.375rem oklch(0% 0 0 / 0.1);
    --shadow-m: 0 0.625rem 0.9375rem -0.1875rem oklch(0% 0 0 / 0.1),
                0 0.25rem 0.375rem -0.25rem oklch(0% 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 150ms;
    --transition-default: 200ms;
    --transition-slow: 300ms;

    /* Sizes */
    --size-icon: 1.5rem;

    /* On-accent (white text on colored backgrounds) */
    --color-on-accent: oklch(100% 0 0);

    /* Typography */
    --text-xs: 0.75rem;
    --text-s: 0.875rem;
    --text-m: clamp(0.9375rem, 0.875rem + 0.25vw, 1.125rem);
    --text-l: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-xl: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);

    accent-color: var(--color-accent);
    caret-color: var(--color-accent);
    scroll-behavior: smooth;
    line-height: 1.5;
  }

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

  .melt {
    font-family: "Cherry Bomb One", system-ui;
    filter: url(#melt);
  }

  .svg-defs {
    position: absolute;
    width: 0;
    height: 0;
  }

  body {
    background: var(--color-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      Liberation Mono, Courier New, monospace;
    font-size: var(--text-m);
    color: var(--color-fg-default);
    line-height: 1.6;
    margin: 0 auto;
    padding: 0 var(--space-m);
    max-width: var(--width-content);
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-fg);
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-l); }

  a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;

    &:visited {
      color: var(--color-accent-fg-muted);
    }

    &:hover {
      color: var(--color-fg);
    }
  }

  .top-bar {
    view-transition-name: header;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-m) 0;

    nav {
      display: flex;
      align-items: baseline;
      gap: var(--space-s);

      button {
        background: none;
        border: none;
        padding: 0;
        font-size: inherit;
        color: var(--color-fg);
        text-decoration: underline;

        &:hover {
          background: none;
        }
      }
    }

    > a:first-child {
      font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    }

    a {
      color: var(--color-fg);
    }

    nav [aria-current="page"] {
      color: var(--color-accent);
    }

    .nav-link {
      position: relative;
    }

    .indicator {
      position: absolute;
      inset-block-start: -0.25rem;
      inset-inline-end: -0.5rem;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      background: var(--color-accent);
      border-radius: var(--radius-full);
    }
  }

  main {
    view-transition-name: main-content;
    min-height: 100dvh;
  }

  article {
    margin: var(--space-xl) 0;
  }

  section {
    margin: var(--space-l) 0;
  }

  p, dd, footer {
    color: var(--color-fg-subtle);
    max-width: var(--width-prose);
    text-wrap: pretty;
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin: 0;
  }

  dd + dt {
    margin-top: var(--space-l);
  }

  footer {
    margin-top: var(--space-2xl);
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;
  }

  input,
  button,
  select,
  textarea {
    font: inherit;
  }

  button {
    background: var(--color-bg);
    color: var(--color-fg-default);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    font-size: var(--text-s);
    cursor: pointer;

    &:hover {
      background: var(--color-bg-hover);
    }
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  textarea {
    background: var(--color-bg);
    color: var(--color-fg-default);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    font-size: var(--text-s);
  }

  hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-xl) 0;
  }

  .visibility-options {
    display: flex;
    gap: var(--space-m);

    label {
      flex: 1;
      padding: var(--space-m);
      border: 2px solid var(--color-border);
      border-radius: var(--radius-m);
      cursor: pointer;

      &:has(input:checked) {
        border-color: var(--color-border-accent);
        background: var(--color-accent-subtle);
      }
    }

    input[type="radio"] {
      margin-inline-end: var(--space-xs);
    }

    .visibility-description {
      display: block;
      margin-block-start: var(--space-xs);
      color: var(--color-fg-muted);
      font-size: var(--text-s);
    }
  }

  /* Form focus */
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .input-group {
    display: flex;
    gap: var(--space-s);
    max-width: var(--width-form);

    input {
      flex: 1;
      min-width: 0;
    }

    button {
      flex-shrink: 0;
    }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .clipboard-textarea {
    position: fixed;
    opacity: 0;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: 999;
    padding: var(--space-s) var(--space-m);
    background: var(--color-bg);
    color: var(--color-fg);
    text-decoration: underline;

    &:focus {
      inset-inline-start: var(--space-m);
      inset-block-start: var(--space-m);
    }
  }

  .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-reset {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
@layer components {
  .monthly-playlist {
    margin-block: var(--space-l);
  }

  .track-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: track-number;
  }

  .track-item {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-s) 0;
    border-bottom: 1px solid var(--color-border-accent);
    counter-increment: track-number;

    &:last-child {
      border-bottom: none;
    }

    &::before {
      content: counter(track-number);
      font-size: var(--text-s);
      color: var(--color-fg-muted);
      min-width: 1.5rem;
      text-align: right;
      flex-shrink: 0;
    }
  }

  .album-cover {
    width: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    height: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    border-radius: var(--radius-s);
    object-fit: cover;
    flex-shrink: 0;
  }

  .track-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    flex: 1;
  }

  .track-name {
    font-weight: 500;
    color: var(--color-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .track-artist {
    font-size: var(--text-s);
    color: var(--color-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .track-actions-button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-fg-muted);
    cursor: pointer;
    transition: background-color var(--transition-default), color var(--transition-default);

    &:hover,
    &:focus-visible {
      background: var(--color-bg-hover);
      color: var(--color-fg);
    }

    & svg {
      display: block;
    }
  }

  .track-menu {
    margin: 0;
    padding: var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-m);
    min-width: 10ch;
    inset: unset;
    position-area: bottom span-left;
    margin-block-start: var(--space-xs);
    position-try-fallbacks: flip-block;

    &::backdrop {
      background: transparent;
    }
  }

  .track-menu-title {
    display: block;
    padding: var(--space-xs) var(--space-s) var(--space-s);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-fg-muted);
  }

  .track-menu-link {
    display: block;
    padding: var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--text-s);
    color: var(--color-fg-default);
    text-decoration: none;
    transition: background-color var(--transition-fast);

    &:hover,
    &:focus-visible {
      background: var(--color-bg-hover);
      color: var(--color-fg);
    }
  }

  .profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-m);
  }

  .profile-header-right {
    flex-shrink: 0;
  }

  .profile-title {
    display: flex;
    align-items: center;
    gap: var(--space-s);

    h1 {
      margin: 0;
    }

    button {
      aspect-ratio: 1;
      padding: var(--space-xs);
      transition: transform var(--transition-fast);

      svg {
        width: 1rem;
        height: 1rem;
      }

      &:active {
        transform: scale(0.9);
      }
    }
  }

  .profile-badge {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-fg-muted);
    background: var(--color-bg-subtle);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    text-decoration: none;

    &:hover {
      background: var(--color-bg-hover);
    }
  }

  .monthly-playlist--in-progress {
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    background: var(--color-accent-subtle);

    --color-fg-muted: var(--color-accent-fg-muted);
    --color-bg-hover: var(--color-accent-bg-hover);
    --color-bg-elevated: var(--color-accent-bg-elevated);
    --color-border: var(--color-accent-border);

    h2 {
      margin-block-start: 0;
    }
  }

  .playlist-status {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    background: var(--color-accent-muted);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    margin-inline-start: var(--space-s);
    vertical-align: middle;
  }

  .playlist-status-description {
    font-size: var(--text-s);
    color: var(--color-fg-muted);
    margin-bottom: var(--space-m);
  }

  .monthly-playlist--empty {
    padding: var(--space-l);
    text-align: center;
    color: var(--color-fg-muted);
    border: 1px dashed var(--color-border-muted);
    border-radius: var(--radius-m);
  }

  .artist-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .artist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border-accent);

    &:last-child {
      border-bottom: none;
    }
  }

  .artist-name {
    font-weight: 500;
    color: var(--color-fg);
  }
}
@layer components {
  .settings-share-link {
    margin-block-end: var(--space-m);
  }

  .settings-passkeys {
    ul {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-l) 0;
    }

    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-m);
      padding: var(--space-s) 0;
      border-bottom: 1px solid var(--color-border);

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .settings-passkey-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-s);
    max-width: var(--width-form);

    label {
      display: block;
      flex: 1 1 100%;
      font-size: var(--text-s);
      color: var(--color-fg-muted);
      margin-block-end: var(--space-xs);
    }

    input[type="text"] {
      flex: 1;
      min-width: 0;
    }

    button {
      flex-shrink: 0;
    }

    [role="alert"],
    [data-webauthn-register-target="success"] {
      flex: 1 1 100%;
      margin-block-start: var(--space-s);
    }
  }
}