/* make sure footer is at the bottom */
.main {
    min-height: 70vh;
    height: 100%
}

/* mx-auto doesn't work here because #navmenu (.navbar-collapse) shrink-wraps
   its content instead of stretching full width, so it never has slack for an
   auto margin to consume - center #navCategories against the fixed navbar
   itself instead. Gated to md+ (matching navbar-expand-md's own breakpoint)
   so the mobile hamburger menu keeps its normal in-flow stacked list. */
@media (min-width: 768px) {
    #navCategories {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}


h1 {
    margin-top: 20px;
    text-align: center;
}

h2 {
    margin-top: 20px;
    text-align: center;
}

h3 {
    margin-top: 20px;
}

p {
    text-align: start;
}

/* FT's paper colour. Charts sit directly on it rather than as white cards -
   see canvas below and the matching fill in chartRenderer's background
   plugin, which is what a downloaded chart image gets. */
:root {
    --paper: #fff1e5;
}

body {
    padding-top: 50px;
    background: var(--paper);
}

/* White, distinct from the paper-coloured page below it. Pinned to its
   original 57px rather than growing with the bigger logo below -
   Bootstrap's .navbar is flex with align-items:center, and
   box-sizing:border-box (Reboot) means an explicit height includes this
   rule's own padding, so the taller logo just centers within it instead
   of stretching it. */
.navbar.fixed-top {
    background: #fff;
    height: 57px;
}

/* Header logo: the mark (frontend/static/frontend/brand-mark.svg) plus a
   live-text wordmark rather than a raster image. Outlined rather than
   solid fill to match the mark's own thin-line treatment; falls back to
   solid text wherever -webkit-text-stroke isn't supported. */
.siteBrand {
    display: flex;
    align-items: center;
    gap: 17px;
}
.siteBrandWordmark {
    font-family: Optima, Candara, 'Gill Sans', 'Gill Sans MT', 'Segoe UI', sans-serif;
    font-weight: 300;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #1b1c20;
    -webkit-text-stroke: 1.1px #1b1c20;
}
@supports (-webkit-text-stroke: 1px black) {
    .siteBrandWordmark {
        color: transparent;
    }
}

/* Trick for debugging:
border: 1px solid #000;
often it is the margin:
class="m-auto"
often does the trick */

footer { padding-top: 50px; }

.imgrow {
    padding: 0;
    position: relative;
    text-align: center;
}

.imgrow img {
    border-radius: 0px 0px 25px 25px;
    opacity: 0.8;
    height: auto;
    width: 100%;
    z-index: -1;
}

.headline {
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2.5vw;
    font-weight: 500;
    text-shadow: 2px 2px 0px  #fff, -2px -2px 0px  #fff, 2px -2px 0px  #fff, -2px 2px 0px  #fff;
}


.butlerimage {
    max-width: 100%;
    height: auto;
    margin-right: 0px;
    padding: 0px 0 0 0;
}


.lowerrow {
    padding: 20px;
    background-color: #DFDFDF;
    border-radius: 25px;
}

.lowerrow p {
    font-size: medium;
    padding-top: 10px;
}

.md-48 {
    font-size: 48px !important;
}

.flex-container {
    display: flex;
    flex-direction: row;
  }

p {

    font-size: large;
}


/* FORMS */
.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
  }
  
.form-signin .checkbox {
    font-weight: 400;
  }

.form-signin .form-floating:focus-within {
    z-index: 2;
  }

.form-signin input[type="email"] {
    margin-bottom: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }


/* Site footer: one centred line, copyright last. The padding is what keeps
   it off the window edge when the line wraps on a narrow screen. */
.siteFooter {
    text-align: center;
    padding: 0 15px;
}

/* DASHBOARDS */

/* Every board's own name, above its controls/charts - the page's h1, since
   nothing else on a dashboard page currently is one. Same family AND size as
   the chart titles (see TITLE_FONT/its 20px size in chartRenderer.js) rather
   than the browser's much larger default h1 size, so the two read as the
   same typographic system instead of the page headline outscaling every
   chart title below it. */
