/*
 * remitdesk.net: the remitdesk app's design system (docs/design-system.md,
 * apps/web/src/app/globals.css) scaled up for a public page read on a
 * phone. Inter, ink on a cool grey paper, the navy top bar with the mark,
 * a calm amber warning, one white sheet. One stylesheet; no JavaScript of ours.
 *
 * Every colour is a token on :root. test/contrast.test.ts checks each rule
 * as written, at WCAG AAA (7:1 for text):
 *   - a rule that sets `color` and `background-color` is checked as a pair;
 *   - a rule that sets only `color` says which surfaces its text sits on,
 *     in a comment inside the rule:      on: --c-surface, --c-paper
 *   - a rule that sets only `background-color` says which text colours sit
 *     on it, the same way:               text: --c-ink
 *     or that none does (a radio's ring and dot):   text: none
 * Text inside the warning, the error summary and the top bar is checked on
 * their surfaces whatever its note says. The test fails on a colour rule
 * without its note.
 *
 * Light only, like the app.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Surfaces */
  --c-paper: #f2f4f7; /* the page */
  --c-surface: #fdfdfe; /* the sheet, fields */
  --c-sunken: #f7f8fa; /* code chips, a hovered radio row */
  --c-shadow: #e3e7ec; /* the sheet's and warning's resting shadow, on the paper */

  /* Type */
  --c-ink: #172230;
  --c-ink-muted: #2b3442; /* secondary text: a step darker than the app's #3f4a5a */

  /* Rules and edges */
  --c-line: #dde2e9; /* hairlines between sections: decoration, the headings divide them */
  --c-edge: #7d8693; /* the sheet's edge: 3:1 on the paper */
  --c-control: #4f5a6a; /* a field's or radio's 2px border */

  /* The one accent: links, the button, focus */
  --c-accent: #09519a;
  --c-accent-hover: #073f78;
  --c-on-accent: #ffffff;

  /* The warning: the app's warn Callout, its text darker for AAA */
  --c-warn: #5a3400;
  --c-warn-soft: #fff3dc;
  --c-warn-line: #b07a1f; /* 3:1 on the paper, like the sheet's edge */

  /* Errors: the app's danger tone, its line darker so the edge is 3:1 */
  --c-danger: #8f1a1a;
  --c-danger-soft: #fdeceb;
  --c-danger-line: #c0504d;

  /* The top bar */
  --c-nav: #0f2338;
  --c-nav-raised: #18304a; /* the mark's tile */
  --c-nav-ink: #ffffff;
  --c-nav-active: #3fc1ef; /* the mark's rule and R */

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Exact addresses only: the system's monospace, so remit-desk.net reads letter by letter. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Every rendered line at most 80 characters (1.4.8), with a margin: about 79 in Inter. */
  --measure: 44rem;
  --gutter: 1rem;
  /* Room inside the sheet and the callouts. */
  --pad: 1.25rem;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-md: 6px;
}

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

html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  font-size: 1.0625rem;
  /* 1.4.8: line spacing 1.5, paragraph spacing 1.5 times that (below). */
  line-height: 1.5;
  /* A last resort only: long addresses carry .brk break points. */
  overflow-wrap: break-word;
}

@media (min-width: 48em) {
  :root {
    --gutter: 2rem;
    --pad: 2.25rem;
  }

  body {
    font-size: 1.125rem;
  }
}

