/* 8D-NOC component library — styles for the reusable Jinja macros in
 * _macros.html. Every class name starts `ds-` so they don't collide
 * with the legacy page-specific styles in style.css.
 *
 * Loaded by base.html on every page (cache-busted via static_v).
 *
 * Per project_uiux_four_persona_strategy.md — Phase 1 design system
 * extraction. All values reference tokens.css; no raw hex / px here
 * unless commented as one-off pixel alignment.
 *
 * Hard rules:
 *   - Two font-weights only (400 / 500). Never 600/700.
 *   - Sentence case in any inline default text.
 *   - Light enterprise theme; no dark surfaces or heavy shadows.
 */

/* ─── Page header ─────────────────────────────────────────────────── */
.ds-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.ds-page-header-text { min-width: 0; }
.ds-page-header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}
.ds-breadcrumb {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin: 0 0 var(--space-1);
}
.ds-breadcrumb a {
  color: var(--text-mute);
  text-decoration: none;
}
.ds-breadcrumb a:hover { color: var(--text); }
.ds-breadcrumb-sep {
  color: var(--text-faint);
  margin: 0 var(--space-1);
}
.ds-page-title {
  font-size: var(--fs-2xl);
  font-weight: 500;
  margin: 0;
  color: var(--text);
  line-height: var(--lh-tight);
}
.ds-page-subtitle {
  font-size: var(--fs-base);
  color: var(--text-mute);
  margin: var(--space-1) 0 0;
  line-height: var(--lh-base);
}

