/* ============================================================
   panchang.css — components.

   Palette tokens live in theme.css and are taken from the Srinivas
   Panchang app. Nothing in this file hard-codes a colour; every rule
   reads a token, so retheming is one file, not a search-and-replace.
   ============================================================ */

/* ---- base -------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;          /* R5 — never below 16px for data */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;       /* R3 — the body never scrolls sideways */
  padding-bottom: env(safe-area-inset-bottom);
}

/* R5 — line-height is set PER SCRIPT, not globally. Telugu, Kannada,
   Gujarati and Devanagari need more room than Latin, and a conjunct that
   collides with the line above is a legibility bug. */
body.script-telugu    { font-family: "Noto Serif Telugu", var(--font-indic), var(--font-ui); line-height: 1.75; }
body.script-kannada   { font-family: "Noto Serif Kannada", var(--font-indic), var(--font-ui); line-height: 1.75; }
body.script-gujarati  { font-family: "Noto Serif Gujarati", var(--font-indic), var(--font-ui); line-height: 1.7; }
body.script-devanagari{ font-family: "Tiro Devanagari Sanskrit", var(--font-indic), var(--font-ui); line-height: 1.7; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

:focus-visible {
  outline: 2px solid var(--structure);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* R6 — Indic strings are never truncated. A clipped conjunct can change
   a word, so everything wraps instead. */
.no-clip { overflow-wrap: anywhere; white-space: normal; }

/* ---- chrome: top bar --------------------------------------- */
/* The brand band: a kumkuma gradient with white text, edged below by a
   pasupu stripe. It is the one place the gradient appears, because a
   gradient behind data is exactly what §9 says to avoid. The stripe is an
   outer shadow rather than a border so the bar keeps its 54px height and
   the sticky context bar beneath it does not shift. */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--brand-band);
  color: var(--brand-ink);
  box-shadow: 0 3px 0 var(--pasupu);
}
.topbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 12px; min-height: 54px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; color: var(--brand-ink); text-decoration: none;
  font-size: 16px; letter-spacing: -.01em; white-space: nowrap;
}
.brand .mark {
  width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16); color: var(--pasupu);
  border: 1px solid rgba(255,255,255,.3);
  font-family: var(--font-display); font-size: 15px; line-height: 1;
}
/* .86, not lower: at 12px this needs 4.5:1, and .72 measured 4.1:1 on the band. */
.brand .brand-sub { color: rgba(255,255,255,.86); font-weight: 400; font-size: 12px; display: none; }
@media (min-width: 1100px) { .brand .brand-sub { display: inline; } }

.top-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn {
  min-width: 40px; height: 40px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--brand-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
.icon-btn svg { width: 18px; height: 18px; }
.topbar :focus-visible { outline-color: var(--pasupu); }

/* ---- chrome: context bar (region · city · date) ------------- */
/* F1.7 — the region and city are ALWAYS visible and always tappable.
   Never a silent default. This is the most important control on the site. */
.contextbar {
  position: sticky; top: 54px; z-index: 45;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
}
.contextbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.contextbar-in::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 6px 12px; white-space: nowrap;
  background: var(--surface-alt); border: 1px solid var(--hair-strong);
  border-radius: 999px; color: var(--ink); font: inherit; font-size: 14px;
  cursor: pointer;
}
.chip:hover { border-color: var(--brass); background: var(--brass-soft); }
.chip .chip-label { color: var(--ink-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.chip .chip-value { font-weight: 600; }
.chip .glyph { color: var(--accent); font-size: 15px; }
.chip.unset { border-color: var(--accent); background: var(--accent-soft); }

.datenav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.datenav .step {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--hair-strong); background: var(--surface-alt);
  border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; font-size: 17px;
}
.datenav .step:hover { border-color: var(--brass); background: var(--brass-soft); }
.datenav .current {
  min-height: 40px; padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  font: inherit; font-weight: 600; cursor: pointer; color: var(--ink);
}
.datenav .current:hover { background: var(--surface-sunk); }
.datenav .today-btn {
  min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.datenav .today-btn:hover { background: var(--accent-soft); }

/* ---- chrome: bottom nav (mobile) --------------------------- */
/* R9 — bottom nav on mobile, top nav on desktop. Five items, no more. */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--hair);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .bottomnav { display: none; } }
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; text-decoration: none;
  color: var(--ink-muted); font-size: 11px; font-weight: 500;
}
.bottomnav a svg { width: 20px; height: 20px; }
.bottomnav a[aria-current="page"] { color: var(--accent); }
body.has-bottomnav { padding-bottom: 62px; }
@media (min-width: 900px) { body.has-bottomnav { padding-bottom: 0; } }

