/* AI AND AUTOMATION, chapter 6: 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 READOUT ROW IS THE ONE SHAPE THIS CHAPTER ADDS ──────────────────────

   Three of the five exhibits print two or three large numbers side by side and
   nothing else: what your test can detect against what has been measured, the
   real effect against the measured one, where the ratio started against where
   it is now. **They share one class rather than three**, because they are the
   same object and a reader who learns it at 6.2 should not have to learn it
   again at 6.3 and 6.4.

   One cell in that row is a fixed external figure the reader cannot move. It is
   drawn in the accent rather than in a warning colour, because it is not a
   problem. It is the ceiling, and the reader's own number is the thing that
   moves against it.

   ── AND THE BET LIST IS NUMBERED ONLY ONCE A RANKING IS CHOSEN ──────────────

   Before the reader picks an ordering the position column shows a dot rather
   than a number. Four bets shown in a fixed order with numbers beside them
   would read as a ranking nobody asked for, which is the thing 6.1 exists to
   make the reader do deliberately.                                          */

.sim .ai-ins,
.sim .ai-ways,
.sim .ai-bets,
.sim .ai-rankbox,
.sim .ai-mde,
.sim .ai-powbox,
.sim .ai-leakout,
.sim .ai-leakbox,
.sim .ai-basebox,
.sim .ai-rpebox { --ai:var(--stage,var(--acad-ai)) }

/* ── THE SHARED READOUT ROW, USED BY 6.2, 6.3 AND 6.4 ──────────────────────
   Two or three cells, equal width, large mono figures. The fixed external
   figure takes the accent rather than a warning colour, because it is the
   ceiling rather than a fault. */
.ai-mde{margin:0 0 14px}
.ai-mderow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.ai-mdecell{display:flex;flex-direction:column;gap:5px;padding:12px 13px;background:var(--bg-2);
  border:1px solid var(--line);border-top:3px solid var(--line-2);border-radius:0 0 9px 9px}
.ai-mdecell b{font-family:var(--mono);font-size:22px;line-height:1.1;color:var(--ink);
  font-weight:600}
.ai-mdek{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);line-height:1.4}
.ai-mdecell.ai-over{border-top-color:var(--warn)}
.ai-mdecell.ai-over b{color:var(--warn)}
.ai-mdecell.ai-under{border-top-color:var(--money)}
.ai-mdecell.ai-under b{color:var(--money)}
.ai-mdecell.ai-line{border-top-color:var(--ai,var(--acad-ai))}

/* ── 6.1. THE THREE INPUTS AND THE FOUR BETS ───────────────────────────────
   The three inputs are cards because they are definitions rather than choices.
   The bets are rows because they get reordered. */
.ai-ins{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;
  margin:0 0 10px}
.ai-in{display:flex;flex-direction:column;gap:4px;padding:11px 13px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:9px}
.ai-ink{font-family:var(--mono);font-size:15px;color:var(--ai,var(--acad-ai));font-weight:600}
.ai-int{font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.ai-ind{font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.ai-warnline{margin:0 0 12px;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-warnline b{color:var(--ink-2);font-weight:600}
.ai-ways{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ai-bets{display:flex;flex-direction:column;gap:4px}
.ai-bet{display:grid;grid-template-columns:26px minmax(150px,1fr) 106px;align-items:center;gap:10px;
  width:100%;text-align:left;padding:10px 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-bet:hover{background:var(--bg-3)}
.ai-bet:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-bet.sel{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai))}
.ai-bn{font-family:var(--mono);font-size:13px;color:var(--ink-4);text-align:center}
.ai-btt{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-bz{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}
.ai-rankbox{margin-top:12px;min-height:56px}

/* ── 6.2 AND 6.3. THE SETTINGS AND THE OUTPUT BOXES ────────────────────────
   The setting groups reuse chapter 5's shape unchanged, because a reader who
   has just done the duty panel should not have to learn a second one. */
.ai-powbox{min-height:64px}
.ai-leakout{margin:0 0 14px}
.ai-leakbox{min-height:64px}
.ai-basebox{margin-top:12px;min-height:48px}

/* ── 6.4. THE FIFTH LEVER ──────────────────────────────────────────────────
   Drawn dashed, like chapter 5's remedy control, so a reader can see before
   pressing it that it belongs to a different class from the other four. */
.ai-rpebox{margin-top:12px;min-height:56px}

/* ── NARROW ────────────────────────────────────────────────────────────────
   The readout cells fall to one per row rather than shrinking the figures,
   because the figures are the exhibit. The bet rows drop the money column to
   a second line rather than truncating it. */
@media (max-width:520px){
  .ai-mderow{grid-template-columns:1fr}
  .ai-mdecell{border-radius:0 0 9px 9px}
  .ai-ins{grid-template-columns:1fr}
}
@media (max-width:420px){
  .ai-bet{grid-template-columns:24px minmax(130px,1fr);grid-template-areas:"n t" ". z";gap:4px 8px;
    padding:10px}
  .ai-bn{grid-area:n}
  .ai-btt{grid-area:t}
  .ai-bz{grid-area:z;text-align:left}
  .ai-mdecell b{font-size:20px}
}