/*
 * Heating-oil price history page: what the comparison page CSS does not have.
 *
 * Loaded after comparator-page.css, comparator-decision-support.css and the two
 * heating-oil sheets. Scoped like them and gated on .hp-oil-history so nothing
 * here reaches the comparison pages.
 */

@scope (.hp-claude-comparator) {
  /* Hero answer card: the reference price, then the changes as a definition list. */
  :scope.hp-oil-history .hp-oh-answer {
    position: relative;
    background: #fff;
    color: var(--ink);
    border-radius: var(--r);
    padding: 1.25rem 1.4rem 1.1rem;
    box-shadow: 0 18px 40px rgba(3, 18, 16, .28);
    align-self: center;
  }

  :scope.hp-oil-history .hp-oh-answer::before {
    content: "";
    position: absolute;
    inset: -2rem -2.5rem;
    background: radial-gradient(closest-side, rgba(38, 166, 134, .18), transparent 70%);
    z-index: -1;
  }

  :scope.hp-oil-history .hp-oh-answer-label {
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-answer-price {
    margin: .25rem 0 0;
    font-family: var(--font-head);
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.05;
    color: var(--head);
    text-wrap: nowrap;
  }

  :scope.hp-oil-history .hp-oh-answer-price small,
  :scope.hp-oil-history .hp-oh-card-price small {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-answer-meta,
  :scope.hp-oil-history .hp-oh-card-meta {
    margin: .3rem 0 0;
    font-size: .875rem;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-answer-facts {
    display: grid;
    gap: .5rem;
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
  }

  :scope.hp-oil-history .hp-oh-answer-facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }

  :scope.hp-oil-history .hp-oh-answer-facts dt {
    font-size: .875rem;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-answer-facts dt small {
    font-size: .75rem;
  }

  :scope.hp-oil-history .hp-oh-answer-facts dd {
    margin: 0;
    font-weight: 700;
    color: var(--head);
    text-wrap: nowrap;
  }

  :scope.hp-oil-history .hp-oh-today {
    margin-top: .6rem;
  }

  /* Chart section. */
  :scope.hp-oil-history .hp-oh-chart-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 2rem;
  }

  :scope.hp-oil-history .hp-oh-segmented {
    display: inline-flex;
    padding: .25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    gap: .15rem;
  }

  :scope.hp-oil-history .hp-oh-segmented button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--head);
    font: inherit;
    font-weight: 600;
    font-size: .9375rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    cursor: pointer;
  }

  :scope.hp-oil-history .hp-oh-segmented button.is-active,
  :scope.hp-oil-history .hp-oh-segmented button[aria-pressed="true"] {
    background: var(--navy);
    color: #fff;
  }

  :scope.hp-oil-history .hp-oh-segmented button:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
  }

  :scope.hp-oil-history .hp-oh-chart-stage {
    margin-top: 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .75rem .5rem .25rem;
  }

  :scope.hp-oil-history .hp-oh-chart {
    width: 100%;
    height: clamp(300px, 45vw, 440px);
    outline: none;
  }

  :scope.hp-oil-history .hp-oh-chart:focus-visible {
    box-shadow: 0 0 0 3px var(--teal);
    border-radius: var(--r-s);
  }

  :scope.hp-oil-history .hp-oh-status {
    margin: .6rem 0 0;
    font-size: .875rem;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-legend {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: grid;
    gap: .25rem;
    font-size: .875rem;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-legend b {
    color: var(--head);
  }

  /* Now cards: the day's cheapest and the statistic's latest month side by side. */
  :scope.hp-oil-history .hp-oh-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
  }

  :scope.hp-oil-history .hp-oh-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.25rem 1.4rem;
  }

  :scope.hp-oil-history .hp-oh-card-statfin {
    background: var(--surface);
  }

  :scope.hp-oil-history .hp-oh-card-label {
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-card-title {
    margin: .35rem 0 0;
    font-weight: 700;
    color: var(--head);
  }

  :scope.hp-oil-history .hp-oh-card-price {
    margin: .25rem 0 0;
    font-family: var(--font-head);
    font-size: 2rem;
    line-height: 1.1;
    color: var(--head);
  }

  :scope.hp-oil-history .hp-oh-card-note {
    margin: .6rem 0 0;
    font-size: .875rem;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin: 1rem 0 0;
  }

  :scope.hp-oil-history .hp-oh-card-actions .link-plain {
    color: var(--teal-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Tables: the wrapper scrolls, never the page (design spec D8). */
  :scope.hp-oil-history .hp-oh-table-wrap {
    margin-top: 1.5rem;
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
  }

  :scope.hp-oil-history .hp-oh-table-wrap:focus-visible {
    outline: 3px solid var(--teal);
  }

  :scope.hp-oil-history .hp-oh-table-years {
    max-height: 32rem;
    overflow-y: auto;
  }

  :scope.hp-oil-history .hp-oh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    min-width: 34rem;
  }

  :scope.hp-oil-history .hp-oh-table th,
  :scope.hp-oil-history .hp-oh-table td {
    padding: .6rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }

  :scope.hp-oil-history .hp-oh-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    z-index: 1;
  }

  :scope.hp-oil-history .hp-oh-table tbody th {
    font-weight: 600;
    color: var(--head);
  }

  :scope.hp-oil-history .hp-oh-table tbody th small {
    font-weight: 400;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  :scope.hp-oil-history .hp-oh-table td.hp-oh-up { color: #9A3412; }
  :scope.hp-oil-history .hp-oh-table td.hp-oh-down { color: #0B4636; }
  :scope.hp-oil-history .hp-oh-table td.hp-oh-empty { color: var(--muted); }

  :scope.hp-oil-history .hp-oh-source {
    margin: .75rem 0 0;
    font-size: .875rem;
    color: var(--muted);
  }

  /* Brent crude block: the quote card and a one year sparkline, stacked on phones. */
  :scope.hp-oil-history .hp-oh-brent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: stretch;
    margin-top: 1.5rem;
  }

  :scope.hp-oil-history .hp-oh-brent-date {
    display: block;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-brent-spark {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .6rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.25rem 1.4rem;
  }

  :scope.hp-oil-history .hp-oh-brent-spark svg {
    display: block;
    width: 100%;
    height: clamp(96px, 18vw, 160px);
  }

  :scope.hp-oil-history .hp-oh-brent-spark figcaption {
    font-size: .875rem;
    color: var(--muted);
  }

  :scope.hp-oil-history .hp-oh-brent-text {
    margin: 1.25rem 0 0;
    max-width: 72ch;
  }

  :scope.hp-oil-history .hp-oh-brent-text a {
    color: var(--teal-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media (max-width: 760px) {
    :scope.hp-oil-history .hp-oh-brent {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 960px) {
    :scope.hp-oil-history .hp-oh-answer {
      margin-top: 1.5rem;
    }
  }

  @media (max-width: 640px) {
    /* Full-bleed chart on phones: the card's side padding goes, the page gutter stays. */
    :scope.hp-oil-history .hp-oh-chart-stage {
      margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem));
      border-radius: 0;
      border-inline: 0;
      padding-inline: 0;
    }

    :scope.hp-oil-history .hp-oh-segmented {
      width: 100%;
      justify-content: stretch;
    }

    :scope.hp-oil-history .hp-oh-segmented button {
      flex: 1 1 0;
      padding-inline: .5rem;
      text-align: center;
    }
  }
}

/*
 * Supplier page (family `supplier`, Finnish). The page carries hp-oil-history as well, so
 * every answer-card, chart and table rule above already applies to it. Only the parts that
 * exist nowhere else live here: the answer card sitting beside the hero text, the list of
 * cheaper suppliers and the note that replaces the chart when one day is all we have.
 */
@scope (.hp-claude-comparator) {
  :scope.hp-oil-supplier .hero-grid {
    align-items: start;
  }

  :scope.hp-oil-supplier .hp-oh-answer {
    margin-block: 0;
  }

  :scope.hp-oil-supplier .hp-oil-supplier-alternatives .hp-oh-cards {
    margin-block-start: 1rem;
  }

  :scope.hp-oil-supplier .hp-oil-supplier-alternatives .hp-oh-card-actions {
    margin-block-start: 1.25rem;
  }

  :scope.hp-oil-supplier .hp-oh-chart-section .hp-oh-status {
    max-width: 62ch;
  }

  :scope.hp-oil-supplier .hp-oil-supplier-guides ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
  }
}