/* =====================================================================
   Phone design (owner, 9 Oct 2026: "the mobile site has big problems it doesnt look designed ... the text is too large and
   the widgets dont always fit the phone width ... too much of a 2010 microsoft word look"). Loaded last, after the
   reader's theme, and only when the setting "PhoneDesign" is "app" (html[data-phone=app], Views/Shared/_Layout.cshtml).
   On a phone every design gets the same frame: a soft grey page, content on white rounded cards, one calm type scale,
   swipeable rows that show they swipe (dots, js/mobile.js), pill buttons, tap feedback and a gentle rise as cards scroll
   in. Colours come from the theme's own tokens, so dark mode and the other designs keep their palettes.
   ===================================================================== */

:root[data-phone=app] {
    --pm-bg: #F1F2F4;
    --pm-card: #FFFFFF;
    --pm-card-2: #F6F7F9;
    --pm-line: rgba(16, 24, 40, .08);
    --pm-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px -6px rgba(16, 24, 40, .12);
    --pm-shadow-hi: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 28px -10px rgba(16, 24, 40, .22);
    --pm-r: 16px;
    --pm-r-s: 12px;
    --pm-pad: 16px;
    --pm-accent: var(--d-red, var(--tint-ink, var(--ink)));
    --pm-accent-soft: color-mix(in oklab, var(--pm-accent) 11%, transparent);
}
:root[data-phone=app][data-theme="dark"] {
    --pm-bg: #000000; --pm-card: #161719; --pm-card-2: #1E1F22; --pm-line: rgba(255, 255, 255, .08);
    --pm-shadow: 0 0 0 1px rgba(255, 255, 255, .06); --pm-shadow-hi: 0 0 0 1px rgba(255, 255, 255, .12);
}
@media (prefers-color-scheme: dark) {
    :root[data-phone=app]:not([data-theme="light"]) {
        --pm-bg: #000000; --pm-card: #161719; --pm-card-2: #1E1F22; --pm-line: rgba(255, 255, 255, .08);
        --pm-shadow: 0 0 0 1px rgba(255, 255, 255, .06); --pm-shadow-hi: 0 0 0 1px rgba(255, 255, 255, .12);
    }
}

