/* Shared component styles */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* A last-resort guard: wide content must scroll in its own container. clip, not hidden: hidden
     makes body a scroll container that never scrolls, and every position: sticky inside it — the
     top bars, the japa counter — then sticks to that instead of the screen and scrolls away.
     hidden stays first only for engines without clip (iOS 15), where sticky stays as it was. */
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100%;
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-on-surface);
}

h1, h2, h3 { font-family: var(--font-heading); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Brand logo tile (AppLogo). The glyph sits on the saffron tile; an image logo replaces the
   tile outright, so it drops the tile's fill and glow - img + two classes outranks every
   ".parent .sc-om" restyle in app.css and mobile.css. */
.sc-om {
  display: grid;
  place-items: center;
  border-radius: var(--radius-badge);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  line-height: 1;
}
img.sc-om.sc-om-img { background: none; box-shadow: none; object-fit: contain; }

/* An image logo inside a tile that sizes its glyph by font-size: the loader ring, the
   dashboard greetings, the pre-boot loader in index.html. */
.sc-logo-img { display: block; width: 1em; height: 1em; object-fit: contain; }

.sc-center { padding: 2rem; text-align: center; color: var(--color-secondary); }

/* ---------- App shell (authed) ---------- */
.sc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-outline);
}
.sc-brand { display: flex; align-items: center; gap: 0.6rem; }
.sc-brand-text { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-on-surface); }
.sc-header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* ---------- Auth shell ---------- */
.sc-auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--welcome-gradient);
}
.sc-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-card);
  padding: 2rem;
}
.sc-auth-brand { text-align: center; margin-bottom: 1.25rem; }
.sc-auth-brand .sc-om { margin: 0 auto; }
.sc-auth-title { margin: 0.75rem 0 0.25rem; font-size: 1.5rem; color: var(--color-on-surface); }
.sc-auth-tag { margin: 0; color: var(--color-secondary); font-size: 0.9rem; }

/* ---------- Forms ---------- */
.sc-form-title { margin: 0 0 1rem; font-size: 1.2rem; color: var(--color-on-surface); }
.sc-form { display: flex; flex-direction: column; gap: 0.9rem; }
.sc-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sc-field label { font-size: 0.85rem; color: var(--color-secondary); font-weight: 600; }
.sc-optional { font-weight: 400; opacity: 0.7; }
.sc-input {
  height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-on-surface);
  font-size: 1rem;
}
.sc-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-container); }
.validation-message { color: var(--color-error); font-size: 0.8rem; }

.sc-btn-primary {
  height: var(--btn-height);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.25rem;
}
.sc-btn-primary:hover { filter: brightness(1.05); }
.sc-btn-primary:disabled { opacity: 0.6; cursor: default; }

.sc-btn-ghost {
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-on-surface);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.sc-btn-ghost:hover { background: var(--color-primary-container); }
.sc-theme-toggle { line-height: 1; }

.sc-form-alt { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--color-secondary); }

/* ---------- Alerts ---------- */
.sc-alert { padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.9rem; }
.sc-alert-error { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); border: 1px solid var(--color-error); }
.sc-alert-success { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); border: 1px solid var(--color-success); }
/* Louder than info, quieter than error: for a setting that is legitimate but has a
   consequence somebody should read before leaving the page. */
.sc-alert-warn { background: color-mix(in srgb, #E0653B 14%, transparent); color: #B4531B; border: 1px solid color-mix(in srgb, #E0653B 45%, transparent); }

/* ---------- Cards / Dashboard ---------- */
.sc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-card);
  padding: 1.5rem;
}
.sc-dash-title { margin: 0 0 1rem; color: var(--color-on-surface); }
.sc-dash-hero { text-align: center; }
.sc-om-hero {
  width: 96px; height: 96px; margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: var(--radius-badge);
  background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-size: 3rem; line-height: 1;
}
.sc-dash-greeting { margin: 0 0 1.25rem; font-size: 1.25rem; color: var(--color-on-surface); }
.sc-dash-meta { display: flex; gap: 2rem; justify-content: center; margin: 0; }
.sc-dash-meta dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.sc-dash-meta dd { margin: 0.15rem 0 0; font-weight: 600; color: var(--color-on-surface); }

/* ---------- App shell: top bar + sidebar + content ---------- */
/* --topbar-h lives here, not on .sc-topbar: the drawer is a SIBLING of the bar, so a variable
   scoped to the bar would be invisible to it. min-height on the bar enforces the value rather
   than trusting it — the previous hardcoded 52px was 17px short of the real bar. */
.sc-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; --topbar-h: 56px; }
.sc-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 1rem; gap: 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-outline);
  position: sticky; top: 0; z-index: 20;
  min-height: var(--topbar-h);
  padding-top: max(0.55rem, env(safe-area-inset-top));
}
.sc-topbar-left, .sc-topbar-right { display: flex; align-items: center; gap: 0.6rem; }
.sc-brand-text { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-on-surface); }
.sc-hamburger {
  display: none; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin-left: -0.5rem;
  background: none; border: none; font-size: 1.35rem; cursor: pointer; color: var(--color-on-surface);
}
.sc-user { font-size: 0.85rem; color: var(--color-secondary); }

/* ---- Top-bar live clock ---- */
.sc-clock { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.28rem 0.7rem; border: 1px solid var(--color-outline); border-radius: 999px; background: var(--color-surface); line-height: 1.1; }
.sc-clock-cal { display: flex; flex-direction: column; align-items: flex-end; }
.sc-clock-day { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); }
.sc-clock-date { font-size: 0.72rem; color: var(--color-secondary); }
.sc-clock-time { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-on-surface); min-width: 4.7rem; text-align: right; }
@media (max-width: 640px) {
    .sc-clock-cal { display: none; }
    .sc-clock { padding: 0.28rem 0.6rem; }
}

.sc-body { flex: 1; display: flex; align-items: stretch; }
.sc-sidebar {
  width: clamp(13rem, 20vw, 15.625rem); flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-outline);
  padding: 0.75rem;
}
.sc-content { flex: 1; min-width: 0; width: 100%; padding: clamp(0.75rem, 3vw, 2rem); }
/* Cap the reading measure so a 2560px monitor does not stretch tables to unreadable widths. */
.sc-content > * { max-width: 1440px; margin-inline: auto; }

/* Sidebar nav tree */
.sc-sidebar-nav .sc-nav-list, .sc-nav-children { list-style: none; margin: 0; padding: 0; }
.sc-nav-children { margin-left: 0.85rem; border-left: 1px solid var(--color-outline); padding-left: 0.35rem; }
.sc-nav-item { margin: 2px 0; }
.sc-nav-link, .sc-nav-parent {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.6rem; border-radius: var(--radius-md);
  color: var(--color-on-surface); cursor: pointer; font-size: 0.92rem;
}
.sc-nav-link:hover, .sc-nav-parent:hover { background: var(--color-primary-container); text-decoration: none; }
.sc-nav-link.active { background: var(--color-primary); color: var(--color-on-primary); }
.sc-nav-icon { width: 1.2rem; text-align: center; }
.sc-nav-label { flex: 1; }
.sc-nav-caret { font-size: 0.7rem; color: var(--color-secondary); }
.sc-nav-loading, .sc-nav-empty { color: var(--color-secondary); font-size: 0.85rem; padding: 0.5rem; }

/* Page header + actions */
.sc-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sc-page-head h1 { margin: 0; font-size: 1.4rem; color: var(--color-on-surface); }
.sc-page-actions { display: flex; align-items: center; gap: 0.6rem; }
.sc-viewtoggle { display: inline-flex; border: 1px solid var(--color-outline); border-radius: var(--radius-md); overflow: hidden; }
.sc-viewtoggle button { border: none; background: transparent; padding: 0.4rem 0.8rem; cursor: pointer; color: var(--color-on-surface); font-size: 0.85rem; }
.sc-viewtoggle button.active { background: var(--color-primary); color: var(--color-on-primary); }
.sc-btn-sm { height: auto; padding: 0.4rem 0.7rem; font-size: 0.85rem; }

/* Table */
.sc-tablewrap { overflow-x: auto; overflow-y: hidden; padding: 0.5rem; -webkit-overflow-scrolling: touch; }
/* Hints that there is more table to the right, instead of leaving the cut-off silent. */
@media (max-width: 640px) {
  .sc-tablewrap { padding-inline: 0; scroll-snap-type: x proximity; }
  .sc-table { font-size: 0.85rem; }
}
.sc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sc-table th, .sc-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--color-outline); }
/* Headers are short labels, so keeping them on one line costs nothing and stops the head wrapping
   into two rows. Body cells must be free to wrap — nowrap on free text was the main reason these
   tables were wider than the screen. */
.sc-table th { white-space: nowrap; }
.sc-table td { overflow-wrap: anywhere; }
/* Columns that are meaningless when broken across lines. */
.sc-table td.sc-nowrap, .sc-table td:has(> .sc-switch) { white-space: nowrap; }
.sc-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); }
.sc-muted { color: var(--color-secondary); }

/* Toggle switch */
.sc-switch { position: relative; display: inline-block; width: 38px; height: 20px; vertical-align: middle; }
.sc-switch input { opacity: 0; width: 0; height: 0; }
.sc-slider { position: absolute; inset: 0; background: var(--color-outline); border-radius: 999px; transition: 0.2s; cursor: pointer; }
.sc-slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.sc-switch input:checked + .sc-slider { background: var(--color-accent); }
.sc-switch input:checked + .sc-slider::before { transform: translateX(18px); }
.sc-status { font-size: 0.78rem; margin-left: 0.4rem; }
.sc-status.on { color: var(--color-success); }
.sc-status.off { color: var(--color-secondary); }

/* Management tree */
.sc-mtree, .sc-mtree-children { list-style: none; margin: 0; padding: 0; }
.sc-mtree-children { margin-left: 1.2rem; border-left: 1px solid var(--color-outline); padding-left: 0.5rem; }
.sc-mtree-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.3rem; border-bottom: 1px solid var(--color-outline); }
.sc-mtree-name { font-weight: 600; }
.sc-mtree-route { color: var(--color-secondary); font-size: 0.8rem; }

/* ---- Modules tree: collapsible nodes ---- */
.sc-mtree-toolbar { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.3rem 0.6rem; border-bottom: 1px solid var(--color-outline); margin-bottom: 0.2rem; }
.sc-mtree-caret { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: none; border-radius: 6px; background: none; cursor: pointer; color: var(--color-primary); font-size: 0.75rem; line-height: 1; transition: background .14s ease; }
.sc-mtree-caret:hover { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.sc-mtree-caret-spacer { width: 22px; flex-shrink: 0; }
.sc-mtree-row.is-parent { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.sc-mtree-name.is-parent { cursor: pointer; }
.sc-mtree-name.is-parent:hover { color: var(--color-primary); }
.sc-mtree-count { font-size: 0.68rem; font-weight: 700; min-width: 18px; text-align: center; padding: 0.05rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.sc-flex-spacer { flex: 1; }

/* Form helpers */
.sc-form-card { max-width: 100%; }
.sc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0.9rem 1.1rem; align-items: start; }
.sc-form-grid .sc-span-2 { grid-column: 1 / -1; }
.sc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.sc-empty { text-align: center; padding: 1.5rem; color: var(--color-secondary); }
.sc-switches { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.25rem 0; }
.sc-switchrow { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.sc-hint { color: var(--color-secondary); font-size: 0.78rem; }

/* Catches the tap-outside gesture, which is the first thing reached for on touch. */
.sc-scrim {
  display: none; position: fixed; inset: var(--topbar-h) 0 0 0;
  background: rgba(30, 20, 11, 0.45); z-index: 14;
  animation: sc-scrim-in 0.15s ease;
}
@keyframes sc-scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* Relocated top-bar controls. Hidden by default; the mobile block below reveals them. */
.sc-drawer-tools {
  display: none; flex-direction: column; gap: 0.6rem;
  margin-top: 1rem; padding-top: 0.85rem;
  border-top: 1px solid var(--color-outline);
}
.sc-drawer-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

@media (max-width: 820px) {
  .sc-hamburger { display: inline-flex; }

  /* overflow-y is load-bearing: a fixed element with visible overflow cannot be scrolled and does
     not extend the page's scroll region, so without it the bottom of the menu was unreachable. */
  .sc-sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 15;
    width: min(19rem, 82vw);
    /* visibility carries the closed state as well as the transform. A drawer that is only
       translated off-screen is still in the tab order and still read by screen readers, and it
       leaves the closed state depending entirely on a compositor-level property. visibility is
       neither — it removes the panel from hit-testing and from assistive tech outright. It is
       delayed on the way out so the slide is still visible. */
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.2s, visibility 0s linear 0.2s;
    box-shadow: var(--elevation-card);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .sc-sidebar.open {
    transform: translateX(0); visibility: visible;
    transition: transform 0.2s, visibility 0s;
  }

  .sc-scrim { display: block; }

  /* The bar cannot hold these on a phone, so they live in the drawer instead. */
  .sc-topbar-right { display: none; }
  .sc-drawer-tools { display: flex; }

  .sc-brand-text { display: none; }
  .sc-grid2 { grid-template-columns: 1fr; }
}

/* Above the breakpoint the rail is always visible, whatever the toggle flag says — that is what
   lets the flag default to closed without hiding the desktop nav. */
@media (min-width: 821px) {
  .sc-sidebar, .sc-sidebar.closed { transform: none; visibility: visible; }
}


/* ---------- Om loader (breathing ॐ + rotating aura) ---------- */
.om-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; }
.om-loader.is-full { width: 100%; min-height: 240px; }
.om-loader.is-inline { flex-direction: row; gap: 0.45rem; }

.om-loader-ring { position: relative; display: grid; place-items: center; border-radius: 50%; }
/* rotating gradient aura (donut via radial mask) */
.om-loader-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--color-gold) 90deg, var(--color-accent) 210deg, transparent 340deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: om-spin 1.5s linear infinite;
}
/* soft breathing glow behind the glyph */
.om-loader-ring::after {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 70%);
  animation: om-glow 2.4s ease-in-out infinite;
}
.om-loader-glyph {
  position: relative; z-index: 1;
  color: var(--color-primary);
  font-family: var(--font-heading); line-height: 1;
  animation: om-breathe 2.4s ease-in-out infinite;
}
.om-loader-msg { color: var(--color-secondary); font-size: 0.9rem; letter-spacing: 0.02em; }

