/* Quick read: plain-language summary of the chart range. Neutral range bar; the move from the start of the range
   to now is the only colour, paired with the signed change pill. Compact variant is one line for Pro panels. */
.tm-qread { container: tm-qread / inline-size; display: grid; gap: var(--tm-space-12); padding: var(--tm-space-16); border: 1px solid var(--tm-color-divider); border-radius: var(--lk-r-sm, var(--tm-radius-sm)); background: var(--tm-color-panel); font-variant-numeric: tabular-nums; }
.tm-qread__top { display: flex; align-items: center; gap: var(--tm-space-12); min-width: 0; }
.tm-qread__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--lk-r-xs, var(--tm-radius-sm)); background: var(--tm-color-hover); color: var(--tm-color-text-secondary); }
.tm-qread__head { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tm-qread__kicker { font-size: var(--tm-density-font-label); line-height: var(--tm-type-label-line); color: var(--tm-color-text-secondary); }
.tm-qread__title { font-size: var(--tm-type-subtitle-size); line-height: var(--tm-type-subtitle-line); font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }
.tm-qread__top > .tm-change { flex: none; min-width: 0; }
.tm-qread .tm-change--pill { white-space: nowrap; }

/* Range bar: low on the left, high on the right. Dashed tick = start of range; dot = now; tint = the move between them. */
.tm-qread__bar { position: relative; height: 8px; margin: 6px 7px; border-radius: 4px; background: var(--tm-color-hover); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
.tm-qread__move { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.tm-qread__move--up { background: color-mix(in srgb, var(--tm-color-up) 45%, transparent); }
.tm-qread__move--down { background: color-mix(in srgb, var(--tm-color-down) 45%, transparent); }
.tm-qread__ref { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dotted var(--tm-color-text-secondary); transform: translateX(-1px); }
.tm-qread__now { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--tm-color-text); box-shadow: 0 0 0 3px var(--tm-color-panel); transform: translate(-50%, -50%); }

.tm-qread__scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--tm-space-8); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-qread__scale > :last-child { text-align: right; }
.tm-qread__scale .tm-qread__where { text-align: center; color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); font-size: var(--tm-density-font-body); }
.tm-qread b { font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text); }
.tm-qread__legend { display: flex; flex-wrap: wrap; gap: var(--tm-space-4) var(--tm-space-16); padding-top: var(--tm-space-12); border-top: 1px solid var(--tm-color-divider); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-qread__legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tm-qread__key-now { width: 10px; height: 10px; border-radius: 50%; background: var(--tm-color-text); }
.tm-qread__key-ref { width: 0; height: 12px; border-left: 2px dotted var(--tm-color-text-secondary); }
.tm-qread__note { margin: 0; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }

/* Narrow: the change pill drops under the title and the position phrase gets its own line. */
@container tm-qread (width < 420px) {
  .tm-qread__top { flex-wrap: wrap; row-gap: var(--tm-space-8); }
  .tm-qread__head { flex-basis: calc(100% - 48px); }
  .tm-qread__top > .tm-change { margin-left: 48px; }
  .tm-qread__scale { grid-template-columns: 1fr 1fr; }
  .tm-qread__scale .tm-qread__where { grid-column: 1 / -1; grid-row: 1; }
}

/* Compact: one line for the Pro chart panel. Labels shorten; the bar shrinks to a 64px mini bar. */
.tm-qread--line { display: flex; align-items: center; gap: var(--tm-space-8); padding: 0 var(--tm-density-pad-cell); min-height: 28px; border: 0; border-top: 1px solid var(--tm-color-divider); border-radius: 0; background: none; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); white-space: nowrap; overflow: hidden; }
.tm-qread--line .tm-qread__kicker { padding: 1px 6px; border-radius: var(--lk-r-xs, var(--tm-radius-xs)); background: var(--tm-color-hover); color: var(--tm-color-text); font-size: inherit; line-height: inherit; }
.tm-qread--line .tm-qread__where { color: var(--tm-color-text); }
.tm-qread__mini { width: 64px; flex: none; }
.tm-qread__mini .tm-qread__bar { height: 4px; margin: 0 5px; }
.tm-qread__mini .tm-qread__now { width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--tm-color-panel); }
.tm-qread__mini .tm-qread__ref { top: -3px; bottom: -3px; border-left-width: 1px; }
.tm-qread__sep { width: 1px; height: 12px; background: var(--tm-color-divider-strong); flex: none; }
.tm-qread--line .tm-qread__note { margin-left: auto; padding-left: var(--tm-space-8); }
.tm-qread--line > * { flex: none; }
@container tm-panel (width < 520px) { .tm-qread--line .tm-qread__note, .tm-qread--line .tm-qread__mini { display: none; } }
@media (prefers-reduced-motion: no-preference) { .tm-qread__now, .tm-qread__move, .tm-qread__ref { transition: left var(--tm-motion-duration-base, 200ms) var(--tm-motion-easing-standard, ease), width var(--tm-motion-duration-base, 200ms) var(--tm-motion-easing-standard, ease); } }

/* Smaller Simple versions. Compact: two lines in a card. Inline: one strip under the range tabs, no card. */
.tm-qread--compact, .tm-qread--inline { padding: 10px var(--tm-space-16); }
.tm-qread__in { display: grid; gap: 8px; min-width: 0; }
.tm-qread--inline { padding: 8px 0 0; border: 0; border-radius: 0; background: none; }
.tm-qread--compact .tm-qread__top, .tm-qread--inline .tm-qread__top { justify-content: space-between; gap: var(--tm-space-12); flex-wrap: wrap; }
.tm-qread--compact .tm-qread__title, .tm-qread--inline .tm-qread__title { font-size: var(--tm-density-font-body); line-height: var(--tm-density-line-body); }
.tm-qread--compact .tm-change, .tm-qread--inline .tm-change { font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }
.tm-qread__range { display: flex; align-items: center; gap: var(--tm-space-8); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); white-space: nowrap; }
.tm-qread__range .tm-qread__bar { flex: 1 1 120px; min-width: 80px; height: 6px; margin: 0 6px; }
.tm-qread__range .tm-qread__now { width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--tm-color-panel); }
.tm-qread__range .tm-qread__ref { top: -4px; bottom: -4px; }
.tm-qread__range .tm-qread__lo, .tm-qread__range .tm-qread__hi { color: var(--tm-color-text); font-variant-numeric: tabular-nums; }
.tm-qread__range .tm-qread__where { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); font-size: inherit; }
.tm-qread__range .tm-qread__note { margin: 0; cursor: help; }
.tm-qread--inline .tm-qread__now { box-shadow: 0 0 0 2px var(--tm-color-bg); }
/* Inline on one line when there is room: sentence and change, then the range on the same row. */
@container tm-qread (width >= 760px) {
  .tm-qread--inline .tm-qread__in { display: flex; align-items: center; gap: var(--tm-space-16); }
  .tm-qread--inline .tm-qread__top { flex: none; flex-wrap: nowrap; gap: var(--tm-space-8); }
  .tm-qread--inline .tm-qread__range { flex: 1; min-width: 0; }
}
@container tm-qread (width < 420px) {
  .tm-qread__range { flex-wrap: wrap; row-gap: 4px; }
  .tm-qread__range .tm-qread__bar { flex-basis: calc(100% - 120px); }
  .tm-qread__range .tm-qread__where { flex: 1 0 auto; }
}
.tm-qread--compact .tm-qread__top > .tm-change, .tm-qread--inline .tm-qread__top > .tm-change { margin-left: 0; }