/* Wrenna design system, from the "Wrenna portal" canvas: D2 mark, sage palette,
   Fraunces headings with Manrope text (the canvas's default pairing). */

/* Fonts are self-hosted: loading them from Google would send every visitor's IP address
   to a third party. Files from Google Fonts (SIL Open Font License), split the way Google
   splits them: "latin" covers ó, ³, ± and punctuation; "latin-ext" covers ą ę ł ń ś ź ż ć.
   unicode-range lets the browser download latin-ext only when a page needs it.
   Manrope is a variable font, so one file serves every weight from 400 to 700. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #1D231D;
  --ink-muted: #4E564C;
  --ink-subtle: #596157;
  --paper: #F5F4EE;
  --surface: #FFFFFF;
  --line: #DEDDD2;
  --line-strong: #CFCFC4;

  --sage-50: #F1F4EE;
  --sage-100: #E3E9DE;
  --sage-200: #C9D5C0;
  --sage-300: #AEBFA4;
  --sage-500: #728A68;
  --sage-700: #465842;
  --sage-800: #354235;
  --sage-900: #243024;
  --on-sage-100: #2F3D2C;

  --clay: #B4572A;
  --clay-50: #F8ECE5;
  --clay-800: #7A3418;
  --water: #2E5E8C;

  --accent: var(--sage-700);
  --accent-hover: var(--sage-900);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-wordmark: "IBM Plex Sans", "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5.5vw, 80px);
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-float: 0 12px 32px -12px rgba(36, 48, 36, 0.35);

  /* Bootstrap bridge: pages still built from Bootstrap classes pick up the palette */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-secondary-color: var(--ink-subtle);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 70, 88, 66;
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: 36, 48, 36;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 70, 88, 66;
}

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 70, 88, 66;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sage-500);
  box-shadow: 0 0 0 0.2rem rgba(70, 88, 66, 0.25);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.alert-success {
  --bs-alert-color: var(--on-sage-100);
  --bs-alert-bg: var(--sage-100);
  --bs-alert-border-color: var(--sage-200);
}

/* Base */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid var(--sage-500);
  outline-offset: 2px;
}

.num {
  font-variant-numeric: tabular-nums;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--sage-900);
  color: #FFFFFF;
}

.skip-link:focus {
  top: 16px;
  color: #FFFFFF;
}

/* The D2 mark with its "renna" wordmark */

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--sage-900);
  text-decoration: none;
}

.brand:hover {
  color: var(--sage-900);
}

.brand-mark {
  display: block;
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-wordmark);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Buttons */

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button--primary {
  background: var(--accent);
  color: #FFFFFF;
}

.button--primary:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
}

.button--secondary {
  background: var(--surface);
  border-color: var(--sage-200);
  color: var(--sage-900);
}

.button--secondary:hover {
  background: var(--sage-50);
  color: var(--sage-900);
}

/* A button beside a field, as small as a touch allows */
.button--small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

.button--large {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 16px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Account menu (both headers) */

.account-menu {
  position: relative;
}

.account-menu > summary {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
}

.account-menu-name {
  margin-bottom: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-subtle);
}

.account-menu-panel form {
  margin: 0;
}

.account-menu-panel a,
.account-menu-panel button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu-panel a:hover,
.account-menu-panel button:hover {
  background: var(--sage-50);
}

/* Public site */

.site-header {
  min-height: 88px;
  padding: 12px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 48px;
}

.site-nav {
  flex-grow: 1;
  display: flex;
  gap: 8px;
}

.site-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--sage-100);
  color: var(--sage-900);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
}

.page h1,
.portal-main h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.site-footer {
  min-height: 80px;
  padding: 16px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-subtle);
}

.site-footer p {
  flex-grow: 1;
  margin: 0;
}

.site-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-subtle);
}

@media (max-width: 960px) {
  .site-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
}

/* Home page */

.full-bleed {
  flex: 1 0 auto;
}

.eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero {
  padding: 48px var(--gutter) 96px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 64px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.lead {
  max-width: 540px;
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.compare-preview {
  position: relative;
  height: 540px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #B7BD98;
  box-shadow: 0 24px 48px -24px rgba(36, 48, 36, 0.45);
}

.compare-preview svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.compare-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 52%);
}

.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 52%;
  width: 3px;
  margin-left: -1.5px;
  background: #FFFFFF;
}

