/* =============================================================================
   koordinat-beta.css — Redesign v0.2
   Scoped to .beta-wrap to avoid conflict with global mackan.eu CSS.
   Targets all existing JS class names so app.js needs no changes.
   ============================================================================= */

/* 1. Design tokens — light mode */
.beta-wrap {
  --bk-bg: #f7f8fb;
  --bk-surface: #ffffff;
  --bk-surface-2: #f3f5f9;
  --bk-surface-3: #e8edf6;
  --bk-border: rgba(15, 23, 42, 0.08);
  --bk-border-strong: rgba(15, 23, 42, 0.16);
  --bk-text: #0f172a;
  --bk-text-2: #48607e;
  --bk-text-3: #94a3b8;

  --bk-accent: #2563eb;
  --bk-accent-dark: #1d4ed8;
  --bk-accent-ring: rgba(37, 99, 235, 0.14);
  --bk-accent-subtle: #eff6ff;
  --bk-accent-border: rgba(37, 99, 235, 0.22);

  --bk-success: #10b981;
  --bk-error: #ef4444;

  --bk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --bk-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
  --bk-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.04);

  --bk-r: 8px;
  --bk-r-lg: 12px;
  --bk-r-xl: 16px;

  --bk-input-h: 3rem;
  --bk-btn-h: 2.625rem;
  --bk-transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* Override globals within scope */
  --primary-color: var(--bk-accent);
  --border-color: var(--bk-border);
  --border-radius: var(--bk-r);
  --background-color: var(--bk-surface);
  --hover-color: var(--bk-surface-2);
  --text-color: var(--bk-text);
  --text-muted: var(--bk-text-3);
  --card-bg: var(--bk-surface);
  --signal: var(--bk-accent);
  --accent: var(--bk-accent);
}

/* Dark mode tokens */
[data-theme="dark"] .beta-wrap {
  --bk-bg: #080d18;
  --bk-surface: #0d1627;
  --bk-surface-2: #152035;
  --bk-surface-3: #1c2c46;
  --bk-border: rgba(255, 255, 255, 0.07);
  --bk-border-strong: rgba(255, 255, 255, 0.14);
  --bk-text: #eef2f8;
  --bk-text-2: #8fa0ba;
  --bk-text-3: #4a607a;

  --bk-accent: #5ba3f5;
  --bk-accent-dark: #3b82f6;
  --bk-accent-ring: rgba(91, 163, 245, 0.15);
  --bk-accent-subtle: rgba(37, 99, 235, 0.1);
  --bk-accent-border: rgba(91, 163, 245, 0.25);

  --bk-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.5);
  --bk-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.28);
  --bk-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);

  --primary-color: var(--bk-accent);
  --border-color: var(--bk-border);
  --background-color: var(--bk-surface);
  --hover-color: var(--bk-surface-2);
  --text-color: var(--bk-text);
  --card-bg: var(--bk-surface);
  --signal: var(--bk-accent);
  --accent: var(--bk-accent);
}

/* 2. Transparent wrapper — does not add layout */
.beta-wrap {
  display: contents;
}


/* 3. Hero section */
.beta-wrap .rubrik--sektion {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--bk-text);
}

.beta-wrap .text--lead {
  font-size: 1rem;
  color: var(--bk-text-2);
  max-width: 60ch;
  margin: 0.625rem auto 0;
  line-height: 1.7;
}

/* Beta badge */
.beta-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  background: var(--bk-accent-subtle);
  color: var(--bk-accent);
  border: 1px solid var(--bk-accent-border);
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  vertical-align: middle;
  margin-left: 0.5rem;
  position: relative;
  top: -2px;
}


/* 4. Tabs — segmented control */
.beta-wrap .koordinat-tabs {
  display: flex;
  gap: 4px;
  background: var(--bk-surface-2);
  border-radius: var(--bk-r-xl);
  padding: 5px;
  margin-bottom: 1.75rem;
  min-height: auto;
}

.beta-wrap .koordinat-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.875rem 0.75rem;
  border: 1px solid transparent;
  border-radius: calc(var(--bk-r-xl) - 4px);
  background: transparent;
  color: var(--bk-text-2);
  cursor: pointer;
  text-align: center;
  transition: all var(--bk-transition);
  min-height: auto;
  transform: none;
  box-shadow: none;
}

.beta-wrap .koordinat-tab:hover {
  background: var(--bk-surface);
  color: var(--bk-text);
  transform: none;
  box-shadow: var(--bk-shadow-xs);
  border-color: var(--bk-border);
}

.beta-wrap .koordinat-tab--aktiv {
  background: var(--bk-surface);
  color: var(--bk-accent);
  border-color: transparent;
  box-shadow: var(--bk-shadow-sm);
}

.beta-wrap .koordinat-tab--aktiv:hover {
  background: var(--bk-surface);
  color: var(--bk-accent);
  transform: none;
  box-shadow: var(--bk-shadow-sm);
}

.beta-wrap .koordinat-tab__ikon {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  opacity: 0.55;
  transition: opacity var(--bk-transition);
}

.beta-wrap .koordinat-tab__ikon svg {
  display: block;
  flex-shrink: 0;
}

.beta-wrap .koordinat-tab--aktiv .koordinat-tab__ikon {
  opacity: 1;
}

.beta-wrap .koordinat-tab:hover .koordinat-tab__ikon {
  opacity: 0.85;
}

.beta-wrap .koordinat-tab__titel {
  font-weight: 600;
  font-size: 0.875rem;
  display: block;
  letter-spacing: -0.01em;
}

.beta-wrap .koordinat-tab__desc {
  font-size: 0.7rem;
  opacity: 0.65;
  display: block;
  line-height: 1.3;
  color: var(--bk-text-2);
}

.beta-wrap .koordinat-tab--aktiv .koordinat-tab__desc {
  opacity: 0.8;
  color: var(--bk-text-2);
}


/* 5. Panels */
.beta-wrap .koordinat-panel { display: none; }
.beta-wrap .koordinat-panel--aktiv { display: block; }


/* 6. Intro bar */
.beta-wrap .koordinat-intro {
  background: var(--bk-surface-2);
  border-radius: var(--bk-r);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--bk-text-2);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  line-height: 1.5;
  min-height: auto;
}

.beta-wrap .koordinat-intro i {
  color: var(--bk-accent);
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-right: 0;
}


/* 7. Cards */
.beta-wrap .kort {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-r-lg);
  box-shadow: var(--bk-shadow);
  padding: 1.5rem;
  margin-top: 0;
  overflow-x: auto;
}

