/* Anudina. Light by default, with a full dark theme.
 *
 * The light palette sits on :root so a page painted before the script runs is
 * already the right colour. data-theme="dark" forces dark; with no data-theme
 * at all the device preference decides, which is what "Follow device" means.
 */

:root {
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #EEF0F4;
  --line: #E3E6EC;
  --ink: #12151A;
  --ink-2: #59616E;
  --ink-3: #79818E;
  --accent: #C2410C;
  --accent-ink: #9A3412;
  --accent-soft: #FFF1E7;
  --on-accent: #FFFFFF;
  --good: #16A34A;
  --good-ink: #15803D;
  --good-bg: #ECFDF3;
  --good-line: #BBEBCD;
  --bad: #DC2626;
  --bad-ink: #B42318;
  --bad-bg: #FEF3F2;
  --bad-line: #FBD5D2;
  --moon-dark: #9AA2B1;
  --moon-rim: rgba(18,21,26,.18);
  --alm-paper: #FBF5E8;
  --alm-paper-2: #F4EAD6;
  --alm-glow: #FFF9EC;
  --alm-edge: #E8D5B5;
  --alm-gold: #C9A46A;
  --alm-gold-2: #E3CFA8;
  --alm-ink: #3B1D0E;
  --alm-ink-2: #6B3A1E;
  --alm-ink-3: #8A5A3C;
  --alm-mute: #9B7B63;
  --alm-red: #9A3412;
  --alm-on-red: #FFF7EA;
  --bar: #8a4130;
  --bar-ink: #FBF3E4;
  --bar-ink-2: #EAD8C9;
  --bar-mark: #F8C766;
  --bar-shadow: 0 2px 10px rgba(58,19,8,.22), 0 1px 0 rgba(58,19,8,.25);
  --bar-chip: rgba(255,247,234,.12);
  --bar-chip-line: rgba(255,247,234,.28);
  --bar-place: #FBF3E4;
  --bar-place-ink: #5A2418;
  --bar-place-ic: #8a4130;
  --bar-place-chev: #9B6A55;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(16,24,40,.06);
  --sans: 'Space Grotesk', 'Noto Sans Kannada', 'Noto Sans Devanagari',
          'Noto Sans Telugu', 'Noto Sans Tamil', 'Noto Sans Malayalam',
          'Noto Sans Oriya', 'Noto Sans Bengali', 'Noto Sans Gujarati',
          ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0D0F13;
    --surface: #171A21;
    --surface-2: #21252E;
    --line: #262B35;
    --ink: #F4F6F9;
    --ink-2: #9AA3B0;
    --ink-3: #6B7480;
    --accent: #F5A524;
    --accent-ink: #F5A524;
    --accent-soft: #241B0D;
    --on-accent: #0D0F13;
    --good: #4ADE80;
    --good-ink: #86EFAC;
    --good-bg: #0F1A14;
    --good-line: #1C4030;
    --bad: #EF4444;
    --bad-ink: #FCA5A5;
    --bad-bg: #1E1410;
    --bad-line: #45211A;
    --moon-dark: #262B35;
    --moon-rim: rgba(244,246,249,.22);
    --alm-paper: #1C1712;
    --alm-paper-2: #16120E;
    --alm-glow: #241C14;
    --alm-edge: #3A2E20;
    --alm-gold: #8C6A3A;
    --alm-gold-2: #4A3A26;
    --alm-ink: #F3E6CE;
    --alm-ink-2: #E2C9A4;
    --alm-ink-3: #C9A77A;
    --alm-mute: #A48B6C;
    --alm-red: #F5A524;
    --alm-on-red: #1C1712;
    --bar: #6E3326;
    --bar-shadow: 0 2px 12px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.4);
    --bar-place-ic: #6E3326;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0D0F13;
  --surface: #171A21;
  --surface-2: #21252E;
  --line: #262B35;
  --ink: #F4F6F9;
  --ink-2: #9AA3B0;
  --ink-3: #6B7480;
  --accent: #F5A524;
  --accent-ink: #F5A524;
  --accent-soft: #241B0D;
  --on-accent: #0D0F13;
  --good: #4ADE80;
  --good-ink: #86EFAC;
  --good-bg: #0F1A14;
  --good-line: #1C4030;
  --bad: #EF4444;
  --bad-ink: #FCA5A5;
  --bad-bg: #1E1410;
  --bad-line: #45211A;
  --moon-dark: #262B35;
  --moon-rim: rgba(244,246,249,.22);
  --alm-paper: #1C1712;
  --alm-paper-2: #16120E;
  --alm-glow: #241C14;
  --alm-edge: #3A2E20;
  --alm-gold: #8C6A3A;
  --alm-gold-2: #4A3A26;
  --alm-ink: #F3E6CE;
  --alm-ink-2: #E2C9A4;
  --alm-ink-3: #C9A77A;
  --alm-mute: #A48B6C;
  --alm-red: #F5A524;
  --alm-on-red: #1C1712;
  --bar: #6E3326;
  --bar-shadow: 0 2px 12px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.4);
  --bar-place-ic: #6E3326;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

