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

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

   ── ONE COLOUR CONVENTION, USED IN FOUR PLACES ──────────────────────────────

   Amber means "look at this", green means "this is settled", and neither means
   right or wrong. That matters more in this chapter than anywhere else in the
   book, because two of these exhibits ask a reader to commit to an answer and
   then show them what the documentation says. Colouring a reader's answer red
   would teach them the chapter is a test. It is a count.

   So the day exhibit and the sorting exhibit mark the ANSWER rather than the
   reader: amber where the thing arrived without anybody choosing it, green
   where somebody chose it, and the book hue where the honest answer is both. */

.sim .ai-claimbox,
.sim .ai-frames,
.sim .ai-day,
.sim .ai-things,
.sim .ai-sortbox,
.sim .ai-places,
.sim .ai-total { --ai:var(--stage,var(--acad-ai)) }

/* ── SHARED SMALL PARTS ────────────────────────────────────────────────────
   The definition list, the answer paragraph and the pick row are used by more
   than one exhibit in this file, so they are written once. */
.ai-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;margin:10px 0 0;
  font-size:12.5px}
.ai-dl dt{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);padding-top:3px}
.ai-dl dd{margin:0;line-height:1.5;color:var(--ink-2)}

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

.ai-picks,.ai-marks,.ai-buckets,.ai-modes,.ai-frameact{display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 12px}
.ai-marks,.ai-buckets{margin:10px 0 0}
.ai-pick.on{border-color:var(--ai,var(--acad-ai));background:var(--bg-3);color:var(--ink)}
.ai-pick.ai-opened{border-style:solid;color:var(--ink-2)}

/* ── 0A. THE THREE CLAIMS ──────────────────────────────────────────────────
   The circulating form and the published form are the comparison, so they are
   styled as two blocks of the same weight rather than as a claim and a
   correction. The reader is meant to see two sentences, not a verdict. */
.ai-heard{margin:0;padding:11px 13px;font-family:var(--text);font-size:14px;line-height:1.6;
  color:var(--ink);background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--ink-4);border-radius:0 9px 9px 0}
.ai-heard b,.ai-printed b{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px;font-weight:600}
.ai-printed{margin:12px 0 0;padding:11px 13px;font-family:var(--text);font-size:14px;
  line-height:1.6;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--ai,var(--acad-ai));border-radius:0 9px 9px 0}