/* Inline variant (inside buttons): follow the button's text colour, thinner aura */
.om-loader.is-inline .om-loader-ring::before {
  background: conic-gradient(from 0deg, transparent 0deg, currentColor 140deg, transparent 300deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.om-loader.is-inline .om-loader-ring::after { display: none; }
.om-loader.is-inline .om-loader-glyph { color: currentColor; animation: om-breathe 1.6s ease-in-out infinite; }
.om-loader.is-inline .om-loader-msg { color: currentColor; font-size: inherit; letter-spacing: 0; }

@keyframes om-spin { to { transform: rotate(360deg); } }
@keyframes om-breathe { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes om-glow { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 0.65; transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .om-loader-ring::before { animation-duration: 3.5s; }
  .om-loader-ring::after { animation: none; opacity: 0.4; }
  .om-loader-glyph { animation: none; opacity: 0.85; }
}

/* ============================================================
   DEVOTIONAL REVAMP — advanced glass / gradient / motif styling
   ============================================================ */

body {
  background: var(--pattern-mandala), var(--gradient-hero);
  background-attachment: fixed;
}

/* Om brand badge → gradient + glow */
.sc-om { background: var(--gradient-saffron); box-shadow: var(--shadow-glow); }

/* ---- Top bar → frosted glass ---- */
.sc-topbar {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}
.sc-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent); opacity: 0.5;
}
.sc-brand-text {
  background: var(--gradient-saffron);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}

/* ---- Sidebar ---- */
.sc-sidebar {
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  backdrop-filter: blur(8px);
  border-right: 1px solid var(--glass-border);
}
.sc-nav-link, .sc-nav-parent { transition: transform .16s ease, background .16s ease; font-weight: 500; }
.sc-nav-link:hover, .sc-nav-parent:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); transform: translateX(2px); }
.sc-nav-link.active { background: var(--gradient-saffron); color: #fff; box-shadow: var(--shadow-glow); }

/* ---- Cards → soft glass, refined radius ---- */
.sc-card {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
}

/* ---- Buttons → gradient + lift ---- */
.sc-btn-primary {
  background: var(--gradient-gold);
  box-shadow: var(--shadow-glow);
  border-radius: 12px;
  letter-spacing: 0.2px;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.sc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -10px rgba(212,114,34,0.6); filter: brightness(1.03); }
.sc-btn-primary:active { transform: translateY(0); }
.sc-btn-ghost { border-radius: 12px; transition: border-color .14s ease, background .14s ease; }
.sc-btn-ghost:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }

/* ---- Inputs → focus ring ---- */
.sc-input { border-radius: 12px; transition: border-color .14s ease, box-shadow .14s ease; }
.sc-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--ring); }

/* ---- View toggle ---- */
.sc-viewtoggle { background: color-mix(in srgb, var(--color-surface) 80%, transparent); box-shadow: var(--shadow-sm); }
.sc-viewtoggle button.active { background: var(--gradient-saffron); }

/* ---- Page title block ---- */
.sc-page-title { display: flex; align-items: center; gap: 0.8rem; }
.sc-page-emoji { font-size: 1.9rem; filter: drop-shadow(0 2px 6px rgba(212,114,34,0.4)); }
.sc-page-title h1 { margin: 0; }
.sc-page-sub { margin: 0.12rem 0 0; color: var(--color-secondary); font-size: 0.85rem; }

/* ---- Auth hero ---- */
.sc-auth-shell { background: var(--pattern-mandala), var(--gradient-hero); background-attachment: fixed; }
.sc-auth-card {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  max-width: 440px;
}
.sc-auth-title { background: var(--gradient-saffron); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }

/* ---- Dashboard hero ---- */
.sc-hero {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.6rem 1.8rem; border-radius: 22px;
  background: var(--gradient-saffron); color: #fff;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden; margin-bottom: 1.6rem;
}
/* --sc-hero-mark is the brand glyph, set inline by Dashboard.razor. */
.sc-hero::after { content: var(--sc-hero-mark, ""); position: absolute; right: 4px; bottom: -34px; font-size: 11rem; font-family: var(--font-heading); color: rgba(255,255,255,0.09); line-height: 1; }
.sc-hero-om { width: 82px; height: 82px; flex-shrink: 0; display: grid; place-items: center; border-radius: 22px; background: rgba(255,255,255,0.16); font-family: var(--font-heading); font-size: 2.6rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.sc-hero-text { position: relative; z-index: 1; }
.sc-hero-kicker { margin: 0; opacity: 0.85; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; }
.sc-hero-title { margin: 0.2rem 0 0.7rem; font-size: 1.5rem; }
.sc-hero-meta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sc-pill { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25); padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.82rem; }
.sc-pill-k { opacity: 0.85; margin-right: 0.35rem; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.08em; }

/* ---- Section head ---- */
.sc-section-head { display: flex; align-items: baseline; gap: 0.7rem; margin: 0.4rem 0 1rem; }
.sc-section-head h2 { margin: 0; font-size: 1.2rem; }
.sc-section-sub { color: var(--color-secondary); font-size: 0.85rem; }

