/* ══ THE PHONE APP ═════════════════════════════════════════════════════════
   Loaded last and scoped to phone widths, so nothing here can touch the
   desktop. One screen per section, a glass top bar and tab bar, sheets that
   slide up. Type is set for reading at arm's length: 16px body, 13px floor. */
@media (max-width:760px){

:root{
  --m-gut:16px;
  --m-card:#fffdf9;
  --m-line:rgba(36,26,16,.09);
  --m-line2:rgba(36,26,16,.14);
  --m-soft:rgba(36,26,16,.045);
  --m-r:20px;
  --m-shadow:0 1px 0 rgba(36,26,16,.04),0 10px 28px -22px rgba(36,26,16,.45);
  --m-top:calc(58px + env(safe-area-inset-top,0px));
  --m-bot:calc(70px + env(safe-area-inset-bottom,0px));
  --m-ease:cubic-bezier(.2,.8,.2,1);
}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--m-top) + 10px)}
html.m-lock,html.m-lock body{overflow:hidden}
body.m-app{background:#f5efe4;padding-top:var(--m-top);padding-bottom:calc(var(--m-bot) + 8px);
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
body.m-app .side,body.m-app .topbar,body.m-app .snav,body.m-app .metastrip{display:none !important}
body.m-app .main{margin:0 !important;padding:0 !important}
body.m-app .wrap{padding:0 var(--m-gut) !important;max-width:none !important}

/* ── one screen at a time ────────────────────────────────────────────── */
body.m-app .wrap > section{display:none !important;margin:0 !important;padding:18px 0 8px !important}
body.m-app .wrap > section.m-on{display:block !important}
body.m-app section.m-enter{animation:m-in .34s var(--m-ease) both}
@keyframes m-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ body.m-app section.m-enter{animation:none} }

/* the screen's title: a large title, like the platform's own apps */
body.m-app .wrap > section > .shead{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 0 16px !important;padding:0 !important;border:0 !important}
body.m-app .wrap > section > .shead h2{font:700 34px/1.05 var(--display) !important;letter-spacing:-.035em !important;color:var(--ink);margin:0 !important}
body.m-app .wrap > section > .shead .smeta{font-size:14px !important;color:var(--body) !important;margin:0 !important;text-align:left !important}

/* ── top bar ──────────────────────────────────────────────────────────── */
#mbar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--m-top);padding:env(safe-area-inset-top,0px) var(--m-gut) 0;
  display:flex;align-items:center;gap:12px;
  background:rgba(245,239,228,.78);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
body.m-scrolled #mbar{border-bottom-color:var(--m-line2);background:rgba(250,246,238,.86)}
.mb-who{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.mb-who img{width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--m-line2);flex:none;object-fit:contain}
.mb-who div{display:flex;flex-direction:column;min-width:0}
.mb-who b{font:700 16px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.mb-who span{font-size:12.5px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-filter{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 12px;border-radius:999px;border:0;
  background:var(--ink);color:#fff;font:600 14px/1 var(--sans,inherit);flex:none;box-shadow:0 6px 16px -10px rgba(36,26,16,.8)}
.mb-filter svg{width:17px;height:17px}
.mb-filter:active{transform:scale(.96)}
.mb-filter i{position:absolute;top:-5px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);
  color:#fff;font:700 11px/19px var(--sans,inherit);font-style:normal;text-align:center;box-shadow:0 0 0 2px #f5efe4}

/* ── tab bar ──────────────────────────────────────────────────────────── */
#mtabs{position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:60;height:62px;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 4px;border-radius:22px;
  background:rgba(255,253,249,.82);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px var(--m-line),0 14px 34px -14px rgba(36,26,16,.45)}
#mtabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;border:0;background:none;
  color:rgba(36,26,16,.5);font:600 11px/1 var(--sans,inherit);letter-spacing:-.005em;border-radius:16px;transition:color .2s,background .2s}
#mtabs button svg{width:23px;height:23px;transition:transform .25s var(--m-ease)}
#mtabs button.on{color:var(--ink);background:rgba(36,26,16,.06)}
#mtabs button.on svg{transform:translateY(-1px) scale(1.06)}
#mtabs button:active svg{transform:scale(.9)}

/* ── the next screen, at the end of every screen ─────────────────────── */
.m-next{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;width:100%;margin:26px 0 6px;
  padding:16px 18px;border:0;border-radius:var(--m-r);background:var(--ink);color:#fff;text-align:left;box-shadow:0 18px 34px -22px rgba(36,26,16,.9)}
.m-next:active{transform:scale(.985)}
.mn-k{grid-column:1;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.02em}
.mn-t{grid-column:1;display:flex;align-items:center;gap:9px;margin-top:4px}
.mn-t svg{width:20px;height:20px;opacity:.85}
.mn-t b{font:700 21px/1.1 var(--display);letter-spacing:-.02em}
.mn-a{grid-column:2;grid-row:1/3;width:26px;height:26px}

/* ── sheets: Filters and More ─────────────────────────────────────────── */
#msheet{position:fixed;inset:0;z-index:80}
#msheet .ms-back{position:absolute;inset:0;background:rgba(24,16,8,.38);opacity:0;transition:opacity .26s}
#msheet.open .ms-back{opacity:1}
#msheet .ms-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;
  background:#fbf8f2;border-radius:26px 26px 0 0;box-shadow:0 -20px 50px -20px rgba(24,16,8,.45);
  transform:translateY(100%);transition:transform .32s var(--m-ease);padding-bottom:env(safe-area-inset-bottom,0px)}
#msheet.open .ms-panel{transform:none}
.ms-grab{width:40px;height:5px;border-radius:3px;background:rgba(36,26,16,.18);margin:9px auto 4px;flex:none}
.ms-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 18px 20px;overscroll-behavior:contain}
.ms-head{display:flex;align-items:center;justify-content:space-between}
.ms-title{font:700 24px/1.1 var(--display);letter-spacing:-.025em;color:var(--ink);margin:6px 0 12px}
.ms-reset{border:0;background:none;color:var(--accent);font:600 15px var(--sans,inherit);padding:8px 0}
.ms-done{position:sticky;bottom:0;width:100%;height:52px;margin-top:16px;border:0;border-radius:16px;background:var(--ink);color:#fff;
  font:650 16px var(--sans,inherit);box-shadow:0 -12px 18px 6px #fbf8f2}
.mf-g{margin:0 0 18px}
.mf-h{font-size:13px;font-weight:650;color:var(--body);margin:0 0 8px;letter-spacing:.01em}
.mf-seg{display:flex;padding:3px;border-radius:14px;background:rgba(36,26,16,.06);gap:2px}
.mf-seg .mf-o{flex:1;height:40px;border:0;border-radius:11px;background:none;font:600 14px var(--sans,inherit);color:var(--body);padding:0 6px}
.mf-seg .mf-o.on{background:#fff;color:var(--ink);box-shadow:0 1px 0 rgba(36,26,16,.06),0 4px 12px -6px rgba(36,26,16,.35)}
.mf-seg .mf-tick{display:none}
.mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mf-grid .mf-o{display:flex;align-items:center;gap:9px;height:52px;padding:0 12px;border-radius:14px;border:0;background:#fff;
  box-shadow:inset 0 0 0 1px var(--m-line2);font:600 14.5px var(--sans,inherit);color:var(--ink);text-align:left}
.mf-grid .mf-o img,.mf-grid .mf-o .lg{width:24px !important;height:24px !important;border-radius:6px}
.mf-grid .mf-o.on{box-shadow:inset 0 0 0 2px var(--ink)}
.mf-grid .mf-tick{margin-left:auto;font-style:normal;font-weight:700}
.mf-list{display:flex;flex-direction:column;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--m-line2);overflow:hidden}
.mf-list .mf-o{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 16px;border:0;background:none;text-align:left;
  font:500 15.5px var(--sans,inherit);color:var(--ink);border-bottom:1px solid var(--m-line)}
.mf-list .mf-o:last-child{border-bottom:0}
.mf-list .mf-o small{margin-left:auto;font-size:13px;color:var(--body);font-variant-numeric:tabular-nums}
.mf-list .mf-o.on{font-weight:650}
.mf-list .mf-tick{font-style:normal;font-weight:700;color:var(--accent);margin-left:10px}
.mf-list .mf-o.on small{margin-left:auto}
.mm-list{display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.mm-row{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 14px;border:0;border-radius:18px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--m-line2);text-align:left;color:var(--ink)}
.mm-row:active{transform:scale(.985)}
.mm-row.on{box-shadow:inset 0 0 0 2px var(--ink)}
.mm-i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--m-soft);flex:none}
.mm-i svg{width:22px;height:22px}
.mm-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mm-t b{font:650 17px/1.2 var(--display);letter-spacing:-.01em}
.mm-t small{font-size:13.5px;color:var(--body)}
.mm-a{width:20px;height:20px;color:rgba(36,26,16,.35)}

