.user_list-8e41c31 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.user_card-8e41c31 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}

.card_head-8e41c31 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.card_left-8e41c31 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.card_actions-8e41c31 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.user_name-8e41c31 {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.user_mail-8e41c31 {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.admin_badge-8e41c31 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
}

.domains_row-8e41c31 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.domain_chip-8e41c31 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
}

.chip_x-8e41c31 {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
  cursor: pointer;
}
.chip_x-8e41c31:hover { color: var(--err); }

.btn_sm-8e41c31 {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.btn_sm-8e41c31:hover:not(:disabled) { color: var(--ink); border-color: var(--line-2); }
/* Without this a disabled .btn_sm looked (and hovered) exactly like an enabled one. */
.btn_sm-8e41c31:disabled { cursor: not-allowed; opacity: 0.45; }

.btn_danger-8e41c31 {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--err) 45%, var(--line));
  background: color-mix(in srgb, var(--err) 8%, transparent);
  color: var(--err);
  cursor: pointer;
}
/* Visibly inert until the typed-name gate passes; without this a disabled
   confirm button looked identical to a live one and "did nothing". */
.btn_danger-8e41c31:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.btn_danger-8e41c31:hover:not(:disabled) {
  background: color-mix(in srgb, var(--err) 16%, transparent);
  border-color: var(--err);
}

.keys_section-8e41c31 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 2px;
}

.key_row-8e41c31 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.key_tag-8e41c31 {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  min-width: 60px;
}

.key_preview-8e41c31 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.add_key_row-8e41c31 {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}
.add_key_row-8e41c31 input:first-child { max-width: 120px; }
.add_key_row-8e41c31 input:nth-child(2) { flex: 1; min-width: 160px; }

/* Email chips + add row */
.email_section-8e41c31 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  align-items: center;
}

.email_chip-8e41c31 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--muted);
}

