/* ===========================================================================
   Hatchure — the site header, one for the homepage and the loop pages
   ---------------------------------------------------------------------------
   The markup comes from siteHeader() in scripts/loop-pages-lib.mjs; the
   homepages (welcome.html, welcome-de.html) carry a copy that a test keeps
   identical to it. js/site-header.js turns "Sign in" into the account's
   avatar when the map's session on this device belongs to an account.

   The map draws the same bar from its own markup (index.html #headerTop,
   css/chrome.css "the site header, on the map") and borrows the phone menu
   (.shMenu) from here. The two share their measures, so the logo, the
   sections and the account do not move when you go from a page to the map:
   a capsule 12px in from the edges (8px on a phone), 58px tall (56px on a
   phone), the mark 26px high.

   Dark in both themes, like the bands it sits on. Needs css/tokens.css.
   =========================================================================== */

/* Going from one page to another. Home, the loop pages, help and the map are
   separate documents, so every link in this header is a full page load: the
   browser blanked the window between the two and drew the header again from
   nothing. With this, the old page stays up until the new one can paint,
   the two cross-fade, and the header, the same bar in the same measures on
   every page (the map's #headerTop, css/chrome.css), is carried across as
   one piece rather than fading out and back in. A browser without
   cross-document view transitions (Firefox today) loads the page as before.
   The links are fetched ahead on hover as well: /speculation-rules.json.

   Named only while a transition runs. A view-transition-name makes the bar
   a backdrop root: the glass inside it (the map's search pill, its round
   buttons, the bar's own ::before below) could then blur nothing but the
   bar, and the map or the page showed through sharp. Both documents match
   :active-view-transition while theirs is captured, so the bar is still
   carried across. */
@view-transition{ navigation:auto; }
:root:active-view-transition .siteHeader, :root:active-view-transition #headerTop{ view-transition-name:site-header; }
::view-transition-group(*){ animation-duration:0.18s; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none; }
}

/* The bar floats, as the map's does (css/chrome.css "Glass"): a capsule
   12px in from the edges (8px on a phone), sticky at that gap, the page
   scrolling under it and through the gap above it. Glass as the map's is,
   the band at its share over a blur of the page (css/tokens.css), at more
   of the band's dark than on the map, so it does not go grey over Chalk.
   The glass is on a ::before, not the bar itself: backdrop-filter would
   make the bar the containing block of the phone menu's fixed panel.

   The capsule is round-ended, as the app's floating bars are, its edge
   the lit hairline all glass wears (--glass-edge, css/tokens.css). Inside it the controls are glass
   buttons without borders, and the section you are in is a lighter
   capsule rather than an underline.

   --bar-gap and --bar-h are the capsule's inset and height; --bar-space is
   how far down the page it reaches, for a page that runs a photo under it
   (the homepages' hero pulls itself up by that much). */
:root{
  --bar-gap:12px; --bar-h:58px;
  --bar-space:calc(var(--bar-gap) + var(--bar-h) + env(safe-area-inset-top));
}
@media (max-width:760px){ :root{ --bar-gap:8px; --bar-h:56px; } }
.siteHeader{
  --sh-muted:#B9C2BA;
  position:sticky; top:calc(var(--bar-gap) + env(safe-area-inset-top)); z-index:100;
  margin:calc(var(--bar-gap) + env(safe-area-inset-top)) var(--bar-gap) 0;
  background:var(--band);
  border:1px solid var(--line-on-ink); border-radius:calc(var(--bar-h) / 2);
  box-shadow:var(--bar-lift);
  color:var(--on-ink);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .siteHeader{ background:none; border-color:var(--bar-rim); }
  .siteHeader::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:color-mix(in srgb, var(--band) var(--glass-a-header), transparent);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-edge);
  }
}
.shRow{
  padding:0 10px 0 20px; min-height:calc(var(--bar-h) - 2px);
  display:flex; align-items:center; gap:20px;
}
.shLogo{ display:flex; align-items:center; gap:9px; color:var(--on-ink); text-decoration:none; font-family:var(--display); font-weight:800; font-size:21px; line-height:1; }
.shLogo:hover{ color:var(--on-ink); text-decoration:none; }
.shLogo svg{ flex-shrink:0; width:auto; height:26px; overflow:visible; }
.shNav{ display:flex; align-items:center; gap:2px; margin-left:4px; }
.shNav a{
  display:flex; align-items:center; height:36px; padding:0 14px; border-radius:999px;
  color:var(--sh-muted); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap;
  transition:background-color 0.15s, color 0.15s;
}
.shNav a:hover{ color:var(--on-ink); background:var(--bar-hover); }
.shNav a[aria-current="page"]{ color:var(--on-ink); font-weight:600; background:var(--bar-selected); }
.shSpacer{ flex:1; }
/* The other languages: a menu behind this page's code ("FR"), as narrow as
   the one "DE" link the row carried when there were two languages; five
   codes side by side pushed the row past the window between the phone
   layout and about 1,050px. A <details>, so it works without the script;
   js/site-header.js closes it on a click elsewhere or Escape. Its list is a
   small dark panel under the button, right-aligned, over the page. The map
   wears the same (#siteLangMenu, css/chrome.css), outside .siteHeader,
   hence the colour's fallback. */
