/* ---------- design tokens ---------- */

:root {
  --bg: #f4f5f9;
  --surface: #ffffff;
  --border: #e7e9f0;
  --border-strong: #d9dce6;
  --text: #16192b;
  --text-2: #5b6274;
  --text-3: #9096a8;
  --accent: #4f46e5;
  --accent-soft: #eef2ff;
  --accent-hover: #4338ca;
  --green: #067a46;   --green-bg: #e4f7ec;
  --amber: #92510a;   --amber-bg: #fdf0dd;
  --red: #b0203a;     --red-bg: #fde8ec;
  --violet: #5b3fbd;  --violet-bg: #efeafc;
  --blue: #1c56b8;    --blue-bg: #e5efff;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(22, 25, 43, .04), 0 4px 16px rgba(22, 25, 43, .05);
  --shadow-lg: 0 4px 12px rgba(22, 25, 43, .06), 0 16px 40px rgba(22, 25, 43, .10);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(1200px 400px at 50% -200px, #e9ebfa 0%, transparent 70%),
    var(--bg);
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 26px 0 18px; }
h1 .muted { font-weight: 500; }
h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 28px 0 10px; }

.muted { color: var(--text-3); }

/* ---------- icons ---------- */

.icon { flex: none; vertical-align: -3px; }

/* Section headings carry the accent of the data source behind them: VZD
   deals, forced-sale auctions and portal adverts are different worlds and
   should not look interchangeable. */
.sect { display: flex; align-items: center; gap: 8px; }
.sect .icon { color: var(--text-3); }
.sect-deals .icon { color: var(--blue); }
.sect-auctions .icon { color: var(--amber); }
.sect-listings .icon { color: var(--violet); }
.sect-valuation .icon { color: var(--accent); }
.sect-warning .icon { color: var(--red); }
.sect-market .icon { color: var(--green); }

code {
  background: #eef0f6;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

/* beside the sidebar the content owns the rest of the width, so the margin
   is no longer what centres it */
.container { flex: 1; min-width: 0; max-width: 1240px; margin: 0 auto; padding: 4px 28px 56px; }

/* ---------- side navigation ---------- */

/* The nav outgrew a single row of links: sixteen destinations in a bar is a
   list nobody reads. Grouped down the side, each section is a question someone
   arrives with rather than a table behind it. */
.shell { display: flex; align-items: stretch; min-height: 100vh; }

.sidenav {
  position: sticky;
  top: 0;
  z-index: 50;
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100vh;
  /* The SECTIONS scroll, not the whole sidebar. With eight sections the foot
     scrolled off the bottom, taking the sign-out button and the guide link
     with it — the two things always worth being able to reach. */
  overflow: hidden;
  padding: 18px 14px 14px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-right: 1px solid var(--border);
}

.sidenav .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 750;
  font-size: 15.5px;
  letter-spacing: -.02em;
  color: var(--text);
  padding: 0 8px;
}
.sidenav .brand-mark { box-shadow: 0 2px 8px rgba(79, 70, 229, .35); }

.sidenav nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;      /* without this a flex child refuses to shrink and scroll */
  overflow-y: auto;
}

.nav-section { display: flex; flex-direction: column; gap: 1px; }
.nav-section-title {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 10px 5px;
}

.sidenav a:not(.brand) {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-2);
  font-weight: 550;
  font-size: 13.5px;
  padding: 7px 10px;
  border-radius: 9px;
  transition: background .15s, color .15s;
}
.sidenav a:not(.brand) .icon { color: var(--text-3); transition: color .15s; flex: none; }
.sidenav a:not(.brand):hover { color: var(--text); background: #eef0f6; }
.sidenav a:not(.brand):hover .icon { color: var(--text-2); }
.sidenav a.active { color: var(--accent); background: var(--accent-soft); }
.sidenav a.active .icon { color: var(--accent); }

.nav-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 10px 0;
  border-top: 1px solid var(--border);
}
.nav-foot .muted { font-size: 12px; overflow-wrap: anywhere; }

/* the toggle and its scrim only exist below the breakpoint */
.nav-open, .nav-scrim { display: none; }

