/* Kyrco – designsystem. Storlekar i rem så att Textstorlek (Inställningar) skalar allt. */
:root {
  --bla-mork: #0b1730;
  --bla-djup: #0e1f42;
  --bla: #1f4e8c;
  --bla-hover: #173d6e;
  --bla-ljus: #eaf1fa;
  --guld: #d2ae62;
  --guld-mork: #b8913f;
  --guld-text: #6b4a10;
  --guld-ljus: #fbf3e1;
  --gron: #1f6b45;
  --gron-ljus: #e6f4ec;
  --gron-kant: #9fd0b3;
  --rod: #9b1c2e;
  --rod-ljus: #fbe7ea;
  --gul-text: #5e3f00;
  --gul-ljus: #fff6e5;
  --gul-kant: #f1d9a6;
  --lila: #5b3a8c;
  --lila-ljus: #ece4f6;
  --bg: #f4f5f8;
  --yta: #ffffff;
  --yta2: #f7f8fb;
  --text: #0f1b33;
  --text2: #3a465e;
  --text3: #56627a;
  --linje: #e3e8f0;
  --linje2: #c9d1de;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --radie: 10px;
  --radie-s: 6px;
  --skugga: 0 1px 2px rgba(15, 27, 51, 0.04);
  --skugga-lyft: 0 12px 32px rgba(15, 27, 51, 0.16);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html {
  /* Grundstorleken styr hela systemet, eftersom alla mått är i rem.
     Användaren väljer själv under Mer → Inställningar → Textstorlek. */
  font-size: 14.5px;
  height: 100%;
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
html[data-text='kompakt'] {
  font-size: 13px;
}
html[data-text='normal'] {
  font-size: 14.5px;
}
html[data-text='stor'] {
  font-size: 16.5px;
}
html[data-text='extra'] {
  font-size: 18.5px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.1875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--bla);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
a:hover {
  color: var(--bla-hover);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--guld);
  outline-offset: 2px;
  border-radius: 6px;
}
h1,
h2,
h3 {
  margin: 0;
}
.ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
.serif {
  font-family: var(--serif);
}

/* ---------- Layout ---------- */
.app {
  display: flex;
  min-height: 100vh;
}
.meny {
  width: 18.5rem;
  flex-shrink: 0;
  background: var(--bla-mork);
  color: #e6ebf4;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 0.9rem 1rem;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.meny-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.2rem 0.6rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--guld);
  text-decoration: none;
}
.meny-logo > svg {
  flex-shrink: 0;
}
.meny-namn {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.15rem;
}
.meny-namn b {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  overflow-wrap: break-word;
}
.meny-namn small {
  font-size: 0.85rem;
  color: #8c9ab5;
}
.meny-namn .sa-etikett {
  align-self: flex-start;
}
.meny nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.meny-l {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 3.15rem;
  padding: 0 0.9rem;
  border-radius: 6px;
  color: #e6ebf4;
  font-size: 1.12rem;
  text-decoration: none;
}
.meny-l:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.meny-l.pa {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-weight: 600;
}
.meny-l.pa .ic {
  stroke: var(--guld);
  stroke-width: 2;
}
.meny-l .n {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--guld);
  color: var(--bla-mork);
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
}
.meny-fot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.meny-hjalp {
  color: #c9d2e3;
}
.meny-hjalp .ic {
  stroke: var(--guld);
}
.meny-knapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.6rem;
  border-radius: 6px;
  border: 1.5px solid #33456a;
  background: transparent;
  color: #e6ebf4;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.meny-knapp:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.meny-knapp.guld {
  border-color: var(--guld);
  color: #f2dfaf;
}
.meny-anv {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0.4rem 0 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.meny-anv .avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  background: var(--guld);
  color: var(--bla-mork);
}
.meny-anv-in {
  flex: 1;
  min-width: 0;
}
.meny-anv b {
  display: block;
  font-size: 1rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meny-anv span {
  font-size: 0.85rem;
  color: #8c9ab5;
}
.meny-ut {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid #33456a;
  background: transparent;
  color: #c9d2e3;
  cursor: pointer;
}
.meny-ut:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.huvud {
  flex: 1;
  min-width: 0;
  padding: 2rem 2.75rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.topp {
  display: none;
}
.innehall {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 76rem;
  width: 100%;
}

@media (max-width: 960px) {
  .app {
    flex-direction: column;
  }
  .topp {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    align-items: center;
    gap: 0.75rem;
    background: var(--bla-mork);
    color: #fff;
    padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 1rem 0.6rem;
  }
  .topp b {
    font-family: var(--serif);
    font-size: 1.5rem;
    flex: 1;
  }
  .topp button {
    min-width: 3rem;
    min-height: 3rem;
    border-radius: 6px;
    border: 1.5px solid #33456a;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.8rem;
    cursor: pointer;
  }
  .meny {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    height: 100%;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    width: min(20rem, 88vw);
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
  }
  .meny.oppen {
    transform: none;
    box-shadow: 0 0 0 100vmax rgba(8, 14, 30, 0.5);
  }
  .huvud {
    padding: 1.25rem 1rem 2.5rem;
  }
}

/* ---------- Banner & rubriker ---------- */
.banner {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  min-height: 11rem;
  background: radial-gradient(120% 140% at 85% 20%, #1a3668 0%, #0e1f42 55%, #0a1733 100%);
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.banner-ark {
  position: absolute;
  right: 1rem;
  top: 0;
  width: 26rem;
  max-width: 60%;
  height: 100%;
  color: var(--guld);
  opacity: 0.7;
}
.banner-in {
  position: relative;
  padding: 2.2rem 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.banner h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
}
.banner p {
  margin: 0;
  font-size: 1.3rem;
  color: #e6ebf4;
}
.banner .vers {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: #f2dfaf;
}
.banner .vers small {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.95rem;
  color: #c4cee0;
  margin-left: 0.4rem;
}
.banner-h {
  position: relative;
  padding: 0 2.75rem 2.2rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.guld-linje {
  width: 4rem;
  height: 2px;
  background: var(--guld);
}
.sidrub {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sidrub h1 {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  line-height: 1.02;
}
.sidrub p {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text2);
}
.h2 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.05;
}
.h3 {
  font-size: 1.35rem;
  font-weight: 600;
}
.tillbaka {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.15rem;
  font-weight: 600;
  align-self: flex-start;
}
.dampad {
  color: var(--text3);
}
.liten {
  font-size: 1rem;
}

/* ---------- Kort & rader ---------- */
.kort {
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: 10px;
  box-shadow: var(--skugga);
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
.kort.tat {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.kort-rub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.rutnat {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.rutnat-2 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1.45fr 1fr;
  align-items: start;
}
@media (max-width: 1100px) {
  .rutnat-2 {
    grid-template-columns: 1fr;
  }
}
.rad {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.2rem 1.75rem;
  border-bottom: 1px solid var(--linje);
  min-width: 0;
}
.rad:last-child {
  border-bottom: none;
}
a.rad {
  text-decoration: none;
  color: inherit;
}
a.rad:hover {
  background: var(--yta2);
}
.rad-in {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.rad-titel {
  font-size: 1.25rem;
  font-weight: 600;
  overflow-wrap: break-word;
}
.rad-under {
  font-size: 1.1rem;
  color: var(--text2);
  overflow-wrap: break-word;
}
.rad-fot {
  padding: 1rem 1.75rem;
  background: var(--yta2);
  font-size: 1.05rem;
  color: var(--text2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .rad {
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
  }
  .kort {
    padding: 1.25rem 1.1rem;
  }
}
.nyckeltal {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.nt {
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: 10px;
  box-shadow: var(--skugga);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.nt b {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.nt span {
  font-size: 1.05rem;
  color: var(--text2);
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linje);
  font-size: 1.15rem;
}
.kv span:first-child {
  color: var(--text2);
}
.kv b {
  text-align: right;
  overflow-wrap: break-word;
  min-width: 0;
}

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.15rem;
  padding: 0 1.3rem;
  border-radius: 6px;
  border: 1.5px solid transparent;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
/* En enda primärfärg: mörkblå. Guld används bara som accent, inte på knappar. */
.btn-primar,
.btn-guld {
  background: var(--bla-mork);
  color: #fff;
}
.btn-primar:hover,
.btn-guld:hover {
  background: var(--bla-djup);
  color: #fff;
}
.btn-kontur,
.btn-gra {
  background: var(--yta);
  border-color: var(--linje2);
  color: var(--text);
}
.btn-kontur:hover,
.btn-gra:hover {
  border-color: var(--text3);
  color: var(--text);
}
.btn-fara {
  background: var(--yta);
  border-color: var(--linje2);
  color: var(--rod);
}
.btn-fara:hover {
  background: var(--rod-ljus);
  border-color: var(--rod);
  color: var(--rod);
}
.btn-mork {
  background: var(--bla-mork);
  color: #fff;
}
.btn-liten {
  min-height: 2.75rem;
  padding: 0 0.95rem;
  font-size: 1rem;
  border-radius: 6px;
}
.btn-full {
  width: 100%;
}
.rad-knappar {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
}
.lank-knapp {
  background: none;
  border: none;
  padding: 0.3rem 0;
  color: var(--bla);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  font-size: 1.15rem;
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
.chip-gron {
  background: var(--gron-ljus);
  color: var(--gron);
}
.chip-rod {
  background: var(--rod-ljus);
  color: var(--rod);
}
.chip-gul {
  background: var(--gul-ljus);
  color: var(--gul-text);
}
.chip-bla {
  background: var(--bla-ljus);
  color: var(--bla);
}
.chip-guld {
  background: var(--guld-ljus);
  color: var(--guld-text);
}
.chip-gra {
  background: #eef1f6;
  color: var(--text2);
}
.chip-lila {
  background: var(--lila-ljus);
  color: var(--lila);
}
.chip-mork {
  background: var(--bla-mork);
  color: #fff;
}
.prick {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.notis {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 500;
}
.notis-gul {
  background: var(--gul-ljus);
  border: 1px solid var(--gul-kant);
  color: var(--gul-text);
}
.notis-gron {
  background: var(--gron-ljus);
  border: 1px solid var(--gron-kant);
  color: var(--gron);
}
.notis-bla {
  background: var(--bla-ljus);
  border: 1px solid #b8cbe6;
  color: var(--bla);
}
.notis-rod {
  background: var(--rod-ljus);
  border: 1px solid #ebb7bf;
  color: var(--rod);
}

/* ---------- Formulär ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
/* Alla formulär har samma bredd som evenemangsformuläret. */
.form-kort {
  max-width: 44rem;
  width: 100%;
}
.falt {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.falt > label:not(.bild-yta):not(.kryss),
.falt-rub {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.08rem;
  font-weight: 600;
}
/* "Valfritt" står diskret till höger om fältnamnet. */
.friv {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text3);
}
.hint {
  font-size: 1rem;
  color: var(--text3);
}
.falt input,
.falt select,
.falt textarea,
.sok input {
  width: 100%;
  min-height: 3.4rem;
  padding: 0 1rem;
  border-radius: 6px;
  border: 1.5px solid var(--linje2);
  background: var(--yta);
  font-size: 1.2rem;
  color: var(--text);
}
.falt textarea {
  padding: 0.9rem 1.1rem;
  line-height: 1.45;
  resize: vertical;
}
.falt input:focus,
.falt select:focus,
.falt textarea:focus {
  outline: none;
  border-color: var(--bla);
  box-shadow: 0 0 0 3px rgba(31, 78, 140, 0.22);
}
.tva {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.4rem;
}
.val {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.val-k {
  position: relative;
  flex: 1;
  cursor: pointer;
}
/* Den riktiga radioknappen är dold men finns kvar för tangentbord och skärmläsare.
   Den får ingen bredd, annars sköt den ut sidan åt höger. */
.falt .val-k input,
.val-k input {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.val-k span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.3rem;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--linje2);
  background: var(--yta);
  font-size: 1.05rem;
  font-weight: 500;
  font-weight: 600;
  text-align: center;
}
.val-k span .ic {
  display: none;
  stroke: var(--bla-mork);
  stroke-width: 2.6;
}
.val-k input:checked + span {
  border-color: var(--bla-mork);
  box-shadow: inset 0 0 0 1px var(--bla-mork);
  background: var(--yta);
  font-weight: 600;
}
.val-k input:checked + span .ic {
  display: block;
}
.val-k input:focus-visible + span {
  outline: 3px solid var(--guld);
  outline-offset: 2px;
}
.kryss {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  font-size: 1.15rem;
  min-height: 2.8rem;
}
.kryss input {
  position: absolute;
  opacity: 0;
}
.kryss-ruta {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  border: 2px solid #9aa5b8;
  background: var(--yta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kryss-ruta .ic {
  opacity: 0;
  stroke: #fff;
  stroke-width: 3;
}
.kryss input:checked + .kryss-ruta {
  background: var(--bla);
  border-color: var(--bla);
}
.kryss input:checked + .kryss-ruta .ic {
  opacity: 1;
}
.kryss input:focus-visible + .kryss-ruta {
  outline: 3px solid var(--guld);
  outline-offset: 2px;
}
.sok {
  position: relative;
  display: flex;
  align-items: center;
}
.sok .ic {
  position: absolute;
  left: 1.1rem;
  color: var(--text3);
}
.sok input {
  padding-left: 3.2rem;
}
.form-fot {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linje);
}
.fel-text {
  color: var(--rod);
  font-weight: 600;
  font-size: 1.05rem;
}

/* Teckenräknare under korta textrutor */
.raknare {
  display: block;
  margin-top: 0.35rem;
  text-align: right;
  font-size: 0.85rem;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
/* Dolt fält som bara robotar fyller i (skydd mot spam i de publika formulären) */
.honung {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Flikar ---------- */
.flikar {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--linje);
}
.flik {
  min-height: 3.2rem;
  padding: 0 0.1rem;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.flik:hover {
  color: var(--text);
}
.flik.pa {
  border-bottom-color: var(--bla-mork);
  color: var(--text);
  font-weight: 600;
}
.flik-n {
  font-size: 0.85rem;
  border-radius: 6px;
  padding: 0.05rem 0.5rem;
  background: #eef1f6;
  color: var(--text2);
}
.flik.pa .flik-n {
  background: var(--bla-mork);
  color: #fff;
}
.verktyg {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
}
.verktyg .sok {
  flex: 1;
  min-width: 14rem;
}

/* ---------- Avatar, datumbåge ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
}
.bage {
  width: 4.2rem;
  min-height: 5rem;
  flex-shrink: 0;
  border-radius: 2.1rem 2.1rem 0.4rem 0.4rem;
  border: 1px solid var(--guld);
  background: #fbf7ee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0.5rem;
}
.bage small {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--guld-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bage b {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bage span {
  font-size: 0.8rem;
  color: var(--text2);
}
.tile {
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--linje);
  background: var(--yta2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bla-mork);
}
.bild {
  width: 9rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--yta2);
  border: 1px solid var(--linje);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
}

/* ---------- Toast, modal, laddar, tomt ---------- */
#toasts {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  pointer-events: none;
  width: min(40rem, 92vw);
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.4rem;
  border-radius: 10px;
  background: var(--bla-mork);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  border: 1px solid var(--guld);
  box-shadow: var(--skugga-lyft);
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.toast.fel {
  background: #4a0e18;
  border-color: #e08a97;
}
.toast.ut {
  opacity: 0;
  transform: translateY(8px);
}
.toast-ic {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--guld);
  color: var(--bla-mork);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast.fel .toast-ic {
  background: #e08a97;
}
.modal-bak {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 14, 30, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1rem;
  overflow-y: auto;
}
.modal {
  position: relative;
  width: min(40rem, 100%);
  background: var(--yta);
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-shadow: 0 20px 50px rgba(8, 14, 30, 0.22);
}
.modal.bred {
  width: min(58rem, 100%);
}
.modal-x {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 3rem;
  height: 3rem;
  border-radius: 6px;
  border: none;
  background: #f1f4f9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-rub {
  font-family: var(--serif);
  letter-spacing: -0.01em;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  padding-right: 3rem;
}
.m-text {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text2);
  line-height: 1.55;
}
.uppg {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.2rem;
  border-radius: 6px;
  background: var(--guld-ljus);
  border: 1px solid #e8d4a6;
}
.uppg div {
  display: flex;
  flex-direction: column;
}
.uppg span {
  font-size: 0.95rem;
  color: var(--guld-text);
  font-weight: 600;
}
.uppg b {
  font-size: 1.3rem;
  overflow-wrap: break-word;
}
.laddar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem;
  font-size: 1.15rem;
  color: var(--text2);
}
.snurra {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 3px solid var(--linje2);
  border-top-color: var(--bla);
  animation: snurr 0.8s linear infinite;
}
@keyframes snurr {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .snurra {
    animation: none;
  }
  .btn,
  .toast {
    transition: none;
  }
}
.tomt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--text2);
  font-size: 1.15rem;
}
.tomt-rub {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--text);
}

/* ---------- Banners för supportläge och drift ---------- */
.supportlage {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.4rem;
  background: repeating-linear-gradient(135deg, #0b1730 0 18px, #0e1d3c 18px 36px);
  border-bottom: 3px solid var(--guld);
  color: #fff;
}
.supportlage .etikett {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  background: var(--guld);
  color: var(--bla-mork);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}
.supportlage b {
  flex: 1;
  min-width: 14rem;
  font-size: 1.05rem;
}
.supportlage b small {
  display: block;
  font-weight: 400;
  color: #c4cee0;
  font-size: 0.9rem;
}
.driftnotis {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.8rem 1.1rem;
  border-radius: 6px;
  font-size: 1.05rem;
  background: var(--yta);
  border: 1px solid var(--linje);
  border-left: 3px solid var(--bla);
  color: var(--text);
}
.driftnotis.varning {
  border-left-color: var(--guld-mork);
}
.driftnotis.storning {
  border-left-color: var(--rod);
  background: var(--rod-ljus);
}

/* ---------- Kalender ---------- */
.farg-grupp {
  --f: #6fb891;
  --fb: #e6f4ec;
}
.farg-bokning {
  --f: #d9b25e;
  --fb: #fbf1dc;
}
.farg-evenemang {
  --f: #7fa0d1;
  --fb: #e7eef9;
}
.farg-aktivitet {
  --f: #9c86c6;
  --fb: #efeaf8;
}
.farg-vantar {
  --f: #c9d1de;
  --fb: #f7f8fb;
}
.forklaring {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 1.05rem;
  color: var(--text2);
}
.forklaring span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.forklaring i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--f);
  display: inline-block;
}
.vecka {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.dag {
  border-right: 1px solid var(--linje);
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dag:last-child {
  border-right: none;
}
.dag.idag {
  background: #fcfaf5;
}
.dag-huvud {
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  border-bottom: 1px solid var(--linje);
}
.dag-huvud small {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text2);
}
.dag-huvud b {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.dag.idag .dag-huvud b {
  background: var(--bla-djup);
  color: #fff;
}
.dag.son .dag-huvud small,
.dag.son .dag-huvud b {
  color: #8a1f2e;
}
.dag.idag.son .dag-huvud b {
  color: #fff;
}
.dag-lista {
  padding: 0.7rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.post {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-radius: 4px;
  background: var(--yta);
  border: 1px solid var(--linje);
  border-left: 3px solid var(--f);
  cursor: pointer;
  width: 100%;
  color: var(--text);
}
.post b {
  font-size: 1.05rem;
}
.post span {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}
.post small {
  font-size: 0.88rem;
  color: var(--text2);
  overflow-wrap: break-word;
  hyphens: auto;
}
.post.installd {
  opacity: 0.55;
  text-decoration: line-through;
}
.post.vantar {
  border-style: dashed;
  border-left-style: solid;
  background: var(--yta2);
}
.manad-huvud {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--yta2);
  border-bottom: 1px solid var(--linje);
}
.manad-huvud span {
  padding: 0.8rem 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text2);
}
.manad {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mdag {
  min-height: 8.5rem;
  padding: 0.5rem 0.4rem;
  border-right: 1px solid var(--linje);
  border-bottom: 1px solid var(--linje);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.mdag:nth-child(7n) {
  border-right: none;
}
.mdag.utanfor {
  background: var(--yta2);
}
.mdag.utanfor .mnr {
  color: #a3acbc;
}
.mnr {
  align-self: flex-start;
  min-width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.05rem;
}
.mdag.idag {
  background: #fcfaf5;
}
.mdag.idag .mnr {
  background: var(--bla-djup);
  color: #fff;
}
.mdag.son .mnr {
  color: #8a1f2e;
}
.mdag.idag.son .mnr {
  color: #fff;
}
.mpost {
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.25;
  padding: 0.25rem 0.4rem;
  border-radius: 2px;
  background: transparent;
  border: none;
  border-left: 3px solid var(--f);
  cursor: pointer;
  color: var(--text);
  overflow: hidden;
}
.mpost b {
  font-weight: 600;
}
@media (max-width: 900px) {
  .vecka {
    grid-template-columns: 1fr;
  }
  .dag {
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--linje);
  }
  .dag-huvud {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0.8rem 1rem;
  }
  .manad-huvud span {
    font-size: 0.75rem;
  }
  .mdag {
    min-height: 5rem;
  }
  .mpost {
    font-size: 0.72rem;
  }
}

/* ---------- TV ----------
   Skärmen i kyrkan. Lugn och tydlig: stor text, få element, mycket luft.
   Allt skalas med --u (1 % av skärmens kortaste sida) så att samma layout
   fungerar på tv, projektor, surfplatta och mobil. */
.tv {
  --tv-bg: #0d1a45;
  --tv-guld: #d2ae62;
  --tv-guld-ljus: #ecd9a8;
  --tv-text: #f5f1e8;
  --tv-nu: #93c5fd; /* himmelsblått = pågår just nu */
  --tv-dampad: #c4cee2; /* ljusare grå – lättare att läsa för äldre ögon */
  --tv-linje: rgba(245, 241, 232, 0.1);
  --u-bas: 1vmin;
  --u: var(--u-bas);
  /* Raka, feta rubriker i stället för serif – tydligare på avstånd */
  --serif: var(--sans);
  font-family: var(--sans);
  height: 100vh;
  height: 100dvh;
  /* Diskret rutmönster av romber, med ett svagt ljus uppe till vänster */
  background:
    radial-gradient(ellipse 70% 60% at 5% -8%, rgba(40, 92, 200, 0.38), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(5, 12, 38, 0.25)),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='450' viewBox='0 0 400 450'><path d='M0 -75.0L0 75.0L-50.0 0.0Z' fill='%23000' fill-opacity='0.007'/><path d='M0 -75.0L0 75.0L50.0 0.0Z' fill='%23000' fill-opacity='0.016'/><path d='M100 -75.0L100 75.0L50.0 0.0Z' fill='%23fff' fill-opacity='0.008'/><path d='M100 -75.0L100 75.0L150.0 0.0Z' fill='%23000' fill-opacity='0.019'/><path d='M200 -75.0L200 75.0L150.0 0.0Z' fill='%23fff' fill-opacity='0.003'/><path d='M200 -75.0L200 75.0L250.0 0.0Z' fill='%23000' fill-opacity='0.007'/><path d='M300 -75.0L300 75.0L250.0 0.0Z' fill='%23000' fill-opacity='0.019'/><path d='M300 -75.0L300 75.0L350.0 0.0Z' fill='%23000' fill-opacity='0.002'/><path d='M400 -75.0L400 75.0L350.0 0.0Z' fill='%23000' fill-opacity='0.007'/><path d='M400 -75.0L400 75.0L450.0 0.0Z' fill='%23000' fill-opacity='0.016'/><path d='M50.0 0.0L50.0 150.0L0.0 75.0Z' fill='%23000' fill-opacity='0.020'/><path d='M50.0 0.0L50.0 150.0L100.0 75.0Z' fill='%23000' fill-opacity='0.005'/><path d='M150.0 0.0L150.0 150.0L100.0 75.0Z' fill='%23000' fill-opacity='0.019'/><path d='M150.0 0.0L150.0 150.0L200.0 75.0Z' fill='%23000' fill-opacity='0.018'/><path d='M250.0 0.0L250.0 150.0L200.0 75.0Z' fill='%23000' fill-opacity='0.002'/><path d='M250.0 0.0L250.0 150.0L300.0 75.0Z' fill='%23fff' fill-opacity='0.011'/><path d='M350.0 0.0L350.0 150.0L300.0 75.0Z' fill='%23000' fill-opacity='0.016'/><path d='M350.0 0.0L350.0 150.0L400.0 75.0Z' fill='%23000' fill-opacity='0.013'/><path d='M450.0 0.0L450.0 150.0L400.0 75.0Z' fill='%23000' fill-opacity='0.020'/><path d='M450.0 0.0L450.0 150.0L500.0 75.0Z' fill='%23000' fill-opacity='0.005'/><path d='M0 75.0L0 225.0L-50.0 150.0Z' fill='%23fff' fill-opacity='0.007'/><path d='M0 75.0L0 225.0L50.0 150.0Z' fill='%23fff' fill-opacity='0.016'/><path d='M100 75.0L100 225.0L50.0 150.0Z' fill='%23fff' fill-opacity='0.005'/><path d='M100 75.0L100 225.0L150.0 150.0Z' fill='%23000' fill-opacity='0.006'/><path d='M200 75.0L200 225.0L150.0 150.0Z' fill='%23fff' fill-opacity='0.023'/><path d='M200 75.0L200 225.0L250.0 150.0Z' fill='%23000' fill-opacity='0.020'/><path d='M300 75.0L300 225.0L250.0 150.0Z' fill='%23fff' fill-opacity='0.017'/><path d='M300 75.0L300 225.0L350.0 150.0Z' fill='%23000' fill-opacity='0.010'/><path d='M400 75.0L400 225.0L350.0 150.0Z' fill='%23fff' fill-opacity='0.007'/><path d='M400 75.0L400 225.0L450.0 150.0Z' fill='%23fff' fill-opacity='0.016'/><path d='M50.0 150.0L50.0 300.0L0.0 225.0Z' fill='%23000' fill-opacity='0.015'/><path d='M50.0 150.0L50.0 300.0L100.0 225.0Z' fill='%23000' fill-opacity='0.017'/><path d='M150.0 150.0L150.0 300.0L100.0 225.0Z' fill='%23000' fill-opacity='0.008'/><path d='M150.0 150.0L150.0 300.0L200.0 225.0Z' fill='%23fff' fill-opacity='0.011'/><path d='M250.0 150.0L250.0 300.0L200.0 225.0Z' fill='%23000' fill-opacity='0.014'/><path d='M250.0 150.0L250.0 300.0L300.0 225.0Z' fill='%23fff' fill-opacity='0.001'/><path d='M350.0 150.0L350.0 300.0L300.0 225.0Z' fill='%23fff' fill-opacity='0.007'/><path d='M350.0 150.0L350.0 300.0L400.0 225.0Z' fill='%23000' fill-opacity='0.007'/><path d='M450.0 150.0L450.0 300.0L400.0 225.0Z' fill='%23000' fill-opacity='0.015'/><path d='M450.0 150.0L450.0 300.0L500.0 225.0Z' fill='%23000' fill-opacity='0.017'/><path d='M0 225.0L0 375.0L-50.0 300.0Z' fill='%23fff' fill-opacity='0.003'/><path d='M0 225.0L0 375.0L50.0 300.0Z' fill='%23000' fill-opacity='0.019'/><path d='M100 225.0L100 375.0L50.0 300.0Z' fill='%23000' fill-opacity='0.019'/><path d='M100 225.0L100 375.0L150.0 300.0Z' fill='%23000' fill-opacity='0.014'/><path d='M200 225.0L200 375.0L150.0 300.0Z' fill='%23fff' fill-opacity='0.009'/><path d='M200 225.0L200 375.0L250.0 300.0Z' fill='%23000' fill-opacity='0.005'/><path d='M300 225.0L300 375.0L250.0 300.0Z' fill='%23000' fill-opacity='0.008'/><path d='M300 225.0L300 375.0L350.0 300.0Z' fill='%23fff' fill-opacity='0.001'/><path d='M400 225.0L400 375.0L350.0 300.0Z' fill='%23fff' fill-opacity='0.003'/><path d='M400 225.0L400 375.0L450.0 300.0Z' fill='%23000' fill-opacity='0.019'/><path d='M50.0 300.0L50.0 450.0L0.0 375.0Z' fill='%23000' fill-opacity='0.001'/><path d='M50.0 300.0L50.0 450.0L100.0 375.0Z' fill='%23000' fill-opacity='0.010'/><path d='M150.0 300.0L150.0 450.0L100.0 375.0Z' fill='%23fff' fill-opacity='0.015'/><path d='M150.0 300.0L150.0 450.0L200.0 375.0Z' fill='%23fff' fill-opacity='0.006'/><path d='M250.0 300.0L250.0 450.0L200.0 375.0Z' fill='%23000' fill-opacity='0.011'/><path d='M250.0 300.0L250.0 450.0L300.0 375.0Z' fill='%23fff' fill-opacity='0.001'/><path d='M350.0 300.0L350.0 450.0L300.0 375.0Z' fill='%23fff' fill-opacity='0.002'/><path d='M350.0 300.0L350.0 450.0L400.0 375.0Z' fill='%23fff' fill-opacity='0.013'/><path d='M450.0 300.0L450.0 450.0L400.0 375.0Z' fill='%23000' fill-opacity='0.001'/><path d='M450.0 300.0L450.0 450.0L500.0 375.0Z' fill='%23000' fill-opacity='0.010'/><path d='M0 375.0L0 525.0L-50.0 450.0Z' fill='%23000' fill-opacity='0.007'/><path d='M0 375.0L0 525.0L50.0 450.0Z' fill='%23000' fill-opacity='0.016'/><path d='M100 375.0L100 525.0L50.0 450.0Z' fill='%23fff' fill-opacity='0.008'/><path d='M100 375.0L100 525.0L150.0 450.0Z' fill='%23000' fill-opacity='0.019'/><path d='M200 375.0L200 525.0L150.0 450.0Z' fill='%23fff' fill-opacity='0.003'/><path d='M200 375.0L200 525.0L250.0 450.0Z' fill='%23000' fill-opacity='0.007'/><path d='M300 375.0L300 525.0L250.0 450.0Z' fill='%23000' fill-opacity='0.019'/><path d='M300 375.0L300 525.0L350.0 450.0Z' fill='%23000' fill-opacity='0.002'/><path d='M400 375.0L400 525.0L350.0 450.0Z' fill='%23000' fill-opacity='0.007'/><path d='M400 375.0L400 525.0L450.0 450.0Z' fill='%23000' fill-opacity='0.016'/></svg>") 0 0 / calc(60 * var(--u)) auto,
    linear-gradient(160deg, #173a82 0%, #10224f 38%, var(--tv-bg) 70%, #0a153b 100%);
  background-color: var(--tv-bg);
  color: var(--tv-text);
  padding: calc(5 * var(--u)) calc(7 * var(--u)) calc(4 * var(--u));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: calc(5 * var(--u));
  position: relative;
  overflow: hidden;
  cursor: none;
}
.tv.tv-vaken {
  cursor: default;
}

/* Sidhuvud: församlingens namn som liten rad överst, dagens datum stort under,
   klockan till höger med välkomsttexten under */
.tv-topp {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(4 * var(--u));
}
.tv-marke {
  min-width: 0;
}
.tv-namn {
  font-size: calc(2.8 * var(--u));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--tv-guld);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-datum {
  margin-top: calc(0.9 * var(--u));
  font-size: calc(5.6 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--tv-text);
}
.tv-tid {
  text-align: right;
  flex-shrink: 0;
}
.tv-klocka {
  font-size: calc(8 * var(--u));
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.03em;
}
.tv-valkommen-rad {
  margin-top: calc(1.4 * var(--u));
  font-size: calc(2.8 * var(--u));
  font-weight: 500;
  color: var(--tv-guld);
}
.tv-valkommen-rad:empty {
  display: none;
}

/* Viktigt meddelande: gul rad under sidhuvudet på alla sidor */
.tv-viktigt {
  display: none;
}
.tv.har-viktigt {
  grid-template-rows: auto auto 1fr auto;
}
.tv.har-viktigt .tv-viktigt {
  display: flex;
  align-items: center;
  gap: calc(2.2 * var(--u));
  margin-top: calc(-2 * var(--u));
  padding: calc(1.8 * var(--u)) calc(2.6 * var(--u));
  background: #e9c46a;
  color: var(--tv-bg);
  border-radius: calc(0.8 * var(--u));
}
.tv-viktigt-ikon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: calc(4.4 * var(--u));
  height: calc(4.4 * var(--u));
  border-radius: 50%;
  background: var(--tv-bg);
  color: #e9c46a;
  font-size: calc(2.8 * var(--u));
  font-weight: 700;
  line-height: 1;
}
.tv-viktigt p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(1.8 * var(--u));
}
.tv-viktigt p + p {
  margin-top: calc(0.8 * var(--u));
}
.tv-viktigt b {
  font-size: calc(3.2 * var(--u));
  font-weight: 700;
}
.tv-viktigt span {
  font-size: calc(2.8 * var(--u));
  font-weight: 500;
}

/* Sidytan: en sida i taget, sidorna ligger ovanpå varandra under övergången */
.tv-yta {
  position: relative;
  min-height: 0;
}
.tv-sida {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tv-rubrik {
  margin: 0 0 calc(3.4 * var(--u));
  font-family: var(--serif);
  font-size: calc(4.2 * var(--u));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tv-guld);
}

/* I dag: tid och namn på en rad, platsen under namnet */
.tv-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(3.2 * var(--u));
}
.tvr {
  display: grid;
  grid-template-columns: calc(17 * var(--u)) 1fr;
  align-items: baseline;
  gap: calc(3 * var(--u));
}
.tvr-tid {
  font-size: calc(5 * var(--u));
  font-weight: 500;
  color: var(--tv-guld-ljus);
  letter-spacing: -0.01em;
}
/* Det som pågår just nu: blåtonad rad med blå kant till vänster, och tiden i fet himmelsblå */
.tvr-nu {
  /* sticker ut åt vänster men aldrig åt höger, så att sidan inte krymps i onödan */
  margin: calc(-1.4 * var(--u)) 0 calc(-1.4 * var(--u)) calc(-2.2 * var(--u));
  padding: calc(1.4 * var(--u)) calc(2.2 * var(--u));
  border-radius: calc(1 * var(--u));
  background: linear-gradient(90deg, rgba(147, 197, 253, 0.2), rgba(147, 197, 253, 0.03) 85%);
  box-shadow: inset calc(0.6 * var(--u)) 0 0 var(--tv-nu);
}
.tvr-nu .tvr-tid {
  color: var(--tv-nu);
  font-weight: 700;
}
.tvr-nu .tvr-titel {
  color: #e3efff;
}

/* Många aktiviteter: två kolumner bredvid varandra i stället för mindre text */
.tv-kolumner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(7 * var(--u));
  align-items: start;
}
.tv-kolumner .tvr {
  grid-template-columns: calc(14 * var(--u)) 1fr;
  gap: calc(2.4 * var(--u));
}
.tv-kolumner .tvr-tid {
  font-size: calc(4 * var(--u));
}
.tv-kolumner .tvr-titel {
  font-size: calc(3.8 * var(--u));
}
.tv-rubrik-sida {
  margin-left: calc(1.6 * var(--u));
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tv-dampad);
}
/* Kommande dagar i kolumner: dagen som rubrik, tid och vad under */
.tvk-dag + .tvk-dag {
  margin-top: calc(1.6 * var(--u));
  padding-top: calc(1.6 * var(--u));
  border-top: 1px solid var(--tv-linje);
}
.tvk-dag h3 {
  margin: 0 0 calc(0.6 * var(--u));
  font-size: inherit;
}
.tvk-dag ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tvk-dag li {
  display: grid;
  grid-template-columns: calc(12 * var(--u)) 1fr;
  align-items: baseline;
  gap: calc(2 * var(--u));
  padding: calc(0.6 * var(--u)) 0;
}
.tvk-dag .tva-dag b {
  font-size: calc(3.4 * var(--u));
}
.tvk-dag .tva-tid,
.tvk-dag .tva-titel {
  font-size: calc(3.3 * var(--u));
}
/* Ord delas aldrig mitt i – blir det för trångt krymps hela sidan lite i stället */
.tvk-dag .tva-titel,
.tv-kolumner .tvr-titel {
  overflow-wrap: normal;
  min-width: auto; /* långa namn gör kolumnen bredare i stället för att gå in i grannen */
}
.tvr-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tvr-titel {
  font-family: var(--serif);
  font-size: calc(4.6 * var(--u));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.tvr-klar {
  opacity: 0.5;
}
.tvr-klar .tvr-titel {
  text-decoration: line-through;
  text-decoration-thickness: 0.05em;
}
.tv-mer,
.tv-nasta {
  margin: calc(3.4 * var(--u)) 0 0;
  font-size: calc(2.8 * var(--u));
  color: var(--tv-dampad);
}
.tv-nasta b {
  color: var(--tv-guld-ljus);
  font-weight: 600;
}
.tv-tomt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(6 * var(--u));
}
.tv-tomt-rubrik {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(6.6 * var(--u));
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.tv-tomt .tv-nasta {
  font-size: calc(3.2 * var(--u));
}

/* Kommande dagar: en lista i tre kolumner – dag, tid, vad */
.tv-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tv-agenda li {
  display: grid;
  grid-template-columns: calc(30 * var(--u)) calc(13 * var(--u)) 1fr;
  align-items: baseline;
  gap: calc(2.4 * var(--u));
  padding: calc(1.1 * var(--u)) 0;
}
.tv-agenda li.tva-ny {
  margin-top: calc(1 * var(--u));
  border-top: 1px solid var(--tv-linje);
  padding-top: calc(2 * var(--u));
}
.tva-dag {
  display: flex;
  align-items: baseline;
  gap: calc(1.2 * var(--u));
}
.tva-dag b {
  font-family: var(--serif);
  font-size: calc(3.6 * var(--u));
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--tv-text);
}
.tva-dag small {
  font-size: calc(2.8 * var(--u));
  color: var(--tv-dampad);
}
.tva-tid {
  font-size: calc(3.8 * var(--u));
  font-weight: 500;
  color: var(--tv-guld-ljus);
}
.tva-titel {
  font-size: calc(3.8 * var(--u));
  min-width: 0;
  overflow-wrap: break-word;
}
.tva-titel small {
  margin-left: calc(1.4 * var(--u));
  font-size: calc(2.8 * var(--u));
  color: var(--tv-dampad);
}
.tva-mer .tva-titel {
  font-size: calc(2.8 * var(--u));
  color: var(--tv-dampad);
}

/* Vanligt meddelande: stor rubrik, kort text, guldlinje till vänster */
.tv-medd {
  margin: auto 0; /* centrerad, så att guldlinjen bara är lika hög som texten */
  display: flex;
  flex-direction: column;
  padding-left: calc(4.5 * var(--u));
  border-left: calc(0.5 * var(--u)) solid var(--tv-guld);
  max-width: 85%;
}
.tv-medd-rubrik {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(7.4 * var(--u));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.tv-medd-text {
  margin: calc(3 * var(--u)) 0 0;
  max-width: 40ch;
  font-size: calc(3.2 * var(--u));
  line-height: 1.4;
  color: var(--tv-dampad);
}

/* Evenemang: namn, när och var – och QR-koden */
.tv-ev {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(8 * var(--u));
  align-items: center;
}
.tv-ev-typ {
  margin: 0 0 calc(1.6 * var(--u));
  font-size: calc(2.8 * var(--u));
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tv-guld);
}
.tv-ev-titel {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(7.8 * var(--u));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.tv-ev-nar {
  margin: calc(3 * var(--u)) 0 0;
  font-size: calc(3.4 * var(--u));
  color: var(--tv-guld-ljus);
}
.tv-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
  text-align: center;
}
.tv-qr-kod {
  width: calc(32 * var(--u));
  aspect-ratio: 1;
  border-radius: calc(1 * var(--u));
  overflow: hidden;
  background: #fff;
}
.tv-qr-kod svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tv-qr p {
  margin: 0;
  font-size: calc(3 * var(--u));
  font-weight: 600;
}
/* Telefonnummer för den som hellre ringer än skannar – delas aldrig på två rader */
.tv-lokal-text b {
  white-space: nowrap;
}
.tv-qr .tv-qr-tel {
  white-space: nowrap;
  margin-top: calc(-1 * var(--u));
  font-size: calc(2.8 * var(--u));
  font-weight: 600;
  color: var(--tv-guld-ljus);
}
.tv-qr p small {
  display: block;
  margin-top: calc(0.6 * var(--u));
  font-size: calc(2.8 * var(--u));
  font-weight: 500;
  color: var(--tv-dampad);
}

/* Låna lokal: ljust kort, så att det skiljer sig från evenemangen */
.tv-lokal {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(4 * var(--u));
}
.tv-lokal-kort {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(6 * var(--u));
  align-items: center;
  padding: calc(5 * var(--u)) calc(6 * var(--u));
  background: #f5efe2;
  color: var(--tv-bg);
  border-radius: calc(1.2 * var(--u));
}
.tv-lokal-qr svg {
  display: block;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
}
.tv-lokal-qr svg rect {
  fill: #f5efe2;
}
.tv-lokal-text h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(6 * var(--u));
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tv-lokal-text > p {
  margin: calc(1.6 * var(--u)) 0 0;
  font-size: calc(2.8 * var(--u));
  color: #56627a;
}
.tv-lokal-text ul {
  list-style: none;
  margin: calc(3 * var(--u)) 0 0;
  padding: calc(2.4 * var(--u)) 0 0;
  border-top: 1px solid rgba(11, 23, 48, 0.12);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(24 * var(--u)), 1fr));
  gap: calc(1 * var(--u)) calc(3 * var(--u));
}
.tv-lokal-text li {
  font-size: calc(2.8 * var(--u));
  font-weight: 600;
}

/* Veckans ord */
.tv-vers {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: calc(2.4 * var(--u));
  flex-wrap: wrap;
}
.tv-vers blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: calc(3.4 * var(--u));
  line-height: 1.2;
  color: var(--tv-text);
}
.tv-vers figcaption {
  font-size: calc(2.6 * var(--u));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tv-guld);
}
.tv-ordet {
  flex: 1;
  display: flex;
  align-items: center;
}
.tv-ordet .tv-vers {
  flex-direction: column;
  align-items: flex-start;
}
.tv-ordet .tv-vers blockquote {
  font-size: calc(5.6 * var(--u));
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

/* Sidindikator: små prickar, den aktiva fylls medan sidan visas */
.tv-fot {
  display: flex;
  justify-content: center;
}
.tv-prickar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--u));
}
.tv-prickar li i {
  display: block;
  width: calc(1 * var(--u));
  height: calc(1 * var(--u));
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.22);
  overflow: hidden;
  transition: width 0.4s ease;
}
.tv-prickar li.aktiv i {
  width: calc(5 * var(--u));
}
.tv-prickar li.aktiv i::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  background: var(--tv-guld);
  animation: tv-fyll var(--tid) linear forwards;
}
.tv-prickar li.aktiv.pausad i::after {
  animation: none;
  width: 100%;
}
@keyframes tv-fyll {
  to {
    width: 100%;
  }
}

