/* Version-2 tool styling. Layered on top of kfm.css, which stays untouched so
   the v1 pages cannot be affected by anything here. */

/* ---- unlisted-preview marker ------------------------------------------- */
.v2banner { background:#fff8e5; border:1px solid #e6d8a8; border-radius:10px;
            padding:14px 18px; margin:18px 0 6px; color:#7a5200 }
.v2banner b { color:#9a6700 }

/* ---- the two models, kept apart by colour ------------------------------ */
.eyebrow { font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase;
           font-weight:650; margin-bottom:6px }
.eyebrow.pot { color:#0a7d33 }
.eyebrow.sel { color:#1d3fa8 }
.order { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.88rem;
         background:var(--bg-soft); border:1px solid var(--line); border-radius:8px;
         padding:8px 12px; display:inline-block; margin:4px 0 12px }
.order .a { color:#0a7d33; font-weight:650 }
.order .b { color:#1d3fa8; font-weight:650 }
.order .m { color:var(--ink-soft) }

/* ---- confidence bands --------------------------------------------------
   The colour is a summary of the report's own measured accuracy for that band,
   never a decoration and never an opinion. Both models define prediction
   strength the same way since the 10 Aug 2026 report revision -- the larger of
   the two output probabilities, 0.5-1.0 -- but the accuracy a given strength
   buys differs per model, so each tool carries its own band table. */
.band { display:inline-block; border-radius:999px; padding:2px 10px;
        font-size:0.8rem; font-weight:600; white-space:nowrap }
.band-hi   { background:#e7f5ec; color:#0a7d33 }   /* strongest band */
.band-good { background:#eaf3ff; color:#1d3fa8 }
.band-mid  { background:#fff8e5; color:#9a6700 }
.band-low  { background:#fdf0ef; color:#b3261e }   /* near a coin flip */
.bandkey { font-size:0.84rem; line-height:2; margin-top:10px }
.bandkey .band { margin-right:8px; min-width:96px; text-align:center }

/* ---- results ----------------------------------------------------------- */
td.smiles { max-width:340px }
td.smiles code { display:inline-block; word-break:break-all; white-space:normal; line-height:1.45 }
td.smiles details { margin-top:6px }
td.smiles summary { cursor:pointer; color:var(--ink-soft); font-size:0.85em; user-select:none }
td.smiles summary:hover { color:var(--accent) }
td.smiles .depict { margin-top:6px; background:#fff; border:1px solid var(--line);
                    border-radius:6px; padding:4px; min-height:60px }
td.smiles .depict img { display:block; width:100%; max-width:320px; height:auto }
td.smiles .depict .failed { color:var(--red); font-size:0.85em; padding:6px }

/* Strength shown as a bar as well as a number: a column of three-decimal
   figures does not communicate "most of these are near a coin flip" at a
   glance, which is the single most important thing about these two models. */
.strength { display:flex; align-items:center; gap:8px; justify-content:flex-end }
.strength .bar { width:64px; height:6px; border-radius:3px; background:var(--line); overflow:hidden }
.strength .bar i { display:block; height:100%; background:var(--ink-soft) }
.strength .bar.hi i { background:#0a7d33 }
.strength .bar.good i { background:#1d3fa8 }
.strength .bar.mid i { background:#d4a72c }
.strength .bar.low i { background:#b3261e }

/* Pairwise grid. Every cell is one model call, so this is the raw output and
   the ranking above it is a summary of exactly these numbers. */
.matrix { font-size:0.84rem; border-collapse:collapse; margin-top:10px }
.matrix th, .matrix td { border:1px solid var(--line); padding:5px 8px; text-align:center }
.matrix th { background:var(--bg-soft); font-weight:600 }
.matrix td.self { background:var(--bg-soft); color:var(--ink-soft) }
.matrix .wrapx { overflow-x:auto }

/* Selectivity tool: the two targets sit side by side and the editor goes full
   width underneath. Ketcher's toolbar does not survive a narrow column -- it
   truncates silently and hides the controls people reach for -- so the drawing
   surface gets the whole row and a taller frame. */
.side { border:1px solid var(--line); border-radius:10px; padding:14px }
.ketcher-box.tall iframe { height: 560px }
.side.a { border-top:4px solid #0a7d33 }
.side.b { border-top:4px solid #1d3fa8 }
.side h4 { margin:0 0 10px; font-size:0.98rem }
.side h4 .tag { font-size:0.74rem; font-weight:650; letter-spacing:0.05em;
                text-transform:uppercase; margin-right:8px }
.side.a h4 .tag { color:#0a7d33 }
.side.b h4 .tag { color:#1d3fa8 }
.side select { height:270px }

.pill { display:inline-block; border-radius:999px; font-size:0.72rem; font-weight:650;
        padding:2px 9px; vertical-align:2px; margin-left:8px }
.pill.preview { background:#fff8e5; color:#9a6700; border:1px solid #e6d8a8 }

/* Below-cutoff cells in the pairwise grid. Greyed, not removed: the comparison
   was made and the user should be able to see what it said. */
.matrix td.weak { color:#9aa0a8; background:#fafbfc; font-style:italic }

/* Architecture figure. Defined here rather than inline because all three v2
   pages now show it: the index for orientation, and both rank pages because the
   row layout IS the thing that distinguishes these models from v1 -- what
   occupies position one, the middle and position three is the whole question
   the model answers. */
figure.arch { margin:26px 0 10px }
/* Half width on the rank pages: the figure is orientation, not the point of
   the page, and at full width it pushed the actual controls below the fold. */
figure.arch img { width:50%; height:auto; border:1px solid var(--line); border-radius:10px }
@media (max-width:700px) { figure.arch img { width:100% } }

/* Compound names in the comparison grid WRAP; they are never truncated.
   Truncating them made the grid useless: a column of "ABL1_rank1_KKB_pI…"
   against "ABL1_rank2_KKB_pI…" cannot be told apart, which is the exact moment
   a user needs to tell them apart. The header column is given room and allowed
   to break anywhere, since these names are long unbroken identifiers with no
   spaces for the browser to break on. */
.matrix th { white-space:normal; overflow-wrap:anywhere; word-break:break-word;
             max-width:12rem; vertical-align:bottom; line-height:1.3 }
.matrix tr > th:first-child { text-align:left; max-width:20rem }

/* The selectivity diagram is wider in content than the potency one -- two
   protein structures and a ligand rather than two ligands and a sequence bar --
   so it gets the full column and centres under the text. */
figure.arch.wide img { width:100%; max-width:900px; display:block; margin:0 auto }

/* ---- Selectivity panel heat map ----------------------------------------
   Diverging scale around 0.50: a compound's scores across the row average to
   exactly 0.50 by construction, so 0.50 is a real "no preference" midpoint and
   the signal is distance from it either way. Every cell shows its number as
   well as its colour -- the mid-tones fall below 3:1 against the surface, so
   colour alone would not be readable. */
table.heat { border-collapse:separate; border-spacing:2px; font-size:0.86rem; margin-top:12px }
table.heat th { font-size:0.78rem; color:var(--ink-soft); font-weight:600;
                padding:4px 8px; text-align:center; white-space:nowrap }
table.heat th.rowh { text-align:left; color:var(--ink); min-width:190px; max-width:320px;
                     white-space:normal; overflow-wrap:anywhere; vertical-align:top }
table.heat th.rowh .smiles { font-size:0.72rem; color:var(--ink-soft); font-weight:400;
                             margin-top:3px; overflow-wrap:anywhere }
table.heat td.hcell { width:76px; height:42px; text-align:center; border-radius:4px;
                      font-variant-numeric:tabular-nums; font-weight:700; cursor:default }
.heatlegend { display:flex; align-items:center; gap:0; margin:10px 0 0 }
.heatlegend i { display:block; width:40px; height:13px }
.heatlegend .muted, .heatlegend span { font-size:0.75rem; padding:0 8px }
.heattip { position:fixed; pointer-events:none; background:#111; color:#fff;
           padding:8px 10px; border-radius:6px; font-size:0.78rem; max-width:260px;
           opacity:0; transition:opacity .12s; z-index:60; line-height:1.5 }
.chip { display:inline-block; background:var(--accent-soft); color:var(--accent);
        border-radius:999px; padding:2px 10px; font-size:0.8rem; margin:0 6px 6px 0 }

/* The remove button on a selected-kinase chip. Deselecting a row in a
   multi-select list means cmd-clicking precisely, which is easy to get wrong;
   an explicit × is unambiguous. Sized to a real touch target. */
.chip { display:inline-flex; align-items:center; gap:6px }
.chip .chipx {
  appearance:none; background:none; border:0; cursor:pointer; padding:0;
  font-size:1.05em; line-height:1; color:inherit; opacity:0.65;
  min-width:18px; min-height:18px; border-radius:999px;
}
.chip .chipx:hover, .chip .chipx:focus-visible { opacity:1; background:rgba(0,0,0,.08) }

/* Kinase picker: a scrollable checkbox list, replacing <select multiple>.
   A plain click in a multi-select REPLACES the selection instead of adding to
   it (cmd-click is required), which made picking three kinases look like the
   search filter was blocking them — and on a phone there is no cmd-click at
   all. Checkboxes toggle, which is what everyone expects. */
.picklist { margin-top:8px; max-height:280px; overflow-y:auto;
            border:1px solid var(--line); border-radius:8px; background:var(--bg) }
.pickrow { display:flex; align-items:center; gap:9px; padding:7px 11px;
           cursor:pointer; font-size:0.92rem; border-bottom:1px solid var(--line) }
.pickrow:last-child { border-bottom:0 }
.pickrow:hover { background:var(--bg-soft) }
.pickrow.on { background:var(--accent-soft); font-weight:600 }
.pickrow input { width:16px; height:16px; margin:0; flex:none; cursor:pointer }
.pickrow input:disabled { cursor:not-allowed }
.pickrow:has(input:disabled) { opacity:0.45; cursor:not-allowed }

/* The comparison grid on the potency page. The FULL row is shown on purpose:
   the lower triangle is redundant (cell[i][j] = 1 - cell[j][i]) but hiding it
   removed half of every row, and "Score = the row average" is the one thing
   this grid exists to demonstrate. The row average is spelled out in its own
   column so the two tables can be checked against each other. */
.matrix td.rowmean, .matrix th.rowmean {
  background:var(--bg-soft); font-weight:700; border-left:2px solid var(--ink-soft) }
.matrix td { font-variant-numeric:tabular-nums; font-weight:600 }
.matrix th.rowh { font-weight:600 }

/* While a structure is being drawn. The depiction is rendered server-side, so
   on a cold instance it can take seconds; an empty expanded panel reads as a
   broken row rather than as work in progress. */
.depict-wait { display:flex; align-items:center; gap:9px; padding:18px 4px;
               color:var(--ink-soft); font-size:0.86rem }

/* Key for the comparison grid's column numbers. The columns are the same
   compounds as the rows, but their names are far too long to sit in a header
   without truncating them -- and truncated compound names are useless, which is
   the whole reason the columns are numbered. The key restores the mapping. */
.colkey { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:10px;
          font-size:0.8rem; color:var(--ink-soft) }
.colkey b { color:var(--ink) }