/* Pricing explorer.
 *
 * Two panes in the style of the customer console. Loaded after chrome.css, so
 * the chrome tokens are available — but the panes sit outside .masthead/.foot,
 * which is where those tokens are scoped, so the surface colours needed here
 * are declared on the section itself.
 */

.pricing {
  --pr-line: color-mix(in srgb, currentColor 12%, transparent);
  --pr-soft: color-mix(in srgb, currentColor 5%, transparent);
  padding-block: clamp(28px, 4vw, 56px);
}

/* ── heading ──────────────────────────────────────────────────── */
.pricing-head { max-inline-size: 62ch; margin-block-end: clamp(20px, 3vw, 32px); }

.pricing-t {
  margin: 0;
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.pricing-lede {
  margin-block: 12px 0;
  font-size: var(--t-body);
  line-height: 1.6;
  opacity: 0.78;
  text-wrap: pretty;
}

.pricing-note {
  display: flex; align-items: center; gap: 9px;
  margin-block: 14px 0;
  font-size: var(--t-sm);
  opacity: 0.72;
}

/* ── the two panes ────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}

@media (min-width: 940px) {
  .pricing-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
}

.pricing-pane {
  border: 1px solid var(--pr-line);
  border-radius: 18px;
  background: var(--pr-soft);
  overflow: hidden;
}

.pricing-pane-head {
  padding: 14px 16px;
  border-block-end: 1px solid var(--pr-line);
}

.pricing-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}

.pricing-detail-t {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pricing-count {
  margin-block: 6px 0;
  font-size: var(--t-xs);
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}

.pricing-search {
  inline-size: 100%;
  min-block-size: 44px;
  padding-inline: 14px;
  font: inherit;
  font-size: var(--t-sm);
  color: inherit;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid var(--pr-line);
  border-radius: 11px;
}

.pricing-search:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* ── service list ─────────────────────────────────────────────── */
.pricing-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-block-size: 620px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.svc {
  inline-size: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.svc:hover { background: color-mix(in srgb, currentColor 7%, transparent); }

.svc.is-on {
  background: color-mix(in srgb, currentColor 11%, transparent);
  box-shadow: inset 2px 0 0 currentColor;
}

.svc-ico { inline-size: 28px; block-size: 28px; border-radius: 8px; flex: none; }

.svc-body { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }

.svc-name {
  font-weight: 650;
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.svc-meta { font-size: var(--t-xs); opacity: 0.6; }

.svc-price { text-align: end; flex: none; display: grid; gap: 1px; }
.svc-from  { display: block; font-size: var(--t-xs); opacity: 0.55; }
.svc-price .mono { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── country table ────────────────────────────────────────────── */
.pricing-sorts { display: flex; gap: 6px; flex-wrap: wrap; }

.sortb {
  min-block-size: 32px;
  padding-inline: 12px;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 650;
  color: inherit;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid var(--pr-line);
  border-radius: 999px;
  cursor: pointer;
}

.sortb.is-on { background: color-mix(in srgb, currentColor 16%, transparent); }

.pricing-table-wrap { max-block-size: 620px; overflow-y: auto; overscroll-behavior: contain; }

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

.pricing-table th {
  position: sticky; inset-block-start: 0; z-index: 1;
  padding: 10px 16px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: start;
  opacity: 0.6;
  background: var(--bg, #0b0f14);
  border-block-end: 1px solid var(--pr-line);
}

.pricing-table td {
  padding: 11px 16px;
  font-size: var(--t-sm);
  border-block-end: 1px solid var(--pr-line);
  vertical-align: middle;
}

.pricing-table tr:last-child td { border-block-end: 0; }
.pricing-table tbody tr:hover { background: color-mix(in srgb, currentColor 5%, transparent); }

.ta-end { text-align: end; }

.cty { display: inline-flex; align-items: center; gap: 10px; }

.cty-flag {
  inline-size: 20px; block-size: 15px;
  border-radius: 3px;
  object-fit: cover;
  flex: none;
}

/* Stock is bucketed by the server, so the bar shows a band, not a quantity. */
.stockbar {
  display: inline-block;
  inline-size: 62px; block-size: 6px;
  margin-inline-end: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  overflow: hidden;
  vertical-align: middle;
}

.stockbar i {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

.stock-l { font-size: var(--t-xs); opacity: 0.6; text-transform: capitalize; }

.pricing-empty {
  margin: 0;
  padding: 30px 16px;
  font-size: var(--t-sm);
  text-align: center;
  opacity: 0.6;
}

.vh {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══ pricing explorer: alignment, lazy paging, small screens ══════ */

/* ── header/body alignment ────────────────────────────────────────
   The table sized its columns from content, so widths changed with every
   service loaded and the three headings drifted off the values they label.
   Fixed layout plus explicit columns pins them for good. */
.pricing-table { table-layout: fixed; }

.col-country { inline-size: 52%; }
.col-stock   { inline-size: 26%; }
.col-price   { inline-size: 22%; }

/* Header and cell must share horizontal padding and alignment, or they
   line up in the layout and still look wrong on screen. */
.pricing-table th,
.pricing-table td { padding-inline: 16px; }
.pricing-table th:last-child,
.pricing-table td:last-child { text-align: end; }

/* The sticky header previously fell back to a near-black (#0b0f14) whenever
   --bg was undefined, which on this page painted a dark bar across a light
   surface. The pane's own background is the correct backdrop and it exists
   in both themes. */
.pricing-table thead th {
  background: var(--pr-head-bg, canvas);
  backdrop-filter: blur(6px);
}

/* Country cell: truncate rather than wrap, so every row keeps one height
   and the columns stay visually regular down the list. */
.pricing-table td:first-child .cty { min-inline-size: 0; }
.pricing-table td:first-child .cty > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cty-flag { flex: none; border-radius: 2px; }

/* Prices are compared down a column, so they must be tabular — otherwise
   the digits shift and the decimal points stop aligning. */
.pricing-table td:last-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

/* ── lazy paging sentinel ─────────────────────────────────────── */
.svc-more {
  padding: 12px 16px;
  font-size: var(--t-xs);
  opacity: 0.55;
  text-align: center;
}

/* ── small screens ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .col-country { inline-size: 46%; }
  .col-stock   { inline-size: 28%; }
  .col-price   { inline-size: 26%; }

  .pricing-table th,
  .pricing-table td { padding-inline: 11px; }

  .pricing-table td { font-size: 0.82rem; }

  /* The bar is decoration; the word carries the meaning. Dropping it frees
     the width that the country name and price actually need. */
  .pricing-table .stockbar { display: none; }
}