/* Mit Jamii — formsprog fra iOS 26 ("Indstillinger" og Påmindelser).
 *
 * Tre ting bærer det, og de er vigtigere end farverne:
 *
 *   Målene    17px brødtekst, 34px stor titel, 13px fodnote, 44px rækker,
 *             16px indrykning. iOS' egne tal. Skaleres de ned, holder man op
 *             med at læse det som en app og begynder at læse det som en
 *             hjemmeside — uanset hvor pænt det ellers er sat op.
 *
 *   Trinnet   Lærredet er gråt, kortene er hvide. Grupperede lister lever af
 *             den forskel; ligger de to farver for tæt, forsvinder formen.
 *
 *   Tinten    Præcis én accentfarve — Jamiis koral — og den betyder "tryk
 *             her". Typefarverne (lilla/orange/grøn) bor kun i ikonfliserne,
 *             hvor de fortæller hvad slags opslag det er.
 */

:root {
  --canvas:    #F2F2F7;
  --card:      #FFFFFF;
  --nav:       rgba(242,242,247,.72);
  --label:     #000000;
  --label-2:   rgba(60,60,67,.60);
  --label-3:   rgba(60,60,67,.30);
  --sep:       rgba(60,60,67,.29);
  --fill:      rgba(120,120,128,.12);
  --fill-firm: rgba(120,120,128,.20);
  --thumb:     #FFFFFF;
  --thumb-sh:  0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04);

  /* Tint til tekst og tint til fyldte flader er ikke samme farve: på mørk skal
     linket være lyst nok til at læse, og knappen mættet nok til hvid tekst. */
  --tint:      #DC4630;
  --tint-fill: #DC4630;
  --tint-on:   #FFFFFF;

  --t-event:   #AF52DE;
  --t-gather:  #FF9500;
  --t-offer:   #34C759;
  --green:     #34C759;
  --orange:    #FF9500;
  --red:       #FF3B30;

  --r-card: 14px;
  --pad: 16px;
  --nav-h: 44px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:    #000000;
    --card:      #1C1C1E;
    --nav:       rgba(28,28,30,.72);
    --label:     #FFFFFF;
    --label-2:   rgba(235,235,245,.60);
    --label-3:   rgba(235,235,245,.30);
    --sep:       rgba(84,84,88,.65);
    --fill:      rgba(120,120,128,.24);
    --fill-firm: rgba(120,120,128,.36);
    --thumb:     #636366;
    --thumb-sh:  0 3px 8px rgba(0,0,0,.5);

    --tint:      #FF8A66;
    --tint-fill: #E0543A;
    --tint-on:   #FFFFFF;

    --t-event:   #BF5AF2;
    --t-gather:  #FF9F0A;
    --t-offer:   #30D158;
    --green:     #30D158;
    --orange:    #FF9F0A;
    --red:       #FF453A;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--label);
  font: 400 17px/22px var(--sans);
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
}

/* .app fylder hele vinduet, så navigationslinjens glas går fra kant til kant.
   Det er indholdet der er smalt — ikke rammen om det. */
.body { max-width: 34rem; margin: 0 auto; }

/* Plads til den svævende dok, plus hjemmeindikatoren på iPhone. Skærme uden
   dok (login, fejl) skal ikke have hullet. */
.body { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
.app:not(:has(.dock)) .body { padding-bottom: 2rem; }

/* ── Navigationslinje ──────────────────────────────────── */
/* Kun selve linjen klæber. Den store titel bor i .body og ruller væk, præcis
   som på iOS — og når den er ude af syne, toner titlen frem inde i linjen. */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: .5px solid transparent;
  transition: border-color .2s ease;
}
.nav.scrolled { border-bottom-color: var(--sep); }
.nav .bar {
  height: var(--nav-h); display: flex; align-items: center; gap: 8px;
  padding: 0 8px; max-width: 34rem; margin: 0 auto;
}
.nav .side { display: flex; align-items: center; min-width: 0; flex: 1 1 0; }
.nav .side.end { justify-content: flex-end; }
.nav .mid {
  font: 600 17px/22px var(--sans); letter-spacing: -.02em; white-space: nowrap;
  opacity: 0; transition: opacity .2s ease;
  overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
}
.nav.scrolled .mid { opacity: 1; }

