:root {
    --bg: #1c2331;
    --fg: #e8eaed;
    --panel: #253244;
    --accent: #f0c674;
    --r2: #1F6FEB;
    --link: #f0c674;
}
* { box-sizing: border-box; }
body {
    margin: 0; padding: 1rem 1.5rem;
    background: var(--bg); color: var(--fg);
    font-family: Ubuntu, system-ui, sans-serif;
}
header h1 { margin: 0 0 .2rem; font-weight: 500; }
.warn { margin: 0 0 1rem; color: #ff9a9a; font-size: .85rem; }

/* Default link blue is near-illegible on the dark background. Reuse the accent
   rather than introducing a second blue that could be read as the R2 colour. */
a { color: var(--link); }
a:hover { color: #ffdc9a; }

.tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.tab {
    background: var(--panel); color: var(--fg); border: none;
    padding: .5rem 1rem; border-radius: 4px 4px 0 0; cursor: pointer;
}
.tab.active { background: var(--accent); color: #1c2331; }
.panel { display: none; }
.panel.active { display: block; }

.layout { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.heatmap-wrap { flex: 1 1 640px; min-width: 0; }

#heatmap { display: grid; gap: 0; font-size: 10px; overflow-x: auto; }
/* Thin black cell borders, matching rect_gp = gpar(col = "black", lwd = 0.4) in
   the qmd. Right/bottom only, with the first row and column making up the outer
   edge — a border on all four sides would double to 2px between neighbours. */
.cell { width: 100%; aspect-ratio: 1; position: relative; cursor: pointer;
        border-right: 1px solid #000; border-bottom: 1px solid #000; }
.cell[data-row="0"] { border-top: 1px solid #000; }
.cell[data-col="0"] { border-left: 1px solid #000; }
.cell:hover { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }
.cell.sel  { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 3; }
.cell.cross { filter: brightness(1.25); }

.cell .dot {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 40%; height: 40%; border-radius: 50%;
}
.dot-r1   { background: #000; }
.dot-r2   { background: var(--r2); }
.dot-dual { background: #000; box-shadow: 0 0 0 1.5px var(--r2); }

.lbl { font-size: 9px; white-space: nowrap; padding: 0 3px; }
.lbl-row { text-align: right; line-height: 1; align-self: center; }
.lbl-col { writing-mode: vertical-rl; transform: rotate(180deg); align-self: end; }
.lbl.hi { color: var(--accent); font-weight: 700; }

.legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; font-size: .8rem; }
.legend .sw { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; position: static; transform: none; }
.legend .sep { width: 100%; height: 0; }

#detail { flex: 0 1 320px; background: var(--panel); padding: 1rem; border-radius: 6px; }
#detail h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
#detail .verdict { font-size: .95rem; margin-bottom: .8rem; line-height: 1.45; }
#detail ul { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
#detail li { padding: .2rem 0; display: flex; justify-content: space-between; }
#detail li.fired { color: #9be89b; }
#detail li.quiet { color: #7b8794; }
.placeholder { color: #7b8794; font-size: .9rem; }

/* ---- Compare tab ---- */
.compare-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
.picker-pane { background: var(--panel); padding: 1rem; border-radius: 6px; }
.picker-pane label { display: block; font-size: .85rem; margin-bottom: .25rem; }
.combo { position: relative; margin-bottom: 1rem; }
.combo-field { display: flex; }
.combo-field input {
    flex: 1; min-width: 0; padding: .4rem .5rem;
    background: var(--bg); color: var(--fg);
    border: 1px solid #3d4c63; border-radius: 3px 0 0 3px; font: inherit; font-size: .9rem;
}
.combo-field input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.combo-clear {
    background: var(--bg); color: #7b8794; cursor: pointer; font-size: 1rem; line-height: 1;
    border: 1px solid #3d4c63; border-left: none; border-radius: 0 3px 3px 0; padding: 0 .5rem;
}
.combo-clear:hover { color: var(--fg); }
.combo-list {
    position: absolute; z-index: 10; left: 0; right: 0; top: 100%;
    max-height: 220px; overflow-y: auto; margin: 2px 0 0; padding: 0; list-style: none;
    background: var(--bg); border: 1px solid #3d4c63; border-radius: 3px; font-size: .85rem;
}
.combo-list li { padding: .3rem .5rem; cursor: pointer; }
.combo-list li:hover, .combo-list li.active { background: var(--accent); color: #1c2331; }

.info-btn {
    width: 100%; padding: .45rem; cursor: pointer; font: inherit; font-size: .9rem;
    background: var(--bg); color: var(--fg); border: 1px solid #3d4c63; border-radius: 3px;
}
.info-btn:hover { border-color: var(--accent); }

.info-dlg {
    max-width: 46rem; background: var(--panel); color: var(--fg);
    border: 1px solid #3d4c63; border-radius: 6px; padding: 1.5rem; line-height: 1.5;
}
.info-dlg::backdrop { background: rgba(0, 0, 0, .6); }
.info-dlg h2 { margin-top: 0; }
.dlg-title { display: flex; align-items: center; gap: .6rem; }
.dlg-title img { width: 48px; height: 48px; flex: none; }
.info-dlg h3 { margin-bottom: .2rem; font-size: 1rem; }
.dlg-actions { display: flex; gap: .6rem; justify-content: center; align-items: center; margin-top: 1.2rem; }
.dlg-actions .btn-accept {
    padding: .45rem 1.4rem; cursor: pointer; font: inherit;
    background: var(--accent); color: #1c2331; border: none; border-radius: 3px;
}
.dlg-actions .btn-decline {
    padding: .45rem 1.4rem; font-size: .9rem; text-decoration: none;
    background: var(--bg); color: var(--fg);
    border: 1px solid #3d4c63; border-radius: 3px;
}
.dlg-actions .btn-decline:hover { border-color: var(--accent); }

.compare-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.mol-facts { list-style: none; padding: 0; margin: .6rem 0 0; text-align: left; font-size: .82rem; line-height: 1.45; }
.mol-facts li { position: relative; padding-left: .9rem; margin-bottom: .35rem; }
.mol-facts li::before { content: "•"; position: absolute; left: 0; color: #7b8794; }
.mol-facts .sub { display: block; color: #a8b3c2; font-size: .95em; }
/* No background/colour here: these would out-specify the .mk-* classes below
   (0,1,1 beats 0,1,0) and blank every highlight. */
.mol-facts mark { border-radius: 2px; padding: 0 .2em; }
.mk-core { background: #454eb4; color: #fff; }
.mk-r1   { background: #940e15; color: #fff; }
.mk-r2   { background: #1F6FEB; color: #fff; }

@media (max-width: 760px) {
    .compare-layout { grid-template-columns: 1fr; }
}

/* ---- About ---- */
#about { max-width: 60ch; line-height: 1.55; }
#about h3 { margin: 1.6rem 0 .4rem; font-size: 1rem; color: var(--accent); font-weight: 500; }
#about .lede { font-size: 1.05rem; }
#about ul { padding-left: 1.1rem; }
#about li { margin-bottom: .4rem; }
#about .note { font-size: .85rem; color: #a8b3c2; }
.ink-r1 { color: #ff8a8a; }
.ink-r2 { color: #6fa8ff; }

.about-tbl { border-collapse: collapse; margin: .8rem 0; font-size: .88rem; }
.about-tbl caption { text-align: left; color: #a8b3c2; font-size: .8rem; padding-bottom: .35rem; }
.about-tbl td, .about-tbl th { padding: .25rem .7rem .25rem 0; text-align: left; vertical-align: middle; }
.about-tbl th { color: #a8b3c2; font-weight: 500; border-bottom: 1px solid #3d4c63; }
.algo-tbl { display: block; overflow-x: auto; max-width: 100%; }
.about-tbl .dot { position: static; transform: none; display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.about-tbl .sw { display: inline-block; width: 13px; height: 13px; }

.molecules { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.mol { flex: 1 1 300px; background: var(--panel); border-radius: 6px; padding: .5rem; text-align: center; }
.mol h3 { margin: .3rem 0 0; font-size: .9rem; font-weight: 400; }
.mol-svg svg { max-width: 100%; height: auto; }
.hl { pointer-events: none; }