/* ── the report's drill-downs become full-height sheets ───────────────── */
body.m-app #mask{background:rgba(24,16,8,.38) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  align-items:flex-end !important;padding:0 !important;z-index:90}
body.m-app #mask .modal{width:100% !important;max-width:none !important;height:calc(100% - 22px - env(safe-area-inset-top,0px)) !important;max-height:none !important;
  margin:0 !important;border-radius:26px 26px 0 0 !important;animation:m-sheet .34s var(--m-ease) both;background:#fbf8f2 !important;
  overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transition:transform .25s var(--m-ease)}
@keyframes m-sheet{from{transform:translateY(100%)}to{transform:none}}
body.m-app #mask .modal::before{content:"";display:block;position:sticky;top:0;z-index:5;width:40px;height:5px;border-radius:3px;
  background:rgba(36,26,16,.18);margin:9px auto -14px}
body.m-app #mask .modal-head{position:sticky;top:0;z-index:4;padding:20px var(--m-gut) 12px !important;background:rgba(251,248,242,.92) !important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--m-line) !important}
body.m-app #mask .modal-head .crumb{display:none !important}
body.m-app #mask .modal-head h3{font:700 22px/1.15 var(--display) !important;letter-spacing:-.025em !important;margin:0 !important}
/* the head never changes size on a phone: a head that shrinks moves the text
   under the reader's thumb. The title is held to two lines instead. */
body.m-app #mask .modal-head h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.m-app #mask .modal.scrolled .modal-head{padding:20px var(--m-gut) 12px !important}
body.m-app #mask .modal.scrolled .modal-head h3{font-size:22px !important;line-height:1.15 !important}
body.m-app #mask .modal.scrolled .modal-head .msub{opacity:1 !important;max-height:none !important;margin-top:4px !important}
body.m-app #mask .modal.scrolled .xbtn{width:36px !important;height:36px !important}
body.m-app #mask .modal-head .msub{font-size:13.5px !important;margin-top:4px}
body.m-app #mask .xbtn{width:36px !important;height:36px !important;border-radius:50% !important;background:rgba(36,26,16,.07) !important;font-size:20px !important;flex:none}
body.m-app #mask .modal-body{padding:14px var(--m-gut) calc(28px + env(safe-area-inset-bottom,0px)) !important}

}

/* ══ Shared card language on the phone ══════════════════════════════════ */
@media (max-width:760px){
body.m-app .bx,body.m-app .card,body.m-app .panel,body.m-app .tile,body.m-app .pfcard,body.m-app .clpanel,body.m-app .bscard{
  border-radius:var(--m-r) !important}
body.m-app .bento{display:flex !important;flex-direction:column;gap:12px !important}
body.m-app .bento > .bx{margin:0 !important}

/* ══ HOME ══════════════════════════════════════════════════════════════ */
body.m-app #overview .ov{padding:18px 16px 16px !important}
body.m-app #overview .ov-head{display:none !important}
body.m-app #overview .ov-grid{display:flex !important;flex-direction:column;gap:0 !important;border:0 !important}
body.m-app #overview .ov-cell{width:auto !important;padding:14px 2px !important;border:0 !important;border-bottom:1px solid var(--m-line) !important;min-height:0 !important}
body.m-app #overview .ov-cell:first-child{padding-top:2px !important}
body.m-app #overview .ov-labrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
body.m-app #overview .ov-lab{font:650 15px/1.2 var(--sans,inherit) !important;color:var(--ink) !important;letter-spacing:0 !important;text-transform:none !important}
body.m-app #overview .ov-go{font-size:14px !important;font-weight:600;color:var(--accent);padding:6px 0}
body.m-app #overview .ov-big{font-size:56px !important;line-height:1 !important;letter-spacing:-.045em !important;margin:2px 0 6px !important}
body.m-app #overview .ov-big small{font-size:24px !important}
body.m-app #overview .ov-sub{font-size:14.5px !important;line-height:1.45 !important;color:var(--body) !important}
body.m-app #overview .ov-facts{margin-top:10px}
body.m-app #overview .ov-facts span{font-size:14px !important}
body.m-app #overview #t-cite{display:flex !important;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
body.m-app #overview #t-cite .ov-labrow{margin:0}
body.m-app #overview #t-cite .ov-big2{font-size:30px !important;margin:0 !important}
body.m-app #overview #t-cite .ov-sub{flex:1 0 100%;margin:0 !important}

/* the run-by-run line: shorter, the latest-run card under it */
body.m-app #overview .hcard-trend{margin:16px 0 4px !important;padding:0 !important}
body.m-app #overview .tr-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
body.m-app #overview .tr-head .eyebrow{font:650 15px var(--sans,inherit) !important;color:var(--ink) !important;letter-spacing:0 !important;text-transform:none !important}
body.m-app #overview .tr-meta{font-size:12.5px !important}
body.m-app #overview .tr-plot{height:auto !important}
body.m-app #overview .tr-plot svg{height:96px !important}
body.m-app #overview .snapcard{position:static !important;margin:8px 0 0 !important;width:auto !important;display:flex !important;align-items:baseline;gap:10px;
  padding:10px 12px !important;border-radius:14px !important;box-shadow:inset 0 0 0 1px var(--m-line2) !important;background:#fff !important}

/* engines: a list, one row each */
body.m-app #overview .ov-eng{display:flex !important;flex-direction:column;gap:0 !important;margin-top:14px !important;
  border-top:1px solid var(--m-line);padding:0 !important}
body.m-app #overview .ov-e{display:grid !important;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  width:100% !important;min-height:64px;padding:10px 2px !important;border:0 !important;border-bottom:1px solid var(--m-line) !important;
  background:none !important;border-radius:0 !important;text-align:left;box-shadow:none !important}
