/* Vertex Human — the Console. Styles.
   Served from this deploy, next to index.html and app.js. Nothing is inlined in
   the page so the Content-Security-Policy in vercel.json can refuse inline
   script outright; inline STYLE attributes are still used by app.js for chart
   geometry, which is why style-src keeps 'unsafe-inline' and script-src does
   not. */

  /* Barlow Semi Condensed, Oswald and Poppins are the only three fonts allowed in
     a Vertex deliverable. The console previously ran on Avenir Next, DIN
     Condensed and DIN Alternate — the exact three macOS system fonts that cost a
     deck rebuild on 4 September, because Apple ships them with embedding
     disabled. Replaced here rather than left to be found later. */
  @font-face{font-family:Poppins;src:url(fonts/Poppins-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
  @font-face{font-family:Poppins;src:url(fonts/Poppins-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
  @font-face{font-family:Poppins;src:url(fonts/Poppins-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
  @font-face{font-family:Oswald;src:url(fonts/Oswald-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
  @font-face{font-family:Oswald;src:url(fonts/Oswald-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
  @font-face{font-family:'Barlow Semi Condensed';src:url(fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}

  /* Palette and band geometry are the plan renderer's, carried through the
     mockup. Not invented here, and not the old console's lighter green. */
  :root{
    --green:#3A7D44; --green-lt:#6AAF72; --green-tint:#EDF4EE;
    --ink:#0a0a0a; --body:#1f2937; --muted:#6b7280; --faint:#9ca3af;
    --line:#e5e7eb; --bg:#ffffff; --panel:#f7f7f5; --raise:#ffffff;
    --dark:#0a0a0a; --on-dark:#d1d5db;
    --warn:#9A5F08; --warn-bg:#FBF3E4;
    --crit:#A32E27; --crit-bg:#FBECEA;
    --ok:#3A7D44; --ok-bg:#EDF4EE;
    --meter:#d5dad5; --on-green:#ffffff;
    --body-font:Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --head-font:Oswald,'Poppins',sans-serif;
    --display-font:'Barlow Semi Condensed','Oswald',sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--body);
       font:15px/1.6 var(--body-font); -webkit-font-smoothing:antialiased}
  h1,h2,h3{color:var(--ink); margin:0; font-weight:600; letter-spacing:-0.015em}
  button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
  input{font:inherit}
  :focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:5px}
  .wrap{max-width:1320px; margin:0 auto; padding:0 24px}
  .lbl{font:600 11px/1 var(--head-font); text-transform:uppercase; letter-spacing:.18em; color:var(--green)}
  .lbl.mut{color:var(--muted)}
  .empty{color:var(--muted); font-size:13.5px; padding:12px 0}

  /* ---------------- login ---------------- */
  #login{min-height:100vh; display:grid; place-items:center; padding:24px}
  .card{width:100%; max-width:390px; border:1px solid var(--line); border-radius:12px;
        padding:34px; background:var(--raise)}
  .mark{font:600 12.5px/1 var(--head-font); letter-spacing:.2em; text-transform:uppercase;
        color:var(--ink); white-space:nowrap}
  .mark em{font-style:normal; color:var(--green)}
  .card h1{font-size:23px; margin:14px 0 6px}
  .card p.sub{color:var(--muted); font-size:13px; margin:0 0 22px}
  label{display:block; font:600 11px/1 var(--head-font); color:var(--muted);
        margin:16px 0 6px; text-transform:uppercase; letter-spacing:.12em}
  input[type=email],input[type=password]{width:100%; padding:11px 12px; border:1px solid var(--line);
        border-radius:7px; color:var(--ink); background:#fff}
  input:focus{outline:none; border-color:var(--green)}
  .btn{background:var(--green); color:#fff; padding:11px 16px; border-radius:7px; font-weight:600}
  .btn:disabled{opacity:.55; cursor:default}
  .btn.ghost{background:transparent; color:var(--muted); padding:6px 10px; font-weight:500}
  .btn.ghost:hover{color:var(--ink)}
  #loginBtn{width:100%; margin-top:24px}
  .err{color:var(--crit); font-size:13px; margin-top:14px; min-height:18px}

  /* ---------------- top bar ---------------- */
  #app{display:none}
  .bar{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:30}
  .bar .wrap{display:flex; align-items:center; gap:14px; height:62px}
  .chip{font:600 10px/1 var(--head-font); letter-spacing:.14em; text-transform:uppercase;
        border-radius:99px; padding:6px 11px; white-space:nowrap;
        color:var(--muted); background:var(--panel)}
  .chip.warn{color:var(--warn); background:var(--warn-bg)}
  .bar .who{margin-left:auto; font-size:13px; color:var(--muted); white-space:nowrap}

  /* ---------------- shell ---------------- */
  .cols{display:grid; grid-template-columns:300px 1fr; gap:30px; padding:24px 0 80px; align-items:start}
  @media (max-width:900px){ .cols{grid-template-columns:1fr} }
  .rail section{margin-bottom:22px}
  .rail .lbl{display:block; margin-bottom:10px}

  .picker{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--raise)}
  .picker button{display:block; width:100%; text-align:left; padding:11px 13px; border-bottom:1px solid var(--line)}
  .picker button:last-child{border-bottom:0}
  .picker button:hover{background:var(--panel)}
  .picker button[aria-current="true"]{background:var(--green-tint); box-shadow:inset 3px 0 0 var(--green)}
  .picker .t{font-weight:600; color:var(--ink); font-size:14px; display:flex; align-items:center; gap:8px}
  .picker .t .cnt{margin-left:auto; font-size:12px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
  .picker .s{font-size:12px; color:var(--muted); margin-top:2px}
  .picker button[aria-current="true"] .cnt{color:var(--green)}

  ul.clients{list-style:none; margin:0; padding:0; border:1px solid var(--line);
             border-radius:10px; overflow:hidden; background:var(--raise)}
  ul.clients li{border-bottom:1px solid var(--line)}
  ul.clients li:last-child{border-bottom:0}
  ul.clients button{width:100%; text-align:left; padding:11px 13px; display:flex; align-items:center; gap:10px}
  ul.clients button:hover{background:var(--panel)}
  ul.clients button[aria-current="true"]{background:var(--panel); box-shadow:inset 3px 0 0 var(--green)}
  .dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--meter)}
  .dot.ok{background:var(--green)} .dot.off{background:var(--faint)}
  ul.clients .nm{flex:1; min-width:0}
  ul.clients .nm b{display:block; font-weight:600; color:var(--ink); font-size:14px}
  ul.clients .nm span{display:block; font-size:12px; color:var(--muted);
                      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* ---------------- client header (dark) ---------------- */
  .hero{background:var(--dark); border-radius:12px; padding:22px 24px; margin-bottom:18px}
  .hero .crumb{font-size:11.5px; color:#8d968f; margin-bottom:9px}
  .hero h2{color:#fff; font-size:25px}
  .hero .rdy{display:flex; align-items:baseline; gap:16px; margin-top:8px; flex-wrap:wrap}
  .hero .rdy .big{font:600 58px/.95 var(--display-font); color:#fff;
                  letter-spacing:-.01em; font-variant-numeric:tabular-nums}
  .hero .rdy .bandword{font:600 11px/1 var(--head-font); letter-spacing:.14em; text-transform:uppercase;
        color:var(--green-lt); border:1px solid #2c3a2f; background:#12190f; border-radius:99px; padding:6px 12px}
  .hero .say{font-size:12.5px; color:#9aa39c; line-height:1.6; margin-top:15px; max-width:78%}
  .hero .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
  .hero .tag{font-size:11.5px; color:#c8cfc9; border:1px solid #262b27; background:#141714;
             border-radius:99px; padding:5px 11px}

  /* ---------------- drivers ---------------- */
  .drv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:24px}
  @media (max-width:620px){ .drv{grid-template-columns:1fr} }
  .tile{border:1px solid var(--line); border-radius:10px; padding:12px 13px; background:var(--raise);
        border-top:3px solid var(--meter); min-width:0}
  .tile.good{border-top-color:var(--green)}
  .tile.bad{background:var(--crit-bg); border-color:transparent; border-top-color:var(--crit)}
  .tile .top{display:flex; align-items:baseline; gap:8px}
  .tile .n{font:600 28px/1.05 var(--display-font); color:var(--ink);
           font-variant-numeric:tabular-nums; letter-spacing:-.01em}
  .tile .of{font-size:12px; color:var(--faint)}
  .tile .bw{margin-left:auto; font:600 10px/1 var(--head-font); letter-spacing:.1em; text-transform:uppercase;
            color:var(--green); background:var(--ok-bg); border-radius:5px; padding:4px 6px}
  .tile.bad .bw{color:var(--crit); background:#fff}
  .tile .l{margin-top:7px; font-size:10px; letter-spacing:.1em}
  .tile .sub{font-size:12px; color:var(--muted); margin-top:5px}

  /* ---------------- tabs ---------------- */
  .tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; margin-bottom:22px}
  .tabs button{font-size:14px; font-weight:500; color:var(--muted); padding:10px 14px;
               border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
  .tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--green); font-weight:600}
  .tabs button:disabled{color:var(--faint); cursor:default}

  /* ---------------- panes ---------------- */
  .row{display:flex; align-items:center; gap:14px; padding:11px 14px;
       border:1px solid var(--line); border-radius:9px; margin-bottom:8px; background:var(--raise)}
  .row .grow{flex:1; min-width:0}
  .row .name{color:var(--ink); font-weight:600; font-size:14px}
  .row .sub{font-size:12.5px; color:var(--muted); margin-top:3px}
  .btn.sm{padding:7px 12px; font-size:13px; border-radius:6px}
  .btn.out{background:transparent; color:var(--ink); border:1px solid var(--line)}
  .btn.out:hover{background:var(--panel)}
  table{width:100%; border-collapse:collapse; font-size:13px}
  th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
  th{font:600 11px/1 var(--head-font); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  td.v{font-variant-numeric:tabular-nums; color:var(--ink)}
  .scroll{overflow-x:auto}
  .stats{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px}
  .stat{border:1px solid var(--line); border-radius:9px; padding:12px 16px; min-width:118px; background:var(--raise)}
  .stat .n{font:600 22px/1.1 var(--display-font); color:var(--ink); font-variant-numeric:tabular-nums}
  .stat .l{font:600 10px/1.3 var(--head-font); letter-spacing:.1em; text-transform:uppercase;
           color:var(--muted); margin-top:6px}
  .todo{border:1px dashed var(--line); border-radius:10px; padding:22px; color:var(--muted);
        font-size:13.5px; background:var(--panel)}
  .todo > b{color:var(--ink); display:block; margin-bottom:5px; font-size:14px}
  .hint{font-size:12.5px; color:var(--muted); line-height:1.55; margin:10px 0 0}
  .blk{margin-bottom:26px}
  .blk .lbl{display:block; margin-bottom:10px}
  .blk .lbl .btn{margin-left:10px; vertical-align:middle}
  .tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
  @media (max-width:760px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .tile .n small{font:500 13px var(--body-font); color:var(--muted); margin-left:3px}

  /* ---------------- biometrics ---------------- */
  .biobar{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
  .biobar h3{font-size:18px}
  .biobar .when{font-size:12.5px; color:var(--muted)}
  .range{display:inline-flex; gap:2px; background:var(--panel); padding:3px; border-radius:9px; margin-left:auto}
  .range button{font-size:13px; color:var(--muted); padding:6px 14px; border-radius:7px}
  .range button[aria-pressed="true"]{background:var(--raise); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.10)}
  .night{display:grid; grid-template-columns:190px 1fr; gap:18px; align-items:center}
  @media (max-width:700px){ .night{grid-template-columns:1fr} }
  .night .score{text-align:center; padding:18px 12px}
  .night .score .n{font-size:46px}
  .stagebar{display:flex; gap:4px; align-items:flex-end}
  .stage{min-width:0}
  .stage i{display:block; height:14px; border-radius:3px}
  .stage .k{font-size:10.5px; color:var(--muted); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .stage .m{font-size:12px; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
  .chart{border:1px solid var(--line); border-radius:12px; background:var(--raise); padding:16px 18px 10px; margin-bottom:12px}
  .chart .top{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:6px}
  .chart .top b{font-size:15px; color:var(--ink)}
  .chart .cs{display:flex; gap:18px; flex-wrap:wrap; margin-left:auto}
  .chart .cs span{font-size:12px; color:var(--muted)}
  .chart .cs span b{font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; margin-right:4px}
  .chart svg{width:100%; height:auto; display:block}
  .legend{display:flex; gap:18px; justify-content:center; font-size:11.5px; color:var(--muted); padding:6px 0 2px; flex-wrap:wrap}
  .legend i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px}
  .legend i.dash{width:14px; height:0; border-top:2px dashed var(--muted); border-radius:0; vertical-align:middle}
  td.z{color:var(--faint)}

  /* ---------------- notes ---------------- */
  .note{border:1px solid var(--line); border-radius:9px; padding:12px 14px; margin-bottom:8px; background:var(--raise)}
  .note.priv{background:var(--warn-bg); border-color:transparent}
  .note .meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:6px; flex-wrap:wrap}
  .note .meta b{color:var(--ink)}
  .note .meta .act{margin-left:auto; display:flex; gap:2px}
  .note .body{white-space:pre-wrap; font-size:14px; color:var(--body); overflow-wrap:anywhere}
  .note textarea, .compose textarea{width:100%; min-height:88px; padding:10px 12px; border:1px solid var(--line);
        border-radius:7px; font:inherit; font-size:14px; color:var(--ink); resize:vertical; background:#fff}
  .note textarea:focus, .compose textarea:focus{outline:none; border-color:var(--green)}
  .compose{border:1px dashed var(--line); border-radius:10px; padding:14px; background:var(--panel); margin-top:16px}
  .foot{display:flex; align-items:center; gap:14px; margin-top:10px; flex-wrap:wrap}
  label.ck{display:flex; align-items:center; gap:6px; margin:0; text-transform:none; letter-spacing:0;
           font:13px var(--body-font); color:var(--body); cursor:pointer}
  .foot .btn{margin-left:auto}

  /* ---------------- admin ---------------- */
  #admin{display:none; padding:24px 0 80px}
  .adm{display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:22px; align-items:start}
  .box{border:1px solid var(--line); border-radius:12px; background:var(--raise); padding:18px 20px; min-width:0}
  .box h3{font-size:16px; margin-bottom:4px}
  .box p.hint{font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.55}
  .fld{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 4px}
  .fld input[type=text],.fld select,select.place{flex:1; min-width:150px; padding:8px 10px; border:1px solid var(--line);
        border-radius:7px; color:var(--ink); background:#fff; font:inherit; font-size:13.5px}
  .fld input:focus,.fld select:focus,select.place:focus{outline:none; border-color:var(--green)}
  select.place{width:100%; padding:6px 8px; font-size:13px}
  .co{border-top:1px solid var(--line); padding:12px 0 6px}
  .co:first-of-type{border-top:0; padding-top:4px}
  .co .t{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .co .t b{color:var(--ink); font-size:14.5px}
  .co .t .slug{font-size:11.5px; color:var(--faint)}
  .co .t .cnt{margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
  .co ul{list-style:none; margin:6px 0 0; padding:0}
  .co li{display:flex; gap:8px; font-size:13px; padding:3px 0; color:var(--body)}
  .co li .cnt{margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums}
  .grant{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px dashed var(--line); font-size:13px}
  .grant .k{font:600 10px/1 var(--head-font); letter-spacing:.1em; text-transform:uppercase; color:var(--green);
            background:var(--ok-bg); border-radius:5px; padding:4px 6px; white-space:nowrap; margin-top:2px}
  .grant.off{color:var(--muted)} .grant.off .k{color:var(--muted); background:var(--panel)}
  .grant .grow{flex:1; min-width:0}
  .grant .sub{font-size:12px; color:var(--muted); margin-top:2px}
  .flash{font-size:13px; padding:10px 14px; border-radius:8px; margin-bottom:18px; display:none}
  .flash.ok{display:block; background:var(--ok-bg); color:var(--ok)}
  .flash.bad{display:block; background:var(--crit-bg); color:var(--crit)}
  tr.busy td{opacity:.45}
  td .sub{font-size:12px; color:var(--muted)}

  /* ---------------- viewer ---------------- */
  #viewer{display:none; position:fixed; inset:0; background:rgba(10,10,10,.55); z-index:50; padding:28px}
  #viewer .inner{background:#fff; border-radius:12px; height:100%; display:flex;
                 flex-direction:column; overflow:hidden}
  #viewer .vbar{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line)}