/* ---- page furniture ---------------------------------------- */
main { padding: 18px 0 40px; }

.page-head { margin-bottom: 18px; }
.eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--brass); font-weight: 600;
}
.page-title { font-size: 24px; letter-spacing: -.01em; margin-top: 4px; }
@media (min-width: 768px) { .page-title { font-size: 30px; } }
.page-note { color: var(--ink-muted); font-size: 14px; margin-top: 6px; max-width: 62ch; }

.section-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-muted); font-weight: 600; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--hair-strong), transparent);
}

.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px;
}
@media (min-width: 768px) { .card { padding: 18px; } }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.card-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--structure); font-weight: 700;
}

.grid { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-band { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

/* R10 — full-width sections on mobile, never cards inside cards */
@media (max-width: 599px) {
  .card { border-left: 0; border-right: 0; border-radius: 0; margin-left: -16px; margin-right: -16px; }
}

/* ---- the masthead: samvatsara / masa / paksha / tithi ------- */
.masthead { padding: 4px 0 16px; }
.masthead .samvatsara {
  font-family: var(--font-display); font-size: 19px; color: var(--accent);
  line-height: 1.5;
}
@media (min-width: 768px) { .masthead .samvatsara { font-size: 23px; } }
.masthead .ayana { color: var(--ink-muted); font-size: 14px; margin-top: 2px; }
.masthead .masa-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--brass);
}
.masthead .masa {
  font-size: 19px; font-weight: 600; letter-spacing: .01em; color: var(--structure);
}
@media (min-width: 768px) { .masthead .masa { font-size: 22px; } }
.masthead .roman { color: var(--ink-muted); font-size: 13px; font-family: var(--font-ui); }
.masthead .eras {
  margin-left: auto; color: var(--brass); font-size: 13px; font-weight: 600;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}

/* ---- the day band (F2.6) ----------------------------------- */
.band-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.band {
  position: relative; height: 34px; min-width: 320px;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--neutral-band); border: 1px solid var(--hair-strong);
}
.band .seg { position: absolute; top: 0; bottom: 0; }
.band .seg.shubha  { background: var(--shubha); opacity: .82; }
.band .seg.ashubha { background: var(--ashubha); opacity: .92; }
.band .now {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink); box-shadow: 0 0 0 1px var(--surface);
}
.band .now::after {
  content: ""; position: absolute; top: -4px; left: -3px;
  border: 4px solid transparent; border-top-color: var(--ink);
}
.band-scale {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 12px; color: var(--ink-muted); font-family: var(--font-num);
}
.band-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
  font-size: 13px; color: var(--ink-mid);
}
.band-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch.shubha { background: var(--shubha); }
.swatch.ashubha { background: var(--ashubha); }
.swatch.neutral { background: var(--neutral-band); border: 1px solid var(--hair-strong); }

.rise-set {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair);
  font-size: 14px;
}
@media (min-width: 480px) { .rise-set { grid-template-columns: repeat(4, 1fr); } }
.rise-set div { display: flex; flex-direction: column; gap: 1px; }
.rise-set .k { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.rise-set .v { font-family: var(--font-num); font-weight: 600; font-size: 16px; }

/* ---- panchanga rows ---------------------------------------- */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 10px;
  align-items: baseline; padding: 11px 0;
  border-bottom: 1px solid var(--hair); width: 100%;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-alt); }
