/* The keyboard ribbon: a bookmark that stands up out of the foot of the page. (The place to write is the typewriter: typewriter.css.)
   Tapped, it opens the typewriter; pulled up, the dark of the room rises with the finger (ribbon.js). Quiet by default: the book is meant
   to be written on, so it steps aside while the reader writes and comes back when the pen has been lifted for a moment. */
:root { --ribbon-h: calc(46px + env(safe-area-inset-bottom, 0px)); }   /* what stands above the phone's own bar at the foot, and the bar */

#keyboard-button {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 60px;
  height: var(--ribbon-h);
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  border: 0;
  border-radius: 0;
  /* Silk bookmark from the ribbon series: a folded top, gold stitches, a notch where it meets the page. */
  background:
    repeating-linear-gradient(#cfab68 0 1px, transparent 1px 4px) 14px 12px / 1px calc(100% - 18px) no-repeat,
    repeating-linear-gradient(#cfab68 0 1px, transparent 1px 4px) calc(100% - 14px) 12px / 1px calc(100% - 18px) no-repeat,
    linear-gradient(90deg, rgba(5, 4, 3, 0.45), rgba(243, 223, 182, 0.08) 22%, rgba(5, 4, 3, 0.2) 48%, rgba(243, 223, 182, 0.1) 72%, rgba(5, 4, 3, 0.55)),
    #6a3030;
  clip-path: polygon(16% 10%, 50% 0, 84% 10%, 83% 100%, 50% 86%, 17% 100%);
  color: var(--muted);
  z-index: 31;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.92;
  touch-action: none;                     /* a finger that pulls it is not scrolling the page */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 100%;
  transform: translate(-50%, calc(var(--lift, 0px) * -1));
  box-shadow: none;
  filter: drop-shadow(3px 4px 3px rgba(5, 4, 3, 0.55));
  transition: opacity 240ms ease, filter 240ms ease, transform 240ms cubic-bezier(0.3, 0.8, 0.3, 1);
}
#keyboard-button svg { display: none; }
/* the pinch: a small fold at the top of the silk */
#keyboard-button::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -5px;
  border-radius: 0;
  border-top: 1px solid #f3dfb6;
  border-left: 1px solid #f3dfb6;
  background: transparent;
  box-shadow: none;
  transform: rotate(45deg);
}
/* what has been pulled out of the page: a thread from the foot up to the ribbon */
#keyboard-button::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: var(--lift, 0px);
  background: linear-gradient(180deg, rgba(var(--gold-hi-rgb), 0.6), transparent);
  pointer-events: none;
}
#keyboard-button:hover,
#keyboard-button:focus-visible { opacity: 1; --lift: 4px; border-color: rgba(var(--gold-rgb), 0.48); }
#keyboard-button:active { opacity: 1; }
#keyboard-button.is-pulled { opacity: 1; transition: border-color 140ms ease; }          /* it follows the finger, not the clock */
#keyboard-button[hidden] { display: none; }
/* Out of the way while the typewriter is open, while the book is answering, while the reader writes, and while it asks something at the foot. */
html[data-entry="open"] #keyboard-button,
html[data-ritual="seeping"] #keyboard-button,
html[data-ritual="waiting"] #keyboard-button,
html[data-ritual="revealing"] #keyboard-button,
html[data-writing] #keyboard-button,
html:has(#status.visible) #keyboard-button,
html:has(#status.status-recovery) #keyboard-button { opacity: 0; pointer-events: none; }
/* Shown once to a reader who has never been here: it can be pulled. */
@keyframes ribbon-sway {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  16% { transform: translate(-50%, -10px) rotate(-3deg); }
  34% { transform: translate(-50%, -3px) rotate(2.5deg); }
  52% { transform: translate(-50%, -9px) rotate(-2deg); }
  72% { transform: translate(-50%, -2px) rotate(1deg); }
}
#keyboard-button.is-swaying { opacity: 0.95; animation: ribbon-sway 2.6s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { #keyboard-button.is-swaying { animation: none; } }
html[data-theme="light"] #keyboard-button {
  border-radius: 0;
  background:
    repeating-linear-gradient(#8a3a2a 0 1px, transparent 1px 4px) 14px 12px / 1px calc(100% - 18px) no-repeat,
    repeating-linear-gradient(#8a3a2a 0 1px, transparent 1px 4px) calc(100% - 14px) 12px / 1px calc(100% - 18px) no-repeat,
    linear-gradient(90deg, rgba(90, 40, 36, 0.35), rgba(243, 223, 182, 0.2) 40%, rgba(90, 40, 36, 0.28)),
    #8d4a42;
}

/* The dark of the room, rising as the ribbon is pulled; the typewriter fades in over it. */
#ribbon-veil {
  position: fixed;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 60% at 16% 0%, rgba(var(--gold-hi-rgb), 0.1), transparent 60%),
    var(--void);
  transition: opacity 260ms ease;
}
html[data-pull] #ribbon-veil { opacity: calc(var(--pull, 0) * 0.94); transition: none; }
#ribbon-veil.is-on { opacity: 1; transition: opacity 140ms ease; }

/* A line in the margin: the book coming back to something, or asking if it may remember. It sits at
   the left edge in the book's hand; the words let the pen through, only the small answers take touches. */
#margin-note {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: 5.6rem;
  max-width: min(72vw, 21rem);
  z-index: 28;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 900ms ease, transform 900ms ease, visibility 0s linear 900ms;
  pointer-events: none;
}
#margin-note[data-open="1"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 1400ms ease 300ms, transform 1400ms ease 300ms, visibility 0s;
}
#margin-note .margin-text {
  margin: 0 0 0.55rem;
  font: 1.05rem/1.6 var(--font-hand);
  color: var(--reply-ink);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
#margin-note .margin-actions { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
#margin-note[data-open="1"] .margin-actions { pointer-events: auto; }
#margin-note button {
  padding: 0.3rem 0;
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.32);
  background: none;
  color: var(--status);
  font: 0.86rem/1.4 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#margin-note button:hover,
#margin-note button:focus-visible { color: var(--reply-ink); border-bottom-color: rgba(var(--gold-hi-rgb), 0.8); }
@media (prefers-reduced-motion: reduce) {
  #margin-note, #margin-note[data-open="1"] { transition: none; transform: none; }
}