/* Stängknappen syns bara när någon rör musen eller skärmen */
.tv-stang {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.12);
  color: var(--tv-text);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.tv-vaken .tv-stang,
.tv-stang:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.tv-stang:hover {
  color: var(--tv-text);
  background: rgba(245, 241, 232, 0.2);
}
.tv-stang:focus-visible {
  outline: 2px solid var(--tv-guld);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tv-prickar li.aktiv i::after {
    animation: none;
    width: 100%;
  }
  .tv-prickar li i {
    transition: none;
  }
}

/* Stående skärm (surfplatta, mobil) */
@media (max-aspect-ratio: 1/1) {
  .tv {
    --u-bas: min(1.55vw, 0.9vh);
  }
  .tv-topp {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(2 * var(--u));
  }
  .tv-tid {
    display: flex;
    align-items: baseline;
    gap: calc(2.4 * var(--u));
    text-align: left;
  }
  .tv-klocka {
    font-size: calc(5.4 * var(--u));
  }
  .tv-valkommen-rad {
    margin-top: 0;
  }
  .tv-namn {
    white-space: normal;
  }
  .tv-ev,
  .tv-lokal-kort {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .tv-qr {
    align-items: flex-start;
    text-align: left;
    gap: calc(1.6 * var(--u));
  }
  .tv-qr-kod {
    width: calc(24 * var(--u));
  }
  .tv-lokal-qr svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
  }
  .tv-lokal-kort {
    padding: calc(4 * var(--u));
    gap: calc(3 * var(--u));
  }
  .tv-ev {
    gap: calc(4 * var(--u));
  }
  .tv-medd {
    max-width: none;
  }
  .tv-agenda li {
    grid-template-columns: calc(11 * var(--u)) 1fr;
  }
  .tv-agenda .tva-dag {
    grid-column: 1 / -1;
  }
  .tv-agenda .tva-dag:empty {
    display: none;
  }
  .tv-kolumner {
    grid-template-columns: 1fr;
    gap: calc(2 * var(--u));
  }
  /* Kommande dagar: korta rader, så två kolumner ryms även på stående skärm */
  .tv-kolumner:has(.tv-agenda-kol) {
    grid-template-columns: 1fr 1fr;
    gap: calc(4 * var(--u));
  }
  .tvk-dag li {
    grid-template-columns: calc(10 * var(--u)) 1fr;
  }
  /* bara en kolumn på sidan → använd hela bredden */
  .tv-kolumner:has(.tv-agenda-kol):has(> div:empty) {
    grid-template-columns: 1fr;
  }
  .tv-kolumner > div:empty {
    display: none;
  }
}
@media (max-width: 600px) and (max-aspect-ratio: 1/1) {
  .tv .tvr {
    grid-template-columns: 1fr;
    gap: calc(0.6 * var(--u));
  }
  .tv .tvr-tid {
    font-size: calc(3.6 * var(--u));
  }
}

/* Varning på startsidan när en tv-skärm tappat kontakten */
a.tv-varning {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
  color: inherit;
}
a.tv-varning:hover b {
  text-decoration: underline;
}
.tile.tile-rod {
  background: var(--rod-ljus);
  color: var(--rod);
}
/* Tv-skärmens inställningar (i systemet, inte på skärmen) */
.tv-inst {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linje);
  border-radius: var(--radie);
}
.tv-inst-rad {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  flex-wrap: wrap;
}
.tv-inst-rad + .tv-inst-rad {
  border-top: 1px solid var(--linje);
}
.tv-inst-namn {
  flex: 1 1 18rem;
  min-width: 0;
}
.tv-inst-namn b {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.tv-inst-namn > span:not(.kryss-ruta),
.tv-inst-namn span span {
  display: block;
  font-size: 0.95rem;
  color: var(--text3);
}
span.tv-inst-namn {
  padding-left: 2.9rem;
}
.tv-inst-tider {
  flex-basis: 100%;
  padding-left: 2.9rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.tv-inst-tid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tv-inst-etikett {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text3);
}
.tv-gransruta {
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  background: var(--yta2);
  padding: 0.2rem 1.1rem;
}
.tv-gransruta summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--bla);
}
.tv-gransruta p,
.tv-gransruta li {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text2);
}
.tv-gransruta ul {
  padding-left: 1.2rem;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.4rem;
}
.tv-inst-tid select {
  min-height: 2.9rem;
  padding: 0 0.8rem;
  border-radius: var(--radie-s);
  border: 1.5px solid var(--linje2);
  background: var(--yta);
  font: inherit;
}
.tv-full {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.3rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gul-text);
}
/* ---------- Inloggning & publika sidor ---------- */
.delad {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 38rem) 1fr;
}
.delad-v {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 80% 10%, #1a3668 0%, #0e1f42 50%, #081229 100%);
  color: #fff;
  padding: 4rem;
  display: flex;
  flex-direction: column;
}
.delad-v.sa {
  background: radial-gradient(120% 120% at 80% 10%, #121e38 0%, #070d1c 60%, #04070f 100%);
}
.delad-v .ark {
  position: absolute;
  right: -9rem;
  bottom: -2rem;
  width: 38rem;
  color: var(--guld);
  opacity: 0.3;
}
.delad-v h2 {
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 1.05;
}
.delad-h {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}
.delad-in {
  width: min(36rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.logo-rad {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--guld);
}
.logo-rad b {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: #fff;
}
.sa-etikett {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--bla-mork);
  background: var(--guld);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}
.kyrkval {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  border: 1.5px solid var(--linje);
  background: var(--yta);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--skugga);
}
.kyrkval.senast {
  border-color: var(--guld);
}
.kyrkval b {
  font-size: 1.3rem;
  display: block;
}
.kyrkval small {
  font-size: 1rem;
  color: var(--guld-text);
  font-weight: 600;
}
@media (max-width: 900px) {
  .delad {
    grid-template-columns: 1fr;
  }
  .delad-v {
    padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.5rem 2rem;
  }
  .delad-v h2 {
    font-size: 2.2rem;
  }
  .delad-v .ark {
    display: none;
  }
}
.publik {
  min-height: 100vh;
  background: var(--bg);
}
.publik-topp {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 85% 20%, #1a3668 0%, #0e1f42 55%, #0a1733 100%);
  color: #fff;
  padding: calc(2.5rem + env(safe-area-inset-top, 0px)) 1.25rem 7rem;
}
.publik-in {
  width: min(62rem, 100%);
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.publik-topp h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1;
}
.publik-kropp {
  width: min(62rem, calc(100% - 2rem));
  margin: -5rem auto 3rem;
  position: relative;
}
.lokalval {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.lokalval label {
  cursor: pointer;
}
.lokalval input {
  position: absolute;
  opacity: 0;
}
.lokalval .lk {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--linje);
  background: var(--yta);
  height: 100%;
}
.lokalval .lk-in {
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.lokalval .lk-in b {
  font-size: 1.2rem;
}
.lokalval .lk-in span {
  font-size: 1rem;
  color: var(--text2);
}
.lokalval .lk-bild {
  height: 6rem;
  background: #f4f1ea;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--guld-mork);
}
.lokalval input:checked + .lk {
  border: 3px solid var(--bla);
}
.lokalval input:focus-visible + .lk {
  outline: 3px solid var(--guld);
  outline-offset: 2px;
}

/* ---------- Systemadmin ---------- */
body.sa-lage .meny {
  background: #060b18;
  border-right: 1px solid #1a2440;
}
body.sa-lage .meny-l.pa {
  background: rgba(210, 174, 98, 0.14);
  color: #f6e7c1;
  box-shadow: inset 3px 0 0 var(--guld);
}
body.sa-lage .meny-l.pa .ic {
  stroke: var(--guld);
}
body.sa-lage .huvud {
  background: #eef0f4;
}
.tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}
.tabell th {
  text-align: left;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--yta2);
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--linje);
}
.tabell td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--linje);
  vertical-align: middle;
}
.tabell tr:last-child td {
  border-bottom: none;
}
.tabell-hall {
  overflow-x: auto;
}
.staplar {
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
  height: 18rem;
  padding: 0 0.5rem;
}
.stapel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  height: 100%;
}
.stapel i {
  width: 100%;
  max-width: 6rem;
  border-radius: 3px 3px 0 0;
  background: #c9d6ea;
  display: block;
}
.stapel.nu i {
  background: var(--bla-mork);
}
.stapel b {
  font-size: 1.3rem;
}
.stapel span {
  font-size: 1rem;
}
.hbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hbar .spar {
  flex: 1;
  height: 1.3rem;
  border-radius: 2px;
  background: #eef1f6;
  overflow: hidden;
}
.hbar .spar i {
  display: block;
  height: 100%;
  background: var(--bla);
  border-radius: 2px;
}
.hbar b {
  width: 3rem;
  text-align: right;
}
.dok {
  font-size: 1.2rem;
  line-height: 1.7;
}
.dok h2 {
  font-family: var(--serif);
  font-size: 1.9rem;
  margin: 1.6rem 0 0.4rem;
}
.dok p {
  margin: 0.4rem 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .plus {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--bla-ljus);
  color: var(--bla);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.faq details[open] summary .plus {
  background: var(--bla);
  color: #fff;
}
.faq details {
  border-bottom: 1px solid var(--linje);
}
.faq details > div {
  padding: 0 1.6rem 1.4rem 5rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #1f2a40;
}
@media (max-width: 700px) {
  .faq details > div {
    padding-left: 1.6rem;
  }
}
.utskrift-dolj {
}
@media print {
  .meny,
  .topp,
  .utskrift-dolj,
  .supportlage,
  #toasts {
    display: none !important;
  }
  .huvud {
    padding: 0;
  }
  body {
    background: #fff;
  }
  .kort {
    box-shadow: none;
  }
}
[hidden] {
  display: none !important;
}
@media (max-width: 900px) {
  .rutnat-sup {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Lätt sidhuvud (alla sidor utom Start) ---------- */
.sidhuvud {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linje);
}
.sidhuvud-in {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.sidhuvud h1 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  line-height: 1.05;
}
.sidhuvud p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text2);
}
.sidhuvud-h {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ---------- Skelett medan data hämtas ---------- */
.skelett {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.sk {
  border-radius: 6px;
  background: linear-gradient(90deg, #edf0f5 25%, #f6f8fb 50%, #edf0f5 75%);
  background-size: 400% 100%;
  animation: skimra 1.4s ease infinite;
}
.sk-rub {
  height: 2.2rem;
  width: 40%;
}
.sk-kort {
  height: 6rem;
}
@keyframes skimra {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk {
    animation: none;
  }
}

/* ---------- Siffror i samma bredd, så kolumner hamnar i linje ---------- */
.tabell,
.kv,
.nt b,
.post b,
.dag-huvud b,
.mnr,
.stapel b,
.hbar b,
.bage b,
.tvr-tid,
.tva-tid,
.tv-klocka {
  font-variant-numeric: tabular-nums;
}

/* ---------- Avancerade fält gömda tills de behövs ---------- */
.mer-falt {
  border-top: 1px solid var(--linje);
  padding-top: 0.9rem;
}
.mer-falt > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bla);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
}
.mer-falt > summary::-webkit-details-marker {
  display: none;
}
.mer-falt > summary::before {
  content: '+';
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bla-ljus);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.mer-falt[open] > summary::before {
  content: '−';
  background: var(--bla);
  color: #fff;
}
.mer-falt > div {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-top: 1rem;
}

/* ---------- Startsidans snabbval ---------- */
.snabbval {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.snabb {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: var(--yta);
  border: 1px solid var(--linje);
  box-shadow: var(--skugga);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.12s ease;
}
.snabb:hover {
  border-color: var(--linje2);
  color: var(--text);
}
.snabb-ic {
  width: 2.9rem;
  height: 2.9rem;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--linje);
  background: var(--yta2);
  color: var(--bla-mork);
  display: flex;
  align-items: center;
  justify-content: center;
}
.snabb b {
  display: block;
  font-size: 1.02rem;
}
.snabb small {
  display: block;
  font-size: 0.85rem;
  color: var(--text2);
}
.nasta {
  border-top: 1px solid var(--linje);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}
.nasta-rub {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--guld-text);
}
.vers-fot {
  margin: 0.5rem 0 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text3);
}
.vers-fot small {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8rem;
}

