/* ==========================================================================
   SOLUTIONS.CSS · page layer for /use-cases and /industries only.
   Loads after brand.css and platform.css. Existing tokens exclusively —
   no new colours, no new type sizes, no new radii, spacing on --sp-* only.
   No new scroll-driven animation is declared here: both pages reuse the
   double-gated data-reveal / data-reveal-group hooks from motion.css, so
   there is nothing to gate and nothing to hide. Base state is visible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. USE-CASE ROWS · full-width hairline rows on the 12-column grid.
   Not cards: each row is an asymmetric composition — job left, outcome
   numeral right, the queue evidence strip running under both. The lead
   row is bigger; the follow-up jobs are denser. Vary span, weight, size.
   -------------------------------------------------------------------------- */
.uc-list { border-top: var(--rule) solid var(--border); }

.uc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-4);
  padding-block: var(--sp-8);
  border-bottom: var(--rule) solid var(--border);
}
.uc > * { grid-column: 1 / -1; margin: 0; }

.uc__head { display: grid; gap: var(--sp-3); align-content: start; }
.uc h3 { letter-spacing: -0.02em; max-width: 26ch; }
.uc--lead h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.05; }

.uc__body { font-size: var(--t-sm); color: var(--muted); max-width: 58ch; }
.uc__body a,
.uc__cap a,
.mx-note a,
.ind-copy a {
  color: var(--fg);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .uc__body a:hover, .uc__cap a:hover, .mx-note a:hover, .ind-copy a:hover {
    text-decoration-color: var(--accent);
  }
}

/* The outcome numeral — mono, tabular, right-set on wide screens */
.uc__num { display: grid; gap: var(--sp-2); align-content: start; }
.ucnum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--fg);
}
.ucnum small { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.uc--lead .ucnum, .ucnum--accent { font-size: var(--t-big); letter-spacing: -0.05em; color: var(--accent-text); }

/* Standalone reuse on /industries: numeral above its evidence strip */
.num-then-evidence { display: grid; gap: var(--sp-6); align-content: start; }

/* Asymmetric placement from 900: job 1–8, numeral 9–12, evidence under.
   Child combinators only: on the denser rows .uc__body nests inside
   .uc__head (itself a grid), where a grid-column would create phantom
   implicit tracks. */
@media (min-width: 900px) {
  .uc { padding-block: var(--sp-10); row-gap: var(--sp-5); }
  .uc > .uc__head { grid-column: 1 / 8; grid-row: 1; }
  .uc > .uc__body { grid-column: 1 / 8; grid-row: 2; }
  .uc > .uc__num { grid-column: 9 / -1; grid-row: 1 / 3; justify-self: end; text-align: right; }
  .uc > .uc__evidence { grid-column: 1 / 9; }
  .uc > .uc__links { grid-column: 1 / -1; }
  .uc--lead > .uc__evidence { grid-column: 1 / 10; }
  /* The follow-up jobs sit denser: no separate body paragraph, less air */
  .uc--job { padding-block: var(--sp-8); }
  .uc--job > .uc__head { grid-column: 1 / 7; }
  .uc--job > .uc__evidence { grid-column: 1 / 8; }
}

/* --------------------------------------------------------------------------
   2. QUEUE EVIDENCE STRIP · "what lands in the queue", as one row of the
   product surface. Real text, hairline, wraps at narrow widths instead of
   overflowing. The bracket tag above names the device.
   -------------------------------------------------------------------------- */
.uc__evidence { display: grid; gap: var(--sp-2); }
.qrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: var(--rule) solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.qrow .mono { font-size: 0.75rem; }
.qrow__id { color: var(--fg); }
.qrow__dim { color: var(--muted); }
.uc__cap { font-size: var(--t-sm); color: var(--muted); }
.uc__cap .tag { display: inline; }

/* --------------------------------------------------------------------------
   3. CROSS-LINK CHIPS · the intersection made tappable. Mono bracket links,
   44px targets, 8px apart. The label is ink; brackets are the ornament.
   -------------------------------------------------------------------------- */
.uc__links, .xlinks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.xlinks { margin-top: var(--sp-5); }
.uc__links .tag, .xlinks .tag { margin-right: var(--sp-2); }
.xl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--muted);
  border: var(--rule) solid var(--border);
  border-radius: var(--r-sm);
  transition: color var(--duration-fast) var(--ease-ui), border-color var(--duration-fast) var(--ease-ui);
}
.xl::before { content: "["; color: var(--accent-text); margin-right: 2px; }
.xl::after  { content: "]"; color: var(--accent-text); margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .xl:hover { color: var(--fg); border-color: var(--border-strong); }
}

