/* ==========================================================
   PLATSVY — STYLESHEET (cleaned & consolidated)

   1.  Variables, reset & page layout
   2.  Header & workspace navigation
   3.  Sidebar (layers, site info, screening cards)
   4.  Map area, map controls & drawing tools
   5.  Smart Location Finder & right-hand panel stack
   6.  Site analysis popup (accordions, summary)
   7.  Site Assessment workspace (core dashboard)
   8.  Contaminated land (EBH)
   9.  Flood intelligence
   10. Landslide scanner
   11. Geological intelligence
   12. Geotechnical ground conditions
   13. Shared utilities (focus, motion)
========================================================== */


/* ==========================================================
   1. VARIABLES, RESET & PAGE LAYOUT
========================================================== */

:root {
  --bg: #101418;
  --panel: #1b2427;
  --panel-light: #243034;
  --orange: #ff851b;
  --green: #27ae60;
  --text: #f4f7f5;
  --muted: #a7b4b2;
  --border: #344244;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* 100vh includes the mobile address bar; dvh does not */
@supports (height: 100dvh) {
  body {
    height: 100dvh;
  }
}

.app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.status-dot,
.info-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  background: var(--green);
  border-radius: 50%;
}

.eyebrow {
  color: var(--orange);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.6px;
}


/* ==========================================================
   2. HEADER & WORKSPACE NAVIGATION
========================================================== */

.app-header {
  flex-shrink: 0;
  height: 82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon {
  font-size: 38px;
  color: var(--orange);
}

.brand h1 {
  margin: 0;
  font-size: 25px;
}

.brand h1 span {
  color: var(--orange);
}

.brand p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1.2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 11px;
  letter-spacing: 1px;
}

.live-status {
  color: var(--green);
}

/* Sweden coverage badge */
.header-right .region-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: rgba(255, 133, 27, 0.10);
  border: 1px solid rgba(255, 133, 27, 0.55);
  border-radius: 9px;
  box-shadow: 0 0 14px rgba(255, 133, 27, 0.08);
  color: #ff9b42;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.header-right .region-label::before {
  content: "◆";
  color: #36c878;
  font-size: 13px;
}

.header-right .region-label:hover {
  background: rgba(255, 133, 27, 0.18);
  border-color: #ff851b;
  box-shadow: 0 0 18px rgba(255, 133, 27, 0.15);
}

/* Workspace tabs */

.workspace-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #111b20;
  border-bottom: 1px solid #34454b;
  overflow-x: auto;
}

.workspace-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #c5d3da;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-tab span {
  font-size: 17px;
}

.workspace-tab small {
  color: #9ca3af;
  font-size: 9px;
  font-weight: 800;
}

.workspace-tab.active {
  background: #26373d;
  color: #fb923c;
  border-color: #fb923c;
}

.workspace-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .header-right .region-label {
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: 0.2px;
  }

  .workspace-nav {
    padding: 8px 12px;
    gap: 5px;
  }

  .workspace-tab {
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .app-header {
    height: 70px;
    padding: 0 14px;
  }

  .brand h1 {
    font-size: 20px;
  }

  .brand-icon {
    font-size: 28px;
  }

  .header-right {
    display: none;
  }

  .app-layout {
    flex-direction: column;
  }
}


/* ==========================================================
   3. SIDEBAR
========================================================== */

.sidebar {
  flex-shrink: 0;
  width: 330px;
  min-height: 0;
  padding: 25px 20px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.sidebar-heading h2 {
  margin: 10px 0 12px;
  color: #f1f5f9;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.sidebar-heading p {
  margin-bottom: 18px;
  color: #a9bac1;
  font-size: 12px;
  line-height: 1.6;
}

.sidebar-heading .eyebrow {
  color: #fb923c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.sidebar-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.sidebar-section h3 {
  margin: 0 0 15px;
  font-size: 14px;
}

.sidebar-footer {
  margin-top: 30px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

.sidebar-footer span {
  display: block;
  color: var(--green);
}

@media (max-width: 760px) {
  .sidebar {
    width: 100%;
    max-height: 260px;
    padding: 15px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/* ---------- Collapsible Environment & Nature layers ---------- */

.layer-category {
  margin: 18px 0;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 12px;
  overflow: hidden;
}

.layer-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 15px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.layer-category-header::-webkit-details-marker {
  display: none;
}

.layer-category-header::marker {
  content: "";
}

.layer-category-header:hover {
  background: #26373d;
}

.layer-category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 700;
}

.category-icon {
  font-size: 19px;
}

.category-count {
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.layer-category-content {
  padding: 0 12px 15px;
  border-top: 1px solid #34454b;
}

.layer-group-title {
  margin: 18px 0 12px;
  color: #a9bac1;
  font-size: 12px;
  font-weight: 700;
}

.layer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 7px;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.layer-category .layer-item {
  margin-bottom: 9px;
}

.layer-item:hover {
  border-color: var(--green);
}

.layer-item input {
  width: 17px;
  height: 17px;
  accent-color: var(--green);
  cursor: pointer;
}

/* ---------- GIS screening cards ---------- */

.future-layer-categories {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px 0 24px;
}

.future-layer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 15px 11px;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 10px;
  color: #d5e0e5;
  font-size: 12px;
  font-weight: 600;
}

.future-layer-item > span:first-child {
  min-width: 0;
}

.future-layer-status {
  flex-shrink: 0;
  color: #9ca3af;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

/* Collapsible module card (EBH, Climate, Geology) */

.ebh-layer-controls {
  display: block;
  min-width: 0;
  padding: 18px;
  background: #1b2b31;
  border: 1px solid #34474e;
  border-radius: 12px;
  color: #f1f5f9;
}

.ebh-controls-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.ebh-controls-heading::-webkit-details-marker {
  display: none;
}

.ebh-controls-heading::marker {
  content: "";
}

.ebh-controls-heading:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 5px;
  border-radius: 4px;
}

.ebh-controls-source {
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.ebh-expand-icon {
  color: #a8bac2;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.ebh-layer-controls[open] .ebh-expand-icon {
  transform: rotate(180deg);
}

.ebh-source-label {
  margin: 0;
  color: #a8bac2;
  font-size: 12px;
  line-height: 1.5;
}

.ebh-layer-controls[open] .ebh-source-label {
  margin-top: 16px;
}

.ebh-layer-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.ebh-layer-controls[open] .ebh-layer-option {
  margin-top: 12px;
}

.ebh-layer-option input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: #f97316;
}

.ebh-layer-option span {
  flex: 1;
  min-width: 0;
}

.ebh-controls-note {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid #34474e;
  color: #91a6af;
  font-size: 11px;
  line-height: 1.6;
}

.ebh-layer-controls[open] .ebh-controls-note {
  margin-top: 16px;
}

/* Climate & Natural Hazards */

.climate-layer-controls {
  border: 1px solid rgba(34, 211, 190, 0.25);
  border-radius: 14px;
  overflow: hidden;
}

.climate-layer-controls[open] {
  border-color: rgba(34, 211, 190, 0.5);
}

.climate-layer-controls .ebh-controls-note {
  margin: 12px 0;
  line-height: 1.6;
}

.climate-layer-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Geology & Ground (same item styling as Climate) */

.geology-layer-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.climate-layer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 10px;
  background: rgba(10, 33, 40, 0.55);
  border: 1px solid rgba(66, 198, 188, 0.12);
  border-radius: 8px;
}

.climate-layer-item > span:first-child,
.climate-layer-name {
  flex: 1;
  min-width: 0;
  color: #d7edf0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.climate-layer-item .future-layer-status {
  color: #91a4b0;
  font-size: 10px;
}

.climate-layer-active-item {
  border-color: rgba(44, 232, 198, 0.20);
}

.climate-layer-active {
  flex-shrink: 0;
  padding: 4px 7px;
  background: rgba(44, 232, 198, 0.10);
  border: 1px solid rgba(44, 232, 198, 0.22);
  border-radius: 5px;
  color: #2ce8c6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .climate-layer-item {
    gap: 8px;
    padding: 10px 8px;
  }

  .climate-layer-active {
    padding: 4px 5px;
    font-size: 9px;
  }
}

.geology-assessment-btn {
  display: block;
  width: 100%;
  margin: 14px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #123e43, #0a282e);
  border: 1px solid rgba(48, 240, 211, 0.4);
  border-radius: 9px;
  color: #dffef8;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.geology-assessment-btn:hover {
  background: #17565a;
  border-color: #30f0d3;
}

.geotechnical-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: rgba(10, 33, 40, 0.55);
  border: 1px solid rgba(66, 198, 188, 0.12);
  border-radius: 8px;
}

.geotechnical-preview-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.geotechnical-preview-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.geotechnical-preview-item span {
  color: #91a4b0;
  font-size: 11px;
}

.geotechnical-preview-item strong {
  color: #d7edf0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---------- Selected site & site screening ---------- */

.site-info-section {
  padding: 18px;
  background: #202b2b;
  border: 1px solid #344244;
  border-radius: 12px;
}

.site-info-section h3 {
  margin-top: 12px;
  font-size: 17px;
}

.site-empty {
  color: #a7b4b2;
  font-size: 13px;
  line-height: 1.6;
}

.site-stat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #344244;
  font-size: 12px;
}

.site-stat span {
  color: #a7b4b2;
}

.site-stat strong {
  color: #ff851b;
  font-size: 14px;
}

.site-status {
  margin-top: 15px;
  color: #27ae60;
  font-size: 12px;
}

.analysis-section {
  padding: 18px;
  background: #192a25;
  border: 1px solid #305344;
  border-radius: 12px;
}

.analysis-section h3 {
  margin-top: 12px;
}

.analysis-section p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.analyze-btn {
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  background: var(--orange);
  border: 0;
  border-radius: 8px;
  color: #101418;
  font-weight: bold;
  opacity: 0.55;
  cursor: not-allowed;
}


/* ==========================================================
   4. MAP AREA, MAP CONTROLS & DRAWING TOOLS
========================================================== */

.map-area {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
}

.map-info {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 500;
  padding: 12px 15px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 10px;
  letter-spacing: 1px;
}

/* Zoom: top-left. Basemap selector: below zoom, left side. */

.map-area .leaflet-top.leaflet-left {
  left: 12px;
  top: 0;
}

.map-area .leaflet-top.leaflet-right {
  left: 12px;
  right: auto;
  top: 90px;
}

.map-area .leaflet-top.leaflet-right .leaflet-control {
  float: left;
  clear: both;
  margin: 0;
}

.map-area .leaflet-control-layers {
  border-radius: 10px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .map-area .leaflet-top.leaflet-right {
    top: 85px;
    left: 10px;
  }
}

/* ---------- Drawing toolbar ---------- */

.leaflet-draw.leaflet-control {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 8px;
  min-width: 210px;
  padding: 12px;
  box-sizing: border-box;
  background: #11171a;
  border: 1px solid #364044;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Fallback position if the toolbar is not moved into the right-hand stack */
.map-area .leaflet-draw.leaflet-control {
  position: fixed;
  top: auto;
  left: auto;
  right: 32px;
  bottom: 15px;
  z-index: 850;
  margin: 0;
}

.ts-draw-heading {
  width: 100%;
  padding: 9px 10px 13px;
  margin-bottom: 10px;
  border-bottom: 1px solid #364044;
  box-sizing: border-box;
}

.ts-draw-heading-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff851b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.ts-draw-heading-icon {
  font-size: 17px;
}

.ts-draw-heading-subtitle {
  margin-top: 6px;
  color: #a9b1b5;
  font-size: 11px;
  line-height: 1.5;
}

/* Each section holds a toolbar plus its action buttons */
.leaflet-draw-section {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.leaflet-draw-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
  border: none !important;
}

.leaflet-draw-toolbar a {
  position: relative;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  box-sizing: border-box;
  background-color: #232a2e !important;
  background-image: none !important;
  border: 1px solid #384247 !important;
  border-radius: 9px !important;
  color: #ffffff !important;
}

/* Replace the sprite icons with glyphs */
.leaflet-draw-toolbar a::before {
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
}

.leaflet-draw-draw-polygon::before {
  content: "⬟";
  color: #36c878;
}

.leaflet-draw-edit-edit::before {
  content: "✎";
  color: #ff851b;
}

.leaflet-draw-edit-remove::before {
  content: "×";
  color: #ff8d77;
  font-size: 30px !important;
}

.leaflet-draw-toolbar a:hover {
  background: #343d40 !important;
  border-color: #ff851b !important;
  box-shadow: 0 0 0 2px rgba(255, 133, 27, 0.15);
  transform: translateY(-1px);
}

.leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled {
  background: #193528 !important;
  border-color: #36c878 !important;
}

/* Edit / Delete are disabled until a site exists */
.leaflet-draw-toolbar a.leaflet-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.leaflet-draw-toolbar a.leaflet-disabled:hover {
  transform: none;
  box-shadow: none;
  background: #232a2e !important;
  border-color: #384247 !important;
}

/* Drawing instructions tooltip */
.leaflet-draw-tooltip {
  padding: 8px 12px;
  background: #11171a !important;
  color: #ffffff !important;
  border: 1px solid #ff851b;
  border-radius: 8px;
}

/* Finish / Cancel / Save / Clear All — overlaid on the button row so
   the panel's overflow cannot clip them */
.leaflet-draw-actions {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  z-index: 20;
  white-space: nowrap;
  background: #11171a;
  border-radius: 9px;
}

.leaflet-draw-actions li {
  display: inline-block;
}

.leaflet-draw-actions a {
  height: 46px !important;
  margin-right: 5px;
  padding: 0 9px !important;
  background: #11171a !important;
  color: #ffffff !important;
  border: 1px solid #384247 !important;
  border-radius: 9px;
  font-size: 11px !important;
  line-height: 46px !important;
}

.leaflet-draw-actions a:hover {
  background: #ff851b !important;
  color: #11171a !important;
}

@media (max-width: 768px) {
  .leaflet-draw.leaflet-control {
    min-width: 0;
    padding: 6px;
  }

  .leaflet-draw-toolbar a {
    width: 42px !important;
    height: 42px !important;
  }

  .ts-draw-heading {
    display: none;
  }

  .map-area .leaflet-draw.leaflet-control {
    right: 15px;
    bottom: 15px;
  }
}


/* ==========================================================
   5. SMART LOCATION FINDER & RIGHT-HAND PANEL STACK
========================================================== */

/* Stack that holds the location finder and the drawing toolbar */
.map-area .ts-right-panel-stack {
  position: absolute;
  top: 80px;
  right: 18px;
  z-index: 850;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 310px;
  max-width: calc(100% - 36px);
  max-height: calc(100% - 95px);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Fallback position if the finder is not moved into the stack */
.map-location-overlay {
  position: absolute;
  top: 95px;
  right: 20px;
  z-index: 800;
  width: 340px;
  max-width: calc(100% - 40px);
  pointer-events: none;
}

.map-area .ts-right-panel-stack .map-location-overlay {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

.map-area .ts-right-panel-stack .leaflet-draw.leaflet-control {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none;
  clear: none;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 10px 14px !important;
  box-sizing: border-box;
}

/* ---------- Location finder card ---------- */

.location-finder {
  padding: 20px;
  background: linear-gradient(145deg, #172328 0%, #10191d 100%);
  border: 1px solid rgba(255, 133, 27, 0.55);
  border-radius: 16px;
  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.45),
    0 0 25px rgba(255, 133, 27, 0.08);
  color: #f3f7f8;
  pointer-events: auto;
}

.location-finder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.location-finder-header h3 {
  margin: 7px 0 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
}

.location-finder .eyebrow {
  color: #ff851b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.location-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: #243238;
  border: 1px solid #405057;
  border-radius: 9px;
  color: #ff851b;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.location-toggle:hover {
  background: #35454c;
  transform: scale(1.05);
}

.location-description {
  margin: 0 0 16px;
  color: #aebcc3;
  font-size: 12px;
  line-height: 1.6;
}

.location-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.location-field label {
  color: #dce5e8;
  font-size: 12px;
  font-weight: 700;
}

.location-field select,
.location-field input {
  width: 100%;
  min-width: 0;
  height: 43px;
  padding: 0 12px;
  box-sizing: border-box;
  background: #202d33;
  border: 1px solid #3b4c53;
  border-radius: 9px;
  color: #f2f6f8;
  font-size: 13px;
  outline: none;
}

.location-field select:focus,
.location-field input:focus {
  border-color: #ff851b;
  box-shadow: 0 0 0 3px rgba(255, 133, 27, 0.12);
}

.location-field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.location-field input::placeholder {
  color: #81939c;
}

.location-search-btn {
  display: block;
  width: 100%;
  min-height: 46px;
  background: linear-gradient(135deg, #ff9b35, #e66b17);
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(255, 133, 27, 0.22);
  color: #14191c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.location-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 25px rgba(255, 133, 27, 0.35);
}

.location-feedback {
  margin-top: 10px;
  color: #aebcc3;
  font-size: 12px;
  line-height: 1.5;
}

.location-feedback:empty {
  display: none;
}

.location-finder-body {
  max-height: min(65vh, 520px);
  overflow-y: auto;
}

/* Collapsed state */
.location-finder-body[hidden] {
  display: none !important;
}

.location-finder:has(.location-finder-body[hidden]) .location-finder-header {
  margin-bottom: 0;
}

/* ---------- Compact layout inside the right-hand stack ---------- */

.ts-right-panel-stack .location-finder {
  padding: 14px 16px;
  border-radius: 14px;
}

.ts-right-panel-stack .location-finder-header {
  gap: 8px;
  margin-bottom: 8px;
}

.ts-right-panel-stack .location-finder-header h3 {
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
}

.ts-right-panel-stack .location-description {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.4;
}

.ts-right-panel-stack .location-field {
  gap: 4px;
  margin-bottom: 9px;
}

.ts-right-panel-stack .location-field label {
  margin: 0;
  font-size: 11px;
}

.ts-right-panel-stack .location-field select,
.ts-right-panel-stack .location-field input {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

.ts-right-panel-stack .location-search-btn {
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 12px;
}

.ts-right-panel-stack .location-finder-body {
  max-height: none;
  overflow: visible;
}

@media (max-width: 768px) {
  .map-location-overlay {
    top: 90px;
    right: 10px;
    width: 300px;
    max-width: calc(100% - 20px);
  }

  .map-area .ts-right-panel-stack {
    top: 75px;
    right: 10px;
    width: min(350px, calc(100% - 20px));
    max-height: calc(100% - 90px);
  }
}


/* ==========================================================
   6. SITE ANALYSIS POPUP
========================================================== */

.leaflet-popup.terrascout-popup .leaflet-popup-content-wrapper {
  padding: 0;
  background: #11171a;
  color: #f5f7f8;
  border: 1px solid #354044;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

.leaflet-popup.terrascout-popup .leaflet-popup-content {
  width: 310px !important;
  max-width: calc(100vw - 65px);
  max-height: 65vh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.leaflet-popup.terrascout-popup .leaflet-popup-tip {
  background: #11171a;
}

.leaflet-popup.terrascout-popup .leaflet-popup-close-button {
  top: 10px !important;
  right: 12px !important;
  z-index: 5;
  color: #c5cbce !important;
  font-size: 23px !important;
}

.leaflet-popup.terrascout-popup .leaflet-popup-close-button:hover {
  color: #ff851b !important;
}

.ts-popup {
  padding: 22px;
  font-family: Arial, sans-serif;
}

.ts-popup-brand {
  color: #ff851b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.ts-popup-title {
  margin: 5px 0 17px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 800;
}

.ts-popup-divider {
  margin: 15px 0;
  border-top: 1px solid #303a3d;
}

.ts-popup-section-title {
  margin: 14px 0 10px;
  color: #ff851b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.ts-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 13px 0;
  font-size: 13px;
}

.ts-popup-label {
  color: #a9b1b5;
}

.ts-popup-value {
  color: #ffffff;
  font-weight: 700;
}

.ts-popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 17px 0;
}

.ts-popup-metric {
  padding: 13px 10px;
  background: #222a2e;
  border: 1px solid #343f43;
  border-radius: 10px;
}

.ts-popup-metric-label {
  margin-bottom: 9px;
  color: #a9b1b5;
  font-size: 10px;
  letter-spacing: 1px;
}

.ts-popup-metric-value {
  color: #ffffff;
  font-size: 21px;
  font-weight: 800;
}

.ts-popup-metric-value.orange {
  color: #ff851b;
}

.ts-popup-unit {
  font-size: 12px;
  font-weight: 500;
}

.ts-popup-valid {
  margin-top: 15px;
  color: #29c978;
  font-size: 12px;
  font-weight: 700;
}

.ts-popup-note {
  margin-top: 13px;
  color: #a9b1b5;
  font-size: 11px;
  line-height: 1.6;
}

/* Intersection warning */
.ts-popup-warning {
  margin-top: 12px;
  padding: 12px;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid #ef4444;
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  color: #ff5c5c;
  font-size: 12px;
  font-weight: 800;
}

.ts-popup-reserve {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 9px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 7px;
  color: #ffffff;
  font-size: 11px;
}

.ts-popup-reserve span {
  color: #ff5c5c;
  font-weight: 800;
  white-space: nowrap;
}

.ts-natura-code {
  margin-top: 5px;
  color: #aab3b8;
  font-size: 10px;
  letter-spacing: 0.3px;
}

/* Protected overlap values (red = overlap, green = none) */
.terrascout-popup .ts-overlap-danger {
  color: #ff5c5c !important;
  font-size: 14px;
  font-weight: 800;
}

.terrascout-popup .ts-overlap-safe {
  color: #36c878 !important;
  font-size: 14px;
  font-weight: 800;
}

/* ---------- Accordions ---------- */

.ts-accordion {
  margin: 12px 0;
  background: #151d20;
  border: 1px solid #354044;
  border-radius: 10px;
  overflow: hidden;
}

.ts-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px;
  background: #202a2e;
  border: none;
  color: #ff851b;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-align: left;
  cursor: pointer;
}

.ts-accordion-header:hover {
  background: #29363a;
}

.ts-accordion-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.ts-accordion-arrow {
  color: #ff851b;
  transition: transform 0.2s ease;
}

.ts-accordion-content {
  display: none;
  padding: 14px;
}

.ts-accordion-open .ts-accordion-content {
  display: block;
}

.ts-accordion-open .ts-accordion-arrow {
  transform: rotate(180deg);
}

.ts-accordion-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

.ts-status-danger {
  color: #ff5c5c;
}

.ts-status-safe {
  color: #2fcb84;
}

.ts-status-unknown {
  color: #aab3b8;
}

/* ---------- Environmental summary ---------- */

.ts-summary {
  margin: 16px 0;
}

.ts-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.ts-summary-card {
  min-width: 0;
  padding: 12px 5px;
  background: #202a2e;
  border: 1px solid #354044;
  border-radius: 10px;
  text-align: center;
}

.ts-summary-number {
  color: #ffffff;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

.ts-summary-label {
  margin-top: 6px;
  color: #aab3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ts-summary-danger {
  color: #ff5c5c;
}

.ts-summary-safe {
  color: #2fcb84;
}

.ts-summary-pending {
  color: #ffb15c;
}

.ts-summary-message {
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.ts-summary-message-danger {
  background: #2a171b;
  color: #ff5c5c;
  border: 1px solid #ef4444;
}

.ts-summary-message-pending {
  background: #2a2418;
  color: #ffb15c;
  border: 1px solid #9c6828;
}

.ts-summary-message-safe {
  background: #142820;
  color: #2fcb84;
  border: 1px solid #2fcb84;
}


/* ==========================================================
   7. SITE ASSESSMENT WORKSPACE (CORE DASHBOARD)
========================================================== */

.assessment-workspace {
  width: 100%;
  min-height: 0;
  padding: 28px;
  background: #152126;
  color: #f1f5f9;
  overflow-y: auto;
}

.assessment-workspace[hidden] {
  display: none !important;
}

.assessment-workspace:not([hidden]) {
  display: block;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.assessment-heading {
  margin-bottom: 26px;
}

.assessment-heading h2 {
  margin: 10px 0;
  font-size: 24px;
}

.assessment-heading p {
  color: #a9bac1;
  font-size: 13px;
  line-height: 1.7;
}

/* Introductory card shown before a site is assessed */

.assessment-card {
  max-width: 650px;
  padding: 30px;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 14px;
}

.assessment-card[hidden] {
  display: none !important;
}

.assessment-card-icon {
  color: #fb923c;
  font-size: 32px;
}

.assessment-card h3 {
  margin: 14px 0;
  font-size: 19px;
}

.assessment-card p {
  color: #a9bac1;
  font-size: 14px;
  line-height: 1.7;
}

.assessment-status {
  margin-top: 20px;
  padding: 12px;
  background: #26373d;
  border-radius: 8px;
  color: #fb923c;
  font-size: 12px;
}

/* Results container */

.assessment-results {
  width: 100%;
}

.assessment-results[hidden] {
  display: none !important;
}

.assessment-results:not([hidden]) {
  display: block;
  position: relative;
  min-height: 300px;
}

.assessment-disclaimer {
  margin-top: 20px;
  color: #a9bac1;
  font-size: 12px;
  line-height: 1.6;
}

/* Status banner (green by default) */

.assessment-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  padding: 20px 24px;
  background: #183329;
  border: 1px solid #287d54;
  border-left: 4px solid #36c878;
  border-radius: 12px;
}

.assessment-status-icon {
  color: #36c878;
  font-size: 24px;
  font-weight: 800;
}

.assessment-status-banner strong {
  color: #f1f5f9;
  font-size: 15px;
}

.assessment-status-banner p {
  margin: 8px 0 0;
  color: #b5c8c0;
  font-size: 12px;
  line-height: 1.6;
}

/* Constraints detected — red */
.assessment-status-banner.status-warning {
  background: #5c1b24;
  border: 1px solid #dc3545;
  border-left: 5px solid #ff4d5a;
}

.assessment-status-banner.status-warning .assessment-status-icon {
  color: #ff6b75;
}

.assessment-status-banner.status-warning strong {
  color: #ffffff;
}

.assessment-status-banner.status-warning p {
  color: #ffe1e4;
}

/* Screening incomplete — blue */
.assessment-status-banner.status-incomplete {
  background: #202d3b;
  border-color: #47749b;
  border-left-color: #60a5fa;
}

.assessment-status-banner.status-incomplete .assessment-status-icon {
  color: #60a5fa;
}

/* Metrics */

.assessment-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-bottom: 24px;
}

.assessment-metric {
  padding: 22px;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 12px;
}

.assessment-metric span {
  display: block;
  color: #a9bac1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.assessment-metric strong {
  display: block;
  margin-top: 12px;
  color: #fb923c;
  font-size: 26px;
}

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

@media (max-width: 480px) {
  .assessment-metrics {
    grid-template-columns: 1fr;
  }
}

/* Section headings shared by assessment panels */

.assessment-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.assessment-section-heading h3 {
  margin: 7px 0 0;
  color: #f1f5f9;
  font-size: 19px;
}

.assessment-data-label {
  padding: 7px 11px;
  background: #26373d;
  border: 1px solid #34454b;
  border-radius: 6px;
  color: #a9bac1;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .assessment-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Site information */

.assessment-site-info {
  margin-bottom: 24px;
  padding: 24px;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 12px;
}

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

.assessment-site-field {
  padding: 16px;
  background: #152126;
  border: 1px solid #34454b;
  border-radius: 9px;
}

.assessment-site-field span {
  display: block;
  margin-bottom: 9px;
  color: #a9bac1;
  font-size: 11px;
}

.assessment-site-field strong {
  color: #f1f5f9;
  font-size: 15px;
  overflow-wrap: anywhere;
}

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

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

/* Data sources & reliability */

.assessment-data-sources {
  margin-bottom: 24px;
  padding: 24px;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 12px;
}

.assessment-source-description {
  margin: 0 0 20px;
  color: #b7c7cd;
  font-size: 13px;
  line-height: 1.7;
}

.assessment-source-list {
  border: 1px solid #34454b;
  border-radius: 9px;
  overflow: hidden;
}

.assessment-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #152126;
  border-bottom: 1px solid #34454b;
}

.assessment-source-row:last-child {
  border-bottom: none;
}

.assessment-source-row span {
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 600;
}

.assessment-source-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.assessment-source-details small {
  color: #8ecdc2;
  font-size: 11px;
}

.assessment-source-status {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.assessment-source-status.source-checked {
  background: #183329;
  border: 1px solid #287d54;
  color: #4ade80;
}

.assessment-source-status.source-unavailable {
  background: #382c18;
  border: 1px solid #926b20;
  color: #fbbf24;
}

.assessment-source-note {
  margin: 18px 0 0;
  padding: 13px 16px;
  background: #202d34;
  border-left: 3px solid #fb923c;
  border-radius: 5px;
  color: #c1cdd3;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .assessment-source-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* Environmental screening results */

.assessment-findings {
  display: block;
  width: 100%;
  padding: 24px;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 12px;
}

.assessment-findings h3 {
  margin: 0 0 10px;
  font-size: 19px;
}

.assessment-findings p {
  color: #a9bac1;
  font-size: 13px;
  line-height: 1.6;
}

.assessment-finding {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 17px 14px;
  border-bottom: 1px solid #34454b;
}

.assessment-finding:last-child {
  border-bottom: none;
}

.assessment-finding strong {
  font-size: 14px;
}

.assessment-finding span {
  color: #a9bac1;
  font-size: 12px;
  text-align: right;
}

.assessment-finding-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assessment-finding-details strong {
  color: #f1f5f9;
  font-size: 14px;
}

.assessment-finding-details small {
  color: #a9bac1;
  font-size: 11px;
  line-height: 1.5;
}

.assessment-finding-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 11px !important;
  font-weight: 700;
  white-space: nowrap;
}

.finding-clear .assessment-finding-status {
  background: #183329;
  border: 1px solid #287d54;
  color: #4ade80;
}

.finding-warning .assessment-finding-status {
  background: #4a2029;
  border: 1px solid #dc3545;
  color: #ff8088;
}

.finding-unavailable .assessment-finding-status {
  background: #382c18;
  border: 1px solid #926b20;
  color: #fbbf24;
}

@media (max-width: 600px) {
  .assessment-finding {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Protected area details */

#protected-area-details[hidden] {
  display: none !important;
}

#protected-area-details:not([hidden]) {
  display: block;
  margin: 24px 0;
  padding: 26px;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 12px;
}

.protected-area-description {
  margin: 14px 0 24px;
  color: #a9bac1;
  font-size: 13px;
  line-height: 1.7;
}

#protected-area-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#protected-area-list .protected-area-card {
  display: block;
  min-width: 0;
  padding: 22px;
  background: #142127;
  border: 1px solid #34454b;
  border-left: 4px solid #ef4444;
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

#protected-area-list .protected-area-card:hover {
  border-color: #fb923c;
  border-left-color: #ef4444;
}

.protected-area-card h4 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.4;
}

.protected-area-card p {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2b3b42;
  color: #c5d3da;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.protected-area-card p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.protected-area-note {
  margin: 24px 0 0;
  padding: 16px 18px;
  background: #263037;
  border-left: 3px solid #fb923c;
  border-radius: 7px;
  color: #c5d3da;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  #protected-area-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #protected-area-details:not([hidden]) {
    padding: 16px;
  }

  #protected-area-list .protected-area-card {
    padding: 16px;
  }
}


/* ==========================================================
   8. CONTAMINATED LAND (EBH)
========================================================== */

.assessment-ebh {
  margin-top: 24px;
  padding: 24px;
  background: #1b292e;
  border: 1px solid #34454b;
  border-radius: 12px;
}

.assessment-ebh[hidden] {
  display: none !important;
}

.assessment-ebh-description {
  margin: 14px 0 22px;
  color: #a9bac1;
  font-size: 13px;
  line-height: 1.7;
}

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

.assessment-ebh-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #152126;
  border: 1px solid #405159;
  border-radius: 10px;
}

.assessment-ebh-stat:first-child {
  border-left: 4px solid #ef4444;
}

.assessment-ebh-stat:nth-child(2) {
  border-left: 4px solid #f59e0b;
}

.assessment-ebh-stat span {
  color: #a9bac1;
  font-size: 13px;
  font-weight: 500;
}

.assessment-ebh-stat strong {
  color: #f1f5f9;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.assessment-ebh-note {
  margin: 20px 0 0;
  padding: 14px;
  background: #202d34;
  border-left: 3px solid #fb923c;
  border-radius: 6px;
  color: #b8c8ce;
  font-size: 12px;
  line-height: 1.7;
}

#assessment-ebh-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.assessment-ebh-record {
  min-width: 0;
  padding: 18px;
  background: #152126;
  border: 1px solid #405159;
  border-left: 4px solid #64748b;
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.assessment-ebh-record:hover {
  background: #1a2b31;
  border-color: #64748b;
}

.assessment-ebh-record h4 {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #34454b;
  color: #f1f5f9;
  font-size: 16px;
  font-weight: 700;
}

.assessment-ebh-record p {
  margin: 8px 0;
  color: #b8c8ce;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.assessment-ebh-record p strong {
  color: #e2e8f0;
  font-weight: 600;
}

.ebh-view-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 16px;
  background: #20363a;
  border: 1px solid #3b625d;
  border-radius: 8px;
  color: #34d399;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ebh-view-map-btn:hover {
  background: #294b48;
  border-color: #34d399;
}

.ebh-view-map-btn:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 3px;
}

@media (max-width: 850px) {
  #assessment-ebh-records {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .assessment-ebh {
    padding: 16px;
  }

  .assessment-ebh-stats {
    grid-template-columns: 1fr;
  }

  .assessment-ebh-stat {
    padding: 16px;
  }
}


/* ==========================================================
   9. FLOOD INTELLIGENCE
========================================================== */

@property --flood-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes floodRingReveal {
  from {
    opacity: 0.4;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.assessment-flood {
  margin-top: 24px;
  padding: 24px;
  background: #142024;
  border: 1px solid #33454a;
  border-radius: 16px;
}

.assessment-flood-description {
  margin: 14px 0 20px;
  color: #aebfc3;
  font-size: 14px;
  line-height: 1.7;
}

#assessment-flood-status {
  color: #dce8ea;
  font-size: 13px;
  line-height: 1.6;
}

.assessment-flood-note {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #33454a;
  color: #93a6aa;
  font-size: 12px;
  line-height: 1.7;
}

.flood-intelligence {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.5fr);
  gap: 22px;
  margin-top: 24px;
}

.flood-intelligence-primary,
.flood-intelligence-scenarios {
  position: relative;
  padding: 26px;
  background: linear-gradient(145deg, #10252e 0%, #0b171f 100%);
  border: 1px solid rgba(41, 214, 190, 0.18);
  border-radius: 18px;
  overflow: hidden;
}

.flood-intelligence-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.flood-intelligence-primary::before,
.flood-intelligence-scenarios::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 231, 201, 0.75), transparent);
}

.flood-intelligence .eyebrow {
  color: #72e5d4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
}

/* Circular exposure indicator */

.flood-exposure-ring {
  --flood-progress: 0%;
  width: min(220px, 100%);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 50%;
  background: conic-gradient(
    #2ce5c7 0%,
    #16a6c2 var(--flood-progress),
    #253b45 var(--flood-progress),
    #253b45 100%
  );
  box-shadow:
    0 0 32px rgba(27, 205, 184, 0.12),
    inset 0 0 16px rgba(30, 220, 190, 0.15);
  animation: floodRingReveal 1.2s ease-out both;
  transition: --flood-progress 1.2s ease-out;
}

.flood-exposure-ring-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 15px;
  border-radius: 50%;
  background: radial-gradient(circle, #152f39 0%, #091820 100%);
}

.flood-exposure-ring-inner span {
  color: #a3bec8;
  font-size: 9px;
  letter-spacing: 1px;
  line-height: 1.5;
}

.flood-exposure-ring-inner strong {
  color: #36ebcd;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.flood-exposure-ring-inner small {
  color: #91aab5;
  font-size: 11px;
}

.flood-intelligence-caption {
  max-width: 260px;
  color: #9fb6c0;
  font-size: 12px;
  line-height: 1.7;
}

/* Scenario bars */

.flood-intelligence-scenarios {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
}

.flood-scenarios-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.flood-scenarios-count {
  color: #8ba6b1;
  font-size: 10px;
  letter-spacing: 1px;
}

.flood-scenario-row {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr) 155px;
  align-items: center;
  gap: 18px;
}

.flood-scenario-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.flood-scenario-label strong {
  color: #f3fbff;
  font-size: 15px;
}

.flood-scenario-label span {
  color: #8eaab6;
  font-size: 11px;
}

.flood-scenario-track {
  height: 11px;
  background: #243b45;
  border-radius: 20px;
  overflow: hidden;
}

.flood-scenario-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #168ca8, #29e5c6);
  box-shadow: 0 0 14px rgba(41, 229, 198, 0.45);
  transition: width 1s ease;
}

.flood-scenario-row > strong {
  color: #40e7ce;
  font-size: 15px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* One colour per scenario */

#flood-bar-q50 {
  background: linear-gradient(90deg, #087f88, #24e0cb);
  box-shadow: 0 0 14px rgba(36, 224, 203, 0.35);
}

#flood-bar-q100 {
  background: linear-gradient(90deg, #1457b8, #48b6ff);
  box-shadow: 0 0 14px rgba(72, 182, 255, 0.35);
}

#flood-bar-q200 {
  background: linear-gradient(90deg, #ad711a, #f3c35a);
  box-shadow: 0 0 14px rgba(243, 195, 90, 0.35);
}

#flood-bar-qbhf {
  background: linear-gradient(90deg, #c64e20, #ff9959);
  box-shadow: 0 0 14px rgba(255, 153, 89, 0.4);
}

#flood-q50 {
  color: #24e0cb;
}

#flood-q100 {
  color: #48b6ff;
}

#flood-q200 {
  color: #f3c35a;
}

#flood-qbhf {
  color: #ff9959;
}

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

  .flood-scenario-row {
    grid-template-columns: 125px minmax(0, 1fr) 130px;
  }
}

@media (max-width: 650px) {
  .assessment-flood {
    padding: 16px;
  }
}

@media (max-width: 600px) {
  .flood-intelligence-primary,
  .flood-intelligence-scenarios {
    padding: 20px 16px;
  }

  .flood-scenario-row {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .flood-scenario-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .flood-scenario-row > strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
  }
}


/* ==========================================================
   10. LANDSLIDE SCANNER
========================================================== */

@keyframes landslideScan {
  from { top: -65px; }
  to { top: 100%; }
}

.assessment-landslide {
  margin-top: 28px;
  padding: 28px;
  background: #111e23;
  border: 1px solid #26444d;
  border-radius: 18px;
}

.landslide-description {
  margin: 14px 0;
  color: #a9c0c9;
  line-height: 1.7;
}

#landslide-screening-status {
  margin: 16px 0 22px;
  color: #35d9c0;
  font-size: 13px;
}

.landslide-console {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}

.landslide-scanner {
  padding: 20px;
  background: linear-gradient(145deg, #0d2932, #07171d);
  border: 1px solid #24515b;
  border-radius: 16px;
  overflow: hidden;
}

.landslide-scanner-heading,
.landslide-detection-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #36dcc7;
  font-size: 10px;
  letter-spacing: 1.4px;
}

.landslide-scanner-viewport {
  position: relative;
  height: 270px;
  margin-top: 20px;
  background:
    radial-gradient(ellipse at center, rgba(26, 116, 124, 0.23), transparent 65%),
    #07171d;
  border: 1px solid #20444e;
  border-radius: 12px;
  overflow: hidden;
}

/* Leaflet map showing the real site geometry */
.landslide-geometry-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #071b22;
}

/* Technical grid over the map */
.landslide-scanner-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(39, 206, 191, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 206, 191, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}

.landslide-scanner-viewport::after {
  content: "SGU / GEOSPATIAL ANALYSIS";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 420;
  color: rgba(79, 226, 210, 0.55);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  pointer-events: none;
}

.landslide-scan-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: -65px;
  z-index: 410;
  height: 65px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(40, 225, 196, 0.13),
    rgba(40, 225, 196, 0.5)
  );
  border-bottom: 1px solid #2ce5c6;
  box-shadow: 0 6px 24px rgba(40, 225, 196, 0.16);
  opacity: 0.35;
  pointer-events: none;
  animation: landslideScan 5s linear infinite;
}

/* Basemap switch */

.landslide-map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: rgba(5, 19, 25, 0.92);
  border: 1px solid rgba(44, 232, 198, 0.35);
  border-radius: 9px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.landslide-view-btn {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #9bb9bd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.landslide-view-btn:hover {
  background: rgba(44, 232, 198, 0.10);
  color: #ffffff;
}

.landslide-view-btn.active {
  background: #2ce8c6;
  border-color: #2ce8c6;
  color: #031b1b;
}

.landslide-view-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Map legend */

.landslide-map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 450;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(5, 19, 25, 0.88);
  border: 1px solid rgba(63, 181, 175, 0.25);
  border-radius: 8px;
  color: #c7e5e7;
  font-size: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.landslide-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.landslide-map-legend span::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.landslide-legend-site::before {
  background: #2ce8c6;
}

.landslide-legend-shoreline::before {
  background: #36c9ed;
}

.landslide-legend-slope::before {
  background: #ff9b3d;
}

.landslide-scan-caption {
  margin-top: 16px;
  color: #829fa8;
  font-size: 11px;
  line-height: 1.6;
}

/* Detection panels */

.landslide-detections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landslide-detection {
  flex: 1;
  padding: 22px;
  background: linear-gradient(120deg, #142b33, #0b1d24);
  border: 1px solid #294b54;
  border-radius: 14px;
}

.landslide-detection strong {
  display: block;
  margin: 18px 0 8px;
  color: #f0ffff;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -1px;
}

.landslide-detection p {
  margin: 0;
  color: #8eaab3;
  font-size: 12px;
}

.landslide-coverage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: rgba(27, 105, 91, 0.15);
  border: 1px solid #25665c;
  border-radius: 14px;
}

.landslide-coverage span {
  color: #35e3c4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.landslide-coverage p {
  margin: 8px 0 0;
  color: #a0b8bf;
  font-size: 11px;
}

.landslide-coverage strong {
  color: #35e3c4;
  font-size: 30px;
  white-space: nowrap;
}

.landslide-disclaimer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #29444c;
  color: #a2b9c1;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .landslide-console {
    grid-template-columns: 1fr;
  }

  .landslide-scanner-viewport {
    height: 230px;
  }
}

@media (max-width: 600px) {
  .assessment-landslide {
    padding: 18px;
  }

  .landslide-detection-heading {
    flex-wrap: wrap;
  }

  .landslide-map-controls {
    top: 8px;
    right: 8px;
    padding: 3px;
  }

  .landslide-view-btn {
    padding: 6px 8px;
    font-size: 10px;
  }

  .landslide-map-legend {
    left: 8px;
    bottom: 8px;
    gap: 8px;
    padding: 8px;
    font-size: 9px;
  }
}


/* ==========================================================
   11. GEOLOGICAL INTELLIGENCE
========================================================== */

.geology-intelligence-panel {
  position: relative;
  margin-top: 24px;
  padding: 26px;
  background: linear-gradient(145deg, #0a1821 0%, #112b34 52%, #07151d 100%);
  border: 1px solid rgba(45, 229, 203, 0.25);
  border-radius: 18px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.geology-intelligence-panel[hidden] {
  display: none !important;
}

.geology-intelligence-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2de5cb, #f3a54b, transparent);
  box-shadow: 0 0 18px rgba(45, 229, 203, 0.35);
}

/* ---------- Header ---------- */

.geology-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

.geology-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #43e6d0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.geology-panel-header h2 {
  margin: 0 0 9px;
  color: #f1fbfc;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -0.6px;
}

.geology-panel-header p {
  max-width: 500px;
  margin: 0;
  color: #94b1bb;
  font-size: 13px;
  line-height: 1.7;
}

.geology-live-status {
  flex-shrink: 0;
  padding: 9px 12px;
  background: rgba(45, 229, 203, 0.08);
  border: 1px solid rgba(45, 229, 203, 0.24);
  border-radius: 7px;
  color: #4debd3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

/* ---------- Metrics ---------- */

.geology-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.geology-metric-card {
  position: relative;
  min-width: 0;
  padding: 20px;
  background: linear-gradient(160deg, rgba(27, 66, 76, 0.85), rgba(7, 24, 33, 0.95));
  border: 1px solid rgba(73, 203, 192, 0.18);
  border-radius: 12px;
  overflow: hidden;
}

.geology-metric-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -40px;
  width: 100px;
  height: 100px;
  background: rgba(45, 229, 203, 0.07);
  border-radius: 50%;
  filter: blur(18px);
}

.geology-metric-card > span {
  display: block;
  margin-bottom: 12px;
  color: #96b5bf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.geology-metric-card strong {
  display: block;
  color: #44efd4;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}

.geology-metric-card:nth-child(2) strong {
  color: #f4b363;
}

.geology-metric-card small {
  display: block;
  margin-top: 8px;
  color: #779ca8;
  font-size: 11px;
}

/* ---------- Two-column dashboard: composition + map ---------- */

.geology-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.7fr);
  gap: 24px;
  align-items: start;
  margin-top: 28px;
}

.geology-composition-column {
  display: block;
  align-self: start;
  min-width: 0;
}

.geology-map-column {
  display: flex;
  min-width: 0;
}

/* Composition panel */

.geology-results-panel {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 26px;
  background:
    radial-gradient(circle at top left, rgba(28, 221, 202, 0.09), transparent 55%),
    linear-gradient(145deg, #0c252d, #07171e);
  border: 1px solid rgba(36, 222, 204, 0.22);
  border-radius: 18px;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.geology-results-panel h3 {
  margin: 0 0 22px;
  color: #f3fbff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

#geology-soil-results {
  max-height: 480px;
  padding-right: 10px;
  overflow-y: auto;
  color: #a5c1c9;
  font-size: 13px;
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: #20d9c8 #102a31;
}

#geology-soil-results::-webkit-scrollbar {
  width: 5px;
}

#geology-soil-results::-webkit-scrollbar-track {
  background: #102a31;
  border-radius: 10px;
}

#geology-soil-results::-webkit-scrollbar-thumb {
  background: #20d9c8;
  border-radius: 10px;
}

/* One card per mapped soil type (click highlights it on the map) */

.geology-composition-card {
  position: relative;
  margin-bottom: 12px;
  padding: 20px 22px;
  background: linear-gradient(110deg, rgba(27, 70, 79, 0.7), rgba(6, 27, 35, 0.95));
  border: 1px solid rgba(39, 209, 194, 0.19);
  border-left: 3px solid #23e2cf;
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.geology-composition-card:hover {
  border-color: rgba(35, 226, 207, 0.65);
  box-shadow: 0 0 22px rgba(35, 226, 207, 0.10);
  transform: translateX(4px);
}

.geology-composition-card:focus-visible {
  outline: 2px solid #30f0d3;
  outline-offset: 3px;
}

.geology-composition-header,
.geology-composition-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.geology-composition-header {
  color: #f3fbff;
  font-size: 14px;
}

.geology-composition-area {
  color: #ffab54;
  font-size: 16px;
  white-space: nowrap;
}

.geology-composition-progress {
  height: 10px;
  margin: 18px 0 12px;
  background: #06171e;
  border-radius: 20px;
  overflow: hidden;
}

.geology-composition-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 0.6s ease;
}

.geology-composition-footer {
  color: #8eacb8;
  font-size: 12px;
}

.geology-composition-footer strong {
  color: #31e7d3;
  font-size: 14px;
}

/* ---------- Spatial viewer ---------- */

.geology-spatial-panel {
  position: relative;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  background: #081d26;
  border: 1px solid rgba(36, 222, 204, 0.22);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.geology-spatial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(110deg, #102e37, #091c26);
  border-bottom: 1px solid rgba(44, 229, 202, 0.18);
}

.geology-spatial-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #37e7cf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.geology-spatial-header h3 {
  margin: 0 0 7px;
  color: #f0fafb;
  font-size: 19px;
  font-weight: 800;
}

.geology-spatial-header p {
  margin: 0;
  color: #8cabb6;
  font-size: 12px;
  line-height: 1.6;
}

.geology-spatial-status {
  padding: 9px 13px;
  background: rgba(43, 227, 199, 0.08);
  border: 1px solid rgba(43, 227, 199, 0.24);
  border-radius: 8px;
  color: #42ebd0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.geology-spatial-viewport {
  position: relative;
  height: 500px;
  min-height: 500px;
  background:
    radial-gradient(ellipse at center, rgba(34, 106, 112, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(58, 210, 193, 0.04) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(58, 210, 193, 0.04) 40px),
    #06151d;
  overflow: hidden;
}

#geology-spatial-map {
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.geology-spatial-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 500;
  padding: 9px 13px;
  background: rgba(4, 21, 28, 0.88);
  border: 1px solid rgba(52, 232, 205, 0.3);
  border-radius: 7px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
  color: #4df0d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.geology-spatial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 18px;
  background: #0a202a;
  border-top: 1px solid rgba(44, 229, 202, 0.14);
}

.geology-spatial-footer span {
  color: #8daab5;
  font-size: 10px;
  letter-spacing: 0.3px;
}

/* Map legend (Leaflet control) */

.geology-map-legend {
  min-width: 245px;
  max-width: 290px;
  max-height: 220px;
  padding: 16px 18px;
  background: rgba(7, 30, 39, 0.96);
  border: 1px solid rgba(48, 240, 211, 0.25);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  color: #eaf8fa;
  overflow-y: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.geology-map-legend > strong {
  display: block;
  margin-bottom: 14px;
  color: #30f0d3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.geology-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 13px;
}

.geology-legend-swatch {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}

.geology-legend-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.geology-legend-name {
  display: block;
  color: #f1fbff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.geology-legend-metrics {
  display: block;
  color: #78cbd2;
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.geology-legend-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #91aeb8;
  font-size: 10px;
  line-height: 1.5;
}

/* ---------- Geological interpretation ---------- */

.geology-interpretation-panel {
  position: relative;
  isolation: isolate;
  margin-top: 30px;
  padding: 30px;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(36, 196, 174, 0.10), transparent 55%),
    linear-gradient(145deg, #102d37, #071b25);
  border: 1px solid rgba(47, 234, 211, 0.26);
  border-radius: 18px;
  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(112, 255, 234, 0.08);
  overflow: hidden;
}

.geology-interpretation-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #30f0d3, #ff9e45, transparent);
  opacity: 0.9;
}

/* Subtle GIS-style grid */
.geology-interpretation-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(48, 240, 211, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 240, 211, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

.geology-interpretation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.geology-interpretation-heading h3 {
  margin: 12px 0;
  color: #f1fbff;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.geology-interpretation-heading p {
  margin: 0;
  color: #9ab9c5;
  font-size: 13px;
  line-height: 1.8;
}

.geology-interpretation-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
  padding: 18px;
  background: rgba(3, 17, 24, 0.35);
  border: 1px dashed rgba(48, 240, 211, 0.20);
  border-radius: 12px;
  color: #b8d4dc;
  font-size: 13px;
  line-height: 1.7;
}

/* One card per mapped soil type; --geology-accent is set from JS */

.geology-interpretation-card {
  --geology-accent: #30f0d3;
  position: relative;
  min-width: 0;
  padding: 22px;
  background: linear-gradient(145deg, #12313c, #071b25);
  background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--geology-accent) 12%, transparent),
      transparent 55%
    ),
    linear-gradient(145deg, #12313c, #071b25);
  border: 1px solid rgba(78, 201, 190, 0.20);
  border-left: 4px solid var(--geology-accent);
  border-radius: 14px;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.geology-interpretation-card:hover {
  border-color: rgba(48, 240, 211, 0.60);
}

.geology-interpretation-card::before {
  content: "SGU / GEOLOGICAL CLASSIFICATION";
  display: block;
  margin-bottom: 14px;
  color: var(--geology-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.geology-interpretation-card h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #f2fbff;
  font-size: 18px;
}

.geology-interpretation-card h4::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background: var(--geology-accent);
  border-radius: 3px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--geology-accent) 45%, transparent);
}

.geology-interpretation-card p {
  margin: 8px 0;
  padding-top: 9px;
  border-top: 1px solid rgba(80, 171, 174, 0.12);
  color: #abc6ce;
  font-size: 13px;
  line-height: 1.7;
}

.geology-interpretation-card strong {
  color: #30f0d3;
}

@media (prefers-reduced-motion: no-preference) {
  .geology-interpretation-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.32),
      0 0 18px rgba(48, 240, 211, 0.08);
  }
}

/* Unclassified geology warning */

#geology-unclassified-warning {
  display: block;
  margin: 24px 0;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.17), rgba(120, 53, 15, 0.16));
  border: 2px solid #f59e0b;
  border-left: 7px solid #f59e0b;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.12);
  color: #fff3d6;
}

#geology-unclassified-warning[hidden] {
  display: none !important;
}

#geology-unclassified-warning strong {
  color: #ffcc66;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}

#geology-unclassified-warning p {
  margin-top: 10px;
  color: #ffe8ba;
  font-size: 14px;
  line-height: 1.7;
}

.geology-warning-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.geology-warning-icon {
  flex-shrink: 0;
  color: #ffb020;
  font-size: 42px;
  line-height: 1;
}

/* Ground investigation recommendations */

.geology-investigation-panel {
  margin-top: 28px;
  padding: 26px;
  background: linear-gradient(145deg, #102e38 0%, #071c26 100%);
  border: 1px solid rgba(48, 240, 211, 0.2);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.geology-investigation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.geology-investigation-header h3 {
  margin: 10px 0;
  color: #f1fbff;
  font-size: 22px;
  font-weight: 800;
}

.geology-investigation-header p {
  margin: 0;
  color: #9ab9c5;
  font-size: 14px;
  line-height: 1.6;
}

.geology-investigation-status {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: rgba(255, 166, 70, 0.1);
  border: 1px solid rgba(255, 166, 70, 0.4);
  border-radius: 6px;
  color: #ffb15e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.geology-investigation-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.geology-investigation-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: rgba(6, 28, 37, 0.75);
  border: 1px solid rgba(48, 240, 211, 0.13);
  border-radius: 10px;
  color: #c8dce2;
  font-size: 13px;
  line-height: 1.6;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.geology-investigation-item:hover {
  background: rgba(16, 55, 65, 0.85);
  border-color: rgba(48, 240, 211, 0.45);
}

.geology-investigation-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: rgba(48, 240, 211, 0.12);
  border-radius: 7px;
  color: #30f0d3;
  font-size: 14px;
  font-weight: 800;
}

/* Disclaimers */

.geology-disclaimer {
  margin-top: 20px;
  padding: 13px 16px;
  background: rgba(243, 165, 75, 0.07);
  border-left: 3px solid #f3a54b;
  border-radius: 0 8px 8px 0;
  color: #b6c7cb;
  font-size: 12px;
  line-height: 1.7;
}

.geology-interpretation-panel .geology-disclaimer {
  margin-top: 22px;
  padding: 16px 18px;
  background: rgba(255, 165, 77, 0.07);
  border-left-color: #ffa54d;
  border-radius: 8px;
  color: #bcd0d6;
  line-height: 1.8;
}

/* ---------- Geology responsive ---------- */

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

  /* Map first when stacked */
  .geology-map-column {
    order: 1;
  }

  .geology-composition-column {
    order: 2;
  }
}

@media (max-width: 900px) {
  .geology-interpretation-panel {
    padding: 20px;
  }

  .geology-interpretation-results {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}

@media (max-width: 850px) {
  .geology-panel-header {
    flex-direction: column;
  }

  .geology-metrics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .geology-investigation-panel {
    padding: 18px;
  }

  .geology-investigation-checklist {
    grid-template-columns: 1fr;
  }

  .geology-investigation-header h3 {
    font-size: 19px;
  }
}

@media (max-width: 700px) {
  .geology-spatial-header {
    padding: 16px;
  }

  .geology-spatial-overlay {
    top: 10px;
    left: 10px;
    font-size: 9px;
  }

  .geology-spatial-footer {
    padding: 12px;
  }
}

@media (max-width: 600px) {
  .geology-intelligence-panel {
    padding: 17px;
  }

  .geology-panel-header h2 {
    font-size: 23px;
  }

  .geology-dashboard-grid {
    gap: 14px;
  }

  .geology-results-panel {
    padding: 16px;
  }

  #geology-soil-results {
    max-height: 360px;
  }

  .geology-spatial-viewport,
  #geology-spatial-map {
    height: 340px;
    min-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .geology-interpretation-card {
    transition: none;
  }
}


/* ==========================================================
   12. GEOTECHNICAL GROUND CONDITIONS
========================================================== */

.geotechnical-intelligence-panel {
  margin-top: 30px;
  padding: 28px;
  background: linear-gradient(145deg, #09252d, #071b23);
  border: 1px solid rgba(42, 210, 190, 0.25);
  border-radius: 16px;
  color: #eaf8fa;
}

.geotechnical-intelligence-panel[hidden] {
  display: none !important;
}

.geotechnical-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 26px;
}

.geotechnical-panel-header h2 {
  margin: 8px 0 10px;
  color: #f1fcff;
  font-size: 25px;
  font-weight: 800;
}

.geotechnical-panel-header p {
  max-width: 680px;
  margin: 0;
  color: #9cbac2;
  font-size: 14px;
  line-height: 1.7;
}

.geotechnical-status {
  padding: 8px 13px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.geotechnical-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.geotechnical-metric-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px;
  background: #0c3039;
  border: 1px solid rgba(70, 200, 200, 0.18);
  border-radius: 12px;
}

.geotechnical-metric-card > span {
  color: #80b4bc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.geotechnical-metric-card strong {
  color: #35e6ce;
  font-size: 25px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.geotechnical-metric-card small {
  color: #91aab2;
  font-size: 11px;
}

.geotechnical-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.geotechnical-content-card {
  padding: 22px;
  background: rgba(8, 41, 51, 0.85);
  border: 1px solid rgba(70, 200, 200, 0.16);
  border-radius: 12px;
  color: #b7d1d7;
  line-height: 1.7;
}

.geotechnical-content-card h3 {
  margin: 0 0 14px;
  color: #effcff;
  font-size: 16px;
  font-weight: 750;
}

.geotechnical-disclaimer {
  margin: 22px 0 0;
  padding: 15px 18px;
  background: rgba(245, 158, 11, 0.07);
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  color: #d9c6a5;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 850px) {
  .geotechnical-intelligence-panel {
    padding: 18px;
  }

  .geotechnical-metrics-grid,
  .geotechnical-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .geotechnical-panel-header h2 {
    font-size: 21px;
  }
}


/* ==========================================================
   13. SHARED UTILITIES
========================================================== */

/* Keyboard focus visibility */
.workspace-tab:focus-visible,
.layer-category-header:focus-visible,
.ts-accordion-header:focus-visible,
.location-toggle:focus-visible,
.location-search-btn:focus-visible,
.geology-assessment-btn:focus-visible {
  outline: 2px solid #fb923c;
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flood-exposure-ring {
    animation: none;
    transition: none;
  }

  .flood-scenario-fill {
    transition: none;
  }

  .landslide-scan-sweep {
    top: 50%;
    animation: none;
  }
}
/* ==========================================
   PLATSVY — GROUND MATERIAL DISTRIBUTION
   Futuristic composition scanner
========================================== */

.geotechnical-content-card.ground-distribution-panel {
  --gmd-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --gmd-teal: #2ce8c6;
  --gmd-muted: #7fa3ab;

  position: relative;
  margin-bottom: 24px;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(44, 232, 198, 0.10), transparent 55%),
    linear-gradient(rgba(44, 232, 198, 0.035) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(44, 232, 198, 0.035) 1px, transparent 1px) 0 0 / 28px 100%,
    #0b1d22;
  border: 1px solid rgba(44, 232, 198, 0.28);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(44, 232, 198, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Glowing accent line along the top edge */
.ground-distribution-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gmd-teal), #ff851b, transparent);
  opacity: 0.85;
}

.ground-distribution-header {
  margin-bottom: 4px;
}

.ground-distribution-header h3 {
  margin: 10px 0 8px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.ground-distribution-header p {
  margin: 0;
  color: #a7c4cc;
  font-size: 14px;
  line-height: 1.6;
}

/* Container (also shows the empty / error messages) */

.ground-material-distribution {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 22px 0;
  color: #a7c4cc;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 1. Key figures ---------- */

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

.gmd-stat {
  position: relative;
  padding: 14px 16px;
  background: rgba(8, 24, 29, 0.78);
  border: 1px solid rgba(66, 198, 188, 0.18);
  border-left: 2px solid var(--gmd-teal);
  border-radius: 12px;
}

.gmd-stat-label {
  display: block;
  color: var(--gmd-muted);
  font: 700 10px/1.3 var(--gmd-mono);
  letter-spacing: 1.4px;
}

.gmd-stat-value {
  display: block;
  margin-top: 8px;
  color: #f1fffc;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.gmd-stat-value small {
  margin-left: 4px;
  color: var(--gmd-muted);
  font-size: 12px;
  font-weight: 600;
}

.gmd-stat.is-low {
  border-left-color: #ffb15c;
}

.gmd-stat.is-low .gmd-stat-value {
  color: #ffb15c;
}

/* ---------- 2. Data-quality notices ---------- */

.gmd-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
}

.gmd-notice p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
}

.gmd-notice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 800 12px/1 var(--gmd-mono);
}

.gmd-notice.is-info {
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #c7dcf5;
}

.gmd-notice.is-info .gmd-notice-icon {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

.gmd-notice.is-warning {
  background: rgba(255, 177, 92, 0.08);
  border: 1px solid rgba(255, 177, 92, 0.4);
  color: #ffd9ad;
}

.gmd-notice.is-warning .gmd-notice-icon {
  background: rgba(255, 177, 92, 0.2);
  color: #ffb15c;
}

/* ---------- 3. Donut chart + compact table ---------- */

.gmd-chart-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px 20px;
  background: rgba(6, 18, 22, 0.82);
  border: 1px solid rgba(66, 198, 188, 0.16);
  border-radius: 14px;
}

/* No donut (overlap or no site area): table takes the full width */
.gmd-chart-layout:not(:has(.gmd-donut)) {
  grid-template-columns: minmax(0, 1fr);
}

.gmd-donut {
  position: relative;
  width: 220px;
  aspect-ratio: 1;
}

.gmd-donut-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gmd-donut-track {
  fill: none;
  stroke: #0f262c;
  stroke-width: 26;
}

.gmd-donut-slice {
  fill: none;
  stroke-width: 26;
  filter: drop-shadow(0 0 5px var(--glow));
  transition: stroke-width 0.2s ease, opacity 0.2s ease;
  animation: gmd-donut-in 0.9s ease backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.gmd-donut-slice.is-unmapped {
  filter: none;
}

.gmd-chart-layout.is-highlighting .gmd-donut-slice {
  opacity: 0.25;
}

.gmd-chart-layout.is-highlighting .gmd-donut-slice.is-highlighted {
  opacity: 1;
  stroke-width: 32;
}

.gmd-donut-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}

.gmd-donut-centre span {
  color: var(--gmd-muted);
  font: 700 9.5px/1 var(--gmd-mono);
  letter-spacing: 1.4px;
}

.gmd-donut-centre strong {
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(44, 232, 198, 0.35);
}

.gmd-donut-centre small {
  color: var(--gmd-muted);
  font-size: 11px;
}

/* Compact table */

.gmd-table-head,
.gmd-row {
  display: grid;
  grid-template-columns: 12px minmax(140px, 1.3fr) minmax(80px, 1fr) 64px 78px;
  align-items: center;
  gap: 12px;
}

.gmd-table-head {
  grid-template-columns: minmax(164px, 1.3fr) minmax(80px, 1fr) 154px;
  padding: 0 10px 8px;
  border-bottom: 1px solid rgba(66, 198, 188, 0.14);
  color: #4f7179;
  font: 700 9.5px/1 var(--gmd-mono);
  letter-spacing: 1.3px;
}

.gmd-table-head span:last-child {
  text-align: right;
}

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

.gmd-row {
  padding: 8px 10px;
  border-bottom: 1px dashed rgba(66, 198, 188, 0.1);
  border-radius: 8px;
  cursor: default;
  transition: background 0.15s ease;
  animation: gmd-rise 0.45s ease backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.gmd-row:last-child {
  border-bottom: none;
}

.gmd-row:hover,
.gmd-row:focus-visible,
.gmd-row.is-highlighted {
  background: color-mix(in srgb, var(--material-color) 12%, transparent);
  outline: none;
}

.gmd-row-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--material-color);
  box-shadow: 0 0 8px var(--material-color);
}

.gmd-row-name {
  min-width: 0;
}

.gmd-row-name strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gmd-row-name small {
  display: block;
  margin-top: 2px;
  color: var(--gmd-muted);
  font-size: 11px;
}

.gmd-row-bar {
  height: 6px;
  background: #10282e;
  border-radius: 999px;
  overflow: hidden;
}

.gmd-row-bar span {
  display: block;
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
  background: var(--material-color);
  box-shadow: 0 0 8px var(--material-color);
  transform-origin: left;
  animation: gmd-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}

.gmd-row-pct {
  color: var(--material-color);
  font-size: 15px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gmd-row-area {
  color: #a7c4cc;
  font: 600 11.5px/1 var(--gmd-mono);
  text-align: right;
  white-space: nowrap;
}

.gmd-table-toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  background: rgba(44, 232, 198, 0.06);
  border: 1px dashed rgba(44, 232, 198, 0.35);
  border-radius: 9px;
  color: var(--gmd-teal);
  font: 700 11px/1 var(--gmd-mono);
  letter-spacing: 0.8px;
  cursor: pointer;
}

.gmd-table-toggle:hover {
  background: rgba(44, 232, 198, 0.12);
}

.gmd-row[hidden] {
  display: none;
}

/* ---------- 4. SGU survey basis ---------- */

.gmd-survey {
  padding: 16px 18px;
  background: rgba(6, 18, 22, 0.82);
  border: 1px solid rgba(66, 198, 188, 0.16);
  border-radius: 14px;
}

.gmd-survey-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
  color: var(--gmd-muted);
  font: 700 10px/1.3 var(--gmd-mono);
  letter-spacing: 1.4px;
}

.gmd-survey-head span:first-child {
  color: var(--gmd-teal);
}

.gmd-survey-empty {
  margin: 0;
  color: #a7c4cc;
  font-size: 13px;
}

.gmd-survey-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px dashed rgba(66, 198, 188, 0.12);
  --survey-color: #2ce8c6;
}

.gmd-survey-row.is-medium {
  --survey-color: #60a5fa;
}

.gmd-survey-row.is-overview {
  --survey-color: #ffb15c;
}

.gmd-survey-scale {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--survey-color) 45%, transparent);
  border-left: 3px solid var(--survey-color);
  border-radius: 9px;
  background: color-mix(in srgb, var(--survey-color) 8%, transparent);
}

.gmd-survey-scale strong {
  display: block;
  color: #ffffff;
  font: 800 14px/1.2 var(--gmd-mono);
}

.gmd-survey-scale small {
  color: var(--survey-color);
  font-size: 11px;
  font-weight: 700;
}

.gmd-survey-details strong {
  display: block;
  color: #ffffff;
  font-size: 13.5px;
}

.gmd-survey-details small {
  display: block;
  margin-top: 3px;
  color: var(--gmd-muted);
  font-size: 11.5px;
}

.gmd-survey-share {
  color: var(--survey-color);
  font-size: 15px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .gmd-survey-row {
    grid-template-columns: 1fr auto;
  }

  .gmd-survey-details {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ---------- 5. Thin surface layers ---------- */

.gmd-layers-intro {
  margin: 0 0 8px;
  color: #93b0b7;
  font-size: 12px;
}

.gmd-layer-row {
  display: grid;
  grid-template-columns: 12px minmax(120px, 1fr) minmax(140px, 1.4fr) 64px 78px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px dashed rgba(66, 198, 188, 0.12);
}

.gmd-layer-relation {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: #d7edf0;
  font-size: 12.5px;
}

.gmd-layer-relation strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gmd-layer-arrow {
  flex: none;
  padding: 2px 7px;
  border: 1px solid rgba(44, 232, 198, 0.3);
  border-radius: 999px;
  color: var(--gmd-teal);
  font: 700 9.5px/1.4 var(--gmd-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .gmd-layer-row {
    grid-template-columns: 12px minmax(0, 1fr) 58px;
    gap: 6px 10px;
  }

  .gmd-layer-relation {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .gmd-layer-row .gmd-row-area {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
  }
}

/* ---------- SGU well records panel ---------- */

.wells-panel[hidden] {
  display: none;
}

.wells-panel .gmd-stats {
  margin: 18px 0 14px;
}

.wells-empty {
  margin: 12px 0;
  color: #a7c4cc;
  font-size: 13px;
}

.wells-list {
  display: flex;
  flex-direction: column;
  padding: 6px 16px;
  background: rgba(6, 18, 22, 0.82);
  border: 1px solid rgba(66, 198, 188, 0.16);
  border-radius: 14px;
}

.wells-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 96px 92px 92px minmax(200px, 2fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed rgba(66, 198, 188, 0.12);
}

.wells-row[hidden] {
  display: none;
}

.wells-head {
  border-top: none;
  color: #4f7179;
  font: 700 9.5px/1 var(--gmd-mono);
  letter-spacing: 1.2px;
}

.wells-id strong {
  display: block;
  color: #ffffff;
  font: 700 13px/1.3 var(--gmd-mono);
}

.wells-id small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--gmd-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wells-tag {
  justify-self: start;
  padding: 3px 9px;
  border: 1px solid rgba(255, 177, 92, 0.45);
  border-radius: 999px;
  color: #ffb15c;
  font: 700 11px/1.4 var(--gmd-mono);
  white-space: nowrap;
}

.wells-tag.is-inside {
  border-color: rgba(44, 232, 198, 0.5);
  color: var(--gmd-teal);
}

.wells-num {
  color: #ffffff;
  font: 700 13px/1 var(--gmd-mono);
  white-space: nowrap;
}

.wells-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wells-layer {
  padding: 3px 8px;
  background: rgba(44, 232, 198, 0.06);
  border: 1px solid rgba(66, 198, 188, 0.2);
  border-radius: 6px;
  color: #d7edf0;
  font-size: 11px;
  white-space: nowrap;
}

.wells-muted {
  color: var(--gmd-muted);
  font-size: 11.5px;
}

@media (max-width: 900px) {
  .wells-head {
    display: none;
  }

  .wells-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .wells-row .wells-num::before {
    color: var(--gmd-muted);
    font-size: 10px;
  }

  .wells-row > .wells-num:nth-child(3)::before {
    content: "Bedrock ";
  }

  .wells-row > .wells-num:nth-child(4)::before {
    content: "Water ";
  }

  .wells-layers {
    grid-column: 1 / -1;
  }
}

@keyframes gmd-donut-in {
  from { opacity: 0; stroke-width: 0; }
  to { opacity: 1; stroke-width: 26; }
}

@media (max-width: 900px) {
  .gmd-chart-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .gmd-table-wrap {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .gmd-donut {
    width: 190px;
  }

  .gmd-table-head {
    display: none;
  }

  .gmd-row {
    grid-template-columns: 12px minmax(0, 1fr) 58px;
    gap: 6px 10px;
  }

  .gmd-row-bar {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .gmd-row-area {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
  }
}

/* ---------- Animations ---------- */

@keyframes gmd-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes gmd-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


@media (prefers-reduced-motion: reduce) {
  .gmd-donut-slice,
  .gmd-row,
  .gmd-row-bar span {
    animation: none;
  }
}

/* ---------- Responsive ---------- */

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

@media (max-width: 600px) {
  .geotechnical-content-card.ground-distribution-panel {
    padding: 20px 16px;
  }

  .ground-distribution-panel::before {
    left: 16px;
    right: 16px;
  }

  .gmd-stat-value {
    font-size: 20px;
  }

}


/* ==========================================================
   14. SITE ASSESSMENT — FUTURISTIC SKIN
   Overrides sections 7–12 with one shared visual language:
   grid-glass panels, mono "scanner" labels, glowing accents.
========================================================== */

.assessment-workspace {
  --ts-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --ts-teal: #2ce8c6;
  --ts-orange: #ff851b;
  --ts-red: #ff5c6c;
  --ts-amber: #ffb15c;
  --ts-muted: #7fa3ab;
  --ts-panel: #0b1d22;
  --ts-line: rgba(44, 232, 198, 0.22);

  background:
    radial-gradient(60% 40% at 85% 0%, rgba(44, 232, 198, 0.08), transparent 70%),
    radial-gradient(50% 35% at 0% 30%, rgba(255, 133, 27, 0.05), transparent 70%),
    #08151a;
}

/* ---------- Page heading ---------- */

.assessment-heading .eyebrow {
  font-family: var(--ts-mono);
  letter-spacing: 2px;
}

.assessment-heading h2 {
  margin: 10px 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #ffffff 30%, var(--ts-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Results layout: mixed one/two-column grid ---------- */

#assessment-results:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

#assessment-results > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
}

#assessment-results > #protected-area-details:not([hidden]) {
  margin: 0;
}

@media (min-width: 1200px) {
  #assessment-results > .assessment-data-sources,
  #assessment-results > .assessment-findings {
    grid-column: auto;
    align-self: stretch;
  }
}

/* Sections fade in one after another */

#assessment-results > * {
  animation: ts-section-in 0.55s ease backwards;
}

#assessment-results > :nth-child(2) { animation-delay: 0.05s; }
#assessment-results > :nth-child(3) { animation-delay: 0.10s; }
#assessment-results > :nth-child(4) { animation-delay: 0.15s; }
#assessment-results > :nth-child(5) { animation-delay: 0.20s; }
#assessment-results > :nth-child(6) { animation-delay: 0.25s; }
#assessment-results > :nth-child(n + 7) { animation-delay: 0.30s; }

@keyframes ts-section-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Sticky quick navigation ---------- */

.assessment-quicknav {
  position: sticky;
  top: -28px;
  z-index: 20;
  display: flex;
  gap: 8px;
  margin: -6px 0 0;
  padding: 10px;
  overflow-x: auto;
  background: rgba(8, 21, 26, 0.86);
  border: 1px solid var(--ts-line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  scrollbar-width: thin;
}

.assessment-quicknav-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #a9c4cb;
  font: 700 11px/1 var(--ts-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.assessment-quicknav-item:hover {
  background: rgba(44, 232, 198, 0.08);
  color: #ffffff;
}

.assessment-quicknav-item.is-active {
  background: rgba(44, 232, 198, 0.12);
  border-color: rgba(44, 232, 198, 0.45);
  color: var(--ts-teal);
}

.assessment-quicknav-item:focus-visible {
  outline: 2px solid var(--ts-teal);
  outline-offset: 2px;
}

.assessment-quicknav-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.assessment-quicknav-light.is-flag {
  background: var(--ts-red);
  box-shadow: 0 0 10px var(--ts-red);
  animation: ts-pulse 1.8s ease-in-out infinite;
}

.assessment-quicknav-light.is-watch {
  background: var(--ts-amber);
  box-shadow: 0 0 10px var(--ts-amber);
}

.assessment-quicknav-light.is-none {
  background: var(--ts-teal);
  box-shadow: 0 0 8px rgba(44, 232, 198, 0.6);
}

.assessment-quicknav-light.is-unknown {
  background: transparent;
  border: 1.5px dashed #8a9ba1;
}

@keyframes ts-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- Status banner ---------- */

.assessment-status-banner {
  position: relative;
  align-items: center;
  margin-bottom: 0;
  padding: 22px 26px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(54, 200, 120, 0.14), transparent 60%),
    var(--ts-panel);
  border: 1px solid rgba(54, 200, 120, 0.45);
  border-left: 1px solid rgba(54, 200, 120, 0.45);
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(54, 200, 120, 0.08);
}

.assessment-status-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor, inset 0 0 12px rgba(255, 255, 255, 0.05);
  font-size: 22px;
}

.assessment-status-banner strong {
  font-size: 17px;
  letter-spacing: -0.1px;
}

.assessment-status-banner p {
  margin-top: 6px;
  font-size: 13px;
}

.assessment-status-banner.status-warning {
  background:
    linear-gradient(90deg, rgba(255, 92, 108, 0.18), transparent 60%),
    var(--ts-panel);
  border: 1px solid rgba(255, 92, 108, 0.55);
  box-shadow: 0 0 30px rgba(255, 92, 108, 0.12);
}

.assessment-status-banner.status-incomplete {
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.16), transparent 60%),
    var(--ts-panel);
  border: 1px solid rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 30px rgba(96, 165, 250, 0.1);
}

/* ---------- Key metrics ---------- */

.assessment-metrics {
  margin-bottom: 0;
}

.assessment-metric {
  position: relative;
  padding: 20px 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(44, 232, 198, 0.08), transparent 60%),
    var(--ts-panel);
  border: 1px solid var(--ts-line);
  border-left: 2px solid var(--ts-teal);
  border-radius: 14px;
}

.assessment-metric:nth-child(4) {
  border-left-color: var(--ts-orange);
}

.assessment-metric span {
  color: var(--ts-muted);
  font: 700 10px/1.3 var(--ts-mono);
  letter-spacing: 1.6px;
}

.assessment-metric strong {
  margin-top: 10px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(44, 232, 198, 0.25);
}

.assessment-metric:nth-child(4) strong {
  color: var(--ts-orange);
  text-shadow: 0 0 22px rgba(255, 133, 27, 0.35);
}

/* ---------- Shared glass-grid panels ---------- */

.assessment-site-info,
.assessment-data-sources,
.assessment-findings,
#protected-area-details:not([hidden]),
.assessment-ebh,
.assessment-flood,
.assessment-landslide,
.assessment-transport,
.geotechnical-intelligence-panel {
  position: relative;
  padding: 26px;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(44, 232, 198, 0.07), transparent 55%),
    linear-gradient(rgba(44, 232, 198, 0.03) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(44, 232, 198, 0.03) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--ts-panel);
  border: 1px solid var(--ts-line);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.3);
}

.geology-intelligence-panel {
  border-radius: 18px;
}

/* Glowing accent line on top of each panel */
.assessment-site-info::before,
.assessment-data-sources::before,
.assessment-findings::before,
#protected-area-details::before,
.assessment-ebh::before,
.assessment-flood::before,
.assessment-landslide::before,
.assessment-transport::before,
.geotechnical-intelligence-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ts-teal), var(--ts-orange), transparent);
  opacity: 0.8;
}

/* Hazard-type panels get a warmer accent */
#protected-area-details::before,
.assessment-ebh::before {
  background: linear-gradient(90deg, transparent, var(--ts-red), var(--ts-orange), transparent);
}

.assessment-flood::before {
  background: linear-gradient(90deg, transparent, #60a5fa, var(--ts-teal), transparent);
}

/* Section headings */

.assessment-section-heading {
  margin-bottom: 18px;
}

.assessment-section-heading .eyebrow,
.assessment-findings .eyebrow {
  color: var(--ts-teal);
  font-family: var(--ts-mono);
  letter-spacing: 1.8px;
}

.assessment-section-heading .eyebrow::before {
  content: "◆ ";
}

.assessment-section-heading h3,
.assessment-findings h3 {
  margin: 8px 0 0;
  color: #ffffff;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.assessment-findings > p,
.assessment-source-description,
.protected-area-description,
.assessment-ebh-description,
.assessment-flood-description,
.assessment-transport-description,
.landslide-description {
  color: #a7c4cc;
  font-size: 13.5px;
  line-height: 1.7;
}

/* "REAL GIS DATA" style labels with a live dot */

.assessment-data-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(44, 232, 198, 0.08);
  border: 1px solid rgba(44, 232, 198, 0.3);
  border-radius: 999px;
  color: var(--ts-teal);
  font: 700 10px/1 var(--ts-mono);
  letter-spacing: 1px;
  white-space: nowrap;
}

.assessment-data-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ts-teal);
  box-shadow: 0 0 8px var(--ts-teal);
  animation: ts-pulse 2s ease-in-out infinite;
}

/* ---------- Site information ---------- */

.assessment-site-grid {
  gap: 12px;
}

.assessment-site-field {
  padding: 16px 18px;
  background: rgba(6, 18, 22, 0.75);
  border: 1px solid rgba(66, 198, 188, 0.16);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

.assessment-site-field:hover {
  border-color: rgba(44, 232, 198, 0.45);
}

.assessment-site-field span {
  margin-bottom: 10px;
  color: var(--ts-muted);
  font: 700 10px/1.3 var(--ts-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.assessment-site-field strong {
  color: #ffffff;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

#info-assessment-reference {
  color: var(--ts-teal);
  font-family: var(--ts-mono);
  letter-spacing: 1px;
}

/* ---------- Data sources: status-light cards ---------- */

.assessment-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
  border: none;
  border-radius: 0;
}

.assessment-source-row,
.assessment-source-row:last-child {
  padding: 13px 16px;
  background: rgba(6, 18, 22, 0.75);
  border: 1px solid rgba(66, 198, 188, 0.14);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.assessment-source-row:hover {
  border-color: rgba(44, 232, 198, 0.4);
  transform: translateX(3px);
}

.assessment-source-details span {
  color: #ffffff;
  font-weight: 700;
}

.assessment-source-details small {
  color: var(--ts-muted);
  font-family: var(--ts-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
}

.assessment-source-status,
.assessment-finding-status {
  padding: 6px 11px;
  border-radius: 999px;
  font: 700 10.5px/1.2 var(--ts-mono);
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.assessment-source-status.source-checked {
  background: rgba(44, 232, 198, 0.1);
  border: 1px solid rgba(44, 232, 198, 0.4);
  color: var(--ts-teal);
}

.assessment-source-status.source-unavailable {
  background: rgba(255, 177, 92, 0.1);
  border: 1px solid rgba(255, 177, 92, 0.45);
  color: var(--ts-amber);
}

/* ---------- Environmental findings: glowing-edge cards ---------- */

#assessment-findings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.assessment-finding,
.assessment-finding:last-child {
  position: relative;
  padding: 14px 16px 14px 20px;
  background: rgba(6, 18, 22, 0.75);
  border: 1px solid rgba(66, 198, 188, 0.14);
  border-radius: 12px;
  --finding-color: var(--ts-teal);
}

.assessment-finding::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--finding-color);
  box-shadow: 0 0 12px var(--finding-color);
}

.assessment-finding.finding-warning {
  --finding-color: var(--ts-red);
  background:
    linear-gradient(90deg, rgba(255, 92, 108, 0.1), transparent 50%),
    rgba(6, 18, 22, 0.75);
  border-color: rgba(255, 92, 108, 0.35);
}

.assessment-finding.finding-unavailable {
  --finding-color: var(--ts-amber);
}

.assessment-finding-details strong {
  color: #ffffff;
  font-size: 14px;
}

.assessment-finding-details small {
  color: #93b0b7;
}

.finding-clear .assessment-finding-status {
  background: rgba(44, 232, 198, 0.1);
  border: 1px solid rgba(44, 232, 198, 0.4);
  color: var(--ts-teal);
}

.finding-warning .assessment-finding-status {
  background: rgba(255, 92, 108, 0.14);
  border: 1px solid rgba(255, 92, 108, 0.55);
  color: #ff8a96;
  box-shadow: 0 0 14px rgba(255, 92, 108, 0.2);
}

.finding-unavailable .assessment-finding-status {
  background: rgba(255, 177, 92, 0.1);
  border: 1px solid rgba(255, 177, 92, 0.45);
  color: var(--ts-amber);
}

/* ---------- Protected area cards ---------- */

#protected-area-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

#protected-area-list .protected-area-card {
  position: relative;
  padding: 20px 20px 18px 24px;
  background:
    linear-gradient(90deg, rgba(255, 92, 108, 0.1), transparent 55%),
    rgba(6, 18, 22, 0.8);
  border: 1px solid rgba(255, 92, 108, 0.3);
  border-left: 1px solid rgba(255, 92, 108, 0.3);
  border-radius: 14px;
}

#protected-area-list .protected-area-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ts-red);
  box-shadow: 0 0 12px var(--ts-red);
}

#protected-area-list .protected-area-card:hover {
  border-color: rgba(255, 92, 108, 0.6);
}

.protected-area-card h4 {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 800;
}

.protected-area-card p {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(66, 198, 188, 0.14);
  color: #c5d8dd;
  font-size: 12.5px;
}

/* ---------- Contaminated land (EBH) ---------- */

.assessment-ebh-stats {
  gap: 14px;
}

.assessment-ebh-stat,
.assessment-ebh-stat:first-child,
.assessment-ebh-stat:nth-child(2) {
  position: relative;
  padding: 20px 22px;
  overflow: hidden;
  background: rgba(6, 18, 22, 0.8);
  border: 1px solid rgba(255, 92, 108, 0.35);
  border-radius: 14px;
  --ebh-color: var(--ts-red);
}

.assessment-ebh-stat:nth-child(2) {
  border-color: rgba(255, 177, 92, 0.35);
  --ebh-color: var(--ts-amber);
}

.assessment-ebh-stat::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ebh-color), transparent 70%);
  opacity: 0.18;
}

.assessment-ebh-stat span {
  color: var(--ts-muted);
  font: 700 10px/1.3 var(--ts-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.assessment-ebh-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ebh-color);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 22px var(--ebh-color);
}

#assessment-ebh-records {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

/* Records shown as compact data sheets */
.assessment-ebh-record {
  position: relative;
  padding: 18px 18px 16px 22px;
  background: rgba(6, 18, 22, 0.8);
  border: 1px solid rgba(255, 177, 92, 0.25);
  border-left: 1px solid rgba(255, 177, 92, 0.25);
  border-radius: 14px;
  --ebh-color: var(--ts-amber);
}

.assessment-ebh-record.is-inside {
  border-color: rgba(255, 92, 108, 0.4);
  --ebh-color: var(--ts-red);
}

.assessment-ebh-record::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ebh-color);
  box-shadow: 0 0 12px var(--ebh-color);
}

.assessment-ebh-record:hover {
  background: rgba(10, 28, 33, 0.9);
  border-color: var(--ebh-color);
}

.assessment-ebh-record h4 {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(66, 198, 188, 0.14);
  color: #ffffff;
  font-family: var(--ts-mono);
  font-size: 15px;
  letter-spacing: 0.6px;
}

.assessment-ebh-record p {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(66, 198, 188, 0.1);
  color: #e6f4f6;
  font-size: 12.5px;
  text-align: right;
}

.assessment-ebh-record p strong {
  flex: none;
  color: var(--ts-muted);
  font: 700 10px/1.9 var(--ts-mono);
  letter-spacing: 0.6px;
  text-align: left;
  text-transform: uppercase;
}

.ebh-view-map-btn {
  margin-top: 14px;
  border-radius: 999px;
  font-family: var(--ts-mono);
  letter-spacing: 0.4px;
}

/* No-records message */
#assessment-ebh-records > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #a7c4cc;
}

/* ---------- Flood & landslide fine-tuning ---------- */

#assessment-flood-status,
#landslide-screening-status {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(44, 232, 198, 0.06);
  border: 1px solid rgba(44, 232, 198, 0.25);
  border-radius: 999px;
  color: #d7f6f0;
  font: 600 12px/1.5 var(--ts-mono);
}

/* ---------- Disclaimers & notes: one consistent style ---------- */

.assessment-source-note,
.protected-area-note,
.assessment-ebh-note,
.assessment-flood-note,
.assessment-transport-note,
.landslide-disclaimer,
.geology-disclaimer,
.geotechnical-disclaimer,
.assessment-disclaimer {
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(255, 177, 92, 0.05);
  border: 1px solid rgba(255, 177, 92, 0.2);
  border-left: 3px solid var(--ts-amber);
  border-radius: 10px;
  color: #dcc9ad;
  font-size: 12px;
  line-height: 1.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .assessment-workspace {
    padding: 18px 14px;
  }

  .assessment-heading h2 {
    font-size: 26px;
  }

  #assessment-results:not([hidden]) {
    gap: 16px;
  }

  .assessment-quicknav {
    top: -18px;
  }

  .assessment-site-info,
  .assessment-data-sources,
  .assessment-findings,
  #protected-area-details:not([hidden]),
  .assessment-ebh,
  .assessment-flood,
  .assessment-landslide,
  .assessment-transport,
  .geotechnical-intelligence-panel {
    padding: 20px 16px;
  }

  .assessment-metric strong {
    font-size: 24px;
  }

  .assessment-source-row:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #assessment-results > *,
  .assessment-quicknav-light.is-flag,
  .assessment-data-label::before {
    animation: none;
  }
}

/* ==========================================================
   15. REPORT DOWNLOAD BUTTON
========================================================== */

.report-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 18px;
  background: linear-gradient(135deg, #ff9b35, #e66b17);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(255, 133, 27, 0.25);
  color: #14191c;
  font: 800 13px/1 Arial, sans-serif;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.report-download-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 9px 25px rgba(255, 133, 27, 0.4);
}

.report-download-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ==========================================================
   16. TRANSPORT & ACCESSIBILITY — PROXIMITY RADAR
========================================================== */

.assessment-transport[hidden] {
  display: none !important;
}

.transport-layout {
  --mode-road: #ff9b42;
  --mode-rail: #2ce8c6;
  --mode-air: #b28ad6;
  --mode-sea: #60a5fa;
  --t-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin-top: 16px;
  padding: 20px;
  background: rgba(6, 18, 22, 0.82);
  border: 1px solid rgba(66, 198, 188, 0.16);
  border-radius: 14px;
}

.transport-layout .mode-road { --mode: var(--mode-road); }
.transport-layout .mode-rail { --mode: var(--mode-rail); }
.transport-layout .mode-air { --mode: var(--mode-air); }
.transport-layout .mode-sea { --mode: var(--mode-sea); }

/* Radar */

.transport-radar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.transport-radar-svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  overflow: visible;
}

.radar-ring {
  fill: none;
  stroke: rgba(44, 232, 198, 0.22);
  stroke-dasharray: 2 4;
}

.radar-ring-label {
  fill: #4f7179;
  font: 700 9px var(--t-mono);
}

.radar-axis {
  stroke: rgba(44, 232, 198, 0.1);
}

.radar-sweep {
  transform-origin: 160px 160px;
  animation: radar-sweep 6s linear infinite;
}

.radar-sweep-wedge {

  fill: rgba(44, 232, 198, 0.08);
}

.radar-spoke {
  stroke: var(--mode);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
}

.radar-dot {
  fill: var(--mode);
  filter: drop-shadow(0 0 6px var(--mode));
}

.radar-point {
  transition: opacity 0.2s ease;
  animation: radar-in 0.6s ease backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.radar-point.is-missing .radar-spoke {
  stroke-dasharray: 3 4;
  stroke-opacity: 0.25;
}

.radar-point.is-missing .radar-dot {
  fill: transparent;
  stroke: var(--mode);
  stroke-dasharray: 2 2;
  filter: none;
}

.radar-icon {
  font-size: 13px;
}

.radar-site {
  fill: #ff851b;
  stroke: #fff3ea;
  stroke-width: 2;
}

.radar-site-pulse {
  fill: none;
  stroke: #ff851b;
  transform-origin: 160px 160px;
  animation: radar-pulse 2.4s ease-out infinite;
}

.transport-layout.is-highlighting .radar-point {
  opacity: 0.2;
}

.transport-layout.is-highlighting .radar-point.is-highlighted {
  opacity: 1;
}

.transport-layout.is-highlighting .radar-point.is-highlighted .radar-spoke {
  stroke-opacity: 1;
  stroke-width: 2.5;
}

.transport-radar-caption {
  color: #4f7179;
  font: 700 9.5px/1 var(--t-mono);
  letter-spacing: 1.4px;
}

/* List */

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

.transport-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(90px, 1fr) 104px;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  border-bottom: 1px dashed rgba(66, 198, 188, 0.1);
  border-radius: 8px;
  transition: background 0.15s ease;
  animation: gmd-rise 0.45s ease backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.transport-row:last-child {
  border-bottom: none;
}

.transport-row:hover,
.transport-row:focus-visible,
.transport-row.is-highlighted {
  background: color-mix(in srgb, var(--mode) 12%, transparent);
  outline: none;
}

.transport-row-name {
  min-width: 0;
}

.transport-row-name strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.transport-row-name small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #7fa3ab;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transport-row-bar {
  height: 6px;
  background: #10282e;
  border-radius: 999px;
  overflow: hidden;
}

.transport-row-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mode), color-mix(in srgb, var(--mode) 35%, transparent));
  box-shadow: 0 0 8px var(--mode);
  transform-origin: left;
  animation: gmd-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}

.transport-row.is-missing .transport-row-bar span {
  background: repeating-linear-gradient(135deg, rgba(167, 180, 178, 0.35) 0 4px, transparent 4px 8px);
  box-shadow: none;
}

.transport-row-value {
  color: var(--mode);
  font: 800 15px/1 var(--t-mono);
  text-align: right;
  white-space: nowrap;
}

.transport-row.is-missing .transport-row-value {
  color: #8a9ba1;
}

.transport-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-left: 10px;
  color: #7fa3ab;
  font: 700 10px/1 var(--t-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.transport-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--mode);
  box-shadow: 0 0 6px var(--mode);
}

.transport-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: #a7c4cc;
}

@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}

@keyframes radar-pulse {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(3.2); opacity: 0; }
}

@keyframes radar-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1000px) {
  .transport-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .transport-list-wrap {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .transport-layout {
    padding: 14px 10px;
  }

  .transport-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
  }

  .transport-row-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-sweep,
  .radar-site-pulse,
  .radar-point,
  .transport-row,
  .transport-row-bar span {
    animation: none;
  }
}

.radar-point.is-unknown .radar-dot {
  stroke: #8a9ba1;
}

.radar-point.is-unknown .radar-spoke {
  stroke: #8a9ba1;
}

.transport-row.is-unknown .transport-row-value,
.transport-row.is-unknown .transport-row-name small {
  color: #ffb15c;
}

.transport-list-wrap .gmd-notice {
  margin-top: 12px;
  font-size: 12.5px;
}

/* Background loading state (wells, transport) */
.is-loading {
  position: relative;
  padding-left: 30px !important;
  color: #d7f6f0 !important;
}

.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(44, 232, 198, 0.25);
  border-top-color: #2ce8c6;
  border-radius: 50%;
  animation: ts-spin 0.9s linear infinite;
}

@keyframes ts-spin {
  to { transform: rotate(360deg); }
}

.transport-legend .transport-data-date {
  margin-left: auto;
  color: #4f7179;
}

.transport-legend .transport-data-date::before {
  display: none;
}

/* ==========================================================
   17. UTILITIES & ENERGY — NETWORK SCHEMATIC
========================================================== */

.utilities-results {
  --mode-power: #ffd23f;
  --mode-gas: #ff7a45;
  --mode-heat: #ff5c6c;
  --mode-water: #60a5fa;
  --u-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --u-site-width: 190px;
  --u-label-width: 170px;

  margin-top: 16px;
}

.unet .mode-power { --mode: var(--mode-power); }
.unet .mode-gas { --mode: var(--mode-gas); }
.unet .mode-heat { --mode: var(--mode-heat); }
.unet .mode-water { --mode: var(--mode-water); }

.unet {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Key figures ---------- */

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

.unet-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  overflow: hidden;
  background: rgba(6, 18, 22, 0.82);
  border: 1px solid rgba(66, 198, 188, 0.18);
  border-radius: 14px;
  --tone: #2ce8c6;
}

.unet-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--tone);
  box-shadow: 0 0 14px var(--tone);
}

.unet-kpi.is-alert { --tone: #ff5c6c; border-color: rgba(255, 92, 108, 0.45); }
.unet-kpi.is-ok { --tone: #2ce8c6; }
.unet-kpi.is-power { --tone: #ffd23f; }
.unet-kpi.is-gas { --tone: #ff7a45; }

.unet-kpi-label {
  color: #7fa3ab;
  font: 700 10px/1.2 var(--u-mono);
  letter-spacing: 1.4px;
}

.unet-kpi-value {
  color: var(--tone);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--tone) 40%, transparent);
}

.unet-kpi-note {
  overflow: hidden;
  color: #a7c4cc;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Schematic board ---------- */

.unet-board {
  position: relative;
  padding: 14px 18px 8px;
  overflow: hidden;
  background:
    linear-gradient(rgba(44, 232, 198, 0.04) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(44, 232, 198, 0.04) 1px, transparent 1px) 0 0 / 22px 100%,
    rgba(4, 13, 16, 0.92);
  border: 1px solid rgba(66, 198, 188, 0.2);
  border-radius: 16px;
}

.unet-row {
  display: grid;
  grid-template-columns: var(--u-label-width) var(--u-site-width) minmax(0, 1fr);
  align-items: center;
  gap: 0 16px;
}

.unet-axis {
  height: 26px;
  margin-bottom: 4px;
  color: #4f7179;
  font: 700 9.5px/1 var(--u-mono);
  letter-spacing: 1.2px;
}

.unet-site-head {
  text-align: center;
  color: #ff9b42;
}

.unet-axis .unet-track {
  position: relative;
  height: 100%;
}

.unet-tick {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.unet-tick:nth-child(1) {
  transform: none;
}

.unet-tick:last-child {
  transform: translateX(-100%);
}

.unet-tick:nth-child(1)::after {
  left: 0;
}

.unet-tick:last-child::after {
  left: auto;
  right: 0;
}

.unet-tick::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 1px;
  height: 900px;
  background: rgba(44, 232, 198, 0.08);
}

.unet-lane {
  min-height: 96px;
  border-top: 1px dashed rgba(66, 198, 188, 0.1);
  animation: gmd-rise 0.5s ease backwards;
  animation-delay: calc(var(--lane, 0) * 90ms);
}

.unet-lane-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.unet-axis .unet-lane-label {
  color: #4f7179;
  font: inherit;
}

.unet-lane-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--mode) 50%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--mode) 12%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mode) 25%, transparent);
  font-size: 14px;
}

/* Site block: the "chip" every lane starts from */

.unet-site {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 5px;
  min-height: 64px;
  padding: 8px;
  background: rgba(255, 133, 27, 0.06);
  border: 1px solid rgba(255, 133, 27, 0.35);
  border-radius: 10px;
}

.unet-site::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -17px;
  width: 16px;
  height: 2px;
  background: var(--mode);
  box-shadow: 0 0 8px var(--mode);
}

.unet-site-empty {
  color: #4f7179;
  font: 700 12px var(--u-mono);
}

.unet-chip {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--mode) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mode) 15%, transparent);
  color: #ffffff;
  font: 700 10.5px/1.4 var(--u-mono);
  white-space: nowrap;
}

.unet-chip.is-crossing {
  border-color: #ff5c6c;
  background: rgba(255, 92, 108, 0.18);
  color: #ffd5d9;
  box-shadow: 0 0 12px rgba(255, 92, 108, 0.45);
  animation: ts-pulse 1.8s ease-in-out infinite;
}

/* Track with the network line and a travelling signal */

.unet-lane .unet-track {
  position: relative;
  height: 96px;
}

.unet-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, var(--mode), color-mix(in srgb, var(--mode) 15%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--mode) 60%, transparent);
}

.unet-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 60px;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  opacity: 0.7;
  animation: unet-flow 3.2s linear infinite;
  animation-delay: calc(var(--lane, 0) * -0.7s);
}

.unet-node {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 0;
  height: 0;
}

.unet-dot {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid #04120f;
  border-radius: 50%;
  background: var(--mode);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode) 30%, transparent), 0 0 14px var(--mode);
}

.unet-node-card {
  position: absolute;
  left: -8px;
  max-width: 220px;
  padding: 5px 9px;
  background: rgba(8, 24, 29, 0.95);
  border: 1px solid color-mix(in srgb, var(--mode) 45%, transparent);
  border-radius: 8px;
  white-space: nowrap;
}

.unet-node.is-above .unet-node-card { bottom: 14px; }
.unet-node.is-below .unet-node-card { top: 14px; }

.unet-node-card strong {
  display: block;
  color: var(--mode);
  font: 800 11.5px/1.3 var(--u-mono);
}

.unet-node-card small {
  display: block;
  overflow: hidden;
  color: #a7c4cc;
  font-size: 10.5px;
  text-overflow: ellipsis;
}

/* Cards near the right end open to the left */
.unet-node.is-right .unet-node-card {
  left: auto;
  right: -8px;
}

.unet-missing {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  transform: translateY(-50%);
}

.unet-tag {
  padding: 3px 9px;
  background: rgba(4, 13, 16, 0.95);
  border: 1px dashed rgba(167, 180, 178, 0.45);
  border-radius: 999px;
  color: #93a9ae;
  font: 600 10.5px/1.4 var(--u-mono);
  white-space: nowrap;
}

.unet-tag.is-unknown {
  border-color: rgba(255, 177, 92, 0.5);
  color: #ffb15c;
}

.unet-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #4f7179;
  font: 700 9.5px/1.4 var(--u-mono);
  letter-spacing: 1.2px;
}

@keyframes unet-flow {
  from { left: -60px; }
  to { left: 100%; }
}

/* ---------- Narrow screens: lanes become lists ---------- */

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

  .unet-axis {
    display: none;
  }

  .unet-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0;
  }

  .unet-site {
    justify-content: flex-start;
    min-height: 0;
  }

  .unet-site::after,
  .unet-line,
  .unet-pulse {
    display: none;
  }

  .unet-lane .unet-track {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: auto;
  }

  .unet-node {
    position: static;
    width: auto;
    height: auto;
  }

  .unet-dot {
    display: none;
  }

  .unet-node-card,
  .unet-node.is-above .unet-node-card,
  .unet-node.is-below .unet-node-card {
    position: static;
    max-width: none;
    white-space: normal;
  }

  .unet-missing {
    position: static;
    align-items: flex-start;
    transform: none;
  }
}

@media (max-width: 480px) {
  .unet-kpis {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .unet-pulse,
  .unet-lane,
  .unet-chip.is-crossing {
    animation: none;
  }
}

/* ==========================================================
   18. LAND USE & SURROUNDINGS — DNA STRIPS + PROXIMITY RINGS
========================================================== */

.landuse-results {
  --lu-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --u-mono: var(--lu-mono);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

/* ---------- DNA strips ---------- */

.lu-strips {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  background:
    repeating-linear-gradient(90deg, rgba(44, 232, 198, 0.035) 0 1px, transparent 1px 40px),
    rgba(4, 13, 16, 0.92);
  border: 1px solid rgba(66, 198, 188, 0.2);
  border-radius: 16px;
}

.lu-strip-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 4px 18px;
}

.lu-strip-head strong {
  display: block;
  color: #ffffff;
  font: 800 13px/1.2 var(--lu-mono);
  letter-spacing: 1.6px;
}

.lu-strip-head small {
  color: #7fa3ab;
  font-size: 11.5px;
}

.lu-strip {
  position: relative;
  display: flex;
  gap: 3px;
  height: 42px;
  padding: 4px;
  overflow: hidden;
  background: #061418;
  border: 1px solid #1d3d44;
  border-radius: 12px;
}

/* Scanline over the strip */
.lu-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.lu-segment {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 4px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
    var(--seg);
  box-shadow: 0 0 16px -3px var(--seg);
  transform-origin: left;
  animation: gmd-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.lu-segment em {
  overflow: hidden;
  color: #071317;
  font: 800 11px/1 var(--lu-mono);
  font-style: normal;
}

.lu-segment.is-unclassified {
  background: repeating-linear-gradient(135deg, rgba(167, 180, 178, 0.18) 0 6px, transparent 6px 12px);
  border: 1px dashed rgba(167, 180, 178, 0.4);
  box-shadow: none;
}

.lu-segment.is-unclassified em {
  color: #93a9ae;
}

.lu-strip-note {
  grid-column: 2;
  color: #ffb15c;
  font-size: 11px;
}

.lu-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-left: 188px;
}

.lu-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d7edf0;
  font: 600 11.5px/1.3 var(--lu-mono);
}

.lu-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--seg);
  box-shadow: 0 0 8px var(--seg);
}

.lu-legend span.is-unclassified {
  color: #7fa3ab;
}

.lu-legend span b {
  padding: 1px 6px;
  border: 1px solid rgba(167, 180, 178, 0.25);
  border-radius: 999px;
  color: #93a9ae;
  font-weight: 600;
  font-size: 10.5px;
}

.lu-legend-key {
  align-self: center;
  color: #6f8f96;
  font: 500 10px/1.3 var(--lu-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lu-legend span.is-unclassified::before {
  background: repeating-linear-gradient(135deg, #a7b4b2 0 2px, transparent 2px 4px);
  box-shadow: none;
}

/* ---------- Proximity rings ---------- */

.lu-gauges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.lu-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 16px 12px 14px;
  text-align: center;
  background: rgba(6, 18, 22, 0.82);
  border: 1px solid rgba(66, 198, 188, 0.16);
  border-radius: 16px;
  animation: gmd-rise 0.5s ease backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
  --tone: #2ce8c6;
}

.lu-gauge.is-near { --tone: #ff5c6c; border-color: rgba(255, 92, 108, 0.45); }
.lu-gauge.is-mid { --tone: #ffb15c; }
.lu-gauge.is-far { --tone: #2ce8c6; }
.lu-gauge.is-unknown { --tone: #8a9ba1; }

.lu-gauge-dial {
  position: relative;
  width: 112px;
  height: 112px;
}

.lu-gauge-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lu-gauge-track {
  fill: none;
  stroke: #10282e;
  stroke-width: 7;
}

.lu-gauge-arc {
  fill: none;
  stroke: var(--tone);
  stroke-width: 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--tone));
  animation: lu-arc-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 80ms + 150ms);
}

.lu-gauge.is-near .lu-gauge-arc {
  animation: lu-arc-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, ts-pulse 1.8s ease-in-out 1.3s infinite;
}

.lu-gauge-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.lu-gauge-icon {
  font-size: 18px;
}

.lu-gauge-centre strong {
  color: var(--tone);
  font: 800 15px/1.1 var(--lu-mono);
}

.lu-gauge-label {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.lu-gauge-name {
  max-width: 100%;
  overflow: hidden;
  color: #7fa3ab;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes lu-arc-in {
  from { stroke-dasharray: 0 999; }
}

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

@media (max-width: 700px) {
  .lu-strip-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lu-strip-note {
    grid-column: 1;
  }

  .lu-legend {
    padding-left: 0;
  }

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

@media (prefers-reduced-motion: reduce) {
  .lu-segment,
  .lu-gauge,
  .lu-gauge-arc,
  .lu-gauge.is-near .lu-gauge-arc {
    animation: none;
  }
}

/* ==========================================================
   19. PERMITS & CONSTRAINTS — HEX MATRIX + DIG STRATIGRAPHY
========================================================== */

.constraints-results {
  --pc-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --u-mono: var(--pc-mono);
  --pc-protect: #ff4fd8;
  --pc-use: #38e1ff;
  --pc-near: #ffb547;
  --pc-ochre: #e0a458;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.pc-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 16px;
}

.pc-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.pc-panel-head strong {
  color: #ffffff;
  font: 800 13px/1.2 var(--pc-mono);
  letter-spacing: 1.6px;
}

.pc-panel-head small {
  color: #8fa9b4;
  font: 600 11px/1.3 var(--pc-mono);
  letter-spacing: 0.6px;
}

.pc-note {
  color: #7f97a0;
  font-size: 11.5px;
  line-height: 1.5;
}

/* ---------- National interests: hex matrix ---------- */

.pc-interests {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 79, 216, 0.08), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(56, 225, 255, 0.07), transparent 45%),
    rgba(8, 8, 20, 0.94);
  border: 1px solid rgba(255, 79, 216, 0.22);
}

.pc-interest-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px 26px;
}

.pc-hex-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Flat-top honeycomb: columns overlap by a quarter hex, even columns drop half a hex */
.pc-hexes {
  --hw: 112px;
  display: grid;
  grid-template-columns: repeat(6, calc(var(--hw) * 0.75));
  grid-auto-rows: calc(var(--hw) * 0.866);
  gap: 4px 3px;
  padding-right: calc(var(--hw) * 0.25);
  padding-bottom: calc(var(--hw) * 0.433 + 2px);
}

.pc-hex {
  --hex: rgba(150, 170, 190, 0.32);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: var(--hw);
  height: calc(var(--hw) * 0.866);
  padding: 0 18px;
  text-align: center;
  background: var(--hex);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  animation: pc-hex-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.pc-hex::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: linear-gradient(180deg, #11122a, #090a18);
  clip-path: inherit;
}

.pc-hex:nth-child(even) {
  transform: translateY(calc(50% + 2px));
}

.pc-hex > * {
  position: relative;
}

.pc-hex-icon {
  font-size: 20px;
  line-height: 1;
}

.pc-hex-label {
  color: #d9e4f0;
  font: 700 10px/1.15 var(--pc-mono);
}

.pc-hex em {
  color: #6f8496;
  font: 800 10px/1 var(--pc-mono);
  font-style: normal;
  letter-spacing: 0.8px;
}

.pc-hex.is-clear {
  opacity: 0.55;
}

.pc-hex.is-clear .pc-hex-icon {
  filter: grayscale(1);
}

.pc-hex.is-near {
  --hex: var(--pc-near);
}

.pc-hex.is-near em {
  color: var(--pc-near);
}

.pc-hex.is-near.is-use {
  --hex: rgba(56, 225, 255, 0.6);
}

.pc-hex.is-near.is-use em {
  color: var(--pc-use);
}

.pc-hex.is-on-site {
  --hex: var(--pc-protect);
  filter: drop-shadow(0 0 12px rgba(255, 79, 216, 0.55));
}

.pc-hex.is-on-site::before {
  background: linear-gradient(180deg, rgba(255, 79, 216, 0.32), rgba(40, 6, 36, 0.96) 70%);
}

.pc-hex.is-on-site em {
  color: #ffffff;
}

.pc-hex.is-on-site.is-use {
  --hex: var(--pc-use);
  filter: drop-shadow(0 0 12px rgba(56, 225, 255, 0.5));
}

.pc-hex.is-on-site.is-use::before {
  background: linear-gradient(180deg, rgba(56, 225, 255, 0.28), rgba(4, 26, 36, 0.96) 70%);
}

.pc-hex-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}

.pc-clear-text {
  align-self: center;
}

.pc-hex-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c4d2df;
  font: 600 11px/1.3 var(--pc-mono);
}

.pc-hex-key span::before {
  content: "";
  width: 13px;
  height: 11px;
  background: var(--pc-protect);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.pc-hex-key span.is-use::before {
  background: var(--pc-use);
}

.pc-hex-key span.is-clear {
  color: #6f8496;
}

.pc-hex-key span.is-clear::before {
  background: rgba(150, 170, 190, 0.4);
}

.pc-hit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pc-hit {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 181, 71, 0.22);
  border-left: 3px solid var(--pc-near);
  border-radius: 10px;
}

.pc-hit.is-use {
  border-color: rgba(56, 225, 255, 0.2);
  border-left-color: rgba(56, 225, 255, 0.7);
}

.pc-hit.is-on-site {
  background: rgba(255, 79, 216, 0.07);
  border-color: rgba(255, 79, 216, 0.35);
  border-left-color: var(--pc-protect);
}

.pc-hit.is-on-site.is-use {
  background: rgba(56, 225, 255, 0.06);
  border-color: rgba(56, 225, 255, 0.35);
  border-left-color: var(--pc-use);
}

.pc-hit-icon {
  font-size: 18px;
  text-align: center;
}

.pc-hit-text {
  min-width: 0;
}

.pc-hit-text strong {
  display: block;
  color: #eef3fa;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.pc-hit-text small {
  display: block;
  color: #8fa3b3;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.pc-hit-value {
  color: var(--pc-near);
  font: 800 12px/1 var(--pc-mono);
  white-space: nowrap;
}

.pc-hit.is-use .pc-hit-value {
  color: var(--pc-use);
}

.pc-hit.is-on-site .pc-hit-value {
  color: #ffffff;
}

/* ---------- Ancient monuments: excavation grid ---------- */

.pc-heritage {
  background:
    repeating-linear-gradient(0deg, rgba(224, 164, 88, 0.07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(224, 164, 88, 0.07) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #120d08, #0b0907);
  border: 1px solid rgba(224, 164, 88, 0.28);
}

.pc-heritage .pc-panel-head strong {
  color: #ffe2b8;
}

.pc-heritage .pc-panel-head small,
.pc-heritage .pc-note {
  color: #a8906f;
}

.pc-dig {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.pc-strata {
  display: flex;
  gap: 16px;
}

.pc-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 104px;
  animation: gmd-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 120ms);
  transform-origin: bottom;
}

.pc-count {
  color: #ffe2b8;
  font: 800 34px/1 var(--pc-mono);
  text-shadow: 0 0 18px rgba(224, 164, 88, 0.45);
}

.pc-column.is-empty .pc-count {
  color: #6d5c47;
  text-shadow: none;
}

.pc-column small {
  color: #a8906f;
  font: 700 10px/1.2 var(--pc-mono);
  letter-spacing: 1.2px;
  text-align: center;
}

.pc-shaft {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  width: 100%;
  height: 170px;
  padding: 4px;
  background: repeating-linear-gradient(135deg, rgba(224, 164, 88, 0.08) 0 4px, transparent 4px 9px), #0a0705;
  border: 1px solid rgba(224, 164, 88, 0.35);
  border-top: 2px dashed rgba(224, 164, 88, 0.6);
  border-radius: 4px 4px 10px 10px;
}

.pc-layer {
  display: flex;
  flex-basis: 0;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    var(--seg);
  border-radius: 3px;
  box-shadow: 0 0 12px -2px var(--seg);
}

.pc-layer em {
  color: #160d05;
  font: 800 11px/1 var(--pc-mono);
  font-style: normal;
}

.pc-layer-empty {
  margin: auto;
  color: #6d5c47;
  font: 800 10px/1 var(--pc-mono);
  letter-spacing: 2px;
}

.pc-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 268px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-color: rgba(224, 164, 88, 0.45) transparent;
  scrollbar-width: thin;
}

.pc-tags::-webkit-scrollbar {
  width: 6px;
}

.pc-tags::-webkit-scrollbar-thumb {
  background: rgba(224, 164, 88, 0.45);
  border-radius: 6px;
}

.pc-tags-empty {
  margin: 0;
  color: #c7ad88;
  font-size: 13px;
}

.pc-tag {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 30px;
  background: rgba(255, 236, 205, 0.04);
  border: 1px dashed rgba(224, 164, 88, 0.35);
  border-radius: 6px 12px 12px 6px;
  animation: pc-tag-in 0.45s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* Punched tag hole, coloured by antiquarian assessment */
.pc-tag::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--seg);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--seg);
  transform: translateY(-50%);
}

.pc-tag.is-on-site {
  background: rgba(255, 107, 74, 0.08);
  border-style: solid;
  border-color: rgba(255, 107, 74, 0.45);
}

.pc-tag-text {
  min-width: 0;
}

.pc-tag-text strong {
  display: block;
  color: #ffeedd;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.pc-tag-text small {
  display: block;
  color: #a8906f;
  font: 600 11px/1.35 var(--pc-mono);
  overflow-wrap: anywhere;
}

.pc-tag-status {
  padding: 3px 8px;
  color: var(--seg);
  font: 700 10.5px/1.2 var(--pc-mono);
  border: 1px solid var(--seg);
  border-radius: 999px;
  white-space: nowrap;
}

.pc-tag-distance {
  min-width: 56px;
  color: #ffe2b8;
  font: 800 12px/1 var(--pc-mono);
  text-align: right;
  white-space: nowrap;
}

.pc-tag.is-on-site .pc-tag-distance {
  color: #ff8a70;
}

.pc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.pc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e9d6bb;
  font: 600 11px/1.3 var(--pc-mono);
}

.pc-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--seg);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--seg);
}

@keyframes pc-hex-in {
  from { opacity: 0; scale: 0.7; }
}

@keyframes pc-tag-in {
  from { opacity: 0; translate: -8px 0; }
}

@media (max-width: 1100px) {
  .pc-interest-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .pc-panel {
    padding: 16px 14px;
  }

  .pc-hexes {
    --hw: 88px;
    grid-template-columns: repeat(4, calc(var(--hw) * 0.75));
  }

  .pc-hex {
    padding: 0 12px;
  }

  .pc-hex-icon {
    font-size: 16px;
  }

  .pc-hex-label {
    font-size: 8.5px;
  }

  .pc-hex em {
    font-size: 8.5px;
  }

  .pc-dig {
    grid-template-columns: minmax(0, 1fr);
  }

  .pc-strata {
    justify-content: center;
  }

  .pc-tag {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pc-tag-text {
    grid-area: 1 / 1;
  }

  .pc-tag-distance {
    grid-area: 1 / 2;
  }

  .pc-tag-status {
    grid-area: 2 / 1 / 3 / 3;
    justify-self: start;
  }

  .pc-tags {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-hex,
  .pc-column,
  .pc-tag {
    animation: none;
  }
}

/* ==========================================================
   20. TERRAIN & SLOPE — 3D TERRAIN SCAN + SLOPE BANDS
========================================================== */

.terrain-results {
  --tr-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --u-mono: var(--tr-mono);
  --tr-lime: #c7f25c;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.tr-scan {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px;
}

/* Contour-line backdrop */
.tr-viewport {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  background:
    repeating-radial-gradient(ellipse at 30% 45%, rgba(199, 242, 92, 0.07) 0 1px, transparent 1px 26px),
    radial-gradient(circle at 50% 60%, rgba(44, 232, 198, 0.12), transparent 60%),
    #040c10;
  border: 1px solid rgba(199, 242, 92, 0.25);
  border-radius: 16px;
}

.tr-canvas {
  display: block;
  width: 100%;
  height: 320px;
  cursor: grab;
  touch-action: pan-y;
}

.tr-canvas:active {
  cursor: grabbing;
}

.tr-viewport-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  color: var(--tr-lime);
  font: 700 9.5px/1 var(--tr-mono);
  letter-spacing: 1.6px;
  opacity: 0.75;
  pointer-events: none;
}

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

.tr-figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(199, 242, 92, 0.06), rgba(4, 12, 16, 0.95) 60%);
  border: 1px solid rgba(199, 242, 92, 0.18);
  border-left: 3px solid var(--tr-lime);
  border-radius: 12px;
}

.tr-figure.is-wide {
  grid-column: 1 / -1;
}

.tr-figure span {
  color: #8fb3a0;
  font: 700 10px/1.2 var(--tr-mono);
  letter-spacing: 1.4px;
}

.tr-figure strong {
  color: #f2ffe0;
  font: 800 19px/1.15 var(--tr-mono);
  overflow-wrap: anywhere;
}

.tr-figure small {
  color: #7f9a90;
  font-size: 11.5px;
  line-height: 1.4;
}

.tr-figure.is-watch {
  border-left-color: #ffb547;
}

.tr-figure.is-watch strong {
  color: #ffd08a;
}

.tr-figure.is-good {
  border-left-color: #2ce8c6;
}

.tr-figure.is-good strong {
  color: #8ff5e2;
}

.tr-bands {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 10px 18px;
  padding: 18px 22px;
  background:
    repeating-linear-gradient(90deg, rgba(199, 242, 92, 0.035) 0 1px, transparent 1px 40px),
    rgba(4, 12, 16, 0.92);
  border: 1px solid rgba(199, 242, 92, 0.18);
  border-radius: 16px;
}

.tr-bands-title {
  color: #ffffff;
  font: 800 13px/1.2 var(--tr-mono);
  letter-spacing: 1.6px;
}

.tr-band-bar {
  display: flex;
  gap: 3px;
  height: 34px;
  padding: 4px;
  overflow: hidden;
  background: #061418;
  border: 1px solid #1d3d44;
  border-radius: 10px;
}

.tr-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
    var(--seg);
  border-radius: 6px;
  box-shadow: 0 0 14px -3px var(--seg);
  transform-origin: left;
  animation: gmd-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.tr-band em {
  color: #071317;
  font: 800 11px/1 var(--tr-mono);
  font-style: normal;
}

.tr-band-legend {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  gap: 8px 16px;
}

.tr-band-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d7edf0;
  font: 600 11.5px/1.3 var(--tr-mono);
}

.tr-band-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--seg);
  border-radius: 3px;
  box-shadow: 0 0 8px var(--seg);
}

.tr-band-legend b {
  padding: 1px 6px;
  color: #93a9ae;
  font-weight: 600;
  font-size: 10.5px;
  border: 1px solid rgba(167, 180, 178, 0.25);
  border-radius: 999px;
}

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

@media (max-width: 700px) {
  .tr-viewport,
  .tr-canvas {
    min-height: 0;
    height: 250px;
  }

  .tr-figures {
    gap: 8px;
  }

  .tr-figure {
    padding: 11px 12px;
  }

  .tr-figure strong {
    font-size: 15px;
  }

  .tr-figure small {
    font-size: 10.5px;
  }

  .tr-bands {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 14px;
  }

  .tr-band-legend {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-band {
    animation: none;
  }
}

/* ==========================================================
   21. POWER MARKET & GRID — PRICE-AREA MAP + FACTS
========================================================== */

.energy-results {
  --en-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --en-power: #ffd23f;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.energy-results:empty {
  display: none;
}

.en-panel {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 210, 63, 0.1), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255, 210, 63, 0.03) 0 1px, transparent 1px 24px),
    rgba(10, 10, 6, 0.94);
  border: 1px solid rgba(255, 210, 63, 0.25);
  border-radius: 16px;
}

.en-map-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.en-map {
  width: 100%;
  max-height: 300px;
  overflow: visible;
}

.en-zone {
  fill: rgba(255, 210, 63, 0.05);
  stroke: rgba(255, 210, 63, 0.35);
  stroke-width: 0.06;
  stroke-linejoin: round;
}

.en-zone.is-site-zone {
  fill: rgba(255, 210, 63, 0.28);
  stroke: var(--en-power);
  stroke-width: 0.1;
  filter: drop-shadow(0 0 0.3px rgba(255, 210, 63, 0.9));
}

.en-zone-label {
  fill: rgba(255, 230, 160, 0.55);
  font: 800 0.75px var(--en-mono);
  text-anchor: middle;
  dominant-baseline: middle;
}

.en-zone-label.is-site-zone {
  fill: #ffffff;
}

.en-site-dot {
  fill: #ffffff;
  stroke: var(--en-power);
  stroke-width: 0.08;
}

.en-site-pulse {
  fill: none;
  stroke: var(--en-power);
  stroke-width: 0.08;
  transform-box: fill-box;
  transform-origin: center;
  animation: en-pulse 2.2s ease-out infinite;
}

.en-facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.en-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.en-badge-kicker {
  color: #c9b46a;
  font: 700 10px/1.2 var(--en-mono);
  letter-spacing: 1.6px;
}

.en-badge strong {
  color: var(--en-power);
  font: 800 44px/1 var(--en-mono);
  text-shadow: 0 0 24px rgba(255, 210, 63, 0.45);
}

.en-badge small {
  color: #b9ad86;
  font-size: 12.5px;
}

.en-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.en-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 210, 63, 0.16);
  border-left: 3px solid rgba(255, 210, 63, 0.7);
  border-radius: 10px;
}

.en-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.en-row-label {
  color: #c9b46a;
  font: 700 9.5px/1.2 var(--en-mono);
  letter-spacing: 1.3px;
}

.en-row strong {
  color: #fff6d6;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.en-row small {
  color: #9a917a;
  font-size: 11.5px;
}

.en-link {
  flex-shrink: 0;
  padding: 6px 12px;
  color: #111;
  font: 800 11px/1 var(--en-mono);
  text-decoration: none;
  background: var(--en-power);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 210, 63, 0.35);
}

.en-link:hover {
  background: #ffe27a;
}

@keyframes en-pulse {
  0% { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.2); }
}

@media (max-width: 700px) {
  .en-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px 14px;
  }

  .en-map {
    max-height: 220px;
  }

  .en-badge strong {
    font-size: 34px;
  }

  .en-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .en-site-pulse {
    animation: none;
  }
}

/* ==========================================================
   22. SHORELINE PROTECTION — SHORE PROFILE
========================================================== */

.shoreline-results:empty {
  display: none;
}

.sh-panel {
  --sh-water: #2f9bff;
  --sh-general: #38e1ff;
  background:
    radial-gradient(circle at 0% 50%, rgba(47, 155, 255, 0.16), transparent 40%),
    rgba(4, 10, 22, 0.94);
  border: 1px solid rgba(56, 225, 255, 0.25);
}

.sh-profile {
  position: relative;
  height: 96px;
  overflow: hidden;
  background: #050c18;
  border: 1px solid rgba(56, 225, 255, 0.2);
  border-radius: 12px;
}

.sh-water {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  background:
    repeating-radial-gradient(ellipse at 0% 120%, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #1b6fd6, #0b3a7a);
  box-shadow: inset -8px 0 18px -8px rgba(160, 220, 255, 0.6);
}

.sh-water span {
  color: rgba(220, 240, 255, 0.85);
  font: 800 9px/1 var(--pc-mono);
  letter-spacing: 1.4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.sh-band {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-right: 1px dashed rgba(56, 225, 255, 0.35);
  animation: pc-tag-in 0.5s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}

.sh-band small {
  color: #8fb2c9;
  font: 700 9.5px/1 var(--pc-mono);
  letter-spacing: 0.8px;
}

.sh-band strong {
  color: #ffffff;
  font: 800 18px/1 var(--pc-mono);
}

.sh-band em {
  color: #8fb2c9;
  font: 600 9.5px/1 var(--pc-mono);
  font-style: normal;
}

.sh-band.is-general {
  background: linear-gradient(90deg, rgba(56, 225, 255, 0.34), rgba(56, 225, 255, 0.14));
  box-shadow: inset 0 0 22px rgba(56, 225, 255, 0.25);
}

.sh-band.is-general strong {
  color: #b8f6ff;
  text-shadow: 0 0 14px rgba(56, 225, 255, 0.8);
}

.sh-band.is-extended {
  background: repeating-linear-gradient(135deg, rgba(56, 225, 255, 0.12) 0 6px, transparent 6px 12px);
}

.sh-band.is-free {
  border-right: 0;
}

.sh-marker {
  position: absolute;
  top: 6px;
  z-index: 1;
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(56, 225, 255, 0.8));
  transform: translateX(-50%);
}

.sh-scale {
  position: relative;
  height: 14px;
  margin-top: -8px;
}

.sh-scale span {
  position: absolute;
  color: #6f8ea3;
  font: 700 9.5px/1 var(--pc-mono);
  white-space: nowrap;
  transform: translateX(-50%);
}

.sh-scale span:last-child {
  transform: translateX(-100%);
}

.sh-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sh-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(56, 225, 255, 0.18);
  border-left: 3px solid rgba(56, 225, 255, 0.6);
  border-radius: 10px;
}

.sh-row.is-near {
  background: rgba(56, 225, 255, 0.08);
  border-color: rgba(56, 225, 255, 0.45);
  border-left-color: var(--sh-general);
}

.sh-row.is-none {
  opacity: 0.55;
}

.sh-row-icon {
  font-size: 17px;
  text-align: center;
}

.sh-row strong {
  display: block;
  color: #e9f6ff;
  font-size: 12.5px;
}

.sh-row small {
  display: block;
  color: #8ca3b5;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.sh-row-value {
  color: var(--sh-general);
  font: 800 12px/1 var(--pc-mono);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .sh-profile {
    height: 84px;
  }

  .sh-band strong {
    font-size: 14px;
  }

  .sh-band small,
  .sh-band em {
    font-size: 8px;
  }

  .sh-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-band {
    animation: none;
  }
}

/* ==========================================================
   23. FLOOD — SEA LEVEL & CLOUDBURST CARDS
========================================================== */

.flood-terrain-results {
  --ft-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  margin-top: 18px;
}

.flood-terrain-results:empty {
  display: none;
}

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

.ft-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px;
  background:
    repeating-linear-gradient(0deg, rgba(96, 165, 250, 0.05) 0 1px, transparent 1px 18px),
    linear-gradient(160deg, rgba(37, 99, 235, 0.12), rgba(6, 14, 26, 0.96) 55%);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 16px;
}

.ft-card.is-exposed {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 26px -10px rgba(96, 165, 250, 0.8);
}

.ft-kicker {
  color: #7fb2ff;
  font: 800 10px/1 var(--ft-mono);
  letter-spacing: 1.6px;
}

.ft-title {
  margin-top: -6px;
  color: #f1f6ff;
  font-size: 16px;
}

.ft-lead {
  margin: 0;
  color: #c9d8ee;
  font-size: 13px;
  line-height: 1.5;
}

.ft-gauges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ft-gauge {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.ft-gauge b {
  color: #9cc3ff;
  font: 800 12px/1 var(--ft-mono);
}

.ft-gauge-bar {
  height: 12px;
  overflow: hidden;
  background: #0a1628;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
}

.ft-gauge-fill {
  display: block;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 4px, transparent 4px 8px),
    linear-gradient(90deg, #1d4ed8, #60a5fa);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.7);
  transform-origin: left;
  animation: gmd-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}

.ft-gauge em {
  min-width: 150px;
  color: #8aa4c4;
  font: 600 11px/1.2 var(--ft-mono);
  font-style: normal;
  text-align: right;
}

.ft-gauge.is-hit em {
  color: #d4e6ff;
}

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

.ft-figure {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-left: 3px solid #60a5fa;
  border-radius: 10px;
}

.ft-figure strong {
  color: #e6f0ff;
  font: 800 18px/1.1 var(--ft-mono);
}

.ft-figure small {
  color: #8aa4c4;
  font-size: 11px;
}

.ft-note {
  color: #7d93ad;
  font-size: 11.5px;
  line-height: 1.5;
}

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

@media (max-width: 700px) {
  .ft-card {
    padding: 16px 14px;
  }

  .ft-gauge {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .ft-gauge em {
    grid-column: 1 / -1;
    min-width: 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft-gauge-fill {
    animation: none;
  }
}

/* ==========================================================
   24. COMPARE SITES — SIDE-BY-SIDE MATRIX
========================================================== */

.workspace-tab .compare-count:empty {
  display: none;
}

.workspace-tab .compare-count {
  min-width: 18px;
  padding: 2px 6px;
  color: #071317;
  font-weight: 800;
  text-align: center;
  background: var(--ts-teal, #2ce8c6);
  border-radius: 999px;
}

.compare-add-btn {
  margin-left: 8px;
  color: #071317;
  background: linear-gradient(135deg, #2ce8c6, #13a98f);
  box-shadow: 0 6px 18px rgba(44, 232, 198, 0.22);
}

.compare-add-btn.is-added {
  color: #2ce8c6;
  background: transparent;
  border: 1px solid rgba(44, 232, 198, 0.55);
  box-shadow: none;
}

.compare-heading {
  position: relative;
}

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

.compare-clear-btn {
  margin-top: 14px;
  padding: 7px 14px;
  color: #9fb8be;
  font: 700 11px/1 var(--ts-mono);
  letter-spacing: 1px;
  background: transparent;
  border: 1px solid rgba(159, 184, 190, 0.35);
  border-radius: 999px;
  cursor: pointer;
}

.compare-clear-btn:hover {
  color: #ff8a80;
  border-color: rgba(255, 138, 128, 0.6);
}

.compare-results {
  margin: 22px 0;
}

.cmp-empty {
  max-width: 640px;
  padding: 28px;
  background: rgba(11, 29, 34, 0.9);
  border: 1px dashed rgba(44, 232, 198, 0.35);
  border-radius: 16px;
}

.cmp-empty strong {
  color: #ffffff;
  font-size: 17px;
}

.cmp-empty p {
  color: #a9c2c7;
  line-height: 1.6;
}

/* The matrix: one label column + one column per site; scrolls sideways on small screens */
.cmp-table {
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) repeat(var(--cmp-cols), minmax(150px, 1fr));
  overflow-x: auto;
  background: rgba(6, 18, 22, 0.94);
  border: 1px solid var(--ts-line, rgba(44, 232, 198, 0.22));
  border-radius: 16px;
}

.cmp-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: #5f8890;
  font: 800 10px/1 var(--ts-mono);
  letter-spacing: 2px;
  background: #06171b;
  border-bottom: 1px solid rgba(44, 232, 198, 0.25);
}

.cmp-site {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(44, 232, 198, 0.08), transparent);
  border-bottom: 1px solid rgba(44, 232, 198, 0.25);
  border-left: 1px solid rgba(44, 232, 198, 0.1);
}

.cmp-site-top {
  display: flex;
  gap: 6px;
}

.cmp-site-name {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  color: #ffffff;
  font: 800 15px/1.2 Arial, sans-serif;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.cmp-site-name:hover,
.cmp-site-name:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(44, 232, 198, 0.4);
  outline: none;
}

.cmp-remove {
  width: 28px;
  height: 28px;
  color: #7fa3ab;
  background: transparent;
  border: 1px solid rgba(127, 163, 171, 0.3);
  border-radius: 8px;
  cursor: pointer;
}

.cmp-remove:hover {
  color: #ff8a80;
  border-color: rgba(255, 138, 128, 0.6);
}

.cmp-outline {
  width: 100%;
  height: 64px;
}

.cmp-outline polygon {
  fill: rgba(255, 133, 27, 0.18);
  stroke: #ff9b35;
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255, 133, 27, 0.6));
}

.cmp-site small {
  color: #6f9098;
  font: 600 10.5px/1.3 var(--ts-mono);
}

.cmp-site .cmp-pending {
  color: #ffb15c;
}

.cmp-group {
  grid-column: 1 / -1;
  padding: 14px 16px 6px;
  color: var(--ts-teal, #2ce8c6);
  font: 800 10.5px/1 var(--ts-mono);
  letter-spacing: 2.2px;
  border-top: 1px solid rgba(44, 232, 198, 0.12);
}

.cmp-label {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 9px 16px;
  background: #06171b;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cmp-label span {
  color: #dbe9ec;
  font-size: 13px;
}

.cmp-label small {
  color: #5f8890;
  font: 600 9.5px/1.2 var(--ts-mono);
}

.cmp-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  color: #e9f3f5;
  font: 700 13px/1.25 var(--ts-mono);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 1px solid rgba(44, 232, 198, 0.08);
}

.cmp-cell.is-best {
  color: #8ff5e2;
  background: linear-gradient(90deg, rgba(44, 232, 198, 0.16), rgba(44, 232, 198, 0.03));
  box-shadow: inset 3px 0 0 #2ce8c6;
}

.cmp-cell.is-best::after {
  content: "▲";
  font-size: 9px;
}

.cmp-cell.is-worst {
  color: #ffd08a;
  background: linear-gradient(90deg, rgba(255, 177, 92, 0.14), rgba(255, 177, 92, 0.02));
  box-shadow: inset 3px 0 0 #ffb15c;
}

.cmp-cell.is-worst::after {
  content: "▼";
  font-size: 9px;
}

.cmp-cell.is-missing {
  color: #4f6f77;
}

@media (max-width: 700px) {
  .compare-add-btn {
    margin-left: 0;
  }

  .cmp-table {
    grid-template-columns: minmax(130px, 1fr) repeat(var(--cmp-cols), minmax(120px, 1fr));
  }

  .cmp-label {
    padding: 8px 10px;
  }

  .cmp-label span {
    font-size: 12px;
  }

  .cmp-cell {
    padding: 8px 10px;
    font-size: 12px;
  }

  .cmp-site {
    padding: 10px 8px;
  }

  .cmp-site-name {
    padding: 4px;
    font-size: 13px;
  }

  .cmp-remove {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================
   25. EXPLORE MAP — MISSION-CONTROL SKIN
   Glass panels, brand typefaces, dark map, HUD overlays.
   Scoped to body.ts-skin so earlier rules stay as fallback.
========================================================== */

body.ts-skin {
  --k-bg: #03080c;
  --k-panel: rgba(8, 19, 25, 0.82);
  --k-panel-solid: #08151b;
  --k-line: rgba(120, 220, 210, 0.14);
  --k-line-strong: rgba(44, 232, 198, 0.35);
  --k-teal: #2ce8c6;
  --k-orange: #ff851b;
  --k-text: #e8f3f4;
  --k-muted: #86a3aa;
  --k-head: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --k-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--k-bg);
  font-family: "Segoe UI", Arial, sans-serif;
}

/* ---------- Header ---------- */

body.ts-skin .app-header {
  position: relative;
  height: 64px;
  padding: 0 22px;
  background:
    linear-gradient(90deg, rgba(255, 133, 27, 0.08), transparent 30%),
    linear-gradient(180deg, #0a171d, #060f14);
  border-bottom: 0;
}

body.ts-skin .app-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--k-orange) 20%, var(--k-teal) 60%, transparent);
  opacity: 0.6;
}

body.ts-skin .brand {
  gap: 12px;
}

body.ts-skin .brand-icon.ts-logo {
  width: 34px;
  height: 34px;
  color: var(--k-orange);
  filter: drop-shadow(0 0 10px rgba(255, 133, 27, 0.5));
}

body.ts-skin .brand h1 {
  font-family: var(--k-head);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

body.ts-skin .brand p {
  margin-top: 2px;
  color: var(--k-muted);
  font-family: var(--k-mono);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

body.ts-skin .header-right {
  gap: 10px;
}

body.ts-skin .live-status,
body.ts-skin .crs-label,
body.ts-skin .header-right .region-label,
body.ts-skin .ts-intro-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: var(--k-muted);
  font: 700 10px/1 var(--k-mono);
  letter-spacing: 1.2px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--k-line);
  border-radius: 999px;
  box-shadow: none;
}

body.ts-skin .live-status {
  color: #5eeaa0;
}

body.ts-skin .header-right .region-label {
  color: #ffb066;
  border-color: rgba(255, 133, 27, 0.45);
  background: rgba(255, 133, 27, 0.08);
}

body.ts-skin .ts-intro-replay {
  color: var(--k-teal);
  cursor: pointer;
}

body.ts-skin .ts-intro-replay:hover {
  border-color: var(--k-line-strong);
  background: rgba(44, 232, 198, 0.08);
}

/* ---------- Workspace tabs: segmented control ---------- */

body.ts-skin .workspace-nav {
  gap: 4px;
  padding: 8px 22px;
  background: #050d12;
  border-bottom: 1px solid var(--k-line);
}

body.ts-skin .workspace-tab {
  position: relative;
  padding: 9px 16px;
  color: #a9c0c6;
  font-family: var(--k-head);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease;
}

body.ts-skin .workspace-tab:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

body.ts-skin .workspace-tab.active {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 133, 27, 0.18), rgba(255, 133, 27, 0.06));
  border-color: rgba(255, 133, 27, 0.55);
  box-shadow: 0 0 22px -6px rgba(255, 133, 27, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.ts-skin .workspace-tab.active > span {
  color: var(--k-orange);
}

/* ---------- Sidebar ---------- */

body.ts-skin .sidebar {
  width: 320px;
  padding: 22px 16px;
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(44, 232, 198, 0.07), transparent 60%),
    linear-gradient(180deg, #071318, #050e12);
  border-right: 1px solid var(--k-line);
  scrollbar-color: rgba(44, 232, 198, 0.3) transparent;
  scrollbar-width: thin;
}

body.ts-skin .sidebar-heading .eyebrow,
body.ts-skin .sidebar-section .eyebrow {
  color: var(--k-teal);
  font: 700 9.5px/1 var(--k-mono);
  letter-spacing: 2.4px;
}

body.ts-skin .sidebar-heading h2 {
  margin: 8px 0 8px;
  font-family: var(--k-head);
  font-size: 21px;
  letter-spacing: -0.4px;
}

body.ts-skin .sidebar-heading p {
  color: var(--k-muted);
}

body.ts-skin .layer-category {
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--k-line);
  border-radius: 14px;
  transition: border-color 0.2s ease;
}

body.ts-skin .layer-category[open] {
  border-color: rgba(44, 232, 198, 0.28);
  box-shadow: 0 10px 30px -18px rgba(44, 232, 198, 0.5);
}

body.ts-skin .layer-category-header {
  padding: 13px 14px;
}

body.ts-skin .layer-category-header:hover {
  background: rgba(44, 232, 198, 0.05);
}

body.ts-skin .layer-category-title {
  font-family: var(--k-head);
  font-size: 14px;
  font-weight: 600;
}

body.ts-skin .category-count {
  color: var(--k-teal);
  font: 700 9.5px/1 var(--k-mono);
  letter-spacing: 1px;
}

body.ts-skin .layer-category-content {
  border-top-color: var(--k-line);
}

body.ts-skin .layer-group-title {
  color: var(--k-muted);
  font: 700 9.5px/1 var(--k-mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

body.ts-skin .layer-item {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 10px;
  color: #d9e8eb;
  transition: background 0.2s ease, border-color 0.2s ease;
}

body.ts-skin .layer-item:hover {
  background: rgba(44, 232, 198, 0.05);
  border-color: var(--k-line);
}

/* Checkboxes become switches */
body.ts-skin .layer-item input[type="checkbox"] {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 19px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #1a2a30;
  border: 1px solid #2c4249;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

body.ts-skin .layer-item input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  background: #6f8a91;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

body.ts-skin .layer-item input[type="checkbox"]:checked {
  background: rgba(44, 232, 198, 0.25);
  border-color: var(--k-teal);
  box-shadow: 0 0 12px -2px rgba(44, 232, 198, 0.6);
}

body.ts-skin .layer-item input[type="checkbox"]:checked::after {
  background: var(--k-teal);
  transform: translateX(15px);
}

body.ts-skin .layer-item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--k-teal);
  outline-offset: 2px;
}

body.ts-skin .future-layer-item {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--k-line);
  border-radius: 12px;
  font-family: var(--k-head);
  font-weight: 500;
}

body.ts-skin .climate-layer-active {
  font-family: var(--k-mono);
}

body.ts-skin .sidebar-section {
  border-top-color: var(--k-line);
}

body.ts-skin .sidebar-section h3 {
  font-family: var(--k-head);
  font-weight: 600;
}

body.ts-skin .sidebar-footer {
  font-family: var(--k-mono);
  font-size: 9.5px;
  letter-spacing: 0.6px;
}

/* ---------- Map: dark tiles, HUD ---------- */

body.ts-skin .map-area {
  background: #071015;
}

.ts-dark-tiles {
  filter: invert(1) hue-rotate(185deg) brightness(0.92) contrast(0.9) saturate(0.55);
}

body.ts-skin .map-area .leaflet-container {
  background: #0a1418;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Gentle vignette over the map, under the controls */
body.ts-skin .map-area::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 401;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(2, 8, 12, 0.55));
}

.ts-hud {
  position: absolute;
  inset: 10px;
  z-index: 402;
  pointer-events: none;
}

.ts-hud-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: rgba(44, 232, 198, 0.55);
  border-style: solid;
  border-width: 0;
}

.ts-hud-corner.is-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.ts-hud-corner.is-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.ts-hud-corner.is-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.ts-hud-corner.is-br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }

.ts-hud-readout {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 700;
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  color: var(--k-muted, #86a3aa);
  font: 600 10.5px/1 var(--k-mono, monospace);
  letter-spacing: 0.8px;
  background: rgba(4, 12, 16, 0.78);
  border: 1px solid rgba(120, 220, 210, 0.16);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  pointer-events: none;
}

.ts-hud-readout b {
  color: var(--k-teal, #2ce8c6);
  font-weight: 700;
}

.ts-hud-readout em {
  color: #e8f3f4;
  font-style: normal;
}

.ts-hud-hint {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #e8f3f4;
  font-size: 12.5px;
  background: rgba(4, 12, 16, 0.82);
  border: 1px solid rgba(255, 133, 27, 0.45);
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(255, 133, 27, 0.5);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  white-space: nowrap;
}

.ts-hud-hint strong {
  color: #ffb066;
}

.ts-hud-hint.is-hidden {
  opacity: 0;
  transform: translate(-50%, -12px);
}

.ts-hud-hint-pulse {
  width: 9px;
  height: 9px;
  background: var(--k-orange, #ff851b);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 133, 27, 0.7);
  animation: ts-pulse 1.8s ease-out infinite;
}

/* Floating panels: glass */
body.ts-skin .map-info {
  top: 18px;
  right: 18px;
  display: none;
}

body.ts-skin .map-area .ts-right-panel-stack {
  top: 18px;
  max-height: calc(100% - 36px);
}

body.ts-skin .location-finder,
body.ts-skin .map-area .leaflet-draw.leaflet-control,
body.ts-skin .map-area .leaflet-control-layers,
body.ts-skin .map-area .leaflet-bar {
  background: var(--k-panel);
  border: 1px solid var(--k-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
}

body.ts-skin .location-finder-header h3,
body.ts-skin .ts-draw-heading-title {
  font-family: var(--k-head);
}

body.ts-skin .location-finder .eyebrow {
  color: var(--k-teal);
  font-family: var(--k-mono);
  letter-spacing: 2px;
}

body.ts-skin .location-field select,
body.ts-skin .location-field input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--k-line);
  border-radius: 10px;
  color: var(--k-text);
}

/* Dropdown lists: dark options (Windows shows them on white otherwise) */
body.ts-skin select option {
  color: #e8f3f4;
  background: #0b1a20;
}

body.ts-skin select option:checked,
body.ts-skin select option:hover {
  color: #071317;
  background: #2ce8c6;
}

body.ts-skin .location-field select:focus,
body.ts-skin .location-field input:focus {
  border-color: var(--k-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 232, 198, 0.15);
}

body.ts-skin .location-search-btn {
  border-radius: 10px;
  background: linear-gradient(135deg, #ff9b35, #e8620e);
  box-shadow: 0 8px 22px -8px rgba(255, 133, 27, 0.8);
  font-family: var(--k-head);
}

body.ts-skin .map-area .leaflet-control-layers {
  padding: 4px 6px;
  color: var(--k-text);
}

body.ts-skin .map-area .leaflet-control-layers label {
  font-family: var(--k-head);
  font-size: 12px;
}

body.ts-skin .map-area .leaflet-control-layers input {
  accent-color: var(--k-teal);
}

body.ts-skin .map-area .leaflet-bar a {
  color: var(--k-text);
  background: transparent;
  border-bottom-color: var(--k-line);
}

body.ts-skin .map-area .leaflet-bar a:hover {
  color: var(--k-teal);
  background: rgba(44, 232, 198, 0.08);
}

body.ts-skin .map-area .leaflet-control-scale-line {
  color: var(--k-muted);
  background: rgba(4, 12, 16, 0.75);
  border-color: rgba(120, 220, 210, 0.4);
  font-family: var(--k-mono);
  font-size: 9.5px;
}

body.ts-skin .map-area .leaflet-control-attribution {
  color: #6f8a91;
  background: rgba(4, 12, 16, 0.75);
}

body.ts-skin .map-area .leaflet-control-attribution a {
  color: #8fc9c0;
}

@keyframes ts-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 133, 27, 0.7); }
  100% { box-shadow: 0 0 0 12px rgba(255, 133, 27, 0); }
}

@media (max-width: 760px) {
  body.ts-skin .sidebar {
    width: 100%;
  }

  .ts-hud-hint {
    top: 12px;
    right: 12px;
    left: 64px;
    padding: 8px 12px;
    font-size: 11px;
    white-space: normal;
    border-radius: 12px;
    transform: none;
  }

  .ts-hud-hint.is-hidden {
    transform: translateY(-12px);
  }

  .ts-hud-readout {
    display: none;
  }

  body.ts-skin .crs-label {
    display: none;
  }

  /* Phones: panels at the bottom of the map, map controls free at the top */
  body.ts-skin .map-area .ts-right-panel-stack {
    top: auto;
    right: 10px;
    bottom: 34px;
    left: 10px;
    width: auto;
    max-width: none;
    max-height: 55%;
  }
}

/* ==========================================================
   26. ENTRANCE — INTRO SCREEN
========================================================== */

html.ts-intro-skip .ts-intro {
  display: none;
}

.ts-intro {
  --i-teal: #2ce8c6;
  --i-orange: #ff851b;
  --i-head: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --i-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 4vw;
  padding: 6vh 6vw 9vh;
  overflow: hidden;
  color: #e8f3f4;
  background:
    radial-gradient(60% 60% at 75% 45%, rgba(44, 232, 198, 0.12), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(255, 133, 27, 0.12), transparent 70%),
    #02070a;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.7, 0, 0.3, 1), filter 0.9s ease;
}

.ts-intro[hidden],
.ts-intro.is-gone {
  display: none;
}

.ts-intro.is-leaving {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(6px);
  pointer-events: none;
}

/* Moving perspective grid */
.ts-intro-grid {
  position: absolute;
  inset: -50% -20% -10%;
  background:
    linear-gradient(rgba(44, 232, 198, 0.09) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(44, 232, 198, 0.09) 1px, transparent 1px) 0 0 / 64px 64px;
  transform: perspective(700px) rotateX(62deg) translateY(10%);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent 20%, #000 70%);
  animation: ts-grid-move 6s linear infinite;
}

.ts-intro-glow {
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(44, 232, 198, 0.08), transparent);
  pointer-events: none;
}

.ts-intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 600px;
}

.ts-intro-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: ts-rise 0.9s ease-out both;
}

.ts-intro-brand .ts-logo {
  width: 46px;
  height: 46px;
  color: var(--i-orange);
  filter: drop-shadow(0 0 14px rgba(255, 133, 27, 0.6));
}

.ts-intro-brand strong {
  display: block;
  font: 700 22px/1 var(--i-head);
}

.ts-intro-brand strong span {
  color: var(--i-orange);
}

.ts-intro-brand small {
  color: #7e9aa1;
  font: 600 10px/1.6 var(--i-mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.ts-intro-eyebrow {
  color: var(--i-teal);
  font: 700 11px/1 var(--i-mono);
  letter-spacing: 3px;
  animation: ts-rise 0.9s 0.1s ease-out both;
}

.ts-intro h1 {
  margin: 0;
  font: 700 clamp(34px, min(5.2vw, 8vh), 72px)/1.02 var(--i-head);
  letter-spacing: -2px;
  animation: ts-rise 0.9s 0.2s ease-out both;
}

.ts-intro h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--i-orange), #ffd08a 45%, var(--i-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ts-intro-lead {
  margin: 0;
  color: #a7c0c6;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.6;
  animation: ts-rise 0.9s 0.3s ease-out both;
}

/* Slides */
.ts-slides {
  position: relative;
  min-height: 118px;
  animation: ts-rise 0.9s 0.4s ease-out both;
}

.ts-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(44, 232, 198, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(44, 232, 198, 0.22);
  border-left: 3px solid var(--i-teal);
  border-radius: 14px;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.ts-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ts-slide-kicker {
  color: var(--i-teal);
  font: 700 10px/1 var(--i-mono);
  letter-spacing: 2px;
}

.ts-slide strong {
  font: 600 19px/1.25 var(--i-head);
}

.ts-slide p {
  margin: 0;
  color: #9fb8be;
  font-size: 13.5px;
  line-height: 1.5;
}

.ts-slide-dots {
  display: flex;
  gap: 8px;
}

.ts-slide-dots button {
  position: relative;
  width: 44px;
  height: 4px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.ts-slide-dots button i {
  position: absolute;
  inset: 0;
  background: var(--i-teal);
  transform: scaleX(0);
  transform-origin: left;
}

.ts-slide-dots button.is-active i {
  animation: ts-progress var(--slide-ms, 4800ms) linear forwards;
}

.ts-intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  animation: ts-rise 0.9s 0.5s ease-out both;
}

.ts-enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 28px;
  overflow: hidden;
  color: #0b1216;
  font: 700 16px/1 var(--i-head);
  background: linear-gradient(135deg, #ffa24a, var(--i-orange) 50%, #e45c08);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(255, 133, 27, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ts-enter b {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.ts-enter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ts-shine 3.2s 1.5s ease-in-out infinite;
}

.ts-enter:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -14px rgba(255, 133, 27, 1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ts-enter:hover b {
  transform: translateX(4px);
}

.ts-enter:focus-visible {
  outline: 3px solid var(--i-teal);
  outline-offset: 3px;
}

.ts-intro-skip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7e9aa1;
  font-size: 12.5px;
  cursor: pointer;
}

.ts-intro-skip-label input {
  accent-color: var(--i-teal);
}

/* Sweden visual */
.ts-intro-visual {
  position: relative;
  z-index: 1;
  height: min(78vh, 760px);
  animation: ts-fade 1.4s 0.2s ease-out both;
}

.ts-intro-map {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ts-county {
  fill: rgba(44, 232, 198, 0.035);
  stroke: rgba(44, 232, 198, 0.75);
  stroke-width: 0.35;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 1.2px rgba(44, 232, 198, 0.9));
  animation: ts-draw 2.6s calc(var(--i) * 60ms + 0.3s) cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

.ts-place {
  opacity: 0;
  animation: ts-fade 0.6s calc(var(--i) * 180ms + 2s) ease-out forwards;
}

.ts-place-dot {
  fill: #ffffff;
}

.ts-place-ring {
  fill: none;
  stroke: var(--i-orange);
  stroke-width: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: ts-ring 2.4s calc(var(--i) * 300ms) ease-out infinite;
}

.ts-place-label {
  fill: #b9cdd2;
  font: 600 2.2px var(--i-mono);
}

.ts-radar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(44, 232, 198, 0.09), transparent 18%);
  border: 1px solid rgba(44, 232, 198, 0.12);
  transform: translate(-50%, -50%);
  animation: ts-spin 7s linear infinite;
  mask-image: radial-gradient(circle, #000 60%, transparent 71%);
  pointer-events: none;
}

.ts-chip {
  position: absolute;
  top: var(--y);
  left: var(--x);
  padding: 7px 11px;
  color: #cfe7ea;
  font: 700 10px/1 var(--i-mono);
  letter-spacing: 1.4px;
  background: rgba(4, 14, 18, 0.8);
  border: 1px solid rgba(44, 232, 198, 0.3);
  border-radius: 999px;
  box-shadow: 0 0 20px -6px rgba(44, 232, 198, 0.6);
  opacity: 0;
  animation: ts-float 6s var(--d) ease-in-out infinite, ts-fade 0.8s calc(var(--d) + 2.2s) ease-out forwards;
}

.ts-intro-footer {
  position: absolute;
  right: 6vw;
  bottom: 3vh;
  left: 6vw;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: #56727a;
  font: 600 10.5px/1 var(--i-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.ts-intro-footer kbd {
  padding: 2px 6px;
  color: #cfe7ea;
  font: inherit;
  border: 1px solid #2b4148;
  border-radius: 5px;
}

/* Shorter windows: tighter spacing so the footer never meets the button */
@media (min-width: 901px) and (max-height: 980px) {
  .ts-intro {
    padding-top: 4vh;
    padding-bottom: 10vh;
  }

  .ts-intro-content {
    gap: 13px;
  }

  .ts-intro-lead {
    font-size: 15px;
  }

  .ts-slides {
    min-height: 108px;
  }

  .ts-intro-footer {
    bottom: 2.4vh;
  }
}

@keyframes ts-grid-move { to { background-position: 0 64px, 0 0; } }
@keyframes ts-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ts-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-draw { to { stroke-dashoffset: 0; } }
@keyframes ts-ring { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes ts-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ts-progress { to { transform: scaleX(1); } }
@keyframes ts-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes ts-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

@media (max-width: 900px) {
  .ts-intro {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    padding: 24px 20px 28px;
    overflow-y: auto;
  }

  .ts-intro-visual {
    order: -1;
    height: 30vh;
  }

  .ts-chip,
  .ts-radar {
    display: none;
  }

  .ts-intro h1 {
    letter-spacing: -1px;
  }

  .ts-slides {
    min-height: 150px;
  }

  .ts-intro-footer {
    position: static;
    flex-direction: column;
    gap: 6px;
    margin-top: 18px;
  }
}

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

  .ts-county {
    stroke-dashoffset: 0;
  }

  .ts-place,
  .ts-chip {
    opacity: 1;
  }
}

/* ==========================================================
   27. REPORTS & PROJECTS
========================================================== */

.save-project-btn {
  margin-left: 8px;
  color: #e8f3f4;
  background: linear-gradient(135deg, #24414a, #18303a);
  border: 1px solid rgba(44, 232, 198, 0.35);
  box-shadow: none;
}

.assessment-source-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
  padding: 10px 14px;
  color: #d9e8eb;
  font-size: 13px;
  background: rgba(44, 232, 198, 0.08);
  border: 1px solid rgba(44, 232, 198, 0.35);
  border-radius: 12px;
}

.assessment-source-banner[hidden] {
  display: none;
}

.assessment-source-banner strong {
  color: #ffffff;
}

.assessment-source-banner button,
.pj-btn {
  padding: 8px 14px;
  color: #d9e8eb;
  font: 600 12.5px/1 var(--k-head, Arial, sans-serif);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 220, 210, 0.25);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.assessment-source-banner button:hover,
.pj-btn:hover:not(:disabled) {
  background: rgba(44, 232, 198, 0.1);
  border-color: rgba(44, 232, 198, 0.55);
}

.pj-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pj-btn.is-primary {
  color: #071317;
  background: linear-gradient(135deg, #2ce8c6, #13a98f);
  border-color: transparent;
}

.pj-btn.is-danger {
  color: #ff9a8f;
  border-color: rgba(255, 138, 128, 0.35);
}

.pj-btn.is-danger:hover {
  background: rgba(255, 92, 108, 0.1);
  border-color: rgba(255, 138, 128, 0.7);
}

.pj-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  margin: 22px 0;
}

.pj-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pj-new {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(11, 29, 34, 0.9);
  border: 1px solid rgba(44, 232, 198, 0.22);
  border-radius: 14px;
}

.pj-new strong {
  color: #ffffff;
  font-family: var(--k-head, Arial, sans-serif);
}

.pj-new input,
.pj-head input,
.pj-head textarea,
.pj-dialog input,
.pj-dialog select,
.pj-dialog textarea {
  width: 100%;
  padding: 9px 11px;
  color: #e8f3f4;
  font: 13px/1.4 "Segoe UI", Arial, sans-serif;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 220, 210, 0.2);
  border-radius: 10px;
}

.pj-new input:focus,
.pj-head input:focus,
.pj-head textarea:focus,
.pj-dialog input:focus,
.pj-dialog select:focus,
.pj-dialog textarea:focus {
  border-color: #2ce8c6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 232, 198, 0.15);
}

.pj-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pj-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  color: #d9e8eb;
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(120, 220, 210, 0.14);
  border-left: 3px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pj-card:hover {
  background: rgba(44, 232, 198, 0.05);
}

.pj-card.is-active {
  background: rgba(255, 133, 27, 0.08);
  border-color: rgba(255, 133, 27, 0.45);
  border-left-color: #ff851b;
}

.pj-card strong {
  color: #ffffff;
  font: 600 14px/1.3 var(--k-head, Arial, sans-serif);
}

.pj-card span {
  color: #9fb8be;
  font-size: 12.5px;
}

.pj-card small,
.pj-meta {
  color: #6f9098;
  font: 600 10.5px/1.4 var(--k-mono, monospace);
}

.pj-empty,
.pj-error,
.pj-placeholder {
  margin: 0;
  padding: 18px;
  color: #9fb8be;
  line-height: 1.6;
  border: 1px dashed rgba(44, 232, 198, 0.3);
  border-radius: 12px;
}

.pj-error {
  color: #ffb4a8;
  border-color: rgba(255, 138, 128, 0.4);
}

.pj-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.pj-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 10px;
  padding: 18px;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(255, 133, 27, 0.08), transparent 60%),
    rgba(11, 29, 34, 0.9);
  border: 1px solid rgba(44, 232, 198, 0.22);
  border-radius: 16px;
}

.pj-head .pj-title {
  font: 700 20px/1.2 var(--k-head, Arial, sans-serif);
  background: transparent;
  border-color: transparent;
}

.pj-head .pj-title:hover {
  border-color: rgba(120, 220, 210, 0.2);
}

.pj-description,
.pj-meta,
.pj-actions {
  grid-column: 1 / -1;
}

.pj-description {
  resize: vertical;
}

.pj-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.pj-sites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.pj-site {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: rgba(6, 18, 22, 0.94);
  border: 1px solid rgba(120, 220, 210, 0.16);
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pj-site:hover {
  border-color: rgba(44, 232, 198, 0.45);
  transform: translateY(-2px);
}

.pj-site-top {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.pj-site-top .cmp-outline {
  width: 86px;
  height: 60px;
}

.pj-site-name {
  width: 100%;
  padding: 4px 6px;
  color: #ffffff;
  font: 700 15px/1.2 var(--k-head, Arial, sans-serif);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.pj-site-name:hover,
.pj-site-name:focus {
  border-color: rgba(44, 232, 198, 0.4);
  outline: none;
}

.pj-site-top small {
  display: block;
  padding-left: 6px;
  color: #6f9098;
  font: 600 10.5px/1.4 var(--k-mono, monospace);
}

.pj-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pj-fact {
  padding: 4px 8px;
  color: #d9e8eb;
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(120, 220, 210, 0.16);
  border-radius: 999px;
}

.pj-fact b {
  color: #6fd9c6;
  font: 700 9px/1 var(--k-mono, monospace);
  letter-spacing: 1px;
}

.pj-fact.is-flag {
  border-color: rgba(255, 177, 92, 0.45);
  background: rgba(255, 177, 92, 0.08);
}

.pj-fact.is-flag b {
  color: #ffb15c;
}

.pj-notes {
  margin: 0;
  padding: 8px 10px;
  color: #b9cdd2;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(255, 133, 27, 0.6);
  border-radius: 6px;
}

.pj-site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

/* Save dialog */
.pj-dialog {
  width: min(460px, calc(100% - 32px));
  padding: 0;
  color: #e8f3f4;
  background: #08151b;
  border: 1px solid rgba(44, 232, 198, 0.35);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 40px -10px rgba(44, 232, 198, 0.3);
}

.pj-dialog::backdrop {
  background: rgba(2, 7, 10, 0.7);
  backdrop-filter: blur(4px);
}

.pj-dialog form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
}

.pj-dialog .eyebrow {
  color: #2ce8c6;
  font: 700 10px/1 var(--k-mono, monospace);
  letter-spacing: 2px;
}

.pj-dialog h3 {
  margin: 4px 0 8px;
  font: 700 20px/1.2 var(--k-head, Arial, sans-serif);
}

.pj-dialog label {
  margin-top: 6px;
  color: #9fb8be;
  font-size: 12px;
  font-weight: 600;
}

.pj-dialog-new {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pj-dialog-new[hidden] {
  display: none;
}

.pj-dialog-status {
  min-height: 18px;
  margin: 4px 0 0;
  color: #ffb15c;
  font-size: 12.5px;
}

.pj-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .pj-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pj-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .save-project-btn {
    margin-left: 0;
  }
}

/* ==========================================================
   28. MARKET & WORKFORCE — CATCHMENT RINGS + TOWNS
========================================================== */

.workforce-results {
  --u-mono: var(--k-mono, ui-monospace, Consolas, monospace);
  --wf: #9b8cff;
  --wf-soft: rgba(155, 140, 255, 0.14);
  --wf-mono: var(--k-mono, ui-monospace, Consolas, monospace);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.wf-panel {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 18px 22px;
  background:
    radial-gradient(circle at 18% 50%, rgba(155, 140, 255, 0.14), transparent 45%),
    rgba(9, 8, 22, 0.94);
  border: 1px solid rgba(155, 140, 255, 0.28);
  border-radius: 16px;
}

.wf-rings-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.wf-rings-box small {
  color: #9d98c4;
  font: 600 10px/1.3 var(--wf-mono);
  text-align: center;
}

.wf-rings {
  width: 100%;
  max-width: 280px;
}

.wf-ring {
  fill: rgba(155, 140, 255, 0.07);
  stroke: rgba(155, 140, 255, 0.55);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  transform-origin: 150px 150px;
  animation: wf-ring-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 120ms);
}

.wf-ring-label {
  fill: #b8b0ff;
  font: 700 10px var(--wf-mono);
  text-anchor: middle;
  letter-spacing: 1px;
}

.wf-ring-value {
  fill: #ffffff;
  font: 800 13px var(--wf-mono);
  text-anchor: middle;
}

.wf-site {
  fill: #ff851b;
  stroke: #ffd2a6;
  stroke-width: 1;
}

.wf-site-pulse {
  fill: none;
  stroke: #ff851b;
  stroke-width: 1.5;
  transform-origin: 150px 150px;
  animation: en-pulse 2.2s ease-out infinite;
}

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

.wf-row {
  display: grid;
  grid-template-columns: 64px 90px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #e7e4ff;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(155, 140, 255, 0.16);
  border-radius: 10px;
  font: 600 13px/1.2 var(--wf-mono);
}

.wf-row.is-head {
  padding-block: 4px;
  color: #8e88b8;
  background: none;
  border: 0;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.wf-radius {
  color: var(--wf);
}

.wf-share {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr);
  align-items: center;
  gap: 2px 10px;
}

.wf-share strong {
  color: #ffffff;
  font-size: 15px;
}

.wf-share i {
  height: 6px;
  background: linear-gradient(90deg, #6d5dfc, var(--wf));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(155, 140, 255, 0.6);
}

.wf-share small {
  grid-column: 1 / -1;
  color: #8e88b8;
  font-size: 10.5px;
}

.wf-change {
  justify-self: end;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid rgba(155, 140, 255, 0.25);
  border-radius: 999px;
}

.wf-change.is-up {
  color: #5eeaa0;
  border-color: rgba(94, 234, 160, 0.45);
}

.wf-change.is-down {
  color: #ffb15c;
  border-color: rgba(255, 177, 92, 0.45);
}

.wf-towns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 22px;
  background: rgba(9, 8, 22, 0.94);
  border: 1px solid rgba(155, 140, 255, 0.2);
  border-radius: 16px;
}

.wf-towns-title {
  margin-bottom: 4px;
  color: #b8b0ff;
  font: 800 10px/1.3 var(--wf-mono);
  letter-spacing: 1.6px;
}

.wf-town {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 80px 84px;
  align-items: center;
  gap: 12px;
  animation: pc-tag-in 0.45s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

.wf-town-name strong {
  display: block;
  color: #f1efff;
  font-size: 13px;
}

.wf-town-name small {
  color: #8e88b8;
  font-size: 11px;
}

.wf-town-bar {
  height: 10px;
  background: rgba(155, 140, 255, 0.08);
  border-radius: 999px;
}

.wf-town-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(155, 140, 255, 0.5), var(--wf));
  border-radius: 999px;
}

.wf-town-pop,
.wf-town-distance {
  color: #e7e4ff;
  font: 700 12px/1 var(--wf-mono);
  text-align: right;
  white-space: nowrap;
}

.wf-town-distance {
  color: var(--wf);
}

.wf-facts {
  margin: 8px 0 0;
  color: #b9b4dc;
  font-size: 12.5px;
}

@keyframes wf-ring-in {
  from { opacity: 0; transform: scale(0.6); }
}

@media (max-width: 1000px) {
  .wf-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .wf-panel,
  .wf-towns {
    padding: 14px;
  }

  .wf-row {
    grid-template-columns: 48px minmax(0, 1fr) 76px;
    gap: 8px;
    font-size: 12px;
  }

  .wf-row > :nth-child(2) {
    display: none;
  }

  .wf-town {
    grid-template-columns: minmax(0, 1fr) 70px 70px;
    gap: 8px;
  }

  .wf-town-bar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-ring,
  .wf-town,
  .wf-site-pulse {
    animation: none;
  }
}

/* ---------- 28b. Industrial neighbours ---------- */

.industry-results:empty {
  display: none;
}

.industry-results {
  --lu-mono: var(--k-mono, ui-monospace, Consolas, monospace);
}

.in-rings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.in-ring {
  display: grid;
  grid-template-columns: 52px 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.in-ring-label {
  color: var(--wf, #9b8cff);
  font: 700 12px/1 var(--wf-mono);
}

.in-ring-count {
  color: #ffffff;
  font: 800 18px/1 var(--wf-mono);
}

.in-bar {
  display: flex;
  gap: 2px;
  height: 26px;
  padding: 3px;
  overflow: hidden;
  background: rgba(155, 140, 255, 0.06);
  border: 1px solid rgba(155, 140, 255, 0.18);
  border-radius: 8px;
}

.in-bar > em {
  margin: auto;
  color: #8e88b8;
  font: 600 11px/1 var(--wf-mono);
  font-style: normal;
}

.in-seg {
  display: flex;
  flex-basis: 0;
  align-items: center;
  justify-content: center;
  min-width: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 60%), var(--seg);
  border-radius: 4px;
  transform-origin: left;
  animation: gmd-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.in-seg em {
  color: #10131a;
  font: 800 10.5px/1 var(--wf-mono);
  font-style: normal;
}

.in-legend {
  padding-left: 0;
}

.in-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.in-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(155, 140, 255, 0.14);
  border-left: 3px solid var(--seg);
  border-radius: 10px;
  animation: pc-tag-in 0.45s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.in-item > div {
  min-width: 0;
}

.in-item strong {
  display: block;
  overflow: hidden;
  color: #f1efff;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.in-item small {
  display: block;
  color: #8e88b8;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.in-distance {
  flex-shrink: 0;
  color: var(--wf, #9b8cff);
  font: 700 12px/1 var(--wf-mono);
}

@media (max-width: 700px) {
  .in-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ---------- 28c. Business & commercial areas — amber "trading floor" look ---------- */

.assessment-business {
  --bz: #ffb547;
  --bz-soft: rgba(255, 181, 71, 0.12);
  --bz-line: rgba(255, 181, 71, 0.22);
  --bz-mono: var(--k-mono, ui-monospace, Consolas, monospace);
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(255, 181, 71, 0.09), transparent 55%),
    radial-gradient(60% 80% at 100% 100%, rgba(79, 195, 247, 0.06), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 181, 71, 0.025) 0 1px, transparent 1px 14px),
    var(--ts-panel);
  border-color: rgba(255, 181, 71, 0.22);
}

.assessment-business::before {
  background: linear-gradient(90deg, transparent, #ffb547, #4fc3f7, transparent);
}

.assessment-business .assessment-section-heading .eyebrow {
  color: var(--bz);
}

.business-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.bz-card-tag {
  display: block;
  color: var(--bz);
  font: 800 10px/1.2 var(--bz-mono);
  letter-spacing: 1.8px;
}

.bz-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 14px;
}

/* Radar */

.bz-radar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: radial-gradient(circle at 50% 52%, rgba(255, 181, 71, 0.08), rgba(8, 10, 14, 0.96) 70%);
  border: 1px solid var(--bz-line);
  border-radius: 18px;
}

.bz-radar .bz-card-tag {
  align-self: flex-start;
}

.bz-radar-scope {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
}

.bz-radar-svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bz-radar-sweep {
  position: absolute;
  inset: 8.75%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 181, 71, 0.28), rgba(255, 181, 71, 0) 60deg, transparent 360deg);
  animation: bz-sweep 5s linear infinite;
  pointer-events: none;
}

@keyframes bz-sweep {
  to { transform: rotate(360deg); }
}

.bz-radar-ring {
  fill: none;
  stroke: rgba(255, 181, 71, 0.28);
  stroke-dasharray: 3 4;
}

.bz-radar-axis {
  stroke: rgba(255, 181, 71, 0.14);
}

.bz-radar-label {
  fill: #c9a670;
  font: 700 9px var(--bz-mono);
}

.bz-radar-compass {
  fill: #8a7a62;
  font: 800 10px var(--bz-mono);
  text-anchor: middle;
}

.bz-radar-dot {
  fill-opacity: 0.78;
  stroke: rgba(8, 10, 14, 0.9);
  stroke-width: 1;
  cursor: help;
  transform-box: fill-box;
  transform-origin: center;
  animation: bz-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

.bz-radar-dot:hover {
  fill-opacity: 1;
  stroke: #ffffff;
}

@keyframes bz-pop {
  from { transform: scale(0); opacity: 0; }
}

.bz-radar-site {
  fill: #ffffff;
  stroke: var(--bz);
  stroke-width: 2;
}

.bz-radar-site-pulse {
  fill: none;
  stroke: var(--bz);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: bz-pulse 2s ease-out infinite;
}

@keyframes bz-pulse {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}

.bz-radar-caption {
  color: #a8987c;
  font: 600 10.5px/1.3 var(--bz-mono);
  text-align: center;
}

/* Main column */

.bz-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.bz-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.bz-badge.is-inside {
  background: linear-gradient(90deg, rgba(94, 234, 160, 0.14), rgba(94, 234, 160, 0.02));
  border-color: rgba(94, 234, 160, 0.4);
}

.bz-badge-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  background: #8a7a62;
  border-radius: 50%;
}

.bz-badge.is-inside .bz-badge-dot {
  background: #5eeaa0;
  box-shadow: 0 0 0 4px rgba(94, 234, 160, 0.18), 0 0 12px rgba(94, 234, 160, 0.6);
}

.bz-badge strong {
  display: block;
  color: #fff7ea;
  font-size: 13px;
}

.bz-badge small {
  display: block;
  color: #a8987c;
  font-size: 11.5px;
}

.bz-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.bz-kpi strong {
  display: block;
  background: linear-gradient(90deg, #ffd38a, #ffb547 55%, #ff8a5c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 800 40px/1 var(--bz-mono);
  letter-spacing: -1px;
}

.bz-kpi span {
  display: block;
  margin-top: 4px;
  color: #cbbd9f;
  font-size: 12.5px;
}

.bz-toggle {
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px;
  background: rgba(255, 181, 71, 0.06);
  border: 1px solid var(--bz-line);
  border-radius: 999px;
}

.bz-toggle button {
  padding: 6px 14px;
  color: #cbbd9f;
  font: 700 11.5px/1 var(--bz-mono);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.bz-toggle button.is-active {
  color: #1a1206;
  background: var(--bz);
  box-shadow: 0 0 14px rgba(255, 181, 71, 0.45);
}

.bz-mosaic {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: rgba(8, 10, 14, 0.7);
  border: 1px solid var(--bz-line);
  border-radius: 14px;
}

.bz-mosaic-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #a8987c;
  font: 600 12px var(--bz-mono);
  font-style: normal;
}

.bz-tile {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px 10px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    var(--seg);
  box-shadow: inset 0 0 0 2px rgba(8, 10, 14, 0.85);
  border-radius: 6px;
  animation: bz-tile-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes bz-tile-in {
  from { opacity: 0; transform: scale(0.85); }
}

.bz-tile b {
  color: #0d0f14;
  font: 800 20px/1 var(--bz-mono);
}

.bz-tile span {
  overflow: hidden;
  color: #0d0f14;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bz-tile small {
  overflow: hidden;
  color: rgba(13, 15, 20, 0.72);
  font: 700 10px/1.2 var(--bz-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bz-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #ffe2a6;
  font-size: 12.5px;
  background: repeating-linear-gradient(135deg, rgba(255, 209, 102, 0.1) 0 8px, rgba(255, 209, 102, 0.03) 8px 16px);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 10px;
}

.bz-highlight-icon {
  font-size: 16px;
}

/* Metro line of nearest areas */

.bz-line {
  padding: 14px 16px 6px;
  background: rgba(8, 10, 14, 0.6);
  border: 1px solid var(--bz-line);
  border-radius: 16px;
}

.bz-track {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(130px, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0 0 10px;
  overflow-x: auto;
  list-style: none;
}

.bz-track::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--bz), rgba(255, 181, 71, 0.1));
}

.bz-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 22px;
  min-width: 0;
  animation: pc-tag-in 0.45s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.bz-stop-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--seg);
  border: 3px solid #0b0d12;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--seg), 0 0 12px var(--seg);
}

.bz-stop-distance {
  color: #fff7ea;
  font: 800 16px/1 var(--bz-mono);
}

.bz-stop-name {
  color: var(--seg);
  font-size: 12px;
  font-weight: 800;
}

.bz-stop small {
  color: #a8987c;
  font-size: 11px;
  line-height: 1.35;
}

/* Retail */

.bz-retail {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background:
    linear-gradient(90deg, rgba(79, 195, 247, 0.12), rgba(79, 195, 247, 0.02) 60%),
    rgba(8, 10, 14, 0.7);
  border: 1px solid rgba(79, 195, 247, 0.28);
  border-radius: 16px;
}

.bz-retail .bz-card-tag {
  color: #4fc3f7;
}

.bz-retail-kpi strong {
  display: block;
  margin-top: 6px;
  color: #e6f7ff;
  font: 800 30px/1 var(--bz-mono);
}

.bz-retail-kpi > span:last-child {
  color: #9cc7d6;
  font-size: 12px;
}

.bz-retail-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bz-retail-list em {
  color: #9cc7d6;
  font-size: 12px;
}

.bz-retail-chip {
  padding: 9px 12px;
  background: rgba(79, 195, 247, 0.06);
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 12px 12px 12px 2px;
}

.bz-retail-chip strong {
  display: block;
  overflow: hidden;
  color: #e6f7ff;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bz-retail-chip span {
  color: #9cc7d6;
  font-size: 11px;
}

@media (max-width: 900px) {
  .bz-grid,
  .bz-retail {
    grid-template-columns: minmax(0, 1fr);
  }

  .bz-retail-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .bz-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .bz-kpi strong {
    font-size: 32px;
  }

  .bz-mosaic {
    height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bz-radar-sweep,
  .bz-radar-site-pulse {
    animation: none;
  }
}

/* ---------- 28d. Companies by sector — emerald "periodic table" look ---------- */

.assessment-companies {
  --co: #34d399;
  --co-lime: #a3e635;
  --co-line: rgba(52, 211, 153, 0.22);
  --co-mono: var(--k-mono, ui-monospace, Consolas, monospace);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(163, 230, 53, 0.08), transparent 60%),
    radial-gradient(1px 1px at 12px 12px, rgba(52, 211, 153, 0.22) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--ts-panel);
  border-color: rgba(52, 211, 153, 0.24);
}

.assessment-companies::before {
  background: linear-gradient(90deg, transparent, #34d399, #a3e635, transparent);
}

.assessment-companies .assessment-section-heading .eyebrow {
  color: var(--co);
}

.companies-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.co-tag {
  display: block;
  color: var(--co);
  font: 800 10px/1.2 var(--co-mono);
  letter-spacing: 1.8px;
}

/* Ticker */

.co-ticker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--co-line);
  border-radius: 14px;
}

.co-ticker-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  color: inherit;
  text-align: left;
  background: rgba(6, 14, 12, 0.85);
  border: 0;
  border-right: 1px solid var(--co-line);
  cursor: pointer;
  transition: background 0.2s;
}

.co-ticker-cell:last-child {
  border-right: 0;
}

.co-ticker-cell:hover {
  background: rgba(52, 211, 153, 0.08);
}

.co-ticker-cell.is-active {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.2), rgba(52, 211, 153, 0.04));
  box-shadow: inset 0 -3px 0 var(--co);
}

.co-ticker-radius {
  color: var(--co);
  font: 800 10px/1 var(--co-mono);
  letter-spacing: 1.6px;
}

.co-ticker-cell strong {
  color: #ecfdf5;
  font: 800 26px/1 var(--co-mono);
}

.co-ticker-cell small {
  color: #8fb8a8;
  font-size: 11.5px;
}

/* Periodic table */

.co-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}

.co-element {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 112px;
  padding: 8px 10px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  background:
    linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--seg) calc(var(--fill) * 30%), transparent)),
    rgba(6, 14, 12, 0.9);
  border: 1px solid color-mix(in srgb, var(--seg) calc(var(--fill) * 70%), transparent);
  border-radius: 8px;
  cursor: pointer;
  animation: bz-tile-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 30ms);
  transition: transform 0.15s, box-shadow 0.15s;
}

.co-element:hover {
  transform: translateY(-2px);
}

.co-element.is-active {
  background: linear-gradient(160deg, color-mix(in srgb, var(--seg) 40%, transparent), rgba(6, 14, 12, 0.92) 75%);
  border-color: var(--seg);
  box-shadow: 0 0 0 1px var(--seg), 0 0 22px color-mix(in srgb, var(--seg) 45%, transparent);
}

.co-element.is-empty {
  opacity: 0.45;
}

.co-element-no {
  color: #6f9c8b;
  font: 700 9.5px/1 var(--co-mono);
}

.co-element-symbol {
  margin-top: 4px;
  color: var(--seg);
  font: 800 28px/1 var(--co-mono);
  letter-spacing: -1px;
}

.co-element-name {
  margin-top: 2px;
  overflow: hidden;
  color: #cfe9df;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-element-count {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #ecfdf5;
  font: 800 13px/1 var(--co-mono);
}

.co-element-staff {
  margin-top: auto;
  color: #8fb8a8;
  font: 600 10px/1.2 var(--co-mono);
}

/* Directory */

.co-directory {
  padding: 14px 16px;
  background: rgba(6, 14, 12, 0.88);
  border: 1px solid color-mix(in srgb, var(--seg) 45%, transparent);
  border-left: 4px solid var(--seg);
  border-radius: 14px;
}

.co-directory-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.co-directory-symbol {
  display: grid;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #0b1210;
  font: 800 18px/1 var(--co-mono);
  background: var(--seg);
  border-radius: 8px;
}

.co-directory-head strong {
  display: block;
  color: #ecfdf5;
  font-size: 15px;
}

.co-directory-head small {
  color: #8fb8a8;
  font-size: 11.5px;
}

.co-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.co-type {
  padding: 10px 12px;
  background: repeating-linear-gradient(135deg, rgba(255, 209, 102, 0.08) 0 8px, rgba(255, 209, 102, 0.02) 8px 16px);
  border: 1px solid rgba(255, 209, 102, 0.3);
  border-radius: 10px;
}

.co-type strong {
  display: block;
  color: #ffe2a6;
  font: 800 22px/1 var(--co-mono);
}

.co-type span {
  display: block;
  margin-top: 4px;
  color: #f1e6cf;
  font-size: 12px;
  font-weight: 700;
}

.co-type small {
  color: #b9a985;
  font-size: 11px;
}

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

.co-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 112px 92px 64px;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(52, 211, 153, 0.12);
  animation: pc-tag-in 0.4s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}

.co-row:last-child {
  border-bottom: 0;
}

.co-row-rank {
  color: var(--seg);
  font: 800 13px/1 var(--co-mono);
}

.co-row-name {
  min-width: 0;
}

.co-row-name strong {
  display: block;
  overflow: hidden;
  color: #ecfdf5;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-row-name small {
  display: block;
  overflow: hidden;
  color: #8fb8a8;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-meter {
  display: flex;
  gap: 2px;
}

.co-meter i {
  flex: 1;
  height: 12px;
  background: rgba(52, 211, 153, 0.1);
  border-radius: 2px;
}

.co-meter i.is-on {
  background: var(--seg);
  box-shadow: 0 0 6px color-mix(in srgb, var(--seg) 60%, transparent);
}

.co-row-size {
  color: #cfe9df;
  font: 700 11px/1 var(--co-mono);
  text-align: right;
}

.co-row-distance {
  color: var(--co-lime);
  font: 800 12px/1 var(--co-mono);
  text-align: right;
}

.co-row-empty {
  padding: 10px 6px;
  color: #8fb8a8;
  font-size: 12px;
}

/* Podium */

.co-podium {
  padding: 14px 16px;
  background: rgba(6, 14, 12, 0.88);
  border: 1px solid var(--co-line);
  border-radius: 14px;
}

.co-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  margin-top: 12px;
}

.co-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.03));
  border: 1px solid var(--co-line);
  border-radius: 12px 12px 4px 4px;
  animation: co-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.co-step.is-1 {
  min-height: 132px;
  background: linear-gradient(180deg, rgba(163, 230, 53, 0.3), rgba(163, 230, 53, 0.04));
  border-color: rgba(163, 230, 53, 0.5);
}

.co-step.is-2 {
  min-height: 108px;
  animation-delay: 0.1s;
}

.co-step.is-3 {
  min-height: 90px;
  animation-delay: 0.2s;
}

@keyframes co-rise {
  from { opacity: 0; transform: translateY(20px); }
}

.co-step-rank {
  color: var(--co-lime);
  font: 800 24px/1 var(--co-mono);
}

.co-step strong {
  overflow: hidden;
  color: #ecfdf5;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-step small {
  color: #8fb8a8;
  font-size: 11px;
}

.co-rest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.co-rest-chip {
  padding: 6px 10px;
  color: #cfe9df;
  font-size: 12px;
  background: rgba(52, 211, 153, 0.05);
  border: 1px solid var(--co-line);
  border-radius: 999px;
}

.co-rest-chip b {
  color: var(--co);
  font-family: var(--co-mono);
}

.co-rest-chip small {
  color: #8fb8a8;
  font-size: 10.5px;
}

@media (max-width: 700px) {
  .co-ticker,
  .co-types {
    grid-template-columns: minmax(0, 1fr);
  }

  .co-ticker-cell {
    border-right: 0;
    border-bottom: 1px solid var(--co-line);
  }

  .co-table {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .co-element {
    min-height: 96px;
    padding: 6px 7px;
  }

  .co-element-symbol {
    font-size: 22px;
  }

  .co-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    row-gap: 6px;
    column-gap: 10px;
  }

  .co-row-rank {
    grid-row: 1 / span 2;
  }

  .co-row-name {
    grid-column: 2;
    grid-row: 1;
  }

  .co-row-distance {
    grid-column: 3;
    grid-row: 1;
  }

  .co-meter {
    grid-column: 2;
    grid-row: 2;
  }

  .co-row-size {
    grid-column: 3;
    grid-row: 2;
    white-space: nowrap;
  }

  .co-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .co-step.is-1,
  .co-step.is-2,
  .co-step.is-3 {
    min-height: 0;
  }
}

/* ---------- 28e. Detailed plans — blueprint drawing look ---------- */

.assessment-plans {
  --pl: #7dd3fc;
  --pl-ink: #e0f2fe;
  --pl-line: rgba(125, 211, 252, 0.26);
  --pl-mono: var(--k-mono, ui-monospace, Consolas, monospace);
  background:
    linear-gradient(rgba(125, 211, 252, 0.06) 1px, transparent 1px) 0 0 / 100% 20px,
    linear-gradient(90deg, rgba(125, 211, 252, 0.06) 1px, transparent 1px) 0 0 / 20px 100%,
    linear-gradient(rgba(125, 211, 252, 0.1) 1px, transparent 1px) 0 0 / 100% 100px,
    linear-gradient(90deg, rgba(125, 211, 252, 0.1) 1px, transparent 1px) 0 0 / 100px 100%,
    linear-gradient(160deg, #0b2547, #071a33 70%);
  border-color: rgba(125, 211, 252, 0.35);
}

.assessment-plans::before {
  background: linear-gradient(90deg, transparent, #7dd3fc, #ffffff, transparent);
}

.assessment-plans .assessment-section-heading .eyebrow {
  color: var(--pl);
}

.plans-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.pl-tag {
  display: block;
  color: var(--pl);
  font: 800 10px/1.2 var(--pl-mono);
  letter-spacing: 1.8px;
}

.pl-tag-gap {
  margin-top: 16px;
}

/* Stamp */

.pl-head {
  --stamp: #7dd3fc;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: rgba(7, 26, 51, 0.8);
  border: 1px solid var(--pl-line);
  border-radius: 4px;
}

.pl-head.is-in_force { --stamp: #5eeaa0; }
.pl-head.is-in_progress { --stamp: #fcd34d; }
.pl-head.is-nearby_only,
.pl-head.is-none_found { --stamp: #94a3b8; }

.pl-stamp {
  flex-shrink: 0;
  padding: 8px 14px;
  color: var(--stamp);
  font: 900 15px/1.1 var(--pl-mono);
  letter-spacing: 2px;
  text-align: center;
  border: 3px double var(--stamp);
  border-radius: 6px;
  transform: rotate(-4deg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--stamp) 25%, transparent);
  animation: pl-stamp 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}

@keyframes pl-stamp {
  from { opacity: 0; transform: rotate(-12deg) scale(1.6); }
}

.pl-head-text strong {
  display: block;
  color: #ffffff;
  font-size: 15px;
}

.pl-head-text small {
  display: block;
  margin-top: 3px;
  color: #a5c8e4;
  font-size: 12px;
}

/* Drawing + sheet */

.pl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
}

.pl-drawing,
.pl-sheet {
  padding: 14px;
  background: rgba(7, 26, 51, 0.75);
  border: 1px solid var(--pl-line);
  border-radius: 4px;
}

.pl-drawing-svg {
  display: block;
  width: 100%;
  max-height: 340px;
  margin-top: 10px;
}

.pl-use {
  fill: var(--use);
  fill-opacity: 0.22;
  stroke: var(--use);
  stroke-opacity: 0.7;
}

.pl-use.is-in_progress {
  fill-opacity: 0.1;
}

.pl-boundary {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: 0.9;
}

.pl-boundary.is-in_progress {
  stroke: #fcd34d;
}

.pl-boundary.is-ended {
  stroke: #94a3b8;
}

.pl-site {
  fill: rgba(255, 133, 27, 0.25);
  stroke: #ff851b;
  animation: pl-draw 1.2s ease-out backwards;
}

@keyframes pl-draw {
  from { stroke-opacity: 0; fill-opacity: 0; }
}

.pl-scale line {
  stroke: var(--pl-ink);
}

.pl-scale text {
  fill: var(--pl-ink);
  font-family: var(--pl-mono);
  dominant-baseline: middle;
}

.pl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  color: #a5c8e4;
  font: 600 11px var(--pl-mono);
}

.pl-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pl-legend i {
  display: inline-block;
  width: 16px;
  height: 10px;
}

.pl-legend .is-site i { background: rgba(255, 133, 27, 0.4); border: 2px solid #ff851b; }
.pl-legend .is-boundary i { border: 2px dashed #ffffff; }
.pl-legend .is-progress i { border: 2px dashed #fcd34d; }
.pl-legend .is-use i { background: rgba(125, 211, 252, 0.3); border: 1px solid #7dd3fc; }

.pl-usebar {
  display: flex;
  height: 30px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--pl-line);
  border-radius: 3px;
}

.pl-usebar span {
  display: grid;
  min-width: 4px;
  place-items: center;
  color: #071a33;
  font: 900 12px var(--pl-mono);
  background: repeating-linear-gradient(45deg, var(--use) 0 6px, color-mix(in srgb, var(--use) 75%, #ffffff) 6px 12px);
  border-right: 2px solid #071a33;
  transform-origin: left;
  animation: gmd-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.pl-uses,
.pl-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.pl-uses li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.pl-code {
  padding: 5px 0;
  color: #071a33;
  font: 900 13px/1 var(--pl-mono);
  text-align: center;
  background: var(--use);
  border-radius: 2px;
}

.pl-uses strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.pl-uses small {
  color: #a5c8e4;
  font-size: 11px;
}

.pl-share {
  color: var(--pl-ink);
  font: 800 13px var(--pl-mono);
}

.pl-rules li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  color: #dbeafe;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--pl-line);
}

.pl-rule-kind {
  align-self: start;
  padding: 3px 0;
  color: var(--pl);
  font: 800 9.5px var(--pl-mono);
  text-align: center;
  border: 1px solid var(--pl-line);
}

.pl-rules li.is-admin .pl-rule-kind {
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.4);
}

.pl-empty,
.pl-more {
  display: block;
  margin: 8px 0 0;
  color: #a5c8e4;
  font-size: 12px;
}

/* Title blocks */

.pl-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.pl-block {
  --status: #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(7, 26, 51, 0.85);
  border: 1px solid var(--pl-line);
  border-top: 3px solid var(--status);
  border-radius: 2px;
  animation: pc-tag-in 0.45s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.pl-block.is-in_force { --status: #5eeaa0; }
.pl-block.is-in_progress { --status: #fcd34d; }

.pl-block-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.pl-block-id {
  color: #ffffff;
  font: 800 13px var(--pl-mono);
}

.pl-block-status {
  color: var(--status);
  font: 700 11px var(--pl-mono);
  text-align: right;
}

.pl-block-name {
  color: var(--pl-ink);
  font-size: 13px;
  line-height: 1.35;
}

.pl-block-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--pl-line);
}

.pl-block-facts div {
  padding: 6px 8px;
  border-right: 1px solid var(--pl-line);
}

.pl-block-facts div:last-child {
  border-right: 0;
}

.pl-block-facts dt {
  color: var(--pl);
  font: 700 9px var(--pl-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pl-block-facts dd {
  margin: 2px 0 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pl-doc {
  padding: 5px 10px;
  color: #071a33;
  font: 700 11.5px var(--pl-mono);
  text-decoration: none;
  background: var(--pl);
  border-radius: 2px;
}

.pl-doc::before {
  content: "↗ ";
}

.pl-doc:hover {
  background: #ffffff;
}

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

@media (max-width: 520px) {
  .pl-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .pl-blocks {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pl-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  color: #fde68a;
  font-size: 12.5px;
  background: repeating-linear-gradient(135deg, rgba(252, 211, 77, 0.1) 0 8px, rgba(252, 211, 77, 0.03) 8px 16px);
  border: 1px solid rgba(252, 211, 77, 0.4);
  border-radius: 4px;
}

.pl-notice b {
  flex-shrink: 0;
  padding: 3px 8px;
  color: #071a33;
  font: 900 11px var(--pl-mono);
  background: #fcd34d;
  border-radius: 2px;
}

.pl-usebar span.is-uncovered {
  color: #cbd5e1;
  background: repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.25) 0 6px, rgba(148, 163, 184, 0.08) 6px 12px);
}

.pl-uses li.is-uncovered .pl-code {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.35);
}

.pl-block-flag {
  align-self: flex-start;
  padding: 3px 8px;
  color: #fde68a;
  font: 700 10.5px var(--pl-mono);
  border: 1px dashed rgba(252, 211, 77, 0.5);
  border-radius: 2px;
}

/* ==========================================================
   29. SMOOTH SCROLLING ON ORDINARY PCs
   Off-screen sections are not drawn until they come near the
   view; continuous animations pause while the page scrolls;
   the sticky section bar uses a solid background, not a live blur.
========================================================== */

.assessment-results > section,
.assessment-results > .assessment-transport,
.assessment-results > .geology-intelligence-panel,
.assessment-results > .geotechnical-intelligence-panel {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.assessment-quicknav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(7, 12, 16, 0.97);
}

.assessment-workspace.is-scrolling *,
.assessment-workspace.is-scrolling *::before,
.assessment-workspace.is-scrolling *::after {
  animation-play-state: paused !important;
}

.pl-wider {
  margin: 8px 0 0;
  color: #dbeafe;
  font: 600 11.5px/1.5 var(--pl-mono);
}

.pl-wider b {
  color: var(--pl);
}

.pl-block-source {
  align-self: flex-start;
  padding: 3px 8px;
  color: #bbf7d0;
  font: 700 10.5px var(--pl-mono);
  border: 1px solid rgba(134, 239, 172, 0.45);
  border-radius: 2px;
}

.pl-attribution {
  margin: 0;
  color: #a5c8e4;
  font: 600 11px/1.5 var(--pl-mono);
}

.pl-code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================
   30. DESIGN PASS — consistent, compact older sections
   Data sources and environmental results as card grids
   (like the newer sections) on wider screens.
========================================================== */

@media (min-width: 701px) {
  #assessment-source-list,
  #assessment-findings-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
  }

  #assessment-source-list .assessment-source-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 104px;
  }

  #assessment-source-list .assessment-source-row:hover {
    transform: translateY(-2px);
  }

  #assessment-findings-list .assessment-finding {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 118px;
    padding: 14px 16px;
  }

  #assessment-findings-list .assessment-finding span.assessment-finding-status {
    text-align: left;
  }
}

/* ==========================================================
   31. SIGN-IN, USER MENU, USER ADMINISTRATION
========================================================== */

.ts-login {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(44, 232, 198, 0.12), transparent 70%),
    linear-gradient(rgba(44, 232, 198, 0.04) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(44, 232, 198, 0.04) 1px, transparent 1px) 0 0 / 32px 100%,
    #05090c;
}

.ts-login[hidden] {
  display: none;
}

body.ts-signed-out {
  overflow: hidden;
}

.ts-login-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(400px, 100%);
  padding: 28px;
  background: rgba(8, 16, 20, 0.92);
  border: 1px solid rgba(44, 232, 198, 0.28);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  animation: pc-tag-in 0.5s ease-out backwards;
}

.ts-login-logo {
  width: 46px;
  height: 46px;
  color: #2ce8c6;
}

.ts-login-eyebrow {
  color: #2ce8c6;
  font: 800 10px/1 var(--k-mono, ui-monospace, Consolas, monospace);
  letter-spacing: 2px;
}

.ts-login-card h2 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 22px;
}

.ts-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #9fb8be;
  font-size: 12px;
  font-weight: 600;
}

.ts-field input,
.ts-user-add input,
.ts-user-add select {
  padding: 11px 12px;
  color: #ffffff;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(66, 198, 188, 0.25);
  border-radius: 10px;
  outline: none;
}

.ts-field input:focus,
.ts-user-add input:focus,
.ts-user-add select:focus {
  border-color: #2ce8c6;
  box-shadow: 0 0 0 3px rgba(44, 232, 198, 0.18);
}

.ts-user-add select option {
  color: #ffffff;
  background: #0b1418;
}

.ts-login-message {
  min-height: 18px;
  margin: 0;
  color: #ff8a8a;
  font-size: 12.5px;
}

.ts-login-submit {
  padding: 12px 16px;
  color: #04110e;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(90deg, #2ce8c6, #5eeaa0);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.ts-login-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ts-login-note {
  margin: 4px 0 0;
  color: #7f979c;
  font-size: 11.5px;
  line-height: 1.5;
}

/* User menu */

.ts-user {
  position: relative;
}

.ts-user-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  color: #e6f4f1;
  font-size: 12px;
  font-weight: 700;
  background: rgba(44, 232, 198, 0.06);
  border: 1px solid rgba(44, 232, 198, 0.25);
  border-radius: 999px;
  cursor: pointer;
}

.ts-user-avatar {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #04110e;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(135deg, #2ce8c6, #ff9d3c);
  border-radius: 50%;
}

.ts-user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  min-width: 230px;
  padding: 6px;
  background: #0b1418;
  border: 1px solid rgba(44, 232, 198, 0.25);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.ts-user-menu[hidden] {
  display: none;
}

.ts-user-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ts-user-who strong {
  color: #ffffff;
  font-size: 13px;
}

.ts-user-who small {
  color: #8fa9ae;
  font-size: 11.5px;
}

.ts-user-role {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  color: #8fe8d8;
  font: 700 10px var(--k-mono, monospace);
  border: 1px solid rgba(44, 232, 198, 0.3);
  border-radius: 999px;
}

.ts-user-role.is-admin {
  color: #ffc98a;
  border-color: rgba(255, 157, 60, 0.45);
}

.ts-user-item {
  padding: 9px 10px;
  color: #dcebe8;
  font-size: 13px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.ts-user-item:hover {
  background: rgba(44, 232, 198, 0.1);
}

/* Dialogs */

.ts-auth-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 22px;
  color: #dcebe8;
  background: #0b1418;
  border: 1px solid rgba(44, 232, 198, 0.3);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.ts-auth-dialog.is-wide {
  width: min(760px, calc(100vw - 32px));
}

.ts-auth-dialog::backdrop {
  background: rgba(2, 6, 8, 0.75);
}

.ts-auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ts-auth-head h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
}

.ts-auth-close {
  color: #9fb8be;
  font-size: 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ts-auth-text {
  margin: 0 0 12px;
  color: #9fb8be;
  font-size: 13px;
  line-height: 1.5;
}

.ts-auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ts-user-add {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 140px auto;
  gap: 8px;
}

.ts-secret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: rgba(255, 157, 60, 0.08);
  border: 1px solid rgba(255, 157, 60, 0.45);
  border-radius: 12px;
}

.ts-secret strong {
  grid-column: 1 / -1;
  color: #ffc98a;
  font-size: 12.5px;
}

.ts-secret code {
  overflow-wrap: anywhere;
  color: #ffffff;
  font: 800 16px var(--k-mono, monospace);
  letter-spacing: 0.5px;
}

.ts-secret-copy {
  padding: 6px 12px;
  color: #04110e;
  font-weight: 800;
  background: #ffc98a;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.ts-secret small {
  grid-column: 1 / -1;
  color: #c8b08e;
  font-size: 11.5px;
}

.ts-user-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}

.ts-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(66, 198, 188, 0.15);
  border-radius: 10px;
}

.ts-user-row.is-disabled {
  opacity: 0.55;
}

.ts-user-row strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.ts-user-row small {
  color: #8fa9ae;
  font-size: 11.5px;
}

.ts-user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.ts-user-action {
  padding: 6px 10px;
  color: #dcebe8;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(44, 232, 198, 0.06);
  border: 1px solid rgba(44, 232, 198, 0.25);
  border-radius: 8px;
  cursor: pointer;
}

.ts-user-action:hover {
  border-color: #2ce8c6;
}

.ts-user-you {
  color: #8fe8d8;
  font: 700 11px var(--k-mono, monospace);
}

@media (max-width: 640px) {
  .ts-user-add {
    grid-template-columns: minmax(0, 1fr);
  }

  .ts-user-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ts-user-name {
    display: none;
  }
}

/* Phones: the header's right side is hidden, except the user button (sign out must stay reachable) */
@media (max-width: 768px) {
  .header-right:has(.ts-user) {
    display: flex !important;
    margin-left: auto;
  }

  .header-right:has(.ts-user) > :not(.ts-user) {
    display: none !important;
  }
}

/* ---------- 31b. Organisations and teams (Phase 2) ---------- */

.ts-login-message.is-info {
  color: #8fe8d8;
}

.ts-user-org {
  color: #ffc98a !important;
  font-weight: 700;
}

.ts-auth-tag {
  display: block;
  margin: 14px 0 8px;
  color: #2ce8c6;
  font: 800 10px/1 var(--k-mono, ui-monospace, Consolas, monospace);
  letter-spacing: 1.8px;
}

.ts-org-panel {
  padding: 12px;
  background: rgba(255, 157, 60, 0.04);
  border: 1px solid rgba(255, 157, 60, 0.2);
  border-radius: 12px;
}

.ts-org-panel .ts-auth-tag {
  margin-top: 0;
  color: #ffc98a;
}

.ts-org-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.ts-org-add input,
.ts-user-move {
  padding: 9px 11px;
  color: #ffffff;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(66, 198, 188, 0.25);
  border-radius: 9px;
}

.ts-user-move option {
  color: #ffffff;
  background: #0b1418;
}

.ts-org-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ts-org-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 157, 60, 0.3);
  border-radius: 999px;
}

.ts-org-chip.is-disabled {
  opacity: 0.55;
}

.ts-org-chip strong {
  color: #ffffff;
  font-size: 12.5px;
}

.ts-org-chip small {
  color: #c8b08e;
  font-size: 11px;
}

.ts-user-add {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ts-user-add.is-team {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 140px auto;
}

.pj-space {
  margin: 0 0 10px;
  padding: 8px 12px;
  color: #9fb8be;
  font-size: 12px;
  border: 1px dashed rgba(66, 198, 188, 0.25);
  border-radius: 10px;
}

.pj-space.is-shared {
  color: #ffd9a8;
  border-color: rgba(255, 157, 60, 0.4);
}

@media (max-width: 900px) {
  .ts-user-add,
  .ts-user-add.is-team {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ts-user-add,
  .ts-user-add.is-team,
  .ts-org-add {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================
   32. LAYOUT PASS — use the width: split headings, wrapping
   section bar, sidebar shortcut, "getting started" panel
========================================================== */

/* Page headings: text on the left, actions on the right */
.assessment-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 28px;
  row-gap: 14px;
  margin-bottom: 20px;
}

.assessment-heading-split > .assessment-heading-text p {
  margin: 0;
  max-width: 820px;
}

.assessment-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.assessment-heading-actions .report-download-btn,
.assessment-heading-actions .compare-clear-btn {
  margin-top: 0;
}

.assessment-heading-split > .assessment-source-banner {
  grid-column: 1 / -1;
}

/* Section bar: wraps onto a second line instead of scrolling sideways */
@media (min-width: 761px) {
  .assessment-quicknav {
    flex-wrap: wrap;
    gap: 4px 6px;
    overflow: visible;
    padding: 8px;
    top: -28px;
  }

  .assessment-quicknav-item {
    padding: 8px 11px;
    font-size: 10.5px;
  }
}

/* Sidebar: shortcut from the selected site to its results */
.open-assessment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #ff9b35, #e66b17);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(255, 133, 27, 0.22);
  color: #14191c;
  font: 800 13px/1 Arial, sans-serif;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.open-assessment-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 133, 27, 0.32);
}

.open-assessment-btn:focus-visible {
  outline: 2px solid var(--ts-teal);
  outline-offset: 3px;
}

/* Site Assessment before a site is drawn */
.assessment-card.assessment-start {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2fr);
  gap: 32px;
  align-items: center;
  max-width: none;
  padding: 34px;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(44, 232, 198, 0.08), transparent 60%),
    linear-gradient(160deg, rgba(14, 30, 36, 0.95), rgba(8, 18, 22, 0.95));
  border: 1px solid var(--ts-line);
  border-radius: 18px;
}

.assessment-card.assessment-start[hidden] {
  display: none !important;
}

.assessment-start-intro h3 {
  margin: 12px 0 10px;
  font-size: 22px;
}

.assessment-start-intro p {
  margin: 0;
}

.assessment-go-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 18px;
  background: transparent;
  border: 1px solid rgba(255, 133, 27, 0.6);
  border-radius: 10px;
  color: #ffb06a;
  font: 700 13px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
}

.assessment-go-map-btn:hover {
  background: rgba(255, 133, 27, 0.12);
}

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

.assessment-start-steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: rgba(7, 14, 18, 0.7);
  border: 1px solid rgba(44, 232, 198, 0.14);
  border-top: 2px solid var(--ts-teal);
  border-radius: 12px;
}

.assessment-start-steps li:nth-child(2) {
  border-top-color: #38bdf8;
}

.assessment-start-steps li:nth-child(3) {
  border-top-color: var(--ts-orange);
}

.assessment-start-num {
  color: #6f8b92;
  font: 700 11px/1 var(--ts-mono);
  letter-spacing: 2px;
}

.assessment-start-steps strong {
  color: #f1f7f8;
  font-size: 15px;
}

.assessment-start-steps li > span:last-child {
  color: #9fb4ba;
  font-size: 13px;
  line-height: 1.6;
}

/* Compare: the empty card uses the full width */
#compare-results .cmp-empty {
  max-width: none;
}

@media (max-width: 1100px) {
  .assessment-card.assessment-start {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .assessment-heading-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .assessment-heading-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .assessment-start-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .assessment-card.assessment-start {
    padding: 22px 18px;
  }
}