/* ==========================================================================
   TV and Video, chapter 5: the pick. Component styles.

   One sheet per chapter, matching the Connected Search layout, and appended to
   as the chapter's other components land. Nothing here introduces a colour:
   every value is a variable already declared in academy.css, so the Academy
   accent can be retuned in one place.

   The two bins are coloured against each other on purpose. "Travels" takes the
   money ramp, because a display buyer's training holding good is a saving.
   "Looks the same, is not" takes the open ramp, which is the sheet's warning
   colour everywhere else on the platform.
   ========================================================================== */

/* --------------------------------------------- tvtransfer (5.6) ---------- */
.tt-pool{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;min-height:34px}
.tt-i{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;
  padding:6px 11px;font-family:var(--ui);font-size:12.5px;color:var(--ink-2);text-align:left;
  max-width:100%}
.tt-i:hover{background:var(--bg-4);color:var(--ink)}
.tt-i.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.tt-done{font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3)}

.tt-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.tt-b{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.tt-b h6{margin:0 0 3px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.tt-b p{margin:0 0 9px;font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--ink-4)}
.tt-b.yes{border-top:2px solid var(--money)}
.tt-b.no{border-top:2px solid var(--open)}

.tt-in{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:5px}
.tt-in li{font-family:var(--ui);font-size:12px;line-height:1.45;color:var(--ink-2);
  background:var(--bg-3);border-radius:7px;padding:7px 9px;border-left:2px solid var(--money)}
.tt-in li.wrong{border-left-color:var(--open)}
.tt-in li em{display:block;font-style:normal;color:var(--ink-4);font-size:11px;margin-top:4px;
  line-height:1.5}
/* The decision is the half of a reveal people skip, so it is set apart rather
   than run on. A cause with no decision attached is trivia. */
.tt-in li u{display:block;text-decoration:none;color:var(--ink-3);font-size:11px;margin-top:5px;
  padding-top:5px;border-top:1px solid var(--line);line-height:1.5}
.tt-deep{display:inline-block;margin-left:7px;vertical-align:middle;font-family:var(--ui);
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--warn);
  background:var(--warn-soft);border-radius:5px;padding:2px 6px}

.tt-drop{width:100%;cursor:pointer;background:var(--bg-3);border:1px dashed var(--line-2);
  border-radius:8px;padding:7px;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.tt-drop:hover{background:var(--bg-4);color:var(--ink-2)}
.tt-drop[disabled]{cursor:default;opacity:.6}
.tt-score{margin-top:12px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2)}

@media (max-width:640px){
  .tt-bins{grid-template-columns:1fr}
}

/* ==========================================================================
   Chapter 5 landed after the Gate A module, so everything below this line is
   appended rather than woven in. Same rule as the component file: nothing here
   reaches back across a banner.
   ========================================================================== */

/* -------------------------------------------- tvpodbuilder (5.2) --------- */
/* The specification quote is set as a quotation because it IS one. Every other
   number in this Academy is somebody's estimate. This is the published text
   that the whole module rests on, and it should not look like our prose. */
.pb-spec{margin:0 0 14px;padding:12px 14px;background:var(--bg-2);border:1px solid var(--line);
  border-left:2px solid var(--accent-2);border-radius:0 12px 12px 0}
.pb-spec p{margin:0 0 7px;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2);
  font-style:italic}
.pb-spec cite{font-family:var(--ui);font-size:10.5px;line-height:1.55;color:var(--ink-4);
  font-style:normal}

.pb-bids{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px;
  margin-bottom:12px}
