/* Reading components for text that is not said every day or not said by everyone.
   Markup comes from reading-components.js and is linked from every page.

   Namespace: every class starts with rc-.
     rc-box                 a foldable box: --occasion, --congregation; modifiers --mourner,
                            --situation, --custom, --block, --line, --section
     rc-summary, rc-label, rc-state, rc-body     parts of a box, option or switch
     rc-instruction         the existing margin-note style, used inside the components
     rc-choice              a choose-one group: --chosen, --unchosen, --flow, --many
     rc-option, rc-switch   its foldable rows
     rc-line, rc-speaker    one speaker line and its small label before it
     rc-phrase, rc-phrase-key     an inline phrase that changes on an occasion, and its key
     rc-omitted             ordinary text with a note that it is skipped on some days
     rc-ref, rc-sr          reference small print, and screen-reader-only text
     rc-qi                  a quiet instruction or note: --instruction, --note, --aside, --long
     rc-mixed, rc-note-inline     a source paragraph with notes in place, and a note inside a sentence
     rc-attribution         the one line at the end of a page naming the editions

   Style of the panels: data-rc-style="outlined" | "lines" | "shaded" on <html> (the reader's
   "Panel style" setting). Without it the page is outlined, the default.

   Tokens. Nothing here introduces a color of its own. Each --rc-* token is mixed from the palette
   tokens the app already sets for every palette and theme (--paper, --sheet, --ink, --muted,
   --accent), so the three palettes in light and dark are covered by construction.
   tests/reading-components.test.mjs evaluates these exact expressions against appearance.js and
   fails if any text pairing drops below 4.5:1. Text uses only --ink and --muted; --accent is used
   for rules, marks and the focus ring. */

:root {
  --rc-rule: color-mix(in srgb, var(--muted) 45%, var(--paper));
  --rc-rule-strong: color-mix(in srgb, var(--accent) 70%, var(--paper));
  --rc-tint: color-mix(in srgb, var(--accent) 5%, var(--paper));
  --rc-tint-inner: color-mix(in srgb, var(--accent) 4%, var(--sheet));
  --rc-mark: color-mix(in srgb, var(--accent) 14%, var(--paper));
  --rc-panel: color-mix(in srgb, var(--accent) 4%, var(--paper));
  --rc-cue: color-mix(in srgb, var(--accent) 82%, var(--paper));
  --rc-pad: 14px;
  --rc-rule-faint: color-mix(in srgb, var(--muted) 25%, var(--paper));
  --rc-radius: 3px;
}

/* Sizes and spaces are relative to the reader's size, which a page (or the gallery's specimens) may
   set on any element, so they are declared wherever a component can sit and not only on :root. */
:root,
.prayer-text,
[data-annotations],
[data-rc-style] {
  /* The type scale. Four tiers named after what a printed siddur does with size (see
     docs/design/print-siddur-typography-notes.md), all relative to the reader's size. Pixels at
     the smallest, default and largest reading size (22, 27, 38):
       display      1.20 x   26.4   32.4   45.6   the opening words of a blessing, a call
       body         1.00 x   22     27     38     the prayer everyone says
       secondary    0.82 x   18.0   22.1   31.2   text said quietly or alongside; short insertions
       instruction  0.48 x   12*    13.0   18.2   instructions and notes (*never below 12 px)
     The label step is the instruction step plus half a pixel; the provenance step is one pixel
     below it, never below 12 px. */
  --rc-size-display: calc(var(--reading-size, 27px) * 1.2);
  --rc-size-body: var(--reading-size, 27px);
  --rc-size-secondary: calc(var(--reading-size, 27px) * 0.82);
  --rc-size-instruction: max(12px, calc(var(--reading-size, 27px) * 0.48));
  --rc-size-label: calc(var(--rc-size-instruction) + 0.5px);
  --rc-size-provenance: max(12px, calc(var(--rc-size-instruction) - 1px));
  /* Space, in the same proportion. Pixels at reading size 22, 27, 38:
       panel   0.50 x  11.0  13.5  19.0   inside a panel, above and below its text
       rule    0.60 x  13.2  16.2  22.8   between the daily text and a rule
       label   0.20 x   4.4   5.4   7.6   between a tiny label and its text
       column  0.60 x  13.2  16.2  22.8   on each side of a vertical hairline */
  --rc-space-panel: calc(var(--reading-size, 27px) * 0.5);
  --rc-space-rule: calc(var(--reading-size, 27px) * 0.6);
  --rc-space-label: calc(var(--reading-size, 27px) * 0.2);
  --rc-space-column: calc(var(--reading-size, 27px) * 0.6);
}

/* Utilities */
.rc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rc-ref {
  display: block;
  margin: 6px 0 0;
  font: 400 11px/1.4 var(--ui);
  color: var(--muted);
  text-align: right;
  overflow-wrap: anywhere;
}

/* The instruction: same face, size and color as the book's source instructions. */
.rc-instruction {
  margin: 4px 0 14px;
  font: 400 15px/1.6 var(--ui);
  color: var(--muted);
  text-align: right;
  unicode-bidi: isolate;
}
.rc-body > .rc-instruction:first-child {
  margin-top: 2px;
}

/* ---------- Panels (occasion, congregation) ----------
   One drawing per style, chosen by data-rc-style on <html> (the reader's "Panel style" setting):
     outlined  (default; also what the page has until a style is chosen) a 1px outline all round
     lines     a hairline above and below, no sides
     shaded    a soft tint of the page background, no outline
   Spacing, labels and behavior are the same in all three; only the drawing changes. The whole label
   row is the control (a native <summary>), with a small chevron at its end that turns when open. */
