/* ============================================================
   VoiceInsights Africa — Wave 2 public product surfaces
   ------------------------------------------------------------
   Research modes, collection channels, language capabilities,
   multi-country and the product catalogue.

   THE ONE STRUCTURAL IDEA: THE CAPABILITY LEDGER.

   Every Wave 2 page answers the same shape of question — "can you do
   this, and how sure are you". A card grid answers it badly: seven
   equal tiles say seven equal products, and the honest difference
   between a mode with its own tables and one that runs on shared
   structures disappears into identical rounded rectangles.

   So these pages are set as a LEDGER. Each row carries a status rule
   down its left edge, states its status in a word, and prints its own
   limits inline rather than in a footnote. A reader scanning the left
   edge sees the shape of the truth before reading a sentence, and a
   mode's caveat is impossible to skim past because it occupies the
   same visual weight as its promise.

   That is the product's own thesis applied to its marketing: a claim
   travels with its evidence.

   NOTHING HERE INVENTS A COLOUR. Every value resolves to a token in
   style.css or tokens.css. The three status treatments reuse the
   brand, the warm metallic and the neutral border precisely because
   the palette already separates identity from state — a status rule
   painted --success would say "this mode is the good one", which is
   not something the registry said.
   ============================================================ */

/* ---------- Page frame -------------------------------------------------- */

.w2-page { --w2-gutter: 5vw; }

.w2-band {
  background: var(--surface-emerald);
  color: var(--on-emerald);
  padding: 4.5rem var(--w2-gutter) 4rem;
}
.w2-band h1,
.w2-band h2 { color: var(--on-emerald); }
.w2-band p { color: var(--on-emerald-muted); }
.w2-band .w2-eyebrow { color: var(--vi-champagne-300); }

.w2-band-inner,
.w2-section-inner { max-width: var(--content-wide); margin: 0 auto; }

.w2-section { padding: 4rem var(--w2-gutter); }
.w2-section-soft { background: var(--surface-2); }
.w2-section-champagne { background: var(--surface-champagne-soft); }

.w2-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2-text);
  margin-bottom: .9rem;
}

.w2-band h1 { font-size: var(--text-2xl); line-height: 1.05; max-width: 18ch; margin: 0; }
.w2-lead { font-size: var(--text-lg); line-height: 1.55; max-width: 62ch; margin: 1.2rem 0 0; }

.w2-section > .w2-section-inner > h2 {
  font-size: var(--text-xl);
  margin: 0 0 .6rem;
  max-width: 24ch;
}
.w2-section-intro { max-width: 68ch; color: var(--text-muted); margin: 0 0 2.5rem; }

/* ---------- Mode index ---------------------------------------------------
   Wayfinding for a page that is deliberately long. Each entry carries its
   status, so the shape of the answer is visible before any jump. */

.w2-mode-index { margin: 0 0 2rem; }
.w2-mode-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .6rem;
}
.w2-mode-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}
.w2-mode-index a:hover { border-color: var(--accent); }

/* Landing on an anchor should not tuck the row under a sticky header, and
   should not fling a reader who asked not to be moved. */
.w2-page { scroll-behavior: smooth; }
.w2-page [id^="mode-"],
.w2-page [id^="channel-"],
.w2-page [id^="area-"] { scroll-margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .w2-page { scroll-behavior: auto; } }

/* ---------- The ledger -------------------------------------------------- */

.w2-ledger { display: grid; gap: 1.25rem; }

.w2-row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.75rem 1.75rem 2.25rem;
  box-shadow: var(--elevation-1);
}

/* The status rule. Three states, three treatments, and the difference
   is legible without colour: the rule's WIDTH and the status word
   both carry it, so the row still reads correctly in monochrome and
   to anyone who cannot separate the two hues. */
.w2-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--border-strong);
}
.w2-row[data-status="LIVE"]::before { background: var(--accent); }
.w2-row[data-status="SUPPORTED"]::before {
  background: repeating-linear-gradient(
    180deg, var(--accent-warm) 0 8px, transparent 8px 14px);
}

