/* Bro-stregtegningen og vandlinjen i intro-kapitlet.
   Porteret fra blok 15 og 16 i <style id="laesesal-skin">.

   NYT STILARK. Det linkes SIDST i index.html, efter ui.css, og vinder derfor
   ethvert tie-break - normalt lige praecis det, ARKITEKTUR.md regel 1 advarer
   imod. Det er forsvarligt her og kun her, fordi hver eneste selektor i filen
   er indledt med .ls-bro eller .ls-vand. Der er ingen regel, der kan naa
   noget uden for de to elementer, og dermed intet tie-break at vinde.

   Tilfoejes der senere regler her UDEN det praefiks, holder argumentet ikke
   laengere, og filen skal flyttes op i raekken.

   TRE TING ER RETTET UNDER PORTEN:

   1. Selektorerne i prototypen stod som
        `#ls-landing .bridge-svg, .ls-bro .bridge-svg .stroke{...}`
      Kommaet deler dem i to, saa den foerste halvdel ramte hele SVG-roden i
      stedet for .stroke - og fik dermed HVER eneste deklaration fra alle
      reglerne i blokken. Kun anden halvdel var den tilsigtede. Landingssiden
      er ikke porteret (se LAESESAL_PLAN.md, beslutning 2.2), saa den halvdel
      er droppet frem for gentaget.

   2. @keyframes sigPulse blev refereret, men aldrig defineret - signal-buerne
      pulserede ikke. Den er defineret her.

   3. Tegningens egne farvenavne kolliderede med appens tokens: prototypen
      omdefinerede --ink til #8A9494, mens --ink i tokens.css er SES Moerk Graa
      #323232. To forskellige betydninger under ét navn. Tegningens hedder nu
      --draw-ink og --draw-ink-soft. */

.ls-bro,.ls-vand{
  --one:      var(--orange);
  --one-dark: #E89B60;
  --nxt:      var(--pink);
  --nxt-dark: #E0736B;
  --pro:      var(--gold);

  --draw-ink:      #8A9494;
  --draw-ink-soft: #ADB8B8;

  --bg-warm:     #FCFBF9;
  --border-warm: #ECE5DA;
  --text-2:      #5B6565;
  --text-3:      #8A9494;

  --ease: cubic-bezier(.22,1,.36,1);
  --shadow-soft: 0 2px 8px rgba(60,66,66,.04), 0 12px 32px rgba(60,66,66,.06);
}

