/* standard.css — page styles for the Data Standard (/standard/) + Compatibility pages.
 * Token-only per site-kit §2.1 (no hardcoded color/space/shape). Loaded via
 * $page_extra_css AFTER fundamentals.css. Adds the one primitive the content
 * layer lacks — a code panel for the oat-ods message — and lets the
 * compatibility matrix run full width.
 */

/* The oat-ods message example — a dark code panel built from the --code-* tokens. */
.fund-prose .oat-code {
  margin-block: var(--space-5);
  padding: var(--space-4);
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  -webkit-text-size-adjust: 100%;
}
.fund-prose .oat-code .k { color: var(--brand-leaf, #8fd19e); }   /* keys / structure */
.fund-prose .oat-code .c { color: var(--text-muted); }            /* inline comments */

/* Compatibility matrix — the canonical fund-cost table, allowed to breathe wider. */
.fund-cost.compat { max-width: none; }
.fund-cost.compat td.tnum { width: 7rem; white-space: nowrap; }
/* Phone: release the fixed value column so the stacked-row layout from
   fundamentals.css applies to the compat variant too. */
@media (max-width: 640px) {
  .fund-cost.compat td.tnum { width: auto; }
}

/* Test endpoint — live message cards + endpoint panel. Token-only. */
.ods-empty { color: var(--text-muted); font-style: italic; margin-block: var(--space-5); }
.ods-msg { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-block: var(--space-4); }
.ods-msg__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.ods-when { font-family: var(--font-mono); font-size: var(--size-tiny); color: var(--text-muted); font-weight: 400; }
.ods-badge { font-family: var(--font-mono); font-size: var(--size-tiny); text-transform: uppercase; letter-spacing: var(--tracking-caps); padding: var(--space-2xs) var(--space-2); border-radius: var(--radius-sm); border: 1px solid currentColor; }
.ods-badge--ok { color: var(--brand-leaf, #2e7d54); }
.ods-badge--bad { color: var(--brand-red, #b3261e); }
.ods-reading { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-heading); margin: var(--space-2) 0; }
.ods-reading b { font-variant-numeric: tabular-nums; }
.ods-kv { font-size: var(--size-small); color: var(--text-muted); margin: 0; }
.ods-issues { color: var(--brand-red, #b3261e); font-size: var(--size-small); margin: var(--space-2) 0 0; }
.ods-msg details { margin-top: var(--space-2); }
.ods-msg summary { cursor: pointer; font-size: var(--size-tiny); color: var(--text-muted); }
.ods-url { font-family: var(--font-mono); font-size: var(--size-tiny); word-break: break-all; color: var(--text-body); }
.ods-boxform { display: flex; gap: var(--space-2); }
.ods-boxform input { flex: 1; padding: var(--space-1-2) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-body); font-size: var(--size-small); }