/* Ishwar Panchang: shared styles. Mobile first; two columns on the home page from 860px.
   Colours are CSS variables, light and dark. Most readers are over 40 (owner review, 26 Oct), so text is
   18px by default, main and secondary text reach 7:1 contrast (WCAG AAA) in both themes, no text is
   smaller than 14px, and every page reflows at 320px wide (200% zoom) without sideways scrolling. */
@font-face { font-family: "Hind"; font-weight: 400; font-display: swap; src: url(/assets/fonts/hind-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2731; }
@font-face { font-family: "Hind"; font-weight: 500; font-display: swap; src: url(/assets/fonts/hind-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: "Hind"; font-weight: 600; font-display: swap; src: url(/assets/fonts/hind-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
/* Letters with marks (ā, ṁ, ṣ, ḥ) for Sanskrit in Roman letters on /mission */
@font-face { font-family: "Hind"; font-weight: 400; font-display: swap; src: url(/assets/fonts/hind-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hind"; font-weight: 400; font-display: swap; src: url(/assets/fonts/hind-devanagari-400.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Yatra One"; font-weight: 400; font-display: swap; src: url(/assets/fonts/yatra-one-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2122; }
@font-face { font-family: "Yatra One"; font-weight: 400; font-display: swap; src: url(/assets/fonts/yatra-one-devanagari-400.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A8E0-A8FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format("woff2"); }

:root {
  --bg: #F4F4F9; --surface: #FFFFFF; --ink: #1D1B3A; --muted: #4A4763; --line: #DEDCEA; --line-strong: #B9B6CF;
  --accent: #843A04; --accent-soft: #FCEFD9; --accent-ink: #6E3305;
  --good: #136F36; --good-soft: #E2F2E7; --warn: #A31F15; --warn-soft: #FBE6E3; --calm: #5E5B83; --calm-soft: #ECEBF4;
  --moon-lit: #F2E4BC; --moon-dark: #2C2A55; --moon-ring: #CFCBE3;
  --btn: #35315E; --btn-ink: #FFFFFF; --field: #FFFFFF; --field-ink: #1D1B3A;
  /* Edges of boxes people type into: at least 3:1 against the page and the card (review A2) */
  --field-line: #79738C;
  /* Lines between the rows of a table or list: at least 3:1 against the page, the card and a
     highlighted row, in light and dark (WCAG 1.4.11; owner, 31 Oct), and no darker than that needs, so
     tables stay light (owner, 1 Nov). The highlighted row is the closest (3.07:1 light, 3.06:1 dark).
     tests/a11y.js measures them as drawn. */
  --rule: #89879D;
  --f-display: "Yatra One", "Hind", Georgia, serif;
  --f-body: "Hind", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111029; --surface: #1A1937; --ink: #ECEAF7; --muted: #C4C1DC; --line: #2F2D53; --line-strong: #4A4778;
    --accent: #F2A63A; --accent-soft: #3A2913; --accent-ink: #FBD9A4;
    --good: #5ACB88; --good-soft: #15301F; --warn: #F38B80; --warn-soft: #3A1A1C; --calm: #B4B1D6; --calm-soft: #26244A;
    --moon-lit: #F5E6BA; --moon-dark: #2A2950; --moon-ring: #3D3B68;
    --btn: #ECEAF7; --btn-ink: #111029; --field: #232146; --field-ink: #ECEAF7; --field-line: #8985B8; --rule: #757390;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111029; --surface: #1A1937; --ink: #ECEAF7; --muted: #C4C1DC; --line: #2F2D53; --line-strong: #4A4778;
  --accent: #F2A63A; --accent-soft: #3A2913; --accent-ink: #FBD9A4;
  --good: #5ACB88; --good-soft: #15301F; --warn: #F38B80; --warn-soft: #3A1A1C; --calm: #B4B1D6; --calm-soft: #26244A;
  --moon-lit: #F5E6BA; --moon-dark: #2A2950; --moon-ring: #3D3B68;
  --btn: #ECEAF7; --btn-ink: #111029; --field: #232146; --field-ink: #ECEAF7; --field-line: #8985B8; --rule: #757390;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { font-size: 112.5%; scroll-padding-top: 84px; } /* a focused link never hides under the sticky top bar */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 1rem; line-height: 1.55; overflow-wrap: break-word; }
/* An email address can break anywhere, so it never makes a narrow page scroll sideways (WCAG 1.4.12) */
a[href^="mailto:"] { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
button, select, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tz { font-size: max(.78em, .8rem); font-weight: 600; letter-spacing: .02em; }
.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; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 8px; }

/* ---------- Header ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.bar-in { max-width: 1080px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 12px; }
.brand { margin-right: auto; text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: 2px; min-width: 0; }
.brand b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.2rem, 6vw, 1.45rem); line-height: 1.1; white-space: nowrap; }
.brand b span { color: var(--accent); }
.brand sup { font-size: .8rem; color: var(--muted); }
/* Verses on /mission: Sanskrit, Roman letters, our English (the most prominent), then the reference */
.verse { margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); display: grid; gap: 12px; }
.verse p { margin: 0; }
.verse-sa { font-family: "Hind", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", sans-serif; line-height: 1.9; }
.verse-roman { color: var(--muted); line-height: 1.6; }
.verse-en { font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
.verse figcaption { color: var(--muted); font-size: .9rem; }
/* Narrow phones: the name on two lines, so it never runs under the light/dark and city buttons */
@media (max-width: 420px) {
  .bar-in { gap: 8px; }
  .brand b { white-space: normal; font-size: 1.15rem; line-height: 1.05; }
  .brand b span { display: block; }
  .city-btn { padding: 0 10px; }
}
@media (max-width: 359px) { .brand sup { display: none; } }
/* The mission line in the top bar, only where it fits on the same line (owner, 26 Oct: "I dont want
   to sacrifice space"); phones and tablets keep it in the footer. It wraps rather than being cut off
   when a reader widens the letter and word spacing (WCAG 1.4.12, 30 Oct check). */
.bar-tag { display: none; color: var(--muted); font-family: var(--f-display); font-size: .95rem; line-height: 1.25; letter-spacing: .01em; text-decoration: none; min-width: 0; }
.bar-tag:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 1024px) { .brand { margin-right: 4px; } .bar-tag { display: block; margin-right: auto; } }
.city-btn { min-height: 44px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; }
.city-btn:hover { border-color: var(--accent); }
/* Light / dark switch (owner question, 26 Oct): follows the phone until tapped, then remembered on this phone */
.theme-btn { min-width: 44px; min-height: 44px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.theme-btn:hover { border-color: var(--accent); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: none; }
.theme-btn[aria-pressed="true"] .i-sun { display: block; }
.theme-btn[aria-pressed="true"] .i-moon { display: none; }
.city-btn svg { width: 12px; height: 12px; }

/* ---------- Page ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
.narrow { max-width: 720px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.45rem, 5.5vw, 2.1rem); margin: 4px 0 6px; }
h2 { font-size: 1.2rem; margin: 0 0 8px; }
h3 { font-size: 1.02rem; margin: 0 0 6px; }
.eyebrow { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.lead { font-size: 1.08rem; margin: 0 0 14px; }
/* The tag line on /mission: the logo font, like the top bar and footer (owner, 30 Oct) */
.motto { font-family: var(--f-display); letter-spacing: .01em; }
.muted { color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.stack { display: grid; gap: 14px; }
.btn { min-height: 48px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 8px 16px; cursor: pointer; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.25; }
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn.solid { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn.solid:hover { color: var(--btn-ink); opacity: .92; }
.btn small { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); }
.btn.solid small { color: inherit; opacity: .85; }
.btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.link-go { font-weight: 500; }
.tag { display: inline-block; font-size: .8rem; font-weight: 600; padding: 1px 9px; border-radius: 99px; border: 1.5px solid currentColor; color: var(--ink); white-space: nowrap; }
.tag.dash { border-style: dashed; }
.note { font-size: .9rem; color: var(--muted); }
.box { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px 14px; }

/* ---------- Tap to explain (R1-11) ---------- */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: help; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); display: inline; text-align: inherit; }
.term:hover { text-decoration-color: var(--accent); }
.sheet-back { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 40; }
.sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; background: var(--surface); color: var(--ink); border-radius: 18px 18px 0 0; padding: 10px 16px max(18px, env(safe-area-inset-bottom, 0px)); max-height: 85vh; overflow: auto; box-shadow: 0 -8px 30px rgb(0 0 0 / .25); max-width: 640px; margin: 0 auto; }
.sheet .grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sheet-head h2 { margin: 0; font-size: 1.25rem; }
.close { min-width: 44px; min-height: 44px; border: 1.5px solid var(--line-strong); border-radius: 22px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1.1rem; }
.sheet p { margin: 4px 0 8px; font-size: 1.05rem; }
.city-list { list-style: none; margin: 0; padding: 0; }
.city-list li + li { border-top: 1px solid var(--rule); }
.city-list a { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; min-height: 56px; padding: 12px 4px; text-decoration: none; color: var(--ink); }
.city-list .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); margin-top: 2px; display: grid; place-items: center; }
.city-list [aria-current="true"] .dot::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.city-list b { display: block; font-size: 1.1rem; }
.city-list small { color: var(--muted); font-size: .92rem; }

/* ---------- Home ---------- */
/* Phones: one column in the agreed order (answer, India, today's details folded, calendar and PDF,
   next festival, festival list, survey; owner, 31 Oct, T78). Desktop: the day on the left with today's
   details open as a plain section (owner, 1 Nov), festivals on the right. */
.home { display: grid; gap: 14px; }
.col { display: grid; gap: 14px; min-width: 0; align-content: start; }
@media (max-width: 859px) {
  .home > .col { display: contents; }
  .today { order: 1; } #india { order: 2; } .more { order: 3; } .cal-card { order: 4; } .nf { order: 5; } .festivals { order: 6; } .survey-card { order: 7; }
}
@media (min-width: 860px) { .home { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; } }
.stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px auto; gap: 8px; }
.stepper .btn { min-height: 44px; padding: 4px 10px; border-width: 1px; border-color: var(--line-strong); }
.stepper .btn[aria-disabled="true"] { border-style: dashed; color: var(--muted); cursor: not-allowed; }
.stepper input { min-height: 44px; border: 1.5px solid var(--field-line); border-radius: 12px; background: var(--field); color: var(--field-ink); padding: 0 8px; min-width: 0; width: 100%; text-align: center; }
/* The date box shows "Wed 28 Oct" over the phone's or browser's own box, which can cut the year off
   or put the month first; taps and clicks go through to the box underneath. Phones show the year only
   when it isn't this year, computers always. On a computer the browser's own box comes back while it
   has focus, so a typed date can be seen. Windows high contrast keeps the browser's own box.
   The column never grows past its space: iPhone Safari's own box asks for room by its contents and
   ran under the Next button (iPhone check, 31 Oct). */
.datebox { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.datebox > * { grid-area: 1 / 1; }
/* iPhone Safari also sets a date box's width itself, to fit its longest date, unless the page gives a
   fixed width, and only for the box it draws itself: a 1px width that grows to the column, and on
   iPhones our own box drawn instead of Safari's (second iPhone check, 31 Oct) */
.datebox input { width: 1px; min-width: 100%; }
@supports (-webkit-touch-callout: none) { .datebox input { -webkit-appearance: none; appearance: none; } }
.date-face { display: none; }
@media (forced-colors: none) {
  .datebox input { color: transparent; -webkit-text-fill-color: transparent; }
  .datebox input::-webkit-calendar-picker-indicator { opacity: 0; }
  .date-face { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0 .3em; padding: 6px 10px; pointer-events: none; color: var(--field-ink); line-height: 1.25; }
  .date-face span { white-space: nowrap; }
}
@media (pointer: coarse) { .date-face.this-year .yr { display: none; } }
@media (pointer: fine) and (forced-colors: none) {
  .datebox input:focus { color: var(--field-ink); -webkit-text-fill-color: var(--field-ink); }
  .datebox input:focus::-webkit-calendar-picker-indicator { opacity: 1; }
  .datebox input:focus + .date-face { visibility: hidden; }
}
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 2px; }
.moon svg { display: block; width: 68px; height: 68px; }
@media (min-width: 860px) { .moon svg { width: 84px; height: 84px; } }
.tithi-name { font-family: var(--f-display); font-size: clamp(1.7rem, 7.5vw, 2.5rem); line-height: 1.1; margin: 0; font-weight: 400; }
.tithi-sub { color: var(--muted); }
.tithi-deva { font-family: var(--f-display); color: var(--accent); font-size: 1.1rem; }
.summary { font-size: 1rem; margin: 8px 0 0; }
.now:empty { display: none; }
.progress { margin-top: 10px; height: 6px; background: var(--calm-soft); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.progress-label { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.compare { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 12px 14px; }
.compare.diff { border-color: var(--accent); background: var(--accent-soft); }
.compare p { margin: 0; }
/* The India card and the Upcoming festival card start with a heading, so screen readers can jump to them (30 Oct check) */
.compare h2 { font-size: 1rem; line-height: inherit; text-wrap: wrap; margin: 0; }
.compare h2 + p { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.compare.diff h2 + p { color: var(--ink); }
h2.eyebrow { line-height: inherit; text-wrap: wrap; }
.cal-card h2 { font-size: 1.2rem; }
.cal-card .btn-row { margin: 12px 0 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Two-line buttons (calendar card): the drawing on the left, then the bold line and the small line under
   it, both starting at the same left edge, so they line up however the words wrap (owner, 1 Nov: the bold
   line was centred beside the drawing and the small line across the whole button) */
.btn.two-line { justify-content: flex-start; gap: 12px; width: 100%; text-align: left; padding: 10px 16px; }
.btn-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.btn-main { display: block; }
.ico { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nf { border: 1.5px solid var(--line-strong); }
.nf .nf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nf .nf-name { font-size: 1.35rem; font-weight: 600; margin: 0; }
.nf .nf-date { font-weight: 600; font-size: 1.1rem; }
.nf p { margin: 4px 0 8px; }
/* Today's details: a box that opens with a tap, closed on phones and open on computers (owner, 31 Oct,
   T78 option B). The words say what the tap does ("Show today's details", "Hide today's details"),
   because "More for today" was confusing (26 Oct); the small line under them always shows. A drawn
   chevron, as on the festival rows, turns up when open. */
details.more { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r); }
details.more > summary { list-style: none; cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 10px 48px 10px 16px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
details.more[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
@media (hover: hover) { details.more > summary:hover #more-title { text-decoration: underline; text-underline-offset: 3px; } }
details.more #more-title { font-weight: 600; font-size: 1.05rem; }
details.more > summary small { font-weight: 400; color: var(--muted); font-size: .9rem; }
/* Computers: the same details as a plain section with a heading, nothing to open or close (owner, 1 Nov) */
section.more { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
section.more > h2 { font-size: 1.05rem; margin: 0; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
section.more > h2 small { flex-basis: 100%; font-weight: 400; color: var(--muted); font-size: .9rem; }
.more-body { padding: 0 16px 16px; display: grid; gap: 14px; }
.limbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.limb { background: var(--surface); padding: 10px 12px; min-width: 0; }
.limb .k { font-size: .82rem; color: var(--muted); }
.limb .v { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.limb .t { font-size: .88rem; color: var(--muted); }
.sky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 380px) { .sky { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sky div { text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--calm-soft); }
.sky span { display: block; font-size: .8rem; color: var(--muted); }
.sky b { font-family: var(--f-mono); font-weight: 500; font-size: 1rem; }
.timeline { position: relative; height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--calm-soft), var(--accent-soft) 50%, var(--calm-soft)); overflow: hidden; }
.timeline .seg { position: absolute; top: 0; bottom: 0; }
.seg.rahu { background: var(--warn); opacity: .85; }
.seg.yama { background: var(--calm); opacity: .7; }
.seg.gulika { background: var(--calm); opacity: .4; }
.seg.abhijit { background: var(--good); opacity: .85; }
.seg.now { width: 2px; background: var(--ink); }
.tl-ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.timings { display: grid; gap: 4px; }
.timing { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.timing i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.timing small { color: var(--muted); }
/* Phones: the time goes on its own line under the name, so a long name, a note or large phone text
   never runs into it (owner test on a Galaxy M52 in Firefox, 26 Oct) */
@media (max-width: 600px) {
  .timing { grid-template-columns: 12px minmax(0, 1fr); row-gap: 2px; }
  .timing > span:last-child { grid-column: 2; }
  .timing > span:last-child:empty { display: none; }
}

/* Festival list */
.fhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.toggle { display: inline-flex; gap: 10px; align-items: center; color: var(--muted); cursor: pointer; min-height: 44px; }
.toggle input { accent-color: var(--accent); width: 22px; height: 22px; }
.fl-note { margin: 0; }
.legend { display: grid; grid-template-columns: minmax(0, 1fr) 6.2em 6.2em; gap: 6px; padding: 0 40px 0 14px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legend span:not(:first-child) { text-align: right; }
.flist { display: grid; gap: 8px; }
details.fest { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 80px; }
details.fest.differs { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
details.fest[open] { border: 1.5px solid var(--ink); }
details.fest > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 6.2em 6.2em; gap: 6px; align-items: center; padding: 12px 40px 12px 14px; min-height: 52px; position: relative; }
details.fest > summary::-webkit-details-marker { display: none; }
/* A down arrow shows the row opens (review: the browser's own marker is hidden); it turns up when open */
details.fest > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
details.fest[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fname { font-weight: 600; line-height: 1.25; }
.fname small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.fname .tag { margin-top: 5px; font-size: .8rem; }
.fdate { text-align: right; line-height: 1.2; font-size: .95rem; }
.fdate b { display: block; font-weight: 600; }
.fdate span { color: var(--muted); font-size: .8rem; }
/* Each date's place ("London", "India") is in the markup for screen readers; shown on phones,
   where the column headings are hidden (review A5) */
.fdate .flabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fdetail { margin: 0 14px; padding: 10px 0 14px; border-top: 1px dashed var(--line-strong); display: grid; gap: 8px; font-size: .95rem; }
.fdetail p { margin: 0; }
.fdetail .btn-row { margin-top: 4px; }
.fest.past { display: none; }
@media (max-width: 430px) {
  .legend { display: none; }
  details.fest > summary { grid-template-columns: 1fr 1fr; }
  details.fest > summary .fname { grid-column: 1 / -1; }
  .fdate { text-align: left; }
  .fdate .flabel { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; }
}
.showall { justify-self: center; }
.empty { padding: 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
.loading { color: var(--muted); padding: 24px 0; text-align: center; }

/* ---------- Festival pages ---------- */
.answer { font-size: clamp(1.7rem, 7vw, 2.4rem); margin: 4px 0 6px; }
.after { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 10px 14px; margin: 8px 0 12px; }
.muhurat .big { overflow-wrap: anywhere; font-size: clamp(1.6rem, 9vw, 2.6rem); font-weight: 600; font-family: var(--f-mono); letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 8px; }
.muhurat .big .tz { font-family: var(--f-body); font-size: .5em; }
.cities-table, .week { width: 100%; border-collapse: collapse; }
.cities-table th, .week th { text-align: left; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1.5px solid var(--ink); }
.cities-table td, .week td { padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
/* A tag in a table cell ("UK earlier", "differs") always starts its own line under the words, so it sits
   in the same place on every row and every screen, not beside a short name and under a long one (owner, 31 Oct) */
.cities-table td .tag, .week td .tag { display: block; width: fit-content; margin-top: 6px; }
.cities-table td:not(:first-child) .tag { margin-left: auto; }
.cities-table td:not(:first-child), .cities-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.week td.d { white-space: nowrap; }
/* Phones: dates may wrap, so wider letter spacing never pushes the table off the screen (WCAG 1.4.12) */
@media (max-width: 430px) { .cities-table td, .cities-table th, .cities-table td:not(:first-child), .cities-table th:not(:first-child), .week td, .week th, .week td.d { white-space: normal; padding: 8px 4px; } .week .tag { white-space: normal; } }
.cities-table tr.chosen td { font-weight: 600; background: var(--accent-soft); }
.week tr.main td { font-weight: 600; }
.hero-img { margin: 0; }
.hero-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--calm-soft); }
.why-box { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 14px; background: var(--surface); }
.why-box p { margin: 4px 0 0; }
.city-only { display: none; }
.city-only.on { display: block; }

/* ---------- Text pages ---------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 26px; }
.prose li { margin: 4px 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose th, .prose td { text-align: left; border-bottom: 1px solid var(--rule); padding: 8px 6px; vertical-align: top; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; }
.tabs button { min-height: 50px; border: 0; background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; padding: 6px 4px; line-height: 1.2; }
.tabs button small { display: block; font-weight: 400; font-size: .8rem; }
.tab-panel { margin-top: 14px; }
.tabs button + button { border-left: 1.5px solid var(--ink); }
.tabs button[aria-selected="true"] { background: var(--btn); color: var(--btn-ink); }
.steps { padding-left: 22px; }
.copyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.copyrow input { font-size: .85rem; }
.steps li { margin: 6px 0; }
/* Android calendar steps (bug I26; owner, 31 Oct, T78 option B): one numbered list, and each device sees
   only its own button and steps. help.js marks a computer; without that mark, the phone steps show. */
.on-computer { display: none; }
.is-computer .on-computer { display: block; }
.is-computer .on-phone { display: none; }
.steps .step-btn { width: 100%; min-height: 56px; margin: 10px 0 4px; }
details.faq { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
details.faq + details.faq { margin-top: 8px; }
details.faq > summary { padding: 12px 14px; cursor: pointer; font-weight: 600; min-height: 48px; }
details.faq > div { padding: 0 14px 12px; }

/* ---------- Forms: survey and feedback (R1-15, R1-16, R1-Q2) ---------- */
.choices { display: grid; gap: 10px; margin: 12px 0; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; font-weight: 500; width: 100%; }
.choice:hover { border-color: var(--ink); }
.choice[aria-pressed="true"], .choice:has(input:checked) { border-color: var(--ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--ink); }
.choice input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; margin: 0; }
label.field { display: grid; gap: 6px; font-weight: 600; }
textarea, input[type="text"], input[type="email"] { width: 100%; min-height: 48px; border: 1.5px solid var(--field-line); border-radius: 12px; padding: 10px 12px; background: var(--field); color: var(--field-ink); caret-color: var(--field-ink); -webkit-text-fill-color: var(--field-ink); }
textarea { min-height: 110px; resize: vertical; }
::placeholder { color: var(--muted); opacity: 1; -webkit-text-fill-color: var(--muted); }
.progressbar { height: 8px; background: var(--calm-soft); border-radius: 99px; overflow: hidden; }
.progressbar i { display: block; height: 100%; background: var(--accent); }
.qnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.qnav .btn { min-width: 0; padding: 6px 14px; white-space: nowrap; }
.qnav .note { text-align: center; margin: 0; }
.status { padding: 10px 14px; border-radius: 12px; background: var(--good-soft); color: var(--ink); }
.status.err { background: var(--warn-soft); }
.decoy { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); margin-top: 24px; }
.site-foot .in { max-width: 1080px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; list-style: none; padding: 0; margin: 12px 0; }
@media (min-width: 700px) { .foot-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-links a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 500; }
.company { color: var(--muted); font-size: .9rem; }
/* The mission line in the traditional display font, like the name (owner, 26 Oct) */
.tagline a { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .01em; }
.survey-card { display: block; text-decoration: none; color: var(--ink); border: 1.5px solid var(--line-strong); }
.survey-card:hover { border-color: var(--ink); color: var(--ink); }
.survey-card h2 { font-size: 1.15rem; }
.survey-card p { margin: 4px 0 8px; }
/* Windows high-contrast (forced colours): keep the chosen tab, answer and city visible */
@media (forced-colors: active) {
  .tabs button[aria-selected="true"], .choice[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .city-list [aria-current="true"] .dot::after { background: CanvasText; forced-color-adjust: none; }
  details.fest > summary::after { border-color: CanvasText; }
}
@media (prefers-reduced-motion: no-preference) { .progress i, .progressbar i { transition: width .3s ease; } }
@media print { .bar, .site-foot, .cal-card, .survey-card, .btn { display: none !important; } body { background: #fff; color: #000; } }