/* 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; }
}