/* ==========================================================================
   DIM Electrical: free electricity comparison page styles
   Loaded only by /free-electricity/. Split out of main.css so the rest of
   the site carries none of its weight while that page is parked.
   ========================================================================== */
/* ==========================================================================
   Free electricity comparison (/free-electricity/)
   Reuses the core tokens. The only additions are three status colours,
   scoped to .fe, because live / launching / announced has to be scannable
   at a glance and the base palette is warm-only.
   ========================================================================== */

.fe {
  --fe-live: #2E7D4F;
  --fe-live-tint: #E7F2EC;
  --fe-soon: #A96C05;
  --fe-soon-tint: var(--sun-tint);
  --fe-off: var(--muted);
  --fe-off-tint: var(--wash);
}

/* Top of page ------------------------------------------------------------
   The page opens straight on the comparison, so the first section carries a
   little extra top padding to clear the sticky header. */

.fe-top { padding-top: clamp(28px, 5vw, 52px); }
.fe-top h1 { max-width: 26ch; }
.fe-freshness {
  margin-top: 14px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}
.fe-freshness time { font-weight: 700; color: var(--ink); }

/* Two column shell ------------------------------------------------------- */

.fe-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* Filters ---------------------------------------------------------------- */

.fe-filters {
  position: sticky;
  top: 88px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 16px 12px;
  box-shadow: var(--shadow-sm);
  max-height: calc(100svh - 108px);
  overflow-y: auto;
}
.fe-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.fe-filters__head h2 { font-size: 1rem; margin: 0; font-family: var(--font-display); }
.fe-clear {
  background: none;
  border: 0;
  padding: 4px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--orange);
  cursor: pointer;
  border-radius: 6px;
  text-decoration: underline;
}
.fe-clear:hover { color: var(--orange-hover); }

.fe-group { border-bottom: 1px solid var(--line); }
.fe-group:last-child { border-bottom: 0; }
.fe-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 6px;
}
.fe-group > summary::-webkit-details-marker { display: none; }
.fe-group > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.fe-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fe-group__body { padding-bottom: 12px; display: grid; gap: 2px; }

.fe-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 6px 6px 2px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.35;
}
.fe-opt:hover { background: var(--wash); }
.fe-opt input { width: 17px; height: 17px; flex: none; accent-color: var(--orange); cursor: pointer; margin: 0; }
.fe-opt__n { margin-left: auto; font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.fe-searchwrap { padding: 2px 0 10px; }
.fe-searchwrap input {
  width: 100%;
  font: inherit;
  font-size: 0.88rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  min-height: 42px;
}
.fe-searchwrap input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }

.fe-drawer-btn { display: none; }

/* Results ---------------------------------------------------------------- */

.fe-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
}
.fe-count { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.fe-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fe-sortwrap { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); }
.fe-sortwrap select {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 30px 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  min-height: 42px;
}
.fe-sortwrap select:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.fe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.fe-offer {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fe-offer:hover { box-shadow: var(--shadow); border-color: #D9D3CE; }
.fe-offer[hidden] { display: none; }

.fe-offer__top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}
.fe-rank {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tint);
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.fe-offer[data-rank="1"] .fe-rank { background: var(--orange); color: var(--white); }

.fe-offer__id { min-width: 0; }
.fe-offer__provider {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Retailer logo in place of the provider name. The uppercase/letter-spacing
   above would otherwise still apply to the line box, and the modifier keeps
   the two regulated schemes (which have no logo) on the text treatment. */
.fe-offer__provider--logo {
  margin: 0 0 2px;
  letter-spacing: normal;
  line-height: 0;
}
/* Height is fixed and width is free, so every mark reads at the same optical
   weight no matter its aspect ratio. max-width stops the very wide ones
   (ActewAGL is 7.8:1) from pushing the plan name around on narrow cards. */
.fe-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: min(180px, 100%);
  object-fit: contain;
  object-position: left center;
}
.fe-offer__name { margin: 2px 0 0; font-size: clamp(1.02rem, 2.4vw, 1.17rem); line-height: 1.25; }
.fe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fe-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  background: var(--wash);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.fe-chip--reg { background: var(--tint); color: var(--orange-hover); border-color: #F3D9C2; }
.fe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
}
.fe-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.fe-badge--live { background: var(--fe-live-tint); color: var(--fe-live); }
.fe-badge--launching { background: var(--fe-soon-tint); color: var(--fe-soon); }
.fe-badge--announced,
.fe-badge--unconfirmed { background: var(--fe-off-tint); color: var(--fe-off); }

.fe-offer__go { flex: none; }
.fe-offer__go .btn { white-space: nowrap; }

.fe-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px 16px;
  margin: 15px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fe-fact { margin: 0; min-width: 0; }
.fe-fact dt {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.fe-fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: break-word;
}
.fe-fact dd small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.fe-unk { color: var(--muted); font-weight: 600; font-style: italic; }

.fe-catch {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--wash);
  font-size: 0.86rem;
  line-height: 1.5;
  color: #55504d;
}
.fe-catch svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--orange); }
.fe-catch b { color: var(--ink); }

