/* Single-page flip-book: nav bar + 3D page-turn stage.
   Loaded only on pages using <panchangcalendar flipbook="1" /> — never on a
   standalone month page. Works with panchang-calendar.css, not instead of it. */

.pc-flipbook { width:794px; max-width:100%; margin:16px auto; }

/* Matches panchang-calendar.css's own desktop-widen breakpoint (same 1060px threshold,
   same 1040px target) -- this outer wrapper is what actually bounds the card's width
   on screen when it's shown as a flip-book, so both have to widen together or the
   .panchang-cal inside stays capped at the flipbook's (unwidened) box. Screen-only;
   print is handled separately below and already ignores this wrapper's width. */
@media screen and (min-width: 1060px) {
	.pc-flipbook { width:1040px; }
}

.pc-flip-nav {
	display:flex; align-items:center; justify-content:center; gap:10px;
	flex-wrap:wrap; margin-bottom:10px;
}
.pc-flip-btn {
	flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(124,20,48,.3);
	background:#F7EEDA; color:#7C1430; font-size:15px; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 1px 3px rgba(0,0,0,.15); transition:background .15s, transform .15s, opacity .15s;
}
.pc-flip-btn:hover:not(:disabled) { background:#EEE0BC; }
.pc-flip-btn:active:not(:disabled) { transform:scale(.92); }
.pc-flip-btn:disabled { opacity:.35; cursor:default; }
.pc-flip-jump {
	flex:1 1 220px; max-width:320px; min-width:0; height:40px; padding:0 12px;
	border-radius:20px; border:1px solid rgba(124,20,48,.3); background:#F7EEDA; color:#2A1A12;
	font-family:"Mukta",system-ui,sans-serif; font-size:14px; font-weight:600; text-align:center;
	text-align-last:center; cursor:pointer;
}

/* Second nav row: year picker + "Download Year" (opens the browser print dialog so
   the visitor can save the whole year as a PDF). Smaller/quieter than the month-jump
   row above since it's a secondary action. */
.pc-flip-nav-download { margin-top:-4px; margin-bottom:14px; }
.pc-flip-year {
	flex:0 1 110px; height:34px; padding:0 10px;
	border-radius:17px; border:1px solid rgba(124,20,48,.3); background:#FBF6EA; color:#2A1A12;
	font-family:"Mukta",system-ui,sans-serif; font-size:13px; font-weight:600; text-align:center;
	text-align-last:center; cursor:pointer;
}
.pc-flip-btn-wide {
	width:auto; border-radius:17px; height:34px; padding:0 16px; gap:6px;
	font-family:"Mukta",system-ui,sans-serif; font-size:13px; font-weight:600;
}

.pc-flip-stage {
	position:relative; width:100%; perspective:2200px; perspective-origin:50% 50%;
	transition:height .25s ease;
}
.pc-flip-page {
	position:absolute; top:0; left:0; width:100%;
	backface-visibility:hidden; transform-style:preserve-3d;
	transition:transform .55s cubic-bezier(.4,.1,.2,1), opacity .4s ease;
	will-change:transform, opacity;
}
.pc-flip-page .panchang-cal { margin:0 auto; } /* stage already centers/sizes the page */

/* Swipe affordance hint on touch devices */
@media (hover:none) and (pointer:coarse) {
	.pc-flip-stage { touch-action:pan-y; }
}

@media (max-width: 480px) {
	.pc-flip-btn { width:36px; height:36px; font-size:13px; }
	.pc-flip-jump { height:36px; font-size:13px; flex-basis:160px; }
	.pc-flip-nav { gap:6px; }
	.pc-flip-year { flex-basis:90px; height:32px; font-size:12px; }
	.pc-flip-btn-wide { height:32px; padding:0 12px; font-size:12px; }
}

/* Printing: show every month, one per printed page, instead of just whichever is on
   screen. The nav bar and 3D stage are screen-only furniture. */
@media print {
	/* The flip-book is normally embedded partway down a wiki page — header/logo, a
	   sidebar, the "Tools" menu, a "PDF Download" box, the "Listen to this article"
	   bar, etc. all sit above and around it, and on a Bootstrap-based skin that
	   surrounding markup can also include a fixed-width centered container and a
	   positioned ancestor (used for in-page anchors). None of that is the
	   extension's own markup, so it can't be targeted by class, and a plain
	   visibility+position:absolute trick isn't enough to escape it either — the
	   absolute positioning still resolves against whichever ancestor happens to be
	   positioned, not the physical page, which is what printed the calendar inside
	   a narrow, off-center column instead of a mostly-blank page. So the isolation
	   now happens in JS instead (panchang-calendar-flip.js, moveForPrint(),
	   triggered on beforeprint): every .pc-flipbook is detached and reattached
	   directly under <body> just before printing, and moved back after. With that
	   done, this stylesheet only needs to hide the flipbook's new body-level
	   siblings — no visibility/position trickery, and nothing here depends on the
	   host skin's specific markup. */
	/* The 125%/zoom:0.8 scaling math from the previous version assumed it knew the
	   page width and got it wrong (real Chrome print output clipped the header even
	   though the same box measured as fitting) — this redesign dropped zoom and
	   sized the card at width:100% instead, which adapts to whatever the real page
	   width is. Height has to follow the same rule: an earlier version of this fix
	   pinned .pc-flip-page to a literal 277mm (A4's content height after a 10mm
	   margin) — the same mistake as the zoom math, just on the other axis. Visitors
	   aren't all printing A4: a print dialog defaulting to A3 (or any size other
	   than what's hardcoded here) left a third of the page blank below the card.
	   100vh is the page-height equivalent of width:100% — it tracks the real
	   printable page height (inside the @page margin below) whatever size that
	   turns out to be, A4, A3, Letter, or anything else. margin is left in @page
	   since nothing here found reason to doubt it; size is deliberately not set,
	   since the one time this stylesheet asserted a size, the visitor's print
	   dialog used a different one anyway. */
	@page { margin:10mm; }

	html, body { margin:0 !important; padding:0 !important; height:100%; }
	body > *:not(.pc-flipbook) { display:none !important; }
	.pc-flipbook {
		position:static !important;
		width:100% !important; max-width:none !important; margin:0 !important;
	}

	.pc-flip-nav { display:none !important; }
	.pc-flip-stage { height:auto !important; position:static !important; perspective:none !important; }
	.pc-flip-page {
		position:static !important;
		display:block !important;
		transform:none !important;
		opacity:1 !important;
		width:100%;
		/* One page, exactly — this is what lets the grid below fill the page
		   instead of sitting in a short card with blank space underneath, and
		   what keeps a 6-week month from being taller than one sheet without
		   needing zoom to shrink it. 100vh (not a fixed mm figure) so this is
		   still exactly right whatever paper size the page turns out to be. */
		height:100vh;
		overflow:hidden;
		page-break-after:always;
		break-after:page;
		page-break-inside:avoid;
		break-inside:avoid;
	}
	.pc-flip-page:last-child { page-break-after:auto; break-after:auto; }

	/* Fill the printable page edge to edge at natural (unzoomed) size — verified
	   against real print-to-PDF output, including against a Bootstrap-style
	   sidebar+column host layout (the case that needed the beforeprint
	   reparenting above): every month lands on one page, full width, header text
	   intact, no overflow. */
	.pc-flip-page .panchang-cal {
		width:100% !important; max-width:none !important; margin:0 !important; zoom:1 !important;
		height:100%; display:flex; flex-direction:column;
	}
	.pc-flip-page .panchang-cal .pc-header,
	.pc-flip-page .panchang-cal .pc-footer { flex-shrink:0; }
	.pc-flip-page .panchang-cal .pc-body { flex:1; display:flex; flex-direction:column; min-height:0; padding-bottom:8px; }
	/* The right-aligned brand text measured as fitting under the old zoom-based
	   layout and still came out clipped in real print output — so rather than
	   trust the math again, give it an explicit escape hatch: if it ever doesn't
	   fit, it ellipsizes instead of silently overflowing past the page edge. */
	.pc-flip-page .panchang-cal .pc-topline { flex-wrap:nowrap; }
	.pc-flip-page .panchang-cal .pc-topline-brand { min-width:0; overflow:hidden; }
	.pc-flip-page .panchang-cal .pc-topline-brand > span:last-child {
		overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
	}
	/* Same centered/big print logo as the standalone page (panchang-calendar.css) --
	   repeated here (2026-11-11) because these .pc-flip-page-scoped selectors are more
	   specific than that file's plain .panchang-cal ones and would otherwise win.
	   See panchang-calendar.css for why the badge is position:absolute (keeps the
	   logo centered on the full header width while "Calendar" stays flex-end) and
	   why the white background is repeated with !important. */
	.pc-flip-page .panchang-cal .pc-topline { position:relative; justify-content:flex-end; min-height:76px; margin-bottom:10px; order:-1; }
	.pc-flip-page .panchang-cal .pc-topline-logo-badge {
		position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
		background:#ffffff !important; padding:8px 20px;
	}
	.pc-flip-page .panchang-cal .pc-topline-logo-img { height:56px; }
	/* pc-title-row (2026-11-11, panchang-calendar.css) put .pc-topline and .pc-title side
	   by side on screen -- print keeps the stacked layout above, so the row goes back to
	   a plain full-width column here too, with order:-1 above restoring the logo/"Calendar"
	   row to the top regardless of its new DOM position. See panchang-calendar.css for
	   the full explanation; repeated here because these .pc-flip-page-scoped selectors
	   are more specific than that file's plain .panchang-cal ones and would otherwise win. */
	.pc-flip-page .panchang-cal .pc-title-row { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; margin-bottom:0; }
	.pc-flip-page .panchang-cal .pc-title { margin-bottom:5px; }

	/* .pc-view-desktop sits between .pc-body and .pc-gridwrap (panchang-calendar.css
	   forces it to display:block for print) — without passing flex:1 through it
	   too, the chain below breaks and .pc-gridwrap has nothing to grow into. */
	.pc-flip-page .panchang-cal .pc-view-desktop { flex:1; display:flex !important; flex-direction:column; min-height:0; }
	/* Festival list moves below the grid, full width, instead of a narrow side
	   column — easier to read as an actual list, and it frees up the grid's full
	   width for the day cells instead of squeezing them to make room beside it. */
	.pc-flip-page .panchang-cal .pc-gridwrap {
		flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; align-items:stretch;
	}
	/* The grid takes whatever height the sidebar (below) doesn't need, and its 7
	   weekday rows share that space evenly — this is what actually fills the
	   page instead of leaving a half-empty sheet: a short month's rows just come
	   out a little taller, rather than the card stopping partway down the page. */
	.pc-flip-page .panchang-cal .pc-grid {
		flex:1; min-height:0;
		grid-template-rows:repeat(7, minmax(0, 1fr)) !important;
	}
	.pc-flip-page .panchang-cal .pc-wdlabel { padding:1px; }
	/* Cell content is sized for a natural ~150px row; a filled page can compress
	   rows below that (more so for a 6-week month). Clip rather than let a
	   cell's content spill into the row below it, and cap how many lines a long
	   festival list can claim so one busy day doesn't blow out the whole row —
	   its full list is still in the legend below, unabridged.
	   height+max-height (not just overflow:hidden) matter here, not just as
	   belt-and-braces: without an EXPLICIT box height, Chrome's print-to-PDF
	   engine was measured (2026-11-02) to size a grid row's cells from their
	   unclipped natural content instead of the row's actual track height once
	   a page is small enough (A5) that real clipping is needed — spilling
	   whole rows of text over each other in the printed PDF even though the
	   exact same markup/CSS renders clipped and correct in an ordinary
	   screenshot. Pinning the box to the row's own height (100%, which is what
	   align-items:stretch already computes it to) sidesteps that engine bug
	   entirely, at every page size, not just A5. */
	.pc-flip-page .panchang-cal .pc-cell { overflow:hidden; height:100%; max-height:100%; }
	/* Square, borderless cells for print only (2026-11-02) -- screen keeps the rounded
	   corners and hairline border (panchang-calendar.css), but in real printed-PDF
	   output a rounded-corner element that also has a stroked border gets flattened by
	   Chrome's print engine into its own small raster image PER CELL -- confirmed by
	   inspecting a generated PDF's internal objects: removing just these two properties
	   collapsed ~30 per-page raster/soft-mask objects back down to plain vector fills,
	   worth roughly a sixth of a page's total size, on every page of a multi-month
	   download. The grid's own gap plus each cell's background tint (Sunday/major/has-
	   festival shading) still separate the cells without a drawn line around each one. */
	.pc-flip-page .panchang-cal .pc-cell,
	.pc-flip-page .panchang-cal .pc-wdlabel,
	.pc-flip-page .panchang-cal .pc-badge,
	.pc-flip-page .panchang-cal .pc-cell-major { border-radius:0 !important; }
	.pc-flip-page .panchang-cal .pc-cell,
	.pc-flip-page .panchang-cal .pc-cell-major { border:none !important; box-shadow:none !important; }
	.pc-flip-page .panchang-cal .pc-festivals {
		display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
	}
	.pc-flip-page .panchang-cal .pc-yk { display:none; } /* yoga/karana: lowest-value line, first to drop under a compressed row */

	/* Compact mode: added to <html> only when A5 is the chosen print size (see
	   applyPrintPageSize() in panchang-calendar-flip.js). A5's 7-row grid
	   leaves under 7mm per row -- measured (2026-11-02) as only enough room
	   for a date number by itself; trying to additionally fit even just the
	   nakshatra abbreviation needed shrinking the date past legible (~11px)
	   and still only left room for the nakshatra's icon, not its text. Rather
	   than ship that half-clipped look, A5 shows a clean date-only grid at a
	   comfortably readable number size — the same trade-off plenty of printed
	   pocket calendars make. Nothing is actually lost: the Vrat & Tyohar
	   legend below still lists every festival in full at every page size, so
	   A4/A3 printers wanting the per-day nakshatra/tithi detail are unaffected. */
	html.pc-print-compact .pc-flip-page .panchang-cal .pc-day { font-size:18px; }
	html.pc-print-compact .pc-flip-page .panchang-cal .pc-nak,
	html.pc-print-compact .pc-flip-page .panchang-cal .pc-nak-hi,
	html.pc-print-compact .pc-flip-page .panchang-cal .pc-subtime,
	html.pc-print-compact .pc-flip-page .panchang-cal .pc-tithi,
	html.pc-print-compact .pc-flip-page .panchang-cal .pc-festivals { display:none; }

	.pc-flip-page .panchang-cal .pc-sidebar {
		width:100% !important; flex-shrink:0; max-height:none;
	}
	/* Newspaper-style columns: full page width now available, so a month with
	   many festivals stays a short, wide block instead of a tall single column
	   eating into the grid's share of the page. */
	.pc-flip-page .panchang-cal .pc-sidebar-list {
		column-count:3; column-gap:18px;
	}
	.pc-flip-page .panchang-cal .pc-legend-row { break-inside:avoid; -webkit-column-break-inside:avoid; }

	/* "Download Year" (panchang-calendar-flip.js printYear()) tags every page outside
	   the chosen year with this class right before calling window.print(), so only
	   that year's months end up on paper. A plain Ctrl+P with no pages tagged still
	   falls through to the rule above and prints everything loaded. Two classes beat
	   .pc-flip-page's specificity, so this wins even though both use !important. */
	.pc-flip-page.pc-print-excluded { display:none !important; }
	/* printYear() also tags whichever visible page ends up last for that print job
	   (not necessarily the last page overall once earlier/later years are excluded)
	   with this, so the PDF doesn't end on a trailing blank page. */
	.pc-flip-page.pc-print-last { page-break-after:auto !important; break-after:auto !important; }
}