/* youtube.usedidi.com -- self-contained stylesheet.
 *
 * A copy, taken 2026-09-18, of the layout and chrome used by the public
 * pages on usedidi.com (legal.css) plus the generic product-page rules
 * from product.css. It is copied rather than linked on purpose: this
 * site must not load anything from the Didi landing page at runtime, so
 * a Didi deploy can never change how these OAuth pages render, and this
 * site owns the copy from here on.
 *
 * The per-product accent overrides from product.css are deliberately not
 * included -- they belong to Didi's other microsites.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* Brand tokens — matches `didi_app/lib/app/theme/tokens/didi_colors.dart`
   exactly (the 2026 redesign: warm Didi yellow primary, near-black/
   warm-white surfaces), not the earlier navy/indigo palette this file
   used before that redesign landed in the app itself. */
:root {
  --color-bg: #fbf6ee;
  --color-card: #ffffff;
  --color-text: #1a1611;
  --color-text-secondary: #6b6255;
  --color-primary: #f7b22a;
  --color-primary-bg: #fdf2da;
  --color-attention: #e5895c;
  --color-attention-bg: #fef3ec;
  --color-border-light: #f0e7d6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1611;
    --color-card: #252019;
    --color-text: #f6efe3;
    --color-text-secondary: #b8ad9b;
    --color-primary: #f7b22a;
    --color-primary-bg: #3a2e14;
    --color-attention: #e8905e;
    --color-attention-bg: #2a1a10;
    --color-border-light: #2e2820;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  line-height: 1.6;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

a {
  color: var(--color-primary);
}

h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.tagline {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  margin: 0 0 20px;
}

h2 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 32px;
}

.placeholder-notice {
  display: flex;
  gap: 12px;
  background: var(--color-attention-bg);
  color: var(--color-attention);
  border-radius: 16px;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 14px;
  margin: 24px 0 32px;
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-weight: 700;
  text-decoration: none;
}

/* Didi approved branding: the primary "d" mark (warm yellow) on a
   near-black tile — matches the real app icon/splash treatment exactly,
   not just an inline logo dropped on the page background. */
.brand-mark {
  width: 56px;
  height: 56px;
  padding: 10px;
  border-radius: 16px;
  background: #1a1611;
  margin-bottom: 20px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------------------
   Site-wide header/footer — the "one consistent navbar" every public
   page (index, privacy, terms, support, contact, delete-account) shares.
   Static markup (not the React app's <Header>/<Footer>) but the same
   tokens, so the two never visually disagree.
   --------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.site-header {
  border-bottom: 1px solid var(--color-border-light);
}

.site-header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 800;
  font-size: 17px;
  min-height: 44px;
}

.site-brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #1a1611;
  padding: 5px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--color-primary);
  background: var(--color-primary-bg);
}

.site-footer {
  border-top: 1px solid var(--color-border-light);
  margin-top: 64px;
}

.site-footer-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 56px;
}

.site-footer-brand {
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 2px;
}

.site-footer-tagline {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin: 0 0 20px;
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}

.site-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px 0 0;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.site-footer-nav a:hover {
  color: var(--color-primary);
}

.site-footer-contact a {
  font-weight: 700;
  text-decoration: none;
}

.site-footer-copyright {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin-top: 16px;
}

/* The product icons are full-bleed store icons with their own artwork and
   background, so they must not sit on legal.css's near-black Didi tile. */
html[data-product] .brand-mark,
html[data-product] .site-brand img {
  background: none;
  padding: 0;
}

/* A plain definition list is the clearest way to present "what we collect
   / why / where it lives" without a table that overflows on a phone. */
html[data-product] .facts {
  margin: 0;
}
html[data-product] .facts dt {
  font-weight: 700;
  margin-top: 16px;
}
html[data-product] .facts dd {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
}