/* today-sky.css: the calendar card as the sky over the chosen place (2026-10-14).

   Shared by / and /culture/calendar/, both of which mount the widget in a
   section#today, which is why every rule is scoped #today. Moved here
   verbatim from the page-scoped block in site/index.html on 2026-10-14 so
   the calendar page could take the same card without a second copy of it
   (HANDOFF-today-cards-DONE-20261014.md has the design, and
   HANDOFF-calendar-sky-DONE-20261014.md the move).

   What each page keeps for itself: the home page its pairing with the word
   card, the compaction that hides five of the widget's rows, and its
   measured loading reserves (index.html, section#today); the calendar page
   its wide layout, moon size and reserves (calendar.css). Link this file
   BEFORE those, so a page's own rule of equal specificity wins on order.

   js/today.js draws the moon and the rail and sets data-sky; the stars
   and the plain are build-today-cloth.py's TODAY-SKY region in each page.
   _qa/qa-today-cards.py samples the text over every hour from pixels.

   Colours are tokens, or oklab mixes of tokens written as color-mix()
   where they are used, so no new token exists. */

/* --- the card as a column ------------------------------------------ */
/* The card runs as a column with the gold button pinned to the foot, so on
   the home page its button lines up with the word card's however long
   today's word is. */
#today .cal-today { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
#today .cal-today__foot,
#today .cal-today > .cal-today__link { margin-top: auto; }
#today .cal-today__foot,
#today .cal-today__date { align-self: stretch; }
/* Until the widget builds its foot (JS off, or still loading) the link
   is a direct child: hold it right, where it lands once ready. */
#today .cal-today > .cal-today__link { align-self: flex-end; }
/* The select's ring is gold-300 (cal-today.css). The global gold-600
   ring measured about 3.3:1 on the old indigo ground. */
#today .btn:focus-visible { outline-color: var(--gold-300); }
#today .cal-today__eyebrow { text-wrap: pretty; }

/* --- the grounds ---------------------------------------------------- */
/* The generic phulkari corner (.panel::before) gives way: the word
   card has a buti of its own and the sky has its moon. The drawn layers
   sit under the text. This order matters: .panel > * and the layers'
   own rule are equally specific, so the layers' rule must come after. */
#today .panel::before { display: none; }
#today .panel > * { position: relative; z-index: 1; }
#today .ts-stars, #today .ts-land, #today .ts-moon { position: absolute; z-index: 0; pointer-events: none; }

/* --- the date: the sky over the chosen place ------------------- */
/* js/today.js sets data-sky to night, dawn, day or dusk from that
   place's sunrise and sunset (calendar-core.js) at the moment the page
   is read, and the custom properties below carry each hour. With no
   script, or until it runs, the card is the night sky. The colours
   are registered so a change of place eases between hours; the first
   hour is set before .ts-live switches the easing on, so nothing
   moves on load. */
@property --sky-1 { syntax: '<color>'; inherits: true; initial-value: #14162F; }
@property --sky-2 { syntax: '<color>'; inherits: true; initial-value: #1C1F43; }
@property --sky-3 { syntax: '<color>'; inherits: true; initial-value: #262A5A; }
@property --sky-glow { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --sky-stars { syntax: '<number>'; inherits: true; initial-value: 1; }
#today .cal-today {
  --sky-1: var(--indigo-900); --sky-2: var(--indigo-800); --sky-3: var(--indigo-700);
  --sky-glow: color-mix(in oklab, var(--indigo-600) 40%, transparent); --sky-stars: 1;
  --ts-earth: color-mix(in oklab, var(--indigo-900) 72%, var(--ink-900));
  background:
    linear-gradient(to top, var(--ts-earth) 0 var(--ts-ground, 5rem), transparent var(--ts-ground, 5rem)),
    radial-gradient(120% var(--ts-glow-h, 34%) at 50% calc(100% - var(--ts-ground, 5rem)), var(--sky-glow), transparent 72%),
    linear-gradient(180deg, var(--sky-1) var(--ts-sky-top, 0%), var(--sky-2) var(--ts-sky-mid, 58%), var(--sky-3) 100%);
  border-color: color-mix(in oklab, var(--indigo-600) 80%, transparent);
  padding-bottom: 1.15rem;
  /* --ts-glow-h, --ts-sky-top and --ts-sky-mid size the horizon's glow and where the sky
     starts and finishes turning towards it, as fractions of the card. A much taller card (the
     calendar page's, with seven rows) sets them in rem from the foot instead, or the dawn's
     colours climb behind its lower rows. */
}
#today .cal-today.ts-live { transition: --sky-1 .9s ease, --sky-2 .9s ease, --sky-3 .9s ease, --sky-glow .9s ease, --sky-stars .9s ease; }
/* Dawn is saffron and evening madder: the morning sky pales through
   rose into gold, the evening one deepens through madder into a low
   ember. */
#today .cal-today[data-sky="dawn"] {
  --sky-1: var(--indigo-700); --sky-2: color-mix(in oklab, var(--indigo-600) 74%, var(--madder-400));
  --sky-3: color-mix(in oklab, var(--gold-500) 62%, var(--madder-400));
  --sky-glow: color-mix(in oklab, var(--gold-300) 55%, transparent); --sky-stars: .3;
}
#today .cal-today[data-sky="day"] {
  --sky-1: var(--indigo-700); --sky-2: var(--indigo-600);
  --sky-3: color-mix(in oklab, var(--indigo-600) 80%, var(--khaddar-300));
  --sky-glow: color-mix(in oklab, var(--khaddar-50) 22%, transparent); --sky-stars: 0;
}
#today .cal-today[data-sky="dusk"] {
  --sky-1: var(--indigo-900); --sky-2: color-mix(in oklab, var(--indigo-800) 55%, var(--madder-600));
  --sky-3: color-mix(in oklab, var(--madder-500) 82%, var(--gold-600));
  --sky-glow: color-mix(in oklab, var(--madder-400) 50%, transparent); --sky-stars: .25;
}
/* The stars keep to where no text ever sits: the strip above the
   eyebrow and a ring round the moon. Beside a word a star reads as a
   full stop, as the dot of a romanised letter (an ṅ, an ṭ), or over
   Gurmukhi as a bindī, and on this site each of those means something.
   Two mask layers, added: the strip and the ring. */
