/* clavitor-gate — shell chrome.
 *
 * Adds ONLY what the shell introduces: the app thin-bar, the vertical rail, the
 * footer, and two marketing touch-ups (brand mark + active cue). The marketing
 * mega/nav/right-cluster classes (.cn-*) live in clavitor-web/folio.css, which
 * the shell links alongside this sheet — so its :root tokens are in scope and we
 * never redefine them. Every value below is a var(--…) from that token set.
 *
 * One component token is introduced (--rail-w): no existing token describes an
 * app-rail column width, and minting a single-use --rail-w is cleaner than
 * hardcoding the number in every rule. It is flagged in the build report. A few
 * non-tokenized primitives (breakpoint 900px, transition 100ms, letter-spacing
 * em values, a 60vh demo min-height) follow folio.css's own conventions, which
 * likewise leave these as literals — there is no token to reference. */

:root {
  --rail-w: 15rem; /* app-rail column width — no existing token covers it */
  /* Semantic type roles (size steps from Folio --t-*). */
  --type-title: 600 var(--t-lg, 1.125rem)/1.25 "IBM Plex Sans", system-ui, sans-serif;
  --type-lead:  400 var(--t-sm, 0.875rem)/1.45 "IBM Plex Sans", system-ui, sans-serif;
  --type-body:  400 var(--t-sm, 0.875rem)/1.5 "IBM Plex Sans", system-ui, sans-serif;
  --type-row:   500 var(--t-sm, 0.875rem)/1.4 "IBM Plex Sans", system-ui, sans-serif;
  --type-ui:    500 var(--t-sm, 0.875rem)/1.3 "IBM Plex Sans", system-ui, sans-serif;
  --type-meta:  400 var(--t-xs, 0.7rem)/1.4 "IBM Plex Mono", ui-monospace, monospace;
  --type-label: 500 var(--t-xs, 0.7rem)/1 "IBM Plex Mono", ui-monospace, monospace;
}

/* --- Marketing brand: the OFFICIAL logo (.logo > .mark + .logo-wordmark +
   .logo-tagline) is styled by folio.css; the nav renders it at half size,
   matching base.tmpl (which used an inline zoom for exactly this). No marketing
   "active" cue — that section highlight was dropped by decision; only the rail
   below carries an active state. --- */
.cn-brand .logo { zoom: 0.5; }

/* --- App shell: rail + main -----------------------------------------------
   Brand alignment: marketing logo (cube) sits on the left edge of .cn-inner —
   max-width var(--width) + horizontal var(--pad). App shell uses the SAME
   frame so the rail’s left edge drops straight down from the cube. A light
   vertical rule marks that estate left margin on every app page. */
/* Marketing top: flush the last control to the content right edge (same x as
   CONTACT SALES and the ash right rule). Folio pads every cn-link 14px right. */
.cn-right > :last-child { margin-right: 0; }
.cn-right .cn-link:last-child,
.cn-right .cn-trigger:last-child,
.cn-right > button:last-child { padding-right: 0; }
.cn-utility-links a:last-child { padding-right: 0; }

/* Utility strip (BLOG · RELEASES · …): shorter than folio marketing default */
.cn-utility-inner {
  min-height: 28px;
  font-size: 11px;
  letter-spacing: 0.06em;
  gap: 16px;
}
.cn-utility-links {
  gap: 1.1rem;
}
.cn-utility-announce .tag {
  font-size: 10px;
  padding: 2px 6px;
}

.ash {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 60vh;
  max-width: var(--width, 1280px);
  width: 100%;
  margin-inline: auto;
  /* Same pad as .cn-inner / .cn-utility-inner so cube, Apps, CONTACT SALES, and rail share edges */
  padding: 1.25rem var(--pad, 24px) 0;
  box-sizing: border-box;
  position: relative;
}
/* Right frame line = content right edge (same x as Apps / CONTACT SALES text end) */
.ash::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 0;
  right: var(--pad, 24px);
  width: 1px;
  background: #e5e5e5;
  pointer-events: none;
}
.ash-main { padding: var(--pad); min-width: 0; }

/* --- App shell embeds (vault / vaults): locked viewport --------------------
   Gate .rail is the ONLY left nav. vault-app's .vault-side is stripped on
   embed and hidden here as a failsafe (never a double rail). */
