/* Sk8tics — sk8tics.com
   The palette and the typeface pairing are lifted from the app's own
   lib/theme.ts rather than invented, so the site and the product read as one
   thing. Committed dark: the app is dark and a white marketing page in front
   of it would be a different product. */

:root {
  --ground:   #0E1420;
  --surface:  #18212F;
  --raised:   #212C3D;
  --rule:     #2C3849;
  --text:     #E8ECF1;
  --muted:    #8494AB;
  --dim:      #5D6C81;
  --accent:   #0A8CF5;
  --accent-2: #5CC8FF;
  --good:     #35C39E;
  --warn:     #E8A03D;
  --down:     #D96A7E;

  --ui:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--accent); color: #03121F; }

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

/* ---------------------------------------------------------------- shell */

.wrap {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding-inline: 20px;
}

.site-head {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;
}

/* The real app icon (a byte copy of assets/icon.png) beside the wordmark.
   Sized explicitly so the global `img { height: auto }` can't shrink it. */
.wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark img {
  display: block;
  width: 64px;
  height: 64px;
  max-width: none;
  margin-right: 12px;
  border-radius: 14px;
}
/* On a phone the 64 px icon, the wordmark and both menu links share one
   nowrap row; a touch smaller keeps it clear of the edge at 320 px. */
@media (max-width: 400px) {
  .wordmark { font-size: 1.35rem; }
  .wordmark img { width: 60px; height: 60px; margin-right: 10px; border-radius: 13px; }
}
.wordmark span { color: var(--accent-2); }

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.site-nav a {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--text); }

main { padding-block: 44px 8px; }

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 64px;
  padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px));
  color: var(--muted);
  font-size: 0.8rem;
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--text); }
.site-foot .wrap { gap: 8px 10px; }
.site-foot .sep { color: var(--dim); }

/* ---------------------------------------------------------------- type */

h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.02em; }

h1 {
  font-size: clamp(2rem, 6.4vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
}

h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 2.6rem;
  margin-bottom: 0.7rem;
}
/* An #about or #contact jump lands the heading below the sticky header
   (about 93 px tall with the 64 px icon, plus any notch inset). If the icon or
   the header padding grows, measure the header again and raise this. */
h2[id], form[id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 6rem); }

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.8rem;
  margin-bottom: 0.35rem;
}

p, li { max-width: var(--measure); }
p { margin: 0 0 1rem; }

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

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 12px;
}

.lede {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: var(--measure);
  margin-top: 18px;
}

.stamp {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
  margin-top: 10px;
}

ul.plain { padding-left: 1.1rem; margin: 0 0 1rem; }
ul.plain li { margin-bottom: 0.4rem; }

/* The app marks a row with a coloured left rule rather than boxing it. Reused
   here as the one recurring structural device, so a section of the site and a
   row of the app are recognisably the same family. */
.note {
  border-left: 3px solid var(--rule);
  padding: 2px 0 2px 16px;
  margin: 1.4rem 0;
  color: var(--muted);
}
.note.accent { border-left-color: var(--accent); }
.note.warn   { border-left-color: var(--warn); }
.note strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------- protocol specimen */

.sheet {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 18px 16px;
  margin-top: 30px;
  font-family: var(--mono);
  overflow-x: auto;
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.el {
  border-left: 3px solid var(--warn);
  padding-left: 12px;
}

.el-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.el-pos    { color: var(--dim); font-size: 0.78rem; }
.el-was    { color: var(--muted); text-decoration: line-through; }
.el-arrow  { color: var(--dim); }
.el-now    { color: var(--warn); font-weight: 500; }
.el-spacer { flex: 1; min-width: 6px; }
.el-base   { color: var(--muted); font-size: 0.85rem; }
.el-goe    { color: var(--down); font-size: 0.85rem; }
.el-score  { color: var(--text); font-weight: 500; }

.judges {
  display: flex;
  gap: 9px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--dim);
}
.judges .lo { color: var(--down); }
.judges .hi { color: var(--good); }

.coach-note {
  font-family: var(--ui);
  font-size: 0.88rem;
  color: var(--text);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.coach-note .who {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--dim);
  display: block;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------- blocks */

.feature {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-top: 26px;
}
.feature h3 { margin-top: 0; }
.feature p { margin-bottom: 0; color: var(--muted); }
.feature p + p { margin-top: 0.6rem; }

/* Two app screens side by side, framed like the app's own cards. They stay
   two-up down to 320 px, where each is still ~140 px wide. */
.shots { margin: 34px 0 0; }
.shots-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  max-width: 30rem;
}
.shots img {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.shots figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 26px;
}
.grid p { max-width: none; }

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  align-items: center;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: #03121F;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 8px;
}
.btn:hover { background: var(--accent-2); }

.btn-quiet {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule);
}
.btn-quiet:hover { background: var(--surface); color: var(--text); }

.pending {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
}

/* ---------------------------------------------------------------- contact */

/* The contact form (src/components/ContactForm.astro, on / and /support):
   first and last name, an email, a message, a Send button. Its heading sits
   inside the form so a #contact jump lands on the heading. */
.contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: var(--measure);
  margin-top: 1rem;
}
.contact label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 8px;
}
.contact input,
.contact textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--ui);
  font-size: 1rem;   /* 16px keeps iOS from zooming on focus */
  line-height: 1.5;
}
.contact textarea { resize: vertical; min-height: 9rem; }
.contact input::placeholder { color: var(--dim); }
.contact input:focus-visible,
.contact textarea:focus-visible { border-color: var(--accent-2); }
.contact .btn {
  align-self: flex-start;
  margin-top: 12px;
  border: 0;
  cursor: pointer;
}
.contact .btn:disabled { opacity: 0.6; cursor: default; }
.contact-status { color: var(--muted); min-height: 1.65em; margin: 4px 0 0; }

/* Honeypot: a field people never see or reach, so only a script fills it. */
.hp { display: none; }

/* ---------------------------------------------------------------- tables */

.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 1rem 0 1.4rem;
}
.data th, .data td {
  text-align: left;
  vertical-align: top;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule);
}
.data th {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}
.data td { color: var(--muted); }
.data td:first-child { color: var(--text); white-space: nowrap; padding-right: 22px; }

.scroll-x { overflow-x: auto; }

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

/* ================================================================ DRO-102
   Additions for the Astro rebuild. They use the tokens above and add none, so
   scripts/check-dist.mjs can compare :root with scripts/source-tokens.json. */

/* ---------------------------------------------------------------- hero */

/* The poster (or, with no poster, the plain ground colour) is what most
   visitors see first; the video only loads when the hero script decides it
   should (src/lib/hero-video.mjs). */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  pointer-events: none;
}
/* Keeps the headline readable over any frame of the video. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--ground) 100%);
  pointer-events: none;
}
.hero-body {
  position: relative;
  z-index: 1;
  padding-block: 64px 48px;
}
main.home { padding-top: 0; }

/* ---------------------------------------------------------------- features */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 16px;
  margin-top: 1rem;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px;
  min-width: 0;
}
.feature-card.wide { grid-column: 1 / -1; }
.feature-card h3 { margin-top: 0; }
.feature-card p { color: var(--muted); max-width: none; }
.feature-card p:last-child { margin-bottom: 0; }
.feature-card .sheet { background: var(--raised); margin-top: 14px; }

/* ---------------------------------------------------------------- phone frames */

.phone {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 26px;
  padding: 8px;
}
.shots .phone img {
  border: 0;
  border-radius: 19px;
}