/* Odisha Demand Forecast — palette validated with the dataviz six-checks
   (light: ALL PASS with a contrast WARN on aqua/yellow, relieved by direct
   labels + a table view; dark: ALL PASS). Both modes are selected, not flipped. */
:root {
  color-scheme: light;
  --surface-0:#f5f5f3; --surface-1:#fcfcfb; --surface-2:#ececea;
  --line:#d9d9d4; --line-soft:#e8e8e4;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#7c7b76;
  --brand:#0b4f8a; --brand-2:#0a3f6e;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --good:#1a7f4b; --bad:#b3261e;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-0:#121211; --surface-1:#1a1a19; --surface-2:#232322;
    --line:#3a3a37; --line-soft:#2b2b29;
    --ink:#ffffff; --ink-2:#c3c2b7; --ink-3:#96958c;
    --brand:#4d9fe0; --brand-2:#3987e5;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --good:#3faa72; --bad:#e26d64;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0:#121211; --surface-1:#1a1a19; --surface-2:#232322;
  --line:#3a3a37; --line-soft:#2b2b29;
  --ink:#ffffff; --ink-2:#c3c2b7; --ink-3:#96958c;
  --brand:#4d9fe0; --brand-2:#3987e5;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --good:#3faa72; --bad:#e26d64;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--surface-0); color:var(--ink);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
h1 { font-size:19px; margin:0; letter-spacing:-.01em; }

.hdr {
  display:flex; align-items:center; gap:12px; padding:12px 20px;
  background:var(--surface-1); border-bottom:1px solid var(--line);
}
.hdr-mark { width:38px; height:38px; border-radius:50%; flex:none; }
.hdr-txt p { margin:1px 0 0; font-size:12px; color:var(--ink-2); }
.ghost {
  margin-left:auto; background:none; border:1px solid var(--line);
  color:var(--ink-2); border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:15px;
}
.ghost:hover { background:var(--surface-2); }

.prov { padding:8px 20px; font-size:12.5px; background:var(--surface-2); color:var(--ink-2); border-bottom:1px solid var(--line); }
.prov b { color:var(--ink); }
.prov.stale { background:var(--bad); color:#fff; }
.prov.stale b { color:#fff; }

.tabs { display:flex; gap:2px; padding:0 14px; background:var(--surface-1); border-bottom:1px solid var(--line); overflow-x:auto; }
.tab {
  background:none; border:none; border-bottom:2px solid transparent; color:var(--ink-2);
  padding:10px 14px; font-size:13.5px; cursor:pointer; white-space:nowrap;
}
.tab:hover { color:var(--ink); }
.tab.on { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }

main { padding:18px 20px 40px; max-width:1180px; }
.panel.hide { display:none; }

.ctl { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.ctl-lab { font-size:12px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.seg { display:flex; gap:1px; background:var(--line-soft); padding:2px; border-radius:9px; }
.seg button {
  background:none; border:none; padding:5px 11px; border-radius:7px;
  font-size:12.5px; color:var(--ink-2); cursor:pointer;
}
.seg button.on { background:var(--surface-1); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.10); }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
.tile { background:var(--surface-1); border:1px solid var(--line); border-radius:11px; padding:11px 13px; }
.tile .k { font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.tile .v { font-size:22px; font-weight:650; letter-spacing:-.02em; margin-top:3px; font-variant-numeric:tabular-nums; }
.tile .s { font-size:11.5px; color:var(--ink-2); margin-top:1px; }

.fig { margin:0 0 16px; background:var(--surface-1); border:1px solid var(--line); border-radius:12px; padding:14px; }
figcaption { font-size:13px; font-weight:600; margin-bottom:10px; }
.chart { position:relative; overflow-x:auto; }
.chart svg { display:block; max-width:100%; }

.lg { display:flex; gap:14px; flex-wrap:wrap; margin-top:9px; font-size:12px; color:var(--ink-2); }
.lg i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }

.tip {
  position:absolute; pointer-events:none; z-index:5; background:var(--surface-1);
  border:1px solid var(--line); border-radius:9px; padding:7px 10px; font-size:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.16); white-space:nowrap; opacity:0; transition:opacity .1s;
}
.tip .r { display:flex; justify-content:space-between; gap:14px; }
.tip .r b { font-variant-numeric:tabular-nums; }

table { border-collapse:collapse; width:100%; font-size:12.5px; }
th, td { padding:6px 9px; border-bottom:1px solid var(--line-soft); text-align:right; font-variant-numeric:tabular-nums; }
th:first-child, td:first-child { text-align:left; font-variant-numeric:normal; }
thead th { background:var(--surface-2); color:var(--ink-2); font-weight:600; position:sticky; top:0; }
tbody tr:hover { background:var(--surface-2); }
tfoot td { font-weight:650; border-top:2px solid var(--line); }
.tbl-wrap { background:var(--surface-1); border:1px solid var(--line); border-radius:12px; padding:0 14px; }
.tbl-wrap summary { cursor:pointer; padding:11px 0; font-size:13px; color:var(--ink-2); }
.tbl-wrap > div { max-height:340px; overflow:auto; padding-bottom:12px; }

.shares { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px; }
.share { background:var(--surface-1); border:1px solid var(--line); border-radius:11px; padding:11px 13px; border-left-width:4px; }
.share .n { font-size:12.5px; font-weight:600; }
.share .v { font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; margin-top:2px; }
.share .s { font-size:11.5px; color:var(--ink-2); }

.note { font-size:13px; color:var(--ink-2); background:var(--surface-1); border:1px solid var(--line);
        border-left:3px solid var(--brand); border-radius:9px; padding:11px 13px; margin:0 0 14px; }
.note b { color:var(--ink); }

.defs { background:var(--surface-1); border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:14px; font-size:12.5px; }
.defs dt { font-weight:650; margin-top:8px; }
.defs dt:first-child { margin-top:0; }
.defs dd { margin:2px 0 0; color:var(--ink-2); }

.mnote { background:var(--surface-1); border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin-bottom:10px; }
.mnote h3 { margin:0 0 5px; font-size:13.5px; }
.mnote p { margin:0; font-size:13px; color:var(--ink-2); }
.mnote .key { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--ink-3); }

.ftr { padding:16px 20px 30px; font-size:11.5px; color:var(--ink-3); border-top:1px solid var(--line); margin-top:10px; }

/* chat */
#chat-root { position:fixed; bottom:18px; right:18px; z-index:9999; }
.fab { width:96px; height:96px; border-radius:50%; border:none; background:var(--surface-1); cursor:pointer;
       padding:4px; box-shadow:0 10px 28px rgba(15,23,42,.28); transition:transform .18s, box-shadow .18s; position:relative; }
.fab:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 14px 32px rgba(15,23,42,.36); }
.fab img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; pointer-events:none; }
.fab .pulse { position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(11,79,138,.5);
              animation:pulse 2.8s ease-out infinite; pointer-events:none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(11,79,138,.5)} 70%{box-shadow:0 0 0 26px rgba(11,79,138,0)} 100%{box-shadow:0 0 0 0 rgba(11,79,138,0)} }