@media (max-width: 1000px) {
  .sidenav {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(15, 18, 34, .18);
  }
  .nav-toggle:checked ~ .sidenav { transform: translateX(0); }
  .nav-toggle:checked ~ .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 18, 34, .35);
  }
  .nav-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 8px 0 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
  }
}

.linklike {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 6px 13px;
  border-radius: 9px;
  transition: all .15s;
}
.linklike:hover { color: var(--red); border-color: #f2c2cc; background: var(--red-bg); }

/* ---------- cards & stats ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* stacked cards need air between them — without this the valuation page's
   notice, estimate and warning cards read as one block */
.card + .card { margin-top: 14px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 22px; }

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat b {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* the glyph sits above the number so the tiles read as four different things,
   not four identical boxes */
.stat .icon { color: var(--text-3); margin-bottom: 2px; }
.stat-deals .icon { color: var(--blue); }
.stat-auctions .icon { color: var(--amber); }
.stat-listings .icon { color: var(--violet); }
.stat-company .icon { color: var(--green); }

/* ---------- tables ---------- */

/* Tables size to their content: a 3-column table stays compact instead of
   flinging its numbers across the page; wide ones still fill and scroll
   inside .scroll. Cells that may hold long text opt out via .wrap. */
/* Block, not inline-block. As an inline-block the card shrink-wrapped whatever
   table it held, so a page carrying a seven-column table of deals and a plain
   full-width table showed two cards of different widths with a stripe of empty
   background beside the narrower one. Every other card on the site fills its
   column; these now do too, and the table inside fills the card. */
.table-card { display: block; max-width: 100%; min-width: 0; overflow: hidden; margin-bottom: 22px; }

/* A coloured top edge tells the data source apart at a glance: without it a
   table of VZD deals and a table of forced-sale auctions are the same grey
   grid. The colour repeats the section heading's icon, never stands alone. */
.table-card.tone-deals { border-top: 3px solid var(--blue); }
.table-card.tone-auctions { border-top: 3px solid var(--amber); }
.table-card.tone-listings { border-top: 3px solid var(--violet); }
.table-card.tone-market { border-top: 3px solid var(--green); }

.table-card .scroll { overflow-x: auto; }

/* Fills the card, and scrolls only when it genuinely does not fit.
   `width: auto` alone sized the table to its content, which is right on a
   phone and wrong on a desk: a seven-column table of deals stopped two thirds
   of the way across the card and left a stripe of empty white beside it, while
   the plain tables elsewhere on the same page ran the full width. min-width
   keeps the nowrap cells from being squashed on a narrow screen — below that
   the container scrolls, exactly as before. */
.table-card table { width: 100%; min-width: max-content; }
.table-card th, .table-card td { white-space: nowrap; padding-right: 34px; }
.table-card th:last-child, .table-card td:last-child { padding-right: 16px; }
.table-card td.wrap { white-space: normal; }

table { width: 100%; border-collapse: collapse; background: transparent; }

th, td { padding: 11px 14px; text-align: left; vertical-align: middle; }

thead th {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  background: #fafbfd;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td { border-bottom: 1px solid #f0f1f6; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f8f9fe; }

td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A right-aligned column of figures under a left-aligned heading reads as two
   separate things. The markup has been asking for this in three views; only
   `td.num` was ever defined, so the headings stayed where they were. */
th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td .price { font-weight: 650; }

/* Lining figures WITHOUT the right alignment: a lone value in a label/value
   row belongs next to its label, not flung against the far edge of the card.
   `num` there put a registration number half a screen from "Reģistrācijas
   numurs". */
.figure { font-variant-numeric: tabular-nums; }

table.kv { border: none; }
table.kv th, table.kv td { padding: 8px 0; border-bottom: 1px solid #f0f1f6; }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: none; }
table.kv th {
  width: 165px;
  color: var(--text-3);
  font-weight: 550;
  font-size: 13px;
  background: none;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2.5px 10px 2.5px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.badge-completed { background: var(--green-bg); color: var(--green); }
.badge-running   { background: var(--blue-bg); color: var(--blue); }
.badge-blocked   { background: var(--amber-bg); color: var(--amber); }
.badge-failed    { background: var(--red-bg); color: var(--red); }
.badge-archive   { background: var(--violet-bg); color: var(--violet); }

/* ---------- filters & forms ---------- */

.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

/* The search field takes the room its row has left rather than sitting at a
   fixed width: on a page whose only filter is the search, a 220px box in a
   1200px card reads as an afterthought. */
.filters-q {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13.5px;
  flex: 1 1 260px;
  min-width: 220px;
}

/* the wrapper the dropdown is positioned against has to grow with it */
.filters .entity-search-wrap { flex: 1 1 260px; max-width: none; }
.filters-q:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}

.filters select,
.filters input[type="number"] {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  /* 150px cut "Komerctelpas (1 152)" to "Komerctelpas (1" — a truncated
     option is worse than a wide one. Number inputs keep the old cap; selects
     size to their longest label and the row simply wraps. */
  max-width: 150px;
  transition: border-color .15s, box-shadow .15s;
}
.filters select { max-width: none; }
.filters select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239096a8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.filters select:focus, .filters input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}

.range { display: inline-flex; align-items: center; gap: 4px; }
.range input[type="number"] { max-width: 92px; }
.range-dash { color: var(--text-3); }

.filters-reset { font-size: 13px; font-weight: 550; color: var(--text-2); margin-left: 2px; }
.filters-reset:hover { color: var(--red); }

.filters-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.filters-check input { accent-color: var(--accent); }

.hero-btn { margin-left: auto; align-self: center; }

.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; display: block; }

/* stacked filter bar: row 1 = what, row 2 = ranges + actions */
.filters-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.filters-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.filters-spacer { margin-left: auto; }
.filters-sort { min-width: 175px; }

/* .table-fit is the historical alias — behavior now lives on .table-card */

/* checkbox-dropdown */
.msel { position: relative; }
.msel summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text);
  user-select: none;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239096a8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  transition: border-color .15s, box-shadow .15s;
}
.msel summary::-webkit-details-marker { display: none; }
.msel[open] summary, .msel summary:hover { border-color: var(--accent); }
.msel[open] summary { box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); }
.msel.msel-active summary { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.msel-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
}

