/* ── MAP SMOKE CENTROIDS ── */
.ch-smoke-icon {
  pointer-events: none;
  background: transparent;
  border: none
}

.ch-smoke-dot {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  background: radial-gradient(circle, var(--c, #1a1a22) 0%, color-mix(in srgb, var(--c, #1a1a22) 70%, transparent) 28%, color-mix(in srgb, var(--c, #1a1a22) 35%, transparent) 55%, transparent 80%);
  transition: transform .18s;
  position: relative
}

.ch-smoke-dot:hover {
  transform: scale(1.12)
}

.ch-smoke-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #1a1a22);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7), 0 1px 3px rgba(0, 0, 0, .22);
  pointer-events: none
}

.ch-popup {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: #1a1a22;
  line-height: 1.45;
  min-width: 140px
}

.ch-popup .ch-popup-t {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 700;
  font-size: 13px;
  color: #1a1a22;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(30, 30, 40, .09);
  padding-bottom: 3px
}

.ch-popup .ch-popup-r {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0
}

.ch-popup .ch-popup-r b {
  color: rgba(30, 30, 40, .5);
  font-weight: 500;
  font-size: 10px
}

/* HL button card */
.hl-slide {
  flex: 1;
  min-width: 0
}

.hl-btn-card {
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center
}

.hl-btn-card.kde-able {
  cursor: pointer;
  transition: border-color .15s
}

.hl-btn-card.kde-able:hover {
  border-color: var(--blue)
}

.hl-btn-val {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1
}

.hl-btn-lbl {
  font-size: 10px;
  color: var(--light);
  margin-top: 4px;
  letter-spacing: .04em
}

/* KDE panel */
.kde-panel {
  margin-top: 4px;
  background: #f0f5fc;
  border: 1px solid #1a4f8a22;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 10px
}

.kde-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px
}

.kde-row label {
  color: var(--mid);
  min-width: 24px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600
}

.kde-row input[type=range] {
  flex: 1;
  accent-color: var(--blue)
}

.kde-row .kde-val {
  min-width: 30px;
  text-align: right;
  font-weight: 600;
  color: var(--blue);
  font-size: 10px
}

.kde-badge {
  font-size: 9px;
  color: var(--blue);
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
  opacity: .7
}

/* Face */
.face {
  background: var(--bg-cool);
  border: 1px solid var(--bg-sand);
  border-radius: var(--radius-card);
  overflow: hidden;
  max-width: 280px;
  box-shadow: var(--shadow)
}

/* dashboard: face/exp fill dfc container identically */
.dfc .face,
.dfc .exp {
  max-width: none;
  width: 100%;
  box-shadow: none;
  border-radius: 0;
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column
}

/* Make the dashboard face- and exp-headers visually identical so a card
   only grows HORIZONTALLY when expanded — same padding, font-size, layout. */
/* Header height is LOCKED to the tallest case (title row with 18px buttons +
   8/6 padding ≈ 32px) so the underline lands at the same Y across every card
   — whether the title row has buttons (Show on map, Zoom to fit) or just
   plain text. Same rule applies to both face (collapsed) and expanded
   headers. align-items:center so plain-text titles sit centered in the
   reserved space instead of hugging the top. */
.dfc .face-hdr,
.dfc .exp-hdr {
  padding: 0 56px 0 10px;
  height: 32px;
  box-sizing: border-box;
  border-bottom: 1px solid #e2ddd6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-shrink: 0
}

.dfc .face-t,
.dfc .exp-t {
  font-family: var(--font-display);
  font-size: 12px;
  color: #1a1a22;
  line-height: 1.2;
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto !important;
  min-width: 0;
  max-width: none !important;
  width: 100%;
  flex-wrap: nowrap;
  overflow: hidden
}

.dfc .face-s,
.dfc .exp-s {
  font-size: 8px;
  color: #888;
  margin-top: 1px;
  font-family: var(--font-ui)
}

/* Card title is capped at 1/4 of the CARD's own width — not the title-row
   width (the row gets squeezed by buttons next to the title, which made the
   old 20%-of-row rule clip titles like "Card title" even when the card had
   lots of free space). We turn .face and .exp into inline-size containment
   contexts and cap the name at 25cqi, so the boundary always tracks the
   card's actual width — wider in the expanded card, narrower in the face,
   and identical in both states when the card is the same width. Below the
   cap, titles render at their natural width with no ellipsis. */