#today .ts-stars {
  top: 0; left: 0; width: 100%; height: 75%; fill: var(--cream); opacity: var(--sky-stars);
  --ts-moon-c: 4.4rem; --ts-moon-r: 4.6rem;
  /* The strip ends a clear .5rem above the eyebrow's line at every width,
     Nastaliq's rising ink included: the card's padding is the panel's
     clamp(1.6rem, 4vw, 2.8rem). */
  --ts-strip: calc(clamp(1.6rem, 4vw, 2.8rem) - 1.1rem);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--ts-strip) - .4rem), transparent var(--ts-strip)),
    radial-gradient(circle var(--ts-moon-r) at calc(100% - var(--ts-moon-c)) var(--ts-moon-c), #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--ts-strip) - .4rem), transparent var(--ts-strip)),
    radial-gradient(circle var(--ts-moon-r) at calc(100% - var(--ts-moon-c)) var(--ts-moon-c), #000 55%, transparent 100%);
}
/* The plain along the foot: the picker and the link stand on it. The
   ground is the first background layer, as tall as the foot's zone,
   which js/today.js measures into --ts-ground because the foot wraps to
   two rows on a narrow card. The strip of horizon and trees sits on its
   top edge: the drawing's land line is 40 of its 60 units down, so a
   3rem strip puts it 1rem above the strip's foot. */
#today .ts-land { left: 0; width: 100%; height: 3rem; bottom: calc(var(--ts-ground, 5rem) - 1rem); }
#today .ts-land__near { fill: var(--ts-earth); }
#today .ts-land__far { fill: var(--ts-earth); opacity: .55; }
#today .ts-moon { top: clamp(.8rem, 2.4vw, 1.4rem); right: clamp(.8rem, 2.4vw, 1.4rem); width: 6rem; height: 6rem; }
#today .ts-moon__halo { stop-color: var(--khaddar-50); stop-opacity: .5; }
#today .ts-moon__halo--out { stop-opacity: 0; }
#today .ts-moon__face { stop-color: var(--khaddar-50); }
#today .ts-moon__face--edge { stop-color: var(--khaddar-300); }
#today .ts-moon__glow { opacity: calc(.12 + .55 * var(--ts-lit, .5)); }
#today .ts-moon__dark { fill: color-mix(in oklab, var(--sky-1) 90%, var(--cream));
                        stroke: color-mix(in oklab, var(--cream) 16%, transparent); stroke-width: 1; }
#today .cal-today[data-sky="day"] .ts-moon { opacity: .62; }
#today .cal-today > .cal-today__eyebrow { padding-right: 6.4rem; }
@media (max-width: 479px) {
  #today .ts-stars { --ts-moon-c: 2.9rem; --ts-moon-r: 3.3rem; }
  #today .ts-moon { width: 4.2rem; height: 4.2rem; }
  #today .cal-today > .cal-today__eyebrow { padding-right: 4.6rem; }
}

