/* SkySutra: shared by all three theme styles. Load after the style's token file. */
/* Map SkySutra's tokens onto Universal Theme's own variables, so every region,
   report, button and menu takes the brand without per-page CSS. */
:root {
  --ut-body-background-color: var(--ss-bg);
  --ut-body-text-color: var(--ss-text);
  --ut-body-title-background-color: var(--ss-bg);
  --ut-body-title-text-color: var(--ss-text);
  --ut-header-background-color: var(--ss-bg);
  --ut-header-text-color: var(--ss-text);
  --ut-header-border-color: var(--ss-line);
  --ut-header-menubar-background-color: var(--ss-surface);
  /* Vita draws white menu text on a dark bar; our bar is --ss-surface, so set the text too */
  --ut-header-menubar-item-text-color: var(--ss-text);
  --ut-header-menubar-item-current-background-color: var(--ss-surface-2);
  --ut-header-menubar-item-current-text-color: var(--ss-astro);
  --ut-header-menubar-item-hover-background-color: var(--ss-surface-2);
  --ut-header-menubar-item-hover-text-color: var(--ss-text);
  --ut-header-menubar-item-border-color: var(--ss-line);
  --ut-header-menubar-item-split-icon-color: var(--ss-muted);
  --ut-header-menubar-item-split-border-color: var(--ss-line);
  --ut-body-nav-background-color: var(--ss-surface);
  --ut-body-nav-text-color: var(--ss-text);
  --ut-navtabs-background-color: var(--ss-surface);
  --ut-region-background-color: var(--ss-surface);
  --ut-region-header-background-color: var(--ss-surface-2);
  --ut-region-header-text-color: var(--ss-text);
  --ut-region-text-color: var(--ss-text);
  --ut-component-background-color: var(--ss-surface);
  --ut-component-border-color: var(--ss-line);
  --ut-component-text-default-color: var(--ss-text);
  --ut-component-text-title-color: var(--ss-text);
  --ut-component-text-muted-color: var(--ss-muted);
  --ut-field-label-text-color: var(--ss-muted);
  --ut-link-text-color: var(--ss-astro);
  --a-base-link-text-color: var(--ss-astro);
  --ut-palette-primary: var(--ss-astro);
  --ut-palette-primary-contrast: var(--ss-on-astro);
  --ut-palette-primary-text: var(--ss-astro);
  --ut-focus-outline-color: var(--ss-lore);
  --ut-login-page-background-color: var(--ss-bg);
  --a-gv-background-color: var(--ss-surface);
  --a-menu-background-color: var(--ss-surface);
  --a-toolbar-background-color: var(--ss-surface-2);
  --ut-login-region-background-color: var(--ss-surface);
  --a-field-input-background-color: var(--ss-surface-2);
  --a-field-input-hover-background-color: var(--ss-surface-2);
  --a-field-input-border-color: var(--ss-line);
  --a-field-input-text-color: var(--ss-text);
  --a-button-background-color: var(--ss-surface-2);
  --a-button-hover-background-color: var(--ss-line);
  --a-button-text-color: var(--ss-text);
}
/* Hot (primary) buttons set their own colors, so set them there */
.t-Button--hot, .a-Button--hot {
  --a-button-background-color: var(--ss-astro);
  --a-button-hover-background-color: color-mix(in srgb, var(--ss-astro) 85%, var(--ss-text));
  --a-button-focus-background-color: color-mix(in srgb, var(--ss-astro) 85%, var(--ss-text));
  --a-button-active-background-color: color-mix(in srgb, var(--ss-astro) 80%, var(--ss-bg));
  --a-button-text-color: var(--ss-on-astro);
  --a-button-hover-text-color: var(--ss-on-astro);
  --a-button-focus-text-color: var(--ss-on-astro);
  --a-button-active-text-color: var(--ss-on-astro);
}
/* Color with meaning: blue is measured astronomy, saffron is tradition */
.ss-lore  { border-left: 4px solid var(--ss-lore);  padding-left: 12px; }
.ss-astro { border-left: 4px solid var(--ss-astro); padding-left: 12px; }
.ss-vedic-name { color: var(--ss-lore); font-style: italic; }

