/* Anudina. Dixith Labs design standard, version 35 (25 September 2026).
 *
 * The tokens below are the family's (dixith-labs-design/tokens.css, version
 * 1.1): warm paper by daylight, deep ink-grey at night, three accents the
 * reader chooses (Clay is Anudina's default, being nearest its old
 * terracotta). Anudina's own tokens (the almanac paper, the kala bands, the
 * levels and grades) keep their meaning and sit on top.
 *
 * The script in index.html resolves "Follow device" before first paint and
 * always writes data-theme="light" or "dark", and writes data-accent, so the
 * stylesheet carries one dark palette and never two copies of it.
 */

:root {
  /* Fonts. The Indic faces carry their own unicode-range, so listing them
     first is safe: Latin text falls through to the phone's own face. */
  --sans: 'Noto Sans Kannada', 'Noto Sans Devanagari', 'Noto Sans Telugu', 'Noto Sans Tamil',
          'Noto Sans Malayalam', 'Noto Sans Oriya', 'Noto Sans Bengali', 'Noto Sans Gujarati',
          -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Noto Sans',
          'Helvetica Neue', Arial, sans-serif;
  --font: var(--sans);
  /* Fraunces for Latin headings, Noto Serif for the Indic scripts. */
  --display: 'Anudina Serif', Georgia, 'Times New Roman', serif;

  /* The page: warm paper. */
  --bg: #F6F4EF; --bg-2: #EEEBE4; --surface: #FFFFFF; --surface-2: #FAF9F6;
  --ink: #1C1E24; --ink-2: #5A5F6B; --ink-3: #8D919B;
  --line: rgba(28, 30, 36, .08); --line-2: rgba(28, 30, 36, .15);
  --hover: rgba(28, 30, 36, .045); --press: rgba(28, 30, 36, .08);
  --glass: rgba(255, 255, 255, .66); --glass-strong: rgba(255, 255, 255, .80);
  --glass-edge: rgba(255, 255, 255, .95); --glass-rim: rgba(255, 255, 255, .75);
  --milk: rgba(255, 255, 255, .74);
  /* A card: milk glass by day, solid at night. */
  --card: var(--milk);
  --scrim: color-mix(in srgb, var(--accent) 10%, rgba(240, 238, 232, .38));
  --shadow-1: 0 1px 2px rgba(20, 22, 30, .05), 0 2px 8px rgba(20, 22, 30, .04);
  --shadow-2: 0 2px 6px rgba(20, 22, 30, .05), 0 24px 56px -12px color-mix(in srgb, var(--accent) 28%, rgba(20, 22, 30, .14));
  --shadow-glass: 0 1px 1px rgba(20, 22, 30, .03), 0 12px 32px -8px color-mix(in srgb, var(--accent) 22%, rgba(20, 22, 30, .10));
  --shadow: var(--shadow-1);
  --blob-a: .16; --blob-b: .20;
  --warm: #FFC996; --warm-o: .30;
  --r: 14px; --r-lg: 22px; --side: 284px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Meaning. Red only when something needs attention. */
  --late: #C4453A; --good: #2F8F5B;
  --good-ink: #1F7A48;
  --good-bg: color-mix(in srgb, var(--good) 10%, var(--surface));
  --good-line: color-mix(in srgb, var(--good) 30%, var(--surface));
  --bad: var(--late);
  --bad-ink: #A8352B;
  --bad-bg: color-mix(in srgb, var(--late) 9%, var(--surface));
  --bad-line: color-mix(in srgb, var(--late) 28%, var(--surface));
  --moon-dark: #9AA2B1;
  --moon-rim: rgba(18,21,26,.18);

  /* The margin down both sides on a phone. The family standard is 16px;
     Anudina keeps 10px there by the reader's own choice (20 Sep 2026), so
     the panchanga box sits close to the edge of the phone. Wider screens
     take the standard 16px. */
  --gut: 10px;

  /* The almanac paper, refined to sit on the new page. */
  --alm-paper: #FBF6EC;
  --alm-paper-2: #F4EBDA;
  --alm-glow: #FFFAF0;
  --alm-edge: #EADAC0;
  --alm-gold: #C9A46A;
  --alm-gold-2: #E6D3AE;
  --alm-ink: #3B1D0E;
  --alm-ink-2: #6B3A1E;
  --alm-ink-3: #8A5A3C;
  --alm-mute: #957660;
  --alm-red: #9A3412;
  --alm-on-red: #FFF7EA;

  --radius: 20px;
  --radius-sm: 12px;
  color-scheme: light;
}
:root[data-accent="ink"]    { --accent: #3552A8; --accent-2: #5C6FD8; --accent-ink: #2B4491; --accent-soft: rgba(53, 82, 168, .11); --accent-line: rgba(53, 82, 168, .28); }
:root[data-accent="lagoon"] { --accent: #0E7C73; --accent-2: #2AA898; --accent-ink: #0A665E; --accent-soft: rgba(14, 124, 115, .11); --accent-line: rgba(14, 124, 115, .28); }
:root, :root[data-accent="clay"] { --accent: #B4532F; --accent-2: #D97A4D; --accent-ink: #9A4526; --accent-soft: rgba(180, 83, 47, .11); --accent-line: rgba(180, 83, 47, .28); }
:root { --on-accent: #fff; }
/* Clay is already warm: a quieter sunrise field. */
:root[data-accent="clay"] { --warm-o: .16; }
/* Clay fills the whole field with warmth, so by day its colour fields are
   quieter than the family's .20; otherwise the paper reads pink. */
:root[data-accent="clay"]:not([data-theme="dark"]) { --blob-b: .13; }

/* Dark: deep ink-grey, lit from within. Chosen, not inverted. The almanac
   paper is the same warm page, darkened, so the box still reads as paper
   at night. */
:root[data-theme="dark"] {
  --bg: #111317; --bg-2: #16191E; --surface: #1A1D23; --surface-2: #1F232A; --surface-3: #262A32;
  --ink: #ECEDEF; --ink-2: #A8ACB5; --ink-3: #737882;
  --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13);
  --hover: rgba(255, 255, 255, .045); --press: rgba(255, 255, 255, .08);
  --glass: rgba(22, 25, 31, .64); --glass-strong: rgba(28, 31, 38, .82); --glass-edge: rgba(255, 255, 255, .07);
  --glass-rim: rgba(255, 255, 255, .05);
  --card: var(--surface);
  --scrim: rgba(0, 0, 0, .45);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 40px rgba(0, 0, 0, .45);
  --shadow-glass: var(--shadow-1);
  --blob-a: .22; --blob-b: .14;
  --on-accent: #0D1018;
  --late: #F07A6E; --good: #5FC58E;
  --good-ink: #8FDBB0;
  --bad-ink: #F4A49B;
  --moon-dark: #2E3138;
  --moon-rim: rgba(236,237,239,.22);
  --alm-paper: #1F1C18;
  --alm-paper-2: #191714;
  --alm-glow: #29241C;
  --alm-edge: #3C3329;
  --alm-gold: #8F6D3F;
  --alm-gold-2: #4A3D2B;
  --alm-ink: #F1E5CF;
  --alm-ink-2: #DCC6A4;
  --alm-ink-3: #C4A47C;
  --alm-mute: #A08A6E;
  --alm-red: #F0A06E;
  --alm-on-red: #1F1C18;
  color-scheme: dark;
}
:root[data-theme="dark"][data-accent="ink"]    { --accent: #94A8F2; --accent-2: #B3A6F5; --accent-ink: #AEBCF6; --accent-soft: rgba(148, 168, 242, .14); --accent-line: rgba(148, 168, 242, .34); }
:root[data-theme="dark"][data-accent="lagoon"] { --accent: #52C8B8; --accent-2: #7FD9C2; --accent-ink: #72D6C8; --accent-soft: rgba(82, 200, 184, .14); --accent-line: rgba(82, 200, 184, .34); }
:root[data-theme="dark"]:not([data-accent="ink"]):not([data-accent="lagoon"]) { --accent: #F0916B; --accent-2: #F5B27F; --accent-ink: #F4A585; --accent-soft: rgba(240, 145, 107, .14); --accent-line: rgba(240, 145, 107, .34); }

* { box-sizing: border-box; }
/* Anything marked hidden stays hidden, whatever display its class gives it.
   Without this a hidden .btn (display: flex) still showed, which is how the
   sign-in screen came to show two buttons at once. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--bg);
  overscroll-behavior-y: none;
}
/* Daylight: paper that catches the light at the top. */
html:not([data-theme="dark"]) {
  background: linear-gradient(180deg, #F9F7F2 0%, #F4F2EC 55%, #F1EFEA 100%) fixed;
}
body {
  margin: 0; padding: 0;
  min-height: 100vh; min-height: 100dvh;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}
html.booting body { visibility: hidden; }

button { font: inherit; color: inherit; }
a { color: var(--accent-ink); }

/* ---------- the colour fields behind the glass ----------
   Three large, very blurred, very faint circles of the chosen accent, and in
   daylight a fourth, warm one: the peach of the sunrise dot in the icon. They
   must be faint enough that text on the page reads as if on plain paper. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop i { position: absolute; border-radius: 50%; filter: blur(70px); }
.backdrop i:nth-child(1) { width: 60vmax; height: 60vmax; left: -18vmax; top: -24vmax; background: var(--accent); opacity: var(--blob-b); }
.backdrop i:nth-child(2) { width: 46vmax; height: 46vmax; right: -16vmax; top: 24vh; background: var(--accent-2); opacity: calc(var(--blob-b) * .8); }
.backdrop i:nth-child(3) { width: 50vmax; height: 50vmax; left: 10vw; bottom: -30vmax; background: var(--accent); opacity: calc(var(--blob-b) * .6); }
html:not([data-theme="dark"]) .backdrop i { filter: blur(80px) saturate(140%); }
html:not([data-theme="dark"]) .backdrop::before {
  content: ''; position: absolute; width: 44vmax; height: 44vmax; right: -12vmax; top: -14vmax; border-radius: 50%;
  background: var(--warm); opacity: var(--warm-o); filter: blur(90px);
}

.app {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.grow { flex-grow: 1; }

/* Line icons on a 24-unit grid, stroke 1.8, round caps and joins. */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sm { width: 14px; height: 14px; stroke-width: 2.4; }

/* ---------- the header ----------
   Clear over the page at the top; frosted glass with a hairline once the
   page has scrolled (body.scrolled, set by app.js), so what passes under it
   blurs away. The one place glass appears only on demand. */

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) calc(var(--gut) + 4px) 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), padding .2s var(--ease);
}
body.scrolled .topbar {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: var(--line);
}
html:not([data-theme="dark"]) body.scrolled .topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .76));
  -webkit-backdrop-filter: saturate(200%) blur(24px); backdrop-filter: saturate(200%) blur(24px);
  border-bottom-color: rgba(20, 22, 30, .06);
  box-shadow: inset 0 -1px 0 var(--glass-rim);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.scrolled .topbar, html:not([data-theme="dark"]) body.scrolled .topbar { background: var(--surface-2); }
}

/* The place changes every number on every screen, so it is the one control
   in the header dressed as a control: a chip with room for the name and a
   chevron that says it opens something. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: background .15s, border-color .15s, transform .12s;
}
.chip:hover { background: var(--hover); }
.chip:active { transform: scale(.97); }
.chip-square { width: 40px; padding: 0; justify-content: center; }
.chip-place {
  font-size: 14px; font-weight: 700; padding: 0 10px 0 12px; gap: 5px;
}
.chip-place .ic { color: var(--accent); }
.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; }
/* The search button is a plain icon button: no outline, a wash on hover. */
.topbar .chip-square { background: transparent; border-color: transparent; color: var(--ink-2); border-radius: 12px; }
.topbar .chip-square:hover { background: var(--hover); color: var(--ink); }

/* ---------- brand ----------
   The icon's symbol in a 30px rounded square of the accent gradient, beside
   the name in the display face. */

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); min-width: 0;
}
.brandmark {
  width: 30px; height: 30px; flex: none; border-radius: 10px; padding: 5px;
  color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="dark"] .brandmark { color: var(--on-accent); }
