/* Shared planner insight-modal polish.
   This file intentionally loads after main.css: the generic modal remains in
   the bundle while this layer gives every section the same branded, usable
   two-column record explorer. */

.section-stat-modal > .guest-editor-banner {
  flex:0 0 auto;
}

.section-stat-modal .section-stat-modal-head {
  align-items:center;
  padding:16px 24px 14px;
}

.section-stat-modal .section-stat-modal-titlewrap {
  display:block;
}

.section-stat-modal .section-stat-modal-titlewrap h2 {
  margin:0;
}

.section-stat-modal .section-stat-modal-titlewrap p {
  max-width:68ch;
  margin-top:5px;
}

.section-stat-modal .section-stat-split {
  grid-template-columns:minmax(0, 300px) minmax(0, 1fr);
  gap:28px;
}

.section-stat-aside {
  padding-right:2px;
}

.section-stat-aside .section-stat-headline {
  gap:10px;
}

.section-stat-aside .section-stat-headline-grid {
  gap:0;
  border-top:1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.section-stat-aside .section-stat-hcard {
  width:100%;
  min-height:42px;
  padding:9px 4px;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  color:inherit;
  transition:
    opacity .16s ease,
    background-color .16s ease,
    color .16s ease,
    transform .18s cubic-bezier(.22, 1, .36, 1);
}

.section-stat-aside .section-stat-hcard:hover,
.section-stat-aside .section-stat-hcard:focus-visible,
.section-stat-aside .section-stat-hcard.is-live {
  border-color:color-mix(in srgb, var(--border) 72%, transparent);
  background:color-mix(in srgb, var(--hcard-color, var(--accent)) 9%, var(--surface));
  transform:translateX(2px);
}

.section-stat-aside .section-stat-hcard.is-selected {
  background:var(--accent-soft);
  color:var(--accent);
}

.section-stat-aside .section-stat-hcard.is-selected .section-stat-hcard-label {
  color:inherit;
}

.section-stat-aside .section-stat-hcard.is-dim {
  opacity:.46;
}

.section-stat-aside .section-stat-hcard:focus-visible {
  outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset:2px;
}

.section-stat-aside .section-stat-hcard strong {
  font-family:var(--font-ui);
  font-size:15px;
}

.section-stat-aside .section-stat-hcard-label {
  font-family:var(--font-ui);
  font-size:.82rem;
}

.section-stat-modal .donut-segment {
  cursor:pointer;
}

.section-stat-clear-filter {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  margin:10px 0 0;
  padding:7px 2px;
  border:0;
  background:transparent;
  color:var(--accent);
  font:600 .78rem/1.2 var(--font-ui);
  cursor:pointer;
}

.section-stat-clear-filter:hover {
  text-decoration:underline;
  text-underline-offset:3px;
}

.section-stat-clear-filter:focus-visible {
  outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset:2px;
}

/* Number-only stats still earn a useful left rail. This is an editorial
   summary, not a synthetic chart: one primary figure and a compact fact list. */
.section-stat-overview {
  min-height:248px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 4px;
}

.section-stat-overview-label {
  margin-bottom:18px;
  color:var(--ink-muted);
  font:700 .7rem/1.2 var(--font-ui);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.section-stat-overview .section-stat-hero {
  align-items:flex-start;
  margin:0 0 22px;
  text-align:left;
}

.section-stat-overview .section-stat-hero-value {
  font-size:3rem;
}

.section-stat-overview .section-stat-hero-sub {
  max-width:30ch;
  white-space:normal;
  text-wrap:pretty;
}

.section-stat-overview-facts {
  display:grid;
  gap:0;
  margin:0;
  border-top:1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.section-stat-overview-facts > div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.section-stat-overview-facts dt {
  color:var(--ink-muted);
  font:.8rem/1.35 var(--font-ui);
}

.section-stat-overview-facts dd {
  margin:0;
  color:var(--ink);
  font:700 .88rem/1.35 var(--font-ui);
  font-variant-numeric:tabular-nums;
}

.section-stat-list-head > span:first-child {
  display:grid;
  gap:2px;
}

.section-stat-list-head .section-stat-list-title {
  color:var(--ink);
  font-size:.82rem;
}

.section-stat-list-toolbar {
  min-height:58px;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  margin:8px 0 12px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-surface);
  background:color-mix(in srgb, var(--surface) 88%, var(--bg));
}

.section-stat-search {
  height:38px;
  margin-right:auto;
  flex:0 0 auto;
}

.section-stat-search.is-open {
  flex:1 1 240px;
  max-width:360px;
}

.section-stat-search .toolbar-search-input {
  font-family:var(--font-ui);
}

.section-stat-search svg,
.section-stat-picker > svg {
  width:16px;
  height:16px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.section-stat-search .toolbar-search-clear svg {
  width:14px;
  height:14px;
}

.section-stat-search .toolbar-search-input::placeholder {
  color:color-mix(in srgb, var(--ink-muted) 88%, var(--ink));
}

.section-stat-picker {
  position:relative;
  height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  min-width:142px;
  padding:0 28px 0 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-control);
  background:var(--surface);
  color:var(--ink-muted);
  font:600 .72rem/1.2 var(--font-ui);
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}

.section-stat-picker:hover,
.section-stat-picker:focus-within {
  border-color:color-mix(in srgb, var(--accent) 38%, var(--border));
  background:var(--accent-soft);
  color:var(--ink);
  transform:translateY(-1px);
}

.section-stat-picker > svg {
  color:var(--ink-muted);
}

.section-stat-picker > svg:last-of-type {
  position:absolute;
  right:8px;
  width:13px;
  height:13px;
}

.section-stat-picker-prefix {
  color:var(--ink-muted);
}

.section-stat-picker strong {
  color:var(--ink);
  font:600 .76rem/1.2 var(--font-ui);
}

.section-stat-picker select {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  outline:0;
  padding:0;
  background:transparent;
  opacity:0;
  cursor:pointer;
}

.section-stat-picker:has(select:focus-visible) {
  outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset:2px;
}

.section-stat-picker.is-active {
  background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 34%, var(--border));
}

.section-stat-column-head {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(54px, auto) minmax(82px, auto);
  gap:12px;
  padding:0 12px 7px;
  color:var(--ink-muted);
  font:700 .66rem/1.2 var(--font-ui);
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.section-stat-column-head span:nth-child(n+2) {
  text-align:right;
}

.section-stat-record-panel[hidden],
.section-stat-record-panel .section-stat-row[hidden],
.section-stat-record-panel .section-stat-row-heading[hidden] {
  display:none !important;
}

.section-stat-record-panel .section-stat-row {
  margin:0;
  border-radius:0;
  transition:opacity .17s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}

.section-stat-record-panel .section-stat-row.is-filter-entering {
  opacity:0;
  transform:translateY(5px);
}

.section-stat-record-panel .section-stat-row.is-filter-leaving {
  opacity:0;
  transform:translateY(-5px);
  pointer-events:none;
}

.section-stat-record-panel .section-stat-row.is-group-collapsed {
  display:none;
}

.section-stat-record-panel .section-stat-row-main-btn {
  padding-left:12px;
  padding-right:8px;
}

.section-stat-avatar--icon svg {
  width:17px;
  height:17px;
}

.section-stat-row-heading--generated {
  padding:0;
  background:color-mix(in srgb, var(--surface) 82%, var(--bg));
  border-bottom:1px solid var(--border);
}

.section-stat-row-heading--generated button {
  width:100%;
  min-height:42px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease;
}

.section-stat-row-heading--generated button:hover {
  background:var(--accent-soft);
}

.section-stat-row-heading--generated button:focus-visible {
  outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset:-3px;
}

.section-stat-row-heading--generated strong {
  font:700 .72rem/1.2 var(--font-ui);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.section-stat-row-heading--generated small {
  color:var(--ink-muted);
  font:600 .68rem/1.2 var(--font-ui);
}

.section-stat-group-chevron {
  display:inline-grid;
  place-items:center;
  width:18px;
  transition:transform .18s ease;
}

.section-stat-row-heading--generated button[aria-expanded="false"] .section-stat-group-chevron {
  transform:rotate(-90deg);
}

@media (max-width:900px) {
  .section-stat-modal .section-stat-split {
    grid-template-columns:minmax(0, 1fr);
    gap:18px;
  }

  .section-stat-aside {
    position:static;
    padding-right:0;
  }

  .section-stat-overview {
    min-height:0;
    padding:8px 2px 16px;
  }
}

@media (max-width:620px) {
  .section-stat-modal .section-stat-modal-head {
    padding:14px 16px 12px;
  }

  .section-stat-list-toolbar {
    flex-wrap:wrap;
  }

  .section-stat-picker {
    order:3;
    flex:1 1 calc(50% - 4px);
    justify-content:space-between;
  }

  .section-stat-search {
    order:1;
  }

  .section-stat-search.is-open {
    flex:1 1 100%;
    max-width:none;
  }

  .section-stat-column-head {
    grid-template-columns:minmax(0, 1fr) auto;
  }

  .section-stat-column-head span:last-child {
    display:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .section-stat-aside .section-stat-hcard,
  .section-stat-picker,
  .section-stat-record-panel .section-stat-row,
  .section-stat-group-chevron {
    transition:none !important;
    transform:none !important;
  }
}