/* ---------------------------------------------------------------------------
   Causant foundation - Variant 1 primitives
   ---------------------------------------------------------------------------
   Layout, rules, controls, tables and evidence language shared by the public
   shell and the private product. Consumes styles/tokens.css and defines no
   raw colour of its own.
--------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.c-page {
  min-height: 100vh;
  margin: 0;
  color: var(--causant-ink);
  background-color: var(--causant-canvas);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Exposed grid --------------------------------------------------------------
   The grid is painted as a background so it never occupies DOM and never sits
   between the reader and the text. It is applied to a section by class, not
   globally, because a page ruled edge to edge reads as graph paper. Long
   reading passages opt out; comparison and sequence surfaces opt in. */
.c-ruled {
  position: relative;
  background-image:
    repeating-linear-gradient(
      to right,
      var(--causant-grid) 0 1px,
      transparent 1px calc(100% / var(--grid-columns))
    );
  background-position: var(--page-gutter) 0;
  background-size: calc(100% - (var(--page-gutter) * 2)) 100%;
  background-repeat: repeat-y;
}

/* Fainter behind dense evidence, so alignment is still legible but the grid
   stops competing with rows of small type. */
.c-ruled--faint {
  background-image:
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--causant-grid) 55%, transparent) 0 1px,
      transparent 1px calc(100% / var(--grid-columns))
    );
}

@media (max-width: 700px) {
  .c-ruled,
  .c-ruled--faint {
    background-image: none;
  }
}

.c-shell {
  width: 100%;
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
}

.c-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--space-5);
}

/* Section rules. The major rule is the one structural signal the design
   leans on hardest, so it is a token, not an ad hoc border. */
.c-rule {
  border: 0;
  border-top: var(--border-hair) solid var(--causant-rule);
  margin: 0;
}

.c-rule--hair {
  border-top-color: var(--causant-rule-soft);
}

.c-section {
  padding-top: clamp(var(--space-8), 7vw, var(--space-10));
  padding-bottom: clamp(var(--space-8), 7vw, var(--space-10));
  border-top: var(--border-hair) solid var(--causant-rule);
}

/* Typography ---------------------------------------------------------------- */
.c-display {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: -0.033em;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.c-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: var(--leading-snug);
}

.c-subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
}

.c-lede {
  max-width: var(--measure);
  margin: 0;
  color: var(--causant-ink-soft);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.c-body {
  max-width: var(--measure);
  margin: 0;
  color: var(--causant-ink-soft);
}

.c-body--tight {
  max-width: var(--measure-tight);
}

/* The one uppercase style in the system. Labels only: evidence class, stage,
   timestamp, provenance, section kicker. Never a sentence. */
.c-label {
  display: block;
  margin: 0;
  color: var(--causant-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.c-label--ink {
  color: var(--causant-ink);
}

.c-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--causant-muted);
}

.c-figure {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Controls ------------------------------------------------------------------
   Flat rectangles. One filled action per view; everything else is a rule or a
   underlined text link. */
.c-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-4) var(--space-6);
  border: var(--border-hair) solid var(--causant-ink);
  border-radius: var(--radius-control);
  background: var(--causant-ink);
  color: var(--causant-canvas);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.c-action:hover,
.c-action:focus-visible {
  border-color: var(--causant-accent);
  background: var(--causant-accent);
  color: var(--causant-on-accent);
}

.c-action--quiet {
  background: transparent;
  color: var(--causant-ink);
}

.c-action--quiet:hover,
.c-action--quiet:focus-visible {
  background: var(--causant-ink);
  border-color: var(--causant-ink);
  color: var(--causant-canvas);
}

.c-link {
  color: var(--causant-ink);
  font-size: var(--text-base);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--motion-fast) var(--motion-ease);
}

.c-link:hover,
.c-link:focus-visible {
  text-decoration-color: var(--causant-accent);
  color: var(--causant-accent);
}