button { font: inherit; color: inherit; }

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.grow { flex-grow: 1; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sm { width: 14px; height: 14px; stroke-width: 2.5; }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  /* 20 Sep 2026: a solid terracotta bar with a soft shadow (user's #8a4130),
     matching the Anudina pages on dixith.com and the phone's status bar. */
  background: var(--bar);
  color: var(--bar-ink);
  box-shadow: var(--bar-shadow);
}
.topbar .brand { color: var(--bar-ink); }
.topbar .brandmark { color: var(--bar-mark); }
.topbar .brandtext i { color: var(--bar-ink-2); }
.topbar .chip { background: var(--bar-chip); border-color: var(--bar-chip-line); color: var(--bar-ink); }
.topbar .chip:hover { background: rgba(255,247,234,.2); border-color: rgba(255,247,234,.45); }
.topbar .chip:focus-visible { outline: 2px solid var(--bar-ink); outline-offset: 2px; }
.topbar #langBtn { color: var(--bar-ink); }
/* The place changes every number, so it stays the one solid control. */
.topbar .chip-place { background: var(--bar-place); border-color: var(--bar-place); color: var(--bar-place-ink); }
.topbar .chip-place:hover { background: #FFFFFF; border-color: #FFFFFF; }
.topbar .chip-place .ic { color: var(--bar-place-ic); }
.topbar .chip-place .ic-chev { color: var(--bar-place-chev); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.chip:hover { border-color: var(--ink-3); }
.chip-square { width: 44px; padding: 0; justify-content: center; }
/* 9.9 The place changes every number on every screen, so it is the one
   control in the header that is dressed as a control: tinted, with room for
   the name and a chevron that says it opens something. Theme moved to More,
   where the other settings live. */
.chip-place {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  font-size: 14px; font-weight: 700; padding: 0 10px 0 12px; gap: 5px;
}
.chip-place .ic { color: var(--accent-ink); }
.chip-place .ic-chev { width: 14px; height: 14px; color: var(--ink-3); }
.chip-place span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .chip-place span { max-width: 108px; } }
#langBtn { color: var(--accent-ink); font-size: 13px; font-weight: 700; letter-spacing: .02em; }

/* ---------- brand ---------- */

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink); min-width: 0;
}
.brandmark { width: 30px; height: 30px; flex: none; color: var(--accent); }
.brandtext { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.brandtext b { font-size: 19px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.brandtext i {
  font-style: normal; font-size: 10px; font-weight: 500; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 400px) { .brandtext i { display: none; } }
@media (max-width: 340px) { .chip-place span { max-width: 56px; } }

/* ---------- view ---------- */

.view {
  flex-grow: 1;
  padding: 2px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  outline: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-pad { padding: 16px 18px; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
:root:not([data-script="latin"]) .eyebrow { letter-spacing: .02em; text-transform: none; font-size: 12px; }

/* ---------- the panchanga box ---------- */

.pbox { padding: 0; }
.pbox-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 6px 12px;
  padding: 16px 18px 15px;
}
.pbox-lines { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* Two terms to a line. The line may still wrap on a very narrow phone or in
   a language with long words, and when it does it breaks between the two
   terms, never inside one. */
.pbox-row, .pbox-big {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 2px;
}
.pbox-row > *, .pbox-big > * { white-space: nowrap; }
.pbox-grid a { color: inherit; text-decoration: none; }
.pbox-grid a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.has-sep::before {
  content: '\00B7'; color: var(--ink-3); font-weight: 400;
  margin: 0 7px; display: inline-block;
}

.pb-t { font-size: clamp(12px, 3.4vw, 14px); font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.pbox-row:last-child { margin-top: 3px; }
.pb-m { font-size: clamp(15px, 4.5vw, 18px); font-weight: 600; color: var(--ink); letter-spacing: -.005em; line-height: 1.3; }
.pb-b { font-size: clamp(20px, 6.1vw, 28px); font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.pbox-big { grid-column: 1 / -1; margin-top: 3px; }
.pb-b.has-sep::before { font-size: 20px; }

/* The moon sits at the top right and is the one picture on the screen. */
.pbox-moon { flex: none; width: 62px; text-align: center; padding-top: 1px; }
.moon-w { display: block; }
.moon { display: block; margin: 0 auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.18)); }
.moon-cap { font-size: 10px; font-weight: 600; color: var(--ink-2); margin-top: 5px; line-height: 1.2; }
.moon-pct { font-size: 9px; font-weight: 500; color: var(--ink-3); margin-top: 1px; }

.pbox-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.pbox-greg { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pbox-clock { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); }
.pbox-clock b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }


/* ---------- the almanac box (Priority 6.1) ----------
   The day as a printed panchanga page gives it: paper, a gold double rule,
   the tithi and vara in the almanac serif, and the four moving limbs as a
   ruled table with their end times. Its own palette, so the dark theme gets
   a dark page rather than a cream one glaring out of it. */

.alm { background: var(--alm-paper); border-color: var(--alm-edge); }
.alm-frame {
  margin: 8px; padding: 14px 14px 6px; border-radius: 13px;
  border: 1.5px solid var(--alm-gold);
  box-shadow: inset 0 0 0 3px var(--alm-paper), inset 0 0 0 4px var(--alm-gold-2);
  background: radial-gradient(120% 60% at 50% 0%, var(--alm-glow) 0, transparent 70%);
}
.alm a { color: inherit; text-decoration: none; }
.alm a:hover { text-decoration: underline; text-decoration-color: var(--alm-gold); text-underline-offset: 3px; }
.alm-head, .alm-sub, .alm-mp {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; row-gap: 2px;
}
.alm-head > a, .alm-sub > a, .alm-mp > a { white-space: nowrap; }
.alm .alm-head a {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--alm-ink-3); line-height: 1.5;
}
:root:not([data-script="latin"]) .alm .alm-head a { letter-spacing: .01em; text-transform: none; font-size: 13px; }
.alm-star { color: var(--alm-gold); font-size: 10px; margin: 0 7px; }
.alm-dot { color: var(--alm-mute); margin: 0 6px; }
.alm .alm-sub { margin-top: 3px; }
.alm .alm-sub a { font-size: 13px; font-weight: 500; color: var(--alm-ink-2); line-height: 1.5; }
.alm-hero { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0 2px; }
.alm-moon { width: 72px; }
.alm .moon-cap { color: var(--alm-ink-3); }
.alm .moon-pct { color: var(--alm-mute); }
.alm-day { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.alm-day .alm-mp { justify-content: flex-start; }
.alm .alm-mp a { font-size: 14px; font-weight: 600; color: var(--alm-red); line-height: 1.45; letter-spacing: 0; }
.alm .alm-tithi {
  font-family: 'Anudina Serif', var(--sans); font-weight: 700;
  font-size: clamp(32px, 10vw, 42px); line-height: 1.08; letter-spacing: -.01em; color: var(--alm-ink);
}
.alm-vara {
  font-family: 'Anudina Serif', var(--sans); font-weight: 700;
  font-size: clamp(18px, 5.4vw, 21px); line-height: 1.3; color: var(--alm-ink-2);
}
/* Indic scripts stack their conjuncts below the line; give them the room so
   ಅಷ್ಟಮಿ never sits on the word under it. */
:root:not([data-script="latin"]) .alm .alm-tithi { line-height: 1.5; letter-spacing: 0; }
:root:not([data-script="latin"]) .alm-vara { line-height: 1.5; }
.alm-rule { height: 1px; margin: 10px 0 2px; background: linear-gradient(90deg, transparent, var(--alm-gold), transparent); }
.alm-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.alm-tab th { width: 27%; overflow-wrap: anywhere; }
.alm-tab .alm-end { width: 33%; white-space: normal; }
:root:not([data-script="latin"]) .alm-tab th { font-size: 12.5px; }
.alm-tab th {
  text-align: left; padding: 8px 6px 8px 0; vertical-align: baseline;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--alm-ink-3);
}
:root:not([data-script="latin"]) .alm-tab th { letter-spacing: 0; text-transform: none; font-size: 13px; }
.alm-tab td { padding: 8px 0; vertical-align: top; }
.alm-tab th { vertical-align: top; padding-top: 12px; }
.alm-end { padding-top: 11px !important; }
.alm-row { cursor: pointer; }
.alm-row + .alm-row th, .alm-row + .alm-row td { border-top: 1px dashed var(--alm-gold-2); }
.alm-name { line-height: 1.45; }
.alm-name b { font-family: 'Anudina Serif', var(--sans); font-size: 17px; font-weight: 700; color: var(--alm-ink); }
/* Tamil names run longest (ஆயுஷ்மான் overflowed its column by two pixels at
   phone width), so they are set a size smaller. */
:root[data-script="tamil"] .alm-name b { font-size: 16px; }
.alm-then { display: block; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--alm-mute); }
.alm-end {
  text-align: right; padding-left: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--alm-red); font-variant-numeric: tabular-nums;
}
.alm .pbox-foot { background: var(--alm-paper-2); border-top: 1px solid var(--alm-edge); }
.alm .pbox-greg { color: var(--alm-ink-2); }
.alm .pbox-clock { color: var(--alm-red); }