.boardTitle {
    font-family: Optima, Candara, 'Gill Sans', 'Gill Sans MT', 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Was 70px - taller than a 20px line needs, leaving a lot of visible
       paper both above and below the text against the page's own top
       padding. Trimmed to fit the text plus a little breathing room. */
    height: 40px;
    /* The visible gap above this heading was never just this margin - a
       stray <br> in base.html between the navbar and .main contributed its
       own ~24px on top of it, invisibly. Removed there, so this margin is
       now the sole, exact source of the gap above the heading (gap = this
       value minus the 7px shortfall between body's 50px top padding and
       the navbar's own 57px rendered height). Set to land the true visible
       gap at half of what it measured before that fix (27px -> ~13px),
       since a plain 20px->10px margin cut alone was only diluting a
       constant, not actually halving what was on screen. Matched by
       .checkboxes' own top offset below, so the two start their headroom
       from the same line. */
    margin: 20px 0 0 0;
    /* Centering this across the full page (a plain margin: 20px 0 0 0) put
       it dead centre of the viewport, but the country panel eats into the
       left side of the actual content below - so the visual centre of the
       charts themselves sits to the right of the page's true centre, and
       the title looked off relative to what it's actually titling. These
       insets match #charts' own left/right edges exactly (--country-panel-
       width + the shared --content-inset on the left, since the panel no
       longer shares row space with it; --content-inset alone on the right,
       same as the row's own right edge), so the title centres over the
       charts panel specifically, not the page. Below the notice threshold
       this is moot - .boardTitle is hidden there (see below). */
    margin-left: calc(var(--country-panel-width) + var(--content-inset));
    margin-right: var(--content-inset);
}

p {
    padding: 0;
    margin: 0;
}

/* body { padding-top: 70px; } */

canvas { background: var(--paper); }

/* 20px below lg, widening to the original 50px once there's room for the
   two-column chart layout (see chartLayout.js's col-lg-6) to actually use
   it. Below lg, every pixel of side padding is a pixel not available to
   the single remaining chart column, and the fixed sidebar's own width is
   already non-negotiable (NorthMacedonia, see --country-panel-width) - so
   this is the one place there was real slack to reclaim, pushing the
   .tinyScreenNotice threshold below narrower than it could otherwise be. */
.container-fluid {
    padding: 10px 20px 0px 20px;
}
@media (min-width: 992px) {
    .container-fluid {
        padding: 10px 50px 0px 50px;
    }
}

/* Less room specifically under the page heading, without touching
   .container-fluid's own padding everywhere else it's used (e.g. the
   Reports layout) - only the copy of it that immediately follows
   .boardTitle on a dashboard page gets the tighter value. */
.boardTitle + .container-fluid {
    padding-top: 5px;
}

/* The country panel and the chart area split the row, so these two widths
   have to agree - they were two separate hardcoded 140px values that could
   silently drift apart. Widened from 140px because "NorthMacedonia" needs
   134px on one line (13px checkbox + 121px text) and only ~128px fit inside
   the old panel, so it was the one label that wrapped to two lines. Widened
   again, from 165px, since the custom checkbox appearance below is a few
   pixels wider than the browser default it replaced, eating back into
   NorthMacedonia's own margin. */
:root {
    --country-panel-width: 175px;
    /* Where the row's children actually start/end relative to the viewport
       edge: container-fluid's own side padding, minus the 12px negative
       margin Bootstrap's .row applies by default (half its 24px gutter),
       pulling row content back in by that much. Both halves are fixed px
       values (not percentages), so this offset holds at any viewport width -
       confirmed against the rendered layout, not assumed. Needed as its own
       variable because .checkboxes computes its position from the viewport
       (position: fixed) instead of inheriting it from flex layout. Tracks
       .container-fluid's own two-tier padding above - 20px-12px below lg,
       50px-12px at lg+. */
    --content-inset: 8px;
}
@media (min-width: 992px) {
    :root {
        --content-inset: 38px;
    }
}

