/* PostCopilot — Shared Design System */

/* ============================================
   CSS Variables
   ============================================ */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --text: #000000;
  --text-secondary: #737373;
  --text-muted: #a3a3a3;
  --primary: #000000;
  --primary-hover: #262626;
  --secondary: #404040;
  /* Text/icon colour that sits ON a --primary/--secondary fill. MUST be used by
     every rule painting on that gradient (.cta, .pc-btn--primary, .pc-signin-mark)
     instead of a hardcoded #fff — in dark mode --primary inverts to white, so a
     hardcoded white label rendered white-on-white (~1.1:1). Do NOT use this for
     buttons on hardcoded backgrounds (.brand-mark, .nav-group--ai, .social-btn):
     those keep #fff because their background never inverts. */
  --on-primary: #ffffff;
  --accent: #171717;
  --success: #22c55e;
  --warning: #f59e0b;
  --border: #e5e5e5;
  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --radius: 12px;
  --radius-lg: 16px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Dark mode (opt-in via OS preference)
   ============================================
   Added for the download-queue feature. Soften pure black to #0b0b0c, never
   pure-white text, invert the gradient to light-on-dark, lean on surface
   elevation over heavy shadows. All existing pages inherit these tokens; any
   page that relied on a hardcoded #fff/#000 stays light until migrated to
   tokens, so this is a safe, additive change. Contrast verified ≥4.5:1
   (e.g. #a8a8ad on #141416 ≈ 6.9:1). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --surface: #141416;
    --surface-2: #1c1c1f;
    --text: #f5f5f5;
    --text-secondary: #a8a8ad;
    --text-muted: #6f6f76;
    --primary: #ffffff;
    --primary-hover: #e5e5e5;
    --secondary: #d4d4d8;
    /* Inverts with --primary: dark ink on the now-light gradient.
       #0b0b0c on #ffffff ≈ 19.8:1, on #d4d4d8 ≈ 13.4:1 — both far past AA. */
    --on-primary: #0b0b0c;
    --accent: #e5e5e5;
    --success: #34d399;
    --warning: #fbbf24;
    --border: #2a2a2e;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 8px 24px -8px rgb(0 0 0 / 0.6);
  }
  /* Sticky nav glass needs a dark base or it washes out. */
  .site-nav { background: rgba(20,20,22,0.85); }
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
}

a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
a:hover { text-decoration: underline; }

/* ============================================
   Layout
   ============================================ */
.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px;
}

/* ============================================
   Navigation — full-width sticky bar
   ============================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -16px rgba(0,0,0,0.08);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
}

.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
}

.site-nav a:hover {
  color: var(--primary);
  text-decoration: none;
}

/* ---- Brand: mark + wordmark ---- */
.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  font-size: 16px;
  flex-shrink: 0;
  padding: 4px 6px 4px 0;
}

.site-nav .brand:hover { color: var(--text); }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #111 0%, #3a3a3a 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.12);
}

.brand-text { font-size: 16px; }

/* ---- Nav links container ---- */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* ---- Account control slot (rendered by components/queue.js) ---- */
/* Sits at the far right after the nav links on desktop. The links already
   carry margin-left:auto, so the account control follows them with a small
   gap. Empty until queue.js renders into it, so it adds no layout otherwise. */
.nav-account {
  display: flex;
  align-items: center;
  margin-left: 10px;
  flex-shrink: 0;
}
.nav-account:empty { margin-left: 0; }

/* ---- Always-visible header queue entry ---- */
.nav-queue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.nav-queue:hover { color: var(--text); border-color: var(--text-muted); }
.nav-queue:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.nav-queue-icon { flex-shrink: 0; }
/* When the queue link sits next to the account control, the account control
   already provides the right edge — only the queue link pushes to the right. */
.nav-queue + .nav-account { margin-left: 10px; }
.nav-queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--success);
  color: #06210f;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .nav-queue-label { display: none; }
  .nav-queue { position: relative; padding: 8px 10px; min-width: 40px; justify-content: center; }
  /* Label is hidden here, so the inline badge would read as a stray dot beside
     the icon. Pin it to the button's top-right corner as an overlay count badge
     (ringed in --surface, matching the avatar status dot) so it reads as a
     notification count on the icon. Desktop keeps the inline badge after "Queue". */
  .nav-queue-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    border: 2px solid var(--surface);
  }
}

/* ---- Individual links ---- */
.site-nav-links .nav-link {
  position: relative;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  transition: color 0.15s ease, background 0.15s ease;
}

.site-nav-links .nav-link:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* Active state — sliding underline */
.site-nav-links .nav-link.active {
  color: var(--text);
  font-weight: 600;
}

.site-nav-links .nav-link.active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #111, #3a3a3a);
}

/* Featured link — Follower Export (top funnel) */
.site-nav-links .nav-featured {
  font-weight: 600;
  color: var(--text);
}

.site-nav-links .nav-featured::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

