/* cve-db.css — the large molecular disclosure database.
   Page-specific; inherits the brand tokens from site.css. */

.mol-page-head { margin-bottom: 1.1rem; }
.mol-stats {
  display: flex; flex-wrap: wrap; gap: .45rem .4rem; margin: .9rem 0 0;
}
.mol-stats span {
  font: 500 .68rem/1 var(--mono); letter-spacing: .03em; color: var(--text-muted);
  border: 1px solid var(--border); background: var(--panel-dark);
  padding: .4rem .55rem; border-radius: 999px; white-space: nowrap;
}
.mol-stats b { color: var(--text); font-weight: 700; }

/* ---------- controls ---------- */
.mol-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 1rem 0 .6rem;
}
.mol-search-wrap { position: relative; flex: 1 1 230px; min-width: 190px; }
#mol-search {
  width: 100%; box-sizing: border-box;
  background: var(--panel-dark); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: .55rem .9rem .55rem 2rem;
  font: 500 .8rem/1.2 var(--font);
}
#mol-search::placeholder { color: #5f6b7e; }
#mol-search:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.mol-search-wrap::before {
  content: "⌕"; position: absolute; left: .75rem; top: 50%; transform: translateY(-52%);
  color: #6b7789; font-size: .95rem; pointer-events: none;
}
.mol-search-status {
  font: 500 .64rem/1 var(--mono); color: var(--accent);
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}

.mol-btn-group { display: flex; gap: .3rem; align-items: center; }
.mol-btn {
  cursor: pointer; background: var(--panel-dark); color: #cfdcef;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font: 600 .66rem/1 var(--mono); letter-spacing: .04em;
  padding: .5rem .7rem; min-width: 2.1rem;
}
.mol-btn:hover, .mol-btn:focus-visible { border-color: var(--ring); color: #fff; }
.mol-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(88,166,255,.26), rgba(59,130,246,.16));
  border-color: rgba(88,166,255,.6); color: #fff;
}
.mol-group-label {
  font: 600 .58rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: #6c7a90; margin-right: .1rem;
}
#mol-zoom-label {
  font: 600 .64rem/1 var(--mono); color: var(--text-muted);
  min-width: 3.1rem; text-align: center;
}

/* ---------- legend ---------- */
.mol-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .7rem; }
.mol-chip {
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--panel-dark); border: 1px solid var(--border);
  border-radius: 999px; padding: .34rem .58rem;
  font: 500 .66rem/1 var(--mono); color: #c2cde0;
}
.mol-chip i { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }
.mol-chip b { color: #76839a; font-weight: 600; font-size: .62rem; }
.mol-chip:hover { border-color: var(--border-strong); color: #fff; }
.mol-chip.off { opacity: .4; }
.mol-chip.off i { background: #44506a !important; }
.mol-legend.sev-mode .mol-chip i { opacity: .35; }

@media (max-width: 560px) {
  .mol-legend { gap: .28rem; }
  .mol-chip { padding: .28rem .45rem; font-size: .6rem; gap: .3rem; }
  .mol-chip i { width: .45rem; height: .45rem; }
  .mol-chip b { font-size: .56rem; }
  .mol-stats span { font-size: .62rem; padding: .34rem .46rem; }
}

/* ---------- stage + detail ---------- */
.mol-layout { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .mol-layout { grid-template-columns: minmax(0, 1fr) 330px; align-items: stretch; }
}

.mol-stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(88,166,255,.07), transparent 62%),
    var(--panel-dark);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  height: clamp(340px, 58vh, 480px);
}
@media (min-width: 900px) {
  .mol-stage { height: clamp(520px, 76vh, 820px); }
}
#mol-canvas {
  display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: none; /* required: canvas owns pinch + pan */
}
#mol-canvas:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.mol-hint {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: .5rem .8rem; text-align: center;
  font: 500 .63rem/1.3 var(--mono); letter-spacing: .03em; color: #5f6b7e;
  background: linear-gradient(0deg, rgba(3,7,18,.82), transparent);
}
@media (max-width: 560px) { .mol-hint { font-size: .57rem; } }

