/* ==========================================================================
   Purchase Orders — Purchasing Analytics (purchase-orders-analytics.html)

   Spec: build/po/pages.md §17

   Only what is this page's own: the report filters in the toolbar, the KPI
   tiles as links, the Ask About Your Buying box, the charts (ranked bars,
   monthly columns, share bars, the paid / to-pay split, the payment
   calendar), the report tables' column shares, and how the page folds at
   1200 / 768 / 480. The hub strip, the view switch, the readings and the gear
   dialogs are css/pages/purchase-orders.css. Classes use the `po-an-` prefix.

   CHARTS ARE INLINE SVG. A bar's length is the `width` (or `height`) of a
   <rect> inside a 0–100 viewBox, a presentation attribute, never a style;
   its labels are HTML beside it so they stay crisp and selectable. Colours
   are tokens; a bar is a quantity, so it takes the primary, not a status.
   ========================================================================== */

/* ---------- Toolbar: search, five report filters, Export ---------------------
   Each select is sized to its own longest option (memory.md §9), never
   stretched to the row; the filters wrap as a group. Export closes the row. */
.po-an-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.po-an-filter {
  width: auto; flex: none;
  padding-top: 6px; padding-bottom: 6px; padding-left: 10px;
  font-size: 13px;
}
.po-an-export { flex: none; }
.po-an-export > .btn svg:last-child { width: 14px; height: 14px; margin-left: -2px; }
.po-an-export .dropdown-menu { min-width: 180px; }

/* ---------- KPI tiles as links ----------------------------------------------- */
a.po-an-kpi,
a.po-an-kpi:hover { color: inherit; text-decoration: none; }
a.po-an-kpi { cursor: pointer; }
a.po-an-kpi:hover { border-color: var(--color-border-strong); }

/* ---------- Ask About Your Buying --------------------------------------------
   A white card in the page stack: the heading, the question field and the
   Ask button, then the drawn answer under a hairline, labelled as the answer
   to the question above. Its table stands in the card body's own 16px. */
.po-an-ask__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 10px; }
.po-an-ask__head > svg { width: 18px; height: 18px; flex: none; color: var(--color-primary); }
.po-an-ask__head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); }
.po-an-ask__hint { font-size: 12px; color: var(--color-text-subtle); }
.po-an-ask__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.po-an-ask__field { max-width: 640px; }
.po-an-ask__row > .btn { flex: none; }
.po-an-answer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.po-an-answer__lbl {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}
.po-an-answer__lbl svg { width: 14px; height: 14px; flex: none; color: var(--color-text-subtle); }
.po-an-answer__note { margin: 8px 0 0; font-size: 12px; color: var(--color-text-subtle); line-height: 1.5; }
.po-an-ask .table-wrap { padding-inline: 0; border-top: 0; }

/* ---------- The panel ---------------------------------------------------------
   The card merged into the shell (purchase-orders.css), so its tables take no
   side inset of their own (memory.md §20). Under a section heading the wrap's
   top rule would draw a second line under the heading; the header band keeps
   its 10px white lead-in (§18). */
.po-an .table-wrap { padding-inline: 0; border-top: 0; }
.po-an [data-view-panel] > .po-sec:first-child { padding-top: 4px; }

/* Two reports side by side inside one section, a 32px gutter between; the
   `--wide` variant gives the left one two thirds, `--57` five twelfths to
   seven. They stack at 1200 (below). */
.po-an-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; }
.po-an-split--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.po-an-split--57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.po-an-block { min-width: 0; }

/* A line under a report: a total, a reading, a note. */
.po-an-foot { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.po-an-foot + .po-an-foot { margin-top: 4px; }
.po-an-foot .po-reading { font-size: 12px; color: var(--color-text-muted); }
.po-an-foot strong { color: var(--color-text); font-weight: 600; }
.po-an-foot .is-warn strong { color: var(--color-warn-ink); }
.po-an-foot .is-ok strong { color: var(--color-success-ink); }
.po-an-foot a,
.po-an-setting a { color: var(--color-primary-600); text-decoration: none; }
.po-an-foot a:hover,
.po-an-setting a:hover { color: var(--color-primary-700); }
.po-an-setting {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 10px 0 0; font-size: 12px; color: var(--color-text-subtle); line-height: 1.5;
}
.po-an-setting svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }

/* Words in a cell coloured by what they say: early, late, waiting, best. */
.po-an-ok   { color: var(--color-success-ink); }
.po-an-late { color: var(--color-danger-ink); font-weight: 600; }
.po-an-wait { color: var(--color-warn-ink); }
.po-an-best { color: var(--color-success-ink); font-weight: 600; }

/* ---------- Ranked bars (Spend by Supplier) -----------------------------------
   Each row is a link to the POs behind it: rank, name with its grey reading
   under, the bar (scaled to the largest), the amount and the share. */
.po-an-bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.po-an-bar {
  display: grid;
  grid-template-columns: 16px minmax(130px, 1.1fr) minmax(60px, 1.6fr) 72px 46px;
  align-items: center; gap: 10px;
  padding: 6px 8px; margin: 0 -8px;
  border-radius: var(--radius);
  color: inherit; text-decoration: none;
  transition: background 120ms;
}
.po-an-bar:hover { background: var(--color-control); color: inherit; }
.po-an-bar__rank { font-size: 12px; color: var(--color-text-subtle); text-align: right; }
.po-an-bar__name { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 500; color: var(--color-text); line-height: 1.35; }
.po-an-bar__sub { font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
.po-an-bar__track,
.po-an-share svg,
.po-an-cur__body svg,
.po-an-cal svg {
  display: block; width: 100%; height: 8px;
  background: var(--color-control); border-radius: 3px; overflow: hidden;
}
.po-an-bar__fill,
.po-an-share rect,
.po-an-cur__body rect,
.po-an-cal rect { fill: var(--color-primary); }
.po-an-bar__fig { font-size: 13px; font-weight: 600; color: var(--color-text); text-align: right; }
.po-an-bar__pct { font-size: 12px; color: var(--color-text-muted); text-align: right; }

/* ---------- Monthly columns (Spend Over Time) ----------------------------------
   Five columns on one baseline: the amount over the bar, the month, the count
   of POs and containers, the change on the month before. The bar is an SVG
   whose <rect> height is the share of the biggest month. October is a month
   still running, so its bar is drawn lighter. Scrolls sideways on a phone
   rather than crushing five amounts into a 390px screen. */
.po-an-cols-wrap { overflow-x: auto; }
.po-an-cols { display: grid; grid-template-columns: repeat(5, minmax(88px, 1fr)); gap: 8px; min-width: 470px; padding-top: 4px; }
.po-an-col { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.po-an-col__fig { font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.po-an-col__bar {
  display: block; width: 40px; height: 140px;
  background: var(--color-control); border-radius: 3px; overflow: hidden;
}
.po-an-col__bar rect { fill: var(--color-primary); }
.po-an-col__bar rect.is-partial { opacity: .45; }
.po-an-col__m { font-size: 13px; font-weight: 600; color: var(--color-text); margin-top: 2px; }
.po-an-col__sub { font-size: 11px; color: var(--color-text-muted); line-height: 1.35; }
.po-an-col__chg { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--color-text-subtle); white-space: nowrap; }
.po-an-col__chg svg { width: 12px; height: 12px; }
.po-an-col__chg.is-up,
.po-an-col__chg.is-down { color: var(--color-text-muted); font-weight: 600; }

/* ---------- Report tables -------------------------------------------------------
   Every report table takes column shares under `table-layout: fixed` and
   opts out of the pager (a report, not a list to work through). A total row
   closes a table in 600 with a stronger rule above it and no row mark. */
.po-an-table { table-layout: fixed; width: 100%; }
.po-an-table tbody tr { cursor: pointer; }
.po-an-table td a { color: var(--color-primary-600); text-decoration: none; }
.po-an-table td a:hover { color: var(--color-primary-700); }
.po-an-table td.col-status { white-space: normal; line-height: 1.9; }
.po-an-table td.col-status .badge { vertical-align: middle; }
.po-an-table td.col-status .po-reading { font-size: 12px; vertical-align: middle; }
.po-an-table .po-reading { font-size: 12px; }
.po-an-table .cell-stack .sub .po-linked { font-size: 11px; }
.po-an-table .cell-stack .sub .po-linked svg,
.po-an-table .cell-stack .sub .po-mode svg { width: 12px; height: 12px; }
.po-an-table .cell-stack .sub .po-mode { display: inline-flex; }
.data-table.po-an-table tbody tr.po-an-total { cursor: default; }
.data-table.po-an-table tbody tr.po-an-total td {
  font-weight: 600; color: var(--color-text);
  border-top: 1px solid var(--color-border-strong);
}
.data-table.po-an-table tbody tr.po-an-total td::after { content: none; }
.po-an-table .cell-stack .sub { white-space: normal; }
.po-an-state-sub { display: block; font-size: 11px; color: var(--color-text-muted); line-height: 1.35; }

/* A share inside a cell: a short bar and its figure. */
.po-an-share { display: flex; align-items: center; gap: 8px; }
.po-an-share svg { flex: 1 1 auto; min-width: 30px; height: 6px; }
.po-an-share .tnum { flex: none; width: 42px; text-align: right; font-size: 12px; color: var(--color-text-muted); }

/* A price change with its arrow; an up-move is a fact here, not an alarm. */
.po-an-chg { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text); font-weight: 600; }
.po-an-chg svg { width: 13px; height: 13px; color: var(--color-text-muted); }

/* Steps of a cycle, joined by arrows; they wrap as wholes. */
.po-an-steps { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font-size: 12px; color: var(--color-text); }
.po-an-steps > *:not(:last-child)::after { content: "\2192"; margin: 0 6px; color: var(--color-text-subtle); }

/* Column shares, one block per table (memory: fluid, bounded). */
.po-an-table--ask { min-width: 560px; }
.po-an-table--ask th.col-sup    { width: 34%; }
.po-an-table--ask th.col-late   { width: 30%; }
.po-an-table--ask th.col-lead   { width: 20%; }
.po-an-table--ask th.col-ontime { width: 16%; }

.po-an-table--mat { min-width: 700px; }
.po-an-table--mat th.col-mat   { width: 33%; }
.po-an-table--mat th.col-qty   { width: 11%; }
.po-an-table--mat th.col-area  { width: 14%; }
.po-an-table--mat th.col-rate  { width: 13%; }
.po-an-table--mat th.col-share { width: 15%; }
.po-an-table--mat th.col-value { width: 14%; }

.po-an-table--score { min-width: 980px; }
.po-an-table--score th.col-sup    { width: 22%; }
.po-an-table--score th.col-ship   { width: 10%; }
.po-an-table--score th.col-ontime { width: 8%; }
.po-an-table--score th.col-lead   { width: 16%; }
.po-an-table--score th.col-fill   { width: 7%; }
.po-an-table--score th.col-rate   { width: 8%; }
.po-an-table--score th.col-claims { width: 18%; }
.po-an-table--score th.col-spend  { width: 11%; }

.po-an-table--cycle { min-width: 440px; }
.po-an-table--cycle th.col-po    { width: 30%; }
.po-an-table--cycle th.col-steps { width: 54%; }
.po-an-table--cycle th.col-took  { width: 16%; }

.po-an-table--stock { min-width: 820px; }
.po-an-table--stock th.col-sup   { width: 18%; }
.po-an-table--stock th.col-mat   { width: 22%; }
.po-an-table--stock th.col-free  { width: 19%; }
.po-an-table--stock th.col-inc   { width: 24%; }
.po-an-table--stock th.col-sales { width: 17%; }

.po-an-table--trend { min-width: 420px; }
.po-an-table--trend th.col-mat { width: 38%; }
.po-an-table--trend th.col-was { width: 22%; }
.po-an-table--trend th.col-now { width: 24%; }
.po-an-table--trend th.col-chg { width: 16%; }

.po-an-table--cmp { min-width: 620px; }
.po-an-table--cmp th.col-mat    { width: 21%; }
.po-an-table--cmp th.col-best   { width: 31%; }
.po-an-table--cmp th.col-others { width: 32%; }
.po-an-table--cmp th.col-gap    { width: 16%; }

.po-an-table--landed { min-width: 860px; }
.po-an-table--landed th.col-mat    { width: 26%; }
.po-an-table--landed th.col-box    { width: 17%; }
.po-an-table--landed th.col-goods  { width: 11%; }
.po-an-table--landed th.col-added  { width: 14%; }
.po-an-table--landed th.col-state  { width: 20%; }
.po-an-table--landed th.col-landed { width: 12%; }

.po-an-table--open { min-width: 760px; }
.po-an-table--open th.col-po     { width: 22%; }
.po-an-table--open th.col-status { width: 26%; }
.po-an-table--open th.col-paid   { width: 17%; }
.po-an-table--open th.col-due    { width: 18%; }
.po-an-table--open th.col-value  { width: 17%; }

.po-an-table--pay { min-width: 660px; }
.po-an-table--pay th.col-sup  { width: 25%; }
.po-an-table--pay th.col-bills { width: 30%; }
.po-an-table--pay th.col-dep  { width: 14%; }
.po-an-table--pay th.col-cred { width: 16%; }
.po-an-table--pay th.col-due  { width: 15%; }

.po-an-table--claims { min-width: 860px; }
.po-an-table--claims th.col-sup     { width: 21%; }
.po-an-table--claims th.col-claim   { width: 27%; }
.po-an-table--claims th.col-rate    { width: 8%; }
.po-an-table--claims th.col-status  { width: 17%; }
.po-an-table--claims th.col-claimed { width: 12%; }
.po-an-table--claims th.col-cred    { width: 15%; }

.po-an-table--mostc { min-width: 900px; }
.po-an-table--mostc th.col-mat    { width: 19%; }
.po-an-table--mostc th.col-qty    { width: 9%; }
.po-an-table--mostc th.col-issues { width: 21%; }
.po-an-table--mostc th.col-sup    { width: 23%; }
.po-an-table--mostc th.col-share  { width: 15%; }
.po-an-table--mostc th.col-value  { width: 13%; }

/* ---------- Spend by currency -----------------------------------------------------
   One row per currency: the code, the amount (and its base-currency figure
   with the locked rate), a share bar, the share. */
.po-an-cur { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.po-an-cur__row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 48px; align-items: start; gap: 10px;
  padding: 8px; margin: 0 -8px; border-radius: var(--radius);
  color: inherit; text-decoration: none; transition: background 120ms;
}
.po-an-cur__row:hover { background: var(--color-control); color: inherit; }
.po-an-cur__code { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted); padding-top: 2px; }
.po-an-cur__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.po-an-cur__fig { font-size: 15px; font-weight: 600; color: var(--color-text); }
.po-an-cur__sub { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }
.po-an-cur__pct { font-size: 12px; color: var(--color-text-muted); text-align: right; padding-top: 3px; }

