/*
  Travoa legal pages: shared stylesheet.
  A web port of the mobile app's "Mobility" design system
  (lib/core/theme/app_theme.dart): ink-black brand on white, soft grey fills
  instead of outlines, hairline dividers, Manrope for titles, Inter for text.
  Colour is for state only. Light theme only, like the app.
*/

/* ── Tokens (single source of truth) ─────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Brand */
  --ink: #000000;
  --primary-dark: #1a1a1a;
  --on-ink: #ffffff;

  /* Surfaces */
  --background: #ffffff;
  --surface: #ffffff;
  --card-alt: #f6f6f6;
  --fill: #f3f3f3;
  --fill-strong: #e8e8e8;
  --divider: #eeeeee;
  --border: #e2e2e2;

  /* Text */
  --text: #000000;
  --text-2: #545454;
  --text-hint: #757575;
  --text-disabled: #afafaf;

  /* State */
  --accent: #06c167;
  --accent-dark: #047f43;
  --accent-soft: #e7f8ef;
  --warning: #ffc043;
  --warning-dark: #8a5a00;
  --warning-soft: #fff5dd;
  --error: #e11900;
  --error-soft: #fdedea;
  --info: #276ef1;
  --info-soft: #ebf1fe;

  /* Shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-xxl: 24px;
  --r-full: 999px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --gutter: 20px;

  /* Elevation */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-floating: 0 3px 12px rgba(0, 0, 0, 0.16);

  /* Motion */
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Type */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --header-h: 64px;
  --doc-w: 688px;
  --toc-w: 280px;
  --col-gap: 56px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1080px) {
  :root { --gutter: 40px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s-3);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(0, 0, 0, 0.2); }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-hint); /* #757575: 4.6:1 on white, visible on card-alt too */
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
  overflow-wrap: anywhere;
}

a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

strong { font-weight: 600; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

svg.icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.container {
  width: 100%;
  max-width: calc(var(--doc-w) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 1080px) {
  .container { max-width: calc(var(--toc-w) + var(--col-gap) + var(--doc-w) + 2 * var(--gutter)); }
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: 10px var(--s-3);
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus { transform: none; }

/* ── Draft notice (warning tone) ─────────────────────────────────────────── */
.draft {
  background: var(--warning-soft);
  color: var(--warning-dark);
  font-size: 14px;
  line-height: 1.45;
}

.draft__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 12px;
}

.draft .icon { margin-top: 1px; }

.draft p { margin: 0; }

.draft code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(138, 90, 0, 0.1);
}

/* ── Site header ─────────────────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px var(--s-3);
  padding-block: 12px;
}

/* The five legal links fit beside the brand from 768px; narrower screens put
   them on their own row (see .site-nav below). */
@media (min-width: 768px) {
  html { scroll-padding-top: calc(var(--header-h) + var(--s-4)); }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .site-header__inner {
    flex-wrap: nowrap;
    min-height: var(--header-h);
    padding-block: 0;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-md);
}

.brand__mark {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
}

/* The shared favicon.svg tile has 22% corners; clip to 28% like the admin sites' logo tile. */
.brand__mark,
.site-footer__brand img { border-radius: 28%; }

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
}

.brand__caption {
  color: var(--text-hint);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.1px;
}

/* Legal nav: pill links on wide screens, a filled segmented control on phones. */
.site-nav {
  display: flex;
  gap: var(--s-1);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.site-nav a:hover {
  background: var(--fill);
  color: var(--ink);
}

.site-nav a:active { transform: scale(0.98); }

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

.site-nav a[aria-current="page"]:hover { background: var(--primary-dark); }

/* Narrow phones wrap the control onto a second row rather than clipping it. */
@media (max-width: 767px) {
  .site-nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    padding: var(--s-1);
    border-radius: var(--r-md);
    background: var(--fill);
  }

  .site-nav a {
    flex: 1 1 auto;
    padding: 0 10px;
    border-radius: var(--r-sm);
    font-size: 14px;
  }

  .site-nav a:hover { background: var(--fill-strong); }
}

/* ── Document layout ─────────────────────────────────────────────────────── */
.doc {
  padding-top: 40px;
  padding-bottom: 72px;
}

@media (min-width: 1080px) {
  .doc {
    display: grid;
    grid-template-columns: var(--toc-w) minmax(0, var(--doc-w));
    grid-template-areas:
      "toc head"
      "toc body";
    column-gap: var(--col-gap);
    padding-top: 56px;
    padding-bottom: 96px;
  }

  .doc-head { grid-area: head; }
  .doc-body { grid-area: body; }
}

