/* ================================================================================
   forre_pulse — GÄSTSIDAN ("Beviset")
   ================================================================================
   ÄGARE AV DEN HÄR YTAN. Ingenting här hör hemma i forre_pulse.css — den är delad
   och har trunkerats en gång vid programmatisk write (BRAIN.md §0 punkt 7).

   VAR LIGGER VAD
     themes/forre_pulse/css/pulse-landing.css          ← DU ÄR HÄR
     themes/forre_pulse/views/pages/landing/index.php  Markupen. Länkar in filen.
     app/Controllers/LandingController.php             Datat.

   REGLER SOM GÄLLER HÄR
     · Bara var(--x) ur forre_pulse.css. Ingen hårdkodad hex, ingen egen färg.
     · INGA lodräta färgade linjer (border-left/right som accent) — .clinerules
       02-ui-facit §0.5. Ytan tonas i stället.
     · Radien är var(--r) 6px / var(--r-sm) 4px. Avatarer 50%.
     · Sidbredd = var(--shell-w), och wrappern behöver width:100% eftersom den är
       flex-item i .pulse-shell (BRAIN.md §0 punkt 10).
     · Vattenstämpeln ligger som MASK inuti märket, aldrig som gradient på ytan
       (Kentas order 2026-08-28).
   ================================================================================ */

.lnd-shell{width:100%;max-width:var(--shell-w);margin:0 auto;padding:14px 14px 34px;
  display:flex;flex-direction:column;gap:12px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.lnd-ic{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.13em}

/* ── HJÄLTEN ─────────────────────────────────────────────────────────────── */
.lnd-hero{position:relative;overflow:hidden;padding:24px 22px 21px}
.lnd-hero-in{position:relative}

/* VATTENSTÄMPELN. Formen är F-ringen (en enda masklager — funkar överallt),
   och toningen ligger i märkets EGEN fyllning: bakgrunden är gradienten, masken
   klipper den till märket. Ytan under får därför aldrig någon gradient, vilket
   är exakt vad Kenta bad om 2026-08-28: "toningen ska ligga inuti märket".
   Masterbanan, samma fil som navbaren och låset färgar. */
.lnd-wm{position:absolute;top:-34px;right:-46px;width:240px;height:240px;pointer-events:none;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent) 26%,transparent 84%);
  opacity:.13;
  -webkit-mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") center/contain no-repeat;
          mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") center/contain no-repeat}
[data-theme="dark"] .lnd-wm{opacity:.17}

.lnd-lock{margin-bottom:10px}
.lnd-h1{font-size:27px;font-weight:900;letter-spacing:-.02em;line-height:1.14;margin:0 0 6px;max-width:20ch}
.lnd-sub{font-size:14px;color:var(--ink2);max-width:54ch;line-height:1.55;margin:0}

.lnd-sok{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;max-width:580px}
.lnd-falt{flex:1 1 250px;min-width:210px;display:flex;align-items:center;gap:9px;height:44px;
  padding:0 14px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .12s}
.lnd-falt:focus-within{border-color:var(--accent)}
.lnd-falt-ic{width:16px;height:16px;flex:0 0 auto;color:var(--dim);display:block}
.lnd-falt-ic svg{width:16px;height:16px;display:block}
.lnd-inp{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:inherit;
  font-size:15px;font-weight:600;outline:none;padding:0}
.lnd-inp::placeholder{color:var(--faint);font-weight:400}

.lnd-trust{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--faint);margin:10px 0 0}

/* ── KNAPPAR ─────────────────────────────────────────────────────────────── */
.lnd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;
  padding:0 17px;border-radius:var(--r);border:1px solid var(--line);background:var(--inset);
  color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:800;white-space:nowrap;
  cursor:pointer;transition:background .12s,filter .12s,border-color .12s}
