/* Reusable UI components: the one-time secret reveal and the confirm dialog.
 * Colors come exclusively from tokens.css. */

@layer components {
  /* One-time secrets (visitor/user passwords) — visually distinct so the
   * "shown once" moment is unmissable. */
  .one-time-secret {
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
  }
  .one-time-secret code { font-size: var(--text-md); }
  .one-time-secret .warning {
    color: var(--color-danger);
    font-size: var(--text-xs);
    margin: var(--space-2) 0 0;
  }

  /* Page header: title with its primary action alongside. */
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
  }
  .page-header h1 { margin: 0; }

  /* Buttons (rendered by ui_button). Variants: primary (one per screen),
   * secondary (default), danger, ghost (inline copy/reveal, nav). Sizes:
   * md (default) and sm for table rows and inline use. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-weight: 550;
    line-height: 1.25;
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
  .btn--primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
  .btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); }
  .btn--secondary:hover { background: var(--color-surface-hover); color: var(--color-text); }
  .btn--danger { color: var(--color-danger); border-color: currentColor; }
  .btn--danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
  .btn--ghost { color: var(--color-text-muted); }
  .btn--ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }
  .btn--sm {
    min-height: 1.75rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
  }
  .btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn-form { display: inline-block; }

  /* Radio choice group (the appearance control). */
  .choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0;
    border: 0;
  }
  .choice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.25rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-weight: 550;
    cursor: pointer;
  }
  .choice:hover { background: var(--color-surface-hover); }
  .choice:has(input:checked) { border-color: var(--color-accent); color: var(--color-accent); }
  .choice:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); }
  .choice input { margin: 0; accent-color: var(--color-accent); }

  /* Visibility badges. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    font-size: var(--text-xs);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
  }
  .badge--public { color: var(--color-success); border-color: currentColor; }

  /* Settings sections and the empty state. */
  .panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .panel h2 { margin-top: 0; font-size: var(--text-md); }
  .panel--danger { border-color: var(--color-danger); }

  /* Changelog: one panel per day, entries separated by rules inside it. */
  .changelog-day h2 {
    font-size: var(--text-xs);
    font-weight: 550;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
  }
  .changelog-day article + article {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }
  .changelog-day h3 { font-size: var(--text-sm); margin: 0 0 var(--space-1); }
  .changelog-day article p { margin: 0; }

  /* MCP connection snippets on the account and token pages. */
  .connection-snippets h3 { font-size: var(--text-sm); margin: var(--space-5) 0 var(--space-2); }
  .connection-snippets pre {
    background: var(--color-code-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    overflow-x: auto;
    font-size: var(--text-xs);
    margin: 0 0 var(--space-4);
  }
  .connection-snippets pre code { background: none; padding: 0; }

  .empty-state {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
  }

  /* Sign-in card. */
  .auth-card {
    max-width: 24rem;
    margin: var(--space-7) auto 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
  }

  /* Confirm dialog for destructive actions (replaces window.confirm). */
  .confirm-dialog {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-5);
    max-width: 24rem;
  }
  .confirm-dialog::backdrop { background: var(--color-scrim); }
  .confirm-dialog-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-5);
  }
}