/* ============================================================================
   Mobile skin

   Loaded after theme.css and app.css by the MAUI host, and by the web host so
   that flipping Platform to Mobile in wwwroot/appsettings.json gives an accurate
   preview in a browser's device emulation.

   EVERY rule below is scoped to .scm-* — the classes only MobileLayout renders.
   Nothing here may style body, html or a bare .sc-* class, or the web app would
   inherit a phone's design by merely having the file linked. Genuinely host-level
   concerns (WebView overscroll, the Blazor error strip) live in the MAUI host's
   index.html instead, where they belong.

   It is a skin, not a second design system: every colour resolves through the
   same tokens theme.css defines, so light/dark and any future palette change
   follow automatically.

   The look is crisp rather than soft: one spacing step, one radius per role, a
   visible hairline on every edge, and a shallow two-stop elevation ramp. Large
   blurred shadows and deep frosting read as mush on a 400px screen — precision
   is what reads as expensive there, so effects are rationed and alignment is not.
   ============================================================================ */

:root {
  /* Chrome heights, published as variables because three separate things need
     to reserve exactly this much space and a magic number in each would drift. */
  --scm-topbar-h: 56px;
  --scm-bottomnav-h: 60px;

  /* Safe areas resolved once. env() cannot be used inside a shorthand alongside
     max() everywhere, and naming them keeps the call sites readable. */
  --scm-safe-top: env(safe-area-inset-top, 0px);
  --scm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --scm-safe-left: env(safe-area-inset-left, 0px);
  --scm-safe-right: env(safe-area-inset-right, 0px);

  /* ---- The rhythm ----
     ONE gutter, ONE card padding, ONE gap between cards. app.css sets five
     different card paddings (1.5rem / 1.1rem 1.25rem / 1.15rem 0.9rem /
     0.85rem 1rem / 0.7rem 0.9rem); on a wide screen that variety reads as
     texture, but at 375px it reads as misalignment, because the left edge of
     every card's text lands somewhere different. These flatten it. */
  --scm-gutter: 16px;
  --scm-card-pad: 16px;
  --scm-gap: 12px;

  /* Two radii, by role. Cards and anything card-sized share one; controls,
     chips and inner tiles share the other. Nothing in between. */
  --scm-r-card: 18px;
  --scm-r-inner: 12px;
  --scm-sheet-radius: 24px;

  /* Surfaces. Less transparent and less blurred than a desktop glass panel —
     text sitting over a scrolling page has to stay legible at arm's length. */
  --scm-chrome: color-mix(in srgb, var(--color-surface) 88%, transparent);
  --scm-chrome-solid: var(--color-surface);
  --scm-blur: saturate(150%) blur(12px);

  /* A hairline you can actually see. --color-outline is tuned for a large
     screen at reading distance and disappears at phone density, which is what
     makes card edges look undefined. */
  --scm-hairline: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --scm-hairline-soft: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --scm-tint: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --scm-tint-strong: color-mix(in srgb, var(--color-primary) 15%, transparent);

  /* Muted text that is still text. --color-secondary is the app's muted tone and reads at 6:1 on
     a light card, so here it is used as is; dark mode redefines this below, because there the
     same token is an orange that only reaches 3.7:1. */
  --scm-text-muted: var(--color-secondary);

  /* Saffron that white text can sit on. White on --gradient-saffron's light end (#C0631A) is
     4.2:1 — under AA for anything smaller than a heading — so every saffron surface carrying
     small white text puts a 20% umber veil over the gradient, which lifts it to 5.3:1 while
     leaving the colour recognisably the app's own. */
  --scm-saffron-deep: linear-gradient(rgba(61, 33, 10, 0.2), rgba(61, 33, 10, 0.2)), var(--gradient-saffron);

  /* Two stops only: resting and lifted. Both are tight and low-opacity, so an
     edge stays an edge instead of dissolving into its own shadow. */
  --scm-elev-1: 0 1px 2px rgba(61, 33, 10, 0.06), 0 2px 8px -6px rgba(61, 33, 10, 0.18);
  --scm-elev-2: 0 2px 4px rgba(61, 33, 10, 0.08), 0 10px 24px -14px rgba(61, 33, 10, 0.32);
}

:root[data-theme="dark"] {
  /* Shadows vanish on a dark surface; the hairline has to carry the edge instead. */
  --scm-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --scm-elev-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.65);
  --scm-hairline: color-mix(in srgb, var(--color-primary) 26%, transparent);
  --scm-hairline-soft: color-mix(in srgb, var(--color-primary) 15%, transparent);
  /* The dark secondary (#C05C11) pulled 30% toward the text colour: still the same warm hue,
     but 5.8:1 on the card instead of 3.7:1, and above 5:1 on the tinted tiles too. */
  --scm-text-muted: color-mix(in srgb, var(--color-secondary) 70%, var(--color-on-surface));
}

/* ---------------------------------------------------------------- foundations */

.scm-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  /* Radial saffron washes behind everything, so even an empty screen has depth.
     On the shell rather than on body: this file is linked by the web host too,
     and a bare `body` rule would repaint the desktop app as well. The shell is
     full-bleed and at least a viewport tall, so the result is identical.
     Fixed attachment keeps the light source still while content scrolls past. */
  background-image:
    radial-gradient(120% 60% at 50% -10%, var(--scm-tint) 0%, transparent 60%),
    var(--pattern-mandala);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, repeat;
}

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

.scm-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  min-height: var(--scm-topbar-h);
  padding: 0.35rem var(--scm-gutter);
  padding-top: max(0.35rem, var(--scm-safe-top));
  padding-left: max(var(--scm-gutter), var(--scm-safe-left));
  padding-right: max(var(--scm-gutter), var(--scm-safe-right));

  /* Flat and translucent, not a gradient. A vertical wash inside a 56px bar
     only shows up as a smudge, and it fought the page scrolling behind it. */
  background: var(--scm-chrome);
  -webkit-backdrop-filter: var(--scm-blur);
          backdrop-filter: var(--scm-blur);
  /* Hairline, then a 1px light catch beneath it — the whole edge treatment. */
  border-bottom: 1px solid var(--scm-hairline);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

:root[data-theme="dark"] .scm-topbar { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); }

/* backdrop-filter is the whole point of the translucency; where it is missing
   the bar must be opaque or the page would scroll through it illegibly. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .scm-topbar { background: var(--scm-chrome-solid); }
}

.scm-topbar-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }

.scm-topbar-brand .sc-om {
  background: var(--gradient-gold);
  color: #fff;
  /* A tight ring instead of a glow: the glow bled into the title beside it. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-gold) 55%, transparent), var(--scm-elev-1);
  flex-shrink: 0;
}

.scm-topbar-titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.scm-topbar-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
  /* One line, always: a wrapping title would change the bar's height mid-session. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.scm-topbar-sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* The muted token, not secondary at 78% alpha: that was 2.7:1 on the dark bar at 10px. */
  color: var(--scm-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.scm-topbar-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }

/* A guest's Sign In, where a seeker has the bell and the avatar: 44px tall like them. */
.scm-shell .scm-signin-btn { min-height: 44px; padding-inline: 0.9rem; }

/* ---------------------------------------------------------------- avatar */

.scm-avatar-btn {
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px;
  padding: 0; border: none; background: none; cursor: pointer;
}

.scm-avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 13px;
  background: var(--gradient-saffron);
  color: #fff;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.scm-avatar-btn:active .scm-avatar { transform: scale(0.94); }

/* ---------------------------------------------------------------- notifications */

.scm-bell {
  position: relative;
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px;
  padding: 0; border: none; background: none; cursor: pointer;
  font-size: 1.25rem; line-height: 1;
  color: var(--color-on-surface);
}

.scm-bell-ic { display: block; }

/* Three swings, then still.
   `infinite` here was a permanent repaint on every screen of the app: the bell sits in the top
   bar, which is a backdrop-filter surface, so each frame re-blurred the strip behind it for as
   long as any reminder was active — i.e. most of the day. Three iterations draw the eye once,
   which is all the animation was for. */
.scm-bell.has-active .scm-bell-ic {
  animation: scm-bell-swing 4.5s ease-in-out 3;
  transform-origin: 50% 12%;
}

.scm-bell-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--scm-chrome-solid);
}

@keyframes scm-bell-swing {
  0%, 88%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(11deg); }
  93% { transform: rotate(-9deg); }
  96% { transform: rotate(5deg); }
}

.scm-panel-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  /* A drag on a fixed overlay still scrolls the document beneath it. The sheets hold the JS
     scroll lock; this panel is lighter-weight and does not, so it refuses the gesture instead. */
  touch-action: none;
}

/* Anchored under the bar rather than centred: it belongs to the bell it came
   from, and a centred dialog would read as a separate screen. */
.scm-panel {
  position: fixed;
  z-index: 40;
  top: calc(max(0.4rem, var(--scm-safe-top)) + var(--scm-topbar-h) - 0.25rem);
  left: max(0.6rem, var(--scm-safe-left));
  right: max(0.6rem, var(--scm-safe-right));
  /* The last term is what keeps it clear of the bottom navigation. 72dvh alone
     is fine in portrait but in landscape (812x375) it resolved to 270px, which
     put the panel's lower edge 13px past the top of the bar — the panel painted
     over the nav because it is the higher layer. Now it stops above it. */
  max-height: min(72dvh, 620px, calc(100dvh
      - var(--scm-topbar-h) - var(--scm-bottomnav-h)
      - var(--scm-safe-top) - var(--scm-safe-bottom) - 1.5rem));
  display: flex; flex-direction: column;

  background: var(--color-surface);
  border: 1px solid var(--scm-hairline);
  border-radius: var(--scm-r-card);
  box-shadow: var(--scm-elev-2);
  overflow: hidden;
  animation: scm-drop 0.18s ease-out;
}

@keyframes scm-drop {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.scm-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1rem 0.7rem;
  background: linear-gradient(180deg, var(--color-primary-container) 0%, transparent 100%);
  border-bottom: 1px solid var(--color-outline);
}
.scm-panel-head h2 { margin: 0; font-size: 1.02rem; font-family: var(--font-heading); color: var(--color-on-surface); }
.scm-panel-sub { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--color-secondary); }

.scm-panel-x, .scm-sheet-x {
  min-width: 40px; min-height: 40px;
  display: grid; place-items: center;
  border: none; background: none; cursor: pointer;
  font-size: 1rem; color: var(--color-secondary);
  border-radius: 12px;
}
.scm-panel-x:active, .scm-sheet-x:active { background: var(--scm-tint); }

.scm-panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem; }
.scm-panel-foot {
  padding: 0.7rem 1rem;
  padding-bottom: max(0.7rem, var(--scm-safe-bottom));
  border-top: 1px solid var(--color-outline);
  background: var(--color-surface-2);
}
.scm-panel-foot .sc-btn-primary { display: block; text-align: center; text-decoration: none; }

.scm-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.scm-notif {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid transparent;
}
.scm-notif.on {
  background: linear-gradient(135deg, var(--scm-tint-strong), transparent 70%), var(--color-surface-2);
  border-color: var(--scm-hairline);
}
.scm-notif.off { opacity: 0.68; }

.scm-notif-ic { font-size: 1.15rem; line-height: 1.3; flex-shrink: 0; }
.scm-notif-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.scm-notif-text strong { font-size: 0.92rem; color: var(--color-on-surface); }
.scm-notif-desc { font-size: 0.8rem; color: var(--color-secondary); }
.scm-notif-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; margin-top: 0.15rem; }
.scm-notif-live { color: var(--color-success); font-weight: 600; }
.scm-notif-off { color: var(--color-secondary); }
.scm-notif-window {
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  background: var(--scm-tint);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
}

/* ---------------------------------------------------------------- content */