.beta-wrap .layout__sektion > .kort + .kort {
  margin-top: 1rem;
}

.beta-wrap .kort__rubrik {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bk-text);
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}


/* 8. Form elements */
.beta-wrap .form__grupp {
  margin-bottom: 1.125rem;
}

.beta-wrap .falt__etikett {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bk-text-2);
  margin-bottom: 0.375rem;
  letter-spacing: 0.005em;
}

.beta-wrap .falt__input {
  display: block;
  width: 100%;
  height: var(--bk-input-h);
  padding: 0 1rem;
  border: 1.5px solid var(--bk-border);
  border-radius: var(--bk-r);
  font-size: 0.9375rem;
  font-family: inherit;
  background: var(--bk-surface);
  color: var(--bk-text);
  transition: border-color var(--bk-transition), box-shadow var(--bk-transition);
  box-sizing: border-box;
}

.beta-wrap .falt__textarea {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.875rem 1rem;
  min-height: 8.5rem;
  border: 1.5px solid var(--bk-border);
  border-radius: var(--bk-r);
  font-size: 0.9375rem;
  font-family: inherit;
  background: var(--bk-surface);
  color: var(--bk-text);
  resize: vertical;
  line-height: 1.5;
  transition: border-color var(--bk-transition), box-shadow var(--bk-transition);
  box-sizing: border-box;
}

.beta-wrap .falt__input:focus,
.beta-wrap .falt__textarea:focus {
  outline: none;
  border-color: var(--bk-accent);
  box-shadow: 0 0 0 3px var(--bk-accent-ring);
}

.beta-wrap .falt__input::placeholder,
.beta-wrap .falt__textarea::placeholder {
  color: var(--bk-text-3);
}

.beta-wrap .falt__input[type="file"] {
  height: auto;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

/* Select */
.beta-wrap .falt__select,
.beta-wrap .kort details .falt__select,
.beta-wrap .kort select {
  display: block;
  width: 100%;
  height: var(--bk-input-h);
  padding: 0 2.5rem 0 1rem;
  border: 1.5px solid var(--bk-border);
  border-radius: var(--bk-r);
  font-size: 0.9375rem;
  font-family: inherit;
  background-color: var(--bk-surface);
  color: var(--bk-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M4 6l4 4 4-4' stroke='%2394a3b8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 16px;
  cursor: pointer;
  transition: border-color var(--bk-transition), box-shadow var(--bk-transition);
  box-sizing: border-box;
  line-height: normal;
  min-height: auto;
}

.beta-wrap .falt__select:hover,
.beta-wrap .kort select:hover {
  border-color: var(--bk-border-strong);
}

.beta-wrap .falt__select:focus,
.beta-wrap .kort select:focus {
  outline: none;
  border-color: var(--bk-accent);
  box-shadow: 0 0 0 3px var(--bk-accent-ring);
}

.beta-wrap .falt__select option,
.beta-wrap .kort select option {
  background-color: var(--bk-surface);
  color: var(--bk-text);
}

/* Checkbox */
.beta-wrap .falt__checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9rem;
  color: var(--bk-text);
  cursor: pointer;
}

.beta-wrap .falt__checkbox input[type="checkbox"] {
  width: 1.0625rem;
  height: 1.0625rem;
  accent-color: var(--bk-accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* Form actions row */
.beta-wrap .form__verktyg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.125rem;
}

.beta-wrap .form__rad {
  display: flex;
  gap: 0.625rem;
}

.beta-wrap .form__rad .falt__input {
  flex: 1;
}

/* Form hint */
.beta-wrap .form__hint {
  font-size: 0.8rem;
  color: var(--bk-text-3);
  margin-top: 0.3rem;
}

.beta-wrap #format-hint {
  font-size: 0.8rem;
  color: var(--bk-accent);
  margin-top: 0.375rem;
  font-family: "JetBrains Mono", "Fira Code", monospace;
}


/* 9. Buttons */
.beta-wrap .knapp,
.beta-wrap a.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  height: var(--bk-btn-h);
  padding: 0 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--bk-r);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--bk-transition);
  white-space: nowrap;
  background: var(--bk-accent);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: none;
}

.beta-wrap .knapp:hover,
.beta-wrap a.knapp:hover {
  background: var(--bk-accent-dark);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  filter: none;
}

.beta-wrap .knapp:active,
.beta-wrap a.knapp:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.beta-wrap .knapp:focus-visible,
.beta-wrap a.knapp:focus-visible {
  outline: 2px solid var(--bk-accent);
  outline-offset: 2px;
}

.beta-wrap .knapp:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.beta-wrap .knapp--sekundar {
  background: var(--bk-surface);
  color: var(--bk-text);
  border-color: var(--bk-border-strong);
  box-shadow: var(--bk-shadow-xs);
}

.beta-wrap .knapp--sekundar:hover {
  background: var(--bk-surface-2);
  border-color: var(--bk-border-strong);
  box-shadow: var(--bk-shadow-sm);
  transform: translateY(-1px);
}

.beta-wrap .knapp--sekundar:active {
  transform: translateY(0);
  box-shadow: var(--bk-shadow-xs);
}

.beta-wrap .knapp--liten {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  border-radius: 6px;
}

.beta-wrap .knapp.hidden {
  display: none;
}


/* 10. Quick input row */
.beta-wrap .quick-input-rad {
  display: flex;
  gap: 0.625rem;
  align-items: stretch;
}

.beta-wrap .quick-input-rad .falt__input {
  flex: 1;
  height: var(--bk-input-h);
}

.beta-wrap #btn-gps {
  height: var(--bk-input-h);
  flex-shrink: 0;
  min-width: auto;
}


/* 11. Example hints */
.beta-wrap .koordinat-exempel-hint {
  margin-top: 0.375rem;
  font-size: 0.8rem;
  color: var(--bk-text-3);
}

.beta-wrap .koordinat-exempel {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: inherit;
  color: var(--bk-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--bk-accent-border);
  transition: text-decoration-color var(--bk-transition);
}

.beta-wrap .koordinat-exempel:hover {
  opacity: 1;
  text-decoration-color: var(--bk-accent);
}

.beta-wrap .koordinat-address-link {
  font-size: 0.8rem;
  color: var(--bk-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  opacity: 0.75;
  transition: opacity var(--bk-transition);
}

.beta-wrap .koordinat-address-link:hover {
  opacity: 1;
}


/* 12. Results display */
.beta-wrap .result-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--bk-border);
}

.beta-wrap .result-row:last-of-type {
  border-bottom: none;
}

