/* Observator Tineret — sistem de design public (temă deschisă/închisă, WCAG AA) */
:root{
  --obst-bg:#ffffff; --obst-fg:#16202c; --obst-muted:#5b6675; --obst-line:#e2e7ee;
  --obst-panel:#f5f7fa; --obst-accent:#1e5aa8; --obst-accent-fg:#ffffff;
  --obst-conform:#1a7f4b; --obst-conform-bg:#d9f2e4;
  --obst-sub:#9a6a00; --obst-sub-bg:#fdeecb;
  --obst-critic:#b42318; --obst-critic-bg:#fbdcd9;
  --obst-fara:#5b6675; --obst-fara-bg:#e9edf2;
  --obst-radius:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --obst-bg:#0f1620; --obst-fg:#e6ebf2; --obst-muted:#9aa7b8; --obst-line:#26303d;
    --obst-panel:#161f2b; --obst-accent:#6aa4e8; --obst-accent-fg:#0f1620;
    --obst-conform:#54c489; --obst-conform-bg:#12351f;
    --obst-sub:#e0b451; --obst-sub-bg:#3a2e10;
    --obst-critic:#f08a80; --obst-critic-bg:#3a1512;
    --obst-fara:#9aa7b8; --obst-fara-bg:#1c2530;
  }
}
:root[data-theme="dark"]{
  --obst-bg:#0f1620; --obst-fg:#e6ebf2; --obst-muted:#9aa7b8; --obst-line:#26303d;
  --obst-panel:#161f2b; --obst-accent:#6aa4e8; --obst-accent-fg:#0f1620;
  --obst-conform:#54c489; --obst-conform-bg:#12351f;
  --obst-sub:#e0b451; --obst-sub-bg:#3a2e10;
  --obst-critic:#f08a80; --obst-critic-bg:#3a1512;
  --obst-fara:#9aa7b8; --obst-fara-bg:#1c2530;
}

.obst-disclaimer{background:var(--obst-panel);border-left:4px solid var(--obst-accent);
  padding:14px 18px;border-radius:8px;margin:0 0 24px;color:var(--obst-fg);font-size:.95rem;line-height:1.5}

.obst-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--obst-muted);font-weight:700;margin:0 0 4px}
.obst-hero h1,h1{color:var(--obst-fg)}
.obst-lead{font-size:1.1rem;color:var(--obst-muted);max-width:60ch}

/* KPI */
.obst-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:24px 0}
.obst-kpi-item{background:var(--obst-panel);border:1px solid var(--obst-line);border-radius:var(--obst-radius);padding:18px;text-align:center}
.obst-kpi-n{display:block;font-size:2.2rem;font-weight:800;line-height:1}
.obst-kpi-l{display:block;color:var(--obst-muted);font-size:.85rem;margin-top:6px}
.obst-kpi-item.obst-conform .obst-kpi-n{color:var(--obst-conform)}
.obst-kpi-item.obst-sub_tinta .obst-kpi-n{color:var(--obst-sub)}
.obst-kpi-item.obst-critic .obst-kpi-n{color:var(--obst-critic)}

/* Carduri pe pilon */
.obst-carduri{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0 28px}
.obst-card{background:var(--obst-bg);border:1px solid var(--obst-line);border-radius:var(--obst-radius);padding:20px}
.obst-card-eyebrow{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:var(--obst-accent);font-weight:700;margin:0}
.obst-card h3{margin:.2em 0 .6em}
.obst-card-stat p{color:var(--obst-muted);font-size:.85rem;margin:.5em 0 0}

/* Semafor pastile & legendă */
.obst-legenda{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.obst-pastila{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:.85rem;font-weight:600}
.obst-pastila.obst-conform{background:var(--obst-conform-bg);color:var(--obst-conform)}
.obst-pastila.obst-sub_tinta{background:var(--obst-sub-bg);color:var(--obst-sub)}
.obst-pastila.obst-critic{background:var(--obst-critic-bg);color:var(--obst-critic)}
.obst-pastila.obst-fara_date{background:var(--obst-fara-bg);color:var(--obst-fara)}

/* Bară de progres SVG */
.obst-progres{width:100%;height:12px;display:block;margin:6px 0}
.obst-progres-bg{fill:var(--obst-line)}
.obst-progres.obst-conform .obst-progres-fg{fill:var(--obst-conform)}
.obst-progres.obst-sub_tinta .obst-progres-fg{fill:var(--obst-sub)}
.obst-progres.obst-critic .obst-progres-fg{fill:var(--obst-critic)}
.obst-progres.obst-fara_date .obst-progres-fg{fill:var(--obst-fara)}

/* Filtre */
.obst-filtre{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}
.obst-filtre input,.obst-filtre select{padding:9px 12px;border:1px solid var(--obst-line);border-radius:8px;background:var(--obst-bg);color:var(--obst-fg)}
.obst-filtre button{padding:9px 18px;border:0;border-radius:8px;background:var(--obst-accent);color:var(--obst-accent-fg);font-weight:600;cursor:pointer}
.obst-btn-sec{padding:9px 14px;border:1px solid var(--obst-accent);border-radius:8px;color:var(--obst-accent);text-decoration:none;font-weight:600}

/* Tabel */
.obst-tabel-wrap{overflow-x:auto}
.obst-tabel{width:100%;border-collapse:collapse;margin:12px 0;font-size:.92rem}
.obst-tabel th,.obst-tabel td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--obst-line);vertical-align:top}
.obst-tabel thead th{color:var(--obst-muted);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}
.obst-tabel a{color:var(--obst-accent);font-weight:600;text-decoration:none}
.obst-tabel a:hover{text-decoration:underline}
.obst-serie{max-width:320px}
.obst-nota{color:var(--obst-muted);font-size:.85rem;margin-top:8px}
.obst-proxy{display:inline-block;font-size:.7rem;font-weight:700;color:var(--obst-sub);border:1px solid var(--obst-sub);border-radius:4px;padding:0 5px;vertical-align:middle}
.obst-sectiune{border-top:2px solid var(--obst-line);padding-top:18px;margin-top:28px}

