/* Generated from css/moon.css by tools/rtl/gen.js (rtlcss) — do not edit */
/* Moon page (moon.php): night sky with the live Moon, its month, and how the Hijri calendar follows it */
.mn-page { --mn-gold: var(--t-accent); --mn-ink: var(--t-text); --mn-dim: var(--t-text-secondary);
    --mn-shadow: color-mix(in srgb, var(--t-card) 72%, #5b4a33 28%); --mn-glow: rgba(217, 181, 106, .35); }
[data-theme="silver"] .mn-page { --mn-shadow: color-mix(in srgb, var(--t-card) 72%, #334155 28%); }
[data-theme="midnight"] .mn-page, [data-theme="slate"] .mn-page { --mn-shadow: color-mix(in srgb, var(--t-card) 55%, #000 45%); --mn-glow: rgba(243, 223, 174, .22); }

/* ── night sky ── */
.mn-sky { position: relative; margin: 6px 0 40px; padding: 8px 0 10px; color: var(--mn-ink); display: flex; flex-direction: column; gap: 22px; }
.mn-stars { display: none; }

.mn-head { position: relative; text-align: center; }
.mn-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-accent); }
.mn-h1 { margin: 8px 0 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--t-text); }
.mn-sub { margin: 8px 0 0; font-size: 15px; color: var(--mn-dim); }

/* ── stage: facts | Moon | facts ── */
.mn-stage { position: relative; flex: 1; padding-top: 18px; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, auto) minmax(170px, 1fr); align-items: center; gap: 28px; }
.mn-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mn-facts-a { justify-items: end; text-align: end; }
.mn-facts li { display: grid; gap: 2px; padding: 12px 16px; min-width: 190px; border-radius: 16px; background: var(--t-card); }
.mn-facts span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-dim); }
.mn-facts strong { font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 700; color: var(--t-text); font-variant-numeric: tabular-nums; }
.mn-facts em { font-style: normal; font-size: 12px; color: var(--mn-dim); }
.mn-bar { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(var(--t-accent-rgb), .15); overflow: hidden; }
.mn-bar b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(-90deg, #cfae6c, #e8c77e); }
.mn-facts-a .mn-bar { direction: ltr; }

.mn-moon-wrap { position: relative; margin: 0; width: min(46vw, 470px); aspect-ratio: 1; }
.mn-dial, .mn-moon { position: absolute; inset: 0; width: 100%; height: 100%; }
.mn-orbit { fill: none; stroke: rgba(var(--t-accent-rgb), .35); stroke-width: 1; stroke-dasharray: 2 6; }
.mn-tick { fill: rgba(var(--t-accent-rgb), .5); }
.mn-mark { fill: #d9b56a; stroke: var(--t-bg); stroke-width: 2; }
.mn-mark-halo { fill: none; stroke: rgba(217, 181, 106, .6); stroke-width: 1.5; animation: mn-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mn-pulse { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.5); } }
.mn-moon { padding: 6%; }
.mn-disc { fill: var(--mn-shadow); }
.mn-maria-dark ellipse { fill: rgba(0, 0, 0, .05); }
.mn-maria ellipse { fill: rgba(128, 100, 58, .16); }
.mn-craters circle { fill: rgba(128, 100, 58, .08); stroke: rgba(128, 100, 58, .28); stroke-width: 1.2; }
.mn-edge { fill: none; stroke: rgba(var(--t-accent-rgb), .25); stroke-width: 1.2; }
#mn-flip { transform-box: view-box; transform-origin: 200px 200px; transition: transform .6s ease; }
.mn-moon-wrap.is-south #mn-flip { transform: scaleX(-1); }
.mn-moon-wrap.is-south .mn-dial { transform: scaleX(-1); }
.mn-moon-wrap.is-south .mn-l-fq { left: auto; right: -4px; transform: translate(50%, -50%) rotate(90deg); }
.mn-moon-wrap.is-south .mn-l-lq { right: auto; left: -4px; transform: translate(-50%, -50%) rotate(-90deg); }
.mn-moon { filter: drop-shadow(0 18px 40px var(--mn-glow)); }
.mn-labels { position: absolute; inset: 0; pointer-events: none; }
.mn-l { position: absolute; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--t-accent-rgb), .75); white-space: nowrap; }
.mn-l-new { top: -22px; right: 50%; transform: translateX(50%); }
.mn-l-full { bottom: -22px; right: 50%; transform: translateX(50%); }
.mn-l-fq { top: 50%; left: -4px; transform: translate(-50%, -50%) rotate(-90deg); }
.mn-l-lq { top: 50%; right: -4px; transform: translate(50%, -50%) rotate(90deg); }

