/* ==========================================================================
   Landing page: one column, three rows.
   --------------------------------------------------------------------------
   Row 1  ink-900   identity, the claim, the policy nav
   Row 2  ink-850   the URL field. The only raised surface on the page.
   Row 3  paper     what the app does, and why it asks for Google access

   The previous layout was a two panel split at min-height: 100vh. That was
   survivable while the page was only the split; it stopped working the moment a
   second section existed, because the fold landed exactly on the seam and the
   homepage read as a finished screen with an unrelated document glued below it.

   No row has a viewport height. Height comes from content, so the top of row 2
   is visible on every laptop and row 3 announces itself with a sliver.

   Row 2 sits one lightness step above row 1 instead of carrying a shadow: in a
   dark context elevation is lightness. The field is then the lightest object
   above the fold, which is what makes it read as the target without an arrow, a
   glow, or a box drawn around a box.
   ========================================================================== */

.home { display: flow-root; }

/* One measure, one gutter, shared by all three rows so their content edges line
   up vertically down the whole page. */
.wrap {
  max-width: var(--home-measure, 1080px);
  margin-inline: auto;
  padding-inline: var(--home-gutter);
}

:root {
  --home-measure: 1080px;
  --home-gutter: clamp(20px, 4vw, 56px);
}

/* ==========================================================================
   Row 1
   ========================================================================== */
.r1 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--on-ink);
  padding: clamp(24px, 3vw, 38px) 0 clamp(38px, 5vw, 66px);
  text-align: center;
}

/* A single wash centred behind the headline. The old page had two of these,
   one per corner, which on a full width row would read as vignetting. */
.r1::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(1000px, 130%);
  aspect-ratio: 3 / 2;
  top: -46%;
  left: 50%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, oklch(48% 0.09 158 / .40), transparent 66%);
}

.grid-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .38;
  background-image:
    linear-gradient(oklch(100% 0 0 / .045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 18%, transparent 76%);
}

.r1__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  text-align: left;
}

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; min-width: 0; }
.logo__mark {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(158deg, oklch(58% 0.12 158), oklch(38% 0.10 165));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .28);
  color: oklch(97% 0.02 150);
}
.logo__txt { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; color: var(--on-ink); }
.logo__txt em {
  display: block;
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin-top: 2px;
}

.topnav { display: flex; align-items: center; gap: var(--space-5); }
.topnav a {
  font-size: 0.8125rem;
  color: var(--on-ink-2);
  text-decoration: none;
  transition: color .16s var(--ease-out-quart);
}
.topnav a:hover { color: var(--on-ink); }
.topnav a:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: var(--r-sm); }

.r1__lede { max-width: 62ch; margin: clamp(30px, 4.5vw, 58px) auto 0; }
.r1 .eyebrow { color: var(--lime); opacity: .88; }
.r1 h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 14px 0 18px;
  text-wrap: balance;
}
.r1 h1 em { font-style: italic; color: var(--lime); }

/* Light on dark loses perceived weight on three axes, so all three are
   compensated: leading, tracking and weight. */
.r1__lede p {
  color: var(--on-ink-2);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0.008em;
  font-weight: 350;
  max-width: 56ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* Three claims as a ruled band. Boxes here would compete with row 2, which is
   the one surface on the page that must look interactive. */
.claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 54px);
  text-align: left;
  border-top: 1px solid oklch(100% 0 0 / .10);
}
.claims > div { padding: var(--space-5) clamp(16px, 2.2vw, 32px) 0; }
.claims > div + div { border-left: 1px solid oklch(100% 0 0 / .10); }
.claims > div:first-child { padding-left: 0; }
.claims > div:last-child { padding-right: 0; }
.claims dt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--on-ink);
  margin-bottom: 7px;
}
.claims dt svg { color: var(--lime); flex: none; }
.claims dd {
  font-size: 0.8438rem;
  line-height: 1.62;
  letter-spacing: 0.006em;
  color: var(--on-ink-3);
  font-weight: 350;
}

