/* AI AND AUTOMATION, chapter 4: the components' styles.

   Five exhibits. The render-pass rules from ai_kit.css apply unchanged and are
   not restated. The smallest value here is 10px.

   ── THE ONE THING THIS CHAPTER DRAWS THAT NOTHING ELSE DOES ─────────────────

   The review queue is drawn as one bar split into read and not read, at a fixed
   overall width, for the same reason chapter 2's split bar is drawn that way:
   the total is the thing that stays constant while the composition changes, and
   a row of numbers makes the reader do that comparison in their head.

   It carries one extra rule that chapter 2's does not need. The unread segment
   is amber rather than a fourth tint, because at high volumes it is most of the
   bar and a reader has to see immediately that the large part is the part
   nobody looked at.

   ── AND THE EMPTY PANEL HAS TO LOOK FINISHED ────────────────────────────────

   `A.aiNoTest` returns nothing when every requirement is ticked. That is the
   exhibit, and it fails if it looks like a component that has not loaded. So
   the empty result is styled as a full-weight amber verdict block with its own
   heading, identical in weight to every other conclusion in the chapter.     */

.sim .ai-caps,
.sim .ai-tries,
.sim .ai-rulebox,
.sim .ai-qbar,
.sim .ai-qbox,
.sim .ai-wout,
.sim .ai-stopbox,
.sim .ai-studies,
.sim .ai-studybox,
.sim .ai-reqs,
.sim .ai-reqbox { --ai:var(--stage,var(--acad-ai)) }

/* ── 4.1. THE TWO CAPS ─────────────────────────────────────────────────────
   Two cards side by side, because the exhibit is that two controls on the same
   page behave in opposite ways on language. They stack on a phone. */
.ai-caps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.ai-cap{padding:11px 13px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:9px;display:flex;flex-direction:column;gap:4px}
.ai-capt{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.ai-capn{font-family:var(--mono);font-size:14px;color:var(--ink)}
.ai-capd{font-size:12px;line-height:1.5;color:var(--ink-3)}
.ai-capq{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin-top:2px}
.ai-capq b{color:var(--warn);font-weight:600}

.ai-tries{display:flex;flex-direction:column;gap:4px;padding-bottom:6px;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)}
.ai-try2{display:grid;grid-template-columns:minmax(170px,1fr) 124px;align-items:center;gap:10px;
  width:100%;min-width:314px;text-align:left;padding:9px 11px;cursor:pointer;color:inherit;
  font:inherit;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 8px 8px 0;
  transition:background .14s,border-color .14s}
.ai-try2:hover{background:var(--bg-3)}
.ai-try2:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-try2.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-try2.ai-accept{border-left-color:var(--money)}
.ai-try2.ai-reject{border-left-color:var(--warn)}
.ai-tt2{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-tk{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-try2.ai-accept .ai-tk{color:var(--money)}
.ai-try2.ai-reject .ai-tk{color:var(--warn)}
.ai-rulebox{margin-top:12px;min-height:56px}

/* ── 4.2. THE QUEUE BAR ────────────────────────────────────────────────────
   One bar, full width, always. Read is neutral and unread is amber, because at
   high volume the unread part is most of the bar and it must read as the
   finding rather than as decoration. */
.ai-qrow{display:flex;width:100%;height:58px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);margin:0 0 10px}
.ai-qread,.ai-qmiss{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-width:52px;padding:0 4px;overflow:hidden;text-align:center;
  transition:flex-grow .3s var(--ease,ease)}
.ai-qread{background:color-mix(in srgb,var(--money) 22%,transparent)}
.ai-qmiss{background:var(--warn-soft)}
.ai-qread b,.ai-qmiss b{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:600}
.ai-qread i,.ai-qmiss i{font-family:var(--ui);font-size:10px;font-style:normal;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ai-qmiss i{color:var(--warn)}
.ai-qopts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ai-qopt.on{border-color:var(--ai,var(--acad-ai));background:var(--bg-3);color:var(--ink)}
.ai-qbox{min-height:56px}

/* The eight codified factors, as toggles. They wrap rather than scrolling,
   because they are independent choices rather than a comparison. */
.ai-factors{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.ai-fac{padding:7px 11px;cursor:pointer;color:var(--ink-3);font:inherit;font-size:12px;
  line-height:1.35;background:var(--bg-2);border:1px solid var(--line);border-radius:999px}
.ai-fac:hover{background:var(--bg-3)}
.ai-fac:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-fac.on{border-color:var(--ai,var(--acad-ai));background:var(--bg-3);color:var(--ink)}
.ai-counts{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* ── 4.3. THE WINNER ───────────────────────────────────────────────────────
   Two readouts side by side, reusing chapter 1's bill columns unchanged,
   because it is the same shape of comparison and a reader should not have to
   learn a second one. */
.ai-wout{margin:4px 0 0}
.ai-quals{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.ai-quals li{font-size:12px;line-height:1.55;color:var(--ink-3)}
.ai-quals b{color:var(--ink-2);font-weight:600}
.ai-stoprow{margin-top:14px}
.ai-stopbox:not(:empty){margin-top:12px;padding:11px 13px;background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:0 9px 9px 0}

/* ── 4.4. THE THREE STUDIES ────────────────────────────────────────────────
   Same card shape as chapter 0's frames exhibit, deliberately, because it is
   the same move: three studies that look like they disagree until the measured
   object is put beside each one. */
.ai-studies{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ai-studybox{min-height:48px}

/* ── 4.4. THE TEST NOBODY HAS RUN ──────────────────────────────────────────
   The empty result must look finished rather than broken. It is a full-weight
   amber block with a heading, identical in weight to every other conclusion in
   the chapter, because a reader who reads it as a loading failure has learned
   nothing. */
.ai-reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ai-req{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 9px 9px 0}
.ai-req.on{border-left-color:var(--ai,var(--acad-ai))}
.ai-rq{display:grid;grid-template-columns:minmax(180px,1fr) 78px;align-items:center;gap:10px;
  width:100%;min-width:272px;text-align:left;padding:10px 12px;cursor:pointer;color:inherit;
  font:inherit;background:none;border:0}
.ai-rq:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:-2px}
.ai-rqt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-rqs{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-req.on .ai-rqs{color:var(--ai,var(--acad-ai))}
.ai-rqd{margin:0;padding:0 12px 11px;font-size:12px;line-height:1.55;color:var(--ink-3)}
.ai-reqbox{margin-top:12px;min-height:48px}

/* ── NARROW ────────────────────────────────────────────────────────────────
   The two cap cards stack, and the two winner readouts stack, because both are
   independent figures rather than a comparison that lines up down a list. The
   queue bar keeps its full width at every size, because a bar you cannot see
   the end of is not a bar. */
@media (max-width:420px){
  .ai-caps{grid-template-columns:1fr}
  .ai-try2{grid-template-columns:minmax(170px,1fr) 116px;gap:8px;padding:9px 10px}
  .ai-rq{grid-template-columns:minmax(180px,1fr) 72px;gap:8px;padding:10px}
  .ai-qrow{height:64px}
  .ai-qread,.ai-qmiss{min-width:44px;padding:0 2px}
}