/* Interview quotes (widgets/quotes/quotes.js). Half the carousel's height, on its top edge; a Chicago Maroon box
   with light text on a light page, and a light box on the maroon dark page. Reactions run blue (positive) through grey to red
   (negative), the steps of the response dots' ordered scale for the box's surface. */
.strip > .pic--quotes { height: calc(var(--strip-h) * .5); align-self: flex-start; background: #861f41; }
html[data-theme=dark] .strip > .pic--quotes { background: #ececec; }
.qt {
  --qt-t0: #8fbdf3; --qt-t1: #5a8fd6; --qt-t2: #c09aa7; --qt-t3: #f0a26f; --qt-t4: #ff9a90;
  --qt-ink: #fff; --qt-ink-2: #f6e9ee; --qt-muted: #e2c2cd; --qt-line: rgba(255,255,255,.24);
  container-type: size; display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 10px 20px;
  font-size: 12px; line-height: 1.35; color: var(--qt-ink); text-align: left;
}
html[data-theme=dark] .qt {
  --qt-t0: #2a78d6; --qt-t1: #8fb3e3; --qt-t2: #a3a5ab; --qt-t3: #d9906f; --qt-t4: #d63c3b;
  --qt-ink: #292b34; --qt-ink-2: #44464f; --qt-muted: #5f616a; --qt-line: #cbcbcf;
}
.qt button { font: inherit; color: inherit; }
.qt__top { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.qt__head { display: flex; align-items: baseline; gap: 8px; }
.qt__eyebrow { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--qt-muted); }
.qt__head strong { font-size: 14px; font-weight: 600; }
.qt__bar { position: relative; display: flex; gap: 2px; width: 160px; height: 6px; }
/* Each segment's hit area runs well above and below the thin bar; hovering one names its reaction. */
.qt__seg { position: relative; border-radius: 2px; transition: opacity .2s ease; }
.qt__seg::after { content: ''; position: absolute; inset: -8px 0; }
.qt__bar:hover .qt__seg:not(:hover) { opacity: .35; }
.qt__tip { position: absolute; top: calc(100% + 6px); z-index: 2; padding: 3px 8px; border-radius: 6px; background: var(--qt-ink); color: #861f41; font-size: 11px; line-height: 1.3; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
html[data-theme=dark] .qt__tip { color: #ececec; }
.qt__tip[hidden] { display: none; }
.qt__tip b { font-weight: 600; }
.qt [data-t="0"] { --qt-c: var(--qt-t0); } .qt [data-t="1"] { --qt-c: var(--qt-t1); } .qt [data-t="2"] { --qt-c: var(--qt-t2); }
.qt [data-t="3"] { --qt-c: var(--qt-t3); } .qt [data-t="4"] { --qt-c: var(--qt-t4); }
.qt__seg, .qt__dot { background: var(--qt-c); }
.qt__dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* One answer: reaction, then the question, then the answer itself. */
.qt__card { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; margin: 0; padding: 2px 0 2px 14px; box-shadow: inset 3px 0 0 var(--qt-c, var(--qt-line)); overflow: hidden; }
.qt__react { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.qt__react b { font-weight: 600; }
.qt__q { color: var(--qt-muted); font-size: 11.5px; line-height: 1.3; }
.qt__text { margin: 0; max-width: 72ch; font-size: clamp(11px, 7.2cqh, 15.6px); line-height: 1.3; font-weight: 700; letter-spacing: -.005em; color: var(--qt-ink); }
.qt__text::before { content: '“'; } .qt__text::after { content: '”'; }
.qt__nav { display: flex; align-items: center; gap: 8px; }
.qt__arrow { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px var(--qt-line); color: var(--qt-ink-2) !important; font-size: 13px !important; }
.qt__arrow:hover, .qt__arrow:focus-visible { box-shadow: inset 0 0 0 1px var(--qt-ink-2); color: var(--qt-ink) !important; outline: none; }
.qt__count { min-width: 4.5em; text-align: center; color: var(--qt-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

@container (max-width: 560px) {
  .qt { padding: 10px 12px 8px 14px; }
  .qt__bar { width: 100%; }
  .qt__text { font-size: 12px; }
}