/* Embeddable Panchang widget (/widget/panchang). Standalone: framed by other sites, so it carries
   its own copy of the design tokens (values from app.css) for the light and dark widget themes. */
@font-face { font-family: "Mukta"; font-weight: 400; font-display: swap; src: url(/static/fonts/mukta-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: "Mukta"; font-weight: 600; font-display: swap; src: url(/static/fonts/mukta-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: "Mukta"; font-weight: 400; font-display: swap; src: url(/static/fonts/mukta-devanagari-400-normal.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-weight: 600; font-display: swap; src: url(/static/fonts/mukta-devanagari-600-normal.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Eczar"; font-weight: 600; font-display: swap; src: url(/static/fonts/eczar-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Eczar"; font-weight: 600; font-display: swap; src: url(/static/fonts/eczar-devanagari-600-normal.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

.w-light {
  --bg: #faf6ee;
  --surface: #ffffff;
  --surface-2: #f7f1e5;
  --text: #1a1430;
  --muted: #5c5470;
  --border: rgba(45, 31, 107, .13);
  --accent: #a3301a;
  --bad: #a4231a;
  --bad-bg: #fde6e2;
  --good: #146c3a;
  --gold: #e3b458;
  color-scheme: light;
}
.w-dark {
  --bg: #0b081b;
  --surface: #15112d;
  --surface-2: #1c1739;
  --text: #f3eeff;
  --muted: #bbb1d6;
  --border: rgba(255, 255, 255, .10);
  --accent: #ffab6b;
  --bad: #ff9c8f;
  --bad-bg: #3d1a1f;
  --good: #7fdca0;
  --gold: #e3b458;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.w { background: var(--bg); color: var(--text); font: 400 15px/1.4 "Mukta", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:lang(hi) body.w { font-size: 16px; }
.w-card { min-height: 100vh; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-top: 4px solid var(--gold); }
.w-head { display: flex; align-items: center; gap: 10px; }
.w-head img { flex: none; border-radius: 8px; }
.w-head h1 { margin: 0; font: 600 1.05rem/1.2 "Eczar", "Mukta", Georgia, serif; }
.w-date { margin: 0; font-size: .85rem; color: var(--muted); }
.w-hindu { margin: 0; font-size: .85rem; color: var(--accent); font-weight: 600; }
.w-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.w-grid > div { padding: 6px 9px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.w-grid dt { font-size: .75rem; color: var(--muted); }
.w-grid dd { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.w-grid strong { font: 600 1rem/1.25 "Eczar", "Mukta", Georgia, serif; overflow-wrap: anywhere; }
.w-grid dd span { font-size: .78rem; color: var(--muted); }
.w-grid .w-bad { background: var(--bad-bg); }
.w-grid .w-bad strong { color: var(--bad); }
.w-grid .w-bad, .w-grid .w-fest { grid-column: 1 / -1; }
.w-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: .72rem; color: var(--muted); }
.w-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.w-foot a:hover, .w-foot a:focus-visible { text-decoration: underline; }
.w-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wide frames: four columns (Rahu Kaal and the festival take two each). */
@media (min-width: 560px) {
  .w-grid { grid-template-columns: repeat(4, 1fr); }
  .w-grid .w-bad { grid-column: span 2; }
  .w-grid .w-fest { grid-column: span 2; }
}