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

   Six exhibits. The two render-pass rules from ai_kit.css apply unchanged and
   are not restated: nothing under 9px at 360px, and a wide exhibit scrolls
   sideways rather than reflowing or shrinking. The smallest value here is 10px.

   ── THE COLOUR RULE THIS CHAPTER ADDS ───────────────────────────────────────

   Two exhibits here disappoint the reader on purpose, and neither may look like
   an error. The role filter returns nothing useful and the tiering experiment
   does not support the practice people reach for it to defend.

   So amber is used for BOTH of those, because on this platform amber means
   "look at this" rather than "broken". Red is reserved for a wrong sort in the
   failure exhibit, which is the only place in the chapter where a reader can
   actually be wrong about something.                                         */

.sim .ai-rows,
.sim .ai-readout,
.sim .ai-design,
.sim .ai-resultbox,
.sim .ai-deploybox,
.sim .ai-fails,
.sim .ai-sortitems,
.sim .ai-hosts,
.sim .ai-hostbox,
.sim .ai-bill,
.sim .ai-billbox { --ai:var(--stage,var(--acad-ai)) }

/* ── SHARED SMALL PARTS ────────────────────────────────────────────────────
   The slider label, the warning paragraph and the six-item list are used by
   more than one exhibit in this chapter, so they are written once. */
