/* Styles used by all specs, including both Living Standards and Review
   Drafts, but not the HTML Dev Edition. Just bare structural stuff,
   since RDs intentionally don't get very styled. RDs will *not* have
   access to the common variables, so supply a basic (light-mode)
   fallback value for any variable usage in this stylesheet. */

.head .logo { position: absolute; top: 1em; right: 1em; line-height: 0; }
.head .logo img { border: none; }

.toc, .toc li { list-style: none; }

pre > code.idl::before, pre.idl::before { content: 'IDL'; }
pre > code.css::before, pre.highlight.lang-css::before { content: 'CSS'; }

.note::before { content: 'Note'; }
.warning::before { content: '\26A0 Warning!'; }
.example::before { content: 'Example'; }
dl.domintro::before { content: 'For web developers (non-normative)'; }

/* Floating-but-collapsible annoying warning.
   Colors are intentionally not darkmode-adjusted; they're
   meant to be eye-catching and annoying. */
details.annoying-warning {
  background-color: #920800;
  background-image: linear-gradient(transparent 40%, rgba(255, 255, 255, 0.2));
  border: solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  border-width: 1px 1px 0 1px;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.95);
  opacity: .95;
  position: fixed;
  left: 5%;
  margin: 0 auto;
  right: 5%;
  z-index: 10;
}

details.annoying-warning[open] {
  top: 10%;
  top: calc(5vw + 5vh);
  max-width: 1024px;
  outline: solid 10000px rgba(255, 255, 255, 0.6);
}

details.annoying-warning:not([open]) {
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
}

details.annoying-warning > summary {
  display: list-item; /* polyfill */
  font-size: 0.875em;
  font-weight: bold;
  letter-spacing: 0.02em;
  padding: 10px 5px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.85);
  cursor: default;
}

details.annoying-warning > summary::after {
  content: " Expand";
  position: absolute;
  top: 0;
  right: 5px;
  font-size: smaller;
  font-weight: bold;
}

details.annoying-warning[open] > summary::after {
  content: " Collapse";
}

details.annoying-warning p {
  padding: 0 7.5% 1em;
  line-height: 1.4;
  margin: 0;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.85);
}

details.annoying-warning a {
  color: white;
  text-decoration: underline;
}