/* Delad stil för /admin och /skapa. Enkel och tydlig, mobil först. */

:root {
  --p-bg: #f6f5f3;
  --p-surface: #ffffff;
  --p-ink: #1f1d1c;
  --p-muted: #6b6662;
  --p-line: #e4e0dc;
  --p-accent: #5b4a8a;
  --p-accent-soft: #eeeaf6;
  --p-danger: #a3322b;
  --p-ok: #2f6b45;
  --p-radius: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--p-accent);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
}

h1 {
  font-size: 22px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 15px;
}

p {
  margin: 0;
}

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

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 64px;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 20px;
}

.bar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--p-muted);
}

.card {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 18px;
}

.stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

h1 {
  overflow-wrap: anywhere;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.muted {
  color: var(--p-muted);
}

.small {
  font-size: 13px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: var(--p-surface);
  color: var(--p-ink);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms ease-out, background-color 150ms ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn-primary {
  background: var(--p-accent);
  border-color: var(--p-accent);
  color: #fff;
}

.btn-danger {
  color: var(--p-danger);
}

.btn-small {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) {
    background: var(--p-accent-soft);
  }

  .btn-primary:hover:not(:disabled) {
    background: #4d3e78;
  }
}

label.f {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-muted);
}

label.f.inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: #fff;
  color: var(--p-ink);
  font: 16px/1.4 ui-sans-serif, system-ui, sans-serif;
}

input[type='checkbox'] {
  width: 20px;
  min-height: 20px;
  height: 20px;
}

input[type='color'] {
  padding: 2px;
  height: 42px;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

textarea.code {
  font: 13px/1.45 ui-monospace, 'SF Mono', Menlo, monospace;
  min-height: 160px;
}

.grid-2 {
  display: grid;
  gap: 12px;
}

@media (min-width: 700px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.grid-3 {
  display: grid;
  gap: 12px;
}

.notice {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--p-accent-soft);
  font-size: 14px;
}

.notice.error {
  background: #fbeceb;
  color: var(--p-danger);
}

.notice.ok {
  background: #e8f3ec;
  color: var(--p-ok);
}

.login {
  max-width: 380px;
  margin: 10vh auto 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--p-bg);
  border: 1px solid var(--p-line);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge.ja {
  background: #e8f3ec;
  border-color: #cfe5d7;
  color: var(--p-ok);
}

.badge.nej {
  background: #fbeceb;
  border-color: #f1d3d0;
  color: var(--p-danger);
}

.badge.distans {
  background: var(--p-accent-soft);
  border-color: #dcd5ee;
  color: var(--p-accent);
}

/* ---------- Admin ---------- */

.event-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 16px 18px;
  color: inherit;
  text-decoration: none;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 700px) {
  .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpi {
  padding: 14px 16px;
}

.kpi-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-label {
  font-size: 13px;
  color: var(--p-muted);
}

.plain-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.answers {
  display: grid;
  gap: 10px;
}

.answer {
  display: grid;
  gap: 6px;
}

.answer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.answer-name {
  font-weight: 700;
}

.answer dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 0;
  font-size: 14px;
}

.answer dt {
  color: var(--p-muted);
}

.answer dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.table-wrap {
  overflow-x: auto;
}

table.answers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.answers-table th,
.answers-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--p-line);
  text-align: left;
  vertical-align: top;
}

.answers-table th {
  font-size: 12px;
  color: var(--p-muted);
  white-space: nowrap;
}

.view-cards {
  display: block;
}

.view-table {
  display: none;
}

@media (min-width: 900px) {
  .view-cards {
    display: none;
  }

  .view-table {
    display: block;
  }
}

/* ---------- Skapa ---------- */

.section-row {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: #fbfaf9;
}

.section-row.is-disabled {
  opacity: 0.6;
}

.section-row .grid-3 {
  align-items: end;
}

.json-error {
  font-size: 13px;
  color: var(--p-danger);
}

.wish-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
}

@media (min-width: 800px) {
  .wish-row {
    grid-template-columns: 1.2fr 1.4fr 1.2fr auto;
    align-items: end;
  }
}

