/* ---------------------------------------------------------------------------
   Your Beer, Your Choice — stylesheet

   The look is an international league table, not a brewery advert: clean,
   modern, competitive, global. No wood, no hops, no beer-garden imagery.
   Numbers are the loudest thing on every screen, because the position and
   the vote count are what people came for.
   --------------------------------------------------------------------------- */

:root {
    --bg:        #F7F4EC;
    --ink:       #101412;
    --gold:      #D7A928;
    --cta:       #F2B233;
    --blue:      #2563EB;
    --success:   #36A269;
    --danger:    #D95757;

    --card:      #FFFFFF;
    --line:      rgba(16, 20, 18, 0.10);
    --line-firm: rgba(16, 20, 18, 0.18);
    --muted:     rgba(16, 20, 18, 0.58);
    --shadow:    0 1px 2px rgba(16, 20, 18, 0.05), 0 8px 24px rgba(16, 20, 18, 0.05);

    --radius:    14px;
    --wrap:      1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Inter is the face design.md asks for. Nothing is fetched from another
   server — a page on a German domain calling out to Google Fonts is exactly
   the kind of data sharing section 47 sets out to avoid. To get Inter for
   every visitor, drop its woff2 files into main/assets/fonts/ and add the
   matching @font-face rules here; until then the system face takes over. */
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-feature-settings: "tnum" 1;
    padding-bottom: 72px; /* room for the mobile bar */
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-weight: 800; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 16px;
}

/* Country flags.

   The flags in the database are already emoji — Germany is stored as the
   two regional indicators U+1F1E9 U+1F1EA, not as the text "DE". Windows
   simply has no flag glyphs in Segoe UI Emoji, so it draws those two
   characters as the letters they are built from, and the site appeared to
   be showing country codes to about half its visitors.

   This font supplies the missing glyphs. Self-hosted, like everything
   else: nothing is fetched from another server.

   unicode-range keeps it safe and confines the cost. The font can never
   touch ordinary text — it is asked for regional indicators and the few
   tag characters that build England, Scotland and Wales, nothing else —
   and the 76 KB is only fetched by a page that actually shows a flag.

   It must come FIRST in the stack, which looks wrong and is not. Fallback
   is per character: the browser takes the first face that has a glyph for
   it. Segoe UI Emoji *does* have the regional indicators — drawing them as
   the boxed letters "D" "E" is exactly what it thinks a glyph is — so it
   claims them and nothing later in the list is ever consulted. Put this
   font after it and the rule does nothing at all on the one platform it
   exists to fix.

   The price is that Apple and Android download it too, having had perfectly
   good flags already. 76 KB, cached for a month by main/.htaccess, once per
   visitor. Worth it to stop half the audience seeing letter pairs. */
@font-face {
    font-family: "Country Flags";
    src: url('fonts/TwemojiCountryFlags.woff2') format('woff2');
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
                   U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    font-display: swap;
}

.flag {
    display: inline-block;
    font-size: 0.95em;
    letter-spacing: 0;
    font-family: "Country Flags", "Apple Color Emoji", "Segoe UI Emoji",
                 "Noto Color Emoji", sans-serif;
}
.flag-lg { font-size: 1.1em; }

/* --- Header --------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(247, 244, 236, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

/* 84px leaves the 64px badge ten pixels of air above and below. The bar is
   sticky, so this height is taken off the top of every screen — raise the
   badge and this has to come with it. */
.header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 84px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.logo:hover { text-decoration: none; }

/* Big enough to read: at 64px the glass, the wreath and the lettering
   inside the badge all come through, which is the whole point of a badge
   with words in it. The bar above is sized to match — see .header-inner.

   Delivered at 192px and drawn at 64, so it stays sharp on a phone, where
   the screen packs two or three dots into every pixel the layout talks
   about. The size is repeated on the tag itself so the header does not
   jolt sideways as the picture arrives.

   Inside its ring the badge is see-through, so the header's cream shows
   through and it sits on the bar rather than on a white disc. */
