/* The website in Allen's prototype look (27 Sep 2026), matching the
   extension: his gold banner as the top bar, his shield, Source Serif 4
   headings and blue calls to action. Loaded after each page's own styles, so
   it wins where they overlap. Every colour is a token from tokens.css. */

nav {
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, var(--fsa-gold-hi) 0%, var(--fsa-gold) 32%, var(--fsa-gold-mid) 62%, var(--fsa-gold-deep) 85%, var(--fsa-gold-lo) 100%);
  box-shadow: inset 0 2px 6px rgba(255, 246, 200, 0.9), inset 0 -3px 8px rgba(146, 98, 0, 0.35);
  border-bottom: 2px solid var(--fsa-banner-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
nav .brand {
  font-family: var(--fsa-font-display);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--fsa-banner-ink);
}
nav .navlinks,
nav .navlinks a:not(.btn),
nav a.back {
  color: var(--fsa-banner-ink);
}
nav .navlinks a:not(.btn):hover,
nav a.back:hover {
  color: var(--fsa-banner-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The top bar's button keeps white text on hover: the page's own rule for
   link hovers used to turn it dark on the button's colour. */
nav .navlinks .btn,
nav .navlinks .btn:hover {
  color: var(--fsa-brand-text);
}

/* The shield, wherever a page shows the logo. */
.mark {
  background: var(--fsa-shield) center / contain no-repeat !important;
  border-radius: 0 !important;
}
.mark > svg {
  visibility: hidden;
}

/* Blue calls to action, as in the extension; outlined buttons keep theirs. */
.btn {
  background: var(--fsa-cta);
}
.btn:hover {
  background: var(--fsa-cta-hover);
}
.btn.ghost,
.btn.ghost:hover {
  background: var(--fsa-surface);
  color: var(--fsa-ink);
}

h1,
h2,
h3 {
  font-weight: 600;
}

::selection {
  background: var(--fsa-hero-bg);
  color: var(--fsa-ink);
}

/* The pictures of the side panel wear its own gold banner. */
.preview {
  overflow: hidden;
  padding-top: 0;
  border-color: transparent;
}
.preview .pv-head,
.panel .pv-head {
  margin: 0 -16px 14px;
  padding: 10px 14px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, var(--fsa-gold-hi) 0%, var(--fsa-gold) 32%, var(--fsa-gold-mid) 62%, var(--fsa-gold-deep) 85%, var(--fsa-gold-lo) 100%);
  box-shadow: inset 0 2px 6px rgba(255, 246, 200, 0.9), inset 0 -3px 8px rgba(146, 98, 0, 0.35);
  border-bottom: 2px solid var(--fsa-banner-line);
}
.preview .pv-head .pv-title,
.panel .pv-head .pv-title {
  font-family: var(--fsa-font-display);
  font-weight: 600;
  color: var(--fsa-banner-ink);
}
.preview .pv-head .pv-sub,
.panel .pv-head .pv-sub {
  color: var(--fsa-banner-ink);
}
.preview .pv-head .mark,
.panel .pv-head .mark {
  width: 28px;
  height: 28px;
}