/* ============================================================
   DPA Policy Intelligence Hub — mobile refinements
   ============================================================

   Loaded LAST on every page, after each page's own <style> block, so
   these rules win on equal specificity without needing !important.
   Exceptions are marked where a page sets the property inline.

   Kept in one file rather than edited into sixteen pages' inline CSS:
   one place to change, consistent across the app, and far less to get
   wrong at handover.

   The pages were already partly responsive — every one has a viewport
   tag, most have a 768px breakpoint, and the dashboard has a working
   hamburger. What was missing was the detail that decides whether a
   phone is usable rather than merely served.

   Audience note: the observatory is aimed at parliamentary staff and
   officials, who read it between meetings on a phone rather than at a
   desk. Mobile is the primary surface for a chunk of this audience, not
   a fallback.
   ============================================================ */


/* ------------------------------------------------------------
   1. Global guards, every width
   ------------------------------------------------------------ */

html {
    /* Stops Safari inflating text unpredictably when a phone is turned
       to landscape. Nothing in the app set this. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Nothing should be able to force the page wider than the screen. */
img, svg, video, iframe, canvas {
    max-width: 100%;
    height: auto;
}

/* Long URLs in item descriptions are the usual culprit for a stray
   horizontal scrollbar. */
a, p, li, h1, h2, h3, h4, td, th {
    overflow-wrap: break-word;
}

/* Wide content scrolls inside itself instead of pushing the page. */
table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
pre {
    max-width: 100%;
    overflow-x: auto;
}


/* ------------------------------------------------------------
   2. Phones and small tablets
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    /* ---- Form fields: the most consequential fix here ----

       iOS Safari zooms the viewport in whenever a focused field is
       smaller than 16px, and does not zoom back out afterwards, so the
       page is left scrolled sideways and the user has to pinch to
       recover. Sign-in was 15.2px, the subscribe form 14.4px and the
       research notes 13.1px, so the first thing anyone did on a phone
       broke the layout.

       !important because several of these carry an inline font-size. */
    input, select, textarea, button {
        font-size: 16px !important;
    }

    /* Full-width fields, comfortably tappable. */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], select, textarea {
        width: 100%;
        min-height: 44px;
        padding: 11px 13px;
    }
    textarea { min-height: 88px; }

    /* ---- Touch targets ----

       44px is the smallest reliable tap area. Several controls were
       nearer 24px, including the note and save buttons in the research
       workspace. */
    .btn, .btn-small, .btn-subscribe, .nav-link, .header-signin,
    button, .domain-chip, .filter-btn, .tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-small {
        padding: 10px 14px !important;
    }

    /* Adjacent links need space between them, or the wrong one gets
       hit. */
    .nav a, .nav-link { margin: 2px 0; }

    /* ---- Header ----

       At 375px the logo, a two-line title and a wrapped "Member Sign In"
       button filled a third of the first screen. */
    .header-inner, .header-container, .header-top-container {
        padding-left: 14px;
        padding-right: 14px;
        gap: 10px;
    }
    .logo-img {
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
    }
    .logo-main {
        font-size: 0.95rem;
        line-height: 1.2;
    }
    .logo-sub {
        font-size: 0.65rem;
    }
    .header-signin {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 0.82rem;
        flex: 0 0 auto;
    }
    /* The strapline above the main header is desktop garnish and costs a
       row of vertical space on a phone. */
    .header-top { display: none; }

    /* ---- Hero ----

       It occupied the entire first screen, so a visitor saw a headline
       and nothing else. The point of an observatory is that you can see
       what is happening. */
    .hero {
        padding-top: 34px;
        padding-bottom: 34px;
    }
    .hero h1 {
        font-size: clamp(1.6rem, 7.5vw, 2.1rem);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }
    .hero p, .hero-subtitle {
        font-size: 1rem;
        line-height: 1.5;
    }
    .hero-eyebrow {
        font-size: 0.62rem;
        letter-spacing: 0.1em;
    }

    /* ---- Vertical economy ----

       Desktop padding on a phone means a lot of scrolling for very
       little content. */
    .container, .header-container, .page-container {
        padding-left: 14px;
        padding-right: 14px;
    }
    .card, .stat-card, .panel, .tier-card {
        padding: 16px 14px;
    }
    .page-header {
        padding-top: 20px;
        padding-bottom: 16px;
    }
    .page-header h1 { font-size: 1.5rem; line-height: 1.2; }
    .page-header p  { font-size: 0.92rem; }
    section { scroll-margin-top: 12px; }

    /* ---- Headings ---- */
    h1 { font-size: 1.55rem; line-height: 1.2; }
    h2 { font-size: 1.28rem; line-height: 1.25; }
    h3 { font-size: 1.08rem; line-height: 1.3; }

    /* ---- Grids ----

       Any remaining fixed multi-column grid becomes a single column.
       This file loads last, so it wins over a page's own breakpoint
       where the two disagree. */
    .stats-grid, .stat-grid, .card-grid, .domain-grid, .tier-grid,
    .insights-grid, .people-grid, .two-col, .three-col {
        grid-template-columns: 1fr !important;
    }

    /* Grid and flex children shrink below their content width instead of
       forcing the row wider. This is what actually prevents sideways
       scroll, rather than hiding it with overflow on the body.

       Note on why not overflow-x: hidden — the header is position:
       sticky, and a clipping ancestor stops sticky working. Hiding the
       symptom would cost the sticky header. */
    [class*="grid"] > *, [class*="row"] > *,
    [class*="meta"] > *, [class*="header"] > * {
        min-width: 0;
    }

    /* ---- Feed items: the actual cause of sideways scroll ----

       .feed-item-meta is a flex row with 16px gaps carrying the source,
       the date, a domain chip, a save button, an AI Governance link and
       one person chip per named politician — and every one of those sets
       white-space: nowrap. With no flex-wrap, the row's minimum width is
       the sum of all of them, so it cannot fit a phone. That minimum
       propagated outward: the item forced the card wide, the card forced
       the page wide, and the two-column domain grid then sized itself to
       the inflated page and ran off the right edge.

       So the domain grid looking broken was a symptom. This is the fix.
       Both the dashboard and the domains page use these classes. */
    .feed-item-header,
    .feed-item-meta {
        flex-wrap: wrap;
    }
    .feed-item-meta {
        gap: 6px 10px;          /* 16px between six chips wasted a whole row */
        row-gap: 6px;
    }
    .feed-item, .feed-list, .card, .card-body {
        max-width: 100%;
    }

    /* Titles break rather than push. Policy item titles run long and
       contain things like "Digital Markets, Competition and Consumers
       Act 2024". */
    .feed-item-title {
        overflow-wrap: anywhere;
    }

    /* A row of filter tabs already scrolls sideways on its own, which is
       the right behaviour, but give it momentum scrolling and stop it
       being clipped awkwardly. */
    .filter-tabs {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .filter-tabs::-webkit-scrollbar { height: 0; }

    /* ---- Timeline on the calendar ----

       An 80px date gutter leaves too little for the title. */
    .timeline-event, .timeline-row {
        grid-template-columns: 58px 1fr;
        gap: 10px;
    }

    /* ---- Tables read as stacked blocks ---- */
    table, thead, tbody, tr { display: block; width: 100%; }
    thead { display: none; }
    td, th { display: block; width: auto; padding: 6px 0; border: none; }
    tr {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
}


/* ------------------------------------------------------------
   3. Narrow phones
   ------------------------------------------------------------ */

@media (max-width: 420px) {

    /* The organisation name under the title is the first thing to go
       when the header is genuinely tight. The logo still carries it. */
    .logo-sub { display: none; }

    .logo-main { font-size: 0.9rem; }

    .hero h1 { font-size: 1.45rem; }
    .hero p, .hero-subtitle { font-size: 0.95rem; }

    .container, .header-inner, .header-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .card, .stat-card, .panel { padding: 14px 12px; }

    /* Long consultation and bill titles need every pixel. */
    .item-title, .card-title { font-size: 1rem; line-height: 1.3; }
    .item-meta, .card-meta  { font-size: 0.75rem; }
}


/* ------------------------------------------------------------
   4. Respect the reader's settings
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}