/* One vertical step between every top-level block, expressed as a flex `gap`
   rather than as sibling margins.

   `> * + * { margin-top }` looked equivalent and was not, in two ways:

   1. In a block container, adjacent margins COLLAPSE — the step became
      max(previous bottom margin, 12px) rather than 12px. app.css gives these
      children margin-bottoms of 1rem, 1.6rem, 1.8rem and 2rem, so the result
      was a floor, not a rhythm, and every one of those values had to be zeroed
      by hand. Missing one (.sc-prayergrid) left a 25.6px boundary next to a
      5.6px one on the home screen. Flex items do not collapse margins.

   2. It matched out-of-flow children too. Pages render their modal as a
      root-level sibling, so `.sc-modal-backdrop` (position: fixed; inset: 0)
      picked up a 12px margin-top; on an over-constrained absolutely-positioned
      box that is resolved by SHRINKING the height, so the scrim covered
      800px of an 812px screen. The 12px band at the top did not dim and,
      carrying no click handler, swallowed taps meant to dismiss the dialog.
      Fixed and absolute children are not flex items, so `gap` cannot touch them.

   The blanket margin-bottom reset is safe here for the same reason: it only
   reaches real flex items. */
.scm-content {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--scm-gap);

  padding: var(--scm-gutter);
  padding-left: max(var(--scm-gutter), var(--scm-safe-left));
  padding-right: max(var(--scm-gutter), var(--scm-safe-right));
  /* Clear the fixed bottom bar and the home indicator beneath it, or the last
     card of every list ends up permanently unreachable. */
  padding-bottom: calc(var(--scm-bottomnav-h) + var(--scm-safe-bottom) + 1.25rem);
}

.scm-content > * {
  /* app.css:180 sets `.sc-content > * { max-width: 1440px; margin-inline: auto }`
     to cap the reading measure on a wide monitor. Both have to go here.

     The auto margin especially: under block layout it resolves to 0 and does
     nothing, but a flex item with an auto inline margin does not stretch — it
     shrink-wraps and centres. That silently narrowed exactly the blocks whose
     intrinsic width is small (.sc-bhakti to 259px, .sc-catgrid to 149px in a
     343px column) while leaving the rest full-width. */
  max-width: none;
  margin-inline: 0;
  /* The gap owns the vertical spacing now, so each component's own goes. */
  margin-bottom: 0;
}

/* A section heading belongs to the block under it, so it sits closer to that
   block than to the one above. The gap supplies 12px; the negative bottom
   margin pulls the following block back to ~5px without reintroducing the
   collapse problem, because a flex item's own margins still apply normally. */
.scm-shell .sc-section-head {
  margin: 0.35rem 0 -0.45rem;
  align-items: baseline;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------- bottom nav */

.scm-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;

  min-height: var(--scm-bottomnav-h);
  padding: 0.25rem max(0.25rem, var(--scm-safe-left)) 0;
  padding-right: max(0.25rem, var(--scm-safe-right));
  padding-bottom: var(--scm-safe-bottom);

  background: var(--scm-chrome);
  -webkit-backdrop-filter: var(--scm-blur);
          backdrop-filter: var(--scm-blur);
  border-top: 1px solid var(--scm-hairline);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .scm-bottomnav { background: var(--scm-chrome-solid); }
}

.scm-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem;
  /* 2px of side padding, not 1.6px: five tabs across 375px leaves 75px each, and
     "User Dashboard" needs ~71px at this size. Any more padding truncated it. */
  padding: 0.3rem 2px 0.3rem;
  border: none; background: none; cursor: pointer;
  /* The muted token rather than --color-secondary, whose dark orange left the tab labels at 3.6:1. */
  color: var(--scm-text-muted);
  text-decoration: none;
  font: inherit;
  border-radius: var(--scm-r-inner);
  transition: color 0.16s ease;
}
.scm-tab:hover { text-decoration: none; }

.scm-tab-ic { font-size: 1.2rem; line-height: 1.1; }

.scm-tab-label {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The active pill sits behind the icon rather than under the label, so a long
   translated label cannot stretch or break it. */
.scm-tab.active { color: var(--color-primary); }
.scm-tab.active::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  width: 42px; height: 28px;
  border-radius: 999px;
  background: var(--scm-tint-strong);
  box-shadow: inset 0 0 0 1px var(--scm-hairline);
}
/* The icon just sits on the pill. The drop-shadow that used to be here smeared
   an emoji's own colours and made the active tab look blurred, not lit. */
.scm-tab.active .scm-tab-ic { position: relative; }

.scm-tab:active { transform: scale(0.94); }

.scm-tab-count {
  position: absolute;
  top: 0.15rem; right: 50%;
  transform: translateX(1.15rem);
  min-width: 16px; height: 16px;
  padding: 0 3px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-background);
  font-size: 0.58rem; font-weight: 700; line-height: 1;
}

/* Skeleton tabs hold the bar's height while the menu loads. */
.scm-tab.is-skeleton { pointer-events: none; }
.scm-tab.is-skeleton .scm-tab-ic,
.scm-tab.is-skeleton .scm-tab-label {
  border-radius: 999px;
  background: var(--scm-tint-strong);
  animation: scm-pulse 1.4s ease-in-out infinite;
}
.scm-tab.is-skeleton .scm-tab-ic { width: 22px; height: 22px; }
.scm-tab.is-skeleton .scm-tab-label { width: 34px; height: 8px; }

@keyframes scm-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }

/* A phone that never reaches the API keeps the skeleton on screen indefinitely, so the pulse is
   bounded: after ~20 iterations it settles rather than animating at 60fps until the app closes. */
.scm-tab.is-skeleton .scm-tab-ic,
.scm-tab.is-skeleton .scm-tab-label { animation-iteration-count: 20; }

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

.scm-sheet-scrim {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: scm-fade 0.18s ease-out;
  /* Belt and braces with the JS scroll lock: the lock cannot engage until the next render, and a
     fast thumb can start dragging inside that window. */
  touch-action: none;
}

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

.scm-sheet {
  position: fixed;
  z-index: 45;
  left: 0; right: 0; bottom: 0;
  max-height: 88dvh;
  display: flex; flex-direction: column;

  background: var(--color-surface);
  border-radius: var(--scm-sheet-radius) var(--scm-sheet-radius) 0 0;
  box-shadow: var(--shadow-lg);
  animation: scm-rise 0.22s cubic-bezier(0.2, 0.9, 0.25, 1);
  overflow: hidden;
}

@keyframes scm-rise {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* The centred variant gets its own name rather than a same-named @keyframes redeclared inside the
   media query. Duplicate @keyframes names resolve by document order, and a redefinition nested in
   a media query is a cascade subtlety no reader should have to reason about to know which one is
   in force. Two names, one meaning each. */
@keyframes scm-rise-centred {
  from { transform: translate(-50%, 100%); }
  to   { transform: translateX(-50%); }
}

/* The grabber is a real button, not decoration: it is the affordance a thumb
   reaches for, so it must also dismiss and must be reachable by a screen reader. */
.scm-sheet-grab {
  align-self: center;
  width: 100%; max-width: 120px;
  height: 26px;
  border: none; background: none; cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.scm-sheet-grab::before {
  content: "";
  width: 42px; height: 4px;
  border-radius: 999px;
  background: var(--color-outline);
}

.scm-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0.75rem 0.6rem 1.1rem;
  border-bottom: 1px solid var(--color-outline);
  flex-shrink: 0;
}
.scm-sheet-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  color: var(--color-on-surface);
}

.scm-sheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.9rem 1rem;
  padding-bottom: max(1.4rem, calc(var(--scm-safe-bottom) + 0.9rem));
}

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

.scm-more-loading { display: grid; place-items: center; padding: 2rem 0; }

.scm-quickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.scm-quick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem 0.4rem;
  min-height: 84px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-surface-2) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-outline);
  box-shadow: var(--shadow-sm);
  color: var(--color-on-surface);
  text-decoration: none;
  text-align: center;
}
.scm-quick:hover { text-decoration: none; }
.scm-quick:active { transform: scale(0.96); }
.scm-quick.active {
  border-color: var(--color-primary);
  background: linear-gradient(160deg, var(--scm-tint-strong) 0%, var(--color-surface) 100%);
}

.scm-quick-ic { font-size: 1.5rem; line-height: 1; }
.scm-quick-label {
  font-size: 0.72rem; font-weight: 600; line-height: 1.2;
  /* Two lines then ellipsis: "Download Wallpapers" must not push the tile taller
     than its neighbours and break the grid's rhythm. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.scm-more-tree { display: flex; flex-direction: column; gap: 1.1rem; }

.scm-group-head {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.45rem;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-secondary);
}
.scm-group-ic { font-size: 0.95rem; }

.scm-rows { list-style: none; margin: 0; padding: 0; }

.scm-row {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 52px;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-on-surface);
  text-decoration: none;
  margin-bottom: 0.35rem;
  border: 1px solid transparent;
}
.scm-row:hover { text-decoration: none; }
.scm-row:active { background: var(--scm-tint-strong); }
.scm-row.active {
  background: linear-gradient(90deg, var(--scm-tint-strong), transparent);
  border-color: var(--scm-hairline);
  color: var(--color-primary);
  font-weight: 600;
}
.scm-row-ic { width: 1.4rem; text-align: center; font-size: 1.05rem; }
.scm-row-label { flex: 1; min-width: 0; font-size: 0.93rem; }
.scm-row-chev { color: var(--color-secondary); font-size: 1.1rem; }

.scm-empty { text-align: center; padding: 1.8rem 1rem; color: var(--color-secondary); }
.scm-empty-om { font-size: 2.4rem; margin-bottom: 0.5rem; }
.scm-empty p { margin: 0.3rem 0; font-size: 0.9rem; }

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

.scm-acct-hero {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
  border-radius: var(--radius-lg);
  background: var(--gradient-hero), var(--color-surface-2);
  border: 1px solid var(--scm-hairline);
  box-shadow: var(--shadow-sm);
}

.scm-acct-avatar {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 20px;
  background: var(--gradient-saffron);
  color: #fff;
  font-size: 1.25rem; font-weight: 700;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}

.scm-acct-id { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.scm-acct-id strong { font-size: 1.05rem; font-family: var(--font-heading); color: var(--color-on-surface); }
.scm-acct-id .sc-muted { font-size: 0.8rem; }

.scm-acct-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.scm-acct-stat {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.65rem 0.35rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-outline);
}
.scm-acct-stat.hot {
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-gold) 26%, transparent), transparent 75%), var(--color-surface-2);
  border-color: color-mix(in srgb, var(--color-gold) 45%, transparent);
}
.scm-acct-stat .n { font-size: 1.05rem; font-weight: 700; color: var(--color-on-surface); font-variant-numeric: tabular-nums; }
.scm-acct-stat .l { font-size: 0.66rem; color: var(--color-secondary); text-align: center; }

.scm-acct-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  min-height: 52px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-md);
  background: var(--gradient-saffron);
  color: var(--color-on-primary);
  font-size: 0.92rem; font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-glow);
}
.scm-acct-cta:hover { text-decoration: none; color: var(--color-on-primary); }
.scm-acct-cta:active { transform: scale(0.985); }
.scm-acct-cta .scm-row-chev { color: inherit; opacity: 0.85; }

.scm-acct-section { margin-bottom: 1.1rem; }
.scm-acct-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-secondary);
}

.scm-acct-pref {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 52px;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.35rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.scm-acct-pref-label { font-size: 0.93rem; color: var(--color-on-surface); }

/* The pickers were sized for a desktop bar; in a sheet row they get the space. */
.scm-acct-pref .sc-regionpick,
.scm-acct-pref .sc-langpick { max-width: 58%; }
.scm-acct-pref .sc-regionpick-select,
.scm-acct-pref .sc-langpick-select { max-width: 100%; }

.scm-acct-logout {
  width: 100%;
  min-height: 50px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  color: var(--color-error);
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
}
.scm-acct-logout:active { background: color-mix(in srgb, var(--color-error) 20%, transparent); }

.scm-acct-about {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-secondary);
  opacity: 0.8;
}

/* ============================================================================
   The shared page styles, retuned for a phone.

   The rule here is one card, one padding, one radius, one edge. app.css varies
   all four per component — good texture on a wide canvas, visible misalignment
   in a single 343px column, because every card's text then starts at a
   different x. Everything below either enforces the rhythm or fixes a component
   whose desktop shape does not survive the narrower box.
   ============================================================================ */

