/* LinkedIn Profile Optimizer — stylesheet, white-labeled for Kaizin.
   See docs/brandbook.md for the design system this implements. */

:root {
  /* Color — Kaizin brand */
  --color-primary: #9b1dd6;
  --color-primary-light: #c51fe2;
  --color-primary-dark: #7c17ab;
  --color-teal: #00d1b5;
  /* Extracted directly from the Kaizin logo's own pixels (logo-white-1.webp
     is white + this pink, nothing else) — used only for the analysis
     loading animation, kept separate from the site-wide purple accent. */
  --color-logo-pink: #FF79AA;
  --color-logo-pink-light: #FFA7C6;
  --color-near-black: #0F0F0F;
  --color-navy: #1C274C;
  --color-ink: #0F172A;
  --color-ink-muted: #475569;
  --color-ink-faint: #94A3B8;
  --color-bg: #F7F9FC;
  --color-surface: #FFFFFF;
  --color-border: #E2E8F0;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-success-bg: #F0FDF4;
  --color-warning-bg: #FFFBEB;
  --color-danger-bg: #FEF2F2;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Inter has no Hebrew glyphs. Heebo (weights 400/500/600/700/800,
     matching Inter's loaded weights) is the RTL body font, loaded only on
     the Hebrew-locale domain (optimizer.kaizin.ai — see
     templates/index.html's `{% if lang == "he" %}` font block and
     docs/brandbook.md "Internationalization"). Inter is kept as the
     trailing fallback for mixed-language tokens (Kaizin wordmark, URLs,
     emails) that stay Latin even on the Hebrew site. See the "RTL
     support" section near the bottom of this file for where this is
     applied (`html[dir="rtl"] body`). */
  --font-sans-rtl: "Heebo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-hero: 4.5rem;

  /* Spacing */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --shadow-card: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.08);
  --max-form: 720px;
  --max-results: 960px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

a {
  color: var(--color-primary);
}

:focus-visible {
  outline: 3px solid rgba(155,29,214,.35);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.container {
  max-width: var(--max-form);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.container--wide {
  max-width: var(--max-results);
}

/* Header — dark bar hosting the Kaizin logo (white-ink wordmark, dark-bg only) */
.site-header {
  padding: var(--space-2) 0;
  background: var(--color-near-black);
  background: linear-gradient(120deg, var(--color-near-black), var(--color-navy));
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-primary), var(--color-teal)) 1;
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: #fff;
  padding: .35rem 0;
  min-width: 0; /* allow the wordmark to shrink/truncate gracefully on narrow viewports */
}

.wordmark__logo {
  height: 28px;
  width: auto;
  display: block;
}

.wordmark__divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.25);
  display: none;
}

.wordmark__product {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,.85);
  display: none;
}

@media (min-width: 560px) {
  .wordmark__divider,
  .wordmark__product {
    display: block;
  }
}

main {
  padding: var(--space-6) 0 var(--space-8);
}

.site-footer {
  padding: var(--space-4) 0;
  text-align: center;
  color: var(--color-ink-faint);
  font-size: var(--fs-xs);
}

/* Hero / intro */
.hero {
  text-align: center;
  margin-bottom: var(--space-5);
}

.hero h1 {
  font-size: var(--fs-3xl);
}

.hero p {
  color: var(--color-ink-muted);
  font-size: var(--fs-lg);
  max-width: 560px;
  margin: 0 auto;
}

/* Card */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  padding: var(--space-4);
}

@media (min-width: 720px) {
  .card { padding: var(--space-6); }
}

/* Form */
.field {
  margin-bottom: var(--space-3);
}

.field label,
.field legend {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  margin-bottom: .5rem;
  padding: 0;
}

.field .field__hint {
  font-size: var(--fs-xs);
  color: var(--color-ink-faint);
  font-weight: 400;
  margin-top: .25rem;
}

.field fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

input[type="text"],
input[type="url"],
input[type="email"] {
  width: 100%;
  font: inherit;
  padding: .75rem var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]::placeholder,
input[type="url"]::placeholder,
input[type="email"]::placeholder {
  color: var(--color-ink-faint);
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(155,29,214,.15);
}

input:invalid[data-touched="true"] {
  border-color: var(--color-danger);
}

.field-error {
  color: var(--color-danger);
  font-size: var(--fs-xs);
  margin-top: .35rem;
  display: none;
}

.field-error.is-visible { display: block; }

.row-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 720px) {
  .row-2col { grid-template-columns: 1fr 1fr; }
}

/* Radio pills for intent */
.radio-pills {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

@media (min-width: 720px) {
  .radio-pills { grid-template-columns: repeat(3, 1fr); }
}

.radio-pill {
  position: relative;
}

.radio-pill input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  margin: 0;
}