/* ---------- Typografi: fetstil sparsamt ---------- */
b,
strong {
  font-weight: 600;
}
.sidrub h1,
.sidhuvud h1,
.h2,
.tomt-rub,
.dok h2,
.kort-rub .h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Sidhuvud på undersidor ----------
   Den mörka bannern visas bara på Start. På övriga sidor blir samma
   komponent en lugn rubrik direkt på bakgrunden. */
.banner:not(.banner-start) {
  background: none;
  color: var(--text);
  border-radius: 0;
  min-height: 0;
  overflow: visible;
  align-items: flex-end;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linje);
}
.banner:not(.banner-start) .banner-ark {
  display: none;
}
.banner:not(.banner-start) .banner-in {
  padding: 0;
  gap: 0.6rem;
}
.banner:not(.banner-start) h1 {
  font-size: clamp(2.2rem, 4vw, 2.9rem);
}
.banner:not(.banner-start) .guld-linje {
  width: 2.5rem;
}
.banner:not(.banner-start) p {
  font-size: 1.15rem;
  color: var(--text2);
}
.banner:not(.banner-start) .banner-h {
  padding: 0;
}
.forklaring .farg-vantar i {
  background: none;
  border: 1.5px dashed var(--text3);
}
/* Hela raden är klickbar, så knappen inuti blir bara en diskret pil. */
a.rad > .btn {
  font-size: 0;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--text3);
}
a.rad:hover > .btn {
  color: var(--text);
}

/* ---------- Sidopanel ----------
   Glider in från höger när man öppnar en enskild sak. Listan bakom
   kan då hållas kort: en rad per sak, detaljer och knappar i panelen. */
.panel-bak {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 14, 30, 0.32);
  display: flex;
  justify-content: flex-end;
  animation: tona-in 0.18s ease;
}
.panel {
  width: min(34rem, 100%);
  height: 100%;
  background: var(--yta);
  border-left: 1px solid var(--linje);
  box-shadow: -12px 0 32px rgba(15, 27, 51, 0.12);
  display: flex;
  flex-direction: column;
  animation: glid-in 0.2s ease;
}
.panel-bak.ut {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.panel-huvud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem 1rem 1.75rem;
  border-bottom: 1px solid var(--linje);
}
.panel-rub {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.panel-huvud .modal-x {
  position: static;
}
.panel-kropp {
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.panel-fot {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.75rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linje);
  background: var(--yta);
}
.panel-fot .btn {
  flex: 1;
}
.panel-topp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.panel-titel {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.panel-under {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text2);
  line-height: 1.5;
}
.panel-grupp {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.panel-grupp .kv {
  font-size: 1.05rem;
  padding: 0.7rem 0;
}
.panel-grupp .kv:last-child {
  border-bottom: none;
}
.panel-etikett {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--linje);
}
.panel-bild {
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
  border-radius: 6px;
}
.citat {
  margin: 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 2px solid var(--guld);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--text);
}
.lank-falt {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.lank-falt input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--linje2);
  background: var(--yta2);
  font-size: 0.95rem;
  color: var(--text2);
}
.panel-grupp > a {
  padding-top: 0.6rem;
  font-size: 1.05rem;
}
.qr-ruta {
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0.6rem;
  border: 1px solid var(--linje);
  border-radius: 6px;
}
@keyframes glid-in {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
}
@keyframes tona-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel-bak {
    animation: none;
  }
}
@media (max-width: 600px) {
  .panel {
    border-left: none;
  }
  .panel-kropp {
    padding: 1.25rem;
  }
  .panel-fot {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ---------- Klickbara listrader ---------- */
.stapel-lista {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rad-knapp {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--linje);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.rad-knapp:hover {
  background: var(--yta2);
}
.rad-knapp .rad-titel {
  font-size: 1.15rem;
}
.rad-knapp .rad-under {
  font-size: 1rem;
}
.rad-knapp .bild {
  width: 4.5rem;
  height: 3.2rem;
  border-radius: 4px;
}
.pil {
  color: var(--text3);
  display: flex;
  flex-shrink: 0;
}
.rad-knapp:hover .pil {
  color: var(--text);
}
.datumruta {
  width: 3.2rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.datumruta small {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.datumruta b {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Segmentknapp (filter inuti en flik) ---------- */
.segment {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem;
  border-radius: 6px;
  background: #e9ecf2;
  gap: 0.2rem;
}
.segment button {
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: none;
  border-radius: 4px;
  background: none;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
}
.segment button span {
  color: var(--text3);
  margin-left: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.segment button.pa {
  background: var(--yta);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 27, 51, 0.08);
}
.rad-knapp .rad-titel,
.rad-knapp .rad-under {
  overflow-wrap: break-word;
}
.rad-knapp .rad-in > .chip,
.rad-chips {
  align-self: flex-start;
  margin-top: 0.35rem;
}
.rad-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .rad-knapp {
    flex-wrap: nowrap;
    gap: 0.9rem;
  }
  .rad-knapp .bild {
    width: 3.2rem;
    height: 3.2rem;
  }
  .lank-rad .rad-in {
    flex-basis: calc(100% - 5rem);
  }
  .lank-rad .btn {
    flex: 1;
  }
}

/* ---------- Listor inuti kort (Start) ---------- */
.lista-i-kort {
  margin: 0 -2rem;
  border-top: 1px solid var(--linje);
}
.lista-i-kort .rad-knapp {
  padding-left: 2rem;
  padding-right: 2rem;
}
.lista-i-kort .rad-knapp:last-child {
  border-bottom: 1px solid var(--linje);
}
.lank-fot {
  align-self: flex-start;
  font-size: 1.05rem;
  font-weight: 600;
}
.tid-rad {
  align-items: flex-start;
}
.tid-kol {
  min-width: 4.2rem;
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding-top: 0.05rem;
}
.rad-dag {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
@media (max-width: 700px) {
  .lista-i-kort {
    margin: 0 -1.1rem;
  }
  .lista-i-kort .rad-knapp {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}
.kal-typ {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text2);
}
.kal-typ i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--f);
}
.verktyg .segment {
  align-self: center;
}

/* ---------- Evenemang ---------- */
.fylld {
  display: block;
  height: 4px;
  max-width: 16rem;
  margin-top: 0.45rem;
  border-radius: 2px;
  background: var(--linje);
  overflow: hidden;
}
.fylld i {
  display: block;
  height: 100%;
  background: var(--bla-mork);
}
.rad-siffra {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  min-width: 3.5rem;
}
.rad-siffra b {
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rad-siffra small {
  font-size: 0.85rem;
  color: var(--text3);
}
.idag-text {
  color: var(--gron);
  font-weight: 600;
}
.fakta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  gap: 0;
}
.fakta > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.2rem 1.5rem;
  border-left: 1px solid var(--linje);
  min-width: 0;
}
.fakta > div:first-child {
  border-left: none;
}
.fakta span {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.fakta b {
  font-size: 1.25rem;
  font-weight: 600;
  overflow-wrap: break-word;
}
.fakta b small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text3);
}
@media (max-width: 800px) {
  .fakta {
    grid-template-columns: 1fr 1fr;
  }
  .fakta > div:nth-child(3) {
    border-left: none;
  }
  .fakta > div:nth-child(n + 3) {
    border-top: 1px solid var(--linje);
  }
}
.fara-lank {
  align-self: flex-start;
  color: var(--rod);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
}
.banner-h .btn {
  min-height: 2.9rem;
}
.h2 .chip {
  font-family: var(--sans);
  vertical-align: middle;
  letter-spacing: 0;
}

/* ---------- Person i panel ---------- */
.panel-person {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.panel-person .panel-titel {
  font-size: 1.9rem;
}
a.kv-lank {
  color: inherit;
  text-decoration: none;
}
a.kv-lank:hover span:first-child {
  color: var(--text);
  text-decoration: underline;
}
.valj-lista {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.kort.lista-kort {
  flex-direction: row;
  align-items: center;
}
.tabell-namn {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.tabell-namn:hover {
  text-decoration: underline;
}
.tabell tbody tr:hover {
  background: var(--yta2);
}
a.pil {
  text-decoration: none;
}
.kv-knapp {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--linje);
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-items: center;
  color: var(--text);
}
.kv-knapp:hover span:first-child {
  text-decoration: underline;
}
.kv-knapp.fara {
  color: var(--rod);
}
.panel-grupp .kv-knapp:last-child {
  border-bottom: none;
}
.kv-knapp span:first-child {
  color: inherit;
}
/* Etiketter i en rads textkolumn ska bara vara så breda som texten. */
.rad-in > .chip {
  align-self: flex-start;
  margin-top: 0.35rem;
}
.kv .chip-mork {
  color: #fff;
}

/* ---------- Evenemangsformulär: formulär till vänster, förhandsvisning till höger ---------- */
.ev-layout {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(18rem, 22rem);
  gap: 3.5rem;
  align-items: start;
}
.ev-form {
  gap: 1.75rem;
}
.ev-forhand {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (max-width: 1100px) {
  .ev-layout {
    grid-template-columns: minmax(0, 40rem);
  }
  .ev-forhand {
    display: none;
  }
}
.steg-rad {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.steg-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--linje);
  overflow: hidden;
}
.steg-bar i {
  display: block;
  height: 100%;
  background: var(--bla-mork);
  transition: width 0.25s ease;
}
.steg-lista {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--text3);
}
.steg-lista li.nu {
  color: var(--text);
  font-weight: 600;
}
.steg-lista button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--text2);
  cursor: pointer;
}
.steg-lista button:hover {
  color: var(--text);
  text-decoration: underline;
}
.steg-lista button .ic {
  stroke: var(--gron);
}
.steg-rub {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0.25rem 0 -0.25rem;
}
.tre {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .tre {
    grid-template-columns: 1fr 1fr;
  }
  .tre > .falt:first-child {
    grid-column: 1 / -1;
  }
  .steg-lista {
    gap: 0.9rem;
    font-size: 0.85rem;
  }
}
.falt input[type='date'],
.falt input[type='time'] {
  font-variant-numeric: tabular-nums;
}
.falt input::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}
/* Förslag på typ av evenemang */
.forslag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.forslag button {
  min-height: 2.4rem;
  padding: 0 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--linje2);
  background: var(--yta);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
}
.forslag button:hover {
  border-color: var(--text3);
  color: var(--text);
}
.forslag button.pa {
  border-color: var(--bla-mork);
  background: var(--bla-mork);
  color: #fff;
}
/* Bilduppladdning */
.bild-yta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 11rem;
  padding: 1.5rem;
  border: 1px dashed var(--linje2);
  border-radius: 6px;
  background: var(--yta);
  color: var(--text3);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.bild-yta b {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.bild-yta:hover,
.bild-yta.over {
  border-color: var(--bla-mork);
  background: var(--yta2);
}
.bild-yta.har-bild {
  position: relative;
  padding: 0;
  border-style: solid;
  overflow: hidden;
  cursor: default;
}
.bild-yta.har-bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.bild-knappar {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
}
/* Fältfel direkt under fältet */
.falt.har-fel input,
.falt.har-fel textarea {
  border-color: var(--rod);
  box-shadow: 0 0 0 1px var(--rod);
}
.falt-fel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--rod);
}
.falt-fel .ic {
  stroke: var(--rod);
}
/* Knapprad som ligger kvar längst ner när man scrollar */
.form-fot.klibbig {
  position: sticky;
  bottom: 0;
  z-index: 5;
  align-items: center;
  margin-top: 0.5rem;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
.btn-text {
  border-color: transparent;
  background: none;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.btn-text:hover {
  border-color: transparent;
  text-decoration: underline;
}
/* Förhandsvisningskortet */
.forhand-etikett {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}
.forhand {
  border: 1px solid var(--linje);
  border-radius: 10px;
  background: var(--yta);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15, 27, 51, 0.04),
    0 8px 24px rgba(15, 27, 51, 0.06);
}
.forhand-bild {
  aspect-ratio: 16 / 9;
  background: var(--bla-mork);
  color: var(--guld);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.forhand-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.forhand-bild svg {
  width: 60%;
  opacity: 0.55;
}
.forhand-in {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.4rem 1.4rem;
}
.forhand-typ {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--guld-text, var(--guld-mork));
}
.forhand h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.forhand .tom {
  color: var(--text3);
}
.forhand-rad {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  color: var(--text2);
}
.forhand-rad .ic {
  flex-shrink: 0;
  stroke: var(--text3);
}
.forhand-text {
  margin: 0.25rem 0 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text2);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.forhand-fot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linje);
}
.forhand-knapp {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: 6px;
  background: var(--bla-mork);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}
