/* Emberyl, October 2026. One calm presentation layer for the approved art collection.
   The five supplied colors are accents; dark ink and deeper functional colors keep text legible. */
:root {
  --emberyl-oat: #E1D7C6;
  --emberyl-butter: #E8D397;
  --emberyl-blue: #A6B5D2;
  --emberyl-sage: #ABB9A5;
  --emberyl-blush: #D9BDB5;
  --av-canvas: #F8F5EF; --av-surface: #FFFDFA; --av-surface-soft: #EDE6DA;
  --av-ink: #293B49; --av-muted: #5B6464; --av-blue: #425C7A; --av-blue-soft: #E6EBF3;
  --av-yellow: var(--emberyl-butter); --av-yellow-soft: #F5EDCF;
  --av-coral: #87594F; --av-green: #51684E; --av-sage: #51684E; --av-olive: #51684E;
  --av-lavender: #546C98; --av-flax: var(--emberyl-oat); --av-subtle: #626D70;
  --av-border: #D9D0C0; --av-hairline: #E9E1D5; --av-border-accent: #ABB9A5;
  --av-on-primary: #FFFDFA; --av-focus: #425C7A;
  --av-ui: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --av-display: 'Quicksand', sans-serif;
  --av-display-title: 600 3rem/1.08 var(--av-display);
  --av-page-title: 600 2rem/1.15 var(--av-display);
  --av-card-title: 600 1.375rem/1.25 var(--av-display);
  --av-body: 400 1rem/1.6 var(--av-ui);
  --av-helper: 400 .875rem/1.5 var(--av-ui);
  --av-section-title: 500 .8125rem/1.5 var(--av-ui);
  --av-section-label: var(--av-section-title);
  --av-meta: 500 .8125rem/1.5 var(--av-ui);
  --av-control: 600 .9375rem/1.35 var(--av-ui);
  --av-caption: 400 .8125rem/1.5 var(--av-ui);
  --av-shadow-card: 0 3px 16px rgba(41,59,73,.045);
  --av-radius-card: 18px; --av-radius-control: 12px; --av-radius-modal: 22px;
}
body, body[data-view] {
  --av-page-title: 600 2rem/1.15 var(--av-display);
  --av-card-title: 600 1.375rem/1.25 var(--av-display);
  --av-body: 400 1rem/1.6 var(--av-ui);
  --fjord: var(--av-blue); --fjord-deep: var(--av-blue); --fjord-soft: var(--av-blue-soft);
  --sun: var(--av-yellow); --sun-soft: var(--av-yellow-soft); --butter: var(--emberyl-butter);
  --sage: var(--emberyl-sage); --sage-deep: var(--av-blue);
  --terracotta: #F2E4DF; --terracotta-deep: var(--av-coral);
  --dusty-blue: var(--emberyl-blue); --dusty-blue-deep: var(--av-lavender);
  --olive: var(--emberyl-sage); --olive-deep: var(--av-green);
  --nordic-coral: var(--av-coral); --focus-accent: var(--av-blue);
}
body[data-theme="dark"] {
  --av-canvas: #202A30; --av-surface: #29353C; --av-surface-soft: #303E43;
  --av-ink: #F5F0E6; --av-muted: #C0CAC8; --av-blue: #A6B5D2; --av-blue-soft: #354657;
  --av-yellow: #E8D397; --av-yellow-soft: #49442F; --av-coral: #E6C9C1;
  --av-green: #BDCCB7; --av-sage: #BDCCB7; --av-olive: #BDCCB7; --av-lavender: #BAC9E5;
  --av-border: #506169; --av-hairline: #435258; --av-border-accent: #92A68C;
  --av-subtle: #C0CAC8; --av-on-primary: #202A30; --av-focus: #E8D397;
}
/* Separate rule keeps the body theme valid on pre-15.4 iOS without :has(). */
html:has(body[data-theme="dark"]) { --av-canvas:#202A30; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { font: var(--av-body); font-synthesis:none; font-optical-sizing:none; height:auto; min-height:100%; }
#authGate .emberyl-welcome { background:var(--av-canvas)!important; color:var(--av-ink)!important; }
#authGate .emberyl-welcome :is(h1,h2) { color:var(--av-ink)!important; }
#authGate .emberyl-welcome p { color:var(--av-muted)!important; }
#authGate .emberyl-create { background:var(--emberyl-butter)!important; color:#293B49!important; border-color:var(--emberyl-butter)!important; }
#authGate .emberyl-signin { color:var(--av-blue)!important; border-color:var(--av-blue)!important; }
body[data-view][data-view] .view :is(h1,h2,h3,h4,.av-card-title) {
  font-family: var(--av-display)!important; font-weight: 600!important;
  line-height: 1.25!important; letter-spacing: -.01em!important;
}
body[data-view][data-view] .view :is(h1,h2) { font-size: 1.5rem!important; }
body[data-view][data-view] .view :is(h3,h4,.av-card-title) { font-size: 1.25rem!important; }
body[data-view][data-view] .view :is(.life-dashboard-head h1,.page-folk-heading>.section-title,.pantry-heading>.section-title,.page-primary-section>.section-title:first-child,.section:first-of-type>.section-title:first-child) {
  font: var(--av-page-title)!important; color: var(--av-ink)!important;
  letter-spacing: -.02em!important; text-transform: none!important;
  overflow-wrap: anywhere; margin-bottom: 14px!important;
}
body[data-view][data-view] .view :is(.life-dashboard-card h2,.empty-state h3,.starting-path h3,.av-state h3,.today-devotional h2) {
  font: var(--av-card-title)!important;
}
body[data-view][data-view] :is(.work-brief,.exec-intro,.section-sub,.card-sub,.hint,.sub,.life-dashboard-head p,.view p,.exec-body,.hc-row,.today-overview-item,.jgroup p,.tp-row) {
  font: var(--av-body)!important; letter-spacing: 0!important;
}
body[data-view][data-view] :is(.card-meta,.av-card-meta,.exec-meta,.recipe-opt,.today-overview-label,.life-dashboard-eyebrow,.menu-label,.stat-label,.today-day-date,.today-focus-copy strong,.date-line) {
  font: var(--av-meta)!important; letter-spacing: .055em!important; color: var(--av-muted)!important;
}
body[data-view][data-view] :is(.habit-name,.goal-name,.book-title,.gift-name,.conn-name,.journal-entry-title,.life-dashboard-row-copy strong) {
  font: 500 1rem/1.45 var(--av-ui)!important; color: var(--av-ink)!important;
}
body[data-view][data-view][data-view] .view :is(.hub-overview-empty,.dashboard-next-list li) { font:var(--av-body)!important; }
body[data-view][data-view][data-view] .view .hub-overview .hub-overview-title { font:500 .8125rem/1.5 var(--av-ui)!important; }
body[data-view][data-view] .hub-overview :is(.hub-overview-open,.hub-overview-more summary) { font:var(--av-control)!important; }
body[data-view][data-view] .view .tool-faith-note { font:var(--av-helper)!important; }
body[data-view="ceoreview"][data-view] #view-ceoreview :is(.ceo-start-card>p,.ceo-step p,.ceo-opening-prayer,.ceo-context-row) { font:var(--av-body)!important; }
body[data-view="ceoreview"][data-view] #view-ceoreview :is(h2,h3) { font:var(--av-card-title)!important; }
body[data-view] #tpOverlay .touchpoint-modal h2 { font:var(--av-page-title)!important; }
body[data-view] #tpOverlay .touchpoint-modal .field label { font:500 .875rem/1.5 var(--av-ui)!important; letter-spacing:0!important; text-transform:none!important; }
body[data-view][data-view] :is(.btn,.exec-subtab,.pant-tab,.tour-cta,.today-capacity-action,.quiet-link) {
  font: var(--av-control)!important; letter-spacing: 0!important; text-transform: none!important;
  min-height: 44px!important; white-space: normal; overflow-wrap: anywhere;
}
/* The retained Reviews layout has a more specific legacy 10px control rule. */
body[data-view="career"][data-view] .career-workspace-growth .review-launch .btn {
  font: var(--av-control)!important; letter-spacing: 0!important;
}
body[data-view][data-view] .btn-primary {
  background: var(--av-blue)!important; border-color: var(--av-blue)!important; color: var(--av-on-primary)!important;
}
body[data-view][data-view] .btn-soft {
  background: var(--av-yellow-soft)!important; border-color: var(--emberyl-butter)!important; color: var(--av-ink)!important;
}
body[data-view][data-view] :is(.exec-subtab,.pant-tab).active {
  background: var(--av-blue-soft)!important; border-color: var(--av-blue)!important; color: var(--av-ink)!important;
}
body[data-view][data-view] :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  font: 400 1rem/1.5 var(--av-ui)!important; color: var(--av-ink)!important;
}
body[data-view][data-view] :is(.field,.exec-field) label {
  font: 500 .875rem/1.5 var(--av-ui)!important; text-transform: none!important; letter-spacing: 0!important;
}
body[data-view][data-view] :is(button,[role="button"],input,textarea,select,a):focus-visible {
  outline: 2px solid var(--av-focus)!important; outline-offset: 3px!important;
}
body[data-view][data-view] .life-dashboard-row-icon {
  background: var(--av-blue-soft)!important; color: var(--av-blue)!important;
}
body[data-view][data-view] .life-dashboard-item:nth-child(4n+2) .life-dashboard-row-icon { background: var(--av-yellow-soft)!important; }
body[data-view][data-view] .life-dashboard-item:nth-child(4n+3) .life-dashboard-row-icon { background: color-mix(in srgb,var(--emberyl-sage) 24%,var(--av-surface))!important; }
body[data-view][data-view] .life-dashboard-item:nth-child(4n) .life-dashboard-row-icon { background: color-mix(in srgb,var(--emberyl-blush) 28%,var(--av-surface))!important; }
body[data-view][data-view] .hmenu :is(.tab,button,a) { font-family:var(--av-ui)!important; font-size:.9375rem!important; line-height:1.4!important; }
body[data-view][data-view] .tabs>.tab { font:500 .75rem/1.3 var(--av-ui)!important; letter-spacing:0!important; text-transform:none!important; }
body[data-view][data-view] .tabs>.tab>.nav-section-label { grid-template-rows:auto auto!important; line-height:1.3!important; letter-spacing:0!important; white-space:normal!important; overflow-wrap:anywhere; min-width:0; }
body[data-view] .tabs>#qcFab { background:var(--av-yellow-soft)!important; border-color:var(--emberyl-butter)!important; }
body[data-view] .tabs>#qcFab::before, body[data-view] .tabs>#qcFab::after { background:var(--av-ink)!important; }
/* Keep the full approved width on phones; use a shallower, centered band on wide screens.
   Controls keep paper surfaces; the Today wordmark sits directly on the photograph. */