/* ---- Cards: one shape ---- */

.scm-shell .sc-card {
  padding: var(--scm-card-pad);
  border-radius: var(--scm-r-card);
  background: var(--color-surface);
  border: 1px solid var(--scm-hairline-soft);
  box-shadow: var(--scm-elev-1);
  /* app.css frosts cards at blur(6px). Over a patterned background that turns
     every card face slightly muddy, and it costs a compositor layer per card. */
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Variants that set their own padding in app.css. Listed rather than handled by
   a blanket !important so each one stays greppable from its own component. */
.scm-shell .sc-bhakti,
.scm-shell .sc-cat-card,
.scm-shell .sc-prayer-card,
.scm-shell .sc-pchg-mini,
.scm-shell .sc-compact.sc-card,
.scm-shell .sc-prefcard { padding: var(--scm-card-pad); }

/* app.css gives several of these a bottom margin of their own; the shell's
   `> * + *` step already spaces them, and the two together double up. */
.scm-shell .sc-bhakti,
.scm-shell .sc-catgrid,
.scm-shell .sc-prefcard { margin-bottom: 0; }

/* The dashboard hero is the first thing a seeker sees, so it gets more depth — but NOT a new
   background. The whole hero is white-on-saffron by construction: app.css gives it
   `color: #fff`, an ::after ॐ watermark at rgba(255,255,255,0.09), a .sc-hero-om tile at
   rgba(255,255,255,0.16) and .sc-pill chips at rgba(255,255,255,0.18). Replacing the saffron
   with a cream wash leaves every one of those white-on-cream — an apparently blank card.
   So the saffron stays and the enrichment is layered over it. */
.scm-shell .sc-hero {
  border-radius: var(--radius-lg);
  /* A soft top-left sheen composited above the saffron, which remains the base layer. */
  background-image:
    radial-gradient(120% 90% at 8% -20%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
    var(--gradient-saffron);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ::after already carries the logo watermark, so the rim light goes on ::before. */
.scm-shell .sc-hero::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.8;
  z-index: 1;
}

.scm-shell .sc-page-head { margin-bottom: 0.25rem; }
.scm-shell .sc-page-head h1 { font-size: 1.2rem; letter-spacing: -0.015em; }
.scm-shell .sc-page-sub { font-size: 0.8rem; }

/* Section headings read as a label for the block beneath, not as a second title
   competing with the page heading. 12px rather than 11.5: it is the one line that names
   each block, and at arm's length the half pixel is the difference between read and guessed. */
.scm-shell .sc-section-head h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--scm-text-muted);
  font-family: var(--font-body);
}
.scm-shell .sc-section-sub { display: none; }

/* Numbers line up in a column when they are tabular. Streak counts, malas, day
   counts and clock times all stack vertically on a phone, where a proportional
   "1" against a "0" is the difference between a list and a ledger. */
.scm-shell .sc-streak-num,
.scm-shell .sc-streak-stat .n,
.scm-shell .scm-acct-stat .n,
.scm-shell .sc-stat-value,
.scm-shell .sc-tile-day { font-variant-numeric: tabular-nums; }

/* ---- Daily Darshan: a carousel, not a column ----

   app.css lays these out as `repeat(auto-fill, minmax(min(180px, 100%), 1fr))`
   with a 4/5 image. At 343px of content width two 180px tracks plus the gap
   need 376px, so it falls to ONE column — and each card becomes 343px wide by
   492px tall. Five of them is 2,460px of scrolling for what is a browse strip.

   A snap carousel is both the smaller and the more native answer: one screen
   row, a card and a half visible so the overflow is self-evident, and it bleeds
   to the display edges, which is where the premium of the pattern comes from. */
.scm-shell .sc-darshan {
  display: flex;
  gap: var(--scm-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Cancel the page gutter, then re-apply it as padding so the first and last
     cards still align with the text column while the strip runs edge to edge. */
  margin-inline: calc(var(--scm-gutter) * -1);
  padding-inline: var(--scm-gutter);
  padding-block: 2px;
  scroll-padding-inline: var(--scm-gutter);
  scrollbar-width: none;
}
.scm-shell .sc-darshan::-webkit-scrollbar { display: none; }

.scm-shell .sc-darshan-card {
  flex: 0 0 60%;
  max-width: 220px;
  scroll-snap-align: start;
  border-radius: var(--scm-r-card);
  border: 1px solid var(--scm-hairline-soft);
  box-shadow: var(--scm-elev-1);
}
.scm-shell .sc-darshan-img { aspect-ratio: 1 / 1; }
.scm-shell .sc-darshan-card figcaption { padding: 0.6rem 0.7rem 0.7rem; gap: 0.1rem; }
.scm-shell .sc-darshan-card figcaption strong { font-size: 0.92rem; }
.scm-shell .sc-darshan-card figcaption span {
  font-size: 0.72rem;
  /* Two lines then stop, so one long mantra cannot make its card taller than
     its neighbours and leave the row ragged. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Chant categories: the same strip ----

   app.css makes these a grid of 150px-minimum cards with a 1.8rem mala glyph on
   each. In a 358px column that is two 107px-tall cards per row — 346px for six
   categories — and at 320px one per row, 704px. It is a browse list, not the
   page's content, so it gets the Darshan treatment: one row, bleeding to the
   display edges, the next card peeking in. Lives here rather than with the
   home screen's rules because the tablet block below has to restate its bleed,
   and a later rule of the same specificity would override that restatement. */
.scm-shell .sc-catgrid {
  display: flex;
  gap: var(--scm-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--scm-gutter) * -1);
  padding-inline: var(--scm-gutter);
  /* overflow-x: auto clips overflow-y too, so the bottom leaves room for --scm-elev-1's ~4px. */
  padding-block: 2px 5px;
  scroll-padding-inline: var(--scm-gutter);
  scrollbar-width: none;
}
.scm-shell .sc-catgrid::-webkit-scrollbar { display: none; }

/* Sized by the name, between a floor that keeps short names ("Bhajan") from
   making a sliver and a cap that makes a long one wrap instead of filling the
   screen. Still a whole card, so the entire tile is the tap target. Left-aligned
   like every other card's text; the tint says "browse" without competing with
   the white cards above. */
.scm-shell .sc-cat-card {
  flex: none;
  min-width: 128px;
  max-width: 200px;
  min-height: 72px;
  justify-content: center;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  scroll-snap-align: start;
  padding: 0.75rem var(--scm-card-pad);
  background: linear-gradient(var(--scm-tint), var(--scm-tint)), var(--color-surface);
  transition: transform 0.12s ease, background-color 0.12s ease;
}
/* The same mala on all six cards says nothing the section heading does not. */
.scm-shell .sc-cat-ic { display: none; }
.scm-shell .sc-cat-name { font-size: 0.98rem; line-height: 1.2; }
.scm-shell .sc-cat-count {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--scm-text-muted);
}

/* ---- Never truncate the information the page exists to show ----

   app.css nowrap-and-ellipsises these because they sit on one line in a wide
   card. In a phone column that clipped the actual answer: the Panchangam tithi
   rendered as "Chaturdasi upto 01:53, 12 Aug, A…" (379px of text in a 214px
   box) and prayer windows lost their end time. A name may be ellipsised — a
   value may not. */
.scm-shell .sc-pchg-mini-fact .v,
.scm-shell .sc-prayer-time,
.scm-shell .sc-prayer-name,
.scm-shell .sc-pchg-mini-head {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* .sc-prayer-name is in that list because a chant's name is how the seeker
   recognises it — "Brahmarpanam Brahma Havir" clipped to "…Brahma H…" at 320px
   is a different kind of loss from a truncated label. The card grows a line. */
.scm-shell .sc-pchg-mini-fact {
  /* Key above value rather than beside it: side by side, the key ate a third of
     the width and the value wrapped after two words. */
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  width: 100%;
}
.scm-shell .sc-pchg-mini-fact .k {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--scm-text-muted);
}
/* The key is a caption for the value under it, so the pair sits tight and the facts are
   separated by the larger step. */
.scm-shell .sc-pchg-mini-fact .v { line-height: 1.25; }
.scm-shell .sc-pchg-mini-facts { gap: 0.35rem; }
.scm-shell .sc-prayer-time { line-height: 1.35; }

/* A toggle is a fixed-size control; letting flex shrink it produced 21px-wide
   switches on My Notifications, with the knob overhanging the track. */
.scm-shell .sc-switch { flex-shrink: 0; }

/* Primary actions: the saffron gradient, a defined edge, and a shadow tight
   enough to still look like an edge. --shadow-glow spread 30px of orange under
   every button, which on a phone made them look backlit rather than raised. */
.scm-shell .sc-btn-primary {
  background: var(--gradient-saffron);
  border-radius: var(--scm-r-inner);
  box-shadow: var(--scm-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  letter-spacing: 0.01em;
}
.scm-shell .sc-btn-primary:active { transform: scale(0.985); }

.scm-shell .sc-btn-ghost {
  border-radius: var(--scm-r-inner);
  border-color: var(--scm-hairline);
}

/* Inputs at 16px so iOS does not zoom the viewport on focus. */
.scm-shell .sc-input {
  font-size: 16px;
  min-height: 48px;
  border-radius: var(--scm-r-inner);
  background: var(--color-surface-2);
  border-color: var(--scm-hairline-soft);
}
.scm-shell textarea.sc-input { min-height: 96px; }

/* Rows nested INSIDE a card take the control radius, so the nesting is visible
   instead of the inner corner echoing the outer one. Pills are left alone —
   .sc-chip and .sc-typechip are 999px by design, and rounding them to 12px
   would turn every status badge into a small rectangle. */
.scm-shell .sc-bhakti-chant,
.scm-shell .sc-day-entry,
.scm-shell .sc-notif-item { border-radius: var(--scm-r-inner); }

/* .sc-tile is the card on the list screens (Chants, Deities, Festivals,
   Favorites), not an inner element — so it takes the card shape, not the inner
   one, and matches the dashboard cards exactly. */
.scm-shell .sc-tile {
  padding: var(--scm-card-pad);
  border-radius: var(--scm-r-card);
  box-shadow: var(--scm-elev-1);
  border-color: var(--scm-hairline-soft);
}

/* Hover lift is meaningless on a touch screen and leaves cards stuck in the
   lifted state after a tap on iOS, which is what makes a list look unsettled.
   Every hover property app.css sets is put back to the RESTING value here, not just
   the lift: a border that turned saffron, a tint behind the deity or an underline
   under "+1 more" sticks after the tap just the same. Each line restates exactly
   what that element looks like at rest in this skin. */
.scm-shell .sc-tile:hover,
.scm-shell .sc-darshan-card:hover { transform: none; box-shadow: var(--scm-elev-1); }
.scm-shell .sc-cat-card:hover,
.scm-shell .sc-pchg-mini:hover {
  transform: none;
  box-shadow: var(--scm-elev-1);
  border-color: var(--scm-hairline-soft);
}
.scm-shell .sc-prayer-card:hover { transform: none; box-shadow: none; }
.scm-shell .sc-bhakti-chant:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--scm-hairline-soft);
}
.scm-shell .sc-bhakti-deity:hover {
  transform: none;
  background: none;
  border-color: transparent;
}
.scm-shell .sc-bhakti-more:hover { text-decoration: none; }

/* Tables stay tables — the admin screens genuinely need columns — but they get
   momentum scrolling and an edge fade so a cut-off column is visibly cut off. */
.scm-shell .sc-tablewrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}

/* Modals already become bottom sheets below 560px in app.css; match the radius
   so a dialog and a shell sheet look like the same object. */
.scm-shell .sc-modal { border-radius: var(--scm-sheet-radius) var(--scm-sheet-radius) 0 0; }

/* Toasts hang from a fixed 4.2rem on the web. Here the bar's height is variable
   (safe-area inset), so they have to be pinned relative to it or they land on
   top of the title on a notched phone. Full width too — a 360px cap centred on
   the right edge of a 390px screen just looks like a misplaced card. */
.scm-shell .sc-toast-host {
  top: calc(max(0.4rem, var(--scm-safe-top)) + var(--scm-topbar-h) + 0.5rem);
  left: max(0.75rem, var(--scm-safe-left));
  right: max(0.75rem, var(--scm-safe-right));
  max-width: none;
}

/* ---------------------------------------------------------------- japa screen */

/* The counter pill stays pinned under the top bar while the chant scrolls beneath it: the seeker
   reads and taps at once, and the whole screen is the counter (japa.js), so nothing here has to
   be reached for. */
.scm-shell .sc-jp { gap: var(--scm-gap); }
.scm-shell .sc-jp-dock { top: calc(var(--scm-topbar-h) + var(--scm-safe-top) + 0.4rem); }

/* The bottom bar steps aside on the japa screen (MobileLayout), so the space it reserved goes too. */
.scm-shell--immersive .scm-content {
  padding-bottom: calc(var(--scm-safe-bottom) + 1.25rem);
}

/* ---------------------------------------------------------------- very narrow */

/* Below 360px (iPhone SE 1st gen, older budget Androids) five tabs get 62px
   each, and a translated label such as "User Dashboard" or "Chants Master"
   needs ~71px — so two of the five rendered as "User Dashbo…". A row of
   half-words is exactly the raggedness this pass exists to remove, so at this
   width the bar becomes icons only and the active pill carries the position.
   The names are still one tap away, spelled out in full, in the More sheet. */