.msel-search {
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}
.msel-search:focus { outline: none; border-color: var(--accent); }

.msel-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  transition: background .1s;
}
.msel-option:hover { background: #f4f5fb; }
.msel-option[hidden] { display: none; }
.msel-option input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; margin: 0; }

.msel-empty { padding: 8px; color: var(--text-3); font-size: 13px; }

.filters input[type="submit"],
.btn {
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
  box-shadow: 0 1px 3px rgba(79, 70, 229, .35);
}
.filters input[type="submit"]:hover, .btn:hover { background: var(--accent-hover); color: #fff; }
.filters input[type="submit"]:active, .btn:active { transform: translateY(1px); }

/* ---------- pagination ---------- */

.pagination { display: flex; gap: 10px; padding: 18px 0; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pagination a {
  padding: 7px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 550;
  transition: all .15s;
}
.pagination a:hover { border-color: var(--accent); background: var(--accent-soft); }
.pagination span { color: var(--text-3); padding: 0 6px; }

/* ---------- listing detail ---------- */

.backlink { display: inline-block; margin-top: 18px; font-weight: 550; font-size: 13px; }

.detail-grid { display: grid; grid-template-columns: minmax(340px, 5fr) 7fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }

.panel { padding: 18px 20px; }
.panel h2:first-child { margin-top: 0; }

.price-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f0f1f6;
}
.price-hero b { font-size: 28px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-hero span { color: var(--text-3); font-size: 14px; }

.prose { color: var(--text); }
.prose p { margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- photo gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.gallery a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #eef0f6;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.gallery a:hover img { transform: scale(1.04); }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 12, 24, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lightbox-in .18s ease;
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox img {
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 80px);
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  user-select: none;
}
@media (max-width: 700px) { .lightbox img { max-width: calc(100vw - 20px); } }

.lightbox button {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}
.lightbox button:hover { background: rgba(255, 255, 255, .22); }
.lightbox button:active { transform: scale(.94); }

.lightbox-close {
  top: 18px;
  right: 20px;
  width: 42px;
  height: 42px;
  font-size: 26px;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 34px;
  line-height: 1;
  padding-bottom: 4px;
}
.lightbox-nav:active { transform: translateY(-50%) scale(.94); }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }

.lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .1);
  padding: 5px 14px;
  border-radius: 999px;
}

