/* ==========================================================================
   Sammenligningen i papir-udtrykket (arbejdskopien /forside2, kladde)
   Emil, 3.10.2026, efter hans skærmbillede. Ligger oven på sektionens egne
   regler (/css/sektioner/sammenligning.css), som forsiden stadig bruger
   uændret. Bygges af scripts/byg-forside2.js, der sætter .sml--papir på
   sektionen og lader hovedet være overskriften alene (brødteksten og knappen
   er taget ud). Sektionen lå først på prikket papir med revne kanter; den
   står nu på sidens hvide (Emil).

   Det, der er anderledes end på forsiden:
     - vores kolonne er et hvidt ark, tapet fast, i stedet for den orange flade
     - de andres flueben er tegnet i hånden uden cirkel, og et nej er en streg
     - prisrækken har sit navn stående
     - knappen i hovedet er taget ud

   Størrelser kommer fra grundsættet. Tapen og de håndtegnede flueben findes
   ikke i grundsættet endnu.
   ========================================================================== */

.sml--papir {
  --sml-tape: rgba(232,220,196,.95);     /* beige malertape */
  --sml-streg: rgb(42 31 26 / .12);      /* tynde streger på papiret */
  /* Fluebenet er kladdens håndtegnede (to streger i ét træk). */
  --sml-flueben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M3 11c2 2 4 4 6 6 3-6 7-11 11-14' fill='none' stroke='%230A0B0D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sml-flueben-hvid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M3 11c2 2 4 4 6 6 3-6 7-11 11-14' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background: var(--bg);
}

/* Hovedet: kun overskriften, til venstre. */
.sml--papir .sml__head { grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: start; }

/* Vores kolonne: et hvidt ark, tapet fast øverst. */
.sml--papir .sml__tone { position: relative; border: 1px solid var(--line-strong); background: var(--white); box-shadow: 0 22px 48px -30px rgb(10 11 13 / .35); }
.sml.sml--papir .sml__logo { width: 82%; }   /* luft mellem logoet og arkets kant */
.sml--papir .sml__tone::before { content: ""; position: absolute; top: calc(var(--space-xs) * -1); left: 50%; width: var(--space-3xl); height: var(--space-m); background: var(--sml-tape); transform: translateX(-50%) rotate(-3deg); }

/* Stregerne mellem rækkerne. */
.sml--papir .sml__row:not(.sml__row--head) > * { border-top-color: var(--sml-streg); }
.sml--papir .sml__row:not(.sml__row--head) > .is-us { border-top-color: var(--line); }

/* Mærkerne: et nej er en streg, de andres ja er et håndtegnet flueben, og vores er en orange prik med flueben. */
.sml--papir .sml__mark { width: auto; height: auto; border-radius: 0; background: none; color: var(--text-muted); }
.sml--papir .sml__mark svg { display: none; }
.sml--papir .sml__mark::before { content: "–"; }
.sml--papir .sml__mark--yes::before, .sml--papir .sml__mark--us::before { content: ""; width: 1.1em; height: 1em; background: var(--sml-flueben) no-repeat center / contain; }
.sml--papir .sml__mark--us { width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--accent); }
.sml--papir .sml__mark--us::before { width: .95em; height: .85em; background-image: var(--sml-flueben-hvid); }

/* Prisrækken har sit navn stående til venstre. */
.sml--papir .sml__row--price > [role="rowheader"] { justify-items: start; }
.sml--papir .sml__row--price > [role="rowheader"] .sml__sr { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: var(--type-small); color: var(--text-muted); }

/* Smalle skærme: under 860 px har .wrap ingen luft i siderne, så sektionen giver den selv. */
@media (max-width: 860px) {
  .sml--papir { padding-inline: var(--space-l); }
}