/* Tapping two chips/buttons in quick succession reads as a double tap and Safari zooms the page
   (Trello #360). touch-action:manipulation disables ONLY double-tap zoom; pinch still works. */
.m2fs, .m2fs button, .m2fs label, .m2fs input, .m2fs a,
.m2-card, .m2-tab, .m2-chip, .m2-act, .m2-cat, .m2-filters-btn, .m2-count-sort,
.m2-sortopt, .m2-search-go, .m2-sortsheet button, .m2-domain, .m2-grow, .m2-kws,
.m2-metrics, .m2-rank, .m2-big, .m2-lbl, .m2-spark-wrap, .m2-sticky { touch-action: manipulation; }

/* ---- Purpose-built phone filter sheet (Trello #350). Written for a phone, not the desktop
   form restyled — the old one is hidden outright below 768px. ---- */
.m2fs { display: none; }
@media (max-width: 768px) {
    /* The desktop filter form no longer doubles as the mobile sheet — but only where a phone
       sheet actually replaces it. Unscoped, this also stripped High Value Keywords of every
       filter on a phone (Trello #392). */
    .filter-section.compact.m2-replaced { display: none !important; }
    body.m2-sheet { overflow: hidden; }
    .m2fs { position: fixed; inset: 0; z-index: 9500; background: rgba(15,23,42,.5); display: none; align-items: flex-end; }
    body.m2-sheet .m2fs { display: flex; }
    .m2fs-card { width: 100%; max-height: 92vh; overflow-y: auto; background: var(--card,#fff); border-radius: 20px 20px 0 0; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); position: relative; }
    .m2fs-card::before { content: ''; position: sticky; top: 0; display: block; height: 0; }
    .m2fs-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 18px 0 12px; background: var(--card,#fff); font-size: 1.3rem; font-weight: 800; }
    .m2fs-head button { background: none; border: none; font-size: 1.9rem; line-height: 1; color: var(--muted-foreground,#94a3b8); cursor: pointer; padding: 0 2px; }
    .m2fs-sec { padding: 16px 0; border-top: 1px solid var(--border,#eef2f7); }
    .m2fs-sec:first-of-type { border-top: none; }
    .m2fs-sec h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--foreground,#0f172a); }
    .m2fs-i { width: 15px; height: 15px; color: var(--muted-foreground,#cbd5e1); flex-shrink: 0; }
    .m2fs-sec p { margin: 5px 0 0; font-size: .82rem; line-height: 1.4; color: var(--muted-foreground,#94a3b8); }
    .m2fs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
    .m2fs-opt { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--border,#e5e7eb); border-radius: 12px; background: var(--card,#fff); font-family: inherit; font-size: .84rem; font-weight: 600; color: var(--foreground,#0f172a); cursor: pointer; }
    .m2fs-opt.on { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
    .m2fs-opt svg { width: 16px; height: 16px; flex-shrink: 0; }
    .m2fs-step { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
    .m2fs-step button { flex: 0 0 auto; width: 50px; height: 50px; border: 1px solid var(--border,#e5e7eb); background: var(--card,#fff); border-radius: 12px; font-size: 1.4rem; line-height: 1; color: var(--foreground,#0f172a); cursor: pointer; }
    .m2fs-step input { flex: 1; min-width: 0; height: 50px; border: 1px solid var(--border,#e5e7eb); border-radius: 12px; text-align: center; font-size: 16px; font-family: inherit; }
    .m2fs-slider { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
    .m2fs-slider input[type="range"] { flex: 1; min-width: 0; accent-color: #2563eb; height: 28px; }
    .m2fs-slider span { flex: 0 0 auto; min-width: 78px; text-align: right; font-size: .84rem; font-weight: 700; color: #2563eb; }
    /* Custom DR range, under the preset bands (Trello #393). */
    .m2fs-dr-custom { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border,#e5e7eb); }
    .m2fs-dr-lbl { display: block; font-size: .82rem; color: var(--muted-foreground,#94a3b8); }
    .m2fs-dr-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
    .m2fs-dr-row input { flex: 1; min-width: 0; height: 50px; border: 1px solid var(--border,#e5e7eb); border-radius: 12px; text-align: center; font-size: 16px; font-family: inherit; }
    .m2fs-dr-sep { flex: 0 0 auto; color: var(--muted-foreground,#94a3b8); }

    .m2fs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .m2fs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid var(--border,#e5e7eb); border-radius: 999px; background: var(--card,#fff); font-size: .82rem; font-weight: 600; color: var(--foreground,#0f172a); cursor: pointer; }
    .m2fs-chip input { display: none; }
    .m2fs-chip svg { width: 15px; height: 15px; color: var(--c,#2563eb); flex-shrink: 0; }
    .m2fs-chip.on { border-color: var(--c,#2563eb); color: var(--c,#2563eb); background: color-mix(in srgb, var(--c,#2563eb) 8%, #fff); }
    .m2fs-chip.locked { opacity: .5; }
    .m2fs-more { display: none; }
    .m2fs-chips.all .m2fs-more { display: inline-flex; }
    .m2fs-chips.all .m2fs-seeall { display: none; }
    .m2fs-seeall { color: #2563eb; border-style: dashed; }
    .m2fs-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
    .m2fs-row .m2fs-toggle { pointer-events: none; }
    .m2fs-lock { width: 14px; height: 14px; color: var(--muted-foreground,#94a3b8); }
    .m2fs-locked { width: 100%; margin-top: 12px; min-height: 50px; border: 1px dashed var(--border,#e5e7eb); border-radius: 12px; background: var(--muted,#f8fafc); color: var(--muted-foreground,#94a3b8); font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
    .m2fs-toggle { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 999px; border: none; background: var(--border,#cbd5e1); position: relative; cursor: pointer; }
    .m2fs-toggle i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
    .m2fs-toggle.on { background: #2563eb; }
    .m2fs-toggle.on i { left: 25px; }
    .m2fs-save { display: flex; gap: 9px; margin-top: 12px; }
    .m2fs-save input { flex: 1; min-width: 0; height: 50px; padding: 0 13px; border: 1px solid var(--border,#e5e7eb); border-radius: 12px; font-size: 16px; font-family: inherit; }
    .m2fs-save button { flex: 0 0 auto; width: 56px; height: 50px; border: 1px solid var(--border,#e5e7eb); background: var(--card,#fff); border-radius: 12px; cursor: pointer; color: var(--foreground,#0f172a); }
    .m2fs-save button svg { width: 19px; height: 19px; }
    .m2fs-saved div { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--border,#f1f5f9); }
    .m2fs-saved a { flex: 1; min-width: 0; color: #2563eb; font-size: .88rem; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .m2fs-saved button { background: none; border: none; color: var(--muted-foreground,#94a3b8); font-size: 1.35rem; line-height: 1; cursor: pointer; }
    .m2fs-apply { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card,#fff); border-top: 1px solid var(--border,#e5e7eb); }
    .m2fs-reset { color: #2563eb; font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .m2fs-see.busy { opacity: .6; }
    .m2fs-see { flex: 1; height: 52px; border: none; border-radius: 13px; background: #2563eb; color: #fff; font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer; }
}
/* ---- Phone dashboard (Trello #350). ----
   Everything below is phone-only. The blocks are hidden by default and only turned on inside the
   media query: without this, a desktop browser on /reports2 rendered the card list, tabs and
   filter bar UNSTYLED underneath the table, because their only display rules lived in there. */
.m2-cards, .m2-tabs, .m2-bar, .m2-chips, .m2-count, .m2-sortsheet, .m2-sticky, .m2-savef, .m2-sheet-head, .m2-sheet-apply { display: none; }
/* Phone-only: its only display rule used to live inside the media query, so on a desktop the
   button fell back to the browser default and appeared beside the normal filter bar (#392). */
.m2-kwfilters-btn { display: none; }

@media (max-width: 768px) {
    /* One list or the other, never both. */
    .m2-cards { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
    /* Only hide a table that HAS a phone replacement. This rule used to hit every .table-container
       on the site, so the High Value Keywords report (and the domain search) lost their table on a
       phone and rendered an empty page under the header (Trello #392). */
    .table-container.m2-replaced, .table-responsive.m2-replaced { display: none !important; }

    .m2-card { background: var(--card,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 14px; padding: 12px 13px; box-shadow: 0 1px 3px rgba(15,23,42,.05); cursor: pointer; -webkit-tap-highlight-color: rgba(37,99,235,.08); }
    .m2-card:active { background: var(--muted,#f8fafc); }
    .m2-card-top { display: flex; align-items: center; gap: 8px; }
    .m2-rank { flex: 0 0 auto; font-size: 1.05rem; font-weight: 800; color: var(--muted-foreground,#94a3b8); min-width: 18px; }
    .m2-domain { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; color: var(--foreground,#0f172a); text-decoration: none; overflow-wrap: anywhere; }
    .m2-domain-locked { color: var(--muted-foreground,#64748b); letter-spacing: .5px; }
    .m2-act { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: none; color: var(--muted-foreground,#94a3b8); cursor: pointer; }
    .m2-act svg { width: 18px; height: 18px; display: block; }
    .m2-act.is-favorite { color: #f59e0b; }
    .m2-cat { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin: 7px 0 0; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid transparent; font-size: .72rem; font-weight: 600; }
    .m2-cat svg { width: 13px; height: 13px; flex-shrink: 0; }
    /* Three equal columns so the third label ("Traffic/Month") can't be clipped off the edge
       the way it was on a 390px phone (Trello #359). */
    .m2-metrics { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; margin-top: 11px; }
    .m2-metrics > div { min-width: 0; }
    .m2-big { font-size: 1.12rem !important; }
    .m2-lbl { white-space: normal; overflow-wrap: anywhere; }

    /* Search meta (count, languages, title-only toggle) once it has moved into the sheet. */
    .m2-searchmeta { display: none; }
    body.m2-sheet .m2-searchmeta { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border,#eef2f7); font-size: .82rem; }
    .m2-spark-wrap { margin-top: 8px; }
    .m2-spark { width: 100%; height: 56px; display: block; }
    .m2-big.m2-purple { color: #7c3aed; }
    .m2-big { display: block; font-size: 1.28rem; font-weight: 800; color: var(--foreground,#0f172a); line-height: 1.15; }
    .m2-big.m2-green span, .m2-green > span { color: #16a34a; }
    .m2-lbl { display: block; font-size: .7rem; color: var(--muted-foreground,#94a3b8); margin-top: 1px; }
    .m2-foot { display: flex; align-items: center; gap: 18px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border,#eef2f7); }
    .m2-foot-item { display: flex; align-items: center; gap: 6px; }
    .m2-foot-item .m2-lbl { margin: 0; }
    .m2-ring { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #16a34a; color: #16a34a; font-size: .74rem; font-weight: 800; }
    .m2-dr { font-size: .86rem; font-weight: 800; color: var(--foreground,#0f172a); }
    .m2-count { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: .78rem; color: var(--muted-foreground,#64748b); }
    .m2-count > span { flex: 1 1 auto; min-width: 0; }
    /* The order name used to wrap under its own chevron and read as two overlapping arrows: keep
       the control on one line and let the results count take the wrapping instead (Trello #394). */
    /* Puede encoger: con el nombre del orden en espanol ("Ordenar: Oportunidades") no cabia y se
       salia por el borde derecho de la pantalla (admin, #996). Ahora recorta con puntos. */
    .m2-count-sort { flex: 0 1 auto; min-width: 0; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font-family: inherit; font-size: .78rem; color: var(--muted-foreground,#64748b); cursor: pointer; white-space: nowrap; }
    .m2-count-sort b { color: var(--foreground,#0f172a); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .m2-count-sort svg { width: 13px; height: 13px; }
    .m2-sortsheet { position: fixed; inset: 0; z-index: 9600; background: rgba(15,23,42,.45); display: none; align-items: flex-end; }
    .m2-sortsheet.open { display: flex; }
    .m2-sortsheet-card { width: 100%; background: var(--card,#fff); border-radius: 18px 18px 0 0; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; }
    .m2-sortsheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; font-size: 1.1rem; font-weight: 700; }
    .m2-sortsheet-head button { background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--muted-foreground,#94a3b8); cursor: pointer; }
    .m2-sortopt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 2px; border-top: 1px solid var(--border,#f1f5f9); color: var(--foreground,#0f172a); text-decoration: none; font-size: .95rem; }
    .m2-sortopt.active { color: #2563eb; font-weight: 700; }
    .m2-sortopt svg { width: 18px; height: 18px; flex-shrink: 0; }
    .m2-kws { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border,#f1f5f9); font-size: .76rem; line-height: 1.45; color: var(--muted-foreground,#64748b); }
    .m2-kws-lbl { color: var(--muted-foreground,#94a3b8); font-weight: 600; }
    .m2-kws b { color: var(--foreground,#0f172a); font-weight: 700; }
    .m2-grow { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 11px; border-radius: 999px; background: #16a34a14; color: #16a34a; font-size: .78rem; font-weight: 700; }
    .m2-grow svg { width: 14px; height: 14px; flex-shrink: 0; }
    .m2-empty { text-align: center; padding: 34px 12px; color: var(--muted-foreground,#94a3b8); }

    /* High Value Keywords filters on a phone (Trello #392). The desktop bar lays its 7 controls
       out in a row; here they stack full width, and the whole panel hides behind a button so the
       keyword list still starts above the fold. */
    .m2-kwfilters-btn { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px; margin: 0 0 12px; border: 1px solid var(--border,#e5e7eb); border-radius: 12px; background: var(--card,#fff); color: var(--foreground,#0f172a); font-size: .9rem; font-weight: 600; font-family: inherit; cursor: pointer; }
    .m2-kwfilters-btn svg { width: 16px; height: 16px; }
    .m2-kwfilters { display: none; }
    body.m2-kwf .m2-kwfilters { display: block; margin-bottom: 14px; }
    .m2-kwfilters .filter-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .m2-kwfilters .filter-bar > div { width: 100%; }
    .m2-kwfilters .search-input-wrapper { flex-wrap: wrap; }
    .m2-kwfilters .search-input-wrapper > div { flex: 1; min-width: 0; }
    .m2-kwfilters .filter-dropdown { display: flex !important; width: 100%; }
    .m2-kwfilters .filter-dropdown-btn { width: 100%; min-height: 46px; justify-content: space-between; }
    .m2-kwfilters .filter-dropdown-menu { position: static !important; width: 100% !important; min-width: 0 !important; box-shadow: none !important; }
    .m2-kwfilters input, .m2-kwfilters .filter-menu-input { font-size: 16px; }   /* 16px stops iOS zooming on focus */
    .m2-kwfilters .btn { min-height: 44px; }

    /* High Value Keywords list (Trello #392). A keyword is a phrase, not a domain: it needs to
       wrap over several lines instead of being truncated, and it is not tappable. */
    .m2-kw .m2-domain { font-size: .95rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
    .m2-kw .m2-card { cursor: default; }
    .m2-kw .m2-card:active { background: var(--card,#fff); }
    .m2-kw .m2-foot { flex-wrap: wrap; gap: 14px; }
    .m2-kw .m2-foot-item { gap: 5px; }
    .m2-kw .badge { font-size: .72rem; padding: 2px 8px; }

    /* Hero title stays at the top of the phone view but small — it's a heading, not the content
       (Trello #350). The long subtitle is dropped; it pushed the results below the fold. */
    .hero-header { padding: 12px 0 10px !important; }
    /* Plain supporting line, not a heading: regular weight, muted grey, small (admin, #350). */
    .hero-title { font-size: .84rem !important; line-height: 1.4; margin: 0; font-weight: 400 !important; color: var(--muted-foreground,#64748b) !important; }
    .hero-subtitle { display: none; }
    /* Country selector, Favorites, "Talk to an expert" and the admin sparkline toggle are off on
       the phone. The country filter still lives inside the sheet and Favorites lives in the
       hamburger menu (admin, Trello #350). */
    .hero-actions { display: none !important; }
    .m2-hide-spark { display: none !important; }

    /* Nothing may push the page sideways: the sticky bar's negative margins were letting the
       layout slide horizontally and "break" (admin, Trello #350). */
    html, body { overflow-x: clip; max-width: 100%; }
    .main-content, .container { overflow-x: clip; max-width: 100vw; }
    .m2-cards, .m2-card, .m2-count, .m2-chips { max-width: 100%; }
    .m2-card { overflow: hidden; }

    /* Search + Filters + tabs ride together and pin to the top while you scroll the list
       (admin, Trello #350). The hero line is deliberately left out of the sticky block. */
    .m2-sticky { display: block; position: sticky; top: 0; z-index: 400; background: var(--background,#fff); padding: 8px 0; margin: 0; box-shadow: 0 6px 14px -12px rgba(15,23,42,.5); }
    .m2-sticky .m2-bar { margin: 0; }

    /* Sort tabs. Underlined like app tabs; they scroll sideways if the labels get long. */
    .m2-tabs { display: flex; gap: 0; margin: 0 0 10px; border-bottom: 1px solid var(--border,#e5e7eb); overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* flex-shrink was 0, so a third tab pushed the row 403px wide inside 344px and "Valor" fell off
       the screen. Let them share the width instead (Trello #394). */
    .m2-tab { flex: 1 1 auto; min-width: 0; text-align: center; padding: 11px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--muted-foreground,#94a3b8); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m2-tab.active { color: #2563eb; border-bottom-color: #2563eb; }

    /* Search on the left, Filters on the right — one row, like the mockup. */
    .m2-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
    .m2-search-slot { flex: 1; min-width: 0; }
    .m2-search-slot #adminSemSearch { width: 100% !important; gap: 0 !important; }
    .m2-search-slot #semQ { height: 56px !important; font-size: 16px !important; border-radius: 14px !important; padding: .4rem 4.2rem .4rem 1.1rem !important; }
    .m2-search-slot #semClearX { right: 46px !important; font-size: 1.3rem !important; }
    /* The blue "Search" button is replaced by a magnifier inside the box (mockup, Trello #350). */
    .m2-search-slot #adminSemSearch > div > button:last-child { display: none !important; }
    .m2-search-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--muted-foreground,#64748b); }
    .m2-search-go svg { width: 21px; height: 21px; }
    .m2-filters-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 54px; padding: 0 16px; border-radius: 14px; background: var(--card,#fff); color: var(--foreground,#0f172a); border: 1px solid var(--border,#e5e7eb); border-radius: 12px; font-size: .88rem; font-weight: 600; font-family: inherit; cursor: pointer; }

    /* Active-filter chips, removable. */
    .m2-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
    .m2-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; font-size: .8rem; font-weight: 600; text-decoration: none; }
    .m2-chip svg { width: 13px; height: 13px; opacity: .75; }
    .m2-chips-sheet { display: none; }
    body.m2-sheet .m2-chips-sheet { display: flex; margin: 0 0 4px; }
    .m2-filters-btn svg { width: 17px; height: 17px; }
    .m2-dot { width: 7px; height: 7px; border-radius: 50%; background: #2563eb; }

    .filter-section.compact { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 9500; max-height: 86vh; overflow-y: auto; margin: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 44px rgba(15,23,42,.3); transform: translateY(100%); transition: transform .22s ease; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    body.m2-sheet .filter-section.compact { transform: translateY(0); }
    body.m2-sheet::after { content: ''; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 9400; }
    body.m2-sheet { overflow: hidden; }
    /* Sheet chrome (Trello #350 mockup): grab handle, title + X, sticky footer with the live count. */
    .m2-sheet-head { display: none; }
    body.m2-sheet .m2-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 12px; font-size: 1.25rem; font-weight: 700; position: relative; }
    body.m2-sheet .m2-sheet-head::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 999px; background: var(--border,#e2e8f0); }
    .m2-sheet-close { background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--muted-foreground,#94a3b8); cursor: pointer; padding: 0 4px; }
    /* The keyword search box is the one filter that stays visible outside the sheet. */
    #adminSemSearch { width: 100% !important; order: -1; }
    /* Filter controls get thumb-sized rows, each group separated like the mockup's sections. */
    .filter-section.compact { padding-left: 16px; padding-right: 16px; }
    .filter-section.compact .filter-dropdown-btn, .filter-section.compact .country-selector-btn { min-height: 46px; font-size: .88rem; }
    /* Option buttons in a 2-column grid under a full-width section label, like the mockup. */
    body.m2-sheet .filter-section.compact .quick-filters-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border,#eef2f7); }
    body.m2-sheet .filter-section.compact .quick-filters-row > span:first-child { grid-column: 1 / -1; font-size: .95rem !important; font-weight: 700; color: var(--foreground,#0f172a) !important; margin-bottom: 2px; }
    .filter-section.compact .quick-filters-row:first-of-type { border-top: none; }
    .filter-section.compact .filter-checkbox-btn { min-height: 46px; font-size: .82rem !important; padding: 0.5rem 0.8rem !important; justify-content: center; text-align: center; }
    /* Every filter is laid open as a section inside the sheet — no nested dropdowns to tap through,
       which is what the mockup shows (Trello #350). */
    body.m2-sheet .filter-section.compact .filter-dropdown { display: block !important; width: 100%; }
    body.m2-sheet .filter-section.compact .filter-dropdown-menu { display: block !important; position: static !important; width: 100% !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; }
    body.m2-sheet .filter-section.compact .filter-dropdown-btn { display: flex !important; width: 100%; border: none !important; background: none !important; padding: 14px 0 6px !important; font-size: .95rem !important; font-weight: 700; color: var(--foreground,#0f172a) !important; justify-content: flex-start; gap: 6px; }
    body.m2-sheet .filter-section.compact .filter-dropdown-btn .arrow { display: none; }
    body.m2-sheet .filter-section.compact .filter-menu-section label { display: block; font-size: .8rem; color: var(--muted-foreground,#64748b); font-weight: 500; margin-bottom: 6px; }
    body.m2-sheet .filter-section.compact .filter-menu-footer { display: none !important; }
    body.m2-sheet .filter-section.compact .filter-menu-input { width: 100%; height: 46px; font-size: 16px; border-radius: 10px; text-align: center; }
    /* Stepper: the - and + buttons JS puts around each number input, as in the mockup. */
    .m2-step { display: flex; align-items: center; gap: 8px; }
    .m2-step button { flex: 0 0 auto; width: 44px; height: 46px; border: 1px solid var(--border,#e5e7eb); background: var(--card,#fff); border-radius: 10px; font-size: 1.3rem; line-height: 1; color: var(--foreground,#0f172a); cursor: pointer; font-family: inherit; }
    .m2-step input { flex: 1; min-width: 0; }

    /* Category and country choices as chips instead of checkbox lists, like the mockup. */
    body.m2-sheet .filter-section.compact .filter-checkbox-item { display: inline-flex !important; width: auto; align-items: center; gap: 6px; padding: 9px 13px; margin: 0 6px 6px 0; border: 1px solid var(--border,#e5e7eb); border-radius: 999px; font-size: .8rem; background: var(--card,#fff); }
    body.m2-sheet .filter-section.compact .filter-checkbox-item input[type="checkbox"] { width: 15px; height: 15px; margin: 0; }
    body.m2-sheet .filter-section.compact .filter-checkbox-item .cat-ico { display: block; width: 15px; height: 15px; flex-shrink: 0; }
    body.m2-sheet .filter-section.compact .filter-menu-list, body.m2-sheet .filter-section.compact .country-selector-menu > form > div:first-child { max-height: none !important; overflow: visible !important; display: flex; flex-wrap: wrap; }

    /* Traffic slider (mockup). */
    .m2-slider { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .m2-slider input[type="range"] { flex: 1; min-width: 0; accent-color: #2563eb; height: 26px; }
    .m2-slider-out { flex: 0 0 auto; min-width: 74px; text-align: right; font-size: .82rem; font-weight: 700; color: #2563eb; }

    /* Save filter block. */
    .m2-savef { display: none; }
.filter-checkbox-item .cat-ico { display: none; }
    body.m2-sheet .m2-savef { display: block; padding: 16px 0 4px; border-top: 1px solid var(--border,#eef2f7); }
    .m2-savef-h { font-size: .95rem; font-weight: 700; }
    .m2-savef-sub { font-size: .78rem; color: var(--muted-foreground,#94a3b8); margin: 2px 0 10px; }
    .m2-savef-row { display: flex; gap: 8px; }
    .m2-savef-row input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--border,#e5e7eb); border-radius: 10px; font-size: 16px; font-family: inherit; }
    .m2-savef-row button { flex: 0 0 auto; width: 52px; height: 46px; border: 1px solid var(--border,#e5e7eb); background: var(--card,#fff); border-radius: 10px; cursor: pointer; color: var(--foreground,#0f172a); }
    .m2-savef-row button svg { width: 18px; height: 18px; }
    .m2-savef-list { margin-top: 10px; }
    .m2-savef-item { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--border,#f1f5f9); }
    .m2-savef-item a { flex: 1; min-width: 0; color: #2563eb; font-size: .86rem; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .m2-savef-item button { background: none; border: none; color: var(--muted-foreground,#94a3b8); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; }

    /* Sticky apply bar: Reset on the left, "See N domains" on the right — the sheet's main action. */
    .m2-sheet-apply { display: none; }
    body.m2-sheet .m2-sheet-apply { display: flex; align-items: center; gap: 12px; position: sticky; bottom: 0; margin: 8px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card,#fff); border-top: 1px solid var(--border,#e5e7eb); }
    .m2-sheet-reset { color: #2563eb; font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .m2-sheet-see { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 48px; border: none; border-radius: 12px; background: #2563eb; color: #fff; font-size: .95rem; font-weight: 700; font-family: inherit; cursor: pointer; }
}