.lnd-btn:hover{background:var(--line)}
.lnd-btn-lg{height:44px;padding:0 22px;font-size:14.5px}
.lnd-btn-sm{height:30px;padding:0 12px;font-size:12.5px}
.lnd-btn-pri{background:var(--accent);color:#fff;border-color:transparent}
.lnd-btn-pri:hover{background:var(--accent);filter:brightness(1.06)}
/* Epic-knappen bär Epics egen ton: nästan svart i ljust läge, nästan vit i mörkt.
   Båda är tokens — INGEN hårdkodad hex, och --ink är aldrig en ytfyllning i
   ljust tema utom just här, där knappen ÄR förgrunden. */
.lnd-btn-epic{background:var(--ink);color:var(--card);border-color:transparent}
/* HOVERN MÅSTE SÄTTA OM background. Basregeln .lnd-btn:hover{background:var(--line)}
   har SAMMA specificitet (0,2,0) och deklarerar bakgrunden — en :hover som bara
   sätter filter ärver därför --line, som är nästan vit i ljust läge. Knappen
   blev vit vid mouseover. Rapporterat av Kenta 2026-09-02 med skärmdump.
   --ink2 lyfter i ljust läge och dämpar i mörkt, alltså synlig respons åt rätt
   håll i båda lägena — utan filter, som blåser ut den nästan vita --ink i mörkt. */
.lnd-btn-epic:hover{background:var(--ink2)}

/* ── RESULTATKORTET ──────────────────────────────────────────────────────── */
.lnd-svar:empty{display:none}
.lnd-kort{padding:0;overflow:hidden}
.lnd-kort-hd{display:flex;align-items:center;gap:8px;padding:9px 15px;background:var(--inset);
  border-bottom:1px solid var(--line);font-size:12.5px;font-weight:800;color:var(--ink2)}
.lnd-kort-hd--ja{background:var(--accent-wash);color:var(--accent-ink);
  border-bottom-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.lnd-kort-in{padding:15px}

.lnd-spelare{display:flex;align-items:center;gap:13px}
.lnd-spelare-i{flex:1;min-width:0}
.lnd-namn{font-size:18px;font-weight:900;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lnd-brickor{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}

/* Runda avatarer = människa (§0B). */
.lnd-av{width:52px;height:52px;flex:0 0 auto;border-radius:50%;background:var(--accent-wash);
  color:var(--accent-ink);display:grid;place-items:center;font-size:17px;font-weight:900;
  border:1px solid var(--line);overflow:hidden}
.lnd-av--s{width:24px;height:24px;font-size:9.5px;background:var(--inset);color:var(--dim);
  border:2px solid var(--card);margin-right:-7px}
.lnd-av--s:last-child{margin-right:0}

.lnd-pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:20px;
  background:var(--inset);border:1px solid var(--line);color:var(--dim);font-size:11px;font-weight:800}
.lnd-pill--lank{color:var(--accent-ink);background:var(--accent-wash);
  border-color:color-mix(in srgb,var(--accent) 26%,transparent);height:28px;font-size:12.5px}
.lnd-pill--lank:hover{border-color:color-mix(in srgb,var(--accent) 46%,transparent)}

.lnd-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.lnd-stat-c{background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:10px 11px}
.lnd-stat-c b{display:block;font-size:20px;line-height:1.1;font-weight:900}
.lnd-stat-c span{display:block;font-size:11px;color:var(--dim);margin-top:2px}

.lnd-dold,.lnd-not{font-size:12.5px;color:var(--ink2);line-height:1.55;margin:13px 0 0;
  background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}

.lnd-menade-t{font-size:14px;font-weight:800}
.lnd-menade-r{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

.lnd-steg{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0;padding:0}
.lnd-steg li{background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.lnd-steg li span{display:block;font-size:10.5px;font-weight:900;letter-spacing:.07em;color:var(--dim)}
.lnd-steg li b{display:block;font-size:13px;margin-top:3px}

/* ── ANSPRÅKSKORTET ──────────────────────────────────────────────────────── */
.lnd-ansprak{padding:15px;background:var(--accent-wash);
  border-top:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.lnd-ansprak--lugn{background:var(--inset);border-top-color:var(--line)}
.lnd-ansprak-t{font-size:15.5px;font-weight:900;letter-spacing:-.01em}
.lnd-ansprak-s{font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.5}
.lnd-ansprak-k{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.lnd-loften{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.lnd-loften li{font-size:12.5px;color:var(--ink2);line-height:1.5;display:flex;align-items:flex-start;gap:7px}
/* Bocken är en SVG i markupen, inte roterade kanter. Regeln om lodräta färgade
   linjer (.clinerules/02-ui-facit §0.5) ska aldrig behöva tolkas. */
.lnd-loften li>svg{width:13px;height:13px;flex:0 0 auto;margin-top:3px;color:var(--live)}

/* ── RUMMETS RAD ─────────────────────────────────────────────────────────── */
.lnd-rum{display:flex;align-items:center;gap:11px;padding:10px 15px;min-height:44px;
  flex-wrap:wrap;color:inherit;transition:background .12s}
.lnd-rum:hover{background:var(--inset)}
.lnd-rum b.mono{font-size:15px;font-weight:900;line-height:1}
.lnd-rum-t{font-size:12.5px;color:var(--ink2)}
.lnd-dot{width:7px;height:7px;border-radius:50%;background:var(--live);flex:0 0 auto;
  box-shadow:0 0 0 3px var(--live-wash)}
.lnd-sep{width:1px;height:16px;background:var(--line2);flex:0 0 auto}
.lnd-band{display:flex;align-items:center}
.lnd-rum-sp{flex:1}
.lnd-rum-go{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
  color:var(--accent-ink);white-space:nowrap}

/* ── TRE KORT ────────────────────────────────────────────────────────────── */
.lnd-tre{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lnd-tre-k{padding:13px 14px}
.lnd-tre-h{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--accent)}
.lnd-tre-h b{color:var(--ink);font-size:13.5px}
.lnd-tre-k p{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:6px 0 0}

/* ── VIKMARKÖR + VECKET ──────────────────────────────────────────────────── */
.lnd-vik{display:flex;align-items:center;gap:11px;margin:8px 0 0}
.lnd-vik i{flex:1;height:1px;background:var(--line);display:block}
.lnd-vik span{font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:var(--faint)}

.lnd-vecket{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lnd-lista{padding:0;overflow:hidden}
.lnd-lista-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.lnd-lista-hd a{font-size:12px;font-weight:700;color:var(--accent-ink)}
.lnd-rad{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);
  color:inherit;transition:background .12s}
.lnd-rad:last-child{border-bottom:0}
.lnd-rad:hover{background:var(--inset)}
.lnd-rad-t{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lnd-rad-m{font-size:11.5px;color:var(--dim);white-space:nowrap}

.lnd-lankar{display:flex;flex-wrap:wrap;gap:7px}
.lnd-lankar a{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);color:var(--ink2);font-size:12.5px;font-weight:600;
  box-shadow:var(--shadow);transition:color .12s,border-color .12s}
.lnd-lankar a:hover{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}

/* ── EN SIDA SOM KÄNNER AV SKÄRMEN (Kentas regel 2026-08-26) ─────────────── */
@media (max-width:900px){
  .lnd-tre{grid-template-columns:1fr}
  .lnd-vecket{grid-template-columns:1fr}
}
@media (max-width:620px){
  .lnd-shell{padding:10px 10px 30px;gap:10px}
  .lnd-hero{padding:18px 15px 16px}
  .lnd-h1{font-size:22px}
  .lnd-wm{width:170px;height:170px;top:-24px;right:-32px}
  .lnd-sok{gap:7px}
  .lnd-falt{flex:1 1 100%}
  .lnd-sok .lnd-btn{width:100%}
  .lnd-stat{grid-template-columns:repeat(2,1fr)}
  .lnd-steg{grid-template-columns:1fr}
  .lnd-ansprak-k .lnd-btn{width:100%}
  .lnd-desk{display:none}
  .lnd-rum{gap:8px}
  .lnd-rum .lnd-sep{display:none}
  .lnd-rum-sp{display:none}
  .lnd-vik span{font-size:9px;letter-spacing:.06em}
}

/* ── REACT-ÖN HAR MONTERAT (§0C R2) ──────────────────────────────────────────
   PHP-fallbacken döljs FÖRST när klassen sitter på <html>. Går bundlen sönder
   sitter klassen aldrig, och sidan är exakt den serverrenderade sidan. */
html.forre-landing-react .fnx-php.lnd-svar{display:none}