body.m-app #overview .ov-e:last-child{border-bottom:0 !important}
body.m-app #overview .ov-en{grid-row:1/3;grid-column:1/3;display:flex !important;flex-direction:row !important;align-items:center;gap:12px;width:auto !important;height:auto !important}
body.m-app #overview .ov-en img,body.m-app #overview .ov-en .lg{width:32px !important;height:32px !important;border-radius:9px}
body.m-app #overview .ov-en b,body.m-app #overview .ov-en span{font-size:16px !important;font-weight:650;white-space:nowrap}
body.m-app #overview .ov-ev{grid-column:3;grid-row:1;font-size:24px !important;text-align:right;margin:0 !important}
body.m-app #overview .ov-et{display:none !important}
body.m-app #overview .ov-ef{grid-column:3;grid-row:2;text-align:right;font-size:12.5px !important;width:auto !important;height:auto !important;color:var(--body)}
body.m-app #overview .ov-ef > *{display:none}
body.m-app #overview .ov-ef > *:first-child{display:block}

/* brands named: big marks, tap-sized rows */
body.m-app #overview .tile.field{padding:18px 16px 12px !important}
body.m-app #overview .t-head .eyebrow{font:650 17px/1.2 var(--display) !important;letter-spacing:-.01em !important;text-transform:none !important;color:var(--ink) !important}
body.m-app #overview .fd-top{display:flex !important;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 10px}
body.m-app #overview .fd-many{font-size:26px !important;line-height:1.1 !important}
body.m-app #overview .fd-lab{font-size:14px !important;text-transform:none !important;letter-spacing:0 !important}
body.m-app #overview .sov-ring{width:96px !important;height:96px !important;flex:none}
body.m-app #overview .sov-ring svg{width:96px !important;height:96px !important}
body.m-app #overview .fd-list li{min-height:48px;grid-template-columns:18px 30px minmax(0,1fr) 54px 50px !important;gap:10px !important;border-bottom:1px solid var(--m-line)}
body.m-app #overview .fd-list li:last-child{border-bottom:0}
body.m-app #overview .fd-logo{width:30px !important;height:30px !important;border-radius:8px}
body.m-app #overview .fd-nm{font-size:15px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.m-app #overview .fd-v{font-size:15px !important;text-align:right}
body.m-app #overview .fd-n{font-size:13px !important;color:var(--body)}
}

/* ══ BRAND SEARCHES ═════════════════════════════════════════════════════ */
@media (max-width:760px){
/* the four figures: one card, two by two */
body.m-app .pfstats{display:grid !important;grid-template-columns:1fr 1fr !important;background:var(--m-card);border:0 !important;
  border-radius:var(--m-r);box-shadow:var(--m-shadow);margin:0 0 12px !important;overflow:hidden}
body.m-app .pfst{padding:14px 16px !important;border:0 !important;border-left:0 !important;border-top:0 !important}
body.m-app .pfst:nth-child(2n){border-left:1px solid var(--m-line) !important}
body.m-app .pfst:nth-child(n+3){border-top:1px solid var(--m-line) !important}
body.m-app .pfst:first-child{padding-left:16px !important}
body.m-app .pfst>span{font-size:13px !important;line-height:1.3}
body.m-app .pfst>b{font-size:30px !important;margin:4px 0 2px}
body.m-app .pfst>em{font-size:12.5px !important;line-height:1.35}

body.m-app #brand .bscard{padding:16px 14px !important;background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important;margin:0 0 12px !important}
body.m-app #brand .bsch .nxttl{font:650 18px/1.2 var(--display) !important;letter-spacing:-.015em}
body.m-app #brand .bsgrid{display:flex !important;flex-direction:column;gap:10px !important;margin-top:10px}
body.m-app #brand .bsgrid .bsgr{border-radius:16px !important;background:#fff !important;box-shadow:inset 0 0 0 1px var(--m-line2) !important;
  padding:14px 14px 10px !important;gap:0 !important;border:0 !important}
body.m-app #brand .bsgrid .bsq{font:650 16px/1.35 var(--sans,inherit) !important;color:var(--ink);margin-bottom:6px}
body.m-app #brand .bsgrid .bscell{display:grid !important;grid-template-columns:24px 1fr auto;align-items:center;column-gap:12px;
  padding:10px 0 !important;border:0 !important;border-top:1px solid var(--m-line) !important;background:none !important;border-radius:0 !important;box-shadow:none !important}
body.m-app #brand .bsgrid .bscell .bsc-k{white-space:nowrap;width:auto !important;font-size:14px !important}
body.m-app #brand .bsgrid .bscell .bsc-k:last-child{justify-self:end;color:var(--body)}
body.m-app #brand .bsgrid .bscell.empty .bsc-l{grid-column:2/4;color:var(--body);font-size:14px !important;text-align:left !important}
body.m-app #brand .bsgrid .bsopen{align-self:stretch !important;justify-content:center;margin-top:6px;height:40px;border-radius:12px;
  background:var(--m-soft);font-size:14px !important;font-weight:650;color:var(--ink)}
body.m-app #brand .bsfx2{gap:0 !important}
body.m-app #brand .bsg2-h{font-size:13px !important;padding-top:16px}
body.m-app #brand .bsf2{min-height:52px}
body.m-app #brand .bsf2-n{font-size:15.5px !important}
}

/* ══ SOURCES ════════════════════════════════════════════════════════════ */
@media (max-width:760px){
/* the rail: the same two-by-two card as every screen */
body.m-app .srail{display:grid !important;grid-template-columns:1fr 1fr !important;gap:0 !important;padding:0 !important;margin:0 0 12px !important;
  background:var(--m-card) !important;border:0 !important;border-radius:var(--m-r) !important;box-shadow:var(--m-shadow) !important;overflow:hidden}
body.m-app .srail > div{padding:14px 16px !important;border:0 !important;min-width:0}
body.m-app .srail > div:nth-child(2n){border-left:1px solid var(--m-line) !important}
body.m-app .srail > div:nth-child(n+3){border-top:1px solid var(--m-line) !important}
body.m-app .srail .k,body.m-app .srail span:first-child{font-size:12.5px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600 !important;color:var(--body) !important}
body.m-app .srail b,body.m-app .srail .v{font-size:19px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}

/* the network: a near-square canvas, one compact key */
body.m-app #src-net .tmap{border-radius:var(--m-r) !important;padding:14px 12px 12px !important}
body.m-app #src-net .tmfocus.idle{display:none !important}
body.m-app #src-net .tmbody{height:330px !important}
body.m-app #src-net .tmapf{gap:6px !important;padding-top:8px !important}
body.m-app #src-net .tmapf .smgrp:nth-child(n+2){display:none !important}
body.m-app #src-net .tmapf .smgl{display:none !important}
body.m-app #src-net .tmctl button{width:34px !important;height:34px !important;border-radius:10px !important}
body.m-app #src-net .tmcrumb{font-size:15px !important}

/* the citation map keeps its shape, with room to read */
body.m-app #src-tree > *{border-radius:var(--m-r) !important}

/* the explorer: controls on one swipeable line, breakdowns side by side */
body.m-app #sources .sx{padding:16px 14px !important}
body.m-app #sources .sxh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
body.m-app #sources .sxh .nxttl{font:650 18px/1.2 var(--display) !important}
body.m-app #sources .sxbar{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;gap:8px !important;margin:12px -14px 4px !important;
  padding:0 14px 4px !important;scrollbar-width:none;scroll-snap-type:x proximity}
