/* The phone top (owner, 12 Oct 2026, from the mock-ups: "flag colour header with the scoreboard hero section", "the live
   chips should be added in too", and on the front page the flags "but we don't need the country names under each flag").
   Setting "PhoneTop" -> <html data-phtop="1">. Phones only (to 760 px, the app design); nothing here shows on wider screens.
   1. the header: white with the logo on the left, the country's colour on the right behind the icons, a 45-degree edge
   2. the front page: the ten flags under the header (_Layout), and the "Next elections" card (Snippets/_NextElections)
   3. a country hub: the scoreboard card and live chips under the H1 (Snippets/_Scoreboard), the intro cut to two lines */

.pt-score, .pt-chips, .pt-more, .pt-flags, .pt-next { display: none; }

/* each country's block: its flag's colours blended at 115 degrees, white included where the flag has it (owner, 12 Oct
   2026: "make sure the white sections of the flag are taken account of in the blend") */
html { --pt-grad: #0b1d4a 0%, #1f4fb8 48%, #a3122b 100%; }
html[data-country="uk"] { --pt-grad: #012169 0%, #012169 22%, #f3f4f7 50%, #c8102e 78%, #c8102e 100%; }
html[data-country="us"] { --pt-grad: #0a3161 0%, #0a3161 22%, #f3f4f7 50%, #b31942 78%, #b31942 100%; }
html[data-country="fr"] { --pt-grad: #002654 0%, #0a3a8c 25%, #f3f4f7 50%, #e0323f 75%, #ce1126 100%; }
html[data-country="de"] { --pt-grad: #111111 0%, #1c1c1c 20%, #c10000 50%, #e3a800 85%, #ffce00 100%; }
html[data-country="es"] { --pt-grad: #aa151b 0%, #b5161d 22%, #f1bf00 50%, #b5161d 78%, #aa151b 100%; }
html[data-country="it"] { --pt-grad: #006b35 0%, #008c45 25%, #f3f4f7 50%, #e0313a 75%, #cd212a 100%; }
html[data-country="nl"] { --pt-grad: #ae1c28 0%, #c0303b 25%, #f3f4f7 50%, #2f5aa6 75%, #21468b 100%; }
html[data-country="pl"] { --pt-ang: 168deg; --pt-grad: #e3e6ec 0%, #eceef2 38%, #e8395a 62%, #dc143c 100%; }   /* white over red, as the flag; a light grey so the edge shows on the white header */
html[data-country="ca"] { --pt-grad: #d80621 0%, #d80621 26%, #f3f4f7 50%, #d80621 74%, #d80621 100%; }
html[data-country="au"] { --pt-grad: #00205b 0%, #012169 30%, #f3f4f7 55%, #e4002b 80%, #c8102e 100%; }

@media (max-width: 760px) {
    /* 1. the header stays white on the left, with the logo as it is; on the right, behind the flag, search and menu, a block in
       the country's colour with a 45-degree left edge and a stripe of its second colour along it (owner, 12 Oct 2026: "half of
       the header is coloured and half white and a 45 degree ... the coloured section should be on the right side"). */
    html[data-phtop="1"][data-phone=app] .site-header { isolation: isolate; }
    html[data-phtop="1"][data-phone=app] .site-header::before,
    html[data-phtop="1"][data-phone=app] .site-header::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; z-index: -1; pointer-events: none;
        clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pt-slant, 56px) 100%); display: block;
        width: auto; height: auto; opacity: 1; mix-blend-mode: normal; filter: none; -webkit-mask-image: none; mask-image: none; background-image: none; }
    /* no stripe along the edge (owner, 12 Oct 2026: "we don't need the dividing stripe - just the background colour") */
    html[data-phtop="1"][data-phone=app] .site-header::before { display: none; }
    html[data-phtop="1"][data-phone=app] .site-header::after { left: var(--pt-x, calc(100% - var(--pt-block, 172px)));
        background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 8px, transparent 8px 16px), linear-gradient(var(--pt-ang, 115deg), var(--pt-grad)); }
    html[data-phtop="1"][data-phone=app] .site-header .masthead__inner { position: relative; z-index: 1; }
    /* the block is a fixed width from the right (it holds the same three buttons on every phone), and the logo scales smoothly
       with the screen so it always ends clear of the slant (owner, 12 Oct 2026: "we need it to adjust to different widths. The
       logo has only 2 breakpoints and sizes - needs to have more"); about 11.4 x its font size is the whole lockup's width */
    html[data-phtop="1"][data-phone=app] .masthead .wordmark { font-size: clamp(12.5px, calc((100vw - 172px) / 11.4), 22px); }
    html[data-phtop="1"][data-phone=app] .m-bar .m-btn { color: #fff; }
    /* white icons stay readable where the blend passes through a flag's white */
    html[data-phtop="1"][data-phone=app] .m-bar .m-btn svg { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
    html[data-phtop="1"][data-phone=app] .m-flag img { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 1px 3px rgba(0, 0, 0, .3); }

    /* 2. the front page: the ten flags in a row under the header */
    /* all ten in one row on any phone, no scrolling (owner, 12 Oct 2026): ten equal columns, the flags shrinking with the screen */
    html[data-phtop="1"][data-phone=app] .pt-flags { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(4px, 1.6vw, 10px);
        padding: 10px var(--m-gutter, 14px) 4px; justify-items: center; }
    html[data-phtop="1"][data-phone=app] .pt-flags a { display: block; width: 100%; max-width: 40px; line-height: 0; }
    html[data-phtop="1"][data-phone=app] .pt-flags img { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 3px rgba(16, 24, 40, .15); }

    /* the dark cards: the faint logo curves resting on their bottom edge */
    html[data-phtop="1"][data-phone=app] :is(.pt-score, .pt-next) { color: #fff; border-radius: 12px; overflow: hidden;
        background: url("/img/logo/pf-ghost-dark.svg?v=2") right calc(-30px - 18vw) bottom 0 / 88% auto no-repeat, linear-gradient(150deg, #0f1b3a 0%, #121212 70%); }
    .pt-bar { position: relative; display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .15); }
    .pt-bar i { display: block; height: 100%; }
    .pt-bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; transform: translateX(-1px); }

    /* 3. a country hub: the scoreboard */
    html[data-phtop="1"][data-phone=app] .pt-score { display: block; margin: 12px 0 10px; padding: 15px 16px 14px; }
    .pt-score__k { margin: 0; font: 700 11px/1.35 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #ffb4b4; }
    .pt-score__k b { color: #fff; }
    .pt-score__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; }
    .pt-score__l { margin: 0; font: 700 10.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }   /* two lines: "Governing coalition" was cut to "Governing coaliti…" (14 Oct 2026) */
    .pt-score__n { margin: 6px 0 8px; font: 750 clamp(24px, 7.4vw, 30px)/1.05 var(--font-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pt-score__c { margin: 7px 0 0; font: 600 12.5px/1.3 var(--font-ui); color: rgba(255, 255, 255, .85); }
    .pt-score__c b { color: #8fb8ff; }

    /* the live chips */
    html[data-phtop="1"][data-phone=app] .pt-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; }
    .pt-chips::-webkit-scrollbar { display: none; }
    /* in the head card the row runs to the card's edge, so a chip cut off reads as "swipe", not as a clipping fault (phone check, 16 Oct 2026) */
    html[data-phtop="1"][data-phone=app] .hub-head__copy .pt-chips { margin-right: -16px; padding-right: 16px; }
    .pt-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; text-decoration: none;
        font: 650 12.5px/1 var(--font-ui); color: var(--ink); background: var(--pm-card, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, .09); }
    .pt-chip--move { color: var(--c); background: color-mix(in oklab, var(--c) 9%, var(--pm-card, #fff)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 28%, var(--pm-card, #fff)); }
    .pt-chip--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d42a2a; box-shadow: 0 0 0 3px rgba(212, 42, 42, .18); animation: pt-pulse 2s ease-in-out infinite; }
    @keyframes pt-pulse { 50% { box-shadow: 0 0 0 5px rgba(212, 42, 42, .06); } }
    @media (prefers-reduced-motion: reduce) { .pt-chip--live::before { animation: none; } }
    .pt-chips--dark .pt-chip { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
    .pt-chips--dark .pt-chip--move { color: color-mix(in oklab, var(--c) 45%, #fff); }

    /* the intro: two lines until "Read more" */
    html[data-phtop="1"][data-phone=app] .hub-head__copy:not(.pt-open) > .standfirst:first-of-type { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
    html[data-phtop="1"][data-phone=app] .hub-head__copy:not(.pt-open) > .standfirst ~ .standfirst,
    html[data-phtop="1"][data-phone=app] .hub-head__copy:not(.pt-open) > .meta,
    html[data-phtop="1"][data-phone=app] .hub-head__copy:not(.pt-open) > .hub-head__desk { display: none; }
    html[data-phtop="1"][data-phone=app] .pt-more { display: inline-block; padding: 4px 0; margin: 0; border: 0; background: none; font: 600 14px/1.3 var(--font-ui);
        color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

    /* the front page: "Next elections" */
    html[data-phtop="1"][data-phone=app] .pt-next { display: block; margin: 12px var(--m-gutter, 14px) 4px; padding: 14px 0 12px; }
    .pt-next__h { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 0 16px; font: 700 11px/1.2 var(--font-ui);
        letter-spacing: .08em; text-transform: uppercase; color: #ffb4b4; }
    .pt-next__h span { color: rgba(255, 255, 255, .6); letter-spacing: .02em; text-transform: none; font-weight: 600; }
    .pt-next__row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 12px 16px 4px; scrollbar-width: none; }
    .pt-next__row::-webkit-scrollbar { display: none; }
    .pt-sc { flex: 0 0 86%; scroll-snap-align: start; display: block; border-radius: 14px; padding: 12px 14px; color: #fff; text-decoration: none;
        background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
    .pt-sc > span { display: block; }
    .pt-sc__k { display: flex !important; align-items: center; gap: 7px; font: 700 13px/1.2 var(--font-ui); }
    .pt-sc__k img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
    .pt-sc__k small { margin-left: auto; font: 700 11px/1 var(--font-ui); color: #ffb4b4; white-space: nowrap; }
    .pt-sc__e { margin-top: 3px; font: 500 11.5px/1.25 var(--font-ui); color: rgba(255, 255, 255, .65); }
    .pt-sc__g { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 8px; }
    .pt-sc__g > span { display: block; min-width: 0; }
    .pt-sc__l { display: block; font: 700 10px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pt-sc__n { display: block; margin: 5px 0 7px; font: 750 23px/1.05 var(--font-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pt-sc__c { display: block; margin-top: 6px; font: 600 12px/1.3 var(--font-ui); color: rgba(255, 255, 255, .85); }
    .pt-sc__c b { color: #8fb8ff; }
    html[data-phtop="1"][data-phone=app] .pt-next .pt-chips { margin: 10px 16px 0; }
}

/* the front page's round button (it opens the country picker): a white globe line icon like the search and menu icons, in
   place of the dark "all countries" badge (owner, 12 Oct 2026, option C of the mock-ups) */
@media (max-width: 760px) {
    html[data-phtop="1"][data-phone=app][data-country="hub"] .m-flag img { display: none; }
    html[data-phtop="1"][data-phone=app][data-country="hub"] .m-flag { background: url("/img/logo/globe-white.svg") center / 25px 25px no-repeat;
        filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
}