/* The site's look, shared by every page (#493): the owner's palette as tokens, the
   two typefaces, and for the pages other than the map the top bar, the cards and the
   buttons, so Account, Plans, About and the rest look like the map page they sit
   beside. The map page keeps its own stylesheet and takes the tokens and fonts from
   here. Everything below the tokens and fonts is scoped to body.page, so nothing in
   it can reach the map page.

   The site's two typefaces: Fraunces Bold for headings and names, Syne for
   everything else, chosen by the owner in the palette mixer on 2026-10-03. Both are
   SIL Open Font License 1.1, served from this box like the map library, so the page
   asks no font service for anything. Fraunces is one static cut at 700 and at its
   default optical size, the cut he saw; Syne is its variable file, 400 to 800.
   Latin and Latin Extended are separate files, so a page in plain Latin loads one.
   Greek and Cyrillic names (a town in Cyprus, a village over the Finnish border)
   are drawn from the PDF's own fonts (#640, scripts/make_fonts.py): Syne's Greek,
   Manrope's Cyrillic and Literata's under Fraunces, one static cut per weight.
   So Syne is declared in three bands of weight, each with all three files: a
   browser picks the band by weight first and only then a file by the letter, so
   a Greek file under a band of its own hid the Latin one. The variable Latin file
   is one download however many bands name it. */
@font-face{font-family:"Syne";font-style:normal;font-weight:100 500;font-display:swap;
  src:url(/vendor/syne-latin-1.woff2?v=68b623f0e4) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Syne";font-style:normal;font-weight:100 500;font-display:swap;
  src:url(/vendor/syne-latin-ext-1.woff2?v=83885b130c) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Syne";font-style:normal;font-weight:100 500;font-display:swap;
  src:url(/vendor/syne-400-greek-cyrillic-1.woff2?v=fd081b8e41) format("woff2");
  unicode-range:U+0370-03FF,U+1F00-1FFF,U+0400-052F,U+2116}
@font-face{font-family:"Syne";font-style:normal;font-weight:501 650;font-display:swap;
  src:url(/vendor/syne-latin-1.woff2?v=68b623f0e4) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Syne";font-style:normal;font-weight:501 650;font-display:swap;
  src:url(/vendor/syne-latin-ext-1.woff2?v=83885b130c) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Syne";font-style:normal;font-weight:501 650;font-display:swap;
  src:url(/vendor/syne-600-greek-cyrillic-1.woff2?v=f1c5d4ed1f) format("woff2");
  unicode-range:U+0370-03FF,U+1F00-1FFF,U+0400-052F,U+2116}
@font-face{font-family:"Syne";font-style:normal;font-weight:651 900;font-display:swap;
  src:url(/vendor/syne-latin-1.woff2?v=68b623f0e4) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Syne";font-style:normal;font-weight:651 900;font-display:swap;
  src:url(/vendor/syne-latin-ext-1.woff2?v=83885b130c) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Syne";font-style:normal;font-weight:651 900;font-display:swap;
  src:url(/vendor/syne-700-greek-cyrillic-1.woff2?v=86cb545b6e) format("woff2");
  unicode-range:U+0370-03FF,U+1F00-1FFF,U+0400-052F,U+2116}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url(/vendor/fraunces-700-latin-1.woff2?v=629936f316) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url(/vendor/fraunces-700-latin-ext-1.woff2?v=1a8ba15509) format("woff2");
  unicode-range:U+0100-024F,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url(/vendor/fraunces-700-greek-cyrillic-1.woff2?v=861b355fd6) format("woff2");unicode-range:U+0370-03FF,U+1F00-1FFF,U+0400-052F,U+2116}
