/* /brand-market: Market, research for a brand account (js/brand-market-page.js).
   It sits on Brand home's cards (css/brand-home.css): this sheet adds the
   three comparison tiles, the sortable category table and the two short
   lists. Compact and calm; every number keeps its label. */
#bm-root{display:grid;gap:var(--s-4);margin-top:var(--s-4)}
.bm-head .bh-claim{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 0}
.bm-waiting{margin:8px 0 0;color:var(--ink-2);font-size:14px}
.bm-muted{color:var(--ink-2);font-size:13.5px}

.bm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.bm-tile,.bm-facts>div{min-width:0;padding:var(--s-3) var(--s-4);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane-2)}
.bm-tile h3,.bm-facts h3,.bm-sub{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--ink-2)}
.bm-tile-own{margin:0 0 8px;font-size:14px;font-weight:650;color:var(--violet)}
.bm-tile-v{margin:0;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.bm-tile-v.is-good{color:var(--confirm)}
.bm-tile-v.is-low{color:var(--tone-warn)}
.bm-tile-v.is-none{font-size:16px;font-weight:700;color:var(--ink-2)}
.bm-tile-n{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

.bm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-3)}
.bm-tabs button{min-height:40px;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--pane);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.bm-tabs button[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-soft);color:var(--violet)}
.bm-table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-md)}
.bm-table-wrap:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.bm-table{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.bm-table thead th{padding:0;border-bottom:1px solid var(--rule);background:var(--pane-2);text-align:left;white-space:nowrap}
.bm-table thead button{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:8px 12px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}
.bm-table thead button:hover,.bm-table thead th[aria-sort] button{color:var(--violet)}
.bm-table thead button span{font-size:9px}
.bm-table tbody th,.bm-table tbody td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle;font-weight:400}
.bm-table tbody tr:last-child>*{border-bottom:0}
.bm-table tbody th{min-width:200px}
.bm-table tbody th a{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--ink);font-weight:650;text-decoration:none}
.bm-table tbody th a:hover .bm-name,.bm-list a:hover .bm-name{text-decoration:underline}
.bm-table tbody th .mark{width:28px;height:28px;flex:0 0 28px;border-radius:var(--r-sm)}
.bm-table .bm-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.bm-table small{color:var(--ink-2);font-size:12.5px}
.bm-table tr.is-own>*{background:color-mix(in srgb,var(--violet) 9%,var(--pane))}
.bm-table tr[data-pinned]>*{border-bottom:2px solid color-mix(in srgb,var(--violet) 35%,var(--rule))}
.bm-you,.bm-new{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:middle}
.bm-you{background:var(--violet);color:#fff}
.bm-new{background:color-mix(in srgb,var(--tone-posts) 16%,var(--pane));color:var(--tone-posts)}
.bm-foot{margin:var(--s-3) 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.bm-source{margin:0}

.bm-pair{display:grid;gap:var(--s-4);align-items:start}
@media (min-width:960px){.bm-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
.bm-list,.bm-videos,.bm-shapes{margin:0;padding:0;list-style:none}
.bm-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.bm-list li:last-child{border-bottom:0}
.bm-list a{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--ink);font-weight:650;text-decoration:none}
.bm-list .mark{width:28px;height:28px;flex:0 0 28px;border-radius:var(--r-sm)}
.bm-list-n{font-size:13.5px;color:var(--ink-2)}
.bm-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-3);margin-bottom:var(--s-4)}
.bm-facts .bm-tile-v{font-size:17px}
.bm-facts .bm-tile-v+.bm-tile-n{margin-bottom:8px}
.bm-shapes li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px}
.bm-shapes b{font-variant-numeric:tabular-nums}
.bm-videos li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.bm-videos li:last-child{border-bottom:0}
.bm-vrank{flex:0 0 44px;font-size:15px;font-weight:800;color:var(--violet);font-variant-numeric:tabular-nums}
.bm-videos small{margin-left:8px;color:var(--ink-2);font-size:13px}
.bm-videos p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.bm-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:var(--s-3) 0 0;font-size:14px;color:var(--ink-2)}
.bm-held ul{margin:8px 0;padding-left:20px;font-size:14.5px;line-height:1.6}
.bm-held p{margin:0;font-size:14.5px;line-height:1.5}

@media (max-width:700px){
 .bm-tiles{grid-template-columns:1fr}
 /* On a phone each brand is a small card: its name, then every figure with its label. */
 .bm-table{min-width:0}
 .bm-table thead tr{display:flex;flex-wrap:wrap}
 .bm-table thead th{border-bottom:0;background:transparent}
 .bm-table thead button{min-height:40px;padding:6px 10px;font-size:12.5px}
 .bm-table tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:12px;border-bottom:1px solid var(--rule)}
 .bm-table tbody tr:last-child{border-bottom:0}
 .bm-table tbody th,.bm-table tbody td{padding:2px 0;border:0;background:transparent!important}
 .bm-table tbody th{grid-column:1/-1;min-width:0;margin-bottom:4px}
 .bm-table tbody td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:650;color:var(--ink-2)}
 .bm-table tr.is-own{background:color-mix(in srgb,var(--violet) 9%,var(--pane))}
 .bm-table tr[data-pinned]{border-bottom:2px solid color-mix(in srgb,var(--violet) 35%,var(--rule))}
}