/* ══════════════════════════════════════════════════════════════════════
   RBI Weekly Dashboard — design system
   A dense, institutional "reserve terminal" look. One accent (reserve
   gold) for interaction and identity; emerald/red stay reserved for the
   semantic up/down of markets. Light and dark themes share every token.
   ══════════════════════════════════════════════════════════════════════ */
/* Self-hosted type. Inter is one variable file covering 400-800; DM Mono is
   two static weights (400, 500) because those are the only two the page ever
   asked Google for. Both are split latin / latin-ext and keep the unicode-range
   values Google served.

   The split is not cosmetic on this site: U+20B9, the rupee sign, falls inside
   the latin-ext range, so every ₹ figure pulls the second file. Declaring only
   the latin subset would leave the rupee to a system font — on most machines a
   different face at a different advance width, in the middle of a column of
   numbers, which is exactly where it would be noticed.

   Self-hosted rather than a fonts.googleapis.com <link> for three reasons: it
   takes a third-party origin off the critical path, it stops every visitor's IP
   from being logged by someone else's CDN, and it is what lets font-src be
   'self' instead of naming two external hosts in the policy. */
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 400 800; font-display: swap; font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; src: url('fonts/dmmono-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; src: url('fonts/dmmono-400-latin-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; src: url('fonts/dmmono-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; src: url('fonts/dmmono-500-latin-ext.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{
  /* shared shape + type */
  --r2:7px;--r3:10px;--pill:999px;
  --w:1180px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs-body:14px;
  /* Motion: state changes ease 150–300ms; nothing animates layout. */
  --ease-out:cubic-bezier(.2,.9,.3,1);
}
/* ── Dark (default) ─────────────────────────────────────────────────── */
html{color-scheme:dark}
:root[data-theme="dark"]{
  --bg:#070b15;
  --surface:#0d1526;--surface2:#111c31;
  --border:rgba(148,163,184,.13);--border2:rgba(148,163,184,.28);--border3:rgba(148,163,184,.4);
  --ink:#e9eff8;--ink2:#a2b2c9;--ink3:#72829c;
  --brand:#e9b949;--brand2:#f6cf7e;--on-brand:#241a04;--brand-soft:rgba(233,185,73,.13);--brand-line:rgba(233,185,73,.4);
  --active-bg:#e9b949;--active-fg:#241a04;
  --pos:#3ecf8e;--neg:#fb7d7d;--pos-c:#2fb67c;--neg-c:#f97070;
  --warn-fg:#eec06a;--warn-bg:rgba(238,192,106,.12);
  --info-fg:#7fbdf0;--info-bg:rgba(96,165,250,.13);
  --sel:rgba(233,185,73,.32);
  --console-bg:#050910;
  --shadow-sm:0 1px 2px rgba(3,7,18,.4);
  --shadow:0 2px 10px -4px rgba(3,7,18,.55);
  --shadow-lg:0 12px 28px -12px rgba(2,5,14,.7);
  --chip-latest-bg:rgba(233,185,73,.16);--chip-latest-fg:#f2cf86;
  --row-hover:rgba(148,163,184,.06);--row-latest:rgba(233,185,73,.05);
  --chart-tick:#8b9bb4;--chart-grid:rgba(148,163,184,.09);--chart-legend:#aab8cc;
  --tt-bg:rgba(10,17,34,.97);--tt-t:#eef3fb;--tt-b:#c9d6ea;--tt-border:rgba(148,163,184,.35);
}
/* ── Light ──────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f1f3f7;
  --surface:#ffffff;--surface2:#f4f6fa;
  --border:rgba(15,30,55,.11);--border2:rgba(15,30,55,.22);--border3:rgba(15,30,55,.35);
  --ink:#101d33;--ink2:#4d5e78;--ink3:#5f7189;
  --brand:#9a5e06;--brand2:#7a4a04;--on-brand:#ffffff;--brand-soft:rgba(180,112,10,.1);--brand-line:rgba(154,94,6,.45);
  --active-bg:#d9a02c;--active-fg:#332106;
  --pos:#047857;--neg:#c22b2b;--pos-c:#10a06e;--neg-c:#e04545;
  --warn-fg:#965b00;--warn-bg:rgba(217,160,44,.16);
  --info-fg:#1d5fb0;--info-bg:rgba(37,99,235,.09);
  --sel:rgba(210,150,40,.25);
  --console-bg:#f8fafd;
  --shadow-sm:0 1px 2px rgba(16,30,55,.06);
  --shadow:0 2px 10px -6px rgba(16,30,55,.16);
  --shadow-lg:0 12px 26px -14px rgba(16,30,55,.25);
  --chip-latest-bg:rgba(180,112,10,.13);--chip-latest-fg:#7a4a04;
  --row-hover:rgba(15,30,55,.045);--row-latest:rgba(180,112,10,.05);
  --chart-tick:#64748b;--chart-grid:rgba(15,30,55,.07);--chart-legend:#5a6a82;
  --tt-bg:rgba(255,255,255,.98);--tt-t:#101d33;--tt-b:#41516a;--tt-border:rgba(15,30,55,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background-color:var(--bg);
  color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.5;
  min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--sel)}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--border3);border:2px solid transparent;background-clip:content-box}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.skip-link{position:absolute;left:-9999px;top:.5rem;z-index:300;background:var(--brand);color:var(--on-brand);
  padding:.5rem .9rem;border-radius:var(--r2);font-size:13px;font-weight:600}
.skip-link:focus{left:.5rem}

/* ─── Header quick actions (share / print / install) ─────────────────── */
.head-actions{display:inline-flex;gap:.45rem}
/* the .theme-toggle display rule would otherwise override the UA [hidden] style */
.theme-toggle[hidden]{display:none}
@media(max-width:1280px){
  .head-actions{order:1}
}

/* ─── Print: a clean report instead of a terminal ──────────────────────
   window.print() on the active tab: header chrome, logs, buttons and
   interactive bits drop out, cards keep their borders, charts print at a
   fixed height, and each card avoids being split across pages. */
@media print{
  header,#mini-bar,.fetch-panel,.nav-toggle,#log-box,details,.dl-row,.theme-toggle,.head-actions,.skip-link,#toast-zone,.new-week-badge,.macro-trends,#sentiment-row,.chart-actions,.range-row{display:none!important}
  .print-vintage{display:block!important;position:fixed;bottom:.4rem;left:0;right:0;text-align:center;font-family:var(--mono);font-size:9px;color:#555;border-top:1px solid #ccc;padding-top:.3rem}
  body{background:#fff;color:#111}
  .section{display:none;padding:0;max-width:none}
  .section.active{display:block}
  #charts{grid-template-columns:1fr}
  .chart-card,.mc,.mex,.mctx,.macro-context,.tbl-wrap,.crude-hl,.weekly-summary,.tbl-intro{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .mc:hover,.mex:hover,.mctx:hover,.chart-card:hover{box-shadow:none}
  .chart-wrap,.chart-wrap.tall,.chart-wrap.wide,.chart-wrap.compact{height:190px}
  footer{border-top:1px solid #ccc;margin-top:1rem}
  a{color:#111;text-decoration:none}
}

/* ─── Header ────────────────────────────────────────────────────────── */
header{
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:.7rem clamp(1rem,3vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  position:sticky;top:0;z-index:200;
  transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .3s,background .3s;
}
header.header-hidden{transform:translateY(-110%);box-shadow:none}
header.header-scrolled{box-shadow:var(--shadow);border-bottom-color:var(--border2)}
.logo{display:flex;align-items:center;gap:.65rem;min-width:0}
.logo-badge{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--brand);font-family:var(--mono);font-weight:500;font-size:18px;line-height:1;
}
.logo-text{min-width:0}
.logo-text h1{font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-text span{font-size:11px;color:var(--ink3);letter-spacing:.02em;font-weight:450}
.head-right{display:flex;align-items:center;gap:.55rem}
/* nav */
.nav-links{display:flex;align-items:center;gap:3px;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--r2);padding:3px}
.nav-link{
  height:32px;display:inline-flex;align-items:center;gap:.45rem;padding:0 .8rem;
  border-radius:calc(var(--r2) - 3px);font-size:12.5px;font-weight:550;letter-spacing:.01em;
  color:var(--ink2);text-decoration:none;white-space:nowrap;
  transition:background .18s,color .18s;
}
.nav-link:hover{background:var(--row-hover);color:var(--ink)}
.nav-link.active{background:var(--active-bg);color:var(--active-fg)}
.nav-link .lucide{width:15px;height:15px;flex-shrink:0}
/* icon buttons */
.theme-toggle{
  width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r2);border:1px solid var(--border);background:var(--surface2);color:var(--ink2);
  cursor:pointer;transition:color .18s,border-color .18s,background .18s;
}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}
/* status pill */
.status-pill{
  height:34px;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--pill);
  padding:0 .8rem 0 .65rem;font-size:12px;font-weight:500;color:var(--ink2);white-space:nowrap;
}
.status-pill .lucide{width:13px;height:13px;color:var(--ink3)}
/* Compact data-freshness mirror of #status-text for dot-only phones */
#fresh-text{display:none;font-variant-numeric:tabular-nums}
.status-pill.stale #status-text,.status-pill.stale #fresh-text{color:var(--warn-fg)}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex-shrink:0;transition:background .3s}
.status-pill .dot.running{background:var(--warn-fg);animation:blink 1.1s ease-in-out infinite}
.status-pill .dot.done{background:var(--pos)}
.status-pill .dot.error{background:var(--neg)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ─── Sections ───────────────────────────────────────────────────────── */
.section{display:none;max-width:var(--w);margin:0 auto;padding:1.5rem clamp(1rem,3vw,2rem) 2.6rem}
.section.active{display:block}

/* ─── Shared surface ─────────────────────────────────────────────────── */
.note-strip,.fetch-panel,.weekly-summary,.tbl-intro,.tbl-wrap,.chart-card,
.macro-context,.mex,.mctx,.mc{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);
  box-shadow:var(--shadow-sm);
}

/* ─── Note / callout banner ──────────────────────────────────────────── */
.note-strip{
  display:flex;gap:.7rem;align-items:flex-start;
  background:var(--brand-soft);border-color:var(--brand-line);
  border-left:3px solid var(--brand);
  padding:.7rem .9rem;margin-bottom:1.1rem;font-size:12.5px;line-height:1.6;
  color:var(--ink);
  color:color-mix(in srgb,var(--ink) 88%,var(--brand));
}
.note-strip .lucide{width:15px;height:15px;color:var(--brand);flex-shrink:0;margin-top:2px}
.note-strip strong{font-weight:650;color:var(--ink)}
.accent-link{color:var(--brand);text-decoration:none;font-weight:550}
.accent-link:hover{text-decoration:underline}

/* ─── Fetch / console panel ─────────────────────────────────────────── */
.fetch-panel{padding:1rem 1.1rem;margin-bottom:1.1rem;display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.panel-label{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
  display:block;margin-bottom:.55rem}
.fetch-panel .panel-label{flex:1 1 100%;margin-bottom:0}
#log-box{
  background:var(--console-bg);border:1px solid var(--border);border-radius:var(--r2);
  padding:.6rem .85rem;height:118px;overflow-y:auto;flex:1 1 300px;
  font-family:var(--mono);font-size:11px;line-height:1.85;color:var(--ink2);
}
#log-box .ok{color:var(--pos);font-weight:500}
#log-box .err{color:var(--neg)}
#log-box .warn{color:var(--warn-fg)}
.ok{color:var(--pos)}
.err{color:var(--neg)}
.warn{color:var(--warn-fg)}

/* ─── Compare-any-two-weeks ─────────────────────────────────── */
.cmp-picker{
  display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);
  box-shadow:var(--shadow-sm);padding:1rem 1.1rem;margin-bottom:1.1rem;
}
.cmp-pick{min-width:200px;flex:1 1 200px}
.cmp-pick .panel-label{margin-bottom:.45rem}
.cmp-select{
  width:100%;height:38px;padding:0 .7rem;border-radius:var(--r2);
  background:var(--surface2);border:1px solid var(--border2);color:var(--ink);
  font-family:var(--font);font-size:13px;font-weight:550;cursor:pointer;
  transition:border-color .18s;
}
.cmp-select:hover{border-color:var(--brand-line)}
.cmp-select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.cmp-quick{display:inline-flex;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r2);padding:3px}
.cmp-summary{font-size:13.5px;color:var(--ink2);line-height:1.75;margin-bottom:1.1rem}
.cmp-summary strong{color:var(--ink);font-weight:600}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:.7rem;margin-bottom:.4rem}
.cmp-delta-big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:500;margin-top:.45rem;letter-spacing:-.01em}
.cmp-delta-big .pct{font-size:11px;color:var(--ink3);margin-left:.3rem;font-weight:400}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn{
  height:36px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:0 1.05rem;background:var(--active-bg);color:var(--active-fg);
  border:none;border-radius:var(--r2);font-family:var(--font);font-size:13px;font-weight:650;
  letter-spacing:.01em;cursor:pointer;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{filter:brightness(.95)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn .lucide{width:15px;height:15px}
.dl{
  height:32px;display:inline-flex;align-items:center;gap:.5rem;padding:0 .85rem;
  background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r2);
  color:var(--ink2);font-family:var(--font);font-size:12.5px;font-weight:550;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.dl:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}
.dl:active{opacity:.85}
a.dl{text-decoration:none}
.dl .lucide{width:14px;height:14px}
.dl-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
html{-webkit-tap-highlight-color:transparent}
.nav-link,.btn,.dl,.tab,.src-link,.theme-toggle{touch-action:manipulation}

/* ─── Intro copy block ─────────────────────────────────────────────── */
.tbl-intro{padding:1rem 1.1rem;margin-bottom:1.1rem}
.tbl-intro p{font-size:13px;color:var(--ink2);line-height:1.7}
.tbl-intro strong{color:var(--ink);font-weight:600}
.tbl-intro a{color:var(--brand)}
#crude-fetch-status{margin-top:.55rem;font-size:12px;font-weight:550;font-family:var(--mono)}
#crude-fetched-at{font-size:10.5px;color:var(--ink3);display:block;margin-top:.25rem;font-family:var(--mono)}

/* ─── Weekly summary ────────────────────────────────────────────────── */
.weekly-summary{
  padding:1rem 1.15rem;margin-bottom:1.1rem;display:none;
  border-left:3px solid var(--brand);
}
.weekly-summary.show{display:block}
.weekly-summary p{font-size:13.5px;color:var(--ink2);line-height:1.75}
.weekly-summary strong{color:var(--ink);font-weight:600}
.weekly-summary .lucide{width:15px;height:15px;color:var(--brand);flex-shrink:0;margin-top:2px}
.weekly-summary .panel-label{display:flex;gap:.5rem;align-items:center;color:var(--brand);margin-bottom:.5rem;text-transform:none;letter-spacing:.01em;font-size:12px}

/* ─── Glossary dotted hints ─────────────────────────────────────────── */
[data-glossary]{border-bottom:1px dotted var(--border3);cursor:help;position:relative}
[data-glossary]:hover::after{
  content:attr(data-glossary);position:absolute;left:0;top:calc(100% + 8px);z-index:500;
  background:var(--tt-bg);color:var(--tt-b);border:1px solid var(--tt-border);border-radius:var(--r2);
  padding:.6rem .8rem;font-size:11.5px;font-weight:400;line-height:1.6;width:max-content;max-width:min(320px,80vw);
  box-shadow:var(--shadow);white-space:normal;text-transform:none;letter-spacing:0;font-family:var(--font);
}

/* ─── Metric cards (shared .mc + .mctx + .mex) ──────────────────────── */
#metrics,.pm-metrics,.kpi-grid,.metric-extra-row,.mc-grid,.crude-hl-grid{
  display:grid;gap:.7rem;
}
#metrics{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:1.25rem;opacity:0}
.pm-metrics{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:1.1rem}
.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:1rem}
.metric-extra-row{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:0 0 1.1rem;opacity:0}
.mc-grid{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
#metrics.show{opacity:1}.metric-extra-row.show{opacity:1}
.mc,.mctx,.mex{
  padding:.85rem .95rem;position:relative;transition:border-color .18s;
}
.mc:hover,.mctx:hover,.mex:hover{border-color:var(--border2)}
.mc-label,.mctx-label,.mex-label,.crude-hl-label{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);
  margin-bottom:.45rem;
}
.mctx-label{margin-bottom:.35rem}
.mc-val,.mctx-val,.mex-val,.crude-hl-val{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:17.5px;font-weight:500;line-height:1.3;color:var(--ink);letter-spacing:-.02em;
}
.mex-val{font-size:19px}
.mc-sub,.mctx-sub{font-size:10.5px;color:var(--ink3);margin-top:.3rem;font-family:var(--mono);letter-spacing:0}
.mex-detail{font-size:10px;color:var(--ink3);margin-top:.35rem;font-family:var(--mono)}
.mc-delta{font-size:11px;margin-top:.45rem;font-family:var(--mono);font-weight:500;letter-spacing:-.01em}
.mc-delta .w52{color:var(--ink3);font-weight:400;letter-spacing:0}
/* KPI sparkline: a tiny trend line under each headline card */
.mc canvas.spark{display:block;width:100%;height:26px;margin-top:.4rem}
.up{color:var(--pos)}
.dn{color:var(--neg)}
.mctx-sub{font-family:var(--font);font-size:11px}

/* volatility pill */
.vol-pill{display:inline-block;padding:1px 8px;border-radius:var(--pill);font-size:10px;font-weight:600;font-family:var(--mono);margin-left:.35rem}
.vol-pill.low{background:var(--info-bg);color:var(--info-fg)}
.vol-pill.med{background:var(--warn-bg);color:var(--warn-fg)}
.vol-pill.high{background:rgba(233,64,64,.14);color:var(--neg)}

/* ─── Macro context ─────────────────────────────────────────────────── */
.macro-context{padding:1.05rem 1.1rem;margin-bottom:1.1rem}
.macro-context h3{font-size:12px;font-weight:650;letter-spacing:.01em;color:var(--ink);margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.macro-context h3 .lucide{width:14px;height:14px;color:var(--brand)}
.mctx{background:var(--surface2);border-radius:var(--r2)}
.mctx:hover{background:var(--surface);border-color:var(--border2)}

/* ─── Charts ────────────────────────────────────────────────────────── */
#charts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:1rem;opacity:0;
}
#charts.show{opacity:1}
#charts .chart-card.span2{grid-column:1/-1}
.chart-card{padding:1.05rem 1.1rem;margin-bottom:1rem;transition:border-color .18s}
.chart-card:hover{border-color:var(--border2)}
#charts .chart-card{margin-bottom:0}
.chart-hdr{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-bottom:.8rem}
.chart-actions{display:flex;gap:.35rem;flex-shrink:0}

.chart-title{font-size:13.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.chart-note{font-size:11px;color:var(--ink3);margin-top:.15rem}
.chart-wrap{position:relative;height:225px}
.chart-wrap.tall{height:250px}
.chart-wrap.wide{height:290px}
.chart-wrap.compact{height:215px}

/* chart mode tabs */
.tab-row{display:inline-flex;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r2);padding:3px;width:fit-content;max-width:100%;overflow-x:auto;margin-bottom:.75rem}
.tab{
  height:28px;padding:0 .75rem;display:inline-flex;align-items:center;border-radius:calc(var(--r2) - 4px);
  font-size:12px;font-weight:550;letter-spacing:.01em;cursor:pointer;border:none;background:transparent;
  color:var(--ink2);font-family:var(--font);transition:background .18s,color .18s;
}
.tab:hover:not(.on){color:var(--ink);background:var(--row-hover)}
.tab.on{background:var(--active-bg);color:var(--active-fg)}
.tab .lucide{width:13px;height:13px;margin-right:.3rem;vertical-align:-2px}

/* ─── Empty states ──────────────────────────────────────────────────── */
#empty{text-align:center;padding:3.5rem 1.5rem;color:var(--ink3)}
#empty h2{font-size:17px;font-weight:650;color:var(--ink);margin-bottom:.4rem}
#empty p{font-size:13px;line-height:1.65;max-width:430px;margin:.5rem auto 0}
#empty code{font-family:var(--mono);font-size:12px;background:var(--surface2);padding:.1rem .35rem;border-radius:5px;border:1px solid var(--border)}
.tbl-empty{text-align:center;padding:2.8rem 1rem;color:var(--ink3);font-size:13px}

/* ─── Tables ────────────────────────────────────────────────────────── */
.tbl-wrap{overflow:hidden;margin-bottom:1.1rem}
.tbl-wrap.mt1{margin-top:1rem}.tbl-wrap.mt125{margin-top:1.25rem}
.tbl-header{
  padding:.85rem 1.1rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}
.tbl-header h2{font-size:13.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.tbl-header span{font-size:11px;color:var(--ink3);font-family:var(--mono)}
.tbl-header .hdr-actions span{font-family:var(--font);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;font-weight:600;color:var(--ink3)}
.hdr-actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.tbl-header .hdr-actions .panel-label{margin:0;display:inline-flex;align-items:center;gap:.4rem}
.tbl-scroll{overflow-x:auto}
.tbl-scroll.hidden{display:none}
.mt1{margin-top:1rem}.mt125{margin-top:1.25rem}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.tbl-scroll table{min-width:640px}
#crude-daily-container table{min-width:0}
thead th{
  background:var(--surface2);color:var(--ink2);
  padding:.62rem .9rem;text-align:left;font-size:10.5px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--border);
}
thead th:not(:first-child){text-align:right}
thead th.th-group{text-align:center;border-left:1px solid var(--border)}
thead th.th-sep{border-left:1px solid var(--border)}
tbody tr{border-bottom:1px solid transparent;transition:background .15s}
tbody tr+tr{border-top:1px solid var(--border)}
tbody tr:hover{background:var(--row-hover)}
tbody tr.latest-row{background:var(--row-latest)}
tbody tr.latest-row td.date-cell{box-shadow:inset 3px 0 0 var(--brand)}
/* Sticky table headers: tall (26/52-week) tables keep their column labels
   visible while scrolling. Border acts as the bottom edge (border-collapse). */