@media (prefers-reduced-motion: reduce) { .fab .pulse { animation:none; } }

.cpanel { width:390px; max-width:calc(100vw - 32px); height:565px; max-height:calc(100vh - 80px);
          background:var(--surface-1); border:1px solid var(--line); border-radius:15px; overflow:hidden;
          display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.3); }
.chead { display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--brand-2); color:#fff; }
.chead img { width:34px; height:34px; border-radius:50%; background:#fff; padding:2px; }
.chead .t { font-size:13.5px; font-weight:700; line-height:1.15; }
.chead .s { font-size:11px; opacity:.85; }
.chead button { margin-left:auto; background:rgba(255,255,255,.14); border:none; color:#fff;
                width:27px; height:27px; border-radius:7px; cursor:pointer; font-size:16px; }
.cbody { flex:1; overflow-y:auto; padding:13px; background:var(--surface-0); display:flex; flex-direction:column; gap:9px; }
.bub { max-width:86%; padding:8px 11px; border-radius:12px; font-size:13px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word; }
.bub.u { align-self:flex-end; background:var(--brand-2); color:#fff; border-bottom-right-radius:4px; }
.bub.b { align-self:flex-start; background:var(--surface-1); border:1px solid var(--line); border-bottom-left-radius:4px; }
.bub.t { align-self:flex-start; background:var(--surface-2); color:var(--ink-2); font-size:11px;
         font-family:ui-monospace,Menlo,monospace; padding:4px 9px; border-radius:7px; }
.cempty { text-align:center; color:var(--ink-3); font-size:12px; padding:26px 10px; }
.cq { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:11px; }
.cq button { background:var(--surface-1); border:1px solid var(--line); color:var(--brand);
             padding:5px 10px; border-radius:14px; font-size:11.5px; cursor:pointer; }
.cq button:hover { background:var(--surface-2); }
.cin { display:flex; gap:7px; padding:10px; border-top:1px solid var(--line); background:var(--surface-1); }
.cin textarea { flex:1; resize:none; border:1px solid var(--line); border-radius:9px; padding:8px 10px;
                font:13px/1.4 inherit; background:var(--surface-0); color:var(--ink); }
.cin button { background:var(--brand-2); color:#fff; border:none; border-radius:9px; padding:0 14px; font-size:13px; cursor:pointer; }
.cin button:disabled { opacity:.5; cursor:default; }
.cfoot { padding:6px 12px; font-size:10px; color:var(--ink-3); text-align:center; border-top:1px solid var(--line-soft); background:var(--surface-1); }

@media (max-width:640px) {
  .fab { width:72px; height:72px; }
  main { padding:14px 12px 34px; }
  .hdr { padding:10px 13px; }
}