/*
 * Heating-oil comparison page: oil-only deltas.
 *
 * assets/css/comparator-page.css and assets/css/comparator-decision-support.css
 * are loaded unchanged and carry the whole design. This file only adds what the
 * oil page has and the electricity page does not. Everything is scoped exactly
 * like the production files and additionally gated on .hp-oil-comparator so the
 * electricity comparator is untouched.
 */

@scope (.hp-claude-comparator) {
  /* B1: the litre price must never wrap away from its unit. */
  :scope.hp-oil-comparator .offer-est-num,
  :scope.hp-oil-comparator .mini-price {
    text-wrap: nowrap;
  }

  /* H1: 1 000 l and 2 000 l are their own columns under the selected-volume price. */
  :scope.hp-oil-comparator .offer-volume-prices {
    display: flex;
    gap: .75rem;
    margin-top: .4rem;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  :scope.hp-oil-comparator .offer-volume-prices > div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 5.5rem;
  }

  :scope.hp-oil-comparator .offer-volume-prices dt {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
  }

  :scope.hp-oil-comparator .offer-volume-prices dd {
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    color: var(--head);
    font-variant-numeric: tabular-nums;
  }

  /* B4: rows outside the price ranking read as a muted state, never as a price. */
  :scope.hp-oil-comparator .offer[data-comparison-group="market_unranked"] {
    background: var(--surface);
    border-style: dashed;
  }

  /* The state is carried by text, not by colour alone (B4). */
  :scope.hp-oil-comparator .offer-status-note,
  :scope.hp-oil-comparator .offer-suspect-note {
    color: var(--warn-ink);
    background: var(--warn-bg);
    border-radius: var(--r-s);
    padding: .3rem .5rem;
    margin-top: .4rem;
    font-weight: 600;
  }

  /* H5: the cheapest row is marked, the CTA keeps the same look on every row. */
  :scope.hp-oil-comparator .offer-highlight.offer-cheapest {
    color: #0B4636;
    background: var(--mint);
    border-color: #A9DECB;
  }

  /* The electricity page uses .consumption-row next to a slider, where a transparent
     border reads fine. Here it is a bare postal-code field on a white card, so it needs
     the same visible edge the other side-card inputs already have. */
  :scope.hp-oil-comparator .side-card .consumption-row input {
    border-color: var(--line);
  }

  /* The routed long tail: regions, grades, quantities and supplier pages need somewhere
     to be linked from, and a reader needs somewhere to find them. Dense on purpose, so
     fifty links read as a directory rather than as fifty calls to action. */
  :scope.hp-oil-comparator .hp-oil-browse {
    border-top: 1px solid var(--line);
    padding: 1.5rem 0 2rem;
  }

  :scope.hp-oil-comparator .hp-oil-browse h2 {
    font-size: 1.125rem;
    margin: 0 0 1rem;
    color: var(--head);
  }

  :scope.hp-oil-comparator .hp-oil-browse-group + .hp-oil-browse-group {
    margin-top: 1rem;
  }

  :scope.hp-oil-comparator .hp-oil-browse-group h3 {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin: 0 0 .4rem;
  }

  :scope.hp-oil-comparator .hp-oil-browse-group ul {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  :scope.hp-oil-comparator .hp-oil-browse-group li {
    margin: 0;
  }

  /* A dense list of short labels reads as prose unless the links are marked as links. */
  :scope.hp-oil-comparator .hp-oil-browse-group a {
    font-size: .875rem;
    color: var(--teal-dark, #0B4636);
    text-decoration: underline;
    text-underline-offset: .15em;
    text-decoration-thickness: from-font;
  }

  :scope.hp-oil-comparator .hp-oil-browse-group a:hover,
  :scope.hp-oil-comparator .hp-oil-browse-group a:focus-visible {
    text-decoration-thickness: 2px;
  }

  /*
   * Internal linking: breadcrumb, language switch and the "Katso myös" strip.
   *
   * Layout only. The site theme owns the look of .hp-breadcrumb; these rules just
   * stop the lists rendering as bullets stacked under the hero.
   */
  :scope.hp-oil-comparator .hp-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
  }

  :scope.hp-oil-comparator .hp-breadcrumb li + li::before {
    content: "›";
    margin-right: .5rem;
    opacity: .6;
  }

  :scope.hp-oil-comparator .hp-lang-switch {
    margin-left: .5rem;
    white-space: nowrap;
  }

  :scope.hp-oil-comparator .hp-oil-family-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    margin-block: 1rem;
    font-size: .875rem;
  }

  :scope.hp-oil-comparator .hp-oil-family-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :scope.hp-oil-comparator .hp-oil-family-links-label {
    font-weight: 600;
  }

  @media (max-width: 640px) {
    :scope.hp-oil-comparator .offer-volume-prices {
      justify-content: flex-start;
    }
  }
}