/* ==========================================================================
   monitor.css — the Agent behavior monitoring surface (08-production-monitor.html,
   scene 15). Moved VERBATIM from the page's inline <style>. Linked AFTER _theme.css.
   Includes the locally-defined .livedot (the live-pill / feed dot — NOT in
   _theme.css; if dropped the live pill loses styling) and @keyframes slideIn (the
   feed-item entrance). .livedot's `animation:pulse` resolves to _theme.css's
   opacity pulse (this page has no local @keyframes pulse).
   ========================================================================== */
  .pm { max-width: 1280px; margin: 0 auto; padding: 24px 26px 80px; }
  .pm-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .pm-head h1 { font-size: 26px; letter-spacing:-0.02em; }
  .livedot { width:9px;height:9px;border-radius:50%;background:var(--pass);box-shadow:0 0 0 4px rgba(92,229,138,.18);animation:pulse 1.4s infinite; }

  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
  .stat { padding:16px 18px; }
  .stat .k { font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
  .stat .v { font-size:30px; font-weight:800; letter-spacing:-0.02em; margin-top:6px; }
  .stat .v small{font-size:14px;color:var(--text-muted);font-weight:600;}
  .stat .d { font-size:12px; margin-top:4px; }

  .main { display:grid; grid-template-columns: 420px 1fr; gap:18px; align-items:start; }
  .panel { padding:0; overflow:hidden; }
  .panel-hd { padding:14px 18px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); }

  /* scenario list */
  .scnlist { padding:6px; }
  .scn { display:grid; grid-template-columns: 1fr 64px 52px; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:background .12s, border-color .12s; }
  .scn:hover { background: rgba(255,255,255,.03); }
  .scn.active { background: rgba(45,212,191,.07); border-color: rgba(45,212,191,.35); }
  .scn .nm { font-size:13.5px; font-weight:500; }
  .scn .sub { font-size:11px; color:var(--text-faint); margin-top:2px; font-family:var(--font-mono); }
  .scn .spark { display:flex; gap:2.5px; align-items:flex-end; height:24px; justify-content:flex-end; }
  .scn .spark i { width:4px; border-radius:1.5px; }
  .scn .spark i.g { background: var(--pass); } .scn .spark i.r { background: var(--fail); }
  .scn .rate { text-align:right; font:700 15px var(--font-mono); }
  .rate.g{color:var(--pass);} .rate.w{color:var(--warn);} .rate.r{color:var(--fail);}

  /* detail sidebar */
  .dt-hd { padding:16px 20px; border-bottom:1px solid var(--border); }
  .dt-hd .top { display:flex; align-items:flex-start; gap:12px; }
  .dt-hd .title { font-size:17px; font-weight:600; letter-spacing:-0.01em; }
  .dt-hd .slug { font:500 12px var(--font-mono); color:var(--text-faint); margin-top:3px; }
  .dt-hd .big { margin-left:auto; text-align:right; }
  .dt-hd .big .n { font:800 28px var(--font-mono); letter-spacing:-0.02em; line-height:1; }
  .dt-hd .big .l { font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:5px; }

  .chartblk { padding:16px 20px 12px; border-bottom:1px solid var(--border); }
  .chartblk .ct { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .chartblk .ct h4 { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); }
  .chartwrap { position:relative; }
  .chart-cap { display:flex; justify-content:space-between; font:500 11px var(--font-mono); color:var(--text-faint); margin-top:6px; }

  /* feed */
  .feedblk { padding:8px 20px 14px; }
  .feedblk .fh { display:flex; justify-content:space-between; align-items:center; padding:10px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); }
  .feed { display:flex; flex-direction:column; gap:0; }
  .fitem { display:grid; grid-template-columns: 26px 1fr auto; gap:11px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--border); animation:slideIn .35s ease; }
  .fitem:last-child{border-bottom:none;}
  @keyframes slideIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:none;} }
  .fitem .v { width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;flex-shrink:0; }
  .fitem .v.pass { background:rgba(92,229,138,.14); color:var(--pass); }
  .fitem .v.fail { background:rgba(230,69,96,.14); color:var(--fail); }
  .fitem .q { font-size:13px; }
  .fitem .meta { font:500 11px var(--font-mono); color:var(--text-faint); margin-top:2px; }
  .fitem .rt { text-align:right; font:500 11px var(--font-mono); color:var(--text-faint); }