.ex { display: grid; grid-template-columns: 260px 1fr; gap: 1.6rem 2.2rem; max-width: 1280px; margin: 0 auto; padding: 0 1.4rem 3rem; }
.filters { grid-row: 1 / span 2; }
.filters h1 { font-size: 2.2rem; }
.search { display: block; font-size: .85rem; color: var(--dusk); margin-top: .8rem; }
.search input { display: block; width: 100%; margin-top: .3rem; padding: .5rem .6rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; font: inherit; }
.hits { list-style: none; padding: 0; margin: .2rem 0 0; border: 1px solid var(--rule); border-radius: 4px; background: #fff; max-height: 220px; overflow: auto; }
.hits:empty { display: none; }
.hits li { padding: .35rem .6rem; cursor: pointer; font-size: .9rem; }
.hits li:hover, .hits li:focus { background: #f0ebdf; outline: none; }
fieldset { border: 0; padding: 0; margin: 1.1rem 0 0; }
legend { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
fieldset label { display: block; font-size: .88rem; padding: .12rem 0; }
fieldset input { accent-color: var(--ink); margin-right: .35rem; }
.count { margin-top: 1rem; }
.reset { background: transparent; border: 1px solid var(--rule); border-radius: 4px; padding: .4rem .7rem; cursor: pointer; font-size: .85rem; }
.charts figure { margin: 0 0 1rem; }
figcaption { font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }
.charts svg { width: 100%; height: auto; overflow: visible; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.focus { min-height: 3.6rem; margin-bottom: .8rem; }
.focus h2 { font-size: 1.9rem; margin: 0; }
.focus .meta { color: var(--dusk); font-size: .88rem; }
.focus .kpis { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .4rem; }
.focus .kpis div { font-size: .78rem; color: var(--dusk); }
.focus .kpis b { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.focus a { font-size: .85rem; }
.table { grid-column: 2; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; }
th, td { text-align: right; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { font-weight: 600; cursor: pointer; user-select: none; background: var(--paper); position: sticky; top: 0; }
th[aria-sort="ascending"]::after { content: " ↑"; } th[aria-sort="descending"]::after { content: " ↓"; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #efeadf; }
tbody tr.is-selected { background: #fbe9c8; }
td.na { color: var(--dusk); }
@media (max-width: 900px) {
  .ex { grid-template-columns: 1fr; }
  .filters { grid-row: auto; }
  .table { grid-column: 1; }
  .two { grid-template-columns: 1fr; }
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; vertical-align: 1px; }
td.bar { min-width: 200px; }
td.bar .track { display: inline-block; vertical-align: middle; width: 130px; height: 9px; background: #e6e1d4; border-radius: 5px; position: relative; margin-right: .6rem; overflow: visible; }
td.bar .track i { position: absolute; left: 0; top: 0; bottom: 0; background: #d9a03f; border-radius: 5px; }
td.bar .track em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .7; }
td.bar b { font-weight: 600; }
.more { margin-top: .8rem; }
th, td { padding: .55rem .6rem; }

.jump { margin: -.2rem 0 .9rem; }
.jump a, .tablehead a { text-decoration: none; color: var(--ink); display: inline-block; }
.tablehead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 .4rem; }
.tablehead h2 { font-size: 1.5rem; margin: 0; }
