/* David's BOS - concept demo. Shared stylesheet.
   Register: internal enterprise tool. Flat dark base, one sans stack, monospace for data,
   8px spacing scale, 8px maximum radius, restrained accent, semantic status colours only. */
:root{
  /* surfaces */
  --bg:#0a0b0d;
  --panel:#101215;
  --panel-2:#16191d;
  --raised:#16191d;
  --line:#1f2429;
  --line-2:#2a3038;
  /* text */
  --ink:#e6e8ea;
  --ink-soft:#c3c8cd;
  --muted:#8b939b;
  --muted-2:#7d858d;
  /* accent, used only for the active nav item, key figures and interactive affordances */
  --teal:#2dd4bf;
  --teal-soft:#5eead4;
  --accent:#2dd4bf;
  --accent-dim:rgba(45,212,191,.13);
  /* semantic status, status only */
  --emerald:#34d399;
  --ok:#34d399;
  --warn:#f0b268;
  --bad:#f4736e;
  --deep:#059669;
  /* geometry and rhythm */
  --r:8px;
  --r-sm:6px;
  --r-xs:4px;
  --sp:8px;
  --fast:150ms ease;
  /* type */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;max-width:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;max-width:100%;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
.wrap{max-width:1120px;margin:0 auto;padding:32px 16px 64px}

/* ---------- shared nav: slim sticky bar, accent underline on the active item ---------- */
.nav{position:sticky;top:0;z-index:30;width:100%;background:var(--bg);
     border-bottom:1px solid var(--line)}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 8px;display:flex;align-items:stretch;gap:8px}
.nav-brand{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
           text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;
           display:flex;align-items:center;padding:0 8px;height:44px;flex:0 0 auto}
.nav-links{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;
           -webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);
             text-decoration:none;white-space:nowrap;flex:0 0 auto;display:flex;align-items:center;
             height:44px;padding:0 10px;border-bottom:2px solid transparent;
             transition:color var(--fast),border-color var(--fast)}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- masthead ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--muted);margin:0 0 12px}
h1{font-family:var(--sans);font-weight:600;font-size:clamp(24px,4.4vw,34px);line-height:1.2;
   margin:0 0 12px;letter-spacing:-.015em}
h1 em{font-style:normal;color:var(--muted);font-weight:400}
.lede{font-size:15.5px;color:var(--ink-soft);max-width:72ch;margin:0 0 24px;line-height:1.55}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
      color:var(--muted);border:1px solid var(--line);background:var(--panel);
      border-radius:var(--r-xs);padding:4px 8px}
.rule{height:1px;background:var(--line);margin:24px 0 32px}

/* ---------- sections ---------- */
section{margin:0 0 40px}
h2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
   color:var(--muted);font-weight:500;margin:0 0 16px;display:flex;align-items:center;gap:12px}
h2::after{content:"";height:1px;flex:1;background:var(--line)}
h3{font-family:var(--sans);font-weight:600;font-size:16px;margin:0 0 8px;letter-spacing:-.01em}
p{margin:0 0 12px;color:var(--ink-soft)}
.small{font-size:13px;color:var(--muted);line-height:1.5}

.grid{display:grid;gap:16px}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--muted);margin:0 0 8px}
.card p:last-child{margin-bottom:0}
.card .sub{font-family:var(--mono);font-size:11.5px;color:var(--muted-2);letter-spacing:.04em}

.pain{border-left:2px solid var(--line-2);padding-left:14px;margin:0 0 12px}
.pain strong{color:var(--ink);font-weight:600}

/* ---------- diagram ---------- */
.diagram{background:#0d0f12;border:1px solid var(--line);border-radius:var(--r);
         padding:8px 6px 2px;overflow:hidden}
.diagram svg{display:block;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin:12px 2px 0;font-family:var(--mono);
        font-size:11px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:2px;border-radius:1px;display:inline-block}

