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

   Three exhibits. The render-pass rules from ai_kit.css apply unchanged and are
   not restated. The smallest value here is 10px. The readout row and the
   setting groups are chapter 5's and chapter 6's, reused rather than redrawn.

   ── THE EMPTY COLUMN HAS TO LOOK FINISHED ───────────────────────────────────

   Same rule as chapter 4's empty panel, applied to half of a two-column answer.
   The answer-engine side is drawn at the same weight as the shopper side, with
   its own heading and its own body text, and it carries the accent rather than
   a warning colour. **A reader who reads it as a column that failed to load has
   learned nothing.**

   It is not dimmed and it is not greyed. The absence is the finding, so it is
   printed at full contrast.

   ── AND THE FOUR SIZES ARE DRAWN ON A LOGARITHMIC TRACK ─────────────────────

   Four rows on one shared track from 0.01 to 100 per cent, which is the only
   way four figures spanning three orders of magnitude fit on a phone. Three of
   them are points drawn at a minimum width so they stay visible; one is a real
   band and it is wide, which is the point.

   The axis is labelled at three places rather than continuously, because a
   reader needs to know the scale is logarithmic and does not need to read
   values off it.                                                            */

.sim .ai-qs2,
.sim .ai-listbox,
.sim .ai-loglist,
.sim .ai-logbox,
.sim .ai-scale2,
.sim .ai-scalebox { --ai:var(--stage,var(--acad-ai)) }

/* ── 7.1. THE THREE QUESTIONS AND THE TWO COLUMNS ──────────────────────────
   The empty column is at full weight with the accent, because the absence is
   the exhibit rather than a failure. */
.ai-qs2{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.ai-q2{display:grid;grid-template-columns:minmax(170px,1fr) 72px;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-q2:hover{background:var(--bg-3)}
.ai-q2:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-q2.sel{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai))}
.ai-q2t{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-q2s{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ai-side{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-side.ai-empty{border-top-color:var(--ai,var(--acad-ai))}
.ai-sh{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);line-height:1.4}
.ai-sv{font-family:var(--mono);font-size:14px;line-height:1.3;color:var(--ink);font-weight:600}
.ai-side.ai-empty .ai-sv{color:var(--ai,var(--acad-ai))}
.ai-sd{font-size:12px;line-height:1.55;color:var(--ink-3)}
.ai-sd b{color:var(--ink-2);font-weight:600}
.ai-listbox{min-height:64px}

/* ── 7.2. THE LOG ROWS ─────────────────────────────────────────────────────
   Identified and unidentified are two colours rather than two sections, so a
   reader sees the mixture rather than a tidy split. */
.ai-loglist{display:flex;flex-direction:column;gap:4px;margin:0 0 4px}
.ai-logrow{display:grid;grid-template-columns:minmax(180px,1fr) 74px;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-logrow:hover{background:var(--bg-3)}
.ai-logrow:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-logrow.sel{background:var(--bg-3)}
.ai-logrow.ai-known{border-left-color:var(--money)}
.ai-logrow.ai-unk{border-left-color:var(--warn)}
.ai-lw{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-ln{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);text-align:right}
.ai-logrow.ai-known .ai-ln{color:var(--money)}
.ai-logrow.ai-unk .ai-ln{color:var(--warn)}
.ai-logbox{margin-top:12px;min-height:56px}

/* ── 7.2, SECOND COMPONENT. THE LOGARITHMIC TRACK ──────────────────────────
   One shared track, four rows. Point figures get a minimum width so they stay
   visible; the company figure is a real band and it is wide. */
.ai-scale2{display:flex;flex-direction:column;gap:5px;margin:0 0 4px}
.ai-scrow{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,1.6fr) 92px;
  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-scrow:hover{background:var(--bg-3)}
.ai-scrow:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-scrow.sel{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai))}
.ai-sct{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ai-sctrack{position:relative;display:block;height:12px;border-radius:6px;background:var(--bg-3);
  box-shadow:inset 0 0 0 1px var(--line)}
.ai-scband{position:absolute;top:0;bottom:0;border-radius:6px;
  background:var(--ai,var(--acad-ai));opacity:.75}
.ai-scrow.sel .ai-scband{opacity:1}
.ai-scv{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:right}
.ai-scaxis{display:flex;justify-content:space-between;margin-top:2px;padding:0 11px;
  font-family:var(--ui);font-size:10px;color:var(--ink-4)}
.ai-scalebox{margin-top:12px;min-height:56px}

/* ── NARROW ────────────────────────────────────────────────────────────────
   The two answer columns stack, keeping the empty one second and keeping its
   accent. The scale rows drop the value to a second line rather than losing
   the track, because the track is the comparison. */
@media (max-width:520px){
  .ai-two{grid-template-columns:1fr}
}
@media (max-width:420px){
  .ai-scrow{grid-template-columns:minmax(120px,1fr) 84px;grid-template-areas:"t v" "k k";
    gap:6px 8px;padding:9px 10px}
  .ai-sct{grid-area:t}
  .ai-scv{grid-area:v}
  .ai-sctrack{grid-area:k}
  .ai-q2{grid-template-columns:minmax(150px,1fr) 64px;gap:8px;padding:10px}
  .ai-logrow{grid-template-columns:minmax(150px,1fr) 68px;gap:8px;padding:9px 10px}
}