/* ==========================================================================
   Sites & assets: hero, tree, maps, roster, choice cards, map picker
   ========================================================================== */

.min-w-0 { min-width: 0; }

/* -------------------------------- hero -------------------------------- */
.hero {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 8px 26px; align-items: center; padding: 22px; margin-bottom: 20px;
  background: var(--surface);
  position: relative; /* no overflow clipping: the status menu opens out of the hero */
}
.hero__cover {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; display: grid; place-items: center; position: relative;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3);
}
.hero__cover img, .hero__photo { width: 100%; height: 100%; object-fit: cover; }
.hero__placeholder { width: 56px; height: 56px; opacity: .75; stroke-width: 1.5; }
.hero__body { min-width: 0; display: grid; gap: 8px; position: relative; z-index: 1; }
.hero__eyebrow { display: flex; flex-wrap: wrap; gap: 6px; }
.hero__title { font-size: clamp(1.4rem, 2.2vw, 1.75rem); letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.hero__sub { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.hero__sub .icon { color: var(--text-3); }
.hero__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-self: start; position: relative; z-index: 2; }
.hero__notice {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px;
  background: var(--warning-soft); color: var(--warning-ink); position: relative; z-index: 1;
}
@container page (max-width: 1080px) { .hero { grid-template-columns: 200px minmax(0, 1fr); } .hero__actions { grid-column: 1 / -1; justify-content: flex-start; } }
@container page (max-width: 900px) { .hero { grid-template-columns: 160px minmax(0, 1fr); } }
@container page (max-width: 580px) { .hero { grid-template-columns: 1fr; } .hero__cover { aspect-ratio: 16 / 7; } }

.status-button { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 0; border: 0; background: transparent; color: var(--text-3); border-radius: 999px; }
.status-button:hover { color: var(--text); }
.status-button:hover .badge { box-shadow: 0 0 0 2px var(--brand-ring); }

.tab-panel { display: block; padding-top: 22px; }

/* -------------------------------- tree -------------------------------- */
.tree { padding: 10px; }
.tree__node { margin: 0; }
.tree__row {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: 12px; list-style: none; cursor: default;
}
summary.tree__row { cursor: pointer; }
summary.tree__row::-webkit-details-marker { display: none; }
.tree__row:hover { background: var(--surface-2); }
.tree__chevron { width: 18px; display: grid; place-items: center; color: var(--text-3); transition: transform .15s; flex: none; }
details[open] > summary .tree__chevron { transform: rotate(90deg); }
.tree__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; }
.tree__icon .icon { width: 16px; height: 16px; }
.tree__name { font-weight: 550; color: var(--text); }
.tree__name:hover { color: var(--text); text-decoration: underline; }
.tree__meta { color: var(--text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree__spacer { flex: 1; }
.tree__count { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.tree__children { margin-left: 22px; padding-left: 12px; border-left: 2px solid var(--line); }
@media (max-width: 720px) { .tree__meta { display: none; } }

/* --------------------------------- maps -------------------------------- */
.map { background: var(--surface-3); position: relative; z-index: 0; }
.map--large { height: calc(100vh - 290px); min-height: 460px; border-radius: var(--radius-lg); overflow: hidden; }
.map--side { height: 260px; }
.map--mini { height: 210px; }
.map--picker { height: 320px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); }
.map-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.map-layout__list { overflow: hidden; display: grid; max-height: calc(100vh - 290px); min-height: 460px; grid-template-rows: auto 1fr auto; }
.map-list { overflow-y: auto; padding: 6px; }
.map-list__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 12px; text-align: left; }
.map-list__item:hover { background: var(--surface-2); }
/* the name is cut with an ellipsis before the status badge (an inline span would run under it) */
.map-list__item .entity__name { display: block; }
.map-list__item > .badge { flex-shrink: 0; }
@container page (max-width: 760px) { .map-layout { grid-template-columns: 1fr; } .map-layout__list { max-height: 280px; min-height: 0; order: 2; } .map--large { height: 380px; min-height: 0; } }

.pin { background: none; border: 0; }
.pin__dot {
  display: block; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); box-sizing: border-box;
  background: var(--brand-strong); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(15, 23, 42, .35); transition: transform .15s;
}
.pin--danger .pin__dot { background: var(--state-danger); }
.pin:hover .pin__dot, .pin.is-active .pin__dot { transform: rotate(-45deg) scale(1.18); background: var(--brand-hover); }
/* the colour of the site (its cluster's or its own, Site#pin_color); a site in a "danger" status gets a red ring */
.pin--colored .pin__dot, .pin--colored:hover .pin__dot, .pin--colored.is-active .pin__dot { background: var(--pin-color); }
.pin--alert .pin__dot { border-color: var(--state-danger); }
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--shadow-3); padding: 2px; }
.leaflet-popup-content { margin: 10px 14px; }
.map-popup__title { font-weight: 600; color: var(--text); font-size: 14px; }
.map-popup__sub { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255, 255, 255, .8) !important; }
.leaflet-bar a { border-radius: 8px !important; }

