/* OI-IMPL — OI page-composition glue on top of tokens.css + components.css.
 * App-level layout helpers, htmx transitions, and small niceties that are not
 * reusable components. Pages compose with these + the shared components; they
 * never define their own colors/fonts. */

/* ── Section rhythm ──────────────────────────────────────────────────────── */
.section { margin: 0 0 18px; }
.section > .section-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px;
}
.section > .section-head h2 {
  font-family: var(--font-head); font-weight: 600; font-size: 17px; margin: 0;
}
.section > .section-head .section-sub { font-size: 12px; color: var(--ink-3); }

/* Two-up grid for chart + companion table / two charts side by side */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Definition / meta list (entity identity block) */
.meta-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 12.5px; }
.meta-list dt { color: var(--ink-3); }
.meta-list dd { margin: 0; color: var(--ink); font-family: var(--font-mono); }

/* Inline notice / banner */
.banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r);
  font-size: 12.5px; margin-bottom: 16px;
}
.banner.info   { background: var(--info-soft);   color: var(--info-ink);   outline: 1px solid color-mix(in srgb, var(--info) 25%, transparent); }
.banner.warn   { background: var(--warn-soft);   color: var(--warn-ink);   outline: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.banner.danger { background: var(--danger-soft); color: var(--danger-ink); outline: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); }

/* ── htmx transitions / loading cue ──────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity .15s ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
[hx-get], [hx-post] { cursor: default; }
.htmx-request table.data-table tbody { opacity: .55; transition: opacity .12s; }

.spinner {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid var(--line-2); border-top-color: var(--accent);
  border-radius: 50%; animation: oi-spin .6s linear infinite;
  vertical-align: middle;
}
@keyframes oi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  table.data-table tbody tr { transition: none; }
}

/* Focus visibility (a11y) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }