/* The site's chrome: the bar at the top and the map at the end of every page of the public site
   (SitePage::Chrome, written into each page by bin/site-sync). Every prototype brings its own
   styles, so every rule here hangs from the chrome's two ids: the roots start from `all: initial`
   and everything inside them from the browser's defaults. Nothing on a page reaches in, and nothing
   here reaches out.

   The fonts are the families the pages already load (Newsreader, Geist), with
   system fallbacks on a page that has none. The one face of the chrome's own is the word Par's,
   beside the mark: both are files of this folder, so every page shows them alike. */

/* The face the product sets the word Par in, DM Sans 600 (the latin subset the home ships). Under
   a name of its own, so a page's own "DM Sans" never meets it. */
@font-face {
  font-family: "Par Chrome DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(dm-sans-600-latin.woff2) format("woff2");
}

/* The bar stays at the top while the page scrolls, so a jump to an anchor stops below it. */
:root { --par-chrome-bar: 48px; scroll-padding-top: var(--par-chrome-bar); }
@media (pointer: coarse) { :root { --par-chrome-bar: 56px; } }

#par-chrome-bar,
#par-chrome-map,
#par-chrome-consent {
  all: initial;
  --par-chrome-bg: #f7f0e1;
  --par-chrome-surface: #fffdf8;
  --par-chrome-text: #211a10;
  --par-chrome-soft: #4d4434;
  --par-chrome-muted: #6e6350;
  --par-chrome-rule: #e9dec7;
  --par-chrome-rule-strong: #d8cbaa;
  --par-chrome-ink: #2b231b;
  --par-chrome-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --par-chrome-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --par-chrome-word: "Par Chrome DM Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --par-chrome-gutter: clamp(16px, 5vw, 64px);
  display: block;
  box-sizing: border-box;
  color-scheme: light;
  background: var(--par-chrome-bg);
  color: var(--par-chrome-text);
  font: 400 15px/1.45 var(--par-chrome-sans);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#par-chrome-bar::before, #par-chrome-bar::after,
#par-chrome-map::before, #par-chrome-map::after,
#par-chrome-consent::before, #par-chrome-consent::after { content: none; }
#par-chrome-bar *, #par-chrome-bar ::before, #par-chrome-bar ::after,
#par-chrome-map *, #par-chrome-map ::before, #par-chrome-map ::after,
#par-chrome-consent *, #par-chrome-consent ::before, #par-chrome-consent ::after {
  all: revert;
  box-sizing: border-box;
}

:is(#par-chrome-bar, #par-chrome-map, #par-chrome-consent) .par-chrome-wrap {
  display: block;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--par-chrome-gutter);
}
/* the bar and the map wear the site's one ring (the :where rule at the end), here at full weight so a
   page's own styles can't drop it: 4.7:1 on the cream */
:is(#par-chrome-bar, #par-chrome-map, #par-chrome-consent) :focus-visible {
  outline: 2px solid #496c99;
  outline-offset: 3px;
}

