/*
 * EDGE JOURNAL · STANDALONE ARTICLE INDEX
 *
 * The folder explorer (#edge-os-sidebar) and the article index
 * (#edge-os-article-panel) are DIRECT CHILDREN of .main-container.
 * No shared .edge-os-side-column: separate backgrounds, borders, scroll
 * regions and sticky positions. Both work through one responsive menu toggle.
 */
body.edge-os-enabled.article-page .edge-os-shell > .main-container {
  --reader-rail-top: 64px;
  --reader-rail-height: calc(100dvh - 92px);
  --reader-explorer-height: calc(var(--reader-rail-height) * .56);
  --reader-panel-gap: 14px;
  --reader-index-height: calc(var(--reader-rail-height) * .44 - var(--reader-panel-gap));
  display: grid !important;
  grid-template-columns: clamp(230px, 16vw, 288px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, auto) !important;
  align-items: start !important;
  gap: 0 !important;
  background: transparent !important;
}
body.edge-os-enabled.article-page .edge-os-shell > .main-container > main.main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-sidebar.left-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: var(--reader-rail-top) !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: calc(100% - 20px) !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: var(--reader-explorer-height) !important;
  max-height: var(--reader-explorer-height) !important;
  margin: 10px 10px 0 !important;
  padding: 12px 12px 0 !important;
  border: 1px solid var(--os-border) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #111a26, #0b121c) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}
body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-sidebar > .edge-os-sidebar-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-article-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: calc(var(--reader-rail-top) + var(--reader-explorer-height) + var(--reader-panel-gap)) !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  width: calc(100% - 20px) !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: var(--reader-index-height) !important;
  max-height: var(--reader-index-height) !important;
  margin: calc(var(--reader-explorer-height) + var(--reader-panel-gap) + 10px) 10px 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(115,167,223,.3) !important;
  border-radius: 8px !important;
  background: linear-gradient(170deg, #111e2e, #0b131e 88%) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__header {
  display: grid;
  gap: 9px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 14px 13px 12px;
  border-bottom: 1px solid var(--os-border);
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--os-accent-soft);
  font: 700 10px/1.4 var(--os-mono);
  letter-spacing: .07em;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__label i {
  display: block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #77cf9a;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__title {
  display: block;
  max-height: calc(1.4em * 3);
  color: var(--os-ink);
  font: 650 13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-wrap: anywhere;
  overflow: hidden;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: #94b4d2;
  font: 600 10px/1.45 var(--os-mono);
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 8px 9px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(145,177,215,.55) transparent;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__scroll:focus-visible {
  outline: 2px solid var(--os-accent-soft);
  outline-offset: -2px;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__scroll--empty {
  color: var(--os-muted);
  font-size: 12px;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-toc :is(ul,li) {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-toc ul ul {
  margin-left: 9px !important;
  padding-left: 7px !important;
  border-left: 1px solid var(--os-border);
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-toc a {
  display: block;
  min-height: 33px;
  padding: 8px 8px 8px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  color: #aabbd0;
  font: 500 12px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-toc a:hover,
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-toc a[aria-current="location"] {
  color: #f3f9ff;
  border-left-color: var(--os-accent-soft);
  background: rgba(74,157,255,.10);
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__footer {
  flex: 0 0 auto;
  padding: 6px 12px 7px;
  border-top: 1px solid var(--os-border);
  background: #0d1724;
}
body.edge-os-enabled.article-page #edge-os-article-panel .edge-os-article-panel__footer .edge-os-return {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  color: var(--os-accent-soft);
  font: 700 11px/1.5 var(--os-mono);
  text-decoration: none;
}

/* Drawer: the two independent siblings slide together, each as its own card.
   No wrapper gets a background; the backdrop covers behind both cards. */
@media (max-width: 1200px) {
  body.edge-os-enabled.article-page .edge-os-shell > .main-container {
    --reader-mobile-width: min(90vw, 355px);
    --reader-mobile-explorer-height: clamp(250px, 52dvh, 520px);
    display: block !important;
  }
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > main.main {
    display: flex !important;
    width: 100% !important;
  }
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-sidebar.left-sidebar,
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-article-panel {
    position: fixed !important;
    z-index: 1302 !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(var(--reader-mobile-width) - 24px) !important;
    max-width: calc(var(--reader-mobile-width) - 24px) !important;
    margin: 0 !important;
    border: 1px solid var(--os-border) !important;
    border-radius: 8px !important;
    transform: translateX(calc(-100% - 24px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: 8px 12px 32px rgba(0,0,0,.3);
    transition: transform .26s cubic-bezier(.2,.75,.2,1), opacity .18s, visibility .26s step-end;
  }
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-sidebar.left-sidebar {
    top: 12px !important;
    height: var(--reader-mobile-explorer-height) !important;
    max-height: var(--reader-mobile-explorer-height) !important;
    padding: 11px 12px 0 !important;
  }
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-article-panel {
    top: calc(22px + var(--reader-mobile-explorer-height)) !important;
    height: calc(100dvh - var(--reader-mobile-explorer-height) - 34px) !important;
    max-height: calc(100dvh - var(--reader-mobile-explorer-height) - 34px) !important;
    padding: 0 !important;
  }
  body.edge-os-enabled.edge-os-nav-open.article-page .edge-os-shell > .main-container > #edge-os-sidebar.left-sidebar,
  body.edge-os-enabled.edge-os-nav-open.article-page .edge-os-shell > .main-container > #edge-os-article-panel {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .26s cubic-bezier(.2,.75,.2,1), opacity .18s, visibility 0s;
  }
}
@media (max-height: 620px) and (min-width: 1201px) {
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-sidebar.left-sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-sidebar > .edge-os-sidebar-scroll {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-sidebar.left-sidebar,
  body.edge-os-enabled.article-page .edge-os-shell > .main-container > #edge-os-article-panel {
    transition: none !important;
  }
}