/* ---- Admin dashboard stat tiles ---- */
.sc-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 1rem; margin-bottom: 1.8rem; }
.sc-stat-card { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.sc-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sc-stat-card.accent { background: var(--gradient-saffron); color: #fff; border-color: transparent; }
.sc-stat-card.accent .sc-stat-l, .sc-stat-card.accent .sc-stat-sub { color: rgba(255,255,255,0.85); }
.sc-stat-ic { font-size: 1.5rem; line-height: 1; }
.sc-stat-n { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--color-on-surface); }
.sc-stat-card.accent .sc-stat-n { color: #fff; }
.sc-stat-l { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.sc-stat-sub { font-size: 0.74rem; color: var(--color-secondary); }
.sc-updated { color: var(--color-secondary); font-size: 0.8rem; }

/* ---- Today's Bhakti ---- */
.sc-bhakti { padding: 1.1rem 1.25rem; margin-bottom: 1.6rem; }
.sc-bhakti-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem 1.4rem; align-items: stretch; }
.sc-bhakti-deity { display: flex; align-items: center; gap: 1rem; text-align: left; background: none; border: 1px solid transparent; border-radius: 16px; padding: 0.6rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.sc-bhakti-deity:hover { background: color-mix(in srgb, var(--color-primary) 7%, transparent); border-color: var(--glass-border); transform: translateY(-1px); }
.sc-bhakti-avatar { width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--gradient-saffron); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 55%, transparent), var(--shadow-md); }
.sc-bhakti-avatar.lg { width: 92px; height: 92px; }
.sc-bhakti-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-bhakti-fallback { font-size: 2.2rem; line-height: 1; color: #fff; }
.sc-bhakti-deity-meta { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.sc-bhakti-kicker { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-secondary); font-weight: 700; }
.sc-bhakti-name { font-family: var(--font-heading); font-size: 1.35rem; color: var(--color-on-surface); line-height: 1.1; }
.sc-bhakti-reason { font-size: 0.85rem; color: var(--color-accent); font-weight: 600; }
.sc-bhakti-hint { font-size: 0.72rem; color: var(--color-secondary); margin-top: 0.15rem; }
.sc-bhakti-sadhana { display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; padding-left: 1.4rem; border-left: 1px solid var(--glass-border); }
.sc-bhakti-empty { margin: 0.2rem 0 0; color: var(--color-secondary); font-size: 0.85rem; }
.sc-bhakti-chant { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: color-mix(in srgb, var(--color-surface) 70%, transparent); border: 1px solid var(--glass-border); border-radius: 14px; padding: 0.6rem 0.8rem; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.sc-bhakti-chant:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.sc-bhakti-chant .ic { font-size: 1.25rem; line-height: 1; }
.sc-bhakti-chant .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sc-bhakti-chant .nm { font-weight: 600; color: var(--color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-bhakti-chant .cat { font-size: 0.75rem; color: var(--color-secondary); }
.sc-bhakti-chant .go { color: var(--color-accent); font-weight: 700; }
.sc-bhakti-more { align-self: flex-start; background: none; border: none; color: var(--color-accent); font-weight: 600; font-size: 0.82rem; cursor: pointer; padding: 0.2rem 0.1rem; }
.sc-bhakti-more:hover { text-decoration: underline; }

/* ---- Chant categories (dashboard) ---- */
.sc-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 0.9rem; margin-bottom: 1.6rem; }
.sc-cat-card { font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; padding: 1.15rem 0.9rem; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.sc-cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.sc-cat-ic { font-size: 1.8rem; line-height: 1; }
.sc-cat-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; color: var(--color-on-surface); }
.sc-cat-count { font-size: 0.74rem; color: var(--color-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-cat-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.3rem 1.3rem; max-height: 60vh; overflow-y: auto; }

/* ---- Prayers (dashboard, by time of day) ---- */
.sc-prayergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 0.9rem; margin-bottom: 1.6rem; }
.sc-prayer-card { font: inherit; color: inherit; text-align: left; display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.sc-prayer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sc-prayer-card.now { border-color: transparent; background: var(--gradient-saffron); color: #fff; box-shadow: var(--shadow-glow); }
.sc-prayer-ic { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.sc-prayer-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 0.1rem; }
.sc-prayer-name { font-weight: 700; color: var(--color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-prayer-card.now .sc-prayer-name { color: #fff; }
.sc-prayer-time { font-size: 0.74rem; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-prayer-card.now .sc-prayer-time { color: rgba(255,255,255,0.85); }
.sc-prayer-now { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(255,255,255,0.25); color: #fff; padding: 0.18rem 0.55rem; border-radius: 999px; flex-shrink: 0; }
.sc-prayer-go { color: var(--color-accent); font-weight: 700; flex-shrink: 0; }

/* ---- Header profile link ---- */
.sc-user-link { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; padding: 0.25rem 0.6rem; border-radius: 999px; transition: background .14s ease, color .14s ease; }
.sc-user-link:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-on-surface); }
.sc-user-ic { font-size: 0.95rem; }

/* ---- My Profile page ---- */
.sc-profile-hero { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.sc-profile-id { min-width: 0; }
.sc-profile-id h2 { margin: 0 0 0.2rem; }
.sc-profile-streak { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; flex-wrap: wrap; }

.sc-timeline { display: flex; flex-direction: column; gap: 0.9rem; }
.sc-day-card { padding: 1rem 1.2rem; }
.sc-day-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.7rem; }
.sc-day-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sc-day-entries { display: flex; flex-direction: column; gap: 0.4rem; }
.sc-day-entry { display: grid; grid-template-columns: 1.6fr 1fr auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; border-radius: 10px; background: color-mix(in srgb, var(--color-surface) 70%, transparent); border: 1px solid var(--glass-border); }
.sc-day-chant { font-weight: 600; color: var(--color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-day-sub { font-size: 0.8rem; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-day-val { font-size: 0.8rem; color: var(--color-accent); font-weight: 600; white-space: nowrap; text-align: right; }
@media (max-width: 560px) {
  .sc-day-entry { grid-template-columns: 1fr auto; }
  .sc-day-sub { display: none; }
}

/* ---- Feedback dashboard ---- */
.sc-bars { display: flex; flex-direction: column; gap: 0.6rem; }
.sc-bar-row { display: grid; grid-template-columns: 170px 1fr 40px; align-items: center; gap: 0.7rem; }
.sc-bar-label { font-size: 0.85rem; color: var(--color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-bar-track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--color-secondary) 18%, transparent); overflow: hidden; }
.sc-bar-fill { height: 100%; border-radius: 999px; background: var(--gradient-gold); min-width: 6px; }
.sc-bar-val { font-size: 0.82rem; font-weight: 700; color: var(--color-secondary); text-align: right; }
.sc-status-new { border-color: color-mix(in srgb, var(--color-primary) 45%, transparent) !important; }
.sc-status-reviewed { border-color: color-mix(in srgb, var(--color-gold) 60%, transparent) !important; }
.sc-status-resolved { border-color: color-mix(in srgb, var(--color-success) 55%, transparent) !important; }
@media (max-width: 560px) { .sc-bar-row { grid-template-columns: 110px 1fr 32px; } }

/* ---- Favorite (heart) toggle ---- */
.sc-tile-top-left { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.sc-fav { background: none; border: none; cursor: pointer; line-height: 1; padding: 0.1rem 0.2rem; font-size: 1.2rem; color: var(--color-secondary); opacity: 0.55; transition: transform .14s ease, color .14s ease, opacity .14s ease; }
.sc-fav:hover { transform: scale(1.15); opacity: 1; color: #E0396F; }
.sc-fav.on { color: #E0396F; opacity: 1; }
.sc-fav.lg { font-size: 1.6rem; }

/* ---- Top-bar region selector ---- */
.sc-regionpick { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--color-surface) 70%, transparent); transition: border-color .14s ease, background .14s ease; }
.sc-regionpick:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.sc-regionpick-ic { font-size: 0.9rem; line-height: 1; }
.sc-regionpick-select { border: none; background: none; color: var(--color-on-surface); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.15rem 0.1rem; cursor: pointer; max-width: 160px; }
.sc-regionpick-select:focus { outline: none; }
.sc-prefcard { padding: 1.1rem 1.3rem; margin-top: 1rem; }
@media (max-width: 720px) { .sc-regionpick-select { max-width: 108px; } }

/* ---- Profile: preference rows ----
   A label on the left and its control on the right, tall enough to be a touch target in its own
   right. The link variant is the same row with a chevron instead of a control, so a row that
   navigates and a row that toggles read as one list. */
.sc-preflist { display: flex; flex-direction: column; gap: 0.4rem; }
.sc-prefrow {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 48px;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-on-surface);
}
.sc-prefrow-label { font-size: 0.92rem; }
.sc-prefrow-link { text-decoration: none; }
.sc-prefrow-link:hover { background: var(--color-primary-container); text-decoration: none; }
.sc-prefrow-chev { color: var(--color-secondary); font-size: 1.15rem; line-height: 1; }
/* A row that performs an action rather than navigating. It is a <button> so that it is reachable
   by keyboard and announced as a control, which means the browser's own button chrome has to be
   stripped back to match the anchor rows beside it. */
button.sc-prefrow { width: 100%; border: none; font: inherit; text-align: left; cursor: pointer; }
button.sc-prefrow:disabled { opacity: 0.55; cursor: default; }
button.sc-prefrow:disabled:hover { background: var(--color-surface-2); }
.sc-aboutcard .sc-detail-grid { margin-bottom: 0; }
.sc-about-title { display: flex; align-items: center; gap: 0.5rem; }
.sc-about-title .sc-om { flex-shrink: 0; border-radius: 7px; }

/* ---- Profile: account closure ----
   Deliberately the last card and deliberately quiet until opened: the destructive control only
   appears once the seeker asks for it, and then it asks for the password rather than a checkbox. */
.sc-dangercard { border-color: color-mix(in srgb, var(--color-error) 30%, var(--color-outline)); }
.sc-danger-rule { border: none; border-top: 1px solid var(--color-outline); margin: 1rem 0 0.9rem; }
.sc-btn-danger {
  height: var(--btn-height);
  padding: 0 1.1rem;
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-error);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.sc-btn-danger:hover:not(:disabled) { background: var(--color-error); color: #fff; }
.sc-btn-danger:disabled { opacity: 0.55; cursor: default; }
.sc-danger-confirm { display: flex; flex-direction: column; gap: 0.8rem; }
.sc-danger-warning {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  color: var(--color-error);
  font-size: 0.88rem;
  line-height: 1.45;
}
/* The shared .sc-modal-actions rule sizes its buttons for a dialog footer, and .sc-btn-danger is
   not in that rule at all, so all three are pinned to one height here to stop the row stepping.
   Below 720px the shared rule flips the row to column-reverse; stretch is kept so the stacked
   buttons come out one full-width column rather than three ragged widths. */
.sc-danger-confirm .sc-modal-actions { justify-content: flex-end; align-items: stretch; }
.sc-danger-confirm .sc-modal-actions .sc-btn-ghost,
.sc-danger-confirm .sc-modal-actions .sc-btn-primary,
.sc-danger-confirm .sc-modal-actions .sc-btn-danger {
  /* flex-basis has to be reset, not just overridden by height: once the shared rule flips the row
     to a column the basis IS the height, and 8rem would make each button 128px tall. */
  flex: 0 0 auto;
  min-width: 104px;
  height: 44px;
  margin-top: 0;
}

/* ---- Notifications ---- */
.sc-notif-summary { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.sc-row-muted td { opacity: 0.55; }

/* grouped, collapsible config table */
.sc-notif-grouprow { cursor: pointer; }
.sc-notif-grouprow td { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.sc-notif-grouprow:hover td { background: color-mix(in srgb, var(--color-primary) 13%, transparent); }
.sc-notif-grouprow td > * { vertical-align: middle; margin-right: 0.5rem; }
.sc-notif-childcell { padding-left: 2rem !important; }
.sc-notif-global { padding: 1.1rem 1.3rem; margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.sc-notif-master { display: flex; align-items: center; gap: 0.9rem; }
.sc-notif-quiet { border-top: 1px solid var(--glass-border); padding-top: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.sc-notif-quiet-head { display: flex; align-items: center; gap: 0.9rem; }
.sc-notif-times { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; padding-left: 3.2rem; }
.sc-notif-times .sc-field { min-width: 120px; }

.sc-notif-list { display: flex; flex-direction: column; gap: 0.8rem; }
.sc-notif-item { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; transition: opacity .15s ease; }
.sc-notif-item.is-off { opacity: 0.62; }
.sc-notif-item-head { display: flex; align-items: flex-start; gap: 0.9rem; }
.sc-notif-ic { font-size: 1.5rem; line-height: 1.2; flex-shrink: 0; }
.sc-notif-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.sc-notif-flags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
@media (max-width: 560px) { .sc-notif-times { padding-left: 0; } }

/* ---- Favorites page god card ---- */
.sc-fav-god { display: flex; align-items: center; gap: 0.8rem; }
.sc-fav-god .sc-bhakti-avatar { width: 56px; height: 56px; }
.sc-fav-god .sc-tile-title { margin: 0; }
.sc-bhakti-dots { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.9rem; }
.sc-bhakti-dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: none; background: color-mix(in srgb, var(--color-secondary) 45%, transparent); cursor: pointer; transition: width .2s ease, background .2s ease; }
.sc-bhakti-dot.active { width: 22px; background: var(--gradient-gold); }

/* deity details modal body */
.sc-deity-detail { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.2rem 1.4rem 1.4rem; }
.sc-deity-detail-head { display: flex; align-items: center; gap: 1rem; }
.sc-deity-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.sc-chip { font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-on-surface); border: 1px solid var(--glass-border); }
.sc-deity-welcome { margin: 0; font-style: italic; color: var(--color-accent); font-size: 0.95rem; }
.sc-deity-desc { margin: 0; color: var(--color-on-surface); font-size: 0.9rem; line-height: 1.5; }
.sc-deity-days { margin: 0; font-size: 0.82rem; color: var(--color-secondary); }
.sc-deity-days .k { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; margin-right: 0.5rem; }
.sc-deity-sadhanas { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.2rem; }

@media (max-width: 820px) {
  .sc-bhakti-main { grid-template-columns: 1fr; }
  .sc-bhakti-sadhana { padding-left: 0; border-left: none; border-top: 1px solid var(--glass-border); padding-top: 0.8rem; }
}

/* ---- Deity darshan cards ---- */
.sc-darshan { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 1rem; }
.sc-darshan-card { margin: 0; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--color-surface) 88%, transparent); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); transition: transform .18s ease, box-shadow .18s ease; }
.sc-darshan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sc-darshan-img { aspect-ratio: 4 / 5; background-size: cover; background-position: center top; }
.sc-darshan-card figcaption { padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.sc-darshan-card figcaption strong { font-family: var(--font-heading); }
.sc-darshan-card figcaption span { font-size: 0.76rem; color: var(--color-secondary); }

/* ---- Card grid / tiles (regions) ---- */
.sc-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.sc-tile { position: relative; overflow: hidden; background: color-mix(in srgb, var(--color-surface) 90%, transparent); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--shadow-md); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; transition: transform .18s ease, box-shadow .18s ease; }
.sc-tile::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gradient-gold); }
.sc-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sc-tile.is-inactive { opacity: 0.6; }
.sc-tile-top { display: flex; align-items: center; justify-content: space-between; }
.sc-tile-badge { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--color-primary-container); font-size: 1.4rem; }
.sc-tile-title { margin: 0.2rem 0 0; font-size: 1.15rem; }
.sc-tile-desc { margin: 0; color: var(--color-secondary); font-size: 0.86rem; flex: 1; }
.sc-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; }

/* ---- Status badge ---- */
.sc-badge { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }
.sc-badge.on { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); }
.sc-badge.off { background: color-mix(in srgb, var(--color-secondary) 18%, transparent); color: var(--color-secondary); }

/* ---- Chip buttons ---- */
.sc-chip { border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 999px; transition: background .14s ease, color .14s ease; }
.sc-chip.chip-warn { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); }
.sc-chip.chip-warn:hover { background: var(--color-error); color: #fff; }
.sc-chip.chip-ok { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.sc-chip.chip-ok:hover { background: var(--color-success); color: #fff; }

/* ---- Empty state ---- */
.sc-empty-state { text-align: center; padding: 3rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sc-empty-om { font-size: 3rem; opacity: 0.5; }
.sc-empty-state h3 { margin: 0.2rem 0 0; }
.sc-empty-state p { margin: 0 0 0.6rem; color: var(--color-secondary); }

/* ---- Confirm dialog (SweetAlert-style, themed) ---- */
.sc-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(30,20,11,0.45); backdrop-filter: blur(3px);
  display: grid; justify-items: center; align-content: safe center;
  padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain;
  animation: sc-fade .18s ease;
}
.sc-modal { position: relative; width: 100%; max-width: 400px; background: var(--color-surface); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 2rem 1.6rem 1.4rem; text-align: center; overflow: hidden; max-height: calc(100dvh - 3rem); animation: sc-pop .22s cubic-bezier(.2,.9,.3,1.3); }
.sc-modal-halo { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%); pointer-events: none; }
.sc-modal-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 0.5rem; position: relative; }
.sc-modal-title { margin: 0 0 0.4rem; font-size: 1.25rem; }
.sc-modal-msg { margin: 0 0 1.3rem; color: var(--color-secondary); font-size: 0.92rem; }
.sc-modal-actions { display: flex; gap: 0.7rem; justify-content: center; }
.sc-modal-actions .sc-btn-ghost, .sc-modal-actions .sc-btn-primary { flex: 1 1 8rem; min-width: 0; height: 44px; }
.sc-modal.is-warning .sc-modal-confirm, .sc-modal.is-danger .sc-modal-confirm { background: linear-gradient(135deg, #E0653B, #B3261E); box-shadow: 0 8px 24px -8px rgba(179,38,30,0.5); }
.sc-modal.is-success .sc-modal-confirm { background: linear-gradient(135deg, #46A05A, #2E7D32); box-shadow: 0 8px 24px -8px rgba(46,125,50,0.5); }

/* ---- Toasts ---- */
.sc-toast-host { position: fixed; top: 4.2rem; right: 1.1rem; z-index: 1100; display: flex; flex-direction: column; gap: 0.6rem; max-width: 360px; }
.sc-toast { display: flex; align-items: flex-start; gap: 0.6rem; background: var(--color-surface); border: 1px solid var(--glass-border); border-left: 4px solid var(--color-primary); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 0.75rem 0.9rem; animation: sc-slidein .22s ease; }
.sc-toast.is-success { border-left-color: var(--color-success); }
.sc-toast.is-error { border-left-color: var(--color-error); }
.sc-toast.is-warning { border-left-color: var(--color-gold); }
.sc-toast.is-info { border-left-color: var(--color-primary); }
.sc-toast-icon { font-size: 1.2rem; line-height: 1.2; }
.sc-toast-body { flex: 1; }
.sc-toast-title { font-weight: 600; font-size: 0.9rem; }
.sc-toast-msg { font-size: 0.85rem; }
.sc-toast-close { background: none; border: none; cursor: pointer; color: var(--color-secondary); font-size: 1.1rem; line-height: 1; }

@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ImagePreview: one picture over the page, as large as the screen allows. */
.sc-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(30,20,11,0.78); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 1.5rem; animation: sc-fade .18s ease; cursor: zoom-out; }
.sc-lightbox-x { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.16); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.sc-lightbox-x:hover { background: rgba(255,255,255,0.3); }
.sc-lightbox-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; max-width: 100%; cursor: default; }
.sc-lightbox-fig img { display: block; max-width: min(92vw, 640px); max-height: 78dvh; border-radius: 20px; border: 1px solid rgba(255,255,255,0.18); background: var(--color-surface); box-shadow: var(--shadow-lg); animation: sc-pop .22s cubic-bezier(.2,.9,.3,1.3); }
.sc-lightbox-fig figcaption { color: #fff; font-family: var(--font-heading); font-size: 1.15rem; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.sc-lightbox-loading { width: min(92vw, 320px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 20px; background: rgba(255,255,255,0.08); color: #fff; }
@keyframes sc-pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sc-slidein { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 820px) {
  .sc-hero { flex-direction: column; text-align: center; }
  .sc-hero-om { margin: 0 auto; }
  .sc-hero-meta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-modal, .sc-modal-backdrop, .sc-toast, .sc-tile, .sc-darshan-card, .sc-btn-primary, .sc-nav-link, .sc-nav-parent { animation: none !important; transition: none !important; }
}

/* ---- Popup form modal (ScModal) ---- */
.sc-modal.sc-modal-form {
  max-width: 580px; text-align: left; padding: 0;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 3rem);
}
.sc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.4rem; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
.sc-modal-head h3 { margin: 0; font-size: 1.15rem; }
.sc-modal-x { background: none; border: none; font-size: 1.55rem; line-height: 1; cursor: pointer; color: var(--color-secondary); padding: 0 0.2rem; }
.sc-modal-x:hover { color: var(--color-on-surface); }
.sc-modal-content { padding: 1.3rem 1.4rem; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.sc-modal.sc-modal-form .sc-modal-actions { justify-content: flex-end; margin-top: 1.2rem; }

/* Bottom sheet on phones: a centred dialog wastes the edges and puts the actions mid-screen,
   away from the thumb. Full-width, bottom-anchored, square top corners. */
@media (max-width: 560px) {
  .sc-modal-backdrop { padding: 0; align-content: end; }
  .sc-modal {
    max-width: none; border-radius: 20px 20px 0 0;
    max-height: calc(100dvh - 2.5rem);
    padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
  }
  .sc-modal.sc-modal-form { max-height: calc(100dvh - 2.5rem); padding-bottom: 0; }
  .sc-modal-actions { flex-direction: column-reverse; }
  /* In a column, the 8rem flex-basis the desktop rule gives these buttons stops being a width and
     becomes their HEIGHT (flex-basis wins over height on the main axis), so every action grew to
     128px tall. Let the height rule size them, and make each one span the row. */
  .sc-modal-actions .sc-btn-ghost, .sc-modal-actions .sc-btn-primary, .sc-modal-actions .sc-btn-danger { flex: 0 0 auto; width: 100%; }
  .sc-modal.sc-modal-form .sc-modal-actions {
    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
  }
}

/* ---- Year filter ---- */
.sc-yearfilter { display: inline-flex; align-items: center; gap: 0.45rem; }
.sc-yearfilter label { font-size: 0.82rem; color: var(--color-secondary); font-weight: 600; }
.sc-input-sm { height: 38px; padding: 0 0.55rem; font-size: 0.9rem; width: auto; }

/* Festival date pill in list */
.sc-datecell { font-weight: 600; white-space: nowrap; }
.sc-datecell .sc-datem { color: var(--color-accent); }

/* Festival grid date box */
.sc-tile-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 52px; border-radius: 12px; background: var(--color-primary-container); line-height: 1; flex-shrink: 0; }
.sc-tile-day { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-primary); }
.sc-tile-mon { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-secondary); margin-top: 2px; }

/* ---- Pager ---- */
.sc-pager-wrap { margin-top: 1.2rem; }
.sc-pager { display: flex; align-items: center; justify-content: center; gap: 0.35rem; flex-wrap: wrap; }
.sc-pager-btn { border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--color-surface) 85%, transparent); color: var(--color-on-surface); border-radius: 10px; min-width: 38px; height: 38px; padding: 0 0.6rem; cursor: pointer; font-size: 0.88rem; transition: border-color .14s ease, background .14s ease; }
.sc-pager-btn:hover:not(:disabled) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.sc-pager-btn.active { background: var(--gradient-saffron); color: #fff; border-color: transparent; }
.sc-pager-btn:disabled { opacity: 0.45; cursor: default; }
.sc-pager-gap { padding: 0 0.25rem; color: var(--color-secondary); }
.sc-pager-info { text-align: center; color: var(--color-secondary); font-size: 0.82rem; margin-top: 0.7rem; }

/* ---- Filters row ---- */
.sc-filters { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }

/* ---- Multi-select ---- */
.sc-multiselect { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem; border: 1px solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-background); max-height: 170px; overflow-y: auto; }
.sc-multiopt { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.6rem; border: 1px solid var(--color-outline); border-radius: 999px; cursor: pointer; font-size: 0.85rem; user-select: none; transition: border-color .14s ease, background .14s ease; }
.sc-multiopt:hover { border-color: var(--color-primary); }
.sc-multiopt.checked { background: var(--color-primary-container); border-color: var(--color-primary); color: var(--color-on-primary-container); }
.sc-multiopt input { accent-color: var(--color-primary); }
.sc-multi-empty { color: var(--color-secondary); font-size: 0.85rem; }
.sc-multigroup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; margin: 0.4rem 0; }

/* ---- Radios ---- */
.sc-radios { display: flex; gap: 0.6rem; }
.sc-radio { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: 1px solid var(--color-outline); border-radius: var(--radius-md); cursor: pointer; font-size: 0.9rem; }
.sc-radio input { accent-color: var(--color-primary); }
.sc-radio:has(input:checked) { background: var(--color-primary-container); border-color: var(--color-primary); }

/* ---- Textarea ---- */
.sc-textarea { height: auto; min-height: 58px; padding: 0.5rem 0.75rem; resize: vertical; font-family: inherit; }

/* ---- Deity form layout ---- */
.sc-deityform { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.sc-deity-photo { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sc-deity-fields { flex: 1; min-width: 260px; }
.sc-upload { cursor: pointer; }
.sc-linkbtn { background: none; border: none; color: var(--color-accent); cursor: pointer; font-size: 0.8rem; }
.sc-hint-error { color: var(--color-error); font-size: 0.78rem; }

/* ---- Avatars ---- */
.sc-avatar-lg { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: var(--color-primary-container); border: 1px solid var(--glass-border); }
.sc-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

/* The deity's view page: the photo large beside the facts, stacking above them on a phone. The
   frame keeps the avatar's rounded square so the preview matches how the tiles crop it. */
.sc-deity-view { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.sc-deity-view-photo { display: flex; flex-direction: column; gap: 0.4rem; flex: 0 0 auto; width: min(100%, 260px); }
.sc-deity-view-fields { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.sc-deity-view-img { width: 100%; aspect-ratio: 1; border-radius: 20px; object-fit: cover; display: block; background: var(--color-primary-container); border: 1px solid var(--glass-border); }
.sc-deity-view-none { display: grid; place-items: center; align-content: center; gap: 0.35rem; color: var(--color-secondary); font-size: 2.6rem; }
.sc-deity-view-none small { font-size: 0.82rem; }
.sc-avatar-ph { font-size: 3rem; opacity: 0.6; }
.sc-avatar { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--color-primary-container); font-size: 1.3rem; flex-shrink: 0; }
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-avatar-sm { width: 38px; height: 38px; border-radius: 10px; font-size: 1.1rem; }
/* The deity card's photo: big enough to recognise the murti, and a button that opens it full size. */
.sc-avatar-md { width: 88px; height: 88px; border-radius: 18px; font-size: 2.2rem; border: 1px solid var(--glass-border); }
.sc-avatar-btn { padding: 0; cursor: pointer; font-family: inherit; color: inherit; transition: box-shadow .18s ease; }
.sc-avatar-btn img { transition: transform .25s ease; }
.sc-avatar-btn:not(:disabled):hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 45%, transparent); }
.sc-avatar-btn:not(:disabled):hover img { transform: scale(1.06); }
.sc-avatar-btn:disabled { cursor: default; }
.sc-deity-tile .sc-tile-top { align-items: flex-start; }
.sc-deity-tile .sc-tile-desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Deity chips ---- */
.sc-typechip { font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; vertical-align: middle; }
.sc-typechip.god { background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-primary); }
.sc-typechip.goddess { background: color-mix(in srgb, #C0398A 18%, transparent); color: #C0398A; }
.sc-chiprow { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sc-minichip { font-size: 0.68rem; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--color-primary-container); color: var(--color-on-primary-container); }
.sc-minichip.day { background: color-mix(in srgb, var(--color-gold) 22%, transparent); color: var(--color-on-surface); }
/* ChipRow: the "+N more" chip is a real button so it can open the rest; styled as a chip so the
   row still reads as one. "All Regions" stands for a list that is the whole master. */
.sc-chip-more { border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent); background: transparent; color: var(--color-primary); font-weight: 600; cursor: pointer; font-family: inherit; line-height: inherit; }
.sc-chip-more:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.sc-chip-all { background: color-mix(in srgb, var(--color-gold) 26%, transparent); color: var(--color-on-surface); font-weight: 600; }

/* ---- Share (PanchangamShare): floating button, preview sheet, and the carved-name font ---- */
/* Cinzel (SIL OFL, fonts/Cinzel-OFL.txt) is only ever drawn on the share canvas, and a browser does
   not fetch a face until something uses it, so declaring it here costs nothing on ordinary pages. */
@font-face { font-family: "Cinzel"; src: url("fonts/Cinzel-Variable.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
.sc-share-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 35; width: 58px; height: 58px; border-radius: 999px; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--gradient-saffron); box-shadow: 0 12px 28px -8px rgba(141, 78, 25, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform .14s ease, box-shadow .14s ease; }
.sc-share-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(141, 78, 25, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.sc-share-fab:active { transform: scale(0.96); }
.sc-share-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 3px; }
.sc-share-wait { display: grid; place-items: center; padding: 2.5rem 0; }
.sc-share-inline { position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--gradient-saffron); box-shadow: 0 6px 16px -6px rgba(141, 78, 25, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform .14s ease; }
.sc-share-inline:hover { transform: translateY(-1px); }
.sc-share-inline:active { transform: scale(0.94); }
.sc-share-inline:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 2px; }
/* The dashboard's Panchangam card: the wrapper positions the share button, and the text keeps clear
   of the button's corner. On the linked card the arrow column already sits at the right edge, so the
   space is reserved on the text column and the arrow keeps its place; the plain card has no arrow,
   so the card itself makes the room. */
.sc-pchg-mini-wrap { position: relative; }
.sc-pchg-mini-wrap > a.sc-pchg-mini .sc-pchg-mini-body { padding-right: 0.9rem; }
.sc-pchg-mini-wrap > div.sc-pchg-mini { padding-right: 3.6rem; }
.sc-share-preview { display: block; width: auto; max-width: 100%; max-height: 58vh; margin: 0 auto; object-fit: contain; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--color-background); box-shadow: var(--shadow-lg); }
.sc-share-hint { margin: 0.8rem 0 0; text-align: center; }

/* ---- Role chip as a button + the "Your Role" popup (RoleDetailsModal) ---- */
.sc-typechip-btn { border: 0; margin: 0; font-family: inherit; line-height: 1.5; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; }
.sc-typechip-btn .ic { font-size: 0.78rem; opacity: 0.8; }
.sc-typechip-btn:hover { filter: brightness(0.94); }
.sc-typechip-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent); outline-offset: 2px; }
.sc-rolecards { display: flex; flex-direction: column; gap: 0.9rem; }
.sc-rolecard { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.95rem 1.05rem; border-radius: 16px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.sc-rolecard-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.sc-rolecard-head .sc-typechip { font-size: 0.82rem; padding: 0.22rem 0.7rem; }
.sc-rolecard-name { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-on-surface); }
.sc-rolecard-desc { margin: 0; color: var(--color-secondary); font-size: 0.9rem; line-height: 1.45; }
.sc-rolecard.is-upcoming { border-style: dashed; border-color: color-mix(in srgb, var(--color-gold) 60%, transparent); background: color-mix(in srgb, var(--color-gold) 9%, var(--color-surface)); }
.sc-rolecard-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sc-rolecard-perks li { font-size: 0.85rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }

/* ---- Rich text editor ---- */
.sc-rte { border: 1px solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-background); overflow: hidden; }
.sc-rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--color-outline); background: var(--color-surface); }
.sc-rte-btn { min-width: 30px; height: 28px; padding: 0 0.45rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--color-on-surface); cursor: pointer; font-size: 0.85rem; line-height: 1; transition: background .14s ease, border-color .14s ease; }
.sc-rte-btn:hover { background: var(--color-primary-container); border-color: var(--color-primary); }
.sc-rte-sep { width: 1px; height: 18px; margin: 0 0.3rem; background: var(--color-outline); }
.sc-rte-body { min-height: 190px; max-height: 460px; overflow-y: auto; padding: 0.75rem 0.9rem; outline: none; font-size: 0.95rem; line-height: 1.7; }
.sc-rte-body:empty::before { content: attr(data-placeholder); color: var(--color-secondary); }
.sc-rte-body:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent); }

