/* ---- components/brg/brg.css ---- */ /* ============================================================================ BRIM · BRG PERFORMANCE CHART — styles Scope .brg, self-resetting so page styles cannot reach in. Extracted verbatim from the authoritative BRG template by sync/split-brg.js. THERE IS ONE BRG ENGINE. Pages configure BRG_CONFIG; they do not fork this. ============================================================================ */ /* Host-document rules are scoped to the standalone preview harness. Unscoped, these style whatever page loads the bundle: on Equity Innovation they painted the body navy and inset every section by clamp(16px,4vw,64px), which is where the navy side rails came from — 51.2px a side at 1280px. The chart is a component; it does not own the page it is dropped into. The preview harness sets . */ body.brg-standalone,html:has(body.brg-standalone){margin:0;padding:0;background:#071823} /* ============================================================================ BRIM UNIVERSAL CHART · scope .brg The ONE chart used on every page of bullrunim.com. Per page you change BRG_CONFIG only. Nothing else. ========================================================================== */ /* --- scope element resets itself (a descendant selector never matches it) --- */ .brg{max-width:none!important;width:100%!important;margin:0 auto!important;padding:0!important; border:0!important;float:none!important;min-height:0!important;text-decoration:none!important; background:transparent!important;box-shadow:none!important;border-radius:0!important; position:relative!important;display:block!important;overflow-x:clip!important; color:#D6E1EA!important;font-family:'DM Sans',system-ui,-apple-system,sans-serif!important; font-size:14px!important;line-height:1.5!important;box-sizing:border-box!important; -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums!important} /* --- cosmetic + layout floor. Named elements only: never [class], which deletes SVG --- */ .brg :where(div,span,p,h1,h2,h3,h4,h5,a,button,input,label,section,header,footer,ul,ol,li,table,thead,tbody,tr,th,td,i,b,small,strong){ box-sizing:border-box!important;background:transparent!important;border:0!important;border-radius:0!important; box-shadow:none!important;float:none!important;position:static!important;margin:0!important;padding:0!important; width:auto!important;height:auto!important;min-height:0!important;max-width:none!important; color:inherit!important;font-family:inherit!important;text-decoration:none!important; letter-spacing:normal!important;text-transform:none!important;list-style:none!important; font-style:normal!important;line-height:inherit!important;outline:none} .brg :where(canvas){display:block!important;max-width:none!important;background:transparent!important} /* --------------------------------- panel --------------------------------- */ .brg .brg-panel{position:relative!important;background:#0A2231!important;border:1px solid rgba(255,255,255,.09)!important; border-radius:16px!important;padding:20px 18px!important;overflow:visible!important} /* ---------------------------------- head --------------------------------- */ .brg .brg-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important; gap:18px!important;flex-wrap:wrap!important;margin-bottom:13px!important} .brg .brg-eyebrow{display:block!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:1.5px!important; text-transform:uppercase!important;color:#C9A84C!important;margin-bottom:6px!important} .brg .brg-title{display:block!important;font-size:23px!important;font-weight:500!important;color:#EDF3F8!important;line-height:1.25!important} .brg .brg-sub{display:block!important;font-size:11.5px!important;color:#8FA3B4!important;margin-top:5px!important} .brg .brg-ctls{display:flex!important;align-items:flex-end!important;gap:14px!important;flex-wrap:wrap!important} .brg .brg-ctlgrp{display:flex!important;flex-direction:column!important;gap:5px!important;flex:0 0 auto!important} .brg .brg-ctllbl{display:block!important;font-size:9px!important;font-weight:700!important;letter-spacing:1px!important; text-transform:uppercase!important;color:#7B8FA1!important} /* ----- the universal gross/net control (spec: .tgl + .feepop, unchanged) ---- */ .brg .tgl{display:flex!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:100px!important;overflow:hidden!important} .brg .tgl button{padding:7px 13px!important;background:transparent!important;border:none!important;color:#AEBBCB!important; font-size:11.5px!important;font-weight:500!important;cursor:pointer!important;font-family:inherit!important;white-space:nowrap!important} .brg .tgl button.on{background:rgba(201,168,76,.16)!important;color:#E2C47A!important} .brg .feepop{display:none!important;position:absolute!important;top:66px!important;right:24px!important;z-index:30!important; width:340px!important;max-width:calc(100% - 48px)!important;background:#062033!important; border:1px solid rgba(201,168,76,.55)!important;border-radius:12px!important;padding:16px!important} .brg .feepop.open{display:block!important} .brg .fp-tabs{display:flex!important;gap:6px!important;margin-bottom:12px!important} .brg .fp-tabs button{flex:1 1 auto!important;background:transparent!important;border:1px solid rgba(255,255,255,.18)!important; color:#9FB0C0!important;font-size:11px!important;font-weight:600!important;letter-spacing:.6px!important; text-transform:uppercase!important;padding:9px!important;border-radius:7px!important;cursor:pointer!important;font-family:inherit!important} .brg .fp-tabs button.on{background:#C9A84C!important;border-color:#C9A84C!important;color:#02131F!important} .brg .fp-lbl{display:block!important;font-size:12px!important;color:#C7D2DC!important;line-height:1.55!important;margin-bottom:10px!important} .brg .fp-lbl b{color:#E2C47A!important;font-weight:700!important} .brg .fp-tiers{display:flex!important;flex-direction:column!important;gap:6px!important} .brg .fp-tiers button{display:flex!important;align-items:center!important;justify-content:space-between!important; background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.12)!important;color:#E8EDF3!important; font-size:12.5px!important;font-weight:500!important;padding:9px 12px!important;border-radius:7px!important; cursor:pointer!important;font-family:inherit!important} .brg .fp-tiers button b{color:#E2C47A!important;font-weight:700!important} .brg .fp-tiers button.on{border-color:#C9A84C!important;background:rgba(201,168,76,.14)!important} .brg .fp-inrow{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important} .brg .fp-inrow input{width:74px!important;background:#02131F!important;border:1px solid rgba(255,255,255,.2)!important; color:#E2C47A!important;font-size:15px!important;font-weight:700!important;padding:8px 10px!important; border-radius:7px!important;font-family:inherit!important} .brg .fp-plus{font-size:12px!important;color:#9FB0C0!important;white-space:nowrap!important} .brg .fp-apply{background:#C9A84C!important;border:0!important;color:#02131F!important;font-size:11px!important;font-weight:700!important; letter-spacing:.6px!important;text-transform:uppercase!important;padding:10px 14px!important;border-radius:7px!important; cursor:pointer!important;font-family:inherit!important} .brg .fp-total{margin-top:12px!important;padding-top:11px!important;border-top:1px solid rgba(255,255,255,.1)!important; font-size:12px!important;color:#9FB0C0!important} .brg .fp-total b{color:#E2C47A!important;font-weight:700!important} .brg .fp-adv{display:none!important} .brg .fp-adv.on{display:block!important} .brg .fp-cli{display:none!important} .brg .fp-cli.on{display:block!important} /* --------------------------- the toggle rail ----------------------------- */ .brg .brg-rail{display:flex!important;flex-direction:column!important;gap:5px!important; background:#0D2A3B!important;border-radius:11px!important;padding:9px 11px!important;margin-bottom:9px!important} .brg .brg-rrow{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important} .brg .brg-rlbl{flex:0 0 88px!important;font-size:9px!important;font-weight:700!important;letter-spacing:1px!important; text-transform:uppercase!important;color:#7B8FA1!important} .brg .brg-pill{display:inline-flex!important;align-items:center!important;gap:6px!important; background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:100px!important; padding:4px 10px!important;font-size:11.5px!important;font-weight:500!important;color:#9FB0C0!important; cursor:pointer!important;font-family:inherit!important;white-space:nowrap!important} .brg .brg-pill i{display:inline-block!important;width:8px!important;height:8px!important;border-radius:100px!important; background:currentColor!important;opacity:.45!important;flex:0 0 auto!important} .brg .brg-pill.on{color:#EDF3F8!important;border-color:rgba(255,255,255,.30)!important;background:rgba(255,255,255,.09)!important} .brg .brg-pill.on i{opacity:1!important} .brg .brg-tick{display:flex!important;align-items:center!important;gap:0!important} .brg .brg-tick input{width:112px!important;background:rgba(255,255,255,.045)!important; border:1px solid rgba(255,255,255,.10)!important;border-right:0!important;border-radius:100px 0 0 100px!important; padding:5px 11px!important;font-size:11.5px!important;color:#EDF3F8!important;font-family:inherit!important} .brg .brg-tick button{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.10)!important; border-radius:0 100px 100px 0!important;padding:5px 12px!important;font-size:11.5px!important;font-weight:600!important; color:#C9A84C!important;cursor:pointer!important;font-family:inherit!important} /* --------------------------- periods + window ---------------------------- */ .brg .brg-perrow{display:flex!important;align-items:center!important;justify-content:space-between!important; gap:12px!important;flex-wrap:wrap!important;margin-bottom:9px!important} .brg .brg-pers{display:flex!important;gap:5px!important;flex-wrap:wrap!important} .brg .brg-per{background:transparent!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:7px!important; padding:5px 10px!important;font-size:11px!important;font-weight:500!important;color:#9FB0C0!important; cursor:pointer!important;font-family:inherit!important;white-space:nowrap!important} .brg .brg-per.on{background:rgba(201,168,76,.16)!important;border-color:rgba(201,168,76,.5)!important;color:#E2C47A!important} .brg .brg-asof{font-size:10.5px!important;color:#7B8FA1!important} /* ---- THE NAVIGATOR. Sits BELOW the plot, the way every stock chart does it: -- a miniature of the FULL history with a clear window over the part you are -- looking at and the shoulders dimmed back. Drag the middle to pan, the -- handles to resize, click a shoulder to jump. --------------------------- */ .brg .brg-nav{position:relative!important;height:48px!important;margin:0 0 10px!important; background:#0D2A3B!important;border-radius:9px!important;overflow:hidden!important; cursor:pointer!important;touch-action:none!important} .brg .brg-navcv{position:absolute!important;left:0!important;top:0!important; width:100%!important;height:100%!important} .brg .brg-navdim{position:absolute!important;top:0!important;bottom:0!important; background:rgba(4,20,33,.62)!important;pointer-events:none!important} .brg .brg-navwin{position:absolute!important;top:0!important;bottom:0!important;cursor:grab!important; border-left:1px solid rgba(201,168,76,.8)!important;border-right:1px solid rgba(201,168,76,.8)!important; background:rgba(201,168,76,.05)!important; box-shadow:inset 0 1px 0 rgba(201,168,76,.34),inset 0 -1px 0 rgba(201,168,76,.34)!important} .brg .brg-navh{position:absolute!important;top:50%!important;margin-top:-10px!important;margin-left:-5px!important; width:10px!important;height:20px!important;background:#C9A84C!important;border-radius:3px!important; cursor:ew-resize!important;box-shadow:0 1px 4px rgba(0,0,0,.4)!important} .brg .brg-navh:after{content:''!important;position:absolute!important;left:4px!important;top:6px!important; width:2px!important;height:8px!important;background:rgba(4,20,33,.5)!important;border-radius:2px!important} .brg .brg-span{position:absolute!important;top:6px!important;font-size:9.5px!important;font-weight:700!important; letter-spacing:.9px!important;text-transform:uppercase!important;color:#C9A84C!important; opacity:0!important;pointer-events:none!important;white-space:nowrap!important} .brg .brg-span.on{opacity:1!important} /* ------------------------------- the plot -------------------------------- */ .brg .brg-plotwrap{position:relative!important;height:clamp(190px,26vh,370px)!important;margin-bottom:11px!important} .brg .brg-plot{position:absolute!important;inset:0!important;width:100%!important;height:100%!important} .brg .brg-cross{position:absolute!important;top:0!important;width:1px!important;background:rgba(201,168,76,.45)!important; pointer-events:none!important;opacity:0!important} .brg .brg-tip{position:absolute!important;z-index:20!important;pointer-events:none!important;opacity:0!important; background:#062033!important;border:1px solid rgba(201,168,76,.45)!important;border-radius:100px!important; padding:4px 11px!important;font-size:10px!important;font-weight:700!important;letter-spacing:.9px!important; text-transform:uppercase!important;color:#C9A84C!important;white-space:nowrap!important} .brg .brg-note{display:none!important;background:rgba(201,168,76,.10)!important;border:1px solid rgba(201,168,76,.34)!important; border-radius:8px!important;padding:8px 11px!important;font-size:11.5px!important;color:#E2C47A!important;margin-bottom:11px!important} .brg .brg-note.on{display:block!important} .brg .brg-err{display:none!important;background:rgba(176,56,56,.14)!important;border:1px solid rgba(176,56,56,.5)!important; border-radius:100px!important;padding:6px 13px!important;font-size:11.5px!important;color:#E39A9A!important;margin-bottom:11px!important} .brg .brg-err.on{display:inline-block!important} /* ---- THE CARDS. Big readable figures for the few lines that matter. The -- FLAGGED (anchor) card is ALWAYS first. Runs above the compare table; -- BRG_CONFIG.legend picks 'cards' | 'table' | 'both'. --------------------- */ .brg .brg-cards{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-bottom:8px!important} .brg .brg-card{position:relative!important;flex:1 1 172px!important;min-width:154px!important; background:#0D2A3B!important;border-radius:9px!important;padding:7px 10px 7px 13px!important; cursor:pointer!important;overflow:hidden!important} .brg .brg-card.anch{background:#123246!important} .brg .brg-card.off{opacity:.4!important} .brg .brg-cedge{position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:3px!important} .brg .brg-crow{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important} .brg .brg-cname{font-size:9.5px!important;font-weight:700!important;letter-spacing:.9px!important; text-transform:uppercase!important;color:#8FA3B4!important;overflow:hidden!important; text-overflow:ellipsis!important;white-space:nowrap!important} .brg .brg-card.anch .brg-cname{color:#C9A84C!important} .brg .brg-cact{display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important} .brg .brg-cbtn{background:transparent!important;border:0!important;color:#6E8296!important;font-size:9px!important;font-weight:700!important;letter-spacing:.45px!important; cursor:pointer!important;padding:0 2px!important;font-family:inherit!important;line-height:1!important} .brg .brg-cbtn.pin{color:#C9A84C!important} .brg .brg-cval{display:block!important;font-size:20px!important;font-weight:700!important;color:#EDF3F8!important; margin-top:4px!important;letter-spacing:-.2px!important;line-height:1.15!important} .brg .brg-cstat{display:block!important;font-size:11px!important;color:#7B8FA1!important;margin-top:3px!important;white-space:nowrap!important} .brg .brg-cstat b{color:#C7D2DC!important;font-weight:700!important} .brg .brg-cstat b{color:#C7D2DC!important;font-weight:700!important} .brg .brg-cstat i{color:#5D7186!important;margin:0 5px!important} /* the gap line is a FULL-BLEED footer band, so a table of cards reads as a wall of red or a wall of green before a single number is read */ .brg .brg-cgap{display:flex!important;align-items:baseline!important;justify-content:space-between!important; gap:8px!important;font-size:10.5px!important;color:#8FA3B4!important; margin:8px -10px -7px -13px!important;padding:6px 10px 6px 13px!important; border-top:1px solid rgba(255,255,255,.07)!important;white-space:nowrap!important;overflow:hidden!important} .brg .brg-cgap span{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important; text-overflow:ellipsis!important;white-space:nowrap!important} .brg .brg-cgap em{flex:0 0 auto!important} .brg .brg-cgap b{color:inherit!important;font-weight:700!important} .brg .brg-cgap.ref{color:#C9A84C!important;background:rgba(201,168,76,.10)!important} .brg .brg-cgap.win{color:#7BD29C!important} .brg .brg-cgap.lose{color:#DC6A6A!important} .brg .brg-cgap em{font-style:normal!important;font-weight:700!important;opacity:.85!important} /* ---- THE COMPARE TABLE. Google Finance / YCharts shape: one row per line, -- -- aligned numeric columns you can read straight down, values that follow -- -- the crosshair. Rows are built ONCE per render; the crosshair only WRITES -- cell text, because re-rendering a row under the cursor makes mouseenter -- and mouseleave fire against each other forever. ----------------------- */ .brg .brg-cmp{width:100%!important;overflow-x:auto!important;margin-bottom:9px!important} .brg .brg-cmp table{width:100%!important;border-collapse:collapse!important;font-size:12.5px!important} .brg .brg-cmp th{text-align:right!important;font-size:9px!important;font-weight:700!important;letter-spacing:.9px!important; text-transform:uppercase!important;color:#7B8FA1!important;padding:0 10px 6px!important;white-space:nowrap!important} .brg .brg-cmp th.s,.brg .brg-cmp td.s{text-align:left!important} .brg .brg-cmp th.x{width:54px!important} .brg .brg-cmp td{text-align:right!important;padding:0 10px!important;height:26px!important;color:#C7D2DC!important; white-space:nowrap!important;border-top:1px solid rgba(255,255,255,.055)!important} .brg .brg-cmp tbody tr{cursor:pointer!important} .brg .brg-cmp tbody tr:hover td{background:rgba(255,255,255,.032)!important} .brg .brg-cmp tbody tr.anch td{background:rgba(201,168,76,.07)!important} .brg .brg-cmp tbody tr.off td{opacity:.34!important} .brg .brg-cmp td.s i{display:inline-block!important;width:15px!important;height:3px!important;border-radius:2px!important; margin-right:9px!important;vertical-align:middle!important} .brg .brg-cmp td.s b{font-weight:500!important;color:#D6E1EA!important} .brg .brg-cmp tbody tr.anch td.s b{font-weight:700!important;color:#EDF3F8!important} .brg .brg-cmp td.v{color:#EDF3F8!important;font-weight:700!important} .brg .brg-cmp td.neg{color:#DC6A6A!important} /* VERDICT COLOUR. Green = beats the reference, red = loses to it, intensity proportional to the margin. This is a RELATIVE channel: the text colour of an absolute figure still means gain/loss, the BACKGROUND means better/worse than the flagged series. Two channels, so neither has to mean two things. */ .brg .brg-cmp td small{color:inherit!important;opacity:.6!important;margin-left:6px!important} .brg .brg-cmp td.g{color:#8FA3B4!important} .brg .brg-cmp td.g.win{background:rgba(123,210,156,.13)!important;color:#7BD29C!important} .brg .brg-cmp td.g.lose{background:rgba(220,106,106,.13)!important;color:#DC6A6A!important} .brg .brg-cmp td.g b{color:#D6E1EA!important;font-weight:700!important} .brg .brg-cmp td.ref{color:#C9A84C!important} /* VERDICT. Green = the FLAGGED series beat this row here, red = it lost, intensity proportional to the margin. Declared last so it wins the tie against .g and .neg. THE BACKGROUND carries the verdict; the TEXT keeps its absolute meaning, so a -79.25% drawdown still reads red even when it sits on a green wash. The only cells whose text turns is the vs column and the card gap line, because there the number IS the comparison. */ .brg .brg-cmp td.win,.brg .brg-cmp td.win b,.brg .brg-cmp td.win small, .brg .brg-cmp td.g.win,.brg .brg-cmp td.g.win b{color:#7BD29C!important} .brg .brg-cmp td.lose,.brg .brg-cmp td.lose b,.brg .brg-cmp td.lose small, .brg .brg-cmp td.g.lose,.brg .brg-cmp td.g.lose b{color:#DC6A6A!important} .brg .brg-cmp td.neg,.brg .brg-cmp td.neg.win,.brg .brg-cmp td.neg.win small, .brg .brg-cmp td.neg.lose{color:#DC6A6A!important} /* the annualized spread rides beside the rate, fact-sheet style */ .brg .brg-cmp td .sp{font-weight:700!important;margin-left:8px!important;opacity:.9!important} .brg .brg-cgap em{font-style:normal!important;font-weight:700!important;opacity:.85!important} .brg .brg-cmp thead tr{border-bottom:1px solid rgba(201,168,76,.22)!important} .brg .brg-cmp tbody tr.anch td:first-child{box-shadow:inset 2px 0 0 #C9A84C!important} .brg .brg-cmp td small{color:#7B8FA1!important;margin-left:6px!important} .brg .brg-cmp .brg-cb{background:transparent!important;border:0!important;color:#6E8296!important;font-size:9px!important;font-weight:700!important;letter-spacing:.45px!important; cursor:pointer!important;padding:0 3px!important;font-family:inherit!important;line-height:1!important} .brg .brg-cmp .brg-cb.pin{color:#C9A84C!important} .brg .brg-cmp::-webkit-scrollbar{height:7px} .brg .brg-cmp::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:100px} .brg .brg-cmp::-webkit-scrollbar-thumb{background:rgba(201,168,76,.5);border-radius:100px} .brg .brg-ctlrow{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important} .brg .brg-detbar{display:inline-flex!important;align-items:center!important;gap:7px!important; background:transparent!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:100px!important; padding:5px 12px!important;font-size:11px!important;font-weight:500!important;color:#9FB0C0!important; cursor:pointer!important;font-family:inherit!important;white-space:nowrap!important} .brg .brg-detbar:hover{border-color:rgba(255,255,255,.2)!important;color:#C7D2DC!important} .brg .brg-detbar.on{background:rgba(201,168,76,.14)!important;border-color:rgba(201,168,76,.45)!important;color:#E2C47A!important} .brg .brg-detbar span{color:#C9A84C!important;font-size:13px!important;line-height:1!important} .brg .brg-detbar.on span{color:#E2C47A!important} /* Hostile sheets force span/p/b/small/i to display:block. Any inline text run inside a laid-out box must pin its own display or the box changes height. */ .brg .brg-cmp td b,.brg .brg-cmp td small,.brg .brg-cmp td .sp,.brg .brg-cgap b, .brg .brg-cgap em,.brg .brg-cstat b, .brg .brg-cstat i,.brg .fp-lbl b,.brg .fp-tiers button b, .brg .fp-total b,.brg .brg-per,.brg .brg-detbar span,.brg .brg-asof, .brg .fp-plus{display:inline!important} .brg .brg-pill i,.brg .brg-cmp td.s i{display:inline-block!important} .brg .brg-foot{margin-top:10px!important;padding-top:9px!important;border-top:1px solid rgba(255,255,255,.07)!important; font-size:10.5px!important;color:#6E8296!important;line-height:1.55!important} @media (max-width:820px){ .brg .brg-panel{padding:18px 14px!important;border-radius:13px!important} .brg .brg-rlbl{flex:0 0 100%!important} .brg .brg-card{flex:1 1 100%!important} .brg .brg-ctls{width:100%!important} .brg .feepop{right:14px!important;top:60px!important} } /* ======================================================================== BRIM compact market-chart layout Same engine + data. Less furniture, more chart. ======================================================================== */ /* Standalone preview uses the same kind of centered, responsive page gutter as the live BRIM site. The component itself remains fluid inside it. SCOPED: these are harness styles. Unscoped they applied to every page that loads this bundle — the !important padding is what pushed Equity Innovation's sections 51.2px off both edges and exposed the navy body behind them. */ body.brg-standalone{ padding:clamp(22px,3.5vw,56px) clamp(16px,4vw,64px) clamp(36px,6vw,88px)!important; background:#071823!important; } body.brg-standalone>.brg{ width:100%!important;max-width:1440px!important;margin:0 auto!important; } @media (max-width:720px){ body.brg-standalone{padding:14px 12px 28px!important} } .brg .brg-panel{ padding:13px 14px 12px!important;border-radius:12px!important; background:#0A2231!important; } .brg .brg-head{ align-items:center!important;gap:12px!important;flex-wrap:nowrap!important; margin-bottom:7px!important;min-height:38px!important; } .brg .brg-head>div:first-child{min-width:0!important;flex:1 1 auto!important} .brg .brg-eyebrow{display:none!important} .brg .brg-title{font-size:18px!important;font-weight:600!important;line-height:1.15!important} .brg .brg-sub{font-size:9.8px!important;line-height:1.3!important;margin-top:2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .brg .brg-ctls{align-items:center!important;gap:6px!important;flex-wrap:nowrap!important;flex:0 0 auto!important} .brg .brg-ctlgrp{gap:0!important} .brg .brg-ctllbl{display:none!important} .brg .tgl{border-color:rgba(255,255,255,.11)!important;background:rgba(255,255,255,.025)!important} .brg .tgl button{padding:5px 9px!important;font-size:10.5px!important;line-height:1.2!important} .brg .feepop{top:54px!important;right:14px!important} /* The old three-row selector becomes an on-demand compare drawer. */ .brg .brg-rail{ display:none!important;position:absolute!important;left:14px!important;right:14px!important;top:61px!important; z-index:60!important;gap:7px!important;margin:0!important;padding:12px!important; background:#082131!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:10px!important; box-shadow:0 18px 45px rgba(0,0,0,.38)!important; } .brg .brg-rail.open{display:flex!important} .brg .brg-rrow{gap:7px!important;min-height:27px!important} .brg .brg-rlbl{flex:0 0 74px!important;font-size:8.5px!important} .brg .brg-pill{padding:4px 8px!important;font-size:10.5px!important} .brg .brg-tick input{width:92px!important;padding:4px 9px!important;font-size:10.5px!important} .brg .brg-tick button{padding:4px 10px!important;font-size:10.5px!important} /* One dense market-chart toolbar: active series + compare, then periods. */ .brg .brg-perrow{ display:flex!important;align-items:center!important;justify-content:flex-start!important; gap:7px!important;flex-wrap:nowrap!important;margin-bottom:5px!important;min-height:30px!important; padding-bottom:5px!important;border-bottom:1px solid rgba(255,255,255,.055)!important; } .brg .brg-seriesline{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;flex:1 1 auto!important;overflow:hidden!important} .brg .brg-selected{display:flex!important;align-items:center!important;gap:4px!important;min-width:0!important;overflow:hidden!important} .brg .brg-sel{ display:inline-flex!important;align-items:center!important;gap:5px!important;flex:0 1 auto!important;min-width:0!important; padding:4px 7px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:6px!important; background:rgba(255,255,255,.025)!important;color:#C7D2DC!important;font-size:10.5px!important;font-weight:500!important; cursor:pointer!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } .brg .brg-sel:hover{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.17)!important} .brg .brg-sel i{display:inline-block!important;width:7px!important;height:7px!important;border-radius:50%!important;flex:0 0 auto!important} .brg .brg-comparebtn{ display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important; padding:4px 8px!important;border:1px solid rgba(201,168,76,.34)!important;border-radius:6px!important; background:rgba(201,168,76,.08)!important;color:#D8BA68!important;font:600 10.5px/1.2 'DM Sans',sans-serif!important; cursor:pointer!important;white-space:nowrap!important; } .brg .brg-comparebtn:hover,.brg .brg-comparebtn.on{background:rgba(201,168,76,.16)!important;border-color:rgba(201,168,76,.55)!important;color:#E2C47A!important} .brg .brg-pers{display:flex!important;gap:2px!important;flex-wrap:nowrap!important;flex:0 0 auto!important} .brg .brg-per{border:0!important;border-radius:5px!important;padding:4px 6px!important;font-size:10.5px!important} .brg .brg-per.on{background:rgba(201,168,76,.13)!important;border:0!important} .brg .brg-asof{font-size:9px!important;white-space:nowrap!important;margin-left:2px!important} .brg .brg-asof{display:none!important} .brg .brg-rangepicker,.brg .brg-livepicker{display:none!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important; margin:-1px 0 7px!important;padding:7px 9px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:7px!important; background:rgba(7,24,35,.66)!important} .brg .brg-rangepicker.open,.brg .brg-livepicker.open{display:flex!important} .brg .brg-rangepicker label{display:inline-flex!important;align-items:center!important;gap:6px!important; font-size:9px!important;font-weight:700!important;letter-spacing:.7px!important;text-transform:uppercase!important;color:#7B8FA1!important} .brg .brg-rangepicker input{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.12)!important; border-radius:6px!important;padding:5px 8px!important;color:#D6E1EA!important;font-size:11px!important;font-family:inherit!important} .brg .brg-rangepicker button,.brg .brg-livepick{display:inline-flex!important;align-items:center!important;justify-content:center!important; padding:5px 9px!important;border-radius:6px!important;font:600 10.5px/1.2 'DM Sans',sans-serif!important;cursor:pointer!important} .brg .brg-rangeapply{border:1px solid rgba(201,168,76,.38)!important;background:rgba(201,168,76,.10)!important;color:#E2C47A!important} .brg .brg-rangeclose{border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.03)!important;color:#9FB0C0!important} .brg .brg-livepicker{gap:5px!important} .brg #brgLiveChoices{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:wrap!important} .brg .brg-livelabel{display:block!important;flex:0 0 100%!important;font-size:9px!important;font-weight:700!important; letter-spacing:.8px!important;text-transform:uppercase!important;color:#7B8FA1!important;margin-bottom:1px!important} .brg .brg-livepick{justify-content:flex-start!important;gap:7px!important;border:1px solid rgba(255,255,255,.10)!important; background:rgba(255,255,255,.035)!important;color:#C7D2DC!important} .brg .brg-livepick:hover,.brg .brg-livepick.on{border-color:rgba(201,168,76,.45)!important;background:rgba(201,168,76,.10)!important;color:#E2C47A!important} .brg .brg-livepick i{display:inline-block!important;width:7px!important;height:7px!important;border-radius:50%!important;flex:0 0 auto!important} .brg .brg-livepick small{font-size:9px!important;font-weight:500!important;color:#7B8FA1!important;margin-left:2px!important} @media (max-width:720px){ .brg .brg-rangepicker,.brg .brg-livepicker{gap:6px!important;padding:6px 7px!important} .brg .brg-rangepicker input{padding:4px 7px!important;font-size:10.5px!important} .brg .brg-rangepicker button,.brg .brg-livepick{padding:4px 8px!important;font-size:10px!important} } /* The chart is the product. Keep the plotting instrument visually self-contained: the outer frame never changes with zoom, and the canvas reserves permanent axis gutters. */ .brg .brg-chartframe{ position:relative!important;margin:0 0 7px!important;border:1px solid rgba(255,255,255,.11)!important; border-radius:8px!important;background:#081E2C!important;overflow:hidden!important; } .brg .brg-plotwrap{height:clamp(310px,42vh,465px)!important;margin:0!important;background:#08202E!important} .brg .brg-plotwrap:after{ content:''!important;position:absolute!important;left:72px!important;top:0!important;bottom:26px!important;width:1px!important; background:rgba(255,255,255,.075)!important;pointer-events:none!important; } /* Persistent TradingView/Yahoo-style navigator. Always shows the full-history preview; the gold window is the exact slice currently drawn above. */ .brg .brg-nav{ display:block!important;height:42px!important;margin:0!important;border-radius:0!important; background:#071A27!important;border:0!important;border-top:1px solid rgba(255,255,255,.085)!important;overflow:hidden!important; } .brg .brg-navwin{ border-left:1px solid rgba(201,168,76,.95)!important;border-right:1px solid rgba(201,168,76,.95)!important; background:rgba(201,168,76,.055)!important; box-shadow:inset 0 1px 0 rgba(201,168,76,.34),inset 0 -1px 0 rgba(201,168,76,.34)!important; } .brg .brg-navdim{background:rgba(3,14,23,.68)!important} .brg .brg-navh{ width:8px!important;height:26px!important;margin-top:-13px!important;margin-left:-4px!important; border-radius:3px!important;background:#C9A84C!important;box-shadow:0 1px 4px rgba(0,0,0,.45)!important; } .brg .brg-navh:after{left:3px!important;top:8px!important;width:2px!important;height:10px!important} .brg .brg-span{top:4px!important;font-size:8.5px!important;letter-spacing:.7px!important} @media (max-width:720px){ .brg .brg-chartframe{border-radius:7px!important;margin-bottom:6px!important} .brg .brg-plotwrap:after{left:58px!important;bottom:24px!important} .brg .brg-nav{height:38px!important;margin:0!important} .brg .brg-navh{height:24px!important;margin-top:-12px!important} } /* Cards are generated for mobile only. Desktop goes straight to the useful table. */ .brg .brg-cards{margin-bottom:5px!important} .brg .brg-cmp{margin-bottom:6px!important;border-top:1px solid rgba(255,255,255,.055)!important} .brg .brg-cmp table{font-size:11.5px!important} .brg .brg-cmp th{font-size:8.5px!important;padding:7px 8px 5px!important;letter-spacing:.65px!important} .brg .brg-cmp td{height:27px!important;padding:0 8px!important} .brg .brg-cmp td.s i{width:12px!important;margin-right:7px!important} .brg .brg-cmp tbody tr.anch td:first-child{box-shadow:inset 2px 0 0 #C9A84C!important} .brg .brg-ctlrow{min-height:25px!important;margin-top:1px!important} .brg #brgAlphaBar,.brg #brgCardBar{display:none!important} .brg .brg-detbar{padding:4px 8px!important;border-radius:6px!important;font-size:10px!important} .brg .brg-foot{margin-top:6px!important;padding-top:6px!important;font-size:9.5px!important;line-height:1.4!important} .brg .brg-note{margin-bottom:6px!important;padding:6px 9px!important;font-size:10.5px!important} @media (max-width:980px){ .brg .brg-asof{display:none!important} .brg .brg-sel:nth-of-type(n+5){display:none!important} } @media (max-width:720px){ .brg .brg-panel{padding:10px 10px 9px!important;border-radius:10px!important} .brg .brg-head{align-items:flex-start!important;flex-wrap:wrap!important;margin-bottom:4px!important;gap:6px!important} .brg .brg-title{font-size:17px!important} .brg .brg-sub{white-space:normal!important;font-size:9.5px!important} .brg .brg-ctls{width:100%!important;justify-content:flex-start!important} .brg .brg-perrow{flex-wrap:wrap!important;gap:5px!important;padding-bottom:5px!important} .brg .brg-seriesline{order:1!important;flex:1 1 100%!important} .brg .brg-pers{order:2!important;max-width:100%!important;overflow-x:auto!important;padding-bottom:1px!important} .brg .brg-sel:nth-of-type(n+4){display:none!important} .brg .brg-rail{left:8px!important;right:8px!important;top:92px!important;max-height:66vh!important;overflow:auto!important} .brg .brg-rrow{align-items:flex-start!important;flex-wrap:wrap!important} .brg .brg-rlbl{flex:0 0 100%!important} .brg .brg-plotwrap{height:275px!important;margin:0!important} .brg .brg-cards{gap:4px!important} .brg .brg-card{ display:grid!important;grid-template-columns:minmax(110px,1.15fr) auto!important; grid-template-areas:'name value' 'stat stat' 'gap gap'!important; min-width:100%!important;min-height:0!important;padding:6px 8px 6px 11px!important;border-radius:7px!important; } .brg .brg-crow{grid-area:name!important;min-width:0!important;align-self:center!important} .brg .brg-cname{font-size:9px!important;letter-spacing:.6px!important} .brg .brg-cact{display:none!important} .brg .brg-cval{grid-area:value!important;margin:0!important;font-size:15px!important;line-height:1.1!important;text-align:right!important;align-self:center!important} .brg .brg-cstat{grid-area:stat!important;margin-top:2px!important;font-size:9.8px!important;line-height:1.25!important;text-align:left!important} .brg .brg-cgap{grid-area:gap!important;margin:4px -8px -6px -11px!important;padding:4px 8px 4px 11px!important;font-size:9.5px!important} .brg .brg-cmp{overflow-x:auto!important} .brg .brg-cmp table{min-width:720px!important;font-size:11px!important} .brg .brg-foot{font-size:9px!important} } .brg .brg-plotlegend{ position:absolute!important;left:45px!important;top:7px!important;z-index:12!important; display:flex!important;flex-direction:column!important;gap:1px!important;pointer-events:none!important; padding:3px 5px!important;border-radius:5px!important;background:rgba(6,32,51,.48)!important; backdrop-filter:blur(2px)!important; } .brg .brg-plrow{display:flex!important;align-items:center!important;gap:6px!important;min-height:17px!important;font-size:9.8px!important;line-height:1.15!important;white-space:nowrap!important} .brg .brg-pldot{display:inline-block!important;width:7px!important;height:7px!important;border-radius:50%!important;flex:0 0 auto!important} .brg .brg-plname{width:78px!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#AEBBCB!important;font-weight:600!important} .brg .brg-plval{min-width:64px!important;text-align:right!important;color:#EDF3F8!important;font-weight:700!important;font-variant-numeric:tabular-nums!important} .brg .brg-plret{min-width:58px!important;text-align:right!important;color:#9FB0C0!important;font-weight:600!important;font-variant-numeric:tabular-nums!important} .brg .brg-plmore{font-size:9px!important;color:#7B8FA1!important;padding-left:13px!important} @media (max-width:720px){ .brg .brg-plotlegend{left:41px!important;top:5px!important;padding:2px 4px!important;background:rgba(6,32,51,.58)!important} .brg .brg-plrow{font-size:9px!important;gap:4px!important} .brg .brg-plname{width:62px!important} .brg .brg-plval{min-width:56px!important} .brg .brg-plret{display:none!important} } /* ---- components/brg/analytics.css ---- */ /* ============================================================================ BRIM · BRG ANALYTICS — styles Sits directly under the BRG chart and reads as part of the same instrument: same navy panel, same hairlines, same tabular figures. The benchmark hierarchy is carried by WEIGHT and LABEL, not colour alone — `.is-primary` gets the "primary benchmark" caption and full contrast, `.is-secondary` is dimmed and captioned "secondary". Colour alone would fail for anyone who cannot separate the hues. ============================================================================ */ .bi-an{ background:#0A2231 !important; border:1px solid rgba(255,255,255,.09) !important; border-radius:16px !important; padding:16px 18px 18px !important; color:#D6E1EA !important; font-family:'DM Sans',system-ui,-apple-system,sans-serif !important; font-size:14px !important; line-height:1.5 !important; font-variant-numeric:tabular-nums !important; margin-top:14px !important; } /* ------------------------------------------------------------------ tab bar */ .bi-an-bar{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:14px !important;flex-wrap:wrap !important;margin-bottom:14px !important} .bi-an-tabs{display:flex !important;gap:4px !important;flex-wrap:wrap !important} .bi-an-tab{ background:transparent !important;border:1px solid rgba(255,255,255,.11) !important;border-radius:7px !important; padding:6px 12px !important;font:500 11.5px/1 'DM Sans',sans-serif !important;color:#9FB0C0 !important; cursor:pointer !important;white-space:nowrap !important;font-family:inherit !important; } .bi-an-tab:hover{border-color:rgba(255,255,255,.24) !important;color:#D6E1EA !important} .bi-an-tab.on{background:rgba(201,168,76,.16) !important;border-color:rgba(201,168,76,.5) !important;color:#E2C47A !important} .bi-an-span{font-size:10.5px !important;color:#7B8FA1 !important;white-space:nowrap !important} /* ------------------------------------------------------------------- states */ .bi-an-wait,.bi-an-fail{ background:#0A2231 !important;border:1px solid rgba(255,255,255,.09) !important;border-radius:16px !important; padding:26px 18px !important;margin-top:14px !important;color:#8FA3B4 !important;font-size:13px !important;text-align:center !important; font-family:'DM Sans',system-ui,sans-serif !important; } .bi-an-fail{color:#E39A9A !important;border-color:rgba(220,106,106,.35) !important} /* --------------------------------------------------------------- the plot */ .bi-an-plotwrap{width:100% !important;overflow-x:auto !important} .bi-an-svg{display:block !important;width:100% !important;min-width:560px !important;height:auto !important} .bi-an-ax{fill:#7B8FA1 !important;font:400 10px 'DM Sans',sans-serif !important} .bi-an-axl{fill:#8FA3B4 !important;font:600 10px 'DM Sans',sans-serif !important;letter-spacing:.6px !important;text-transform:uppercase !important} .bi-an-pt{fill:#EDF3F8 !important;font:500 11.5px 'DM Sans',sans-serif !important} /* ------------------------------------------------------------------ tables */ .bi-an-tablewrap{width:100% !important;overflow-x:auto !important} .bi-an-t{width:100% !important;border-collapse:collapse !important;min-width:640px !important;font-size:13px !important} .bi-an-t th,.bi-an-t td{padding:9px 10px !important;border-bottom:1px solid rgba(255,255,255,.07) !important;text-align:left !important;vertical-align:middle !important} .bi-an-t thead th{ font:700 9.5px/1.35 'DM Sans',sans-serif !important;letter-spacing:1px !important;text-transform:uppercase !important; color:#7B8FA1 !important;border-bottom-color:rgba(255,255,255,.14) !important;white-space:nowrap !important; } .bi-an-t thead th em{display:block !important;font:600 8px/1.4 'DM Sans',sans-serif !important;letter-spacing:.8px !important;font-style:normal !important;opacity:.72 !important;margin-top:2px !important} .bi-an-t thead th.is-self{color:#E2C47A !important} .bi-an-t thead th.is-primary{color:#C7D2DC !important} .bi-an-t thead th.is-secondary{color:#7B8FA1 !important;opacity:.82 !important} .bi-an-t tbody td{color:#C7D2DC !important} .bi-an-t tbody td.is-self{color:#E2C47A !important;font-weight:500 !important} .bi-an-t tbody tr:last-child td{border-bottom:0 !important} .bi-an-t tbody tr:hover td{background:rgba(255,255,255,.028) !important} .bi-an-dot{display:inline-block !important;width:7px !important;height:7px !important;border-radius:50% !important;margin-right:6px !important;vertical-align:middle !important} .bi-an-t .brim-r{text-align:right !important} .bi-an-t .brim-n{font-variant-numeric:tabular-nums !important} .bi-an-t .brim-neg{color:#DC6A6A !important} .bi-an-t tbody td.is-self.brim-neg{color:#DC6A6A !important} .bi-an-y{font-weight:500 !important;color:#EDF3F8 !important;white-space:nowrap !important} .bi-an-part{display:inline-block !important;margin-left:6px !important;padding:2px 6px !important;border:1px solid rgba(255,255,255,.16) !important;border-radius:100px !important;font:600 8px/1 'DM Sans',sans-serif !important;letter-spacing:.8px !important;text-transform:uppercase !important;color:#7B8FA1 !important} .bi-an-vs{border-left:1px solid rgba(255,255,255,.09) !important} .bi-an-t--cy tbody td{padding-top:8px !important;padding-bottom:8px !important} /* ------------------------------------------------------------------- notes */ .bi-an .brim-note{margin-top:12px !important;font-size:11.5px !important;line-height:1.65 !important;color:#7B8FA1 !important} .bi-an .brim-note b{color:#C7D2DC !important;font-weight:600 !important} .bi-an .brim-p{color:#8FA3B4 !important;font-size:13px !important} @media(max-width:900px){ .bi-an{padding:14px 12px 16px !important} .bi-an-bar{gap:8px !important} .bi-an-tab{padding:6px 10px !important;font-size:11px !important} } @media(prefers-reduced-motion:reduce){ .bi-an *{transition:none!important;animation:none!important} }