@media (max-width: 359px) {
  /* On :root, not on .scm-bottomnav — .scm-content reserves its bottom padding
     from this same variable, and a value scoped to the bar would leave the page
     padding 6px too tall while the bar itself shrank. */
  :root { --scm-bottomnav-h: 54px; }

  .scm-tab-label { display: none; }
  .scm-tab-ic { font-size: 1.4rem; }
  .scm-tab.active::before { width: 46px; height: 32px; top: 0.35rem; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .scm-sheet, .scm-panel, .scm-sheet-scrim { animation: none; }
  .scm-bell.has-active .scm-bell-ic { animation: none; }
  .scm-tab.is-skeleton .scm-tab-ic,
  .scm-tab.is-skeleton .scm-tab-label { animation: none; }
  .scm-tab:active, .scm-quick:active, .scm-avatar-btn:active .scm-avatar,
  .scm-acct-cta:active, .scm-shell .sc-btn-primary:active { transform: none; }
}

/* ---------------------------------------------------------------- tablet */

/* An iPad and a Mac Catalyst window are the same host, so the bottom bar has to
   stop pretending to be a phone once there is real width. It stays — it is the
   navigation — but it centres instead of stretching each tab across a third of
   a foot of glass. */
@media (min-width: 700px) {
  .scm-bottomnav { justify-content: center; gap: 0.5rem; }
  .scm-tab { flex: 0 0 118px; }
  /* Centre the COLUMN, not each block inside it.

     `> * { max-width: 900px; margin-inline: auto }` is the block-layout idiom
     and it is wrong here: .scm-content is a flex container, and an auto inline
     margin on a flex item suppresses `align-items: stretch`, so every block
     shrink-wrapped to its own content width and centred independently. At
     1024px the dashboard had six different left edges (24/55/72/80/162/240px).

     Padding the container instead keeps every item stretched to one width, so
     they all share an edge. The percentage resolves against the container, and
     max() falls back to the plain gutter below ~948px where the cap is moot. */
  .scm-content {
    padding-inline: max(1.5rem, calc((100% - 900px) / 2), var(--scm-safe-left));
  }

  /* The carousel's bleed is `.scm-shell .sc-darshan` at specificity (0,2,0),
     which outranks any (0,1,0) rule above, so it has to be restated here.
     On a tablet the whole row fits, so it stops bleeding and lines up with its
     siblings. The home screen's chant strip bleeds the same way for the same
     reason, so it stops the same way. */
  .scm-shell .sc-darshan,
  .scm-shell .sc-catgrid {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .scm-sheet {
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(680px, 100%);
    border-radius: var(--scm-sheet-radius) var(--scm-sheet-radius) 0 0;
    /* Swap the animation, not the keyframes: the centred variant has to carry translateX(-50%)
       through every frame or the sheet slides in from the left edge. */
    animation-name: scm-rise-centred;
  }
  .scm-panel { left: auto; right: max(0.6rem, var(--scm-safe-right)); width: min(420px, 92vw); }
}

/* ==================================================================== mobile home
   Styles for Pages/MobileDashboard.razor — the "Mobile Home" form.

   Everything here is scoped under .scm-shell because this file is also linked by the WEB host
   (App.Web/wwwroot/index.html), so that setting Platform=Mobile previews the phone UI in a desktop
   browser. Only MobileLayout renders .scm-shell, so an unscoped rule here would leak into the real
   web app. The page cannot use a .razor.css companion either: App.Mobile sets
   EnableDefaultCssItems=false, so scoped CSS would style the web preview and not the phone. */

/* ---- greeting strip ----

   The desktop hero is ~200px on a 375px screen: 1.6rem/1.8rem padding, an 82px ॐ tile, a 1.5rem
   <h1> and two chips, then a 1.6rem bottom margin. This says the same thing in one row of about
   64px, and keeps the saffron so the app still opens on its own colour.

   The sheen is 6% white, not the hero's 22%: it sits exactly where the kicker and the name start,
   and at 22% it lifted the saffron under them until white text fell to 2.7-3.0:1. Over the
   deepened saffron it still reads as light catching the top-left corner. */
.scm-shell .scm-greet {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--scm-r-card);
  background-image:
    radial-gradient(120% 90% at 8% -20%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
    var(--scm-saffron-deep);
  color: #fff;
  box-shadow: var(--scm-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.scm-shell .scm-greet-om {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1;
}

/* min-width:0 so a long translated name ellipsizes instead of stretching the strip. */
.scm-shell .scm-greet-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

/* Full white, told apart from the name by size, case and tracking instead of by opacity — at 0.9
   it was the one line on the strip that missed AA. */
.scm-shell .scm-greet-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.scm-shell .scm-greet-name {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- quick actions ----

   The tiles themselves are the More sheet's .scm-quick / .scm-quick-ic / .scm-quick-label, reused
   verbatim. Do NOT redefine those names here: .scm-quick is a TILE (mobile.css:587) and
   .scm-quick-ic is its 1.5rem icon (:608), both live in MobileMoreSheet. An earlier draft of this
   block declared .scm-quick as a grid container, which silently turned every tile in the More
   sheet into a grid and shrank its icons.

   .scm-quickgrid already supplies the grid; this only pins the track count, because auto-fill at
   minmax(84px, 1fr) yields three columns at 375px and the home screen wants four.

   minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below its content's min-content, so at
   320px "Panchangam" held its column wider than the other three and the row went uneven. The gap
   is 8px rather than the page's 12: four tiles across is where every pixel of label width counts,
   and 8px still reads as separation between tiles this small. */
.scm-shell .scm-home-quick {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* .scm-quickgrid carries margin-bottom for the sheet. On the page, .scm-content's `gap` owns
     the spacing, and the sheet's margin is declared later in the file so it would otherwise win. */
  margin-bottom: 0;
  gap: 0.5rem;
}

/* A four-up row is tighter than the sheet's three-up, so the tile shrinks to match — everything
   but the label, which is the part that has to be read. Grid rows stretch, so a tile whose label
   wraps to two lines takes its whole row with it and the row stays even. */
.scm-shell .scm-home-quick .scm-quick {
  min-height: 72px;
  padding: 0.55rem 1px;
  gap: 0.3rem;
}
.scm-shell .scm-home-quick .scm-quick-ic { font-size: 1.3rem; }
/* 12px, and allowed to break inside a word only as a last resort — a word broken with a hyphen
   is still a word, where one clipped by the two-line clamp is not. From 360px up every English
   label fits its track whole; the break is the safety net for a longer translation. */
.scm-shell .scm-home-quick .scm-quick-label {
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* Below 360px a four-up track is 62px, and "Panchangam" alone needs 71px at 12px — it rendered
   as "Panchanga / m". Rather than shrink the text below the floor, the tiles become two-up rows,
   icon beside label: the same tiles, the same order, half the columns and double the label
   width. It costs ~60px of height on the one class of phone where every label otherwise breaks,
   which is the same trade the bottom bar makes at this width. */
@media (max-width: 359px) {
  .scm-shell .scm-home-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scm-shell .scm-home-quick .scm-quick {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 48px;
    padding: 0.4rem 0.7rem;
    gap: 0.55rem;
    text-align: left;
  }
  .scm-shell .scm-home-quick .scm-quick-ic { font-size: 1.15rem; flex-shrink: 0; }
}

/* The same two-up rows, up to 439px, for Telugu, Tamil and Kannada. Their labels are single long
   words — Tamil's "நினைவூட்டல்" is 92px at 12px — wider than a four-up tile's label anywhere below
   the 440px phones, and Chrome has no hyphenation dictionary for these scripts, so overflow-wrap
   broke them mid-syllable with no hyphen: "வால்பேப்ப / ர்கள்", "వాల్‌పేపర్ / లు". Hindi's
   labels fit four-up and keep it. The inset and icon are a little tighter than the English rows
   above so that the same 92px word also fits whole in a 140px tile at 320px. */
@media (max-width: 439px) {
  .scm-shell:not(:lang(en)):not(:lang(hi)) .scm-home-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scm-shell:not(:lang(en)):not(:lang(hi)) .scm-home-quick .scm-quick {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 48px;
    padding: 0.4rem 0.45rem;
    gap: 0.35rem;
    text-align: left;
  }
  .scm-shell:not(:lang(en)):not(:lang(hi)) .scm-home-quick .scm-quick-ic { font-size: 1.1rem; flex-shrink: 0; }
}

/* ---- prayers: one grouped card ----

   app.css gives every prayer its own card in a 250px-minimum grid, so on a phone the list was a
   stack of separate cards, each with its own border, shadow and 14px gap — 633px for six. Here
   the grid IS the card: one surface, one edge, rows divided by the soft hairline. It is the
   grouped-list shape phones use for "a list of like things", and it reads as today's prayers
   rather than as six unrelated tiles. One column always, tablet included — a two-up grouped list
   has no sensible place for its dividers. */
.scm-shell .sc-prayergrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--scm-hairline-soft);
  border-radius: var(--scm-r-card);
  box-shadow: var(--scm-elev-1);
  overflow: hidden;
}

/* The rows hand their card shape to the container. Names and time lines still wrap — see the
   "never truncate" block above; a row grows a line rather than losing its end time. */
.scm-shell .sc-prayer-card {
  min-height: 56px;
  padding: 0.75rem var(--scm-card-pad);
  gap: 0.75rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 0.12s ease;
}
.scm-shell .sc-prayer-card + .sc-prayer-card { border-top: 1px solid var(--scm-hairline-soft); }
.scm-shell .sc-prayer-ic { font-size: 1.45rem; }
.scm-shell .sc-prayer-name { font-size: 0.98rem; line-height: 1.3; }
.scm-shell .sc-prayer-time { font-size: 0.75rem; color: var(--scm-text-muted); text-wrap: pretty; }

/* The prayer due now is the highlighted row. It had silently lost its highlight: `.scm-shell
   .sc-card` sets `background` at (0,2,0) after app.css's (0,2,0) `.sc-prayer-card.now`, which
   wiped the saffron and left the row's white text on cream at 1.1:1 — the one row that mattered
   most was the one nobody could read. Restated at (0,3,0), on the deepened saffron. */
.scm-shell .sc-prayer-card.now {
  background: var(--scm-saffron-deep);
  color: #fff;
  box-shadow: none;
}
.scm-shell .sc-prayer-card.now .sc-prayer-name { color: #fff; }
.scm-shell .sc-prayer-card.now .sc-prayer-time { color: rgba(255, 255, 255, 0.92); }
/* A ring on a darker fill, not app.css's 25% white wash: white text on white-over-saffron was
   3.3:1. 11px, the floor for an uppercase caption. */
.scm-shell .sc-prayer-now {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  background: rgba(61, 33, 10, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* "Show all (6)" is the list's last row: the full width, a 44px target, centred in the link
   colour so it reads as an action rather than as a seventh prayer. */
.scm-shell .sc-prayer-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem var(--scm-card-pad);
  border: 0;
  border-top: 1px solid var(--scm-hairline-soft);
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

/* ---- today's bhakti: compact ----

   The desktop layout stacked on a phone was 424px: a 76px avatar inside a button with its own
   10px inset and border, a 1.35rem name, three roomy rows, and a pager of 8px dots nobody could
   hit. The target is one screen-third. */
@media (max-width: 820px) {
  /* app.css collapses the two columns to a bare `1fr` here, and 1fr cannot shrink below its
     content's min-content: at 320px the deity row held the track 19px wider than the card and
     everything in it overflowed the card's edge. */
  .scm-shell .sc-bhakti-main { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .scm-shell .sc-bhakti-sadhana { padding-top: 0.75rem; border-top-color: var(--scm-hairline-soft); }
}

/* No inset of its own any more — the padding gives the pressed tint room and the equal negative
   margin gives the space back, so the avatar sits on the card's text edge like the rows below it
   (it was 10.6px in). font:inherit because a <button> does not inherit the page font; these
   rendered in the UA's 13.33px Arial. */
.scm-shell .sc-bhakti-deity {
  font: inherit;
  color: inherit;
  gap: 0.85rem;
  padding: 0.4rem;
  margin: -0.4rem;
  border: 0;
  border-radius: var(--scm-r-inner);
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.scm-shell .sc-bhakti .sc-bhakti-avatar {
  width: 60px;
  height: 60px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gold) 55%, transparent), var(--scm-elev-1);
}
.scm-shell .sc-bhakti .sc-bhakti-fallback { font-size: 1.75rem; }

/* Kicker and name take a line each; the reason and the hint share the third, which is the
   cheapest line on the card to give back. */
.scm-shell .sc-bhakti-deity-meta {
  flex-flow: row wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
}
.scm-shell .sc-bhakti-deity-meta > .sc-bhakti-kicker,
.scm-shell .sc-bhakti-deity-meta > .sc-bhakti-name { flex-basis: 100%; }
.scm-shell .sc-bhakti .sc-bhakti-name {
  font-size: 1.2rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.scm-shell .sc-bhakti-kicker { font-size: 0.6875rem; line-height: 1.3; color: var(--scm-text-muted); }
/* The accent (#D47222) is a fill colour; as text on a cream card it was 3.1:1. */
.scm-shell .sc-bhakti-reason { line-height: 1.35; color: var(--color-primary); }
.scm-shell .sc-bhakti-hint { font-size: 0.75rem; margin-top: 0; color: var(--scm-text-muted); }

/* "+1 more →" moves up to the right end of the "Today's Sadhana" caption, where a list's
   see-all link conventionally sits, instead of taking a line of its own under the rows. A grid
   rather than a reorder: the caption and the link share row 1, and every chant row (or the empty
   message) spans both columns below them. */
.scm-shell .sc-bhakti-sadhana {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem 0.5rem;
}
.scm-shell .sc-bhakti-sadhana > * { grid-column: 1 / -1; }
.scm-shell .sc-bhakti-sadhana > .sc-bhakti-kicker { grid-column: 1; grid-row: 1; }
.scm-shell .sc-bhakti-sadhana > .sc-bhakti-more { grid-column: 2; grid-row: 1; }

/* The chant row is also the category sheet's and the deity sheet's row, so the font and edge
   fixes apply to all three; the 48px height is the home card's. */
.scm-shell .sc-bhakti-chant {
  font: inherit;
  color: inherit;
  border-color: var(--scm-hairline-soft);
}
.scm-shell .sc-bhakti .sc-bhakti-chant {
  min-height: 48px;
  padding: 0.4rem 0.75rem;
  gap: 0.65rem;
}
.scm-shell .sc-bhakti-chant .ic { font-size: 1.1rem; }
/* Two lines before the ellipsis rather than app.css's one: a long sadhana name lost its end on a
   320px card while the same name wrapped whole in the category sheet, so two lists of the same
   rows disagreed. */
.scm-shell .sc-bhakti-chant .nm {
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.scm-shell .sc-bhakti-chant .cat { font-size: 0.75rem; line-height: 1.25; color: var(--scm-text-muted); }

/* A 44px target with the text still on the card's right text edge: the padding makes the hit
   area and the negative margins return most of it, so the caption row grows by 11px, not 44. */
.scm-shell .sc-bhakti-more {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 44px;
  padding: 0 0.5rem;
  margin: -0.5rem;
  border-radius: var(--scm-r-inner);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  transition: background-color 0.12s ease, transform 0.12s ease;
}

/* The dots stay 8px (22px active) to the eye, but each is a 44px button: the padding is the
   hit area and background-clip keeps the paint on the content box. The row's negative bottom
   margin lets those hit areas fill the card's bottom padding instead of adding height, which
   also centres the dots between the last row and the card's edge. */
.scm-shell .sc-bhakti-dots {
  gap: 0;
  margin: 0 0 calc(var(--scm-card-pad) * -1);
}
.scm-shell .sc-bhakti-dot {
  box-sizing: content-box;
  padding: 18px;
  background-clip: content-box;
  /* A dot is a control, so the resting one gets the 3:1 a non-text control needs; app.css's 45%
     secondary was under 2:1 in both themes. The active dot's gold gradient paints over this. */
  background-color: color-mix(in srgb, var(--scm-text-muted) 70%, transparent);
}

/* ---- panchangam strip ----

   The left icon column pushed every line of text 34px in from the card's text edge, where no
   other card on the page starts its text; the title already says what the card is. The date and
   region share the line under the title, and each fact's key sits tight on its value. */
.scm-shell .sc-pchg-mini-ic { display: none; }
.scm-shell .sc-pchg-mini {
  gap: 0.5rem;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.scm-shell .sc-pchg-mini-body { gap: 0.35rem; }
.scm-shell .sc-pchg-mini-head { gap: 0 0.6rem; line-height: 1.35; }
.scm-shell .sc-pchg-mini-title { flex-basis: 100%; line-height: 1.3; }
.scm-shell .sc-pchg-mini-date,
.scm-shell .sc-pchg-mini-region { color: var(--scm-text-muted); }
/* With the icon column gone the arrow is the only thing beside the text; it points from the
   title line rather than floating at the middle of a five-line card. */
.scm-shell .sc-pchg-mini-go { align-self: flex-start; line-height: 1.3; }
/* Keep the facts clear of the share button in the card's bottom-right corner; restated here
   because the shell's card padding rules outrank app.css. A 44px target on a phone. */
.scm-shell .sc-pchg-mini-wrap > a.sc-pchg-mini .sc-pchg-mini-body { padding-right: 1.1rem; }
.scm-shell .sc-pchg-mini-wrap > div.sc-pchg-mini { padding-right: 3.8rem; }
.scm-shell .sc-share-inline { width: 44px; height: 44px; right: 0.65rem; bottom: 0.65rem; }

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

   Tapping a chant category opens ScModal as a bottom sheet, and its list brought a desktop
   dialog's insets with it: .sc-cat-list's own 1.1-1.3rem padding inside .sc-modal-content's
   1.3-1.4rem, and a 60vh scroller of its own inside the sheet's scroller — two nested scroll
   areas, the inner one ending mid-screen. The sheet already scrolls and already pads; the list
   just lists. Long chant names get two lines before the ellipsis instead of one. */
.scm-shell .sc-cat-list {
  padding: 0;
  max-height: none;
  overflow: visible;
}
.scm-shell .sc-cat-list .sc-bhakti-chant { min-height: 52px; }

/* ---- press feedback ----

   The host sets -webkit-tap-highlight-color: transparent, so without these a tap on any of the
   home screen's cards gave no sign it had landed until the next page appeared. A tint laid over
   the element's own surface (as a background-image, so the surface colour underneath stays),
   plus the same 0.985 squeeze the primary buttons use. Rows inside the grouped prayer card only
   tint: a row squeezing inside its clipped card pulls its edges off the dividers. */
.scm-shell .sc-bhakti-chant:active,
.scm-shell .sc-bhakti-deity:active,
.scm-shell .sc-bhakti-more:active,
.scm-shell a.sc-pchg-mini:active,
.scm-shell .scm-streak-cta:active {
  background-image: linear-gradient(var(--scm-tint), var(--scm-tint));
  transform: scale(0.985);
}
.scm-shell .sc-cat-card:active {
  background-image: linear-gradient(var(--scm-tint-strong), var(--scm-tint-strong));
  transform: scale(0.985);
}
.scm-shell .sc-prayer-card:active,
.scm-shell .sc-prayer-more:active {
  background-image: linear-gradient(var(--scm-tint), var(--scm-tint));
}
/* The saffron row is itself a background-image, so its pressed state deepens the veil instead
   of replacing the gradient with a tint. */
.scm-shell .sc-prayer-card.now:active {
  background-image: linear-gradient(rgba(61, 33, 10, 0.32), rgba(61, 33, 10, 0.32)), var(--gradient-saffron);
}
.scm-shell .sc-bhakti-dot:active { opacity: 0.6; }

/* The home screen's press states keep their tint; only the squeeze goes. Here, after the rules
   it cancels, not in the motion block above: a media query adds no specificity, so at equal
   weight the later scale(0.985) won and "Reduce motion" still squeezed every card. */
@media (prefers-reduced-motion: reduce) {
  .scm-shell .sc-cat-card:active,
  .scm-shell .sc-bhakti-chant:active,
  .scm-shell .sc-bhakti-deity:active,
  .scm-shell .sc-bhakti-more:active,
  .scm-shell a.sc-pchg-mini:active,
  .scm-shell .scm-streak-cta:active { transform: none; }
}

/* ---- colour: the two status tones ----

   Both were hardcoded for one theme. The done chip's #2F7D4F is 3.8:1 on its own green wash in
   light and 2.8:1 in dark; pulled 30% toward the theme's text colour it clears 4.5:1 in both,
   because that pull darkens it in light and lightens it in dark. The Rahu Kalam warning passes
   in light (4.6:1); in dark the same pull took it to ~#C9845A, dimmer than the plain values
   around it, so the one fact meant to warn read as the least important. The dark primary is
   7.5:1 on the card and the brightest warm tone on it. */
.scm-shell .sc-streak-today.done { color: color-mix(in srgb, #2F7D4F 70%, var(--color-on-surface)); }
:root[data-theme="dark"] .scm-shell .sc-pchg-mini-fact.warn .v {
  color: var(--color-primary);
}

/* ---- Indic scripts ----

   MobileLayout puts the language code on the shell. The uppercase captions above are tracked
   for Latin capitals; text-transform does nothing to Telugu, Devanagari, Tamil or Kannada, so
   in those scripts they are really lowercase-height text at 11px with 0.07-0.09em of air pushed
   between the letter clusters, which visibly pulls each word apart. Tight tracking and the 12px
   floor every other non-caption text gets. */
.scm-shell:not(:lang(en)) .sc-section-head h2,
.scm-shell:not(:lang(en)) .scm-greet-kicker,
.scm-shell:not(:lang(en)) .scm-streak-kicker,
.scm-shell:not(:lang(en)) .scm-streak-l,
.scm-shell:not(:lang(en)) .scm-streak-goal-l,
.scm-shell:not(:lang(en)) .scm-pchg-fact .k,
.scm-shell:not(:lang(en)) .scm-pchg-now-k,
.scm-shell:not(:lang(en)) .scm-pchg-chip,
.scm-shell:not(:lang(en)) .scm-tile .l,
.scm-shell:not(:lang(en)) .scm-tile .k,
.scm-shell:not(:lang(en)) .scm-tile-sun em,
.scm-shell:not(:lang(en)) .scm-deity-tile-k,
.scm-shell:not(:lang(en)) .sc-bhakti-kicker,
.scm-shell:not(:lang(en)) .sc-pchg-mini-fact .k,
.scm-shell:not(:lang(en)) .sc-cat-count,
.scm-shell:not(:lang(en)) .sc-prayer-now {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* ================================================================ panchangam filters
   The desktop bar is a wrapping flex row of .sc-filter columns, each with a `min-width: 170px`
   and an uppercase caption above its control, separated by a 1rem gap. Two of those plus the
   Today button need 356px of track; the phone's content box is 311px, so every one of them wraps
   onto its own line and the bar costs roughly 190px before the card's padding — for two inputs.

   Here it is a two-row, three-column grid instead, and the two fields share both edges:

       [ date ................ ][ ‹ ][ › ]
       [ region .............. ][  Today  ]

   The date input and the region select sit in the same 1fr column, so their left and right
   edges line up exactly; the two arrows and the Today button share the right-hand columns, so
   that side lines up too. The arrows and the input are lifted out of their wrappers with
   display: contents so the grid can place them directly — DOM order, and so tab order, is
   unchanged. The captions go, because a date stepper and a region dropdown do not need telling
   apart on a screen that shows two controls. */
.scm-shell .sc-pchg-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  gap: 0.5rem;
}

.scm-shell .sc-pchg-bar > .sc-filter:first-child,
.scm-shell .sc-daynav { display: contents; }

/* Row one: the date input, then the two arrows at the right. */
.scm-shell .sc-daynav > .sc-input { grid-area: 1 / 1 / 2 / 2; width: 100%; min-width: 0; }
.scm-shell .sc-daynav > button:first-child { grid-area: 1 / 2 / 2 / 3; }
.scm-shell .sc-daynav > button:last-child { grid-area: 1 / 3 / 2 / 4; }

/* Row two: the region select under the date, Today under the arrows. */
.scm-shell .sc-pchg-bar > .sc-filter:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.scm-shell .sc-pchg-bar > .sc-btn-ghost { grid-area: 2 / 2 / 3 / 4; }

/* min-width:0 defeats the desktop rules' 170px floors — without it the region select cannot
   shrink to its track and pushes the right-hand column off the card. */
.scm-shell .sc-pchg-bar > .sc-filter {
  position: relative;
  min-width: 0;
  gap: 0;
}
.scm-shell .sc-pchg-bar .sc-ss { min-width: 0; }

/* Visually hidden, NOT display:none. These captions are the only thing naming the two controls,
   and the region select has no aria-label of its own, so removing them from the accessibility
   tree would leave a screen reader with an unlabelled combobox. */
.scm-shell .sc-pchg-bar > .sc-filter > label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One height for every control in the bar, so the two rows read as two clean bands. 44px is the
   smallest reliably tappable target; the arrows already get it from app.css's `pointer: coarse`
   block on a real phone, and this makes the input, the select and the browser preview match. */
.scm-shell .sc-pchg-bar .sc-input,
.scm-shell .sc-daynav > button,
.scm-shell .sc-pchg-bar > .sc-btn-ghost {
  height: auto;
  min-height: 44px;
}
.scm-shell .sc-daynav > button { width: 44px; }

/* Two rows of controls do not need a desktop card's inset around them. */
.scm-shell .sc-pchg-filters { padding: 0.7rem; }

/* The share button clears the bottom bar and the home indicator, and sits under the sheets. */
.scm-shell .sc-share-fab {
  right: max(1rem, var(--scm-safe-right));
  bottom: calc(var(--scm-bottomnav-h) + var(--scm-safe-bottom) + 1rem);
}

/* The page heading repeats what the top bar already says, so it earns less room here. */
.scm-shell .sc-page-emoji { font-size: 1.45rem; }
.scm-shell .sc-page-title { gap: 0.55rem; }

/* ================================================================ home: glass
   The phone home's own look, scoped like everything else here. The page renders a position:fixed
   `.scm-aurora` as the FIRST direct child of .scm-content; that element is both the backdrop the
   glass blurs and the home-only hook for the shared cards (`.scm-aurora ~ …`), so nothing below
   touches `.scm-shell .sc-card`: on other phone pages a filter card holds SearchableSelect's fixed
   click-away layer, which a filtered ancestor would shrink to the card.

   Tokens hold plain rgba. A color-mix() inside a custom property makes every var() of it invalid at
   computed-value time on iOS < 16.2, which drops the whole property — so the color-mix upgrade
   lives in @supports, at the token, never as a second declaration.

   Only `.scm-glass` carries a backdrop-filter (the two hero cards). Everything else is translucent
   without a filter: over the soft aurora a blur adds a compositor layer per card for no visible
   gain, the cost the card rule at the top of this file warns about. */

:root {
  --scm-glass: rgba(250, 246, 238, 0.70);
  --scm-glass-soft: rgba(250, 246, 238, 0.84);
  --scm-glass-edge: rgba(255, 255, 255, 0.62);
  --scm-glass-sheen: rgba(255, 255, 255, 0.40);
  --scm-glass-shadow: 0 14px 34px -18px rgba(61, 33, 10, 0.38), 0 2px 6px -2px rgba(61, 33, 10, 0.10);

  --scm-tone-red: #B3261E;
  --scm-tone-amber: #A24D18;
  --scm-tone-green: #2F6A45;
  --scm-tint-red: rgba(179, 38, 30, 0.12);
  --scm-tint-amber: rgba(162, 77, 24, 0.13);
  --scm-tint-green: rgba(47, 106, 69, 0.13);
  --scm-edge-red: rgba(179, 38, 30, 0.38);
  --scm-edge-amber: rgba(162, 77, 24, 0.38);
  --scm-edge-green: rgba(47, 106, 69, 0.38);
  --scm-ink-red: #7A1B15;
  --scm-ink-amber: #7A3A12;
  --scm-ink-green: #245538;

  --scm-gold-glow: rgba(228, 169, 81, 0.55);
}

/* The dark washes use the DARK inks at 16%: 12% of the light hues is invisible on #2B1D10. */
:root[data-theme="dark"] {
  --scm-glass: rgba(43, 29, 16, 0.64);
  --scm-glass-soft: rgba(43, 29, 16, 0.80);
  --scm-glass-edge: rgba(255, 255, 255, 0.09);
  --scm-glass-sheen: rgba(255, 255, 255, 0.07);
  --scm-glass-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.4);

  --scm-tone-red: #F2B8B5;
  --scm-tone-amber: #F39F5A;
  --scm-tone-green: #8FC9A3;
  --scm-tint-red: rgba(242, 184, 181, 0.16);
  --scm-tint-amber: rgba(243, 159, 90, 0.16);
  --scm-tint-green: rgba(143, 201, 163, 0.16);
  --scm-edge-red: rgba(242, 184, 181, 0.42);
  --scm-edge-amber: rgba(243, 159, 90, 0.42);
  --scm-edge-green: rgba(143, 201, 163, 0.42);
  --scm-ink-red: #F2B8B5;
  --scm-ink-amber: #F3A866;
  --scm-ink-green: #9BD3AC;

  --scm-gold-glow: rgba(243, 159, 90, 0.45);
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --scm-glass: color-mix(in srgb, var(--color-surface) 70%, transparent);
    --scm-glass-soft: color-mix(in srgb, var(--color-surface) 84%, transparent);
  }
  :root[data-theme="dark"] {
    --scm-glass: color-mix(in srgb, var(--color-surface) 64%, transparent);
    --scm-glass-soft: color-mix(in srgb, var(--color-surface) 80%, transparent);
  }
}

/* ---- aurora ----
   html carries its own background (app.css), so body's opaque gradient is painted as an in-flow
   block ABOVE any negative-z-index layer of the root stacking context. Isolating the shell makes
   the aurora's z-index:-1 resolve inside the shell: above body, under every card, bar, sheet and
   modal, which keep their order. (Only #blazor-error-ui, a root-level z 100, now paints above the
   shell's modals — acceptable.) Not on .scm-content: the pages' modals would then sit under the
   bars, which are its siblings. A fixed element rather than a shell background because
   background-attachment: fixed is ignored by iOS WebKit and repaints on Android, and because
   :has() would exclude iOS 15.0–15.3. Static: a drifting layer under blurred surfaces is the
   every-frame repaint the bell comment above removed. */
.scm-shell { isolation: isolate; }

.scm-shell .scm-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 40% at 12% 4%, rgba(228, 169, 81, 0.42) 0%, transparent 70%),
    radial-gradient(52% 36% at 92% 22%, rgba(212, 114, 34, 0.26) 0%, transparent 70%),
    radial-gradient(56% 40% at 18% 58%, rgba(224, 122, 140, 0.18) 0%, transparent 70%),
    radial-gradient(72% 46% at 72% 100%, rgba(120, 70, 160, 0.16) 0%, transparent 70%);
}
:root[data-theme="dark"] .scm-shell .scm-aurora {
  background:
    radial-gradient(62% 40% at 12% 4%, rgba(243, 159, 90, 0.26) 0%, transparent 70%),
    radial-gradient(52% 36% at 92% 22%, rgba(228, 169, 81, 0.14) 0%, transparent 70%),
    radial-gradient(56% 40% at 18% 58%, rgba(200, 90, 120, 0.14) 0%, transparent 70%),
    radial-gradient(72% 46% at 72% 100%, rgba(120, 70, 160, 0.22) 0%, transparent 70%);
}

/* ---- the glass surfaces ---- */
.scm-shell .scm-glass {
  position: relative;
  border-radius: var(--scm-r-card);
  background: var(--scm-glass);
  border: 1px solid var(--scm-glass-edge);
  box-shadow: var(--scm-glass-shadow), inset 0 1px 0 var(--scm-glass-edge);
  -webkit-backdrop-filter: var(--scm-blur);
          backdrop-filter: var(--scm-blur);
  isolation: isolate;
  color: var(--color-on-surface);
}
.scm-shell .scm-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--scm-glass-sheen) 0%, transparent 42%);
  pointer-events: none;
  z-index: -1;
}
.scm-shell .scm-glass-soft {
  border-radius: var(--scm-r-card);
  background: var(--scm-glass-soft);
  border: 1px solid var(--scm-glass-edge);
  box-shadow: var(--scm-glass-shadow), inset 0 1px 0 var(--scm-glass-edge);
  color: var(--color-on-surface);
}

/* ---- greeting: a line, not a card ---- */
.scm-shell .scm-greet--plain {
  background: none;
  box-shadow: none;
  padding: 0.25rem 0.1rem 0;
  color: var(--color-on-surface);
  overflow: visible;
  gap: 0.6rem;
}
.scm-shell .scm-greet--plain .scm-greet-om {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--scm-glass-soft);
  box-shadow: var(--scm-elev-1), inset 0 0 0 1px var(--scm-glass-edge);
  font-size: 1.6rem;
}
.scm-shell .scm-greet--plain .scm-greet-om .sc-logo-img { width: 32px; height: 32px; }
/* Beside the date column the kicker's box is ~170px at 360px and "Shubh Prabhat · Good Morning" is 209px,
   so both lines wrap rather than lose letters; the name scales with the screen (16px at 320, 18px at 360,
   19.5px at 390, 23.2px from 464) so an ordinary two-word name stays whole and on one line. */
.scm-shell .scm-greet--plain .scm-greet-kicker { color: var(--scm-text-muted); white-space: normal; }
.scm-shell .scm-greet--plain .scm-greet-text { flex: 1 1 auto; }
.scm-shell .scm-greet--plain .scm-greet-name { font-size: clamp(1rem, 5vw, 1.45rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; white-space: normal; }
.scm-shell .scm-greet-date {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-size: 0.72rem;
  color: var(--scm-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.scm-shell .scm-greet-date strong { font-size: 0.85rem; color: var(--color-on-surface); font-weight: 700; white-space: nowrap; }
/* A long region name ellipsizes rather than squeezing the seeker's name out of the line. */
.scm-shell .scm-greet-date { max-width: 36%; }
.scm-shell .scm-greet-date > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the bento: streak hero beside the deity tile ---- */
.scm-shell .scm-home-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--scm-gap);
  align-items: stretch;
}
.scm-shell .scm-home-bento.is-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 359px) {
  .scm-shell .scm-home-bento { grid-template-columns: minmax(0, 1fr); }
}
/* The hero's column is ~155px at 360px. Tamil's "Practiced Today" chip alone is 190px and its CTA 180px,
   so Tamil gets one column below 400px; Telugu, Kannada and Hindi fit beside the deity tile (the chip and
   the CTA may wrap there, never overflow). */
@media (max-width: 399px) {
  .scm-shell:lang(ta) .scm-home-bento { grid-template-columns: minmax(0, 1fr); }
}

.scm-shell .scm-deity-tile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  border-radius: var(--scm-r-card);
  background: var(--scm-glass-soft);
  border: 1px solid var(--scm-glass-edge);
  box-shadow: var(--scm-glass-shadow);
}
.scm-shell .scm-deity-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.scm-shell .scm-deity-tile.is-fallback { background: var(--scm-saffron-deep); display: grid; place-items: center; }
.scm-shell .scm-deity-tile-glyph { font-size: 3rem; line-height: 1; color: #fff; padding-bottom: 2.5rem; }
.scm-shell .scm-deity-tile-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.7rem 0.65rem;
  background: linear-gradient(transparent, rgba(61, 33, 10, 0.82));
  color: #fff;
}
.scm-shell .scm-deity-tile-k { display: block; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; font-weight: 700; }
.scm-shell .scm-deity-tile-n { display: block; font-family: var(--font-heading); font-size: 1.1rem; line-height: 1.15; }
.scm-shell .scm-deity-tile-r { display: block; font-size: 0.7rem; opacity: 0.9; margin-top: 0.1rem; }

/* ---- streak hero ---- */
.scm-shell .scm-streak {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--scm-card-pad);
}
.scm-shell .scm-streak-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.scm-shell .scm-streak-kicker {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--scm-text-muted);
}
.scm-shell .scm-streak-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; align-items: center; }
.scm-shell .scm-streak-count { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.scm-shell .scm-streak-big { display: flex; align-items: center; gap: 0.3rem; }
.scm-shell .scm-streak-flame { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 0 12px var(--scm-gold-glow)) saturate(1.2); }
/* The number in the body face: Georgia is missing on Android and its old-style digits would change the height. */
.scm-shell .scm-streak-n {
  font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #C0631A 0%, #E4A951 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="dark"] .scm-shell .scm-streak-n { background: linear-gradient(135deg, #F39F5A 0%, #FFD28A 100%); -webkit-background-clip: text; background-clip: text; }
.scm-shell .scm-streak-l {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--scm-text-muted);
}
.scm-shell .scm-streak.is-cold .scm-streak-flame { filter: grayscale(1); opacity: 0.5; }
.scm-shell .scm-streak.is-cold .scm-streak-n { background: none; color: var(--scm-text-muted); }

