/* =========================================================================
   OKO Career Inspirer — styles
   Built from the "Oko" design system (tokens.json + components/bundle.css).
   Plain CSS, no build step, no framework. Swap the :root values below the
   moment you have the shipped brand assets — everything downstream reads
   only the custom properties, never a literal hex.
   ========================================================================= */

:root {
  /* Hints the browser's own UA styles (initial paint background, form
     controls, scrollbars) to the OS preference immediately, before this
     stylesheet finishes loading — avoids a flash of the light-mode default
     background on navigation between pages when the OS is in dark mode. */
  color-scheme: light dark;

  /* ---- neutral ramp ---- */
  --neutral-0: #ffffff;
  --neutral-50: #f8f9fa;
  --neutral-100: #e9ecef;
  --neutral-200: #dee2e6;
  --neutral-300: #ced4da;
  --neutral-400: #adb5bd;
  --neutral-500: #6c757d;
  --neutral-600: #495057;
  --neutral-800: #212529;
  --neutral-900: #000000;

  /* ---- surfaces ---- */
  --surface: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --line: var(--neutral-200);
  --line-strong: var(--neutral-300);

  /* ---- ink ---- */
  --ink: var(--neutral-900);
  --ink-secondary: var(--neutral-800);
  --ink-muted: var(--neutral-500);
  --ink-disabled: var(--neutral-400);

  /* ---- accents ---- */
  --accent-purple: #6819e6;
  --accent-purple-hover: #5815c4;
  --accent-purple-pressed: #4b12a6;
  --on-accent-purple: #ffffff;
  --accent-purple-subtle: #f0e8fc;
  --accent-purple-text: #6819e6;

  --accent-cyan: #54e7ee;
  --accent-cyan-subtle: #eafcfd;
  --on-accent-cyan: #000000;

  --success: #1c7c54;
  --on-success: #ffffff;
  --success-subtle: #e4efea;
  --danger: #c8352b;
  --on-danger: #ffffff;
  --danger-subtle: #f8e7e6;

  --focus-ring: var(--accent-purple-text);

  /* ---- type ---- */
  --font-display: "Quicksand", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* ---- spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- radius ---- */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-full: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: var(--neutral-900);
    --surface-raised: #141318;
    --surface-sunken: #1f1e24;
    --line: #2a2930;
    --line-strong: #3a3941;
    --ink: var(--neutral-0);
    --ink-secondary: #e7e6ea;
    --ink-muted: #8f8d97;
    --ink-disabled: #57555e;
    --accent-purple-text: #a988f2;
    --accent-purple-subtle: #1c1030;
    --accent-cyan-subtle: #0f2c2f;
    --success: #3fbf85;
    --on-success: #000000;
    --success-subtle: #0b2218;
    --danger: #ff6b61;
    --on-danger: #000000;
    --danger-subtle: #2e1311;
  }
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink-secondary);
  -webkit-font-smoothing: antialiased;
}

.oko-page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.oko-scroll {
  flex: 1;
  padding: 0 var(--space-4) var(--space-12);
}

a { color: var(--accent-purple-text); }

/* ---------------------------------------------------------------------- */
/* Header / wordmark                                                      */
/* ---------------------------------------------------------------------- */

.oko-header {
  /* Always dark, regardless of theme — the logo image is a fixed white PNG,
     so the background can't follow --ink into white under dark mode. */
  background: var(--neutral-900);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.oko-logo-img {
  display: block;
  height: 32px;
  width: auto;
}

/* ---------------------------------------------------------------------- */
/* Type scale                                                              */
/* ---------------------------------------------------------------------- */

.display-lg { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.display-sm { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; margin: 0; }
.heading-lg { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; color: var(--ink); }
.heading-md { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; margin: 0; color: var(--ink); }
.heading-sm { font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; margin: 0; color: var(--ink); }
.body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; margin: 0; color: var(--ink-secondary); }
.body-md { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; margin: 0; color: var(--ink-secondary); }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; margin: 0; color: var(--ink-muted); }
.label-md { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.label-sm { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; }
.meta { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-muted); }

.ok-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-1);
  padding: 2px var(--space-2);
  line-height: 16px;
  border-radius: var(--radius-full);
  background: var(--accent-purple-subtle);
  color: var(--accent-purple-text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------- */
/* Button (ok-btn — from the design system)                               */
/* ---------------------------------------------------------------------- */

.ok-btn {
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 600; line-height: 20px;
  height: 48px; padding: 0 var(--space-10);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  text-decoration: none;
}
.ok-btn-primary { background: var(--accent-purple); color: var(--on-accent-purple); }
.ok-btn-primary:hover { background: var(--accent-purple-hover); }
.ok-btn-primary:active { background: var(--accent-purple-pressed); }
.ok-btn-secondary { background: transparent; color: var(--accent-purple-text); border-color: var(--line-strong); }
.ok-btn-secondary:hover { background: var(--accent-purple-subtle); }
.ok-btn-ghost { background: transparent; color: var(--ink-secondary); border-color: var(--line); }
.ok-btn-ghost:hover { background: var(--surface-sunken); }
.ok-btn:disabled { background: var(--surface-sunken); color: var(--ink-disabled); cursor: not-allowed; }
.ok-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ok-btn-full { width: 100%; }

/* ---------------------------------------------------------------------- */
/* Field / select (about-you inputs — Input component conventions)        */
/* ---------------------------------------------------------------------- */

.ok-field { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; }
.ok-field-label { font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 20px; color: var(--ink); }
.ok-field-hint { font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.ok-select,
.ok-input {
  font-family: var(--font-sans); font-size: 15px; line-height: 20px;
  height: 48px; padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink-secondary);
  width: 100%;
}
.ok-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  appearance: none;
}
.ok-select:focus-visible,
.ok-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--line-strong); }