/* ─── Refresh bar ─────────────────────────────────────────────────── */
.ds-refresh-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.ds-refresh-status {
  font-family: var(--mono);
  font-size: var(--fs-xs);
}
.ds-refresh-btn {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.ds-refresh-btn:hover { background: var(--brand-soft); }
.ds-refresh-btn[data-refresh-in-progress] {
  pointer-events: none;
  opacity: 0.5;
}
.ds-refresh-btn[data-refresh-in-progress] .ds-refresh-icon {
  display: inline-block;
  animation: ds-spin 0.8s linear infinite;
}
@keyframes ds-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Status dot + pill (already in design-system.css for the catalog,
 *     redeclared here so production pages don't depend on it) ─────── */
.ds-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.ds-dot-green  { background: var(--green); }
.ds-dot-yellow { background: var(--yellow); }
.ds-dot-red    { background: var(--red); }
.ds-dot-gray   { background: var(--gray); }
.ds-dot-blue   { background: var(--blue); }
.ds-dot-label {
  margin-left: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* Pills — moved out of design-system.css so production pages can use them */
.ds-pill {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-right: var(--space-2);
}
.ds-pill-green  { background: var(--green-bg);  color: var(--green-deep); }
.ds-pill-yellow { background: var(--yellow-bg); color: var(--yellow-deep); }
.ds-pill-red    { background: var(--red-bg);    color: var(--red-deep); }
.ds-pill-gray   { background: var(--gray-bg);   color: var(--text-2); }
.ds-pill-blue   { background: var(--blue-bg);   color: var(--blue); }

/* ─── Card primitives ─────────────────────────────────────────────── */
.ds-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: block;
  position: relative;
  /* Status-band on the left edge — encodes status with shape + color */
  border-left: 4px solid var(--border);
}
.ds-card-green  { border-left-color: var(--green); }
.ds-card-yellow { border-left-color: var(--yellow); }
.ds-card-red    { border-left-color: var(--red); }
.ds-card-gray   { border-left-color: var(--gray); }

.ds-card-link {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ds-card-link:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}
.ds-card-link:hover .ds-card-arrow {
  transform: translateX(2px);
  color: var(--brand);
}

.ds-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ds-card-label {
  font-size: var(--fs-md);
  font-weight: 500;
  margin: 0;
  color: var(--text-2);
  flex: 1;
  min-width: 0;
}
.ds-card-arrow {
  color: var(--text-faint);
  font-size: var(--fs-lg);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

/* ─── KPI bignum (inside cards) ───────────────────────────────────── */
.ds-kpi-card { padding: var(--space-5); }
.ds-kpi-bignum {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ds-kpi-bignum-value {
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--text);
  line-height: var(--lh-tight);
}
.ds-kpi-bignum-label {
  font-size: var(--fs-sm);
  color: var(--text-mute);
}

/* ─── Donut (inside cards) ────────────────────────────────────────── */
.ds-donut-row {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}
.ds-donut {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(var(--ring));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.ds-donut::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--bg-elev);
}
.ds-donut-label {
  position: relative;
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
  z-index: 1;
}
.ds-donut-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.ds-donut-stack-num {
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--text);
  line-height: var(--lh-tight);
}
.ds-donut-denom {
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--text-mute);
}
.ds-donut-stack-cap {
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.ds-donut-stack-meta {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin-top: var(--space-1);
  word-break: break-word;
}
.ds-donut-stack-meta-faint {
  color: var(--text-faint);
  /* Even the faintest metadata respects the 13px floor — readability
     trumps density. Bumped 2026-05-18 alongside the global type scale. */
  font-size: var(--fs-xs);
}
.ds-donut-stack-meta code {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* ─── Empty state ─────────────────────────────────────────────────── */
.ds-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  background: var(--bg-soft);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
}
.ds-empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-3);
  color: var(--text-faint);
}
.ds-empty-message {
  font-size: var(--fs-md);
  color: var(--text-2);
  margin: 0;
  font-weight: 500;
}
.ds-empty-detail {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  max-width: 480px;
  margin: var(--space-2) auto 0;
  line-height: var(--lh-base);
}
.ds-empty-action {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: white;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.ds-empty-action:hover { background: var(--brand-deep); }

/* ─── Buttons ─────────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ds-btn:hover {
  background: var(--bg-soft);
  border-color: var(--text-faint);
}
.ds-btn-primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.ds-btn-primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.ds-btn-secondary {
  background: var(--bg-elev);
}
.ds-btn-destructive {
  background: var(--bg-elev);
  color: var(--red);
  border-color: var(--red);
}
.ds-btn-destructive:hover:not(:disabled) {
  background: var(--red);
  color: white;
}
.ds-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── AI handoff button ───────────────────────────────────────────── */
.ds-ai-handoff { white-space: nowrap; }
.ds-ai-icon {
  color: var(--brand);
  font-size: var(--fs-md);
}
.ds-ai-out {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

/* ─── Responsive — phone / tablet / laptop ─────────────────────────
 * Hard rule: the 13px floor STAYS at every viewport. Smaller screens
 * stack differently, they don't shrink text. An older operator
 * reading on a phone needs the same legibility as on a desktop.
 *
 * Breakpoints match tokens.css --bp-phone / --bp-tablet / --bp-laptop.
 */

/* ─── Laptop and below (≤1280px) — minor density tuning ─────────── */
@media (max-width: 1280px) {
  .ds-page-header { gap: var(--space-3); }
  .ds-card { padding: var(--space-4); }
}

/* ─── Tablet and below (≤900px) — cards stack to 2-col,
 *     donut row goes vertical on narrow cards ─────────────────── */
@media (max-width: 900px) {
  .ds-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .ds-page-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .ds-page-title { font-size: var(--fs-xl); }
  .ds-kpi-bignum-value { font-size: var(--fs-3xl); }
  .ds-donut { width: 80px; height: 80px; }
  .ds-donut-label { font-size: var(--fs-lg); }
  .ds-donut-stack-num { font-size: var(--fs-2xl); }
}

/* ─── Phone (≤480px) — single column, larger touch targets,
 *     donut stacks ABOVE numbers, hide breadcrumb ────────────── */
@media (max-width: 480px) {
  .ds-page-header { margin-bottom: var(--space-3); }
  .ds-breadcrumb { display: none; }
  .ds-page-title { font-size: var(--fs-lg); }
  .ds-page-subtitle { font-size: var(--fs-sm); }

  .ds-refresh-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .ds-refresh-btn {
    width: 100%;
    text-align: center;
    padding: var(--space-3);
    font-size: var(--fs-md);
  }

  .ds-card { padding: var(--space-4); }
  .ds-kpi-card { padding: var(--space-4); }
  .ds-kpi-bignum-value { font-size: var(--fs-2xl); }

  .ds-donut-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .ds-donut { width: 100px; height: 100px; }

  /* Touch targets — minimum 44px tall per Apple HIG */
  .ds-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-base);
  }
  .ds-empty-action { min-height: 44px; }
  .ds-typed-confirm-input { min-height: 44px; }
}

/* ─── Typed-confirm form ──────────────────────────────────────────── */
.ds-typed-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--red-bg);
  border-radius: var(--radius);
  border: 1px solid var(--red);
  max-width: 480px;
}
.ds-typed-confirm-prompt {
  font-size: var(--fs-sm);
  color: var(--red);
  margin: 0;
  font-weight: 500;
}
.ds-typed-confirm-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: var(--fs-md);
  background: var(--bg-elev);
}
.ds-typed-confirm-input:focus {
  outline: 2px solid var(--red);
  outline-offset: -1px;
}