/* Inter, for every word and figure of the interface (the owner, 2026-10-24); Fraunces
   stays for titles, and Syne for the PDF alone. Variable, so one file serves every
   weight; cut in two by scripts/make_fonts.py --interface, so a page with only
   Latin on it fetches the 68 kB file and not the Greek and Cyrillic. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/vendor/inter-latin-1.woff2?v=c79fd78149) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+2248,U+2264-2265,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/vendor/inter-ext-1.woff2?v=30bdc03e42) format("woff2");
  unicode-range:U+0100-024F,U+0259,U+02BD-02FF,U+0370-03FF,U+0400-052F,U+1E00-1FFF,U+20A0-20C0,U+2113,U+2116,U+2190-21FF}
:root{--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
      --serif:"Fraunces",Georgia,"Times New Roman",serif;
  /* The palette. --brand is the ochre as chosen, for marks and fills; --accent the
     same hue taken to 4.8:1 for links and for white text on a button. --bar is the
     top bar, the darkest of the group colours. */
  /* Near-black for what is read, and a lighter brown for what is secondary (the
     owner, 2026-10-24): the two were one colour, so nothing stood out. */
  --paper:#faf6f0; --card:#ffffff; --ink:#2b231c; --muted:#6f6357; --line:#e4ddd1;
  --brand:#a8743f; --accent:#986839; --bar:#3b2a1e; --on-bar:#faf6f0;
  --tint:#f4eee4; --tint2:#ece4d6;
  /* What is under the pointer, what is pressed or lit, and words that stand back
     (a disabled link, a missing figure): one value each, where every page used to
     write its own. */
  --hover:#f7f3ed; --press:var(--tint2); --faint:#ab9f93;
  /* One red for what deletes, ends or went wrong, on the map page and every other
     page alike (the map page had #a33a2c and the others #8a1c14), and the wash
     behind a message that something went wrong. */
  --danger:#a33a2c; --danger-bg:#f7e2de;
  /* Two heights of button: a form's own button, and a small one in a row or a
     card's head, the size of the 32 px icon buttons (the owner, 2026-10-24). */
  --btn-h:42px; --btn-h-s:32px;
  /* The type scale: five sizes and no others, on every page, the map page included.
     xs for axis labels and footnotes, s for secondary text and controls, m for body
     text, line names and figures, l for a plot's name and section headings, xl for
     page titles and a card's big figure. */
  --fs-xs:11px; --fs-s:13px; --fs-m:15px; --fs-l:18px; --fs-xl:24px;
  /* The title of a page meant to be read through, our story and the guides to come,
     and nothing else (the owner, 2026-11-01). */
  --fs-xxl:38px;
  /* Corners: --r for everything with a corner (buttons, cards, inputs, panels),
     --r-s for small marks inside charts and meters. A circle stays 50%. */
  --r:9px; --r-s:2px;
  /* A button inside a joined set: the set's corner less the 2 px round it, so the two
     curves run parallel (the owner, 2026-11-01). */
  --r-in:calc(var(--r) - 2px);
  /* The line at the foot of every page. */
  --foot:16px;
  /* One shadow, for what floats over the map. Everything on the paper is set off by
     a hairline instead. */
  --float:0 1px 2px rgba(59,42,30,.08),0 6px 22px rgba(59,42,30,.16); --shadow:var(--float)}
button,input,select,textarea{font-family:inherit}
/* A small with no size of its own takes the smallest of the five, not the browser's
   own "smaller", which was a sixth size wherever it landed (12.5 px under a reset
   form's label, 10.8 px in the API's tables). The map page said so first. */
:where(small){font-size:var(--fs-xs)}
/* Every figure stands on the line, whatever face draws it: a report is figures, and
   old-style figures suit a sentence and not a column of them. */
body{font-variant-numeric:lining-nums}
/* The free plan's way to a paid one (#643), on the map page and the account page
   alike: the plan's name and its price in one button. Every one carries
   data-upgrade, which also lifts it over a page's own rules for links. */
a.up-btn[data-upgrade]{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-sizing:border-box;min-height:42px;padding:5px 18px;border-radius:var(--r);background:var(--accent);color:#fff;
  font-family:var(--sans);font-size:var(--fs-m);font-weight:600;line-height:1.15;text-decoration:none;white-space:nowrap}
a.up-btn[data-upgrade] b{display:block;font:inherit;font-weight:600;color:inherit;letter-spacing:normal;text-transform:none;margin:0}
a.up-btn[data-upgrade] small{font-size:var(--fs-xs);font-weight:400;opacity:.92}
a.up-btn[data-upgrade]:hover{filter:brightness(1.08)}
a.up-btn[data-upgrade]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- The pages other than the map: body class="page". Defaults, at no more weight
   than a bare element, so a page's own rules win over them. -------------------- */
