/* Approved compact Home header and assignment card. Lower Home and desktop navigation keep their existing layout. */
html body #app-view .assignment-home-surface { gap: 12px; }
html body #app-view .assignment-home-surface .assignment-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 0; height: auto; padding: 17px 17px 14px;
  justify-content: flex-start; border-radius: 17px;
  border: 1px solid #d3e0d8; background: #eff5f1;
  color: #102d24;
}
html body #app-view .assignment-hero .home-image-stack {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  overflow: hidden; border-radius: inherit;
}
html body #app-view .assignment-hero .home-church-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
  opacity: 0;
}
html body #app-view .assignment-hero .home-church-image.is-active { opacity: 1; }
html body #app-view .assignment-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #f1f7f3cc, #f1f7f373 55%, #f1f7f340);
}
html body #app-view .assignment-home-surface .assignment-hero .assignment-state {
  min-height: 0; margin: 0; padding: 0;
  font-size: .72rem; line-height: 1.4; letter-spacing: .12em;
  font-weight: 750; color: #274b35;
}
html body #app-view .assignment-home-surface .assignment-hero h2 {
  width: 100%; min-width: 0; margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.5rem; font-weight: 700; font-stretch: normal;
  line-height: 1.2; letter-spacing: -.02em; text-transform: none;
  white-space: normal; overflow-wrap: break-word; color: #09261e;
}
html body #app-view .assignment-home-surface .assignment-hero .assignment-time {
  margin: 12px 0 0; font-size: .97rem; line-height: 1.4;
  font-weight: 600; color: #17342a;
}
html body #app-view .assignment-hero #service-clock {
  display: none;
}
html body #app-view .assignment-hero #assignment-note-button {
  top: 10px; right: 12px; height: 30px; padding: 0 11px;
  gap: 6px; border: 1px solid #cbd8d0; border-radius: 11px;
  background: #ffffffdf; color: #18362f; font-size: .78rem;
}
html body #app-view .assignment-hero #assignment-note-button svg { width: 17px; height: 17px; }
html body #app-view .assignment-hero .home-post-name-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  width: max-content; max-width: 100%; min-width: 0; margin: 0; padding: 0;
  border: 0; background: transparent; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: none; text-decoration: none;
}
html body #app-view .assignment-hero .home-post-name-link > :is(#assignment-name,#next-duty-name) {
  min-width: 0; white-space: normal; overflow-wrap: break-word; color: inherit;
}
html body #app-view .assignment-hero .home-post-name-arrow {
  flex: none; color: inherit; font: 500 1.25rem/1 system-ui,sans-serif; opacity: .7;
}
html body #app-view .assignment-hero h2 > .home-post-name-link::before { content: ''; position: absolute; inset: -8px 0; }
html body #app-view .assignment-hero .home-post-name-link[href] { cursor: pointer; }
html body #app-view .assignment-hero .home-post-name-link[href]:hover { text-decoration: underline; text-underline-offset: 4px; }
html body #app-view .assignment-hero .home-post-name-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
html body #app-view .assignment-hero .home-post-name-link.is-unassigned .home-post-name-arrow { display: none; }
html body #app-view .assignment-hero #next-duty-card .home-post-name-link { gap: 4px; }
html body #app-view .assignment-hero #next-duty-card .home-post-name-arrow { font-size: 1rem; }
html body #app-view .assignment-hero #next-duty-card .home-post-name-link::before {
  content: ''; position: absolute; inset: -12px 0;
}
html body #home-roaming-orders-dialog {
  position: fixed; inset: 0; width: calc(100% - 28px); max-width: 380px;
  box-sizing: border-box; height: fit-content; max-height: calc(100dvh - 40px);
  overflow-y: auto; margin: auto; padding: 20px;
  border: 1px solid var(--theme-border,#cedbd2); border-radius: 18px;
  color: var(--theme-text,#16352a); background: var(--theme-surface,#fff);
  box-shadow: 0 16px 60px #102d3040;
}
html body #home-roaming-orders-dialog::backdrop { background: #102d3059; backdrop-filter: blur(3px); }
html body #home-roaming-orders-dialog .home-roaming-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body #home-roaming-orders-dialog h2 { margin: 0; font: 750 1.1rem/1.3 system-ui,sans-serif; }
html body #home-roaming-orders-dialog button { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: 400 1.7rem/1 system-ui,sans-serif; cursor: pointer; }
html body #home-roaming-orders-dialog button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html body #home-roaming-orders-dialog p { margin: 12px 0 0; font: 400 1rem/1.6 system-ui,sans-serif; }
html body #app-view .assignment-hero #next-duty-card[hidden] { display: none !important; }
html body #app-view .assignment-hero #next-duty-card:not([hidden]) {
  display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 3px 5px;
  width: 100%; min-height: 0; margin: 7px 0 0; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  color: #344e43; font-size: .8rem; line-height: 1.4;
  letter-spacing: 0; text-transform: none;
}
html body #app-view .assignment-hero #next-duty-card > span {
  color: inherit; font: inherit; letter-spacing: 0; text-transform: none;
}
html body #app-view .assignment-hero #next-duty-card > span::after { content: ':'; }
html body #app-view .assignment-hero #next-duty-card > div {
  display: contents;
}
html body #app-view .assignment-hero #next-duty-card :is(strong,small) {
  min-width: 0; max-width: 100%; margin: 0; color: inherit; font-size: inherit; line-height: inherit;
  letter-spacing: 0; text-transform: none; overflow: visible; text-overflow: clip;
  white-space: normal; overflow-wrap: anywhere;
}
html body #app-view .assignment-hero #next-duty-card small::before { content: '· '; }
html[data-theme='dark'] body #app-view .assignment-hero #next-duty-card { color: #f0f7f2; }
/* Match the approved logo/account header and simple date/radio line. */
html[data-theme='light'] body #app-view { background: #fff; }
html body #app-view > .shared-header {
  display: grid; grid-template-columns: minmax(0,1fr) 46px;
  gap: 12px; min-height: 0; padding: 14px 0 7px;
  border-bottom: 0;
}
html body #app-view[data-incident-level='green'] > .shared-header { border-top: 0; }
html body #app-view > .shared-header .brand-version-lockup { grid-column: 1; }
html body #app-view > .shared-header .brand-lockup {
  width: min(252px,67vw); max-width: 100%; height: auto; margin: 0;
}
html body #app-view > .shared-header > #header-prayer-link { display: none; }
html body #app-view > .shared-header > .shared-header-actions { grid-column: 2; }
html body #app-view > .shared-header #account-menu-toggle {
  width: 46px; min-width: 46px; height: 46px; padding: 10px;
  border: 1px solid var(--theme-border,#d5dcda); border-radius: 50%;
  background: transparent; color: var(--theme-text,#10232a);
}
html body #app-view > .shared-header #account-menu-toggle svg { width: 26px; height: 26px; }
html body #app-view .event-summary {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 6px 12px; min-height: 48px;
  margin: 0; padding: 3px 0; border: 0;
}
html body #app-view .event-summary :is(.event-rail-label,.event-service-distance) { display: none; }
html body #app-view .event-summary .event-service-date {
  grid-column: 1; grid-row: 1; display: block;
  min-width: 0; padding: 0; border: 0; text-align: left;
}
html body #app-view .event-summary .eyebrow {
  display: block; margin: 0; color: var(--theme-text,#10232a);
  font-size: clamp(1.08rem,5.1vw,1.28rem); line-height: 1.3;
  font-weight: 750; letter-spacing: -.025em; text-transform: none;
  text-align: left; justify-content: flex-start;
}
html body #app-view .event-summary .event-day-label { color: inherit; }
html body #app-view .event-summary .event-service-date > .eyebrow { display: none; }
html body #app-view .event-summary .home-today-label {
  margin: 0; font-size: clamp(.95rem,4.6vw,1.12rem); line-height: 1.3;
  font-weight: 750; letter-spacing: -.025em; text-align: left;
  text-transform: none; color: var(--theme-text,#10232a);
}
html body #app-view .assignment-hero .home-assignment-heading {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px;
  row-gap: 2px; min-height: 0; margin: 0 0 5px;
  padding: 0; color: #274b35;
}
html body #app-view .assignment-hero:has(#assignment-note-button:not([hidden])) .home-assignment-heading { padding-right: 90px; }
html body #app-view .assignment-home-surface .assignment-hero .home-assignment-heading .assignment-state {
  min-height: 0; margin: 0; padding: 0; letter-spacing: .055em;
}
html body #app-view .assignment-hero .home-assignment-date {
  font-size: .68rem; font-weight: 650; line-height: 1.4;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
