/* ============================================================
   Segmentation — three worked examples, above the fold.

   The whole page is sized to the viewport: header, a short intro, two rows of
   tabs, and one panel that takes whatever height is left. Nothing scrolls
   except the inside of the code column on the longest query. That constraint
   drives most of the decisions below — the type is a step smaller than the rest
   of the site and the spacing is tighter, because the alternative is losing the
   panel off the bottom of the screen.
   ============================================================ */

:root {
  --sq-ink-2: #4a4a55;
  --sq-ink-3: #7a7a88;
  --sq-soft: #f7f9fc;
  --sq-line: #c7d7fb;
  --sq-tint: #e9f7f0;

  --sq-code-bg: #fbfcfe;
  --sq-kw: #1d4ed8;
  --sq-str: #0b7f4f;
  --sq-num: #b45309;
  --sq-comment: #8a94a6;

  /* Chart series. Validated pair — see the charts section at the foot of this
     file for the numbers. */
  --sq-c0: #2563eb;
  --sq-c1: #ea580c;
}

/* This page used to be locked to the viewport with no scroll at all. It
   scrolls now, like the rest of the site. */
body.sql-page {
  --brand-avatar-bg: #d9e6ff;
  display: flex;
  flex-direction: column;
}
body.sql-page .site-header { flex: none; }
/* Two working columns need more room than the site's default 1100px. */
body.sql-page .container { max-width: 1280px; }