body.page{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-m)/1.55 var(--sans)}
:where(.page) h1,:where(.page) h2,:where(.page) h3{font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:-.005em;text-wrap:balance}
/* The title alone in Fraunces: a section's heading and a subhead are the interface
   face, so a smaller heading never switches to the title face (the owner,
   2026-10-24 and 2026-11-01). */
:where(.page) h2,:where(.page) h3{font-family:var(--sans);letter-spacing:0}
:where(.page) h3{font-weight:600}
/* Every link underlined, and none with a "›" after it (the owner, 2026-10-11). */
:where(.page) a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
:where(.page) main,:where(.page) .wrap{max-width:60rem;margin:0 auto;padding:28px 18px 64px}
/* A card: white on the paper, with no border: white on the paper is its own edge (the owner, 2026-10-24). */
:where(.page) .card{background:var(--card);border-radius:var(--r);padding:20px 22px;margin:0 0 16px}
:where(.page) .btn,:where(.page) button.btn,:where(.page) .btn-pri{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 var(--fs-s)/1 var(--sans);text-decoration:none;cursor:pointer}
:where(.page) .btn-pri{background:var(--accent);border-color:var(--accent);color:#fff}
:where(.page) input[type=text],:where(.page) input[type=email],:where(.page) input[type=password],:where(.page) input[type=search],:where(.page) input[type=url],:where(.page) select,:where(.page) textarea{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);padding:8px 10px;font:inherit}
:where(.page) input:focus,:where(.page) select:focus,:where(.page) textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
/* The page's own drop-down (menu-1.js, the owner, 2026-11-01): a <select> is drawn as
   this button and its list as .dd-menu, in the look of the saved search's menu. The
   select stays in the page, out of sight, holding the value. Where a page styles
   its select, it names .dd beside it. At a class's weight, so a page's own rule
   for the select's class (copied onto the button) wins. */
.dd-src{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;margin:0!important;padding:0!important;
  border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden;clip-path:inset(50%)}
