/* ==========================================================================
   TV and Video: the orientation pair. Styles for the one new component.

   Five of the six components in the orientation pair are the Connected Search
   kit and are already styled by cs_orient.css. Only A.orientChairs is new, so
   only A.orientChairs is here.

   No colour is introduced. Every value is a variable already declared in
   academy.css, so the Academy accent retunes in one place.

   THE LAYOUT IS THE ARGUMENT. Four columns side by side, always, because the
   module's claim is that four jobs with one name have almost nothing in common
   and a reader cannot see that in four panels visited in turn. On a narrow
   screen the columns stack, which loses the comparison at a glance, so each
   card keeps its door label at the top rather than relying on column position.
   ========================================================================== */

/* ------------------------------------------------ tvchairs (0B) ---------- */
.oq-ask{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.oq-q{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;
  padding:7px 12px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3);text-align:left}
.oq-q:hover{background:var(--bg-4);color:var(--ink-2)}
.oq-q.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}

.oq-why{margin:0 0 13px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2);
  background:var(--bg-2);border-left:2px solid var(--accent-2);border-radius:0 9px 9px 0;
  padding:10px 13px}

.oq-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.oq-c{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  display:flex;flex-direction:column}
/* One border colour per door, reused from the chapter hue ramp so the four
   doors read the same here as they do in every returning image later. */
.oq-c.oq-linear{border-top:2px solid var(--t2)}
.oq-c.oq-streaming{border-top:2px solid var(--t4)}
.oq-c.oq-social{border-top:2px solid var(--t6)}
.oq-c.oq-commerce{border-top:2px solid var(--t8)}

.oq-door{margin:0 0 5px;font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4)}
.oq-c h6{margin:0 0 2px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.oq-who{margin:0 0 9px;font-family:var(--ui);font-size:11px;line-height:1.45;color:var(--ink-4)}
.oq-head{margin:0 0 6px;font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--ink);
  font-weight:600}
.oq-body{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
/* The thin-evidence marker. It is deliberately not quiet: a reader should be
   able to see at a glance which columns the research supports and which it
   does not, because that unevenness is true. */
.oq-flag{margin:8px 0 0;padding-top:7px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:10.5px;line-height:1.55;color:var(--warn)}

@media (max-width:900px){
  .oq-cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .oq-cols{grid-template-columns:1fr}
}