/* ------------------------------------------------------------------ chrome: top bar, chips, tab bar (phones and small tablets) */
@media (max-width: 820px) {
    [data-phone=app] body { background: var(--pm-bg); }
    [data-phone=app] .site-header { border-bottom: 1px solid var(--pm-line); box-shadow: 0 1px 8px -6px rgba(16, 24, 40, .25); }
    /* top bar (owner, 10 Oct 2026: "The top of the mobile menu has the option to change countries too big. The polling forecast
       logo is not inline"): one row on the page gutter. The wordmark starts on the left gutter; the country, search and menu
       sit together at the right, with the menu icon's edge on the right gutter. The country is a small round flag. The utility
       row above it (the country's name, already in the flag button and the page head) goes on phones; the flag ribbon stays. */
    [data-phone=app] .utility-bar { display: none; }
    [data-phone=app] .masthead__inner { min-height: 56px; padding-inline: var(--m-gutter, 14px); gap: 0; align-items: center; }
    /* the wordmark's mark and words keep their shared baseline; the pair as a whole is centred on the icons beside it */
    html[data-phone=app] .wordmark { min-height: 0; height: auto; align-self: center; padding: 10px 0; margin: -11px 0 0; }
    [data-phone=app] .m-bar { justify-content: flex-end; gap: 2px; margin-right: -10px; }
    [data-phone=app] .m-bar .m-btn, [data-phone=app] .m-bar .m-btn:first-of-type { width: 40px; height: 44px; margin-left: 0; border-radius: 999px; }
    [data-phone=app] .m-bar .m-btn svg { width: 22px; height: 22px; }
    [data-phone=app] .m-flag { order: 0; margin-left: auto; margin-right: 4px; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; justify-content: center; gap: 0;
        border: 0; border-radius: 50%; background: none; overflow: visible; position: relative; }
    [data-phone=app] .m-flag::after { content: ""; position: absolute; inset: -6px; }   /* 44 px tap target */
    [data-phone=app] .m-flag img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--pm-line), 0 1px 3px rgba(16, 24, 40, .18); }
    [data-phone=app] .m-flag svg, [data-phone=app] .m-flag .m-flag-name { display: none; }
    [data-phone=app] .site-header::before { display: none; }   /* the faded flag behind the wordmark: the round flag and the ribbon carry the country */
    [data-phone=app] .site-header { background: var(--pm-card); }
    /* the back arrow's glyph on the left gutter, the section chips below it on the same line */
    [data-phone=app] .m-crumbs { padding-left: 0; padding-right: var(--m-gutter, 14px); }
    [data-phone=app] .m-back { margin-left: calc(var(--m-gutter, 14px) - 16px); }
    [data-phone=app] .m-chips { padding-inline: var(--m-gutter, 14px); scroll-padding-inline: var(--m-gutter, 14px); }
    [data-phone=app] .m-subnav { background: transparent; }
    [data-phone=app] .m-chip { border-radius: 999px; border: 1px solid var(--pm-line); background: var(--pm-card); color: var(--ink-2);
        font: 600 13.5px/1 var(--font-ui); min-height: 36px; box-shadow: var(--pm-shadow); }
    [data-phone=app] .m-chip.on { background: var(--ink); border-color: var(--ink); color: var(--pm-card); }

    [data-phone=app] .m-tabbar { background: color-mix(in oklab, var(--pm-card) 82%, transparent); border-top: 1px solid var(--pm-line);
        box-shadow: 0 -6px 24px -12px rgba(16, 24, 40, .25); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); }
    [data-phone=app] .m-tab { font: 600 10.5px/1.1 var(--font-ui); color: var(--muted); gap: 3px; }
    [data-phone=app] .m-tab svg { padding: 3px 14px; box-sizing: content-box; border-radius: 999px; transition: background-color .2s; }
    [data-phone=app] .m-tab.on { color: var(--ink); }
    [data-phone=app] .m-tab.on svg { background: var(--pm-accent-soft); color: var(--pm-accent); }
    [data-phone=app] .m-tab.on::before { display: none; }
    [data-phone=app] .m-sheet { border-radius: 22px 22px 0 0; border-top: 0; background: var(--pm-bg); }
    [data-phone=app] .m-group ul { border-radius: var(--pm-r); background: var(--pm-card); box-shadow: var(--pm-shadow); border: 0; }
    [data-phone=app] .m-pill, [data-phone=app] .m-lang { border-radius: 999px; }
    [data-phone=app] .m-lang { background: var(--pm-card-2); border: 0; padding: 3px; gap: 2px; }
    [data-phone=app] .m-lang a { min-height: 34px; padding: 0 14px; border-radius: 999px; font: 600 13.5px/1 var(--font-ui); }
    [data-phone=app] .m-lang a.on { background: var(--pm-card); color: var(--ink); box-shadow: var(--pm-shadow); }
    /* sheets: head and body on the same 16 px gutter */
    [data-phone=app] .m-sheet-head { padding: 4px 6px 8px 16px; border-bottom: 1px solid var(--pm-line); }
    [data-phone=app] .m-sheet-body { padding: 12px 16px 20px; }
    [data-phone=app] .m-sheet-head h2 { font: 700 17px/1.2 var(--font-ui); }
    /* the menu's title: the country, and a small "Change country" beside it */
    .m-sheet-country { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink);
        font: inherit; cursor: pointer; box-shadow: none !important; transform: none !important; }
    .m-sheet-country img { flex: none; width: 24px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--pm-line, rgba(0,0,0,.1)); }
    .m-sheet-country__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .m-sheet-country__go { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--pm-card-2, var(--hover));
        font: 600 12.5px/1 var(--font-ui); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--pm-line, rgba(0,0,0,.08)); }
    .m-sheet-country:hover .m-sheet-country__go { color: var(--ink); }
    /* the country list: tidy cards, the current one ringed */
    [data-phone=app] .m-flags { gap: 8px; }
    [data-phone=app] .m-flags a { border: 0; border-radius: 14px; background: var(--pm-card); box-shadow: var(--pm-shadow); padding: 10px 12px; column-gap: 10px; min-height: 64px; }
    [data-phone=app] .m-flags a.on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--pm-card); }
    [data-phone=app] .m-flags img { width: 26px; height: auto; border-radius: 3px; }
    [data-phone=app] .m-flags .t { font-size: 14.5px; }
    [data-phone=app] .m-flags .d { font-size: 12px; }
    [data-phone=app] .m-flags .m { font-size: 11.5px; color: var(--muted); }
    [data-phone=app] .m-search input[type=search] { border-radius: 12px; }
    [data-phone=app] .m-search-go { border-radius: 12px; }
}