/* ── the shared pieces ─────────────────────────────────────────────── */
/* The mark and the word as the home's header set them: par-mark.png beside Par in DM Sans 600. The
   png carries air around the P, so the negative margins put the P itself on the column edge. */
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  margin: 0;
  color: var(--par-chrome-text);
  font: 600 28px/1 var(--par-chrome-word);
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-mark img {
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
  margin: 0 -2px 0 -11px;
}
/* The bar uses its flex gap for the space between the brand and the menu pill. */
#par-chrome-bar .par-chrome-mark { font-size: 23px; letter-spacing: -0.025em; }
#par-chrome-bar .par-chrome-mark img { width: 39px; height: 39px; margin: 0 -1px 0 -9px; }
:is(#par-chrome-bar, #par-chrome-map, #par-chrome-consent) .par-chrome-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--par-chrome-ink);
  color: #fffdf8;
  font: 500 14px/1 var(--par-chrome-sans);
  text-decoration: none;
  white-space: nowrap;
}
:is(#par-chrome-bar, #par-chrome-map, #par-chrome-consent) .par-chrome-cta:hover { background: #000; }

:is(#par-chrome-bar, #par-chrome-map) .par-chrome-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  margin: 0;
}
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-group { display: block; margin: 0; }
/* The way in (Get started, Pricing) is a row of its own over the topic columns, its links side by
   side, so its two links leave no hole under them. The manifest keeps it first. */
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-group:first-child { grid-column: 1 / -1; }
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-group:first-child .par-chrome-list { display: flex; flex-wrap: wrap; gap: 0 32px; }
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-group-name {
  margin: 0 0 6px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--par-chrome-rule);
  color: var(--par-chrome-muted);
  font: 500 13px/1.4 var(--par-chrome-sans);
}
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-list { display: block; margin: 0; padding: 0; list-style: none; }
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-list > li { display: block; margin: 0; padding: 0; }
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-link {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--par-chrome-soft);
  font: 400 15px/1.3 var(--par-chrome-sans);
  text-decoration: none;
}
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-link:hover,
:is(#par-chrome-bar, #par-chrome-map) .par-chrome-link[aria-current="page"] {
  color: var(--par-chrome-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* ── the bar: slim, stuck to the top, its menu a <details> ─────────── */
#par-chrome-bar {
  position: sticky;
  top: 0;
  z-index: 2147483000;
  height: var(--par-chrome-bar);
  border-bottom: 1px solid var(--par-chrome-rule);
}
#par-chrome-bar > .par-chrome-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}
#par-chrome-bar .par-chrome-menu { display:block; flex:0 1 auto; min-width:0; max-width:100%; margin:0; }
#par-chrome-bar .par-chrome-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 13px 0 15px;
  border: 1px solid var(--par-chrome-rule-strong);
  border-radius: 999px;
  color: var(--par-chrome-soft);
  font: 400 14px/1 var(--par-chrome-sans);
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#par-chrome-bar .par-chrome-toggle::-webkit-details-marker { display: none; }
/* While the menu is open, a click or a tap anywhere outside it lands on this layer, which is part
   of the summary, so it closes the menu without a script. It lies over the page and under the
   panel, which comes after it. A scroll gesture is not a click, so it leaves the menu open. */
#par-chrome-bar .par-chrome-menu[open] > .par-chrome-toggle::before {
  content: "";
  position: fixed;
  inset: 0;
  cursor: default;
}
#par-chrome-bar .par-chrome-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
#par-chrome-bar .par-chrome-toggle:hover,
#par-chrome-bar .par-chrome-menu[open] > .par-chrome-toggle {
  border-color: var(--par-chrome-ink);
  color: var(--par-chrome-text);
}
#par-chrome-bar .par-chrome-menu[open] > .par-chrome-toggle { background: var(--par-chrome-surface); }
#par-chrome-bar .par-chrome-menu[open] > .par-chrome-toggle::after { margin-top: 3px; transform: rotate(-135deg); }
#par-chrome-bar .par-chrome-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  color: var(--par-chrome-soft);
  font: 400 14px/1 var(--par-chrome-sans);
  text-decoration: none;
  white-space: nowrap;
}
#par-chrome-bar .par-chrome-quiet:hover {
  color: var(--par-chrome-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
#par-chrome-bar .par-chrome-actions { display:flex; flex:none; align-items:center; gap:16px; margin-left:auto; }

/* The open menu lies over the page, under the bar and as wide as the window. */
#par-chrome-bar .par-chrome-panel {
  display: block;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--par-chrome-bar));
  max-height: calc(100svh - var(--par-chrome-bar));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--par-chrome-rule-strong);
  background: var(--par-chrome-surface);
}
#par-chrome-bar .par-chrome-panel > .par-chrome-wrap { padding-top: 28px; padding-bottom: 24px; }
#par-chrome-bar .par-chrome-aside {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 24px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--par-chrome-rule);
}
#par-chrome-bar .par-chrome-aside .par-chrome-link { font-size: 14px; }

/* ── the cookie notice (analytics.js), for visitors from Europe ─────── */
/* A strip like the open menu's panel, held at the bottom of the window: the question, then two
   pills of the same weight, so neither answer is the easy one. */
#par-chrome-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483000;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--par-chrome-rule-strong);
  background: var(--par-chrome-surface);
}
/* The room the notice takes at the foot of the window, at the end of <body>, so the end of the page
   scrolls above it; analytics.js sets its height. */