/* ---------- data tables: dense, sticky header, hairline separators ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
        color:var(--muted);text-align:left;padding:10px 12px;background:var(--raised);
        border-bottom:1px solid var(--line);white-space:nowrap;
        position:sticky;top:0;z-index:2}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft);
        line-height:1.5}
.tbl tr:last-child td{border-bottom:0}
.tbl .h{font-family:var(--mono);font-size:12.5px;color:var(--ink);letter-spacing:.01em}
.tbl .b{color:var(--ink)}
.tbl tbody tr{transition:background var(--fast)}
.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.tbl .nowrap{white-space:nowrap;font-family:var(--mono);font-size:12.5px}
.scroll{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
        border-radius:var(--r);background:var(--panel);max-height:74vh}
.scroll .tbl{min-width:620px}
.scroll.tall{max-height:74vh}

/* ---------- pipeline ---------- */
.pipe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.step{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);
      border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r-sm);padding:6px 10px}
.arr{color:var(--muted-2);font-family:var(--mono);font-size:12px}

/* ---------- numbered loop ---------- */
ol.loop{counter-reset:s;list-style:none;margin:0;padding:0}
ol.loop li{position:relative;padding:0 0 14px 40px;counter-increment:s}
ol.loop li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);
  background:var(--panel);border-radius:var(--r-xs);padding:3px 6px;line-height:1.4}
ol.loop li:last-child{padding-bottom:0}
ol.loop .t{color:var(--ink);font-weight:600}

/* ---------- KPI tiles: one large number, small label, small delta, mini bar ---------- */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;
      transition:border-color var(--fast)}
.tile:hover{border-color:var(--line-2)}
.tile .n{font-family:var(--mono);font-size:28px;font-weight:500;line-height:1.1;
         letter-spacing:-.02em;color:var(--accent)}
.tile .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
         color:var(--muted);margin-top:8px}
.tile .d{font-size:12px;color:var(--muted-2);margin-top:8px;line-height:1.45}

/* ---------- KPI cards ---------- */
.kpis{display:grid;gap:16px}
@media(min-width:700px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
        color:var(--muted)}
.kpi p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.kpi .v{font-family:var(--mono);font-size:22px;color:var(--accent);margin:8px 0 0;
        letter-spacing:-.01em;line-height:1.2}

/* ---------- mini bar charts, CSS only ---------- */
.mini{display:flex;align-items:flex-end;gap:3px;height:24px;margin-top:12px}
.mini i{flex:1;min-width:2px;background:var(--line-2);border-radius:1px;transition:background var(--fast)}
.mini i.up{background:rgba(45,212,191,.55)}
.mini i.warn{background:rgba(240,178,104,.55)}
.mini i.bad{background:rgba(244,115,110,.55)}
.mini i.hi{background:var(--accent)}
.mini i.ok{background:rgba(52,211,153,.55)}
.mini-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-family:var(--mono);
             font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.mini-legend span{display:inline-flex;align-items:center;gap:5px}

/* ---------- division health strip ---------- */
.health{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.health{grid-template-columns:repeat(4,1fr)}}
.health .hcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;
               transition:border-color var(--fast)}
.health .hcard:hover{border-color:var(--line-2)}
.health .hcard .nm{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
                   color:var(--muted)}
.health .hcard .sc{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--ink);
                   margin:8px 0 0;letter-spacing:-.02em;line-height:1.1}
.health .hcard .ow{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45}
.bar{height:6px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--accent);opacity:.75;transition:width var(--fast)}
.meter{height:10px;border-radius:2px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);opacity:.8}

/* ---------- division cards ---------- */
.score-row{display:flex;align-items:baseline;gap:8px;justify-content:flex-start;margin:0 0 8px}
.score{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;
       color:var(--accent);line-height:1.1}

/* ---------- status pills ---------- */
.badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
       text-transform:uppercase;padding:3px 7px;border-radius:var(--r-xs);
       border:1px solid var(--line-2);color:var(--muted);white-space:nowrap;
       background:var(--panel-2);transition:border-color var(--fast)}
