/* ══ 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 category rail carries FIVE figures, where every other rail on this
   report carries two or four. At 375px the inherited grid put all five in one
   row and clipped three labels to "Adbrand nameNecbirand". Two columns, and
   the odd fifth spans both — the figure it holds (224 answers naming no brand
   at all) is the one the section is about, so it is the one that gets the
   full width rather than half of it. */
/* grid-auto-flow:column is what actually did it: with it set, five items in a
   two-track template add three IMPLICIT columns and the template is ignored.
   Overriding the template alone changed nothing and read as a cache problem. */
body.m-app #rail-category{grid-template-columns:1fr 1fr !important;grid-auto-flow:row !important}
body.m-app #rail-category > div:nth-child(5){grid-column:1 / -1;border-left:0 !important}
body.m-app #rail-category > div > span:first-child{white-space:normal !important;line-height:1.25}
body.m-app #rail-category b{white-space:normal !important;font-size:18px !important}