/*
  Remedies — the legal site's stylesheet.

  Styled as the landing page (`apps/web`) is, so that following a link from one
  to the other reads as one site (owner, 2026-09-25: «чтобы при переключении
  выглядело когерентно»): the app's amber theme in BOTH modes, following the
  system; a flat page tone; the landing's floating glass bar with the heart and
  the wordmark; Inter and Libertinus Serif. Nothing more — these are documents.

  Every colour below is a token from `buildTheme(mode, 'amber')`, copied by
  value, and therefore able to drift — so it does not depend on anyone
  remembering: `apps/mobile/__tests__/legalSiteTheme.test.ts` reads both token
  blocks and fails if any value stops matching the app.

  The fonts are served from this site (`assets/fonts/`, the same files the
  landing page ships, SIL OFL). Never from Google: a privacy policy that fetches
  a font from Google hands the reader's IP address to Google on the very page
  promising that nothing is collected.
*/

/* LIGHT THEME TOKENS — START (locked by legalSiteTheme.test.ts) */
:root {
  color-scheme: light;

  --backdrop: #E5E3E0;         /* theme.backdrop — the page tone */
  --backdrop-deep: #F2F0EE;    /* theme.backdropDeep — the floor, seen through overscroll */
  --card: #FBFAF9;             /* theme.neutral[900] — a raised surface */

  --text-primary: #0E0E0D;     /* theme.text.primary — headings and emphasis */
  --text-strong: #181716;      /* theme.text.strong — section headings */
  --text-secondary: #2B2A29;   /* theme.text.secondary — body prose */
  --text-muted: #585552;       /* theme.text.muted — meta lines, the footer */

  --accent: #9A5300;           /* theme.accentText — the stop that reads as text on a light page */
  --accent-soft: #D97706;      /* theme.accentSoft — hover */

  --surface-subtle: #F2F0EE;   /* theme.surface.subtle */
  --surface-base: #FBFAF9;     /* theme.surface.base — rows and cards */
  --surface-raised: #FFFFFF;   /* theme.surface.raised — tiles on a card */

  --glass-fill: rgba(251,250,249,0.75);      /* theme.glass.fill — the floating bar */
  --glass-border: rgba(43,42,41,0.14);       /* theme.glass.border — every hairline */
  --glass-hairline: rgba(43,42,41,0.08);     /* theme.glass.hairline — the bar's divider */
}
/* LIGHT THEME TOKENS — END */

/* THEME TOKENS — START (locked by legalSiteTheme.test.ts) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Near-neutral since 2026-09-03 — the app's ramps are generated at chroma
       0.25 (`scripts/generate-accent-neutrals.py`); these are amber's stops. */
    --backdrop: #0E0E0D;
    --backdrop-deep: #060606;
    --card: #181716;

    --text-primary: #FBFAF9;
    --text-strong: #E5E3E0;
    --text-secondary: #CDCAC5;
    --text-muted: #9D9A94;

    --accent: #F4AE51;         /* amber[300], the 4.5:1 stop — never the fill */
    --accent-soft: #F9D9A0;

    --surface-subtle: #181716;
    --surface-base: #1F1E1D;
    --surface-raised: #2B2A29;

    --glass-fill: rgba(205,202,197,0.15);
    --glass-border: rgba(205,202,197,0.18);
    --glass-hairline: rgba(205,202,197,0.08);
  }
}
/* THEME TOKENS — END */