.wrap {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

p,
ul {
  margin-block: 0 2.25em;
}

h1,
h2 {
  margin-block: 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/*
 * The h1 is one short display line (two on a phone), not a block of text, so
 * it keeps a tighter 1.3; h2s, the callouts' included, get 1.5 like the body.
 */
h1 {
  font-size: 2rem;
  line-height: 1.3;
}

h2 {
  font-size: 1.375rem;
  line-height: 1.5;
}

@media (min-width: 48em) {
  h1 {
    font-size: 2.75rem;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: 1.625rem;
  }
}

.nowrap {
  white-space: nowrap;
}

/* Read by screen readers, not shown: completes the wordmark's name, "remitdesk home". */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A line-break opportunity with no text in it (see BREAK in src/layout.ts). */
.brk {
  display: inline-block;
  width: 0;
}

/*
 * An address in running text stays whole where it fits; below 30em its .brk
 * break points (after the @ and the domain's inner dots) take over.
 */
@media (min-width: 30em) {
  .addr {
    white-space: nowrap;
  }

  .addr .brk {
    display: none;
  }
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background-color: var(--c-sunken);
  /* text: --c-ink */
  /* A quiet hairline: the chip is a reading aid, not a boundary anyone relies on. */
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0 0.3em;
  /* A domain such as remit-desk.net must never split at its hyphen. The longest
     (remitdesk.net.co) fits the warning at 320px, under text spacing too. */
  white-space: nowrap;
}

ul {
  padding-inline-start: 1.25em;
}

/* The bullet is decoration: alt text "" keeps it out of the accessibility tree.
   Browsers without alt-text support keep the first declaration. */
main li::marker {
  content: "•  ";
  content: "•  " / "";
}

/* The warning's points are paragraph-length: paragraph spacing between them. */
.alert li + li {
  margin-block-start: 2.25em;
}

/* Links in running text: always underlined, never colour alone. */
a {
  color: var(--c-accent);
  /* on: --c-paper, --c-surface */
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--c-accent-hover);
  /* on: --c-paper, --c-surface */
  text-decoration-thickness: 0.125em;
}

/* Focus (2.4.13): one ring, 3px of the accent, 2px clear of the thing. */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

/*
 * A link inside a sentence: the ring hugs it (1px clear), so its outer edge,
 * 4px out, stays inside the word space either side and never covers the
 * neighbouring words.
 */
p a:focus-visible,
li a:focus-visible {
  outline-offset: 1px;
}

/*
 * Skip link: the first tab stop. Off-screen until focused; then it joins the
 * flow on the page's column, above the top bar, so it never covers the mark.
 */
.skip {
  position: absolute;
  top: 0;
  transform: translateY(-150%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.75rem;
  background-color: var(--c-surface);
  /* text: --c-accent */
  font-weight: 600;
}

.skip:focus-visible {
  position: static;
  transform: none;
  margin-block: 0.5rem;
}

/* The navy top bar: the mark and wordmark as one link home, and Contact. */
.masthead {
  background-color: var(--c-nav);
  /* text: --c-nav-ink */
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  min-height: 4rem;
}

/* On the navy, the accent ring would be 2:1: the bar's own white instead. */
.masthead :focus-visible {
  outline-color: var(--c-nav-ink);
}

/* The wordmark is the bar's logo, not a link in running text: not underlined. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--c-nav-ink);
  /* on: --c-nav */
  text-decoration-line: none;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.5;
}

.brand:hover .brand-name {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.mark {
  flex: none;
  width: 2rem;
  height: 2rem;
  stroke: var(--c-nav-active);
}

.mark-tile {
  fill: var(--c-nav-raised);
}

/* The bar's one link: white on navy; the current page's underline is heavier. */
.bar-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.5rem;
  margin-inline-end: -0.5rem;
  color: var(--c-nav-ink);
  /* on: --c-nav */
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.bar-nav a:hover {
  color: var(--c-nav-ink);
  /* on: --c-nav */
  text-decoration-thickness: 2px;
}

.bar-nav a[aria-current="page"] {
  text-decoration-thickness: 3px;
}

/* The page head: purpose label, h1, lead. */
main {
  padding-block-start: 1.75rem;
}

@media (min-width: 48em) {
  main {
    padding-block-start: 3rem;
  }
}

.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--c-ink-muted);
  /* on: --c-paper */
  font-weight: 600;
}

.eyebrow-host {
  color: var(--c-ink);
  /* on: --c-paper */
  font-weight: 700;
}

.lead {
  font-size: 1.1875em;
}

/*
 * The warning, the error summary and the sheet are one family: the same
 * radius, an even 1px edge at 3:1 on the paper, the same resting shadow.
 */
.alert,
.error-summary,
.sheet {
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--c-shadow);
}

/* The warning: the app's warn Callout, calm amber, its icon in the margin. */
.alert {
  position: relative;
  margin-block: 0 1.5rem;
  padding: var(--pad);
  padding-inline-start: calc(var(--pad) + 2.25rem);
  background-color: var(--c-warn-soft);
  color: var(--c-ink);
  border: 1px solid var(--c-warn-line);
}

.callout-icon {
  position: absolute;
  inset-inline-start: var(--pad);
  top: calc(var(--pad) + 0.3em);
  width: 1.625rem;
  height: 1.625rem;
}

.alert h2,
.alert .callout-icon {
  color: var(--c-warn);
}

.alert h2 {
  font-size: 1.3125rem;
}

.alert code {
  background-color: var(--c-surface);
  /* text: --c-ink */
  border-color: var(--c-warn-line);
}

@media (min-width: 48em) {
  /* At this width "balance" left the warning's heading half empty. */
  .alert h2 {
    font-size: 1.5rem;
    text-wrap: pretty;
  }
}

