/* BRAMHA legacy-compat layer — remaps the old dark/gold brand classes used by existing pages
 * (.wrap/.card/.btn-gold/.grid/.lead/.eyebrow/table.tbl/.orb …) to the new premium light/purple
 * theme, so pages that route through inc/brand.php adopt the new look without per-page edits.
 * Loaded after styles.css + bramha-portal.css. */
:root{
  --bg:transparent; --bg2:var(--bs-body-bg); --ink:var(--bs-body-color); --mut:var(--bs-secondary-color);
  --gold:#6366f1; --gold-lt:#a5b4fc; --gold-dk:#818cf8;
  --line:var(--bs-border-color); --glass:var(--bs-body-bg);
  --gg:linear-gradient(120deg,#a5b4fc 0%,#6366f1 45%,#3b82f6 100%);
  --serif:inherit; --sans:inherit; --display:inherit;
}
/* the old pages set body dark — inside the new app shell the content lives in <main>, so neutralise */
.app-wrapper a{ color:var(--kv-brand); }
.app-wrapper .wrap{ max-width:1140px; margin:0 auto; padding:0; }
.app-wrapper h1,.app-wrapper h2,.app-wrapper h3{ color:var(--bs-heading-color,var(--bs-body-color)); font-weight:600; letter-spacing:-.01em; }
.app-wrapper .gold,.app-wrapper .gold *{ background:var(--gg); -webkit-background-clip:text; background-clip:text; color:transparent; }
.app-wrapper .eyebrow{ letter-spacing:.28em; text-transform:uppercase; font-size:.7rem; color:var(--kv-brand); font-weight:600; }
.app-wrapper .lead{ font-size:1.08rem; color:var(--bs-secondary-color); line-height:1.7; }
.app-wrapper section{ padding:34px 0; }
.app-wrapper .section-head{ text-align:center; max-width:760px; margin:0 auto 32px; }
.app-wrapper .section-head h2{ font-size:1.9rem; }
.app-wrapper .divider{ width:60px; height:3px; background:var(--gg); margin:14px auto; border-radius:3px; }
.app-wrapper .grid{ display:grid; gap:18px; }
.app-wrapper .g3{ grid-template-columns:repeat(3,1fr); } .app-wrapper .g2{ grid-template-columns:repeat(2,1fr); } .app-wrapper .g4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .app-wrapper .g3,.app-wrapper .g4,.app-wrapper .g2{ grid-template-columns:1fr; } }
/* cards */
.app-wrapper .card{ background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:16px; padding:22px; backdrop-filter:none; transition:transform .18s,box-shadow .18s,border-color .18s; }
.app-wrapper .card:hover{ border-color:var(--kv-brand); transform:translateY(-4px); box-shadow:0 18px 40px rgba(13,11,31,.10); }
.app-wrapper .card h3{ font-size:1.15rem; margin-bottom:8px; color:var(--bs-body-color); }
.app-wrapper .card p{ color:var(--bs-secondary-color); line-height:1.6; font-size:.95rem; margin:0; }
.app-wrapper .card .ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--gg); color:#fff; margin-bottom:14px; font-size:1.2rem; border:0; }
.app-wrapper .navy-card{ background:rgba(99,102,241,.05); }
.app-wrapper .pill{ display:inline-block; font-size:.74rem; color:var(--kv-brand); border:1px solid rgba(99,102,241,.3); border-radius:999px; padding:4px 12px; background:rgba(99,102,241,.08); }
/* buttons */
.app-wrapper .btn{ display:inline-block; border-radius:999px; padding:12px 26px; font-weight:500; font-size:.94rem; cursor:pointer; border:1px solid transparent; transition:.18s; }
.app-wrapper .btn-gold{ background:var(--gg); color:#ffffff !important; box-shadow:0 8px 26px rgba(99,102,241,.30); }
.app-wrapper .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(99,102,241,.42); }
.app-wrapper .btn-ghost,.app-wrapper .btn-light{ background:transparent; border:1px solid var(--bs-border-color); color:var(--bs-body-color); }
.app-wrapper .btn-ghost:hover,.app-wrapper .btn-light:hover{ border-color:var(--kv-brand); background:rgba(99,102,241,.06); }
.app-wrapper .btn-navy{ background:var(--kv-brand); color:#fff; }
/* checklists, tables */
.app-wrapper ul.check{ list-style:none; padding:0; margin:0; }
.app-wrapper ul.check li{ padding:7px 0 7px 28px; position:relative; color:var(--bs-body-color); }
.app-wrapper ul.check li:before{ content:"◆"; position:absolute; left:0; color:var(--kv-brand); font-size:.7rem; top:11px; }
.app-wrapper table.tbl{ width:100%; border-collapse:collapse; margin:18px 0; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:14px; overflow:hidden; }
.app-wrapper table.tbl th,.app-wrapper table.tbl td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--bs-border-color); font-size:.95rem; color:var(--bs-body-color); }
.app-wrapper table.tbl th{ background:rgba(99,102,241,.06); color:var(--kv-brand); font-weight:600; }
.app-wrapper .bandnavy{ background:rgba(99,102,241,.05); border-top:1px solid var(--bs-border-color); border-bottom:1px solid var(--bs-border-color); }
/* hero orb -> purple */
.app-wrapper .orb .core{ background:radial-gradient(circle at 50% 40%,#fff,#a5b4fc 25%,#6366f1 60%,transparent 72%); }
.app-wrapper .orb .ring{ background:conic-gradient(from 0deg,transparent,rgba(99,102,241,.6),transparent 60%); }
/* hide any old standalone footer that pages may still emit */
.app-wrapper footer.ft{ display:none; }

/* ===== Kill DUPLICATE chrome: old per-page header/nav now replaced by the shell topbar+sidebar ===== */
.app-wrapper header.nav,
.app-wrapper .navoverlay,
.app-wrapper .navtoggle{ display:none !important; }
/* content goes edge-to-edge inside the shell (poster-studio etc. were narrow/centered) */
.app-wrapper .wrap{ max-width:100% !important; padding:0 !important; }
.app-wrapper .kv-legacy-body{ width:100%; }

/* ===== Dark + gold form controls for studio pages (raw input/select/textarea) ===== */
.app-wrapper input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.app-wrapper select,
.app-wrapper textarea{
  background:rgba(255,255,255,.045); color:#e9eefb; border:1px solid rgba(99,102,241,.20);
  border-radius:10px; padding:11px 13px; font-size:.95rem; font-family:inherit; outline:none;
  width:100%; box-sizing:border-box; transition:.15s;
}
.app-wrapper input:focus,.app-wrapper select:focus,.app-wrapper textarea:focus{
  border-color:var(--kv-gold); box-shadow:0 0 0 3px rgba(99,102,241,.16); background:rgba(255,255,255,.06);
}
.app-wrapper input::placeholder,.app-wrapper textarea::placeholder{ color:#8493ad; }
.app-wrapper select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236366f1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; }
.app-wrapper select option{ background:#0b1020; color:#fff; }
.app-wrapper input[type=file]{ color:#cdd6e8; }
.app-wrapper input[type=file]::file-selector-button{ background:var(--gg); color:#ffffff; border:0; border-radius:8px; padding:9px 15px; font-weight:600; cursor:pointer; margin-right:12px; }
.app-wrapper label{ color:#cdd6e8; }
.app-wrapper .formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:640px){ .app-wrapper .formgrid{ grid-template-columns:1fr; } }
/* inline control-bars (e.g. Ask BRAMHA #projbar) must stay on ONE line — don't let width:100% break them */
.app-wrapper #projbar{ flex-wrap:nowrap; }
.app-wrapper #projbar select,.app-wrapper #projbar input{ width:auto !important; }
.app-wrapper #projbar #projsel{ flex:0 1 220px; min-width:160px; }
.app-wrapper #projbar #projstatus{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:760px){ .app-wrapper #projbar{ flex-wrap:wrap; } }