/* The overview above the list's table (overview.js), on top of
   /explorer/styles.css and the munis tools' /munis/dashboard/munis.css (tiles,
   chart marks, tooltip, legend, table views). The panel folds into its summary
   line; on a phone it starts folded so the table stays near the top. */
.ov { margin: 0 0 12px; }
.ov[hidden] { display: none; }
.ov-box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; container-type: inline-size; }
.ov-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.ov-head::-webkit-details-marker { display: none; }
.ov-head::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin-right: 2px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; }
.ov-box[open] > .ov-head::before { transform: rotate(45deg); }
.ov-title { font: 700 16px/1.3 var(--head); color: var(--navy); overflow-wrap: anywhere; }
.ov-summary { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-body { padding: 0 14px 10px; }
.ov-scope { margin: 0 0 12px; max-width: 110ch; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ov-failed { margin: 0; font-size: 13px; color: var(--muted); }

.ov .ov-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 10px; }
.ov .m-tile { padding: 9px 12px; }
.ov .m-tile-value { font-size: 20px; font-variant-numeric: tabular-nums; }
.ov .m-tile-note { line-height: 1.35; }

/* charts: two side by side once the panel has room; an odd one out spans the row */
.ov-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ov-charts > .ov-wide { grid-column: 1 / -1; }
@container (max-width: 640px) { .ov-charts { grid-template-columns: minmax(0, 1fr); } }
.ov .m-panel { margin: 0; padding: 12px 14px 8px; }
.ov .ov-h { margin: 0 0 2px; font: 600 14.5px/1.35 var(--head); color: var(--ink); }
.ov .ov-sub { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ov .ov-source { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.ov-chart { min-height: 120px; }
.ov-chart.ov-chart-bar { min-height: 26px; }
.ov-index .ov-chart { min-height: 240px; }
.ov-controls { margin: 0 0 4px; }
.ov-range { flex-direction: row !important; align-items: center; gap: 8px !important; }
.ov-controls select { min-height: 34px; }
.ov .m-legend { margin: 6px 0 2px; }
.ov-pt, .ov-link { cursor: pointer; }
.ov .m-key-square { border-radius: 2px; }

/* the table views (munis.css styles their tables only inside a munis page's main) */
.ov .m-table { margin: 6px 0 2px; }
.ov .m-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ov .m-table :is(th, td) { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ov .m-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ov .m-table .table-scroll { max-height: 320px; overflow: auto; }

@media (max-width: 860px) {
  .ov-head { padding: 10px 12px; }
  .ov-body { padding: 0 10px 8px; }
  .ov .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ov .m-tile-value { font-size: 18px; }
  .ov .m-panel { padding: 10px 10px 6px; }
}

/* the issuer: its summary and key facts (explorer_issuers.py) */
.ov-about { margin: 0 0 12px; padding: 12px 14px; background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 6px; }
.ov-about-text { margin: 4px 0 8px; max-width: 110ch; font-size: 14px; line-height: 1.55; color: var(--ink); }
.ov-facts { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; font-size: 13px; }
.ov-facts > div { display: flex; gap: 6px; }
.ov-facts dt { color: var(--muted); }
.ov-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* the map of instruments: boxes with their names on the larger ones */
.ov-tree .ov-box-cell { cursor: pointer; }
.ov-tree .ov-box-cell:is(:hover, :focus-visible) rect { stroke: var(--sqx-ink, #1A2430); stroke-width: 2; }
.ov-tree-label { font-size: 11.5px; font-weight: 600; pointer-events: none; }
.ov-tree-value { font-size: 11px; pointer-events: none; font-variant-numeric: tabular-nums; }
.ov-holds .ov-tree-label { font-size: 11px; }
.ov-bar-label { font-size: 12px; fill: var(--ink); }
.ov-h4 { margin: 12px 0 4px; font: 600 13px/1.35 var(--head); color: var(--ink); }