.tbl-scroll table{border-collapse:separate;border-spacing:0}
.tbl-scroll thead th{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--border2)}
.tbl-scroll thead th.th-group{top:0}
table th[title]{cursor:help}

/* Date-range filter row on the weekly tables */
.range-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.range-row input[type="date"]{
  height:30px;padding:0 .5rem;border-radius:var(--r2);border:1px solid var(--border2);
  background:var(--surface2);color:var(--ink);font-family:var(--mono);font-size:11.5px;
}
.range-row label{font-size:11px;color:var(--ink3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.range-row .range-clear{font-size:11px}

.print-vintage{display:none}

td{padding:.58rem .9rem;color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px}
td:not(:first-child){text-align:right}
td.num{text-align:right}
td.date-cell{font-family:var(--font);font-size:12.5px;font-weight:550;color:var(--ink);white-space:nowrap}
td.date-cell a{color:var(--ink);text-decoration:none;font-weight:550}
td.date-cell a:hover{color:var(--brand);text-decoration:underline}
td.note-cell{font-size:11px;color:var(--ink2);font-family:var(--font);text-align:left;white-space:normal;min-width:230px;line-height:1.55}
.tbl-empty-cell{text-align:center;color:var(--ink3);font-family:var(--font)}
.latest-badge{
  display:inline-block;margin-left:.45rem;padding:1px 7px;border-radius:var(--pill);
  background:var(--chip-latest-bg);color:var(--chip-latest-fg);
  font-size:9px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;font-family:var(--font);vertical-align:1px;
}
.cell-group{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.2}
.cell-main{font-size:12px}
.cell-delta{font-size:10px;color:var(--ink3)}
.cell-delta.up{color:var(--pos)}
.cell-delta.dn{color:var(--neg)}
td.date-cell .cell-group{align-items:flex-start}
/* chip columns in the PM CARES table */
.cal-chip,.rel-chip{
  display:inline-block;padding:2px 10px;border-radius:var(--pill);
  font-weight:600;font-size:11px;cursor:help;font-family:var(--mono);
}
.cal-chip{background:var(--info-bg);color:var(--info-fg)}
.rel-chip{background:var(--warn-bg);color:var(--warn-fg)}

/* ─── Crude section bits ────────────────────────────────────────────── */
.crude-hl{
  margin-top:1.4rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r3);box-shadow:var(--shadow-sm);overflow:hidden;
}
.crude-hl .tbl-header{border-bottom:1px solid var(--border)}
.crude-hl-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:.9rem 1.1rem}
.crude-hl-item{border-left:1px solid var(--border);padding:0 .9rem}
.crude-hl-item:first-child{border-left:none;padding-left:0}
.crude-hl-val{font-size:17px}
.crude-hl-sub{font-size:10px;color:var(--ink3);margin-top:.3rem;font-family:var(--mono);line-height:1.5}
.crude-hl-note{font-size:11px;color:var(--ink3);margin-top:.8rem;padding:0 1.1rem .9rem}
.chart-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin:0}
.chart-pair .chart-card{margin-bottom:0}
.crude-note{font-size:11px;color:var(--ink3);margin-top:1rem;font-family:var(--mono);line-height:1.7}
.crude-glossary{margin-top:1rem;font-size:11px;color:var(--ink2);border-top:1px solid var(--border);padding-top:.8rem;line-height:1.9}
.crude-glossary strong{color:var(--ink3);font-weight:600}
#events-last-note,.events-note{font-size:10.5px;color:var(--ink3);margin-bottom:.6rem;font-family:var(--mono)}
.events-note{margin:0}
.kpi-msg{grid-column:1/-1;font-size:12.5px;color:var(--ink3);padding:.4rem 0}
.kpi-msg.err{color:var(--neg)}

