/* Options for the fixed "Jump to" sidebar (.toc-sidebar, >= 1300px): move it to the other side, widen the page, or hide it.
   Same saved preferences as the "More like this" pages: localStorage "asideSide" -> html.aside-left, "pageWide" -> html.page-wide;
   plus "tocHidden" -> html.toc-hidden. Restored before first paint by the TOC-FLIP-HEAD inline script.
   Behaviour: main_js/toc-flip.js. Patched into pages by add_toc_flip.py. */
:root { --toc-w: 760px; }
html.page-wide { --toc-w: max(760px, min(1100px, calc(100vw - 520px))); }  /* article column; room left for the sidebar beside it */

.toc-tools { display: none; flex-wrap: wrap; gap: 6px; margin: 0 0 .8em; }
.toc-tools button { display: inline-flex; align-items: center; gap: .3em; padding: .2em .6em; border: 1px solid #b9c2cc; border-radius: 999px;
  background: #fff; color: #1479c7; font: inherit; font-size: .82em; line-height: 1.3; cursor: pointer; opacity: 1 !important; white-space: nowrap; }
.toc-tools button:hover, .toc-tools button[aria-pressed="true"] { background: #1479c7; color: #fff; border-color: #1479c7; }
:is(body.dark-mode, body.dark) .toc-tools button { background: #2e2e2e; color: #6cb6f5; border-color: #555; }
:is(body.dark-mode, body.dark) .toc-tools button:hover, :is(body.dark-mode, body.dark) .toc-tools button[aria-pressed="true"] { background: #6cb6f5; color: #111; border-color: #6cb6f5; }
.toc-reopen { display: none; }
.toc-wide-pill, .toc-wide-row { display: none; }

@media (min-width: 1300px) {
  .toc-tools { display: flex; }
  /* Wide / Narrow: top right of the article, on the title row (same look as the calculator pages' pill) */
  .toc-has-wide { position: relative; }
  .toc-has-wide > .toc-wide-pill { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
  .toc-wide-row { display: flex; justify-content: flex-end; margin: .7em 0 -.5em; }
  .toc-wide-pill { display: inline-flex; align-items: center; gap: .35em; padding: .28em .8em; border: 1px solid #b9c2cc;
    border-radius: 999px; background: #fff; color: #1479c7; font: inherit; font-size: .82em; line-height: 1.2; cursor: pointer; }
  .toc-wide-pill:hover, .toc-wide-pill[aria-pressed="true"] { background: #1479c7; color: #fff; border-color: #1479c7; }
  :is(body.dark-mode, body.dark) .toc-wide-pill { background: #2e2e2e; color: #6cb6f5; border-color: #555; }
  :is(body.dark-mode, body.dark) .toc-wide-pill:hover, :is(body.dark-mode, body.dark) .toc-wide-pill[aria-pressed="true"] { background: #6cb6f5; color: #111; border-color: #6cb6f5; }
  /* sidebar sits just outside the article column, whatever its width */
  html .toc-sidebar { left: calc(50% + var(--toc-w) / 2 + 30px); }
  html.aside-left .toc-sidebar { left: auto; right: calc(50% + var(--toc-w) / 2 + 30px); padding-right: 0; padding-left: 10px; }
  html.page-wide .container { max-width: var(--toc-w); }
  html.page-wide .footer { max-width: var(--toc-w); }
  html.toc-hidden .toc-sidebar { display: none; }
  /* small tab where the sidebar was, to bring it back */
  html.toc-hidden .toc-reopen { display: inline-flex; align-items: center; gap: .35em; position: fixed; top: 90px; z-index: 12;
    left: calc(50% + var(--toc-w) / 2 + 30px); padding: .3em .8em; border: 1px solid #b9c2cc; border-radius: 999px; background: #fff; color: #1479c7;
    font: inherit; font-size: .82em; cursor: pointer; }
  html.toc-hidden.aside-left .toc-reopen { left: auto; right: calc(50% + var(--toc-w) / 2 + 30px); }
  html.toc-hidden .toc-reopen:hover { background: #1479c7; color: #fff; border-color: #1479c7; }
  :is(body.dark-mode, body.dark) .toc-reopen { background: #2e2e2e; color: #6cb6f5; border-color: #555; }
  :is(body.dark-mode, body.dark) .toc-reopen:hover { background: #6cb6f5; color: #111; border-color: #6cb6f5; }
}