@import "./theme.css";

/* =============================================================================
   Annot — landningssida.

   Fristående sida. Express serverar den på `/` för den som inte är inloggad;
   appen ligger på `/app`.

   Lagret: den här filen importerar `theme.css` och **inget annat**. Den
   importerar medvetet inte `app.css`, trots att den lånar dess formspråk:
   `app.css` sätter `overflow: hidden` på `body` för att canvasen ska äga
   rullningen, och en landningssida måste kunna rulla. Det som är gemensamt
   (ytor, tryck, fokusring) kommer från `theme.css`, precis som lagerregeln
   i DESIGN.md säger. Reset:en nedan är därför medvetet duplicerad — det är
   billigare än ett beroende åt fel håll.

   Prefix: `lp-` (landing page). Inga klassnamn delas med canvas/comments/share.

   Inga hex, inga rgb, inga utskrivna ms. Färger kommer från
   `var(--color-*)` / `var(--note-*)`, tider från `var(--dur-*)`.
   Loopande animationer skalas ur `--dur-pulse` med `calc()` i stället för
   egna sekundvärden, så att `prefers-reduced-motion` fortfarande nollar dem
   centralt — och stängs dessutom av var för sig längst ned, eftersom en
   animation med noll duration annars hoppar till slutläget.
   ========================================================================== */

/* --------------------------------------------------------------- reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

svg, img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- skal

   Samma två ljusfläckar som inloggningskortet i `app.css`, så att sidan och
   grinden känns som samma produkt utan att dela kod. */

.lp-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  background:
    radial-gradient(900px 520px at 12% -14%,
      color-mix(in oklch, var(--color-accent) 13%, transparent), transparent 62%),
    radial-gradient(680px 460px at 110% 106%,
      color-mix(in oklch, var(--color-success) 9%, transparent), transparent 60%);
}

.lp-wrap {
  width: 100%;
  max-width: var(--container-desktop);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* --------------------------------------------------------------- topprad */

.lp-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: calc(var(--space-4) + var(--safe-t));
  padding-bottom: var(--space-2);
}

.lp-logo {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.lp-grow { flex: 1; }

/* Ikonknapp: 28 px synligt, 44 px träffyta via osynligt ::before.
   Samma tal som i `app.css` — 28 + 8 + 8 = 44, 34 + 5 + 5 = 44. Ändra
   aldrig det ena utan det andra, då krymper träffytan tyst. */
.lp-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.lp-icon::before { content: ""; position: absolute; inset: -8px; }

/* Språkknappen är samma ikonknapp, men innehållet är två bokstäver i stället
   för en glyf. `SV` och `EN` spräcker den 28 px breda rutan i brödtextens
   grad, så koden sätts i mikrograden med versalspärr — samma behandling som
   .lp-eyebrow. Rutan, radien och 44 px-träffytan är oförändrade, så knappen
   står kvar i linje med temaknappen. */
#lpLang {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-indent: var(--tracking-caps);   /* spärren hänger annars ut åt höger */
}
.lp-icon:hover { background: var(--color-surface-2); color: var(--color-ink); }
.lp-icon:active { transform: scale(0.94); }

/* --------------------------------------------------------------- innehåll

   Mobil först: en kolumn, hero → figur → punkter. Två kolumner först vid
   820 px, samma brytpunkt som skalet använder för panelen. */

.lp-main {
  flex: 1;
  display: grid;
  gap: var(--space-8);
  align-content: start;
  padding-top: var(--space-4);
  padding-bottom: var(--space-12);
}

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

.lp-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-faint);
}

.lp-title {
  margin: 0;
  max-width: 18ch;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.lp-lead {
  margin: var(--space-4) 0 0;
  max-width: 44ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------------------ cta

   Här får knapparna vara 44 px på riktigt. `app.css` löser träffytan med ett
   pseudoelement för att sidhuvudet inte rymmer fem knappar á 44 px — den
   trängseln finns inte på en landningssida, och en primärknapp som ser ut som
   den träffas är bättre än en som är mindre än sin träffyta. */

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2-5) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.lp-btn:active { transform: scale(0.98); }

.lp-btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-sm);
}
.lp-btn-primary:hover { filter: brightness(1.08); }

.lp-btn-ghost {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-ink-muted);
}
.lp-btn-ghost:hover { color: var(--color-ink); border-color: var(--color-line-2); }

.lp-hint {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--color-faint);
}

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

.lp-points {
  display: grid;
  gap: var(--space-2-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.lp-point:hover { border-color: var(--color-line-2); box-shadow: var(--shadow-sm); }

/* Prickens färg säger vilken anteckningstyp punkten handlar om — samma
   semantik som pinnarna i canvasen, hämtad ur samma tokens. */
.lp-dot {
  width: 10px;
  height: 10px;
  margin-top: var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-faint);
}
.lp-point[data-note="issue"]       .lp-dot { background: var(--note-issue); }
.lp-point[data-note="opportunity"] .lp-dot { background: var(--note-opportunity); }
.lp-point[data-note="question"]    .lp-dot { background: var(--note-question); }
.lp-point[data-note="heuristic"]   .lp-dot { background: var(--note-heuristic); }

/* Selektorerna är avsiktligt smala. Ett `.lp-point span` hade träffat både
   pricken och omslaget, och då hade rubriken ärvt den dämpade textfärgen. */
.lp-point b {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.lp-point b + span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
}

/* ---------------------------------------------------------------- figur

   Miniatyren är ritad, inte fotograferad. Ingen kunddata, inga riktiga
   skärmdumpar — noderna innehåller skelettstreck som visar *formen* på en
   skärmdump, inte någons skärm. Sidan kan hamna publikt. */

.lp-figure { margin: 0; }

.lp-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--canvas-void);
  box-shadow: var(--shadow-lg);
}

