/* Approved visual direction: existing Home content and navigation only.
   This layer deliberately leaves visibility, permissions, scroll containers,
   safe-area spacing, navigation breakpoints and application state unchanged. */
html[data-theme] body #app-view.sunday-screen {
  background: var(--visual-canvas, var(--theme-canvas));
  color: var(--visual-text, var(--theme-text));
}
html[data-theme="light"] body:has(#app-view.sunday-screen:not([hidden])),
html[data-theme="light"] body #app-view.sunday-screen {
  background: #f0f2f3;
}

/* Restrain only the unlocked Home controls; protected surfaces keep their shadows. */
html body #app-view :is(#account-menu-toggle, #presence-toggle, #open-live) {
  --visual-shadow-soft: 0 1px 3px rgb(20 60 44 / 3.2%);
  --visual-shadow-card: 0 2px 5px rgb(20 60 44 / 3.2%), 0 10px 22px -20px rgb(20 60 44 / 19.2%);
}
html[data-theme="dark"] body #app-view :is(#account-menu-toggle, #presence-toggle, #open-live) {
  --visual-shadow-soft: 0 1px 3px rgb(0 0 0 / 8%);
  --visual-shadow-card: 0 2px 7px rgb(0 0 0 / 10.4%);
}

/* A shorter brand header retains the original mark and full account target. */
@media (max-width: 759px) {
  html body #app-view.sunday-screen { --visual-home-gutter: 18px; }
  html body #app-view.sunday-screen > .shared-header {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 12px;
    margin-inline: calc(-1 * var(--visual-home-gutter));
    padding: 3px var(--visual-home-gutter);
    border-bottom: 1px solid var(--visual-line, var(--theme-border));
    background: var(--visual-surface, var(--theme-surface));
  }
  html body #app-view.sunday-screen > .shared-header .brand-lockup {
    width: min(184px, 59vw);
    max-width: 100%;
  }
  html body #app-view.sunday-screen > .shared-header #account-menu-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 10px;
    border-color: var(--visual-line, var(--theme-border));
    background: var(--visual-surface, var(--theme-surface));
    box-shadow: var(--visual-shadow-soft, 0 2px 6px rgb(0 0 0 / 3%));
  }
}
@media (max-width: 420px) {
  html body #app-view.sunday-screen { --visual-home-gutter: 14px; }
}

html body #app-view .event-summary {
  min-height: 54px;
  padding-block: 3px;
}
html body #app-view .event-summary .home-today-label {
  font-size: .94rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--visual-text, var(--theme-text));
}
html[data-theme] body #app-view #open-radio-plan {
  color: var(--visual-accent, var(--visual-brand, #245d3e));
}
html body #app-view #open-radio-plan .event-radio-value { font-size: .98rem; }
html body #app-view .home-radio-icon { width: 19px; height: 25px; }
html body #app-view .assignment-home-surface { gap: 12px; }

/* Photographs stay in the existing tenant-selected image stack. Rich color
   replaces the pale wash; a directional scrim protects assignment text. */
html[data-theme] body #app-view .assignment-home-surface .assignment-hero {
  --visual-hero-rgb: 20 60 44;
  padding: 19px 18px 18px;
  border: 1px solid rgb(var(--visual-hero-rgb) / 55%);
  border-radius: var(--visual-radius, 18px);
  background: var(--visual-deep, #143c2c);
  color: #fff;
  box-shadow: 0 5px 14px -9px rgb(18 60 43 / 45%);
}
html[data-theme] body #app-view .assignment-hero .home-church-image {
  object-position: 72% center;
  filter: none;
  mix-blend-mode: normal;
}
html[data-theme] body #app-view .assignment-hero .home-church-image.is-active { opacity: 1; }
html[data-theme] body #app-view .assignment-hero::after {
  background: linear-gradient(95deg,
    rgb(var(--visual-hero-rgb) / 98%) 0%,
    rgb(var(--visual-hero-rgb) / 91%) 35%,
    rgb(var(--visual-hero-rgb) / 63%) 68%,
    rgb(var(--visual-hero-rgb) / 16%) 100%);
}
html[data-theme] body #app-view .assignment-hero .home-assignment-heading {
  margin-bottom: 11px;
  gap: 3px 7px;
  color: #fff;
}
html[data-theme] body #app-view .assignment-home-surface .assignment-hero .assignment-state {
  color: #fff;
  font-size: .69rem;
  line-height: 1.45;
  font-weight: 750;
}
html body #app-view .assignment-home-surface .assignment-hero .home-assignment-heading .assignment-state {
  letter-spacing: .1em;
}
html[data-theme] body #app-view .assignment-hero .home-assignment-date {
  color: #fff;
  font-size: .75rem;
  line-height: 1.45;
  font-weight: 500;
}
html[data-theme] body #app-view .assignment-home-surface .assignment-hero h2 {
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.04em;
  text-shadow: 0 1px 7px rgb(0 0 0 / 22%);
}
html[data-theme] body #app-view .assignment-home-surface .assignment-hero .assignment-time {
  margin-top: 16px;
  color: #fff;
  font-size: .96rem;
  line-height: 1.45;
  font-weight: 600;
  text-shadow: 0 1px 5px rgb(0 0 0 / 28%);
}
html[data-theme] body #app-view .assignment-hero #next-duty-card:not([hidden]) { color: #f4f8f5; }
html[data-theme] body #app-view .assignment-hero #assignment-note-button {
  min-height: 44px;
  height: auto;
  top: 9px;
  right: 10px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: var(--visual-radius-control, 12px);
  background: rgb(var(--visual-hero-rgb) / 82%);
  color: #fff;
}
html body #app-view .assignment-hero:has(#assignment-note-button:not([hidden])) .home-assignment-heading {
  min-height: 34px;
}

