/* Quiet Stanza — the floating corner pills: margins on the left, weather on the right. */

/* floating corner pills — margins left, weather right — as on the desktop.
   One dock holds both, fixed just above the nav's dock: --dock-height is the rail as
   measured (qsDock, float.js), 0 while it stands as a rail. */
.footer-scrim { position: fixed; inset: 0; z-index: 40; }
.footer-dock {
  position: fixed; z-index: 41;
  left: calc(var(--rail-width) + 16px); right: 16px;
  bottom: calc(var(--dock-height, 0px) + 12px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.footer-anchor {
  position: static; pointer-events: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  /* half the dock, so the two corners never collide */
  width: min(420px, calc(50% - 6px));
}
/* each keeps its corner when it is the only one drawn */
.footer-left { margin-right: auto; }
.footer-right { margin-left: auto; align-items: flex-end; }
.footer-pill {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #F2F6F1F5; border: 1px solid var(--sheet-edge); border-radius: 10px;
  padding: 9px 16px 9px 14px; cursor: pointer;
  font-family: var(--ui); text-align: left; color: var(--text-primary);
  box-shadow: 0 4px 18px rgba(43, 42, 36, .08);
  /* a near-solid paper rather than a blur: the blur repainted the pill with everything that scrolled under it */
}
.footer-pill:hover { border-color: var(--text-secondary); }
/* a pill tucked away to its icon; the fold tab sits on the side nearest the page */
.footer-pill-row { display: flex; align-items: center; gap: 4px; width: 100%; }
.footer-right .footer-pill-row { justify-content: flex-end; }
.footer-anchor.is-folded { width: auto; }
.footer-anchor.is-folded .footer-pill { width: auto; padding: 8px 10px; gap: 0; border-radius: 50%; }
.footer-anchor.is-folded .footer-flyout { width: min(420px, calc(100vw - var(--rail-width) - 48px)); }
.footer-pill-fold {
  flex-shrink: 0; width: 18px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--text-secondary); cursor: pointer;
  font-family: var(--serif); font-size: 16px; line-height: 1;
  opacity: .55;
}
.footer-pill-row:hover .footer-pill-fold, .footer-pill-fold:focus-visible { opacity: 1; }
.footer-pill-fold:hover { color: var(--text-primary); background: #F2F6F1E6; border-color: var(--sheet-edge); }
.footer-pill-fold:focus-visible { outline: 2px solid var(--laurel); outline-offset: 1px; opacity: 1; }
.footer-icon { font-size: 24px; color: var(--text-secondary); flex-shrink: 0; }
.footer-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.footer-main {
  font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.footer-sub {
  font-size: 12px; color: var(--text-secondary); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.footer-chev { font-size: 10px; color: var(--text-secondary); margin-left: 2px; flex-shrink: 0; }
.footer-flyout {
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: 10px;
  padding: 14px 16px; width: 100%; min-width: 0;
  box-shadow: 0 12px 32px rgba(43, 42, 36, .18);
  max-height: min(50vh, 360px); overflow-y: auto;
}
.footer-flyout .eyebrow { margin: 0 0 10px; }
.footer-rule { border: none; border-top: 1px solid var(--sheet-edge); margin: 10px 0; }
.wx-row { display: flex; gap: 14px; align-items: flex-start; }
.wx-row .footer-icon { font-size: 26px; margin-top: 2px; }
.wx-row .footer-main, .wx-row .footer-sub { white-space: normal; }
.margin-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.margin-fact { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; }
.margin-year {
  font-family: var(--serif); font-size: 13px; color: var(--gold);
  margin-top: 1px;
}
.margin-body { font-size: 14px; color: var(--text-primary); line-height: 1.4; }
.margin-body .link-button { font-size: 14px; text-align: left; }
.margin-lib { color: var(--text-secondary); }
@media (max-width: 640px) {
  .footer-icon { font-size: 20px; }
  .footer-main { font-size: 12.5px; }
  .footer-sub { font-size: 11.5px; }
}

/* The journal's controls are under a pill: the dock slides down out of the way (float.js). */
.footer-dock { transition: transform .22s ease, opacity .22s ease; }
html.pills-yield .footer-dock { transform: translateY(calc(100% + 24px)); opacity: 0; }
html.pills-yield .footer-dock, html.pills-yield .footer-dock * { pointer-events: none !important; }
/* So they do for the seal's card: on a phone or a tablet it opens above the nav's dock, inside
   the dock's own layer, where the pills would lie over its details form and its Save. */
html:has(.user-mark-card) .footer-dock { transform: translateY(calc(100% + 24px)); opacity: 0; }
html:has(.user-mark-card) .footer-dock, html:has(.user-mark-card) .footer-dock * { pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { .footer-dock { transition: none; } }