/* ─────────────────────────────────────────────────────────
   Correct · Unified Theme & Layout Primitives (live)
   Dark-on-dark palette + per-division accents + shared UI
   Font unified across all elements (system-ui baseline)
────────────────────────────────────────────────────────── */

/* ===== Tokens ===== */
:root{
  --bg-start:#090a0b;
  --bg-end:#0f1012;
  --text:#f2f4f7;
  --muted:#a7b0ba;
  --tile:#0e0f12;
  --tile-border:#1a1c20;

  /* Default accent (overridden by [data-theme]) */
  --accent:#e6e9ee;

  --brand-2:#cfd6dd;
  --ok:#38d39f; --warn:#ffd166; --danger:#ff4d6d;

  --pad:14px; --gap:14px; --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.35);

  --dur:180ms; --ease:cubic-bezier(.2,.6,.2,1);

  /* Controls */
  --ctrl-h:44px;
  --ctrl-pad:10px 12px;
  --ctrl-bg:#0b0c0f;
  --ctrl-br:10px;
  --ctrl-border:#1a1c20;
  --ctrl-fg:#e9edf1;
  --ctrl-ph:rgba(231,236,241,.45);

  /* Typography */
  --font: system-ui, -apple-system, Segoe UI, Inter, Roboto, Ubuntu, Arial, sans-serif;
  --fs: 15px;
  --lh: 1.55;
}

/* Per-division accent overrides */
body[data-theme="capital"]  { --accent:#d4af37; } /* gold */
body[data-theme="exchange"] { --accent:#00bcd4; } /* cyan/teal */
body[data-theme="credit"]   { --accent:#38d39f; } /* money green */
body[data-theme="trust"]    { --accent:#a48bff; } /* violet */
body[data-theme="insight"]  { --accent:var(--brand-2); }

/* ===== Base ===== */
*{box-sizing:border-box;min-width:0;font-family:inherit}
html,body{height:100%}
:root{color-scheme:dark}
html{font-size:var(--fs)}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1100px 740px at 50% -220px,
      color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-start), var(--bg-end));
  background-attachment:fixed;
  font-family:var(--font);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:where(p,h1,h2,h3,h4,h5,h6,small,strong,em,ul,ol,li,dl,dt,dd,table,th,td,button,input,select,textarea,label,summary,details,code,kbd,pre){font-family:inherit;font-size:inherit;line-height:inherit}
:where(p,h1,h2,h3,h4){margin:0 0 6px}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Focus */
:where(a,button,input,select,textarea,canvas,summary):focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 80%, white 20%);
  outline-offset:2px; border-radius:10px;
}

/* ===== Buttons / Inputs ===== */
button{font:inherit}
.icon-btn,.btn,.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--ctrl-bg); border:1px solid var(--ctrl-border);
  color:var(--text); border-radius:12px; padding:8px 10px; cursor:pointer;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.icon-btn{min-width:36px; min-height:36px; line-height:1}
.icon-btn:hover,.btn:hover{border-color:var(--accent)}
.icon-btn:active,.btn:active{transform:translateY(1px)}
.btn{background:color-mix(in oklab, var(--ctrl-bg) 92%, var(--accent) 8% / 0%)}
.btn-primary{background:var(--accent); color:#0b0c0f; border-color:transparent; font-weight:700}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px)}

.cta{
  background:var(--accent); color:#0b0c0f;
  border:0; padding:10px 12px; font-weight:800; letter-spacing:.2px;
}
.cta:hover{filter:brightness(1.05)}
.cta:active{transform:translateY(1px)}

input,select,textarea{
  background:var(--ctrl-bg);
  color:var(--ctrl-fg);
  border:1px solid var(--ctrl-border);
  border-radius:var(--ctrl-br);
  padding:var(--ctrl-pad);
  min-height:var(--ctrl-h);
  min-width:120px;
  line-height:1.2;
  font:inherit;
}
::placeholder{color:var(--ctrl-ph); opacity:1}

/* Hide number spinners cross-browser */
input[type="number"]{appearance:textfield;-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Select arrow */
select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='white'><path d='M6 8 0 0h12z'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:28px;
}

/* Inline validation */
.input.ok{border-color:color-mix(in oklab,var(--ok)70%,white 0%)}
.input.warn{border-color:color-mix(in oklab,var(--warn)80%,white 0%)}
.input.danger{border-color:color-mix(in oklab,var(--danger)80%,white 0%)}

/* ===== Header ===== */
header{
  position:sticky;top:0;z-index:60;backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(12,13,15,.85),rgba(12,13,15,.30));
  border-bottom:1px solid var(--tile-border);
}
.wrap{max-width:1100px;margin:0 auto;padding:10px var(--pad)}
.header-grid{display:grid;grid-template-columns:48px 1fr 48px;align-items:center}
.brand{justify-self:center;font-weight:800;letter-spacing:.2px;font-size:18px;color:var(--text)}
.brand .dot{color:var(--accent)}