/* ---------- the day's sankalpa (Priority 6.2) ---------- */

.skp { background: var(--alm-paper); border-color: var(--alm-edge); padding: 0; overflow: hidden; }
.skp-head {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px;
  padding: 10px 14px; background: none; border: 0; font: inherit; text-align: left;
  color: var(--alm-red); cursor: pointer;
}
.skp-diya { display: inline-grid; place-items: center; }
.skp-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
:root:not([data-script="latin"]) .skp-title { letter-spacing: 0; text-transform: none; font-size: 14px; }
.skp-peek { font-size: 13px; font-weight: 600; color: var(--alm-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.skp.is-open .skp-peek { display: none; }
.skp-chev { color: var(--alm-mute); transition: transform .2s ease; }
.skp.is-open .skp-chev { transform: rotate(180deg); }
.skp-body { padding: 0 12px 12px; }
.skp-text {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--alm-glow); border: 1px dashed var(--alm-gold);
  font-size: 15.5px; font-weight: 500; line-height: 1.75; color: var(--alm-ink);
}
.skp-w.is-key { color: var(--alm-red); font-weight: 700; }
.skp-note { font-size: 12.5px; line-height: 1.5; color: var(--alm-mute); margin: 8px 2px 0; }
.skp-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.skp .skp-copy { background: transparent; color: var(--alm-ink-2); border: 1px solid var(--alm-gold-2); }
.skp-more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 4px 5px 4px 13px; border-radius: 999px; border: 1px solid var(--alm-gold);
  font-size: 13px; font-weight: 600; color: var(--alm-red); text-decoration: none;
}
.skp-more:hover { background: var(--alm-glow); }
.skp-more-ic {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--alm-red); color: var(--alm-on-red);
}
@media (prefers-reduced-motion: reduce) { .skp-chev { transition: none; } }

/* ---------- day navigation ---------- */