.add_email_row-8e41c31 {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.add_email_row-8e41c31 input { min-width: 180px; flex: 1; max-width: 300px; }

/* Search bar */
.search_row-8e41c31 {
  margin-bottom: 10px;
}
.search_row-8e41c31 input { max-width: 320px; width: 100%; }

/* List view action cell */
.tbl_actions-8e41c31 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Email truncation in list view */
.email_all-8e41c31 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* Pencil icon button in list actions cell */
.btn_icon-8e41c31 {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 13px;
  padding: 3px 7px;
  cursor: pointer;
  line-height: 1;
}
.btn_icon-8e41c31:hover { color: var(--ink); border-color: var(--line-2); }

/* Modal overlay */
.modal_backdrop-8e41c31 {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal_card-8e41c31 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(560px, calc(100vw - 32px));
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px color-mix(in srgb, #000 40%, transparent);
}

/* Wider variant for the domain Settings modal (multi-column form). */
.modal_wide-8e41c31 {
  width: min(840px, calc(100vw - 32px));
}

/* Settings modal is grouped into titled cards to reduce clutter. */
.scard-8e41c31 {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: color-mix(in srgb, var(--panel-2) 40%, transparent);
  /* Inside .settings_cols (a multi-column container) a card must never be
     split across a column boundary. The unprefixed property is what current
     browsers honour; the -webkit- form is kept for older WebKit, which shipped
     multicol before break-inside was standardised. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  /* Multicol has no row-gap, so each card owns its own bottom spacing. This is
     the ONLY vertical rhythm between stacked cards — do not reintroduce
     per-card inline margins in main.rs. */
  margin: 0 0 16px;
}
/* Cards that need the whole width (Cloudflare Redirects, whose rows carry long
   expressions and target URLs; the Alerts table; the CPU chart).
   `column-span: all` also forces a column break either side of the card, which
   is what makes it read as a full-width band separating the columns above from
   the columns below, rather than as one more item in a column. */
.scard_wide-8e41c31 {
  column-span: all;
  break-inside: avoid;
}
/* Multicol discards the preceding card's bottom margin at a column-span break.
   Restore that rhythm on layouts where a wide card actually spans columns. */
@media (min-width: 833px) {
  .settings_cols-8e41c31 > .scard_wide-8e41c31 { margin-top: 16px; }
}
.scard_title-8e41c31 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.integration_list-8e41c31 { display: flex; flex-direction: column; }
.integration_add-8e41c31 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.integration_add-8e41c31 select { flex: 1 1 280px; min-width: 0; }
.integration_row-8e41c31 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.integration_identity-8e41c31 { min-width: 0; flex: 1; }
.integration_identity-8e41c31 strong, .integration_identity-8e41c31 span { display: block; }
.integration_identity-8e41c31 span { color: var(--muted); font-size: 0.8em; overflow-wrap: anywhere; }
.integration_roles-8e41c31 { display: flex; gap: 5px; flex-wrap: wrap; }
.integration_actions-8e41c31 { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 620px) {
  .integration_row-8e41c31 { align-items: flex-start; flex-wrap: wrap; }
  .integration_identity-8e41c31 { flex-basis: calc(100% - 80px); }
  .integration_actions-8e41c31 { width: 100%; justify-content: flex-start; }
  .integration_add-8e41c31 select { flex-basis: 100%; width: 100%; }
}
/* 2-up (auto-fitting) grid for the read-only status fields, so fs/log/debug
   sit beside deployment/site-type instead of stacking. */
.settings_grid-8e41c31 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
}

.modal_header-8e41c31 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.modal_title-8e41c31 {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.modal_close-8e41c31 {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
  line-height: 1;
}
.modal_close-8e41c31:hover { color: var(--ink); background: var(--panel-2); }

.modal_body-8e41c31 {
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal_section_title-8e41c31 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.modal_actions-8e41c31 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

/* Domain detail page: the cards themselves, as a true masonry.
   This is CSS multi-column, not flex-wrap, and not `grid-template-rows:
   masonry` (still not shipping). Flex-wrap made every row as tall as its
   tallest card, so the Status card — roughly 3x the height of Database or
   Client — left a large empty band across the rest of its row. Multicol packs
   each column independently, so there are no leftover bands at all.
   Deliberate, operator-approved trade-off: multicol reading order is
   COLUMN-major (cards flow down a column, then across) rather than row-major.
   `column-width` + `column-count` together mean "at most 3 columns, each at
   least ~400px wide", which degrades to 2 then 1 column on narrow viewports
   without a media query. */
.settings_cols-8e41c31 {
  column-width: 400px;
  column-count: 3;
  column-gap: 16px;
}

/* Collapsible domain-access groups on a user card (client-admin access
   self-service). A client admin of a 150-domain client otherwise rendered
   every one of them inline and buried the rest of the card. */
.grant_groups-8e41c31 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Breathing room before whatever the card puts next (the SSH keys block).
     Collapsed, these folds are three tight lines; without this they read as
     one run-on list with the section under them. */
  margin: 4px 0 14px;
}
.grant_group-8e41c31 {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--panel-2) 30%, transparent);
}
.grant_summary-8e41c31 {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-2, inherit);
  /* The chips below get their own margin from .domains_row; without this the
     open state reads as one block with no gap under the summary. */
  padding: 2px 0;
}
.grant_group-8e41c31[open] > .grant_summary-8e41c31 {
  margin-bottom: 6px;
}
/* The add-a-domain / link-a-client row lives inside its fold now, so it needs
   separating from the chips above it rather than from the card. */
.grant_group-8e41c31 > .add_email_row-8e41c31 {
  margin-top: 8px;
}
.grant_hint-8e41c31 {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 6px;
}

/* Single-card tab body. `.settings_cols` is a multi-column container, so a
   lone card put inside it has its CHILDREN flowed across three columns —
   title in one, content in the next — which is what the Access tab did on a
   wide screen. Use this instead whenever a tab renders exactly one card, and
   cap the width so the card does not stretch across a 2560px display. */
.settings_one-8e41c31 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

/* Same stack, full width: the Mail tab's identity table (address, kind,
   destinations, spam policy, actions) wraps every address over three lines
   at 720px. */
.settings_full-8e41c31 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Danger zone (archive/purge): a `.scard` modifier that visually separates
   it from the everyday cards above it — red-tinted border/background and
   title, same color-mix approach as .btn_danger above — so it never reads
   as just another item in the same list (portal danger-zone spec, Step 2). */
.scard_danger-8e41c31 {
  border-color: color-mix(in srgb, var(--err) 45%, var(--line));
  background: color-mix(in srgb, var(--err) 6%, transparent);
}
.scard_danger-8e41c31 .scard_title-8e41c31 {
  color: var(--err);
}