.sticky-save {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  margin: 0 -16px;
  background: rgb(246 245 243 / 0.95);
  border-top: 1px solid var(--p-line);
}

.badge.changed {
  background: #fff4e0;
  border-color: #f1ddb3;
  color: #7a5310;
}

/* ---------- Avtalsutkast ---------- */

.agreement {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  line-height: 1.6;
}

.agreement h1 {
  margin-top: 18px;
  font-size: 24px;
}

.agreement-section {
  margin-top: 20px;
  break-inside: avoid;
}

.agreement-section h2 {
  font-size: 16px;
  margin-bottom: 6px;
}

.agreement-section p + p {
  margin-top: 6px;
}

.draft-banner {
  padding: 12px 14px;
  border: 2px solid var(--p-danger);
  border-radius: 8px;
  background: #fbeceb;
  color: var(--p-danger);
  font-weight: 700;
}

.draft-banner-end {
  margin-top: 28px;
}

@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .wrap {
    padding: 0;
  }

  .agreement {
    max-width: none;
    padding: 0;
    border: 0;
  }

  .draft-banner {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Värdkonton i /skapa ---------- */

.host-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.host-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.temp-password {
  margin: 0;
  padding: 10px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  letter-spacing: 0.08em;
  background: var(--p-accent-soft);
  border-radius: 10px;
  user-select: all;
  overflow-wrap: anywhere;
}

/* ---------- Formulär per sektion ---------- */
/* Fälthjälparna i skapa-forms.js och dra och släpp i sortable.js. Alla träffytor är minst 44px. */

.sf-editor,
.sf-stack,
.sf-group-body,
.sf-more-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.sf-stack {
  gap: 10px;
}

.sf-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sf-label,
.sf-legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--p-ink);
}

.sf-hint,
.sf-note,
.sf-empty {
  font-size: 13px;
  line-height: 1.45;
  color: var(--p-muted);
}

.sf-note {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--p-accent-soft);
  color: var(--p-ink);
}

.sf-error {
  font-size: 13px;
  line-height: 1.45;
  color: var(--p-danger);
}

.sf-field input:not([type='checkbox']):not([type='radio']),
.sf-field select {
  min-height: 44px;
}

.sf-field textarea {
  min-height: 72px;
}

.sf-field textarea.sf-grow {
  resize: none;
  overflow-y: auto;
}

/* Rutan har mätts och är lika hög som texten. Innan dess går texten att rulla. */
.sf-field textarea.sf-grow.is-grown {
  overflow: hidden;
}

.sf-field textarea.code {
  min-height: 200px;
}

.sf-field input:focus,
.sf-field select:focus,
.sf-field textarea:focus {
  border-color: var(--p-accent);
}

.sf-field [aria-invalid='true'] {
  border-color: var(--p-danger);
}

.sf-fieldset {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sf-fieldset > .sf-legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 8px;
}

/* Legend flyter, så att marginalen under den fungerar lika i alla webbläsare. */
.sf-fieldset > :not(legend) {
  clear: both;
}

.sf-fieldset > .sf-hint,
.sf-fieldset > .sf-error {
  margin-top: 6px;
}

.sf-group > .sf-legend + .sf-hint {
  margin: -6px 0 12px;
}

.sf-group {
  padding: 14px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
}

.sf-group > .sf-legend {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--p-muted);
}

/* Av/på */
.sf-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--p-ink);
  cursor: pointer;
}

input.sf-switch {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 46px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #a8a19a;
  background-image: radial-gradient(circle, #fff 0, #fff 10px, transparent 11px);
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: 1px 50%;
  cursor: pointer;
  transition: background-color 160ms ease, background-position 160ms ease;
}

input.sf-switch:checked {
  background-color: var(--p-accent);
  background-position: 19px 50%;
}

/* Radioknappar och kryssrutor som knappar */
.sf-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}

.sf-option.is-checked {
  border-color: var(--p-accent);
  background: var(--p-accent-soft);
}

.sf-option input {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--p-accent);
}