.map-picker { display: grid; gap: 12px; }
.map-picker__bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map-picker__bar .input-icon { min-width: 220px; }

/* ------------------------------- roster / share ------------------------------ */
.share-form { padding: 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.share-form__row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.share-form__row .select { min-width: 130px; }
.share-form__submit { height: 42px; }
.roster { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.roster--flush { border: 0; border-radius: 0; }
.roster__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.roster__row:last-child { border-bottom: 0; }
.roster__name { font-weight: 550; }
.roster__sub { font-size: 12.5px; color: var(--text-3); }
.roster__level { margin: 0; }
.roster__level .select { width: auto; }
.roster__remove { margin: 0; display: contents; }

/* ------------------------------- choice cards -------------------------------- */
.choice-list { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); cursor: pointer; transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--line-strong); background: var(--surface-2); }
.choice:has(input:checked) { border-color: var(--text); background: var(--surface-2); box-shadow: 0 0 0 1px var(--text); }
.choice input { width: 18px; height: 18px; flex: none; }
.choice__body { display: grid; gap: 3px; }
.choice__hint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }

.check--chip { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; gap: 8px; align-items: center; }
.check--chip:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
.check--chip input { width: 16px; height: 16px; margin: 0; }

.site-form { gap: 18px; }

/* ------------------------------- asset cards ------------------------------- */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding: 18px; }
.asset-card {
  display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.asset-card:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); }