.shLangMenu{ position:relative; }
.shLangMenu summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:5px;
  color:var(--sh-muted, #B9C2BA); font-family:var(--mono); font-size:12.5px; letter-spacing:0.08em;
  height:36px; padding:0 11px 0 12px; border-radius:999px; box-sizing:border-box; white-space:nowrap;
  transition:background-color 0.15s, color 0.15s;
}
.shLangMenu summary::-webkit-details-marker{ display:none; }
.shLangMenu summary:hover{ color:var(--on-ink); background:var(--bar-hover); }
.shLangMenu[open] summary{ color:var(--on-ink); background:var(--bar-selected); }
.shLangMenu summary svg{ flex-shrink:0; transition:transform 0.15s; }
.shLangMenu[open] summary svg{ transform:rotate(180deg); }
.shLangMenu summary:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }
.shLangList{
  position:absolute; right:0; top:calc(100% + 10px); z-index:110;
  display:flex; flex-direction:column; min-width:150px; box-sizing:border-box; padding:6px;
  background:var(--band); border:1px solid var(--line-on-ink); border-radius:10px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.55);
}
.shLangList a{
  display:block; padding:9px 12px; border-radius:6px; white-space:nowrap;
  color:var(--on-ink); text-decoration:none; font-size:14px; font-weight:500; line-height:1.3;
}
.shLangList a:hover, .shLangList a:focus-visible{ background:rgba(255,255,255,0.08); color:var(--on-ink); text-decoration:none; }
.shLangMenu .shLangList a:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
@media (prefers-reduced-motion:reduce){ .shLangMenu summary svg, .shLangMenu summary, .shNav a{ transition:none; } }
.shCta{
  display:inline-flex; align-items:center; height:36px; box-sizing:border-box;
  background:var(--amber); color:var(--on-amber); text-decoration:none; font-weight:600; font-size:14px;
  padding:0 16px; border-radius:999px; white-space:nowrap; line-height:1.2;
  box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.55);
}
.shCta:hover{ background:var(--amber-dark); color:var(--on-amber); text-decoration:none; }
/* A glass button in the bar: a lighter capsule, no border. */
.shAccount{
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; box-sizing:border-box;
  border:0; border-radius:999px; background:var(--bar-button);
  color:var(--on-ink); text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap;
  transition:background-color 0.15s;
}
.shAccount:hover{ background:var(--bar-selected); color:var(--on-ink); text-decoration:none; }
.shAccount.isSignedIn{ padding:3px 12px 3px 3px; }
.shAvatar{
  width:30px; height:30px; border-radius:50%; background:var(--amber); color:var(--on-amber);
  display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:14px;
}
.siteHeader a:focus-visible, .siteHeader summary:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }

/* On a phone: the logo, the account and a menu for the rest. The menu is a
   <details>, so it works without the script. */