.sq-shell {
  flex: 1 1 auto;
  min-height: 0;
}
.sq-shell > .container {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ---- intro ----------------------------------------------------------- */
.sq-intro { flex: none; }
.sq-intro .eyebrow { margin: 0 0 6px; }
.sq-intro h1 {
  margin: 0 0 5px;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.sq-intro p {
  margin: 0;
  max-width: none;
  font-size: 13.6px;
  line-height: 1.52;
  color: var(--muted);
}
.sq-intro p + p { margin-top: 6px; }
.sq-intro strong { color: var(--text); font-weight: 600; }
.sq-intro a { color: var(--pg-ink); }

/* ---- example tabs ---------------------------------------------------- */
/* The example row is the page's primary control, so it reads as the
   card's own strip, exactly like the message-type row on personalization:
   a label on the left, equal tabs across the rest. */
.sq-exbar {
  flex: none;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-alt);
}
.sq-exbar-label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-soft);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.sq-extabs {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.sq-extab {
  font: inherit;
  text-align: center;
  cursor: pointer;
}
/* The meta line never wraps, so a long dataset note cannot make one tab
   look taller or wider than its neighbours. */
.sq-extab small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the panel ------------------------------------------------------- */
.sq-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The views only change what the right column says about the query, so the
   switcher is that pane's own header row of chips — one full-width tab strip
   per panel (the examples), not two stacked ones fighting for primary. */
.sq-textwrap {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sq-pane-head {
  flex: none;
  min-height: 42px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sq-pane-label {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.sq-viewtabs {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sq-vtab {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}
.sq-vtab:hover { border-color: var(--accent); color: var(--text); }
.sq-vtab.is-active {
  background: var(--sq-tint);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.sq-vtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* Query left, everything else right. The query never moves — it is what the
   page is about, and the tabs only change what is being said about it. */
.sq-body {
  flex: 1 1 auto;
  /* The shell owns the height now (14px frame in theme.css); the body
     just fills what the header and tabs leave. */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
}
.sq-body > * { min-width: 0; }

/* The longest query genuinely does not fit a laptop viewport at readable size,
   so this column scrolls on its own while the page stays put. The fade at the
   bottom edge is there so a cut-off query reads as "more below" rather than as
   the end of the query. */
.sq-codecol {
  overflow-y: auto;
  overflow-x: auto;
  padding: 8px 4px 10px 0;
  background: var(--sq-code-bg);
  border-right: 1px solid var(--border);
  position: relative;
  scrollbar-width: thin;
}
/* Class is set from JS only when the column actually overflows, so a query that
   fits doesn't get a fade implying content that isn't there. */
.sq-codecol.has-more {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
}
.sq-codecol.has-more.at-end { mask-image: none; }

/* A section is the hover unit. The bracket is a left rule with a serif at each
   end, so a block of SQL reads as one labelled region rather than a stripe. */
.sq-sec {
  position: relative;
  display: block;
  padding: 0 10px 0 34px;
  cursor: pointer;
}
.sq-bracket {
  position: absolute;
  left: 14px;
  top: 3px;
  bottom: 3px;
  width: 9px;
  border-left: 2px solid #b6c4da;
  border-top: 2px solid #b6c4da;
  border-bottom: 2px solid #b6c4da;
  border-radius: 3px 0 0 3px;
  transition: border-color 0.14s;
}
.sq-bracket i {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #b6c4da;
  color: #5b6b85;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: background 0.14s, color 0.14s;
}
.sq-sec:hover .sq-bracket,
.sq-sec.is-active .sq-bracket { border-color: var(--pg); }
.sq-sec:hover .sq-bracket i,
.sq-sec.is-active .sq-bracket i {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sq-sec:hover { background: rgba(37, 99, 235, 0.03); }
.sq-sec.is-active { background: rgba(37, 99, 235, 0.045); }
.sq-sec:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sq-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.8px;
  line-height: 1.54;
  color: var(--sq-ink-2);
  white-space: pre;
}
.sq-code .sq-k { color: var(--sq-kw); font-weight: 600; font-style: normal; }
.sq-code .sq-s { color: var(--sq-str); font-style: normal; }
.sq-code .sq-n { color: var(--sq-num); font-style: normal; }
.sq-code .sq-c { color: var(--sq-comment); font-style: italic; }

/* ---- the text side --------------------------------------------------- */
.sq-textcol {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  scrollbar-width: thin;
}
/* Same treatment as the code column: fade the bottom edge only when there is
   genuinely more to read, so a cut-off paragraph doesn't look like the end. */
.sq-textcol.has-more {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.sq-textcol.has-more.at-end { mask-image: none; }
.sq-step { padding: 14px 20px 18px; }
.sq-step .sq-blk { margin: 0 0 11px; }
.sq-step .sq-blk h4 { font-size: 12.2px; margin-bottom: 2px; }
.sq-step .sq-blk p { font-size: 13.8px; line-height: 1.57; }
.sq-side-step {
  margin: 0 0 4px;
  font-size: 10.2px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pg-ink);
}
.sq-step h3 {
  margin: 0 0 7px;
  font-size: 14.6px;
  line-height: 1.3;
}
.sq-side-plain {
  margin: 0 0 12px;
  font-size: 13.2px;
  line-height: 1.58;
  color: var(--sq-ink-2);
}
.sq-side-count {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.sq-side-note {
  margin: 9px 0 0;
  font-size: 12.2px;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
}

.sq-miniwrap {
  overflow-x: auto;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  scrollbar-width: thin;
}
.sq-mini {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.6px;
  font-family: var(--font-mono);
}
.sq-mini th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted-soft);
  background: var(--bg-alt);
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.sq-mini td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--sq-ink-2);
  white-space: nowrap;
}
.sq-mini tr:last-child td { border-bottom: none; }
.sq-mini .sq-n-col { text-align: right; font-variant-numeric: tabular-nums; }
/* The final section's table is the answer, not a work-in-progress peek. */
.sq-miniwrap:has(.is-result) { border-color: var(--sq-line); }
.sq-mini.is-result th { background: var(--sq-tint); color: var(--pg-ink); }
.sq-mini.is-result td { font-weight: 600; color: var(--text); }

/* ---- prose views ----------------------------------------------------- */
.sq-prose { padding: 15px 20px 20px; }

/* One block per idea: a small heading you can skim, then two or three lines.
   The heading carries the point so the body doesn't have to be read to get it. */
.sq-blk { margin: 0 0 14px; }
.sq-blk:last-child { margin-bottom: 0; }
.sq-blk h4 {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 13.2px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pg-ink);
  letter-spacing: 0.005em;
}
.sq-blk p {
  margin: 0;
  font-size: 14.2px;
  line-height: 1.6;
  color: var(--text);
}
/* Emphasis gets the same highlighter wash as the page intro. */
.sq-prose strong,
.sq-step strong {
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--pg-soft) 0);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The hypothesis leads with the claim the rest of the tab argues for. */
.sq-lead {
  margin: 0 0 16px;
  font-size: 14.8px;
  font-weight: 500;
  line-height: 1.52;
  color: var(--pg-ink);
  background: var(--sq-tint);
  border: 0;
  border-left: 3px solid var(--pg);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  /* extruded rather than outlined: a light catch along the top edge and a
     green shadow underneath, so the callout lifts off the panel instead of
     sitting inside a blue box. */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--pg) 30%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 6px 16px color-mix(in srgb, var(--pg) 14%, transparent);
}
.sq-lead strong { color: var(--pg-ink); font-weight: 700; }

.sq-cue {
  display: block;
  font-size: 13px;
  color: var(--muted-soft);
  border-top: 1px solid var(--border);
  padding-top: 11px;
}
.sq-prose p:last-child { margin-bottom: 0; }
.sq-prose strong { color: var(--text); font-weight: 700; }
.sq-prose em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-dark);
}