.w2-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem 1rem;
  margin-bottom: .75rem;
}
.w2-row-head h3 {
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: -.015em;
}
.w2-row-aka {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.w2-status {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .34em .8em;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.w2-status[data-status="LIVE"] { background: var(--accent); color: var(--accent-ink); }
.w2-status[data-status="SUPPORTED"] {
  background: transparent;
  color: var(--accent-warm-text);
  border-color: var(--accent-warm);
}
.w2-status[data-status="NOT_AVAILABLE"],
.w2-status[data-status="NOT_BUILT"],
.w2-status[data-status="OUTBOUND_ONLY"] {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border-strong);
}

/* THE LANGUAGE REGISTRY'S FIVE STATES.
   ------------------------------------------------------------------
   These are a DIFFERENT vocabulary from the mode/channel states above,
   and the first build did not style them. The language table writes
   `axis.state` straight into data-status, so VALIDATED,
   SUPPORTED_WITH_REVIEW, VOICE_CAPTURE_ONLY and IN_VALIDATION all fell
   through every rule and rendered as identical transparent pills.

   That is a quiet, complete defeat of the page's central claim. The
   whole point of a six-axis table is that a language can be Validated
   for text and In validation for transcription — and with four of five
   states looking the same, a reader could not see the difference the
   table exists to show.

   The treatments deliberately mirror the ledger's: measured-by-us is
   the brand fill, measured-with-review is the warm outline, and
   anything unmeasured is neutral. Weight and outline carry the
   distinction as well as hue, so the table still reads in monochrome. */
.w2-status[data-status="VALIDATED"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.w2-status[data-status="SUPPORTED_WITH_REVIEW"] {
  background: transparent;
  color: var(--accent-warm-text);
  border-color: var(--accent-warm);
}
.w2-status[data-status="VOICE_CAPTURE_ONLY"] {
  background: var(--surface-2);
  color: var(--accent-2-text);
  border-color: var(--accent-2);
}
.w2-status[data-status="IN_VALIDATION"] {
  background: var(--surface);
  color: var(--text-muted);
  border-color: var(--border-strong);
  border-style: dashed;
}

.w2-row-summary { font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.25rem; max-width: 72ch; }

/* The facts grid. Definition pairs, not cards — a mode's collection
   structure is a property of the mode, not a feature of its own. */
.w2-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem 2rem;
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.w2-facts > div { min-width: 0; }
.w2-facts dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .4rem;
}
.w2-facts dd { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-muted); }

/* THE LIMIT BLOCK. Deliberately given the same weight as the promise
   above it. A caveat set in 11px grey is a caveat designed not to be
   read, and the whole point of the SUPPORTED status is that the
   reader plans around what it says. */
.w2-limits {
  background: var(--vi-champagne-100);
  border-left: 3px solid var(--accent-warm);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
}
.w2-limits p {
  margin: 0 0 .4rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-warm-text);
}
.w2-limits ul { margin: 0; padding-left: 1.1rem; }
.w2-limits li { font-size: .92rem; line-height: 1.55; color: var(--text); }
.w2-limits li + li { margin-top: .45rem; }

/* Channel chips. Carriage, stated as such. */
.w2-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.w2-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: .3em .7em;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.w2-chip-note { font-size: var(--text-xs); color: var(--text-dim); }

.w2-row-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- What is not a mode ------------------------------------------ */

.w2-notmode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.w2-notmode-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 1.25rem 1.4rem;
}
.w2-notmode-item h3 { font-size: 1.02rem; margin: 0 0 .2rem; }
.w2-notmode-kind {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-2-text);
}
.w2-notmode-item p { margin: .5rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--text-muted); }

/* ---------- Capability matrix ------------------------------------------- */

.w2-matrix-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.w2-matrix { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .9rem; }
.w2-matrix caption { text-align: left; padding: 1rem 1.1rem; font-size: var(--text-sm); color: var(--text-muted); }
.w2-matrix th, .w2-matrix td { padding: .8rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); }
.w2-matrix thead th {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-2);
}
.w2-matrix tbody tr:last-child th,
.w2-matrix tbody tr:last-child td { border-bottom: 0; }
.w2-matrix tbody th { font-weight: 600; color: var(--text); }
/* A row header that is a link gets a real target rather than the height of
   its own line. WCAG 2.2 2.5.8 exempts a link inline in a sentence, and
   these qualify — but the exemption exists because prose cannot be made
   taller without damaging it, and a table row can. */
.w2-matrix tbody th a { display: inline-block; padding: .3rem 0; }

/* ---------- Product capture ---------------------------------------------
   A screenshot of the real product, with its own provenance attached.
   The caption is not optional styling: an image of a workspace with no
   route, role and environment beside it is indistinguishable from an
   illustration, which is the failure this whole wave exists to avoid. */

.w2-capture { margin: 0; }
.w2-capture img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--elevation-2);
}
.w2-capture figcaption {
  margin-top: .85rem;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-dim);
}
.w2-capture figcaption b { color: var(--text-muted); font-weight: 600; }
.w2-capture-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin-top: .4rem;
  font-variant-numeric: tabular-nums;
}

.w2-demo-flag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3em .75em;
  border-radius: var(--radius-xs);
  background: var(--vi-champagne-200);
  color: var(--accent-warm-text);
  border: 1px solid var(--accent-warm);
}

/* ---------- The device composition ---------------------------------------
   Three real captures of the deployed product, at the three form factors
   the product is actually used on: a command centre on a laptop, a
   regional portfolio on a tablet, a field workspace on a phone.

   THE FRAMING IS DELIBERATELY THIN. A drawn laptop bezel with a hinge and
   a camera notch is an illustration wrapped around a photograph, and it
   invites the reader to treat the whole composition as artwork. A 1px
   border and a shadow say "this is a screen" without pretending to be a
   device, which is the honest amount of chrome for an image whose entire
   value is that it was not drawn. */

/* THE THREE SCREENS ARE A GRID, NOT A PILE.
   The first pass overlapped a tablet and a phone across the laptop, which
   is the standard device-mockup collage — and it covered the middle of the
   one screen a reader can actually read, left a large empty band beneath,
   and identified none of the three. Here the command centre gets the width
   it needs to be legible and the two smaller surfaces sit beneath it, each
   NAMED. Naming them is the point: three anonymous screens say "we have a
   product"; three named ones say which product, on which device, for whom. */
.w2-devices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}
.w2-device { min-width: 0; }
.w2-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--elevation-2);
}
.w2-device-laptop { grid-column: 1 / -1; }
.w2-device-laptop img { border-radius: var(--radius-md); box-shadow: var(--elevation-3); }

/* The two supporting screens are portrait and much taller than they are
   wide. Cropping to a consistent band keeps the row even without
   distorting either image: object-fit preserves the aspect ratio and
   shows the top of the screen, which is where each one identifies itself. */
.w2-device-tablet img,
.w2-device-phone img {
  height: 190px;
  object-fit: cover;
  object-position: top center;
}
.w2-device-label {
  display: block;
  margin-top: .5rem;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-muted);
}
.w2-device-label b { color: var(--text); font-weight: 600; display: block; }

.w2-devices-note {
  margin: 1.1rem 0 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  /* On the light homepage hero. Inside an emerald band the rule below
     swaps both colours — the first pass used the emerald-safe muted token
     here unconditionally and put #95DCC2 on a near-white background. */
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
}
.w2-devices-note a { color: var(--accent-text); }
.w2-band .w2-devices-note { color: var(--on-emerald-muted); }
.w2-band .w2-devices-note a { color: var(--vi-champagne-300); }
.w2-band .w2-device-label { color: var(--on-emerald-muted); }
.w2-band .w2-device-label b { color: var(--on-emerald); }

@media (max-width: 640px) {
  .w2-device-tablet img,
  .w2-device-phone img { height: 150px; }
}

/* ---------- Split feature ----------------------------------------------- */

.w2-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.w2-split-text h2 { font-size: var(--text-xl); margin: 0 0 .9rem; }
.w2-split-text p { color: var(--text-muted); line-height: 1.65; }

