/* FINAL visual shell — designed to match the approved INFECT ME! retreat mockup.
   Loaded last so it cleanly overrides all earlier experimental styling without touching app logic. */
:root{
  --rf-pink:#f72b83;
  --rf-pink-soft:#ffd8e9;
  --rf-aqua:#20b9c9;
  --rf-aqua-soft:#d9f7f8;
  --rf-lime:#9bd400;
  --rf-lime-soft:#eff9c9;
  --rf-purple:#b75bd8;
  --rf-purple-soft:#f0d9f7;
  --rf-navy:#123d55;
  --rf-ink:#183240;
  --rf-muted:#496878;
  --rf-line:#d6e5e9;
}

html,body{min-height:100%;background:#fffdfd!important;overflow-x:hidden;}
body{
  margin:0!important;
  color:var(--rf-ink)!important;
  background:
    radial-gradient(ellipse at -4% 3%,rgba(247,43,131,.11),transparent 28rem),
    radial-gradient(ellipse at 104% 2%,rgba(32,185,201,.11),transparent 30rem),
    radial-gradient(ellipse at 6% 100%,rgba(32,185,201,.07),transparent 30rem),
    radial-gradient(ellipse at 96% 100%,rgba(247,43,131,.08),transparent 32rem),
    #fffdfd!important;
}

/* === TOP RETREAT BRANDING === */
.retreat-masthead{
  width:min(1180px,calc(100% - 48px))!important;
  margin:26px auto 14px!important;
  display:grid!important;
  grid-template-columns:1fr 180px 1.25fr!important;
  align-items:center!important;
  gap:28px!important;
  position:relative!important;
  z-index:3!important;
}
.retreat-logo{align-items:flex-start!important;}
.retreat-logo strong{font-family:"DM Sans",sans-serif!important;font-size:clamp(34px,4vw,58px)!important;font-weight:800!important;font-style:italic!important;letter-spacing:-.055em!important;line-height:.92!important;}
.retreat-logo strong span{color:var(--rf-pink)!important;}
.retreat-logo strong em{color:var(--rf-lime)!important;}
.retreat-logo small{margin-top:9px!important;padding-left:4px!important;color:#17617a!important;font-size:11px!important;font-weight:800!important;letter-spacing:.30em!important;}
.retreat-heartline{width:180px!important;max-width:none!important;color:var(--rf-pink)!important;}
.retreat-tagline{text-align:right!important;min-width:0!important;}
.retreat-tagline .main{font-family:"Newsreader",Georgia,serif!important;font-size:clamp(25px,2.5vw,38px)!important;line-height:1!important;color:#17394f!important;white-space:nowrap!important;}
.retreat-tagline .main span{font-family:"Segoe Script","Brush Script MT",cursive!important;color:var(--rf-pink)!important;}
.retreat-tagline small{margin-top:10px!important;font-size:9px!important;font-weight:800!important;letter-spacing:.24em!important;color:#315f73!important;white-space:nowrap!important;}

/* === PRIMARY PANEL === */
.shell{
  width:min(900px,calc(100% - 40px))!important;
  min-height:0!important;
  margin:16px auto 20px!important;
  padding:0 0 34px!important;
  border:1px solid #cfe0e4!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(43,88,104,.10)!important;
  overflow:hidden!important;
  position:relative!important;
  isolation:isolate!important;
}
.shell::before{
  content:""!important;
  position:absolute!important;
  inset:74px 0 0!important;
  border-radius:0 0 24px 24px!important;
  z-index:-2!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}

/* watercolor fields: soft SPLASHES, not frames */
body:has(#app) .shell::before{
  background:
    radial-gradient(ellipse 230px 300px at -10px 28%,rgba(247,43,131,.31),transparent 68%),
    radial-gradient(ellipse 190px 250px at 48px 74%,rgba(188,95,219,.20),transparent 72%),
    radial-gradient(ellipse 180px 230px at 78px 45%,rgba(255,173,210,.26),transparent 72%),
    linear-gradient(90deg,#fff9fc 0 13%,rgba(255,255,255,.94) 31% 100%);
}
body:has(#friday-app) .shell::before{
  background:
    radial-gradient(ellipse 240px 315px at -12px 30%,rgba(32,185,201,.33),transparent 68%),
    radial-gradient(ellipse 190px 250px at 44px 78%,rgba(32,185,201,.17),transparent 72%),
    radial-gradient(ellipse 170px 210px at 70px 51%,rgba(125,225,232,.24),transparent 70%),
    linear-gradient(90deg,#f5feff 0 13%,rgba(255,255,255,.95) 31% 100%);
}
body:has(#saturday-app) .shell::before{
  background:
    radial-gradient(ellipse 230px 310px at -12px 28%,rgba(155,212,0,.30),transparent 68%),
    radial-gradient(ellipse 195px 255px at 40px 77%,rgba(32,185,201,.18),transparent 71%),
    radial-gradient(ellipse 170px 210px at 72px 52%,rgba(195,235,91,.25),transparent 70%),
    linear-gradient(90deg,#fbffe9 0 13%,rgba(255,255,255,.95) 31% 100%);
}
body:has(#sunday-app) .shell::before{
  background:
    radial-gradient(ellipse 235px 310px at calc(100% + 8px) 30%,rgba(183,91,216,.28),transparent 68%),
    radial-gradient(ellipse 190px 250px at calc(100% - 40px) 77%,rgba(247,43,131,.22),transparent 70%),
    radial-gradient(ellipse 170px 210px at calc(100% - 72px) 50%,rgba(225,151,233,.24),transparent 72%),
    linear-gradient(270deg,#fff5fc 0 13%,rgba(255,255,255,.95) 31% 100%);
}

/* top patient strip */
.topbar{
  min-height:74px!important;
  margin:0!important;
  padding:0 30px!important;
  border:0!important;
  border-bottom:1px solid #e4eef0!important;
  border-radius:0!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:none!important;
}
.brand-mark,.brand{font-size:14px!important;font-weight:800!important;letter-spacing:.12em!important;color:var(--rf-navy)!important;text-transform:uppercase!important;}
.brand-icon,.cross{width:34px!important;height:34px!important;border:0!important;border-radius:8px!important;background:linear-gradient(145deg,#fb2d82,#ff5d9f)!important;color:#fff!important;box-shadow:0 5px 12px rgba(247,43,131,.20)!important;}
.day-pill{font-size:10px!important;font-weight:800!important;letter-spacing:.16em!important;padding:7px 18px!important;border-radius:999px!important;background:#fff!important;}
body:has(#app) .topbar{display:grid!important;grid-template-columns:48px 1fr auto!important;align-items:center!important;}
body:has(#app) .brand-mark{grid-column:2!important;justify-self:start!important;}
body:has(#app) .topbar::after{content:"THURSDAY";grid-column:3;grid-row:1;justify-self:end;padding:7px 18px;border:1px solid rgba(247,43,131,.34);border-radius:999px;background:#fff5f9;color:#aa356c;font-size:10px;font-weight:800;letter-spacing:.16em;}

/* day pills */
body:has(#friday-app) .day-pill{border-color:rgba(32,185,201,.40)!important;background:#f2fdfe!important;color:#16798a!important;}
body:has(#saturday-app) .day-pill{border-color:rgba(155,212,0,.42)!important;background:#fbffe9!important;color:#668d00!important;}
body:has(#sunday-app) .day-pill{border-color:rgba(183,91,216,.36)!important;background:#fcf4ff!important;color:#8d3baa!important;}

/* === CONTENT: sits directly on the panel, like the approved mockup === */
body:has(#app) .content,
body:has(#friday-app) .content,
body:has(#saturday-app) .content,
body:has(#sunday-app) .content{
  margin:0!important;
  padding:56px 92px 46px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  position:relative!important;
  z-index:1!important;
  overflow:visible!important;
}
/* give left-watercolor days breathing room, right-watercolor Sunday mirrors it */
body:has(#app) .content,body:has(#friday-app) .content,body:has(#saturday-app) .content{padding-left:180px!important;padding-right:84px!important;}
body:has(#sunday-app) .content{padding-left:84px!important;padding-right:180px!important;}

/* headline/text */
.eyebrow,.welcome-kicker,.assessment-count,.review-label,.status-label{font-size:10px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important;}
body:has(#app) .eyebrow,body:has(#app) .welcome-kicker{color:#aa356c!important;}
body:has(#friday-app) .eyebrow{color:#168999!important;}
body:has(#saturday-app) .eyebrow{color:#6e9500!important;}
body:has(#sunday-app) .eyebrow{color:#913caf!important;}
h1,h2{font-family:"Newsreader",Georgia,serif!important;font-weight:500!important;letter-spacing:-.03em!important;line-height:1.02!important;color:#162d38!important;}
body:has(#friday-app) h1,body:has(#friday-app) h2{color:#183740!important;}
body:has(#saturday-app) h1,body:has(#saturday-app) h2{color:#1b3a31!important;}
body:has(#sunday-app) h1,body:has(#sunday-app) h2{color:#3a2740!important;}
.intro,.lead,.welcome-copy,.reflection-copy,.quiet-note{color:var(--rf-muted)!important;}

/* keep forms/status boxes clean and white */
.option,.scale,.review-card,.status-card,.chart-card,.scripture-card,.chart-status,.connection-error{
  background:rgba(255,255,255,.98)!important;
  border-color:#d8e6e9!important;
  box-shadow:0 2px 10px rgba(28,70,82,.035)!important;
}
.option{border-radius:13px!important;}

/* buttons */
.primary-button,.primary{min-height:54px!important;border-radius:10px!important;font-size:12px!important;font-weight:800!important;letter-spacing:.05em!important;color:#fff!important;}
body:has(#app) .primary-button{background:linear-gradient(90deg,#f93186,#ed176d)!important;box-shadow:0 7px 16px rgba(247,43,131,.18)!important;}
body:has(#friday-app) .primary{background:linear-gradient(90deg,#24bdca,#139cad)!important;box-shadow:0 7px 16px rgba(32,185,201,.18)!important;}
body:has(#saturday-app) .primary{background:linear-gradient(90deg,#a9db13,#82bd00)!important;box-shadow:0 7px 16px rgba(155,212,0,.18)!important;}
body:has(#sunday-app) .primary{background:linear-gradient(90deg,#c468dc,#a94bcf)!important;box-shadow:0 7px 16px rgba(183,91,216,.18)!important;}
.pulse-dot{background:#9cd900!important;box-shadow:0 0 0 5px rgba(156,217,0,.13)!important;}

/* subtle decorative art inspired by approved botanical/medical side motifs */
body:has(#app) .shell::after,
body:has(#friday-app) .shell::after,
body:has(#saturday-app) .shell::after,
body:has(#sunday-app) .shell::after{
  content:""!important;
  position:absolute!important;
  top:128px!important;
  width:150px!important;
  height:330px!important;
  z-index:-1!important;
  opacity:.56!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  pointer-events:none!important;
  filter:none!important;
  border-radius:0!important;
}
/* simple leaf/heart-cross SVGs; deliberately line-art like the approved mockup */
body:has(#app) .shell::after{left:18px!important;right:auto!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 330'%3E%3Cg fill='none' stroke='%23f72b83' stroke-width='3' opacity='.75'%3E%3Cpath d='M20 100c30-45 75-35 75 8 0 42-75 78-75 78S-55 150-55 108c0-43 45-53 75-8z' transform='translate(55 0)'/%3E%3Cpath d='M10 143h35l8-23 10 46 11-29 9 16h40'/%3E%3Cpath d='M34 230c20 10 38 34 44 68M43 241c-8-19-26-27-40-20 8 20 23 30 40 20zM63 261c12-22 33-29 49-17-9 22-28 30-49 17zM74 286c-5-18-21-28-36-24 4 19 20 31 36 24z'/%3E%3C/g%3E%3C/svg%3E")!important;}
body:has(#friday-app) .shell::after{left:18px!important;right:auto!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 330'%3E%3Cg fill='none' stroke='%2320aebb' stroke-width='3' opacity='.78'%3E%3Cpath d='M24 98c28-40 69-31 69 9 0 40-69 72-69 72s-69-32-69-72c0-40 41-49 69-9z' transform='translate(50 0)'/%3E%3Cpath d='M66 93v42M45 114h42'/%3E%3Cpath d='M28 215c24 20 41 48 47 90M40 239c-8-18-25-25-39-19 7 19 22 29 39 19zM61 259c13-20 33-26 48-14-10 21-28 28-48 14zM73 286c-5-18-22-27-36-22 5 18 20 29 36 22z'/%3E%3C/g%3E%3C/svg%3E")!important;}
body:has(#saturday-app) .shell::after{left:18px!important;right:auto!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 330'%3E%3Cg fill='none' stroke='%2385b900' stroke-width='3' opacity='.75'%3E%3Cpath d='M42 92h64v64H42z' rx='8'/%3E%3Cpath d='M74 72v104M22 124h104'/%3E%3Cpath d='M29 222c23 18 39 45 45 84M40 242c-8-17-24-24-37-18 7 18 21 27 37 18zM60 260c12-19 31-25 45-13-9 20-26 27-45 13zM70 284c-4-17-20-26-34-22 5 18 19 28 34 22z'/%3E%3C/g%3E%3C/svg%3E")!important;}
body:has(#sunday-app) .shell::after{right:18px!important;left:auto!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 330'%3E%3Cg fill='none' stroke='%23b75bd8' stroke-width='2.7' opacity='.74'%3E%3Cpath d='M77 55c25 16 32 40 19 61-26-4-41-24-39-50 6-5 12-9 20-11zM50 110c20 12 25 31 15 48-21-3-33-18-32-39 5-4 10-7 17-9zM92 129c18 11 22 28 13 43-18-3-29-16-28-34 4-4 9-7 15-9z'/%3E%3Cpath d='M76 66c-12 67-17 143-4 236M69 205c-23-19-45-19-60-7 17 20 37 25 60 7zM77 234c18-23 41-28 59-17-13 24-34 33-59 17zM72 270c-19-17-39-16-53-5 15 18 34 22 53 5z'/%3E%3C/g%3E%3C/svg%3E")!important;}

/* footer */
.exact-footer{width:min(900px,calc(100% - 40px))!important;margin:0 auto 28px!important;color:#315f73!important;font-size:9px!important;font-weight:800!important;letter-spacing:.24em!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:18px!important;}
.exact-footer::before,.exact-footer::after{content:"♡"!important;color:var(--rf-pink)!important;font-size:22px!important;letter-spacing:0!important;}

/* responsiveness — keep exact feel without horizontal clipping */
@media(max-width:900px){
  .retreat-masthead{grid-template-columns:1fr auto!important;width:min(760px,calc(100% - 32px))!important;gap:12px!important;}
  .retreat-logo{grid-column:1!important;}
  .retreat-heartline{display:none!important;}
  .retreat-tagline{grid-column:2!important;}
  .retreat-tagline .main{font-size:24px!important;}
  .retreat-tagline small{font-size:7px!important;letter-spacing:.16em!important;}
  body:has(#app) .content,body:has(#friday-app) .content,body:has(#saturday-app) .content{padding-left:150px!important;padding-right:54px!important;}
  body:has(#sunday-app) .content{padding-left:54px!important;padding-right:150px!important;}
}
@media(max-width:680px){
  .retreat-masthead{display:block!important;text-align:center!important;margin-top:16px!important;}
  .retreat-logo{align-items:center!important;}
  .retreat-logo strong{font-size:40px!important;}
  .retreat-logo small{font-size:8px!important;padding-left:0!important;}
  .retreat-tagline{display:none!important;}
  .shell{width:calc(100% - 20px)!important;margin-top:10px!important;border-radius:20px!important;}
  .topbar{padding:0 18px!important;min-height:66px!important;}
  .brand-mark,.brand{font-size:11px!important;letter-spacing:.08em!important;}
  body:has(#app) .topbar::after,.day-pill{font-size:8px!important;padding:6px 10px!important;}
  body:has(#app) .content,body:has(#friday-app) .content,body:has(#saturday-app) .content,body:has(#sunday-app) .content{padding:40px 26px 34px!important;}
  .shell::after{opacity:.17!important;width:120px!important;height:250px!important;top:126px!important;}
  h1{font-size:44px!important;}
  h2{font-size:35px!important;}
  .exact-footer{font-size:7px!important;letter-spacing:.16em!important;gap:8px!important;}
}