/* Cloudflare-style proxy switch: cloud glyph grey (DNS only) vs orange (Proxied). */
.proxy_toggle-8e41c31 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  color: var(--ink);
}
.proxy_toggle-8e41c31:disabled { cursor: default; opacity: 0.65; }
.proxy_toggle-8e41c31:hover:not(:disabled) { text-decoration: underline; }
.proxy_static-8e41c31 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
/* Per-record live authoritative read shown only on mismatch. */
.live_read-8e41c31 {
  margin-top: 6px;
  border: 1px solid color-mix(in srgb, #f59e0b 55%, var(--line));
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}
.live_read_title-8e41c31 { font-weight: 600; }
.live_read_value-8e41c31 { overflow-wrap: anywhere; color: var(--muted); }


/* Certificate status pill (pending / issuing / issued / failed / revoked) —
   mirrors domains.module.css's `.state` pill: one base class, one color
   variant per `pure::CertTone`. */
.status-f7f34e2 { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; }
.status_ok-f7f34e2 { color: var(--ok); }
.status_warn-f7f34e2 { color: var(--warn); }
.status_err-f7f34e2 { color: var(--err); }
.status_muted-f7f34e2 { color: var(--faint); }
.dot_muted-f7f34e2 { background: var(--faint); box-shadow: none; }

/* Staging vs production — orthogonal to status, so its own small badge
   rather than folded into the status pill (see the spec: "a staging
   certificate looks perfectly valid ... and is rejected by every browser"). */
.directory_badge-f7f34e2 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.directory_staging-f7f34e2 { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line-2)); }
.directory_production-f7f34e2 { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line-2)); }

/* Extra SANs beyond the primary domain, one chip each. */
.domains_row-f7f34e2 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.domain_chip-f7f34e2 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

/* Expiry inside the 30-day renewal window — same tone as .status_warn, but a
   separate class since an `issued` cert nearing expiry is still status_ok
   until it actually fails. */
.expiry_soon-f7f34e2 { color: var(--warn); font-weight: 500; }

.last_error-f7f34e2 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--err);
  max-width: 320px;
  overflow-wrap: break-word;
  display: inline-block;
}


/* State pill (Active / Migrating / Disabled / Archived). */
.state-57809a3 { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; }
.state_active-57809a3 { color: var(--ok); }
.state_migrating-57809a3 { color: var(--warn); }
.state_disabled-57809a3 { color: var(--faint); }
/* Distinct from disabled ("temporarily off, still on disk"): archived means
   "gone, recoverable from cold storage" — a cooler, more final-looking tone. */
.state_archived-57809a3 { color: var(--accent, var(--faint)); }
.archive_info-57809a3 { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

/* --- Migration rail (the signature) --------------------------------------
   The 7-step state machine as a live progress rail. */
.mig_head-57809a3 { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.mig_route-57809a3 { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.rail-57809a3 { display: flex; padding: 0 2px; }
.step-57809a3 { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; position: relative; }
/* connector line to the previous node */
.step-57809a3:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--line-2);
  z-index: 0;
}
.step_reached-57809a3:not(:first-child)::before { background: var(--ok); }

.node-57809a3 {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  background: var(--panel);
  border: 2px solid var(--line-2);
  font-family: var(--font-mono); font-size: 11px; color: var(--faint);
}
.node_done-57809a3 { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); }
.node_active-57809a3 {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}
.node_fail-57809a3 { background: var(--err); border-color: var(--err); color: #fff; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 8%, transparent); }
}

.step_label-57809a3 { margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); text-align: center; }
.step_label_on-57809a3 { color: var(--ink); }
.mig_note-57809a3 { margin-top: 18px; font-size: 12px; color: var(--muted); }
.mig_note-57809a3 b { color: var(--ink); font-weight: 500; }

