/* TopX Terminal — reference stylesheet for the spec.
   One layer, token-driven: no !important, no raw hex. Class prefix tx-.
   Blue appears solid in exactly two places: the current primary tab and a primary button. */
.tx, .tx * { box-sizing: border-box; }
.tx { font: 400 12px/16px var(--font-sans); color: var(--fg); background: var(--bg); padding: 8px; }
.tx .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tx .pos { color: var(--green); }
.tx .neg { color: var(--red); }
.tx .warn { color: var(--amber); }
.tx .dim { color: var(--dim); }
.tx .faint { color: var(--faint); }
.tx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--surface-gap); }

/* Button */
.tx-btn { height: var(--control-height); padding: 0 var(--control-x); border: 1px solid var(--control-border);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--fg); font: 600 12px/1 var(--font-sans);
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tx-btn:hover { background: var(--hover); }
.tx-btn:focus-visible, .tx-seg button:focus-visible, .tx-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tx-btn:disabled { opacity: .5; cursor: default; }
.tx-btn.primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.tx-btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.tx-btn.danger { background: var(--red-soft); border-color: var(--red); color: var(--red-ink); }
.tx-btn.ghost { border-color: transparent; background: transparent; color: var(--accent-ink); }

/* Segmented control: one group = one bordered strip; selected = soft tint, not solid blue */
.tx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--group-gap);
  padding: 2px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tx-group { display: inline-flex; align-items: center; gap: 4px; }
.tx-group > label { color: var(--dim); }
.tx-seg { display: inline-flex; border: 1px solid var(--control-border); border-radius: var(--radius-sm); overflow: hidden; }
.tx-seg button { height: calc(var(--control-height) - 2px); padding: 0 var(--control-x); border: 0; border-left: 1px solid var(--line);
  background: var(--panel); color: var(--fg); font: 400 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.tx-seg button:first-child { border-left: 0; }
.tx-seg button:hover { background: var(--hover); }
.tx-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.tx-fixed { color: var(--dim); font-family: var(--font-mono); }

/* Top bar + primary nav */
.tx-top { display: flex; align-items: center; gap: 6px; height: var(--topbar-height); padding: 0 var(--block-pad);
  background: var(--panel); border-bottom: 1px solid var(--line); }
.tx-brand { display: inline-flex; align-items: center; gap: 5px; font: 700 15px/1 var(--font-sans); color: var(--fg); letter-spacing: -.5px; margin-right: 4px; }
.tx-brand img { width: 18px; height: 18px; border-radius: var(--radius-sm); display: block; }
.tx-nav { display: flex; gap: 2px; }
.tx-nav button { height: var(--control-height); padding: 0 6px; border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--fg); font: 600 12px/1 var(--font-sans); cursor: pointer; }
.tx-nav button:hover { background: var(--hover); }
.tx-nav button[aria-selected="true"] { background: var(--blue); color: var(--on-blue); }
.tx-top .tx-aside { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.tx-status { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 1px var(--block-pad);
  background: var(--status-bg); border-bottom: 1px solid var(--line); color: var(--dim); }

/* Status badge: word first, colour second; one line, never wraps */
.tx-badge { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel-2); color: var(--fg); font: 600 12px/1 var(--font-sans); white-space: nowrap; }
.tx-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tx-badge.ok { background: var(--green-soft); border-color: var(--green); color: var(--green-ink); }
.tx-badge.warn { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-ink); }
.tx-badge.bad { background: var(--red-soft); border-color: var(--red); color: var(--red-ink); }

/* KPI strip: label small and dim above, value larger mono below */
.tx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tx-kpi { padding: 3px var(--block-pad) 4px; border-left: 1px solid var(--line-soft); min-width: 0; }
.tx-kpi:first-child { border-left: 0; }
.tx-kpi .l { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-kpi .v { font: 650 14px/18px var(--font-mono); font-variant-numeric: tabular-nums; }
.tx-kpi.hero .v { font-size: 20px; line-height: 24px; }
.tx-kpi.alert { background: var(--red-soft); }
.tx-kpi.alert .v { color: var(--red); }

/* Data table */
.tx-block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tx-blockhead { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 2px var(--block-pad); }
.tx-blockhead h2 { margin: 0; font: 650 13px/18px var(--font-sans); color: var(--heading); }
.tx-scroll { overflow-x: auto; }
.tx-table { border-collapse: collapse; width: 100%; white-space: nowrap; }
.tx-table th { height: var(--control-height); padding: var(--cell-y) var(--cell-x); background: var(--head-bg); color: var(--head-ink);
  font-weight: 650; text-align: right; border-bottom: 1px solid var(--line); }
.tx-table td { padding: var(--cell-y) var(--cell-x); text-align: right; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tx-table th:first-child, .tx-table td:first-child { text-align: left; font-family: var(--font-sans); font-weight: 600;
  position: sticky; left: 0; background: var(--panel); }
.tx-table th:first-child { background: var(--head-bg); }
.tx-table tbody tr:nth-child(even) td { background: var(--zebra); }
.tx-table tbody tr:hover td { background: var(--hover); }
.tx-table td.state { text-align: left; font-family: var(--font-sans); }
.tx-table td.empty { text-align: left; color: var(--dim); font-family: var(--font-sans); }

/* Series legend: swatch + name + value; each series owns its token */
.tx-legend { display: flex; flex-wrap: wrap; gap: 3px; }
.tx-legend button { height: var(--control-height); display: inline-flex; align-items: center; gap: 5px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--fg); font: 600 12px/1 var(--font-sans); cursor: pointer; }
.tx-legend button[aria-pressed="false"] { opacity: .45; }
.tx-legend i { width: 14px; height: 3px; background: var(--c); border-radius: 1px; }
.tx-legend b { font: 650 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; }

/* Alert banner: the one place red fills a band */
.tx-alert { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px var(--block-pad);
  border: 1px solid var(--red); background: var(--red-soft); color: var(--red-ink); font-weight: 650; }
.tx-alert.warn { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-ink); }
.tx-alert .num { font-weight: 650; }
.tx-alert .tx-btn { margin-left: auto; }

