/* Hallmark · genre: editorial · macrostructure: Narrative Workflow
 * theme: Domarplugg (projektets egen palett, bevarad) · enrichment: Tier A ren CSS (tekningscirkel)
 * nav: befintlig topbar (bevarad chrome) · footer: Ft2 inline
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * contrast: pass (40-41) · honest: pass (46, siffrorna läses live ur /api/state)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobil: pass (34, 49, 50-57) · slop: 55/58
 * medvetna avsteg: gate 1 (systemtypsnitt som display - appen får inte hämta
 *   externa resurser; monon är andra registret), gate 42 (appens befintliga
 *   topbar behålls oförändrad), gate 34 (ingen global overflow-x-regel, för att
 *   inte påverka övriga vyer - kontrollerat i stället vid 320-1920 px)
 *
 * Förstasidan. Ligger i egen fil för att style.css ska förbli appens stilmall -
 * inget här rör de vyer man ser efter att man klickat sig in.
 */

:root {
  /* Accenten är läsbar mot mörk bakgrund men bara 2,3:1 mot den ljusa. Smått
     accentfärgat text behöver därför en egen, mörkare ton i ljust läge. */
  --accent-text: var(--accent);

  --start-bredd: 1040px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --text-display: clamp(38px, 7.2vw, 68px);
  --text-steg: clamp(21px, 2.6vw, 28px);
  --text-avsnitt: clamp(19px, 2.2vw, 24px);

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease-ut: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-entre: 460ms;
}

@media (prefers-color-scheme: light) {
  :root { --accent-text: #1266c4; }
}

/* Förstasidan får mer bredd än appvyerna, som är satta för läsning i mobil. */
#vy.start-vy {
  max-width: var(--start-bredd);
  padding-bottom: var(--sp-12);
}

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

/* Tyngre botten- än toppmarginal: heron ska luta in i nästa avsnitt, inte
   sväva ovanför det. */
.start-hero {
  position: relative;
  overflow: clip;
  padding: var(--sp-12) 0 var(--sp-16);
  border-bottom: 2px solid var(--kant);
}

/* Bredden är satt i px, inte ch: ch räknas mot elementets egen 16px-text, inte
   mot rubrikens 68px, så ett ch-mått hade klämt ihop rubriken till fyra rader. */
.start-hero-inner {
  position: relative;
  z-index: 1;
  max-width: min(100%, 640px);
}

/* Tekningscirkeln: rinkens markering, ritad med kanter - ingen bild, inget
   som behöver laddas ned. Ren dekor, därför aria-hidden i markupen. */
.rink {
  position: absolute;
  top: -84px;
  right: -132px;
  width: min(520px, 52vw);
  aspect-ratio: 1;
  border: 1px solid var(--kant);
  border-radius: 50%;
  pointer-events: none;
}

.rink::before,
.rink::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.rink::before {
  inset: 33%;
  border: 1px solid var(--kant);
}

.rink::after {
  inset: calc(50% - 5px);
  background: var(--accent);
  opacity: 0.55;
}

/* I mellanbredderna hinner rubriken fram till cirkeln. Då får den krympa och
   dras ut mot kanten, så det bara är en båge kvar bredvid texten. */
@media (max-width: 900px) {
  .rink {
    width: min(360px, 46vw);
    top: -112px;
    right: -152px;
  }
}

.accent-regel {
  display: block;
  width: 52px;
  height: 3px;
  background: var(--accent);
  margin-bottom: var(--sp-6);
}

.start h1 {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ingress {
  font-size: 18px;
  line-height: 1.6;
  color: var(--svag);
  max-width: 46ch;
  margin: var(--sp-6) 0 0;
}

.start-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.start-knappar button {
  padding: var(--sp-3) var(--sp-6);
  white-space: nowrap;
}

.kalla-rad {
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svag);
  font-variant-numeric: tabular-nums;
  margin: var(--sp-8) 0 0;
}