.beta-wrap .result-format {
  min-width: 150px;
  flex-shrink: 0;
}

.beta-wrap .result-value {
  flex: 1;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.875rem;
  color: var(--bk-text);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--bk-transition), color var(--bk-transition);
}

.beta-wrap .result-value:hover {
  background: var(--bk-surface-2);
}

.beta-wrap .result-value.copied {
  background: var(--bk-accent-subtle);
  color: var(--bk-accent);
}

.beta-wrap .result-copy.copied {
  background: var(--bk-accent-subtle);
  color: var(--bk-accent);
  border-color: var(--bk-accent-border);
}

/* Format badges */
.beta-wrap .format-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  letter-spacing: 0.02em;
}

.beta-wrap .format-badge--wgs84 {
  background: #eff6ff;
  color: #1d4ed8;
}

.beta-wrap .format-badge--sweref {
  background: #f0fdf4;
  color: #15803d;
}

.beta-wrap .format-badge--rt90 {
  background: #fff7ed;
  color: #c2410c;
}

[data-theme="dark"] .beta-wrap .format-badge--wgs84 {
  background: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
}

[data-theme="dark"] .beta-wrap .format-badge--sweref {
  background: rgba(21, 128, 61, 0.15);
  color: #86efac;
}

[data-theme="dark"] .beta-wrap .format-badge--rt90 {
  background: rgba(194, 65, 12, 0.15);
  color: #fdba74;
}

/* Export button row */
.beta-wrap .export-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bk-border);
}


/* 13. Map */
.beta-wrap #map-container {
  height: 560px;
  min-height: 560px;
  border-radius: var(--bk-r-lg);
  overflow: hidden;
  background: var(--bk-surface-2);
  cursor: crosshair;
  contain: layout style;
  box-shadow: var(--bk-shadow);
}

.beta-wrap .map-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 500;
  transition: opacity 0.3s;
}

.beta-wrap .map-hint span {
  font-size: 0.8125rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.5rem 1.125rem;
  border-radius: 100px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  letter-spacing: 0.01em;
}

.beta-wrap .map-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Leaflet controls minimal styling */
.beta-wrap .leaflet-control-zoom a {
  font-weight: 400;
}


/* 14. Tables */
.beta-wrap .tabell__wrapper {
  overflow-x: auto;
  border-radius: var(--bk-r);
  border: 1px solid var(--bk-border);
  margin-bottom: 0;
}

.beta-wrap .tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.beta-wrap .tabell__huvud {
  padding: 0.5rem 0.875rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bk-text-2);
  background: var(--bk-surface-2);
  border-bottom: 1px solid var(--bk-border);
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.beta-wrap .tabell__cell {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--bk-border);
  color: var(--bk-text);
  vertical-align: middle;
  font-size: 0.8125rem;
}

.beta-wrap .tabell tbody tr:last-child .tabell__cell {
  border-bottom: none;
}

.beta-wrap .tabell tbody tr:hover .tabell__cell {
  background: var(--bk-surface-2);
}

.beta-wrap .tabell__cell[style*="monospace"] {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
}


/* 15. Advanced settings accordion */
.beta-wrap details.kort {
  padding: 0;
  overflow: visible;
}

.beta-wrap details.kort > summary.kort__rubrik {
  padding: 1.125rem 1.5rem;
  margin-bottom: 0;
  border-radius: var(--bk-r-lg);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  transition: background var(--bk-transition);
  font-size: 0.9375rem;
}

.beta-wrap details.kort > summary.kort__rubrik::-webkit-details-marker {
  display: none;
}

.beta-wrap details.kort > summary.kort__rubrik::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.beta-wrap details.kort[open] > summary.kort__rubrik::after {
  transform: rotate(180deg);
}

.beta-wrap details.kort > summary.kort__rubrik:hover {
  background: var(--bk-surface-2);
  border-radius: var(--bk-r-lg) var(--bk-r-lg) 0 0;
}

.beta-wrap details.kort[open] > summary.kort__rubrik {
  border-bottom: 1px solid var(--bk-border);
  border-radius: var(--bk-r-lg) var(--bk-r-lg) 0 0;
}

.beta-wrap details.kort > .kort__innehall {
  padding: 1.25rem 1.5rem 1.5rem;
}

.beta-wrap .kort__innehall h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bk-text-2);
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* 16. More tools section */
.beta-wrap .beta-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.beta-wrap .beta-tools-grid a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: var(--bk-r);
  text-decoration: none;
  color: var(--bk-text);
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--bk-surface);
  box-shadow: var(--bk-shadow-xs);
  transition: all var(--bk-transition);
}

.beta-wrap .beta-tools-grid a:hover {
  background: var(--bk-accent-subtle);
  color: var(--bk-accent);
  box-shadow: var(--bk-shadow-sm);
  transform: translateY(-1px);
}

.beta-wrap .beta-tools-grid a i {
  font-size: 1rem;
  color: var(--bk-text-3);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: color var(--bk-transition);
}

.beta-wrap .beta-tools-grid a:hover i {
  color: var(--bk-accent);
}

/* Section labels */
.beta-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bk-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.875rem;
}


/* 17. FAQ */
.beta-wrap .faq h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bk-text);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.beta-wrap .faq__item {
  border-bottom: 1px solid var(--bk-border);
}

.beta-wrap .faq__item:first-of-type {
  border-top: 1px solid var(--bk-border);
}

.beta-wrap .faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bk-text);
  cursor: pointer;
  list-style: none;
  transition: color var(--bk-transition);
}

.beta-wrap .faq__summary::-webkit-details-marker {
  display: none;
}

.beta-wrap .faq__summary::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform 0.2s ease;
}

.beta-wrap details[open] > .faq__summary::after {
  transform: rotate(180deg);
}

.beta-wrap .faq__summary:hover {
  color: var(--bk-accent);
}

.beta-wrap .faq__content {
  padding: 0 0 1.125rem;
  font-size: 0.9rem;
  color: var(--bk-text-2);
  line-height: 1.75;
}

.beta-wrap .faq__content a {
  color: var(--bk-accent);
  text-underline-offset: 2px;
}


/* 18. Text utilities */
.beta-wrap .text--center { text-align: center; }
.beta-wrap .text--muted { color: var(--bk-text-3); font-size: 0.875rem; }
.beta-wrap .text--success { color: var(--bk-success); }
.beta-wrap .text--error { color: var(--bk-error); }
.beta-wrap .hidden { display: none !important; }