.shMenu{ display:none; position:relative; }
.shMenu summary{
  list-style:none; cursor:pointer; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--bar-button);
}
.shMenu[open] summary{ background:var(--bar-selected); }
.shMenu summary::-webkit-details-marker{ display:none; }
/* Its panel: a card under the capsule, the same inset from the edges. */
.shMenuPanel{
  position:fixed; left:var(--bar-gap); right:var(--bar-gap); bottom:var(--bar-gap);
  top:calc(var(--bar-space) + var(--bar-gap));
  background:var(--band); border:1px solid var(--line-on-ink); border-radius:18px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.55);
  display:flex; flex-direction:column; padding:8px 0 24px; overflow:auto;
}
.shMenuPanel a{
  padding:15px 20px; color:var(--on-ink); text-decoration:none; font-family:var(--display); font-weight:800; font-size:24px;
  border-bottom:1px solid var(--line-on-ink);
}
.shMenuPanel a[aria-current="page"]{ box-shadow:inset 4px 0 0 var(--amber); }
.shMenuPanel .shMenuFoot{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; padding:20px; }
.shMenuPanel .shMenuFoot a{ padding:0; border:0; font-family:var(--mono); font-weight:400; font-size:13px; letter-spacing:0.08em; color:var(--sh-muted); }
.shMenuPanel .shMenuFoot .shCta{ font-family:inherit; font-size:15px; letter-spacing:0; color:var(--on-amber); padding:11px 16px; }
@media (max-width:760px){
  .shNav, .shRow > .shLangMenu, .shRow > .shCta{ display:none; }
  .shMenu{ display:block; order:-1; }
  .shRow{ padding:0 5px; gap:10px; }
  .shAccount{ min-height:44px; }
  .shAccount.isSignedIn{ padding:7px; }
}
@media (max-width:760px){ .shAccountName{ display:none; } .shAccount:not(.isSignedIn){ padding:0 10px; } }
/* Narrower than 360px (a 320px phone, or a laptop window at 400% zoom) the
   menu, the lock-up and "Iniciar sesión" or "Se connecter" do not fit on
   one row, and the account pushed the page sideways: the mark alone, as
   between the phone layout and 960px below. The link keeps its name in
   aria-label. */
@media (max-width:359px){ .shLogo > span{ display:none; } }
/* Between the phone layout and 960px the row is tight in the languages
   with the longer words ("Rutas circulares", "Planifier un itinéraire"):
   the mark alone without the name, the sections a little closer and
   smaller, the account as its avatar, as the map's bar does over the same
   stretch (css/chrome.css). */
@media (min-width:761px) and (max-width:960px){
  .shRow{ gap:10px; }
  .shLogo > span{ display:none; }
  .shNav{ gap:0; margin-left:0; }
  .shNav a{ font-size:14px; padding:0 11px; }
  .shAccountName{ display:none; }
  .shAccount.isSignedIn{ padding:3px; }
}

/* The account's menu, the same on every page, the map included (its
   #accountMenu wears this class): js/account-menu.js writes it. Signed in or
   out is the container's .isSignedIn — the pages learn which only once
   js/site-header.js has read the map's session, so both halves are in the
   markup and this picks one. The map writes only the half it needs. */
.shAccountWrap{ position:relative; }
/* It floats over the map or the page, so it is glass (css/tokens.css), as
   the app's menus are: the surface at a high share, blurred. The rows sit
   in white cards, one to each group the app's menu has. */
.shAccountMenu{
  position:absolute; right:0; top:calc(100% + 12px); z-index:110;
  width:300px; max-width:calc(100vw - 16px); box-sizing:border-box;
  max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 24px 60px -20px rgba(20,32,26,0.5); padding:8px;
  color:var(--ink); font-size:15px; line-height:1.3; text-align:left; white-space:normal;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .shAccountMenu{
    background:color-mix(in srgb, var(--surface) max(86%, var(--glass-a-surface)), transparent);
    -webkit-backdrop-filter:blur(24px) saturate(185%); backdrop-filter:blur(24px) saturate(185%);
    border-color:var(--glass-rim);
    box-shadow:var(--glass-edge), 0 24px 60px -20px rgba(20,32,26,0.5);
  }
}
.shAccountMenu[hidden]{ display:none; }
.shAccountMenu:not(.isSignedIn) .acmIn, .shAccountMenu.isSignedIn .acmOut{ display:none; }

/* Who this is: the name and the address, or the sentence that makes the
   two ways to keep your data make sense; the plan's chip beside either. */
