/* Selected sage theme, shared by the main, Methods and Privacy pages. */
:root {
  --paper: #e2ebe3;
  --surface: #fdfcf8;
  --ink: #25382f;
  --muted: #526459;
  --accent: #00b4ef;
  --line: #fffefa;
}
body::before {
  background-image: url("/static/images/gauze-sage-strips.webp");
  filter: url(#gauze-cooler);
  opacity: 1;
}
#gauze-material { filter: url(#gauze-cooler); }
body::after {
  background: linear-gradient(180deg, #e2ebe30a 0%, #e2ebe300 64%, #e2ebe32e 100%);
}
.site-header { background: transparent; }
main { width: min(100% - 6rem, 960px); }
.hero { padding: 3.2rem 0 2.1rem; }
.home {
  --mobile-nav-height: 70px;
  min-height: 100dvh;
}
.home .site-header {
  position: sticky;
  top: 0;
  background: var(--paper);
}
.home .hero {
  width: min(100% - 6rem, 960px);
  margin: 0 auto;
  padding: 1.375rem 0 1.25rem;
}
.home .upload-form { max-width: 260px; }
.home main {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 1rem 0;
  overflow: visible;
}
.home main:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.home main > .card {
  width: min(100% - 6rem, 960px);
  min-height: 31.25rem;
  margin: 0 auto 1rem;
  scroll-margin-top: 96px;
}
.home main > #collaborate { min-height: 0; }
.home > .site-footer {
  position: relative;
  z-index: 10;
  padding: .45rem 1rem max(.65rem, env(safe-area-inset-bottom));
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 5px #26423612;
}
.card:focus { outline: none; }
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
a {
  color: var(--accent);
  font-weight: 700;
  text-decoration-color: var(--accent);
  text-decoration-thickness: .16em;
  text-underline-offset: .16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.card a:not(:has(img)) { padding-block: .06em; }
/* Text links share an inverse highlight without changing the line layout. */
a:not(.skip-link):not(.back-link):not(:has(img)):not(.site-nav a):focus-visible {
  color: #fff;
  background: var(--accent);
  text-decoration-line: none;
  box-shadow: .2em 0 0 var(--accent), -.2em 0 0 var(--accent);
}
a:focus-visible, button:focus-visible, input:focus-visible { outline-color: var(--ink); }
.site-nav a, .site-footer a {
  color: var(--ink);
  border-radius: 2px;
}
.site-nav a {
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  padding: .4rem .65rem;
}
.site-footer a { display: inline-block; padding: .25rem .4rem; }
.site-nav a[aria-current="location"] {
  color: #fff;
  background: var(--accent);
}
@media (hover: hover) {
  a:not(.skip-link):not(.back-link):not(:has(img)):not(.site-nav a):hover {
    color: #fff;
    background: var(--accent);
    text-decoration-line: none;
    box-shadow: .2em 0 0 var(--accent), -.2em 0 0 var(--accent);
  }
}
.upload-frame { background: #8b8878; border: 1px solid #fffefa; }
.upload-frame::before { filter: saturate(.85); opacity: .88; }
.upload-frame::after { background: #1b30284d; }
.upload-frame label { color: #fff; text-shadow: 0 1px 4px #18251dcc; }
.reference-figure > a { position: relative; isolation: isolate; }
.reference-figure > a::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .08; pointer-events: none; }
.back-link, .back-link:hover {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
.back-link-arrow { font-size: 1.25rem; line-height: 1; }
.document { padding-top: .5rem; }
.document .hero { text-align: left; padding: 2.5rem 0 2rem; }
.document .hero h1 { max-width: none; margin: 0; }
.document .card { padding: 2.2rem; }
@media (max-width: 760px) {
  main { width: calc(100% - 2rem); }
  .site-nav a { display: grid; align-content: center; min-height: 44px; padding: .4rem .25rem; }
  .hero { padding: 2.8rem .5rem 1.8rem; }
  .home .hero { width: calc(100% - 2rem); padding: 1.375rem .5rem 1.5rem; }
  .home main > .card { width: calc(100% - 2rem); }
  .detector-content { gap: 1.5rem; }
  .home .upload-form { max-width: 300px; }
  .document .hero { padding: 1.8rem .25rem 1.5rem; }
  .document .card { padding: 1.5rem; }
}
@media (max-height: 560px) {
  .home { --mobile-nav-height: 60px; }
  .home .hero { padding: .5rem 0 1rem; }
  .home .hero h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
  .home .site-nav { min-height: 60px; }
}
/* Compact screens use content-sized cards beneath the sticky navigation. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 560px) {
  .home .site-nav { min-height: var(--mobile-nav-height); }
  .home main > .card {
    width: calc(100% - 2rem);
    min-height: 0;
    scroll-margin-top: calc(var(--mobile-nav-height) + 1rem);
  }
}
@media print {
  .home .site-header { position: static; }
  .home main > .card { min-height: 0; }
}