/* research-library page
   1. The hero panel: the five steps of a research project, one real article (Needleman et al., 2011) carried
      through them. Sketches in the page's own language, not screenshots: a browser with Add to PERRLA, the PDF
      with a note pinned to its passage, the Collections tree, the note landing in a paper, then the paper types.
   2. "Before you write": a small sketch above each of the four ways a library comes in. */

/* ---------- 1. The hero panel ---------- */
.rl-stage { position: relative; aspect-ratio: 8.5 / 9.6; width: 100%; max-width: 360px; margin: 0 auto 0.75rem; font-family: var(--font-body); color: var(--ink); line-height: 1.4; }
.rl-stage p { margin: 0; }
.rl-steps .syllabus__view > [role="tabpanel"] > .syllabus__note { max-width: 360px; margin-inline: auto; }
.rl-sheet { background: #fff; border: 1px solid var(--gray-300); box-shadow: 0 1px 2px rgba(33,37,41,0.1), 0 12px 24px -14px rgba(33,37,41,0.4); }

/* Find: a browser on a search results page, Add to PERRLA beside each title (the extension's own button colors) */
.rl-browser { position: absolute; inset: 0; background: #fff; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(33,37,41,0.1), 0 12px 24px -14px rgba(33,37,41,0.4); }
.rl-browser__bar { display: flex; align-items: center; gap: 4px; padding: 7px 9px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); }
.rl-browser__bar i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400); }
.rl-browser__bar span { margin-left: 6px; flex: 1; min-width: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: 4px; padding: 1px 8px; font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-browser__page { padding: 12px 14px; }
.rl-search { border: 1px solid var(--gray-300); border-radius: 4px; padding: 3px 8px; font-size: 0.6875rem; color: var(--ink); margin-bottom: 14px !important; }
.rl-hit { margin-bottom: 14px; }
.rl-hit__t { font-size: 0.75rem; line-height: 1.4; color: var(--blue-700); }
.rl-hit__a { font-size: 0.625rem; color: #2d7a2b; margin-top: 2px !important; }
.rl-add { display: inline-block; white-space: nowrap; margin-left: 3px; padding: 0 7px; border: 1px solid #0070e0; border-radius: 999px; background: #0070e0; color: #fff; font-size: 0.5625rem; font-weight: 600; line-height: 1.6; vertical-align: 1px; }
.rl-add--open { background: #e9f8ea; border-color: #b6e3b8; color: #1f7a1c; }
.rl-bars { display: grid; gap: 5px; margin-top: 6px !important; }
.rl-bars i { display: block; height: 5px; border-radius: 3px; background: var(--gray-200); }
.rl-bars i:last-child { width: 68%; }
.rl-hit--faint { opacity: 0.6; }

/* Read: the article's first page with a highlighted passage, and the note pinned to it (the Annotator's note card) */
.rl-read, .rl-use { display: flex; flex-direction: column; }   /* the note card overlaps only the bottom of the page above it, so it never covers the passage */
.rl-pdf { position: relative; flex: 1 0 auto; width: 86%; padding: 9% 8% 3.4rem; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(33,37,41,0.1), 0 12px 24px -14px rgba(33,37,41,0.4); overflow: hidden; }
.rl-pdf__run { font-family: var(--font-mono); font-size: 0.5rem; color: var(--ink-3); margin-bottom: 7px !important; }
.rl-pdf__title { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.2; margin-bottom: 5px !important; }
.rl-pdf__by { font-size: 0.5625rem; color: var(--ink-2); margin-bottom: 6px !important; }
.rl-pdf__k { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-700); margin: 8px 0 1px !important; }
.rl-pdf .rl-bars { gap: 4px; margin-top: 3px !important; }
.rl-pdf .rl-bars i { height: 4px; }
.rl-pdf__txt { font-family: var(--font-paper); font-size: 0.6875rem; line-height: 1.45; }
.rl-pdf .rl-bars + .rl-pdf__txt { margin-top: 9px !important; }   /* no section label between the abstract and the passage */
.rl-hl { background: var(--yellow-300); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 1px; }
.rl-nw { white-space: nowrap; }
.rl-pin { display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 2px #fff; vertical-align: 1px; }
.rl-note { position: relative; align-self: flex-end; margin-top: -2.6rem; width: 76%; padding: 9px 11px 8px; background: #fff; border: 1px solid var(--gray-300); border-radius: 6px; box-shadow: 0 1px 2px rgba(10,40,81,0.08), 0 18px 32px -14px rgba(10,40,81,0.4); transform: rotate(1.2deg); font-size: 0.6875rem; }
.rl-note__q { background: var(--yellow-100); border-radius: 3px; padding: 3px 5px; line-height: 1.4; }
.rl-note__body { padding-top: 7px; margin-top: 7px !important; border-top: 1px solid var(--gray-200); line-height: 1.6; }
.rl-note__cite { display: block; margin-top: 6px !important; font-family: var(--font-mono); font-size: 0.5625rem; color: var(--blue-700); }
.rl-chip { display: inline-block; white-space: nowrap; padding: 0 4px; border-radius: 3px; background: var(--blue-50); color: var(--blue-900); font-family: var(--font-mono); font-size: 0.5625rem; line-height: 1.5; }
.rl-chip--ref { background: var(--gray-100); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--gray-300); }

/* Sort: the Collections tree, nested by chapter, and what's inside the selected one */
.rl-lib { display: flex; flex-direction: column; gap: 10px; }
.rl-lib__tree, .rl-lib__items { background: #fff; border: 1px solid var(--gray-300); border-radius: 8px; padding: 9px 0 6px; box-shadow: 0 1px 2px rgba(33,37,41,0.08), 0 10px 20px -14px rgba(33,37,41,0.35); }
.rl-lib__items { flex: 1; }
.rl-lib__h { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 5px; }
.rl-lib__row { display: flex; align-items: center; gap: 7px; padding: 3px 12px; font-size: 0.75rem; }
.rl-lib__row.l2 { padding-left: 24px; }
.rl-lib__row.l3 { padding-left: 50px; }
.rl-lib__row i { flex: none; width: 0; height: 0; border-left: 5px solid var(--ink-3); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.rl-lib__row i.open { transform: rotate(90deg); }
.rl-lib__row.is-on { background: var(--yellow-300); font-weight: 600; }
.rl-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 5px; padding: 5px 12px; border-top: 1px solid var(--gray-200); font-size: 0.6875rem; }
.rl-item b { font-weight: 600; margin-right: 2px; }
.rl-also { font-size: 0.625rem; color: var(--ink-2); }

/* Write: the note inserted into a dissertation page, the quote and its citation marked where they landed */
.rl-steps .rl-use .paper { flex: 1 0 auto; aspect-ratio: auto; min-height: 0; padding-bottom: 4.2rem; }
.rl-note--insert { margin: -3.4rem 5% 0.6rem 0; width: 72%; transform: rotate(-1deg); }
.rl-note__label { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px !important; }
.rl-note__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px !important; }
.rl-note__foot .rl-note__cite { margin: 0 !important; }
.rl-insert { flex: none; padding: 2px 9px; border-radius: 4px; background: var(--blue-500); color: #fff; font-size: 0.625rem; font-weight: 600; }

/* Format: the paper types as a second row of tabs above the page */
.rl-types { display: flex; flex-wrap: wrap; gap: 5px; max-width: 360px; margin: 0 auto 10px; }
.rl-types__tab { padding: 3px 8px; border: 1px solid var(--gray-400); border-radius: 4px; background: #fff; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--ink); cursor: pointer; line-height: 1.4; }
.rl-types__tab:hover { border-color: var(--ink-2); }
.rl-types__tab[aria-selected="true"] { background: var(--yellow-300); border-color: #d9a93a; color: #3d2a00; }
.rl-papers { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-inline: auto; }
.rl-papers > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; }
.rl-papers > [role="tabpanel"][hidden] { display: block; visibility: hidden; }   /* every page in one cell, so switching never moves the panel */
.rl-steps .rl-papers .paper { aspect-ratio: 8.5 / 8.4; }

@media (max-width: 640px) {
  .rl-steps .rl-papers .paper { aspect-ratio: 8.5 / 8.4; min-height: 0; }
}

/* ---------- 2. Before you write: one sketch per way in ---------- */
.rl-ways > div { display: flex; flex-direction: column; }
.rl-slip { position: relative; height: 12.5rem; width: 100%; max-width: 340px; margin: 0.875rem 0 1.25rem; background: #fff; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(33,37,41,0.08), 0 12px 22px -14px rgba(33,37,41,0.4); font-family: var(--font-body); color: var(--ink); line-height: 1.4; }
.rl-slip p { margin: 0; color: inherit; font-size: 0.6875rem; }
@media (min-width: 1001px) and (max-width: 1199px) { .rl-slip { height: 13.5rem; } }   /* four narrow columns: room for the longest slip text */
@media (min-width: 1001px) and (max-width: 1079px) { .rl-slip { height: 15.5rem; } }
.rl-slip .rl-slip__file { font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-2); padding: 7px 12px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.rl-slip .rl-slip__file span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rl-slip .rl-slip__file span + span { flex: none; }

/* From Zotero: a page of the PDF with its highlights, in their own colors */
.rl-slip .rl-slip__pdf { padding: 10px 14px; font-family: var(--font-paper); font-size: 0.6875rem; line-height: 1.6; color: #000; }
.rl-slip .rl-z-y { background: #ffe28a; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.rl-slip .rl-z-b { background: #c7e4fb; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* From a .bib file: the entry, and where three of its fields land */
.rl-slip .rl-bib { padding: 10px 12px; font-family: var(--font-mono); font-size: 0.5625rem; line-height: 1.55; white-space: pre; color: var(--ink-2); overflow: hidden; }
.rl-slip .rl-bib b { font-weight: 400; color: var(--ink); background: var(--yellow-100); }
.rl-slip .rl-bib .to { color: var(--blue-500); }

/* From the database: an article page with the extension's button under the title */
.rl-slip .rl-browser__bar { padding: 6px 9px; }
.rl-slip .rl-web { padding: 10px 14px; }
.rl-slip .rl-web__j { font-size: 0.5625rem; color: var(--ink-3); margin-bottom: 4px !important; }
.rl-slip .rl-web__t { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.2; margin-bottom: 3px !important; }
.rl-slip .rl-web__a { font-size: 0.5625rem; color: var(--blue-700); margin-bottom: 7px !important; }
.rl-slip .rl-web .rl-add { margin: 0 0 4px; font-size: 0.625rem; padding: 1px 8px; }

/* From a DOI: the lookup, and the reference it fills */
.rl-slip .rl-doi { padding: 12px 14px; }
.rl-slip .rl-lookup { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1.5px solid var(--blue-100); border-radius: 6px; font-family: var(--font-mono); font-size: 0.6875rem; margin-bottom: 10px !important; }
.rl-slip .rl-lookup span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-slip .rl-lookup .found { flex: none; color: var(--green-500); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; }
.rl-slip .rl-doi__ref { font-family: var(--font-paper); font-size: 0.6875rem; line-height: 1.7; color: #000; padding-left: 1.6em; text-indent: -1.6em; }

/* The Annotate card shows a tag and a mention the way the product does: chips, the mention by its citation (Oct 4) */
.icard .rl-chip { font-size: 0.75rem; padding: 0.05rem 0.4rem; }