.row .k {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-muted); font-weight: 600; font-family: var(--font-ui);
}
.row .v { font-weight: 600; }
.row .v .roman { display: block; font-size: 12px; font-weight: 400; color: var(--ink-muted); font-family: var(--font-ui); }
.row .t { font-family: var(--font-num); font-size: 14px; color: var(--ink-mid); white-space: nowrap; }
.row .t .spill { color: var(--accent); font-weight: 700; }
.row-detail {
  padding: 0 0 12px 0; font-size: 14px; color: var(--ink-mid);
  border-bottom: 1px solid var(--hair);
}
.row-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 6px 0 0; }
.row-detail dt { color: var(--ink-muted); font-size: 13px; }
.row-detail dd { margin: 0; font-family: var(--font-num); font-size: 13px; }
.row-detail .why { margin-top: 8px; color: var(--ink-muted); max-width: 58ch; }

/* ---- timings ----------------------------------------------- */
.timing {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair);
}
.timing:last-child { border-bottom: 0; }
/* R14 — colour is NEVER the only encoding. Every row carries a glyph. */
.timing .dot {
  width: 20px; text-align: center; font-size: 13px; font-weight: 700;
  font-family: var(--font-ui);
}
.timing.bad .dot  { color: var(--ashubha); }
.timing.good .dot { color: var(--shubha); }
.timing .name { font-weight: 500; }
.timing .name em { font-style: normal; font-size: 12px; color: var(--ink-muted); display: block; }
.timing .when { font-family: var(--font-num); font-size: 14px; white-space: nowrap; }
.timing.bad .when  { color: var(--ashubha); }
.timing.good .when { color: var(--shubha); }
.timing .when .spill { font-weight: 700; }

.seg-toggle { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 999px; overflow: hidden; }
.seg-toggle button {
  min-height: 36px; padding: 0 14px; border: 0; background: var(--surface-alt);
  color: var(--ink-mid); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.seg-toggle button + button { border-left: 1px solid var(--hair-strong); }
.seg-toggle button[aria-pressed="true"] { background: var(--structure); color: var(--on-structure); }

/* ---- today card / festival --------------------------------- */
.today-card .art {
  height: 64px; border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 160% at 50% 130%, var(--accent-soft), transparent 72%),
    linear-gradient(140deg, var(--brass-soft), var(--surface-alt));
  border: 1px solid var(--hair); display: grid; place-items: center;
  color: var(--brass); font-family: var(--font-display); font-size: 26px;
}
.today-card .fest-name {
  font-size: 20px; font-weight: 600; margin-top: 12px; color: var(--accent);
  line-height: 1.35;
}
.today-card .fest-when { color: var(--ink-muted); font-size: 14px; margin-top: 3px; }
.today-card .fest-desc { font-size: 14px; color: var(--ink-mid); margin-top: 8px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-sunk); color: var(--ink-mid); border: 1px solid var(--hair);
  white-space: nowrap;
}
.tag.major    { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
.tag.ekadashi { background: var(--structure-soft); color: var(--structure); border-color: transparent; }
.tag.fasting  { background: var(--brass-soft); color: var(--brass); border-color: transparent; }
.tag.women    { background: var(--shubha-soft); color: var(--shubha); border-color: transparent; }
.tag.elsewhere{ background: transparent; color: var(--ink-muted); border-style: dashed; }

/* ---- the regional-difference explainer (F1.9) -------------- */
.explainer {
  border: 1px solid var(--brass); border-left-width: 3px;
  background: var(--brass-soft); border-radius: var(--radius);
  padding: 14px 16px;
}
.explainer h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--brass); margin-bottom: 8px;
}
.explainer dl { display: grid; gap: 4px 14px; margin: 0; }
@media (min-width: 600px) { .explainer dl { grid-template-columns: auto 1fr; } }
.explainer dt { color: var(--ink-mid); font-size: 14px; }
.explainer dd { margin: 0; font-weight: 600; font-size: 14px; }
.explainer .why { margin-top: 10px; font-size: 14px; color: var(--ink-mid); max-width: 66ch; }

