/* Beboerlicens-tjek – design tokens and layout.
 * Semantic colours with light and dark variants; every text/background pair
 * used here measures at least 4.5:1 (see README › Design). */

:root {
  color-scheme: light dark;

  /* surfaces and content */
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --label: #1C1C1E;
  --label-2: #636366;            /* 5.99:1 on card, 5.37:1 on bg */
  --separator: rgba(60, 60, 67, 0.18);
  --fill: rgba(120, 120, 128, 0.12);

  /* interactive */
  --accent: #0A5CAD;             /* 6.67:1 on white */
  --on-accent: #FFFFFF;
  --focus: #0A5CAD;

  /* verdict signals: strong colour + tint */
  --ok: #1B7A3E;    --ok-tint: #E3F3E8;     /* 4.68:1 */
  --warn: #8A5200;  --warn-tint: #FFF1D6;   /* 5.72:1 */
  --no: #B3261E;    --no-tint: #FCE4E2;     /* 5.40:1 */
  --info: #4B4B55;  --info-tint: #E9E9EE;   /* 7.12:1 */

  /* map overlays */
  --map-own: #1B7A3E;
  --map-other: #5B5B66;
  --map-flex: #6D28D9;
  --map-prik: #C77700;
  --map-me: #0A5CAD;
  --map-label-halo: #FFFFFF;

  --glass-bg: rgba(255, 255, 255, 0.86);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.08);
  --radius: 16px;
  --radius-sm: 12px;

  /* type scale (iOS text styles, in rem so the browser text size applies) */
  --fs-title2: 1.375rem;   /* 22 */
  --fs-headline: 1.0625rem;/* 17 semibold */
  --fs-body: 1.0625rem;    /* 17 */
  --fs-callout: 1rem;      /* 16 */
  --fs-footnote: 0.8125rem;/* 13 */
  --fs-caption: 0.75rem;   /* 12 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1C1C1E;
    --label: #F2F2F7;
    --label-2: #A1A1A6;          /* 6.61:1 on card */
    --separator: rgba(84, 84, 88, 0.65);
    --fill: rgba(120, 120, 128, 0.24);
    --accent: #6EB0FF;           /* 7.55:1 on card */
    --on-accent: #0B1B2B;        /* 7.73:1 on accent */
    --focus: #6EB0FF;
    --ok: #5DD48B;    --ok-tint: #10301C;
    --warn: #F5B84A;  --warn-tint: #3A2A0B;
    --no: #FF8A80;    --no-tint: #3D1613;
    --info: #B8B8C0;  --info-tint: #2A2A30;
    --map-own: #5DD48B;
    --map-other: #B8B8C0;
    --map-flex: #B794F6;
    --map-prik: #F5B84A;
    --map-me: #6EB0FF;
    --map-label-halo: #000000;
    --glass-bg: rgba(28, 28, 30, 0.86);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--card); }
  .legend, .leaflet-control-attribution { backdrop-filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.leaflet-container :focus-visible { outline-offset: 0; }

.sym { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.3em; }

/* ---------- app frame: panel + map ---------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
/* On compact widths the panel dissolves so the map can sit between the
 * verdict and the toolbar; on regular widths it is a real sidebar. */
.panel { display: contents; }
.header   { order: 1; }
.verdict  { order: 2; }
.map-wrap { order: 3; }
.toolbar  { order: 4; }
.footer   { order: 5; }

@media (min-width: 900px) {
  .app {
    display: grid;
    grid-template-columns: minmax(360px, 420px) 1fr;
    height: 100dvh;
    min-height: 0;
  }
  .panel { display: flex; flex-direction: column; overflow-y: auto; height: 100dvh; }
  .map-wrap { margin: 12px 12px 12px 0 !important; min-height: 0 !important; }
}

/* ---------- header ---------- */
.header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}
.header__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-headline);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  border: none;
  background: var(--fill);
  color: var(--accent);
  font-size: var(--fs-callout);
  font-weight: 600;
  max-width: 62vw;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.chip:active { filter: brightness(0.9); transform: scale(0.98); }
.chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lang {
  min-height: 44px;
  padding: 0 12px;
  margin-left: -12px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-footnote);
  font-weight: 600;
  border-radius: 999px;
}
.lang:active { background: var(--fill); }

/* ---------- verdict card (signature: road-sign glyph + verdict) ---------- */
.verdict {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 4px 16px 0;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--info-tint);
  border: 1px solid transparent;
  box-shadow: var(--shadow);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.verdict--ok   { background: var(--ok-tint); }
.verdict--warn { background: var(--warn-tint); }
.verdict--no   { background: var(--no-tint); }
.verdict--info { background: var(--info-tint); }

