/* FileChanger — "the conversion bench".
   The product turns one document into another, so the whole system is built
   around a single idea: source on one side, converted output on the other, a
   cyan source and pink output, matching the two halves of the page in
   img/favicon.svg: cyan to blue top-left, pink to gold bottom-right, both
   running at 135 degrees. (The icon's arrows wear each other's gradient on
   purpose, so do not read the scheme off those.) --primary is the teal of the
   icon's folded corner and --on-brand the slate of its centre circle.
   Use the original colours for fills and darker shades for text on light
   surfaces; bright cyan and pink alone do not contrast enough with white. */

:root {
  --brand-cyan: #00F2FE;
  --brand-pink: #FA709A;
  --brand-blue: #4FACFE;
  --brand-gold: #FEE140;
  --source-gradient: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue));
  --output-gradient: linear-gradient(135deg, var(--brand-pink), var(--brand-gold));
  --primary-fill: var(--brand-cyan);
  --primary-fill-hover: #00D9E5;
  --accent-fill: var(--brand-pink);
  --on-brand: #0F172A;
  --bg: #F5FBFC;
  --surface: #FFFFFF;
  --surface-2: #EDF8FA;
  --ink: #0F172A;
  --muted: #64748B;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --primary: #006C78;
  --primary-strong: #00545E;
  --on-primary: var(--on-brand);

  --accent: #B42360;
  --accent-soft: rgba(250, 112, 154, 0.12);
  --source: var(--brand-cyan);

  --code-bg: #0F172A;
  --code-ink: #E2E8F0;

  --danger: #E11D48;
  --danger-soft: #FFE4E6;
  --success: #16A34A;

  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 40px -20px rgba(15, 23, 42, 0.28);

  --font-mono: "Space Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #020617;
  --surface: #0F172A;
  --surface-2: #1E293B;
  --ink: #F8FAFC;
  --muted: #94A3B8;
  --border: #1E293B;
  --border-strong: #334155;

  --primary: var(--brand-cyan);
  --primary-strong: #06B6D4;
  --on-primary: #020617;

  --accent: var(--brand-pink);
  --accent-soft: rgba(250, 112, 154, 0.16);
  --source: var(--brand-cyan);

  --code-bg: #020617;
  --code-ink: #F1F5F9;

  --danger: #F43F5E;
  --danger-soft: #4C0519;
  --success: #10B981;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 22px 46px -22px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #020617;
    --surface: #0F172A;
    --surface-2: #1E293B;
    --ink: #F8FAFC;
    --muted: #94A3B8;
    --border: #1E293B;
    --border-strong: #334155;
    --primary: var(--brand-cyan);
    --primary-strong: #06B6D4;
    --on-primary: #020617;
    --accent: var(--brand-pink);
    --accent-soft: rgba(250, 112, 154, 0.16);
    --source: var(--brand-cyan);
    --code-bg: #020617;
    --code-ink: #F1F5F9;
    --danger: #F43F5E;
    --danger-soft: #4C0519;
    --success: #10B981;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -14px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 22px 46px -22px rgba(0, 0, 0, 0.7);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Mono eyebrow used across sections: a real signal, not decoration. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}

.eyebrow .arrow {
  color: var(--accent);
}

/* ---- Header ---- */
.site-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.logo {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* The same two-colour signature appears on every page. */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue), var(--brand-pink), var(--brand-gold));
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.main-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  transition: color 0.15s, background-color 0.15s;
}

.main-nav a:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--brand-cyan) 12%, var(--surface));
}

/* ---- Main ---- */
main {
  padding: 2rem 0 3rem;
  min-height: calc(100vh - 220px);
}

/* ---- Hero: the conversion bench ---- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 0 3rem;
}

.hero-copy h1 {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1rem 0 1rem;
}

.hero-copy h1 .out {
  color: var(--accent);
}

.hero .tagline {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 34ch;
  margin-bottom: 1.75rem;
}

.cta-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---- Transmutation panel: the signature element ----
   Same content, two encodings. The source pane is fixed; the output pane cycles
   through formats to show the one thing FileChanger does. */
.transmute {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.75rem;
}

