/* kinase.php - kinase summary page */
#kinase-page {
	--k-surface: #fcfcfb;
	--k-ink: #0b0b0b;
	--k-ink-2: #52514e;
	--k-muted: #898781;
	--k-line: #e1e0d9;
	--k-axis: #c3c2b7;
	--k-blue: #2a78d6;
	--k-orange: #eb6834;
	--k-hot: #e34948;
	margin-bottom: 3rem;
}

#kinase-page .kin-head h3 { margin-bottom: 0; }
#kinase-page .kin-alias { color: var(--k-muted); font-weight: 400; }
#kinase-page .kin-sub { color: var(--k-ink-2); margin-bottom: .5rem; }
#kinase-page .kin-badges { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin-bottom: 1rem; }
#kinase-page .kin-badge { border: 1px solid var(--k-line); border-radius: 1rem; padding: .1rem .7rem; background: var(--k-surface); font-size: .85rem; }
#kinase-page .kin-badge b { color: var(--k-ink-2); font-weight: 600; margin-right: .2rem; }
#kinase-page .kin-muted { color: var(--k-muted); font-size: .8rem; font-weight: 400; }

/* tiles */
#kinase-page .kin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
#kinase-page .kin-tile { border: 1px solid var(--k-line); border-radius: 6px; padding: .7rem 1rem; background: var(--k-surface); }
#kinase-page .kin-num { font-size: 2rem; line-height: 1.1; font-weight: 700; color: var(--k-ink); }
#kinase-page .kin-lbl { color: var(--k-ink-2); font-size: .85rem; }
#kinase-page .kin-note { color: var(--k-muted); font-size: .75rem; }

/* segmented bars */
#kinase-page .kin-breakdown { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
#kinase-page .kin-bd-title { font-size: .8rem; font-weight: 600; color: var(--k-ink-2); margin-bottom: .15rem; }
#kinase-page .kin-help { display: inline-block; width: 1.1rem; height: 1.1rem; line-height: 1.1rem; text-align: center; border-radius: 50%; border: 1px solid var(--k-axis); font-size: .7rem; padding: 0; }
#kinase-page .seg { display: flex; gap: 2px; height: 2.7rem; }
#kinase-page .seg-part { flex-basis: 0; min-width: 3.4rem; border: 0; border-radius: 3px; color: #fff; padding: 0 .4rem; cursor: pointer; display: flex; flex-direction: column; justify-content: center; text-align: left; overflow: hidden; line-height: 1.15; font-size: .7rem; opacity: .92; }
#kinase-page .seg-part:hover, #kinase-page .seg-part.active { opacity: 1; box-shadow: 0 0 0 2px var(--k-ink) inset; }
#kinase-page .seg-count { font-weight: 700; font-size: .85rem; }
#kinase-page .seg-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kinase-page .seg-part.c0 { background: #898781; }
#kinase-page .seg-part.c1 { background: #2a78d6; }
#kinase-page .seg-part.c2 { background: #d9511f; }
#kinase-page .seg-part.c3 { background: #a87000; }
#kinase-page .seg-part.c4 { background: #12805a; }
#kinase-page .seg-part.c5 { background: #c2487a; }
#kinase-page .seg-part.c6 { background: #6250d6; }
#kinase-page .kin-details { font-size: .85rem; color: var(--k-ink-2); }
#kinase-page .kin-details summary { cursor: pointer; }

