/* Quiet Stanza — the sitting on the desk: the catalogue slip on today's card, the guide's
   ring, the quiet options, and the librarian at work. The card over the book, the tray and
   the writing bar have stylesheets of their own (SittingCard, SittingTray, WritingBar). */

/* The first page's guide rings the control it is talking about (qsOnboarding.guide). The
   ring wins over a focused control's own outline: the writing bar's buttons take the focus. */
.fp-guide-target {
  outline: 2px solid var(--gold) !important;
  outline-offset: 4px !important;
  border-radius: 8px;
}
/* The writing bar's buttons sit close on the tray: the ring goes inside them. */
.ws-bar .fp-guide-target { outline-offset: -3px !important; }
/* Select: why this one, in a line */
/* Select: the catalogue slip — two ruled lines, as a card in the stacks reads */
.sitting-slip {
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-line);
  max-width: 54em;
}
.sitting-slip-row {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-line);
}
.sitting-slip dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.sitting-slip dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 2px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}
.sitting-slip .slip-fact { white-space: nowrap; }
.sitting-slip .slip-fact + .slip-fact { margin-left: -16px; }   /* commas run on; the wide gap is for groups */
.slip-group { white-space: nowrap; }
.slip-term {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-secondary) 45%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.slip-term:hover, .slip-term:focus-visible { color: var(--wax); text-decoration-color: currentColor; }
.slip-term:focus-visible { outline: 2px solid var(--laurel); outline-offset: 2px; border-radius: 2px; }
.slip-term-plain { text-decoration: none; cursor: default; }
.slip-group .slip-term + .slip-term { margin-left: .3em; }

.option-quiet { padding: 4px 12px; font-size: 13.5px; border-radius: 12px; }
/* The reading holds at a breath: the play mark breathes (reader.css). */
@keyframes sitting-play-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .6; }
}
.today-picking {
  display: flex;
  align-items: flex-start;
  padding: 24px 0 10px;
  min-height: 7em;
}
/* The librarian at work: the fleuron breathes, the second line changes like a page turning. */
.librarian-wait {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  max-width: 36rem;
}
.librarian-mark {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.1;
  color: var(--laurel);
  animation: librarian-breathe 2.6s ease-in-out infinite;
}
.librarian-text { min-width: 0; }
.librarian-lead {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  color: var(--text-primary);
}
.librarian-line {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  animation: librarian-turn .5s ease both;
}
.librarian-slow {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  animation: librarian-turn .5s ease both;
}
@keyframes librarian-breathe {
  0%, 100% { opacity: .45; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}
@keyframes librarian-turn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .librarian-mark, .librarian-line { animation: none; opacity: 1; }
}
@media (max-width: 560px) {
  .today-pick-head { flex-direction: column; gap: 8px; }
  .today-pick-meta { max-width: none; text-align: left; padding-top: 0; }
  .poem-title { font-size: 34px; }
}