/*
 * The Quix Lab pricing (components/QuixLabPlans.astro and QuixLabCompare.astro, data in
 * lib/quixlab-pricing.ts): on /apps/quix-lab/ and at the foot of /product/quix-lab/ (the
 * scroll tour). Loaded after css/apps.css, whose light / dark zones, .app-sec, .app-h2,
 * the detailed plan cards (.app-plan--detailed: meter, hosting, includes) and the FAQ it
 * builds on; a rule here of equal specificity wins on source order, including against
 * apps.css's media-query rules. Only these components use the .qlp- classes.
 *   .qlp-billing        the Monthly / Annual toggle (.qlp-toggle, a radiogroup) and the
 *                       billing line, centred over the cards
 *   .qlp-plans          four cards in a row from 1200px, about 80% of the window wide and
 *                       above the tram lines; two by two from 900px, one column below
 *                       (each card a subgrid, so the rows line up)
 *   .qlp-name           the plan name, the card's title: Geist medium, as typed, the size
 *                       and weight of the meter's figure (Mike, 11 Nov 2026: "the same as
 *                       the figure")
 *   .qlp-price          the amount, then the unit and (Annual only) "billed annually"
 *                       stacked beside it; no reserved line, the amount sets the row
 *   .qlp-pick           the meter's dropdown (Pro, Business), a select-only combobox: flat,
 *                       in the meter's type, the figure where Starter's sits; the meter box
 *                       rings on hover; open, a list of each step with its price
 *   (no pixel face on this page: prices, meter values and dropdowns are Geist medium)
 *   .qlp-info / -tip    the info button beside "cell executions a month" and its tooltip
 *                       (how executions are counted), on every card
 *   .qlp-compare__row   two matching halves: "Full comparison" + SHOW ALL FEATURES (left),
 *                       "Explore QuixLab" + LEARN MORE to the scroll
 *                       tour (right), a faint rule between; stacked on phones
 *   .qlp-more           the comparison's tables, closed by default (hidden="until-found")
 *   .qlp-grp            one table per feature group: a square white block whose header
 *                       band holds the group name and the four plans; stacked at 899px
 *                       and below, the header band sticky within its block
 *   .qlp-yes / -no      included (an orange square) / not included (a dash)
 *   .qlp-sr             visually hidden text
 * Type: Geist and Geist Mono only; no case transforms (labels render as typed).
 * Spacing (margins, paddings, gaps): 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64; the 3-7px
 * baseline and marker offsets are optical, and the open dropdown list keeps its own
 * paddings.
 */

.qlp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Straight under the hero's fade (/apps/quix-lab/), the plans start close: the fade's 200px
   already gives the gap, so not apps.css's 110px (72px phones) on top (Steve, 12 Nov 2026). */
.app-fade--in + .app-light > .qlp-pricing:first-child { padding-top: 24px; }

/* "Already have Quix Lab? LOG IN →" under the cards: bigger than apps.css's 15px / 13px
   (Steve, 12 Nov 2026) */
.qlp-pricing .app-plans__login { margin-top: 40px; font-size: 19px; }
.qlp-pricing .app-plans__login a { font-size: 16px; letter-spacing: 0.06em; }

/* ── Billing toggle ──────────────────────────────────────────────────────── */
.qlp-billing { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto 48px; text-align: center; }
.qlp-toggle { display: inline-flex; border: 1px solid rgba(0, 0, 0, 0.3); background: var(--white); }
.qlp-toggle__opt {
  min-width: 120px;
  min-height: 46px;
  padding: 12px 24px;
  border: 0;
  background: transparent;
  font: 500 15px/1.2 var(--font-sans);
  letter-spacing: 0;
  color: var(--black);
  cursor: pointer;
}
.qlp-toggle__opt[aria-checked="true"] { background: var(--black); color: var(--white); }
.qlp-toggle__opt:not([aria-checked="true"]):hover { background: rgba(0, 0, 0, 0.06); }
.qlp-toggle__opt:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; position: relative; z-index: 1; }
.qlp-billing__line { margin: 0; font: 400 15px/1.5 var(--font-sans); color: #3A3A3A; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.app-plans.qlp-plans { gap: 16px; }
.qlp-plans .app-plan { padding: 32px 24px; }
/* The plan name: the card's title, as typed, in the meter figure's type (28px Geist
   medium). No eyebrow, no brackets; the same at every width. */
.qlp-plans .qlp-name { margin: 0 0 8px; font: 500 28px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--black); }
.qlp-plans .app-plan__for { margin: 0 0 24px; text-wrap: pretty; }

