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

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

   ── THE THREE-COLUMN COVER IS THE ONE NEW SHAPE ─────────────────────────────

   Nothing earlier in the book draws three columns of prose side by side, and it
   is done here for one reason: the third column is the finding, and a reader
   has to see it sitting beside the other two at the same weight to notice that
   it exists at all. A list would let them read the first two and stop.

   It stacks on a phone, in the same order, with the third column keeping its
   accent so it does not become the afterthought the layout exists to prevent.

   ── AND THE DELIVERY BAR IS DRAWN THE WAY CHAPTER 2'S SPLIT BAR IS ──────────

   Two bars, full width, one above the other: what you asked for and what
   arrived. Same total, different composition, which is the comparison the whole
   module rests on. The asked-for bar is drawn in neutral tints and the delivered
   one is not, because the delivered one is the object of the exercise.

   No red anywhere in it. A delivery skew is a finding rather than an error, and
   colouring it as an error would answer a question the module leaves open.   */

.sim .ai-setts,
.sim .ai-duties,
.sim .ai-dutybox,
.sim .ai-books,
.sim .ai-bookbox,
.sim .ai-asserts,
.sim .ai-steps,
.sim .ai-credbox,
.sim .ai-answers,
.sim .ai-expbox,
.sim .ai-covers,
.sim .ai-coverbox,
.sim .ai-checks,
.sim .ai-checkbox,
.sim .ai-delrows,
.sim .ai-delbox { --ai:var(--stage,var(--acad-ai)) }

/* ── 5.1. THE DUTY PANEL ───────────────────────────────────────────────────
   Three labelled groups of toggles, then seven duties as rows. A duty that
   does not apply in the selected place stays visible and loses its accent,
   because a reader needs to see that it exists somewhere else. */
.ai-setts{display:flex;flex-direction:column;gap:9px;margin:0 0 12px}
.ai-sgrp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ai-sgt{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);width:100%}
.ai-fixed{margin:0 0 12px;padding:11px 13px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--ai,var(--acad-ai));border-radius:0 9px 9px 0;
  font-size:12px;line-height:1.55;color:var(--ink-3)}
.ai-fixed b{color:var(--ink-2);font-weight:600}

.ai-duties{display:flex;flex-direction:column;gap:4px;margin:0 0 4px}
.ai-duty{display:grid;grid-template-columns:minmax(180px,1fr) 62px;align-items:center;gap:10px;
  width:100%;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;opacity:.62}
