/* PERRLA Online page – its own pieces only. Shared styles live in site.css and world.css. */

/* Hero: cite as you write. Page 7 sits on top of the References page; the "(" picker is open at the cursor. */
.citedemo { display: grid; margin-bottom: 0.5rem; }
.citedemo > .paper { grid-area: 1 / 1; aspect-ratio: auto; padding: 7% 8% 5%; }
.citedemo__refs { align-self: stretch; margin-left: 13%; padding-top: 2.4em; transform: rotate(1.2deg); }   /* only its top band shows: the page number and the References heading */
.citedemo__refs .pnum { top: 1em; right: 8%; }
.citedemo__page { align-self: start; margin: 4.9em 3% 0 0; z-index: 1; transform: rotate(-0.5deg); }
.intro--field .citedemo__refs { box-shadow: 0 1px 2px rgba(33,37,41,0.12), 0 10px 22px -14px rgba(33,37,41,0.35); }
.citedemo__caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; background: #000; vertical-align: text-bottom; }

/* the reference picker that opens at the cursor (App: QuillCitationContextMenu) */
.citedemo__pick {
  display: block; width: min(15.5rem, 78%); margin: 0.35em 0 0.6em 16%;
  background: #fff; border: 1px solid var(--gray-300); border-radius: 6px;
  box-shadow: 0 2px 4px rgba(10,40,81,0.08), 0 12px 24px -10px rgba(10,40,81,0.35);
  font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.35; overflow: hidden;
}
.citedemo__pick > span { display: block; padding: 0.4rem 0.75rem; }
.citedemo__find { color: var(--ink-3); border-bottom: 1px solid var(--gray-200); }
.citedemo__opt { color: var(--ink); }
.citedemo__opt.is-on { background: var(--blue-50); color: var(--blue-900); font-weight: 600; }

@media (max-width: 1100px) { .citedemo__pick { font-size: 0.75rem; } }
@media (max-width: 720px) {
  .citedemo > .paper { font-size: 9px; }
  .citedemo__refs { margin-left: 10%; }
  .citedemo__pick { font-size: 0.75rem; width: min(13.5rem, 82%); margin-left: 12%; }
}

/* Feature cards: the four cards run the same length; a short card keeps its blank ruled lines, as a real card would */
#features .fcards--4 { align-items: stretch; }
#features .fcards .icard { min-height: calc(var(--line) * 9); }
@media (max-width: 600px) { #features .fcards .icard { min-height: 0; } }

/* Look up card: the form PERRLA fills from the published record */
.icard .lk { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 0.35rem; }
.icard .lk > span:first-child { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }

/* Paper types: a sheet keeps its page shape, and grows only where its text would otherwise run past the bottom (narrow columns, about 640 to 1100px). clip, unlike hidden, lets the sheet size to its content. */
#paper-picker .syllabus__view .paper { overflow: clip; }