/* cgpt/plan-matrix — Figma "Compare plans" (4:377).
   1318 wide inside a 1320 frame: a 398 label column and three 306/307 value
   columns. Category rows 48 tall on #FAFAFA, feature rows 62 on white, hairline
   #EFEFEF between. The header block is 186 tall and holds the billing toggle,
   the search field and the three plan headers. */

.cgpt-matrix {
  container-type: inline-size;
  inline-size: 100%;
}

/* Centred, as the design has it. */
.cgpt-matrix__heading {
  margin: 0 0 24px;
  text-align: center;
  font-size: var(--wp--preset--font-size--display);
  font-weight: 500;
  line-height: var(--cgpt-lh-display);
  color: var(--cgpt-ink);
}

/* Inside the table's corner cell: the selector above, the search below, in the
   same 400px column the feature labels use. */
.cgpt-matrix__controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.cgpt-matrix__corner {
  padding: 24px;
  background-color: var(--cgpt-surface);
  border-block-end: 1px solid var(--cgpt-rule);
}

/* The billing control is compact here — it shares a cell with the search. */
.cgpt-matrix__billing { margin: 0; }

.cgpt-matrix__billing .cgpt-billing__opt {
  min-block-size: 40px;
  padding: 8px 16px;
}

.cgpt-matrix__chooser-wrap { margin-block-end: 16px; }

/* Desktop keeps the plan info in the table header. */
.cgpt-matrix__panels { display: none; }

/* When the controls sit above the table rather than in the corner cell. The
   fill is the panel's, so it needs padding rather than a margin — a margin
   would leave the gap outside the white and show the page ground through.
   The side padding is the 16 the select and the rows below use, so the search
   field lines up with them instead of running to the panel's edge (BUG-40). */
.cgpt-matrix > .cgpt-matrix__controls {
  align-items: stretch;
  gap: 16px;
  padding: 0 16px 16px;
  background-color: var(--cgpt-surface);
}

/* Centred above the full-width search, as the mobile design draws it. */
.cgpt-matrix > .cgpt-matrix__controls .cgpt-matrix__billing {
  align-self: center;
}

/* The 350 cap is for the corner cell, where the search shares a 400 column.
   Above the table it has the panel's full width to sit in. */
.cgpt-matrix > .cgpt-matrix__controls .cgpt-matrix__search {
  max-inline-size: none;
}

.cgpt-matrix__cta {
  inline-size: 100%;
  margin-block-start: 16px;
}

/*
 * The four controls across the header are one row, so they are one height
 * (BUG-40): 44, which is the size the search already asked for and the touch
 * target the row has to keep.
 *
 * The field needs a fixed height, not a floor. A min-block-size of 44 still
 * let the input grow to 47.6 — its 25.6px line box plus 20 of padding and the
 * 2px border — so it stood 3.6px taller than the buttons. Pinning the height
 * and dropping the block padding holds it at 44; the text centres itself.
 */
.cgpt-matrix__head .cgpt-matrix__cta {
  min-block-size: 44px;
}

.cgpt-matrix__head .cgpt-matrix__input {
  block-size: 44px;
  min-block-size: 44px;
  padding-block: 0;
}

/* --- search ------------------------------------------------------------- */

.cgpt-matrix__search {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 350px;
}

.cgpt-matrix__search-icon {
  position: absolute;
  inset-inline-start: 12px;
  inline-size: 20px;
  block-size: 20px;
  color: var(--cgpt-ink);
  pointer-events: none;
}

.cgpt-matrix__input {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 10px 16px 10px 44px;
  border: 1px solid var(--cgpt-rule);
  border-radius: 24px;
  background-color: var(--cgpt-surface);
  font: inherit;
  font-size: var(--wp--preset--font-size--body);
  color: var(--cgpt-ink);
}

.cgpt-matrix__input:focus-visible {
  outline: 2px solid var(--cgpt-accent);
  outline-offset: 1px;
}

/* --- table -------------------------------------------------------------- */

/* Horizontal scroll is the fallback between the mobile single-plan view and
   the full desktop grid; it needs to be focusable so a keyboard user can
   reach it, hence tabindex is set on it by the script. */
.cgpt-matrix__scroll {
  overflow-x: auto;
  border: 1px solid var(--cgpt-rule);
  border-radius: 12px;
}

.cgpt-matrix__table {
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
}