/* ------------------------------------------------------------------ the page (phones) */
@media (max-width: 760px) {
    [data-phone=app] {
        --margin-m: 14px; --wbleed: 14px; --m-gutter: 14px;
        --fs-h1-m: 27px; --fs-display-m: 27px; --fs-h2-m: 21px; --fs-section-m: 21px; --fs-h3-m: 18px; --fs-h4-m: 16px;
        --fs-standfirst-m: 16.5px; --fs-body-m: 15.5px; --fs-num-m: 34px;
        --band-pad-m: 18px; --band-pad-tight: 12px;
    }
    [data-phone=app] main { font-size: 15.5px; }

    /* type: one scale, tighter */
    [data-phone=app] main h1, [data-phone=app] .headline-1, [data-phone=app] .display, [data-phone=app] .page-head h1 {
        font-size: 27px !important; line-height: 1.1 !important; letter-spacing: -0.025em; }
    [data-phone=app] .area-lead .lead-story__copy .display { font-size: 27px !important; }
    [data-phone=app] main h2:not(.widget__title):not(.only-strip__title):not(.try-it__title) { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
    [data-phone=app] main h3 { font-size: 17px; line-height: 1.25; }
    [data-phone=app] .lead, [data-phone=app] .standfirst, [data-phone=app] .page-intro { font-size: 16px !important; line-height: 1.5 !important; }
    [data-phone=app] .headline-3, [data-phone=app] .whats-happening .headline-3 { font-size: 22px !important; line-height: 1.15 !important; }
    [data-phone=app] .kicker { font-size: 12px; letter-spacing: .01em; }

    /* bands: no full-width rules or stripes, just spacing on the grey page */
    [data-phone=app] .section-band:not(.section-band--ink):not(.section-band--dark), [data-phone=app] .section-band--white, [data-phone=app] .section-band--light { background: transparent; border: 0; }
    [data-phone=app] .section-band { padding-block: 14px; }
    [data-phone=app] .section-band--tight { padding-block: 8px; }

    /* dark bands become one inset dark card */
    [data-phone=app] .section-band--ink, [data-phone=app] .section-band--dark { margin: 10px var(--m-gutter, 14px); padding-block: 18px; border-radius: 22px; overflow: hidden; }

    /* section headers: the big 01/02 numbers and thick rules go; kicker, title and a "see all" link */
    [data-phone=app] .section-header { border-top: 0 !important; padding-top: 0; margin-bottom: 12px; gap: 2px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    [data-phone=app] .section-header::after, [data-phone=app] .section-header::before { display: none !important; content: none !important; }
    [data-phone=app] .section-header .kicker { grid-column: 1 / -1; }
    [data-phone=app] .section-header .section-title { font-size: 21px !important; line-height: 1.15; margin: 0; }
    [data-phone=app] .section-header .more { grid-column: 1 / -1; margin: 4px 0 0; font: 600 13.5px/1 var(--font-ui); color: var(--pm-accent); text-decoration: none; }
    [data-phone=app] .only-strip__title, [data-phone=app] .try-it__title, [data-phone=app] .widget-rail__title { font-size: 12px; margin-bottom: 10px; }
    [data-phone=app] .standfirst { margin-bottom: 12px; }

    /* cards: every module stands on a white rounded surface */
    [data-phone=app] .widget,
    [data-phone=app] .country-card,
    [data-phone=app] a.feat, [data-phone=app] div.feat,
    [data-phone=app] .only-tile,
    [data-phone=app] .door,
    [data-phone=app] .try-card,
    [data-phone=app] .be-latest__box,
    [data-phone=app] .story-card,
    [data-phone=app] .chart-module,
    [data-phone=app] .whats-happening,
    [data-phone=app] .site-main--page > .card, [data-phone=app] main .card {
        background: var(--pm-card) !important; border: 0 !important; border-radius: var(--pm-r) !important; box-shadow: var(--pm-shadow); padding: var(--pm-pad) !important;
        color: var(--ink); overflow: hidden; }
    [data-phone=app] .widget { padding-top: var(--pm-pad); font-size: 14px; }
    [data-phone=app] .widget__title { font-size: 18px !important; line-height: 1.2; }
    [data-phone=app] .widget__lede { min-height: 0; }
    [data-phone=app] .widget * { max-width: 100%; }
    [data-phone=app] .widget svg, [data-phone=app] .widget canvas { height: auto; }
    [data-phone=app] .section-band--ink .widget, [data-phone=app] .section-band--dark .widget,
    [data-phone=app] .section-band--ink .feat, [data-phone=app] .section-band--dark .feat,
    [data-phone=app] .section-band--ink .chart-module, [data-phone=app] .section-band--dark .chart-module { background: rgba(255, 255, 255, .06) !important; box-shadow: none; color: inherit; }
    /* inside a dark card the table is part of the card, not a card of its own */
    [data-phone=app] :is(.section-band--ink, .section-band--dark) .chart-module :is(.table-module, .table-wrap, .table-scroll) { background: transparent; padding: 0; }

    /* a card's kicker is a small tinted label */
    [data-phone=app] .widget__head .kicker, [data-phone=app] .feat .kicker, [data-phone=app] .country-card .kicker, [data-phone=app] .be-latest__box > .kicker,
    [data-phone=app] .desk-card .kicker, [data-phone=app] .only-tile .kicker, [data-phone=app] .try-card .kicker {
        display: inline-flex; align-items: center; width: auto; max-width: 100%; padding: 4px 9px; margin-bottom: 8px; border-radius: 999px;
        background: var(--pm-accent-soft); color: var(--pm-accent); font: 650 11.5px/1.15 var(--font-ui); letter-spacing: .01em; text-transform: none; }

    /* rows that swipe: cards keep their own height, the next one peeks in */
    [data-phone=app] .try-it__row, [data-phone=app] .doors, [data-phone=app] .country-hub--play .feat-grid, [data-phone=app] .area-features--few .feat-grid,
    [data-phone=app] .area-desk--home .desk-grid, [data-phone=app] .only-strip, [data-phone=app] .widget-rail__list, [data-phone=app] .feat-grid {
        align-items: start !important; gap: 10px !important; column-gap: 10px !important; padding-top: 4px; padding-bottom: 12px; }
    [data-phone=app] .widget-rail__list { grid-auto-columns: 86vw; }
    [data-phone=app] .only-tile { flex-basis: 70%; }
    [data-phone=app] .doors > * { flex-basis: 62%; }
    [data-phone=app] .m-dots { display: flex; justify-content: center; gap: 6px; margin: -2px 0 6px; height: 6px; }
    [data-phone=app] .m-dots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--ink) 20%, transparent); transition: width .25s, background-color .25s; }
    [data-phone=app] .m-dots i.on { width: 18px; background: var(--pm-accent); }
    [data-phone=app] .section-band--ink .m-dots i { background: rgba(255, 255, 255, .3); }
    [data-phone=app] .section-band--ink .m-dots i.on { background: #FFFFFF; }

    /* the front page's 2028 feature was as tall as the whole row (1,100 px): its own height, and the long text folds */
    [data-phone=app] .feat--big { padding: var(--pm-pad); }
    [data-phone=app] .feat p { font-size: 14px; line-height: 1.45; }

    /* the front page's lead stories: each a card, figures as small tiles, the desk note as an inset */
    [data-phone=app] .lead-story, [data-phone=app] .lead-story--second { border-top: 0; }
    [data-phone=app] .lead-story { background: var(--pm-card); border-radius: var(--pm-r); box-shadow: var(--pm-shadow); padding: var(--pm-pad); margin: 0 0 14px; row-gap: 14px; }
    [data-phone=app] .lead-story .display { margin-top: 6px; }
    [data-phone=app] .lead-figures { border: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 12px; }
    [data-phone=app] .lead-figures__item, [data-phone=app] .lead-figures__item + .lead-figures__item { border: 0 !important; background: var(--pm-card-2); border-radius: var(--pm-r-s); padding: 10px 10px 9px !important; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
    [data-phone=app] .lead-figures dt { font: 500 11.5px/1.25 var(--font-ui); color: var(--muted); }
    [data-phone=app] .lead-figures .big-number { font-size: 22px !important; line-height: 1 !important; }
    [data-phone=app] .lead-story__desk { border: 0 !important; background: var(--pm-card-2); border-radius: var(--pm-r-s); padding: 10px 12px; margin: 0 0 10px; display: block; }
    [data-phone=app] .lead-story .figure-panel, [data-phone=app] .hub-head .figure-panel { border: 0 !important; border-radius: var(--pm-r-s); background: var(--pm-card-2); }

    /* country hub heads: the headline and its reading on one card, the second paragraph folded to three lines (tap to open, js/mobile.js) */
    [data-phone=app] .hub-head { padding-top: 10px; }
    [data-phone=app] .hub-head__copy { background: var(--pm-card); border-radius: var(--pm-r); box-shadow: var(--pm-shadow); padding: var(--pm-pad); }
    [data-phone=app] .hub-head__copy .headline-1 { margin: 0 0 10px; }
    [data-phone=app] .hub-head__copy .standfirst + .standfirst:not(.m-open) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
    [data-phone=app] .hub-head__desk { background: var(--pm-card-2); border-radius: var(--pm-r-s); padding: 10px 12px; }
    [data-phone=app] .fill-card { background: var(--pm-card) !important; border: 0 !important; border-radius: var(--pm-r); box-shadow: var(--pm-shadow); }

    /* the lab band: a plain stack of cards */
    [data-phone=app] .lab-band__grid { gap: 12px; }

    /* "New" tools: chips, not a run-on line of links */
    [data-phone=app] .only-new { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0; margin-top: 6px; }
    [data-phone=app] .only-new .kicker { flex-basis: 100%; margin: 0; font-size: 12px; }
    [data-phone=app] .only-new a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px; background: var(--pm-card);
        box-shadow: var(--pm-shadow); color: var(--ink); text-decoration: none; font: 600 13.5px/1.2 var(--font-ui); }

    /* headline figures: a grid of small tiles */
    [data-phone=app] .stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0 !important; }
    [data-phone=app] .stat-strip > .stat-strip__item, [data-phone=app] .stat-strip__item + .stat-strip__item {
        border: 0 !important; padding: 12px 14px !important; background: var(--pm-card); border-radius: var(--pm-r-s); box-shadow: var(--pm-shadow); }
    [data-phone=app] .stat-strip .big-number { font-size: 30px !important; line-height: 1 !important; }
    [data-phone=app] .stat-strip__label { margin-top: 6px; font: 500 12.5px/1.3 var(--font-ui); color: var(--muted); }
    [data-phone=app] .stat-strip > .stat-strip__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    [data-phone=app] .stats { border-top: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    [data-phone=app] .stats > .stat, [data-phone=app] .stats > .stat + .stat { border: 0 !important; padding: 12px 14px; background: var(--pm-card); border-radius: var(--pm-r-s); box-shadow: var(--pm-shadow); margin: 0; }
    [data-phone=app] .stat .v { font-size: 28px; }

    /* sub-pages: headed sections as cards */
    [data-phone=app] .site-main--page > h2, [data-phone=app] .site-main--page > section > h2, [data-phone=app] .tab-panel > h2 { border-top: 0 !important; padding-top: 0; margin-top: 26px; }
    [data-phone=app] .page-head { padding-top: 6px; }

    /* tables: a scrolling card */
    [data-phone=app] .table-module, [data-phone=app] .table-wrap, [data-phone=app] .table-scroll {
        background: var(--pm-card); border-radius: var(--pm-r); box-shadow: var(--pm-shadow); padding: 4px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* on a dark band the card is a faint lighter panel, so the white text stays readable */
    [data-phone=app] :is(.section-band--ink, .section-band--dark) :is(.table-module, .table-wrap, .table-scroll) { background: rgba(255, 255, 255, .06); box-shadow: none; }
    [data-phone=app] :is(.section-band--ink, .section-band--dark) main td, [data-phone=app] :is(.section-band--ink, .section-band--dark) td { border-color: rgba(255, 255, 255, .12) !important; }
    /* ranked lists on a phone: rank, name, a shorter bar, figure */
    [data-phone=app] .table-module { padding: 2px 6px; overflow-x: visible; }
    [data-phone=app] .table-module .bar { width: 26%; }
    [data-phone=app] .table-module td { padding: 10px 6px 10px 0; }
    [data-phone=app] .table-module td.rank { width: 22px; }
    [data-phone=app] .table-module td.r { padding-right: 4px; }
    [data-phone=app] main table { font-size: 13.5px; }
    [data-phone=app] main th { font: 650 11.5px/1.25 var(--font-ui) !important; color: var(--muted) !important; border-bottom: 1px solid var(--pm-line) !important; text-transform: none; }
    [data-phone=app] main td { border-color: var(--pm-line) !important; }

    /* controls: rounded and soft */
    [data-phone=app] main select, [data-phone=app] main input[type=text], [data-phone=app] main input[type=search], [data-phone=app] main input[type=number],
    [data-phone=app] .widget__pick select {
        border-radius: var(--pm-r-s) !important; border: 1px solid var(--pm-line) !important; background-color: var(--pm-card); box-shadow: var(--pm-shadow); }
    [data-phone=app] main .button, [data-phone=app] main button.btn, [data-phone=app] .segmented button, [data-phone=app] .pill-row a, [data-phone=app] .pill-row span,
    [data-phone=app] .widget__chip, [data-phone=app] .year-pills button, [data-phone=app] .pills a, [data-phone=app] .pills button {
        border-radius: 999px !important; }
    [data-phone=app] .segmented { border-radius: 999px; gap: 4px; background: var(--pm-card-2); padding: 3px; border: 0; }
    [data-phone=app] .segmented button { border: 0 !important; }
    [data-phone=app] .segmented button[aria-pressed=true] { background: var(--pm-card); color: var(--ink); box-shadow: var(--pm-shadow); }
    [data-phone=app] .tab-list { border-bottom: 0 !important; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    [data-phone=app] .tab-list::after { display: none !important; }
    [data-phone=app] .tab-list [data-tab] { border-radius: 999px; padding: 0 14px; background: var(--pm-card); box-shadow: var(--pm-shadow); border: 0 !important; color: var(--ink-2); white-space: nowrap; }
    [data-phone=app] .tab-list [data-tab][aria-selected=true] { background: var(--ink); color: var(--pm-card); }
    [data-phone=app] .note, [data-phone=app] .callout { border-left: 0 !important; background: var(--pm-card); border-radius: var(--pm-r-s); box-shadow: var(--pm-shadow); padding: 12px 14px; }
    [data-phone=app] details.fold-phone > summary { border: 0; background: var(--pm-card); border-radius: var(--pm-r-s); padding: 0 14px; box-shadow: var(--pm-shadow); }
    [data-phone=app] details.fold-phone[open] > summary { border-radius: var(--pm-r-s) var(--pm-r-s) 0 0; }

    /* the "New here?" and location bars: a dismissable card */
    [data-phone=app] .start-here { background: transparent; border: 0; padding: 10px var(--m-gutter, 14px) 0; }
    [data-phone=app] .start-here__inner { background: var(--pm-card); border-radius: var(--pm-r); box-shadow: var(--pm-shadow); margin: 0; width: auto; max-width: none; padding: 12px 14px; font-size: 13.5px; }

    /* footer: rounded top */
    [data-phone=app] .site-footer { border-top: 0 !important; border-radius: 22px 22px 0 0; margin-top: 18px; }
    [data-phone=app] .photo-credits { margin-top: 10px; }

    /* tap feedback */
    [data-phone=app] .widget, [data-phone=app] .country-card, [data-phone=app] .feat, [data-phone=app] .door, [data-phone=app] .only-tile, [data-phone=app] .try-card,
    [data-phone=app] .m-chip, [data-phone=app] .only-new a, [data-phone=app] .stat-strip__item, [data-phone=app] .tk-row, [data-phone=app] .tk-hero {
        transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s; -webkit-tap-highlight-color: transparent; }
    [data-phone=app] a.country-card:active, [data-phone=app] a.feat:active, [data-phone=app] a.door:active, [data-phone=app] .only-tile:active, [data-phone=app] a.try-card:active,
    [data-phone=app] .m-chip:active, [data-phone=app] .only-new a:active, [data-phone=app] a.tk-row:active, [data-phone=app] a.tk-hero:active {
        transform: scale(.975); box-shadow: var(--pm-shadow-hi); }
    [data-phone=app] main a.desk-card:active { transform: scale(.975); }

    /* lab pages: their own cards follow the same frame */
    [data-phone=app] .lab-hero { margin: 8px 0 18px; border-radius: 20px; padding: 20px 16px; box-shadow: var(--pm-shadow-hi); }
    [data-phone=app] .lab-hero__answer { border-radius: var(--pm-r-s); }
    [data-phone=app] .try-race__date { font-size: 20px; }
    [data-phone=app] .tk-hero, [data-phone=app] .tk-row { border-radius: var(--pm-r-s); border-left-width: 0; border-top-width: 0; box-shadow: var(--pm-shadow); }
    [data-phone=app] .tk-hero { border-top: 4px solid var(--c); }
    [data-phone=app] .tk-big { font-size: 40px; }
    [data-phone=app] .lab-section, [data-phone=app] .lab-how { border-radius: var(--pm-r); }
    /* the lab pages' "How this works" (owner, 10 Oct 2026: "no padding which looks rubbish"): a card like the rest */
    [data-phone=app] details.lab-how { background: var(--pm-card); box-shadow: var(--pm-shadow); padding: 0 16px; margin: 18px 0; }
    [data-phone=app] details.lab-how > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; list-style: none; font: 650 15px/1.3 var(--font-ui); }
    [data-phone=app] details.lab-how > summary::-webkit-details-marker { display: none; }
    [data-phone=app] details.lab-how > summary::after { content: "+"; font: 400 22px/1 var(--font-ui); color: var(--muted); }
    [data-phone=app] details.lab-how[open] > summary::after { content: "−"; }
    [data-phone=app] details.lab-how[open] { padding-bottom: 14px; }
    [data-phone=app] details.lab-how > p { font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; }
    [data-phone=app] details.lab-how > p.lab-note { font-size: 13px; padding-top: 10px; border-top: 1px solid var(--pm-line); }
}

/* a gentle rise as cards come into view (progressive: only where scroll-driven animation exists) */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        [data-phone=app] .lab-band__grid > .widget, [data-phone=app] .row-5 > .country-card, [data-phone=app] .stat-strip__item, [data-phone=app] .tk-row,
        [data-phone=app] .site-main--page > .card {
            animation: pm-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    }
}
@keyframes pm-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* the 2028 match-up widget on phones (owner, 11 Oct 2026: "does not fit the mobile screen width"): a slide of the swiping row
   is narrower than the screen so the next card can peek in, which squeezed its pickers and its two-column scoreboard. This
   one, the row's only interactive card, takes the full width; the row still swipes on to the next card. */