.scm-shell .scm-streak-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem;
  list-style: none; margin: 0; padding: 0;
}
.scm-shell .scm-streak-day { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; }
.scm-shell .scm-streak-day-dot {
  width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 999px;
  background: var(--scm-tint); box-shadow: inset 0 0 0 1px var(--scm-hairline-soft);
  display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; color: #fff;
}
.scm-shell .scm-streak-day.is-on .scm-streak-day-dot {
  background: var(--gradient-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 8px -3px rgba(212, 114, 34, 0.6);
}
.scm-shell .scm-streak-day.is-on .scm-streak-day-dot::after { content: "✓"; }
.scm-shell .scm-streak-day.is-today .scm-streak-day-dot { box-shadow: 0 0 0 2px var(--color-primary), inset 0 0 0 1px var(--scm-hairline-soft); }
.scm-shell .scm-streak-day.is-today.is-on .scm-streak-day-dot { box-shadow: 0 0 0 2px var(--color-primary), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.scm-shell .scm-streak-day-n { font-size: 0.62rem; font-weight: 600; color: var(--scm-text-muted); font-variant-numeric: tabular-nums; }
.scm-shell .scm-streak-day.is-today .scm-streak-day-n { color: var(--color-primary); font-weight: 800; }

/* status chip and the way into Sadhana on one row; the row wraps for a long translation */
.scm-shell .scm-streak-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.5rem; }
.scm-shell .scm-streak .sc-streak-today { font-size: 0.72rem; padding: 0.3rem 0.65rem; white-space: normal; min-width: 0; text-align: center; }
.scm-shell .scm-streak .sc-streak-today.risk { background: var(--scm-tint-red); color: var(--scm-ink-red); box-shadow: inset 0 0 0 1px var(--scm-edge-red); }
/* A text action with a 44px target, as the old summary's CTA was: a solid bar would out-weigh the number. */
.scm-shell .scm-streak-cta {
  flex: 0 1 auto; min-width: 0;   /* a long translation shrinks and wraps, never pokes out of the card */
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 0.4rem; margin: -0.5rem -0.4rem -0.5rem auto;
  border-radius: var(--scm-r-inner);
  font-size: 0.78rem; font-weight: 700; color: var(--color-primary);
  text-decoration: none; text-align: end;
}
.scm-shell .scm-streak-note { margin: 0; font-size: 0.78rem; line-height: 1.3; color: var(--scm-text-muted); }

.scm-shell .scm-streak-goal { display: flex; flex-direction: column; gap: 0.4rem; }
.scm-shell .scm-streak-goal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.scm-shell .scm-streak-goal-l { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--scm-text-muted); }
.scm-shell .scm-streak-goal-v { font-size: 0.78rem; color: var(--color-on-surface); font-variant-numeric: tabular-nums; }
.scm-shell .scm-streak-bar { height: 7px; border-radius: 999px; background: var(--scm-tint); overflow: hidden; }
.scm-shell .scm-streak-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--gradient-gold); box-shadow: 0 0 10px var(--scm-gold-glow); }

