/* Sortable data table + bar view used inside stories. */
.mpf-sortable-wrap { margin: 1.5rem 0 2rem; }
.mpf-sortable-wrap figcaption { font-size: .85rem; color: #4b5563; margin-top: .6rem; line-height: 1.5; }
.mpf-sortable-kicker { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #f26a24; font-weight: 700; margin-bottom: .35rem; }

.mpf-sortable-controls { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: 0 0 .9rem; font-size: .9rem; color: #00112b; }
.mpf-sortable-controls label { display: inline-flex; align-items: center; gap: .4rem; }
.mpf-sortable-controls select { font: inherit; font-size: .9rem; padding: .3rem .5rem; border: 1px solid #c7ccd6; border-radius: 4px; background: #fff; color: #00112b; }
.mpf-sortable-count { margin-left: auto; color: #4b5563; font-size: .85rem; }

.mpf-sortable-bars { display: grid; gap: .3rem; margin: 0 0 1.2rem; }
.mpf-sortable-bars-title { font-size: .8rem; color: #4b5563; margin-bottom: .2rem; }
.mpf-bar-row { display: grid; grid-template-columns: minmax(130px, 32%) 1fr 84px; align-items: center; gap: .6rem; font-size: .85rem; cursor: pointer; padding: .1rem .2rem; border-radius: 4px; }
.mpf-bar-row:hover { background: #f3f5f8; }
.mpf-bar-label { color: #00112b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpf-bar-track { height: 14px; background: #eceff3; border-radius: 3px; overflow: hidden; }
.mpf-bar-fill { height: 100%; background: #00112b; border-radius: 3px; transition: width .35s ease; }
.mpf-bar-row.is-empty .mpf-bar-fill { background: #c7ccd6; }
.mpf-bar-row.is-empty .mpf-bar-value { color: #6b7280; font-style: italic; }
.mpf-bar-value { font-variant-numeric: tabular-nums; text-align: right; color: #00112b; }

.mpf-sortable-detail { border: 1px solid #e3e6eb; border-left: 3px solid #00112b; border-radius: 4px; padding: .7rem .9rem; margin: 0 0 1rem; background: #fbfbfc; font-size: .88rem; line-height: 1.55; color: #374151; }
.mpf-sortable-detail-title { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-weight: 700; color: #00112b; margin-bottom: .35rem; }
.mpf-sortable-detail a { color: #00112b; text-decoration: underline; }
.mpf-sortable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.mpf-sortable td:first-child { min-width: 150px; }
table.mpf-sortable { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.mpf-sortable th, table.mpf-sortable td { padding: .5rem .6rem; border-bottom: 1px solid #e3e6eb; text-align: left; vertical-align: top; }
table.mpf-sortable th { background: #f6f7f9; color: #00112b; font-weight: 700; white-space: nowrap; }
table.mpf-sortable th.num, table.mpf-sortable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.mpf-sortable.is-enhanced th { cursor: pointer; user-select: none; }
table.mpf-sortable.is-enhanced th::after { content: ''; display: inline-block; width: .6em; }
table.mpf-sortable.is-enhanced th.is-sorted[aria-sort="descending"]::after { content: ' \25BE'; color: #f26a24; }
table.mpf-sortable.is-enhanced th.is-sorted[aria-sort="ascending"]::after { content: ' \25B4'; color: #f26a24; }
table.mpf-sortable tr.is-open td { background: #fbfbfc; }
table.mpf-sortable tr.mpf-note td { background: #fbfbfc; color: #374151; font-size: .85rem; line-height: 1.55; border-bottom: 2px solid #e3e6eb; }
table.mpf-sortable tr.mpf-note a { color: #00112b; text-decoration: underline; }
.mpf-note-toggle { font: inherit; font-size: .72rem; padding: .05rem .4rem; margin-left: .25rem; border: 1px solid #c7ccd6; border-radius: 3px; background: #fff; color: #00112b; cursor: pointer; vertical-align: middle; }
.mpf-note-toggle:hover { border-color: #00112b; }

@media (max-width: 640px) {
  .mpf-bar-row { grid-template-columns: minmax(110px, 40%) 1fr 70px; font-size: .8rem; }
  .mpf-sortable-count { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .mpf-bar-fill { transition: none; } }