@media (max-width: 760px) {
    [data-phone=app] .feat-grid > .feat--pres28 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; }
    [data-phone=app] .feat--pres28 select { min-width: 0; max-width: 100%; }
}

/* a flag or logo at the start of a card's tinted label: the label is a flex box, so the space typed after the picture is dropped and
   the picture touched the words (owner, 12 Oct 2026, "Same votes, other rules"). The gap now comes from the box. */
@media (max-width: 760px) {
    [data-phone=app] :is(.widget__head, .feat, .country-card, .desk-card, .only-tile, .try-card) .kicker, [data-phone=app] .be-latest__box > .kicker { gap: 6px; }
    [data-phone=app] :is(.widget__head, .feat, .country-card, .desk-card, .only-tile, .try-card) .kicker > img, [data-phone=app] .be-latest__box > .kicker > img { margin: 0; }
}

/* a calmer phone (owner, 14 Oct 2026: "the mobile site has the text and spacing too large and leads to a kind of it being designed
   for a kids kind of look"): one size step down for headings, standfirsts and big figures, normal-weight headline tracking,
   tighter cards with smaller corners, plain kickers instead of tinted pills, and smaller section chips. Last in the file, so it
   overrides the rules above. */
@media (max-width: 760px) {
    [data-phone=app] {
        --fs-h1-m: 23px; --fs-display-m: 23px; --fs-h2-m: 18.5px; --fs-section-m: 18.5px; --fs-h3-m: 16px; --fs-h4-m: 15px;
        --fs-standfirst-m: 15px; --fs-body-m: 15px; --fs-num-m: 28px;
        --pm-r: 10px; --pm-r-s: 8px; --pm-pad: 14px;
    }
    [data-phone=app] main { font-size: 15px; }
    [data-phone=app] main h1, [data-phone=app] .headline-1, [data-phone=app] .display, [data-phone=app] .page-head h1,
    [data-phone=app] .area-lead .lead-story__copy .display { font-size: 23px !important; line-height: 1.16 !important; letter-spacing: -0.012em; font-weight: 700; }
    [data-phone=app] main h2:not(.widget__title):not(.only-strip__title):not(.try-it__title) { font-size: 18px; letter-spacing: -0.01em; }
    [data-phone=app] .section-header .section-title { font-size: 18.5px !important; }
    [data-phone=app] main h3 { font-size: 16px; }
    [data-phone=app] .widget__title, [data-phone=app] .feat__head { font-size: 16.5px !important; line-height: 1.25 !important; }
    [data-phone=app] .headline-3, [data-phone=app] .whats-happening .headline-3 { font-size: 18.5px !important; line-height: 1.2 !important; }
    [data-phone=app] .lead, [data-phone=app] .standfirst, [data-phone=app] .page-intro { font-size: 15px !important; line-height: 1.45 !important; }
    [data-phone=app] .big-number { font-size: 28px; }
    [data-phone=app] .stat-strip .big-number { font-size: 26px !important; }

    /* kickers: small coloured capitals, no pill */
    [data-phone=app] .widget__head .kicker, [data-phone=app] .feat .kicker, [data-phone=app] .country-card .kicker, [data-phone=app] .be-latest__box > .kicker,
    [data-phone=app] .desk-card .kicker, [data-phone=app] .only-tile .kicker, [data-phone=app] .try-card .kicker {
        padding: 0; margin-bottom: 6px; border-radius: 0; background: none; font: 700 11px/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
    [data-phone=app] .kicker { font-size: 11.5px; }

    /* cards, dark panels and chips: smaller corners and padding */
    [data-phone=app] .section-band--ink, [data-phone=app] .section-band--dark { border-radius: 12px; padding-block: 14px; }
    [data-phone=app] .lab-hero { border-radius: 12px; padding: 16px 14px; }
    [data-phone=app] .m-flags a { border-radius: 10px; }
    [data-phone=app] .m-chip { font-size: 13px; min-height: 32px; padding: 0 12px; box-shadow: none; }
    [data-phone=app] .section-band { padding-block: 10px; }
    [data-phone=app] .section-header { margin-bottom: 8px; }
}

/* the five menus' phone sheet (setting "FiveMenus"; owner, 15 Oct 2026; js/mobile.js textGroups): each menu a white card row
   that opens onto its links; the open one's links sit on a card beneath it */
@media (max-width: 820px) {
    [data-phone=app] .m-fold > summary { border: 0; background: var(--pm-card); border-radius: var(--pm-r-s, 8px); padding: 0 14px; box-shadow: var(--pm-shadow); }
    [data-phone=app] .m-fold[open] > summary { background: none; box-shadow: none; padding: 0 4px; }
    [data-phone=app] .m-fold ul { margin-top: 0; }
}
/* a country front's head panel (Snippets/_HeadHistory) as one of the phone's white cards, not a grey boxed figure between them
   (phone check, 16 Oct 2026) */
@media (max-width: 760px) {
    [data-phone=app] .ush-left--hub { background: var(--pm-card); border: 0; border-radius: var(--pm-r); box-shadow: var(--pm-shadow); padding: 4px 16px 6px; }
    [data-phone=app] .ush-left--hub .ush-lchart { border-bottom-color: var(--pm-line, var(--hair)); }
}