.checkboxes {
    min-width: var(--country-panel-width);
    max-width: var(--country-panel-width);
    /* Independent of the page scroll, and not just "sticky until it locks" -
       position: fixed from the very start, so there is no brief window where
       it still scrolls with the page before catching. Taking it out of flow
       entirely means #charts has to reserve its old width by other means
       (see #charts' margin-left below) rather than sharing the row with it.
       top sits a little below the fixed navbar's own rendered height (57px)
       - flush against it read as too tight once seen live, so a small gap
       is back. 70px = the same ~13px visible gap .boardTitle now has above
       it (see its own comment - both start clearing the navbar from the
       same line rather than two independently-chosen gaps). If the list
       itself is taller than the viewport space below that point, it scrolls
       internally (overflow-y) rather than being clipped or pushing content
       off-screen - that internal scroll is the only scrolling this panel
       should ever do. overflow-x is explicit for that same reason, not left
       to its own default: per spec, an element with only one of
       overflow-x/-y set to something other than visible has the other
       force-computed to auto too, so without this line the map's 5-button
       colour-scale row (mapPaletteSelector.js) picked up a horizontal
       scrollbar of its own - not from the visible buttons (they fit fine),
       but from their own [data-tip] hover-tooltips, which stay in the
       layout (just invisibility: hidden, not display: none) and are wide
       enough on such narrow buttons to overflow past the row's own edge
       even though nothing is actually visible there day to day. */
    position: fixed;
    top: 70px;
    left: var(--content-inset);
    max-height: calc(100vh - 70px - 10px);
    overflow-y: auto;
    overflow-x: hidden;
}

#charts {
    width: calc(100% - var(--country-panel-width));
    /* .checkboxes no longer occupies row space (position: fixed above), so
       without this #charts would slide left to fill the gap instead of
       leaving room for the now-independent panel to float over. */
    margin-left: var(--country-panel-width);
}

/* Below this, the fixed sidebar plus a single chart column no longer fits
   anything worth looking at - tried an actual single-column *stacked*
   mobile layout first (country list above the charts, both full width);
   looked fine on a real phone but visibly wrong at the wider "just resized
   a desktop window" widths people actually test at, and that's a more
   common way to hit this than a genuine narrow phone. Reverted in favour
   of keeping the real fixed-sidebar layout as long as it physically fits,
   and dropping straight to .tinyScreenNotice (see includes/dashboard.html)
   below that - no in-between state. The chrome (nav/footer/board heading)
   drops out too on a dashboard page specifically (see body.dashboardPage
   below) so the message stands alone rather than sitting under a navbar
   and above a footer that have nothing to do with it.

   640px, not a rounder number, because the actual thing that breaks first
   as this narrows is chartLayout.js's three-zone chart footer (Save/CSV |
   Source | share icons) - each zone is an equal flex-basis third, and
   "Source: EUROSTAT" wraps onto two lines once its third drops below
   ~130px. Measured directly (.chartFooterMid's own height jumps from 24px
   to 39px), not eyeballed: clean at 630px, wrapped at 620px. 640 is that
   line plus a small margin, not the point where the chart canvas itself or
   the fixed 175px country panel actually run out of room - both still
   have slack left here. */
.tinyScreenNotice {
    display: none;
}
@media (max-width: 639px) {
    .tinyScreenNotice {
        display: block;
        padding: 40px 20px 0;
    }
    body.dashboardPage .checkboxes,
    body.dashboardPage #charts,
    body.dashboardPage #info {
        display: none;
    }
    /* The navbar/logo stay - only the content that has nothing to show and
       the footer below it drop out. Body keeps its normal top padding
       (see body { padding-top: 50px } above) since the fixed navbar is
       still there to clear. */
    body.dashboardPage .siteFooter {
        display: none;
    }
    /* The board's own name is as irrelevant as the footer once there's no
       dashboard under it to name - the notice stands alone under the
       navbar. */
    body.dashboardPage .boardTitle {
        display: none;
    }
}