/*
 * The sheet: everything after the warning, one white card. Its sections are
 * divided by hairlines that run to its edges, in a gap well over twice the
 * paragraph spacing, so sections read as further apart than paragraphs.
 */
.sheet {
  padding: var(--pad);
  background-color: var(--c-surface);
  /* text: --c-ink, --c-ink-muted, --c-accent, --c-danger */
  border: 1px solid var(--c-edge);
}

.sheet > * + section {
  margin: 2.5rem calc(-1 * var(--pad)) 0;
  padding: 2.5rem var(--pad) 0;
  border-block-start: 1px solid var(--c-line);
}

/* Paragraph spacing is between paragraphs; a block's edge gets its own. */
.sheet > :last-child,
section > :last-child {
  margin-block-end: 0;
}

/* Footer: the maker, the site's links, then the company details on their own. */
.site-footer {
  margin-block-start: 3rem;
  padding-block: 2rem 3rem;
  border-block-start: 1px solid var(--c-line);
  color: var(--c-ink-muted);
  /* on: --c-paper */
}

.site-footer .wrap > * {
  font-size: 1rem;
}

/*
 * The maker's wordmark, "Doctrine.", as on Doctrine's own site: bold, tight
 * tracking, the full stop part of the mark. Type, not an image or a link.
 */
.wordmark {
  color: var(--c-ink);
  /* on: --c-paper */
  font-weight: 700;
  letter-spacing: -0.025em;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  /* Pulls the first link's text, inside its padding, back onto the column. */
  margin: 0 0 2.25em -0.25rem;
  padding: 0;
  list-style: none;
}

/* Footer navigation links are controls: at least 44 by 44 CSS px. */
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.25rem;
}

.site-footer nav a[aria-current="page"] {
  color: var(--c-ink);
  /* on: --c-paper */
  font-weight: 600;
}

/*
 * The trading disclosures: their own block, at the body's size and in full
 * ink. Two lines, each under 80 characters; at body size each may wrap.
 */
.site-footer .legal {
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--c-line);
  color: var(--c-ink);
  /* on: --c-paper */
  font-size: 1.0625rem;
}

@media (min-width: 48em) {
  .site-footer .legal {
    font-size: 1.125rem;
  }
}

/* A block of short lines (the footer's about lines, the disclosures): line spacing within, paragraph spacing around. */
.lines > span {
  display: block;
}

/*
 * The contact form. A field's label, hint and error are one unit, so they
 * sit closer than paragraphs do; fields themselves are a paragraph's
 * spacing apart.
 */
.field {
  margin: 0 0 2.25em;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Direct children only: a radio's own label (.radio) is not a field label. */
.field > label,
.field > legend,
.field > .label {
  display: block;
  margin: 0 0 0.35em;
  padding: 0;
  font-size: 1.0625em;
  font-weight: 600;
}

.hint,
.error-message {
  margin: 0 0 0.75em;
}

.hint {
  color: var(--c-ink-muted);
  /* on: --c-surface */
}

.error-message {
  color: var(--c-danger);
  /* on: --c-surface */
}

/* A field's error: "Error:" in words, in a danger chip, then the message. */
.error-chip {
  display: inline-block;
  margin-inline-end: 0.4em;
  padding-inline: 0.5em;
  font-weight: 600;
  color: var(--c-danger);
  background-color: var(--c-danger-soft);
  border: 1px solid var(--c-danger-line);
  border-radius: 999px;
}

/* A field with an error: a danger bar down its left edge, and danger borders. */
.has-error {
  border-inline-start: 4px solid var(--c-danger);
  padding-inline-start: 1rem;
}

.input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0.625rem 0.875rem;
  font: inherit;
  line-height: 1.5;
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 2px solid var(--c-control);
  border-radius: var(--radius-md);
  transition: border-color 120ms ease-out;
}

.input:hover {
  border-color: var(--c-ink);
}

.has-error .input {
  border-color: var(--c-danger);
}

.input:focus-visible {
  border-color: var(--c-accent);
}

textarea.input {
  resize: vertical;
}

.radios {
  display: grid;
  gap: 0.25rem;
}

/* The whole row is the target: at least 44px high, the label included. */
.radio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.radio:hover {
  background-color: var(--c-sunken);
  /* text: --c-ink */
}

/* Radios: 26px, a 2px ring as strong as a field's border, an accent dot when chosen. */
.radio input {
  flex: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 1.625rem;
  height: 1.625rem;
  margin: 0;
  border: 2px solid var(--c-control);
  border-radius: 50%;
  background-color: var(--c-surface);
  /* text: none */
  cursor: pointer;
}