/* ---- Rendered chant body (editor + detail view) ---- */
.sc-richtext h1, .sc-richtext h2, .sc-richtext h3, .sc-rte-body h1, .sc-rte-body h2, .sc-rte-body h3 { margin: 0.6rem 0 0.35rem; color: var(--color-primary); font-weight: 700; }
.sc-richtext p, .sc-rte-body p { margin: 0 0 0.55rem; }
.sc-richtext ul, .sc-richtext ol, .sc-rte-body ul, .sc-rte-body ol { margin: 0 0 0.55rem 1.3rem; }
.sc-richtext blockquote, .sc-rte-body blockquote { margin: 0.5rem 0; padding: 0.4rem 0.9rem; border-left: 3px solid var(--color-gold); background: color-mix(in srgb, var(--color-gold) 10%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; }
.sc-richtext { font-size: 1rem; line-height: 1.85; }

/* ---- Audio upload + player ---- */
.sc-audiobox { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem; border: 1px dashed var(--color-outline); border-radius: var(--radius-md); background: var(--color-background); }
.sc-audiorow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.sc-audiometa { font-size: 0.8rem; color: var(--color-secondary); }
.sc-audioplayer { width: 100%; max-width: 460px; height: 38px; }

/* ---- Collapsible section ---- */
.sc-collapse { border: 1px solid var(--color-outline); border-radius: var(--radius-md); overflow: hidden; }
.sc-collapse-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.7rem 0.9rem; border: none; background: var(--color-surface); color: var(--color-on-surface); cursor: pointer; font-size: 0.92rem; font-weight: 600; text-align: left; }
.sc-collapse-head:hover { background: var(--color-primary-container); }
.sc-collapse-caret { transition: transform .16s ease; }
.sc-collapse-caret.open { transform: rotate(90deg); }
.sc-collapse-body { padding: 0.9rem; border-top: 1px solid var(--color-outline); }

/* ---- Detail view ---- */
.sc-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.sc-detail-item { display: flex; flex-direction: column; gap: 0.2rem; }
.sc-detail-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-secondary); }
.sc-detail-value { font-size: 0.95rem; }
.sc-detail-section { margin-top: 1.2rem; }
.sc-detail-section h3 { margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--color-secondary); }

