/* Trust: lean chips, breakdowns, disputes, How we rate, review panel */

/* Chip on every News card */
.tr-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 7px; min-height: 28px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer; font: 700 11px/1 var(--mono);
  text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); color: var(--ink-2);
}
.tr-chip[data-b="left"] { background: var(--left-soft); color: var(--left); }
.tr-chip[data-b="center"] { background: var(--center-soft); color: var(--center); }
.tr-chip[data-b="right"] { background: var(--right-soft); color: var(--right); }
.tr-chip:hover { border-color: currentColor; }
.tr-chip.disagree { border: 1.5px dashed currentColor; }
.tr-band b { font-size: 13px; }
.tr-ne { font-size: 13px; }
.tr-trio { display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px; border-radius: 6px; background: var(--surface); color: var(--ink-2); font-size: 9px; }
.tr-trio > span { opacity: .7; margin-left: 2px; }
.tr-trio > span:first-child { margin-left: 0; }
.tr-mini { font-style: normal; font-weight: 800; font-size: 11px; width: 13px; text-align: center; }
.tr-mini[data-b="left"] { color: var(--left); } .tr-mini[data-b="center"] { color: var(--center); } .tr-mini[data-b="right"] { color: var(--right); }
.tr-mini.none { opacity: .45; }
@media (max-width: 420px) { .tr-trio > span { display: none; } }

/* Detail drawer + breakdown block */
.tr-detail { display: grid; gap: 12px; }
.tr-title { font-size: 22px; line-height: 1.2; }
.tr-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.tr-big { display: inline-flex; align-items: center; gap: 8px; font: 800 26px/1 var(--display); }
.tr-big span { font-family: var(--mono); }
.tr-big[data-b="left"] { color: var(--left); } .tr-big[data-b="center"] { color: var(--center); } .tr-big[data-b="right"] { color: var(--right); }
.tr-meter { margin: 4px 0; }
.tr-track { position: relative; height: 14px; border-radius: 99px; overflow: visible; display: flex; }
.tr-zone { display: block; height: 100%; opacity: .85; }
.tr-zone.l { width: 33%; background: var(--left); border-radius: 99px 0 0 99px; }
.tr-zone.c { width: 34%; background: var(--center); }
.tr-zone.r { width: 33%; background: var(--right); border-radius: 0 99px 99px 0; }
.tr-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .5; transform: translateX(-1px); }
.tr-dot { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 4px solid var(--ink); transform: translate(-50%, -50%); }
.tr-scale { display: flex; justify-content: space-between; font: 600 11px var(--mono); color: var(--ink-2); margin-top: 8px; }
.tr-rows { display: grid; gap: 8px; }
.tr-row { background: var(--surface); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); }
.tr-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-row-head b { min-width: 64px; }
.tr-row-body { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.tr-row-body p { margin: 4px 0 0; }
.tr-quote { color: var(--ink); font-style: italic; }
.tr-warn { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--glow) 22%, transparent); font-size: 14px; }
.tr-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tr-block { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 10px; }
.tr-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tr-block-head h4 { margin: 0; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.tr-block .tr-row { box-shadow: none; }
.tr-dispute-btn { justify-self: start; }

/* Pages */
.tr-page { max-width: 760px; }
.tr-page.wide { max-width: 980px; }
.tr-page h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 800; margin: 8px 0 8px; }
.tr-page h2 { font-size: 22px; margin: 28px 0 10px; }
.tr-page p, .tr-page li { line-height: 1.6; }
.tr-lede { font-size: 17px; color: var(--ink-2); margin: 0 0 14px; }
.tr-cards { display: grid; gap: 10px; }
@media (min-width: 760px) { .tr-cards { grid-template-columns: repeat(3, 1fr); } }
.tr-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; }
.tr-card p { margin: 6px 0 0; font-size: 15px; }
.tr-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 17px; }
.tr-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-bands div { padding: 12px; border-radius: 12px; display: grid; gap: 4px; }
.tr-bands span { font: 600 13px var(--mono); }
.tr-bands [data-b="left"] { background: var(--left-soft); color: var(--left); }
.tr-bands [data-b="center"] { background: var(--center-soft); color: var(--center); }
.tr-bands [data-b="right"] { background: var(--right-soft); color: var(--right); }
.tr-list { padding-left: 20px; display: grid; gap: 4px; }
.tr-prompt {
  white-space: pre-wrap; word-break: break-word; font: 14px/1.6 var(--mono); background: var(--surface); padding: 14px;
  border-radius: 12px; box-shadow: var(--shadow); border-left: 4px solid var(--center); overflow-x: auto;
}
.tr-outlets { display: grid; gap: 6px; }
@media (min-width: 700px) { .tr-outlets { grid-template-columns: repeat(2, 1fr); } }
.tr-outlet { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 12px; background: var(--surface); border-radius: 10px; }
.tr-promise { padding: 14px; border-radius: 12px; background: var(--surface); border-left: 4px solid var(--verified, var(--center)); font-weight: 600; }

/* Dispute log */
.tr-page .seg { margin: 6px 0 14px; }
.tr-disputes { display: grid; gap: 10px; }
.tr-dispute { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.tr-dispute h3 { font-size: 18px; margin: 8px 0 6px; }
.tr-dispute-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-change { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.tr-reason { margin: 0; color: var(--ink-2); }
.tr-resolution { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.tr-resolution p { margin: 4px 0 0; }
.tr-resolve { margin-top: 10px; }
.badge.tr-ok { background: color-mix(in srgb, var(--verified, #0f9d76) 18%, transparent); color: var(--verified, #0f9d76); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Panel page */
.tr-seats { display: grid; gap: 6px; margin-top: 10px; }
.tr-seat-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.tr-seat-row select { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); padding: 6px 10px; font-size: 16px; }
.tr-status { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 760px) { .tr-status { grid-template-columns: repeat(3, 1fr); } }
.tr-status p { margin: 4px 0 8px; }
.tr-emails { display: grid; gap: 4px; font-size: 14px; }