/* Bogen (bog.js): læderomslag, pergamentsider, bogmærker og en side, der vender */
.bog-bg { padding: 8px; }
.bog { position: relative; width: min(100%, 1020px); height: min(calc(100vh - 20px), 690px); height: min(calc(100dvh - 20px), 690px);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 40px 18px 12px; box-sizing: border-box;
  background: linear-gradient(180deg, #7a4426, #5a3016 60%, #4a2610); border: 4px solid #2a160a; box-shadow: 0 0 0 3px #8a5a34 inset, 0 10px 0 rgba(0,0,0,.45);
  color: #3a2616; animation: bog-ind .34s steps(7) both; }
@keyframes bog-ind { from { transform: scale(.82) translateY(40px) rotate(-1.5deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bog::before { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(255,205,120,.35); pointer-events: none; }   /* syning */

.bog-titel { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 3; padding: 1px 22px; background: #2a160a; color: var(--gold, #ffcc4d); border: 2px solid #8a5a34; font-weight: 700; letter-spacing: .06em; white-space: nowrap; font-size: .95em; }
.bog-luk { position: absolute; right: 10px; top: 4px; z-index: 4; }
.bog-faner { position: absolute; left: 20px; top: 5px; z-index: 5; display: flex; gap: 5px; max-width: calc(100% - 330px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; height: 34px; align-items: flex-start; }
.bog-faner::-webkit-scrollbar { display: none; }
.bog-fane { flex: none; position: relative; padding: 4px 14px 3px; height: 24px; box-sizing: border-box; border: 2px solid #2a160a; border-top: 0; background: var(--fane, #c8483a); color: #fff; font: inherit; font-weight: 700; font-size: .82em; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); text-shadow: 0 1px 0 rgba(0,0,0,.45); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); padding-bottom: 6px; line-height: 1; }
.bog-fane:hover, .bog-fane:focus-visible { outline: none; filter: brightness(1.18); }
.bog-fane.paa { height: 32px; box-shadow: none; }

.bog-ark { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; perspective: 2200px; background: #efe0b8; border: 3px solid #2a160a; box-shadow: 0 0 0 3px #c8a868 inset; }
.bog-side { position: relative; min-height: 0; min-width: 0; padding: 18px 24px 34px; box-sizing: border-box; overflow: hidden; background: linear-gradient(90deg, #f6ead0, #f1e2bc); color: #3a2616; }
.bog-venstre { background: linear-gradient(90deg, #f1e2bc 0%, #f6ead0 55%, #e4d0a0 100%); }
.bog-hoejre { background: linear-gradient(90deg, #e4d0a0 0%, #f6ead0 45%, #f1e2bc 100%); }
.bog-fold { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: linear-gradient(90deg, rgba(60,30,10,.35), rgba(60,30,10,.1)); pointer-events: none; z-index: 2; }
.bog-side.bog-tom { background: linear-gradient(90deg, #f1e2bc, #e8d6a8); }
.bog-krop { display: grid; gap: 8px; align-content: start; max-height: 100%; }
.bog-lang .bog-krop { overflow-y: auto; height: calc(100% - 4px); padding-right: 4px; }
.bog-nr { position: absolute; left: 24px; right: 24px; bottom: 8px; display: flex; justify-content: space-between; font-size: .72em; color: #8a6a3a; }
.bog-hoejre .bog-nr { flex-direction: row-reverse; }
.bog-nr b { color: #6a4a22; }

/* siderne i bogen: indholdet er skrevet til mørke vinduer, så det får papirfarver her */
.bog-side .act-h { color: #a02e38; margin: 4px 0 0; border-bottom: 2px solid #c8a868; padding-bottom: 2px; }
.bog-side .qitem, .bog-side .skill, .bog-side .clue { background: rgba(255,255,255,.45); border: 2px solid #c8a868; color: #3a2616; }
.bog-side .qitem.active { border-color: #a02e38; background: rgba(255,240,200,.8); }
.bog-side .qitem.done { opacity: .8; }
.bog-side .qitem.locked { opacity: .5; }
.bog-side .qitem.ekstra .st, .bog-side .qitem .uses { color: #2c4a9c; }
.bog-side .qitem .meta, .bog-side .skill .meta, .bog-side .meta { color: #6a5030; }
.bog-side .qitem b, .bog-side .skill b { color: #3a2616; }
.bog-side .skill .gem { background: #d89a2a; }
.bog-side .skill.no .gem { background: #b8a888; }
.bog-side .empty, .bog-side .task-help { color: #6a5030; margin: 0; }
.bog-side .doc, .bog-side .rbog-page { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #3a2616 !important; }
.bog-side h4 { margin: 0 0 4px; font-size: 1.25em; color: #3a2616; }
.bog-side .tag { font-style: italic; opacity: .8; margin: 0 0 6px; }
.bog-side .eksempel { background: rgba(255,255,255,.55); border-left: 5px solid #a02e38; padding: 8px 12px; margin: 10px 0; font-family: "Courier New", monospace; }
.bog-side .eksempel b { display: block; font-family: var(--font, inherit); color: #a02e38; }
.bog-side .diagram { display: block; width: 100%; max-width: 420px; height: auto; margin: 6px auto 0; }
.bog-side p { margin: 0 0 8px; }

.bog-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bog-taeller { color: #e8c88a; font-size: .85em; }
.bog-pil { font: inherit; font-weight: 700; padding: 6px 16px; background: #d89a2a; color: #2a160a; border: 3px solid #2a160a; box-shadow: 0 3px 0 #2a160a; cursor: pointer; position: relative; top: 0; }
.bog-pil:hover:not(:disabled), .bog-pil:focus-visible { background: #ffcc4d; outline: none; }
.bog-pil:active:not(:disabled) { top: 3px; box-shadow: none; }
.bog-pil:disabled { opacity: .35; cursor: default; }

/* bladet, der vender */
.bog-blad { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; z-index: 6; pointer-events: none; }
.bog-blad-hoejre { left: 50%; transform-origin: left center; }
.bog-blad-venstre { left: 0; transform-origin: right center; }
.bog-blad-for, .bog-blad-bag { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #f3e6c4; }
.bog-blad-bag { transform: rotateY(180deg); }
.bog-blad .bog-kopi { position: absolute; inset: 0; }
.bog-blad-for::after, .bog-blad-bag::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(60,30,10,0), rgba(60,30,10,.18)); }
.bog-blad-hoejre .bog-blad-for::after, .bog-blad-venstre .bog-blad-bag::after { background: linear-gradient(90deg, rgba(60,30,10,.25), rgba(60,30,10,0)); }

@media (max-width: 759px), (max-height: 520px) {
  .bog { padding: 30px 8px 8px; gap: 6px; }
  .bog-ark { grid-template-columns: 1fr; }
  .bog-venstre { grid-column: 1; }
  .bog-hoejre, .bog-fold { display: none; }
  .bog-side { padding: 12px 14px 30px; }
  .bog-titel { display: none; }
  .bog-faner { max-width: calc(100% - 90px); }
  .bog-pil { padding: 5px 10px; }
}
@media (max-height: 520px) { .bog { height: calc(100vh - 12px); padding-top: 28px; } .bog-bg { padding: 4px; } }
@media (prefers-reduced-motion: reduce) { .bog { animation: none; } }

.bog-luk { color: var(--txt, #f4efff); }
.bog-krop.bog-maalt { max-height: none; }