/* ============== SHARED CHART/PANEL WIDGETS ==============
   Used by the Summary page (trend bars, issue-share topics, root-problems
   panel) and the division map widget (Summary + Experiences pages). */

.dash-split{display:grid;grid-template-columns:1.5fr 1fr;gap:1.1rem}
@media (max-width:900px){.dash-split{grid-template-columns:1fr}}

.dash-chart{height:210px;display:flex;align-items:end;gap:.6rem;padding:1.4rem .2rem 0;border-bottom:1px solid var(--line);margin-bottom:1.6rem}
.dash-bar{flex:1;position:relative;min-width:12px;background:var(--accent-soft);border-radius:0;transition:height .4s ease}
.dash-bar span{position:absolute;bottom:-1.4rem;left:50%;transform:translateX(-50%);font-size:.66rem;color:var(--ink-3);white-space:nowrap}
.dash-bar strong{position:absolute;top:-1.2rem;left:50%;transform:translateX(-50%);font-size:.68rem;color:var(--ink-2);font-weight:700;white-space:nowrap}

.dash-topic{display:flex;align-items:center;gap:.65rem;margin:0;padding:.7rem 0;border-bottom:1px solid var(--line)}
.dash-topic .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.dash-topic .grow{flex:1;min-width:0}
.dash-topic .tlabel{font-size:.82rem;font-weight:600;margin-bottom:.3rem}
.dash-topic .num{font-size:.78rem;white-space:nowrap;flex:0 0 auto}
a.dash-topic{text-decoration:none;color:inherit;border-radius:var(--r-sm);transition:background .15s ease}
a.dash-topic:hover{background:var(--paper-2)}
a.dash-topic:hover .tlabel{color:var(--accent-2)}

.dash-callout{background:var(--accent-2);color:var(--card);border-radius:var(--r-lg);padding:1.1rem 1.25rem;margin-top:1.1rem}
.dash-callout b{font-size:.88rem}
.dash-callout p{color:var(--accent-line);margin:.45rem 0 0;line-height:1.6;font-size:.84rem}

.dash-issue{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.dash-issue:first-child{border-top:0}
.dash-issue .name{font-weight:700;font-size:.92rem}
.dash-issue small{color:var(--ink-3);display:block;margin-top:.3rem;line-height:1.6}

/* ============== DIVISION MAP WIDGET ==============
   Frontend-only demo statistics for the resolution/response metric
   toggles; the "reports" metric is real (see realDivisionReportCounts in
   components/divisionMap.js). */
.divmap-card{margin-bottom:2.5rem;padding:2rem;background:var(--card);border-radius:var(--r-lg);border:1px solid var(--line)}
.divmap-card h3{margin:0 0 .5rem;font-size:1.2rem;color:var(--ink);border-bottom:2px solid var(--line);padding-bottom:0.75rem}
.divmap-note{font-size:.82rem;color:var(--ink-3);margin:0 0 1.25rem;font-style:italic}

.divmap-metric-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.divmap-metric-btn{font:inherit;font-size:.82rem;font-weight:600;padding:.5rem .9rem;border-radius:0;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);cursor:pointer;transition:.15s}
.divmap-metric-btn:hover{border-color:var(--ink)}
.divmap-metric-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Patterns page's own copy of the map (see dashDivisionMap()'s asDropdown
   option in summary.js) swaps the button row above for this single boxed
   select — same bordered-box-with-triangle look used by the site's other
   filter dropdowns, but written as its own isolated rule so it can't touch
   those other selectors or the Experiences page's button markup, which
   never renders this class. */
.divmap-metric-select-wrap{position:relative;display:inline-block;margin-bottom:1.5rem}
.divmap-metric-select{font:inherit;font-size:.92rem;font-weight:600;padding:.55rem 2.3rem .55rem .9rem;
  border:1px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;max-width:100%}
.divmap-metric-select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.divmap-metric-select-wrap::after{content:"";position:absolute;right:.9rem;top:50%;margin-top:-3px;
  pointer-events:none;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--ink)}

.divmap-layout{display:grid;grid-template-columns:1fr 280px;gap:1.5rem;align-items:start}

.divmap-svg-wrap{background:var(--card);border-radius:var(--r);padding:1rem;border:1px solid var(--line)}
.divmap-svg{width:100%;height:auto;display:block;max-height:560px}
.divmap-region path{fill:var(--fill,var(--line-2));stroke:var(--card);stroke-width:1.6;transition:fill .25s ease,opacity .15s ease;cursor:pointer}
.divmap-region:hover path{opacity:.85}
.divmap-region.selected path{stroke:var(--ink);stroke-width:3}
.divmap-region:focus-visible path{outline:2px solid var(--ink);outline-offset:1px}

.divmap-sidebar{display:flex;flex-direction:column;gap:1rem}
.divmap-legend{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.divmap-legend h4{margin:0 0 .6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.divmap-ramp{height:8px;border-radius:0;background:linear-gradient(90deg,var(--accent-soft),var(--ink));margin-bottom:.4rem}
.divmap-ramp-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}

.divmap-list{display:flex;flex-direction:column;gap:.15rem;max-height:340px;overflow:auto}
/* Experiences page's own division-trends map (.exp-divmap wraps the shared
   dashDivisionMap() widget there — see experiences.js) drops the list's
   scroll clamp so the full division list shows without a scrollbar. The
   Patterns/Summary page's own copy (.pat-divmap, see patternsMapSection()
   in summary.js) gets the same treatment, scoped to its own class so
   nothing else that renders dashDivisionMap() picks this up. */
.exp-divmap .divmap-list, .pat-divmap .divmap-list{max-height:none;overflow:visible}
.divmap-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .6rem;border-radius:var(--r);font:inherit;font-size:.85rem;color:var(--ink);background:var(--card);border:1px solid transparent;cursor:pointer;text-align:start;width:100%}
.divmap-row:hover{background:var(--paper-2)}
.divmap-row.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2);font-weight:600}
.divmap-nm{display:flex;align-items:center;flex:1;gap:.5rem}
.divmap-sw{width:10px;height:10px;border-radius:0;flex-shrink:0}
.divmap-val{font-family:var(--mono);color:var(--ink-3)}

@media (max-width:768px){
  .divmap-card{padding:1.25rem}
  .divmap-layout{grid-template-columns:1fr}
}

/* Patterns page's "by place" division grid (.pat-places-grid, see
   patternsMapSection() in summary.js) — the shared .g3 utility collapses to
   a single column below ~480px since each card needs 240px; this keeps it
   at two side by side on phone widths instead, without touching .g3 itself
   or any other page that uses it. */
@media (max-width:640px){
  .pat-places-grid{grid-template-columns:repeat(2,1fr)}
}