/* 1code.host — Slice 4 minimal styling.
   ~180 lines. No framework. Dark-on-light, generous spacing, one accent. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;           /* panels / cards / nav / tables */
  --fg: #111317;
  --muted: #5b6270;
  --line: #e6e8ec;
  --accent: #e30613;            /* red — button backgrounds, logo dot, focus */
  --accent-ink: #ffffff;
  --accent-text: #e30613;       /* text-coloured accent; flips to white in dark */
  --good: #137a39;
  --warn: #a86a00;
  --bad: #b11a1a;
  --info: #114b7a;
  --pill-bg: #f3f4f6;
  --banner-warn-bg: #fff8e6;
  --banner-warn-bd: #f1cf7a;
  --banner-bad-bg:  #fdecec;
  --banner-bad-bd:  #f0b3b3;
  --banner-good-bg: #e8f5ee;
  --banner-good-bd: #a5d4b5;
  --banner-info-bg: #e8f0f8;
  --banner-info-bd: #a8c3e1;
  --dashed-bg:      #fafbfc;
  --shadow: 0 1px 2px rgba(0,0,0,0.06);
  --radius: 6px;
}

/* Dark mode — pure black body, white text. Red accent preserved. */
[data-theme="dark"] {
  --bg: #000000;
  --surface: #000000;
  --fg: #ffffff;
  --muted: #8b8f97;
  --line: #24262a;
  --accent-ink: #ffffff;        /* button text stays white on red */
  --accent-text: #ffffff;       /* links / price / .btn-link render white on black */
  --good: #3fb36a;
  --warn: #d8a34d;
  --bad:  #ef5858;
  --info: #6bb0e9;
  --pill-bg: #15171b;
  --banner-warn-bg: #2a1f0a;
  --banner-warn-bd: #7a5b18;
  --banner-bad-bg:  #2a1010;
  --banner-bad-bd:  #7a2222;
  --banner-good-bg: #0f2418;
  --banner-good-bd: #1e5633;
  --banner-info-bg: #0d1b2c;
  --banner-info-bd: #24507d;
  --dashed-bg:      #0a0b0e;
  --shadow: 0 1px 2px rgba(0,0,0,0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  color: var(--fg); background: var(--bg);
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
       background: var(--pill-bg); padding: 1px 5px; border-radius: 4px; }

/* Nav */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
  background: var(--surface); position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; font-size: 18px; color: var(--fg); }
.brand .dot { color: var(--accent); }
.nav-links { display: flex; gap: 16px; align-items: center; }
.nav-email { color: var(--muted); font-size: 13px; }
.footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px; border-top: 1px solid var(--line); margin-top: 64px;
  color: var(--muted); font-size: 13px; gap: 16px;
}
.footer-meta { display: flex; gap: 18px; flex-wrap: wrap; }

/* Theme toggle — sun / moon icon buttons in the footer. The currently-
   active theme's icon is dim; the other is full brightness and the
   obvious click target. Keyboard-focusable. Red accent untouched. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; padding: 0;
}
.theme-toggle button {
  background: transparent; border: none; padding: 6px;
  color: var(--muted); cursor: pointer; border-radius: 6px;
  display: inline-flex; line-height: 0;
}
.theme-toggle button:hover { color: var(--fg); background: var(--pill-bg); }
.theme-toggle button:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-toggle button[aria-pressed="true"] { color: var(--fg); }
.theme-toggle button[aria-pressed="true"]:hover { background: transparent; cursor: default; }

/* Layout */
.container { max-width: 880px; margin: 40px auto; padding: 0 24px; }

/* Hero */
.hero { text-align: center; padding: 48px 0 24px; }
.hero h1 { font-size: 40px; margin: 0 0 12px; letter-spacing: -0.5px; }
.lead { font-size: 18px; color: var(--muted); max-width: 600px; margin: 0 auto 24px; }

/* Pricing card */
.pricing { margin-top: 40px; }
.pricing h2, .explainer h2 { font-size: 20px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); background: var(--surface);
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card-head h3 { margin: 0; font-size: 20px; }
.price { font-size: 22px; color: var(--accent-text); font-weight: 600; }
/* Dark mode: muted body-grey price to match the surrounding explainer
   text rather than the loud red of light mode. */
[data-theme="dark"] .price { color: var(--muted); }
.feature-list { margin: 16px 0; padding-left: 20px; }
.feature-list li { margin: 4px 0; }
.steps { padding-left: 20px; color: var(--muted); }
.steps strong { color: var(--fg); }