.ash[data-ctx="vault"],
.ash[data-ctx="vaults"] {
  height: calc(100vh - 8rem);
  min-height: calc(100vh - 8rem);
  max-height: calc(100vh - 8rem);
  overflow: hidden;
  align-items: stretch;
}
.ash[data-ctx="vault"] .rail,
.ash[data-ctx="vaults"] .rail {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.ash[data-ctx="vault"] .ash-main,
.ash[data-ctx="vaults"] .ash-main {
  padding: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  position: relative;
}
/* Split embeds: fill main; internal panes scroll */
.ash[data-ctx="vault"] .ash-main:has(.vault-app-embed),
.ash[data-ctx="vault"] .ash-main:has(.vault) {
  overflow: hidden;
}
.ash[data-ctx="vault"] .vault-app-embed,
.ash[data-ctx="vault"] .vault-app-embed #app {
  height: 100%;
  min-height: 0;
}
.ash[data-ctx="vault"] .vault {
  height: 100%;
  min-height: 0;
  grid-template-columns: 1fr; /* no room for vault-side */
}

/* ONE rail only: hide any leftover vault-app brand/sidebar under ash */
.ash[data-ctx] .vault-side {
  display: none !important;
}
.ash[data-ctx="vault"] .vault-main {
  min-height: 0;
  overflow: auto;
}

/* Square buttons in the app shell — match vault brand; folio marketing keeps radius */
.ash .btn-primary,
.ash .btn-ghost,
.ash button.btn-primary,
.ash button.btn-ghost {
  border-radius: 0;
  box-sizing: border-box;
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}
/* Light scrollbar (same weight as vault-app Entries list) */
.ash[data-ctx="vault"] .ash-main {
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 10, 10, 0.08) transparent;
}
.ash[data-ctx="vault"] .ash-main::-webkit-scrollbar { width: 6px; }
.ash[data-ctx="vault"] .ash-main::-webkit-scrollbar-track { background: transparent; }
.ash[data-ctx="vault"] .ash-main::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 10, 0.08);
  border-radius: 0;
}
.ash[data-ctx="vault"] .ash-main::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 10, 0.15);
}
.ash[data-ctx="vault"] .vault-main {
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 10, 10, 0.08) transparent;
}
.ash[data-ctx="vault"] .vault-main::-webkit-scrollbar { width: 6px; }
.ash[data-ctx="vault"] .vault-main::-webkit-scrollbar-track { background: transparent; }
.ash[data-ctx="vault"] .vault-main::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 10, 0.08);
  border-radius: 0;
}

