/*
 * Meridian web companion — the whole stylesheet.
 *
 * Every value here comes from the "Handoff spec" cards at the bottom of the
 * 2026-09-12 Claude Design bundle (`Meridian Companion.dc.html`). The design is
 * drawn mobile-first at 390 and desktop at 1440 with a single breakpoint at
 * 768px, so that is exactly how this file is ordered: base rules are the mobile
 * drawing, and one `min-width: 768px` block at the bottom carries the desktop
 * one. Do not add a second breakpoint without a design decision behind it.
 *
 * Colour: every value is a custom property from `tokens.css`, which carries the
 * dark default and the light theme (WEB-001, 2026-09-23 web handoff). This file
 * holds no colour literal of its own — add a token there instead.
 */

/*
 * Faces — self-hosted, never a third-party CDN (MER-392 FU-3). Loading them from
 * Google Fonts sent every visitor's IP address to Google, which the privacy
 * page does not disclose and its "shared only with Cloudflare" contradicts.
 *
 * These are byte-for-byte copies of the upstream static builds `core-ui`
 * already ships (MER-292; provenance in LICENSES.md, note 5), so they are the
 * unmodified Font Software, not a Modified Version: do not subset, instance or
 * re-encode them here. `src/fonts.test.ts` fails if they drift from the
 * Android copies. The licence texts travel beside them (OFL 1.1 §2).
 *
 * Only 500 and 700 exist for Manrope, so CSS weight 600 resolves to 700 and
 * 400 to 500 by the standard font-matching rules. Filenames carry the upstream
 * version, so a replacement is a new URL and `_headers` can cache them forever.
 */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/manrope-4.504-500.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/manrope-4.504-700.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dmsans-4.004-400.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/dmsans-4.004-500.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/dmsans-4.004-700.ttf") format("truetype"); }

:root {
  /* Colour lives in tokens.css (WEB-001), one block per theme. */

  /* Type */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Radius — handoff "Radius · geometry" card */
  --r-pill: 999px;
  --r-panel: 26px;
  --r-card: 20px;
  --r-field: 18px;

  /* Geometry */
  --gutter: 20px;
  --section-y: 36px;
  --stack: 22px;
}

/*
 * Arabic (WEB-015). IBM Plex Sans Arabic is the handoff's face, and it also
 * carries Latin, so "Meridian", "TMDB" and "$16.99" inside Arabic copy stay
 * in one family. It is not self-hosted yet (MER-392 FU-3 removed the Google
 * Fonts load and no upstream build is vendored), so today it applies only
 * where the visitor has it installed; otherwise Arabic falls back to the
 * system face and Latin to the vendored Manrope / DM Sans. Layout rules are written in logical properties, so
 * `dir="rtl"` mirrors the page without a second stylesheet.
 */
:root:lang(ar) {
  --font-display: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "DM Sans", system-ui, sans-serif;
}
/* Tracking breaks Arabic's joined letterforms apart; the Latin wordmark keeps its own. */
:lang(ar) :not(.brand__mark) { letter-spacing: 0 !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* iOS zooms a field whose text is under 16px on focus. The handoff pins inputs
   at 16px for exactly this reason — do not shrink them to fit a layout. */
input, textarea, select, button { font: inherit; color: inherit; }

/* Links are ink, not accent (web handoff accent discipline). Running-text links
   carry a neutral underline; nav, buttons and footers opt out by class. */
a { color: var(--text); text-decoration: none; }
p a, li a, .legal a, .prose a {
  text-decoration: underline;
  text-decoration-color: var(--border-emphasis);
  text-underline-offset: 3px;
}
a:hover { color: var(--text); text-decoration-color: var(--text-2); }
::selection { background: var(--selection); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
p { margin: 0; text-wrap: pretty; }

.u-muted { color: var(--text-2); }
.u-hidden { display: none !important; }
.u-grow { flex: 1; }

/* Screen-reader-only: announces state changes that are otherwise purely visual. */
.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- wordmark */

.brand { display: flex; align-items: center; gap: 8px; }
.brand__dot {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  /* An ink dot: the accent is reserved for focus, CTA and price. */
  background: var(--text);
  flex: none;
}
.brand__dot--warning { background: var(--warning); box-shadow: none; }
.brand__dot--off { background: var(--text-3); box-shadow: none; }
.brand__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--text);
}

