/* ═══════════════════════════════════════════════════════════════════════════
   UPPFÖLJNINGSDEMOT — formatmallen

   Skalet är samma fönster som marknadsdemot: list med adressen i, ljusare yta
   än panelen omkring, och hover på allt som går att trycka på. Reglerna står
   i båda filerna med flit. Vid ett TREDJE demo av samma sort ska de brytas ut,
   precis som crmchrome.js bröts ut vid den tredje kopian av sidomenyn.

   HÖJDEN ÄR ETT MINIMUM. Skriptet är defer, så rutan måste vara lika stor före
   och efter att den fylls, annars flyttar den ned resten av sidan. Skillnaden
   mot marknadsdemot är att det HÄR demot inte har något viloläge: korten står
   framme direkt, så måttet är hela innehållets och inte ett tomt läges.

   RÖRELSE. Bara opacity och transform.
   ═══════════════════════════════════════════════════════════════════════ */

.ufd{position:relative;display:flex;flex-direction:column;margin-top:.85rem;
  min-height:1045px;border-radius:16px}
.ufd:empty{border:1px solid var(--line);background:
  radial-gradient(300px 200px at 15% 110%, rgba(79,195,255,.2), transparent 60%),
  radial-gradient(300px 200px at 85% -10%, rgba(127,176,255,.15), transparent 60%),
  #eaeff9}

.uf{position:relative;flex:1;min-height:0;display:flex;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:#e9eef9;
  box-shadow:0 22px 50px -44px rgba(10,24,84,.6)}

/* FÖNSTERLISTEN ÄR BORTA. Demot satt i en ritad webbläsare med tre grå
   prickar; ramen kommer nu ur css/systemskal.css, alltså systemets egen
   sidomeny och sidrubrik. Tipsraden flyttade med dit och heter .sk-tips. */

/* ── Ytan ────────────────────────────────────────────────────────────────
   Utkastet är det man håller på med. Skärmen bakom tonas ned men står kvar:
   brevet citerar meningen som ligger på kortet, och den ska gå att se. */
.uf .sk{transition:opacity .3s var(--ease-solutra,ease)}
.uf--lada .sk{opacity:.42}
.uf-panel{background:#fff;border:1px solid var(--line2);border-radius:12px;
  padding:clamp(.65rem,1.4vw,.85rem)}
.uf-intro{font-size:.76rem;line-height:1.6;color:var(--muted);margin-bottom:.7rem}


.uf-rub{font-family:var(--display);font-size:.96rem;font-weight:600;
  letter-spacing:-.01em;color:var(--text);margin:0 0 .15rem}
.uf-ing{font-size:.71rem;line-height:1.5;color:var(--faint);margin-bottom:.5rem}

/* ── Kortet ────────────────────────────────────────────────────────────── */
/* SEKTIONERNA LIGGER UNDER VARANDRA, som i produkten. Flikar och en
   bläddrare fanns i första versionen och i ingen av dem: två grepp som inte
   finns i systemet gör demot till en hemsidesprylsak i stället för en skärm.

   DE ÄR div OCH INTE section. Sajtens globala regel ger varje section
   6,5 rem padding uppåt och nedåt, och den slog igenom här inne: hundra
   pixlar tomt över första rubriken, mitt i ett fönster som ska se ut som ett
   program. Samma fälla som noten i systemskal.js beskriver för nav och main. */
.uf-sekt+.uf-sekt{margin-top:.8rem;padding-top:.75rem;border-top:1px solid var(--line2)}
/* TVÅ SPALTER PÅ BRED SKÄRM. Produkten staplar sina två sektioner för att den
   sidan är hela fönstret; här är fönstret en panel i en karusell, och staplade
   blev skärmen 732 px hög mot 467 för marknaden bredvid. Den satte höjden på
   alla fem panelerna och gjorde att ingen av dem rymdes på en laptop.
   Innehållet är detsamma, och på telefon ligger de under varandra som i
   förlagan. */
@media(min-width:900px){
  .uf-lista-sekt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.1rem;align-items:start}
  .uf-sekt+.uf-sekt{margin-top:0;padding-top:0;border-top:0;
    padding-left:1.1rem;border-left:1px solid var(--line2)}
}
.uf-antal{margin-left:.45rem;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.68rem;font-weight:600;color:var(--faint)}
.uf-kort{display:flex;flex-direction:column;gap:.3rem;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:.62rem}
.uf-kort+.uf-kort{margin-top:.55rem}
.uf-kort--klart{border-color:rgba(47,125,74,.35);background:rgba(47,125,74,.03)}
.uf-kort-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;
  justify-content:space-between}