body[data-view][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .app-top {
  background-image: linear-gradient(to bottom,transparent 78%,var(--av-canvas) 100%),var(--top-img)!important;
  background-size: 100% 100%,cover!important; background-position: center,center!important;
  min-height: clamp(330px,45vw,590px)!important; padding-top: 48px!important;
}
body[data-view][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .app-top-inner { min-height: clamp(280px,38vw,510px)!important; }
body[data-view="today"][data-view][data-emberyl-visual] .brand {
  transform: none!important; margin-top: 12px!important; padding: 12px 22px!important;
  border-radius: 0; background: transparent!important; box-shadow: none!important;
}
body[data-view="today"][data-view][data-emberyl-visual] .brand-logo { height: 62px!important; transform: none!important; }
body[data-view="today"][data-view][data-emberyl-visual] .brand-logo::after { font-weight:600!important; font-size: 4.25rem!important; color: var(--av-ink)!important; letter-spacing:0!important; }
body[data-view="today"][data-view][data-emberyl-visual] .emberyl-header-mark { width: 50px!important; height: 50px!important; flex-basis: 50px!important; }
body[data-view="today"][data-view][data-emberyl-visual] .brand-tag { color: var(--av-muted)!important; font: 400 .8125rem/1.4 var(--av-ui)!important; letter-spacing: .035em!important; }
/* This photograph stays bright in either theme; the unboxed wordmark needs dark ink. */
body[data-view="today"][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .brand-logo::after,
body[data-view="today"][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .brand-tag { color:#293B49!important; }
body[data-view][data-view][data-emberyl-visual] .utility-row :is(.hburger,.acct-btn) { background: radial-gradient(circle at center,var(--av-surface) 0 19px,transparent 19.5px)!important; }
body[data-view][data-view][data-view] .app-top .date-line {
  width: max-content; max-width: calc(100% - 32px); padding: 6px 12px!important;
  border-radius: 999px; background: var(--av-surface); color: var(--av-ink)!important;
}
@media (max-width:600px) {
  body[data-view] .tabs { grid-template-columns:repeat(5,minmax(0,1fr))!important; }
  body[data-view][data-view] .tabs>.tab { min-width:0!important; font-size:clamp(10px,3.1vw,.75rem)!important; }
  body[data-view][data-view] .app { padding-bottom:var(--emberyl-bottom-clearance,calc(112px + env(safe-area-inset-bottom)))!important; }
  body[data-view][data-view] .view :is(.life-dashboard-head h1,.page-folk-heading>.section-title,.pantry-heading>.section-title,.page-primary-section>.section-title:first-child,.section:first-of-type>.section-title:first-child) { font-size: 1.875rem!important; }
  body[data-view][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .app-top { min-height: calc(66.67vw + env(safe-area-inset-top,0px))!important; padding-top: calc(44px + env(safe-area-inset-top,0px))!important; background-size:100% 100%,100% auto!important; background-position:center,center top!important; background-color:var(--av-canvas)!important; }
  body[data-view][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .app-top-inner { min-height: calc(66.67vw - 20px - env(safe-area-inset-top,0px))!important; }
  /* 2026-10-27 (Hala): the date is pinned to the band's bottom while the photo is
     top-anchored at 66.67vw, so every spare pixel of band height became blank
     canvas between the photo and the date — worst on notched phones, where the
     safe-area term inflated the band but not the photo (gap measured 61.5px at
     440px wide / 59px inset). The inner min-height now hands the safe-area term
     back and keeps a fixed ~24px of the old allowance, so the date sits a
     consistent ~27px below the photo on every phone. */
  body[data-view="today"][data-view][data-emberyl-visual] .brand { margin-top: 0!important; padding: 9px 18px!important; }
  body[data-view="today"][data-view][data-emberyl-visual] .brand-logo { height: 48px!important; }
  body[data-view="today"][data-view][data-emberyl-visual] .brand-logo::after { font-size: clamp(2.5rem,12vw,3.25rem)!important; }
  body[data-view="today"][data-view][data-emberyl-visual] .emberyl-header-mark { width: 40px!important; height: 40px!important; flex-basis: 40px!important; }
  body[data-view][data-view] .life-dashboard-row-copy { min-width: 0; }
  body[data-view][data-view] .life-dashboard-row-copy strong { overflow-wrap: anywhere; }
  body[data-view][data-view] :is(.exec-subtabs,.pant-tabs,.av-actions) { flex-wrap: wrap; }
  body[data-view][data-view] :is(.exec-subtab,.pant-tab) { flex:1 1 auto!important; min-width:min-content!important; overflow-wrap:normal; word-break:normal; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
  /* Do not retain viewIn's translated first frame or fill mode. A near-zero
     route animation can still contribute transient scrolling overflow. */
  .view.active { animation:none!important; }
}
/* Approved A export, unchanged. Clip only its botanical mark from the 1200x460
   transparent lockup: source rectangle x880/y100/w180/h180. Keep live wordmark
   text and the app's existing tagline; this is not the native app-icon asset. */
.emberyl-soft-mark {
  display:inline-block; background-image:url('emberyl-logo-a-quicksand-approved.png');
  background-repeat:no-repeat; background-size:666.666667% 255.555556%;
  background-position:86.274510% 35.714286%;
}
/* The old wordmark spans were absolutely positioned raster masks. The new
   botanical span is an ordinary visible flex item, not one of those stencils. */
body[data-view][data-view] .brand-logo .emberyl-soft-mark {
  position:static!important; inset:auto!important; -webkit-mask:none!important;
  mask:none!important; clip-path:none!important; transform:none!important;
}
#signupConfirmation .emberyl-soft-mark { display:block; width:60px; height:60px; margin:0 auto 16px; }
/* 2026-10-27 wreath logo wiring (Hala approved variant A, "Cross of Light").
   The wordmark lockup file above is unchanged; these per-surface backgrounds
   override its cropped symbol: the header beside the live wordmark uses the
   simplified flame mark, the welcome and confirmation screens use the full
   wreath. Both assets are transparent PNGs at repository root. */
.brand-logo .emberyl-soft-mark { background-image:url('emberyl-flame-mark-v1.png'); background-size:contain; background-position:center; }
.emberyl-welcome-flame.emberyl-soft-mark { background-image:url('emberyl-wreath-mark-v1.png'); background-size:contain; background-position:center; }
#signupConfirmation .emberyl-soft-mark { background-image:url('emberyl-wreath-mark-v1.png'); background-size:contain; background-position:center; }
/* Reserve actual touch-target geometry rather than the legacy 20px/36px grid. */
body[data-view="goals"][data-view] .goal-row { grid-template-columns:44px minmax(0,1fr) 44px 44px!important; gap:8px!important; }
body[data-view="goals"][data-view] .goal-row>.check { width:44px!important; height:44px!important; margin-top:0!important; }
body[data-view="goals"][data-view] .goal-row>.icon-btn { width:44px!important; height:44px!important; }
body[data-view="goals"][data-view] .goal-text { font-size:1.125rem!important; overflow-wrap:anywhere; }
body[data-view="goals"][data-view] .goal-next-move { flex-wrap:wrap; }
body[data-view="goals"][data-view] :is(.goal-next-move span,.goal-tags .pri-pill,.goal-row-options) { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; box-sizing:border-box; }
body[data-view="goals"][data-view] .goal-row>.le-share { grid-column:2/-1; }
/* Auth lives outside .view. Override its legacy14px rule without disabling zoom. */
#authOverlay input:not([type="checkbox"]):not([type="radio"]),
#authOverlay select, #authOverlay textarea { font-family:var(--av-ui)!important; font-size:max(16px,1rem)!important; }
#habitOverlay :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select),
#view-all :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) { font-size:max(16px,1rem)!important; }
#authOverlay .modal { box-sizing:border-box; width:100%!important; max-width:420px!important; padding:52px 20px 24px!important; }
#authOverlay :is(.auth-pane,#authForms,#signupConfirmation) { min-width:0; max-width:100%; }
#authOverlay :is(.auth-pane,#signupConfirmation) h2 { font:600 1.5rem/1.25 var(--av-display)!important; }
#authOverlay :is(.sub,.hint,.auth-device-note) { overflow-wrap:anywhere; }
#authOverlay :is(.hint,.auth-device-note) { font:400 .875rem/1.5 var(--av-ui)!important; }
#authOverlay .auth-tab { font:var(--av-control)!important; letter-spacing:0!important; text-transform:none!important; }
#authOverlay .modal-actions>.btn { min-width:0; max-width:100%; }
#authOverlay .modal-actions { position:static!important; padding:12px 0 0!important; background:transparent!important; }
#signupConfirmation { padding:0!important; }
#signupConfirmation .sub { margin-bottom:12px!important; }
#confirmationEmail { overflow-wrap:anywhere; }
body[data-view][data-view] .life-dashboard.is-editing .life-card-edit { position:static; display:flex; justify-content:flex-end; margin-top:6px; }
body[data-view][data-view] .life-dashboard.is-editing .life-dashboard-item { display:flex; flex-direction:column; }
body[data-view][data-view] .life-dashboard.is-editing :is(.life-dashboard-card,.life-dashboard-stack) { height:auto; flex:1 0 auto; }
body[data-view][data-view] .life-card-edit button { width:auto; min-width:64px; height:auto; min-height:44px; padding:8px 12px; border-radius:var(--av-radius-control); color:var(--av-blue); font:var(--av-control); }
body[data-view][data-view] :is(.life-dashboard-edit-help,.life-dashboard-library-note) { font:var(--av-helper)!important; color:var(--av-muted)!important; overflow-wrap:anywhere; }
@media(max-width:600px) {
  #authOverlay { padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))!important; }
  #authOverlay .modal { max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important; }
}
/* Overview keeps the live detail; the tool catalog beneath it is quick navigation.
   The rem minimum lets enlarged text naturally reduce the number of columns. */
body[data-view][data-view] .life-dashboard .life-dashboard-grid {
  display:grid!important; grid-template-columns:repeat(auto-fit,minmax(min(100%,max(8rem,calc(33.333% - 8px))),1fr))!important;
  gap:12px!important; margin-top:16px;
}
body[data-view][data-view] .life-dashboard .life-dashboard-item { grid-column:auto!important; min-width:0; }
body[data-view][data-view] .life-dashboard-head { flex-wrap:wrap; align-items:flex-start; }
body[data-view][data-view] .life-dashboard-head>div { min-width:0; flex:1 1 12rem; }
body[data-view][data-view] .life-dashboard-head h1 { overflow-wrap:anywhere; }
body[data-view][data-view] :is(.life-dashboard-edit,.life-dashboard-add) { min-height:44px; font:var(--av-control)!important; letter-spacing:0!important; text-transform:none!important; }
body[data-view][data-view] .hub-overview-open>span:first-child { min-width:0; overflow-wrap:anywhere; }
body[data-view][data-view][data-view][data-view] .life-dashboard .life-dashboard-card {
  display:flex!important; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; min-height:100px!important; padding:12px!important; text-align:center;
  border:1px solid var(--av-border)!important; border-radius:var(--av-radius-tile)!important;
  background:var(--av-surface)!important; box-shadow:none!important;
}
/* Home & Family dashboard compaction (Hala, 2026-10-27): same tiles and content,
   smaller footprint so the tool catalog sits noticeably higher. Scoped to lifehub;
   careerhub and socialhub keep the standard tile size. */
body[data-view="lifehub"][data-view][data-view][data-view] .life-dashboard .life-dashboard-card {
  gap:5px; min-height:76px!important; padding:9px 10px!important;
}
body[data-view="lifehub"][data-view][data-view][data-view][data-view] .life-dashboard :is(.life-dashboard-card-top svg,.life-dashboard-row-icon,.life-dashboard-row-icon svg) {
  width:26px!important; height:26px!important; flex:0 0 26px;
}
body[data-view="lifehub"][data-view][data-view] .life-dashboard .life-dashboard-grid {
  gap:9px!important; margin-top:8px!important;
}
body[data-view][data-view] .life-dashboard .life-dashboard-card h2 {
  margin:0!important; font:var(--av-control)!important; letter-spacing:0!important;
  color:var(--av-ink)!important; overflow-wrap:anywhere; max-width:100%;
}
body[data-view][data-view] .life-dashboard .life-dashboard-card-top { display:flex; justify-content:center; }
body[data-view][data-view][data-view][data-view] .life-dashboard :is(.life-dashboard-card-top svg,.life-dashboard-row-icon,.life-dashboard-row-icon svg) { width:32px!important; height:32px!important; flex:0 0 32px; }
body[data-view][data-view] .life-dashboard-grid :is(.life-dashboard-card p,.dashboard-next-list,.dashboard-next-more,.life-dashboard-row-arrow,.life-stack-controls,.life-dashboard-eyebrow,.life-dashboard-card-top>span) { display:none!important; }
body[data-view][data-view] .day-grid { flex-wrap:wrap; gap:4px; }
body[data-view][data-view] .day-chip {
  display:inline-flex!important; align-items:center; justify-content:center; box-sizing:border-box;
  width:max(44px,2.75rem)!important; height:max(44px,2.75rem)!important; flex:0 0 auto;
  padding:0!important; line-height:1!important; letter-spacing:0!important; text-align:center;
}
@media(max-width:600px) {
  body[data-view][data-view] .life-dashboard .life-dashboard-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,max(8rem,calc(50% - 6px))),1fr))!important; }
  body.emberyl-keyboard-open :is(.tabs,#qcFab) { display:none!important; }
}
/* Walkthrough polish: place the complete live lockup inside the arch. The art
   and its layout share one height, so the greeting no longer relies on offsets. */
body[data-view="today"][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .app-top {
  --today-art-height:max(clamp(256px,66.667vw,590px),16rem);
  min-height:0!important; padding:0!important; margin-bottom:16px!important; background-color:var(--av-canvas)!important;
  background-size:100% var(--today-art-height),auto var(--today-art-height)!important;
  background-position:center top,center top!important; background-repeat:no-repeat!important;
}
body[data-view="today"][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .app-top-inner {
  min-height:0!important; padding:0!important;
}
body[data-view="today"][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .header {
  position:relative!important; height:var(--today-art-height); min-height:0!important;
  margin:0!important; padding:0!important;
}
body[data-view="today"][data-view][data-emberyl-visual]:not(.focus-reduced-visuals) .brand {
  position:absolute!important; top:44%!important; left:52.7%!important;
  width:56.7%!important; max-width:348.3px!important; margin:0!important; padding:0!important;
  transform:translate(-50%,-50%)!important; text-align:center;
}
body[data-view="today"][data-view][data-emberyl-visual] .brand-logo {
  display:flex!important; flex-direction:row; align-items:center; justify-content:center; gap:.35rem;
  width:100%!important; max-width:100%!important; height:auto!important; min-height:0!important;
  aspect-ratio:auto!important; overflow:visible!important;
}
body[data-view="today"][data-view][data-emberyl-visual] .brand-logo::after {
  /* A little more room inside the arch, without shrinking the rest of Today. */
  order:0; font-size:clamp(1.215rem,7.29vw,3.0375rem)!important; line-height:1.15!important;
}
body[data-view="today"][data-view][data-emberyl-visual] .emberyl-header-mark {
  width:clamp(32.4px,7.29vw,40.5px)!important; height:clamp(32.4px,7.29vw,40.5px)!important;
  order:1; flex-basis:clamp(32.4px,7.29vw,40.5px)!important;
}
body[data-view="today"][data-view][data-emberyl-visual] .brand-tag {
  margin:.5rem 0 0!important; padding:0!important; white-space:normal!important;
  font-size:.75rem!important; line-height:1.4!important; letter-spacing:0!important;
}
body[data-view="today"][data-view][data-emberyl-visual] #todayHero {
  min-height:0!important; margin:0!important; padding:8px 16px 8px!important;
}
body[data-view="today"][data-view][data-emberyl-visual] #todayHero :is(.today-hero-inner,.day-context,.hero-greet) {
  transform:none!important; margin:0!important; padding:0!important; min-height:0!important;
}
body[data-view="today"][data-view][data-emberyl-visual] #todayHero .hero-greet { font:600 1.25rem/1.4 var(--av-display)!important; }
body[data-view="today"][data-view] .today-day-tools { margin-top:0!important; flex-wrap:wrap; }
body[data-view="today"][data-view] .today-day-date { order:2; margin-left:auto; text-align:right; white-space:normal; }
body[data-view="today"][data-view] .today-focus-launch { order:1; }
body[data-view="today"][data-view] #todayAllBtn { margin-top:20px!important; }
body[data-view="today"][data-view] #todayAll .section-title {
  font:600 1.125rem/1.4 var(--av-display)!important; letter-spacing:0!important;
  text-transform:none!important; margin-bottom:12px!important;
}
body[data-view][data-view][data-view] .app-top .date-line {
  left:auto!important; right:16px!important; width:auto!important; max-width:calc(100% - 32px);
  padding:0!important; margin:0!important; border:0!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important; text-align:right!important;
}
/* A drawn cross has symmetric geometry; a font's plus can have an off-center
   baseline. Preserve the button's accessible name and comfortable target. */
body[data-view] #qcFab { display:flex!important; align-items:center; justify-content:center; padding:0!important; font-size:0!important; }
body[data-view] #qcFab::before, body[data-view] #qcFab::after {
  content:""; position:absolute; top:50%!important; left:50%!important;
  margin:0!important; padding:0!important; transform:translate(-50%,-50%)!important;
  border:0!important; border-radius:2px; background:var(--av-ink)!important;
}
body[data-view] #qcFab::before { width:18px!important; height:2px!important; }
body[data-view] #qcFab::after { width:2px!important; height:18px!important; }
/* Forms retain vertical scrolling and browser zoom. Their intrinsic input/grid
   widths cannot push the modal sideways, and editable text avoids iOS autozoom. */
body[data-view] .overlay { overflow-x:hidden; }
body[data-view] .overlay :is(.modal,.exec-modal,.field,.exec-field,.composer-field,.goal-composer,form) {
  box-sizing:border-box; min-width:0; max-width:100%;
}
/* Outrank the legacy .field input rule with its four :not() attributes. */
body[data-view] :is(#execOverlay,#habitOverlay,#goalModalOverlay,#authOverlay).overlay :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select),
body[data-view] .overlay :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  box-sizing:border-box; min-width:0; max-width:100%; font-size:max(16px,1rem)!important;
}
body[data-view] #goalModalOverlay :is(.chip,.btn) {
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  text-align:center!important; box-sizing:border-box; min-height:44px!important; max-width:100%;
  font:var(--av-control)!important; letter-spacing:0!important; text-transform:none!important;
  padding:8px 12px!important; line-height:1.35!important; white-space:normal!important;
}
body[data-view] #goalModalOverlay :is(.chip-row,.gc-row,.gc-cadence) { flex-wrap:wrap; min-width:0; }
body[data-view] #goalModalOverlay .goal-composer-actions { display:flex; flex-wrap:wrap; gap:8px; width:100%; min-width:0; }
body[data-view] #goalModalOverlay .goal-composer-actions .btn { flex:1 1 7rem; min-width:0; max-width:100%; }
.emberyl-founder-letter { padding:48px 24px 24px!important; max-width:620px!important; }
body[data-view] #founderDesktopBtn {
  min-width:44px; min-height:44px; padding:8px 12px;
  font:var(--av-control)!important; letter-spacing:0!important;
  background:var(--av-surface)!important; color:var(--av-ink)!important;
  border:1px solid var(--av-border); border-radius:var(--av-radius-control);
  text-shadow:none!important;
}
.emberyl-founder-letter h2 { font:600 1.75rem/1.25 var(--av-display)!important; color:var(--av-ink)!important; margin:8px 0 24px!important; }
.emberyl-founder-letter p { font:var(--av-body); color:var(--av-ink); margin:0 0 20px; }
.emberyl-founder-letter .emberyl-founder-kicker { font:var(--av-meta); color:var(--av-muted); }
.emberyl-founder-letter .emberyl-founder-contact { padding-top:16px; border-top:1px solid var(--av-border); }
.emberyl-founder-letter a { color:var(--av-blue); overflow-wrap:anywhere; text-underline-offset:3px; }
.emberyl-founder-socials { display:flex; flex-wrap:wrap; gap:4px 16px; }
.emberyl-founder-socials a { display:inline-flex; align-items:center; min-height:44px; }
.emberyl-founder-family { display:block; width:100%; height:auto; margin-top:24px; border-radius:16px; }
.devotional-reminder[hidden] { display:none!important; }
@media(max-width:600px) {
  body[data-view] .overlay .exec-2col { grid-template-columns:minmax(0,1fr)!important; }
  body[data-view] .overlay :is(.modal,.exec-modal) { width:100%!important; margin-left:0!important; margin-right:0!important; overflow-x:hidden; }
}
/* Account calendar controls share state with Datebook without repainting profile edits. */
/* Disclosure labels are anonymous flex items. At enlarged text their default
   min-content width can push even a closed section beyond the Account sheet. */
#accountPanel summary {
  min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
#accountPanel summary>span { min-width:0; overflow-wrap:anywhere; }
#accountPanel summary::after { flex:0 0 auto; }
#accountPanel :is(.acct-fold-body,.acct-inline-body,.focus-support-grid) { min-width:0; max-width:100%; }
#accountPanel :is(.toggle-row,.security-setting-row,.focus-support-choice) { flex-wrap:wrap; min-width:0; }
#accountPanel :is(.toggle-row,.security-setting-row,.focus-support-choice)>:is(span,div) { min-width:0; overflow-wrap:anywhere; }
#accountPanel .focus-support-choice>span { flex:1 1 9rem; }
#accountPanel .focus-support-choice>select { max-width:100%; }
#accountPanel :is(button,input,select,textarea) { max-width:100%; }
#acctCalendars .cal-provider{flex-wrap:wrap;gap:12px;min-width:0;align-items:center}
#acctCalendars .cal-provider>div{flex:1 1 150px;min-width:0;overflow-wrap:anywhere}
/* Override the shared !important .btn font shorthand only for these account
   actions; keep the 16px baseline and scale with the user's root text size. */
#acctCalendars .cal-provider .btn{min-height:44px;min-width:100px;font-size:max(16px,1rem)!important;line-height:1.3;white-space:normal;letter-spacing:normal}
#acctCalendars .cal-provider span,.cal-feedback{font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.cal-feedback:empty{display:none}
.cal-feedback{margin:8px 0;color:var(--ink)}
.cal-feedback-error{color:var(--ember-error,#923f32)}
body[data-theme="dark"] .cal-feedback-error{color:#f4b1a5}
.cal-feedback:focus-visible{outline:2px solid var(--ink);outline-offset:4px}