/* Fișa indicatorului */
.obst-fisa{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.obst-fisa-box{background:var(--obst-panel);border:1px solid var(--obst-line);border-radius:var(--obst-radius);padding:20px}
.obst-mare{font-size:2rem;font-weight:800;margin:.1em 0}
.obst-mare small{font-size:.9rem;color:var(--obst-muted);font-weight:500}
.obst-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.obst-dl dt{color:var(--obst-muted);font-size:.82rem}
.obst-dl dd{margin:0;font-weight:600}
.obst-obs{background:var(--obst-panel);border-radius:8px;padding:12px 16px;color:var(--obst-muted);font-size:.9rem}

/* Grafic SVG */
.obst-chart{width:100%;height:auto;max-width:680px;background:var(--obst-panel);border-radius:var(--obst-radius);padding:8px}
.obst-chart .obst-axis{stroke:var(--obst-line);stroke-width:1}
.obst-chart .obst-line{stroke:var(--obst-accent);stroke-width:2.5}
.obst-chart .obst-dot{fill:var(--obst-accent)}
.obst-chart .obst-val{fill:var(--obst-fg);font-size:12px;font-weight:600}
.obst-chart .obst-axlbl{fill:var(--obst-muted);font-size:11px}

@media(max-width:640px){.obst-fisa{grid-template-columns:1fr}}

/* ============================================================
   v1.1 — animații accesibile, carduri clicabile, City Pulse
   ============================================================ */

/* Card pilon clicabil */
.obst-card-link{display:block;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.obst-card-link:hover,.obst-card-link:focus-visible{transform:translateY(-4px);border-color:var(--obst-accent);box-shadow:0 10px 30px rgba(30,90,168,.15)}
.obst-card-more{display:inline-block;margin-top:12px;color:var(--obst-accent);font-weight:700;font-size:.9rem}

/* Reveal — activ doar cu JS și fără reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .obst-js .obst-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .obst-js .obst-reveal.obst-in{opacity:1;transform:none}
  /* desenarea liniei din grafic */
  .obst-js .obst-chart-anim .obst-line{stroke-dasharray:2000;stroke-dashoffset:2000}
  .obst-js .obst-chart-anim.obst-in .obst-line{animation:obst-draw 1.3s ease forwards}
  .obst-js .obst-chart-anim .obst-dot,.obst-js .obst-chart-anim .obst-val{opacity:0}
  .obst-js .obst-chart-anim.obst-in .obst-dot,.obst-js .obst-chart-anim.obst-in .obst-val{animation:obst-fade .5s ease forwards;animation-delay:1s}
  /* bara de progres crește */
  .obst-js .obst-progres-fg{transform-origin:left center;animation:obst-grow-x 1s ease forwards}
}
@keyframes obst-draw{to{stroke-dashoffset:0}}
@keyframes obst-fade{to{opacity:1}}
@keyframes obst-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- City Pulse ---- */
.cp-hero{background:linear-gradient(135deg,var(--obst-accent),#123f78);color:#fff;border-radius:var(--obst-radius);padding:36px 28px;margin:0 0 28px}
.cp-hero .obst-eyebrow{color:#cfe0f5}
.cp-hero h1{color:#fff;margin:.1em 0 .3em}
.cp-hero p{color:#e7eefb;max-width:65ch;margin:0}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:22px 0}
.cp-metric{background:var(--obst-bg);border:1px solid var(--obst-line);border-radius:var(--obst-radius);padding:22px;position:relative;overflow:hidden}
.cp-metric h3{margin:0 0 4px;font-size:1rem;color:var(--obst-fg)}
.cp-metric .cp-sub{color:var(--obst-muted);font-size:.8rem;margin:0 0 12px}
.cp-metric .cp-big{font-size:2.4rem;font-weight:800;line-height:1;color:var(--obst-accent)}
.cp-metric .cp-unit{font-size:.9rem;color:var(--obst-muted);font-weight:600}
.cp-trend{display:inline-flex;align-items:center;gap:5px;font-size:.85rem;font-weight:700;margin-top:8px;padding:2px 8px;border-radius:20px}
.cp-up{background:var(--obst-conform-bg);color:var(--obst-conform)}
.cp-down{background:var(--obst-critic-bg);color:var(--obst-critic)}
.cp-flat{background:var(--obst-fara-bg);color:var(--obst-fara)}
.cp-spark{width:100%;height:56px;margin-top:14px;display:block}
.cp-spark .cp-spark-line{fill:none;stroke:var(--obst-accent);stroke-width:2.5}
.cp-spark .cp-spark-area{fill:var(--obst-accent);opacity:.10}
.cp-spark .cp-spark-dot{fill:var(--obst-accent)}
.cp-source{font-size:.72rem;color:var(--obst-muted);margin-top:10px}
.cp-source .obst-proxy{margin-left:4px}
.cp-section-title{border-top:2px solid var(--obst-line);padding-top:20px;margin-top:34px}
.cp-note{background:var(--obst-panel);border-radius:10px;padding:14px 18px;color:var(--obst-muted);font-size:.9rem;margin-top:24px}