/* fc-tracker.com v2 – what the live site needs beyond the mockup CSS (tokens.css, components.css, site.css are the
   approved design/d-draft-2 files, copied unchanged apart from fonts and image paths): the header's menu and
   languages, the footer's theme switch, links, focus. Tokens only. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.site { min-height: 100vh; }
.site a:not(.btn) { color: inherit; } .site a { text-decoration: none; }
.site main p a:not(.btn):not(.chip), .site .prose li a, .site dd a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.site :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--active-bg); color: var(--active-fg); }
.skip:focus { left: 16px; }

/* ------------------------------------------------------------ header */
.sh-more { position: relative; }
.sh-more > summary { list-style: none; cursor: pointer; }
.sh-more > summary::-webkit-details-marker { display: none; }
.sh-more[open] > summary i:first-child { transform: translateY(4px) rotate(45deg); }
.sh-more[open] > summary i:last-child { transform: translateY(-4px) rotate(-45deg); }
.sh-menu i { transition: transform var(--t-fast) var(--ease-out); }
.sh-pop { --cut: var(--cut-m); position: absolute; left: -10px; top: calc(100% + 18px); z-index: 60; width: min(340px, calc(100vw - 32px)); padding: 10px; display: grid; gap: 10px; background: var(--surface-dense); }
:root[data-theme="light"] .sh-pop, :root[data-theme="dark"] .sh-pop { background: var(--surface); filter: var(--lift-2); }
.sh-pop-links { display: grid; }
.sh-pop-links a, .sh-pop-langs a { min-height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-2); }
.sh-pop-links a:hover, .sh-pop-links a.on, .sh-pop-langs a:hover, .sh-pop-langs a[aria-current] { color: var(--text); background: var(--sel); }
.sh-pop-links a.on { box-shadow: inset 3px 0 0 var(--text); }
.sh-pop-langs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.sh-pop-langs a { justify-content: center; padding: 0; }
.sh-pop-langs a span { display: none; }
.sh-acts { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sh-login { font-weight: 600; color: var(--text-2); white-space: nowrap; }
.sh-login:hover { color: var(--text); }
.sh-acts .btn svg { width: 14px; height: 14px; }
@media (max-width: 1080px) { .sh-nav { display: none; } }
@media (max-width: 420px) { .sh-bar { gap: 10px; } .sh-bar .brand span { font-size: 16px; } .sh-acts { gap: 10px; } .sh-acts .btn { padding: 0 10px; } }

/* ------------------------------------------------------------ footer */
.sf { margin-top: 96px; padding: 40px 0 48px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 14px; }
.sf-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; align-items: center; }
.sf-brand { gap: 10px; flex-wrap: wrap; }
.sf-brand b { color: var(--text); }
.sf-links { gap: 4px 20px; }
.sf a:hover { color: var(--text); }
.sf-fine { margin-top: 24px; align-items: flex-start; }
.sf-fine p { margin: 0; max-width: 64ch; line-height: 1.5; }
.sf-set { gap: 16px 24px; align-items: center; }
.sf-langs { gap: 4px 14px; flex-wrap: wrap; }
.sf-langs a[aria-current] { color: var(--text); }
.sf-theme { display: inline-flex; gap: 4px; padding: 0; background: none; height: auto; }
.sf-theme button { --cut: var(--cut-s); height: 32px; padding: 0 12px; border: 0; background: var(--fill); color: var(--text-2); font: 600 13px/1 var(--f-body); cursor: pointer; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.sf-theme button:hover { color: var(--text); background: var(--fill-hover); }
.sf-theme button[aria-pressed="true"] { background: var(--active-bg); color: var(--active-fg); }
@media (max-width: 720px) { .sf { margin-top: 64px; } .sf-theme button { height: 40px; } .sf-langs a { min-height: 40px; display: inline-flex; align-items: center; } }

/* ------------------------------------------------------------ phones: no horizontal scroll */
@media (max-width: 860px) { .wrapw { padding: 0 16px; } }
html, body.site { overflow-x: clip; }

/* tap targets ≥ 40 px on phones (site header rule: every control 40 px) */
@media (max-width: 460px) { .site .sh-menu { width: 40px; } }
@media (max-width: 1023px) {
  .sf-links a, .sf-langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  .sf-theme button { height: 40px; }
  .dl-ext { min-height: 40px; box-sizing: border-box; }
  .dl-ext-more a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* every size (BRAND-MIGRATION rule 10): text ≥ 12 px everywhere (eyebrows, tags, chips, keycaps, table heads),
   40 px controls on touch widths, the bar keeps "Log in | Download →" whole at 360 */
.site .eyebrow, .site p.eyebrow, .site .tag, .site .chip, .site .key b, .site th { font-size: 12px; }
@media (max-width: 1023px) {
  .site .sh-bar .brand { min-height: 40px; }
  .site a.t-15.strong, .site .h9-row a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (max-width: 380px) { .site .sh-bar .brand > span:not(.mark) { display: none; } }
/* longer words (Anmelden · Herunterladen, Iniciar sesión …): the wordmark gives way first, the mark stays */
@media (max-width: 420px) { html:not([lang="en"]) .site .sh-bar .brand > span:not(.mark) { display: none; } }
/* the two .zip links under "Add to Chrome": their own row, never wrapping into each other (long translations) */
.site .dl-ext-more { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 4px; line-height: 1.4; }

/* production review WEB-7: the name never breaks at its hyphen; a page that ends in a padded section doesn't add the
   footer's own top margin on top of it (no 160 px hole under "Get FC-Tracker") */
.nobr { white-space: nowrap; }
main:has(> section.sec-site:last-child) + .sf { margin-top: 0; }
/* the bar's logo alone (wordmark hidden on phones) is still a 40 px target */
.site .sh-bar .brand { min-width: 40px; justify-content: center; }
/* the theme switch also sits in the header menu (user 2026-11-05: "only in the footer?") */
.sh-pop-theme { display: flex; padding-top: 10px; border-top: 1px solid var(--line); }
.sh-pop-theme button { flex: 1; }

/* the header's tool and account (2026-11-05): FC-Tracker Web ↗ is its own tool (own tab), right with the account */
.sh-tool { height: 40px; white-space: nowrap; gap: 8px; }
.sh .ext { flex: none; opacity: .7; }
.sh-pop-links .ext { margin-left: auto; }
.sh-pop-rule { display: block; height: 1px; margin: 6px 0; background: var(--line); }
@media (max-width: 1080px) { .sh-tool { display: none; } }

/* the account link (2026-11-05: "Log in looks naked between the filled boxes"): a filled quiet button with the person icon */
.sh-acts .sh-login { --cut: var(--cut-s); height: 40px; padding: 0 14px; gap: 8px; background: var(--fill); color: var(--text); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.sh-acts .sh-login:hover { background: var(--fill-hover); color: var(--text); }
.sh-acts .sh-login .sh-me { flex: none; opacity: .8; }
@media (max-width: 460px) { .sh-acts .sh-login { padding: 0 10px; } }