/* ---------- 15. bro-stregtegningen ---------- */
.ls-bro{margin:0 0 26px;padding:18px 18px 8px;border:1.5px solid var(--hair);border-radius:14px;background:#fff}
.ls-bro .bridge-svg{width:100%;height:auto;display:block}
.ls-bro .bridge-svg .stroke{fill:none;stroke:var(--draw-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ls-bro .bridge-svg .thin{stroke-width:1.5}
.ls-bro .bridge-svg .cable{stroke-width:2.6}
.ls-bro .bridge-svg .under{stroke:#B4C3C3;stroke-dasharray:6 7}
.ls-bro .bridge-svg .tower.one{stroke:var(--one-dark)}
.ls-bro .bridge-svg .tower.nxt{stroke:var(--nxt-dark)}
.ls-bro .bridge-svg .modline{stroke-width:1.6;opacity:.55}
.ls-bro .bridge-svg .ghost-label{font-family:var(--sans);font-style:italic;font-weight:500;fill:#A9B7B7;opacity:0}
.ls-bro .bridge-svg .deck-fag{stroke:var(--pro);stroke-width:5;stroke-linecap:round;opacity:.8}
.ls-bro .bridge-svg .tower-name{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:3px}
.ls-bro .bridge-svg .seg-num{font-family:var(--sans);font-weight:700;font-size:13px;fill:var(--pro);opacity:.9}
.ls-bro .bridge-svg .water-wash{fill:#E9F0F0;opacity:.3}
.ls-bro .bridge-svg .wave{stroke:#AFC2C2;stroke-width:1.8}
.ls-bro .bridge-svg .house-l{stroke:var(--nxt)}
.ls-bro .bridge-svg .house-r{stroke:var(--one)}
.ls-bro .bridge-svg .tree{stroke:var(--draw-ink-soft)}
.ls-bro .bridge-svg .sun{stroke:var(--one)}
.ls-bro .bridge-svg .family-fig{stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ls-bro .bridge-svg .fam-adult{stroke:var(--draw-ink)}
.ls-bro .bridge-svg .fam-child{stroke:var(--nxt-dark)}

.ls-bro .bridge-svg .signal{fill:none;stroke-width:2;opacity:0}
.ls-bro .bridge-svg .signals.live .signal{opacity:.7;animation:sigPulse 2.6s ease-in-out infinite}
.ls-bro .bridge-svg .signals.live .signal.s2{animation-delay:.45s}
.ls-bro .bridge-svg .signals.live .signal.s3{animation-delay:.9s}
@keyframes sigPulse{0%,100%{opacity:.25}50%{opacity:.85}}

/* De fem klikbare dele. Markoeren staar kun paa det, der faktisk svarer -
   ellers lover figuren mere, end den holder. */
.ls-bro .house-l,.ls-bro .house-r,.ls-bro .tower,.ls-bro .deck-fag,
.ls-bro .wave,.ls-bro .water-wash,.ls-bro .foundation{cursor:pointer}
.ls-bro-hint{font-family:var(--sans);font-size:.9rem;color:var(--heading);margin:10px 4px 8px;min-height:2.6em}
.ls-bro-acts{margin:4px 4px 8px}

/* ---------- 16. vandlinjen ---------- */
.ls-vand{margin:0 0 1rem}
.ls-vand .waterline-viz{margin-top:48px;border-radius:22px;overflow:hidden;
  border:1px solid var(--border-warm);box-shadow:var(--shadow-soft);background:#fff}
.ls-vand .wv-above{padding:38px 40px 30px}
.ls-vand .wv-below{padding:30px 40px 42px;background:linear-gradient(180deg,#E8EFEF 0%,#DCE7E7 100%)}
.ls-vand .wv-label{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-3);margin-bottom:14px}
.ls-vand .wv-below .wv-label{color:#6E8282}
.ls-vand .wv-surface{height:30px;margin:-14px 0;position:relative;z-index:2}
.ls-vand .wv-surface svg{width:100%;height:100%;display:block}
.ls-vand .wv-surface path{stroke:#A9BCBC;stroke-width:2;fill:none;stroke-linecap:round}
.ls-vand .wv-chips{display:flex;flex-wrap:wrap;gap:11px}
.ls-vand .chip{font-size:13.5px;font-weight:600;color:var(--text-2);background:var(--bg-warm);
  border:1px solid var(--border-warm);padding:9px 17px;border-radius:999px}
.ls-vand .chip.ghost{color:#51706F;background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.55);
  opacity:0;filter:blur(6px);transform:translateY(10px);
  transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1s var(--ease)}
.ls-vand .waterline-viz.in .chip.ghost{opacity:1;filter:blur(0);transform:none}
.ls-vand .waterline-viz.in .chip.ghost:nth-child(2){transition-delay:.16s}
.ls-vand .waterline-viz.in .chip.ghost:nth-child(3){transition-delay:.32s}
.ls-vand .waterline-viz.in .chip.ghost:nth-child(4){transition-delay:.48s}

/* "Dyk": vandkanten bliver selve boelgen, og feltet under vokser.
   Prototypen havde en driftende boelge her, men slog den fra igen tre regler
   laengere nede. Det er den slukkede udgave, der faktisk blev vist, og det er
   den, der staar her - uden de doede regler og uden @keyframes wvDrift. */
.ls-vand .waterline-viz.dive .wv-surface{height:40px;margin:-19px 0;overflow:visible;
  transform:translateY(calc(var(--dive,0) * 9px));transition:transform .4s ease}
.ls-vand .waterline-viz.dive .wv-below{padding-bottom:calc(42px + var(--dive,0) * 16px);
  transition:padding-bottom .4s ease}
.ls-vand .waterline-viz.dive .chip.ghost{transition:opacity .5s ease,filter .5s ease,transform .5s ease}

/* HER LAA TO REGLER MERE I PROTOTYPEN:
     .dive .chip.ghost:not(.on){opacity:0;...}
     .dive .chip.ghost.on{opacity:1;...}
   Markup'en saetter baade .in og .dive, og :not(.on) giver et klassetrin mere
   end .in-reglen ovenfor. Ingenting i prototypen satte nogensinde .on paa en
   chip - saa de fire chips under vandlinjen var USYNLIGE, altsaa netop det
   indhold, oevelsen handler om at faa frem. De er ikke porteret.

   Skal chipsene senere afsloeres et ad gangen (fx ved scroll), hoerer .on
   sammen med den kode, der saetter den. */

.ls-vand .wv-add{display:flex;gap:8px;margin-top:14px;max-width:420px}
.ls-vand .wv-add input{flex:1;min-width:0;border:1.5px solid var(--border-warm);border-radius:10px;
  padding:8px 14px;font-family:var(--sans);font-size:.85rem;color:var(--text-2);background:#fff}
.ls-vand .wv-add input:focus{outline:none;border-color:var(--gold)}
.ls-vand .wv-below .wv-add input{background:rgba(255,255,255,.75)}
.ls-vand .chip.user{border-color:var(--orange);display:inline-flex;align-items:center;gap:7px;padding-right:8px}
.ls-vand .chip-x{border:none;background:transparent;margin-left:0;cursor:pointer;
  color:var(--text-3);font-size:15px;line-height:1;padding:0 2px}
.ls-vand .chip-x:hover{color:var(--nxt-dark)}