/* ----------------------------------------------------------------- steg */

.start-avsnitt {
  padding: var(--sp-20) 0 var(--sp-4);
}

/* Andra avsnittet sitter tätare än det första - lika luft överallt läser sig
   som en mall snarare än som en rytm. */
.start-avsnitt + .start-avsnitt {
  padding-top: var(--sp-16);
}

.start h2 {
  font-size: var(--text-avsnitt);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.avsnitt-under {
  color: var(--svag);
  font-size: 15px;
  max-width: 54ch;
  margin: 0 0 var(--sp-12);
}

.steg {
  padding: var(--sp-8) 0;
  border-top: 2px solid var(--kant);
}

.steg:first-of-type { border-top: 0; padding-top: 0; }

.steg-nr {
  display: block;
  font: 700 13px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-4);
}

.start .steg h3 {
  font-size: var(--text-steg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
  margin: 0 0 var(--sp-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

.steg p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--svag);
  max-width: 58ch;
}

/* ---------------------------------------------------------------- punkter */

.start-punkt {
  border-top: 1px solid var(--kant);
  padding: var(--sp-6) 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--svag);
  max-width: 66ch;
}

.start-punkt b {
  color: var(--text);
  font-weight: 700;
}

/* ------------------------------------------------------------- avslutning */

.start-slut {
  margin-top: var(--sp-20);
  padding: var(--sp-12) 0;
  border-top: 2px solid var(--kant);
  border-bottom: 1px solid var(--kant);
}

.start-slut p {
  font-size: var(--text-avsnitt);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-6);
  max-width: 24ch;
  line-height: 1.2;
}

.start-slut button {
  padding: var(--sp-4) var(--sp-6);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ fot */

.start-fot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-6) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--svag);
}

/* ------------------------------------------------------------------ rörelse */

/* En enda orkestrerad entré, i heron. Inget som utlöses av scroll - resten av
   sidan ska bara vara på plats när man kommer dit. */
@media (prefers-reduced-motion: no-preference) {
  .start-vy .entre {
    animation: start-in var(--dur-entre) var(--ease-ut) both;
  }

  .start-vy .entre:nth-child(2) { animation-delay: 50ms; }
  .start-vy .entre:nth-child(3) { animation-delay: 100ms; }
  .start-vy .entre:nth-child(4) { animation-delay: 150ms; }
  .start-vy .entre:nth-child(5) { animation-delay: 200ms; }
}

@keyframes start-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* ------------------------------------------------------------------ mobil */

