/* The Max Pain & Put/Call panel (showcase/chapters/explorer/_levels.html, tx-levels.js), the "levels" tab of the
   Ticker Explorer & Options Flow chapter on /how-it-works/.
   One app window with two real pages, colours from their own CSS:
     Intraday Max Pain (intrinio_options/templates/intrinio/max_pain_realtime.html :12-261): topbar
       rgba(16,16,36,.97) with the #a78bfa / #6759d1 / #38bdf8 left bar, inputs rgba(102,126,234,.12), pills
       rgba(8,8,20,.85) with the O #a78bfa, P #38bdf8, V #4ade80 accents, chart card #1e1e38 to #252545 with
       the #6759d1 border and top bar, labels #c4b5fd, Call Max Pain #4BC0C0, Put Max Pain #FF6384, price #FFFF00.
     Put/Call Ratio (intrinio/put-call-ratio/put_call_ratio_intraday.html :11-124): header card #252540 to
       #2e2e50, PCR line #E24E4C above 1 / #4CD68F below 1, SMA rgba(105,137,197); the gauges from Ticker
       Explorer (static/intrinio_options/js/put_call_ratio.js :138-187): track #2c3e50, #00E396 / #FEB019 / #FF4560.
   The panel around the window uses landing.css tokens. Everything is txm-* and scoped under .txm so it beats
   landing.css's element reset. JS state classes on .txm: is-ready, is-nodata, is-still, is-paused, is-cur;
   on views and captions: is-new; on stages: is-tip, is-hover; on markers: is-on, is-dim; on the cursor:
   is-click; on the autoplay pill: is-idle, is-stopped; on controls: is-press; on the bar url: is-lit.
   Only transform and opacity animate in CSS; the charts are drawn by tx-levels.js. Reduced motion
   (landing.css section 13, plus .is-still) and the paused state stop it all. */

