/* MFA Market Price Intelligence — "Calm Ledger" design system.
   Tokens and components per FRONTEND-STYLE-GUIDE.md; chart series colors
   validated for CVD safety in both modes (dataviz six-checks). */

:root{
  /* ink = text, decreasing strength
     --muted darkened from the guide's #8a8f98 (3.3:1) to meet WCAG AA
     4.5:1 for the micro-labels and captions that carry information */
  --ink:#1c1c1c; --ink-2:#3a3f46; --muted:#6f7480; --muted-2:#aeb2b8;
  /* structure */
  --line:#ececee; --line-2:#f3f3f5;
  --canvas:#ffffff; --card:#f7f8fa; --hover:#f3f4f6;
  /* one accent + semantic pairs (fg on -bg) */
  --blue:#1b6fd1;  --blue-bg:#e7eefc;
  --green:#2f7d51; --green-bg:#e3f3e8;
  --red:#c0392b;   --red-bg:#fbe3dd;
  --amber:#8a6516; --amber-bg:#fbeecb;
  /* pastel KPI tile fills */
  --k1:#e4f0fb; --k2:#eef1f5; --k3:#e6f3ea; --k4:#ecebf8;
  /* chart series (categorical, validated light-mode) */
  --chart-1:#1b6fd1; --chart-2:#c2410c; --chart-3:#0d9488;
  --chart-4:#7048b6; --chart-5:#b13176;
  /* shape + type */
  --r:16px;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --shadow:0 1px 3px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.03);
}
body.dark{
  --ink:#e8eaed; --ink-2:#c5c9cf; --muted:#9aa0a6; --muted-2:#6b7178;
  --line:#2b2f34; --line-2:#23272b;
  --canvas:#15171a; --card:#1d2024; --hover:#272b30;
  --blue:#6aa9f0; --blue-bg:#1f2c40; --green:#6fcf97; --green-bg:#1d2e23;
  --red:#e2867a; --red-bg:#3a241f; --amber:#d8b15a; --amber-bg:#382f15;
  --k1:#1f2a37; --k2:#23262b; --k3:#1d2a23; --k4:#262338;
  /* chart series (validated dark-mode steps, not an automatic flip) */
  --chart-1:#4b8fe0; --chart-2:#d97742; --chart-3:#2aa898;
  --chart-4:#8672e3; --chart-5:#d66278;
  --shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ---- base + reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--sans);color:var(--ink);background:var(--canvas);min-height:100vh}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:var(--ink)}
::selection{background:var(--ink);color:var(--canvas)}
svg{display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.84rem;letter-spacing:.02em}
.eyebrow{font-size:.69rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}