.brandtext { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.brandtext b {
  font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap;
  transition: font-size .2s var(--ease);
}
:root:not([data-script="latin"]) .brandtext b { letter-spacing: 0; }
.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: var(--gut) var(--gut) 24px;   /* the same all round, and the same as the gap between cards */
  display: flex;
  flex-direction: column;
  gap: var(--gut);
  outline: none;
}

/* A card: milk glass by day (the colour fields glow faintly through a
   surface that is effectively white), solid at night. No blur on cards:
   the fields behind are already blurred, so a backdrop filter would add
   nothing to see and cost a repaint on every scrolled frame. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
:where(html:not([data-theme="dark"])) .card { box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge); }
.card-pad { padding: 16px 18px; }

/* Section labels: small, bold, uppercase and opened up. */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
: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); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(59, 29, 14, .05), 0 16px 36px -16px color-mix(in srgb, var(--alm-gold) 60%, transparent);
}
:root[data-theme="dark"] .alm { box-shadow: var(--shadow-1); }
.alm-frame {
  margin: 8px; padding: 14px 14px 6px; border-radius: 15px;
  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, .alm-head > .pb-link, .alm-sub > .pb-link, .alm-mp > .pb-link { white-space: nowrap; }
.alm .alm-head a, .alm .alm-head .pb-link {
  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, :root:not([data-script="latin"]) .alm .alm-head .pb-link { 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, .alm .alm-sub .pb-link { 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(--hover); }
.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: 16px; padding: 13px 15px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); }
.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(--hover); }
.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(--hover); }
.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(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.linkout:hover { border-color: var(--accent-line); }
.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 calc(var(--gut) * -1); padding: 2px var(--gut);
}
.seg::-webkit-scrollbar { display: none; }
/* Filters are chips: fully rounded, a hairline outline; the chosen one takes
   a soft wash of the accent, accent text and an accent outline. */
.seg button {
  flex: 1 0 auto; min-width: 82px; padding: 0 14px; min-height: 40px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, transform .12s;
}
.seg button:active { transform: scale(.97); }
.seg button.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }

/* ---------- 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(--hover); }
.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: 8px 18px; min-height: 54px;
  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(--hover); }
.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(--hover); }
.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); }

/* Fields: solid, 16px text so a phone does not zoom, the accent border and
   a soft halo on focus. */
.field {
  width: 100%; min-height: 46px; padding: 0 14px; font: inherit; font-size: 16px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 13px;
  color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: var(--ink-3); }
.field:focus, .field:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Buttons. The main action is the one gradient, 145 degrees, lighter at the
   top left, with a coloured shadow of its own accent and a lit top edge.
   Everything else is soft (a wash of the accent) or ghost (a hairline). */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 18px; border-radius: 13px;
  background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform .12s var(--ease), background .15s, box-shadow .15s, opacity .15s;
}
:root[data-theme="dark"] .btn { color: var(--on-accent); }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .45; pointer-events: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-theme="dark"] .btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--hover); }
.btn-quiet { background: var(--bg-2); color: var(--ink-2); box-shadow: none; }
:root[data-theme="dark"] .btn-quiet { color: var(--ink-2); }
.btn-sm { width: auto; min-height: 34px; padding: 0 13px; font-size: 14px; border-radius: 11px; }
/* A small action beside content is soft, so the screen keeps one gradient. */
.btn.btn-sm:not(.btn-ghost):not(.btn-quiet):not(.btn-danger) {
  background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
:root[data-theme="dark"] .btn.btn-sm:not(.btn-ghost):not(.btn-quiet):not(.btn-danger) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }

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

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

/* The tab bar: frosted glass floating over the page. */
.tabbar {
  position: sticky; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--line);
}
html:not([data-theme="dark"]) .tabbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), var(--glass));
  -webkit-backdrop-filter: saturate(200%) blur(24px); backdrop-filter: saturate(200%) blur(24px);
  border-top-color: var(--glass-rim);
  box-shadow: 0 -1px 0 rgba(20, 22, 30, .05), 0 -10px 30px -12px color-mix(in srgb, var(--accent) 18%, transparent);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar, html:not([data-theme="dark"]) .tabbar { background: var(--surface-2); }
}
.tab {
  min-height: 48px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; background: none; border: none; border-radius: 12px;
  color: var(--ink-2); font-size: 11px; font-weight: 600; cursor: pointer;
  transition: color .15s, transform .12s var(--ease);
}
.tab .ic { width: 24px; height: 24px; }
.tab:active { transform: scale(.95); }
.tab.is-on { color: var(--accent-ink); font-weight: 700; }
.tab.is-on .ic { color: var(--accent); }

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

.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
/* Sheets: glass that frosts the page behind it. On a phone they rise from
   the foot with a grab handle; from 700px they sit centred near the top. */
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); animation: fadein .22s var(--ease); }
html:not([data-theme="dark"]) .sheet-scrim { -webkit-backdrop-filter: blur(4px) saturate(120%); backdrop-filter: blur(4px) saturate(120%); }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.sheet-panel {
  position: relative; width: 100%; max-width: 640px; max-height: 88dvh;
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
  border-radius: 26px 26px 0 0;
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-edge);
  display: flex; flex-direction: column;
  animation: rise .32s var(--ease);
}
html:not([data-theme="dark"]) .sheet-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .90), var(--glass-strong) 40%);
  -webkit-backdrop-filter: saturate(200%) blur(30px); backdrop-filter: saturate(200%) blur(30px);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-rim);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet-panel, html:not([data-theme="dark"]) .sheet-panel { background: var(--surface-2); }
}
@keyframes rise { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (min-width: 700px) {
  .sheet { align-items: flex-start; padding-top: 9vh; }
  .sheet-panel { max-width: 560px; max-height: 82vh; border-radius: 24px; animation: pop .26s var(--ease); }
  .sheet-grab { visibility: hidden; }
}
@keyframes pop { from { transform: translateY(-8px) scale(.985); opacity: .6 } to { transform: none; opacity: 1 } }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px 10px; }
.sheet-title { flex-grow: 1; margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.005em; }
:root:not([data-script="latin"]) .sheet-title { letter-spacing: 0; line-height: 1.45; }
.sheet-head .chip-square { background: transparent; border-color: transparent; color: var(--ink-2); border-radius: 12px; }
.sheet-head .chip-square:hover { background: var(--hover); }
.sheet-body { padding: 0 18px 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(--hover); 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 ---------- */

/* Toasts: inverted glass, so they read at a glance on either page. A change
   that can be taken back carries Undo, in the accent. */
.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px); z-index: 80;
  display: flex; align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: 15px; font-weight: 500;
  padding: 11px 18px; border-radius: 16px; box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .28s var(--ease);
  max-width: calc(100vw - 32px); text-align: left;
}
html:not([data-theme="dark"]) .toast {
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.has-undo { padding-right: 10px; }
.toast-undo {
  flex: none; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: 6px 8px; border-radius: 8px; margin: -4px 0;
  color: color-mix(in srgb, var(--accent-2) 70%, var(--bg));
}
:root[data-theme="dark"] .toast-undo { color: var(--accent); filter: brightness(.7) saturate(1.4); }

/* ---------- 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 .2s var(--ease); }
.view.slide-back { animation: slide-back .2s var(--ease); }
/* A new screen: fade in and rise 6px. */
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view.is-enter { animation: enter .32s var(--ease); }

@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;
}
: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(--hover); }
.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(--hover); }
.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(--hover); }
.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%; }

/* =====================================================================
   Priority 11 and 12, the swipe, and the day before sunrise
   ===================================================================== */

/* ---------- 12.4 text size: the whole page scales, layout and all ---------- */
.app, .sheet-panel, .toast { zoom: var(--zoom, 1); }

/* ---------- 12.3 focus that can be seen ---------- */
:where(button, a, input, select, textarea, summary, label[tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sheet-title:focus { outline: none; }
.sheet-body { overscroll-behavior: contain; }

/* ---------- smooth scrolling ----------
   The browser owns vertical panning outright. (v35: the tab bar is glass
   again, as the family standard asks; the cards carry no blur, so the bar
   and the scrolled header are the only two filtered layers.) */
#view { touch-action: pan-y pinch-zoom; }
html.is-swiping, html.is-swiping body { overscroll-behavior-x: none; }
html.is-swiping #view * { user-select: none; -webkit-user-select: none; }

/* ---------- the day box on a stage that turns ---------- */
.swipe-stage { margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); overflow: hidden; }
@supports (overflow-x: clip) { .swipe-stage { overflow: visible; overflow-x: clip; } }
.swipe-track { position: relative; }
.swipe-ghost { position: absolute !important; top: 0; left: 0; width: 100%; visibility: hidden; pointer-events: none; }
.swipe-ghost.is-next { transform: translateX(calc(100% + 16px)); }
.swipe-ghost.is-prev { transform: translateX(calc(-100% - 16px)); }
.swipe-stage.is-dragging .swipe-ghost { visibility: visible; }
@keyframes daychange { from { opacity: .45; } to { opacity: 1; } }
.view.is-daychange > :not(.swipe-stage) { animation: daychange .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .view.is-daychange > * { animation: none; } }

/* ---------- before sunrise ---------- */
.predawn {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.predawn-ic { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface); color: var(--accent-ink); flex: none; }
.predawn-t { font-size: 14px; font-weight: 700; }
.predawn-s { font-size: 12px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.predawn .btn-sm { flex: none; }

/* ---------- 12.2 tomorrow ---------- */
.tmrcard { display: flex; align-items: center; gap: 10px; padding: 11px 14px; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tmr-k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); border-radius: 6px; padding: 3px 7px; flex: none; }
:root:not([data-script="latin"]) .tmr-k { text-transform: none; letter-spacing: 0; }
.tmr-v { font-size: 14px; font-weight: 600; line-height: 1.4; }

/* ---------- 11 the grahas on Today ---------- */
.gcard-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px 6px;
  background: none; border: none; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.gstrip { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; width: 100%;
  padding: 4px 10px 12px; background: none; border: none; cursor: pointer; color: inherit; font: inherit; }
.gchip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 1px;
  border-radius: 8px; background: var(--surface-2); min-width: 0; }
.gchip b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.gchip b sup { font-size: 8px; color: var(--bad-ink); margin-left: 1px; }
.gchip small { font-size: 9px; color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-script="latin"]) .gchip small { font-size: 9.5px; }
.gchip.is-retro { box-shadow: inset 0 0 0 1px var(--bad-line); }
.gwarn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; text-align: left;
  padding: 10px 16px; background: var(--bad-bg); border: none; border-top: 1px solid var(--line);
  cursor: pointer; color: inherit; font: inherit; }
.gwarn .ic { margin-left: auto; color: var(--ink-3); }
.gwarn-sub { font-size: 12px; color: var(--bad-ink); flex-basis: 100%; order: 3; }