/* ─── Top-nav dropdown groups (2026-05-18 consolidation) ──────────────
 * The Operations / Systems / More menus in base.html. CSS-only hover
 * + :focus-within reveal so keyboard tabbing also opens them. The
 * trigger looks like any other .nav-link so the bar stays calm; the
 * menu sits flush below with a soft elevation shadow.
 *
 * Active state on the trigger highlights when the current path is
 * inside the menu (computed server-side in base.html). This means the
 * user always sees which top-level section they're in without having
 * to open the menu to check.
 */
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-group-end {
  margin-left: 8px;
}
.nav-trigger {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-trigger:hover,
.nav-trigger:focus-visible {
  background: var(--bg-soft);
  color: var(--text);
  outline: none;
}
.nav-trigger.active {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.nav-caret {
  font-size: 10px;
  color: var(--text-mute);
  margin-top: 1px;
}
.nav-trigger.active .nav-caret { color: var(--brand-deep); }

/* The menu panel. Hidden by default — shown on hover of the group OR
 * when any descendant has keyboard focus. Uses a small invisible bridge
 * (::before) so moving the cursor from trigger to menu doesn't blip
 * the hover state. */
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 200px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: none;
  z-index: 60;
}
.nav-menu::before {
  /* Invisible bridge — eliminates the dead zone between trigger
     and menu so the hover doesn't break when the mouse crosses it. */
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu {
  display: block;
}
.nav-menu-right {
  left: auto;
  right: 0;
}
.nav-menu-wide {
  min-width: 240px;
}
.nav-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
}
.nav-menu-item:hover {
  background: var(--bg-soft);
}
.nav-menu-item.active {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 500;
}
.nav-menu-section {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 500;
  padding: 6px 12px 2px;
}
.nav-menu-section-divider {
  margin-top: 6px;
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
}
.nav-menu-badge {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange-deep);   /* brand-deep was 2.7:1 on brand-soft; orange-deep = 4.95 */
  background: var(--brand-soft);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
  margin-left: 8px;
}

/* Phone/tablet: the bar can wrap, but the menus need to anchor to
 * their trigger and not blow past the viewport. Lock menu width and
 * push right-side menus back into the viewport if they'd overflow. */
@media (max-width: 900px) {
  .nav-menu { min-width: 180px; }
  .nav-menu-wide { min-width: 200px; }
}

/* ─── Help system (2026-05-18) ─────────────────────────────────────
 * The ? icons live next to page titles (page_header macro). The
 * /help index uses a three-column grid (Pages / Concepts / Runbooks).
 * Article body inherits sensible prose defaults so markdown renders
 * comfortably without bespoke per-page styling.
 */
.ds-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-mute);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
  margin-left: 10px;
  vertical-align: 4px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ds-help-link:hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.ds-help-link-inline {
  width: 18px;
  height: 18px;
  font-size: var(--fs-xs);
  margin-left: 4px;
  vertical-align: 1px;
}

.help-search {
  display: flex;
  gap: 8px;
  margin: 12px 0 24px;
  align-items: center;
}
.help-search-input {
  flex: 1;
  padding: 10px 14px;
  font-size: var(--fs-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
}
.help-search-input:focus {
  outline: 2px solid var(--brand-soft);
  outline-offset: -1px;
  border-color: var(--brand);
}
.help-search-btn {
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--brand);
  color: white;
  border: 0;
  font-weight: 500;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.help-search-clear {
  color: var(--text-mute);
  text-decoration: none;
  font-size: var(--fs-sm);
  margin-left: 4px;
}
.help-search-clear:hover { color: var(--text); }

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .help-grid { grid-template-columns: 1fr; }
}
.help-col {
  min-width: 0;
}
.help-section-title {
  font-size: var(--fs-lg);
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--text);
}
.help-section-sub {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin: 0 0 14px;
}
.help-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-article-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.help-article-card:hover {
  border-color: var(--brand);
  background: var(--bg);
}
.help-article-cat {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange-deep);   /* AA on brand-soft (4.95:1); brand-deep failed */
  background: var(--brand-soft);
  padding: 1px 6px;
  border-radius: 3px;
  align-self: flex-start;
  font-weight: 500;
}
.help-article-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}
.help-article-sum {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: var(--lh-base);
}
.help-article-pk {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 3px;
  align-self: flex-start;
}

.help-glossary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  margin-top: 28px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.help-article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin: 0 0 20px;
  padding: 10px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.help-article-meta code {
  font-family: var(--mono);
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--text-2);
}

