/* ============================================================
   Fieldkeep — page dark-native overrides
   Make the whole page cohere with the cinematic command-center hero.
   ============================================================ */

/* ---- bands ---- */
.band { background: var(--ink); color: var(--d-text); }
.band-soft { background: var(--ink-2); color: var(--d-text); }
.band h1, .band h2, .band h3, .band-soft h1, .band-soft h2, .band-soft h3 { color: var(--d-text); }
.band .lede, .band-soft .lede, .band .section-head p, .band-soft .section-head p { color: var(--d-text-2); }

/* ---- generic card surfaces ---- */
.alt-step, .stack-card, .value-card, .contact-card, .recon-card, .alloc-card {
  background: var(--ink-3); border-color: var(--d-border); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 44px rgba(0,0,0,.35);
}
.prob-card h3, .value-card h3, .contact-card h3 { color: var(--d-text); }
.prob-card p, .value-card p, .contact-card p, .contact-card .c-val { color: var(--d-text-2); }

/* ---- problem ---- */
.prob-ic, .value-card .v-ic { background: rgba(108,138,255,.14); color: var(--indigo-bright); }
.prob-illustrative { border-top-color: var(--d-border); color: var(--d-text-3); }
.prob-illustrative b { color: var(--d-text); }

/* ---- reconciliation ---- */
.pullquote { background: rgba(108,138,255,.09); border-left-color: var(--indigo-bright); color: var(--d-text); }
.pullquote em { color: var(--indigo-bright); }
.pq-mark { color: var(--indigo-bright); }
.recon-head { color: var(--d-text); }
.recon-id { color: var(--d-text-3); }
.recon-bar { background: rgba(255,255,255,.08); }
.recon-label { color: var(--d-text-2); }
.recon-val { color: var(--d-text); }

/* ---- allocation card (§3) ---- */
.alloc-head, .alloc-val { color: var(--d-text); }
.alloc-id { color: var(--d-text-3); }
.alloc-prop { color: var(--d-text-2); }
.alloc-bar { background: rgba(255,255,255,.08); }
.alloc-foot { color: var(--d-text-2); border-top-color: var(--d-border); }
.alloc-rec { color: var(--indigo-bright); }

/* ---- problem (de-boxed: bright indigo top rule) + capability moat ---- */
.prob-card { border-top-color: var(--indigo-bright); }
.cap-moat { color: var(--d-text); }
.cap-moat b { color: var(--indigo-bright); }

/* ---- altitude ---- */
.alt-tag { color: var(--indigo-bright); }
.alt-tiles span { background: rgba(255,255,255,.06); }
.alt-tiles .ok { background: rgba(52,211,153,.28); }
.alt-tiles .warn { background: rgba(251,191,36,.4); }
.alt-tiles .hot { background: rgba(248,113,113,.48); }
.alt-proplist span { background: rgba(255,255,255,.04); color: var(--d-text-2); }
.alt-step > p { color: var(--d-text-2); }
.alt-arrow { color: var(--d-border-2); }

/* ---- capability map ---- */
.cap-list { border-top-color: var(--d-border); }
.cap-item { border-bottom-color: var(--d-border); }
.cap-btn:hover { background: rgba(255,255,255,.03); }
.cap-name { color: var(--d-text); }
.cap-line { color: var(--d-text-2); }
.cap-num { color: var(--indigo-bright); }
.cap-toggle { color: var(--d-text-3); }
.cap-item.open .cap-toggle { color: var(--indigo-bright); }
.cap-detail p { color: var(--d-text-2); }

/* ---- roles ---- */
.stack-card:hover { border-color: var(--d-border-2); box-shadow: 0 22px 50px rgba(0,0,0,.45); }

/* ---- how it fits ---- */
.stack-klabel { color: var(--green-d); }
.stack-kalt { color: var(--d-text-3); }
.stack-kalt i { color: var(--indigo-bright); }
.stack-card b { color: var(--d-text); }
.stack-card p { color: var(--d-text-2); }
.stack-flowline { background: linear-gradient(180deg, var(--d-border-2), var(--indigo-bright)); }
.stack-payroll { border-color: var(--d-border-2); }
.stack-payroll .mono { color: var(--d-text-3); }
.stack-payroll b { color: var(--d-text); }

/* ---- field app ---- */
.field-points b { color: var(--d-text); }
.field-points li { color: var(--d-text-2); }
.fp-tick { background: rgba(108,138,255,.14); color: var(--indigo-bright); }

/* ---- chips & ghost buttons on dark ---- */
.chip { background: rgba(255,255,255,.04); border-color: var(--d-border); color: var(--d-text-2); }
.field-avail.chip { background: rgba(255,255,255,.04); border-color: var(--d-border); color: var(--d-text-2); }
.band .btn-ghost, .band-soft .btn-ghost { color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-border-2); }
.band .btn-ghost:hover, .band-soft .btn-ghost:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

/* subtle accent hairline at the top of each band for rhythm */
.band + .band-soft, .band-soft + .band { border-top: 1px solid var(--d-border); }