/* ==========================================================================
   TV and Video: the returning builds. Styles for A.tvDoorsAt.

   Loaded once and used by eight chapters, which is the whole point of a
   returning image: a reader who meets it at the supply should recognise it
   instantly at the pick, and a second stylesheet per chapter would defeat that.

   No colour is introduced. Every value is a variable already in academy.css.

   THE DOOR COLOURS ARE FIXED ACROSS THE ACADEMY. Each door takes one hue from
   the chapter ramp and keeps it in every appearance, so the reader learns the
   column positions once. That is the only thing about this image that is
   allowed to be consistent between handovers: the ANSWERS are supposed to move.
   ========================================================================== */

.fd-q{margin:0 0 12px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2);
  background:var(--bg-2);border-left:2px solid var(--accent-2);border-radius:0 9px 9px 0;
  padding:9px 13px}

.fd-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.fd-c{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  display:flex;flex-direction:column;min-height:120px}
.fd-c.fd-linear{border-top:2px solid var(--t2)}
.fd-c.fd-streaming{border-top:2px solid var(--t4)}
.fd-c.fd-social{border-top:2px solid var(--t6)}
.fd-c.fd-commerce{border-top:2px solid var(--t8)}
.fd-c.off{background:var(--bg-3);border-style:dashed;justify-content:space-between}

.fd-door{margin:0 0 6px;font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4)}
.fd-head{margin:0 0 8px;font-family:var(--ui);font-size:13px;line-height:1.5;color:var(--ink);
  font-weight:600}

/* The inheritance line. Present on every revealed column, including when the
   answer is "borrows nothing", because an absent line reads as an oversight and
   a stated absence reads as a finding. */
.fd-inh{margin:0 0 9px;padding:5px 8px;border-radius:7px;background:var(--bg-3);
  font-family:var(--ui);font-size:10.5px;line-height:1.5;color:var(--ink-2)}
.fd-inh span{display:block;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.fd-inh.none{color:var(--ink-4)}

.fd-dl{margin:0;font-family:var(--ui)}
.fd-dl dt{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);
  margin-top:8px}
.fd-dl dd{margin:2px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-3)}

/* The one thing this door answers differently HERE. Marked, because the whole
   Gate B correction rests on a reader being able to see it and on it changing
   at the next handover. */
.fd-own{margin:10px 0 0;padding:8px 9px;border-radius:8px;background:var(--accent-2-soft);
  font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-2)}
.fd-own span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:3px}

.fd-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)}

.fd-ask{margin:0 0 8px;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.fd-btns{display:flex;flex-direction:column;gap:5px}
.fd-p,.fd-r{cursor:pointer;background:var(--bg-4);border:1px solid var(--line-2);border-radius:8px;
  padding:7px 9px;font-family:var(--ui);font-size:11.5px;color:var(--ink-2);width:100%}
.fd-p:hover,.fd-r:hover{background:var(--bg-2);color:var(--ink)}
.fd-r{border-style:dashed;color:var(--ink-4)}

.fd-close{margin:13px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.fd-count{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-4);line-height:1.6}

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

/* The fifth answer, at the one handover where a real environment fits none of
   the four columns. Drawn OUTSIDE the grid on purpose: inside it, it would read
   as a fifth door and teach that the four are an incomplete list. */
.fd-fifth:empty{display:none}
.fd-x{margin-top:13px;padding:12px 14px;background:var(--bg-3);border:1px dashed var(--line-2);
  border-radius:12px}
.fd-xk{margin:0 0 6px;font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4)}
.fd-x h6{margin:0 0 5px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.fd-xh{margin:0 0 7px;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.fd-xb{margin:0 0 7px;font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-3)}
.fd-xw{margin:0;padding-top:7px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:11.5px;line-height:1.65;color:var(--ink-2)}