.face,
.exp {
  container-type: inline-size
}

.face-t-name,
.exp-t-name {
  display: inline-block;
  max-width: 50cqi;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  min-width: 0;
  flex-shrink: 0
}

.dfc .hl-slider {
  flex: 0 0 auto
}

.dfc .hl-slider.ch-slider-slider,
.dfc .hl-slider.ch-tag-slider {
  flex: 0 0 auto
}

.face.geo-card {
  border-color: #1a4f8a55;
  background: #f0f5fc
}

.face-hdr {
  padding: 10px 13px 8px;
  border-bottom: 1px solid var(--bd)
}

.face-t {
  font-family: var(--font-display);
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 4px;
  flex: 1;
  min-width: 0
}

.face-s {
  font-size: 10px;
  color: var(--light);
  margin-top: 2px
}

.face-hl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 13px
}

.fh-l {
  font-size: 11px;
  color: var(--mid)
}

.fh-v {
  font-family: var(--font-display);
  font-size: 18px
}

/* Expanded */
.exp {
  background: var(--bg-cool);
  border: 1px solid var(--bg-sand);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow)
}

.exp.geo-card {
  border-color: #1a4f8a55;
  background: #f0f5fc
}

.exp-hdr {
  padding: 12px 15px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  justify-content: space-between;
  align-items: baseline
}

.exp-t {
  font-family: var(--font-display);
  font-size: 16px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 4px;
  flex: 1;
  min-width: 0
}

.exp-s {
  font-size: 11px;
  color: var(--light)
}

.exp-hl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 15px
}

.eh-l {
  font-size: 11px;
  color: var(--mid)
}

.eh-v {
  font-family: var(--font-display);
  font-size: 20px
}

.exp-write {
  padding: 12px 15px;
  font-size: 12px;
  color: var(--mid);
  line-height: 1.7;
  border-top: 1px solid var(--bd)
}

/* Article */
.art {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column
}

.art-hdr {
  background: var(--ui-dark);
  padding: 22px 20px;
  overflow: hidden
}

.art-hdr.geo-hdr {
  background: var(--blue)
}

.art-t {
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  text-align: left
}

.art-s {
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
  font-weight: 300
}

/* art-body moved above */
.art-hls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px
}

.ah {
  background: var(--paper);
  border-radius: 9px;
  padding: 13px;
  text-align: center
}

.av {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1
}

.al {
  font-size: 11px;
  color: var(--light);
  margin-top: 5px;
  line-height: 1.3
}

.art-chart-wrap {
  background: var(--paper);
  border-radius: 9px;
  padding: 14px
}

.chart-ttl {
  font-size: 11px;
  font-weight: 600;
  color: var(--light);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px
}

.art-chart-center {
  display: flex;
  justify-content: center
}

.art-write {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.8;
  border-top: 1px solid var(--bd);
  padding-top: 13px
}

.art-note {
  background: var(--paper);
  border-left: 3px solid var(--ink);
  padding: 9px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  color: var(--mid);
  line-height: 1.6
}

.prev-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 7px
}

.empty-p {
  font-size: 12px;
  color: var(--light);
  padding: 14px;
  text-align: center;
  border: 1px dashed var(--bd);
  border-radius: 8px
}

/* Col move */
.col-mv {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--light);
  font-size: 11px;
  padding: 0 3px;
  line-height: 1;
  font-family: var(--font-ui)
}

.col-mv:hover:not(:disabled) {
  color: var(--ink)
}

.col-mv:disabled {
  opacity: .18;
  cursor: default
}

.col-name {
  outline: none;
  cursor: text;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s;
  border-radius: 2px;
  padding: 0 1px
}

.col-name:hover {
  border-bottom-color: var(--mid)
}

.col-name:focus {
  border-bottom-color: var(--ink);
  background: #fffdf8
}

/* Agg tabs */
.agg-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-top: 5px;
  width: 100%
}

.agg-tab {
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid var(--bd);
  border-radius: 3px;
  cursor: pointer;
  background: var(--paper);
  color: var(--light);
  font-family: var(--font-ui);
  transition: all .1s
}

.agg-tab.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink)
}

/* WGS lock badge */
.wgs-lock {
  font-size: 10px;
  background: #e8f5f2;
  border: 1px solid #1a6b5a55;
  border-radius: 4px;
  color: var(--teal);
  padding: 3px 9px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px
}