#par-chrome-consent-space { all: initial; display: block; }
#par-chrome-consent > .par-chrome-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
#par-chrome-consent .par-consent-text {
  flex: 1 1 320px;
  margin: 0;
  color: var(--par-chrome-soft);
  font: 400 14px/1.45 var(--par-chrome-sans);
  text-wrap: pretty;
}
#par-chrome-consent .par-consent-text a { color: var(--par-chrome-text); text-underline-offset: 2px; }
#par-chrome-consent .par-consent-actions { display: flex; flex: none; gap: 8px; }
#par-chrome-consent .par-chrome-cta { min-width: 104px; border: 0; cursor: pointer; }
@media (max-width: 479px) {
  #par-chrome-consent .par-consent-actions { flex: 1 1 100%; }
  #par-chrome-consent .par-chrome-cta { flex: 1 1 0; }
}
@media (pointer: coarse) { #par-chrome-consent .par-chrome-cta { min-height: 44px; } }

/* ── the map at the end of the page ────────────────────────────────── */
#par-chrome-map { border-top: 1px solid var(--par-chrome-rule-strong); }
#par-chrome-map > .par-chrome-wrap {
  display: grid;
  gap: 36px;
  padding-top: 48px;
  padding-bottom: 64px;
}
/* What Par is, and whose it is: one line in the serif, one small and calm, across the whole map. */
#par-chrome-map .par-chrome-about {
  display: block;
  grid-column: 1 / -1;
  max-width: 720px;
  margin: 0;
}
#par-chrome-map .par-chrome-what {
  margin: 0;
  color: var(--par-chrome-text);
  font: 400 clamp(20px, 2.2vw, 24px)/1.35 var(--par-chrome-serif);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
#par-chrome-map .par-chrome-privacy {
  margin: 12px 0 0;
  color: var(--par-chrome-muted);
  font: 400 14px/1.5 var(--par-chrome-sans);
  text-wrap: pretty;
}
#par-chrome-map .par-chrome-home {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
#par-chrome-map .par-chrome-home .par-chrome-mark { font-size: 21px; }
#par-chrome-map .par-chrome-home .par-chrome-mark img { width: 34px; height: 34px; margin: 0 -1px 0 -8px; }
#par-chrome-map .par-chrome-home .par-chrome-cta { margin-left: auto; }
#par-chrome-map .par-chrome-home .par-chrome-list { display: flex; flex-basis: 100%; order: 3; gap: 0 28px; }

