/* v1.0 — single coherent mobile layout. Loaded LAST. No screenshot text is used as an interface element.
   Approved artwork thumbnails and the business/data logic are not changed. */
:root { --bg:#F8F7FA; --cream:#F8F7FA; --paper:#FFFDFF; --line:#E5DEEA; --lav:#9D87B0; --plum:#4B2B58; --text2:#746A7B; }
html,body{margin:0;background:#F8F7FA!important;overflow-x:hidden}
.app-shell,.app-shell.inner-mode{background:#F8F7FA!important;overflow:clip;overflow-clip-margin:0}
/* The brand identity is ONE compact horizontal row on every screen, including Home. */
#brand-header.brand-header,#brand-header.brand-header.has-back,#brand-header.brand-header:not(.has-back){
  position:relative!important; inset:auto!important; transform:none!important;
  display:grid!important;grid-template-columns:62px minmax(0,1fr) 84px!important;
  align-items:center!important;justify-content:normal!important;
  gap:5px!important;height:88px!important;min-height:88px!important;
  width:100%!important;max-width:100%!important;
  padding:7px 11px!important;margin:0!important;
  background:#F9F8FB!important;background-image:none!important;
  border:0!important;border-bottom:1px solid #EBE5EF!important;
  box-shadow:none!important;overflow:hidden!important;z-index:3!important;
  pointer-events:auto!important;
}
#brand-header.brand-header::before,#brand-header.brand-header::after{content:none!important}
#brand-header .brand-logo,#brand-header.has-back .brand-logo,#brand-header:not(.has-back) .brand-logo{
  position:static!important;display:block!important;transform:none!important;
  height:64px!important;width:62px!important;min-width:0!important;max-width:62px!important;
  object-fit:contain!important;object-position:center!important;
  align-self:center!important;justify-self:start!important;margin:0!important;
  border:0!important;mix-blend-mode:multiply!important;
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 62%,transparent 99%);
  mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 62%,transparent 99%);
}
#brand-header .brand-identity,#brand-header.has-back .brand-identity,#brand-header:not(.has-back) .brand-identity{
  display:flex!important;position:static!important;transform:none!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
  text-align:center!important;
}
#brand-header .brand-name,#brand-header.has-back .brand-name,#brand-header:not(.has-back) .brand-name{
  position:static!important;display:flex!important;justify-content:center!important;align-items:center!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:50px!important;max-height:50px!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
}
#brand-header .brand-name img.approved-script,#brand-header.has-back .brand-name img.approved-script,#brand-header:not(.has-back) .brand-name img.approved-script{
  position:static!important;display:block!important;
  width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center!important;opacity:1!important;
  margin:0!important;padding:0!important;transform:none!important;
}
#brand-header .brand-subtitle,#brand-header.has-back .brand-subtitle,#brand-header:not(.has-back) .brand-subtitle{
  display:block!important;position:static!important;transform:none!important;
  margin:-1px 0 0!important;padding:0!important;
  width:100%!important;min-width:0!important;
  color:#66516D!important;
  font:400 clamp(10px,2.65vw,12px)/1.18 Georgia,'Times New Roman',serif!important;
  letter-spacing:0!important;white-space:nowrap!important;text-align:center!important;
}
#brand-header .brand-actions,#brand-header.has-back .brand-actions,#brand-header:not(.has-back) .brand-actions{
  display:flex!important;position:static!important;transform:none!important;
  margin:0!important;padding:0!important;align-self:center!important;
  justify-self:end!important;align-items:center!important;justify-content:flex-end!important;
  width:84px!important;height:auto!important;min-width:0!important;gap:5px!important;
}
#brand-header .header-quick-btn,#brand-header.has-back .header-quick-btn,#brand-header:not(.has-back) .header-quick-btn{
  position:static!important;display:grid!important;place-items:center!important;
  width:39px!important;min-width:39px!important;max-width:39px!important;
  height:39px!important;min-height:39px!important;flex:0 0 39px!important;
  margin:0!important;padding:0!important;border-radius:50%!important;
  background:#FFFDFF!important;border:1px solid #E6DDEB!important;
  color:#59366C!important;box-shadow:0 2px 10px rgba(66,45,76,.06)!important;
}
/* A clear, sticky Back row below the compact brand row. */
#back-strip.back-strip{position:sticky!important;top:0!important;z-index:35!important;margin:0!important;box-shadow:none!important;background:#F9F7FB!important;border-bottom:1px solid #EAE2EC!important}
#back-strip.back-strip[hidden]{display:none!important}
#back-strip.back-strip:not([hidden]){height:44px!important;min-height:44px!important}
#back-strip.back-strip button{display:flex!important;align-items:center!important;gap:9px!important;min-height:44px!important;padding:0 16px!important;color:#553263!important;font:500 15px/1.1 system-ui,-apple-system,'Segoe UI',sans-serif!important}
/* Home title lives ONLY in brand row; greeting and scenic composition below it. */
#screen .hero{position:relative!important;margin:0 -14px 12px!important;padding:26px 10px 17px!important;
 min-height:176px!important;height:auto!important;
 background-color:#F6F3F8!important;
 background-image:linear-gradient(180deg,rgba(250,249,252,.79),rgba(250,249,252,.62) 35%,rgba(250,249,252,.08)),url('./assets/coast-body.jpg')!important;
 background-position:center 55%!important;background-size:cover!important;background-repeat:no-repeat!important;
}
#screen .hero::before,#screen .hero::after{display:none!important}
#screen .hero-content{display:flex!important;flex-direction:column!important;gap:12px!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:120px!important}
#screen .hero .greeting{font:400 clamp(28px,7vw,37px)/1.14 Georgia,'Times New Roman',serif!important;
 color:#462651!important;text-align:center!important;margin:0!important;padding:0!important;text-shadow:0 1px 7px rgba(255,255,255,.84)!important}