.logo-btn{
  display:inline-grid;place-items:center;
  width:42px;height:42px;
  border:none;background:transparent;padding:0;
  border-radius:999px;cursor:pointer;
}
.logo-img{
  width:28px;height:28px;display:block;
  transform-origin:50% 50%;
  transition:transform 240ms ease;
}
body.drawer-open .logo-img{transform:rotate(180deg)}

/* ===== Drawer ===== */
.drawer{
  position:fixed;inset:0 auto 0 0;width:min(320px,90vw);
  transform:translateX(-100%);transition:transform 260ms ease;
  background:linear-gradient(180deg,var(--bg-start),var(--bg-end));
  box-shadow:2px 0 24px rgba(0,0,0,.4);
  overflow:auto;z-index:1001;
}
body.drawer-open .drawer{transform:none}

.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0;pointer-events:none;z-index:1000;
  transition:opacity 200ms ease;
}
body.drawer-open .drawer-backdrop{opacity:1;pointer-events:auto}
body.drawer-open .drawer-backdrop[hidden]{display:block}

.drawer-head{padding:16px}
.drawer-group{padding:8px 16px 16px}
.drawer-photo{margin:16px;padding:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.drawer-photo img{display:block;width:100%;height:auto;border-radius:12px}
.drawer-photo figcaption{margin-top:8px;font-size:.85rem;opacity:.7}

.nav-stack{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.nav-stack a{
  display:block;padding:8px 10px;border:1px solid var(--tile-border);
  border-radius:10px;background:var(--ctrl-bg);color:var(--text);
}
.nav-stack a:hover{border-color:var(--accent);text-decoration:none}
.nav-stack a[aria-current],
.nav-stack a[aria-current="page"]{
  background:color-mix(in oklab,var(--accent)16%,transparent);
  border-color:color-mix(in oklab,var(--accent)40%,transparent);
}

/* ===== Footer ===== */
footer{
  border-top:1px solid var(--tile-border);
  margin-top:24px;text-align:center;padding:16px 0;
}

/* ===== Content blocks ===== */
main{padding:22px var(--pad)}
.tile{
  background:var(--tile);border:1px solid var(--tile-border);border-radius:var(--radius);
  padding:var(--pad);box-shadow:var(--shadow);margin-bottom:var(--gap);
}
.subcard{
  background:color-mix(in oklab,var(--tile)94%,white 6%);
  border:1px solid var(--tile-border);border-radius:14px;padding:12px;margin-top:12px;
}
.note{color:var(--muted);font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}

/* ===== Cards & Grids ===== */
.container{max-width:1200px;margin:auto;padding:40px 16px}
.card{
  background:var(--tile);border:1px solid var(--tile-border);
  border-radius:14px;padding:20px;margin:16px 0;box-shadow:var(--shadow)
}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(4,1fr)}

@media(max-width:980px){.grid,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .header-grid{grid-template-columns:40px 1fr 40px}
}

/* ===== Details Grid ===== */
.details-2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media(max-width:640px){.details-2x2{grid-template-columns:1fr}}
.details-2x2.strict>*{min-width:0}

/* ===== Tables ===== */
.table-wrap{overflow-x:auto;border:1px solid var(--tile-border);border-radius:12px;background:var(--tile)}
.table-wrap table{min-width:640px}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{font-weight:700;color:var(--text)}
td,th{padding:8px 10px;border-bottom:1px solid var(--tile-border);text-align:left;vertical-align:middle}
td:nth-child(2),td:nth-child(3),td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background-color:color-mix(in oklab,var(--tile)92%,var(--accent)8%)}
.table-mini{width:100%;border-collapse:collapse;min-width:520px}
.table-mini th,.table-mini td{padding:8px 10px;border-bottom:1px solid var(--tile-border);white-space:nowrap}

/* ===== Details / Summary ===== */
details{border:1px solid var(--tile-border);border-radius:12px;padding:8px;background:#0b0c0f}
summary{cursor:pointer;color:var(--accent);list-style:none}
summary::-webkit-details-marker{display:none}

/* ===== Modal ===== */
.backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;z-index:80;
}
.backdrop.show{display:flex}
.modal{
  width:min(560px,calc(100% - 28px));background:var(--tile);
  border:1px solid var(--tile-border);border-radius:16px;padding:16px;box-shadow:var(--shadow)
}

/* ===== KPIs / Badges ===== */
.badge{
  display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:.8rem;background:rgba(255,255,255,.08);color:var(--text)
}
.kpi{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:color-mix(in oklab,var(--accent)15%,transparent);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent)45%,transparent) inset;
  font-weight:600;color:var(--text);
}

/* ===== Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .logo-img{transition:none}
}

/* ===== Utilities ===== */
.hidden{display:none!important}
.center{display:flex;align-items:center;justify-content:center}
.right{justify-content:flex-end}
.flex{display:flex}
.stack{display:flex;flex-direction:column;gap:10px}
.tile,.card,.subcard{overflow:hidden}
select option{white-space:nowrap}
[aria-live]{min-height:1em}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}