/* =============================================================================
   Cyberlux Lab — v3 console skin · "Security Rating Platform"
   Makes the Vendor Risk Playground feel like Qualys / Black Kite:
   letter-grade rating cards, a severity color scale, dense data-grid rows
   with severity rails, KPI tiles, and console panel chrome.
   Layers on top of v3-skin.css (enterprise blue). Loaded LAST on lab-v3.html.
============================================================================ */

:root{
  /* security severity scale — Black Kite / Qualys grade colors */
  --sev-ok:        #16a34a;   /* A/B  green  */
  --sev-watch:     #c2890f;   /* C    amber  */
  --sev-elevated:  #e0701b;   /* D    orange */
  --sev-critical:  #dc2626;   /* F    red    */
  --sev-ok-bg:        rgba(22,163,74,0.10);
  --sev-watch-bg:     rgba(194,137,15,0.12);
  --sev-elevated-bg:  rgba(224,112,27,0.12);
  --sev-critical-bg:  rgba(220,38,38,0.10);
  --console-line: rgba(20,29,54,0.08);
}

/* page background: white like the V3 site, with a barely-there console grid */
body{ background:
  linear-gradient(rgba(20,29,54,0.018) 1px, transparent 1px) 0 0 / 100% 60px,
  #ffffff; }

/* ── navy brand band: lab title + rating banner, mirrors the site hero ── */
.lab-hero{
  position: relative; isolation: isolate;
  background:
    radial-gradient(110% 80% at 86% 0%, rgba(31,83,224,0.40), transparent 55%),
    radial-gradient(70% 70% at 0% 100%, rgba(17,179,173,0.16), transparent 55%),
    var(--navy);
  color: #fff;
  padding-bottom: 26px !important;
}
.lab-hero .h-display{ color: #fff; }
.lab-hero .h-display .em{ color: #5fe0d8; }
.lab-hero .lead{ color: rgba(255,255,255,0.82); }
.lab-summary-section{
  background: var(--navy);
  padding-top: 0 !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid var(--console-line);
}

/* ── rating banner (Black Kite report-card header) ───────────────────── */
.summary-row{
  background: #fff;
  border: 1px solid var(--console-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,29,54,0.05), 0 10px 30px rgba(20,29,54,0.06);
  padding: 22px clamp(20px, 3vw, 34px);
  position: relative; overflow: hidden;
}
.summary-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background: var(--sev-ok);
}
.summary-row:has(.score-circle.tier-watch)::before{    background: var(--sev-watch); }
.summary-row:has(.score-circle.tier-elevated)::before{ background: var(--sev-elevated); }
.summary-row:has(.score-circle.tier-critical)::before{ background: var(--sev-critical); }

.summary-lbl{ color: var(--ink-dim); font-family: var(--ff-mono); }
.summary-sub{ color: var(--ink-faint); }
.summary-meta .summary-lbl::after{ content:" · live"; color: var(--sev-ok); }
.summary-val{ font-family: var(--ff-display); font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }

/* ── rating gauge ────────────────────────────────────────────────────── */
.score-circle{ color: var(--sev-ok); }
.score-circle.tier-ok{ color: var(--sev-ok); }
.score-circle.tier-watch{ color: var(--sev-watch); }
.score-circle.tier-elevated{ color: var(--sev-elevated); }
.score-circle.tier-critical{ color: var(--sev-critical); }
.summary-row .score-circle.tier-ok{ color: var(--sev-ok); }
.summary-row .score-circle.tier-watch{ color: var(--sev-watch); }
.summary-row .score-circle.tier-elevated{ color: var(--sev-elevated); }
.summary-row .score-circle.tier-critical{ color: var(--sev-critical); }
.score-inner .grade{ font-family: var(--ff-display); font-weight: 800; }
.score-inner .num{ font-family: var(--ff-mono); color: var(--ink-dim); }
.score-inner .num::before{ content:"SCORE "; color: var(--ink-faint); letter-spacing: .18em; }

/* ── console panels ──────────────────────────────────────────────────── */
.lab-grid .panel,
.vendor-table{
  background: #fff !important;
  border: 1px solid var(--console-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(20,29,54,0.05), 0 10px 28px rgba(20,29,54,0.05) !important;
  overflow: hidden;
}
.panel-h, .table-head{
  background: #fbfcfe;
  border-bottom: 1px solid var(--console-line);
  padding: 14px 18px;
}
.panel-h h3, .table-head h3{
  font: 700 12px/1 var(--ff-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
  display: flex; align-items: center; gap: 10px;
}
.panel-h h3::before, .table-head h3::before{
  content:""; width: 8px; height: 8px; border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.table-head h3 .ct, .panel-h h3 .ct{ color: var(--ink-faint); font-weight: 500; }

/* weighting strip → console "scoring model" controls */
.weights-strip .strip-title{ color: var(--ink-mute); font-family: var(--ff-mono); }
.weights-strip .strip-title::before{ content:"⚙ "; color: var(--accent); }
.cell-lbl{ color: var(--ink-mute); }
.cell-pct{ color: var(--accent); font-family: var(--ff-mono); }
.ghost-btn{ border-radius: 8px; font-family: var(--ff-display); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* range sliders in enterprise blue */
input[type="range"]::-webkit-slider-thumb{ background: var(--accent); border-color: #fff; box-shadow: 0 1px 3px rgba(31,83,224,0.4); }
input[type="range"]::-moz-range-thumb{ background: var(--accent); border-color: #fff; }

/* ── vendor data grid (Qualys/BitSight asset table) ──────────────────── */
.vlist{ padding: 0; gap: 0; }
.vrow{
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--console-line);
  padding: 13px 18px 13px 16px;
  box-shadow: inset 4px 0 0 var(--sev-ok);
}
.vrow:nth-child(even){ background: #fbfcfe; }
.vrow:hover{ background: rgba(31,83,224,0.05) !important; }
.vrow.sel{ background: rgba(31,83,224,0.08) !important; box-shadow: inset 4px 0 0 var(--accent); }
/* severity rail by the row's grade */
.vrow:has(.risk-badge.tier-watch){    box-shadow: inset 4px 0 0 var(--sev-watch); }
.vrow:has(.risk-badge.tier-elevated){ box-shadow: inset 4px 0 0 var(--sev-elevated); }
.vrow:has(.risk-badge.tier-critical){ box-shadow: inset 4px 0 0 var(--sev-critical); }
.vname{ font-family: var(--ff-display); font-weight: 700; }
.vcat{ font-family: var(--ff-mono); }

/* compliance chips */
.cert{
  border-radius: 5px; background: #f1f4fa; border: 1px solid var(--console-line);
  color: var(--ink-mute); font: 600 10px/1 var(--ff-mono); letter-spacing: .06em;
}
.cert.more{ color: var(--accent); border-color: rgba(31,83,224,0.3); background: rgba(31,83,224,0.06); }
.user-tag{ color: var(--accent); border-color: rgba(31,83,224,0.3); border-radius: 5px; }

/* ── letter-grade rating chip (the Black Kite signature) ─────────────── */
.risk-badge{
  border-radius: 8px; min-width: 92px; gap: 9px;
  padding: 7px 8px 7px 7px;
  border: 1px solid var(--console-line);
  background: #fff;
}
.risk-badge .dot{ display: none; }
.risk-badge .grade{
  font: 800 16px/1 var(--ff-display);
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; color: #fff;
}
.risk-badge .num{ font: 700 13px/1 var(--ff-mono); color: var(--ink-mute); }
.risk-badge.tier-ok       { border-color: rgba(22,163,74,0.35);  background: var(--sev-ok-bg); }
.risk-badge.tier-watch    { border-color: rgba(194,137,15,0.4);  background: var(--sev-watch-bg); }
.risk-badge.tier-elevated { border-color: rgba(224,112,27,0.4);  background: var(--sev-elevated-bg); }
.risk-badge.tier-critical { border-color: rgba(220,38,38,0.4);   background: var(--sev-critical-bg); }
.risk-badge.tier-ok       .grade{ background: var(--sev-ok); }
.risk-badge.tier-watch    .grade{ background: var(--sev-watch); }
.risk-badge.tier-elevated .grade{ background: var(--sev-elevated); }
.risk-badge.tier-critical .grade{ background: var(--sev-critical); }

/* ── detail / factor breakdown ───────────────────────────────────────── */
.detail-head .cat, .section-sub{ color: var(--accent); font-family: var(--ff-mono); }
.vname-lg{ font-family: var(--ff-display); font-weight: 700; }
.meta-v{ font-family: var(--ff-mono); color: var(--ink); }
.factor-val{ color: var(--ink); font-family: var(--ff-mono); }
.bar{ background: #e7ecf5; height: 7px; border-radius: 99px; }
.bar.tone-ok       .bar-fill{ background: var(--sev-ok); }
.bar.tone-watch    .bar-fill{ background: var(--sev-watch); }
.bar.tone-elevated .bar-fill{ background: var(--sev-elevated); }
.bar.tone-critical .bar-fill{ background: var(--sev-critical); }
.rec-list li{ background: #fbfcfe !important; border-radius: 8px; }
.rec-list li::before{ background: var(--accent); }

/* ── KPI tiles (pulse stats, if shown) ───────────────────────────────── */
.pulse-stat{ padding: 14px 16px; border: 1px solid var(--console-line); border-radius: 10px; background: #fff; }
.pulse-stat .lbl{ font-family: var(--ff-mono); color: var(--ink-dim); }
.pulse-stat .val{ font-family: var(--ff-display); font-weight: 800; }
.pulse-stat.tone-ok .val{ color: var(--sev-ok); }
.pulse-stat.tone-elevated .val{ color: var(--sev-elevated); }
.pulse-stat.tone-critical .val{ color: var(--sev-critical); }

/* ── AI gap analyzer (live demo) ─────────────────────────────────────── */
.ai-demo-section{ padding: 8px 0 56px; }
.ai-demo{
  background:
    radial-gradient(80% 70% at 92% 0%, rgba(31,83,224,0.38), transparent 55%),
    radial-gradient(70% 70% at 0% 100%, rgba(17,179,173,0.18), transparent 55%),
    linear-gradient(160deg, var(--navy), #0c1c44 60%, #0a1838);
  color: #fff; border-radius: 20px; padding: clamp(26px, 3.4vw, 48px);
}
.ai-demo-head{ max-width: 760px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.ai-demo .eyebrow{ color: #5fe0d8; }
.ai-demo .eyebrow .num, .ai-demo .eyebrow .rule{ color: #5fe0d8; }
.ai-demo .eyebrow .rule{ background: linear-gradient(to right, #5fe0d8, transparent); }
.ai-demo-title{ font: 800 clamp(24px,2.8vw,34px)/1.1 var(--ff-display); letter-spacing: -0.02em; color: #fff; margin: 0; }
.ai-demo-title .em{ color: #5fe0d8; }
.ai-demo-sub{ font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.74); margin: 0; max-width: 70ch; }

.ai-demo-grid{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items: stretch; }
@media (max-width: 880px){ .ai-demo-grid{ grid-template-columns: 1fr; } }
.ai-demo-input{ display: flex; flex-direction: column; gap: 12px; }
.ai-demo-input label{ font: 600 11px/1 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.ai-demo-input textarea{
  width: 100%; resize: vertical; min-height: 200px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px; padding: 14px 16px; color: #fff;
  font: 400 14px/1.55 var(--ff-display);
}
.ai-demo-input textarea::placeholder{ color: rgba(255,255,255,0.4); }
.ai-demo-input textarea:focus{ outline: none; border-color: #5fe0d8; box-shadow: 0 0 0 3px rgba(95,224,216,0.18); }
.ai-demo-actions{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ai-demo-sample{ background: none; border: 1px solid rgba(255,255,255,0.28); color: #fff; padding: 12px 16px; border-radius: 10px; font: 600 13px/1 var(--ff-display); cursor: pointer; transition: border-color .2s, background .2s; }
.ai-demo-sample:hover{ border-color: #5fe0d8; color: #5fe0d8; }

.ai-demo-output{
  background: #fff; color: var(--ink); border-radius: 14px; padding: 22px;
  border: 1px solid rgba(255,255,255,0.16); min-height: 200px;
}
.ai-demo-empty{ color: var(--ink-faint); font-size: 14px; display: grid; place-items: center; height: 100%; min-height: 170px; text-align: center; padding: 0 20px; }

.ad-result{ display: flex; flex-direction: column; gap: 16px; }
.ad-score{ display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--console-line); }
.ad-grade{ width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font: 800 28px/1 var(--ff-display); color: #fff; }
.ad-score.tier-ok .ad-grade{ background: var(--sev-ok); }
.ad-score.tier-watch .ad-grade{ background: var(--sev-watch); }
.ad-score.tier-elevated .ad-grade{ background: var(--sev-elevated); }
.ad-score.tier-critical .ad-grade{ background: var(--sev-critical); }
.ad-score-meta{ display: flex; flex-direction: column; gap: 3px; }
.ad-engine{ margin-left: auto; align-self: center; font: 700 9.5px/1 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.ad-engine.live{ color: var(--accent); background: rgba(31,83,224,0.1); border: 1px solid rgba(31,83,224,0.3); }
.ad-engine.local{ color: var(--ink-dim); background: var(--bg-soft); border: 1px solid var(--console-line); }
.ad-pct{ font: 800 18px/1 var(--ff-display); color: var(--ink); }
.ad-sev{ font: 600 12px/1 var(--ff-mono); color: var(--ink-dim); }
.ad-summary{ font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); margin: 0; }
.ad-summary strong{ color: var(--ink); font-weight: 700; }
.ad-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px){ .ad-cols{ grid-template-columns: 1fr; } }
.ad-h{ font: 700 10.5px/1 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
.ad-h.ok{ color: var(--sev-ok); }
.ad-h.gap{ color: var(--sev-critical); }
.ad-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ad-list li{ display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: 13.5px; color: var(--ink); }
.ad-list li.muted{ grid-template-columns: 1fr; color: var(--ink-faint); }
.ad-list .ad-ico{ width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font: 700 11px/1 var(--ff-mono); margin-top: 1px; }
.ad-list li.ok .ad-ico{ background: var(--sev-ok-bg); color: var(--sev-ok); }
.ad-list li.gap .ad-ico{ background: var(--sev-critical-bg); color: var(--sev-critical); }
.ad-list .ad-l{ display: flex; flex-direction: column; gap: 2px; }
.ad-list .ad-l small{ color: var(--ink-faint); font-size: 11.5px; }
.ad-note{ font-size: 11.5px; color: var(--ink-faint); margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--console-line); }

/* add-vendor + capture forms */
.add-form input, .add-form select, .capture-form input{ background: #fff !important; border-radius: 8px; border-color: var(--hairline-mid); }
.add-form input:focus, .add-form select:focus, .capture-form input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,83,224,0.12); }
.chip-toggle.on{ color: var(--accent); border-color: var(--accent); background: rgba(31,83,224,0.08); }