/*
  Ghost Marketing - dashboard design system (dark)
  Product register: dense, technical, dashboard-grade hierarchy on a near-black
  neutral scale, with Ghost's own brand red as the single accent for actions and
  state. Tokens sourced from the "System Throughput Metrics" reference palette
  (bg/surface/border/text) with the accent kept as Ghost's real logo red rather
  than the reference's placeholder value (which was identical to its own
  background and would have erased the brand color entirely). See ../../../DESIGN.md.
*/

/* ------------------------------------------------------------------ tokens */
:root {
  /* Neutrals - near-black dashboard scale */
  --ink: oklch(100% 0 0); /* text-primary #FFFFFF */
  --ink-soft: oklch(88% 0.004 286);
  --muted: oklch(71.2% 0.013 286); /* text-secondary #A1A1AA - >= 4.5:1 on bg and surface */
  --bg: oklch(14.5% 0 0); /* #0A0A0A */
  --surface: oklch(20.5% 0 0); /* #171717 */
  --surface-2: oklch(24% 0.004 286); /* recessed panels, table heads, row hover */
  --line: oklch(27.4% 0.0055 286); /* #27272A */
  --line-strong: oklch(34% 0.008 286);

  /* Brand accent - Ghost's own coral-crimson (sampled from icon/gh0st-logo.png),
     darkened so white button/link text clears 4.5:1. Reserved for actions,
     selection, and state. Never decoration. */
  --accent: oklch(56.5% 0.214 22);
  --accent-hover: oklch(61.5% 0.214 22);
  --accent-active: oklch(51.8% 0.195 22);
  --accent-ink: oklch(99% 0.005 22);
  --accent-soft: oklch(24% 0.06 22); /* dark chip bg */
  --accent-soft-ink: oklch(80% 0.16 22); /* bright text on the dark chip */

  /* Semantic status - dark chips (bg + bright ink), same pattern as accent.
     err kept a distinct hue from the accent so "primary" and "danger" never
     read as the same color at a glance. */
  --ok: oklch(68% 0.19 152);
  --ok-soft: oklch(24% 0.06 152);
  --ok-soft-ink: oklch(80% 0.16 152);
  --err: oklch(68% 0.19 32);
  --err-soft: oklch(24% 0.06 32);
  --err-soft-ink: oklch(80% 0.16 32);
  --warn: oklch(68% 0.15 55);
  --warn-soft: oklch(24% 0.06 55);
  --warn-soft-ink: oklch(80% 0.16 55);

  /* Elevation - dark UI needs deeper, more opaque shadows to read at all */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 8px 30px oklch(0% 0 0 / 0.55), 0 2px 8px oklch(0% 0 0 / 0.4);

  /* Radius */
  --radius-sm: 8px; /* control */
  --radius-md: 8px; /* control */
  --radius-lg: 15px; /* card */

  /* Spacing */
  --space-base: 8px;
  --space-gap: 16px;
  --space-card: 24px;
  --space-section: 80px;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  /* Motion - ease-out-expo, no bounce */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* z-index - only the layers this app actually has */
  --z-sticky: 10;
  --z-dropdown: 20;
}

/* -------------------------------------------------------------------- base */
* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent-soft-ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-soft-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