/*
 * Bottom-aligned so the four controls across the header — the search in the
 * corner cell and the three plan CTAs — finish on one line (BUG-40). Aligned
 * to the top they each ended where their own cell's copy ran out, which is
 * what the design does not draw.
 */
.cgpt-matrix__head th,
.cgpt-matrix__head td {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  padding: 24px;
  background-color: var(--cgpt-surface);
  border-block-end: 1px solid var(--cgpt-rule);
  vertical-align: bottom;
}

/* A hairline between the header cells in the page's own ground, so the columns
   read as separated panels rather than one strip. Not --cgpt-rule: the design
   uses the background colour, which is a gap rather than a line. */
.cgpt-matrix__head th + th,
.cgpt-matrix__head th + td,
.cgpt-matrix__head td + th {
  border-inline-start: 1px solid var(--cgpt-bg, var(--cgpt-surface-soft));
}

.cgpt-matrix__plan {
  inline-size: 23%;
  text-align: start;
}

/* Name and tag share a line with the tag pushed to the far edge, as the design
   has it — the tag under the name read as a second heading. */
.cgpt-matrix__plan-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.cgpt-matrix__plan-name {
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 500;
  color: var(--cgpt-ink);
}

.cgpt-matrix__plan-tag {
  flex: none;
  padding: 2px 10px;
  border-radius: 20px;
  background-color: var(--cgpt-brand-muted);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--cgpt-surface);
}

/* The recommended column's header sits on its own gradient, as the plan card
   does. Opaque artwork, so it goes straight on rather than compositing. */
.cgpt-matrix__plan--tagged {
  background-image: url("../../../assets/plans/recommended-header.webp");
  background-size: cover;
  background-position: center;
}

.cgpt-matrix__plan-price {
  display: block;
  margin-block-start: 12px;
  font-size: var(--wp--preset--font-size--lead);
  color: var(--cgpt-ink);
}

/* Category band. A th with colspan, so it is announced as the group it is. */
.cgpt-matrix__cat-cell {
  padding: 12px 24px;
  background-color: var(--cgpt-surface-soft);
  font-size: var(--wp--preset--font-size--body-lg);
  font-weight: 500;
  color: var(--cgpt-ink);
  text-align: start;
}

.cgpt-matrix__row + .cgpt-matrix__row .cgpt-matrix__label,
.cgpt-matrix__row + .cgpt-matrix__row .cgpt-matrix__value {
  border-block-start: 1px solid var(--cgpt-rule);
}

/* The rows are white panels on the page ground; only the category bands keep
   the soft fill. The table itself is transparent, so this is set on the cells. */
.cgpt-matrix__row > * { background-color: var(--cgpt-surface); }

.cgpt-matrix__label {
  padding: 18px 24px;
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink);
  text-align: start;
}

.cgpt-matrix__value {
  padding: 18px 24px;
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink);
}

.cgpt-matrix__tick {
  inline-size: 20px;
  block-size: 20px;
  color: var(--cgpt-ink);
}

.cgpt-matrix__dash { color: var(--cgpt-marker, var(--cgpt-ink-soft)); }

.cgpt-matrix__empty {
  margin: 24px 0 0;
  font-size: var(--wp--preset--font-size--body);
  color: var(--cgpt-ink-soft);
}

.cgpt-matrix__placeholder {
  padding: var(--cgpt-space-4);
  border: 1px dashed var(--cgpt-border-strong);
  border-radius: var(--cgpt-radius-md);
  color: var(--cgpt-fg-muted);
}

/* --- one plan at a time ------------------------------------------------- */

/*
 * Three columns of values do not fit at phone widths, and a sideways-scrolling
 * table is a poor way to compare anything. Figma's mobile frame picks one plan
 * from a control and shows that column only, which is what this does: all three
 * columns stay in the table and CSS hides the two not chosen, so there is one
 * table in the DOM, no duplicated markup, and nothing to keep in sync.
 *
 * A container query rather than a media query: the matrix can sit in a narrow
 * section as easily as a full-width one, and what matters is the space it has.
 */
.cgpt-matrix__chooser { display: none; }

