/* The municipal market tools, on top of /site.css (its tokens and the
   content-page <main> rules): the apps' own pages and the charts the munis
   overview embeds (':::app munis-dashboard', wrapped in .app-embed.dash).
   Charts sit on white panels; text wears the site's ink tokens, marks the
   series colors. Every rule is scoped to an .m-* class, so none reaches the
   overview's own prose. */

.m-app { margin: 8px 0 0; }
.m-asof { margin: 0 0 18px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; font-size: 13.5px; max-width: none !important; }
.m-asof strong { color: var(--ink); font-weight: 600; }
.m-empty { padding: 18px 20px; background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 6px; color: var(--text); }
.m-empty strong { color: var(--ink); }
.m-note { font-size: 14px; }

/* stat tiles: sans figures, sentence-case labels */
.m-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
body > main:not([class]) .m-tiles li { max-width: none; }
.m-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.m-tile-label { color: var(--label); font-size: 12.5px; }
.m-tile-value { color: var(--ink); font: 600 26px/1.2 var(--sans); }
.m-tile-note { color: var(--faint); font-size: 12px; }

/* chart panels */
.m-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* the grid's gap is the only space between paired panels (their own margin doubled the rows) */
.dash .m-grid-2 { margin-bottom: 16px; }
.dash .m-grid-2 > .m-panel { margin-bottom: 0; }
.m-panel { margin: 0 0 16px; padding: 16px 18px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
body > main:not([class]) .m-panel :is(h3, h4) { margin: 0 0 2px; font: 600 15px/1.35 var(--sans); color: var(--ink); }
body > main:not([class]) .m-panel .m-sub { margin: 0 0 10px; font-size: 13px; color: var(--faint); max-width: none; }
.m-svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-grid { stroke: var(--chart-grid, #E2E6EC); stroke-width: 1; }
.m-base { stroke: var(--sqx-hairline, #D3D7DF); stroke-width: 1; }
.m-axis { fill: var(--faint); font: 11px var(--sans); font-variant-numeric: tabular-nums; }
.m-rowlabel { fill: var(--text); }
.m-value { fill: var(--text); font: 11px var(--sans); font-variant-numeric: tabular-nums; }
.m-endlabel { fill: var(--text); font: 500 11.5px var(--sans); }
.m-leader { stroke: var(--chart-other, #A7AFB7); stroke-width: 1; }
.m-hit { fill: transparent; }
.m-col:focus, .m-pt:focus, .m-hit:focus { outline: none; }
.m-col.is-hover path, .m-col:focus path { filter: brightness(1.18); }
.m-col.is-hover .m-hit, .m-col:focus .m-hit { fill: rgba(0, 83, 136, 0.05); }
.m-dot { stroke: var(--panel); stroke-width: 2; paint-order: stroke; }
.m-cross { stroke: var(--chart-axis, #69727A); stroke-width: 1; }
.m-band { fill: rgba(0, 83, 136, 0.07); }
.m-mark { fill: none; stroke: var(--ink); stroke-width: 2; }
.m-pt:focus .m-dot, .m-pt:hover .m-dot { stroke: var(--ink); stroke-width: 1.5; }

.m-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 14px; padding: 0; list-style: none; font-size: 12.5px; color: var(--text); }
body > main:not([class]) .m-legend li { color: var(--text); }
.m-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.m-key-line { width: 14px; height: 2px; border-radius: 1px; vertical-align: 3px; }
.m-key-circle { border-radius: 50%; }
.m-key-diamond { transform: rotate(45deg) scale(0.85); }
.m-key-ring { background: none !important; border: 2px solid var(--ink); border-radius: 50%; }


/* table views and data tables */
.m-table { margin: 10px 0 0; font-size: 13px; }
.m-table summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
body > main:not([class]) .m-app table { display: table; width: 100%; font-size: 13px; }
body > main:not([class]) .m-app :is(th, td) { padding: 6px 10px; white-space: nowrap; }
/* a long column name wraps rather than pushing numeric columns out of a
   tablet-width panel; the cells below stay on one line */
body > main:not([class]) .m-app th { white-space: normal; }
body > main:not([class]) .m-app td.num, body > main:not([class]) .m-app th.num { text-align: right; font-variant-numeric: tabular-nums; }
.m-app tr.is-cancelled td { color: var(--faint); text-decoration: line-through; }
.m-records { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
.m-records thead th { position: sticky; top: 0; background: var(--panel); }

/* forms */
.m-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; }
.m-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--text); font-size: 13px; font-weight: 500; }
.m-form input, .m-form select { width: auto; min-width: 0; max-width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid #D3D7DF; border-radius: 4px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 400; }
/* wide enough for the uppercased placeholder (E.G. 64966SVJ2, 14 characters)
   and a 12-character entry inside the border-box padding */
.m-form input.m-cusip { width: calc(15ch + 22px); font-family: var(--mono); text-transform: uppercase; }
.m-form input.m-small { width: 10ch; }
.m-form button { min-height: 40px; margin: 0; padding: 0 18px; border: 0; border-radius: 4px; background: var(--accent); color: #fff; font: 500 14px var(--sans); cursor: pointer; }
.m-form button:hover { background: var(--accent-deep); }
.m-form fieldset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.m-form legend { padding: 0 4px; color: var(--ink); font-size: 13px; font-weight: 600; }
.m-linkbtn { padding: 0; border: 0; background: none; color: var(--accent); font: 13px var(--mono); cursor: pointer; }
.m-linkbtn:hover { text-decoration: underline; }
.m-cusip-list { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; list-style: none; }
body > main:not([class]) .m-cusip-list li { max-width: none; }
.m-bond { margin: 4px 0 12px; }
body > main:not([class]) .m-app p.m-bond { max-width: none; color: var(--text); }
.m-bond strong { font-family: var(--mono); color: var(--ink); }

/* results of the calculators */
.m-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 16px; }
.m-kv { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.m-kv dt { color: var(--label); font-size: 12.5px; }
.m-kv dd { margin: 2px 0 0; color: var(--ink); font: 600 20px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.m-kv .m-kv-note { display: block; margin-top: 2px; color: var(--faint); font: 400 12px/1.4 var(--sans); }

@media (max-width: 760px) {
  .m-grid-2 { grid-template-columns: 1fr; }
  .m-tile-value { font-size: 22px; }
  .m-panel { padding: 12px 12px 10px; }
  /* the muni pages on a phone: 14px notes and 12px chart labels */
  .m-asof { font-size: 14px; }
  body > main:not([class]) .m-panel .m-sub { font-size: 14px; }
  .m-axis, .m-endlabel { font-size: 12px; }
  .m-form fieldset { width: 100%; }
  body > main:not([class]) .m-app :is(th, td) { padding: 6px 8px; }
}
.m-ref { stroke: var(--ink); stroke-width: 1; }
/* long per-state tables scroll inside their panel above phone width; on a
   phone the table runs at page length, since a box that scrolls on both axes
   inside the page scroll shows one column at a time */
@media (min-width: 761px) { .m-tall { max-height: 520px; overflow: auto; } }
.m-tall thead th { position: sticky; top: 0; background: var(--panel); }
.m-form .m-example { flex-basis: 100%; margin: 0; font-size: 14px; }
.m-form .m-linkbtn, .m-form .m-linkbtn:hover { min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font: 14px var(--mono); }
#markup-form fieldset { flex: 1 1 100%; }

/* lists.js: sortable, paged data tables and the search forms */
.m-dt { margin: 0 0 8px; }
.m-dt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
body > main:not([class]) .m-app p.m-dt-count { margin: 0; font-size: 13px; color: var(--faint); max-width: none; }
.m-dt-csv, .m-dt-pager button, .m-form button.m-secondary { min-height: 36px; padding: 0 14px; border: 1px solid #D3D7DF; border-radius: 4px; background: var(--panel); color: var(--accent); font: 500 13.5px var(--sans); cursor: pointer; }
.m-dt-csv:hover, .m-dt-pager button:hover:not(:disabled), .m-form button.m-secondary:hover { border-color: var(--accent); background: var(--accent-wash); }
.m-dt-pager { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0 0; }
.m-dt-pager[hidden] { display: none; }
.m-dt-pager button:disabled { color: var(--faint); cursor: default; }
.m-dt .table-scroll { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
@media (min-width: 761px) { .m-dt .table-scroll { max-height: 640px; overflow: auto; } }
.m-dt thead th { position: sticky; top: 0; z-index: 1; vertical-align: bottom; }
.m-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
th.num .m-sort { text-align: right; }
.m-sort:hover { text-decoration: underline; }
th[aria-sort="ascending"] .m-sort::after { content: " \2191"; }
th[aria-sort="descending"] .m-sort::after { content: " \2193"; }
.m-mono, .m-dt td[data-field="cusip"] a { font-family: var(--mono); font-size: 12.5px; }
.m-form input.m-wide { width: 22ch; }
.m-form .m-btns { display: flex; gap: 8px; align-items: flex-end; }
.m-search { margin-bottom: 12px; }
.m-panel .m-dt { margin-top: 8px; }
.m-stack { cursor: pointer; }
.m-stack.is-hover .m-hit, .m-stack:focus .m-hit { fill: rgba(0, 83, 136, 0.05); }
@media (max-width: 760px) { .m-form input.m-wide { width: 100%; } .m-form .m-search label { flex: 1 1 40%; } }

/* the curve beside mbis.com's key-tenor table; the 2-10/10-30/2-30 row */
.m-curve-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
body > main:not([class]) .m-app table.m-keyt { width: auto; margin-top: 8px; font-size: 13px; }
.m-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .m-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .m-curve-split { grid-template-columns: 1fr; } }
.m-checks { align-items: center; gap: 6px 16px; }
.m-checks label { flex-direction: row; align-items: center; gap: 4px; font-weight: 400; }
.m-checks-label { font-size: 13px; color: var(--muted); }
.m-tenor-split { display: flex; gap: 12px; align-items: start; }
body > main:not([class]) .m-app .m-tenor-split table.m-keyt { margin-top: 0; font-size: 12.5px; }
.m-axis-title { font-size: 11px; }
@media (max-width: 760px) { .m-tenor-split { flex-wrap: wrap; } }
.m-form.m-checks input { min-height: 0; padding: 0; margin: 0; }
@media (min-width: 761px) { .m-spread-table.m-tall { max-height: 452px; } }
.m-views { display: inline-flex; margin: 4px 0 18px; border: 1px solid var(--accent); border-radius: 6px; overflow: hidden; }
body > main:not([class]) .m-views a { padding: 9px 20px; color: var(--accent); font-size: 15px; font-weight: 500; text-decoration: none; }
body > main:not([class]) .m-views a + a { border-left: 1px solid var(--accent); }
body > main:not([class]) .m-views a[aria-current] { background: var(--accent); color: #fff; }