html body #app-view .assignment-hero .home-assignment-date :is(.event-day-label,.event-short-date) { color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; }
html body #app-view .assignment-hero .home-assignment-date:not(:empty)::before { content: '· '; }
html[data-theme='dark'] body #app-view .assignment-hero .home-assignment-heading { color: #f0f7f2; }
html body #app-view #open-radio-plan {
  grid-column: 2; grid-row: 1; display: inline-flex; flex-direction: row; align-items: center;
  justify-content: flex-end; gap: 5px; width: auto; min-width: 0;
  min-height: 44px; margin: 0; padding: 0; border: 0;
  background: transparent; color: #2473ee; box-shadow: none;
}
html body #app-view #open-radio-plan .event-radio-value {
  display: inline; font-size: 1.16rem; line-height: 1.3;
  font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
  color: inherit;
}
html body #app-view #open-radio-plan .event-radio-value > span { display: none; }
html body #app-view .home-radio-icon {
  width: 23px; height: 28px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
html body #app-view #account-menu :is(.app-release,.app-version) {
  display: block; position: static; margin-top: 8px; padding: 10px 14px;
  border-top: 1px solid var(--theme-border,#d5dcda); font-size: .85rem;
}
html body #app-view #account-menu .app-release-panel {
  position: static; width: 100%; min-width: 0; max-height: none;
  transform: none;
  margin-top: 8px; padding: 12px; box-shadow: none;
}
html[data-theme='dark'] body #app-view #open-radio-plan { color: #83b5ff; }
html[data-theme='dark'] body #app-view .assignment-home-surface .assignment-hero { background: #14251d; border-color: #496051; }
html[data-theme='dark'] body #app-view .assignment-hero::after { background: linear-gradient(90deg,#10251deb,#10251dce 55%,#10251db8); }
html[data-theme='dark'] body #app-view .assignment-home-surface .assignment-hero :is(h2,.assignment-time,.assignment-state,.home-assignment-date) { color: #f0f7f2; }
html[data-theme='dark'] body #app-view .assignment-hero #assignment-note-button { background: #1b3229e8; color: #f0f7f2; border-color: #61766a; }
html body #app-view[data-incident-level='red'] .assignment-home-surface .assignment-hero { border-color: var(--incident-home-text-color,#a71930); }
html body #app-view[data-incident-level='red'] .assignment-home-surface .assignment-hero :is(.assignment-state,h2,#assignment-name,.assignment-current-state) { color: #8b162c; }
html[data-theme='dark'] body #app-view[data-incident-level='red'] .assignment-home-surface .assignment-hero :is(.assignment-state,h2,#assignment-name,.assignment-current-state) { color: #ffb4be; }
@media(max-width:350px) {
  html body #app-view .assignment-home-surface .assignment-hero { padding: 17px 14px 14px; min-height: 0; }
  html body #app-view .assignment-home-surface .assignment-hero .assignment-state { font-size: .66rem; }
}