/* GILBERT POSITION EDITOR V2 */

#gb2-book-zone {
  position:absolute;
  z-index:7;
  display:block;
  box-sizing:border-box;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
  text-decoration:none;
}

#gb2-book-zone:focus-visible {
  outline:4px solid #ffe176;
  outline-offset:3px;
}

#gb2-book-zone #gb2-zone-label,
#gb2-book-zone #gb2-resize {
  display:none;
}

html.gb2-editing #gb2-book-zone {
  background:rgba(255,225,55,.23);
  border:3px dashed #ffe96c;
  box-shadow:0 0 0 2px #6c281d,0 0 22px #ffd94f;
  cursor:grab;
  touch-action:none;
}

html.gb2-editing #gb2-zone-label {
  display:block;
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  font:700 12px Arial,sans-serif;
  white-space:nowrap;
  max-width:100%;
  padding:7px 9px;
  color:white;
  background:#762d20;
  border-radius:7px;
  pointer-events:none;
}

html.gb2-editing #gb2-resize {
  display:grid;
  place-items:center;
  position:absolute;
  right:-13px;
  bottom:-13px;
  width:30px;
  height:30px;
  border-radius:8px;
  border:3px solid #fff2a2;
  color:white;
  background:#81382c;
  font:bold 20px Arial,sans-serif;
  cursor:nwse-resize;
  touch-action:none;
}

#gb2-editor {
  display:none;
  position:fixed;
  z-index:2147483000;
  right:18px;
  top:18px;
  width:min(340px,calc(100vw - 36px));
  box-sizing:border-box;
  padding:18px;
  border:3px solid #e1b85c;
  border-radius:16px;
  background:#fff8e6;
  color:#492619;
  box-shadow:0 15px 45px #0008;
  font-family:Arial,sans-serif;
}

html.gb2-editing #gb2-editor { display:block !important; }

#gb2-editor h2 {
  margin:0 0 10px;
  font:bold 21px Arial,sans-serif;
  color:#763a25;
}

#gb2-editor p { font:13px/1.5 Arial,sans-serif; }

#gb2-readout {
  padding:10px;
  margin:12px 0;
  background:#f0e2c6;
  border-radius:8px;
  font:12px/1.5 monospace;
  white-space:pre-line;
}

.gb2-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.gb2-buttons button {
  padding:11px 7px;
  border:0;
  border-radius:8px;
  color:white;
  background:#753325;
  cursor:pointer;
  font:bold 12px Arial,sans-serif;
}

#gb2-save { background:#227145; }

#gb2-status {
  font-weight:bold !important;
  color:#145a34;
}

.hero .hero-actions {
  position:absolute;
  z-index:10;
}

@media(max-width:650px) {
  #gb2-editor {
    top:auto;
    right:10px;
    bottom:10px;
    padding:12px;
  }
}


/* GILBERT V3 CLICK TO READ */

/* Elegant storybook title attached to the clickable cover. */
#gb2-book-zone #gb2-read-label {
    display: block;
    position: absolute;
    z-index: 4;
    top: var(--gb3-label-top, 76%);
    left: 50%;
    width: max-content;
    max-width: 98%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;

    color: #ffdf84;
    font-family: Georgia, "Palatino Linotype", Palatino, serif;
    font-weight: 900;
    font-size: clamp(12px, 1.65vw, 26px);
    line-height: 1.1;
    letter-spacing: .035em;
    white-space: nowrap;

    -webkit-text-stroke: .45px #7b381a;
    text-shadow:
        0 1px 0 #fff2a6,
        1px 2px 0 #aa6129,
        2px 3px 0 #64241a,
        3px 4px 5px #210c0bcc,
        0 0 14px #ffca5577;

    pointer-events: none;
    user-select: none;

    animation: gb3-storybook-glow 3.8s ease-in-out infinite;
}

@keyframes gb3-storybook-glow {
    0%, 100% {
        filter: drop-shadow(0 0 2px #ffd26d55);
    }
    50% {
        filter: drop-shadow(0 0 8px #ffe09bcb);
    }
}

/* Editor-mode title stays visible while positioning. */
html.gb2-editing #gb2-read-label {
    outline: 1px dashed #ffe58a;
    outline-offset: 5px;
}

#gb3-label-controls {
    display: none;
    padding: 10px;
    margin: 9px 0;
    border-radius: 9px;
    background: #f2e5ce;
    font: 12px Arial, sans-serif;
}

html.gb2-editing #gb3-label-controls {
    display: block;
}

#gb3-label-controls label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

#gb3-label-height {
    width: 83%;
    accent-color: #8c4229;
    vertical-align: middle;
}

#gb3-label-value {
    font: bold 12px Arial, sans-serif;
}

@media (max-width:650px) {
    #gb2-book-zone #gb2-read-label {
        font-size: clamp(10px, 3vw, 19px);
    }
}

@media (prefers-reduced-motion:reduce) {
    #gb2-book-zone #gb2-read-label {
        animation: none !important;
    }
}