.hint .ic {
  vertical-align: -3px;
  stroke: var(--text3);
}
.falt.har-fel input:focus,
.falt.har-fel textarea:focus {
  border-color: var(--rod);
  box-shadow: 0 0 0 3px rgba(170, 40, 40, 0.18);
}
.form-fot.klibbig {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ---------- Kalender: lugnare rutnät ----------
   Idag markeras bara med cirkeln runt datumet. Inga ord bryts; titeln står
   på en rad och hela texten syns i panelen. Tomma dagar är bara tomma. */
.kal-verktyg {
  row-gap: 0.75rem;
}
.kal-nav {
  display: flex;
  gap: 0.35rem;
}
.dag {
  min-height: 16rem;
  border-right-color: #eceef3;
}
.dag.idag,
.mdag.idag {
  background: none;
}
.dag-huvud {
  padding: 0.9rem 0.5rem 0.8rem;
  gap: 0.25rem;
  border-bottom-color: #eceef3;
}
.dag-huvud small {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text3);
}
.dag-huvud b {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}
.dag.son .dag-huvud small,
.dag.son .dag-huvud b,
.mdag.son .mnr {
  color: inherit;
}
.dag.idag .dag-huvud b,
.mdag.idag .mnr {
  background: var(--bla-mork);
  color: #fff;
}
.dag-lista {
  padding: 0.6rem 0.4rem;
  gap: 0.2rem;
}
.post,
.mpost {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border: none;
  border-radius: 4px;
  background: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.post:hover,
.mpost:hover {
  background: var(--yta2);
}
.post.vantar,
.mpost.vantar {
  background: none;
  border: none;
}
.post-tid {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.post-titel {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  hyphens: none;
}
.post.vantar .post-titel,
.mpost.vantar .post-titel {
  color: var(--text2);
  font-style: italic;
}
.installd .post-titel,
.installd .agenda-titel {
  text-decoration: line-through;
  color: var(--text3);
}
/* Färgen visas som en liten prick, inte som en ruta */
.prick-f {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--f);
}
.vantar .prick-f,
.farg-vantar .prick-f {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--text3);
}
/* Månad */
.manad-huvud {
  background: none;
}
.manad-huvud span {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text3);
}
.mdag {
  min-height: 7.5rem;
  padding: 0.45rem 0.3rem;
  gap: 0.05rem;
  border-color: #eceef3;
}
.mdag.utanfor {
  background: none;
}
.mdag.utanfor .mnr {
  color: #b7bec9;
}
.mnr {
  min-width: 1.9rem;
  height: 1.9rem;
  font-size: 0.95rem;
  margin: 0 0 0.15rem 0.2rem;
}
.mpost {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.3rem;
}
.mpost .post-tid {
  font-size: 0.8rem;
  flex-shrink: 0;
}
.mpost .post-titel {
  font-size: 0.82rem;
  font-weight: 500;
}
@media (max-width: 1100px) {
  .mpost .post-tid {
    display: none;
  }
}
@media (max-width: 900px) {
  .mpost .post-titel {
    display: none;
  }
  .mpost {
    display: inline-flex;
    width: auto;
    padding: 0.15rem;
  }
  .mdag {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .mdag .mnr {
    margin-right: calc(100% - 1.9rem);
  }
  .mpost::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--f);
  }
  .dag {
    min-height: 0;
  }
  .dag-huvud b {
    width: 2.2rem;
    height: 2.2rem;
  }
}
/* Färgförklaring: liten och grå, under kalendern */
.forklaring {
  gap: 1.1rem;
  font-size: 0.9rem;
  color: var(--text3);
}
.forklaring i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.forklaring .farg-vantar i {
  border: none;
  box-shadow: inset 0 0 0 1.5px var(--text3);
}
/* ---------- Kalender: listvy ---------- */
.agenda-dag + .agenda-dag {
  border-top: 1px solid var(--linje);
}
.agenda-rub {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1.1rem 1.5rem 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.agenda-dag.idag .agenda-rub {
  color: var(--text);
}
.idag-markor {
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: var(--bla-mork);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.agenda-post {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1.5rem;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.agenda-post:last-child {
  padding-bottom: 1.1rem;
}
.agenda-post:hover {
  background: var(--yta2);
}
.agenda-tid {
  display: flex;
  flex-direction: column;
  width: 4.2rem;
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.agenda-tid small {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text3);
}
.agenda-in {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.agenda-titel {
  font-size: 1.15rem;
  font-weight: 600;
  overflow-wrap: break-word;
}
.agenda-plats {
  font-size: 1rem;
  color: var(--text2);
}
.agenda-post .prick-f {
  width: 0.6rem;
  height: 0.6rem;
}
.agenda-tom {
  margin: 0;
  padding: 0.3rem 1.5rem 1.1rem;
  color: var(--text3);
}
.tomt-vecka {
  padding: 1rem;
}
@media (max-width: 600px) {
  .agenda-rub,
  .agenda-post,
  .agenda-tom {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .agenda-post {
    gap: 0.75rem;
  }
  .agenda-tid {
    width: 3.6rem;
    font-size: 1rem;
  }
  .agenda-post .chip {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
  }
}
.kal-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.kal-topp .h2 {
  margin: 0;
}
.kal-knappar {
  display: flex;
  gap: 0.5rem;
}
.kal-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: -0.5rem;
}
@media (max-width: 600px) {
  .kal-knappar .btn:first-child {
    display: none;
  }
}
@media (max-width: 600px) {
  .kal-rad .segment button {
    padding: 0 0.65rem;
  }
  .kal-nav {
    gap: 0.25rem;
  }
  .kal-nav .btn {
    padding: 0 0.6rem;
  }
}
.meny-namn small.sa-etikett {
  color: var(--bla-mork);
  font-size: 0.68rem;
  padding: 0.12rem 0.45rem;
  letter-spacing: 0.1em;
}

/* Sidan ska aldrig kunna scrollas i sidled. */
html,
body {
  overflow-x: clip;
}

/* ---------- Inloggning ---------- */
.delad {
  grid-template-columns: minmax(0, 34rem) 1fr;
}
.delad-v {
  padding: 3rem 3.5rem;
}
.logo-rad {
  gap: 0.75rem;
}
.logo-rad b {
  font-size: 1.9rem;
  font-weight: 600;
}
.delad-v-text {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 24rem;
}
.delad-v h2 {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.delad-vers {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: #e8d6a8;
}
.delad-vers small {
  font-size: 0.85em;
  opacity: 0.8;
}
.delad-v .ark {
  opacity: 0.22;
}
.delad-in {
  width: min(28rem, 100%);
  gap: 1.6rem;
}
.login-topp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.login-etikett {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}
.login-etikett.guld {
  color: var(--guld-mork);
}
.login-rub {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.login-text {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text2);
}
.login-form {
  gap: 1.25rem;
}
.login-form .btn-full {
  margin-top: 0.25rem;
}
.login-fot {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linje);
  font-size: 1rem;
  color: var(--text2);
}
.login-fot .lank-knapp,
.falt-rad .lank-knapp,
.vald-kyrka .lank-knapp {
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
}
.login-hint {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  font-size: 0.98rem;
  color: var(--text3);
}
.login-hint .ic {
  flex-shrink: 0;
  margin-top: 0.15rem;
  stroke: var(--text3);
}
.login-tillbaka {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: var(--text2);
  cursor: pointer;
}
.login-tillbaka:hover {
  color: var(--text);
  text-decoration: underline;
}
.login-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--linje);
  background: var(--yta);
  color: var(--bla-mork);
}
.vald-kyrka {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.98rem;
  color: var(--text2);
}
.vald-kyrka b {
  color: var(--text);
}
.falt-rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.falt-rad label {
  font-size: 1.08rem;
  font-weight: 600;
}
.losen {
  position: relative;
}
.losen input {
  padding-right: 4.5rem;
}
.losen-visa {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  min-height: 2.2rem;
  padding: 0 0.6rem;
  border: none;
  border-radius: 4px;
  background: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
}
.losen-visa:hover {
  background: var(--yta2);
  color: var(--text);
}
.sok input:focus {
  outline: none;
  border-color: var(--bla);
  box-shadow: 0 0 0 3px rgba(31, 78, 140, 0.22);
}
.kyrklista {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linje);
  border-radius: 10px;
  background: var(--yta);
  overflow: hidden;
}
.kyrklista:empty {
  display: none;
}
.kyrklista > .login-hint {
  padding: 1rem 1.1rem;
}
.kyrklista .kyrkval {
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border: none;
  border-bottom: 1px solid var(--linje);
  border-radius: 0;
  box-shadow: none;
}
.kyrklista .kyrkval:last-child {
  border-bottom: none;
}
.kyrklista .kyrkval:hover {
  background: var(--yta2);
}
.kyrkval-in {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.kyrkval-in b {
  font-size: 1.1rem;
  font-weight: 600;
}
.kyrkval-in span {
  font-size: 0.95rem;
  color: var(--text3);
}
.kyrkval .tile {
  width: 2.6rem;
  height: 2.6rem;
}
@media (max-width: 900px) {
  .delad {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .delad-v {
    padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1.5rem 1.75rem;
  }
  .delad-v-text {
    margin-top: 1.5rem;
  }
  .delad-v h2 {
    font-size: 1.9rem;
  }
  .delad-vers {
    display: none;
  }
  .delad-h {
    align-items: flex-start;
    padding: 2rem 1.25rem 3rem;
  }
  .login-rub {
    font-size: 2.2rem;
  }
}
.kyrklista .kyrkval.senast {
  border-color: var(--linje);
}

/* ---------- Datumruta som en liten kalender ----------
   Samma ljusblå som hjälpsidans plustecken. Används för lokalbokningar,
   förfrågningar och evenemang (Start, Lokaler, Evenemang). */
.datumruta {
  width: 3.5rem;
  padding: 0.45rem 0 0.5rem;
  border-radius: 6px;
  background: var(--bla-ljus);
  gap: 0.05rem;
}
.datumruta small {
  color: var(--bla);
  opacity: 0.85;
}
.datumruta b {
  color: var(--bla-mork);
}

/* ---------- Ikonrutor i samma ljusblå som datumrutan ---------- */
.tile,
.snabb-ic {
  border: none;
  background: var(--bla-ljus);
  color: var(--bla);
}
.tile .ic,
.snabb-ic .ic {
  stroke: var(--bla);
}
a.rad:hover .tile,
.rad-knapp:hover .tile {
  background: #dde8f6;
}

/* ---------- Flytta bokning ---------- */
.panel-lank {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 1rem;
}
.panel-lank .ic {
  stroke: currentColor;
}
.ledig {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gron);
}
.ledig .ic {
  stroke: var(--gron);
}
.panel .form {
  gap: 1.25rem;
}
.par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

/* ---------- Statistik: periodval och cirkeldiagram ---------- */
.stat-val {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
}
.stat-val .falt {
  min-width: 11rem;
}
.stat-val select {
  min-height: 2.9rem;
}
.stat-val .segment {
  align-self: flex-start;
}
.ring-rad {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.ring {
  width: 11rem;
  height: 11rem;
  flex-shrink: 0;
}
.ring-tal {
  font-size: 22px;
  font-weight: 600;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
}
.ring-text {
  font-size: 8.5px;
  fill: var(--text3);
  letter-spacing: 0.04em;
}
.ring-lista {
  flex: 1;
  min-width: 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.ring-lista li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linje);
}
.ring-lista li:last-child {
  border-bottom: none;
}
.ring-lista i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.ring-lista span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ring-lista b {
  font-size: 1.02rem;
  font-weight: 600;
}
.ring-lista span small {
  font-size: 0.85rem;
  color: var(--text3);
}
.ring-lista em {
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ring-pct {
  width: 3rem;
  text-align: right;
  font-size: 0.9rem;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .stat-ringar {
    grid-template-columns: 1fr;
  }
}
.stat-ringar {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.stat-val ~ .nyckeltal {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
@media (max-width: 1100px) {
  .stat-ringar {
    grid-template-columns: 1fr;
  }
}

/* ---------- Statistik: jämförelse mellan två år ---------- */
.nt-diff {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.upp {
  color: var(--gron);
}
.ner {
  color: var(--text2);
}
.lika {
  color: var(--text3);
}
.nt-diff.lika {
  font-weight: 500;
}
.ring-par {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  flex-wrap: wrap;
}
.ring-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.ring-fig figcaption {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text2);
}
.ring.liten {
  width: 8.5rem;
  height: 8.5rem;
}
.jmf-tabell {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.jmf-tabell th,
.jmf-tabell td {
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--linje);
  text-align: right;
  vertical-align: top;
}
.jmf-tabell tr:last-child th,
.jmf-tabell tr:last-child td {
  border-bottom: none;
}
.jmf-tabell thead th {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.jmf-tabell tbody th {
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
}
.jmf-tabell tbody th i {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.5rem;
  border-radius: 2px;
}
.jmf-tabell small {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text3);
}
.jmf-tabell tbody th small {
  margin-left: 1.15rem;
}
.jmf-tabell td {
  font-size: 1.05rem;
  font-weight: 600;
}
.stapel.jmf i {
  background: #7fa0d1;
}
.hbar .spar-grupp {
  flex: 1;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 400;
}
.hbar .spar-grupp .spar {
  width: auto;
  flex: none;
}
.hbar.dubbel .spar {
  height: 0.8rem;
}
.hbar .spar.b i {
  background: #7fa0d1;
}
.hbar b small {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text3);
}
.hbar + .hbar {
  margin-top: 0.9rem;
}
.jmf-nyckel {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--text2);
}
.jmf-nyckel span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.jmf-nyckel i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}
.jmf-nyckel i.a {
  background: var(--bla);
}
.jmf-nyckel i.b {
  background: #7fa0d1;
}

/* ---------- Åtkomstlogg ---------- */
.logg-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem 1rem;
}
.logg-filter .falt {
  min-width: 10.5rem;
  flex: 0 1 13rem;
}
.logg-filter select,
.logg-filter input {
  min-height: 2.9rem;
}
.logg-dl {
  margin-left: auto;
}
.logg-sam {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: -0.5rem;
  font-size: 0.98rem;
  color: var(--text2);
}
.logg-sam .lank-knapp {
  padding: 0;
  font-size: 0.95rem;
}
.logg-dag {
  padding: 0.9rem 1.5rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--yta2);
  border-bottom: 1px solid var(--linje);
}
.logg-dag:not(:first-child) {
  border-top: 1px solid var(--linje);
}
.logg-rad {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid var(--linje);
}
.logg-rad:last-child,
.logg-rad:has(+ .logg-dag),
.logg-rad:has(+ .rad-fot) {
  border-bottom: none;
}
.logg-tid {
  width: 3.4rem;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.logg-in {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.logg-vad {
  font-size: 1.05rem;
  overflow-wrap: break-word;
}
.logg-vem {
  font-size: 0.92rem;
  color: var(--text3);
}
@media (max-width: 600px) {
  .logg-filter .falt {
    flex: 1 1 100%;
  }
  .logg-dl {
    margin-left: 0;
  }
  .logg-rad,
  .logg-dag {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}
.logg-filter .falt {
  flex: 0 1 11.5rem;
  min-width: 9.5rem;
}
.logg-filter .lg-egen {
  flex-basis: 10rem;
}
.logg-filter .lg-egen {
  flex-basis: 11.5rem;
  min-width: 11rem;
}
.logg-filter .lg-egen input {
  padding: 0 0.7rem;
}

/* ---------- GDPR ---------- */
.gdpr-val {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.gdpr-knapp {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linje);
  border-radius: 10px;
  background: var(--yta);
  box-shadow: var(--skugga);
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.gdpr-knapp:hover {
  border-color: var(--linje2);
}
.gdpr-knapp > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.gdpr-knapp b {
  font-size: 1.1rem;
  font-weight: 600;
}
.gdpr-knapp small {
  font-size: 0.95rem;
  color: var(--text3);
}
.gdpr-rub {
  padding: 1.4rem 1.75rem 1rem;
  align-items: flex-start;
}
.gdpr-rub .hint {
  margin: 0.3rem 0 0;
}
.tider {
  border-top: 1px solid var(--linje);
}
.tid-rad {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.75rem;
  border-bottom: 1px solid var(--linje);
}
.tid-vad {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.tid-vad b {
  font-weight: 600;
}
.tid-vad small {
  font-size: 0.92rem;
  color: var(--text3);
}
.tid-hur {
  font-weight: 500;
  color: var(--text2);
}
.tid-atg {
  justify-self: end;
}
.tid-atg .lank-knapp {
  padding: 0;
  font-size: 0.95rem;
}
.klart {
  font-size: 0.92rem;
  color: var(--text3);
}
.tider-fot {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  padding: 1rem 1.75rem 1.3rem;
  font-size: 0.95rem;
  color: var(--text3);
}
.tider-fot .ic {
  flex-shrink: 0;
  margin-top: 0.1rem;
  stroke: var(--text3);
}
.gdpr-person {
  padding: 0.85rem 1.75rem;
  border-top: 1px solid var(--linje);
}
.gdpr-tom {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 1rem 1.75rem 1.3rem;
  border-top: 1px solid var(--linje);
  color: var(--text3);
}
.gdpr-tom .ic {
  stroke: var(--gron);
}
.kryss-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
}
.tal-falt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tal-falt input {
  width: 6rem !important;
  flex: none;
}
.tal-falt span {
  color: var(--text2);
}
.val-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.val-rad {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linje2);
  border-radius: 6px;
  cursor: pointer;
}
.val-rad:has(input:checked) {
  border-color: var(--bla-mork);
  box-shadow: inset 0 0 0 1px var(--bla-mork);
}
.val-rad input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--bla-mork);
  flex-shrink: 0;
}
.val-rad span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.val-rad b {
  font-weight: 600;
}
.val-rad small {
  font-size: 0.92rem;
  color: var(--text3);
}
#rp-lista,
#ru-lista {
  display: flex;
  flex-direction: column;
}
#rp-lista .panel-etikett {
  margin-bottom: 0.2rem;
}
.panel .rad-knapp {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
@media (max-width: 700px) {
  .tid-rad {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.9rem 1.1rem;
  }
  .tid-atg {
    justify-self: start;
  }
  .gdpr-rub,
  .gdpr-person,
  .gdpr-tom,
  .tider-fot {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .kryss-lista {
    grid-template-columns: 1fr;
  }
}
.falt .val-rad input {
  min-height: 0;
  padding: 0;
}
/* Dolda kryssrutor inuti ett fält får ingen bredd (samma skydd som valknapparna). */
.kryss {
  position: relative;
}
.falt .kryss input {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
}
.tid-rad {
  grid-template-columns: minmax(0, 1fr) 15rem 11rem;
}
.tid-hur {
  text-align: left;
}
@media (max-width: 700px) {
  .tid-rad {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hjälp: kategorirubriker ---------- */
.faq-kat {
  margin: 0;
  padding: 1.1rem 1.75rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--yta2);
  border-bottom: 1px solid var(--linje);
}
.faq details + .faq-kat {
  border-top: 1px solid var(--linje);
}
@media (max-width: 600px) {
  .faq-kat {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}

/* ---------- Menyn: topprad med knapp för att fälla ihop ---------- */
.meny-topp {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.meny-topp .meny-logo {
  flex: 1;
  min-width: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.meny-fall {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: #8c9ab5;
  cursor: pointer;
}
.meny-fall:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ---------- Menyn: profilraden (öppnar Mitt konto) ---------- */
.meny-anv {
  border-radius: 6px;
  padding: 0.7rem 0.6rem;
  margin-top: 0.4rem;
  border-top: none;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.meny-anv::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.meny-anv:hover,
.meny-anv.pa {
  background: rgba(255, 255, 255, 0.08);
}
.meny-anv > .ic {
  flex-shrink: 0;
  stroke: #8c9ab5;
}

/* ---------- Hopfälld meny: bara ikoner (bara på dator) ---------- */
@media (min-width: 961px) {
  html.meny-liten .meny {
    width: 4.9rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  html.meny-liten .meny-topp {
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
  }
  html.meny-liten .meny-logo {
    justify-content: center;
    padding: 0;
  }
  html.meny-liten .meny-namn,
  html.meny-liten .meny-l > span,
  html.meny-liten .meny-anv-in,
  html.meny-liten .meny-anv > .ic {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.meny-liten .meny-l {
    justify-content: center;
    padding: 0;
    gap: 0;
  }
  html.meny-liten .meny-anv {
    justify-content: center;
    padding: 0.5rem 0;
  }
  html.meny-liten .meny-fall {
    margin-top: 0;
  }
}
@media (max-width: 960px) {
  .meny-fall {
    display: none;
  }
}

/* ---------- Mitt konto ---------- */
.konto-profil {
  gap: 1.5rem;
}
.konto-profil .panel-titel {
  font-size: 2rem;
}
.text-prov {
  padding: 1.1rem 1.2rem;
  border-radius: 6px;
  background: var(--yta2);
  border: 1px solid var(--linje);
}
.konto-rub {
  padding: 1.4rem 1.75rem 0.9rem;
  border-bottom: 1px solid var(--linje);
}
.kort.tat .rad-knapp {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.kort.tat .rad-knapp:last-child {
  border-bottom: none;
}

/* ---------- Supportärenden (systemadmin) ---------- */
.su-sok {
  flex: 1 1 16rem !important;
}
.su-sok .sok input {
  min-height: 2.9rem;
}
.sup-rutnat {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) 1.6fr;
  gap: 1.5rem;
  align-items: start;
}
.sup-lista .rad-knapp {
  padding: 0.9rem 1.2rem;
}
.sup-lista .rad-knapp.vald {
  background: var(--bla-ljus);
  box-shadow: inset 3px 0 0 var(--bla);
}
.sup-kyrka {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--guld-text);
}
.sup-detalj {
  gap: 0.9rem;
}
.sup-rub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sup-trad {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sup-medd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  background: var(--yta2);
  border: 1px solid var(--linje);
}
.sup-medd.du {
  margin-left: 2rem;
  background: var(--bla-ljus);
  border-color: #d6e2f3;
}
.sup-medd p {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  white-space: pre-line;
}
.sup-tidigare {
  margin-top: 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linje);
  display: flex;
  flex-direction: column;
}
.sup-tidigare .h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.sup-tidigare .rad-knapp {
  padding: 0.75rem 0.2rem;
}
.sup-tidigare .rad-knapp:last-child {
  border-bottom: none;
}
@media (max-width: 1000px) {
  .sup-rutnat {
    grid-template-columns: 1fr;
  }
}
.logg-filter .falt:has(#su-k) {
  flex-basis: 16rem;
}

/* ---------- Support: lagringstid och användarens ärenden ---------- */
.sup-lagring {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.95rem;
  color: var(--text2);
}
.sup-lagring > span {
  flex: 1;
  min-width: 16rem;
}
.sup-lagring .ic {
  stroke: var(--text3);
  flex-shrink: 0;
}
.sup-medd.kyrco {
  background: var(--bla-ljus);
  border-color: #d6e2f3;
}
.sup-medd.egen {
  margin-left: 2rem;
}
.sup-amne {
  font-size: 1.2rem;
  font-weight: 600;
}
.sup-svar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sup-svar input {
  flex: 1;
  min-width: 14rem;
  min-height: 2.9rem;
  padding: 0 1rem;
  border-radius: 6px;
  border: 1px solid var(--linje2);
  background: var(--yta);
  font: inherit;
}
.sup-svar input:focus {
  outline: none;
  border-color: var(--bla);
  box-shadow: 0 0 0 3px rgba(31, 78, 140, 0.22);
}

/* ---------- Information på publika formulär (GDPR artikel 13) ---------- */
.insamling {
  border: 1px solid var(--linje);
  border-radius: 6px;
  background: var(--yta2);
  font-size: 0.95rem;
}
.insamling summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text2);
}
.insamling summary .ic {
  stroke: var(--text3);
}
.insamling > div {
  padding: 0 1rem 0.9rem;
  color: var(--text2);
  line-height: 1.5;
}
.insamling p {
  margin: 0.5rem 0 0;
}

.kyrkpop-tom {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.8rem;
  font-size: 0.98rem;
  color: var(--text2);
}
.kyrkpop-tom .ic {
  flex-shrink: 0;
  margin-top: 0.15rem;
  stroke: var(--text3);
}
.senast-knapp {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--linje);
  border-radius: 10px;
  background: var(--yta);
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.senast-knapp:hover {
  border-color: var(--linje2);
}

/* ---------- Inloggning: knapp som öppnar kyrkväljaren ---------- */
.kyrk-oppna {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 0 1rem;
  border: 1px solid var(--linje2);
  border-radius: 6px;
  background: var(--yta);
  font: inherit;
  font-size: 1.1rem;
  color: var(--text3);
  text-align: left;
  cursor: pointer;
}
.kyrk-oppna span {
  flex: 1;
}
.kyrk-oppna:hover {
  border-color: var(--text3);
  color: var(--text2);
}
.kyrk-oppna .ic {
  stroke: currentColor;
}

/* ---------- Kyrkväljaren: alla kyrkor per ort i kolumner ---------- */
.kyrkmodal-bak {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(4vh, 1rem) 1rem;
  background: rgba(8, 14, 30, 0.45);
  animation: tona-in 0.15s ease;
}
.kyrkmodal {
  width: min(56rem, 100%);
  max-height: calc(100vh - 2 * max(4vh, 1rem));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1.75rem;
  border-radius: 10px;
  background: var(--yta);
  box-shadow: 0 20px 50px rgba(8, 14, 30, 0.25);
}
.kyrkmodal-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kyrkmodal-topp h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
}
.kyrkmodal-topp .modal-x {
  position: static;
}
.kyrkmodal-lista {
  overflow-y: auto;
  min-height: 6rem;
}
.kyrkmodal-antal {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}
/* Orterna flödar i kolumner, så att många kyrkor ryms utan att man scrollar. */
.kyrk-kolumner {
  columns: 15rem;
  column-gap: 1.75rem;
}
.kyrk-ort {
  break-inside: avoid;
  margin-bottom: 1.1rem;
}
.kyrk-ort h3 {
  margin: 0 0 0.3rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--linje);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--guld-text);
}
.kyrk-val {
  display: block;
  width: 100%;
  padding: 0.45rem 0.55rem;
  margin: 0 -0.55rem;
  border: none;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  width: calc(100% + 1.1rem);
}
.kyrk-val:hover,
.kyrk-val.aktiv {
  background: var(--bla-ljus);
  color: var(--bla-mork);
}
.kyrk-val mark {
  background: none;
  color: var(--bla);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 600px) {
  .kyrkmodal-bak {
    padding: 0;
  }
  .kyrkmodal {
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.1rem 1rem;
  }
  .kyrk-kolumner {
    columns: 1;
  }
}
/* Tätare rader och grupper som får delas mellan kolumner ger jämnare kolumner. */
.kyrk-ort {
  break-inside: auto;
  margin-bottom: 0.8rem;
}
.kyrk-ort h3 {
  break-after: avoid;
  margin-bottom: 0.15rem;
}
.kyrk-val {
  break-inside: avoid;
  padding: 0.32rem 0.55rem;
  font-size: 1rem;
}
.kyrkmodal {
  gap: 0.85rem;
}
.kyrk-oppna:focus-visible {
  outline: none;
  border-color: var(--bla);
  box-shadow: 0 0 0 3px rgba(31, 78, 140, 0.22);
}

/* ---------- Publik bokning: fyra steg med kalender ---------- */
.bok-form {
  padding: 2rem 2.25rem;
  gap: 1.4rem;
}
.bok-steg {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bok-steg li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.98rem;
  color: var(--text3);
  min-width: 0;
}
.bok-steg li > button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--text2);
  cursor: pointer;
}
.bok-steg li > button:hover span:last-child {
  text-decoration: underline;
}
.bok-nr {
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--linje2);
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--yta);
}
.bok-steg li.nu {
  color: var(--text);
  font-weight: 600;
}
.bok-steg li.nu .bok-nr {
  border-color: var(--bla-mork);
  background: var(--bla-mork);
  color: #fff;
}
.bok-steg li.klar .bok-nr {
  border-color: var(--gron);
  background: var(--gron-ljus);
  color: var(--gron);
}
.bok-steg li.klar .bok-nr .ic {
  stroke: var(--gron);
}
.bok-bar {
  height: 3px;
  margin-top: -0.6rem;
  border-radius: 2px;
  background: var(--linje);
  overflow: hidden;
}
.bok-bar i {
  display: block;
  height: 100%;
  background: var(--bla-mork);
  transition: width 0.25s ease;
}
.bok-rub {
  margin: 0.3rem 0 0;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
}
.bok-sam {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: -0.6rem 0 0;
  font-size: 1rem;
  color: var(--text2);
}
.bok-sam .ic {
  stroke: var(--text3);
}
.bok-lokalinfo {
  padding: 1rem 1.2rem;
  border-radius: 6px;
  background: var(--yta2);
  border: 1px solid var(--linje);
  font-size: 1rem;
  color: var(--text2);
}
.bok-lokalinfo b {
  color: var(--text);
}
.bok-lokalinfo p {
  margin: 0.3rem 0 0;
}
.bok-dagtid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}
/* Kalendern */
.bok-kal-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.bok-kal-topp b {
  font-size: 1.1rem;
  font-weight: 600;
}
.bok-kal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}
.bok-kal-vd {
  padding: 0.3rem 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.kal-dag {
  position: relative;
  aspect-ratio: 1;
  min-height: 2.6rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
}
.kal-dag.ledig {
  background: var(--bla-ljus);
  color: var(--bla-mork);
}
.kal-dag.delvis {
  background: var(--bla-ljus);
  color: var(--bla-mork);
}
.kal-dag.delvis::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  width: 0.35rem;
  height: 0.35rem;
  margin-left: -0.175rem;
  border-radius: 50%;
  background: var(--guld);
}
.kal-dag:not(:disabled):hover {
  border-color: var(--bla);
}
.kal-dag:disabled {
  cursor: default;
  color: #b7bec9;
  font-weight: 400;
}
.kal-dag.full:disabled {
  text-decoration: line-through;
}
.kal-dag.vald {
  background: var(--bla-mork);
  color: #fff;
}
.kal-dag.vald::after {
  background: #fff;
}
.kal-dag.idag:not(.vald) {
  border-color: var(--linje2);
}
.bok-kal-nyckel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--text3);
}
.bok-kal-nyckel span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.bok-kal-nyckel i {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
}
.bok-kal-nyckel i.ledig {
  background: var(--bla-ljus);
  border: 1px solid #cfdcef;
}
.bok-kal-nyckel i.delvis {
  background: var(--bla-ljus) radial-gradient(circle at 50% 75%, var(--guld) 0 22%, transparent 24%);
  border: 1px solid #cfdcef;
}
.bok-kal-nyckel i.full {
  background: none;
  border: 1px solid var(--linje2);
}
/* Tid */
.bok-tid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.2rem 1.3rem;
  border-radius: 10px;
  border: 1px solid var(--linje);
  background: var(--yta2);
}
.bok-tid.tom {
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  text-align: center;
  color: var(--text3);
}
.bok-tid.tom .ic {
  stroke: var(--text3);
}
.bok-tid.tom p {
  margin: 0;
}
.bok-tid h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.bok-linje {
  position: relative;
  height: 1.1rem;
  border-radius: 4px;
  background: #dfe9d9;
  overflow: hidden;
}
.bok-linje .upp {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, #c9d1de 0 4px, #dde2ea 4px 8px);
}
.bok-linje .val {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--bla-mork);
  border-radius: 3px;
}
.bok-linje-tim {
  position: relative;
  height: 1rem;
  margin-top: -0.5rem;
  font-size: 0.75rem;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.bok-linje-tim span {
  position: absolute;
  transform: translateX(-50%);
}
.bok-linje-tim span:first-child {
  transform: none;
}
.bok-linje-tim span:last-child {
  transform: translateX(-100%);
}
.bok-tid .hint {
  margin: 0;
}
.bok-langd {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-weight: 600;
  color: var(--gron);
}
.bok-langd .ic {
  stroke: var(--gron);
}
.bok-granska {
  border-top: 1px solid var(--linje);
}
.bok-granska .kv {
  align-items: baseline;
}
.bok-granska .kv b {
  flex: 1;
  text-align: left;
  margin-left: 1rem;
}
.bok-granska .kv span:first-child {
  width: 9rem;
  flex-shrink: 0;
}
.bok-granska .lank-knapp {
  padding: 0;
  font-size: 0.92rem;
  font-weight: 500;
}
.bok-fot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linje);
}
.bok-fot .btn-primar {
  min-height: 3.4rem;
  padding: 0 1.6rem;
}
@media (max-width: 800px) {
  .bok-form {
    padding: 1.4rem 1.1rem;
  }
  .bok-dagtid {
    grid-template-columns: 1fr;
  }
  .bok-steg li span:last-child {
    display: none;
  }
  .bok-steg li.nu span:last-child {
    display: inline;
  }
  .bok-granska .kv span:first-child {
    width: 6.5rem;
  }
}
.bok-kal-topp .btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.bok-linje-nyckel {
  display: flex;
  gap: 1rem;
  margin-top: -0.3rem;
  font-size: 0.82rem;
  color: var(--text3);
}
.bok-linje-nyckel span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.bok-linje-nyckel i {
  width: 0.8rem;
  height: 0.6rem;
  border-radius: 2px;
}
.bok-linje-nyckel i.val {
  background: var(--bla-mork);
}
.bok-linje-nyckel i.upp {
  background: repeating-linear-gradient(45deg, #c9d1de 0 3px, #dde2ea 3px 6px);
}
.bok-linje-nyckel i.led {
  background: #dfe9d9;
}
@media (max-width: 480px) {
  .bok-nasta {
    display: none;
  }
  .bok-fot .btn {
    padding: 0 1.1rem;
  }
}
@media (max-width: 800px) {
  .bok-steg li.nu {
    flex: 2.6;
    white-space: nowrap;
  }
}

/* ---------- Publik bokning: förenklad ---------- */
.bok-lokaler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.9rem;
}
.bok-lokal {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--linje2);
  border-radius: 10px;
  background: var(--yta);
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.bok-lokal:hover,
.bok-lokal.vald {
  border-color: var(--bla-mork);
  box-shadow: inset 0 0 0 1px var(--bla-mork);
}
.bok-lokal img,
.bok-lokal-bild {
  width: 100%;
  height: 6.5rem;
  object-fit: cover;
}
.bok-lokal-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bla-ljus);
  color: var(--bla);
}
.bok-lokal-bild .ic {
  stroke: var(--bla);
}
.bok-lokal-in {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem 1rem;
}
.bok-lokal-in b {
  font-size: 1.1rem;
  font-weight: 600;
}
.bok-lokal-in span {
  font-size: 0.95rem;
  color: var(--text2);
}
.bok-lokal-in small {
  margin-top: 0.2rem;
  font-size: 0.88rem;
  color: var(--text3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bok-kal-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
}
.bok-kal-hint i {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  background: var(--bla-ljus);
  border: 1px solid #cfdcef;
}
.kal-dag.ledig.vald {
  background: var(--bla-mork);
  color: #fff;
}
.bok-val {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bok-val-rub {
  font-size: 0.95rem;
  font-weight: 600;
}
.bok-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bok-chip {
  min-height: 2.6rem;
  padding: 0 0.8rem;
  border: 1px solid var(--linje2);
  border-radius: 6px;
  background: var(--yta);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
}
.bok-chip:hover {
  border-color: var(--bla-mork);
}
.bok-chip.vald {
  border-color: var(--bla-mork);
  background: var(--bla-mork);
  color: #fff;
}
.bok-langd {
  font-size: 1.1rem;
}
.bok-sammanf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.75rem;
  padding: 0.9rem 1.2rem;
  border-radius: 6px;
  background: var(--bla-ljus);
  border: 1px solid #d6e2f3;
}
.bok-sammanf > div {
  display: flex;
  flex-direction: column;
}
.bok-sammanf span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.bok-sammanf b {
  font-weight: 600;
}
.bok-sammanf .lank-knapp {
  margin-left: auto;
  padding: 0;
  font-size: 0.95rem;
}
.bok-klart {
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 2rem;
}
.bok-klart h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
}
.bok-klart .m-text {
  max-width: 32rem;
  margin: 0;
}
.bok-klart .bok-sammanf {
  justify-content: center;
  margin-top: 0.5rem;
}
.bok-klart-ikon {
  width: 4.2rem;
  height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gron-ljus);
  color: var(--gron);
}
.bok-klart-ikon .ic {
  stroke: var(--gron);
}

/* ---------- Publik anmälan till evenemang ---------- */
.ev-info {
  display: grid;
  grid-template-columns: minmax(0, 16rem) 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1rem;
  border-radius: 10px;
  background: var(--yta2);
  border: 1px solid var(--linje);
}
.ev-info:not(:has(img)) {
  grid-template-columns: 1fr;
}
.ev-info img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
}
.ev-info-in {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ev-info-in .bok-sam {
  margin: 0;
}
.ev-info-text {
  margin: 0.2rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text2);
  white-space: pre-line;
}
.bok-form .sall {
  width: 100%;
  min-height: 3.4rem;
  padding: 0 1rem;
  border-radius: 6px;
  border: 1.5px solid var(--linje2);
  background: var(--yta);
  font: inherit;
  font-size: 1.1rem;
}
.bok-form .sall:focus {
  outline: none;
  border-color: var(--bla);
  box-shadow: 0 0 0 3px rgba(31, 78, 140, 0.22);
}
@media (max-width: 700px) {
  .ev-info {
    grid-template-columns: 1fr;
  }
}

/* ---------- Statistik: långa namn i stapelrader ---------- */
/* Namnet får egen kolumn som aldrig bryter mitt i ett ord. Blir det för trångt
   avstavas det på svenska (Sammanträdes-rummet) i stället för att klippas. */