/* --- the date: head over rows at every width ---------------------- */
#today .cal-today__date { grid-template-columns: minmax(0, 1fr); }
#today .cal-today__roman,
#today .cal-today__row dd,
#today .cal-today__fallback { font-family: var(--font-sans); font-style: normal; }
/* The scripts under the romanised value rather than run on after it,
   with air above for the Nastaliq marks over a gaf; and the link held
   right whether or not the foot wraps. */
#today .cal-today__row dd .cal-today__scripts { display: block; padding-top: .2rem; }
#today .cal-today__foot { padding-top: .35rem; }
#today .cal-today__foot .cal-today__link { margin-left: auto; }
/* No place can be chosen once the data has failed, so the fallback
   sentence that promises one goes, and the error line stays. */
#today .cal-today[data-state="error"] .cal-today__fallback { display: none; }

/* --- the rail of days ------------------------------------------ */
/* The rail sits on a dark plate, an instrument set into the sky: the
   horizon's glow lies right behind it at dawn, by day and at evening, and
   cream on that glow measured 2.0:1 (_qa/qa-today-cards.py). On the plate
   every line clears 4.5:1 in every hour. */
#today .ts-days {
  align-self: stretch; display: grid; gap: .45rem; margin: .2rem 0 1.5rem;
  padding: .65rem .75rem .55rem; border-radius: 14px;
  background: color-mix(in oklab, var(--indigo-900) 66%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cream) 10%, transparent);
}
#today .ts-days__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem;
                        font-family: var(--font-sans); font-size: .8rem; color: var(--cream); }
/* A fixed width for the moon note, so whether the head wraps never depends
   on the day ("moon 15% lit" against "moon full"). */
#today .ts-days__moon { flex: none; min-width: 12ch; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* One line under the rail, one height whatever it holds: the hint on
   today; off it, the day and a way back. */
/* The hint and the day line share one grid cell, and the one not in use is
   kept in the layout but unseen, so the line is always the taller of the
   two: on a narrow card the hint wraps to two lines and the day does not. */
#today .ts-days__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem;
                        min-height: 2.1rem; font-family: var(--font-sans); font-size: .8rem; color: var(--cream); }
#today .ts-days__foot > [hidden] { display: revert !important; visibility: hidden; }
#today .ts-days__hint { grid-area: 1 / 1 / 2 / 3; }
#today .ts-days__when { grid-area: 1 / 1; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
#today .ts-days__back { grid-area: 1 / 2; }
#today .ts-days__back {
  font: inherit; font-size: .78rem; color: var(--cream); cursor: pointer;
  padding: .3rem .8rem; border-radius: 999px; background: transparent;
  border: 1px solid color-mix(in oklab, var(--cream) 45%, transparent);
}
#today .ts-days__back:hover { border-color: var(--gold-300); }
#today .ts-days__back:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }

#today .ts-rail {
  /* 42px, not 2.6rem: the beads' drawing is 42 units tall and one unit must be
     one pixel, or the moon under the mark drifts from the day shown when the
     reader's default font is not 16px. */
  position: relative; height: 42px; border-radius: 999px; cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; outline: 2px solid transparent;
  background: color-mix(in oklab, var(--indigo-900) 34%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cream) 14%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
#today .ts-rail.is-held { cursor: grabbing; }
#today .ts-rail:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-300); }
#today .ts-rail__track { position: absolute; top: 0; left: 50%; height: 100%; will-change: transform; }
#today .ts-rail__track svg { display: block; overflow: visible; }
#today .ts-bead__lit { fill: var(--khaddar-50); }
#today .ts-bead__dark { fill: color-mix(in oklab, var(--indigo-900) 80%, var(--cream)); }
#today .ts-bead__sg { fill: var(--gold-400); }
#today .ts-rail__mark {
  position: absolute; top: .22rem; bottom: .22rem; left: 50%; width: 1.9rem; margin-left: -.95rem;
  border-radius: 999px; box-shadow: 0 0 0 1.5px var(--gold-300); pointer-events: none;
}
#today .ts-days__hint { margin: 0; font-size: .78rem; }
/* Forced colours drop box-shadow, which draws both the rail's focus ring and
   the ring round today's moon. */
@media (forced-colors: active) {
  /* Inside the rail's box: the site's 3px offset puts the ring where the
     rail's own edge mask cuts it away. */
  #today .ts-rail:focus-visible { outline-color: Highlight; outline-offset: -2px; }
  #today .ts-rail__mark { box-shadow: none; border: 2px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  #today .cal-today.ts-live { transition: none; }
}