:root{--ink:#17171c;--dim:#6b6b73;--line:#e3e3e6;--bg:#fbfbfc;--accent:#2f5d8f;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
main,.masthead,.foot{max-width:760px;margin:0 auto;padding:0 20px}
.masthead{padding-block:22px}
.wordmark{font-weight:650;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.lede h1{font-size:clamp(22px,4vw,30px);line-height:1.3;letter-spacing:-.02em;font-weight:600}
.contrib{color:var(--dim);font-size:14px}
.work h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.card{display:block;border:1px solid var(--line);border-radius:10px;padding:18px 20px;
  background:#fff;text-decoration:none;color:inherit}
.card:hover{border-color:var(--accent)}
.card h3{margin:0 0 4px;font-size:18px;letter-spacing:-.015em}
.card p{margin:0;color:var(--dim);font-size:14px}
.card-meta{display:block;margin-top:10px;font-size:12px;color:var(--dim)}
.asks{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0}
.cta{border:1px solid var(--line);border-radius:8px;padding:11px 15px;background:#fff;
  text-decoration:none;color:var(--ink);font-size:14px}
.cta--disabled{color:var(--dim);background:#f4f4f6;cursor:default}
.cta--disabled small{display:block;font-size:11px;opacity:.8}
.foot{border-top:1px solid var(--line);margin-top:48px;padding-block:22px;
  color:var(--dim);font-size:13px}
.prov{font-style:italic}
@media (prefers-color-scheme:dark){
  :root{--ink:#ececed;--dim:#9a9aa2;--line:#2c2c33;--bg:#141418;--accent:#7fa9d4}
  .card,.cta{background:#1b1b21}
  .cta--disabled{background:#202027}
}

.chart{position:relative;margin:18px 0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.gl{stroke:var(--line)}
.ax{font-size:10px;fill:var(--dim)}
/* .ann-tip (site/js/chart-annotations.js) shares this box styling but is a
   separate class, not an additional class on the same element as
   .chart-tip -- each chart already has its own .chart-tip hover tooltip,
   and existing selectors like "#chart-stack .chart-tip" assume exactly one
   match. */
.chart-tip,.ann-tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--bg);
  font-size:11.5px;padding:8px 10px;border-radius:6px;line-height:1.5;z-index:9;max-width:240px}
/* Visually hidden but available to screen readers and to anyone who wants the
   numbers. Never display:none -- that removes it from the accessibility tree. */
.chart-table{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Ticker -- latest TECO newsroom headlines (see data/news.json) ---- */
.ticker{margin:0 0 14px;border:1px solid var(--line);border-radius:8px;background:#fff}
.ticker-track{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.ticker-track::-webkit-scrollbar{display:none}
.ticker-list{display:flex;gap:30px;list-style:none;margin:0;padding:9px 14px;white-space:nowrap}
.ticker-list li{flex:none}
.ticker-list a{color:var(--ink);text-decoration:none;font-size:13px}
.ticker-list a:hover{text-decoration:underline}
.ticker-list a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
@media (prefers-color-scheme:dark){ .ticker{background:#1b1b21} }

.lede-sentence{font-size:clamp(17px,2.6vw,21px);line-height:1.45;margin:14px 0 18px}
.lede-sentence b{background:#fdf0c9;color:#17171c;padding:0 3px;border-radius:3px}
.ctl{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.tg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.tg button{font:inherit;font-size:13px;padding:7px 13px;border:0;background:#fff;
  color:var(--dim);cursor:pointer}
.tg button.on{background:var(--ink);color:var(--bg)}
.slider{flex:1;min-width:230px;font-size:13px;color:var(--dim)}
.slider input{width:100%;accent-color:var(--accent)}
.tg button:disabled{opacity:.4;cursor:not-allowed}
@media (prefers-color-scheme:dark){ .tg button{background:#1b1b21} }

/* ---- Inflation toggle (Chart A + Chart C only) ------------------------- */
.infl-ctl{margin:2px 0 16px}
.infl-note{margin-top:8px}
.chart-axis-note{font-size:12px;font-style:italic;color:var(--dim);margin:6px 0 0}
/* The stated finding -- deliberately loud (accent left border, larger type)
   since the whole point is "make the difference impossible to miss." Shown
   only while the toggle is set to "adjusted" (see renderInflationFinding in
   site/js/inflation.js); [hidden] still applies even with the flex/block
   rules below because it is more specific than either. */
#inflation-finding{margin:0 0 18px}
.infl-finding{margin:0;font-size:14.5px;line-height:1.55;padding:12px 16px;
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;
  background:#fff}
.infl-finding-note{display:block;margin-top:6px;font-size:12.5px;font-style:italic;color:var(--dim)}
@media (prefers-color-scheme:dark){ .infl-finding{background:#1b1b21} }

/* ---- Shareable image card ---------------------------------------------- */
.share-ctl{margin:2px 0 18px}
.share-btn{font:inherit;font-size:13.5px;padding:9px 15px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.share-btn:hover{border-color:var(--accent)}
.share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.share-btn:disabled{opacity:.45;cursor:not-allowed}
.share-note{margin-top:8px}
@media (prefers-color-scheme:dark){ .share-btn{background:#1b1b21} }

/* ---- Social share controls (site/js/share-links.js) -- shared by the
       whole-page card above and every observation card (observations.js) - */
.share-social{margin-top:10px}
.share-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.share-chip{font:inherit;font-size:12.5px;padding:7px 12px;border:1px solid var(--line);
  border-radius:99px;background:#fff;color:var(--ink);cursor:pointer}
.share-chip:hover{border-color:var(--accent)}
.share-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.share-status{min-height:1.4em;margin:6px 0 0;font-size:12px;color:var(--dim)}
.share-fb-note{margin:8px 0 0;font-size:12px}
@media (prefers-color-scheme:dark){ .share-chip{background:#1b1b21} }

/* ---- Rate component summary table -- real and visible, not sr-only ----- */
.rate-summary-table{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:13.5px}
.rate-summary-table caption{text-align:left;font-size:12px;color:var(--dim);margin-bottom:6px}
.rate-summary-table th,.rate-summary-table td{padding:7px 10px;border-bottom:1px solid var(--line);
  text-align:left}
.rate-summary-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);font-weight:650}
.rate-summary-table tbody th{font-weight:650}
.rate-summary-month{color:var(--dim);font-size:12px}
.rate-summary-change--up{color:#9c4a1a}
.rate-summary-change--down{color:#2f6e4f}
.rate-summary-change--ended{color:var(--dim);font-style:italic}
@media (prefers-color-scheme:dark){
  .rate-summary-change--up{color:#d98a5a}
  .rate-summary-change--down{color:#7fc4a0}
}

/* ---- Benchmark -- TECO all-in vs. EIA's FL/US residential averages ----- */
.bench-invalid{margin:0}
.bench-panel{margin:6px 0 0}
.bench-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.bench-row{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;gap:10px;
  align-items:center;font-size:13px}
.bench-label{color:var(--dim)}
.bench-row--teco .bench-label{color:var(--ink);font-weight:650}
.bench-track{background:#eceef1;border-radius:5px;height:14px;overflow:hidden}
.bench-fill{display:block;height:100%;background:var(--accent);border-radius:5px}
.bench-row--teco .bench-fill{background:#9c4a1a}
.bench-value{font-variant-numeric:tabular-nums;font-weight:650;min-width:6.5em;text-align:right}
.bench-caption{margin:0 0 10px;font-size:13.5px;line-height:1.5}
.bench-disclosure{font-size:12.5px;line-height:1.55;color:var(--dim);background:#f4f4f6;
  border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.bench-disclosure p{margin:0 0 8px}
.bench-disclosure p:last-child{margin-bottom:0}
.bench-quote{font-style:italic}
.bench-source{font-size:11.5px}
@media (prefers-color-scheme:dark){
  .bench-track{background:#25252c}
  .bench-disclosure{background:#1b1b21}
}

/* ---- Observations -- generated, individually shareable cards ----------- */
.obs-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:14px 0}
.obs-card{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fff;
  scroll-margin-top:16px}
.obs-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.obs-stat{margin:0 0 6px;font-size:clamp(24px,4vw,32px);font-weight:750;letter-spacing:-.01em;
  color:var(--accent)}
.obs-sentence{margin:0 0 4px;font-size:14px;line-height:1.55}
.obs-share{margin-top:10px}
@media (prefers-color-scheme:dark){ .obs-card{background:#1b1b21} }
/* A shared-link landing highlight -- shape/position also change (the card
   scrolls into view and receives focus), so this is decoration on top of an
   already-meaningful state change, never the only signal. */
.obs-card--target{animation:obs-target-flash 2.4s ease-out 1}
@keyframes obs-target-flash{
  0%{box-shadow:0 0 0 3px var(--accent)}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){
  .obs-card--target{animation:none;box-shadow:0 0 0 3px var(--accent)}
}

/* ---- "Find this on your bill" helper (hand-drawn, invented sample values,
       never a real statement -- see the design spec, section 6 item 8) --- */
.bill-helper{margin-top:22px}
.bill-helper h3{font-size:16px;margin:0 0 8px}
.bill-diagram-figure{margin:14px 0 0}
.bill-diagram{display:block;width:100%;height:auto;max-width:640px}
.bill-diagram-figure figcaption{font-size:12px;font-style:italic;color:var(--dim);margin-top:8px}
.bh-title{font-size:14px;font-weight:700;fill:var(--ink)}
.bh-label{font-size:10.5px;font-weight:650;letter-spacing:.03em;fill:var(--dim)}
.bh-value{font-size:15px;font-weight:650;fill:var(--ink)}
.bh-explain{font-size:12.5px;fill:var(--dim)}
.bh-redact-label{font-size:12px;fill:var(--dim);font-style:italic}
.bh-badge{font-size:12px;font-weight:700;fill:#fff}

.note{font-size:13.5px;line-height:1.5;color:var(--dim);background:#f4f4f6;
  border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:0 0 14px}
@media (prefers-color-scheme:dark){ .note{background:#1b1b21} }

/* Chart B -- component grid */
.rc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:14px 0}
.rc-card{border:1px solid var(--line);border-top:3px solid var(--rc-color,var(--accent));
  border-radius:10px;padding:12px 14px;background:#fff}
.rc-name{margin:0 0 4px;font-size:12.5px;font-weight:650;color:var(--ink)}
.rc-value{font-size:17px;font-weight:650;letter-spacing:-.01em}
.rc-value .rc-unit{font-size:11px;font-weight:500;color:var(--dim);margin-left:1px}
.rc-spark{display:block;width:100%;height:40px;margin:6px 0 4px}
.rc-change{margin:0;font-size:12px;color:var(--dim)}
.rc-change--up{color:#9c4a1a}
.rc-change--down{color:#2f6e4f}
.rc-change--ended{color:var(--dim);font-style:italic}
@media (prefers-color-scheme:dark){
  .rc-card{background:#1b1b21}
  .rc-change--up{color:#d98a5a}
  .rc-change--down{color:#7fc4a0}
}

/* Chart C -- annotated line + drag-to-compare */
.ann{font-size:10.5px;fill:var(--ink)}
.ann-dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.ann-dot.ann-peak{fill:#9c4a1a}
.ann-dot.ann-end{fill:#6b6b73}
.line-caption{font-size:13px;color:var(--dim);margin:8px 0 0;min-height:1.6em}
.line-hit{cursor:crosshair}
.line-hit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Chart A + Chart C -- shared "what changed" pins (chart-annotations.js) */
.ann-pin{cursor:pointer}
.ann-pin-stem{stroke:var(--dim);stroke-width:1.4}
.ann-pin-dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.ann-pin:hover .ann-pin-dot,.ann-pin:focus-visible .ann-pin-dot{fill:#9c4a1a}
.ann-pin:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ann-tip-hint{display:block;margin-top:4px;font-style:italic;opacity:.85}

/* ---- masthead hero ---------------------------------------------------- */
.hero-name{
  font-size:clamp(34px,9vw,68px);
  font-weight:750;
  letter-spacing:-.03em;
  line-height:1.02;
  margin:14px 0 10px;
  text-transform:uppercase;
}
.hero-tagline{
  font-size:clamp(16px,2.4vw,20px);
  line-height:1.45;
  color:var(--dim);
  margin:0 0 6px;
  max-width:46ch;
}

/* ---- live indicator on an active work card ---------------------------- */
.card h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.live-dot{
  width:9px;height:9px;border-radius:50%;
  background:#18a558;
  box-shadow:0 0 0 0 rgba(24,165,88,.65);
  animation:live-pulse 1.6s ease-out infinite;
  flex:none;
}
@keyframes live-pulse{
  0%  {box-shadow:0 0 0 0   rgba(24,165,88,.65); opacity:1;}
  70% {box-shadow:0 0 0 7px rgba(24,165,88,0);   opacity:.55;}
  100%{box-shadow:0 0 0 0   rgba(24,165,88,0);   opacity:1;}
}
/* Blinking is decoration, not information: hold it steady for anyone who
   has asked the OS to reduce motion. The dot and label still read as live. */
@media (prefers-reduced-motion:reduce){
  .live-dot{animation:none;box-shadow:0 0 0 3px rgba(24,165,88,.22);}
}
.live-label{
  font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:#18a558;border:1px solid rgba(24,165,88,.4);border-radius:99px;
  padding:1px 7px;
}
.card-prov{
  margin:10px 2px 0;
  font-size:12.5px;
  font-style:italic;
  color:var(--dim);
}
@media (prefers-color-scheme:dark){
  .live-dot{background:#3ddc84;}
  .live-label{color:#3ddc84;border-color:rgba(61,220,132,.42);}
}

/* ---- Glossary -- every charge name is inspectable --------------------- */
[data-glossary]{cursor:help;border-bottom:1px dotted var(--dim)}
[data-glossary]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.glossary-pop{position:fixed;z-index:30;max-width:280px;background:var(--ink);color:var(--bg);
  font-size:12.5px;line-height:1.55;padding:10px 12px;border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.glossary-pop b{display:block;font-size:13px;margin-bottom:4px}

/* ---- Calculator -- "What would my bill be?" ---------------------------- */
.calc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;font-size:14px}
.calc-row label{color:var(--dim)}
.calc-row input{font:inherit;font-size:16px;width:5.5em;padding:6px 8px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.calc-now{margin:2px 0 14px}
.calc-breakdown{list-style:none;margin:0 0 18px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px 18px}
.calc-breakdown li{display:flex;justify-content:space-between;gap:10px;
  font-size:13.5px;padding:5px 0;border-bottom:1px solid var(--line)}
.calc-name{border-bottom-width:2px;border-bottom-style:solid}
.calc-amt{font-variant-numeric:tabular-nums;font-weight:650}
/* A null component (ended / not charged / not published) is text, not a
   figure -- deliberately NOT bold or tabular-numeric like .calc-amt, so it
   never reads as a dollar amount (see rates.js's componentState()). */
.calc-amt--note{font-weight:500;font-style:italic;color:var(--dim);font-variant-numeric:normal}
.calc-spark-big{cursor:crosshair}
.calc-spark-big:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-color-scheme:dark){ .calc-row input{background:#1b1b21;color:var(--ink)} }
/* Same rule inside the stack chart's tooltip (site/js/chart-stack.js) -- an
   <i> wrapper marks a component note (ended/not charged/not published)
   instead of a dollar figure, styled muted rather than bold like the
   figures around it. */
.chart-tip i{font-style:italic;opacity:.75;font-weight:400}

/* A plain rule between the calculator's "find this on your bill" figure and
   the gas section -- the figcaption right above it is easy to misread as
   describing the gas section it happens to sit near, so this adds a clear,
   deliberate visual break rather than relying on spacing alone. */
.section-break{border:0;border-top:1px solid var(--line);margin:28px 0}

/* ---- Gas -- deliberately secondary, a companion not a co-headline ------ */
.gas-section{margin-top:24px;padding:14px 16px 16px;border:1px solid var(--line);
  border-radius:10px;background:#f4f4f6}
.gas-section h2{font-size:15px;margin:0 0 6px;color:var(--dim);font-weight:650}
.gas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;margin:10px 0 4px}
.gas-card{border:1px solid var(--line);border-top:3px solid var(--gas-color,var(--accent));
  border-radius:8px;padding:9px 11px;background:#fff}
.gas-name{margin:0 0 3px;font-size:11px;font-weight:650;color:var(--ink)}
.gas-value{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.gas-value .gas-unit{font-size:10px;font-weight:500;color:var(--dim);margin-left:1px}
.gas-spark{display:block;width:100%;height:30px;margin:4px 0 3px}
.gas-change{margin:0;font-size:11px;color:var(--dim)}
.gas-note{margin:5px 0 0;font-size:10.5px;font-style:italic;color:var(--dim)}
@media (prefers-color-scheme:dark){
  .gas-section{background:#1b1b21}
  .gas-card{background:#141418}
}

/* ---- page header identity block --------------------------------------- */
.masthead{padding-block:20px 16px;}
.masthead-tagline{
  text-transform:uppercase;
  letter-spacing:.055em;
  font-size:clamp(10.5px,1.5vw,12.5px);
  font-weight:600;
  line-height:1.5;
  color:var(--dim);
  margin:7px 0 0;
  max-width:62ch;
}

/* ---- wordmark: uppercase in CSS so screen readers still get "Tampa Thinks"
       as words rather than spelling it out letter by letter ---------------- */
.wordmark{text-transform:uppercase;letter-spacing:.02em;font-weight:700;}

/* ---- work card: title block is the link, byline and provenance are not --- */
.card{display:block;}
.card-main{display:block;text-decoration:none;color:inherit;}
.card-main h3{margin:0 0 4px;}
.card-main p{margin:0;}
.card-prov{
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;font-style:italic;color:var(--dim);
}
.card-by{
  margin:6px 0 0;font-size:12.5px;color:var(--dim);
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
}
.card-by a{color:var(--accent);}
.card-by .card-meta{margin:0;margin-left:auto;}