/* Oil price tracker — extends insights.css tokens */
:root {
  /* Matches the Insights chart palette */
  --c-wti: #1d2125;    /* chart ink */
  --c-brent: #2a8c96;  /* chart teal */
  --c-wcs: #e21e46;    /* chart crimson (Alberta highlight) */
  --mint: #61e4c5;
  --mint-soft: #e3faf4;
  --pink-soft: #ffe3ea;
  --up: #0f8f6c;
  --down: #d1173f;
}
.band-tool { padding: 4rem 2rem 3.2rem; }
.band-inner.wide { max-width: 1200px; }
.band .section-label a { color: inherit; text-decoration: none; }
.band .section-label a:hover { color: #fff; }

.tool { max-width: 1200px; margin: 0 auto; padding: 2.2rem 2rem 1rem; }
.tool-h { font-family: 'Nunito', sans-serif; color: var(--teal-deeper); font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-bottom: 2rem; }
.seg { display: inline-flex; align-items: center; border: 1.5px solid #2a8c96; }
.seg-label { font-family: 'Nunito', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-dark); padding: 0 .9rem; border-right: 1.5px solid #2a8c96; align-self: stretch; display: flex; align-items: center; background: var(--mint-soft); }
.seg button { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .08em; padding: .55rem 1.2rem; border: 0; background: #fff; color: var(--teal-dark); cursor: pointer; }
.seg button + button { border-left: 1.5px solid #2a8c96; }
.seg button[aria-checked="true"] { background: var(--mint); color: #0e3a3f; }
.seg button:hover:not([aria-checked="true"]) { background: var(--mint-soft); }
.fx-note { font-size: .85rem; color: var(--text-mid); }

.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 2.6rem; }
.price-card { border: 1px solid #dcefea; border-top: 5px solid var(--c, var(--teal)); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, #fff) 0%, #fff 55%); padding: 1.3rem 1.4rem 1.2rem; }
.price-card .name { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mid); display: flex; justify-content: space-between; gap: .5rem; }
.price-card .name small { letter-spacing: .06em; text-transform: none; font-weight: 600; color: var(--text-mid); opacity: .8; }
.price-card .value { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); color: #1d2125; line-height: 1.15; margin: .45rem 0 .35rem; font-variant-numeric: tabular-nums; }
.price-card .value span { font-size: .5em; font-weight: 600; color: var(--text-mid); margin-left: .25rem; }
.price-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: .85rem; color: var(--text-mid); }
.chg { font-weight: 700; font-variant-numeric: tabular-nums; }
.chg.up { color: var(--up); } .chg.down { color: var(--down); } .chg.flat { color: var(--text-mid); }
.stale { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a3122f; background: var(--pink-soft); padding: .05rem .45rem; }

.chart-wrap { border: 1px solid #dcefea; border-top: 5px solid var(--mint); background: #fff; padding: 1.4rem 1.4rem 1rem; margin-bottom: 2.6rem; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; }
.chart-head .tool-h { margin-bottom: 0; }
.series-toggles { display: flex; flex-wrap: wrap; gap: .5rem; }
.s-chip { display: inline-flex; align-items: center; gap: .45rem; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .82rem; padding: .4rem .85rem; border: 1.5px solid var(--line); background: #fff; color: var(--text-dark); cursor: pointer; }
.s-chip i { width: 14px; height: 3px; background: var(--c); display: inline-block; }
.s-chip small { font-weight: 600; color: var(--text-mid); }
.s-chip[data-s="wti"] { --c: var(--c-wti); } .s-chip[data-s="brent"] { --c: var(--c-brent); } .s-chip[data-s="wcs"] { --c: var(--c-wcs); }
.s-chip[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); }
.s-chip[aria-pressed="false"] { color: var(--text-mid); opacity: .65; }
.s-chip[aria-pressed="false"] i { background: #cfdcdc; }
.s-chip i { height: 4px; }
.hint { font-size: .82rem; color: var(--text-mid); margin: .6rem 0 .4rem; }
.chart { width: 100%; height: 520px; }
.chart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; font-size: .85rem; color: var(--text-mid); border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .3rem; }
.btn-sm { padding: .5rem 1rem; font-size: .72rem; }

.about-data { max-width: 860px; }
.about-data ul { padding-left: 1.1rem; display: grid; gap: .55rem; color: var(--text-mid); line-height: 1.75; }
.about-data strong { color: var(--text-dark); }
.updated { margin-top: 1rem; font-size: .85rem; color: var(--text-mid); }
.err-box { border: 1px solid #e3c2ba; background: #fbefec; color: var(--danger); padding: 1rem 1.2rem; }

@media (max-width: 820px) {
  .price-cards { grid-template-columns: 1fr; }
  .chart { height: 420px; }
}
@media (max-width: 700px) {
  .tool { padding: 1.6rem 1.1rem 1rem; }
  .band-tool { padding: 3rem 1.4rem 2.4rem; }
  .chart-wrap { padding: 1rem .6rem .8rem; }
  .chart { height: 380px; }
}

/* Plotly range slider: brand-tinted mask and handles */
.chart .rangeslider-mask-min, .chart .rangeslider-mask-max { fill: #2a8c96 !important; fill-opacity: .10 !important; }
.chart .rangeslider-handle-min, .chart .rangeslider-handle-max { fill: #61e4c5 !important; stroke: #2a8c96 !important; }
.chart .rangeselector .button rect { rx: 0; }
.tool-h { position: relative; }
.chart-head .tool-h::after, section > .tool-h::after { content: ""; display: block; width: 44px; height: 4px; background: var(--mint); margin-top: .45rem; }
.about-data a { color: #2a8c96; }
.indicative { margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed #f3c2cd; font-size: .85rem; color: var(--text-mid); }
.indicative strong { color: #1d2125; font-variant-numeric: tabular-nums; }