/* Secondary tabs (object detail, live sections): text tabs, selected = soft tint */
.tx-subtabs { display: flex; flex-wrap: wrap; gap: 2px; }
.tx-subtabs button { height: var(--control-height); padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--dim); font: 600 12px/1 var(--font-sans); cursor: pointer; }
.tx-subtabs button:hover { background: var(--hover); color: var(--fg); }
.tx-subtabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }

/* Disclosure: the one home for methodology text; a one-line summary stays visible */
.tx-disclosure { border-top: 1px solid var(--line-soft); }
.tx-disclosure > summary { display: flex; align-items: center; gap: 6px; min-height: var(--control-height); padding: 0 var(--block-pad);
  color: var(--dim); cursor: pointer; list-style: none; }
.tx-disclosure > summary::-webkit-details-marker { display: none; }
.tx-disclosure > summary::before { content: "▸"; color: var(--faint); }
.tx-disclosure[open] > summary::before { content: "▾"; }
.tx-disclosure > summary b { color: var(--fg); font-weight: 600; }
.tx-disclosure .tx-dbody { padding: 2px var(--block-pad) 6px 18px; color: var(--dim); max-width: 880px; }
.tx-disclosure .tx-dbody p { margin: 0 0 4px; }

/* Chart panel */
.tx-chart { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tx-charttop { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 2px var(--block-pad); }
.tx-charttop h2 { margin: 0; font: 650 13px/18px var(--font-sans); color: var(--heading); }
.tx-unit { margin-left: auto; font: 400 11px/14px var(--font-mono); letter-spacing: .04em; color: var(--dim); }
.tx-chart svg { display: block; width: 100%; }
.tx-chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.tx-chart .zero { stroke: var(--control-border); stroke-width: 1; stroke-dasharray: 3 3; }
.tx-chart .axis { fill: var(--dim); font: 400 11px var(--font-mono); }
.tx-chart .ln { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.tx-chart .ln.sparse { stroke-dasharray: 4 3; }
.tx-readout { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 3px var(--block-pad); border-top: 1px solid var(--line-soft); color: var(--dim); }
.tx-readout b { font: 650 12px/16px var(--font-mono); color: var(--fg); }

/* Page grid for assembled workspaces */
.tx-page { display: grid; gap: var(--surface-gap); }
.tx-pagehead { display: flex; align-items: baseline; gap: 8px; padding: 2px 1px 0; }
.tx-pagehead h1 { margin: 0; font: 650 15px/20px var(--font-sans); color: var(--fg); }
.tx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--surface-gap); }
@media (max-width: 800px) { .tx-pair { grid-template-columns: 1fr; } }

/* Series swatch in table first column, legend line styles */
.tx .sw { display: inline-block; width: 10px; height: 3px; margin: 0 6px 3px 0; background: var(--c); border-radius: 1px; vertical-align: middle; }
.tx-legend i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.tx-legend.col { display: grid; grid-template-columns: 1fr; }
.tx-legend.col button { justify-content: flex-start; }
.tx-legend.col b { margin-left: auto; }

/* Section nav band under KPI strip */
.tx-panel-nav { padding: 2px 3px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* KPI strip, two-column phone layout */
.tx-kpis.two { grid-template-columns: 1fr 1fr; }
.tx-kpis.two .tx-kpi:nth-child(odd) { border-left: 0; }
.tx-kpis.two .tx-kpi:nth-child(n+3) { border-top: 1px solid var(--line-soft); }

/* Dangerous actions: one row per action, name + consequence + button */
.tx-danger { border-color: var(--red); }
.tx-danger .tx-blockhead h2 { color: var(--red-ink); }
.tx-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line-soft); }
.tx-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px var(--block-pad);
  border-right: 1px solid var(--line-soft); }
.tx-action > div { display: grid; gap: 1px; min-width: 0; }
.tx-action b { font-weight: 650; }

/* Phone top bar: two rows */
.tx-top.narrow { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 30px 26px; height: auto; row-gap: 0; padding-bottom: 2px; }
.tx-top.narrow .tx-nav { grid-column: 1 / -1; }
.tx-top.narrow .tx-aside { margin-left: 0; }
.tx-kpis.row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tx-kpis.row .tx-kpi.hero { min-width: 104px; }