/* Site chrome — the one header and footer every page shares.
   Owned by deploy/site-chrome.js, which fills the placeholders
   <header data-site-nav> and <footer data-site-footer> at serve time.
   Also owns the shared palette so the site pages and the served report read
   as one product. Report HTML keeps its own copy of the palette because the
   local coach pipeline renders it without this stylesheet. */

:root {
  color-scheme: light;
  --canvas: #f5f5f7;
  --card: #fff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --hairline: #d2d2d7;
  --hairline-soft: #e8e8ed;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: #f0f6ff;
  --alert: #c8102e;
  --radius: 18px;
  --site-width: 1120px;
  --site-gutter: 40px;
  --site-nav-height: 56px;
}

.site-nav,
.site-footer {
  box-sizing: border-box;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--site-nav-height);
  border-bottom: 1px solid var(--hairline-soft);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
}

.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - var(--site-gutter)), var(--site-width));
  height: calc(var(--site-nav-height) - 1px);
  margin: auto;
}

.site-brand {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.site-brand img {
  display: block;
  width: auto;
  height: 24px;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav-links a {
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
}

.site-nav-links a:hover {
  color: var(--ink);
}

.site-nav-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.site-nav-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.site-account {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  font-size: 13px;
}

.site-account a {
  overflow: hidden;
  max-width: 220px;
  color: var(--ink-2);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-account a:hover {
  color: var(--ink);
}

.site-logout {
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: min(calc(100% - var(--site-gutter)), var(--site-width));
  margin: 0 auto;
  padding: 22px 0 40px;
  border-top: 1px solid var(--hairline-soft);
  color: var(--ink-3);
  font-size: 12px;
}

.site-footer:empty {
  display: none;
}


.site-footer p {
  margin: 0;
}

.footer-brand,
.footer-contact {
  display: grid;
  gap: 6px;
}

.footer-logo {
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: 4px;
}

.footer-contact {
  text-align: right;
}

.footer-contact span {
  display: inline-block;
  min-width: 42px;
  margin-right: 8px;
  color: var(--ink-2);
}

.footer-contact a {
  color: inherit;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  :root {
    --site-gutter: 28px;
  }

  .site-brand img {
    height: 22px;
  }

  .site-nav-links {
    gap: 18px;
  }

  .site-footer {
    flex-direction: column;
    gap: 16px;
  }

  .footer-contact {
    text-align: left;
  }
}

@media print {
  .site-nav,
  .site-footer {
    display: none !important;
  }
}