/* ==========================================================================
   NAR Audio Monitor — shared design system
   "Refined broadcast-console dark": charcoal surfaces, one calm teal accent,
   hairline borders, tabular numerals, subtle elevation. Reads as instrumentation.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces */
  --bg:#0a0d11;
  --bg-2:#0c1015;
  --surface:#11161d;
  --surface-2:#161c25;
  --surface-3:#1b222d;
  --line:rgba(255,255,255,.065);
  --line-2:rgba(255,255,255,.11);
  --hair:rgba(255,255,255,.045);
  /* text */
  --text:#e7ecf2;
  --text-2:#9aa5b3;
  --dim:#828d9c;
  --faint:#5a6472;
  /* accent + status (calm, desaturated) */
  --accent:#2dd4bd;
  --accent-2:#46b9e6;
  --accent-soft:rgba(45,212,189,.13);
  --ok:#3ecf8e;
  --info:#5fa8f5;
  --warn:#e3ab44;
  --bad:#f0626e;
  --ok-soft:rgba(62,207,142,.13);
  --warn-soft:rgba(227,171,68,.13);
  --bad-soft:rgba(240,98,110,.13);
  /* shape */
  --radius:14px;
  --radius-sm:9px;
  --radius-xs:7px;
  --shadow:0 1px 0 rgba(255,255,255,.025) inset, 0 10px 34px -16px rgba(0,0,0,.7);
  --shadow-lg:0 1px 0 rgba(255,255,255,.03) inset, 0 22px 60px -22px rgba(0,0,0,.8);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* back-compat aliases (older inline styles reference these) */
  --txt:var(--text); --panel:var(--surface); --panel2:var(--surface-2);
  --accent2:var(--accent-2); --glow:none;
  --num: "Inter", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--text);min-height:100vh;
  font:14px/1.5 var(--sans);font-feature-settings:"cv05","ss01";letter-spacing:-.005em;
  background:
    radial-gradient(900px 600px at 100% -5%,rgba(45,212,189,.05),transparent 60%),
    radial-gradient(900px 600px at 0% -5%,rgba(70,185,230,.04),transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-soft)}
a{color:var(--accent-2);text-decoration:none}
a:hover{color:var(--accent)}
.num,.tnum,.v,.metric .v,.score,.gauge,.lv .v,.lufs,.meter-read{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mono{font-family:var(--mono)}
.grow{flex:1}
.muted{color:var(--dim);font-size:12px}
.err,.errtext{color:var(--bad)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#27303d;background-clip:content-box}

/* --------------------------------------------------------------- header --- */
header{
  display:flex;align-items:center;gap:14px;padding:13px 22px;
  border-bottom:1px solid var(--line);
  background:rgba(10,13,17,.82);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  position:sticky;top:0;z-index:30;flex-wrap:wrap;
}
header h1,h1{
  font-size:16px;margin:0;font-weight:680;letter-spacing:-.01em;color:var(--text);
  display:flex;align-items:center;gap:9px;
}
h1 .accentmark{width:9px;height:18px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--accent),var(--accent-2))}
.sub{color:var(--dim);font-size:12px;margin-top:2px}

/* chips / pills */
.pill{font-size:11.5px;color:var(--text-2);border:1px solid var(--line-2);
  padding:4px 11px;border-radius:8px;background:var(--surface);transition:.16s;line-height:1.4;white-space:nowrap}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.navp{text-decoration:none}
