@charset "UTF-8";
/*
 * The one top bar: the map app and the site pages both wear it.
 *
 * It lives here, outside both stylesheets, because it is the piece of chrome
 * the two halves share. A reader moves between "Things to do in Stowe" and
 * the map and should see the same bar in the same place saying the same
 * three things -- Map, Explore, About -- with the one they are on marked.
 * Two copies would drift the first time one side was tuned.
 *
 * Served from public/ at /chrome.css by Vite (dev and build) and by the site
 * server alike. index.html and server/site/html.ts both link it, before
 * their own stylesheet. The three tokens it needs it owns; site.css reads
 * them rather than declaring its own.
 */
:root {
  --s-navy: #1c242d;
  --s-orange: #e9601f;
  --s-sand: #d9a441;
  /*
   * One variable for the bar's height, read by the app's layout (the sheet
   * detents are fractions of the screen under it) and by nothing on the
   * site, which simply flows. The phone number is the smaller one.
   */
  --chrome-h: 48px;
}
@media (min-width: 861px) {
  :root { --chrome-h: 52px; }
}

.chrome {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* Wordmark, then the three words beside it; the account circle alone at the right. */
  justify-content: flex-start;
  gap: 20px;
  height: calc(var(--chrome-h) + env(safe-area-inset-top, 0px));
  /* The app is installable and the viewport is viewport-fit=cover, so the
     bar is what sits under the notch. */
  padding: env(safe-area-inset-top, 0px) 20px 0;
  background: var(--s-navy);
  color: #fff;
  /* The app's flex column must never squeeze it. */
  flex: 0 0 auto;
}
/*
 * The account circle: a person glyph signed out, the account's initial on
 * the brand green signed in, a picture when there is one. A button in the
 * app (src/account/AccountMenu.tsx), a link to /account on a server page,
 * which knows no reader.
 */
.chrome__account,
.chrome a.chrome__account {
  margin-left: auto;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.chrome__account:hover,
.chrome a.chrome__account:hover { background: rgba(255, 255, 255, 0.26); }
.chrome__account:focus-visible { outline: 2px solid var(--s-sand); outline-offset: 2px; }
.chrome__account--in { background: #2f5d3a; }
.chrome__account svg { width: 18px; height: 18px; }
.chrome__account img { width: 100%; height: 100%; object-fit: cover; }

/* On a phone the wordmark is "vth": the full word was the biggest thing on a
   screen that is mostly map. Both spans are in the markup; the screen picks. */
.chrome__brand-short { display: none; }
@media (max-width: 860px) {
  .chrome { padding-left: 16px; padding-right: 16px; gap: 14px; }
  .chrome__brand-full { display: none; }
  .chrome__brand-short { display: inline; }
  .chrome a.chrome__brand { font-size: 19px; }
  .chrome__nav { font-size: 13px; gap: 12px; flex-shrink: 0; }
}

/* One display face, the system's serif, for the wordmark: Iowan on Apple,
   Palatino or Georgia elsewhere, Noto Serif on Android. Zero bytes. */
.chrome a.chrome__brand {
  color: #fff;
  text-decoration: none;
  font: 700 21px/1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.chrome__nav {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 14px;
  white-space: nowrap;
}
.chrome a.chrome__link {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.chrome a.chrome__link:hover { opacity: 1; text-decoration: underline; }
/* Where you are: a sand rule under the word, the mark the site's headings use. */
.chrome a.chrome__link[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--s-sand);
}