/* 19. GPS button */
.beta-wrap #btn-gps.gps-loading,
.beta-wrap #btn-gps-map.gps-loading {
  pointer-events: none;
  opacity: 0.6;
}

@keyframes bk-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.beta-wrap #btn-gps.gps-loading i,
.beta-wrap #btn-gps-map.gps-loading i {
  animation: bk-spin 1s linear infinite;
}


/* 20. Graticule labels */
.beta-wrap .graticule-label {
  background: transparent !important;
  border: none !important;
}

.beta-wrap .graticule-label span {
  font-size: 10px;
  color: #444;
  background: rgba(255, 255, 255, 0.75);
  padding: 1px 3px;
  border-radius: 2px;
  white-space: nowrap;
}

[data-theme="dark"] .beta-wrap .graticule-label span {
  color: #ccc;
  background: rgba(15, 23, 42, 0.8);
}


/* 21. Elevation column */
.beta-wrap .elevation-col { display: none; }
.beta-wrap .elevation-enabled .elevation-col { display: table-cell; }


/* 22. Dark mode overrides for form elements */
[data-theme="dark"] .beta-wrap .falt__input,
[data-theme="dark"] .beta-wrap .falt__textarea {
  background: var(--bk-surface-2);
  border-color: var(--bk-border-strong);
  color: var(--bk-text);
}

[data-theme="dark"] .beta-wrap .falt__select,
[data-theme="dark"] .beta-wrap .kort details .falt__select,
[data-theme="dark"] .beta-wrap .kort select {
  background-color: var(--bk-surface-2);
  border-color: var(--bk-border-strong);
  color: var(--bk-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234a5a72' stroke-width='1.5' stroke-linecap='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

[data-theme="dark"] .beta-wrap .falt__select option,
[data-theme="dark"] .beta-wrap .kort select option {
  background-color: var(--bk-surface-2);
  color: var(--bk-text);
}

/* WCAG AA: dark mode primary button uses the darker accent (#2563eb, contrast 7.5:1 on white) */
[data-theme="dark"] .beta-wrap .knapp:not(.knapp--sekundar):not(.knapp--liten) {
  background: #2563eb;
  color: #ffffff;
}

[data-theme="dark"] .beta-wrap .knapp:not(.knapp--sekundar):not(.knapp--liten):hover {
  background: #1d4ed8;
}

[data-theme="dark"] .beta-wrap .knapp--sekundar {
  background: var(--bk-surface-2);
  border-color: var(--bk-border);
  color: var(--bk-text);
}

[data-theme="dark"] .beta-wrap .knapp--sekundar:hover {
  background: var(--bk-surface-3);
  border-color: var(--bk-border-strong);
}

[data-theme="dark"] .beta-wrap .kort__innehall h4 {
  color: var(--bk-text-2);
}

/* Dark mode: active tab has surface-3 for clearer separation */
[data-theme="dark"] .beta-wrap .koordinat-tab--aktiv {
  background: var(--bk-surface-3);
}

/* Dark mode: tabs container has a subtle top glow */
[data-theme="dark"] .beta-wrap .koordinat-tabs {
  background-image: radial-gradient(ellipse 80% 120% at 50% -20%, rgba(91, 163, 245, 0.05) 0%, transparent 70%);
}

/* Dark mode: cards have a very faint top-edge highlight */
[data-theme="dark"] .beta-wrap .kort {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 60px);
}


/* 23. Responsive */
@media (max-width: 640px) {
  .beta-wrap .koordinat-tabs {
    flex-direction: column;
    gap: 2px;
    border-radius: var(--bk-r-lg);
    padding: 4px;
  }

  .beta-wrap .koordinat-tab {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    border-radius: calc(var(--bk-r-lg) - 3px);
  }

  .beta-wrap .koordinat-tab__ikon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.6;
  }

  .beta-wrap .koordinat-tab__titel {
    font-size: 0.9rem;
  }

  .beta-wrap .koordinat-tab__desc {
    display: none;
  }

  .beta-wrap .quick-input-rad {
    flex-direction: column;
  }

  .beta-wrap #btn-gps {
    width: 100%;
    justify-content: center;
    height: var(--bk-btn-h);
  }

  .beta-wrap #map-container {
    height: 320px;
    min-height: 320px;
  }

  .beta-wrap .form__verktyg {
    flex-direction: column;
  }

  .beta-wrap .form__verktyg .knapp {
    width: 100%;
    justify-content: center;
  }

  .beta-wrap .export-group .knapp {
    flex: 1 1 auto;
    min-height: 2.75rem;
  }

  .beta-wrap .result-format {
    min-width: 100px;
  }

  .beta-wrap .result-copy:not(.beta-icon-only) {
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  .beta-wrap .beta-tools-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .beta-wrap .beta-tools-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .beta-wrap .koordinat-tab__desc {
    font-size: 0.68rem;
    max-width: 96px;
  }
}

/* 24. Accessibility */
@media (prefers-reduced-motion: reduce) {
  .beta-wrap *,
  .beta-wrap *::before,
  .beta-wrap *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.beta-wrap :focus-visible {
  outline: 2px solid var(--bk-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 25. Beta history — chip toggle + collapsible panel */

.beta-wrap .beta-history-chip-wrap {
  margin-bottom: 0.75rem;
}

.beta-wrap .beta-history-chip-wrap.hidden {
  display: none;
}

.beta-wrap .beta-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--bk-border);
  border-radius: 999px;
  background: var(--bk-surface);
  color: var(--bk-text-2);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
}

.beta-wrap .beta-history-chip:hover {
  border-color: var(--bk-border-strong);
  color: var(--bk-text);
}

.beta-wrap .beta-history-chip[aria-expanded="true"] {
  border-color: var(--bk-accent);
  color: var(--bk-text);
}

.beta-wrap .beta-chip-arrow {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.beta-wrap .beta-history-chip[aria-expanded="true"] .beta-chip-arrow {
  transform: rotate(180deg);
}

.beta-wrap .beta-history-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
  border: 1px solid var(--bk-border);
  border-radius: 6px;
  margin-top: 0.5rem;
  background: var(--bk-surface);
}

.beta-wrap .beta-history-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bk-border);
}

.beta-wrap .beta-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.25rem 0.75rem;
}

.beta-wrap .beta-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.375rem;
  border-bottom: 1px solid var(--bk-border);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 4px;
}

.beta-wrap .beta-history-item:last-child {
  border-bottom: none;
}

.beta-wrap .beta-history-item:hover {
  background: var(--bk-surface-2);
}