.navbtn {
  display: inline-flex; align-items: center; gap: 2px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font: 400 17px var(--sans); letter-spacing: -.02em; color: var(--tint);
  padding: 6px 8px; white-space: nowrap;
}
.navbtn.icon { padding: 6px; border-radius: 100px; }
.navbtn:disabled { opacity: .4; cursor: default; }

.large { padding: 4px var(--pad) 8px; }
.large h1 { margin: 0; font: 700 34px/41px var(--sans); letter-spacing: -.037em; }
.large .sub { font: 400 15px/20px var(--sans); color: var(--label-2); margin-top: 2px; }

/* ── Segmenteret vælger ────────────────────────────────── */
.seg {
  display: flex; margin: 8px var(--pad) 0; padding: 2px;
  border-radius: 9px; background: var(--fill);
}
.seg button {
  flex: 1; border: 0; background: none; cursor: pointer; font-family: inherit;
  font: 400 14px/1 var(--sans); letter-spacing: -.01em; color: var(--label);
  padding: 9px 4px; border-radius: 7px; white-space: nowrap;
}
.seg button .n { color: var(--label-2); font-variant-numeric: tabular-nums; margin-left: 3px; }
.seg button.on { background: var(--thumb); font-weight: 600; box-shadow: var(--thumb-sh); }
@media (prefers-color-scheme: dark) { .seg button.on { color: #fff; } }

/* ── Gruppe: overskrift, kort, fodnote ─────────────────── */
.group { margin: 22px var(--pad) 0; }
.group.tight { margin-top: 12px; }
.gh {
  font: 400 13px/18px var(--sans); letter-spacing: -.005em;
  color: var(--label-2); padding: 0 var(--pad) 7px;
}
.gf {
  font: 400 13px/18px var(--sans); letter-spacing: -.005em;
  color: var(--label-2); padding: 7px var(--pad) 0;
}
.card { background: var(--card); border-radius: var(--r-card); overflow: hidden; }
/* Skillelinjerne herunder er ::before på hvert barn — de skal have noget at
   hænge fast i, ellers falder de tilbage på nærmeste positionerede forfader. */
.card > * { position: relative; }

/* ── Rækker ────────────────────────────────────────────── */
.row, .item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 11px var(--pad); position: relative;
  text-align: left; font: 400 17px/22px var(--sans); letter-spacing: -.02em;
  color: var(--label);
}
.item { padding-top: 10px; padding-bottom: 10px; }
button.row, a.row, button.item {
  border: 0; background: none; font-family: inherit; cursor: pointer; text-decoration: none;
}
button.row:hover, button.item:hover, a.row:hover { background: var(--fill); }

/* Skillelinjen mellem to rækker tegnes af den nederste, så den sidste række
   i kortet aldrig får en. Har rækken en ikonflise foran, rykkes linjen ind
   til teksten — også dét er iOS' vane. */
.card > * + *::before {
  content: ""; position: absolute; left: var(--pad); right: 0; top: 0;
  height: .5px; background: var(--sep);
}
.card > * + .lead::before { left: 60px; }

.row .grow, .item .grow { flex: 1 1 auto; min-width: 0; }
/* Etiketten i en række må aldrig ombrydes til to linjer — så kolliderer den
   med værdien til højre. Den viger med ellipse i stedet. */
.row .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .val { color: var(--label-2); font-variant-numeric: tabular-nums; text-align: right; }
.row > svg.ic, .item > svg.ic { color: var(--label-2); flex: 0 0 auto; }
.row.tap, .row.tap > svg.ic { color: var(--tint); }
.row.warn { color: var(--orange); }
.row.destructive { color: var(--red); }
.chev { color: var(--label-3); flex: 0 0 auto; }

/* Farvet ikonflise, som i Indstillinger */
.tile {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; background: #8E8E93;
}
.tile.event { background: var(--t-event); }
.tile.gathering { background: var(--t-gather); }
.tile.offer { background: var(--t-offer); }
.tile.tint { background: var(--tint-fill); }
.tile.warn { background: var(--orange); }
.tile.danger { background: var(--red); }

/* ── Liste over egne opslag ────────────────────────────── */
.item .ttl {
  display: block; font: 600 17px/22px var(--sans); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item .sub {
  display: block; margin-top: 1px; color: var(--label-2);
  font: 400 15px/20px var(--sans); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item.past .ttl { color: var(--label-2); }
.item.past .tile { opacity: .5; }

.badge {
  flex: 0 0 auto; white-space: nowrap; border: 0; font-family: inherit;
  font: 600 13px/16px var(--sans); letter-spacing: -.01em;
  padding: 3px 8px; border-radius: 100px;
  color: var(--label-2); background: var(--fill);
}
.badge.draft { color: var(--orange); background: color-mix(in srgb, var(--orange) 16%, transparent); }
.badge.cancelled { color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); }
.badge.tint { color: var(--tint); background: color-mix(in srgb, var(--tint) 14%, transparent); }
button.badge { cursor: pointer; }

/* ── Felter ────────────────────────────────────────────── */
.field {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 11px var(--pad); position: relative;
}
.field > label {
  flex: 0 0 auto; width: 5.5rem;
  font: 400 17px/22px var(--sans); letter-spacing: -.02em; color: var(--label);
}
.field input, .field textarea {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; background: none; padding: 0; margin: 0; resize: none;
  font: 400 17px/22px var(--sans); letter-spacing: -.02em; color: var(--label);
  -webkit-appearance: none;
}
.field input:focus, .field textarea:focus { outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--label-3); }
/* Beskrivelsen fylder hele bredden — den har ikke en etiket ved siden af. */
.field.stack { display: block; }
.field.stack textarea { min-height: 3.6rem; }

/* Dato og klokkeslæt som iOS-piller */
.picker { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.picker input {
  border: 0; width: auto; background: var(--fill);
  border-radius: 8px; padding: 6px 10px;
  font: 400 17px var(--sans); letter-spacing: -.02em; color: var(--label);
  font-variant-numeric: tabular-nums; -webkit-appearance: none;
}
.picker input:focus { outline: 2px solid var(--tint); outline-offset: 1px; }
/* Browserens eget lille kalenderikon fylder 20 px inde i pillen, og på en
   telefon er der ikke 20 px at give væk. Hele pillen åbner vælgeren i
   stedet — se pickerFor() i editor.js. */
.picker input::-webkit-calendar-picker-indicator { display: none; }
.rm {
  width: 20px; height: 20px; flex: 0 0 auto; padding: 0;
  border: 0; background: none; color: var(--red); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Knapper ───────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap;
  background: var(--tint-fill); color: var(--tint-on); border-radius: 100px;
  padding: 14px; font: 600 17px/22px var(--sans); letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn.tinted { background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint); box-shadow: none; }
.btn.gray { background: var(--fill); color: var(--label); box-shadow: none; }
.btn.plain { background: none; color: var(--tint); box-shadow: none; font-weight: 400; padding: 11px; }
.btn.dark { background: var(--label); color: var(--canvas); box-shadow: none; }
.btn.danger { background: none; color: var(--red); box-shadow: none; }
.btn.small { width: auto; padding: 9px 18px; font-size: 15px; }

/* Bundlinje i glas med den primære handling */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background: var(--nav);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: .5px solid var(--sep);
}
.dock .inner { display: grid; gap: 4px; max-width: 34rem; margin: 0 auto; }

/* ── Kort ──────────────────────────────────────────────── */
/* Leaflets egne knapper ligger på z-index 800. Uden en egen stakkontekst her
   ville de smutte op over den svævende dok. */
.mapwrap { position: relative; z-index: 0; isolation: isolate; }
.map { height: 210px; width: 100%; background: var(--fill); }
.map:focus { outline: 2px solid var(--tint); outline-offset: -2px; }
.mapwrap .locate {
  position: absolute; right: 10px; bottom: 10px; z-index: 500;
  width: 38px; height: 38px; border-radius: 100px;
  display: grid; place-items: center; cursor: pointer; color: var(--tint);
  border: .5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  .mapwrap .locate { background: rgba(40,40,42,.72); border-color: rgba(255,255,255,.16); }
}
.mapwrap .locate:disabled { opacity: .5; cursor: default; }

/* Søgefelt i iOS-stil */
/* Nålen ligger uden for dækningen. Sidder umiddelbart under kortet, så
   advarslen står ved siden af det, den handler om — ikke i en toast, der er
   væk igen om tre sekunder. */
.outside {
  margin: 0; padding: 12px var(--pad) 14px;
  border-top: 1px solid var(--sep);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  display: grid; gap: 10px;
}
.outside .top {
  display: flex; gap: 10px; align-items: flex-start;
  font: 400 15px/20px var(--sans); letter-spacing: -.01em; color: var(--label);
}
.outside .top > svg.ic { flex: 0 0 auto; margin-top: 1px; color: var(--orange); }
.outside .top.ok > svg.ic { color: var(--green); }
.outside .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.outside .ghost {
  font: 500 14px var(--sans); letter-spacing: -.01em;
  padding: 8px 13px; border-radius: 100px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--label) 18%, transparent);
  background: var(--card); color: var(--tint);
}
.outside .ghost:hover { border-color: var(--tint); }
.outside .ghost:disabled { opacity: .5; cursor: default; }

