/*
 * Design system, originally for virtualcfo:index and the Access Administration pages
 * (2026-07-25), now shared by the allauth account pages too (.vcfo-auth, 2026-07-26).
 * Ledger-paper/navy/brass palette, serif section headers over a sans body, system-font
 * stacks only (no embedded webfonts - see docs/decisions, "self-hosted, zero network
 * dependency by construction" was a deliberate choice, not an oversight).
 *
 * Color tokens (--ink, --paper, --brass, etc.) now live in static/css/theme.css,
 * loaded site-wide from base.html - this file only styles .vcfo-landing structure.
 *
 * Lives under apps/virtualcfo/static/ for historical reasons; it's a project-wide
 * design system now, not virtualcfo-specific. Worth relocating in a dedicated pass,
 * not folded into whichever feature happens to touch it next.
 */

.vcfo-landing {
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.vcfo-landing * { box-sizing: border-box; }
.vcfo-landing a { color: inherit; }
.vcfo-landing ::selection { background: var(--brass); color: var(--paper); }
.vcfo-landing :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.vcfo-topbar {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: 1.1rem 2rem; border-bottom: 1px solid var(--rule);
}
.vcfo-brand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: .01em; }
.vcfo-brand small {
  display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); font-weight: 500; margin-top: .15rem;
}
.vcfo-topbar-meta { font-size: .8rem; color: var(--slate); font-variant-numeric: tabular-nums; }

.vcfo-shell { display: grid; grid-template-columns: 15.5rem 1fr; max-width: 74rem; margin: 0 auto; }

/* signature: ledger index-tab rail */
.vcfo-index-rail { position: sticky; top: 0; align-self: start; padding: 2.75rem 0 2rem 2rem; }
.vcfo-index-rail-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
  margin: 0 0 1.1rem; font-weight: 600;
}
.vcfo-index-rail ol { list-style: none; margin: 0; padding: 0; }
.vcfo-index-rail a {
  display: block; text-decoration: none; padding: .6rem .9rem .6rem 1rem; font-size: .92rem;
  color: var(--slate); border-left: 2px solid var(--rule);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.vcfo-index-rail a:hover { color: var(--ink); border-left-color: var(--brass); }
.vcfo-index-rail a.is-active {
  color: var(--ink); border-left-color: var(--brass); background: var(--paper-raised); font-weight: 600;
}
.vcfo-index-rail .tab-tag {
  display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--brass);
  letter-spacing: .06em; margin-bottom: .15rem;
}

.vcfo-main { padding: 2.75rem 2rem 5rem 2.5rem; border-left: 1px solid var(--rule); }

.vcfo-lede { max-width: 38rem; margin: 0 0 3rem; font-size: 1rem; color: var(--slate); line-height: 1.55; }
.vcfo-lede strong { color: var(--ink); }

.vcfo-domain { margin-bottom: 3.25rem; scroll-margin-top: 1.5rem; }
.vcfo-domain + .vcfo-domain { padding-top: 3.25rem; border-top: 1px solid var(--rule); }

.vcfo-domain-head { display: flex; align-items: baseline; gap: .85rem; margin-bottom: .35rem; }
.vcfo-domain-eyebrow { font-family: var(--font-mono); font-size: .72rem; color: var(--brass); letter-spacing: .08em; }
.vcfo-domain-head h2 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 0; text-wrap: balance;
}
.vcfo-domain-sub { color: var(--slate); font-size: .88rem; margin: 0 0 1.4rem; max-width: 34rem; }