/* domain card (cards view) */
.card-57809a3 { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.card-57809a3:hover { border-color: var(--line-2); }
.card_dom-57809a3 { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.card_meta-57809a3 { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.grid-57809a3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* DNS status pill (dns-status-and-pending-records spec, Part A).
   Deliberately mirrors the state pill above rather than inventing a second
   visual language for "a per-domain cached verdict".

   `none` must read as DEAD, not as an error we should chase: those domains
   have no NS and no SOA anywhere up the tree, so they cannot send, receive,
   or take a record. `third_party` must read as NORMAL — a client keeping DNS
   elsewhere is a steady state, not a fault — so it gets the neutral accent,
   not a warning colour. */
.dns-57809a3 { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; }
.dns_linked-57809a3 { color: var(--ok); }
.dns_auto-57809a3 { color: var(--ok); }
.dns_third_party-57809a3 { color: var(--accent, var(--muted)); }
.dns_none-57809a3 { color: var(--faint); text-decoration: line-through; }
.dns_unknown-57809a3 { color: var(--muted); }
/* Probe age: a stale verdict must not be mistaken for current truth. */
.dns_age-57809a3 { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-left: 4px; }


/* Conditions strip: the inline/bastion-specific health signals a generic
   dashboard wouldn't know to watch. */





.grid-74e01b5 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.card-74e01b5 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 16px 14px;
  transition: border-color 0.15s ease;
}
.card-74e01b5:hover { border-color: var(--line-2); }

.card_head-74e01b5 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dep_name-74e01b5 { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }

.pods-74e01b5 { display: flex; align-items: center; gap: 9px; margin: 14px 0 12px; }
.pods_val-74e01b5 { font-family: var(--font-mono); font-size: 18px; font-weight: 500; }
.pods_lbl-74e01b5 { color: var(--muted); font-size: 12px; }

.meta-74e01b5 { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 11px; }
.row-74e01b5 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.k-74e01b5 { color: var(--faint); font-size: 12px; }
.v-74e01b5 { font-family: var(--font-mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; }
.v_ink-74e01b5 { color: var(--ink); }

/* /domains disk usage bar (fleet disk usage spec). Colour is never the only
   signal — the percentage is always rendered as text alongside it. */
.disk_row-74e01b5 { display: flex; flex-direction: column; gap: 4px; }
.disk_text-74e01b5 { font-family: var(--font-mono); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.disk_text_warn-74e01b5 { color: var(--warn); }
.disk_text_crit-74e01b5 { color: var(--err); }
.disk_bar-74e01b5 { position: relative; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.disk_fill-74e01b5 { height: 100%; border-radius: 999px; background: var(--ok); }
.disk_fill_warn-74e01b5 { background: var(--warn); }
.disk_fill_crit-74e01b5 { background: var(--err); }


/* Services view (/services/:section). Styling experiment, scoped to this page
   only (Thomas 2026-11-06: "clean, light, blue accent"): page-local --sv-*
   tokens on .theme, light by default and redefined under the portal's own
   dark switch. Nothing outside .theme changes. */

.theme-a897be7 {
  --sv-accent: oklch(41% .18 264);        /* deep blue: links, active, buttons */
  --sv-accent-ink: oklch(99% 0 0);
  --sv-head: oklch(93.5% .035 268);       /* table header band */
  --sv-soft: oklch(96.5% .018 268);       /* hover, active chip, count pills */
  --sv-pill-ink: oklch(38% .16 264);
  --sv-ok: oklch(60% .15 152);
  --sv-warn: oklch(70% .15 70);
  --sv-err: oklch(56% .2 25);
  --sv-card-shadow: 0 1px 2px oklch(30% .03 264 / .06), 0 4px 14px oklch(30% .03 264 / .04);
}
:root[data-theme="dark"] .theme-a897be7 {
  --sv-accent: oklch(76% .11 264);
  --sv-accent-ink: oklch(18% .03 264);
  --sv-head: oklch(29% .045 264);
  --sv-soft: oklch(27% .03 264);
  --sv-pill-ink: oklch(84% .08 264);
  --sv-ok: oklch(70% .14 152);
  --sv-warn: oklch(78% .14 75);
  --sv-err: oklch(66% .17 25);
  --sv-card-shadow: none;
}
.theme-a897be7 > div:first-child > span:first-child { color: var(--sv-accent); }

.icon-a897be7 { flex: none; display: block; }


.layout-a897be7 {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 860px) {
  .layout-a897be7 { grid-template-columns: 1fr; }
}

.side-a897be7 { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; }
.side_label-a897be7 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.side_nav-a897be7 { display: flex; flex-direction: column; border-left: 3px solid var(--line); margin-top: 6px; }
.side_text-a897be7 { display: inline-flex; align-items: center; gap: 10px; }
.side_link-a897be7 {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; margin-left: -3px; border-left: 3px solid transparent;
  color: var(--muted); text-decoration: none; font-size: 14px;
}
.side_link-a897be7:hover { color: var(--sv-accent); background: var(--sv-soft); }
.side_active-a897be7 { color: var(--sv-accent); border-left-color: var(--sv-accent); font-weight: 500; }

.main-a897be7 { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.card-a897be7 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  min-width: 0;
  box-shadow: var(--sv-card-shadow);
}
.card_head-a897be7 { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.h2-a897be7 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--sv-accent); }
.h3-a897be7 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--sv-accent); }
.intro-a897be7 { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.kicker-a897be7 { margin-top: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.muted-a897be7 { color: var(--muted); }
.empty-a897be7 { color: var(--faint); font-size: 13px; padding: 8px 0; }

.chips-a897be7 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip-a897be7 {
  border: 1px solid transparent; background: transparent; color: var(--sv-accent);
  padding: 5px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.chip-a897be7:hover { background: var(--sv-soft); }
.chip_active-a897be7 { background: var(--sv-soft); color: var(--sv-accent); font-weight: 500; }
.count-a897be7 {
  font-size: 11px; font-family: var(--font-mono); color: var(--sv-pill-ink); font-weight: 600;
  background: var(--sv-head); border-radius: 4px; padding: 0 5px; min-width: 18px; text-align: center;
}

.table-a897be7 { width: 100%; border-collapse: collapse; }
.table-a897be7 th {
  text-align: left; font-weight: 400; font-size: 14px; color: var(--sv-accent);
  background: var(--sv-head); padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.table-a897be7 td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.table-a897be7 tbody tr:hover { background: var(--sv-soft); }
.table-a897be7 { border: 1px solid var(--line); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table-a897be7 tbody tr:last-child td { border-bottom: none; }
.table-a897be7 th .icon-a897be7 { display: inline-block; }
.num-a897be7 { text-align: center !important; }
.row_dim-a897be7 td { color: var(--muted); }
.row_total-a897be7 td { font-weight: 600; border-top: 2px solid var(--line); }

.addr-a897be7 { color: var(--ink); font-weight: 600; text-decoration: none; }
.actions-a897be7 :is(button, a) { color: var(--sv-accent); }
a.addr-a897be7:hover { color: var(--sv-accent); }
.link-a897be7 { color: var(--sv-accent); text-decoration: none; font-size: 13px; }
.link-a897be7:hover { text-decoration: underline; }
.link_quiet-a897be7 { color: var(--muted); text-decoration: none; font-size: 13px; }
.link_quiet-a897be7:hover { color: var(--sv-accent); }
.code-a897be7 { font-family: var(--font-mono); font-size: 12px; }
.pill-a897be7 {
  display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: 5px;
  background: var(--sv-head); color: var(--sv-pill-ink);
  font-family: var(--font-mono); font-size: 12px;
}

.type_cell-a897be7 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.type_word-a897be7 { color: var(--muted); }
.arrow-a897be7 { color: var(--faint); }
.storage_cell-a897be7 { min-width: 140px; }
.quota-a897be7 { font-size: 12px; color: var(--muted); }
.actions-a897be7 { white-space: nowrap; text-align: right; }
.actions-a897be7 > * + * { margin-left: 4px; }

.bar-a897be7 { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 5px; max-width: 160px; }
.tag-a897be7 { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; color: oklch(99% 0 0); }
.tag_ok-a897be7 { background: var(--sv-ok); }
.tag_warn-a897be7 { background: var(--sv-warn); color: oklch(20% .03 70); }
.tag_err-a897be7 { background: var(--sv-err); }
.bar_fill-a897be7 { height: 100%; }
.bar_ok-a897be7 { background: var(--sv-ok); }
.bar_warn-a897be7 { background: var(--sv-warn); }
.bar_err-a897be7 { background: var(--sv-err); }

.split-a897be7 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .split-a897be7 { grid-template-columns: 1fr; } }
.aside_cards-a897be7 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.crumbs-a897be7 { display: flex; gap: 10px; align-items: baseline; }
.crumb_here-a897be7 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }

.btn_new-a897be7 {
  background: var(--sv-accent); color: var(--sv-accent-ink); border: none; border-radius: 999px;
  padding: 8px 18px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px oklch(30% .1 264 / .25);
}
.btn_new-a897be7:hover { filter: brightness(1.12); }
.new_form-a897be7 { border: 1px dashed var(--line-2); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.new_row-a897be7 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.new_row-a897be7 input { max-width: 260px; }

.reveal-a897be7 {
  border: 1px solid var(--sv-accent); border-radius: 6px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
}
.reveal_row-a897be7 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reveal_pw-a897be7 { font-size: 15px; user-select: all; }


.layout-29592b0 {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
}

.rail-29592b0 {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.nav-29592b0 { display: flex; flex-direction: column; gap: 2px; }

.nav_link-29592b0 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--sidebar-muted);
  border-left: 2px solid transparent;
  font-weight: 450;
}
.nav_link-29592b0:hover { color: var(--sidebar-ink); background: var(--sidebar-accent); }
.nav_link-29592b0[aria-current="page"] {
  color: var(--sidebar-ink);
  background: var(--sidebar-accent);
  border-left-color: var(--accent);
}
/* small monospace index before each nav label */
.nav_idx-29592b0 { font-family: var(--font-mono); font-size: 11px; color: var(--sidebar-muted); }

/* small caps heading above the External tools nav group */
.nav_section-29592b0 {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 4px 10px 2px;
}

.rail_foot-29592b0 { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail_foot-29592b0 > button { color: var(--sidebar-muted); border-color: var(--sidebar-line); }
.env-29592b0 { font-size: 11px; color: var(--sidebar-muted); font-family: var(--font-mono); }
.theme_btn-29592b0 {
  background: var(--sidebar-accent);
  border: 1px solid var(--sidebar-line);
  color: var(--sidebar-muted);
  border-radius: 6px;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.theme_btn-29592b0:hover { color: var(--sidebar-ink); border-color: var(--sidebar-muted); }

/* Mobile-only top bar (hamburger + wordmark) and drawer backdrop. Hidden
   above 720px by default so they never enter the desktop grid layout —
   display:none removes an element from CSS Grid layout entirely. */
.mobile_bar-29592b0 { display: none; }
.hamburger-29592b0 {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  padding: 6px 10px;
}
.hamburger-29592b0:hover { border-color: var(--line-2); }
.backdrop-29592b0 { display: none; }

.content-29592b0 { padding: 24px 32px; min-width: 0; }
/* Impersonation with WRITES (2026-09-10). The amber "for testing" tone was
   right when the session could only look; it is not right when every button
   works and acts as somebody else. Red, and it stays put while you scroll —
   forgetting which identity you are in is the failure mode this prevents. */
.testing_banner_live-29592b0 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -8px 0 20px;
  padding: 10px 12px;
  border-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 20;
  border: 1px solid color-mix(in srgb, var(--err) 60%, var(--line));
  background: color-mix(in srgb, var(--err) 12%, var(--panel));
}
.testing_banner_live-29592b0 div { display: flex; flex-direction: column; gap: 2px; }
.testing_banner_live-29592b0 strong {
  font-size: 13px;
  color: color-mix(in srgb, var(--err) 80%, var(--ink));
  letter-spacing: 0.01em;
}
.testing_banner_live-29592b0 span { color: var(--muted); font-size: 12px; }

.page_head-29592b0 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.page_title-29592b0 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.page_sub-29592b0 { color: var(--muted); font-size: 13px; }
/* Back link + title (+ open-site link / sub) as one left-hand unit of .page_head. */
.title_group-29592b0 { display: flex; align-items: baseline; gap: 12px; min-width: 0; }

/* Tab bar for the per-domain detail page (Settings / Stats / Security).
   Sits directly under .page_head, which is why .page_head_tabbed below drops
   that element's own bottom margin and border: head, tabs, and cards must read
   as one block, not three floating strips, so the tab bar's own bottom border
   becomes the single rule under the whole header.
   Every colour is a token (--ink/--muted/--line/--accent) because the portal
   has a light/dark toggle and a hardcoded hex would be wrong in one of them. */
.tabs-29592b0 {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.tab-29592b0 {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  /* Transparent, not absent: the resting and active tabs must reserve the same
     2px so selecting one never shifts the row by two pixels. */
  border-bottom: 2px solid transparent;
  /* Pull the tab's own border down onto the container's, so the active
     underline replaces that 1px rather than sitting above it. */
  margin-bottom: -1px;
}
.tab-29592b0:hover { color: var(--ink); }
.tab_active-29592b0 {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* .page_head immediately followed by .tabs — see .tabs above. */
.page_head_tabbed-29592b0 {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 10px;
}

@media (max-width: 720px) {
  .layout-29592b0 { grid-template-columns: 1fr; }
  .mobile_bar-29592b0 {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 10px 14px;
  }
  .mobile_bar-29592b0 .brand-29592b0 { background: var(--sidebar); padding: 6px 10px; }
  .backdrop-29592b0 {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 95;
  }
  /* Off-canvas drawer: fixed panel sliding in from the left, instead of the
     horizontal-scroll strip this replaces. */
  .rail-29592b0 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(82vw, 300px);
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
  }
  .testing_banner_live-29592b0 { align-items: flex-start; flex-direction: column; }
  .rail_open-29592b0 { transform: translateX(0); }
  .rail_foot-29592b0 { display: flex; }
}

/* --- Login gate (unauthenticated) ---
   Old-portal `auth-view` pattern (portal.git
   `modules/authentication/auth-view`): full-viewport photo background,
   centered column (700px max), logo header, white content card.
   The OIDC flow itself is unchanged (auth.rs PKCE via kanidm) — only the
   screens around it wear this look. Fixed light colours on purpose: the
   brand card is white in both themes, like the old portal. */
.login_wrap-29592b0 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000 url("/assets/auth-bg.jpg") center;
  background-size: cover;
}
.login_card-29592b0 {
  width: 700px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 0;
  gap: 0;
}
.auth_logo-29592b0 {
  display: block;
  height: 44px;
  width: auto;
  max-width: 320px;
  margin-bottom: 1rem;
}
.auth_card-29592b0 {
  background: #ffffff;
  color: #212529;
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.auth_title-29592b0 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111;
}
.login_sub-29592b0 { color: #555; font-size: 13px; margin-top: -4px; }
.auth_hint-29592b0 { color: #6c757d; font-size: 12px; }

/* --- Brand sidebar (Lovable reseller-console layout, wewewo brand) ---
   Narrow rail with the two-line white logo on top, grouped nav below.
   Dark rail in both themes: the white wordmark needs the dark ground. */
.brand-29592b0 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}
.brand_logo-29592b0 {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}
/* --- Topbar: actor chip only, right-aligned above the routed page. --- */
.topbar-29592b0 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}
.userchip-29592b0 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
.userchip_avatar-29592b0 {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}
@media (max-width: 720px) {
  .topbar-29592b0 { flex-wrap: wrap; }
}

/* Staging instance (cluster-api STAGING=1): read-only, says so on every page. */
.staging_banner-29592b0 {
  display: flex; gap: 10px; align-items: baseline;
  margin: -8px 0 16px; padding: 8px 12px; border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--warn) 70%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
}
.staging_banner-29592b0 strong { color: color-mix(in srgb, var(--warn) 85%, var(--ink)); letter-spacing: .08em; font-size: 12px; }
.staging_banner-29592b0 span { color: var(--muted); font-size: 12px; }


/* Shared primitives reused across pages (Fleet, Domains, ...). */

/* Segmented view toggle (cards / list). */
.seg-f717b43 { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg_btn-f717b43 {
  padding: 5px 12px;
  background: var(--panel);
  color: var(--muted);
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
}
.seg_btn-f717b43:hover { color: var(--ink); }
.seg_btn-f717b43 + .seg_btn-f717b43 { border-left: 1px solid var(--line); }
.seg_active-f717b43 { background: var(--panel-2); color: var(--ink); }

/* Data table. Wrap every <table class=table> in a <div class=table_scroll> so
   a wide table (up to 17 columns on Domains) scrolls in place on a narrow
   screen instead of forcing the whole page to scroll horizontally. */
.table_scroll-f717b43 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-f717b43 { width: 100%; border-collapse: collapse; }
.th-f717b43 {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.th_r-f717b43, .td_r-f717b43 { text-align: right; }
.tr-f717b43 { border-bottom: 1px solid var(--line); }
.tr-f717b43:hover { background: var(--panel); }
.td-f717b43 { padding: 10px 14px; font-size: 13px; color: var(--muted); vertical-align: middle; }
.td_id-f717b43 { font-family: var(--font-mono); color: var(--ink); }
.td_dim-f717b43 { font-family: var(--font-mono); color: var(--muted); }

/* Status badge + dot (shared). */
.badge-f717b43 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  color: var(--faint);
  white-space: nowrap;
}
.badge_inline-f717b43 { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

.dot-f717b43 { display: inline-block; width: 9px; height: 9px; border-radius: 999px; flex: none; vertical-align: middle; }
.dot_ok-f717b43 { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent); }
.dot_warn-f717b43 { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 16%, transparent); }
.dot_err-f717b43 { background: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 16%, transparent); }
/* Pulsing halo — signals a transient state (starting / scaling). */
.dot_pulse-f717b43 { animation: dot_pulse 1.4s ease-in-out infinite; }
@keyframes dot_pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--warn) 6%, transparent); }
}