/* Sifferväljare */
.sf-stepper {
  display: inline-flex;
  align-items: stretch;
  justify-self: start;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.sf-stepper-btn {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--p-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.sf-stepper-btn:disabled {
  color: var(--p-line);
  cursor: default;
}

.sf-field .sf-stepper input.sf-stepper-input {
  width: 64px;
  border: 0;
  border-left: 1px solid var(--p-line);
  border-right: 1px solid var(--p-line);
  border-radius: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Datum och tid */
.sf-datetime {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 10px;
}

.sf-datetime input {
  display: block;
  -webkit-appearance: none;
  appearance: none;
}

/* Knappar */
.btn.sf-btn {
  min-height: 44px;
}

.sf-add {
  justify-self: start;
  margin-top: 10px;
}

.sf-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--p-muted);
  cursor: pointer;
  touch-action: manipulation;
}

/* Listor */
.sf-list > .sf-hint {
  margin-bottom: 8px;
}

.sf-list-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.sf-empty {
  margin-top: 4px;
}

.sf-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 4px;
  align-items: start;
  padding: 8px 4px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: #fff;
}

.sf-row-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-width: 0;
  padding: 4px 0;
}

.sf-row-fields > * {
  flex: 1 1 13rem;
}

.sf-row-fields > .sf-narrow {
  flex: 0 1 6.5rem;
}

.sf-row-fields > .sf-narrow-select {
  flex: 0 1 11rem;
}

.sf-row-fields > .sf-full,
.sf-row-fields > .sf-row-note {
  flex-basis: 100%;
}

.sf-row-note {
  justify-self: start;
  font-size: 13px;
  font-weight: 600;
  color: #7a5310;
}

/* Dra och släpp */
.sort-handle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--p-muted);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.is-sorting,
.is-sorting * {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.is-dragging {
  box-shadow: 0 12px 28px rgb(31 29 28 / 0.18);
}

.is-lifted {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}

.sort-marker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: 2px dashed var(--p-accent);
  border-radius: 10px;
  background: var(--p-accent-soft);
  pointer-events: none;
}

.sort-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hopfällda delar */
.sf-more,
.sf-advanced {
  border-top: 1px solid var(--p-line);
}

.sf-more > summary,
.sf-advanced > summary {
  padding: 12px 0;
  font-weight: 600;
  cursor: pointer;
}

.sf-more > .sf-more-body,
.sf-advanced > .sf-more-body {
  padding: 4px 0 8px;
}

/* Sektionskort */
.sf-card {
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  background: var(--p-surface);
}

.sf-card-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 4px;
}

.sf-card-open {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sf-card-name {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.sf-card-type {
  font-weight: 600;
}

.sf-card-sub {
  overflow: hidden;
  font-size: 13px;
  color: var(--p-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-chevron {
  flex: none;
  color: var(--p-muted);
  transition: transform 160ms ease;
}

.sf-card.is-open .sf-chevron {
  transform: rotate(180deg);
}

.sf-card.is-off .sf-card-name {
  opacity: 0.55;
}

.sf-card-switch {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-left: 6px;
  font-size: 13px;
  color: var(--p-muted);
  cursor: pointer;
}

.sf-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--p-line);
}

.sf-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--p-line);
}

.sf-card-move {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .sort-handle:hover,
  .sf-icon-btn:hover,
  .sf-card-open:hover,
  .sf-stepper-btn:hover:not(:disabled) {
    background: var(--p-accent-soft);
    color: var(--p-ink);
  }

  .sf-row-remove:hover {
    color: var(--p-danger);
  }
}

@media (max-width: 480px) {
  .sf-card-body {
    padding: 14px 12px;
  }

  .sf-group {
    padding: 12px;
  }

  .sf-card-switch-text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  input.sf-switch,
  .sf-chevron {
    transition: none;
  }
}

/* ---------- Editorn ---------- */
/* Layouten i skapa-editor.js: en fast rad överst, formuläret till vänster och förhandsvisningen som
   står kvar till höger från 1000 px. Smalare skärm: en kolumn och en knapp som växlar mellan dem.
   --ed-top-h sätts från skriptet med den del av raden som står kvar, --ed-top-hide med den del som
   rullar bort på smal skärm. */