@container (max-width: 899px) {
  .cgpt-matrix__chooser { display: block; }

  /*
   * A full-width row, squared off, with a rule above and below — the mobile
   * design draws it as part of the panel rather than as a pill. appearance is
   * cleared so the chevron is ours and sits where the design puts it.
   */
  .cgpt-matrix__select {
    inline-size: 100%;
    min-block-size: 56px;
    padding: 16px 44px 16px 16px;
    border: 0;
    border-block: 1px solid var(--cgpt-rule);
    border-radius: 0;
    background-color: var(--cgpt-surface);
    font: inherit;
    font-size: var(--wp--preset--font-size--body-lg);
    color: var(--cgpt-ink);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316152A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
  }

  /* The chosen plan's price and CTA, which the hidden header would carry. */
  .cgpt-matrix__panels { display: block; }

  .cgpt-matrix__panel {
    display: none;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-block-end: 1px solid var(--cgpt-rule);
    background-color: var(--cgpt-surface);
  }

  .cgpt-matrix__panel.is-shown { display: flex; }

  .cgpt-matrix__panel-price {
    margin: 0;
    /* 20px flat. The `lead` preset is fluid and clamps to 18px at this width,
       so the literal is what actually holds the design's size — the same
       reason section-heading's mobile sizes are written out. */
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cgpt-ink);
  }

  /* The header is replaced by the panel above, so it goes out of the flow —
     the row headers still name every value. */
  .cgpt-matrix__head { display: none; }

  .cgpt-matrix__scroll { overflow-x: visible; }

  .cgpt-matrix__plan[data-plan-index]:not(.is-shown),
  .cgpt-matrix__value[data-plan-index]:not(.is-shown) { display: none; }

  .cgpt-matrix__plan.is-shown,
  .cgpt-matrix__value.is-shown { inline-size: 40%; }

  .cgpt-matrix__billing { margin-inline: auto; }

  .cgpt-matrix__value.is-shown { text-align: end; }

  /* cgpt_lucide marks give a block box, which text-align cannot move — the
     tick sat 100px short of the edge while the numbers were flush. */
  .cgpt-matrix__value.is-shown .cgpt-matrix__tick,
  .cgpt-matrix__value.is-shown .cgpt-matrix__dash {
    margin-inline-start: auto;
  }

  .cgpt-matrix__label,
  .cgpt-matrix__value { padding: 16px; }

  .cgpt-matrix__cat-cell { padding: 12px 16px; }

  .cgpt-matrix__head th,
  .cgpt-matrix__head td { padding: 16px; }

  /* Empty at phone sizes — the controls have moved above the table. */
  .cgpt-matrix__corner { padding: 0; }
}

/* --- collapsible groups ---------------------------------------------------
   Figma "Pricing collapsed" (125:36107) and "Pricing expanded" (125:34690).
   Closed: a white 20/500 row, 12/24 padding, a #DFDFDF rule under it and a
   24px plus at the far end. Open: the soft band, the plus turned to a cross.
   The rows of a closed group are not rendered at all. */
.cgpt-matrix__cat-cell > .cgpt-matrix__cat-icon { display: none; }

.cgpt-matrix__group.is-collapsed .cgpt-matrix__row { display: none; }

.cgpt-matrix__cat-cell:has(.cgpt-matrix__cat-toggle) { padding: 0; }

.cgpt-matrix__cat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  inline-size: 100%;
  padding: 12px 24px;
  border: 0;
  background-color: var(--cgpt-surface-soft);
  font: inherit;
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 500;
  line-height: 1.4;
  color: var(--cgpt-ink);
  text-align: start;
  cursor: pointer;
}

.cgpt-matrix__group.is-collapsed .cgpt-matrix__cat-toggle {
  background-color: var(--cgpt-surface);
  box-shadow: inset 0 -1px 0 var(--cgpt-rule);
}

.cgpt-matrix__cat-toggle:hover { background-color: var(--cgpt-surface-soft); }

.cgpt-matrix__cat-toggle:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: calc(var(--cgpt-focus-width) * -1);
}

.cgpt-matrix__cat-icon {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  color: var(--cgpt-ink);
  transition: rotate var(--cgpt-duration-fast, 160ms) var(--cgpt-ease, ease-out);
}

.cgpt-matrix__cat-toggle[aria-expanded="true"] .cgpt-matrix__cat-icon { rotate: 45deg; }

@media (max-width: 767.98px) {
  .cgpt-matrix__cat-toggle { padding: 12px 16px; font-size: var(--wp--preset--font-size--body-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .cgpt-matrix__cat-icon { transition: none; }
}