.radio input::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--c-accent);
  /* text: none */
  transform: scale(0);
  transition: transform 120ms ease-out;
}

.radio:hover input {
  border-color: var(--c-ink);
}

.radio input:checked {
  border-color: var(--c-accent);
}

.radio input:checked::before {
  transform: scale(1);
}

/* Room for the compact Turnstile widget (150 by 140px) before it loads, so nothing jumps. */
.cf-turnstile {
  min-height: 140px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 44px;
  margin: 0;
  padding: 0.625rem 1.5rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-on-accent);
  background-color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.button:hover {
  color: var(--c-on-accent);
  background-color: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}

/* On a phone the button is the form's full width: easy to reach, never missed. */
@media (max-width: 29.99em) {
  .button {
    width: 100%;
  }
}

/*
 * The error summary, first in <main> when the Worker shows the form again:
 * the app's danger Callout, its icon in the margin like the warning's.
 */
.error-summary {
  position: relative;
  margin-block-end: 1.5rem;
  padding: var(--pad);
  padding-inline-start: calc(var(--pad) + 2.25rem);
  background-color: var(--c-danger-soft);
  color: var(--c-ink);
  border: 1px solid var(--c-danger-line);
}

.error-summary h2,
.error-summary .callout-icon,
.error-summary a {
  color: var(--c-danger);
}

/*
 * Its links are short, so they sit close, a line apart; each is still a
 * 44px-high target (2.5.5).
 */
.error-summary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* It takes focus on load (autofocus): the ring, clear of its edge. */
.error-summary:focus-visible {
  outline-offset: 3px;
}

/* On a phone a callout's icon leads its heading only; the points take the full width. */
@media (max-width: 29.99em) {
  .alert,
  .error-summary {
    padding-inline-start: var(--pad);
  }

  .alert h2,
  .error-summary h2 {
    padding-inline-start: 2.25rem;
  }

  .alert ul,
  .error-summary ul {
    padding-inline-start: 1em;
  }
}

/*
 * Forced colours keep every edge (the borders become the system colour) and
 * the icons (currentColor). The radios go back to the system's own, which
 * the system knows how to show checked.
 */
@media (forced-colors: active) {
  .radio input {
    appearance: auto;
  }

  .radio input::before {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .input,
  .radio input::before {
    transition: none;
  }
}

/* More contrast: secondary text in full ink, and every edge and hairline as strong as text. */
@media (prefers-contrast: more) {
  :root {
    --c-ink-muted: var(--c-ink);
    --c-line: var(--c-ink);
    --c-edge: var(--c-ink);
    --c-control: var(--c-ink);
    --c-warn-line: var(--c-warn);
    --c-danger-line: var(--c-danger);
  }
}

@media print {
  :root {
    --c-paper: #ffffff;
    --c-surface: #ffffff;
    --c-sunken: #ffffff;
    --c-shadow: #ffffff;
    --c-ink: #000000;
    --c-ink-muted: #000000;
    --c-line: #000000;
    --c-edge: #000000;
    --c-control: #000000;
    --c-accent: #000000;
    --c-accent-hover: #000000;
    --c-on-accent: #ffffff;
    --c-warn: #000000;
    --c-warn-soft: #ffffff;
    --c-warn-line: #000000;
    --c-danger: #000000;
    --c-danger-soft: #ffffff;
    --c-danger-line: #000000;
    --c-nav: #ffffff;
    --c-nav-raised: #ffffff;
    --c-nav-ink: #000000;
    --c-nav-active: #000000;
  }

  body {
    font-size: 11pt;
    /* See code, below. */
    line-height: 1.75;
  }

  .skip-bar,
  .masthead,
  .site-footer nav {
    display: none;
  }

  .site-footer .wrap > * {
    font-size: inherit;
  }

  main {
    padding-block-start: 0;
  }

  .alert,
  .sheet {
    box-shadow: none;
  }

  .sheet {
    padding: 0;
    border: 0;
  }

  .sheet > * + section {
    margin-inline: 0;
    padding-inline: 0;
  }

  .alert {
    border: 3px solid var(--c-ink);
  }

  /*
   * A code box's border wraps the font's whole content area, which is taller
   * than 1em, so on 1.5 lines it met the line above. In print the box has no
   * vertical padding and the lines are 1.75 apart, which leaves a clear gap.
   */
  code {
    padding-block: 0;
  }

  /* Keep a section, and the warning, on one page; never strand a heading. */
  section,
  .alert {
    break-inside: avoid;
  }

  h2 {
    break-after: avoid;
  }

  /* On paper the disclosures run on as one short paragraph. */
  .legal > span {
    display: inline;
  }
}