/* --------------------------------------------------------------------------
   4. INTERSECTION MATRIX · rows are exception types, columns are sectors.
   Reuses .table-scroll and .cmp from the existing system; only the marks
   are new. Marks are text plus sr-only words, never colour alone.
   -------------------------------------------------------------------------- */
.mx { min-width: 640px; }
.mx thead th a, .mx tbody th a {
  color: var(--fg);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .mx thead th a:hover, .mx tbody th a:hover { text-decoration-color: var(--accent); }
}
.mk {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--accent-text);
}
.mk--soft { color: var(--muted); font-weight: 400; }
.mx .why { display: block; margin-top: var(--sp-1); font-size: 0.8125rem; color: var(--muted); max-width: 22ch; }
.mx-note { margin-top: var(--sp-4); font-size: var(--t-sm); color: var(--muted); max-width: 62ch; }
.mx-legend { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   5. SECTOR INDEX · /industries table of contents. An index, not a card
   row: one hairline row per sector — bracket, name, what the clock is.
   -------------------------------------------------------------------------- */
.toc { border-top: var(--rule) solid var(--border); }
.toc a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  align-items: baseline;
  min-height: 56px;
  padding-block: var(--sp-3);
  border-bottom: var(--rule) solid var(--border);
  text-decoration: none;
  color: var(--fg);
  transition: color var(--duration-fast) var(--ease-ui);
}
.toc .tag { grid-column: 1; grid-row: 1; }
.toc__name { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; }
.toc__clock { grid-column: 2; grid-row: 2; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
@media (min-width: 720px) {
  .toc a { grid-template-columns: 2.75rem minmax(0, 20rem) minmax(0, 1fr); align-items: center; }
  .toc__clock { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
}
@media (hover: hover) and (pointer: fine) {
  .toc a:hover .toc__name { color: var(--accent-text); }
}

/* --------------------------------------------------------------------------
   6. SECTOR SECTIONS · each one composed differently on the same grid.
   Copy column, then the sector's own evidence: a rule card (01), a huge
   counter-numeral (02), a deduction strip (03), a hairline ledger (04).
   -------------------------------------------------------------------------- */
.ind-copy { display: grid; gap: var(--sp-5); align-content: start; }
.ind-copy .plus-list { margin-top: var(--sp-2); }

/* 02 · the counter-numeral column (industrial). Reuses .huge from brand.css.
   The copy column precedes it in the DOM, so the auto-placement cursor has
   already passed columns 1–5: pin it back onto row 1 explicitly. */
.ind-count { display: grid; gap: var(--sp-3); align-content: start; }
.ind-count .huge { margin-top: var(--sp-2); }
.ind-count .huge__num { color: var(--fg); }
@media (min-width: 900px) { .grid-12 > .ind-count { grid-row: 1; } }

/* 04 · the ledger — label + tabular numeral per hairline row */
.ledger { display: grid; border-top: var(--rule) solid var(--border); margin: 0; }
.ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: var(--rule) solid var(--border);
}
.ledger dt { font-size: var(--t-sm); color: var(--muted); }
.ledger dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.ledger dd small { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--muted); }


/* --------------------------------------------------------------------------
   MOBILE TARGETS
   The intersection matrix uses links in its row and column headers. They are
   standalone navigation, not prose, so they need a real hit area; they
   measured 18px. Padding rather than font-size, so the table's density and the
   header alignment are untouched.
   -------------------------------------------------------------------------- */
.mx th a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-block: var(--sp-2);
}