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

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

   ── THE ONE NEW THING IN THIS CHAPTER IS A PROPORTIONAL BAR ─────────────────

   The twelve-week split is the only exhibit in the book that draws a quantity as
   a width rather than printing it. That is deliberate: the teaching is that the
   composition changes while the total does not, and a row of numbers makes a
   reader do that comparison in their head while a fixed-width bar does it for
   them.

   It carries three rules. The bar is always exactly as wide as its container, so
   the constant total is visible as a constant. Every segment prints its own
   percentage, so nothing rests on judging a width by eye. And no segment is
   allowed to collapse below a readable label, because a two per cent segment
   with an unreadable number in it is worse than one with the number outside.  */

.sim .ai-spans,
.sim .ai-bars,
.sim .ai-flownote,
.sim .ai-slist,
.sim .ai-settbox,
.sim .ai-claims2,
.sim .ai-survbox { --ai:var(--stage,var(--acad-ai)) }

/* ── 2.1. THE PRODUCT PICKER ───────────────────────────────────────────────
   The three control products are marked, quietly, because a reader who works
   out which three they are before pressing them has understood the chapter. */
.ai-pick.ai-ctrl{border-style:dashed}
.ai-spans{margin:12px 0}
.ai-h-good{color:var(--money)}
.ai-h-warn{color:var(--warn)}
.ai-h-bad{color:var(--open)}

/* ── 2.1. THE SPLIT BAR ────────────────────────────────────────────────────
   One row, full width, always. The width IS the argument, so the container must
   never change size when the segments do. */
.ai-bars{margin:4px 0 12px}
.ai-barrow{display:flex;width:100%;height:64px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2)}
.ai-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:58px;padding:0 4px;overflow:hidden;text-align:center;
  border-right:1px solid var(--bg-1);transition:flex-grow .3s var(--ease,ease)}
.ai-bar:last-child{border-right:0}
.ai-bar b{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:600}
.ai-bar i{font-family:var(--ui);font-size:10px;font-style:normal;line-height:1.2;
  color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Five segments, five weights from the chapter hue outward. Nothing is minted:
   every value is an existing token used at a different opacity. */
.ai-bar:nth-child(1){background:color-mix(in srgb,var(--ai,var(--acad-ai)) 34%,transparent)}
.ai-bar:nth-child(2){background:color-mix(in srgb,var(--ai,var(--acad-ai)) 26%,transparent)}
.ai-bar:nth-child(3){background:color-mix(in srgb,var(--ai,var(--acad-ai)) 19%,transparent)}
.ai-bar:nth-child(4){background:color-mix(in srgb,var(--ai,var(--acad-ai)) 13%,transparent)}
.ai-bar:nth-child(5){background:color-mix(in srgb,var(--ai,var(--acad-ai)) 8%,transparent)}

.ai-holdrow{display:flex;gap:6px;margin:0 0 12px}
.ai-hold:disabled{opacity:.5;cursor:not-allowed}
.ai-flownote{min-height:40px}

/* ── 2.2. THE TWELVE SETTINGS ──────────────────────────────────────────────
   Two columns that must line up down all twelve rows, because the reading is
   vertical: five held, seven refused, in one glance. */
.ai-slist{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-sett{display:grid;grid-template-columns:minmax(160px,1fr) 88px;align-items:center;gap:10px;
  width:100%;min-width:280px;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-sett:hover{background:var(--bg-3)}
.ai-sett:focus-visible{outline:2px solid var(--ai,var(--acad-ai));outline-offset:2px}
.ai-sett.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.ai-sett.ai-locked{border-left-color:var(--money)}
.ai-sett.ai-refused{border-left-color:var(--warn)}
.ai-st2{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ai-slv{font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);text-align:right}
.ai-sett.ai-locked .ai-slv{color:var(--money)}
.ai-sett.ai-refused .ai-slv{color:var(--warn)}
.ai-settbox{margin-top:12px;min-height:56px}

/* ── 2.2. WHAT SURVIVES ────────────────────────────────────────────────────
   Same row shape as the failure sorter in chapter 1, deliberately, because it is
   the same action and a reader should not have to learn a second one. */
.ai-claims2{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-survbox{margin-top:12px;min-height:56px}

/* ── NARROW ────────────────────────────────────────────────────────────────
   The split bar is the one thing here that must not scroll, because a bar you
   cannot see the end of is not a bar. It keeps its full width and the segment
   labels are allowed to truncate, which is why every segment also prints its
   number. */
@media (max-width:420px){
  .ai-sett{grid-template-columns:minmax(160px,1fr) 82px;gap:8px;padding:9px 10px}
  .ai-barrow{height:70px}
  .ai-bar{min-width:46px;padding:0 2px}
  .ai-bar i{font-size:10px}
}