/* ── Assets admin ────────────────────────────────────────── */
.source-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: #e2e8f0;
  color: #475569;
}

.source-tag.manual {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: var(--text-muted);
}

.asset-edit-row > td {
  background: var(--bg);
  padding: 14px;
}

.asset-edit-row .inline-form {
  flex-wrap: wrap;
  align-items: center;
}

/* Collapsible panel: summary doubles as the navy header, with a +/– affordance. */
details.panel > summary {
  list-style: none;
  cursor: pointer;
}

details.panel > summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

details.panel > summary::-webkit-details-marker {
  display: none;
}

details.panel > summary.panel-header h2::before {
  content: "＋  ";
  font-weight: 700;
}

details.panel[open] > summary.panel-header h2::before {
  content: "–  ";
}

/* ── Monitors grouped by asset (navy-header panel, collapsible) ───────────── */
.asset-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  scroll-margin-top: 20px;
}

.asset-group > summary.asset-group-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--panel-header);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  /* No overflow clip (it breaks sticky), so round the header's own top corners. */
  border-radius: 12px 12px 0 0;
  /* Sticky above the column header; line-height locks the ~49px it offsets against. */
  position: sticky;
  top: 0;
  z-index: 6;
  line-height: 1.2;
}

.asset-group > summary.asset-group-title::-webkit-details-marker {
  display: none;
}

.asset-group .findings-table-wrap {
  margin: 0;
}