.beta-wrap .beta-history-coords {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.beta-wrap .beta-history-input {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beta-wrap .beta-history-vals {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.beta-wrap .beta-history-val {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  color: var(--bk-text-2);
}

.beta-wrap .beta-badge-xs {
  font-size: 0.65rem !important;
  padding: 0.1rem 0.375rem !important;
  line-height: 1.4;
}

.beta-wrap .beta-history-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.beta-wrap .beta-history-time {
  font-size: 0.75rem;
  color: var(--bk-text-2);
  white-space: nowrap;
}

.beta-wrap .beta-history-use,
.beta-wrap .beta-history-remove {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--bk-text-2);
}

.beta-wrap .beta-history-item:hover .beta-history-use,
.beta-wrap .beta-history-item:hover .beta-history-remove {
  opacity: 1;
}

.beta-wrap .beta-history-use:hover {
  border-color: var(--bk-border) !important;
  background: var(--bk-surface-2) !important;
}

.beta-wrap .beta-history-remove:hover {
  color: #ef4444;
  border-color: transparent !important;
  background: transparent !important;
}

[data-theme="dark"] .beta-wrap .beta-history-chip {
  background: var(--bk-surface-2);
}

[data-theme="dark"] .beta-wrap .beta-history-val,
[data-theme="dark"] .beta-wrap .beta-history-time {
  color: #94a3b8;
}

/* 26. Format-copy split-button + dropdown */

.beta-wrap .beta-copy-group {
  display: inline-flex;
  position: relative;
  align-items: stretch;
}

.beta-wrap .beta-copy-group > .result-copy {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.beta-wrap .beta-copy-group > .result-copy.beta-icon-only {
  background: transparent;
  border-color: transparent;
  color: var(--bk-text-muted);
  padding: 0.2rem 0.4rem;
  min-width: auto;
  min-height: auto;
  line-height: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.beta-wrap .beta-copy-group > .result-copy.beta-icon-only:hover,
.beta-wrap .beta-copy-group > .result-copy.beta-icon-only:focus-visible {
  background: var(--bk-accent-subtle);
  border-color: transparent;
  color: var(--bk-accent);
}

.beta-wrap .beta-format-trigger {
  padding: 0 0.5rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
  min-height: 2rem;
  height: auto;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
}

.beta-wrap .beta-format-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bk-surface);
  border: 1px solid var(--bk-border-strong);
  border-radius: 6px;
  box-shadow: var(--bk-shadow-sm);
  z-index: 100;
  min-width: 8rem;
  padding: 0.25rem 0;
}

.beta-wrap .beta-format-dropdown.hidden {
  display: none;
}

.beta-wrap .beta-format-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.875rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--bk-text);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  transition: background 0.1s;
}

.beta-wrap .beta-format-dropdown button:hover {
  background: var(--bk-surface-2);
}

[data-theme="dark"] .beta-wrap .beta-format-dropdown {
  background: var(--bk-surface-2);
}

@media (max-width: 640px) {
  .beta-wrap .beta-history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .beta-wrap .beta-history-meta {
    align-self: flex-end;
  }
}

/* 27. Beta v2 — contextual interaction experiments */

/* History indicator: text-link, not a pill */
.beta-wrap .beta-history-chip {
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: 0.75rem;
  color: var(--bk-text-2);
  gap: 0.3rem;
  height: auto;
  opacity: 0.65;
}

.beta-wrap .beta-history-chip:hover {
  background: none;
  border: none;
  color: var(--bk-text);
  opacity: 1;
}

.beta-wrap .beta-history-chip[aria-expanded="true"] {
  border: none;
  color: var(--bk-accent);
  opacity: 1;
}

.beta-wrap .beta-history-chip .beta-chip-arrow {
  width: 10px;
  height: 10px;
}

/* Hover-reveal: result row copy actions */
.beta-wrap #result-container .result-copy,
.beta-wrap #result-container .beta-copy-group {
  opacity: 0;
  transition: opacity 0.18s;
}

.beta-wrap #result-container .result-row:hover .result-copy,
.beta-wrap #result-container .result-row:hover .beta-copy-group,
.beta-wrap #result-container .result-row:focus-within .result-copy,
.beta-wrap #result-container .result-row:focus-within .beta-copy-group {
  opacity: 1;
}

/* Touch devices and narrow screens: always visible */
@media (hover: none), (max-width: 640px) {
  .beta-wrap #result-container .result-copy,
  .beta-wrap #result-container .beta-copy-group {
    opacity: 1;
  }
}

/* Subtle row hover surface */
.beta-wrap #result-container .result-row {
  border-radius: 4px;
  transition: background 0.15s;
}

.beta-wrap #result-container .result-row:hover {
  background: var(--bk-surface-2);
}

/* Format labels: no pill in result rows, colored text only */
.beta-wrap #result-container .format-badge {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.5625rem !important;
  letter-spacing: 0.1em;
  font-weight: 700;
  opacity: 0.55;
}

[data-theme="dark"] .beta-wrap .beta-history-chip {
  color: var(--bk-text-2);
}

[data-theme="dark"] .beta-wrap .beta-history-chip[aria-expanded="true"] {
  color: var(--bk-accent);
}

/* 28. Fas 2: Punkt 2 avstånd, GPS-metadata, Teknikläge */

/* Punkt 2 panel */
.beta-wrap .beta-point2-panel {
  margin-top: 0.75rem;
  border: 1px solid var(--bk-border);
  border-radius: 6px;
  background: var(--bk-surface);
}

.beta-wrap .beta-point2-inner {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.beta-wrap .beta-p1-row,
.beta-wrap .beta-p2-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.beta-wrap .beta-p1-tag,
.beta-wrap .beta-p2-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bk-text-2);
  width: 3.75rem;
  flex-shrink: 0;
  opacity: 0.65;
}

.beta-wrap .beta-p1-val {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  color: var(--bk-text-2);
}

.beta-wrap .beta-point2-input {
  flex: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--bk-border);
  border-radius: 5px;
  background: var(--bk-surface);
  color: var(--bk-text);
  transition: border-color 0.15s;
}

.beta-wrap .beta-point2-input:focus {
  outline: none;
  border-color: var(--bk-accent);
}

