/* 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 icon and wordmark go a touch smaller to stay clear of the
   edge at 320 px. The wordmark, the tighter gap and the button's narrower
   inline padding also keep "Log in / Sign up" on the logo row at 320 px
   (280 px of row). The button selector is (0,3,1) so it beats the base
   .site-head a.nav-cta rule further down; its label stays 12 px. */
@media (max-width: 400px) {
  .wordmark { font-size: 1.2rem; }
  .wordmark img { width: 60px; height: 60px; margin-right: 8px; border-radius: 13px; }
  .site-head .wrap.with-account { column-gap: 10px; }
  .site-head .with-account a.nav-cta { padding-inline: 7px; }
}
/* With the account button on (.with-account), the wordmark, the menu and the
   button don't fit on one row on a phone. Up to 560 px the button keeps the
   top-right corner beside the wordmark (it follows <nav> in the markup, so
   order moves it up) and the menu takes its own full-width row under them. */
@media (max-width: 560px) {
  .site-head .wrap.with-account { flex-wrap: wrap; row-gap: 10px; }
  .with-account .nav-cta { order: 1; margin-left: auto; }
  .with-account .site-nav { order: 2; margin-left: 0; width: 100%; gap: 12px; }
}
.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); }
/* The account button has 4 px block padding. Giving the menu links the same
   keeps their text on the button's line where they share a row (desktop). */
.with-account .site-nav a { padding-block: 4px; }
/* The one "Log in / Sign up" button (Header.astro). It sits outside <nav>, so
   it carries the menu's type itself. Never shrinks or wraps: its label stays
   on one line at 320 px. */
.site-head a.nav-cta {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--accent);
  color: #03121F;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 6px;
}
.site-head a.nav-cta:hover { background: var(--accent-2); color: #03121F; }

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 (the hero section) or #contact jump lands the target
   below the sticky header, plus any notch inset. Header heights measured with
   the one Log in / Sign up button on (DRO-130, Chromium and WebKit agree):
     above 560 px            93 px  (one row)                     -> 6rem     = 96 px
     401 to 560 px          131 px  (About and Support on row 2)  -> 8.5rem   = 136 px
     320 to 400 px          127 px  (smaller icon and wordmark, same 2 rows) -> 10.75rem = 172 px
   That value is kept on purpose as headroom: if the button wraps (fallback
   font, minimum font size, text zoom) the header is about 165 px again.
   These are sized for LOGIN_ENABLED = true. With it off the phone header is
   93 px again, so the two phone values overshoot (nothing is hidden). If the
   icon, the header padding or the button grows, measure again and raise them. */
h2[id], h3[id], form[id], section[id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 6rem); }
@media (max-width: 560px) {
  h2[id], h3[id], form[id], section[id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 8.5rem); }
}
@media (max-width: 400px) {
  h2[id], h3[id], form[id], section[id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 10.75rem); }
}

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); }

/* Apple's App Store badge in the hero (StoreBadges.astro). Sized explicitly,
   like the wordmark icon, so the global `img { height: auto }` and the .cta
   flex row can't shrink or distort it. */
.store-badge { display: inline-block; flex-shrink: 0; line-height: 0; }
.store-badge img { display: block; width: 144px; height: 48px; max-width: none; }

/* ---------------------------------------------------------------- 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;
}