.mol-stage-tools {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  display: flex; flex-direction: column; gap: .3rem;
}
.mol-stage-tools .mol-btn {
  width: 2.1rem; height: 2.1rem; padding: 0;
  display: grid; place-items: center; font-size: .9rem;
  background: rgba(10,15,28,.86); backdrop-filter: blur(4px);
}

/* ---------- detail panel ---------- */
.mol-detail {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem;
  overflow-y: auto; min-height: 150px;
}
@media (min-width: 900px) {
  .mol-detail { max-height: clamp(520px, 76vh, 820px); }
}
.mol-detail-empty { color: var(--text-muted); font-size: .82rem; line-height: 1.6; margin: 0; }
.mol-d-head { border-bottom: 1px solid var(--border); padding-bottom: .6rem; margin-bottom: .7rem; }
.mol-d-kind {
  display: block; font: 700 .58rem/1 var(--mono);
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
  margin-bottom: .35rem;
}
.mol-d-head h3 { margin: 0; font: 700 1.02rem/1.2 var(--mono); color: var(--text); word-break: break-all; }
.mol-d-target { margin: .35rem 0 0; font-size: .8rem; color: #b9c5d8; line-height: 1.4; }
.mol-d-target b { color: var(--text); }

.mol-d-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.mol-chip-stat {
  font: 600 .61rem/1 var(--mono); padding: .3rem .48rem; border-radius: 999px;
  border: 1px solid var(--border-strong); color: #c3cee1; background: var(--panel-dark);
}
.mol-chip-stat.sev-critical { color: #ff9a9a; border-color: rgba(255,78,78,.45); background: rgba(255,78,78,.1); }
.mol-chip-stat.sev-high     { color: #ffc089; border-color: rgba(255,159,63,.45); background: rgba(255,159,63,.1); }
.mol-chip-stat.sev-med      { color: #f6e08a; border-color: rgba(247,210,62,.45); background: rgba(247,210,62,.1); }
.mol-chip-stat.sev-low      { color: #8df0c6; border-color: rgba(46,227,157,.45); background: rgba(46,227,157,.1); }
.mol-chip-stat.sev-none     { color: #8c97aa; }
.mol-chip-stat.reach        { color: #dceaff; border-color: rgba(142,197,255,.55); background: rgba(88,166,255,.14); }
.mol-chip-stat.muted        { color: #6f7c91; }

.mol-d-vector {
  margin: 0 0 .6rem; font: 500 .62rem/1.5 var(--mono); color: #7f8ca2;
  word-break: break-all;
}
.mol-d-desc { margin: 0 0 .8rem; font-size: .81rem; line-height: 1.62; color: #c0cbdd; }
.mol-d-reserved { color: #8c97aa; font-style: italic; }
.mol-d-list { margin: .4rem 0 0; padding-left: 1rem; }
.mol-d-list li { font: 500 .7rem/1.65 var(--mono); color: #9fadc4; }
.mol-d-list li b { color: #cfdcef; font-weight: 600; }

.mol-d-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.mol-d-btn {
  cursor: pointer; font: 600 .68rem/1 var(--mono); letter-spacing: .03em;
  padding: .55rem .8rem; border-radius: 999px; color: #e7f0fd;
  border: 1px solid rgba(88,166,255,.5);
  background: linear-gradient(180deg, rgba(88,166,255,.26), rgba(59,130,246,.14));
}
.mol-d-btn:hover, .mol-d-btn:focus-visible { border-color: var(--ring); background: linear-gradient(180deg, rgba(88,166,255,.36), rgba(59,130,246,.2)); }
.mol-d-btn.alt { border-color: var(--border-strong); background: var(--panel-dark); color: #c3cee1; }

/* ---------- method note ---------- */
.mol-note {
  margin-top: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel-dark); padding: .9rem 1rem;
  font-size: .78rem; line-height: 1.65; color: var(--text-muted);
}
.mol-note b { color: #c3cee1; }
.mol-note ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.mol-note li { margin-bottom: .2rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}