/* ---- app shell: sidebar + main ---- */
.app{--cnav:236px;display:grid;grid-template-columns:var(--cnav) minmax(0,1fr);min-height:100vh}
.sidebar{border-right:1px solid var(--line);padding:16px 12px 24px;position:sticky;top:0;height:100vh;
  overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.brand{padding:6px 10px 18px;display:flex;align-items:center;gap:11px}
.brand .logo{width:44px;height:44px;border-radius:10px;object-fit:contain;
  background:#fff;border:1px solid var(--line);flex-shrink:0}
.brand .t{font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.brand .s{font-size:.7rem;color:var(--muted);margin-top:2px}
.nav{display:flex;flex-direction:column;gap:1px}
.nav a{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;padding:8px 10px;
  border-radius:9px;font-size:.9rem;color:var(--ink-2);text-align:left;position:relative;text-decoration:none}
.nav a:hover{background:var(--hover);text-decoration:none}
.nav a[aria-current="true"]{background:var(--hover);color:var(--ink);font-weight:500}
.nav a[aria-current="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:3px;background:var(--ink)}
.nav .sec{margin:14px 10px 4px}
.nav .badge{margin-left:auto;font-size:.68rem;font-weight:600;background:var(--red-bg);color:var(--red);
  border-radius:99px;padding:1px 8px}
.sidebar .spacer{flex:1}
.userbox{border-top:1px solid var(--line);padding:12px 10px 0;display:flex;align-items:center;gap:10px}
.userbox .who{min-width:0}
.userbox .who .n{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userbox .who .r{font-size:.68rem;color:var(--muted);text-transform:capitalize}

.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--canvas) 86%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:10px}
.topbar h1{font-size:1.04rem;font-weight:600;margin-right:auto}
.topbar .ibtn{padding:8px 11px;min-width:36px}
.content{padding:22px 24px 60px;max-width:1200px}

/* visible, consistent keyboard focus everywhere */
.btn:focus-visible,.ibtn:focus-visible,.chip:focus-visible,.nav a:focus-visible,
.toolbar input:focus-visible,.toolbar select:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px}

/* ---- responsive: collapse the shell below tablet width ---- */
@media(max-width:920px){
  .app{grid-template-columns:1fr}
  /* grid items default to min-width:auto — without this the horizontal
     nav's content width inflates the whole page */
  .app > aside,.app > main{min-width:0;max-width:100vw}
  .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
    padding:12px 16px}
  .brand{padding:2px 0 10px}
  .sidebar .spacer,.userbox{display:none}
  .nav{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:4px}
  .nav .sec{display:none}
  .nav a{white-space:nowrap;padding:9px 12px}
  .nav a[aria-current="true"]::before{display:none}
  .content{padding:16px 14px 48px}
  .topbar{padding:12px 14px}
  .grid-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* wide data tables scroll inside their card, never the page */
  .card{overflow-x:auto}
  .card table{min-width:600px}
}

/* ---- cards + KPI tiles ---- */
.card{background:var(--card);border-radius:var(--r);padding:20px 22px;margin-bottom:20px}
.card h3{font-size:.96rem;font-weight:600;margin-bottom:3px}
.card .sub{font-size:.79rem;color:var(--muted);margin-bottom:15px;line-height:1.55;max-width:84ch}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:980px){.grid-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:20px}
.kpi{border-radius:var(--r);padding:18px 20px;transition:transform .15s}
.kpi:hover{transform:translateY(-2px)}
.kpi.k1{background:var(--k1)} .kpi.k2{background:var(--k2)}
.kpi.k3{background:var(--k3)} .kpi.k4{background:var(--k4)}
.kpi .lbl{font-size:.82rem;font-weight:500;color:var(--ink)}
.kpi .val{font-size:1.62rem;font-weight:600;margin-top:14px;font-variant-numeric:tabular-nums}
.kpi .delta{font-size:.76rem;font-weight:500;color:var(--ink-2)}

/* ---- buttons, chips, tags ---- */
.btn{border:0;background:var(--ink);color:var(--canvas);border-radius:9px;padding:7px 13px;
  font-size:.77rem;font-weight:500;transition:background .15s,filter .15s;text-decoration:none;display:inline-block}