/* ─── Footer ────────────────────────────────────────────────────────── */
footer{max-width:var(--w);margin:1rem auto 0;padding:1.4rem clamp(1rem,3vw,2rem) 2.6rem;border-top:1px solid var(--border)}
footer h3{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:.9rem}
.src-links{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.1rem;align-items:flex-start}
.src-link{
  display:inline-flex;align-items:center;gap:.5rem;font-size:13px;color:var(--brand);
  text-decoration:none;font-weight:550;transition:color .15s;
}
.src-link:hover{color:var(--brand2);text-decoration:underline}
.src-link svg{width:13px;height:13px;flex-shrink:0}
.src-link.last-week{
  border:1px solid var(--border2);background:var(--surface2);border-radius:var(--r2);
  padding:0 .9rem;height:32px;font-size:12.5px;font-weight:550;
}
.src-link.last-week:hover{background:var(--brand-soft);border-color:var(--brand-line);box-shadow:none}
footer p{font-size:11.5px;color:var(--ink3);line-height:1.7;max-width:760px;font-family:var(--mono)}

/* ═══════════ Responsive ═══════════ */
@media(max-width:1024px){
  .tab{height:32px}
  .dl,.btn{height:36px}
  .nav-link{height:34px}
}

/* ─── Collapsible header + hamburger (≤1280) ──────────────────────────
   The desktop row (logo + 5-link nav + action buttons + status pill) needs
   ≈1130px to render without flex-crushing the logo or clipping the pill —
   below 1280 the hamburger two-row layout takes over. */
.nav-toggle{display:none}
@media(max-width:1280px){
  header{gap:.55rem;flex-wrap:wrap;padding-top:.6rem;padding-bottom:.6rem}
  .logo{order:1}
  .logo-text span{display:none}
  .head-right{order:2;width:100%;min-width:0;display:flex;flex-wrap:wrap;gap:.5rem}
  .nav-toggle{
    order:1;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:4.5px;
    width:36px;height:36px;padding:0;flex-shrink:0;
    background:var(--surface2);border:1px solid var(--border);border-radius:var(--r2);cursor:pointer;
    transition:background .2s,border-color .2s;
  }
  .nav-toggle:hover{background:var(--brand-soft);border-color:var(--brand-line)}
  .nav-toggle span{display:block;width:17px;height:2px;background:var(--ink2);border-radius:2px;
    transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s,background .2s}
  header.nav-open .nav-toggle span{background:var(--brand)}
  header.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  header.nav-open .nav-toggle span:nth-child(2){opacity:0}
  header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .status-pill{order:2;margin-left:auto}
  .nav-links{
    order:5;width:100%;flex:1 1 100%;min-width:0;display:none;
    margin-top:.15rem;background:transparent;border:none;padding:0;
  }
  header.nav-open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:4px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:.45rem;
    box-shadow:var(--shadow)}
  header.nav-open .nav-links .nav-link{white-space:nowrap}
  .nav-links .nav-link{width:100%;height:42px;padding:0 .7rem;justify-content:flex-start;border-radius:var(--r2)}
  .nav-links .nav-link.active{background:var(--brand-soft);color:var(--brand2);box-shadow:none;border:1px solid var(--brand-line)}
}