/* ---------- the chart ---------- */
.chart-wrap { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.chart { width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 1; }
.chart svg { width: 100%; height: 100%; display: block; }
.chart .ch-bg { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.chart .ch-cell { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.chart .ch-cell.is-lagna { stroke: var(--accent); stroke-width: 2; }
.chart .ch-lagna-mark { stroke: var(--accent); stroke-width: 2; }
.chart .ch-line { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.chart .ch-first { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: none; }
.chart text { fill: var(--ink); font-family: var(--sans); font-weight: 600; }
.chart .ch-sign, .chart .ch-num { fill: var(--ink-3); font-weight: 600; }
.chart .ch-centre { fill: var(--ink); font-weight: 700; }
.chart .ch-centre-sub { fill: var(--ink-2); }
.chart tspan.is-light { fill: var(--accent-ink); }
.chart tspan.is-lagna { fill: var(--accent-ink); font-weight: 800; }
.seg-inline { margin: 0; padding: 0; }
.seg-inline button { min-width: 0; }

/* ---------- the table of grahas ---------- */
.gtab { padding: 4px 0; }
.gtab-row { display: grid; grid-template-columns: 1.05fr 1.2fr 1.3fr; gap: 8px; padding: 8px 16px;
  border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.gtab-row:last-child { border-bottom: none; }
.gtab-head { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.gtab-g { font-weight: 700; }
.gtab-r { font-variant-numeric: tabular-nums; }
.gtab-n { color: var(--ink-2); }
.gtab-row.is-lagna { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.gtab-retro { font-style: normal; font-size: 10px; font-weight: 800; color: var(--bad-ink);
  background: var(--bad-bg); border-radius: 4px; padding: 1px 4px; margin-left: 5px; }
.gchange { align-items: baseline; }
.gchange-d { min-width: 96px; font-size: 13px; }
.gchange .kv-k { color: var(--ink); }
.btn-in { margin-top: 10px; }

/* ---------- asta ---------- */
.asta-answer { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.asta-line { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--good-bg); border: 1px solid var(--good-line); flex-wrap: wrap; }
.asta-line.is-yes { background: var(--bad-bg); border-color: var(--bad-line); }
.asta-q { font-weight: 700; font-size: 15px; }
.asta-yn { font-weight: 800; font-size: 13px; border-radius: 6px; padding: 2px 8px; }
.asta-yn.is-yes { color: var(--bad-ink); }
.asta-yn.is-no { color: var(--good-ink); }
.asta-when { font-size: 13px; color: var(--ink-2); margin-left: auto; }
.astarow.is-past { opacity: .55; }
.kv .kv-k { overflow-wrap: anywhere; }
.astarow .kv-k { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- gochara and Saturn ---------- */
.gorow { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.gorow-g { font-weight: 700; font-size: 14px; min-width: 82px; }
.gorow-h { font-size: 13px; color: var(--ink-2); }
.satrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; }
.satrow b { font-size: 15px; }
.satrow-t { font-size: 13px; color: var(--ink-2); flex-basis: 100%; font-variant-numeric: tabular-nums; }
.satrow.is-now b { color: var(--accent-ink); }
.satphases { padding: 0 0 4px 10px; border-left: 2px solid var(--line); margin: 2px 0 6px; }
.qchip.is-caution { white-space: nowrap; }

/* ---------- 11.4 the muhurta finder ---------- */
.mf-purposes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mf-purpose { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 10px 12px; min-height: 58px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.mf-purpose b { font-size: 14px; font-weight: 700; }
.mf-purpose small { font-size: 11px; color: var(--ink-2); line-height: 1.3; }
.mf-purpose.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-soft); }
.mf-purpose.is-on b { color: var(--accent-ink); }
.mf-people { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-person { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; min-height: 40px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 14px; cursor: pointer; }
.mf-person input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.mf-results { display: flex; flex-direction: column; gap: 10px; }
.mf-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mf-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.mf-summary { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 0; }
.mf-summary b { font-size: 16px; }
.mf-summary span { font-size: 12px; color: var(--ink-2); }
.mf-list { display: flex; flex-direction: column; gap: 6px; }
.mf-month { padding: 8px 2px 0; }
.mf-day { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; color: inherit; font: inherit; }
.mf-day.is-best { border-color: var(--good-line); box-shadow: inset 3px 0 0 var(--good); }
.mf-times { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.mf-chip { font-size: 11px; font-weight: 600; color: var(--good-ink); background: var(--good-bg);
  border: 1px solid var(--good-line); border-radius: 999px; padding: 2px 8px; }
.mf-why summary { padding: 12px 16px; cursor: pointer; }
.mf-why .kv { padding: 7px 16px; }
.mf-entry { display: flex; align-items: center; gap: 12px; padding: 13px 16px; width: 100%; text-align: left;
  cursor: pointer; color: inherit; font: inherit; }
.mf-entry b { display: block; font-size: 15px; }
.mf-entry small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.mf-entry-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-ink); }

/* ---------- More, grouped ---------- */
.more-group { padding: 6px 4px 0; }

/* ---------- 12.1, 12.2 ---------- */
.remrow { align-items: flex-start; cursor: pointer; }
.remrow input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.remrow b { font-size: 15px; }
.nudge { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 12px 14px; width: 100%;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.nudge small { color: var(--ink-2); font-size: 12px; }
label.btn { cursor: pointer; }
.linkout-quiet .ic { color: var(--ink-2); }
.pgrid-link { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 16px; background: none;
  border: none; border-top: 1px solid var(--line); color: var(--accent-ink); font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; text-align: left; }
.pgrid-link .ic { margin-left: auto; }
.place-pick { margin-top: 4px; }
.place-pick[hidden] { display: none; }
.textsample { font-size: 15px; }
.seg-inline button { flex: 1 1 0; padding: 0 6px; }

/* ---------- the Charts tab (5 tabs from 20 Sep 2026) ---------- */
.tabbar { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding-left: 4px; padding-right: 4px; }
.tab { font-size: 10.5px; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pline { display: flex; align-items: center; gap: 10px; padding: 11px 14px; width: 100%; text-align: left;
  cursor: pointer; font: inherit; color: inherit; }
.pline.is-severe { border-color: var(--bad-line); }
.pline-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.pline-clear { color: var(--ink-2); }
.pline-more { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.charts-welcome { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px; }
.charts-welcome h2 { margin: 6px 0 0; font-size: 19px; }
.charts-welcome p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.charts-welcome-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-ink); }
.charts-welcome-ic .ic { width: 28px; height: 28px; }
.charts-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.charts-filter button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.charts-filter small { font-size: 11px; opacity: .75; }
.charts-all { display: flex; align-items: center; gap: 10px; padding: 12px 16px; width: 100%; text-align: left;
  cursor: pointer; font: inherit; color: inherit; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.charts-all b { display: block; font-size: 15px; }
.charts-all small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.crow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: none;
  border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; color: inherit; font: inherit; }
.crow:last-child { border-bottom: none; }
.crow:hover { background: var(--hover); }
.crow-ic { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; flex: none;
  font-weight: 800; font-size: 16px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink); }
.crow-ic.is-departed { background: var(--surface-2); color: var(--ink-2); }
.crow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crow-main b { font-size: 15px; }
.crow-main small { font-size: 12px; color: var(--ink-2); }
.crow-main .crow-next { color: var(--accent-ink); font-weight: 600; }
.crow-side { flex: none; max-width: 40%; }
.crow-side .qchip { white-space: normal; text-align: center; display: inline-block; }
.crow .ic { color: var(--ink-3); flex: none; }
.chart-head { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.chart-name { margin: 0; font-size: 22px; font-weight: 800; padding: 0 2px; }
.chart-today { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.chart-today.is-severe { border-color: var(--bad-line); }
.chart-today .rowhead { padding: 0; }
.seg-cats button { font-size: 12px; }
.seg.seg-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
.seg.seg-cats button { min-height: 40px; white-space: normal; line-height: 1.2; }
.seg.charts-filter { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.seg.charts-filter button { flex: 0 0 auto; min-height: 38px; }

/* =====================================================================
   The almanac look for the calendar and the charts (20 Sep 2026):
   the cream paper, gold double rule and serif of the panchanga box.
   ===================================================================== */
/* The Calendar tab uses the sans face throughout: the day numbers, month
   title and lunar month band read more cleanly at a glance than in serif. */
.calhead, .mband-card, .calgrid, .callegend, .chart-card {
  background: var(--alm-paper); border-color: var(--alm-edge); color: var(--alm-ink);
}
.calhead {
  background: radial-gradient(120% 90% at 50% 0%, var(--alm-glow) 0, var(--alm-paper) 70%);
  box-shadow: inset 0 0 0 3px var(--alm-paper), inset 0 0 0 4px var(--alm-gold-2);
  border: 1.5px solid var(--alm-gold);
}
.calhead h2 { font-family: var(--sans); font-size: 20px; color: var(--alm-ink); }
.calhead .chip { background: var(--alm-paper-2); border-color: var(--alm-edge); color: var(--alm-ink-2); }
.mband-card .eyebrow, .callegend { color: var(--alm-ink-3); }
.mband-seg { background: var(--alm-paper-2); }
.mband-seg:nth-child(2n) { background: color-mix(in srgb, var(--alm-gold) 18%, var(--alm-paper)); }
.mband-seg b { font-family: var(--sans); color: var(--alm-ink); font-size: 14px; }
.mband-seg small { color: var(--alm-ink-3); }

.calgrid {
  position: relative; padding: 12px;
  border: 1.5px solid var(--alm-gold);
  box-shadow: inset 0 0 0 4px var(--alm-paper), inset 0 0 0 5px var(--alm-gold-2);
  background: radial-gradient(140% 60% at 50% 0%, var(--alm-glow) 0, var(--alm-paper) 60%);
}
.calgrid .dow {
  color: var(--alm-red); font-weight: 700; letter-spacing: .04em;
  border-bottom: 1px solid var(--alm-gold-2); margin-bottom: 3px;
}
.calgrid .dow:first-child { color: var(--alm-red); }
.cell {
  background: color-mix(in srgb, var(--alm-paper-2) 70%, var(--alm-paper));
  color: var(--alm-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alm-gold-2) 70%, transparent);
}
.cell:hover { outline: 1px solid var(--alm-gold); }
.cell b { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--alm-ink); }
.cell i { color: var(--alm-ink-3); }
.cell .lbl { color: var(--alm-ink-2); }
.cell .lbl.is-major { color: var(--alm-red); }
.cell .lbl.is-month, .cell .lbl.is-grahana { color: var(--alm-ink); }
.cell.is-mstart::before { background: var(--alm-gold); width: 3px; }
.cell.is-today { box-shadow: inset 0 0 0 2px var(--alm-red); background: var(--alm-glow); }
.cell.is-today b { color: var(--alm-red); }
.cell.is-sel { background: var(--alm-red); box-shadow: none; }
.cell.is-sel b, .cell.is-sel i, .cell.is-sel .lbl { color: var(--alm-on-red); }
.cell.is-sel.is-today { box-shadow: 0 0 0 2px var(--alm-paper), 0 0 0 4px var(--alm-red); }
.callegend b.lg-sym { color: var(--alm-ink); }
.lg-today { box-shadow: inset 0 0 0 2px var(--alm-red); }
.lg-sel { background: var(--alm-red); }
.lg-mstart { background: var(--alm-gold); }
.mf-entry { background: var(--alm-paper); border-color: var(--alm-edge); }
.mf-entry b { font-family: var(--sans); color: var(--alm-ink); }
.mf-entry-ic { background: var(--alm-paper-2); color: var(--alm-red); }

/* the rashi chart as a printed kundali */
.chart svg { filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--alm-gold) 30%, transparent)); }
.chart .ch-bg { fill: var(--alm-paper); stroke: var(--alm-gold); stroke-width: 2.5; }
.chart .ch-cell { fill: color-mix(in srgb, var(--alm-paper-2) 55%, var(--alm-paper)); stroke: var(--alm-gold-2); stroke-width: 1; }
.chart .ch-cell.is-lagna { fill: var(--alm-glow); stroke: var(--alm-red); stroke-width: 1.8; }
.chart .ch-lagna-mark { stroke: var(--alm-red); stroke-width: 1.8; }
.chart .ch-line { stroke: var(--alm-gold); stroke-width: 1.4; }
.chart .ch-first { fill: color-mix(in srgb, var(--alm-gold) 16%, transparent); }
.chart text { fill: var(--alm-ink); font-family: 'Anudina Serif', var(--sans); font-weight: 700; }
.chart .ch-sign, .chart .ch-num { fill: var(--alm-mute); font-family: var(--sans); font-weight: 600; }
.chart .ch-centre { fill: var(--alm-ink); font-family: 'Anudina Serif', var(--sans); }
.chart .ch-centre-sub { fill: var(--alm-ink-3); font-family: var(--sans); }
.chart tspan.is-light { fill: var(--alm-red); }
.chart tspan.is-lagna { fill: var(--alm-red); }
.chart-card {
  border: 1.5px solid var(--alm-gold);
  box-shadow: inset 0 0 0 4px var(--alm-paper), inset 0 0 0 5px var(--alm-gold-2);
  background: radial-gradient(120% 60% at 50% 0%, var(--alm-glow) 0, var(--alm-paper) 70%);
}
.chart-card .note { color: var(--alm-ink-3); }
.chart-card .seg button { background: var(--alm-paper-2); border-color: var(--alm-edge); color: var(--alm-ink-2); }
.chart-card .seg button.is-on { background: var(--alm-red); border-color: var(--alm-red); color: var(--alm-on-red); }
.gtab { background: var(--alm-paper); border-color: var(--alm-edge); }
.gtab-row { border-bottom-color: var(--alm-gold-2); color: var(--alm-ink); }
.gtab-head { color: var(--alm-red); }
.gtab-g { font-family: 'Anudina Serif', var(--sans); }
.gtab-n { color: var(--alm-ink-3); }
.gtab-row.is-lagna { background: var(--alm-glow); }
.chart-name { font-family: 'Anudina Serif', var(--sans); }

/* ---------- the finder's day, lagna by lagna ---------- */
.mf-chip.is-lagna { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.mf-chip.is-lagna.is-none { color: var(--bad-ink); background: var(--bad-bg); border-color: var(--bad-line); }
.mfw { padding: 0; }
.mfw-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mfw-n { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 13px; }
.mfw-time { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mfw-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.mfw-lagnas, .mfw-people { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.mfw-people { border-top: 1px solid var(--line); }
.mfl { border-radius: 10px; padding: 9px 10px; border: 1px solid var(--line); background: var(--surface); }
.mfl.is-good { border-color: var(--good-line); background: var(--good-bg); }
.mfl.is-avoid { opacity: .85; }
.mfl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mfl-head b { font-size: 15px; }
.mfl-nature { font-size: 11px; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 1px 6px; }
.mfl-time { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mfl-why { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.mfl-why li.is-bad { color: var(--bad-ink); }
.mfl-why li.is-good { color: var(--good-ink); }
.seg-dirs button { font-size: 12px; }
.gorow-h { display: flex; flex-direction: column; }
.gorow-vedha { font-size: 11px; color: var(--bad-ink); }

/* ---------- matching ---------- */
.mpair { display: flex; align-items: center; justify-content: space-around; gap: 8px; padding: 14px;
  background: var(--alm-paper); border-color: var(--alm-edge); }
.mperson { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mperson b { font-family: 'Anudina Serif', var(--sans); font-size: 17px; color: var(--alm-ink); }
.mperson small { font-size: 12px; color: var(--alm-ink-3); }
.mpair-and { font-family: 'Anudina Serif', var(--sans); font-size: 22px; color: var(--alm-gold); }
.mcard { padding: 0; }
.mcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 6px; }
.mcard-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.mscore { display: flex; align-items: baseline; gap: 4px; }
.mscore b { font-family: 'Anudina Serif', var(--sans); font-size: 30px; color: var(--accent-ink); }
.mscore span { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.mverdict { margin: 0 16px 8px; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.mverdict.is-excellent, .mverdict.is-good { background: var(--good-bg); color: var(--good-ink); }
.mverdict.is-acceptable { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-ink); }
.mverdict.is-low, .mverdict.is-notAdvised { background: var(--bad-bg); color: var(--bad-ink); }
.mtable { display: flex; flex-direction: column; }
.mrow { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1.05fr; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12.5px; align-items: center; }
.mrow-head { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.mrow .mk { font-weight: 700; }
.mpts { display: flex; flex-direction: column; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mbar { display: block; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mbar u { display: block; height: 100%; background: var(--accent); text-decoration: none; }
.mbar u.is-full { background: var(--good); }
.mbar u.is-zero { background: var(--bad); width: 100% !important; opacity: .25; }
.mdosha { display: flex; flex-direction: column; gap: 10px; }
.mdosha-row b { color: var(--bad-ink); }
.mexc { font-size: 12.5px; color: var(--good-ink); margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.mlist { display: flex; flex-direction: column; }
.mpo { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); }
.mpo-mark { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; flex: none; font-weight: 800; }
.mpo.is-ok .mpo-mark { background: var(--good-bg); color: var(--good-ink); }
.mpo.is-no .mpo-mark { background: var(--bad-bg); color: var(--bad-ink); }
.mpo b { font-size: 14px; display: block; }
.mpo small { font-size: 11px; color: var(--ink-2); }
.mpo.is-vital.is-no { background: var(--bad-bg); }
.mpo-v { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.charts-match { background: var(--alm-paper); border-color: var(--alm-edge); }
.charts-match b { font-family: 'Anudina Serif', var(--sans); color: var(--alm-ink); }

/* ---------- v25: first-open welcome, person intro, version ---------- */
.welcome { background: var(--alm-paper); border: 1px solid var(--alm-edge); box-shadow: inset 0 0 0 3px var(--alm-glow), inset 0 0 0 4px var(--alm-gold); }
.welcome-t { font-family: 'Anudina Serif', Georgia, serif; font-size: 19px; font-weight: 700; color: var(--alm-red); margin-bottom: 4px; }
.welcome-s { margin: 0 0 10px; color: var(--alm-ink); font-size: 14px; line-height: 1.5; }
.welcome-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 2px; border: 0; border-top: 1px dashed var(--alm-edge); background: none; color: var(--alm-ink); font: inherit; text-align: left; cursor: pointer; }
.welcome-row .welcome-k { flex: 1; color: var(--alm-mute); font-size: 13px; }
.welcome-row b { font-weight: 700; }
.welcome-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.note-intro { background: var(--alm-paper); border: 1px solid var(--alm-edge); border-left: 3px solid var(--alm-gold); color: var(--alm-ink); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }
.app-version { text-align: center; color: var(--ink-3, #8a7a6a); font-size: 12.5px; padding: 6px 0 2px; display: flex; flex-direction: column; gap: 2px; }
.app-version small { font-size: 11px; opacity: .7; letter-spacing: .02em; }

/* Festival notes: how the day is kept, and its story */
.fnotes { background: var(--alm-paper); border: 1px solid var(--alm-edge); display: flex; flex-direction: column; gap: 12px; }
.fnote p { margin: 4px 0 0; color: var(--alm-ink); font-size: 14.5px; line-height: 1.6; }
.fnote-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--alm-red); }
.fnote-h .ic { width: 16px; height: 16px; }
.fnote + .fnote { border-top: 1px dashed var(--alm-edge); padding-top: 12px; }

/* Regional solar calendar: in the box footer, the month header and cells */
.pbox-solar { color: var(--alm-ink-3); font-weight: 600; }
.calhead-t { flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.calhead-t h2 { flex-grow: 0; }
.calhead-sol { color: var(--alm-ink-3); font-size: 12px; font-weight: 600; text-align: center; }
.cell { position: relative; }
.cell s.sol { position: absolute; top: 3px; right: 4px; text-decoration: none; font-size: 9.5px; line-height: 1; color: var(--alm-ink-3); opacity: .85; font-weight: 600; }
.cell s.sol.is-one { font-size: 8.5px; max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: clip; color: var(--alm-red); opacity: 1; }
.cell.is-sel s.sol { color: var(--alm-on-red); }

/* ======================================================================
   Printed pages: the month calendar and the horoscope (v25).
   Nothing here shows on screen; #printRoot is filled only while printing.
   ====================================================================== */
#printRoot { display: none; }
@page { size: 210mm 297mm; margin: 9mm; }   /* A4, whatever the printer's default */
@media print {
  html.is-printing body > *:not(#printRoot) { display: none !important; }
  html.is-printing #printRoot { display: block; }
  html.is-printing, html.is-printing body { background: #fff !important; }
  html.is-printing { font-size: 10px; }
  #printRoot { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #3B1D0E; font-family: var(--sans); }
}
.pr { --p-paper: #FBF5E8; --p-edge: #E3CFA8; --p-gold: #C9A46A; --p-ink: #3B1D0E; --p-ink2: #6B3A1E; --p-mute: #8A6A52; --p-red: #9A3412; --p-bar: #8a4130; --p-green: #2F6B3A;
  color: var(--p-ink); background: #fff; font-size: 10px; line-height: 1.3; }
.pr-head { display: flex; align-items: stretch; background: var(--p-bar); color: #FBF3E4; border-radius: 3mm; padding: 3.2mm 4mm; gap: 4mm; }
.pr-brand { display: flex; align-items: center; gap: 2.4mm; min-width: 44mm; }
.pr-mark-wrap { color: #F8C766; display: inline-flex; }
.pr-mark { width: 10mm; height: 10mm; }
.pr-brand b { display: block; font-family: 'Anudina Serif', var(--sans); font-size: 17px; letter-spacing: .02em; }
.pr-brand small { display: block; font-size: 8.5px; color: #EAD8C9; }
.pr-title { flex: 1; text-align: right; display: flex; flex-direction: column; justify-content: center; }
.pr-title h1 { margin: 0; font-family: 'Anudina Serif', var(--sans); font-size: 22px; font-weight: 700; color: #FFF7EA; }
.pr-sub { font-size: 8.8px; color: #F3E3D2; margin-top: .6mm; }
.pr-cal { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin-top: 3mm; background: var(--p-paper); border: .5mm solid var(--p-gold); border-radius: 2mm; overflow: hidden; }
.pr-cal th { background: #F4EAD6; color: var(--p-ink2); font-size: 8.8px; font-weight: 700; padding: 1.4mm 0; border-bottom: .35mm solid var(--p-gold); }
.pr-cal th.is-sun { color: var(--p-red); }
.pr-cal td { vertical-align: top; padding: 1.1mm 1.3mm; height: 29mm; border-right: .25mm solid var(--p-edge); border-bottom: .25mm solid var(--p-edge); overflow: hidden; }
.pr-cal.rows-6 td { height: 24mm; }
.pr-cal tr td:last-child { border-right: 0; }
.pr-cal tbody tr:last-child td { border-bottom: 0; }
.pr-cal td.is-blank { background: repeating-linear-gradient(135deg, transparent 0 2mm, rgba(201,164,106,.12) 2mm 2.6mm); }
.pr-cal td.is-fest { background: #FFF1DF; }
.pr-d { display: flex; align-items: baseline; justify-content: space-between; }
.pr-d b { font-family: 'Anudina Serif', var(--sans); font-size: 17px; line-height: 1; }
.pr-cal td.is-sun .pr-d b { color: var(--p-red); }
.pr-sol { text-decoration: none; font-size: 7.6px; color: var(--p-mute); font-weight: 700; }
.pr-sol.is-one { color: var(--p-red); }
.pr-t { font-size: 8.4px; font-weight: 700; color: var(--p-ink2); margin-top: .6mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-n { font-size: 7.8px; color: var(--p-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-e { font-size: 7.8px; line-height: 1.15; margin-top: .5mm; color: var(--p-ink); }
.pr-e.is-major { color: var(--p-red); font-weight: 700; }
.pr-e.is-eka { color: var(--p-green); font-weight: 600; }
.pr-e.is-grahana { color: #111; font-weight: 700; }
.pr-legend { display: flex; gap: 5mm; align-items: center; font-size: 8px; color: var(--p-mute); margin: 1.4mm .5mm 0; }
.pr-key::before { content: ''; display: inline-block; width: 2.2mm; height: 2.2mm; border-radius: 50%; margin-right: 1mm; vertical-align: -.2mm; }
.pr-key.is-major::before { background: var(--p-red); }
.pr-key.is-eka::before { background: var(--p-green); }
.pr-lists { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5mm; margin-top: 3mm; }
.pr-lists h3 { margin: 0 0 1.2mm; font-family: 'Anudina Serif', var(--sans); font-size: 11px; color: var(--p-red); border-bottom: .35mm solid var(--p-gold); padding-bottom: .6mm; }
.pr-lists h3 + ul + h3, .pr-lists ul + h3 { margin-top: 2.6mm; }
.pr-list { list-style: none; margin: 0; padding: 0; columns: 1; }
.pr-lists > div:first-child .pr-list { columns: 2; column-gap: 4mm; }
.pr-list li { display: flex; gap: 2mm; font-size: 8.6px; padding: .45mm 0; break-inside: avoid; }
.pr-ld { flex: 0 0 11mm; color: var(--p-mute); font-weight: 700; }
.pr-list small { display: block; color: var(--p-mute); font-size: 7.6px; }
.pr-none { color: var(--p-mute); }
.pr-foot { display: flex; gap: 4mm; align-items: center; margin-top: 3.5mm; padding-top: 2.5mm; border-top: .5mm double var(--p-gold); }
.pr-qr svg { display: block; width: 21mm; height: 21mm; }
.pr-foot-t { display: flex; flex-direction: column; gap: .5mm; font-size: 8.6px; }
.pr-foot-t b { font-size: 10px; color: var(--p-red); }
.pr-foot-t small { color: var(--p-mute); font-size: 7.6px; }
.pr-made { font-style: italic; }

/* Horoscope: birth panchanga, dasha (v25) */
.dasha-now { display: flex; flex-direction: column; gap: 2px; background: var(--alm-paper); border: 1px solid var(--alm-edge); border-left: 3px solid var(--alm-red); border-radius: 10px; padding: 8px 12px; margin: 6px 0 4px; }
.dasha-now b { font-family: 'Anudina Serif', var(--sans); font-size: 18px; color: var(--alm-ink); }
.dasha-now small { color: var(--alm-ink-3); font-size: 12.5px; }
.dasha-md { border-top: 1px dashed var(--alm-edge); }
.dasha-md summary { display: flex; align-items: baseline; gap: 8px; padding: 9px 2px; cursor: pointer; list-style: none; }
.dasha-md summary::-webkit-details-marker { display: none; }
.dasha-md summary::before { content: '\203A'; color: var(--alm-gold); font-weight: 700; transition: transform .15s; display: inline-block; }
.dasha-md[open] summary::before { transform: rotate(90deg); }
.dasha-md.is-now summary b { color: var(--alm-red); }
.dasha-y { font-size: 12px; color: var(--alm-mute); }
.dasha-d { font-size: 12.5px; color: var(--alm-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dasha-sub { padding: 0 0 8px 16px; display: flex; flex-direction: column; }
.dasha-ad { display: flex; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.dasha-ad.is-now { background: var(--alm-paper); color: var(--alm-red); font-weight: 700; }

/* the printed horoscope */
.pr-horo h3 { margin: 0 0 1.4mm; font-family: 'Anudina Serif', var(--sans); font-size: 11px; color: var(--p-red); border-bottom: .35mm solid var(--p-gold); padding-bottom: .6mm; }
.pr-horo-top { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 4mm; margin-top: 4mm; align-items: start; }
.pr-chart svg { width: 100%; height: auto; display: block; }
.pr-kv { width: 100%; border-collapse: collapse; font-size: 8.8px; }
.pr-kv th { text-align: left; color: var(--p-mute); font-weight: 600; padding: .8mm 1mm .8mm 0; white-space: nowrap; vertical-align: top; }
.pr-kv td { font-weight: 700; padding: .8mm 0; border-bottom: .2mm dashed var(--p-edge); }
.pr-horo-mid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5mm; margin-top: 5mm; align-items: start; }
.pr-grahas { width: 100%; border-collapse: collapse; font-size: 8.6px; }
.pr-grahas th { text-align: left; background: #F4EAD6; color: var(--p-ink2); padding: 1mm; font-size: 8px; }
.pr-grahas td { padding: .9mm 1mm; border-bottom: .2mm solid var(--p-edge); }
.pr-grahas tr.is-lagna td { font-weight: 700; color: var(--p-red); }
.pr-note { font-size: 8.4px; color: var(--p-ink2); margin: 2mm 0 0; }
.pr-dasha { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2mm; }
.pr-md { border: .3mm solid var(--p-edge); border-radius: 1.5mm; padding: 1.2mm 1.5mm; background: var(--p-paper); break-inside: avoid; }
.pr-md.is-now { border-color: var(--p-red); box-shadow: inset 0 0 0 .3mm var(--p-red); }
.pr-md-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1mm; border-bottom: .2mm solid var(--p-edge); margin-bottom: .6mm; }
.pr-md-h b { font-size: 9.6px; color: var(--p-red); }
.pr-md-h span { font-size: 6.8px; color: var(--p-mute); }
.pr-ads div { display: flex; justify-content: space-between; font-size: 7.2px; line-height: 1.35; }
.pr-ads div.is-now { font-weight: 700; color: var(--p-red); }
.pr-horo .pr-chart { background: var(--p-paper); border-radius: 1.5mm; }

/* Paper is always light, whatever the screen theme. */
#printRoot, .pr { --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; --moon-dark: #9AA2B1; --moon-rim: rgba(18,21,26,.18); --surface: #FFFFFF;  --surface-2: #EEF0F4;  --line: #E3E6EC;  --ink: #12151A;  --ink-2: #59616E;  --ink-3: #79818E;  --accent: #C2410C;  --accent-ink: #9A3412; color-scheme: light; }

/* ---------- v26 ---------- */
/* The date at the foot of the box, set like the clock opposite it. */
.pbox-greg { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pbox-greg b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.alm .pbox-greg { color: var(--alm-red); }
.pbox-greg .pbox-solar { font-size: 13px; }

/* The foot of More: the mark, the name, the version, the maker. */
.app-version { align-items: center; gap: 3px; padding: 14px 0 6px; }
.app-version .app-mark { color: var(--alm-gold); display: inline-flex; }
.app-version .app-mark svg { width: 34px; height: 34px; }
.app-version .app-name { font-family: 'Anudina Serif', var(--sans); font-size: 18px; color: var(--alm-red); }
.app-version .app-by { color: var(--alm-ink-3); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.app-version .app-by:hover { text-decoration: underline; }

/* Day navigation, v26: the neighbours name their weekday; the middle says
   Today or the day on screen, and opens the date picker. None is filled. */
.dnav-btn { flex-direction: row; gap: 4px; background: var(--alm-paper); border-color: var(--alm-edge); color: var(--alm-ink-2); }
.dnav-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dnav-chev { width: 16px; height: 16px; color: var(--alm-gold); flex: none; }
.dnav-mid { flex-direction: column; flex: 1.25; border-width: 1.5px; }
.dnav-mid .dnav-k { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--alm-ink); }
.dnav-mid .dnav-k .ic { color: var(--alm-gold); }
.dnav-mid.is-today { border-color: var(--alm-gold); }
.dnav-mid.is-today .dnav-k { color: var(--alm-red); }
.dnav-mid.is-away { border-color: var(--caution-line); background: var(--caution-bg); }

/* Away from today: a bar that stays under the header while you scroll. */
.awaybar {
  position: sticky; top: calc(var(--topbar-h, 64px) + 6px); z-index: 15;
  display: flex; align-items: center; gap: 10px;
  background: var(--caution-bg); color: var(--caution-ink); border: 1px solid var(--caution-line);
  border-radius: 16px; padding: 8px 8px 8px 12px;
  box-shadow: var(--shadow-glass);
}
.awaybar-ic { width: 22px; height: 22px; color: var(--caution-ink); flex: none; }
.awaybar-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.awaybar-t b { font-size: 15px; }
.awaybar-t small { font-size: 12px; color: var(--caution-ink); opacity: .85; }
.awaybar-go {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--alm-red); color: #FFF7EA; border: 0; border-radius: 10px;
  padding: 10px 12px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.awaybar-go .ic { color: #FFF7EA; }
:root[data-theme="dark"] .dnav-mid.is-away { background: var(--caution-bg); border-color: var(--caution-line); }

/* The way back to today in the date picker: large, and first when away. */
.btn-today { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--alm-paper); color: var(--alm-red); border: 1.5px solid var(--alm-red); }
.btn-today span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.btn-today b { font-size: 16px; }
.btn-today small { font-size: 12px; color: var(--alm-ink-3); font-weight: 500; }
.btn-today.is-away { background: var(--alm-red); color: #FFF7EA; border-color: var(--alm-red); }
.btn-today.is-away small { color: #F6DCC8; }
.btn-today .ic { width: 20px; height: 20px; }

/* The kala bar, v26: soft fills without borders or patterns, so the names
   inside stay readable. The hue says the nature: reds to orange-reds are to
   be avoided, greens to blue-greens are good, greys are neutral. */
:root {
  --kb-rahu: #F6B8B0;    --kt-rahu: #8E1B12;
  --kb-yama: #F9CFA0;    --kt-yama: #8A4506;
  --kb-gulika: #F4C2D2;  --kt-gulika: #8C1A43;
  --kb-varjya: #EDC3B1;  --kt-varjya: #7E2F16;
  --kb-bhadra: #F3D2B5;  --kt-bhadra: #7A3A10;
  --kb-ashubha: #EBC7CF; --kt-ashubha: #6E1F33;
  --kb-dur: #DADFE6;     --kt-dur: #3F4855;
  --kb-nishita: #E1E0EC; --kt-nishita: #454366;
  --kb-bsoft: #ECEEF1;   --kt-bsoft: #5A6270;
  --kb-abhijit: #BFE5C6; --kt-abhijit: #13572A;
  --kb-siddhi: #D9EDB8;  --kt-siddhi: #3E5A0F;
  --kb-amrita: #B5E4DD;  --kt-amrita: #0D5C58;
  --kb-punya: #C7E8D8;   --kt-punya: #1B5E47;
  --kb-brahma: #BFDDF2;  --kt-brahma: #124A77;
}
:root[data-theme="dark"] {
  --kb-rahu: #5A2320;    --kt-rahu: #FFC9C2;
  --kb-yama: #56361A;    --kt-yama: #FFD9AE;
  --kb-gulika: #552238;  --kt-gulika: #FFC6DA;
  --kb-varjya: #4E2C22;  --kt-varjya: #F5CDBD;
  --kb-bhadra: #4C3322;  --kt-bhadra: #F3D4B8;
  --kb-ashubha: #4A2530; --kt-ashubha: #F1C9D2;
  --kb-dur: #353B45;     --kt-dur: #D5DAE2;
  --kb-nishita: #34334A; --kt-nishita: #D6D4F0;
  --kb-bsoft: #2C3038;   --kt-bsoft: #B8BFC9;
  --kb-abhijit: #1E4A2C; --kt-abhijit: #BDF0CB;
  --kb-siddhi: #3A4A1C;  --kt-siddhi: #DDF0B8;
  --kb-amrita: #17463F;  --kt-amrita: #B6EEE5;
  --kb-punya: #1E4436;   --kt-punya: #C3EDD9;
  --kb-brahma: #1C3A55;  --kt-brahma: #C2DFF6;
}
.band { border: 0 !important; box-shadow: none !important; border-radius: 5px; }
.b-rahu    { background: var(--kb-rahu);    color: var(--kt-rahu); }
.b-yama    { background: var(--kb-yama);    color: var(--kt-yama); }
.b-gulika  { background: var(--kb-gulika);  color: var(--kt-gulika); }
.b-varjya  { background: var(--kb-varjya);  color: var(--kt-varjya); }
.b-bhadra  { background: var(--kb-bhadra);  color: var(--kt-bhadra); }
.b-ashubha { background: var(--kb-ashubha); color: var(--kt-ashubha); }
.b-dur     { background: var(--kb-dur);     color: var(--kt-dur); }
.b-nishita { background: var(--kb-nishita); color: var(--kt-nishita); }
.b-bhadra-soft { background: var(--kb-bsoft); color: var(--kt-bsoft); }
.b-abhijit { background: var(--kb-abhijit); color: var(--kt-abhijit); }
.b-siddhi  { background: var(--kb-siddhi);  color: var(--kt-siddhi); }
.b-amrita  { background: var(--kb-amrita);  color: var(--kt-amrita); }
.b-punya   { background: var(--kb-punya);   color: var(--kt-punya); }
.b-brahma  { background: var(--kb-brahma);  color: var(--kt-brahma); }
.dbar-night .b-siddhi, .dbar-night .b-bhadra-soft, .dbar-night .b-punya { background-color: revert-layer; }
.dbar-night .b-siddhi { background: var(--kb-siddhi); }
.dbar-night .b-bhadra-soft { background: var(--kb-bsoft); }
.dbar-night .b-punya { background: var(--kb-punya); }
.band em { font-weight: 700; font-size: 10px; }
.legend b.band { border-radius: 3px; }
/* Printed pages are laid out for A4: 210 mm less 9 mm margins each side. */
@media print { .pr { width: 192mm; max-width: 192mm; margin: 0 auto; } }

/* v26 H2: the bar carries the name alone; the tagline lives in More. */
.topbar .brandtext i { display: none; }


/* T6: the words in the box are buttons that open sheets; they look as they did. */
.pb-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.alm .pb-link:hover { text-decoration: underline; text-decoration-color: var(--alm-gold); text-underline-offset: 3px; }
.alm .alm-mp .pb-link { font-size: 14px; font-weight: 600; color: var(--alm-red); line-height: 1.45; letter-spacing: 0; }

/* T5: the day's times fold out beneath the Rahu and Abhijit tiles. */
.dbar-fold summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; font-weight: 700; color: var(--alm-ink-2); list-style: none; }
.dbar-fold summary::-webkit-details-marker { display: none; }
.dbar-fold summary::after { content: '\203A'; transform: rotate(90deg); color: var(--alm-gold); font-size: 20px; transition: transform .15s; }
.dbar-fold[open] summary::after { transform: rotate(270deg); }
.dbar-fold > :not(summary) { padding: 0 12px 12px; }

/* T3: "More about this day" */
.more-day { display: flex; flex-direction: column; }
.more-day-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: var(--radius); background: var(--alm-paper); border: 1px solid var(--alm-edge); color: var(--alm-ink-2); font-weight: 700; cursor: pointer; list-style: none; }
.more-day-h::-webkit-details-marker { display: none; }
.more-day[open] .more-day-chev { transform: rotate(180deg); }
.more-day-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.share-opt .ic { width: 22px; height: 22px; color: var(--alm-red); flex: none; }
.share-opt { gap: 12px; align-items: center; }

/* C1: the calendar says the kind of day by the colour of its name. */
.cell .lbl.is-major { color: var(--alm-red); font-weight: 700; }
.cell .lbl.is-ekadashi { color: #2F6B3A; font-weight: 700; }
.cell .lbl.is-full, .cell .lbl.is-new { color: var(--alm-ink-3); font-weight: 600; }
.lg-word { font-weight: 700; font-size: 12px; }
.lg-word.is-major { color: var(--alm-red); }
.lg-word.is-ekadashi { color: #2F6B3A; }
.lg-word.is-moon { color: var(--alm-ink-3); }
:root[data-theme="dark"] .cell .lbl.is-ekadashi, :root[data-theme="dark"] .lg-word.is-ekadashi { color: #86D19A; }
/* K1: every Times filter visible, wrapping to two lines if it must */
.seg-wrap.is-wrapping .seg { flex-wrap: wrap; overflow: visible; }
.seg-wrap.is-wrapping .seg-more { display: none !important; }
.seg-wrap.is-wrapping { mask-image: none !important; -webkit-mask-image: none !important; }
/* K2 */
.tsec-past summary { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: var(--ink-3); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; border-bottom: 1px solid var(--line); }
.tsec-past summary::-webkit-details-marker { display: none; }
.tsec-past[open] summary .ic { transform: rotate(180deg); }
/* K3: rows tinted by their nature, in the kala bar's soft colours */
.prow.is-good { background: color-mix(in srgb, var(--kb-abhijit) 34%, transparent); }
.prow.is-bad { background: color-mix(in srgb, var(--kb-rahu) 30%, transparent); }
.prow.is-good.is-now, .prow.is-bad.is-now { background-image: linear-gradient(90deg, color-mix(in srgb, var(--alm-gold) 18%, transparent), transparent); }
.seg-wrap.is-wrapping::before, .seg-wrap.is-wrapping::after { display: none; }
.seg-wrap.is-wrapping .seg { gap: 8px; }
.more-adv summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; font-weight: 600; list-style: none; }
.more-adv summary::-webkit-details-marker { display: none; }
.more-adv summary::after { content: '\203A'; transform: rotate(90deg); color: var(--ink-3); font-size: 20px; }
.more-adv[open] summary::after { transform: rotate(270deg); }
.more-adv-hint { color: var(--ink-3); font-weight: 400; font-size: 12.5px; }
.more-adv[open] summary { border-bottom: 1px solid var(--line); }
.chart-parts { margin-bottom: 2px; }
.chart-parts button { flex: 1; }

/* S2: a handle that says the sheet can be pulled down */
.sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto -6px; flex: none; box-sizing: content-box; border: 10px solid transparent; background-clip: padding-box; touch-action: none; }
.sheet-head { touch-action: none; }

/* Rule 4 (v26): a filled button is an action, never a state. A chosen
   option is marked with a coloured border, a tint and bold text. */
.seg button.is-on {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); font-weight: 700;
}
.seg button.is-on small { color: var(--accent-ink); opacity: .8; }
/* On almanac paper the chosen option is in the almanac's red ink. */
.chart-card .seg button.is-on {
  background: color-mix(in srgb, var(--alm-red) 9%, var(--alm-paper));
  border-color: var(--alm-red); color: var(--alm-red); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--alm-red);
}

/* The account sheet */
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { filter: brightness(1.05); }

/* ---------- the account: greeting, the Today row, the device list ----------
 *
 * The greeting sits once at the top of More, not on Today. Today carries a
 * plain row while signed out, and one quiet line once signed in.
 */
.more-greet {
  padding: 2px 4px 8px;
  font-family: 'Anudina Serif', var(--sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}
.account-row { margin-top: 2px; }
.account-here {
  display: block;
  width: 100%;
  padding: 6px 4px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  text-align: center;
  color: var(--ink-3);
  cursor: pointer;
}
.account-here:hover { color: var(--ink-2); }
.device-row { display: flex; align-items: center; gap: 10px; }
.device-row .grow { min-width: 0; }
.device-row.is-here .elrow-k { font-weight: 600; }


/* ---------- the page behind the app ----------
 *
 * Only on a window wider than the app itself. On a phone the column fills
 * the screen and nothing here applies, so nothing changes.
 */
@media (min-width: 560px) {
  :root { --gut: 16px; }
}

/* ---------- the icons on rows ----------
 *
 * Quiet by default and darker under the pointer, so they read as a guide
 * to the row rather than decoration competing with the label.
 */
.setrow-i { color: var(--ink-3); flex: none; width: 19px; height: 19px; stroke-width: 1.8; }
.setrow.has-i { gap: 11px; }
.setrow:hover .setrow-i { color: var(--accent); }
.setrow.has-i .setrow-k { margin-left: 1px; }

.card-i { color: var(--accent); flex: none; width: 22px; height: 22px; stroke-width: 1.8; }
.charts-all { display: flex; align-items: center; gap: 12px; }

.pgrid-i { color: var(--ink-3); margin-right: 5px; vertical-align: -2px; stroke-width: 2; }
.pgrid-k { display: inline-flex; align-items: center; }

/* The code field and the button that fills it from whatever was copied. */
.code-row { display: flex; align-items: center; gap: 8px; }
.code-row .field { flex: 1 1 auto; letter-spacing: .28em; font-weight: 600; }
.code-paste { flex: none; gap: 6px; }

/* ---------------- v29: signing in, one step at a time ---------------- */
.btn-link {
  display: block; width: 100%; padding: 12px 4px; background: none; border: 0;
  color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 600;
  text-align: center; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.acct-step { font-size: 14px; color: var(--ink-2); padding: 2px 2px 0; }
.acct-quiet-end { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
.acct-quiet-end .btn-link { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.acct-tick { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); cursor: pointer; }
.acct-tick input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--bad-ink, #B3261E); }
.btn-danger[disabled] { opacity: .45; cursor: not-allowed; }
.acct-signout-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }

/* ---------------- pull to refresh ---------------- */
.ptr {
  position: fixed; left: 50%; top: calc(var(--topbar-h, 64px) + 6px); z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
  border-radius: 999px; background: var(--glass-strong); color: var(--ink-2);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: var(--shadow-2); font-size: 13px; font-weight: 600;
  transform: translate(-50%, -70px); opacity: 0; pointer-events: none;
}
.ptr svg { width: 18px; height: 18px; stroke: var(--accent-ink); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.ptr.is-ready { color: var(--accent-ink); }
.ptr.is-busy svg { animation: ptr-spin .8s linear infinite; }
.ptr.is-back { transition: transform .22s var(--ease), opacity .22s var(--ease); }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.is-busy svg { animation: none; } }

/* ======================================================================
 * Sarathi (v30), the Gold tab
 * ====================================================================== */
.tab-sarathi .ic { color: var(--alm-gold); }
.tab-sarathi.is-on .ic { color: var(--accent-ink); }
.sr-gold { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, #F8D77E, #C9A46A); color: #4A2A08; border-radius: 6px; padding: 2px 7px; }
.sr-hero, .sr-head, .sr-month { background: var(--alm-paper); color: var(--alm-ink); 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); }
.sr-hero-top { display: flex; align-items: center; gap: 10px; }
.sr-hero-name { font-family: 'Anudina Serif', var(--sans); font-size: 21px; color: var(--alm-red); }
.sr-hero-tag { margin: 4px 0 10px; font-size: 15px; color: var(--alm-ink-2); }
.sr-hero p, .sr-offer p { margin: 8px 0; line-height: 1.5; }
.sr-who { display: flex; align-items: center; gap: 8px; }
.sr-hello { font-size: 15px; color: var(--alm-ink-2); }
.sr-who-btn { background: var(--alm-paper-2); border-color: var(--alm-edge); color: var(--alm-ink); font-weight: 600; }
.sr-date { font-size: 13px; color: var(--alm-ink-3); margin-top: 6px; }
.sr-grade { margin: 6px 0 0; font-size: 23px; line-height: 1.25; font-weight: 700; }
.sr-grade.g-uttama { color: #8A5A00; } .sr-grade.g-shubha { color: #15803D; }
.sr-grade.g-sama { color: var(--alm-ink); } .sr-grade.g-careful { color: #B42318; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sr-chip { font-size: 12px; border-radius: 999px; padding: 4px 10px; background: var(--alm-paper-2); color: var(--alm-ink-2); border: 1px solid var(--alm-edge); }
.sr-chip.q-good { background: #ECFDF3; border-color: #BBEBCD; color: #15803D; }
.sr-chip.q-bad, .sr-chip.q-severe { background: #FEF3F2; border-color: #FBD5D2; color: #B42318; }
.sr-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 14px; text-align: center; }
.sr-wd { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sr-wd .dow, .sr-cal .dow { font-size: 11px; color: var(--alm-red); font-weight: 700; }
.sr-dot { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.g-uttama.sr-dot, .sr-sw.g-uttama { background: linear-gradient(145deg, #FBE6A8, #E9C46A); color: #4A2A08; box-shadow: 0 0 0 2px #C9A46A; }
.g-shubha.sr-dot, .sr-sw.g-shubha { background: #CDEFD8; color: #14532D; }
.g-sama.sr-dot, .sr-sw.g-sama { background: #F1E6D2; color: #6B4A2E; }
.g-careful.sr-dot, .sr-sw.g-careful { background: #F9D5D0; color: #8A1C12; }
.g-wait.sr-dot { background: var(--alm-paper-2); color: var(--alm-mute); }
.is-sel .sr-dot { outline: 2.5px solid var(--alm-red); outline-offset: 3px; }
.sr-best { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 16px; height: 12px; display: block; }
.sr-best svg, .sr-mk svg, .sr-lg svg { width: 100%; height: 100%; display: block; }
.sr-mk { position: absolute; right: -5px; bottom: -4px; width: 14px; height: 14px; display: block; }
.sr-lg { width: 16px; height: 16px; flex: none; display: inline-block; }
.sr-reading p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.sr-now { border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.k-shubha { background: #FFF4D6; border: 1px solid #EFD48F; }
.k-steady { background: #EEF3FB; border: 1px solid #D5E0F2; }
.k-pause { background: #F3EFF6; border: 1px solid #DDD3E6; }
.sr-now-k { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sr-now-t { font-size: 20px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sr-ic { width: 18px; height: 18px; flex: none; }
.sr-ic-steady { color: #3B6FB6; } .sr-ic-pause { color: #7B5B94; }
.sr-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.sr-row:first-of-type, .eyebrow + .sr-row { border-top: 0; }
.sr-t { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-why { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.sr-mins { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sr-bell { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--line); font-weight: 600; white-space: nowrap; }
.sr-whole { margin-top: 4px; }
.sr-kind { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; width: 84px; flex: none; }
.sr-list { padding: 2px 14px; }
.sr-part { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--alm-ink-2); margin: 12px 2px 6px; }
.sr-seg { margin: 10px 0 2px; }
.sr-chart-card { padding: 8px; }
.sr-chart svg { width: 100%; height: auto; display: block; }
.sr-band-shubha { fill: #FFF4D6; } .sr-band-steady { fill: #EEF3FB; } .sr-band-pause { fill: #F3EFF6; }
.sr-area { fill: var(--accent-soft); } .sr-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.sr-now-line { stroke: var(--ink); stroke-dasharray: 3 3; }
.sr-lab { font-size: 10px; font-weight: 700; } .sr-lab-shubha { fill: #8A5A00; } .sr-lab-steady { fill: #3B6FB6; } .sr-lab-pause { fill: #7B5B94; }
.sr-tick { font-size: 10px; fill: var(--ink-3); }
.sr-sec { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 8px 4px -2px; }
.sr-month-head { display: flex; align-items: center; gap: 8px; text-align: center; }
.sr-month-head b { font-size: 18px; }
.sr-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 12px; text-align: center; margin-top: 12px; justify-items: center; }
.sr-cal-d { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.sr-cal-d.is-today .sr-dot { text-decoration: underline; text-underline-offset: 3px; }
.sr-wait { text-align: center; margin-top: 10px; }
.sr-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 12.5px; color: var(--ink-2); }
.sr-legend div { display: flex; gap: 7px; align-items: center; }
.sr-sw { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.sr-tr { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.eyebrow + .sr-tr { border-top: 0; }
.sr-tr b { font-size: 14px; } .sr-tr p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.sr-date { font-size: 13px; color: var(--ink-3); }
.sr-planet { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; background: #8A5A3C; }
.p-sun { background: #EA580C; } .p-moon { background: #64748B; } .p-mars { background: #C0392B; } .p-mercury { background: #16A34A; }
.p-jupiter { background: #D4A017; } .p-venus { background: #DB2777; } .p-saturn { background: #4B5563; } .p-rahu { background: #334155; } .p-ketu { background: #78716C; }
.sr-good { color: #15803D; font-weight: 600; } .sr-gently { color: #B42318; font-weight: 600; }
.sr-h { margin: 0 0 4px; font-size: 18px; }
:root[data-theme="dark"] .k-shubha { background: #3A2E10; border-color: #6B5320; }
:root[data-theme="dark"] .k-steady { background: #17243A; border-color: #2B3F63; }
:root[data-theme="dark"] .k-pause { background: #2A2033; border-color: #4A3A5A; }
:root[data-theme="dark"] .sr-band-shubha { fill: #3A2E10; } :root[data-theme="dark"] .sr-band-steady { fill: #17243A; } :root[data-theme="dark"] .sr-band-pause { fill: #2A2033; }

/* ======================================================================
 * v31: the token system for levels, grades and kinds; the gate; the two
 * modes; the day's times featured; Coming up in two colours; the dasha
 * explorer; birth details; words explained; the quick settings cards.
 * Every colour below is a token, with its dark value beside it, so no
 * component carries a colour of its own.
 * ====================================================================== */

:root {
  /* the four levels */
  --lv-login: #2F6FB3;   --lv-login-bg: #EAF2FC;   --lv-login-line: #BBD3EF;
  --lv-silver: #5B6473;  --lv-silver-bg: #EEF1F5;  --lv-silver-line: #C9D0DA;
  --lv-gold: #8A5A00;    --lv-gold-bg: #FFF4D6;    --lv-gold-line: #E9CF8A;
  /* the four day grades: greens that reassure, ambers that say take care */
  --g-uttama: #7A4E00;   --g-uttama-bg: linear-gradient(145deg, #FBE6A8, #E9C46A); --g-uttama-ring: #C9A46A;
  --g-shubha: #14532D;   --g-shubha-bg: #CDEFD8;   --g-shubha-line: #9BD9B2;
  --g-sama: #4A4034;     --g-sama-bg: #EDE6DA;     --g-sama-line: #D6CBB8;
  --g-careful: #8A1C12;  --g-careful-bg: #F9D5D0;  --g-careful-line: #EFAFA6;
  /* whose a row is: yours, or everyone's */
  --k-personal: #2F6FB3; --k-personal-bg: #EAF2FC; --k-personal-line: #BBD3EF;
  --k-festival: #B4530A; --k-festival-bg: #FFF1E7; --k-festival-line: #F3CBAE;
  /* the featured box for the day's times */
  --feat-bg: #EEF5FB;    --feat-line: #C8DCEE;     --feat-ink: #123B63;
  /* how faint a gated thing is drawn */
  --faint: .48;
}
:root[data-theme="dark"] {
  --lv-login: #8BB8EE;   --lv-login-bg: #1B2A3C;   --lv-login-line: #2E4A6B;
  --lv-silver: #C3CAD4;  --lv-silver-bg: #2A2E35;  --lv-silver-line: #414955;
  --lv-gold: #F0C060;    --lv-gold-bg: #33290F;    --lv-gold-line: #5C4A1C;
  --g-uttama: #FBE6A8;   --g-uttama-bg: linear-gradient(145deg, #5C4712, #8A6A1E); --g-uttama-ring: #C9A46A;
  --g-shubha: #BDF0CB;   --g-shubha-bg: #1E4A2C;   --g-shubha-line: #2E6B41;
  --g-sama: #E0D6C6;     --g-sama-bg: #3A342C;     --g-sama-line: #55493B;
  --g-careful: #FFC9C2;  --g-careful-bg: #5A2320;  --g-careful-line: #7A332E;
  --k-personal: #8BB8EE; --k-personal-bg: #1B2A3C; --k-personal-line: #2E4A6B;
  --k-festival: #F5B27A; --k-festival-bg: #3A2416; --k-festival-line: #5C3A24;
  --feat-bg: #1A2530;    --feat-line: #2C3E52;     --feat-ink: #CFE2F5;
  --faint: .42;
}

.ic-xs { width: 12px; height: 12px; stroke-width: 2.5; }
.chip-sm { min-height: 28px; padding: 2px 10px; font-size: 12px; }

/* ---------- the level badge ---------- */
.lvl { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px 3px 6px; border: 1px solid; white-space: nowrap; line-height: 1; }
.lvl .ic { width: 11px; height: 11px; }
.lvl-login { color: var(--lv-login); background: var(--lv-login-bg); border-color: var(--lv-login-line); }
.lvl-silver { color: var(--lv-silver); background: var(--lv-silver-bg); border-color: var(--lv-silver-line); }
.lvl-gold { color: var(--lv-gold); background: var(--lv-gold-bg); border-color: var(--lv-gold-line); }

/* ---------- the gate: faint, never hidden ---------- */
.gate { position: relative; cursor: pointer; border-radius: var(--radius); }
.gate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate > .is-gated { opacity: var(--faint); filter: saturate(.55); pointer-events: none; transition: opacity .15s; }
.gate:hover > .is-gated { opacity: calc(var(--faint) + .12); }
.gate-badge { position: absolute; top: 10px; right: 12px; z-index: 2; box-shadow: var(--shadow); }
.gate-inline { display: inline-flex; border-radius: 999px; }
.gate-inline > .is-gated { opacity: var(--faint); }
.gate-inline::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--lv-silver); opacity: .9; pointer-events: none; }
.gate-login.gate-inline::after { background: var(--lv-login); }
.gate-gold.gate-inline::after { background: var(--lv-gold); }
.gate-faint { opacity: var(--faint); filter: saturate(.55); pointer-events: none; user-select: none; display: flex; flex-direction: column; gap: 10px; }
.gate-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; border: 1.5px solid; }
.gate-banner b { display: block; font-size: 15px; }
.gate-banner small { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.gate-banner-login { background: var(--lv-login-bg); border-color: var(--lv-login-line); }
.gate-banner-login .card-i { color: var(--lv-login); }
.gate-banner-silver { background: var(--lv-silver-bg); border-color: var(--lv-silver-line); }
.gate-banner-gold { background: var(--lv-gold-bg); border-color: var(--lv-gold-line); }
.gate-banner-gold .card-i { color: var(--lv-gold); }
.gate-note { margin: -2px 4px 0; }
.gate-hero { border: 1.5px solid var(--line); }
.gate-hero-login { background: var(--lv-login-bg); border-color: var(--lv-login-line); }
.gate-hero-silver { background: var(--lv-silver-bg); border-color: var(--lv-silver-line); }
.gate-hero-gold { background: var(--lv-gold-bg); border-color: var(--lv-gold-line); }
.gate-hero-top { display: flex; align-items: center; gap: 10px; }
.gate-hero-ic { width: 26px; height: 26px; color: var(--ink-2); stroke-width: 1.8; }
.gate-hero-login .gate-hero-ic { color: var(--lv-login); }
.gate-hero-gold .gate-hero-ic { color: var(--lv-gold); }
.gate-hero-t { margin: 10px 0 4px; font-size: 20px; font-family: 'Anudina Serif', var(--sans); }
.gate-hero p { margin: 4px 0 0; line-height: 1.5; font-size: 14.5px; }
.gate-list { list-style: none; padding: 0; margin: 6px 0 0; }
.gate-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14.5px; }
.gate-list li .ic { color: var(--good); }
.gate-list li.is-this { font-weight: 700; }
.gate-now { text-align: center; }
.gate-line { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  background: var(--lv-silver-bg); border: 1px dashed var(--lv-silver-line); color: var(--ink-2); font: inherit; font-size: 13px; text-align: left; }
.gate-line .ic { color: var(--lv-silver); }

/* a tab the reader cannot use yet */
.tab.is-gated { color: var(--ink-3); position: relative; }
.tab.is-gated .ic { opacity: .55; }
.tab-lock { position: absolute; top: 6px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--lv-silver); border: 1.5px solid var(--surface); }
.tab[data-tab="charts"] .tab-lock { background: var(--lv-login); }
.tab[data-tab="sarathi"] .tab-lock { background: var(--lv-gold); }

/* ---------- Basic and Advanced ---------- */
.modehint { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface-2); border: 1px dashed var(--line); color: var(--ink-2); font: inherit; text-align: left; }
.modehint b { display: block; font-size: 13px; color: var(--ink); }
.modehint small { display: block; font-size: 12px; margin-top: 1px; line-height: 1.4; }
.modehint-go { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.modehint .ic { color: var(--accent-ink); }
.modeseg { margin: 0; }

/* ---------- the day's times, featured ---------- */
.dbar-fold.is-featured { background: var(--feat-bg); border: 1.5px solid var(--feat-line); }
.dbar-fold.is-featured summary { padding: 16px 18px; color: var(--feat-ink); }
.dbar-fold.is-featured summary::after { content: none; }
.dbar-ic { width: 24px; height: 24px; color: var(--feat-ink); stroke-width: 1.9; }
.dbar-title b { display: block; font-size: 17px; font-weight: 800; }
.dbar-title small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-top: 1px; }
.dbar-chev { color: var(--feat-ink); transition: transform .15s; }
.dbar-fold[open] .dbar-chev { transform: rotate(180deg); }
.dbar-fold.is-featured > :not(summary) { padding: 0 14px 16px; }

/* ---------- Coming up: yours and everyone's ---------- */
.upsec { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.upsec-personal { color: var(--k-personal); }
.upsec-festival { color: var(--k-festival); }
.kbadge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid; flex: none; }
.kbadge-personal { color: var(--k-personal); background: var(--k-personal-bg); border-color: var(--k-personal-line); }
.kbadge-festival { color: var(--k-festival); background: var(--k-festival-bg); border-color: var(--k-festival-line); }
.evdate.is-personal { background: var(--k-personal-bg); color: var(--k-personal); border: 1px solid var(--k-personal-line); }
.evdate.is-festival { background: var(--k-festival-bg); color: var(--k-festival); border: 1px solid var(--k-festival-line); }
.evdate.is-festival.is-major { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.evrow-personal { border-left: 3px solid var(--k-personal); }
.evrow-festival { border-left: 3px solid var(--k-festival); }
.evrow.is-other { border-left-color: transparent; }

/* ---------- the day grades ---------- */
.gbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px 4px 8px; border: 1px solid; }
.gbadge.g-uttama { color: var(--g-uttama); background: var(--g-uttama-bg); border-color: var(--g-uttama-ring); }
.gbadge.g-shubha { color: var(--g-shubha); background: var(--g-shubha-bg); border-color: var(--g-shubha-line); }
.gbadge.g-sama { color: var(--g-sama); background: var(--g-sama-bg); border-color: var(--g-sama-line); }
.gbadge.g-careful { color: var(--g-careful); background: var(--g-careful-bg); border-color: var(--g-careful-line); }
.sr-grade { display: flex; align-items: center; gap: 8px; }
.sr-grade-ic { width: 26px; height: 26px; stroke-width: 2; flex: none; }
.sr-grade.g-uttama { color: var(--g-uttama); } .sr-grade.g-shubha { color: var(--g-shubha); }
.sr-grade.g-sama { color: var(--g-sama); } .sr-grade.g-careful { color: var(--g-careful); }
.g-uttama.sr-dot, .sr-sw.g-uttama { background: var(--g-uttama-bg); color: var(--g-uttama); box-shadow: 0 0 0 2px var(--g-uttama-ring); }
.g-shubha.sr-dot, .sr-sw.g-shubha { background: var(--g-shubha-bg); color: var(--g-shubha); }
.g-sama.sr-dot, .sr-sw.g-sama { background: var(--g-sama-bg); color: var(--g-sama); }
.g-careful.sr-dot, .sr-sw.g-careful { background: var(--g-careful-bg); color: var(--g-careful); }
.sr-sw { display: inline-grid; place-items: center; }

/* ---------- the dasha explorer ---------- */
.dasha-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin: 10px 0 6px; }
.dasha-crumbs .ic { color: var(--alm-mute); }
.dasha-crumb { display: inline-flex; align-items: baseline; gap: 5px; background: none; border: 0; padding: 4px 6px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--alm-ink-2); font-size: 13px; }
.dasha-crumb b { font-weight: 700; }
.dasha-crumb small { font-size: 10.5px; color: var(--alm-mute); text-transform: uppercase; letter-spacing: .04em; }
.dasha-crumb.is-here { background: var(--alm-paper-2); color: var(--alm-ink); }
.dasha-crumb:hover { background: var(--alm-paper-2); }
.dasha-where { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 4px 2px 6px; border-bottom: 1px solid var(--alm-edge); }
.dasha-level { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--alm-red); }
.dasha-span { font-size: 12.5px; color: var(--alm-ink-3); font-variant-numeric: tabular-nums; }
.dasha-list { display: flex; flex-direction: column; }
.dasha-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 4px; background: none; border: 0; border-top: 1px dashed var(--alm-edge);
  cursor: pointer; font: inherit; color: inherit; text-align: left; border-radius: 6px; }
.dasha-row:first-child { border-top: 0; }
.dasha-row:hover { background: var(--alm-paper-2); }
.dasha-row.is-past { opacity: .6; }
.dasha-row.is-now { background: var(--alm-paper-2); opacity: 1; }
.dasha-row.is-now .dasha-lord b { color: var(--alm-red); }
.dasha-row .ic { color: var(--alm-mute); }
.dasha-row.is-locked .dasha-lock { color: var(--lv-silver); }
.dasha-lord { width: 84px; flex: none; display: flex; flex-direction: column; }
.dasha-lord b { font-size: 15px; }
.dasha-lord small { font-size: 10.5px; color: var(--alm-mute); }
.dasha-row .dasha-d { display: flex; flex-direction: column; white-space: normal; }
.dasha-row .dasha-d small { font-size: 11.5px; color: var(--alm-mute); }
.dasha-nowtag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--alm-on-red); background: var(--alm-red); border-radius: 999px; padding: 2px 7px; }
.dasha-fine { display: block; margin-top: 3px; }

/* ---------- birth details under the name ---------- */
.bdet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--alm-paper); border: 1px solid var(--alm-edge); color: var(--alm-ink); font: inherit; }
.bdet-cell { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.bdet-cell .ic { color: var(--alm-gold); margin-top: 3px; }
.bdet-cell small { display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--alm-mute); }
.bdet-cell b { display: block; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.bdet-cell.is-warn b { color: var(--alm-ink-3); font-weight: 600; }
.bdet-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--alm-mute); }
@media (max-width: 360px) { .bdet { grid-template-columns: 1fr 1fr; } .bdet-cell:last-of-type { grid-column: 1 / -1; } }

/* ---------- words explained ---------- */
.term { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--ink-3); text-underline-offset: 3px; text-align: left; }
.term:hover { text-decoration-color: var(--accent); }
.term-i { color: var(--ink-3); flex: none; }
.term-about p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.gl-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; font: inherit; color: inherit; text-align: left; }
.gl-row:last-child { border-bottom: 0; }
.gl-row:hover { background: var(--hover); }
.gl-row b { display: block; font-size: 15px; }
.gl-row small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.gl-row .ic { color: var(--ink-3); }

/* ---------- the time zone, said plainly ---------- */
.tzline { padding: 0 2px 6px; }
.tznote { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--caution-bg); border: 1px solid var(--caution-line); color: var(--caution-ink); font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; }

/* ---------- the quick settings cards ---------- */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qcard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 92px; padding: 12px 12px 10px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .12s var(--ease), background .15s; cursor: pointer; font: inherit; color: inherit; text-align: left; min-width: 0; }
.qcard:hover { background: var(--hover); }
.qcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qcard:active { transform: scale(.97); }
.qcard-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.qcard-ic .ic { width: 18px; height: 18px; stroke-width: 1.9; }
.qcard-k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-top: auto; }
.qcard-v { font-size: 13.5px; font-weight: 700; line-height: 1.25; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qcard-place .qcard-ic { background: var(--k-personal-bg); color: var(--k-personal); }
.qcard-theme .qcard-ic { background: var(--surface-2); color: var(--ink-2); }
.qcard-mode .qcard-ic { background: var(--lv-silver-bg); color: var(--lv-silver); }
.qcard-tradition .qcard-ic { background: var(--k-festival-bg); color: var(--k-festival); }
@media (max-width: 340px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Where a gated row already fills its width, the badge takes the place of
   the value and the chevron, centred, rather than sitting on top of them. */
.gate > .is-gated:is(.setrow, .mf-entry, .charts-all) .setrow-v,
.gate > .is-gated:is(.setrow, .mf-entry, .charts-all) > .ic-w:last-child,
.gate > .is-gated:is(.setrow, .mf-entry, .charts-all) > .ic:last-child { visibility: hidden; }
.gate > .is-gated:is(.setrow, .mf-entry, .charts-all, .pline) ~ .gate-badge { top: 50%; transform: translateY(-50%); }
.gate > .pinvite ~ .gate-badge { top: auto; bottom: 12px; left: 14px; right: auto; }
.gate-inline > .is-gated { padding-right: 24px; }

/* ======================================================================
 * v35: the Dixith Labs design standard (25 September 2026)
 * ======================================================================
 * Most of the change is in the tokens at the top and the base components
 * (header, cards, buttons, chips, fields, tab bar, sheets, toasts). What
 * follows is what the standard adds: the accent picker, the display face
 * on headings, the wide-screen sidebar, and a few Anudina pieces brought
 * into line.
 */

/* ---------- buttons that are not the main action ---------- */
.btn-danger { background: var(--late); color: #fff; box-shadow: none; }
:root[data-theme="dark"] .btn-danger { color: var(--on-accent); }
.btn-today { box-shadow: none; }
.btn-today.is-away { box-shadow: 0 2px 10px color-mix(in srgb, var(--alm-red) 26%, transparent); }
.btn-link { box-shadow: none; }

/* ---------- headings in the display face ----------
   Fraunces for Latin, Noto Serif for the Indic scripts, through the one
   'Anudina Serif' family. Everything else stays in the reading face. */
.more-greet, .charts-welcome h2, .gate-hero-t, .sr-hero-name, .sr-h, .chart-name {
  font-family: var(--display);
}
.charts-welcome h2 { font-size: 22px; line-height: 1.2; }
.charts-welcome-ic, .mf-entry-ic { border-radius: 11px; }
.charts-welcome-ic { background: var(--accent-soft); color: var(--accent); }

/* ---------- the first-open welcome, as a settings card ---------- */
.welcome {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge);
}
:root[data-theme="dark"] .welcome { box-shadow: var(--shadow-1); }
.welcome-t { font-family: var(--display); font-size: 22px; line-height: 1.2; color: var(--ink); margin-bottom: 6px; }
:root:not([data-script="latin"]) .welcome-t { line-height: 1.45; }
.welcome-s { color: var(--ink-2); font-size: 15px; }
.welcome-row { border-top: 1px solid var(--line); color: var(--ink); min-height: 48px; }
.welcome-row .welcome-k { color: var(--ink-2); font-size: 14px; }
.welcome-actions .btn { width: auto; }

/* ---------- the foot of More: the brand mark and the name ---------- */
.app-version .app-mark { color: #fff; }
.app-version .app-mark svg.brandmark { width: 40px; height: 40px; border-radius: 13px; padding: 7px; }
.app-version .app-name { font-family: var(--display); font-size: 21px; color: var(--ink); }
.app-version .app-by { color: var(--ink-2); }

/* ---------- Theme: light or dark, and the accent ---------- */
.tseg { display: flex; background: var(--bg-2); border-radius: 12px; padding: 3px; gap: 2px; }
.tseg button {
  flex: 1 1 0; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.tseg button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.sheet-lab.eyebrow { margin-top: 6px; }

.accents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.accent-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; min-width: 0;
  border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2); text-align: left;
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
  transition: box-shadow .15s, background .15s, transform .12s var(--ease);
}
.accent-card:active { transform: scale(.97); }
.accent-card.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.accent-card b { font-size: 15px; margin-top: 6px; }
.accent-card small { font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.ac-swatch { display: flex; width: 100%; height: 38px; border-radius: 10px; overflow: hidden; }
.ac-swatch i { flex: 1; }
.ac-swatch i:first-child { background: linear-gradient(145deg, color-mix(in srgb, var(--a1) 70%, #fff), var(--a1)); }
.ac-swatch i:last-child { background: #15181D; position: relative; }
.ac-swatch i:last-child::after { content: ''; position: absolute; inset: 9px 10px; border-radius: 6px; background: var(--a2); }
@media (max-width: 360px) { .accent-card small { display: none; } }

/* ---------- the sidebar brand is for wide screens only ---------- */
.side-brand { display: none; }

/* ---------- wide screens: a glass sidebar in place of the tab bar ----------
   From 900px the six places move to a sidebar with the brand at its head,
   and the column of content centres in the space that is left. */
@media (min-width: 900px) {
  :root { --gut: 20px; }
  .app { max-width: none; padding-left: var(--side); }
  .app > .topbar, .app > .view { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
  .topbar .brand { display: none; }
  .tabbar {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--side); z-index: 25;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: max(18px, env(safe-area-inset-top)) 14px 18px;
    border-top: 0; border-right: 1px solid var(--line);
  }
  html:not([data-theme="dark"]) .tabbar { border-right-color: var(--glass-rim); box-shadow: 1px 0 0 rgba(20, 22, 30, .05); }
  .side-brand { display: inline-flex; padding: 4px 8px 18px; }
  .side-brand .brandtext i { display: block; font-size: 12px; margin-top: 3px; }
  .tab {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 12px;
    font-size: 15px; font-weight: 600; border-radius: 12px; position: relative;
  }
  .tab .ic { width: 21px; height: 21px; }
  .tab:hover { background: var(--hover); color: var(--ink); }
  .tab.is-on { background: var(--accent-soft); color: var(--accent-ink); }
  .tab span { overflow: visible; }
  .tab-lock { top: 50%; right: 14px; margin-top: -4px; }
  .toast { bottom: 28px; left: calc(50% + var(--side) / 2); }
  .nowcard.is-sticky, .awaybar { top: calc(var(--topbar-h, 64px) + 6px); }
}