/* ---- coming up --------------------------------------------- */
.upcoming { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.upcoming::-webkit-scrollbar { height: 6px; }
.upcoming::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 3px; }
.up-card {
  flex: 0 0 auto; min-width: 190px; max-width: 260px;
  padding: 11px 13px; border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: inherit;
}
.up-card:hover { border-color: var(--brass); box-shadow: var(--shadow); }
.up-card .when { font-size: 12px; color: var(--ink-muted); font-family: var(--font-num); }
.up-card .what { font-weight: 600; margin-top: 3px; color: var(--accent); line-height: 1.35; }
.up-card .rel { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }

/* ---- action row -------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--brass); background: var(--brass-soft); color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--structure); }
.btn.ghost:hover { background: var(--structure-soft); }

/* ---- month calendar ---------------------------------------- */
.cal-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px;
}
.cal-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.cal-sub { color: var(--brass); font-size: 13px; font-weight: 600; }

/* R3 / mobile — the grid stays a TRUE 7-column grid at every width,
   because the shape of the week is itself information. */
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--hair-strong); border-radius: var(--radius);
  overflow: hidden; background: var(--hair);
  gap: 1px;
}
.cal .dow {
  background: var(--surface-sunk); padding: 7px 4px; text-align: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-muted); font-weight: 700;
}
.cal .cell {
  background: var(--surface); min-height: 74px; padding: 6px 5px;
  display: flex; flex-direction: column; gap: 2px; align-items: stretch;
  border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: none;   /* the whole cell is the link; underlining it is noise */
}
@media (min-width: 768px) { .cal .cell { min-height: 96px; padding: 8px; } }
.cal .cell:hover { background: var(--surface-alt); }
.cal .cell.blank { background: var(--surface-sunk); cursor: default; }
.cal .cell .d { font-family: var(--font-num); font-weight: 700; font-size: 15px; }
.cal .cell .tithi {
  font-size: 11px; color: var(--ink-muted); font-family: var(--font-num);
  display: flex; align-items: baseline; gap: 3px;
  /* R6 — never clip. "Ekadashi" wraps to a second line rather than
     becoming "Ekadas…", which in an Indic script could change a word. */
  flex-wrap: wrap; line-height: 1.3;
}
/* The day-state word sits on its own line and must stay ONE word — a
   break mid-word ("Ekadas / hi") is the same failure as clipping. It is
   set in the UI face rather than the mono face so it fits a 40px cell at
   360px, and the cell's aria-label carries it for screen readers anyway. */
/* The state word sits on the amavasya and purnima tints, where the lighter
   amber does not clear AA at 11px. --brass-ink is the darker member of the
   same amber family and is what the app uses for text on a warm fill. */
.cal .cell .state {
  display: block; width: 100%; color: var(--brass-ink); font-weight: 700;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: -.01em;
  word-break: keep-all; overflow-wrap: normal; hyphens: none;
}
@media (max-width: 520px) { .cal .cell .state { font-size: 9px; } }
@media (min-width: 768px) { .cal .cell .state { font-size: 11px; } }
.cal .cell .marks { margin-top: auto; display: flex; flex-wrap: wrap; gap: 3px; }
.cal .cell .fdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cal .cell .fname {
  font-size: 10px; line-height: 1.25; color: var(--accent-deep); font-weight: 600;
  display: none;
}
@media (min-width: 768px) { .cal .cell .fname { display: block; } }
.cal .cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal .cell.today .d { color: var(--accent); }
.cal .cell.sel { background: var(--brass-soft); }
.cal .cell.purnima { background: var(--surface-alt); }
.cal .cell.amavasya { background: var(--night); }
:root[data-theme="dark"] .cal .cell.amavasya,
:root:not([data-theme="light"]) .cal .cell.amavasya { background: var(--night); }
/* A paksha marker, not an era label — amber carries no meaning here and
   failed AA on the amavasya tint. */
.cal .cell .glyph { font-size: 10px; color: var(--ink-muted); }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
  font-size: 12px; color: var(--ink-muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }

.day-peek {
  margin-top: 14px; border: 1px solid var(--brass); border-left-width: 3px;
  border-radius: var(--radius); background: var(--surface); padding: 14px;
}
.day-peek .pk-date { font-weight: 700; font-size: 16px; }
.day-peek .pk-line { font-size: 14px; color: var(--ink-mid); margin-top: 5px; font-family: var(--font-num); }

