/* ===== Tokenlagret =====
   Tva hudar delar samma komponenter. Skillnaden ligger enbart i tokens.

     body.admin   verkstaden. Ljus och tat, byggd for att lasa listor snabbt.
     body.kund    allt en kund ser. Mork, guld, Bodoni. Samma palett som
                  landningssidan i webb/stil.css, med kontrastvardena darifran.

   REGELN: en komponent far aldrig innehalla ett hexvarde. Gor den det fungerar
   den bara i en av hudarna, och det ar precis sa de har tva gled isar.

   De fyra gamla namnen (--bg --line --muted --gold) star kvar som alias langst
   ner. Flera vyer har inline-stilar som pekar pa dem. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --disp: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --etikett: system-ui, sans-serif;
  --radie: 10px;
  --radie-panel: 16px;
}

body.admin {
  --ground:#faf7f1; --surface:#ffffff; --surface-2:#fbf6ea;
  --ink:#1d1a16; --ink-soft:#4a443b; --ink-faint:#6b6358;
  --rule:#e7e1d6; --rule-soft:#efe9dd;
  --accent:#8a7a5c; --accent-wash:#fbf6ea; --accent-line:#f0e6cf;
  --btn-bg:#1d1a16; --btn-ink:#ffffff;
  --ok-bg:#eef6ec; --ok-line:#cfe6c8; --ok-ink:#3c6b34;
}

/* Kundhuden. Varje varde ar hamtat ur webb/stil.css, dar kontrasten redan ar
   raknad per token: --ink-soft 9,3-11,0:1 och --accent 7,7-9,4:1 mot grunden.
   Radien ar 2px av samma skal som pa landningssidan: trycksak, inte app. */
body.kund {
  --ground:#141317; --surface:#1c1b21; --surface-2:#26252c;
  --ink:#f2efe8; --ink-soft:rgba(242,239,232,.82); --ink-faint:rgba(242,239,232,.76);
  --rule:rgba(242,239,232,.18); --rule-soft:rgba(242,239,232,.10);
  --accent:#d9b36c; --accent-wash:#221f19; --accent-line:rgba(217,179,108,.45);
  --btn-bg:#f2efe8; --btn-ink:#141317;
  --ok-bg:rgba(217,179,108,.10); --ok-line:rgba(217,179,108,.38); --ok-ink:#e8cf9c;
  --disp:'Bodoni Moda','Bodoni 72',Didot,Georgia,serif;
  --text:'EB Garamond','Iowan Old Style',Georgia,serif;
  --etikett:'EB Garamond',Georgia,serif;
  --radie:2px; --radie-panel:3px;
}

/* Ceremonin behaller sin egen varld men maste kunna losa ut de delade tokens
   som .hint och .btn laser. Grunden ar nu landningssidans #141317, inte
   #14110d bredvid den. --ink-faint star kvar pa sitt gamla varde: viskningen
   i skrapsteget ar avsiktligt nastan osynlig. */
body.ceremony {
  --ground:#141317; --surface:#1c1b21;
  --ink:#f2efe8; --ink-soft:#e4d8c2; --ink-faint:#6f6655;
  --rule:rgba(242,239,232,.18); --rule-soft:rgba(242,239,232,.10);
  --accent:#d9b36c; --accent-wash:#221f19; --accent-line:rgba(217,179,108,.45);
  --btn-bg:#2a241b; --btn-ink:#f3ece0;
  /* Samma typsnitt som lobbyn och landningssidan. Utan dem stod knapparna i
     system-ui mitt i en serif-ceremoni. */
  --disp:'Bodoni Moda','Bodoni 72',Didot,Georgia,serif;
  --text:'EB Garamond','Iowan Old Style',Georgia,serif;
  --etikett:'EB Garamond',Georgia,serif;
}

/* Alias: gamla namn, nya varden. Tas bort nar inline-stilarna i vyerna ar
   flyttade hit. */
body.admin, body.kund, body.ceremony {
  --bg: var(--ground); --line: var(--rule);
  --muted: var(--ink-faint); --gold: var(--accent);
}