/* Header block of a document: title, effective date, intro, summary. */
.doc-head { margin-bottom: var(--s-5); }

.doc-head > :last-child { margin-bottom: 0; }

.doc-title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
  text-wrap: balance;
}

/* Effective date and version pills. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  border-radius: var(--r-full);
  background: var(--fill);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
}

.pill .icon {
  width: 14px;
  height: 14px;
}

.lede {
  margin: 0 0 var(--s-4);
  font-size: 17px;
  line-height: 1.6;
}

/* Phones: the app's body-lg (16/1.5), so the summary stays near the fold. */
@media (max-width: 639px) {
  .lede {
    font-size: 16px;
    line-height: 1.55;
  }
}

@media (min-width: 768px) {
  .lede { font-size: 18px; }
}

/* Grouped grey panels (card-alt, no border): the summary and the contact
   block share one inset so their text lines up. */
.summary,
.contact {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--card-alt);
}

@media (max-width: 639px) {
  .summary,
  .contact { padding: 20px; }
}

.summary { margin: 0; }

.summary__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.summary > :last-child { margin-bottom: 0; }

/* ── Table of contents ───────────────────────────────────────────────────── */
.toc {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-2) var(--s-2);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
}

.toc__label {
  margin: 0 0 var(--s-2);
  padding-inline: 12px;
  color: var(--text-hint);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc a {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.toc a::before {
  counter-increment: toc;
  content: counter(toc);
  flex: none;
  min-width: 22px;
  color: var(--text-hint);
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.toc a:hover {
  background: var(--fill);
  color: var(--ink);
}

.toc a:hover::before { color: var(--ink); }

/* Tablets: two columns keep the contents card short. A column-major grid
   (not CSS columns) keeps both columns on shared rows, so a wrapped item
   can't push the right column out of line. Rows = ceil(items / 2). */
@media (min-width: 640px) and (max-width: 1079px) {
  .toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--toc-rows, 3), auto);
    grid-auto-flow: column;
    column-gap: var(--s-2);
  }

  .toc ol:has(> li:nth-child(7)) { --toc-rows: 4; }
  .toc ol:has(> li:nth-child(9)) { --toc-rows: 5; }
  .toc ol:has(> li:nth-child(11)) { --toc-rows: 6; }
  .toc ol:has(> li:nth-child(13)) { --toc-rows: 7; }
  .toc ol:has(> li:nth-child(15)) { --toc-rows: 8; }
  .toc ol:has(> li:nth-child(17)) { --toc-rows: 9; }
  .toc ol:has(> li:nth-child(19)) { --toc-rows: 10; }
  .toc ol:has(> li:nth-child(21)) { --toc-rows: 11; }
  .toc ol:has(> li:nth-child(23)) { --toc-rows: 12; }

  /* Browsers without :has() can't count rows; fall back to plain columns. */
  @supports not selector(:has(*)) {
    .toc ol {
      display: block;
      columns: 2;
      column-gap: var(--s-2);
    }

    .toc li {
      margin-bottom: 2px;
      break-inside: avoid;
    }
  }
}

@media (min-width: 1080px) {
  .toc {
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    max-height: calc(100vh - var(--header-h) - var(--s-5) - var(--s-4));
    margin: 0 0 0 -12px; /* hang the hover pills so text aligns with the logo */
    padding: 0 0 var(--s-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: var(--s-4);
    border: 0;
    border-radius: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    /* Fade the last 24px (empty padding when the list fits) so a list that
       scrolls on short screens shows there is more below. */
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--s-4)), transparent);
    mask-image: linear-gradient(#000 calc(100% - var(--s-4)), transparent);
  }

  .toc a {
    min-height: 36px;
    padding-block: 8px;
    font-size: 14px;
    line-height: 1.35;
  }

  /* The scroller clips anything outside it, so draw the ring inside. */
  .toc a:focus-visible { outline-offset: -2px; }
}

/* ── Document body ───────────────────────────────────────────────────────── */
.doc-body h2 {
  margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--divider);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.doc-body > h2:first-child { margin-top: var(--s-5); }

@media (max-width: 639px) {
  .doc-body h2 {
    margin-top: 40px;
    padding-top: var(--s-4);
  }
}

/* Below the two-column layout the contents card sits right above the body,
   so its border already separates the two; skip the first hairline but keep
   a section-sized gap (40px wins the margin collapse with the card's 24px). */
