/* calendar.css: section rules for /culture/calendar/          (HANDOFF-calendar-pass-3 §5)

   Existing tokens only. .sources-drawer is defined once in article.css and is not touched here.
   Nothing below sets a height by script, so nothing here carries .reveal. The widget's own rules
   live in cal-today.css. Gold is furniture: the saṅgrānd rule is --gold-600, no type is gold.
   The adhik rule is --madder-500 on the tithi line; today is an --indigo-700 outline; every
   pūranmāshī and massiā mark is drawn in currentColor. */

/* ---- section spacing ---- */
#intro, #today, #month, #how, #months, #calendar-notes { padding-block: clamp(1.6rem, 4vw, 2.6rem); }
#intro .article-body { margin-top: 0; }
#how .article-body { margin-top: 0; }
#how .article-body h2 { margin-top: 0; }

/* ---- month view header ---- */
.cal-sub {
  margin: .5rem 0 0; max-width: 70ch;
  font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.55; color: var(--text-2);
}
.cal-sub:empty { display: none; }

/* ---- controls ---- */
.cal-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem 1.4rem; margin: 1.2rem 0 .9rem;
}
.cal-controls[hidden] { display: none; }   /* [hidden] loses to the flex display above without this: JS off must show no controls */
.cal-controls__nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.cal-btn {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-sans); font-weight: 600; font-size: .9rem;
  color: var(--text); background: var(--card-bg);
  border: 1.5px solid color-mix(in srgb, var(--text-3) 45%, transparent);
  border-radius: 999px; padding: .5rem 1rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cal-btn:hover { background: var(--bg-2); border-color: var(--text-3); }
.cal-btn:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }
.cal-controls__anchor { display: flex; align-items: center; gap: .55rem; margin: 0; font-family: var(--font-sans); font-size: .9rem; color: var(--text-2); }
.cal-select {
  font: inherit; color: var(--text); background: var(--card-bg);
  border: 1.5px solid color-mix(in srgb, var(--text-3) 45%, transparent);
  border-radius: var(--radius-sm); padding: .42rem .7rem; min-width: 9rem;
}
.cal-select:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }

/* ---- notes above the grid (out-of-range clamp, before 1752, load failure) ---- */
.cal-notes p { margin: 0 0 .6rem; font-family: var(--font-sans); font-size: .9rem; color: var(--text-2); }
.cal-notes a { color: inherit; }
.cal-view__static, .cal-view__error { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text-2); margin: .8rem 0; }

/* ---- reserved heights, so a deep link lands where it settles ----
   The grid is drawn only after two fetches, so on a slow connection the browser scrolls to a deep
   link (#how, #months, #sources, #how-1752) and the view then grows underneath it and carries the
   target off the screen. #cal-view therefore reserves roughly the height it is about to take, from
   boot until the first render. The reservation is keyed on .is-live, which calendar-page.js adds at
   boot and removes once the grid is in the DOM: a reader with JS off is never styled by it and sees
   only the one sentence at its own height, and a short month can never be left with an empty gap
   below its table. Two reservations, because the two layouts are nothing like the same height: the
   grid is five or six rows whatever the month, the agenda is one row per day. Each is set a little
   under the shortest month either layout renders (measured 2026-09-12 across 2024-2027 and 641px to
   1440px: grid 586-753px, agenda 1826-2017px), so the reader never waits behind more space than the
   month will fill. Added 2026-09-12.

   The widget above the view has the same problem and the bigger share of it: a panel of one
   sentence becomes 646-987px of date once the window arrives. Its reservation is three steps
   in cal-today.css, on the loading state only, each a little under the shortest panel that
   width draws. Measured at 1440px with the browser's own re-scroll disabled and the calendar
   JSON held 600ms, a deep link to #how landed 1085px below the section before either
   reservation and 42px below it after; #months 543px then 141px; #sources 526px then 124px;
   #how-1752 459px then 57px, each within about 10px of where the same link lands with no
   delay at all. The comment in cal-today.css is one line because the four files the widget
   loads are gated at 16 KB gzipped (§4.6) and had 89 bytes spare; this is the argument. */
.cal-view.is-live { min-height: 113rem; }                              /* the agenda, 640px and under */
@media (min-width: 641px) { .cal-view.is-live { min-height: 36rem; } }  /* the grid */

/* ---- the grid, 641px and wider ---- */
.cal-grid {
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font-family: var(--font-sans); background: var(--card-bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.cal-grid caption {
  caption-side: bottom; text-align: left; padding: .7rem 0 0;
  font-family: var(--font-serif); font-style: italic; font-size: .88rem; line-height: 1.5; color: var(--text-3);
}
.cal-grid th {
  text-align: left; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--text-2); padding: .6rem .55rem; border-bottom: 1px solid var(--line);
}
.cal-grid th abbr { text-decoration: none; }
.cal-grid td {
  vertical-align: top; height: 6.4rem; padding: .5rem .55rem .55rem;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  color: var(--text-2); line-height: 1.35;
}
.cal-grid td:first-child { border-left: 0; }
.cal-grid tbody tr:first-child td { border-top: 0; }
.cal-cell--empty { background: color-mix(in srgb, var(--text-3) 5%, transparent); }
.cal-cell__g { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--text); }
.cal-cell__desi { display: block; font-family: var(--font-serif); font-size: .96rem; color: var(--text); margin-top: .15rem; }
.cal-cell__desi b { font-weight: 600; }
.cal-tag {
  display: inline-block; font-family: var(--font-sans); font-style: normal; font-weight: 600;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-left: .35em;
}
.cal-cell__tithi { display: block; font-family: var(--font-serif); font-size: .84rem; color: var(--text-2); margin-top: .1rem; }
.cal-cell__note { display: block; font-family: var(--font-serif); font-style: italic; font-size: .76rem; color: var(--text-3); margin-top: .1rem; }
.cal-mark { width: .8em; height: .8em; vertical-align: -.08em; margin-right: .3em; color: currentColor; }