.beta-wrap .beta-point2-result {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875rem;
  padding: 0.375rem 0 0;
  border-top: 1px solid var(--bk-border);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.beta-wrap .beta-point2-result.hidden {
  display: none;
}

.beta-wrap .beta-dist-val {
  font-weight: 600;
  color: var(--bk-text);
}

.beta-wrap .beta-dist-sep,
.beta-wrap .beta-dist-bearing {
  color: var(--bk-text-2);
}

@media (max-width: 640px) {
  .beta-wrap .beta-p2-row {
    flex-wrap: wrap;
  }

  .beta-wrap .beta-point2-input {
    width: 100%;
    flex: none;
  }
}

/* GPS metadata strip */
.beta-wrap .beta-gps-meta {
  font-size: 0.75rem;
  color: var(--bk-text-2);
  padding: 0.375rem 0;
  border-top: 1px solid var(--bk-border);
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.beta-wrap .beta-gps-sep {
  color: var(--bk-border-strong);
}

/* Tech mode toggle inside results heading */
.beta-wrap #quick-results h2,
.beta-wrap #result-container h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.beta-wrap .beta-tech-toggle {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  min-height: 1.75rem;
  border: 1px solid var(--bk-border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--bk-text-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.beta-wrap .beta-tech-toggle:hover,
.beta-wrap .beta-tech-toggle[aria-pressed="true"] {
  border-color: var(--bk-accent);
  color: var(--bk-accent);
}

/* EPSG labels next to format badges */
.beta-wrap .beta-epsg-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.5625rem;
  color: var(--bk-text-2);
  letter-spacing: 0.04em;
  margin-left: 0.25rem;
  opacity: 0.55;
  vertical-align: middle;
}

/* 29. Overflow action menus */

.beta-wrap .beta-overflow-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.beta-wrap .beta-overflow-trigger {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  flex-shrink: 0;
  background: var(--bk-surface-2) !important;
  border-color: var(--bk-border-strong) !important;
}

.beta-wrap .beta-overflow-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 13rem;
  background: var(--bk-surface);
  border: 1px solid var(--bk-border-strong);
  border-radius: 8px;
  box-shadow: var(--bk-shadow);
  z-index: 200;
  padding: 0.25rem 0;
}

.beta-wrap .beta-overflow-menu--up {
  top: auto;
  bottom: calc(100% + 4px);
}

.beta-wrap .beta-overflow-menu--right {
  left: auto;
  right: 0;
}

.beta-wrap .beta-overflow-menu.hidden {
  display: none;
}

.beta-wrap .beta-overflow-menu .knapp,
.beta-wrap .beta-overflow-menu a.knapp {
  display: flex !important;
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-start;
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem;
  height: auto !important;
  min-height: 2.25rem;
  color: var(--bk-text);
  transition: background 0.1s;
}

.beta-wrap .beta-overflow-menu .knapp:hover,
.beta-wrap .beta-overflow-menu a.knapp:hover {
  background: var(--bk-surface-2) !important;
}

.beta-wrap .beta-overflow-menu .knapp:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.beta-wrap .beta-overflow-menu .knapp:disabled:hover {
  background: transparent !important;
}

.beta-wrap .beta-overflow-menu .knapp.hidden,
.beta-wrap .beta-overflow-menu a.knapp.hidden {
  display: none !important;
}

[data-theme="dark"] .beta-wrap .beta-overflow-menu {
  background: var(--bk-surface-2);
}

/* 30. Geo identity: coordinate grid texture */

.beta-wrap .koordinat-panel {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}

[data-theme="dark"] .beta-wrap .koordinat-panel {
  background-image:
    linear-gradient(rgba(91, 163, 245, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 163, 245, 0.04) 1px, transparent 1px);
}

/* 31. Dark mode map filter */

[data-theme="dark"] .beta-wrap .leaflet-container:not(.beta-custom-tile) {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.85);
}

[data-theme="dark"] .beta-wrap .leaflet-container:not(.beta-custom-tile) .leaflet-marker-icon,
[data-theme="dark"] .beta-wrap .leaflet-container:not(.beta-custom-tile) .leaflet-marker-shadow,
[data-theme="dark"] .beta-wrap .leaflet-container:not(.beta-custom-tile) .leaflet-popup {
  filter: invert(1) hue-rotate(180deg);
}

/* 33. Leaflet zoom controls: beta theme */

/* Leaflet 1.9 hides the inner span by default — restore it */
.beta-wrap .leaflet-control-zoom a span {
  display: inline-block !important;
}

.beta-wrap .leaflet-control-zoom {
  border: 1px solid var(--bk-border-strong) !important;
  box-shadow: var(--bk-shadow-sm) !important;
  border-radius: 6px !important;
}

.beta-wrap .leaflet-control-zoom a,
.beta-wrap .leaflet-control-zoom a:link,
.beta-wrap .leaflet-control-zoom a:visited {
  background-color: var(--bk-surface) !important;
  color: var(--bk-text) !important;
  border-bottom-color: var(--bk-border) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  width: 28px;
  height: 28px;
  text-decoration: none;
}

.beta-wrap .leaflet-control-zoom a:hover {
  background-color: var(--bk-surface-2) !important;
  color: var(--bk-accent) !important;
}

.beta-wrap .leaflet-control-zoom-in {
  border-radius: 5px 5px 0 0 !important;
}

.beta-wrap .leaflet-control-zoom-out {
  border-radius: 0 0 5px 5px !important;
  border-bottom: none !important;
}

/* Dark mode: parent invert(1) on map container naturally inverts zoom button colors.
   --bk-surface (dark) → light bg, --bk-text (light) → dark text = correct contrast.
   Override only hover accent color since blue inverts to orange-ish. */
[data-theme="dark"] .beta-wrap .leaflet-container:not(.beta-custom-tile) .leaflet-control-zoom a:hover {
  color: var(--bk-text) !important;
}

/* 32. v3: Interaction refinement */

/* De-card #quick-results: spacing over container */
.beta-wrap #quick-results {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.beta-wrap #quick-results > .kort__rubrik {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bk-text-3);
  padding-top: 0;
  padding-bottom: 0.75rem;
  border-bottom: none;
}

/* Per-row actions group: clipboard + ⋯ */
.beta-wrap .beta-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Row-level ⋯ inherits overflow-trigger sizing */
.beta-wrap .beta-row-menu-btn {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--bk-text-2);
}

.beta-wrap .beta-row-menu-btn:hover,
.beta-wrap .beta-row-menu-btn:focus-visible {
  background: var(--bk-surface-2) !important;
  border-color: var(--bk-border) !important;
  color: var(--bk-text);
}

/* Copy icon button inside beta-row-actions */
.beta-wrap .beta-row-actions > .result-copy.beta-icon-only {
  background: transparent;
  border-color: transparent;
  color: var(--bk-text-muted, var(--bk-text-2));
  padding: 0.2rem 0.4rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  line-height: 1;
}

