/* ============================================================
   The visitor's guide — the panel the ghost talks through.

   It is meant to look like a page torn from the same sketchbook
   he was drawn in: laid paper, a pencil rule, his words in the
   album's serif and the visitor's in a plainer hand.
   ============================================================ */

#guide{
  position:fixed; z-index:300; left:0; top:0;
  width:min(380px, calc(100vw - 28px));
  background:#fdfbf5;
  border:1px solid rgba(34,26,18,.24);
  border-radius:3px;
  box-shadow:0 18px 48px rgba(34,26,18,.22), 0 2px 6px rgba(34,26,18,.10);
  font-family:var(--body, Georgia, serif);
  color:#2b2723;
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  display:flex; flex-direction:column;
  max-height:min(72vh, 560px);
}
#guide.open{opacity:1; transform:none; pointer-events:auto}
#guide[hidden]{display:none}

/* a hairline of the album's gold, as on the plates */
#guide::before{
  content:''; position:absolute; inset:3px; border:1px solid rgba(198,158,74,.42);
  border-radius:2px; pointer-events:none;
}

.g-head{
  display:flex; align-items:center; gap:10px;
  padding:13px 14px 10px; border-bottom:1px solid rgba(34,26,18,.13);
}
.g-head h3{
  margin:0; font-family:var(--display, Georgia, serif); font-weight:500;
  font-size:16px; letter-spacing:.01em; flex:1;
}
.g-x{
  border:0; background:none; cursor:pointer; font-size:19px; line-height:1;
  color:#6b5d45; padding:2px 4px; border-radius:2px;
}
.g-x:hover{color:#241f1a}
.g-x:focus-visible{outline:2px solid rgba(198,158,74,.8); outline-offset:2px}

.g-talk{
  padding:12px 14px 4px; overflow-y:auto; flex:1; min-height:64px;
  scrollbar-width:thin;
}
.g-line{margin:0 0 12px; font-size:15px; line-height:1.62; max-width:100%}
.g-line.him{font-family:var(--display, Georgia, serif); color:#241f1a}
.g-line.you{
  font-size:14px; color:#5d5346; padding-left:12px;
  border-left:2px solid rgba(198,158,74,.55);
}
.g-line.note{font-size:13px; color:#7a6d59; font-style:italic}

/* he is thinking: three pencil dots */
.g-dots span{
  display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%;
  background:#8a7c66; animation:gdot 1.05s ease-in-out infinite;
}
.g-dots span:nth-child(2){animation-delay:.16s}
.g-dots span:nth-child(3){animation-delay:.32s}
@keyframes gdot{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:.9;transform:translateY(-3px)}}

.g-chips{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px}
.g-chip{
  font-family:var(--small, system-ui); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:#5d5346; cursor:pointer;
  background:#f6f0e2; border:1px solid rgba(34,26,18,.18); border-radius:2px;
  padding:6px 9px; line-height:1.25; text-align:left;
}
.g-chip:hover{background:#efe6d2; color:#241f1a}
.g-chip:focus-visible{outline:2px solid rgba(198,158,74,.8); outline-offset:2px}

.g-foot{
  display:flex; gap:8px; padding:10px 12px 12px;
  border-top:1px solid rgba(34,26,18,.13); align-items:flex-end;
}
.g-in{
  flex:1; font:inherit; font-size:14.5px; color:#2b2723; resize:none;
  background:#fffdf8; border:1px solid rgba(34,26,18,.22); border-radius:2px;
  padding:8px 9px; min-height:38px; max-height:96px; line-height:1.45;
}
.g-in:focus{outline:none; border-color:rgba(198,158,74,.85);
  box-shadow:0 0 0 2px rgba(198,158,74,.20)}
.g-go{
  font-family:var(--small, system-ui); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  background:#5c1a22; color:#f6efe0; border:1px solid #4a141b; border-radius:2px;
  padding:10px 13px;
}
.g-go:hover{background:#6d2029}
.g-go[disabled]{opacity:.45; cursor:default}
.g-go:focus-visible{outline:2px solid rgba(198,158,74,.9); outline-offset:2px}

.g-consent{padding:2px 14px 12px; font-size:12.5px; line-height:1.6; color:#6b5d45}
.g-consent .row{display:flex; gap:8px; margin-top:9px}
.g-consent .row button{
  font-family:var(--small, system-ui); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; cursor:pointer; padding:8px 11px; border-radius:2px;
}
.g-yes{background:#5c1a22; color:#f6efe0; border:1px solid #4a141b}
.g-no{background:#fdfbf5; color:#5d5346; border:1px solid rgba(34,26,18,.22)}

/* the little "ask me" tag that teaches the ghost is clickable, once */
#guideTag{
  position:fixed; z-index:299; pointer-events:none;
  font-family:var(--small, system-ui); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:#5d5346;
  background:rgba(253,251,245,.94); border:1px solid rgba(34,26,18,.20);
  border-radius:2px; padding:4px 7px; white-space:nowrap;
  opacity:0; transform:translateY(4px); transition:opacity .4s ease, transform .4s ease;
}
#guideTag.on{opacity:.92; transform:none}

/* he can be spoken to */
.pghost.askable{pointer-events:auto; cursor:help}

@media (max-width:520px){
  #guide{
    left:8px !important; right:8px; width:auto;
    top:auto !important; bottom:8px; max-height:66vh;
  }
}
@media (prefers-reduced-motion:reduce){
  #guide{transition:none}
  .g-dots span{animation:none; opacity:.6}
}
@media print{ #guide, #guideTag{display:none !important} }