.wrap.ed-app {
  max-width: none;
  padding: 0;
}

.ed {
  --ed-top-h: 132px;
}

.ed-message {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 64px;
}

/* Fast rad */
.ed-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  padding: 10px 16px;
  /* Helt ogenomskinlig, så att text som rullar under raden inte syns igenom. */
  background: var(--p-bg);
  border-bottom: 1px solid var(--p-line);
}

.ed-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ed-top-nav {
  justify-content: space-between;
}

.ed-title {
  flex: 1 1 10rem;
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ed-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 13px;
  color: var(--p-muted);
}

.ed-save::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.ed-save.is-saved {
  color: var(--p-ok);
}

.ed-save.is-waiting {
  color: #7a5310;
}

.ed-save.is-error,
.ed-save.is-conflict {
  color: var(--p-danger);
  font-weight: 600;
}

.ed-publish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ed-top-state {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

/* Stegväljaren */
.ed-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ed-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.ed-step-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--p-line);
  color: var(--p-ink);
  font-size: 13px;
}

.ed-step[aria-current='step'] {
  border-color: var(--p-accent);
  background: var(--p-surface);
  color: var(--p-ink);
}

.ed-step[aria-current='step'] .ed-step-num {
  background: var(--p-accent);
  color: #fff;
}

/* Växlare: formulär eller förhandsvisning, mobil eller dator */
.ed-view-toggle,
.ed-sizes {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: var(--p-surface);
}

.ed-toggle-btn {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.ed-toggle-btn[aria-pressed='true'] {
  background: var(--p-accent-soft);
  color: var(--p-ink);
}

/* Notiser i den fasta raden */
.ed-notices {
  display: grid;
  gap: 8px;
}

.ed-banner {
  display: grid;
  gap: 8px;
}

.ed-tabnote,
.ed-flash {
  padding: 8px 12px;
  font-size: 13px;
}

/* Beskedet ligger ovanpå innehållet under raden, så att inget flyttar sig medan man trycker. */
.ed-flash {
  position: absolute;
  top: 100%;
  left: 16px;
  z-index: 1;
  max-width: min(560px, calc(100% - 32px));
  margin: 6px 0 0;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.14);
  cursor: pointer;
}

/* Kolumnerna */
.ed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ed-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 16px 16px 64px;
}

.ed-intro h2 {
  font-size: 18px;
}

.ed-group > h2,
.ed-group > h3 {
  font-size: 16px;
}

.ed-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.ed-card-note {
  margin: 0 12px 10px 52px;
  font-size: 13px;
  font-weight: 600;
  color: #7a5310;
}

.ed-warning {
  font-size: 13px;
  font-weight: 600;
  color: #7a5310;
}

.ed-add-row,
.ed-slug-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.ed-add-row > .sf-field,
.ed-slug-row > .sf-field {
  flex: 1 1 14rem;
}

/* Knappen står i höjd med fältet. Hjälptexten ligger under raden (skapa-editor.js flyttar den dit), så
   att knappen inte behöver en fast marginal och står tätt under fältet när raden bryts på smal skärm. */
.ed-slug-row > .btn {
  min-height: 44px;
}

.ed-slug > .sf-hint,
.ed-slug > .sf-error {
  margin-top: -10px;
}

.ed-more > summary {
  display: list-item;
  min-height: 24px;
  font-weight: 600;
  cursor: pointer;
}

.ed-more[open] > summary {
  margin-bottom: 14px;
}

.ed-more-part h3 {
  font-size: 15px;
}

.ed-foot {
  padding-top: 14px;
  border-top: 1px solid var(--p-line);
}

/* Steg 3 */
.ed-colors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 560px) {
  .ed-colors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ed-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-field input.ed-color-input {
  flex: none;
  width: 64px;
  height: 44px;
  min-height: 44px;
  padding: 2px;
  cursor: pointer;
}

.ed-color-code {
  font: 13px/1.4 ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--p-muted);
  text-transform: uppercase;
}