@media(max-width:780px){
  .section,footer{padding:.9rem 1rem 2rem}
  header{padding:.55rem 1rem}
  table{font-size:11.5px}
  td,thead th{padding:.5rem .6rem}
  .chart-card,.mc,.mex,.mctx,.macro-context,.fetch-panel,.weekly-summary,.tbl-intro,.tbl-wrap,.tbl-header{padding-left:14px;padding-right:14px}
  #charts{grid-template-columns:1fr}
  #charts .chart-card.span2{grid-column:auto}
  .tbl-header h2{font-size:13px}
  .tbl-header span{display:block;width:100%}
  #crude-fetch-status,.crude-hl-note{font-size:10.5px}
  .chart-card,.crude-hl{overflow:hidden}
}

/* small phones */
@media(max-width:430px){
  .status-pill{padding:0 .6rem 0 .5rem;font-size:11.5px}
  .tab-row{flex-wrap:wrap;width:100%}
  .logo-badge{width:31px;height:31px;border-radius:8px;font-size:16px}
  .logo-text h1{font-size:13.5px}
  .tbl-header{padding:.7rem 12px}
  .mc,.mctx,.mex{padding:.8rem}
  .mc-val,.mctx-val,.mex-val,.crude-hl-val{font-size:16px}
  #metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .chart-wrap{height:215px}
  .crude-hl-item{border-left:none;border-top:1px solid var(--border);padding:.75rem 0 0;margin-top:.6rem}
  .crude-hl-item:first-child{border-top:none;margin-top:0}
}

/* ─── 3D reserves ridge (lazy Three.js view) ─────────────────────────
   Hidden panel inside the reserves chart card. The canvas gets a fixed
   height so opening it never shifts layout (CLS-safe); the fallback note
   shows only when WebGL is unavailable. */
.ridge-wrap{display:none;margin-top:.75rem}
.ridge-wrap.open{display:block}
.ridge-stage{position:relative;height:260px;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--surface2)}
.ridge-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.ridge-note{font-size:11px;color:var(--ink3);margin-top:.4rem}
.ridge-close{margin-top:.5rem}

/* ─── Collapsible pipeline log + read-more notes ────────────────────
   The fetch console and the long methodology notes ship collapsed so
   first paint is content, not ops text. Native <details> = no JS, full
   keyboard + screen-reader support. */
details.pipe-log{flex:1 1 100%;margin-top:.2rem}
details.pipe-log summary,
details.read-more summary{
  cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);list-style:none;
  display:inline-flex;align-items:center;gap:.35rem;
  border-radius:6px;padding:.3rem .1rem;
}
details.pipe-log summary::-webkit-details-marker,
details.read-more summary::-webkit-details-marker{display:none}
details.pipe-log summary::before,
details.read-more summary::before{content:"+";font-family:var(--mono);color:var(--brand)}
details.pipe-log[open] summary::before,
details.read-more[open] summary::before{content:"–"}
details.pipe-log summary:hover,
details.read-more summary:hover{color:var(--ink)}
details.read-more{margin-top:.45rem}
details.read-more .chart-note{margin-top:.35rem}

/* ─── Chart empty states ────────────────────────────────────────────
   Shown instead of a blank canvas box when a feed has no data yet, so an
   unreachable endpoint reads as "pending", never as "broken". */
.chart-empty{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:180px;padding:1.2rem;border:1px dashed var(--border2);
  border-radius:var(--r2);color:var(--ink3);font-size:12.5px;line-height:1.6;
}

/* Fear & Greed gauge card: doughnut-gauge left, verdict + signal bars right.
   Colors are hard-coded signal greens/reds on purpose — sentiment zones must
   read identically in both themes (the gauge chrome reads theme vars at draw). */