.ai-printed b{color:var(--ai,var(--acad-ai))}
.ai-restate{margin:12px 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.ai-addedh{margin:14px 0 6px;font-size:13px;color:var(--ink-2)}
.ai-addedh b{color:var(--ink);font-weight:600}
.ai-added{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.ai-added li{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ai-closing{margin:14px 0 0;padding:10px 13px;font-size:13px;line-height:1.6;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--money);
  border-radius:0 8px 8px 0}

/* ── 0A. THE THREE FRAMES ──────────────────────────────────────────────────
   Three cards, and the question is the loudest line on each, because the whole
   exhibit is that they are answering three different questions. */
.ai-frames{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ai-frame{background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 9px 9px 0;padding:11px 13px}
.ai-frame.sel{border-left-color:var(--ai,var(--acad-ai));background:var(--bg-3)}
.ai-fh{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  color:inherit;font:inherit;cursor:pointer}
.ai-fh:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:3px}
.ai-fw{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.ai-fq{display:block;font-family:var(--text);font-size:14px;line-height:1.5;color:var(--ink)}
.ai-fs{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ai-gives{margin:9px 0 0;padding:9px 11px;font-size:12.5px;line-height:1.55;color:var(--ink-2);
  background:var(--warn-soft);border:1px solid var(--warn);border-radius:8px}
.ai-cannot{margin:0 0 9px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.ai-cannot b{color:var(--warn);font-weight:600}
.ai-caution{margin:0 0 9px;font-family:var(--ui);font-size:11.5px;line-height:1.55;
  color:var(--ink-3)}

/* ── 0B. THE DAY ───────────────────────────────────────────────────────────
   Five moments down a clock. The time column has to line up or the reading
   stops being a morning, so the header row carries a floor width and the list
   scrolls rather than reflowing. */
/* THE ROWS CARRY A MIN-WIDTH, SO THE LIST HAS TO BE THE SCROLL PORT. Nine
   other lists in this book already do this and these three did not, which is
   a defect no jsdom suite can see: the row is 298px, the card is 284px at a
   360px viewport, and `div.sim {overflow-x:hidden}` above it cut the last
   column off with no scroll anywhere to reveal it. The real browser render
   pass found it and named the clipping ancestor. */
.ai-day{list-style:none;margin:0 0 12px;padding:0;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-mom{background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 9px 9px 0;overflow:hidden;
  /* 298 for the row plus the card's own 3px left border and 1px right one.
     box-sizing is border-box, so a card at 298 gives the row 294 and clips
     the last 4px of it. The render pass reported exactly 3px. */
  min-width:302px}
.ai-mom.sel{background:var(--bg-3)}
.ai-mom.ai-inherited{border-left-color:var(--warn)}
.ai-mom.ai-chosen{border-left-color:var(--money)}
.ai-mom.ai-ambiguous{border-left-color:var(--ai,var(--acad-ai))}
.ai-mh{display:grid;grid-template-columns:46px minmax(150px,1fr) 92px;align-items:center;gap:10px;
  width:100%;min-width:298px;text-align:left;padding:10px 12px;cursor:pointer;color:inherit;
  font:inherit;background:none;border:0}
.ai-mh:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:-2px}
.ai-when{font-family:var(--mono);font-size:12px;color:var(--ink-4)}
.ai-mt{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-mk{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-mbody{padding:0 12px 12px}
.ai-md2{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.ai-refuse{margin:10px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.6;
  color:var(--ink-3)}
.ai-refuse b{color:var(--ink-2);font-weight:600}

/* ── 0.1. THE NINE THINGS ──────────────────────────────────────────────────
   The exemplar's exhibit. Each thing is a row with the line it was sorted onto
   beside it, so a reader can run their eye down the second column and see the
   partition they have made. */
.ai-things{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-thing{display:grid;grid-template-columns:minmax(170px,1fr) 116px;align-items:center;gap:10px;
  width:100%;min-width:300px;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-thing:hover{background:var(--bg-3);border-color:var(--line-2)}
.ai-thing:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-thing.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-thing.ai-right{border-left-color:var(--money)}
.ai-thing.ai-wrong{border-left-color:var(--warn)}
.ai-thing.ai-both{border-left-color:var(--ai,var(--acad-ai))}
.ai-tt{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-tb{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-sortbox{margin-top:12px;min-height:56px}
.ai-what2{margin:0;font-family:var(--text);font-size:14px;line-height:1.5;color:var(--ink)}
.ai-bdefs{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.ai-bdefs li{font-size:12px;line-height:1.55;color:var(--ink-3)}
.ai-bdefs b{color:var(--ink-2);font-weight:600}

/* The second view: the same nine grouped by what they do, which is the reading
   the module argues against. Deliberately drawn as three plain groups with the
   budget line printed small beside each, so the mismatch is visible rather than
   described. */
.ai-group{margin-bottom:12px}
.ai-group h4{margin:0 0 6px;font-family:var(--ui);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);font-weight:600}
.ai-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.ai-group li{display:grid;grid-template-columns:minmax(150px,1fr) 128px;gap:10px;
  align-items:baseline;padding:7px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px}
.ai-gt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-gl{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-whatnote{margin:12px 0 0;padding:11px 13px;font-size:13px;line-height:1.6;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--ai,var(--acad-ai));border-radius:0 8px 8px 0}
.ai-whatnote b{color:var(--ink);font-weight:600}

/* ── 0.2. THE TWELVE PLACES ────────────────────────────────────────────────
   The four column headings sit above the list as a reminder of what the reader
   is filling in, because the panel deliberately supplies no fields. It supplies
   the places to look. */
.ai-cols{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--line)}
.ai-cols span{font-family:var(--ui);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4)}
.ai-places{list-style:none;margin:0;padding:0;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-place{background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:0 9px 9px 0;overflow:hidden;
  min-width:300px}
.ai-place.sel{background:var(--bg-3)}
.ai-place.ai-found{border-left-color:var(--warn)}
.ai-place.ai-none{border-left-color:var(--money)}
.ai-ph{display:grid;grid-template-columns:minmax(160px,1fr) 118px;align-items:center;gap:10px;
  width:100%;min-width:296px;text-align:left;padding:9px 12px;cursor:pointer;color:inherit;
  font:inherit;background:none;border:0}
.ai-ph:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:-2px}
.ai-pt{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-ps{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-pbody{padding:0 12px 12px}
.ai-pl{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.ai-total{margin-top:12px;min-height:48px}
.ai-count{margin:0 0 9px;font-family:var(--text);font-size:14px;line-height:1.55;color:var(--ink)}
.ai-count b{font-weight:600}

/* ── NARROW ────────────────────────────────────────────────────────────────
   THE ROWS DO NOT REFLOW AND THE TYPE DOES NOT SHRINK. Below the floor width
   the lists scroll. Nothing in this file is under 10px at any width. */
@media (max-width:420px){
  /* 42 + 120 + 88 + 16 of gap + 20 of padding = 286, inside the 298 the row
     declares. At the old 150 floor the tracks needed 316 and the last column
     spilled 8px out of the button, which the card then clipped. */
  .ai-mh{grid-template-columns:42px minmax(120px,1fr) 88px;gap:8px;padding:10px}
  .ai-thing{grid-template-columns:minmax(170px,1fr) 110px;gap:8px;padding:9px 10px}
  /* 150 + 112 + 8 of gap + 20 of padding = 290, inside the 296 the row
     declares. Same repair as .ai-mh above. */
  .ai-ph{grid-template-columns:minmax(150px,1fr) 112px;gap:8px;padding:9px 10px}
  .ai-group li{grid-template-columns:minmax(150px,1fr) 120px;gap:8px;padding:7px 10px}
  .ai-heard,.ai-printed{padding:10px 12px}
}