.daynav { display: flex; align-items: stretch; gap: 8px; }
.dnav-btn {
  flex: 1; min-height: 54px; padding: 8px 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-2);
}
.dnav-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.dnav-k { font-size: 13px; font-weight: 600; white-space: nowrap; }
.dnav-d { font-size: 11px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.dnav-mid { flex: 1.15; }
.dnav-mid.is-on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.dnav-mid.is-on .dnav-d { color: var(--on-accent); opacity: .85; }
.dnav-mid.is-on:hover { color: var(--on-accent); }

/* ---------- install offer ---------- */

.install {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.install-ic { color: var(--accent-ink); flex: none; padding-top: 1px; }
.install-t { font-size: 15px; font-weight: 700; }
.install-s { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.install-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* ---------- live rows ---------- */

.rowhead {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 18px 10px; border-bottom: 1px solid var(--line);
}
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); flex: none; }
.dot-pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.elrow {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.elrow:last-child { border-bottom: none; }
.elrow:hover { background: var(--surface-2); }
.elrow-label { width: 74px; flex: none; }
.elrow-name { font-size: 17px; font-weight: 600; }
.elrow-sub { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.elrow-end { font-size: 15px; font-weight: 600; color: var(--accent-ink); text-align: right; white-space: nowrap; }
.elrow-end small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); }

/* ---------- day bar ---------- */

.daybar-wrap { padding: 14px 18px 16px; }

.nowline {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.nowline-k {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
:root:not([data-script="latin"]) .nowline-k { letter-spacing: .02em; text-transform: none; font-size: 11px; }
.nowline b { font-size: 17px; font-weight: 700; }
.nowline-tag {
  font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--ink-2); margin-left: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nowline-tag.is-bad { background: var(--bad-bg); color: var(--bad-ink); border: 1px solid var(--bad-line); }
.nowline-tag.is-good { background: var(--good-bg); color: var(--good-ink); border: 1px solid var(--good-line); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; }
.legend i { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-style: normal; color: var(--ink-2); }
.legend b { width: 8px; height: 8px; border-radius: 2px; display: block; }

/* ---------- tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { border-radius: var(--radius); padding: 13px 15px; border: 1px solid var(--line); background: var(--surface); }
.tile-bad { background: var(--bad-bg); border-color: var(--bad-line); }
.tile-good { background: var(--good-bg); border-color: var(--good-line); }
.tile-k { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
:root:not([data-script="latin"]) .tile-k { letter-spacing: .02em; text-transform: none; font-size: 12px; }
.tile-bad .tile-k { color: var(--bad-ink); }
.tile-good .tile-k { color: var(--good-ink); }
.tile-v { font-size: 19px; font-weight: 700; margin-top: 4px; letter-spacing: -.01em; }
/* A twelve-hour span is three characters longer at each end. */
:root[data-clock="12"] .tile-v { font-size: 16px; white-space: nowrap; letter-spacing: -.02em; }
.tile-s { font-size: 12px; color: var(--ink-2); margin-top: 1px; }

/* ---------- quad ---------- */

.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; padding: 13px 18px; }
.quad-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.quad-k { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
:root:not([data-script="latin"]) .quad-k { letter-spacing: 0; text-transform: none; font-size: 11px; }
.quad-v { font-size: 17px; font-weight: 600; margin-top: 2px; }

/* ---------- event list ---------- */

.evrow {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.evrow:last-child { border-bottom: none; }
.evrow:hover { background: var(--surface-2); }
.evrow.is-past { opacity: .55; }
.evdate {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm);
  background: var(--surface-2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.evdate.is-major { background: var(--accent); color: var(--on-accent); }
.evdate b { font-size: 14px; font-weight: 700; }
.evdate small { font-size: 8px; font-weight: 700; letter-spacing: .04em; margin-top: 2px; }
/* 9.7 The kind mark that stands in for the date on a one-day screen. */
.evkind {
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-2);
}
.evkind.is-major { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-ink); }
.evkind.is-grahana { background: var(--ink); color: var(--surface); }
.evname { font-size: 16px; font-weight: 600; }
.evsub { font-size: 12px; color: var(--ink-2); margin-top: 1px; }

/* A row the reader's own tradition does not keep. Present, because a Madhva
   wants to know his Smarta neighbours fast a day earlier, but quiet, because
   it is not his day. The rows align, so the eye reads down the emphatic ones. */
.evrow.is-other { opacity: .58; }
.evrow.is-other .evname { font-weight: 500; }
.evrow > .grow { min-width: 0; }
.evnote {
  font-size: 12px; line-height: 1.45; color: var(--ink-2);
  margin-top: 3px; padding-left: 9px; position: relative;
}
.evnote::before {
  content: ""; position: absolute; left: 0; top: .45em; bottom: .45em;
  width: 2px; border-radius: 2px; background: var(--line);
}
.evrow:not(.is-other) .evnote:first-of-type::before { background: var(--accent); opacity: .5; }

/* ---------- parana ---------- */

/* On a dwadashi morning this is the whole of what the app is for, so it sits
   above everything else and answers "when do I eat" without a tap. */
.parana-tile {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px 15px; border: 1px solid var(--line);
}
.parana-tile:hover { background: var(--surface-2); }
.parana-tile.is-open { border-color: var(--good-line); background: var(--good-bg); }
.parana-tile.is-done { opacity: .62; }
.parana-head { display: flex; align-items: baseline; gap: 8px; }
.parana-for { font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: right; }
.parana-time {
  font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.parana-tile.is-open .parana-time { color: var(--good-ink); }
.parana-status { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.parana-tile.is-open .parana-status { color: var(--good-ink); }
.parana-note { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: 4px; }
.parana-card { padding: 13px 16px 14px; }
.parana-card .rowhead { padding: 0 0 2px; }
.parana-card.is-mine { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.parana-card.is-mine .parana-time { color: var(--accent-ink); }

/* ---------- key and value, for showing the working ---------- */

.kv-list .rowhead { padding: 0 0 6px; }
.kv {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.kv:last-child { border-bottom: none; }
.kv-k { font-size: 13px; color: var(--ink-2); }
.kv-v {
  font-size: 14px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kv.is-mine .kv-k { color: var(--ink); font-weight: 600; }
.kv.is-mine .kv-v { color: var(--accent-ink); }

/* ---------- link out ---------- */

.linkout {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.linkout:hover { border-color: var(--accent); }
.linkout span { flex-grow: 1; font-size: 14px; font-weight: 600; }
.linkout em { font-style: normal; font-size: 11px; color: var(--ink-2); }
.linkout .ic { color: var(--accent-ink); }

/* ---------- segmented ---------- */

/* Five filters do not fit a phone in every language, so the row scrolls. */
.seg {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 2px 16px;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: 1 0 auto; min-width: 82px; padding: 0 12px; min-height: 44px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
}
.seg button.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- period list ---------- */

.prow {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.prow:last-child { border-bottom: none; }
.prow.is-done { opacity: .5; }
.prow.is-now { background: var(--surface-2); }
.prow.is-link { text-decoration: none; color: inherit; }
.prow.is-link:hover { background: var(--surface-2); }
.pbar { width: 3px; align-self: stretch; min-height: 30px; border-radius: 999px; background: var(--ink-3); flex: none; }
.pbar.good { background: var(--good); }
.pbar.bad { background: var(--bad); }
.pname { font-size: 16px; font-weight: 600; }
.ptime { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.pflag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.pflag.now { background: var(--accent); color: var(--on-accent); border-radius: 5px; padding: 4px 7px; }
.pdur { font-size: 13px; font-weight: 700; white-space: nowrap; }
.pdur.good { color: var(--good-ink); }
.pdur.bad { color: var(--bad-ink); }

/* ---------- calendar ---------- */

.calhead { display: flex; align-items: center; gap: 8px; }
.calhead h2 { flex-grow: 1; margin: 0; font-size: 19px; font-weight: 700; text-align: center; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 10px; }
.calgrid .dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-2); padding: 4px 0 6px; }
.cell {
  min-height: 64px; border: none; background: var(--surface-2); border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1px; cursor: pointer; padding: 5px 2px 4px; color: var(--ink); min-width: 0;
  position: relative;
}
.cell:hover { outline: 1px solid var(--ink-3); }
.cell.is-blank { background: none; cursor: default; }
/* 9.3 Today is a ring, the selected day is filled. Both at once: filled and
   ringed, with a gap between. */
.cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cell.is-today b { color: var(--accent-ink); font-weight: 800; }
.cell.is-sel { background: var(--accent); color: var(--on-accent); }
.cell.is-sel b { color: var(--on-accent); }
.cell.is-sel.is-today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.cell b { font-size: 15px; font-weight: 600; line-height: 1.1; }
.cell i { font-style: normal; font-size: 9px; color: var(--ink-2); line-height: 1.2; }
.cell.is-sel i, .cell.is-sel .lbl { color: var(--on-accent); opacity: .92; }
/* 9.5 What the day is, in words: two lines at most, cut with an ellipsis. */
.cell .lbl {
  font-size: 8.5px; line-height: 1.2; font-weight: 700; color: var(--ink-2);
  width: 100%; text-align: center; overflow: hidden; overflow-wrap: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 10px;
}
/* A single long word ("Bhadrapada") is cut with an ellipsis rather than
   broken in the middle. */
.cell .lbl.is-one { display: block; white-space: nowrap; text-overflow: ellipsis; }
:root:not([data-script="latin"]) .cell .lbl { font-size: 9px; line-height: 1.3; }
.cell .lbl.is-major { color: var(--accent-ink); }
.cell .lbl.is-ekadashi { color: var(--good-ink); }
.cell .lbl.is-month { color: var(--ink); }
.cell .lbl.is-grahana { color: var(--ink); }
.cell .lbl.is-full, .cell .lbl.is-new, .cell .lbl.is-sankranti { color: var(--ink-2); font-weight: 600; }
/* 9.1 The first day of a lunar month carries a bar on its leading edge. */
.cell.is-mstart::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--ink);
}
.cell .marks { display: flex; gap: 2px; height: 4px; margin-top: auto; }
.cell .marks u { width: 4px; height: 4px; border-radius: 999px; display: block; text-decoration: none; }

/* 9.1 The lunar month band. */
.mband-card .rowhead { padding-bottom: 6px; }
.mband { display: flex; gap: 3px; padding: 0 12px 12px; }
.mband-seg {
  flex-basis: 0; min-width: 0; padding: 7px 9px; border-radius: 8px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 1px;
}
.mband-seg:nth-child(2n) { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.mband-seg b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mband-seg small { font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 9.2 The legend. */
.callegend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--ink-2); }
.callegend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.callegend-row > span { display: inline-flex; align-items: center; gap: 5px; }
.callegend u { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.lg-sym { font-size: 12px; color: var(--ink); }
.lg-mstart { width: 3px; height: 12px; border-radius: 3px; background: var(--ink); display: inline-block; }
.lg-today { width: 14px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--accent); display: inline-block; }
.lg-sel { width: 14px; height: 12px; border-radius: 4px; background: var(--accent); display: inline-block; }

/* ---------- settings ---------- */

.setrow {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink);
}
.setrow:last-child { border-bottom: none; }
.setrow:hover { background: var(--surface-2); }
.setrow-k { font-size: 15px; font-weight: 600; flex-grow: 1; }
.setrow-v { font-size: 14px; color: var(--ink-2); }
.setrow .ic { color: var(--ink-3); }

.opt {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink);
}
.opt:last-child { border-bottom: none; }
.opt:hover { background: var(--surface-2); }
.opt.is-on { color: var(--accent-ink); }
.opt b { flex-grow: 1; font-size: 16px; font-weight: 600; }
.opt small { font-size: 13px; color: var(--ink-2); }
.opt[disabled] { opacity: .45; cursor: default; }

.prose { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.prose p { margin: 0 0 10px; }
.prose strong { color: var(--ink); }

.field {
  width: 100%; min-height: 46px; padding: 0 14px; font: inherit; font-size: 15px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink);
}
.field::placeholder { color: var(--ink-3); }
.field:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent); border: none;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-quiet { background: var(--surface-2); color: var(--ink-2); }
.btn-sm { width: auto; min-height: 34px; padding: 0 12px; font-size: 12px; border-radius: 9px; }

.note { font-size: 12px; color: var(--ink-2); padding: 0 2px; }
.note-bad { color: var(--bad-ink); }

/* ---------- tab bar ---------- */

.tabbar {
  position: sticky; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.tab {
  min-height: 44px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; background: none; border: none;
  color: var(--ink-2); font-size: 11px; font-weight: 600; cursor: pointer;
}
.tab.is-on { color: var(--accent-ink); font-weight: 700; }

/* ---------- sheet ---------- */

.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.sheet-panel {
  position: relative; width: 100%; max-width: 480px; max-height: 88dvh;
  background: var(--bg); border-top-left-radius: 20px; border-top-right-radius: 20px;
  border: 1px solid var(--line); border-bottom: none;
  display: flex; flex-direction: column;
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; }
.sheet-title { flex-grow: 1; margin: 0; font-size: 17px; font-weight: 700; }
.sheet-body { padding: 0 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
/* The body is a flex column, so without this a long sheet squashes its own
   cards and clips whatever is inside them. The place sheet, which is the
   longest, was showing a search field cut off halfway down. */
.sheet-body > * { flex: 0 0 auto; }

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

/* ---------- the two reckonings compared ---------- */

.cmp { padding: 4px 18px 12px; }
.cmp-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.cmp-k { width: 74px; flex: none; }
.cmp-v { font-size: 15px; font-weight: 600; }
.cmp-t { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cmp-t.is-diff { color: var(--accent-ink); }
.cmp-t small.cmp-d { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); text-align: right; }
.cmp-quiet > summary { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.cmp-diffs { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; border-bottom: 1px solid var(--line); }
.cmp-flag { font-size: 10px; font-weight: 700; color: var(--ink-3); }
.cmp-flag.is-diff { color: var(--accent-ink); }

.opt-stack { align-items: flex-start; }
.opt-stack b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.opt-stack small { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-2); }

/* ---------- people and sync ---------- */

.fields { display: flex; flex-direction: column; gap: 10px; }
.fieldrow { display: flex; flex-direction: column; gap: 5px; }
.synccode {
  font-size: 22px; font-weight: 700; letter-spacing: .08em;
  text-align: center; padding: 14px 8px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--accent-ink);
  word-break: break-all;
}

/* ================================================================
   Priority 2 and 3: navigation, links, sharing, places and search.
   ================================================================ */

/* ---------- day navigation, on every screen that shows a day ---------- */

.daynav-wrap { display: flex; flex-direction: column; gap: 8px; }
.daynav-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.daynav-acts .chip { flex: none; }
.chip-home { border-color: var(--accent); color: var(--accent-ink); }
.chip-home .ic { color: var(--accent-ink); }
.calacts { justify-content: flex-start; }

/* The period rows are buttons now, so that a tap opens the muhurta rather
   than throwing the reader out to the web without warning. */
.prow { width: 100%; text-align: left; background: none; border: none;
        border-bottom: 1px solid var(--line); font: inherit; color: inherit; cursor: pointer; }
.prow:last-child { border-bottom: none; }

/* ---------- a flat tile, for a good hour that is not taken today ---------- */

.tile-flat { background: var(--surface-2); border-color: var(--line); }
.tile-flat .tile-k { color: var(--ink-2); }
.tile-flat .tile-v { color: var(--ink-2); }

/* ---------- sheets: sections, rows with a second action ---------- */

.sheet-sec { display: flex; flex-direction: column; gap: 6px; }
.sheet-sec[hidden] { display: none; }
.sheet-lab { padding: 2px 2px 0; color: var(--ink-3); }
.sheet-acts { display: flex; gap: 8px; }
.sheet-acts .btn { flex: 1; }

.optrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.optrow:last-child { border-bottom: none; }
.optrow .opt { border-bottom: none; flex: 1; min-width: 0; }
.optrow .opt > .grow { min-width: 0; }
.optrow .opt b, .optrow .opt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-x {
  flex: none; width: 46px; background: none; border: none; border-left: 1px solid var(--line);
  color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.opt-x:hover { background: var(--surface-2); color: var(--ink); }

.disclose { padding: 0; }
.disclose > summary {
  padding: 14px 16px; font-size: 15px; font-weight: 600; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::after { content: '+'; margin-left: auto; color: var(--ink-3); font-weight: 700; }
.disclose[open] > summary::after { content: '\2212'; }
.disclose[open] > summary { border-bottom: 1px solid var(--line); }

/* ---------- a word in passing ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px); z-index: 80;
  background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(16,24,40,.22);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- turning a page ---------- */

@keyframes slide-fwd { from { opacity: .35; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes slide-back { from { opacity: .35; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.view.slide-fwd { animation: slide-fwd .18s ease-out; }
.view.slide-back { animation: slide-back .18s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .view.slide-fwd, .view.slide-back { animation: none; }
  .toast { transition: none; }
}

/* ---------- keyboard focus, which had been switched off ---------- */

.view:focus { outline: none; }
.view:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ================================================================
   Priority 4 and 5: the personal layer, and the night half of the day.
   ================================================================ */

/* Each band has its own hue. The hues were picked to stay apart for the
   common colour vision deficiencies as well, and every band also has its own
   pattern, so nothing depends on hue alone. */
:root {
  --c-rahu: #D92D20;
  --c-yama: #C4650A;
  --c-gulika: #7A3FC9;
  --c-dur: #5B6472;
  --c-varjya: #B4235A;
  --c-abhijit: #15803D;
  --c-amrita: #0E7C86;
  --c-brahma: #1D6FD1;
  --c-nishita: #4B4FB8;
  --c-bhadra: #7C2D12;
  --c-siddhi: #A16207;
  --c-ashubha: #6B2138;
  --c-punya: #C2410C;
  --night: color-mix(in srgb, #1F2A44 11%, var(--surface-2));
  --caution-bg: #FFF7E6;
  --caution-line: #F6DDA8;
  --caution-ink: #8A5300;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --c-rahu: #F4574B;
    --c-yama: #F0923A;
    --c-gulika: #A97BF0;
    --c-dur: #98A2B3;
    --c-varjya: #F0609A;
    --c-abhijit: #4ADE80;
    --c-amrita: #2DD4BF;
    --c-brahma: #60A5FA;
    --c-nishita: #8B8FF0;
    --c-bhadra: #E07B4F;
    --c-siddhi: #FACC15;
    --c-ashubha: #F07A9A;
    --c-punya: #FB923C;
    --night: #0B0E14;
    --caution-bg: #221A0B;
    --caution-line: #4A3812;
    --caution-ink: #F5C46B;
  }
}
:root[data-theme="dark"] {
  --c-rahu: #F4574B;
  --c-yama: #F0923A;
  --c-gulika: #A97BF0;
  --c-dur: #98A2B3;
  --c-varjya: #F0609A;
  --c-abhijit: #4ADE80;
  --c-amrita: #2DD4BF;
  --c-brahma: #60A5FA;
  --c-nishita: #8B8FF0;
  --c-bhadra: #E07B4F;
  --c-siddhi: #FACC15;
  --c-ashubha: #F07A9A;
  --c-punya: #FB923C;
  --night: #0B0E14;
  --caution-bg: #221A0B;
  --caution-line: #4A3812;
  --caution-ink: #F5C46B;
}

/* ---------- 5.1 two bars, day and night ---------- */

.daybar-wrap { display: flex; flex-direction: column; gap: 14px; }
.dbar-block { display: flex; flex-direction: column; gap: 6px; }
.dbar-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.dbar-head .ic { color: var(--ink-3); }
.dbar-range { font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dbar {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 3px; border-radius: 8px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dbar-night { background: var(--night); }
.dbar-lane { position: relative; height: 13px; }
.dbar-lane.lane-kala { height: 18px; }
/* An empty lane still shows where it would be, so the three rows read as
   three rows even on a day with nothing in one of them. */
.dbar-lane::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--line); opacity: .8;
}

.band {
  position: absolute; top: 0; bottom: 0; display: block;
  border-radius: 3px; overflow: hidden; min-width: 3px;
}
.band em {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 9px; font-weight: 700; line-height: 1;
  white-space: nowrap; letter-spacing: .01em; padding: 0 2px;
}
.lane-kala .band em { font-size: 10px; }
.band em[hidden] { display: none; }

/* Filled bands are the ones to set aside; hollow bands are the favourable
   ones. Good and bad differ in shape, not only in colour. */
.b-rahu { background: var(--c-rahu); color: #fff; }
.b-yama {
  color: #fff;
  background: repeating-linear-gradient(135deg, var(--c-yama) 0 4px,
    color-mix(in srgb, var(--c-yama) 72%, #000) 4px 6px);
}
.b-gulika {
  color: #fff;
  background:
    radial-gradient(circle, rgba(255,255,255,.42) 1px, transparent 1.4px) 0 0 / 5px 5px,
    var(--c-gulika);
}
.b-dur {
  color: #fff;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 1.5px, transparent 1.5px 5px),
    var(--c-dur);
}
.b-varjya {
  color: #fff;
  background: repeating-linear-gradient(45deg, var(--c-varjya) 0 3px,
    color-mix(in srgb, var(--c-varjya) 55%, transparent) 3px 6px);
}
.b-abhijit {
  color: var(--c-abhijit);
  background: color-mix(in srgb, var(--c-abhijit) 16%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--c-abhijit);
}
.b-amrita {
  color: var(--c-amrita);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-amrita) 22%, transparent) 0 2px, transparent 2px 5px),
    color-mix(in srgb, var(--c-amrita) 10%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--c-amrita);
}
.b-brahma {
  color: var(--c-brahma);
  background: color-mix(in srgb, var(--c-brahma) 14%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--c-brahma);
  border-radius: 999px;
}
.b-nishita {
  color: var(--c-nishita);
  background: color-mix(in srgb, var(--c-nishita) 12%, var(--surface));
  border: 1.5px dashed var(--c-nishita);
}

/* Priority 8, the fourth lane. Bhadra is filled with upright bars; one away
   in svarga or patala is outlined and dashed, being there but not held
   harmful. The favourable compound yogas are hollow with a double rule, the
   adverse ones filled and cross-hatched, and punya kala hollow and rounded,
   so each still differs in shape as well as hue. */
.b-bhadra {
  color: #fff;
  background: repeating-linear-gradient(90deg, var(--c-bhadra) 0 4px,
    color-mix(in srgb, var(--c-bhadra) 70%, #000) 4px 6px);
}
.b-bhadra-soft {
  color: var(--c-bhadra);
  background: color-mix(in srgb, var(--c-bhadra) 8%, var(--surface));
  border: 1.5px dashed var(--c-bhadra);
}
.b-siddhi {
  color: var(--c-siddhi);
  background: color-mix(in srgb, var(--c-siddhi) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--c-siddhi), inset 0 0 0 3px color-mix(in srgb, var(--c-siddhi) 20%, var(--surface));
  border: 1px solid var(--c-siddhi);
}
.b-ashubha {
  color: #fff;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 1px, transparent 1px 4px),
    var(--c-ashubha);
}
.b-punya {
  color: var(--c-punya);
  background: color-mix(in srgb, var(--c-punya) 12%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--c-punya);
  border-radius: 999px;
}
.dbar-night .b-siddhi, .dbar-night .b-bhadra-soft, .dbar-night .b-punya { background-color: transparent; }

/* The special card on Today reuses the Times rows. */
.spcard .rowhead { border-bottom: 1px solid var(--line); }
.spcard .prow:last-child { border-bottom: none; }
.plain-list { margin: 4px 0 8px; padding-left: 20px; }
.plain-list li { margin: 3px 0; }

/* Mahalaya paksha. */
.mlcard .rowhead { border-bottom: 1px solid var(--line); }
.pwarn.is-today { background: var(--good-bg); }
.ptag.is-good { background: var(--good-bg); border-color: var(--good-line); color: var(--ink-2); }
.ptag.is-good b { color: var(--good-ink); }

.dbar-over { position: absolute; top: 0; bottom: 0; left: 3px; right: 3px; pointer-events: none; }
.dbar-over .now {
  position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px;
  background: var(--ink); border-radius: 3px; z-index: 3;
  box-shadow: 0 0 0 2px var(--surface), 0 1px 4px rgba(0,0,0,.35);
}
.dbar-over .now::before {
  content: ''; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px;
  margin-left: -4.5px; border-radius: 999px;
  background: var(--ink); box-shadow: 0 0 0 2px var(--surface);
}

.dbar-scale {
  position: relative; height: 14px; font-size: 11px; font-weight: 500; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.dbar-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.dbar-scale span.is-first { left: 0; transform: none; }
.dbar-scale span.is-last { right: 0; left: auto; transform: none; }

.legend { gap: 8px 12px; margin-top: 0; }
.legend b.band { position: static; width: 16px; height: 10px; flex: none; min-width: 0; }
.legend-key { font-size: 11px; line-height: 1.45; color: var(--ink-3); margin-top: -6px; }

/* ---------- 5.2 now and next ---------- */

.nowcard {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 16px 13px;
  text-align: left; width: 100%;
}
.nowcard.is-link { cursor: pointer; font: inherit; color: inherit; }
.nowcard.is-link:hover { background: var(--surface-2); }
.nowcard.is-sticky {
  position: sticky; z-index: 12;
  top: calc(max(10px, env(safe-area-inset-top)) + 58px);
  box-shadow: 0 6px 16px -10px rgba(16,24,40,.35);
}
.nowcard .nowline { margin: 0; flex-wrap: wrap; }
.nowline-ctx {
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  background: var(--night); border-radius: 6px; padding: 3px 7px;
}
.nowtags { display: flex; flex-wrap: wrap; gap: 6px; }
.nowtags .nowline-tag { margin-left: 0; white-space: normal; }
.nowline-tag.is-plain { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.nownext { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.nownext-k {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); flex: none;
}
:root:not([data-script="latin"]) .nownext-k { letter-spacing: .02em; text-transform: none; font-size: 11px; }
.nownext-v { font-weight: 600; color: var(--ink); }
.nownext-v.is-bad { color: var(--bad-ink); }
.nownext-v.is-good { color: var(--good-ink); }
.nowsub { font-size: 12px; color: var(--ink-2); line-height: 1.45; }

/* ---------- 5.3 Times in sections ---------- */

.tsec .rowhead .ic, .tsec summary .ic { color: var(--ink-3); }
.tsec-night { border-color: color-mix(in srgb, var(--c-nishita) 22%, var(--line)); }
.tsec-night > .rowhead { background: var(--night); }
.tsec.is-past > summary { font-size: 13px; font-weight: 600; padding: 12px 16px; }
.tsec-done { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.tsec.is-past > summary::after { margin-left: 8px; }
.prow.is-next { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.pflag.next {
  color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 5px; padding: 3px 6px; text-transform: none; letter-spacing: 0; font-size: 11px;
}
.fold { border-top: 1px solid var(--line); }
.fold > summary {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  cursor: pointer; list-style: none; font-size: 13px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '+'; color: var(--ink-3); font-weight: 700; margin-left: 4px; }
.fold[open] > summary::after { content: '\2212'; }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold-k { font-weight: 600; color: var(--ink-2); }
.fold-v { font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* ---------- 5.5 the filter strip says it scrolls ---------- */

.seg-wrap { position: relative; }
.seg-wrap .seg { scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
.seg-wrap .seg button { scroll-snap-align: start; min-width: 0; flex: 0 0 auto; }
.seg-wrap::before, .seg-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none;
  opacity: 0; transition: opacity .15s ease; z-index: 1;
}
.seg-wrap::before { left: -16px; background: linear-gradient(90deg, var(--bg) 30%, transparent); }
.seg-wrap::after { right: -16px; background: linear-gradient(270deg, var(--bg) 30%, transparent); }
.seg-wrap.can-l::before, .seg-wrap.can-r::after { opacity: 1; }
.seg-more {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); display: none;
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: var(--shadow);
}
.seg-more-l { left: -8px; }
.seg-more-r { right: -8px; }
.seg-wrap.can-l .seg-more-l, .seg-wrap.can-r .seg-more-r { display: inline-flex; }

/* ---------- 4. the personal layer ---------- */

.pcard .rowhead { border-bottom: 1px solid var(--line); }
.pwarn {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 11px 16px; background: none; border: none; border-bottom: 1px solid var(--line);
  cursor: pointer; font: inherit; color: inherit;
}
.pwarn:hover { background: var(--surface-2); }
.pwarn > .ic { margin-top: 3px; color: var(--ink-3); }
.pwarn-name { font-size: 15px; font-weight: 700; width: 88px; flex: none; padding-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwarn-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.ptag {
  font-size: 12px; line-height: 1.35; padding: 4px 8px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.ptag b { font-weight: 700; }
.ptag.is-severe { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.ptag.is-severe b { color: var(--bad-ink); }
.ptag.is-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--ink-2); }
.ptag.is-bad b { color: var(--bad-ink); }
.ptag.is-caution { background: var(--caution-bg); border-color: var(--caution-line); color: var(--ink-2); }
.ptag.is-caution b { color: var(--caution-ink); }
.pclear {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 11px 16px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.pclear:hover { background: var(--surface-2); }
.pclear .ic { color: var(--ink-3); }

.qchip {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--good-line); background: var(--good-bg); color: var(--good-ink);
}
.qchip.is-caution { border-color: var(--caution-line); background: var(--caution-bg); color: var(--caution-ink); }
.qchip.is-bad { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-ink); }
.qchip.is-severe { border-color: var(--bad); background: var(--bad); color: #fff; }

.pgrid { padding-bottom: 4px; }
.pgrid.is-severe { border-color: var(--bad-line); }
.pgrid .rowhead { padding-bottom: 4px; border-bottom: none; }
.pgrid-name { font-size: 16px; font-weight: 700; }
.pgrid-sub { font-size: 12px; color: var(--ink-2); padding: 0 18px 8px; border-bottom: 1px solid var(--line); }
.pgrid-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  border-bottom: 1px solid var(--line);
}
.pgrid-row:last-of-type { border-bottom: none; }
.pgrid-row.is-alarm { background: var(--bad-bg); }
.pgrid-row.is-past { opacity: .5; }
.pgrid-k { width: 78px; flex: none; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.pgrid-v { font-size: 14px; font-weight: 600; }
.pgrid-t { font-size: 12px; color: var(--ink-2); margin-top: 1px; font-variant-numeric: tabular-nums; }
.pgrid-note { font-size: 12px; color: var(--ink-3); padding: 8px 18px 10px; line-height: 1.45; border-top: 1px solid var(--line); }
.ashrow { padding: 8px 18px; }
.ashrow .kv-k { font-weight: 600; color: var(--ink); }

/* ---------- 10. grahana ---------- */
.gcard { display: block; width: 100%; text-align: left; font: inherit; color: inherit; }
.gcard .rowhead { gap: 10px; border-bottom: 1px solid var(--line); }
.gcard-name { font-size: 16px; font-weight: 700; }
.gcard-status {
  padding: 10px 18px; font-size: 14px; font-weight: 700; color: var(--bad-ink);
  background: var(--bad-bg); border-bottom: 1px solid var(--bad-line);
}
.gcard-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }
.gcard.is-unseen { cursor: pointer; }
.gcard.is-unseen .rowhead { border-bottom: none; }
.gtimeline .kv.is-unseen { opacity: .5; }
.health-first { border: 2px solid var(--good-line); background: var(--good-bg); }
/* A long label beside a long time (Tamil, twelve-hour, another day): the
   time may wrap rather than run off the card. */
.kv .kv-v { min-width: 0; }
.gcard .kv-v, .gtimeline .kv-v, .sheet .kv-v { white-space: normal; text-align: right; overflow-wrap: anywhere; }
.gcard .kv-k, .sheet .kv-k { flex: 0 1 48%; }