/*
 * The price table on the six /precos pages.
 *
 * Loads legal.css first for the shared tokens (--primary, --text, --muted, --border,
 * --radius-md) and account-deletion.css for .ql-btn, so the buttons here are the same buttons
 * the account pages use rather than a second set that drifts.
 *
 * This file never encodes an amount, a limit or a plan count — those are all rendered by
 * pricing.js from what the server answers, and this file only decides where they sit. The two
 * columns and the row labels are fixed because the table's SHAPE is a product decision; its
 * contents are not.
 *
 * Two layouts, one table. Above 720px it is a real two-column table with the row label on the
 * left. Below that a table with four columns of numbers is unreadable on a phone, so each plan
 * becomes its own stacked card and every value carries its own label — which is why each cell
 * has a data-label and the narrow layout prints it.
 */

.ql-pricing {
  margin-top: 8px;
}

/* The table's <caption> repeats the heading above it, which is noise on screen and the only
   thing naming the table to a screen reader. Nothing else on this site needed it, so it is
   defined here rather than in the shared sheets. */
.ql-price-table .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── the two prices, above the table ─────────────────────────────────────────────── */

.ql-price-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 8px;
}

.ql-price-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* The paid column is the one with a decision in it, so it carries the brand edge. */
.ql-price-col-plus {
  border-color: var(--primary);
  box-shadow: 0 2px 14px rgba(79, 139, 246, 0.12);
}

.ql-price-plan {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
}

.ql-price-amount {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: var(--primary);
  /* Tabular figures so 7,99 and 19,99 line up down the column rather than wobbling. */
  font-variant-numeric: tabular-nums;
  /* The amount arrives after the first paint; reserving its line stops the page jumping. */
  min-height: 38px;
}

.ql-price-amount-free {
  color: var(--text);
}

.ql-price-period,
.ql-price-note {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.ql-price-second {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-height: 22px;
}

.ql-price-market {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}

/* ── the comparison table ────────────────────────────────────────────────────────── */

.ql-price-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

.ql-price-table th,
.ql-price-table td {
  padding: 14px 12px;
  text-align: left;
  border-top: 1px solid var(--border);
  font-size: 15px;
  vertical-align: top;
}

.ql-price-table thead th {
  border-top: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.ql-price-table tbody th {
  font-weight: 600;
  color: var(--text);
  width: 40%;
}

.ql-price-table td {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Every value cell holds its line even before the server answers, so the table does not
   reflow under the reader's eyes when the numbers land. */
.ql-price-table td span {
  display: inline-block;
  min-height: 20px;
}

.ql-price-footnote {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ── could not load ──────────────────────────────────────────────────────────────── */

.ql-price-unavailable {
  margin-top: 18px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
}

.ql-price-unavailable-text {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 15px;
}

.ql-price-unavailable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.ql-price-unavailable-actions .ql-btn {
  width: auto;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 15px;
}

.ql-btn-quiet {
  color: var(--text);
  background: #fff;
  border-color: var(--border);
}

.ql-btn-quiet:hover:not(:disabled) {
  background: #eef3fb;
}

/* Nothing of the price block is drawn until the server has answered: since round 28 the plan
   columns' names and every row arrive with the prices (they depend on the allowance model in
   force), so the only honest thing to show while they are in flight is one line saying so — not
   an empty table with blank cells where the numbers belong. */
.ql-pricing:not([data-state="ready"]) .ql-price-table,
.ql-pricing:not([data-state="ready"]) .ql-price-head,
.ql-pricing:not([data-state="ready"]) .ql-price-notes {
  display: none;
}

.ql-price-loading {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.ql-pricing:not([data-state="loading"]) .ql-price-loading {
  display: none;
}

/* ── phone ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ql-price-head {
    grid-template-columns: 1fr;
  }

  .ql-price-table,
  .ql-price-table tbody,
  .ql-price-table tr,
  .ql-price-table td,
  .ql-price-table th {
    display: block;
    width: auto;
  }

  /* The column headers are carried by each cell's own data-label below. */
  .ql-price-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ql-price-table tr {
    margin-top: 14px;
    padding: 4px 0 10px;
    border-top: 1px solid var(--border);
  }

  .ql-price-table tbody th {
    width: auto;
    padding: 10px 0 4px;
    border-top: 0;
    font-weight: 800;
  }

  .ql-price-table td {
    padding: 4px 0;
    border-top: 0;
  }

  .ql-price-table td::before {
    content: attr(data-label) " ";
    font-weight: 700;
    color: var(--muted);
  }
}