/* TraceViewer -- self-contained dark panel, so it looks the same on a light or dark blog theme. */
.tv {
  --tv-bg: #11151a; --tv-bg2: #181e25; --tv-line: #2a333d; --tv-text: #dbe3ec; --tv-muted: #8b98a7;
  --tv-green: #66ff66; --tv-accent: #4ea1ff;
  position: relative; margin: 1.5rem 0; background: var(--tv-bg); color: var(--tv-text);
  border: 1px solid var(--tv-line); border-radius: 10px; overflow: hidden;
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tv.tv-drag { outline: 2px dashed var(--tv-accent); outline-offset: -4px; }
.tv * { box-sizing: border-box; }

.tv-toolbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 10px; background: var(--tv-bg2); border-bottom: 1px solid var(--tv-line); }
.tv-group { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tv-btn, .tv-select, .tv-chip {
  font: inherit; color: var(--tv-text); background: #222a33; border: 1px solid #364250; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; line-height: 1.3;
}
.tv-btn:hover, .tv-chip:hover, .tv-select:hover { background: #2c3641; }
.tv-btn:focus-visible, .tv-chip:focus-visible, .tv-select:focus-visible, .tv-main:focus-visible, .tv-list:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 1px; }
.tv-chip { display: inline-flex; align-items: center; gap: 6px; }
.tv-chip i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.tv-chip[aria-pressed="false"] { opacity: .45; }
.tv-chip[aria-pressed="false"] i { background: transparent !important; outline: 1px solid var(--tv-muted); }
.tv-check input { margin: 0; }
.tv-select { max-width: 260px; }

.tv-stage { position: relative; background: #000; }
.tv-main { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; outline-offset: -2px; }
.tv-overview { display: block; width: 100%; background: #000; border-top: 1px solid var(--tv-line); cursor: grab; touch-action: none; }
.tv-overview:active { cursor: grabbing; }

.tv-tip {
  position: absolute; left: 0; top: 0; z-index: 3; max-width: min(470px, 90%); pointer-events: none;
  background: rgba(10, 13, 17, .95); border: 1px solid #435061; border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.tv-tip[hidden], .tv-busy[hidden] { display: none; }
.tv-tip-h { font-weight: 650; margin-bottom: 2px; }
.tv-tip-hex { font: 12px ui-monospace, Consolas, monospace; color: #fff; word-break: break-all; }
.tv-tip-hex span { color: var(--tv-muted); }
.tv-tip-note { white-space: pre-wrap; color: #bdc9d6; margin-top: 4px; font-size: 12px; }
.tv-tip-s { margin-top: 6px; padding-top: 5px; border-top: 1px solid #2d3743; color: var(--tv-green); font: 11px ui-monospace, Consolas, monospace; }

.tv-hint { position: absolute; right: 10px; top: 78px; z-index: 2; pointer-events: none; font-size: 11px; color: #cfd8e2; background: rgba(0, 0, 0, .65); padding: 3px 8px; border-radius: 10px; transition: opacity .3s; }
.tv-hint-off { opacity: 0; }
.tv-busy { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: rgba(0, 0, 0, .8); color: var(--tv-green); font-size: 14px; }

.tv-detail { padding: 10px 12px; border-top: 1px solid var(--tv-line); min-height: 64px; }
.tv-muted, .tv-dim { color: var(--tv-muted); }
.tv-d-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 6px; }
.tv-d-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; margin-top: 3px; }
.tv-d-row > span { color: var(--tv-muted); }
.tv-d-row code { font: 12px ui-monospace, Consolas, monospace; word-break: break-all; color: #fff; }
.tv-d-dec { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #9ff29f; }
.tv-q { color: #ff6b6b; }
.tv-dir { display: inline-block; min-width: 38px; text-align: center; padding: 0 6px; border-radius: 4px; font-weight: 700; font-size: 11px; }

.tv-list { max-height: 320px; overflow: auto; border-top: 1px solid var(--tv-line); }
.tv-list table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tv-list th { position: sticky; top: 0; background: var(--tv-bg2); text-align: left; font-weight: 600; color: var(--tv-muted); padding: 5px 8px; border-bottom: 1px solid var(--tv-line); z-index: 1; }
.tv-list td { padding: 4px 8px; border-bottom: 1px solid #1d242c; vertical-align: top; }
.tv-list tr[data-i] { cursor: pointer; }
.tv-list tr[data-i]:hover td { background: #1c242d; }
.tv-list tr.tv-sel td { background: #223245; }
.tv-list td.tv-n, .tv-list td.tv-g, .tv-list td.tv-b { color: var(--tv-muted); text-align: right; white-space: nowrap; }
.tv-list td.tv-t { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; }
.tv-list td.tv-t small { display: block; color: var(--tv-muted); font-family: inherit; }
.tv-hexc { font-family: ui-monospace, Consolas, monospace; word-break: break-all; min-width: 90px; }
.tv-dec { color: #9ff29f; font-family: ui-monospace, Consolas, monospace; margin-top: 2px; }

@media (max-width: 640px) {
  .tv-list td.tv-g, .tv-list th:nth-child(3), .tv-list td.tv-b, .tv-list th:nth-child(5) { display: none; }
  .tv-select { max-width: 100%; }
}

/* Scrollable table with a pinned header, used for the long decoded-message tables in posts */
.table-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--tv-line, #28313b); margin: 20px 0; }
.table-scroll table { margin: 0; }
.table-scroll th { position: sticky; top: 0; z-index: 1; background: var(--main-bg, #1b1b1e); box-shadow: 0 1px 0 var(--tb-border-color, #ddd); }

/* Chirpy wraps every table in .table-wrapper (overflow-x: auto), which would stop the pinned header working */
.table-scroll .table-wrapper { overflow: visible; margin-bottom: 0; }

/* Let long text cells wrap instead of forcing sideways scrolling: add {: .wrap-cells } after a Markdown table */
.table-wrapper > table.wrap-cells td { white-space: normal; }

/* Centre a Markdown table at the same 700px width as the figures above it: add {: .center-table } after the table */
.table-wrapper > table.center-table { width: min(700px, 100%); margin-left: auto; margin-right: auto; }