/* Incident colors remain operational signals, separate from brand green. */
html[data-theme] body #app-view[data-incident-level='yellow'] .assignment-home-surface .assignment-hero {
  border-color: var(--incident-home-color, #d9a514);
  box-shadow: inset 3px 0 0 var(--incident-home-color, #d9a514), 0 5px 14px -9px rgb(18 60 43 / 35%);
}
html[data-theme] body #app-view[data-incident-level='red'] .assignment-home-surface .assignment-hero {
  --visual-hero-rgb: 105 26 45;
  background: #691a2d;
  border-color: var(--incident-home-color, #a71930);
  box-shadow: inset 3px 0 0 var(--incident-home-color, #a71930), 0 5px 14px -9px rgb(105 26 45 / 40%);
}
html[data-theme] body #app-view[data-incident-level='red'] .assignment-home-surface .assignment-hero :is(.assignment-state, h2, #assignment-name, .assignment-current-state) {
  color: #fff;
}

/* Modest elevation distinguishes live status and the primary report action.
   Issue severity dots and critical-state backgrounds retain their own rules. */
#app-view #home-lower-section {
  --lower-text: var(--visual-text, var(--theme-text));
  --lower-muted: var(--visual-muted, var(--theme-muted));
  --lower-surface: var(--visual-surface, var(--theme-surface));
  --lower-border: var(--visual-line, var(--theme-border));
  --lower-green: var(--visual-brand, #245d3e);
  --lower-focus: var(--visual-focus, #176bad);
  gap: 13px;
}
#app-view #home-lower-section #presence-toggle {
  position: relative;
  min-height: 78px;
  padding: 14px;
  border-color: var(--lower-border);
  border-radius: var(--visual-radius, 18px);
  background: var(--lower-surface);
  box-shadow: var(--visual-shadow-card, 0 3px 9px rgb(0 0 0 / 5%));
}
#app-view #home-lower-section #presence-toggle::before {
  content: '';
  position: absolute;
  inset: 15px auto 15px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--visual-accent, var(--lower-green));
  pointer-events: none;
}
#app-view #home-lower-section #presence-toggle .today-action-icon {
  color: var(--visual-accent, var(--lower-green));
}
#app-view #home-lower-section #presence-toggle .presence-line {
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
}
#app-view #home-lower-section #presence-toggle #presence-title {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: var(--visual-radius-control, 12px);
  font-weight: 650;
}
#app-view #home-lower-section #home-issue-panel {
  border-color: var(--lower-border);
  border-radius: var(--visual-radius, 18px);
  background: var(--lower-surface);
  box-shadow: var(--visual-shadow-soft, 0 2px 5px rgb(0 0 0 / 3%));
}
#app-view #home-lower-section #open-issues {
  min-height: 57px;
  padding: 15px 16px;
}
#app-view #home-lower-section #issue-card-label { font-size: 1.05rem; font-weight: 700; }
#app-view #home-lower-section #issue-count-summary { font-size: .78rem; }
#app-view #home-lower-section #home-active-issues { margin-inline: 16px; }
#app-view #home-lower-section .home-active-issue { gap: 10px; padding-block: 13px; }
#app-view #home-lower-section .home-active-issue-copy strong { font-size: .9rem; line-height: 1.4; }
#app-view #home-lower-section .home-active-issue-copy small { font-size: .76rem; }
#app-view #home-lower-section #home-issue-panel:has(.has-critical) {
  border-color: var(--lower-red);
  background: color-mix(in srgb, var(--lower-red) 6%, var(--lower-surface));
}
#app-view #home-lower-section .home-lower-actions { gap: 11px; }
#app-view #home-lower-section .home-lower-actions :is(.report-action, #open-live) {
  min-height: 66px;
  border-radius: var(--visual-radius, 18px);
  background: var(--lower-surface);
  box-shadow: var(--visual-shadow-soft, 0 2px 5px rgb(0 0 0 / 3%));
}
#app-view #home-lower-section .home-lower-actions :is(.report-action, #open-live).report-action {
  background: var(--lower-green);
  border-color: var(--lower-green);
  color: #fff;
  box-shadow: 0 4px 9px -7px rgb(18 60 43 / 36%);
}
#app-view #home-lower-section .home-lower-actions :is(.today-action-copy, .summary-card-copy) { font-weight: 650; }
#app-view #home-lower-section #open-live .lower-action-icon { color: var(--visual-accent, var(--lower-green)); }
#app-view #home-lower-section #coverage-home-summary { color: var(--lower-muted); font-weight: 550; }
#app-view #home-lower-section :is(#home-open-service-order, #home-prayer-row) {
  border-radius: var(--visual-radius, 18px);
  box-shadow: none;
}
#app-view #home-lower-section .lower-row-icon { color: var(--visual-accent, var(--lower-green)); }
#app-view #home-lower-section #home-open-service-order strong { font-weight: 650; }
#app-view #home-lower-section #home-prayer-row { font-weight: 600; }
#app-view #home-lower-section #home-special-event-signups {
  padding-inline: 4px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: .85rem;
}
#app-view #home-lower-section .home-special-event-signups-action {
  color: var(--visual-accent, var(--lower-green));
}

