/* Shared identity from the NordStar kidsbook review site. */
:root{--bg:#eaf0f7;--surface:#fff;--surface-2:#f0f5fc;--ink:#17203c;--muted:#6e7891;--line:#dce3ee;--accent:#13205f;--accent-2:#223a91;--brand:#13205f}
body{background:radial-gradient(circle at 8% 10%,rgba(50,191,227,.13),transparent 36%),radial-gradient(circle at 92% 18%,rgba(155,57,140,.09),transparent 36%),#eaf0f7;color:var(--ink);min-height:100vh}
.workspace,.app{width:min(1560px,calc(100% - 40px));max-width:1560px;margin:0 auto;padding:24px 0 40px}
.topbar{padding:8px 0 22px;border-bottom:1px solid var(--line);gap:24px}
.brand-lockup{display:flex;align-items:center;gap:18px;min-height:48px;text-decoration:none}
.brand-lockup img{display:block;object-fit:contain;height:auto}
.brand-lockup .again-logo{width:112px;max-height:44px}
.brand-lockup .nordstar-logo{width:140px;max-height:48px}
.brand-divider{height:34px;width:1px;background:#c6cfdf}
.portal-nav{gap:10px;margin:22px 0}
.nav-item,.status-tabs button{border-radius:12px}
.nav-item.active,.status-tabs button.active,.primary,#logout,.login-panel button{background:#13205f;color:#fff;border-color:#13205f}
.panel,.metric,.content-toolbar,.demo-banner,.login-panel{border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px rgba(19,32,95,.04)}
.panel-head{background:#fafcff;border-radius:18px 18px 0 0}
.page-heading{padding:8px 0 4px}
.page-heading h1{color:#13205f;font-size:clamp(26px,3vw,36px);letter-spacing:-.8px}
button,input,textarea,select{border-radius:12px}
button.primary:hover,.nav-item.active:hover{background:#223a91}
.content-toolbar{background:rgba(255,255,255,.72);padding:18px}
.post-button.selected{background:#edf3fd;box-shadow:inset 3px 0 #223a91}
.status-tabs{gap:8px}.status-tabs button:not(.active){background:rgba(255,255,255,.7)}
dialog{border:1px solid var(--line);border-radius:22px;box-shadow:0 22px 60px rgba(19,32,95,.17)}
dialog::backdrop{background:rgba(19,32,95,.38);backdrop-filter:blur(3px)}
.login-panel{background:rgba(255,255,255,.96);padding:32px;max-width:440px}.login-panel .brand-lockup{margin-bottom:28px;justify-content:center}.login-panel h1{font-size:28px}
.session-info{color:var(--muted);font-size:14px}.session-info #roleName{font-weight:700;color:var(--accent)}
@media(max-width:600px){.workspace,.app{width:calc(100% - 24px);padding-top:16px}.topbar{align-items:center;flex-direction:row;gap:12px;flex-wrap:wrap}.brand-lockup{gap:12px}.brand-lockup .again-logo{width:84px}.brand-lockup .nordstar-logo{width:112px}.session-info{margin-left:auto;justify-content:flex-end}.role-label{flex:1 1 100%}.content-toolbar{padding:12px}.login-panel{margin:8vh 12px}.page-heading h1{font-size:27px}}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Same-origin section transitions keep the shared header visually steady. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s; }
}