.verdict__sign { flex: none; width: 64px; height: 64px; }
.sign { width: 64px; height: 64px; display: block; }
.verdict__sign.is-anim .sign { animation: sign-pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sign-pop {
  from { transform: scale(0.82); opacity: 0.4; }
  to   { transform: scale(1);    opacity: 1; }
}

.verdict__body { flex: 1; min-width: 0; }
.verdict__title {
  margin: 2px 0 4px;
  font-size: var(--fs-title2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.verdict__detail p { margin: 4px 0; font-size: var(--fs-body); }
.verdict__cta { margin-top: 12px; }
.verdict__links { margin-top: 10px; font-size: var(--fs-footnote); line-height: 1.7; }
.verdict__links:empty { display: none; }
.verdict__meta { margin-top: 6px; font-size: var(--fs-caption); color: var(--label-2); }
.verdict__meta:empty { display: none; }

.links__label { font-weight: 600; color: var(--label-2); }
.links a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- map ---------- */
.map-wrap {
  position: relative;
  flex: 1;
  min-height: 46dvh;
  margin: 12px 16px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--fill);
}
#map { position: absolute; inset: 0; }

@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.86) contrast(0.9) saturate(0.55); }
}
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--card);
  color: var(--label);
  border-bottom-color: var(--separator);
}
.leaflet-control-attribution {
  background: var(--glass-bg) !important;
  color: var(--label-2) !important;
  font-size: var(--fs-caption);
  backdrop-filter: blur(8px);
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-container { font-family: inherit; }

.zone-label {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--label);
  text-shadow: 0 0 3px var(--map-label-halo), 0 0 3px var(--map-label-halo), 0 0 6px var(--map-label-halo);
  pointer-events: none;
}
.leaflet-container.zoomed-out .zone-label { display: none; }
.leaflet-tooltip.zone-label::before { display: none; }

/* floating functional layer over the map */
.legend {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 500;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: var(--fs-footnote);
  max-width: min(260px, calc(100% - 20px));
}
.legend__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px 6px 12px;
  border: none;
  background: transparent;
  color: var(--label);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-align: left;
}
.legend__toggle .sym { margin-left: auto; transition: transform 0.2s ease; }
.legend.is-collapsed .legend__toggle .sym { transform: rotate(-90deg); }
.legend__items { list-style: none; margin: 0; padding: 0 12px 10px; line-height: 1.8; }
.legend.is-collapsed .legend__items { display: none; }
.legend__items li { display: flex; align-items: center; gap: 8px; }

.sw { display: inline-block; width: 18px; height: 12px; border-radius: 3px; flex: none; box-sizing: border-box; }
.sw--own   { background: color-mix(in srgb, var(--map-own) 35%, transparent);   border: 2px solid var(--map-own); }
.sw--other { background: color-mix(in srgb, var(--map-other) 15%, transparent); border: 1.5px solid var(--map-other); }
.sw--timed { background: color-mix(in srgb, var(--map-other) 10%, transparent); border: 1.5px dashed var(--map-other); }
.sw--flex  { background: color-mix(in srgb, var(--map-flex) 50%, transparent);  border: 1.5px solid var(--map-flex); }
.sw--prik  { background: color-mix(in srgb, var(--map-prik) 40%, transparent);  border: 2px dotted var(--map-prik); }

/* ---------- toolbar ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 8px;
  flex-wrap: wrap;
}
.status { flex: 1; min-width: 140px; font-size: var(--fs-footnote); color: var(--label-2); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--fill);
  color: var(--accent);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: filter 0.15s ease, transform 0.15s ease, background-color 0.2s ease;
}
.btn:active { filter: brightness(0.9); transform: scale(0.98); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary.is-active { background: var(--fill); color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- footer ---------- */
.footer {
  padding: 4px 16px max(16px, env(safe-area-inset-bottom));
  font-size: var(--fs-footnote);
  line-height: 1.6;
  color: var(--label-2);
}
.footer p { margin: 0; }
.footer__row { display: flex; align-items: center; }
.footer a { color: var(--accent); }

/* ---------- sheet (zone picker) ---------- */
.sheet {
  border: none;
  padding: 0;
  margin: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  border-radius: 20px 20px 0 0;
  background: var(--card);
  color: var(--label);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
  overflow: auto;
}
.sheet[open] { animation: sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet::backdrop { background: rgba(0, 0, 0, 0.4); }
@media (min-width: 640px) {
  .sheet { margin: auto; width: min(520px, calc(100vw - 32px)); border-radius: 20px; }
  .sheet__grabber { display: none; }
}
.sheet__body { padding: 8px 20px max(20px, env(safe-area-inset-bottom)); }
.sheet__grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--separator); margin: 4px auto 14px; }
.sheet__body h2 { margin: 8px 0 6px; font-size: var(--fs-title2); font-weight: 700; letter-spacing: -0.01em; }
.sheet__intro { margin: 0 0 14px; color: var(--label-2); font-size: var(--fs-callout); }
.sheet__links { margin-top: 8px; font-size: var(--fs-footnote); line-height: 1.7; }
.sheet__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

label.field { display: block; font-size: var(--fs-footnote); font-weight: 600; color: var(--label-2); margin: 14px 0 6px; }
select, input[type="text"], input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--separator);
  background: var(--bg);
  color: var(--label);
  font-size: var(--fs-body);
}
.divider { text-align: center; color: var(--label-2); font-size: var(--fs-footnote); margin: 18px 0 2px; }

.suggest {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow: auto;
  background: var(--card);
}
.suggest:empty { display: none; }
.suggest li { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; cursor: pointer; font-size: var(--fs-callout); border-bottom: 1px solid var(--separator); }
.suggest li:last-child { border-bottom: none; }
.suggest li:hover, .suggest li:focus-visible { background: var(--fill); }
.address-result { margin-top: 8px; font-size: var(--fs-callout); }
.address-result:empty { display: none; }