/* ==========================================================================
   components.css
   Purpose:
   - Reusable UI components: topbar, buttons, pills, panels, inputs, cards, tabs
   - Small utilities used across the UI (kv grids, hints, labels)
   Do NOT put:
   - Page layout grids (dashboard column structure)
   - Tool-specific visuals (scope, XY stage, footer formulas)
   ========================================================================== */

/* --- common text blocks --- */
h3{ margin:0 0 10px; font-size:14px; letter-spacing:.35px; }

.hint{ color: var(--muted); line-height:1.35; margin:8px 0 0; font-size:12px; }
.hint.small{ font-size:11px; }
.steps{ margin:8px 0 0 18px; color: var(--muted); font-size:12px; line-height:1.35; }

/* --- topbar --- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background: rgba(8,12,18,.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{ display:flex; gap:12px; align-items:center; }

.dot{
  width:12px; height:12px; border-radius:999px;
  background: var(--e);
  box-shadow: 0 0 22px rgba(77,227,255,.42), 0 0 46px rgba(77,227,255,.20);
}

.topbar h1.title{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.15;
}

.subtitle{ color:var(--muted); font-size:12px; margin-top:2px; }

.rightHeader{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.headerControls{
  display:flex;
  gap:10px;
  align-items:center;
}

/* --- pills + buttons --- */
.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(77,227,255,.25);
  background: rgba(0,0,0,.20);
  color: var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.4px;
  box-shadow: 0 0 0 1px rgba(77,227,255,.05) inset;
}
.pill.isLive{
  border-color: rgba(77,227,255,.45);
  color: rgba(77,227,255,.95);
  box-shadow: 0 0 0 1px rgba(77,227,255,.10) inset, 0 0 14px rgba(77,227,255,.12);
}
.pill.isHold{
  border-color: rgba(255,210,77,.50);
  color: rgba(255,210,77,.95);
  box-shadow: 0 0 0 1px rgba(255,210,77,.12) inset, 0 0 14px rgba(255,210,77,.10);
}

.btn{
  border:1px solid rgba(151,166,178,.22);
  background: rgba(20,28,40,.55);
  color: var(--text);
  padding:8px 10px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.btn.ghost{ background: rgba(0,0,0,.16); }
.btn:hover{ filter: brightness(1.10); }
.btn:active{ transform: translateY(1px); }

.activeHold{
  border-color: rgba(255,210,77,.45) !important;
  box-shadow: 0 0 0 1px rgba(255,210,77,.12) inset;
}

.unitSel{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: inherit;
  border-radius: 10px;
  padding: 6px 8px;
}

/* --- measurement strip --- */
.measStrip{
  max-width: 720px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(151,166,178,.18);
  background: rgba(0,0,0,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
  text-align: right;
}
.measLine{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: baseline;
  line-height: 1.25;
}
.measK{
  color: rgba(151,166,178,.75);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
}
.measV{
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.measSmall .measV{
  white-space: normal;
  max-width: 520px;
}

/* --- generic panels --- */
.panel{
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border:1px solid rgba(151,166,178,.16);
  border-radius:18px;
  padding:14px;
  box-shadow: var(--shadow2);
}

.panelSection{
  padding:10px 8px;
  border-bottom:1px solid rgba(151,166,178,.10);
}
.panelSection:last-child{ border-bottom:none; }

/* --- forms / controls (COMPACT MODE) --- */

.row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:6px 0;
}

.row label{
  min-width:95px;
  font-size:11px;
  letter-spacing:.2px;
}

.ctl{
  display:flex;
  gap:8px;
  align-items:center;
  flex:1;
}

/* ===== Instrument-style parameter control ===== */
.param{
  margin: 10px 0 12px;
}

.paramHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.paramLabel{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  line-height: 1.1;
}

.paramValue{
  display:flex;
  align-items:center;
  gap:8px;
}

.paramValue input[type="number"]{
  width: 110px;
  padding: 6px 8px;
  font-size: 12px;
}

.param input[type="range"]{
  width: 100%;
}

/* compact number fields */
input[type="number"]{
  width: 90px;
  padding:6px 8px;
  font-size:12px;
}

/* compact slider */
input[type="range"]{
  height: 10px;
}

.unit{
  font-size:11px;
  width:auto;
}

/* channels in 2 columns */
.checkRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:4px 12px;
}

.chk{
  font-size:11px;
  gap:6px;
}
.chk input{
  accent-color: rgba(77,227,255,.85);
}

/* key-value grids (used everywhere) */
.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 10px;
  margin-top:10px;
}
.k{ color: var(--muted); font-size:12px; font-weight:900; }
.v{ font-size:12px; font-weight:950; color: var(--text); }