@media (max-width: 1079px) {
  .doc-body > h2:first-child {
    margin-top: 40px;
    padding-top: 0;
    border-top: 0;
  }
}

.sec-num {
  color: var(--text-hint);
  font-variant-numeric: tabular-nums;
}

.doc-body h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* Prose defaults. :where() keeps them at zero specificity so component
   classes (.lede, .summary, .steps, .card …) always override them. */
:where(.doc-head, .doc-body) :where(p, ul, ol) { margin: 0 0 var(--s-3); }

:where(.doc-head, .doc-body) ul { padding-left: 22px; }

:where(.doc-head, .doc-body) li { margin-bottom: var(--s-2); }

/* A list that ends a panel or card would otherwise leak its last item's
   margin through the list and make the bottom inset deeper than the top. */
:where(.doc-head, .doc-body) :is(ul, ol):last-child > li:last-child { margin-bottom: 0; }

:where(.doc-head, .doc-body) li::marker { color: var(--text-hint); }

/* Contact / postal address block (panel styles shared with .summary). */
.contact { line-height: 1.75; }

/* White card with a hairline border (delete-account options). */
.card {
  margin: 0 0 var(--s-4); /* matches the 24px between the contents card and the first card */
  padding: var(--s-4);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.card > :last-child { margin-bottom: 0; }

.doc-body .card h2 {
  margin: 0 0 var(--s-3);
  padding: 0;
  border: 0;
}

/* Anchor jumps to a card heading land the whole card (its padding + 1px
   border) below the sticky header; scroll-margin adds to scroll-padding. */
.doc-body .card h2[id] { scroll-margin-top: calc(var(--s-4) + 1px); }

@media (max-width: 639px) {
  .card { padding: 20px; }

  .doc-body .card h2[id] { scroll-margin-top: 21px; }
}

/* Numbered steps: grey-fill number tiles. */
.doc .steps {
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  min-height: 28px;
  margin-bottom: 12px;
  padding-left: 44px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--fill);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.note {
  color: var(--text-2);
  font-size: 15px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--ink);
  color: var(--on-ink);
}

.btn--primary:hover { background: var(--primary-dark); }

.doc .btn { margin: var(--s-1) 0 20px; }

/* Full-width call to action on phones, like the app's primary button. */
@media (max-width: 639px) {
  .doc .btn {
    display: flex;
    width: 100%;
  }
}

/* ── Back-to-contents pill (below the two-column layout) ─────────────────── */
/* Long pages on phones and tablets keep the contents one tap away, like the
   app keeps its navigation in reach. Desktop has the sticky contents column. */
.to-toc {
  position: fixed;
  right: var(--s-3);
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 18px 0 14px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-floating);
  transition:
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.to-toc:hover { background: var(--primary-dark); }

.to-toc:active { transform: scale(0.98); }

/* Where scroll-driven animations exist, keep the pill out of the way until
   the contents card has scrolled off the top (it would only cover the intro
   otherwise). Elsewhere it simply stays visible. Position-based, so a deep
   link into the middle of a page shows it straight away. */
@supports (animation-timeline: view()) {
  .doc { timeline-scope: --toc; }

  .toc { view-timeline: --toc block; }

  .to-toc {
    animation: to-toc-reveal linear both;
    animation-timeline: --toc;
    animation-range: exit calc(100% - 96px) exit 100%; /* a short fade as the card's last rows leave */
  }
}

@keyframes to-toc-reveal {
  from { opacity: 0; visibility: hidden; }
  to { opacity: 1; visibility: visible; }
}

/* Leave room so the pill never sits on the footer links at the very end. */
.site-footer { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1080px) {
  .to-toc { display: none; }

  .site-footer { padding-bottom: 0; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--divider);
  color: var(--text-2);
  font-size: 14px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-5);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-hint);
  font-size: 13px;
  font-weight: 500;
}

.site-footer__brand img {
  display: block;
  width: 28px;
  height: 28px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin: 0 -10px;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.site-footer__links a:hover {
  background: var(--fill);
  color: var(--ink);
}

.site-footer__links .icon {
  width: 16px;
  height: 16px;
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .skip-link,
  .site-nav,
  .toc,
  .to-toc,
  .site-footer__links { display: none; }

  .site-header { position: static; border: 0; }
  .doc { display: block; padding: 0; }
  .summary,
  .contact,
  .card { break-inside: avoid; }
  .doc-body h2,
  .doc-body h3 { break-after: avoid; }
}