/* saṅgrānd: a gold rule across the top of the cell (furniture, not type).
   --gold-600 rather than --gold-500: on the card ground the lighter gold samples 2.59:1 in
   the grid and 2.46:1 in the agenda, and although nothing rests on the rule (the cell also
   prints the month name and a saṅgrānd label) 3:1 costs nothing here. Sampled from rendered
   pixels, 2026-09-12. No --gold-* value is changed and no type is gold. */
.cal-grid td.is-sangrand { box-shadow: inset 0 3px 0 var(--gold-600); }
/* adhik: a madder rule against the tithi line, on every day of the added month */
.is-adhik .cal-cell__tithi, .is-adhik .cal-agenda__tithi { box-shadow: inset 3px 0 0 var(--madder-500); padding-left: .45rem; }
/* today */
.cal-grid td.is-today { outline: 2px solid var(--indigo-700); outline-offset: -2px; }

/* ---- the agenda, 640px and narrower ---- */
.cal-agenda { display: none; list-style: none; margin: .8rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.cal-agenda__item {
  display: grid; grid-template-columns: 4.4rem 1fr; column-gap: .7rem; row-gap: .1rem;
  padding: .55rem .5rem .55rem .6rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-sans); color: var(--text-2); line-height: 1.4;
}
.cal-agenda__g abbr { text-decoration: none; }
.cal-agenda__g { grid-row: 1 / span 3; font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.cal-agenda__desi { font-family: var(--font-serif); font-size: .98rem; color: var(--text); }
.cal-agenda__desi b { font-weight: 600; }
.cal-agenda__tithi { font-family: var(--font-serif); font-size: .9rem; }
.cal-agenda__note { font-family: var(--font-serif); font-style: italic; font-size: .8rem; color: var(--text-3); }
.cal-agenda__item.is-sangrand { box-shadow: inset 3px 0 0 var(--gold-600); }
.cal-agenda__item.is-today { outline: 2px solid var(--indigo-700); outline-offset: -2px; }

@media (max-width: 640px) {
  .cal-grid { display: none; }
  .cal-agenda { display: block; }
  .cal-controls { justify-content: flex-start; }
}

/* ---- legend ---- */
.cal-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 1.1rem 0 0;
  font-family: var(--font-sans); font-size: .86rem; color: var(--text-2);
}
.cal-legend > div { display: flex; gap: .45rem; align-items: baseline; }
.cal-legend dt { font-weight: 600; color: var(--text); white-space: nowrap; }
.cal-legend dt em { font-style: italic; font-family: var(--font-serif); font-size: 1.02em; }
.cal-legend dd { margin: 0; }

/* ---- the twelve months table ---- */
.cal-months__intro { max-width: 66ch; margin: .6rem 0 1.2rem; font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.6; color: var(--text-2); }
.cal-months {
  width: 100%; border-collapse: collapse; margin: 0 0 .4rem;
  font-family: var(--font-sans); font-size: .95rem; background: var(--card-bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.cal-months caption {
  caption-side: bottom; text-align: left; padding: .7rem 0 0;
  font-family: var(--font-serif); font-style: italic; font-size: .88rem; line-height: 1.5; color: var(--text-3);
}
.cal-months thead th {
  text-align: left; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--text-2); padding: .65rem .85rem; border-bottom: 1px solid var(--line);
}
.cal-months tbody th, .cal-months td { padding: .7rem .85rem; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.cal-months tbody th { font-weight: 400; color: var(--text); }
.cal-months tbody th .gur { font-size: 1.12rem; color: var(--ink-900); margin-right: .3rem; }
.cal-months tbody th .shah { font-size: 1.05rem; color: var(--indigo-600); margin-right: .45rem; }
.cal-months tbody th .wl { font-family: var(--font-serif); font-size: 1.02rem; }
.cal-months td { color: var(--text-2); }
.cal-months td.cal-months__bik { color: var(--text); }
.cal-months tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text-3) 4%, transparent); }

@media (max-width: 640px) {
  .cal-months thead tr, .cal-months thead th { display: block; }
  .cal-months thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cal-months, .cal-months tbody { display: block; width: 100%; }
  .cal-months caption { display: block; }
  .cal-months tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; padding: .55rem .85rem .7rem; border-top: 1px solid var(--line); }
  .cal-months tbody tr:first-child { border-top: 0; }
  .cal-months tbody th { grid-column: 1 / -1; padding: 0 0 .35rem; border-top: 0; }
  .cal-months td { padding: .15rem 0 0; border-top: 0; font-size: .9rem; }
  .cal-months td::before { content: attr(data-label); display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text-3); }
  .cal-months td[data-label="Sun enters"] { grid-column: 1 / -1; }
}