@import url('./base.css');
/* Content first. Green is an accent, not a background for every surface. */
:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:100%;line-height:1.5;font-optical-sizing:auto;color:#242927;background:#f5f6f5;--green:#32715b;--muted:#737b77;--line:#e3e7e4;--mint:#eaf2ed;--cream:#f5f2eb;--red:#aa3b37}
body{-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-size:.875rem}
button{min-height:2.6rem;padding:.65rem 1rem;border-radius:.7rem;font-weight:500;transition:background-color 120ms,box-shadow 120ms,transform 100ms;touch-action:manipulation}
button:hover{background:#f2f5f2}button:active:not(:disabled){transform:scale(.98)}button.primary:hover{background:#28644e}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #659c86;outline-offset:3px}
input,select,textarea{padding:.7rem .85rem;border-color:#dce2dd;border-radius:.65rem}textarea{line-height:1.7}
h1{font-size:clamp(1.8rem,2.8vw,2.25rem);line-height:1.15;letter-spacing:-.035em;font-weight:650}
h2{font-size:1.25rem;line-height:1.3;letter-spacing:-.02em;font-weight:600}h3{font-size:1rem;line-height:1.35;letter-spacing:-.015em;font-weight:600}p{letter-spacing:0}
.note{font-size:.8rem;line-height:1.65}
.shell{grid-template-columns:13.5rem minmax(0,1fr);min-height:calc(100dvh - 1.9rem)}
.sidebar{padding:1.6rem .85rem 1.1rem;gap:.3rem;border-right-color:#e3e7e3;background:rgba(250,251,250,.94);backdrop-filter:blur(18px);height:100dvh}
.brand{margin:.15rem 0 1.6rem;justify-content:center}.brand-image{width:6.6rem;max-height:6.4rem;height:auto}
.nav-label{margin:1.05rem .8rem .4rem;letter-spacing:.09em;font-size:.62rem;color:#8a918d}
.nav{padding:.68rem .8rem;min-height:2.75rem;gap:.65rem;font-size:.81rem;color:#66706a;border-radius:.6rem}
.nav.active{background:#e7efe9;color:#285b43;font-weight:600}.nav:hover{background:#edf1ed}.nav .symbol{width:1.12rem;height:1.12rem;flex:0 0 1.12rem;display:block}
.sidebar-bottom{padding:1rem .4rem 0;gap:.65rem;font-size:.69rem}.sidebar-bottom>div{display:flex;align-items:center;line-height:1.35}
.avatar-small{width:1.9rem;height:1.9rem;flex-shrink:0;margin-right:.55rem;font-size:.75rem;background:#e6ece7}.sidebar-bottom button{text-align:left;padding:.4rem .15rem;min-height:2rem}
.main{padding:0 2.5rem 3.5rem;width:100%;max-width:86rem;min-width:0;margin:0 auto}
.topbar{height:4.2rem;margin-bottom:2.2rem;border-bottom:1px solid #e3e7e4;gap:1rem}.topbar select{border:0;border-radius:.55rem;padding:.45rem 1.7rem .45rem 0;width:auto;max-width:28rem;font-weight:500;color:#5f6962}.account-label{font-size:.75rem;color:#858c87}
.page-heading{margin-bottom:1.8rem;align-items:center}.page-heading h1{margin-bottom:.4rem}.page-heading p{font-size:.84rem;line-height:1.5}
.demo-banner{font-size:.67rem;line-height:1.4;padding:.48rem 1rem;background:#edf1eb;color:#69766b;border-bottom:1px solid #e2e8df}
.toolbar{display:flex;margin:0 0 1.4rem;gap:.7rem}.toolbar .search{width:100%;max-width:24rem;background:#fff}.toolbar select{max-width:12.5rem;background:#fff}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.child-card{display:flex;flex-direction:column;align-items:flex-start;min-height:12.25rem;border-radius:1rem;padding:1.35rem;background:#fff;border-color:#e0e6e0;box-shadow:0 1px 3px #26352b03}
.child-card:hover{transform:none;border-color:#b9cdbf;box-shadow:0 4px 15px #24392c08;background:#fff}.child-card:active:not(:disabled){transform:scale(.985)}
.child-identity{display:flex;gap:.85rem;align-items:center;width:100%;margin-bottom:1.1rem}.child-name{min-width:0}.child-card h3{margin:0 0 .3rem;font-size:1.02rem;overflow-wrap:anywhere}.child-card p{margin:0;font-size:.76rem;line-height:1.5}
.avatar{font-family:inherit;width:3.55rem;height:3.55rem;flex:0 0 3.55rem;border-radius:1.05rem;font-size:1rem;background:#e9eee9}.avatar img{display:block;width:100%;height:100%;object-fit:cover}.avatar.with-photo{position:relative}.avatar.with-photo img{position:absolute;inset:0}
.badge{padding:.25rem .6rem;font-size:.67rem;line-height:1.6;font-weight:450;color:#637466;background:#f0f4ee}.badge.warm{color:#8a753f;background:#f7f2e6}.child-card>.badge{margin-bottom:1rem}
.card-footer{width:100%;margin-top:auto;padding-top:.85rem;font-size:.68rem;border-top-color:#edf0ed;color:#858c87;gap:.7rem}
.panel{border-radius:1rem;padding:1.5rem;border-color:#e1e6e1;box-shadow:0 1px 3px #26352b02}.panel h2{margin-bottom:1.1rem}
.profile-heading{gap:1.1rem;margin:1.4rem 0 1.6rem}.profile-heading .avatar{width:4.5rem;height:4.5rem;flex-basis:4.5rem;border-radius:1.35rem}.profile-heading h1{font-size:1.9rem;margin-bottom:.3rem}.profile-heading p{margin-bottom:0;font-size:.85rem}
.tabs{gap:.15rem;margin-bottom:1.5rem;border-color:#e2e7e2}.tabs button{border-bottom-width:2px;padding:.85rem 1rem;font-size:.83rem}.split{gap:1.25rem}
.observation{border-left:2px solid #d8e3d9;padding-left:1rem;margin:1.3rem 0}.observation .meta{font-size:.7rem}.observation p{font-size:.86rem;line-height:1.75}.chip{background:#f2f5f0;font-size:.65rem}.text-output{font-size:.875rem;line-height:1.8}
.callout,.callout.mint{border:1px solid #e2e7db;background:#f4f6ef;color:#62745c;font-size:.8rem;padding:1rem 1.15rem;border-radius:.85rem}.callout.mint{background:#edf4ee;border-color:#e0eae1}
.demo-profile-note{padding:1rem;border-radius:.8rem;background:#f5f7f3;margin-bottom:1rem;font-size:.8rem;line-height:1.65}.demo-profile-note p{margin:.4rem 0}.eva-panel{background:#f6f8f4;border-color:#e1e8dc}.comparison-score{background:#f5f7f3}
summary{font-size:.83rem}th,td{padding:.9rem .7rem}.stats{gap:1rem}.stat{box-shadow:none;border-radius:.8rem}
dialog{border-radius:1.2rem;border:1px solid #e2e7e0;padding:1.8rem;box-shadow:0 18px 90px #1f332929;max-width:48rem;max-height:90dvh}dialog::backdrop{background:#17271f38;backdrop-filter:blur(5px)}.privacy-dialog{max-width:55rem}
.transfer-summary{padding:1rem 0;border-bottom:1px solid var(--line)}.transfer-tools{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}.transfer-tools button,.transfer-field button{font-size:.8rem;padding:.5rem .7rem}.transfer-section{border:1px solid var(--line);border-radius:1rem;padding:.3rem 1rem;margin:.8rem 0}.transfer-section summary{font-size:1rem;font-weight:600;padding:.9rem 0}.transfer-field{margin:1rem 0}.transfer-field label{display:grid;gap:.5rem}.transfer-field textarea{font:inherit;line-height:1.55;width:100%;min-height:6rem;resize:vertical}.transfer-facts{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 1rem}.transfer-facts span{font-size:.8rem;background:#eff3ee;padding:.35rem .6rem;border-radius:.5rem}
.login{background:#f5f6f3}.login-box{padding:2.4rem;border-radius:1.3rem;box-shadow:0 10px 50px #304d3210}.login-box .brand-image{width:8rem;max-height:8rem}.login-box h1{font-size:1.65rem}#notice{font-size:.82rem;border-radius:.8rem;padding:.8rem 1.3rem}
@media(max-width:1100px){.shell{grid-template-columns:12rem minmax(0,1fr)}.main{padding:0 1.6rem 2.5rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media(max-width:760px){.shell{display:block}.sidebar{position:static;height:auto;padding:.75rem 1rem;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--line);gap:.25rem}.brand{flex-basis:100%;justify-content:flex-start;margin:0 0 .45rem;padding:0}.brand-image{width:4.6rem;max-height:4.3rem}.nav-label{display:none}.nav{font-size:.73rem;padding:.6rem .65rem;min-height:2.4rem;gap:.4rem}.nav .symbol{display:block;width:1rem;height:1rem;flex-basis:1rem}.sidebar-bottom{margin:0 0 0 auto;padding:0;flex-basis:auto;display:block}.sidebar-bottom>div{display:none}.sidebar-bottom button{padding:.4rem;font-size:.7rem}.main{padding:0 1.1rem 2rem}.topbar{height:3.5rem;margin-bottom:1.5rem}.topbar select{max-width:100%;font-size:.76rem}.account-label{display:none}.page-heading{gap:1rem;margin-bottom:1.4rem}.page-heading h1{font-size:1.8rem}.page-heading .primary{font-size:.75rem;padding:.65rem .8rem}.page-heading p{font-size:.76rem}.toolbar{flex-wrap:wrap}.toolbar .search{max-width:none}.toolbar select{max-width:none;flex:1}.grid{gap:.8rem}.child-card{padding:1.05rem;min-height:11.5rem}.child-identity{gap:.7rem}.child-card h3{font-size:.93rem}.child-card .avatar{width:3.1rem;height:3.1rem;flex-basis:3.1rem;border-radius:.95rem}.panel{padding:1.15rem}.profile-heading .avatar{width:3.7rem;height:3.7rem;flex-basis:3.7rem}.profile-heading h1{font-size:1.55rem}.tabs button{padding:.75rem .6rem;font-size:.75rem}dialog{padding:1.25rem}.form-grid{grid-template-columns:1fr}.login-box{padding:1.8rem}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.child-card{min-height:11rem}.nav .symbol{display:none}.page-heading{align-items:flex-start}.comparison-results{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled),.child-card:hover{transform:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.sidebar{background:#fafbfa;backdrop-filter:none}dialog::backdrop{backdrop-filter:none;background:#18281e66}}
@media(prefers-contrast:more){:root{--muted:#4d5750;--line:#a5b1a6}.child-card,.panel{border-color:#a5b1a6}.account-label,.card-footer{color:#4d5750}}
@media print{.main{max-width:none;margin:0;padding:0}.sidebar,.topbar{display:none!important}}
/* Use the same control height in Safari and Chromium. */
select{-webkit-appearance:none;appearance:none;min-height:2.75rem;padding-right:2.2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23737b77' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:.6rem}
.topbar select{background-color:transparent;background-position:right .3rem center}
/* Give the children more presence without adding decorative content. */
.child-card .avatar{width:5rem;height:5rem;flex-basis:5rem;border-radius:1.25rem}
.profile-heading .avatar{width:6rem;height:6rem;flex-basis:6rem;border-radius:1.6rem}
@media(max-width:760px){.child-card .avatar{width:4.5rem;height:4.5rem;flex-basis:4.5rem;border-radius:1.15rem}.profile-heading .avatar{width:5rem;height:5rem;flex-basis:5rem;border-radius:1.3rem}}