/* ==========================================================================
   Supply page — 503A/503B comparison table, order-routing diagram and the
   margin charts. Figma frame 118:7788.
   ========================================================================== */

@layer pages {

  /* ---- Hero visual: vial photo + overlapping product card ------------
     Figma group 596×418.5: photo 554×374 at 0,0; card 230 wide at 366,193. */

  .supply-visual {
    position: relative;
    max-inline-size: 596px;
    aspect-ratio: 596 / 418.5;
  }

  .supply-visual__photo {
    inline-size: 92.95%;
    border-radius: 42px;
  }

  .supply-visual__card {
    position: absolute;
    inset-inline-start: 61.41%;
    inset-block-start: 46.12%;
    inline-size: 38.59%;
  }

  .product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-xl) var(--space-xl);
    border-radius: var(--radius-md);
    background: var(--surface-canvas-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
  }

  .product-card__img {
    inline-size: 102px;
    block-size: 145px;
    object-fit: cover;
    object-position: top;
  }

  .product-card__row {
    display: flex;
    justify-content: space-between;
    inline-size: 100%;
    padding-block-end: var(--space-2xs);
    border-block-end: 0.5px solid var(--border-strong);
    font-size: var(--fs-caption);
    font-weight: 700;
    line-height: 1.4;
  }

  .product-card__price { color: var(--brand-ember-bright); }

  /* Figma sets this at 8px; raised to 11px for legibility (UX C-5). */
  .product-card__desc {
    inline-size: 100%;
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  @media (max-width: 599.98px) {
    .supply-visual { aspect-ratio: auto; }
    .supply-visual__photo { inline-size: 100%; border-radius: var(--radius-lg); }
    .supply-visual__card {
      position: relative;
      inset: auto;
      inline-size: min(230px, 70%);
      margin: -64px var(--space-md) 0 auto;
    }
  }

  /* ---- 503A vs 503B comparison table ---------------------------------
     A real <table>. Rows are restyled as cards (label on top, two values
     below), so every element carries an explicit ARIA role: changing a
     table's display drops its semantics in some screen readers. */

  .compare-table-wrap {
    max-width: 850px;
    margin: var(--space-3xl) auto 0;
    padding: 30px;
    border-radius: var(--radius-panel);
    background: var(--surface-card);
    box-shadow: var(--shadow-glow-soft);
  }

  .compare-table,
  .compare-table thead,
  .compare-table tbody { display: block; }

  .compare-table { inline-size: 100%; border-collapse: separate; }

  .compare-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }

  .compare-table thead tr { padding-block-end: 6px; }

  .compare-table thead th {
    font-size: var(--fs-m);
    font-weight: 700;
    line-height: var(--lh-m);
    letter-spacing: var(--tracking-m);
    color: var(--text-on-ember-bright);
    text-align: start;
  }

  .compare-table tbody { display: flex; flex-direction: column; gap: 10px; margin-block-start: 10px; }

  .compare-table tbody tr {
    row-gap: var(--space-xs);
    padding: 14px var(--space-md);
    border-radius: var(--radius-md);
    background: #f6f3f4;
  }

  .compare-table tbody th {
    grid-column: 1 / -1;
    font-size: var(--fs-micro);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--text-muted-light);
    text-align: start;
  }

  .compare-table td {
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    color: var(--text-body-light);
  }

  /* Phones: stack the two values and label each with its column name. */
  @media (max-width: 599.98px) {
    .compare-table-wrap { padding: var(--space-md); }
    .compare-table thead { display: none; }
    .compare-table tr { grid-template-columns: minmax(0, 1fr); }
    .compare-table td::before {
      content: attr(data-col);
      display: block;
      font-weight: 700;
      color: var(--text-ink);
    }
  }

  /* ---- Margin panels --------------------------------------------------- */

  .margin-panels {
    display: grid;
    gap: var(--space-xl);
    margin-block-start: 44px;
  }

  @media (min-width: 960px) {
    .margin-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .margin-panel {
    display: flex;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--surface-card-dark);
  }

  .margin-panel__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    inline-size: 100%;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: #fcfbfc;
  }

  .margin-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .margin-panel__title {
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: var(--lh-s);
    letter-spacing: var(--tracking-s);
    color: var(--text-ink);
  }

  .margin-panel__note {
    margin-block-start: auto;
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted-light);
  }

  /* Stacked bars: segment heights are illustrative proportions from Figma. */
  .stacks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 212px));
    gap: 34px;
    margin-block-start: var(--space-lg);
  }

  .stack-bar__label {
    margin-block-end: var(--space-sm);
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-body-light);
  }

  .stack-bar__segs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stack-bar__seg {
    display: flex;
    align-items: center;
    min-block-size: var(--h);
    padding-inline: var(--space-sm);
    border: 1px solid var(--border-card-light);
    border-radius: 8px;
    background: #f6f3f4;
    font-size: var(--fs-micro);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--text-muted-light);
  }

  .stack-bar__seg--left {
    background: var(--brand-ember-tint);
    color: var(--brand-ember-ink);
  }

  .stack-bar__seg--win {
    border-color: transparent;
    background: var(--gradient-ember-btn);
    color: var(--text-on-ember-bright);
  }

  /* Line chart */
  .price-chart__legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .price-chart__key {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-body-light);
  }

  .price-chart__key::before {
    content: "";
    inline-size: 16px;
    block-size: 2.5px;
    border-radius: 2px;
    background: var(--key, var(--brand-ember));
  }

  .price-chart__key--muted { --key: var(--text-muted-light); color: var(--text-muted-light); }

  .price-chart__plot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-start: var(--space-xl);
  }

  .price-chart__svg { inline-size: 100%; block-size: auto; }

  .price-chart__axis {
    display: flex;
    justify-content: space-between;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--text-body-light);
    margin-block-start: 57px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--text-muted-light);
  }

  /* ---- Payoff strip ---------------------------------------------------- */

  .payoff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md) var(--space-xl);
    margin-block-start: 44px;
    padding: 22px 26px;
    border-radius: var(--radius-card);
    background: var(--brand-ember-tint-strong);
  }

  .payoff__text {
    flex: 1 1 520px;
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -0.02em;
    color: var(--text-inverse);
  }

  .payoff__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--brand-ember-ink);
    text-decoration: none;
    white-space: nowrap;
  }

  .payoff__link:hover { text-decoration: underline; }
}