/* ------------------------------------------------------------------ header */

.site-header {
  height: 60px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__nav { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.site-header__nav a { color: var(--text-2); }
.site-header__nav a[aria-current="page"] { color: var(--text); }
.site-header__status { font-size: 12px; color: var(--text-2); letter-spacing: 0.04em; }

/* The header's download pill: a neutral outline on mobile where it is the only
   nav item, an accent outline on desktop where it sits after three links. */
.btn--download {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
}
.btn--download:hover { border-color: var(--border-hover); color: var(--text); }

/* Shown only above the 768px breakpoint. */
.u-desktop-only { display: none; }

/* ------------------------------------------------------------ theme toggle */
/* Every page's header carries one (WEB-001); theme.js wires it. */

.theme-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-2);
  cursor: pointer;
  flex: none;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-hover); }
.theme-toggle svg { width: 16px; height: 16px; }
/* Show the icon of the theme the button switches TO. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle[data-next="light"] .icon-sun { display: block; }
.theme-toggle[data-next="light"] .icon-moon { display: none; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  cursor: pointer;
  background: none;
  text-align: center;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn--block { display: flex; width: 100%; }
.btn--tall { height: 56px; font-size: 17px; }

.btn--primary { background: var(--primary-fill); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--primary:active { background: var(--primary-pressed); }

.btn--secondary { border-color: var(--border); color: var(--text); }
.btn--secondary:hover { border-color: var(--border-hover); background: var(--raised); }

.btn--outline-accent { border-color: var(--accent); color: var(--accent); }
.btn--outline-accent:hover { background: var(--glow); }

/* "sending": the action is alive but not pressable. */
.btn--busy {
  background: var(--accent-tint);
  border-color: var(--accent-line);
  color: var(--accent-text);
  cursor: default;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--raised);
  border-color: var(--border);
  color: var(--text-3);
  cursor: not-allowed;
}
.btn--busy:disabled { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-text); }

.spinner {
  width: 14px; height: 14px; flex: none;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* ------------------------------------------------------------------ fields */

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 12.5px; color: var(--text-2); }
.field__hint { font-size: 12px; line-height: 1.5; color: var(--text-2); }

.input {
  height: 52px;
  width: 100%;
  border-radius: var(--r-field);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0 16px;
  font-size: 16px;
  color: var(--text);
  outline: none;
}
.input::placeholder { color: var(--text-3); }
.input:focus { border-color: var(--accent); }
.input:disabled { cursor: not-allowed; }

.input--code { font-size: 18px; letter-spacing: 0.22em; }

.field--invalid .input { background: var(--danger-fill); border-color: var(--danger); }

.field__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--danger);
}
.field__error svg { flex: none; margin-top: 2px; }

/* A reveal toggle sits inside the 52px field as a 38px pill. */
.field--reveal { position: relative; }
.field--reveal .input { padding-inline-end: 96px; }
.reveal {
  position: absolute;
  inset-inline-end: 8px;
  top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--raised);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
}
.reveal:hover { color: var(--text); }
.field--reveal .field__label + * { position: relative; }

/* --------------------------------------------------------------- code chip */

.code-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--raised);
  border: 1px solid var(--border);
}
.code-chip__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.22em;
  color: var(--text);
}
.code-chip__state {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.code-chip--expired { border-style: dashed; border-color: var(--warning-line); }
.code-chip--expired .code-chip__value { color: var(--text-3); text-decoration: line-through; }
.code-chip--expired .code-chip__state { color: var(--warning); }

/* --------------------------------------------------------- segmented tabs */

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--border);
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: none;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.tab[aria-selected="true"] {
  background: var(--raised);
  border-color: var(--accent-line);
  font-weight: 500;
  color: var(--text);
}
.tab:disabled { cursor: not-allowed; }
/* The handoff shortens the labels below 768px. */
.tab__long { display: none; }

/* ------------------------------------------------------------- trust line */

.trust {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}
.trust svg { flex: none; margin-top: 2px; }

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