/* Price: the amount, then the unit and (Annual) "billed annually" stacked beside it,
   bottom-aligned. One row (nowrap): at the narrowest four-across card (about 224px, a
   1200px window with a scrollbar) 22cqi keeps "£611 billed annually" inside on one line.
   "billed annually" and "Contact Sales" may still wrap, so wider text spacing (WCAG
   1.4.12) stays inside the card. No rule under the price; the meter's grey box
   separates. */
.qlp-plans .app-plan__price { padding-bottom: 0; border-bottom: 0; }
.qlp-plans .qlp-price { flex-wrap: nowrap; align-items: flex-end; column-gap: 8px; }
.qlp-plans .app-plan__amount { font-family: var(--font-sans); font-weight: 500; font-size: min(56px, 22cqi); letter-spacing: -0.04em; line-height: 1; }
/* Puts the unit's baseline (and Annual's note's) on the £'s at every amount size. Geist:
   ascent 1.005, descent 0.295, so a line-height-1 amount's baseline is 0.145em above its
   bottom, and the 14px/1.35 unit's is 4.5px above its own: about 3.6px at 56px, 2.6px at
   the 49px of a 1200px window. The amount's container (.app-plan__price) is this one's,
   so 22cqi is the same length here. */
.qlp-price__unit { display: flex; flex-direction: column; padding-bottom: calc(min(56px, 22cqi) * 0.145 - 4.5px); }
.qlp-plans .qlp-price__unit .app-plan__per { flex-basis: auto; font: 400 14px/1.35 var(--font-sans); color: #3A3A3A; white-space: nowrap; }
.qlp-price__note { display: none; font: 400 13px/1.35 var(--font-sans); color: #3A3A3A; }
.qlp-price__note.is-shown { display: block; }
/* Enterprise's "Contact Sales": one line, bottom of the price row, on the £ baseline */
.qlp-plans .qlp-price--text { flex-wrap: wrap; align-content: flex-end; padding-bottom: 3px; }
.qlp-plans .qlp-price--text .app-plan__amount { font-size: min(36px, 14cqi); letter-spacing: -0.02em; }

/* The meter: one number style on all four cards (28px, same x, same baseline). Pro and
   Business: the dropdown's button is flat (no box, no padding), so its figure sits where
   Starter's does, the chevron at the box's right edge; the box rings on hover (only where
   there is a real hover: a tap leaves :hover on the button, and the ring would stay). */
.qlp-plans .app-plan__meter { margin-top: 20px; padding: 16px 20px 20px; }
.qlp-plans .app-plan__meter-value { margin: 0 0 8px; font: 500 28px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--black); }
@media (hover: hover) {
  .qlp-plans .app-plan__meter:has(.qlp-pick__btn:hover) { box-shadow: inset 0 0 0 1px var(--black); }
}
/* The open list sits above the neighbouring cards (z-index inside .qlp-plans' stacking
   context). */
.qlp-pick { position: relative; z-index: 5; margin: 0 0 8px; }
/* The open one above the other dropdowns, whose tap areas it can overlap */
.qlp-pick:has(> .qlp-pick__btn[aria-expanded="true"]) { z-index: 6; }
.qlp-pick__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 500 28px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--black);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}
/* The tap area: the box's top and side paddings and the gap under the figure (about 58px
   tall, not the figure's 34px), without moving the figure. ::after is the chevron. */