/* Muted link (Blog) — de-emphasised, but --text-muted (#a3a3a3 on white ≈ 2.5:1)
   fails AA for an interactive link. Use --text-secondary (≈ 4.7:1, passes); it's
   still the least prominent link since it carries no pill/featured treatment. */
.site-nav-links .nav-link--muted { color: var(--text-secondary); }

/* ---- Platform group pill ---- */
.nav-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  margin: 0 4px 0 2px;
  flex-shrink: 0;
}

.nav-group--threads {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.nav-group--x {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.nav-group--ai {
  /* Darker indigo→violet than the original #6366f1/#8b5cf6: white on those
     measured ~4.2–4.5:1, under AA for this 11px-bold uppercase label. These
     stops keep the same brand hue but push white to ≥5.7:1 across the gradient.
     Hardcoded on purpose — this fill never inverts, so #fff stays correct in
     both themes (see the --on-primary note at the top of the file). */
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  border: 1px solid #4f46e5;
}

/* Dark theme: the Threads pill uses a hardcoded #000 fill that does NOT invert,
   so on the ~#141416 dark header it becomes a black pill on a near-black bar —
   the border (#000) vanishes and it reads as plain floating text, unlike the
   bordered X pill and the gradient AI pill. Invert it with the Threads brand
   (its logo is black-on-white in dark UIs) so it stays an obvious, high-contrast
   pill. Placed AFTER the base rule so it wins (the top-of-file dark block is
   above these definitions and would otherwise lose on source order). */
@media (prefers-color-scheme: dark) {
  .nav-group--threads {
    background: #fff;
    color: #000;
    border-color: #fff;
  }
}

.nav-group-icon { display: block; flex-shrink: 0; }

/* ---- Divider between platform groups ---- */
.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
}

/* ---- Platform group dropdowns (disclosure menus) ---- */
.nav-dd {
  position: relative;
  flex-shrink: 0;
}

/* The pill is now a real <button>; reset native chrome so it matches the
   original inline-span pill styling driven by .nav-group above. */
.site-nav-links button.nav-group {
  cursor: pointer;
  font: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

.nav-dd-caret {
  display: block;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.18s ease;
}

.nav-dd[open] .nav-dd-caret { transform: rotate(180deg); }

.nav-dd .nav-group:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.nav-dd-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 184px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 110;
}

/* Open on explicit toggle (open attr) and on keyboard focus within. */
.nav-dd[open] > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel {
  display: flex;
}

.nav-dd-panel .nav-link {
  display: block;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.nav-dd-panel .nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Active item inside a panel: solid highlight rather than the underline,
   which doesn't read well in a stacked menu. */
.nav-dd-panel .nav-link.active {
  background: var(--surface-2);
}
.nav-dd-panel .nav-link.active::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-dd-caret { transition: none; }
}

/* ---- Hamburger — hidden on desktop ---- */
/* Matched to the .nav-queue control: same 40px height, surface-2 fill, border,
   radius and secondary-grey icon, so Queue + hamburger read as one control set
   in both themes (the old transparent bg + brighter --text icon made it an
   odd-one-out next to the grey Queue button). */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 11px;
  margin-left: auto;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.nav-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ============================================
   Header (page hero)
   ============================================ */
header {
  text-align: center;
  margin-bottom: 40px;
}

header h1 {
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

header .lead {
  margin: 0 auto;
  max-width: 540px;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* ============================================
   Hero / Card Sections
   ============================================ */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}

/* ============================================
   Buttons
   ============================================ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--on-primary);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}

.cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: var(--on-primary);
}

.cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.cta-secondary:hover {
  background: var(--border);
  text-decoration: none;
}

/* ============================================
   Form Elements
   ============================================ */
.input-group { margin-bottom: 16px; }

.input-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--text);
}

.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: var(--transition);
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* ============================================
   Tools Grid (internal linking)
   ============================================ */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.tools-grid a {
  display: block;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: var(--transition);
}

.tools-grid a:hover {
  border-color: var(--text-muted);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.tools-grid h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text);
}

.tools-grid p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================
   FAQ Accordion
   ============================================ */
details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--surface);
}

details summary {
  padding: 16px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; content: ''; }

details summary::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
  transition: var(--transition);
}

details[open] summary::after {
  content: '\2212';
}

details > div,
details > p {
  padding: 0 16px 16px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================
   Footer
   ============================================ */
footer {
  text-align: center;
  padding: 32px 0;
  color: var(--text-muted);
  font-size: 14px;
}

footer a {
  color: var(--text-secondary);
  font-weight: 400;
}

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

.social-share {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: var(--transition);
}

.social-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

.social-btn--x       { background: #000; }
.social-btn--fb      { background: #1877f2; font-size: 16px; }
.social-btn--linkedin { background: #0a66c2; }
.social-btn--reddit  { background: #ff4500; }
.social-btn--threads { background: #000; }

/* ============================================
   Responsive — Nav collapse (max-width: 1100px)
   ============================================ */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }

  .nav-inner { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 12px; }

  /* Right-side control set (Queue, account, hamburger) is right-aligned as a
     group by the Queue's margin-left:auto; internal spacing is then the single
     12px flex gap so the three controls are evenly spaced. Dropping the extra
     per-item margins (and the hamburger's own margin-left:auto, which would
     otherwise shove it to the far edge and leave an uneven gap) is what keeps
     them balanced. */
  .nav-toggle { order: 3; margin-left: 0; }
  .nav-queue { order: 1; margin-left: auto; }
  .nav-account { order: 2; margin-left: 0; }
  .nav-queue + .nav-account { margin-left: 0; }
  .site-nav-links { order: 4; }

  .site-nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin: 8px 0 0 0;
  }

  .site-nav-links.open { display: flex; }

  /* In the flattened drawer every link sits directly on the header --surface
     (no elevated panel behind it), so the desktop resting colour --text-secondary
     read as dim grey-on-grey. Promote drawer links to full --text: #000 on #fff
     ≈ 21:1 (light) and #f5f5f5 on #141416 ≈ 17:1 (dark). Covers dropdown-panel
     links too (they also match .site-nav-links .nav-link), incl. the muted Blog
     link — legibility over de-emphasis inside the mobile menu. Hover/active pill
     unchanged. */
  .site-nav-links .nav-link {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    color: var(--text);
  }

  /* Active/selected item pill. --surface-2 alone is invisible in light theme
     (#fafafa on the ~#fff drawer ≈ 1.02:1); it only worked in dark (#1c1c1f on
     #141416). Add an inset --border ring (no layout shift) so the pill is a
     clearly outlined chip in BOTH themes — light #e5e5e5 ring on #fff, dark
     #2a2a2e ring on #141416 — plus a --primary left accent bar that inverts
     with the theme (black in light, white in dark) to mark the current item. */
  .site-nav-links .nav-link.active {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border), inset 3px 0 0 0 var(--primary);
  }

  .site-nav-links .nav-link.active::after { display: none; }

  /* Dropdowns flatten: the wrapper and panel become static so the drawer is a
     single stacked column. The pill becomes a non-interactive section header
     and the panel links are always visible (no JS toggle needed on mobile). */
  .nav-dd {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .nav-dd-panel {
    position: static;
    display: flex;
    margin: 0;
    padding: 0;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
    gap: 2px;
  }

  .nav-dd-panel .nav-link {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
  }

  .nav-dd-caret { display: none; }

  /* Group pill becomes a section header on mobile */
  .nav-group {
    align-self: flex-start;
    background: none !important;
    /* Eyebrow section label. --text-muted failed AA on the drawer surface
       (#a3a3a3 on #fff ≈ 2.5:1 light, #6f6f76 on #141416 ≈ 3.6:1 dark).
       --text-secondary clears AA in both: #737373 on #fff ≈ 4.7:1,
       #a8a8ad on #141416 ≈ 6.9:1 — still quieter than the --text links. */
    color: var(--text-secondary) !important;
    border: none !important;
    padding: 12px 14px 4px;
    margin: 4px 0 0;
    font-size: 11px;
    border-radius: 0;
    text-align: left;
  }
  /* In the mobile drawer the pill loses its black fill (background:none), so the
     white desktop icon would be invisible. Match the section-header label colour
     (--text-secondary) instead of a hardcoded #000 — #000 was invisible on the
     dark drawer. Theme-aware, and consistent with the label it sits beside. */
  .nav-group--threads .nav-group-icon { color: var(--text-secondary); }

  /* Divider becomes horizontal */
  .nav-divider {
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }
}

/* ============================================
   Responsive — Mobile (max-width: 640px)
   ============================================ */
@media (max-width: 640px) {
  .wrap { padding: 20px 16px; }

  header { margin-bottom: 32px; }
  header h1 { font-size: 24px; }

  .hero { padding: 24px 20px; }

  .cta { padding: 14px 20px; font-size: 15px; }

  .tools-grid { grid-template-columns: 1fr; }

  /* Prevent iOS zoom on input focus */
  input, textarea, select { font-size: 16px !important; }
}

/* Safe area (notched devices) */
@supports (padding: env(safe-area-inset-bottom)) {
  .wrap {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* ============================================
   Language switcher (/download family only)
   Added 2026-08-03. The localized /download pages had NO inbound internal link
   anywhere on the site — only each other's <link rel="alternate" hreflang> tags.
   hreflang declares a relationship between pages; it does not create a crawl
   path to them. /id/download and /ru/download were at 0.6 and 0.1 impressions
   per day while the English /download served ~1,100 Indonesian-language
   impressions a week (GSC, 7d to 2026-08-02).
   ============================================ */
.dl-langnav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 10px;
  margin: -24px 0 28px;
  font-size: 13px;
  color: var(--text-muted);
}
.dl-langnav-label { font-weight: 500; }
.dl-langnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dl-langnav a { text-decoration: none; border-bottom: 1px solid var(--border); }
.dl-langnav a:hover { border-bottom-color: currentColor; }

@media (max-width: 640px) {
  .dl-langnav { margin: -16px 0 22px; font-size: 12px; }
}