.ed-font {
  display: grid;
  gap: 8px;
}

.ed-font-sample {
  padding: 12px 14px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: #fff;
  font-size: 20px;
  line-height: 1.35;
}

/* Rubrikprovet får vikt, spärrning och radavstånd som på gästsidan (skapa-editor.js). */
.ed-font-sample.is-heading {
  font-size: 28px;
  overflow-wrap: break-word;
}

/* Valbara kort: riktiga radioknappar i en fieldset (choiceCards i skapa-editor.js). Legend läses av
   skärmläsare men syns inte, eftersom gruppens rubrik står ovanför. */
.ed-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ed-choice-set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ed-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.ed-palettes .ed-choices {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* Typsnittsparen under gruppnamnen. Alla kort är en radiogrupp, grupperna är bara rubriker. */
.ed-choice-groups {
  display: grid;
  gap: 18px;
}

.ed-choice-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ed-choice-group-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p-muted);
}

.ed-fontpairs .ed-choices,
.ed-openings .ed-choices {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

.ed-choice {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.ed-choice:focus-within {
  border-color: var(--p-accent);
}

.ed-choice.is-checked {
  border-color: var(--p-accent);
  background: var(--p-accent-soft);
  box-shadow: inset 0 0 0 1px var(--p-accent);
}

.ed-choice-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ed-choice input.ed-choice-input {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--p-accent);
}

.ed-choice-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ed-choice-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.ed-choice-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--p-muted);
}

/* Schematisk bild av hero-layouten: textrader, knapp och bild. */
.ed-hero-pic {
  position: relative;
  display: flex;
  gap: 6px;
  height: 72px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--p-line);
  border-radius: 6px;
  background: #faf8f6;
}

.ed-hp-copy {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.ed-hp-line {
  display: block;
  width: 72%;
  height: 3px;
  border-radius: 2px;
  background: #b8b0a9;
}

.ed-hp-line.is-short {
  width: 40%;
}

.ed-hp-line.is-title {
  width: 92%;
  height: 6px;
  background: var(--p-ink);
}

.ed-hp-btn {
  display: block;
  width: 36%;
  height: 7px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--p-accent);
}

