/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* reflowtex/companion – the looks of the companion package's parts.

   Three layers, each overriding the one before:

   1. Tokens, on :root: the few values everything else is made of. Set them
      on :root for the whole site, or on any element for what is inside it.
        --rtx-accent      the colour of emphasis (an accent bar)
        --rtx-surface     a box's fill
        --rtx-border      a box's edge
        --rtx-radius      corners
        --rtx-padding     a box's inner space
        --rtx-shadow      a card's lift
        --rtx-duration    how long a movement takes
        --rtx-easing      how it moves

   2. Variants, from the author's LaTeX: any stream takes variant=…, and the
      viewer puts it on the element as data-variant.
        \begin{webaccordion}[variant=card]     a filled, lifted box
                                  outline      a box with an edge only
                                  accent       a bar in --rtx-accent, tinted
      A variant reads --rtx-box-background, --rtx-box-border,
      --rtx-box-radius, --rtx-box-padding, --rtx-box-shadow (each defaulting
      to a token), so one kind can be restyled without touching the rest:
        .latex-stream[data-kind="accordion"] { --rtx-box-radius: 4px; }
      The author can do the same from LaTeX: [variant=card,
      --rtx-accent=#c2410c, class=faq].

   3. Each kind's own parts and states, below: classes rtx-…, and data-*
      attributes for state, for CSS of one's own. */

:root {
  --rtx-accent: #3160d8;
  --rtx-surface: color-mix(in srgb, currentColor 3.5%, transparent);
  --rtx-border: color-mix(in srgb, currentColor 15%, transparent);
  --rtx-radius: 12px;
  --rtx-padding: .9em 1.15em;
  --rtx-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -10px rgb(0 0 0 / .16);
  --rtx-duration: 280ms;
  --rtx-easing: cubic-bezier(.22, .8, .26, 1);
}

/* ── Variants (any stream) ─────────────────────────────────────────────── */
/* A variant's padding and border make the block framed: the text inside is
   set to the narrower measure, and TeX's interline glue to the text around
   gives way to the author's space (defineBlock's frame: 'auto'). */
.latex-stream:is([data-variant="card"], [data-variant="outline"], [data-variant="accent"]) {
  padding: var(--rtx-box-padding, var(--rtx-padding));
  border-radius: var(--rtx-box-radius, var(--rtx-radius));
  transition: background-color var(--rtx-duration) var(--rtx-easing),
              border-color var(--rtx-duration) var(--rtx-easing),
              box-shadow var(--rtx-duration) var(--rtx-easing);
}
.latex-stream[data-variant="card"] {
  background: var(--rtx-box-background, var(--rtx-surface));
  border: 1px solid var(--rtx-box-border, var(--rtx-border));
  box-shadow: var(--rtx-box-shadow, var(--rtx-shadow));
}
.latex-stream[data-variant="outline"] {
  border: 1px solid var(--rtx-box-border, var(--rtx-border));
}
.latex-stream[data-variant="accent"] {
  background: var(--rtx-box-background, color-mix(in srgb, var(--rtx-accent) 7%, transparent));
  /* The bar at the start of the line: left, or right in right-to-left text. */
  border-inline-start: 3px solid var(--rtx-accent);
  border-start-start-radius: 0; border-end-start-radius: 0;
}

/* ── Frames: notes, boxed theorems and proofs ───────────────────────────── */
/* webnote, \DeclareWebBox and the [boxed] option make streams of kinds note,
   theorem and proof; the viewer lays each out inside its element, and these
   are their looks. Each colour is a custom property a page (or a theme
   class) can set; the tints are mixed with transparent, so they sit on any
   page background.
   A frame grows outward: a top-level one reaches into the margin by its
   padding and bar (--latex-outset-start/-end), so its text keeps the
   column's full measure and lines up with the text around it. Inside
   another frame a box is set in by the enclosing frame's padding at the
   start of the line only (left, or right in right-to-left text): start
   edges step in per level while end edges all stand flush – each frame
   hands its end padding to what it holds (--latex-enclosing-end) and a frame
   inside takes it back as a negative margin; a stream with no padding (a
   pane) passes it on. The outsets do not inherit. A page's own framed kind
   can set the same variables. All sides are logical. */
:where(.latex-stream) { --latex-outset-start: initial; --latex-outset-end: initial; }
.latex-stream {
  margin-inline-start: calc(-1 * var(--latex-outset-start, 0px));
  margin-inline-end: calc(-1 * var(--latex-outset-end, 0px)); }
:is(.latex-stream[data-kind="theorem"], .latex-stream[data-kind="proof"],
    .latex-stream[data-kind="note"], .latex-stream[data-kind="hint"]) .latex-stream {
  margin-inline-start: 0; margin-inline-end: 0; }
:is(.latex-stream[data-kind="theorem"], .latex-stream[data-kind="proof"],
    .latex-stream[data-kind="note"]) > * {
  --latex-enclosing-end: var(--latex-pad-end, 0px); }
:is(.latex-stream[data-kind="theorem"], .latex-stream[data-kind="proof"],
    .latex-stream[data-kind="note"], .latex-stream[data-kind="hint"])
  :is(.latex-stream[data-kind="theorem"], .latex-stream[data-kind="proof"],
      .latex-stream[data-kind="note"]) {
  margin-inline-end: calc(-1 * var(--latex-enclosing-end, 0px)); }

.latex-stream[data-kind="note"] {
  --latex-outset-start: calc(1rem + 3px); --latex-outset-end: 1rem; --latex-pad-end: 1rem;
  padding-block: .6rem; padding-inline: 1rem var(--latex-pad-end);
  border-inline-start: 3px solid var(--latex-note-accent, #2f6fb3);
  background: color-mix(in srgb, var(--latex-note-accent, #2f6fb3) 8%, transparent); }

/* Boxed theorems and proofs. Vertical padding from the content's own edges:
   --latex-box-space (default one x-height of 10pt Latin Modern, 4.31pt)
   between the box and the top of a capital on the first line (cap height
   6.83pt), and the same between the last baseline and the box; the viewer
   sets --latex-first-ascent / --latex-last-depth on every stream's element.
   A box's colours are its own, not inherited from an enclosing box's (zero
   specificity: a page's rule or the box's own inline value wins). */
:where(.latex-stream) { --latex-box-accent: initial; --latex-box-background: initial; }
.latex-stream[data-kind="theorem"], .latex-stream[data-kind="proof"] {
  --latex-outset-start: calc(.85rem + 3px); --latex-outset-end: .7rem; --latex-pad-end: .7rem;
  --latex-box-space: calc(4.31 * var(--latex-pt, 1.333px));
  --latex-cap-height: calc(6.83 * var(--latex-pt, 1.333px));
  padding-block: max(2px, calc(var(--latex-box-space) + var(--latex-cap-height) - var(--latex-first-ascent, 0px)))
                 max(2px, calc(var(--latex-box-space) - var(--latex-last-depth, 0px)));
  padding-inline: .85rem var(--latex-pad-end);
  /* --latex-box-accent / --latex-box-background: set per box (\DeclareWebBox
     accent=, background=) or by a page; else the kind's defaults – a page
     may give theorems a background of their own (--latex-theorem-background),
     else a tint of their accent. */
  border-inline-start: 3px solid var(--latex-box-accent, var(--latex-theorem-accent, #2f6fb3));
  background: var(--latex-box-background, var(--latex-theorem-background,
    color-mix(in srgb, var(--latex-theorem-accent, #2f6fb3) 7%, transparent))); }
/* A box with an accent of its own and no background: a tint of that accent. */
.latex-stream[data-kind="theorem"][style*="--latex-box-accent"] {
  background: var(--latex-box-background, color-mix(in srgb, var(--latex-box-accent) 7%, transparent)); }
.latex-stream[data-kind="proof"] {
  border-inline-start-color: var(--latex-box-accent, var(--latex-proof-accent, #8a8f98));
  background: var(--latex-box-background,
    color-mix(in srgb, var(--latex-box-accent, var(--latex-proof-accent, #8a8f98)) 6%, transparent)); }

/* ── Hint ──────────────────────────────────────────────────────────────── */
/* webhint: blurred until the reader presses it (kinds/hint.tsx). The
   content is blurred, not the box, so a label sits sharp over it
   (--latex-hint-label, a string; --rtx-hint-blur). The blur eases with
   --rtx-hint-duration / -easing (default the global motion tokens).
   State: [data-revealed] on the element. */
.latex-stream[data-kind="hint"] { position: relative; cursor: pointer; border-radius: 4px; }
.latex-stream[data-kind="hint"] > * {
  filter: blur(var(--rtx-hint-blur, 5px));
  transition: filter var(--rtx-hint-duration, var(--rtx-duration)) var(--rtx-hint-easing, var(--rtx-easing)); }
.latex-stream[data-kind="hint"][data-revealed] > * { filter: none; }
.latex-stream[data-kind="hint"]::after {
  content: var(--latex-hint-label, "Click to reveal");
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 600 .8rem/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em;
  transition: opacity var(--rtx-hint-duration, var(--rtx-duration)) var(--rtx-hint-easing, var(--rtx-easing)); }
.latex-stream[data-kind="hint"][data-revealed]::after { opacity: 0; }
.latex-stream[data-kind="hint"]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .latex-stream[data-kind="hint"] > *, .latex-stream[data-kind="hint"]::after { transition: none; } }
@media print {
  .latex-stream[data-kind="hint"] > * { filter: none; }
  .latex-stream[data-kind="hint"]::after { content: none; } }

/* ── <Typeset> ─────────────────────────────────────────────────────────── */
.rtx-typeset > .latex-block { margin: 0; }

/* ── Accordion ─────────────────────────────────────────────────────────── */
/* .rtx-accordion[data-pane=NAME]: the pane showing.
   .rtx-pane[data-state=open|closed|leaving][data-name=NAME]: each pane.
   Motion: --rtx-accordion-motion (slide · fade · none), -duration, -easing;
   or the author's motion=…. */
.rtx-accordion { position: relative; }
/* While the height eases, what is below the accordion's edge is cut off – but
   only below: a frame inside (a boxed proof) reaches out into the margin
   sideways, and must not vanish until the movement ends. */
.rtx-accordion[data-animating] { overflow-x: visible; overflow-y: clip; overflow-clip-margin: 4px; }
/* A closed pane keeps its width (its text stays laid out, ready) but takes
   no height and cannot be reached. */
.rtx-pane[data-state="closed"] { height: 0; overflow: hidden; visibility: hidden; }
/* The pane going, over the one coming, while they cross-fade. */
.rtx-pane[data-state="leaving"] { position: absolute; inset: 0 0 auto 0; pointer-events: none; }

@media print {
  /* The pane a PDF shows (print=…), whatever is open on screen. */
  .rtx-pane { display: none !important; }
  .rtx-pane[data-print] { display: block !important; position: static !important; height: auto !important;
    overflow: visible !important; visibility: visible !important; opacity: 1 !important; transform: none !important; }
  .latex-stream[data-variant] { box-shadow: none !important; }
}

/* ── Lean beside a proof ───────────────────────────────────────────────── */
/* .rtx-lean[data-proof][data-lean]: the parts showing.
   .rtx-lean-part[data-part=tex|code][data-state=open|closed].
   Motion: --rtx-lean-motion (slide · fade · none), -duration, -easing.
   Colours: --latex-lean-accent (the code's bar), --code-kw/-com/-str/-num. */
:is(.latex-stream[data-kind="leanproof"], .latex-stream[data-kind="leantheorem"]) { container-type: inline-size; }
.rtx-lean-body[data-animating] { overflow-x: visible; overflow-y: clip; overflow-clip-margin: 4px; }
.rtx-lean-part[data-state="closed"] { display: none; }
.rtx-lean-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2rem; align-items: start; }
.rtx-lean:is([data-proof], [data-lean]) .rtx-lean-pair { padding-top: .6rem; }
.rtx-lean:is([data-proof], [data-lean]) > .rtx-lean-statement + .rtx-lean-body .rtx-lean-pair { padding-top: 1rem; }
/* Side by side, the proof and the code are one height: the row stretches
   both, and the proof's own box with them. */
@container (min-width: 44rem) {
  .rtx-lean-pair[data-both] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3.2rem; align-items: stretch; }
  .rtx-lean-pair[data-both] > [data-part="tex"],
  .rtx-lean-pair[data-both] > [data-part="tex"] > .rtx-typeset,
  .rtx-lean-pair[data-both] > [data-part="tex"] > .rtx-typeset > .latex-part,
  .rtx-lean-pair[data-both] > [data-part="tex"] > .rtx-typeset > .latex-part > div { display: flex; flex-direction: column; flex: 1 0 auto; }
  .rtx-lean-pair[data-both] > [data-part="tex"] > .rtx-typeset > .latex-part > div > .latex-stream { flex: 1 0 auto; }
}

/* The switches. */
.rtx-lean-switches { display: flex; gap: .3rem; }
.rtx-lean-switches button {
  font: 500 .72rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em; color: inherit;
  padding: .34rem .7rem; border-radius: 0; cursor: pointer; opacity: .75;
  background: none; border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  transition: background-color .15s, opacity .15s, color .15s; }
.rtx-lean-switches button:hover { opacity: 1; }
.rtx-lean-switches button[aria-pressed="true"] {
  opacity: 1; border-color: transparent; background: color-mix(in srgb, currentColor 13%, transparent); }
.rtx-lean-switches button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Hanging from a boxed theorem (leantheorem): flush with the frame's
   bottom, from where its text starts, in the box's own colours. Only the
   label is dimmed, never the fill. */
.rtx-lean-switches.rtx-lean-hang {
  margin: 0; gap: 2px;
  --lt-accent: var(--latex-box-accent, var(--latex-theorem-accent, #2f6fb3));
  --lt-bg: var(--latex-box-background, var(--latex-theorem-background,
    color-mix(in srgb, var(--lt-accent) 7%, transparent))); }
.rtx-lean-switches.rtx-lean-hang[style*="--latex-box-accent"] {
  --lt-bg: var(--latex-box-background, color-mix(in srgb, var(--lt-accent) 7%, transparent)); }
.rtx-lean-switches.rtx-lean-hang button,
.rtx-lean-switches.rtx-lean-hang button:hover {
  border: 0; opacity: 1; color: color-mix(in srgb, currentColor 72%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--lt-accent) 7%, transparent) 0 0), var(--lt-bg); }
.rtx-lean-switches.rtx-lean-hang button:hover { color: inherit; }
.rtx-lean-switches.rtx-lean-hang button[aria-pressed="true"] {
  color: inherit; background: linear-gradient(color-mix(in srgb, var(--lt-accent) 20%, transparent) 0 0), var(--lt-bg); }
.rtx-lean-statement > .rtx-lean-switches:not(.rtx-lean-hang) { margin-top: .4rem; }

/* The code, in a frame like a proof's, in the Lean colour; like the
   viewer's frames it reaches into the margin by its padding and bar. */
.rtx-lean-code {
  margin-inline: calc(-.85rem - 3px) -.7rem;
  padding-block: .6rem .7rem; padding-inline: .85rem .7rem;
  border-inline-start: 3px solid var(--latex-lean-accent, #2e8b7a);
  background: color-mix(in srgb, var(--latex-lean-accent, #2e8b7a) 7%, transparent); }
.rtx-lean-head { padding: 0 0 .35rem; opacity: .65; font: .72rem ui-monospace, "SF Mono", Menlo, monospace; }
.rtx-lean-head a { color: inherit; }
.rtx-lean-code pre {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow-x: auto;
  font: .8rem/1.55 ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", monospace; white-space: pre; }
.rtx-lean-code pre code { font: inherit; }
.lean-kw  { color: var(--code-kw, #1f5fa8); }
.lean-com { color: var(--code-com, #7b7f86); font-style: italic; }
.lean-str { color: var(--code-str, #2a7a3b); }
.lean-num { color: var(--code-num, #a0522d); }

@media print {
  .rtx-lean-switches { display: none; }
  .rtx-lean-part { display: block !important; opacity: 1 !important; transform: none !important; }
  .rtx-lean .rtx-lean-pair { padding-top: .6rem; grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Reading options (reading.tsx) ─────────────────────────────────────── */
/* The reader's text size, colour theme and column width: <ReadingOptions>
   (rows), <ReadingButton> (a round "Aa" button in the corner, opening them
   in a panel). Colours: --rtx-glass (the panel's and button's fill, frosted),
   --rtx-accent (the choice), --rtx-surface-solid (a segmented control's
   chosen segment). The corner keeps clear of a docked inspector
   (--rtx-dock-right, -bottom, -left). Swatches: .rtx-swatch per [data-t]. */
.rtx-reading, .rtx-reading-corner {
  --rtx-hair: color-mix(in srgb, currentColor 16%, transparent);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
.rtx-reading-corner {
  position: fixed; z-index: 1000;
  right: calc(max(1rem, env(safe-area-inset-right)) + var(--rtx-dock-right, 0px));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--rtx-dock-bottom, 0px)); }
.rtx-reading-button, .rtx-panel {
  background: var(--rtx-glass, var(--latex-popover-background, Canvas));
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: .5px solid var(--rtx-hair, color-mix(in srgb, currentColor 16%, transparent)); color: inherit; }
.rtx-reading-button {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .08);
  transition: transform .15s ease, box-shadow .15s ease; }
.rtx-reading-button:hover { box-shadow: 0 8px 26px rgb(0 0 0 / .16), 0 1px 3px rgb(0 0 0 / .1); }
.rtx-reading-button:active, .rtx-reading-button[aria-expanded="true"] { transform: scale(.94); }
/* One size for both letters: a smaller capital would come out no taller
   than the lowercase a. */
.rtx-aa { font: 18px/1 ui-serif, "New York", Georgia, serif; letter-spacing: .01em; }
.rtx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rtx-panel { padding: 6px; border-radius: 20px; box-sizing: border-box; }
.rtx-reading-panel {
  position: absolute; right: 0; bottom: 56px; width: 272px;
  box-shadow: 0 18px 50px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08);
  transform-origin: bottom right; animation: rtx-pop .22s cubic-bezier(.2, .9, .25, 1.05); }
@keyframes rtx-pop { from { opacity: 0; transform: translateY(6px) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .rtx-reading-panel { animation: none; } .rtx-reading-button { transition: none; } }
.rtx-reading-row { padding: 10px 8px; }
.rtx-reading-row + .rtx-reading-row { border-top: .5px solid var(--rtx-hair); }
.rtx-reading-row button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.rtx-reading-row button:focus-visible, .rtx-reading-button:focus-visible { outline: 2px solid var(--rtx-accent); outline-offset: 2px; }
.rtx-reading-caption { font-size: 11px; opacity: .6; margin: 0 0 8px; }
/* The inspector entry: a plain row, its shortcut on the right. */
.rtx-reading-inspect {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px !important; padding: 6px 6px !important; border-radius: 10px; text-align: left; }
.rtx-reading-inspect:hover { background: color-mix(in srgb, currentColor 8%, transparent) !important; }
.rtx-reading-inspect kbd { font: 11px ui-monospace, Menlo, monospace; opacity: .6; }
/* The inspector, and beside it the reader's text shown (a debugging aid,
   for a while): the button at three quarters, the switch the rest. */
.rtx-reading-tools { display: flex; gap: 6px; align-items: stretch; }
.rtx-reading-tools .rtx-reading-inspect { width: 75%; flex: 0 0 75%; min-width: 0; }
.rtx-reading-tools .rtx-reading-inspect span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtx-reading-debug { flex: 1; font-size: 11px !important; line-height: 1.15; padding: 4px 2px !important; border-radius: 10px;
  opacity: .8; }
.rtx-reading-debug:hover { background: color-mix(in srgb, currentColor 8%, transparent) !important; }
.rtx-reading-debug[aria-checked="true"] { opacity: 1; font-weight: 600; color: #d0021b;
  background: rgb(208 2 27 / .1) !important; }
/* Text size: small A · percentage · large A. */
.rtx-reading-size { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; }
.rtx-reading-size button { height: 36px; border-radius: 10px; }
.rtx-reading-size button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.rtx-reading-size [data-z="out"] { font: 500 14px ui-serif, "New York", Georgia, serif; }
.rtx-reading-size [data-z="in"]  { font: 500 21px ui-serif, "New York", Georgia, serif; }
.rtx-reading-size [data-z="reset"] { font-size: 13px; font-variant-numeric: tabular-nums; opacity: .75; }
/* Theme: swatches with names. */
.rtx-reading-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rtx-reading-themes button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; padding: 2px 0; }
.rtx-reading-themes button span { opacity: .7; }
.rtx-reading-themes button[aria-checked="true"] span { opacity: 1; font-weight: 600; }
.rtx-swatch {
  width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .22);
  font-family: ui-serif, "New York", Georgia, serif; font-size: 14px;
  display: grid; place-items: center; opacity: 1 !important; font-weight: 400 !important; }
[data-t="light"]    .rtx-swatch { background: #fafaf9; color: #333; }
[data-t="dark"]     .rtx-swatch { background: #1c1917; color: #e7e5e4; }
[data-t="sepia"]    .rtx-swatch { background: #f4ecd8; color: #453a26; }
[data-t="contrast"] .rtx-swatch { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #000; }
.rtx-reading-themes button[aria-checked="true"] .rtx-swatch { outline: 2.5px solid var(--rtx-accent); outline-offset: 2.5px; }
/* Width and selection: a segmented control, as many columns as choices. */
.rtx-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; gap: 2px;
  border-radius: 9px; background: color-mix(in srgb, currentColor 9%, transparent); }
.rtx-seg button { font-size: 12px; padding: 6px 0; border-radius: 7px; opacity: .8; }
.rtx-seg button[aria-checked="true"] {
  opacity: 1; font-weight: 600; background: var(--rtx-surface-solid, Canvas);
  box-shadow: 0 1px 3px rgb(0 0 0 / .14), 0 0 0 .5px rgb(0 0 0 / .04); }
@media (max-width: 30rem) {
  .rtx-reading-panel { position: fixed; width: auto;
    left: calc(12px + var(--rtx-dock-left, 0px)); right: calc(12px + var(--rtx-dock-right, 0px));
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 56px + var(--rtx-dock-bottom, 0px)); } }
/* <ReadingOptions> set into a page by itself (data-rtx="reading-options"):
   the panel's look, open for good. It keeps its size when the reader zooms,
   so the buttons stay under the pointer. */
[data-rtx="reading-options"] > .rtx-reading {
  padding: 6px; border-radius: 20px; box-sizing: border-box;
  background: var(--rtx-glass, var(--latex-popover-background, Canvas));
  border: .5px solid var(--rtx-hair);
  width: 100%; max-width: 272px; zoom: calc(1 / var(--rtx-zoom, 1)); line-height: normal;
  box-shadow: 0 10px 30px rgb(0 0 0 / .08), 0 1px 3px rgb(0 0 0 / .06); }
@media print { .rtx-reading-corner, [data-rtx="reading-options"] { display: none; } }

/* ── Controls (controls.tsx) ───────────────────────────────────────────── */

/* A pill in a line of text (InlineButton). Restyle it with these, on the
   button or anything around it, or with a class of your own. */
.rtx-button {
  --rtx-button-face: var(--rtx-surface-solid, var(--latex-page-bg, Canvas));
  --rtx-button-face-on: color-mix(in srgb, currentColor 7%, var(--rtx-button-face));
  --rtx-button-edge: color-mix(in srgb, currentColor 16%, transparent);
  --rtx-button-radius: 999px;
  --rtx-button-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 3px 10px rgb(0 0 0 / .08);
  position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0;
  border: .5px solid var(--rtx-button-edge); border-radius: var(--rtx-button-radius);
  background: var(--rtx-button-face); color: inherit; cursor: pointer; box-shadow: var(--rtx-button-shadow);
}
.rtx-button:hover, .rtx-button[aria-expanded="true"] { background: var(--rtx-button-face-on); }
.rtx-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.rtx-button-content { position: absolute; top: 0; white-space: nowrap; pointer-events: none; }

/* A panel below an element. */
.rtx-popover {
  position: fixed; z-index: 2147482000; box-sizing: border-box; width: min(20rem, calc(100vw - 16px));
  padding: 1rem 1.2rem 1.1rem; border-radius: 16px;
  border: .5px solid color-mix(in srgb, currentColor 16%, transparent);
  background: var(--latex-popover-background, var(--latex-page-bg, Canvas)); color: inherit;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 18px 50px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08);
}

@media print { .rtx-popover { display: none; } }

/* ── The reader's highlighter (highlighter.tsx) ────────────────────────── */

/* A highlight is a live mark: a band behind each of its lines, carrying
   `rtx-highlight rtx-highlight-NAME` in data-mark. It looks like the Marks
   page's example: filled with --rtx-highlight-NAME, and a stroke of the
   same colour pads it, with round corners. Each colour has a darker one
   for a dark theme. A colour of one's own is a name and a custom property:
   data-colours="yellow mint" with
     :root { --rtx-highlight-mint: #b2f5ea; }
     [data-mark~="rtx-highlight-mint"], .rtx-highlight-mint { --rtx-highlight: var(--rtx-highlight-mint); } */
:root {
  --rtx-highlight-yellow: #fff176;
  --rtx-highlight-green: #c8f0c0;
  --rtx-highlight-pink: #f9c6dc;
  --rtx-highlight-blue: #c6dcfb;
  --rtx-highlight-pad: 3px;
}
html.dark, [data-latex-theme="dark"] {
  --rtx-highlight-yellow: #5c5000;
  --rtx-highlight-green: #1f4a26;
  --rtx-highlight-pink: #5a2340;
  --rtx-highlight-blue: #1f3a60;
}
[data-mark~="rtx-highlight-yellow"], .rtx-highlighter-colour.rtx-highlight-yellow { --rtx-highlight: var(--rtx-highlight-yellow); }
[data-mark~="rtx-highlight-green"],  .rtx-highlighter-colour.rtx-highlight-green  { --rtx-highlight: var(--rtx-highlight-green); }
[data-mark~="rtx-highlight-pink"],   .rtx-highlighter-colour.rtx-highlight-pink   { --rtx-highlight: var(--rtx-highlight-pink); }
[data-mark~="rtx-highlight-blue"],   .rtx-highlighter-colour.rtx-highlight-blue   { --rtx-highlight: var(--rtx-highlight-blue); }
.latex-block rect.latex-mark[data-mark~="rtx-highlight"] {
  --rtx-highlight-fill: var(--rtx-highlight, var(--rtx-highlight-yellow));
  fill: var(--rtx-highlight-fill); stroke: var(--rtx-highlight-fill);
  stroke-width: var(--rtx-highlight-pad); stroke-linejoin: round;
}

/* The bar over the selection. */
.rtx-highlighter {
  position: fixed; z-index: 2147482000; display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: 999px;
  border: .5px solid color-mix(in srgb, currentColor 16%, transparent);
  background: var(--latex-popover-background, var(--latex-page-bg, Canvas)); color: inherit;
  box-shadow: 0 8px 24px rgb(0 0 0 / .16), 0 1px 3px rgb(0 0 0 / .08);
  -webkit-user-select: none; user-select: none;
}
.rtx-highlighter button {
  display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer;
}
.rtx-highlighter-colour {
  background: var(--rtx-highlight) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}
.rtx-highlighter-colour[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
.rtx-highlighter-erase:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.rtx-highlighter button:focus-visible { outline: 2px solid var(--rtx-accent); outline-offset: 2px; }

@media print { .rtx-highlighter { display: none; } }