/* The chrome (F1 WP-2): header with the logo, the navigation and the search box on every
   page; the breadcrumb; the footer with the credit, the original-link promise and the
   licence; the go-to-top button. The look follows docs/proposals/visual_design.md §4. */

.site-header {
  position: relative;                 /* the phone's Menu drops below the whole header */
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-accent);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand nav nav" "search search account";
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-2);
}
.site-header__brand { grid-area: brand; }
.site-header__nav { grid-area: nav; justify-self: end; }
.site-header__search { grid-area: search; }
/* Wide (the owner, 2026-10-17): the logo, the menu beside it, then the search; the account
   slot at the far right (F7 UI-1) — on a phone it sits beside the search. */
@media (min-width: 52rem) {
  .site-header__inner {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav search account";
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-3);
  }
  .site-header__search { max-width: 30rem; justify-self: start; }
  .site-header__nav { justify-self: start; }
}

/* The header's end: the owner's flag map on a wide screen (D-43, decorative, level with the logo),
   the feedback link (F12 UI-1), the same for everyone, then the account slot. */
.site-header__end { grid-area: account; display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.site-header__map { display: none; width: auto; height: 3rem; margin-right: var(--space-2); }
@media (min-width: 64rem) { .site-header__map { display: block; } }
.feedback-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.feedback-link:hover { color: var(--color-ink); text-decoration: underline; }
.feedback-link__icon { width: 18px; height: 18px; }

/* The account slot (F7 UI-1, D-17): "Sign in" and "Register" for everyone in the cached page;
   for a signed-in reader account.js swaps in the menu — a disclosure whose panel drops below. */
.site-header__account { position: relative; display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.account-link { color: var(--color-ink-soft); font-weight: var(--weight-medium); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.account-link:hover { color: var(--color-ink); text-decoration: underline; }
.account-menu { position: relative; }
.account-menu__toggle {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 12rem; min-height: 2.25rem;
  padding: var(--space-1) var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; list-style: none;
}
.account-menu__toggle::-webkit-details-marker { display: none; }
.account-menu__toggle::after { content: "\25BE"; color: var(--color-ink-muted); }
.account-menu[open] .account-menu__toggle { border-color: var(--color-accent); }
.account-menu__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__note { margin: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--color-ink-soft); }
.account-menu__out { width: 100%; margin-top: var(--space-1); padding: var(--space-2) var(--space-3); border: 0; border-top: 1px solid var(--color-line); background: none; color: var(--color-ink-soft); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.account-menu__out:hover { color: var(--color-ink); }

/* The brand (F1 Q-10): the owner's logo, one include renders it in the header and, smaller
   and in grey, in the footer. The image is served at twice its drawn size. */
/* The wordmark's letters sit in the upper part of the artwork (rows 17–52 of the 104 px
   image; the handle hangs below), so the image is set 9 px low for the letters' centre to
   sit on the row's centre line with the menu and the search field. */
.brand { display: inline-block; line-height: 0; }
.brand__logo { display: block; height: 52px; width: auto; position: relative; top: 9px; }
.site-footer .brand__logo { height: 32px; filter: grayscale(1); opacity: 0.6; }

/* The menus (F13 NV-1–NV-6): disclosures, one panel style — the account menu's too. On a wide screen
   the three sit in a row and their panels float; below 52rem they fold into "Menu", whose list drops
   below the header and whose menus open in place. */
.site-menu__toggle, .nav-menu > summary { list-style: none; cursor: pointer; }
.site-menu__toggle::-webkit-details-marker, .nav-menu > summary::-webkit-details-marker { display: none; }
.site-menu__toggle {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.site-menu__toggle::after, .nav-menu > summary::after { content: "\25BE"; margin-left: var(--space-1); color: var(--color-ink-muted); }
/* A heading links its first entry; the arrow opens the menu (F13 D-8). */
.nav-menu__head, .nav-menu__head:hover, .account-menu__name, .account-menu__name:hover { color: inherit; text-decoration: none; }
.site-menu[open] > .site-menu__toggle { border-color: var(--color-accent); }
.nav-menu { position: relative; }
.menu-panel {
  position: absolute; left: 0; top: calc(100% + var(--space-2)); z-index: 60; min-width: 15rem;
  padding: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow);
}
.menu-panel--end { left: auto; right: 0; }
.menu-panel a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none; }
.menu-panel a:hover { background: var(--color-accent-tint); }
.menu-panel__after { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--color-line); }
@media (max-width: 51.99rem) {
  .site-menu > .site-nav__list {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 60; flex-direction: column; gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-3); border-bottom: 2px solid var(--color-accent); background: var(--color-surface); box-shadow: var(--shadow);
  }
  .nav-menu > summary { display: block; }
  .nav-menu .menu-panel { position: static; min-width: 0; padding: 0 0 var(--space-2) var(--space-3); border: 0; box-shadow: none; }
}
@media (min-width: 52rem) { .site-menu__toggle { display: none; } }
.site-nav__list { display: flex; gap: var(--space-1); }
.site-nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-ink-soft);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  text-decoration: none;
}
.site-nav__link:hover { color: var(--color-ink); background: var(--color-surface-alt); text-decoration: none; }
.site-nav__link[aria-current] { color: var(--color-ink); box-shadow: inset 0 -3px 0 var(--color-highlight); border-radius: 0; }