.beta-wrap .beta-row-actions > .result-copy.beta-icon-only:hover,
.beta-wrap .beta-row-actions > .result-copy.beta-icon-only:focus-visible {
  background: var(--bk-accent-subtle);
  border-color: transparent;
  color: var(--bk-accent);
}

/* Hover-reveal: extend to cover beta-row-actions */
.beta-wrap #result-container .beta-row-actions {
  opacity: 0;
  transition: opacity 0.18s;
}

.beta-wrap #result-container .result-row:hover .beta-row-actions,
.beta-wrap #result-container .result-row:focus-within .beta-row-actions {
  opacity: 1;
}

@media (hover: none), (max-width: 640px) {
  .beta-wrap #result-container .beta-row-actions {
    opacity: 1;
  }
}

/* Menu separator line */
.beta-wrap .beta-menu-sep {
  height: 1px;
  background: var(--bk-border);
  margin: 0.25rem 0;
  border: none;
}

/* Decimal fade: last digits of a coordinate value */
.beta-wrap .beta-coord-fade {
  opacity: 0.38;
}

/* Inline distance calculator */
.beta-wrap .beta-distance-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.625rem 0 0.75rem;
  border-top: 1px solid var(--bk-border);
}

.beta-wrap .beta-distance-inline.hidden {
  display: none;
}

.beta-wrap .beta-dist-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bk-text-2);
  white-space: nowrap;
}

.beta-wrap .beta-dist-input {
  flex: 1;
  min-width: 8rem;
  max-width: 16rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  padding: 0.3rem 0.625rem;
  border: 1px solid var(--bk-border);
  border-radius: 5px;
  background: var(--bk-surface);
  color: var(--bk-text);
  transition: border-color 0.15s;
}

.beta-wrap .beta-dist-input:focus {
  outline: none;
  border-color: var(--bk-accent);
}

.beta-wrap .beta-dist-result {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bk-text);
  white-space: nowrap;
}

[data-theme="dark"] .beta-wrap .beta-dist-input {
  background: var(--bk-surface-2);
  border-color: var(--bk-border-strong);
}

/* 33b. Map layer switcher overlay button */

.beta-wrap .beta-layer-btn {
  cursor: pointer !important;
  background: #fff;
  min-width: 52px;
  text-align: center;
  user-select: none;
  margin-top: 0;
}

.beta-wrap .beta-layer-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #444;
  line-height: 1;
  white-space: nowrap;
}

.beta-wrap .beta-layer-btn:hover span {
  background: #f4f4f4;
  color: #000;
}

.beta-wrap .beta-layer-btn:focus-visible {
  outline: 2px solid var(--bk-accent);
  outline-offset: 1px;
}

[data-theme="dark"] .beta-wrap .beta-layer-btn {
  background: #1e2938;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .beta-wrap .beta-layer-btn span {
  color: #c8d4e3;
}

[data-theme="dark"] .beta-wrap .beta-layer-btn:hover span {
  background: #263347;
  color: #f1f5f9;
}

/* 34. Page rhythm: secondary content, light mode identity */

/* Coordinate input: monospace signals precision tool */
.beta-wrap #quick-input {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* FAQ: secondary section, not a major heading */
.beta-wrap .faq h2 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bk-text-3);
  margin-bottom: 1rem;
  text-align: left;
}

.beta-wrap .faq__summary {
  padding: 0.8rem 0;
  font-size: 0.875rem;
}

.beta-wrap .faq__content {
  padding: 0 0 0.8rem;
  font-size: 0.8125rem;
}

/* Tools nav: compact cross-link row for SEO, not a card */
.beta-wrap .beta-tools-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  padding: 1rem 1.25rem 1rem;
  background: var(--bk-surface-2);
  border: 1px solid var(--bk-border-strong);
  border-radius: var(--bk-r);
}

.beta-wrap .beta-tools-nav__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  flex-basis: 100%;
  margin-bottom: 0.25rem;
}

.beta-wrap .beta-tools-nav a {
  font-size: 0.8125rem;
  color: #64748b;
  text-decoration: none;
  transition: color var(--bk-transition);
}

.beta-wrap .beta-tools-nav a:hover {
  color: var(--bk-accent);
}

/* 35. Light mode identity — deeper pass */

/* Input label: monospace annotation, not a generic form label */
.beta-wrap label[for="quick-input"] {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bk-text-3);
  margin-bottom: 0.5rem;
}

/* Header: subtle blue-grey tint + coordinate grid + centered crosshair */
.beta-wrap header.layout__sektion {
  background-color: rgba(37, 99, 235, 0.04);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='56' fill='none' stroke='rgba(37,99,235,0.18)' stroke-width='1'/%3E%3Ccircle cx='80' cy='80' r='28' fill='none' stroke='rgba(37,99,235,0.14)' stroke-width='0.75'/%3E%3Cline x1='80' y1='10' x2='80' y2='150' stroke='rgba(37,99,235,0.14)' stroke-width='0.75'/%3E%3Cline x1='10' y1='80' x2='150' y2='80' stroke='rgba(37,99,235,0.14)' stroke-width='0.75'/%3E%3Ccircle cx='80' cy='80' r='2.5' fill='rgba(37,99,235,0.28)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.12) 1px, transparent 1px);
  background-size: 200px 200px, 44px 44px, 44px 44px;
  background-position: center center, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
}

/* Card surface: coordinate grid applied directly so it shows inside the form area */
.beta-wrap .koordinat-panel .kort {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.038) 1px, transparent 1px);
  background-size: 44px 44px;
  background-color: #ffffff;
}

/* Dark mode: override card grid with the existing top-edge highlight, no light-mode grid */
[data-theme="dark"] .beta-wrap .koordinat-panel .kort {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 60px);
  background-color: var(--bk-surface);
}

/* Dark mode: no grid or tint on header (dark surface already has identity) */
[data-theme="dark"] .beta-wrap header.layout__sektion {
  background-color: transparent;
  background-image: none;
}

/* 36. Exploration: tonal result rows + copy flash */

/* A. Tonal zones: each coordinate system row has its own color */
.beta-wrap #result-container .result-row:has(.format-badge--wgs84) {
  background: rgba(37, 99, 235, 0.055);
}

.beta-wrap #result-container .result-row:has(.format-badge--sweref) {
  background: rgba(21, 128, 61, 0.045);
}

.beta-wrap #result-container .result-row:has(.format-badge--rt90) {
  background: rgba(194, 65, 12, 0.06);
}