.compare-handle {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(29, 35, 29, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-handle svg {
  position: static;
  width: 20px;
  height: 20px;
}

.compare-date {
  position: absolute;
  top: 20px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(29, 35, 29, 0.8);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.compare-date--before { right: calc(48% + 12px); }
.compare-date--after { left: calc(52% + 12px); }

.sample-pill {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sage-800);
  font-size: 12px;
  font-weight: 600;
}

.compare-summary {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.compare-summary-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--ink-subtle);
}

.compare-summary-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-note {
  color: var(--ink-subtle);
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.swatch--cut { background: var(--clay); }
.swatch--fill { background: var(--water); }

.section {
  padding: 80px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section--white {
  background: var(--surface);
}

.section-heading {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section h2,
.contact-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.step {
  padding: 28px;
  border-radius: 16px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.step h3,
.feature h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
}

.step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.feature {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature h3 {
  font-size: 21px;
}

.feature p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.section--dark {
  background: var(--sage-900);
  color: #F1F4EE;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 64px;
}

.section--dark .eyebrow { color: var(--sage-300); }
.section--dark h2 { color: #FFFFFF; }

.section-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section--dark .section-copy p:last-child {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: #CDD7C6;
}

.specs {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #3A4A39;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

.spec {
  padding: 22px 24px;
  background: #2B382B;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spec dt {
  font-size: 13px;
  font-weight: 400;
  color: var(--sage-300);
}

.spec dd {
  margin: 0;
  font-size: 22px;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.contact {
  padding: 80px var(--gutter);
}

.contact-card {
  padding: 56px;
  border-radius: 24px;
  background: var(--sage-100);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 48px;
}

.contact-card > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--sage-800);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  color: var(--sage-900);
}

.contact-details a {
  color: inherit;
}

@media (max-width: 1100px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero,
  .section--dark,
  .contact-card {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero { padding-bottom: 64px; }
  .compare-preview { height: 420px; }
  .contact-card { padding: 32px; }
}

@media (max-width: 760px) {
  .steps,
  .features { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .compare-date { top: 60px; }
}

/* Portal (logged-in app) */

.portal-header {
  min-height: 72px;
  padding: 12px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 40px;
}

.portal-nav {
  flex-grow: 1;
  display: flex;
  gap: 4px;
}

.portal-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}

.portal-nav a:hover {
  background: var(--sage-50);
  color: var(--sage-900);
}

.portal-nav a[aria-current="page"] {
  background: var(--sage-100);
  color: var(--sage-900);
}

.org-badge {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
  white-space: nowrap;
}

.org-badge-initials {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--sage-100);
  color: var(--on-sage-100);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.org-badge-more {
  color: var(--ink-subtle);
}

.portal-main {
  flex: 1 0 auto;
  padding: 28px 40px 40px;
}

.portal-footer {
  padding: 12px 40px;
  display: flex;
  flex-wrap: wrap;
  /* The links are 44 px tall (touch targets); without this the © text sat at the top of the row */
  align-items: center;
  gap: 4px 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-subtle);
}

.portal-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-subtle);
}

@media (max-width: 760px) {
  .portal-header { padding: 12px 16px; }
  .portal-nav { order: 3; width: 100%; overflow-x: auto; }
  .portal-main { padding: 20px 16px 32px; }
  .portal-footer { padding: 8px 16px; }
}

/* Portal pages: Pulpit and the site view */

.page-head {
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.page-head > div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-head h1 {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
}

.page-kicker {
  font-size: 14px;
  color: var(--ink-subtle);
}

.trail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-subtle);
}

.trail a {
  color: var(--ink-subtle);
}

.panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.dashboard h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
}

.panel-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.panel-empty {
  margin: 0;
  font-size: 14px;
  color: var(--ink-subtle);
}

.empty-state {
  margin: 0;
  padding: 28px;
  border: 2px dashed var(--sage-200);
  border-radius: var(--radius-lg);
  background: #F8FAF6;
  color: var(--ink-muted);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill--ready { background: var(--sage-100); color: var(--on-sage-100); }
.status-pill--processing { background: #FBF0D9; color: #7A4F0E; }
.status-pill--error { background: #F6E1DC; color: #8E2B1F; }
.status-pill--none { background: #ECEBE4; color: var(--ink-muted); }
/* Finished, but nothing for the map: only files to download (the original photos, say) */
.status-pill--files { background: #E3EBF3; color: #24496D; }

.stats {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stat {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-label,
.stat-note {
  font-size: 13px;
  color: var(--ink-subtle);
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat--alert { border-color: #E9C3BA; }
.stat--alert .stat-label,
.stat--alert .stat-value { color: #8E2B1F; }

.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 24px;
}

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

.site-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.site-card-media {
  position: relative;
  height: 132px;
  background: var(--sage-50);
}

.terrain-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.site-card-media .status-pill {
  position: absolute;
  top: 12px;
  left: 12px;
}

/* The site's picture (Pages/sites/Index, Picture): fills the box, cropped to fit. Around a
   survey, an orthophoto is see-through, and the box's colour shows. */
.site-card-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A colour an admin chose instead of a picture (an SVG's fill: no style="" under the CSP) */
.site-card-colour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Over a picture or a colour, the pill's own colour keeps its text readable; an edge keeps it
   apart from a pale photo, a light colour or the light ground of an orthophoto. Boxes only: the
   list has neither. */
.site-grid:not(.site-grid--list) :is(.site-card-picture:not([hidden]), .site-card-colour) ~ .status-pill {
  box-shadow: 0 0 0 1px rgba(29, 35, 29, 0.12), 0 2px 6px rgba(29, 35, 29, 0.3);
}

.site-card-body {
  flex-grow: 1;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-card-body h3 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.site-card-meta {
  font-size: 13px;
  color: var(--ink-subtle);
}

/* Its own line under the name, cut short with "…" (the full address is in the title) */
.site-card-address {
  display: block;
  margin: 2px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-card-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.site-card-row span:first-child {
  color: var(--ink-subtle);
}

.card-link {
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* The Pulpit's sites as boxes or as a list (wwwroot/js/site-views.js). Both are the same cards:
   .site-grid--list alone lays them out as rows, so capture-progress.js finds the same pieces. */

/* The list's layout follows the room it has, not the window: beside the activity panel it has less */
.sites {
  container: sites / inline-size;
}

/* As tall as the switch (36px buttons in a 3px frame), so showing it doesn't move the page */
.sites-head {
  min-height: 44px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.sites-head h2 {
  margin: 0;
}

/* "Kafelki | Lista": two buttons in one frame, the chosen one filled in */
.view-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  background: var(--surface);
}

.view-switch[hidden] {
  display: none;
}

.view-switch-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.view-switch-button:hover {
  background: var(--sage-50);
  color: var(--sage-900);
}

/* The fill is faint against white: a darker ring marks the chosen one too. Forced colours (Windows'
   high contrast) drop fills and shadows: there it takes the system's own colours for something
   selected, and the outline stays free for the focus ring. */
.view-switch-button[aria-pressed="true"] {
  background: var(--sage-100);
  box-shadow: inset 0 0 0 1px var(--sage-500);
  color: var(--on-sage-100);
}

@media (forced-colors: active) {
  .view-switch-button[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* A long firm name wraps under itself, beside its label */
.site-grid:not(.site-grid--list) .site-card-org > span:last-child {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* "3 dni temu" after the date. The dot is only for the eye. */
.site-card-ago {
  color: var(--ink-subtle);
}

.site-card-ago::before {
  content: "· ";
  content: "· " / "";
}

/* What the newest published flight has to look at: "Ortofotomapa", "NMPT", "NMT" */
.product-tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-tag {
  padding: 2px 8px;
  border: 1px solid var(--sage-200);
  border-radius: 999px;
  background: var(--sage-50);
  color: var(--sage-800);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* The list: one framed row per site, no terrain picture, the status pill first */
.site-grid--list {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.site-grid--list .site-card {
  position: relative;
  display: grid;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.site-grid--list .site-card + .site-card {
  border-top: 1px solid var(--line);
}

/* Pointed at, or its link reached with the keyboard */
.site-grid--list .site-card:hover,
.site-grid--list .site-card:focus-within {
  background: var(--sage-50);
}

/* The card's pieces take places of their own in the row */
.site-grid--list .site-card-body {
  display: contents;
}

.site-grid--list .site-card-media {
  position: static;
  height: auto;
  background: none;
}

.site-grid--list :is(.terrain-lines, .site-card-picture, .site-card-colour) {
  display: none;
}

.site-grid--list .site-card-media .status-pill {
  position: static;
}

/* The name, and under it the address (cut short first) and count of flights on one line. The
   count's column is the flexible one: the name across both then never widens the address's. */
.site-grid--list .site-card-title {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
}

.site-grid--list .site-card-title h3 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.site-grid--list .site-card-address {
  margin: 0;
}

.site-grid--list .site-card-count {
  white-space: nowrap;
}

.site-grid--list .site-card-address + .site-card-count::before {
  content: "\00a0· ";
  content: "\00a0· " / "";
}

/* The arrow opens the site, and so does a click anywhere on its row */
.site-grid--list .card-link {
  margin: 0;
  min-height: 0;
  align-self: auto;
}

.site-grid--list .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* What has a tooltip or text to copy stays above the row's link: a click there doesn't open the site */
.site-grid--list :is(.site-card-address, .product-tag, .capture-progress-label) {
  position: relative;
  z-index: 1;
}

.site-grid--list .card-link-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* With room for them, columns that line up from row to row: each row is a subgrid of the list.
   The firm, when the cards name it (admins), goes under the name, where it takes no column. */
@container sites (width > 760px) {
  .site-grid--list {
    grid-template-columns: auto minmax(7rem, 1fr) auto auto auto;
    column-gap: 16px;
  }

  .site-grid--list .site-card {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }

  .site-grid--list .site-card-media { grid-area: 1 / 1 / span 2; }
  .site-grid--list .site-card-title { grid-area: 1 / 2; }
  .site-grid--list .site-card-org { grid-area: 2 / 2; margin-top: 2px; }
  .site-grid--list .site-card-flown { grid-area: 1 / 3 / span 2; }
  .site-grid--list .product-tags { grid-area: 1 / 4 / span 2; max-width: 14rem; }
  .site-grid--list .card-link { grid-area: 1 / -2 / span 2; }
  .site-grid--list .capture-progress { grid-area: 3 / 2 / auto / -1; margin-top: 6px; }

  .site-grid--list .site-card-org {
    justify-content: flex-start;
    gap: 6px;
  }

  /* The date, and how long ago under it. Its column says what it is: the label is for screen readers. */
  .site-grid--list .site-card-flown {
    display: block;
  }

  .site-grid--list .site-card-flown > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-grid--list .site-card-flown > span:last-child {
    display: flex;
    flex-direction: column;
  }

  .site-grid--list .site-card-ago::before {
    content: none;
  }
}

/* Narrower (phones, and beside the activity panel on a small screen): each row stacks its pieces,
   the name with only the arrow beside it, so it keeps the width; then the status and a line each,
   with its label */
@container sites (width <= 760px) {
  .site-grid--list {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-grid--list .site-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 10px;
  }

  .site-grid--list .site-card-title { grid-area: 1 / 1; }
  .site-grid--list .card-link { grid-area: 1 / 2; padding-top: 4px; }

  .site-grid--list .site-card-media,
  .site-grid--list .site-card-org,
  .site-grid--list .site-card-flown,
  .site-grid--list .product-tags,
  .site-grid--list .capture-progress {
    grid-column: 1 / -1;
  }

  .site-grid--list .site-card-row {
    justify-content: flex-start;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .view-switch-button,
  .site-grid--list .site-card {
    transition: background-color 0.15s ease;
  }
}

.activity {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.activity li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.activity time {
  width: 44px;
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 12px;
  color: var(--ink-subtle);
}

.activity strong {
  display: block;
  font-weight: 600;
}

.activity-text { color: var(--ink-muted); }
.activity-text--error { color: #8E2B1F; }

/* Site view: the map fills the window under the portal header; panels float over it */

.portal-main--map {
  padding: 0;
  display: flex;
}

.map-page {
  position: relative;
  flex-grow: 1;
  display: flex;
  min-height: 420px; /* a short window still gets a usable map */
}

.map-stage {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  padding: 32px;
  background: var(--sage-50);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.map-panels {
  position: absolute;
  top: 16px;
  max-height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* The space between panels belongs to the map */
  pointer-events: none;
}

.map-panels > * {
  pointer-events: auto;
}

.map-panels--start {
  left: 16px;
  width: 288px;
}

/* One scroll for the left column, its panels each at its own height: however short the window, however many
   flights and results, all of it is in reach, nothing squeezed out of sight. "Pomiary"'s title and tools stay
   at the column's top as its results scroll under them; focus going up them stops below. (On a phone the
   panels sit above the map, in the page's own scroll.) */
@media (min-width: 761px) {
  .map-panels--start {
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 160px;
  }

  .map-panels--start > * {
    flex-shrink: 0;
  }
}

.map-panels--end {
  right: 16px;
  width: 320px;
}

.map-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-float);
}

.map-title {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-title h1 {
  margin: 0;
  font-size: 24px;
}

/* Panels fold with <details>: no script needed, and the keyboard works */
.map-panel > summary {
  min-height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.map-panel > summary::-webkit-details-marker {
  display: none;
}

/* A chevron: down when folded, up when open */
.map-panel > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.map-panel[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.map-panel-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sage-100);
  color: var(--on-sage-100);
  font-size: 12px;
  letter-spacing: 0;
}

/* A long flight list scrolls inside its panel instead of running off the map */
.map-flights ol {
  max-height: min(60vh, calc(100vh - 300px));
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-flights .panel-empty,
.map-details > :not(summary) {
  margin: 0 16px 16px;
}

/* With its parameters and the layers open above it, the flight's details may not fit beside the
   map: they scroll inside their panel instead of running off it, under a title that stays put */
.map-details[open] {
  min-height: 46px;
  overflow-y: auto;
}

/* Its own background, so what scrolls under it doesn't show through. Not "inherit": <summary>
   inherits from the slot it's placed in, inside <details>, which has none */
.map-details > summary {
  position: sticky;
  top: 0;
  background: var(--surface);
}

/* The map itself (OpenLayers draws into it), and what sits over it */
.map-canvas {
  position: absolute;
  inset: 0;
  text-align: left;
}

/* Focus on the map (while drawing, map-measure.js): its ring inside it, as the stage clips what's outside */
.map-canvas:focus-visible {
  outline-offset: -3px;
}

.map-status,
.map-readout,
.measure-hint {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(29, 35, 29, 0.12);
  font-size: 14px;
  color: var(--ink-muted);
}

.map-status {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.map-readout {
  left: 16px;
  bottom: 48px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The site view's readouts of what's under the cursor (map-viewer.js, map-analysis.js), the analysis's
   over the height's: in the map's own space between the panel columns, above OpenLayers' scale line,
   clear of its buttons and the attribution, and above a profile's chart when it's open. Narrow as
   that space is at 768 px, they wrap there. Never in the pointer's way: over them, the map would lose it. */
.map-readouts {
  position: absolute;
  z-index: 1;
  left: 312px;
  right: 344px;
  bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.map-readouts > .map-readout,
.map-readouts > .map-analysis-readout {
  position: static;
  max-width: 100%;
}

.map-readouts > [hidden] {
  display: none;
}

.map-stage:has(> .map-profile:not([hidden])) > .map-readouts {
  bottom: 264px;
}

/* OpenLayers' own buttons: zoom and full screen bottom right, out of the panels' way */
.map-canvas .ol-zoom {
  top: auto;
  left: auto;
  right: 16px;
  bottom: 16px;
}

.map-canvas .ol-full-screen {
  top: auto;
  right: 16px;
  bottom: 88px;
}

/* Right of the panel column, which may reach the map's bottom; above a profile's chart when it's open */
.map-canvas .ol-scale-line {
  left: 312px;
  bottom: 16px;
}

.map-stage:has(> .map-profile:not([hidden])) .ol-scale-line {
  bottom: 232px;
}

.map-canvas .ol-control button {
  width: 36px;
  height: 36px;
  background: var(--surface);
  color: var(--sage-900);
  font-size: 18px;
}

.map-canvas .ol-control button:hover,
.map-canvas .ol-control button:focus {
  background: var(--sage-50);
  color: var(--sage-900);
}

/* "Warstwy": a checkbox per layer, a colour scale under each elevation layer */
.map-layer-list {
  min-width: 0;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

.map-layer {
  min-height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.map-layer input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.map-layer:has(input:disabled) {
  color: var(--ink-subtle);
  cursor: default;
}

.map-layer-hint {
  margin: -6px 16px 8px 44px;
  font-size: 12px;
  color: var(--ink-subtle);
}

/* "Podkład": the base map, under the flight's own layers */
.map-layer-list + .map-layer-list {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.map-layer-heading {
  margin: 0;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-subtle);
}

.map-layer-note {
  margin: 0 16px 4px;
  font-size: 12px;
  color: var(--ink-subtle);
}

/* Whose tiles the base map shows: bottom right, beside the zoom buttons */
.map-attribution {
  position: absolute;
  z-index: 1;
  right: 64px;
  bottom: 16px;
  margin: 0;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.map-attribution a {
  color: var(--ink-muted);
}

.map-legend {
  margin: -4px 16px 10px 44px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-legend[hidden] {
  display: none;
}

/* The same five colours as map-viewer.js, low to high */
.map-legend-ramp {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, rgb(44, 123, 182), rgb(171, 217, 233), rgb(255, 255, 191), rgb(253, 174, 97), rgb(215, 25, 28));
}

.map-legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}

/* Between a flight's map and its point cloud: "Chmura punktów 3D" on the map, "Ortofotomapa" (or
   "Mapa nalotu", "Szczegóły nalotu") in 3D. A box of its own at the top of the right column on both
   pages, as wide as the column, so switching looks like the same button taking another label and
   icon. Filled with the accent, as it takes the user elsewhere: white on it is 7.7:1. */
.map-switch {
  min-height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: var(--accent);
  background: var(--accent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #FFFFFF;
}

.map-switch:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: #FFFFFF;
}

/* Inside the box, white on the accent: seen whatever the background behind it */
.map-switch:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: -7px;
}

.map-switch svg {
  flex: none;
}

.viewer-message .button {
  align-self: center;
  margin-top: 8px;
}

/* The 3D viewer (Pages/sites/point-cloud): Giro3D draws into .point-cloud-canvas, panels as on the map */
.point-cloud-panel > :not(summary, fieldset) {
  margin: 0 16px 12px;
}

.point-cloud-panel[open] {
  min-height: 46px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Sliding open or shut (wwwroot/js/panel-slide.js): what's beyond the moving edge is hidden */
details.panel-slide--sliding[open] {
  overflow: hidden;
}

/* Folding, the chevron turns at once, not when the slide ends */
.panel-slide--closing > summary::after {
  transform: translateY(-2px) rotate(45deg);
}

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

.measure-tool {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--sage-900);
  cursor: pointer;
}

.measure-tool:hover:not(:disabled, [aria-pressed="true"]) {
  background: var(--sage-50);
}

/* The tool being used */
.measure-tool[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}

.measure-tool:disabled {
  color: var(--ink-subtle);
  cursor: default;
}

.measure-actions {
  display: flex;
  gap: 8px;
}

.measure-actions:not(:has(:not([hidden]))),
.measure-actions [hidden] {
  display: none;
}

.measure-list {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.measure-list:empty {
  display: none;
}

.measure-item {
  padding: 8px 6px 8px 10px;
  border-left: 3px solid #F2711C; /* the measurements' colour in point-cloud-viewer.js */
  border-radius: 4px;
  background: var(--sage-50);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

.measure-item > span {
  min-width: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.measure-value {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.measure-remove {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
}

.measure-remove:hover {
  background: var(--sage-100);
  color: var(--ink);
}

/* "Tło" (wwwroot/js/point-cloud-background.js), under the count of points and set off from it like
   the panel's other sections: one row, its name, the colour as a button that opens the browser's
   picker, and "Resetuj tło" */
.point-cloud-panel > .point-cloud-background {
  margin: 8px 0 12px;
  padding: 8px 16px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.point-cloud-background .map-layer-heading {
  padding: 0;
}

/* The picker's own swatch, as a button: a border, so a white or a very light colour still shows */
.point-cloud-swatch {
  width: 56px;
  height: 36px;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.point-cloud-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}

.point-cloud-swatch::-webkit-color-swatch {
  border: 1px solid var(--line);
  border-radius: 4px;
}

.point-cloud-swatch::-moz-color-swatch {
  border: 1px solid var(--line);
  border-radius: 4px;
}

.point-cloud-swatch:hover {
  border-color: var(--sage-500);
}

.point-cloud-background .button {
  margin-left: auto;
}

/* Nothing to reset while the background is the stage's own */
.point-cloud-background .button:disabled {
  opacity: 0.55;
  cursor: default;
}

.point-cloud-views {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* "Wczytywanie chmury punktów… 40%": bottom right, beside the right column, out of the cloud's way.
   Under the panels where, in a narrow window, the left column reaches down to it. */
.point-cloud-loading {
  top: auto;
  left: auto;
  right: 352px; /* the column's 320px, and 16px either side */
  bottom: 16px;
  z-index: auto;
  transform: none;
}

/* While the cookie notice covers the bottom of the window, in the middle as before */
body:has(#cookie-consent) .point-cloud-loading {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* What to click while measuring: top centre, between the panels and clear of the cookie notice */
.point-cloud-hint,
.measure-hint {
  top: 16px;
  bottom: auto;
  left: 50%;
  width: max-content;
  max-width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
  text-align: center;
}

/* One compact row per flight, so the list takes as little of the map as it can */
.map-flights .capture-item {
  min-height: 44px;
  padding: 6px 10px 6px 12px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.map-flights .capture-item-date {
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.map-flights .capture-item-date strong {
  font-size: 16px;
}

.map-flights .capture-item-date span {
  font-size: 12px;
}

.capture-item {
  padding: 12px 14px;
  border: 1px solid #E6E5DC;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.capture-item:hover {
  border-color: var(--sage-300);
  color: var(--ink);
}

.capture-item[aria-current="true"] {
  border-color: var(--accent);
  background: var(--sage-50);
}

.capture-item-date {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.capture-item-date strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
}

.capture-item-date span {
  font-size: 13px;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}

.viewer-message {
  position: relative;
  max-width: 360px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(29, 35, 29, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-muted);
}

.viewer-message strong {
  font-size: 16px;
  color: var(--ink);
}

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 12px;
  font-size: 14px;
}

.facts dt {
  font-weight: 400;
  color: var(--ink-subtle);
}

.facts dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Each label and value in a <div>: on one line while they fit, else the value goes under its label */
.facts--pairs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.facts--pairs > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

.facts--pairs dd {
  min-width: 0;
  margin-left: auto;
  overflow-wrap: anywhere;
}

/* Running text reads from the left, under its label */
.facts--pairs .facts-text dd {
  flex-basis: 100%;
  text-align: left;
}

/* "Pliki do pobrania" (_FileDownloads): one row per stored file, the whole row a link */
.file-downloads {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-download {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sage-900);
  text-decoration: none;
}

.file-download:hover {
  background: var(--sage-50);
  color: var(--sage-900);
}

.file-download-icon {
  flex-shrink: 0;
  color: var(--accent);
}

.file-download-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.file-download-name {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.file-download-meta {
  font-size: 12px;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}

/* Over the layers of a flight whose added files are being processed, or failed to be */
.map-layer-status {
  margin: 0 16px 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: #FBF0D9;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #5E3C08;
}

.map-layer-status[data-status="Failed"] {
  background: #F6E1DC;
  color: #8E2B1F;
}

/* A second group in the flight's details (Parametry pomiaru), set off by a rule */
.map-details > .map-details-heading {
  margin-bottom: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-subtle);
}

/* What the flight lacks and "Dodaj brakujące pliki", for those who may add it: a note with its button */
.map-missing-files {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.map-missing-files p {
  margin: 0;
}

.note {
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--sage-50);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sage-800);
}

/* What a comparison of volumes can't take from a flight, or takes with care (Domain/FlightSystems.cs) */
.note--warning {
  background: var(--clay-50);
  color: var(--clay-800);
}

.note ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

@media (max-width: 1100px) {
  .dashboard { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .site-grid { grid-template-columns: 1fr; }

  /* On a phone the panels sit above the map rather than covering it */
  .map-page { flex-direction: column; }
  .map-panels {
    position: static;
    order: -1;
    width: auto;
    max-height: none;
    padding: 12px 16px 0;
  }
  /* About three flights, then scroll, so the map itself shows on the first screen */
  .map-flights ol { max-height: 28vh; }
  .point-cloud-loading { right: 16px; }
  .map-stage { min-height: 60vh; }
  /* The map has the width: the readouts from its left, clear of the buttons; above a profile's chart, which takes its bottom */
  .map-readouts { left: 16px; right: 64px; }
  .map-canvas .ol-scale-line { left: 16px; }
  .map-stage:has(> .map-profile:not([hidden])) > .map-readouts { bottom: 208px; }
  .map-stage:has(> .map-profile:not([hidden])) .ol-scale-line { bottom: 176px; }
}

/* Upload page (Prześlij nalot) */

.page-lead {
  max-width: 760px;
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Long text pages (Polityka prywatności): a readable line length */
.legal {
  max-width: 760px;
  line-height: 1.6;
}

.legal h2 {
  margin: 40px 0 12px;
  font-size: 22px;
}

.legal h3 {
  margin: 24px 0 8px;
  font-size: 17px;
}

.legal ul,
.legal ol {
  padding-left: 20px;
}

/* The terms' numbered points: a little air between them */
.legal li + li {
  margin-top: 6px;
}

/* Under the login button: logging in accepts the terms (Regulamin § 5) */
.login-terms {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
}

.legal-table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
  font-size: 15px;
}

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

.legal-table code {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: start;
  gap: 24px;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section,
.queue {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-section h2,
.queue h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
}

.form-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.form-section-note,
.field-hint {
  font-size: 13px;
  color: var(--ink-subtle);
}

.field-hint {
  margin: 0;
}

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

.field-grid--assign {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field--span2 { grid-column: span 2; }
.field--span3 { grid-column: span 3; }

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sage-800);
}

.field input,
.field select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.field input::placeholder {
  color: #8A9087;
}

/* Added by the tag helpers to fields that failed validation */
.field .input-validation-error {
  border-color: #8E2B1F;
}

.field-error {
  font-size: 13px;
  color: #8E2B1F;
}

.form-errors {
  padding: 14px 18px;
  border: 1px solid #E9C3BA;
  border-radius: var(--radius-lg);
  background: #FFF8F6;
  font-size: 14px;
  color: #6E2419;
}

.form-errors ul {
  margin: 0;
  padding-left: 18px;
}

/* The summary is always rendered; it only has content after a failed post */
.form-errors.validation-summary-valid {
  display: none;
}

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

.file-slot {
  min-width: 0;
  padding: 16px;
  border: 2px dashed var(--sage-200);
  border-radius: 12px;
  background: #F8FAF6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.file-slot:focus-within {
  border-color: var(--sage-500);
}

.file-slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.file-slot-head label {
  font-size: 14px;
  font-weight: 700;
}

.file-slot-head span {
  font-size: 12px;
  color: var(--ink-subtle);
}

.file-slot input[type="file"] {
  width: 100%;
  font-size: 14px;
  color: var(--ink-muted);
}

.file-slot input[type="file"]::file-selector-button {
  min-height: 44px;
  margin-right: 12px;
  padding: 0 14px;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--sage-900);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.file-slot input[type="file"]::file-selector-button:hover {
  background: var(--sage-50);
}

.file-slot-progress {
  width: 100%;
  height: 6px;
  appearance: none;
  border: none;
  border-radius: 3px;
  background: #ECEBE4;
  overflow: hidden;
}

.file-slot-status {
  font-size: 13px;
  color: var(--ink-subtle);
}

.file-slot-status:empty {
  display: none;
}

.file-slot-status.field-validation-error {
  color: #8E2B1F;
}

.file-slot:has(.input-validation-error) {
  border-color: #E9C3BA;
}

.form-success {
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius-lg);
  background: var(--sage-50);
  font-size: 14px;
  color: var(--on-sage-100);
}

.file-slot-progress::-webkit-progress-bar { background: #ECEBE4; }
.file-slot-progress::-webkit-progress-value { background: var(--accent); }
.file-slot-progress::-moz-progress-bar { background: var(--accent); }

.form-actions {
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.form-actions p {
  flex: 1 1 240px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-subtle);
}

.queue-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.queue-item {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.queue-item:hover {
  border-color: var(--sage-300);
}

/* data-status changes live (capture-progress.js), so the colours follow it rather than a class */
.queue-item[data-status="Uploading"],
.queue-item[data-status="Processing"] { border-color: #EAD9B5; background: #FFFCF5; }
.queue-item[data-status="Failed"] { border-color: #E9C3BA; background: #FFF8F6; }

.queue-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.queue-item-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.queue-item-head .status-pill {
  flex-shrink: 0;
}

.queue-item-head a {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

/* The whole card is the link's click target */
.queue-item-head a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.queue-item-meta {
  font-size: 13px;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}

/* "Napraw" on a failed capture: sits above the card-wide link so it can be clicked itself */
.queue-item-action {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

/* A capture's files and processing (Pages/sites/capture.cshtml) */
.capture-files {
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.capture-state,
.capture-file-panel,
.capture-info-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.capture-state h2,
.capture-file-panel h2,
.capture-info-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
}

.capture-state-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.capture-state-actions,
.capture-file-actions,
.capture-file-upload {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.capture-file-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capture-file {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.capture-file form {
  margin: 0;
}

.capture-file-current {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 14px;
  color: var(--ink-muted);
}

.capture-file-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.capture-file-missing {
  font-weight: 600;
  color: var(--sage-800);
}

/* An empty slot stands out: the file the flight lacks, with "Dodaj" for whoever may add it */
.capture-file--missing {
  border-style: dashed;
  border-color: var(--sage-300);
  background: var(--sage-50);
}

/* "Układ wysokościowy", asked with heights on a flight without one: a row of its own above the file */
.capture-file-height {
  flex-basis: 100%;
}

.capture-file-height select {
  max-width: 100%;
}

/* The systems a file says it's in (Domain/FlightSystems.cs), under its name */
.capture-file-systems {
  margin: 0;
  font-size: 13px;
  color: var(--ink-subtle);
  overflow-wrap: anywhere;
}

/* "Układy nalotu": what's wrong with the flight's systems, then what was taken as what */
.capture-systems-warnings,
.capture-systems-notes {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.capture-systems-warnings { color: var(--clay-800); }
.capture-systems-notes { color: var(--ink-subtle); }

/* Why processing couldn't put a file added later on the map: only that file failed */
.capture-file-failure {
  margin: 0;
  font-size: 13px;
  color: #8E2B1F;
}

/* Fields this user may no longer change (CaptureChanges): shown, not editable */
.capture-info-form input[readonly],
.capture-info-form select:disabled {
  background: var(--sage-50);
  color: var(--ink-muted);
}

.capture-info-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* "Historia zmian" (admins only): one change a line, the time first */
.capture-log {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.capture-log li {
  display: flex;
  gap: 12px;
}

.capture-log time {
  flex-shrink: 0;
  width: 120px;
  color: var(--ink-subtle);
}

.capture-log li > span {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  overflow-wrap: anywhere;
}

.capture-log-meta {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ink-subtle);
}

/* Never wider than its slot, on a phone too: the file field and the slot's buttons wrap instead */
.capture-file-upload {
  flex: 1 1 360px;
  min-width: 0;
}

.capture-file-upload input[type="file"] {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  color: var(--ink-muted);
}

.capture-file-upload input[type="file"]::file-selector-button {
  min-height: 44px;
  margin-right: 12px;
  padding: 0 14px;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--sage-900);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.capture-file-upload .file-slot-progress,
.capture-file-upload .file-slot-status {
  flex-basis: 100%;
}

.page-message {
  margin: 0 0 20px;
}

/* What a capture is doing right now (_CaptureProgress.cshtml) */
.capture-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* display: flex above would otherwise beat the hidden attribute */
.capture-progress[hidden] {
  display: none;
}

[data-status="Failed"] .capture-progress-label {
  color: #6E2419;
}

.capture-progress-bar {
  width: 100%;
  height: 6px;
  appearance: none;
  border: none;
  border-radius: 3px;
  background: #F1E6CE;
  overflow: hidden;
}

.capture-progress-bar::-webkit-progress-bar { background: #F1E6CE; }
.capture-progress-bar::-webkit-progress-value { background: #B7791F; transition: width 0.4s ease; }
.capture-progress-bar::-moz-progress-bar { background: #B7791F; }

.viewer-message .capture-progress {
  margin: 4px 0;
}

@media (max-width: 1100px) {
  .upload-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .field-grid,
  .field-grid--assign,
  .file-grid { grid-template-columns: 1fr; }
  .field--span2,
  .field--span3 { grid-column: auto; }
  .form-section,
  .queue { padding: 18px; }
}

/* New site (Nowa budowa) */

.site-form {
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.field-optional {
  margin-left: 4px;
  font-weight: 400;
  color: var(--ink-subtle);
}

.field-grid--coordinates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A text field with its button beside it; the button moves under it when there's no room */
.field-with-button {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-with-button input {
  flex: 1 1 220px;
  min-width: 0;
}

.field-with-button .button {
  flex: none;
  height: 44px;
}

/* A short list of radio choices, one per line */
.choice-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.choice-list legend {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sage-800);
}

.choice {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}

.choice input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* The location picker, and the Pulpit's map of the sites: a map box with its hint and attribution over it */
.site-picker,
.dashboard-map {
  position: relative;
  height: 380px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--sage-50);
}

.site-picker[hidden] {
  display: none;
}

.site-map {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

.site-map-hint,
.dashboard-map-hint {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 8px 12px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(29, 35, 29, 0.12);
  font-size: 14px;
  text-align: center;
  color: var(--ink-muted);
  pointer-events: none;
}

.site-picker .map-attribution,
.dashboard-map .map-attribution {
  right: 8px;
  bottom: 8px;
}

.site-map .ol-control button,
.dashboard-map-canvas .ol-control button {
  width: 36px;
  height: 36px;
  background: var(--surface);
  color: var(--sage-900);
  font-size: 18px;
}

/* "Podkład" under the picker and the Pulpit's map: the choices in a row */
.site-picker-bases .map-layer-list,
.dashboard-map-bases .map-layer-list {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
}

.site-picker-bases .map-layer-heading,
.site-picker-bases .map-layer,
.dashboard-map-bases .map-layer-heading,
.dashboard-map-bases .map-layer {
  padding: 0;
}

.site-picker-bases .map-layer-note,
.dashboard-map-bases .map-layer-note {
  flex-basis: 100%;
  margin: 0;
}

@media (max-width: 760px) {
  .field-grid--coordinates { grid-template-columns: 1fr; }
  .site-picker { height: 300px; }
}

/* The Pulpit's map of the sites (wwwroot/js/dashboard-map.js), above their cards, folded in a box
   like the map's panels. Flat on the page, as the cards are, with the map edge to edge inside it.
   The script slides it open and shut. */
.dashboard-map-panel {
  margin-bottom: 20px;
  background: var(--surface);
  box-shadow: none;
}

.dashboard-map-content--sliding {
  overflow: hidden;
}

/* Folding, the chevron turns at once, not when the slide ends */
.dashboard-map-panel--closing > summary::after {
  transform: translateY(-2px) rotate(45deg);
}

/* Its hint sits at the bottom, not in the middle, where a lone site's pin goes; the script keeps
   the pins clear of it. */
.dashboard-map {
  height: 340px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.dashboard-map-canvas {
  position: absolute;
  inset: 0;
}

/* As wide as its text: placed from the middle, it would otherwise wrap at half the map's width */
.dashboard-map-hint {
  top: auto;
  bottom: 12px;
  width: max-content;
  transform: translateX(-50%);
}

.dashboard-map-bases {
  padding: 10px 16px 12px;
}

/* Over the map while the wheel turns without Ctrl (dashboard-map.js), as the page scrolls on: how to
   zoom. It comes and fades; for someone who asks for less motion, it just shows and goes. */
.dashboard-map-wheel {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 35, 29, 0.62);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.dashboard-map-wheel--shown {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-map-wheel { transition: none; }
}

/* A site: a link, its dot on the site (the picker's pin, wwwroot/js/site-location.js) and its name
   beside it. dashboard-map.js puts the dot's centre on the site: it counts on the 20px. */
.dashboard-map-pin {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.dashboard-map-pin::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: #B7791F;
  box-shadow: 0 1px 4px rgba(29, 35, 29, 0.35);
}

/* A long name is cut short with "…", and shows whole while pointed at */
.dashboard-map-pin-label {
  max-width: 180px;
  padding: 3px 8px;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(29, 35, 29, 0.12);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-map-pin:hover .dashboard-map-pin-label,
.dashboard-map-pin:focus-visible .dashboard-map-pin-label {
  max-width: none;
  color: var(--accent-hover);
  text-decoration: underline;
}

/* A name that would cover another's (dashboard-map.js): only the dot shows, and the name while
   pointed at. Out of the way rather than gone, so the link keeps its name for screen readers. */
.dashboard-map-pin--crowded:not(:hover, :focus-visible) .dashboard-map-pin-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The pin pointed at comes out on top of its neighbours (OpenLayers wraps each in a container of
   its own, the first pin topmost, so a name that shows lies over the dots it crowds out: what's
   seen is what's clicked) */
.ol-overlay-container:has(.dashboard-map-pin:hover),
.ol-overlay-container:has(.dashboard-map-pin:focus-visible) {
  z-index: 1;
}

@media (max-width: 760px) {
  .dashboard-map { height: 300px; }
}

/* Edit site (Edycja budowy): the form, then archiving, in one column */

.site-edit {
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The column's gap spaces these; their own margins would add to it */
.site-edit .form-success,
.site-edit .note {
  margin: 0;
}

/* "Zdjęcie na pulpicie" (edit-site): three options, the flights' pictures and the photo under theirs */
.picture-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.picture-choices {
  gap: 14px;
}

.picture-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Under its option, in line with the option's text */
.picture-choice > :not(.choice) {
  margin-left: 28px;
}

.picture-flights {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

/* Phones: two flights a row, cropped as a phone's Pulpit box (its full width, 132 px high); the
   narrowest, one, so a date with its time ("17.10.2026, 11:00") fits beside its radio */
@media (max-width: 560px) {
  .picture-flights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .picture-flight img {
    aspect-ratio: 358 / 132;
  }
}

@media (max-width: 359px) {
  .picture-flights {
    grid-template-columns: minmax(0, 1fr);
  }
}

.picture-flight {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}

/* The flight chosen, while "Zdjęcie z nalotu…" is: under another option, none is */
.picture-choice:has(input[name="picture"][value="Flight"]:checked) .picture-flight:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.picture-flight:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The radio beside the flight's date, under its picture */
.picture-flight-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.picture-flight input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

/* Cropped as the Pulpit's box crops them (about 460 × 132), so what's chosen here is what shows
   there; see-through around the survey, like that box */
.picture-flight img,
.picture-photo {
  display: block;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  background: var(--sage-50);
}

.picture-flight img {
  width: 100%;
  height: auto;
  aspect-ratio: 460 / 132;
}

.picture-photo {
  width: min(460px, calc(100% - 28px));
  height: 132px;
}

.picture-choice .field {
  max-width: 480px;
}

/* The colour as the Pulpit's box shows it, beside the picker */
.picture-colour-swatch {
  display: block;
  width: min(460px, calc(100% - 28px));
  height: 132px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
}

.picture-colour-field input[type="color"] {
  width: 88px;
  padding: 4px;
  cursor: pointer;
}

.picture-choice input[type="file"] {
  height: auto;
  padding: 10px 12px;
}

/* "Edytuj budowę" under the site's name on its map page */
.map-title-link {
  align-self: flex-start;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}

/* Who has access (_SiteFormSections, "Dostęp"): an organisation, what it may do, and "Usuń" on the
   extra ones. A fixed last column, so the managing organisation's row lines up with the others. */
.access-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 88px;
  align-items: start;
  gap: 12px 16px;
}

/* As tall as a label, so "Usuń" lines up with the selects beside it */
.field-label-space {
  font-size: 13px;
}

.field-label-space::before {
  content: "\00a0";
}

.access-row-action .button {
  align-self: flex-start;
}

.shared-orgs {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shared-orgs legend {
  margin: 4px 0 4px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--sage-900);
}

.shared-org-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shared-org-list li {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* What archiving does, before it's done */
.confirm-panel {
  max-width: 720px;
}

.confirm-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.5;
}

/* Archived sites under the Pulpit's cards, for admins */
.archived-sites {
  margin-top: 20px;
  font-size: 14px;
}

.archived-sites > summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--sage-800);
}

.archived-sites > summary::-webkit-details-marker {
  display: none;
}

/* A chevron, as on the map panels: down when folded, up when open */
.archived-sites > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.archived-sites[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.archived-sites ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.archived-sites li {
  min-height: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

@media (max-width: 760px) {
  .access-row { grid-template-columns: 1fr; }
  .access-row .field-label-space { display: none; }
}

/* Irreversible actions: deleting an account */
.button--danger {
  background: var(--surface);
  border-color: #E9C3BA;
  color: #8E2B1F;
}

.button--danger:hover {
  background: #FFF8F6;
  color: #6E2419;
}

/* Logowanie: one narrow column in the middle */
.login-page {
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-page h1 {
  margin: 4px 0 0;
}

.login-help {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Short pages in one narrow column (the error page, Wylogowanie, Zmiana hasła); its gap spaces them */
.narrow-page {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.narrow-page h1,
.narrow-page .page-lead,
.narrow-page .field-hint,
.narrow-page .form-success,
.narrow-page .note {
  margin: 0;
}

/* On the page itself rather than in a panel, so it needs an edge to stand out */
.narrow-page .note {
  border: 1px solid var(--sage-200);
}

/* Users and organisations (/admin/Manage-User-Org): the three forms, then the lists */
.admin-page {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-page .form-success {
  margin: 0;
}

/* Three across on a wide screen, one on a phone */
.admin-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  gap: 20px;
}

.admin-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.admin-list > li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.admin-list > li:first-child {
  padding-top: 0;
  border-top: 0;
}

.admin-list-main {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-list-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-list-meta {
  font-size: 13px;
  color: var(--ink-subtle);
}

.admin-list-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-org + .admin-org {
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}

.admin-org h3 {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 16px;
  font-weight: 700;
}

.admin-org h3 code {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-subtle);
}

/* The delete step's heading carries the badge in the text font, as in the list */
.confirm-panel .access-badge {
  font-family: var(--font-body);
}

/* The panel's gap spaces the refusal */
.confirm-panel .form-errors {
  margin: 0;
}

/* Access levels (/admin/Access) */

.access-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.access-badge--public { background: var(--sage-100); color: var(--on-sage-100); }
.access-badge--signedin { background: #E3ECF5; color: #1F4466; }
.access-badge--admin { background: #F4E4DA; color: #7A3A18; }

/* Telegram alerts (/admin/Alerts) */

.alerts-panel {
  max-width: 760px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  line-height: 1.6;
}

.alerts-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.alerts-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
}

.alerts-panel p {
  margin: 0;
}

.alerts-panel code {
  font-size: 13px;
  overflow-wrap: anywhere;
}

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

/* Cookie consent banner */

.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.consent-banner p {
  flex: 1 1 320px;
  margin: 0;
  line-height: 1.5;
}

.consent-banner form {
  margin: 0;
}

/* "Pomiary" on the site view (wwwroot/js/map-measure.js): the 3D viewer's measuring look, on the map */
.map-measure > :not(summary) {
  margin: 0 16px 12px;
}

.map-measure .measure-tools {
  margin-bottom: 0;
  padding-bottom: 12px;
}

/* Its title and the tools under it at the top of the left column, results scrolling under both: the next
   measurement starts without scrolling back. With it, "Naloty" keeps a shorter list, scrolling on its own. */
@media (min-width: 761px) {
  .map-measure > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
  }

  .map-measure .measure-tools {
    position: sticky;
    top: 44px;
    z-index: 1;
    background: var(--surface);
  }

  .map-panels--start:has(.map-measure) .map-flights ol {
    max-height: min(30vh, 240px);
  }
}

/* A volume's level in its own result, under its lines: the one it was measured with, to correct */
.measure-item-level {
  margin-top: 6px;
}

/* "Zakończ", "Cofnij punkt", "Anuluj": a second row when the panel is too narrow for three */
.map-measure .measure-actions {
  flex-wrap: wrap;
}

.measure-options[hidden],
.measure-level[hidden] {
  display: none;
}

.measure-choice {
  min-width: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  font-size: 14px;
}

.measure-choice legend {
  float: left;
  margin-right: 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-subtle);
}

.measure-choice label {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.measure-choice input {
  accent-color: var(--accent);
}

.measure-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-subtle);
}

.measure-field select,
.measure-field input {
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}

.measure-level {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.measure-level .map-layer-note {
  margin: 0;
}

/* A result's lines: its numbers first, then what to beware of, then what it is and what it's in */
.measure-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.measure-lines .measure-value {
  color: var(--ink);
}

.measure-detail {
  color: var(--ink-muted);
}

.measure-warning {
  color: var(--clay-800);
}

.measure-note,
.measure-facts {
  font-size: 12px;
  color: var(--ink-subtle);
}

.measure-error {
  color: #8E2B1F;
}

.measure-pending {
  color: var(--ink-subtle);
}

.measure-item-actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.measure-action {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--sage-200);
  border-radius: 4px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--sage-900);
  cursor: pointer;
}

.measure-action:hover:not(:disabled) {
  background: var(--sage-50);
}

.measure-action:disabled {
  color: var(--ink-subtle);
  cursor: default;
}

/* A profile's chart: along the bottom of the map, between the panels */
.map-profile {
  position: absolute;
  z-index: 2;
  left: 320px;
  right: 352px;
  bottom: 16px;
  height: 200px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.map-profile[hidden] {
  display: none;
}

/* Its title, series and exaggeration, ×; under them what the cursor points at */
.map-profile-head {
  padding: 4px 4px 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-size: 12px;
}

.map-profile-scale {
  min-width: 0;
  flex: 1;
  color: var(--ink-subtle);
}

.map-profile-close {
  order: 1;
}

/* Two lines kept for it, the chart drawn under them: its heights to the millimetre with an earlier flight
   don't fit one line between the panels. On a phone a third is cut off. */
.map-profile-readout {
  min-height: 2.8em;
  max-height: 2.8em;
  flex-basis: 100%;
  order: 2;
  overflow: hidden;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.map-profile-chart {
  min-height: 0;
  flex-grow: 1;
}

/* A drag across it moves the profile's cursor; up and down still scrolls the page (map-measure.js) */
.profile-svg {
  display: block;
  touch-action: pan-y;
}

.profile-grid {
  stroke: rgba(29, 35, 29, 0.1);
  stroke-width: 1;
}

.profile-label {
  font-size: 11px;
  fill: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}

.profile-label--y,
.profile-label--axis {
  text-anchor: end;
}

.profile-label--x {
  text-anchor: middle;
}

.profile-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* The ground brown, as contour lines are; the surface with its objects green; an earlier flight dashed blue */
.profile-nmt {
  stroke: #8B5A2B;
}

.profile-nmpt {
  stroke: #4E7A3A;
}

.profile-earlier {
  stroke: #2C7BB6;
  stroke-dasharray: 6 4;
}

.profile-cursor {
  stroke: #1D231D;
  stroke-width: 1;
}

/* The chart's key: each series' name after a short line in its colour */
.profile-key {
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
}

.profile-key::before {
  content: "";
  width: 16px;
  border-top: 2px solid #8B5A2B;
}

.profile-key.profile-nmpt::before {
  border-top-color: #4E7A3A;
}

.profile-key.profile-earlier::before {
  border-top: 2px dashed #2C7BB6;
}

/* "Warstwice" in "Warstwy": a checkbox, then the interval, the DXF and what to know about them */
.map-contours {
  min-width: 0;
  margin: 0 0 8px;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.map-contours-options {
  margin: -4px 16px 8px 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.map-contours-options[hidden] {
  display: none;
}

.map-contours-options .map-layer-note {
  margin: 0;
}

/* Narrower, the chart runs from the left, short of the right column, so the map's buttons and the
   attribution stay clear of it; the left column, which then reaches over it, ends above it */
@media (max-width: 1100px) {
  .map-profile {
    left: 16px;
    right: 352px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .map-page:has(.map-profile:not([hidden])) .map-panels--start {
    max-height: calc(100% - 248px);
  }
}

/* A short screen besides (a landscape tablet, a laptop at 125 %): the chart lower, as on a phone, and the
   column above it the longer */
@media (min-width: 761px) and (max-width: 1100px) and (max-height: 650px) {
  .map-profile {
    height: 160px;
  }

  .map-page:has(.map-profile:not([hidden])) .map-panels--start {
    max-height: calc(100% - 208px);
  }

  .map-stage:has(> .map-profile:not([hidden])) > .map-readouts { bottom: 224px; }
  .map-stage:has(> .map-profile:not([hidden])) .ol-scale-line { bottom: 192px; }
}

/* On a phone the map has the width: the chart along its bottom edge, the map's buttons and the attribution above it */
@media (max-width: 760px) {
  .map-profile {
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    border-radius: 0;
  }

  .map-stage:has(> .map-profile:not([hidden])) .ol-zoom,
  .map-stage:has(> .map-profile:not([hidden])) > .map-attribution {
    bottom: 176px;
  }

  .map-stage:has(> .map-profile:not([hidden])) .ol-full-screen {
    bottom: 248px;
  }
}

/* The drawing hint, between the panel columns: centred over the whole map it ran under "Warstwy" and
   over the title */
@media (min-width: 761px) and (max-width: 1100px) {
  .measure-hint {
    left: 312px;
    right: 344px;
    width: auto;
    max-width: none;
    transform: none;
  }
}

/* Site view: "Analizy terenu" in "Warstwy" (wwwroot/js/map-analysis.js) */

/* With the analyses, "Warstwy" may not fit beside the map: it scrolls inside its panel, under a title
   that stays put, and the column ends above OpenLayers' zoom and full-screen buttons (#map's, not the
   3D viewer's page) it would otherwise cover */
@media (min-width: 761px) {
  .map-stage:has(> #map) ~ .map-panels--end {
    max-height: calc(100% - 156px);
  }
}

.map-layers[open] {
  min-height: 46px;
  overflow-y: auto;
}

.map-layers > summary {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

/* A legend of classes: a strip of colours, each class's range under its own, the unit at the end */
.map-classes {
  --classes: 6;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--classes), minmax(0, 1fr)) auto;
  column-gap: 2px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-subtle);
}

.map-classes li::before {
  content: "";
  display: block;
  height: 8px;
  margin-bottom: 3px;
  background: var(--class-colour);
}

.map-classes li:first-child::before {
  border-radius: 4px 0 0 4px;
}

.map-classes li:nth-last-child(2)::before {
  border-radius: 0 4px 4px 0;
}

.map-classes .map-classes-unit {
  padding-left: 4px;
}

.map-classes .map-classes-unit::before {
  background: none;
}

/* The same colours as map-analysis.js, low to high */
.map-classes--slope li:nth-child(1) { --class-colour: rgb(255, 255, 178); }
.map-classes--slope li:nth-child(2) { --class-colour: rgb(254, 217, 118); }
.map-classes--slope li:nth-child(3) { --class-colour: rgb(254, 178, 76); }
.map-classes--slope li:nth-child(4) { --class-colour: rgb(253, 141, 60); }
.map-classes--slope li:nth-child(5) { --class-colour: rgb(240, 59, 32); }
.map-classes--slope li:nth-child(6) { --class-colour: rgb(189, 0, 38); }

.map-classes--height { --classes: 5; }
.map-classes--height li:nth-child(1) { --class-colour: rgb(122, 218, 248); }
.map-classes--height li:nth-child(2) { --class-colour: rgb(89, 170, 248); }
.map-classes--height li:nth-child(3) { --class-colour: rgb(111, 109, 232); }
.map-classes--height li:nth-child(4) { --class-colour: rgb(131, 47, 178); }
.map-classes--height li:nth-child(5) { --class-colour: rgb(113, 6, 100); }

.map-legend-note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-subtle);
}

/* The slope or height above the NMT under the cursor (in .map-readouts, over the height under it) */
.map-analysis-readout {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(29, 35, 29, 0.12);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}