/* The breadcrumb — a navigation list: never a marker. */
.crumbs { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.crumbs__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); color: var(--color-ink-muted); }
.crumbs__item:not(:last-child)::after { content: "\203A"; margin-left: var(--space-2); color: var(--color-line-strong); }
.crumbs a { color: var(--color-ink-soft); }
.crumbs [aria-current="page"] { color: var(--color-ink); font-variant-numeric: tabular-nums; }

.site-footer {
  margin-top: auto;
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-4);
}
@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer a { color: var(--color-ink); }
.site-footer__brand { margin-bottom: var(--space-3); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.site-footer__db { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); }

/* The flag (visual_design.md V-5): whole, at its proportions, small, beside the word
   "independent" — in the footer and the home band, nowhere else. */
.flag { display: inline-block; width: 24px; height: 16px; margin-right: var(--space-2); vertical-align: -0.125em; }

/* The country's outline (V-6): decoration in the pale blue beside an empty state's one
   sentence and one link — the empty result and the not-found page. */
.outline { float: right; width: clamp(5rem, 24%, 9rem); height: auto; margin: 0 0 var(--space-3) var(--space-4); }

/* The not-found and error pages. */
.error-page { display: flow-root; padding-block: var(--space-6); }
.error-page__code { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--color-ink-muted); margin-bottom: var(--space-2); }
.error-page__options { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Go to top (visual_design.md V-12): a round button at the bottom right that the page's
   script shows once a viewport has scrolled past; hidden without script, and in print. */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--motion) ease, transform var(--motion) ease, visibility 0s linear var(--motion);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--color-accent-hover); }
.to-top svg { width: 20px; height: 20px; }
@media print { .to-top { display: none; } }

/* A phone (360 px less the gutters is 328 px): the logo and the navigation share a row. */
@media (max-width: 26rem) {
  .site-header__inner { column-gap: var(--space-3); }
  .brand__logo { height: 42px; top: 7px; }
  .site-nav__link { padding-inline: var(--space-2); }
  .account-register { display: none; }
  .feedback-link__text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Site notices (F14 WN-4, WN-6): a band under the header per live notice, its category a left rule. */
.notice-band { border-bottom: 1px solid var(--color-line); background: var(--color-surface-alt); }
.notice-band__inner { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-2); border-left: 4px solid var(--band, var(--color-line-strong)); font-size: var(--text-sm); }
.notice-band--service { --band: var(--color-ink); }
.notice-band--data { --band: var(--color-accent); }
.notice-band--new { --band: var(--color-highlight); }
.notice-band__text { flex: 1; margin: 0; max-width: none; }
.notice-band__label { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-1); font-weight: var(--weight-semibold); }
.notice-band__close { padding: 0 var(--space-2); border: 0; background: none; color: var(--color-ink-muted); font-size: 1.25rem; line-height: 1.2; cursor: pointer; }
.notice-entry { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-4); border-left: 4px solid var(--band, var(--color-line-strong)); background: var(--color-surface-alt); }
.notice-entry__meta { margin: 0; font-size: var(--text-xs); color: var(--color-ink-muted); }
.notice-entry__title { margin: var(--space-1) 0; font-size: var(--text-lg); }