/* long names, classifications and places shrink with an ellipsis instead of spilling out of the card */
.asset-card, .asset-card > * { min-width: 0; }
.asset-card .tag { flex: none; white-space: nowrap; }
.asset-card__meta .truncate, .asset-card__loc .truncate { min-width: 0; flex: 1 1 auto; }
.asset-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.asset-card__thumb { width: 56px; height: 56px; border-radius: 15px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.asset-card__thumb .icon { width: 26px; height: 26px; }
.asset-card__photo { width: 100%; height: 100%; object-fit: cover; }
.asset-card__name { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; line-height: 1.25; }
.asset-card__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.asset-card__loc { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12.5px; min-width: 0; }
.asset-card__count { margin-left: auto; flex: none; }

/* ------------------------------- stacked lists ------------------------------ */
/* Below 640px the site list and the asset table are cards (.table--stack): the entity on its own line, the other
   cells as quiet lines (site: classification, place, then area and count; asset: category and installation, then the
   place), the state last. */
@container page (max-width: 640px) {
  .site-table td:not(:first-child), .asset-table td:not(:first-child) { font-size: 13px; color: var(--text-2); }
  .site-table td:first-child, .site-table td:nth-child(2), .site-table td:nth-child(3), .site-table__state { flex: 1 1 100%; }
  .asset-table td:first-child, .asset-table__site, .asset-table__state { flex: 1 1 100%; }
  .asset-table__site { order: 1; }
  .asset-table__state { order: 2; }
}

.leaflet-tile-pane { filter: saturate(.82) contrast(.97); }

/* --------------------------------- clusters (Phase 3) --------------------------------- */
/* Cluster cards come after the site cards, behind a horizontal divider, tinted with the cluster's colour. Clicking one
   filters the sites above; the small route button opens the cluster page (map and visit route). */
.cluster-divider { display: flex; align-items: center; gap: 12px; margin: 6px 18px 0; padding-top: 16px; border-top: 1px solid var(--line-strong); color: var(--text-2); font-size: 13.5px; font-weight: 550; }
.cluster-divider > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.cluster-divider .btn { margin-left: auto; }
.cluster-grid { padding-top: 12px; }
.cluster-card {
  --cluster-color: var(--brand);
  display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--cluster-color) 7%, var(--surface)); border-left: 4px solid var(--cluster-color); min-width: 0;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.cluster-card:hover { border-color: var(--line-strong); border-left-color: var(--cluster-color); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.cluster-card.is-active { background: color-mix(in srgb, var(--cluster-color) 16%, var(--surface)); box-shadow: 0 0 0 1px var(--cluster-color); }
.cluster-card__main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.cluster-card__main:hover { text-decoration: none; }
.cluster-card__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--cluster-color) 18%, var(--surface)); color: var(--cluster-color); }
.cluster-card__name { display: block; font-weight: 600; font-size: 14.5px; }
.cluster-card__meta { display: block; font-size: 12.5px; color: var(--text-3); }
.cluster-card__open { flex: none; }
.cluster-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cluster-color, var(--brand)); flex: none; }
.asset-card__cluster { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.tag--cluster { gap: 6px; border-color: color-mix(in srgb, var(--cluster-color) 40%, var(--line)); background: color-mix(in srgb, var(--cluster-color) 8%, var(--surface)); }

.hero--cluster .hero__cover--cluster { background: color-mix(in srgb, var(--cluster-color) 10%, var(--surface-2)); }
.cluster-mark { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--cluster-color) 18%, var(--surface)); color: var(--cluster-color); }
.cluster-mark .icon { width: 30px; height: 30px; }
.pin--custom .pin__dot { box-shadow: 0 4px 10px rgba(15, 23, 42, .35); }
.pin__index { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; pointer-events: none; transform: translateY(-2px); }
.pin { position: relative; }

/* visit route */
.route-list { list-style: none; margin: 0; padding: 0; display: grid; }
.route-stop { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.route-stop:last-child { border-bottom: 0; }
.route-stop__index { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--text-2); flex: none; }
.route-stop__name { font-weight: 550; display: block; }
.route-stop__meta { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-stop__km { text-align: right; font-size: 13px; display: grid; }
.route-stop__km small { font-size: 11.5px; }

/* colour choices of the cluster form */
.color-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.color-choice { position: relative; cursor: pointer; }
.color-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.color-choice__swatch { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--choice-color, var(--surface-3)); border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--surface); color: var(--text-2); transition: transform .15s; }
.color-choice:has(input:checked) .color-choice__swatch { border-color: var(--text); transform: scale(1.1); }
.color-choice--auto .color-choice__swatch { background: var(--surface-3); }
.color-choice--custom input[type="color"] { padding: 0; border: 0; }
.color-choice--custom:has(input:checked) .color-choice__swatch { color: #fff; }

/* enrichment of a site (descriptions proposed by the language model) */
.enrichment .prose { white-space: pre-line; }
.enrichment__status { align-items: center; }
.enrichment__status .spin { animation: spin .9s linear infinite; }
.enrichment__review { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface-2); }
.enrichment__proposal { align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.enrichment__proposal input { margin-top: 3px; }
.enrichment__proposal .review-flag { margin-left: 8px; }
.enrichment__text { display: block; margin-top: 4px; color: var(--text-2); font-size: 13.5px; }
.enrichment__sources summary { cursor: pointer; }