/* Cora 1.9.4 — public feature storytelling + desktop sidebar refinement.
   Goals: readable public explanations, one major explainer per row, and a calmer Cora-only desktop palette. */

/* ---------- Public possibilities: one major explainer per row ---------- */
#authView.public-v182 .public-universe-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
#authView.public-v182 .public-universe-grid .universe-explainer.universe-wide{
  grid-column:1 / -1!important;
  width:100%!important;
  min-height:0!important;
  padding:34px 36px 30px!important;
  border-radius:32px!important;
}
#authView.public-v182 .universe-explainer>i{
  width:52px!important;
  height:52px!important;
  border-radius:17px!important;
}
#authView.public-v182 .universe-explainer>div{
  margin-top:22px!important;
}
#authView.public-v182 .universe-explainer>div>small{
  font-size:10px!important;
  letter-spacing:.12em!important;
}
#authView.public-v182 .universe-explainer>div>strong{
  max-width:760px!important;
  font-size:clamp(22px,2.05vw,30px)!important;
  line-height:1.08!important;
}
#authView.public-v182 .universe-explainer>div>p{
  max-width:880px!important;
  margin-top:11px!important;
  color:#6f6879!important;
  font-size:14px!important;
  line-height:1.65!important;
  letter-spacing:-.006em!important;
}
#authView.public-v182 .public-feature-flow{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:25px!important;
}
#authView.public-v182 .public-feature-flow>span{
  min-height:154px!important;
  padding:18px 19px 17px!important;
  border-radius:20px!important;
  border-color:rgba(100,79,180,.085)!important;
  background:rgba(255,255,255,.72)!important;
}
#authView.public-v182 .public-feature-flow b{
  width:27px!important;
  height:27px!important;
  border-radius:9px!important;
  font-size:10px!important;
}
#authView.public-v182 .public-feature-flow em{
  margin-top:12px!important;
  color:#725fc9!important;
  font-size:10px!important;
  line-height:1.2!important;
  letter-spacing:.09em!important;
}
/* Explicitly reset tracking inherited from .universe-card small. Explanations must read like body copy. */
#authView.public-v182 .public-feature-flow small{
  margin-top:9px!important;
  color:#686270!important;
  font-size:13.5px!important;
  font-weight:520!important;
  line-height:1.58!important;
  letter-spacing:0!important;
  word-spacing:normal!important;
}
#authView.public-v182 .universe-explainer>span{
  margin-top:22px!important;
  padding-top:18px!important;
  font-size:13.5px!important;
  line-height:1.45!important;
  letter-spacing:-.01em!important;
}

/* Secondary possibility cards also get more desktop breathing room. */
#authView.public-v182 .public-universe-grid>.universe-card:not(.universe-explainer){
  min-height:220px!important;
  padding:23px!important;
}
#authView.public-v182 .public-universe-grid>.universe-card:not(.universe-explainer) p{
  color:#706978!important;
  font-size:13px!important;
  line-height:1.6!important;
  letter-spacing:0!important;
}
#authView.public-v182 .public-universe-grid>.universe-card:not(.universe-explainer)>span{
  font-size:12px!important;
  letter-spacing:0!important;
}

@media (max-width:1100px){
  #authView.public-v182 .public-universe-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #authView.public-v182 .public-universe-grid .universe-explainer.universe-wide{grid-column:1/-1!important;padding:30px!important}
  #authView.public-v182 .public-feature-flow{grid-template-columns:1fr!important}
  #authView.public-v182 .public-feature-flow>span{min-height:0!important}
}
@media (max-width:760px){
  #authView.public-v182 .public-universe-grid{grid-template-columns:1fr!important;gap:10px!important}
  #authView.public-v182 .public-universe-grid .universe-explainer.universe-wide{padding:22px 19px!important;border-radius:25px!important}
  #authView.public-v182 .universe-explainer>div>strong{font-size:21px!important;line-height:1.12!important}
  #authView.public-v182 .universe-explainer>div>p{font-size:14px!important;line-height:1.62!important}
  #authView.public-v182 .public-feature-flow{gap:8px!important;margin-top:18px!important}
  #authView.public-v182 .public-feature-flow>span{padding:16px!important;border-radius:18px!important}
  #authView.public-v182 .public-feature-flow small{font-size:13.5px!important;line-height:1.55!important;letter-spacing:0!important}
}

/* ---------- Desktop app shell / sidebar ---------- */
@media (min-width:901px){
  :root{
    --cora-sidebar-expanded:244px;
    --cora-sidebar-collapsed:78px;
  }

  .sidebar{
    padding:16px 13px 14px!important;
    background:rgba(249,248,252,.965)!important;
    border-right:1px solid rgba(74,62,111,.075)!important;
    box-shadow:14px 0 46px rgba(45,35,80,.035)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.08)!important;
    backdrop-filter:blur(28px) saturate(1.08)!important;
  }
  .sidebar-head{
    margin-bottom:6px!important;
  }
  .sidebar-collapse{
    color:#777082!important;
    border-color:rgba(82,70,124,.10)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 8px 22px rgba(53,42,92,.09)!important;
  }
  .sidebar-collapse:hover{
    color:#654fca!important;
    background:#fff!important;
  }

  .main-nav{
    padding:0 2px 12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .main-nav::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
  .main-nav>small{
    margin:17px 11px 7px!important;
    color:#96909f!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.11em!important;
  }
  .main-nav button{
    min-height:43px!important;
    margin:2px 0!important;
    padding:0 12px!important;
    gap:11px!important;
    border-radius:13px!important;
    color:#625e6a!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .main-nav button span{
    color:inherit!important;
    font-size:12.8px!important;
    font-weight:620!important;
    letter-spacing:-.012em!important;
  }
  /* One palette authority: no teal, green, brown or module-specific icon colors in desktop navigation. */
  .main-nav button svg,
  .main-nav [data-view] svg,
  .main-nav [data-view="recipes"] svg,
  .main-nav [data-view="settings"] svg{
    color:#7d7788!important;
    stroke:currentColor!important;
  }
  .main-nav button:hover{
    color:#373140!important;
    background:rgba(117,92,207,.065)!important;
    transform:none!important;
  }
  .main-nav button:hover svg{
    color:#725ed0!important;
  }
  .main-nav button.active,
  .main-nav button.active:hover{
    color:#fff!important;
    background:linear-gradient(135deg,#2c2738 0%,#39304d 100%)!important;
    box-shadow:0 10px 24px rgba(45,36,65,.14)!important;
  }
  .main-nav button.active span{color:#fff!important}
  .main-nav button.active svg,
  .main-nav button.active:hover svg{
    color:#b9a9ff!important;
  }
  .main-nav button>i{
    background:#735fd1!important;
    color:#fff!important;
  }

  .sidebar-user{
    margin-top:8px!important;
    padding:8px!important;
    border:1px solid rgba(82,70,124,.075)!important;
    background:rgba(255,255,255,.72)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
  }
  .sidebar-user>b{
    background:linear-gradient(145deg,#6956ce,#8a74df)!important;
    color:#fff!important;
  }
  .sidebar-user strong{color:#37313f!important}
  .sidebar-user small{color:#8b8493!important}
  .sidebar-user button,
  .sidebar-user .sidebar-profile-button{
    color:#7363c7!important;
    background:rgba(111,91,202,.075)!important;
  }
  .sidebar-user button:hover,
  .sidebar-user .sidebar-profile-button:hover{
    color:#624ec5!important;
    background:rgba(111,91,202,.12)!important;
  }

  body.sidebar-small .main-nav{
    overflow:visible!important;
  }
  body.sidebar-small .main-nav button{
    color:#777180!important;
  }
  body.sidebar-small .main-nav button.active{
    color:#fff!important;
  }
}

@media (min-width:901px) and (max-width:1180px){
  :root{--cora-sidebar-expanded:228px}
}