/* ============================================================
   RevealLab — shared components (every panel uses these)
   panels, cards, pills, buttons, tables, dots, grades
   ============================================================ */

/* ---- panel shell ---- */
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;overflow:hidden;height:100%;
}
.panel__head{
  display:flex;align-items:center;gap:9px;
  padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.panel__title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.panel__title .accent{color:var(--text)}
.panel__tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.panel__body{flex:1;min-height:0;overflow:auto}
.panel__foot{padding:8px 12px;border-top:1px solid var(--border);font-size:11px;color:var(--text-3);flex-shrink:0}

/* ---- pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);line-height:1.3;white-space:nowrap}
.pill--info{background:var(--info-tint);color:var(--brand-dark)}
.pill--up{background:var(--up-tint);color:var(--up)}
.pill--down{background:var(--down-tint);color:var(--down)}
.pill--amber{background:var(--amber-tint);color:var(--amber)}
.pill--purple{background:var(--purple-tint);color:var(--purple)}
.pill--teal{background:var(--teal-tint);color:var(--teal)}
.pill--ghost{background:var(--surface-2);color:var(--text-2)}
.pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);padding:8px 14px;border-radius:var(--r);
  transition:all .14s ease;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:#b9c3d3}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn--sm{padding:5px 10px;font-size:11.5px;border-radius:var(--r-sm)}
.btn--ghost{border-color:transparent;background:transparent;color:var(--text-2)}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn svg{width:15px;height:15px}
.btn:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px}
.card--hover{transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.card--hover:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong)}

/* ---- data table ---- */
.dtable{width:100%;border-collapse:collapse;font-size:12px}
.dtable th{position:sticky;top:0;background:var(--surface);z-index:2;
  text-align:left;font-weight:600;color:var(--text-3);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--border)}
.dtable td{padding:8px 12px;border-bottom:1px solid var(--surface-2)}
.dtable tbody tr{transition:background .1s ease}
.dtable tbody tr:hover{background:var(--surface-2)}
.dtable tr.is-sel{background:var(--brand-tint)}
.dtable td.num,.dtable th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- status dot ---- */
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot--up{background:var(--up)} .dot--down{background:var(--down)}
.dot--amber{background:var(--amber)} .dot--info{background:var(--brand)} .dot--idle{background:var(--text-3)}

/* ---- grade chip (A+ / score) ---- */
.grade{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:20px;padding:0 6px;border-radius:var(--r-sm);
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.grade--a{background:var(--up-tint);color:var(--up)}
.grade--b{background:var(--info-tint);color:var(--brand-dark)}
.grade--c{background:var(--amber-tint);color:var(--amber)}
.grade--d{background:var(--down-tint);color:var(--down)}

/* ---- icon chip (strategy/section icons) ---- */
.ichip{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;flex-shrink:0}
.ichip svg{width:18px;height:18px}

/* ---- inputs ---- */
.field{width:100%;font-size:12.5px;font-family:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);
  padding:9px 11px;transition:border-color .14s,box-shadow .14s}
.field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
textarea.field{resize:vertical;font-family:var(--mono);font-size:12px;line-height:1.5}
.search{display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r);padding:7px 11px}
.search input{flex:1;border:0;background:transparent;font-size:12.5px;font-family:inherit;color:var(--text)}
.search input:focus{outline:none}
.search svg{width:15px;height:15px;color:var(--text-3)}

/* ---- modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(20,28,48,.42);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:80;
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:min(640px,92vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(10px) scale(.99);transition:transform .18s ease}
.modal-overlay.open .modal{transform:none}
.modal__head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal__title{font-size:15px;font-weight:700}
.modal__body{padding:18px;overflow:auto}
.modal__foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px}

/* ---- misc ---- */
.divider{width:1px;align-self:stretch;background:var(--border);margin:10px 0}
.fade-in{animation:fadeIn .32s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stagger>*{animation:fadeIn .32s ease both}
.stagger>*:nth-child(2){animation-delay:.03s}
.stagger>*:nth-child(3){animation-delay:.06s}
.stagger>*:nth-child(4){animation-delay:.09s}
.stagger>*:nth-child(5){animation-delay:.12s}
.stagger>*:nth-child(6){animation-delay:.15s}
.spark{display:block}

/* accessibility: honor reduced-motion across every panel's entrance motion */
@media (prefers-reduced-motion: reduce){
  .fade-in,.stagger>*{animation:none !important}
}