/* ---------- valuation ---------- */

.valuation-form { margin-bottom: 20px; }

/* valuation form: a 12-column grid, fields opt into widths via vf-span-N */
.vf-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px 16px;
  align-items: end;
}
.vf-span-2 { grid-column: span 2; }
.vf-span-3 { grid-column: span 3; }
.vf-span-6 { grid-column: span 6; }
.vf-form-grid label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.vf-form-grid input[type="text"],
.vf-form-grid input[type="number"],
.vf-form-grid select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text);
}
.vf-form-grid select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239096a8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.vf-form-grid input:focus, .vf-form-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.vf-form-grid .vf-submit { display: flex; justify-content: flex-end; }
.vf-form-grid .vf-submit .btn { padding: 10px 30px; }
.vf-address-wrap { position: relative; }
@media (max-width: 1000px) {
  .vf-form-grid { grid-template-columns: repeat(6, 1fr); }
  .vf-span-6 { grid-column: span 6; }
  .vf-span-3 { grid-column: span 3; }
  .vf-span-2 { grid-column: span 3; }
}

.vf-grid {
  display: grid;
  grid-template-columns: minmax(280px, 2.2fr) .9fr .7fr 1.1fr auto;
  gap: 14px;
  align-items: end;
}
.vf-grid-6 { grid-template-columns: minmax(240px, 2fr) .8fr .6fr 1fr .9fr auto; }
.vf-grid-wrap { grid-template-columns: minmax(200px, 1.8fr) .7fr .5fr .85fr .95fr .8fr .75fr .85fr auto; }
@media (max-width: 1100px) { .vf-grid-wrap { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .vf-grid { grid-template-columns: 1fr 1fr; } }

.vf-grid label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vf-grid input[type="text"],
.vf-grid input[type="number"],
.vf-grid select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.vf-grid input:focus, .vf-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.vf-submit .btn { padding: 10px 26px; }

.vf-address { position: relative; }
.ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ac-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 13px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.ac-option:hover { background: var(--accent-soft); }
/* keyboard highlight has to match the hover, or arrowing down and hovering
   look like two different selections */
.ac-option-active { background: var(--accent-soft); }

/* company/owner suggestions carry a second line: the registration number, or
   the birthday and how many firms the person is behind */
.ac-sub { display: block; font-size: 12px; margin-top: 1px; }
.ac-person { font-style: italic; }
/* the wrapper has to grow, or the positioned dropdown is as narrow as an
   unstyled input and the names wrap onto three lines each */
.entity-search-wrap { flex: 1 1 420px; max-width: 640px; }
.entity-search-wrap .filters-q { width: 100%; }

/* spacing comes from `.card + .card` — a margin here would double it */
.estimate-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.estimate-range {
  font-size: 32px;
  font-weight: 750;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.estimate-center { color: var(--text-2); margin-top: 2px; }
.estimate-meta { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.estimate-deal {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--green-bg);
  color: var(--green);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.estimate-deal b { font-variant-numeric: tabular-nums; }
.estimate-deal .muted { color: inherit; opacity: .75; }

.estimate-kicker {
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}

/* Forced-sale value is a secondary figure — it must not compete with the
   market value above it, so the hero number steps down a size. */
.panel-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}
.forced-sale .estimate-range { font-size: 24px; }
.forced-sale .table-card { margin-top: 6px; }
.fs-table-caption { margin: 16px 0 0; font-size: 12.5px; }

/* the object-card link rides next to the address so it is reachable without
   scanning to the far end of a wide table */
.row-object { font-size: 11.5px; white-space: nowrap; margin-left: 6px; }

.verdict {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}
/* Warning banners flow as text, never as a flex row: they carry <b> and
   numbers mid-sentence, and a flex container lays every inline run out as its
   own column, shredding the sentence into unreadable stripes.
   The icon carries the colour, so it must not inherit the muted section tint. */
.verdict .icon { vertical-align: -3px; margin-right: 6px; color: currentColor; }
/* a second, weaker caveat in the same banner reads as its own line rather
   than running on from the sentence before it */
.verdict-note { display: block; margin-top: 8px; }
.verdict-failed .icon { color: var(--red); }
.verdict-blocked .icon { color: var(--amber); }
.verdict-completed .icon { color: var(--green); }

.verdict b { font-variant-numeric: tabular-nums; }
.verdict-completed { background: var(--green-bg); color: var(--green); }
.verdict-blocked { background: var(--amber-bg); color: var(--amber); }
.verdict-failed { background: var(--red-bg); color: var(--red); }

.components { margin-top: 14px; }
.components th { width: 240px; }

.estimate-caveat { margin: 14px 0 0; font-size: 12.5px; }
.btn-pdf { display: inline-block; text-align: center; color: #fff; }
.btn-pdf:hover { color: #fff; }

/* ---------- market chart ---------- */

.chart-card { padding: 18px 18px 12px; margin-bottom: 22px; }
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; }

.chart-grid { stroke: #eef0f5; stroke-width: 1; }
.chart-axis { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-end-label { fill: var(--text-2); font-size: 11.5px; font-weight: 600; }
.chart-crosshair { stroke: #c9cede; stroke-width: 1; pointer-events: none; }

.chart-tooltip {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px 12px;
  font-size: 12.5px;
  white-space: nowrap;
}
.chart-tip-title { color: var(--text-3); font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.chart-tip-row { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.chart-tip-row b { font-variant-numeric: tabular-nums; }
.chart-tip-key { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.chart-tip-name { color: var(--text-3); }

.chart-legend { display: flex; gap: 18px; padding: 10px 4px 2px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.chart-legend-key { width: 14px; height: 2px; border-radius: 1px; }

/* ---------- data map ---------- */

.map-card { position: relative; overflow: hidden; }
.map-container { height: calc(100vh - 260px); min-height: 460px; }
.map-container .leaflet-container { font: inherit; }

.map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px;
  cursor: pointer;
}
.map-toggle input { accent-color: var(--accent); margin: 0; }
.map-toggle:has(input:checked) { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 11.5px;
  box-shadow: var(--shadow);
}
.map-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
.map-legend-item i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #fff; }

.map-popup { font-size: 13px; line-height: 1.45; }
.map-popup b { display: block; margin-bottom: 2px; }
.map-popup-price { font-weight: 650; font-variant-numeric: tabular-nums; margin: 3px 0; }

/* ---------- errors & flash ---------- */

details summary { cursor: pointer; font-weight: 600; color: var(--red); }
.errors { margin: 8px 0 2px; padding-left: 18px; }
.errors li { margin-bottom: 5px; font-size: 12.5px; }

.flash { padding: 11px 16px; border-radius: var(--radius-sm); margin: 14px 0; font-weight: 550; }
.flash.notice { background: var(--green-bg); color: var(--green); }
.flash.alert { background: var(--red-bg); color: var(--red); }

/* ---------- login ---------- */

.devise-form {
  max-width: 380px;
  margin: 11vh auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 34px 34px 30px;
  box-shadow: var(--shadow-lg);
}
.devise-form h1 { margin: 0 0 22px; font-size: 21px; display: flex; align-items: center; gap: 10px; }
/* The mark on the sign-in page is the real file now, so it only needs sizing.
   The gradient square that used to live here was a stand-in nobody had
   replaced: the right colours, the wrong shape, and no V in it. */
.devise-form h1 .brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(99, 102, 241, .45);
}
.devise-form .field { margin-bottom: 15px; }
.devise-form label { display: block; margin-bottom: 6px; color: var(--text-2); font-size: 13px; font-weight: 550; }
.devise-form input[type="email"],
.devise-form input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.devise-form input[type="email"]:focus,
.devise-form input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.devise-form input[type="submit"] {
  width: 100%;
  padding: 11px;
  margin-top: 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
}
.devise-form input[type="submit"]:hover { background: var(--accent-hover); }
.devise-form .remember { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }

/* Market and kind lead the filter row: together they decide what the rest of
   the filters can even contain, so they read as the first two choices rather
   than two more chips among nine. */
.filters select.filter-region { font-weight: 600; border-color: var(--accent, #4f46e5); }
.dim { color: var(--text-3, #8a8a99); }

/* ---------- Spain ---------- */

/* The reservations list carries the honest half of a Spanish valuation, so it
   reads as prose rather than as a footnote — same size as body text, with the
   marker pulled out of the flow. */
.caveats { margin: 0; padding: 0; list-style: none; }
.caveats li {
  position: relative;
  padding: 0 0 0 20px;
  color: var(--text-2);
  line-height: 1.55;
}
.caveats li + li { margin-top: 10px; }
.caveats li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

/* A referencia catastral is 20 characters with no spaces, so it runs into the
   next column where the short labels of every other kv table do not. */
/* `table.kv th` sets `padding: 8px 0` and outranks a lone `.kv-refs th`, so
   the table element has to be named here too or the padding never lands. */
table.kv.kv-refs th { padding-right: 24px; white-space: nowrap; }
table.kv.kv-refs td { width: 100%; }

/* The year-by-year figures are a real grid rather than label/value pairs, so
   the columns have to share the width instead of the first one taking it. */
table.kv.kv-years th,
table.kv.kv-years td { width: auto; white-space: nowrap; }
/* The year column stays as narrow as its content; the three figure columns
   split what is left, which keeps each heading directly over its own numbers
   instead of stranded halfway across the card. */
table.kv.kv-years thead th:first-child,
table.kv.kv-years tbody th { width: 1%; padding-right: 32px; }
table.kv.kv-years thead th { font-weight: 600; color: var(--muted); }
table.kv.kv-years thead th.num,
table.kv.kv-years td.num { width: 33%; }

/* Which row of the zone price table the valuation actually used — otherwise
   the table shows a dozen numbers and no clue which one produced the answer. */
.row-used > td { background: var(--accent-soft); }
.row-used > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- forms: stacked fields, section grants ---------- */

/* A form whose rows read down the page rather than running together. */
.stack { display: flex; flex-direction: column; gap: 18px; }

.stack > label { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.stack > label > span:first-child { font-weight: 600; color: var(--text-2); font-size: 13px; }

.stack input[type="email"],
.stack input[type="password"],
.stack input[type="text"] {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  color: var(--text);
}

.stack input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The grants. Laid out as a card per section rather than a row of checkboxes:
   inline, the section names and their page lists ran into one paragraph and
   there was no telling where one section ended and the next began. */
.sections { border: 0; padding: 0; margin: 0; }

.sections legend {
  padding: 0;
  font-weight: 600;
  color: var(--text-2);
  font-size: 13px;
  margin-bottom: 10px;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.section-grant {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.section-grant:hover { border-color: var(--border-strong); }

/* :has lets the whole card show it is ticked, not just the box. */
.section-grant:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.section-grant input { margin: 3px 0 0; grid-row: 1 / span 2; }
.section-grant .grant-name { font-weight: 600; }
.section-grant .grant-pages { color: var(--text-3); font-size: 12.5px; line-height: 1.45; }

/* The administrator box is not one of the sections and should not sit in
   their grid: it overrides the lot. */
.grant-admin {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: start;
  padding: 11px 13px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.grant-admin:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.grant-admin input { margin: 3px 0 0; grid-row: 1 / span 2; }

.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions form { margin: 0; }

/* Shown once and never again, so it should look like something to act on. */
.password-once { padding: 16px 18px; border-color: var(--accent); background: var(--accent-soft); }
.password-once p { margin: 0 0 6px; }
.password-once .password-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  user-select: all;
}

.row-actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.row-actions form { margin: 0; }

/* Rails' check_box emits a hidden field alongside the box so an unticked value
   still posts. In a grid that hidden input is a child like any other and takes
   the first cell, pushing the label onto its own line. */
.grant-admin input[type="hidden"] { display: none; }

/* .stack keeps its text fields narrow and stacks their caption above the
   input. The grant box is neither: it needs the full width and its own two
   columns, and `.stack > label` outranks a bare class, so it is named here
   with the same weight rather than repeated with !important. */
.stack > label.grant-admin {
  max-width: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: start;
}

/* ---------- the guide ---------- */

/* Prose, not a table. A line of text is readable up to about 74 characters;
   across the full width of a desktop card the eye loses the next line. */
.guide { padding: 20px 24px; }
.guide > * { max-width: 74ch; }
.guide p { margin: 0 0 12px; color: var(--text-2); }
.guide p:last-child { margin-bottom: 0; }
.guide b { color: var(--text); font-weight: 650; }

.guide-block { scroll-margin-top: 18px; }
.guide-sub { font-size: 14px; color: var(--text-2); margin: 20px 0 10px; }

/* The opening card carries the contents index, so it earns a little more
   presence than the cards below it. */
.guide-hero {
  padding: 22px 24px;
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 70%);
  border-color: #dcdcfb;
}
.guide-lead { max-width: 74ch; margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; }

.guide-toc { display: flex; flex-wrap: wrap; gap: 7px; }
.guide-toc a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid #dcdcfb;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 550;
  transition: background .15s, color .15s, border-color .15s;
}
.guide-toc a:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.guide-toc .icon { color: var(--text-3); }
.guide-toc a:hover .icon { color: var(--accent); }

/* The one rule everything else depends on. It is a claim, not a paragraph,
   and it should not have to compete with the paragraphs around it. */
.guide-key {
  border: 1px solid #dcdcfb;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: 16px 20px;
  margin-bottom: 14px;
}
.guide-key p { margin: 0; max-width: 74ch; color: var(--text-2); }
.guide-key-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text) !important;
  margin-bottom: 6px !important;
  letter-spacing: -.01em;
}

/* A practical instruction, distinct from the explanation above it. */
.guide-tip {
  border: 1px solid #cfe6d8;
  border-radius: var(--radius);
  background: var(--green-bg);
  padding: 14px 18px;
  margin-top: 14px;
}
.guide-tip p { margin: 0; max-width: 74ch; color: #1d5c3d; }
.guide-tip b { color: #0c3f28; }

.guide-claim { font-size: 15px; font-weight: 650; color: var(--text) !important; }

/* Numbered steps, so the sequence reads as a sequence. */
.guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.guide-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
  color: var(--text-2);
  max-width: 74ch;
}
.guide-steps li:last-child { margin-bottom: 0; }
.guide-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Three parallel things belong side by side, not stacked in one paragraph:
   the layout is the explanation that they carry equal weight.

   Nested INSIDE the card rather than being three cards of their own. As cards
   they inherited `.card + .card { margin-top }`, which applies to siblings and
   therefore staggered the second and third down a step each — a row of three
   that did not line up. A tinted box inside the card cannot do that, and it
   also stops the page reading as card upon card upon card. */
.guide-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 18px 0;
  max-width: none;      /* the prose measure does not apply to a row of boxes */
}
.guide-source {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafbfe;
}
.guide-source p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.guide-source-name {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.guide-source-name::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 9px;
}
.guide-trio .guide-source:nth-child(2) .guide-source-name::before { background: var(--blue); }
.guide-trio .guide-source:nth-child(3) .guide-source-name::before { background: var(--green); }

.guide-limits ul { list-style: none; margin: 0 0 12px; padding: 0; }
.guide-limits li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: var(--text-2);
  max-width: 74ch;
}
.guide-limits li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  opacity: .55;
}

/* The guide sits below the sections rather than inside one. */
.nav-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 550;
}
.nav-guide .icon { color: var(--text-3); }
.nav-guide:hover { background: var(--accent-soft); color: var(--accent); }
.nav-guide:hover .icon { color: var(--accent); }
.nav-guide.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-guide.active .icon { color: var(--accent); }
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */