/* AI AND AUTOMATION: the shared kit's styles.

   Two components, and a reader meets both of them across eight chapters, so
   they are styled once here rather than eight times.

     A.aiBoard  the inventory, filling as the reader moves
     A.aiSizes  the five sizes, and the gap that is the whole book

   ── THE TWO RULES FROM THE RENDER PASS, AND BOTH ARE HARD ────────────────────

   1. NOTHING RENDERS UNDER 9px AT 360px WIDTH. The smallest value in this file
      is 10px and no rule below shrinks type at any breakpoint. The render pass
      measures it on every shot rather than judging by eye.

   2. A WIDE EXHIBIT SCROLLS SIDEWAYS WITH A RIGHT-EDGE FADE. It never scales
      down and it never reflows. A previous book narrowed a comparison grid on a
      phone expecting it to stack, it did not stack, every cell reflowed, and the
      row labels landed beside other rows' values. The board did not get smaller.
      It got scrambled, and it looked deliberate.

      Both components here are lists of rows whose columns must line up DOWN the
      list, because the comparison across the eight rows and across the five
      sizes is the teaching. So each row carries a floor width and the list
      scrolls rather than reflowing, and the right edge fades so a reader can see
      there is more. One proven pattern, already used by four earlier exhibits on
      this platform, not a second one invented here.

   ── THE HUE TOKEN, AND WHY IT IS --stage RATHER THAN --st ────────────────────

   app.js sets --stage on the page wrapper, to var(--a{n}) for the chapter the
   reader is in. It is the only hue token anything writes. Two earlier kit files
   reach for --st, which is declared nowhere on this platform, and survive on
   their fallbacks. Reaching for it here would work by the same accident, so this
   file asks for the token that is actually set and falls back to the book accent
   for anywhere the wrapper has not painted.

   Nothing here mints a colour or a scale. Every value is a token declared in
   academy.css.                                                                */

/* One local alias, so the fallback chain is written once rather than in every
   rule that needs the book's hue. */
.sim .ai-board,
.sim .ai-entry,
.sim .ai-scale,
.sim .ai-claims,
.sim .ai-gap,
.sim .ai-fiction { --ai:var(--stage,var(--acad-ai)) }

/* ── THE STATED FICTION ────────────────────────────────────────────────────
   Said on the face of the component, every time. The worked entries are from an
   invented advertiser and a reader must never have to wonder which parts of an
   exhibit are real. */
.ai-fiction{margin:0 0 12px;padding:8px 11px;font-family:var(--ui);font-size:11.5px;
  line-height:1.5;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}

/* ── THE INVENTORY BOARD ───────────────────────────────────────────────────

   Eight rows. The status column has to line up down all eight or the
   "written / written here / not yet" reading is lost, which is the whole
   picture. So the list scrolls sideways rather than letting a long title push
   the status out of column. */
.ai-board{list-style:none;margin:0;padding:0 0 6px;display:flex;flex-direction:column;gap:4px;
  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-board li{display:block}

.ai-row{display:grid;grid-template-columns:36px minmax(150px,1fr) 82px;align-items:center;
  gap:10px;width:100%;min-width:284px;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-row:hover{background:var(--bg-3);border-color:var(--line-2)}
.ai-row:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-row.sel{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai));
  box-shadow:inset 0 0 0 1px var(--line-2)}

.ai-row .ai-k{font-family:var(--mono);font-size:11.5px;color:var(--ink-4);letter-spacing:.02em}
.ai-row .ai-t{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-row .ai-st{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}

/* THE THREE STATES. Written, being written here, not yet. The middle one is the
   only one that is ever loud, because it is the row this module produces and a
   reader arriving cold needs to see which of the eight they are on. */
.ai-row.ai-done{border-left-color:var(--money)}
.ai-row.ai-done .ai-k{color:var(--money)}
.ai-row.ai-done .ai-st{color:var(--money)}
.ai-row.ai-now{border-left-color:var(--ai,var(--acad-ai));background:var(--bg-3)}
.ai-row.ai-now .ai-k{color:var(--ai,var(--acad-ai))}
.ai-row.ai-now .ai-t{color:var(--ink)}
.ai-row.ai-now .ai-st{color:var(--ai,var(--acad-ai))}
.ai-row.ai-todo{opacity:.72}
.ai-row.ai-todo .ai-t{color:var(--ink-3)}

/* ── THE ENTRY PANEL ───────────────────────────────────────────────────────
   Obligation C. The worked entry is shown for the row this module writes at
   every appearance, whether or not the reader has reached it, so somebody who
   has written nothing can still see what a good one looks like. It is the
   loudest thing in the component for that reason. */
.ai-entry{margin-top:12px;min-height:56px}
.ai-prompt{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.ai-what{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.ai-what b{color:var(--ink);font-weight:600}
.ai-worked{margin:0;padding:11px 13px;font-family:var(--text);font-size:13.5px;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-where{margin:8px 0 0;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}

/* ── THE FIVE SIZES ────────────────────────────────────────────────────────

   Five rows, largest at the top, with two markers on them. The distance between
   the markers is the exhibit, so the two must be readable at a glance and must
   never be the same colour: one is where somebody else measured and cannot be
   moved, the other is where the reader stands and is the only control. */
.ai-scale{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-size{display:grid;grid-template-columns:30px minmax(96px,1fr) minmax(112px,1.1fr);
  align-items:center;gap:10px;width:100%;min-width:284px;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-size:hover{background:var(--bg-3);border-color:var(--line-2)}
.ai-size:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-size .ai-sk{font-family:var(--mono);font-size:11.5px;color:var(--ink-4)}
.ai-size .ai-sn{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-size .ai-sm{display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.ai-size .ai-sm b{font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:600;white-space:nowrap;padding:2px 7px;border-radius:999px;
  border:1px solid currentColor}

/* THE TWO MARKERS. Amber for the claim, because on this platform amber means
   look at this rather than broken, and it is the thing the reader cannot move.
   The book hue for the reader's own position, because it is the control. */
.ai-mm{color:var(--warn);background:var(--warn-soft)}
.ai-md{color:var(--ai,var(--acad-ai));background:var(--bg-3)}
.ai-size.ai-measured{border-left-color:var(--warn)}
.ai-size.ai-measured .ai-sk{color:var(--warn)}
.ai-size.ai-deciding{background:var(--bg-3);border-left-color:var(--ai,var(--acad-ai));
  box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-size.ai-deciding .ai-sn{color:var(--ink)}

/* ── THE CLAIM PICKER ──────────────────────────────────────────────────────
   Four published claims, each measured somewhere the reader cannot change. They
   wrap rather than scrolling, because they are choices rather than a comparison
   and nothing has to line up between them. */
.ai-claims{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ai-claim{font-size:12px;line-height:1.3;padding:6px 10px}
.ai-claim.on{border-color:var(--ai,var(--acad-ai));background:var(--bg-3);color:var(--ink)}

/* ── THE GAP ───────────────────────────────────────────────────────────────
   The readout, and the only place in the component that states a verdict. It is
   the same amber when the claim is far away and the platform's money green when
   it is not, so the two readings are visibly different objects. */
.ai-gap{margin-top:12px;min-height:56px}
.ai-cd{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.ai-dist{margin: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-radius:0 8px 8px 0}
.ai-dist.ai-warn{border-left:3px solid var(--warn)}
.ai-dist.ai-warn b{color:var(--warn);font-weight:600}
.ai-dist.ai-ok{border-left:3px solid var(--money)}
.ai-dist.ai-ok b{color:var(--money);font-weight:600}
.ai-note{margin:9px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-3)}

/* ── NARROW ────────────────────────────────────────────────────────────────

   THE ROWS DO NOT REFLOW AND THE TYPE DOES NOT SHRINK. Below the floor width
   the lists scroll, which is rule 2, and the only thing that changes here is how
   much of the middle column a row is willing to give up. Nothing in this file is
   under 10px at any width, which is rule 1 with a point of headroom. */
@media (max-width:420px){
  .ai-row{grid-template-columns:32px minmax(150px,1fr) 78px;gap:8px;padding:9px 10px}
  .ai-size{grid-template-columns:28px minmax(92px,1fr) minmax(108px,1.1fr);gap:8px;padding:9px 10px}
  .ai-worked{padding:10px 12px}
}