@media (max-width: 620px) {
  .start-hero {
    padding: var(--sp-6) 0 var(--sp-12);
  }

  /* Cirkeln får inte plats bredvid rubriken på en telefon - den skulle lägga
     sig bakom texten i stället för bredvid den. */
  .rink { display: none; }

  .start-hero-inner { max-width: none; }

  .ingress { font-size: 16px; }

  .start-knappar { display: grid; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .start-knappar button { min-height: 48px; width: 100%; }

  .start-avsnitt { padding: var(--sp-12) 0 var(--sp-2); }
  .start-avsnitt + .start-avsnitt { padding-top: var(--sp-8); }
  .avsnitt-under { margin-bottom: var(--sp-8); }
  .steg { padding: var(--sp-6) 0; }
  .start-slut { margin-top: var(--sp-12); padding: var(--sp-8) 0; }
  .start-slut button { width: 100%; min-height: 48px; }
}

/* Trainyze-inspirerad landningssida: samma djup, ljus och precision som
   appskalet, men med rinklinjer som ger Domarplugg en egen identitet. */
#vy.start-vy { max-width: 1120px; padding-top: 0; }

.start-hero {
  min-height: min(710px, calc(100dvh - 68px));
  display: flex;
  align-items: center;
  padding: 76px 0 92px;
  border-bottom: 0;
}

.start-hero::before {
  content: 'DOMARUTBILDNING · 2026/2027';
  position: absolute;
  top: 52px;
  left: 0;
  padding: 6px 10px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .11em;
}

.start-hero-inner { max-width: min(100%, 720px); }
.accent-regel { width: 64px; height: 4px; margin-bottom: 28px; border-radius: 99px; box-shadow: 0 0 22px var(--accent); }
.start h1 { font-size: clamp(46px, 7.4vw, 82px); font-weight: 800; line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.ingress { max-width: 53ch; margin-top: 28px; color: var(--svag); font-size: clamp(17px, 2vw, 20px); }
.start-knappar { margin-top: 34px; }
.start-knappar button { min-height: 52px; padding: 13px 23px; }

.rink {
  top: 50%;
  right: -115px;
  width: min(600px, 54vw);
  translate: 0 -50%;
  border: 2px solid var(--kant);
  opacity: .85;
  filter: drop-shadow(0 0 55px var(--accent-dim));
}
.rink::before { border: 2px solid var(--kant); }
.rink::after { inset: calc(50% - 6px); box-shadow: 0 0 40px 12px var(--accent-dim); }

.start-avsnitt {
  margin: 0 -28px;
  padding: 68px 28px 28px;
}
.start-avsnitt + .start-avsnitt { padding-top: 62px; }
.start h2 { font-size: clamp(25px, 3.2vw, 35px); font-weight: 800; }
.avsnitt-under { margin-bottom: 34px; }

.steg {
  display: grid;
  grid-template-columns: 150px minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: start;
  gap: 26px;
  padding: 30px 0;
  border-top: 1px solid var(--kant);
}
.steg:first-of-type { border-top: 1px solid var(--kant); padding-top: 30px; }
.steg-nr { margin: 8px 0 0; color: var(--accent); }
.start .steg h3 { margin: 0; font-size: clamp(20px, 2.6vw, 28px); }
.steg p { font-size: 15px; }

.start-punkt {
  max-width: none;
  padding: 26px 24px 26px 58px;
  position: relative;
  border: 1px solid var(--kant);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--yta);
  box-shadow: var(--skugga);
}
.start-punkt + .start-punkt { margin-top: 10px; }
.start-punkt::before {
  content: '✓';
  position: absolute;
  left: 20px;
  top: 26px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--gron);
  background: color-mix(in srgb, var(--gron) 12%, transparent);
  font-size: 13px;
  font-weight: 900;
}
.start-slut { margin-top: 80px; padding: 48px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--kant)); border-radius: 20px; background: radial-gradient(520px 180px at 85% 0, var(--accent-dim), transparent 72%), var(--yta); box-shadow: var(--skugga-lyft); }
.start-slut p { font-size: clamp(25px, 4vw, 38px); }
.start-fot { padding: 32px 0 8px; justify-content: space-between; }

@media (max-width: 800px) {
  .start-hero { min-height: auto; padding: 88px 0 64px; }
  .start-hero::before { top: 30px; }
  .rink { display: none; }
  .steg { grid-template-columns: 96px 1fr; }
  .steg p { grid-column: 2; }
}

@media (max-width: 620px) {
  #vy.start-vy { padding-top: 0; }
  .start-hero { padding: 78px 0 48px; }
  .start-hero::before { top: 24px; }
  .start h1 { font-size: clamp(42px, 13.5vw, 58px); }
  .accent-regel { margin-bottom: 22px; }
  .start-knappar { grid-auto-flow: row; margin-top: 28px; }
  .start-avsnitt, .start-avsnitt + .start-avsnitt { margin: 0; padding: 48px 0 8px; }
  .steg, .steg:first-of-type { display: block; padding: 25px 0; }
  .steg-nr { margin: 0 0 13px; }
  .start .steg h3 { margin-bottom: 10px; }
  .start-punkt { padding: 22px 18px 22px 54px; }
  .start-punkt::before { left: 17px; top: 22px; }
  .start-slut { margin-top: 52px; padding: 28px 22px; }
  .start-fot { padding-bottom: 14px; }
}