/* Loaded only on the library; canonical app tokens own all colors. */
html { scroll-behavior: auto; }
.relationship-library-page .sl-header { height: auto; min-height: 3.25rem; flex-wrap: wrap; gap: 1rem; position: static; }
.relationship-library-page .sl-main { max-width: 48rem; padding: min(1.25rem, 20px); }
#relationship-library { color: var(--app-text); overflow-wrap: anywhere; line-height: 1.65; }
#relationship-library [hidden] { display: none !important; }
#relationship-library h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.2; }
#relationship-library h2 { font-size: 1.4rem; line-height: 1.35; margin: 1rem 0; }
#relationship-library h3 { font-size: 1.1rem; line-height: 1.4; margin: .5rem 0; }
#relationship-library p { margin: 1rem 0; }
#relationship-library a { color: inherit; text-underline-offset: .2em; }
#relationship-library .ll-meta { color: var(--app-text-muted); font-size: .875rem; }
#relationship-library button, #relationship-library .ll-button, #relationship-library input {
  font: inherit; color: var(--app-text); background: var(--app-surface);
  border: 1px solid var(--app-border-strong); border-radius: .75rem; padding: min(.7rem, 14px) min(1rem, 16px);
  min-height: 2.75rem; text-align: start; white-space: normal; overflow-wrap: anywhere;
  max-width: 100%; touch-action: manipulation;
}
#relationship-library button, #relationship-library .ll-button { cursor: pointer; }
#relationship-library .ll-button { display: inline-flex; align-items: center; }
#relationship-library input { display: block; width: 100%; margin-top: .5rem; }
#relationship-library button:hover, #relationship-library .ll-button:hover { background: var(--app-surface-raised); }
#relationship-library :is(button, a, summary, input):focus-visible { outline: 3px solid var(--app-text); outline-offset: 4px; }
#relationship-library button[aria-pressed=true] { background: var(--control-selected-bg); color: var(--control-selected-text); border-color: var(--control-selected-border); }
#relationship-library .ll-actions { display: flex; flex-wrap: wrap; gap: min(.7rem, 14px); margin: 1.3rem 0; }
#relationship-library .ll-actions > * { flex: 0 1 auto; min-width: 0; }
#relationship-library .ll-card { padding: 1.4rem 0; border-top: 1px solid var(--app-border-strong); }
#relationship-library .ll-card p { margin: .4rem 0 .9rem; }
#relationship-library .ll-notice { padding: min(1rem, 20px); margin: 1.5rem 0; border-inline-start: 3px solid var(--app-border-strong); background: var(--app-surface-raised); }
#relationship-library .ll-notice p { margin: .5rem 0; }
#relationship-library blockquote { margin: 1.2rem 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--app-border-strong); }
#relationship-library details { margin: 1rem 0; border-top: 1px solid var(--app-border-strong); padding-top: .5rem; }
#relationship-library summary { cursor: pointer; min-height: 2.75rem; padding: .7rem; }
#relationship-library .ll-option { border: 1px solid var(--app-border-strong); border-radius: .75rem; padding: 0; background: var(--app-surface); }
#relationship-library .ll-option[open] { background: var(--app-surface-raised); }
#relationship-library .ll-response { padding: 0 1rem 1rem; }
#relationship-library .ll-reference { padding: .5rem 0; border-bottom: 1px solid var(--app-border); }
#relationship-library .ll-article { margin-bottom: 3rem; }
#relationship-library .ll-steps { padding-inline-start: 1.5rem; }
#relationship-library .ll-steps li { margin-block: 1.2rem; padding-inline-start: .3rem; }
/* The row pitch follows rem sizing, so rails remain below enlarged book spines. */
#relationship-library #ll-shelf-books {
  --shelf-row: 21rem;
  list-style: none; padding: 1rem min(.65rem, 10px) 0; margin: 1rem 0;
  display: flex; flex-wrap: wrap; align-content: start; gap: 0;
  min-height: calc(var(--shelf-row) + 1rem);
  border: 1px solid var(--app-border-strong); border-radius: .2rem;
  background-color: var(--app-bg);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--shelf-row) - 1.1rem),
    color-mix(in srgb, var(--app-text) 25%, var(--app-surface)) calc(var(--shelf-row) - 1.1rem),
    var(--app-border-strong) calc(var(--shelf-row) - .98rem),
    var(--app-surface-raised) calc(var(--shelf-row) - .94rem),
    var(--app-border-strong) calc(var(--shelf-row) - .88rem),
    var(--app-border) calc(var(--shelf-row) - .45rem),
    var(--app-bg) calc(var(--shelf-row) - .35rem), var(--app-bg) var(--shelf-row));
  background-position: 0 1rem;
  box-shadow: inset 0 .5rem 1rem color-mix(in srgb, var(--app-text) 5%, transparent);
}
#relationship-library .ll-book {
  --book-height: 17.8rem;
  --book-cloth: var(--app-surface);
  flex: 0 0 auto; width: min(100%, var(--book-width, 3.8rem)); min-width: 0; height: var(--shelf-row); padding: 0 .2rem 1.1rem;
  display: flex; flex-direction: column; justify-content: end; align-items: stretch;
}
#relationship-library .ll-book:nth-child(3n + 2) { --book-cloth: var(--app-surface-raised); }
#relationship-library .ll-book:nth-child(3n) { --book-cloth: color-mix(in srgb, var(--app-surface) 86%, var(--app-text)); }
#relationship-library .ll-spine {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--book-height); padding: 1.7rem .45rem;
  border: 1px solid var(--app-border-strong); border-radius: .22rem .35rem .12rem .12rem;
  color: var(--app-text); text-decoration: none;
  background-color: var(--book-cloth);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--app-text) 18%, transparent), transparent 16%, transparent 77%, color-mix(in srgb, var(--app-bg) 70%, transparent)),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, color-mix(in srgb, var(--app-text) 3%, transparent) 3px);
  box-shadow: .17rem .03rem .15rem color-mix(in srgb, var(--app-bg) 80%, transparent),
    inset .16rem 0 .15rem var(--app-border), inset -.12rem 0 .1rem color-mix(in srgb, var(--app-bg) 60%, transparent),
    inset 0 .12rem 0 color-mix(in srgb, var(--app-text) 18%, var(--book-cloth));
  transition: translate 140ms ease-out;
}
#relationship-library .ll-spine::before, #relationship-library .ll-spine::after {
  content: ''; position: absolute; inset-inline: .35rem; height: .25rem;
  border-block: 1px solid var(--app-border-strong); top: .65rem;
}
#relationship-library .ll-spine::after { top: auto; bottom: .65rem; }
#relationship-library .ll-spine-title { writing-mode: vertical-rl; font-size: 1rem; font-weight: 600; line-height: 1.35; }
#relationship-library a.ll-spine:is(:hover, :focus-visible) { translate: 0 -.25rem; }
#relationship-library .ll-book-detail { display: none; }
#relationship-library #ll-shelf-books.ll-book-list { display: block; min-height: 0; background: none; border: none; padding: 0; box-shadow: none; }
#relationship-library .ll-book-list .ll-book { display: block; width: auto; height: auto; border-block-end: 1px solid var(--app-border-strong); padding: 1rem 0; }
#relationship-library .ll-book-list .ll-book-detail { display: block; }
#relationship-library .ll-book-list .ll-spine { display: block; max-width: none; height: auto; padding: .4rem 0; border: none; border-radius: 0; background: none; box-shadow: none; translate: none; text-decoration: underline; }
#relationship-library .ll-book-list .ll-spine::before, #relationship-library .ll-book-list .ll-spine::after { display: none; }
#relationship-library .ll-book-list .ll-spine-title { writing-mode: horizontal-tb; }
#relationship-library .ll-book-arrival { animation: ll-book-settle 200ms ease-out; }
@keyframes ll-book-settle { from { transform: translateY(-.4rem); } to { transform: translateY(0); } }
#relationship-library .ll-books-still .ll-book { animation: none; }
#relationship-library .ll-books-still .ll-spine { transition: none; translate: none; }
#relationship-library dialog {
  color: var(--app-text); background: var(--app-surface); border: 2px solid var(--app-border-strong);
  border-radius: 1rem; width: min(34rem, calc(100% - 24px)); max-height: 85dvh; padding: min(1.25rem, 20px);
  overflow: auto; overflow-wrap: anywhere; margin: auto;
}
#relationship-library dialog::backdrop { background: color-mix(in srgb, var(--app-bg) 85%, transparent); }
#relationship-library pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; border: 1px solid var(--app-border); padding: min(1rem, 16px); }
#relationship-library button:disabled { cursor: default; opacity: .65; }
@media (prefers-reduced-motion: reduce) { #relationship-library .ll-book { animation: none; } #relationship-library .ll-spine { transition: none; translate: none; } }
@media (prefers-reduced-motion: reduce) { .relationship-library-page { scroll-behavior: auto; } }
@media (prefers-contrast: more) { #relationship-library .ll-meta { color: var(--app-text); } }

/* Catalog hierarchy matches the reviewed member card scale. */
#relationship-library .ll-card { padding: 1rem; margin-block: 1rem; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface); }
#relationship-library .ll-card h3 { font-size: 1.25rem; line-height: 1.3; margin-top: .375rem; }
#relationship-library .ll-card .ll-meta { font-size: .8125rem; }
#relationship-library .ll-card .ll-button { min-height: 48px; }

#relationship-library :is(h1, h2, h3, p, li, summary) { overflow-wrap: anywhere; }