.c-field {
  display: grid;
  gap: var(--space-2);
}

.c-field input,
.c-field textarea,
.c-field select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-1);
  border: 0;
  border-bottom: var(--border-hair) solid var(--causant-ink);
  border-radius: 0;
  background: transparent;
  color: var(--causant-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.c-field input:focus-visible,
.c-field textarea:focus-visible,
.c-field select:focus-visible {
  border-bottom-color: var(--causant-accent);
}

/* Focus. Never removed in pursuit of elegance. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.c-skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--causant-ink);
  color: var(--causant-canvas);
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.c-skip-link:focus {
  transform: translateY(0);
}

/* Tables --------------------------------------------------------------------
   The aligned table is the evidential ground truth of this product. It is a
   first-class component, not a fallback for when a chart will not fit. */
.c-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.c-table caption {
  margin-bottom: var(--space-3);
  color: var(--causant-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--label-tracking);
  text-align: left;
  text-transform: uppercase;
}

.c-table th,
.c-table td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: var(--border-hair) solid var(--causant-rule-soft);
  text-align: left;
  vertical-align: top;
}

.c-table thead th {
  border-bottom-color: var(--causant-rule);
  color: var(--causant-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.c-table tbody th {
  color: var(--causant-ink);
  font-weight: 600;
}

/* Evidence language ---------------------------------------------------------
   One vocabulary for evidence class across the product. Each carries a mark as
   well as a colour, because status must never be conveyed by colour alone. */
.c-evidence {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.c-evidence::before {
  content: attr(data-mark);
  font-weight: 700;
}

.c-evidence[data-evidence="verified"] {
  color: var(--causant-accent);
}

.c-evidence[data-evidence="supported"],
.c-evidence[data-evidence="hypothesis"] {
  color: var(--causant-ink-soft);
}

.c-evidence[data-evidence="unknown"],
.c-evidence[data-evidence="unavailable"] {
  color: var(--causant-muted);
}

.c-evidence[data-evidence="stale"] {
  color: var(--causant-caution);
}

.c-evidence[data-evidence="contradicted"] {
  color: var(--causant-critical);
}

/* Route decision. The single place the accent may be used at size, and only
   for the route that actually survived scrutiny. */
.c-route {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: var(--border-hair) solid var(--causant-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-route[data-route="selected"] {
  border-color: var(--causant-accent);
  background: var(--causant-accent);
  color: var(--causant-on-accent);
}

.c-route[data-route="rejected"] {
  border-color: var(--causant-rule-mid);
  color: var(--causant-muted);
}

/* Progress. Segmented blocks, no percentage theatre. A block is filled only
   when the backend reports that stage genuinely complete. */
.c-progress {
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-progress li {
  flex: 1 1 0;
  height: 44px;
  border: var(--border-hair) solid var(--causant-rule-mid);
  background: transparent;
  transition: background var(--motion-base) var(--motion-ease);
}

.c-progress li[data-state="complete"] {
  border-color: var(--causant-ink);
  background: var(--causant-ink);
}

.c-progress li[data-state="active"] {
  border-color: var(--causant-accent);
  background: var(--causant-accent);
}

.c-progress li[data-state="partial"] {
  border-color: var(--causant-ink);
  background: repeating-linear-gradient(
    135deg,
    var(--causant-ink) 0 2px,
    transparent 2px 6px
  );
}

.c-progress li[data-state="failed"] {
  border-color: var(--causant-critical);
  background: var(--causant-critical-soft);
}

/* Stat band. Rule-separated cells, never dashboard tiles. */
.c-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
  padding: 0;
}

.c-stats > div {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-left: var(--border-hair) solid var(--causant-rule-soft);
}

.c-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.c-stats dt {
  margin-top: var(--space-2);
  color: var(--causant-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.c-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* An absent value is not a zero. Rendering 0 where nothing was measured is a
   factual claim the system cannot support. */
.c-unmeasured {
  color: var(--causant-faint);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}