/* KidsThink AI navigation: vivid colour tiles and a blue-to-green active trail. */
.site-index .app>aside{
  background:radial-gradient(ellipse at 0 0,#bdeaff 0,transparent 48%),radial-gradient(ellipse at 100% 100%,#c8f6df 0,transparent 50%),#f2f9ff;
  border-right:1px solid #c9e4ef;
  box-shadow:8px 0 28px #075b9410;
}
.site-index .app>aside .brand{
  padding:16px 10px;margin-bottom:20px;background:#fff;
  border:1px solid #d6eaf3;border-radius:22px;box-shadow:0 7px 20px #0877f912;
}
.site-index .app>aside>nav{gap:8px;scrollbar-color:#58b7c6 transparent;scrollbar-width:thin;padding:4px 4px 8px;}
.site-index .app>aside .nav{
  --tile:#1474e6;--tile-end:#10bfcf;--wash:#eaf4ff;
  display:flex;align-items:center;gap:11px;min-height:54px;padding:10px;
  border:1px solid #d9e8f1;border-radius:17px;margin:0;background:linear-gradient(115deg,#fff 45%,var(--wash));
  color:#173f62;font-size:1rem;font-weight:750;line-height:1.35;text-align:left;
  box-shadow:0 3px 9px #124e7c06;transition:background .2s,box-shadow .2s,border-color .2s;
  white-space:normal;overflow-wrap:normal;text-decoration:none;cursor:pointer;
}
.site-index .app>aside .nav:nth-child(4n+2){--tile:#00877d;--tile-end:#15ba8e;--wash:#e2faf2}
.site-index .app>aside .nav:nth-child(4n+3){--tile:#bd6409;--tile-end:#f4a62c;--wash:#fff3df}
.site-index .app>aside .nav:nth-child(4n){--tile:#7041cd;--tile-end:#a760e0;--wash:#f2eaff}
.site-index .app>aside .nav>span{
  display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;
  border-radius:12px;background:linear-gradient(140deg,var(--tile),var(--tile-end));
  color:#fff;font-size:1.25rem;line-height:1;box-shadow:0 4px 9px #154c7720;
}
.site-index .app>aside .nav:hover:not(.active){
  background:linear-gradient(115deg,#e5f3ff,#d8f7e9);border-color:#54bcc4;
  color:#093c68;box-shadow:0 5px 14px #0877f91a;
}
.site-index .app>aside .nav.active{
  background:linear-gradient(115deg,#0867d3 0%,#087d9c 55%,#118b58 100%);
  color:#fff;border-color:#0b8c99;box-shadow:0 6px 18px #0877f92b;
}
.site-index .app>aside .nav.active>span{background:#ffffff24;color:#fff;box-shadow:inset 0 0 0 1px #ffffff35}
.site-index .app>aside .nav:focus-visible{outline:3px solid #075fc4;outline-offset:2px;}
.site-index .app>aside .sidebar-safety{background:#ffffffb8;border:1px solid #bfdfdc;border-radius:15px;margin-top:12px;padding:0;color:#245e62;}
.site-index .sidebar-safety summary{color:#245e62;padding:11px 9px;font-size:.875rem;}
@media(min-width:851px){
  .site-index .app{grid-template-columns:256px minmax(0,1fr)}
  .site-index .app>aside{position:sticky;top:0;display:flex;flex-direction:column;height:100dvh;padding:20px 13px;overflow:hidden;}
  .site-index .app>aside>nav{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;}
  .site-index .app>aside .nav{flex:0 0 auto;width:100%;}
}
@media(max-width:850px){
  .site-index .app{grid-template-columns:minmax(0,1fr)}
  .site-index .app>aside{position:static;height:auto!important;padding:12px!important;border-right:0;border-bottom:1px solid #c9e4ef;overflow:hidden;}
  .site-index .app>aside .brand,.site-index .app>aside .sidebar-safety{display:none;}
  .site-index .app>aside>nav{display:flex;flex-direction:row;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;gap:8px;padding:4px 4px 10px;}
  .site-index .app>aside .nav{flex:0 0 auto;max-width:240px;min-height:52px;font-size:.875rem;padding:9px 12px;white-space:normal;}
  .site-index .app>aside .nav>span{flex-basis:32px;width:32px;height:32px;font-size:1.125rem;}
}
@media(prefers-reduced-motion:reduce){.site-index .app>aside .nav{transition:none;}}