/* memorials directives — full text in DIRECTIVES.md
   1. SSOT — Extend the one that exists. Never a second copy that can disagree.
   2. Caveman comments — Shortest technical line that lands. Why, not what.
   3. No post-mortems — Code says what is, never what it used to be. Git keeps the history.
   end directives */

/* The right-side panel: a takeover on a phone, a drawer at a desk. The shell
   only - what goes inside is the page's. js/flyout.js is its other half, and
   any page that opens one loads both. */
.flyout { position: fixed; inset: 0; z-index: 60; }
/* html as well as body, or iOS keeps scrolling the page under the panel. */
html:has(.flyout:not([hidden])), body:has(.flyout:not([hidden])) { overflow: hidden; }
.flyout__veil { position: absolute; inset: 0; background: rgba(44, 42, 38, .28); touch-action: none; }
.flyout__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 94vw);
  background: var(--color-card); border-left: 1px solid var(--color-rule);
  box-shadow: -18px 0 40px rgba(44, 42, 38, .12);
  display: flex; flex-direction: column;
  animation: flyout-in .32s cubic-bezier(.4, 0, .2, 1);
  font-family: var(--font-work);
}
@keyframes flyout-in { from { transform: translateX(102%); } to { transform: translateX(0); } }
.flyout__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--color-rule);
}
.flyout__title { display: flex; flex-direction: column; gap: 6px; }
.flyout__name { margin: 0; font-family: var(--font-work); font-weight: 600; font-size: 19px; }
.flyout__sub { margin: 0; font-family: var(--font-work); font-size: 15px; line-height: 1.6; color: var(--color-muted-2); }
.flyout__x {
  border: 0; background: transparent; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--color-muted); padding: 2px 6px;
}
.flyout__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.flyout__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 24px; border-top: 1px solid var(--color-rule);
}
.flyout__foot > :only-child { margin-left: auto; }

/* A phone: the panel is the page. */
@media (max-width: 720px) {
  .flyout__panel { width: 100%; border-left: 0; box-shadow: none; }
  .flyout__x { font-size: 26px; padding: 8px 12px; margin: -8px -8px 0 0; }
  .flyout__head { padding-top: max(22px, env(safe-area-inset-top)); }
  .flyout__foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}