/* Buttons */
.btn {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  font-size: 14px; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-link { background: transparent; border: none; color: var(--accent-text); padding: 0 8px; }
.btn-lg { padding: 12px 22px; font-size: 16px; }
.btn-github {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%; padding: 10px 16px;
  background: #24292f; color: #fff; border-color: #24292f;
  font-weight: 500;
}
.btn-github:hover { filter: brightness(1.1); text-decoration: none; color: #fff; }
.btn-github svg { flex-shrink: 0; }
.oauth-providers { display: flex; flex-direction: column; gap: 10px; }

/* Forms */
.auth-panel {
  max-width: 420px; margin: 24px auto; padding: 32px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow);
}
.auth-panel.narrow { max-width: 520px; text-align: center; }
.auth-panel h1 { margin-top: 0; font-size: 22px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 13px; color: var(--muted); }
.field input, .field select {
  font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--fg);
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field small { color: var(--muted); font-size: 12px; }
.subdomain-row { display: flex; align-items: center; gap: 6px; }
.subdomain-row input { flex: 1; }
.suffix { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.form-error { color: var(--bad); font-size: 14px; margin: 0; }

.or-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px; background: var(--dashed-bg); }

/* Banners */
.banner { padding: 12px 16px; border-radius: var(--radius); margin: 16px 0; border: 1px solid transparent; }
.banner-warn { background: var(--banner-warn-bg); border-color: var(--banner-warn-bd); color: var(--warn); }
.banner-bad  { background: var(--banner-bad-bg);  border-color: var(--banner-bad-bd);  color: var(--bad); }
.banner-good { background: var(--banner-good-bg); border-color: var(--banner-good-bd); color: var(--good); }
.banner-info { background: var(--banner-info-bg); border-color: var(--banner-info-bd); color: var(--info); }
.banner-actions { margin-top: 6px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#resend-verification-result.status-good { color: var(--good); }
#resend-verification-result.status-bad  { color: var(--bad); }

/* Dashboard */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.orders-table { width: 100%; border-collapse: collapse; background: var(--surface);
                border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.orders-table th, .orders-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.orders-table th { background: var(--pill-bg); font-weight: 600; color: var(--muted); }
.orders-table tr:last-child td { border-bottom: none; }
.empty-state { padding: 48px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }

/* Status pill */
.status-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  background: var(--pill-bg); color: var(--muted); font-weight: 500;
}
.status-pill-lg { font-size: 14px; padding: 6px 14px; }
.status-awaiting-payment { background: var(--banner-warn-bg); color: var(--warn); }
.status-payment-received { background: var(--banner-info-bg); color: var(--info); }
.status-provisioning     { background: var(--banner-info-bg); color: var(--info); }
.status-vps-created      { background: var(--banner-info-bg); color: var(--info); }
.status-ip-ready         { background: var(--banner-good-bg); color: var(--good); }
.status-hostname-pending { background: var(--banner-warn-bg); color: var(--warn); }
.status-ready            { background: var(--banner-good-bg); color: var(--good); }
.status-failed           { background: var(--banner-bad-bg);  color: var(--bad); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 12px 0 0; border-left: 2px solid var(--line); }
.timeline-step { position: relative; padding: 6px 0 16px 20px; }
.timeline-dot { position: absolute; left: -7px; top: 10px; width: 12px; height: 12px;
                border-radius: 50%; background: var(--line); border: 2px solid var(--bg); }
.timeline-label { font-weight: 500; }
.timeline-at { font-family: ui-monospace, Menlo, monospace; }
.timeline-done .timeline-dot     { background: var(--good); }
.timeline-active .timeline-dot   { background: var(--accent); animation: pulse 1.6s infinite; }
.timeline-failed .timeline-dot   { background: var(--bad); }
.timeline-skipped .timeline-dot  { background: var(--line); opacity: 0.5; }
.timeline-skipped { opacity: 0.5; }
.timeline-pending { color: var(--muted); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(227,6,19,0.6); }
  100% { box-shadow: 0 0 0 8px rgba(227,6,19,0); }
}

/* Status tokens for verify page */
.status-good { color: var(--good); }
.status-warn { color: var(--warn); }
.status-bad  { color: var(--bad); }

.muted { color: var(--muted); }
.small { font-size: 13px; }