.pill.solid{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.hpill{font-size:11px;border:1px solid var(--line-2);padding:3px 9px;border-radius:8px;color:var(--text-2)}
.hpill.warn{color:var(--warn);border-color:rgba(227,171,68,.4);background:var(--warn-soft)}
.hpill.bad{color:var(--bad);border-color:rgba(240,98,110,.4);background:var(--bad-soft)}

/* --------------------------------------------------------------- layout --- */
main{padding:22px;max-width:1200px;margin:0 auto;display:grid;gap:16px}
.row{display:grid;gap:16px}
@media(min-width:860px){.row.cols{grid-template-columns:280px 1fr}}

/* ---------------------------------------------------------------- cards --- */
.card{
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);transition:border-color .2s, box-shadow .2s;
  position:relative;
}
.card:hover{border-color:var(--line-2)}
.card h2{
  font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--dim);
  margin:0 0 15px;font-weight:650;display:flex;align-items:center;gap:9px;
}
.card h2::before{content:"";flex:0 0 auto;width:3px;height:12px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2))}
.card h2.bare::before{display:none}
.btnrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* --------------------------------------------------------- buttons/inputs - */
button{font-family:inherit}
.btn,button.btn{
  background:linear-gradient(180deg,var(--accent),#23b8a4);color:#04201c;border:0;
  border-radius:var(--radius-sm);padding:9px 16px;font-weight:650;font-size:13px;cursor:pointer;
  transition:transform .12s, filter .12s;letter-spacing:-.01em;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
/* the original primary button selector (#deepBtn etc. use bare <button>) */
.card button:not(.obtn):not(.ackbtn):not(.seg button):not(.periods button):not(.scope button){
  background:linear-gradient(180deg,var(--accent),#23b8a4);color:#04201c;border:0;
  border-radius:var(--radius-sm);padding:9px 16px;font-weight:650;font-size:13px;cursor:pointer;transition:transform .12s,filter .12s;
}
.card button:not(.obtn):not(.ackbtn):not(.seg button):not(.periods button):not(.scope button):hover{transform:translateY(-1px);filter:brightness(1.06)}
.obtn{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:7px 13px;font-weight:600;font-size:12px;cursor:pointer;transition:.15s}
.obtn:hover{border-color:var(--accent);color:var(--accent)}
.obtn.warn{border-color:rgba(227,171,68,.45);color:var(--warn);background:var(--warn-soft)}
input,select{background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);
  border-radius:var(--radius-xs);padding:7px 9px;font:12.5px var(--mono);transition:.15s}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* segmented controls (period / scope / level / source) */
.seg,.periods,.scope{display:inline-flex;gap:2px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:3px}
.seg button,.periods button,.scope button{background:transparent;color:var(--dim);border:0;
  padding:6px 12px;border-radius:6px;font-weight:600;font-size:12px;cursor:pointer;transition:.14s;letter-spacing:-.01em}
.seg button:hover,.periods button:hover,.scope button:hover{color:var(--text)}
.seg button.on,.periods button.on,.scope button.on{background:var(--accent-soft);color:var(--accent)}

/* --------------------------------------------------------------- score ---- */
.score-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.score{font-size:64px;font-weight:780;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.score small{font-size:17px;color:var(--dim);font-weight:500}
.score-label{margin-top:8px;font-size:13px;color:var(--text-2);font-weight:500}
.ts{margin-top:10px;font-size:11px;color:var(--faint)}

/* -------------------------------------------------------------- metrics --- */
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:11px}
.metric{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;transition:border-color .15s, transform .15s}
.metric:hover{border-color:var(--line-2)}
.metric .k{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.metric .v{font-size:22px;font-weight:640;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.metric .u{font-size:12px;color:var(--dim);font-weight:400}
.metric .tgt{font-size:10.5px;color:var(--faint);margin-top:4px;font-family:var(--mono)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:1px;flex:0 0 auto}
.d-ok{background:var(--ok);box-shadow:0 0 6px rgba(62,207,142,.5)}
.d-info{background:var(--info)} .d-warn{background:var(--warn)} .d-bad{background:var(--bad);box-shadow:0 0 6px rgba(240,98,110,.5)}

/* ------------------------------------------------------------- suggest ---- */
.sug{border-left:2px solid var(--line-2);padding:12px 15px;margin-bottom:10px;background:var(--surface-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.sug.ok{border-color:var(--ok)} .sug.info{border-color:var(--info)}
.sug.warn{border-color:var(--warn)} .sug.bad{border-color:var(--bad)}
.sug .head{display:flex;align-items:center;gap:8px;font-weight:600}
.sug .area{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);
  border:1px solid var(--line-2);padding:2px 8px;border-radius:20px}
.sug .find{margin:7px 0 4px} .sug .fix{color:var(--text-2);font-size:13px}
.sug .fix b{color:var(--text);font-weight:600}

/* --------------------------------------------------------------- charts --- */
.charts{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(max-width:760px){.charts{grid-template-columns:1fr}}
.chartbox{height:200px}
canvas{max-width:100%}
.chart-label{font-size:11px;color:var(--dim);margin-bottom:7px;display:flex;align-items:center;gap:6px}

/* ---------------------------------------------------------------- tables -- */
table.cmp,table.diff{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.cmp th,table.cmp td,table.diff th,table.diff td{padding:9px 11px;text-align:right;border-bottom:1px solid var(--hair);white-space:nowrap}
table.cmp th,table.diff th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);font-weight:600;
  position:sticky;top:0;background:var(--surface);z-index:1}
table.cmp th:first-child,table.cmp td:first-child,table.diff th:first-child,table.diff td:first-child{text-align:left}
table.cmp tr:hover td{background:rgba(255,255,255,.018)}
table.cmp tr.home td{background:var(--accent-soft)}
table.cmp tr.home td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
table.cmp .nm{font-weight:600}
table.cmp .tag{font-size:9px;color:var(--accent);border:1px solid rgba(45,212,189,.4);border-radius:20px;padding:1px 6px;margin-left:6px}
table.cmp .grp{font-size:9px;color:var(--dim);border:1px solid var(--line-2);border-radius:20px;padding:1px 6px;margin-left:6px}
table.cmp .delta{font-size:10px;color:var(--faint);display:block;font-weight:400}
.v-ok{color:var(--ok)} .v-warn{color:var(--warn)} .v-bad{color:var(--bad)}
table.diff td:first-child,table.diff th:first-child{color:var(--dim)}
.dgood{color:var(--ok)} .dbad{color:var(--bad)}

/* ------------------------------------------------------------ incidents --- */
.evt{display:flex;gap:11px;align-items:flex-start;padding:10px 13px;margin-bottom:8px;background:var(--surface-2);
  border:1px solid var(--line);border-left:2px solid var(--line-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;transition:.15s}
.evt.warn{border-left-color:var(--warn)} .evt.bad{border-left-color:var(--bad)}
.evt.resolved{opacity:.5} .evt.acked{opacity:.55}
.evt .ico{font-weight:700;font-size:13px;line-height:1.5}
.evt.warn .ico{color:var(--warn)} .evt.bad .ico{color:var(--bad)}
.evt .body{flex:1;min-width:0}
.evt .ttl{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.evt .meta{font-size:11.5px;color:var(--dim);margin-top:3px}
.evt .when{font-size:11px;color:var(--dim);white-space:nowrap;text-align:right}
.live-tag{font-size:9px;color:var(--bad);border:1px solid rgba(240,98,110,.5);border-radius:20px;padding:0 6px;margin-right:5px}
.acktag{font-size:9px;color:var(--ok);border:1px solid rgba(62,207,142,.5);border-radius:20px;padding:0 6px}
.ackbtn{font-size:10px;padding:3px 9px;border-radius:6px;border:1px solid var(--line-2);background:transparent;
  color:var(--dim);cursor:pointer;font-weight:600;transition:.14s}
.ackbtn:hover{border-color:var(--ok);color:var(--ok)}
.allclear{color:var(--ok);display:flex;align-items:center;gap:9px;padding:8px 2px}
.clip{color:var(--accent-2)}
.mwin{font-size:11px;color:var(--warn);border:1px solid rgba(227,171,68,.45);border-radius:8px;padding:4px 10px;background:var(--warn-soft)}

/* ------------------------------------------------------------- rankings --- */
.rk{display:grid;grid-template-columns:132px 100px 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair)}
.rk:last-child{border-bottom:0}
.rk .lbl{font-size:12px;color:var(--text-2)}
.rk .val{font-weight:640;font-variant-numeric:tabular-nums}
.rk .val .u{font-size:10px;color:var(--dim);font-weight:400}
.rk .rankn{font-size:11px;color:var(--dim);margin-top:1px}
.track{position:relative;height:7px;background:var(--surface-3);border:1px solid var(--line);border-radius:6px}
.track .band{position:absolute;top:-1px;bottom:-1px;background:var(--ok-soft);
  border-left:1px dashed rgba(62,207,142,.55);border-right:1px dashed rgba(62,207,142,.55)}
.track .med{position:absolute;top:-3px;bottom:-3px;width:2px;background:rgba(255,255,255,.32)}
.track .mk{position:absolute;top:-3.5px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg);
  transform:translateX(-50%);box-shadow:0 1px 4px rgba(0,0,0,.6)}

/* -------------------------------------------------------------- daypart --- */
.daygrid{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.dc{height:34px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;border:1px solid rgba(0,0,0,.25);cursor:default;transition:transform .1s}
.dc:hover{transform:scale(1.08)}
.dayaxis{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:5px}
.dayaxis span{text-align:center;font-size:8px;color:var(--faint)}
.lnk{color:var(--accent-2);text-decoration:none;font-size:12px;border:1px solid var(--line-2);padding:6px 11px;border-radius:var(--radius-xs);transition:.15s}
.lnk:hover{border-color:var(--accent-2)}

/* ---------------------------------------------------------- stereo image -- */
.siStat{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--hair)}
.siStat:last-child{border-bottom:0}
.siStat .lab{font-size:12px;color:var(--text-2)}
.siStat .big{font-size:22px;font-weight:680;font-variant-numeric:tabular-nums}
.cbar{display:grid;grid-template-columns:64px 1fr 46px;gap:10px;align-items:center;padding:5px 0}
.cbar .bn{font-size:11px;color:var(--dim);text-transform:capitalize}
.ctrack{position:relative;height:10px;background:var(--surface-3);border:1px solid var(--line);border-radius:6px}
.ctrack .zero{position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;background:rgba(255,255,255,.3)}
.ctrack .fillc{position:absolute;top:1px;bottom:1px;border-radius:3px;transition:left .4s,right .4s}
.cbar .cv{font-size:12px;font-weight:640;text-align:right;font-variant-numeric:tabular-nums}
.siScale{display:flex;justify-content:space-between;font-size:9px;color:var(--faint);margin:4px 0 0 74px}

/* ------------------------------------------------------ now playing/track - */
.npnow{font-size:12px;color:var(--text-2)}
.trk{padding:9px 0;border-bottom:1px solid var(--hair)}
.trk:last-child{border-bottom:0}
.trkn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trkm{font-size:11px;color:var(--dim);margin-top:3px;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------ compliance gauge -- */
.gauge{font-size:46px;font-weight:780;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cbar2{display:grid;grid-template-columns:140px 1fr 46px;gap:11px;align-items:center;padding:6px 0}
.cbar2 .cl{font-size:12px;color:var(--text-2)}
.cbar2 .ct{position:relative;height:8px;background:var(--surface-3);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cbar2 .cf{position:absolute;left:0;top:0;bottom:0;border-radius:6px;transition:width .5s}
.cbar2 .cvv{font-size:12px;font-weight:640;text-align:right;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- live + meter ---- */
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);flex:0 0 auto}
.livedot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(62,207,142,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,207,142,.45)}70%{box-shadow:0 0 0 7px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
.meter-wrap{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:center}
@media(max-width:720px){.meter-wrap{grid-template-columns:1fr}}
.reads{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.read .k{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.read .v{font-size:30px;font-weight:760;line-height:1.04;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.read .v.lg{font-size:40px}
.read .u{font-size:12px;color:var(--dim);font-weight:500}
#meterCanvas{width:100%;height:118px;display:block}
.liveStrip .lv .k{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.liveStrip .lv .v{font-size:26px;font-weight:740;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.liveStrip .lv .u{font-size:12px;color:var(--dim);font-weight:500}

/* -------------------------------------------------------------- diff ------ */
.diffgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:680px){.diffgrid{grid-template-columns:1fr}}
.rng{display:flex;flex-direction:column;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px}
.rng label{font-size:11px;color:var(--dim);font-weight:600}
table.diff{margin-top:14px}

/* -------------------------------------------------------- skeleton load --- */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:6px;color:transparent!important}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  transform:translateX(-100%);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.fade-in{animation:fadein .3s ease}
@keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* utilities */
.flex{display:flex;align-items:center;gap:10px}
.right{margin-left:auto}
hr.sep{border:0;border-top:1px solid var(--line);margin:4px 0}

/* print (report) */
@media print{
  html,body{background:#fff;color:#111}
  body{background-image:none}
  .card{box-shadow:none;border-color:#d0d0d0;background:#fff}
  header{position:static;background:#fff;border-color:#ddd}
  h1,.card h2,.stat .v,td,th{color:#111!important}
  .muted,.stat .k,.stat .tgt{color:#555!important}
  .pill,.seg,.periods,.obtn,button{display:none}
  a{color:#111}
}