/*
 * Shared chrome + base resets for the Pluripo desktop shell.
 *
 * Styled ENTIRELY off the brand tokens in tokens.css (--color-*, --space-*,
 * --radius-*, --font-*, --shadow-*). Never reference --vscode-* here — this is
 * a standalone Tauri webview, not the VSCode host.
 *
 * This sheet holds only the truly shared bits: base resets and the brand
 * primitives (.brand, .btn) reused across screens. The per-screen layout
 * (sign-in band, recent-projects, the 3-pane workspace grid) lives in
 * src/app/screens.css; per-module component styles live in each module's
 * style.css. All three are bundled by esbuild into dist/app.css.
 *
 * Theme model: one of ten named themes (accent × light/dark), or unset = follow
 * the OS (the default). src/theme.js sets data-theme (absent while unset) plus an
 * always-present data-mode ("light"/"dark") from localStorage; data-contrast
 * drives the high-contrast overlay. tokens.css swaps the semantic aliases. No
 * data-theme is seeded in index.html; a CSS-only FOUC guard follows the OS.
 */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
 * Brand chrome shared across screens.
 * ============================================================ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.brand__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-circle);
  background: var(--color-brand);
  box-shadow: var(--glow-violet-sm);
}

/*
 * The one small brand accent beside the wordmark: a "Public Beta" pill.
 * Mono micro-label (uppercase, wide-tracked) so it reads as intentional brand,
 * not a generic chip; a subtle violet tint that stays calm, never a warning.
 * Styled off the literal --violet-* ramp so it stays violet in every theme.
 */
.beta-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--violet-700);
  background: color-mix(in oklab, var(--violet-500) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--violet-500) 28%, transparent);
}

:root[data-mode="dark"] .beta-badge {
  color: var(--violet-200);
  background: color-mix(in oklab, var(--violet-400) 16%, transparent);
  border-color: color-mix(in oklab, var(--violet-400) 34%, transparent);
}

/* Full-pill button — the brand's button shape. */
.btn {
  appearance: none;
  border: var(--border-default);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.btn:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
}

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

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

.btn--brand {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
}

.btn--brand:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

/* ============================================================
 * pl-dialog-* — the shared styled modal shell (src/dialogs.js).
 * The centered confirm / message / choice dialog used for every
 * destructive or consequential action. Kept byte-for-brand-identical
 * to the web shell's block (web/styles/playground.css) so the two ESM
 * shells look the same; both draw only from the brand tokens.
 * ============================================================ */

.pl-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--neutral-d-950) 55%, transparent);
  backdrop-filter: blur(3px);
  animation: pl-dialog-fade 120ms ease;
}

.pl-dialog {
  width: 100%;
  max-width: 28rem;
  padding: var(--space-7, 1.75rem);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  outline: none;
  animation: pl-dialog-rise 140ms ease;
}

.pl-dialog-inner {
  display: contents;
}

.pl-dialog-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.pl-dialog-message {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.pl-dialog-title + .pl-dialog-message {
  margin-top: var(--space-3);
}

.pl-dialog-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  max-height: 50vh;
  overflow-y: auto;
}

.pl-dialog-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.pl-dialog-choice:hover {
  background: var(--color-surface-raised);
}

.pl-dialog-choice.is-selected {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.pl-dialog-choice-radio {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brand);
}

.pl-dialog-choice-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.pl-dialog-choice-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

.pl-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-6);
}

.pl-dialog-btn {
  appearance: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.pl-dialog-btn:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--color-brand);
  outline-offset: 2px;
}

.pl-dialog-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pl-dialog-btn--ghost {
  border: var(--border-default);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.pl-dialog-btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-raised);
}

.pl-dialog-btn--primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.pl-dialog-btn--primary:hover:not(:disabled) {
  background: var(--color-brand-hover);
}

/* Destructive variant — visibly distinct, muted red (never a saturated alarm). */
.pl-dialog-btn--danger {
  background: var(--status-error-dot);
  color: var(--neutral-0);
}

.pl-dialog-btn--danger:hover:not(:disabled) {
  background: var(--status-error-text);
}

.pl-dialog-btn--danger:focus-visible {
  outline-color: var(--status-error-dot);
}

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

@keyframes pl-dialog-rise {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-dialog-overlay,
  .pl-dialog {
    animation: none;
  }
  .pl-dialog-choice,
  .pl-dialog-btn {
    transition: none;
  }
}