/* The Sandboxes page (src/sandboxes.mjs). It builds on the product page parts
   in site.css (.fp-hero, .fp-strip, .fp-section, .fp-grid, .fp-item, .faq,
   .closing) and the site's tokens. Flat fills only, no gradients. Colors come
   from var(--...), so the page follows the light and the dark theme. */

/* Hero: the claim on the left, one call on the right. */
.sb-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; padding: 96px 0 40px; }
.sb-hero-copy { display: grid; justify-items: start; gap: 26px; min-width: 0; }
.sb-hero h1 { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.06; letter-spacing: -0.035em; }
.sb-hero .lead { max-width: 520px; font-size: 17px; }
.sb-join { display: grid; justify-items: start; gap: 14px; }
.sb-capacity { font-size: 14px; color: var(--muted); }

/* A code panel with language tabs. */
.sb-code { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--code); box-shadow: var(--shadow); }
.sb-code-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.sb-tabs { display: flex; gap: 2px; }
.sb-tabs button { height: 28px; padding: 0 10px; border: 0; border-radius: 4px; background: none; font: 500 12px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); transition: color 0.15s, background 0.15s; }
.sb-tabs button:hover { color: var(--ink); }
.sb-tabs button[aria-pressed="true"] { background: var(--blue-tint); color: var(--blue-light); }
.sb-pre { margin: 0; padding: 20px 22px; overflow-x: auto; font: 13px/1.7 var(--mono); color: var(--body); white-space: pre; tab-size: 2; }
.sb-pre + .sb-pre { border-top: 1px solid var(--line); }
.sb-pre.off { display: none; }
.sb-pre code { font: inherit; }
.sb-code figcaption { padding: 12px 22px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--subtle); }

/* The ladder: four levels in a row, then each level beside its code. */
.sb-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: none; }
.sb-ladder li { position: relative; display: grid; align-content: start; justify-items: start; gap: 10px; padding: 20px 20px 22px; border: 1px solid var(--line); border-left-width: 0; }
.sb-ladder li:first-child { border-left-width: 1px; border-radius: 8px 0 0 8px; }
.sb-ladder li:last-child { border-radius: 0 8px 8px 0; }
.sb-ladder li > span { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.sb-ladder li > b { font-size: 16px; font-weight: 600; color: var(--ink); }
.sb-ladder li > code { font: 12px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.sb-rungs { display: grid; }
.sb-rung { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; padding: 56px 0; border-top: 1px solid var(--line); }
.sb-rung:first-child { border-top: 0; }
.sb-rung-text { grid-template-columns: minmax(0, 1fr); }
.sb-rung-copy { display: grid; justify-items: start; align-content: start; gap: 16px; min-width: 0; }
.sb-rung-copy > p { max-width: 480px; font-size: 15px; color: var(--muted); }
.sb-rung h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.sb-level { display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.sb-rung-code { display: grid; gap: 16px; min-width: 0; }

/* With the rest: four cards. */
.sb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sb-card { display: grid; align-content: start; gap: 20px; min-width: 0; padding: 26px 26px 28px; border: 1px solid var(--line); border-radius: 8px; }
.sb-card h3 { font-size: 19px; }
.sb-card .sb-code { box-shadow: none; }
.sb-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-size: 14px; }

/* On its own: the three ways in, beside one panel with four tabs. */
.sb-alone { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.sb-surfaces { display: grid; justify-items: start; gap: 0; }
.sb-surface { display: grid; gap: 6px; width: 100%; padding: 18px 0; border-top: 1px solid var(--line); }
.sb-surface:first-child { padding-top: 0; border-top: 0; }
.sb-surface b { font-size: 15px; font-weight: 600; color: var(--ink); }
.sb-surface p { max-width: 460px; font-size: 14px; color: var(--muted); }
.sb-surfaces > .text-link { margin-top: 8px; font-size: 14px; }
.sb-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 72px; border-top: 1px solid var(--line); }
.sb-uses > div { display: grid; align-content: start; gap: 8px; padding: 24px 24px 8px; border-left: 1px solid var(--line); }
.sb-uses > div:first-child { padding-left: 0; border-left: 0; }
.sb-uses b { font-size: 15px; font-weight: 600; color: var(--ink); }
.sb-uses p { font-size: 14px; color: var(--muted); }

/* Isolation: the copy and the drawing. */
.sb-isolation { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; padding: 104px 0; border-top: 1px solid var(--line); }
.sb-isolation .fp-copy > p { max-width: 560px; }
.sb-figure { margin: 0; min-width: 0; }
.sb-figure svg { width: 100%; max-width: 460px; justify-self: end; }
.sb-box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.sb-box.sb-hi { stroke: var(--blue-line); }
.sb-box.sb-wide { fill: none; stroke-dasharray: 4 4; }
.sb-off { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.sb-line { fill: none; stroke: var(--blue); stroke-width: 1.4; }
.sb-t { font: 400 11px var(--mono); fill: var(--muted); }
.sb-t.sb-b { font: 600 13px var(--mono); fill: var(--ink); }
.sb-t.sb-s { fill: var(--subtle); }
.sb-figure .sb-t.sb-m { fill: var(--body); }

/* The waitlist: a band in the page, and the form that closes it. The form uses
   the contact form styles of site.css. */
.sb-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin: 0 auto 72px; padding: 24px 28px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.sb-cta p { font-size: 16px; color: var(--ink); }
.sb-waitlist { padding-bottom: 120px; }
.sb-privacy { font-size: 13px; color: var(--subtle); }

/* Inline code in the copy of this page. */
.sb-hero p code, .sb-rung p code, .sb-card code { padding: 1px 5px; border-radius: 3px; background: var(--bg-2); font: 0.92em var(--mono); }

@media (max-width: 1100px) {
  .sb-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 72px 0 32px; }
  .sb-rung, .sb-alone, .sb-isolation { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sb-rung { padding: 48px 0; }
  .sb-isolation { padding: 80px 0; }
  .sb-figure svg { justify-self: start; }
  .sb-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-uses > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sb-uses > div:nth-child(n + 3) { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
}
@media (max-width: 860px) {
  .sb-ladder { grid-template-columns: minmax(0, 1fr); }
  .sb-ladder li { border-left-width: 1px; border-top-width: 0; border-radius: 0; }
  .sb-ladder li:first-child { border-top-width: 1px; border-radius: 8px 8px 0 0; }
  .sb-ladder li:last-child { border-radius: 0 0 8px 8px; }
  .sb-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sb-hero { padding: 56px 0 24px; }
  .sb-uses { grid-template-columns: minmax(0, 1fr); }
  .sb-uses > div, .sb-uses > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sb-uses > div:nth-child(n + 2) { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
  .sb-card { padding: 22px 20px 24px; }
  .sb-pre { padding: 16px 16px; font-size: 12.5px; }
}