/* The developer page's own rules. The rest is style.css, which every page of ours loads;
   the documents inside the frame have their own, docs.css (doc/style.css). */
#page main { max-width: none; }
#doc { display: block; width: 100%; height: calc(100vh - 10.8rem); min-height: 24rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); }

/* Searching every page: the bar, the Regular expressions switch, and the sections found */
#search { display: block; position: relative; margin-bottom: 0.6rem; }
#search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
#search-query { flex: 1 1 16rem; min-width: 0; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.4rem 0.95rem; }
#search-query:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#search-query.bad { border-color: var(--bad); }
.switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; white-space: nowrap; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .slider { position: relative; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--line);
  transition: background var(--ease); flex: none; }
.switch .slider::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--ease); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::after { transform: translateX(1rem); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
#search-results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 0.35rem); max-height: min(60vh, 34rem);
  overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 0.5rem 0.75rem; }
#search-said { margin: 0.2rem 0 0.4rem; }
#search-list { list-style: none; margin: 0; padding: 0; }
#search-list li + li { border-top: 1px solid var(--line); }
#search-list a { display: block; padding: 0.45rem 0.4rem; border-radius: 8px; text-decoration: none; color: inherit; }
#search-list a:hover, #search-list a:focus-visible { background: var(--accent-soft); }
#search-list .where { display: block; color: var(--accent); font-weight: 600; }
#search-list .where .count { color: var(--muted); font-weight: normal; }
#search-list .words { display: block; font-size: 0.92em; color: var(--muted); overflow-wrap: anywhere; }
#search-list mark { background: var(--new); color: inherit; border-radius: 3px; padding: 0 1px; }
@media (max-width: 40rem) {
  #doc { height: calc(100vh - 11rem); border-radius: 8px; }
}