.badge.ok{color:var(--ok);border-color:rgba(52,211,153,.35)}
.badge.warn{color:var(--warn);border-color:rgba(240,178,104,.35)}
.badge.bad{color:var(--bad);border-color:rgba(244,115,110,.35)}
.badge.teal{color:var(--accent);border-color:rgba(45,212,191,.35)}
.badge.dim{color:var(--muted-2)}

/* ---------- buttons ---------- */
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
     color:#06231f;background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-sm);
     padding:9px 14px;cursor:pointer;line-height:1.3;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.btn:hover{background:var(--teal-soft);border-color:var(--teal-soft)}
.btn:focus-visible{outline:2px solid var(--teal-soft);outline-offset:2px}
.btn:disabled{background:transparent;color:var(--muted-2);border-color:var(--line);cursor:default}
.btn.ghost{background:transparent;color:var(--ink-soft);border-color:var(--line-2)}
.btn.ghost:hover{color:var(--ink);border-color:var(--muted);background:var(--panel-2)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0}

/* ---------- pipeline stages, interactive ---------- */
.stages{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:0}
.stage{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
       border:1px solid var(--line);background:transparent;border-radius:var(--r-sm);
       padding:7px 10px;color:var(--muted-2);white-space:nowrap;
       transition:color var(--fast),border-color var(--fast),background var(--fast)}
.stage.done{color:var(--ink-soft);border-color:var(--line-2);background:var(--panel)}
.stage.on{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
/* bara de derulare ascunsa pe randurile care se deruleaza lateral, ca sa nu apara
   linia groasa sub prima etapa si sub navigatie pe telefon */
.stages,.nav-links{scrollbar-width:none;-ms-overflow-style:none}
.stages::-webkit-scrollbar,.nav-links::-webkit-scrollbar{display:none;height:0}
.nav-links{mask-image:linear-gradient(to right,#000 92%,rgba(0,0,0,.4));
           -webkit-mask-image:linear-gradient(to right,#000 92%,rgba(0,0,0,.4))}
/* urma de continuare la capatul din dreapta, ca sa se vada ca mai exista etape */
.stages{mask-image:linear-gradient(to right,#000 88%,rgba(0,0,0,.35));
       -webkit-mask-image:linear-gradient(to right,#000 88%,rgba(0,0,0,.35))}
@media(max-width:520px){
  .meta{gap:6px}
  .pill{font-size:11px;padding:5px 10px}
}

/* ---------- council votes ---------- */
.vote{display:grid;grid-template-columns:1fr;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.vote:last-child{border-bottom:0}
.vote .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.vote .agent{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.vote .why{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.vote .conf{font-family:var(--mono);font-size:11px;color:var(--muted-2);letter-spacing:.06em;
            text-transform:uppercase}

.tallies{display:grid;gap:16px}
@media(min-width:640px){.tallies{grid-template-columns:repeat(3,1fr)}}
.tally{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.tally .n{font-family:var(--mono);font-size:18px;color:var(--ink);letter-spacing:-.01em}
.tally .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
          color:var(--muted);margin-top:8px;line-height:1.45}

/* ---------- run log ---------- */
.log{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--bg);
     border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;
     max-height:280px;overflow-y:auto;line-height:1.6}
.log div{padding:5px 0;border-bottom:1px solid var(--line)}
.log div:last-child{border-bottom:0}
.log .t{color:var(--muted-2)}
.log .g{color:var(--ok)}
.log .w{color:var(--warn)}

footer{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;
       font-family:var(--mono);font-size:11.5px;color:var(--muted);
       display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;line-height:1.6}
footer .mono{font-family:var(--mono);font-size:11.5px;color:var(--muted-2)}
a{color:var(--accent);text-decoration:none;transition:color var(--fast)}
a:hover{color:var(--teal-soft);text-decoration:underline}
.mono{font-family:var(--mono)}
strong.mono,strong{font-variant-numeric:tabular-nums}