/* 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 */
}

/* --- 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 ----------------------------------------------- */
.ash { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 60vh; }
.ash-main { padding: var(--pad); min-width: 0; }

/* Admin grid sits at a comfortable, LEFT-anchored width — a few-column grid
   shouldn't stretch full-bleed and scatter its data across the screen. It keeps
   margin:… 0 (no auto), so it stays flush left; wide tables still scroll inside
   their own card. (The form has its own narrow max-width; leave it.) */
.ash-main .fo-grid { max-width: 58rem; }

/* --- 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) */
.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); }
/* 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, tokenized): active = solid black box --- */
.rail { background: var(--bg-secondary); border-right: 1px solid var(--border); padding: var(--pad-sm); }
.rail-nav { display: flex; flex-direction: column; gap: var(--pad-xs); }
.rail-item { display: flex; align-items: center; gap: var(--pad-xs); padding: var(--pad-xs) var(--pad-sm); border-radius: var(--radius); font: var(--w-medium) var(--t-sm)/1 var(--font-sans); color: var(--fg2); text-decoration: none; transition: background 100ms, color 100ms; }
.rail-item:hover { background: var(--bg); color: var(--fg1); }
.rail-item.active { background: var(--brand-black); color: var(--bg); }

/* --- Footer: NONE here — the footer renders the official .footer-* markup,
   styled by /folio.css. Nothing to redefine. -------------------------------- */

/* --- 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; }
}

/* --- Admin org tree (graphical hierarchy) --------------------------------- */
.tree { margin-top: var(--pad); }
.tree ul { list-style: none; margin: 0; padding-left: 1.4rem; border-left: 1px solid var(--border); }
.tree > ul { padding-left: 0; border-left: 0; }
.tree li { position: relative; padding: 1px 0; }
.tree li::before { content: ""; position: absolute; left: -1.4rem; top: 1.05rem; width: 1rem; height: 1px; background: var(--border); }
.tree > ul > li::before { display: none; }
.tree-node { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: var(--radius); }
.tree-node:hover { background: var(--bg-secondary); }
.tree-level { font: var(--w-medium) 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); background: var(--bg-secondary); padding: 3px 6px; border-radius: 5px; white-space: nowrap; }
.tree-name { font: var(--w-medium) var(--t-sm)/1.2 var(--font-sans); color: var(--fg); }
.tree-br { color: var(--brand-red, #c0392b); font-size: 11px; }