@media (min-width: 760px) {
  :is(#par-chrome-bar, #par-chrome-map) .par-chrome-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (min-width: 980px) {
  #par-chrome-map > .par-chrome-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: 32px; }
  #par-chrome-map .par-chrome-home { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
  #par-chrome-map .par-chrome-home .par-chrome-list { display: block; flex-basis: auto; order: 0; }
  #par-chrome-map .par-chrome-home .par-chrome-cta { margin: 14px 0 0; }
}

/* A phone's bar: a smaller brand, pill and button, with room between them inside the 16px gutter.
   Below 400px Sign in waits in the menu (and the map), so the row keeps its air, and below 360px
   the pill and the button step down once more. */
@media (max-width: 479px) {
  #par-chrome-bar, #par-chrome-map, #par-chrome-consent { --par-chrome-gutter: 16px; }
  #par-chrome-bar > .par-chrome-wrap { gap: 10px; }
  #par-chrome-bar .par-chrome-mark { gap: 3px; font-size: 20px; }
  #par-chrome-bar .par-chrome-mark img { width: 30px; height: 30px; margin: 0 0 0 -7px; }
  #par-chrome-bar .par-chrome-toggle { min-height: 36px; padding: 0 12px 0 14px; font-size: 14px; }
  #par-chrome-bar .par-chrome-quiet { font-size: 14px; }
  #par-chrome-bar .par-chrome-cta { min-height: 40px; padding: 0 15px; font-size: 14px; }
}
@media (min-width: 360px) and (max-width: 499px) {
  #par-chrome-bar .par-chrome-actions { gap: 8px; }
  #par-chrome-bar .par-chrome-cta { padding: 0 10px; }
}
@media (min-width: 400px) and (max-width: 439px) {
  #par-chrome-bar .par-chrome-mark span { display: none; }
}
@media (max-width: 399px) {
  #par-chrome-bar .par-chrome-quiet { display: none; }
  #par-chrome-bar .par-chrome-cta { margin-left: auto; }
}
@media (max-width: 359px) {
  #par-chrome-bar :is(.par-chrome-toggle, .par-chrome-cta) { font-size: 13px; }
  #par-chrome-bar .par-chrome-toggle { padding: 0 10px 0 12px; }
  #par-chrome-bar .par-chrome-cta { padding: 0 13px; }
}

/* A finger needs 44 px. */
@media (pointer: coarse) {
  :is(#par-chrome-bar, #par-chrome-map) :is(.par-chrome-mark, .par-chrome-toggle, .par-chrome-quiet, .par-chrome-cta, .par-chrome-link) { min-height: 44px; }
}
/* On a phone the pill and the button look smaller than that, and a clear layer keeps each 44px
   tall for a finger. */
@media (pointer: coarse) and (max-width: 479px) {
  #par-chrome-bar .par-chrome-toggle { position: relative; min-height: 36px; }
  #par-chrome-bar .par-chrome-cta { position: relative; min-height: 40px; }
  #par-chrome-bar .par-chrome-menu:not([open]) > .par-chrome-toggle::before { content: ""; position: absolute; inset: -5px 0; }
  #par-chrome-bar .par-chrome-cta::before { content: ""; position: absolute; inset: -2px 0; }
}

/* Append AFTER the shared chrome reset. Names remain visible; no animation. */
:is(#par-chrome-bar,#par-chrome-map) .par-page-emoji { display:block; flex:0 0 28px; width:28px; height:28px; object-fit:contain; margin:0; padding:0; border:0; }
:is(#par-chrome-bar,#par-chrome-map) .par-chrome-link:has(.par-page-emoji) { display:flex; align-items:center; gap:8px; min-height:36px; white-space:normal; }
:is(#par-chrome-bar,#par-chrome-map) .par-chrome-link .par-page-name { min-width:0; overflow-wrap:anywhere; }
#par-chrome-bar .par-chrome-menu-label { display:none; }
#par-chrome-bar .par-page-identity { display:flex; flex:1 1 auto; align-items:center; justify-content:flex-start; gap:6px; min-width:0; margin:0; color:#1c4b30; font:500 15px/1.2 var(--par-chrome-sans); white-space:nowrap; }
#par-chrome-bar .par-page-identity img { display:block; flex:none; width:36px; height:36px; object-fit:contain; }
/* The Sonar drawing sits left of center in its square canvas. */
#par-chrome-bar .par-page-identity img[src$="/sonar.webp"] { transform:translateX(1px); }
#par-chrome-bar .par-page-identity span { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:639px) {
  #par-chrome-bar > .par-chrome-wrap { gap:8px; }
  #par-chrome-bar .par-chrome-toggle { padding:0 10px; gap:5px; }
  #par-chrome-bar .par-page-identity { gap:4px; font-size:14px; }
  #par-chrome-bar .par-page-identity img { width:28px; height:28px; }
  #par-chrome-bar .par-chrome-toggle::after { flex:none; }
}
@media (max-width:479px) {
  #par-chrome-bar .par-page-identity { white-space:normal; }
  #par-chrome-bar .par-page-identity span { overflow:visible; text-overflow:clip; }
}
@media (max-width:359px) {
  #par-chrome-bar > .par-chrome-wrap { gap:4px; }
  #par-chrome-bar .par-chrome-mark span { display:none; }
  #par-chrome-bar .par-chrome-toggle { padding:0 4px; gap:4px; }
  #par-chrome-bar .par-page-identity img { width:24px; height:24px; }
  #par-chrome-bar .par-chrome-cta { padding:0 8px; font-size:12px; }
}
@media (max-width:600px),(pointer:coarse) { :is(#par-chrome-bar,#par-chrome-map) .par-chrome-link:has(.par-page-emoji) { min-height:44px; } }

/* Approved press and release timing for the site kit’s light-blue button. */
.hp-btn{transition:background-color var(--par-dur-slow) ease,transform var(--par-dur) var(--par-ease),box-shadow var(--par-dur) var(--par-ease)}
.hp-btn:active{transform:translateY(1px) scale(.95);box-shadow:none;transition:transform var(--par-dur-fast) ease,box-shadow var(--par-dur-fast) ease}
@media(prefers-reduced-motion:reduce){.hp-btn,.hp-btn:hover,.hp-btn:active{transition:none;transform:none}}

/* The one rule that reaches out on purpose: every page's focus ring, the home's blue (#496c99, over
   3:1 on the cream, the blue panel and the dark closing band). Inside :where() it weighs nothing,
   so a page's own ring still wins; it only replaces the browser's default. */
:where(:focus-visible) { outline: 2px solid #496c99; outline-offset: 3px; border-radius: 4px; }