.qlp-pick__btn::before { content: ''; position: absolute; inset: -16px -20px -8px; }
.qlp-pick__btn::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
}
.qlp-pick__btn[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
.qlp-pick__btn:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
/* Open: each step and its price (n8n's pattern), just under the figure, left-aligned
   with it. */
.qlp-pick__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--black);
}
.qlp-pick__list[hidden] { display: none; }
.qlp-pick__opt {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding: 10px 14px 10px 30px;
  position: relative;
  font: 400 15px/1.3 var(--font-sans);
  color: var(--black);
  cursor: pointer;
}
/* The highlighted step (aria-activedescendant, or under the mouse): the grey fill and a
   black bar on its left edge, the bar for a 3:1 cue the fill alone doesn't give */
.qlp-pick__opt.is-active { background: #F3F3F3; box-shadow: inset 3px 0 0 var(--black); }
/* The chosen step: an orange square, as the site's bullets, with .qlp-yes's darker edge */
.qlp-pick__opt[aria-selected="true"] { font-weight: 500; }
.qlp-pick__opt[aria-selected="true"]::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange-dark);
}
.qlp-pick__price { font-variant-numeric: tabular-nums; color: #3A3A3A; }

/* The executions tooltip (Steve, 12 Nov 2026): an info button beside "cell executions a
   month"; its tip spans the meter box, just under it, over the button below. Shown while
   the button is hovered or has keyboard focus, or the tip itself is hovered (WCAG 1.4.13;
   a bridge covers the gap), or after a tap (.is-open); Escape hides it (.is-dismissed). */
.qlp-meter { position: relative; }
.qlp-meter__foot { display: flex; align-items: center; gap: 8px; }
.qlp-info {
  flex: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -4px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3A3A3A;
  cursor: help;
}
.qlp-info::before { content: ''; position: absolute; inset: -10px; }   /* a 44px tap area */
.qlp-info:hover,
.qlp-info[aria-expanded="true"] { color: var(--black); }
.qlp-info:focus-visible { outline: 2px solid var(--black); outline-offset: 1px; }
.qlp-tip {
  display: none;
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 14px 16px;
  background: var(--black);
  color: var(--white);
  font: 400 13px/1.5 var(--font-sans);
  text-align: left;
  text-wrap: pretty;
}
.qlp-tip::before { content: ''; position: absolute; left: 0; right: 0; top: -32px; height: 32px; }
.qlp-tip code { font: 400 0.92em/1 var(--font-mono); padding: 1px 4px; background: rgba(255, 255, 255, 0.16); white-space: nowrap; }
@media (hover: hover) {
  .qlp-meter:not(.is-dismissed):has(.qlp-info:hover, .qlp-tip:hover) .qlp-tip { display: block; }
}
.qlp-meter:not(.is-dismissed):has(.qlp-info:focus-visible) .qlp-tip,
.qlp-meter.is-open .qlp-tip { display: block; }

/* Hosting, includes, bullets */
.qlp-plans .app-plan__hosting { margin-top: 16px; gap: 8px; font: 400 14px/1.45 var(--font-sans); letter-spacing: 0; text-transform: none; color: #3A3A3A; }
.qlp-plans .app-plan__hosting::before { margin-top: 7px; }
.qlp-plans .app-plan__includes { margin-top: 20px; padding-top: 20px; }
.qlp-plans .app-plan--detailed .app-bullets { margin-top: 16px; gap: 12px; }
.qlp-plans .app-bullets li { padding-left: 20px; }
.qlp-plans .app-bullets li::before { top: 0.45em; width: 8px; height: 8px; }

/* Four in a row from 1200px (apps.css's subgrid from 981px lines the rows up); two by two
   from 900px; one column below, as apps.css stacks them. */
@media (min-width: 900px) and (max-width: 1199px) {
  .app-plans.qlp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
  .qlp-plans .app-plan--detailed { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
}
/* Wider than the tram lines (Steve, 11 Nov 2026): from 1200px the plans take about 80% of
   the window, never less than the column. The cards sit above the fixed tram lines
   (z-index 102, as /about/'s .values; the lines are 101); Enterprise's outlined card gets
   the zone's grey so a line doesn't show through it. */
.qlp-plans { position: relative; z-index: 102; }
.qlp-plans .app-plan--alt { background: #DADADA; }
/* Its outline drawn inside (not a border), so its content lines up with the other cards */
.qlp-plans .app-plan--alt { border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
@media (min-width: 1200px) {
  .app-plans.qlp-plans { max-width: max(1240px, 80vw); }
}


/* ── Full comparison: one row of two matching halves, each a heading over a button
   ("Full comparison" + SHOW ALL FEATURES | "Explore QuixLab" +
   LEARN MORE), with a faint rule between them (Richard, 12 Nov 2026); then the tables,
   closed by default, one square white block per group ── */
.qlp-compare__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1240px;
  margin: 0 auto;
}
.qlp-compare__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 48px 24px; text-align: center; }
.qlp-compare__explore { border-left: 1px solid rgba(0, 0, 0, 0.18); }
.qlp-compare__explore .app-h2 { max-width: 480px; text-wrap: balance; }
.qlp-compare__explore .qlp-more__btn { justify-content: center; }
.qlp-compare .app-h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.15; }
.qlp-more__btn { display: flex; min-width: 260px; gap: 12px; }
.qlp-more__btn[aria-expanded="false"] .qlp-more__hide,
.qlp-more__btn[aria-expanded="true"] .qlp-more__show { display: none; }
.qlp-more__btn[aria-expanded="true"] .app-faq__icon::after { display: none; }   /* + becomes − */
/* The tables: until-found keeps them in the page for find-in-page while closed */
.qlp-more { max-width: 1240px; margin: 0 auto; }
.qlp-more:not([hidden]) { margin-top: 48px; }

.qlp-grp { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--white); }
.qlp-grp + .qlp-grp { margin-top: 16px; }               /* the #DADADA zone shows between blocks */
.qlp-grp th,
.qlp-grp td { padding: 16px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); text-align: center; vertical-align: middle; }
/* The header band: the group name, then the four plans */
.qlp-grp thead th { background: #F3F3F3; border-bottom-color: rgba(0, 0, 0, 0.12); font: 500 15px/1.3 var(--font-sans); color: var(--black); }
.qlp-grp thead .qlp-grp__name { width: 48%; padding-left: 24px; text-align: left; font: 500 17px/1.3 var(--font-sans); letter-spacing: -0.005em; }
/* Rows (about 54px): the feature, then the values as data */
.qlp-grp tbody th { padding-left: 24px; padding-right: 24px; text-align: left; font: 400 16px/1.4 var(--font-sans); color: #1A1A1A; text-wrap: pretty; }
.qlp-grp tbody td { font: 500 15px/1.35 var(--font-sans); color: var(--black); font-variant-numeric: tabular-nums; text-wrap: balance; }
.qlp-grp tbody tr:last-child > * { border-bottom: 0; }
.qlp-grp code { font: 400 0.9em/1 var(--font-mono); padding: 1px 4px; background: rgba(0, 0, 0, 0.1); white-space: nowrap; }
/* Marks, at least 3:1 against white (the #D97000 edge 3.35:1, the dash about 3.4:1) */
.qlp-yes { display: inline-block; width: 12px; height: 12px; background: var(--orange); box-shadow: inset 0 0 0 1px var(--orange-dark); vertical-align: middle; }
.qlp-no { display: inline-block; width: 14px; height: 2px; background: rgba(0, 0, 0, 0.45); vertical-align: middle; }

/* ══ Responsive ═════════════════════════════════════════════════════════════ */
/* The 2×2 band: the plan columns are about 110px at 900, so tighter side paddings, 15px
   features and 14px values (the stacked layout's size) keep more rows to one line:
   "100m a month" fits at 900, "Pooled across the team" takes two lines, not three. */
@media (min-width: 900px) and (max-width: 1199px) {
  .qlp-grp thead .qlp-grp__name { padding-left: 16px; }
  .qlp-grp tbody th { padding-left: 16px; padding-right: 8px; font-size: 15px; }
  .qlp-grp tbody td { padding-left: 8px; padding-right: 8px; font-size: 14px; }
}

/* Phones and small tablets: each group stacks, a row is the feature across the top and
   its four values under the four plan names. The header band sticks to the top of the
   window within its own block (the site header is not fixed, js/nav.js; html's
   overflow-x: clip is not a scroll container), so the plan names stay in view. Explicit
   ARIA roles in the markup keep the table semantics once the display changes. */
@media (max-width: 899px) {
  .qlp-pick__opt { padding-top: 13px; padding-bottom: 13px; }   /* 44px+ tap rows */
  .qlp-grp,
  .qlp-grp thead,
  .qlp-grp tbody { display: block; width: 100%; }
  .qlp-grp + .qlp-grp { margin-top: 12px; }
  .qlp-grp tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 8px; }
  .qlp-grp th,
  .qlp-grp td { display: block; border-bottom: 0; }
  .qlp-grp thead { position: sticky; top: var(--announce-stick, 0px); z-index: 1; }   /* under the pinned banner */
  .qlp-grp thead tr { background: #F3F3F3; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
  .qlp-grp thead th { padding: 0 4px 12px; font: 500 14px/1.3 var(--font-sans); }
  .qlp-grp thead .qlp-grp__name { grid-column: 1 / -1; width: auto; padding: 16px 8px 8px; font: 500 16px/1.3 var(--font-sans); }
  .qlp-grp tbody tr { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
  .qlp-grp tbody tr:last-child { border-bottom: 0; }
  .qlp-grp tbody th { grid-column: 1 / -1; padding: 16px 8px 4px; }
  .qlp-grp tbody td { padding: 4px 4px 16px; font-size: 14px; line-height: 1.3; overflow-wrap: break-word; }
}

/* The comparison row stacks: the heading and button, then the Explore card */
@media (max-width: 899px) {
  .qlp-compare__row { grid-template-columns: minmax(0, 1fr); }
  .qlp-compare__main { padding: 40px 0; }
  .qlp-compare__main:first-child { padding-top: 0; }
  .qlp-compare__explore { border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.18); padding-bottom: 0; }
}

@media (max-width: 620px) {
  .qlp-billing { margin-bottom: 32px; }
  .qlp-plans .app-plan { padding: 32px 20px; }
  /* The open list stops at the meter box's right edge (its 20px padding), inside the card */
  .qlp-pick__list { max-width: calc(100% + 20px); }
  .qlp-pick__opt { gap: 12px; padding-right: 12px; font-size: 14px; }
  .qlp-compare__main { gap: 24px; }
  .qlp-more__btn { width: 100%; min-width: 0; }
  .qlp-more:not([hidden]) { margin-top: 32px; }
  .qlp-grp thead th { padding-bottom: 8px; font-size: 12px; }
  .qlp-grp tbody th { font-size: 15px; }
  .qlp-grp tbody td { padding-bottom: 12px; font-size: 13px; }
}

/* Forced colours (Windows High Contrast): the marks, the checked billing option and the
   open list's highlighted and chosen steps are drawn with backgrounds and shadows, which
   the mode resets to Canvas; draw them in system colours. The marks keep their shapes (a
   square, a dash), so one colour serves both. */
@media (forced-colors: active) {
  .qlp-yes,
  .qlp-no { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .qlp-toggle__opt[aria-checked="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .qlp-pick__opt.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .qlp-pick__opt[aria-selected="true"]::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}