/* Kortets rubrik är teamets egen mening och inte bara namnet. Den säger VAD
   som hänt, och namnet står ändå i den. */
.uf-titel{font-size:.83rem;font-weight:700;line-height:1.3;color:var(--text);
  min-width:0;flex:1}
.uf-kort-f{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.15rem}
/* MÄSSINGEN ÄR MÖRKARE HÄR ÄN --massing. Etiketten står på en tonad
   mässingsplatta och inte på vitt, och #8a6c38, som ger 4,90 mot vitt, föll
   till 4,4 mot plattan. axe fällde den, med rätta: raden bär datumet köparen
   bad om och är det första ögat söker på kortet. #71592c ger 5,99 mot samma
   platta. Samma räkning bakom rödtonen. */
.uf-brick{font-size:.65rem;font-weight:650;color:#71592c;
  background:rgba(194,164,105,.13);border:1px solid rgba(138,108,56,.32);
  border-radius:999px;padding:.16rem .5rem;white-space:nowrap}
.uf-brick--tyst{color:#8a3f30;background:rgba(180,90,70,.09);
  border-color:rgba(154,74,58,.32)}

.uf-rad{font-size:.73rem;line-height:1.48;color:var(--muted)}
.uf-rad--in{color:var(--faint);font-size:.72rem}
.uf-rad--svag{font-size:.7rem;color:var(--faint)}
.uf-svag{color:var(--faint)}
.uf-kod{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.64rem;
  color:var(--g2)}
/* Citatet är hela argumentet: köparens egen mening, ordagrant. Det ska läsas
   före allt annat på kortet, och därför är det större och inte mindre. */
.uf-citat{font-size:.79rem;line-height:1.5;color:var(--text);
  padding:.05rem 0 .05rem .75rem;border-left:2px solid rgba(138,108,56,.45)}
@media(min-width:760px){ .uf-citat{font-size:.82rem;line-height:1.5} }

.uf-oppna{position:relative;display:inline-flex;
  align-items:center;gap:.4rem;margin-top:.2rem;
  font-size:.78rem;font-weight:700;color:#fff;background:#1c3f9e;
  border:1px solid #1c3f9e;border-radius:9px;padding:.45rem .8rem;cursor:pointer;
  transition:background .2s,transform .15s}
.uf-oppna:hover{background:var(--g2)}
.uf-oppna:active{transform:translateY(1px)}
.uf-skickat{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.76rem;font-weight:650;color:#1f6a41;
  background:rgba(47,125,74,.1);border-radius:8px;padding:.42rem .7rem}


.uf-fot{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line2);
  font-size:.68rem;line-height:1.5;color:var(--faint)}
.uf-tomt{font-size:.8rem;color:var(--muted);padding:.9rem 0}

/* ── Utkastet ──────────────────────────────────────────────────────────────
   Ligger över ytan och inte i den. Brevet är det man gör just nu, och en
   panel som skjuter listan nedåt hade flyttat meningen brevet citerar. */
.uf-lada{position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;
  padding:clamp(.8rem,2vw,1.05rem);
  background:#fff;border-top:1px solid var(--line);
  box-shadow:-14px 0 40px -30px rgba(10,24,84,.7);
  animation:uf-in .28s var(--ease-solutra,ease) both}
