/* Site header and footer for pages that carry their own stylesheet.
 *
 * what-it-does.html was built standalone and defines its own `.brand` and
 * `.wrap`, so it cannot load site.css without the two fighting. Every class
 * here is prefixed `osp-` so a collision is impossible.
 *
 * The values are copied from site.css deliberately rather than approximated.
 * The first attempt at this header used system-ui at slightly different
 * weights and a smaller button, and the result was a menu that visibly
 * changed font and size when you moved between pages — which reads as broken
 * even though every link works, because the eye tracks the menu, not the
 * words.
 *
 * If site.css changes, these change with it. There is no way to share the
 * values without also sharing the conflicting rules.
 */

.osp-bar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.osp-bar-inner {
  width: min(1120px, 100% - 2.5rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem; padding-block: 0.9rem;
}

.osp-brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 700 1.05rem/1 "Inter", -apple-system, sans-serif;
  letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
}
.osp-brand svg {
  width: 26px; height: 26px; padding: 4px; border-radius: 7px;
  background: var(--teal); color: #fff; flex: 0 0 auto;
}

.osp-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.osp-nav a:not(.osp-cta) {
  font: 500 0.92rem/1 "Inter", -apple-system, sans-serif;
  text-decoration: none; color: var(--soft); transition: color .15s;
}
.osp-nav a:not(.osp-cta):hover { color: var(--teal); }
@media (max-width: 720px) { .osp-nav .osp-hide-sm { display: none; } }

.osp-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.25rem; border-radius: 9px;
  font: 600 0.95rem/1 "Inter", -apple-system, sans-serif;
  text-decoration: none; border: 1px solid transparent;
  background: var(--teal); color: #fff; transition: background .15s;
}
.osp-cta:hover { background: var(--teal-deep, var(--teal)); }
:where(.osp-bar, .osp-foot) a:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px;
}

.osp-foot {
  border-top: 1px solid var(--rule); padding-block: 2.5rem;
  font: 400 0.9rem/1.6 "Inter", -apple-system, sans-serif; color: var(--muted);
}
.osp-foot-inner {
  width: min(1120px, 100% - 2.5rem); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline;
}
.osp-foot-inner nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.osp-foot a { color: var(--soft); text-decoration: none; }
.osp-foot a:hover { color: var(--teal); }
/* Same compare row as the main footer. This page loads chrome.css instead of
   site.css, so the rule has to exist in both. */
.osp-foot .foot-compare {
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.86rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
}

.osp-tail {
  border-top: 1px solid var(--rule); padding: 2.5rem 0; text-align: center;
  font-family: "Inter", -apple-system, sans-serif;
}


/* The same white-on-accent problem .btn-primary had. In dark mode the accent
   is pale, so white text on it measured 1.7:1 - the main call to action on
   the page, effectively unreadable. */
/* Its own token: the pages using this stylesheet do not load site.css, so
   var(--on-teal) was always falling back to #fff - which was the bug. */
:root { --on-teal: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --on-teal: #07201D; }
}
:root[data-theme="dark"] { --on-teal: #07201D; }

.osp-cta { color: var(--on-teal); }
.osp-foot { color: var(--soft); }
.osp-foot a { color: var(--soft); }