/* Care workspace. Scoped to the authenticated app; login stays independent. */
.shell { --font: 'Outfit', 'Segoe UI', sans-serif; font-family: var(--font); }
.shell h1,.shell h2,.shell h3,.shell button,.shell input,.shell select,.shell textarea { font-family: var(--font); }
.shell .page { max-width: 1520px; margin-inline: auto; padding-bottom: 72px; }
.shell .band { border-radius: 0 0 32px 32px; min-height: 210px; background: #11243c url('/assets/img/home-mars-clean.webp') center bottom / cover no-repeat; }
.shell .band h1 { letter-spacing: -.045em; font-size: clamp(30px,3.4vw,48px); font-weight: 650; }
.shell .band .sub { font-weight: 400; }
.shell .band-cat .mascot { transform-origin: center bottom; animation: care-sway 4s ease-in-out infinite; }
@keyframes care-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.shell .section-title { margin-block: 12px 20px; align-items: center; }
.shell .section-title h2 { font-size: 27px; font-weight: 600; letter-spacing: -.035em; }
.shell .card { padding: 24px; box-shadow: 0 8px 28px #18283e06; }
.shell .card h3 { font-size: 20px; font-weight: 600; }
.shell .btn { font-weight: 600; box-shadow: none; }
.shell .list li { padding-block: 16px; }
.shell .side { background:linear-gradient(180deg,#fff4dd,#f8ecd8); color:var(--navy); border-right:1px solid #e9dcc4; }
.shell .side-brand,.shell .side a.nav,.shell .side .signout { color:var(--navy); }
.shell .side-brand span,.shell .side-label { color:#686276; }
.shell .side a.nav.add { color:#5b4fa0; }
.shell .side a.nav:hover,.shell .side .signout:hover { background:#f7dfd2; color:var(--navy); }
.shell .side-plan { background:#f5e2d5; color:#686276; }
.shell .side-plan b { color:var(--navy); }
.shell .side a.nav { font-weight: 500; margin-bottom: 5px; }
.shell .side a.nav.on { background: #ff9c85; }
.shell .care-catcard { padding: 0; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; gap: 0; }
.shell .cat-portrait { position: relative; background: linear-gradient(145deg,#ece7fa,#faf7ff); height: 156px; display: grid; place-items: center; }
.shell .care-catcard:nth-child(3n+2) .cat-portrait { background: linear-gradient(145deg,#dfeee6,#f4faf6); }
.shell .care-catcard:nth-child(3n) .cat-portrait { background: linear-gradient(145deg,#f9e3d8,#fff7ef); }
.shell .cat-portrait img { width: 92%; height: 150px; object-fit: contain; }
.shell .cat-portrait .avatar { position: absolute; bottom: -19px; left: 20px; width: 42px; height: 42px; font-size: 18px; border: 4px solid var(--paper); }
.shell .care-catcard>.grow { padding: 28px 20px 22px; }
.shell .care-catcard .name { font-size: 24px; font-weight: 600; }
.shell .care-catcard .go { top: auto; bottom: 22px; right: 18px; width: 30px; height: 30px; }
.shell .care-catcard .chips { padding-right: 26px; margin-top: 12px; }
.shell .chip { font-weight: 500; }
.shell .addcat { min-height: 100px; align-self: stretch; }
.shell .onboarding { border: 0; background: radial-gradient(ellipse at left,#eee8fa,transparent 60%),#fffdf8; min-height: 420px; }
.shell .onboarding h2 { font-size: clamp(30px,4vw,44px); font-weight: 600; letter-spacing: -.04em; }
.shell .onboarding .step { background: #ffffffa6; border-radius: 16px; padding: 16px; }
.shell .tabs { padding-block: 12px; }
.shell .tabs a { font-weight: 500; }
.shell input,.shell select,.shell textarea { min-height: 48px; }
@media(min-width:1200px) { .shell .home-grid { grid-template-columns: minmax(0,1fr) 340px; gap: 28px; } .shell .home-grid>aside { padding-top: 62px; } }
@media(max-width:599px) { .shell .page { padding: 20px 16px 64px; } .shell .band { min-height: 160px; } .shell .cats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .shell .cat-portrait { height: 112px; } .shell .cat-portrait img { height: 108px; } .shell .care-catcard>.grow { padding: 26px 12px 16px; } .shell .care-catcard .name { font-size: 21px; } .shell .care-catcard .go { display: none; } .shell .care-catcard .chips { padding-right: 0; } .shell .cat-portrait .avatar { left: 12px; } .shell .addcat { grid-column: 1/-1; min-height: 64px; } .shell .card { padding: 20px; } }
@media(prefers-reduced-motion:reduce) { .shell .band-cat .mascot { animation:none; } }

/* Empty Home fits ordinary desktop and side-panel heights without hiding content. */
.shell:has(.onboarding) { min-height:calc(100svh - var(--preview-notice-height,0px)); }
.shell:has(.onboarding) .page { width:100%; padding:18px 28px 20px; }





.shell .onboarding { min-height:0; margin-bottom:0; padding:24px; grid-template-columns:130px minmax(0,1fr); gap:24px; text-align:left; }
.shell .onboarding>.mascot { width:130px; }
.shell .onboarding h2 { font-size:32px; }
.shell .onboarding .steps { gap:8px; }
.shell .onboarding .step { padding:12px; gap:8px; }
.shell .onboarding .step .small { line-height:1.35; }
.shell .onboarding .u-mt { margin-bottom:0; }
@media(min-width:1000px) {
 .shell:has(.onboarding) .side { height:calc(100svh - var(--preview-notice-height,0px)); }
 .shell .onboarding { padding:28px; grid-template-columns:160px minmax(0,1fr); }
 .shell .onboarding>.mascot { width:160px; }
}
@media(min-width:600px) and (max-width:999px) {
 .shell .onboarding { grid-template-columns:90px minmax(0,1fr); gap:18px; padding:18px; }
 .shell .onboarding>.mascot { width:90px; }
 .shell .onboarding .steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .shell .onboarding .step { flex-direction:column; padding:10px; font-size:14px; }
 .shell .onboarding .step .small { font-size:12px; }
 .shell .onboarding h2 { font-size:28px; }
}
@media(max-width:599px) {
 .shell:has(.onboarding) .page { padding:16px; }
 .shell .onboarding { grid-template-columns:minmax(0,1fr); text-align:left; }
 .shell .onboarding>.mascot { display:none; }
 .shell .onboarding .step { padding:10px; }
}

/* Revised direction: royal blue navigation and a clean Martian horizon. */
.shell .side { background:linear-gradient(160deg,#18283e,#0d1d32); border-right:1px solid #122137; color:#fff4dd; }
.shell .side-brand,.shell .side a.nav,.shell .side .signout,.shell .side-plan b { color:#fff4dd; }
.shell .side-brand span,.shell .side-label,.shell .side-plan { color:#c9d2e3; }
.shell .side a.nav.add { color:#e4ddff; }
.shell .side a.nav.on { background:#ff9c85; color:#18283e; }
.shell .side a.nav:hover,.shell .side .signout:hover { background:#ffffff18; color:#fff4dd; }
.shell .side a.nav.on:hover { background:#ffac98; color:#18283e; }
.shell .side-plan { background:#ffffff12; }







.home-shooting-star { position:absolute; width:85px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,#fff4dd); opacity:0; pointer-events:none; animation:home-shoot 13s linear infinite; left:35%; top:15%; }
.home-shooting-star.second { left:65%; top:8%; animation-delay:5.3s; animation-duration:17s; }
.home-planet { position:absolute; border-radius:50%; pointer-events:none; box-shadow:inset -5px -3px 6px #071426aa,0 0 14px #b6d7ff18; }
.home-planet.earth {width:20px;height:20px;left:65%;top:20%;background:radial-gradient(ellipse at 35% 35%,#d5e5d4,#47899e 35%,#316398 65%);}
.home-planet.jupiter {width:16px;height:16px;left:82%;top:10%;background:repeating-linear-gradient(12deg,#c3a18a 0 3px,#9d7964 3px 5px,#e4cbb0 5px 7px);}
@keyframes home-shoot { 0%,3% {opacity:0;transform:translate(0,0) rotate(22deg)} 4% {opacity:.9} 10% {opacity:0;transform:translate(180px,70px) rotate(22deg)} 100% {opacity:0;transform:translate(180px,70px) rotate(22deg)} }
@media(max-width:599px) {     }
@media(prefers-reduced-motion:reduce) { .home-shooting-star {animation:none;} }
@media(min-width:1000px) and (max-height:800px) {
 
 
 .shell .onboarding {padding:18px;gap:18px;grid-template-columns:110px minmax(0,1fr);}
 .shell .onboarding>.mascot {width:110px;}
 .shell .onboarding .step {padding:10px;}
}

/* Settings: choose a plan */
.plan-card .seg { display: inline-flex; gap: 4px; padding: 4px; margin: 6px 0 14px; border-radius: 999px; background: var(--lav-soft); flex-wrap: wrap; }
.plan-card .seg-btn { white-space: nowrap; min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.plan-card .seg-btn[aria-pressed="true"] { background: var(--paper); box-shadow: var(--lift); }
.plan-card .seg-btn:focus-visible { outline: 3px solid var(--lav-dark); outline-offset: 2px; }
.plan-card .plan-options { display: grid; gap: 10px; margin-bottom: 12px; }
.plan-card .plan-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.plan-card .plan-option.crew { background: var(--gold-soft); border-color: #F1DB9F; }
.plan-card .plan-option .small { display: block; margin-top: 2px; }

/* Home: install-on-your-phone tip */
.install-tip { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.install-tip h3 { margin: 0 0 4px; }
.install-tip p { margin: 0; }

/* Settings: delete account */
.narrow { max-width: 560px; margin: 0 auto; }
.danger-link { color: var(--coral-dark); font-weight: 700; }
.danger-card { border: 2px solid var(--coral-soft); }

/* Carry the approved login typography and calm surfaces through record views. */
.shell .band{background-color:#11243c;background-image:linear-gradient(90deg,#11243ce8,#11243c30),url('/assets/img/scene-1983.webp');background-position:center,bottom center;background-size:cover,cover;background-repeat:no-repeat}
.shell .band h1{font-family:Outfit,sans-serif;color:#fff4dd}
.shell .band-tip .bubble{background:#fff4dd;color:#18283e;box-shadow:0 8px 20px #08152622}
.shell .card,.shell .record,.shell .form-card{background:#fffdf8;border-color:#e9decb}
.shell input,.shell select,.shell textarea{background:#fffefa;border:1px solid #d8cbb8;border-radius:12px}
.shell input:focus-visible,.shell select:focus-visible,.shell textarea:focus-visible{outline:3px solid #b6ace2;outline-offset:2px}
.shell .tabs{background:#fffdf8;border-bottom:1px solid #e9decb;gap:5px}
.shell .tabs a.on{background:#18283e;color:#fff4dd}
.shell .btn:not(.danger):not(.light){background:#f08069;color:#18283e}
@media print{.shell .summary{background:white;color:#111}.shell .summary h1,.shell .summary h2,.shell .summary h3{color:#111}}

/* One illustrated header scene for Home, cat pages, forms and Settings. */
.shell .band{
 min-height:250px;padding:30px 40px 32px;
 background:#11243c;
 background-image:linear-gradient(90deg,#11243ce8,#11243c30),url('/assets/img/scene-1983.webp');
 background-position:center,bottom center;background-size:cover,cover;background-repeat:no-repeat;
}
.shell .band::after{content:none}
.shell .band-inner{position:static;min-height:188px;align-items:center}
.shell .band-text{position:relative;z-index:2;padding-right:180px}
.shell .band h1,.shell .band .sub{text-shadow:0 2px 15px #081326}
.shell .band-cat{position:absolute;right:34px;bottom:18px;margin:0;z-index:2}
.shell .band-cat .mascot{width:160px;transform-origin:50% 95%}
.shell .band>.home-planet,.shell .band>.home-shooting-star{z-index:1}
@media(max-width:999px){
 .shell .band{padding:24px}
 .shell .band-inner{min-height:160px}
 .shell .band.has-tip .band-text{padding-right:160px}
}
@media(max-width:599px){
 .shell .band{min-height:200px;padding:22px 16px 26px}
 .shell .band-inner{min-height:152px;gap:12px}
 .shell .band-cat{right:12px;bottom:18px}
 .shell .band-cat .mascot{width:100px}
 .shell .band-text,.shell .band.has-tip .band-text{padding-right:100px}
 .shell .band .avatar{width:48px;height:48px;font-size:1.4rem;flex-shrink:0}
 .shell .band-tip{margin-top:18px;margin-right:112px}
 .shell .band-tip .bubble{font-size:.78rem;padding:10px 12px}
 .shell .band-tip .bubble .d1{right:-14px;top:50%;margin-top:-6px}
 .shell .band-tip .bubble .d2{right:-26px;top:50%;margin-top:3px}
}