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

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

   ── THE COLOUR RULE THIS CHAPTER ADDS, AND IT IS ABOUT A THIRD STATE ────────

   Chapter 1 needed right and wrong. Chapter 2 needed right, wrong and both.
   This chapter needs a fourth: NO ANSWER IS AVAILABLE.

   Two of the six failure figures cannot be sorted, because their publisher
   never said which event was counted. That is not a reader getting it wrong and
   it is not an ambiguous answer either. It is an absence, and it has to look
   different from both, or the exhibit teaches that everything has an answer if
   you look hard enough.

   So: green for a correct sort, red for a wrong one, the book hue for a genuine
   both, and NEUTRAL WITH A DASHED EDGE for an absence. Dashed because it is the
   one state that is about the source rather than about the reader.           */

.sim .ai-figs,
.sim .ai-figbox,
.sim .ai-form,
.sim .ai-rungs,
.sim .ai-claimlist,
.sim .ai-rungbox,
.sim .ai-evbox,
.sim .ai-modebox,
.sim .ai-asks,
.sim .ai-askbox { --ai:var(--stage,var(--acad-ai)) }

/* ── 3.1. THE SIX FIGURES ──────────────────────────────────────────────────
   A claim and the event it was sorted into, in two columns that line up down
   all six, because the reading is that six figures answer four questions. */
.ai-figs{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-fig{display:grid;grid-template-columns:minmax(180px,1fr) 132px;align-items:center;gap:10px;
  width:100%;min-width:322px;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-fig:hover{background:var(--bg-3)}
.ai-fig:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-fig.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-fig.ai-right{border-left-color:var(--money)}
.ai-fig.ai-wrong{border-left-color:var(--open)}
/* THE FOURTH STATE. Dashed, neutral, and visibly not a verdict on the reader. */
.ai-fig.ai-none2{border-left-color:var(--ink-4);border-left-style:dashed}
.ai-fc{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.ai-fe{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-figbox{margin-top:12px;min-height:56px}

/* ── 3.1. THE AGREEMENT FORM ───────────────────────────────────────────────
   Four fields with a hint under each. The fourth is the one everybody leaves
   out, so the form is deliberately drawn as a list that is visibly incomplete
   rather than as a form that submits. */
.ai-form{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ai-ff{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 9px 9px 0;padding:0 0 10px}
.ai-ff.ai-done2{border-left-color:var(--money)}
.ai-fb{display:grid;grid-template-columns:minmax(160px,1fr) 76px;align-items:center;gap:10px;
  width:100%;min-width:270px;text-align:left;padding:10px 12px 6px;cursor:pointer;color:inherit;
  font:inherit;background:none;border:0}
.ai-fb:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:-2px}
.ai-ft2{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-fs2{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-ff.ai-done2 .ai-fs2{color:var(--money)}
.ai-fh2{margin:0;padding:0 12px;font-size:12px;line-height:1.55;color:var(--ink-3)}
.ai-formbox{margin-top:12px}

/* ── 3.2. THE FIVE POSITIONS ───────────────────────────────────────────────
   A reference list rather than a control. It is drawn small and above the
   claims, because a reader needs it beside them rather than instead of them. */
.ai-rungs{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding-bottom:4px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.ai-rung{display:grid;grid-template-columns:22px minmax(150px,1fr) minmax(120px,.8fr);
  align-items:center;gap:9px;min-width:302px;padding:7px 11px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:8px}
.ai-rn{font-family:var(--mono);font-size:12px;color:var(--ink-4);text-align:center}
.ai-rt2{font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.ai-rw{font-family:var(--ui);font-size:10.5px;color:var(--ink-4);text-align:right}
.ai-claimlist{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-rungbox{margin-top:12px;min-height:56px}
.ai-qs{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.ai-qs li{font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.ai-qs b{color:var(--ink);font-weight:600}
.ai-evrow{margin-top:14px}
.ai-evbox: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}
/* ── 3.2 THE TWO PHASE BUTTONS ──────────────────────────────────────────
   These were emitted as `btn ai-ph` and picked up chapter 0's place-row
   rule, which is a 296px two-column grid. On a phone they were 296px wide
   inside a 288px flex row and the second column was clipped away. They are
   pills and they now say so. */
.ai-mode{padding:9px 14px;cursor:pointer;color:var(--ink-3);font:inherit;font-size:12.5px;
  line-height:1.35;background:var(--bg-2);border:1px solid var(--line);border-radius:999px}
.ai-mode:hover{background:var(--bg-3)}
.ai-mode:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-mode.on{border-color:var(--ai,var(--acad-ai));background:var(--bg-3);color:var(--ink)}
.ai-modebox{margin-top:12px;min-height:48px}

/* ── 3.3. THE THREE FORMS ──────────────────────────────────────────────────
   Three full sentences stacked, because the exhibit is that they read
   similarly. They must not be summarised into labels or the point is lost. */
.ai-asks{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-forms{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ai-form2{display:block;width:100%;text-align:left;padding:11px 13px;cursor:pointer;
  color:var(--ink-2);font:inherit;font-size:12.5px;line-height:1.55;background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:0 9px 9px 0;
  transition:background .14s,border-color .14s}
.ai-form2:hover{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai))}
.ai-form2:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-chose{margin:10px 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 9px 9px 0}
.ai-chose b{color:var(--ink);font-weight:600}
.ai-askbox{margin-top:12px;min-height:56px}

/* ── NARROW ────────────────────────────────────────────────────────────────
   Rows scroll rather than reflow. The three ask forms stack at every width
   already, because they are sentences rather than a comparison. */
@media (max-width:420px){
  .ai-fig{grid-template-columns:minmax(180px,1fr) 124px;gap:8px;padding:9px 10px}
  .ai-fb{grid-template-columns:minmax(160px,1fr) 72px;gap:8px;padding:10px 10px 6px}
  .ai-rung{grid-template-columns:20px minmax(150px,1fr) minmax(116px,.8fr);gap:8px;padding:7px 10px}
  .ai-form2{padding:10px 12px}
}