/* The site-wide live parts (templates/live/): E1 Moon mark, E3 now line with E6's words, E5 sky strip.
   Mobile (375 px) first. Nothing here animates: the bar steps by transform once a minute (live.js), with no
   transition, so reduced motion needs nothing more. Colours are tokens, so a dark theme can redefine them. */
:root {
  --lv-ink: var(--ink, #1C1C1C); --lv-soft: var(--stone, #6B6B6B); --lv-line: var(--sand, #E6DCCB);
  --lv-bg: var(--cream, #FFFAF0); --lv-accent: var(--saffron, #E39B2C);
  --lv-moon-dark: #2B3566; --lv-moon-lit: #FFF6DC; --lv-moon-rim: #B9A57A;
}

/* E3: one fixed row under the header (server-drawn: CLS 0) */
.lv-row { position: relative; padding: 0 16px; background: var(--lv-bg); border-bottom: 1px solid var(--lv-line); }
.lv-row.lv-fest-on { border-bottom: 2px solid var(--lv-accent); }          /* E6: the accent line, never without words */
.lv-now { position: relative; display: flex; align-items: center; gap: 8px; max-width: 1200px; margin: 0 auto;
          min-height: 34px; padding: 6px 0 8px; color: var(--lv-ink); text-decoration: none; font-size: .86rem;
          line-height: 1.3; }
.lv-now:hover .lv-words, .lv-now:focus-visible .lv-words { text-decoration: underline; }
.lv-now:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 2px; }
.lv-mark { flex: none; display: inline-flex; width: 16px; height: 16px; }
.lv-moon { display: block; width: 16px; height: 16px; }
.lv-moon-dark { fill: var(--lv-moon-dark); }
.lv-moon-lit { fill: var(--lv-moon-lit); }
.lv-moon-rim { stroke: var(--lv-moon-rim); }
.lv-words { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lv-k { color: var(--lv-soft); }
.lv-bar { position: absolute; left: 24px; right: 0; bottom: 3px; height: 2px; overflow: hidden; border-radius: 1px;
          background: var(--lv-line); }
.lv-bar i { display: block; height: 100%; background: var(--lv-accent); transform-origin: 0 50%; }
.lv-wide { display: none; }
@media (min-width: 640px) { .lv-wide { display: inline; } }
@media (max-width: 639px) { .lv-fest-on .lv-until { display: none; } }   /* at 375 px E6's words take the clause */
.lv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
         white-space: nowrap; }

/* E5: the strip in the footer (works on the cream page and the indigo footer: it draws in currentColor) */
.lv-strip { max-width: 1200px; margin: 0 auto 12px; color: inherit; font-size: .82rem; }
.lv-strip summary { display: grid; gap: 4px; list-style: none; cursor: pointer; padding: 4px 0; color: inherit; font-weight: 400; }
.lv-strip summary::-webkit-details-marker { display: none; }
.lv-strip summary:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 2px; }
.lv-strip-k { font-weight: 600; }
.lv-strip-k::after { content: " ▾"; opacity: .7; }
.lv-strip[open] .lv-strip-k::after { content: " ▴"; }
.lv-strip-svg { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
.lv-strip-line { fill: none; stroke: currentColor; stroke-width: 1; opacity: .55; }
.lv-strip-r { font-size: 7.5px; fill: currentColor; opacity: .7; text-anchor: middle; }
.lv-strip-n { font-size: 9px; font-weight: 600; fill: currentColor; text-anchor: middle; }
.lv-strip-g { fill: currentColor; }
.lv-strip-g.rx { fill: none; stroke: currentColor; stroke-width: 1.2; }
.lv-strip-mdark { fill: var(--lv-moon-dark); stroke: var(--lv-accent); stroke-width: .7; }
.lv-strip-mlit { fill: var(--lv-moon-lit); }
.lv-strip-src, .lv-strip-note { font-size: .78rem; opacity: .8; }
.lv-strip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px;
                 margin: 6px 0 2px; padding: 0; list-style: none; }
.lv-strip-list a { display: flex; align-items: center; min-height: 44px; color: inherit; }   /* 44 px taps */
.lv-strip-list abbr { text-decoration: none; }
.lv-strip-note { margin: 4px 0 0; }
/* a phone: the strip (360 units) is ~343 px wide, so its letters would render at ~7-9 px. The rashi names give way
   (the ticks stay) and the graha names grow to >= 11 px; the server stacks them in rows 12 units apart. */
@media (max-width: 480px) {
  .lv-strip-r { display: none; }
  .lv-strip-n { font-size: 12px; }
}

/* Owner 13 Nov (owner: tithi + running muhurat in the same row, each in a fixed box, no text ever cut) */
.lv-two{padding:0 14px}
.lv-two .lv-tw{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);max-width:1200px;margin:0 auto;min-height:44px}
.lv-two .lv-now{margin:0;max-width:none;min-height:44px;padding:4px 10px 6px 0;gap:8px;border-right:1px solid var(--lv-line);min-width:0}
.lv-two .lv-words{display:flex;flex-direction:column;white-space:nowrap;overflow:visible;line-height:1.25}
.lv-two .lv-words .lv-k{display:none}
.lv-two .lv-until .lv-sep{display:none}
.lv-two .lv-until{font-size:.92em;color:var(--lv-soft)}
.lv-two .lv-bar{left:24px;right:10px}
.lv-two .lv-muh{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:4px 0 6px 10px;color:var(--lv-ink);text-decoration:none;font-size:.86rem;line-height:1.25;white-space:nowrap}
.lv-two .lv-muntil{font-size:.92em;color:var(--lv-soft)}
/* Owner 13 Nov: the running choghadiya in the site's two tints (§Y6 highlighter: green ✓ good, soft red ! care, plain = no tint) */
.lv-two .lv-muh.hl-good,.lv-two .lv-muh.hl-care{margin:4px 0 4px 8px;padding-top:2px;padding-bottom:2px}
.lv-two .lv-muh.hl-good::after,.lv-two .lv-muh.hl-care::after{top:50%!important;margin-top:-8px}
@media (min-width:640px){.lv-two .lv-words,.lv-two .lv-muh{flex-direction:row;align-items:center;justify-content:flex-start;gap:.4em}.lv-two .lv-words .lv-k{display:inline}.lv-two .lv-until .lv-sep{display:inline}.lv-two .lv-muntil::before{content:"· "}}
.lv-two .lv-zone{display:none}
@media(min-width:640px){.lv-two .lv-zone{display:inline}}