/* The new Grove wrapper (Oct 27, 2026): Grove v2, every panel and control unchanged, in the Grove v3 look, at /?grove=v3.
   Only under <html data-pal="g">, so no other page changes. Served as is (not through the theme repaint). */
html[data-pal=g]{--w-page:#0e0e0e;--w-panel:#1a1a1a;--w-hover:#262626;--w-sel:#2e2e2e;--w-line:rgba(255,255,255,.1);--w-line2:rgba(255,255,255,.18);--w-grid:rgba(255,255,255,.055);--w-ink:#f4f4f4;--w-mut:rgba(255,255,255,.72);--w-dim:rgba(255,255,255,.45);--w-acc:#f7931a}
html[data-pal=g][data-theme=light]{--w-page:#f3f3f1;--w-panel:#fff;--w-hover:#ececea;--w-sel:#e6e6e3;--w-line:rgba(0,0,0,.09);--w-line2:rgba(0,0,0,.16);--w-grid:rgba(0,0,0,.06);--w-ink:#141414;--w-mut:rgba(0,0,0,.66);--w-dim:rgba(0,0,0,.45);--w-acc:#e07f0e}
html[data-pal=g],html[data-pal=g] body{background:var(--w-page)}
html[data-pal=g] body{font-family:Inter,system-ui,sans-serif!important;letter-spacing:.15px;-webkit-font-smoothing:antialiased}
html[data-pal=g] [style*="border-radius: 10px"],html[data-pal=g] [style*="border-radius: 12px"],html[data-pal=g] [style*="border-radius: 8px"],html[data-pal=g] [style*="border-radius: 6px"]{border-radius:4px!important}

/* ---------- the price tape at the very top, then the top bar: logo, search, theme, account (Oct 28: no main nav row; the
   sidebar is the navigation) ---------- */
html[data-pal=g] header:has(> div.par-header-inner){display:flex!important;flex-direction:column;background:var(--w-page)!important;border-bottom:0!important}
html[data-pal=g] header:has(> div.par-header-inner) > div.par-header-inner{order:2;height:48px;padding:0 18px!important;gap:20px!important;flex-wrap:nowrap!important;border-bottom:1px solid var(--w-line);background:var(--w-page)}
/* the logo: the original one (document mark, ORANGE PAPER, "Digital credit terminal"), kept on the new look (Oct 29) */
html[data-pal=g] header:has(> div.par-header-inner) a[aria-label="Orange Paper home"]{flex:0 0 auto!important;min-height:0!important;gap:8px!important}
html[data-pal=g] header:has(> div.par-header-inner) label.par-search{margin-left:auto!important;flex:0 0 190px!important;min-width:0!important;min-height:0!important;height:30px;border:1px solid var(--w-line)!important;border-radius:4px!important;background:transparent!important;cursor:pointer}
html[data-pal=g] header:has(> div.par-header-inner) label.par-search input{min-height:0!important;cursor:pointer}
html[data-pal=g] header:has(> div.par-header-inner) #op-theme{width:30px!important;height:30px!important;border-radius:4px!important;border-color:var(--w-line)!important;margin-left:0!important}
html[data-pal=g] header:has(> div.par-header-inner) div.par-header-inner > div:last-child{flex:0 0 auto!important;gap:8px!important}
html[data-pal=g] header:has(> div.par-header-inner) a[href*="mode=login"]{min-height:30px!important;height:30px;padding:0 11px!important;border:1px solid var(--w-line2)!important;border-radius:4px!important;font-weight:400!important;font-size:14px!important}
html[data-pal=g] header:has(> div.par-header-inner) a[href="/login"],html[data-pal=g] header:has(> div.par-header-inner) a[href*="mode=signup"]{min-height:30px!important;height:30px;padding:0 11px!important;border-radius:4px!important;background:var(--w-acc)!important;color:#111!important;font-weight:500!important;font-size:14px!important}
html[data-pal=g] header:has(> div.par-header-inner) > div[aria-label="Live prices"]{order:1;background:var(--w-page)!important;border-bottom:1px solid var(--w-line)!important}
html[data-pal=g] header:has(> div.par-header-inner) > div[aria-label="Live prices"] > div > button[title^="Data status"]{display:none!important}   /* Oct 28: no status dot in the tape */
html[data-pal=g] header:has(> div.par-header-inner) > div[aria-label="Live prices"] > div{min-height:32px!important;gap:0!important;padding:0 6px!important}
html[data-pal=g] header:has(> div.par-header-inner) > div[aria-label="Live prices"] a{min-height:32px!important;padding:0 16px;border-right:1px solid var(--w-line);font-size:12px!important;gap:7px!important}
html[data-pal=g] header:has(> div.par-header-inner) > div[aria-label="Live prices"] a > span:first-child{color:var(--w-mut)!important;font-weight:500!important;font-size:11px!important;letter-spacing:.3px}
html[data-pal=g] header:has(> div.par-header-inner) > div[aria-label="Live prices"] > div > span:last-child,html[data-pal=g] header:has(> div.par-header-inner) > div[aria-label="Live prices"] > div > span[style*="margin-left: auto"]{padding-left:16px;color:var(--w-dim)!important;font-size:11px}
@media(max-width:980px){html[data-pal=g] header:has(> div.par-header-inner) label.par-search{display:none!important}html[data-pal=g] header:has(> div.par-header-inner) div.par-header-inner > div:last-child{margin-left:auto!important}}
@media(max-width:640px){html[data-pal=g] header:has(> div.par-header-inner) a[href*="mode=login"]{display:none!important}html[data-pal=g] header:has(> div.par-header-inner) > div.par-header-inner{height:auto;min-height:48px;padding:6px 12px!important;flex-wrap:wrap!important}}

/* ---------- left sidebar ---------- */
/* the search dialog lives in the sidebar: keep the sidebar above the page so the dialog shows over it */
html[data-pal=g] .op-side > div{z-index:50}
html[data-pal=g] .op-side{background:var(--w-page)!important;border-right:1px solid var(--w-line)!important}
html[data-pal=g] .op-side *{border-color:var(--w-line)}
html[data-pal=g] .op-side nav.opn{font-family:Inter,system-ui,sans-serif!important;background:var(--w-page)!important}
html[data-pal=g] .op-side nav.opn > div:first-child > a{font:600 15px Inter,system-ui,sans-serif!important;color:var(--w-ink)!important}
html[data-pal=g] .op-side nav.opn > div:first-child > a svg{display:none}
html[data-pal=g] .op-side nav.opn > div:first-child > a::before{content:"The Grove";font:600 15px Inter,system-ui,sans-serif}
html[data-pal=g] .op-side nav.opn > div:first-child > a{font-size:0!important}
html[data-pal=g] .op-side a.opn-row{border-radius:4px!important;padding:5px 8px!important;min-height:0!important;font-size:13.5px!important;font-weight:400!important;color:var(--w-mut)!important;border:0!important;box-shadow:none!important;background:transparent!important}
html[data-pal=g] .op-side a.opn-row:hover{color:var(--w-ink)!important}
html[data-pal=g] .op-side a.opn-row[aria-current="page"]{background:var(--w-hover)!important;color:var(--w-ink)!important}
html[data-pal=g] .op-side a.opn-row span{font-weight:400!important}
html[data-pal=g] .op-side a.opn-row span + span{color:var(--w-dim)!important;font-size:11px!important}
html[data-pal=g] .op-side div[aria-label="Markets"] a.opn-row span:first-child{color:var(--w-ink)!important;font-weight:500!important}
html[data-pal=g] .op-side div[aria-label="Markets"] a.opn-row span:last-child{font-size:12px!important}
html[data-pal=g] .op-side div[aria-label="Markets"] > div:first-child,html[data-pal=g] .op-side button.opn-gh{margin-top:14px!important;padding:14px 8px 6px!important;border-top:1px solid var(--w-line)!important;font:500 10.5px 'IBM Plex Mono',monospace!important;letter-spacing:1px!important;text-transform:uppercase;color:var(--w-dim)!important;background:transparent!important}
html[data-pal=g] .op-side div[aria-label="Markets"] > div:first-child span{font:inherit!important;color:inherit!important}
html[data-pal=g] .op-side nav.opn > button{height:30px;min-height:0!important;border:1px solid var(--w-line)!important;border-radius:4px!important;background:transparent!important;color:var(--w-dim)!important;font-size:13px!important}
.g3sec{display:block;padding:4px 8px 4px 18px!important;border-radius:4px;color:var(--w-mut);font:400 13px Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer}
.g3sec:hover{color:var(--w-ink)}.g3sec.on{background:var(--w-hover);color:var(--w-ink)}

/* ---------- every card: the v3 card frame ---------- */
html[data-pal=g] section[data-wid]:not(.op-sec){background:var(--w-panel)!important;border:1px solid var(--w-line)!important;border-radius:4px!important;box-shadow:none!important}
html[data-pal=g] section[data-wid]:not(.op-sec) > div:first-child{padding:10px 12px 8px!important;border-bottom:1px solid var(--w-line);align-items:center!important}
html[data-pal=g] section[data-wid] h2{font-size:14px!important;font-weight:600!important;letter-spacing:0!important}
html[data-pal=g] section[data-wid]:not(.op-sec) .op-body{padding:10px 12px 12px!important}
html[data-pal=g] .op-sec h2{font-weight:400!important;font-size:20px!important;letter-spacing:-.3px!important}
/* controls: segmented groups, the selected one underlined in orange */
html[data-pal=g] section[data-wid] [role="group"]{border:1px solid var(--w-line);border-radius:4px;padding:2px;gap:1px!important;background:transparent}
html[data-pal=g] section[data-wid] [role="group"] > button,html[data-pal=g] section[data-wid] [role="group"] > * > button{border:0!important;border-radius:2px!important;background:transparent!important;color:var(--w-mut)!important;font-size:12px!important;font-weight:400!important;padding:2px 8px!important;min-height:22px!important;box-shadow:none!important}
html[data-pal=g] section[data-wid] [role="group"] button[aria-pressed="true"]{background:var(--w-sel)!important;color:var(--w-ink)!important;box-shadow:inset 0 -1.5px 0 var(--w-acc)!important}
html[data-pal=g] section[data-wid] [role="group"] button[disabled],html[data-pal=g] section[data-wid] [role="group"] button[aria-disabled="true"]{opacity:.35}

/* ---------- charts: the v3 chart look ---------- */
/* gridlines solid and faint, not dashed */
html[data-pal=g] section[data-wid] div[style*="border-top: 1px dashed"]{border-top:1px solid var(--w-grid)!important}
html[data-pal=g] section[data-wid] svg[role="img"] path[fill="none"]{stroke-linecap:round;stroke-linejoin:round}
/* axis labels and end tags */
html[data-pal=g] section[data-wid] span[style*="position: absolute"][style*="right: -"]{font-family:Inter,system-ui,sans-serif!important;font-size:10.5px!important}
/* the watermark: the site's own, as on Grove 1 (Oct 28): ORANGE PAPER across each chart, the logo and theorangepaper.com in
   its corner, and the faint tiling behind tables. Nothing overridden here. */
/* tables: v3 headers */
html[data-pal=g] section[data-wid] th{font-size:10.5px!important;font-weight:500!important;text-transform:uppercase;letter-spacing:.4px;color:var(--w-mut)!important;border-bottom:1px solid var(--w-line2)!important}
html[data-pal=g] section[data-wid] td{border-bottom:1px solid var(--w-grid)!important;font-weight:400}

/* ---------- the page header: eyebrow, title, live status, Orange Rain behind ---------- */
.op-g3head{position:relative;overflow:hidden;margin:-18px -20px 0;padding:22px 24px 16px;border-bottom:1px solid var(--w-line)}
.op-g3head canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.32;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.op-g3eye,.op-g3row{position:relative}
.op-g3eye{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--w-dim);margin-bottom:6px}
.op-g3row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.op-g3h1{font-size:30px;font-weight:400;letter-spacing:-.6px;color:var(--w-ink)}
.op-g3asof{font-size:12.5px;color:var(--w-mut)}.op-g3asof b{font-size:10px;margin-right:2px}
@media(max-width:640px){.op-g3head{margin:-18px -12px 0;padding:18px 14px 14px}.op-g3h1{font-size:24px}}
/* range buttons on every card start at the left like the rest of the controls, so a wrapped row lines up (Oct 28) */
html[data-pal=g] .op-hdrg{margin-left:0!important}
/* a control group left empty in a saved picture (its buttons are taken out) draws no little outline (Oct 28) */
html[data-pal=g] section[data-wid] [role="group"]:not(:has(button)){border:0!important;padding:0!important}