/* ==========================================================================
   Row 2
   ========================================================================== */
.r2 {
  background: var(--ink-850);
  border-top: 1px solid oklch(100% 0 0 / .09);
  border-bottom: 1px solid oklch(100% 0 0 / .09);
  padding: clamp(34px, 4.6vw, 62px) 0 clamp(28px, 3.6vw, 46px);
  color: var(--on-ink);
}
.r2__in { max-width: 620px; margin-inline: auto; text-align: center; }

.r2 h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.026em;
  color: var(--on-ink);
}
.r2__sub {
  color: var(--on-ink-2);
  font-size: 0.9375rem;
  line-height: 1.66;
  letter-spacing: 0.006em;
  font-weight: 350;
  max-width: 52ch;
  margin: 10px auto clamp(22px, 3vw, 32px);
}

/* The error notice is a light component by default, which would glare on ink.
   This variant keeps the semantic red and drops the light fill. */
.notice--on-ink {
  text-align: left;
  margin-bottom: var(--space-4);
  background: oklch(51% 0.175 27 / .12);
  border-color: oklch(72% 0.145 27 / .38);
  color: oklch(85% 0.075 27);
}

.r2 form { text-align: left; }
.r2 .field > label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin-bottom: 9px;
}

/* Scheme, field and submit on one line. */
.entry {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 6px 6px 6px 0;
  transition: box-shadow .2s var(--ease-out-quart), border-color .2s var(--ease-out-quart);
}
.entry:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 4px oklch(82% 0.155 148 / .18);
}

.entry__scheme {
  display: flex;
  align-items: center;
  padding-inline: 16px 2px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-3);
  user-select: none;
}
.entry input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  padding: 12px 6px 12px 2px;
  font: inherit;
  font-size: 1rem;
  letter-spacing: -0.008em;
  color: var(--text);
}
.entry input::placeholder { color: var(--text-3); }

.entry__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: none;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  min-height: 44px;
  background: var(--ink-900);
  color: var(--paper-2);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  cursor: pointer;
  transition: background .18s var(--ease-out-quart), transform .12s var(--ease-out-quart);
}
.entry__go:hover { background: var(--pine-deep); }
.entry__go:active { transform: translateY(1px); }
.entry__go:disabled { background: var(--paper-4); color: var(--text-3); cursor: not-allowed; transform: none; }
.entry__go svg { transition: transform .2s var(--ease-out-quart); }
.entry__go:hover:not(:disabled) svg { transform: translateX(2px); }

/* Meta line under the field: verification state left, provider right. */
.r2__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--on-ink-3);
  text-align: left;
}
.r2__meta > span { display: flex; align-items: center; gap: 8px; letter-spacing: 0.006em; }
.r2__meta svg { color: var(--lime); flex: none; }
.r2__meta b { color: var(--on-ink-2); font-weight: 500; }
.r2__who {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: -0.02em;
  color: var(--on-ink-3);
  white-space: nowrap;
}

/* Progress, revealed by verify.js after the gesture succeeds. */
.running { display: none; margin-top: var(--space-5); text-align: left; }
.running[data-on] { display: block; animation: fade-up .4s var(--ease-out-expo); }
.running__bar { height: 3px; border-radius: 2px; background: oklch(100% 0 0 / .10); overflow: hidden; }
.running__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lime);
  transition: width .5s var(--ease-out-quart);
}
.running ol { margin-top: 14px; display: grid; gap: 9px; }
.running li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--on-ink-3);
  letter-spacing: 0.006em;
}
.running li[data-done] { color: var(--on-ink); }
.tick {
  width: 14px; height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid oklch(100% 0 0 / .22);
}
li[data-done] .tick { border-color: var(--lime); background: var(--lime); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Live engine figures. A footing to row 2, not a panel of its own. */
.pipe {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding-top: var(--space-4);
  border-top: 1px solid oklch(100% 0 0 / .09);
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: -0.02em;
}
.pipe li { display: flex; align-items: center; gap: 8px; color: var(--on-ink-2); }
.pipe li::after { content: '/'; margin: 0 13px; color: oklch(100% 0 0 / .2); }
.pipe li:last-child::after { display: none; }
.pipe b { font-weight: 500; color: var(--on-ink); }
.pipe i { font-style: normal; font-size: 0.6875rem; color: var(--on-ink-3); }

.sec-strip {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}
.sec-strip li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  letter-spacing: 0.006em;
  color: var(--on-ink-3);
}
.sec-strip svg { color: var(--on-ink-2); flex: none; }

/* --------------------------------------------------------------------------
   reCAPTCHA v2 checkbox slot
   --------------------------------------------------------------------------
   Google renders the widget in an iframe at a fixed 304px and does not permit
   restyling it. The slot gives it a light surround so a light widget on a dark
   row reads as part of the form rather than an embed dropped on top of one.
   -------------------------------------------------------------------------- */
.captcha-widget {
  margin-top: var(--space-4);
  padding: 14px;
  border: 1px solid oklch(100% 0 0 / .12);
  border-radius: var(--r-md);
  background: oklch(100% 0 0 / .04);
  display: flex;
  justify-content: center;
}
.captcha-widget .g-recaptcha { transform-origin: center; }
.captcha-widget__fallback {
  font-size: 0.8125rem;
  color: var(--on-ink-2);
  text-align: center;
  max-width: 40ch;
}

/* ==========================================================================
   Row 3
   ========================================================================== */
.r3 {
  background: var(--paper);
  padding: clamp(48px, 6.4vw, 90px) 0 clamp(38px, 5vw, 66px);
}

.r3__hd { max-width: 68ch; }
.r3__hd h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.7vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  margin: 12px 0 18px;
}
.r3__lede {
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 72ch;
}
.r3__lede + .r3__lede { margin-top: 13px; }
.r3__lede b { color: var(--text); font-weight: 600; }

/* The sequence, ruled and numbered. Reads as a specification, which is the
   register the rest of the product speaks in. */
.flow {
  margin: clamp(32px, 4.4vw, 56px) 0 clamp(40px, 5vw, 68px);
  border-top: 1px solid var(--line-strong);
}
.flow > li {
  display: grid;
  grid-template-columns: 46px minmax(0, 25ch) minmax(0, 1fr);
  gap: 0 var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.flow__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.flow h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; }
.flow p { font-size: 0.9375rem; line-height: 1.66; color: var(--text-2); max-width: 66ch; }

/* ---- the disclosure Google's review asks for ---- */
.disc h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  max-width: 34ch;
}
.disc > p { font-size: 1rem; line-height: 1.7; color: var(--text-2); max-width: 74ch; }
.disc > p + p { margin-top: 12px; }
.disc__subHd {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  margin: var(--space-6) 0 4px;
}

.r3 code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: -0.02em;
  background: var(--paper-3);
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
}

/* A reviewer reads this line by line, so it is a real table with row headers,
   not a styled list. */
.scopes {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-6);
  font-size: 0.8438rem;
  text-align: left;
}
.scopes caption {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 12px;
}
.scopes th,
.scopes td { padding: 14px 18px 14px 0; vertical-align: top; line-height: 1.58; }
.scopes thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-strong);
}
.scopes tbody th { font-weight: 600; color: var(--text); width: 23%; min-width: 148px; }
.scopes tbody td { color: var(--text-2); }
.scopes tbody td:first-of-type { width: 24%; }
.scopes tbody tr { border-bottom: 1px solid var(--line); }
.scopes tbody tr:last-child { border-bottom: none; }

.tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--pine);
  background: var(--pine-soft);
  border: 1px solid var(--pine-line);
  vertical-align: 1px;
}
.tag--opt { color: var(--text-3); background: var(--paper-3); border-color: var(--line); }
.declined { display: block; margin-top: 5px; color: var(--text-3); }

.nots { display: grid; gap: 10px; margin-top: var(--space-4); max-width: 86ch; }
.nots li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 0 11px;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text-2);
}
.nots svg { color: var(--pine); margin-top: 4px; }

.disc__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-6); }
.disc__revoke { margin-top: var(--space-4); font-size: 0.8438rem; color: var(--text-3); }
.disc__revoke a { color: var(--pine); }

/* Operator-editable badges. A quiet ruled strip closing row 3, because a row of
   technical pills beside the headline competes with the claim it sits next to. */
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: clamp(38px, 4.6vw, 60px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.specs li {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}

/* ==========================================================================
   Footer
   --------------------------------------------------------------------------
   .sitefoot was only ever styled in legal.css, which this page does not load,
   so it previously rendered with browser defaults: text flush to the viewport
   edge and underlined default links.
   ========================================================================== */
.sitefoot { border-top: 1px solid var(--line); background: var(--paper-3); }
.sitefoot__in {
  max-width: var(--home-measure);
  margin-inline: auto;
  padding: clamp(22px, 3vw, 32px) var(--home-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-7);
  align-items: start;
  font-size: 0.8125rem;
}
.sitefoot__brand { display: grid; gap: 4px; min-width: 0; }
.sitefoot__brand b { font-weight: 600; color: var(--text); }
.sitefoot__brand span { color: var(--text-3); line-height: 1.55; max-width: 58ch; }
.sitefoot__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.sitefoot__nav a {
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .16s var(--ease-out-quart);
}
.sitefoot__nav a:hover { color: var(--pine); }

/* ==========================================================================
   Tablet, landscape: 1024px and below
   --------------------------------------------------------------------------
   The measure is already fluid, so nothing needs to move yet. Only the display
   headline is pulled back, because at this width clamp's vw term still resolves
   large enough to run the h1 to four lines.
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --home-measure: 900px; }
  .r1 h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
  .flow > li { grid-template-columns: 40px minmax(0, 22ch) minmax(0, 1fr); }
}

/* ==========================================================================
   Tablet, portrait: 860px and below
   --------------------------------------------------------------------------
   Three claim columns give about 22 characters each here, which hyphenates.
   They stack into ruled rows. The scope table still holds three columns at this
   width, so it stays a table.
   ========================================================================== */
@media (max-width: 860px) {
  .claims { grid-template-columns: 1fr; border-top: none; }
  .claims > div {
    padding: var(--space-4) 0;
    border-top: 1px solid oklch(100% 0 0 / .10);
  }
  .claims > div + div { border-left: none; }

  .flow > li { grid-template-columns: 34px minmax(0, 1fr); row-gap: 6px; }
  .flow p { grid-column: 2; }

  .sitefoot__in { grid-template-columns: 1fr; }
  .sitefoot__nav { justify-content: flex-start; }
}

/* ==========================================================================
   Phone: 620px and below
   --------------------------------------------------------------------------
   Redesigned rather than shrunk. The nav collapses to the two policy links a
   visitor and a reviewer actually need, the submit leaves the field because it
   no longer fits beside it, and the table becomes stacked blocks.
   ========================================================================== */
@media (max-width: 620px) {
  :root { --home-gutter: 20px; }

  .r1 { padding-top: var(--space-4); text-align: left; }
  .r1__lede { margin-top: var(--space-6); max-width: none; }
  .r1__lede p { margin-inline: 0; }
  .r1 h1 { font-size: 1.875rem; }

  /* "What it does" and "Google access" are in-page anchors already reachable by
     scrolling; Privacy and Terms are not. Those two stay. */
  .topnav { gap: var(--space-4); }
  .topnav a[href^='#'] { display: none; }
  .topnav a:last-child { display: none; }

  .r2 { padding-top: var(--space-6); }
  .r2__in { text-align: left; }
  .r2__sub { margin-inline: 0; }

  /* 44px stays the minimum target, and the button gets the full width because a
     centred label in a narrow column is easier to hit than a right aligned one. */
  .entry { flex-wrap: wrap; padding: 6px; gap: 6px; }
  .entry__scheme { padding-left: 10px; }
  .entry input { flex: 1 1 60%; padding-left: 0; }
  .entry__go { flex: 1 0 100%; }

  .r2__who { margin-left: 0; width: 100%; }

  .pipe { justify-content: flex-start; }
  .pipe li::after { display: none; }
  .pipe li { margin-right: 16px; }
  .sec-strip { justify-content: flex-start; }

  /* Three narrow columns of prose is unreadable here, so each row becomes a
     stacked block that keeps its own heading. */
  .scopes thead { display: none; }
  .scopes tbody tr { display: block; padding: 16px 0; }
  .scopes tbody th,
  .scopes tbody td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border-bottom: none;
  }
  .scopes tbody td { margin-top: 6px; }
  .scopes caption { padding-bottom: 4px; }

  .disc__links .btn { flex: 1 1 auto; justify-content: center; }
}

/* Below 380px the reCAPTCHA iframe overflows its own container, so it is scaled
   rather than allowed to give the whole document a horizontal scrollbar. */
@media (max-width: 380px) {
  .captcha-widget { padding: 10px 4px; }
  .captcha-widget .g-recaptcha { transform: scale(0.86); }
}

@media (prefers-reduced-motion: reduce) {
  .running[data-on] { animation: none; }
  .running__bar i,
  .entry,
  .entry__go,
  .entry__go svg { transition: none; }
}

/* ==========================================================================
   2.18.0 - Source mode
   --------------------------------------------------------------------------
   Two ways to supply the page, sitting above the field they both feed. The
   whole block is quieter than the entry row beneath it on purpose: choosing
   how to supply the page is a decision most visitors will never make, and a
   loud segmented control at the top of the form would make it look like one
   they have to.
   ========================================================================== */

.srcpick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* The whole tile is the target, not the 13px dot. A radio nobody can hit is a
   radio that gets clicked three times. */
.srcpick__opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid oklch(100% 0 0 / 0.14);
  border-radius: var(--r-md);
  background: oklch(100% 0 0 / 0.03);
  cursor: pointer;
  transition: border-color .16s var(--ease-out-quart), background .16s var(--ease-out-quart);
}
.srcpick__opt:hover { border-color: oklch(100% 0 0 / 0.26); }
.srcpick__opt input { margin-top: 3px; flex: none; accent-color: var(--lime); }
.srcpick__opt b { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--on-ink); }
.srcpick__opt em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--on-ink-3);
  margin-top: 3px;
}

/* :has, with a fallback that is simply the unselected state. On an engine
   without it the radio dot still shows which is chosen, so nothing is lost
   that matters. */
.srcpick__opt:has(input:checked) {
  border-color: oklch(100% 0 0 / 0.4);
  background: oklch(100% 0 0 / 0.08);
}
.srcpick__opt:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }

/* The textarea. Monospaced and nowrap, because it holds markup and a wrapped
   line of HTML is unreadable in a way a wrapped line of prose is not. */
.pastebox { margin-top: var(--space-4); }
.pastebox textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--on-ink);
  background: oklch(100% 0 0 / 0.04);
  border: 1px solid oklch(100% 0 0 / 0.16);
  border-radius: var(--r-md);
  resize: vertical;
  min-height: 11rem;
  tab-size: 2;
}
.pastebox textarea::placeholder { color: var(--on-ink-3); }
.pastebox textarea:focus {
  outline: none;
  border-color: oklch(100% 0 0 / 0.38);
  background: oklch(100% 0 0 / 0.06);
}

.pastebox__hint {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: 9px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--on-ink-3);
}

/* The live byte count. Tabular, so it does not jitter while typing, and it
   turns amber before the server would refuse rather than after. */
.pastebox__hint [data-paste-count] {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--on-ink-2);
}
.pastebox__hint [data-paste-count][data-over] { color: var(--amber); font-weight: 600; }
.pastebox__hint span + span { max-width: 52ch; text-align: right; }

@media (max-width: 620px) {
  .srcpick { grid-template-columns: 1fr; }
  .pastebox__hint span + span { text-align: left; }
}