/* ---- Row actions ---- */
.sc-rowactions { display: flex; gap: 0.3rem; justify-content: flex-end; }
.sc-iconbtn { padding: 0.3rem 0.55rem; border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: none; color: var(--color-on-surface); cursor: pointer; font-size: 0.85rem; transition: border-color .14s ease, background .14s ease; }
.sc-iconbtn:hover { border-color: var(--color-primary); background: var(--color-primary-container); }
.sc-iconbtn.danger:hover { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); }

.sc-req { color: var(--color-error); font-weight: 700; }
.sc-langeditor { margin-top: 0.5rem; }
.sc-lang-block { margin-top: 0.75rem; }
.sc-lang-head { font-weight: 600; color: var(--color-accent); margin-bottom: 0.25rem; }

/* ---- Access Rights ---- */
.sc-alert-info { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); color: var(--color-text); }
.sc-minichip-muted { background: var(--color-surface-2); color: var(--color-text-muted); margin-left: 0.4rem; font-size: 0.68rem; }
.sc-filter-note { align-self: end; }
.sc-access-table th.sc-access-col, .sc-access-table td.sc-access-col { width: 6.5rem; text-align: center; }
.sc-access-all { display: flex; gap: 0.3rem; justify-content: center; font-size: 0.72rem; font-weight: 400; color: var(--color-text-muted); margin-top: 0.15rem; }
.sc-access-group td { background: var(--color-surface-2); font-weight: 700; color: var(--color-accent); cursor: pointer; user-select: none; }
.sc-access-caret { display: inline-block; width: 1.1rem; color: var(--color-text-muted); }
.sc-access-count { float: right; font-weight: 400; font-size: 0.72rem; color: var(--color-text-muted); }
.sc-access-child { padding-left: 1.6rem !important; }
.sc-access-icon { display: inline-block; width: 1.4rem; }
.sc-access-empty { text-align: center; color: var(--color-text-muted); padding: 1rem; }

/* ---- Language switcher + Language Configs ---- */
.sc-langpick { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--color-surface) 70%, transparent); transition: border-color .14s ease, background .14s ease; }
.sc-langpick:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.sc-langpick-ic { font-size: 0.9rem; line-height: 1; }
.sc-langpick-select { border: none; background: none; color: var(--color-on-surface); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.15rem 0.1rem; cursor: pointer; max-width: 140px; }
.sc-langpick-select:focus { outline: none; }
.sc-lang-en { color: var(--color-text-muted); }
.sc-lang-input { width: 100%; font-family: var(--font-indic); }
.sc-lang-ns { background: var(--color-surface-2); font-weight: 700; color: var(--color-accent); }
.sc-lang-progress { height: 6px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; min-width: 120px; }
.sc-lang-progress > span { display: block; height: 100%; background: var(--color-primary); }
.sc-lang-missing { color: var(--color-error); font-weight: 700; }

/* ---- All-languages translation grid ---- */
.sc-matrix { min-width: 900px; }
.sc-matrix th { vertical-align: top; white-space: nowrap; }
.sc-matrix td { vertical-align: top; }
.sc-matrix-key { max-width: 220px; word-break: break-all; font-size: 0.76rem; }
.sc-matrix-base { background: color-mix(in srgb, var(--color-surface-2) 55%, transparent); }
.sc-matrix-native { font-weight: 400; font-size: 0.78rem; color: var(--color-text-muted); font-family: var(--font-indic); }
.sc-matrix .sc-lang-input { min-width: 160px; }

/* Day chips shorten visually rather than by slicing the string — safe for Indic scripts. */
.sc-daychip { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Compact form density (opt-in, so other forms keep their spacing) ---- */
.sc-compact.sc-card { padding: 1rem 1.1rem; }
.sc-compact .sc-form { gap: 0.5rem; }
/* Explicit 4-up grid: Name | Type | Description(2) on one row, Deities(2) | Audio(2) on the next. */
.sc-compact .sc-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 0.9rem; }
.sc-compact .sc-form-grid .sc-span-2 { grid-column: span 2; }
@media (max-width: 1150px) {
  .sc-compact .sc-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-compact .sc-form-grid .sc-span-2 { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .sc-compact .sc-form-grid { grid-template-columns: 1fr; }
}
.sc-compact .sc-field { gap: 0.15rem; }
.sc-compact .sc-field label { font-size: 0.78rem; }
.sc-compact .sc-input { height: 38px; font-size: 0.92rem; }
.sc-compact .sc-textarea { min-height: 42px; height: auto; padding: 0.4rem 0.7rem; }
.sc-compact .sc-multiselect { padding: 0.4rem; max-height: 104px; }
.sc-compact .sc-multiopt { padding: 0.22rem 0.5rem; font-size: 0.8rem; }
.sc-compact .sc-rte-toolbar { padding: 0.2rem 0.35rem; }
.sc-compact .sc-rte-btn { height: 25px; min-width: 27px; font-size: 0.8rem; }
.sc-compact .sc-rte-body { min-height: 118px; max-height: 220px; padding: 0.45rem 0.7rem; font-size: 0.9rem; line-height: 1.5; }
.sc-compact .sc-audiobox { padding: 0.5rem 0.6rem; gap: 0.4rem; }
.sc-compact .sc-audioplayer { height: 32px; }
.sc-compact .sc-collapse-head { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
.sc-compact .sc-collapse-body { padding: 0.6rem; }
.sc-compact .sc-modal-actions { justify-content: flex-end; gap: 0.5rem; }
.sc-compact .sc-modal-actions .sc-btn-ghost, .sc-compact .sc-modal-actions .sc-btn-primary { min-width: 104px; height: 38px; }
.sc-compact .sc-hint, .sc-compact .sc-optional { font-size: 0.74rem; }

/* Footer: Active switch on the left, actions on the right — saves a whole row. */
.sc-formfoot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.15rem; }
.sc-formfoot .sc-switchrow { font-size: 0.85rem; }

/* ---- Searchable select ---- */
/* .sc-card sets backdrop-filter, which creates a stacking context and would trap the
   dropdown panel behind the cards that follow it. Lifting the filter card itself puts
   the whole card (panel included) above the list, while staying under the sticky
   header (z 20) and modals (z 1000). */
.sc-filtercard { position: relative; z-index: 12; }
.sc-ss { position: relative; min-width: 170px; }
.sc-ss-control { position: relative; display: flex; align-items: center; }
.sc-ss-control .sc-input { width: 100%; padding-right: 1.7rem; }
.sc-ss-value { display: flex; align-items: center; text-align: left; cursor: pointer; font-family: inherit; }
.sc-ss-value.is-placeholder { color: var(--color-secondary); }
.sc-ss-search { cursor: text; }
.sc-ss-caret { position: absolute; right: 0.6rem; pointer-events: none; font-size: 0.8rem; line-height: 1; color: var(--color-secondary); transition: transform .14s ease; }
.sc-ss.is-open .sc-ss-caret { transform: rotate(180deg); }
.sc-ss-backdrop { position: fixed; inset: 0; z-index: 40; }
.sc-ss-panel { position: absolute; z-index: 41; top: calc(100% + 4px); left: 0; right: 0; min-width: 180px; max-height: 280px; overflow-y: auto; padding: 0.3rem; border: 1px solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 10px 26px rgba(30,20,11,0.18); }
.sc-ss-opt { display: block; width: 100%; padding: 0.4rem 0.55rem; border: none; border-radius: var(--radius-sm); background: none; color: var(--color-on-surface); text-align: left; font-size: 0.88rem; font-family: inherit; cursor: pointer; }
.sc-ss-opt:hover { background: var(--color-primary-container); }
.sc-ss-opt.is-sel { background: var(--color-primary-container); color: var(--color-on-primary-container); font-weight: 600; }
.sc-ss-empty { padding: 0.5rem 0.55rem; font-size: 0.85rem; color: var(--color-secondary); }

/* ---- Native-script text (Telugu, Devanagari, Perso-Arabic…) ---- */
.sc-native { margin: 0 0 0.2rem; font-size: 1.15rem; line-height: 1.6; color: var(--color-primary); }
/* Razor collapses the whitespace before an inline chip, so space it explicitly. */
.sc-tile-title .sc-typechip { margin-left: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- Chant card extras ---- */
.sc-tile-preview { margin: 0.15rem 0 0; padding: 0.45rem 0.6rem; border-left: 3px solid var(--color-gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--color-gold) 9%, transparent); font-size: 0.82rem; line-height: 1.5; color: var(--color-on-surface); }
.sc-tile-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.76rem; color: var(--color-secondary); }
.sc-tile-actions { display: flex; gap: 0.3rem; }

/* ---- Panchangam ---- */
.sc-pchg-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.sc-daynav { display: flex; align-items: center; gap: 0.4rem; }
.sc-daynav button { width: 34px; height: 34px; border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-on-surface); cursor: pointer; font-size: 1rem; }
.sc-daynav button:hover { border-color: var(--color-primary); background: var(--color-primary-container); }
.sc-locbtn { display: inline-flex; align-items: center; gap: 0.4rem; }

.sc-pchg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.sc-pchg-date { font-size: 1.35rem; font-weight: 700; color: var(--color-primary); }
.sc-pchg-place { font-size: 0.9rem; color: var(--color-secondary); }
.sc-pchg-place .sc-livechip { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: color-mix(in srgb, var(--color-gold) 22%, transparent); color: var(--color-on-surface); }

.sc-pchg-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 1rem; }
.sc-pchg-group { border: 1px solid var(--color-outline); border-radius: var(--radius-md); overflow: hidden; }
.sc-pchg-group h4 { margin: 0; padding: 0.5rem 0.8rem; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; background: var(--color-surface); color: var(--color-secondary); border-bottom: 1px solid var(--color-outline); }
.sc-pchg-group.warn h4 { color: #B4531B; background: color-mix(in srgb, #B4531B 10%, transparent); }
.sc-pchg-group.good h4 { color: #2F7D4F; background: color-mix(in srgb, #2F7D4F 12%, transparent); }
.sc-pchg-row { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 0.8rem; border-top: 1px solid color-mix(in srgb, var(--color-outline) 55%, transparent); font-size: 0.9rem; }
.sc-pchg-row:first-child { border-top: none; }
.sc-pchg-row .k { color: var(--color-secondary); flex-shrink: 0; }
.sc-pchg-row .v { text-align: right; font-weight: 600; }

/* Dashboard strip — a one-line summary; the whole strip links to the full Panchangam page. */
.sc-pchg-mini { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.sc-pchg-mini:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.sc-pchg-mini-ic { font-size: 1.35rem; flex-shrink: 0; }
.sc-pchg-mini-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.sc-pchg-mini-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.sc-pchg-mini-title { font-weight: 700; color: var(--color-primary); }
.sc-pchg-mini-date, .sc-pchg-mini-region { font-size: 0.8rem; color: var(--color-secondary); }

/* min-width:0 on the items is what lets the ellipsis actually engage inside a flex row. */
.sc-pchg-mini-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.87rem; }
.sc-pchg-mini-fact { display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0; max-width: 100%; }
.sc-pchg-mini-fact .k { color: var(--color-secondary); flex-shrink: 0; }
.sc-pchg-mini-fact .v { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-pchg-mini-fact.warn .v { color: #B4531B; }
.sc-pchg-mini-go { flex-shrink: 0; font-size: 1.1rem; color: var(--color-primary); }

@media (max-width: 560px) {
  .sc-pchg-mini-facts { flex-direction: column; gap: 0.15rem; }
}

.sc-geo-alert { display: flex; align-items: center; gap: 0.5rem; }

/* ---- Dashboard sadhana widget ---- */
.sc-sadhana-widget { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sc-sadhana-widget .sc-streak { flex: 1; min-width: 260px; }
.sc-sadhana-cta { white-space: nowrap; text-decoration: none; }

/* ---- Sadhana: streak header ---- */
.sc-streak { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.sc-streak-flame { display: flex; align-items: center; gap: 0.6rem; }
.sc-streak-num { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--color-primary); }
.sc-streak-flame .ic { font-size: 2.4rem; filter: saturate(1.2); }
.sc-streak-flame.cold .sc-streak-num { color: var(--color-secondary); }
.sc-streak-flame.cold .ic { filter: grayscale(1); opacity: 0.5; }
.sc-streak-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); }
.sc-streak-stats { display: flex; gap: 1.4rem; margin-left: auto; }
.sc-streak-stat { text-align: center; }
.sc-streak-stat .n { font-size: 1.3rem; font-weight: 700; color: var(--color-on-surface); }
.sc-streak-stat .l { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-secondary); }
.sc-streak-today { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.sc-streak-today.done { background: color-mix(in srgb, #2F7D4F 16%, transparent); color: #2F7D4F; }
.sc-streak-today.pending { background: color-mix(in srgb, var(--color-gold) 22%, transparent); color: var(--color-on-surface); }

/* ---- Festival banner ---- */
.sc-festbanner { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: var(--radius-md); background: linear-gradient(90deg, color-mix(in srgb, var(--color-gold) 26%, transparent), color-mix(in srgb, var(--color-primary) 14%, transparent)); border: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent); font-weight: 600; }

/* ---- Tabs ---- */
.sc-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--color-outline); margin-bottom: 1rem; }
.sc-tab { padding: 0.55rem 1rem; border: none; background: none; color: var(--color-secondary); cursor: pointer; font-size: 0.92rem; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sc-tab:hover { color: var(--color-on-surface); }
.sc-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ---- Recommend reason chip + chant progress ---- */
.sc-reason { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); margin-bottom: 0.3rem; }
.sc-chantprog { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--color-secondary); }
.sc-chantprog .done { color: #2F7D4F; font-weight: 700; }

/* ---- Japa screen ---- */
/* While the japa screen is open the whole document is its counter (wwwroot/japa.js adds and
   removes html.sc-jp-on): no double-tap zoom, no text selection or callout on a tap, no grey
   flash. Inputs in the settings sheet stay editable. */
html.sc-jp-on body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.sc-jp-on input, html.sc-jp-on textarea { -webkit-user-select: text; user-select: text; }

/* The space below the text is tappable too, and lets the last lines scroll up to eye level. */
.sc-jp { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 32vh; }

/* The counter: a slim pill pinned under the top bar. Opaque rather than frosted on purpose —
   a backdrop blur over scrolling text is re-rendered on every frame of every scroll. The dock
   carries the pinning, and behind the pill a soft veil that fades in once the page has scrolled,
   so lines of text never peek out between the top bar and the pill. The veil is driven by the
   scroll position on the compositor; without that support it simply stays hidden. */
.sc-jp-dock {
  position: sticky;
  top: calc(var(--topbar-h, 56px) + 0.6rem);
  z-index: 6;
}
.sc-jp-dock::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1.25rem;
  right: -1.25rem;
  top: -0.75rem;
  bottom: -1.1rem;
  background: linear-gradient(to bottom, var(--color-background) 58%, transparent);
  opacity: 0;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .sc-jp-dock::before { animation: sc-jp-veil linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
}
@keyframes sc-jp-veil { to { opacity: 1; } }

.sc-jp-hud {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0.45rem 0.5rem 0.45rem 0.45rem;
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-gold) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-surface) 96%, transparent);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--color-primary) 45%, transparent), var(--shadow-sm);
  transition: box-shadow .4s ease, border-color .4s ease;
}