.dd{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:auto;max-width:100%;min-width:0;
  box-sizing:border-box;padding:6px 8px 6px 10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dd span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd:disabled{color:var(--faint);cursor:default}
.dd-chev{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.dd[aria-expanded=true] .dd-chev{transform:rotate(180deg)}
:where(.page) .dd{padding:8px 10px}
.dd-menu{position:fixed;z-index:1000;box-sizing:border-box;max-width:min(320px,calc(100vw - 16px));overflow-y:auto;
  padding:6px;background:#fff;border-radius:var(--r);box-shadow:var(--float);font-family:var(--sans)}
.dd-menu[hidden]{display:none}
.dd-i{display:block;width:100%;box-sizing:border-box;padding:7px 10px;border:0;border-radius:var(--r);background:none;
  color:var(--ink);font:inherit;line-height:1.3;text-align:left;cursor:pointer;white-space:normal}
.dd-i:hover,.dd-i.at{background:var(--hover);outline:0}
.dd-i.on{font-weight:600}
.dd-i:disabled{color:var(--faint);cursor:default;background:none}
.dd-g{padding:8px 10px 3px;color:var(--muted);font-size:var(--fs-xs);font-weight:600}
/* The form card of sign-in, sign-up, the password reset and the confirmation: one
   white card on the paper, with no border (the owner, 2026-10-24), its button the
   site's form button. One copy here, where each of the three pages had its own. */
body.page main.auth{max-width:22rem;margin:3rem auto;padding:1.8rem 1.8rem 2rem;background:var(--card);border-radius:var(--r)}
/* On a phone the card takes the width less an even gutter each side (the owner,
   2026-10-19): a margin on the left alone left the spare width all on the right. */
@media (max-width:480px){body.page main.auth{box-sizing:border-box;width:calc(100% - 1.4rem);max-width:25.6rem;
  margin:1rem auto;padding:1.4rem 1.2rem 1.6rem}}
main.auth label{display:block;margin:1rem 0 .3rem;font-weight:600}
main.auth input{width:100%;padding:.55rem;font:inherit;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r)}
main.auth button{margin-top:1.5rem;width:100%;min-height:var(--btn-h);padding:.6rem;font:inherit;font-weight:600;
  border:0;border-radius:var(--r);background:var(--accent);color:#fff;cursor:pointer}
/* The heading is the card's first line, under the card's own padding. A form that is
   one button stands under it at the heading's own distance (/confirm). */
main.auth h1{margin-top:0}
main.auth form.one button{margin-top:0}
main.auth :is(.error,.note){padding:.6rem .8rem;border:0;border-radius:var(--r)}
main.auth .error{background:var(--danger-bg);color:var(--danger)}
main.auth .note{background:var(--tint)}

/* ---- The top bar, the map page's own, on every other page. ------------------------- */
/* 82 px including its padding, as the map page's bar is: the map page sets border-box
   on everything, and without it here this bar was 92 px and its links sat 9 px lower. */
/* Flat paper with a hairline under it and the logo as it is (the owner, 2026-10-24,
   after the watercolour of #493), fixed over the page, which starts under it, held
   down by --site-bar, the bar's foot. --site-y is kept at 0 for the rules that add it. */
:root{--site-y:0px;--site-bar:64px}
body.page{padding-top:var(--site-bar)}
.site-bar{position:fixed;top:0;left:0;right:0;z-index:20;box-sizing:border-box;height:var(--site-bar);display:flex;align-items:center;gap:28px;padding:0 24px;
  background:none;color:var(--ink)}
/* No hairline under it (the owner, 2026-10-31). */
.site-bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--paper)}
.site-bar .site-brand{display:inline-flex;align-items:center;margin-right:0;text-decoration:none;flex:none}
.site-bar .site-brand img{display:block;height:36px;width:auto}
@media (max-width:1100px){.site-bar .site-brand img{height:30px}}
.site-bar .site-sp{flex:1}
/* The search box, as on the map page: in the middle of the bar, as wide as it can be. */
.site-bar .site-search{flex:1 1 auto;max-width:600px;min-width:240px;margin:0 auto}
.site-bar .site-search[hidden]{display:none}
.site-bar .site-search input{width:100%;height:40px;box-sizing:border-box;padding:0 12px 0 36px;border-radius:var(--r);
  border:1px solid transparent;font:var(--fs-m)/1 var(--sans);color:var(--ink);outline:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6357' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 12px 50%/16px}
.site-bar .site-search input:focus{background-color:#fff;border-color:var(--brand)}
.site-bar .site-search input::placeholder{color:var(--muted)}
.site-bar .site-nav{margin-left:auto}
.site-bar .site-nav{display:flex;align-items:center;gap:2px;padding:0;overflow-x:auto;scrollbar-width:none;min-width:0}
.site-bar .site-nav::-webkit-scrollbar{display:none}
.site-bar .site-nav a,.site-bar .site-nav button{flex:none;background:none;border:0;border-radius:var(--r);padding:8px 11px;
  font:500 var(--fs-m)/1.5 var(--sans);color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.site-bar .site-nav a:hover,.site-bar .site-nav button:hover,.site-bar .site-nav a.on{color:var(--ink);background:var(--tint2)}
.site-bar .site-nav .quiet{color:var(--muted)}
.site-bar .site-nav form{display:inline;margin:0}
.site-bar .site-plan{flex:none;display:flex;align-items:center;height:32px;padding:0 12px;font-weight: 400;border:1px solid transparent;
  border-radius:var(--r);font:var(--fs-s) var(--sans);color:var(--muted);background:#fff;text-decoration:none;white-space:nowrap}
.site-bar .site-plan b{color:var(--accent);font-weight:600;margin-right:4px}
.site-bar .site-plan[hidden]{display:none}
/* Signed in, the links are six or seven: on a narrower laptop they scrolled out of
   their band, Sign out first (with Our story from 1250 px down). Tighter links, and
   the search box, which holds a place here and shows nothing, gives way to them. */
@media (max-width:1300px){.site-bar{gap:16px}.site-bar .site-nav a,.site-bar .site-nav button{padding:8px 8px}
  .site-bar .site-search{min-width:0}.site-bar .site-nav{flex-shrink:0}.site-bar .site-plan{padding:0 10px}}
@media (max-width:1100px){.site-bar{gap:10px;padding-left:16px;padding-right:16px}
  .site-bar .site-nav a,.site-bar .site-nav button{padding:8px 6px}}
/* Below 1000 px the plan label goes, as on the map page (index.html). */
@media (max-width:1000px){.site-bar .site-plan{display:none}}
@media (max-width:640px){:root{--site-bar:56px}.site-bar .site-search{display:none}.site-bar{gap:10px;padding:0 10px 0 14px}.site-bar .site-brand img{height:28px}.site-bar .site-plan{display:none}}

/* Lining figures on every page, the map page included. A page's own `body { font: ... }`
   is a shorthand, and a shorthand resets font-variant-numeric; `html body` outweighs
   a bare `body` wherever it is written. */
html body{font-variant-numeric:lining-nums}

/* On a phone the bar's links are a menu under a button (#493): they do not fit in
   one row, and links that scroll sideways hide Account and Sign out. From 860 px
   down, where the map page turns to its phone layout too: between that and 640 px
   an account's six links scrolled out of their band. */
.site-bar .site-menu{display:none}
@media (max-width:860px){
  /* At the right, as the links stand on a wider screen: below 640 px the search box
     that pushed it there is gone, and it stood against the wordmark. */
  .site-bar .site-menu{display:block;flex:none;margin-left:auto;background:rgba(255,255,255,.7);border:0;border-radius:var(--r);
    padding:8px 12px;font:600 var(--fs-s)/1 var(--sans);color:var(--bar);cursor:pointer;text-decoration:none}
  .site-bar .site-nav{display:none;position:absolute;top:var(--site-bar);right:8px;min-width:200px;flex-direction:column;
    align-items:stretch;gap:0;padding:6px;background:var(--paper);border-radius:0 0 var(--r) var(--r);box-shadow:var(--float)}
  .site-bar .site-nav.open{display:flex}
  .site-bar .site-nav a,.site-bar .site-nav button{padding:12px;font-size:var(--fs-m);text-align:left;width:100%}
}
/* A visitor's phone: Sign in and Create account in the bar, as on the map page, and
   no menu; Our story is in the line at the foot (the owner, 2026-10-31). */
@media (max-width:860px){
  .site-visitor .site-bar .site-menu{display:none}
  .site-visitor .site-bar .site-nav{display:flex;position:static;flex-direction:row;align-items:center;min-width:0;
    padding:0;background:none;box-shadow:none;margin-left:auto}
  .site-visitor .site-bar .site-nav a{width:auto;padding:8px 6px}
  /* The wordmark gives way on a narrow phone, so Create account is not cut off (the
     owner, 2026-10-31): the map page's head does the same. */
  .site-visitor .site-bar{gap:8px;padding-right:8px}
  .site-visitor .site-bar .site-brand{flex:0 1 auto;min-width:0}
  .site-visitor .site-bar .site-brand img{height:auto;max-height:28px;max-width:100%}
  .site-visitor .site-bar .site-nav{flex:none}
  .site-visitor .site-bar .site-nav a[href="/our-story"]{display:none}
}

/* The way back on these pages is an arrow alone, as on the map page (the owner,
   2026-10-31): the words went, the link keeps them for a screen reader. */
body a.backbtn{display:inline-flex;align-items:center;box-sizing:border-box;width:40px;height:40px;padding:0;gap:0;
  justify-content:center;font-size:0;border:0;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none}
body a.backbtn::before{content:"";width:8px;height:8px;border-left:2.2px solid var(--accent);border-bottom:2.2px solid var(--accent);
  transform:rotate(45deg);margin:0 0 0 4px}

/* ---- The line at the foot of every page, the map page's included (the owner,
   2026-10-12): the map's credits on the left where there is a map, and the links
   of FOOTER_LINKS in web/app.py on the right, one text line high. ---------------- */
.sitefoot{flex:none;margin:0;display:flex;align-items:center;gap:24px;height:var(--foot);line-height:var(--foot);padding:0 14px;box-sizing:border-box;
  background:rgba(250,246,240,.92);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.sitefoot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.sitefoot a:hover{color:var(--accent)}
.sf-cred,.sf-legal{min-width:0;overflow-x:auto;scrollbar-width:none}
.sf-cred::-webkit-scrollbar,.sf-legal::-webkit-scrollbar{display:none}
.sf-cred{flex:1 1 auto;display:flex;align-items:center;gap:6px}
.sf-legal{flex:0 1 auto;display:flex;gap:14px}
.sf-esri[hidden]{display:none}
.sf-legal{margin-left:auto}
.sitefoot [hidden]{display:none}
body.page{padding-bottom:calc(var(--foot) + 24px)}
body.page .sitefoot{position:fixed;left:0;right:0;bottom:0;z-index:20}
/* On a wide screen nothing is cut: the map's credits are a licence term and "Cancel
   contracts here" must be reachable on every page, so where both do not fit on one
   line the line wraps to two rather than hiding either. At 1400 px they did not fit
   and the OpenStreetMap credit was cut off. */
@media (min-width:861px){
  .sitefoot{height:auto;min-height:var(--foot);flex-wrap:wrap;column-gap:24px;row-gap:0}
  .sf-cred,.sf-legal{flex:0 1 auto;overflow:visible;flex-wrap:wrap;white-space:nowrap}
  .sf-legal{column-gap:14px}}

/* ---- The tab bar on a phone (tb-, #486, _tabbar.html), for a signed-in account, on
   the map page and every other page alike: there the menu at the top gives way to it
   (the owner, 2026-11-01). Shown by removing `hidden`, once the account is known. */
:root{--tabs:calc(58px + env(safe-area-inset-bottom, 0px))}
.tb,.tb-menu{display:none}
@media (max-width:860px){
  .tb:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--tabs);
    background:#fff;border-top:1px solid var(--line);padding:0 4px env(safe-area-inset-bottom)}
  .tb-t{flex:1;min-width:0;width:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:none;border:0;border-radius:0;padding:0;color:var(--muted);text-decoration:none;font:600 var(--fs-xs)/1.1 var(--sans);cursor:pointer}
  .tb-t svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tb-t span{white-space:nowrap}
  .tb-t.on{color:var(--accent)}
  .tb-t.on svg{stroke-width:2.1}
  .tb-menu:not([hidden]){display:flex;flex-direction:column;position:fixed;right:8px;bottom:calc(var(--tabs) + 8px);
    z-index:31;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--float);padding:6px}
  .tb-menu a,.tb-menu button{display:block;width:100%;box-sizing:border-box;text-align:left;padding:11px 12px;border:0;
    border-radius:var(--r);background:none;font:600 var(--fs-m)/1.3 var(--sans);color:var(--ink);text-decoration:none;cursor:pointer}
  .tb-menu a:hover,.tb-menu button:hover{color:var(--accent);background:var(--hover)}
  .tb-menu .quiet{color:var(--muted)}
  .tb-menu form{display:block;margin:0}
  /* The links of the line at the foot (FOOTER_LINKS), which a phone with the tab bar
     does not show (the owner, 2026-11-01): under a hairline, two to a row. */
  .tb-menu:has(.tb-more){width:min(340px,calc(100vw - 16px));max-height:calc(100vh - var(--tabs) - 24px);overflow-y:auto}
  .tb-menu .tb-more{display:grid;grid-template-columns:1fr 1fr;margin:4px 0;padding:4px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .tb-menu .tb-more a{padding:8px 12px;font:500 var(--fs-s)/1.3 var(--sans);color:var(--ink)}
  /* The other pages, signed in: the wordmark alone at the top and the tabs at the
     foot, with the line at the foot's links in Other. */
  .site-tabs .site-bar .site-menu,.site-tabs .site-bar .site-nav{display:none}
  .site-tabs body.page{padding-bottom:calc(var(--tabs) + 24px)}
  .site-tabs body.page .sitefoot{display:none}
  /* No way back for an account: the tab bar is the way around (the owner, 2026-11-01). */
  .site-tabs a.backbtn,.site-tabs p:has(> a.backbtn:only-child){display:none}
}