/* ---------- At Risk of Running Late ------------------------------------------------
   Each line: the state dot, the order, and the reason it may run late. */
.po-an-risks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.po-an-risk { display: flex; align-items: flex-start; gap: 10px; }
.po-an-risk .po-timeline__dot { flex: none; margin-top: 7px; }
.po-an-risk__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-an-risk__h { font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-an-risk__h a { color: var(--color-primary-600); text-decoration: none; }
.po-an-risk__why { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.po-an-risk__why .po-lfd { font-size: 12px; }
.po-an-risk__why .po-lfd svg { width: 13px; height: 13px; }

/* ---------- Landed cost filters ------------------------------------------------------ */
.po-an-subfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }

/* ---------- Committed · Received · Billed ----------------------------------------------
   Three readings on one line, a hairline between them, each the figure first
   with its word under it (memory.md §6: stacked, kept tight). Each opens the
   register it is read from. Words on the panel, not boxes. */
.po-an-trio { display: flex; flex-wrap: wrap; }
.po-an-trio__item {
  flex: 1 1 220px; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 2px 20px; color: inherit; text-decoration: none;
  border-left: 1px solid var(--color-border);
}
.po-an-trio__item:first-child { padding-left: 0; border-left: 0; }
.po-an-trio__item:hover .po-an-trio__l { color: var(--color-primary-700); }
.po-an-trio__v { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); line-height: 1.2; }
.po-an-trio__l { font-size: 13px; font-weight: 500; color: var(--color-text); }
.po-an-trio__s { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }

/* ---------- Settled against still to pay -------------------------------------------------
   One bar in two parts: settled in the success colour (done), still to pay
   in the warn colour (owed); the legend names both with their figures. */
.po-an-split-bar { margin: 0 0 6px; }
.po-an-split-bar__svg { display: block; width: 100%; height: 10px; border-radius: 3px; overflow: hidden; background: var(--color-control); }
.po-an-split-bar__paid { fill: var(--color-success); }
.po-an-split-bar__due { fill: var(--color-warn); }
.po-an-split-bar__legend { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font-size: 12px; color: var(--color-text-muted); }
.po-an-split-bar__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.po-an-split-bar__legend strong { color: var(--color-text); font-weight: 600; }
.po-an-key { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.po-an-key--paid { background: var(--color-success); }
.po-an-key--due { background: var(--color-warn); }

/* ---------- Payment calendar ----------------------------------------------------------------
   Date, what is due, a bar scaled to the largest payment, the amount. The
   overdue date is the urgent word. */
.po-an-cal { margin: 0; padding: 0; list-style: none; }
.po-an-cal__row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 64px max-content;
  align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--color-border);
  font-size: 12px;
}
.po-an-cal__row:last-child { border-bottom: 0; }
.po-an-cal__date { color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.po-an-cal__row.is-overdue .po-an-cal__date { color: var(--color-danger-ink); font-weight: 600; }
.po-an-cal__what { color: var(--color-text); min-width: 0; }
.po-an-cal svg { height: 6px; }
.po-an-cal__fig { font-size: 13px; font-weight: 600; color: var(--color-text); text-align: right; }

/* ---------- Schedule Email ----------------------------------------------------------------------
   Recipients are name tokens in one box on the control ground; a token on
   that tinted box turns back to white (three readable levels, §17). */
.po-an-gap { margin-top: 14px; }
.po-an-recips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; min-height: 38px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-an-recips:focus-within { border-color: var(--color-primary); }
.po-an-token {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 9px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 12px; font-weight: 500; color: var(--color-text);
}
.po-an-token button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 0; background: none;
  color: var(--color-text-subtle); cursor: pointer; border-radius: 3px;
}
.po-an-token button:hover { color: var(--color-danger-ink); }
.po-an-token svg { width: 12px; height: 12px; }
.po-an-recips__input {
  flex: 1 1 140px; min-width: 120px; border: 0; background: none; outline: none;
  font: inherit; font-size: 13px; color: var(--color-text); padding: 3px 2px;
}
.po-an-sched-row { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.po-an-sched-row .field { flex: none; }
.modal-body .po-an-sched-row > .field + .field { margin-top: 0; }
/* #10 is wider than #1; one width keeps every switch on one line. */
#modal-kpis .reorder-num { min-width: 30px; }

/* ---------- Folding ------------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* Side-by-side reports stack: one report a row, the hairline between. */
  .po-an-split,
  .po-an-split--wide,
  .po-an-split--57 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .po-an-split > .po-an-block + .po-an-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
}
@media (max-width: 1100px) {
  /* Four tiles fold two by two, every tile the same size (as the hub). */
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .po-an-trio { flex-direction: column; gap: 12px; }
  .po-an-trio__item { flex-basis: auto; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .po-an-trio__item:first-child { padding-top: 0; border-top: 0; }
  .po-an-ask__row > .btn,
  .po-an-export > .btn,
  .po-an-sched-row .select { min-height: 44px; }
  .po-an-filter { min-height: 40px; }
  .po-an-bar,
  .po-an-cur__row { min-height: 44px; }
  .po-an-token button { width: 28px; height: 28px; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  /* The search takes the line; the five filters pair up under it and Export
     closes the block on a line of its own. */
  .po-an-toolbar .search { flex: 1 1 100%; max-width: none; min-width: 0; }
  .po-an-filters { flex: 1 1 100%; }
  .po-an-filters .po-an-filter { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .po-an-toolbar .spacer { display: none; }
  .po-an-export { flex: 1 1 100%; }
  .po-an-export > .btn { width: 100%; justify-content: center; }
  .po-an-subfilters .po-an-filter { flex: 1 1 100%; }
  /* The header actions take a line of their own and wrap on it. */
  .page-header .page-actions { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .po-an-ask__field { flex: 1 1 100%; min-width: 0; max-width: none; }
  .po-an-ask__row > .btn { flex: 1 1 100%; justify-content: center; }
  /* A ranked bar: name and figures on the first line, the bar under them. */
  .po-an-bar { grid-template-columns: 14px minmax(0, 1fr) max-content 42px; row-gap: 4px; }
  .po-an-bar__track { grid-column: 2 / -1; grid-row: 2; }
  .po-an-cal__row { grid-template-columns: 74px minmax(0, 1fr) max-content; row-gap: 4px; }
  .po-an-cal svg { grid-column: 2 / -1; grid-row: 2; }
  .po-an-sched-row .field { flex: 1 1 calc(50% - 8px); }
}