.panchang-cal { --paper:#F7EEDA; --paper-alt:#EEE0BC; --ink:#2A1A12; --maroon:#7C1430; --saffron:#C97A0F; --teal:#13524E; --gold-1:#FBE9C3; --gold-2:#F0CE86; }
.panchang-cal, .panchang-cal * { box-sizing: border-box; }
.panchang-cal { width:794px; max-width:100%; margin:16px auto; background:var(--paper); color:var(--ink); font-family:"Mukta",system-ui,sans-serif; border-radius:4px; overflow:visible; box-shadow:0 1px 4px rgba(0,0,0,.15); }
/* !important on both (2026-11-11): the wiki skin's own body-text link color was
   measured beating these on the live site -- same specificity (one class + the "a"
   element), but the skin's rule happened to win the cascade, so every link inside the
   card (the Vrat & Tyohar sidebar list included) rendered in the skin's blue instead of
   the calendar's own maroon/saffron. !important makes this card's palette win here
   regardless of what the surrounding page's own CSS does. The few spots that
   intentionally want a different link color (.pc-footer-links a, .pc-mrow-fest a, the
   major-festival gold-cell color below) are each given !important too so they keep
   outranking this rule exactly as before -- see those rules for why. */
.panchang-cal a { color:var(--maroon) !important; text-decoration:none; }
.panchang-cal a:hover { color:var(--saffron) !important; text-decoration:underline; }
.panchang-cal .pc-header { position:relative; background:var(--maroon); color:var(--paper); padding:18px 32px 21px; border-radius:4px 4px 0 0; }
/* A flat accent bar, not the old diagonal-stripe pattern (2026-11-02) -- the repeating
   45deg gradient tiles measured as a meaningful chunk of printed-PDF size (Chrome's
   print-to-PDF pipeline rasterizes non-axis-aligned repeating gradients rather than
   emitting them as a vector pattern), and it repeats on every page of a multi-month
   download. A solid bar in the same accent color/opacity keeps the colour cue at
   effectively zero cost. */
.panchang-cal .pc-header::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
	background:var(--season-accent,var(--saffron)); opacity:.55; }
/* Seasonal accent per Ritu — kept only for the thin bottom bar (.pc-header::after), a
   subtle per-month touch. The header itself (2026-11-11) no longer changes background
   per month — every month now uses the one base maroon set on .pc-header above, not a
   different gradient per Ritu. The sidebar title (.pc-sidebar-title, below) dropped this
   seasonal accent the same day: one of the six Ritu values (summer, #FBE9C3) sat so
   close to the sidebar's own --paper-alt background that "Vrat & Tyohar" rendered all
   but invisible for that month -- it's now a single fixed maroon, legible every month. */