.rc-box {
  margin: var(--rc-space-rule) 0;
  border: 1px solid var(--rc-rule);
  border-radius: var(--rc-radius);
  background: none;
  color: var(--ink);
}
.rc-box .rc-box {
  margin: var(--rc-space-panel) 0 0;
  border-color: var(--rc-rule-faint);
}
.rc-box > .rc-summary,
.rc-option > .rc-summary,
.rc-switch > .rc-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 2px var(--rc-space-panel);
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font: 600 var(--rc-size-label) / 1.4 var(--ui);
  text-align: right;
  -webkit-tap-highlight-color: transparent;
}
.rc-summary::-webkit-details-marker {
  display: none;
}
.rc-summary .rc-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
  color: var(--ink);
}
.rc-summary:hover .rc-label {
  text-decoration: underline;
  text-decoration-color: var(--rc-cue);
  text-underline-offset: 3px;
}
.rc-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--rc-radius);
}
/* "Show" and "Hide" are for a screen reader; the eye gets the chevron. The book's own plus and
   minus mark (styles.css) is replaced here by a chevron that sits in the row, not at the page edge. */
.rc-state-hide,
details[open] > .rc-summary .rc-state-show {
  display: none;
}
details[open] > .rc-summary .rc-state-hide {
  display: inline;
}
details.rc-box > summary.rc-summary,
details.rc-option > summary.rc-summary,
details.rc-switch > summary.rc-summary {
  padding-right: var(--rc-space-panel) !important;
}
details.rc-box > summary.rc-summary::after,
details.rc-option > summary.rc-summary::after,
details.rc-switch > summary.rc-summary::after {
  content: '';
  position: static;
  flex: none;
  order: -1;
  width: 0.5em;
  height: 0.5em;
  margin-inline: 0.15em;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  background: none;
  color: var(--muted);
  transform: translateY(-0.15em) rotate(45deg);
}
details[open].rc-box > summary.rc-summary::after,
details[open].rc-option > summary.rc-summary::after,
details[open].rc-switch > summary.rc-summary::after {
  background: none;
  transform: translateY(0.1em) rotate(-135deg);
}
.rc-body {
  padding: 0 var(--rc-space-panel) var(--rc-space-panel);
}
.rc-body > :first-child {
  margin-top: 0;
}
.rc-body > :last-child {
  margin-bottom: 0;
}
.rc-body > .rc-ref:last-child {
  margin-top: 6px;
}
/* The passage inside a panel is set in the secondary tier; the step is taken once, so nested panels
   do not shrink it further. A speaker line keeps the body size. */
.rc-box--occasion > .rc-body,
.rc-box--congregation > .rc-body {
  font-size: var(--rc-size-secondary);
}
.rc-box .rc-box > .rc-body {
  font-size: 1em;
}
.rc-body p {
  margin-block: 0 0.55em;
}
.rc-line-text {
  font-size: var(--rc-size-body);
}
.rc-box--line {
  margin: calc(var(--rc-space-rule) * 0.6) 0;
}
.rc-box--line > .rc-body {
  padding-bottom: calc(var(--rc-space-panel) * 0.6);
}

/* Lines: a hairline above and below, no sides, no fill. */
[data-rc-style='lines'] .rc-box,
[data-rc-style='lines'] .rc-box .rc-box {
  border: 0;
  border-block: 1px solid var(--rc-rule);
  border-radius: 0;
  background: none;
}
[data-rc-style='lines'] .rc-box .rc-box {
  border-block-color: var(--rc-rule-faint);
}
[data-rc-style='lines'] .rc-box--congregation {
  border-inline-start: 0;
}

/* Shaded: a soft tint, no outline. Nested panels alternate tint instead of stacking it. */
[data-rc-style='shaded'] .rc-box,
[data-rc-style='shaded'] .rc-box .rc-box .rc-box {
  border-color: transparent;
  background: var(--rc-tint);
}
[data-rc-style='shaded'] .rc-box .rc-box {
  border-color: transparent;
  background: var(--rc-tint-inner);
}
[data-rc-style='shaded'] .rc-box--congregation {
  border-inline-start: 3px solid var(--rc-rule-strong);
}

/* ---------- Nesting on narrow screens ----------
   Up to three levels deep. Below 576px an inner box gives up its sides: it keeps only a rule on the
   side the Hebrew starts from and no end padding, so the text column loses about 10px per level
   instead of about 30. The outer box keeps its full frame. */
@media (max-width: 575px) {
  :root {
    --rc-space-panel: max(7px, calc(var(--reading-size, 27px) * 0.2));
  }
  .rc-box .rc-box,
  [data-rc-style='lines'] .rc-box .rc-box,
  [data-rc-style='shaded'] .rc-box .rc-box {
    margin-inline: 0;
    border-width: 0;
    border-inline-start: 1px solid var(--rc-rule);
    border-radius: 0;
    background: transparent;
  }
  .rc-box .rc-box > .rc-summary,
  .rc-box .rc-box > .rc-body {
    padding-inline: 6px 0;
  }
  .rc-box .rc-box .rc-box > .rc-summary,
  .rc-box .rc-box .rc-box > .rc-body {
    padding-inline: 4px 0;
  }
}

/* ---------- Choose one ---------- */
.rc-choice {
  margin: 14px 0 22px;
  color: var(--ink);
}
.rc-choice-head {
  margin: 0 0 6px;
  font: 500 13px/1.4 var(--ui);
  color: var(--ink);
  text-align: right;
}
.rc-reason,
.rc-none {
  margin: 0 0 8px;
  font: 400 13px/1.5 var(--ui);
  color: var(--muted);
  text-align: right;
}
.rc-choice:has(> .rc-options > .rc-option[open]) > .rc-none {
  display: none;
}
.rc-choice--unchosen > .rc-none {
  padding: 8px 10px;
  border: 1px dashed var(--rc-rule);
  border-radius: var(--rc-radius);
}
.rc-options {
  border-block: 1px solid var(--rc-rule);
}
.rc-option + .rc-option {
  border-top: 1px solid var(--rc-rule);
}
.rc-option > .rc-summary {
  padding-inline: 2px;
}
.rc-option > .rc-body {
  padding-inline: 2px;
  font-size: 1em;
}
/* The option being shown reads as the text: its label row is small print above it. */
.rc-option[open] > .rc-summary {
  min-height: 34px;
}
.rc-option[open] > .rc-summary .rc-label {
  color: var(--ink);
}
/* More than six wordings (the Omer): folded rows become a grid of chips, and the open one takes a
   full row, so 49 days do not make a 49-row list. */