/* ---- festival list ----------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filters button {
  min-height: 38px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--hair-strong); background: var(--surface);
  color: var(--ink-mid); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.filters button[aria-pressed="true"] {
  background: var(--structure); border-color: var(--structure); color: var(--on-structure);
}

.fest {
  display: grid; grid-template-columns: 58px 1fr; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--hair);
}
@media (min-width: 600px) { .fest { grid-template-columns: 72px 1fr; gap: 16px; } }
.fest .date {
  text-align: center; padding: 6px 0; border-radius: var(--radius-sm);
  background: var(--surface-sunk); align-self: start;
}
.fest .date .m { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted); font-weight: 700; }
.fest .date .d { font-family: var(--font-num); font-size: 21px; font-weight: 700; line-height: 1.15; }
.fest .date .w { font-size: 11px; color: var(--ink-muted); }
.fest .name { font-size: 17px; font-weight: 600; color: var(--accent); line-height: 1.35; }
.fest .name .roman { display: block; font-size: 12px; font-weight: 400; color: var(--ink-muted); font-family: var(--font-ui); }
.fest .sub { font-size: 13px; color: var(--ink-mid); margin-top: 3px; }
.fest .times { font-size: 13px; color: var(--ink-muted); font-family: var(--font-num); margin-top: 4px; }
.fest .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.fest.elsewhere { opacity: .62; }
.fest.elsewhere .name { color: var(--ink-mid); }
.fest.elsewhere .date { background: transparent; border: 1px dashed var(--hair-strong); }

/* ---- muhurta ----------------------------------------------- */
.purpose-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.purpose-grid button {
  min-height: 44px; padding: 0 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair-strong); background: var(--surface);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-mid); cursor: pointer;
}
.purpose-grid button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep);
}
.range { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); font-weight: 600; }
.field input, .field select {
  min-height: 44px; padding: 0 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 15px;
}