code {
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.muted {
  color: var(--muted);
}

.sub {
  color: var(--muted);
  margin: 0 0 1.5rem;
  max-width: 65ch;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: var(--z-dropdown);
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 56px;
  padding: 0 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 0.9375rem;
  color: var(--ink);
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  height: 20px;
  width: auto;
  flex: none;
  display: block;
}

.nav {
  display: none;
  gap: 4px;
}

.nav a {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.nav a:hover {
  color: var(--ink);
  text-decoration: none;
  background: oklch(100% 0 0 / 0.06);
}

.nav a.active {
  color: var(--ink);
  background: var(--accent-soft);
}

.topbar-spacer {
  flex: 1;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex: none;
}

.user-email {
  color: var(--muted);
  font-size: 0.8125rem;
}

.btn-link {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn-link:hover {
  border-color: var(--muted);
  color: var(--ink);
}

/* mobile nav disclosure - native <details>, no JS */
.nav-mobile {
  margin-left: auto;
}

.nav-mobile summary {
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.nav-mobile summary::-webkit-details-marker {
  display: none;
}

.nav-mobile[open] summary {
  border-color: var(--muted);
}

.nav-mobile-panel {
  position: absolute;
  right: 20px;
  top: 56px;
  z-index: var(--z-dropdown);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}

.nav-mobile-panel a {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.nav-mobile-panel a:hover {
  background: var(--surface);
  text-decoration: none;
}

@media (min-width: 760px) {
  .nav {
    display: flex;
  }
  .nav-mobile {
    display: none;
  }
}

/* -------------------------------------------------------------------- main */
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

/* ------------------------------------------------------------------- flash */
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 0.875rem;
  border: 1px solid transparent;
  animation: flash-in var(--dur) var(--ease);
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flash.error {
  background: var(--err-soft);
  color: var(--err-soft-ink);
  border-color: oklch(68% 0.19 32 / 0.35);
}

.flash.ok {
  background: var(--ok-soft);
  color: var(--ok-soft-ink);
  border-color: oklch(68% 0.19 152 / 0.35);
}

.flash.warn {
  background: var(--warn-soft);
  color: var(--warn-soft-ink);
  border-color: oklch(68% 0.15 55 / 0.35);
}

/* -------------------------------------------------------------------- card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-card);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------- stat grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-gap);
  margin-bottom: 8px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.stat .n {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat .l {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  margin-top: 4px;
}

/* the one hero metric per page - the reference's display-lg moment */
.stat.primary {
  background: var(--accent-soft);
  border-color: oklch(80% 0.16 22 / 0.35);
}

.stat.primary .n {
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.04;
  color: var(--accent-soft-ink);
}

.stat.primary .l {
  color: var(--accent-soft-ink);
  opacity: 0.85;
}

.stat.warn .n {
  color: var(--warn);
}

.stat.danger .n {
  color: var(--err);
}

/* ------------------------------------------------------------------- rows */
.row {
  display: flex;
  gap: var(--space-gap);
  align-items: center;
  flex-wrap: wrap;
}

.spacer {
  flex: 1;
}

/* ------------------------------------------------------------------ tables */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td.wrap {
  white-space: normal;
}

th {
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-2);
  position: sticky;
  top: 0;
}

tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: background var(--dur-fast) var(--ease);
}

tbody tr:hover {
  background: var(--surface-2);
}

/* ------------------------------------------------------------------- form */
label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 14px 0 5px;
}

label:first-child {
  margin-top: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea {
  min-height: 360px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  resize: vertical;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.field {
  flex: 1;
  min-width: 220px;
}

.form-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

/* ------------------------------------------------------------------ button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:hover {
  background: var(--accent-hover);
  text-decoration: none;
}

.btn:active {
  background: var(--accent-active);
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn.secondary {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}

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

.btn.danger {
  background: var(--surface-2);
  color: var(--err-soft-ink);
  border-color: oklch(68% 0.19 32 / 0.35);
  padding: 6px 12px;
  font-size: 0.8125rem;
}

.btn.danger:hover {
  background: var(--err-soft);
  border-color: var(--err);
}

.inline {
  display: inline;
  margin: 0;
}

/* -------------------------------------------------------------------- pill */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.pill.running,
.pill.queued {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  border-color: oklch(80% 0.16 22 / 0.35);
}

.pill.done {
  background: var(--ok-soft);
  color: var(--ok-soft-ink);
  border-color: oklch(80% 0.16 152 / 0.35);
}

.pill.failed {
  background: var(--err-soft);
  color: var(--err-soft-ink);
  border-color: oklch(80% 0.16 32 / 0.35);
}

/* --------------------------------------------------------------- progress */
.progress {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin: 4px 0 10px;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  margin-right: 6px;
  animation: live-pulse 1.6s var(--ease) infinite;
}

@keyframes live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* --------------------------------------------------------------- empty state */
.empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
}

.empty p {
  margin: 0 0 14px;
}

.empty .btn,
.empty .btn.secondary {
  margin-top: 2px;
}

/* --------------------------------------------------------------- auth page */
.auth-shell {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  padding: var(--space-section) 20px 0;
  text-align: center;
}

/* ambient supporting glow behind the focal content - CSS only, no canvas/WebGL
   dependency (see DESIGN.md "Not carried over from the reference"). Sized in
   vw so it can never force horizontal scroll on narrow viewports. */
.auth-shell::before {
  content: "";
  position: absolute;
  top: 220px;
  left: 50%;
  width: min(480px, 90vw);
  height: min(480px, 90vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, oklch(56.5% 0.214 22 / 0.22), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: ambient-drift 8s var(--ease) infinite alternate;
}

@keyframes ambient-drift {
  from {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* staggered entrance - already visible by default (animation-fill-mode: both
   only affects the transient reveal, never gates the final visible state) */
.auth-shell .brand-mark,
.auth-shell h1,
.auth-shell .sub,
.auth-shell .card {
  animation: auth-reveal 500ms var(--ease) both;
}

.auth-shell h1 {
  animation-delay: 60ms;
}

.auth-shell .sub {
  animation-delay: 120ms;
}

.auth-shell .card {
  animation-delay: 180ms;
}

@keyframes auth-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell::before {
    animation: none;
    opacity: 0.85;
    transform: translate(-50%, -50%);
  }
}

.auth-shell .brand-mark {
  display: block;
  height: 44px;
  width: auto;
  margin: 0 auto 20px;
}

.auth-shell h1 {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
}

.auth-note {
  font-size: 0.8125rem;
  margin: 14px 0 0;
}

/* --------------------------------------------------- template editor split */
.editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .editor-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.preview-card {
  position: sticky;
  top: 76px;
}

.preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.preview-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.preview-frame {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Emails render on light backgrounds; show the preview as recipients see it. */
  background: #ffffff;
}

@media (max-width: 900px) {
  .preview-card {
    position: static;
  }
  .preview-frame {
    height: 380px;
  }
}