.acmWho{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px 12px; }
.acmIdentity{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.acmName{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acmEmail{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acmLead{ margin:0; flex:1; font-size:13px; line-height:1.4; color:var(--ink-soft); }
.shAccountMenu .acmTier{
  flex-shrink:0; margin:1px 0 0; padding:2px 7px; border-radius:999px; border:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}
.shAccountMenu .acmTier.isPaid{ color:var(--amber-text); border-color:var(--amber-text); }
.shAccountMenu .acmTier[hidden], .shAccountMenu .acmStatus[hidden]{ display:none; }
.shAccountMenu .acmStatus{ margin:0 6px 6px; }

.acmSignInBlock{ display:flex; flex-direction:column; gap:0; padding:0; }
.shAccountMenu .acmSignIn{
  display:block; margin:0 2px; padding:12px; border:0; border-radius:999px; cursor:pointer;
  background:var(--amber); color:var(--on-amber); font:inherit; font-size:14px; font-weight:600;
  text-align:center; text-decoration:none;
  box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.55);
}
.shAccountMenu .acmSignIn:hover, .shAccountMenu .acmSignIn:focus-visible{ background:var(--amber); color:var(--on-amber); text-decoration:none; filter:brightness(1.05); }

/* A group: a card of rows, hairlines between them inset past the glyph. */
.acmGroup{
  margin-top:6px; border-radius:16px; overflow:hidden;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.shAccountMenu .acmRow, .shAccountMenu .acmPlan{
  position:relative; display:flex; align-items:center; gap:12px;
  width:100%; box-sizing:border-box; min-height:44px; padding:10px 14px; border:0; border-radius:0;
  background:none; color:var(--ink); font:inherit; font-size:15px; font-weight:400; text-align:left;
  text-decoration:none; cursor:pointer;
}
.shAccountMenu .acmGroup > .acmRow ~ .acmRow::before{
  content:''; position:absolute; left:44px; right:0; top:0; border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.acmIcon{ flex-shrink:0; color:var(--ink-soft); }
.shAccountMenu .acmLabel{ flex:1; }
.shAccountMenu .acmRow:hover, .shAccountMenu .acmRow:focus-visible,
.shAccountMenu .acmPlan:hover, .shAccountMenu .acmPlan:focus-visible{ background:var(--chalk-dim); color:var(--ink); text-decoration:none; }
.shAccountMenu .acmRow:focus-visible, .shAccountMenu .acmPlan:focus-visible, .shAccountMenu .acmSignIn:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
.acmLabel{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acmCount{ flex-shrink:0; font-family:var(--mono); font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.acmCount[hidden]{ display:none; }
/* The way into the app, last: the one row in the accent. */
.acmPlanGroup{ background:color-mix(in srgb, var(--amber) 14%, transparent); border-color:color-mix(in srgb, var(--amber-dark) 35%, transparent); }
.shAccountMenu .acmPlan{ font-weight:600; color:var(--amber-text); }
.shAccountMenu .acmPlan .acmIcon{ color:var(--amber-text); }
.shAccountMenu .acmPlan:hover, .shAccountMenu .acmPlan:focus-visible{ color:var(--amber-text); background:color-mix(in srgb, var(--amber) 12%, transparent); }
/* "Withdraw from contract here" (§ 356a BGB) and "Cancel contracts here"
   (§ 312k BGB): their own line above the legal links, in the accent and
   bold, so they stand out from them as the law wants rather than sitting
   among them as grey links; apart from each other, wrapping if need be. */
.shAccountMenu .acmContract{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px 18px; margin:10px 0 0; font-size:13px; line-height:1.3; }
.shAccountMenu .acmContract a{
  display:inline-flex; align-items:center; min-height:24px; padding:2px 4px;
  font-weight:600; color:var(--amber-text); text-decoration:underline; text-underline-offset:2px;
}
.shAccountMenu .acmContract a:hover{ color:var(--ink); }
.shAccountMenu .acmContract a:focus-visible{ outline:2px solid var(--amber); outline-offset:0; border-radius:4px; }
.shMenuPanel .shMenuFoot a.shMenuContract{ font-family:inherit; font-weight:600; letter-spacing:0; color:var(--amber); }
/* The Impressum and the privacy page, under everything: small and quiet,
   as a footer's links are, but a 24px target each (WCAG 2.5.8). */
.shAccountMenu .acmLegal{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 18px; margin:6px 0 0; font-size:12px; line-height:1.3; }
.shAccountMenu .acmLegal a{
  display:inline-flex; align-items:center; min-height:24px; padding:2px 4px;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px;
}
.shAccountMenu .acmLegal a:hover{ color:var(--ink); }
.shAccountMenu .acmLegal a:focus-visible{ outline:2px solid var(--amber); outline-offset:0; border-radius:4px; }

/* The account dialog the pages open over themselves (Plans & Patron,
   Settings, My account): js/site-header.js frames panel.html, which draws its
   own dimmed backdrop and the dialog, over the whole window. */
.shPanelOpen, .shPanelOpen body{ overflow:hidden; }
.shPanelFrame{
  position:fixed; inset:0; width:100%; height:100%; border:0; margin:0; padding:0;
  z-index:1000; background:transparent; color-scheme:normal;
}