:root {
  /* Radii from `constants/radii.ts`. Do not invent values between these. */
  --radius-card: 16px;
  --radius-chip: 12px;

  --serif: "Libertinus Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The landing page's one curve: mass and spring, never a linear ease. */
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ----------------------------------------------------------------- fonts -- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ base -- */

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

html {
  /* The floor, seen through iOS rubber-band overscroll — the landing's too. */
  background: var(--backdrop-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Room for the bar's float, as PADDING: a margin on the bar collapsed
     through `body` and left a 24px strip of the floor above the page. */
  padding-top: 24px;
  /* Flat, as on the landing page: one page tone, no ambient wash. */
  background: var(--backdrop);
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------- nav -- */

/*
  The landing's bar: a glass pill floating 24px under the top edge, the heart
  and the wordmark, a hairline, then the links. Sticky rather than fixed, so it
  needs no room reserved above the content. Translucent on purpose: content
  passing under a pinned bar dissolves into it rather than being sliced.
*/
.topbar {
  position: sticky;
  top: 24px;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

.bar {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  max-width: 100%;
  border-radius: 9999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  backdrop-filter: saturate(160%) blur(24px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 12px 32px -16px rgb(0 0 0 / 0.55);
}

@media (prefers-color-scheme: light) {
  .bar {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.8),
      inset 0 -1px 0 rgb(0 0 0 / 0.04),
      0 12px 32px -16px rgb(0 0 0 / 0.25);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  text-decoration: none;
}

.brand img {
  display: block;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-primary);
}

.rule {
  width: 1px;
  margin: 8px 0;
  background: var(--glass-hairline);
}

.bar nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
}

.bar nav a {
  padding: 8px 12px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    background-color 200ms var(--ease-fluid),
    color 200ms var(--ease-fluid);
}

.bar nav a:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

/* The current page wears the pale pill the landing gives the section in view. */
.bar nav a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--glass-fill);
}

/* A phone: the heart alone stands for the name, so the three links fit. */
@media (max-width: 400px) {
  .brand {
    padding: 8px 12px;
  }

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

  .bar nav a {
    padding: 8px 10px;
  }
}

/* ------------------------------------------------------------------ page -- */

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 64px 16px 80px;
}

.page > :first-child {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  text-wrap: balance;
}

h1 {
  /* The landing's section headings: 36px, 48px from a tablet up. */
  font-size: 36px;
  line-height: 40px;
  margin: 0 0 24px;
}

@media (min-width: 48rem) {
  h1 {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 32px;
  }
}

h2 {
  font-size: 24px;
  line-height: 32px;
  margin: 48px 0 12px;
}

h3 {
  font-size: 20px;
  line-height: 28px;
  margin: 32px 0 8px;
}

p,
ul,
ol {
  margin: 0 0 16px;
}

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

a {
  color: var(--accent);
  /* Underlined in prose on purpose: colour alone is not an accessible way to
     mark a link (WCAG 1.4.1), and this is a document where following the right
     reference matters. The bar opts out because position identifies it. */
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Derived from the token rather than written out, so a different accent
     cannot leave the underline orange. A browser that cannot do `color-mix`
     drops the line and underlines in `currentColor` — the same hue, heavier. */
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

a:hover {
  color: var(--accent-soft);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

ul,
ol {
  padding-left: 24px;
}

li {
  margin-bottom: 6px;
}

li::marker {
  color: var(--text-muted);
}

hr {
  border: 0;
  border-top: 1px solid var(--glass-border);
  margin: 32px 0;
}

blockquote {
  /* The draft banner `publish-legal.py` injects renders as a blockquote, and
     its entire job is to be impossible to miss — hence the accent. A full
     border, not one side: the landing's cards are bordered all round. */
  margin: 24px 0;
  padding: 16px;
  background: var(--surface-base);
  border: 1px solid var(--accent);
  border-radius: var(--radius-chip);
  color: var(--text-secondary);
}

blockquote > :last-child {
  margin-bottom: 0;
}

blockquote strong {
  color: var(--accent);
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-primary);
}

/* ----------------------------------------------------------------- table -- */

/* Wrapped in its own scroller so a wide table never makes the page itself
   scroll sideways on a phone. */
table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: top;
}

th {
  background: var(--surface-base);
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

tbody tr:nth-child(even) {
  background: var(--surface-subtle);
}

/* ------------------------------------------------------------- home page -- */

/*
  The landing page is the Support URL Apple requires, so its list of documents
  is the one thing on it that has to be obvious. Cards, from the markdown's
  plain list — the published files stay free of presentation.
*/
.home .page ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}

.home .page li {
  margin: 0;
}

.home .page li a {
  display: block;
  padding: 16px;
  background: var(--surface-base);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 200ms var(--ease-fluid),
    border-color 200ms var(--ease-fluid);
}

.home .page li a::after {
  content: " →";
  color: var(--accent);
}

.home .page li a:hover {
  background: var(--surface-raised);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------- footer -- */

/* The landing's footer: a hairline across the page, then small muted text. */
.foot {
  border-top: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}

.foot-inner {
  max-width: 44rem;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

.foot p {
  margin: 0 0 8px;
}

.foot a {
  color: var(--text-secondary);
  text-decoration: none;
}

.foot a:hover {
  color: var(--text-primary);
}