/* QSAR Toolbox live demo (core/partials/toolbox_demo.html + static/js/toolbox-demo.js).
   A simplified, site-styled view of the process and results; not a replica of
   the Toolbox UI. Paper, hairlines, ink; red only for the active step, the
   flagged finding, the data gap, the target point and the result numeral. */

.tbd-section { background: var(--paper); }
.tbd-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tbd-head .section-heading { margin-bottom: 0; }
.tbd-kicker { margin: 0; color: var(--ink-2); font-size: 1.08rem; line-height: 1.6; max-width: 34rem; }

/* ── Steps ─────────────────────────────────────────────────────── */
.tbd-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.tbd-step {
  position: relative; display: flex; align-items: baseline; gap: .55rem; padding: .95rem .9rem 1rem 0;
  text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--muted);
  font: inherit; cursor: pointer; transition: color .3s var(--ease);
}
.tbd-step:hover { color: var(--ink); }
.tbd-step:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tbd-num { font-family: var(--f-display); font-size: 1.3rem; line-height: 1; font-variant-numeric: lining-nums; }
.tbd-name { font-weight: 600; font-size: .98rem; line-height: 1.25; }
.tbd-desc { display: none; }
.tbd-step.is-active { color: var(--ink); }
.tbd-step.is-active .tbd-num { color: var(--red); }
.tbd-step.is-done .tbd-num { color: var(--ink); }
.tbd-bar { position: absolute; left: 0; right: .9rem; bottom: -1px; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(0); }
.tbd-step.is-active .tbd-bar { transform: scaleX(var(--p, 1)); }
.tbd-now { margin: 1rem 0 1.25rem; min-height: 1.6em; color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }

/* ── Window ────────────────────────────────────────────────────── */
.tbd-window { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; }
.tbd-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 426px; }
.tbd-target { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1.5rem; border-right: 1px solid var(--rule); background: var(--paper); }
.tbd-mol { width: 100%; max-width: 200px; height: auto; }
.tbd-bonds line { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.tbd-oh { font: 600 13px var(--f-sans); fill: var(--red); }
.tbd-target-name { margin: 0; text-align: center; font-family: var(--f-display); font-size: 1.25rem; color: var(--ink); }
.tbd-target-name small { display: block; margin-top: .2rem; font-family: var(--f-sans); font-size: .82rem; color: var(--muted); }

.tbd-panes { position: relative; min-width: 0; display: flex; align-items: center; }
.tbd-pane { width: 100%; padding: 2rem clamp(1.25rem, 3vw, 2.5rem); }
.tbd-pane[hidden] { display: none; }

/* key facts */
.tbd-facts { margin: 0; }
.tbd-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid var(--rule); }
.tbd-facts > div:last-child { border-bottom: 1px solid var(--rule); }
.tbd-facts dt { color: var(--ink-2); font-size: .95rem; }
.tbd-facts dd { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbd-facts--num dd { font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; line-height: 1.1; }
.tbd-facts--num dd small { font-family: var(--f-sans); font-size: .85rem; color: var(--muted); }
.tbd-facts .is-gap dd, .tbd-facts .is-gap dt { color: var(--red); }

/* profiling findings */
.tbd-flags { list-style: none; margin: 0; padding: 0; }
.tbd-flags li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.05rem 0; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--ink-2); }
.tbd-flags li:last-child { border-bottom: 1px solid var(--rule); }
.tbd-flags b { font-weight: 600; color: var(--ink); text-align: right; }
.tbd-flags .is-hit { padding-left: .9rem; box-shadow: inset 3px 0 0 var(--red); }
.tbd-flags .is-hit b { color: var(--red); }

/* category */
.tbd-big { margin: 0 0 1.25rem; color: var(--ink-2); font-size: 1.05rem; }
.tbd-big b { font-family: var(--f-display); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--red); margin-right: .35rem; }
.tbd-big span { display: block; margin-top: .4rem; font-size: .92rem; color: var(--muted); }
.tbd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.tbd-chips li { padding: .4rem .75rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper); font-size: .88rem; color: var(--ink); }

/* gap filling */
.tbd-gap { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 1.5rem; align-items: center; }
.tbd-plot { display: block; width: 100%; height: auto; }
.tbd-grid line { stroke: var(--rule); }
.tbd-grid text { font: 12px var(--f-sans); fill: var(--muted); }
.tbd-axis { font-size: 12.5px !important; fill: var(--ink-2) !important; }
.tbd-fit { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.tbd-pt { fill: var(--ink); }
.tbd-tgt circle { fill: var(--red); }
.tbd-ci { stroke: var(--red); stroke-width: 1.6; }
.tbd-tgt text { font: 600 13.5px var(--f-sans); fill: var(--red); }
.tbd-result { border-left: 3px solid var(--red); padding: .25rem 0 .25rem 1rem; }
.tbd-result-k { margin: 0 0 .35rem; font-size: .9rem; color: var(--ink-2); }
.tbd-result-v { margin: 0 0 .8rem; color: var(--ink-2); }
.tbd-result-v span { font-family: var(--f-display); font-size: 3.2rem; line-height: 1; color: var(--red); margin-right: .2rem; }
.tbd-result-check { margin: 0; padding-top: .6rem; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--ink-2); }
.tbd-result-check b { color: var(--ink); font-weight: 600; }

