/* THE AI BOARD.
 *
 * ── Why this is not the landing kit ──────────────────────────────────────
 *
 * The other four boards report a POSITION — what is owed, what is in step, how
 * much was made — and the landing cards are built for that: a big figure, a
 * qualifier, a link. This section has no position. It has a LOG: a stream of
 * questions people asked and what came back, and the figures are small change
 * beside it. Rendered as landing cards it read as a ledger of ₹0.29, which put
 * the accounting where the content should be.
 *
 * So the shape here is a feed with a masthead. The questions are the page; the
 * money is a strip along the top; the week is a row of bars that says at a
 * glance whether anybody is using this.
 *
 * ── One idea carries the colour ──────────────────────────────────────────
 *
 * FREE IS GREEN AND A MODEL CALL IS GOLD, everywhere — in the day bars, on
 * every row of the feed, in the legend. The single most useful thing about this
 * section is what proportion never reached a model, and encoding it as colour
 * means the reader sees it in the shape of the page before reading a number.
 *
 * Every selector sits under .aib so these short names cannot escape. */

.aib { display: flex; flex-direction: column; gap: 1.5rem; }

/* ── The masthead ──────────────────────────────────────────────────────── */

.aib-strip {
  display: flex; flex-wrap: wrap; gap: 0 2.5rem;
  padding: 0.9rem 1.1rem; border: 1px solid var(--edge); border-radius: 0.6rem;
  background: var(--panel);
}
.aib-fig { display: flex; flex-direction: column; gap: 0.1rem; }
.aib-fig dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-4); font-weight: 600;
}
.aib-fig dd {
  margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.aib-fig small { font-size: 0.75rem; font-weight: 500; color: var(--ink-3); }
/* The one figure that is a proportion rather than a count wears the free hue,
   because it is the number this page exists to move. */
.aib-fig--free dd { color: var(--green-ink); }

/* ── The week, as bars ─────────────────────────────────────────────────── */

.aib-week { display: flex; align-items: stretch; gap: 0.5rem; height: 7rem; }
.aib-day {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 0.3rem;
}
/* THE BAR IS A HEIGHT, NOT A FLEX BASIS. Sized by flex it inherited `flex: 1`
   from the column and every bar rendered at zero — a week of empty columns that
   looked like a week with no traffic in it. A percentage height against a
   column that justifies to the bottom is what actually draws. */
.aib-day-stack {
  width: 100%; min-height: 2px; display: flex; flex-direction: column-reverse;
  border-radius: 0.2rem; overflow: hidden; background: var(--well);
}
.aib-day-free { background: var(--green); }
.aib-day-paid { background: var(--gold); }
.aib-day-label { font-size: 0.68rem; color: var(--ink-4); white-space: nowrap; }
.aib-day-count { font-size: 0.72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* A day with nothing is still a day: the row is read as a SHAPE, and a gap
   that renders as absence would read as a week that is shorter than it is. */
.aib-day--empty .aib-day-stack { height: 2px; background: var(--edge-2); }

/* ── The board's two columns ───────────────────────────────────────────── */

.aib-cols { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 60rem) { .aib-cols { grid-template-columns: 1fr; } }

.aib-panel {
  border: 1px solid var(--edge); border-radius: 0.6rem; background: var(--panel);
  overflow: hidden; display: flex; flex-direction: column;
}
.aib-panel + .aib-panel { margin-top: 1.25rem; }
.aib-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1rem; background: var(--rail); border-bottom: 1px solid var(--edge);
}
.aib-head h2 {
  margin: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink-2);
}
.aib-head span { font-size: 0.78rem; color: var(--ink-3); }

/* ── The feed: what was asked ──────────────────────────────────────────── */

.aib-ask { display: flex; flex-direction: column; }
.aib-row {
  display: grid; grid-template-columns: 0.2rem minmax(0, 1fr) auto;
  gap: 0 0.85rem; padding: 0.7rem 1rem 0.7rem 0.75rem;
  border-top: 1px solid var(--edge);
}
.aib-ask > .aib-row:first-child { border-top: 0; }
/* The spine carries the same free/model colour the bars do. */
.aib-tick { border-radius: 1rem; background: var(--gold); }
.aib-row--free .aib-tick { background: var(--green); }
.aib-row--bad .aib-tick { background: var(--rust); }

.aib-q { font-size: 0.95rem; color: var(--ink); line-height: 1.35; }
.aib-a { margin-top: 0.2rem; font-size: 0.8rem; color: var(--ink-3); }
.aib-a b { color: var(--ink-2); font-weight: 600; }
.aib-none { color: var(--rust-ink); font-weight: 600; }

.aib-meta { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aib-cost { font-size: 0.85rem; font-weight: 600; color: var(--gold-ink); }
.aib-row--free .aib-cost { color: var(--green-ink); }
.aib-when { display: block; font-size: 0.72rem; color: var(--ink-4); margin-top: 0.1rem; }

/* Filters, as the page understood them. */
.aib-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.aib-chip {
  font-size: 0.7rem; padding: 0.08rem 0.4rem; border-radius: 0.25rem;
  background: var(--well); color: var(--ink-3); border: 1px solid var(--edge);
}

/* ── The side column ───────────────────────────────────────────────────── */

.aib-people { display: flex; flex-direction: column; }
.aib-person {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 1rem; border-top: 1px solid var(--edge); font-size: 0.85rem;
}
.aib-people > .aib-person:first-child { border-top: 0; }
.aib-person-n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 0.8rem; }

.aib-pool { padding: 0.7rem 1rem; border-top: 1px solid var(--edge); }
.aib-pool:first-child { border-top: 0; }
.aib-pool-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.85rem; margin-bottom: 0.35rem;
}
.aib-pool-top b { font-weight: 600; }
.aib-pool-top span { color: var(--ink-3); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.aib-bar { height: 0.4rem; border-radius: 1rem; background: var(--well); overflow: hidden; }
.aib-bar i { display: block; height: 100%; background: var(--gold); }
/* A pool barely touched should still show a mark — an empty bar and a broken
   bar look identical, and one of them is worth knowing about. */
.aib-bar i { min-width: 2px; }

.aib-empty { padding: 1.1rem 1rem; color: var(--ink-3); font-size: 0.88rem; }