/* ---- the time-aware Panchangam card ---- */
.scm-shell .scm-pchg-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: var(--scm-card-pad);
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.scm-shell a.scm-pchg-card:hover { text-decoration: none; }
/* Tint only on press — a transform on a backdrop-filter surface flickers on iOS; the prayer rows take the same path. */
.scm-shell a.scm-pchg-card:active { background-image: linear-gradient(var(--scm-tint), var(--scm-tint)); }
/* Whatever comes last clears the 44px share button pinned to the wrap's corner. */
.scm-shell .scm-pchg-card > :last-child { margin-right: 3.1rem; }

.scm-shell .scm-pchg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.55rem; padding-right: 1.5rem; line-height: 1.35; }
.scm-shell .scm-pchg-title { flex-basis: 100%; font-weight: 700; line-height: 1.3; color: var(--color-primary); }
.scm-shell .scm-pchg-date, .scm-shell .scm-pchg-region { font-size: 0.78rem; color: var(--scm-text-muted); font-variant-numeric: tabular-nums; }
.scm-shell .scm-pchg-go { position: absolute; top: var(--scm-card-pad); right: var(--scm-card-pad); font-size: 1.1rem; line-height: 1.3; color: var(--color-primary); }

.scm-shell .scm-pchg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.75rem; }
.scm-shell .scm-pchg-fact { display: flex; flex-direction: column; gap: 0.08rem; min-width: 0; }
.scm-shell .scm-pchg-fact .k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--scm-text-muted); }
/* A value may wrap; it may never be clipped. */
.scm-shell .scm-pchg-fact .v { font-size: 0.86rem; font-weight: 600; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }

.scm-shell .scm-pchg-now {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--scm-r-inner);
  background: var(--scm-tint);
  box-shadow: inset 0 0 0 1px var(--scm-hairline-soft);
}
.scm-shell .scm-pchg-now-dot { width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; background: var(--scm-text-muted); box-shadow: 0 0 0 3px var(--scm-tint); }
.scm-shell .scm-pchg-now-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 0.05rem; }
.scm-shell .scm-pchg-now-k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--scm-text-muted); }
.scm-shell .scm-pchg-now-v { font-size: 1.02rem; font-weight: 800; line-height: 1.2; }
.scm-shell .scm-pchg-now-s { font-size: 0.8rem; color: var(--scm-text-muted); font-variant-numeric: tabular-nums; }
.scm-shell .scm-pchg-chip {
  flex: 0 0 auto; margin-left: auto; align-self: center;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--scm-tint); color: var(--color-on-surface); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--scm-hairline-soft);
}
.scm-shell .scm-pchg-chip .k { opacity: 0.75; margin-right: 0.25rem; font-weight: 600; }

/* the tiers: a wash as background-image so the glass colour and the press tint stay independent */
.scm-shell .scm-pchg-card.tone-red { background-image: linear-gradient(var(--scm-tint-red), var(--scm-tint-red)); border-color: var(--scm-edge-red); }
.scm-shell .scm-pchg-card.tone-amber { background-image: linear-gradient(var(--scm-tint-amber), var(--scm-tint-amber)); border-color: var(--scm-edge-amber); }
.scm-shell .scm-pchg-card.tone-green { background-image: linear-gradient(var(--scm-tint-green), var(--scm-tint-green)); border-color: var(--scm-edge-green); }
.scm-shell a.scm-pchg-card.tone-red:active { background-image: linear-gradient(var(--scm-tint), var(--scm-tint)), linear-gradient(var(--scm-tint-red), var(--scm-tint-red)); }
.scm-shell a.scm-pchg-card.tone-amber:active { background-image: linear-gradient(var(--scm-tint), var(--scm-tint)), linear-gradient(var(--scm-tint-amber), var(--scm-tint-amber)); }
.scm-shell a.scm-pchg-card.tone-green:active { background-image: linear-gradient(var(--scm-tint), var(--scm-tint)), linear-gradient(var(--scm-tint-green), var(--scm-tint-green)); }

.scm-shell .scm-pchg-card.tone-red .scm-pchg-now { background: var(--scm-tint-red); box-shadow: inset 0 0 0 1px var(--scm-edge-red); }
.scm-shell .scm-pchg-card.tone-amber .scm-pchg-now { background: var(--scm-tint-amber); box-shadow: inset 0 0 0 1px var(--scm-edge-amber); }
.scm-shell .scm-pchg-card.tone-green .scm-pchg-now { background: var(--scm-tint-green); box-shadow: inset 0 0 0 1px var(--scm-edge-green); }

.scm-shell .scm-pchg-card.tone-red .scm-pchg-now-dot { background: var(--scm-tone-red); box-shadow: 0 0 0 3px var(--scm-tint-red); }
.scm-shell .scm-pchg-card.tone-amber .scm-pchg-now-dot { background: var(--scm-tone-amber); box-shadow: 0 0 0 3px var(--scm-tint-amber); }
.scm-shell .scm-pchg-card.tone-green .scm-pchg-now-dot { background: var(--scm-tone-green); box-shadow: 0 0 0 3px var(--scm-tint-green); }

/* Never colour alone: the label names the window; these only make the name wear its tone. */
.scm-shell .scm-pchg-card.tone-red .scm-pchg-now-k, .scm-shell .scm-pchg-card.tone-red .scm-pchg-now-v { color: var(--scm-ink-red); }
.scm-shell .scm-pchg-card.tone-amber .scm-pchg-now-k, .scm-shell .scm-pchg-card.tone-amber .scm-pchg-now-v { color: var(--scm-ink-amber); }
.scm-shell .scm-pchg-card.tone-green .scm-pchg-now-k, .scm-shell .scm-pchg-card.tone-green .scm-pchg-now-v { color: var(--scm-ink-green); }

.scm-shell .scm-pchg-chip.tone-red { background: var(--scm-tint-red); color: var(--scm-ink-red); box-shadow: inset 0 0 0 1px var(--scm-edge-red); }
.scm-shell .scm-pchg-chip.tone-amber { background: var(--scm-tint-amber); color: var(--scm-ink-amber); box-shadow: inset 0 0 0 1px var(--scm-edge-amber); }
.scm-shell .scm-pchg-chip.tone-green { background: var(--scm-tint-green); color: var(--scm-ink-green); box-shadow: inset 0 0 0 1px var(--scm-edge-green); }

