/* PolicySims public site — shared tokens (mirrors app/static/css/app.css) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap');

:root {
    --ink: #1d1d1f;
    --ink-2: #424245;
    --muted: #6e6e73;
    --soft: #d2d2d7;
    --hair: #e8e8ed;
    --pale: #f5f5f7;
    --canvas: #ffffff;
    --black: #000000;

    --action: #0071e3;
    --action-hover: #005bb5;
    --link: #0066cc;

    /* Policy-area code, borrowed from the app's model families */
    --fiscal: #7c3aed;
    --fiscal-tint: #f5f0fe;
    --trade: #0071e3;
    --trade-tint: #eaf3fe;
    --regional: #0a8754;
    --regional-tint: #f0fdf4;

    --pos: #0a8754;
    --neg: #b3261e;

    --font-display: 'Inter Tight', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    --font-text: 'Inter', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-2xl: 28px;
    --radius-capsule: 980px;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.08);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.14);

    --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
    --gutter: clamp(16px, 4vw, 48px);
    --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--canvas);
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.022em; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
:focus-visible { outline: 3px solid rgba(0, 113, 227, 0.45); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Navigation ---------- */
.nav { position: relative; z-index: 5; }
.nav .wrap { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; color: inherit; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--ink-2); }
.nav-lang { font-size: 13px; color: var(--muted); border: 1px solid var(--soft); border-radius: var(--radius-capsule); padding: 3px 10px; background: none; cursor: pointer; }
@media (max-width: 820px) { .nav-links { display: none; } .nav .wrap { justify-content: space-between; gap: 12px; } }
@media (max-width: 560px) { .nav-lang { display: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--radius-capsule); font-size: 16px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-hover); }
.btn-ghost { background: transparent; color: var(--link); border-color: var(--soft); }
.btn-ghost:hover { border-color: var(--link); }
.btn-sm { height: 34px; padding: 0 16px; font-size: 14px; }

.proof { font-size: 14px; color: var(--muted); }
.proof strong { color: var(--ink); font-weight: 600; }
.illustrative { font-size: 12px; color: var(--muted); }

/* ---------- Charts (shared/charts.js) ---------- */
.ps-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ps-chart text { font-family: var(--font-text); font-size: 12px; fill: var(--chart-muted, var(--muted)); }
.ps-chart .val { fill: var(--chart-ink, var(--ink)); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ps-chart .lbl { fill: var(--chart-ink-2, var(--ink-2)); font-size: 13px; }
.ps-chart .ax { stroke: var(--chart-axis, var(--soft)); stroke-width: 1; }
.ps-chart .bar { transform-box: fill-box; animation: ps-grow 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
.ps-chart .bar.up { transform-origin: 50% 100%; }
.ps-chart .bar.down { transform-origin: 50% 0%; }
.ps-chart .hbar { transform-box: fill-box; animation: ps-grow-x 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ps-chart .hbar.right { transform-origin: 0% 50%; }
.ps-chart .hbar.left { transform-origin: 100% 50%; }
.ps-chart .net-link { stroke: var(--chart-axis, var(--soft)); stroke-width: 2; fill: none; }
.ps-chart .net-new { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 600; animation: ps-draw 1100ms var(--ease) 150ms both; }
.ps-chart .net-node { fill: var(--chart-node, #fff); stroke: var(--chart-ink-2, var(--ink-2)); stroke-width: 1.5; }
@keyframes ps-grow { from { transform: scaleY(0); } }
@keyframes ps-grow-x { from { transform: scaleX(0); } }
@keyframes ps-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
    html { scroll-behavior: auto; }
}