body.m-app #sources .sxbar::-webkit-scrollbar{display:none}
body.m-app #sources .sxbar > *{flex:none !important;width:auto !important;scroll-snap-align:start}
body.m-app #sources .sxbar > *:first-child{flex:0 0 100% !important}
body.m-app #sources .sxmixes{display:flex !important;overflow-x:auto;gap:10px !important;margin:6px -14px 8px !important;padding:2px 14px 6px !important;
  scroll-snap-type:x mandatory;scrollbar-width:none}
body.m-app #sources .sxmixes::-webkit-scrollbar{display:none}
body.m-app #sources .sxmixes > *{flex:0 0 86% !important;scroll-snap-align:start;margin:0 !important}
body.m-app #sources .sxd{min-height:64px}
}
@media (max-width:760px){
body.m-app #sources .sxbar{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;overflow:visible !important;margin:12px 0 6px !important;padding:0 !important}
body.m-app #sources .sxbar > *{width:auto !important;min-width:0}
body.m-app #sources .sxbar > .sxsearch,body.m-app #sources .sxbar > .sxcount{grid-column:1/-1}
body.m-app #sources .sxsel{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:1px !important;
  padding:8px 12px !important;border-radius:14px !important;background:#fff !important;box-shadow:inset 0 0 0 1px var(--m-line2) !important;min-height:54px;position:relative}
body.m-app #sources .sxsel span{font-size:11.5px !important;font-weight:650;color:var(--body);text-transform:none !important;letter-spacing:0 !important}
body.m-app #sources .sxsel select{width:100% !important;font:600 15px var(--sans,inherit) !important;color:var(--ink);border:0 !important;background:none !important;padding:0 !important;
  -webkit-appearance:none;appearance:none;min-height:24px}
body.m-app #sources .sxsel::after{content:"";position:absolute;right:12px;bottom:15px;width:7px;height:7px;border-right:1.8px solid var(--body);border-bottom:1.8px solid var(--body);transform:rotate(45deg)}
body.m-app #sources .sxsearch{height:46px;border-radius:14px !important}
body.m-app #sources .sxsearch input{font-size:16px !important}
body.m-app #sources .sxcount{font-size:13px !important;color:var(--body)}
body.m-app #src-net .tmpanel{display:none !important}
}

/* ══ QUESTIONS ══════════════════════════════════════════════════════════ */
@media (max-width:760px){
body.m-app #rail-prompts,body.m-app #prompts .srail{grid-template-columns:repeat(3,1fr) !important}
body.m-app #prompts .srail > div:nth-child(n+3){border-top:0 !important}
body.m-app #prompts .srail > div + div{border-left:1px solid var(--m-line) !important}
body.m-app #prompts .srail > div{padding:14px 12px !important}
body.m-app #prompts .expbar{display:flex !important;flex-direction:column;gap:10px !important;padding:12px !important;border-radius:var(--m-r) !important;
  background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important;margin:0 0 12px !important}
body.m-app #prompts #q{height:46px !important;border-radius:14px !important;font-size:16px !important;padding:0 14px !important;width:100% !important}
body.m-app #prompts #exp-sort{display:flex !important;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap !important;width:100%;padding:3px !important;border-radius:13px !important}
body.m-app #prompts #exp-sort::-webkit-scrollbar{display:none}
body.m-app #prompts #exp-sort button{flex:none;height:36px !important;padding:0 14px !important;font-size:14px !important;border-radius:10px !important;white-space:nowrap}
body.m-app #prompts #expcount{font:500 13px var(--sans,inherit) !important;color:var(--body) !important;letter-spacing:0 !important}
body.m-app #prompts .bars,body.m-app #prompts #exp-list{background:none !important;box-shadow:none !important;padding:0 !important;border:0 !important}
body.m-app #prompts #exp-head{display:none !important}
body.m-app #prompts #exp-list{display:flex !important;flex-direction:column;gap:8px}
body.m-app #prompts #exp-list .pr{position:relative;padding:14px 40px 12px 14px !important;border-radius:16px !important;background:var(--m-card) !important;
  box-shadow:var(--m-shadow) !important;border:0 !important}
body.m-app #prompts #exp-list .pr:active{transform:scale(.99)}
body.m-app #prompts #exp-list .pr::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-right:2px solid rgba(36,26,16,.3);border-top:2px solid rgba(36,26,16,.3);transform:rotate(45deg)}
body.m-app #prompts #exp-list .prow{gap:8px 10px !important;padding:0 !important;border:0 !important}
body.m-app #prompts #exp-list .pt{font:600 16px/1.35 var(--sans,inherit) !important;color:var(--ink)}
body.m-app #prompts #exp-list .engs{gap:6px !important}
body.m-app #prompts #exp-list .engcell img,body.m-app #prompts #exp-list .engcell .lg{width:22px !important;height:22px !important}
body.m-app #prompts .mmore,body.m-app #prompts .showmore{height:48px;border-radius:14px !important;font-size:15px !important;font-weight:650 !important;
  background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important;width:100%;margin-top:4px}
}

/* ══ QUESTION SHEETS ════════════════════════════════════════════════════ */
@media (max-width:760px){
body.m-app #mask .modal{max-height:calc(100% - 14px) !important;height:calc(100% - 14px) !important}
body.m-app #mask .dd-tabs{display:none !important}
body.m-app #mask .qeng.tap{cursor:pointer;transition:box-shadow .2s,transform .15s}
body.m-app #mask .qeng.tap:active{transform:scale(.985)}
body.m-app #mask .qeng.tap.on{box-shadow:inset 0 0 0 2px var(--ink);border-color:transparent}
body.m-app #mask .qeng.tap .qeng-h::after{content:"Answer";margin-left:auto;font-size:12.5px;font-weight:650;color:var(--body)}
body.m-app #mask .qeng.tap.on .qeng-h::after{content:"Showing";color:var(--ink)}
body.m-app #mask .anspane,body.m-app #mask .panel2,body.m-app #mask .bsans,body.m-app #mask .bsa-box,body.m-app #mask .bqfacts{border-radius:18px !important}
body.m-app #mask .ansbody,body.m-app #mask .bsans{font-size:16px !important;line-height:1.6 !important}
body.m-app #mask .ansbody p,body.m-app #mask .ansbody li{font-size:16px !important;line-height:1.6 !important}
body.m-app #mask .mocktbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
body.m-app #mask .mocktbl table{min-width:520px;font-size:14px}
body.m-app #mask .grid2{display:flex !important;flex-direction:column;gap:12px}
body.m-app #mask .qtbl .t td,body.m-app #mask .qtbl .t th{font-size:14.5px !important;padding:10px 8px !important}
body.m-app #mask .bqtabs{display:flex !important;flex-direction:column;gap:8px}
body.m-app #mask .bqtab{width:100% !important;padding:12px 14px !important;border-radius:16px !important}
body.m-app #mask .bsa-cols{display:flex !important;flex-direction:column;gap:12px}
}