.logo-mark {
    width: 64px;
    height: 64px;
    flex: none;
}

/* Narrow screens show the badge on its own — see the wider-screens block
   at the foot of this file. */
.logo-text { display: none; }

/* The palette's gold, not the slightly deeper one inside the picture. At
   17px nobody sees the difference, and a second gold in the palette is a
   price paid on every screen. */
.logo-accent { color: var(--gold); }

.main-nav { display: none; gap: 18px; font-weight: 600; font-size: 14px; }
.main-nav a { color: var(--muted); padding: 4px 0; }
.main-nav a:hover { color: var(--ink); text-decoration: none; }
.main-nav a.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }

.header-search { position: relative; flex: 1; min-width: 0; }
.header-search input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line-firm);
    border-radius: 999px;
    background: var(--card);
    font: inherit;
    font-size: 14px;
}
.header-search input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

.header-add { display: none; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.06s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-vote {
    background: var(--cta);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(16, 20, 18, 0.12);
}
.btn-vote:hover { background: var(--gold); }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-firm);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-small { padding: 7px 12px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }
.btn-big { padding: 16px 24px; font-size: 18px; }

/* --- Hero ----------------------------------------------------------------- */

.hero { padding: 40px 0 28px; text-align: center; }

.hero h1 {
    font-size: clamp(30px, 7vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}
.hero-number { color: var(--gold); }

.hero-sub { margin: 14px 0 24px; font-size: 17px; color: var(--muted); }

.hero-search {
    position: relative;
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}
.hero-search input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border: 1px solid var(--line-firm);
    border-radius: 999px;
    background: var(--card);
    font: inherit;
    font-size: 16px;
}
.hero-search input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.hero-search .btn { flex: none; }

.hero-add { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.hero-add a { font-weight: 700; color: var(--ink); }

.hero-count {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- Live search suggestions ---------------------------------------------- */

.suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--card);
    border: 1px solid var(--line-firm);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-align: left;
}

.suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion.is-active { background: var(--bg); text-decoration: none; }
.suggestion-name { font-weight: 600; }
.suggestion-meta { color: var(--muted); font-size: 13px; }
.suggestion-rank { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.suggestion-add { font-weight: 700; justify-content: center; color: var(--blue); }

/* --- Page headings -------------------------------------------------------- */

.page-head { padding: 32px 0 20px; }
.page-head h1 { font-size: clamp(26px, 5vw, 40px); letter-spacing: -0.03em; }
.page-sub { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.page-kicker { margin: 0 0 12px; font-size: 14px; color: var(--muted); font-weight: 600; }
.page-links { margin: 12px 0 0; font-size: 14px; font-weight: 700; }

/* --- Panels --------------------------------------------------------------- */

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 0 20px;
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 17px; }
.panel-more { font-size: 13px; font-weight: 700; color: var(--muted); }

/* One action closing off a panel — a full-width strip, so it reads as a
   button rather than a sentence that wandered in. */
.panel-action {
    display: block;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--bg);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}
.panel-action:hover {
    background: rgba(242, 178, 51, 0.18);
    text-decoration: none;
}

/* A line explaining the table above it — why a brewery has votes when
   there is no button to vote for one. It closes the panel the same way
   .panel-action does: a strip with a rule above it. Left unstyled it sat
   at full size against the panel edge and read as a stray sentence
   hanging off the last row, rather than as a footnote to the list. */
.panel-note {
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--bg);
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

/* The visitor's own country goes first: at home the gap to the next place
   is small enough to be worth one vote, which is the point of the whole
   thing (section 9). */
.panel-home-country { border-color: rgba(215, 169, 40, 0.5); }
.panel-home-country .panel-head { background: rgba(242, 178, 51, 0.14); }

/* --- Figures table (/caveau) ---------------------------------------------- */

/* Six columns of numbers do not fit a phone. The table keeps its size and
   the panel scrolls sideways, rather than the type shrinking until the one
   thing the page is for cannot be read. */
.stat-scroll { overflow-x: auto; }

.stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.stat-table th,
.stat-table td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    text-align: right;
    white-space: nowrap;
}

.stat-table thead th {
    background: var(--bg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The row labels are the only words in the table. Everything else is a
   number, and numbers line up on the right. */
.stat-table tbody th { text-align: left; font-weight: 700; }
.stat-table tbody td { font-variant-numeric: tabular-nums; }

/* The panel draws its own edge, and .panel-note draws the line above
   itself, so the last row must not add a second one. */
.stat-table tbody tr:last-child th,
.stat-table tbody tr:last-child td { border-bottom: 0; }

.two-up { display: grid; gap: 20px; }

/* Headings that separate the home country's part of the front page from the
   world's. Without them the two sets of panels read as one long list. */

.band-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 8px 2px 14px;
}

.band-head-main { min-width: 0; }

.band-title {
    font-size: clamp(20px, 4vw, 26px);
    letter-spacing: -0.03em;
}

.band-sub { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

/* Changing country belongs next to the country's name, where the visitor
   is already looking — not tucked under the ranking as a footer. A pill
   makes it read as a control rather than a stray sentence. */
.band-switch {
    flex: none;
    padding: 7px 14px;
    border: 1px solid var(--line-firm);
    border-radius: 999px;
    background: var(--card);
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}
.band-switch:hover {
    color: var(--ink);
    border-color: var(--ink);
    text-decoration: none;
}

.band-head-world {
    margin-top: 12px;
    padding-top: 26px;
    border-top: 1px solid var(--line-firm);
}

/* --- Ranking rows --------------------------------------------------------- */

.rank-list { list-style: none; margin: 0; padding: 0; }

.rank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.rank-row:last-child { border-bottom: 0; }
.rank-row:hover { background: rgba(215, 169, 40, 0.05); }

.rank-row-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.rank-row-link:hover { text-decoration: none; }

.rank-pos {
    flex: none;
    min-width: 46px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--muted);
}
.rank-medal .rank-pos { font-size: 22px; color: var(--ink); }

.rank-body { min-width: 0; flex: 1; }
.rank-name {
    display: block;
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rank-meta {
    display: block;
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-numbers { flex: none; text-align: right; }
.rank-votes {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.rank-votes-label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.rank-note { display: block; font-size: 13px; font-weight: 800; color: var(--success); }

.compact .rank-votes { font-size: 15px; }

/* --- Beer page ------------------------------------------------------------ */

.beer-page {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 20px;
    margin: 24px 0 20px;
}

.beer-head h1 { font-size: clamp(26px, 6vw, 42px); letter-spacing: -0.03em; }
.beer-sub { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.beer-aliases { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

.rank-cards { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 24px 0 0; }

.rank-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    background: var(--bg);
}
.rank-card-world { border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.05); }
.rank-card-country { border-color: rgba(215, 169, 40, 0.5); background: rgba(242, 178, 51, 0.12); }

.rank-cards-note {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

.page-note {
    margin: 0 0 28px;
    font-size: 13px;
    color: var(--muted);
}

.field-note {
    display: block;
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.rank-card-label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.rank-card-number {
    margin: 6px 0;
    font-size: clamp(40px, 12vw, 64px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}
.rank-card-foot { margin: 0; font-size: 13px; color: var(--muted); }

.target {
    margin: 20px 0;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: rgba(242, 178, 51, 0.16);
    border: 1px solid rgba(215, 169, 40, 0.4);
    font-size: 15px;
}
.target-first { background: rgba(54, 162, 105, 0.12); border-color: rgba(54, 162, 105, 0.35); }

/* --- Battles and movers --------------------------------------------------- */

.battle-grid { display: grid; gap: 1px; background: var(--line); }

.battle {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    background: var(--card);
}

.battle-side { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; min-width: 0; }
.battle-name { display: block; font-weight: 700; font-size: 14px; }
.battle-votes { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; }

.battle-middle { text-align: center; }
.battle-vs {
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.battle-gap { display: block; font-size: 12px; font-weight: 700; color: var(--danger); max-width: 96px; }

.mover-list { list-style: none; margin: 0; padding: 0; }
.mover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.mover:last-child { border-bottom: 0; }
.mover-link { min-width: 0; }
.mover-link:hover { text-decoration: none; }
.mover-name { display: block; font-weight: 700; font-size: 14px; }
.mover-move { display: block; font-size: 13px; color: var(--muted); font-weight: 700; }
.mover-gain { flex: none; font-size: 14px; font-weight: 800; color: var(--success); }

/* --- Countries ------------------------------------------------------------ */

.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px;
    background: var(--line);
}

.country-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    background: var(--card);
}
.country-chip:hover { background: rgba(215, 169, 40, 0.08); text-decoration: none; }
.country-chip-name { font-weight: 700; font-size: 14px; }
.country-chip-count { font-size: 12px; color: var(--muted); }
.country-chip-quiet { flex-direction: row; align-items: center; gap: 8px; }

/* --- Forms ---------------------------------------------------------------- */

.form-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 20px;
    max-width: 520px;
}

.field { display: block; margin: 0 0 16px; }
.field-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.field-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }

.field input, .field select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line-firm);
    border-radius: 10px;
    background: var(--bg);
    font: inherit;
    font-size: 16px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

.form-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

.choice { max-width: 520px; margin: 0 0 32px; }
.choice-question { font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.choice-form { margin: 10px 0 0; }
.choice-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* --- Vote screens --------------------------------------------------------- */

.vote-page, .vote-done {
    max-width: 520px;
    margin: 28px auto 40px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 20px;
    text-align: center;
}
.vote-page .page-kicker { text-align: left; }
.vote-page h1, .vote-done h1 { font-size: clamp(24px, 6vw, 34px); }

.vote-summary, .vote-price { margin: 22px 0; }
.vote-summary-label, .vote-price-label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.vote-summary-number { margin: 4px 0; font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.vote-summary-foot { margin: 0; color: var(--muted); font-size: 14px; }
.vote-price-number { margin: 4px 0 0; font-size: 44px; font-weight: 900; letter-spacing: -0.04em; color: var(--gold); }

.vote-rules { margin: 18px 0 0; font-size: 12px; color: var(--muted); }

/* The two things on sale. One vote is the loud one — most people want
   exactly that — and the pack sits underneath as the quieter offer rather
   than competing with it. */
.vote-options { margin: 24px 0 0; display: grid; gap: 10px; }

.btn-pack {
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    font-size: 15px;
}
.pack-name  { font-weight: 700; }
.pack-price { font-weight: 900; color: var(--gold); white-space: nowrap; }

.vote-secure { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.done-beer { font-size: 20px; font-weight: 800; margin: 14px 0 24px; }

.done-change { margin: 0 0 18px; }
.done-change-label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.done-change-values {
    margin: 4px 0 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    font-size: clamp(24px, 7vw, 34px);
    font-weight: 900;
    letter-spacing: -0.03em;
}
.done-change-values .was { color: var(--muted); }
.done-change-values .arrow { font-size: 20px; color: var(--muted); }
.done-change-values .now-up { color: var(--success); }

.done-message { font-size: 16px; font-weight: 700; margin: 0 0 20px; }
.done-message-up { color: var(--success); }
.done-links { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* --- Flashes, empty states, strips ---------------------------------------- */

.flash {
    padding: 14px 16px;
    border-radius: var(--radius);
    margin: 20px 0;
    font-size: 14px;
    border: 1px solid;
    text-align: left;
}
.flash-success { background: rgba(54, 162, 105, 0.12); border-color: rgba(54, 162, 105, 0.4); }
.flash-error   { background: rgba(217, 87, 87, 0.12);  border-color: rgba(217, 87, 87, 0.4); }
.flash-info    { background: rgba(37, 99, 235, 0.08);  border-color: rgba(37, 99, 235, 0.3); }

.empty {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px 20px;
    text-align: center;
    margin: 0 0 20px;
}
.empty-title { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.empty p { margin: 0 0 14px; color: var(--muted); }
.empty-alt { margin-top: 14px; font-size: 14px; }

.cta-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    margin: 0 0 32px;
    border: 1px dashed var(--line-firm);
    border-radius: var(--radius);
    text-align: center;
}
.cta-strip p { margin: 0; color: var(--muted); }
.cta-alt { font-size: 13px; }
.cta-alt a { font-weight: 700; color: var(--ink); }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 28px;
}
.pager-info { font-size: 14px; color: var(--muted); font-weight: 600; }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.filter {
    padding: 7px 14px;
    border: 1px solid var(--line-firm);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: var(--card);
}
.filter:hover { text-decoration: none; border-color: var(--ink); }
.filter.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --- Legal pages ---------------------------------------------------------- */

/* The legal notice, the privacy policy and the terms: three pages of
   running text on a site otherwise built entirely from tables and numbers.
   They sit in a .panel so they still look like part of it.

   The width is the rule that matters. The wrap is 1120px, and a paragraph
   that wide is a paragraph nobody finishes — an eye that has to travel that
   far loses the start of the next line. 760px puts the measure at roughly
   75 characters, which is what long-form text is comfortable at.

   The heading is inside this column too, and that is the point: narrowing
   only the panel left it stopping halfway across the page under a
   full-width title, which reads as something that failed to load rather
   than as a deliberate column. Narrowing both makes it a document. */
.legal-page { max-width: 760px; }

.legal { padding: 4px 22px 28px; }
.legal h2 {
    margin: 28px 0 10px;
    font-size: 18px;
}
.legal p,
.legal li {
    font-size: 15px;
    /* Looser than the site's 1.5: these are paragraphs to be read through,
       not table rows to be scanned. */
    line-height: 1.65;
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 0 0 7px; }

/* Postal addresses. The browser default italicises <address>, which on a
   legal notice reads as an aside rather than as the thing the page is for. */
.legal address {
    font-style: normal;
    margin: 0 0 14px;
    line-height: 1.6;
}

/* Links inside running text need to announce themselves — in a table the
   surrounding row makes it obvious that a name is clickable, and in a
   paragraph nothing does. */
.legal a { color: var(--blue); font-weight: 600; }

/* --- Footer and mobile bar ------------------------------------------------ */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 32px 0 40px;
    margin-top: 20px;
    text-align: center;
}
.footer-claim { margin: 0; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.footer-note { margin: 8px 0 16px; font-size: 13px; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 13px; font-weight: 600; }

/* The legal set, on its own line below the row above and deliberately
   quieter than it. Those links are where to go next; these are the ones a
   visitor only follows when they have come looking for them. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    display: flex;
    background: var(--card);
    border-top: 1px solid var(--line-firm);
}
.mobile-nav a {
    flex: 1;
    padding: 9px 4px calc(9px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}
.mobile-nav a:hover { text-decoration: none; }
.mobile-nav a.is-active { color: var(--ink); }
.mobile-nav span { display: block; font-size: 18px; line-height: 1.3; }

/* A country name can be long ("United Kingdom") in a bar four items wide. */
.mobile-nav a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The country sits first in the menu, so give it the weight of a place
   rather than a link. */
.main-nav .flag { margin-right: 2px; }

/* --- Wider screens -------------------------------------------------------- */

@media (min-width: 720px) {
    body { padding-bottom: 0; }
    .mobile-nav { display: none; }
    .logo-text { display: block; }
    .main-nav { display: flex; }
    .header-add { display: inline-flex; }
    .header-search { max-width: 320px; flex: 1 1 220px; }
    .rank-pos { min-width: 58px; font-size: 20px; }
    .rank-name { font-size: 16px; }
    .rank-votes { font-size: 19px; }
    .beer-page { padding: 32px 28px; }
    .rank-cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 980px) {
    .two-up { grid-template-columns: 1fr 1fr; }
    .battle-grid { grid-template-columns: 1fr 1fr; }
}