.lp-svg { width: 100%; height: auto; }

.lp-caption {
  margin: var(--space-2-5) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-faint);
}

/* --------------------------------------------------- figurens delar (SVG)

   Allt färgas här, inte med fill-attribut i markupen, så att figuren följer
   temat och paletten som allt annat. */

.lp-void      { fill: var(--canvas-void); }
.lp-grid      { fill: var(--canvas-grid); }

.lp-node      { fill: var(--color-surface); stroke: var(--color-line); stroke-width: 1; }
.lp-node-bar  { fill: var(--color-surface-2); }
.lp-node-cap  { fill: var(--color-line-2); }
.lp-skel      { fill: var(--color-line); }
.lp-skel-2    { fill: var(--color-line-2); }

.lp-wire {
  fill: none;
  stroke: var(--color-line-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
}
.lp-arrow { fill: var(--color-line-2); }

.lp-pin       { stroke: var(--color-surface); stroke-width: 2; }
.lp-issue       { fill: var(--note-issue); }
.lp-opportunity { fill: var(--note-opportunity); }
.lp-question    { fill: var(--note-question); }

.lp-halo {
  fill: none;
  stroke-width: 2;
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
}
.lp-halo.lp-issue       { stroke: var(--note-issue);       fill: none; }
.lp-halo.lp-opportunity { stroke: var(--note-opportunity); fill: none; }
.lp-halo.lp-question    { stroke: var(--note-question);    fill: none; }

.lp-card       { fill: var(--color-surface); stroke: var(--color-line); stroke-width: 1; }
.lp-card-line  { fill: var(--color-line-2); }
.lp-card-chip  { fill: var(--note-issue); }

.lp-cursor     { fill: var(--color-accent); }
.lp-cursor-tag { fill: var(--color-accent); }
.lp-cursor-ink { fill: var(--color-accent-ink); font-size: 7px; font-weight: var(--weight-semibold); }

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

   Tre saker rör sig, långsamt: pinnarnas halo pulserar i tur och ordning,
   kopplingarnas streck vandrar, och en gästpekare glider över ytan. Allt
   skalas ur --dur-pulse, som theme.css nollar under prefers-reduced-motion.

   Aldrig `linear` — även en loop får en kurva, det är skillnaden mellan
   "något rör sig" och "en GIF snurrar". */

.lp-halo {
  animation: lp-halo calc(var(--dur-pulse) * 2.5) var(--ease-out) infinite;
}
.lp-halo-2 { animation-delay: calc(var(--dur-pulse) * 0.7); }
.lp-halo-3 { animation-delay: calc(var(--dur-pulse) * 1.4); }

@keyframes lp-halo {
  0%   { transform: scale(0.55); opacity: 0; }
  18%  { opacity: 0.55; }
  100% { transform: scale(2.1);  opacity: 0; }
}

.lp-wire {
  animation: lp-flow calc(var(--dur-pulse) * 3) var(--ease-in-out) infinite;
}
@keyframes lp-flow {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}

.lp-ghost {
  animation: lp-drift calc(var(--dur-pulse) * 4) var(--ease-in-out) infinite alternate;
}
@keyframes lp-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-22px, -14px); }
}

/* Noll duration räcker inte: en animation som är klar direkt hoppar till
   sitt slutläge. Varje loop måste stängas av var för sig. */
@media (prefers-reduced-motion: reduce) {
  .lp-halo, .lp-wire, .lp-ghost { animation: none; }
  .lp-halo { opacity: 0.3; }
  .lp-btn:active, .lp-icon:active { transform: none; }
  .lp-point:hover { box-shadow: none; }
}

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

.lp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: calc(var(--space-6) + var(--safe-b));
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-faint);
}
.lp-foot b { font-weight: var(--weight-medium); color: var(--color-ink-muted); }

/* --------------------------------------------------------- större skärmar */

@media (min-width: 820px) {
  .lp-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "hero fig"
      "pts  fig";
    gap: var(--space-8);
    padding-top: var(--space-8);
  }
  .lp-hero   { grid-area: hero; }
  .lp-points { grid-area: pts; }
  .lp-figure { grid-area: fig; align-self: start; }

  .lp-title { font-size: var(--text-4xl); }
}

@media (min-width: 1100px) {
  .lp-wrap { padding-inline: var(--space-8); }
  .lp-main { gap: var(--space-10) var(--space-12); }
  .lp-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pekskärm: samma tummvänlighet som resten av appen. */
@media (pointer: coarse) {
  .lp-icon { width: 34px; height: 34px; }
  .lp-icon::before { inset: -5px; }
  .lp-btn { min-height: 48px; }
}