/* filters */
#kinase-page .kin-filterbar, #kinase-page .kin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding: .6rem .8rem; border: 1px solid var(--k-line); border-radius: 6px; background: var(--k-surface); }
#kinase-page .kin-controls { margin: 1rem 0; }
#kinase-page .kin-filterbar label, #kinase-page .kin-controls label { margin: 0; font-size: .85rem; color: var(--k-ink-2); display: flex; align-items: center; gap: .4rem; }
#kinase-page .kin-filterbar select, #kinase-page .kin-controls select { width: auto; min-width: 7rem; }
#kinase-page .kin-check input { margin: 0; }
#kinase-page .kin-summary { margin: .6rem 0 0; font-size: .9rem; color: var(--k-ink-2); min-height: 1.4rem; }
#kinase-page .kin-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
#kinase-page .kin-chip { display: inline-flex; align-items: center; gap: .3rem; background: #e8f0fb; border: 1px solid #b7d3f6; border-radius: 1rem; padding: 0 .2rem 0 .6rem; font-size: .8rem; color: #104281; }
#kinase-page .kin-chip button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: #104281; padding: 0 .35rem; }
#kinase-page .kin-toggle button { border: 1px solid var(--k-axis); background: var(--k-surface); padding: .2rem .7rem; font-size: .8rem; cursor: pointer; color: var(--k-ink-2); }
#kinase-page .kin-toggle button:first-child { border-radius: 4px 0 0 4px; }
#kinase-page .kin-toggle button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
#kinase-page .kin-toggle button.on { background: #184f95; border-color: #184f95; color: #fff; }
#kinase-page .kin-legend { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--k-muted); margin-left: auto; }
#kinase-page .kin-legend .ramp { width: 9rem; height: .6rem; border-radius: 3px; }

/* cards */
#kinase-page .kin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; margin-bottom: 1rem; }
#kinase-page .kin-card { border: 1px solid var(--k-line); border-radius: 6px; background: var(--k-surface); padding: .6rem .8rem; margin-bottom: 1rem; min-width: 0; }
#kinase-page .kin-grid .kin-card { margin-bottom: 0; }
#kinase-page .kin-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-bottom: .4rem; }
#kinase-page .kin-tools { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-size: .8rem; }
#kinase-page .kin-tools label { margin: 0; display: inline-flex; gap: .3rem; align-items: center; }
#kinase-page .kin-card-foot { margin-top: .4rem; }
#kinase-page #viewport { width: 100%; height: 34rem; position: relative; border: 1px solid var(--k-line); border-radius: 4px; background: #fff; }
#kinase-page .kin-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--k-muted); pointer-events: none; }

/* plots */
#kinase-page svg text { font-family: inherit; }
#kinase-page .plot-wrap { width: 100%; overflow: hidden; }
#kinase-page .plot-wrap svg { display: block; width: 100%; height: auto; }
#kinase-page .hcell { cursor: pointer; }
#kinase-page .hcell:hover { stroke: var(--k-ink); stroke-width: 1.2; }
#kinase-page .fres { cursor: pointer; }
#kinase-page .fres:hover { stroke: var(--k-ink); stroke-width: 2; }
#kinase-page .busy { opacity: .55; transition: opacity .15s; }
#kinase-page .kin-tip { position: fixed; z-index: 50; pointer-events: none; background: rgba(11,11,11,.9); color: #f0efec; font-size: .78rem; line-height: 1.35; padding: .35rem .6rem; border-radius: 4px; max-width: 18rem; display: none; }

/* subpockets */
#kinase-page .sub-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem 1.4rem; }
#kinase-page .sub-row { display: grid; grid-template-columns: 8.5rem 1fr 5rem; gap: .5rem; align-items: center; font-size: .8rem; color: var(--k-ink-2); }
#kinase-page .sub-track { height: .55rem; background: var(--k-line); border-radius: 0 3px 3px 0; position: relative; }
#kinase-page .sub-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #2a78d6; border-radius: 0 3px 3px 0; }
#kinase-page .sub-val { text-align: right; font-variant-numeric: tabular-nums; }

/* table */
#kinase-page #kin-table td.lig-cell { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
#kinase-page #kin-table tr.selected-row td { background: #e8f0fb !important; }
#kinase-page .view-btn { border: 0; background: none; cursor: pointer; color: #184f95; padding: 0 .3rem; }
#kinase-page .kin-related a { margin-right: .5rem; }
#kinase-page #kin-table td { white-space: nowrap; }
#kinase-page .kin-btn { display: inline-block; border: 1px solid #184f95; background: var(--k-surface); color: #184f95; border-radius: 4px; padding: .15rem .7rem; font-size: .8rem; line-height: 1.4; cursor: pointer; text-decoration: none; }
#kinase-page .kin-btn:hover { background: #184f95; color: #fff; }
#kinase-page .dep-row td { color: var(--k-muted); text-decoration: line-through; }