.ai-slab{display:block;margin:0 0 12px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.ai-slab b{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:12.5px}
.ai-slab input[type=range]{display:block;width:100%;margin-top:6px}

.ai-warn2{margin:10px 0 0;padding:10px 13px;font-size:13px;line-height:1.6;color:var(--ink-2);
  background:var(--warn-soft);border:1px solid var(--warn);border-radius:9px}
.ai-warn2 b{color:var(--warn);font-weight:600}

.ai-spread{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.ai-spread b{color:var(--ink);font-weight:600}

.ai-six{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.ai-six li{font-size:12.5px;line-height:1.55;color:var(--ink-2)}

.ai-wanted{margin:10px 0 0;padding:10px 13px;font-size:13px;line-height:1.6;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--ink-4);
  border-radius:0 8px 8px 0}
.ai-wanted b{color:var(--ink-2);font-weight:600}

.ai-by.on{border-color:var(--ai,var(--acad-ai));background:var(--bg-3);color:var(--ink)}

/* ── 1.1. THE CONSOLE ──────────────────────────────────────────────────────
   Five columns that must line up down the list, because the comparison a reader
   makes is vertical: bought against activated against used, group by group. So
   the rows carry a floor width and the list scrolls. */
.ai-rows{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-crow{display:grid;grid-template-columns:minmax(120px,1fr) 46px 46px 46px 46px;
  align-items:center;gap:8px;width:100%;min-width:326px;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-crow:hover{background:var(--bg-3);border-color:var(--line-2)}
.ai-crow:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-crow.sel{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai));
  box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-cn{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-cb,.ai-ca,.ai-cu{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--ink-3)}
.ai-cu{color:var(--ink)}
.ai-cp{font-family:var(--ui);font-size:11px;text-align:right;color:var(--ink-4)}
.ai-readout{margin-top:12px}

/* ── 1.1. THE EXPERIMENT ───────────────────────────────────────────────────
   The design list is above the result on purpose and the result is behind a
   press, so a reader meets the method before the headline. */
.ai-design{margin:0 0 12px}
.ai-objs{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.ai-obj{background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--warn);border-radius:0 9px 9px 0}
.ai-obj.sel{background:var(--bg-3)}
.ai-oh{display:block;width:100%;text-align:left;padding:10px 12px;cursor:pointer;color:var(--ink-2);
  font:inherit;font-size:13px;line-height:1.4;background:none;border:0}
.ai-oh:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:-2px}
.ai-od{margin:0;padding:0 12px 12px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.ai-od b{color:var(--ink);font-weight:600}

/* ── 1.2. THE FIVE DEPLOYMENTS ─────────────────────────────────────────────
   Where a promise lives is the exhibit, so the three states are three visibly
   different objects rather than three words. Green for a signed clause, amber
   for a page the provider can revise, neutral for a mixture. */
.ai-deploybox{margin-top:4px}
.ai-ans.ai-contract{border-left-color:var(--money)}
.ai-ans.ai-contract b{color:var(--money)}
.ai-ans.ai-policy{border-left-color:var(--warn)}
.ai-ans.ai-policy b{color:var(--warn)}
.ai-ans.ai-mixed{border-left-color:var(--ink-4)}
.ai-ans.ai-mixed b{color:var(--ink-2)}
.ai-ans.ai-none{border-left-color:var(--line-2)}
.ai-ans.ai-none b{color:var(--ink-3)}

/* ── 1.3. THE FIVE FAILURE MODES ───────────────────────────────────────────
   The evidence marker is the point of the exhibit, so it sits in the header of
   every panel at the same place and in the same size, and it is coloured by
   class rather than by whether the reader got anything right. */
/* Same repair as chapter 0's two lists, for the same reason and found the
   same way. The row is 290px inside 284px and was clipped rather than
   scrollable. */
.ai-fails{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;
  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-fail{background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 9px 9px 0}
.ai-fail.sel{background:var(--bg-3)}
.ai-fail.ai-m-observed{border-left-color:var(--warn)}
.ai-fail.ai-m-demonstrated{border-left-color:var(--ink-4)}
.ai-fail.ai-m-control{border-left-color:var(--line-2)}
.ai-fhr{display:grid;grid-template-columns:minmax(150px,1fr) 108px;align-items:center;gap:10px;
  width:100%;min-width:290px;text-align:left;padding:10px 12px;cursor:pointer;color:inherit;
  font:inherit;background:none;border:0}
.ai-fhr:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:-2px}
.ai-ft{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-fm{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  text-align:right;color:var(--ink-4)}
.ai-fail.ai-m-observed .ai-fm{color:var(--warn)}
.ai-fail .ai-dl{padding:0 12px}
.ai-mark{margin:0;padding:9px 12px 12px;font-family:var(--ui);font-size:11.5px;line-height:1.55;
  color:var(--ink-3)}

.ai-sortitems{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-item{display:grid;grid-template-columns:minmax(170px,1fr) 120px;align-items:center;gap:10px;
  width:100%;min-width:306px;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}
.ai-item:hover{background:var(--bg-3)}
.ai-item:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-item.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-item.ai-right{border-left-color:var(--money)}
.ai-item.ai-wrong{border-left-color:var(--open)}
.ai-it{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-ib{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}

/* ── 1.4. THE THREE HOSTS ──────────────────────────────────────────────────
   Four columns, and the third is the one the exhibit exists for: three
   different end dates for one model. It has to line up down the three rows. */
.ai-hosts{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-host{display:grid;grid-template-columns:minmax(130px,1fr) 74px minmax(120px,.9fr) 84px;
  align-items:center;gap:9px;width:100%;min-width:330px;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}
.ai-host:hover{background:var(--bg-3)}
.ai-host:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-host.sel{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai));
  box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-ht{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-hl{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}
.ai-he{font-family:var(--ui);font-size:11.5px;color:var(--ink);text-align:right}
.ai-hn{font-family:var(--ui);font-size:10.5px;color:var(--ink-4);text-align:right}
.ai-hostbox{margin-top:12px}

/* ── 1.4. THE BILL ─────────────────────────────────────────────────────────
   Two readouts side by side, because the whole exhibit is that they move in
   opposite directions. They must be legible together at 360px, so they stack
   there rather than shrinking. */
.ai-bcols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 4px}
.ai-bcol{padding:11px 13px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:9px;display:flex;flex-direction:column;gap:4px}
.ai-bk{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.ai-bv{font-family:var(--mono);font-size:14px;color:var(--ink)}
.ai-bs{font-family:var(--ui);font-size:11px;font-weight:600}
.ai-bs.ai-good{color:var(--money)}
.ai-bs.ai-bad{color:var(--warn)}
.ai-billbox{margin-top:4px}

/* ── NARROW ────────────────────────────────────────────────────────────────
   THE ROWS DO NOT REFLOW AND THE TYPE DOES NOT SHRINK. The one exception is the
   two bill readouts, which stack, because they are two independent figures
   rather than a comparison that has to line up down a list. */
@media (max-width:420px){
  .ai-crow{grid-template-columns:minmax(118px,1fr) 42px 42px 42px 42px;gap:7px;padding:9px 10px}
  .ai-fhr{grid-template-columns:minmax(150px,1fr) 100px;gap:8px;padding:10px}
  .ai-item{grid-template-columns:minmax(170px,1fr) 112px;gap:8px;padding:9px 10px}
  .ai-host{grid-template-columns:minmax(126px,1fr) 68px minmax(116px,.9fr) 78px;gap:8px;padding:9px 10px}
  .ai-bcols{grid-template-columns:1fr}
}