.sc-jp-ring { position: relative; flex: none; width: 60px; height: 60px; display: grid; place-items: center; }
.sc-jp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.sc-jp-ring-track { fill: color-mix(in srgb, var(--color-primary-container) 60%, var(--color-surface)); stroke: color-mix(in srgb, var(--color-gold) 22%, transparent); stroke-width: 5; }
.sc-jp-ring-arc { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .3s cubic-bezier(.3, .7, .4, 1); }
.sc-jp-count {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
/* One breath per chant: the number lifts, a soft halo leaves the ring. Both transform/opacity
   only, so the compositor does the work and the text below never repaints. */
.sc-jp-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  opacity: 0;
  pointer-events: none;
}
.sc-jp-ring.is-bump .sc-jp-count { animation: sc-jp-bump .3s ease-out; }
.sc-jp-ring.is-bump::after { animation: sc-jp-halo .5s ease-out; }
@keyframes sc-jp-bump { 0% { transform: scale(1); } 35% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes sc-jp-halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }

.sc-jp-tally { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.sc-jp-of { font-size: 1.02rem; font-weight: 700; color: var(--color-on-surface); }
.sc-jp-meta { font-size: 0.8rem; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-jp-meta b { color: var(--color-accent); font-weight: 800; }
.sc-jp-dot { margin: 0 0.2rem; opacity: .6; }

.sc-jp-gear {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: transform .12s ease, border-color .2s ease;
}
.sc-jp-gear:hover { border-color: var(--color-primary); }
.sc-jp-gear:active { transform: scale(.92); }
.sc-jp-gear svg { width: 22px; height: 22px; }

/* A mala completes: the whole pill lights up gold for the moment before the completion page. */
.sc-jp.is-complete .sc-jp-hud {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 40%, transparent), 0 14px 44px -8px color-mix(in srgb, var(--color-gold) 75%, transparent);
  animation: sc-jp-complete .55s ease-out;
}
.sc-jp.is-complete .sc-jp-ring-arc { stroke-dashoffset: 0 !important; }
@keyframes sc-jp-complete { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }

.sc-jp-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.sc-jp-title-text { min-width: 0; }
.sc-jp-title h1 { margin: 0; font-size: clamp(1.35rem, 4.6vw, 1.9rem); line-height: 1.2; }
.sc-jp-title .sc-page-sub { margin: 0.25rem 0 0; }
.sc-jp-title-actions { flex: none; display: flex; align-items: center; gap: 0.5rem; }

.sc-jp-hint {
  align-self: center;
  margin: 0;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-gold) 12%, transparent);
  color: var(--color-secondary);
  font-size: 0.84rem;
  text-align: center;
  animation: sc-jp-hint-in .6s ease both;
}
@keyframes sc-jp-hint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* The words are what the seeker is here for: a size and spacing for reading at arm's length. */
.sc-jp-text .sc-richtext { font-size: 1.14rem; line-height: 1.95; color: var(--color-on-surface); }

/* One tab per language the chant was written in; they scroll sideways on a narrow phone rather
   than wrap, so the row reads as a row. Indic scripts sit a little taller than Latin, hence the
   looser line height on the tab. */
.sc-jp-langs { margin: 0 0 0.9rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sc-jp-langs::-webkit-scrollbar { display: none; }
.sc-jp-langs .sc-tab { white-space: nowrap; line-height: 1.5; flex: none; }

/* The tap's acknowledgement (japa.js): a soft gold light where the finger landed, gone in half a
   second. Low enough in opacity that a line under it stays readable throughout. */
.sc-jp-ripples { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; contain: strict; }
.sc-jp-ripple {
  position: absolute;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-gold) 34%, transparent) 0%,
    color-mix(in srgb, var(--color-gold) 14%, transparent) 42%,
    transparent 70%);
  animation: sc-jp-ripple .55s cubic-bezier(.2, .65, .3, 1) forwards;
}
@keyframes sc-jp-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* Battery Saver: the counter still moves with every chant, but nothing else does. */
.sc-jp.is-lite .sc-jp-ring-arc,
.sc-jp.is-lite .sc-jp-hud { transition: none; }
.sc-jp.is-lite .sc-jp-hint,
.sc-jp.is-lite.is-complete .sc-jp-hud { animation: none; }

/* The settings sheet. */
.sc-jp-settings { display: flex; flex-direction: column; gap: 1rem; }
.sc-jp-set { display: flex; flex-direction: column; gap: 0.55rem; }
.sc-jp-set .sc-hint { margin: 0; }
.sc-jp-set-label { font-weight: 700; color: var(--color-on-surface); }
.sc-jp-stepper { display: flex; align-items: center; gap: 0.5rem; }
.sc-jp-stepper button {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.sc-jp-stepper button:disabled { opacity: .45; cursor: default; }
.sc-jp-stepper input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-size: 1.45rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.sc-jp-stepper input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-container); }
.sc-jp-stepper input::-webkit-outer-spin-button,
.sc-jp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-jp-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sc-jp-presets .sc-chip { min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.sc-jp-presets .sc-chip.is-on { background: var(--gradient-gold); color: #fff; }
.sc-jp-switchrow { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.95rem; border-top: 1px solid var(--color-outline); }
.sc-jp-switchrow .sc-hint { margin-top: 0.2rem; }
.sc-jp-switchrow .sc-switch { flex: none; }
.sc-jp-auto { color: var(--color-success); }
.sc-jp-reset { align-self: flex-start; }

/* ---- Mala complete ---- */
.sc-jpdone { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; max-width: 560px; margin: 0 auto; padding: 0.5rem 0 2rem; text-align: center; }
.sc-jpdone-hero { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding-top: 0.5rem; }
.sc-jpdone-burst { position: relative; width: 170px; height: 170px; display: grid; place-items: center; margin-bottom: 0.35rem; }
/* Three rings leave the lotus once and are gone: a celebration, not a screensaver. */
.sc-jpdone-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-gold) 60%, transparent);
  opacity: 0;
  animation: sc-jpdone-halo 1.6s cubic-bezier(.2, .7, .3, 1) forwards;
}
.sc-jpdone-halo.h2 { animation-delay: .18s; }
.sc-jpdone-halo.h3 { animation-delay: .36s; }
@keyframes sc-jpdone-halo { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.sc-jpdone-lotus {
  position: relative;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 4.1rem;
  line-height: 1;
  background: radial-gradient(circle at 50% 38%, #FFF9EE, color-mix(in srgb, var(--color-gold) 40%, var(--color-surface)));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--color-gold) 22%, transparent),
    0 18px 50px -12px color-mix(in srgb, var(--color-accent) 65%, transparent);
  animation: sc-jpdone-pop .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes sc-jpdone-pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* In the dark a cream disc glares; a warm amber glow keeps the moment without the flash. */
:root[data-theme="dark"] .sc-jpdone-lotus {
  background: radial-gradient(circle at 50% 38%,
    color-mix(in srgb, var(--color-gold) 48%, var(--color-surface)),
    color-mix(in srgb, var(--color-gold) 16%, var(--color-surface)));
}
.sc-jpdone-kicker { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent); }
.sc-jpdone-chant { margin: 0; font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.2; color: var(--color-on-surface); }
.sc-jpdone-sub { margin: 0; font-size: 0.95rem; color: var(--color-secondary); }

.sc-jpdone-streak { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; animation: sc-jpdone-rise .6s .15s ease-out both; }
.sc-jpdone-flame { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0.45rem; }
.sc-jpdone-flame .ic { font-size: 2rem; }
.sc-jpdone-flame .n { font-family: var(--font-heading); font-size: 3.3rem; font-weight: 800; line-height: 1; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.sc-jpdone-flame .l { font-size: 0.82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-secondary); }
.sc-jpdone-secured { margin: 0; padding: 0.35rem 0.95rem; border-radius: 999px; background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); font-size: 0.85rem; font-weight: 700; }
.sc-jpdone-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; width: 100%; padding-top: 0.85rem; border-top: 1px solid var(--color-outline); }
.sc-jpdone-stats div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sc-jpdone-stats b { font-size: 1.3rem; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.sc-jpdone-stats span { font-size: 0.72rem; color: var(--color-secondary); overflow-wrap: anywhere; }

.sc-jpdone-actions { display: flex; flex-direction: column; gap: 0.6rem; animation: sc-jpdone-rise .6s .3s ease-out both; }
.sc-jpdone-share { height: 54px; margin-top: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 16px; font-size: 1.05rem; }
.sc-jpdone-again { height: 48px; border-radius: 14px; font-size: 0.98rem; font-weight: 700; color: var(--color-primary); }
.sc-jpdone-home { padding: 0.6rem; font-weight: 600; color: var(--color-secondary); text-decoration: none; }
.sc-jpdone-home:hover { color: var(--color-primary); }
.sc-jpdone-inline { display: inline-flex; margin-top: 0.8rem; text-decoration: none; }
@keyframes sc-jpdone-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.sc-jpdone.is-lite .sc-jpdone-halo { display: none; }
.sc-jpdone.is-lite .sc-jpdone-lotus,
.sc-jpdone.is-lite .sc-jpdone-streak,
.sc-jpdone.is-lite .sc-jpdone-actions { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .sc-jp-ripple, .sc-jpdone-halo { display: none; }
  .sc-jp-ring.is-bump .sc-jp-count, .sc-jp-ring.is-bump::after,
  .sc-jp.is-complete .sc-jp-hud, .sc-jp-hint,
  .sc-jpdone-lotus, .sc-jpdone-streak, .sc-jpdone-actions { animation: none; }
  .sc-jp-ring-arc { transition: none; }
}

.sc-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.sc-detail-head h2 { margin: 0; }

/* ---- Filter field ---- */
.sc-filter { display: flex; flex-direction: column; gap: 0.25rem; min-width: 170px; }
.sc-filter label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-secondary); }

/* ---- Wallpapers ---- */
.sc-upload { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.sc-wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 1rem; }
.sc-wp-card { margin: 0; border: 1px solid var(--color-outline); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); display: flex; flex-direction: column; }
.sc-wp-card.inactive { opacity: 0.5; }

/* 9:16 keeps every tile the same shape whatever the source image is. */
.sc-wp-thumb { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; background: var(--color-surface); }
/* Stands in for a deactivated wallpaper, whose bytes the API no longer serves. */
.sc-wp-thumb-placeholder { display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: 0.4; }
.sc-wp-card figcaption { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.6rem; min-width: 0; }
.sc-wp-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-wp-meta { font-size: 0.75rem; color: var(--color-secondary); }
.sc-wp-actions { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.6rem 0.55rem; border-top: 1px solid color-mix(in srgb, var(--color-outline) 55%, transparent); }
.sc-wp-actions .danger { color: #B4531B; }

.sc-wp-download { text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.sc-wp-download:hover { border-color: var(--color-primary); transform: translateY(-2px); }

.sc-wp-deities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 1rem; }
.sc-wp-deity { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 0.6rem; border: 1px solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.sc-wp-deity:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.sc-wp-deity-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.sc-wp-deity-img.placeholder { display: grid; place-items: center; font-size: 2rem; background: var(--color-primary-container); }
.sc-wp-deity-name { font-weight: 600; text-align: center; }
.sc-wp-deity-count { font-size: 0.78rem; color: var(--color-secondary); }

.sc-wp-bar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.sc-wp-bar-title { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); }

/* Marks a form field that may be left blank. */
.sc-optional { font-weight: 400; font-size: 0.8rem; color: var(--color-secondary); }

/* ---- Puja process ---- */
.sc-material-add { display: grid; grid-template-columns: 2fr 1fr auto; gap: 0.6rem; align-items: center; margin-bottom: 0.8rem; }
.sc-material-empty { margin: 0; }
.sc-material-list { list-style: none; margin: 0; padding: 0; }
.sc-material-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; align-items: center; padding: 0.45rem 0; border-top: 1px solid color-mix(in srgb, var(--color-outline) 55%, transparent); }
.sc-material-list li:first-child { border-top: none; }
.sc-material-list.readonly li { grid-template-columns: 1fr auto; }
.sc-material-name { font-weight: 600; }
.sc-material-qty { color: var(--color-secondary); font-size: 0.9rem; }