.pb-b{cursor:pointer;text-align:left;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 11px}
.pb-b:hover{background:var(--bg-4)}
.pb-b.on{background:var(--accent-2-soft);border-color:var(--accent-2)}
.pb-bt{display:block;font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.pb-bc{display:block;font-family:var(--ui);font-size:10.5px;color:var(--ink-4);margin-top:2px}

.pb-ctl{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.pb-seg span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.pb-seg button{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);
  padding:6px 11px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.pb-seg button:first-of-type{border-radius:8px 0 0 8px}
.pb-seg button:last-of-type{border-radius:0 8px 8px 0}
.pb-seg button:hover{background:var(--bg-4);color:var(--ink)}
.pb-seg button.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}

/* The break drawn to scale, because the constraint that decides everything is
   that the seconds are fixed. A list would lose that. */
.pb-strip{display:flex;gap:3px;min-height:74px;margin-bottom:4px}
.pb-s{display:flex;flex-direction:column;justify-content:center;padding:8px 9px;border-radius:9px;
  min-width:0;background:var(--bg-2);border:1px solid var(--line)}
.pb-s.pb-mine{background:var(--accent-2-soft);border-color:var(--accent-2)}
.pb-s.pb-rival{background:var(--bg-3)}
.pb-s.pb-direct{background:var(--bg-3);border-style:dashed}
.pb-s.pb-slate{background:var(--open-soft);border-color:var(--open)}
.pb-s.pb-gap{background:var(--bg-3);border-style:dashed;border-color:var(--warn)}
.pb-sn{font-family:var(--ui);font-size:9px;color:var(--ink-4)}
.pb-sc{font-family:var(--ui);font-size:11.5px;line-height:1.35;color:var(--ink);margin-top:2px}
.pb-sd{font-family:var(--ui);font-size:10px;color:var(--ink-4);margin-top:3px}
.pb-sx{font-family:var(--ui);font-size:9.5px;line-height:1.4;color:var(--open);margin-top:4px}
.pb-say{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.pb-notes{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pb-n{margin:0 0 8px;font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-3)}
.pb-n.pb-do{margin-bottom:0;padding:9px 11px;background:var(--money-soft);border-radius:9px;
  color:var(--ink-2)}

/* ------------------------------------------------- tvfile (5.3) ---------- */
.fl-seg span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.fl-seg button{cursor:pointer;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:8px;padding:7px 12px;margin-right:6px;font-family:var(--ui);font-size:12px;
  color:var(--ink-3)}
.fl-seg button:hover{background:var(--bg-4);color:var(--ink)}
.fl-seg button.on{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--ink)}
.fl-bar{display:flex;gap:3px;margin:13px 0 0;height:34px}
.fl-bar span{display:flex;align-items:center;justify-content:center;border-radius:8px;
  font-family:var(--ui);font-size:11.5px;color:var(--ink);min-width:0;overflow:hidden;
  white-space:nowrap}
.fl-a{background:var(--accent-2-soft);border:1px solid var(--accent-2)}
.fl-b{background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink-3)}
.fl-say{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.fl-cav,.fl-ask{margin:9px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.65;
  color:var(--ink-4)}
.fl-ask{color:var(--ink-2)}
.fl-p2{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fl-p2 h6{margin:0 0 10px;font-family:var(--ui);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.fl-l{margin-bottom:9px}
.fl-lh{display:flex;align-items:center;gap:10px}
.fl-lt{flex:0 0 auto;font-family:var(--ui);font-size:12.5px;color:var(--ink-2);min-width:150px}
.fl-lb{flex:1;height:7px;background:var(--bg-3);border-radius:4px;overflow:hidden}
.fl-lb i{display:block;height:100%;background:var(--accent-2)}
.fl-ld{margin:3px 0 0 160px;font-family:var(--ui);font-size:11.5px;line-height:1.6;
  color:var(--ink-4)}

/* ------------------------------------------------- tvcaps (5.4) ---------- */
.cp-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
  margin-bottom:14px}
.cp-ctl label{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.cp-ctl b{float:right;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.cp-ctl input{width:100%;margin-top:6px}
.cp-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.cp-num{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.cp-k{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);line-height:1.4}
.cp-v{display:block;margin-top:4px;font-family:var(--ui);font-size:19px;font-weight:600;
  color:var(--ink)}
.cp-num.big .cp-v{color:var(--open);font-size:23px}
.cp-list{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.cp-i{font-family:var(--ui);font-size:11px;color:var(--ink-4);background:var(--bg-3);
  border-radius:6px;padding:4px 8px}
.cp-i em{font-style:normal;color:var(--ink-2)}
.cp-say{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2);
  grid-column:1/-1}
.cp-gap{margin:10px 0 0;padding:10px 12px;background:var(--warn-soft);border-radius:9px;
  font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-2)}
.cp-obs,.cp-fix{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cp-obs h6,.cp-fix h6{margin:0 0 10px;font-family:var(--ui);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.cp-o{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;margin-bottom:5px}
.cp-ok{font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.cp-ov{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.cp-fx{margin:0;padding-left:16px;font-family:var(--ui);font-size:12.5px;line-height:1.7;
  color:var(--ink-3)}
.cp-fx li{margin-bottom:8px}
.cp-fx b{color:var(--ink-2)}

/* ------------------------------------------------- tvasks (5.5) ---------- */
.ak-q{margin-bottom:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--bg-2)}
.ak-q.on{border-color:var(--accent-2)}
.ak-t{width:100%;cursor:pointer;text-align:left;background:transparent;border:0;padding:10px 12px;
  font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ak-t:hover{color:var(--ink);background:var(--bg-3)}
.ak-q.on .ak-t{color:var(--ink);font-weight:600}
.ak-d{padding:0 12px 11px}
.ak-d p{margin:0 0 7px;font-family:var(--ui);font-size:11.5px;line-height:1.65;color:var(--ink-3)}
.ak-d p:last-child{margin-bottom:0}
.ak-d b{color:var(--ink-2)}
.ak-c{padding-top:7px;border-top:1px solid var(--line);color:var(--warn)}
.ak-c b{color:var(--warn)}
.ak-say{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}

@media (max-width:640px){
  .pb-strip{flex-direction:column}
  .cp-out{grid-template-columns:1fr}
  .fl-lt{min-width:0}
  .fl-ld{margin-left:0}
}