/* The Synap: "Read more" (inc/pages/read-more.php). Prefix rm-.
   A short visible line (.rm-lead, clamped to two lines while closed) inside a .rm-scope, then a barely visible
   toggle that opens the rest: more text and quick answers worked out from the phones themselves. On wide screens
   the toggle sits at the far right, level with the end of the line. Light surfaces only (the reading cards). */

.rm-scope:has(.rm) .rm-lead { margin-bottom: 0; }
.rm-scope:has(.rm:not([open])) .rm-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rm { margin: .35em 0 0; }
.rm-toggle { display: inline-flex; align-items: center; min-height: 28px; font-size: var(--t-meta); font-weight: 500; color: var(--ink-3); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; text-decoration: underline; text-decoration-color: rgba(0,0,0,.2); text-underline-offset: 3px; transition: color .2s ease; }
.rm-toggle::-webkit-details-marker { display: none; }
.rm-toggle::marker { content: ""; }
.rm-toggle:hover { color: var(--ink); text-decoration-color: currentColor; }
.rm-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.rm-close { display: none; }
.rm[open] .rm-open { display: none; }
.rm[open] .rm-close { display: inline; }
.rm-body { max-width: 68ch; padding: .5em 0 .2em; }
.rm-desc { margin: 0 0 1em; font-size: var(--t-ui); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.rm-faq-title { margin: 1.4em 0 0; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rm-q { margin: 1.2em 0 .3em; font-family: var(--font); font-size: var(--t-ui); font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--ink); }
.rm-a { margin: 0; font-size: var(--t-ui); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.rm-desc a, .rm-a a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 2px; transition: color .2s ease; }
.rm-desc a:hover, .rm-a a:hover { color: var(--acc-text); text-decoration-color: currentColor; }
.rm-a b, .rm-desc b { font-weight: 600; color: var(--ink); }

/* wide screens: the toggle at the far right, level with the last line of the visible text */
@media (min-width: 1024px) {
  .rm-scope { position: relative; }
  .rm-scope .rm { position: relative; margin-top: 0; }
  .rm-scope .rm-toggle { position: absolute; right: 0; bottom: 100%; min-height: 0; padding: .6em 0 0 1.5em; line-height: 1.3; }
  .rm-scope .rm-body { padding-top: .9em; }
}

@media (pointer: coarse) {
  .rm-toggle { min-height: 44px; }
}