.beta-wrap #result-container .result-row:has(.format-badge--wgs84):hover {
  background: rgba(37, 99, 235, 0.07);
}

.beta-wrap #result-container .result-row:has(.format-badge--sweref):hover {
  background: rgba(21, 128, 61, 0.07);
}

.beta-wrap #result-container .result-row:has(.format-badge--rt90):hover {
  background: rgba(194, 65, 12, 0.07);
}

[data-theme="dark"] .beta-wrap #result-container .result-row:has(.format-badge--wgs84),
[data-theme="dark"] .beta-wrap #result-container .result-row:has(.format-badge--sweref),
[data-theme="dark"] .beta-wrap #result-container .result-row:has(.format-badge--rt90) {
  background: transparent;
}

[data-theme="dark"] .beta-wrap #result-container .result-row:has(.format-badge--wgs84):hover,
[data-theme="dark"] .beta-wrap #result-container .result-row:has(.format-badge--sweref):hover,
[data-theme="dark"] .beta-wrap #result-container .result-row:has(.format-badge--rt90):hover {
  background: var(--bk-surface-2);
}

/* C. Copy flash: row briefly pulses green then returns to tonal base */
@keyframes beta-row-flash {
  0%   { background: rgba(16, 185, 129, 0.2); }
  100% { background: transparent; }
}

.beta-wrap #result-container .result-row.beta-row-flash {
  animation: beta-row-flash 0.6s ease-out forwards;
}

/* 37. FAQ progressive disclosure */
.beta-wrap .faq__item--hidden {
  display: none;
}

.beta-wrap .faq-show-more {
  display: block;
  width: 100%;
  padding: 0.7rem 0;
  font-size: 0.8125rem;
  color: var(--bk-text-3);
  background: none;
  border: none;
  border-bottom: 1px solid var(--bk-border);
  text-align: left;
  cursor: pointer;
  transition: color var(--bk-transition);
}

.beta-wrap .faq-show-more:hover {
  color: var(--bk-accent);
}

/* 38. F3-B: Mobile sticky toolbar */
.beta-sticky-bar {
  display: none;
}

@media (max-width: 640px) {
  .beta-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: stretch;
    background: var(--bk-surface);
    border-top: 1px solid var(--bk-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(0);
    transition: transform 0.2s ease;
  }

  .beta-sticky-bar.beta-sticky-bar--keyboard {
    transform: translateY(110%);
  }

  .beta-sticky-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0.55rem 0.25rem;
    background: transparent;
    border: none;
    border-right: 1px solid var(--bk-border);
    color: var(--bk-text-2);
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 3.25rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, color 0.1s;
  }

  .beta-sticky-btn:last-child {
    border-right: none;
  }

  .beta-sticky-btn:active {
    background: var(--bk-surface-2);
    color: var(--bk-accent);
  }

  .beta-sticky-btn:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .beta-sticky-label {
    display: block;
  }

  /* Ensure footer content isn't hidden under bar */
  .beta-wrap {
    padding-bottom: 4rem;
  }
}

[data-theme="dark"] .beta-sticky-bar {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}

/* KO-03: Feedback card */
.ko03-feedback {
  position: fixed;
  bottom: 1.25rem;
  right: 1rem;
  z-index: 200;
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: 10px;
  padding: 0.75rem 1rem 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
  max-width: 220px;
  animation: ko03-in 0.25s ease;
}

@keyframes ko03-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ko03-feedback--out {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ko03-feedback__q {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
  color: var(--bk-text);
  padding-right: 1.25rem;
}

.ko03-feedback__btns {
  display: flex;
  gap: 0.5rem;
}

.ko03-feedback__btn {
  flex: 1;
  padding: 0.4rem 0.25rem;
  border: 1px solid var(--bk-border);
  border-radius: 6px;
  background: var(--bk-surface);
  color: var(--bk-text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ko03-feedback__btn--pos:hover { background: #dcfce7; border-color: #22c55e; color: #166534; }
.ko03-feedback__btn--neg:hover { background: #fee2e2; border-color: #ef4444; color: #991b1b; }

[data-theme="dark"] .ko03-feedback__btn--pos:hover { background: #14532d; border-color: #22c55e; color: #86efac; }
[data-theme="dark"] .ko03-feedback__btn--neg:hover { background: #450a0a; border-color: #ef4444; color: #fca5a5; }

.ko03-feedback__close {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--bk-text-2, #6b7280);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.ko03-feedback__close:hover {
  background: var(--bk-surface-2);
  color: var(--bk-text);
}

@media (max-width: 640px) {
  .ko03-feedback {
    bottom: calc(56px + 0.75rem);
  }
}

/* Beta feedback widget */
.bk-feedback {
  margin-top: 0.75rem;
  text-align: center;
}

.bk-feedback__toggle {
  background: none;
  border: none;
  color: var(--bk-text-3);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: color var(--bk-transition), text-decoration-color var(--bk-transition);
  font-family: inherit;
}

.bk-feedback__toggle:hover {
  color: var(--bk-text-2);
  text-decoration-color: currentColor;
}

.bk-feedback__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.bk-feedback__panel {
  margin: 0.625rem auto 0;
  max-width: 480px;
  text-align: left;
}

.bk-feedback__panel.hidden { display: none; }

.bk-feedback__textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bk-border-strong);
  border-radius: var(--bk-r);
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--bk-surface);
  color: var(--bk-text);
  resize: vertical;
  min-height: 4.5rem;
  box-sizing: border-box;
  line-height: 1.5;
  transition: border-color var(--bk-transition), box-shadow var(--bk-transition);
}

.bk-feedback__textarea:focus {
  outline: none;
  border-color: var(--bk-accent);
  box-shadow: 0 0 0 3px var(--bk-accent-ring);
}

.bk-feedback__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.bk-feedback__counter {
  font-size: 0.75rem;
  color: var(--bk-text-3);
}

.bk-feedback__send {
  background: var(--bk-accent);
  color: #fff;
  border: none;
  border-radius: var(--bk-r);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--bk-transition);
}

.bk-feedback__send:hover { background: var(--bk-accent-dark); }
.bk-feedback__send:disabled { opacity: 0.6; cursor: not-allowed; }

.bk-feedback__ok {
  font-size: 0.875rem;
  color: var(--bk-success);
  text-align: center;
  margin: 0.5rem 0 0;
}

.bk-feedback__err {
  font-size: 0.8125rem;
  color: var(--bk-error);
  margin: 0.5rem 0 0;
}

.bk-feedback__ok.hidden,
.bk-feedback__err.hidden { display: none; }