/* ── hemisphere + live note ── */
.mn-tools { position: relative; margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.mn-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--t-card); }
.mn-seg button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--mn-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.mn-seg button[aria-pressed="true"] { background: var(--t-bg); color: var(--t-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.mn-seg button:focus-visible { outline: 2px solid var(--mn-gold); outline-offset: 2px; }
.mn-live { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--mn-dim); }
.mn-live i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); animation: mn-live 1.8s ease-out infinite; }
@keyframes mn-live { to { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }

/* ── the Moon through the Hijri month ── */
.mn-month { position: relative; }
.mn-month-h { margin: 0 0 10px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mn-dim); font-family: inherit; }
.mn-strip { list-style: none; margin: 0; padding: 4px 2px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(30px, 1fr); gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mn-strip::-webkit-scrollbar { display: none; }
.mn-strip li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 0 5px; border-radius: 12px; cursor: help; outline: none; transition: background .15s; }
.mn-strip li:hover, .mn-strip li:focus { background: var(--t-card); }
.mn-strip svg { width: 24px; height: 24px; }
.mn-strip b { font-size: 10.5px; font-weight: 600; color: var(--mn-dim); font-variant-numeric: tabular-nums; }
.mn-strip li.is-past { opacity: .55; }
.mn-strip li.is-today { background: rgba(var(--t-accent-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--t-accent-rgb), .4); }
.mn-strip li.is-today b { color: var(--mn-gold); }
.mn-dark { fill: var(--mn-shadow); }
.mn-tip {
    position: absolute; bottom: calc(100% + 8px); right: 50%; z-index: 5; width: max-content; max-width: 220px; padding: 9px 11px; border-radius: 12px;
    background: var(--t-text); color: var(--t-bg); font-size: 12px; line-height: 1.45; text-align: start; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6);
    opacity: 0; transform: translate(50%, 4px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.mn-tip strong { display: block; font-size: 12.5px; }
.mn-strip li:hover .mn-tip, .mn-strip li:focus .mn-tip { opacity: 1; transform: translate(50%, 0); }
.mn-strip li:nth-child(-n+3) .mn-tip { right: 0; transform: translate(0, 4px); }
.mn-strip li:nth-child(-n+3):hover .mn-tip, .mn-strip li:nth-child(-n+3):focus .mn-tip { transform: none; }
.mn-strip li:nth-last-child(-n+3) .mn-tip { right: auto; left: 0; transform: translate(0, 4px); }
.mn-strip li:nth-last-child(-n+3):hover .mn-tip, .mn-strip li:nth-last-child(-n+3):focus .mn-tip { transform: none; }

/* ── learn ── */
.mn-learn h2 { font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; margin: 40px 0 16px; }
.mn-learn h2:first-child { margin-top: 0; }
.mn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mn-card { padding: 20px 22px; border-radius: 20px; background: var(--t-card); }
.mn-card h3 { margin: 0 0 8px; font-size: 16px; font-family: "Space Grotesk", sans-serif; }
.mn-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--t-text-secondary); }
.mn-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.mn-phases li { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; background: var(--t-card); text-align: center; font-size: 12.5px; font-weight: 600; }
.mn-phases li.is-now { background: color-mix(in srgb, var(--t-card) 85%, var(--t-accent) 15%); color: var(--t-accent); }
.mn-phases svg { width: 46px; height: 46px; }
.mn-faqs { margin-top: 40px; }
.mn-links { margin-top: 26px; line-height: 1.9; }
.mn-links a { color: var(--t-accent); }

@media (max-width: 1000px) {
    .mn-stage { grid-template-columns: 1fr 1fr; }
    .mn-moon-wrap { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(78vw, 420px); margin: 26px 0; }
    .mn-facts-a { justify-items: stretch; text-align: start; }
    .mn-facts-a .mn-bar { direction: rtl; }
    .mn-facts li { min-width: 0; }
    .mn-phases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .mn-sky { padding: 4px 0 10px; }
    .mn-stage { grid-template-columns: 1fr; gap: 10px; }
    .mn-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
    .mn-facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .mn-facts strong { font-size: 18px; }
    .mn-strip { grid-auto-columns: 34px; }
}
@media (prefers-reduced-motion: reduce) { .mn-stars, .mn-mark-halo, .mn-live i { animation: none; } #mn-flip { transition: none; } }

/* the Moon as an illustration (SVG Repo, CC0): the whole disc dimmed, the lit part in full colour */
.mn-art-dim { opacity: .3; mix-blend-mode: multiply; }
.mn-tint { fill: #f2a93b; opacity: .45; mix-blend-mode: multiply; }