.search { padding: 8px var(--pad); position: relative; }
.search .box {
  display: flex; align-items: center; gap: 6px;
  background: var(--fill); border-radius: 10px; padding: 7px 8px; color: var(--label-2);
}
.search input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0;
  font: 400 17px var(--sans); letter-spacing: -.02em; color: var(--label);
  -webkit-appearance: none;
}
.search input:focus { outline: none; }
.search input::placeholder { color: var(--label-2); }

.geo-results { list-style: none; margin: 0; padding: 0; }
.geo-results li {
  padding: 11px var(--pad); font: 400 17px/22px var(--sans); letter-spacing: -.02em;
  cursor: pointer; color: var(--label); position: relative;
}
.geo-results li + li::before {
  content: ""; position: absolute; left: var(--pad); right: 0; top: 0;
  height: .5px; background: var(--sep);
}
.geo-results li:hover { background: var(--fill); }

/* ── Billeder ──────────────────────────────────────────── */
.thumbs { display: flex; gap: 10px; padding: 12px var(--pad); overflow-x: auto; }
.thumb {
  width: 78px; height: 78px; border-radius: 12px; flex: 0 0 auto;
  position: relative; overflow: hidden; background: var(--fill);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .x {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border: 0; border-radius: 100px; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.thumb.add { border: 0; cursor: pointer; display: grid; place-items: center; color: var(--tint); }

/* ── Tom tilstand ──────────────────────────────────────── */
.empty {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 64px 32px;
}
.empty .big { color: var(--label-3); margin-bottom: 6px; }
.empty h3 { margin: 0; font: 600 20px/25px var(--sans); letter-spacing: -.025em; }
.empty p {
  margin: 0; max-width: 30ch; color: var(--label-2);
  font: 400 15px/20px var(--sans); letter-spacing: -.01em;
}

/* ── Login ─────────────────────────────────────────────── */
.login {
  display: grid; gap: 8px; justify-items: center; text-align: center;
  padding: 56px var(--pad) 0; max-width: 22rem; margin: 0 auto;
}
.login .mark {
  width: 84px; height: 84px; border-radius: 22px; margin-bottom: 14px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 78%, #fff), var(--tint));
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--tint) 60%, transparent);
}
.login h1 { margin: 0; font: 700 28px/34px var(--sans); letter-spacing: -.032em; }
.login p {
  margin: 0; max-width: 32ch; color: var(--label-2);
  font: 400 15px/20px var(--sans); letter-spacing: -.01em;
}
.login .btns { display: grid; gap: 10px; width: 100%; margin-top: 30px; }
.login .emailform { display: grid; gap: 10px; width: 100%; }
.login .rule {
  display: flex; align-items: center; gap: 10px;
  color: var(--label-2); font: 400 13px var(--sans);
}
.login .rule::before, .login .rule::after { content: ""; flex: 1; height: .5px; background: var(--sep); }
.login .emailbox {
  background: var(--card); border-radius: 12px; padding: 12px 14px; text-align: left;
}
.login .emailbox input {
  width: 100%; border: 0; background: none;
  font: 400 17px var(--sans); letter-spacing: -.02em; color: var(--label);
  -webkit-appearance: none;
}
.login .emailbox input:focus { outline: none; }
.login .emailbox input::placeholder { color: var(--label-3); }
.login .fine {
  margin-top: 22px; max-width: 34ch; color: var(--label-2);
  font: 400 13px/18px var(--sans); letter-spacing: -.005em;
}

/* ── Beskeder ──────────────────────────────────────────── */
.note {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px var(--pad) 0;
  border-radius: 12px; padding: 12px 14px;
  font: 400 15px/20px var(--sans); letter-spacing: -.01em; color: var(--label);
  background: color-mix(in srgb, var(--orange) 15%, transparent);
}
.note.ok { background: color-mix(in srgb, var(--green) 14%, transparent); }
.note.err { background: color-mix(in srgb, var(--red) 13%, transparent); }
.note > svg.ic { flex: 0 0 auto; margin-top: 1px; color: var(--orange); }
.note.ok > svg.ic { color: var(--green); }
.note.err > svg.ic { color: var(--red); }

#toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(6.5rem + env(safe-area-inset-bottom));
  z-index: 60; display: grid; gap: 8px; width: min(24rem, calc(100vw - 2rem));
}
.toast {
  border-radius: 14px; padding: 12px 14px;
  font: 400 15px/20px var(--sans); letter-spacing: -.01em; color: var(--label);
  background: var(--nav); border: .5px solid var(--sep);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 8px 28px -8px rgba(0,0,0,.4);
  animation: rise .22s ease-out;
}
.toast.err { color: var(--red); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ── Dialog ────────────────────────────────────────────── */
dialog {
  border: 0; border-radius: 14px; padding: 20px 16px 0;
  max-width: 17rem; width: calc(100% - 3rem); text-align: center;
  color: var(--label); background: var(--nav);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 24px 60px -14px rgba(0,0,0,.5);
}
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog h4 { margin: 0 0 4px; font: 600 17px/22px var(--sans); letter-spacing: -.02em; }
dialog p { margin: 0 0 18px; font: 400 13px/18px var(--sans); color: var(--label-2); letter-spacing: -.005em; }
dialog .acts { display: flex; border-top: .5px solid var(--sep); margin: 0 -16px; }
dialog .acts button {
  flex: 1; padding: 12px; border: 0; background: none; cursor: pointer;
  font: 400 17px var(--sans); letter-spacing: -.02em; color: var(--tint); font-family: inherit;
}
dialog .acts button + button { border-left: .5px solid var(--sep); }
dialog .acts button.danger { color: var(--red); font-weight: 600; }

/* ── Spinner og helskærmsbeskeder ──────────────────────── */
.spinner {
  width: 20px; height: 20px; border-radius: 50%; margin: 3rem auto;
  border: 2px solid var(--fill-firm); border-top-color: var(--tint);
  animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

.center {
  display: grid; gap: 8px; justify-items: center; text-align: center; padding: 5rem 2rem;
}
.center .big { color: var(--label-3); margin-bottom: 6px; }
.center h2 { margin: 0; font: 600 20px/25px var(--sans); letter-spacing: -.025em; }
.center p {
  margin: 0; max-width: 30ch; color: var(--label-2);
  font: 400 15px/20px var(--sans); letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  .spinner, .toast { animation: none; }
  .nav, .nav .mid { transition: none; }
}

:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

/* ── Bred skærm: to spalter, ingen svævende dok ────────── */
@media (min-width: 56rem) {
  /* Kun editoren bliver bred — den har to spalter at fylde. En liste af
     opslag læses stadig bedst i én smal søjle. */
  .body { padding-bottom: 2rem; }
  .app.two-col .body,
  .app.two-col .nav .bar,
  .app.two-col .dock .inner { max-width: 62rem; }
  .app.two-col .nav .bar { padding-left: 24px; padding-right: 24px; }

  .app.two-col .large,
  .app.two-col .seg,
  .app.two-col .note { margin-left: 24px; margin-right: 24px; padding-left: 0; padding-right: 0; }
  .app.two-col .seg { max-width: 26rem; }
  .app.two-col .cols {
    display: grid; grid-template-columns: minmax(0,1fr) 22rem;
    gap: 0 28px; align-items: start; padding: 0 24px;
  }
  .app.two-col .group { margin-left: 0; margin-right: 0; }

  .dock {
    position: static; background: none; border-top: 0; padding: 20px 24px 24px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .dock .inner { grid-auto-flow: column; justify-content: start; gap: 10px; }
  .dock .inner .btn { width: auto; padding-left: 30px; padding-right: 30px; }
  .dock .inner .btn.plain { padding-left: 16px; padding-right: 16px; }
  #toasts { bottom: 1.5rem; }
  .map { height: 240px; }
}

/* ── Moderation ────────────────────────────────────────── */
/* Tilstanden bor her, hvor forfatteren i forvejen kigger — der er hverken
   push eller "mine opslag" i appen. Derfor skal teksten bære det hele. */
.badge.pending  { color: color-mix(in srgb, var(--orange) 78%, var(--label)); background: color-mix(in srgb, var(--orange) 18%, transparent); }
.badge.rejected { color: color-mix(in srgb, var(--red) 82%, var(--label)); background: color-mix(in srgb, var(--red) 16%, transparent); }

/* Banneret over listen: findes kun når der er noget at sige. */
.banner {
  margin: 12px var(--pad) 0; padding: 11px 13px; border-radius: 12px;
  background: color-mix(in srgb, var(--orange) 13%, transparent);
  font: 400 15px/20px var(--sans); letter-spacing: -.01em;
  display: flex; gap: 10px; align-items: flex-start;
}
.banner.bad { background: color-mix(in srgb, var(--red) 11%, transparent); }
.banner .ic { flex: 0 0 auto; display: flex; color: var(--orange); margin-top: 1px; }
.banner.bad .ic { color: var(--red); }

/* Afgørelsen på et afvist opslag — øverst, over opslaget. */
.verdict { padding: 14px var(--pad); }
.verdict .h {
  display: flex; align-items: center; gap: 7px;
  font: 600 15px/20px var(--sans); letter-spacing: -.01em; color: var(--red);
}
.verdict .why { font: 400 15px/20px var(--sans); color: var(--label); margin-top: 6px; }
.verdict .when { font: 400 13px/18px var(--sans); color: var(--label-2); margin-top: 6px; }

/* Fuldskærmsbeskeder (kvittering, spærret konto) har brug for et afsnit mere
   og et citat af begrundelsen. */
.center .p2 { margin-top: 12px; }
.center .quote {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--fill); color: var(--label);
}