/* Problem-statement dropdown: a small button that shrink-wraps its label, rather
   than sphinx-design's full-width card. Once open, the body spans the normal text
   column so the statement reads as ordinary prose.
   Every rule is prefixed with [role=main] because sphinx-design's stylesheet and
   Furo's extension sheet are both added after this file, so their .sd-card /
   .sd-card-header rules win on equal specificity. The prefix outweighs them
   without needing !important; keep it on anything that contests one of their
   properties. */
[role="main"] details.sd-dropdown.problem-statement {
    /* .sd-card is display:flex + width:100%; shrink to the label instead. */
    display: table;
    width: auto;
    /* Furo's extension sheet gives every .sd-card a drop shadow, which would sit
       under the button as a second, offset box. */
    box-shadow: none;
    border: none;
    background: none;
}

/* The header. sphinx-design puts BOTH .sd-summary-title and .sd-card-header on
   the same <summary> element, so this is one selector target, not nested. The
   :not([open]) variant is needed to outweigh sphinx-design's own
   `details.sd-dropdown:not([open]) > .sd-card-header` border rule. */
[role="main"] details.problem-statement > summary.sd-card-header,
[role="main"] details.problem-statement:not([open]) > summary.sd-card-header {
    /* The chevron is absolutely positioned over the right edge, so the label needs
       padding-right to clear it. sphinx-design reserves 3em !important for a
       full-size icon; 1.9em suits the smaller one here. */
    padding: 0.3rem 1.9em 0.3rem 0.7rem !important;
    font-size: var(--font-size--small);
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid var(--color-background-border);
    border-radius: 0.25rem;
    background: var(--color-background-secondary);
}

[role="main"] details.problem-statement > summary.sd-card-header:hover {
    background: var(--color-background-hover);
}

/* The chevron is absolutely positioned at right:1em/top:1em for a full-size card;
   pull it in to match the smaller button and shrink it to suit the text. */
[role="main"] details.problem-statement :is(.sd-summary-down, .sd-summary-up) {
    top: 0.3em;
    right: 0.4em;
}

[role="main"] details.problem-statement :is(.sd-summary-down, .sd-summary-up) svg {
    width: 1.1em;
    height: 1.1em;
}

/* Open: the button is just a handle, so let the revealed statement use the full
   text column rather than the button's narrow width. */
[role="main"] details.sd-dropdown.problem-statement[open] {
    display: block;
    width: 100%;
}

[role="main"] details.problem-statement > .sd-summary-content.sd-card-body {
    padding: 0;
    margin-top: 0.8em;
}

/* Data-preview: caps the "Bringing in your data" tab's literalinclude of the
   raw data file at 10 visible rows, scrolling for anything longer, so a
   34-row CSV (Sudoku) doesn't push the chat transcript below it off-screen
   the way an uncapped block would. Shared across every classic example's
   data tab (Diet, Facility, Sudoku, ...) via the :class: option on
   literalinclude — one rule, applied the same way everywhere.
   Furo's --code-font-size is a *percentage* (81.25%), not a length, so it
   cannot be used inside this calc() — max-height would silently resolve
   against the (indefinite) containing block and never actually cap
   anything. Sizing in em instead: Furo's .highlight pre uses line-height
   1.5, so 10 lines = 15em, plus its 0.625rem top+bottom padding.
*/
[role="main"] .data-preview pre {
    max-height: calc(15em + 1.25rem);
    overflow-y: auto;
}

/* Every example page wraps its intro + problem-statement dropdown in a
   "Problem Statement" section purely so it shows up as the first entry in
   the right TOC panel, ahead of "Built with Modeler". It sits directly under
   the page's own <h1>, so the theme's default h1,h2 margin-top (1.75rem)
   stacks on top of the title's own spacing and reads as an oversized gap
   between the title and the intro text below it — tighten it here. */
#problem-statement > h2 {
    margin-top: 0.25rem;
}

/* Furo's :target rule reserves just enough scroll-margin-top to clear the
   sticky mobile header, which is right for headings deeper in a page but
   undershoots for this one: it's the first section, sitting right below the
   page's own <h1>, so that fixed offset lands mid-title instead of at the
   top of the page. Overshoot on purpose — the browser clamps scrollY to 0,
   so following this anchor always lands at the true top of the page. */
#problem-statement {
    scroll-margin-top: 9999px;
}