/* One country per row. The labels are inline by default, so how many share a
   line depended on the panel width and the length of adjacent country names -
   widening the panel made short pairs like "Finland France" collapse onto one
   line. Block labels make the single-column list independent of both. */
#checkboxes label {
    display: block;
}

/* A plain outline box with a black checkmark drawn on top when checked,
   rather than the browser default's own filled-blue-square appearance
   (appearance: none drops that entirely, so every visual below is this
   site's own). The checkmark itself is the classic two-side-of-a-square,
   rotated 45° trick - a real tick shape needs no image or icon font. */
#checkboxes input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    border: 1px solid #999;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

#checkboxes input[type=checkbox]:checked {
    border-color: #000;
}

#checkboxes input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4.5px;
    height: 8.5px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#checkboxes input[type=checkbox]:disabled {
    cursor: default;
}

/* Clear button and the limit note share a row under the country list, the
   button on the left and centred against the note's two lines rather than
   sitting on the first one's baseline. */
.countryLimitRow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

.clearCountriesButton {
    font-size: x-small;
    color: #000;
    background: transparent;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 2px 7px;
    cursor: pointer;
    flex: 0 0 auto;
}

.clearCountriesButton:hover,
.clearCountriesButton:focus-visible {
    border-color: #000;
    background: rgba(0, 0, 0, 0.04);
}

/* A literal hue spectrum, rather than the plain white every other button in
   this row keeps - "refresh colours" is exactly what this one does, so it
   gets to look like it instead of being identical to Clear/All until
   hovered. White icon/text (overriding .clearCountriesButton's own black)
   for contrast against the gradient's darker bands - a bolder icon stroke
   is its own template, not CSS, since it's a hand-drawn inline svg. */
#refreshColors {
    background: linear-gradient(to right, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa);
    border-color: transparent;
    color: #fff;
}

#refreshColors:hover,
#refreshColors:focus-visible {
    border-color: #fff;
    background: linear-gradient(to right, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa);
}

/* The cap is MAX_COUNTRIES in src/events.js. Quiet until the limit is
   actually reached, at which point it is the only explanation for the
   greyed-out countries above it. */
.countryLimitNote {
    font-size: x-small;
    color: #777;
    line-height: 1.3;
}

.countryLimitNote.atLimit {
    color: #000;
    font-weight: 700;
}

/* No cursor: not-allowed here - the greyed-out opacity alone is enough to
   read as disabled, and the "not-allowed" icon on hover was redundant on
   top of it. */
#checkboxes label.countryDisabled {
    opacity: 0.4;
}

.headline {
    margin-bottom: 020px;
}

#info h4 {
    font-size: x-large;
    text-transform: uppercase;
    text-align: left;
    padding: 0;
    margin: 0;
}

/* #info is now the footnote row beneath the charts, not a header. A little
   air above it so it does not crowd the last chart's buttons, and more air
   below so it doesn't run straight into the site footer. */
#info {
    margin-top: 6px;
    margin-bottom: 30px;
}


#info p {
    font-size: small;
    padding: 0;
    margin: 0;
    text-align: left;
}

/* Empty column matching the left bar, so the header panel begins where the
   charts begin. Same custom property, so the two cannot drift apart. */
.infoOffset {
    min-width: var(--country-panel-width);
    max-width: var(--country-panel-width);
}

/* Two ids so it beats #info p's text-align: left. */
#info p#unit {
    text-align: center;
}

/* Chart date-range buttons, in the top-left panel where the SOURCE: EUROSTAT
   link used to be. Built by src/rangeSelector.js from RANGES. */
/* The range controls now live inside .checkboxes, which is already pinned to
   --country-panel-width, so they inherit the panel's width and left edge for
   free. This cap is belt and braces. */
.rangeSelector,
.rangeSlider {
    max-width: var(--country-panel-width);
}