/* ══ TOPICS ═════════════════════════════════════════════════════════════ */
@media (max-width:760px){
body.m-app #topics .trank{border-radius:var(--m-r) !important;overflow:hidden;background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important}
body.m-app #topics .trow .trmain{display:grid !important;grid-template-columns:14px auto 1fr auto !important;
  grid-template-areas:"c n n v" ". b p p" ". s s s" !important;row-gap:8px !important;column-gap:10px !important;padding:16px 14px !important;align-items:center}
body.m-app #topics .trmain .chev{grid-area:c !important}
body.m-app #topics .trmain .trname{grid-area:n !important;font:650 17px/1.25 var(--display) !important;letter-spacing:-.01em;white-space:normal}
body.m-app #topics .trmain .trbadge{grid-area:b !important;justify-self:start}
body.m-app #topics .trmain .trvis{grid-area:v !important;justify-self:end;font-size:18px !important}
body.m-app #topics .trmain .trvis .trbar,body.m-app #topics .trmain .trvis i{display:none !important}
body.m-app #topics .trmain .trp{grid-area:p !important;display:block !important;justify-self:start;font-size:13.5px !important;color:var(--body)}
body.m-app #topics .trmain .trp::after{content:" questions"}
body.m-app #topics .trmain .trslots{grid-area:s !important;display:flex !important;gap:6px !important;overflow:hidden}
body.m-app #topics .trmain .trslots .slot{width:32px !important;height:32px !important}
body.m-app #topics .trmain .trslots .slot:nth-child(n+8){display:none}
body.m-app #topics .trow{border-bottom:1px solid var(--m-line) !important}
body.m-app #topics .trow:last-child{border-bottom:0 !important}
}

/* ══ RIVALS ═════════════════════════════════════════════════════════════ */
@media (max-width:760px){
body.m-app #h2h .shead2,body.m-app #h2h #rivalpick > .eyebrow,body.m-app #h2h .rvtop-h{font-size:13px !important}
/* the rival picker: swipeable cards with their logo, snap to each */
body.m-app #h2h #rivalpick .rvs,body.m-app #h2h #rivalpick > div:last-child{scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--m-gut) * -1) !important;padding:2px var(--m-gut) 8px !important}
body.m-app #h2h #rivalpick [class*="rv"]{scroll-snap-align:start}

body.m-app #h2h .h2matchup{padding:18px 14px 8px !important;border-radius:var(--m-r) !important;background:var(--m-card) !important;box-shadow:var(--m-shadow) !important;border:0 !important}
body.m-app #h2h .h2head{display:grid !important;grid-template-columns:1fr 1fr !important;grid-template-areas:"gap gap" "me them" !important;gap:12px 10px !important;margin-bottom:14px !important}
body.m-app #h2h .h2gap{grid-area:gap;text-align:center;display:flex;flex-direction:column;align-items:center}
body.m-app #h2h .h2gap b,body.m-app #h2h .h2gap > :first-child{font-size:44px !important;line-height:1 !important}
body.m-app #h2h .h2gap span,body.m-app #h2h .h2gap small,body.m-app #h2h .h2gap em{font-size:12.5px !important;letter-spacing:.02em}
body.m-app #h2h .h2ent{min-width:0;display:flex !important;align-items:center;gap:8px;padding:10px;border-radius:14px;background:var(--m-soft)}
body.m-app #h2h .h2ent.me{grid-area:me}
body.m-app #h2h .h2ent.them{grid-area:them;flex-direction:row-reverse;text-align:right}
body.m-app #h2h .h2ent img,body.m-app #h2h .h2ent .h2logo{width:32px !important;height:32px !important;flex:none}
body.m-app #h2h .h2ent b,body.m-app #h2h .h2ent strong,body.m-app #h2h .h2ent > div > :first-child{font-size:15px !important;line-height:1.2;white-space:normal}
body.m-app #h2h .h2ent .dom,body.m-app #h2h .h2ent small,body.m-app #h2h .h2ent span:last-child{font-size:12px !important}

/* figures down, you and the rival across: the markup is already in that order */
body.m-app #h2h .h2stats{display:grid !important;grid-template-columns:minmax(0,1fr) 92px 92px !important;grid-template-rows:repeat(5,auto) !important;
  grid-auto-flow:column !important;gap:0 !important;border-top:1px solid var(--m-line)}
