/* qodiqa /try/: the request-trace console. A full-viewport app under the site header: [slim top bar] / [scenarios | trace | receipt, verifier, audit trail].
   Shared parts only: system.css tokens, .btn pills (34px), .lit-border + --lit-ring/--lit-glow, --r-panel. No dot layer of its own (the page background grid is the only one), no .framed.
   Local custom properties (defined ONCE, here): the status colours and the three console sizes (13 / 18 / 21 px) that sit between the site's 12 / 14 / 15 px type tokens.
   Motion: only transform and opacity; the lit borders are permanent; every region has a fixed size, so a run only swaps content in place. Reduced motion: no transition, no animation. */
body.tr-page { display: flex; flex-direction: column; height: 100dvh; overflow: clip; overscroll-behavior: none; }
body.tr-page > footer { display: none; }
body.tr-page > main { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: clip; position: relative; }
body.tr-page > main:focus { outline: none; }

.tr {
  /* status colours (once): emerald, coral, amber; gold for the signature, blue for links in the chain */
  --ok: #2ee6a6; --bad: #ff5c7c; --warn: #ffc233; --gold: #f7b844; --blue: #6aa8ff;
  --ok-c: 46 230 166; --bad-c: 255 92 124; --warn-c: 255 194 51;
  /* the console sizes between the site type tokens */
  --fs-13: .8125rem; --fs-title: 1.0625rem; --fs-total: 1.3125rem;
  --hair: rgba(255, 255, 255, .085); --glass: rgba(11, 13, 19, .8); --well: #090b10;
  --row-h: 28px; --check-h: 18px; --lane-n: .37; --lane: calc(var(--lane-n) * 100%);
  height: 100%; min-height: 0; min-width: 0; display: grid; grid-template-rows: 52px minmax(0, 1fr); color: var(--text);
}
.tr [hidden] { display: none !important; }
:where(.tr) :where(p, h2, h3, dl, dd, ol, ul) { margin: 0; padding: 0; }
:where(.tr) :where(ol, ul) { list-style: none; }
.tr code, .tr kbd { font-family: var(--mono); }
.tr code { padding: 0; border: 0; background: none; border-radius: 0; }
.tr svg.tr-ic { width: 14px; height: 14px; flex: none; }
.tr :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
/* rings are for the keyboard only: main.js tracks the input modality, so no ring is ever left behind by a mouse click or a touch, even where a script moves focus afterwards */
.tr[data-input="pointer"] :focus-visible, .tr :focus:not(:focus-visible) { outline: none !important; }
.tr-lab { font-size: var(--text-small-size); line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.tr button { font-family: inherit; }

/* ---- top bar */
.tr-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; min-width: 0; background: linear-gradient(180deg, rgba(7, 8, 12, .7), rgba(7, 8, 12, .25)); }
.tr-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(252, 106, 2, .45) 18%, rgba(192, 46, 98, .45) 52%, rgba(1, 137, 253, .45) 84%, transparent); opacity: .55; pointer-events: none; }
.tr-top__l, .tr-top__r { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tr-top__r { flex: none; gap: 10px; }
.tr-top__t { font-size: var(--text-card-title-size); font-weight: 600; letter-spacing: -.005em; color: var(--text); white-space: nowrap; }
.tr-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 28px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text-dim); font-size: var(--text-small-size); line-height: 1; }
.tr-chip i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px rgb(var(--warn-c) / .7); }
.tr-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-nojs { color: var(--text-dim); font-size: var(--text-small-size); }
.tr .tr-pill { height: var(--pill-h); min-height: var(--pill-h); }
.tr .tr-pill kbd { margin-left: 2px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; font-size: var(--text-small-size); font-weight: 500; line-height: 1; letter-spacing: .02em; }
.tr .tr-pill--s { height: 32px; min-height: 32px; padding: 0 12px; font-size: var(--fs-13); gap: 6px; }
.tr .tr-pill--s .tr-ic { width: 13px; height: 13px; }
.tr .tr-pill.is-done { border-color: rgb(var(--ok-c) / .6); color: var(--ok); }

/* ---- the three columns */
.tr-body { display: grid; grid-template-columns: clamp(272px, 22.2vw, 320px) minmax(0, 1fr) clamp(332px, 26.1vw, 376px); gap: 16px; padding: 14px 16px 14px; min-height: 0; min-width: 0; }
.tr-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--glass); box-shadow: var(--elev); }
.tr-card__h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--hair); }
.tr-card__s { font-family: var(--mono); font-size: var(--text-small-size); color: var(--text-faint); letter-spacing: .04em; white-space: nowrap; }
.lit-border.tr-card { border-color: transparent; }
.tr-x { margin-left: auto; width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--hair); border-radius: 50%; background: none; color: var(--text-dim); cursor: pointer; }

/* ---- left: scenarios */
.tr-lst { overflow: hidden; }
.tr-find { flex: none; padding: 12px 12px 4px; display: grid; gap: 10px; }
.tr-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--text-faint); }
.tr-search:focus-within { border-color: rgba(255, 255, 255, .28); }
.tr-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-13); }
.tr-search input::placeholder { color: var(--text-faint); opacity: 1; }
.tr-search input::-webkit-search-cancel-button { display: none; }
.tr-chips { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 4px; }
.tr-chipb { height: 30px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255, 255, 255, .025); color: var(--text-dim); font-size: var(--text-small-size); line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tr-chipb:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
.tr-chipb[aria-pressed="true"] { color: var(--text); background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .34); }
.tr-list { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 14px), transparent 100%); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.tr-list::-webkit-scrollbar, .tr-rowsw::-webkit-scrollbar, .tr-aud__b::-webkit-scrollbar, .tr-code__b::-webkit-scrollbar { width: 6px; height: 6px; }
.tr-list::-webkit-scrollbar-thumb, .tr-rowsw::-webkit-scrollbar-thumb, .tr-aud__b::-webkit-scrollbar-thumb, .tr-code__b::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
.tr-list::-webkit-scrollbar-track, .tr-rowsw::-webkit-scrollbar-track, .tr-aud__b::-webkit-scrollbar-track, .tr-code__b::-webkit-scrollbar-track { background: transparent; }
.tr-grp__l { display: flex; align-items: center; gap: 10px; padding: 14px 8px 6px; font-size: var(--text-small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.tr-grp__l::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.tr-opt { --c: var(--ok-c); display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 10px; border: 1px solid transparent; border-radius: 9px; color: #dfe3ec; font-size: var(--fs-13); cursor: pointer; user-select: none; -webkit-user-select: none; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tr-opt[data-g="blocked"] { --c: var(--bad-c); } .tr-opt[data-g="tampered"] { --c: var(--warn-c); }
.tr-d { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 8px rgb(var(--c) / .65); }
.tr-opt__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-tag { flex: none; font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .02em; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tr-opt[aria-selected="true"] .tr-tag { color: var(--text-dim); }
.tr-opt:hover { background: rgba(255, 255, 255, .045); }
.tr-opt[aria-selected="true"] { background: rgb(var(--c) / .11); border-color: rgb(var(--c) / .6); box-shadow: 0 0 16px -6px rgb(var(--c) / .7), inset 0 0 14px -8px rgb(var(--c) / .6); color: #fff; }
.tr-opt:focus-visible { outline-offset: -2px; }
.tr-empty { padding: 20px 10px; color: var(--text-faint); font-size: var(--fs-13); }
.tr-keys { flex: none; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-top: 1px solid var(--hair); color: var(--text-faint); font-size: var(--text-small-size); white-space: nowrap; overflow: hidden; }
.tr-keys span { margin-right: 6px; }
.tr kbd { display: inline-block; min-width: 20px; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; background: rgba(255, 255, 255, .05); color: var(--text-dim); font-size: var(--text-small-size); line-height: 1.2; text-align: center; }

/* ---- centre: the trace */
.tr-main { overflow: visible; }
.tr-pick { display: none; }
.tr-req { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 20px 8px; }
.tr-req__l { flex: 1; min-width: 0; }
.tr-req__mw { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.tr-req__m { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--mono); font-size: var(--text-small-size); color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.tr-req__m b { color: var(--text); font-weight: 600; } .tr-req__m i { font-style: normal; color: var(--text-faint); }
.tr-req__m code { font-size: inherit; color: var(--text-dim); }
.tr-lk { position: relative; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0; padding: 0; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.tr-lk:hover { color: var(--text); border-color: var(--hair); background: rgba(255, 255, 255, .04); }
.tr-lk svg { width: 14px; height: 14px; }
.tr-lk__c { position: absolute; z-index: 3; left: 0; top: calc(100% + 4px); padding: 4px 9px; border: 1px solid rgb(var(--ok-c) / .5); border-radius: 999px; background: #0d1119; color: var(--ok); font-family: var(--font); font-size: var(--text-small-size); line-height: 1.2; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, visibility 0s linear 120ms; }
.tr-lk.is-done { color: var(--ok); }
.tr-lk.is-done .tr-lk__c { opacity: 1; visibility: visible; transition: opacity 120ms ease, visibility 0s; }
.tr-req__t { margin-top: 6px; font-size: var(--fs-title); font-weight: 500; line-height: 1.3; letter-spacing: -.005em; color: var(--text); height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.tr-req__r { flex: none; display: flex; align-items: flex-start; gap: 16px; }
.tr-total .tr-lab { letter-spacing: .08em; }
.tr-total { text-align: right; }
.tr-total__v { margin-top: 4px; font-family: var(--mono); font-size: var(--fs-total); font-weight: 500; line-height: 1.2; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; min-width: 8.5ch; }
.tr-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-width: 184px; height: 34px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 999px; font-family: var(--mono); font-size: var(--text-small-size); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; margin-top: 2px; }
.tr-badge[data-v="idle"] { border-style: dashed; border-color: rgba(255, 255, 255, .2); color: var(--text-faint); font-weight: 500; }
.tr-badge[data-v="allow"] { color: var(--ok); border-color: rgb(var(--ok-c) / .6); background: rgb(var(--ok-c) / .1); box-shadow: 0 0 20px -6px rgb(var(--ok-c) / .65); }
.tr-badge[data-v="block"] { color: var(--bad); border-color: rgb(var(--bad-c) / .6); background: rgb(var(--bad-c) / .1); box-shadow: 0 0 20px -6px rgb(var(--bad-c) / .65); }
.tr-badge[data-v="tamper"] { color: var(--warn); border-color: rgb(var(--warn-c) / .6); background: rgb(var(--warn-c) / .1); box-shadow: 0 0 20px -6px rgb(var(--warn-c) / .6); }
.tr-pipew { flex: none; padding: 2px 20px 10px; }
.tr-pipe { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.tr-pipe li { min-width: 0; }
.tr-pipe i { display: block; height: 7px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; box-sizing: border-box; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.tr-pipe span { display: block; margin-top: 6px; font-family: var(--mono); font-size: var(--text-small-size); letter-spacing: 0; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-pipe li[data-s="pass"] i { background: linear-gradient(90deg, #2ee6a6, #20c995); border-color: transparent; box-shadow: 0 0 10px -2px rgb(var(--ok-c) / .55); }
.tr-pipe li[data-s="fail"] i { background: linear-gradient(90deg, #ff5c7c, #f2486b); border-color: transparent; box-shadow: 0 0 10px -2px rgb(var(--bad-c) / .6); }
.tr-pipe li[data-s="skip"] i { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .2) 0 2px, transparent 2px 5px), rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.tr-pipe li[data-s="fail"] span { color: var(--bad); } .tr-pipe li[data-s="pass"] span { color: var(--text-dim); }

.tr-wf { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--hair); padding: 0 20px; }
.tr-ruler, .tr-row__h { display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px var(--lane) 76px; column-gap: 12px; align-items: center; }
.tr-ruler { flex: none; height: 24px; padding: 0 8px; font-size: var(--text-small-size); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.tr-ruler__s { grid-column: 1 / 4; } .tr-ruler__t { text-align: right; }
.tr-ticks { position: relative; height: 100%; font-family: var(--mono); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.tr-ticks span { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 4px; white-space: nowrap; }
.tr-ticks span:last-child { transform: translate(-100%, -50%); padding: 0 4px 0 0; }
.tr-rowsw { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -20px; padding: 0 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.tr-rows { display: grid; gap: 0; }
.tr-row { border-radius: 10px; }
.tr-row__h { width: 100%; height: var(--row-h); padding: 0 8px; border: 0; background: none; color: var(--text); font-size: var(--text-body-size); text-align: left; cursor: default; position: relative; }
button.tr-row__h { cursor: pointer; }
button.tr-row__h:hover .tr-name { color: #fff; }
.tr-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 7px; font-family: var(--mono); font-size: var(--text-small-size); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tr-num--p svg { width: 13px; height: 13px; }
.tr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-name em { margin-left: 10px; font-style: normal; font-size: var(--text-small-size); color: var(--text-faint); }
.tr-st { display: inline-flex; justify-content: center; }
.tr-st svg { width: 16px; height: 16px; stroke-width: 2; }
.tr-row[data-s="pass"] .tr-st { color: var(--ok); } .tr-row[data-s="fail"] .tr-st { color: var(--bad); }
.tr-lane { position: relative; display: block; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 25% 100%, linear-gradient(270deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 100% 0 / 1px 100% no-repeat; }
.tr-lane--skip { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 7px), rgba(255, 255, 255, .025); border-radius: 4px; }
.tr-lane--note { display: flex; align-items: center; background: none; }
.tr-lane--note em { font-style: normal; font-size: var(--text-small-size); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; min-width: 7px; border-radius: 6px; transform-origin: 0 50%; }
.tr-row[data-s="pass"] .tr-bar { background: linear-gradient(90deg, #2ee6a6, #20c995); box-shadow: 0 0 10px -2px rgb(var(--ok-c) / .55); }
.tr-row[data-s="fail"] .tr-bar { background: linear-gradient(90deg, #ff5c7c, #f2486b); box-shadow: 0 0 10px -2px rgb(var(--bad-c) / .6); }
.tr-dur { text-align: right; font-family: var(--mono); font-size: var(--text-small-size); color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-row[data-s="skip"] .tr-name, .tr-row[data-s="skip"] .tr-num, .tr-row[data-s="skip"] .tr-dur { color: var(--text-faint); }
.tr-row[data-s="skip"] .tr-num { border-color: rgba(255, 255, 255, .12); }
.tr-row[data-s="idle"] .tr-name { color: var(--text-dim); }
.tr-row[data-s="fail"] { background: rgb(var(--bad-c) / .075); box-shadow: inset 0 0 0 1px rgb(var(--bad-c) / .32); }
.tr-row[data-s="fail"] .tr-num { border-color: rgb(var(--bad-c) / .7); color: var(--bad); background: rgb(var(--bad-c) / .1); }
.tr-row--prov .tr-name { color: var(--text-dim); }
.tr-checks { position: relative; padding: 2px 12px 6px 44px; }
.tr-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: var(--check-h); line-height: 1.3; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; font-size: var(--fs-13); color: var(--text); }
.tr-checks li i { display: inline-grid; place-items: center; font-style: normal; }
.tr-checks li i svg { width: 14px; height: 14px; stroke-width: 2; }
.tr-checks li i b { width: 8px; height: 1.5px; background: var(--text-faint); }
.tr-checks li[data-s="pass"] i { color: var(--ok); } .tr-checks li[data-s="fail"] i { color: var(--bad); }
.tr-ck__l { min-width: 0; overflow-wrap: anywhere; }
.tr-ck__l em { font-style: normal; color: var(--text-dim); }
.tr-checks li[data-s="skip"] { color: var(--text-faint); } .tr-checks li[data-s="skip"] .tr-ck__l em { color: var(--text-faint); }
.tr-checks li[data-s="fail"] { border-color: rgb(var(--bad-c) / .45); background: rgb(var(--bad-c) / .07); font-weight: 500; }
.tr-checks li[data-s="fail"] .tr-ck__l em { color: var(--text); font-weight: 400; }
.tr-checks code { font-size: var(--text-small-size); color: var(--text-faint); letter-spacing: .03em; white-space: nowrap; }
.tr-checks li[data-s="fail"] code { color: var(--bad); }
.tr-ck__m { font-family: var(--mono); font-size: var(--text-small-size); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-wf { position: relative; }
.tr-cta-w { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); opacity: 1; transition: opacity 120ms ease, visibility 0s; }
.tr-cta-w.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, visibility 0s linear 120ms; }
.tr .tr-cta { --tr-cta-h: 44px; height: var(--tr-cta-h) !important; min-height: var(--tr-cta-h) !important; padding: 0 12px 0 20px; gap: 10px; font-size: var(--text-card-title-size); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 28px -4px rgba(176, 42, 94, .55), 0 10px 26px -10px rgba(196, 86, 29, .7); }
.tr .tr-cta:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 0 32px -2px rgba(176, 42, 94, .65), 0 12px 28px -10px rgba(196, 86, 29, .8); }
.tr .tr-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tr-cta__ic { width: 16px; height: 16px; flex: none; }
.tr .tr-cta kbd { margin-left: 4px; padding: 3px 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; font-size: var(--text-small-size); font-weight: 500; line-height: 1; letter-spacing: .02em; }
.tr-cta__n { margin: 0; font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.4; }
/* short desktop windows (the stage rows leave under 75px below them): the line sits tight under the button and covers the playback note until a run starts */
@media (min-width: 801px) and (max-height: 790px) { .tr-cta-w { bottom: 4px; gap: 6px; } .tr-cta__n { line-height: 16px; } .tr-wf:has(.tr-cta-w:not(.is-gone)) .tr-note { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .tr-cta-w, .tr-cta-w.is-gone { transition: none; } }
.tr-plain { flex: none; height: 36px; margin: 4px 0 0; overflow: hidden; font-size: var(--fs-13); line-height: 18px; color: var(--text-dim); text-align: left; opacity: 0; transition: opacity 120ms ease; }
.tr-plain[data-on] { opacity: 1; }
/* a narrow trace column wraps the sentence on a third line: that line is reserved too (small desktop windows); below 800 the page scrolls, so the paragraph is simply as tall as its text, with room for four lines */
@media (max-width: 1099px) { .tr-plain { height: 54px; } }
@media (max-width: 799px) { .tr-plain { height: auto; min-height: 72px; margin-top: 8px; } }
.tr-note { flex: none; padding: 0 0 5px; font-size: var(--text-small-size); color: var(--text-faint); }
/* the run is played back stage by stage: pending rows keep their place (nothing moves), they just have not appeared yet */
.tr-rows.is-playing .tr-row:not(.is-on) { background: none; border-color: transparent; }
.tr-rows.is-playing .tr-row:not(.is-on) :is(.tr-st, .tr-dur, .tr-checks, .tr-lane--note em) { visibility: hidden; }
.tr-rows.is-playing .tr-row:not(.is-on) .tr-num { color: var(--text-dim); background: none; border-color: rgba(255, 255, 255, .2); }
.tr-rows.is-playing .tr-row:not(.is-on) .tr-name { color: var(--text-dim); }
.tr-rows.is-playing .tr-row:not(.is-on) .tr-name em { visibility: hidden; }
.tr-rows.is-playing .tr-row:not(.is-on) .tr-bar { transform: scaleX(0); }
.tr-rows.is-playing .tr-row:not(.is-on) .tr-lane--skip { opacity: 0; }
.tr-rows.is-playing .tr-bar { transition: transform 160ms var(--ease); }

.tr-codes { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px 20px 10px; height: 88px; box-sizing: content-box; }
.tr-code { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--hair); border-radius: 12px; background: var(--well); overflow: hidden; }
.tr-code > header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; padding: 0 14px; border-bottom: 1px solid var(--hair); }
.tr-code > header code { font-size: var(--text-small-size); color: var(--text-faint); }
.tr-http.ok { color: var(--ok); } .tr-http.bad { color: var(--bad); }
.tr-code > header code.tr-http { font-weight: 600; }
.tr-code__b { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.tr-pre { margin: 0; padding: 0; overflow: visible; background: none; border: 0; font: var(--text-code); font-size: var(--text-code-size); line-height: 1.4; color: var(--text-dim); white-space: pre; }
.tr-pre code { font: inherit; background: none; border: 0; padding: 0; color: inherit; }
.tr-pre .k { color: var(--text-faint); } .tr-pre .s { color: #e8c88f; } .tr-pre .b { color: #f0a96e; }
.tr-pre .x .v span { color: var(--bad); }
.tr-skel { display: grid; gap: 10px; padding-top: 4px; } .tr-skel i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.tr-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 0 20px; border-top: 1px solid var(--hair); font-size: var(--fs-13); color: var(--text-dim); overflow: hidden; }
.tr-foot p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tr-foot p > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-foot__r { flex: none; gap: 18px !important; font-size: var(--text-small-size); }
.tr-foot b { font-family: var(--mono); font-weight: 600; color: var(--text); margin: 0 2px; }
.tr-foot i { font-style: normal; color: var(--text-dim); }
.tr-foot svg { color: var(--text-dim); }

/* ---- right: receipt, verifier, audit trail */
.tr-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.tr-rc, .tr-vf { flex: none; }
.tr-au { flex: 1 1 0; min-height: 96px; }
.tr-kv { padding: 2px 16px 0; }
.tr-kv__r { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; height: 30px; border-bottom: 1px solid var(--hair); gap: 10px; }
.tr-kv__r:last-child { border-bottom: 0; }
.tr-kv dt { font-size: var(--fs-13); color: var(--text-faint); }
.tr-kv dd { font-family: var(--mono); font-size: var(--fs-13); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tr-kv dd i { font-style: normal; color: var(--text-faint); }
.tr-kv__r.is-sig dd { color: var(--gold); }
.tr-kv__r.is-changed dd { color: var(--bad); }
.tr-kv dd u { margin-left: 8px; padding: 1px 7px; border: 1px solid rgb(var(--bad-c) / .5); border-radius: 999px; font-family: var(--font); font-size: var(--text-small-size); text-decoration: none; color: var(--bad); }
.tr-skel1 { display: inline-block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .07); vertical-align: middle; }
.tr-none { padding: 10px 16px 0; font-size: var(--fs-13); color: var(--text-faint); line-height: 1.45; height: 150px; }
.tr-acts { display: flex; flex-wrap: nowrap; gap: 6px; padding: 10px 16px 0; }
.tr-acts--v { padding-top: 12px; }
.tr-tam { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 50px; overflow: hidden; padding: 4px 16px 10px; font-size: var(--text-small-size); line-height: 1.35; color: var(--text-faint); }
.tr-vrows { padding: 8px 16px 2px; }
.tr-vrows li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; height: 32px; font-size: var(--text-body-size); color: var(--text); }
.tr-vrows li i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); color: transparent; font-style: normal; }
.tr-vrows li i svg { width: 11px; height: 11px; stroke-width: 2.4; }
.tr-vrows li[data-s="pass"] i { border-color: var(--ok); color: var(--ok); }
.tr-vrows li[data-s="fail"] i { border-color: var(--bad); color: var(--bad); } .tr-vrows li[data-s="fail"] { color: var(--bad); }
.tr-vrows li i b { width: 7px; height: 1.5px; background: var(--text-faint); } .tr-vrows li i b.o { display: none; }
.tr-vrows li[data-s="idle"] { color: var(--text-dim); }
.tr-vrows code { font-size: var(--text-small-size); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tr-vbadge { display: flex; align-items: center; justify-content: center; gap: 12px; height: 42px; margin: 8px 16px 0; border: 1px solid var(--hair); border-radius: 11px; font-family: var(--mono); font-size: var(--text-body-size); font-weight: 600; letter-spacing: .32em; text-indent: .32em; }
.tr-vbadge svg { width: 16px; height: 16px; stroke-width: 2.2; }
.tr-vbadge[data-v="idle"] { border-style: dashed; border-color: rgba(255, 255, 255, .18); color: var(--text-faint); letter-spacing: .08em; text-indent: 0; font-weight: 500; font-size: var(--fs-13); }
.tr-vbadge[data-v="ok"] { color: var(--ok); border-color: rgb(var(--ok-c) / .6); background: rgb(var(--ok-c) / .09); box-shadow: 0 0 22px -8px rgb(var(--ok-c) / .7); }
.tr-vbadge[data-v="bad"] { color: var(--bad); border-color: rgb(var(--bad-c) / .6); background: rgb(var(--bad-c) / .09); box-shadow: 0 0 22px -8px rgb(var(--bad-c) / .7); }
.tr-vnote { height: 3.1em; margin: 8px 16px 12px; font-size: var(--text-small-size); line-height: 1.4; color: var(--text-dim); text-align: center; overflow: hidden; }
.tr-vnote span { color: var(--text-faint); }
.tr-aud__b { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.tr-aud__empty p { padding: 10px 0 12px; font-size: var(--fs-13); color: var(--text-faint); line-height: 1.45; }
.tr-aud__empty i { display: block; height: 7px; margin: 10px 0; border-radius: 4px; background: rgba(255, 255, 255, .06); } .tr-aud__empty i:last-child { width: 60%; }
.tr-aud__run + .tr-aud__run { margin-top: 8px; border-top: 1px solid var(--hair); }
.tr-aud__rh { display: flex; align-items: baseline; gap: 10px; padding: 8px 0 4px; font-size: var(--text-small-size); min-width: 0; }
.tr-aud__rh span { font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); flex: none; }
.tr-aud__rh em { font-style: normal; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-aud__run ol { position: relative; }
.tr-aud__run ol li { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; height: 28px; margin-top: 8px; font-family: var(--mono); font-size: var(--text-small-size); }
.tr-aud__run ol li:first-child { margin-top: 0; }
.tr-aud__run ol li:not(:first-child)::before { content: ''; position: absolute; left: 10px; top: -8px; width: 1px; height: 8px; background: linear-gradient(180deg, #fc6a02, #c02e62 55%, #0189ff); opacity: .8; }
.tr-aud__run b { font-weight: 600; letter-spacing: .06em; color: var(--text); }
.tr-aud__run code { color: var(--text-dim); font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-prev { color: var(--blue); white-space: nowrap; }
.tr-aud__none { padding: 2px 0 6px; font-size: var(--text-small-size); color: var(--text-faint); }
.tr-aud__v { flex: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 16px 8px; border-top: 1px solid transparent; font-size: var(--text-small-size); line-height: 1.35; }
.tr-aud__v[data-v="ok"] { color: var(--ok); } .tr-aud__v[data-v="bad"] { color: var(--bad); }
.tr-aud__v svg { flex: none; }
/* ---- right: Evidence (fourth card, one fixed height: the note and the digest line are always reserved, so nothing moves when the buttons enable or a file is downloaded) */
.tr-ev { flex: none; }
.tr-acts--ev { padding-top: 10px; }
.tr-acts--ev .tr-pill { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 10px; white-space: nowrap; }
.tr .tr-pill.is-disabled { opacity: .4; cursor: not-allowed; transform: none; }
.tr .tr-pill.is-disabled:hover { transform: none; background: none; border-color: var(--btn-bd, rgba(255, 255, 255, .22)); box-shadow: none; }
.tr .btn--primary.tr-pill.is-disabled:hover { background: #F5F6F8; box-shadow: none; }
.tr-evn { height: 40px; padding: 8px 16px 0; font-size: var(--text-small-size); line-height: 16px; color: var(--text-faint); overflow: hidden; }
.tr-evh { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 16px 6px; font-size: var(--text-small-size); color: var(--text-dim); white-space: nowrap; }
.tr-evh code { font-family: var(--mono); color: var(--text); }
.tr-evh i { font-style: normal; color: var(--text-faint); }
.tr-evcp { flex: none; width: 58px; height: 24px; border: 1px solid var(--hair); border-radius: 999px; background: none; color: var(--text-dim); font: inherit; font-size: var(--text-small-size); cursor: pointer; }
.tr-evcp:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }
.tr-evcp:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tr-evcp.is-done { border-color: rgb(var(--ok-c) / .6); color: var(--ok); }
/* the right column holds four cards: below 940 px of height it takes the compact sizes the short screens already use (right column only), and what still does not fit scrolls inside the column, never the page */
@media (min-width: 800px) {
  .tr-side { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; padding: 2px 4px 4px; margin: -2px -4px -4px; }
  .tr-side::-webkit-scrollbar { width: 6px; } .tr-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; } .tr-side::-webkit-scrollbar-track { background: transparent; }
}
@media (min-width: 800px) and (max-height: 940px) {
  .tr-side { gap: 10px; }
  .tr-side .tr-card__h { height: 36px; }
  .tr-side .tr-kv__r { height: 24px; } .tr-side .tr-tam { height: 34px; padding: 2px 16px 6px; } .tr-side .tr-none { height: 120px; }
  .tr-side .tr-vrows { padding-top: 4px; } .tr-side .tr-vrows li { height: 26px; } .tr-side .tr-vbadge { height: 34px; margin-top: 6px; } .tr-side .tr-vnote { height: 2.9em; margin: 6px 16px 8px; }
  .tr-side .tr-acts, .tr-side .tr-acts--v { padding-top: 6px; } .tr-side .tr-pill--s { height: 30px; min-height: 30px; }
  .tr-side .tr-aud__v { min-height: 28px; padding: 2px 16px 6px; }
  .tr-evn { height: 36px; padding-top: 4px; } .tr-evh { height: 22px; padding-bottom: 2px; }
}
.is-fade { animation: tr-in 120ms var(--ease) both; }
@keyframes tr-in { from { opacity: .35; } to { opacity: 1; } }

.tr-sheet-bg { display: none; }

/* taller screens: the 38 px row of the design */
/* The stage rows and the checks of an expanded stage are never scrolled inside: they take their natural height, and the row sizes follow the room the window gives (the worst stage has nine checks). Request/Response keep what is left. */
@media (min-height: 960px) { .tr { --row-h: 30px; --check-h: 20px; } .tr-codes { height: 120px; } }
@media (min-height: 1040px) { .tr { --row-h: 34px; --check-h: 24px; } .tr-codes { height: 152px; } }
/* the wider scenario list leaves the trace less room: the stage numbers leave the pipeline labels up to 1479 (they stay in the stage rows) */
@media (max-width: 1479px) { .tr-pipe span b { display: none; } }
/* ---- up to 1399: the numbers leave the pipeline labels, the total sits above the badge, the lane narrows */
@media (max-width: 1399px) {
  .tr { --lane-n: .33; }
  .tr-pipe span b { display: none; }
  .tr-req__r { flex-direction: column; align-items: flex-end; gap: 6px; }
  .tr-total { display: flex; align-items: baseline; gap: 12px; }
  .tr-total__v { margin-top: 0; font-size: 1.125rem; min-width: 0; }
  .tr-badge { margin-top: 0; }
}
/* ---- 1100 to 1280: narrower side columns */
@media (max-width: 1280px) {
  .tr-body { gap: 14px; padding: 14px; }
  .tr { --lane-n: .3; }
  .tr-chipb { padding: 0 8px; }
  .tr-keys { gap: 3px; padding: 0 12px; } .tr-keys span { margin-right: 3px; } .tr kbd { min-width: 18px; padding: 1px 4px; }
  .tr-code > header .tr-lab { letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tr-pipe span { letter-spacing: 0; }
  .tr-req { padding-left: 16px; padding-right: 16px; } .tr-pipew, .tr-codes { padding-left: 16px; padding-right: 16px; }
  .tr-wf { padding: 0 16px; } .tr-rowsw { margin: 0 -16px; padding: 0 16px; }
  .tr-badge { min-width: 170px; letter-spacing: .04em; }
}
/* short screens (1366 x 768): the same layout, a little tighter; long content scrolls inside its own panel */
@media (max-height: 820px) and (min-width: 1100px) {
  .tr { grid-template-rows: 48px minmax(0, 1fr); }
  .tr-body { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .tr-req { padding-top: 12px; padding-bottom: 6px; } .tr-req__t { margin-top: 6px; }
  .tr-pipew { padding-bottom: 8px; }
  .tr-codes { height: 76px; padding-bottom: 10px; }
  .tr-foot { min-height: 38px; }
  .tr-card__h { height: 36px; }
  .tr-kv__r { height: 24px; } .tr-tam { height: 34px; padding: 2px 16px 6px; } .tr-none { height: 120px; }
  .tr-vrows { padding-top: 4px; } .tr-vrows li { height: 26px; } .tr-vbadge { height: 34px; margin-top: 6px; } .tr-vnote { height: 2.9em; margin: 6px 16px 8px; }
  .tr-acts, .tr-acts--v { padding-top: 6px; } .tr .tr-pill--s { height: 30px; min-height: 30px; }
  .tr-side { gap: 10px; }
  .tr-find { padding-top: 8px; gap: 8px; }
}
/* ---- below 1240: two columns; the scenario list becomes a window opened by a click on the selector */
@media (max-width: 1239px) {
  .tr-body { grid-template-columns: minmax(0, 1fr) 340px; }
  .tr-lst { display: none; }
  .tr-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; width: 100%; height: 48px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--text); text-align: left; cursor: pointer; border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .tr-pick small { display: block; font-size: var(--text-small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); line-height: 1.2; }
  .tr-pick b { display: block; font-size: var(--text-body-size); font-weight: 500; line-height: 1.3; }
  .tr-pick svg { color: var(--text-dim); }
  .tr[data-sheet="open"] .tr-lst { display: flex; position: fixed; z-index: 70; left: 16px; top: calc(var(--header-h) + 64px); bottom: 16px; width: min(380px, calc(100vw - 32px)); background: #0b0d13; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .85); }
  .tr[data-sheet="open"] .tr-sheet-bg { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(3, 4, 6, .66); }
  .tr-badge { min-width: 170px; }
}
/* ---- below 800: one column, the page scrolls (mobile only); each card keeps its own content inside */
@media (max-width: 799px) {
  body.tr-page { height: auto; min-height: 100dvh; overflow: visible; overscroll-behavior: auto; }
  body.tr-page > main { overflow: visible; }
  .tr { height: auto; grid-template-rows: auto auto; }
  .tr-top { flex-wrap: wrap; padding: 10px 16px; row-gap: 8px; }
  .tr-top__l { flex-wrap: wrap; row-gap: 8px; }
  .tr-top__r { margin-left: auto; }
  .tr .tr-pill kbd { display: none; }
  .tr-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 24px; }
  .tr-main { min-height: 0; }
  .tr-req { flex-direction: column; gap: 12px; padding: 14px 16px 8px; }
  .tr-req__r { width: 100%; justify-content: space-between; align-items: center; }
  .tr-total { text-align: left; } .tr-badge { min-width: 0; margin-top: 0; letter-spacing: .08em; padding: 0 12px; }
  .tr-wf { flex: none; padding: 0 12px; } .tr-rowsw { overflow: visible; margin: 0 -12px; padding: 0 12px 4px; flex: none; }
  .tr-ruler { display: none; }
  .tr-row__h { height: auto; grid-template-columns: 24px minmax(0, 1fr) 18px 64px; grid-template-areas: "n t s d" ". l l l"; row-gap: 6px; padding: 8px 6px 10px; }
  .tr-num { grid-area: n; } .tr-name { grid-area: t; white-space: normal; } .tr-st { grid-area: s; } .tr-dur { grid-area: d; } .tr-lane { grid-area: l; height: 14px; }
  .tr-checks { padding-left: 14px; max-height: none; }
  .tr-wf { padding-bottom: 112px; } .tr-cta-w { bottom: 20px; }
  .tr-rows:not(.is-playing) .tr-row[data-s="idle"] { min-height: 62px; }
  .tr-codes { grid-template-columns: minmax(0, 1fr); height: auto; padding: 2px 12px 12px; }
  .tr-code { height: 148px; }
  .tr-pipew, .tr-note { padding-left: 12px; padding-right: 12px; } .tr-note { padding-left: 0; padding-right: 0; }
  .tr-foot { flex-wrap: wrap; padding: 8px 12px; row-gap: 4px; }
  .tr-side { gap: 14px; }
  .tr-au { flex: none; min-height: 0; } .tr-aud__b { flex: none; max-height: 260px; }
  .tr-kv__r { grid-template-columns: 76px minmax(0, 1fr); }
  .tr-acts { flex-wrap: wrap; }
  .tr-pick { padding: 0 16px; }
  .tr[data-sheet="open"] .tr-lst { left: 12px; top: 72px; width: calc(100vw - 24px); }
  .tr-pipe span { font-size: var(--text-small-size); }
}
@media (max-width: 480px) { .tr-pipe span { visibility: hidden; height: 0; margin: 0; } .tr-pipew { padding-bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .tr *, .tr *::before, .tr *::after { transition: none !important; animation: none !important; } }