.pair {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
}
.pair__banner {
  padding: 14px var(--gutter);
  background: var(--danger-fill);
  border-bottom: 1px solid var(--danger-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.pair__banner svg { flex: none; color: var(--danger); }

.pair__body {
  flex: 1;
  padding: 22px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}
.pair__head { display: flex; align-items: center; justify-content: space-between; }
.pair__intro { display: flex; flex-direction: column; gap: 12px; }
.pair__intro h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.pair__intro p { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.pair__codeblock { display: flex; flex-direction: column; gap: 10px; }
.pair__codeblock-label { font-size: 12.5px; color: var(--text-2); }
.pair__fields { display: flex; flex-direction: column; gap: 14px; }

.pair__action {
  padding: 16px var(--gutter) 26px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--ground);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pair__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.pair__note { text-align: center; font-size: 12px; color: var(--text-2); }
.pair__retry-note { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }

/* The form dims but stays legible while a hand-off is in flight or the
   connection is down, because the user's typing must remain readable. */
.pair__form[data-dim="sending"] { opacity: 0.55; }
.pair__form[data-dim="offline"] { opacity: 0.6; }

/* sent / expired replace the form and centre in the remaining height. */
.pair__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 0 24px;
}
.pair__panel h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
.pair__panel p { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 310px; }
.pair__panel--expired h1 { font-size: 27px; line-height: 1.2; }

.disc {
  width: 76px; height: 76px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  border: 1px solid var(--success-line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--success-glow);
  /* Success marks keep the teal — the TV app uses it for success too. */
  color: var(--accent);
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--border);
  width: 100%;
}
.info-row__label { font-size: 12px; color: var(--text-2); }
.info-row__value { font-size: 14px; color: var(--text); }


/* ---------------------------------------------------- /pair composition */

/* Mobile draws the brand row inline in the body; desktop draws a real top bar.
   Both exist in the DOM and one is display:none, which also removes it from the
   accessibility tree — so a screen reader never hears the wordmark twice. */
.pair__topbar { display: none; }
.pair__card { display: contents; }
.pair__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}
.pair__cardhead { display: flex; flex-direction: column; gap: var(--stack); }
.pair__trust--desktop { display: none; }

/* The action is pinned to the bottom of the viewport and the form scrolls
   under it, which is what keeps the Xtream tab's three fields reachable
   without the CTA leaving the screen. */
.pair__action {
  position: sticky;
  bottom: 0;
  margin: 0 calc(var(--gutter) * -1);
}
.pair__panel .pair__action { position: static; margin: 0; }

.field__control { position: relative; }
.u-strong { color: var(--text); }

/* Only the selected tab's fields are in the document flow. */
.pair[data-kind="m3u"] #field-server,
.pair[data-kind="m3u"] #field-user,
.pair[data-kind="m3u"] #field-pass,
.pair[data-kind="xtream"] #field-m3u,
.pair[data-kind="local"] #field-m3u,
.pair[data-kind="local"] #field-user,
.pair[data-kind="local"] #field-pass { display: none; }