.uf-lada-h b{font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--text)}
.uf-falt{display:grid;gap:.2rem}
.uf-falt--vaxer{flex:1;min-height:0}
.uf-et{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.56rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.uf-adress{font-size:.78rem;color:var(--muted)}
.uf-in{width:100%;font-family:inherit;font-size:.78rem;line-height:1.55;color:var(--text);
  background:#fbfcff;border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem}
.uf-in:focus{border-color:rgba(92,141,255,.55);outline:none;
  box-shadow:0 0 0 3px rgba(92,141,255,.14)}
.uf-brev{flex:1;min-height:140px;resize:vertical}
.uf-sprakrad{font-size:.68rem;color:var(--faint)}
.uf-lada-f{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.1rem}
.uf-skicka{position:relative;font-size:.78rem;font-weight:700;color:#fff;
  background:#1c3f9e;border:1px solid #1c3f9e;border-radius:9px;
  padding:.45rem 1.1rem;cursor:pointer;transition:background .2s,transform .15s}
.uf-skicka:hover{background:var(--g2)}
.uf-skicka:active{transform:translateY(1px)}
.uf-avbryt{font-size:.78rem;font-weight:600;color:var(--muted);background:none;
  border:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.uf-avbryt:hover{color:var(--g2)}

/* ── Brickan ───────────────────────────────────────────────────────────── */
.uf-bricka{position:absolute;right:.8rem;bottom:.8rem;z-index:3;
  display:flex;align-items:flex-start;gap:.5rem;max-width:min(300px,80%);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.55rem .7rem;box-shadow:0 18px 40px -28px rgba(10,24,84,.75);
  animation:uf-in .3s var(--ease-solutra,ease) both}
.uf-bricka-ik{flex:none;display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;color:#1f6a41;background:rgba(47,125,74,.14)}
.uf-bricka b{display:block;font-size:.74rem;font-weight:700;color:var(--text)}
.uf-bricka small{display:block;font-size:.68rem;line-height:1.45;color:var(--faint)}

@keyframes uf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.uf-not{flex:none;margin:.6rem 0 0;padding-top:.55rem;border-top:1px dashed var(--line);
  font-size:.74rem;line-height:1.55;color:var(--muted)}

.uf-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.uf-oppna:focus-visible,.uf-skicka:focus-visible,
.uf-avbryt:focus-visible{outline:2px solid var(--g3);outline-offset:2px}

/* ── Pulsen ────────────────────────────────────────────────────────────── */
.uf-pulsar::before,.uf-pulsar::after{content:"";position:absolute;inset:-3px;
  border-radius:inherit;border:2px solid var(--g3);opacity:0;pointer-events:none;
  animation:uf-puls 1.9s var(--ease-solutra,ease) infinite}
/* TVÅ RINGAR, den andra en dryg sekund efter den första. En ensam ring hann
   bli osynlig innan nästa kom, och pausen läste som att något var klart. Två
   gör den till en jämn blinkning som ögat fångar i utkanten av synfältet. */
.uf-pulsar::after{animation-delay:1.05s}
@keyframes uf-puls{
  0%{opacity:.85;transform:scale(1)}
  65%{opacity:0;transform:scale(1.11)}
  100%{opacity:0;transform:scale(1.11)}}

/* Typografin dras ner på telefon. Vid 294 px bryter kortrubriken på tre rader
   och citatet på sju, och skärmen blev fjortonhundra pixlar hög i en panel som
   karusellen sträcker alla fyra efter. */
@media(max-width:599px){
  .uf-titel{font-size:.8rem}
  .uf-citat{font-size:.78rem;line-height:1.55}
  .uf-rad{font-size:.72rem}
  .uf-ing{font-size:.7rem;line-height:1.5}
  .uf-rub{font-size:.96rem}
}

@media(min-width:760px){
  /* Uppmätt i panelens verkliga bredd, efter komprimeringen och med de två
     sektionerna i spalter: 554 px vid 1005, 712 vid 808, 1157 vid 294. Demot
     har inget viloläge att reservera för, korten står framme direkt. */
  .ufd{min-height:735px}
  /* Brevet lägger sig i högra halvan, som i produkten. Listan syns kvar till
     vänster, nedtonad, med meningen brevet citerar. */
  .uf-lada{inset:0 0 0 auto;width:min(58%,520px);
    border-top:0;border-left:1px solid var(--line)}
}

@media(min-width:1000px){ .ufd{min-height:545px} }

@media(prefers-reduced-motion:reduce){
  .uf-pulsar::before,.uf-pulsar::after{display:none}
  .uf-lada,.uf-bricka{animation:none}
  .uf-yta{transition:none}
}