@layer components {
  /* Chart: the canvas over its data table; once drawn, the table stays for screen readers only. */
  figure.typed-chart { position: relative; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .typed-chart-canvas { display: none; position: relative; height: 280px; }
  .typed-chart.is-drawn .typed-chart-canvas { display: block; }
  .typed-chart.is-drawn .chart-fallback {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .chart-fallback td { font-variant-numeric: tabular-nums; }
  .chart-fallback td.is-below { color: var(--jx-no); font-weight: 600; }
  .typed-chart-threshold { font-size: 13px; color: var(--muted-foreground); }

  /* Typed table: sortable headers, numbers aligned right. */
  .document-body .typed-table thead th { padding: 0; }
  .typed-table-sort {
    width: 100%; padding: 8px 12px; border: 0; background: none; font: inherit; font-weight: 600;
    color: inherit; text-align: inherit; cursor: pointer;
  }
  .typed-table-sort:hover { color: var(--foreground); }
  .typed-table-sort:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: -2px; }
  .typed-table th[aria-sort=ascending] .typed-table-sort::after { content: " ↑"; }
  .typed-table th[aria-sort=descending] .typed-table-sort::after { content: " ↓"; }
  .typed-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }
  .typed-pill {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 13px;
    background: var(--muted); color: var(--foreground); white-space: nowrap;
  }

  /* Callout: a neutral card, its tone in the icon and the left rule. */
  .typed-callout {
    display: flex; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-left-width: 3px;
    border-radius: var(--radius-md); background: var(--surface);
  }
  .typed-callout-icon { flex: none; display: inline-flex; padding-top: 3px; color: var(--muted-foreground); }
  .typed-callout-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .typed-callout-title { font-weight: 600; }
  .typed-callout-body p { margin: 0 0 4px; }
  .typed-callout-body p:last-child { margin-bottom: 0; }
  .typed-callout--info { border-left-color: var(--chart-1); }
  .typed-callout--info .typed-callout-icon { color: var(--chart-1); }
  .typed-callout--warning { border-left-color: var(--jx-wait); background: var(--jx-wait-soft); }
  .typed-callout--warning .typed-callout-icon { color: var(--jx-wait); }
  .typed-callout--decision { border-left-color: var(--jx-ok); }
  .typed-callout--decision .typed-callout-icon { color: var(--jx-ok); }

  /* Status: one line per step, a dot and the state's word; what waits on a person is amber. */
  .typed-status { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); }
  .typed-status-title { font-weight: 600; }
  .document-body .typed-status-steps { list-style: none; padding: 0; gap: 6px; }
  .status-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
  .typed-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); align-self: center; }
  .typed-status-label { font-size: 14px; }
  .typed-status-state, .typed-status-meta { color: var(--muted-foreground); }
  /* A direction override in a step's text stays inside its own span. */
  .typed-status-state, .typed-pill { unicode-bidi: isolate; }
  .status-step.is-done .typed-status-dot { background: var(--jx-ok); }
  .status-step.is-current .typed-status-dot { background: var(--foreground); }
  .status-step.is-todo .typed-status-dot { background: transparent; border: 1.5px solid var(--muted-foreground); }
  .status-step.is-waiting .typed-status-dot { background: var(--jx-wait); }
  .status-step.is-waiting .typed-status-state { color: var(--jx-wait); font-weight: 600; }
  .typed-status-link { margin-left: auto; font-weight: 500; }

  /* Invalid block: the reason, then the source as code, framed neutral. */
  .typed-invalid { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-md); }
  .typed-invalid-reason { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted-foreground); }
  .typed-invalid-reason svg { flex: none; margin-top: 2px; }
  .typed-invalid-source { max-height: 240px; overflow: auto; font-size: 13px; }
  .typed-invalid-cut { font-size: 13px; color: var(--muted-foreground); }
}