/* ------------------------------------------------------- eyebrow · footer */
/* The landing page's own rules live in landing.css (WEB-007). */

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.site-footer {
  padding: 22px var(--gutter) 28px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__links { display: flex; gap: 20px; font-size: 13px; }
.site-footer__links a { color: var(--text-2); }
.site-footer__langs a[aria-current="page"] { color: var(--text); }
/* Running copy: secondary ink, not tertiary (tertiary is ~3.7:1). */
.site-footer__disclaimer { font-size: 11.5px; line-height: 1.6; color: var(--text-2); }

/* ------------------------------------------------------------------- legal */

.legal { padding: 32px var(--gutter) 40px; display: flex; flex-direction: column; gap: 14px; }
.legal h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.018em; }
.legal h2 { font-size: 19px; margin: 22px 0 0; color: var(--text); }
.legal p { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.legal__date { font-size: 13px; color: var(--text-3); }
.legal__lede { margin-top: 6px; }
.legal__index { display: none; }

/* ================================================================ desktop */

@media (min-width: 768px) {
  :root {
    --gutter: 64px;
    --section-y: 80px;
  }

  .site-header { height: 72px; }
  .u-desktop-only { display: revert; }
  .btn--download {
    height: 40px;
    padding: 0 20px;
    border-color: var(--border-strong);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
  }
  .btn--download:hover { border-color: var(--border-emphasis); background: var(--raised); }
  .site-header__nav { gap: 32px; font-size: 14px; }
  .brand__dot { width: 9px; height: 9px; }
  .brand__mark { font-size: 14px; }

  .tab__short { display: none; }
  .tab__long { display: inline; }
  .tab { padding: 11px 8px; font-size: 14px; }

  /* /pair: a centred 560px panel, action in flow rather than anchored. */
  .pair {
    position: relative;
    overflow-x: clip;
  }
  .pair::before {
    content: "";
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 520px;
    border-radius: var(--r-pill);
    background: radial-gradient(closest-side, var(--glow), var(--glow-none));
    pointer-events: none;
  }
  .pair__body {
    align-items: center;
    justify-content: center;
    padding: 48px var(--gutter);
    position: relative;
  }
  .pair__card {
    width: 560px;
    max-width: 100%;
    padding: 36px;
    border-radius: var(--r-panel);
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-panel);
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  /* Inside the panel the fill inverts: fields drop to the page ground. */
  .pair__card .input,
  .pair__card .tabs { background: var(--ground); }
  .pair__card .field--invalid .input { background: var(--danger-fill); }
  .pair__card .field__label { font-size: 13px; }
  .pair__card .field__hint { font-size: 12.5px; }
  .pair__intro h1 { font-size: 30px; }
  .pair__intro p { font-size: 15px; line-height: 1.6; max-width: 330px; }
  .pair__head--mobile { display: none; }

  /* Header row of the desktop card: copy left, code chip right. */
  .pair__cardhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .pair__codeblock {
    flex: none;
    align-items: flex-end;
    gap: 8px;
  }
  .pair__codeblock-label { font-size: 12px; }
  .code-chip { padding: 10px 18px; }
  .code-chip__value { font-size: 22px; letter-spacing: 0.2em; }

  /* The action rejoins the flow: rule, then trust line beside the button. */
  .pair__action {
    padding: 0;
    padding-bottom: 0;
    border-top: 0;
    background: none;
    gap: 20px;
  }
  .pair__action::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--border) 48px,
      var(--border) calc(100% - 48px),
      transparent
    );
  }
  .pair__actionrow {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .pair__actionrow .trust { flex: 1; font-size: 12.5px; }
  .pair__actionrow .btn { flex: none; width: auto; padding: 0 34px; }
  .pair__topbar { display: flex; }
  .pair__trust--mobile { display: none; }
  .pair__trust--desktop { display: flex; }
  .pair__form { flex: none; gap: 26px; }
  .pair__cardhead { flex-direction: row; }
  .pair__action { position: static; margin: 0; }
  .pair__form > .u-grow { display: none; }
  .pair__panel { padding: 0; align-items: flex-start; }
  .pair__panel p { max-width: 420px; }

  .site-footer {
    padding: 36px var(--gutter) 44px;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: 56px;
  }
  .site-footer__links { gap: 28px; font-size: 13.5px; }
  .site-footer__disclaimer { font-size: 12.5px; line-height: 1.65; max-width: 620px; }

  /* Legal: a 240px sticky index beside a 680px measure. */
  .legal {
    padding: 72px var(--gutter) 88px;
    display: grid;
    grid-template-columns: 240px minmax(0, 680px);
    gap: 80px;
    align-items: start;
  }
  .legal__index {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 32px;
  }
  .legal__index-title {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    padding-bottom: 6px;
  }
  .legal__index a { font-size: 14px; color: var(--text-2); }
  .legal__index a { text-decoration: none; }
  .legal__index a:first-of-type { color: var(--text); }
  .legal__body { display: flex; flex-direction: column; gap: 16px; }
  .legal h1 { font-size: 48px; line-height: 1.08; letter-spacing: -0.022em; }
  .legal__date { font-size: 13.5px; }
  .legal__lede { margin-top: 8px; font-size: 17px; line-height: 1.75; }
  .legal h2 { font-size: 22px; margin: 28px 0 0; }
  .legal p { font-size: 16.5px; line-height: 1.75; }
}

/* The legal index needs 240 + 80 + a readable measure; below 900px it hides
   and the page is one column (web handoff, breakpoints.legalIndex). */
@media (min-width: 768px) and (max-width: 899px) {
  .legal { display: flex; flex-direction: column; }
  .legal__index { display: none; }
}

/* Trust-line icons are ink, not accent (web handoff accent discipline). */
.trust svg { color: var(--text-2); }