body.m-app #h2h .h2stats > *{padding:12px 6px !important;border:0 !important;border-bottom:1px solid var(--m-line) !important;min-width:0;background:none !important}
body.m-app #h2h .h2stats > *:nth-child(5n){border-bottom:0 !important}
body.m-app #h2h .h2sh{font:600 14px/1.3 var(--sans,inherit) !important;color:var(--ink) !important;text-transform:none !important;letter-spacing:0 !important;padding-left:2px !important}
body.m-app #h2h .h2sh em{display:block;font-size:12px !important;font-style:normal;color:var(--body);font-weight:500}
body.m-app #h2h .h2sn{display:flex !important;align-items:center;justify-content:flex-end;gap:6px;font-size:12.5px !important;font-weight:650;color:var(--body)}
body.m-app #h2h .h2sn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62px}
body.m-app #h2h .h2sv{text-align:right;font-size:18px !important;font-weight:650;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
body.m-app #h2h .h2sv .h2d,body.m-app #h2h .h2sv em{font-size:11.5px !important}
body.m-app #h2h .h2sv .na{font-size:12.5px !important;font-weight:500}
body.m-app #h2h .h2sv.win.them,body.m-app #h2h .h2sv.win.me{background:color-mix(in srgb,var(--accent) 6%,transparent) !important}
}
@media (max-width:760px){ body.m-app #h2h .h2stats > *{grid-column:auto !important;grid-row:auto !important;order:0 !important} }
@media (max-width:760px){ body.m-app #h2h .h2sn span{display:none !important} body.m-app #h2h .h2sn img,body.m-app #h2h .h2sn .lg,body.m-app #h2h .h2sn > *:first-child{width:26px !important;height:26px !important} }

/* ══ SOCIAL & PRESS ═════════════════════════════════════════════════════ */
@media (max-width:760px){
/* the logo rail stays under the top bar, so switching platform is always one tap */
body.m-app #pf-body .pfrail{position:sticky !important;top:var(--m-top);z-index:20;margin:0 calc(var(--m-gut) * -1) 10px !important;
  padding:8px var(--m-gut) 10px !important;background:rgba(245,239,228,.86) !important;-webkit-backdrop-filter:blur(16px) !important;backdrop-filter:blur(16px) !important;
  scroll-snap-type:x proximity}
body.m-app #pf-body .pfl{scroll-snap-align:start;width:60px !important;height:60px !important;flex:0 0 60px !important;border-radius:18px !important}
body.m-app #pf-body .pfl .pflogo,body.m-app #pf-body .pfl .pfl-i{width:40px !important;height:40px !important;border-radius:11px !important}
body.m-app #pf-body .pfl[aria-selected="true"]::after{display:none}
body.m-app #pf-body .pfcard{padding:18px 14px 16px !important;border-radius:var(--m-r) !important}
body.m-app #pf-body .pfname{font-size:28px !important}
/* topics: name and count, bar underneath at full width */
body.m-app #pf-body .pfbox .dsb{display:grid !important;grid-template-columns:1fr auto !important;grid-template-areas:"n c" "t t" !important;row-gap:6px !important;padding:8px 0 !important;min-height:0}
body.m-app #pf-body .pfbox .dsb .dsb-n{grid-area:n;font-size:15px !important}
body.m-app #pf-body .pfbox .dsb > b{grid-area:c;font-size:15px !important}
body.m-app #pf-body .pfbox .dsb .dsb-t{grid-area:t;width:100% !important}
body.m-app #pf-body .pfbox .dsn{min-height:52px}
body.m-app #pf-body .pfbox .dsn-n b{font-size:15px !important}
body.m-app #pf-body .pfmix-key{gap:6px 16px !important}
body.m-app #pf-body .pfmix-key b{font-size:14px !important}
body.m-app #pf-body .pfr>summary{padding:12px 6px !important;min-height:64px}
body.m-app #pf-body .pfr-t b{font-size:15px !important;white-space:normal !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:760px){ body.m-app #mask .bqtab{flex-direction:row !important;flex-wrap:wrap;align-items:center !important;gap:4px 14px !important;padding:10px 12px !important} body.m-app #mask .bqtab .bqt-h{flex:1 0 100%} body.m-app #mask .bqt-l{font-size:13.5px !important} }
@media (max-width:760px){
body.m-app #topics .trow .trmain,body.m-app #topics .trprompt{display:grid !important;grid-template-columns:14px auto 1fr auto !important;
  grid-template-areas:"c n n v" ". p r r" ". s s s" !important;row-gap:8px !important;column-gap:10px !important}
body.m-app #topics .trprompt{grid-template-areas:"n n n v" "s s s s" !important;padding:12px 14px !important}
body.m-app #topics .trprompt .trptext{grid-area:n !important;font-size:14.5px !important}
body.m-app #topics .trprompt .trvis{grid-area:v !important}
body.m-app #topics .trprompt .trp,body.m-app #topics .trprompt .trrank{display:none !important}
body.m-app #topics .trprompt .trslots{grid-area:s !important;display:flex !important}
body.m-app #topics .trmain .trp{justify-self:start !important;text-align:left !important}
body.m-app #topics .trmain .trrank{grid-area:r !important;justify-self:start;font-size:13.5px !important;color:var(--body)}
body.m-app #topics .trmain .trrank::before{content:"Avg. rank ";font-weight:500}
body.m-app #topics .trvis .trtrk{display:none !important}
body.m-app #topics .trvis b{min-width:0}
}
@media (max-width:760px){
body.m-app .pfstats.bs3{grid-template-columns:repeat(3,1fr) !important}
body.m-app .pfstats.bs3 .pfst{border-top:0 !important;padding:14px 10px !important}
body.m-app .pfstats.bs3 .pfst + .pfst{border-left:1px solid var(--m-line) !important}
body.m-app .pfstats.bs3 .pfst>b{font-size:24px !important}
body.m-app .pfstats.pfstats4 .pfst>em{display:none}

  /* Brand searches: knowledge-base check */
  body.m-app #brand .kbe-r{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  body.m-app #brand .kbe-e{grid-column:1/-1}
  body.m-app #brand .kbc-r{grid-template-columns:1fr;gap:8px}
  body.m-app #brand .fx2n small{font-size:12.5px}
}

/* ══ AGENT PROMOTER SCORE, on the phone ════════════════════════════════════
   Desktop is untouched: everything here is inside the ≤760px gate the rest of
   this file sits in. Three things have to change and nothing else does.

   1. THE FOUR NODE CARDS GO TWO BY TWO. Four across at 375px is an 80px card
      holding a 34px figure and a two-line label, which is a figure nobody can
      read beside a word nobody can read.
   2. THE BARCODE TURNS ITS LABELS ABOVE IT. The desktop row is a 180px engine
      column beside the bars; at 375px that column eats half the width, so the
      engine name sits over its own bar instead, and the bar keeps the width.
   3. THE LOSS ROWS STACK. The desktop grid is band, question, engine, arrow in
      four columns; on the phone the band and the engine ride together on one
      line above the question. */
@media (max-width:760px){
  .apsnodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
  .apsnode{padding:13px;gap:7px}
  .apsnode-k{font-size:11.5px}
  .apsnode-f{min-height:34px}
  .apsnode-f b{font-size:29px}
  .apsnode-f b.thin{font-size:23px}
  .apscomp{font-size:15px;gap:3px 9px}
  .apscomp b{font-size:23px}
  .apscomp span{flex-basis:100%;font-size:12px}

  .apsmb{grid-template-columns:minmax(0,1fr) 42px;grid-template-areas:"e n" "b b";gap:5px 10px}
  .apsmb-e{grid-area:e}
  .apsmb-bar{grid-area:b;height:18px}
  .apsmb-n{grid-area:n}
  .apsfp-k{gap:6px 14px;font-size:13.5px}
  .apsbd{grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"k n" "t t";gap:3px 10px}
  .apsbd-k{grid-area:k}
  .apsbd-t{grid-area:t}
  .apsbd-n{grid-area:n}
  .apsbd-p{display:none}
  .apsex > .apssheet,.apsex > p{padding-left:0}

  .apsloss-r{grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:"v a" "b b";gap:8px 10px;padding:14px 2px}
  .apsloss-v{grid-area:v}
  .apsloss-b{grid-area:b}
  .apsloss-e{display:none}
  .apsloss-r > svg{grid-area:a;align-self:center}
  .apsloss-b b{font-size:14.5px}
  .apsloss-b q{font-size:13.5px}

  .apsgap p{font-size:14px}
  .apssheet-r{grid-template-columns:22px minmax(0,1fr);gap:10px}
  .apssheet-r > svg{display:none}
}

/* the score on one question, at 375px: four numbers go two by two, and the
   rail's marks keep their colour spine */
@media (max-width:760px){
  .apsq4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 2px}
  .apsq4-c{padding:10px 12px 9px}
  .apsq4-c b{font-size:24px}
  .apsq4-c.off b{font-size:19px}
  .apsq4-k{font-size:10.5px}
  .ansbody .apsmark{padding-left:10px;margin-left:-10px}
}

/* ══ THE PHONE PASS, 2026-10-21 ═════════════════════════════════════════════
   The phone rules above were written for an older desktop markup; the
   desktop pages have since been rebuilt (the source explorer, the question
   rows, Platforms' page rows, Google search) and the phone was showing
   desktop grids squeezed into 343px. Everything below is written against the
   markup as it is now, one screen at a time. Checked at 320, 375, 390, 430. */

/* ── every screen: room for the tab bar, so the last thing on a screen
   ("Show 12 more", the Next card) can scroll clear of it ───────────────── */
body.m-app .wrap{padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important}
/* a screen no filter moves offers no Filters button */
body.m-app.m-nofilter #mb-filter{display:none !important}
/* inputs at 16px, so iOS does not zoom the page when one is tapped */
body.m-app input[type="search"], body.m-app input[type="text"], body.m-app select{font-size:16px !important}

/* ── Home ──────────────────────────────────────────────────────────────── */
/* the lead figure is the card's first line, not a box inside the card */
body.m-app #overview .ov-cell.ov-link{background:none !important;box-shadow:none !important;border:0 !important;
  border-bottom:1px solid var(--m-line) !important;border-radius:0 !important;margin:0 !important;padding:2px 2px 14px !important;width:auto !important}
body.m-app #overview #t-name:empty{display:none !important}
/* each engine is one row: logo and name, the share on the right, its
   citations under it. The half-gauge drew a 250px card around one number. */
