/* TASK-1069 — the review's «On this page», the owner's variant В of TASK-1052 (20.10.2026, INBOX #233): one narrow
   bar under the review head — «On this page», the section being read, «4 / 7», a thin purple line = share of the
   review read; a press opens the full numbered list under the bar; a choice, Esc, a press outside or Tab out closes it.
   Rules = branch C of docs/os/work/TASK-1019/toc.css (as in the TASK-1052 preview) without the html.v-c prefix, its
   widths, reduced motion and print; the sticky/absolute look only once toc.js runs (html.rtoc-js) — without JS the
   list is shown open in the page flow and the button stays hidden. Owner's tokens only. Review pages only, after header.css. */
/* the review text is one 780 px column under the bar (TASK-1019 spec «Common»; outweighs content.css
   `.review-body .prose { max-width: none }`, so its tables keep the measure too) */
.review-body .prose.review-text { max-width: 780px; }
.rtoc ol { list-style: none; margin: 0; padding: 0; }
.rtoc a { text-decoration: none; color: var(--ink); }
.rtoc-c { margin: 0 0 28px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rtoc-c .rtoc-in { position: relative; max-width: var(--page-width); margin: 0 auto; padding: 0 26px; box-sizing: content-box; }
.rtoc-c .rtoc-nojs { margin: 0; padding: 12px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
                     text-transform: uppercase; color: var(--muted); }
.rtoc-c .rtoc-toggle { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 4px 0; border: 0;
                       background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rtoc-c .rtoc-toggle[hidden] { display: none; }
.rtoc-c .rtoc-toggle:focus-visible { outline-offset: -3px; box-shadow: none; border-radius: 10px; }
.rtoc-c .rtoc-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
                     border-radius: 10px; background: var(--purple-soft); color: var(--purple); }
.rtoc-c .rtoc-icon svg { width: 18px; height: 18px; }
.rtoc-c .rtoc-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rtoc-c .rtoc-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rtoc-c .rtoc-current { overflow: hidden; font-size: 15px; font-weight: 800; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.rtoc-c .rtoc-pos { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rtoc-c .rtoc-chev { flex: none; width: 20px; height: 20px; color: var(--purple); transition: transform 150ms; }
.rtoc-c.is-open .rtoc-chev { transform: rotate(180deg); }
.rtoc-c .rtoc-bar { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--purple); }
.rtoc-c .rtoc-panel { padding: 6px 0 12px; }
.rtoc-c ol { columns: 2 300px; column-gap: 28px; counter-reset: s; }
.rtoc-c li { break-inside: avoid; counter-increment: s; border-top: 1px solid var(--line); }
.rtoc-c li:first-child { border-top: 0; }
.rtoc-c .rtoc-panel a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; box-sizing: border-box; padding: 11px 8px 11px 12px;
                        border-left: 3px solid transparent; font-size: 15px; font-weight: 700; line-height: 1.35; }
.rtoc-c .rtoc-panel a::before { content: counter(s, decimal-leading-zero); flex: none; min-width: 22px; font-size: 13px; font-weight: 800;
                                color: var(--purple); font-variant-numeric: tabular-nums; }
.rtoc-c .rtoc-panel a:hover { background: var(--purple-soft); }
.rtoc-c .rtoc-panel a[aria-current] { border-left-color: var(--purple); background: var(--purple-soft); color: var(--purple); }
.rtoc-c .rtoc-panel a:focus-visible { outline-offset: -3px; box-shadow: none; }

/* with the script: the bar sticks under the 64 px header, the list drops down over the text */
html.rtoc-js { scroll-padding-top: 136px; }                 /* header 64 + bar 54 + 18 */
.rtoc-js .rtoc-c { position: sticky; top: 64px; z-index: 15; }
.rtoc-js .rtoc-c .rtoc-nojs { display: none; }
.stuck .rtoc-c { box-shadow: var(--shadow-stuck); }
.rtoc-js .rtoc-c .rtoc-panel { position: absolute; left: 0; right: 0; top: 100%; display: none; max-height: calc(100vh - 150px); overflow: auto;
                               margin-top: 1px; padding: 6px 26px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
                               border-radius: 0 0 17px 17px; box-shadow: var(--shadow-drop); }
.rtoc-js .rtoc-c.is-open .rtoc-panel { display: block; }

/* TASK-1089 (owner 20.10.2026): from the desktop header up the bar is as wide as the site, not the window — its outer
   edges = the review text's edges (the header's gutter rule), a white box with side lines; the list drops down at the
   same width. Phones and 768 keep the edge-to-edge bar as before. */
@media (min-width: 860px) {
  .rtoc-c { margin: 0 max(26px, calc((100% - var(--page-width)) / 2)) 28px; border: 1px solid var(--line); }
  .rtoc-c .rtoc-in { max-width: none; padding: 0 22px; }
  .rtoc-js .rtoc-c .rtoc-panel { left: -1px; right: -1px; padding: 6px 22px 12px; border: 1px solid var(--line); border-top: 0; }
}
@media (max-width: 859px) {
  html.rtoc-js { scroll-padding-top: 124px; }               /* header 56 + bar 54 + 14 */
  .rtoc-js .rtoc-c { top: 56px; }
  .rtoc-js .rtoc-c .rtoc-panel { max-height: calc(100vh - 130px); }
}
@media (max-width: 759px) {
  .rtoc-c .rtoc-in { padding: 0 16px; }
  .rtoc-js .rtoc-c .rtoc-panel { padding: 4px 16px 10px; }
  .rtoc-c .rtoc-toggle { gap: 10px; }
}
/* UX-02 of ux*: in forced colors the transparent left line of every item showed; only the current one keeps it */
@media (forced-colors: active) {
  .rtoc-c .rtoc-panel a { border-left-color: Canvas; }
  .rtoc-c .rtoc-panel a[aria-current] { border-left-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .rtoc-c .rtoc-chev { transition: none; }
}
@media print {
  .rtoc-js .rtoc-c { position: static; box-shadow: none; }
  .rtoc-js .rtoc-c .rtoc-panel { display: block; position: static; box-shadow: none; }
}

/* TASK-1102 — on a computer the review's «On this page» is the owner's variant А of TASK-1045 (20.10.2026, INBOX
   #231): a row of section pills under the review head, as wide as the site (TASK-1089: its outer edges = the text's
   edges), sticking under the header; the section being read is the filled purple pill. Rules = branch A of
   docs/os/work/TASK-1019/toc.css (pills 44 high, 56 px edge fades, arrows for a mouse) in the white box of TASK-1089.
   The build puts the row before the В bar; from 860 px the row is shown and the bar hidden, below 860 the opposite
   (phones and 768 keep TASK-1069). Without the script the pills wrap in the page flow; toc-row.js makes them one
   sticky row (html.rtoc-row-js). Guides have no row and keep the bar at every width. */
.rtoc-a { margin: 0 max(26px, calc((100% - var(--page-width)) / 2)) 28px; background: var(--surface); border: 1px solid var(--line); }
.rtoc-a .rtoc-in { display: flex; align-items: center; gap: 12px; padding: 0 22px; }
.rtoc-a .rtoc-label { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rtoc-a .rtoc-scroll { position: relative; flex: 1 1 auto; min-width: 0; }
.rtoc-a ol { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 6px; }
.rtoc-a li { flex: none; }
.rtoc-a a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px solid var(--line);
            border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 700; white-space: nowrap; }
.rtoc-a a:hover { background: var(--purple-soft); border-color: var(--purple-soft); }
.rtoc-a a[aria-current] { background: var(--purple); border-color: var(--purple); color: var(--on-purple); }
.rtoc-a a:focus-visible { outline-offset: 2px; }
.rtoc-a .rtoc-arrow { display: none; }
html:not(.rtoc-row-js) .rtoc-a .rtoc-label { align-self: flex-start; margin-top: 22px; }   /* level with the first row of pills */

/* with the script: one row that scrolls sideways and sticks under the 64 px header */
.rtoc-row-js .rtoc-a { position: sticky; top: 64px; z-index: 15; }
.rtoc-a.is-stuck { box-shadow: var(--shadow-stuck); }
.rtoc-row-js .rtoc-a ol { flex-wrap: nowrap; overflow-x: auto; scroll-padding-inline: 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rtoc-row-js .rtoc-a ol::-webkit-scrollbar { display: none; }
/* edge fade + arrows (pointer helpers only: the pills are reached by Tab, so the arrows are not in the tab order) */
.rtoc-row-js .rtoc-a .rtoc-scroll::before, .rtoc-row-js .rtoc-a .rtoc-scroll::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0; transition: opacity 150ms; z-index: 1; }
.rtoc-row-js .rtoc-a .rtoc-scroll::before { left: 0; background: linear-gradient(90deg, var(--surface) 30%, var(--fade-end)); }
.rtoc-row-js .rtoc-a .rtoc-scroll::after { right: 0; background: linear-gradient(270deg, var(--surface) 30%, var(--fade-end)); }
.rtoc-row-js .rtoc-a .more-left::before, .rtoc-row-js .rtoc-a .more-right::after { opacity: 1; }
.rtoc-row-js .rtoc-a .rtoc-arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; box-sizing: border-box;
                                   border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.rtoc-row-js .rtoc-a .rtoc-arrow svg { width: 18px; height: 18px; }
.rtoc-row-js .rtoc-a .rtoc-arrow.prev { left: 0; }
.rtoc-row-js .rtoc-a .rtoc-arrow.next { right: 0; }
.rtoc-row-js .rtoc-a .more-left .rtoc-arrow.prev, .rtoc-row-js .rtoc-a .more-right .rtoc-arrow.next {
  display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 860px) {
  .rtoc-a ~ .rtoc-c { display: none; }
  /* a jump lands a heading (or any anchor of the review) below header + row: toc.js keeps the page's scroll-padding
     at header + 18 while its bar is hidden, this adds the row (its real height from toc-row.js; 60 before it runs) */
  html.rtoc-row-js .review-page main [id] { scroll-margin-top: calc(18px + var(--rtoc-row-h, 60px)); }
}
@media (max-width: 859px) {
  .rtoc-a { display: none; }
}
@media (forced-colors: active) {
  .rtoc-a a[aria-current] { border-color: Highlight; outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .rtoc-row-js .rtoc-a .rtoc-scroll::before, .rtoc-row-js .rtoc-a .rtoc-scroll::after { transition: none; }
}
@media print {
  .rtoc-row-js .rtoc-a { position: static; box-shadow: none; }
}