/* ============================================
   Missing Theme
   Matches official hyperscript.org styling
   Uses missing.css framework with site.css overrides
   ============================================ */

/* Theme activation - apply to :root when theme is active */
.missing-theme {
  /* Official hyperscript.org root variables (from site.css) */
  --rhythm: 1.4rem;
  --line-length: 90ch;
  --accent: #3465a4;
  --muted-accent: #3d72d7;
  --mono-font: "Source Code Pro", "Consolas", monospace, monospace;
  --gap: 10px;
}

/* Apply font-size to html element when missing-theme is active */
html.missing-theme {
  font-size: 110%;
}

/* Dark mode variant */
html.-dark-mode.missing-theme,
html.missing-theme.-dark-mode {
  --accent: #6d9eeb;
  --muted-accent: #8ab4f8;
}

/* ============================================
   Core Styling (from hyperscript.org site.css)
   ============================================ */

.missing-theme pre,
.missing-theme code {
  font-size: inherit;
}

.missing-theme ul,
.missing-theme ol {
  margin-inline-start: 0.5em;
}

.missing-theme ul {
  list-style-type: disc;
}

.missing-theme .logo:hover {
  cursor: pointer;
}

.missing-theme .hide {
  display: none;
}

.missing-theme .active a {
  font-weight: bold;
}

/* ============================================
   Responsive Design (from hyperscript.org site.css)
   ============================================ */

@media (max-width: 45em) {
  .missing-theme pre[class*="language-"] {
    /* Match official site responsive code blocks */
    overflow-x: scroll !important;
    border-radius: 0 !important;
  }

  .missing-theme .no-mobile {
    display: none !important;
  }
}

/* ============================================
   Search Box (from hyperscript.org site.css)
   ============================================ */

.missing-theme .search-box {
  width: 3em;
  transition: width 0.2s ease-in-out;
}

.missing-theme .search-box:focus {
  width: 15em;
}

/* ============================================
   Content Styling (from hyperscript.org site.css)
   ============================================ */

.missing-theme .header-anchor {
  display: block;
  width: 0;
  float: left;
  opacity: 0;
  transform: translateX(-1.5ch);
  font-weight: normal;
  text-decoration: none;
}

.missing-theme :hover > .header-anchor,
.missing-theme .header-anchor:focus {
  opacity: 1;
}

/* Syntax highlighting badges (from hyperscript.org site.css) */
.missing-theme .syntax b {
  color: var(--info-fg);
  font-family: var(--main-font);
  line-height: 1.2em;
  font-weight: normal;
  padding: 0 0.4em;
  display: inline-block;
}

.missing-theme .syntax sup {
  background: #cdf;
  line-height: 1.1ch;
  width: 1.1ch;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  margin-left: -0.4em;
  border: 2px solid white;
  box-sizing: content-box;
  font-size: 1.1em;
  font-weight: bold;
  vertical-align: text-top;
  color: #3465a4;
}

.missing-theme .syntaxes dd {
  margin-block-start: calc(0px - var(--gap));
}

.missing-theme .syntaxes dt code {
  font-weight: 700;
  margin-inline-end: 2ch;
}

.missing-theme .f-switch {
  gap: 10px var(--gap);
}

/* ============================================
   Links - Use accent color from hyperscript.org
   ============================================ */

.missing-theme a {
  color: var(--accent);
}

.missing-theme a:hover {
  color: var(--muted-accent);
}

/* ============================================
   Code Blocks - Use mono-font variable
   ============================================ */

.missing-theme pre,
.missing-theme pre[class*="language-"] {
  font-family: var(--mono-font);
}

.missing-theme :not(pre) > code {
  font-family: var(--mono-font);
}

/* ============================================
   Forms - Use accent color for focus states
   ============================================ */

.missing-theme input:focus,
.missing-theme select:focus,
.missing-theme textarea:focus {
  outline-color: var(--accent);
}

/* ============================================
   Print - Reset font size
   ============================================ */

@media print {
  html.missing-theme {
    font-size: 100%;
  }
}