.vcfo-ledger { border-top: 1px solid var(--rule); }
.vcfo-ledger-row {
  display: grid; grid-template-columns: 1.4fr 2fr auto; align-items: center; gap: 1.5rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.vcfo-row-name { display: flex; align-items: center; gap: .55rem; font-size: 1rem; font-weight: 600; }
.vcfo-row-name a { text-decoration: none; }
.vcfo-row-name a:hover { color: var(--brass-strong); }
.vcfo-row-name a:hover .vcfo-arrow { transform: translateX(3px); }
.vcfo-arrow { display: inline-block; transition: transform .12s ease; color: var(--brass); }
.vcfo-row-desc { color: var(--slate); font-size: .87rem; line-height: 1.45; }
.vcfo-row-meta { text-align: right; white-space: nowrap; }

.vcfo-pill {
  display: inline-block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 3px; font-weight: 600; border: 1px solid var(--rule); color: var(--slate);
}
.vcfo-pill-role { color: var(--brass-strong); border-color: var(--brass); }
.vcfo-pill-open { color: var(--ok); border-color: var(--ok); }

.vcfo-danger {
  margin-top: 1.6rem; padding: 1.1rem 1.3rem; background: var(--warn-bg); border: 1px solid var(--warn);
  border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.vcfo-danger-text { font-size: .85rem; color: var(--slate); max-width: 30rem; }
.vcfo-danger-text strong { color: var(--warn); display: block; font-size: .92rem; margin-bottom: .2rem; }
.vcfo-danger-link {
  text-decoration: none; font-size: .82rem; font-weight: 600; color: var(--warn); border: 1px solid var(--warn);
  padding: .5rem .9rem; border-radius: 3px; white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.vcfo-danger-link:hover { background: var(--warn); color: var(--paper); }

.vcfo-footer {
  max-width: 74rem; margin: 0 auto; padding: 1.5rem 2rem 3rem 4.75rem; color: var(--slate);
  font-size: .78rem; font-family: var(--font-mono);
}

/* form controls used by Access Administration pages, styled to match the ledger system */
.vcfo-form { max-width: 32rem; }
.vcfo-form label {
  display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--slate);
  font-weight: 600; margin: 1.1rem 0 .35rem;
}
.vcfo-form label:first-child { margin-top: 0; }
.vcfo-form input[type="text"],
.vcfo-form input[type="email"],
.vcfo-form select {
  width: 100%; padding: .55rem .7rem; font-size: .92rem; font-family: var(--font-body);
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
}
.vcfo-form input:focus, .vcfo-form select:focus { border-color: var(--brass); }
.vcfo-form .vcfo-check { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; }
.vcfo-form .vcfo-check label { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .88rem; color: var(--ink); }
.vcfo-btn {
  display: inline-block; margin-top: 1.5rem; padding: .6rem 1.1rem; font-size: .85rem; font-weight: 600;
  text-decoration: none; color: var(--paper); background: var(--brass-strong); border: none; border-radius: 3px;
  cursor: pointer; transition: background .12s ease;
}
.vcfo-btn:hover { background: var(--ink); color: var(--paper); }
.vcfo-btn-secondary {
  background: transparent; color: var(--slate); border: 1px solid var(--rule);
}
.vcfo-btn-secondary:hover { background: var(--paper-raised); color: var(--ink); }

@media (max-width: 800px) {
  .vcfo-shell { grid-template-columns: 1fr; }
  .vcfo-index-rail { position: static; padding: 1.5rem 0 0; }
  .vcfo-index-rail ol { display: flex; flex-wrap: wrap; gap: .4rem; }
  .vcfo-index-rail a { border-left: none; border-bottom: 2px solid var(--rule); padding: .4rem .1rem; }
  .vcfo-main { border-left: none; padding: 1.75rem 1.25rem 4rem; }
  .vcfo-ledger-row { grid-template-columns: 1fr; gap: .35rem; }
  .vcfo-row-meta { text-align: left; }
  .vcfo-footer { padding-left: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vcfo-landing * { transition: none !important; }
}

/* ---------- Auth pages (login, signup, password reset, etc.) ---------- */
/* .vcfo-auth is set on the same full-bleed element as .vcfo-landing, via
   content_wrapper_class in account/allauth/base.html - see that file for why
   (every leaf template overrides `content`, so this is the one seam they share).
   No inner wrapper div is available, so each direct child of the block gets its
   own centered column instead of relying on one wrapping element.

   .vcfo-content is the same shell (colors, form controls, link/button treatment)
   at a wider column - 42rem reads as ~60-75 characters per line, the standard
   comfortable-reading target, versus .vcfo-auth's deliberately narrow 26rem which
   only ever suited an actual login-style form. Use .vcfo-auth for short forms
   (login, a handful of fields); .vcfo-content for anything with real prose
   (an app's index/overview page, etc.) - both take the same content_wrapper_class
   slot, just pick the width that matches what the page actually contains. */
.vcfo-auth,
.vcfo-content {
  min-height: calc(100vh - 8rem);
  padding: 3.5rem 1.5rem 4rem;
}
.vcfo-auth > * {
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
.vcfo-content > * {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
/* .site-page-header opts out of the narrow-column centering above and instead cancels
   the wrapper's own padding, so a page that wants the standard full-width header (title
   + optional back button) can still keep its actual content (a form, prose) narrow -
   without this it would inherit the same max-width as everything else and render as an
   oddly narrow, inset banner instead of matching every other page's header. */
.vcfo-auth > .site-page-header,
.vcfo-content > .site-page-header {
  max-width: none;
  margin: -3.5rem -1.5rem 2rem;
}
.vcfo-auth h1,
.vcfo-content h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.vcfo-auth p, .vcfo-content p { color: var(--slate); }
.vcfo-auth a, .vcfo-content a { color: var(--brass-strong); text-decoration: underline; }
.vcfo-auth a:hover, .vcfo-content a:hover { color: var(--brass); }
.vcfo-auth a.btn, .vcfo-content a.btn { text-decoration: none; }

.vcfo-auth label,
.vcfo-auth .form-label,
.vcfo-content label,
.vcfo-content .form-label {
  font-size: .82rem; font-weight: 600; color: var(--slate);
}
.vcfo-auth .form-control,
.vcfo-auth .form-select,
.vcfo-content .form-control,
.vcfo-content .form-select {
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.vcfo-auth .form-control:focus,
.vcfo-auth .form-select:focus,
.vcfo-content .form-control:focus,
.vcfo-content .form-select:focus {
  background: var(--paper-raised);
  color: var(--ink);
  border-color: var(--brass);
  box-shadow: 0 0 0 .2rem rgba(169, 121, 60, .25);
}
.vcfo-auth .form-control::placeholder, .vcfo-content .form-control::placeholder { color: var(--slate); opacity: .8; }
.vcfo-auth .form-text, .vcfo-content .form-text,
.vcfo-auth .form-check-label, .vcfo-content .form-check-label,
.vcfo-auth ul, .vcfo-content ul { color: var(--slate); }
.vcfo-auth .form-check-input, .vcfo-content .form-check-input {
  background-color: var(--paper-raised);
  border-color: var(--rule);
}
.vcfo-auth .form-check-input:checked, .vcfo-content .form-check-input:checked {
  background-color: var(--brass-strong);
  border-color: var(--brass-strong);
}
.vcfo-auth .invalid-feedback, .vcfo-content .invalid-feedback { color: var(--warn); }
.vcfo-auth .is-invalid, .vcfo-content .is-invalid { border-color: var(--warn) !important; }

/* ---------- Data pages (budgets: lists, diagnostics, review, coverage, workflow) ---------- */
/* Same content_wrapper_class trick as .vcfo-auth, but for pages built from plain Bootstrap
   cards/tables/lists rather than a single centered form - no per-child centering, these need
   the full container width. Contextual row/status colors (.table-success, .alert-success,
   badges) are intentionally left alone here, same principle as the dash_app_filters variance
   shading: they carry meaning and must survive regardless of theme. .table-light is the one
   exception overridden below - it's Bootstrap's plain "neutral header" shade, not a status
   color, and its literal light-grey default reads as a mistake on a dark table. */
.vcfo-page a { color: var(--brass-strong); }
.vcfo-page a:hover { color: var(--brass); }
.vcfo-page .text-muted { color: var(--slate) !important; }
.vcfo-page .text-dark { color: var(--ink) !important; }
.vcfo-page code { color: var(--brass-strong); }

.vcfo-page .card {
  background-color: var(--paper-raised);
  color: var(--ink);
  border-color: var(--rule);
}
.vcfo-page .card-header { background-color: transparent; border-color: var(--rule); }

.vcfo-page .table {
  color: var(--ink);
  border-color: var(--rule);
  --bs-table-striped-bg: var(--paper-raised);
  --bs-table-hover-bg: var(--paper-raised);
  --bs-table-hover-color: var(--ink);
}
.vcfo-page .table-light,
.vcfo-page thead.table-light th {
  --bs-table-bg: var(--paper-raised);
  color: var(--ink);
}

.vcfo-page .list-group-item {
  background-color: var(--paper-raised);
  color: var(--ink);
  border-color: var(--rule);
}

.vcfo-page .form-control,
.vcfo-page .form-select {
  background-color: var(--paper-raised);
  color: var(--ink);
  border-color: var(--rule);
}
.vcfo-page .form-control:focus,
.vcfo-page .form-select:focus {
  background-color: var(--paper-raised);
  color: var(--ink);
  border-color: var(--brass);
  box-shadow: 0 0 0 .2rem rgba(169, 121, 60, .25);
}
.vcfo-page .form-label { color: var(--slate); }

.vcfo-page .btn-outline-secondary { color: var(--slate); border-color: var(--rule); }
.vcfo-page .btn-outline-secondary:hover { background-color: var(--paper-raised); color: var(--ink); border-color: var(--rule); }
.vcfo-page .btn-outline-primary { color: var(--brass-strong); border-color: var(--brass-strong); }
.vcfo-page .btn-outline-primary:hover,
.vcfo-page .btn-outline-primary.active { background-color: var(--brass-strong); color: var(--paper); border-color: var(--brass-strong); }

.vcfo-page .alert-danger { background-color: var(--warn-bg); border-color: var(--warn); color: var(--ink); }

/* ---------- Home (marketing landing + seamless onboarding) ---------- */
/* Elevated band, not a permanently-dark one - was hardcoded bg-dark/text-light before,
   which is the exact navbar-mismatch bug this whole effort started from, just recurring
   in a new component. var(--paper-raised) keeps the hero visually distinct from the
   page body below it while staying theme-reactive in both directions. */
.home-hero {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule);
}
.home-hero p, .home-hero li { color: var(--slate); }
.home-hero strong { color: var(--ink); }

.vcfo-page .home-feature-card { color: var(--ink); }
.vcfo-page .home-feature-card h2 { color: var(--ink); }
.vcfo-page .home-feature-card p { color: var(--slate); }
.vcfo-page .home-feature-card:hover h2 { color: var(--brass-strong); }

/* Access Administration - wildcard search (2026-07-27) */
.vcfo-aa-search { margin-bottom: 1.75rem; }
.vcfo-aa-search-row { display: flex; flex-wrap: wrap; align-items: end; gap: .9rem; }
.vcfo-aa-search-row label {
  display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--slate);
}
.vcfo-aa-search-row input[type="text"] {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  padding: .45rem .6rem; font-size: .9rem; border-radius: 2px; min-width: 11rem;
}
.vcfo-aa-search-row input[type="text"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.vcfo-aa-hint { margin: .6rem 0 0; font-size: .76rem; color: var(--slate); }

/* Access Administration - Add Member org-tree picker (2026-07-27) */
.vcfo-aa-add-layout { display: flex; flex-wrap: wrap; gap: 3rem; align-items: start; }
.vcfo-aa-add-form { flex: 0 0 auto; }
.vcfo-aa-org-tree-panel { flex: 1 1 22rem; min-width: 22rem; }
.vcfo-aa-org-tree-panel-label {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
  font-weight: 600; margin-bottom: .5rem;
}
.vcfo-aa-org-tree {
  border: 1px solid var(--rule); border-radius: 2px; padding: .75rem;
  max-height: 32rem; overflow: auto; background: var(--paper);
}
.vcfo-aa-org-tree-root + .vcfo-aa-org-tree-root { margin-top: .75rem; }
.vcfo-aa-org-tree-label {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
  margin-bottom: .35rem; font-weight: 600;
}
.vcfo-aa-org-name { cursor: pointer; }
.vcfo-aa-org-name:hover { text-decoration: underline; }
.vcfo-aa-org-name.vcfo-aa-org-selected { font-weight: 600; color: var(--brass-strong); }

@media (max-width: 860px) {
  .vcfo-aa-add-layout { flex-direction: column; }
  .vcfo-aa-org-tree-panel { min-width: 0; width: 100%; }
}