.sc-step-card { margin-bottom: 1rem; }
.sc-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.sc-step-badge { font-weight: 700; color: var(--color-primary); }
.sc-step-langcount { font-size: 0.8rem; color: var(--color-secondary); }
.sc-step-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.sc-linkbtn.danger { color: #B4531B; }

.sc-process-actions { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 2rem; }

/* runtime */
.sc-progress-card { display: flex; flex-direction: column; gap: 0.6rem; }
.sc-progress-card.done { border-color: #2F7D4F; }
.sc-progress-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.sc-progress-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-outline) 60%, transparent); overflow: hidden; }
.sc-progress-fill { height: 100%; background: var(--color-primary); transition: width 0.25s ease; }
.sc-puja-done { display: flex; align-items: center; gap: 0.8rem; }
.sc-puja-done-icon { font-size: 2rem; }
.sc-puja-done p { margin: 0.1rem 0 0; }

.sc-puja-pick { cursor: pointer; text-align: left; }

.sc-runstep { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.8rem; transition: border-color 0.15s; }
.sc-runstep.next { border-color: var(--color-primary); }
.sc-runstep.done { opacity: 0.72; }
.sc-runstep-check { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--color-outline); background: var(--color-surface); color: var(--color-on-surface); font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.sc-runstep-check:hover { border-color: var(--color-primary); }
.sc-runstep.done .sc-runstep-check { background: #2F7D4F; border-color: #2F7D4F; color: #fff; }
.sc-runstep.next .sc-runstep-check { border-color: var(--color-primary); color: var(--color-primary); }
.sc-runstep-body { flex: 1; min-width: 0; }
.sc-runstep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.sc-runstep.done .sc-runstep-head strong { text-decoration: line-through; }

@media (max-width: 560px) {
  .sc-material-add { grid-template-columns: 1fr; }
}

/* ============================================================================
   Cross-device: touch, pointer type, safe areas
   Keyed on input capability rather than width, so a 1280px touchscreen laptop
   gets the same treatment as a phone — width-based rules miss that case entirely.
   ============================================================================ */

@media (pointer: coarse) {
  /* 44px is the smallest reliably tappable target. These were 19-33px. */
  .sc-hamburger,
  .sc-iconbtn,
  .sc-modal-x,
  .sc-pager-btn,
  .sc-daynav button,
  .sc-runstep-check,
  .sc-tab,
  .sc-linkbtn {
    min-height: 44px;
    min-width: 44px;
  }

  .sc-linkbtn, .sc-tab { padding-inline: 0.75rem; }

  /* The switch stays 38x20 visually — resizing it would break the three translateX rules that
     position the knob. A transparent pseudo-element enlarges only the hit area. */
  .sc-switch::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }

  /* Table action buttons sit in tight rows; give them vertical room. */
  .sc-table .sc-btn-sm { min-height: 40px; }
}

/* Lift-on-hover is meaningless on touch and leaves elements stuck in the hovered state after a
   tap. Give touch devices a press response instead. */
@media (hover: none) {
  .sc-tile:hover, .sc-darshan-card:hover, .sc-prayer-card:hover,
  .sc-wp-card:hover, .sc-wp-deity:hover, .sc-pchg-dash:hover,
  .sc-wp-download:hover, .sc-puja-pick:hover {
    transform: none;
  }
  .sc-tile:active, .sc-wp-card:active, .sc-wp-deity:active,
  .sc-puja-pick:active, .sc-pchg-dash:active {
    transform: scale(0.985);
  }
}

/* iOS zooms the page when a control under 16px takes focus and never zooms back out, stranding
   the user panned into a form. Only the computed size matters, so bump it at touch widths. */
@media (max-width: 820px) {
  .sc-input, .sc-input-sm, .sc-compact .sc-input,
  .sc-regionpick-select, .sc-langpick-select,
  select.sc-input, textarea.sc-input {
    font-size: 16px;
  }
}

/* Notches and home indicators. */
.sc-content { padding-bottom: max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-bottom)); }
.sc-topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }

/* Locked while a drawer or modal is open, so the page behind cannot be scrolled away.
   overscroll-behavior alone does not do this — it only stops scroll CHAINING. */
body.sc-noscroll { overflow: hidden; }

/* Images must never be the thing that widens a layout. */
img, svg, video { max-width: 100%; height: auto; }

/* Admin-authored rich text can contain long unbroken strings (URLs, Sanskrit transliterations). */
.sc-richtext, .sc-tile-desc, .sc-material-name { overflow-wrap: anywhere; }

/* ---- Sign in with Google ---- */
/* The divider and the button sit under the password form on the login page; the verified-email
   row is on the registration form a first Google sign-in lands on. Shared by both hosts, so it
   lives here and not in mobile.css. */
.sc-auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0 0.9rem;
  color: var(--color-secondary);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sc-auth-divider::before, .sc-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-outline); }
.sc-google-signin { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; }
/* Google draws its own button in here; the host only reserves the height so the form does not jump. */
.sc-google-host { min-height: 44px; display: flex; justify-content: center; }
/* The app-drawn button (Android): the same shape as the primary button, in the outline style. */
.sc-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 44px;
  width: 100%;
  border: 1px solid var(--color-outline);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.sc-btn-google:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.sc-btn-google:disabled { opacity: 0.6; cursor: default; }
.sc-google-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #4285F4;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 0 0 1px var(--color-outline) inset;
}
.sc-google-link-title { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--color-on-surface); }
.sc-google-link-body { margin: 0 0 1rem; font-size: 0.9rem; color: var(--color-secondary); }
/* A button that reads as a link, for actions that must not change the URL. */
.sc-link-btn { background: none; border: none; padding: 0; color: var(--color-primary); font: inherit; font-size: 0.9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sc-link-btn:disabled { opacity: 0.6; cursor: default; }
/* "Continue as Guest": the same pill as the Google button, so the ways in read as one set. */
.sc-btn-guest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  width: 100%;
  border: 1px solid var(--color-outline);
  border-radius: 999px;
  background: transparent;
  color: var(--color-on-surface);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.sc-btn-guest:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.sc-btn-guest:disabled { opacity: 0.6; cursor: default; }
.sc-guest-hint { margin: 0.5rem 0 0; text-align: center; font-size: 0.8rem; color: var(--color-secondary); }
/* A guest's Sign In in the top bar: without .sc-btn-primary's top margin it sits on the bar's centre line. */
.sc-signin-btn { margin-top: 0; white-space: nowrap; }
/* A guest's stand-in for the streak: the invitation to sign in. */
.sc-guest-card { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 1rem; margin-bottom: 1.25rem; }
.sc-guest-card-ic { font-size: 2rem; line-height: 1; }
.sc-guest-card-text { flex: 1 1 220px; min-width: 0; }
.sc-guest-card-text h3 { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--color-on-surface); }
.sc-guest-card-text p { margin: 0; font-size: 0.9rem; color: var(--color-secondary); }
.sc-guest-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sc-guest-card-actions a { display: inline-flex; align-items: center; margin-top: 0; text-decoration: none; white-space: nowrap; }
/* An input with a chip fused to its edge: the verified address on the Google registration form. */
.sc-input-adorned { display: flex; align-items: stretch; }
.sc-input-adorned .sc-input { flex: 1 1 auto; min-width: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.sc-input-adorned .sc-input[readonly] { color: var(--color-secondary); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-background)); }
.sc-input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.7rem;
  border: 1px solid var(--color-outline);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
}
.sc-verified-chip { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); }

/* ---- Users → View Profile: one seeker's practice dashboard ---- */
.sc-modal.sc-modal-form.sc-modal-wide { max-width: 920px; }

.sc-up-head { display: flex; align-items: center; gap: 1rem; }
.sc-up-avatar { width: 60px; height: 60px; border-radius: 16px; font-size: 1.35rem; font-family: var(--font-heading); color: var(--color-primary); }
.sc-up-id { min-width: 0; }
.sc-up-id h2 { margin: 0 0 0.3rem; font-size: 1.35rem; overflow-wrap: anywhere; }
.sc-up-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; font-size: 0.85rem; }
.sc-up-contact { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-secondary); overflow-wrap: anywhere; }

/* Status pills: the dot carries the colour, the label stays in text colour so it reads in both themes. */
.sc-up-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; color: var(--color-on-surface); background: color-mix(in srgb, var(--pill, var(--color-secondary)) 14%, transparent); }
.sc-up-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pill, var(--color-secondary)); flex-shrink: 0; }
.sc-up-pill.is-good { --pill: var(--color-success); }
.sc-up-pill.is-warn { --pill: var(--color-gold); }
.sc-up-pill.is-bad { --pill: var(--color-error); }
.sc-up-pill.is-muted { --pill: var(--color-secondary); }

.sc-up-tabs { margin: 1rem 0 1.1rem; overflow-x: auto; scrollbar-width: none; }
.sc-up-tabs .sc-tab { white-space: nowrap; }

.sc-up-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.sc-up-kpi { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0.75rem 0.85rem; border: 1px solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-surface); }
.sc-up-kpi-l { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); }
.sc-up-kpi-n { font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--color-on-surface); }
.sc-up-kpi-sub { font-size: 0.72rem; color: var(--color-secondary); }
.sc-up-kpi-sub.is-good { font-weight: 600; color: color-mix(in srgb, var(--color-success) 75%, var(--color-on-surface)); }
.sc-up-kpi-sub.is-bad { font-weight: 600; color: var(--color-error); }

.sc-up-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1rem; }
.sc-up-wide { grid-column: 1 / -1; }
.sc-up-panel { min-width: 0; padding: 0.95rem 1.05rem; border: 1px solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface); }
.sc-up-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; margin-bottom: 0.75rem; }
.sc-up-panel-head h3 { margin: 0; font-size: 0.95rem; color: var(--color-on-surface); }
.sc-up-panel-sub { font-size: 0.75rem; color: var(--color-secondary); }
.sc-up-empty { margin: 0.2rem 0; font-size: 0.85rem; }
.sc-up-more { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--color-secondary); }

/* Practice calendar. One hue, the primary mixed into the surface: 46/64/82/100% are the steps that
   keep the lightest at 2:1 against the panel in both themes, so change them together. Level 1 is a
   day counted without finishing a mala. */
.sc-up-heat { display: block; width: 100%; max-width: 560px; height: auto; }
.sc-up-heat-txt { font-size: 9px; font-family: var(--font-body); fill: var(--color-secondary); }
.sc-up-heat rect { fill: var(--heat); stroke: transparent; stroke-width: 1.5; }
.sc-up-heat rect:hover { stroke: var(--color-on-surface); }
.sc-up-heat rect.is-today { stroke: var(--color-on-surface); stroke-width: 1; }
.sc-up-heat-l0 { --heat: color-mix(in srgb, var(--color-on-surface) 8%, var(--color-surface)); }
.sc-up-heat-l1 { --heat: color-mix(in srgb, var(--color-primary) 46%, var(--color-surface)); }
.sc-up-heat-l2 { --heat: color-mix(in srgb, var(--color-primary) 64%, var(--color-surface)); }
.sc-up-heat-l3 { --heat: color-mix(in srgb, var(--color-primary) 82%, var(--color-surface)); }
.sc-up-heat-l4 { --heat: var(--color-primary); }
.sc-up-legend { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 0.7rem; color: var(--color-secondary); }
.sc-up-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--heat); }

.sc-up-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0.6rem 1rem; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--color-outline); }
.sc-up-facts > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sc-up-facts .k { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); }
.sc-up-facts .v { font-size: 0.86rem; color: var(--color-on-surface); }

/* Weekday bars: one series, one colour; only the busiest day is labelled, the rest on hover. The
   chart grows to the height of the calendar beside it rather than leaving a gap under it. */
.sc-up-weekpanel { display: flex; flex-direction: column; }
.sc-up-week { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sc-up-wcol { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; }
.sc-up-wval { min-height: 1em; font-size: 0.72rem; font-weight: 700; line-height: 1; color: var(--color-on-surface); }
.sc-up-wtrack { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 120px; border-bottom: 1px solid var(--color-outline); }
.sc-up-wbar { width: min(26px, 62%); min-height: 4px; border-radius: 4px 4px 0 0; background: var(--color-accent); }
.sc-up-wcol:hover .sc-up-wbar { background: color-mix(in srgb, var(--color-accent) 78%, var(--color-on-surface)); }
.sc-up-wlbl { font-size: 0.7rem; color: var(--color-secondary); }

.sc-up-rank { display: flex; flex-direction: column; gap: 0.7rem; }
.sc-up-rank-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.25rem 0.7rem; }
.sc-up-rank-text { display: flex; flex-direction: column; min-width: 0; }
.sc-up-rank-text .nm { font-size: 0.88rem; font-weight: 600; color: var(--color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-up-rank-text .sub { font-size: 0.74rem; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-up-rank-val { font-size: 0.8rem; font-weight: 700; color: var(--color-on-surface); white-space: nowrap; }
.sc-up-rank-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-on-surface) 7%, transparent); overflow: hidden; }
.sc-up-rank-fill { height: 100%; border-radius: 999px; background: var(--color-accent); }

.sc-up-details { margin-bottom: 0; }

.sc-up-timeline-top { outline: none; scroll-margin-top: 1rem; }
.sc-up-tlsub { margin: 0 0 0.8rem; font-size: 0.85rem; }
.sc-up-tlerror { margin-bottom: 0.8rem; }
.sc-up-timeline { gap: 0.7rem; transition: opacity .15s ease; }
.sc-up-timeline.is-refreshing { opacity: 0.55; pointer-events: none; }
.sc-up-timeline .sc-day-card { padding: 0.85rem 1rem; }