/* sunrise-to-sunset bar */
.scm-shell .scm-pchg-timeline { display: flex; flex-direction: column; gap: 0.3rem; }
.scm-shell .scm-pchg-track { position: relative; height: 9px; border-radius: 999px; background: var(--scm-tint); box-shadow: inset 0 0 0 1px var(--scm-hairline-soft); }
.scm-shell .scm-pchg-seg { position: absolute; top: 0; bottom: 0; border-radius: 999px; opacity: 0.9; }
.scm-shell .scm-pchg-seg.red { background: var(--scm-tone-red); }
.scm-shell .scm-pchg-seg.amber { background: var(--scm-tone-amber); opacity: 0.6; }
.scm-shell .scm-pchg-seg.green { background: var(--scm-tone-green); }
.scm-shell .scm-pchg-nowmark { position: absolute; top: -5px; width: 3px; height: 19px; margin-left: -1.5px; border-radius: 2px; background: var(--color-on-surface); box-shadow: 0 0 0 2px var(--scm-glass); }
.scm-shell .scm-pchg-nowmark::after { content: ""; position: absolute; left: 50%; top: -5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 999px; background: var(--color-on-surface); }
.scm-shell .scm-pchg-ends { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--scm-text-muted); font-variant-numeric: tabular-nums; }

/* ---- small tiles: totals, next prayer, sunrise/sunset ---- */
.scm-shell .scm-tile-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--scm-gap); }
/* As many equal columns as there are tiles (one or two), without a track count to keep in step. */
.scm-shell .scm-tile-row.two { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.scm-shell .scm-tile { padding: 0.75rem 0.7rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; text-align: left; }
.scm-shell .scm-tile-btn { font: inherit; cursor: pointer; width: 100%; }
.scm-shell .scm-tile-btn:active { background-image: linear-gradient(var(--scm-tint), var(--scm-tint)); }
.scm-shell .scm-tile .n { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.scm-shell .scm-tile .l { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--scm-text-muted); overflow-wrap: anywhere; }
.scm-shell .scm-tile .k { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--scm-text-muted); font-weight: 700; }
.scm-shell .scm-tile .v { font-size: 0.95rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.scm-shell .scm-tile .s { font-size: 0.75rem; color: var(--scm-text-muted); font-variant-numeric: tabular-nums; }
.scm-shell .scm-tile .ic { font-size: 1.3rem; line-height: 1; margin-bottom: 0.2rem; }
.scm-shell .scm-tile.accent .n { color: var(--color-primary); }
.scm-shell .scm-tile-sun { flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5rem; }
.scm-shell .scm-tile-sun span { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.scm-shell .scm-tile-sun em { font-style: normal; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--scm-text-muted); }
.scm-shell .scm-tile-sun b { font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Telugu, Tamil and Kannada captions need the whole width: one tile per line, like the quick tiles. */
@media (max-width: 439px) {
  .scm-shell:not(:lang(en)):not(:lang(hi)) .scm-tile-row.two { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}

/* ---- the shared cards, richer on the home only (surface properties only: layout, captions and
   the Indic tracking rules above must keep winning) ---- */
.scm-shell .scm-aurora ~ .sc-bhakti,
.scm-shell .scm-aurora ~ .sc-prayergrid {
  background: var(--scm-glass-soft);
  border-color: var(--scm-glass-edge);
  box-shadow: var(--scm-glass-shadow), inset 0 1px 0 var(--scm-glass-edge);
}
.scm-shell .scm-aurora ~ .sc-bhakti .sc-bhakti-avatar {
  box-shadow: 0 0 0 3px rgba(228, 169, 81, 0.6), 0 10px 26px -8px rgba(212, 114, 34, 0.6);
}
/* background-color, not the shorthand: the press tint is a background-image set by the :active rules above. */
.scm-shell .scm-aurora ~ .sc-bhakti .sc-bhakti-chant {
  background-color: var(--scm-glass-soft);
  border-color: var(--scm-glass-edge);
  box-shadow: var(--scm-elev-1);
}
.scm-shell .scm-aurora ~ .sc-prayergrid .sc-prayer-ic {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--scm-r-inner);
  background: var(--scm-tint); box-shadow: inset 0 0 0 1px var(--scm-hairline-soft); flex-shrink: 0;
}
.scm-shell .scm-aurora ~ .sc-prayergrid .sc-prayer-card.now .sc-prayer-ic { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.scm-shell .scm-aurora ~ .sc-catgrid .sc-cat-card {
  background: linear-gradient(var(--scm-tint), var(--scm-tint)), var(--scm-glass-soft);
  border-color: var(--scm-glass-edge);
  box-shadow: var(--scm-elev-1);
}
.scm-shell .scm-aurora ~ .sc-catgrid .sc-cat-card:active { background-image: linear-gradient(var(--scm-tint-strong), var(--scm-tint-strong)); }
.scm-shell .scm-aurora ~ .scm-home-quick .scm-quick {
  background: var(--scm-glass-soft);
  border-color: var(--scm-glass-edge);
  box-shadow: var(--scm-elev-1), inset 0 1px 0 var(--scm-glass-edge);
}
.scm-shell .scm-aurora ~ .scm-home-quick .scm-quick-ic {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--scm-r-inner);
  background: var(--scm-tint); box-shadow: inset 0 0 0 1px var(--scm-hairline-soft);
}
/* The two-up row layouts (below 360px, and te/ta/kn below 440px) were budgeted for the bare emoji:
   with a 40px box "நினைவூட்டல்" no longer fits its tile whole. */
@media (max-width: 359px) {
  .scm-shell .scm-aurora ~ .scm-home-quick .scm-quick-ic { width: auto; height: auto; background: none; box-shadow: none; }
}
@media (max-width: 439px) {
  .scm-shell:not(:lang(en)):not(:lang(hi)) .scm-aurora ~ .scm-home-quick .scm-quick-ic { width: auto; height: auto; background: none; box-shadow: none; }
}

/* ---- streak card colours: the saffron "day" palette (colour only; layout is unchanged) ----
   White text on a deep saffron-to-bronze gradient, gold check dots, a pale-gold ring on today and
   translucent white chips. Same in both themes. Selectors carry .scm-streak.scm-glass so they
   outrank the glass surface, the dark-theme number gradient and the state chips above. */
.scm-shell .scm-streak.scm-glass {
  color: #fff;
  background:
    radial-gradient(70% 55% at 88% 0%, rgba(255, 226, 160, 0.55) 0%, transparent 60%),
    radial-gradient(60% 45% at 10% 100%, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
    linear-gradient(165deg, #D97B22 0%, #B05A1A 48%, #6E3A12 100%);
  border-color: rgba(255, 255, 255, 0.22);
}
.scm-shell .scm-streak.scm-glass .scm-streak-kicker { color: rgba(255, 255, 255, 0.92); }
.scm-shell .scm-streak.scm-glass .scm-streak-n { background: none; -webkit-text-fill-color: currentColor; color: #fff; }
.scm-shell .scm-streak.scm-glass.is-cold .scm-streak-n { color: rgba(255, 255, 255, 0.72); }
.scm-shell .scm-streak.scm-glass .scm-streak-l { color: rgba(255, 255, 255, 0.9); }
.scm-shell .scm-streak.scm-glass .scm-streak-day-dot { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #5A2A04; }
.scm-shell .scm-streak.scm-glass .scm-streak-day.is-on .scm-streak-day-dot { background: linear-gradient(135deg, #FFD28A, #E4A951); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.scm-shell .scm-streak.scm-glass .scm-streak-day.is-today .scm-streak-day-dot { box-shadow: 0 0 0 2px #FFD28A, inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.scm-shell .scm-streak.scm-glass .scm-streak-day.is-today.is-on .scm-streak-day-dot { box-shadow: 0 0 0 2px #FFD28A, inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.scm-shell .scm-streak.scm-glass .scm-streak-day-n { color: rgba(255, 255, 255, 0.85); }
.scm-shell .scm-streak.scm-glass .scm-streak-day.is-today .scm-streak-day-n { color: #FFD28A; }
.scm-shell .scm-streak.scm-glass .sc-streak-today,
.scm-shell .scm-streak.scm-glass .sc-streak-today.pending,
.scm-shell .scm-streak.scm-glass .sc-streak-today.risk { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.scm-shell .scm-streak.scm-glass .sc-streak-today.done { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.scm-shell .scm-streak.scm-glass .scm-streak-cta { color: #fff; }
.scm-shell .scm-streak.scm-glass .scm-streak-cta:active { background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)); }
.scm-shell .scm-streak.scm-glass .scm-streak-cta:focus-visible { outline: 2px solid #FFD28A; outline-offset: 2px; }
.scm-shell .scm-streak.scm-glass .scm-streak-note { color: rgba(255, 255, 255, 0.85); }
.scm-shell .scm-streak.scm-glass .scm-streak-goal-l { color: rgba(255, 255, 255, 0.8); }
.scm-shell .scm-streak.scm-glass .scm-streak-goal-v { color: #fff; }
.scm-shell .scm-streak.scm-glass .scm-streak-bar { background: rgba(255, 255, 255, 0.22); }
.scm-shell .scm-streak.scm-glass .scm-streak-bar-fill { background: linear-gradient(90deg, #FFD28A, #E4A951); box-shadow: 0 0 8px rgba(255, 210, 138, 0.8); }

/* ---- the home inside the desktop layout (web host, Platform = Web) ----
   MobileHomeFrame wraps the page in .scm-shell.scm-webhome > .scm-content there. Everything above
   then applies as on the phone; these rules undo the parts of the shell that belong to a whole app
   (full height, the bottom bar's clearance, the isolation) and keep it a phone-width column.
   No stacking context on the frame: modals inside it must stay above the desktop top bar, so the
   aurora is painted as the frame's background rather than as a fixed layer at z-index -1. */
.scm-shell.scm-webhome {
  min-height: 0;
  display: block;
  isolation: auto;
  max-width: 600px;
  margin-inline: auto;
  border-radius: 28px;
  box-shadow: var(--scm-elev-1), inset 0 0 0 1px var(--scm-hairline-soft);
  background-color: var(--color-background);
  background-image:
    radial-gradient(62% 40% at 12% 4%, rgba(228, 169, 81, 0.42) 0%, transparent 70%),
    radial-gradient(52% 36% at 92% 22%, rgba(212, 114, 34, 0.26) 0%, transparent 70%),
    radial-gradient(56% 40% at 18% 58%, rgba(224, 122, 140, 0.18) 0%, transparent 70%),
    radial-gradient(72% 46% at 72% 100%, rgba(120, 70, 160, 0.16) 0%, transparent 70%),
    var(--pattern-mandala);
  background-attachment: scroll;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
:root[data-theme="dark"] .scm-shell.scm-webhome {
  background-image:
    radial-gradient(62% 40% at 12% 4%, rgba(243, 159, 90, 0.26) 0%, transparent 70%),
    radial-gradient(52% 36% at 92% 22%, rgba(228, 169, 81, 0.14) 0%, transparent 70%),
    radial-gradient(56% 40% at 18% 58%, rgba(200, 90, 120, 0.14) 0%, transparent 70%),
    radial-gradient(72% 46% at 72% 100%, rgba(120, 70, 160, 0.22) 0%, transparent 70%),
    var(--pattern-mandala);
}
.scm-shell.scm-webhome .scm-aurora { display: none; }
.scm-shell.scm-webhome > .scm-content {
  flex: none;
  padding: var(--scm-gutter);
}
/* On a phone-width browser the column is the screen: bleed over the desktop content padding and drop
   the rounded frame, so it reads exactly like the phone app. */
@media (max-width: 640px) {
  .scm-shell.scm-webhome {
    max-width: none;
    margin: calc(-1 * clamp(0.75rem, 3vw, 2rem));
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- fallbacks, after the rules they cancel ---- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .scm-shell .scm-glass { background: var(--color-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .scm-shell .scm-glass, .scm-shell .scm-glass-soft,
  .scm-shell .scm-aurora ~ .sc-bhakti, .scm-shell .scm-aurora ~ .sc-prayergrid,
  .scm-shell .scm-aurora ~ .scm-home-quick .scm-quick, .scm-shell .scm-deity-tile {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .scm-shell .scm-aurora { display: none; }
}