/* ===== Gästernas sidor: lobbyn och skrivsidan =====
   Trycksak, inte app. Joakim 2026-09-28: "pilarna ser ai ut osv". Därför finns här inga
   pilar, inga ikoner, inga numrerade steg och inga rutor runt varje stycke. Det som bär
   sidan är ord, tunna linjer och kortets egna färger och typsnitt.

   Knappen är en tryckt etikett: raka hörn, versaler och en tunn linje innanför kanten.
   Temat styr bara tokens. Standard här är kundhudens Garamond och Bodoni. Piloterna byter
   till omslagets rubriktypsnitt i _pilot-style.ejs, som laddas efter den här filen.

   Emelies frysta rum laddar /editions/keepsake-v1/style.css och påverkas inte. */

body.kund.gast {
  --knapp-typ: var(--etikett);
  --knapp-vikt: 600;
  --knapp-spatie: .16em;
  --knapp-storlek: 15px;
  --knapp-linje: rgba(20, 19, 23, .3);
  --rubrik-typ: var(--disp);
  --rubrik-vikt: 400;
  --rubrik-spatie: -.02em;
  --rubrik-em-typ: var(--disp);
  --bredd: 100%;
  background: var(--ground);
  font-size: 18px;
  line-height: 1.5;
}

/* ---------- Knapparna ---------- */

body.gast .btn,
body.gast .rec-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 400px; min-height: 58px;
  padding: 16px 24px 16px calc(24px + var(--knapp-spatie));
  border: 0; border-radius: 2px;
  background: var(--btn-bg); color: var(--btn-ink);
  font-family: var(--knapp-typ); font-weight: var(--knapp-vikt); font-size: var(--knapp-storlek); font-stretch: var(--bredd);
  line-height: 1.2; letter-spacing: var(--knapp-spatie); text-transform: uppercase;
  text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 5px var(--btn-bg), inset 0 0 0 6px var(--knapp-linje);
  -webkit-tap-highlight-color: transparent;
}
body.gast .btn:active, body.gast .rec-btn:active { transform: translateY(1px); }
@media (hover: hover) {
  body.gast .btn:hover { background: var(--accent); color: var(--btn-ink);
    box-shadow: inset 0 0 0 5px var(--accent), inset 0 0 0 6px var(--knapp-linje); }
}
body.gast .btn:focus-visible, body.gast .rec-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Den andra knappen: samma etikett, bara konturen. */
body.gast .btn.andra, body.gast .btn.ghost, body.gast .rec-btn {
  min-height: 52px; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
@media (hover: hover) {
  body.gast .btn.andra:hover, body.gast .btn.ghost:hover, body.gast .rec-btn:hover {
    background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
}
body.gast .rec-btn.rec-on { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: transparent; }
body.gast .rec-btn:disabled { opacity: .45; cursor: default; }

body.gast .link, body.gast .linkbtn, body.gast .suggest summary {
  color: var(--ink); border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 17px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--ink-faint);
}
body.gast .suggest summary { list-style: none; opacity: 1; }
body.gast .suggest summary::-webkit-details-marker { display: none; }

/* ---------- Text ---------- */

body.gast h1, body.gast h2 { font-family: var(--rubrik-typ); font-weight: var(--rubrik-vikt); letter-spacing: var(--rubrik-spatie); font-stretch: var(--bredd); }
body.gast h1 em { font-family: var(--rubrik-em-typ); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--accent); }
body.gast .hint, body.gast .mock { font-family: var(--text); font-size: 15px; line-height: 1.45; color: var(--ink-faint); }

/* Spärren mot mottagaren: en rad i kursiv, inte en varningsruta. */
body.gast .guard {
  margin: 20px 0 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: italic 16px/1.45 var(--text); color: var(--ink-soft);
}
body.gast .banner {
  margin: 20px 0 0; padding: 12px 16px; border: 0; border-left: 3px solid var(--accent); border-radius: 0;
  background: var(--surface); color: var(--ink); font-size: 17px;
}

/* ---------- Lobbyn ---------- */

body.kund.gast.lobby { background: var(--ground); }
body.gast .lobby-hero { padding: 40px 0 56px; }
body.gast .lobby-hero h1 { font-size: clamp(46px, 5.3vw, 69px); line-height: 1.04; }
body.gast .lobby-hero h1 em { display: block; margin-top: 6px; font-size: .8em; line-height: 1.12; }
body.gast .lobby-lede { margin: 22px 0 28px; }
body.gast .lobby-small { margin-top: 12px; font-size: 15px; color: var(--ink-faint); }
body.gast .keepsake-preview { max-width: 280px; transform: none; }
/* Kortet ligger snett, som på ett bord. Sidornas namn och bildtexten under står raka. */
body.gast .keepsake-preview > .paper-card, body.gast .keepsake-preview > .pilot-cover, body.gast .card-preview-sheet { transform: rotate(2.5deg); }

body.gast .lobby-avsnitt { border-top: 1px solid var(--rule); padding: 28px 0 32px; max-width: 640px; }
body.gast .lobby-avsnitt h2 { font-size: 25px; line-height: 1.2; margin-bottom: 10px; }
body.gast .lobby-avsnitt p { color: var(--ink-soft); }
body.gast .lobby-avsnitt p + p { margin-top: 8px; }
body.gast .roster { display: block; margin: 0; color: var(--ink); font-size: 20px; line-height: 1.45; }
body.gast .roster-namn { font-style: italic; }

