/* SlateIT theme layer.
 *
 * Loaded after css/tailwind/tailwind.min.css and never instead of it.
 *
 * The bundled Tailwind build is purged and was generated without the `dark`
 * variant, so `dark:` classes in the markup would compile to nothing. Instead
 * this file restates the handful of colour utilities the site actually uses,
 * scoped to `html.dark`, against a token palette. Light mode is left entirely
 * to the Tailwind build - nothing here repaints it - so the light site renders
 * pixel for pixel as it did before, bar the switch itself.
 *
 * Adding new markup only needs the existing utility classes; if a colour
 * utility is used that is not listed under "dark overrides" below, add it
 * there and it will pick the theme up everywhere at once.
 *
 * Sections:
 *   1. Tokens
 *   2. Document + section backgrounds
 *   3. Dark overrides for the Tailwind utilities in use
 *   4. Theme toggle
 *   5. Contact form (moved out of contact.html so it can be themed)
 *   6. Motion - anchor scrolling and page transitions
 *   7. Legal documents - scoped prose styling for legal/terms/privacy
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Published by js/transitions.js from the sticky header's measured height,
   * so anchor targets clear it instead of landing underneath. */
  --si-header-h: 0px;

  --si-bg: #ffffff;
  --si-surface: #ffffff;
  --si-surface-2: #f7f8f9;
  --si-surface-3: #ffffff;
  --si-scrim: rgba(42, 51, 66, 0.5);

  --si-line: #eef0f3;
  --si-line-strong: #d5dae1;

  --si-text-strong: #1c232d;
  --si-text: #2a3342;
  --si-text-2: #333f51;
  --si-body: #556987;
  --si-muted: #8896ab;
  --si-faint: #bbc3cf;

  --si-accent: #2ad167;
  --si-accent-hover: #26bc5e;
  --si-accent-soft: #eafaf0;
  --si-accent-text: #2ad167;
  --si-on-accent: #f4fdf7;
  --si-amber: #fbbf24;

  /* Body-copy links. The brand green is only 2:1 on white, so prose needs a
   * darker shade of it: this clears AA on both surfaces (5.4:1 and 5.1:1)
   * while still reading as the brand colour. */
  --si-link: #127a3d;
  --si-link-hover: #0f6b35;

  --si-input-bg: #ffffff;
  --si-placeholder: #8896ab;

  --si-danger: #e02424;
  --si-danger-ring: rgba(224, 36, 36, 0.2);
  --si-danger-text: #c81e1e;
  --si-danger-strong: #9b1c1c;
  --si-danger-bg: #fdf2f2;
  --si-danger-border: #f8b4b4;

  /* --si-shadow-sm mirrors Tailwind's own `shadow-sm`, violet tint and all.
   * The form inputs used a neutral shadow before dark mode existed and keep
   * their own token so light mode renders pixel for pixel as it did. */
  --si-shadow-sm: 0 1px 2px 0 rgba(105, 81, 255, 0.05);
  --si-shadow-lg: 10px 14px 34px rgba(0, 0, 0, 0.04);
  --si-input-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --si-media-filter: none;

  /* Grid-paper section backdrops. */
  --si-pattern: url("../flex-ui-assets/elements/pattern-white.svg");
  --si-pattern-alt: url("../flex-ui-assets/elements/pattern-light1.svg");
  --si-pattern-big: url("../flex-ui-assets/elements/pattern-light-big.svg");
}

:root.dark {
  color-scheme: dark;

  --si-bg: #0f141b;
  --si-surface: #151c25;
  --si-surface-2: #1b242f;
  --si-surface-3: #222d3a;
  --si-scrim: rgba(3, 7, 12, 0.66);

  --si-line: #26313e;
  --si-line-strong: #36455a;

  --si-text-strong: #f3f6fa;
  --si-text: #e4eaf1;
  --si-text-2: #d3dce7;
  --si-body: #aebbcb;
  --si-muted: #8b99ac;
  --si-faint: #6e7c90;

  --si-accent: #2ad167;
  --si-accent-hover: #4edd85;
  --si-accent-soft: #16281e;
  --si-accent-text: #4edd85;
  --si-on-accent: #f4fdf7;
  --si-amber: #fcd34d;

  /* On dark the accent itself is already well clear of AA (9.8:1). */
  --si-link: #4edd85;
  --si-link-hover: #6ee79c;

  --si-input-bg: #10161e;
  --si-placeholder: #7e8ca0;

  --si-danger: #f98080;
  --si-danger-ring: rgba(249, 128, 128, 0.22);
  --si-danger-text: #f8b4b4;
  --si-danger-strong: #fbd5d5;
  --si-danger-bg: #2a161a;
  --si-danger-border: #6b2a2a;

  --si-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --si-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);
  --si-input-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --si-media-filter: brightness(0.88) contrast(1.02);

  --si-pattern: url("../flex-ui-assets/elements/dark/pattern-white.svg");
  --si-pattern-alt: url("../flex-ui-assets/elements/dark/pattern-light1.svg");
  --si-pattern-big: url("../flex-ui-assets/elements/dark/pattern-light-big.svg");
}

/* ------------------------------------------------------------------ *
 * 2. Document + section backgrounds
 * ------------------------------------------------------------------ */

/* Paints the overscroll area too, so rubber-band scrolling stays in theme. */
html {
  background-color: var(--si-bg);
}

body {
  background-color: var(--si-bg);
  color: var(--si-text);
}

::selection {
  background-color: var(--si-accent);
  color: #06210f;
}

/* The privacy policy cites a few long unbroken URLs, which on a phone are
 * wider than the viewport and give the whole page a horizontal scrollbar.
 * Only takes effect when a word genuinely cannot fit, so short links such as
 * the nav are unaffected. */
a {
  overflow-wrap: break-word;
}

/* These replace the inline `background-image` styles the sections used to
 * carry. An inline style cannot be re-pointed by a stylesheet, and the theme
 * has to swap the artwork, so the URLs live in tokens instead. The dark
 * artwork is the same geometry recoloured, so nothing shifts. */
.si-pattern,
.si-pattern-alt,
.si-pattern-big {
  background-position: center;
}

.si-pattern {
  background-image: var(--si-pattern);
}

.si-pattern-alt {
  background-image: var(--si-pattern-alt);
}

.si-pattern-big {
  background-image: var(--si-pattern-big);
}

/* Photography is mixed for a white page; take the edge off it on dark. */
.dark .si-media {
  filter: var(--si-media-filter);
}

/* ------------------------------------------------------------------ *
 * 2b. Sticky header
 *
 * The nav used to sit inside the first <section>, which carries
 * `overflow-hidden`. An ancestor with a clipping overflow becomes the
 * sticky element's scroll container, so the nav would have unstuck as soon
 * as that section scrolled past - on the inner pages, immediately. The nav
 * is its own <header> element now, a direct child of the page wrapper.
 * ------------------------------------------------------------------ */

.si-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Matches the top edge of the grid backdrop on the section below, which
   * the artwork fades to white (and to the dark surface in dark mode), so
   * there is no seam where the header ends. */
  background-color: var(--si-surface);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Set once the page is scrolled at all, so the header only announces itself
 * as an overlay when it actually is one. */
.si-header.is-stuck {
  border-bottom-color: var(--si-line);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.45);
}

.dark .si-header.is-stuck {
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.7);
}

/* The nav's own padding, rather than Tailwind's. A sticky header is on screen
 * the whole time, so it is kept tighter than the old static one - more so on
 * a phone, where it costs a share of a much smaller viewport. The bundled
 * build is purged and has no responsive padding utilities left (no `xl:py-*`),
 * which is the other reason this lives here. */
.si-header__nav {
  padding: 0.75rem 1rem;
}

@media (min-width: 1280px) {
  .si-header__nav {
    padding: 1rem;
  }
}

/* Keeps the theme switch off the burger on small screens. `mr-4` was doing
 * nothing here: the purged build only kept mr-8 and mr-12. */
.si-header__toggle {
  margin-right: 0.875rem;
}

/* Contact page: the email/phone/mail/socials column was centred against the
 * form beside it, and the form is much the taller of the two, so it sat a long
 * way below the card's top edge. `start` puts both columns on the same line
 * and keeps the column at its content height, so the two rows of details stay
 * packed together rather than being spread down the row.
 *
 * Only bites at lg and up, where the grid is two columns; below that each is
 * its own row and already sized to its content. The purged Tailwind build
 * kept no `self-start`, which is why this is here. */
.si-contact-details {
  align-self: start;
}

/* The logo ships as a black wordmark and a light one. Both are in the markup
 * so the swap is instant on toggle and needs no request. */
.si-logo {
  height: 50px;
  width: auto;
}

.si-logo--dark {
  display: none;
}

.dark .si-logo--light {
  display: none;
}

.dark .si-logo--dark {
  display: block;
}

/* ------------------------------------------------------------------ *
 * 3. Dark overrides for the Tailwind utilities in use
 *
 * Every rule below is a repaint of a class that already exists in the
 * Tailwind build. `.dark .foo` (0,2,0) outbids `.foo` (0,1,0), and
 * `.dark .hover\:foo:hover` (0,3,0) outbids `.hover\:foo:hover` (0,2,0).
 * ------------------------------------------------------------------ */

/* -- backgrounds -- */
.dark .bg-body,
.dark .bg-white {
  background-color: var(--si-surface);
}

.dark .bg-coolGray-50 {
  background-color: var(--si-surface-2);
}

.dark .hover\:bg-white:hover,
.dark .hover\:bg-coolGray-50:hover,
.dark .hover\:bg-coolGray-100:hover {
  background-color: var(--si-surface-3);
}

.dark .bg-green-100 {
  background-color: var(--si-accent-soft);
}

.dark .hover\:bg-green-600:hover {
  background-color: var(--si-accent-hover);
}

/* The mobile drawer scrim. Written so `bg-opacity-50` on the same element
 * still has something to modulate. */
.dark .bg-coolGray-900 {
  background-color: rgb(3 7 12 / var(--tw-bg-opacity, 1));
}

.dark .navbar-menu.bg-coolGray-900 {
  background-color: var(--si-scrim);
}

/* -- text -- */
.dark .text-body,
.dark .text-coolGray-900,
.dark .text-coolGray-800 {
  color: var(--si-text);
}

.dark .text-darkCoolGray-900 {
  color: var(--si-text-strong);
}

.dark .text-coolGray-500 {
  color: var(--si-body);
}

.dark .text-coolGray-400 {
  color: var(--si-muted);
}

.dark .text-coolGray-300 {
  color: var(--si-faint);
}

.dark .text-green-500 {
  color: var(--si-accent-text);
}

.dark .text-amber-400 {
  color: var(--si-amber);
}

.dark .hover\:text-coolGray-900:hover,
.dark .hover\:text-coolGray-600:hover {
  color: var(--si-text);
}

.dark .hover\:text-coolGray-400:hover {
  color: var(--si-body);
}

.dark .hover\:text-green-600:hover {
  color: var(--si-accent-hover);
}

/* `text-coolGray-50` is a label colour on green buttons everywhere except the
 * burger icon, where it fills the rounded plate behind the bars. Repainting
 * the class wholesale would wreck the buttons, so only the icon is targeted. */
.dark .navbar-burger .text-coolGray-50 {
  color: var(--si-surface-3);
}

.dark .navbar-burger .text-coolGray-500 {
  color: var(--si-body);
}

/* The drawer close glyph carries fill="#556987" as a presentation attribute,
 * which any stylesheet rule outranks. */
.dark .navbar-close svg path {
  fill: var(--si-body);
}

/* -- borders and rings -- */
.dark .border-coolGray-100 {
  border-color: var(--si-line);
}

.dark .border-coolGray-200 {
  border-color: var(--si-line-strong);
}

.dark .focus\:ring-coolGray-200:focus {
  --tw-ring-color: rgb(54 69 90 / var(--tw-ring-opacity, 1));
}

/* -- elevation -- */
/* Drop shadows barely register on a dark page, so the card lift is carried by
 * a hairline as well as the shadow. */
.dark .shadow-sm {
  --tw-shadow: var(--si-shadow-sm);
  --tw-shadow-colored: var(--si-shadow-sm);
}

.dark .hover\:shadow-xl:hover {
  --tw-shadow: var(--si-shadow-lg);
  --tw-shadow-colored: var(--si-shadow-lg);
  outline: 1px solid var(--si-line);
  outline-offset: -1px;
}

/* ------------------------------------------------------------------ *
 * 4. Theme toggle
 * ------------------------------------------------------------------ */

.theme-toggle {
  /* 56 = 2 border + 6 padding + two 24px icon cells. The puck is one cell
   * wide and travels exactly one cell, so it lands centred on either icon. */
  --si-toggle-travel: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  width: 56px;
  height: 32px;
  border: 1px solid var(--si-line-strong);
  border-radius: 9999px;
  background-color: var(--si-surface-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dark .theme-toggle {
  background-color: var(--si-input-bg);
}

.theme-toggle:hover {
  border-color: var(--si-accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--si-accent);
  outline-offset: 2px;
}

/* The travelling puck. `left` is animated rather than `transform` so the
 * icons above it can keep their own transforms. */
.theme-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background-color: var(--si-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dark .theme-toggle__thumb {
  left: calc(3px + var(--si-toggle-travel));
}

.theme-toggle__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--si-muted);
  transition: color 0.28s ease;
}

.theme-toggle__icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Whichever icon the puck is sitting under reads as the active one. */
.theme-toggle__icon--sun {
  color: #06210f;
}

.dark .theme-toggle__icon--sun {
  color: var(--si-muted);
}

.dark .theme-toggle__icon--moon {
  color: #06210f;
}

/* The nav slots that hold the switch are laid out with Tailwind utilities
 * rather than a class here. This sheet loads after the Tailwind build, so a
 * `display` declared at equal specificity would beat `xl:hidden` on source
 * order and the mobile switch would never hide on desktop. */

.si-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Contact form
 *
 * Previously an inline <style> block in contact.html. The bundled Tailwind
 * build is purged and has no form utilities, so the input states are defined
 * here against the site palette.
 * ------------------------------------------------------------------ */

.form-field {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--si-text-2);
}

.form-required {
  color: var(--si-accent-text);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--si-text-2);
  background-color: var(--si-input-bg);
  border: 1px solid var(--si-line-strong);
  border-radius: 0.375rem;
  box-shadow: var(--si-input-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--si-placeholder);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--si-accent);
  box-shadow: 0 0 0 3px rgba(42, 209, 103, 0.25);
}

.form-textarea {
  min-height: 10rem;
  resize: vertical;
}

.form-input.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--si-danger);
}

/* Keep the invalid state visible while the field is being corrected. */
.form-input.is-invalid:focus,
.form-textarea.is-invalid:focus {
  border-color: var(--si-danger);
  box-shadow: 0 0 0 3px var(--si-danger-ring);
}

.form-error {
  display: none;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--si-danger-text);
}

.form-error.is-visible {
  display: block;
}

.form-status {
  display: none;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-error {
  color: var(--si-danger-strong);
  background-color: var(--si-danger-bg);
  border: 1px solid var(--si-danger-border);
}

.form-submit {
  width: 100%;
  cursor: pointer;
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * 6. Motion
 * ------------------------------------------------------------------ */

/* Without JS an in-page anchor still glides rather than jumping. With JS the
 * easing is driven from js/transitions.js, which needs the browser to leave
 * scroll position alone between frames. */
html:not(.si-js) {
  scroll-behavior: smooth;
}

/* Anchor targets clear the sticky header and land with a little air above
 * them, instead of flush to the top edge or hidden underneath it. Honoured by
 * the scroll animator too, which reads this value back. Form controls are
 * left out so the contact form's own scrollIntoView calls still centre. */
:is(section, div, span, h1, h2, h3, h4, article, main)[id] {
  scroll-margin-top: calc(var(--si-header-h) + 1.5rem);
}

/* -- page transitions: native cross-document View Transitions -- *
 *
 * Chrome/Edge and Safari run this and get a true cross-fade-free slide with
 * no blank frame, because the outgoing page stays on screen until the
 * incoming one has painted. Browsers without it fall through to the
 * class-driven animation below, which js/transitions.js drives instead. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: si-leave-forward 240ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: si-enter-forward 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-si-nav="back"]::view-transition-old(root) {
  animation-name: si-leave-back;
}

html[data-si-nav="back"]::view-transition-new(root) {
  animation-name: si-enter-back;
}

/* -- page transitions: scripted fallback -- */

/* Applied by js/transitions.js while the outgoing page animates away and
 * again, from the head, for the first paint of the incoming page. */
.si-leaving body {
  animation: si-leave-forward 220ms cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

.si-leaving[data-si-nav="back"] body {
  animation-name: si-leave-back;
}

.si-entering body {
  animation: si-enter-forward 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.si-entering[data-si-nav="back"] body {
  animation-name: si-enter-back;
}

/* A cold landing - typed URL, bookmark, search result - has no page to slide
 * away from, so it rises into place instead of sliding sideways. */
.si-entering[data-si-nav="none"] body {
  animation-name: si-enter-fresh;
}

/* Sliding the body sideways would otherwise widen the scrollable area.
 * This has to be `clip` and not `hidden`: `hidden` would turn the root into a
 * scroll container for the length of the transition, which unsticks the
 * header. Engines without `clip` simply get a brief horizontal scrollbar. */
.si-leaving,
.si-entering {
  overflow-x: clip;
}

@keyframes si-leave-forward {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(-14%, 0, 0);
  }
}

@keyframes si-enter-forward {
  from {
    opacity: 0;
    transform: translate3d(14%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes si-leave-back {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(14%, 0, 0);
  }
}

@keyframes si-enter-back {
  from {
    opacity: 0;
    transform: translate3d(-14%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes si-enter-fresh {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -- reduced motion -- *
 *
 * js/transitions.js checks the same query and skips the scripted work, so
 * this is the belt to that braces: nothing here should ever animate. */
@media (prefers-reduced-motion: reduce) {
  html:not(.si-js) {
    scroll-behavior: auto;
  }

  @view-transition {
    navigation: none;
  }

  .si-leaving body,
  .si-entering body {
    animation: none;
  }

  .theme-toggle__thumb,
  .theme-toggle__icon,
  .theme-toggle {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * 7. Legal documents
 *
 * legal.html, terms.html and privacy.html are long-form prose pasted out of
 * a policy generator. The markup arrived as a flat run of <p> tags with
 * inline font-weight, <br> tags for spacing, and no heading structure, set
 * full-container-width - a ~140-character measure that is close to unreadable.
 *
 * This is a scoped prose stylesheet: everything is under .si-legal so it
 * cannot leak into the marketing pages, and it uses the same tokens as the
 * rest of the theme so both colour schemes come for free.
 * ------------------------------------------------------------------ */

.si-legal {
  color: var(--si-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.si-legal > * + * {
  margin-top: 1.15em;
}

/* -- headings -- */

.si-legal h2,
.si-legal h3,
.si-legal h4 {
  color: var(--si-text);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--si-header-h) + 1.5rem);
}

/* Section rule doubles as the separator between clauses. */
.si-legal h2 {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--si-line);
  font-size: 1.375rem;
}

.si-legal > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.si-legal h3 {
  margin-top: 2rem;
  font-size: 1.125rem;
}

.si-legal h4 {
  margin-top: 1.5rem;
  font-size: 1rem;
}

/* -- body -- */

.si-legal strong {
  color: var(--si-text);
  font-weight: 600;
}

.si-legal em {
  font-style: italic;
}

.si-legal a {
  color: var(--si-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.si-legal a:hover {
  color: var(--si-link-hover);
}

.si-legal ul,
.si-legal ol {
  padding-left: 1.5rem;
}

.si-legal ul {
  list-style: disc;
}

.si-legal ol {
  list-style: decimal;
}

.si-legal li + li {
  margin-top: 0.5rem;
}

.si-legal li::marker {
  color: var(--si-muted);
}

/* The document date, directly under the title. */
.si-legal__meta {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--si-line);
  border-radius: 9999px;
  background-color: var(--si-surface);
  color: var(--si-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

/* -- tables -- *
 *
 * The CCPA table in the privacy policy was <table class="table
 * table-bordered">: Bootstrap classes that exist nowhere, so it rendered with
 * no borders, no padding and no spacing. It is also wider than a phone, hence
 * the scroll container. */

.si-legal__table {
  overflow-x: auto;
  margin-top: 1.75rem;
  border: 1px solid var(--si-line);
  border-radius: 0.5rem;
  background-color: var(--si-surface);
  -webkit-overflow-scrolling: touch;
}

.si-legal__table table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.si-legal__table th,
.si-legal__table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--si-line);
  text-align: left;
  vertical-align: top;
}

.si-legal__table tr:last-child th,
.si-legal__table tr:last-child td {
  border-bottom: 0;
}

/* The generator emits the header row as ordinary cells in <tbody>. */
.si-legal__table tr:first-child td,
.si-legal__table th {
  position: sticky;
  top: 0;
  background-color: var(--si-surface-2);
  color: var(--si-text);
  font-weight: 600;
  white-space: nowrap;
}

.si-legal__table td p {
  margin: 0;
}

/* Narrow trailing column of YES/NO answers. */
.si-legal__table td:last-child {
  font-weight: 600;
  color: var(--si-text);
  white-space: nowrap;
}

/* -- page furniture -- */

.si-legal-page__title {
  margin-bottom: 0.75rem;
  color: var(--si-text);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.si-legal-page__lede {
  margin-bottom: 2rem;
  color: var(--si-body);
  font-size: 1.125rem;
  line-height: 1.7;
}

/* -- contents -- *
 *
 * Both long documents get a static index; terms.html alone runs to 46
 * sections and roughly 8,800 words. */

.si-legal-toc {
  margin-bottom: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--si-line);
  border-radius: 0.75rem;
  background-color: var(--si-surface);
}

.si-legal-toc__heading {
  margin-bottom: 1rem;
  color: var(--si-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.si-legal-toc ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: si-toc;
}

@media (min-width: 768px) {
  .si-legal-toc ol {
    grid-template-columns: 1fr 1fr;
  }
}

.si-legal-toc li {
  counter-increment: si-toc;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.si-legal-toc a {
  color: var(--si-body);
  text-decoration: none;
}

.si-legal-toc a::before {
  content: counter(si-toc) ".";
  display: inline-block;
  min-width: 1.75rem;
  color: var(--si-muted);
  font-variant-numeric: tabular-nums;
}

.si-legal-toc a:hover {
  color: var(--si-link-hover);
}

.si-legal-toc a:hover::before {
  color: var(--si-link-hover);
}

/* -- legal.html index cards -- *
 *
 * The page was five bare <p> lines whose links were text-amber-400: 1.6:1
 * against the section background, i.e. the four links that are the entire
 * point of the page were close to invisible in light mode. They are cards
 * now, and the links use the prose link token. */

.si-legal-index {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .si-legal-index {
    grid-template-columns: 1fr 1fr;
  }
}

.si-legal-index__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--si-line);
  border-radius: 0.75rem;
  background-color: var(--si-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.si-legal-index__card:hover {
  border-color: var(--si-line-strong);
  box-shadow: var(--si-shadow-lg);
}

/* The MSA note has no link, so it reads as guidance rather than an action. */
.si-legal-index__card--note:hover {
  border-color: var(--si-line);
  box-shadow: none;
}

@media (min-width: 768px) {
  .si-legal-index__card--note {
    grid-column: 1 / -1;
  }
}

.si-legal-index__label {
  margin: 0;
  color: var(--si-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.si-legal-index__note {
  margin: 0;
  color: var(--si-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.si-legal-index__action {
  margin-top: auto;
  color: var(--si-link);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  overflow-wrap: break-word;
}

.si-legal-index__action:hover {
  color: var(--si-link-hover);
}

/* The document column. Constraining the whole block, rather than each element
 * inside it, keeps the title, lede, contents and prose on one shared measure
 * and centres them instead of hugging the left edge of a wide container. */
.si-legal-doc {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.si-legal-doc--wide {
  max-width: 52rem;
}