.help-article-body {
  max-width: 760px;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
}
.help-article-body h1 { font-size: var(--fs-2xl); font-weight: 500; margin: 28px 0 12px; }
.help-article-body h2 { font-size: var(--fs-xl);  font-weight: 500; margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.help-article-body h3 { font-size: var(--fs-lg);  font-weight: 500; margin: 20px 0 8px; }
.help-article-body p  { margin: 0 0 12px; }
.help-article-body ul, .help-article-body ol { margin: 8px 0 16px; padding-left: 24px; }
.help-article-body li { margin: 4px 0; }
.help-article-body code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--text);
}
.help-article-body pre {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.help-article-body pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}
.help-article-body blockquote {
  border-left: 3px solid var(--brand);
  margin: 16px 0;
  padding: 4px 16px;
  color: var(--text-2);
  background: var(--brand-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.help-article-body a { color: var(--brand-deep); }
.help-article-body table {
  border-collapse: collapse;
  margin: 16px 0;
  font-size: var(--fs-sm);
}
.help-article-body th, .help-article-body td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.help-article-body th { background: var(--bg-soft); font-weight: 500; }

.help-glossary-body h2 {
  /* Each term is an h2 — bigger left margin so the eye picks them out
     as the list of terms. */
  margin-top: 32px;
  font-size: var(--fs-lg);
}
.help-glossary-body h2::before {
  content: "§ ";
  color: var(--brand);
  font-weight: 500;
}

.help-article-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.help-article-foot a {
  color: var(--brand-deep);
  text-decoration: none;
}


/* ─── UX-4 batch 1: typography + color utility classes ─────────────
 * Small, single-purpose helpers that replace the most-repeated inline
 * style="..." patterns across operator templates (84+35+34+26 of them
 * alone). Naming: t- prefix for typography, c- for color, bg- for
 * background. Keep this layer SMALL — utility classes work only if
 * each one is unambiguous and earns its keep.
 *
 * Why classes over inline styles: (a) consistency (every "small
 * metadata caption" looks identical, not 12 slight variants);
 * (b) one place to change (`.t-xs` defines the font-size floor);
 * (c) smaller HTML payload (this is the cumulative reason the
 * audit flagged 1,183 inline styles).
 */

/* font-size: var(--fs-xs)   — fine print, table footers, captions */
.t-xs    { font-size: var(--fs-xs); }

/* font-family: var(--mono) — UUIDs, IPs, paths, raw values */
.t-mono  { font-family: var(--mono); }

/* mono + fs-xs together — the canonical "small monospace metadata" */
.t-mono-xs { font-family: var(--mono); font-size: var(--fs-xs); }

/* right-aligned monospace — numeric table columns */
.t-num   { text-align: right; font-family: var(--mono); }

/* Section eyebrow — small uppercase muted label above a number/title.
   Covers two near-identical patterns the audit found (9 + 8 hits). */
.t-eyebrow {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Color-only helpers — these don't bundle weight or size, just hue. */
.c-red    { color: var(--red-deep); }
.c-yellow { color: var(--yellow-deep); }
.c-green  { color: var(--green-deep); }
.c-mute   { color: var(--muted); }

/* Yellow soft-fill — pill / banner / inline alert backgrounds.
   TEXT uses the -deep tokens (AA on the tint); the -bg tints are unchanged. */
.bg-yellow-soft { background: var(--yellow-bg); color: var(--yellow-deep); }
.bg-red-soft    { background: var(--red-bg);    color: var(--red-deep); }
.bg-green-soft  { background: var(--green-bg);  color: var(--green-deep); }


/* ─── UX-4 batch 2: page-head + subtitle semantic helpers ──────────
 * These two specific patterns repeated ~9 times each in operator
 * templates as inline style overrides on `.page-head` + the muted-
 * subtitle `<p>` underneath it. Promoting to classes since the
 * intent is "this is a different page-head treatment" / "this is
 * the small caption under a page title", not arbitrary spacing.
 */

/* Tighter page-head variant: less bottom margin + items aligned to the
   bottom of the row (so a tall H1 + multi-line subtitle don't stretch
   the action buttons upward). Used with `.page-head`:
     <div class="page-head page-head-flush">
*/
.page-head-flush {
  align-items: flex-end;
  margin-bottom: 14px;
}

/* The small "explainer" line under a page title: muted color, fine-print
   size, hugged tightly under the H1.
     <p class="muted subtitle-line">Explains what this page does.</p>
*/
.subtitle-line {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
}