body.m-app #overview .ov-e{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;grid-template-rows:auto auto auto !important;
  column-gap:12px !important;row-gap:2px !important;align-items:center !important;padding:14px 2px !important;min-height:0 !important;height:auto !important}
body.m-app #overview .ov-e .ov-en{grid-column:1 !important;grid-row:1 !important}
body.m-app #overview .ov-e .ov-gauge{grid-column:2 !important;grid-row:1 !important;display:block !important;width:auto !important;height:auto !important;position:static !important}
body.m-app #overview .ov-e .ov-gauge svg{display:none !important}
body.m-app #overview .ov-e .ov-gauge .ov-ev{position:static !important;font-size:26px !important;font-weight:600;line-height:1 !important;transform:none !important}
body.m-app #overview .ov-e .ov-el{grid-column:1 / 3 !important;grid-row:2 !important;font-size:13px !important;color:var(--body) !important;text-align:left !important}
body.m-app #overview .ov-e .ov-ec{grid-column:1 / 3 !important;grid-row:3 !important;display:flex !important;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:6px !important;padding:0 !important;border:0 !important}
body.m-app #overview .ov-e .ov-ec-k{font-size:13px !important;flex:1 1 auto}
body.m-app #overview .ov-e .ov-ec b{font-size:15px !important}
body.m-app #overview .ov-e .ov-ec-s{flex:1 0 100%;font-size:12.5px !important;color:var(--faint)}
/* brands named: the name takes the width the little bar was using */
body.m-app #overview .fd-list li{grid-template-columns:20px 30px minmax(0,1fr) auto !important}
body.m-app #overview .fd-list li .fd-bar{display:none !important}

/* ── Sources ───────────────────────────────────────────────────────────── */
/* the three figures: two across, the most cited domain on its own line */
body.m-app #sources .srail{display:grid !important;grid-template-columns:1fr 1fr !important}
body.m-app #sources .srail > div:nth-child(3){grid-column:1 / 3 !important;border-left:0 !important;border-top:1px solid var(--m-line) !important}
body.m-app #sources .srail > div:nth-child(3) b{display:flex !important;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
body.m-app #sources .srail > div:nth-child(3) small{white-space:normal !important;position:static !important}
/* one card, not three boxes inside each other */
body.m-app #sources #source-bars{padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important}
body.m-app #sources .cols > div{padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important}
body.m-app #sources .sx{padding:16px 14px !important;margin:0 !important}
body.m-app #sources .sxr{padding:12px 12px 6px !important}
body.m-app #sources .sxr-r{grid-template-columns:minmax(0,1fr) 72px auto !important;gap:10px !important}
body.m-app #sources .sxr-r > *:first-child{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.25}
/* a domain row is two lines: the domain and its share of answers, then the
   engines that read it and its citations */
body.m-app #sources .sxd2{display:grid !important;grid-template-columns:24px minmax(0,1fr) auto 18px !important;
  grid-template-areas:"f n v x" "f e c x" !important;column-gap:10px !important;row-gap:6px !important;align-items:center !important;
  padding:12px 4px !important;height:auto !important;min-height:0 !important}
body.m-app #sources .sxd2 > .sxk, body.m-app #sources .sxd2 > .sxty{display:none !important}
body.m-app #sources .sxd2 > .sxfav{grid-area:f !important;align-self:start;margin-top:2px}
body.m-app #sources .sxd2 > .sxdn{grid-area:n !important;min-width:0 !important;width:auto !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px !important;font-weight:600}
body.m-app #sources .sxd2 > span.c:not(.sxn){grid-area:e !important;justify-self:start;width:auto !important}
body.m-app #sources .sxd2 > span.c:not(.sxn) + .sxn{grid-area:v !important;display:block !important;justify-self:end;width:auto !important}
body.m-app #sources .sxd2 > .sxn + .sxn{grid-area:c !important;display:block !important;justify-self:end;width:auto !important;color:var(--body)}
body.m-app #sources .sxd2 > span.c:not(.sxn) + .sxn b::after{content:" of answers";font-weight:400;font-size:12px;color:var(--faint)}
body.m-app #sources .sxd2 > .sxn + .sxn b::after{content:" citations";font-weight:400;font-size:12px;color:var(--faint)}
body.m-app #sources .sxd2 > svg{grid-area:x !important;display:block !important;width:16px;height:16px;color:var(--faint)}

/* ── Questions ─────────────────────────────────────────────────────────── */
body.m-app #prompts .expbar{display:flex !important;flex-direction:column;gap:10px !important;padding:12px !important}
body.m-app #prompts #q{height:44px !important;padding:0 14px !important;border-radius:12px !important;width:100% !important;box-sizing:border-box}
/* the sort is a row you can swipe: four options do not fit 343px at a readable size */
body.m-app #prompts #exp-sort{display:flex !important;overflow-x:auto;scrollbar-width:none;max-width:100%;scroll-snap-type:x proximity}
body.m-app #prompts #exp-sort::-webkit-scrollbar{display:none}
body.m-app #prompts #exp-sort button{flex:none !important;scroll-snap-align:start;min-height:40px}
/* a question wraps; its engines sit under it */
body.m-app #prompts .prow{display:grid !important;grid-template-columns:minmax(0,1fr) !important;row-gap:10px !important}
body.m-app #prompts .prow > .pt{width:auto !important;min-width:0 !important;white-space:normal !important;overflow:visible !important;
  display:block !important;font-size:15.5px !important;line-height:1.35 !important;padding-right:22px}
body.m-app #prompts .prow > .ptype, body.m-app #prompts .prow > span:not(.pt):not(.engs){display:none !important}
body.m-app #prompts .prow > .engs{justify-content:flex-start !important}
body.m-app #prompts .pr{position:relative}

/* ── Platforms ─────────────────────────────────────────────────────────── */
/* a cited page: its title takes the width, the count and buttons stay right */
body.m-app #platforms .pfr2 > summary{grid-template-columns:minmax(0,1fr) auto 32px 20px !important;column-gap:10px !important}
body.m-app #platforms .pfr2-t{min-width:0 !important}
body.m-app #platforms .pfr2-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
body.m-app #platforms .pfr2-lk{width:32px !important;height:32px !important}
body.m-app #platforms .pfsplit-h{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:4px !important}
body.m-app #platforms .pfsplit-h .pfmine{white-space:normal !important;padding:0 !important;background:none !important}

/* ── Google search ─────────────────────────────────────────────────────── */
body.m-app #search .ixpanel{border-radius:16px !important}
body.m-app #search .ixhd{flex-wrap:wrap;gap:8px 12px;padding:14px 16px !important}
body.m-app #search .gs-src{flex:1 0 100%}
body.m-app #search .gs-lead .gs-sw, body.m-app #search .gs-lead .gs-chart{margin-left:16px;margin-right:16px}
body.m-app #search .gs-f{padding:14px 16px 12px}
body.m-app #search .gs-f b{font-size:30px}
body.m-app #search .gs-f1 b{font-size:36px}
body.m-app #search .gs-cols{height:150px}
body.m-app #search .gs-sw button{min-height:40px;padding:0 14px;font-size:14px}
body.m-app #search .gs-sw.sm{display:flex;width:100%}
body.m-app #search .gs-sw.sm button{flex:1 1 0}
body.m-app #search .gs-two, body.m-app #search .gs-two-r{display:flex !important;flex-direction:column;gap:16px}
/* a table row becomes a block: the query or page across the top, its
   figures labelled underneath, four to a line */
