/*
 * Adapted from Tremor Raw Card [v1.0.0] and Divider [v1.0.0].
 * https://github.com/tremorlabs/tremor/tree/ca4d588f47820ff3d514d37fa4ee08a4222dec11
 * Apache-2.0; license and modification notice: /assets/vendor/tremor/.
 * Changes: native CSS instead of React/Tailwind; piggyone palette, compact
 * borderless pane, original live metrics and responsive three-column header.
 */
.hero.hero-has-leader{display:grid;grid-template-columns:minmax(340px,.9fr) minmax(440px,1.45fr) auto;align-items:center;gap:28px;padding:24px 0;margin-bottom:10px}
.hero.hero-has-leader>div:first-child{min-width:0}
.hero.hero-has-leader h1{font-size:28px;line-height:1.4;letter-spacing:-.4px;margin:0 0 9px}
.hero.hero-has-leader>div>p{font-size:13px;line-height:1.8}
.hero.hero-has-leader>.fee{grid-column:3;grid-row:1;white-space:nowrap;background:transparent;border:0;border-left:1px solid #263b48;border-radius:0;box-shadow:none;padding:0 0 0 24px;font-size:11px;text-align:right}
.hero.hero-has-leader>.fee strong,.hero.hero-has-leader>.fee .fee-range{font-size:23px}
.hero.hero-has-leader>.fee small,.hero.hero-has-leader>.fee .fee-specific{font-size:10px;line-height:1.65;color:#7893a5}
/* Tremor Card's relative/full-width/text-left base, adapted to an open pane. */
.yesterday-leader{position:relative;width:100%;text-align:left;grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0;padding:0 0 0 26px;border:0;border-left:1px solid #263b48;border-radius:0;background:transparent;color:#b8cddb;box-shadow:none}
.leader-heading,.leader-main,.leader-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.leader-kicker{font-size:11px;color:#98b9af;white-space:nowrap;letter-spacing:.2px}
.leader-kicker:before{content:'';display:inline-block;width:5px;height:5px;background:#77dfbc;border-radius:50%;margin-right:7px;vertical-align:2px}
.leader-date{font:10px Arial,sans-serif;color:#708c9d;white-space:nowrap;font-variant-numeric:tabular-nums}
.leader-main{align-items:baseline;gap:18px}
.leader-name{font-size:17px;font-weight:500;color:#d9e8ef;line-height:1.45;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.leader-gain{font:600 29px Arial,sans-serif;white-space:nowrap;color:#a0b7c7;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.leader-gain[data-sign=positive]{color:#77dfbc}
.leader-gain[data-sign=negative]{color:#ed8298}
/* Divider's full-width one-pixel rule, folded into the metric group. */
.leader-metrics{display:grid;grid-template-columns:1.2fr 1fr .85fr;gap:20px;min-width:0;border-top:1px solid #21343f;padding-top:11px}
.leader-metrics>span{display:flex;flex-direction:column;gap:5px;min-width:0}
.leader-metrics small{font-size:10px;line-height:1.4;color:#7893a5;white-space:nowrap}
.leader-metrics b{font-size:15px;line-height:1.4;font-weight:500;color:#c0d3df;white-space:nowrap;font-variant-numeric:tabular-nums}
.leader-metrics b.leader-risk{color:#d98798}
.leader-foot{padding-top:1px}
.leader-scope{font-size:10px;color:#708c9d;line-height:1.5}
.yesterday-leader .leader-details{font-size:11px;padding:0;background:transparent;border:0;border-radius:0;color:#a6cfc0;line-height:1.5;white-space:nowrap}
.yesterday-leader .leader-details:hover{background:transparent;color:#c0eedc;text-decoration:underline}
.yesterday-leader .leader-details:disabled{opacity:.5}
.hero .yesterday-leader .leader-empty{font-size:12px;color:#86a1b2;margin:0;padding:15px 0}
@media(min-width:1101px) and (max-width:1400px){.hero.hero-has-leader{grid-template-columns:minmax(290px,.8fr) minmax(340px,1.3fr) auto;gap:20px}.hero.hero-has-leader h1{font-size:25px}.hero.hero-has-leader>div>p{font-size:11px}.hero.hero-has-leader>.fee{padding-left:20px;font-size:10px}.hero.hero-has-leader>.fee .fee-range{font-size:21px}.yesterday-leader{padding-left:20px;gap:9px}.leader-name{font-size:15px}.leader-gain{font-size:26px}.leader-metrics{gap:14px}.leader-metrics small{font-size:9px}.leader-metrics b{font-size:14px}}
@media(min-width:701px) and (max-width:1100px){.hero.hero-has-leader{grid-template-columns:minmax(240px,.85fr) minmax(320px,1.15fr);gap:20px;padding:22px 0 15px}.hero.hero-has-leader h1{font-size:25px}.hero.hero-has-leader>div>p{font-size:12px}.hero.hero-has-leader>.fee{grid-column:1;grid-row:2;border:0;padding:0;justify-self:start;text-align:left;font-size:10px}.hero.hero-has-leader>.fee small,.hero.hero-has-leader>.fee .fee-specific{display:none}.yesterday-leader{grid-column:2;grid-row:1/3;padding-left:20px}.leader-name{font-size:15px}.leader-gain{font-size:26px}.leader-metrics{gap:12px}.leader-metrics small{font-size:9px}}
@media(max-width:700px){.hero.hero-has-leader{grid-template-columns:minmax(0,1fr);gap:17px;padding:20px 0 15px;margin-bottom:8px}.hero.hero-has-leader h1{font-size:23px;letter-spacing:0}.hero.hero-has-leader>div>p{font-size:12px}.yesterday-leader{grid-column:1;grid-row:2;border-left:0;border-top:1px solid #263b48;padding:16px 0 0;gap:11px}.leader-name{font-size:15px}.leader-gain{font-size:27px}.leader-metrics{gap:15px;padding-top:11px}.leader-metrics small{font-size:9px;white-space:normal}.leader-metrics b{font-size:14px}.leader-scope{font-size:9px}.yesterday-leader .leader-details{font-size:10px}.hero.hero-has-leader>.fee{grid-column:1;grid-row:3;border:0;padding:0;justify-self:end;font-size:10px}.hero.hero-has-leader>.fee .fee-range{font-size:19px}.hero.hero-has-leader>.fee small,.hero.hero-has-leader>.fee .fee-specific{display:none}}

/* Hide the settlement timestamp in the header; retain settlement logic. */
.yesterday-leader .leader-date{display:none}

/* Harmonize the header with the app's compact panel typography. */
.hero.hero-has-leader{grid-template-columns:minmax(320px,.9fr) minmax(420px,1.5fr) minmax(180px,220px);gap:26px;padding:22px 0;margin-bottom:8px}
.hero.hero-has-leader h1{font-size:26px;line-height:1.4;letter-spacing:-.3px}
.hero.hero-has-leader>div>p{font-size:12px;line-height:1.75;max-width:42em}
.hero.hero-has-leader>.fee{white-space:normal;min-width:0;max-width:220px;text-align:left;font-size:11px;line-height:1.7;padding-left:22px}
.hero.hero-has-leader>.fee .fee-range{font-size:22px}
.hero.hero-has-leader>.fee small,.hero.hero-has-leader>.fee .fee-specific{font-size:10px;line-height:1.65}
.yesterday-leader{padding-left:24px;gap:10px}
.leader-name{font-size:16px;font-weight:500}
.leader-gain{font-size:27px;letter-spacing:-.4px}
.leader-metrics{grid-template-columns:1.25fr 1fr .8fr;gap:16px;padding-top:10px}
.leader-metrics b{font-size:14px}
.leader-foot{justify-content:flex-end}
@media(min-width:1101px) and (max-width:1400px){.hero.hero-has-leader{grid-template-columns:minmax(280px,.85fr) minmax(330px,1.3fr) minmax(170px,200px);gap:20px}.hero.hero-has-leader h1{font-size:24px}.hero.hero-has-leader>div>p{font-size:11px}.hero.hero-has-leader>.fee{font-size:10px;padding-left:18px}.hero.hero-has-leader>.fee .fee-range{font-size:20px}.yesterday-leader{padding-left:20px}.leader-gain{font-size:25px}}
@media(min-width:701px) and (max-width:1100px){.hero.hero-has-leader{grid-template-columns:minmax(240px,.85fr) minmax(320px,1.15fr);gap:20px}.hero.hero-has-leader>.fee{max-width:none;padding:0;grid-column:1;grid-row:2}.yesterday-leader{grid-column:2;grid-row:1/3;padding-left:20px}.hero.hero-has-leader h1{font-size:24px}}
@media(max-width:700px){.hero.hero-has-leader{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px 0 14px}.hero.hero-has-leader h1{font-size:23px}.hero.hero-has-leader>.fee{max-width:none;grid-column:1;grid-row:3;padding:0;text-align:right}.yesterday-leader{grid-column:1;grid-row:2;padding:14px 0 0}.leader-name{font-size:14px}.leader-gain{font-size:25px}.leader-metrics{gap:14px}}
/* Keep navigation anchored to the brand; let the action group wrap as a unit. */
.page>header{justify-content:flex-start;flex-wrap:wrap;height:auto;min-height:64px;gap:12px 24px;padding:10px 0}
.page>header>.brand{flex:0 0 auto}
.page>header>nav{flex:0 0 auto;order:0;width:auto;justify-content:flex-start;flex-wrap:nowrap;gap:8px;margin-left:12px}
.page>header>nav button{white-space:nowrap;flex:0 0 auto;padding:9px 10px}
.page>header>div{flex:0 0 auto;margin-left:auto;flex-wrap:nowrap;gap:7px}
.page>header>div button,.page>header>div select{white-space:nowrap;flex:0 0 auto}
@media(max-width:1100px) and (min-width:701px){.page>header{column-gap:20px}.page>header>nav{margin-left:4px;gap:6px}.page>header>div{flex-basis:100%;justify-content:flex-end}}
@media(max-width:700px){.page>header{gap:12px;padding:14px 0}.page>header>nav{order:3;flex:1 0 100%;width:100%;margin-left:0;gap:10px;justify-content:flex-start}.page>header>nav button{padding:8px 7px}.page>header>div{flex:1 1 100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap;gap:6px}}