/* ==================================================================
   THRESHOLD — Application definitions · round eighteen
   ------------------------------------------------------------------
   The term funnel. Lifted from the canon's appdef-funnel.css
   (docs/design-canon/application-definition/appdef-funnel.css), its
   tokens renamed to Threshold's --th-* layer; loads after appdef.css.
     §A  The rich term row gains a funnel line between head and meta
     §B  .ax-funnel — the line: figures, rate, In progress link, states
     §C  The archived row's second line
     §D  .apd-noterm — applications in progress with no term selected
     §E  .apd-funnel-notice — places the error canon's .th-fb-load
   Tokens only; every colour is a theme token, so dark needs no rules.
   The canon's --th-* shim on .apd-funnel-notice is not lifted: Threshold
   loads the real token file.
   ================================================================== */


/* ==================================================================
   §A — Row grid. The funnel line sits directly under the term name,
   at the same offset on every row, so terms compare by eye. The meta
   row (window · deadlines · programs) moves down one line. A viewer
   without analytics:read gets the round-17 row exactly (no class).
   ================================================================== */
.apd-term.is-rich.has-funnel {
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "stripe head state actions kebab"
    "stripe funnel funnel funnel funnel"
    "stripe meta meta meta meta";
}
.apd-term.is-rich.has-funnel .ax-funnel {
  grid-area: funnel;
  margin: -4px -3px 0;   /* the line's 2px/3px clip padding, so text sits on the name's edge */
}


/* ==================================================================
   §B — The line. Labels ink-2, figures ink 600, tabular. Items never
   break inside; the line wraps between them. No chip, colour band,
   icon or timestamp: this is a stat line inside a configuration row.
   ================================================================== */
.ax-funnel {
  min-width: 0;
  font-family: var(--th-f-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--th-ink-2);
  font-variant-numeric: tabular-nums;
  /* Clip edge 3px outside the text so a link's focus ring at a line start
     still shows, while the leading dot of a line-start item is hidden. */
  overflow: hidden;
  padding: 2px 3px;
  margin-left: -3px;
  margin-right: -3px;
}
/* Every item carries its own leading dot in a 16px lead; the items row is
   pulled 16px left, so the dot of whichever item starts a line falls outside
   the clip. A wrapped line never starts or ends with a stray separator. */
.ax-funnel-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 2px;
  margin-left: -16px;
}
.ax-funnel-items > .item {
  position: relative;
  padding-left: 16px;
  white-space: nowrap;
}
.ax-funnel-items > .item::before {
  content: "·" / "";
  position: absolute;
  left: 5px;
  color: var(--th-ink-4);
}
.ax-funnel .fig { white-space: nowrap; }
.ax-funnel .fig b { color: var(--th-ink); font-weight: 600; }
.ax-funnel .fig .rate { color: var(--th-ink-2); }

/* In progress: label + figure are one link to the In progress roster. */
.ax-funnel a.fig {
  color: var(--th-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--th-line-2);
  text-underline-offset: 3px;
  border-radius: var(--th-radius-2);
}
.ax-funnel a.fig b { color: var(--th-advant); }
.ax-funnel a.fig:hover { text-decoration-color: currentColor; }
.ax-funnel a.fig:hover b { color: var(--th-advant-deep); }
.ax-funnel a.fig:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* Empty, not yet counted, unavailable: said in words, never a zero. ink-2, not
   ink-3: measured on the row, ink-3 is 4.59:1 in light but 3.43:1 in dark (and
   lower on the row's hover background), so it would fail AA for real content. */
.ax-funnel .quiet,
.ax-funnel.is-empty,
.ax-funnel.is-unavailable { color: var(--th-ink-2); }

/* Loading: the slot keeps its height, so rows never jump when the read lands.
   A placeholder is for a read in flight only; a failed read says so in words.
   The slot is the loaded line's height: one 1.45 line plus the 2px clip
   padding above and below. */
.ax-funnel.is-loading { min-height: calc(1.45em + 4px); display: flex; align-items: center; }
.ax-funnel .bar {
  display: block;
  width: 40%;
  max-width: 280px;
  height: 10px;
  border-radius: var(--th-radius-pill);
  background: var(--th-line);
}


/* ==================================================================
   §C — Archived row. The compact five-column row gains the same line
   as a full-width second line.
   ================================================================== */
.apd-archived-row .ax-funnel {
  grid-column: 1 / -1;
  margin: -8px -3px 0;
}
/* At 1180px or less the row is a wrapping flex line (appdef.css, "Narrow
   windows"): the line stays full width and last, under key, window and
   stamp, at the same 4px the grid's 12px gap less 8px gives it. */
@media (max-width: 1180px) {
  .apd-archived-row .ax-funnel { order: 3; flex-basis: 100%; margin-top: 4px; }
}


/* ==================================================================
   §D — No-term line. Under the terms list, inside the panel, above the
   foot. It belongs to the panel, not to the last term: a full-strength
   rule above it and its left edge on the panel's content edge (with the
   panel head and foot), never on the term names.
   ================================================================== */
.apd-noterm {
  padding: 11px 18px;
  border-top: 1px solid var(--th-line);
  font-family: var(--th-f-sans);
  font-size: 12.5px;
  color: var(--th-ink-2);
  font-variant-numeric: tabular-nums;
}
.apd-noterm a {
  color: var(--th-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--th-line-2);
  text-underline-offset: 3px;
  border-radius: var(--th-radius-2);
}
.apd-noterm a b { color: var(--th-advant); font-weight: 600; }
.apd-noterm a:hover { text-decoration-color: currentColor; }
.apd-noterm a:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.apd-noterm b { color: var(--th-ink); font-weight: 600; }


/* ==================================================================
   §E — Failed read. The notice is the error canon's .th-fb-load
   (.is-compact) unchanged; this only places it at the head of the
   terms list, inside the panel, above the first row.
   ================================================================== */
.apd-funnel-notice { padding: 12px 14px 4px; }
.apd-funnel-notice .th-fb-load { margin: 0; }