.btn:hover{background:var(--ink-2);text-decoration:none}
.btn.accent{background:var(--blue);color:#fff}
.btn.accent:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--hover);color:var(--ink)}
.btn.ghost:hover{background:var(--line)}
.btn.red{border:1px solid var(--red);background:none;color:var(--red)}
.btn.red:hover{background:var(--red-bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.ibtn{border:1px solid var(--line);background:none;border-radius:8px;padding:5px 9px;font-size:.74rem;
  color:var(--ink-2);text-decoration:none;display:inline-block}
.ibtn:hover{background:var(--hover);text-decoration:none}
.chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:6px 13px;
  font-size:.78rem;color:var(--ink-2);font-weight:500;text-decoration:none;display:inline-block}
.chip:hover{text-decoration:none}
.chip.on{background:var(--ink);color:var(--canvas);border-color:var(--ink)}

.tag{display:inline-block;font-size:.68rem;font-weight:500;padding:3px 9px;border-radius:99px;white-space:nowrap}
.tag.info{background:var(--blue-bg);color:var(--blue)}
.tag.ok{background:var(--green-bg);color:var(--green)}
.tag.warn{background:var(--amber-bg);color:var(--amber)}
.tag.bad{background:var(--red-bg);color:var(--red)}
.tag.solid{background:var(--ink);color:var(--canvas)}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;font-weight:500;padding:9px 10px;border-bottom:1px solid var(--line);
   font-size:.69rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
   white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:hover td{background:rgba(0,0,0,.018)}
body.dark tr:hover td{background:rgba(255,255,255,.02)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.neg{color:var(--red);font-weight:500}
tfoot td{border-top:1px solid var(--line);border-bottom:0;font-weight:600}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .count{margin-left:auto;font-size:.78rem;color:var(--muted)}

/* ---- forms ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.form-grid.narrow{grid-template-columns:1fr}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:.71rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted);font-weight:600}
.form-grid input,.form-grid select,.form-grid textarea,
.toolbar input,.toolbar select{
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:.86rem;
  background:var(--canvas);font-family:inherit;color:var(--ink)}
.form-grid input:focus,.toolbar input:focus{outline:none;border-color:var(--ink-2)}
body.dark .form-grid input,body.dark .form-grid select,
body.dark .toolbar input,body.dark .toolbar select{background:var(--hover)}
.form-actions{margin-top:16px;display:flex;gap:10px}

/* ---- notes, flashes ---- */
.hint{font-size:.76rem;color:#5b6068;background:var(--hover);border-radius:11px;padding:11px 14px;line-height:1.6}
body.dark .hint{color:var(--ink-2)}
.empty{padding:18px 2px;color:var(--muted);font-size:.85rem}
.flash{font-size:.82rem;border-radius:11px;padding:11px 14px;margin-bottom:14px;
  animation:rise .18s ease both}
.flash.ok{background:var(--green-bg);color:var(--green)}
.flash.error{background:var(--red-bg);color:var(--red)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---- charts ---- */
.chartbox{position:relative;height:260px}
.chartbox.tall{height:320px}

/* ---- diverging heatmap (blue = cheaper, red = dearer, gray = neutral)
   Monotone lightness per arm; values are printed in every cell so color
   is never the only encoding. ---- */
:root{
  --hm3:#9dbfe8; --hm2:#c3d8f5; --hm1:#e7eefc;
  --h0:var(--hover);
  --hp1:#fbe3dd; --hp2:#f3c1b5; --hp3:#e59b8c;
}
body.dark{
  --hm3:#33527e; --hm2:#28405f; --hm1:#1f2c40;
  --hp1:#3a241f; --hp2:#553529; --hp3:#714536;
}
table.heat td.heatcell{text-align:right;font-variant-numeric:tabular-nums;font-size:.8rem}
.heatcell.hm3{background:var(--hm3)} .heatcell.hm2{background:var(--hm2)}
.heatcell.hm1{background:var(--hm1)} .heatcell.h0{background:var(--h0)}
.heatcell.hp1{background:var(--hp1)} .heatcell.hp2{background:var(--hp2)}
.heatcell.hp3{background:var(--hp3)}
.heatcell.none{color:var(--muted-2)}
tr:hover td.heatcell{filter:brightness(.97)}
body.dark tr:hover td.heatcell{filter:brightness(1.12)}
.heat-legend{display:flex;align-items:center;gap:5px;margin-bottom:14px}
.heat-legend .swatch{width:26px;height:12px;border-radius:3px;display:inline-block}
.heat-legend .swatch.hm3{background:var(--hm3)} .heat-legend .swatch.hm2{background:var(--hm2)}
.heat-legend .swatch.hm1{background:var(--hm1)} .heat-legend .swatch.h0{background:var(--h0)}
.heat-legend .swatch.hp1{background:var(--hp1)} .heat-legend .swatch.hp2{background:var(--hp2)}
.heat-legend .swatch.hp3{background:var(--hp3)}

/* illustrative-data banner — must never be mistaken for real prices */
.demo-banner{border:1px solid var(--amber);background:var(--amber-bg);color:var(--amber);
  border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:.82rem;line-height:1.6}
.demo-banner a{color:var(--amber);text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* respect the user's motion preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--card)}
.login-card{background:var(--canvas);border:1px solid var(--line);border-radius:18px;
  padding:34px 36px;width:min(400px,92vw);box-shadow:var(--shadow)}
.login-card h1{font-size:1.05rem;font-weight:700;margin-bottom:2px}
.login-card .sub{font-size:.79rem;color:var(--muted);margin-bottom:20px}
.login-logo{width:88px;height:88px;border-radius:16px;object-fit:contain;
  background:#fff;border:1px solid var(--line);margin-bottom:16px}