/* ============================================================================
   DeepWork — the documents
   ----------------------------------------------------------------------------
   One stylesheet for /privacy/, /terms/ and /contact/.

   These three pages are static HTML rather than Angular routes, because a legal
   notice has to render with JavaScript disabled and a GitHub Pages deployment
   answers an unknown path with a 404. The cost of that decision is this file:
   they cannot use the single critical-inlined sheet the main page ships, because
   its filename is content-hashed by the build.

   Two things keep the cost small:

   1. The tokens below are copied from `src/styles.css` under the same names and
      with the same values, so a section here and a section there are the same
      colours and the same radii. If the palette in the main sheet changes, this
      is the second file to change.
   2. No webfont is loaded. Inter ships inside the Angular bundle, so the woff2
      URL only exists after a build and only under a hashed name. These documents
      therefore use the system UI stack and make no network request at all —
      which is also what lets the privacy policy say the documents are counted by
      nothing.
   ========================================================================= */

/* ===== Tokens ============================================================= */
:root {
  color-scheme: dark;

  --bg: #080613;
  --bg-2: #0f0b1f;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.075);
  --surface-solid: #100c22;

  --accent: #8b5cf6;
  --accent-2: #06b6d4;
  --accent-soft: rgba(139, 92, 246, 0.16);
  --accent-line: rgba(139, 92, 246, 0.36);
  --gradient: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);

  --text: #f2f0ff;
  --text-2: #b6b2d0;
  --text-3: #8b87ab;

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.3);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.48);

  --radius-sm: 12px;
  --radius: 20px;
  --radius-pill: 999px;

  --shell: 1180px;
  --gutter: clamp(1.25rem, 4.5vw, 2.75rem);
  /* The reading measure. A legal document at 90 characters a line is a document
     people stop reading, so the column is capped rather than filled. */
  --measure: 42rem;

  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-h1: clamp(2.1rem, 1.45rem + 2.6vw, 3.1rem);
  --fs-h2: clamp(1.4rem, 1.2rem + 0.75vw, 1.75rem);
  --fs-h3: clamp(1.08rem, 1rem + 0.3vw, 1.2rem);
  --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html[data-theme='light'] {
  color-scheme: light;

  --bg: #f4f6fb;
  --bg-2: #eef1f8;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;

  --accent: #7c3aed;
  --accent-2: #0891b2;
  --accent-soft: rgba(124, 58, 237, 0.12);
  --accent-line: rgba(124, 58, 237, 0.3);
  --gradient: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);

  --text: #0f172a;
  --text-2: #475569;
  --text-3: #5b6478;

  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;

  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.18);
  --shadow-sm: 0 4px 18px rgba(15, 23, 42, 0.06);
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
}

/* ===== Reset ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* The application's mesh, held still. The main page drifts it because the page
   is looked at; a document is read, and movement behind a paragraph is a
   distraction that costs a repaint. */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 18% 8%, rgba(139, 92, 246, 0.26) 0%, transparent 62%),
    radial-gradient(ellipse 45% 40% at 84% 18%, rgba(6, 182, 212, 0.18) 0%, transparent 60%);
}
html[data-theme='light'] body::before {
  background:
    radial-gradient(ellipse 55% 45% at 18% 8%, rgba(124, 58, 237, 0.14) 0%, transparent 62%),
    radial-gradient(ellipse 45% 40% at 84% 18%, rgba(8, 145, 178, 0.12) 0%, transparent 60%);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

ul,
ol {
  padding: 0;
}

::selection {
  background: rgba(139, 92, 246, 0.35);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.9);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 100;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Layout ============================================================ */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===== Masthead ========================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: 64px;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--gradient);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.38);
}

.docnav {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.docnav a {
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}
.docnav a:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}
.docnav a[aria-current='page'] {
  color: var(--text);
  background: var(--accent-soft);
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
}
.back:hover {
  color: var(--text);
  text-decoration: none;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-strong);
}
.icon-btn svg {
  display: block;
}

/* One glyph or the other, decided by the theme the boot script already applied,
   so the button never renders both icons or the wrong one for a frame. */
html[data-theme='dark'] .icon-btn .icon-moon,
html[data-theme='light'] .icon-btn .icon-sun {
  display: none;
}

/* The button carries `hidden` in the markup and `legal.js` removes it: with
   scripting off there is no theme to toggle, and a control that does nothing is
   worse than no control. */