@media (max-width: 760px) {
  .sc-up-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sc-up-head { align-items: flex-start; }
  .sc-up-avatar { width: 48px; height: 48px; border-radius: 13px; font-size: 1.1rem; }
  .sc-up-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-up-legend { margin-left: 0; width: 100%; }
  /* The calendar scales down to fit the sheet, so its labels start larger to land near 9px. */
  .sc-up-heat-txt { font-size: 11px; }
}


/* ================================================================ Calendar (/calendar)
   The month grid, the opened day (side panel on wide screens, sheet on narrow ones), the list view
   and the mark form. Day tints come from the server's good/neutral/caution reading; the three
   content colours are festival (saffron accent), observance (the moon's indigo) and a seeker's own
   marks (violet, with one shade per kind). Everything reads in both themes through the tokens. */
:root {
  --cal-good: #2F7D4F;
  --cal-caution: #B4531B;
  --cal-festival: var(--color-accent);
  --cal-marker: #4E5BA6;
  --cal-mark: #6B4FBB;
}
:root[data-theme="dark"] {
  --cal-good: #7BC48F;
  --cal-caution: #F0A06A;
  --cal-marker: #9AA6E8;
  --cal-mark: #B59CF0;
}

.sc-cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding: 0.7rem 1rem; margin-bottom: 1rem; }
.sc-cal-monthnav { display: flex; align-items: center; gap: 0.3rem; }
.sc-cal-monthnav > button { height: 38px; min-width: 38px; border: 1px solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-on-surface); cursor: pointer; font-size: 1.1rem; transition: border-color .14s ease, background .14s ease; }
.sc-cal-monthnav > button:hover { border-color: var(--color-primary); background: var(--color-primary-container); }
.sc-cal-monthlabel { padding: 0 1rem; font-family: var(--font-heading); font-size: 1.15rem; display: inline-flex; gap: 0.4rem; align-items: baseline; min-width: 13rem; justify-content: center; }
.sc-cal-monthlabel strong { color: var(--color-primary); font-weight: 700; }
.sc-cal-monthlabel span { color: var(--color-secondary); font-size: 0.95rem; }
.sc-cal-toolbar-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sc-cal-region { font-size: 0.88rem; color: var(--color-secondary); padding: 0.3rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px solid var(--glass-border); }

.sc-cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; transition: opacity .15s ease; }
.sc-cal-layout.is-refreshing { opacity: 0.7; }
.sc-cal-main { min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.sc-cal-aside { position: sticky; top: calc(var(--topbar-h, 64px) + 1rem); min-width: 0; }
.sc-cal-aside-card { padding: 1.2rem 1.25rem; max-height: calc(100dvh - var(--topbar-h, 64px) - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.sc-cal-aside-empty { text-align: center; color: var(--color-secondary); font-size: 0.92rem; padding: 2.4rem 1.2rem; }
.sc-cal-aside-empty span { display: block; font-size: 2rem; margin-bottom: 0.4rem; }
.sc-cal-aside-empty p { margin: 0; }

.sc-cal-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; font-size: 0.9rem; color: var(--color-secondary); padding: 0 0.2rem; }
.sc-cal-masam { font-weight: 600; color: var(--color-on-surface); }
.sc-cal-samvat { font-style: italic; }

/* ---- the grid ---- */
.sc-cal-card { padding: 0.9rem; }
.sc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.sc-cal-dow { text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-secondary); padding: 0.2rem 0 0.5rem; }
.sc-cal-dow:first-child, .sc-cal-dow:nth-child(7) { color: var(--cal-caution); }

.sc-cal-cell {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem;
  min-height: 92px; padding: 0.4rem 0.45rem 0.45rem; text-align: left;
  border: 1px solid var(--color-outline); border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-on-surface); font: inherit; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.sc-cal-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
.sc-cal-cell:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.sc-cal-cell.is-empty { border-color: transparent; background: transparent; cursor: default; pointer-events: none; min-height: 0; }
.sc-cal-cell.rating-good { background: color-mix(in srgb, var(--cal-good) 11%, var(--color-surface)); border-color: color-mix(in srgb, var(--cal-good) 35%, var(--color-outline)); }
.sc-cal-cell.rating-caution { background: color-mix(in srgb, var(--cal-caution) 10%, var(--color-surface)); border-color: color-mix(in srgb, var(--cal-caution) 35%, var(--color-outline)); }
.sc-cal-cell.has-festival { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cal-festival) 55%, transparent); }
.sc-cal-cell.is-today { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent); }
.sc-cal-cell.is-today .sc-cal-num { background: var(--gradient-saffron); color: #fff; }
.sc-cal-cell.is-selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }
.sc-cal-cell.no-pchg { border-style: dashed; }

.sc-cal-top { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.sc-cal-num { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; font-family: var(--font-heading); }
.sc-cal-moon { font-size: 0.85rem; opacity: 0.75; line-height: 1; }
.sc-cal-moon.is-key { font-size: 1.15rem; opacity: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25)); }
.sc-cal-tithi { font-size: 0.72rem; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sc-cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-top: auto; }
.sc-cal-chips.wrap { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.sc-cal-chip { display: inline-block; max-width: 100%; font-size: 0.66rem; font-weight: 600; line-height: 1.25; padding: 0.12rem 0.42rem; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; }
.sc-cal-chip.festival { background: color-mix(in srgb, var(--cal-festival) 18%, transparent); color: color-mix(in srgb, var(--cal-festival) 80%, var(--color-on-surface)); border-color: color-mix(in srgb, var(--cal-festival) 35%, transparent); }
.sc-cal-chip.marker { background: color-mix(in srgb, var(--cal-marker) 14%, transparent); color: var(--cal-marker); border-color: color-mix(in srgb, var(--cal-marker) 30%, transparent); }
.sc-cal-chip.mark { background: color-mix(in srgb, var(--cal-mark) 14%, transparent); color: var(--cal-mark); border-color: color-mix(in srgb, var(--cal-mark) 30%, transparent); }
.sc-cal-chip.more { font-weight: 700; }
.sc-cal-chips.wrap .sc-cal-chip { font-size: 0.74rem; padding: 0.2rem 0.55rem; border-radius: 999px; }

.sc-cal-dots { display: none; gap: 3px; justify-content: center; margin-top: auto; }
.sc-cal-dots i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sc-cal-dots i.festival { background: var(--cal-festival); }
.sc-cal-dots i.marker { background: var(--cal-marker); }
.sc-cal-dots i.mark { background: var(--cal-mark); }

/* ---- legend ---- */
.sc-cal-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.8rem; color: var(--color-secondary); padding: 0 0.3rem; }
.sc-cal-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sc-cal-swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1px solid var(--color-outline); }
.sc-cal-swatch.good { background: color-mix(in srgb, var(--cal-good) 30%, var(--color-surface)); border-color: var(--cal-good); }
.sc-cal-swatch.caution { background: color-mix(in srgb, var(--cal-caution) 30%, var(--color-surface)); border-color: var(--cal-caution); }
.sc-cal-swatch.festival { box-shadow: inset 0 0 0 2px var(--cal-festival); }
.sc-cal-swatch.marker { background: var(--cal-marker); border-color: var(--cal-marker); border-radius: 50%; }
.sc-cal-swatch.mark { background: var(--cal-mark); border-color: var(--cal-mark); border-radius: 50%; }
.sc-cal-disclaimer { margin: 0; padding: 0 0.3rem; }

/* ---- rating pill ---- */
.sc-cal-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--color-secondary) 14%, transparent); color: var(--color-secondary); }
.sc-cal-pill.good { background: color-mix(in srgb, var(--cal-good) 16%, transparent); color: var(--cal-good); }
.sc-cal-pill.caution { background: color-mix(in srgb, var(--cal-caution) 16%, transparent); color: var(--cal-caution); }
.sc-cal-pill.lg { font-size: 0.86rem; padding: 0.35rem 0.85rem; margin: 0.6rem 0 0.3rem; }

/* ---- the opened day ---- */
.sc-cal-detail { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.sc-cal-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.sc-cal-detail-date { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-primary); }
.sc-cal-detail-hindu { font-size: 0.88rem; color: var(--color-secondary); margin-top: 0.15rem; }
.sc-cal-moonbig { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; flex-shrink: 0; }
.sc-cal-moonbig span { font-size: 2rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.sc-cal-moonbig small { font-size: 0.68rem; color: var(--color-secondary); white-space: nowrap; }

.sc-cal-reasons { margin: 0; padding: 0 0 0 1.1rem; font-size: 0.85rem; color: var(--color-on-surface); display: flex; flex-direction: column; gap: 0.15rem; }
.sc-cal-reasons li::marker { color: var(--color-primary); }

.sc-cal-section { border-top: 1px solid color-mix(in srgb, var(--color-outline) 70%, transparent); padding-top: 0.7rem; margin-top: 0.5rem; }
.sc-cal-section h4 { margin: 0 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-secondary); }
.sc-cal-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.sc-cal-section-head h4 { margin: 0; }

.sc-cal-festival { padding: 0.55rem 0.7rem; border-radius: 12px; background: color-mix(in srgb, var(--cal-festival) 9%, transparent); border: 1px solid color-mix(in srgb, var(--cal-festival) 28%, transparent); margin-bottom: 0.45rem; }
.sc-cal-festival-name { font-weight: 700; color: color-mix(in srgb, var(--cal-festival) 80%, var(--color-on-surface)); }
.sc-cal-festival-desc { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--color-secondary); }

.sc-cal-deities { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.sc-cal-deity { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem 0.2rem 0.2rem; border-radius: 999px; background: color-mix(in srgb, var(--color-surface) 90%, transparent); border: 1px solid var(--glass-border); font-size: 0.8rem; font-weight: 600; }
.sc-cal-deity-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--gradient-saffron); color: #fff; font-size: 0.8rem; flex-shrink: 0; }
.sc-cal-deity-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sc-cal-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sc-cal-event { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0.6rem; border-radius: 12px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--cal-mark) 6%, transparent); }
.sc-cal-event .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0; background: var(--cal-mark); }
.sc-cal-event-body { flex: 1; min-width: 0; }
.sc-cal-event-title { font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.sc-cal-event-sub { font-size: 0.76rem; color: var(--color-secondary); display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sc-cal-event-notes { font-size: 0.82rem; margin-top: 0.2rem; white-space: pre-line; overflow-wrap: anywhere; }
.sc-cal-event-actions { display: flex; gap: 0.2rem; flex-shrink: 0; }
.sc-cal-event-actions .sc-btn-sm { padding: 0.25rem 0.5rem; }
.sc-cal-nomarks, .sc-cal-guest { margin: 0; font-size: 0.86rem; }
.sc-cal-guest a { font-weight: 600; margin-left: 0.3rem; }

/* One hue per kind, on the dot and the chip. */
.kind-puja .dot, .sc-cal-chip.mark.kind-puja { --cal-mark: #C0631A; }
.kind-vratam .dot, .sc-cal-chip.mark.kind-vratam { --cal-mark: #2F7D4F; }
.kind-festival .dot, .sc-cal-chip.mark.kind-festival { --cal-mark: #D4A017; }
.kind-birthday .dot, .sc-cal-chip.mark.kind-birthday { --cal-mark: #C0398A; }
.kind-anniversary .dot, .sc-cal-chip.mark.kind-anniversary { --cal-mark: #1F7A8C; }
.kind-shraddha .dot, .sc-cal-chip.mark.kind-shraddha { --cal-mark: #5B5B6B; }

.sc-cal-pchg .sc-pchg-row { padding: 0.35rem 0; font-size: 0.84rem; }
.sc-cal-pchg .sc-pchg-row .v { overflow-wrap: anywhere; }
.sc-cal-pchg-link { display: inline-block; margin-top: 0.5rem; font-weight: 600; font-size: 0.88rem; }

/* ---- list view ---- */
.sc-cal-list { display: flex; flex-direction: column; gap: 0.6rem; }
.sc-cal-list-row { flex-direction: row; align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.sc-cal-list-row.rating-good { border-left: 4px solid var(--cal-good); }
.sc-cal-list-row.rating-caution { border-left: 4px solid var(--cal-caution); }
.sc-cal-list-row.is-today .sc-tile-date { background: var(--gradient-saffron); }
.sc-cal-list-row.is-today .sc-tile-day, .sc-cal-list-row.is-today .sc-tile-mon { color: #fff; }
.sc-cal-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.sc-cal-list-line { font-size: 0.88rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sc-cal-list-row .sc-cal-pill { flex-shrink: 0; }

/* ---- narrow screens: the panel goes, the sheet takes over; cells shrink to dots ---- */
@media (max-width: 820px) {
  .sc-cal-layout { grid-template-columns: minmax(0, 1fr); }
  .sc-cal-aside { display: none; }
}
@media (max-width: 560px) {
  .sc-cal-toolbar { padding: 0.55rem 0.7rem; }
  .sc-cal-monthlabel { min-width: 0; padding: 0 0.5rem; font-size: 1rem; }
  .sc-cal-card { padding: 0.5rem; }
  .sc-cal-grid { gap: 3px; }
  .sc-cal-cell { min-height: 58px; padding: 0.25rem 0.25rem 0.3rem; gap: 0.1rem; border-radius: 9px; }
  .sc-cal-num { min-width: 1.45rem; height: 1.45rem; font-size: 0.85rem; }
  .sc-cal-moon { font-size: 0.7rem; }
  .sc-cal-moon.is-key { font-size: 0.95rem; }
  .sc-cal-tithi, .sc-cal-chips:not(.wrap) { display: none; }
  .sc-cal-dots { display: flex; }
  .sc-cal-list-row .sc-cal-pill { display: none; }
  .sc-cal-detail-head { flex-wrap: wrap; }
}