.panchang-cal.pc-ritu-autumn { --season-accent:#C97A0F; }
.panchang-cal.pc-ritu-pre-winter { --season-accent:#D98FA0; }
.panchang-cal.pc-ritu-winter { --season-accent:#8FCAD9; }
.panchang-cal.pc-ritu-spring { --season-accent:#F0B55F; }
.panchang-cal.pc-ritu-summer { --season-accent:#FBE9C3; }
.panchang-cal.pc-ritu-monsoon { --season-accent:#8FD9C4; }
/* justify-content:flex-end (was space-between) -- the old left-side "festivalsofindia.in"
   credit is gone (2026-11-02), so the brand mark is the only thing in this row now;
   flex-end keeps it pinned to the right where it always was.
   pc-title-row (2026-11-11) wraps this row together with .pc-title so "Calendar" sits
   beside the month/year on screen instead of on its own line above it -- print keeps
   the old stacked order (logo big and centered above the title) via the order:-1
   override on .pc-topline further down in the @media print block, and the matching
   override in panchang-calendar-flip.css for the flipbook's own print styles. */
.panchang-cal .pc-title-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:5px; }
.panchang-cal .pc-topline { display:flex; justify-content:flex-end; align-items:center; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; opacity:.82; margin-bottom:0; }
.panchang-cal .pc-topline-brand { display:inline-flex; align-items:center; gap:7px; opacity:1; }
/* Full logo lockup (icon + the org's own Hindi/English wordmark), shown at its own
   aspect ratio rather than cropped into the old round icon-only badge (2026-11-02) --
   the wordmark is the point, so nothing here masks or crops it. Height-constrained,
   width:auto so it scales as one unit at whatever height fits the topline. A white
   backing badge (2026-11-02) keeps the orange artwork readable against the maroon
   header -- padding lives on the wrapping badge span, not the img itself, so the
   image's own height:26px isn't eaten into (box-sizing:border-box applies here too). */
.panchang-cal .pc-topline-logo-badge { display:inline-flex; align-items:center; background:#fff; padding:3px 7px; border-radius:5px; line-height:0; }
.panchang-cal .pc-topline-logo-img { flex-shrink:0; height:34px; width:auto; display:block; }
.panchang-cal .pc-title { display:flex; align-items:baseline; gap:12px; margin-bottom:0; }
.panchang-cal .pc-month { font-family:"Yatra One",serif; font-size:42px; line-height:1; }
.panchang-cal .pc-year { font-family:"Teko",system-ui,sans-serif; font-size:32px; font-weight:600; line-height:1; }
.panchang-cal .pc-era { font-size:10.8px; opacity:.92; letter-spacing:.2px; }
.panchang-cal .pc-body { padding:14px 32px 4px; }
.panchang-cal .pc-view-toggle { display:inline-flex; gap:3px; background:var(--paper-alt); border-radius:20px; padding:3px; margin-bottom:10px; }
.panchang-cal .pc-view-toggle-btn {
	display:inline-flex; align-items:center; gap:5px; border:none; background:transparent; cursor:pointer;
	font-family:"Mukta",system-ui,sans-serif; font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
	color:var(--ink); opacity:.6; padding:5px 12px; border-radius:16px; transition:background .15s, opacity .15s, color .15s;
}
.panchang-cal .pc-view-toggle-btn:hover { opacity:.85; }
.panchang-cal .pc-view-toggle-btn.pc-view-toggle-active { background:var(--maroon); color:var(--paper); opacity:1; }
/* Manual override of the responsive default below — set on <html> by
   panchang-calendar-view.js so one click applies to every month card on the
   page (screen only; print always forces the grid, see the print block). */
@media screen {
	html.pc-force-list .panchang-cal .pc-view-desktop { display:none !important; }
	html.pc-force-list .panchang-cal .pc-view-mobile { display:block !important; }
	html.pc-force-grid .panchang-cal .pc-view-desktop { display:block !important; }
	html.pc-force-grid .panchang-cal .pc-view-mobile { display:none !important; }
}
.panchang-cal .pc-gridwrap { display:flex; gap:8px; align-items:flex-start; }
/* --pc-wk-count (set inline per month, 5 or 6 weeks) and --pc-wk-col (the weekday-label
   column width, overridden at the desktop breakpoint below) are custom properties
   rather than a full inline grid-template-columns value, so a stylesheet rule can widen
   the label column on wide screens without an !important fight against the inline
   style that has to set the real week count. */
.panchang-cal .pc-grid { flex:1; min-width:0; display:grid; grid-template-columns:var(--pc-wk-col,52px) repeat(var(--pc-wk-count,5),minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); gap:3px; align-items:stretch; }
.panchang-cal .pc-wdlabel { color:#F7EEDA; border-radius:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px; }
.panchang-cal .pc-wd-en { font-size:11px; font-weight:700; letter-spacing:.4px; }
.panchang-cal .pc-wd-hi { font-size:7px; letter-spacing:.5px; opacity:.82; text-transform:uppercase; }
.panchang-cal .pc-cell { position:relative; border:1px solid rgba(42,26,18,.14); border-radius:3px; padding:4px 6px; display:flex; flex-direction:column; overflow:visible; }
.panchang-cal .pc-cell-empty { background:transparent; border-color:transparent; }
/* 180deg (straight down), not the old 160deg diagonal -- an angled gradient measured as
   a real contributor to printed-PDF size (Chrome's print pipeline rasterizes gradients
   that aren't axis-aligned instead of emitting a vector shading), and this rule repeats
   on every major-festival cell across every page of a multi-month download. Visually
   near-identical; still a gold gradient fill on these cells. */
.panchang-cal .pc-cell-major { background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 100%); border:1px solid rgba(124,20,48,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.panchang-cal .pc-badge { position:absolute; top:2px; right:2px; font-size:6.5px; font-weight:700; color:#fff; border-radius:2px; padding:1px 3px; letter-spacing:.2px; z-index:1; }
.panchang-cal .pc-nak { font-size:7px; font-weight:600; color:var(--teal); text-transform:uppercase; line-height:1.15; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:1px; }
.panchang-cal .pc-cell-major .pc-nak { color:#5C3A12; }
/* Hindi nakshatra name, inline after the English one as "Nak / हिन्दी" (2026-11-02;
   was its own stacked line below .pc-nak). An inline span now, not a block -- the
   parent .pc-nak already clips+ellipsizes the whole line as one unit, so this doesn't
   need its own overflow handling, just a slightly dimmer weight so it reads as the
   secondary half of the pair rather than competing with the English name. */
.panchang-cal .pc-nak-hi { font-weight:500; opacity:.78; margin-left:2px; }
.panchang-cal .pc-cell-major .pc-nak-hi { color:#5C3A12; }
.panchang-cal .pc-subtime { font-size:6.3px; color:var(--ink); opacity:.58; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panchang-cal .pc-day { font-family:"Teko",system-ui,sans-serif; font-size:27px; font-weight:600; line-height:1; margin-top:1px; }
.panchang-cal .pc-tithi { font-size:7.8px; opacity:.72; line-height:1.15; }
.panchang-cal .pc-yk { font-size:7px; opacity:.58; line-height:1.15; overflow:hidden; white-space:nowrap; margin-top:1px; }
.panchang-cal .pc-festivals { font-size:7.3px; font-weight:600; line-height:1.35; margin-top:2px; color:var(--maroon); }
.panchang-cal .pc-festivals a { color:var(--maroon); }
.panchang-cal .pc-cell-major .pc-festivals { color:#5C3A12; }
.panchang-cal .pc-cell-major .pc-festivals a { color:#5C3A12 !important; }
.panchang-cal .pc-fest-major { font-weight:800; color:var(--maroon) !important; }
.panchang-cal .pc-diya { vertical-align:-2px; margin-right:2px; flex-shrink:0; }
.panchang-cal .pc-moon { vertical-align:-1px; margin-right:2px; flex-shrink:0; }
.panchang-cal .pc-star { vertical-align:1px; margin-right:2px; flex-shrink:0; color:var(--teal); }
.panchang-cal .pc-cell-major .pc-star { color:#5C3A12; }
.panchang-cal .pc-sidebar { width:168px; flex-shrink:0; display:flex; flex-direction:column; background:var(--paper-alt); border-radius:4px; padding:8px 9px; }
.panchang-cal .pc-sidebar-title { font-size:11px; font-weight:700; color:var(--maroon); letter-spacing:.2px; padding-bottom:4px; border-bottom:1px solid rgba(124,20,48,.3); margin-bottom:5px; }
.panchang-cal .pc-sidebar-list { font-size:7.8px; line-height:1.5; }
.panchang-cal .pc-legend-row { margin-bottom:3px; }
.panchang-cal .pc-legend-day { font-family:"Teko",system-ui,sans-serif; font-weight:600; color:var(--saffron); font-size:10px; }
.panchang-cal .pc-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; row-gap:4px; column-gap:14px; font-size:9px; opacity:.72; border-top:1px solid rgba(42,26,18,.18); padding-top:6px; margin-top:8px; padding-bottom:4px; }
.panchang-cal .pc-diya-key { display:inline-block; }
/* Site links replaced the old single "festivalsofindia.in" credit (2026-11-02) — kept
   at the footer's own dimmed opacity rather than full-strength link color, so they read
   as a credit line, not a call to action competing with the festival links in the grid. */
.panchang-cal .pc-footer-links { white-space:normal; }
.panchang-cal .pc-footer-links a { color:inherit !important; }
.panchang-cal .pc-footer-links a:hover { color:var(--saffron) !important; text-decoration:underline; }
.panchang-cal .pc-view-mobile { display:none; }
/* Bounded + internally scrollable: a 30-31 row list is much taller than the grid card,
   and letting the page itself grow that tall exposes layout seams in whatever page the
   calendar is embedded in (sidebars/footers sized to a normal page height). Keeping the
   list's own height capped means selecting List never changes the surrounding page's height. */
.panchang-cal .pc-mobile-list {
	display:flex; flex-direction:column; gap:6px;
	max-height:min(640px, 70vh); overflow-y:auto; overscroll-behavior:contain;
	padding-right:4px; margin-right:-4px; scrollbar-width:thin; scrollbar-color:var(--maroon) transparent;
}
.panchang-cal .pc-mobile-list::-webkit-scrollbar { width:6px; }
.panchang-cal .pc-mobile-list::-webkit-scrollbar-thumb { background:var(--maroon); border-radius:3px; opacity:.5; }
.panchang-cal .pc-mobile-list::-webkit-scrollbar-track { background:transparent; }
.panchang-cal .pc-mrow { display:flex; gap:10px; padding:8px 10px; border:1px solid rgba(42,26,18,.14); border-radius:6px; background:rgba(255,255,255,.35); align-items:flex-start; }
.panchang-cal .pc-mrow-tinted { background:var(--paper-alt); }
.panchang-cal .pc-mrow-major { background:linear-gradient(160deg,var(--gold-1) 0%,var(--gold-2) 100%); border-color:rgba(124,20,48,.35); }
.panchang-cal .pc-mrow-date { flex-shrink:0; width:46px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.panchang-cal .pc-mrow-daynum { font-family:"Teko",system-ui,sans-serif; font-size:26px; font-weight:600; line-height:1; }
.panchang-cal .pc-mrow-wd { font-size:9px; font-weight:700; letter-spacing:.3px; color:#F7EEDA; border-radius:3px; padding:1px 5px; }
.panchang-cal .pc-mrow-body { flex:1; min-width:0; }
.panchang-cal .pc-mrow-line1 { font-size:13px; font-weight:600; display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.panchang-cal .pc-mrow-sep { opacity:.5; }
.panchang-cal .pc-mrow-nak-hi { opacity:.7; font-weight:500; }
.panchang-cal .pc-mrow-sub { font-size:10.5px; opacity:.62; margin-top:2px; line-height:1.4; }
.panchang-cal .pc-mbadge { font-size:8px; font-weight:700; color:#fff; border-radius:3px; padding:1px 5px; margin-left:4px; display:inline-block; }
.panchang-cal .pc-mrow-fest { font-size:11.5px; font-weight:600; margin-top:4px; color:var(--maroon); line-height:1.4; }
.panchang-cal .pc-mrow-major .pc-mrow-fest { color:#5C3A12; }
.panchang-cal .pc-mrow-fest a { color:inherit !important; }
/* Desktop/laptop widen (2026-11-02): the fixed 794px design width leaves a lot of
   unused side margin on a typical laptop/desktop viewport. From ~1060px up, widen the
   card and scale up its text so that space goes to legibility instead of blank margin.
   Screen-only -- print keeps the original sizes untouched (it forces its own width via
   @media print in this file and in panchang-calendar-flip.css, and a smaller print
   page has no room to spare for bigger text). panchang-calendar-flip.css widens
   .pc-flipbook (the outer wrapper when embedded as a flip-book) at this same
   breakpoint so the two move together instead of one capping the other. */
@media screen and (min-width: 1060px) {
	.panchang-cal { width:1040px; }
	.panchang-cal .pc-header { padding:22px 40px 25px; }
	.panchang-cal .pc-body { padding:18px 40px 4px; }
	.panchang-cal .pc-topline { font-size:12.5px; }
	.panchang-cal .pc-topline-logo-img { height:40px; }
	.panchang-cal .pc-month { font-size:52px; }
	.panchang-cal .pc-year { font-size:40px; }
	.panchang-cal .pc-era { font-size:13px; }
	.panchang-cal .pc-grid { --pc-wk-col:66px; grid-auto-rows:minmax(190px,auto); gap:4px; }
	.panchang-cal .pc-wd-en { font-size:14px; }
	.panchang-cal .pc-wd-hi { font-size:8.5px; }
	.panchang-cal .pc-cell { padding:6px 9px; }
	.panchang-cal .pc-badge { font-size:7.5px; padding:1px 4px; }
	.panchang-cal .pc-day { font-size:34px; }
	.panchang-cal .pc-nak { font-size:9px; }
	.panchang-cal .pc-subtime { font-size:7.8px; }
	.panchang-cal .pc-tithi { font-size:9.8px; }
	.panchang-cal .pc-yk { font-size:8.8px; }
	.panchang-cal .pc-festivals { font-size:9.2px; }
	.panchang-cal .pc-sidebar { width:208px; padding:10px 12px; }
	.panchang-cal .pc-sidebar-title { font-size:13.5px; }
	.panchang-cal .pc-sidebar-list { font-size:9.8px; }
	.panchang-cal .pc-legend-day { font-size:12.5px; }
	.panchang-cal .pc-footer { font-size:11px; }
}
@media (max-width: 820px) { .panchang-cal { overflow-x:auto; } }
@media (max-width: 699px) {
	.panchang-cal { overflow-x:visible; }
	.panchang-cal .pc-view-desktop { display:none; }
	.panchang-cal .pc-view-mobile { display:block; }
	.panchang-cal .pc-header { padding:14px 16px 12px; }
	.panchang-cal .pc-body { padding:12px 12px 4px; }
	.panchang-cal .pc-month { font-size:30px; }
	.panchang-cal .pc-year { font-size:22px; }
	.panchang-cal .pc-era { font-size:9.5px; line-height:1.45; }
	.panchang-cal .pc-title-row { row-gap:4px; }
	.panchang-cal .pc-topline { font-size:9px; flex-wrap:wrap; row-gap:4px; flex-basis:100%; }
	.panchang-cal .pc-topline-brand { justify-content:flex-start; }
	.panchang-cal .pc-footer { flex-direction:column; align-items:flex-start; gap:4px; font-size:8.5px; }
}
@media screen and (max-width: 699px) {
	/* Grid, forced open at a narrow width via the view toggle, has no readable size to
	   shrink down to — minmax(0,1fr) week columns and .pc-grid's min-width:0 let it
	   collapse until the day numbers and text overlap. Instead of shrinking it, render
	   it at its natural ~794px design width and let it scroll sideways to reach it.
	   Scoped to .pc-view-desktop specifically (not the whole card, and not
	   overflow-x:visible above, which this overrides only while grid is the forced
	   choice) so the header/toggle/footer stay put and fully visible — only the
	   grid+sidebar region scrolls. panchang-calendar-flip.js knows to let a touch
	   that starts inside this scroll area pass through instead of flipping the page. */
	html.pc-force-grid .panchang-cal .pc-view-desktop { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
	html.pc-force-grid .panchang-cal .pc-gridwrap { min-width:730px; }
}
@media print {
	.panchang-cal { box-shadow:none; margin:0 auto; -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
	.panchang-cal .pc-cell, .panchang-cal .pc-legend-row { break-inside:avoid; page-break-inside:avoid; }
	.panchang-cal .pc-grid { break-inside:avoid; }
	.panchang-cal a { color:inherit; text-decoration:none; }
	/* Logo becomes a big, centered top mark on the printed/PDF page (2026-11-11) —
	   on screen it's a small badge pinned to the top-right next to "Calendar"; a
	   page meant to be saved or printed reads better with a clear centered mark.
	   "Calendar" stays over on the right (2026-11-11 follow-up) instead of moving
	   to the center with the logo -- the badge is taken out of the flex flow
	   (position:absolute, centered on .pc-topline itself) so it centers on the
	   full header width regardless of how wide the "Calendar" text ends up, and
	   .pc-topline keeps justify-content:flex-end for that text. min-height on
	   .pc-topline reserves room for the now-absolutely-positioned badge, which
	   otherwise contributes no height of its own to the row. background:#fff is
	   repeated here with !important: the badge already had a white background on
	   screen, but the logo artwork's own canvas reads a shade off pure white, so
	   this makes sure the badge itself is not the thing diluting it. */
	.panchang-cal .pc-topline { position:relative; justify-content:flex-end; min-height:76px; margin-bottom:10px; order:-1; }
	.panchang-cal .pc-topline-logo-badge {
		position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
		background:#ffffff !important; padding:8px 20px;
	}
	.panchang-cal .pc-topline-logo-img { height:56px; }
	/* pc-title-row (2026-11-11) put .pc-topline and .pc-title side by side on screen --
	   print keeps its own, already-shipped stacked layout (logo big and centered above
	   the month/year), so here the row goes back to a plain full-width column and
	   order:-1 above puts .pc-topline back on top regardless of its new DOM position
	   (it now comes after .pc-title in the markup, for the screen row to read correctly
	   left-to-right). .pc-title's margin-bottom is restored too, since the row no longer
	   supplies that gap once it's stacked instead of side-by-side. */
	.panchang-cal .pc-title-row { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; margin-bottom:0; }
	.panchang-cal .pc-title { margin-bottom:5px; }
	/* Print always uses the full data grid, even if printed from a phone or the
	   visitor had picked List view on screen — the toggle is screen-only UI. */
	.panchang-cal .pc-view-mobile { display:none !important; }
	.panchang-cal .pc-view-desktop { display:block !important; }
	.panchang-cal .pc-view-toggle { display:none !important; }
	/* Scale the whole card down as a single unit (zoom, not transform:scale) so a
	   standalone month page also lands on one sheet instead of spilling across
	   three. zoom shrinks the layout box itself without narrowing it first, so
	   nothing rewraps at a smaller width — it just renders smaller. Width is
	   pinned to the design width so max-width:100% can't narrow it before the
	   zoom is applied, which is what was causing the text-reflow/height blowup. */
	.panchang-cal { width:794px !important; max-width:none !important; zoom:0.8; }
}