.head_actions-f717b43 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Buttons. */
.btn-f717b43 {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--ink);
}
.btn-f717b43:hover { border-color: var(--accent); }
.btn_primary-f717b43 { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 500; }
.btn_ghost-f717b43 { background: transparent; border-color: var(--line); color: var(--muted); font-size: 12px; padding: 4px 10px; }
.btn_ghost-f717b43:hover { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }

/* Form card + fields. */
.form_card-f717b43 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  max-width: 520px;
}
.form_title-f717b43 { font-family: var(--font-display); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.field-f717b43 { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.label-f717b43 { font-size: 12px; color: var(--muted); }
.input-f717b43, .textarea-f717b43 {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--ink);
}
.input-f717b43:focus, .textarea-f717b43:focus { border-color: var(--accent); outline: none; }
.textarea-f717b43 { min-height: 76px; resize: vertical; }

/* Column text filter with an inline ✕ (input reserves 20px right padding). */
.filter_wrap-f717b43 { position: relative; }
.filter_clear-f717b43 {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; padding: 0 4px; font-size: 11px; line-height: 1;
}
.filter_clear-f717b43:hover { color: var(--ink); }

/* Audit outcome text. */
.outcome_ok-f717b43 { color: var(--ok); }
.outcome_warn-f717b43 { color: var(--warn); }
.outcome_err-f717b43 { color: var(--err); }
.cid-f717b43 { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

.section_gap-f717b43 { margin-top: 26px; }

.accordion-f717b43 {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: clip;
}
.accordion_head-f717b43 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.accordion_head-f717b43::-webkit-details-marker { display: none; }
.accordion_head-f717b43::before {
  content: "+";
  color: var(--accent);
  font-family: var(--font-mono);
  width: 1em;
  flex: 0 0 auto;
}
.accordion-f717b43[open] > .accordion_head-f717b43::before { content: "-"; }
.accordion_head-f717b43:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.accordion_title-f717b43 { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-right: auto; }
.accordion_meta-f717b43 { color: var(--muted); font-size: 12px; text-align: right; }
.accordion_body-f717b43 { padding: 2px 18px 18px; border-top: 1px solid var(--line); }
.accordion_body-f717b43 > .form_card-f717b43 { margin-top: 14px; }

@media (max-width: 620px) {
  .accordion_head-f717b43 { align-items: center; padding: 14px; }
  .accordion_meta-f717b43 { display: none; }
  .accordion_body-f717b43 { padding: 2px 12px 14px; }
}

/* Error banner shown when an API load fails (non-401). */
.error_banner-f717b43 {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--err) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--err) 40%, transparent);
  color: var(--err);
  font-size: 13px;
  font-family: var(--font-mono);
}

/* Same shape as .error_banner, amber instead of red: a caveat about the data
   shown (e.g. no live pod, stored values only), never a load failure. */
.notice_banner-f717b43 {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--warn);
  font-size: 13px;
  font-family: var(--font-mono);
}

/* Inline spinner for busy buttons (inherits the button's text color). */
.spinner-f717b43 {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }