/* KitShell additions (components/site-kit/KitShell.tsx).

   Loaded AFTER the about kit's head (hark.css, hark-hero.css and the about
   page's inline <style>), so it only adds what that head lacks for plain
   content pages: a shorter hero, long-form legal reading (headings, lists,
   notes, tables), a two-column split, a quiet panel and form fields.
   Every value is taken from the kit itself: the about/security type scale,
   the login kit's field pill, the homepage greys. No new colours.

   This is not Brandan's file. His files are public/site/<page>/*. */

/* ---------- Hero, sized for a content page ---------- */
.x-hero.x-hero--page {
  min-height: 0;
  padding-top: clamp(132px, 16vw, 184px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.x-hero__sub {
  margin-top: 24px; max-width: 40ch;
  font: 400 clamp(17px, 1.8vw, 20px)/1.5 var(--sans); letter-spacing: -0.01em;
  color: var(--x-body-ink); text-wrap: pretty;
}
.x-hero--page .x-hero__in > .x-hero__sub { animation-delay: 420ms; }
@media (max-width: 640px) {
  .x-hero.x-hero--page { min-height: 0; padding-top: 116px; padding-bottom: 40px; }
}

/* ---------- Reading column, structured content (legal) ---------- */
.x-story.x-story--tight { padding-top: clamp(8px, 2vw, 24px); }
.x-read .x-sect + .x-sect,
.x-read .x-note + .x-sect { margin-top: clamp(48px, 6vw, 64px); }
.x-read .x-sect > * + * { margin-top: 16px; }
.x-read.x-read--legal p,
.x-read.x-read--legal li { font: 400 17px/1.65 var(--sans); letter-spacing: -0.005em; color: var(--x-body-ink); }
.x-read .x-sect > h2 {
  padding-top: 28px; border-top: 1px solid rgb(0 0 0 / 0.1);
  font: 700 clamp(24px, 2.6vw, 30px)/1.15 var(--sans); letter-spacing: -0.03em; color: #000000; text-wrap: balance;
}
.x-read .x-sect > h2 + * { margin-top: 20px; }
.x-read .x-sect > h3 { margin-top: 28px; font: 600 17px/1.35 var(--sans); letter-spacing: -0.01em; color: #000000; }
.x-read .x-sect > h2 + h3 { margin-top: 20px; }
.x-read .x-sect > h3 + * { margin-top: 8px; }
.x-read ul { margin: 0; padding-left: 1.2em; }
.x-read li + li { margin-top: 8px; }
.x-read li::marker { color: #86868b; }
.x-read strong { font-weight: 600; color: #000000; }
.x-read a { color: #000000; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.x-read a:hover { text-decoration-thickness: 2px; }
.x-read a:focus-visible { outline: 2px solid #000000; outline-offset: 2px; border-radius: 4px; }

/* A quiet aside: the homepage's light grey panel, no colour accent. */
.x-note { padding: 20px 24px; border-radius: 20px; background: #f5f5f7; }
.x-read .x-note p, .x-note p { font: 400 16px/1.6 var(--sans); color: #1d1d1f; }
.x-note__label { display: block; margin-bottom: 6px; font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: #6e6e73; }
.x-read .x-note p.x-note__label { font: 600 13px/1.3 var(--sans); color: #6e6e73; }

/* Tables: hairline rows. Under 640px each row stacks, its header beside each cell. */
.x-table { width: 100%; border-collapse: collapse; font: 400 15px/1.5 var(--sans); }
.x-table th {
  text-align: left; vertical-align: bottom; padding: 10px 12px 10px 0;
  font: 600 13px/1.3 var(--sans); color: #6e6e73; border-bottom: 1px solid rgb(0 0 0 / 0.14);
}
.x-table td { text-align: left; vertical-align: top; padding: 14px 12px 14px 0; color: var(--x-body-ink); border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.x-table td:first-child { font-weight: 600; color: #000000; }
@media (max-width: 640px) {
  .x-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .x-table, .x-table tbody, .x-table tr, .x-table td { display: block; width: 100%; }
  .x-table tr { padding: 14px 0; border-bottom: 1px solid rgb(0 0 0 / 0.08); }
  .x-table td { padding: 2px 0; border: 0; }
  .x-table td + td { margin-top: 8px; }
  .x-table td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font: 600 12px/1.3 var(--sans); color: #6e6e73;
  }
}

/* ---------- Two columns that stack on a phone ---------- */
.x-split {
  width: 100%; max-width: var(--x-wide); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(40px, 6vw, 88px); align-items: start;
  padding: clamp(8px, 2vw, 24px) clamp(20px, 5vw, 40px) clamp(88px, 11vw, 144px);
}
@media (max-width: 860px) { .x-split { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* Small grey label over a value, as the security kit's eyebrow. */
.x-label { display: block; font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: #6e6e73; }
.x-h3 { font: 700 clamp(22px, 2.2vw, 26px)/1.15 var(--sans); letter-spacing: -0.03em; color: #000000; }
.x-stack > * + * { margin-top: 24px; }
.x-link { display: inline-flex; align-items: center; min-height: var(--tap); color: #000000; font: 500 17px/1.3 var(--sans); letter-spacing: -0.01em; text-decoration: none; }
.x-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.x-link:focus-visible { outline: 2px solid #000000; outline-offset: 2px; border-radius: 6px; }
.x-fine { font: 400 15px/1.5 var(--sans); color: #6e6e73; }

/* A quiet panel: grey for asides, white with the kit shadow for a form. */
.x-panel { padding: clamp(24px, 3vw, 32px); border-radius: 28px; background: #f5f5f7; }
.x-panel--card { background: #ffffff; border: 1px solid rgb(0 0 0 / 0.07); box-shadow: var(--x-shadow); padding: clamp(24px, 4vw, 48px); }
@media (max-width: 640px) { .x-panel { border-radius: 24px; } }
.x-panel__h { font: 700 19px/1.25 var(--sans); letter-spacing: -0.02em; color: #000000; }
.x-panel__p { margin-top: 10px; }
.x-panel__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 6px; }
.x-panel__links .x-link { font-weight: 600; font-size: 16px; }

/* ---------- Form fields (the login kit's pill, extended to select and textarea) ---------- */
.x-kf { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.x-kf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 520px) { .x-kf__row { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.x-kf__label { display: block; margin-bottom: 8px; font: 500 14px/1.3 var(--sans); letter-spacing: -0.005em; color: #1d1d1f; }
.x-kf__input {
  box-sizing: border-box; display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 20px;
  border-radius: 999px; border: 1px solid rgb(0 0 0 / 0.07); background: rgb(0 0 0 / 0.025);
  font: 400 16px/1.4 var(--sans); letter-spacing: -0.01em; color: #000000;
  appearance: none; -webkit-appearance: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.x-kf__input::placeholder { color: #6e6e73; opacity: 1; }
.x-kf__input:focus { background: #ffffff; border-color: rgb(0 0 0 / 0.14); }
.x-kf__input:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }
textarea.x-kf__input { border-radius: 20px; resize: vertical; min-height: 140px; line-height: 1.6; }
select.x-kf__input {
  cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center;
}
select.x-kf__input.is-empty { color: #6e6e73; }
.x-kf__msg { margin: 0; font: 400 14px/1.4 var(--sans); color: #8a3a32; }
.x-kf__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 0 32px; border: 0; border-radius: 999px;
  background: #000000; color: #ffffff; cursor: pointer;
  font: 600 17px/1 var(--sans); letter-spacing: -0.01em;
  transition: background-color 200ms ease, opacity 150ms ease;
}
.x-kf__submit:hover { background: #1d1d1f; }
.x-kf__submit:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
.x-kf__submit:disabled { opacity: 0.7; cursor: default; }
@media (min-width: 861px) { .x-kf__submit { width: auto; align-self: flex-start; } }

/* A finished form: the message in place of the fields. */
.x-done { text-align: center; padding: clamp(24px, 4vw, 40px) 0; }
.x-done__mark {
  width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center;
  background: #000000; color: #ffffff; font: 600 20px/1 var(--sans);
}
.x-done h3 { font: 700 clamp(22px, 2.2vw, 26px)/1.15 var(--sans); letter-spacing: -0.03em; color: #000000; }
.x-done p { margin-top: 10px; font: 400 17px/1.5 var(--sans); color: var(--x-body-ink); }

@media (prefers-reduced-motion: reduce) { .x-kf__input, .x-kf__submit { transition: none; } }