.rangeSelector {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.rangeButton {
    flex: 1 1 0;
    padding: 2px 0;
    font-size: small;
    color: #000;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
}

.rangeButton:hover {
    border-color: #198754;
}

/* Matches the green the navbar border already uses, so the active range reads
   as selected without introducing a new accent colour. */
.rangeButton.active {
    color: #fff;
    background: #198754;
    border-color: #198754;
}

/* The map's colour-scale buttons (mapPaletteSelector.js) reuse .rangeButton
   for their border/sizing/active state and add just this - a small gradient
   block standing in for the real d3 interpolator each one actually draws
   the map from, built from a couple of representative hex stops
   (mapPalette.js's own swatch) rather than the interpolator itself, since
   this module has no D3 dependency to call it with. */
.mapPaletteSwatch {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 2px;
}

/* Two-handle date slider, under the preset buttons. Two native range inputs
   stacked on one track: the track draws the rail and the selected span, and
   the inputs contribute only their thumbs. */
.rangeSlider {
    margin-bottom: 12px;
}

.rangeSliderTrack {
    position: relative;
    height: 18px;
    --from: 0%;
    --to: 100%;
}

/* The rail, plus the selected span drawn on top of it in the accent green. */
.rangeSliderTrack::before,
.rangeSliderTrack::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 3px;
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}

.rangeSliderTrack::before {
    left: 0;
    right: 0;
    background: #ced4da;
}

.rangeSliderTrack::after {
    left: var(--from);
    right: calc(100% - var(--to));
    background: #198754;
}

/* Inputs are transparent overlays; only their thumbs are visible. Without
   pointer-events: none the upper input would cover the whole track and the
   lower thumb could never be grabbed - the thumbs re-enable it for themselves. */
.rangeSliderTrack input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.rangeSliderTrack input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #198754;
    cursor: pointer;
    pointer-events: auto;
}

.rangeSliderTrack input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #198754;
    cursor: pointer;
    pointer-events: auto;
}

.rangeSliderLabel {
    font-size: x-small;
    color: #555;
    text-align: center;
    padding-top: 2px;
}


/* Share links, last in the site footer (base.html) behind their own pipe -
   moved here from the left panel's own foot, which now ends at the country
   limit row instead. Inline with the footer's own text rather than the
   block paragraph they used to sit in. */
.footerShareButtons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

.footerShareButtons .shareButton {
    /* .shareButton's own right margin (below) was sized for the old
       block-stacked left-panel layout - this flex row's gap replaces it,
       so it's zeroed here rather than doubling up with it. */
    margin: 0;
}

/* Instant tooltips. The native title attribute is unusable here because the
   delay before it appears is fixed by the browser - roughly a second, with no
   way to shorten it - so anything wanting immediate feedback has to draw its
   own. Applied via data-tip so title can stay off the element and the two
   don't both fire. */
[data-tip] {
    position: relative;
}

[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 7px;
    border-radius: 3px;
    background: #333;
    color: #fff;
    font-size: x-small;
    line-height: 1.4;
    white-space: nowrap;
    /* Hidden rather than absent, so no layout shift when it appears, and
       pointer-transparent so it can never sit between cursor and link. */
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    visibility: visible;
}

/* Chart source links point at the dataset in Eurostat's data browser. Black
   rather than the default link blue, matching .featureButton beside it - the
   underline already marks it as a link. */
.sourceLink,
.sourceLink:hover,
.sourceLink:focus {
    color: #000;
    text-decoration: underline;
}

/* Same size as .chartShareButton under each chart, so the two icon sets
   read as one system rather than a bigger set here and a smaller set there.
   The right margin is .footerShareButtons's own default spacing between
   icons - overridden to 0 there in favour of that flex row's gap instead. */
.shareButton {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
}

/* The row under every chart: downloads left, source centred, share right.
   Equal-basis zones rather than margins between content-sized children, so
   "Source: EUROSTAT" sits on the chart's centre line whatever the labels
   either side of it happen to be. */
