/* Dense industrial-catalogue style. Served from /static/ under a content hash; no webfont, no framework, no tracker. */
:root{--ink:#1d1d1d;--ink2:#555;--rule:#d5d5d5;--rule2:#ebebeb;--bg2:#f4f4f4;--green:#0b5d2e;--green2:#0f7a3c;--yellow:#ffd200;
--ok:#0b5d2e;--ok-bg:#e6f2ea;--one:#6b5300;--one-bg:#fff4cc;--claim:#8a2a2a;--claim-bg:#f9e6e6}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:13px/1.4 Arial,Helvetica,"Segoe UI",sans-serif;color:var(--ink);background:#fff}
a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:19px;line-height:1.2;margin:0 0 4px}
h2{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin:22px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--rule)}
h3{font-size:13px;margin:12px 0 4px}
p{margin:0 0 8px}
.lede{color:var(--ink2);margin:0 0 10px}
.sub,.muted{color:var(--ink2);font-size:12px}
code{font:12px ui-monospace,Menlo,Consolas,monospace;background:var(--bg2);padding:0 3px}
/* header */
.hd{border-bottom:1px solid var(--rule);background:#fff}
.hd .in{max-width:1180px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo b{font-size:20px;letter-spacing:-.02em;color:var(--green)}
.logo b span{color:var(--ink);font-weight:normal}
.logo i{display:inline-block;width:16px;height:16px;background:var(--yellow);border:2px solid var(--green);border-radius:2px}
.logo .mark{display:inline-flex;width:20px;height:20px;flex:0 0 20px}.logo .mark svg{display:block;width:20px;height:20px}
.logo small{display:none;color:var(--ink2);font-size:11px}
.srch{flex:1 1 260px;position:relative;max-width:640px}
.srch input{width:100%;height:32px;border:1px solid #8a8a8a;border-radius:3px;padding:0 34px 0 10px;font:14px Arial,Helvetica,sans-serif;background:#fff}
.srch input:focus{outline:2px solid var(--green2);outline-offset:-1px}
.srch button{position:absolute;right:0;top:0;height:32px;width:32px;border:0;background:transparent;color:var(--green);cursor:pointer;font-size:16px}
.srch .dd{position:absolute;left:0;right:0;top:34px;background:#fff;border:1px solid #8a8a8a;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:20;max-height:60vh;overflow:auto}
.srch .dd a{display:flex;gap:10px;padding:5px 10px;border-bottom:1px solid var(--rule2);color:var(--ink)}
.srch .dd a:hover,.srch .dd a.on{background:#eef6f0;text-decoration:none}
.srch .dd a b{color:var(--green);min-width:9ch}
.srch .dd a span{color:var(--ink2)}
.srch .dd .none{padding:8px 10px;color:var(--ink2)}
.hd nav a{margin-left:14px;font-size:12px;color:var(--ink2)}
/* The scale of the thing, on its own line under the header row so it cannot squeeze the search. */
.tally{flex:1 0 100%;margin:3px 0 0;font-size:11.5px;color:var(--ink2);line-height:1.5}
.tally a{color:var(--ink2)}
.tally a:hover{color:var(--green)}
.tally b{color:var(--ink);font-variant-numeric:tabular-nums}
.tally .sep{margin:0 5px;color:var(--rule)}
.tally .and{margin-left:6px;font-style:italic}
/* shell: rail + main */
.shell{max-width:1180px;margin:0 auto;padding:10px 12px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rail{font-size:12px}
.rail h4{margin:0 0 3px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.rail ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:2px 10px}
.rail li a{color:var(--ink)}
.rail li a.on{font-weight:bold;color:var(--green)}
.rail li small{color:var(--ink2)}
@media(min-width:800px){
  .shell{grid-template-columns:190px minmax(0,1fr);gap:26px}
  .rail{border-right:1px solid var(--rule2);padding-right:12px}
  .rail ul{display:block}
  .rail li{padding:1px 0}
  .logo small{display:inline}
}
.crumbs{font-size:11px;color:var(--ink2);margin:0 0 8px}
.crumbs a{color:var(--ink2)}
/* tables */
table{border-collapse:collapse;width:100%;margin:2px 0 10px;font-size:12.5px}
th,td{text-align:left;padding:3px 8px;border-bottom:1px solid var(--rule2);vertical-align:top}
thead th{background:var(--bg2);border-bottom:1px solid var(--rule);font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink2);white-space:nowrap}
tbody th{font-weight:bold;white-space:nowrap}
tbody tr:hover{background:#fafafa}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
.kv{max-width:620px}
.kv th{width:46%;font-weight:normal;color:var(--ink2)}
.kv td{font-weight:bold}
/* evidence labels */
.tag{display:inline-block;font-size:10.5px;font-weight:bold;padding:0 5px;border-radius:2px;white-space:nowrap;line-height:16px}
.tag-verified{color:var(--ok);background:var(--ok-bg)}.tag-single{color:var(--one);background:var(--one-bg)}.tag-claimed{color:var(--claim);background:var(--claim-bg)}.tag-derived{color:var(--ink2);background:var(--rule2)}
.tag-note{display:inline;margin-left:4px;font-size:11px;color:var(--ink2);font-weight:normal;white-space:normal}
/* lists / grids */
ul.plain{list-style:none;padding:0;margin:2px 0 8px}ul.plain li{padding:2px 0;border-bottom:1px solid var(--rule2)}
ul.cols{columns:2 15rem;column-gap:24px}ul.cols li{break-inside:avoid}
.sources li{padding:4px 0}.sources .meta{display:block;color:var(--ink2);font-size:11px}
.docs li{padding:6px 0}.docs .meta{display:block;color:var(--ink2);font-size:11px}
.docs .pages{display:block;margin-top:3px}.docs .pages .chip{padding:1px 7px;font-size:11px}.docs .pages .sub{font-size:11px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;padding:0;margin:4px 0 14px;list-style:none}
.tiles li{border:1px solid var(--rule);padding:6px 8px;background:#fff}
.tiles li a{display:block;font-weight:bold}
.tiles li small{display:block;font-weight:normal;color:var(--ink2)}
.tiles li:hover{border-color:var(--green2);background:#f7fbf8}
.banner{border-left:4px solid var(--one);background:var(--one-bg);padding:6px 10px;margin:8px 0;font-size:12.5px}
.banner strong{display:block}
.pager{display:flex;gap:12px;align-items:center;margin:12px 0;font-size:12px}
.pager{flex-wrap:wrap}.pnums{display:flex;flex-wrap:wrap;gap:4px 8px}.pnums b{font-weight:bold}
figure.product{margin:8px 0}figure.product img{max-width:100%;height:auto;border:1px solid var(--rule2)}figure.product figcaption{font-size:11px;color:var(--ink2)}
.ft{border-top:1px solid var(--rule);color:var(--ink2);font-size:11px;padding:10px 0 30px}
.ft .in{max-width:1180px;margin:0 auto;padding:0 12px}
.skip{position:absolute;left:-9999px}.skip:focus{left:6px;top:6px;background:#fff;padding:6px;border:2px solid var(--green);z-index:30}
/* icons, hero, seller call-to-action */
.ic{vertical-align:-3px;margin-right:5px;color:var(--green);flex:none}
.ic.big{display:block;margin:0 0 4px;color:#3a3a3a}
.ic.h{vertical-align:-10px;margin-right:8px}
.tiles li a{display:flex;flex-direction:column;font-weight:bold}.tiles li a:hover .ic.big{color:var(--green)}
.rail li a .ic{color:#666;margin-right:4px}.rail li a.on .ic{color:var(--green)}
.hero{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 6px}
.hero-main{display:flex;gap:16px;align-items:flex-start}
.glyph{flex:none;width:112px;height:112px;border:1px solid var(--rule);background:var(--bg2);display:flex;align-items:center;justify-content:center;color:#444}
.ext{font-size:12px}
.buy{border:1px solid var(--rule);background:#fffbe6;padding:10px 12px}
.buy h2{margin:0 0 4px;border:0;color:var(--ink);text-transform:none;font-size:14px;letter-spacing:0}
/* the buy box leads with one winner (best price and stock, else the best place to look) and an availability line */
.win{background:#fff;border:1px solid #7cc39a;border-radius:4px;padding:8px 10px;margin:6px 0 4px}
.win-search,.win-maybe{border-color:#bdbdbd}
.win-l{margin:0;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.win-p{margin:2px 0 0;display:flex;align-items:center;gap:8px}
.win-p .pr{font-size:22px;font-weight:bold;font-variant-numeric:tabular-nums;color:var(--ink)}
.win-p .av{font-size:11px;padding:1px 7px;border-radius:9px}.win-p .av-in{color:#0b4a25;background:#bfe6cd}.win-p .av-out{color:#8a1c1c;background:#f4d3d3}
.win-d{margin:2px 0 8px;font-size:13px;color:var(--ink)}
.buy .btn.btn-win{display:block;text-align:center;font-weight:bold;font-size:14px;padding:9px 10px;border-radius:4px;text-decoration:none;min-height:0}
.buy .btn.btn-win::before{display:none}
.buy .btn.btn-win-go{background:#0b5d2e;color:#fff;border:1px solid #0b5d2e}.buy .btn.btn-win-go:hover{background:#094a25;color:#fff}
.buy .btn.btn-win-search{background:#fff;color:#0b5d2e;border:1px solid #0b5d2e}.buy .btn.btn-win-search:hover{background:#f1f8f3}
.avail{display:flex;gap:6px;align-items:flex-start;margin:6px 0 2px;font-size:12px;color:var(--ink)}
.avail .ic{flex:none;margin-top:2px}
.h1-sub{font-weight:normal;color:var(--ink2);font-size:.8em}
.also{margin:0 0 4px;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.kind{margin:0;font-size:12px}
.btns{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0}
.btn{display:block;text-align:center;background:var(--yellow);color:#1d1d1d;font-weight:bold;padding:8px 6px;border:1px solid #d9b200;border-radius:3px;font-size:13px}
.btn:hover{background:#ffe04a;text-decoration:none}
@media(min-width:900px){.hero{grid-template-columns:minmax(0,1fr) 300px}}
/* photos */
.tc{width:56px;padding:2px 4px}
img.th{width:48px;height:48px;object-fit:contain;display:block;background:#fff;border:1px solid var(--rule2)}
.glyph.photo{width:auto;max-width:260px;height:auto;margin:0;padding:4px;background:#fff}
.glyph.photo img{max-width:100%;height:auto;display:block}
.more-img{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.more-img img{max-width:140px;height:auto;border:1px solid var(--rule2)}
@media(min-width:900px){.hero-main{align-items:flex-start}}
/* seller button states */
.btns{grid-template-columns:1fr}
.btn{text-align:left;padding:7px 10px;border-radius:3px;font-size:13px;font-weight:bold;display:flex;align-items:center;gap:8px}
.btn::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.25)}
.btn-ok{background:#dff3e6;border:1px solid #7cc39a;color:#0b4a25}.btn-ok::before{background:#1c9a4e}
.btn-ok:hover{background:#cdebd8;text-decoration:none}
.btn-maybe{background:var(--yellow);border:1px solid #d9b200;color:#1d1d1d}.btn-maybe::before{background:#e0a800}
.btn-maybe:hover{background:#ffe04a;text-decoration:none}
.btn-search{background:#fff;border:1px solid #bdbdbd;color:#1d1d1d;font-weight:normal}.btn-search::before{background:#e6e6e6}
.btn-search:hover{background:#f4f4f4;text-decoration:none}
/* seller buttons with an observed price/availability (D-67) */
.btn .sn{flex:none}.btn .av{font-weight:normal;font-size:11px;padding:1px 7px;border-radius:9px;background:rgba(0,0,0,.06);white-space:nowrap}
.btn .av-in{color:#0b4a25;background:#bfe6cd}.btn .av-out{color:#8a1c1c;background:#f4d3d3}
.btn .pr{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.btn-out{background:#f3f3f3;border-color:#cfcfcf;color:#444}.btn-out::before{background:#b9b9b9}.btn-out:hover{background:#ebebeb}
.legend{font-size:11px;color:var(--ink2);margin:4px 0}
.sw{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid rgba(0,0,0,.25);vertical-align:-1px}
.sw-ok{background:#1c9a4e}.sw-maybe{background:#e0a800}.sw-search{background:#e6e6e6}

.related li a{flex-direction:row;align-items:center;gap:8px;font-weight:normal}.related img.th{width:40px;height:40px;flex:none}

/* links inside running text and tables are underlined so colour is not the only cue */
main p a,main li a,main td a,main th a,.sources a,.lede a{text-decoration:underline;text-underline-offset:2px}
.tiles a,.rail a,.btn,.crumbs a,.pager a,.related a{text-decoration:none}

/* icon system */
.ic.row{display:block;width:28px;height:28px;color:#555;margin:0 auto}
.ic.th-ic{width:40px;height:40px;color:#555;flex:none;margin-right:8px}
.ic.src{color:#666;margin-right:6px}
.ti{vertical-align:-2px;margin-right:3px}
.bi{flex:none;margin-right:2px}
.mono{vertical-align:-5px;margin-right:6px;flex:none}
.mono.big{vertical-align:-8px;margin-right:8px;width:34px;height:34px}
.tiles li a .mono.big{display:block;margin:0 0 4px}
h1 .mono.big{width:26px;height:26px;vertical-align:-4px}
h2 .ic{width:14px;height:14px;vertical-align:-2px;margin-right:6px;color:var(--green)}
.hd nav a .ic{vertical-align:-2px;margin-right:3px;color:#666}
.srch .dd a .ic{flex:none;align-self:center;color:#555;margin-right:2px}
.srch button svg{vertical-align:middle}
ul.plain li .ic{color:#666;margin-right:5px}
.tc a{display:block}
.glyph svg{color:#3a3a3a}

/* expandable cross-reference numbers */
a.xref-toggle{color:var(--green);border-bottom:1px dashed #9cc7ad;text-decoration:none}
a.xref-toggle .caret{color:#888;margin-left:4px;margin-right:0;vertical-align:-1px}
a.xref-toggle.open,a.xref-toggle:hover{border-bottom-style:solid}
tr.xref-more td{background:#f7fbf8;padding:6px 8px}
.chip{display:inline-block;margin:2px 6px 2px 0;padding:2px 8px;border:1px solid #bdbdbd;border-radius:12px;background:#fff;font-size:12px;color:var(--ink);text-decoration:none}
.chip:hover{border-color:var(--green2);background:#eef6f0;text-decoration:none}
.chip .ic{color:#666;margin-right:3px}

/* ---- Campaign 04: the fitment page as a cross-reference chart ---- */
h3{font-size:13px;margin:16px 0 4px;color:var(--ink)}
h3 small,h2 small{font-weight:normal;color:var(--ink2);font-size:11px;text-transform:none;letter-spacing:0;margin-left:6px}
.jump{margin:6px 0 4px}
.chart td,.chart th{vertical-align:top}
.chart td.pos{white-space:normal;max-width:15ch}
.chart td.eng{max-width:20ch;color:var(--ink2);font-size:11.5px}
.qual{display:inline-block;margin:0 4px 2px 0;padding:0 5px;background:var(--bg2);border:1px solid var(--rule2);border-radius:3px;font-size:11px;white-space:nowrap}
a.fn{font-size:9.5px;vertical-align:super;color:#8a8a8a;margin-left:3px;text-decoration:none}
a.fn:hover{color:var(--green);text-decoration:none}
p.legend.sub{margin:-6px 0 12px;font-size:11px}
.chart td.xr{max-width:46ch}
.x{display:inline-block;margin:0 6px 2px 0;font-size:12px;white-space:nowrap}
.x b{font-weight:normal;color:var(--ink2)}
span.x{color:var(--ink2)}
span.x.oem{color:var(--ink)}
.x.more{font-style:italic}
.xr .none{color:var(--ink2);font-style:italic;font-size:11.5px}
.chip.buy{white-space:nowrap;font-size:11px;padding:1px 7px}
.chip.off{color:var(--ink2);border-style:dashed;cursor:default}
.chips{margin:4px 0 10px;line-height:2}
.chips .chip small{color:var(--ink2);margin-left:4px}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:2px 14px;margin:4px 0 10px;max-width:620px}
dl.kv dt{color:var(--ink2)}
dl.kv dd{margin:0;font-weight:bold}
.fns{margin:6px 0 12px}
.fns summary{cursor:pointer;color:var(--ink2);font-size:12px}
.fns dl.kv dd{font-weight:normal}
dl.qa{margin:4px 0 12px;max-width:74ch}
dl.qa dt{font-weight:bold;margin-top:9px}
dl.qa dd{margin:2px 0 0;color:var(--ink2)}
figure.tphoto{margin:8px 0 14px;max-width:560px}
figure.tphoto img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
figure.tphoto figcaption{color:var(--ink2);font-size:11px;margin-top:3px}
.about dl.kv{margin-bottom:6px}
/* ---- The phone: a technician in a yard or a shop, often in gloves ----
   Two jobs to do fast: "I have a number off the old part" and "I have this machine/engine".
   Everything below serves one of those. Measured on a 390x780 viewport. */

/* A grid item's min-width is auto, so a long part number or a wide panel stops the column
   shrinking and the whole page scrolls sideways. This is the fix, not a mobile-only patch. */
.shell>*{min-width:0}
.hero,.hero-main{min-width:0}
.x,.chart th[scope=row] a{overflow-wrap:anywhere}

@media (max-width:640px){
  /* Content first. The category/brand rail was 259-279px of links above every H1 -- a third of
     the first screen spent on navigation the reader did not ask for. It moves below the page. */
  .shell{display:flex;flex-direction:column;padding:8px 14px 32px}
  .shell>main{order:1}
  .shell>.rail{order:2;margin-top:22px;padding-top:14px;border-top:2px solid var(--rule)}
  .rail::before{content:"Browse everything";display:block;font-size:11px;text-transform:uppercase;
    letter-spacing:.05em;color:var(--ink2);margin-bottom:6px}

  /* The search is the whole of job one, so it stays reachable instead of scrolling away. */
  .hd{position:sticky;top:0;z-index:50;box-shadow:0 1px 6px rgba(0,0,0,.09)}
  .hd .in{padding:6px 12px;gap:8px}
  .hd nav{display:none}
  /* The header is sticky, so every row it carries is screen a technician does not get back. The
     tally is worth seeing on arrival and not worth pinning, so it goes once the page is scrolled. */
  .tally{margin:2px 0 0;font-size:11px;max-height:20px;overflow:hidden;
    transition:max-height .18s ease,margin .18s ease,opacity .15s ease}
  .tally .and{display:none}
  .hd.scrolled .tally{max-height:0;margin:0;opacity:0}
  .logo b{font-size:17px}
  .srch{flex:1 1 100%;order:3}
  .srch input{height:44px;font-size:16px;padding-right:46px}   /* 16px or iOS zooms on focus */
  .srch button{height:44px;width:44px}      /* the one target still under the thumb threshold */

  h1{font-size:20px;line-height:1.25}
  .lede{font-size:13px}

  /* One chart row becomes a labelled card. Stacked cells lose their column headers, so each
     line says what it is -- without that, "Caterpillar" and "Caterpillar 3306" are the same
     thing to a reader who cannot see the thead. */
  .chart td.xr,.chart td.pos,.chart td.eng{max-width:none}
  .chart thead{display:none}
  /* the table itself has to stop being a table, or the cells keep a table formatting context and
     collapse to their content width -- which is why the "Find it" button came out 56px wide */
  .chart,.chart tbody{display:block;width:100%}
  .chart tr{display:block;width:100%;border-bottom:1px solid var(--rule);padding:9px 0 11px}
  .chart td,.chart th{display:block;width:auto;border:0;padding:0}
  .chart td.tc{display:none}                 /* the same generic glyph on every row, 86 times */
  .chart td.tc.buy{display:block}            /* ...but the buy cell shares that class and must stay */
  .chart th[scope=row]{font-size:19px;font-weight:bold;letter-spacing:-.01em;margin-bottom:1px}
  .chart th[scope=row] a{text-decoration:none}
  .chart td[data-label]:not(:empty)::before{content:attr(data-label);display:block;
    font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin:6px 0 1px}
  .chart td.mfr{color:var(--ink2)}
  .chart .x{font-size:13px;margin:0 8px 3px 0;line-height:1.5}
  .qual{font-size:12px;padding:1px 7px}
  a.fn{font-size:11px}

  /* Gloved thumbs: 44px is the smallest reliable target. */
  .chip,.chip.buy{min-height:40px;line-height:38px;padding:0 14px;font-size:13px}
  .chart td.buy .chip.buy{display:block;text-align:center;margin:8px 0 0;font-size:14px;min-height:44px;line-height:44px}
  .tiles li a{padding:4px 0}
  .rail li a{display:inline-block;padding:4px 0}
  /* the seller links are the end of the job -- they were 34px, under the thumb threshold */
  .btn{min-height:44px;line-height:42px;padding:0 12px;font-size:13px}
  .legend{line-height:1.7}
  /* the product glyph was taking a third of the width and squeezing the description into ~190px */
  .hero-main{gap:10px}
  .hero-main>.glyph,.hero-main>figure.glyph{width:76px;flex:0 0 76px;margin:0}
  .hero-main>.glyph svg{width:56px;height:56px}

  /* The photograph confirms you are on the right machine; it is not the job. Capped so it cannot
     push the first part number off the screen. */
  figure.tphoto{margin:6px 0 10px}
  figure.tphoto img{max-height:132px;object-fit:cover;object-position:center}
  dl.kv{grid-template-columns:1fr;gap:0 0}
  dl.kv dt{margin-top:7px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
  .jump{display:none}                        /* replaced by the sticky system bar below */
}

/* Reading a part number off a screen into a supplier's search box is where a digit gets dropped.
   Revealed by script only, because a button that cannot copy is worse than no button. */
.copynum{display:inline-block;margin:2px 0 8px;padding:0 12px;min-height:34px;border:1px solid #bdbdbd;
  border-radius:17px;background:#fff;color:var(--ink);font:12px/32px Arial,Helvetica,sans-serif;cursor:pointer}
.copynum:hover{border-color:var(--green2);background:#eef6f0}
@media (max-width:640px){.copynum{min-height:42px;line-height:40px;font-size:14px;padding:0 16px}}

/* The filter bar: the whole point of a machine page on a phone. A big machine lists dozens of parts
   across many engines; a technician knows which engine is in front of them and wants the rest gone. */
.mfilter{display:none}
@media (max-width:640px){
  .mfilter{display:block;position:sticky;top:52px;z-index:40;background:#fff;
    margin:0 -14px 6px;padding:7px 14px 6px;border-bottom:1px solid var(--rule)}
  .mfilter .lab{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin-bottom:5px}
  .mfrow{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mfrow::-webkit-scrollbar{display:none}
  .mfrow button{flex:0 0 auto;min-height:38px;padding:0 13px;border:1px solid #bdbdbd;border-radius:19px;
    background:#fff;color:var(--ink);font:13px/36px Arial,Helvetica,sans-serif;white-space:nowrap;cursor:pointer}
  .mfrow button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff;font-weight:bold}
  .mfnone{padding:14px 0;color:var(--ink2);font-size:13px}
  tr[hidden],h3[hidden],div[hidden],p.legend[hidden]{display:none!important}
}