.txm {
  --txm-call: #4BC0C0; --txm-put: #FF6384; --txm-price: #ffff00;
  --txm-o: #a78bfa; --txm-p: #38bdf8; --txm-v: #4ade80;
  --txm-p1: #6759d1; --txm-p3: #c4b5fd; --txm-ice: #e0e0ff; --txm-muted: #94a3b8; --txm-dim: #8a86ad;
  --txm-bg: #15142b; --txm-canvas: rgba(8, 8, 20, .85);
  --txm-card: linear-gradient(145deg, #1e1e38 0%, #252545 100%);
  --txm-h: 700px;
  position: relative; min-width: 0;
}
html:not(.js) .txm-js, .txm-js, .txm.is-nodata .txm-js { display: none !important; }
.txm.is-ready:not(.is-nodata) .txm-views.txm-js { display: flex !important; }
.txm.is-ready:not(.is-nodata) .txm-cursor.txm-js { display: block !important; }
.txm.is-ready:not(.is-nodata) .txm-controls.txm-js { display: flex !important; }
.txm.is-ready:not(.is-nodata) .txm-poster { display: none; }

/* ---- panel head ---- */
.txm-head { max-width: 72ch; margin: 0 auto var(--lp-sp-5); text-align: center; }
.txm .txm-title { margin: 0; color: var(--lp-text); font: 700 var(--lp-fs-lg)/1.25 var(--lp-font-title); letter-spacing: -.01em; }
.txm .txm-lead { margin: var(--lp-sp-2) 0 0; color: var(--lp-muted); font-size: var(--lp-fs-base); line-height: 1.6; }

/* ---- the window ---- */
.txm-window {
  position: relative; overflow: hidden; min-width: 0;
  border: 1px solid var(--lp-border-strong); border-radius: 16px; background: var(--txm-bg); color: var(--txm-ice);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-primary) 10%, transparent);
  font: 400 13px/1.45 var(--lp-font);
}
.txm .txm-window p { margin: 0; }
.txm-bar {
  display: flex; align-items: flex-end; gap: 10px; height: 40px; padding: 0 14px;
  background: #0c0a17; border-bottom: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; overflow: hidden;
}
.txm-lights { display: inline-flex; gap: 6px; flex: none; align-self: center; }
.txm-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.txm-lights i + i { background: #febc2e; }
.txm-lights i + i + i { background: #28c840; }
.txm-btabs { display: flex; gap: 2px; flex: none; min-width: 0; }
.txm .txm-btab {
  height: 31px; padding: 0 12px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: #8e8ab4;
  font: 500 12px/1 var(--lp-font); cursor: pointer; white-space: nowrap; transition: background-color .2s var(--lp-ease), color .2s var(--lp-ease);
}
.txm .txm-btab b { color: inherit; font-weight: 800; letter-spacing: -.01em; }
.txm .txm-btab:disabled { cursor: default; }
.txm .txm-btab[aria-pressed="true"] { background: var(--txm-bg); color: #f4f2ff; }
.txm .txm-btab:not([aria-pressed="true"]):hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: #d8d4f5; }
.txm-bar-url {
  align-self: center; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-left: 6px; color: #8e8ab4;
  font: 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; transition: color .3s var(--lp-ease);
}
.txm-bar-url.is-lit { color: #e9e6ff; }

/* the app: a fixed height once the JS runs, so switching pages never moves the page */
.txm-app {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0 16px 14px;
  background: radial-gradient(900px 420px at 92% -10%, rgba(103, 89, 209, .14), transparent 60%), var(--txm-bg);
}
.txm.is-ready:not(.is-nodata) .txm-app { height: var(--txm-h); }

/* green page header, as on the member pages */
.txm-pghead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 -16px; padding: 11px 18px;
  background: linear-gradient(90deg, #5aae8c, #6dbf9d); color: #fff;
}
.txm .txm-pgname { color: #fff; font: 700 17px/1.25 var(--lp-font-title); letter-spacing: -.01em; }
.txm-pghead .lp-tier { --lp-tier-c: #fff3d6; background: rgba(12, 5, 32, .35); border-color: rgba(255, 255, 255, .45); }
.txm .txm-mark { margin-left: auto; color: #fff3d6; border-color: rgba(255, 243, 214, .7); background: rgba(12, 5, 32, .3); }

/* views */
.txm-views { flex: 1 1 auto; flex-direction: column; min-height: 0; }
.txm-view {
  display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; margin-right: -8px; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: #6759d1 rgba(103, 89, 209, .15);
}
.txm-view[hidden] { display: none; }
.txm-view.is-new { animation: txm-in .32s var(--lp-ease) both; }

/* ---- topbar (mp-topbar / pcr header card) ---- */
.txm-top {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex: none; padding: 10px 14px 10px 18px;
  border: 1px solid rgba(103, 89, 209, .3); border-radius: 14px; background: rgba(16, 16, 36, .97);
}
.txm-top::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #a78bfa, #6759d1, #38bdf8);
}
.txm-top--pcr { justify-content: space-between; border: 2px solid var(--txm-p1); background: linear-gradient(135deg, #252540 0%, #2e2e50 100%); box-shadow: 0 0 20px rgba(103, 89, 209, .2); }
.txm-top--pcr::before { display: none; }
.txm .txm-tkr { color: #fff; font: 900 26px/1 var(--lp-font); letter-spacing: -.01em; }
.txm .txm-tkr--sm { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.txm .txm-px {
  display: inline-flex; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(56, 189, 248, .35);
  background: rgba(56, 189, 248, .1); color: #38bdf8; font: 700 13px/1.3 var(--lp-font); font-variant-numeric: tabular-nums;
}
.txm-meta { min-width: 0; }
.txm .txm-eyebrow { color: var(--txm-p3); font: 800 10.5px/1.3 var(--lp-font); letter-spacing: 1.2px; text-transform: uppercase; }
.txm .txm-sub { color: var(--txm-muted); font-size: 12px; }
.txm .txm-sub--r { color: var(--txm-p3); text-align: right; }
.txm-asof { white-space: nowrap; }

/* ---- toolbar ---- */
.txm-tools {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; flex: none; padding: 9px 14px;
  border: 1px solid rgba(103, 89, 209, .22); border-radius: 12px; background: rgba(14, 14, 30, .95);
}
.txm-ctl { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.txm .txm-cl { color: var(--txm-dim); font: 700 9.5px/1.2 var(--lp-font); letter-spacing: .9px; text-transform: uppercase; }
.txm-selwrap { position: relative; display: inline-flex; }
.txm-selwrap::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; pointer-events: none;
  border-right: 2px solid #c9c5ea; border-bottom: 2px solid #c9c5ea; transform: rotate(45deg);
}
.txm .txm-select {
  appearance: none; -webkit-appearance: none; height: 32px; padding: 0 30px 0 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(102, 126, 234, .3); background: rgba(102, 126, 234, .12); color: #fff;
  font: 600 12.5px/1 var(--lp-font); font-variant-numeric: tabular-nums;
}
.txm .txm-select option { background: #1e1e38; color: #fff; }
.txm .txm-select.is-press { transform: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, .35); }
.txm-seg { display: inline-flex; gap: 0; padding: 2px; border-radius: 9px; border: 1px solid rgba(103, 89, 209, .35); background: rgba(103, 89, 209, .12); }
.txm .txm-segbtn {
  height: 26px; padding: 0 11px; border: 0; border-radius: 7px; background: none; color: #d4d4f8; cursor: pointer;
  font: 600 12px/1 var(--lp-font); white-space: nowrap; transition: background-color .2s var(--lp-ease), color .2s var(--lp-ease);
}
.txm .txm-segbtn:hover { background: rgba(169, 158, 245, .12); }
.txm .txm-segbtn[aria-pressed="true"] { background: var(--txm-p1); color: #fff; box-shadow: 0 0 0 1px #a78bfa, 0 0 10px rgba(103, 89, 209, .45); }
.txm .txm-segbtn--o[aria-pressed="true"] { background: #7c3aed; }
.txm .txm-segbtn--p[aria-pressed="true"] { background: #0284c7; box-shadow: 0 0 0 1px #38bdf8, 0 0 10px rgba(56, 189, 248, .35); }
.txm .txm-segbtn--v[aria-pressed="true"] { background: #16a34a; box-shadow: 0 0 0 1px #4ade80, 0 0 10px rgba(74, 222, 128, .3); }
.txm-fake {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; color: rgba(255, 255, 255, .85); font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(102, 126, 234, .3); background: rgba(102, 126, 234, .12);
}
.txm-fake--on { background: rgba(103, 89, 209, .55); border-color: #a78bfa; color: #fff; }

/* ---- stat pills ---- */
.txm-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex: none; margin: 0; }
.txm-pill {
  position: relative; overflow: hidden; min-width: 0; padding: 8px 10px 7px; border-radius: 12px;
  border: 1px solid rgba(103, 89, 209, .22); background: rgba(8, 8, 20, .85);
}
.txm-pill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #6759d1, #c4b5fd); }
.txm-pill--o::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.txm-pill--p::before { background: linear-gradient(90deg, #38bdf8, #0284c7); }
.txm-pill--v::before { background: linear-gradient(90deg, #4ade80, #16a34a); }
.txm .txm-pill dt { overflow: hidden; text-overflow: ellipsis; color: var(--txm-dim); font: 700 9px/1.3 var(--lp-font); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; }
.txm .txm-pill dd { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; color: #fff; font: 800 15px/1.2 var(--lp-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.txm .txm-pill--o dd { color: var(--txm-o); }
.txm .txm-pill--p dd { color: var(--txm-p); }
.txm .txm-pill--v dd { color: var(--txm-v); }
.txm .txm-c-info { color: #38bdf8; }
.txm .txm-c-call { color: #4ade80; }
.txm .txm-c-put { color: #f87171; }
.txm .txm-pill dd.is-new { animation: txm-pop .4s var(--lp-ease) both; }

/* ---- chart cards ---- */
.txm-card {
  position: relative; flex: none; min-width: 0; padding: 12px 12px 8px; overflow: hidden;
  border: 1px solid var(--txm-p1); border-radius: 16px; background: var(--txm-card); box-shadow: 0 0 20px rgba(103, 89, 209, .15);
}
.txm-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #6759d1, #c4b5fd, #6759d1);
}
.txm-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 4px; }
.txm .txm-card-t { color: var(--txm-p3); font: 800 11.5px/1.3 var(--lp-font); letter-spacing: 1px; text-transform: uppercase; }
.txm-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.txm-legend--l { margin: 2px 0 4px; }
.txm-lg { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); font-size: 11.5px; white-space: nowrap; }
.txm-sw { display: inline-block; width: 22px; height: 9px; border-radius: 2px; background: #4CD68F; }
.txm-sw--call { background: var(--txm-call); }
.txm-sw--put { background: var(--txm-put); }
.txm-sw--sma { background: rgb(105, 137, 197); }
.txm-stage { position: relative; height: 270px; outline: none; border-radius: 8px; background: var(--txm-canvas); touch-action: pan-y; }
.txm-stage--pcr { height: 236px; }
.txm-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--lp-accent); }
.txm-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.txm-svg text, .txm-psvg text { font-family: var(--lp-font); }
.txm .txm-tk { fill: rgba(255, 255, 255, .8); font-size: 10px; font-variant-numeric: tabular-nums; }
.txm .txm-wm { fill: rgba(211, 211, 211, .14); font-size: 15px; }
.txm .txm-plab { fill: var(--txm-price); font-size: 11px; font-weight: 700; }
.txm-col { fill: rgba(196, 181, 253, .13); opacity: 0; }
.txm-xhair { stroke: rgba(255, 255, 255, .5); stroke-width: 1; opacity: 0; }
.txm-dot { opacity: 0; }
.txm-stage.is-hover .txm-col, .txm-stage.is-hover .txm-xhair, .txm-stage.is-hover .txm-dot { opacity: 1; }

/* the three max pain markers */
.txm-mk { opacity: 0; transition: opacity .3s var(--lp-ease); }
.txm-mk.is-on { opacity: 1; }
.txm-mk.is-dim { opacity: .38; }
.txm-mk-in { transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.txm-mk:not(.is-on) .txm-mk-in { transform: translateY(-14px); }
.txm-mk-t { font-size: 10.5px; font-weight: 800; fill: #0c0a17; }

/* tooltip */
.txm-tip {
  position: absolute; top: 0; left: 0; z-index: 2; min-width: 160px; padding: 7px 10px; pointer-events: none;
  border: 1px solid rgba(169, 158, 245, .45); border-radius: 8px; background: rgba(20, 20, 40, .95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: rgba(224, 224, 255, .88); font: 500 11.5px/1.5 var(--lp-font);
  opacity: 0; transition: opacity .15s var(--lp-ease);
}
.txm-stage.is-tip .txm-tip { opacity: 1; }
.txm-tip b { display: block; margin-bottom: 2px; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.txm-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.txm-tip-row i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.txm-tip-row em { margin-left: auto; padding-left: 12px; color: #fff; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- gauges (Ticker Explorer's PUT/CALL RATIO card) ---- */
.txm-gauges {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: none; padding: 12px 10px 10px;
  border: 1px solid var(--txm-p1); border-radius: 16px; background: var(--txm-card);
}
.txm-gauge { min-width: 0; text-align: center; }
.txm .txm-gauge-t { color: #fff; font: 800 11.5px/1.3 var(--lp-font); letter-spacing: .8px; text-transform: uppercase; }
.txm-gsvg { display: block; width: 100%; max-width: 190px; height: auto; margin: 4px auto 0; }
.txm-gtrack, .txm-garc { fill: none; stroke-width: 18; }
.txm-gtrack { stroke: #2c3e50; }
.txm-garc { stroke: #00E396; stroke-dasharray: 0 400; }
.txm .txm-gval { fill: #fff; font: 800 26px/1 var(--lp-font); font-variant-numeric: tabular-nums; }
.txm .txm-gcap { margin-top: 2px; color: var(--txm-muted); font: 700 11.5px/1.3 var(--lp-font); transition: opacity .3s var(--lp-ease); }
.txm .txm-gcap--pos { color: #00E396; }
.txm .txm-gcap--neg { color: #FF4560; }
.txm .txm-gcap--neu { color: #FEB019; }

/* ---- poster (no JS, or no JSON) ---- */
.txm-poster { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.txm .txm-psec { color: var(--txm-p3); font: 700 11px/1.3 var(--lp-font); letter-spacing: 1px; text-transform: uppercase; }
.txm-pscroll { overflow-x: auto; border-radius: 8px; background: var(--txm-canvas); scrollbar-width: thin; scrollbar-color: #6759d1 rgba(103, 89, 209, .15); }
.txm-psvg { display: block; width: 100%; min-width: 560px; height: auto; }
.txm-psvg .txm-tk { font-size: 12px; }
.txm-poster .txm-gauges { padding: 10px 6px 8px; }

/* ---- captions under the app ---- */
.txm-caps { padding: 11px 16px 13px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(12, 10, 23, .6); }
.txm .txm-cap { min-height: 3em; color: rgba(224, 224, 255, .82); font-size: 13px; line-height: 1.55; }
.txm .txm-cap b { color: #fff; font-weight: 700; }
.txm .txm-cap.is-new { animation: txm-in .32s var(--lp-ease) both; }

/* ---- the demo cursor (autoplay only) ---- */
.txm-cursor {
  position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--lp-ease); will-change: transform;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.txm.is-cur .txm-cursor { opacity: 1; }
.txm-cursor svg { display: block; }
.txm-ripple {
  position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85); opacity: 0; transform: scale(.4);
}
.txm-cursor.is-click .txm-ripple { animation: txm-ripple .45s var(--lp-ease) both; }

/* ---- below the window: autoplay status, Replay, Pause ---- */
.txm-controls { flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lp-sp-2); margin-top: var(--lp-sp-4); }
.txm-auto {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 2px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-r-pill); background: var(--lp-surface-2);
  color: var(--lp-muted); font-size: var(--lp-fs-xs); font-weight: 600; white-space: nowrap;
}
.txm-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.txm-auto.is-idle .txm-auto-dot, .txm-auto.is-stopped .txm-auto-dot { background: var(--lp-amber); }
.txm-auto-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--lp-text) 10%, transparent); }
.txm-auto-bar i { display: block; height: 100%; background: var(--lp-primary); transform-origin: 0 50%; transform: scaleX(0); }
.txm-auto.is-idle .txm-auto-bar i, .txm-auto.is-stopped .txm-auto-bar i { background: var(--lp-amber); }
.txm-ico-play, .txm.is-paused .txm-ico-pause { display: none; }
.txm.is-paused .txm-ico-play { display: inline; }
.txm.is-ready.is-still .txm-controls.txm-js { display: none !important; }

/* ---- focus, press, motion ---- */
.txm :is(button, select, a, [tabindex]):focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.txm .txm-stage:focus-visible { outline: none; }
.txm .is-press { transform: scale(.94); transition: transform .12s var(--lp-ease); }
@keyframes txm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes txm-pop { 0% { opacity: .2; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
@keyframes txm-ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
.txm.is-paused *, .txm.is-paused *::before, .txm.is-paused *::after { animation-play-state: paused !important; }
.txm.is-still *, .txm.is-still *::before, .txm.is-still *::after { animation: none !important; transition: none !important; }

/* ---- narrower ---- */
@media (max-width: 999px) {
  .txm { --txm-h: 740px; }
  .txm-pills { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .txm .txm-pill dd { font-size: 13.5px; }
}
@media (max-width: 640px) {
  .txm { --txm-h: 640px; }
  .txm-app { padding: 0 10px 10px; gap: 10px; }
  .txm-pghead { margin: 0 -10px; padding: 9px 12px; }
  .txm .txm-pgname { font-size: 15.5px; }
  .txm .txm-mark { margin-left: 0; }
  .txm-bar { gap: 8px; padding: 0 8px; }
  .txm-bar-url { display: none; }
  .txm .txm-btab { padding: 0 9px; font-size: 11.5px; }
  .txm .txm-btab b { display: none; }
  .txm-top { padding: 8px 10px 8px 14px; }
  .txm .txm-tkr { font-size: 21px; }
  .txm .txm-sub--r { text-align: left; }
  .txm-tools { padding: 8px 10px; gap: 8px 12px; }
  .txm-ctl--deco { display: none; }
  .txm .txm-segx { display: none; }
  .txm .txm-segbtn { padding: 0 13px; }
  .txm-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .txm-pill { padding: 6px 9px 5px; }
  .txm .txm-pill dd { font-size: 13px; }
  .txm-card { padding: 10px 6px 6px; }
  .txm-card-h { padding: 0 4px; }
  .txm-stage { height: 220px; }
  .txm-stage--pcr { height: 200px; }
  .txm-seg--pcr .txm-segbtn { padding: 0 8px; font-size: 11px; }
  .txm-gauges { gap: 4px; padding: 10px 4px 8px; }
  .txm .txm-gauge-t { font-size: 9.5px; letter-spacing: .3px; }
  .txm .txm-gcap { font-size: 10.5px; }
  .txm-caps { padding: 10px 12px 12px; }
  .txm .txm-cap { font-size: 12.5px; }
}