.chartFooterZone {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.chartFooterMid {
    justify-content: center;
}

.chartFooterRight {
    justify-content: flex-end;
    gap: 10px;
}

/* Sized to the 16px download icons beside them rather than the 26px of the
   board-level buttons in the left bar - this row is a footnote, not a call
   to action. */
.chartShareButton {
    width: 16px;
    height: 16px;
}

.featureButton {
    color: black;
    text-decoration: none;
}

.featureText {
    font-size: small;
    padding-left: 10px;
}

/* Dataset blurb under a chart's footer. */
.chartDescription {
    font-size: small;
    color: #333;
    text-align: left;
    margin: 10px 0 20px 0;
}

.graph-image {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: calc(100% - 16px);

}

.share-buttons {
    margin-top: 10px;
    margin-right: 10px;
}

/* DASHBOARDS END */

/* REPORTS */

.reportsLayout {
    padding: 10px 50px 0 50px;
}

.reportsSidebar {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 10px;
    padding-bottom: 20px;
}

.reportsSidebarTitle {
    text-transform: uppercase;
    font-size: small;
    letter-spacing: 0.05em;
    color: #777;
    margin-bottom: 12px;
}

.reportsSidebarItem a {
    display: block;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 3px;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: #000;
}

.reportsSidebarItem a:hover {
    background: rgba(25, 135, 84, 0.08);
    border-left-color: #198754;
}

.reportsSidebarItem.active a {
    background: rgba(25, 135, 84, 0.12);
    border-left-color: #198754;
}

.reportsSidebarItemTitle {
    display: block;
    font-size: small;
    font-weight: 600;
    line-height: 1.3;
}

.reportsSidebarItem.active .reportsSidebarItemTitle {
    color: #198754;
}

.reportsSidebarItemDate {
    display: block;
    font-size: x-small;
    color: #777;
    margin-top: 2px;
}

/* Same reading typography as the privacy policy (Medium-style: serif body,
   sans headings, small but readable) - font loaded per-page via each
   report template's own extra_head block, same as privacy.html. */
.reportsMain {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: #242424;
    padding: 60px 30px 80px 30px;
}

.reportsMain h1 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    text-align: left;
    color: #121212;
    margin: 0 0 8px 0;
}

.reportsMain h2,
.reportsMain h3 {
    font-family: "Inter", sans-serif;
    text-align: left;
    color: #121212;
}

.reportsMain h2 {
    font-weight: 600;
    font-size: 15px;
    margin: 2em 0 0.6em 0;
}

.reportsMain h3 {
    font-weight: 600;
    font-size: 14px;
    margin: 1.6em 0 0.5em 0;
}

.reportsMain p {
    margin: 0 0 1.1em 0;
    text-align: left;
}

.reportsMain a {
    color: #198754;
    text-decoration: underline;
    text-decoration-color: rgba(25, 135, 84, 0.35);
}

.reportsMain a:hover {
    text-decoration-color: #198754;
}

.reportMeta {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: #767676;
    margin: 0 0 36px 0 !important;
}

.chartBlock {
    max-width: 700px;
    margin: 20px auto;
    position: relative;
    /* Always starts on its own line below the floated map figure
       (.mapFigure below), regardless of how much of its own height the
       paragraph between them actually wraps past - without this, a bar
       chart could still land squeezed into whatever width is left beside
       a tall float rather than the full reading column. */
    clear: both;
}

.chartCaption {
    font-family: "Inter", sans-serif;
    font-size: 11.5px !important;
    color: #767676;
    text-align: center !important;
    max-width: 700px;
    margin: 8px auto 1.1em auto !important;
}

/* REPORTS END */

/* CHOROPLETH MAP (europes-innovation-divide report) */

/* Floated so the paragraph right after it (in the HTML, not just visually)
   wraps alongside it rather than the map sitting alone as its own
   full-width block - the same "figure beside body text" convention as a
   print magazine's inset chart. .chartBlock's own clear:both is what stops
   this float from also swallowing the *next* section's bar chart once the
   wrapped paragraph ends. Unfloated below 768px (frontend/base.html's own
   nav breakpoint) - narrow enough that wrapping text down one side of the
   map would leave it too cramped to read the country shapes at all. */
