/* System stylesheet — SEMANTIC layer only (DESIGN-SYSTEM §2).
 * Brand layer (--color-primary/-hover/-active/-contrast, --color-accent-2,
 * optional --font-sans override) is injected per-request from brand config.
 * The constants below are system-wide by design (V-A1 condition 4): neutral
 * palette, status colors, --color-anon, --color-ai-badge — same for every
 * brand, guaranteeing AA contrast and "≠ primary" trust-badge distinction. */
:root {
  --color-bg: #ffffff;
  --color-surface: #f6f7f9;
  --color-text: #16181d;
  --color-text-muted: #5a6270;
  --color-anon: #6d28d9;
  --color-ai-badge: #b45309;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-border: #d9dde3;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Georgian", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", monospace;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius-sm: 6px; --radius-md: 10px; --radius-full: 999px;
  --border-w: 1px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
  --container: 1080px;
  --dur-fast: 120ms; --dur-base: 200ms;
}
* { box-sizing: border-box; }
html { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); }
body { margin: 0; font-size: var(--text-base); line-height: 1.6; }
a { color: var(--color-primary); }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
h1 { font-size: clamp(26px, 4vw, 34px); line-height: 1.2; }
h2 { font-size: clamp(20px, 2.5vw, 24px); line-height: 1.35; }
.muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.lead { font-size: var(--text-lg); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.empty { color: var(--color-text-muted); padding: var(--sp-5); background: var(--color-surface); border-radius: var(--radius-md); }

.site-header {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  max-width: var(--container); margin: 0 auto; padding: var(--sp-4);
  border-bottom: var(--border-w) solid var(--color-border);
}
.brand-name { font-weight: 700; font-size: var(--text-lg); text-decoration: none; color: var(--color-primary); }
/* DEF-VB-1: nav must wrap on narrow viewports (375px) — without flex-wrap the
   7-item nav (571px EN / wider KA) forced horizontal scroll on every page. */
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); flex: 1; min-width: 0; }
.site-header nav a { text-decoration: none; color: var(--color-text); padding: var(--sp-2); min-height: 44px; display: inline-flex; align-items: center; }
.site-header nav a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.lang-switcher { display: flex; gap: var(--sp-2); font-size: var(--text-sm); }
.lang-switcher a, .lang-switcher span { padding: var(--sp-2); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.lang-switcher span[aria-current="true"] { font-weight: 700; color: var(--color-primary); }

main { max-width: var(--container); margin: 0 auto; padding: var(--sp-4); }
.site-footer { max-width: var(--container); margin: 0 auto; padding: var(--sp-5) var(--sp-4); color: var(--color-text-muted); font-size: var(--text-sm); border-top: var(--border-w) solid var(--color-border); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.card { background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-4); box-shadow: var(--shadow-1); }
.card.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.card.stat .num { font-size: 22px; }
.cards { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cards .card { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; }

.badge { display: inline-block; padding: 1px var(--sp-2); border-radius: var(--radius-full); font-size: var(--text-xs); line-height: 1.4; }
.badge-ai { background: var(--color-ai-badge); color: #ffffff; }
.badge-anon, .anon-note { color: var(--color-anon); }

/* DEF-VB-2: every .table is rendered inside a .table-wrap scroll container —
   a wide table scrolls within itself instead of stretching the page (375px). */
.table-wrap { overflow-x: auto; }
.table { border-collapse: collapse; width: 100%; }
.table th, .table td { text-align: left; padding: var(--sp-3); border-bottom: var(--border-w) solid var(--color-border); }
.table td.num { font-size: var(--text-sm); }

/* ── forms & buttons (WI-B2a: onboarding, cabinet, employer registration) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--sp-2) var(--sp-4); gap: var(--sp-2);
  border-radius: var(--radius-sm); border: var(--border-w) solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast);
}
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #ffffff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-4) 0; }

.form { max-width: 480px; display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; border: 0; }
.field label, .field legend { font-weight: 600; font-size: var(--text-sm); }
.field input[type="text"], .field input[type="number"], .field input[type="password"], .field select {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); font: inherit;
  border: var(--border-w) solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text); width: 100%;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.radios { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.radio { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; cursor: pointer; }
.radio input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.field-error { color: var(--color-danger); font-size: var(--text-sm); margin: 0; }
.progress { letter-spacing: 0.04em; }

.notice { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); border: var(--border-w) solid var(--color-border); background: var(--color-surface); }
.notice-ok { border-color: var(--color-success); color: var(--color-success); }
.notice-warning { border-color: var(--color-warning); color: var(--color-warning); }
.notice-danger { border-color: var(--color-danger); color: var(--color-danger); }

/* access-key issue (C-03 -> key page) */
.key-box { background: var(--color-surface); border: var(--border-w) dashed var(--color-anon); border-radius: var(--radius-md); padding: var(--sp-4); overflow-x: auto; }
.key-box code { font-family: var(--font-mono); font-size: var(--text-lg); user-select: all; }

/* anonymous candidate card (C-03 preview ≡ E-02) */
.candidate-card { max-width: 560px; }
.anon-handle { color: var(--color-anon); font-family: var(--font-mono); }
.card-facts { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin: var(--sp-3) 0; }
.card-facts div { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; }
.card-facts dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.card-facts dd { margin: 0; font-weight: 600; }

/* VisibilityPanel (DESIGN-SYSTEM §5.2.1) */
.visibility-panel { background: var(--color-surface); border: var(--border-w) solid var(--color-anon); border-radius: var(--radius-md); padding: var(--sp-4); margin: var(--sp-5) 0; }
.visibility-panel h2 { margin-top: 0; font-size: var(--text-lg); color: var(--color-anon); }
.vp-cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.vp-col h3 { font-size: var(--text-sm); text-transform: none; margin: 0 0 var(--sp-2); }
.vp-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.vp-hidden { color: var(--color-text-muted); }
@media (min-width: 640px) {
  .vp-cols { grid-template-columns: 1fr 1fr; }
  .card-facts { grid-template-columns: 1fr 1fr; }
  .card-facts div { flex-direction: column; justify-content: flex-start; gap: 0; }
}

.danger-zone { border: var(--border-w) solid var(--color-danger); border-radius: var(--radius-md); padding: var(--sp-4); margin-top: var(--sp-6); }
.danger-zone h2 { color: var(--color-danger); margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* WI-B2b: salary dashboard filters + benchmark cards */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin: var(--sp-4) 0; }
.filters .field { margin: 0; }
.sample-note { font-size: var(--text-sm); }
.benchmark .num { font-weight: 600; }

/* WI-B2b: explicit-reveal screen (DESIGN-SYSTEM §5.2.4) */
.reveal-panel { border-color: var(--color-anon); }
.reveal-panel h2 { margin-top: 0; font-size: var(--text-lg); color: var(--color-anon); }
.reveal-panel form + form { margin-top: var(--sp-3); }

/* WI-B2c: forum (P-03 list + rubric tabs, P-04 thread, reports, rules) */
.field textarea, .field input[type="search"] {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); font: inherit;
  border: var(--border-w) solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text);
}
.field textarea:focus-visible, .field input[type="search"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.form-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); max-width: none; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.tabs a {
  text-decoration: none; color: var(--color-text); min-height: 44px;
  display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--color-border); border-radius: var(--radius-full);
}
.tabs a[aria-current="true"] { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.cards .card.post { display: block; }
.post-author { display: block; margin-bottom: var(--sp-2); }
.post-body { margin: 0 0 var(--sp-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.report summary { color: var(--color-text-muted); font-size: var(--text-sm); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.report-form { margin-top: var(--sp-2); }
.forum-rules { background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-4); margin-top: var(--sp-6); }
.forum-rules h2 { margin-top: 0; font-size: var(--text-lg); }
.reply { margin-top: var(--sp-6); }
.site-footer { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

/* ── admin/moderation (WI-B2d: A-01 queue, verification cards) ──────────────
   Same rules as everywhere: 44px taps, +30% string headroom, and no
   capitalizing transforms (Mkhedruli has no capitals — DS §6). */
.field input[type="url"] {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); font: inherit;
  border: var(--border-w) solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text); width: 100%;
}
.field input[type="url"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.admin-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  margin: 0 0 var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: var(--border-w) solid var(--color-border);
}
.admin-nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--color-text); }
.cards.queue .card.queue-item { display: block; }
.queue-item header { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.queue-preview {
  margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--color-border); color: var(--color-text-muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.badge-p1 { background: var(--color-danger); color: #ffffff; }
.badge-p2 { background: var(--color-warning); color: #ffffff; }
.badge-p3, .badge-p4 { background: var(--color-surface); border: var(--border-w) solid var(--color-border); }
.checklist summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--color-text-muted); }
.checklist ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

/* ── WI-B3: published article page ──────────────────────────────────────────
   Readable measure, factory markdown output (h2-h4, lists, tables, quotes),
   attribution + license blocks per V-A3 (c.4 license tag in the template). */
.article { max-width: 72ch; }
.article h2 { margin: var(--sp-5) 0 var(--sp-3); }
.article h3, .article h4 { margin: var(--sp-4) 0 var(--sp-2); }
.article p, .article ul, .article ol { margin: 0 0 var(--sp-3); line-height: 1.6; }
.article ul, .article ol { padding-left: var(--sp-5); }
.article blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--color-border); color: var(--color-text-muted);
}
.article .table { margin: var(--sp-3) 0; display: block; overflow-x: auto; }
.article-sources { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: var(--border-w) solid var(--color-border); }
.article-sources ul { padding-left: var(--sp-5); margin: var(--sp-2) 0 0; }
.article-sources a { overflow-wrap: anywhere; }
.article-license { margin-top: var(--sp-3); }

/* ── WI-B4: traction dashboard (admin) ─────────────────────────────────── */
.badge-lv { color: #ffffff; }
.badge-lv-green { background: var(--color-success); }
.badge-lv-yellow { background: var(--color-warning); }
.badge-lv-red { background: var(--color-danger); }
.badge-lv-na { background: var(--color-text-muted); }
.traction-metric header { display: flex; align-items: center; gap: var(--sp-2); }
.meter {
  width: 100%; height: 8px; border-radius: 4px;
  background: var(--color-border); overflow: hidden; margin-top: var(--sp-1);
}
.meter-fill { height: 100%; border-radius: 4px; }
.meter-green { background: var(--color-success); }
.meter-yellow { background: var(--color-warning); }
.meter-red { background: var(--color-danger); }
.table .total td { border-top: 2px solid var(--color-border); }