/* ---- test view ------------------------------------------------------- */
.sq-testgrid { padding: 12px 20px 18px; }
.sq-testrow {
  display: grid;
  grid-template-columns: minmax(92px, 116px) minmax(0, 1fr);
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.sq-testrow:last-child { border-bottom: none; }
.sq-testrow b { font-size: 12.4px; color: var(--text); }
.sq-testrow span {
  font-size: 13.4px;
  line-height: 1.55;
  color: var(--sq-ink-2);
}
/* Plain italic here. The blue treatment is reserved for the one load-bearing
   sentence in each hypothesis, and reusing it for incidental emphasis makes it
   read as a link. */
.sq-testrow em { font-style: italic; }
.sq-testrow strong { color: var(--text); }

/* ---- narrow / short screens ------------------------------------------
   Below this the two-column query view stops being readable, and a phone has
   no "fold" worth defending anyway — so let the page scroll normally. */
/* Width decides the layout: below 900 the two-column query stops being
   readable, so it stacks. */
@media (max-width: 900px) {
  .sq-body { grid-template-columns: 1fr; }
  .sq-codecol { border-right: 0; border-bottom: 1px solid var(--border); max-height: 46vh; }
  .sq-extabs { grid-template-columns: 1fr; }
  .sq-vtab { font-size: 11.5px; padding: 5px 8px; }
}

/* Height decides whether the fold is worth defending. On a phone, or a window
   too short to hold the panel at a usable size, let the page scroll normally
   rather than squeezing everything into a strip. */
@media (max-width: 900px), (max-height: 620px) {
  body.sql-page { height: auto; overflow: auto; display: block; }
  .sq-shell { height: auto; padding-bottom: 40px; }
  .sq-shell > .container { height: auto; }
  .sq-panel { min-height: 66vh; }
}

/* ---- charts -----------------------------------------------------------
   Horizontal bars: the category labels are long, and horizontal rows carry
   them without rotating anything. Values sit outside the bar end because the
   smallest bar here is 0.77% of its scale and could never hold a label.

   Colors: one hue for single-series charts. The two-series chart uses
   #2563eb / #ea580c, which clears all six checks of the palette validator
   (CVD ΔE 31.3 protan / 34.6 tritan, normal 39.6, both ≥3:1 on white).
   Projected bars keep the hue but add a diagonal hatch and say "projected"
   in the legend, so a modelled number can never read as a measured one.
   --------------------------------------------------------------------- */
.sq-chart {
  margin: 14px 0 0;
  padding: 12px 14px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--sq-soft);
}
.sq-chart figcaption {
  font-size: 12.2px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 10px;
}

.sq-chartlegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: -3px 0 10px;
  font-size: 11px;
  color: var(--muted);
}
.sq-chartlegend span { display: inline-flex; align-items: center; gap: 5px; }
.sq-swatch {
  width: 10px; height: 10px; border-radius: 2px; flex: none;
  background: var(--sq-c0);
}
.sq-chartlegend span:nth-child(2) .sq-swatch { background: var(--sq-c1); }
/* The legend key for a projected series has to carry the same hatch the bars
   do, otherwise the key and the mark disagree about what they mean. */
/* Needs to out-specify the :nth-child colour rule above it. */
.sq-chartlegend span:nth-child(2) .sq-swatch.is-proj,
.sq-chartlegend .sq-swatch.is-proj {
  background: repeating-linear-gradient(135deg, var(--sq-c1) 0 2px, #fbfcfe 2px 4px);
  box-shadow: inset 0 0 0 1px var(--sq-c1);
}

.sq-bargroup { margin-bottom: 9px; }
.sq-bargroup:last-of-type { margin-bottom: 0; }
.sq-barlabel {
  display: block;
  font-size: 11.4px;
  line-height: 1.3;
  color: var(--sq-ink-2);
  margin-bottom: 3px;
}
.sq-barlabel small {
  display: block;
  font-size: 10.4px;
  color: var(--muted-soft);
  line-height: 1.3;
}

/* Track + fill. 2px gap between adjacent bars in a group rather than a border. */
.sq-barrow {
  --sq-c: var(--sq-c0);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.sq-barrow:last-child { margin-bottom: 0; }
.sq-barrow[data-s="1"] { --sq-c: var(--sq-c1); }
.sq-bartrack {
  flex: 1 1 auto;
  height: 9px;
  min-width: 0;
  background: #e7ecf4;
  border-radius: 4px;
  overflow: hidden;
}
.sq-barfill {
  display: block;
  width: var(--w);
  height: 100%;
  background: var(--sq-c);
  border-radius: 4px;
  transform-origin: left center;
  animation: sq-grow 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}
@keyframes sq-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .sq-barfill { animation: none; }
}

/* Modelled rather than measured — hatch plus the word "projected" in the legend. */
.sq-barrow.is-proj .sq-barfill {
  background: repeating-linear-gradient(135deg, var(--sq-c) 0 3px, #fbfcfe 3px 6px);
  box-shadow: inset 0 0 0 1px var(--sq-c);
  animation-delay: 0.12s;
}

.sq-barval {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.4px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The relative figure beside the absolute one. "$2,980" is easy to shrug at;
   "+205%" is the part that lands, so it gets its own chip rather than being
   buried in the note underneath. */
.sq-delta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e8f3ec;
  color: #0b7f4f;
  font-family: var(--font-sans);
  font-size: 10.4px;
  font-weight: 700;
  letter-spacing: 0.01em;
  vertical-align: 1px;
}
.sq-barval em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted-soft);
  font-family: var(--font-sans);
  font-size: 10.4px;
  margin-left: 4px;
}

.sq-chartnote {
  margin: 10px 0 0;
  font-size: 11.2px;
  line-height: 1.5;
  color: var(--muted-soft);
}


/* Single-hue charts follow the page's green; only genuinely two-series
   charts (creative match) keep the CVD-validated blue/orange pair. A
   measured/projected pair is one hue twice — the hatch tells them apart. */
.sq-chart:not(.is-dual) { --sq-c0: var(--pg); --sq-c1: var(--pg); }


/* ---- header: the lede under the title, and the three questions ---- */
.sq-head-sub {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.58;
  color: var(--muted);
  max-width: 46ch;
}
.sq-head-sub strong { color: var(--text); font-weight: 700; }
.sq-qlist {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.sq-qlist li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.45;
}
.sq-qlist li b {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--pg-ink);
}


/* the dollars, one arm per line */
.sq-mlist {
  list-style: none;
  margin: 8px 0 10px;
  padding: 0;
  display: grid;
  gap: 5px;
  counter-reset: sqm;
}
.sq-mlist li {
  counter-increment: sqm;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 13.9px;
  line-height: 1.5;
  color: var(--text);
}
.sq-mlist li::before {
  content: counter(sqm);
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--pg-ink);
}

/* press-to-advance for the walkthrough */
.sq-stepnav { margin-top: 14px; }
.sq-stepbtn {
  font: inherit;
  font-size: 12.8px;
  font-weight: 700;
  color: var(--pg-btn-ink);
  background: var(--pg-solid);
  border: 0;
  border-radius: 8px;
  padding: 8px 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pg) 28%, transparent);
}
.sq-stepbtn:hover { filter: brightness(1.08); }
.sq-stepbtn:focus-visible { outline: 2px solid var(--pg); outline-offset: 2px; }