.hbar .hbar-namn {
  width: 15rem;
  flex-shrink: 0;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 700px) {
  .hbar {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }
  .hbar .hbar-namn {
    width: 100%;
  }
}

/* ---------- Statistik: grupperade staplar (sida vid sida) ---------- */
.gstaplar {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  height: 15rem;
  padding: 0 0.25rem;
  margin-top: 0.5rem;
}
.gstaplar.tat {
  height: 18rem;
  gap: 1.5rem;
  justify-content: center;
}
.gstapel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.gstaplar.tat .gstapel {
  max-width: 9rem;
}
.gstapel-par {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.gs {
  flex: 1;
  max-width: 2.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
}
.gstaplar.tat .gs {
  max-width: 6rem;
}
.gs b {
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}
.gstaplar.tat .gs b {
  font-size: 1.3rem;
  color: var(--text);
}
.gs i {
  display: block;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--bla);
}
.gs.b i {
  background: #7fa0d1;
}
.gstaplar.tat .gs i {
  background: #c9d6ea;
}
.gstaplar.tat .gstapel.nu .gs i {
  background: var(--bla-mork);
}
.gstaplar.tat .gstapel.jmf .gs i {
  background: #7fa0d1;
}
.gstapel-etikett {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gstaplar.tat .gstapel-etikett {
  font-size: 1rem;
  color: var(--text);
}
.gstapel.vald .gstapel-etikett {
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--guld);
}
.gstapel.framtid {
  opacity: 0.35;
}
.gstaplar:not(.tat) .gstapel.nu .gs i {
  background: var(--bla-mork);
}
.med-diff {
  margin-top: 1rem;
  text-align: center;
  font-weight: 600;
}
.med-diff.lika {
  font-weight: 500;
}
@media (max-width: 700px) {
  .gstaplar {
    gap: 0.2rem;
    height: 12rem;
  }
  .gstapel-par {
    gap: 1px;
  }
  .gs b {
    font-size: 0.7rem;
  }
  .gstapel-etikett {
    font-size: 0.72rem;
  }
}

