/* MissionOS Mobile Manual — doc-reader specific styles.
   Ported verbatim from the original hardcoded template.

   NOTE: the shared article typography (headings, paragraphs, lists,
   links, tables, figures — everything under ".md-body") now lives in
   css/content-typography.css, which loads on EVERY page so normal
   posts/pages get the same look, not just Doc Hub. This file only
   keeps what's genuinely specific to the Doc Hub reader UI: sidebar/
   TOC behaviour, the doc-meta card shape, tags, related topics, and
   print layout. */

.toc-link.is-current { color: #fd5902; font-weight: 700; border-left-color: #fd5902; }
.dark .toc-link.is-current { color: #ff8a3d; border-left-color: #ff8a3d; }

.nav-link.is-current {
  background-image: linear-gradient(135deg, #fd5902 0%, #ff8a3d 100%);
  color: #fff !important;
}
.dark .nav-link.is-current { background-image: linear-gradient(135deg, #ff8a3d 0%, #ffb26b 100%); }

details.doc-accordion > summary { list-style: none; cursor: pointer; }
details.doc-accordion > summary::-webkit-details-marker { display: none; }
details.doc-accordion[open] > summary .chev { transform: rotate(90deg); }
/* Content wrapper uses `display:flex` via a utility class, which as an
   author style overrides the browser's native hiding of closed <details>
   content — this rule restores real collapse behaviour. */
details.doc-accordion:not([open]) > div { display: none; }
.chev { transition: transform 0.2s ease; }

/* Base look (padding, color, hover) now comes from the Tailwind
   utility classes applied directly in taxonomy-missionos_products.php
   (missionos_sidebar_title_classes()), shared with the group-heading
   <summary> elements so the whole sidebar reads as one consistent
   typographic system. Only the JS-driven "currently open doc" state is
   defined here, since that can't be expressed as a static utility
   class. */
.side-link.is-current {
  color: #fd5902 !important;
  font-weight: 700;
  background: 
color-mix(in srgb, #fd5902 12%, transparent);
    box-shadow: inset 3px 0 0 #fd5902;
}
.dark .side-link.is-current { color: #ff8a3d !important; }

code.inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: #eef2ff;
  color: #4338ca;
  padding: 0.1em 0.45em;
  border-radius: 6px;
}
.dark code.inline-code { background: #1e293b; color: #a5b4fc; }

/* ==========================================================================
   Version / Date / Prepared-by meta card, directly under the doc title.
   Deliberately its own look (fully rounded, all four corners) rather
   than the default in-content blockquote below, which keeps its
   two-corner "quote" shape since it's used for actual quoted text.
   ========================================================================== */
.md-body blockquote.doc-meta {
  background: transparent;
  border-radius: 14px;
  border-left-width: 3px;
}
.dark .md-body blockquote.doc-meta { background: transparent; border-radius: 14px; }

.md-version-line { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.82rem; color: #94a3b8; background: #f1f5f9; border-radius: 999px; padding: 0.4rem 0.9rem; margin-bottom: 1.5rem; }
.dark .md-version-line { background: #1e293b; color: #94a3b8; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Related Topics — card grid shown at the end of each doc's content.
   ========================================================================== */
.related-topics {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid #e2e8f0;
}
.dark .related-topics { border-color: #334155; }
.related-topics__heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin: 0 0 0.9rem;
}
.related-topics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.related-topics__card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.dark .related-topics__card { background: #162032; border-color: #334155; }
.related-topics__card:hover {
  border-color: #fd5902;
  background: #fff;
  transform: translateY(-2px);
}
.dark .related-topics__card:hover { border-color: #ff8a3d; background: #1e293b; }
.related-topics__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef2ff;
  color: #fd5902;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dark .related-topics__icon { background: #283548; color: #ff8a3d; }
.related-topics__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.related-topics__title { font-size: 13.5px; font-weight: 700; color: #0b1124; line-height: 1.35; }
.dark .related-topics__title { color: #f1f5f9; }
.related-topics__excerpt {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.related-topics__arrow { font-size: 11px; color: #cbd5e1; flex-shrink: 0; margin-top: 0.35rem; transition: transform 0.15s ease, color 0.15s ease; }
.related-topics__card:hover .related-topics__arrow { color: #fd5902; transform: translateX(2px); }
.dark .related-topics__card:hover .related-topics__arrow { color: #ff8a3d; }

/* ==========================================================================
   Sticky sidebar + TOC
   Written as real rules (not just relying on the Tailwind CDN's arbitrary-
   value classes) so this keeps working even if Tailwind's runtime JIT is
   ever unavailable. Scoped to the >=1024px layout, matching where the
   grid switches from a single column (mobile drawer) to the
   280px / 1fr / 220px three-column layout.
   ========================================================================== */
@media (min-width: 1024px) {
  #docSidebar,
  #articleToc {
    position: sticky;
    top: 110px; /* clears the 55px sticky header + the sticky product/version toolbar above it */
    align-self: flex-start;
    max-height: calc(100vh - 110px - 24px);
    overflow-y: auto;
  }
}

/* Doc sidebar scroll area — a bit of breathing room between the nav
   links and the scrollbar itself, plus a slim, theme-tinted scrollbar
   instead of the browser default so it doesn't look out of place
   against the rest of the (otherwise mostly scrollbar-free) UI. Falls
   back gracefully to the default scrollbar in browsers that support
   neither property (functionality is unaffected either way). */
.doc-sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  scrollbar-gutter: stable;
}
.dark .doc-sidebar-scroll {
  scrollbar-color: #475569 transparent;
}
.doc-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}
.doc-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.doc-sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 999px;
}
.dark .doc-sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: #475569;
}
.doc-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}
.dark .doc-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #64748b;
}

/* Guard rail: position:sticky silently stops working the moment ANY
   ancestor between the sticky element and the viewport gets a
   non-visible overflow or a transform/filter (they create a new
   scroll container / containing block). None of the ancestors of
   #docSidebar or #articleToc should ever carry these — if a future
   edit adds one of these utility classes to <body>, the hero section,
   the grid wrapper, etc., it will re-break stickiness even though
   this file hasn't changed. Nothing to do here at rule-level (this
   can't be enforced purely in CSS) — noted for future maintainers.
*/

/* Print styling lives entirely in css/print.css now — see that file's
   docblock. (A duplicate @media print block used to live here too;
   having two separate print stylesheets doing overlapping work is
   exactly what caused a real bug: this block's `.doc-panel { break-
   inside: avoid }` told the browser never to split the *entire*
   document body across a page boundary, so whenever the content
   didn't fit on page 1 the browser pushed the whole thing onto page
   2, leaving page 1 blank under the header. Consolidated to one file
   so there's a single source of truth for print layout.) */