.asset-group-meta,
.panel-header .panel-hint {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

/* Flush under the navy header; overflow:visible frees the sticky column header from the base wrap's scroll box. */
.check-categories {
  margin-top: 0;
  overflow: visible;
}

/* Collapsible check category (asset detail): Mute-all floats on the summary's right; table flows below. */
.check-category {
  position: relative;
  border-bottom: 1px solid var(--border);
}

.check-category:last-child {
  border-bottom: none;
}

.category-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 6px 6px;
  background: var(--bg);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.check-category > summary.category-head::-webkit-details-marker {
  display: none;
}

/* Collapse toggle: a chevron in a rounded button — points right when collapsed, down when open. */
.check-category > summary.category-head::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.check-category[open] > summary.category-head::before {
  transform: rotate(0deg);
}

.category-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.check-category .asset-pills {
  margin-left: auto;
}


/* Category-header count pills: soft-tinted with a colour dot + title-case (the header's own summary look). */
.check-category .asset-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  color: #475569;
  background: #f1f5f9;
}
.check-category .asset-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.check-category .asset-pill.status-pass { background: #dcfce7; color: #166534; }
.check-category .asset-pill.status-pass::before { background: var(--ok); }
.check-category .asset-pill.status-warn { background: #fef3c7; color: #92400e; }
.check-category .asset-pill.status-warn::before { background: #f59e0b; }
.check-category .asset-pill.status-fail { background: #fee2e2; color: #991b1b; }
.check-category .asset-pill.status-fail::before { background: var(--bad); }
.check-category .asset-pill.status-error { background: #fee2e2; color: #7f1d1d; }
.check-category .asset-pill.status-error::before { background: #7f1d1d; }
.check-category .asset-pill.status-na,
.check-category .asset-pill.status-nodata { background: #f1f5f9; color: #475569; }
.check-category .asset-pill.status-na::before,
.check-category .asset-pill.status-nodata::before { background: #94a3b8; }
.check-category .asset-pill.status-pending { background: #e0e7ff; color: #3730a3; }
.check-category .asset-pill.status-pending::before { background: #6366f1; }

/* Worst-status accent bar on the collapsed category header — scan the left edge for what needs attention. */
.check-category > summary.category-head { box-shadow: inset 4px 0 var(--border); }
.check-category > summary.category-head.status-pass { box-shadow: inset 4px 0 var(--ok); }
.check-category > summary.category-head.status-warn { box-shadow: inset 4px 0 #f59e0b; }
.check-category > summary.category-head.status-fail,
.check-category > summary.category-head.status-error { box-shadow: inset 4px 0 var(--bad); }
.check-category > summary.category-head.status-na,
.check-category > summary.category-head.status-nodata { box-shadow: inset 4px 0 #94a3b8; }

/* Reserve room on the header's right for the floating Mute-all, only when it's rendered. */
.check-category:has(.category-actions) > summary.category-head {
  padding-right: 150px;
}

.category-actions {
  position: absolute;
  top: 6px;
  right: 22px;
}

.category-actions .btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* Fixed columns so every category's table lines up without a repeated header. */
.check-category .monitors-table {
  table-layout: fixed;
}

.check-category .monitors-table td:nth-child(2) {
  width: 120px;
}

.check-category .monitors-table td:nth-child(3) {
  width: 190px;
}

.check-category .monitors-table td:nth-child(4) {
  width: 90px;
}

.check-category .monitors-table td:nth-child(5) {
  width: 210px;
}

/* One header per asset — fixed widths match the category tables so it aligns; sticky keeps labels in view. */
.monitors-colhead {
  table-layout: fixed;
  margin: 0;
  position: sticky;
  top: 49px; /* sits directly under the sticky navy asset bar */
  z-index: 5;
  background: #eef2f6;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.monitors-colhead th {
  padding: 8px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.monitors-colhead th:nth-child(2) { width: 120px; }
.monitors-colhead th:nth-child(3) { width: 190px; }
.monitors-colhead th:nth-child(4) { width: 90px; }
.monitors-colhead th:nth-child(5) { width: 210px; }

.monitors-table tr.row-disabled td,
.monitors-table tr.row-muted td {
  color: var(--text-muted);
}

.asset-status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  align-self: center;
  flex: 0 0 auto;
  background: #94a3b8;
}
.asset-status-dot.status-pass { background: var(--ok); }
.asset-status-dot.status-warn { background: #f59e0b; }
.asset-status-dot.status-fail { background: var(--bad); }
.asset-status-dot.status-error { background: #7f1d1d; }
.asset-status-dot.status-na,
.asset-status-dot.status-nodata { background: #94a3b8; }

.asset-pills {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.asset-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
}
.asset-pill.status-pass { background: var(--ok); }
.asset-pill.status-warn { background: #f59e0b; }
.asset-pill.status-fail { background: var(--bad); }
.asset-pill.status-error { background: #7f1d1d; }
.asset-pill.status-na,
.asset-pill.status-nodata { background: #64748b; }
.asset-pill.status-pending { background: #6366f1; }
.asset-pill.pill-stale {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
}
.asset-pill.status-pass { background: var(--ok); }
.asset-pill.status-warn { background: #f59e0b; }
.asset-pill.status-fail { background: var(--bad); }

.monitor-why,
.detail-line {
  margin-top: 3px;
  font-size: 12.5px;
  color: #475569;
}

.monitor-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
}

.obs-summary {
  margin: 0 0 14px;
  font-size: 13px;
}

.monitor-config-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.monitor-config-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.monitor-config-form input[type="text"] {
  min-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  background: var(--card);
}
.monitor-config-form input[type="text"]:focus,
.monitor-config-form input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 63, 143, 0.15);
}
.monitor-config-form .monitor-config-hint {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.asset-search {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.asset-search input[type="search"] {
  flex: 1;
  max-width: 380px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.asset-search input[type="search"]:focus,
.asset-search input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 63, 143, 0.15);
}

a.asset-pill {
  text-decoration: none;
}
.check-code {
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #f1f5f9;
  color: #475569;
}

.filters .filter-count {
  opacity: 0.6;
  font-weight: 600;
}

.filters .filter-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* On the navy panel header the page's muted grey would be near-black on dark; follow .panel-hint instead. */
.panel-header .panel-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.panel-header .filter-select {
  color: rgba(255, 255, 255, 0.72);
}

/* On navy the shared focus ring (dark border, dark halo) cannot be seen, so this one is light. */
.panel-header .filter-select select:focus,
.panel-header .filter-select select:focus-visible {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.filter-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.filter-select select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  max-width: 320px;
  min-width: 12rem;
}

.dashboard-asset-filter {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.badge.fstatus-open { background: #fef3c7; color: #92400e; }
.badge.fstatus-acknowledged { background: #dbeafe; color: #1e40af; }
.badge.fstatus-resolved { background: #dcfce7; color: #166534; }

/* findings-table is table-layout: fixed, so a column with no width takes an equal share of the slack and a
   badge ends up in a 460px cell. Pin every narrow column; the content column is the one left unset. */
.events-table th:nth-child(1) { width: 100px; } /* Verdict */
.events-table th:nth-child(3) { width: 130px; } /* Target */
.events-table th:nth-child(4) { width: 150px; } /* Check */
.events-table th:nth-child(5) { width: 96px; }  /* Source */
.events-table th:nth-child(6) { width: 92px; }  /* Last seen */
.events-table th:nth-child(7) { width: 76px; }  /* Age */
.events-table th:nth-child(8) { width: 132px; } /* Status */
.events-table th:nth-child(9) { width: 128px; } /* Actions */

.monitor-findings-table th:nth-child(1) { width: 100px; } /* Verdict */
.monitor-findings-table th:nth-child(3) { width: 132px; } /* Last seen */

.observations-table th:nth-child(2) { width: 132px; } /* Status */
.observations-table th:nth-child(3) { width: 110px; } /* Latency */

/* Nine pinned columns exceed a phone, and a fixed layout scales them down together until Title is
   unreadable — a scroll inside the wrap keeps the proportions the widths above were chosen for. */
.events-table {
  min-width: 1080px;
}

/* Standard-result table: pin Code/Verification/Status so the run's own evidence takes the slack. */
.standard-result-table th:nth-child(1) { width: 64px; }  /* Code */
.standard-result-table th:nth-child(2) { width: 240px; } /* Verification */
.standard-result-table th:nth-child(3) { width: 96px; }  /* Status */

/* The evidence cell holds one finding per line, which collapses to a paragraph without this. */
.standard-result-table td code {
  white-space: pre-wrap;
}

/* What the code verifies is the same sentence on every run, so it hangs off the code instead of taking a column. */
.assertion-code {
  border-bottom: 1px dotted var(--border);
  cursor: help;
  white-space: nowrap;
}

/* A status pill is one token — never let a narrow column break it mid-word. */
.badge {
  white-space: nowrap;
}

.monitors-table .badge.badge-muted {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: #e2e8f0;
  color: #475569;
}

/* Toolbar above the asset list: status legend on the left, density toggle on the right. */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.status-legend {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 2;
}

.status-legend .legend-chip {
  display: inline-block;
  margin: 0 4px 0 12px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  vertical-align: middle;
}

.status-legend .legend-chip:first-child {
  margin-left: 0;
}

.legend-chip.legend-pass { background: var(--ok); }
.legend-chip.legend-warn { background: #f59e0b; }
.legend-chip.legend-fail { background: var(--bad); }
.legend-chip.legend-na { background: #94a3b8; }

/* Compact density (opt-in, persisted): tighter rows fit a whole asset on one screen. */
body.compact .findings-table td {
  padding-top: 5px;
  padding-bottom: 5px;
}

body.compact .assertion-row td {
  padding-top: 3px;
  padding-bottom: 3px;
}

body.compact .monitor-why,
body.compact .assertion-why {
  margin-top: 1px;
}

.freshness-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #fef3c7;
  color: #b45309;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .crumb-sep {
  color: var(--border);
}

.breadcrumb .crumb-current {
  color: var(--text);
  font-weight: 600;
}

/* ── Shared page-section vocabulary (used across every admin page) ─────────── */
.page-title {
  margin: 4px 0 6px;
  font-size: 24px;
  font-weight: 700;
}

.page-intro {
  margin: 0 0 24px;
  max-width: 760px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Help sits on the control it describes: an info dot beside the button opens a bubble above it. */
.action-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The glyph draws its own ring, so no chip behind it — that would read as a circle inside a circle. */
.hint-dot {
  padding: 0;
  border: 0;
  background: none;
  color: #64748b;
  font-size: 17px;
  line-height: 1;
  cursor: help;
}

.hint-dot:hover,
.hint-dot:focus-visible {
  color: var(--panel-header);
}

.hint-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: 300px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--panel-header);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: var(--shadow);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s;
}

.action-hint:hover .hint-bubble,
.action-hint:focus-within .hint-bubble {
  visibility: visible;
  opacity: 1;
}

/* Below the control, for a hint that sits in a panel header — above would open off the top of the page. */
.hint-bubble-below {
  top: calc(100% + 8px);
  bottom: auto;
}

/* The header is dark, so the dot's default slate grey would all but disappear against it. */
.panel-header .hint-dot {
  color: rgb(255 255 255 / 65%);
}

.panel-header .hint-dot:hover,
.panel-header .hint-dot:focus-visible {
  color: #fff;
}

/* Direct children only, so panel-header h2 (nested) keeps its inherited white text. */
.dashboard > h2 {
  margin: 30px 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

/* White card wrapping an action form (add asset / create plan), matching the runner form. */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 8px;
}

.form-card .inline-form {
  flex-wrap: wrap;
  margin: 0;
}

/* Management tables size columns to content so the actions column never wraps its buttons. */
.findings-table.layout-auto {
  table-layout: auto;
}

/* The base cell allows a break anywhere, which the fixed-layout tables need for a long unbroken URL. Told that
   every word is breakable, the auto algorithm squeezes a narrow column to a few characters and splits
   exposed_database down the middle — so here a word stays whole and the wide column gives up the space. */
.findings-table.layout-auto td {
  overflow-wrap: normal;
}

/* The description is what makes the row tall; capping it stops one long sentence from starving every other column. */
.findings-table.layout-auto td .detail-line {
  max-width: 52ch;
}

.findings-table.layout-auto td .row-actions {
  flex-wrap: nowrap;
}

/* Events-page disclosure explaining what Acknowledge/Resolve/Ignore-always do (native <details>, no JS). */
.actions-legend {
  margin: -6px 0 20px;
  max-width: 760px;
}

.actions-legend > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

/* Without a marker of its own the summary reads as a stray heading, not something you can open. */
.actions-legend > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s;
}

.actions-legend[open] > summary::before {
  transform: rotate(90deg);
}

.actions-legend > summary::-webkit-details-marker {
  display: none;
}

.actions-legend > summary:hover {
  color: var(--panel-header);
}

.actions-legend dl {
  margin: 10px 0 0;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.actions-legend dt {
  font-weight: 600;
  color: var(--text);
}

.actions-legend dd {
  margin: 2px 0 10px;
  color: var(--text-muted);
  line-height: 1.5;
}

.actions-legend dd:last-child {
  margin-bottom: 0;
}

/* Source provenance: synced mirrors the platform (view/deactivate), manual is owned here (full CRUD). */
.source-tag.synced {
  background: #e0e7ff;
  color: #3730a3;
}

/* Alert-rule builder — a two-column form grouped into fieldsets, closing with the composed-rule preview. */
.rule-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; align-items: start; }
.rule-form-full { grid-column: 1 / -1; }
.rule-form-field { display: flex; flex-direction: column; gap: .3rem; }
/* An author-origin display wins over the UA's [hidden] rule, so hiding a field needs saying explicitly. */
.rule-form-field[hidden], .scope-config[hidden] { display: none; }
.rule-form-field label, .field-label {
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
}
.rule-form-field input, .rule-form-field select, .rule-form-field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 14px; color: var(--text); background: var(--card); font-family: inherit;
}
/* One height for both control kinds, so a select and an input in the same row line up. */
.rule-form-field input, .rule-form-field select { min-height: 38px; }
.rule-form-field input:focus, .rule-form-field select:focus, .rule-form-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 63, 143, .12);
}
.input-short { max-width: 200px; }
.input-with-unit { display: flex; align-items: center; gap: .45rem; }
.input-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.field-static { margin: 0; padding: 8px 0; font-size: 14px; }
.field-hint { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.req { color: var(--bad); text-decoration: none; }

.rule-fieldset {
  grid-column: 1 / -1; margin: .5rem 0 0; padding: .7rem 0 0; border: 0; border-top: 1px solid var(--border);
}
.rule-fieldset > legend { padding: 0; font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.rule-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; align-items: start; margin-top: .6rem; }
.rule-fields-three { grid-template-columns: 1fr 1fr 1fr; }

/* Segmented radios: the grading picks are one click and readable at a glance, unlike two identical dropdowns. */
.rule-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.rule-pill { position: relative; display: inline-flex; }
.rule-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rule-pill span {
  display: inline-block; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--card); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rule-pill:hover span { border-color: var(--panel-header); color: var(--panel-header); }
.rule-pill input:checked + span { background: var(--panel-header); border-color: var(--panel-header); color: #fff; }
.rule-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(43, 63, 143, .35); }
/* The rule form's own pill scale, distinct from the verdict badges. */

/* The rule as one sentence — replaces the footnote that used to explain what each condition expects. */
.rule-preview {
  grid-column: 1 / -1; margin: .9rem 0 0; padding: 11px 15px; border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; background: var(--bg); font-size: .9rem; line-height: 1.5; color: var(--text-muted);
}
.rule-preview:empty { display: none; }
.rule-preview strong { color: var(--text); }
/* Still being composed: the sentence reads as a draft, not as a finished rule. */
.rule-preview.is-incomplete { border-left-style: dashed; border-left-color: var(--border); }
.rule-preview-slot {
  display: inline-block; min-width: 2.2em; padding: 0 .3em; border-bottom: 1px dashed var(--text-muted);
  color: var(--text-muted); text-align: center;
}
.rule-form-actions { grid-column: 1 / -1; display: flex; gap: .5rem; margin-top: .6rem; }

/* A scope's dependent sub-field, indented under the select that reveals it. */
.scope-config {
  display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem;
  padding-left: .7rem; border-left: 2px solid var(--border);
}

/* Inline edit row: the same form body, opened under the rule it edits. */
.rule-edit-row > td { padding: 18px 22px; background: var(--bg); }
.rule-edit-row .rule-form-field input, .rule-edit-row .rule-form-field select { background: var(--card); }

@media (max-width: 720px) {
  .rule-form, .rule-fields, .rule-fields-three { grid-template-columns: 1fr; }

  /* The two- and three-column tables still fit a phone, so trim the pinned columns rather than scroll. */
  .monitor-findings-table th:nth-child(1) { width: 72px; }
  .monitor-findings-table th:nth-child(3) { width: 92px; }
  .observations-table th:nth-child(2) { width: 88px; }
  .observations-table th:nth-child(3) { width: 76px; }
}

/* System health: dispatch-queue cards sit above the failures panel. */
.queue-health {
  margin-bottom: 24px;
  /* Five cards at the shared 230px minimum overflow the 1240px bar and drop one onto a row of its own. */
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.card-sub.negative { color: var(--bad); }


/* Alerts catalog: summary cards sit under the Check-raised alerts header, then category blocks. */
.panel:has(#check-raised) + .catalog-stats {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Test catalog: one collapsed block per check, its assertions and every outcome the policy can report. */
.catalog-category { margin-bottom: 20px; padding: 18px 22px; }
.catalog-category > summary { cursor: pointer; list-style: none; }
.catalog-category > summary::-webkit-details-marker { display: none; }
.catalog-category-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.catalog-category-head h2 { margin: 0; }
/* A disclosure with its marker hidden gives no affordance, so the caret is drawn and rotated by hand. */
.catalog-category > summary::before {
  content: "\25B8"; color: var(--text-muted); transition: transform .12s ease-in-out;
}
.catalog-category[open] > summary::before { transform: rotate(90deg); }
.catalog-note { display: block; margin: .25rem 0 0; color: var(--text-muted); font-size: .85rem; }
.catalog-check { border-top: 1px solid var(--border); padding: 10px 0; }
.catalog-check:first-of-type { margin-top: 1rem; }
.catalog-check-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.catalog-check-name { font-weight: 600; }
/* The code a merged check carries on its own head line, where a two-level check shows it in the table instead. */
.catalog-check-code { font-family: ui-monospace, monospace; font-size: .85rem; color: var(--text-muted); }
.catalog-check .text-muted { color: var(--text-muted); font-size: .82rem; }
/* The aggregation mode is reference detail, so it stays quieter than the check's own name. */
/* The base .badge is padded for a status cell (8px 18px); on a sentence these annotate, that swamps what they annotate.
   Only the verdict keeps the full-size badge, so it is the one loud thing in a row. */
.catalog-check-head .badge,
.catalog-assertions .badge.catalog-diagnostic {
  padding: 1px 8px;
  border-radius: 6px;
  font-size: .72rem;
}
.badge.catalog-mode {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); letter-spacing: .04em;
}
.badge.catalog-gated { background: #7c3aed; }
.badge.catalog-diagnostic { background: var(--sev-info-bg); color: var(--sev-info-fg); margin-left: 6px; }
.catalog-check-description { margin: .6rem 0 .9rem; color: var(--text); font-size: .88rem; max-width: 90ch; }
/* table.data carried no th rule, so the browser default centred every header over its left-aligned column. */
table.data th {
  text-align: left;
  padding: 6px 10px 6px 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
/* Each check renders its own table, so without fixed columns the verdict column lands somewhere new on every one. */
.catalog-assertions { width: 100%; margin-bottom: .5rem; table-layout: fixed; }
.catalog-assertions th:nth-child(1), .catalog-assertions td:nth-child(1) { width: 6.5rem; }
.catalog-assertions th:nth-child(2), .catalog-assertions td:nth-child(2) { width: 5.5rem; }
.catalog-assertions td { vertical-align: top; overflow-wrap: anywhere; }
.catalog-assertion-head > td { background: var(--bg); }
.catalog-assertion-label { font-weight: 600; }
.catalog-assertions span.catalog-note, .catalog-outcomes span.catalog-note { margin: .15rem 0 0; }
.catalog-assertions code { font-size: .8rem; }
.catalog-outcome-code { color: var(--text); font-weight: 600; }
.catalog-na-row td,
.catalog-pass-condition td {
  color: var(--text-muted);
}
.catalog-na-reasons .catalog-na-reason {
  display: block;
}
.catalog-na-reasons .catalog-na-reason + .catalog-na-reason {
  margin-top: .35rem;
}
.catalog-runs-after { color: var(--text-muted); font-size: .8rem; }
/* A multiple select needs Cmd or Ctrl to pick a second value, which is why the choices are pills instead. */
.rule-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.rule-pill { position: relative; display: inline-flex; }
.rule-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rule-pill span {
  display: inline-block; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--card); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rule-pill:hover span { border-color: var(--panel-header); color: var(--panel-header); }
.rule-pill input:checked + span { background: var(--panel-header); border-color: var(--panel-header); color: #fff; }
.rule-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(43, 63, 143, .35); }
.catalog-runs-after code { font-size: .78rem; }
/* The condition leads the cell where a sibling outcome shares the wording — it is the only thing telling them apart. */
.catalog-tier-condition { display: block; margin-bottom: .1rem; font-weight: 600; color: var(--text); }
.catalog-outcome-title { display: block; }
/* A {placeholder} the page cannot fill reads as a labelled slot rather than as broken text. */
.runtime-slot {
  padding: 0 .18rem; border-radius: 3px;
  background: var(--track); color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: .82em;
}
/* A wording whose slots sit adjacent ({http_status}{edge_blame}) reads as one run-together word without this. */
.runtime-slot + .runtime-slot { margin-left: .25rem; }
/* The machine name is what a consumer keys off, not what a person reads first. */
/* The machine name a consumer keys its own catalogue off — unlabelled it read as a stray string. */
.catalog-event-type { display: block; margin-top: .3rem; color: var(--text-muted); font-size: .75rem; }
.catalog-event-type-label { text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; font-weight: 700; }

/* Codeless policy outcomes sit after the category blocks — give them the same breathing room as a catalog category. */
.catalog-uncoded {
  margin-top: 20px;
  padding: 18px 22px 22px;
}
.catalog-uncoded > h2 {
  margin: 0 0 .35rem;
  font-size: 17px;
  font-weight: 600;
}
.catalog-uncoded > .catalog-note { margin-bottom: 1rem; }
.catalog-outcomes {
  width: 100%;
  margin: 0;
  table-layout: fixed;
}
.catalog-outcomes th:nth-child(1), .catalog-outcomes td:nth-child(1) { width: 14rem; }
.catalog-outcomes th:nth-child(2), .catalog-outcomes td:nth-child(2) { width: 5.5rem; }
.catalog-outcomes td {
  vertical-align: top;
  padding: 10px 12px 10px 0;
  overflow-wrap: anywhere;
}
.catalog-outcomes tbody tr + tr td { border-top: 1px solid var(--border); }
.catalog-outcomes .badge.catalog-diagnostic { margin-left: 0; margin-top: .35rem; }
.catalog-event-type-code {
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  color: var(--text-muted);
  word-break: break-all;
}

.jurisdiction-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 0.75rem;
}

.jurisdiction-choice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.jurisdiction-choices--compact {
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.jurisdiction-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.jurisdiction-fieldset legend {
  margin-bottom: 0.35rem;
}

.tenant-jurisdiction-form {
  min-width: 16rem;
}

.tenant-create-form {
  display: grid;
  gap: 0.75rem;
  max-width: 36rem;
}

/* Signed-in session and site sign-in panels */
.web-session-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 460px;
}

.web-session-form .field-label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.web-session-form input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
}

.web-session-form input:focus,
.web-session-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 63, 143, 0.15);
}