.mapFigure {
    margin: 4px 0 20px 0;
}

@media (min-width: 768px) {
    .mapFigure {
        float: right;
        width: 150px;
        margin: 4px 0 20px 28px;
    }
}

.mapBlock {
    max-width: 100%;
    margin: 0;
    position: relative;
}

.mapFigure .chartCaption {
    max-width: 100%;
    text-align: left !important;
    margin: 8px 0 0 0 !important;
}

.euroMap {
    width: 100%;
    height: auto;
    display: block;
}

.mapCountry {
    stroke: #fff1e5;
    stroke-width: 0.6;
    transition: fill 0.2s ease;
}

.mapCountry:hover {
    stroke: #121212;
    stroke-width: 1.2;
}

.mapTooltip {
    position: fixed;
    display: none;
    background: #121212;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    line-height: 1.4;
    pointer-events: none;
    z-index: 20;
    max-width: 200px;
}

.mapTooltip.visible {
    display: block;
}

.mapLegend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Names the unit the colour scale encodes (e.g. "% of GDP") - without it,
   the gradient below is just an unlabelled ramp of green with no stated
   quantity, unlike every Chart.js axis on this same page which always
   carries its own title. */
.mapLegendLabel {
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    color: #767676;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* MAP END */

/* PRIVACY POLICY - Medium-style reading typography: serif body text, a
   narrow measure for readability, offset right of the page centre rather
   than dead-centred. Scoped entirely to .privacyContainer so nothing else
   on the site inherits it - the font itself is only loaded on this page
   too, via base.html's extra_head block. */

.privacyLayout {
    display: grid;
    grid-template-columns: minmax(20px, 1fr) minmax(0, 640px) minmax(20px, 1fr);
}

/* Offset right of centre (wider left track than right) only once there is
   enough width to spare - on narrower screens this would just crowd the
   text against the left edge. */
@media (min-width: 992px) {
    .privacyLayout {
        grid-template-columns: 1.9fr minmax(0, 640px) 1fr;
    }
}

.privacyContainer {
    grid-column: 2;
    padding: 60px 20px 80px 20px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: #242424;
}

.privacyTitle {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    text-align: left;
    color: #121212;
    margin: 0 0 8px 0;
}

.privacyMeta {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: #767676;
    margin: 0 0 36px 0;
}

/* Section dividers, not the page title - most of these are marked up as
   h1 in the source content itself (a pre-existing quirk, not something
   this pass fixes), so they're styled a step down from .privacyTitle. */
.privacyContainer h1,
.privacyContainer h2,
.privacyContainer h3 {
    font-family: "Inter", sans-serif;
    text-align: left;
    color: #121212;
}

.privacyContainer h1 {
    font-weight: 700;
    font-size: 17px;
    margin: 2.6em 0 0.7em 0;
}

.privacyContainer h2 {
    font-weight: 600;
    font-size: 15px;
    margin: 2em 0 0.6em 0;
}

.privacyContainer h3 {
    font-weight: 600;
    font-size: 14px;
    margin: 1.6em 0 0.5em 0;
}

.privacyContainer p {
    margin: 0 0 1.1em 0;
    text-align: left;
}

.privacyContainer ul {
    margin: 0 0 1.1em 0;
    padding-left: 1.3em;
}

.privacyContainer li {
    margin-bottom: 0.7em;
}

.privacyContainer li p {
    margin-bottom: 0.3em;
}

.privacyContainer a {
    color: #198754;
    text-decoration: underline;
    text-decoration-color: rgba(25, 135, 84, 0.35);
}

.privacyContainer a:hover {
    text-decoration-color: #198754;
}

.privacyContainer code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.85em;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1em 0.4em;
    border-radius: 3px;
}

/* PRIVACY POLICY END */