/* AgencyDB UI – reuses the ZeroDegree/firsthand brand tokens (§12). */
:root{
  --ink:#16304B; --ink-2:#2F4A66; --teal:#0E8F86; --teal-d:#0B6E68; --teal-l:#E9F6F3;
  --coral:#FF6A4D; --coral-d:#E0492E; --coral-l:#FFEDE8; --indigo:#3A56D4;
  --white:#fff; --mist:#F4F8F8; --border:#E1EAEC; --muted:#5C6B73;
  --shadow:0 4px 16px rgba(22,48,75,.06);
  --grad-signature:linear-gradient(135deg,var(--teal) 0%, var(--indigo) 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;overflow-x:clip}
a{color:var(--teal-d);text-underline-offset:2px}
h1,h2,h3,.wm{font-family:"Sora",system-ui,sans-serif}
.mono{font-family:"JetBrains Mono",monospace}
.muted{color:var(--muted)} .small{font-size:12px}

/* Shell */
.app{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.side{background:var(--ink);color:#cfe0e6;padding:18px 14px;display:flex;flex-direction:column;gap:4px}
.lockup{display:flex;align-items:center;gap:9px;margin:2px 6px 18px;text-decoration:none}
.wordmark{font-family:"Sora";font-weight:700;font-size:19px;letter-spacing:.2px;line-height:1;white-space:nowrap}
.wordmark .a{color:var(--ink)} .wordmark .b{color:var(--teal)} .wordmark .o{color:var(--coral)}
.side .wordmark .a{color:#fff}
.nav a{display:block;padding:8px 11px;border-radius:8px;color:#bcd0d8;text-decoration:none;font-weight:500;font-size:13.5px}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.active{background:var(--teal);color:#fff}
.nav .sep{margin:12px 6px 4px;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#6f8b97}
/* Bottom-of-sidebar user menu (ported from ZeroDegree). Monogram avatar + name; a WHITE popup rises up and
   right, past the dark sidebar, over the main section. Pinned to the viewport bottom on desktop (see the
   sticky-sidebar rule in the desktop media query below), so it stays visible however long the page is. */
.usermenu{margin-top:auto;position:relative}
.user-btn{display:flex;align-items:center;gap:9px;width:100%;padding:7px 6px;border:0;border-radius:10px;
  background:none;font:inherit;text-align:left;cursor:pointer}
.user-btn:hover{background:rgba(255,255,255,.06)}
.user-btn .avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--teal);color:#fff;font-weight:700;font-size:12px;letter-spacing:.3px;font-family:"Sora","Inter",sans-serif}
.user-btn .uname{font-size:13px;font-weight:600;line-height:1.2;color:#bcd0d8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-btn:hover .uname{color:#fff}
.user-pop{position:absolute;bottom:4px;left:calc(100% - 14px);z-index:60;min-width:212px;background:#fff;
  border:1px solid var(--border);border-radius:11px;padding:6px;box-shadow:0 14px 38px rgba(22,48,75,.34)}
.user-pop a,.user-pop button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:var(--ink);
  text-decoration:none;font:inherit;font-size:13px;font-weight:500;white-space:nowrap;background:none;border:0;cursor:pointer}
.user-pop a:hover,.user-pop button:hover{background:var(--mist);color:var(--ink)}
.user-pop form{margin:0}
.user-pop .user-sep{height:1px;background:var(--border);margin:5px 6px}

.main{padding:26px 30px;max-width:1100px;position:relative;min-width:0}
.main::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-signature)}
/* Wide content (tables) scrolls inside its own box instead of widening the page (mobile). */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* Mobile top bar + off-canvas backdrop — hidden on desktop (no grid cell). */
.topbar{display:none}
.side-backdrop{display:none}
/* Desktop: pin the sidebar to the full viewport so the user menu sits at the bottom edge and stays visible
   however long the page scrolls. The nav list scrolls internally if it ever outgrows the column. The sidebar
   must NOT clip its overflow: the user-menu popup deliberately extends right, past the sidebar, over the main
   section — so only .nav scrolls, and a stacking context (z-index) lifts the whole sidebar (popup included)
   above .main so the popup is never covered by the content panel. */
@media (min-width:821px){
  .side{position:sticky;top:0;align-self:start;height:100vh;z-index:10}
  .side .nav{flex:1 1 auto;min-height:0;overflow-y:auto}
}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.page-head h1{font-size:24px;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.page-head .sub{color:var(--muted);font-size:13px;margin-top:3px}

/* Cards */
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.card.tealedge{border-left:3px solid var(--teal)} .card.coraledge{border-left:3px solid var(--coral)}
.card h2{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--teal-d);margin:0 0 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){
  .grid2{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  /* Sticky top bar with hamburger + wordmark. */
  .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;padding:10px 14px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
  .topbar .burger{background:none;border:0;color:#fff;cursor:pointer;padding:6px;display:inline-flex;border-radius:8px}
  .topbar .burger:hover{background:rgba(255,255,255,.1)}
  .topbar .burger svg{width:24px;height:24px;display:block}
  .topbar .lockup{margin:0}
  .topbar .wordmark{font-size:16px}
  .topbar .wordmark .a{color:#fff}
  /* Sidebar becomes an off-canvas drawer. */
  .side{position:fixed;top:0;bottom:0;left:0;width:240px;max-width:82vw;z-index:80;transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto}
  .app.nav-open .side{transform:translateX(0)}
  /* Inside the drawer the popup can't fly right past the sidebar — keep it within the drawer. */
  .user-pop{left:6px;right:auto;min-width:200px}
  .side-backdrop{display:block;position:fixed;inset:0;background:rgba(22,48,75,.5);z-index:70;opacity:0;pointer-events:none;transition:opacity .22s}
  .app.nav-open .side-backdrop{opacity:1;pointer-events:auto}
  .main{padding:18px}
  .main::before{display:none}
  /* 16px inputs stop iOS Safari from zooming in on focus. */
  input,select,textarea{font-size:16px}
}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.stat .n{font-family:"Sora";font-weight:700;font-size:26px;color:var(--teal-d)}
.stat .l{font-size:12px;color:var(--muted)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:none}

/* Key/value rows */
.kv{display:flex;gap:12px;padding:5px 0;border-bottom:1px dashed var(--border)}
.kv:last-child{border-bottom:none}
.kv .k{flex:0 0 130px;color:var(--muted);font-size:12px}
.kv .v{flex:1}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.badge.agency{background:var(--teal-l);color:var(--teal-d)}
.badge.watch{background:var(--mist);color:var(--muted);border:1px solid var(--border)}
.badge.this_week{background:#EAEEFB;color:var(--indigo)}
.badge.trigger{background:var(--coral-l);color:var(--coral-d)}
.badge.moving{background:var(--ink);color:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;font-family:"Inter";font-weight:600;font-size:13px;padding:8px 14px;border-radius:9px;border:1px solid var(--teal);background:var(--teal);color:#fff;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--teal-d);border-color:var(--teal-d)}
.btn.ghost{background:#fff;color:var(--teal-d)}
.btn.ghost:hover{background:var(--teal-l)}
summary.btn{list-style:none} summary.btn::-webkit-details-marker{display:none}

/* Forms */
.stack{display:flex;flex-direction:column;gap:11px}
.row-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media (max-width:820px){.row2{grid-template-columns:1fr}}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-2)}
input,select,textarea{width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;font-weight:400;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)}
label.chk{display:flex;align-items:center;gap:8px;font-weight:500}
label.chk input{width:auto;margin:0}
.actions{display:flex;gap:10px;margin-top:6px}
.req{color:var(--coral-d)}
.searchbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.searchbar input{max-width:340px}
/* Agencies list – compact header, labeled filters, icon bulk actions, per-row delete, pagination */
.listhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.listhead h2{font-family:"Sora";font-size:16px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin-bottom:12px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.filters .ff{display:flex;flex-direction:column;gap:3px}
.filters .ff label{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
.filters .ff input,.filters .ff select{margin-top:0;padding:6px 9px;font-size:13px}
.filters .ff input[type=search]{width:190px}
.filters .ff select{width:auto;min-width:108px}
/* Multi-select (discipline): a native <details> styled to match the selects, panel overlays as a popover. */
.msel{position:relative}
.msel>summary{list-style:none;cursor:pointer;padding:6px 9px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:#fff;min-width:108px;display:inline-flex;align-items:center;justify-content:space-between;gap:8px}
.msel>summary::-webkit-details-marker{display:none}
.msel>summary::after{content:"\25BE";color:var(--muted);font-size:10px}
.msel[open]>summary{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)}
.mselpanel{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:190px;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(22,48,75,.14);padding:6px}
.mselopt{display:flex;align-items:center;gap:8px;padding:5px 7px;font-size:13px;border-radius:6px;cursor:pointer;text-transform:capitalize}
.mselopt:hover{background:var(--teal-l)}
.mselopt input[type=checkbox]{width:15px;height:15px;min-width:0;margin:0;padding:0;border:0;accent-color:var(--teal)}
.msel.sic .mselpanel{min-width:290px}
.msel.sic .mselopt{text-transform:none} /* keep SIC descriptions in their natural casing */
.chkline{display:flex;align-items:center;gap:8px;font-weight:normal;margin:2px 0 6px;font-size:13px;cursor:pointer}
.chkline input[type=checkbox]{width:16px;height:16px;min-width:0;margin:0;padding:0;border:0;accent-color:var(--teal)}
/* Larger, easier-to-click row select checkboxes on the agencies table. The base input rule adds
   padding+border and *{box-sizing:border-box} is global, so we MUST zero padding/border here or the
   explicit width/height collapses to a squished box instead of enlarging. */
.rowchk,input[data-selall]{width:17px;height:17px;padding:0;margin:0;border:0;cursor:pointer;accent-color:var(--teal)}
.iconsep{width:1px;height:20px;background:var(--border);margin:0 4px;align-self:center}
td.w1,th.w1{padding-left:10px;padding-right:10px}
.btn.danger{border-color:var(--coral);background:var(--coral)}
.btn.danger:hover{background:var(--coral-d);border-color:var(--coral-d)}
.enrichbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:8px}
.enrichbar .lbl{font-size:12px;font-weight:600;color:var(--ink-2)}
.enrichbar .hint{margin-left:4px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--teal);border-radius:8px;background:#fff;color:var(--teal-d);cursor:pointer}
.iconbtn:hover{background:var(--teal-l)}
.iconbtn.danger{border-color:var(--coral);color:var(--coral-d)}
.iconbtn.danger:hover{background:var(--coral-l)}
.btn.ghost.danger{background:#fff;border-color:var(--coral);color:var(--coral-d)}
.btn.ghost.danger:hover{background:var(--coral-l);border-color:var(--coral-d)}
.tokenreveal{border:1px solid var(--coral);background:var(--coral-l);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.tokenreveal-head{font-size:13px;color:var(--ink);margin-bottom:8px}
.tokenreveal-row{display:flex;gap:8px;align-items:center}
.tokenreveal-row input{flex:1;font-size:13px;padding:8px 10px;background:#fff;margin-top:0}
th.w1,td.w1{width:1%;white-space:nowrap;text-align:center}
th a{color:var(--muted);text-decoration:none}
th a:hover{color:var(--teal-d)}
.xdel{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 6px;border-radius:6px}
.xdel:hover{color:var(--coral-d);background:var(--coral-l)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.pnav{display:flex;gap:8px;align-items:center}
.pnav .btn{padding:6px 11px;font-size:12px}

/* Flash */
.flash{padding:10px 14px;border-radius:9px;margin-bottom:14px;font-weight:500;font-size:13px}
.flash.ok{background:var(--teal-l);color:var(--teal-d)}
.flash.err{background:var(--coral-l);color:var(--coral-d)}

/* Holdco reference */
.holdco{padding:9px 0;border-bottom:1px solid var(--border)}
.holdco:last-child{border-bottom:none}
.holdco .hg{margin-bottom:6px}
.brands{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--mist);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:12px;position:relative}
.chip .uk{font-size:9px;color:var(--teal-d);background:var(--teal-l);border-radius:3px;padding:0 3px}

/* Reference tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:0 0 14px;flex-wrap:wrap}
.tabs .tab{padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.tabs .tab.active{color:var(--ink);border-bottom-color:var(--teal-d)}

/* Holdco census management */
.inline-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.inline-form input[type=text]{flex:1 1 160px;min-width:0;max-width:100%;padding:6px 9px}
.inline-form select{padding:5px 7px;max-width:100%}
.chkline{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap}
.holdco{padding:12px 0;border-bottom:1px solid var(--border)}
.holdco:last-child{border-bottom:none}
.hg-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.hg-row .spacer{flex:1 1 16px}
.holdco .hg-note{margin:3px 0 0;line-height:1.35}
.rowlabel{display:flex;gap:10px;margin-top:7px;align-items:baseline}
.rowlabel>.muted{flex:0 0 58px}
.rowlabel .chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.chip.link{color:var(--teal-d);text-decoration:none;background:var(--teal-l);border-color:transparent}
.chip.link:hover{text-decoration:underline}
.chip form{display:inline;margin:0}
.chip .chipx{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 0 0 2px}
.chip .chipx:hover{color:var(--coral-d)}
.chip .mv>summary{list-style:none;cursor:pointer;color:var(--muted);font-size:11px;padding:0 2px}
.chip .mv>summary::-webkit-details-marker{display:none}
.chip .mv[open] .inline-form{position:absolute;top:100%;left:0;margin-top:4px;z-index:6;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px;box-shadow:0 4px 14px rgba(0,0,0,.08);flex-wrap:nowrap}
.addbrand-row{display:flex;gap:8px;margin-top:9px;max-width:520px}
.addbrand-row input{flex:1 1 auto;min-width:0;padding:7px 10px}
.addbrand-row .btn{flex:0 0 auto}

/* Edit modal */
.modal{border:1px solid var(--border);border-radius:12px;padding:20px;max-width:460px;width:calc(100% - 32px);box-shadow:0 12px 40px rgba(0,0,0,.16)}
.modal::backdrop{background:rgba(20,22,30,.4)}
.modal h3{margin:0 0 12px}
.modal .stack{display:flex;flex-direction:column;gap:10px}
.modal .stack>label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.modal .stack>label input[type=text]{padding:7px 10px}
.modal-actions{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.modal-actions .spacer{flex:1 1 8px}
.btn.danger{color:var(--coral-d);border-color:var(--coral)}

/* Radio-hack tabs (holdcos) */
.tabwrap>.tabradio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tabwrap .tabpanel{display:none}
#htab-list:checked       ~ .tabs label[for=htab-list],
#htab-manage:checked     ~ .tabs label[for=htab-manage],
#htab-add:checked        ~ .tabs label[for=htab-add],
#htab-exceptions:checked ~ .tabs label[for=htab-exceptions]{color:var(--ink);border-bottom-color:var(--teal-d)}
#htab-list:checked       ~ .tabpanel[data-tab=list],
#htab-manage:checked     ~ .tabpanel[data-tab=manage],
#htab-add:checked        ~ .tabpanel[data-tab=add],
#htab-exceptions:checked ~ .tabpanel[data-tab=exceptions]{display:block}
.tabs .tab{cursor:pointer}

/* Manage large holdcos – revenue ranking */
.numin{width:64px;padding:5px 7px;text-align:center}
.ranklist{list-style:none;margin:14px 0 0;padding:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.rankrow{display:flex;align-items:center;gap:9px;padding:8px 12px;border-top:1px solid var(--border);background:#fff}
.rankrow:first-child{border-top:none}
.rankrow.inzone{background:var(--teal-l)}
.rankrow.dragging{opacity:.55;background:var(--mist)}
.rankrow .drag{flex:0 0 auto;cursor:grab;color:var(--muted);font-size:15px;line-height:1;user-select:none;touch-action:none}
.rankrow .drag:active{cursor:grabbing}
.rankrow .rk{flex:0 0 24px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.rankrow .nm{font-weight:600}
.rankrow .spacer{flex:1 1 8px}
.rankrow .nudge{flex:0 0 auto;display:inline-flex;gap:2px}
.rankrow .mvbtn{border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:5px;width:24px;height:22px;line-height:1;font-size:10px;cursor:pointer;padding:0}
.rankrow .mvbtn:hover{color:var(--ink);border-color:var(--muted)}
.ranklist .cutoff{display:flex;align-items:center;justify-content:center;padding:3px 12px;background:var(--coral-l);color:var(--coral-d);font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border-top:2px dashed var(--coral)}

/* Auth */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--mist);padding:20px}
.authcard{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:26px 26px;width:100%;max-width:360px}
.authcard .stack,.authcard form{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.auth-lockup{margin-bottom:4px}
.auth-lockup .wordmark{font-size:24px}

/* Background-enrichment toast (assets/jobs.js). Bottom-right cards on desktop, a bottom bar on mobile. */
.job-toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px;
  width:320px;max-width:calc(100vw - 24px);pointer-events:none}
.job-toast{pointer-events:auto;background:#fff;border:1px solid var(--border);border-left:3px solid var(--teal);
  border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(22,48,75,.14);animation:jt-in .18s ease-out}
.job-toast.is-done{border-left-color:var(--teal)}
.job-toast.is-warn{border-left-color:var(--coral)}
.jt-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.jt-title{font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:13px;color:var(--ink)}
.jt-x{background:none;border:none;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
.jt-x:hover{color:var(--ink)}
.jt-bar{height:6px;border-radius:6px;background:var(--mist);border:1px solid var(--border);overflow:hidden;margin:9px 0 7px}
.jt-bar span{display:block;height:100%;width:0;background:var(--grad-signature);transition:width .4s ease}
.job-toast.is-warn .jt-bar span{background:var(--coral)}
.jt-sub{font-size:12px;color:var(--muted)}
.jt-actions{margin-top:9px}
.jt-cancel{font:inherit;font-size:12px;background:none;border:1px solid var(--border);border-radius:7px;
  padding:4px 9px;color:var(--muted);cursor:pointer}
.jt-cancel:hover:not(:disabled){border-color:var(--coral);color:var(--coral-d)}
.jt-cancel:disabled{opacity:.5;cursor:default}
@keyframes jt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .job-toasts{left:10px;right:10px;bottom:10px;width:auto;max-width:none}
  .tabs .tab{padding:7px 10px;font-size:12px}
  .rowlabel{flex-wrap:wrap}
  .rowlabel>.muted{flex:1 1 100%}
  .addbrand-row{max-width:none}
  .rankrow{flex-wrap:wrap}
  .rankrow .nm{flex:1 1 auto}
  .rankrow .rev{flex:0 0 auto}
}