/* Phase A: pothi (palm-leaf manuscript) presentation layer.
   A fullscreen stage; wide horizontal leaves bound by a top cord, lifted
   like a calendar. Same reading JSON as the modern view. */

#bookStage {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(12, 10, 6, 0.92);
  align-items: center; justify-content: center; flex-direction: column;
}
#bookStage.open { display: flex; }

.bookWrap { position: relative; width: min(980px, 95vw); height: min(640px, 84vh);
  perspective: 1800px; }

/* ---- the leaf ---- */
.leaf {
  position: absolute; inset: 0; border-radius: 6px;
  background-color: #e7d9b0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.26 0 0 0 0 0.19 0 0 0 0 0.07 0 0 0 0.055 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  box-shadow: 0 1px 0 #c9b783 inset, 0 -2px 0 #cbb987 inset, 0 10px 30px rgba(0,0,0,.5);
  color: #3a2c17;
  transform-origin: 50% -4%;
  transition: transform .65s cubic-bezier(.55,.06,.35,1), opacity .5s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.leaf.turned { transform: rotateX(-102deg); opacity: 0; pointer-events: none; }
.leaf.ahead { visibility: hidden; }
.leaf.current { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .leaf { transition: none; } }

/* cord holes of a real pothi */
.leaf::before, .leaf::after {
  content: ""; position: absolute; top: 14px; width: 13px; height: 13px;
  border-radius: 50%; background: #241c0e;
  box-shadow: 0 0 0 3px #d8c795, 0 0 0 4px #b8a26b;
}
.leaf::before { left: 8%; }
.leaf::after { right: 8%; }

.leafBody { flex: 1; overflow-y: auto; padding: 44px 64px 30px;
  font-family: Georgia, "Times New Roman", serif; line-height: 1.65; }
.leafBody::-webkit-scrollbar { width: 8px; }
.leafBody::-webkit-scrollbar-thumb { background: #c4b184; border-radius: 4px; }

.leafKicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #8a7550; margin: 0 0 4px; }
.leafTitle { font-size: 24px; margin: 0 0 14px; font-weight: 400;
  border-bottom: 1px solid #b9a771; padding-bottom: 8px; }
.leafTitle .dev { font-size: 17px; color: #9c3b1e; margin-left: 10px; }
.inkMuted { color: #7a6748; }
.ochre { color: #9c3b1e; }

/* two-column: prose + marginalia, like a commentary */
.leafCols { display: grid; grid-template-columns: 1fr 200px; gap: 26px; }
.margina { border-left: 1px solid #c3b183; padding-left: 14px; font-size: 12px;
  color: #7a6748; }
.margina p { margin: 0 0 9px; }
sup.mcite { color: #9c3b1e; font-size: 11px; }

/* domain gauge: an inked line with a diamond marker */
.gauge { position: relative; height: 14px; margin: 6px 0 12px; }
.gauge .line { position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: #a89264; }
.gauge .mid { position: absolute; top: 3px; left: 50%; width: 1px; height: 9px; background: #a89264; }
.gauge .mark { position: absolute; top: 3px; width: 9px; height: 9px; background: #9c3b1e;
  transform: translateX(-50%) rotate(45deg); }
.gauge .cap { position: absolute; top: -6px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #a89264; }

.domBlock { margin-bottom: 22px; }
.domBlock h3 { font-size: 17px; margin: 0 0 2px; text-transform: capitalize; font-weight: 400; }
.domBlock .verdict { font-size: 12.5px; color: #8a7550; font-style: italic; }
.domProse { font-size: 14.5px; margin: 6px 0 0; }

/* yoga medallions */
.seals { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 20px; }
.seal { width: 118px; height: 118px; border-radius: 50%; border: 2px solid #9c3b1e;
  box-shadow: 0 0 0 5px #e7d9b0 inset, 0 0 0 6px #9c3b1e inset;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10px; }
.seal b { font-size: 14px; font-weight: 600; color: #6d2a13; }
.seal span { font-size: 10.5px; color: #8a7550; }
.inkChips { font-size: 13px; color: #6a5a3d; }
.inkChips i { font-style: normal; border: 1px solid #b9a771; border-radius: 10px;
  padding: 1px 9px; margin: 0 6px 6px 0; display: inline-block; }

/* inked tables */
.inkTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.inkTable th { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #8a7550; text-align: left; border-bottom: 1px solid #b9a771; padding: 4px 8px 4px 0; }
.inkTable td { padding: 4px 8px 4px 0; border-bottom: 1px dotted #cdbc8d;
  color: #3a2c17; font-size: 13px; }
.leaf table td, .leaf table th { background: none; }

/* dasha strip in ink */
.inkStrip { display: flex; gap: 4px; margin: 8px 0 4px; }
.inkStrip div { flex: 1; text-align: center; border: 1px solid #b9a771; border-radius: 4px;
  padding: 5px 2px 4px; font-size: 10.5px; color: #7a6748; }
.inkStrip div b { display: block; font-size: 12.5px; color: #3a2c17; }
.inkStrip div.cur { border-color: #9c3b1e; box-shadow: 0 0 0 1px #9c3b1e; }
.inkStrip div.cur b { color: #9c3b1e; }

/* the chart, re-inked */
.leafChartWrap { display: flex; gap: 30px; align-items: center; }
.leafChartSvg { width: 380px; max-width: 46%; }
.leafChartSvg .frame { stroke: #6d5a35; fill: none; stroke-width: 1.1; }
.leafChartSvg .frame.outer { stroke-width: 1.8; }
.leafChartSvg .h1fill { fill: rgba(156,59,30,0.07); stroke: none; }
.leafChartSvg .plDeg { fill: #8a7550; font-size: 7.5px; }
.leafChartSvg .pl { font-size: 12.5px; }
.leafChartSvg .rasi { fill: #8a7550; font-size: 10px; }
.leafChartSvg .sav { fill: #a89264; font-size: 8px; }
.leafChartSvg .lagnaMark { fill: #9c3b1e; font-weight: 700; font-size: 10px; }
.leafChartSvg .pl { fill: #3a2c17; font-weight: 700; }
.leafChartSvg .pl.dim { fill: #9c3b1e; font-weight: 400; }
@keyframes inkdraw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
.leaf.current .leafChartSvg .frame { stroke-dasharray: 1600;
  animation: inkdraw 1.6s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .leaf.current .leafChartSvg .frame { animation: none; stroke-dasharray: none; } }

/* the celestial plate */
.plateWrap { display: flex; justify-content: center; perspective: 1100px; }
.plateTilt { width: min(430px, 62vh); transform: rotateX(14deg);
  transition: transform .5s ease; }
.plateTilt:hover { transform: rotateX(4deg); }
@media (prefers-reduced-motion: reduce) {
  .plateTilt, .plateTilt:hover { transform: none; transition: none; } }
.plateSvg { width: 100%; height: auto; display: block; }
.plateTilt { position: relative; }
canvas.plateFx { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; }
.plateLegend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  font-size: 11.5px; color: #7a6748; margin-top: 8px; }
.plateLegend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 5px; vertical-align: -1px; font-style: normal; }
.plateLegend .lgNatal { background: #3a2c17; }
.plateLegend .lgTransit { background: #e7d9b0; border: 1.5px solid #9c3b1e; }
.plateLegend .lgSav { background: #a89264; border-radius: 2px; }
.plateLegend .lgJanma { background: #9c3b1e; opacity: .5; }
.plateLegend .lgUpa { background: none; border: 1px solid #8a7550; }

/* inked time scrubber on the plate leaf */
.scrubInk { display: flex; gap: 8px; justify-content: center; align-items: center;
  margin: 10px 0 8px; font-size: 12.5px; color: #6a5a3d; }
.scrubInk span { min-width: 150px; text-align: center; font-style: italic; }
.scrubInk button { background: none; border: 1px solid #b9a771; color: #6a5a3d;
  font-family: inherit; font-size: 11.5px; padding: 4px 12px; border-radius: 4px;
  cursor: pointer; }
.scrubInk button:hover { border-color: #9c3b1e; color: #9c3b1e; }

/* wooden cover */
.leaf.wood { background-color: #4a3320;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='80'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.28' numOctaves='3'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.07 0 0 0 0 0.02 0 0 0 0.5 0'/></filter><rect width='300' height='80' filter='url(%23w)'/></svg>");
  color: #e2ce9f; }
.leaf.wood .leafBody { display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; }
.coverDev { font-size: 44px; color: #d9b96a; margin: 0 0 6px; }
.coverTitle { font-size: 26px; letter-spacing: .12em; margin: 0 0 4px; color: #e2ce9f; }
.coverSub { font-size: 13px; color: #b39a63; margin: 0 0 26px; }
.coverBirth { font-size: 14.5px; color: #d8c48f; border-top: 1px solid #6d5230;
  border-bottom: 1px solid #6d5230; padding: 10px 26px; }
.coverHint { margin-top: 30px; font-size: 12px; color: #8f7746; letter-spacing: .18em;
  text-transform: uppercase; }

/* sealed sensitive leaf */
.knot { text-align: center; margin: 12px 0 18px; }
.waxNote { max-width: 520px; margin: 0 auto; font-size: 13.5px; color: #6a5a3d;
  font-style: italic; }
.untieBtn { margin-top: 18px; background: none; border: 1px solid #9c3b1e; color: #9c3b1e;
  font-family: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 22px; border-radius: 4px; cursor: pointer; }
.untieBtn:hover { background: #9c3b1e; color: #e7d9b0; }

/* stage chrome */
.bookBar { position: relative; width: min(980px, 95vw); display: flex; justify-content: space-between;
  align-items: center; margin-top: 14px; color: #b8a26b; font-size: 12.5px;
  font-family: Georgia, serif; letter-spacing: .06em; }
.bookBar button { background: none; border: 1px solid #6d5a35; color: #cbb987;
  font-family: inherit; font-size: 12.5px; padding: 6px 16px; border-radius: 4px;
  cursor: pointer; }
.bookBar button:hover { border-color: #cbb987; }
.bookNav { display: flex; gap: 8px; align-items: center; }

/* ribbon bookmark = current dasha lord */
.ribbon { position: absolute; top: -2px; right: 12%; width: 26px; height: 74px;
  z-index: 40; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
.ribbon:hover { height: 86px; transition: height .2s; }
.ribbon title { display: none; }

@media (max-width: 760px) {
  .bookWrap { height: 88vh; }
  .leafBody { padding: 40px 26px 22px; }
  .leafCols { grid-template-columns: 1fr; }
  .margina { border-left: none; border-top: 1px solid #c3b183; padding: 10px 0 0; }
  .leafChartWrap { flex-direction: column; }
  .leafChartSvg { max-width: 90%; }
}