/* docs.css — Documentation section only (docs/*.html): the
   sidebar+content layout, code/pre blocks, the doc-meta table, and
   the SQL Reference catalog's jump links and per-DOI sections.
   Depends on tokens defined in base.css. */

.docs-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}
.docs-sidebar {
  flex: 0 0 220px;
  position: sticky;
  /* Clears the now-sticky site header (base.css) plus a little
     breathing room, rather than sticking to the very top of the
     viewport and hiding underneath it. */
  top: 4.5rem;
}
/* Boxed card -- previously just bare text floating next to the
   content, which made it hard to pick out. White/bordered rather than
   a tinted panel, matching the "白系" call made earlier for the
   homepage's update cards (a tinted panel read as dated there too). */
.docs-sidebar-inner {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1rem 1.1rem 0.2rem;
  /* As the link count grows, the sidebar can end up taller than the
     viewport. Without its own scroll, position:sticky just leaves the
     bottom entries off-screen until the main content is scrolled far
     enough for the sidebar to un-stick -- so it scrolls internally
     instead, independent of how far the content has scrolled. Reset
     for the mobile accordion below, where position is static and
     this isn't an issue. */
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}
.docs-sidebar h3 {
  border-bottom: 1px solid var(--line);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.docs-sidebar h3:not(:first-child) { margin-top: 1.5rem; }
.docs-sidebar ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
/* A bottom border per item, not just margin, so items read as
   distinct rows instead of blurring together -- same pattern as
   .pub-list/.latest-pub-item elsewhere on the site. */
.docs-sidebar li { border-bottom: 1px solid var(--line); }
.docs-sidebar li:last-child { border-bottom: none; }
.docs-sidebar a {
  display: block;
  padding: 0.55rem 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.88rem;
}
.docs-sidebar a:hover { background: var(--paper-alt); color: var(--accent); }
.docs-sidebar a.current { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.docs-sidebar .coming-soon {
  display: block;
  padding: 0.4rem 0.6rem;
  color: var(--line);
  font-family: var(--font-sans);
  font-size: 0.88rem;
}
.docs-sidebar .file-name {
  display: block;
  font-family: "SFMono-Regular", Consolas, Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 0.72rem;
  opacity: 0.7;
  margin-top: 0.1rem;
}
.docs-content { flex: 1 1 auto; min-width: 0; }
.docs-content code {
  font-family: "SFMono-Regular", Consolas, Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 0.85em;
  background: var(--paper-alt);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  /* Inline code (long filenames, table cells) can be a single
     unbroken word same as the h1 fix in base.css was for -- lets it
     break rather than force the page wider on a narrow screen. */
  overflow-wrap: break-word;
}
.docs-content pre {
  /* Fixed dark terminal look, regardless of the page's light/dark
     theme -- easier to read than a background that flips against the
     surrounding page, and reads clearly as "this is code". */
  background: #1c1f1a;
  border: 1px solid #3a3d33;
  border-radius: 4px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  /* Defensive: without this, a long unbroken line can push the flex
     item wider than its container on some browsers even with
     min-width:0 set upstream, forcing the whole page to scroll
     horizontally instead of just this block. */
  max-width: 100%;
  line-height: 1.6;
}
.docs-content pre code {
  background: none;
  padding: 0;
  font-size: 0.82rem;
  color: #e8e6df;
}
table.doc-meta {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 1.8rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
}
table.doc-meta th, table.doc-meta td {
  text-align: left;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  vertical-align: top;
}
table.doc-meta th {
  background: var(--paper-alt);
  width: 9rem;
  font-weight: 700;
  white-space: nowrap;
}
.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0 0 1.6rem;
  padding: 0.9rem 1rem;
  background: var(--paper-alt);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
}
.docs-content .jump-links a {
  color: var(--accent);
  text-decoration: none;
  background: none;
  padding: 0;
  margin: 0;
}
.jump-links a:hover { text-decoration: underline; }
/* Title line + description line, dashed row dividers -- same pattern
   as .pub-list on the Publications page. Replaces an earlier bulleted
   single-line-per-item layout that crammed a link, inline code,
   em-dash, and (on the SQL list) a badge all onto one line -- reads
   as cluttered once there are 8+ items. */
.doc-index-list, .sql-index-list {
  list-style: none;
  margin: 0.6rem 0 1.6rem;
  padding: 0;
}
.doc-index-list li, .sql-index-list li {
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--line);
}
.doc-index-list li:last-child, .sql-index-list li:last-child { border-bottom: none; }
.doc-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.doc-item-desc {
  margin: 0.4rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.doc-index-list code { font-size: 0.92em; }

.sql-file-list { margin: 0.6rem 0 1.6rem; padding-left: 1.3rem; }
.sql-file-list li { margin-bottom: 0.6rem; line-height: 1.6; }
.sql-file-list details { margin-bottom: 0.6rem; }
.sql-file-list li:has(details) { margin-bottom: 0; }
.sql-file-list summary { cursor: pointer; list-style: none; }
.sql-file-list summary::-webkit-details-marker { display: none; }
.sql-file-list summary::marker { content: ""; }
.sql-toggle {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}
.sql-toggle .sql-toggle-open { display: none; }
details[open] > summary .sql-toggle .sql-toggle-closed { display: none; }
details[open] > summary .sql-toggle .sql-toggle-open { display: inline; }
.sql-file-list summary:hover .sql-toggle { text-decoration: underline; }
.sql-walkthrough {
  margin: 1rem 0 0.4rem;
  padding: 0 0 0 0.2rem;
  border-left: 2px solid var(--line);
  padding-left: 1rem;
}
.sql-walkthrough p { font-size: 0.88rem; }
.sql-walkthrough pre { margin: 0 0 0.9rem; }
.sql-no-file {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
}
.doi-sql-section { margin-bottom: 2.2rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.doi-sql-section:last-of-type { border-bottom: none; }
.doi-sql-section h2 { margin-bottom: 0.3rem; }
.doi-sql-section .zenodo-link {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  margin: 0 0 0.8rem;
}
/* Which pipeline generation a SQL walkthrough's database came from --
   neutral colors on purpose (old-DB does not mean wrong: two of the
   four models were confirmed unaffected by the bug it predates). */
.pipeline-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  margin: 0.8rem 0 1.4rem;
}

/* Boxed inline diagram for a docs/sql walkthrough (e.g. the 8-bit
   quantization worked example on DOI 1.16). Same pattern as
   ssim.html's .window-diagram-wrap, incl. the sub-480px fix: below
   that width the SVG's own text would shrink along with the
   container and become unreadable, so it's pinned to its authored
   pixel width there and the wrap scrolls horizontally instead. */
.concept-diagram-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.4rem;
  margin: 1.2rem 0 1.8rem;
  overflow-x: auto;
}
.concept-diagram-wrap svg { display: block; width: 100%; height: auto; }
@media (max-width: 480px) {
  .concept-diagram-wrap svg { width: 600px; min-width: 600px; }
}
.concept-diagram-caption {
  margin: 0.9rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}
/* .db-tag itself moved to base.css -- it's also used on
   demonstrations.html's SQL-video grid, outside the docs section. */

.coming-soon-box {
  background: var(--paper-alt);
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.glossary { margin: 0.6rem 0 1.6rem; }
.glossary dt {
  font-family: "SFMono-Regular", Consolas, Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  margin: 1.5rem 0 0.3rem;
}
.glossary dt:first-child { margin-top: 0; }
.glossary dd {
  margin: 0 0 0;
  line-height: 1.75;
}

/* .docs-sidebar-toggle: a native <details>, `open` by default in the
   HTML -- so without JS (or above the mobile breakpoint) the sidebar
   is simply always expanded, same as before this feature existed.
   docs_sidebar_toggle.js removes `open` below the breakpoint so it
   starts collapsed there; the browser's native toggle handles the
   rest, no more JS involved than that. */
.docs-sidebar-toggle summary {
  display: none;
  cursor: pointer;
  list-style: none;
}
.docs-sidebar-toggle summary::-webkit-details-marker { display: none; }
.docs-sidebar-toggle summary::marker { content: ""; }

@media (max-width: 720px) {
  /* .docs-layout's align-items:flex-start (correct for the desktop
     row layout -- top-align sidebar and content, don't stretch either
     to match the other's height) means something different once
     flex-direction flips to column here: the axes swap, so
     flex-start now shrinks each child to its own content WIDTH
     instead of stretching it to fill the line -- which is what let
     an unbreakable h1 (a bare filename, no spaces) force .docs-content
     wider than the viewport, dragging the whole page into horizontal
     overflow despite overflow-wrap:break-word on the heading itself
     (that rule only matters once the box has an actual width to wrap
     within). Restoring stretch here is the real fix. */
  .docs-layout { flex-direction: column; align-items: stretch; }
  .docs-sidebar { position: static; flex: 1 1 auto; width: 100%; }
  .docs-sidebar-toggle summary {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.7rem 0.9rem;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  .docs-sidebar-toggle summary::after { content: " \25BE"; }
  .docs-sidebar-toggle[open] summary {
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
  }
  .docs-sidebar-toggle[open] summary::after { content: " \25B4"; }
  .docs-sidebar-toggle .docs-sidebar-inner {
    border-top: none;
    border-radius: 0 0 4px 4px;
    /* Not sticky here, so the internal-scroll fix above would just
       clip the expanded accordion unnecessarily -- let it take
       whatever height its content needs instead. */
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 480px) {
  /* table.doc-meta's fixed 9rem label column leaves too little room
     for the value column on a phone-width screen -- stack each row
     as label-then-value instead of a rigid two-column table. */
  table.doc-meta, table.doc-meta tbody, table.doc-meta tr,
  table.doc-meta th, table.doc-meta td {
    display: block;
    width: auto;
  }
  table.doc-meta tr { margin-bottom: 0.8rem; }
  table.doc-meta th {
    border-bottom: none;
    padding-bottom: 0.2rem;
  }
  table.doc-meta td { border-top: none; }
}