.fe-more { margin-top: 12px; }
.fe-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--orange);
  padding: 5px 2px;
  border-radius: 6px;
}
.fe-more > summary::-webkit-details-marker { display: none; }
.fe-more > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.fe-more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.fe-more__body { padding-top: 10px; font-size: 0.88rem; line-height: 1.6; color: #55504d; }
.fe-more__body ul { margin: 6px 0 0; padding-left: 18px; }
.fe-more__body li { margin-bottom: 5px; }
.fe-more__body h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 12px 0 2px;
}
.fe-more__body h4:first-child { margin-top: 0; }
.fe-src { font-size: 0.8rem; word-break: break-word; }
.fe-src a { color: var(--muted); }

.fe-empty {
  display: none;
  text-align: center;
  padding: 46px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
}
.fe-empty h3 { margin: 0 0 6px; }

/* Methodology ------------------------------------------------------------ */

.fe-method {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 0 18px;
}
.fe-method > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 6px;
}
.fe-method > summary::-webkit-details-marker { display: none; }
.fe-method > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.fe-method[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fe-method__body { padding-bottom: 18px; font-size: 0.92rem; line-height: 1.65; color: #55504d; }
.fe-weights { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.fe-weights li { display: grid; grid-template-columns: 168px minmax(60px, 1fr) 44px; gap: 12px; align-items: center; font-size: 0.87rem; }
.fe-weights b { font-weight: 700; color: var(--ink); }
.fe-weights__track { background: var(--tint); border-radius: 999px; height: 7px; }
.fe-weights i { display: block; height: 7px; border-radius: 999px; background: var(--orange); min-width: 4px; }
.fe-weights span { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; font-size: 0.82rem; text-align: right; }

/* Timeline --------------------------------------------------------------- */

.fe-time { list-style: none; margin: 0; padding: 0; position: relative; }
.fe-time::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(var(--orange), var(--line));
}
.fe-time li { position: relative; padding: 0 0 26px 38px; }
.fe-time li:last-child { padding-bottom: 0; }
.fe-time li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--line);
}
.fe-time li[data-state="live"]::before { border-color: var(--fe-live); }
.fe-time li[data-state="launching"]::before { border-color: var(--sun); }
.fe-time__date {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.83rem;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fe-time h3 { margin: 3px 0 4px; font-size: 1.02rem; }
.fe-time p { margin: 0; font-size: 0.9rem; color: #55504d; line-height: 1.6; }

/* Corner battery nudge ---------------------------------------------------
   Small persistent card in the bottom right. It carries the battery CTA now
   that the long battery section has been removed from the page body, so it
   has to stay put rather than auto dismiss. */

.fe-nudge {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95; /* above the sticky bar (90), below the offer modal */
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 18px 18px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px rgba(35, 31, 32, 0.18);
  /* translate, not bottom, so the entry animation never triggers layout */
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 260ms ease-out, transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fe-nudge[hidden] { display: none; }
.fe-nudge:not(.is-open) { pointer-events: none; }
.fe-nudge.is-open { opacity: 1; transform: none; pointer-events: auto; }

.fe-nudge__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fe-orange-text, #A85114);
}
.fe-nudge__title {
  margin: 0 0 8px;
  padding-right: 26px; /* clear the close button */
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--ink);
}
.fe-nudge__body {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #55504d;
}
.fe-nudge .btn { width: 100%; }
.fe-nudge__trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6b6562;
}
.fe-nudge__trust .icon { width: 15px; height: 15px; flex: none; fill: currentColor; }