#screen .hero .date-strip{font-size:clamp(10px,2.55vw,12px)!important;max-width:100%!important;
 padding:9px 10px!important;flex-wrap:wrap!important;white-space:normal!important;
 background:rgba(255,253,255,.96)!important;border:1px solid rgba(255,255,255,.98)!important;gap:3px!important}
#screen .hero .date-strip span+span:before{padding-right:4px!important}
/* Interior hero: one clean scenic background and strong readable text. */
#screen .inner-screen{padding-top:12px!important}
#screen .inner-hero,#screen .page-top{min-height:184px!important;margin:0 0 15px!important;padding:20px 18px 28px!important;
 isolation:isolate!important;contain:none!important;overflow:hidden!important;
 border-radius:21px!important;border:1px solid #E9E1EA!important;
 background-size:cover!important;background-position:center bottom!important;box-shadow:none!important}
#screen .inner-hero::after,#screen .page-top::after{display:none!important}
#screen .inner-hero{background-image:linear-gradient(180deg,rgba(253,252,254,.97) 0%,rgba(253,252,254,.90) 46%,rgba(253,252,254,.13) 100%),url('./assets/coast-body.jpg')!important}
#screen .inner-hero.hero-planner{background-image:linear-gradient(180deg,rgba(253,252,254,.97),rgba(253,252,254,.82) 48%,rgba(253,252,254,.1)),url('./assets/coast-planner.jpg')!important}
#screen .inner-hero.hero-ritual{background-image:linear-gradient(180deg,rgba(253,252,254,.97),rgba(253,252,254,.82) 48%,rgba(253,252,254,.1)),url('./assets/coast-ritual.jpg')!important}
#screen .page-top.page-practices,#screen .page-top.page-cycle{background-image:linear-gradient(180deg,rgba(253,252,254,.97),rgba(253,252,254,.86) 50%,rgba(253,252,254,.16)),url('./assets/coast-body.jpg')!important}
#screen .page-top.page-journal,#screen .page-top.page-profile{background-image:linear-gradient(180deg,rgba(253,252,254,.97),rgba(253,252,254,.86) 50%,rgba(253,252,254,.16)),url('./assets/coast-journal.jpg')!important}
#screen .inner-hero>* ,#screen .page-top>*{position:relative!important;z-index:1!important}
#screen .inner-hero h1,#screen .page-top h1{font:400 clamp(29px,7.2vw,38px)/1.12 Georgia,'Times New Roman',serif!important;color:#492B56!important;margin:8px 0!important;max-width:100%!important;overflow-wrap:break-word!important}
#screen .inner-hero p,#screen .page-top p{font:400 clamp(12px,3.3vw,14px)/1.46 system-ui,-apple-system,'Segoe UI',sans-serif!important;color:#594665!important;
 text-shadow:0 1px 5px rgba(255,255,255,.95)!important;margin:0!important;max-width:360px!important}
/* New multi-entry journal controls, compatible with previous cards. */
#screen .journal-compose{scroll-margin-top:58px}
#screen .journal-compose .panel-head{align-items:center;gap:8px;flex-wrap:wrap}
#screen .journal-compose .panel-head h2{font-size:25px}
#screen .journal-buttons{display:flex;gap:8px;flex-wrap:wrap}
#screen .journal-buttons button{flex:1 1 auto}
#screen .journal-entry{background:#FFFDFF!important;border:1px solid #E7DEEA!important;border-radius:16px!important;padding:14px!important;margin-bottom:10px!important}
#screen .journal-entry-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#screen .journal-entry time{display:block;color:#543760;font-size:13px}
#screen .journal-time{display:block;color:#83758C;font-size:11px;margin-top:4px}
#screen .journal-edit-btn{font-size:12px;padding:8px 11px;min-height:38px;white-space:nowrap;flex:0 0 auto}
#screen .journal-entry p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
#screen .subsection>h2{font-size:26px;margin:10px 0}
@media(max-width:355px){
 #brand-header.brand-header,#brand-header.brand-header.has-back,#brand-header.brand-header:not(.has-back){grid-template-columns:51px minmax(0,1fr) 73px!important;gap:3px!important;padding:6px 8px!important;height:76px!important;min-height:76px!important}
 #brand-header .brand-logo,#brand-header.has-back .brand-logo,#brand-header:not(.has-back) .brand-logo{width:51px!important;max-width:51px!important;height:55px!important}
 #brand-header .brand-name,#brand-header.has-back .brand-name,#brand-header:not(.has-back) .brand-name{height:41px!important;max-height:41px!important}
 #brand-header .brand-subtitle,#brand-header.has-back .brand-subtitle,#brand-header:not(.has-back) .brand-subtitle{font-size:9px!important}
 #brand-header .brand-actions,#brand-header.has-back .brand-actions,#brand-header:not(.has-back) .brand-actions{width:73px!important;gap:3px!important}
 #brand-header .header-quick-btn,#brand-header.has-back .header-quick-btn,#brand-header:not(.has-back) .header-quick-btn{width:35px!important;min-width:35px!important;height:35px!important;min-height:35px!important;flex-basis:35px!important}
 #screen .inner-hero h1,#screen .page-top h1{font-size:27px!important}
}