body { font-family: var(--text); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ===== Delade komponenter ===== */
body.admin, body.kund { background: var(--ground); color: var(--ink); }

/* Rubrikerna far display-typsnittet. I verkstaden ar --disp samma serif som
   brodtexten, sa den huden ser ut precis som forut. */
h1, h2, h3 { font-family: var(--disp); text-wrap: balance; }
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
.wrap.narrow { max-width: 520px; }
.admin-head h1 { font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
body.kund .admin-head h1 { font-weight: 500; font-size: clamp(30px, 5.2vw, 40px); line-height: 1.12; letter-spacing: -.015em; }
.tag { font-size: 12px; background: var(--rule-soft); color: var(--ink-faint); padding: 3px 8px; border-radius: 20px; vertical-align: middle; font-family: var(--etikett); }
.muted { color: var(--ink-faint); font-size: 15px; line-height: 1.55; margin-top: 6px; }
.link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); font-size: 15px; }
.card-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radie-panel); padding: 22px; margin-top: 22px; }
.card-panel h2 { font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.field { display: block; margin-bottom: 16px; }
.field > span, .field-label { display: block; font-size: 13px; color: var(--ink-faint); margin-bottom: 6px; font-family: var(--etikett); }
input, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radie); font-size: 16px; font-family: var(--etikett); background: var(--surface-2); color: var(--ink); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.occ input { display: none; }
.occ-inner { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--rule); border-radius: var(--radie); cursor: pointer; background: var(--surface-2); }
.occ input:checked + .occ-inner { border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 2px var(--accent-line) inset; }
.occ-emoji { font-size: 20px; }
.occ-name { font-size: 14px; font-family: var(--etikett); }
.occ-name em { display: block; font-size: 11px; color: var(--accent); font-style: normal; }
.btn { display: inline-block; background: var(--btn-bg); color: var(--btn-ink); border: none; padding: 13px 22px; border-radius: var(--radie); font-size: 16px; cursor: pointer; text-decoration: none; font-family: var(--etikett); font-weight: 600; min-height: 48px; }
.btn:hover { background: var(--accent); color: var(--btn-ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn.ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.presets { display: flex; gap: 8px; margin-bottom: 8px; }
.presets button { flex: 1; padding: 10px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: var(--radie); cursor: pointer; font-family: var(--etikett); }
.mock, .ce-mock { color: var(--ink-faint); font-size: 12px; margin-top: 10px; font-family: var(--etikett); }
.rec-btn { display: inline-block; padding: 11px 16px; border: 1px dashed var(--accent-line); background: var(--accent-wash); color: var(--accent); border-radius: var(--radie); cursor: pointer; font-size: 15px; font-family: var(--etikett); }
.rec-btn.rec-on { border-style: solid; border-color: #c98a8a; background: #f6eaea; color: #8a3a3a; }
.rec-btn:disabled { opacity: .5; cursor: default; }
.rec-row { display: flex; align-items: center; gap: 12px; }
.rec-status { font-size: 14px; color: #c98a8a; font-family: var(--etikett); }
.mic { font-size: 13px; }
.banner { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); padding: 12px 14px; border-radius: var(--radie); margin: 16px 0; }
.list { display: flex; flex-direction: column; }
.row { display: flex; gap: 12px; align-items: baseline; padding: 12px 6px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.row-id { font-family: monospace; color: var(--ink-faint); font-size: 13px; }
.row-occ { flex: 1; font-size: 15px; }
.row-stat { color: var(--ink-faint); font-size: 13px; }
.contrib { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.contrib-top { display: flex; justify-content: space-between; }
.contrib p { margin-top: 4px; color: var(--ink-soft); }
.qr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.qr-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radie-panel); padding: 18px; text-align: center; }
.qr-card h3 { font-size: 16px; margin-bottom: 6px; }
.qr { width: 100%; max-width: 200px; margin: 12px auto; display: block; }
@media (max-width: 560px) { .qr-pair { grid-template-columns: 1fr; } }

/* ===== Ceremonin ===== */
body.ceremony { background: var(--ground); color: var(--ink); min-height: 100vh; }
.stage { display: none; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 26px; }
.stage.active { display: flex; }
.card-face { max-width: 360px; }
.card-line { font-size: 21px; line-height: 1.5; color: #e4d8c2; margin-bottom: 30px; }
.scratch-wrap { position: relative; width: 300px; height: 160px; margin: 0 auto; border-radius: 14px; overflow: hidden; }
.scratch-under { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8a7a5c; font-size: 14px; z-index: 0; background: #efe7d6; }
#scratchCanvas { position: relative; z-index: 1; border-radius: 14px; touch-action: none; cursor: grab; }
.hint { margin-top: 16px; color: var(--ink-faint); font-size: 13px; font-family: var(--etikett); }
.scratch-fallback { margin-top: 24px; display: block; margin-left: auto; margin-right: auto; }

.ce-line { font-size: 27px; line-height: 1.45; max-width: 460px; color: #f6efe2; }
.ce-sub { font-size: 19px; color: #d9cdb6; max-width: 420px; margin-top: 18px; }
.ce-count { font-size: 92px; font-weight: 600; color: #f6efe2; line-height: 1; }
.ce-msg { max-width: 460px; }
.ce-msg-text { font-size: 26px; line-height: 1.55; color: #f4ecdd; }
.ce-msg-text.caption { font-size: 21px; color: #d9cdb6; margin-top: 4px; }
.ce-msg-name { margin-top: 22px; font-size: 16px; color: #b3a081; letter-spacing: .03em; font-family: var(--etikett); }
.ce-msg-name.top { margin-top: 0; margin-bottom: 22px; font-size: 17px; color: #c3b393; }

/* Röst-hälsning — rösten är hjälten */
.voice-orb { width: 92px; height: 92px; border-radius: 50%; border: 1px solid #4a4030;
  background: #221d15; color: #f3ece0; font-size: 30px; cursor: pointer; margin: 2px auto 16px;
  display: inline-flex; align-items: center; justify-content: center; padding-left: 3px;
  transition: transform .15s, background .2s; }
.voice-orb:hover { background: #2c2619; }
.voice-orb:active { transform: scale(.96); }
.voice-orb.playing { background: #2c2619; padding-left: 0; animation: orbPulse 1.7s ease-in-out infinite; }
@keyframes orbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,169,143,.40); }
  70%  { box-shadow: 0 0 0 24px rgba(184,169,143,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,169,143,0); }
}
.voice-tag { color: #6f6655; font-size: 12px; font-family: var(--etikett); margin-bottom: 20px; letter-spacing: .02em; }

/* Foto/video i hälsningen — inramat minne */
.ce-media { max-width: 340px; margin: 0 auto 22px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 34px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.06); }
.ce-media img, .ce-media video { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #000; }
.ce-nav { margin-top: 40px; }
.ce-prog { margin-top: 22px; color: #6f6655; font-size: 13px; font-family: var(--etikett); }
.ce-skip { display: inline-block; margin-top: 16px; color: #6f6655; font-size: 13px; font-family: var(--etikett); }
.ce-breath { font-size: 25px; color: #e4d8c2; max-width: 420px; line-height: 1.5; }
/* Förvarningen före kuvertet (reveal.js, 2026-10-21): samma ton som andetaget, med luft ner till kuvertet. */
.ce-forvarning { margin: 0 auto 30px; text-align: center; }
.ce-amt-intro { font-size: 20px; color: #c7b793; margin-bottom: 14px; }
.ce-amount { font-size: 76px; font-weight: 600; color: #f6efe2; letter-spacing: -.01em; }
.ce-amount.settled { transition: transform .4s; }
.ce-amount.mode-quiet { font-size: 40px; color: #d9cdb6; font-weight: 500; }
.ce-amt-sub { margin-top: 18px; color: #b3a081; font-size: 16px; }
.ce-adult { color: #b3a081; font-size: 15px; margin-bottom: 18px; font-family: var(--etikett); max-width: 380px; }
.ce-end { font-size: 22px; color: #e4d8c2; max-width: 420px; line-height: 1.5; }
.ce-end-row { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }

.ce-btn { background: #2a241b; color: #f3ece0; border: 1px solid #3d3527; padding: 13px 26px; border-radius: 999px;
  font-size: 16px; cursor: pointer; font-family: var(--etikett); transition: background .2s; }
.ce-btn:hover { background: #342d22; }
.ce-btn.ghost { background: transparent; }

/* mjuka intoningar */
.fade { animation: fade .9s ease both; }
.fade-slow { animation: fade 1.4s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== Tillfälles-hudar (subtila toner) ===== */
body.ceremony.theme-barn { background: #15120c; }
body.ceremony.theme-barn .ce-amount, body.ceremony.theme-student .ce-amount { color: #f7e6b8; }
body.ceremony.theme-brollop { background: #131316; }
body.ceremony.theme-avtackning { background: #16120d; }
body.ceremony.theme-dop { background: #101316; }
body.ceremony.theme-kondoleans { background: #101010; }
body.ceremony.theme-kondoleans .ce-line, body.ceremony.theme-kondoleans .ce-msg-text { color: #e8e4dc; }
body.ceremony.theme-fodelsedag { background: #15110c; }
body.ceremony.theme-forskola { background: #12140f; }
body.ceremony.theme-jul { background: #160f0f; }

/* 404 */
.nf { text-align: center; padding: 120px 20px; }

/* ---------- v3: lobbyn ---------- */
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin:0 0 .4rem}

.guard{border:1px solid rgba(160,50,40,.45);background:rgba(160,50,40,.10);
  padding:.7rem .9rem;border-radius:4px;font-size:.9rem;margin-bottom:1.25rem}

.banner.warn{border-color:rgba(160,50,40,.45);background:rgba(160,50,40,.10)}

.roster{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;border-radius:999px;
  border:1px solid rgba(128,128,128,.35);font-size:.86rem}
.chip-ico{opacity:.65}

.share{display:flex;gap:.5rem;margin:.75rem 0 .25rem}
.share input{flex:1;min-width:0;font-family:inherit;font-size:.85rem;padding:.55rem .7rem;
  border:1px solid rgba(128,128,128,.4);border-radius:4px;background:transparent;color:inherit}

.btn.small{padding:.5rem .85rem;font-size:.85rem;white-space:nowrap}
.btn.ghost{background:transparent;border:1px solid rgba(128,128,128,.45);color:inherit}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.actions form{margin:0}

.suggest{margin-top:.6rem;font-size:.88rem}
.suggest summary{cursor:pointer;opacity:.75}
.suggest-body{margin:.5rem 0 0;padding:.7rem .85rem;border-left:2px solid rgba(128,128,128,.4);opacity:.85}

.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.6rem;margin:.5rem 0}
.type{display:grid;gap:.2rem;justify-items:center;text-align:center;padding:.85rem .5rem;
  border:1px solid rgba(128,128,128,.35);border-radius:5px;text-decoration:none;color:inherit}
.type.on{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.type-ico{font-size:1.25rem;line-height:1}
.type-name{font-weight:600;font-size:.92rem}
.type-fee{font-size:.75rem;opacity:.6}

.summary{margin:1rem 0;border:1px solid rgba(128,128,128,.3);border-radius:5px;padding:.65rem .85rem}
.summary-row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;padding:.22rem 0}
.summary-not{font-size:.78rem;opacity:.62;padding:.05rem 0 .1rem}
.summary-row .vart{display:block;font-style:normal;font-size:.78rem;opacity:.62;margin-top:.1rem}
.summary-row.total{border-top:1px solid rgba(128,128,128,.3);margin-top:.35rem;padding-top:.5rem;font-weight:600}

.qr-label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-bottom:.5rem}
.tag-open{opacity:1}
.tag-created,.tag-closed{opacity:.55}
form.inline{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
form.inline .field{margin:0}

.checkline{margin-top:.85rem;padding:.6rem .8rem;border:1px dashed rgba(128,128,128,.4);
  border-radius:4px;font-size:.85rem;opacity:.85}

/* ---------- v3: din egen hälsning ---------- */
.mine{border:1px solid rgba(128,128,128,.3);border-radius:5px;padding:.8rem .95rem;margin:.6rem 0;display:grid;gap:.4rem}
.mine-top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.95rem}
.mine-msg{margin:0;font-size:.92rem;opacity:.85}
.mine-actions{display:flex;gap:1rem;align-items:center;font-size:.86rem}
.mine-actions form{margin:0}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:.86rem;color:inherit;
  opacity:.7;text-decoration:underline;cursor:pointer}
.linkbtn:hover{opacity:1}

/* ---------- v3: mottagarens tack (loopen) ---------- */
.thanks-media{margin-bottom:1rem}
.thanks-media img,.thanks-media video{width:100%;border-radius:5px;display:block}
.thanks-msg{font-family:Georgia,'Iowan Old Style',serif;font-size:1.15rem;line-height:1.5;margin:0}
.thanks-from{margin:.7rem 0 0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.quiet-cta{opacity:.75}
.quiet-cta p{margin:0 0 .4rem;font-size:.92rem}
.ce-quiet{margin-top:1.4rem;font-size:.85rem;opacity:.45;text-align:center}
.banner-sub{display:inline-block;margin-top:.35rem;font-size:.85rem;opacity:.75}

/* Bokens länk i avslutet — dämpad med flit. Den ska gå att missa. */
.ce-link { color: #c9bb9a; text-decoration: none; border-bottom: 1px solid rgba(201,187,154,.4);
           font-size: 15px; }
.ce-link:hover { border-bottom-color: #c9bb9a; }

/* Bokraden i verkstaden — flera kontroller på en rad, inte en klickbar länk som kortraden. */
.bok-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bok-row .row-occ em { color: var(--muted); font-style: normal; font-size: 13px; }
.btn.small { padding: 7px 13px; font-size: 14px; }

.bok-erbjud { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.bok-erbjud h3 { font-size: 17px; font-weight: 600; }

/* Klasser med egen display (.field är display:block) slår ut webbläsarens [hidden].
   Utan den här raden döljs ingenting som göms med hidden-attributet. */
[hidden] { display: none !important; }

/* Solo-gaffeln på skapa-sidan. Två val, sida vid sida, med priset synligt —
   ingen ska välja fel nivå och upptäcka det efteråt. */
.lage-grid { display: grid; gap: 10px; margin-bottom: 4px; }
@media (min-width: 34rem) { .lage-grid { grid-template-columns: 1fr 1fr; } }
.lage input { position: absolute; opacity: 0; pointer-events: none; }
.lage-inner { display: grid; gap: 5px; padding: 15px 16px; border: 1px solid var(--line);
              border-radius: 12px; cursor: pointer; background: #fdfcf9; height: 100%;
              align-content: start; }
.lage input:checked + .lage-inner { border-color: var(--gold); background: #fbf6ea;
                                    box-shadow: 0 0 0 2px #f0e6cf inset; }
.lage input:focus-visible + .lage-inner { outline: 2px solid var(--accent); outline-offset: 2px; }
.lage-namn { font-size: 16px; font-weight: 600; }
.lage-text { font-size: 13px; color: var(--muted); line-height: 1.5; font-family: var(--etikett); }
.lage-pris { font-size: 14px; color: var(--accent); font-family: var(--etikett); margin-top: 2px; }

/* Kryssrutan i gåvosteget — givarens eget påstående att pengarna är skickade. */
.check{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0 .3rem;cursor:pointer}
.check input{width:1.15rem;height:1.15rem;margin-top:.15rem;flex:none;accent-color:var(--accent)}
.check span{font-size:.95rem;line-height:1.5}

/* Bocken i lobbyn: klar. Aldrig ett belopp — bara klar eller inte.
   (Kommentaren sa "har swishat sin del" till 2026-09-02. Den instruktionen togs
   bort ur betalning/reserv.js 2026-08-27; chippen betyder numera bara klar.) */
.chip-klar{border-color:var(--ok-line);background:var(--ok-bg)}
.chip-bock{margin-left:.35rem;color:var(--ok-ink);font-size:.85em}


/* Vägen ut ur gåvosteget. Ska vara lika lätt att hitta som knappen bredvid, men inte
   konkurrera med den — den som vill ge pengar ska inte tvivla, och den som inte vill
   ska inte behöva leta. */
.btn-tyst {
  display: block; width: 100%; margin-top: 10px;
  padding: 13px 18px; font: inherit; font-size: 15px;
  background: transparent; color: var(--muted, #6b6560);
  border: 1px solid currentColor; border-radius: 3px;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.btn-tyst:hover { color: var(--ink, #1e1b18); }
.btn-tyst:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ===== Verkstadens flikar =====
   Två vyer på samma verkstad: kortlistan och provbänken. Serverrenderade länkar,
   inte JS-flikar — vyerna har olika data och ska gå att bokmärka var för sig. */
.flikar { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid var(--line); }
.flik {
  padding: 11px 16px; font-size: 15px; text-decoration: none; color: var(--muted);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0; margin-bottom: -1px; white-space: nowrap;
}
.flik:hover { color: var(--ink); }
.flik.aktiv { background: #fff; color: var(--ink); border-color: var(--line); font-weight: 600; }
.flik:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Flikarna sitter ihop med panelen under — den ska inte ha eget toppavstånd. */
.flikar + .card-panel { margin-top: 0; border-radius: 0 16px 16px 16px; }

/* ===== Provbänkens QR-koder =====
   Samma kort som .qr-pair men i ett rutnät som tål ett, två eller tre. */
.qr-trio { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .qr-trio { grid-template-columns: 1fr 1fr; } .qr-trio.ensam { grid-template-columns: minmax(0, 320px); } }
.qr-trio .qr-card { display: flex; flex-direction: column; }
.qr-trio .qr { max-width: 240px; }
.qr-forklaring { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 2px; flex: 1; }
.qr-url {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--accent);
  margin-top: 12px; word-break: break-all; line-height: 1.45;
}

/* Provbänkens koder går att TRYCKA på — man kan inte skanna sin egen skärm.
   Bara i verkstaden; på riktiga kort finns ingen länk att trycka på. */
.qr-lank { display: block; border: 0; text-decoration: none; border-radius: 10px; }
.qr-lank:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.qr-lank:active { opacity: .7; }
.qr-url a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(138,122,92,.4); }
.qr-url a:hover { border-bottom-color: var(--accent); }

/* ===== Provlisten =====
   PROTOTYPHJÄLP, inte produkt (PROVLIST=0 stänger av). Fast längst ned så man alltid
   kan ta sig mellan rummen — utan den är man instängd i det flöde man råkar stå i.
   Medvetet ful och systemtypsnitt: den ska aldrig kunna läsas som en del av kortet. */
.provlist {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; gap: 2px; align-items: center; flex-wrap: wrap;
  padding: 6px 8px; background: #1d1a16; font-family: var(--etikett);
  box-shadow: 0 -1px 0 rgba(255,255,255,.14);
}
.provlist-namn {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.42); padding: 0 8px 0 4px;
}
.provlist a {
  color: rgba(255,255,255,.82); text-decoration: none; font-size: 13px;
  padding: 8px 11px; border-radius: 7px; border: 0; line-height: 1;
}
.provlist a:hover { background: rgba(255,255,255,.10); color: #fff; }
.provlist a.har { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.provlist a:focus-visible { outline: 2px solid #b8a98f; outline-offset: 1px; }
/* Listen ligger över sidans slut — ge innehållet plats att ta slut ovanför den.
   Scopat med :has() så att en sida UTAN list (PROVLIST=0) inte får död yta i botten. */
body:has(.provlist) { padding-bottom: 52px; }
/* Ceremonin är 100vh-centrerad. Utfyllnad skulle knuffa den och ge falsk rullning —
   där krymper vi scenen i stället, så bilden fortfarande centreras i det som syns. */
body.ceremony:has(.provlist) { padding-bottom: 0; }
body.ceremony:has(.provlist) .stage { min-height: calc(100vh - 52px); }
@media print { .provlist { display: none; } body:has(.provlist) { padding-bottom: 0; } }

/* ===== Provflödets steg ===== PROTOTYPHJÄLP, se PROVLIST i server.js. */
.steg { position: relative; }
.steg h2 { display: flex; align-items: center; gap: 10px; }
.steg-nr {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--etikett); font-size: 14px; font-weight: 600;
}
.steg.aktiv { border-color: var(--accent); }
.steg.vantar { opacity: .55; }
.steg.klar .steg-nr { background: var(--gold); }
.klarrad { margin-top: 12px; font-size: 15px; color: var(--muted); }
.provknappar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.provstatus-rad { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.provqr { margin-top: 16px; }
.provqr > summary {
  cursor: pointer; font-family: var(--etikett); font-size: 13px; color: var(--muted);
  padding: 6px 0; list-style: none;
}
.provqr > summary::before { content: "⌗ "; }
.provqr[open] > summary { color: var(--ink); }
.provqr .qr { max-width: 200px; }

/* ===== Handstil som bläck, inte som foto =====
   Bilden är svart med alfakanal. Den målas med currentColor genom en mask, så SAMMA
   fil blir ljust bläck mot ceremonins mörka grund och mörkt bläck mot boksidans papper.
   Hade färgen bakats in vid uppladdningen hade den bara fungerat på ett av ställena. */
.ce-handstil, .blackskrift {
  display: block; width: 100%; max-width: 420px; margin: 0 auto 22px;
  aspect-ratio: auto; min-height: 90px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.blackskrift { min-height: 120px; height: 160px; }
.ce-handstil { height: min(46vh, 320px); }

/* Provet i hälsningsformuläret: bläcket mot papper, med väg tillbaka till fotot. */
.blackprov {
  background: #f5efe2; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; display: grid; place-items: center; min-height: 140px;
}
.blackprov.ar-foto { background: #2a2620; padding: 0; overflow: hidden; }
.blackprov-bild {
  width: 100%; max-height: 260px; object-fit: contain;
  /* Alfabilden är svart; mot det ljusa provpapperet syns den som den kommer att tryckas. */
}
.blackprov-foto { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.blackprov-rad { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }

/* ---------------------------------------------------------------- köpflödet */
.kop-grid { display: grid; gap: 12px; margin-bottom: 18px; }
.kop-val { display: grid; gap: 5px; padding: 16px 18px; border: 1px solid var(--line);
           border-radius: 12px; background: #fdfcf9; text-decoration: none; color: inherit;
           transition: border-color .15s, box-shadow .15s; }
.kop-val:hover, .kop-val:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 2px #f0e6cf inset; }
.kop-namn { font-size: 17px; font-weight: 600; }
.kop-pris { font-size: 14px; color: var(--accent); font-family: var(--etikett); }
.kop-kort { font-size: 13.5px; font-family: var(--etikett); line-height: 1.5; }
.kop-lang { font-size: 13px; color: var(--muted); font-family: var(--etikett); line-height: 1.55; }
.kop-pil  { font-size: 13px; color: var(--accent); font-family: var(--etikett); margin-top: 4px; }
.kop-rubrik { font-size: 15px; margin: 0 0 10px; }
.kop-rad { display: grid; gap: 10px; }
@media (min-width: 30rem) { .kop-rad { grid-template-columns: 1fr 1.4fr; } }
.kop-adress { font-family: var(--etikett); font-size: 14px; line-height: 1.7; margin: 0; }
.kop-kortlista code { font-size: 14px; letter-spacing: .04em; }
.kop-nu { border-color: var(--gold); background: #fbf6ea; }
.utkorg-text { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
               font-size: 12.5px; line-height: 1.6; background: #fbfaf7; border: 1px solid var(--line);
               border-radius: 8px; padding: 12px 14px; margin: 10px 0; overflow-x: auto; }
.utkorg-klar { opacity: .62; }

/* Samnas hälsningsrum. Färger hålls i tokens för båda kundvyerna. */
body.lobby { --ground:#191719; --surface:#221f22; --surface-2:#2c272a; --paper:#faf5ea; --wine:#702d43; --botanical:#a58851; --glow:rgba(112,45,67,.2); background:radial-gradient(ellipse at 80% 22%,var(--glow),transparent 48%),var(--ground); }
.lobby-wrap { max-width:1120px; padding:28px 48px 0; margin:auto; }
.lobby-nav { display:flex; justify-content:space-between; align-items:center; padding-bottom:25px; border-bottom:1px solid var(--rule); color:var(--ink-soft); font-size:15px; }
.lobby-brand { display:inline-flex; line-height:0; }
/* Penselloggan (2026-10-11). Två masker i rummets färger: tuschet i --ink, punkten i --accent. */
.samna-logo{display:inline-block;position:relative;height:44px;aspect-ratio:2001/833;vertical-align:middle}.samna-logo::before,.samna-logo::after{content:"";position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.samna-logo::before{background:var(--ink,#16201c);-webkit-mask-image:url(/hemsida/samna-logotyp-tusch.svg);mask-image:url(/hemsida/samna-logotyp-tusch.svg)}.samna-logo::after{background:var(--accent,#8a2d52);-webkit-mask-image:url(/hemsida/samna-logotyp-punkt.svg);mask-image:url(/hemsida/samna-logotyp-punkt.svg)}

.lobby .guard { margin:20px 0 0; border:0; background:transparent; padding:0; color:var(--ink-soft); font-size:15px; }
.lobby-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:center; padding:65px 0 70px; }
.lobby .eyebrow { font-size:12px; letter-spacing:.19em; color:var(--accent); margin-bottom:22px; }
.lobby h1 { font-size:clamp(48px,5.3vw,69px); line-height:1.09; font-weight:400; letter-spacing:-.035em; }
.lobby h1 em { color:var(--accent); font-weight:400; }
.lobby-lede { font-size:21px; line-height:1.5; max-width:370px; color:var(--ink-soft); margin:25px 0 29px; }
.lobby-cta { display:inline-flex; align-items:center; gap:40px; padding:16px 24px; font-size:19px; }
.lobby-small { font-size:15px; color:var(--ink-soft); margin-top:13px; }.lobby-status{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:16px;color:var(--accent)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.keepsake-preview{max-width:330px;width:100%;justify-self:center;transform:rotate(3deg)}
.paper-card{position:relative;aspect-ratio:148/210;background:var(--paper);color:var(--wine);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 30px;box-shadow:14px 24px 45px rgba(0,0,0,.3);overflow:hidden;text-align:center}
.paper-card:before{content:'';position:absolute;inset:15px;border:1px solid var(--botanical);opacity:.4}
.paper-eyebrow{font-size:10px;letter-spacing:.22em;margin-bottom:17px}.paper-name{font:48px var(--disp);z-index:1}.paper-age{font:110px/.98 var(--disp);margin-top:16px;letter-spacing:-7px;z-index:1}.paper-years{font-size:11px;letter-spacing:.3em;margin-top:8px}.paper-rule{width:25px;border-top:1px solid var(--botanical);margin:22px 0 15px}.paper-line{font-size:15px;font-style:italic;max-width:150px;line-height:1.4;z-index:1}.paper-star{font-size:70px}
.card-botanical{position:absolute;color:var(--botanical);width:35%;right:-5px;bottom:-10px;opacity:.65;pointer-events:none}
.preview-caption{text-align:center;font-size:14px;font-style:italic;margin-top:22px;color:var(--ink-soft)}
.lobby-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;border-block:1px solid var(--rule);padding:27px 0 30px}.lobby-steps span{color:var(--accent);font-size:13px}.lobby-steps h2{font-size:19px;font-weight:400;margin:8px 0}.lobby-steps p{font-size:16px;color:var(--ink-soft);line-height:1.4}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:15px}.lobby .card-panel{padding:30px;}.lobby .card-panel .eyebrow{margin-bottom:14px;font-size:10px}.lobby .card-panel h2{font-size:26px;font-weight:400;line-height:1.2}.lobby .muted{font-size:17px}.lobby .hint{font-size:15px;line-height:1.45}.lobby .roster{gap:10px;margin:22px 0}.person{display:flex;gap:9px;align-items:center;background:var(--surface-2);padding:7px 11px 7px 7px;border-radius:30px;font-size:16px;max-width:100%;overflow-wrap:anywhere}.person-initial{display:grid;place-items:center;flex-shrink:0;border:1px solid var(--accent-line);border-radius:50%;width:30px;height:30px;color:var(--accent);font-style:italic}.person-check{font-size:11px;color:var(--accent)}
.lobby .share input{min-width:0;font-size:14px}.organizer-tools{border-top:1px solid var(--rule);margin-top:35px;padding:20px 0;color:var(--ink-soft)}.organizer-tools summary{cursor:pointer}.organizer-tools .actions{margin-top:18px}.lobby-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:45px;border-top:1px solid var(--rule);padding:30px 0;color:var(--ink-soft);font-size:16px}.lobby-footer .lobby-brand{font-size:26px}.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}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.lobby h1,.paper-name{overflow-wrap:anywhere}.lobby-grid>*{min-width:0}
@media(max-width:700px){.lobby-wrap{padding:20px 23px 0}.lobby-nav{padding-bottom:18px}.lobby-nav>span:last-child{font-size:13px}.lobby-hero{grid-template-columns:1fr;gap:38px;padding:43px 0}.lobby h1{font-size:52px}.lobby-lede{font-size:20px;max-width:100%}.keepsake-preview{max-width:245px}.paper-name{font-size:38px}.paper-age{font-size:84px}.paper-eyebrow{margin-bottom:10px}.paper-rule{margin:16px 0 10px}.lobby-steps{gap:22px;grid-template-columns:1fr;padding:25px 0}.lobby-steps>div{padding-left:34px;position:relative}.lobby-steps>div>span{position:absolute;left:0;top:11px}.lobby-steps h2{margin-top:4px}.lobby-grid{grid-template-columns:1fr;gap:0}.lobby .card-panel{padding:24px}.lobby-footer{align-items:flex-start}.lobby-footer p{max-width:210px;text-align:right}.types{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

.birthday-name{font:clamp(52px,12vw,86px) var(--disp);color:var(--accent);margin:20px 0}.ceremony .birthday-name+.card-line{font-size:22px}

/* Emelies rosa familjekort delar samma original med trycksaken. */
body.lobby.pink-party{--accent:#f5a5c8;--glow:rgba(191,68,122,.17);--paper:#fff0f5}.pink-party .keepsake-preview{transform:none}.pink-preview{width:100%;aspect-ratio:148.5/210;box-shadow:12px 24px 45px rgba(0,0,0,.3)}

/* Hälsningar: bevara radbrytningar och hela bild-/filmformatet på mobilen. */
.ce-msg { width: 100%; min-width: 0; }
.ce-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: clamp(21px, 5.5vw, 26px); }
.ce-msg-name { overflow-wrap: anywhere; }
.ce-media { width: 100%; max-width: 460px; }
.ce-media img, .ce-media video { height: auto; object-fit: contain; }

/* PRESENTKORTET I KUVERTET (reveal.js, buildKuvert). Måtten är andelar av scenen, som börjar 40 bildpunkter
   ovanför fliken när den är uppfälld i det målade kuvertet (1165 × 1307, css-matt.py i pilotmappen): plats för kortet när det glider ut. */
.ce-kuvert { position: relative; width: 100%; max-width: 460px; margin: 0 auto 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.kv-scen { position: relative; width: 100%; aspect-ratio: 1165 / 1307; perspective: 1400px; }
.kv-scen::before { content: ''; position: absolute; left: -12%; right: -12%; top: 30%; bottom: -14%; background: radial-gradient(closest-side, rgba(255, 238, 205, .10), rgba(255, 238, 205, 0)); }
.kv-scen > img, .kv-flik { position: absolute; left: 0; width: 100%; display: block; }
.kv-insida, .kv-ficka { top: 43.31%; height: 56.69%; }
.kv-insida { z-index: 1; }
.kv-ficka { z-index: 3; }
.kv-flik { top: 44.84%; height: 36.42%; z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.45, .05, .3, 1); }
.kv-flik img { position: absolute; left: 0; top: 0; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kv-fram { height: 100%; }
.kv-bak { height: 93.70%; transform: rotateX(180deg); }
.kv-scen > .kv-kort { left: 11.37%; width: 77.25%; top: 47.13%; height: auto; z-index: 2; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform 1.1s cubic-bezier(.2, .7, .25, 1); }
.kv-tips { text-align: center; margin-top: 12px; font-family: var(--etikett); font-size: 13px; letter-spacing: .04em; color: #b3a081; transition: opacity .4s; }
.ce-kuvert:focus-visible .kv-scen { outline: 2px solid #b3a081; outline-offset: 6px; border-radius: 6px; }
.ce-kuvert.oppnar { cursor: default; }
.ce-kuvert.oppnar .kv-tips { opacity: 0; }
.ce-kuvert.oppnar .kv-flik { transform: rotateX(180deg); }
.ce-kuvert.ute .kv-flik { z-index: 1; }
.ce-kuvert.ute .kv-kort { transform: translateY(-95.5%); }
/* Spara tar ingen plats förrän kortet ligger framme, så att det inte blir en tom lucka under det stängda kuvertet. */
.kv-spara { display: none; margin: 4px auto 0; }
.ce-kuvert.framme .kv-spara { display: block; animation: fade .7s ease .3s both; }
.ce-kuvert.oppnar .kv-tips { display: none; }
.ce-kuvert.framme .kv-kort { z-index: 5; transform: translateY(-44.1%) scale(1.19); box-shadow: 0 18px 42px rgba(0, 0, 0, .5);
  transition: transform .9s cubic-bezier(.4, 0, .2, 1), box-shadow .9s; }

/* ===== Ljusa ceremonin (2026-10-11) =====
   Vanliga rum (inte pilotrummen) får bukettkortets ljusa stil, samma som telefonerna på hemsidan: gräddvitt papper,
   mörkbrunt bläck, namnen i kursiv, en rosa spelknapp med ljudspår och mörka knappar. Klassen ljus sätts i
   views/reveal.ejs. Allt står under body.ceremony.ljus så att det går före tillfällenas mörka hudar ovan. */
body.ceremony.ljus {
  --ground:#f6f0e5; --surface:#fbf7ef; --surface-2:#efe6d6;
  --ink:#3a2f29; --ink-soft:#54473e; --ink-faint:#86796d;
  --rule:rgba(58,47,41,.16); --rule-soft:rgba(58,47,41,.08);
  --accent:#96525a; --accent-wash:#f1e4df; --accent-line:rgba(150,82,90,.35);
  --btn-bg:#3a2f29; --btn-ink:#f6f0e5;
  background-color:#f6f0e5; color:#3a2f29;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
}
body.ceremony.ljus .card-line { color:var(--ink-soft); font-size:23px; }
body.ceremony.ljus .hint, body.ceremony.ljus .ce-skip, body.ceremony.ljus .voice-tag { color:var(--ink-faint); }
body.ceremony.ljus .ce-line { color:var(--ink); font-size:28px; }
body.ceremony.ljus .ce-sub, body.ceremony.ljus .ce-breath, body.ceremony.ljus .ce-amt-intro,
body.ceremony.ljus .ce-amt-sub, body.ceremony.ljus .ce-adult { color:var(--ink-soft); }
body.ceremony.ljus .ce-count { color:var(--accent); font-style:italic; font-weight:400; font-size:112px; }
body.ceremony.ljus .ce-amount { color:var(--ink); }
body.ceremony.ljus .ce-msg-text { color:var(--ink); }
body.ceremony.ljus .ce-msg-text.caption { color:var(--ink-soft); font-size:21px; }
body.ceremony.ljus .ce-msg-name { color:var(--ink-soft); font-style:italic; font-size:21px; letter-spacing:0; }
body.ceremony.ljus .ce-msg-name.top { color:var(--ink); font-size:54px; line-height:1; margin-bottom:24px; }
body.ceremony.ljus .ce-end { color:var(--ink); font-size:24px; }
body.ceremony.ljus .ce-link { color:var(--accent); border-bottom-color:var(--accent-line); }
/* Räkningen står överst, som på telefonen på hemsidan: "2 av 7". */
body.ceremony.ljus #messages .ce-prog { order:-1; margin:0 0 30px; color:var(--ink-faint); font-size:15px; font-variant-numeric:tabular-nums; }
/* Knapparna: mörka och runda. Den genomskinliga varianten med en tunn kant. */
body.ceremony.ljus .ce-btn { background:var(--btn-bg); color:var(--btn-ink); border:0; padding:14px 30px; }
body.ceremony.ljus .ce-btn:hover { background:#4a3d35; }
body.ceremony.ljus .ce-btn.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(58,47,41,.35); }
body.ceremony.ljus .ce-btn.ghost:hover { background:rgba(58,47,41,.06); }
body.ceremony.ljus .ce-btn:focus-visible, body.ceremony.ljus .voice-orb:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* Spelknappen: rosa med ljus triangel, två streck när den spelar. Tecknet i knappen döljs, det kan bli en emoji. */
body.ceremony.ljus .voice-orb { position:relative; width:86px; height:86px; border:0; background:var(--accent); color:transparent; font-size:0; padding:0; box-shadow:0 10px 24px -12px rgba(150,82,90,.7); }
body.ceremony.ljus .voice-orb::before { content:''; position:absolute; left:50%; top:50%; margin:-13px 0 0 -8px; border-left:24px solid #f6f0e5; border-top:13px solid transparent; border-bottom:13px solid transparent; }
body.ceremony.ljus .voice-orb.playing { background:var(--accent); animation:ljusPuls 1.7s ease-in-out infinite; }
body.ceremony.ljus .voice-orb.playing::before { margin:-13px 0 0 -10px; width:20px; height:26px; border:0; border-left:7px solid #f6f0e5; border-right:7px solid #f6f0e5; box-sizing:border-box; }
@keyframes ljusPuls { 0% { box-shadow:0 0 0 0 rgba(150,82,90,.35); } 70% { box-shadow:0 0 0 22px rgba(150,82,90,0); } 100% { box-shadow:0 0 0 0 rgba(150,82,90,0); } }
.ce-vag { display:none; }
body.ceremony.ljus .ce-vag { display:flex; align-items:center; justify-content:center; gap:5px; height:34px; margin:8px auto 14px; }
body.ceremony.ljus .ce-vag span { flex:none; width:4px; border-radius:2px; background:rgba(150,82,90,.32); transform-origin:50% 50%; }
body.ceremony.ljus .ce-msg.spelar .ce-vag span { background:var(--accent); animation:ljusVag .9s ease-in-out infinite alternate; }
@keyframes ljusVag { from { transform:scaleY(.45); } to { transform:scaleY(1); } }
/* Foto och film: som ett fotografi på papperet. */
body.ceremony.ljus .ce-media { border-radius:4px; border:8px solid #fffdf8; background:#fffdf8; box-shadow:0 16px 34px -16px rgba(58,47,41,.5); }
body.ceremony.ljus .ce-media img, body.ceremony.ljus .ce-media video { background:#fffdf8; }
/* Kuvertet: ingen ljusglöd bakom, en mjuk skugga under fickan och mörkare tips. */
body.ceremony.ljus .kv-scen::before { display:none; }
body.ceremony.ljus .kv-ficka { filter:drop-shadow(0 16px 16px rgba(58,47,41,.22)); }
body.ceremony.ljus .kv-tips { color:var(--ink-faint); }
@media (prefers-reduced-motion: reduce) {
  body.ceremony.ljus .ce-msg.spelar .ce-vag span, body.ceremony.ljus .voice-orb.playing { animation:none; }
}