.ed-hp-img {
  display: block;
  flex: 1 1 0;
  border-radius: 4px;
  background: linear-gradient(135deg, #d9d1e8, #9d8fc4);
}

/* Centrerad: texten i mitten, bilden under i begränsad bredd. */
.ed-hero-pic.is-centrerad {
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ed-hero-pic.is-centrerad .ed-hp-copy {
  flex: none;
  align-items: center;
  width: 100%;
  gap: 3px;
}

.ed-hero-pic.is-centrerad .ed-hp-img {
  width: 56%;
}

/* Delad: bilden fyller vänstra halvan i full höjd. */
.ed-hero-pic.is-delad {
  flex-direction: row-reverse;
  gap: 8px;
  padding: 0 8px 0 0;
}

.ed-hero-pic.is-delad .ed-hp-img {
  border-radius: 0;
}

/* Helskärm: bilden fyller ytan och texten ligger över. */
.ed-hero-pic.is-helskarm .ed-hp-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  background: linear-gradient(160deg, #9d8fc4, #3e3560);
}

.ed-hero-pic.is-helskarm .ed-hp-copy {
  z-index: 1;
  justify-content: flex-end;
}

.ed-hero-pic.is-helskarm .ed-hp-line {
  background: rgba(255, 255, 255, 0.7);
}

.ed-hero-pic.is-helskarm .ed-hp-line.is-title,
.ed-hero-pic.is-helskarm .ed-hp-btn {
  background: #fff;
}

/* Minimal: bara stor text. */
.ed-hero-pic.is-minimal .ed-hp-copy {
  gap: 5px;
}

.ed-hero-pic.is-minimal .ed-hp-line.is-title {
  width: 96%;
  height: 9px;
}

.ed-hero-pic.is-minimal .ed-hp-line.is-title + .ed-hp-line.is-title {
  width: 64%;
}

.ed-hero-note.stack {
  gap: 10px;
}

/* Liten sida i palettens färger. Färgerna sätts som variabler från skriptet. */
.ed-swatch {
  display: grid;
  align-content: center;
  gap: 5px;
  height: 56px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: var(--sw-bg, #faf6f3);
  /* Den mjuka ytan (--sw-soft, samma som gästsidans OSA) som en smal rand till höger. */
  background-image: linear-gradient(to right, transparent 84%, var(--sw-soft, transparent) 84%);
}

.ed-sw-line {
  display: block;
  width: 58%;
  height: 3px;
  border-radius: 2px;
  background: var(--sw-ink, #3b3134);
  opacity: 0.55;
}

.ed-sw-line.is-title {
  width: 78%;
  height: 6px;
  opacity: 1;
}

.ed-sw-btn {
  display: block;
  width: 42%;
  height: 10px;
  margin-top: 2px;
  border-radius: 5px;
  background: var(--sw-primary, #8a5a6b);
}

/* Egna färger när de inte är valda: en neutral ruta i stället för färgerna, som då är en palett. */
.ed-swatch.is-empty {
  border: 1px dashed #b8b0a9;
  background: repeating-linear-gradient(135deg, #fff 0, #fff 6px, #f1eeea 6px, #f1eeea 12px);
}

.ed-swatch.is-empty > span {
  background: #b8b0a9;
  opacity: 1;
}

/* Prov på typsnittsparet: rubrik och ett stycke brödtext med riktig text. Rubrikens vikt, spärrning och
   radavstånd sätts av skapa-editor.js efter typsnittet, som på gästsidan. Brödtexten i 17 px och vikt 400,
   som på gästsidan, så att läsbarheten går att bedöma. Rubriken bryts utan ellips, provtexterna ryms på två rader. */
.ed-font-pic {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px 14px;
  overflow: hidden;
  border: 1px solid var(--p-line);
  border-radius: 6px;
  background: #faf8f6;
}

.ed-fp-head {
  display: block;
  font-size: 28px;
  color: #1f1b1c;
  overflow-wrap: break-word;
}

.ed-fp-body {
  display: block;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #3b3536;
}

/* Egna typsnitt när de inte är valda: en neutral ruta utan provtext, som Egna färger. Samma höjd som de andra. */
.ed-font-pic.is-empty {
  border: 1px dashed #b8b0a9;
  background: repeating-linear-gradient(135deg, #fff 0, #fff 6px, #f1eeea 6px, #f1eeea 12px);
}

.ed-font-pic.is-empty > span {
  visibility: hidden;
}

/* Avancerat: hopfälld grupp sist. */
.ed-group-more > summary {
  display: list-item;
  min-height: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.ed-group-more[open] > summary {
  margin-bottom: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .ed-choice:hover:not(.is-checked) {
    border-color: #cfc8c2;
  }
}

/* Förhandsvisningen */
.ed-preview {
  position: sticky;
  top: var(--ed-top-h);
  align-self: start;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--ed-top-h));
  min-height: 420px;
  background: #ebe9e5;
}

.ed-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--p-line);
}

.ed-preview-label {
  font-size: 14px;
  font-weight: 600;
}

.ed-stage {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.ed-frame-box {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--p-line);
}

.ed-preview-empty {
  margin: 12px 16px 0;
}

.ed-frame {
  display: block;
  border: 0;
  background: #fff;
  transform-origin: 0 0;
}

@media (max-width: 999px) {
  .ed-layout[data-view='form'] .ed-preview,
  .ed-layout[data-view='preview'] .ed-form {
    display: none;
  }

  /* Raden med Alla event, titel och publicering rullar bort. Steg, sparstatus och växlingen står kvar. */
  .ed-top {
    top: calc(var(--ed-top-hide, 0px) * -1);
  }

  .ed-top-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ed-steps {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
  }

  .ed-step {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }

  .ed-view-toggle {
    grid-column: 2;
    grid-row: 2;
  }

  .ed-top-state {
    grid-column: 1;
    grid-row: 2;
  }

  /* Lång status eller en knapp (Försök igen, Spara ändå): egen rad under växlingen, i stället för en
     smal spalt som gör raden mycket hög. Klassen sätts i skapa-editor.js. */
  .ed-top-nav.is-long .ed-top-state {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .ed-top-nav.is-long .ed-save {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ed-top-nav.is-long .ed-top-state > .btn {
    flex: none;
  }
}

/* Träffytor på pekskärm och smal skärm: minst 44 px, också för de små knapparna i /skapa
   (listan, editorn och kontoraden längst ned). */
@media (max-width: 999px), (pointer: coarse) {
  .skapa-app .btn,
  .ed-toggle-btn {
    min-height: 44px;
  }

  .ed-more > summary,
  .ed-group-more > summary {
    min-height: 44px;
    padding-block: 10px;
  }

  .skapa-app input:not([type='checkbox']):not([type='radio']):not([type='color']),
  .skapa-app select {
    min-height: 44px;
  }

  .ed-view-toggle,
  .ed-sizes {
    padding: 2px;
  }
}

@media (min-width: 1000px) {
  .ed-layout {
    grid-template-columns: clamp(520px, 44vw, 640px) minmax(0, 1fr);
  }

  .ed-form {
    border-right: 1px solid var(--p-line);
  }

  .ed-view-toggle {
    display: none;
  }
}

@media (max-width: 600px) {
  .ed-top {
    padding: 8px 12px;
  }

  .ed-form {
    padding: 12px 12px 48px;
  }

  .ed-title {
    font-size: 16px;
  }

  .ed-step {
    gap: 6px;
    padding: 0 8px 0 6px;
  }

  .ed-toggle-btn {
    padding: 0 10px;
  }

  /* Förklaringen tar för mycket plats på en smal skärm. */
  .ed-preview-label .small {
    display: none;
  }

  .ed-preview-bar {
    padding: 6px 12px;
  }

  .ed-flash {
    left: 12px;
    max-width: calc(100% - 24px);
  }

  .ed-preview-empty {
    margin: 8px 12px 0;
  }
}

@media (max-width: 359px) {
  /* Siffrorna får inte plats bredvid namnen på de minsta skärmarna. Knapparnas etiketter har dem kvar. */
  .ed-step-num {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .ed-step:hover,
  .ed-toggle-btn:hover {
    background: var(--p-accent-soft);
    color: var(--p-ink);
  }
}

/* ==== C3 bakgrund ==== */

/* Bakgrundsbild i steg 3: valet mellan palett och bild, lagret, styrkan och kontrollen. */

.ed-backdrops .ed-choices,
.ed-overlays .ed-choices {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

.ed-backdrop-settings {
  gap: 14px;
}

.ed-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ed-range-input {
  flex: 1 1 auto;
  min-width: 0;
  /* Minst 44 px att träffa med fingret. */
  height: 44px;
  accent-color: var(--p-accent);
}

.ed-range-value {
  flex: none;
  min-width: 4ch;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--p-muted);
}

/* Kontrollen under reglaget. Grön rad när texten går att läsa, varning när den inte gör det.
   Färgen bär aldrig ensam betydelsen: texten säger vad som gäller. */
.ed-backdrop-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: var(--p-surface);
}

.ed-backdrop-text {
  margin: 0;
  flex: 1 1 14em;
  min-width: 0;
}

.ed-backdrop-check.is-ok {
  border-color: var(--p-ok);
  color: var(--p-ok);
}

.ed-backdrop-check.is-warning {
  border-color: var(--p-danger);
  color: var(--p-danger);
}

.ed-backdrop-raise {
  flex: none;
}

/* ==== C2 bilder ==== */

/* Bildfältet i /skapa: knappen Välj bild, miniatyren, förloppet och beskeden. */
.bild-falt {
  display: grid;
  gap: 8px;
}

.bild-etikett {
  margin: 0;
}

/* Filrutan göms visuellt men går att nå med tangentbord: etiketten är knappen. */
.bild-fil {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bild-valj,
.bild-byt {
  justify-self: start;
}

.bild-fil:focus-visible + .bild-valj,
.bild-fil:focus-visible ~ .bild-knappar .bild-byt {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}

.bild-valj.is-disabled,
.bild-byt.is-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.bild-miniatyr-box {
  max-width: 100%;
}

.bild-miniatyr {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: var(--p-bg);
}

.bild-knappar {
  gap: 8px;
}

.bild-forlopp-rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bild-forlopp {
  flex: 1 1 140px;
  min-width: 0;
  height: 10px;
}

.bild-procent {
  font-size: 13px;
  color: var(--p-muted);
  font-variant-numeric: tabular-nums;
}

.bild-status[hidden],
.bild-fel[hidden],
.bild-genomskinlig[hidden] {
  display: none;
}

/* Bakgrundsbilden läggs på vitt, så en bild med genomskinliga partier kan bli nästan tom. Raden
   säger det direkt efter uppladdningen. Samma ton som varningen i kontrollen av kontrasten, och
   färgen bär aldrig ensam betydelsen: texten säger vad som gäller. */
.bild-genomskinlig {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--p-danger);
  border-radius: 10px;
  background: var(--p-surface);
  font-size: 14px;
  line-height: 1.45;
  color: var(--p-danger);
}

.bild-lagring .row {
  flex-wrap: wrap;
}

/* ==== C1 karta ==== */
/* Kartan i Grunder (js/karta.js). Plattorna kommer från OpenStreetMap och laddas bara här i /skapa. */

.ed-place {
  gap: 12px;
}

.ed-map {
  position: relative;
  width: 100%;
  height: clamp(220px, 45vh, 300px);
  overflow: hidden;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  background: #f2efe9;
  /* Fingret på kartan panorerar kartan. Höjden är därför begränsad, så att sidan går att scrolla
     ovanför och under den. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

@media (min-width: 600px) {
  .ed-map {
    height: min(340px, 45vh);
  }
}

/* Liggande telefon. Bredden ensam räcker inte som villkor: en telefon i liggande läge är bred men
   låg, och fick då datorhöjden 340 px i en vy på 390 px. Kartan fyllde hela ytan under den
   klistrade toppen, och eftersom kartan har touch-action: none fanns ingen yta kvar att scrolla
   sidan med. Vyhöjden avgör därför här. Mätt i 844x390: den klistrade raden står kvar med 131 px,
   kartan blir 125 px och 134 px av vyn är fri att svepa på (73 px ovanför kartan och 61 px under).
   Liggande läge ger alltså en liten karta: vänd telefonen för en större.
   min() och clamp() finns i iOS Safari 15, svh och dvh gör det inte. */
@media (max-height: 560px) {
  .ed-map {
    height: clamp(120px, 32vh, 200px);
  }
}

.ed-map-layer,
.ed-map-tiles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ed-map-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 256px;
  height: 256px;
  max-width: none;
  display: block;
  pointer-events: none;
}

.ed-map-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: -44px 0 0 -22px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--p-accent);
  cursor: grab;
}

.ed-map-pin-svg {
  display: block;
}

.ed-map-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid #1f1d1c;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff;
  pointer-events: none;
  display: none;
}

.ed-map.is-focused .ed-map-cross {
  display: block;
}

.ed-map-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ed-map-zoom-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--p-line);
  border-radius: 6px;
  background: var(--p-surface);
  color: var(--p-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ed-map-attr {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.85);
  color: #333333;
  font-size: 12px;
  border-top-left-radius: 6px;
}

.ed-map-attr a {
  color: #333333;
}

.ed-map-problem {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 28px;
  margin: 0;
  padding: 6px 8px;
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: 6px;
  font-size: 13px;
}

.ed-place-hits {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ed-place-hit {
  text-align: left;
  width: 100%;
}

.ed-place-status:not([hidden]) {
  font-size: 14px;
  color: var(--p-muted);
}

.ed-place-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px;
  background: var(--p-accent-soft);
  border-radius: 6px;
  font-size: 14px;
}

.ed-place-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Raden som skärmläsare får höra när nålen flyttas. Den syns inte. */
.ed-place-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}