/* --- dashboard cards + tabs --- */
.dashGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.dashBelow{ margin-top: 2px; }

.dashCard{
  grid-column: span 6;
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border:1px solid rgba(151,166,178,.16);
  border-radius:18px;
  padding:12px 12px 10px;
  min-width: 0;
  box-shadow: var(--shadow2);
}

/* kept (legacy big KPI cards — harmless if unused) */
.dashCard.kpi{
  grid-column: span 7;
  border-color: rgba(77,227,255,.22);
  box-shadow:
    0 0 0 1px rgba(77,227,255,.06) inset,
    0 0 44px rgba(77,227,255,.06),
    var(--shadow);
}
.metricsCard{ grid-column: span 5; }

.dashTitle{
  font-weight:950;
  letter-spacing:.25px;
  font-size:13px;
  margin-bottom:8px;
  color: rgba(230,237,243,.95);
}

.dashTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.tabs{ display:flex; gap:6px; flex-wrap:wrap; }

.tabBtn{
  border:1px solid rgba(151,166,178,.18);
  background: rgba(0,0,0,.16);
  color: var(--muted);
  padding:6px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  cursor:pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}
.tabBtn:hover{ filter: brightness(1.10); }
.tabBtn.active{
  color: var(--text);
  border-color: rgba(77,227,255,.30);
  box-shadow: 0 0 0 1px rgba(77,227,255,.08) inset;
}

.tabPanel{ display:none; }
.tabPanel.active{ display:block; }

/* legacy KPI internals (kept) */
.kpiValue{
  font-size:30px;
  font-weight:1000;
  letter-spacing:.3px;
  margin: 2px 0 6px;
}
.kpiSub{
  color: var(--muted);
  font-size:12px;
  line-height:1.25;
  margin-bottom:10px;
}
.violetSub{
  margin-top:4px;
  font-size:11px;
  color: rgba(178,123,255,.85);
  font-weight:900;
  letter-spacing:.2px;
}
.bar{
  height: 10px;
  border-radius:999px;
  border:1px solid rgba(30,42,58,.85);
  background: rgba(0,0,0,.18);
  overflow:hidden;
  margin: 8px 0 10px;
}
.barFill{
  height:100%;
  width:0%;
  background: rgba(151,166,178,.25);
  box-shadow: 0 0 20px rgba(77,227,255,.30);
}
.callout{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(151,166,178,.14);
  background: rgba(0,0,0,.14);
  color: var(--muted);
  font-size:12px;
  line-height:1.35;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}

/* Compact numeric field for L and C controls */
.numCompact {
  width: 90px;          /* adjust 70–110px to taste */
  min-width: 70px;
  padding: 4px 6px;
  font-size: 12px;
}

/* --- Teleprompter quote line (under header subtitle) --- */
.quoteLine{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15px;
  color: rgba(230,237,243,.86);
  opacity: .95;
  max-width: min(92vw, 880px);
  text-wrap: balance;
}

.quoteLine em{
  font-style: normal;
  color: rgba(120,255,160,.92);
}

.quoteLine .src{
  color: rgba(151,166,178,.82);
  font-weight: 900;
  margin-left: 8px;
}

/* --- Broadcast Ticker Mode --- */

.quoteLine{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .35px;
  color: rgba(230,237,243,.72);
  opacity: .85;
  position: relative;
  overflow: hidden;
  white-space: nowrap;

  height: 22px;           /* <-- ADD THIS */
  line-height: 22px;      /* <-- AND THIS */
}

/* track */
.quoteLine .tickerTrack{
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
  transform: translateX(100%);  /* start off screen right */
  will-change: transform;
}

.quoteLine.scrolling .tickerTrack{
  animation: tickerMove linear forwards;
  animation-duration: var(--tickerDur, 18s);
}

@keyframes tickerMove{
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}