.ai-duty.ai-on{opacity:1;border-left-color:var(--ai,var(--acad-ai))}
.ai-duty:hover{background:var(--bg-3)}
.ai-duty:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-duty.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-dt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-ds{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-dutybox{margin-top:12px;min-height:56px}
.ai-agy{margin:8px 0 0;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
  font-size:12px;line-height:1.55;color:var(--ink-3)}
.ai-agy b{color:var(--ink-2);font-weight:600}

/* ── 5.2. FOUR RULEBOOKS ───────────────────────────────────────────────────
   Three columns per row: the rulebook, its trigger, and whether it fired. The
   trigger sits in the middle because it is what the module is about, and a
   reader comparing four rows is comparing four triggers. */
.ai-books{display:flex;flex-direction:column;gap:4px;margin:10px 0 0}
.ai-book{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,1.1fr) 56px;
  align-items:center;gap:10px;width:100%;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-book:hover{background:var(--bg-3)}
.ai-book:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-book.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-book.ai-fires{border-left-color:var(--ai,var(--acad-ai))}
.ai-bt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-btr{font-size:11.5px;line-height:1.4;color:var(--ink-4)}
.ai-book.ai-fires .ai-btr{color:var(--ink-3)}
.ai-bf{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-book.ai-fires .ai-bf{color:var(--ai,var(--acad-ai))}
.ai-bookbox{margin-top:12px;min-height:56px}

/* ── 5.3. THE CREDENTIAL ───────────────────────────────────────────────────
   Six assertions in one list, three established and three not, side by side at
   the same weight. The three that are not established are the exhibit and they
   are not dimmed, because dimming would read as less important. */
.ai-asserts{margin:12px 0 0}
.ai-asl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.ai-as{display:grid;grid-template-columns:106px minmax(150px,1fr);align-items:center;gap:10px;
  padding:8px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 8px 8px 0}
.ai-as.ai-yes{border-left-color:var(--money)}
.ai-as.ai-no{border-left-color:var(--warn)}
.ai-ask{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.ai-as.ai-yes .ai-ask{color:var(--money)}
.ai-as.ai-no .ai-ask{color:var(--warn)}
.ai-ast{font-size:12.5px;line-height:1.4;color:var(--ink-2)}

.ai-steps{display:flex;flex-direction:column;gap:4px;margin:12px 0 0}
.ai-step{display:grid;grid-template-columns:minmax(170px,1fr) 106px;align-items:center;gap:10px;
  width:100%;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-step:hover{background:var(--bg-3)}
.ai-step:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-step.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-step.ai-broke{border-left-color:var(--warn)}
.ai-stt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-sts{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-step.ai-broke .ai-sts{color:var(--warn)}
.ai-credbox{margin-top:12px;min-height:56px}

/* ── 5.3, SECOND COMPONENT. THE EXPORT SETTING ─────────────────────────────
   One question, two answers, two lists. The smallest exhibit in the book and
   it is styled at full weight deliberately, because its finding is as large as
   anything in the chapter. */
.ai-q{margin:12px 0 8px;font-size:14px;line-height:1.45;color:var(--ink);font-weight:600}
.ai-answers{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ai-ansb{padding:10px 16px;cursor:pointer;color:var(--ink-3);font:inherit;font-size:13px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  transition:background .14s,border-color .14s}
.ai-ansb:hover{background:var(--bg-3)}
.ai-ansb:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-ansb.on{border-color:var(--ai,var(--acad-ai));background:var(--bg-3);color:var(--ink)}
.ai-cl{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:5px}
.ai-cg,.ai-cc{padding:9px 11px;font-size:12px;line-height:1.55;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 8px 8px 0}
.ai-cg{border-left-color:var(--money)}
.ai-cc{border-left-color:var(--warn)}
.ai-cg b,.ai-cc b{color:var(--ink-2);font-weight:600}
.ai-expbox{min-height:56px}

/* ── 5.4. THE COVER PANEL, AND THE THIRD COLUMN ────────────────────────────
   Three columns of prose at equal weight. The third carries the accent
   because it is the one nobody reads and the layout exists to stop that. */
.ai-covers{display:flex;flex-direction:column;gap:4px;margin:12px 0 0}
.ai-cov{display:grid;grid-template-columns:minmax(180px,1fr) 116px;align-items:center;gap:10px;
  width:100%;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-cov:hover{background:var(--bg-3)}
.ai-cov:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-cov.sel{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai))}
.ai-cvt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-cvr{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-coverbox{margin-top:12px;min-height:56px}
.ai-cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ai-col3{padding:11px 13px;background:var(--bg-2);border:1px solid var(--line);
  border-top:3px solid var(--line-2);border-radius:0 0 9px 9px;
  font-size:12px;line-height:1.55;color:var(--ink-3)}
.ai-col3 b{color:var(--ink-2);font-weight:600}
.ai-col3.ai-x3{border-top-color:var(--warn)}
.ai-col3.ai-m3{border-top-color:var(--ai,var(--acad-ai))}
.ai-c3h{display:block;margin-bottom:5px;font-family:var(--ui);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.ai-checks{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--line)}
.ai-checkbox:not(:empty){margin-top:12px}

/* ── 5.5. THE DELIVERY BARS ────────────────────────────────────────────────
   Two bars, full width, same total. No red anywhere: a skew is a finding
   rather than an error, and colouring it as an error would answer a question
   the module deliberately leaves open. */
.ai-delrows{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.ai-delrow{display:flex;flex-direction:column;gap:4px}
.ai-dl2{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.ai-delbar{display:flex;width:100%;height:52px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2)}
.ai-dm,.ai-dw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:48px;padding:0 4px;overflow:hidden;text-align:center;
  transition:flex-grow .3s var(--ease,ease)}
.ai-askedbar .ai-dm,.ai-askedbar .ai-dw{background:var(--bg-3)}
.ai-gotbar .ai-dm{background:color-mix(in srgb,var(--ai,var(--acad-ai)) 30%,transparent)}
.ai-gotbar .ai-dw{background:color-mix(in srgb,var(--ai,var(--acad-ai)) 10%,transparent)}
.ai-dm b,.ai-dw b{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:600}
.ai-dm i,.ai-dw 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-delcost{margin:6px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.ai-delcost b{color:var(--warn);font-weight:600}
.ai-rem{border-style:dashed}
.ai-delbox{margin-top:12px;min-height:56px}

/* ── NARROW ────────────────────────────────────────────────────────────────
   The three cover columns stack in source order, so the condition column is
   read last and keeps its accent. The rulebook rows drop the trigger to a
   second line rather than truncating it, because the trigger is the content. */
@media (max-width:520px){
  .ai-cols3{grid-template-columns:1fr}
  .ai-col3{border-radius:0 0 9px 9px}
}
@media (max-width:420px){
  .ai-book{grid-template-columns:minmax(150px,1fr) 52px;grid-template-areas:"t f" "r r";gap:6px 8px}
  .ai-bt{grid-area:t}
  .ai-bf{grid-area:f}
  .ai-btr{grid-area:r}
  .ai-duty{grid-template-columns:minmax(160px,1fr) 56px;gap:8px;padding:9px 10px}
  .ai-step{grid-template-columns:minmax(150px,1fr) 98px;gap:8px;padding:9px 10px}
  .ai-cov{grid-template-columns:minmax(140px,1fr) 108px;gap:8px;padding:9px 10px}
  .ai-as{grid-template-columns:100px minmax(120px,1fr);gap:8px;padding:8px 10px}
  .ai-delbar{height:58px}
  .ai-dm,.ai-dw{min-width:44px;padding:0 2px}
}