/* solutions-domain.css - the constructs the per-industry gap pages add on top of
 * the landing design system.
 *
 * Loaded AFTER flux.css (tokens), theme-bridge.css (aliases) and
 * landing-pages.css (components). Everything here reuses those variables rather
 * than restating colors, so a theme change carries through and these pages
 * cannot drift away from the homepage again - which is exactly what happened
 * when they were built on a second design system.
 *
 * Only three things are genuinely new here: the cited-statistic block, the
 * per-tool gap card, and the boundary statement. Everything else is a landing
 * component used as-is.
 */

/* ---- the cited-evidence block ------------------------------------------- */

.gap-stats > * { min-width: 0; }
.gap-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px 32px;
  margin: 0 0 1.5rem;
}

.gap-stat p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Tabular figures so the numbers align down the column instead of drifting. */
.gap-stat-n {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* The source is subordinate to the claim but must never be invisible. A
   statistic whose attribution is hard to find reads as though it had none, and
   these pages are built entirely on the premise that every figure is checkable. */
/* The source attribution must WRAP. `white-space: nowrap` kept a long citation
   on one line - "ABA Standing Committee on Lawyers' Professional Liability" is
   52 characters - which overflowed its grid column and printed on top of the
   neighboring statistic. A grid item also needs min-width:0 or its content
   floor overrides the track sizing, which is the other half of the same bug. */
.gap-src {
  display: inline;
  margin-left: 2px;
  font-size: 12px;
  color: var(--text-muted, var(--text-dim));
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.gap-src:hover { color: var(--accent); }

.gap-close {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 780px;
}

/* ---- one tool, one gap --------------------------------------------------- */

.gap-tools > * { min-width: 0; }
.gap-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.gap-tool h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.gap-tool h3 a { color: var(--text-bright); text-decoration: none; }
.gap-tool h3 a:hover { color: var(--accent); text-decoration: underline; }

.gap-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--text-dim);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

.gap-tool p strong { color: var(--text-bright); font-weight: 600; }

.gap-more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.gap-more:hover { text-decoration: underline; }

/* ---- the boundary statement ---------------------------------------------- */

/* Deliberately calm. This is a scope statement a professional reader should find
   reassuring, not a disclaimer the page is apologizing for. */
.gap-boundary {
  margin: 0;
  max-width: 820px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-dim);
  border-left: 2px solid var(--border);
  padding-left: 1.25rem;
}

/* ---- calls to action and footer ------------------------------------------ */

.gap-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.gap-foot {
  padding: 2rem;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.gap-foot .landing-section-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.gap-foot a { color: var(--accent); text-decoration: none; }
.gap-foot a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .gap-stats { grid-template-columns: 1fr; gap: 20px; }
  .gap-stat-n { font-size: 27px; }
  .gap-tools { grid-template-columns: 1fr; }
}


/* ═══ THE LIVE DEMO'S OWN UI ════════════════════════════════════════════════
   module-demo emits md-* classes, which are styled in modules.css - a
   stylesheet these pages deliberately do not load. So the demo rendered with
   browser-default inputs and buttons inside an otherwise designed panel, which
   is worse than no demo: it reads as unfinished.

   Restyled here, scoped to .gap-live-mount so nothing leaks, and built on the
   flux tokens so the demo follows the domain hue like everything else. */

.gap-live-mount .md-form { display: grid; gap: 0.85rem; }

.gap-live-mount .md-field { display: grid; gap: 5px; }
.gap-live-mount .md-field > label,
.gap-live-mount .md-field > span:first-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}

/* Inputs and selects. Full width so labels and controls form a column instead
   of the ragged label-beside-control the browser default produced. */
.gap-live-mount input,
.gap-live-mount select,
.gap-live-mount textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 11px;
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gap-live-mount input:focus,
.gap-live-mount select:focus,
.gap-live-mount textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(85% 0.09 var(--accent-hue) / 0.35);
}
.gap-live-mount input[disabled],
.gap-live-mount select[disabled] { opacity: 0.65; cursor: not-allowed; }

/* The run button matches the site's primary button rather than the browser's. */
.gap-live-mount .md-run {
  margin-top: 0.35rem;
  justify-self: start;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 20px;
  color: var(--accent-text, #fff);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.gap-live-mount .md-run:hover { background: var(--accent-hover, var(--accent)); }

/* The worked-example notice: informational, not a warning. */
.gap-live-mount .md-note-field,
.gap-live-mount .md-filenote {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  background: oklch(96% 0.03 var(--accent-hue) / 0.7);
  border: 1px solid oklch(90% 0.04 var(--accent-hue) / 0.7);
  border-radius: 10px;
  padding: 10px 12px;
}
.gap-live-mount .md-note-field b,
.gap-live-mount .md-filenote b { color: var(--text-bright); }

.gap-live-mount .md-out { margin-top: 1rem; }
.gap-live-mount .md-result {
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  font-size: 13.5px;
}
.gap-live-mount .md-summary { width: 100%; font-size: 13px; border-collapse: collapse; }
.gap-live-mount .md-summary td { padding: 6px 8px; border-bottom: 1px solid var(--border); }

.gap-live-mount .md-trust {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 0.6rem;
}

/* The "open in GDBS" upsell is a link, not a shout. */
.gap-live-mount .md-upsell,
.gap-live-mount .md-priv {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  font-weight: 400;
}
.gap-live-mount .md-upsell a { color: var(--accent); font-weight: 600; text-decoration: none; }
.gap-live-mount .md-upsell a:hover { text-decoration: underline; }

.gap-live-mount .md-err {
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

/* ═══ ATTRIBUTION ═══════════════════════════════════════════════════════════
   A stated position must not look like a cited finding. Twelve facts across
   the molecular, defense and science pages carried a citation-styled link to
   our OWN site, which reads as external corroboration to anyone who does not
   click. They render as positions now: no link, and said plainly. */

.gap-src-own {
  border-bottom: none;
  font-style: italic;
  opacity: 0.85;
  cursor: help;
}

/* "as reported by X" runs longer than a bare source name, so the citation
   needs to breathe rather than crowd the sentence it attributes. */
.gap-src { line-height: 1.5; }

/* The six tools are an entry point, not the inventory. Saying so here means
   the closing "all N" confirms depth instead of contradicting the six. */
.gap-tools-lede {
  margin: 1.75rem 0 0;
  font-size: 14px;
  color: var(--text-dim);
}