/* Product tour — a screening, run step by step.

   Three scripted walkthroughs of what the software actually does: a signed
   request moving through the six stages, the workflow keeping or dropping each
   candidate, and the record that is left behind. The shell (tabs, timeline,
   caption) keeps the site's own .st-* classes; everything inside a panel is
   scoped here under .tr-.

   Every element that animates is COMPLETE at rest. The panel only hides what
   has not happened yet while it carries .tr-live, which the script adds; with
   no script, or with reduced motion, the reader sees the finished frame. */

.tr-grid { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .tr-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; }
  .tr-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.tr-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.tr-label {
  font: 600 10.5px 'Sora', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: #9a9aaa; margin: 0;
}
.tr-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------------------------------------------------------------- panel 0 */
.tr-req {
  margin: 0; padding: 14px 16px; border-radius: 10px;
  background: #090910; border: 1px solid rgba(255, 255, 255, .07);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.8; color: #d3d3e0;
  overflow-x: auto; white-space: pre;
}
.tr-req .v { color: #b491ee; }
.tr-req .s { color: #7FD6B4; }
.tr-req .k { color: #9a9aaa; }
.tr-req .m { color: #fff; font-weight: 600; }

.tr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tr-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: opacity .35s ease;
}
.tr-step:last-child { border-bottom: 0; }
.tr-n {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 11px 'Sora', sans-serif; color: #b491ee;
  border: 1px solid rgba(180, 145, 238, .35); background: rgba(180, 145, 238, .08);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.tr-step b { display: block; font: 600 14px 'Sora', sans-serif; color: #fff; }
.tr-step small { display: block; font-size: 12.5px; color: #9a9aaa; margin-top: 1px; }
.tr-res {
  font: 600 11.5px 'Sora', sans-serif; white-space: nowrap;
  padding: 4px 9px; border-radius: 999px;
  color: #7FD6B4; background: rgba(127, 214, 180, .1);
  border: 1px solid rgba(127, 214, 180, .28);
  transition: opacity .3s ease, transform .3s ease;
}
.tr-res.warn { color: #F3C969; background: rgba(243, 201, 105, .1); border-color: rgba(243, 201, 105, .3); }
.tr-res.info { color: #b491ee; background: rgba(180, 145, 238, .1); border-color: rgba(180, 145, 238, .3); }
.tr-step.is-on .tr-n { background: #b491ee; color: #0a0b13; border-color: #b491ee; }

.tr-answer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(127, 214, 180, .08); border: 1px solid rgba(127, 214, 180, .25);
  font-size: 13px; color: #eaeaf0;
  transition: opacity .35s ease, transform .35s ease;
}
.tr-answer .code {
  font: 700 12px 'Sora', sans-serif; color: #0a0b13; background: #7FD6B4;
  padding: 3px 8px; border-radius: 6px;
}
.tr-answer span { white-space: nowrap; }

/* ---------------------------------------------------------------- panel 1 */
.tr-ladder { display: flex; flex-direction: column; gap: 6px; }
.tr-rung {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02);
  transition: border-color .3s ease, background .3s ease, opacity .3s ease;
}
.tr-rung b { font: 600 13.5px 'Sora', sans-serif; color: #fff; }
.tr-kind {
  font: 500 10px 'Sora', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: #9a9aaa; padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(255,255,255,.12);
}
.tr-rung em { margin-left: auto; font-style: normal; font-size: 12px; color: #9a9aaa; white-space: nowrap; }
.tr-rung.is-on { border-color: rgba(180, 145, 238, .45); background: rgba(180, 145, 238, .07); }
.tr-rung.end { border-style: dashed; }
.tr-rung.end.is-on { border-style: solid; border-color: rgba(127, 214, 180, .5); background: rgba(127, 214, 180, .08); }

.tr-sent {
  margin-top: auto;   /* sits at the foot of a card stretched to its neighbour */
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: #9a9aaa;
  padding: 10px 12px; border-radius: 10px; background: #090910;
  border: 1px solid rgba(255, 255, 255, .06);
}
.tr-sent b { color: #eaeaf0; font-weight: 600; }

.tr-cands { display: flex; flex-direction: column; gap: 8px; }
.tr-cand {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
  align-items: center; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  transition: opacity .4s ease, border-color .4s ease, background .4s ease;
}
.tr-cand b { font: 600 14px 'Sora', sans-serif; color: #fff; }
.tr-cand .pct { font: 600 12.5px 'Sora', sans-serif; color: #b491ee; font-variant-numeric: tabular-nums; }
.tr-cand small { grid-column: 1 / -1; font-size: 12px; color: #9a9aaa; }
.tr-verdict {
  grid-column: 1 / -1; justify-self: start;
  font: 600 11px 'Sora', sans-serif; padding: 3px 9px; border-radius: 999px;
  transition: opacity .3s ease, transform .3s ease;
}
.tr-verdict.kept { color: #7FD6B4; background: rgba(127,214,180,.12); border: 1px solid rgba(127,214,180,.3); }
.tr-verdict.dropped { color: #F29A87; background: rgba(242,154,135,.1); border: 1px solid rgba(242,154,135,.28); }
.tr-verdict.skipped { color: #F3C969; background: rgba(243,201,105,.1); border: 1px solid rgba(243,201,105,.28); }
.tr-cand.is-out { opacity: .45; }
.tr-cand.is-kept { border-color: rgba(127, 214, 180, .45); background: rgba(127, 214, 180, .06); }

.tr-rule {
  font-size: 12.5px; line-height: 1.55; color: #d3d3e0;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(243, 201, 105, .06); border: 1px solid rgba(243, 201, 105, .22);
  transition: opacity .35s ease, transform .35s ease;
}
.tr-rule b { color: #F3C969; font-weight: 600; }

/* ---------------------------------------------------------------- panel 2 */
.tr-record-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-record-h b { font: 600 20px 'Sora', sans-serif; color: #fff; letter-spacing: -.01em; }
.tr-record-h .pct { font: 700 14px 'Sora', sans-serif; color: #7FD6B4; font-variant-numeric: tabular-nums; }
.tr-sub { font-size: 12px; color: #9a9aaa; margin-top: -8px; }
.tr-lists { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tr-lists li { display: flex; gap: 9px; align-items: baseline; font-size: 13px; color: #d3d3e0; min-width: 0; }
.tr-lists li::before {
  content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; background: #b491ee;
  transform: translateY(-2px);
}
.tr-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-topic {
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
  color: #b491ee; background: rgba(180, 145, 238, .1); border: 1px solid rgba(180, 145, 238, .25);
}

.tr-log { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tr-log-wrap { overflow-x: auto; }
.tr-log th {
  text-align: left; font: 600 10px 'Sora', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: #9a9aaa; padding: 0 10px 8px 0; white-space: nowrap;
}
.tr-log td {
  padding: 9px 10px 9px 0; border-top: 1px solid rgba(255, 255, 255, .06);
  color: #9a9aaa; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tr-log tr.new td { color: #fff; }
.tr-log tr.new { transition: opacity .35s ease, background .6s ease; }
.tr-log tr.new.is-on td:first-child { box-shadow: inset 2px 0 0 #7FD6B4; padding-left: 8px; }

.tr-pdf { display: flex; flex-direction: column; gap: 10px; }
.tr-pdf-h { display: flex; align-items: center; gap: 12px; }
.tr-pdf-ico {
  width: 38px; height: 46px; border-radius: 6px; flex: 0 0 auto;
  background: rgba(242, 154, 135, .12); border: 1px solid rgba(242, 154, 135, .3);
  display: grid; place-items: end center; padding-bottom: 6px;
  font: 700 9px 'Sora', sans-serif; color: #F29A87; letter-spacing: .06em;
}
.tr-pdf-h b { font: 600 14px 'Sora', sans-serif; color: #fff; display: block; }
.tr-pdf-h small { font-size: 12px; color: #9a9aaa; }
.tr-way {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: #090910;
  border: 1px solid rgba(255, 255, 255, .06); font-size: 12.5px; color: #d3d3e0;
  transition: opacity .35s ease, transform .35s ease;
}
.tr-way code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #b491ee; font-size: 12px; overflow-wrap: anywhere; }
.tr-way span { white-space: nowrap; font: 600 11.5px 'Sora', sans-serif; color: #F3C969; font-variant-numeric: tabular-nums; }
.tr-way span.ok { color: #7FD6B4; }

.tr-balance {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 12px !important;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: #d3d3e0; padding-top: 4px;
  transition: opacity .35s ease;
}
.tr-balance b { color: #fff; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- the timeline
   Only while the tour is running. What has not happened yet is held back;
   steps that are part of the pipeline stay visible but quiet, so the reader
   can see the whole route before it is walked. */
.tr-live [data-at]:not(.is-on).tr-step,
.tr-live [data-at]:not(.is-on).tr-rung { opacity: .38; }
.tr-live .tr-step:not(.is-on) .tr-res { opacity: 0; transform: translateY(3px); }
.tr-live [data-at]:not(.is-on).tr-answer,
.tr-live [data-at]:not(.is-on).tr-verdict,
.tr-live [data-at]:not(.is-on).tr-rule,
.tr-live [data-at]:not(.is-on).tr-way,
.tr-live [data-at]:not(.is-on).tr-balance { opacity: 0; transform: translateY(4px); }
.tr-live tr[data-at]:not(.is-on) { opacity: 0; }
.tr-live .tr-type::after {
  content: ""; display: inline-block; width: 7px; height: 1.1em; margin-left: 2px;
  background: #b491ee; vertical-align: -3px; animation: trBlink 1s steps(1) infinite;
}
.tr-live .tr-type.is-on::after { display: none; }
@keyframes trBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tr-step, .tr-res, .tr-answer, .tr-rung, .tr-cand, .tr-verdict, .tr-rule,
  .tr-way, .tr-balance, .tr-log tr.new { transition: none; }
  .tr-live .tr-type::after { display: none; }
}