/* ---------------------------------------------------------------------- */
/* Progress bar (ok-progress — from the design system)                    */
/* ---------------------------------------------------------------------- */

.ok-progress-label { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 16px; color: var(--ink-secondary); margin-bottom: var(--space-2); }
.ok-progress-track { height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.ok-progress-fill { height: 100%; border-radius: var(--radius-full); background: var(--accent-purple); width: 0%; transition: width 0.25s ease; }

/* ---------------------------------------------------------------------- */
/* Card (ok-card — from the design system)                                */
/* ---------------------------------------------------------------------- */

.ok-card { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-raised); overflow: hidden; }
.ok-card-body { padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.ok-card-heading { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.ok-card-text { font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.ok-card-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--accent-cyan); color: var(--on-accent-cyan);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.ok-card-icon .material-icons { font-size: 20px; }
.ok-card-action { margin-left: auto; flex-shrink: 0; }

.ok-ai-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent-purple-subtle);
  color: var(--accent-purple-text);
  border: none;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ok-ai-btn .material-icons { font-size: 16px; }
.ok-ai-btn:hover { filter: brightness(0.95); }
.ok-ai-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* Share row — icon buttons next to "Print results"                       */
/* ---------------------------------------------------------------------- */

.ok-share-row { display: flex; align-items: center; gap: var(--space-2); }
.ok-share-btn {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--ink-secondary);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; text-decoration: none;
  padding: 0;
}
.ok-share-btn:hover { background: var(--surface-sunken); }
.ok-share-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* Share card — branded image captured by html2canvas for "Share image".  */
/* Rendered off-screen, never shown directly, so every color here is a    */
/* fixed value (never a theme token) — this must look the same regardless */
/* of the visitor's light/dark preference, since it becomes a static PNG. */
/* ---------------------------------------------------------------------- */

.ok-share-card {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 375px;
  box-sizing: border-box;
  padding: var(--space-8) var(--space-6);
  background: var(--neutral-900);
  font-family: var(--font-sans);
}
.ok-share-card-logo {
  display: block;
  height: 28px;
  width: auto;
  margin-bottom: var(--space-6);
}
.ok-share-card-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--neutral-0);
  margin: 0 0 var(--space-6);
}
.ok-share-card-traits { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.ok-share-card-trait-name { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--neutral-0); margin-bottom: var(--space-1); }
.ok-share-card-trait-track { position: relative; height: 6px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.2); }
.ok-share-card-trait-thumb { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--accent-cyan); transform: translate(-50%, -50%); }
.ok-share-card-jobs { font-family: var(--font-sans); font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, 0.75); margin-bottom: var(--space-8); }
.ok-share-card-jobs strong { color: var(--neutral-0); }
.ok-share-card-footer { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: var(--space-5); text-align: center; }
.ok-share-card-cta { font-family: var(--font-sans); font-size: 14px; color: rgba(255, 255, 255, 0.8); margin: 0 0 var(--space-2); }
.ok-share-card-url { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; color: var(--accent-cyan); margin: 0; }

/* ---------------------------------------------------------------------- */
/* Slider — bipolar trait meter (ok-slider — from the design system)      */
/* Never a filled bar: a flat track, a centre tick, one purple dot.       */
/* ---------------------------------------------------------------------- */

.ok-slider { width: 100%; margin-bottom: var(--space-6); }
.ok-slider-name { margin-bottom: var(--space-2); }
.ok-slider-labels { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-muted); margin-top: var(--space-2); }
.ok-slider-track { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.ok-slider-tick { position: absolute; top: 50%; left: 50%; width: 2px; height: 10px; background: var(--line-strong); transform: translate(-50%, -50%); }
.ok-slider-thumb { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--accent-purple); border: 3px solid var(--surface); outline: 1px solid var(--line); transform: translate(-50%, -50%); }

/* ---------------------------------------------------------------------- */
/* Quiz answer row — full-width pill-less rows, surface-sunken at rest,   */
/* accent-purple fill when selected.                                      */
/* ---------------------------------------------------------------------- */

.ok-answer-row {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  border: none;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ok-answer-row:hover { background: var(--line); }
.ok-answer-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ok-answer-row-selected,
.ok-answer-row-selected:hover {
  background: var(--accent-purple);
  color: var(--on-accent-purple);
}

/* ---------------------------------------------------------------------- */
/* Notice — inline error / status banner                                  */
/* ---------------------------------------------------------------------- */

.ok-notice {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
  background: var(--danger-subtle);
  color: var(--danger);
}

/* ---------------------------------------------------------------------- */
/* Utility                                                                 */
/* ---------------------------------------------------------------------- */

.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }

[hidden] { display: none !important; }

.oko-footer {
  /* Always dark, regardless of theme — the footer's links/icons are fixed
     light colors (see below), so the background can't follow --ink/--surface
     into white under dark mode. */
  background: var(--neutral-900);
  color: var(--neutral-0);
  padding: var(--space-6) var(--space-4);
  margin-top: var(--space-12);
}
.oko-footer p { font-family: var(--font-sans); font-size: 12px; line-height: 18px; color: var(--neutral-400); margin: 0 0 var(--space-2); }
.oko-footer a { color: var(--neutral-0); }

.oko-footer-social { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.oko-footer-social-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid var(--neutral-600);
  color: var(--neutral-0);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.oko-footer-social-btn:hover { background: var(--neutral-600); border-color: var(--neutral-500); }
.oko-footer-social-btn:focus-visible { outline: 2px solid var(--neutral-0); outline-offset: 2px; }