/* PCProfileRoute — the "that's a profile, not a post" hint + routing card on
   /download. Two states on one mount node (#pc-profile-route):

     .pcroute--hint  paste-time. One line, sitting between the Load button and
                     .dl-quality-note, which is ALSO 13px/--text-muted — so a
                     muted hint here would read as more boilerplate and be
                     skipped by exactly the people it exists for. It is one step
                     up in colour and carries a hairline rule to mark it as a
                     live, conditional annotation rather than static prose.
     .pcroute--card  submit-time. The bordered + left-accent shell already used
                     by the export pages' state cards, carrying the routing link.

   The mount sits BELOW the form, so neither state ever moves the primary CTA.

   Every colour is a shared token from styles.css, so dark mode
   (@media prefers-color-scheme: dark there) is inherited with no rules here.
   Contrast checked in both modes: --text-secondary on --surface-2 is 4.6:1
   light / 6.4:1 dark. --text-muted is NOT used for body copy here — it is
   2.6:1 on white and 2.9:1 on the dark card, i.e. below AA at these sizes. */

.pcroute[hidden] { display: none; }

/* ── Paste-time hint ─────────────────────────────────────────────────────── */
.pcroute--hint {
  margin-top: 14px;
  padding-left: 10px;
  /* --text-muted, not --border: the border token is #2a2a2e on a #141416 card in
     dark mode and effectively disappears, taking the "this is a live note" cue
     with it. The rule is decorative — the sentence carries the meaning — but it
     has to be visible in both themes to do its one job. */
  border-left: 2px solid var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── Submit-time card ────────────────────────────────────────────────────── */
.pcroute--card {
  margin-top: 16px;
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  animation: pcroute-in 160ms ease-out;
}

/* Entrance is for the two cases where the card STAYS (the loop guard and the
   server fallback). On the normal path it is on screen for a moment before the
   navigation, where the animation is invisible either way. */
@keyframes pcroute-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.pcroute__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.pcroute__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* .cta carries the button look (styles.css) — including color: var(--on-primary),
   which is what keeps the label legible when --primary inverts to white in dark
   mode. Do NOT hardcode a colour here. This rule only tightens the page-wide
   full-width hero button down to an in-card action, and holds the 44px tap
   target that the smaller font would otherwise drop below. */
.pcroute__cta {
  width: auto;
  min-height: 44px;
  margin-top: 14px;
  padding: 12px 20px;
  font-size: 15px;
  text-decoration: none;
}

.pcroute__cta:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.pcroute__going {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .pcroute__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pcroute--card { animation: none; }
}