/* ---------- Statistik: evenemang ---------- */
.ev-summa {
  font-size: 1.05rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.ev-summa b {
  color: var(--text);
  font-size: 1.2rem;
}
.ev-delar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linje);
}
@media (max-width: 1100px) {
  .ev-delar {
    grid-template-columns: 1fr;
  }
}
.ev-ansv .hint {
  margin: 0.25rem 0 1rem;
}
.ev-ansv .hbar .hbar-namn {
  width: 11rem;
}
.hbar-knapp {
  width: calc(100% + 1.2rem);
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  margin: 0 -0.6rem;
  cursor: pointer;
}
.hbar + .hbar-knapp,
.hbar-knapp + .hbar-knapp {
  margin-top: 0.3rem;
}
.hbar-knapp:hover {
  background: #f4f6fa;
}
.hbar-knapp.pa {
  background: var(--guld-ljus);
  border-color: var(--guld);
}
.ev-lista-rub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.ev-lista-rub .h3 {
  margin: 0;
}
.ev-lista-rub .lank-knapp {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.ev-lista .tat {
  border: 1px solid var(--linje);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.ev-datum {
  width: 3.4rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ev-datum b {
  font-family: var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
}
.ev-datum small {
  font-size: 0.72rem;
  color: var(--text3);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.med-jmf .gstaplar.tat .gstapel.nu .gs i {
  background: var(--bla);
}

/* Mottagare för inbjudan: sökbar lista med grupper och personer. */
.mottagar-verktyg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
}
.mottagar-lista {
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--linje);
  border-radius: var(--radie-s);
  padding: 0.6rem 0.8rem;
  margin-top: 0.4rem;
  background: var(--yta);
}
.mottagar-lista .panel-etikett {
  margin-top: 0.6rem;
}
.mottagar-lista .panel-etikett:first-child {
  margin-top: 0;
}
.mottagar-namn {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.mottagar-namn small {
  color: var(--text3);
  font-size: 0.85em;
}
.kryss.kryss-av {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Ledarväljare i gruppformuläret. */
.ledare-falt {
  position: relative;
}
.ledare-knapp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 0.7rem 1rem;
  font: inherit;
  color: var(--text);
  background: var(--yta);
  border: 1.5px solid var(--linje2);
  border-radius: var(--radie-s);
  text-align: left;
  cursor: pointer;
}
.ledare-knapp:hover,
.ledare-knapp[aria-expanded='true'] {
  border-color: var(--bla);
}
.ledare-knapp .ic {
  color: var(--text3);
}
.ledare-lada {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.8rem;
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  box-shadow: var(--skugga-lyft);
}
.ledare-lista {
  display: flex;
  flex-direction: column;
  max-height: 18rem;
  overflow-y: auto;
}
.ledare-rad {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--text);
  background: none;
  border: none;
  border-radius: var(--radie-s);
  text-align: left;
  cursor: pointer;
}
.ledare-rad:hover,
.ledare-rad:focus-visible {
  background: var(--bla-ljus);
}
.ledare-rad.pa {
  background: var(--bla-ljus);
  font-weight: 600;
}
.ledare-rad small {
  color: var(--text3);
  font-size: 0.85em;
  font-weight: 400;
}

/* ---------- Steg i evenemangsformuläret ----------
   Numrerade cirklar på en linje. Klara steg är gröna med en bock. */
.stegare {
  display: flex;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.stegare li {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}
/* Linjen mellan cirklarna */
.stegare li + li::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  right: calc(50% + 1.6rem);
  left: calc(-50% + 1.6rem);
  height: 3px;
  border-radius: 2px;
  background: var(--linje);
}
.stegare li.klar + li::before {
  background: var(--gron);
}
.stegare li > div,
.stegare li > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--text3);
  text-align: center;
}
.stegare li > button {
  cursor: pointer;
}
.stegare-cirkel {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--linje2);
  background: var(--yta);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.stegare-namn {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
}
.stegare li.nu .stegare-cirkel {
  border-color: var(--bla-mork);
  background: var(--bla-mork);
  color: #fff;
  box-shadow: 0 0 0 4px var(--bla-ljus);
}
.stegare li.nu .stegare-namn {
  color: var(--text);
  font-weight: 700;
}
.stegare li.klar .stegare-cirkel {
  border-color: var(--gron);
  background: var(--gron);
  color: #fff;
}
.stegare li.klar .stegare-cirkel .ic {
  stroke: #fff;
  stroke-width: 2.6;
}
.stegare li.klar .stegare-namn {
  color: var(--gron);
  font-weight: 600;
}
.stegare li > button:hover .stegare-namn {
  text-decoration: underline;
}
.stegare li > button:focus-visible .stegare-cirkel {
  box-shadow: 0 0 0 4px var(--gron-ljus);
}
@media (max-width: 600px) {
  .stegare-namn {
    font-size: 0.8rem;
  }
  .stegare-cirkel {
    width: 2.2rem;
    height: 2.2rem;
  }
  .stegare li + li::before {
    top: 1.1rem;
  }
}

/* ---------- Upp till tre bilder per evenemang ---------- */
.bild-galleri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
}
.bild-galleri .bild-yta:only-child {
  grid-column: 1 / -1;
}
.bild-ruta {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--linje);
  background: var(--yta2);
}
.bild-ruta img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.bild-forst {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--bla-mork);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}
.bild-ruta-knappar {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  gap: 0.35rem;
}
.bild-ruta-knappar .btn {
  min-height: 2.1rem;
  padding: 0 0.6rem;
  font-size: 0.82rem;
  box-shadow: 0 1px 3px rgba(15, 27, 51, 0.2);
}
.bild-yta.bild-yta-liten {
  min-height: 0;
  aspect-ratio: 16 / 10;
  padding: 0.75rem;
}
.forhand-bild {
  position: relative;
}
.forhand-antal {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(11, 23, 48, 0.75);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.forhand-antal .ic {
  stroke: #fff;
}
/* Evenemangssidan: bilderna sida vid sida */
.ev-bilder {
  display: grid;
  gap: 0.5rem;
}
.ev-bilder.antal-2 {
  grid-template-columns: 1fr 1fr;
}
.ev-bilder.antal-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.ev-bilder.antal-3 img:first-child {
  grid-row: 1 / 3;
}
.ev-bilder img {
  width: 100%;
  height: 100%;
  max-height: 22rem;
  min-height: 0;
  object-fit: cover;
  border-radius: 6px;
}
.ev-bilder.antal-3 img:not(:first-child) {
  max-height: 10.75rem;
}
/* Anmälningssidan */
.ev-info-bilder {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ev-info-fler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.ev-info .ev-info-fler img {
  aspect-ratio: 4 / 3;
}
.forhand-antal {
  white-space: nowrap;
}
.forhand-bild .forhand-antal .ic,
.forhand-antal svg {
  width: 16px;
  height: 16px;
  opacity: 1;
}

/* ---------- Flera bilder per lokal ---------- */
.panel-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.4rem;
  margin-top: -0.9rem;
}
.panel-bilder img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}
.bok-lokal-hel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bok-lokal-hel .bok-lokal {
  flex: 1;
}
.bok-lokal-bilder {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  font-size: 0.95rem;
}
.lokal-galleri {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lokal-galleri img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* ---------- Valkort: tydliga alternativ med ikon och förklaring ---------- */
.val-kort-grupp {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.val-kort-grupp legend {
  padding: 0;
  margin-bottom: 0.5rem;
}
.val-kort-rad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.val-kort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--linje2);
  border-radius: var(--radie);
  background: var(--yta);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.val-kort:hover {
  border-color: var(--text3);
}
.val-kort input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.val-kort-ikon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--bla-ljus);
  color: var(--bla);
}
.val-kort-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-right: 1.4rem;
}
.val-kort-text b {
  font-size: 1.05rem;
  line-height: 1.3;
}
.val-kort-text small {
  color: var(--text3);
  font-size: 0.9rem;
  line-height: 1.35;
}
.val-kort-bock {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
  display: none;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--bla-mork);
  color: #fff;
}
.val-kort-bock .ic {
  stroke: #fff;
  stroke-width: 2.6;
}
.val-kort:has(input:checked) {
  border-color: var(--bla-mork);
  background: var(--yta2);
  box-shadow: 0 0 0 3px var(--bla-ljus);
}
.val-kort:has(input:checked) .val-kort-bock {
  display: grid;
}
.val-kort:has(input:checked) .val-kort-ikon {
  background: var(--bla-mork);
  color: #fff;
}
.val-kort:has(input:focus-visible) {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

/* ---------- Grupp av fält med gemensam rubrik ---------- */
.falt-grupp {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  background: var(--yta2);
}
.falt-grupp > .falt-rub {
  font-size: 1.1rem;
}

/* GDPR: förklaring av lagringstiderna */
.gdpr-grund {
  border-top: 1px solid var(--linje);
  padding: 0.9rem 1.6rem 1.2rem;
}
.gdpr-grund summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bla);
}
.gdpr-grund > div {
  margin-top: 0.6rem;
  color: var(--text2);
  font-size: 1rem;
}
.gdpr-grund ul {
  margin: 0.4rem 0;
  padding-left: 1.2rem;
}
.gdpr-grund li {
  margin: 0.35rem 0;
}
.kost-samtycke {
  font-size: 0.95rem;
  align-items: flex-start;
}

/* ---------- Statistik: lång lista med evenemang ----------
   Listan har en fast höjd och scrollar för sig själv, med en rubrik per månad. */
.ev-sok {
  margin-bottom: 0.6rem;
}
.ev-rullning {
  max-height: 40rem;
  overflow-y: auto;
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  background: var(--yta);
  overscroll-behavior: contain;
}
.ev-rullning:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}
.ev-manad {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 1rem;
  background: var(--yta2);
  border-bottom: 1px solid var(--linje);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text2);
}
.ev-grupp .ev-rad {
  border-bottom: 1px solid var(--linje);
}
.ev-grupp:last-of-type .ev-rad:last-child {
  border-bottom: none;
}
.ev-inga {
  padding: 1rem;
  margin: 0;
}
.ev-antal {
  margin-top: 0.5rem;
}

/* ---------- Startsidan: snabb åtkomst och två enkla listor ---------- */
.snabbval {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.snabb {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.3rem 1.4rem;
  min-height: 7.5rem;
  font-size: 1.15rem;
}
.snabb b {
  font-size: 1.15rem;
  font-weight: 600;
}
.snabb:focus-visible {
  outline: 3px solid var(--guld);
  outline-offset: 2px;
}
.snabb-vantar {
  border-color: var(--gul-kant);
  background: var(--gul-ljus);
}
.snabb-antal {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--guld);
  color: var(--bla-mork);
  font-size: 0.9rem;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .snabbval {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .snabb {
    min-height: 0;
    padding: 1rem;
  }
}

/* ---------- Driftstatus ---------- */
.drift-lage {
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
}
.drift-lage .prick {
  width: 1.1rem;
  height: 1.1rem;
}
.drift-lage b {
  font-size: 1.5rem;
}
.drift-lage .hint {
  margin: 0;
}
.drift-lage.bra {
  background: #f6fbf8;
  border-color: var(--gron-kant);
}
.drift-lage.bra .prick,
.drift-lage.bra b {
  color: var(--gron);
}
.drift-lage.fel {
  background: var(--rod-ljus);
}
.drift-lage.fel .prick,
.drift-lage.fel b {
  color: var(--rod);
}
.sak-betyg {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.sak-betyg b {
  display: block;
  font-family: var(--serif);
  font-size: 1.8rem;
  line-height: 1.1;
}
.stjarnor {
  display: inline-flex;
  gap: 0.2rem;
}
.sak-grupp {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-top: 1px solid var(--linje);
  padding-top: 1rem;
}
.sak-grupp summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bla);
}
.sak-grupp[open] summary {
  margin-bottom: 0.4rem;
}
.sak-rad {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--gron);
}
.sak-rad.brist {
  color: var(--gul-text);
  background: var(--gul-ljus);
  border: 1px solid var(--gul-kant);
  border-radius: var(--radie-s);
  padding: 0.75rem 0.9rem;
}
.sak-rad .ic {
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.sak-rad b {
  display: block;
  color: var(--text);
}
.sak-rad span {
  color: var(--text2);
  font-size: 0.98rem;
}
/* Driftmeddelande: sökbar lista över kyrkor – bara en ruta hög, rullar vid många kyrkor. */
.mottagare {
  gap: 0.6rem;
}
.mottagare-lista {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--linje);
  border-radius: var(--radie-s);
  padding: 0.4rem 0.6rem;
}
.mottagare-lista .kryss[hidden] {
  display: none;
}
/* ---------- Kontakta oss ---------- */
.kontakt-val {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}
.kontakt-kort {
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
  color: var(--text);
}
.kontakt-kort:hover {
  border-color: var(--linje2);
  color: var(--text);
}
.kontakt-kort .tile {
  width: 3.6rem;
  height: 3.6rem;
}
.kontakt-kort b {
  display: block;
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}
.kontakt-rub {
  display: block;
  color: var(--text2);
  font-size: 1rem;
}
/* Säkerhetsöversikt */
.sak-rad .btn {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}
.sak-rad > div {
  flex: 1;
}
.tabell td.sak-flagga {
  background: var(--rod-ljus);
  color: var(--rod);
  font-weight: 700;
}
/* Kalendern: välj varifrån något ska tas bort */
.bort-val {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}
.bort-alt {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--linje);
  border-radius: var(--radie);
  background: var(--yta);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.bort-alt:hover,
.bort-alt:focus-visible {
  border-color: var(--bla);
}
.bort-alt b {
  display: block;
  font-size: 1.1rem;
}
.bort-alt span span {
  color: var(--text2);
}
.bort-alt.fara .tile {
  background: var(--rod-ljus);
  color: var(--rod);
}
.bort-alt.fara:hover,
.bort-alt.fara:focus-visible {
  border-color: var(--rod);
}
/* Arkiv för lokalbokningar och äldre evenemang */
.arkiv-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.arkiv-ar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}
.arkiv-ar select {
  min-width: 7rem;
}
.arkiv-manad summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.6rem;
  cursor: pointer;
  list-style: none;
}
.arkiv-manad summary::-webkit-details-marker {
  display: none;
}
.arkiv-manad[open] summary {
  border-bottom: 1px solid var(--linje);
}
.ar-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ar-knappar .btn.pa {
  background: var(--bla-mork);
  color: #fff;
}

/* ---------- Inloggningssidans sidfot och publika villkor/policy ---------- */
.login-h {
  flex-direction: column;
  gap: 2.5rem;
}
.login-fot {
  width: min(36rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linje);
  font-size: 0.98rem;
  color: var(--text3);
}
.login-fot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.login-fot p {
  margin: 0;
}
.login-fot a {
  color: inherit;
  text-underline-offset: 0.2em;
}
.login-fot a:hover,
.login-fot a:focus-visible {
  color: var(--text);
}
.publik-dok {
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* ---------- Boka åt någon: sök i registret och pris ---------- */
.reg-traffar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.reg-traffar:empty {
  display: none;
}
.reg-traff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--linje2);
  border-radius: 6px;
  background: var(--yta);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.reg-traff:hover,
.reg-traff:focus-visible {
  border-color: var(--text3);
}
.reg-traff > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.reg-traff small {
  color: var(--text3);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.reg-vald {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--linje2);
  border-radius: 6px;
}
.pris-val {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pris-val legend {
  padding: 0;
  margin-bottom: 0.3rem;
}

/* Val som inte går att välja just nu, t.ex. en roll som redan har 5 användare */
.val-k:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
.val-k:has(input:disabled) * {
  cursor: not-allowed;
}

/* ---------- Systemadmin: licens ---------- */
.licens-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0.4rem;
}
.btn.fara {
  color: var(--rod, #b42318);
}

/* ---------- Bokningssidan: regler och villkor ---------- */
.bok-regler {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.5rem 0;
  padding: 1.1rem 1.2rem;
  border: 1.5px solid var(--linje2);
  border-left: 4px solid var(--guld);
  border-radius: 6px;
  background: var(--yta);
}
.bok-regler h3 {
  margin: 0;
  font-size: 1.15rem;
}
.bok-regler ul {
  margin: 0;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bok-regler p {
  margin: 0;
}
.bok-regler .kryss {
  margin-top: 0.4rem;
  font-weight: 600;
}

/* ---------- Lokalkort på bokningssidan (2026-09-29) ----------
   Tidigare fick kortet en tjock mörk ram vid hover. Nu lyfts det lätt med en mjuk
   skugga och en ljusare blå kant. Valt kort har en tunn blå ram. */
.bok-lokal {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.bok-lokal:hover {
  border-color: var(--linje2);
  box-shadow: none;
}
@media (hover: hover) {
  .bok-lokal:hover {
    border-color: #9fb4d2;
    box-shadow: 0 8px 22px rgba(15, 27, 51, 0.09);
    transform: translateY(-2px);
  }
}
.bok-lokal.vald {
  border-color: var(--bla);
  box-shadow: inset 0 0 0 1px var(--bla);
}
.bok-lokal:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .bok-lokal,
  .bok-lokal:hover {
    transition: none;
    transform: none;
  }
}
.bok-lokal-in .bok-lokal-mp {
  font-size: 0.88rem;
  color: var(--guld-text);
}

/* ---------- Pris i steget Dina uppgifter ---------- */
.bok-pris {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--guld);
  border-radius: 6px;
  background: var(--guld-ljus);
}
.bok-pris span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--guld-text);
}
.bok-pris b {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bok-pris small {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  color: var(--text2);
}

/* ---------- Medlemsmatchning i förfrågan (personal) ---------- */
.medlem-match {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linje);
  border-radius: 6px;
  background: var(--yta2);
}
.medlem-match p {
  margin: 0;
}
.medlem-match .medlem-grund {
  font-size: 0.9rem;
  color: var(--text3);
}
.medlem-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Instruktioner (PDF) i Bokningsinställningar ---------- */
.instr-avsnitt {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 2px solid var(--guld);
}
.instr-forhand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.8rem;
}
.instr-forhand .falt {
  flex: 1 1 14rem;
}