.radio-pill span {
  display: block;
  text-align: center;
  padding: .85rem var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  transition: all .15s ease;
}

.radio-pill input:checked + span {
  border-color: var(--color-primary);
  background: rgba(155,29,214,.06);
  color: var(--color-primary);
}

.radio-pill input:focus-visible + span {
  outline: 3px solid rgba(155,29,214,.35);
  outline-offset: 2px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-base);
  padding: .9rem var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .05s ease;
  width: 100%;
}

@media (min-width: 720px) {
  .btn { width: auto; }
}

.btn-primary {
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
}

.btn-primary:hover { background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary)); }
.btn-primary:active { transform: translateY(1px); }

.btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover { background: var(--color-bg); }

.btn-block { width: 100%; margin-top: var(--space-2); }

/* Loading state */
.loading-panel {
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.loading-panel .spinner-ring {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-logo-pink);
  border-right-color: var(--color-logo-pink-light);
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-panel h2 {
  font-size: var(--fs-xl);
  margin-bottom: .25rem;
}

.loading-status {
  color: var(--color-ink-muted);
  min-height: 1.6em;
  font-weight: 600;
}

.progress-track {
  width: 100%;
  max-width: 420px;
  height: 8px;
  margin: var(--space-3) auto 0;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 4%;
  background: linear-gradient(90deg, var(--color-logo-pink), var(--color-logo-pink-light));
  border-radius: var(--radius-full);
  transition: width 1.5s ease;
}

.loading-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-4) auto 0;
  max-width: 380px;
  text-align: start; /* logical property — flips correctly under [dir="rtl"] */
  display: grid;
  gap: .5rem;
}

.loading-steps li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-sm);
  color: var(--color-ink-faint);
}

.loading-steps li.is-active { color: var(--color-logo-pink); font-weight: 600; }
.loading-steps li.is-done { color: var(--color-success); }

.loading-steps .step-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Banners */
.banner {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-inline-start: 4px solid; /* logical property — flips to the right edge under [dir="rtl"] */
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
}

.banner__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }

.banner--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: #92400E;
}

.banner--error {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: #991B1B;
}

.banner strong { display: block; margin-bottom: .15rem; }

.banner .btn-secondary {
  margin-top: .5rem;
  width: auto;
}

/* Completion state ("check your inbox") — replaces on-page results */
.complete-panel {
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.complete-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(155,29,214,.12), rgba(0,209,181,.12));
  color: var(--color-primary);
}

.complete-icon svg { width: 40px; height: 40px; }

.complete-panel h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-2);
}

.complete-message {
  color: var(--color-ink);
  font-size: var(--fs-lg);
  max-width: 480px;
  margin: 0 auto;
}

.complete-message strong {
  color: var(--color-primary);
}

.complete-submessage {
  color: var(--color-ink-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}

.results-actions {
  text-align: center;
  margin-top: var(--space-5);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------------------
   RTL support (Hebrew locale — served at optimizer.kaizin.ai)
   ------------------------------------------------------------------------
   Direction is decided server-side per the Host header (see app.py) and
   set as `dir="rtl"`/`lang="he"` directly on <html> by templates/index.html
   — there is no client-side toggle. Most of this layout already mirrors
   correctly for free because it uses logical CSS properties/features
   rather than hardcoded left/right values:
     - `.loading-steps { text-align: start; }` (above) flips to
       right-aligned automatically.
     - `.banner { border-inline-start: ... }` (above) flips its accent
       border to the right edge automatically.
     - `.wordmark` (logo + divider + product name) and `.banner`
       (icon + text) are `display: flex` rows with no explicit
       `flex-direction` — flexbox's default `row` is a *logical* direction,
       so it already mirrors under `dir="rtl"` (icon/logo relocates to the
       visual right, adjacent text still reads correctly) with zero extra
       CSS.
     - `.radio-pills` (CSS Grid, auto-placed) and every input/label in the
       form have no left/right-coded margin/padding/border anywhere in
       this stylesheet, so there was nothing left to mirror there either.
   The one thing that does need an explicit override is the body font
   (Inter has no Hebrew glyphs) — that's the rule below.

   Deliberate non-change, documented per project convention: `#progress-fill`
   (the loading-bar width animation) intentionally keeps growing left-to-right
   even under `dir="rtl"`. It's treated as a magnitude/percentage indicator
   (like a battery or download-progress bar) rather than directional body
   text — this is the common convention and not an oversight. Likewise
   `.loading-panel .spinner-ring`'s border-color placement is purely
   decorative rotation styling and isn't tied to reading direction. */
html[dir="rtl"] body {
  font-family: var(--font-sans-rtl);
}