.mres { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.mres:last-child { border-bottom: 0; }
.mres-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Strength is encoded THREE ways — bar length, word, and colour — so it
   survives greyscale printing and colour-blindness alike. */
.strength { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.strength .bar {
  width: 76px; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--surface-sunk); border: 1px solid var(--hair-strong);
}
.strength .bar i { display: block; height: 100%; }
.strength .word { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mres.strong   .bar i { background: var(--shubha); }
.mres.strong   .word { color: var(--shubha); }
.mres.moderate .bar i { background: var(--brass); }
.mres.moderate .word { color: var(--brass); }
.mres.avoid    .bar i { background: var(--ashubha); }
.mres.avoid    .word { color: var(--ashubha); }
.mres .when { font-weight: 700; font-family: var(--font-num); }
.mres .detail { font-size: 13px; color: var(--ink-mid); margin-top: 5px; }
.mres .why { font-size: 13px; color: var(--ink-muted); margin-top: 4px; max-width: 74ch; }

/* ---- sankalpam --------------------------------------------- */
.sankalpam-text {
  font-family: var(--font-display); font-size: 20px; line-height: 2;
  padding: 18px; border-radius: var(--radius);
  background: var(--surface-alt); border: 1px solid var(--brass);
}
body.script-telugu   .sankalpam-text { font-family: "Noto Serif Telugu", var(--font-indic); }
body.script-kannada  .sankalpam-text { font-family: "Noto Serif Kannada", var(--font-indic); }
body.script-gujarati .sankalpam-text { font-family: "Noto Serif Gujarati", var(--font-indic); }
.sankalpam-text .line { display: block; }
/* The terms in colour are the ones that change every day. */
.sankalpam-text .val { color: var(--accent); font-weight: 600; }
.sankalpam-text .blank {
  display: inline-block; min-width: 5em; border-bottom: 2px dotted var(--brass);
}
.sk-size-1 .sankalpam-text { font-size: 20px; }
.sk-size-2 .sankalpam-text { font-size: 26px; line-height: 1.95; }
.sk-size-3 .sankalpam-text { font-size: 33px; line-height: 1.9; }

/* ---- modal / sheet ----------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(20,16,12,.5);
  display: grid; place-items: end center; padding: 0;
}
@media (min-width: 768px) { .scrim { place-items: center; padding: 24px; } }
.scrim[hidden] { display: none; }
.sheet {
  width: 100%; max-width: 720px; max-height: 88vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: 14px 14px 0 0; box-shadow: var(--shadow-lift);
}
@media (min-width: 768px) { .sheet { border-radius: 14px; max-height: 84vh; } }
.sheet-head {
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hair);
}
.sheet-head h2 { font-size: 17px; }
.sheet-body { padding: 14px 16px; }
.sheet-foot {
  position: sticky; bottom: 0; background: var(--surface-alt);
  border-top: 1px solid var(--hair); padding: 12px 16px;
}

.two-pane { display: grid; gap: 18px; }
@media (min-width: 640px) { .two-pane { grid-template-columns: 1fr 1fr; gap: 22px; } }
.pane-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-muted); font-weight: 700; margin-bottom: 8px;
}
.opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  min-height: 44px;
}
.opt:hover { background: var(--surface-alt); }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt .radio {
  width: 17px; height: 17px; flex: 0 0 17px; margin-top: 3px; border-radius: 50%;
  border: 2px solid var(--hair-strong);
}
.opt[aria-pressed="true"] .radio { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.opt .t { font-weight: 600; }
.opt .s { font-size: 12px; color: var(--ink-muted); display: block; }
.opt.disabled { opacity: .48; cursor: not-allowed; }

.search-input {
  width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 16px;
}
.results { margin-top: 8px; display: flex; flex-direction: column; }
.results button {
  display: block; width: 100%; text-align: left; padding: 11px 10px; min-height: 44px;
  background: none; border: 0; border-bottom: 1px solid var(--hair);
  font: inherit; color: inherit; cursor: pointer;
}
.results button:hover { background: var(--surface-alt); }
.results .r-name { font-weight: 600; }
.results .r-sub { font-size: 12px; color: var(--ink-muted); }

/* The consequence panel: what this preset actually gives you. It is what
   turns an opaque setting into an informed choice. */
.consequence { font-size: 13px; color: var(--ink-mid); line-height: 1.6; }
.consequence strong { color: var(--ink); }
.consequence .unreviewed {
  display: block; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12px;
}

/* ---- tables (methodology, regions) ------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
table.data th, table.data td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
table.data th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); font-weight: 700; background: var(--surface-sunk);
}
table.data tr:last-child td { border-bottom: 0; }

.prose { max-width: 68ch; }
.prose h2 { font-size: 20px; margin: 28px 0 8px; color: var(--structure); }
.prose h3 { font-size: 16px; margin: 20px 0 6px; }
.prose p { margin: 0 0 12px; color: var(--ink-mid); }
.prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-mid); }
.prose li { margin-bottom: 5px; }

.note {
  border-left: 3px solid var(--brass); background: var(--brass-soft);
  padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px; color: var(--ink-mid); margin: 14px 0;
}
.note strong { color: var(--ink); }

/* ---- footer ------------------------------------------------ */
.site-foot {
  border-top: 1px solid var(--hair); margin-top: 40px;
  padding: 22px 0 30px; background: var(--ground-deep);
}
.site-foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.site-foot .links a { color: var(--structure); text-decoration: none; }
.site-foot .links a:hover { text-decoration: underline; }
.site-foot .provenance {
  margin-top: 12px; font-size: 12px; color: var(--ink-muted); max-width: 70ch; line-height: 1.6;
}

.empty { padding: 26px 0; color: var(--ink-muted); font-size: 15px; }

/* ---- print (R12) ------------------------------------------- */
@media print {
  :root { --ground: #fff; --surface: #fff; --ink: #000; --ink-mid: #222; --ink-muted: #555; }
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  .topbar, .contextbar, .bottomnav, .actions, .filters, .seg-toggle,
  .icon-btn, .datenav, .scrim, .site-foot .links { display: none !important; }
  main { padding: 0; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; page-break-inside: avoid; }
  .cal { border-color: #333; }
  .cal .cell { min-height: 78px; }
  .cal .cell .fname { display: block; }
  .grid-2, .grid-band { grid-template-columns: 1fr 1fr !important; }
  a { color: #000; text-decoration: none; }
  .band .seg.shubha  { background: #bbb; }
  .band .seg.ashubha { background: #444; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ---- reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- content protection ------------------------------------ */
/* A deterrent layer, not protection — see public/js/protect.js.
   It must never cost keyboard navigation, focus rings, screen
   readers, or our own Copy / Share / Print buttons. */
body.protected {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Anything the reader is meant to interact with stays selectable.
   The sankalpam is the clearest case: it exists to be recited and
   passed on, so it carries data-allow-copy and opts back in. */
body.protected input,
body.protected textarea,
body.protected select,
body.protected [contenteditable="true"],
body.protected [data-allow-copy],
body.protected [data-allow-copy] * {
  -webkit-user-select: text;
  user-select: text;
}
body.protected img,
body.protected .band,
body.protected .art { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }

/* The devtools heuristic blurs content rather than blocking the page:
   the check is wrong often enough (zoom, sidebars, narrow windows)
   that a false positive must cost a glance, not the visit. */
body.sp-shielded main,
body.sp-shielded .masthead,
body.sp-shielded .contextbar {
  filter: blur(9px);
  transition: filter .12s linear;
  pointer-events: none;
}
body.sp-shielded::after {
  content: "Content hidden while developer tools are open.";
  position: fixed; inset: auto 0 50% 0; z-index: 70; text-align: center;
  font: 600 15px/1.5 var(--font-ui); color: var(--ink-muted);
  padding: 0 24px;
}
@media print { body.sp-shielded main { filter: none; } }

/* ---- context bar on small screens -------------------------- */
/* The date stepper must never scroll off the edge — it is the most-used
   control on the page and R4 wants it thumb-reachable. Below 768px the
   chips and the date get a row each rather than sharing one that
   overflows. */
@media (max-width: 767px) {
  .contextbar-in {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px 8px;
    padding: 8px 12px;
  }
  .contextbar-in > .chip { flex: 1 1 auto; min-width: 0; }
  .contextbar-in > .chip .chip-value {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .datenav {
    flex: 1 0 100%;
    margin-left: 0;
    justify-content: space-between;
    border-top: 1px solid var(--hair);
    padding-top: 8px;
  }
  .datenav .current { flex: 1; text-align: center; }
}

/* ---- calendar header on small screens ---------------------- */
@media (max-width: 767px) {
  .cal-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
  .cal-head .cal-nav { min-height: 44px; padding: 0 10px; }
  .cal-head .cal-titles { text-align: center; min-width: 0; }
  .cal-head .cal-title { font-size: 18px; }
  .cal-head .cal-sub { font-size: 12px; }
  .cal-head .cal-print { grid-column: 1 / -1; justify-self: end; }
  .cal .cell { min-height: 82px; }
}
@media (min-width: 768px) { .cal-head .cal-print { margin-left: auto; } }
@media (max-width: 520px) { .cal-head .cal-navname { display: none; } }

/* Below 600px a 36px-wide cell cannot hold "Amavasya" without clipping it,
   and a clipped word is exactly what R6 forbids. The word is dropped, not
   squeezed — nothing is lost: the tithi number already reads కృ15 / శు11,
   the cell keeps its background state, the legend names both, and the
   cell's aria-label still says the word in full for screen readers. */
@media (max-width: 599px) {
  .cal .cell .state { display: none; }
  .cal .cell { padding: 6px 4px; }
}

/* ---- display options in the settings sheet ----------------- */
.display-opts { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .display-opts { grid-template-columns: 1fr 1fr; } }
.display-opts .field select { width: 100%; }

/* ---- lunar masa grid --------------------------------------- */
/* Laid out by tithi rather than by weekday column: a masa is 29 or 30
   tithis and does not align with a week, so a Sun–Sat grid would draw a
   Gregorian idea over a lunar one. The weekday is printed on each cell. */
.paksha-label {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 8px; font-size: 14px; font-weight: 700; color: var(--structure);
}
.paksha-label .glyph { font-size: 17px; color: var(--brass); }

.mgrid {
  display: grid; gap: 1px; background: var(--hair);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hair-strong); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 560px)  { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .mgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mcell {
  background: var(--surface); padding: 9px 10px; min-height: 76px;
  display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: inherit;
}
.mcell:hover { background: var(--surface-alt); }
.mcell .mt { font-weight: 700; font-size: 13px; line-height: 1.35; }
.mcell .mg { font-size: 11px; color: var(--ink-muted); }
.mcell .mf { font-size: 11px; color: var(--accent); font-weight: 600; line-height: 1.35; margin-top: auto; }
.mcell.today   { box-shadow: inset 0 0 0 2px var(--accent); }
.mcell.today .mt { color: var(--accent); }
.mcell.purnima  { background: var(--brass-soft); }
.mcell.amavasya { background: var(--night); }
.mcell.ekadashi .mt { color: var(--structure); }

/* ---- observance lists -------------------------------------- */
.obs-list { display: flex; flex-direction: column; }
.obs {
  display: grid; grid-template-columns: 58px 1fr; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--hair);
}
@media (min-width: 600px) { .obs { grid-template-columns: 72px 1fr; gap: 16px; } }
.obs:last-child { border-bottom: 0; }
/* A day already gone stays in the list — the year view is a reference, not
   a feed — but it steps back so the next one is what you land on. */
.obs.past { opacity: .55; }
.obs .date {
  text-align: center; padding: 6px 0; border-radius: var(--radius-sm);
  background: var(--surface-sunk); align-self: start;
  text-decoration: none; color: inherit; display: block;
}
.obs .date .m { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted); font-weight: 700; }
.obs .date .d { display: block; font-family: var(--font-num); font-size: 21px; font-weight: 700; line-height: 1.15; }
.obs .date .w { display: block; font-size: 11px; color: var(--ink-muted); }
.obs .name { font-size: 17px; font-weight: 600; color: var(--accent); line-height: 1.35; }
.obs .name .roman { display: block; font-size: 12px; font-weight: 400; color: var(--ink-muted); font-family: var(--font-ui); }
.obs .name .moon-glyph { color: var(--brass); margin-right: 5px; }
.obs .sub { font-size: 13px; color: var(--ink-mid); margin-top: 3px; }
.obs .times { font-size: 13px; color: var(--ink-mid); margin-top: 5px; }
.obs .times .num { font-family: var(--font-num); font-weight: 600; }
.obs .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.obs-ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-mid); font-size: 14px; }
.obs-ul li { margin-bottom: 4px; }

/* ---- balam tables ------------------------------------------ */
.balam-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.balam-cell {
  padding: 10px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--hair); background: var(--surface);
  display: flex; flex-direction: column; gap: 2px;
}
/* R14 — the verdict is a word and a glyph, never colour alone. */
.balam-cell.good { background: var(--shubha-soft); border-color: var(--shubha); }
.balam-cell.bad  { background: var(--ashubha-soft); border-color: var(--ashubha); }
.balam-cell .bl-name { font-weight: 700; font-size: 14px; }
.balam-cell .bl-note { font-size: 11px; color: var(--ink-muted); }
.balam-cell .bl-verdict { font-size: 12px; font-weight: 700; margin-top: 2px; }
.balam-cell.good .bl-verdict { color: var(--shubha-ink); }
.balam-cell.bad  .bl-verdict { color: var(--ashubha-ink); }

/* A window running right now, on the choghadiya page. */
.timing.running { background: var(--brass-soft); box-shadow: inset 3px 0 0 var(--brass); }
.timing.running .name em { color: var(--brass-ink); font-weight: 700; }

/* ---- settings page ----------------------------------------- */
.opt input[type="radio"] { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 17px; }
details summary::-webkit-details-marker { color: var(--brass); }

/* The roman gloss under the samvatsara: a reader who needs the word gets it
   without an English word landing inside an Indic phrase. */
.masthead .samvatsara .roman {
  display: block; font-family: var(--font-ui); font-size: 13px;
  font-weight: 400; color: var(--ink-muted); letter-spacing: 0;
}