/* The sky calendar section. Scoped entirely under .sky-calendar / .sc-*, the way jyotish.css
   and horary.css scope theirs; it borrows the page's palette but edits no shared rule. */
.sky-calendar { grid-column: 1/-1; min-width: 0; margin-top: 28px; padding: clamp(20px, 3vw, 38px); background: #10252e; color: #f4e8d1; border: 1px solid #61787577; }
.sky-calendar [hidden] { display: none !important; }
.sky-calendar h4, .sky-calendar h5 { margin: 0; }
/* :where() drops this from (0,1,1) to (0,1,0), which is the whole point: it still outranks
   the site-wide single-class rules loaded in earlier sheets that would otherwise give a
   paragraph here a margin (.section-kicker's 8px bottom, .save-reading's 18px top), but it
   now merely TIES the .sc-* rules below, which win on source order. Written as
   `.sky-calendar p` it beat those too and each one needed !important to undo it. */
.sky-calendar :where(p) { margin: 0; }
.sc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sc-heading .section-kicker { color: #d9c18e; font: 11px/1.6 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.sc-heading h3 { margin: 10px 0; font: 500 clamp(29px,3.5vw,44px)/1.2 "Playfair Display", serif; }
.sc-heading p:last-child { max-width: 660px; color: #bccdce; font-size: 14px; line-height: 1.7; }

.sky-calendar button, .sky-calendar .sc-cta { display: inline-block; color: #f4e8d1; background: #0c222e; border: 1px solid #728e87; padding: 11px 15px; font: 13px "DM Sans", sans-serif; cursor: pointer; min-height: 44px; text-decoration: none; }
.sky-calendar button:hover, .sky-calendar .sc-cta:hover { background: #24404a; }
.sky-calendar button[disabled] { opacity: .4; cursor: default; }
.sky-calendar :is(button,summary,a,input):focus-visible { outline: 2px solid #efca7f; outline-offset: 3px; }

.sc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 26px 0 22px; }
.sc-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 13px 15px; font-size: 14px; }
.sc-tabs button > span { font: 19px serif; color: #d9c18e; }
.sc-tabs button small { color: #9fb3b2; font-size: 11px; }
.sc-tabs button[aria-pressed="true"] { background: #24404a; border-color: #d9c18e; }

.sc-label { color: #d9c18e; font: 11px/1.6 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; margin: 24px 0 10px; }
.sc-note { color: #b6c9c7; font-size: 13px; line-height: 1.7; }
.sc-error { color: #f0c9a8; font-size: 14px; line-height: 1.7; padding: 14px 0; }
.sc-reading { background: #0b2029; border: 1px solid #6b8e8855; padding: clamp(16px,2.4vw,24px); margin: 12px 0; }
.sc-reading h5 { font: 500 21px/1.35 "Playfair Display", serif; color: #e6d7b4; margin-bottom: 10px; }
.sc-reading p { color: #c5d2cc; font-size: 14px; line-height: 1.8; }
.sc-reading blockquote { margin: 18px 0 0; border-left: 2px solid #d5b877; padding-left: 16px; color: #e2c990; font: italic 18px/1.6 "Playfair Display", serif; }
.sc-conventions { margin-top: 24px; color: #b6c7c7; font-size: 12px; line-height: 1.8; }
.sc-conventions summary { cursor: pointer; color: #d7d6b9; padding: 10px 0; }
.sc-conventions p { max-width: 800px; margin: 8px 0; }

/* Moon now */
.sc-moon-now { display: flex; gap: 22px; align-items: center; background: #cad9cb0b; padding: 20px; }
.sc-moon-figure { text-align: center; color: #d9c18e; }
.sc-moon-figure > span { font: 62px/1 serif; }
.sc-moon-figure p { font: 11px "DM Mono", monospace; letter-spacing: .06em; }
.sc-moon-now h4 { font: 500 clamp(22px,2.6vw,30px)/1.3 "Playfair Display", serif; margin-bottom: 8px; }
.sc-quarters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.sc-quarters li { background: #0b2029; border: 1px solid #6b8e8855; padding: 13px 14px; display: flex; flex-direction: column; gap: 5px; }
.sc-quarters strong { font-size: 13px; font-weight: 500; color: #e6d7b4; }
.sc-quarters span { font: 11px/1.5 "DM Mono", monospace; color: #b6c9c7; }

.sc-void-band { position: relative; height: 22px; background: #2c4a53; border: 1px solid #728e87; margin-bottom: 14px; }
.sc-void-modern { position: absolute; top: 0; bottom: 0; background: #d9c18e88; border-left: 2px solid #efca7f; }
.sc-void-now { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #f4e8d1; }
.sc-void-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.7; color: #b6c9c7; }
.sc-void-legend strong { color: #e6d7b4; font-weight: 500; }
.sc-swatch { display: inline-block; width: 14px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 1px solid #728e87; }
.sc-swatch-classical { background: #2c4a53; }
.sc-swatch-modern { background: #d9c18e88; border-left: 2px solid #efca7f; }
.sc-swatch-end { background: transparent; border: 0; border-right: 2px solid #f4e8d1; width: 6px; }

/* Month */
.sc-stepper { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sc-stepper strong { font: 500 20px/1.3 "Playfair Display", serif; color: #e6d7b4; min-width: 190px; }
.sc-stepper button { font: 18px "DM Sans", sans-serif; padding: 8px 16px; }
.sc-stepper button[data-sc-reset] { font-size: 13px; padding: 8px 14px; }
.sc-viewtoggle { display: flex; gap: 8px; margin-bottom: 16px; }
.sc-viewtoggle button[aria-pressed="true"] { background: #24404a; border-color: #d9c18e; }

/* The grid scrolls inside its own container rather than widening the page. overflow-x alone
   stops the page scrolling but the 600px grid still counts toward every ancestor's
   scrollWidth (.reading-room is overflow:visible below 1050px), which reads as overflow to
   anything measuring it; `contain: paint` makes the wrapper a real containment box and the
   document reports its true 390px width at phone sizes. */
.sc-gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; contain: paint; }
.sc-grid { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: 4px; min-width: 600px; }
.sc-weekday { font: 11px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #9fb3b2; padding: 4px 2px; text-align: center; }
.sky-calendar .sc-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 66px; padding: 7px 8px; background: #0b2029; border: 1px solid #6b8e8855; }
.sky-calendar .sc-cell[aria-pressed="true"] { background: #24404a; border-color: #d9c18e; }
.sc-cell-blank { min-height: 66px; }
.sc-cell-day { font: 13px "DM Mono", monospace; color: #cfd9d5; }
.sc-cell-marks { display: flex; flex-wrap: wrap; gap: 3px; font-size: 13px; line-height: 1; }
.sc-mark-quarter { color: #cfd9d5; }
.sc-mark-ingress { color: #9fd0c2; }
.sc-mark-station { color: #efb98a; }
.sc-mark-eclipse { color: #efca7f; }
/* The visible key for the four cell glyphs; the grid alone would be unexplained symbols. */
.sc-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font: 11px/1.6 "DM Mono", monospace; letter-spacing: .04em; color: #9fb3b2; }
.sc-key > span { display: inline-flex; align-items: baseline; gap: 6px; }

.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sky-calendar .sc-list-day { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; text-align: left; padding: 13px 15px; }
.sky-calendar .sc-list-day[aria-pressed="true"] { background: #24404a; border-color: #d9c18e; }
.sc-list-day strong { font-size: 13px; font-weight: 500; color: #e6d7b4; }
.sc-list-day span { font: 12px/1.7 "DM Mono", monospace; color: #b6c9c7; }
.sc-detail { margin-top: 20px; }
.sc-event { margin-bottom: 14px; }
.sc-event-head { font: 12px/1.7 "DM Mono", monospace; color: #e4cc94; }

/* Retrogrades */
.sc-retro-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.sc-retro { background: #0b2029; border: 1px solid #6b8e8855; padding: 16px 18px; }
.sc-retro.is-retrograde { border-color: #d9c18e; }
.sc-retro .sc-label { margin-top: 0; }
.sc-retro-dates { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 7px; }
.sc-retro-dates li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.6; color: #b6c9c7; }
.sc-retro-dates strong { font: 12px "DM Mono", monospace; font-weight: 400; color: #e6d7b4; }
.sc-retro .sc-reading { background: transparent; border: 0; padding: 0; margin: 12px 0 0; }

/* My transits */
.sc-transit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.sc-transit-bar .sc-note { flex: 1 1 240px; }
.sc-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #c2cecc; }
.sc-switch input { width: 17px; height: 17px; accent-color: #d9c18e; }
.sc-caveat { background: #1d2f2a; border: 1px solid #d9c18e66; padding: 16px 18px; margin-bottom: 18px; }
.sc-caveat .sc-label { margin-top: 0; }
.sc-caveat p { color: #d4ddd6; font-size: 13px; line-height: 1.8; margin-bottom: 10px; }
.sc-caveat p:last-child { margin-bottom: 0; }
.sc-hits { list-style: none; margin: 12px 0 0; padding: 0; }
.sc-hit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sky-calendar .sc-hit-list button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; min-height: 0; }
.sky-calendar .sc-hit-list button[aria-pressed="true"] { background: #24404a; border-color: #d9c18e; }
.sc-hit-list span { font: 12px "DM Mono", monospace; color: #9fb3b2; }
.sc-hit-list strong { font-size: 13px; font-weight: 500; color: #e6d7b4; }
.sc-empty { background: #0b2029; border: 1px dashed #6b8e8899; padding: clamp(20px,3vw,30px); text-align: center; }
.sc-empty > span { display: block; font: 30px serif; color: #d9c18e; margin-bottom: 12px; }
.sc-empty p { max-width: 560px; margin: 0 auto 18px; color: #c5d2cc; font-size: 14px; line-height: 1.8; }
.sc-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 900px) {
  .sc-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sc-quarters { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sc-retro-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sc-moon-now { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sc-stepper { flex-wrap: wrap; gap: 10px; }
  .sc-stepper strong { min-width: 0; font-size: 17px; }
  .sc-transit-bar { flex-direction: column; align-items: stretch; }
}
@media print {
  .sky-calendar { background: white !important; border-color: #ccc; color: #18242a; }
  .sky-calendar :is(p,h3,h4,h5,strong,span,blockquote,li) { color: #18242a !important; }
  .sc-tabs, .sc-viewtoggle, .sc-stepper, .sc-transit-bar { display: none; }
}

/* The month's void strip. One row per band, reusing .sc-void-band and .sc-void-modern from the
   Moon tab so the same shape means the same thing in both places: a proportional bar whose
   inner stretch is the modern void sitting inside the classical one. */
.sc-voids { margin-top: 26px; padding-top: 20px; border-top: 1px solid #33565f; }
.sc-voids h4 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #e6d7b4; }
.sc-voids-intro { font-size: 13px; line-height: 1.75; color: #b6c9c7; margin: 0 0 18px; max-width: 62ch; }
.sc-voidlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sc-voidrow .sc-void-band { margin-bottom: 6px; height: 16px; }
.sc-voidhead { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.sc-voidhead strong { color: #e6d7b4; font-weight: 500; }
.sc-voidhead span { color: #9fb6b4; font-variant-numeric: tabular-nums; }
.sc-voidnote { margin: 0; font-size: 12.5px; line-height: 1.6; color: #9fb6b4; }

@media (max-width: 700px) {
  .sc-voids { margin-top: 20px; }
  .sc-voidhead { font-size: 12.5px; }
}
.sc-voids-scale { font-size: 12.5px; line-height: 1.7; color: #9fb6b4; margin: 0 0 16px; }
/* The bar's own width is set inline per row, so it must not be stretched by the flex/grid
   parent; let the inline width stand. The 2% floor the renderer applies is 7px inside a 375px
   phone column, so a pixel floor keeps the briefest void legible at every width. The exact
   duration is always in the row's sentence, so neither floor costs information. */
.sc-voidrow .sc-void-band { max-width: 100%; min-width: 12px; }