/* One recognizable navigation treatment across member pages. Existing fixed
   positioning, keyboard hiding, safe-area padding and desktop hiding remain. */
html[data-theme] .has-app-navigation nav.app-bottom-navigation {
  background: var(--visual-surface, var(--theme-surface));
  border-color: var(--visual-line, var(--theme-border));
  box-shadow: 0 -3px 12px rgb(0 0 0 / 3%);
}
html[data-theme] .has-app-navigation .app-bottom-navigation-item {
  grid-template-rows: 40px 3px 16px;
  gap: 4px;
  min-height: 67px;
  color: var(--visual-muted, var(--theme-muted));
}
html[data-theme] .has-app-navigation .app-bottom-navigation-item svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
html[data-theme] .has-app-navigation .app-bottom-navigation-item.active {
  color: #fff;
}
html[data-theme] .has-app-navigation .app-bottom-navigation-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 40px;
  border-radius: 12px;
  background: var(--visual-brand, #245d3e);
  pointer-events: none;
}
html[data-theme] .has-app-navigation .app-bottom-navigation-item > .app-nav-underline {
  width: 14px;
  height: 3px;
}
html[data-theme] .has-app-navigation .app-bottom-navigation-item.active > .app-nav-underline {
  background: var(--visual-accent, var(--visual-brand, #245d3e));
}
html[data-theme] .has-app-navigation .app-nav-badge {
  z-index: 2;
  border-color: var(--visual-surface, var(--theme-surface));
}
html[data-theme] .has-app-navigation .app-bottom-navigation-item:focus-visible {
  outline: 3px solid var(--visual-focus, #176bad);
  outline-offset: 2px;
  border-radius: 12px;
}

@media (max-width: 370px) {
  html[data-theme] body #app-view .assignment-home-surface .assignment-hero { padding-inline: 15px; }
  html[data-theme] body #app-view .assignment-home-surface .assignment-hero h2 { font-size: 1.65rem; }
  #app-view #home-lower-section #presence-toggle { padding: 12px; gap: 9px; }
  #app-view #home-lower-section #presence-toggle #presence-title { padding-inline: 10px; }
}

/* Visible navigation names use the existing bar height and fixed destinations. */
html[data-theme] .has-app-navigation nav.app-bottom-navigation {
  padding-top: 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
html[data-theme] .has-app-navigation .app-nav-label {
  display: block;
  max-width: 100%;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
html[data-theme] .has-app-navigation .app-bottom-navigation-item.active > .app-nav-label {
  color: var(--visual-accent, var(--visual-brand, #245d3e));
  font-weight: 500;
}

/* Approved six destinations: retain the full tab target around smaller icons. */
html[data-theme] .has-app-navigation .app-bottom-navigation-item { min-height:56px; grid-template-rows:29px 3px 16px; gap:4px; }
html[data-theme] .has-app-navigation .app-bottom-navigation-item svg { width:24px; height:24px; }
html[data-theme] .has-app-navigation .app-nav-label { font-size:10px; }
html[data-theme] .has-app-navigation .app-nav-badge { right:calc(50% - 20px); }