/* The trust links, sat next to the upload surfaces rather than in the footer. */
.trust-callout {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 46rem;
}

.doc-card {
  background: var(--code-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: #CBD5E1;
}

.doc-dots {
  display: inline-flex;
  gap: 0.3rem;
}

.doc-dots span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.format-chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  letter-spacing: 0.02em;
}

.doc-card.source .format-chip {
  color: var(--source);
}

.doc-card.output .format-chip {
  color: var(--brand-pink);
}

.doc-body {
  padding: 1rem 1.05rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--code-ink);
  white-space: pre;
  overflow: hidden;
  min-height: 9.5rem;
}

.doc-body .tok-h {
  color: var(--brand-pink);
}

.doc-body .tok-em {
  color: var(--brand-cyan);
}

.doc-body .tok-mut {
  color: #94A3B8;
}

/* The output pane stacks three encodings and cross-fades between them. Three
   panes on a 15s loop, each shown for a third with a short overlap so one
   format is always on screen, no blank gap. */
.output-stack {
  display: grid;
  min-height: 9.5rem;
}

.output-stack .doc-body {
  grid-area: 1 / 1;
  animation: cycle 15s infinite;
  opacity: 0;
}

.output-stack .doc-body:nth-child(1) { animation-delay: 0s; }
.output-stack .doc-body:nth-child(2) { animation-delay: 5s; }
.output-stack .doc-body:nth-child(3) { animation-delay: 10s; }

@keyframes cycle {
  0% { opacity: 0; transform: translateY(5px); }
  3% { opacity: 1; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(0); }
  35% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 0; transform: translateY(-5px); }
}

/* Source and output frames repeat the colours of the conversion mark. */
.doc-card.source { border-top: 3px solid var(--brand-cyan); }
.doc-card.output { border-top: 3px solid var(--brand-pink); }

/* The conversion arrow connects the two document states. */
.transmute-arrow {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  animation: nudge 2.6s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); opacity: 0.75; }
  50% { transform: translateX(3px); opacity: 1; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s, box-shadow 0.15s;
}

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

/* Paint gradients across the transparent border too; padding-box positioning
   repeats a sliver of the opposite end of the gradient along the edge. */
.btn-primary {
  background: var(--source-gradient) border-box no-repeat;
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-fill-hover);
  box-shadow: var(--shadow);
}

.btn-secondary {
  background: var(--output-gradient) border-box no-repeat;
  color: var(--on-brand);
  border-color: transparent;
}

.btn-secondary:hover {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-brand);
}