.fe-nudge__x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #6b6562;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out;
}
.fe-nudge__x:hover { background: var(--wash); color: var(--ink); }
.fe-nudge :focus-visible { outline: 3px solid var(--fe-orange-text, #A85114); outline-offset: 2px; }

/* Clear the mobile sticky action bar, which is fixed to the bottom from 880px
   down and would otherwise sit on top of the card. The bar is two stacked
   full-width buttons from 880px down (~139px) and a single row at 560px and
   below (~76px), so the fallbacks differ. free-electricity.js overwrites
   --fe-nudge-bottom with the bar's real measured height, which keeps this
   correct if the bar's contents ever change. */
@media (max-width: 880px) {
  .fe-nudge { right: 12px; left: 12px; width: auto; bottom: var(--fe-nudge-bottom, 153px); }
}
@media (max-width: 560px) {
  .fe-nudge { bottom: var(--fe-nudge-bottom, 90px); padding: 16px 16px 14px; }
  .fe-nudge__title { font-size: 1rem; }
}

/* Short screens. On a 640 to 667px tall phone the full card runs to 44% of the
   viewport, which is a takeover rather than a nudge, so the descriptive line
   drops and the headline and button carry it. */
@media (max-height: 720px) {
  .fe-nudge__body { display: none; }
  .fe-nudge__title { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fe-nudge { transition: none; transform: none; }
}

/* Disclaimer ------------------------------------------------------------- */

.fe-disc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
  padding: clamp(18px, 3vw, 26px);
  font-size: 0.87rem;
  line-height: 1.65;
  color: #55504d;
}
.fe-disc h2 { font-size: 1.02rem; margin: 0 0 8px; }
.fe-disc p { margin: 0 0 10px; }
.fe-disc p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .fe-group > summary::after,
  .fe-method > summary::after,
  .fe-more > summary::after { transition: none; }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 980px) {
  .fe-layout { grid-template-columns: 1fr; }
  .fe-filters {
    position: static;
    max-height: none;
    overflow: visible;
    display: none;
    margin-bottom: 16px;
  }
  .fe-filters.is-open { display: block; }
  .fe-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 14px;
  }
  .fe-drawer-btn__n {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font-size: 0.74rem;
    font-weight: 800;
  }
}

@media (max-width: 620px) {
  .fe-offer { padding: 14px 14px 16px; }
  .fe-offer__top { grid-template-columns: 38px minmax(0, 1fr); }
  .fe-rank { width: 38px; height: 38px; font-size: 0.95rem; }
  .fe-offer__go { grid-column: 1 / -1; margin-top: 4px; }
  .fe-offer__go .btn { width: 100%; }
  .fe-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; }
  .fe-weights li { grid-template-columns: 1fr auto; }
  .fe-weights__track { grid-column: 1 / -1; order: 3; }
}

/* Quick state chips above the results ------------------------------------ */
.fe-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.fe-quick__lbl { font-size: 0.84rem; color: var(--muted); font-weight: 600; align-self: center; margin-right: 3px; }
.fe-quick button {
  font: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  padding: 7px 14px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fe-quick button:hover { border-color: var(--orange); background: var(--tint); }
.fe-quick button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--white); }

/* Anchor targets must clear the sticky header when jumped to */
.fe [id], .fe-method { scroll-margin-top: 96px; }

/* Accessible text colours for this page ---------------------------------
   The brand orange only reaches 3.07:1 on white, which is fine for large
   display text but fails WCAG AA for the small bold labels used all over
   this comparison. These deeper tones read as the same brand family and
   clear 4.5:1. Scoped to .fe so nothing else on the site shifts. */
.fe {
  --fe-live: #256B42;
  --fe-soon: #8F5A04;
  --fe-orange-text: #A85114;
}
.fe .fe-clear,
.fe .fe-more > summary,
.fe .fe-time__date,
.fe .fe-nudge__eyebrow { color: var(--fe-orange-text, #A85114); }
.fe .fe-clear:hover { color: #7d3a0b; }
.fe .fe-chip--reg { color: var(--fe-orange-text); }
.fe .fe-rank { color: var(--fe-orange-text); }
.fe .fe-quick button[aria-pressed="true"] {
  background: var(--fe-orange-text);
  border-color: var(--fe-orange-text);
}
.fe .fe-quick button:hover { border-color: var(--fe-orange-text); }
/* the #1 badge inverts to a solid fill, so it needs the deeper orange too */
.fe .fe-offer[data-rank="1"] .fe-rank { background: var(--fe-orange-text); color: var(--white); }