/* ---------- The canonical sector index -----------------------------------
   The 55-node estate listing on /industries.html is rendered by
   universal-sector-page.js as `.sector-chip-list` / `.sector-chip`. Those
   classes had exactly one rule anywhere in the repository — a border, in
   sector-identity.css — and industries.html does not load that file. So
   the whole index shipped as an unstyled <ul>: bullet points, default
   margins, and bare inline links.

   axe found it as a target-size failure on 24 nodes at every viewport,
   and only against the DEPLOYED origin, because the list is built from an
   API call that cannot succeed on the local harness. It is a good example
   of a defect that a static read and a local render both miss.

   Styling it here rather than loading sector-identity.css is deliberate:
   that file is a THEME, keyed on --sector-primary, and industries.html is
   the estate index rather than one sector's page. It needs geometry, not
   a sector's colour. */

.sector-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
/* Two kinds of chip come out of the same renderer: a plain label, and a
   label wrapped in a link. Both need to be at least 24px tall on both
   axes; the link one additionally needs the whole chip to be the target,
   not just the text inside it.

   The first pass expressed that with four overlapping rules, one of
   which — resetting the anchor's padding before `:has()` put it back —
   was dead in any browser that supports `:has()` and load-bearing in one
   that does not. Two states written as three.

   This is the same result with the padding owned in exactly one place
   per case. Without `:has()` support the chip keeps its own padding and
   the anchor adds its own: a slightly roomier chip, still well over the
   24px minimum, which is the right direction to degrade in. */
.sector-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .35rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-size: var(--text-sm);
  color: var(--text);
}
.sector-chip:has(> a) { padding: 0; }
.sector-chip > a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: .35rem .7rem;
  color: inherit;
  text-decoration: none;
}
.sector-chip:hover { border-color: var(--accent); }
.sector-chip > a:hover { text-decoration: underline; }

/* ---------- Unavailable state -------------------------------------------
   Used when a page reads live data and the data is not there. It says
   what is missing and what to do, and never renders an empty table that
   reads as "nothing is supported". */
.w2-unavailable {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.6;
}
.w2-unavailable strong { color: var(--text); }

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 900px) {
  .w2-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .w2-band { padding: 3.25rem var(--w2-gutter) 2.75rem; }
  .w2-section { padding: 3rem var(--w2-gutter); }
}

@media (max-width: 640px) {
  .w2-page { --w2-gutter: 1.25rem; }
  .w2-row { padding: 1.35rem 1.25rem 1.35rem 1.65rem; }
  .w2-facts { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .w2-row-head h3 { font-size: 1.15rem; }

  /* A MATRIX BECOMES A LIST ON A PHONE.
     ------------------------------------------------------------------
     The first build put a 640px-minimum table inside an overflow-x
     scroller and called that responsive. Measured at 390px it was not:
     the page itself scrolled 199px sideways — window.scrollX genuinely
     moved — and axe reported the scroller as a keyboard trap because a
     region you can scroll must be reachable by keyboard.

     Both are symptoms of the same wrong decision. A five-column matrix
     read 350 pixels at a time is not readable however well it scrolls.
     So at phone width each row becomes a labelled block: the mode name
     as a heading, then one line per channel carrying its own column
     name. No sideways scroll, nothing hidden, and the same facts. */
  .w2-matrix-scroll { overflow-x: visible; border: 0; background: none; }
  .w2-matrix { min-width: 0; display: block; }
  .w2-matrix caption { padding: 0 0 1rem; }
  .w2-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .w2-matrix tbody,
  .w2-matrix tbody tr { display: block; }
  .w2-matrix tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: .35rem .9rem .6rem;
  }
  .w2-matrix tbody tr + tr { margin-top: .75rem; }
  .w2-matrix tbody th,
  .w2-matrix tbody td { display: block; padding: .45rem 0; border-bottom: 1px solid var(--border); }
  .w2-matrix tbody th { font-size: 1rem; border-bottom: 1px solid var(--border-strong); }
  .w2-matrix tbody tr td:last-child { border-bottom: 0; }
  /* The column name travels with the cell, because a cell with no
     header beside it is a value with no question. */
  .w2-matrix tbody td::before {
    content: attr(data-label);
    display: inline;
    font-weight: 600;
    color: var(--text-dim);
    margin-right: .5rem;
  }
}

/* Every interactive element in these surfaces keeps the platform focus
   ring rather than defining its own. Stated here because a new stylesheet
   is exactly where a custom outline gets introduced by accident. */
.w2-page a:focus-visible,
.w2-page button:focus-visible,
.w2-page summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}