body.m-app #search .scroll{overflow:visible !important;margin:0 !important;padding:0 !important}
body.m-app #search table.gs-t, body.m-app #search table.gs-t tbody{display:block !important;width:auto !important;min-width:0 !important;margin:0 !important}
body.m-app #search table.gs-t thead{display:none !important}
body.m-app #search table.gs-t tr{display:grid !important;grid-template-columns:repeat(4, minmax(0,1fr));gap:6px 8px;padding:12px 16px;border-bottom:1px solid var(--line)}
body.m-app #search table.gs-t tr:last-child{border-bottom:0}
body.m-app #search table.gs-t td{display:block !important;padding:0 !important;border:0 !important;text-align:left !important;min-width:0 !important;width:auto !important}
body.m-app #search table.gs-t td.gs-k{grid-column:1 / -1;max-width:none !important;font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;line-height:1.3}
body.m-app #search table.gs-t td.gs-k a{display:block;padding:4px 0;font-weight:600}
body.m-app #search table.gs-t td[data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:400;color:var(--muted);margin-bottom:1px}
body.m-app #search table.gs-t td[data-l]{font-size:15px;font-variant-numeric:tabular-nums}
body.m-app #search table.gs-t td.gs-rkc, body.m-app #search table.gs-t td.gs-e{display:none !important}
body.m-app #search table.gs-t .gs-b{display:inline-block;margin:2px 0 0;font-weight:500}
/* rank bands and countries: the impressions bar takes the rest of the line */
body.m-app #search table.gs-bk tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
body.m-app #search table.gs-bk td.gs-bc{display:block !important}
body.m-app #search table.gs-bk td.gs-bc .gs-bar{display:block;margin:7px 0 4px}
body.m-app #search table.gs-bk td.gs-bc b{display:block;text-align:left !important;min-width:0}
body.m-app #search .gs-more{margin:10px 16px 14px;min-height:44px;width:calc(100% - 32px)}
body.m-app #search .gs-split{margin:0 16px 4px}
body.m-app #search .ixpanel > .gs-bk, body.m-app #search .ixpanel > .gs-split + .t{margin:0 !important}
/* four figures sized to their labels, not four equal columns: "Impressions"
   is the longest word in the row */
body.m-app #search table.gs-t:not(.gs-bk) tr{grid-template-columns:auto auto auto auto !important;justify-content:space-between;column-gap:14px !important}
/* panels in a pair fill the width once they stack */
body.m-app #search .gs-two, body.m-app #search .gs-two-r{align-items:stretch !important}
body.m-app #search .gs-two > .ixpanel{width:auto !important;min-width:0}
/* rank bands and countries are short enough to stay one line a row, under a header */
body.m-app #search table.gs-bk thead{display:block !important}
body.m-app #search table.gs-bk thead tr{border-bottom:1px solid var(--line);padding:8px 16px}
body.m-app #search table.gs-bk th{display:block;padding:0 !important;font-size:12px;font-weight:400;color:var(--muted);text-align:left !important;border:0 !important}
body.m-app #search table.gs-bk tr{grid-template-columns:minmax(0,1.1fr) 52px 44px minmax(0,1.5fr) !important;align-items:center;padding:10px 16px}
body.m-app #search table.gs-bk:has(th:nth-child(3):last-child) tr{grid-template-columns:minmax(0,1.3fr) 44px minmax(0,1.5fr) !important}
body.m-app #search table.gs-bk td.gs-k{grid-column:auto !important;font-size:14.5px;font-weight:500}
body.m-app #search table.gs-bk td[data-l]::before{display:none}
body.m-app #search table.gs-bk td.gs-bc{display:flex !important;align-items:center;gap:8px}
body.m-app #search table.gs-bk td.gs-bc .gs-bar{flex:1;margin:0}
body.m-app #search table.gs-bk td.gs-bc b{min-width:28px;text-align:right !important}
body.m-app #search table.gs-bk thead tr, body.m-app #search table.gs-bk tbody tr{column-gap:10px !important}
/* names wrap to two lines rather than lose their ends ("Halloween Toronto Rav…") */
body.m-app #overview .fd-list li .fd-nm{white-space:normal !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
body.m-app #overview .fd-list li{padding-top:6px;padding-bottom:6px}
/* "163 more": the logo stack is five marks wide, so it gets its own column and the chevron a fifth */
body.m-app #overview .fd-list li.rest{grid-template-columns:20px auto minmax(0,1fr) auto auto !important}
body.m-app #overview .fd-list li.rest .fd-stack{display:inline-flex !important;width:auto !important}
/* a cited page under an opened domain: its title takes the line, its citations under it */
body.m-app #sources .sxpg-h{grid-template-columns:minmax(0,1fr) auto !important;column-gap:10px !important;align-items:start !important}
body.m-app #sources .sxpg-h .sxpg-t{min-width:0 !important;flex-direction:column;align-items:flex-start !important}
body.m-app #sources .sxpg-h .sxpg-t > *{white-space:normal !important;overflow-wrap:anywhere;max-width:100% !important;overflow:visible !important;text-overflow:clip !important}
body.m-app #sources .sxpg-h .sxpg-c::after{content:" citations";font-size:12px;color:var(--faint);font-weight:400}
/* in a column the search box's flex-basis of 0 was its height: 22px */
body.m-app #prompts #q{flex:none !important}
/* the plain pass doubles its section ids for weight; the question rows match it */
body.m-app #prompts#prompts .prow{display:grid !important;grid-template-columns:minmax(0,1fr) !important;row-gap:10px !important}
body.m-app #prompts#prompts .prow > .pt{width:auto !important;min-width:0 !important;max-width:none !important;white-space:normal !important;overflow:visible !important;display:block !important;
  font-size:15.5px !important;line-height:1.35 !important;padding-right:22px}
body.m-app #prompts#prompts .prow > .ptype, body.m-app #prompts#prompts .prow > span:not(.pt):not(.engs){display:none !important}
body.m-app #prompts#prompts .prow > .engs{justify-content:flex-start !important;grid-column:1 !important}
/* the chosen engine's "Showing" pill: the desktop sets ink behind it and the
   phone set ink on the text, which drew a solid dark lozenge */
body.m-app #mask .qeng.tap.on .qeng-h::after{background:var(--ink) !important;color:#fff !important}
/* nothing under 12px: the screen's eyebrow and the explorer's control labels were 11.5 */
body.m-app .pghd-k, body.m-app #sources .sxbar .lbl, body.m-app #sources .sxbar label > span:first-child{font-size:12px !important}
/* the narrowest phones (320–359px): a domain row takes three lines so the
   domain is never cut, the rail's figures step down, the "more" stack shows three */
@media (max-width:359px){
  body.m-app #sources .sxd2{grid-template-columns:24px auto minmax(0,1fr) 18px !important;grid-template-areas:"f n n x" "f e e x" "f v c x" !important}
  body.m-app #sources .sxd2 > span.c:not(.sxn) + .sxn{justify-self:start !important}
  body.m-app #sources .srail b{font-size:19px !important}
  body.m-app #sources .srail > div{padding-left:12px !important;padding-right:8px !important}
  body.m-app #overview .fd-list li.rest .fd-sl:nth-child(n+4){display:none !important}
}