/* Issues, issue detail and releases (2026-10-09) — shared by the app's Error log and the Management console.
   Global (not scoped) because the three components nest; every class is prefixed iv-/idv-/rv-. Tokens only. */
.iv { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.iv-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.iv-filters label { display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; color: var(--ty-color-text-muted); }
.iv-filters select { padding: .3rem .45rem; border: 1px solid var(--ty-color-border-strong); border-radius: var(--ty-radius-control, .35rem); background: var(--ty-color-surface); color: var(--ty-color-text); }
.iv-search { flex: 1 1 22rem; min-width: 14rem; }
.iv-count { margin: 0; color: var(--ty-color-text-muted); font-size: var(--ty-font-sm, .875rem); }
.iv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.iv-item { border: 1px solid var(--ty-color-border); border-radius: var(--ty-radius-card, .5rem); background: var(--ty-color-surface); min-width: 0; }
.iv-item.is-open { border-color: var(--ty-color-border-strong); }
.iv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; gap: .75rem; align-items: center; width: 100%; padding: .55rem .75rem; background: none; border: 0; text-align: left; color: inherit; }
.iv-row:focus-visible { outline: none; box-shadow: var(--ty-focus-ring); border-radius: var(--ty-radius-card, .5rem); }
.iv-main { display: flex; flex-direction: column; min-width: 0; }
.iv-title { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.iv-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ty-color-text-muted); }
.iv-meta { font-size: .78rem; color: var(--ty-color-text-subtle); display: flex; flex-wrap: wrap; gap: .25rem; }
.iv-num { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; min-width: 3.5rem; }
.iv-num small, .iv-when small { font-size: .72rem; color: var(--ty-color-text-muted); }
.iv-when { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; min-width: 4.5rem; }
.iv-lvl { font-size: .7rem; font-weight: var(--ty-weight-semibold, 600); text-transform: uppercase; padding: .1rem .4rem; border-radius: var(--ty-radius-control, .35rem); background: var(--ty-color-surface-3); }
.iv-lvl--error, .iv-lvl--critical { background: var(--ty-color-danger-soft); color: var(--ty-color-danger-ink); }
.iv-lvl--warning { background: var(--ty-color-warning-soft); color: var(--ty-color-warning-ink); }
.iv-badge { display: inline-flex; gap: .2rem; align-items: center; font-size: .72rem; padding: .05rem .45rem; border-radius: var(--ty-radius-pill, 999px); background: var(--ty-color-surface-2); border: 1px solid var(--ty-color-border); color: var(--ty-color-text); }
.iv-badge--regressed { background: var(--ty-color-danger-soft); color: var(--ty-color-danger-ink); border-color: transparent; }
.iv-badge--open { background: var(--ty-color-primary-soft); color: var(--ty-color-primary-ink); border-color: transparent; }
@media (max-width: 760px) {
    .iv-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .iv-spark, .iv-when { display: none; }
}

.idv { padding: 0 .75rem .9rem; border-top: 1px solid var(--ty-color-border); min-width: 0; }
.idv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: center; padding: .6rem 0; }
.idv-state { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.idv-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.idv-ignore { width: auto; }
.idv-flash { margin: 0 0 .5rem; padding: .35rem .6rem; border-radius: var(--ty-radius-control, .35rem); background: var(--ty-color-primary-soft); color: var(--ty-color-primary-ink); font-size: var(--ty-font-sm, .875rem); }
.idv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem 1rem; margin: 0 0 .5rem; }
.idv-stats dt { font-size: .75rem; color: var(--ty-color-text-muted); font-weight: var(--ty-weight-medium, 500); }
.idv-stats dd { margin: 0; overflow-wrap: anywhere; }
.idv-trend { margin: .25rem 0 .5rem; }
.idv-h { font-size: .95rem; margin: .9rem 0 .4rem; }
.idv-breakdown { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem 1.25rem; }
.idv-tag-key { font-size: .75rem; font-weight: var(--ty-weight-semibold, 600); text-transform: uppercase; color: var(--ty-color-text-muted); margin-bottom: .15rem; }
.idv-bar { display: grid; grid-template-columns: minmax(0, 7rem) 1fr 2.5rem; gap: .4rem; align-items: center; font-size: .8rem; padding: .05rem 0; }
.idv-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idv-bar-track { height: 8px; background: var(--ty-color-surface-3); border-radius: 4px; overflow: hidden; }
.idv-bar-fill { display: block; height: 100%; background: var(--ty-color-primary); border-radius: 4px; min-width: 2px; }
.idv-bar-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ty-color-text-muted); }
.idv-feedback { margin: 0; padding-left: 1.1rem; }
.idv-feedback li { margin: .2rem 0; overflow-wrap: anywhere; }
.idv-events { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: .9rem; }
.idv-event-list { list-style: none; padding: 0; margin: 0; max-height: 26rem; overflow: auto; }
.idv-event { min-width: 0; border: 1px solid var(--ty-color-border); border-radius: var(--ty-radius-card, .5rem); padding: .6rem; background: var(--ty-color-surface); }
@media (max-width: 860px) { .idv-events { grid-template-columns: 1fr; } }

.rv-table { font-size: var(--ty-font-sm, .875rem); }
.rv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.el-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--ty-color-border); margin: 1rem 0; flex-wrap: wrap; }
.el-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem .9rem; color: var(--ty-color-text-muted); font-weight: var(--ty-weight-medium, 500); }
.el-tab.on { color: var(--ty-color-text); border-bottom-color: var(--ty-color-primary); }
.el-tab:focus-visible { outline: none; box-shadow: var(--ty-focus-ring); }
/* Forms shared by the alert rules and the console's settings. */
.el-card { border: 1px solid var(--ty-color-border); border-radius: var(--ty-radius-card, .5rem); background: var(--ty-color-surface); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.el-card h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
.el-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem 1rem; margin-bottom: .75rem; }
.el-grid--wide { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
.el-field { display: flex; flex-direction: column; gap: .2rem; font-size: var(--ty-font-sm, .875rem); font-weight: var(--ty-weight-medium, 500); min-width: 0; }
.el-field small { font-weight: normal; color: var(--ty-color-text-muted); }
.el-field select, .el-field input, .el-field textarea { padding: .3rem .45rem; border: 1px solid var(--ty-color-border-strong); border-radius: var(--ty-radius-control, .35rem); background: var(--ty-color-surface); color: var(--ty-color-text); }
.el-check { flex-direction: row; align-items: center; gap: .4rem; }
.el-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.arv { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.arv-bar { display: flex; gap: .5rem; }
.arv-secret { padding: .5rem .75rem; border-radius: var(--ty-radius-control, .35rem); background: var(--ty-color-warning-soft); color: var(--ty-color-warning-ink); overflow-wrap: anywhere; }
/* Observability charts: categorical slots 1 and 2 of the validated palette, light and dark (dataviz reference palette). */
:root { --cl-viz-1: #2a78d6; --cl-viz-2: #eb6834; --cl-viz-grid: rgba(0,0,0,.08); }
:root[data-bs-theme="dark"] { --cl-viz-1: #3987e5; --cl-viz-2: #d95926; --cl-viz-grid: rgba(255,255,255,.1); }
@media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]):not([data-theme]) { --cl-viz-1: #3987e5; --cl-viz-2: #d95926; --cl-viz-grid: rgba(255,255,255,.1); } }
.tc { margin: 0; border: 1px solid var(--ty-color-border); border-radius: var(--ty-radius-card, .5rem); background: var(--ty-color-surface); padding: .6rem .75rem; min-width: 0; }
.tc-title { display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline; font-weight: var(--ty-weight-semibold, 600); font-size: .9rem; margin-bottom: .25rem; }
.tc-legend { display: inline-flex; gap: .75rem; font-weight: normal; font-size: .8rem; color: var(--ty-color-text-muted); }
.tc-swatch { display: inline-block; width: .7rem; height: .2rem; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }
.tc-toggle { margin-left: auto; font-size: .8rem; }
.tc-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tc-grid { stroke: var(--cl-viz-grid); stroke-width: 1; }
.tc-axis { fill: var(--ty-color-text-muted); font-size: 10px; }
.tc-direct { fill: var(--ty-color-text); font-size: 10px; }
.tc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tc-dot { stroke: var(--ty-color-surface); stroke-width: 2; }
.tc-dot:hover { r: 6; }
.tc-s1 { stroke: var(--cl-viz-1); } .tc-dot.tc-s1, .tc-bar.tc-s1, .tc-swatch.tc-s1 { fill: var(--cl-viz-1); background: var(--cl-viz-1); }
.tc-s2 { stroke: var(--cl-viz-2); } .tc-dot.tc-s2, .tc-swatch.tc-s2 { fill: var(--cl-viz-2); background: var(--cl-viz-2); }
.tc-line.tc-s1, .tc-line.tc-s2 { fill: none; }
.tc-empty { margin: .5rem 0; }
.tc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pv { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.pv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; }
.pv-tile { border: 1px solid var(--ty-color-border); border-radius: var(--ty-radius-card, .5rem); padding: .6rem .75rem; background: var(--ty-color-surface); }
.pv-tile dt { font-size: .75rem; color: var(--ty-color-text-muted); font-weight: var(--ty-weight-medium, 500); }
.pv-tile dd { margin: .1rem 0 0; font-size: 1.35rem; font-weight: var(--ty-weight-semibold, 600); font-variant-numeric: tabular-nums; }
.pv-tile small { font-size: .72rem; font-weight: normal; }
.pv-rate { display: inline-flex; gap: .25rem; align-items: center; font-size: .72rem; padding: .05rem .4rem; border-radius: var(--ty-radius-pill, 999px); }
.pv-rate--good { background: var(--ty-color-success-soft); color: var(--ty-color-success-ink); }
.pv-rate--needs-improvement { background: var(--ty-color-warning-soft); color: var(--ty-color-warning-ink); }
.pv-rate--poor { background: var(--ty-color-danger-soft); color: var(--ty-color-danger-ink); }
.pv-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: .75rem; }
.pv-waterfall { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; }
.pv-wf-row { display: grid; grid-template-columns: minmax(10rem, 22rem) 1fr 4.5rem; gap: .5rem; align-items: center; }
.pv-wf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-wf-track { position: relative; height: 12px; background: var(--ty-color-surface-2); border-radius: 3px; }
.pv-wf-bar { position: absolute; top: 0; height: 100%; background: var(--cl-viz-1); border-radius: 3px; min-width: 2px; }
.pv-wf-bar.is-error { background: var(--ty-color-danger); }
.pv-wf-ms { text-align: right; font-variant-numeric: tabular-nums; color: var(--ty-color-text-muted); }

/* Sessions + replay (2026-10-10) */
.sv { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.sv-check { display: inline-flex; gap: .35rem; align-items: center; }
.sv-table td { vertical-align: middle; }
.sv-status { font-size: .74rem; padding: .05rem .45rem; border-radius: var(--ty-radius-pill, 999px); background: var(--ty-color-surface-2); color: var(--ty-color-text-muted); white-space: nowrap; }
.sv-status--crashed { background: var(--ty-color-danger-soft); color: var(--ty-color-danger-ink); }
.sv-status--errored, .sv-status--abnormal { background: var(--ty-color-warning-soft); color: var(--ty-color-warning-ink); }
.sv-status--exited { background: var(--ty-color-success-soft); color: var(--ty-color-success-ink); }
.sv-replay-icon { color: var(--ty-color-primary); margin-right: .4rem; }
.sv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem .9rem; margin: 0; }
.sv-facts dt { font-size: .75rem; color: var(--ty-color-text-muted); font-weight: var(--ty-weight-medium, 500); }
.sv-facts dd { margin: 0; overflow-wrap: anywhere; }
.sv-timeline { list-style: none; margin: 0; padding: 0 0 0 .25rem; border-left: 2px solid var(--ty-color-border); display: flex; flex-direction: column; gap: .3rem; }
.sv-t { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; padding-left: .6rem; font-size: .86rem; min-width: 0; }
.sv-t-at { font-variant-numeric: tabular-nums; color: var(--ty-color-text-muted); min-width: 3.2rem; }
.sv-t-label { overflow-wrap: anywhere; min-width: 0; }
.sv-t--error i, .sv-t--crash i { color: var(--ty-color-danger); }
.sv-t--warning i { color: var(--ty-color-warning); }
.sv-t--feedback i, .sv-t--replay i { color: var(--ty-color-primary); }
.sv-event { border: 1px solid var(--ty-color-border); border-radius: var(--ty-radius-card, .5rem); padding: .75rem; }
.sv-replay-host { min-width: 0; }
.rp { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.rp-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rp-speed { width: auto; }
.rp-time { font-variant-numeric: tabular-nums; color: var(--ty-color-text-muted); font-size: .85rem; }
.rp-path { font-size: .8rem; overflow-wrap: anywhere; }
.rp-track { position: relative; height: 10px; border-radius: 5px; background: var(--ty-color-surface-2); cursor: pointer; }
.rp-fill { position: absolute; inset: 0 auto 0 0; background: var(--ty-color-primary); border-radius: 5px; opacity: .55; }
.rp-mark { position: absolute; top: -2px; width: 2px; height: 14px; background: var(--ty-color-text-muted); }
.rp-mark--click { background: var(--ty-color-warning); }
.rp-stage { position: relative; overflow: hidden; border: 1px solid var(--ty-color-border); border-radius: var(--ty-radius-card, .5rem); background: #fff; }
.rp-frame { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.rp-frame iframe { border: 0; display: block; background: #fff; pointer-events: none; }
.rp-cursor { position: absolute; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(220, 53, 69, .55); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); opacity: 0; transition: transform .1s linear; pointer-events: none; }
.rp-ripple { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 3px solid rgba(220, 53, 69, .8); animation: rp-ripple .6s ease-out forwards; pointer-events: none; }
@keyframes rp-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-ripple { animation: none; opacity: .6; } .rp-cursor { transition: none; } }
.rp-empty { color: var(--ty-color-text-muted); }

/* Overview + monitors (2026-10-10) */
.ov, .mv { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.mv-runs { display: inline-flex; gap: 2px; align-items: flex-end; flex-wrap: wrap; max-width: 16rem; }
.mv-run { display: inline-block; width: 4px; height: 14px; border-radius: 2px; }
.mv-run--ok { background: var(--ty-color-success); }
.mv-run--bad { background: var(--ty-color-danger); }
.mv-state { font-size: .74rem; padding: .05rem .45rem; border-radius: var(--ty-radius-pill, 999px); background: var(--ty-color-surface-2); color: var(--ty-color-text-muted); white-space: nowrap; }
.mv-state--ok { background: var(--ty-color-success-soft); color: var(--ty-color-success-ink); }
.mv-state--failing { background: var(--ty-color-danger-soft); color: var(--ty-color-danger-ink); }
.mv-state--missed { background: var(--ty-color-warning-soft); color: var(--ty-color-warning-ink); }
.mv-add { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.mv-add label { display: flex; flex-direction: column; font-size: .8rem; gap: .2rem; min-width: 0; }
.mv-add input[type=url] { min-width: min(22rem, 100%); }

/* Issue collaboration, deploys (2026-10-10) */
.tc-marker { stroke: var(--ty-color-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tc-marker-label { fill: var(--ty-color-text-muted); font-size: 9px; }
.iv-saved, .iv-merge { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; font-size: .85rem; }
.iv-saved label, .iv-merge label { display: inline-flex; gap: .35rem; align-items: center; }
.iv-merge { padding: .45rem .7rem; border: 1px solid var(--ty-color-border); border-radius: var(--ty-radius-card, .5rem); background: var(--ty-color-surface-2); }
.iv-spacer { flex: 1 1 auto; }
.iv-short { width: 8.5rem; display: inline-block; }
.iv-check { display: inline-flex; gap: .3rem; align-items: center; }
.iv-rowwrap { display: flex; align-items: stretch; gap: .4rem; min-width: 0; }
.iv-rowwrap > .iv-row { flex: 1 1 auto; min-width: 0; }
.iv-select { margin: .9rem 0 0 .2rem; flex: 0 0 auto; }
.idv-merged, .erd-related { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.erd-related li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; min-width: 0; }
.idv-notes { display: flex; flex-direction: column; gap: .5rem; }
.idv-note { border-left: 3px solid var(--ty-color-border); padding: .2rem .6rem; }
.idv-note-head { font-size: .8rem; }
.idv-note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.idv-note-add { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; max-width: 40rem; }
.ov-split { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .75rem; }