/* report */
.tbd-doc { max-width: 560px; margin: 0 auto; padding: 1.5rem 1.75rem 1.75rem; background: var(--card); border: 1px solid var(--rule-strong); border-top: 3px solid var(--red); }
.tbd-doc-title { margin: 0 0 1rem; font-family: var(--f-display); font-size: 1.4rem; color: var(--ink); }
.tbd-doc .tbd-facts dd { font-size: .98rem; }

/* ── Controls ──────────────────────────────────────────────────── */
.tbd-controls { display: flex; align-items: center; gap: 1rem; padding: .55rem .9rem; border-top: 1px solid var(--rule); }
.tbd-progress { flex: 1; height: 2px; background: var(--rule); }
.tbd-progress span { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tbd-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 2px; font: inherit; font-size: .8rem; color: var(--ink); cursor: pointer; }
.tbd-toggle[hidden] { display: none; }
.tbd-toggle:hover { border-color: var(--red); color: var(--red); }
.tbd-toggle svg { fill: currentColor; }
.tbd-toggle .i-play, .tbd-toggle .i-replay { display: none; }
.tbd-toggle[data-state="paused"] .i-pause, .tbd-toggle[data-state="ended"] .i-pause, .tbd-toggle[data-state="idle"] .i-pause { display: none; }
.tbd-toggle[data-state="paused"] .i-play, .tbd-toggle[data-state="idle"] .i-play { display: inline; }
.tbd-toggle[data-state="ended"] .i-replay { display: inline; }
.tbd-caption { margin: .8rem 0 0; font-size: .84rem; color: var(--muted); }

/* ── Motion (only with html.motion and the JS player) ─────────── */
@keyframes tbd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tbd-pop { 0% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes tbd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.motion .tbd.is-live .tbd-pane.is-active { animation: tbd-in .4s var(--ease) both; }
.motion .tbd.is-live .tbd-pane.is-active [style*="--i"] { animation: tbd-in .45s var(--ease) both; animation-delay: calc(var(--i) * .35s + .2s); }
.motion .tbd.is-live .tbd-pane.is-active .tbd-chips li { animation-delay: calc(var(--i) * .12s + .4s); }
.motion .tbd.is-live #tbd-pane-5.is-active .tbd-pt { transform-box: fill-box; transform-origin: center; animation: tbd-pop .45s var(--ease) both; animation-delay: calc(var(--i) * .15s + .3s); }
.motion .tbd.is-live #tbd-pane-5.is-active .tbd-fit { stroke-dasharray: 1; animation: tbd-draw 1.1s var(--ease) 1.9s both; }
.motion .tbd.is-live #tbd-pane-5.is-active .tbd-tgt { animation: tbd-in .5s var(--ease) 3s both; }
.motion .tbd.is-live #tbd-pane-5.is-active .tbd-result { animation: tbd-in .5s var(--ease) 3.5s both; }
.motion .tbd.is-live #tbd-pane-5.is-active .tbd-result-check { animation: tbd-in .5s var(--ease) 4.6s both; }
.motion .tbd.is-live #tbd-pane-6.is-active .tbd-doc { animation: tbd-in .5s var(--ease) both; }

/* ── Breakpoints ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tbd-body { grid-template-columns: 1fr; }
  .tbd-target { flex-direction: row; justify-content: flex-start; gap: 1.25rem; padding: 1rem 1.25rem; border-right: 0; border-bottom: 1px solid var(--rule); }
  .tbd-mol { max-width: 130px; }
  .tbd-target-name { text-align: left; font-size: 1.1rem; }
}
@media (max-width: 900px) {
  .tbd-head { grid-template-columns: 1fr; }
  .tbd-steps { display: flex; overflow-x: auto; border-top: 0; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .tbd-steps::-webkit-scrollbar { display: none; }
  .tbd-step { flex: 0 0 auto; padding: .7rem 1.1rem .75rem 0; white-space: nowrap; }
  .tbd-step .tbd-num { font-size: 1.05rem; }
  .tbd-step .tbd-name { font-size: .92rem; }
  .tbd-now { min-height: 3.1em; }
  .tbd-gap { grid-template-columns: 1fr; }
  .tbd-body { min-height: 0; }
}
@media (max-width: 560px) {
  .tbd-pane { padding: 1.25rem 1rem; }
  .tbd-facts > div { grid-template-columns: 1fr; gap: .2rem; }
  .tbd-flags li { flex-direction: column; gap: .2rem; }
  .tbd-flags b { text-align: left; }
  .tbd-grid text, .tbd-axis { font-size: 19px !important; }
  .tbd-tgt text { font-size: 21px; }
  .tbd-doc { padding: 1rem; }
}