/* ==========================================================================
   The Trenches screen. Every class here starts with "tr-". Colours are the
   tokens of app.css, and the marks of a drawing get theirs from theme.js.
   The screen is a container (.market), so its tiers follow the room it has.
   ========================================================================== */

/* ── the page as a briefing ──────────────────────────────────
   Until 2026-10-11 every section was a box on the page and every drawing a box in its section: twenty-three lengths
   of a phone with nothing to say which part mattered. A section now stands on the page itself, under a line, a
   number and a title a reader can find (.market in app.css, shared with the Market screen). This screen adds what
   is its own: it opens with what it has to say in one sentence, and with the way to each section. */
/* The head of the page, the sentence it opens with, the way to each section and what the read says of a section are
   pieces every screen shares: .opens, .verdict, .toc and .said in app.css. */

/* ── the two indexes and the map ─────────────────────────── */
.tr-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }

/* ── the read ────────────────────────────────────────────── */
.tr-read { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.tr-readhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding-bottom: 4px; }
.tr-readhead b { font-weight: 600; font-size: var(--t-lead); color: var(--ink); }
.tr-readhead span { font-size: var(--t-label); color: var(--faint); }
/* The sections of the read flow down one column, then the next, in their order. */
.tr-rbs { column-gap: 24px; }
.tr-rb { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 8px 0 12px; border-top: 1px solid var(--line); break-inside: avoid; }
.tr-rk { justify-self: start; display: inline-flex; align-items: center; min-height: 26px; font: inherit; font-size: var(--t-label); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); background: none; border: 0; padding: 0; }
button.tr-rk { cursor: pointer; }
button.tr-rk:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
button.tr-rk:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.tr-rb[data-sec="rugs"] .tr-rk { color: var(--down); }
.tr-rb p { margin: 0; font-size: var(--t-body); line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
/* The head of the read is its lede: a step larger, in the ink of a title. */
.tr-rb[data-sec="now"] p { font-size: var(--t-base); color: var(--ink); }

/* ── trending ────────────────────────────────────────────── */
.tr-trend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; container-type: inline-size; container-name: trend; }
.tr-tk { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto 38px; gap: 10px; align-items: center; width: 100%; min-width: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tr-tk:hover .tr-tkid b { text-decoration: underline; text-underline-offset: 3px; }
.tr-tk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.tr-tk .ico { width: 28px; height: 28px; font-size: var(--t-small); outline-width: 1.5px; }
.tr-tkrank { display: none; font-size: var(--t-label); font-weight: 600; color: var(--faint); text-align: right; }
.tr-tkid { display: grid; gap: 1px; min-width: 0; }
.tr-tkid b { font-weight: 600; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
/* The chain and the age of a pool: the age goes under the chain when the row is narrow. */
.tr-tkmeta { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: var(--t-label); color: var(--dim); }
.tr-tkmeta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tr-tkid i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tr-tknum { display: grid; justify-items: end; text-align: right; gap: 1px; min-width: 0; }
.tr-tknum b { font-weight: 600; font-size: var(--t-body); color: var(--ink); white-space: nowrap; }
.tr-tknum b.up { color: var(--up); }
.tr-tknum b.dn { color: var(--down); }
.tr-tknum span, .tr-tkheat span { font-size: var(--t-label); color: var(--faint); white-space: nowrap; }
.tr-tknum.wide { display: none; }
.tr-tkheat { display: grid; justify-items: end; gap: 1px; }
.tr-tkheat b { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
/* On the narrowest phones the order of the rows says the heat, and its column gives its room to the name. */
@container trend (max-width: 399px) {
  .tr-tk { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
  .tr-tkheat { display: none; }
}
@container trend (min-width: 560px) {
  .tr-tk { grid-template-columns: 18px 30px minmax(0, 1fr) 96px 72px 110px 44px; gap: 14px; }
  .tr-tkrank { display: block; }
  .tr-tknum.wide { display: grid; }
}

/* ── rugs ────────────────────────────────────────────────── */
.tr-rugtiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.tr-rugtile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; align-content: start; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.tr-rugtile .tr-value { grid-column: 2; grid-row: 1; }
.tr-rugtile .s { grid-column: 1 / -1; }
.tr-rugtile .k { font-size: var(--t-label); font-weight: 500; color: var(--dim); }
.tr-rugtile .s { font-size: var(--t-small); color: var(--dim); }
.tr-rugtile:first-child .tr-value > b { color: var(--down); }
.tr-rugbars { width: 100%; height: auto; display: block; }
.tr-bar-pull { fill: var(--down); }
.tr-bar-fall { fill: var(--warn); }
.tr-legend > .lg > .tr-l-pull { background: var(--down); }
.tr-legend > .lg > .tr-l-fall { background: var(--warn); }
.tr-rugs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.tr-rug { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id size" "what size"; gap: 4px 14px; width: 100%; min-width: 0; padding: 11px 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tr-rug:hover .tr-rugid b { text-decoration: underline; text-underline-offset: 3px; }
.tr-rug:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.tr-rugid { grid-area: id; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.tr-rugid b { font-weight: 600; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
.tr-rugid span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-label); color: var(--dim); }
.tr-rugid i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tr-rugwhat { grid-area: what; display: grid; gap: 2px; min-width: 0; font-size: var(--t-small); line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.tr-rugread { font-size: var(--t-label); color: var(--dim); }
.tr-rugread.r { color: var(--down); }
.tr-rugsize { grid-area: size; align-self: start; display: grid; justify-items: end; text-align: right; gap: 1px; }
.tr-rugsize b { font-weight: 600; font-size: var(--t-body); color: var(--ink); white-space: nowrap; }
.tr-rugsize span { font-size: var(--t-label); color: var(--faint); }

/* ── volume ──────────────────────────────────────────────── */
.tr-stacks { display: grid; gap: 18px; margin-bottom: 4px; }
.tr-stackbox { display: grid; gap: 8px; min-width: 0; }
.tr-stackhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.tr-stackhead .k { font-size: var(--t-label); font-weight: 500; color: var(--dim); }
.tr-stackhead b { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.tr-stack { display: flex; gap: 2px; height: 30px; border-radius: 6px; overflow: hidden; min-width: 0; }
.tr-stack > span { flex: 0 1 0; min-width: 3px; display: flex; align-items: center; overflow: hidden; }
.tr-stack em { font-style: normal; font-size: var(--t-label); font-weight: 600; white-space: nowrap; padding: 0 8px; }
.tr-stackkey { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-label); color: var(--dim); }
.tr-stackkey > span { display: inline-flex; align-items: center; gap: 6px; }
.tr-stackkey i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tr-stackkey b { font-weight: 500; color: var(--ink); }
.tr-leaders { display: grid; gap: 9px; }
.tr-leader { display: grid; grid-template-columns: minmax(84px, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; }
.tr-leadname { font-size: var(--t-small); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.tr-leadbar { display: block; height: 10px; border-radius: var(--pill); background: var(--track); overflow: hidden; }
.tr-leadbar i { display: block; height: 100%; border-radius: var(--pill); background: var(--text); }
.tr-leadnum { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.tr-leadnum b { font-weight: 600; font-size: var(--t-small); color: var(--ink); }
.tr-leadnum span { min-width: 40px; text-align: right; font-size: var(--t-label); color: var(--dim); }

/* ── metas ───────────────────────────────────────────────── */
.tr-spikes { display: grid; gap: 0; margin-bottom: 12px; }
.tr-spike { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); min-width: 0; }
.tr-word { font-weight: 600; font-size: var(--t-lead); color: var(--ink); overflow-wrap: anywhere; }
.tr-spn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.tr-spn b { font-weight: 600; font-size: var(--t-body); color: var(--ink); white-space: nowrap; }
.tr-spn span { font-size: var(--t-label); color: var(--dim); }
.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.tr-chip { font-size: var(--t-small); color: var(--dim); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 3px 10px; }
.tr-chip b { font-weight: 600; color: var(--ink); }
.tr-launchgrid { width: 100%; height: auto; display: block; }
.tr-launchgrid .tr-rowname { fill: var(--text); }
.tr-launchgrid .tr-rowval { fill: var(--ink); font-weight: 500; }

/* ── what the record teaches ─────────────────────────────── */
.tr-lessons { display: grid; gap: 12px; margin-top: 4px; }
.tr-lesson { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: center; min-width: 0; }
.tr-lesname { display: grid; gap: 1px; min-width: 0; }
.tr-lesname b { font-weight: 500; font-size: var(--t-body); color: var(--ink); }
.tr-lesname span, .tr-lesnum span { font-size: var(--t-label); color: var(--dim); }
.tr-lesbar { position: relative; display: block; height: 12px; border-radius: var(--pill); background: var(--track); }
.tr-lesbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--pill); background: var(--down); }
.tr-lesbar em { position: absolute; top: -3px; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.tr-lesnum { display: flex; align-items: baseline; gap: 6px; }
.tr-lesnum b { font-weight: 600; font-size: var(--t-lead); color: var(--ink); }
/* The two numbers stand side by side at every width, so both are read at one glance. */
.tr-indexes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.tr-index { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.tr-index .k, .tr-risk .k, .tr-mini .k { font-size: var(--t-label); font-weight: 500; color: var(--dim); }
.tr-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tr-value > b { font-weight: 500; font-size: var(--t-hero); line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.tr-value.small > b { font-family: var(--face); font-weight: 500; font-size: var(--t-title); letter-spacing: -.03em; line-height: 1.1; }
.tr-of { font-size: var(--t-small); color: var(--faint); }
.tr-zone { font-size: var(--t-base); font-weight: 500; color: var(--ink); }
.tr-index .s, .tr-risk .s { font-size: var(--t-small); color: var(--dim); }
.tr-index .s b { font-weight: 600; color: var(--ink); }
.tr-index .s b.up { color: var(--up); }
.tr-index .s b.dn { color: var(--down); }
.tr-index .tr-before { color: var(--text); }
.tr-band { position: relative; height: 8px; border-radius: var(--pill); margin-top: 6px; }
.tr-band.activity { background: linear-gradient(90deg, var(--track), var(--up)); }
.tr-band.health { background: linear-gradient(90deg, var(--z0), var(--z2) 50%, var(--z4)); }
.tr-band i { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.tr-ends { display: flex; justify-content: space-between; font-size: var(--t-label); color: var(--faint); }
.tr-wait { padding: 18px 0; }
.tr-mapbox { min-width: 0; display: grid; justify-items: center; align-content: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.tr-map { width: 100%; max-width: 360px; height: auto; display: block; }
.tr-map text, .tr-spider text, .tr-shape text, .tr-hours text, .tr-calendar text, .tr-metas text, .tr-launchgrid text, .tr-rugbars text, .tr-dead text, .tr-red text, .tr-prog text, .tr-pads text { font-family: var(--face); font-size: var(--t-label); fill: var(--dim); }
.tr-frame { fill: none; stroke: var(--line-2); stroke-width: 1; }
.tr-mid { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 3 4; }
.tr-map .tr-corner { fill: var(--faint); }
.tr-map .tr-tick.name { fill: var(--text); font-weight: 500; }
.tr-trail { fill: none; stroke: var(--line-3); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tr-step { fill: var(--text); }
.tr-halo { fill: var(--up-wash); stroke: var(--up-soft); stroke-width: 1; }
.tr-here { fill: var(--up); stroke: var(--bg); stroke-width: 2; }

/* ── what the indexes are made of ────────────────────────── */
.tr-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.tr-spiderbox { min-width: 0; display: grid; justify-items: center; }
.tr-spider { width: 100%; max-width: 440px; height: auto; display: block; }
.tr-ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.tr-ring.rim { stroke: var(--line-2); }
.tr-axis { stroke: var(--hair); stroke-width: 1; }
.tr-was { fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
.tr-now { fill: var(--up-wash); stroke: var(--up); stroke-width: 2; stroke-linejoin: round; }
.tr-dot { fill: var(--up); stroke: var(--card); stroke-width: 2; }
.tr-ring-was { fill: var(--card); stroke: var(--dim); stroke-width: 1.5; }
.tr-spider .tr-lab { fill: var(--text); }
.tr-spider .tr-lab.key { fill: var(--dim); font-weight: 600; }
.tr-legend { margin-top: 10px; }
.tr-legend > i { width: 18px; height: 10px; border-radius: 2px; flex: none; }
.tr-l-now { background: var(--up); }
.tr-legend > .lg > .tr-l-was { background: none; border: 1.5px solid var(--dim); border-radius: 50%; width: 10px; height: 10px; }
.tr-hole { border: 1px dashed var(--line-3); background: none; }
/* The list of measures is a container of its own: a row takes one line where the list has 640px, whatever the screen. */
.tr-parts { display: grid; gap: 0; min-width: 0; container-type: inline-size; container-name: parts; }
.tr-part { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "key name" ". num" ". past" ". score"; gap: 6px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.tr-part:first-child { border-top: 0; padding-top: 0; }
.tr-key { grid-area: key; align-self: start; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font-size: var(--t-label); font-weight: 600; color: var(--dim); }
.tr-name { grid-area: name; min-width: 0; display: grid; gap: 2px; }
.tr-name b { font-weight: 500; font-size: var(--t-body); color: var(--ink); }
.tr-under { font-size: var(--t-label); color: var(--dim); }
.tr-src { font-size: var(--t-label); color: var(--faint); }
.tr-num { grid-area: num; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.tr-num b { font-weight: 500; font-size: var(--t-lead); color: var(--ink); }
.tr-num span { font-size: var(--t-label); color: var(--faint); }
.tr-past { grid-area: past; display: block; max-width: 100%; }
.tr-past path { fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tr-past circle { fill: var(--ink); }
.tr-score { grid-area: score; display: grid; grid-template-columns: minmax(64px, auto) 96px; gap: 10px; align-items: center; justify-content: start; }
.tr-score .tr-points { justify-content: flex-start; }
.tr-points { display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end; white-space: nowrap; }
.tr-points b { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.tr-points em { font-style: normal; font-size: var(--t-label); font-weight: 500; color: var(--dim); }
.tr-points em.up { color: var(--up); }
.tr-points em.dn { color: var(--down); }
.tr-bar { position: relative; display: block; width: 96px; height: 8px; border-radius: var(--pill); background: var(--track); }
.tr-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--pill); }
.tr-bar.activity i { background: var(--up); }
.tr-bar.health i { background: var(--text); }
.tr-bar em { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.tr-bar.none { background: none; border: 1px dashed var(--line-2); }

/* ── chain by chain ──────────────────────────────────────── */
/* The number of shapes a row is set by the screen from the room it has, so each drawing knows its width. */
.tr-shapes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.tr-shapes.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-shapes.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-chain { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.tr-chainname { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--t-body); color: var(--ink); min-width: 0; }
.tr-chainname i { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; }
.tr-chainname b { font-weight: 600; }
.tr-chainname span { font-size: var(--t-label); color: var(--dim); }
.tr-shape { width: 100%; height: auto; display: block; }
.tr-shape .tr-lab { fill: var(--dim); }
.tr-shape .tr-labv { font-family: var(--face); font-size: var(--t-small); font-weight: 600; fill: var(--ink); }
.tr-cdot { stroke: var(--bg); stroke-width: 1.5; }
.tr-leadrows { display: grid; gap: 0; align-content: start; }
.tr-leadrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); min-width: 0; }
.tr-leadrow:first-child { border-top: 0; }
.tr-leadrow span { font-size: var(--t-small); color: var(--dim); min-width: 0; }
.tr-leadrow b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--t-small); color: var(--ink); white-space: nowrap; }
.tr-leadrow b i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tr-leadrow em { font-style: normal; font-weight: 600; font-size: var(--t-small); color: var(--ink); text-align: right; min-width: 56px; white-space: nowrap; }
.tr-sessions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.tr-session-card { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.tr-session-card.top { border-color: var(--line-3); }
.tr-session-card .k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.tr-session-card .k span { font-size: var(--t-label); font-weight: 400; color: var(--faint); }
.tr-session-card .s { font-size: var(--t-label); color: var(--dim); }
.tr-sq { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tr-sq.s0, .tr-session.s0 { background: var(--z1); stroke: var(--z1); }
.tr-sq.s1, .tr-session.s1 { background: var(--text); stroke: var(--text); }
.tr-sq.s2, .tr-session.s2 { background: var(--up); stroke: var(--up); }
.tr-session { stroke-width: 3; stroke-linecap: round; }
.tr-fill { fill-opacity: .22; stroke-width: 2; stroke-linejoin: round; }
.tr-gridbox { min-width: 0; }
.tr-hours, .tr-calendar, .tr-metas { width: 100%; height: auto; display: block; }
.tr-cell.none { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.tr-hours .tr-rowname, .tr-metas .tr-rowname { fill: var(--text); }
.tr-hours .tr-rowname.all { fill: var(--ink); font-weight: 600; }
.tr-metas .tr-rowval { fill: var(--ink); font-weight: 500; }

/* ── what asks for caution ───────────────────────────────── */
.tr-risks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tr-risk { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.tr-dead, .tr-red, .tr-prog, .tr-pads { width: 100%; height: auto; display: block; margin-top: 12px; }
.tr-grid { stroke: var(--hair); stroke-width: 1; }
.tr-bar-risk { fill: var(--down); opacity: .7; }
.tr-bar-warn { fill: var(--warn); opacity: .7; }
.tr-bar-day { fill: var(--text); opacity: .7; }
.tr-bar-risk.now, .tr-bar-warn.now, .tr-bar-day.now, .tr-bar-risk:hover, .tr-bar-warn:hover, .tr-bar-day:hover { opacity: 1; }
.tr-ledger { display: grid; gap: 12px; margin-top: 4px; }
.tr-ledger > .seg { justify-self: start; }
.tr-led { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: center; min-width: 0; }
.tr-ledname { display: grid; gap: 1px; min-width: 0; }
.tr-ledname b { font-weight: 500; font-size: var(--t-body); color: var(--ink); }
.tr-ledname span, .tr-lednum span { font-size: var(--t-label); color: var(--dim); }
.tr-ledbar { display: flex; gap: 2px; height: 18px; min-width: 0; border-radius: 5px; overflow: hidden; }
.tr-ledbar i { flex: 0 1 0; min-width: 2px; }
.tr-ledbar .s0, .tr-s0 { background: var(--down); }
.tr-ledbar .s1, .tr-s1 { background: var(--down-mid); }
.tr-ledbar .s2, .tr-s2 { background: var(--line-3); }
.tr-ledbar .s3, .tr-s3 { background: var(--up-soft); }
.tr-ledbar .s4, .tr-s4 { background: var(--up); }
.tr-lednum { display: flex; align-items: baseline; gap: 6px; }
.tr-lednum b { font-weight: 600; font-size: var(--t-lead); color: var(--ink); }

/* ── the long view ───────────────────────────────────────── */
.tr-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.tr-mini { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }

/* ── the news ────────────────────────────────────────────── */
.tr-news { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; margin-top: 12px; }
.tr-story { display: grid; gap: 4px; align-content: start; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; min-width: 0; }
.tr-story b { font-weight: 500; font-size: var(--t-base); line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.tr-story:hover b { text-decoration: underline; text-underline-offset: 3px; }
.tr-topic { justify-self: start; font-size: var(--t-label); font-weight: 500; color: var(--dim); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 1px 9px; }
.tr-topic.t-trenches { color: var(--volt-ink); background: var(--volt); border-color: var(--volt); }
.tr-topic.t-security { color: var(--down); border-color: var(--down-mid); }
.tr-by { font-size: var(--t-label); color: var(--faint); }

/* ── where every number comes from ───────────────────────── */
.tr-fresh { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.tr-source { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); min-width: 0; }
.tr-sourcename { display: grid; gap: 1px; min-width: 0; }
.tr-sourcename b { font-weight: 500; font-size: var(--t-body); color: var(--ink); }
.tr-sourcename span { font-size: var(--t-label); color: var(--dim); }
.tr-age { font-size: var(--t-label); color: var(--faint); white-space: nowrap; }

/* ── tiers, by the room the screen has ───────────────────── */
@container (min-width: 620px) {
  .tr-indexes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-rbs { column-count: 2; }
  .tr-rugtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-rugtile { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px; }
  .tr-rugtile .tr-value, .tr-rugtile .s { grid-column: auto; grid-row: auto; }
  .tr-spike { grid-template-columns: minmax(110px, 1fr) repeat(3, minmax(0, 1.4fr)); }
  .tr-lesson { grid-template-columns: 240px minmax(0, 1fr) 120px; gap: 14px; }
  .tr-sessions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-fresh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-risks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-led { grid-template-columns: 190px minmax(0, 1fr) 170px; gap: 14px; }
  .tr-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 900px) {
  /* The read on the left, the two numbers and the map on the right. */
  .tr-top { grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "read ix" "read map"; gap: 14px 20px; }
  .tr-top > .tr-indexes { grid-area: ix; }
  .tr-top > .tr-read { grid-area: read; }
  .tr-top > .tr-mapbox { grid-area: map; align-self: start; }
  .tr-top.noread { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto; grid-template-areas: "ix map"; }
  .tr-indexes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-rugs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-stacks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .tr-two { grid-template-columns: 440px minmax(0, 1fr); gap: 28px; }
  /* The drawing stays in sight while the list of its measures is read. */
  .tr-spiderbox { position: sticky; top: 96px; }
  .tr-risks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container parts (min-width: 640px) {
  .tr-part { grid-template-columns: 22px minmax(0, 1fr) 124px minmax(128px, auto) 176px; grid-template-areas: "key name past num score"; column-gap: 16px; }
  .tr-num { display: grid; justify-items: end; text-align: right; gap: 1px; }
  .tr-num b, .tr-num span { white-space: nowrap; }
  .tr-score { justify-content: end; }
  .tr-score .tr-points { justify-content: flex-end; }
}
@container (min-width: 1300px) {
  .tr-news { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}