/* Quiet, tactile weather care, next to the actual miniature campsite. */
.care-panel{width:358px;padding:22px 24px}
.care-panel .panel-heading{position:sticky;top:-22px;z-index:3;background:var(--paper);padding:6px 0 9px;margin-top:-2px}
.care-panel .panel-intro{margin-bottom:17px}
body:has(#side-panel.care-panel:not([hidden])) #panel-backdrop{background:#071b1414;backdrop-filter:none}
.care-story{display:flex;align-items:center;gap:13px;padding:16px;border-radius:12px;background:linear-gradient(125deg,#dce7e2,#e9ebe0);border:1px solid #cad8ca7d}
.care-weather-icon{width:36px;height:36px;flex:none;display:grid;place-items:center;color:#657f73}
.care-weather-icon svg{width:31px;height:31px;stroke-width:1.15}
.care-story small{font-size:7px;letter-spacing:1.7px;color:#7f9384}
.care-story p{font-size:11px;line-height:1.85;color:#58715e;margin:6px 0 0}
.care-surfaces{margin:22px 0 24px;display:grid;gap:17px}
.care-surface{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:6px;align-items:center}
.care-surface>span{display:flex;align-items:center;gap:7px;font-size:10px;color:#63795d}
.care-surface>span svg{width:15px;height:15px;stroke-width:1.25}
.care-surface>strong{font-size:9px;color:#8a977e;font-weight:400}
.care-level{height:4px;border-radius:10px;overflow:hidden;background:#dce1d2}
.care-level>span{display:block;height:100%;border-radius:inherit;background:#8ca69a;transition:width .7s ease}
.care-surface>small{font-size:8px;color:#829375;text-align:right;min-width:30px}
.care-section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.care-section-heading h3{font-size:11px;font-weight:500;color:#526c4e;letter-spacing:1px;margin:0}
.care-section-heading>span{font-size:8px;color:#97a18c}
.care-actions{display:grid;gap:10px}
.care-action{display:flex;align-items:center;gap:11px;width:100%;padding:15px 12px;text-align:left;border:1px solid #acb99a7a;background:#fffef454;border-radius:11px;transition:background .2s,border-color .2s,transform .2s;color:#455f41;min-height:83px}
.care-action:hover:enabled{background:#e4ead9;border-color:#8a9f7c;transform:translateY(-1px)}
.care-action:active:enabled{transform:translateY(1px);background:#d8e3cf}
.care-action:disabled{opacity:.5;cursor:default}
.care-action-icon{width:34px;height:34px;flex:none;border-radius:50%;background:#dce4d4;display:grid;place-items:center;color:#708665}
.care-action-icon>svg{width:21px;height:21px;stroke-width:1.15}
.care-action-copy{flex:1;min-width:0}
.care-action-copy>b{display:block;font-family:"Songti SC","STSong",serif;font-size:15px;font-weight:400;letter-spacing:.6px;margin-bottom:5px}
.care-action-copy>small{display:block;font-size:9px;line-height:1.65;color:#819174}
.care-action-end{width:43px;display:flex;align-items:center;flex-direction:column;gap:6px;flex:none;color:#829472}
.care-action-end svg{width:19px;height:19px;stroke-width:1.2}
.care-action-end small{font-size:7px}
.care-action.just-worked .care-action-end svg{animation:care-sweep .7s ease}
.care-footnote{font-size:9px;line-height:1.9;color:#94a087;margin:17px 1px}
.care-footer{display:flex;gap:9px;margin-top:19px;padding-top:17px;border-top:1px solid #adb89d42}
.care-footer>.primary{flex:1}.care-footer>.secondary{font-size:9px;padding:0 11px}
.weather-trace-link{display:flex;align-items:center;text-align:left;gap:9px;padding:12px;border:1px solid #bac8b080;background:#e5eadc88;border-radius:10px;width:100%;margin:13px 0 0;color:#74876b}
.weather-trace-link>svg{width:18px;height:18px;flex:none}
.weather-trace-link>span{flex:1;min-width:0}.weather-trace-link b{display:block;font-size:10px;font-weight:500;margin-bottom:3px}.weather-trace-link small{font-size:9px;line-height:1.7;display:block;color:#93a086}
.weather-trace-link>svg:last-child{width:13px;height:13px}
.tool-btn.has-care:before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#e7d6ac;right:6px;top:5px;box-shadow:0 0 7px #f4deb14d}
@keyframes care-sweep{0%,100%{transform:rotate(0)}40%{transform:translate(-4px,2px) rotate(-28deg)}75%{transform:translate(4px,-2px) rotate(20deg)}}
@media(max-width:760px){
  .care-panel{left:12px;right:12px;top:80px;bottom:14px;width:auto;padding:20px 22px;border-radius:15px}
  .care-panel .panel-heading{top:-20px}.care-panel .panel-heading h2{font-size:22px}
  .care-panel .panel-intro{font-size:10px;margin-bottom:14px}
  .care-story{padding:13px}.care-story p{font-size:10px}.care-surfaces{margin:18px 0 22px;gap:13px}
  .care-action{min-height:75px;padding:12px 10px;gap:9px}.care-action-copy>b{font-size:14px}.care-action-copy>small{font-size:8px}
  .care-footnote{font-size:8px}.care-footer{margin-top:13px;padding-top:14px}
  .ritual-mode .scene-tools{gap:3px}.ritual-mode .tool-btn{width:25px;height:27px}
  .tool-btn.has-care:before{width:4px;height:4px;right:2px;top:2px}
}
body:has(#app.reduced-motion) .care-level>span,body:has(#app.reduced-motion) .care-action{transition:none}
body:has(#app.reduced-motion) .care-action.just-worked .care-action-end svg{animation:none}
@media(prefers-reduced-motion:reduce){.care-action.just-worked .care-action-end svg{animation:none}.care-level>span,.care-action{transition:none}}