.btn-danger {
  background-color: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

.btn-danger:hover {
  background-color: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.btn-google, .btn-github {
  background-color: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  justify-content: center;
}

.btn-google:hover, .btn-github:hover {
  border-color: var(--primary);
}

/* ---- Section scaffolding ---- */
.section {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
}

.section-head {
  margin-bottom: 2rem;
}

.section-head h2 {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin-top: 0.4rem;
}

/* keep legacy hooks the markup/tests still reference */
.features { padding: 3rem 0; border-top: 1px solid var(--border); }
.features h2, .formats-section h2 {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.formats-section { padding: 3rem 0; border-top: 1px solid var(--border); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-left-color: var(--accent);
}

.feature-card h3 {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: var(--muted);
  font-size: 0.94rem;
}

/* ---- Formats: genuinely a list of mono tokens ---- */
.format-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 620px;
  margin-top: 1.75rem;
}

.format-column h3 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.format-column ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.format-column li {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.2rem 0.6rem;
}

/* ---- Dashboard ---- */
.dashboard {
  max-width: 820px;
  margin: 0 auto;
}

.dashboard h1, .api-key-page h1, .convert-page h1, .key-created h1 {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.dashboard h1 {
  margin-bottom: 0.4rem;
}

.dashboard-plan {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

/* One instrument rather than a cabinet of identical boxes: a gauge for the
   limit the account is actually running out of, and the same bar at a smaller
   size for what that usage is made of. */
.usage-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gauge {
  padding: 1.75rem;
}

.gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.gauge-pct {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.gauge-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6ch;
  margin: 0.4rem 0 1rem;
  font-family: var(--font-mono);
}

.gauge-used {
  font-size: clamp(2.2rem, 7vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  /* A mono space at 3rem is a canyon between the figure and its unit. */
  word-spacing: -0.25em;
}

.gauge-limit {
  font-size: 0.95rem;
  color: var(--muted);
}

/* Shared proportion bar. The fill width is set inline from the rendered
   percentage, the one number CSS cannot work out for itself. */
.bar {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--primary);
}

.gauge-bar {
  height: 12px;
}

/* Past 80% the gauge stops being information and starts being a warning. Gold
   is reserved for conversion, so the alarm colour is the error colour. */
.gauge-bar.is-hot .bar-fill {
  background: var(--danger);
}

.gauge-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.9rem;
}

.gauge-fact {
  display: inline-flex;
  gap: 0.6ch;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.gauge-fact strong {
  color: var(--ink);
}

.breakdown {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 1.25rem 1.75rem 1.5rem;
}

.breakdown-list {
  list-style: none;
  padding: 0;
  margin-top: 0.9rem;
  display: grid;
  gap: 0.6rem;
}

.breakdown-list li {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto 5rem;
  align-items: center;
  gap: 1rem;
}

.breakdown-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
}

.breakdown-bar {
  height: 8px;
}

.breakdown-value,
.breakdown-cost {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The bytes are the working, the money is the answer, so only one of the two
   columns gets the reader's full attention. */
.breakdown-value {
  color: var(--muted);
}

/* Sits on the same right-hand edge as the cost column above it, with the rule
   doing the summing-up that a total row usually spells out. */
.breakdown-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
}

.breakdown-total strong {
  font-size: 1.1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.breakdown .gauge-foot {
  margin-top: 0.75rem;
}

/* Narrow: the bar drops to its own row under the figures rather than being
   squeezed between them. Placed explicitly, since DOM order would otherwise
   push the two numbers below it. */
@media (max-width: 560px) {
  .breakdown-list li {
    grid-template-columns: 1fr auto auto;
  }

  .breakdown-label,
  .breakdown-value,
  .breakdown-cost {
    grid-row: 1;
  }

  .breakdown-bar {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---- API key pages ---- */
.api-key-page {
  max-width: 640px;
  margin: 0 auto;
}

.api-key-page h2 {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  margin: 2rem 0 0.75rem;
}

.key-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.key-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.key-item .key-info {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

.key-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.key-info p {
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.key-info strong {
  color: var(--ink);
}

.key-info code {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.85rem;
}

.status-active { color: var(--success); font-weight: 600; }
.status-disabled { color: var(--danger); font-weight: 600; }

.key-created {
  max-width: 640px;
  margin: 0 auto;
}

.key-created p {
  margin-bottom: 1rem;
  color: var(--muted);
}

.api-key {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  word-break: break-all;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-strong);
}

/* ---- Forms ---- */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label,
.form-row-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

/* In the convert row, the label/select grid gap handles the spacing. */
.form-row-label {
  margin-bottom: 0;
}

.form-group input[type="text"],
.form-group input[type="file"],
.form-group select,
.form-row-select {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* The browser's own "Choose file" button ignores the theme and sits light grey
   on the dark card, so dress it like the rest of the form. */
.form-group input[type="file"]::file-selector-button {
  margin-right: 0.7rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

.form-group input:focus,
.form-group select:focus,
.form-row-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Convert page: the form is itself a from -> to ---- */
.convert-page {
  max-width: 620px;
  margin: 0 auto;
}

.convert-page > p {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.convert-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

/* From/To selects flank a gold arrow, echoing the hero. Labels live on their
   own grid row so the arrow centres against the selects, not the whole stack. */
.form-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "from-label .     to-label"
    "from-sel   arrow to-sel";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.form-row-label--from { grid-area: from-label; }
.form-row-label--to { grid-area: to-label; }
.form-row-select--from { grid-area: from-sel; }
.form-row-select--to { grid-area: to-sel; }

.form-row .convert-arrow {
  grid-area: arrow;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

.convert-form .btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

.convert-error {
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  color: var(--danger);
  font-size: 0.92rem;
}

.convert-error code {
  font-family: var(--font-mono);
}

/* Guests convert without an account; this says what signing in adds, so it
   reads as an offer rather than the warning .convert-error is. */
.convert-page > p.convert-guest {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  color: var(--ink);
  font-size: 0.92rem;
}

/* ---- Documentation ---- */
.docs-page {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  max-width: 1140px;
  margin: 0 auto;
}

.docs-sidebar {
  position: sticky;
  top: 5rem;
  height: fit-content;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}

.docs-sidebar h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.docs-sidebar ul { list-style: none; padding: 0; margin: 0; }
.docs-sidebar li { margin-bottom: 0.15rem; }

.docs-sidebar a {
  display: block;
  padding: 0.4rem 0.65rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.88rem;
  border-left: 2px solid transparent;
}

.docs-sidebar a:hover {
  background: var(--surface-2);
  color: var(--primary);
  border-left-color: var(--accent);
}

.docs-content { min-width: 0; }

.docs-hero {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.docs-hero h1 {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.docs-hero .tagline { color: var(--muted); }

.docs-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.5rem;
}

.docs-section h2 {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.docs-section h3 {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}

.docs-section h3:first-of-type { margin-top: 1rem; }
.docs-section p { margin-bottom: 1rem; color: var(--muted); }
.docs-section ul { margin-bottom: 1rem; padding-left: 1.4rem; }
.docs-section li { margin-bottom: 0.45rem; color: var(--muted); }

.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.docs-table th, .docs-table td {
  padding: 0.65rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.docs-table th {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
}

.docs-table td { font-size: 0.9rem; color: var(--muted); }

.docs-table code,
.docs-section :not(pre) > code {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  font-size: 0.84rem;
}

.docs-cta {
  background: var(--primary-fill);
  color: var(--on-primary);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  margin-top: 2rem;
}

.docs-cta h2 {
  font-family: var(--font-mono);
  color: var(--on-primary);
  margin-bottom: 1rem;
  border-bottom: none;
  padding-bottom: 0;
}

.docs-cta .btn-primary {
  background: var(--output-gradient) border-box no-repeat;
  color: var(--on-brand);
}

.docs-cta .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-fill) 85%, #fff);
}

/* ---- Code blocks + tabs ---- */
.code-tabs { margin-top: 1rem; }

.code-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.code-tab {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  transition: color 0.15s, border-color 0.15s;
}

.code-tab:hover { color: var(--ink); }

.code-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.code-tabs-content {
  background: var(--code-bg);
  border-radius: 0 0 var(--radius) var(--radius);
}

.code-tab-panel { display: none; }
.code-tab-panel.active { display: block; }
.code-tab-panel .code-block { margin: 0; border-radius: 0 0 var(--radius) var(--radius); }

.code-block-wrapper { position: relative; margin-bottom: 1rem; }

.code-block {
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  overflow-x: auto;
}

/* Syntax highlighting: skylighting token classes, coloured for the dark code
   panel (which stays dark in both themes). */
.code-block .kw, .code-block .cf, .code-block .bu, .code-block .ex { color: var(--brand-cyan); } /* keywords, control flow, builtins */
.code-block .dt { color: var(--brand-blue); } /* types */
.code-block .fu { color: var(--brand-cyan); } /* functions */
.code-block .st, .code-block .ss, .code-block .vs, .code-block .ch { color: var(--brand-pink); } /* strings */
.code-block .dv, .code-block .bn, .code-block .fl, .code-block .cn, .code-block .sc { color: var(--brand-gold); } /* numbers, constants */
.code-block .co, .code-block .do, .code-block .an, .code-block .cv, .code-block .in { color: #94A3B8; font-style: italic; } /* comments */
.code-block .im, .code-block .pp, .code-block .ot { color: var(--brand-blue); } /* imports, preprocessor */
.code-block .va, .code-block .at { color: #E2E8F0; } /* variables, attributes */
.code-block .op { color: #CBD5E1; } /* operators */
.code-block .er, .code-block .al, .code-block .wa { color: var(--danger); } /* errors */

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: #CBD5E1;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
  z-index: 1;
}

.code-block-wrapper:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.copy-icon { line-height: 1; }
.copy-icon.copied { display: none; color: var(--success); }
.show-copied .copy-icon.default { display: none; }
.show-copied .copy-icon.copied { display: inline; }

/* ---- Sign in ---- */
.sign-in-page {
  max-width: 400px;
  margin: 3rem auto;
  text-align: center;
}

.sign-in-page h1 {
  font-family: var(--font-mono);
  margin-bottom: 1rem;
}

.sign-in-page p { color: var(--muted); }

.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---- Error pages ---- */
.error-page {
  max-width: 600px;
  margin: 3rem auto;
  text-align: center;
}

.error-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.error-card h1 { font-family: var(--font-mono); margin-bottom: 1rem; }
.error-reference { color: var(--muted); font-size: 0.9rem; font-family: var(--font-mono); }

/* ---- Policy content ----
   The shared policy documents (ServerUtils.Privacy) arrive unstyled: this sets
   a readable measure centred in the page container, and gives them the guide
   pages' type, mono headings over muted body copy. Long URLs and addresses may
   break anywhere rather than push the page sideways on a phone. */
.policy-content {
  max-width: 52rem;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.policy-content h1 {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 4.5vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

/* The "FileChanger · Last updated" line straight under the title. */
.policy-content h1 + p {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.policy-content h2 {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  margin: 2.25rem 0 0.6rem;
}

.policy-content p { color: var(--muted); }
.policy-content p + p { margin-top: 0.7rem; }

.policy-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0 1.25rem;
}

.policy-content hr + p { font-size: 0.85rem; }

/* ---- Footer ----
   Two centred rows: the site's own links, then the policies in the mono
   eyebrow type. Each row is a flex line, so the spaces around the shared
   .link-sep bullets collapse and the gap alone spaces them; on a phone the
   bullets go and the gap is all that is left. */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
}

.site-footer .link-sep { color: var(--border-strong); }

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover { color: var(--primary); }

.footer-legal {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Phones: no separators, just gaps, so no bullet is left hanging off a line. */
@media (max-width: 560px) {
  .site-footer nav { column-gap: 1.25rem; row-gap: 0.5rem; }
  .site-footer .link-sep { display: none; }
}

/* ---- Consent panel ----
   ServerUtils.Consent keeps its floating-card position in a zero-specificity
   :where() fallback; these rules restyle the card in the site's theme (dark
   included) and leave its position, and its [hidden] state, alone. */
.consent-panel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  font: inherit;
  padding: 1.25rem 1.4rem;
}

.consent-panel h2 {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.consent-panel p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

/* Accept and reject get the same weight: neither is the "right" answer. */
.consent-panel button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  margin: 0 0.4rem 0.4rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

.consent-panel button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.consent-panel a { font-size: 0.9rem; }

/* ---- Skip nav ---- */
.skip-nav {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary-fill);
  color: var(--on-primary);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-nav:focus { top: 0; }

/* ---- Theme toggle ---- */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--primary);
}

.theme-icon { font-size: 0.9rem; line-height: 1; }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-icon-light { display: none; }
  :root:not([data-theme]) .theme-icon-dark { display: inline; }
}

/* ---- Focus visibility (quality floor) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .site-header .container { flex-wrap: wrap; }
  .main-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; }

  .hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 0;
  }

  .docs-page { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; }
  .docs-sidebar ul { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .docs-sidebar li { margin-bottom: 0; }
}

@media (max-width: 560px) {
  .main-nav a { padding: 0.4rem 0.5rem; font-size: 0.85rem; }
  .transmute { grid-template-columns: 1fr; }
  .transmute-arrow { transform: rotate(90deg); animation: none; }
  .format-columns { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "from-label"
      "from-sel"
      "arrow"
      "to-label"
      "to-sel";
  }
  .form-row .convert-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---- Reduced motion: hold the output pane still ---- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .output-stack .doc-body {
    animation: none;
    opacity: 0;
  }
  .output-stack .doc-body:first-child { opacity: 1; }
  .transmute-arrow { animation: none; }
}

/* ---- Demo page: two panes, live conversion ---- */
.demo-page {
  max-width: 960px;
  margin: 0 auto;
}

.demo-page > p {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.demo-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.demo-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.demo-input,
.demo-output {
  min-height: 320px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.5;
}

.demo-input {
  width: 100%;
  resize: vertical;
  background: var(--surface);
  color: var(--ink);
}

.demo-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.demo-output {
  overflow: auto;
  background: var(--code-bg);
  color: var(--code-ink);
}

.demo-output-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  color: var(--code-ink);
}

.demo-output-error {
  color: var(--code-ink);
  font-family: var(--font-body);
  opacity: 0.85;
}

@media (max-width: 720px) {
  .demo-panes {
    grid-template-columns: 1fr;
  }
}

/* ---- Pricing + per-conversion landing pages ---- */
.pricing-page, .formats-index, .format-pair-page {
  padding: 3rem 0;
}

.pricing-page h1, .formats-index h1, .format-pair-page h1 {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.pricing-page .tagline, .formats-index .tagline, .format-pair-page .tagline {
  color: var(--muted);
  max-width: 46rem;
}

.pricing-price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.pricing-card ul {
  list-style: none;
  color: var(--muted);
  font-size: 0.94rem;
  margin-bottom: 1rem;
}

.pricing-card li {
  padding: 0.2rem 0;
}

.pricing-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 1.5rem;
  max-width: 46rem;
}

.formats-related, .formats-code, .formats-about, .formats-faq {
  margin-top: 2rem;
}

.formats-related h2, .formats-code h2, .formats-about h2, .formats-faq h2 {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.formats-about p, .formats-faq p {
  color: var(--muted);
  max-width: 46rem;
}

.formats-faq-entry {
  margin-top: 1.2rem;
}

.formats-faq-entry h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.formats-code > p {
  color: var(--muted);
  margin-bottom: 1rem;
  max-width: 46rem;
}

.formats-index-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.formats-index-links a {
  font-size: 0.92rem;
}

/* The from/to picker reuses the convert-form card; it just needs a width cap. */
.formats-picker {
  max-width: 640px;
  margin: 2rem 0 0.5rem;
}

.formats-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.9rem;
}

.formats-family {
  margin-top: 2.5rem;
}

.formats-family h2 {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.formats-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  max-width: 640px;
}

.formats-group summary {
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
}

.formats-group summary:hover {
  color: var(--primary);
}

.formats-group[open] summary {
  border-bottom: 1px solid var(--border);
}

.formats-group .formats-index-links {
  padding: 0.75rem 0.9rem;
}

.formats-count {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- Guides: long-form advice pages ----
   The checklist is the reason anyone links to a page like this, so it gets the
   structure and the accent; the prose around it stays deliberately quiet. */
.guide {
  padding: 3rem 0;
  max-width: 46rem;
}

.guide h1 {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 4.5vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0.3rem 0 0.6rem;
}

.guide-lede {
  font-size: 1.05rem;
  color: var(--muted);
}

.guide section {
  margin-top: 2.5rem;
}

.guide h2 {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
}

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

.guide p + p {
  margin-top: 0.7rem;
}

/* The one loud element on the page: a federal warning, quoted as one. */
.guide-quote {
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}

.guide-quote p {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.5;
}

.guide-quote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-style: normal;
  color: var(--muted);
}

/* One list treatment for the whole page. Every list here is genuinely ordered
   (the checks by how much they save you, the steps by what to do first), so a
   mono numeral in the accent does for all of them; three different markers read
   as three unrelated lists. */
.guide-list {
  list-style: none;
  counter-reset: item;
  margin-bottom: 0.9rem;
}

.guide-list li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: 0.2rem 0.6rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
  color: var(--ink);
}

.guide-list li::before {
  content: counter(item);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--accent);
}

.guide-list strong {
  font-weight: 600;
}

.guide-list span {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.94rem;
}

/* Three cards squeezed into the article measure wrap every title, so go two up
   and let the odd one out take the full width. */
.guide .feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.guide .feature-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.guide-sources {
  list-style: none;
  font-size: 0.92rem;
}

.guide-sources li {
  padding: 0.2rem 0;
}

@media (max-width: 560px) {
  .guide-list li {
    grid-template-columns: 1.4rem 1fr;
  }
}