.rc-choice--many .rc-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 6px;
  border: 0;
}
.rc-choice--many .rc-option,
.rc-choice--many .rc-option + .rc-option {
  border: 1px solid var(--rc-rule);
  border-radius: var(--rc-radius);
}
.rc-choice--many .rc-option[open] {
  grid-column: 1 / -1;
}
.rc-choice--many .rc-option:not([open]) > .rc-summary {
  padding: 4px 8px !important;
  justify-content: center;
}
.rc-choice--many .rc-option:not([open]) > .rc-summary::after,
.rc-choice--many .rc-option:not([open]) .rc-state {
  display: none;
}
.rc-choice--many .rc-option:not([open]) .rc-label {
  text-align: center;
  flex: 0 1 auto;
}
.rc-choice--many .rc-option[open] > .rc-body {
  padding-inline: 10px;
}
.rc-choice-close {
  margin: 10px 0 0;
}

/* Mid-sentence group. The chosen wording is a bare paragraph at the daily size and spacing, so the
   line before and the line after read straight through it. The only thing between them is one
   small note: what is shown, why, and a switch to the other wording. */
.rc-choice--flow {
  margin: 0 0 0.55em;
}
.rc-flow-text > p {
  margin-block: 0 0.1em;
}
.rc-flow-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  margin: 0 0 0.5em;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--rc-rule);
}
.rc-flow-info {
  flex: 1 1 14rem;
  margin: 0;
  font: 400 12px/1.5 var(--ui);
  color: var(--muted);
  text-align: right;
}
.rc-flow-info .rc-label {
  color: var(--ink);
  font-weight: 500;
}
.rc-flow-info .rc-showing,
.rc-flow-info .rc-reason,
.rc-flow-info .rc-none {
  display: inline;
  margin: 0 0 0 0.5em;
  font: inherit;
  padding: 0;
  border: 0;
}
.rc-switch {
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.rc-switch > .rc-summary {
  min-height: 36px;
  padding-inline-start: 0;
}
.rc-switch[open] {
  flex-basis: 100%;
}
.rc-switch > .rc-body {
  padding-inline: 0;
  margin-bottom: 8px;
}
.rc-alt + .rc-alt {
  margin-top: 12px;
}
.rc-alt-label {
  margin: 0 0 4px;
  font: 500 12px/1.4 var(--ui);
  color: var(--muted);
  text-align: right;
}
.rc-choice--flow.rc-choice--unchosen > .rc-choice-head {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rc-choice--flow > .rc-option > .rc-summary {
  padding-inline: 0;
}

/* ---------- Speaker lines ---------- */
.rc-line {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  margin: 0 0 0.55em;
}
.rc-speaker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.rc-speaker-he {
  font: 600 14px/1.3 var(--ui);
  color: var(--ink);
}
.rc-speaker-en {
  font: 400 12px/1.3 var(--ui);
  color: var(--muted);
  text-align: right;
}
.rc-line-text {
  min-width: 0;
}
/* Lines the congregation says (alone or with the leader) carry a hairline on the starting edge;
   the leader's lines do not. The Hebrew label and the English beside it say the same thing. */
.rc-line--congregation,
.rc-line--both {
  border-inline-start: 2px solid var(--rc-rule);
  padding-inline-start: 10px;
}
@media (max-width: 575px) {
  .rc-line {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .rc-speaker {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .rc-line--congregation,
  .rc-line--both {
    padding-inline-start: 8px;
  }
}

/* ---------- Inline phrase ---------- */
.rc-phrase {
  border-bottom: 1px dotted var(--rc-rule-strong);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rc-phrase-key {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 2px 0 12px;
  font: 400 13px/1.5 var(--ui);
  color: var(--muted);
}
.rc-phrase-swatch {
  flex: none;
  width: 22px;
  height: 10px;
  background: var(--rc-mark);
  border-bottom: 1px dotted var(--rc-rule-strong);
  border-radius: 2px;
}
@media (forced-colors: active) {
  .rc-phrase,
  .rc-phrase-swatch {
    border-bottom: 1px dotted CanvasText;
  }
}

/* ---------- Omitted on some days ---------- */
.rc-omitted {
  margin: 14px 0 18px;
}
.rc-omitted-note {
  margin: 0 0 6px;
  font: 400 13px/1.5 var(--ui);
  color: var(--muted);
  text-align: right;
}
.rc-omitted-text {
  border-inline-start: 2px dotted var(--rc-rule);
  padding-inline-start: 10px;
}
.rc-omitted-text > :last-child {
  margin-bottom: 0;
}

/* ---------- Quiet annotations ----------
   An instruction is small muted text in the reading flow. The text is a <summary>: activating it
   (tap, click, Enter, Space) opens a panel directly beneath with the original Hebrew and the
   edition. Hierarchy, from first to last (the sizes are the type scale in :root):
     1 prayer text        body tier (the reading size, 22 to 38 px), 400, --ink
     2 box and speaker labels   instruction tier + 0.5 px, 600, --ink
     3 instructions and notes   instruction tier (13 px at the default size), 400, --muted
     4 provenance panel   instruction tier - 1 px, 400, --muted (the Hebrew original is 0.65 x the
                          reading size, --ink)
   Switches, as attributes on any ancestor: data-rc-cue="underline" (default) or "dot" for how the
   text shows it can be opened, and data-annotations="full" to show the reference inline. */
details.rc-qi {
  margin: 2px 0 10px;
  font: 400 var(--rc-size-instruction) / 1.5 var(--ui);
  color: var(--muted);
  text-align: right;
}
details.rc-qi.rc-qi--note {
  margin: 0 0 6px;
}
details.rc-qi.rc-qi--aside {
  margin: 2px 0 12px;
}
details.rc-qi > summary.rc-qi-summary {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  min-height: 24px;
  margin: 0;
  padding: 3px 4px !important;
  list-style: none !important;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
details.rc-qi > summary.rc-qi-summary::-webkit-details-marker {
  display: none;
}
details.rc-qi > summary.rc-qi-summary::marker {
  content: '';
}
/* The book gives every summary a plus and minus mark; a quiet instruction has none. */
details.rc-qi > summary.rc-qi-summary::after {
  content: none;
  display: none;
}
.rc-qi-text {
  min-width: 0;
  text-align: right;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}
.rc-qi-more {
  flex: none;
  font-size: var(--rc-size-provenance);
  color: var(--muted);
  text-decoration: underline dotted;
  text-decoration-color: var(--rc-cue);
  text-underline-offset: 3px;
}
/* A long explanatory note shows its first three lines and a "more" until it is opened. */
.rc-qi--long:not([open]) > .rc-qi-summary > .rc-qi-text {
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.rc-qi--long:not([open]) > .rc-qi-summary {
  align-items: flex-end;
}
.rc-qi--long[open] > .rc-qi-summary > .rc-qi-more {
  display: none;
}

/* How the text shows it can be opened. Level 1, the default: a faint dotted underline. */
.rc-qi-text {
  text-decoration: underline dotted;
  text-decoration-color: var(--rc-cue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Level 2: no underline, a small dot after the text. */
[data-rc-cue='dot'] .rc-qi-text {
  text-decoration: none;
}
[data-rc-cue='dot'] .rc-qi-summary > .rc-qi-text::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-start: 6px;
  border-radius: 50%;
  background: var(--rc-cue);
  vertical-align: 0.15em;
}
[data-rc-cue='dot'] .rc-qi--long:not([open]) .rc-qi-text::after {
  display: none;
}
details.rc-qi > summary.rc-qi-summary:hover {
  color: var(--ink);
}
details.rc-qi > summary.rc-qi-summary:hover .rc-qi-text {
  text-decoration-style: solid;
}
/* Opened: the panel below says so; a long instruction is not underlined from end to end. */
details.rc-qi[open] > summary.rc-qi-summary .rc-qi-text {
  text-decoration: none;
}
details.rc-qi > summary.rc-qi-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rc-radius);
  background: var(--rc-panel);
  color: var(--ink);
}

/* The panel opens in place, below the text. Nothing above it moves. */
.rc-qi-panel {
  margin: 4px 0 6px;
  padding: 8px 12px 8px 10px;
  border-inline-end: 2px solid var(--rc-rule-strong);
  border-radius: var(--rc-radius) 0 0 var(--rc-radius);
  background: var(--rc-panel);
  text-align: left;
}
.rc-qi-panel > * {
  margin: 0 0 6px;
}
.rc-qi-panel > :last-child {
  margin-bottom: 0;
}
.rc-qi-original {
  font:
    400 calc(var(--reading-size, 27px) * 0.7) / 1.5 Frank,
    HebrewFallback,
    serif;
  color: var(--ink);
  text-align: right;
}
.rc-qi-source,
.rc-qi-translation {
  font: 400 var(--rc-size-provenance) / 1.5 var(--ui);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.rc-qi-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .rc-qi[open] > .rc-qi-panel {
    animation: rc-qi-in 120ms ease-out;
  }
}
@keyframes rc-qi-in {
  from {
    opacity: 0;
  }
}

/* A source paragraph with its notes in place. */
.rc-mixed {
  margin: 0 0 0.8em;
}
.prayer-text .rc-mixed > .source-mixed {
  margin-bottom: 0.15em;
}
.rc-note-inline {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-inline: 0.3em;
  font: 400 var(--rc-size-instruction) / 1.5 var(--ui);
  color: var(--muted);
  unicode-bidi: isolate;
}

/* Full detail: the reference shows inline after each instruction. CSS only; the words come from the
   summary's data-source attribute. */
[data-annotations='full'] details.rc-qi > summary.rc-qi-summary::after {
  content: '[' attr(data-source) ']';
  display: inline;
  flex: none;
  max-width: 100%;
  font-size: var(--rc-size-provenance);
  color: var(--muted);
  overflow-wrap: anywhere;
  text-align: right;
}
[data-annotations='full'] .rc-qi > .rc-qi-summary {
  flex-wrap: wrap;
}

/* Labels outrank instructions wherever annotations are quiet or full. */
[data-annotations] .rc-box > .rc-summary,
[data-annotations] .rc-option > .rc-summary,
[data-annotations] .rc-switch > .rc-summary {
  font: 600 var(--rc-size-label) / 1.4 var(--ui);
}
[data-annotations] .rc-box > .rc-summary .rc-label,
[data-annotations] .rc-option > .rc-summary .rc-label,
[data-annotations] .rc-switch > .rc-summary .rc-label {
  color: var(--ink);
}
[data-annotations] .rc-speaker-he {
  font: 600 calc(var(--rc-size-label) + 0.5px) / 1.3 var(--ui);
  color: var(--ink);
}
[data-annotations] .rc-speaker-en {
  font: 500 var(--rc-size-instruction) / 1.3 var(--ui);
  color: var(--ink);
}
[data-annotations] .rc-state {
  font-size: var(--rc-size-provenance);
}

/* The one attribution line at the end of a page. */
.rc-attribution {
  margin: 28px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rc-rule);
  font: 400 var(--rc-size-provenance) / 1.6 var(--ui);
  color: var(--muted);
  text-align: left;
}
.rc-attribution a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rc-attribution-more {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rc-attribution-more:focus-visible,
.rc-attribution a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rc-radius);
}

@media (forced-colors: active) {
  .rc-qi-text {
    text-decoration-color: CanvasText;
  }
  .rc-qi-panel {
    border: 1px solid CanvasText;
  }
  [data-rc-cue='dot'] .rc-qi-summary > .rc-qi-text::after {
    background: CanvasText;
  }
}
/* English text sits on the book's right edge, like the existing instructions. */
.prayer-text .rc-label,
.prayer-text .rc-speaker-en,
.prayer-text .rc-alt-label,
.prayer-text .rc-reason,
.prayer-text .rc-none,
.prayer-text .rc-choice-head,
.prayer-text .rc-omitted-note,
.prayer-text .rc-instruction {
  text-align: right;
}

/* ---------- Motion ----------
   Nothing animates: a box opens in place. Kept as a rule so a later transition cannot ignore the
   preference. */
@media (prefers-reduced-motion: reduce) {
  .rc-box,
  .rc-option,
  .rc-switch {
    transition: none;
    animation: none;
  }
}

@media print {
  .rc-state {
    display: none;
  }
}

/* ---------- Tiny labels, resume cues, responses ----------
   A printed siddur labels with a few small words, not with chrome. */
.rc-tag {
  flex: none;
  font:
    700 var(--rc-size-label) / 1.3 Frank,
    HebrewFallback,
    serif;
  color: var(--ink);
  white-space: nowrap;
}
.rc-tagged {
  display: flex;
  align-items: baseline;
  gap: var(--rc-space-label) calc(var(--rc-space-label) * 2);
  margin: 0 0 0.5em;
  font-size: var(--rc-size-secondary);
}
.rc-tagged-text {
  /* Sized by the row, not by its text: the typesetter re-lays the lines and must find the same width. */
  flex: 1 1 0%;
  min-width: 0;
}
.rc-tagged-text > p {
  margin-block: 0;
}
/* The "continue at" cue at the end of a passage: the first words of the next daily paragraph. */
.rc-resume {
  margin: var(--rc-space-label) 0 0;
  font: 400 var(--rc-size-provenance) / 1.4 var(--ui);
  color: var(--muted);
  text-align: left;
}
.rc-resume [lang='he'] {
  font:
    400 var(--rc-size-label) / 1.3 Frank,
    HebrewFallback,
    serif;
  color: var(--ink);
}
/* A response is its own centered line at a heavier weight than the text around it. */
.prayer-text p.rc-response,
.rc-response {
  margin-block: 0.4em;
  text-align: center;
  text-align-last: center;
  font-weight: 700;
}

/* ---------- Both seasons on one line ----------
   Neither is hidden: each wording follows its tiny label in the secondary tier. When the season is
   known the current one steps up to the body tier and the other is dimmed, not removed. */
.rc-season {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--rc-space-column) * 1.5);
  margin: 0 0 0.6em;
}
.rc-season > .rc-tagged {
  margin: 0;
}
.rc-tagged--now {
  font-size: var(--rc-size-body);
  font-weight: 650;
}
.rc-tagged--other {
  color: var(--muted);
}
.rc-tagged--other .rc-tag {
  color: var(--muted);
}
.rc-inline-alt {
  white-space: normal;
}
.rc-inline-alt .rc-tag {
  white-space: normal;
  margin-inline-end: 0.25em;
}
.rc-inline-alt--other {
  color: var(--muted);
}
.rc-inline-alt--other .rc-tag {
  color: var(--muted);
}
.rc-inline-alt--now {
  font-weight: 650;
}

/* ---------- Named alternatives in columns ----------
   All of them visible. Short ones (three names) stay in columns even on a phone; long ones (the
   Chanukah and Purim paragraphs) are columns on a wide screen and ruled panels one under the other
   on a narrow one. */
.rc-alts {
  container-type: inline-size;
  margin: var(--rc-space-label) 0 var(--rc-space-rule);
  font-size: var(--rc-size-secondary);
}
.rc-alts-label {
  margin: 0 0 var(--rc-space-label);
  font: 600 var(--rc-size-label) / 1.4 var(--ui);
  color: var(--ink);
  text-align: right;
}
.rc-alts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.rc-alt-cell {
  min-width: 0;
  padding-block: var(--rc-space-label);
}
.rc-alt-cell + .rc-alt-cell {
  margin-top: var(--rc-space-label);
  padding-top: var(--rc-space-panel);
  border-top: 1px solid var(--rc-rule);
}
.rc-alt-tag {
  margin: 0 0 var(--rc-space-label);
  font: 600 var(--rc-size-label) / 1.3 var(--ui);
  color: var(--ink);
  text-align: right;
}
.rc-alt-tag [lang='he'] {
  font:
    700 var(--rc-size-label) / 1.3 Frank,
    HebrewFallback,
    serif;
}
.rc-alt-cell > :last-child {
  margin-bottom: 0;
}
.rc-alts--short .rc-alts-grid {
  grid-template-columns: repeat(var(--rc-alts-n, 3), minmax(0, 1fr));
}
.rc-alts--short.rc-alts--many .rc-alts-grid {
  /* More than three names: as many columns as fit with room for a name, the rest on a second row. */
  grid-template-columns: repeat(
    auto-fit,
    minmax(max(4.2em, calc(100% / var(--rc-alts-n, 3) - 1px)), 1fr)
  );
}

.rc-alts--short .rc-alt-cell + .rc-alt-cell {
  margin-top: 0;
  padding-top: var(--rc-space-label);
  border-top: 0;
  border-inline-start: 1px solid var(--rc-rule);
  padding-inline-start: calc(var(--rc-space-column) * 0.6);
}
.rc-alts--short .rc-alt-cell {
  padding-inline-end: calc(var(--rc-space-column) * 0.6);
}
@container (min-width: 34rem) {
  .rc-alts--long .rc-alts-grid {
    grid-template-columns: repeat(var(--rc-alts-n, 2), minmax(0, 1fr));
  }
  .rc-alts--long .rc-alt-cell + .rc-alt-cell {
    margin-top: 0;
    padding-top: var(--rc-space-label);
    border-top: 0;
    border-inline-start: 1px solid var(--rc-rule);
    padding-inline-start: var(--rc-space-column);
  }
  .rc-alts--long .rc-alt-cell {
    padding-inline-end: var(--rc-space-column);
  }
}

/* ---------- Choose one, alternatives, speakers: parts of the panel styles ---------- */
.rc-options {
  border: 0;
}
.rc-option + .rc-option {
  border-top: 0;
}
.rc-option[open] > .rc-summary,
.rc-switch[open] > .rc-summary {
  min-height: 34px;
}
.rc-choice-head,
.rc-choice-head .rc-label {
  font: 600 var(--rc-size-label) / 1.4 var(--ui);
}
.rc-reason,
.rc-none {
  font: 400 var(--rc-size-instruction) / 1.5 var(--ui);
}
.rc-option > .rc-body {
  padding: 0;
  font-size: var(--rc-size-body);
}
.rc-option--chosen > .rc-summary .rc-label {
  text-decoration: none;
}
.rc-line {
  grid-template-columns: 5.6rem minmax(0, 1fr);
  column-gap: 10px;
  padding-inline-start: 0;
  border: 0;
}
.rc-speaker-he {
  font:
    700 var(--rc-size-label) / 1.3 Frank,
    HebrewFallback,
    serif;
}
.rc-speaker-en {
  font: 400 var(--rc-size-provenance) / 1.3 var(--ui);
}
@media (max-width: 575px) {
  .rc-line {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rc-body > .rc-qi,
.rc-body > .rc-instruction {
  margin-top: 0;
}
.rc-alts {
  margin-block: var(--rc-space-panel);
}
.rc-alts .rc-alts-grid {
  border-block: 1px solid var(--rc-rule-faint);
}
.rc-alt-cell {
  padding-block: var(--rc-space-panel);
}

/* ---------- Text said at the same time ----------
   The leader says one thing while the congregation says another. Wide: a narrow secondary-tier
   column beside the main line with a tiny heading, divided by a thin vertical rule. Narrow: a
   ruled panel directly after its partner line. */
.rc-sim {
  container-type: inline-size;
  margin: 0 0 var(--rc-space-rule);
}
.rc-sim-along {
  margin-top: var(--rc-space-panel);
  padding-block: var(--rc-space-panel);
  border-block: 1px solid var(--rc-rule);
  font-size: var(--rc-size-secondary);
}
.rc-sim-label {
  margin: 0 0 var(--rc-space-label);
  font: 600 var(--rc-size-label) / 1.4 var(--ui);
  color: var(--ink);
  text-align: right;
}
.rc-sim-main > :last-child,
.rc-sim-along > :last-child {
  margin-bottom: 0;
}
@container (min-width: 34rem) {
  .rc-sim-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
  .rc-sim-along {
    margin: 0;
    padding-block: 0;
    padding-inline-start: var(--rc-space-column);
    border-block: 0;
    border-inline-start: 1px solid var(--rc-rule);
  }
}

/* ---------- A blessing's opening in the display tier ---------- */
.rc-display,
.rc-display b {
  font-size: var(--rc-size-display);
  font-weight: 700;
  line-height: 1.2;
}

/* Specimens of the tiers (the gallery) */
.rc-tier-secondary {
  font-size: var(--rc-size-secondary);
}

/* In a tier the tier sets the size. The page gives some paragraphs a size of their own (small
   additions, quiet invocations); inside a passage set in the secondary tier that would shrink the
   text a second time, so a paragraph here takes the size of its container. */
.rc-tier-secondary p.prayer,
.rc-tagged-text p.prayer,
.rc-alts p.prayer,
.rc-sim p.prayer,
.rc-box > .rc-body p.prayer {
  font-size: inherit;
}

/* ---------- A whole section that is said only on certain days ---------- */
details.conditional-prayer {
  margin: var(--rc-space-rule) 0;
  border: 1px solid var(--rc-rule);
  border-radius: var(--rc-radius);
}
details.conditional-prayer > summary {
  border-block: 0;
  padding-inline: var(--rc-space-panel) 48px !important;
}
details.conditional-prayer > .prayer-text {
  padding: 0 var(--rc-space-panel) var(--rc-space-panel);
}
[data-rc-style='lines'] details.conditional-prayer {
  border: 0;
  border-block: 1px solid var(--rc-rule);
  border-radius: 0;
}
[data-rc-style='shaded'] details.conditional-prayer {
  border-color: transparent;
  background: var(--rc-tint);
}

/* ---------- The sentence that runs through a choice of wordings ---------- */
.prayer-text p.text-flow {
  text-align: justify;
  text-align-last: right;
  margin-bottom: 0.6em;
}

/* ---------- The "Panel style" setting: three small drawings ---------- */
.panel-style-field {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}
.panel-style-field legend {
  padding: 0;
  font: 600 14px/1.4 var(--ui);
  color: var(--ink);
}
.panel-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.panel-style {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.panel-style input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.panel-style-face {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  min-height: 62px;
  color: var(--ink);
  border: 1px solid transparent;
}
.panel-style-face[data-face='outlined'] {
  border-color: var(--rc-rule);
  border-radius: var(--rc-radius);
}
.panel-style-face[data-face='lines'] {
  border-block-color: var(--rc-rule);
}
.panel-style-face[data-face='shaded'] {
  background: var(--rc-tint);
  border-radius: var(--rc-radius);
}
.panel-style-label {
  font: 600 11px/1.2 var(--ui);
  color: var(--muted);
}
.panel-style-text {
  font:
    400 15px/1.3 Frank,
    HebrewFallback,
    serif;
  direction: rtl;
}
.panel-style-name {
  font: 500 13px/1.3 var(--ui);
  color: var(--ink);
  text-align: center;
}
.panel-style input:checked ~ .panel-style-face {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.panel-style input:focus-visible ~ .panel-style-face {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.panel-style input:checked ~ .panel-style-name {
  font-weight: 700;
}

/* "Clear choice": a quiet text button beside a choose-one group's label. */
.rc-clear {
  margin-inline-start: 12px;
  padding: 2px 4px;
  border: 0;
  background: none;
  font: 400 var(--rc-size-provenance) / 1.4 var(--ui);
  color: var(--muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rc-clear:hover {
  color: var(--ink);
}
.rc-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rc-radius);
}
.rc-clear[hidden] {
  display: none;
}

/* A seasonal wording the reader can mark as theirs: a tap target that looks like text. */
.rc-tagged[role='button'],
.rc-inline-alt[role='button'] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rc-tagged[role='button']:focus-visible,
.rc-inline-alt[role='button']:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--rc-radius);
}

/* The English beside a tiny Hebrew label: small, muted, isolated left to right. In a row of tagged
   lines the label sits above its line; in a row of day names it is a second tiny line under the
   Hebrew; inside a sentence it follows the Hebrew inline. */
.rc-tag {
  white-space: normal;
}
.rc-tag-he,
.rc-tag > [lang='he'] {
  white-space: nowrap;
}
.rc-tag-en {
  display: inline-block;
  margin-inline-start: 0.5em;
  font: 400 var(--rc-size-provenance) / 1.3 var(--ui);
  color: var(--muted);
  text-align: right;
  unicode-bidi: isolate;
}
.rc-tagged {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.rc-tagged > .rc-tag {
  display: block;
  margin-bottom: var(--rc-space-label);
}
.rc-alt-tag .rc-tag-en {
  display: block;
  margin-inline-start: 0;
}
.rc-inline-alt .rc-tag-en {
  display: inline;
  margin-inline: 0.3em 0.4em;
}
.rc-tagged--other .rc-tag-en,
.rc-inline-alt--other .rc-tag-en {
  color: var(--muted);
}

/* ---------- Either/or: say one of these ----------
   One bordered group (following the Panel style) with a small header. Wide enough, the wordings stand in
   columns divided by vertical hairlines. Narrower, once the app has started (html[data-app]), a segmented
   control of real radio inputs shows one wording at a time. Without script, or before the app starts,
   every wording is on the page, stacked in the same border with a centered "or" between them. */
.rc-either {
  container-type: inline-size;
  margin: var(--rc-space-rule) 0;
  padding: 0 var(--rc-space-panel) var(--rc-space-panel);
  border: 1px solid var(--rc-rule);
  border-radius: var(--rc-radius);
  color: var(--ink);
}
[data-rc-style='lines'] .rc-either {
  border: 0;
  border-block: 1px solid var(--rc-rule);
  border-radius: 0;
}
[data-rc-style='shaded'] .rc-either {
  border-color: transparent;
  background: var(--rc-tint);
}
.rc-either-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin: 0;
  font: 600 var(--rc-size-label) / 1.4 var(--ui);
  color: var(--ink);
  text-align: right;
}
.rc-either-tag {
  text-transform: none;
  letter-spacing: 0.02em;
}
.rc-either-tabs {
  display: none;
}
.rc-either-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.rc-either-options {
  display: block;
  font-size: var(--rc-size-secondary);
}
.rc-either-option {
  min-width: 0;
}
.rc-either-option .rc-alt-tag {
  margin: 0 0 var(--rc-space-label);
}
.rc-either-option > :last-child {
  margin-bottom: 0;
}
/* Stacked: a centered "or" between the wordings, with hairlines either side. */
.rc-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--rc-space-panel) 0;
  font: 600 var(--rc-size-provenance) / 1.2 var(--ui);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rc-or::before,
.rc-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--rc-rule-faint);
}
/* Columns. */
/* Short wordings stand in columns while each column keeps about 6.5rem; narrower than that they stack. */
@container (min-width: 13rem) {
  .rc-either--short.rc-either--n2 .rc-either-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 19.5rem) {
  .rc-either--short.rc-either--n3 .rc-either-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container (min-width: 26rem) {
  .rc-either--short.rc-either--n4 .rc-either-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container (min-width: 700px) {
  .rc-either--medium .rc-either-options {
    display: grid;
    grid-template-columns: repeat(var(--rc-either-n), minmax(0, 1fr));
  }
}
@container (min-width: 1000px) {
  .rc-either--long .rc-either-options {
    display: grid;
    grid-template-columns: repeat(var(--rc-either-n), minmax(0, 1fr));
  }
}
@container (min-width: 13rem) {
  .rc-either--short.rc-either--n2 .rc-or {
    display: none;
  }
  .rc-either--short.rc-either--n2 .rc-either-option + .rc-or + .rc-either-option {
    border-inline-start: 1px solid var(--rc-rule);
    padding-inline-start: var(--rc-space-column);
  }
  .rc-either--short.rc-either--n2 .rc-either-option {
    padding-inline-end: var(--rc-space-column);
  }
}
@container (min-width: 19.5rem) {
  .rc-either--short.rc-either--n3 .rc-or {
    display: none;
  }
  .rc-either--short.rc-either--n3 .rc-either-option + .rc-or + .rc-either-option {
    border-inline-start: 1px solid var(--rc-rule);
    padding-inline-start: var(--rc-space-column);
  }
  .rc-either--short.rc-either--n3 .rc-either-option {
    padding-inline-end: var(--rc-space-column);
  }
}
@container (min-width: 26rem) {
  .rc-either--short.rc-either--n4 .rc-or {
    display: none;
  }
  .rc-either--short.rc-either--n4 .rc-either-option + .rc-or + .rc-either-option {
    border-inline-start: 1px solid var(--rc-rule);
    padding-inline-start: var(--rc-space-column);
  }
  .rc-either--short.rc-either--n4 .rc-either-option {
    padding-inline-end: var(--rc-space-column);
  }
}
@container (min-width: 700px) {
  .rc-either--medium .rc-or {
    display: none;
  }
  .rc-either--medium .rc-either-option + .rc-or + .rc-either-option {
    border-inline-start: 1px solid var(--rc-rule);
    padding-inline-start: var(--rc-space-column);
  }
  .rc-either--medium .rc-either-option {
    padding-inline-end: var(--rc-space-column);
  }
}
@container (min-width: 1000px) {
  .rc-either--long .rc-or {
    display: none;
  }
  .rc-either--long .rc-either-option + .rc-or + .rc-either-option {
    border-inline-start: 1px solid var(--rc-rule);
    padding-inline-start: var(--rc-space-column);
  }
  .rc-either--long .rc-either-option {
    padding-inline-end: var(--rc-space-column);
  }
}
/* Tabs: below the column widths, once the app has started. One wording at a time. */
@container (max-width: 699.98px) {
  [data-app] .rc-either--medium.rc-either--tabbable .rc-either-tabs {
    display: flex;
  }
  [data-app] .rc-either--medium.rc-either--tabbable .rc-or {
    display: none;
  }
}
@container (max-width: 999.98px) {
  [data-app] .rc-either--long.rc-either--tabbable .rc-either-tabs {
    display: flex;
  }
  [data-app] .rc-either--long.rc-either--tabbable .rc-or {
    display: none;
  }
}
.rc-either-tabs {
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 var(--rc-space-panel);
  border: 1px solid var(--rc-rule);
  border-radius: var(--rc-radius);
  overflow: hidden;
}
.rc-either-tab {
  flex: 1 1 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  text-align: center;
  font: 500 var(--rc-size-label) / 1.3 var(--ui);
  color: var(--muted);
  cursor: pointer;
  border-inline-start: 1px solid var(--rc-rule);
  -webkit-tap-highlight-color: transparent;
}
.rc-either-tab:first-of-type {
  border-inline-start: 0;
}
.rc-either-radio:checked + .rc-either-tab {
  color: var(--ink);
  font-weight: 700;
  background: var(--rc-tint);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.rc-either-radio:focus-visible + .rc-either-tab {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Which wording shows in tab mode: the one whose radio is checked. */
@container (max-width: 699.98px) {
  [data-app] .rc-either--medium.rc-either--tabbable .rc-either-option {
    display: none;
  }
  [data-app]
    .rc-either--medium.rc-either--tabbable:has(.rc-either-radio:nth-of-type(1):checked)
    .rc-either-option:nth-of-type(1),
  [data-app]
    .rc-either--medium.rc-either--tabbable:has(.rc-either-radio:nth-of-type(2):checked)
    .rc-either-option:nth-of-type(2),
  [data-app]
    .rc-either--medium.rc-either--tabbable:has(.rc-either-radio:nth-of-type(3):checked)
    .rc-either-option:nth-of-type(3),
  [data-app]
    .rc-either--medium.rc-either--tabbable:has(.rc-either-radio:nth-of-type(4):checked)
    .rc-either-option:nth-of-type(4),
  [data-app]
    .rc-either--medium.rc-either--tabbable:has(.rc-either-radio:nth-of-type(5):checked)
    .rc-either-option:nth-of-type(5),
  [data-app]
    .rc-either--medium.rc-either--tabbable:has(.rc-either-radio:nth-of-type(6):checked)
    .rc-either-option:nth-of-type(6),
  [data-app]
    .rc-either--medium.rc-either--tabbable:has(.rc-either-radio:nth-of-type(7):checked)
    .rc-either-option:nth-of-type(7),
  [data-app]
    .rc-either--medium.rc-either--tabbable:has(.rc-either-radio:nth-of-type(8):checked)
    .rc-either-option:nth-of-type(8) {
    display: block;
  }
}
@container (max-width: 999.98px) {
  [data-app] .rc-either--long.rc-either--tabbable .rc-either-option {
    display: none;
  }
  [data-app]
    .rc-either--long.rc-either--tabbable:has(.rc-either-radio:nth-of-type(1):checked)
    .rc-either-option:nth-of-type(1),
  [data-app]
    .rc-either--long.rc-either--tabbable:has(.rc-either-radio:nth-of-type(2):checked)
    .rc-either-option:nth-of-type(2),
  [data-app]
    .rc-either--long.rc-either--tabbable:has(.rc-either-radio:nth-of-type(3):checked)
    .rc-either-option:nth-of-type(3),
  [data-app]
    .rc-either--long.rc-either--tabbable:has(.rc-either-radio:nth-of-type(4):checked)
    .rc-either-option:nth-of-type(4),
  [data-app]
    .rc-either--long.rc-either--tabbable:has(.rc-either-radio:nth-of-type(5):checked)
    .rc-either-option:nth-of-type(5),
  [data-app]
    .rc-either--long.rc-either--tabbable:has(.rc-either-radio:nth-of-type(6):checked)
    .rc-either-option:nth-of-type(6),
  [data-app]
    .rc-either--long.rc-either--tabbable:has(.rc-either-radio:nth-of-type(7):checked)
    .rc-either-option:nth-of-type(7),
  [data-app]
    .rc-either--long.rc-either--tabbable:has(.rc-either-radio:nth-of-type(8):checked)
    .rc-either-option:nth-of-type(8) {
    display: block;
  }
}