/* PyDocs additions on top of the reused ClojureDocs CSS. Keep this small:
   parity comes from reusing clojuredocs-app.css unchanged. */

/* Long code lines scroll inside their box, never the whole page (PLAN.md §1). */
pre {
  overflow-x: auto;
  max-width: 100%;
}

/* Same look as ClojureDocs' .var-page .docstring .copyright, reused on module
   pages and for the CPython implementation-detail note. */
.ns-page .copyright,
.var-page .impl-detail-note {
  text-align: right;
  font-size: 10px;
  color: var(--text-faint);
}
.ns-page .copyright a {
  color: var(--text-faint);
}

/* ClojureDocs' home layout is ~10px wider than a 375px phone: the search
   wrapper's negative margins exceed the container padding, and the grid columns
   grow to fit unbreakable text. PLAN.md §1 requires no sideways scroll. */
.intro-page .core-index-section .sphere {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 992px) {
  .intro-page .core-index-section .sphere {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Up to the md breakpoint: below 992px the column has no offset, so the
   wrapper's -25px margins pass the gutter (by 10px on phones, 1px at 768px). */
@media (max-width: 991px) {
  .intro-page .quick-lookup-wrapper {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Some Python names are long unbroken identifiers
   (XML_ERROR_ATTRIBUTE_EXTERNAL_ENTITY_REF); let them wrap on phones. */
.var-list li {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ClojureDocs' open autocomplete uses -20px side margins, wider than the 15px
   phone gutter, so the page scrolled sideways while searching. */
@media (max-width: 767px) {
  body.search-active header.navbar .ac-results-widget {
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 15px;
  }
}

/* Home "More modules" cards: highlight links have no whitespace between them
   (same markup as ClojureDocs), so long Python names like Path.read_text could
   not wrap and ran out of the card. Let them wrap as a flex row. */
.intro-page .namespace-card {
  min-width: 0;
}
.intro-page .namespace-card .vars {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-xs);
  row-gap: 2px;
}
.intro-page .namespace-card .vars a {
  margin-right: 0;
  overflow-wrap: anywhere;
}

/* Style guide code blocks: ClojureDocs gives them a background but no padding. */
.examples-styleguide-content pre.syntaxify {
  padding: var(--space-sm);
}

/* Sticky sidebar (PLAN.md §5 #18). Bootstrap 3 columns are floats, so the
   column itself sticks (inside the .row, which is as tall as the content);
   long nav lists scroll within it. The desktop navbar is sticky at the top. */
@media (min-width: 768px) {
  .var-page .sidenav,
  .ns-page .sidenav,
  .core-library-page .sidenav,
  .quickref-page .toc-sidenav {
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* Admin page: spacing for the inline ban form and the day picker. */
.admin-page #ban-form .form-control,
.admin-page #audit-day {
  margin: 0 var(--space-2xs) var(--space-xs) 0;
  max-width: 100%;
}

/* The hidden attribute must win over Bootstrap's display rules (.btn,
   .nav > li, ...); the page scripts hide and show elements with it. */
[hidden] {
  display: none !important;
}

/* Seeded examples (Phase 7): "from the Python docs", styled like the
   docstring copyright line. */
.var-example .example-source {
  text-align: right;
  font-size: 10px;
  color: var(--text-faint);
  margin-top: var(--space-2xs);
}

/* "Changed in 3.x" under the docstring: a small, muted toggle. */
.var-page .changed-in summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
.var-page .changed-in ul {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-sm);
}

/* Run button (Phase 8): right end of the example's meta row, just above the
   code block's top-right corner. Not drawn over the code: on phones it would
   cover the first line. */
.example-meta .run-example {
  float: right;
  margin-right: calc(-1 * var(--space-2xs));
  padding: 2px 10px;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-brand);
  background: var(--bg);
  border: 1px solid var(--color-brand);
  border-radius: 3px;
}
.example-meta .run-example:hover:not(:disabled) {
  color: var(--color-on-solid);
  background: var(--color-brand);
}
.example-meta .run-example:focus {
  outline: none;
}
.example-meta .run-example:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.example-meta .run-example:disabled {
  cursor: default;
  color: var(--text-muted);
  border-color: var(--border);
}
.example-meta .run-example .fa {
  font-size: 10px;
}

/* Example runner output (Phase 8), below the example code. */
.example-output {
  margin-top: var(--space-2xs);
  border-left: 3px solid var(--color-brand);
  padding-left: var(--space-xs);
}
.example-output-head {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.example-output-note {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.example-output-note code {
  display: inline-block; /* wraps to the next line as a whole */
  max-width: 100%;
  font-size: inherit;
}
.example-output-head .loading {
  margin-left: var(--space-2xs);
  vertical-align: middle;
}
.example-output pre {
  margin: var(--space-2xs) 0 0;
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: var(--font-size-sm);
}
.example-output pre.example-output-error {
  color: var(--color-error, #c00);
}

/* Small action links (link / history / run / edit / delete / report):
   Bootstrap 3 draws the focus ring inside the text (outline-offset: -2px),
   hiding it after a click. Show a ring only for keyboard focus, outside. */
.example-meta .links a:focus,
.note-meta a:focus,
.see-also .meta a:focus {
  outline: none;
}
.example-meta .links a:focus-visible,
.note-meta a:focus-visible,
.see-also .meta a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}