.fng-flex{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.fng-gauge{width:220px;max-width:44%;flex-shrink:0}
.fng-cv{position:relative;height:118px}
.fng-scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink3);padding:0 .3rem}
.fng-side{flex:1;min-width:230px}
.fng-verdict{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fng-verdict #fng-label{font-size:1.45rem;font-weight:750;letter-spacing:-.01em}
.fng-chip{
  font-size:11px;font-weight:700;padding:.18rem .5rem;border-radius:99px;
  color:#fff;background:var(--ink3);letter-spacing:.02em;
}
.fng-chip.up{background:var(--pos-c)}
.fng-chip.dn{background:var(--neg-c)}
.fng-meta{font-size:12px;color:var(--ink3);margin:.25rem 0 .7rem}
.fng-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.fng-bars li{display:grid;grid-template-columns:minmax(150px,1.25fr) 1fr auto;gap:.6rem;align-items:center;font-size:12px}
.fng-bars .fl{color:var(--ink2);line-height:1.35}
.fng-bars .fb{height:7px;border-radius:99px;background:var(--border2);overflow:hidden;position:relative}
.fng-bars .fb i{position:absolute;top:0;bottom:0;border-radius:99px;width:var(--w,0%);background:var(--c,transparent)}
.fng-bars .fb::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1.5px;background:var(--ink3);opacity:.55}
.fng-bars .fs{min-width:4.2em;text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
@media (max-width:640px){
  .fng-bars li{grid-template-columns:1fr 70px auto;gap:.45rem}
  .fng-bars .fl{font-size:11.5px}
}
.chart-empty[hidden]{display:none}

/* ─── Sticky mini-bar ───────────────────────────────────────────────
   Three headline numbers that persist while scrolling the charts, plus a
   freshness badge. Top offset is measured from the sticky header in JS
   (header height varies by breakpoint), so CSS only declares stickiness. */
#mini-bar{
  position:sticky;z-index:150;
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);box-shadow:var(--shadow-sm);
  padding:.5rem .95rem;margin-bottom:1rem;font-size:12.5px;
}
#mini-bar[hidden]{display:none}
.mini-item{display:inline-flex;align-items:baseline;gap:.4rem;white-space:nowrap}
.mini-label{color:var(--ink3);font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.mini-val{font-family:var(--mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.mini-fresh{margin-left:auto;font-size:11px;color:var(--ink3);white-space:nowrap}
.mini-fresh.stale{color:var(--warn-fg);font-weight:650}

/* ─── New-week toast + header badge ─────────────────────────────
   When the live check merges a newer RBI week, say so out loud: a
   slide-in toast (auto-dismisses) plus a small header badge that
   persists until clicked. Clicking either jumps to the dashboard. */
#toast-zone{position:fixed;right:1rem;bottom:1rem;z-index:400;display:flex;flex-direction:column;gap:.5rem;max-width:min(360px,calc(100vw - 2rem))}
.new-week-toast{
  display:flex;gap:.6rem;align-items:flex-start;
  background:var(--surface);border:1px solid var(--brand-line);border-left:3px solid var(--brand);
  border-radius:var(--r2);box-shadow:var(--shadow-lg);padding:.7rem .8rem;
  cursor:pointer;animation:toastIn .35s var(--ease-out) both;
}
.new-week-toast.leaving{animation:toastOut .25s ease-in both}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(6px)}}
.new-week-toast>div{min-width:0}
.new-week-toast .lucide{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:2px}
.new-week-toast strong{display:block;font-size:12.5px;color:var(--ink);font-weight:650}
.new-week-toast span{display:block;font-size:11.5px;color:var(--ink2);line-height:1.55;margin-top:.15rem}
.new-week-toast .toast-x{
  margin-left:auto;flex-shrink:0;border:none;background:none;color:var(--ink3);cursor:pointer;
  font-size:14px;line-height:1;padding:2px 5px;border-radius:6px;font-family:var(--font);
}
.new-week-toast .toast-x:hover{color:var(--ink);background:var(--row-hover)}
.new-week-badge{
  height:34px;display:inline-flex;align-items:center;gap:.4rem;padding:0 .75rem;
  background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--pill);
  color:var(--brand2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .18s,border-color .18s;
}
.new-week-badge:hover{background:var(--brand-line)}
.new-week-badge .lucide{width:13px;height:13px}
.new-week-badge[hidden]{display:none}
@media(max-width:1280px){
  .new-week-badge{order:2}
}

/* Macro strip collapse toggle */
.macro-context h3{justify-content:space-between;flex-wrap:wrap;row-gap:.4rem}
/* Page-level guard: one wide child (e.g. an unwrapped h3 row) must never
   widen the whole page on phones; inner table scroll containers are
   unaffected. overflow-x:clip (not hidden) keeps sticky positioning working. */
html,body{overflow-x:clip}
.macro-context.collapsed .mc-grid{display:none}

/* Panel titles must wrap instead of clipping on narrow screens: flex items
   default to min-width:auto, which blocks shrinking (note + fetch title
   ran off the edge at 390px). */
.fetch-panel .panel-label{white-space:normal;min-width:0}
.note-strip>div{min-width:0}
.macro-context h3>span{min-width:0}

/* ─── Small phones: dot-only status, relaxed tab rows ─────────────── */
@media(max-width:430px){
  #status-text{display:none}
  #fresh-text{display:inline;font-size:11px}
  .status-pill{padding:0 .55rem}
}

/* Coarse pointers get a 44px touch target on chart tabs without changing
   the dense desktop layout (design-audit: touch & interaction). */
@media(pointer:coarse){
  .tab{min-height:44px}
}

/* ═══════════ Reduced motion ═══════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot.running{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ═══════════ State and layout classes that replaced style attributes ═══
   Both used to be style="…" in the markup, which the CSP (style-src 'self',
   no 'unsafe-inline') now refuses. .is-hidden is declared after .tab-row so
   that, at equal specificity, none wins for the initially-hidden EM row. */
.is-hidden{display:none}
.range-inset{padding:0 1.1rem}