.icon-btn[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .back {
    display: none;
  }
}

@media (max-width: 620px) {
  .brand__text {
    display: none;
  }
  .masthead__inner {
    gap: 0.35rem;
  }
  .docnav a {
    padding-inline: 0.55rem;
  }
}

@media (max-width: 400px) {
  .docnav a {
    font-size: var(--fs-xs);
    padding-inline: 0.45rem;
  }
}

/* ===== The document ====================================================== */
.doc {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
  padding-inline: var(--gutter);
  flex: 1;
}

.doc__head {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}

/* The contact page is a two-column layout with a form in it, not a paragraph.
   Inside the reading measure each name field ends up about 110px wide, so this
   one page is allowed a wider column. The prose pages keep the measure. */
.doc--wide {
  max-width: calc(56rem + 2 * var(--gutter));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient);
}

h1,
h2,
h3 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.14;
  text-wrap: balance;
}

.doc__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 1rem;
}

.doc__lead {
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.15rem);
  color: var(--text-2);
  line-height: 1.6;
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.doc__meta span + span::before {
  content: '·';
  padding-right: 0.75rem;
  color: var(--text-3);
}

/* On a phone the row wraps, and a separator that lands at the start of a line
   reads as a bullet that lost its list. The items become lines instead. */
@media (max-width: 620px) {
  .doc__meta {
    display: grid;
    gap: 0.15rem;
  }
  .doc__meta span + span::before {
    content: none;
  }
}

/* ===== Contents ========================================================== */
.toc {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.toc__title {
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.toc ol {
  display: grid;
  gap: 0.3rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  font-size: var(--fs-sm);
}

@media (min-width: 660px) {
  .toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.4rem;
  min-width: 0;
}
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.9;
  color: var(--text-3);
}
.toc a {
  color: var(--text-2);
  padding-block: 0.1rem;
}
.toc a:hover {
  color: var(--text);
}

/* ===== Prose ============================================================= */
/* Both levels: between a callout and a section, and between the paragraphs
   inside a section. The second selector is the one that matters — a section is
   a single child of `.prose`, so without it every paragraph inside a section
   sits flush against the one before it. */
.prose > * + *,
.prose section > * + * {
  margin-top: 1rem;
}

.prose section {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.prose section:first-child {
  margin-top: 0;
}

.prose h2 {
  margin-bottom: 0.85rem;
  padding-top: 0.25rem;
  font-size: var(--fs-h2);
  scroll-margin-top: 6rem;
}
.prose h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--fs-h3);
  scroll-margin-top: 6rem;
}

.prose p,
.prose li {
  color: var(--text-2);
}

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

.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.prose ul,
.prose ol {
  padding-left: 1.15rem;
  display: grid;
  gap: 0.45rem;
}
.prose ul {
  list-style: none;
  padding-left: 0;
}

/* The marker is positioned, not placed in a grid column.
   A grid with `::before` in a fixed first column only works when each item's
   content is one element. Where an item opens with `<strong>`, the strong is a
   second grid item in the wide column and the text after it becomes an
   anonymous item that falls into the 14px marker column — one character per
   line, and a list item thousands of pixels tall. Absolute positioning does not
   care how the item is built. */
.prose ul > li {
  position: relative;
  padding-left: 1.45rem;
}
.prose ul > li::before {
  content: '';
  position: absolute;
  top: 0.68rem;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-line);
}
.prose ol > li::marker {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-3);
}
.prose li > ul,
.prose li > ol {
  margin-top: 0.45rem;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--surface-strong);
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* The short version. A document that opens with an answer is a document people
   finish, so the three sentences that matter come before the detail. */
.callout {
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
}
.callout p {
  color: var(--text);
}
.callout p + p {
  margin-top: 0.7rem;
}
.callout__title {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.note {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 2px solid var(--warning);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.note p {
  color: var(--text-2);
}

/* ===== Tables ============================================================ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

th,
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom-color: var(--border-strong);
}
td {
  color: var(--text-2);
}
tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}
td strong {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 560px) {
  table,
  tbody,
  tr,
  td,
  th {
    display: block;
  }
  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  tr {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
  }
  tbody tr:last-child {
    border-bottom: 0;
  }
  td,
  th {
    border: 0;
    padding: 0.35rem 1rem;
  }
  td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  tr > th[scope='row'] {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
  }
}

/* ===== Document foot ===================================================== */
.doc__foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border);
}