body.gast .share { display: grid; gap: 10px; margin: 18px 0 0; max-width: 400px; }
body.gast .share input {
  width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--surface); color: var(--ink-soft); font: 15px/1.3 var(--text);
}
body.gast .invite-panel .hint:empty { display: none; }
body.gast .suggest { margin-top: 18px; font-size: 17px; }
body.gast .suggest-body { margin: 12px 0 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--rule); opacity: 1; color: var(--ink-soft); }

body.gast .my-greetings .mine { display: grid; gap: 4px; margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--rule-soft); border-radius: 0; }
body.gast .my-greetings .mine:first-of-type { border-top: 0; padding-top: 4px; }
body.gast .mine-top { display: flex; gap: 10px; align-items: baseline; justify-content: flex-start; color: var(--ink); }
body.gast .mine-top .muted { font-size: 15px; margin: 0; }
body.gast .mine-msg { margin-top: 6px; font-style: italic; }
body.gast .mine-actions { display: flex; gap: 22px; margin-top: 10px; }
body.gast .mine-actions form { margin: 0; }

body.gast .organizer-tools { margin-top: 0; padding: 22px 0; border-top: 1px solid var(--rule); color: var(--ink-soft); }
body.gast .organizer-tools summary { cursor: pointer; font-size: 17px; }
body.gast .organizer-tools .actions { display: grid; gap: 10px; margin-top: 18px; }

@media (max-width: 700px) {
  body.gast .lobby-hero { padding: 34px 0 44px; gap: 40px; }
  body.gast .lobby-hero h1 { font-size: 50px; }
  body.gast .lobby-lede { font-size: 20px; }
}

/* ---------- Skrivsidan ---------- */

body.gast .skriv-tillfalle { margin-top: 26px; font: italic 19px/1.3 var(--text); color: var(--accent); }
body.gast.skriv .kund-head h1 { margin-top: 6px; font-size: 38px; line-height: 1.08; }
body.gast.skriv .kund-head .hint { margin-top: 12px; }
body.gast .skriv-typ { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); }
body.gast .skriv-typ h2, body.gast .skriv-form h2 { font-size: 23px; line-height: 1.2; }
body.gast .skriv-form { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rule); }

/* Valet av hälsning: ett rakt fält med ord, som rutorna på en blankett. */
body.gast .types {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 1px;
  margin: 16px 0 0; background: var(--ink); border: 1px solid var(--ink); border-radius: 2px;
}
body.gast .type {
  display: grid; place-items: center; align-content: center; gap: 2px; min-height: 54px; padding: 8px 4px;
  background: var(--ground); color: var(--ink); border: 0; border-radius: 0; box-shadow: none; text-decoration: none;
}
body.gast .type.on { background: var(--ink); color: var(--ground); box-shadow: none; }
body.gast .type-name {
  font-family: var(--knapp-typ); font-weight: var(--knapp-vikt); font-size: calc(var(--knapp-storlek) - 1px);
  font-stretch: var(--bredd); letter-spacing: .08em; text-transform: uppercase;
}
body.gast .type-fee { font: 13px var(--text); opacity: .75; }
body.gast .skriv-typ .hint { margin-top: 12px; }

body.gast .field { margin-bottom: 20px; }
body.gast .field > span, body.gast .field-label { margin-bottom: 8px; font: 17px/1.3 var(--text); color: var(--ink-soft); }
body.gast .field input[type="text"], body.gast .field textarea {
  padding: 13px 14px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--surface); color: var(--ink); font: 18px/1.45 var(--text);
}
body.gast .field input:focus, body.gast .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: none; }
body.gast .field ::placeholder { color: var(--ink-faint); opacity: .8; }
body.gast .rec-row { display: grid; gap: 10px; }
body.gast .rec-status { font: 15px var(--text); color: var(--accent); }
body.gast .skriv-form .btn { margin-top: 8px; }

/* Presentkortet i rummet (views/presentkort.ejs, lobbyns Presentkortet). */
.pk-lede { margin-top: 10px; }
.pk-bild { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .45); margin-top: 6px; }
.pk-mallar { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pk-mallar legend { grid-column: 1 / -1; margin-bottom: 4px; }
.pk-mall { position: relative; display: flex; flex-direction: column; gap: 6px; font-size: 14px; cursor: pointer; }
.pk-mall input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pk-mall img { width: 100%; height: auto; display: block; border-radius: 3px; outline: 2px solid transparent; outline-offset: 2px; }
.pk-mall input:checked + img { outline-color: currentColor; }
.pk-mall input:focus-visible + img { outline-color: currentColor; outline-style: dashed; }
.present-panel .btn { margin-top: 6px; }
.pk-sort { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.pk-sort label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radie); cursor: pointer; }
.pk-sort label:has(input:checked) { border-color: currentColor; }
.pk-sort span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; }
.pk-sort input { margin-top: 4px; accent-color: currentColor; }
body.gast .pk-sort input[type="radio"] { width: auto; min-width: 0; height: auto; padding: 0; margin: 5px 0 0; flex: none; border: 0; box-shadow: none; background: none; }