/* ---- Part 5: Tonight's sky components ---------------------------------- */
/* Planet Card (template component) */
/* Four to a row, inner planets first: Mercury, Venus, Mars, Jupiter; then Saturn, Uranus, Neptune */
.ss-planets { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .ss-planets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ss-planet  { background: var(--ss-surface-2); border-radius: 8px; padding: 10px 12px 10px 14px; }
.ss-planet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ss-planet-name { font-size: 1.1rem; font-weight: 600; color: var(--ss-text); }
.ss-planet-head .ss-pill { margin-left: auto; }
.ss-planet-facts { color: var(--ss-muted); font-size: .875rem; margin-top: 4px; }

/* Sky Pill: is it up? */
.ss-pill { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: .75rem;
           font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.ss-pill--up    { background: var(--ss-astro); color: var(--ss-on-astro); }
.ss-pill--glare { background: transparent; color: var(--ss-lore); border-color: var(--ss-lore); }
.ss-pill--day   { background: transparent; color: var(--ss-text); border-color: var(--ss-muted); }
.ss-pill--later { background: transparent; color: var(--ss-astro); border-color: var(--ss-astro); }
.ss-pill--down  { background: transparent; color: var(--ss-muted); border-color: var(--ss-line); }

/* Moon Badge: the template sets --lit (e.g. 97%), the share of the disc that is lit.
   A straight edge, not the true curved terminator: a 40px badge, not an ephemeris. */
.ss-moon-badge { display: inline-flex; align-items: center; gap: 10px; }
.ss-moon-disc  { --lit: 50%; width: 40px; height: 40px; border-radius: 50%; flex: none;
                 border: 1px solid var(--ss-line);
                 background: linear-gradient(to left, var(--ss-star) var(--lit),
                                                     var(--ss-surface-2) var(--lit)); }
/* Waning: the lit side is on the left (northern hemisphere view) */
.ss-moon-disc--waning { transform: scaleX(-1); }
.ss-moon-label { color: var(--ss-text); }
.ss-moon-label small { display: block; color: var(--ss-muted); }

/* Today in the sky: label/value facts */
.ss-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin-top: 12px; }
.ss-facts dt { color: var(--ss-muted); }
.ss-facts dd { margin: 0; color: var(--ss-text); }

/* Sky Chart region plugin: an SVG in 1000 x 1000 units, colored by the theme style */
.ss-chart { max-width: 720px; margin: 0 auto; }
.ss-chart svg { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.ss-chart .sc-sky   { fill: var(--ss-bg); stroke: var(--ss-line); stroke-width: 2; }
.ss-chart .sc-ring  { fill: none; stroke: var(--ss-line); stroke-width: 1.5; }
.ss-chart .sc-lines { fill: none; stroke: var(--ss-astro); stroke-opacity: .45; stroke-width: 1.6; }
.ss-chart .sc-stars { fill: var(--ss-star); }
.ss-chart text { font-family: system-ui, sans-serif; dominant-baseline: middle; }
.ss-chart .sc-compass   { fill: var(--ss-muted); font-size: 26px; font-weight: 600; text-anchor: middle; }
.ss-chart .sc-star-name { fill: var(--ss-muted); font-size: 18px; }
.ss-chart .sc-body circle { fill: var(--ss-astro); }
.ss-chart .sc-body text   { fill: var(--ss-text); font-size: 21px; font-weight: 600; }
.ss-chart .sc-moon circle { fill: var(--ss-star); }
.ss-chart .sc-sun circle  { fill: var(--ss-lore); }
.ss-chart .sc-mark circle { fill: none; stroke: var(--ss-lore); stroke-width: 4; }
.ss-chart .sc-mark text   { fill: var(--ss-lore); font-size: 22px; font-weight: 600; text-anchor: middle; }
.ss-chart-caption { text-align: center; color: var(--ss-muted); font-size: .8125rem; margin-top: 6px; }

/* Night, Night Vision and Day sit in the top bar as icons (navigation bar entries
   with List Item CSS Classes "icon-only"); the label stays for screen readers */
.t-NavigationBar-item.icon-only .t-Button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t-NavigationBar-item.icon-only .t-Button { padding-inline: 8px; }

/* Sky chart: the ecliptic and the signs both ways (Lesson 9.4) */
.ss-chart .sc-ecliptic { fill: none; stroke: var(--ss-thread); stroke-width: 2; stroke-dasharray: 8 6; opacity: .85; }
.ss-chart .sc-edge-T { fill: var(--ss-astro); }
.ss-chart .sc-edge-S { fill: var(--ss-lore); }
.ss-chart .sc-sign-T, .ss-chart .sc-sign-S { font-size: 18px; text-anchor: middle; font-weight: 600; }
.ss-chart .sc-sign-T { fill: var(--ss-astro); }
.ss-chart .sc-sign-S { fill: var(--ss-lore); }

/* Lore panels (Lesson 9.3) */
.ss-lore { margin: 0 0 1.5rem; max-width: 70ch; }
.ss-lore-title { font-size: 1.1rem; margin: 0 0 .5rem; }
.ss-lore p { margin: 0 0 .6rem; line-height: 1.55; }
.ss-lore-source { font-size: .85rem; color: var(--ss-muted); }

/* Sky calendar event colours (Lesson 9.1). FullCalendar puts the CSS_CLASS column on each
   event; month view draws timed events as a dot, all-day ones as a bar. */
.fc .ss-cal-eclipse     { --ss-cal: #C0392B; }
.fc .ss-cal-shower      { --ss-cal: #D9861F; }
.fc .ss-cal-opposition  { --ss-cal: #2E8B57; }
.fc .ss-cal-elongation  { --ss-cal: #2A9D8F; }
.fc .ss-cal-conjunction { --ss-cal: #3D6FD9; }
.fc .ss-cal-moon        { --ss-cal: #8A8FA3; }
.fc .ss-cal-tithi       { --ss-cal: #9A5410; }
.fc .fc-event[class*="ss-cal-"]        { background-color: var(--ss-cal); border-color: var(--ss-cal); color: #fff; }
.fc .fc-daygrid-dot-event[class*="ss-cal-"] { background-color: transparent; color: var(--ss-text); }
.fc [class*="ss-cal-"] .fc-daygrid-event-dot { border-color: var(--ss-cal); }
.fc [class*="ss-cal-"] .fc-list-event-dot    { border-color: var(--ss-cal); }