/* Compare the Graph-AI Functions — page-specific styles.
   Base look (header, buttons, lightbox, variables) comes from index.css.
   Layout is full-width, docs-style: sidebar flush against the left edge of the page. */

/* Desktop: the page itself does not scroll. Only the content area (.cmp-main) does,
   so the sidebar never moves. */
body.cmp-page { overflow: hidden; }

/* Full-width layout, fills the viewport below the fixed header */
.cmp-layout { display: flex; align-items: stretch; height: 100vh; box-sizing: border-box; padding-top: 72px; }

/* Sidebar: flush left, full height, hairline divider */
.cmp-toc { flex: 0 0 280px; width: 280px; height: 100%; overflow-y: auto; box-sizing: border-box; padding: 1.5rem 1rem 2rem 1.25rem; border-right: 1px solid #e4e4de; background: #fff; }
.cmp-toc-title { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint, #8a8880); margin: 0 0 .75rem .5rem; }
.cmp-toc ul { list-style: none; margin: 0; padding: 0; }
.cmp-toc li { margin-bottom: .15rem; }
.cmp-toc a { display: block; padding: .55rem .75rem; border-radius: 8px; color: var(--ink-soft, #55534a); font-weight: 700; text-decoration: none; }
.cmp-toc a span { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-faint, #8a8880); }
.cmp-toc a:hover { background: #f4f4f0; color: var(--ink, #15140f); }
.cmp-toc a.active { background: #f4f4f0; color: var(--ink, #15140f); box-shadow: inset 3px 0 0 var(--accent-dark, #e04a5a); }

/* Main area takes all the remaining width */
.cmp-main { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; box-sizing: border-box; padding: 2rem 3rem 0; }
.cmp-main-inner { max-width: 1280px; margin: 0 auto; }

.cmp-hero { padding: 0 0 1.5rem; }
.cmp-title { font-family: Raleway, sans-serif; font-weight: 800; font-size: 2.4rem; line-height: 1.15; margin: .25rem 0 .75rem; color: var(--ink, #15140f); }
.cmp-lead { font-size: 1.1rem; max-width: 680px; color: var(--ink-soft, #55534a); margin: 0; }

/* Search */
.cmp-search { margin-bottom: 1.5rem; }
.cmp-search input { width: 100%; max-width: 460px; padding: .7rem 1rem; font-size: 1rem; border: 2px solid #d5d5d0; border-radius: 10px; background: #fff; outline: none; }
.cmp-search input:focus { border-color: var(--accent-dark, #e04a5a); }
.cmp-search-count { margin-top: .4rem; font-size: .85rem; color: var(--ink-faint, #8a8880); min-height: 1.1em; }

/* Section */
.cmp-section { padding: 1.5rem 0 2.5rem; border-top: 1px solid #e4e4de; }
.cmp-sec-title { font-family: Raleway, sans-serif; font-weight: 800; font-size: 1.8rem; margin: 0 0 .5rem; color: var(--ink, #15140f); }
.cmp-sec-title span { font-weight: 500; font-size: 1.1rem; color: var(--ink-faint, #8a8880); margin-left: .5rem; }
.cmp-sec-intro { max-width: 760px; color: var(--ink-soft, #55534a); margin: 0 0 1.5rem; }

/* Two columns, identical styling on both sides */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.cmp-col-head { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft, #55534a); padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 2px solid #15140f; }

/* Left: Bloomberg video, 16:9 */
.cmp-frame { position: relative; width: 100%; padding-top: 56.25%; background: #15140f; border: 2px solid #15140f; border-radius: 10px; overflow: hidden; }
.cmp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cmp-credit { margin: .5rem 0 0; font-size: .78rem; color: var(--ink-faint, #8a8880); }

/* Right: catalog */
.cmp-catalog { list-style: none; margin: 0; padding: 0; }
.cmp-tpl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; margin-bottom: .6rem; background: #fff; border: 2px solid #15140f; border-radius: 10px; }
.cmp-tpl-name { font-family: Raleway, sans-serif; font-weight: 700; line-height: 1.3; color: var(--ink, #15140f); }
.cmp-tpl-desc { margin: .25rem 0 0; font-size: .9rem; line-height: 1.4; color: var(--ink-soft, #55534a); }
.cmp-tpl .btn-action { flex: 0 0 auto; white-space: nowrap; }
.cmp-tpl-name { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Small pill next to the template name: opens "The method behind" modal */
.cmp-pill { flex: 0 0 auto; padding: .1rem .6rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6; color: var(--accent-dark, #e04a5a); background: #fff; border: 1.5px solid var(--accent-dark, #e04a5a); border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.cmp-pill:hover, .cmp-pill:focus { background: var(--accent-dark, #e04a5a); color: #fff; outline: none; }
.method-pill {height: 1.8rem;}

/* "The method behind" modal */
.cmp-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(21,20,15,.6); }
.cmp-modal.open { display: flex; }
.cmp-modal-card { position: relative; width: 100%; max-width: 640px; max-height: 85vh; overflow-y: auto; padding: 2rem 2.25rem; background: #fff; border: 2px solid #15140f; border-radius: 14px; }
.cmp-modal-close { position: absolute; top: .6rem; right: .9rem; font-size: 1.8rem; line-height: 1; color: var(--ink-soft, #55534a); background: none; border: 0; cursor: pointer; }
.cmp-modal-close:hover { color: var(--ink, #15140f); }
.cmp-modal-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark, #e04a5a); }
.cmp-modal-title { font-family: Raleway, sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.25; margin: .25rem 2rem 1rem 0; color: var(--ink, #15140f); }
.cmp-modal-body p { margin: 0 0 1rem; line-height: 1.6; color: var(--ink-soft, #55534a); }
.cmp-modal-body .cmp-method-src { margin: 1.25rem 0 0; font-size: .8rem; color: var(--ink-faint, #8a8880); }

/* Rich content inside the method modal: references, question list, structure */
.cmp-modal-card { max-width: 720px; }
.cmp-modal-body h4 { margin: 1.75rem 0 .75rem; padding-top: 1rem; border-top: 1px solid #e4e4de; font-family: Raleway, sans-serif; font-weight: 800; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink, #15140f); }
.cmp-modal-body h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cmp-ref { margin-bottom: 1.25rem; }
.cmp-ref-src { font-weight: 700; color: var(--ink, #15140f); margin-bottom: .35rem; }
.cmp-modal-body blockquote { margin: .5rem 0 0; padding: .25rem 0 .25rem 1rem; border: 0; border-left: 3px solid var(--accent-dark, #e04a5a); font-size: 1rem; line-height: 1.6; font-style: italic; color: var(--ink-soft, #55534a); }
.cmp-modal-body ol, .cmp-modal-body ul { margin: 0 0 1rem; padding-left: 1.4rem; line-height: 1.6; color: var(--ink-soft, #55534a); }
.cmp-modal-body li { margin-bottom: .4rem; }

/* Prompt / parser text shown as a code block */
.cmp-code { margin: .75rem 0 1.25rem; padding: .9rem 1rem; background: #f4f4f0; border: 1px solid #e4e4de; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.6; color: var(--ink, #15140f); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.cmp-structure { list-style: none; padding-left: 0; }
.cmp-structure > li { margin-bottom: 1.5rem; }

/* Screen captures inside the method modal */
.cmp-figure { margin: 1.25rem 0; }
.cmp-figure img { display: block; width: 100%; height: auto; border: 1px solid #d5d5d0; border-radius: 8px; background: #fff; }
.cmp-figure figcaption { margin-top: .4rem; font-size: .8rem; color: var(--ink-faint, #8a8880); text-align: center; }

.cmp-empty { padding: 2rem 0; color: var(--ink-soft, #55534a); }
.cmp-disclaimer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e4e4de; font-size: .78rem; color: var(--ink-faint, #8a8880); }

/* Tablet / mobile: sidebar becomes a top bar, columns stack (video first) */
@media (max-width: 991px) {
  body.cmp-page { overflow: auto; }
  .cmp-layout { flex-direction: column; height: auto; }
  .cmp-toc { flex: none; width: 100%; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid #e4e4de; padding: 1rem 1.25rem; }
  .cmp-toc ul { display: flex; flex-wrap: wrap; gap: .5rem; }
  .cmp-toc a { border: 2px solid #d5d5d0; border-radius: 999px; padding: .35rem .9rem; }
  .cmp-toc a span { display: none; }
  .cmp-toc a.active { background: transparent; box-shadow: none; border-color: var(--accent-dark, #e04a5a); }
  .cmp-main { height: auto; overflow: visible; padding: 1.5rem 1.25rem 0; }
  .cmp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cmp-title { font-size: 1.8rem; }
  .cmp-tpl { flex-direction: column; align-items: flex-start; }
}

/* Frameworks group in sidebar */
.cmp-toc-group { margin-top: 1.5rem; }

/* Framework section: single wide column, "Coming soon" rows */
.cmp-catalog-wide { max-width: 760px; }
.cmp-sec-intro a { color: var(--accent-dark, #e04a5a); font-weight: 700; }
.cmp-soon { border-style: dashed; border-color: #b9b8b0; background: #fafaf7; }
.cmp-soon .cmp-tpl-name { color: var(--ink-soft, #55534a); }
.cmp-badge { flex: 0 0 auto; padding: .1rem .6rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6; color: var(--ink-soft, #55534a); background: #ecece6; border-radius: 999px; }