/* TinePlayer's site. One page, no framework, no build step.
   Colors are checked against WCAG AA in both schemes. */

:root {
  --bg: #ffffff;
  --fg: #1a1d21;
  --muted: #4a5058;
  --rule: #d7dbe0;
  --accent: #0b5fbf;
  --accent-fg: #ffffff;
  --card: #f4f6f8;
  --focus: #0b5fbf;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --fg: #e8eaed;
    --muted: #a8b0b9;
    --rule: #2c3238;
    --accent: #4d9bff;
    --accent-fg: #0b1016;
    --card: #1c2126;
    --focus: #7fb6ff;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Visible only once focused, which is what makes it useful to a keyboard
   user and invisible to everyone else. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--accent-fg);
  z-index: 10;
}
.skip:focus { left: 0; }

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

/* The download buttons use the accent as their background, and the focus
   color is the same accent, so an outline drawn over them would be invisible.
   The 2px offset happens to save it by putting the ring on the card behind,
   which is too fragile to rely on. A white ring between button and outline
   guarantees a visible edge whatever it sits on. */
.files a.primary:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bg);
}

.banner {
  text-align: center;
  padding: 3rem 1.25rem 1rem;
}
.banner img { display: block; margin: 0 auto 0.5rem; }
h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: -0.02em;
}
.tagline {
  margin: 0.35rem 0 0;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  color: var(--muted);
}

main { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 1rem; }

section { margin: 3rem 0; }
section:first-child { margin-top: 2rem; }

h2 {
  font-size: clamp(1.35rem, 4vw, 1.6rem);
  line-height: 1.25;
  margin: 0 0 0.75rem;
}
h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}

p { margin: 0 0 1rem; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

figure {
  margin: 1.75rem 0 0;
}
img { max-width: 100%; height: auto; }
figure img {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
figcaption {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Downloads ------------------------------------------------------------- */

.download {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem;
}
.download h3:first-of-type { margin-top: 0.5rem; }

.version { color: var(--muted); margin-bottom: 0.5rem; }

.files { list-style: none; margin: 0; padding: 0; }
.files li { margin: 0 0 1.25rem; }

.files a {
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
}
/* The one most people want, made obvious without relying on color alone:
   it is also the largest text and carries a border. */
.files a.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  text-decoration: none;
  font-size: 1.05rem;
}
.files a.primary:hover { text-decoration: underline; }
.kind { font-weight: 400; }

.note {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 34rem;
}

.all-files { margin: 1.5rem 0 0; }

pre {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375em;
}

ul.plain { padding-left: 1.25rem; }
ul.plain li { margin-bottom: 0.6rem; }

.footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 1.5rem 1.25rem 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}
.footer p { max-width: 46rem; margin: 0 auto; }

/* A list rather than links separated by punctuation, which some screen
   readers announce and which gives the keyboard nothing to structure on. */
.footer-links {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
}
.footer-links li { margin: 0; }

.copyright { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}