.doc__foot-title {
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.doc__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.chip:hover {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  text-decoration: none;
}
.chip--accent {
  border-color: var(--accent-line);
  color: var(--text);
}

/* ===== Contact page ====================================================== */
.contact {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* These two headings sit outside `.prose`, so they need the size rule the prose
   h2s get. Everything else about them comes from the shared heading rule. */
.contact h2 {
  margin-bottom: 1rem;
  font-size: var(--fs-h2);
}

.contact .note {
  margin-top: 1.25rem;
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 2.5rem;
  }
}

.routes {
  display: grid;
  gap: 0.6rem;
}

.route {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
}
.route:hover {
  text-decoration: none;
  border-color: var(--accent-line);
  background: var(--surface-strong);
}
.route__label {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
}
.route__detail {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.route__address {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  overflow-wrap: anywhere;
}

.address {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.address__label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.address__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
}
.address__value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  overflow-wrap: anywhere;
}

.copy-btn {
  min-height: 36px;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.copy-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.copy-btn[hidden] {
  display: none;
}

.form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface-solid));
  color: var(--text);
  /* 16px below 640px is the size under which iOS Safari stops zooming the page
     in when a field takes focus. */
  font-size: max(1rem, var(--fs-body));
}
.field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.9);
  outline-offset: 1px;
  border-color: var(--accent-line);
}

.field--split {
  display: grid;
  gap: 1rem;
}
@media (min-width: 560px) {
  .field--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--gradient);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 650;
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
  justify-self: start;
}
.form__submit:hover {
  box-shadow: 0 14px 38px rgba(139, 92, 246, 0.42);
  transform: translateY(-1px);
}
.form__submit:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.form__status {
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form__status:empty {
  display: none;
}
.form__status--ok {
  color: var(--success);
}
.form__status--error {
  color: var(--danger);
}

.form__note {
  font-size: var(--fs-xs);
  color: var(--text-3);
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

/* The form ends with two notes: what happens to the message, then what is done
   with it. Both are separated from the controls, but only once — a second
   hairline between two short paragraphs reads as a mistake. */
.form__note + .form__note {
  padding-top: 0.15rem;
  border-top: 0;
}

/* ===== Footer ============================================================ */
.footer {
  padding-block: clamp(1.75rem, 3vw, 2.5rem)
    calc(clamp(1.75rem, 3vw, 2.5rem) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 80%, #000);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
html[data-theme='light'] .footer {
  background: rgba(15, 23, 42, 0.03);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
}
.footer__links a {
  color: var(--text-2);
}
.footer__links a:hover {
  color: var(--text);
}

/* ===== Print =============================================================
   Legal documents get printed and filed. On paper the chrome is noise, the
   accent colours are a waste of toner, and a link that cannot be followed is
   useless — so the URL is printed after it. */
@page {
  /* Without this the text runs to the edge of the sheet: Chrome's own margins
     are the only thing between a paragraph and the printer's unprintable edge. */
  margin: 16mm 14mm;
}

@media print {
  html {
    scroll-behavior: auto;
  }
  body {
    background: #fff;
    color: #111;
  }
  body::before,
  .masthead,
  .footer,
  .doc__foot,
  .skip-link,
  .copy-btn,
  .form__submit {
    display: none;
  }
  .doc {
    max-width: none;
    padding: 0;
  }
  h1,
  h2,
  h3,
  strong,
  .prose p,
  .prose li,
  td,
  th {
    color: #111;
  }
  .doc__title {
    font-size: 2rem;
  }
  .callout,
  .note,
  .toc,
  .form {
    border: 1px solid #bbb;
    background: none;
  }
  .prose a {
    color: #111;
    text-decoration: underline;
  }
  .prose a[href^='http']::after,
  .prose a[href^='mailto']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  section {
    break-inside: avoid;
  }
  /* A heading that lands at the foot of a page reads as a heading for nothing. */
  h2,
  h3 {
    break-after: avoid;
  }
}

/* ===== Reduced motion ===================================================
   Nothing here animates, and this makes that true even after a later change:
   the only transitions are colour and border. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===== Forced colours ==================================================== */
@media (forced-colors: active) {
  .toc,
  .callout,
  .note,
  .form,
  .route,
  .address,
  .table-wrap,
  .chip {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .form__submit {
    background: Highlight;
    color: HighlightText;
  }
}