/* Folio vault Security — full main width, section rhythm (no card cages) */
.ash[data-ctx="vault"] .ash-main:has(.vault-sec) {
  padding: 1.25rem 1.25rem 2.5rem 1.5rem;
  overflow: auto;
}
.ash[data-ctx="vault"] .ash-main:has(.vault-sec) > .section,
.ash[data-ctx="vault"] .ash-main:has(.vault-sec) .section {
  padding: 0;
}
.ash[data-ctx="vault"] .ash-main:has(.vault-sec) .section > .container {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.ash[data-ctx="vault"] .ash-main:has(.vault-sec) .section-header {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  max-width: none;
  text-align: left;
}
.ash[data-ctx="vault"] .ash-main:has(.vault-sec) .section > .container > p {
  margin: 0 0 1.5rem;
  max-width: 42rem;
  text-align: left;
  color: var(--text, #6b6b6b);
  font-size: 0.875rem;
  line-height: 1.45;
}

.vault-sec {
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Sections: divider only — no box border cages */
.vault-sec-panel {
  margin: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border, #e5e5e5);
  border-radius: 0;
  padding: 1.25rem 0;
}
.vault-sec-panel:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.vault-sec-panel .section-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.vault-sec-panel .section-header {
  font-size: 1rem !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.3 !important;
}
.vault-sec-lead {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text, #6b6b6b);
  max-width: none;
}
.vault-sec-identity-lead {
  margin-top: 1rem;
}
/* Every section: title left, actions right (one pattern) */
.vault-sec-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.vault-sec-panel-head .section-header { margin-bottom: 0 !important; }
.vault-sec-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}
/* Primary black; secondary ghost — same metrics in toolbars and inline rows */
.vault-sec-toolbar .btn-primary,
.vault-sec-toolbar .btn-ghost,
.vault-sec-row .btn-ghost {
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0;
}
.vault-sec-state {
  font: 500 0.6875rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light, #8a8a8a);
  white-space: nowrap;
}
.vault-sec-state.is-unlocked { color: #15803d; }
.vault-sec-meta {
  font-size: 0.75rem;
  color: var(--text-light, #8a8a8a);
  margin: 0.4rem 0 0;
  line-height: 1.4;
}
.vault-sec-err { color: var(--brand-red, #dc2626); font-size: 0.8125rem; }
.vault-sec-callout {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--border, #e5e5e5);
  font-size: 0.8125rem;
  background: transparent;
}
.vault-sec-callout-err { color: var(--brand-red-dark, #b91c1c); }
.vault-sec-device-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.65rem;
  border-top: 1px solid var(--border, #e5e5e5);
  border-bottom: 1px solid var(--border, #e5e5e5);
}
.vault-sec-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.75rem;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border, #e5e5e5);
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.vault-sec-device:last-child { border-bottom: 0; }
.vault-sec-device:hover,
.vault-sec-device:focus-visible {
  background: var(--bg-secondary, #f5f5f5);
  outline: none;
}
.vault-sec-device:hover .vault-sec-device-go,
.vault-sec-device:focus-visible .vault-sec-device-go {
  color: var(--brand-black, #0a0a0a);
}
.vault-sec-device-text { min-width: 0; }
.vault-sec-device strong {
  display: block;
  color: var(--text-dark, #171717);
  font-size: 0.875rem;
  font-weight: 600;
}
.vault-sec-device-text span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-light, #8a8a8a);
  margin-top: 0.1rem;
}
.vault-sec-device-go {
  flex-shrink: 0;
  font: 500 0.875rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--text-light, #8a8a8a);
}
/* Full-width device rows (not a narrow card stack) */
.vault-sec-cred-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--border, #e5e5e5);
  border-bottom: 1px solid var(--border, #e5e5e5);
}
.vault-sec-cred {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border, #e5e5e5);
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}
.vault-sec-cred:last-child { border-bottom: 0; }
.vault-sec-cred > div { min-width: 0; flex: 1; }
.vault-sec-cred .vault-sec-meta { display: block; margin: 0.15rem 0 0; }
.vault-sec-cred .btn-ghost {
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.vault-sec-code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  background: #fff;
  border: 1px solid var(--border, #e5e5e5);
  padding: 0.65rem 0.75rem;
  text-align: left;
  word-break: break-all;
  border-radius: 0;
  margin: 0.5rem 0 0;
}
.vault-sec-reveal { cursor: pointer; color: var(--text-light, #8a8a8a); }
.vault-sec-reveal:hover { border-color: var(--brand-black, #0a0a0a); color: var(--text-dark, #171717); }
.vault-sec-revealed { color: var(--text-dark, #171717); cursor: text; user-select: all; }
.vault-sec-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.vault-sec-row .form-input { flex: 1; min-width: 12rem; }
.vault-sec .hidden { display: none !important; }
/* Modal / toast used by block JS */
.vault-sec .modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.vault-sec .modal-overlay.hidden { display: none; }
.vault-sec .modal-box {
  background: #fff; border: 1px solid var(--border, #e5e5e5); border-radius: 0;
  max-width: 28rem; width: 100%; padding: 1.25rem; max-height: 90vh; overflow-y: auto;
}
.vault-sec .toast {
  position: fixed; top: 1rem; right: 1rem; z-index: 60;
  padding: 0.5rem 1rem; background: var(--brand-black, #0a0a0a); color: #fff;
  font-size: 0.8125rem; border-radius: 0;
}
.vault-sec .toast.error { background: var(--brand-red, #dc2626); }
.vault-sec .toast.hidden { display: none; }
.vault-sec .form-input {
  width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--border-strong, #d4d4d4);
  border-radius: 0; font: inherit; font-size: 0.875rem; background: #fff; box-sizing: border-box;
}
.vault-sec .label {
  display: block; font-size: 0.75rem; font-weight: 500;
  margin-bottom: 0.2rem; color: var(--text-dark, #171717);
}
.vault-sec .form-group { margin-bottom: 0.65rem; }

/* Admin grid: left-anchored, not full-bleed. Form keeps its own max-width. */
.ash-main .fo-grid { max-width: 58rem; }

/* --- Admin collection grid ≡ Audit log density (not a third table skin) -----
   Audit uses Folio table chrome + overrides in audit.html / chrome.css:
     th/td font-size: --t-sm; th font-weight: 600; letter-spacing: 0.04em;
     inverted black header (folio.css table); h1 = --type-title.
   fo-grid is restyled to that same contract. No Airtable micro-type, no blue. */
.ash .fo-grid {
  --fg-accent: var(--brand-black, #0a0a0a);
  --fg-hover: var(--bg-secondary, #f5f5f5);
  --fg-head: var(--brand-black, #0a0a0a);
  --fg-border: var(--border, #e5e5e5);
  --fg-muted: var(--fg3, #6b6b6b);
  --fg-text: var(--fg1, #171717);
  --fg-bg: #fff;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 0;
  box-shadow: none;
  font: var(--type-body, 400 0.875rem/1.5 "IBM Plex Sans", system-ui, sans-serif);
  color: var(--fg-text);
  margin: 0 0 1rem;
  overflow: hidden;
}
/* Title row ≈ .aud-head-top + toolbar chips */
.ash .fo-grid-head {
  padding: 1.25rem 1.25rem 0.65rem;
  border-bottom: 0;
  align-items: center;
}
.ash .fo-grid-title {
  font: var(--type-title, 600 1.125rem/1.25 "IBM Plex Sans", system-ui, sans-serif) !important;
  letter-spacing: -0.01em;
  color: var(--brand-black, #0a0a0a);
}
.ash .fo-grid-count {
  border-radius: 0;
  font: var(--type-meta, 400 0.7rem/1.4 "IBM Plex Mono", ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--border, #e5e5e5);
  color: var(--fg3, #6b6b6b);
  padding: 1px 6px;
  margin-left: 0.35rem;
}
.ash .fo-grid-tools {
  gap: 0.5rem;
}
.ash .fo-grid-add {
  display: inline-flex;
  align-items: center;
  background: var(--brand-black, #0a0a0a);
  color: #fff;
  border: 1px solid var(--brand-black, #0a0a0a);
  border-radius: 0;
  font: var(--type-ui, 500 0.875rem/1.3 "IBM Plex Sans", system-ui, sans-serif);
  padding: 6px 14px;
  line-height: 1.2;
  text-decoration: none;
}
.ash .fo-grid-add:hover {
  filter: none;
  background: #171717;
}
.ash .fo-grid-search {
  border-radius: 0;
  background: #fff;
  border: 1px solid var(--border-strong, #d4d4d4);
  font: var(--type-ui, 500 0.875rem/1.3 "IBM Plex Sans", system-ui, sans-serif);
  height: 2rem;
  padding: 4px 8px 4px 1.65rem;
  width: auto;
  min-width: 8rem;
}
.ash .fo-grid-search:focus {
  border-color: var(--brand-black, #0a0a0a);
  box-shadow: none;
  outline: none;
}
.ash .fo-grid-searchwrap::before {
  font-size: 0.875rem;
  color: var(--fg3, #6b6b6b);
}
/* Scroll body padding like #tableWrap (audit) */
.ash .fo-grid-scroll {
  padding: 0 0 0.75rem;
  max-height: none;
}
.ash .fo-grid-body {
  border-top: 1px solid var(--border, #e5e5e5);
}
/* Same rules as audit: Folio inverted header + --t-sm cells */
.ash .fo-grid-table {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
.ash .fo-grid-table th {
  font: var(--type-ui, 500 0.875rem/1.3 "IBM Plex Sans", system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--t-sm, 0.875rem);
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: left;
  color: var(--on-dark, #fff);
  background: var(--brand-black, #0a0a0a);
  padding: 8px 12px;
  border-bottom: 0;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.ash .fo-grid-table th[data-dir] .fo-sort,
.ash .fo-grid-table th .fo-sort {
  color: rgba(255, 255, 255, 0.75);
}
.ash .fo-grid-table td {
  font: var(--type-body, 400 0.875rem/1.5 "IBM Plex Sans", system-ui, sans-serif);
  font-size: var(--t-sm, 0.875rem);
  color: var(--fg2, #404040);
  line-height: 1.4;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e5e5);
  vertical-align: middle;
}
.ash .fo-grid-table tbody tr:hover td {
  background: var(--bg-secondary, #f5f5f5);
}
.ash .fo-pill {
  border-radius: 0;
  font: var(--type-meta, 400 0.7rem/1.4 "IBM Plex Mono", ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border: 1px solid var(--border, #e5e5e5);
  background: #fff;
  color: var(--fg2, #404040);
}
.ash .fo-pill-ok {
  color: var(--success, #15803d);
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.35);
}
.ash .fo-pill-muted {
  color: var(--fg3, #6b6b6b);
  background: #fff;
}
.ash .fo-ic {
  border-radius: 0;
  font-size: var(--t-sm, 0.875rem);
  opacity: 1;
  color: var(--fg3, #6b6b6b);
}
.ash .fo-az-l {
  border-radius: 0;
  font: var(--type-meta, 400 0.7rem/1.4 "IBM Plex Mono", ui-monospace, monospace);
  font-weight: 500;
  padding: 2px 6px;
}
.ash .fo-az-l.active {
  background: var(--brand-black, #0a0a0a);
  color: #fff;
}
.ash .fo-empty td {
  font: var(--type-body, 400 0.875rem/1.5 "IBM Plex Sans", system-ui, sans-serif);
  color: var(--fg3, #6b6b6b);
  padding: 2.5rem 1rem;
}
/* Modal = same type scale as vault pages */
.ash .fo-modal-card,
.fo-modal-card {
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(10, 10, 10, 0.18);
  font: var(--type-body, 400 0.875rem/1.5 "IBM Plex Sans", system-ui, sans-serif);
}
.ash .fo-modal-title,
.fo-modal-title {
  font: var(--type-title, 600 1.125rem/1.25 "IBM Plex Sans", system-ui, sans-serif);
  letter-spacing: -0.01em;
  color: var(--brand-black, #0a0a0a);
}
.ash .fo-modal-x,
.fo-modal-x {
  border-radius: 0;
}

/* --- Admin CRUD form: retune to compact form proportions --------------------
   The schema-generated form (core/admin) reuses folio's MARKETING styling — huge
   hero-clamped section headers, a hero-indented .container that wraps ONLY the
   heading (so it sits 24px right of the fields), 40px section padding, and heavy
   full-width buttons. Retune ONLY inside .folio-form (spacing/type tokens, no
   literals) so the website itself is untouched. Same layout, sane proportions. */
.folio-form { gap: var(--pad-xs); }
.folio-form .section { padding: var(--pad-xs) 0; }
.folio-form .section:first-child { padding-top: 0; }
/* heading: normal size, and drop the container indent so it lines up with fields */
.folio-form .section .container { padding-left: 0; padding-right: 0; }
.folio-form .section-header { font-size: var(--t-lg); margin: 0 0 var(--pad-xs); max-width: none; }
.folio-form .form-group { margin-bottom: var(--pad-xs); }
/* buttons: modest, auto-width, RIGHT-aligned (Cancel then Save) — black square */
.folio-form .form-actions { display: flex; justify-content: flex-end; gap: var(--pad-sm); margin-left: 0; }
.folio-form .form-actions .btn-primary,
.folio-form .form-actions .btn-ghost {
  width: auto;
  padding: var(--pad-xs) var(--pad);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  border-radius: 0;
}
.folio-form .form-actions .btn-primary {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #fff;
}
/* left-align the form: folio centers it (margin:0 auto), which floats the
   section headers/fields ~40px right of the modal title. Anchor it left so
   "Identity" lines up with the record title. */
.ash-main .folio-form,
.fo-modal-body .folio-form { margin-left: 0; }
/* the record title in the popup — a tad larger, a website size */
.fo-modal-title { font-size: var(--t-xl); }

/* --- Vertical rail (vault-web look): active = solid black box ---------------
   Literal colours/padding (not only tokens): when vault-app CSS is embedded in
   ash-main it redefines :root tokens and runs a global `* { padding:0 }` reset
   that can desync the rail from folio tokens. Explicit values keep the rail
   readable next to the secret UI. */
.rail {
  background: #f5f5f5;
  /* Left edge = brand/cube line; right edge separates rail from main */
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  padding: 12px 10px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  align-self: stretch;
}
/* Product / section name above rail items (My Vault, Vaults, MSP, Admin) */
.rail-title {
  display: block;
  padding: 4px 12px 10px;
  margin: 0 0 2px;
  border-bottom: 1px solid #e5e5e5;
  font: 600 0.9375rem/1.25 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #171717;
  user-select: none;
}
.rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; padding-top: 6px; }
.rail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 0;
  font: var(--type-ui, 500 0.875rem/1.3 "IBM Plex Sans", system-ui, sans-serif);
  color: #6b6b6b;
  text-decoration: none;
  white-space: nowrap;
  transition: background 100ms, color 100ms;
}
.rail-item:hover { background: #ffffff; color: #171717; }
.rail-item.active { background: #0a0a0a; color: #ffffff; }
/* Lock + idle: one compact control — timer sits inside the button */
.rail-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
}
.rail-lock {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: 5px 8px 5px 10px;
  font: 500 12px/1.25 "IBM Plex Sans", system-ui, sans-serif;
  color: #171717;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  white-space: nowrap;
}
.rail-lock:hover { border-color: #0a0a0a; }
.rail-lock-label { flex: 0 1 auto; min-width: 0; }
.rail-switch-vault {
  display: block;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.55rem;
  font: var(--w-medium) var(--t-xs)/1.2 var(--font-sans);
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}
.rail-switch-vault:hover { border-color: #0a0a0a; }
.rail-foot { display: flex; flex-direction: column; gap: 0; padding: 0.5rem 0.65rem 0.75rem; }

/* Login: Switch vaults (omit allowCredentials → OS lists every vault on the key) */
.auth-key-switch-wrap { margin: 0.75rem 0 0; text-align: center; }
.auth-key-switch {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg3, #737373);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth-key-switch:hover { color: var(--fg, #0a0a0a); }
.auth-key-switch:disabled { opacity: 0.5; cursor: wait; }
.rail-idle {
  font: var(--type-meta);
  color: #8a8a8a;
  flex: 0 0 auto;
  min-width: 2.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rail-idle:empty { display: none; }
/* Page titles share --type-title (Folio --t-lg) */
.ash[data-ctx="vault"] .vault-list-head {
  padding-top: 1.25rem;
  min-height: calc(1.25rem + 1.35rem + 12px);
  box-sizing: border-box;
}
.ash[data-ctx="vault"] .vault-list-head h1,
.ash[data-ctx="vault"] .vault-page-head h1,
.ash[data-ctx="vault"] .aud-head h1 {
  font: var(--type-title, 600 1.125rem/1.25 "IBM Plex Sans", system-ui, sans-serif) !important;
  letter-spacing: -0.01em;
  margin: 0;
}
.ash[data-ctx="vault"] .vault-page-head {
  padding-top: 0;
  min-height: calc(1.35rem);
}
.ash[data-ctx="vault"] .aud-head {
  padding-top: 1.25rem;
}
.ash[data-ctx="vault"] .ash-main:has(.vault-sec) .section > .container > .section-header,
.ash[data-ctx="vault"] .ash-main:has(.vault-sec) .section-header {
  font: var(--type-title) !important;
  letter-spacing: -0.01em;
}

/* Vault embed auth screens sit in ash-main — no second full-page brand. */
.ash[data-ctx="vault"] .auth-screen--embed {
  min-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.ash[data-ctx="vault"] .auth-screen--embed .auth-card {
  max-width: 28rem;
  width: 100%;
  border-radius: 0;
}

/* --- Fold: Import / Audit / Clients / Entries under the vault shell ------
   Shared page chrome so non-Folio vault-app surfaces match Security density. */
.ash[data-ctx="vault"] .vault-main-page,
.ash[data-ctx="vault"] .vault > .vault-main.vault-main-page {
  display: block;
  overflow: auto;
  height: 100%;
  min-height: 0;
  grid-template-columns: none;
}
.ash[data-ctx="vault"] .vault-page {
  max-width: none;
  width: 100%;
  padding: 1.25rem 1.5rem 2.5rem;
  box-sizing: border-box;
}
.ash[data-ctx="vault"] .vault-page-head {
  margin: 0 0 1.25rem;
}
.ash[data-ctx="vault"] .vault-page-head h1 {
  font: var(--type-title);
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  color: var(--text-dark, #171717);
}
.ash[data-ctx="vault"] .vault-page-lead {
  margin: 0;
  font: var(--type-lead);
  color: var(--text, #6b6b6b);
  max-width: 42rem;
}
.ash[data-ctx="vault"] .import-flow .drop-zone {
  border-radius: 0;
  background: transparent;
  border-style: dashed;
  border-color: #d4d4d4;
  padding: 2rem 1.25rem;
}
.ash[data-ctx="vault"] .import-flow .drop-zone-icon {
  font-size: 1.5rem;
  opacity: 0.45;
}
.ash[data-ctx="vault"] .import-flow .btn,
.ash[data-ctx="vault"] .import-flow .btn-primary,
.ash[data-ctx="vault"] .import-flow .btn-ghost,
.ash[data-ctx="vault"] .import-flow .btn-qr-scan {
  border-radius: 0;
  min-height: 2.25rem;
}
.ash[data-ctx="vault"] .import-flow .btn-qr-scan {
  width: 100%;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e5e5;
}
.ash[data-ctx="vault"] .import-flow .import-divider {
  margin: 1rem 0;
}

/* Audit: single-column main, fill shell, light density */
.ash[data-ctx="vault"] .vault-main:has(.aud-head) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: none;
}
.ash[data-ctx="vault"] .aud-head {
  padding: 1.25rem 1.5rem 0.75rem;
  flex-shrink: 0;
}
.ash[data-ctx="vault"] .aud-head h1 {
  font: var(--type-title);
  letter-spacing: -0.02em;
}
.ash[data-ctx="vault"] .facets,
.ash[data-ctx="vault"] .filters {
  flex-shrink: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.ash[data-ctx="vault"] .filters input,
.ash[data-ctx="vault"] .filters select,
.ash[data-ctx="vault"] .filters button,
.ash[data-ctx="vault"] .aud-head .btn,
.ash[data-ctx="vault"] .aud-head button {
  border-radius: 0;
}
.ash[data-ctx="vault"] #tableWrap,
.ash[data-ctx="vault"] .table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Entries + Clients list head: a little air under chrome line */
/* Detail pane: stronger hierarchy (compete with list) */
.ash[data-ctx="vault"] .vault-detail {
  padding: 1.5rem 2rem 2.5rem;
}
.ash[data-ctx="vault"] .detail-title {
  font: var(--type-title);
  letter-spacing: -0.02em;
  color: #171717;
}
.ash[data-ctx="vault"] .detail-type {
  font: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Audit (and any bare Folio table in vault): same density as Entries list, not marketing --t-base */
.ash[data-ctx="vault"] .ash-main table,
.ash[data-ctx="vault"] .ash-main th,
.ash[data-ctx="vault"] .ash-main td {
  font-size: var(--t-sm, 0.875rem);
}
.ash[data-ctx="vault"] .ash-main th {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ash[data-ctx="vault"] .detail-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
}
.ash[data-ctx="vault"] .detail-actions .btn,
.ash[data-ctx="vault"] .detail-actions button,
.ash[data-ctx="vault"] .vault-list-head .btn {
  border-radius: 0;
  min-height: 2.25rem;
}
.ash[data-ctx="vault"] .field-box {
  border-color: #e5e5e5;
  background: #fff;
}
.ash[data-ctx="vault"] .field-label {
  color: #8a8a8a;
  font-weight: 600;
}
/* Clients list empty / error states */
.ash[data-ctx="vault"] .vault-entries .text-red {
  font-size: 0.875rem;
}

/* --- Footer: official .footer-* lives in folio.css; only gate-specific bits here.
   Serving origin (ams2 · cnt1 / osa1 · cnt2) is ops-facing, not marketing copy. */
.footer-origin {
  margin: 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  opacity: 0.9;
  white-space: nowrap;
}

/* --- Collapsed thin menu (detail routes) ---------------------------------- */
/* On a detail route the shell stamps <html data-chrome="collapsed"> and renders
   the thin menu: the standard nav condensed to brand + the top options + the
   context name (no utility bar, no right cluster). The full .chrome-top hides
   above the fold; chrome.js adds .chrome-peek on mouse-to-top to reveal it. */
.thin-menu { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--border); }
.thin-menu .cn-inner { max-width: var(--width); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: var(--pad); height: 46px; }
.thin-menu .cn-brand .logo { zoom: 0.4; }
.thin-menu .cn-link, .thin-menu .cn-trigger { padding: 6px 10px; }
/* The context name — the "where am I" — shown clearly and generic (MSP, a vault
   name, SCIM, …). Pushed to the right, in a solid pill. */
.thin-ctx { margin-left: auto; font: var(--w-bold) var(--t-sm)/1 var(--font-sans); color: var(--bg); background: var(--brand-black); padding: var(--pad-xs) var(--pad-sm); border-radius: var(--radius); white-space: nowrap; }
[data-chrome="collapsed"] .chrome-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transform: translateY(-100%); transition: transform 200ms ease;
}
[data-chrome="collapsed"].chrome-peek .chrome-top { transform: translateY(0); }

/* --- Narrow screens ------------------------------------------------------- */
@media (max-width: 900px) {
  .ash { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--border); }
  .rail-nav { flex-direction: row; flex-wrap: wrap; }
}

/* --- Org tree ------------------------------------------------------------ */
/* Indent (--d) is the *level ladder step* (Customer always same column),
   not parent-chain depth. */
.tree { margin-top: var(--pad); font-size: 13px; line-height: 1.3; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree li { margin: 0; padding: 0; }

.tree-toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.tree-search {
  flex: 1 1 14rem;
  max-width: 22rem;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
}
.tree-search-meta { color: var(--fg3); font-size: 12px; }
.tree-search-hits {
  margin: 0 0 8px;
  max-height: 10rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.tree-hit-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 4px 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 3px;
}
.tree-hit-btn:hover { background: var(--bg-secondary); }
.tree-hit-kind { color: var(--fg3); margin-right: 6px; font-size: 11px; text-transform: uppercase; }
.tree-row.tree-hit { background: var(--bg-secondary); }

.tree-table {
  /* step width × ladder rank; Level col wide enough for vault step + toggle + label */
  --tree-indent: 14px;
  --tree-cols: 12.5rem minmax(10rem, 1fr) 3.75rem 2.25rem 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
}
.tree-head,
.tree-row {
  display: grid;
  grid-template-columns: var(--tree-cols);
  align-items: center;
  column-gap: 8px;
  padding: 2px 8px;
  min-height: 24px;
  width: 100%;
  box-sizing: border-box;
}
.tree-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  min-height: 22px;
}
.tree-row { border-bottom: 1px solid var(--border); }
.tree-row:hover { background: var(--bg-secondary); }

/* Level + chevron: indent by ladder step so all Customers line up */
.tree-c-kind {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding-left: calc(var(--d, 0) * var(--tree-indent));
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 10px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-head .tree-c-kind { padding-left: 22px; } /* ≈ toggle width */
.tree-c-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.tree-name { font-weight: inherit; }
.tree-payer {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tree-status { font-size: 11px; text-transform: lowercase; }
.tree-status-active { color: var(--badge-ok-fg, #1a7f37); }
.tree-status-pending { color: var(--badge-warn-fg, #9a6700); }
.tree-c-status, .tree-c-pop {
  color: var(--fg3);
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-open {
  font-size: 11px;
  font-weight: 500;
  color: var(--bg, #fff);
  background: var(--brand-black, #0a0a0a);
  padding: 1px 6px;
  border-radius: 3px;
  text-decoration: none;
}
.tree-open:hover { opacity: 0.88; }

.tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--fg2, #555);
  border-radius: 3px;
}
.tree-toggle::before {
  content: "▸";
  font-size: 12px;
  line-height: 1;
  transition: transform 100ms ease;
}
.tree-toggle-leaf { visibility: hidden; pointer-events: none; }
.tree-details[open] > .tree-summary .tree-toggle::before { transform: rotate(90deg); }
.tree-toggle:hover { background: var(--border); }

.tree-details { margin: 0; }
.tree-summary { list-style: none; display: block; cursor: default; }
.tree-summary::-webkit-details-marker { display: none; }
.tree-summary::marker { content: ""; }

.tree-ctx {
  position: fixed;
  z-index: 1100;
  min-width: 8.5rem;
  padding: 2px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}
.tree-ctx[hidden] { display: none !important; }
.tree-ctx button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  border-radius: 3px;
  cursor: pointer;
}
.tree-ctx button:hover { background: var(--bg-secondary); }
.tree-ctx button[hidden] { display: none; }

.fo-modal {
  position: fixed; inset: 0;
  background: rgba(11,42,49,.45);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 5vh 1rem;
  overflow: auto;
}
.fo-modal.open { display: flex; }
.fo-modal-card {
  position: relative;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px -20px rgba(11,42,49,.5);
  width: 100%;
  max-width: 700px;
  padding: 1.25rem 1.5rem 1.5rem;
}
.fo-modal-x {
  position: absolute; top: 0.65rem; right: 0.75rem;
  border: 0; background: none;
  font-size: 1.35rem; line-height: 1;
  color: var(--fg3);
  cursor: pointer;
  padding: 0.15rem 0.5rem;
}
.fo-modal-x:hover { color: var(--fg); }

.my-tree { margin-bottom: var(--pad-lg, 1.5rem); }
.my-tree .type-title,
.acct-vaults-manage .type-title {
  margin: 0 0 0.35rem;
  font: var(--type-title);
  color: var(--fg);
}
.my-tree .type-meta,
.acct-vaults-manage .type-meta {
  margin: 0 0 0.75rem;
  font: var(--type-meta);
  color: var(--fg3);
}
.acct-vaults-manage { margin-top: var(--pad-lg, 1.5rem); padding-top: var(--pad); border-top: 1px solid var(--border); }